:root{
  --ground:#EFF1EE;
  --paper:#FFFFFF;
  --ink:#0E1A20;
  --ink-soft:#4A5A61;
  --deep:#123642;
  --rule:#D5DAD6;
  --caution:#B4611C;
  --run:#17714C;
  --run-dk:#57C08F;
  --run-btn:#1E8A5C;

  --cola:#7A3D18;
  --zero:#38312E;
  --lime:#A3B535;
  --orange:#DC8A2E;
  --water:#5F9EA8;
  --chg:#BEC4C0;
  --cip:#A2B7BB;

  --wrap:1180px;
}

/* ---------- fonts (self-hosted) ----------
   Latin subset only; the site is English. Archivo and IBM Plex Sans ship as
   variable fonts — Google serves one file per family and declares a @font-face
   per weight, all pointing at the same source, so one rule with a weight range
   replaces four. IBM Plex Mono is two genuine static faces.
   Files are content-addressed by Google's hash, so /fonts/* caches immutably. */
@font-face{font-family:Archivo;src:url("/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-var.woff2") format("woff2-variations");
  font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:Archivo,system-ui,sans-serif;
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:1.05;
  margin:0;
}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.22rem;letter-spacing:-0.01em;line-height:1.25}
p{margin:0 0 1.1rem}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.measure{max-width:62ch}
:focus-visible{outline:2.5px solid var(--run);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 16px;background:var(--deep);color:#fff;text-decoration:none;border-radius:4px}
.skip:focus{left:12px}
.lang{display:flex;gap:2px;align-items:center;font-family:"IBM Plex Mono";font-size:.78rem;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.lang a{padding:5px 9px;text-decoration:none;color:var(--ink-soft)}
.lang a[aria-current="true"]{background:var(--deep);color:#fff}
.lang a:not([aria-current="true"]):hover{background:rgba(18,54,66,.07);color:var(--ink)}
@media(max-width:520px){.lang{display:none}}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:60;
  background:rgba(239,241,238,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-in{display:flex;align-items:center;gap:34px;height:66px}
.mark{font-family:Archivo;font-weight:700;font-size:1.32rem;letter-spacing:-0.05em;text-decoration:none}
.mark span{color:var(--run)}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:.94rem}
.nav-links a{text-decoration:none;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
@media(max-width:820px){.nav-links{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:13px 22px;border-radius:4px;
  font-family:"IBM Plex Sans";font-size:.97rem;font-weight:500;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
}
.btn-solid{background:var(--deep);color:#fff}
.btn-solid:hover{background:#0B2831}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:rgba(18,54,66,.07)}
.btn-sm{padding:9px 16px;font-size:.9rem}

/* ---------- hero: footage + HUD ---------- */
/* Copy sits bottom-left, so the footage is protected from the bottom up rather
   than from the left across. The old stack — brightness(.34) under a 93% scrim —
   left about 2% of the footage visible behind the headline; it read as a black
   panel with a hint of plant in it. */
.hero{position:relative;min-height:94vh;display:flex;align-items:flex-end;background:#050A0C;overflow:hidden;padding:0}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.62) contrast(1.06) saturate(.66) hue-rotate(-8deg);
  transform:scale(1.06);animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.14)}}
/* bottom-weighted: opaque under the copy, clearing by the upper third */
.hero .scrim{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(4,9,11,.92) 0%,rgba(4,9,11,.78) 26%,rgba(4,9,11,.42) 52%,rgba(4,9,11,.20) 78%,rgba(4,9,11,.28) 100%)}
.hero .vign{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 104% 88% at 50% 42%,transparent 54%,rgba(3,7,9,.52) 100%),
  linear-gradient(to bottom,rgba(4,9,11,.46) 0%,transparent 22%,transparent 100%)}
.hero .tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(120deg,rgba(23,113,76,.20),transparent 58%)}
/* Bottom-left: the copy leaves the centred .wrap track and hugs the left gutter,
   the way the reference does (its h1 sits ~2.7% from the viewport edge). The
   headline still has .hud's column to stay clear of, hence the right margin. */
.hero .wrap{position:relative;z-index:4;max-width:none;margin:0;
  padding:120px 0 84px clamp(28px,4.4vw,80px)}
/* keep every line clear of the HUD column; the h1 sets its own tighter measure
   below, so this is the outer bound, not the headline's width */
.hero .wrap>*{max-width:min(58ch,calc(100vw - 480px))}
/* the shared .btn-line is dark ink — unreadable on the footage */
.hero .btn-line{border-color:rgba(255,255,255,.45);color:#E6EEF0}
.hero .btn-line:hover{background:rgba(255,255,255,.10)}
/* after .hero .wrap>*, so this wins — the headline keeps its own short measure */
.hero h1{font-size:clamp(2.7rem,5.6vw,4.4rem);max-width:19ch;color:#F2F6F6}
.hero .sub{font-size:1.18rem;color:#A4B7BD;max-width:50ch;margin:22px 0 30px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta-note{font-size:.88rem;color:#7B939B;margin:14px 0 0}
.board{text-align:left}

.hud{position:absolute;right:40px;top:50%;transform:translateY(-50%);z-index:5;width:330px;
  background:rgba(8,16,20,.72);backdrop-filter:blur(14px);
  border:1px solid rgba(87,192,143,.24);border-radius:6px;overflow:hidden}
.hud-h{padding:11px 15px;border-bottom:1px solid rgba(255,255,255,.09);
  font-family:"IBM Plex Mono";font-size:.72rem;color:#7B939B;display:flex;justify-content:space-between}
.hud-h b{color:var(--run-dk);font-weight:500}
.hud-r{display:flex;align-items:center;gap:11px;padding:10px 15px;border-bottom:1px solid rgba(255,255,255,.055)}
.hud-r:last-of-type{border-bottom:0}
.hud-sw{width:9px;height:26px;border-radius:2px;flex:0 0 9px;transition:background .7s}
.hud-nm{font-size:.83rem;color:#CBD9DD;flex:1}
.hud-nm i{display:block;font-style:normal;font-family:"IBM Plex Mono";font-size:.7rem;color:#6E868E;margin-top:1px}
.hud-pc{font-family:"IBM Plex Mono";font-size:.82rem;color:var(--run-dk);font-variant-numeric:tabular-nums}
.hud-f{padding:12px 15px;border-top:1px solid rgba(255,255,255,.09);display:flex;justify-content:space-between;
  font-family:"IBM Plex Mono";font-size:.74rem;color:#7B939B}
.hud-f b{color:#E6EEF0;font-weight:500}
@media(max-width:1100px){
  /* The HUD is hidden below this width, so the hero goes back to being a plain
     full-bleed video hero: no dropped panel to make room for, and none of the
     scaffolding that served it (a fixed media height, a mask fading into the
     hero's background, a portrait crop of the footage). */
  .hero{min-height:auto;display:block}
  .hero .wrap{padding:70px 28px 38px}
  .hero .wrap>*{max-width:none}
  /* Out of context on a phone: a six-line status panel arrives with no frame of
     reference, below copy that hasn't finished making its point. */
  .hud{display:none}
}


/* ---------- combinatorial search field ---------- */
/* The counter sits over the field, so .search is the positioning context and
   .field carries the tiles absolutely. Tile colours come from the SKU tokens
   the rest of the page already uses. */
.search{position:relative;margin:0;background:var(--paper);border:1px solid var(--rule);
  border-radius:6px;overflow:hidden;text-align:left}
.search-bar{padding:16px 18px;border-bottom:1px solid var(--rule)}
.search-title{font-weight:600;letter-spacing:-0.01em}
.search-cap{font-size:.8rem;color:var(--ink-soft)}
.field{position:relative;margin:26px auto 0;max-width:1040px;
  transition:height .9s cubic-bezier(.6,.02,.2,1)}
.tile{position:absolute;display:flex;gap:1px;border-radius:2px;overflow:hidden;opacity:.42;
  transition:opacity .6s ease,transform .9s cubic-bezier(.6,.02,.2,1)}
.tile span{flex:1}
.tile.win{opacity:1;z-index:5;box-shadow:0 18px 50px rgba(14,26,32,.22);
  border:1px solid rgba(255,255,255,.7)}
.tile.gone{opacity:0}
.ctr{margin:30px auto 0;text-align:center;pointer-events:none}
.ctr-n{font-family:Archivo,system-ui,sans-serif;font-weight:600;
  font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-0.04em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.ctr-l{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.75rem;
  color:var(--ink-soft);letter-spacing:.07em;margin-top:2px}
.ctr.done .ctr-n{color:var(--run)}
.search-foot{margin:0;padding:26px 18px 22px;max-width:70ch;
  font-size:.95rem;color:var(--ink-soft)}
@media(max-width:700px){
  .field{margin-top:26px}
  .ctr-l{font-size:.68rem}
}

/* ---------- plant schematic ---------- */
.plant{margin:52px 0 0;background:var(--paper);border:1px solid var(--rule);border-radius:6px;overflow:hidden;text-align:left}
.plant-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--rule);background:#F7F8F7}
.plant-title{font-family:Archivo;font-weight:600;font-size:.98rem}
.plant-cap{font-size:.8rem;color:var(--ink-soft)}
.plant-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.pill{font-family:"IBM Plex Mono";font-size:.76rem;padding:5px 10px;border-radius:3px;background:#E7EAE7;color:var(--ink-soft)}
.pill.on{background:var(--run);color:#fff}
.svg-hold{padding:10px 6px 0;overflow-x:auto}
.svg-hold svg{display:block;width:100%;min-width:940px;height:auto}
.swipe{display:none;padding:0 18px 8px;font-size:.76rem;color:#8B9A9F;font-family:"IBM Plex Mono"}
@media(max-width:960px){.swipe{display:block}}
.ghost{fill:none;stroke:#E9EDEA;stroke-width:1.2}
.pipe{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:2 9;opacity:0;transition:opacity .6s,stroke .6s}
.pipe.live{opacity:1;animation:flow 1.9s linear infinite}
@keyframes flow{to{stroke-dashoffset:-44}}
.vessel{fill:#FBFCFB;stroke:#C9D0CB;stroke-width:1.4}
.level{transition:fill .6s}
.lbl{font-family:"IBM Plex Mono";font-size:11px;fill:#8B9A9F}
.lbl-b{font-family:"IBM Plex Sans";font-size:12.5px;font-weight:500;fill:#0E1A20}
.zone{font-family:"IBM Plex Mono";font-size:11px;fill:#A6B2B6;letter-spacing:.05em}
.ic{fill:none;stroke:#A6B2B6;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ic .solid{fill:#A6B2B6;stroke:none}
.bottle{fill:#C9D0CB}
.conv{animation:conv 2.6s linear infinite}
@keyframes conv{to{transform:translateX(34px)}}
.cross{margin-left:auto;font-family:"IBM Plex Mono";font-size:.8rem}
.cross b{color:var(--run);font-weight:500}

/* ---------- schedule board ---------- */
.board{
  margin:0;background:var(--paper);
  border:1px solid var(--rule);border-radius:6px;overflow:hidden;
  box-shadow:0 1px 0 rgba(14,26,32,.04);
}
.board-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--rule);background:#F7F8F7;
}
.board-title{font-family:Archivo;font-weight:600;font-size:.98rem}
.board-caption{font-size:.8rem;color:var(--ink-soft)}
.board-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.state-pill{
  font-family:"IBM Plex Mono";font-size:.76rem;padding:5px 10px;
  border-radius:3px;background:#E7EAE7;color:var(--ink-soft);
}
.state-pill.on{background:var(--run);color:#fff}

.grid-rows{padding:8px 0 4px}
.row{display:flex;align-items:center;height:34px}
.row-label{
  width:158px;flex:0 0 158px;padding-left:18px;padding-right:10px;
  font-family:"IBM Plex Mono";font-size:.74rem;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.track{position:relative;flex:1;height:22px;margin-right:18px;background:#F1F3F1;border-radius:2px}
.blk{
  position:absolute;top:0;height:22px;border-radius:2px;
  transition:left .85s cubic-bezier(.65,.02,.28,1),width .85s cubic-bezier(.65,.02,.28,1),opacity .5s;
}
.blk.chg{background:repeating-linear-gradient(45deg,var(--chg),var(--chg) 3px,#D6DAD7 3px,#D6DAD7 6px)}
.blk.cip{background:repeating-linear-gradient(45deg,var(--cip),var(--cip) 3px,#BACBCE 3px,#BACBCE 6px)}
.grp{
  padding:12px 18px 5px;font-family:"IBM Plex Mono";font-size:.7rem;
  color:#8B9A9F;border-top:1px solid #EDEFEC;margin-top:6px;
}
.grp:first-child{border-top:0;margin-top:0}

.axis{display:flex;padding:2px 18px 12px}
.axis-pad{width:158px;flex:0 0 158px}
.axis-line{flex:1;display:flex;justify-content:space-between;font-family:"IBM Plex Mono";font-size:.68rem;color:#8B9A9F;border-top:1px solid var(--rule);padding-top:5px}

.legend{display:flex;gap:16px;flex-wrap:wrap;padding:12px 18px 16px;border-top:1px solid var(--rule);font-size:.78rem;color:var(--ink-soft)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* ---------- metric strip ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.metric{padding:18px;border-right:1px solid var(--rule)}
.metric:last-child{border-right:0}
.metric-k{font-size:.79rem;color:var(--ink-soft);margin-bottom:7px}
.metric-v{font-family:Archivo;font-weight:600;font-size:1.55rem;letter-spacing:-0.03em;transition:color .4s}
.metric-v.moved{color:var(--run)}
.metric-d{font-family:"IBM Plex Mono";font-size:.74rem;color:#8B9A9F;margin-top:3px;min-height:1.1em}
@media(max-width:760px){
  .metrics{grid-template-columns:1fr 1fr}
  .metric:nth-child(2){border-right:0}
  .metric:nth-child(1),.metric:nth-child(2){border-bottom:1px solid var(--rule)}
  /* Labels keep their full 158px here. Narrowing to 96px ellipsised every row —
     "Line 1 · PET 600" became "Line 1 · …", dropping the SKU, which is the half
     that identifies the row. The longest label measures 136px and needs the
     12px/10px padding around it, so 158px is the first width that never clips.
     The board overflows instead, which .svg-hold already scrolls. Only the left
     padding tightens on mobile; .axis-pad must track it or the axis drifts. */
  .row-label,.axis-pad{padding-left:12px}
}

/* ---------- sections ---------- */
section{padding:96px 0}
.dark{background:var(--ink);color:#DCE3E4}
.dark h2,.dark h3{color:#fff}
.dark .ink-soft{color:#95A6AB}
.lede{font-size:1.24rem;line-height:1.55;max-width:60ch}
.ink-soft{color:var(--ink-soft)}

/* ---------- argument intro + numbered bands ---------- */
/* Intro spans the full width: heading left, lede in its own column beside it,
   so body copy keeps a readable measure instead of running the full 1180px. */
/* Two headings facing each other, then the copy centred full-width beneath.
   align-items:start so both read from the same baseline even when one wraps
   to more lines than the other. */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.intro h2{max-width:18ch;margin:0}
.intro h2:last-child{justify-self:end;text-align:right;max-width:15ch}
.intro-tail{max-width:68ch;margin:38px auto 0;text-align:center;padding-bottom:46px}
.intro-tail .lede{font-size:1.18rem;margin:0 0 14px;max-width:none}
.intro-tail .tail{margin:0;font-size:.97rem}
@media(max-width:900px){
  .intro{grid-template-columns:1fr;gap:22px;align-items:start}
  .intro h2{max-width:20ch}
  /* stacked, so the right-hand heading stops being right-hand */
  .intro h2:last-child{justify-self:start;text-align:left}
  .intro-tail{margin-top:28px;text-align:left}
}

/* Four equal columns; the open one grows to about half the row. Headings and
   teasers stay visible in every column, so nothing is hidden from a scanner. */
/* Flex rather than grid: grid-template-columns does not interpolate reliably,
   which left the row frozen on whichever shape it first painted. flex-grow
   animates cleanly in every engine. */
.chain{counter-reset:arg;display:flex;gap:1px;
  background:var(--rule);border-top:1px solid var(--rule)}
.card{flex:1 1 0;min-width:0;transition:flex-grow .5s cubic-bezier(.4,.02,.2,1)}
.card[aria-expanded="true"]{flex-grow:2.5}

/* overflow-x:clip rather than hidden: the number badge sits above the card's
   top edge, and `hidden` would clip it away entirely. clip on one axis only
   still contains the expanding copy without cutting the badge off. */
.card{background:var(--ground);border:0;text-align:left;font:inherit;color:inherit;
  cursor:pointer;padding:34px 22px 26px;position:relative;overflow-x:clip;
  display:flex;flex-direction:column;min-height:100%}
.card::before{
  counter-increment:arg;content:"0" counter(arg);
  position:absolute;left:22px;top:-16px;width:32px;height:32px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono";font-size:.72rem;color:var(--run);
  background:var(--ground);border:1px solid var(--rule);border-radius:50%;
  transition:background .3s,color .3s,border-color .3s}
.card[aria-expanded="true"]::before{background:var(--run);color:#fff;border-color:var(--run)}
.card:hover:not([aria-expanded="true"]){background:#EAEDE9}
/* These labels are the VP-facing summary of each argument, so they lead the
   card rather than whispering above it. */
.card .tagline{display:block;font-family:Archivo,system-ui,sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--run);margin:14px 0 9px;transition:color .3s}
.card[aria-expanded="true"] .tagline{color:var(--run)}
.card h3{font-size:1.06rem;letter-spacing:-0.01em;line-height:1.28;margin-bottom:10px;
  transition:font-size .4s}
.card[aria-expanded="true"] h3{font-size:1.3rem;max-width:22ch}
.teaser{margin:0;color:var(--ink-soft);font-size:.9rem;line-height:1.5}
.full{margin:0;color:var(--ink-soft);font-size:.97rem;line-height:1.55;max-width:46ch;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.4,.02,.2,1),opacity .35s,margin .4s}
.card[aria-expanded="true"] .teaser{display:none}
.card[aria-expanded="true"] .full{max-height:340px;opacity:1}
.more{margin-top:auto;padding-top:16px;font-family:"IBM Plex Mono";font-size:.7rem;
  color:var(--run);display:flex;align-items:center;gap:7px}
.more::after{content:"+";font-size:.95rem;line-height:1}
.card[aria-expanded="true"] .more{display:none}
.vis{max-height:0;opacity:0;overflow:hidden;margin:0;
  transition:max-height .5s cubic-bezier(.4,.02,.2,1),opacity .4s,margin-top .4s}
.card[aria-expanded="true"] .vis{max-height:260px;opacity:1;margin-top:18px}
.vis-inner{background:var(--paper);border:1px solid var(--rule);border-radius:5px;padding:14px 16px}
.vis svg{width:100%;height:auto;display:block}
.vis figcaption{font-family:"IBM Plex Mono";font-size:.69rem;color:#8B9A9F;margin-top:9px}
@media(max-width:900px){
  .chain{flex-direction:column;gap:1px}
  .card,.card[aria-expanded="true"]{flex:0 0 auto}
  /* keep the copy clear of the badge instead of letting them overlap */
  .card{min-height:0;padding:30px 0 24px 46px}
  .card::before{left:0}
  .card h3,.card[aria-expanded="true"] h3{font-size:1.14rem}
  .card[aria-expanded="true"] .vis{max-height:none}
}
/* card diagram vocabulary */
.dead{fill:none;stroke:#E3E7E3;stroke-width:1.1;stroke-dasharray:3 5}
.hit{fill:none;stroke:var(--caution);stroke-width:1.4;stroke-dasharray:3 3}
.row-lbl{font-family:"IBM Plex Mono";font-size:9px;fill:#8B9A9F}

/* argument list */
.arg{border-top:1px solid var(--rule);padding:22px 0}
.dark .arg{border-color:#26363C}
.arg h3{margin-bottom:8px}
.arg p{margin:0;color:var(--ink-soft);font-size:.99rem}
.dark .arg p{color:#95A6AB}

/* capability blocks */
.cap{border-top:1px solid var(--rule);padding-top:44px;margin-top:56px}
.cap:first-of-type{border-top:0;padding-top:0;margin-top:0}
.cap-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
@media(max-width:900px){.cap-grid{grid-template-columns:1fr;gap:32px}}
.cap-copy h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:14px}
.cap-copy p{color:var(--ink-soft)}

/* mock UI panels */
.mock{
  background:var(--paper);border:1px solid var(--rule);border-radius:6px;
  overflow:hidden;font-size:.85rem;
}
.mock-head{
  padding:10px 14px;border-bottom:1px solid var(--rule);background:#F7F8F7;
  font-family:"IBM Plex Mono";font-size:.75rem;color:var(--ink-soft);
  display:flex;justify-content:space-between;gap:12px;
}
.mock-body{padding:14px}
table.mk{width:100%;border-collapse:collapse;font-size:.83rem}
table.mk th{
  text-align:left;font-weight:500;color:#8B9A9F;font-size:.76rem;
  padding:0 10px 8px 0;border-bottom:1px solid var(--rule);
}
table.mk td{padding:9px 10px 9px 0;border-bottom:1px solid #F0F2EF;font-variant-numeric:tabular-nums}
table.mk tr:last-child td{border-bottom:0}
.num{font-family:"IBM Plex Mono";font-size:.8rem}
.up{color:var(--run)}.down{color:var(--run)}
.dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:-1px}

.alert{
  border-left:3px solid var(--caution);background:#FBF6F1;
  padding:11px 14px;margin-bottom:11px;font-size:.87rem;
}
.alert b{font-weight:600}
.opt{padding:11px 14px;border:1px solid var(--rule);border-radius:4px;margin-bottom:9px;font-size:.87rem}
.opt-h{display:flex;justify-content:space-between;gap:12px;margin-bottom:4px}
.opt-h b{font-weight:600}
.opt p{margin:0;color:var(--ink-soft);font-size:.83rem}
.opt.pick{border-color:var(--deep);background:#F4F7F7}

/* policy dial */
.dial{padding:6px 4px 0}
.dial-ends,.dial-marks{display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink-soft)}
.dial-marks{font-family:"IBM Plex Mono";font-size:.7rem;color:#8B9A9F;margin-top:9px}
.dial-marks span:nth-child(2){color:var(--run)}
.dial-track{position:relative;height:6px;border-radius:3px;background:#E4E8E5;margin-top:12px}
.dial-fill{position:absolute;left:0;top:0;height:6px;width:54%;border-radius:3px;background:var(--deep)}
.dial-knob{
  position:absolute;left:54%;top:50%;width:17px;height:17px;border-radius:50%;
  background:var(--run);border:3px solid #fff;transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px var(--rule);
}

/* resource band */
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:14px;border:1px solid #26363C;border-top:0;border-radius:0 0 6px 6px}
.res>div{padding:24px 34px;border-right:1px solid #26363C}
.res>div:last-child{border-right:0}
@media(max-width:760px){.res{grid-template-columns:1fr}.res>div{border-right:0;border-bottom:1px solid #26363C}.res>div:last-child{border-bottom:0}}
.res-v{font-family:Archivo;font-weight:600;font-size:1.5rem;letter-spacing:-0.03em;color:#fff}
.res-k{font-size:.88rem;color:#95A6AB;margin-top:5px}

/* value columns */
.val{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #26363C;border-radius:6px;overflow:hidden}
.val>div{padding:36px 34px}
.val>div:first-child{border-right:1px solid #26363C}
@media(max-width:760px){
  .val{grid-template-columns:1fr}
  .val>div:first-child{border-right:0;border-bottom:1px solid #26363C}
}
.val h3{font-size:1.3rem;margin-bottom:6px}
.val .kicker{font-family:"IBM Plex Mono";font-size:.74rem;color:var(--run-dk);margin-bottom:10px}
.val ul{margin:16px 0 0;padding:0;list-style:none}
.val li{padding:11px 0;border-top:1px solid #26363C;font-size:.95rem;color:#B9C6C9}

/* integrations */
.int-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
@media(max-width:800px){.int-grid{grid-template-columns:1fr 1fr}}
.int{
  background:var(--paper);border:1px solid var(--rule);border-radius:5px;
  padding:20px 18px;
}
.int b{display:block;font-family:Archivo;font-weight:600;font-size:1rem;margin-bottom:5px}
.int span{font-size:.84rem;color:var(--ink-soft)}

/* trust */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
@media(max-width:800px){.trust-grid{grid-template-columns:1fr}}
.trust{border:1px solid #26363C;border-radius:5px;padding:22px}
.trust h3{font-size:1rem;margin-bottom:7px}
.trust p{margin:0;font-size:.9rem;color:#95A6AB}

/* faq */
details{border-top:1px solid var(--rule);padding:0}
details summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:Archivo;font-weight:500;font-size:1.06rem;letter-spacing:-0.01em;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"+";position:absolute;right:6px;top:17px;
  font-family:"IBM Plex Mono";font-size:1.25rem;color:var(--run);
}
details[open] summary::after{content:"–"}
details .ans{padding:0 60px 22px 0;color:var(--ink-soft);font-size:.98rem}
details .ans p:last-child{margin-bottom:0}

/* final cta */
.final{text-align:center;padding:104px 0}
.final h2{max-width:18ch;margin:0 auto 20px}
.final .measure{margin-left:auto;margin-right:auto}
.final .cta-row{justify-content:center}
.final footer{text-align:left}

/* centered single-column section intros */
.intro-center{text-align:center}
.intro-center>.wrap>h2,.intro-center>.wrap>p{margin-left:auto;margin-right:auto}
.intro-center .val,.intro-center .res,.intro-center .int-grid,
.intro-center .trust-grid,.intro-center details{text-align:left}

footer{border-top:1px solid #26363C;padding:34px 0;font-size:.86rem;color:#7E9198}
.foot-in{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.foot-in .mark{color:#fff;font-size:1.1rem}
/* wrap: four links plus gaps come to 294px, which fits 390px but not a 375px
   phone once the copy changes. padding takes the links to a 44px tap target. */
.foot-in nav{position:static;background:none;border:0;margin-left:auto;display:flex;flex-wrap:wrap;gap:4px 20px}
.foot-in a{color:#7E9198;text-decoration:none;display:inline-block;padding:11px 0}
.foot-legal{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  margin-top:20px;padding-top:18px;border-top:1px solid #1C2A2F;font-size:.8rem;color:#63767D}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  /* the poster still reads as the plant; the loop is what has to stop.
     brightness() lives on .hero video, so the poster needs its own grade —
     without it the raw image sits under the lighter scrim and washes out. */
  .hero video{display:none}
  /* linear-gradient over the image grades it in the same layer, so it stays
     under .scrim/.vign/.tint without needing a z-index that would jump above
     them (they are absolute with auto z-index and paint in DOM order). */
  .hero{background:
    linear-gradient(rgba(4,9,11,.38),rgba(4,9,11,.38)),
    #050A0C url("/prodooo-plant-poster.jpg") center/cover no-repeat}
}