/* TurboBatch marketing site — self-contained styles. Brand-aligned with
   the app shell (red/orange racing theme, dark background, italic
   display titles) so visitors don't see a different product. */
:root {
  --tb-primary:#e10600; --tb-accent:#ff6f3b; --tb-bg:#03121f;
  --tb-surface:#08223e; --tb-surface-2:#101820; --tb-border:#29435f;
  --tb-text:#f4f7fb; --tb-muted:#a0b4c8; --tb-success:#16a34a;
  --tb-warning:#f97316; --tb-danger:#dc2626;
  --tb-radius:16px;
  --tb-shadow:0 20px 60px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body {
  /* Safety net against any single rogue element widening the page.
     The strain ticker's animated inner is ~1500px wide for the
     seamless marquee, and similar wide-content patterns repeat
     across the cockpit mockups. min-width:0 on the flex children
     already constrains the legit cases — this clip catches anything
     else that slips through (third-party embeds, future mockup
     additions). No horizontal scroll on the page itself, ever. */
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  margin: 0;
  font-family: Inter, system-ui, "Segoe UI", Arial, sans-serif;
  background: radial-gradient(circle at top left, rgba(225,6,0,.18), transparent 32%),
              linear-gradient(135deg, var(--tb-bg), #02070d 70%);
  color: var(--tb-text);
  min-height: 100vh;
  line-height: 1.5;
}
a { color: var(--tb-accent); text-decoration: none; font-weight: 800; }
a:hover { text-decoration: underline; }

/* Header */
.mk-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 14px 24px;
  background: rgba(3, 18, 31, .85);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--tb-border);
}
.mk-header .brand img { height: 40px; width: auto; }
.mk-nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mk-nav a, .mk-btn {
  border: 1px solid var(--tb-border);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color: var(--tb-text);
  padding: 8px 14px; border-radius: 999px;
  text-decoration: none; font-weight: 800; font-size: 14px;
  display: inline-flex; align-items: center; cursor: pointer;
}
.mk-nav a:hover, .mk-btn:hover { border-color: var(--tb-accent); text-decoration: none; }
.mk-btn-primary {
  background: linear-gradient(135deg, var(--tb-primary), #7a0000) !important;
  color: #fff !important; border-color: transparent !important;
}

.mk-container { width: min(1200px, 92vw); margin: 0 auto; padding: 64px 0; }

/* Checker stripe — universal divider element */
.mk-checker {
  height: 8px; border-radius: 99px;
  background: repeating-linear-gradient(90deg,#fff 0 10px,#111 10px 20px);
}

/* HERO — large logo + cockpit product shot */
.mk-hero-v2 {
  width: min(1280px, 94vw); margin: 0 auto;
  padding: 56px 0 32px;
}
.mk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
}
.mk-hero-copy { min-width: 0; }
.mk-hero-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .32em;
  text-transform: uppercase; color: var(--tb-muted); margin-bottom: 18px;
}
.mk-hero-logo {
  display: block;
  width: 100%; max-width: 540px;
  height: auto; margin: 0 0 24px;
  filter: drop-shadow(0 18px 40px rgba(225,6,0,.28));
}
.mk-hero-v2 h1 {
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05;
  font-weight: 1000; font-style: italic; text-transform: uppercase;
  margin: 0 0 16px; letter-spacing: -.005em;
}
.mk-hero-v2 h1 .accent {
  background: linear-gradient(90deg, var(--tb-primary), var(--tb-accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* The italic uppercase glyphs (especially "w") lean right and would
     otherwise clip against the gradient box / column edge. Inline-block
     + a touch of padding-right gives the slant room to render without
     pushing the headline layout. */
  display: inline-block;
  padding-right: .14em;
}
.mk-hero-v2 p.lede {
  font-size: 17px; color: var(--tb-muted); font-weight: 600;
  max-width: 580px; margin: 0 0 24px;
}
.mk-hero-v2 .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mk-hero-v2 .actions .mk-btn { font-size: 16px; padding: 12px 22px; }
.mk-hero-trust {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 22px; color: var(--tb-muted); font-size: 13px;
}
.mk-hero-trust span { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.mk-hero-trust span::before {
  content: '✓'; color: var(--tb-success); font-weight: 1000;
}

/* COCKPIT — frame that wraps any product mockup so it reads as a screenshot */
.mk-cockpit {
  border: 1px solid var(--tb-border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(8,34,62,.95), rgba(11,21,35,.95));
  box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,111,59,.18);
  overflow: hidden;
  position: relative;
}
.mk-cockpit::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.mk-cockpit-body {
  padding: 18px;
  background: radial-gradient(circle at top left, rgba(225,6,0,.10), transparent 40%);
}

/* Product mock primitives */
.mk-mock-row { display: flex; gap: 12px; align-items: center; }
.mk-mock-checker {
  height: 6px; border-radius: 99px;
  background: repeating-linear-gradient(90deg,#fff 0 8px,#111 8px 16px);
  margin: 6px 0 14px;
}
.mk-mock-title {
  font-size: 14px; font-weight: 1000; font-style: italic;
  text-transform: uppercase; letter-spacing: .03em;
  margin: 0 0 6px;
}

/* Telemetry strip — mini status cards */
.mk-mock-telemetry {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px; margin-bottom: 14px;
}
.mk-mock-tcard {
  border: 1px solid var(--tb-border); border-radius: 12px;
  background: rgba(0,0,0,.22);
  padding: 10px;
}
.mk-mock-tcard .label {
  font-size: 9px; font-weight: 1000; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tb-muted);
}
.mk-mock-tcard .value {
  font-size: 20px; font-weight: 1000; font-style: italic;
  color: var(--tb-success); font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  line-height: 1.1; margin-top: 4px;
}
.mk-mock-tcard.warn .value { color: var(--tb-warning); }
.mk-mock-tcard.danger .value { color: var(--tb-danger); }

/* Batch tile mock — the centerpiece of dashboard mockups */
.mk-mock-tilegrid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.mk-batch-tile {
  position: relative; overflow: hidden;
  border: 1px solid var(--tb-border); border-radius: 14px;
  background: linear-gradient(180deg, rgba(8,34,62,.92), rgba(11,21,35,.92));
  padding: 12px 12px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.mk-batch-tile::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--tb-primary), var(--tb-accent));
}
.mk-batch-tile h4 {
  margin: 4px 0 2px; font-size: 14px; font-weight: 1000;
  line-height: 1.15;
}
.mk-batch-tile .meta {
  display: grid; gap: 2px; font-size: 11px; color: var(--tb-muted); font-weight: 800;
}
.mk-batch-tile .pill {
  align-self: flex-start; font-size: 10px; font-weight: 1000;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 99px;
  border: 1px solid var(--tb-border);
}
.mk-batch-tile .pill.fruit { color: var(--tb-warning); border-color: rgba(249,115,22,.4); background: rgba(249,115,22,.08); }
.mk-batch-tile .pill.colon { color: var(--tb-accent); border-color: rgba(255,111,59,.4); background: rgba(255,111,59,.08); }
.mk-batch-tile .pill.harv  { color: var(--tb-success); border-color: rgba(22,163,74,.4); background: rgba(22,163,74,.08); }
.mk-batch-tile .audit {
  margin-top: 2px;
  font-size: 10px; color: var(--tb-muted); font-weight: 800;
  border-top: 1px dashed rgba(255,255,255,.08);
  padding-top: 6px;
  display: flex; align-items: center; gap: 5px;
}
.mk-batch-tile .audit b { color: var(--tb-text); }
.mk-batch-tile .audit i {
  font-style: normal; font-size: 12px;
}

/* Calendar mock */
.mk-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.mk-cal-grid .h {
  text-align: center; padding: 5px 0;
  font-size: 10px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(225,6,0,.18); border-radius: 8px;
}
.mk-cal-cell {
  min-height: 70px;
  border: 1px solid var(--tb-border); border-radius: 8px;
  background: rgba(255,255,255,.04);
  padding: 5px;
  font-size: 10px; color: var(--tb-muted);
}
.mk-cal-cell .day { font-weight: 1000; color: var(--tb-text); font-size: 11px; }
.mk-cal-cell .ev {
  display: block;
  margin-top: 4px; padding: 3px 5px; border-radius: 5px;
  background: rgba(255,255,255,.08); border-left: 3px solid var(--tb-accent);
  color: var(--tb-text); font-size: 9.5px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-cal-cell .ev.fruit { border-left-color: var(--tb-warning); }
.mk-cal-cell .ev.harv { border-left-color: var(--tb-success); }
.mk-cal-cell.today {
  background: rgba(255,111,59,.10);
  border-color: var(--tb-accent);
}

/* Avery 48660 label sheet mock */
.mk-labelsheet {
  background: white; color: #111;
  padding: 18px 14px; border-radius: 8px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 64px;
  gap: 0 6px;
  border: 1px solid #c4c4c4;
  font-family: Arial, sans-serif;
}
.mk-label {
  border: 1px dashed #d8d8d8;
  padding: 6px 8px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 10px;
}
.mk-label .strain { font-weight: 900; font-size: 11px; line-height: 1.1; }
.mk-label .farm   { font-size: 9px; color: #d10800; font-weight: 1000; letter-spacing: .04em; text-transform: uppercase; }
.mk-label .meta   { font-size: 9px; color: #555; display: flex; justify-content: space-between; gap: 6px; }
.mk-label .meta b { color: #111; }
.mk-label.empty   { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.04) 6px 7px); }

/* Email report mock */
.mk-email {
  background: #fafbfc; color: #111;
  border-radius: 12px; overflow: hidden;
  border: 1px solid #d4d4d4;
  font-family: Inter, system-ui, "Segoe UI", Arial, sans-serif;
}
.mk-email-head {
  padding: 12px 16px; border-bottom: 1px solid #e5e5e5;
  background: #fff;
}
.mk-email-head .from { font-size: 11px; color: #666; }
.mk-email-head .from b { color: #111; }
.mk-email-head .subject {
  font-size: 14px; font-weight: 800; margin-top: 2px;
  color: #111;
}
.mk-email-body { padding: 14px 16px; }
.mk-email-banner {
  background: linear-gradient(135deg, #e10600, #ff6f3b);
  color: white; padding: 10px 14px; border-radius: 8px;
  font-weight: 1000; font-style: italic; text-transform: uppercase;
  letter-spacing: .04em; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center;
}
.mk-email-banner .when { font-size: 10px; font-weight: 800; opacity: .85; letter-spacing: .12em; font-style: normal; }
.mk-email-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 12px 0;
}
.mk-email-kpi {
  background: #fff; border: 1px solid #e5e5e5;
  padding: 10px; border-radius: 8px;
}
.mk-email-kpi .label { font-size: 9px; color: #888; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.mk-email-kpi .value { font-size: 22px; font-weight: 1000; color: #111; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mk-email-kpi .delta { font-size: 10px; font-weight: 800; color: #16a34a; }
.mk-email-section-title {
  font-size: 11px; font-weight: 1000; color: #555;
  text-transform: uppercase; letter-spacing: .14em;
  margin: 14px 0 6px;
}
.mk-email-table {
  width: 100%; border-collapse: collapse;
  font-size: 11px;
}
.mk-email-table th, .mk-email-table td {
  text-align: left; padding: 6px 8px;
  border-bottom: 1px solid #efefef;
}
.mk-email-table th { color: #888; font-weight: 800; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.mk-email-table td b { color: #111; }
.mk-email-table .num { font-variant-numeric: tabular-nums; text-align: right; }

/* Strain card mock */
.mk-strain {
  border: 1px solid var(--tb-border); border-radius: 14px;
  background: linear-gradient(180deg, rgba(8,34,62,.95), rgba(11,21,35,.95));
  padding: 16px;
  position: relative; overflow: hidden;
}
.mk-strain::before {
  content: '🍄'; position: absolute; top: -10px; right: -10px;
  font-size: 90px; opacity: .07; transform: rotate(15deg);
}
.mk-strain h4 {
  margin: 0 0 4px; font-size: 16px; font-weight: 1000; font-style: italic;
  text-transform: uppercase;
}
.mk-strain .latin { font-size: 11px; color: var(--tb-muted); font-style: italic; margin-bottom: 12px; }
.mk-strain-gauges {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mk-strain-g {
  text-align: center; padding: 8px 4px;
  border: 1px solid var(--tb-border); border-radius: 10px;
  background: rgba(0,0,0,.18);
}
.mk-strain-g .label { font-size: 9px; color: var(--tb-muted); font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }
.mk-strain-g .value { font-size: 16px; font-weight: 1000; font-style: italic; color: var(--tb-text); margin-top: 4px; }
.mk-strain-g .unit { font-size: 9px; color: var(--tb-muted); font-weight: 800; }

/* Farm switcher mock */
.mk-farms {
  display: flex; gap: 8px; padding: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--tb-border); border-radius: 99px;
}
.mk-farm-tab {
  padding: 6px 14px; border-radius: 99px;
  font-size: 12px; font-weight: 1000; color: var(--tb-muted);
  border: 1px solid transparent;
}
.mk-farm-tab.active {
  background: linear-gradient(135deg, var(--tb-primary), #7a0000);
  color: white;
  box-shadow: 0 4px 12px rgba(225,6,0,.4);
}

/* "Without TurboBatch" pain section */
.mk-pain-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.mk-pain-side {
  border-radius: var(--tb-radius);
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
}
.mk-pain-side .label {
  font-size: 11px; font-weight: 1000; letter-spacing: .2em;
  text-transform: uppercase; opacity: .8;
}
.mk-pain-side h3 {
  margin: 0; font-size: 22px; font-weight: 1000; font-style: italic;
  text-transform: uppercase; line-height: 1.1;
}
.mk-pain-without {
  background:
    repeating-linear-gradient(transparent 0 22px, rgba(0,0,0,.05) 22px 23px),
    linear-gradient(180deg, #f0e8d4, #e2d6b8);
  color: #2a1f0f; border: 1px solid #c5b894;
  font-family: Inter, system-ui, "Segoe UI", Arial, sans-serif;
  font-style: italic;
}
.mk-pain-without .label, .mk-pain-without h3 { color: #802400; }
.mk-pain-without ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mk-pain-without li {
  font-size: 14px; line-height: 1.5;
  display: flex; gap: 8px;
}
.mk-pain-without li::before { content: '✗'; color: #b91c1c; font-weight: 1000; }
.mk-pain-without li.crossed { text-decoration: line-through; opacity: .6; }
.mk-pain-without .scribble {
  position: absolute; right: 14px; bottom: 14px;
  background: #ffe066; padding: 8px 12px;
  border: 1px solid #c4a52d; border-radius: 4px;
  transform: rotate(4deg); font-size: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  color: #2a1f0f;
}
.mk-pain-with {
  background: linear-gradient(180deg, rgba(8,34,62,.96), rgba(11,21,35,.96));
  border: 1px solid var(--tb-accent);
  box-shadow: 0 16px 40px rgba(255,111,59,.18);
}
.mk-pain-with .label { color: var(--tb-accent); }
.mk-pain-with ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mk-pain-with li {
  font-size: 14px; line-height: 1.5; color: var(--tb-text);
  display: flex; gap: 8px;
}
.mk-pain-with li::before { content: '✓'; color: var(--tb-success); font-weight: 1000; }

/* Feature row — text + visualization side by side, alternating sides */
.mk-feature-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px; align-items: center;
  padding: 24px 0;
}
.mk-feature-row + .mk-feature-row { margin-top: 32px; padding-top: 56px; border-top: 1px solid var(--tb-border); }
.mk-feature-row.flip .mk-feature-text  { order: 2; }
.mk-feature-row.flip .mk-feature-viz   { order: 1; }
.mk-feature-text .mk-eyebrow {
  font-size: 11px; font-weight: 1000; letter-spacing: .24em;
  text-transform: uppercase; color: var(--tb-accent); margin-bottom: 10px;
}
.mk-feature-text h3 {
  font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 12px;
  font-weight: 1000; font-style: italic; text-transform: uppercase;
  line-height: 1.05;
}
.mk-feature-text p {
  color: var(--tb-muted); font-size: 16px; margin: 0 0 8px; line-height: 1.6;
}
.mk-feature-text ul {
  list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px;
}
.mk-feature-text ul li {
  font-size: 14px; color: var(--tb-text); display: flex; gap: 8px;
}
.mk-feature-text ul li::before {
  content: '▸'; color: var(--tb-accent); font-weight: 1000;
}

/* Section blocks */
.mk-section { padding: 64px 0; border-top: 1px solid var(--tb-border); }
.mk-section h2 {
  font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 6px;
  font-weight: 1000; font-style: italic; text-transform: uppercase;
  letter-spacing: -.005em;
}
.mk-section p.lede {
  font-size: 16px; color: var(--tb-muted); font-weight: 600;
  margin: 0 0 32px; max-width: 720px;
}

/* Pricing */
.mk-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.mk-tier {
  padding: 22px; border-radius: var(--tb-radius);
  background: linear-gradient(180deg, rgba(8,34,62,.92), rgba(11,21,35,.92));
  border: 1px solid var(--tb-border);
  display: flex; flex-direction: column; gap: 12px;
}
.mk-tier.featured {
  border-color: var(--tb-accent);
  box-shadow: 0 0 0 1px var(--tb-accent), 0 16px 40px rgba(255,111,59,.18);
}
.mk-tier-name { font-size: 13px; font-weight: 1000; text-transform: uppercase; letter-spacing: .14em; color: var(--tb-muted); }
.mk-tier-price { font-size: 28px; font-weight: 1000; font-variant-numeric: tabular-nums; line-height: 1; }
.mk-tier-price .per { font-size: 13px; font-weight: 700; color: var(--tb-muted); }
.mk-tier ul { margin: 0; padding: 0 0 0 18px; color: var(--tb-text); font-size: 14px; line-height: 1.6; }
.mk-tier ul li::marker { color: var(--tb-accent); }

/* FAQ */
.mk-faq details {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--tb-border);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 8px;
}
.mk-faq summary {
  font-weight: 800; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after {
  content: '+'; color: var(--tb-accent); font-size: 22px; line-height: 1;
}
.mk-faq details[open] summary::after { content: '–'; }
.mk-faq details > p {
  margin: 12px 0 0; color: var(--tb-muted); font-size: 14px; line-height: 1.6;
}

/* CTA */
.mk-cta {
  margin-top: 24px; padding: 36px;
  background: linear-gradient(180deg, rgba(255,111,59,.12), rgba(225,6,0,.06));
  border: 1px solid var(--tb-accent);
  border-radius: var(--tb-radius); text-align: center;
}
.mk-cta h2 { margin: 0 0 8px; }
.mk-cta p { color: var(--tb-muted); margin: 0 0 18px; }

/* Footer */
.mk-footer {
  border-top: 1px solid var(--tb-border);
  padding: 28px 24px; color: var(--tb-muted); font-size: 13px;
  text-align: center;
}
.mk-footer .links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }

/* Legal pages — long-form readable */
.mk-legal {
  width: min(820px, 92vw); margin: 0 auto;
  padding: 40px 0 80px;
}
.mk-legal h1 { font-size: clamp(28px, 3vw, 40px); font-weight: 1000; font-style: italic; text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 8px; }
.mk-legal h2 { font-size: 20px; font-weight: 1000; margin: 32px 0 8px; text-transform: uppercase; letter-spacing: .08em; color: var(--tb-text); }
.mk-legal h3 { font-size: 15px; font-weight: 800; margin: 18px 0 6px; color: var(--tb-text); }
.mk-legal p, .mk-legal li { color: var(--tb-text); font-size: 14.5px; line-height: 1.65; }
.mk-legal p.muted, .mk-legal .effective { color: var(--tb-muted); font-size: 13px; }
.mk-legal ul, .mk-legal ol { padding-left: 22px; }
.mk-legal hr { border: 0; border-top: 1px solid var(--tb-border); margin: 24px 0; }

/* ====================================================================
   FULL-WIDTH SHOWCASES — for Dashboard, Batch Control, Calendar
   ==================================================================== */
.mk-showcase {
  width: min(1320px, 96vw); margin: 0 auto;
  padding: 80px 0;
  border-top: 1px solid var(--tb-border);
}
.mk-showcase-head {
  text-align: center;
  max-width: 760px; margin: 0 auto 32px;
}
.mk-showcase-head .eyebrow {
  font-size: 11px; font-weight: 1000; letter-spacing: .26em;
  text-transform: uppercase; color: var(--tb-accent); margin-bottom: 10px;
}
.mk-showcase-head h3 {
  font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 12px;
  font-weight: 1000; font-style: italic; text-transform: uppercase;
  line-height: 1.05;
}
.mk-showcase-head p {
  color: var(--tb-muted); font-size: 17px; line-height: 1.6;
  margin: 0;
}
.mk-cockpit-wide {
  width: 100%;
}
.mk-cockpit-wide .mk-cockpit-body { padding: 22px; }

/* Wide telemetry — 6 cards */
.mk-mock-telemetry-6 {
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px; margin-bottom: 16px;
}
.mk-mock-telemetry-6 .mk-mock-tcard { padding: 12px; }
.mk-mock-telemetry-6 .mk-mock-tcard .value { font-size: 24px; }
.mk-mock-tcard.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50%      { box-shadow: 0 0 0 6px rgba(220,38,38,.18); }
}

/* Environment gauge row */
.mk-gauge-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 16px;
}
.mk-gauge {
  text-align: center; padding: 14px 8px;
  border: 1px solid var(--tb-border); border-radius: 12px;
  background: linear-gradient(180deg, rgba(8,34,62,.95), rgba(6,15,25,.95));
  position: relative; overflow: hidden;
}
.mk-gauge::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tb-success), var(--tb-accent), var(--tb-primary));
  opacity: .55;
}
.mk-gauge .label {
  font-size: 10px; color: var(--tb-muted); font-weight: 1000;
  letter-spacing: .14em; text-transform: uppercase;
}
.mk-gauge .value {
  font-size: 30px; font-weight: 1000; font-style: italic;
  color: var(--tb-text); margin-top: 4px; line-height: 1;
}
.mk-gauge .unit { font-size: 11px; color: var(--tb-muted); font-weight: 800; }

/* Wide batch tile grid — 3 columns x 2 rows */
.mk-batch-grid-wide {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

/* Race ticker (marquee) */
.mk-ticker {
  display: flex; align-items: center; overflow: hidden;
  border: 1px solid var(--tb-border); border-radius: 12px;
  background: rgba(0,0,0,.3); margin-top: 16px;
  /* Defensive: confine the ticker frame to its grid cell width.
     Without this, the flex children of a parent with min-width:auto
     can push the page wider than the viewport on phones. */
  max-width: 100%; min-width: 0;
}
.mk-ticker-tag {
  background: var(--tb-primary); color: white;
  padding: 8px 14px; font-weight: 1000; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  font-style: italic; flex-shrink: 0;
}
.mk-ticker-track {
  overflow: hidden;
  flex: 1;
  /* Flex children default to min-width:auto, which lets wide inner
     content (the duplicated ticker items, intentionally ~1500px wide
     for the seamless marquee loop) push the parent past the viewport
     edge. Explicit min-width:0 forces the flex child to actually
     respect its flex basis. Without this the page horizontally scrolls
     on phones. */
  min-width: 0;
}
.mk-ticker-inner {
  display: flex; white-space: nowrap;
  animation: marquee 38s linear infinite;
}
.mk-ticker-item {
  padding: 8px 28px; color: var(--tb-muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}
.mk-ticker-item b { color: var(--tb-text); }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ====================================================================
   BATCH CONTROL showcase: toolbar + grid + detail panel
   ==================================================================== */
.mk-toolbar-mock {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px;
}
.mk-search-mock {
  flex: 1; min-width: 200px;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--tb-border);
  background: rgba(0,0,0,.25);
  color: var(--tb-muted); font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.mk-search-mock::before { content: '🔍'; font-size: 12px; }
.mk-filter-mock {
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--tb-border);
  background: rgba(255,255,255,.05);
  font-size: 12px; font-weight: 800; color: var(--tb-text);
}
.mk-newbatch-btn {
  padding: 10px 16px; border-radius: 99px;
  background: linear-gradient(135deg, var(--tb-primary), #7a0000);
  color: white; font-size: 13px; font-weight: 1000;
  letter-spacing: .04em; text-transform: uppercase;
  border: 0;
  box-shadow: 0 8px 20px rgba(225,6,0,.3);
  animation: glow-primary 3s ease-in-out infinite;
}
@keyframes glow-primary {
  0%, 100% { box-shadow: 0 8px 20px rgba(225,6,0,.3); }
  50%      { box-shadow: 0 8px 28px rgba(225,6,0,.55); }
}

.mk-control-grid {
  display: grid; grid-template-columns: 1fr 360px;
  gap: 16px; align-items: start;
}
.mk-control-grid .mk-batch-grid-wide {
  grid-template-columns: repeat(2, 1fr);
}

/* Batch detail panel */
.mk-detail {
  background: linear-gradient(180deg, rgba(8,34,62,.95), rgba(11,21,35,.95));
  border: 1px solid var(--tb-accent);
  border-radius: 14px; padding: 16px;
  box-shadow: 0 0 0 1px rgba(255,111,59,.18), 0 16px 40px rgba(255,111,59,.12);
  position: relative; overflow: hidden;
}
.mk-detail::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--tb-primary), var(--tb-accent));
  animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
.mk-detail h4 {
  margin: 6px 0 4px; font-size: 18px; font-weight: 1000;
}
.mk-detail .meta {
  font-size: 11px; color: var(--tb-muted); font-weight: 800;
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}

/* Stage timeline: 4 dots connected */
.mk-stage-timeline {
  display: grid; grid-template-columns: repeat(4, 1fr);
  position: relative; margin: 16px 0; padding: 0 8px;
}
.mk-stage-timeline::before {
  content: ''; position: absolute;
  left: 14%; right: 14%; top: 9px; height: 2px;
  background: var(--tb-border);
}
.mk-stage-timeline::after {
  content: ''; position: absolute;
  left: 14%; width: 50%; top: 9px; height: 2px;
  background: linear-gradient(90deg, var(--tb-primary), var(--tb-accent));
}
.mk-stage {
  text-align: center; position: relative;
}
.mk-stage .dot {
  width: 20px; height: 20px; border-radius: 50%;
  margin: 0 auto;
  background: var(--tb-surface-2);
  border: 2px solid var(--tb-border);
  position: relative; z-index: 1;
}
.mk-stage.done .dot { background: var(--tb-accent); border-color: var(--tb-accent); }
.mk-stage.current .dot {
  background: var(--tb-primary); border-color: var(--tb-primary);
  box-shadow: 0 0 0 4px rgba(225,6,0,.25);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(225,6,0,.25); }
  50%      { box-shadow: 0 0 0 8px rgba(225,6,0,.10); }
}
.mk-stage .name {
  font-size: 9px; font-weight: 1000;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tb-muted); margin-top: 6px;
}
.mk-stage.done .name, .mk-stage.current .name { color: var(--tb-text); }

/* Bag row */
.mk-bag-list { display: grid; gap: 6px; margin: 10px 0; }
.mk-bag-row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--tb-border);
  font-size: 12px;
}
.mk-bag-row .num { font-weight: 1000; color: var(--tb-accent); font-size: 11px; }
.mk-bag-row .label { color: var(--tb-muted); font-weight: 800; font-size: 11px; }
.mk-bag-row .weight {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--tb-success); font-weight: 1000;
}
.mk-bag-row .pill {
  font-size: 9px; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 99px;
  border: 1px solid var(--tb-border);
}
.mk-bag-row .pill.fruit { color: var(--tb-warning); border-color: rgba(249,115,22,.4); background: rgba(249,115,22,.08); }

/* Audit log */
.mk-audit-list { display: grid; gap: 5px; margin-top: 10px; }
.mk-audit-list li {
  font-size: 11px; color: var(--tb-muted); font-weight: 800;
  display: flex; gap: 7px;
}
.mk-audit-list li b { color: var(--tb-text); }
.mk-audit-list li .when { color: var(--tb-accent); margin-left: auto; font-size: 10px; white-space: nowrap; }

/* Detail action buttons */
.mk-detail-actions { display: flex; gap: 8px; margin-top: 12px; }
.mk-detail-actions button {
  padding: 8px 12px; border-radius: 99px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid var(--tb-border);
  color: var(--tb-text); font-size: 11px; font-weight: 1000;
  letter-spacing: .04em; text-transform: uppercase;
}
.mk-detail-actions button.primary {
  background: linear-gradient(135deg, var(--tb-primary), #7a0000);
  border-color: transparent;
}

/* ====================================================================
   CALENDAR wide — 4-week grid with denser events
   ==================================================================== */
.mk-cal-wide-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.mk-cal-legend {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 99px;
  border: 1px solid var(--tb-border);
  background: rgba(255,255,255,.04);
  font-size: 11px; font-weight: 800;
}
.mk-cal-legend i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tb-accent); display: inline-block;
}
.mk-cal-legend.fruit i { background: var(--tb-warning); }
.mk-cal-legend.harv i  { background: var(--tb-success); }

.mk-cal-grid-wide {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.mk-cal-grid-wide .h {
  text-align: center; padding: 6px 0;
  font-size: 10px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(225,6,0,.18); border-radius: 8px;
}
.mk-cal-grid-wide .mk-cal-cell { min-height: 84px; }
.mk-cal-grid-wide .mk-cal-cell.today {
  box-shadow: 0 0 0 2px var(--tb-accent), 0 12px 24px rgba(255,111,59,.15);
}

/* ====================================================================
   BRANDING + LABELS combo
   ==================================================================== */
.mk-combo-grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 24px; align-items: center;
}
.mk-combo-grid .mk-arrow {
  font-size: 32px; color: var(--tb-accent);
  font-weight: 1000;
  animation: arrow-slide 2.4s ease-in-out infinite;
}
@keyframes arrow-slide {
  0%, 100% { transform: translateX(0); opacity: .55; }
  50%      { transform: translateX(6px); opacity: 1; }
}

.mk-brand-panel {
  border: 1px solid var(--tb-border); border-radius: 14px;
  background: linear-gradient(180deg, rgba(8,34,62,.96), rgba(11,21,35,.96));
  padding: 18px;
}
.mk-brand-panel h5 {
  margin: 0 0 12px; font-size: 13px; font-weight: 1000;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tb-muted);
}
.mk-color-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,.06);
}
.mk-color-row:last-child { border-bottom: 0; }
.mk-color-chip {
  width: 36px; height: 36px; border-radius: 10px;
  border: 2px solid rgba(255,255,255,.14);
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.mk-color-row .name { font-weight: 800; font-size: 13px; }
.mk-color-row .hex {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px; color: var(--tb-muted); font-weight: 1000;
}
.mk-logo-upload {
  margin-top: 14px;
  border: 1px dashed var(--tb-border); border-radius: 12px;
  padding: 14px; text-align: center;
  background: rgba(255,255,255,.04);
}
.mk-logo-upload img {
  max-height: 40px; width: auto; max-width: 200px;
}
.mk-logo-upload .label {
  display: block; margin-top: 8px;
  font-size: 10px; color: var(--tb-muted); font-weight: 1000;
  letter-spacing: .14em; text-transform: uppercase;
}

/* Branded label override — accent shifts to user's hot color */
.mk-label.branded .farm { color: var(--brand-c, #d10800); }

/* ====================================================================
   STRAIN LIBRARY + BATCH CREATION
   ==================================================================== */
.mk-strain-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mk-strain-mini {
  border: 1px solid var(--tb-border); border-radius: 12px;
  background: linear-gradient(180deg, rgba(8,34,62,.92), rgba(11,21,35,.92));
  padding: 12px;
  position: relative; overflow: hidden;
}
.mk-strain-mini::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--tb-success), var(--tb-accent));
}
.mk-strain-mini h6 {
  margin: 4px 0 4px; font-size: 13px; font-weight: 1000; font-style: italic;
  text-transform: uppercase; line-height: 1.1;
}
.mk-strain-mini .latin { font-size: 10px; color: var(--tb-muted); font-style: italic; }
.mk-strain-mini .stats {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
  font-size: 10px; color: var(--tb-muted); font-weight: 800;
}
.mk-strain-mini .stats span { padding: 3px 7px; background: rgba(255,255,255,.05); border-radius: 99px; }
.mk-strain-mini .stats span b { color: var(--tb-text); }
.mk-strain-mini.highlight {
  border-color: var(--tb-accent);
  box-shadow: 0 0 0 1px var(--tb-accent), 0 12px 24px rgba(255,111,59,.18);
}

/* New batch form mock */
.mk-form-card {
  border: 1px solid var(--tb-border); border-radius: 14px;
  background: linear-gradient(180deg, rgba(8,34,62,.96), rgba(11,21,35,.96));
  padding: 18px; position: relative; overflow: hidden;
}
.mk-form-card::before {
  content: 'NEW BATCH'; position: absolute; top: 0; right: 0;
  font-size: 9px; font-weight: 1000; letter-spacing: .18em;
  background: var(--tb-primary); color: white;
  padding: 4px 10px; border-radius: 0 14px 0 8px;
}
.mk-form-field {
  margin-bottom: 12px;
}
.mk-form-field .label {
  display: block;
  font-size: 10px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tb-muted); margin-bottom: 4px;
}
.mk-form-field .input-mock {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--tb-border);
  background: #071525;
  color: var(--tb-text); font-size: 13px; font-weight: 800;
  display: flex; align-items: center; gap: 8px;
}
.mk-form-field .input-mock.select::after {
  content: '▾'; margin-left: auto; color: var(--tb-accent);
}
.mk-form-field.autofilled .input-mock {
  border-color: var(--tb-success);
  background: rgba(22,163,74,.06);
}
.mk-form-field.autofilled .label::after {
  content: ' · auto-filled';
  color: var(--tb-success); font-size: 9px;
  letter-spacing: .08em;
}
.mk-form-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

/* ====================================================================
   ANIMATIONS & SCROLL EFFECTS
   ==================================================================== */
.mk-fade-up {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.mk-fade-up.is-visible { opacity: 1; transform: translateY(0); }
.mk-fade-up.delay-1 { transition-delay: .12s; }
.mk-fade-up.delay-2 { transition-delay: .22s; }

.mk-cockpit:hover {
  transform: translateY(-2px);
  transition: transform .35s ease-out;
}

/* Featured pricing tier breathing border */
.mk-tier.featured {
  animation: featured-glow 4s ease-in-out infinite;
}
@keyframes featured-glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--tb-accent), 0 16px 40px rgba(255,111,59,.18); }
  50%      { box-shadow: 0 0 0 1px var(--tb-accent), 0 16px 50px rgba(255,111,59,.32); }
}

/* Hero logo subtle floaty */
.mk-hero-logo { animation: logo-float 6s ease-in-out infinite; }
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  .mk-fade-up { opacity: 1; transform: none; transition: none; }
  .mk-mock-tcard.pulse, .mk-newbatch-btn, .mk-stage.current .dot,
  .mk-detail::before, .mk-tier.featured, .mk-hero-logo,
  .mk-combo-grid .mk-arrow, .mk-ticker-inner {
    animation: none !important;
  }
}

/* Responsive */
@media (max-width: 980px) {
  /* Every grid-template-columns switches to minmax(0, …) instead of
     plain Nfr, because plain 1fr resolves to minmax(auto, 1fr) and
     lets a child's intrinsic min-content (e.g., the strain ticker's
     ~1500px wide marquee inner) push the column past the viewport
     edge. minmax(0, 1fr) forces the column to honor its share of
     available space and clip rather than expand. Without this, the
     body horizontal-overflow safety net we added catches the bleed
     but the right edge of every section still gets visually cut. */
  .mk-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mk-feature-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mk-feature-row.flip .mk-feature-text { order: 1; }
  .mk-feature-row.flip .mk-feature-viz  { order: 2; }
  .mk-pain-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-mock-tilegrid { grid-template-columns: minmax(0, 1fr); }
  .mk-mock-telemetry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-mock-telemetry-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-strain-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-batch-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-control-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-control-grid .mk-batch-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-gauge-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-combo-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-combo-grid .mk-arrow { transform: rotate(90deg); margin: 0 auto; }
  .mk-strain-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .mk-header { flex-direction: column; gap: 10px; padding: 12px 16px; }
  .mk-nav { width: 100%; justify-content: center; }
  .mk-hero-v2 { padding: 32px 0 20px; }
  .mk-cal-grid { grid-template-columns: repeat(7, minmax(40px, 1fr)); }
  .mk-cal-cell { min-height: 50px; font-size: 8px; }
  .mk-labelsheet { grid-template-columns: repeat(2, 1fr); }
  .mk-email-kpis { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Marketing additions — 2026-05-11 refresh
   ============================================================
   New visuals added in the marketing-screens-refresh pass:
   - .mk-tour-card     — Welcome-tour modal mockup (onboarding section)
   - .mk-alerts-card   — Pit Stop Alerts urgency panel (alerts section)
   - .mk-email-v2      — Email mockup that matches the actual shipped
                         ReportService::layout() template (red bar +
                         checker stripe + italic uppercase H1)
*/

/* --- Welcome tour mockup --- */
.mk-tour-card {
  background: linear-gradient(180deg, rgba(8,34,62,.96), rgba(11,21,35,.96));
  border: 1px solid var(--tb-border, #29435f);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  max-width: 460px;
  margin: 0 auto;
}
.mk-tour-card-bar    { height: 5px; background: var(--tb-primary, #e10600); }
.mk-tour-card-stripe { height: 6px; background: repeating-linear-gradient(90deg,#fff 0 10px,#111 10px 20px); }
.mk-tour-card-body {
  padding: 22px 24px 20px;
  color: var(--tb-text, #f4f7fb);
  text-align: center;
}
.mk-tour-step-count {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tb-muted, #a0b4c8);
  margin-bottom: 8px;
}
.mk-tour-card h4 {
  font-size: 24px;
  font-weight: 1000;
  font-style: italic;
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 1.05;
}
.mk-tour-card h4 .accent {
  background: linear-gradient(90deg, var(--tb-primary,#e10600), var(--tb-accent,#ff6f3b));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mk-tour-card p {
  font-size: 13px;
  color: var(--tb-muted, #a0b4c8);
  margin: 0 0 14px;
  line-height: 1.5;
}
.mk-tour-logo-frame {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 18px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mk-tour-logo-frame img {
  height: 56px;
  max-width: 240px;
  filter: drop-shadow(0 8px 20px rgba(225,6,0,.4));
}
.mk-tour-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}
.mk-tour-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.mk-tour-dots .dot.active {
  background: var(--tb-primary, #e10600);
  width: 16px;
  border-radius: 999px;
}
.mk-tour-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.mk-tour-skip,
.mk-tour-next {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid var(--tb-border, #29435f);
  background: transparent;
  color: var(--tb-text, #f4f7fb);
  cursor: pointer;
}
.mk-tour-next {
  background: linear-gradient(135deg, var(--tb-primary,#e10600), #7a0000);
  border-color: var(--tb-primary, #e10600);
  color: white;
}

/* --- Pit Stop Alerts card --- */
.mk-alerts-card {
  background: linear-gradient(180deg, rgba(8,34,62,.96), rgba(11,21,35,.96));
  border: 1px solid var(--tb-border, #29435f);
  border-radius: 16px;
  padding: 22px 24px;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  overflow: hidden;
}
.mk-alerts-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 4px;
  background: var(--tb-danger, #dc2626);
}
.mk-alerts-card h5 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 1000;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tb-text, #f4f7fb);
}
.mk-alerts-card h5 .badge {
  display: inline-block;
  margin-left: 10px;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--tb-danger, #dc2626);
  color: white;
  letter-spacing: .12em;
  vertical-align: middle;
}
.mk-alert-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mk-alert-row:last-child { border-bottom: 0; }
.mk-alert-row .severity {
  width: 8px;
  height: 36px;
  border-radius: 4px;
  background: var(--tb-danger, #dc2626);
}
.mk-alert-row.warn .severity { background: var(--tb-warning, #f97316); }
.mk-alert-row .name {
  color: var(--tb-text, #f4f7fb);
  font-weight: 800;
  font-size: 14px;
}
.mk-alert-row .meta {
  font-size: 11px;
  color: var(--tb-muted, #a0b4c8);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 2px;
}
.mk-alert-row .due {
  color: var(--tb-danger, #dc2626);
  font-weight: 1000;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  white-space: nowrap;
}
.mk-alert-row.warn .due { color: var(--tb-warning, #f97316); }

/* --- Email v2 (matches actual shipped report template) --- */
.mk-email-v2 {
  background: #fbfbfb;
  color: #0a0d12;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.mk-email-v2 .mk-email-bar    { height: 5px; background: var(--tb-primary, #e10600); }
.mk-email-v2 .mk-email-stripe { height: 6px; background: repeating-linear-gradient(90deg,#fff 0 10px,#111 10px 20px); }
.mk-email-v2 .mk-email-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid #eef2f7;
}
.mk-email-v2 .mk-email-brand img { height: 26px; }
.mk-email-v2 .mk-email-brand .farm-pill {
  margin-left: auto;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #6b7280;
}
.mk-email-v2 .mk-email-body { padding: 14px 22px 20px; }
.mk-email-v2 .mk-email-eyebrow {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--tb-primary, #e10600);
}
.mk-email-v2 .mk-email-title {
  font-size: 22px;
  font-weight: 1000;
  font-style: italic;
  text-transform: uppercase;
  margin: 4px 0 12px;
  line-height: 1.05;
  color: #0a0d12;
}

/* ============================================================
   Mobile responsive pass — 2026-05-12
   ============================================================
   Tightens the marketing site for phones (<700px) and small phones
   (<480px). Desktop layout above 700px is untouched. Pattern: don't
   try to shrink desktop mockups into thumbnails; instead, re-stack
   grids to fewer columns and increase touch-target padding so the
   site reads as a real mobile experience, not a zoomed-out web page.
*/

@media (max-width: 700px) {

  /* --- Header: single tight row, hide in-page anchors --- */
  .mk-header {
    flex-direction: row !important;   /* override the old column rule */
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 10px;
    justify-content: space-between;
  }
  .mk-header .brand img { height: 30px; }
  .mk-nav { width: auto; gap: 6px; justify-content: flex-end; }
  /* Hide the in-page section anchors on phone — visitors scroll. */
  .mk-nav a[href^="#"] { display: none; }
  .mk-nav a, .mk-nav .mk-btn-primary {
    font-size: 13px;
    padding: 7px 12px;
  }

  /* --- Hero: stacked, smaller, single-tap CTAs --- */
  .mk-hero-v2 { padding: 28px 0 18px; }
  .mk-hero-grid { gap: 24px; }
  .mk-hero-logo { max-width: 360px; margin: 0 0 14px; }
  .mk-hero-eyebrow {
    font-size: 11px;
    letter-spacing: .22em;
    margin-bottom: 12px;
  }
  .mk-hero-v2 h1 {
    font-size: clamp(24px, 7.5vw, 32px);
    margin: 0 0 12px;
  }
  .mk-hero-v2 p.lede {
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 18px;
  }
  /* Keep the desktop's inline flex-wrap behaviour on phone — stretching
     CTAs to full column width felt visually overweight (Jose: "throws
     off the rest of the page"). Inline buttons size to their own
     content and wrap to a second row only when actually cramped. */
  .mk-hero-v2 .actions { gap: 10px; }
  .mk-hero-v2 .actions .mk-btn {
    font-size: 15px;
    padding: 11px 18px;
    /* Cap each CTA so a long label can't quite reach edge-to-edge. */
    max-width: 280px;
  }
  .mk-hero-trust {
    gap: 8px;
    font-size: 12px;
    margin-top: 16px;
  }

  /* --- Section spacing: less air between sections on phone --- */
  .mk-container,
  .mk-section { padding: 40px 0; }
  .mk-section h2 { font-size: clamp(24px, 6.5vw, 32px); }
  .mk-section p.lede { font-size: 15px; }

  /* --- Cockpit mockups: trim padding so internal grids fit --- */
  .mk-cockpit-body { padding: 12px; }

  /* --- Telemetry tiles: 2-col, looser cells --- */
  .mk-mock-telemetry,
  .mk-mock-telemetry-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .mk-mock-tcard { padding: 10px 12px; }
  .mk-mock-tcard .value { font-size: 22px; }

  /* --- Gauges: 2-col --- */
  .mk-gauge-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .mk-gauge { padding: 10px 12px; }
  .mk-gauge .value { font-size: 22px; }

  /* --- Batch tile grid: stack on phone for legibility --- */
  .mk-batch-grid-wide,
  .mk-control-grid .mk-batch-grid-wide,
  .mk-mock-tilegrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mk-batch-tile { padding: 12px 14px; }
  .mk-batch-tile h4 { font-size: 14px; }

  /* --- Calendar: horizontal scroll instead of cramming 7 cols.
         Cells stay touch-friendly; user swipes to see later weeks. --- */
  .mk-cal-grid-wide,
  .mk-cal-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: repeat(7, minmax(64px, 1fr));
    scrollbar-width: thin;
  }
  .mk-cal-cell {
    min-height: 64px;
    font-size: 10px;
    padding: 6px;
  }
  .mk-cal-grid .h,
  .mk-cal-grid-wide .h { font-size: 10px; }
  .mk-cal-cell .day { font-size: 12px; }
  .mk-cal-cell .ev { font-size: 9px; }

  /* --- Pain panels: smaller heading + tighter scribble. Cap each
     panel's width so when the grid stacks 1-col it doesn't feel like
     it's bleeding edge-to-edge (Jose's "first card full width"). --- */
  .mk-pain-grid { max-width: 520px; margin-left: auto; margin-right: auto; }
  .mk-pain-side { padding: 18px 18px 24px; }
  .mk-pain-side h3 { font-size: 18px; }
  .mk-pain-without .scribble { font-size: 13px; }

  /* --- Email reports mockup: scale internal table fonts --- */
  .mk-email-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .mk-email-kpi { padding: 8px; }
  .mk-email-kpi .value { font-size: 18px; }
  .mk-email-table { font-size: 12px; }
  .mk-email-table th,
  .mk-email-table td { padding: 6px 4px; }
  .mk-email-section-title { font-size: 11px; }
  .mk-email-v2 .mk-email-title { font-size: 18px; }
  .mk-email-v2 .mk-email-brand { padding: 14px 16px 10px; }
  .mk-email-v2 .mk-email-body { padding: 12px 16px 16px; }

  /* --- Welcome tour mockup: full width + tighter padding --- */
  .mk-tour-card { max-width: 100%; border-radius: 14px; }
  .mk-tour-card-body { padding: 18px 18px 16px; }
  .mk-tour-card h4 { font-size: 20px; }
  .mk-tour-card p { font-size: 13px; }
  .mk-tour-logo-frame { padding: 14px; }
  .mk-tour-logo-frame img { height: 44px; }

  /* --- Pit Stop Alerts: full width, tighter rows --- */
  .mk-alerts-card { max-width: 100%; padding: 18px 16px; }
  .mk-alerts-card h5 { font-size: 14px; }
  .mk-alerts-card h5 .badge { font-size: 10px; padding: 2px 7px; margin-left: 6px; }
  .mk-alert-row {
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 10px 0;
  }
  .mk-alert-row .severity { height: 28px; }
  .mk-alert-row .name { font-size: 13px; }
  .mk-alert-row .meta { font-size: 10px; }
  .mk-alert-row .due {
    grid-column: 1 / -1;
    text-align: right;
    font-size: 11px;
    margin-top: -4px;
  }

  /* --- Strain library: 1-col on phone --- */
  .mk-strain-grid { grid-template-columns: 1fr; gap: 10px; }
  .mk-strain-mini { padding: 12px 14px; }

  /* --- Pricing: stack to 1-col, cap card width --- */
  .mk-pricing { grid-template-columns: 1fr; gap: 12px; }
  .mk-tier {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 18px;
  }
  .mk-tier-price { font-size: 28px; }

  /* --- Toolbar mock (batch control screen): stack --- */
  .mk-toolbar-mock {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .mk-search-mock,
  .mk-filter-mock { width: 100%; }

  /* --- FAQ details: more breathing room --- */
  .mk-faq details { padding: 14px 16px; }
  .mk-faq details summary { font-size: 15px; }
  .mk-faq details p { font-size: 14px; line-height: 1.55; }

  /* --- CTA block: stack tighter --- */
  .mk-cta { padding: 28px 18px; }
  .mk-cta h2 { font-size: clamp(22px, 6vw, 28px); }

  /* --- Footer: stack links, centered --- */
  .mk-footer { padding: 28px 18px; text-align: center; }
  .mk-footer .links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
}

/* --- Small phones (<=480px) — final tightening pass --- */
@media (max-width: 480px) {
  .mk-header { padding: 8px 12px; gap: 8px; }
  .mk-header .brand img { height: 26px; }
  .mk-nav { gap: 5px; }
  .mk-nav a, .mk-nav .mk-btn-primary { font-size: 12px; padding: 6px 10px; }

  .mk-hero-logo { max-width: 280px; }
  .mk-hero-v2 h1 { font-size: clamp(22px, 7vw, 28px); }
  .mk-hero-v2 p.lede { font-size: 14px; }

  /* Telemetry tiles can still feel cramped — drop padding a hair more */
  .mk-mock-tcard { padding: 8px 10px; }
  .mk-mock-tcard .value { font-size: 20px; }

  /* Labels mockup — phones can't display 30 labels usefully. Show one
     column with bigger labels so the design is recognizable. */
  .mk-labelsheet { grid-template-columns: 1fr; }

  /* Pricing tier card padding tighter */
  .mk-tier { padding: 18px 16px; }
}

/* ============================================================
   NEW (PR #204+) — Setup Wizard, Email Verification, Smart Climate,
   Dashboard Insights, Loss Tracking, Mushroom Profile, Batch tile
   updates. All mockups mirror the actual app's UI structure 1:1
   (same class taxonomy, same color tokens) — no fabricated layouts.
   ============================================================ */

/* === Setup Wizard mockup =================================== */
.mk-wiz-card {
  background: linear-gradient(180deg,rgba(8,34,62,.96),rgba(11,21,35,.96));
  border: 1px solid var(--tb-border,#29435f);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,111,59,.15);
  color: var(--tb-text,#f4f7fb);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.mk-wiz-bar { height: 5px; background: linear-gradient(90deg,var(--tb-primary,#e10600),var(--tb-accent,#ff6f3b)); }
.mk-wiz-stripe { height: 6px; background: repeating-linear-gradient(90deg,#fff 0 10px,#111 10px 20px); }
.mk-wiz-progress {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 22px 6px;
  font-size: 11px; font-weight: 1000; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tb-muted,#a0b4c8);
}
.mk-wiz-progress .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid var(--tb-border,#29435f);
}
.mk-wiz-progress .dot.active { background: var(--tb-accent,#ff6f3b); border-color: var(--tb-accent,#ff6f3b); transform: scale(1.2); }
.mk-wiz-progress .dot.done   { background: #16a34a; border-color: #16a34a; }
.mk-wiz-progress .step { margin-left: auto; color: var(--tb-muted,#a0b4c8); }
.mk-wiz-body { padding: 12px 22px 18px; }
.mk-wiz-eyebrow {
  margin: 0 0 4px;
  font-size: 11px; font-weight: 1000; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tb-accent,#ff6f3b);
}
.mk-wiz-body h4 {
  margin: 0 0 8px;
  font-size: 22px; font-weight: 1000; font-style: italic;
  text-transform: uppercase; color: var(--tb-text,#f4f7fb);
}
.mk-wiz-body p { margin: 0 0 12px; color: var(--tb-muted,#a0b4c8); font-size: 13px; line-height: 1.5; }
.mk-wiz-callout {
  padding: 10px 14px; border-radius: 10px;
  border-left: 3px solid var(--tb-warning,#f97316);
  background: rgba(249,115,22,.08);
  font-size: 12px; line-height: 1.5; margin-bottom: 12px;
}
.mk-wiz-callout a { color: var(--tb-accent,#ff6f3b); font-weight: 800; text-decoration: none; }
.mk-wiz-locs-head {
  display: grid; grid-template-columns: 1fr 90px 24px; gap: 10px;
  padding: 0 12px;
  font-size: 10px; font-weight: 1000; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tb-muted,#a0b4c8);
  margin-bottom: 6px;
}
.mk-wiz-locs { display: flex; flex-direction: column; gap: 8px; }
.mk-wiz-loc-row {
  display: grid; grid-template-columns: 1fr 90px 24px; gap: 10px; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--tb-border,#29435f); border-radius: 10px;
  background: rgba(255,255,255,.04);
}
.mk-wiz-loc-row .input {
  padding: 8px 10px; border: 1px solid var(--tb-border,#29435f); border-radius: 6px;
  background: #071525; color: var(--tb-text,#f4f7fb);
  font-size: 13px; font-weight: 800;
}
.mk-wiz-loc-row .input.cap { font-family: ui-monospace,SFMono-Regular,Consolas,monospace; }
.mk-wiz-loc-row .x {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--tb-border,#29435f);
  background: rgba(220,38,38,.18); color: #ff7d75;
  font-size: 12px;
}
.mk-wiz-addrow {
  margin-top: 12px; padding: 8px 14px;
  border: 1px dashed var(--tb-accent,#ff6f3b);
  border-radius: 99px;
  background: rgba(255,111,59,.08);
  color: var(--tb-accent,#ff6f3b);
  font-size: 12px; font-weight: 1000; letter-spacing: .04em;
  cursor: pointer;
}
.mk-wiz-addrow.disabled { opacity: .45; cursor: not-allowed; }
.mk-wiz-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--tb-border,#29435f);
  background: rgba(0,0,0,.18);
}
.mk-wiz-spacer { flex: 1; }
.mk-wiz-btn {
  padding: 9px 14px; border-radius: 99px;
  border: 1px solid var(--tb-border,#29435f);
  background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  color: var(--tb-text,#f4f7fb);
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.mk-wiz-btn.primary {
  background: linear-gradient(135deg,var(--tb-primary,#e10600),#7a0000);
  border-color: transparent; color: #fff;
}
.mk-wiz-btn.subtle { background: transparent; border-color: transparent; color: var(--tb-muted,#a0b4c8); }

/* === Email verification success card ====================== */
.mk-verify-card {
  background: linear-gradient(180deg,rgba(8,34,62,.96),rgba(11,21,35,.96));
  border: 1px solid var(--tb-border,#29435f);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  padding: 28px 24px;
  text-align: center;
}
.mk-verify-card .mk-verify-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  background: linear-gradient(135deg,#16a34a,#0e6b30);
  color: #fff; font-size: 34px; font-weight: 1000;
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
}
.mk-verify-card h4 {
  margin: 0 0 6px;
  font-size: 24px; font-weight: 1000; font-style: italic;
  text-transform: uppercase;
}
.mk-verify-card p { margin: 0 0 16px; color: var(--tb-muted,#a0b4c8); font-size: 13px; }
.mk-verify-card p.email {
  color: var(--tb-text,#f4f7fb); font-weight: 800;
  font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
}
.mk-verify-btn {
  display: inline-block; padding: 11px 22px; border-radius: 99px;
  background: linear-gradient(135deg,var(--tb-primary,#e10600),#7a0000);
  color: #fff; border: 0;
  font-size: 14px; font-weight: 1000; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}

/* === Climate Compliance card ============================== */
.mk-climate-tiles {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
  margin-bottom: 12px;
}
.mk-climate-tile {
  padding: 14px 12px; border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--tb-border,#29435f);
  text-align: center;
}
.mk-climate-tile.in    { border-left: 3px solid #16a34a; }
.mk-climate-tile.edge  { border-left: 3px solid var(--tb-warning,#f97316); }
.mk-climate-tile.out   { border-left: 3px solid var(--tb-danger,#dc2626); }
.mk-climate-tile .num { font-size: 28px; font-weight: 1000; font-style: italic; color: var(--tb-text,#f4f7fb); }
.mk-climate-tile .lbl { font-size: 11px; font-weight: 800; color: var(--tb-muted,#a0b4c8); text-transform: uppercase; letter-spacing: .08em; }

.mk-climate-rows { display: flex; flex-direction: column; gap: 6px; }
.mk-climate-row {
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
  flex-wrap: wrap;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--tb-border,#29435f);
  border-left: 3px solid var(--tb-border,#29435f);
  font-size: 12px; font-weight: 800;
  cursor: pointer; text-align: left;
  width: 100%; color: var(--tb-text,#f4f7fb);
}
.mk-climate-row.danger { border-left-color: var(--tb-danger,#dc2626); background: rgba(220,38,38,.10); }
.mk-climate-row.warn   { border-left-color: var(--tb-warning,#f97316); background: rgba(249,115,22,.08); }
.mk-climate-row .climate-detail {
  color: var(--tb-muted,#a0b4c8); font-size: 11px;
  font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-weight: 600;
}

/* === Move-to-Fruiting modal mockup ======================== */
.mk-modal {
  background: linear-gradient(180deg,rgba(8,34,62,.96),rgba(11,21,35,.96));
  border: 1px solid var(--tb-border,#29435f); border-radius: 14px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.mk-modal-head h4 { margin: 0 0 12px; font-size: 18px; font-weight: 1000; }
.mk-modal-note {
  padding: 10px 12px; border-radius: 10px; margin: 0 0 14px;
  background: rgba(34,211,238,.07); border-left: 3px solid #22d3ee;
  font-size: 13px; line-height: 1.45;
}
.mk-modal-note.ok { background: rgba(34,163,74,.10); border-left-color: #16a34a; }
.mk-modal-label {
  display: block; font-size: 11px; font-weight: 1000; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tb-muted,#a0b4c8); margin: 0 0 6px;
}
.mk-modal-select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--tb-border,#29435f); border-radius: 10px;
  background: #071525; color: var(--tb-text,#f4f7fb);
  font-size: 13px; font-weight: 700;
}
.mk-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px;
}
.mk-modal-actions button {
  padding: 9px 16px; border-radius: 99px;
  border: 1px solid var(--tb-border,#29435f);
  background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  color: var(--tb-text,#f4f7fb);
  font-size: 12px; font-weight: 800; cursor: pointer;
}
.mk-modal-actions button.primary {
  background: linear-gradient(135deg,var(--tb-primary,#e10600),#7a0000);
  border-color: transparent; color: #fff;
}

/* === Location Utilization rows ============================ */
.mk-loc-list { display: flex; flex-direction: column; gap: 10px; }
.mk-loc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--tb-border,#29435f);
}
.mk-loc-row .loc-name { font-weight: 1000; font-size: 13px; color: var(--tb-text,#f4f7fb); }
.mk-loc-row .loc-value {
  font-weight: 1000; font-size: 13px; text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tb-text,#f4f7fb);
}
.mk-loc-row .loc-value .muted { color: var(--tb-muted,#a0b4c8); font-weight: 800; }
.mk-loc-row .loc-bar {
  grid-column: 1/-1; height: 8px; border-radius: 99px;
  background: rgba(255,255,255,.06); overflow: hidden;
  border: 1px solid var(--tb-border,#29435f);
}
.mk-loc-row .loc-bar .fill { height: 100%; }
.mk-loc-row.ok     .fill { background: linear-gradient(90deg,#16a34a,#22c55e); }
.mk-loc-row.warn   .fill { background: linear-gradient(90deg,var(--tb-warning,#f97316),#fb923c); }
.mk-loc-row.danger .fill { background: linear-gradient(90deg,var(--tb-danger,#dc2626),#ef4444); }
.mk-loc-row .loc-sub {
  grid-column: 1/-1;
  font-size: 11px; color: var(--tb-muted,#a0b4c8); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* === Dashboard Insights grid ============================== */
.mk-insight-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 22px;
}
@media (max-width: 900px) { .mk-insight-grid { grid-template-columns: 1fr; } }
.mk-insight-card {
  background: linear-gradient(180deg,rgba(8,34,62,.92),rgba(11,21,35,.92));
  border: 1px solid var(--tb-border,#29435f); border-radius: 16px;
  padding: 18px;
}
.mk-insight-card h5 {
  margin: 0 0 4px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--tb-muted,#a0b4c8); font-weight: 1000;
}
.mk-insight-card h5 .accent { color: var(--tb-accent,#ff6f3b); margin-right: 4px; }
.mk-insight-card p.sub {
  margin: 0 0 12px; font-size: 12px; color: var(--tb-muted,#a0b4c8); font-weight: 600;
}
.mk-insight-tiles {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 8px;
}
.mk-insight-tiles .tile {
  padding: 12px 10px; border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--tb-border,#29435f);
  text-align: center;
}
.mk-insight-tiles .tile.in    { border-left: 3px solid #16a34a; }
.mk-insight-tiles .tile.edge  { border-left: 3px solid var(--tb-warning,#f97316); }
.mk-insight-tiles .tile.out   { border-left: 3px solid var(--tb-danger,#dc2626); }
.mk-insight-tiles .num { font-size: 26px; font-weight: 1000; font-style: italic; color: var(--tb-text,#f4f7fb); line-height: 1; }
.mk-insight-tiles .lbl { font-size: 10px; font-weight: 800; color: var(--tb-muted,#a0b4c8); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; line-height: 1.3; }
.mk-insight-tiles .muted { color: var(--tb-muted,#a0b4c8); opacity: .8; }
.mk-insight-card .footer {
  font-size: 11px; color: var(--tb-muted,#a0b4c8); font-weight: 600;
  margin: 8px 0 0; line-height: 1.4;
}
.mk-insight-card .footer.balanced { color: var(--tb-text,#f4f7fb); }
.mk-insight-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.mk-insight-table th,
.mk-insight-table td {
  padding: 6px 8px; text-align: left;
  border-bottom: 1px solid var(--tb-border,#29435f);
}
.mk-insight-table th {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tb-muted,#a0b4c8); font-weight: 1000;
}
.mk-insight-table td .ok   { color: #5bd87f; font-weight: 1000; }
.mk-insight-table td .warn { color: #ffb56b; font-weight: 1000; }
.mk-insight-table td.ok    { color: #5bd87f; font-weight: 1000; font-variant-numeric: tabular-nums; }
.mk-insight-table td.warn  { color: #ffb56b; font-weight: 1000; font-variant-numeric: tabular-nums; }
.mk-insight-table .diff {
  padding: 2px 6px; border-radius: 99px; font-size: 9px; font-weight: 1000;
  letter-spacing: .08em; text-transform: uppercase;
}
.mk-insight-table .diff.easy { background: rgba(22,163,74,.10); color: #5bd87f; border: 1px solid rgba(22,163,74,.55); }
.mk-insight-table .diff.mod  { background: rgba(249,115,22,.10); color: #ffb56b; border: 1px solid rgba(249,115,22,.55); }
.mk-insight-table .diff.hard { background: rgba(220,38,38,.10); color: #ff7d75; border: 1px solid rgba(220,38,38,.55); }
.mk-insight-table .loss-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 7px; border-radius: 99px;
  font-size: 11px; font-weight: 1000;
  border: 1px solid var(--tb-border,#29435f);
}
.mk-insight-table .loss-pill.danger { background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.55); color: #ff7d75; }
.mk-insight-table .loss-pill.warn   { background: rgba(249,115,22,.14); border-color: rgba(249,115,22,.55); color: #ffb56b; }

/* === Farm Performance scorecard tiles ===================== */
.mk-perf-row {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 10px;
}
@media (max-width: 1100px) { .mk-perf-row { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 700px)  { .mk-perf-row { grid-template-columns: repeat(2,1fr); } }
.mk-perf-tile {
  padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.18));
  border: 1px solid var(--tb-border,#29435f);
}
.mk-perf-tile .lbl {
  font-size: 10px; font-weight: 1000; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tb-muted,#a0b4c8);
}
.mk-perf-tile .val {
  font-size: 32px; font-weight: 1000; font-style: italic; line-height: 1;
  color: var(--tb-text,#f4f7fb); display: flex; align-items: baseline; gap: 6px;
  margin: 4px 0;
}
.mk-perf-tile .val .arrow { font-size: 24px; font-style: normal; }
.mk-perf-tile .sub { font-size: 11px; font-weight: 700; color: var(--tb-muted,#a0b4c8); line-height: 1.3; }
.mk-perf-tile.flow-pos   { border-left: 3px solid #22c55e; }
.mk-perf-tile.flow-pos .val .arrow { color: #5bd87f; }
.mk-perf-tile.ontime-ok  { border-left: 3px solid #22c55e; }
.mk-perf-tile.ontime-ok .val { color: #5bd87f; }
.mk-perf-tile.loss-warn  { border-left: 3px solid var(--tb-warning,#f97316); }
.mk-perf-tile.loss-warn .val { color: #ffb56b; }

/* === Loss reason modal mockup ============================= */
.mk-loss-modal {
  background: linear-gradient(180deg,rgba(8,34,62,.96),rgba(11,21,35,.96));
  border: 1px solid var(--tb-border,#29435f);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.mk-loss-bar { height: 5px; background: var(--tb-primary,#e10600); }
.mk-loss-stripe { height: 6px; background: repeating-linear-gradient(90deg,#fff 0 10px,#111 10px 20px); }
.mk-loss-body { padding: 22px 24px; }
.mk-loss-body h4 {
  margin: 0 0 8px; font-size: 20px; font-weight: 1000;
  font-style: italic; text-transform: uppercase;
}
.mk-loss-body p.muted { margin: 0 0 14px; color: var(--tb-muted,#a0b4c8); font-size: 13px; line-height: 1.5; }
.mk-loss-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 100%; padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--tb-border,#29435f);
  color: var(--tb-text,#f4f7fb); cursor: pointer; text-align: left;
  margin-bottom: 10px;
}
.mk-loss-option strong { font-size: 15px; font-weight: 1000; }
.mk-loss-option span { font-size: 12px; font-weight: 600; color: var(--tb-muted,#a0b4c8); line-height: 1.4; }
.mk-loss-option.warn   { border-left: 3px solid var(--tb-warning,#f97316); background: rgba(249,115,22,.08); }
.mk-loss-option.danger { border-left: 3px solid var(--tb-danger,#dc2626);  background: rgba(220,38,38,.10); }

/* === Mushroom Profile decision card ====================== */
.mk-profile-card {
  background: linear-gradient(180deg,rgba(8,34,62,.92),rgba(11,21,35,.92));
  border: 1px solid var(--tb-border,#29435f);
  border-radius: 12px; overflow: hidden;
}
.mk-profile-hero {
  background: rgba(0,0,0,.22); border-bottom: 1px solid var(--tb-border,#29435f);
  padding: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--tb-muted,#a0b4c8); font-weight: 900;
}
.mk-profile-hero .placeholder { font-size: 16px; }
.mk-profile-body { padding: 14px 16px; }
.mk-profile-eyebrow {
  margin: 0 0 4px;
  font-size: 11px; font-weight: 1000; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tb-muted,#a0b4c8);
}
.mk-profile-body h4 {
  margin: 0 0 2px; font-size: 22px; font-weight: 1000;
  text-transform: uppercase; line-height: 1.1;
}
.mk-profile-sci {
  margin: 0 0 8px; color: var(--tb-muted,#a0b4c8); font-style: italic; font-size: 12px;
}
.mk-profile-summary { margin: 0 0 12px; font-size: 13px; line-height: 1.45; }
.mk-profile-subhead {
  margin: 8px 0 -2px;
  font-size: 10px; font-weight: 1000; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tb-accent,#ff6f3b);
}
.mk-profile-facts {
  display: flex; flex-direction: column; gap: 6px; margin-top: 6px; margin-bottom: 8px;
}
.mk-profile-fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--tb-border,#29435f); border-radius: 8px;
  background: rgba(0,0,0,.18);
}
.mk-profile-fact b {
  font-size: 11px; font-weight: 1000; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tb-muted,#a0b4c8);
}
.mk-profile-fact span {
  text-align: right; font-size: 13.5px; font-weight: 800;
  color: var(--tb-text,#f4f7fb);
}

/* === Batch tile updates — type pills, edit button, history row, loss line === */
.mk-batch-tile-block::before { background: linear-gradient(90deg,var(--tb-primary,#e10600),var(--tb-accent,#ff6f3b)) !important; }
.mk-batch-tile-spawn::before { background: linear-gradient(90deg,#22d3ee,#0891b2) !important; }
.mk-batch-meta {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--tb-muted,#a0b4c8); font-weight: 800;
  margin: 4px 0 8px;
}
.mk-batch-meta .batch-id {
  font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
  color: var(--tb-text,#f4f7fb); letter-spacing: .04em;
}
.mk-type-pill {
  display: inline-flex; align-self: flex-start;
  font-size: 10px; font-weight: 1000; letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px;
  border: 1px solid var(--tb-border,#29435f);
  background: rgba(255,255,255,.06);
}
.mk-type-pill.block { border-color: rgba(225,6,0,.55); color: #ff7d75; background: rgba(225,6,0,.10); }
.mk-type-pill.spawn { border-color: rgba(34,211,238,.55); color: #7ad7e6; background: rgba(34,211,238,.10); }
.mk-batch-actions {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 8px 0;
}
.mk-tile-btn {
  padding: 6px 4px; border-radius: 99px;
  border: 1px solid var(--tb-border,#29435f);
  background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  color: var(--tb-text,#f4f7fb);
  font-size: 11px; font-weight: 800; cursor: pointer; text-align: center;
}
.mk-tile-btn.danger { background: linear-gradient(135deg,var(--tb-danger,#dc2626),#650000); border-color: transparent; color: #fff; }
.mk-history-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--tb-border,#29435f);
  font-size: 11px; color: var(--tb-muted,#a0b4c8); font-weight: 800;
}
.mk-history-row strong {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tb-accent,#ff6f3b); flex: 1;
}
.mk-loss-line {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--tb-muted,#a0b4c8); font-weight: 800; font-size: 12px;
}
.mk-loss-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: 99px;
  font-size: 11px; font-weight: 1000;
  border: 1px solid var(--tb-border,#29435f);
}
.mk-loss-pill.danger { background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.55); color: #ff7d75; }
.mk-loss-pill.warn   { background: rgba(249,115,22,.14); border-color: rgba(249,115,22,.55); color: #ffb56b; }

/* === Reset filters mock + search-icon refinement ========== */
.mk-reset-mock {
  padding: 8px 14px; border-radius: 99px;
  border: 1px solid var(--tb-border,#29435f);
  background: rgba(255,255,255,.04);
  color: var(--tb-muted,#a0b4c8);
  font-size: 12px; font-weight: 800; opacity: .6;
}
.mk-search-mock .search-icon {
  display: inline-block; margin-right: 6px; color: var(--tb-accent,#ff6f3b); font-weight: 900;
}