/* ============================================================
   AIS Homepage v8 · "Walk the Building"
   A scroll-driven tour of one manufacturing facility.
   Design tokens
   ============================================================ */
/* --p is the per-zone scroll progress the engine writes every frame. Registering it
   as a real number means the value is parsed once instead of re-parsed as a token
   stream on every write, and the invalidation it triggers stays inside the
   properties that consume it: video scale, ghost translate, hero fade, labmedia. */
@property --p{syntax:"<number>";inherits:true;initial-value:0}

:root{
  --onyx:#0B0C0E;
  --carbon:#101316;
  --smoke:#171B1F;
  --bone:#F4F2ED;
  --bone-66:rgba(244,242,237,.66);
  /* .55, not .4: at .4 this composited under 4.5:1 on every surface it is used on */
  --bone-40:rgba(244,242,237,.55);
  --hair:rgba(244,242,237,.12);
  --hair-soft:rgba(244,242,237,.07);
  --grove:#017950;
  --grove-deep:#025C3E;
  --mint:#5CBF95;
  --ink:#0B0C0E;
  --ink-66:rgba(11,12,14,.66);
  --ink-hair:rgba(11,12,14,.14);
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono","SF Mono",Menlo,monospace;
  --wrap:1240px;
  --railw:64px;
  --vh:100svh;
  /* Display-cutout insets, named once. They resolve to 0px in every context that
     reports none, so the calc() that use them are inert on a desktop browser. The
     viewport meta is deliberately left at width=device-width without viewport-fit:
     cover, so only the fixed chrome needs to know about them. */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}
@supports not (height:100svh){ :root{ --vh:100vh; } }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  background:var(--onyx);
  color:var(--bone);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  overflow-wrap:break-word;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--grove);color:var(--bone)}

/* ---------- global textures ---------- */
/* inset only has to cover the keyframe travel below, which peaks at 2% of the
   layer's own size. -4% covers it twice over. At -50% this was a four-viewport
   mix-blend-mode layer being re-composited every animation step. */
.grain{
  position:fixed;inset:-4%;z-index:80;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.038;mix-blend-mode:soft-light;
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}33%{transform:translate(-2%,1.4%)}66%{transform:translate(1.6%,-1%)}100%{transform:translate(0,0)}
}
.spot{
  position:fixed;z-index:1;width:56vmax;height:56vmax;border-radius:50%;
  pointer-events:none;left:0;top:0;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle,rgba(92,191,149,.07) 0%,rgba(92,191,149,0) 60%);
  transform:translate(-50%,-50%);
}
.js .spot.live{opacity:1}

/* ---------- focus visibility ----------
   Keyboard focus has to be plainly visible on both grounds. Mint reads against the
   onyx sections and still clears contrast on the two bone bands, and the offset
   keeps the ring off the glyphs. Pointer clicks never draw it. */
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:2px}
.btn:focus-visible,.tab:focus-visible,.rung:focus-visible{outline-offset:4px}
.rail a:focus-visible .dot{outline:2px solid var(--mint);outline-offset:4px}
.rail a:focus-visible .lbl{opacity:1;transform:none}
.khead:focus-visible,.qa button:focus-visible,.brow:focus-visible,.sheet a:focus-visible{outline-offset:-2px}
.flow-light :focus-visible,.z-light :focus-visible{outline-color:var(--grove)}

/* skip link: first tabbable element, off-screen until it takes focus */
.skip{
  position:fixed;left:12px;top:-100px;z-index:90;
  background:var(--grove);color:#fff;font-weight:600;font-size:14px;
  padding:12px 18px;border-radius:4px;transition:top .2s;
}
.skip:focus{top:calc(var(--sat) + 12px)}

/* ---------- type helpers ---------- */
.kicker{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--mint);
}
.display{
  font-weight:700;font-stretch:104%;
  font-size:clamp(2.3rem,min(5.2vw,8.6vh),4.4rem);
  line-height:1.06;letter-spacing:-.018em;text-wrap:balance;
}
.h2{
  font-weight:720;font-stretch:105%;
  font-size:clamp(1.8rem,3.6vw,3rem);
  line-height:1.08;letter-spacing:-.016em;text-wrap:balance;
}
.h3{font-weight:700;font-stretch:105%;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.2;letter-spacing:-.012em}
.lede{font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.65;color:var(--bone-66);max-width:60ch}
.mono{font-family:var(--mono)}

/* station plate */
.plate{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--bone-66);
  border:1px solid var(--hair);padding:9px 14px 8px;border-radius:3px;
  background:rgba(11,12,14,.42);backdrop-filter:blur(6px);
}
.plate i{
  font-style:normal;color:var(--onyx);background:var(--mint);
  font-weight:600;padding:2px 7px 1px;border-radius:2px;letter-spacing:.14em;
}
.plate em{font-style:normal;color:var(--bone)}

/* corner-tick frame */
.ticks{position:relative}
.ticks::before,.ticks::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border:0 solid var(--mint);opacity:.85;
}
.ticks::before{top:-1px;left:-1px;border-top-width:1.5px;border-left-width:1.5px}
.ticks::after{bottom:-1px;right:-1px;border-bottom-width:1.5px;border-right-width:1.5px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:16px 28px;border-radius:999px;position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,color .3s;
  white-space:nowrap;
}
.btn .arr{transition:transform .35s cubic-bezier(.16,1,.3,1);font-family:var(--mono)}
.btn:hover .arr{transform:translateX(5px)}
.btn:active{transform:scale(.98)}
.btn-solid{background:var(--grove);color:#fff}
.btn-solid:hover{background:var(--grove-deep)}
/* The secondary button sits directly on a moving film, so it carries its own
   surface: smoked glass over whatever frame is behind it. The fill is dark enough
   that bone type clears 4.5:1 even against a pure white frame, and it stays
   plainly secondary to the solid grove primary beside it. */
.btn-ghost{
  border:1px solid rgba(244,242,237,.22);
  color:var(--bone);
  background:rgba(11,12,14,.66);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{background:rgba(11,12,14,.82);border-color:var(--mint);color:var(--mint)}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink:hover{background:#1c2126}

/* reveal system */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*80ms)}
.js .rv.on{opacity:1;transform:none}

/* ============================================================
   fixed chrome
   ============================================================ */
.top{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;gap:28px;
  /* The bar grows by the top inset and pads its content clear of it, so the brand
     and the menu control never sit under a status bar or a notch. Everything is
     0px where no cutout is reported, which is every desktop browser. */
  padding:var(--sat) calc(clamp(18px,3vw,40px) + var(--sar)) 0 calc(clamp(18px,3vw,40px) + var(--sal));
  height:calc(74px + var(--sat));
  background:linear-gradient(rgba(9,10,12,.62),rgba(9,10,12,.38));
  backdrop-filter:blur(12px);
  transition:background .4s,border-color .4s,height .4s;
  border-bottom:1px solid transparent;
}
.top.scrolled{background:rgba(9,10,12,.78);border-color:var(--hair-soft);height:calc(62px + var(--sat))}
.top .brand{display:flex;align-items:center;gap:12px;margin-right:auto;padding:10px 0}
.top .brand img{height:24px;width:auto}
.top .brand span{
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--bone-40);
  text-transform:uppercase;padding-top:2px;
}
.top nav{display:flex;gap:26px}
.top nav a{
  font-size:13.5px;font-weight:500;color:var(--bone-66);
  letter-spacing:.02em;transition:color .25s;position:relative;padding:6px 0;
}
.top nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--mint);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.top nav a:hover{color:var(--bone)}
.top nav a:hover::after{transform:scaleX(1)}
.top .btn{padding:11px 20px;font-size:13.5px}
.menu-btn{display:none;width:44px;height:44px;position:relative;flex:0 0 auto}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{
  content:"";position:absolute;left:10px;right:10px;height:1.6px;background:var(--bone);transition:transform .3s,opacity .3s;
}
.menu-btn span{top:21px}
.menu-btn span::before{left:0;right:0;top:-7px}
.menu-btn span::after{left:0;right:0;top:7px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(7px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-7px) rotate(-45deg)}
.sheet{
  position:fixed;inset:0;z-index:55;background:rgba(9,10,12,.96);backdrop-filter:blur(18px);
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  /* clears the header and the cutout at the top, the home indicator at the bottom,
     and scrolls rather than clipping when the list is taller than a short screen */
  padding:calc(var(--sat) + 84px) calc(8vw + var(--sar)) calc(var(--sab) + 24px) calc(8vw + var(--sal));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* Closed, this is not a transparent layer: it does not exist. At opacity 0 it was
     still a full-viewport backdrop-filter surface being composited on every frame,
     and its links were still twelve tab stops on a desktop that cannot open it.
     visibility carries the transition so the fade-out still plays; the engine adds
     inert alongside, which is what actually takes the links out of the tab order. */
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility .35s;
}
.menu-open .sheet{opacity:1;visibility:visible;pointer-events:auto}
.sheet a{
  font-weight:800;font-stretch:110%;font-size:clamp(1.5rem,5.4vw,2.2rem);
  padding:9px 0;border-bottom:1px solid var(--hair-soft);color:var(--bone);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  min-height:44px;
}
.sheet a small{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--mint);letter-spacing:.2em;flex:0 0 auto}

/* tour rail */
.rail{
  position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:50;
  display:flex;flex-direction:column;gap:0;
  /* The labels are hidden at opacity 0 but still occupy roughly 200px of anchor
     across the left of the page. Left hit-testable they swallow clicks meant for
     the content underneath and jump the reader to another station. Only the dot
     takes the pointer; the anchor still receives the click and the hover, because
     hover propagates from the dot to its ancestors. */
  pointer-events:none;
}
.rail .track{position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--hair)}
.rail a{
  display:flex;align-items:center;gap:12px;padding:9px 0;position:relative;
}
.rail .dot{
  width:11px;height:11px;border-radius:50%;border:1.5px solid var(--hair);
  background:var(--onyx);transition:all .3s;flex:0 0 auto;
  position:relative;pointer-events:auto;
}
/* a comfortable 27x39 target without widening the visible dot, and still 96px clear
   of the left edge of the content column */
.rail .dot::after{content:"";position:absolute;inset:-14px -8px}
.rail .lbl{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone-66);background:rgba(9,10,12,.88);border:1px solid var(--hair-soft);
  padding:5px 10px 4px;border-radius:3px;
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s,transform .3s,color .3s;white-space:nowrap;
}
.rail a:hover .lbl{opacity:1;transform:none}
.rail a.act .dot{border-color:var(--mint);background:var(--grove);box-shadow:0 0 0 4px rgba(92,191,149,.16)}
/* The active room's label is styled for when it IS shown, but it is no longer held
   open. It is an opaque pill sitting over the content column, and on a one-station
   page chrome() holds .act forever, so it parked there for the whole page; even on
   the homepage tour it covered whatever section happened to share its y. Nothing is
   lost by letting it wait for a hover: the mint dot marks the position, and the HUD
   bottom-left already states the current station in words. */
.rail a.act .lbl{color:var(--mint);border-color:rgba(92,191,149,.4)}
.rail a.done .dot{border-color:var(--grove);background:var(--grove)}

/* HUD readout */
.hud{
  /* decorative readout, aria-hidden, so it must not take clicks off the content */
  position:fixed;left:26px;bottom:22px;z-index:50;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone-66);display:flex;gap:14px;align-items:baseline;
  background:rgba(9,10,12,.88);border:1px solid var(--hair-soft);
  padding:8px 13px 7px;border-radius:3px;
}
.hud b{color:var(--mint);font-weight:500}
.hud .pct{color:var(--bone-66)}

/* ============================================================
   zones (pinned scenes)
   ============================================================ */
.zone{position:relative;height:var(--pin,300vh)}
.stage{position:sticky;top:0;height:var(--vh);overflow:hidden;display:flex;align-items:center}
.media{position:absolute;inset:0;z-index:0;background:var(--carbon)}
.media video{
  width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.14 - var(--p,0) * .14)) translateY(calc(var(--p,0) * -2.5%));
  will-change:transform;
}
.media .scrim{position:absolute;inset:0}
.scrim-l{background:
  linear-gradient(90deg,rgba(7,8,10,.92) 0%,rgba(7,8,10,.66) 38%,rgba(7,8,10,.18) 66%,rgba(7,8,10,.42) 100%),
  linear-gradient(0deg,rgba(7,8,10,.85) 0%,rgba(7,8,10,0) 34%),
  linear-gradient(180deg,rgba(7,8,10,.55) 0%,rgba(7,8,10,0) 22%)}
.scrim-c{background:
  linear-gradient(0deg,rgba(7,8,10,.9) 0%,rgba(7,8,10,.32) 46%,rgba(7,8,10,.62) 100%)}
.ghost{
  position:absolute;right:-2vw;bottom:-6vh;z-index:1;pointer-events:none;
  font-weight:900;font-stretch:125%;font-size:34vw;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(244,242,237,.07);
  transform:translateY(calc(var(--p,0) * 9vh));
}
.zone .wrap{position:relative;z-index:2;width:100%;min-width:0;max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ---------- hero ---------- */
.z-hero .stage{align-items:flex-end;padding-top:84px}
.z-hero .media video{
  transform:scale(calc(1.04 + var(--p,0) * var(--p,0) * 1.55));
  transform-origin:50% 54%;
}
.z-hero .media::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:#07080A;
  opacity:clamp(0, calc((var(--p,0) - .55) * 1.7), .85);
}
.z-hero .wrap{padding-bottom:6.5vh}
.hero-copy{
  max-width:920px;
  transform:translateY(calc(var(--p,0) * -14vh));
  opacity:clamp(0,calc(1 - (var(--p,0) - .42) * 3.2),1);
}
.hero-copy .plate{margin-bottom:18px}
.hero-copy h1{margin:16px 0 18px}
.hero-copy h1 .line{display:block;overflow:hidden}
.hero-copy h1 .line span{display:block;transform:translateY(112%)}
.js .hero-copy h1 .line span{animation:rise 1s cubic-bezier(.16,1,.3,1) forwards}
.js .hero-copy h1 .line:nth-child(2) span{animation-delay:.12s}
@keyframes rise{to{transform:none}}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 0}
.hero-stats{
  display:flex;gap:clamp(24px,4vw,64px);margin-top:4vh;padding-top:22px;
  border-top:1px solid var(--hair-soft);
}
.stat .v{
  font-weight:800;font-stretch:112%;font-size:clamp(1.7rem,3vw,2.6rem);
  letter-spacing:-.02em;line-height:1;color:var(--bone);
}
.stat .v b{color:var(--mint);font-weight:800}
.stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-40);margin-top:9px}
.cue{
  position:absolute;right:clamp(20px,4vw,48px);bottom:5vh;z-index:3;
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-66);
  opacity:clamp(0,calc(1 - var(--p,0) * 4),1);
}
.cue::after{
  content:"";width:1px;height:52px;background:linear-gradient(var(--mint),transparent);
  animation:drip 1.8s ease-in-out infinite;
}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- generic zone content beats ---------- */
.z-head{max-width:780px}
.z-head .plate{margin-bottom:24px}
.z-head .tourline{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-40);margin:0 0 14px;
}
.z-head h2{margin:6px 0 18px}
.beat{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.zone.b1 .beat-1,.zone.b2 .beat-2,.zone.b3 .beat-3,.zone.b4 .beat-4{opacity:1;transform:none}

/* ---------- z1 problem ---------- */
.z1 .media::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:#07080A;
  opacity:clamp(0, calc(1 - var(--p,0) * 4), 1);
}
.z1 .wrap{
  opacity:calc(1 - clamp(0, (var(--p,0) - .84) * 6.5, 1) * .92);
  transform:translateY(calc(clamp(0, (var(--p,0) - .84) * 6.5, 1) * -7vh));
}
.kills{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:5vh;max-width:1080px}
.kill{
  border:1px solid var(--hair-soft);border-radius:5px;padding:26px 24px 24px;
  background:rgba(10,11,13,.55);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(34px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),border-color .3s;
}
.kill:hover{border-color:rgba(92,191,149,.4)}
.zone.c1 .kill:nth-child(1),.zone.c2 .kill:nth-child(2),.zone.c3 .kill:nth-child(3){opacity:1;transform:none}
.kill .kn{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--mint);display:block;margin-bottom:16px}
.kill h3{margin-bottom:10px}
.kill p{font-size:14.5px;color:var(--bone-66);line-height:1.62}
/* Wide screens: the head is a plain block of text and every body is open. The
   button only becomes a control under html.acc, which the engine sets on narrow
   screens, so with no JS these stay exactly as they render here. */
.khead{display:block;width:100%;text-align:left;cursor:default;font:inherit;color:inherit}
.khead .pm{display:none}
.kbody{display:block}

/* market context: exactly two stats, each carrying its own confidence label.
   The .kbody wrapper is display:contents on wide, so the two cards stay direct grid
   items and the desktop layout is unchanged; only html.acc turns it into a panel. */
.mktrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:3.2vh;max-width:860px}
.mktrow > .kbody{display:contents}
.mkt-h{display:none}
.mkt{
  border:1px solid var(--hair-soft);border-left:3px solid var(--grove);border-radius:5px;
  padding:14px 16px;background:rgba(10,11,13,.55);backdrop-filter:blur(10px);
  display:flex;gap:14px;align-items:baseline;
}
.mkt b{
  font-weight:800;font-stretch:112%;font-size:clamp(1.35rem,2.1vw,1.85rem);
  letter-spacing:-.02em;line-height:1;color:var(--mint);flex:0 0 auto;
}
.mkt span{font-size:12.5px;line-height:1.55;color:var(--bone-66)}

/* ---------- z2 standard ---------- */
.z2grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.meter{max-width:640px}
.meter .big{
  font-weight:900;font-stretch:118%;line-height:.9;
  font-size:clamp(4.6rem,10vw,9rem);letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:8px;
}
.meter .big small{font-size:.32em;font-weight:700;color:var(--mint);letter-spacing:0}
.meter .bar{
  height:14px;border:1px solid var(--hair);border-radius:99px;margin:26px 0 14px;
  position:relative;overflow:hidden;background:rgba(244,242,237,.04);
}
.meter .bar i{
  position:absolute;inset:2px auto 2px 2px;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--grove-deep),var(--grove) 70%,var(--mint));
}
.meter .legend{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.meter .legend .a{color:var(--mint)}
.meter .legend .b{color:var(--bone-40);text-align:right}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:99px;padding:9px 16px;color:var(--bone-66);
  opacity:0;transform:translateY(14px);
  transition:all .5s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*90ms);
}
.zone.chips-on .chip{opacity:1;transform:none;border-color:rgba(92,191,149,.45);color:var(--bone)}
.split{display:grid;gap:12px}
.split .row{
  border:1px solid var(--hair-soft);border-left:3px solid var(--grove);border-radius:4px;
  padding:16px 18px;background:rgba(10,11,13,.55);backdrop-filter:blur(8px);
  font-size:14px;color:var(--bone-66);
}
.split .row b{display:block;color:var(--bone);font-size:15px;margin-bottom:3px;font-weight:700}
.split .row.human{border-left-color:var(--bone-40)}

/* ---------- flow sections (unpinned) ---------- */
.flow{position:relative;padding:clamp(80px,12vh,140px) 0;background:var(--onyx)}
.flow .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.flow .gridlines{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(90deg,var(--hair-soft) 0 1px,transparent 1px calc(100%/6));
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
}
.sec-head{max-width:760px;margin-bottom:clamp(36px,6vh,64px)}
.zone .sec-head{margin-bottom:clamp(20px,3.6vh,38px)}
.sec-head .kicker{display:block;margin-bottom:16px}
.sec-head h2{margin-bottom:16px}

/* where we sit: layer stack + color logo marquee */
.f-layer{background:var(--carbon);border-block:1px solid var(--hair-soft)}
.layergrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,90px);align-items:center}
.laysteps{margin-top:clamp(28px,4vh,44px);display:grid;list-style:none}
.laysteps li{display:flex;gap:22px;padding:22px 0;border-top:1px solid var(--hair)}
.laysteps li:last-child{border-bottom:1px solid var(--hair)}
.laysteps b{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--mint);padding-top:5px}
.laysteps strong{display:block;font-weight:700;font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.01em;color:var(--bone)}
.laysteps span{display:block;font-size:14px;color:var(--bone-66);margin-top:4px;line-height:1.6}
.stack{display:grid;gap:0;padding:clamp(22px,2.6vw,34px);border:1px solid var(--hair);border-radius:10px;background:#0C0F12}
.slab{
  border:1px solid rgba(244,242,237,.16);border-radius:7px;padding:20px 22px;
  background:linear-gradient(175deg,#181D21,#12161A);
}
.slab .sl{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-66);display:block;margin-bottom:8px;
}
.slab p{font-size:14.5px;line-height:1.55;color:var(--bone)}
.slab.mid{
  border-color:var(--mint);background:linear-gradient(165deg,rgba(1,121,80,.42),rgba(1,121,80,.14));
  box-shadow:0 0 44px rgba(92,191,149,.14);
}
.slab.mid .sl{color:var(--mint)}
.scon{width:1.5px;height:26px;background:linear-gradient(var(--mint),rgba(92,191,149,.25));margin:0 auto;position:relative}
.scon::after{content:"";position:absolute;left:50%;bottom:-1px;width:7px;height:7px;border-right:1.5px solid var(--mint);border-bottom:1.5px solid var(--mint);transform:translateX(-50%) rotate(45deg)}
.mq2{margin-top:clamp(48px,7vh,80px);border-block:1px solid var(--hair);overflow:hidden}
.mqrow{overflow:hidden;padding:20px 0}
.mqrow + .mqrow{border-top:1px solid var(--hair-soft)}
.mqrow .in{display:flex;width:max-content;animation:mq 55s linear infinite}
.mqrow.rev .in{animation-direction:reverse}
.mqrow:hover .in{animation-play-state:paused}
.lg{
  display:flex;align-items:center;gap:13px;padding:0 30px;white-space:nowrap;
  font-family:var(--mono);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone);
}
.lgi{display:flex;flex:0 0 auto}
.lgi svg{width:30px;height:30px;fill:var(--c,#F4F2ED)}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-note{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--bone-66);text-transform:uppercase;margin:18px auto 0;text-align:center;max-width:900px;padding:0 20px;line-height:2}

/* ---------- z3 method (light lab) ---------- */
.z-light .media{background:var(--bone)}
.z-light .media video{opacity:.999}
.z-light .stage{background:var(--bone);color:var(--ink)}
.z-light .labgrid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4.5vw,70px);align-items:center;width:100%;
}
.z-light .plate{background:#FBFAF7;border-color:var(--ink-hair);color:var(--ink-66);backdrop-filter:none}
.z-light .plate em{color:var(--ink)}
.z-light .tourline{color:rgba(11,12,14,.62)}
.z-light .lede{color:var(--ink-66)}
.labmedia{
  position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/10;
  box-shadow:0 30px 80px -20px rgba(11,12,14,.35);
}
.labmedia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.1 - var(--p,0)*.1))}
.labmedia .tag{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  background:rgba(11,12,14,.72);color:var(--bone);padding:7px 11px;border-radius:2px;backdrop-filter:blur(6px);
}
.phases{margin-top:34px;position:relative}
.phases .pline{position:absolute;left:6px;top:10px;bottom:10px;width:1.5px;background:var(--ink-hair)}
.phases .pfill{position:absolute;left:6px;top:10px;width:1.5px;background:var(--grove);height:calc(100% - 20px);transform:scaleY(0);transform-origin:top}
.ph{display:flex;gap:18px;padding:11px 0;align-items:baseline;opacity:.38;transition:opacity .35s}
.ph .pd{
  width:13px;height:13px;border-radius:50%;border:1.5px solid var(--ink-hair);
  background:var(--bone);flex:0 0 auto;transform:translateY(1px);transition:all .35s;
}
.ph .pn{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:rgba(11,12,14,.62);width:74px;flex:0 0 auto}
.ph .pt{font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.ph.act{opacity:1}
.ph.act .pd{border-color:var(--grove);background:var(--grove);box-shadow:0 0 0 5px rgba(1,121,80,.14)}
.ph.done{opacity:.75}
.ph.done .pd{border-color:var(--grove);background:var(--grove)}
.ph-detail{
  border:1px solid var(--ink-hair);border-radius:8px;background:rgba(255,255,255,.55);
  padding:26px 26px 22px;min-height:328px;position:relative;backdrop-filter:blur(4px);
}
.ph-pane{position:absolute;inset:26px 26px 22px;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s;pointer-events:none}
.ph-pane.act{opacity:1;transform:none;pointer-events:auto;position:relative;inset:auto}
.ph-pane .pnum{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--grove);display:block;margin-bottom:10px}
.ph-pane h3{margin-bottom:10px;color:var(--ink)}
.ph-pane p{font-size:14.5px;color:var(--ink-66);line-height:1.6}
.ph-pane .outs{margin:16px 0 0;display:grid;gap:8px}
.ph-pane .outs li{display:flex;gap:10px;font-size:13.5px;color:var(--ink)}
.ph-pane .outs li::before{content:"";width:12px;height:7px;border-left:1.5px solid var(--grove);border-bottom:1.5px solid var(--grove);transform:rotate(-45deg) translateY(2px);margin-top:5px;flex:0 0 auto}
.ph-pane .pmeta{display:flex;gap:22px;margin-top:18px;padding-top:14px;border-top:1px solid var(--ink-hair)}
.ph-pane .pmeta div b{display:block;font-weight:700;font-size:14.5px}
.ph-pane .pmeta div span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(11,12,14,.62)}
.derisk{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  background:var(--onyx);color:var(--bone);
  transform:translateY(101%);transition:transform .7s cubic-bezier(.16,1,.3,1);
  padding:26px clamp(20px,4vw,48px);
}
.zone.b4 .derisk{transform:none}
/* The band is absolutely positioned at the bottom of the pinned stage, so when it
   rose at p > 0.9 it covered whatever was there: the last phase row by up to 27px
   and the active detail pane by up to 56px. Reserve its height in the stage. An
   absolutely positioned box resolves bottom:0 against the padding box, so the band
   stays where it is and only the flex content above it moves up, which means
   nothing shifts when it arrives. */
.z-light .stage{padding-bottom:200px}
@media (max-width:1100px){ .z-light .stage{padding-bottom:184px} }
.derisk .in{max-width:var(--wrap);margin:0 auto;display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.derisk .kicker{flex:0 0 auto}
.derisk p{font-weight:700;font-size:clamp(1.05rem,1.7vw,1.4rem);letter-spacing:-.01em;max-width:none}
.derisk small{display:block;color:var(--bone-66);font-weight:400;font-size:13.5px;margin-top:4px}

/* ---------- z4 offer ladder ---------- */
.z4 .stage{align-items:stretch}
.z4 .wrap{display:flex;flex-direction:column;justify-content:center;max-width:none;padding:0}
.z4 .z-head{padding:0 clamp(20px,4vw,48px);margin:0 auto 4vh;max-width:var(--wrap);width:100%}
.ladder-vp{overflow:hidden;width:100%}
.ladder{
  display:flex;gap:18px;
  padding-left:calc(max((100vw - var(--wrap)) / 2, 0px) + clamp(20px,4vw,48px));
  padding-right:calc(max((100vw - var(--wrap)) / 2, 0px) + clamp(20px,4vw,48px));
  width:max-content;will-change:transform;
}
/* These cards ride inside the ladder, which the engine transforms every frame, so a
   backdrop-filter here made the browser re-sample the film behind all four of them
   on every one of those frames. A denser flat fill reads the same over a scrimmed
   film and costs nothing. */
.rung{
  width:min(500px,82vw);flex:0 0 auto;
  border:1px solid var(--hair-soft);border-radius:8px;
  background:rgba(12,14,16,.88);
  padding:26px 26px 22px;display:flex;flex-direction:column;gap:14px;
  transition:border-color .3s,transform .3s;
}
.rung:hover{border-color:rgba(92,191,149,.45);transform:translateY(-4px)}
.rung .rrow{display:flex;justify-content:space-between;align-items:center}
.rung .rn{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--mint)}
.rung .rkind{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--hair);padding:5px 10px;border-radius:99px;color:var(--bone-66);
}
.rung h3{font-size:1.35rem}
.rung .rflag{
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--onyx);background:var(--mint);border-radius:99px;padding:4px 10px 3px;
  margin-left:auto;margin-right:10px;
}
/* the published price. Deliberately ~2.5x the fact type below it. */
.rung .rprice{display:flex;flex-direction:column;gap:3px;margin-top:-2px}
.rung .rprice b{
  font-weight:800;font-stretch:112%;letter-spacing:-.02em;line-height:1;
  font-size:clamp(1.7rem,2.4vw,2.05rem);color:var(--bone);white-space:nowrap;
}
.rung .rprice span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-40);line-height:1.5;
}
.rung.flagship{
  border-color:rgba(92,191,149,.42);
  background:linear-gradient(168deg,rgba(1,121,80,.30),rgba(12,14,16,.92) 58%);
  box-shadow:0 0 44px rgba(92,191,149,.10);
}
.rung.flagship .rprice b{color:var(--mint)}
.rung .rd{font-size:14px;color:var(--bone-66);line-height:1.6}
.rung .rwhen{font-size:13px;color:var(--mint);border-left:2px solid var(--grove);padding-left:12px;line-height:1.55}
.rung .rfacts{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:auto;padding-top:16px;border-top:1px solid var(--hair-soft)}
.rung .rfacts div span{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-40);display:block;margin-bottom:2px}
.rung .rfacts div b{font-size:13px;font-weight:600;color:var(--bone)}
.rung .rbar{height:4px;border-radius:99px;background:rgba(244,242,237,.09);overflow:hidden;margin-top:14px}
.rung .rbar i{display:block;height:100%;background:var(--grove);border-radius:99px}
.lad-progress{
  margin:4.5vh auto 0;max-width:var(--wrap);width:100%;padding:0 clamp(20px,4vw,48px);
  display:flex;align-items:center;gap:18px;
}
.lad-progress .pbar{flex:1;height:2px;background:var(--hair-soft);position:relative;border-radius:99px}
.lad-progress .pbar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--mint);border-radius:99px}
.lad-progress span{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-40)}

/* ---------- pricing basis (flow band under the Control Room) ---------- */
.pnote{
  font-size:15px;line-height:1.7;color:var(--bone-66);max-width:80ch;
  border-left:2px solid var(--grove);padding-left:18px;
}
.prgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(22px,3.2vw,44px);align-items:start}
.prcard{
  border:1px solid var(--hair-soft);border-radius:8px;padding:26px 26px 22px;
  background:rgba(12,14,16,.62);
}
.prcard p{font-size:14.5px;line-height:1.7;color:var(--bone-66);max-width:66ch}
.prcard p + p{margin-top:14px}
.prcard .cap{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mint);display:block;margin-bottom:14px;
}
.prcard dl{display:grid}
.prcard dl div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--hair-soft)}
.prcard dl div:last-child{border-bottom:1px solid var(--hair-soft)}
.prcard dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-40)}
.prcard dd{font-size:14px;font-weight:600;color:var(--bone);text-align:right}
.prcard .pralt{margin-top:16px;font-size:13.5px;line-height:1.65}
.prcard .pralt b{display:block;color:var(--bone);font-weight:700}
.terms{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.term{border:1px solid var(--hair-soft);border-radius:6px;padding:22px 20px;background:rgba(12,14,16,.62)}
.term .tn{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--mint);display:block;margin-bottom:12px}
.term h3{font-size:1.05rem;margin-bottom:8px}
.term p{font-size:13.5px;color:var(--bone-66);line-height:1.6}

/* builds: index + visual panel */
.bindex{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:start}
/* Each .binfo carries its own title so that with no JS the eight descriptions read
   as a self-contained list. Wherever the row list actually selects, the row IS the
   title, so the echo is redundant and hidden. */
.js .bi-t{display:none}
.bi-t{display:block;font-weight:700;font-stretch:106%;font-size:1.12rem;letter-spacing:-.015em;color:var(--bone);margin-bottom:8px}
.bi-t span{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--mint);margin-right:8px}
.blist{display:grid}
.brow{
  display:flex;align-items:center;gap:18px;text-align:left;width:100%;
  padding:18px 6px;border-bottom:1px solid var(--hair-soft);
  transition:padding .3s,background .3s;position:relative;
}
.brow:first-child{border-top:1px solid var(--hair-soft)}
.brow .bn{font-family:var(--mono);font-size:11px;color:var(--bone-40);transition:color .3s}
.brow .bt{font-weight:700;font-stretch:106%;font-size:clamp(1.05rem,1.7vw,1.45rem);letter-spacing:-.015em;color:var(--bone-66);transition:color .3s}
.brow .ba{margin-left:auto;font-family:var(--mono);color:var(--mint);opacity:0;transform:translateX(-8px);transition:all .3s}
.brow:hover .bt{color:var(--bone)}
.brow.act{padding-left:16px}
.brow.act::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:2.5px;background:var(--mint);border-radius:2px}
.brow.act .bn{color:var(--mint)}
.brow.act .bt{color:var(--bone)}
.brow.act .ba{opacity:1;transform:none}
.bpanel{position:sticky;top:96px}
.bimgs{position:relative;aspect-ratio:3/2;max-height:44vh;width:100%;border-radius:10px;overflow:hidden;background:var(--carbon)}
.bimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.bimg.act{opacity:1;transform:none}
.binfo{display:none;padding:18px 4px 0}
.binfo.act{display:block;animation:fadein .5s cubic-bezier(.16,1,.3,1)}
.binfo p{font-size:14.5px;color:var(--bone-66);line-height:1.65;max-width:56ch}
.binfo .bex{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--mint);display:block;margin-top:10px;text-transform:uppercase}

/* use cases */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.tab{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:99px;padding:10px 18px;color:var(--bone-66);
  transition:all .25s;
}
.tab:hover{border-color:var(--bone-40);color:var(--bone)}
.tab.act{background:var(--grove);border-color:var(--grove);color:#fff}
.uc-pane{display:none}
.uc-pane.act{display:grid;animation:fadein .5s cubic-bezier(.16,1,.3,1)}
@keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.uc-pane{
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,3.5vw,52px);align-items:center;
  border:1px solid var(--hair-soft);border-radius:10px;padding:clamp(20px,2.6vw,34px);background:var(--carbon);
}
.ucmedia{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/3;max-height:44vh}
.ucmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ucmedia .tag{
  position:absolute;left:12px;bottom:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(11,12,14,.78);color:var(--bone);padding:7px 11px;border-radius:2px;backdrop-filter:blur(6px);
}
.ucbody h3{font-size:clamp(1.3rem,2vw,1.7rem);margin-bottom:10px}
.ucbody .ud{color:var(--bone-66);font-size:14.5px;line-height:1.65;max-width:58ch}
.uc-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.uc-stats div{border:1px solid var(--hair);border-radius:6px;padding:12px 16px;background:rgba(244,242,237,.03);min-width:128px}
.uc-stats b{font-weight:800;font-stretch:110%;font-size:1.3rem;letter-spacing:-.02em;color:var(--mint);display:block;line-height:1.15;white-space:nowrap}
.uc-stats span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-40)}
.seatrun{display:flex;gap:0;align-items:center;margin-top:22px;padding:0 6px;flex-wrap:wrap}
.seatrun .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-66);padding:7px 12px;border:1px solid var(--hair-soft);border-radius:3px;margin:4px 0}
.seatrun .st.hl{border-color:rgba(92,191,149,.5);color:var(--mint)}
.seatrun .sa{font-family:var(--mono);color:var(--bone-40);padding:0 10px}
.seatrun .cap{width:100%;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-40);margin-bottom:10px}

/* ---------- z5 proof ---------- */
.z5 .media::after,.z6 .media::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:#07080A;
  opacity:clamp(0, calc(1 - var(--p,0) * 4), 1);
}
.proofstats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:5vh;max-width:1100px}
.pstat{border:1px solid var(--hair-soft);border-left:3px solid var(--grove);border-radius:5px;padding:20px 20px 16px;background:rgba(10,11,13,.6);backdrop-filter:blur(10px)}
.pstat .v{font-weight:800;font-stretch:112%;font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.02em;line-height:1;white-space:nowrap}
.pstat .v em{font-style:normal;color:var(--mint)}
.pstat .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-40);margin-top:10px;line-height:1.7}

/* case files: sticky stack */
.cases{display:grid;gap:22px}
.case{
  position:sticky;top:calc(84px + var(--i,0) * 16px);
  border:1px solid var(--hair-soft);border-radius:10px;
  background:linear-gradient(175deg,#14181c,#0e1114 60%);
  padding:clamp(24px,3.6vw,44px);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.5vw,54px);
  box-shadow:0 -18px 50px rgba(0,0,0,.45);
}
.case .cn{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--mint);writing-mode:vertical-rl;text-orientation:mixed;border-left:1px solid var(--hair-soft);padding-left:16px}
.case h3{font-size:clamp(1.25rem,2.1vw,1.75rem);margin-bottom:12px;max-width:26ch}
.case p{color:var(--bone-66);font-size:15px;line-height:1.65;max-width:70ch}
.case .cfoot{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap}
.case .cfoot span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--hair-soft);padding:7px 12px;border-radius:99px;color:var(--bone-66)}
.case .cfoot span.g{border-color:rgba(92,191,149,.5);color:var(--mint)}
.case.fail{border-color:rgba(244,242,237,.2);background:linear-gradient(175deg,#191512,#0e1114 60%)}
.case.fail .cn{color:var(--bone-40)}

/* light band: in-house + built for */
.flow-light{background:var(--bone);color:var(--ink)}
.flow-light .kicker{color:var(--grove)}
.flow-light .lede{color:var(--ink-66)}
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,72px)}
.ledger li{
  display:grid;grid-template-columns:34px 172px 1fr;gap:14px;align-items:baseline;
  padding:18px 0;border-top:1px solid var(--ink-hair);
}
.ledger li:nth-last-child(-n+1){border-bottom:1px solid var(--ink-hair)}
.ledger li:nth-child(odd):nth-last-child(2){border-bottom:1px solid var(--ink-hair)}
.ledger .ln{font-family:var(--mono);font-size:10.5px;color:var(--grove)}
.ledger strong{font-weight:800;font-stretch:108%;font-size:1.05rem;letter-spacing:-.01em}
.ledger .ld{font-size:13.5px;color:var(--ink-66);line-height:1.55}
/* one ICP, stated on the page */
.icpgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.icpcard{
  border:1px solid var(--ink-hair);border-radius:10px;padding:26px 24px 22px;background:#FFFFFF;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;
}
.icpcard:hover{transform:translateY(-5px);box-shadow:0 24px 50px -24px rgba(11,12,14,.3)}
.icpcard h3{font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.015em}
.icpdefs{display:grid}
.icpdefs div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid var(--ink-hair)}
.icpdefs div:last-child{border-bottom:1px solid var(--ink-hair)}
.icpdefs dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-66);padding-top:3px}
.icpdefs dd{font-size:14px;line-height:1.55;color:var(--ink)}
.icplead{font-size:14px;color:var(--ink-66);margin-top:-8px}
.icplist{display:grid;gap:9px}
.icplist li{display:flex;gap:10px;font-size:13.5px;color:var(--ink);line-height:1.5}
.icplist li::before{content:"";width:11px;height:6px;border-left:1.5px solid var(--grove);border-bottom:1.5px solid var(--grove);transform:rotate(-45deg) translateY(2px);margin-top:6px;flex:0 0 auto}
.icpstat{margin-top:auto;padding-top:18px;border-top:1px solid var(--ink-hair);display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.icpstat b{font-weight:800;font-stretch:112%;font-size:1.9rem;letter-spacing:-.02em;color:var(--grove);display:block;line-height:1}
.icpstat span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-66);display:block;margin-top:6px;max-width:180px;line-height:1.7}
.icpstat .btn{padding:11px 16px;font-size:12.5px}
.excl{margin-top:clamp(28px,4vw,52px);border-left:2px solid var(--grove);padding-left:18px;max-width:86ch}
.excl .cap{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--grove);display:block;margin-bottom:8px}
.excl p{font-size:14.5px;line-height:1.7;color:var(--ink-66)}

/* podcast band */
.podgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,64px);align-items:center}
.podart{position:relative;border-radius:14px;overflow:hidden;display:block;aspect-ratio:3/2;background:var(--carbon);border:1px solid var(--hair-soft)}
.podart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.podart:hover img{transform:scale(1.045)}
.podart .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:92px;height:92px;border-radius:50%;background:rgba(9,10,12,.62);
  border:1px solid rgba(244,242,237,.4);backdrop-filter:blur(8px);
  transition:background .3s,transform .3s;
}
.podart .play::after{
  content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
  border-left:18px solid var(--bone);border-top:11px solid transparent;border-bottom:11px solid transparent;
}
.podart:hover .play{background:var(--grove);transform:translate(-50%,-50%) scale(1.08)}
.podart .tag{
  position:absolute;left:14px;bottom:13px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(9,10,12,.78);color:var(--bone);padding:7px 11px;border-radius:2px;backdrop-filter:blur(6px);
}
.pod-feat2{margin-top:26px;border-left:2.5px solid var(--grove);padding-left:18px}
.pod-feat2 b{font-weight:700;font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.01em;display:block;margin-bottom:8px}
.pod-feat2 p{font-size:14px;color:var(--bone-66);line-height:1.65;max-width:60ch}
.pod-list{display:grid;margin-top:22px}
.pod-list a{
  display:flex;gap:18px;align-items:baseline;padding:13px 4px;
  border-bottom:1px solid var(--hair-soft);transition:background .25s,padding .25s;
}
.pod-list a:hover{background:rgba(244,242,237,.03);padding-left:12px}
.pod-list .en{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--mint);flex:0 0 52px}
.pod-list b{font-weight:600;font-size:14.5px;display:block}
.pod-list span{font-size:12.5px;color:var(--bone-40)}
.pod-list .all{border-bottom:0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}

/* ---------- z6 contact ---------- */
.z6 .z-head{max-width:840px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4.5vh;max-width:1080px}
.step{
  border:1px solid var(--hair-soft);border-radius:6px;padding:22px;
  background:rgba(10,11,13,.6);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(28px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
.zone.s1 .step:nth-child(1),.zone.s2 .step:nth-child(2),.zone.s3 .step:nth-child(3){opacity:1;transform:none}
.step .sn{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--mint);display:block;margin-bottom:12px}
.step h3{font-size:1.05rem;margin-bottom:8px}
.step p{font-size:13.5px;color:var(--bone-66);line-height:1.6}
.z6 .ctarow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:4.5vh}
.z6 .audit{
  margin-top:22px;font-size:14px;color:var(--bone-66);
}
.z6 .audit a{color:var(--mint);border-bottom:1px solid rgba(92,191,149,.4);padding-bottom:2px;transition:border-color .25s}
.z6 .audit a:hover{border-color:var(--mint)}

/* FAQ */
.faq{max-width:860px;margin:0 auto}
.qa{border-bottom:1px solid var(--hair-soft)}
.qa button{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 4px;text-align:left;font-weight:700;font-size:clamp(1rem,1.4vw,1.2rem);letter-spacing:-.01em;
  transition:color .25s;
}
.qa button:hover{color:var(--mint)}
/* the disclosure affordance. Defined once: the FAQ uses it, and so do the mobile
   card stacks in the pinned stations. */
.pm{
  width:32px;height:32px;border:1px solid var(--hair);border-radius:50%;position:relative;flex:0 0 auto;
  transition:all .35s cubic-bezier(.16,1,.3,1);
}
.pm::before,.pm::after{content:"";position:absolute;background:var(--bone);left:50%;top:50%;transition:all .3s}
.pm::before{width:12px;height:1.5px;transform:translate(-50%,-50%)}
.pm::after{width:1.5px;height:12px;transform:translate(-50%,-50%)}
.qa.open .pm,.kill.open .pm,.step.open .pm{background:var(--grove);border-color:var(--grove);transform:rotate(45deg)}
/* visibility:hidden takes the closed answer out of the accessibility tree as well
   as out of view; it is delayed so the collapse still animates, and reversed the
   instant the panel opens. */
.qa .ans{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1),visibility 0s linear .5s}
.qa.open .ans{visibility:visible;transition:max-height .5s cubic-bezier(.16,1,.3,1),visibility 0s}
.no-js .qa .ans{visibility:visible}
.qa .ans p{padding:0 44px 24px 4px;color:var(--bone-66);font-size:15px;line-height:1.7;max-width:70ch}

/* footer */
footer{border-top:1px solid var(--hair-soft);padding:clamp(56px,8vh,90px) 0 36px;background:#08090B}
footer .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
/* width:auto or the 257px width attribute is used against the forced height and
   the mark flattens. Same rule as the header lockup. */
.fbrand img{height:26px;width:auto;margin-bottom:18px}
.fbrand p{font-size:14px;color:var(--bone-66);max-width:30ch}
.fbrand .floc{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--bone-40);margin-top:16px;text-transform:uppercase;line-height:2}
.fcol h4{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-40);margin-bottom:18px;font-weight:500}
.fcol ul{display:grid;gap:11px}
.fcol a,.fcol .soon{font-size:14px;color:var(--bone-66);transition:color .25s}
.fcol a:hover{color:var(--mint)}
.fcol .soon i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--bone-40);border:1px solid var(--hair-soft);border-radius:99px;padding:2px 8px;margin-left:8px;vertical-align:2px}
.fbot{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(40px,6vh,64px);padding-top:24px;border-top:1px solid var(--hair-soft);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-40);
}
.fbot a:hover{color:var(--mint)}
.fbot .fl{display:flex;gap:22px}

.desk-only{display:inline}
.mob-only{display:none}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:1160px){
  .rail{display:none}
}
@media (max-width:1020px){
  .top nav{display:none}
  .menu-btn{display:block}
  .layergrid{grid-template-columns:1fr;gap:34px}
  .prgrid{grid-template-columns:1fr}
  .terms{grid-template-columns:1fr 1fr}
  .icpgrid{grid-template-columns:1fr}
}
/* The second clause is the landscape phone. Every tier below this line is gated on
   the SMALL viewport dimension, not on width, because a phone turned sideways is
   844x390: wide enough to be served the desktop layout and the 1080p film, short
   enough that a pinned stage clips most of its own content. Kept in sync with the
   engine's mqAcc query, which decides the accordions and the film cut. */
@media (max-width:900px), (max-height:480px) and (pointer:coarse){
  :root{--railw:0px}
  .desk-only{display:none}
  .mob-only{display:inline}
  body{font-size:16px}
  .hud{display:none}
  .zone{height:calc(var(--pin,300vh) * .82)}
  /* must sit after the .zone rule above: equal specificity, later wins */
  .z4{height:200vh}
  .mktrow{grid-template-columns:1fr;gap:10px;margin-top:2.4vh}
  .terms{grid-template-columns:1fr 1fr}
  .kills,.steps{grid-template-columns:1fr;gap:12px;margin-top:3.5vh}
  .kill,.step{padding:20px 18px}
  .z2grid{grid-template-columns:1fr;gap:22px;align-items:start}
  /* the human-in-the-loop split used to be dropped here. Station 02 has room for
     it on a phone now, and it is the one place the page says out loud where
     judgment stays. */
  .split .row{padding:13px 15px;font-size:13.5px}
  .z-light .labgrid{grid-template-columns:1fr;gap:20px;align-content:center}
  .labmedia{aspect-ratio:16/9;max-height:30vh}
  .ph .pt{font-size:14.5px}
  .ph-detail{min-height:0}
  .ph-pane .outs{display:none}
  .proofstats{grid-template-columns:1fr 1fr;gap:10px}
  .uc-pane{grid-template-columns:1fr;gap:14px;padding:16px}
  .ucmedia{max-height:26vh}
  .bindex{grid-template-columns:1fr;gap:14px}
  .bimgs{max-height:26vh}
  .brow{padding:11px 4px}
  .brow .bt{font-size:1.02rem}
  .binfo{padding-top:10px}
  .binfo p{font-size:13px}
  .seatrun{display:none}
  .bpanel{position:relative;top:0;order:-1;margin-bottom:8px}
  .icpgrid{grid-template-columns:1fr}
  .ledger{grid-template-columns:1fr}
  .ledger li{grid-template-columns:30px 1fr;grid-template-rows:auto auto}
  .ledger .ld{grid-column:2}
  .podgrid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .case{grid-template-columns:1fr;gap:14px}
  .case .cn{writing-mode:horizontal-tb;border-left:0;padding-left:0;border-bottom:1px solid var(--hair-soft);padding-bottom:10px}
  .ladder-vp{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .ladder{transform:none !important}
  .rung{scroll-snap-align:center;width:84vw}
  .hero-stats{flex-wrap:wrap;gap:20px 32px}
  .cue{display:none}
  .derisk .in{gap:10px}
}
/* ------------------------------------------------------------
   760: the phone pass.
   A pinned stage is exactly one viewport tall and clips, so anything the copy
   column spends above that height is unreachable. This tier buys the room back
   from chrome and spacing, and the dense card stacks collapse into the same
   disclosure the FAQ uses (in the html.acc block near the bottom of the file).
   ------------------------------------------------------------ */
@media (max-width:760px), (max-height:480px) and (pointer:coarse){
  /* ---- header allowance ----
     The bar is fixed and calc(74px + sat) tall at rest, calc(62px + sat) once
     scrolled. A pinned stage centres its column in the WHOLE viewport and clips,
     so with no allowance the first lines of every h2, and the whole first line of
     the h1, sit underneath it. Two rules, not one: only the hero is ever read with
     the bar still at its resting height, because every other station's landing is
     thousands of pixels down the page and the bar has compacted by then.
     safe centring is the other half. While the column fits it stays centred; the
     moment it does not, the browser aligns it to the start edge of the padding
     instead of splitting the overflow across the top, so nothing is ever pushed up
     behind the bar. Padding is inside the height, so the pin math is untouched. */
  .stage{padding-top:calc(62px + var(--sat));align-items:safe center}
  .z-hero .stage{padding-top:calc(74px + var(--sat));align-items:safe flex-end}
  .z4 .wrap{justify-content:safe center}

  /* Two stations hand off by lifting their copy column as they end: -14vh on the
     hero, -7vh on the Front Office. On a desktop that clears the bar comfortably.
     On a phone the column already starts within 30px of the bar, so the lift walks
     the plate straight underneath it while it is still legible. The fade that runs
     alongside carries the handoff perfectly well on its own. */
  .hero-copy,.z1 .wrap{transform:none}

  /* the grain is a four-figure-cost mix-blend-mode layer for a texture nobody can
     resolve at this size, and it was costing a third of the frame budget */
  .grain{display:none}

  /* the tour line is a flourish, and the rail and HUD that carry the same station
     marker are already hidden at this width. The plate stays: on a phone it is the
     only thing left saying which station you are standing in. */
  .zone .z-head .tourline,.hero-copy .tourline{display:none}
  .zone .z-head .plate{margin-bottom:14px}
  .zone .z-head h2{margin:4px 0 12px}
  /* the hard break in the Front Office h2 is set for a desktop measure and wraps
     badly at 360-390. Let it wrap on its own here. */
  br.brk{display:none}

  /* hero: the copy column is 714px of content in a 724px phone once the bar takes
     its cut, so the two longest blocks give the room back rather than being clipped */
  .z-hero .wrap{padding-bottom:2vh}
  .hero-copy h1{margin:10px 0 12px;font-size:clamp(1.8rem,7.4vw,2.4rem)}
  .hero-copy .lede{font-size:14.5px;line-height:1.5}
  .hero-ctas{margin-top:14px;gap:10px}
  .hero-stats{margin-top:1.4vh;padding-top:16px;gap:14px 26px}
  .stat .v{font-size:1.5rem}
  .stat .l{margin-top:6px;font-size:9px}

  /* quality lab: the pane grows when a phase becomes active, so the fixed parts
     around it give up their slack. .outs is already dropped at 900 for the same
     reason and .pmeta is the same kind of supporting detail. */
  .labmedia{max-height:16vh}
  .phases{margin-top:12px}
  .ph{padding:5px 0}
  .ph-detail{padding:14px 14px 12px}
  .ph-pane{inset:14px 14px 12px}
  .ph-pane .pmeta{display:none}
  .z-light .labgrid{gap:10px}

  /* dispatch and front office: the stacks below the head */
  .kills,.steps{margin-top:1.4vh;gap:10px}
  .mktrow{margin-top:1.4vh}
  .z6 .ctarow{margin-top:1.6vh;gap:10px}
  .z6 .audit{margin-top:8px}

  /* tap targets: 44px minimum on everything that is not an inline link inside a
     running sentence */
  .icpstat .btn{padding:13px 16px}
  .pod-list a{padding:15px 4px}
  .fcol ul{gap:0}
  .fcol li a,.fcol li .soon{display:block;padding:14px 0}
  .fbot{gap:8px}
  .fbot .fl{gap:0;flex-direction:column}
  .fbot .fl a{padding:15px 0}
}

@media (max-width:560px){
  /* padding-top stays on the base rule so the cutout inset is not dropped here */
  .top{gap:10px;padding-left:calc(16px + var(--sal));padding-right:calc(16px + var(--sar))}
  .top .brand span{display:none}
  .top .btn{padding:12px 14px;font-size:12.5px}
  .plate em{display:none}
  .fgrid{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%;justify-content:center}
  .meter .big{font-size:4.2rem}
  .terms{grid-template-columns:1fr}
  .prcard{padding:20px 18px 18px}
  .prcard dl div{flex-direction:column;gap:3px}
  .prcard dd{text-align:left}
  .icpdefs div{grid-template-columns:1fr;gap:4px}
  .icpstat{flex-direction:column;align-items:flex-start}
  .rung .rprice b{font-size:1.45rem}
  .mkt{flex-direction:column;gap:6px}
}

/* ============================================================
   THE SPLIT
   Four pages joined the homepage, so three things are new: the rail became a map
   of the building rather than a progress bar for one page, the homepage grew a
   compact price band and a room index in place of the two stations that left, and
   every page needs a breadcrumb and a closer.
   ============================================================ */

/* --- .excl was written for the one light band it used to live in. It now closes
       dark sections too, where --ink-66 body text and a --grove cap are both far
       under 4.5:1 on --onyx. Light keeps its original treatment. --- */
.flow:not(.flow-light) .excl .cap,
.zone:not(.z-light) .excl .cap{color:var(--mint)}
.flow:not(.flow-light) .excl p,
.zone:not(.z-light) .excl p{color:var(--bone-66)}
.flow:not(.flow-light) .excl,
.zone:not(.z-light) .excl{border-left-color:var(--grove)}

/* --- rail: a room on another page is a link, never tour progress --- */
.rail a.off-page .dot{border-style:dashed;border-color:var(--hair);background:transparent}
.rail a.off-page .lbl{opacity:0;color:var(--bone-40)}
.rail a.off-page:hover .dot{border-style:solid;border-color:var(--mint);background:transparent}
.rail a.off-page:hover .lbl,
.rail a.off-page:focus-visible .lbl{opacity:1;color:var(--bone);transform:none}

/* --- a link out of a band and into the page that carries the detail --- */
.more{
  display:inline-flex;align-items:center;gap:10px;margin-top:clamp(26px,3.6vh,40px);
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);border-bottom:1px solid var(--hair);padding-bottom:6px;transition:color .25s,border-color .25s;
}
.more .arr{color:var(--mint);transition:transform .25s}
.more:hover{color:var(--mint);border-color:var(--mint)}
.more:hover .arr{transform:translateX(4px)}
.flow-light .more{color:var(--ink);border-color:var(--ink-hair)}
.flow-light .more:hover{color:var(--grove);border-color:var(--grove)}

/* --- breadcrumb, subpages only --- */
/* The bar is fixed at 74px tall (62px once scrolled) and nothing in <main> reserves
   room for it, which is fine for a pinned station that starts full-bleed and wrong
   for a line of text at the very top of the document. Clear the resting height. */
.crumbs{
  max-width:var(--wrap);margin:0 auto;
  padding:calc(74px + var(--sat) + 18px) clamp(20px,4vw,48px) 0;
  position:relative;z-index:1;
}
.crumbs ol{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-40);
}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--bone-40)}
.crumbs a{color:var(--bone-66)}
.crumbs a:hover{color:var(--mint)}
.crumbs [aria-current]{color:var(--bone)}

/* --- homepage price band. The Control Room station and its scrubbed ladder live on
       /pricing now; this keeps the four published numbers on the front page. --- */
.f-rates{background:var(--carbon);border-block:1px solid var(--hair-soft)}
.rates{list-style:none;display:grid;gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft);border-radius:8px;overflow:hidden}
.rate{
  display:grid;grid-template-columns:minmax(0,124px) minmax(0,1fr) minmax(0,auto);
  grid-template-areas:"n name price" "k basis price";
  gap:4px clamp(18px,2.6vw,36px);align-items:baseline;
  padding:clamp(20px,2.6vh,28px) clamp(20px,2.6vw,32px);background:var(--onyx);
}
.rate .rt-n{grid-area:n;font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--mint)}
.rate .rt-k{grid-area:k;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-40)}
.rate .rt-name{grid-area:name;font-size:1.16rem;font-weight:600;letter-spacing:-.01em}
.rate .rt-b{grid-area:basis;font-size:13px;line-height:1.55;color:var(--bone-66)}
.rate .rt-p{grid-area:price;justify-self:end;text-align:right;font-size:clamp(1.12rem,1.7vw,1.42rem);font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.rate.flagship{background:rgba(1,121,80,.09)}
.rate.flagship .rt-k{color:var(--mint)}
.rate.flagship .rt-p{color:var(--mint)}

/* --- homepage room index: the map to the three pages that carry the detail --- */
.rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.room{
  display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;
  padding:clamp(22px,2.6vw,30px);border:1px solid var(--hair-soft);border-radius:10px;
  background:rgba(12,14,16,.62);position:relative;transition:border-color .3s,background .3s,transform .3s;
}
.room:hover{border-color:rgba(92,191,149,.45);background:rgba(1,121,80,.07);transform:translateY(-2px)}
.room .rm-k{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mint)}
.room h3{font-size:1.24rem;letter-spacing:-.01em}
.room p{font-size:14px;line-height:1.65;color:var(--bone-66)}
.room .rm-f{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--bone);
  padding-top:14px;border-top:1px solid var(--hair-soft);
}
.room .rm-a{position:absolute;top:clamp(22px,2.6vw,30px);right:clamp(22px,2.6vw,30px);color:var(--mint);transition:transform .3s}
.room:hover .rm-a{transform:translateX(4px)}

/* --- subpage closer --- */
.f-closer{background:var(--carbon);border-top:1px solid var(--hair-soft)}
.f-closer .excl{margin-top:0;margin-bottom:clamp(38px,5vh,62px)}
.closer{max-width:760px}
.closer .kicker{display:block;margin-bottom:16px}
.closer h2{margin-bottom:16px}
.closer .lede{margin-bottom:clamp(26px,3.4vh,38px)}
.ctarow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* --- the band between the phone gate and a comfortable desktop --- */
@media (max-width:1020px){
  .rooms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crumbs{padding:0 clamp(20px,4vw,48px)}
}
@media (max-width:860px){
  .rooms{grid-template-columns:1fr}
  .rate{
    grid-template-columns:1fr auto;
    grid-template-areas:"n price" "k price" "name name" "basis basis";
    row-gap:5px;
  }
  .rate .rt-p{align-self:start}
  .rate .rt-name{margin-top:6px}
}

/* ============================================================
   no-js and reduced motion
   ============================================================ */
.no-js .zone{height:auto}
.no-js .stage{position:relative;height:auto;min-height:70vh;padding:90px 0 60px;display:block}
/* as a flex item .wrap sized to its content (745px of a 1440px viewport) and
   margin:0 auto could not centre it. display:block above restores normal flow. */
.no-js .stage > .wrap{width:100%;max-width:var(--wrap);margin:0 auto}
/* The lab grid centres its two columns, which is right when the right column is one
   video panel and wrong when six detail panes have stacked into it: the copy column
   floated to the middle of a 2,444px row and its headline sat 990px below its own
   film. Top-align both columns instead. */
.no-js .labgrid{align-items:start}
.no-js .ph-detail{min-height:0}
.no-js .beat,.no-js .kill,.no-js .step,.no-js .chip{opacity:1;transform:none}
.no-js .hero-copy h1 .line span{transform:none}
.no-js .rail,.no-js .hud,.no-js .cue,.no-js .spot{display:none}
.no-js .derisk{position:relative;transform:none}
.no-js .ph{opacity:1}
.no-js .ph-pane{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;margin-bottom:18px}
.no-js .uc-pane{display:grid}
.no-js .bimg:first-of-type{opacity:1;transform:none}
.no-js .binfo{display:block;padding:22px 0;border-bottom:1px solid var(--hair-soft)}
/* The rows and the panels live in two different containers, so the grid cannot
   interleave them: with no JS the eight panels drifted up to 645px away from the
   rows they belong to. Drop the dead button list and let the self-titled panels be
   the list. */
.no-js .bindex{display:block}
.no-js .blist{display:none}
.no-js .bimgs{display:none}
/* the pills and the climb instruction do nothing without the engine */
.no-js .tabs{display:none}
.no-js .desk-only{display:none}
.no-js .tab:first-of-type,.no-js .brow:first-of-type{color:var(--bone)}
.no-js .qa .ans{max-height:none;overflow:visible}
/* With no JS no film ever gets a src, so the element costs nothing and paints its
   poster instead. The parallax transform is keyed to scroll, so it is neutralised. */
.no-js .media video{transform:none}
/* --p is only ever written by the engine, so with no JS it holds its registered
   initial value of 0 and every cover computed to opacity 1: the boardroom and the
   front office rendered as solid black blocks where the poster should be. */
.no-js .media::after,.no-js .labmedia::after{opacity:0 !important}
/* The cover exists so a station rises out of black as the reader scrolls into it.
   The page's OPENING station has no "into": the reader is already there at p = 0,
   where the cover computes to 1 and the room is a solid black panel. Lift it. The
   hero is never .lead, so its own darken-on-exit cover is untouched. */
.zone.lead .media::after,.zone.lead .labmedia::after{opacity:0}
.no-js .labmedia video{transform:none}
.no-js .z1 .wrap,.no-js .z-hero .wrap{opacity:1}
.no-js .binfo,.no-js .uc-pane{max-height:none;overflow:visible}
/* the ladder is scrubbed by the engine. With no JS it wraps into a 2x2 grid. */
.no-js .ladder-vp{overflow:visible}
.no-js .ladder{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  width:auto;max-width:var(--wrap);margin:0 auto;transform:none;
  padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px);
}
.no-js .rung{width:auto}
.no-js .lad-progress{display:none}
.no-js .z4 .wrap{justify-content:flex-start}
@media (max-width:760px){ .no-js .ladder{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .grain,.cue::after{animation:none}
  .mq2 .in{animation:none;width:auto;flex-wrap:wrap}
  .js .rv{transition:none;opacity:1;transform:none}
  .beat,.kill,.step,.chip,.derisk,.ph-pane,.media video,.hero-copy,.ghost{transition:none !important}
  /* the scroll engine gates these on scroll progress. With reduced motion the
     copy is rendered up front instead of waiting for a reveal it will not animate. */
  .beat,.kill,.step,.chip{opacity:1;transform:none}
  .derisk{transform:none}
  .js .hero-copy h1 .line span{animation:none;transform:none}
}

@media (max-height:600px){.hero-copy .plate{display:none}.hero-stats{margin-top:2.5vh}}

/* ============================================================
   de-pinned sections
   #build and #usecases used to be pinned zones scrubbed by scroll. They are
   ordinary flow sections now, so they need the divider the full-height stage
   used to give them for free.
   ============================================================ */
.fuc{border-top:1px solid var(--hair-soft)}
.fb .bindex,.fuc .uc-pane{scroll-margin-top:96px}

/* ============================================================
   below-the-fold flow sections: skip layout and paint until near
   Only non-pinned sections are listed. The scroll engine measures zone offsets
   and re-measures whenever body.scrollHeight moves, and the intrinsic sizes
   below are set from the measured rendered heights, so the offsets hold.
   ============================================================ */
/* The fallback lengths are the measured content-box heights at 1440x900, so an
   unrendered section occupies exactly the room it will occupy once painted and the
   zone offsets below it do not move. auto remembers the real size after first paint,
   which is what covers the taller narrow-screen layouts. */
/* Deferred layout is only worth it for a section that is genuinely far below the
   first paint. After the split #house no longer exists as one section, and
   #pricing-basis, #cases and #podcast now sit in the first screen or two of their
   own pages, where skipping their layout buys nothing and a stale intrinsic height
   makes the first paint jump. #faq is the only one still deep enough to qualify,
   and it is deep on one page only. */
#faq{content-visibility:auto;contain-intrinsic-size:auto 919px}

/* ============================================================
   narrow-screen disclosure
   At <=760px the eight builds and the six use cases stop being a tab list and
   become accordions: one open at a time, first open by default, the same
   circular plus affordance the FAQ uses. html.acc is set by the engine, so with
   no JS none of this applies and every panel stays open and readable.
   ============================================================ */
html.acc .tab::after,html.acc .brow::after{
  content:"";flex:0 0 auto;width:28px;height:28px;margin-left:auto;
  border:1px solid var(--hair);border-radius:50%;
  background:
    linear-gradient(var(--bone),var(--bone)) center/12px 1.5px no-repeat,
    linear-gradient(var(--bone),var(--bone)) center/1.5px 12px no-repeat;
  transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .3s,border-color .3s;
}
html.acc .tab[aria-expanded="true"]::after,html.acc .brow[aria-expanded="true"]::after{
  transform:rotate(45deg);background-color:var(--grove);border-color:var(--grove);
}

/* use cases */
html.acc #usecases .tabs{display:block;margin-bottom:0}
html.acc #usecases .tab{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border:0;border-top:1px solid var(--hair-soft);border-radius:0;
  padding:15px 2px;font-size:12px;letter-spacing:.1em;color:var(--bone-66);
}
html.acc #usecases .tab:last-of-type{border-bottom:1px solid var(--hair-soft)}
html.acc #usecases .tab.act{background:none;border-color:var(--hair-soft);color:var(--bone)}
html.acc #usecases .tab.act + .uc-pane{border-bottom:1px solid var(--hair-soft)}
html.acc .uc-pane{
  display:grid;max-height:0;overflow:hidden;
  border:0;border-radius:0;background:none;padding:0;
  transition:max-height .45s cubic-bezier(.16,1,.3,1);
}
html.acc .uc-pane.act{display:grid;animation:none;padding:0}
html.acc .uc-pane > *:last-child{padding-bottom:22px}
html.acc .ucmedia{margin-top:4px}

/* builds */
html.acc .brow{display:flex;align-items:center;gap:14px;padding:15px 2px}
html.acc .brow .ba{display:none}
html.acc .brow.act{padding-left:2px}
html.acc .brow.act::before{display:none}
html.acc .binfo{
  display:block;max-height:0;overflow:hidden;padding:0 2px;
  transition:max-height .45s cubic-bezier(.16,1,.3,1);
}
html.acc .binfo.act{display:block;animation:none}
html.acc .binfo .bex{margin-bottom:20px}
html.acc .binfo p{padding-top:2px}

/* the three fears and the three dispatch steps.
   A pinned stage clips at one viewport, and three stacked cards do not fit one on a
   phone. Collapsed they do, one open at a time, on the FAQ's affordance. The scroll
   reveal still staggers the heads in; only the bodies are disclosure-controlled. */
html.acc .kill,html.acc .step{padding:0;overflow:hidden}
html.acc .kill .kn,html.acc .step .sn{padding:10px 16px 0;margin-bottom:2px}
html.acc .kill h3,html.acc .step h3{margin-bottom:0}
html.acc .khead{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  cursor:pointer;padding:0 14px 12px 16px;min-height:44px;
}
html.acc .khead .pm{display:block;width:28px;height:28px}
html.acc .khead .pm::before{width:11px}
html.acc .khead .pm::after{height:11px}
html.acc .kbody{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.16,1,.3,1)}
html.acc .kill .kbody p,html.acc .step .kbody p{padding:0 16px 14px}

/* the two market-context stats fold behind one head on a phone */
html.acc .mktrow{display:block}
html.acc .mktrow > .kbody{display:block}
html.acc .mkt-h{
  display:block;border:1px solid var(--hair-soft);border-left:3px solid var(--grove);
  border-radius:5px;background:rgba(10,11,13,.55);backdrop-filter:blur(10px);
}
html.acc .mkt-h .khead{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  cursor:pointer;padding:8px 12px 8px 16px;min-height:44px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone);
}
html.acc .mktrow.open .mkt-h{border-bottom-left-radius:0;border-bottom-right-radius:0}
html.acc .mktrow .mkt{margin-top:8px}

/* reduced motion opens and closes them instantly rather than half-animating */
@media (prefers-reduced-motion:reduce){
  html.acc .uc-pane,html.acc .binfo,html.acc .kbody,html.acc .tab::after,html.acc .brow::after{transition:none}
}

/* ============================================================
   short-viewport compaction for the Control Room
   The priced rungs are taller than the cards they replaced. On short
   screens the pinned stage clips (overflow:hidden), and the first thing
   lost is the ladder progress row. These tiers keep it on screen.
   Must stay last in the file: same specificity as the base rules.
   ============================================================ */
@media (max-height:860px){
  .z4 .z-head{margin-bottom:2.4vh}
  .z4 .z-head .plate{margin-bottom:14px}
  .z4 .z-head .tourline{margin-bottom:8px}
  .z4 .z-head h2{margin:2px 0 10px;font-size:clamp(1.5rem,2.6vw,2.1rem)}
  .z4 .z-head .lede{font-size:14.5px;line-height:1.55}
  .rung{padding:20px 22px 18px;gap:11px}
  .rung h3{font-size:1.18rem}
  .rung .rprice b{font-size:1.75rem}
  .rung .rprice span{font-size:10px}
  .rung .rd{font-size:13px;line-height:1.55}
  .rung .rwhen{font-size:12.5px}
  .rung .rfacts{padding-top:12px}
  .rung .rfacts div b{font-size:11.5px}
  .rung .rbar{margin-top:10px}
  .lad-progress{margin-top:2.6vh}
}
@media (max-height:700px){
  .z4 .z-head .plate,.z4 .z-head .tourline{display:none}
  .z4 .z-head{margin-bottom:1.8vh}
  .z4 .z-head h2{font-size:1.5rem;margin:0 0 8px}
  .z4 .z-head .lede{font-size:13.5px;line-height:1.5}
  .rung{padding:16px 18px 14px;gap:8px}
  .rung h3{font-size:1.06rem}
  .rung .rprice b{font-size:1.6rem}
  .rung .rprice span{font-size:9.5px}
  .rung .rd{font-size:12.5px;line-height:1.5}
  .rung .rwhen{font-size:12px;padding-left:10px}
  .rung .rfacts{padding-top:10px;gap:6px 14px}
  .rung .rfacts div b{font-size:10.5px}
  .rung .rfacts div span{font-size:8px}
  .rung .rbar{margin-top:8px;height:3px}
  .lad-progress{margin-top:1.8vh}
}

/* ============================================================
   the landscape phone
   844x390 is 390px of stage holding 784px of Dispatch. No amount of compaction
   closes that, and a pinned stage clips rather than scrolls, so at these heights
   the tour stops pinning and becomes an ordinary scrolling page. Every station
   still gets its film, its plate and its beats; the scroll engine still drives
   them, because a zone of auto height is still a scroll range, just a shorter one.
   Gated on pointer:coarse so a short desktop window keeps the pinned tour.
   Must stay last: same specificity as the base rules and the tiers above.
   ============================================================ */
@media (max-height:480px) and (pointer:coarse){
  .top{height:calc(56px + var(--sat))}
  .top.scrolled{height:calc(50px + var(--sat))}
  .sheet{padding-top:calc(var(--sat) + 64px)}

  .zone,.z4{height:auto}
  .stage{
    position:relative;height:auto;min-height:var(--vh);
    padding:calc(58px + var(--sat)) 0 40px;align-items:center;
  }
  .z-hero .stage,.z4 .stage{align-items:center;padding-top:calc(64px + var(--sat))}
  .z4 .wrap{justify-content:flex-start}
  /* the reveal beats are driven by scroll progress the reader now covers in one
     flick, so nothing waits behind a threshold it will never reach */
  .beat,.kill,.step,.chip{opacity:1;transform:none}
  .z1 .wrap,.hero-copy{opacity:1;transform:none}
  .derisk{position:relative;transform:none;padding:18px clamp(20px,4vw,48px)}
  .ghost{display:none}
  .cue{display:none}
  /* the ladder is swiped, not scrubbed, at this size */
  .ladder-vp{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .ladder{transform:none !important}
  .rung{scroll-snap-align:center;width:min(420px,64vw)}
  .z-light .labgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
  .labmedia{max-height:26vh}
  .z6 .ctarow{margin-top:14px}
}

/* ============================================================
   print
   Unpin everything, put dark type on white, drop the chrome and the film, and
   let the copy that the scroll engine normally reveals stand open.
   ============================================================ */
@media print{
  :root{--vh:auto}
  html,body{background:#fff;color:#000;overflow:visible;font-size:11pt}
  .top,.rail,.hud,.sheet,.grain,.spot,.cue,.skip,.mq2,.ladder-vp::-webkit-scrollbar{display:none !important}
  video,.media,.bimgs,.ucmedia,.labmedia,.podart,.gridlines{display:none !important}
  main{display:block}
  .zone,.z4{height:auto !important;page-break-inside:auto}
  .stage{
    position:static !important;height:auto !important;min-height:0 !important;
    overflow:visible !important;display:block !important;padding:0 !important;
    background:#fff !important;color:#000 !important;
  }
  .flow,.flow-light,.f-layer{padding:14pt 0;background:#fff !important;color:#000 !important}
  .zone .wrap,.flow .wrap{max-width:none;padding:0}
  /* everything the engine reveals on scroll is simply open on paper */
  .beat,.kill,.step,.chip,.rv,.ph,.ph-pane,.binfo,.uc-pane,.qa .ans,.kbody,.hero-copy,.z1 .wrap{
    opacity:1 !important;transform:none !important;max-height:none !important;
    display:block !important;overflow:visible !important;position:static !important;inset:auto !important;
  }
  .ladder{display:block !important;transform:none !important;width:auto !important;padding:0 !important}
  .rung{width:auto !important;background:#fff !important;border-color:#999 !important;page-break-inside:avoid}
  .derisk{position:static !important;transform:none !important;background:#fff !important;color:#000 !important}
  .case{position:static !important;box-shadow:none !important;background:#fff !important;page-break-inside:avoid}
  .kill,.step,.mkt,.pstat,.term,.prcard,.slab,.icpcard,.uc-stats div{
    background:#fff !important;border-color:#999 !important;backdrop-filter:none !important;
  }
  *{color:#000 !important;text-shadow:none !important;box-shadow:none !important}
  .kicker,.plate i,.rung .rn,.ln,.tn,.sn,.kn{color:#017950 !important}
  a{color:#000 !important;text-decoration:underline}
  h1,h2,h3{page-break-after:avoid}
  @page{margin:14mm}
}

/* ============================================================
   MOBILE APP  ·  hub + hash-routed screens
   Everything below is gated. #app is hidden on desktop; the media query
   hides the desktop "Walk the Building" tour instead and shows #app.
   Two independent halves so the split works with scripts off too.
   Must stay last in the file.
   ============================================================ */
#app{display:none}

@media (max-width:760px), (max-height:480px) and (pointer:coarse){

  /* --- the gate: desktop tour off, app on --- */
  body > header.top,
  body > nav.sheet,
  body > aside.rail,
  body > .hud,
  body > main,
  body > footer,
  body > .grain,
  body > .spot,
  body > a.skip{ display:none !important; }
  #app{ display:block; }

  html,body{ overflow-x:clip; background:var(--onyx); }
  body{ font-size:16px; }

  /* --- app shell layout --- */
  .m-skip{
    position:fixed;left:-999px;top:0;z-index:200;
    background:var(--grove);color:#fff;font-weight:600;font-size:14px;
    padding:10px 16px;border-radius:0 0 8px 0;
  }
  .m-skip:focus{ left:0; top:0; }

  .m-top{
    position:fixed;top:0;left:0;right:0;z-index:80;
    height:calc(52px + var(--sat));
    padding:var(--sat) calc(clamp(14px,4vw,18px) + var(--sar)) 0 calc(clamp(14px,4vw,18px) + var(--sal));
    display:flex;align-items:center;gap:12px;
    background:var(--carbon);border-bottom:1px solid var(--hair);
  }
  .m-back{ display:none; }
  .m-title{ display:none; }
  /* brand lockup: wordmark with the sub-name to its RIGHT, separated by a
     hairline, both centred in the 52px bar. Shown at every phone width and on
     every screen; the lockup is never the thing that gives way when the bar
     gets tight, so the sub-name steps down in size on narrow bars instead. */
  .m-brand{ display:flex;flex-direction:row;align-items:center;gap:9px;margin-right:auto;min-height:44px;flex:0 0 auto; }
  .m-brand .wm{ font-family:var(--font);font-weight:800;font-size:20px;letter-spacing:-.01em;color:var(--bone);line-height:1; }
  .m-brand .wm i{ font-style:italic;color:var(--grove);display:inline-block;transform:skewX(-7deg); }
  .m-brand .sub{
    display:block;font-family:var(--mono);font-size:9px;line-height:1.25;font-weight:500;
    letter-spacing:.18em;text-transform:uppercase;color:var(--bone-66);white-space:nowrap;
    padding-left:9px;border-left:1px solid var(--hair);
  }
  /* Narrow bars: the sub-name shrinks so Back plus the lockup still fit. */
  @media (max-width:400px){ .m-brand{ gap:8px; } .m-brand .sub{ font-size:8.5px;letter-spacing:.12em;padding-left:8px; } }

  /* inner-screen chrome (JS + not hub): back on the left, station title centred,
     lockup on the right. */
  .mob-js #app:not(.is-hub) .m-back{
    display:inline-flex;align-items:center;gap:4px;order:-2;flex:0 0 auto;
    min-width:44px;min-height:44px;font-family:var(--mono);font-size:12.5px;
    letter-spacing:.02em;color:var(--bone-66);
  }
  .mob-js #app:not(.is-hub) .m-back .mchev{ font-size:20px;line-height:1; }
  .mob-js #app:not(.is-hub) .m-back:active{ color:var(--mint); }
  .mob-js #app:not(.is-hub) .m-title{
    display:block;order:-1;flex:1 1 auto;min-width:0;text-align:center;
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-40);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .mob-js #app:not(.is-hub) .m-brand{ margin-right:0; }
  /* Phone widths: Back (47px) plus the full lockup (about 209px) leave under 90px
     at 375, and the shortest station title needs 143px, so the title is dropped
     and the lockup becomes the centred bar title. Each screen opens with its own
     station plate directly under the bar, so the station name is still the first
     thing read. A trailing spacer the width of Back keeps the lockup on centre. */
  @media (max-width:480px){
    .mob-js #app:not(.is-hub) .m-title{ display:none; }
    .mob-js #app:not(.is-hub) .m-back{ width:56px;justify-content:flex-start; }
    .mob-js #app:not(.is-hub) .m-top::after{ content:"";display:block;flex:0 0 56px;order:1; }
    .mob-js #app:not(.is-hub) .m-brand{ margin:0 auto;align-items:center; }
  }

  /* --- the scroll container --- */
  .app-scroll{
    position:fixed;left:0;right:0;top:0;bottom:0;z-index:10;
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
    padding-top:calc(52px + var(--sat) + 8px);
    padding-bottom:calc(64px + var(--sab) + 24px);
    padding-left:calc(clamp(18px,5vw,24px) + var(--sal));
    padding-right:calc(clamp(18px,5vw,24px) + var(--sar));
  }
  #app.is-hub .app-scroll,
  #app.route-contact .app-scroll{ padding-bottom:calc(var(--sab) + 32px); }

  /* --- screens --- */
  .screen{ max-width:640px;margin:0 auto; }
  /* One rule, negated, rather than hide-all-then-show-one. The old pair meant any
     JS failure before the router ran left every screen display:none and the page
     blank. Now the markup ships class="screen is-active" on the screen that page
     opens with, so the worst case is a rendered page with a dead router rather than
     a white one. */
  .mob-js #app .screen:not(.is-active){ display:none; }
  html:not(.mob-js) #app .screen + .screen{
    border-top:1px solid var(--hair);margin-top:32px;padding-top:32px;
  }

  /* on-enter fade-up */
  .mob-js .screen.is-active{ animation:mScreenIn .22s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes mScreenIn{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

  /* --- shared type + blocks --- */
  .m-plate{
    display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;color:var(--bone-40);
    border:1px solid var(--hair);border-radius:3px;padding:7px 11px;margin-bottom:16px;
  }
  .m-tourline{ font-size:15px;color:var(--bone);margin-bottom:10px; }
  .m-kicker{
    display:block;font-family:var(--mono);font-size:11px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--mint);
    margin:40px 0 12px;
  }
  .m-h1{
    font-family:var(--font);font-weight:700;font-size:clamp(30px,8.5vw,40px);
    line-height:1.05;letter-spacing:-.02em;color:var(--bone);margin-bottom:16px;
  }
  .m-h1 span{ display:block; }
  .m-h2{
    font-family:var(--font);font-weight:600;font-size:clamp(23px,6vw,28px);
    line-height:1.15;letter-spacing:-.015em;color:var(--bone);margin-bottom:12px;
  }
  .m-lede{ font-size:17px;line-height:1.55;color:var(--bone-66);margin-bottom:16px; }
  .m-lede + .m-lede{ margin-top:-4px; }
  .m-cap{
    display:block;font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;color:var(--bone-40);margin-bottom:12px;
  }
  .m-cap-block{ margin-top:32px; }

  .screen h3{ font-size:18px;font-weight:600;line-height:1.25;color:var(--bone); }

  /* inline CTA link above the sticky bar */
  .m-inline-cta{
    display:inline-flex;align-items:center;gap:8px;margin:28px 0 8px;
    min-height:44px;padding:4px 0;
    font-weight:600;font-size:15px;color:var(--bone);
  }
  .m-inline-cta .arr{ color:var(--mint); }
  .m-inline-cta:active{ color:var(--mint); }

  /* solid button (hub hero, contact) */
  .m-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    min-height:52px;padding:14px 22px;border-radius:10px;
    font-weight:600;font-size:16px;white-space:nowrap;
  }
  .m-btn-solid{ background:var(--grove);color:#fff;width:100%; }
  .m-btn-solid:active{ background:var(--grove-deep); }

  /* --- HUB --- */
  .hub-hero{
    margin:4px 0 0;padding:22px calc(clamp(18px,5vw,24px)) 24px;
    margin-left:calc(-1 * (clamp(18px,5vw,24px) + var(--sal)));
    margin-right:calc(-1 * (clamp(18px,5vw,24px) + var(--sar)));
    padding-left:calc(clamp(18px,5vw,24px) + var(--sal));
    padding-right:calc(clamp(18px,5vw,24px) + var(--sar));
    /* The hero is exactly the first screen: the scroller pads 60px + inset above it
       and the hero carries a 4px top margin, so 100svh minus 64px minus the inset
       puts the hero's bottom edge on the fold. The feature card, menu and metrics
       begin below it. The bottom padding carries the home-indicator inset so the
       scroll cue and the secondary button clear it. */
    min-height:calc(100svh - 64px - var(--sat));display:flex;flex-direction:column;justify-content:flex-start;
    padding-bottom:calc(20px + var(--sab));
    /* Gradient in px from the top so the dark band tracks the copy block (eyebrow,
       headline, lede: roughly 250px tall) on every device height, the poster shows
       through the middle band, and the base darkens again under the buttons. */
    background:linear-gradient(180deg,
        rgba(11,12,14,.94) 0,rgba(11,12,14,.9) 250px,rgba(11,12,14,.6) 370px,
        rgba(11,12,14,.6) 64%,rgba(11,12,14,.9) 100%),
      url("../media/00-gate-poster.webp");
    background-size:cover;background-position:center;
  }
  .hub-hero .m-plate{ align-self:flex-start;color:var(--mint);border-color:rgba(92,191,149,.55);font-size:12.5px;letter-spacing:.16em;padding:8px 13px;white-space:nowrap; }
  /* 36 characters at 12.5px/.16em (7.5px advance + 2px spacing each) is 342px of text,
     plus 26px padding and 2px border: 370px. The hero's inner width is 90vw, so 402px
     (361.8 inner) still clips; the eyebrow steps down one size at 420px and below. At
     11.5px/.13em the box is 328px and fits every iPhone from 375 up on one line. */
  @media (max-width:420px){ .hub-hero .m-plate{ font-size:11.5px;letter-spacing:.13em;padding:8px 12px; } }
  /* Two spans, one line each, on every iPhone: the longer span measures 10.05em
     wide in Archivo 700, the hero's inner width is 90vw, so 8.8vw is the largest
     size that keeps it on one line (33px at 375, 38.7px at 440). */
  .hub-hero .m-h1{ margin-top:20px;margin-bottom:16px;font-size:clamp(28px,8.8vw,40px);line-height:1.05;text-shadow:0 1px 2px rgba(11,12,14,.45); }
  .hub-hero .m-lede{ font-size:18px;line-height:1.5;margin-bottom:0;color:var(--bone);text-shadow:0 1px 2px rgba(11,12,14,.5); }
  .m-sub-link{
    display:inline-flex;align-items:center;gap:8px;margin-top:12px;
    min-height:44px;padding:4px 0;
    font-weight:600;font-size:15px;color:var(--bone);align-self:flex-start;
  }
  .m-sub-link .arr{ color:var(--mint); }
  /* hub hero: fill the first screen, push the two buttons low, cue the scroll */
  .hub-hero .m-btn-solid{ margin-top:auto;min-height:58px;font-size:17px; }
  .hub-hero .m-sub-link{
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    min-height:54px;margin-top:12px;padding:0 22px;border-radius:10px;
    border:1px solid rgba(244,242,237,.3);background:rgba(11,12,14,.4);
    font-size:16px;color:var(--bone);align-self:auto;
  }
  .hub-hero .m-sub-link:active{ border-color:var(--mint);color:var(--mint); }

  /* Height tiers for the first screen. SHORT is the SE (667): tighter rhythm and a
     smaller cue so both buttons sit well inside the fold. TALL is the 16 Pro, Plus
     and Pro Max (874 and up): a 19px lede and more air between the blocks so the
     middle poster band reads as intended rather than as a gap. The headline size
     stays width-bound on every tier (one line per span). */
  @media (max-height:700px){
    .hub-hero{ padding-top:18px; }
    .hub-hero .m-h1{ margin-top:16px;margin-bottom:14px;font-size:clamp(28px,8.6vw,34px); }
    .hub-hero .m-lede{ font-size:18px;line-height:1.45; }
    .hub-hero .m-sub-link{ margin-top:10px; }
  }
  @media (min-height:870px){
    .hub-hero{ padding-top:28px; }
    .hub-hero .m-h1{ margin-top:26px;margin-bottom:18px; }
    .hub-hero .m-lede{ font-size:19px;line-height:1.55; }
    .hub-hero .m-sub-link{ margin-top:14px; }
  }

  .hub-stats{ display:flex;margin-top:36px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair); }
  .hub-stats .m-stat{ flex:1;padding:16px 8px;text-align:left; }
  .hub-stats .m-stat + .m-stat{ border-left:1px solid var(--hair); }

  .m-stat b{ display:block;font-family:var(--mono);font-weight:600;font-size:clamp(20px,6vw,26px);color:var(--bone);letter-spacing:-.01em; }
  .m-stat span{ display:block;font-size:11.5px;line-height:1.35;color:var(--bone-40);margin-top:6px; }

  .hub-feature{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    column-gap:14px;margin-top:22px;padding:16px;min-height:64px;
    border:1px solid rgba(92,191,149,.4);border-radius:12px;background:rgba(1,121,80,.08);
  }
  .hub-feature:active{ background:rgba(1,121,80,.16); }
  .hub-feature .hf-k{ grid-column:1;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:3px; }
  .hub-feature .hf-l{ grid-column:1;font-family:var(--font);font-weight:600;font-size:1.2rem;color:var(--bone);line-height:1.15; }
  .hub-feature .hf-d{ grid-column:1;font-family:var(--mono);font-size:12px;color:var(--bone-66);line-height:1.3;margin-top:3px; }
  .hub-feature .hf-c{ grid-column:2;grid-row:1 / span 3;font-size:24px;color:var(--mint); }

  .hub-menu{ margin-top:28px;border-top:1px solid var(--hair); }
  .hub-menu a{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    column-gap:14px;row-gap:4px;padding:16px 2px;min-height:56px;
    border-bottom:1px solid var(--hair);
  }
  .hub-menu a:active{ background:var(--hair-soft); }
  .hub-menu .mm-l{ font-family:var(--font);font-weight:600;font-size:1.2rem;color:var(--bone); }
  .hub-menu .mm-d{ grid-column:1;font-family:var(--mono);font-size:12px;color:var(--bone-40);line-height:1.3; }
  .hub-menu .mm-c{ grid-column:2;grid-row:1 / span 2;font-size:20px;color:var(--bone-40); }
  .hub-menu a:active .mm-c{ color:var(--mint); }

  .hub-foot{ margin-top:36px;padding-top:24px;border-top:1px solid var(--hair);color:var(--bone-66);font-size:14px; }
  .hub-foot .hf-loc{ line-height:1.6; }
  .hub-foot .hf-links{ margin-top:12px;color:var(--bone-40); }
  .hub-foot .hf-links a{ color:var(--bone-66);display:inline-block;padding:9px 2px;line-height:1.2; }
  .hub-foot .hf-tag{ margin-top:18px;font-weight:600;color:var(--bone); }
  .hub-foot .hf-cc{ margin-top:10px;font-size:12px;color:var(--bone-40);line-height:1.5; }
  .hub-foot .hf-soon{ margin-top:16px;display:flex;flex-wrap:wrap;gap:8px; }
  .soonchip{ font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--bone-40); }
  .soonchip i{ font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--bone-40);border:1px solid var(--hair-soft);border-radius:99px;padding:2px 7px;margin-left:6px; }

  /* --- generic cards / wells / lists --- */
  .m-card{ border:1px solid var(--hair);border-radius:10px;padding:20px;margin-bottom:16px;background:var(--carbon); }
  .m-card p{ font-size:15px;line-height:1.6;color:var(--bone-66); }
  .m-callout{
    border:1px solid var(--grove);border-left-width:3px;border-radius:8px;
    padding:18px 20px;margin:24px 0;background:rgba(1,121,80,.06);
    font-size:15px;line-height:1.6;color:var(--bone);
  }
  .m-well{ border:1px solid var(--hair-soft);border-radius:10px;padding:20px;margin-bottom:16px;background:var(--smoke); }
  .m-dl{ margin-top:4px; }
  .m-dl > div{ display:grid;grid-template-columns:1fr;gap:2px;padding:12px 0;border-top:1px solid var(--hair-soft); }
  .m-dl > div:first-child{ border-top:0;padding-top:0; }
  .m-dl dt{ font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-40); }
  .m-dl dd{ font-size:15px;color:var(--bone);line-height:1.4; }
  .m-well .m-foot{ margin-top:14px;font-size:13px;line-height:1.55;color:var(--bone-66); }
  .m-well .m-foot b{ color:var(--bone); }

  .m-numlist{ counter-reset:none;margin:4px 0 8px; }
  .m-numlist li{ display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--hair); }
  .m-numlist li:first-child{ border-top:0; }
  .m-numlist .ni{ font-family:var(--mono);font-size:13px;font-weight:600;color:var(--mint);padding-top:2px; }
  .m-numlist strong{ display:block;font-size:16px;font-weight:600;color:var(--bone);margin-bottom:4px; }
  .m-numlist p{ font-size:15px;line-height:1.55;color:var(--bone-66); }
  .m-pnote{ margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--bone-40); }

  /* --- PRICING rungs --- */
  .rungs{ margin:8px 0 0;position:relative; }
  .rung{ border:1px solid var(--hair);border-radius:12px;padding:20px;margin-bottom:14px;background:var(--carbon); }
  .rung-tag{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-40);margin-bottom:8px; }
  .rung-name{ font-size:19px;font-weight:600;color:var(--bone);margin-bottom:8px; }
  .rung-price{ display:flex;align-items:baseline;gap:6px;margin-bottom:4px; }
  .rung-price b{ font-family:var(--font);font-weight:600;font-size:clamp(26px,8vw,32px);color:var(--mint);letter-spacing:-.01em; }
  .rung-price small{ font-family:var(--mono);font-size:12px;color:var(--bone-40); }
  .rung-basis{ font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--bone-40);margin-bottom:12px; }
  .rung-desc{ font-size:15px;line-height:1.55;color:var(--bone-66);margin-bottom:10px; }
  .rung-best{ font-size:15px;line-height:1.5;color:var(--bone);border-left:2px solid var(--hair);padding-left:12px;margin-bottom:14px; }
  .rung-facts > div{ display:grid;grid-template-columns:1fr;gap:2px;padding:10px 0;border-top:1px solid var(--hair-soft); }
  .rung-facts dt{ font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-40); }
  .rung-facts dd{ font-size:15px;color:var(--bone); }
  .rung-flag{ border-color:var(--grove);border-width:1.5px;position:relative; }
  /* --grove text on --carbon is 3.42:1 at 10px/600, under the 4.5:1 this needs.
     --mint carries the same brand read at 8.9:1. */
  .rung-badge{ display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);border:1px solid rgba(92,191,149,.55);border-radius:99px;padding:3px 10px;margin-bottom:12px; }

  /* --- PROOF --- */
  .proof-grid{ display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair);border-left:1px solid var(--hair);margin:8px 0 0; }
  .proof-grid .m-stat{ padding:16px 14px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair); }
  .proof-grid .m-stat b{ font-size:clamp(18px,5.5vw,22px); }

  .m-cases{ margin:8px 0 0; }
  .m-case{ border:1px solid var(--hair);border-radius:12px;padding:20px;margin-bottom:14px;background:var(--carbon); }
  .m-case .m-cn{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-40);margin-bottom:10px; }
  .m-case h3{ font-size:17px;margin-bottom:8px; }
  .m-case p{ font-size:15px;line-height:1.55;color:var(--bone-66); }
  .m-chips{ display:flex;flex-wrap:wrap;gap:8px;margin-top:14px; }
  .m-chips span{ font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--bone-66);border:1px solid var(--hair);border-radius:99px;padding:5px 10px; }
  .m-case-fail{ border-left:3px solid var(--grove); }
  .m-chips .chip-fail{ border-color:var(--grove);color:var(--bone); }

  .m-ledger{ margin:4px 0 0; }
  /* Each <li> was its own three-column grid sized to its own content, so the
     description column started at six different x positions and every wrapped line
     hung under a ragged left edge. Three columns across a 360px phone is too tight
     for this content anyway, so the number and the name share the first row and the
     description takes the full width of the second. Alignment is then exact without
     subgrid, which is not old enough to rely on here. */
  .m-ledger li{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;padding:12px 0;border-top:1px solid var(--hair-soft);font-size:15px; }
  .m-ledger li > span:last-child{ grid-column:1 / -1; }
  .m-ledger li:first-child{ border-top:0; }
  .m-ledger .ni{ font-family:var(--mono);font-size:12px;color:var(--mint); }
  .m-ledger strong{ color:var(--bone);font-weight:600; }
  .m-ledger span:last-child{ color:var(--bone-66); }

  .pod-feat{ display:block;border:1px solid var(--hair);border-radius:12px;overflow:hidden;margin-bottom:16px;background:var(--carbon); }
  .pod-feat img{ width:100%;height:auto;display:block; }
  .pod-feat .pod-tag{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);padding:14px 16px 0; }
  .pod-feat b{ display:block;font-size:16px;color:var(--bone);padding:8px 16px 0;line-height:1.3; }
  .pod-feat .pod-blurb{ display:block;font-size:13.5px;color:var(--bone-66);padding:8px 16px 16px;line-height:1.5; }
  .pod-list a{ display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px 2px;border-top:1px solid var(--hair-soft);align-items:baseline; }
  .pod-list a:first-child{ border-top:0; }
  .pod-list .en{ font-family:var(--mono);font-size:12px;font-weight:600;color:var(--bone-40); }
  .pod-list b{ display:block;font-size:14.5px;color:var(--bone);line-height:1.3; }
  .pod-list span span{ display:block;font-size:12.5px;color:var(--bone-66);margin-top:3px; }
  .pod-list .pod-all{ display:flex;gap:8px;font-weight:600;font-size:14px;color:var(--bone);border-top:1px solid var(--hair-soft);grid-template-columns:none; }
  .pod-list .pod-all .arr{ color:var(--mint); }

  /* --- PROBLEM --- */
  .m-mkt{ display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--hair);border-radius:10px;overflow:hidden;margin:8px 0 24px; }
  .m-mkt .mkt{ padding:16px 14px; }
  .m-mkt .mkt + .mkt{ border-left:1px solid var(--hair); }
  .m-mkt .mkt b{ display:block;font-family:var(--mono);font-weight:600;font-size:26px;color:var(--bone); }
  .m-mkt .mkt span{ display:block;font-size:12px;line-height:1.4;color:var(--bone-66);margin-top:8px; }
  .m-mkt .mkt em{ display:block;font-style:normal;font-size:11px;color:var(--bone-40);margin-top:6px; }

  .m-lead-sm{ font-size:13px;color:var(--bone-40);margin:-4px 0 10px; }
  .m-checks{ margin:4px 0 0; }
  .m-checks li{ position:relative;padding:10px 0 10px 22px;font-size:15px;line-height:1.5;color:var(--bone);border-top:1px solid var(--hair-soft); }
  .m-checks li:first-child{ border-top:0; }
  /* an 8x8 L rotated -45deg is symmetric, so it painted as a chevron rather than a
     tick. A checkmark needs unequal arms. */
  .m-checks li::before{ content:"";position:absolute;left:0;top:13px;width:11px;height:6px;border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg); }
  .m-statrow{ display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--hair-soft);flex-wrap:wrap; }
  .m-stat-inline{ text-align:left; }
  .m-stat-inline b{ font-size:24px;color:var(--mint); }
  .m-stat-inline span{ font-size:12px; }
  .m-statrow .m-inline-cta{ margin:0; }
  .m-excl{ border:1px solid var(--hair);border-radius:10px;padding:20px;margin-top:16px; }
  .m-excl p{ font-size:15px;line-height:1.6;color:var(--bone-66); }

  /* --- USE CASES / accordions --- */
  .m-acc{ margin:8px 0 0;border-top:1px solid var(--hair); }
  .m-det{ border-bottom:1px solid var(--hair); }
  .m-det > summary{
    list-style:none;cursor:pointer;padding:16px 2px;min-height:56px;
    display:flex;flex-direction:column;gap:4px;position:relative;padding-right:36px;
  }
  .m-det > summary::-webkit-details-marker{ display:none; }
  .m-det > summary::after{
    content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
    border-right:2px solid var(--bone-40);border-bottom:2px solid var(--bone-40);
    transform:translateY(-70%) rotate(45deg);transition:transform .18s;
  }
  .m-det[open] > summary::after{ transform:translateY(-30%) rotate(-135deg); }
  .m-det[open] > summary::after{ border-color:var(--mint); }
  .det-tag{ font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-40); }
  .det-n{ font-family:var(--mono);font-size:12px;font-weight:600;color:var(--mint); }
  .det-t{ font-family:var(--font);font-weight:600;font-size:16px;color:var(--bone);line-height:1.3; }
  .det-body{ padding:0 2px 18px; }
  .det-body p{ font-size:15px;line-height:1.6;color:var(--bone-66);margin-bottom:10px; }
  .det-ex{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--bone-40);line-height:1.6; }
  .uc-stats{ display:flex;flex-wrap:wrap;gap:8px;margin-top:4px; }
  .uc-stats span{ font-family:var(--mono);font-size:11px;color:var(--bone-66);border:1px solid var(--hair-soft);border-radius:6px;padding:8px 10px;flex:1;min-width:96px; }
  .uc-stats b{ display:block;font-size:14px;color:var(--bone);margin-bottom:3px;white-space:normal; }
  .det-outs{ margin:0 0 12px; }
  .det-outs li{ position:relative;padding:5px 0 5px 16px;font-size:15px;color:var(--bone);line-height:1.45; }
  .det-outs li::before{ content:"";position:absolute;left:0;top:12px;width:5px;height:5px;border-radius:99px;background:var(--mint); }
  .det-meta{ display:flex;flex-wrap:wrap;gap:8px; }
  .det-meta span{ font-family:var(--mono);font-size:11px;color:var(--bone-40);flex:1;min-width:120px; }
  .det-meta b{ display:block;font-size:13px;color:var(--bone);margin-bottom:2px; }

  .m-stepper{ margin:12px 0 8px;border:1px solid var(--hair);border-radius:10px;overflow:hidden; }
  .m-stepper li{ position:relative;padding:14px 16px 14px 40px;font-size:14px;color:var(--bone);border-top:1px solid var(--hair-soft); }
  .m-stepper li:first-child{ border-top:0; }
  .m-stepper li::before{ content:"";position:absolute;left:18px;top:19px;width:7px;height:7px;border-radius:99px;background:var(--bone-40); }
  .m-stepper li::after{ content:"";position:absolute;left:21px;top:26px;bottom:-1px;width:1px;background:var(--hair-soft); }
  .m-stepper li:last-child::after{ display:none; }
  .m-stepper .step-hl{ color:var(--bone);font-weight:600; }
  .m-stepper .step-hl::before{ background:var(--grove);box-shadow:0 0 0 3px rgba(1,121,80,.25); }

  /* --- 80% STANDARD --- */
  .m-meter{ margin:8px 0 16px; }
  .m-meter .meter-num{ display:block;font-family:var(--font);font-weight:700;font-size:36px;color:var(--bone);margin-bottom:10px; }
  .m-meter .meter-bar{ position:relative;height:14px;border-radius:8px;background:var(--smoke);border:1px solid var(--hair); }
  .m-meter .meter-bar i{ display:block;height:100%;width:80%;background:var(--grove);border-radius:7px;transition:width .5s cubic-bezier(.22,.61,.36,1); }
  .m-meter .meter-tick{ position:absolute;left:80%;top:-4px;bottom:-4px;width:2px;background:var(--mint); }
  .m-meter .meter-legend{ display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--bone-40); }
  .m-meter .meter-legend span:last-child{ text-align:right; }
  .m-chips-out{ display:flex;flex-wrap:wrap;gap:8px;margin:16px 0; }
  .m-chips-out span{ font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-66);border:1px solid var(--hair);border-radius:99px;padding:7px 12px; }
  .m-split{ margin:16px 0; }
  .m-split > div{ padding:14px 16px;border:1px solid var(--hair-soft);border-radius:8px;margin-bottom:10px;background:var(--smoke); }
  .m-split dt{ font-weight:600;font-size:14px;color:var(--bone);margin-bottom:4px; }
  .m-split dd{ font-size:15px;color:var(--bone-66);line-height:1.5; }
  .m-split .split-human{ border-left:3px solid var(--grove); }

  .m-slabs{ margin:12px 0 20px; }
  .slab{ border:1px solid var(--hair-soft);border-radius:8px;padding:16px;margin-bottom:8px;background:var(--carbon); }
  .slab span{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-40);margin-bottom:6px; }
  .slab p{ font-size:15px;line-height:1.5;color:var(--bone-66); }
  .slab-mid{ border-color:var(--grove);border-left-width:3px; }
  .slab-mid span{ color:var(--mint); }

  .m-det-solo{ margin-top:8px;border-top:1px solid var(--hair); }
  .m-note-sm{ font-size:15px;color:var(--bone-66);line-height:1.55;margin-bottom:12px; }
  .plat-scroll{ overflow-x:auto;-webkit-overflow-scrolling:touch; }
  .plat-chips{ display:flex;flex-wrap:wrap;gap:8px; }
  .plat-chips span{ font-family:var(--mono);font-size:11px;color:var(--bone-66);border:1px solid var(--hair-soft);border-radius:6px;padding:6px 10px;white-space:nowrap; }

  /* --- METHOD --- */
  .m-derisk{ border-top:2px solid var(--grove);padding-top:18px;margin-top:24px; }
  .m-derisk .m-kicker{ margin-top:0; }
  .m-derisk p{ font-size:15px;line-height:1.6;color:var(--bone-66); }
  .m-derisk b{ color:var(--bone); }

  /* --- CONTACT --- */
  .contact-cta{ margin:24px 0 8px;text-align:center; }
  .m-audit{ border:1px solid var(--hair);border-radius:10px;padding:20px;margin-top:24px; }
  .m-audit p{ font-size:15px;line-height:1.6;color:var(--bone-66);margin-bottom:12px; }
  .m-ghost-link{ display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 0;font-weight:600;font-size:15px;color:var(--bone); }
  .m-ghost-link .arr{ color:var(--mint); }
  .m-loc-echo{ margin-top:24px;font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--bone-40); }

  /* --- a way out of a mobile subpage. Before this a subpage screen offered only
         Back and the brand mark, so a reader who arrived from search had no route
         to any sibling page. --- */
  .m-more{ margin-top:28px;padding-top:18px;border-top:1px solid var(--hair); }
  .m-more .m-cap{ display:block;margin-bottom:6px; }
  .m-more a{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:52px;padding:0 2px;font-size:16px;font-weight:600;color:var(--bone);
    border-bottom:1px solid var(--hair-soft);
  }
  .m-more a:last-child{ border-bottom:0; }
  .m-more a .arr{ color:var(--mint); }
  .m-more a:active{ color:var(--mint); }

  /* --- sticky bottom CTA (inner screens only) --- */
  .m-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    display:flex;gap:8px;align-items:stretch;
    padding:10px calc(clamp(14px,4vw,20px) + var(--sar)) calc(12px + var(--sab)) calc(clamp(14px,4vw,20px) + var(--sal));
    background:var(--carbon);border-top:1px solid var(--hair);
  }
  .m-cta::before{ content:"";position:absolute;left:0;right:0;top:-12px;height:12px;background:linear-gradient(to top,rgba(11,12,14,.92),rgba(11,12,14,0));pointer-events:none; }
  .m-cta-main{
    flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:52px;padding:0 16px;border-radius:10px;background:var(--grove);color:#fff;
    font-weight:600;font-size:15px;white-space:nowrap;
  }
  .m-cta-main .arr{ color:#fff; }
  .m-cta-main:active{ background:var(--grove-deep); }
  #app.is-hub .m-cta,
  #app.route-contact .m-cta{ display:none; }
  /* Sole action in the bar now, so it takes the whole width. min-width:0 keeps a
     future copy change shrinking rather than overflowing. */
  .m-cta-main{ min-width:0; }

  /* --- focus rings, grove --- */
  #app a:focus-visible,
  #app button:focus-visible,
  #app summary:focus-visible,
  #app .screen:focus-visible{ outline:2px solid var(--grove);outline-offset:2px;border-radius:4px; }

  /* --- reduced motion --- */
  @media (prefers-reduced-motion: reduce){
    .mob-js .screen.is-active{ animation:none; }
    .m-meter .meter-bar i{ transition:none; }
    .m-det > summary::after{ transition:none; }
  }
}