/* ============================================================================
   Myto Energy — design system
   Brand: Deep Hydro Blue #003366 · Electric Teal #00D2C4 · Volt Yellow #FFE600
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* brand */
  --hydro:        #003366;
  --hydro-600:    #0A4B8C;
  --hydro-400:    #2F79B8;
  --teal:         #00D2C4;
  --teal-300:     #57C6B6;
  --teal-700:     #068C87;
  --teal-800:     #04635F;   /* text-safe teal on paper: 6.0:1 on white */
  --volt-800:     #6B5D00;   /* volt reads as gold ink on paper, not glare */
  --volt:         #FFE600;

  /* ink (dark ground) */
  --ink-950:      #04070B;
  --ink-900:      #070B11;
  --ink-850:      #0A0F17;
  --ink-800:      #0E141D;
  --ink-700:      #151D28;
  --ink-600:      #1E2836;

  /* paper (light ground) */
  --paper:        #FFFFFF;
  --paper-100:    #F5F7F9;
  --paper-200:    #ECEFF3;
  --paper-300:    #DDE3E9;

  /* text */
  --t-hi:         #F2F6FA;
  --t-mid:        rgba(233, 241, 248, .70);
  --t-low:        rgba(233, 241, 248, .48);
  --t-ink-hi:     #08111C;
  /* solid, not alpha: translucent ink picks up whatever sits behind it and
     reads grey over the tinted bands and the 3D scene */
  --t-ink-mid:    #36414E;
  --t-ink-low:    #56606C;

  --line:         rgba(233, 241, 248, .12);
  --line-strong:  rgba(233, 241, 248, .22);
  --line-ink:     rgba(8, 17, 28, .12);
  --line-ink-strong: rgba(8, 17, 28, .22);

  /* ---- semantic ground/foreground -------------------------------------
     The palette above is literal (ink = dark, paper = light). These are the
     ones layout rules should use: they say "the ground" and "text on it",
     not which colour that happens to be. Light is the default; .g-ink below
     restores the dark treatment for the few sections that keep it, so the
     site can be re-grounded without touching every rule.                  */
  --ground:       var(--paper);
  --ground-soft:  var(--paper-100);
  --ground-sunk:  var(--paper-200);
  --fg-hi:        var(--t-ink-hi);
  --fg-mid:       var(--t-ink-mid);
  --fg-low:       var(--t-ink-low);
  --rule:         var(--line-ink);
  --rule-strong:  var(--line-ink-strong);
  --accent-on-ground: var(--teal-800);
  --volt-on-ground: var(--volt-800);

  /* type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* rhythm */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1320px;
  --section-y: clamp(72px, 9vw, 140px);
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  color: var(--fg-hi);
  background: var(--ground);
  /* no greyscale smoothing: on a light ground it thins dark type and makes it
     look washed out */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  overflow-x: hidden;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -.026em; line-height: 1.05; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
::selection { background: var(--teal); color: var(--ink-950); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

/* ---------- 3. Type scale ------------------------------------------------ */
.t-display  { font-size: clamp(2.7rem, 6.6vw, 5.9rem); line-height: .98; letter-spacing: -.038em; font-weight: 600; }
.t-h1       { font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.034em; }
.t-h2       { font-size: clamp(1.9rem, 3.9vw, 3.2rem); line-height: 1.06; letter-spacing: -.03em; }
.t-h3       { font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.18; letter-spacing: -.022em; }
.t-h4       { font-size: clamp(1.08rem, 1.4vw, 1.24rem); line-height: 1.3; letter-spacing: -.016em; font-weight: 600; }
.t-lead     { font-size: clamp(1.1rem, 1.55vw, 1.35rem); line-height: 1.55; color: var(--fg-mid); font-weight: 400; letter-spacing: -.012em; }
.t-body     { color: var(--fg-mid); }
.t-sm       { font-size: .935rem; line-height: 1.6; color: var(--fg-mid); }
.t-xs       { font-size: .82rem; line-height: 1.55; color: var(--fg-low); }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-on-ground);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.eyebrow--plain::before { display: none; }
.num {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--fg-low);
}
.measure    { max-width: 62ch; }
.measure-sm { max-width: 46ch; }

/* ---------- 4. Layout ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(64px, 7vw, 104px); }
.stack > * + * { margin-top: var(--gap, 24px); }
.grid { display: grid; gap: clamp(24px, 3vw, 48px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.split--center { align-items: center; }
.hd { display: flex; flex-direction: column; gap: 22px; }

/* grounds */
/* Section bands. These used to be dark sections alternating with light ones —
   a dark-site rhythm. Inverting them wholesale is what made the light version
   read as a negative of the old design rather than something built for paper,
   so the rhythm now comes from tone steps on the same ground: white page, soft
   band, deeper band. Ink stays ink throughout. */
.g-band {
  --ground: var(--paper-100); --ground-soft: var(--paper); --ground-sunk: var(--paper-200);
  background: var(--ground); color: var(--fg-hi);
  border-color: var(--rule);
}
.g-band2 {
  --ground: var(--paper-200); --ground-soft: var(--paper-100); --ground-sunk: var(--paper-300);
  background: var(--ground); color: var(--fg-hi);
  border-color: var(--rule);
}

/* A tile inside a band lifts off it: on paper, depth comes from a hairline and
   a soft shadow, not from being brighter than its surroundings. */
.g-band .stat, .g-band .compare__col, .g-band .card,
.g-band2 .stat, .g-band2 .compare__col, .g-band2 .card {
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(8, 17, 28, .04), 0 12px 28px -24px rgba(8, 17, 28, .45);
}
.g-band .pipe, .g-band2 .pipe { background: var(--rule); }
.g-band .pipe__step, .g-band2 .pipe__step { background: var(--paper); }
.g-deep {
  --ground: var(--paper-100); --ground-soft: var(--paper); --ground-sunk: var(--paper-200);
  background: linear-gradient(165deg, rgba(0, 51, 102, .08) 0%, rgba(0, 210, 196, .09) 58%, rgba(0, 51, 102, .06) 100%), var(--paper);
  color: var(--fg-hi);
}
.g-deep .stat, .g-deep .card, .g-deep .matrix > *, .g-deep .acc__item, .g-deep .figure {
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(8,17,28,.04), 0 12px 28px -24px rgba(8,17,28,.45);
}
/* Light is the ground now, so .g-paper only needs to re-assert the tokens —
   it is kept because pages still carry the class, and because it still means
   something inside a .g-ink section: a light panel on a dark band. */
.g-paper, .panel--paper {
  --ground:      var(--paper);
  --ground-soft: var(--paper-100);
  --ground-sunk: var(--paper-200);
  --fg-hi:       var(--t-ink-hi);
  --fg-mid:      var(--t-ink-mid);
  --fg-low:      var(--t-ink-low);
  --rule:        var(--line-ink);
  --rule-strong: var(--line-ink-strong);
  --accent-on-ground: var(--teal-800);
  --volt-on-ground: var(--volt-800);
  /* the white step — it has to alternate against .g-band's soft one */
  background: var(--ground);
  color: var(--fg-hi);
}

/* hairline top rule used to separate sections */
.rule-top { border-top: 1px solid var(--rule); }
.g-paper.rule-top, .panel--paper.rule-top { border-color: var(--rule); }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  --bg: transparent; --fg: var(--fg-hi); --bd: var(--rule-strong);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  font-size: .93rem; font-weight: 550; letter-spacing: -.008em;
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn__arrow { transition: transform .4s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--volt   { --bg: var(--volt); --fg: #12131A; --bd: var(--volt); font-weight: 600; }
.btn--volt:hover { --bg: #FFF04D; --bd: #FFF04D; }
.btn--teal   { --bg: var(--teal); --fg: #04211F; --bd: var(--teal); font-weight: 600; }
.btn--teal:hover { --bg: #2BE6D9; --bd: #2BE6D9; }
.btn--ghost { --fg: var(--fg-hi); --bd: var(--rule-strong); }
.btn--ghost:hover { --bd: var(--teal-700); --fg: var(--teal-800); }
/* Over the 3D world a transparent ghost fill disappears; paper keeps the
   secondary CTA readable against the scene. */
.act .btn--ghost { --bg: var(--paper); --bd: var(--line-ink-strong); }
.btn:disabled { opacity: .55; transform: none; pointer-events: none; }
.g-paper .btn, .panel--paper .btn { --fg: var(--t-ink-hi); --bd: rgba(8,17,28,.2); }
.g-paper .btn--ghost:hover, .panel--paper .btn--ghost:hover { --bd: var(--teal-700); --fg: var(--teal-700); }
.g-paper .btn--volt, .panel--paper .btn--volt { --fg: #12131A; }
.btn--sm { padding: 11px 19px; font-size: .86rem; }

.link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .92rem; font-weight: 550; color: var(--accent-on-ground);
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(0, 210, 196, .3);
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.link:hover { border-color: var(--accent-on-ground); gap: 14px; }
.g-paper .link, .panel--paper .link { color: var(--accent-on-ground); border-color: color-mix(in srgb, var(--accent-on-ground) 34%, transparent); }
.g-paper .link:hover, .panel--paper .link:hover { border-color: var(--accent-on-ground); }

/* ---------- 6. Header ---------------------------------------------------- */
/* The header carries the dark lockup, so it needs its own opaque ground from
   the first pixel — not only once it sticks. Transparent-over-the-world was a
   dark-theme affordance: on a light page the mark sat on whatever the 3D scene
   happened to be painting underneath it. */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  background: var(--paper);
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  border-bottom: 1px solid var(--rule);
}
.hdr__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; height: 76px;
}
.hdr.is-stuck {
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(8, 17, 28, .06), 0 10px 30px -24px rgba(8, 17, 28, .5);
  border-bottom-color: var(--rule);
}
.hdr__logo { display: flex; align-items: center; flex: none; }
.hdr__logo img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav a {
  position: relative;
  font-size: .93rem; font-weight: 450; letter-spacing: -.008em;
  color: var(--fg-mid);
  padding: 6px 0;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--teal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav a:hover { color: var(--fg-hi); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--fg-hi); }
.hdr__cta { display: flex; align-items: center; gap: 14px; flex: none; }

.burger {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  align-items: center; justify-content: center; flex: none;
}
.burger span {
  display: block; width: 22px; height: 1.5px; background: var(--fg-hi);
  position: relative; transition: background .2s var(--ease);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--fg-hi);
  transition: transform .4s var(--ease-out), top .3s var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after  { top: 7px; }
body.nav-open .burger span { background: transparent; }
body.nav-open .burger span::before { top: 0; transform: rotate(45deg); }
body.nav-open .burger span::after  { top: 0; transform: rotate(-45deg); }

.mnav {
  position: fixed; inset: 0; z-index: 80;
  background: var(--ground);
  padding: 108px var(--gutter) 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .4s var(--ease), transform .5s var(--ease-out), visibility .4s;
  overflow-y: auto;
}
body.nav-open .mnav { opacity: 1; visibility: visible; transform: none; }
body.nav-open { overflow: hidden; }
.mnav a.mnav__link {
  display: flex; align-items: baseline; gap: 14px;
  font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 600; letter-spacing: -.032em;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
  color: var(--fg-hi);
}
.mnav a.mnav__link .num { font-size: .68rem; }

/* ---------- 7. Hero ------------------------------------------------------ */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex; align-items: center;
  padding-top: 120px; padding-bottom: clamp(56px, 8vw, 104px);
  overflow: hidden;
  background:
    radial-gradient(120% 96% at 78% 8%, rgba(0, 210, 196, .14) 0%, rgba(0, 210, 196, 0) 52%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-100) 58%, var(--paper-200) 100%);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: .30;
  mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 100%);
}
.hero__in { position: relative; z-index: 2; width: 100%; }
.hero__in { display: flex; flex-direction: column; justify-content: center; gap: clamp(44px, 7vw, 92px); }
.hero h1 { max-width: 14ch; }
.hero__meta {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px); align-items: start;
  padding-top: clamp(22px, 3vw, 34px); border-top: 1px solid var(--rule);
}
.hero__meta .t-sm { max-width: 58ch; }
.hero__sub { max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__scroll {
  position: absolute; left: var(--gutter); bottom: 34px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-low);
}
.hero__scroll i {
  display: block; width: 1px; height: 34px; background: linear-gradient(var(--teal), transparent);
  animation: drop 2.6s var(--ease) infinite;
}
@keyframes drop { 0%,100% { opacity: .25; transform: scaleY(.5); transform-origin: top; } 45% { opacity: 1; transform: scaleY(1); } }

/* strapline ticker under hero */
.strap {
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-low);
}
.strap > * { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.strap > *::before {                  /* a short current, not a bullet */
  content: ""; width: 16px; height: 1px;
  background: linear-gradient(90deg, rgba(0, 210, 196, .15), var(--teal));
}
.strap a { color: var(--fg-mid); }
.strap a:hover { color: var(--accent-on-ground); }

/* ---------- 8. Statement / big type -------------------------------------- */
.statement { font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.08; letter-spacing: -.034em; font-weight: 600; }
.statement em { font-style: normal; color: var(--accent-on-ground); }
.statement .dim { color: var(--fg-low); }
.g-paper .statement .dim, .panel--paper .statement .dim { color: var(--t-ink-low); }

/* ---------- 9. Cards ----------------------------------------------------- */
.card {
  position: relative;
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease-out);
  overflow: hidden;
}
.card::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, var(--teal), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.card:hover { border-color: var(--rule-strong); transform: translateY(-3px); }
.card:hover::after { transform: scaleX(1); }
.card__n { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--accent-on-ground); }
.g-paper .card, .panel--paper .card {
  background: var(--paper);
  border-color: var(--line-ink);
  box-shadow: 0 1px 2px rgba(8,17,28,.04);
}
.g-paper .card:hover, .panel--paper .card:hover { border-color: rgba(8,17,28,.22); box-shadow: 0 14px 40px -22px rgba(8,17,28,.34); }
.g-paper .card__n, .panel--paper .card__n { color: var(--accent-on-ground); }

/* bordered list — the "matrix" pattern */
.matrix { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--rule); }
.matrix > * {
  padding: clamp(26px, 2.6vw, 40px) clamp(20px, 2vw, 34px);
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 12px;
  transition: background .4s var(--ease);
}
.matrix > *:nth-child(3n) { border-right: 0; }
.matrix > *:hover { background: var(--ground-soft); }
.matrix > a::after {
  content: "Explore →";
  margin-top: auto;
  padding-top: 6px;
  font-size: .92rem;
  font-weight: 550;
  color: var(--accent-on-ground);
}
.g-paper .matrix, .g-paper .matrix > *, .panel--paper .matrix, .panel--paper .matrix > * { border-color: var(--line-ink); }
.g-paper .matrix > *:hover, .panel--paper .matrix > *:hover { background: var(--paper); }

/* stat row */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.stat { background: var(--ground-soft); padding: clamp(22px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 8px; }
.stat__v { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.stat__v span { color: var(--accent-on-ground); }
.g-paper .stats, .panel--paper .stats { background: var(--line-ink); border-color: var(--line-ink); }
.g-paper .stat, .panel--paper .stat { background: var(--paper-100); }

/* ---------- 10. Pipeline (Generate → Predict → ...) ---------------------- */
.pipe { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.pipe--7 { grid-template-columns: repeat(7, minmax(0,1fr)); }
.pipe__step {
  background: var(--ground);
  padding: clamp(20px, 2vw, 30px) clamp(14px, 1.4vw, 22px);
  display: flex; flex-direction: column; gap: 10px;
  position: relative; min-height: 220px;
  transition: background .45s var(--ease);
}
.pipe__step:hover { background: var(--ground-sunk); }
.pipe__step .num { color: var(--accent-on-ground); opacity: .75; }
.pipe__step h3 { font-size: 1.02rem; letter-spacing: -.012em; }
.pipe__step p { font-size: .85rem; line-height: 1.55; color: var(--fg-low); }
.pipe { position: relative; overflow: hidden; }
.pipe__bar {                           /* each stage carries its length of the rail */
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--teal-700));
  opacity: .55;
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease-out);
}
.is-in .pipe__bar { transform: scaleX(1); }
.pipe__step::before {                  /* tributary dropping from the rail into the stage */
  content: ""; position: absolute; left: clamp(14px, 1.4vw, 22px); top: 2px; width: 1px; height: 20px;
  background: linear-gradient(var(--teal), transparent);
  opacity: 0; transition: opacity .6s var(--ease) .4s;
}
.is-in .pipe__step::before { opacity: .9; }
.pipe__pulse {                         /* the current, running the length of the loop */
  position: absolute; top: 0; left: 0; height: 2px; width: 140px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--volt), transparent);
  opacity: 0;
}
.is-in .pipe__pulse { animation: sweep 8s cubic-bezier(.5,0,.5,1) infinite .6s; }
@keyframes sweep {
  0%   { transform: translateX(-160px); opacity: 0; }
  8%   { opacity: .9; }
  92%  { opacity: .9; }
  100% { transform: translateX(calc(100vw + 160px)); opacity: 0; }
}

/* layered "old vs new" comparison */
.compare { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: repeat(3, minmax(0,1fr)); }
.compare__col { background: var(--ground-soft); padding: clamp(24px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.compare__col--now { background: linear-gradient(180deg, rgba(0,210,196,.07), rgba(0,210,196,.015)); }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.chain b {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-weight: 500; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-mid); padding: 5px 0;
}
.chain b + b::before {                 /* current running between the stages */
  content: ""; width: 26px; height: 1px; margin: 0 11px; flex: none;
  background: linear-gradient(90deg, rgba(8, 17, 28, .08), rgba(8, 17, 28, .32));
}
.compare__col--now .chain b { color: var(--accent-on-ground); }
.compare__col--now .chain b + b::before { background: linear-gradient(90deg, rgba(0, 210, 196, .18), var(--teal)); }

/* ---------- 11. Flow diagram (SVG) --------------------------------------- */
.flow { width: 100%; height: auto; }
.flow .fl-line { stroke: var(--rule-strong); stroke-width: 1; fill: none; }
.flow .fl-live {
  stroke: var(--teal); stroke-width: 1.6; fill: none;
  stroke-dasharray: 5 240; stroke-linecap: round;
  animation: run 5.6s linear infinite;
}
.flow .fl-live.d2 { animation-delay: .7s; }
.flow .fl-live.d3 { animation-delay: 1.4s; }
.flow .fl-live.d4 { animation-delay: 2.1s; }
.flow .fl-live.d5 { animation-delay: 2.8s; }
@keyframes run { from { stroke-dashoffset: 245; } to { stroke-dashoffset: 0; } }
.flow .fl-node { fill: var(--paper); stroke: var(--rule-strong); }
.flow .fl-core { fill: rgba(0,210,196,.10); stroke: var(--teal-700); }
.flow text { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; fill: var(--fg-mid); }
.flow text.lab-core { fill: var(--accent-on-ground); }

/* ---------- 12. Media / figure ------------------------------------------- */
.figure {
  position: relative; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(150deg, var(--paper-200), var(--paper));
  aspect-ratio: 4 / 3;
}
.figure > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.figure__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-low);
  border-top: 1px solid var(--rule);
  background: linear-gradient(transparent, rgba(255,255,255,.86));
}
.g-paper .figure, .panel--paper .figure { background: linear-gradient(150deg, #E8EEF3, #F7F9FB); border-color: var(--line-ink); }
.g-paper .figure__cap, .panel--paper .figure__cap { color: var(--t-ink-low); border-color: var(--line-ink); background: linear-gradient(transparent, rgba(255,255,255,.7)); }

/* ---------- 13. Checklist / feature list --------------------------------- */
.ticks { position: relative; display: grid; gap: 0; padding-left: 34px; }
.ticks::before {                       /* the stream */
  content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--teal) 9%, var(--teal-700) 91%, transparent);
  opacity: .8;
}
.ticks li {
  position: relative; padding: 12px 0;
  font-size: .97rem; line-height: 1.5; color: var(--fg-mid);
  transition: color .35s var(--ease);
}
.ticks li::before {                    /* tributary flowing into the statement */
  content: ""; position: absolute; left: -29px; top: 1.28em; width: 21px; height: 1px;
  background: linear-gradient(90deg, var(--teal), rgba(0, 210, 196, .12));
  transition: width .4s var(--ease-out);
}
.ticks li:hover { color: var(--fg-hi); }
.ticks li:hover::before { width: 25px; }
.g-paper .ticks li, .panel--paper .ticks li { color: var(--t-ink-mid); }
.g-paper .ticks li:hover, .panel--paper .ticks li:hover { color: var(--t-ink-hi); }
.g-paper .ticks::before, .panel--paper .ticks::before { background: linear-gradient(180deg, transparent, var(--teal-700) 9%, var(--teal-700) 91%, transparent); opacity: .6; }
.g-paper .ticks li::before, .panel--paper .ticks li::before { background: linear-gradient(90deg, var(--teal-700), rgba(6, 140, 135, .12)); }

/* ---------- 14. Accordion ------------------------------------------------ */
.acc { border-top: 1px solid var(--rule); }
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0; text-align: left;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 550; letter-spacing: -.02em;
}
.acc__btn i {
  flex: none; width: 22px; height: 22px; position: relative; opacity: .7;
  transition: transform .45s var(--ease-out), opacity .3s;
}
.acc__btn i::before, .acc__btn i::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: currentColor;
}
.acc__btn i::after { transform: rotate(90deg); transition: transform .45s var(--ease-out); }
.acc__item.is-open .acc__btn i { transform: rotate(180deg); opacity: 1; color: var(--accent-on-ground); }
.acc__item.is-open .acc__btn i::after { transform: rotate(0deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-bottom: 26px; max-width: 74ch; color: var(--fg-mid); }
.g-paper .acc, .g-paper .acc__item, .panel--paper .acc, .panel--paper .acc__item { border-color: var(--line-ink); }
.g-paper .acc__panel p, .panel--paper .acc__panel p { color: var(--t-ink-mid); }

/* ---------- 15. Footer --------------------------------------------------- */
/* positioned so it paints above the fixed .world, which lives inside <main> */
.ftr { position: relative; z-index: 1; background: var(--ground-soft); border-top: 1px solid var(--rule); padding-block: clamp(56px, 6vw, 88px) 34px; }
.ftr__top { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, .72fr)); gap: clamp(30px, 4vw, 64px); }
.ftr h4 { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-low); margin-bottom: 18px; }
.ftr__links li { margin-bottom: 11px; }
.ftr__links a { font-size: .93rem; color: var(--fg-mid); transition: color .3s var(--ease); }
.ftr__links a:hover { color: var(--accent-on-ground); }
.ftr__logo img { height: 38px; width: auto; margin-bottom: 20px; }
.ftr__bot {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center;
}

/* ---------- 16. Reveal animation ----------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
/* First paint: the hero and interior page titles must be readable before
   IntersectionObserver (or any JS) runs. Below-the-fold .reveal still fades. */
.phero .reveal,
.act[data-act="origin"] .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.reveal[data-d="1"] { transition-delay: .09s; }
.reveal[data-d="2"] { transition-delay: .18s; }
.reveal[data-d="3"] { transition-delay: .27s; }
.reveal[data-d="4"] { transition-delay: .36s; }
.reveal[data-d="5"] { transition-delay: .45s; }
.reveal[data-d="6"] { transition-delay: .54s; }

/* progress bar */
.prog { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--teal), var(--volt)); z-index: 95; }

/* ---------- 17. Page hero (interior) ------------------------------------- */
.phero {
  padding-top: clamp(140px, 15vw, 200px); padding-bottom: clamp(56px, 7vw, 96px);
  background:
    radial-gradient(118% 122% at 84% -16%, rgba(0, 210, 196, .13) 0%, rgba(0, 210, 196, 0) 55%),
    linear-gradient(180deg, var(--paper-200) 0%, var(--paper-100) 52%, var(--paper) 100%);
  border-bottom: 1px solid var(--rule);
  position: relative; overflow: hidden;
}
.phero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 88px 88px; opacity: .35;
  mask-image: linear-gradient(#000, transparent);
  -webkit-mask-image: linear-gradient(#000, transparent);
}
.phero .wrap { position: relative; z-index: 1; }
.crumb { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-low); }
.crumb a:hover { color: var(--accent-on-ground); }

/* ---------- 18. Forms ---------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 9px; }
.field label { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-low); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .97rem; color: var(--fg-hi);
  background: var(--paper);
  border: 1px solid var(--line-ink-strong);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  width: 100%;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal-700);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(6, 140, 135, .14);
  outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--t-ink-low); opacity: .72; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-low) 50%), linear-gradient(135deg, var(--fg-low) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field option { background: var(--ground); }
.form-ok {
  padding: 22px 24px;
  border: 1px solid rgba(0,210,196,.35);
  background: rgba(0,210,196,.08);
  border-radius: var(--r-sm);
}
.form-status:empty { display: none; }

/* ---------- 19. Badges / notes ------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--mono); font-size: .67rem; letter-spacing: .13em; text-transform: uppercase;
  padding: 6px 11px; border: 1px solid var(--rule-strong); border-radius: 100px; color: var(--fg-low);
}
.badge--live { color: var(--accent-on-ground); border-color: rgba(0,210,196,.4); }
.badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: blip 2.4s var(--ease) infinite; }
@keyframes blip { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.badge--volt { color: var(--volt-on-ground); border-color: rgba(255,230,0,.4); }
.g-paper .badge, .panel--paper .badge { border-color: var(--line-ink); color: var(--t-ink-low); }

.note {
  border-left: 2px solid var(--teal); padding: 4px 0 4px 20px;
  font-size: .9rem; color: var(--fg-low); max-width: 66ch;
}
.g-paper .note, .panel--paper .note { border-color: var(--accent-on-ground); color: var(--fg-low); }

/* ---------- 20. Article -------------------------------------------------- */
.article { max-width: 74ch; margin-inline: auto; }
.article h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 52px; margin-bottom: 18px; }
.article h3 { font-size: 1.16rem; margin-top: 36px; margin-bottom: 12px; }
.article p { margin-bottom: 20px; color: var(--fg-mid); font-size: 1.06rem; line-height: 1.72; }
.article ul { margin: 0 0 22px; display: grid; gap: 10px; }
.article ul li { display: flex; gap: 13px; color: var(--fg-mid); font-size: 1.02rem; line-height: 1.62; }
.article ul { padding-left: 30px; position: relative; }
.article ul::before {
  content: ""; position: absolute; left: 1px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--teal) 10%, var(--teal-700) 90%, transparent); opacity: .8;
}
.article ul li::before {
  content: ""; flex: none; width: 18px; height: 1px; margin: 13px 0 0 -30px;
  background: linear-gradient(90deg, var(--teal), rgba(0, 210, 196, .12));
}
.article blockquote {
  margin: 34px 0; padding-left: 24px; border-left: 2px solid var(--teal);
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.36; letter-spacing: -.02em; color: var(--fg-hi); font-weight: 500;
}

/* ---------- 21. Utilities ------------------------------------------------ */
.u-teal { color: var(--accent-on-ground); }
.u-volt { color: var(--volt-on-ground); }
.u-center { text-align: center; align-items: center; }
.u-center .eyebrow { justify-content: center; }
.u-mt { margin-top: clamp(40px, 5vw, 72px); }
.u-mt-s { margin-top: 26px; }
.sticky { position: sticky; top: 116px; }
.hide { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--volt); color: #12131A; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600;
  transition: top .3s var(--ease);
}
.skip:focus { top: 12px; }


/* ---------- 23. Flow system ---------------------------------------------
   Numbering is deliberately absent across the site. Sequence, hierarchy and
   relationship are carried by flow instead: rails, tributaries, connectors
   and glyphs, all in the brand palette.
   ---------------------------------------------------------------------- */

/* line glyphs — a small drawn mark where an index would otherwise sit */
.glyph {
  width: 36px; height: 36px; flex: none;
  stroke: var(--teal); fill: none; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.glyph .dim { stroke: currentColor; opacity: .28; }
.glyph .fillt { fill: rgba(0, 210, 196, .16); stroke: none; }
.g-paper .glyph, .panel--paper .glyph { stroke: var(--teal-700); }
.g-paper .glyph .fillt, .panel--paper .glyph .fillt { fill: rgba(6, 140, 135, .14); }
.card .glyph, .matrix .glyph { margin-bottom: 2px; }
.card:hover .glyph, .matrix > *:hover .glyph { stroke: var(--teal); }

/* horizontal flow: stages joined by a running connector */
.flowsteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); position: relative; }
.flowsteps > * { position: relative; display: flex; flex-direction: column; gap: 13px; }
.flowsteps > * + *::before {
  content: ""; position: absolute; top: 17px; height: 1px;
  left: calc(-1 * clamp(28px, 4vw, 56px)); width: clamp(28px, 4vw, 56px);
  background: linear-gradient(90deg, rgba(0, 210, 196, .10), var(--teal));
}
.flowsteps > * + *::after {
  content: ""; position: absolute; top: 14px; left: -9px;
  border: 3px solid transparent; border-left-color: var(--accent-on-ground);
}
.flowsteps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* vertical flow: a stack the current runs down */
.flowstack { position: relative; display: grid; gap: 2px; }
.flowstack > * { position: relative; }
.flowstack > * + *::before {
  content: ""; position: absolute; top: -2px; left: clamp(24px, 2.4vw, 34px); width: 1px; height: 2px;
  background: var(--teal);
}
.flowstack__rail {
  position: absolute; left: clamp(24px, 2.4vw, 34px); top: 12px; bottom: 12px; width: 1px; z-index: 1;
  background: linear-gradient(180deg, transparent, var(--teal) 8%, var(--teal-700) 92%, transparent);
  opacity: .5;
}

/* the value ribbon */
.ribbon { width: 100%; height: auto; display: block; }
.ribbon .band { fill: url(#ribbonGrad); }
.ribbon .edge { fill: none; stroke: var(--teal); stroke-width: 1.2; opacity: .85; }
.ribbon .tick { stroke: var(--rule-strong); stroke-width: 1; }
.ribbon .flowline {
  fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 5 34; animation: ribbonflow 2.6s linear infinite;
}
@keyframes ribbonflow { from { stroke-dashoffset: 39; } to { stroke-dashoffset: 0; } }
.g-paper .ribbon .flowline, .panel--paper .ribbon .flowline { stroke: var(--teal-700); }
.ribbon text { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; fill: var(--fg-mid); }
.ribbon text.hi { fill: var(--teal-700); }
.ribbon text.volt { fill: #8A7B00; }
.g-paper .ribbon .tick, .panel--paper .ribbon .tick { stroke: var(--line-ink); }
.g-paper .ribbon text, .panel--paper .ribbon text { fill: var(--t-ink-mid); }
.g-paper .ribbon text.hi, .panel--paper .ribbon text.hi { fill: var(--teal-700); }
.g-paper .ribbon text.volt, .panel--paper .ribbon text.volt { fill: #8A7B00; }
.g-paper .ribbon .edge, .panel--paper .ribbon .edge { stroke: var(--teal-700); }

@media (max-width: 900px) {
  .flowsteps, .flowsteps--3 { grid-template-columns: 1fr; gap: 30px; }
  .flowsteps > * + *::before {
    top: -16px; left: 17px; width: 1px; height: 16px;
    background: linear-gradient(180deg, rgba(0, 210, 196, .10), var(--teal));
  }
  .flowsteps > * + *::after { top: -4px; left: 14px; border-left-color: transparent; border-top-color: var(--accent-on-ground); }
}


/* ---------- 25. The stage ------------------------------------------------
   One continuous 3D energy system. The canvas is pinned; the story scrolls
   over it. Every scene is a camera move, not a new animation.
   ---------------------------------------------------------------------- */
.stage { position: relative; background: var(--paper); }
.stage__pin {
  position: sticky; top: 0; z-index: 0; isolation: isolate; height: 100svh; margin-bottom: -100svh; overflow: hidden;
  background:
    radial-gradient(120% 78% at 76% 88%, rgba(255, 230, 0, .10) 0%, rgba(255, 230, 0, 0) 46%),
    radial-gradient(140% 92% at 22% 6%, rgba(0, 210, 196, .12) 0%, rgba(0, 51, 102, .05) 38%, rgba(8, 17, 28, 0) 78%);
  background-color: var(--paper);
}
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.stage__horizon {
  position: absolute; inset: auto 0 0 0; height: 58%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .42) 54%, rgba(255, 255, 255, .86) 100%);
}
.stage__vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 clamp(80px, 14vw, 220px) clamp(20px, 4vw, 70px) rgba(4, 7, 11, .7);
}
.stage__grain {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.stage__fallback {
  position: absolute; inset: 0; z-index: 1; display: none;
  background: radial-gradient(120% 90% at 70% 20%, rgba(0, 210, 196, .12) 0%, rgba(0, 51, 102, .06) 52%, rgba(8, 17, 28, 0) 100%), var(--paper);
}
.no-webgl .stage__fallback { display: block; }
.no-webgl .stage__canvas { display: none; }

/* the pinned overlay layer: type, readouts, chapter marks */
.stage__ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.stage__ui .wrap { height: 100%; position: relative; }
.stage__ui a, .stage__ui button { pointer-events: auto; }

/* chapter rail — where you are in the system */
.chapters {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px; z-index: 6;
}
.chapters b {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  font-family: var(--mono); font-size: .62rem; font-weight: 400; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-low); opacity: .45;
  transition: opacity .5s var(--ease), color .5s var(--ease);
}
.chapters b::after { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .5s var(--ease-out); }
.chapters b.on { opacity: 1; color: var(--accent-on-ground); }
.chapters b.on::after { width: 34px; }

/* hero inside the stage */
.shero { position: relative; z-index: 2; height: 100svh; display: flex; align-items: flex-end; padding-bottom: clamp(56px, 9vh, 110px); }
.shero__in { position: relative; z-index: 5; width: 100%; }
.shero h1 {
  font-size: clamp(2.5rem, 6.6vw, 6.1rem); line-height: .94; letter-spacing: -.042em; font-weight: 600;
}
@media (max-width: 640px) { .shero h1 br { display: none; } }
.shero__row { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, .58fr); gap: clamp(24px, 4vw, 72px); align-items: end; }
.shero__aside { padding-bottom: 10px; }
.shero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 3vw, 40px); }

/* scenes: sparse type over the moving system, never centred the same way twice */
.scene { position: relative; z-index: 2; height: 100svh; display: flex; pointer-events: none; }
.scene .wrap { width: 100%; display: flex; }
.scene__box { position: relative; z-index: 5; max-width: 46ch; pointer-events: auto; }
.scene[data-pos="left-mid"]  .wrap { align-items: center; justify-content: flex-start; }
.scene[data-pos="right-mid"] .wrap { align-items: center; justify-content: flex-end; }
.scene[data-pos="left-low"]  .wrap { align-items: flex-end; justify-content: flex-start; padding-bottom: 14vh; }
.scene[data-pos="right-low"] .wrap { align-items: flex-end; justify-content: flex-end; padding-bottom: 12vh; }
.scene[data-pos="left-high"] .wrap { align-items: flex-start; justify-content: flex-start; padding-top: 18vh; }
.scene[data-pos="center"]    .wrap { align-items: center; justify-content: center; text-align: center; }
.scene[data-pos="center"] .scene__box { max-width: 30ch; }
.scene__mark {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-on-ground); display: block; margin-bottom: 16px;
}
.scene__t {
  font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -.032em; font-weight: 600;
  text-wrap: balance;
}
.scene__t em { font-style: normal; color: var(--accent-on-ground); }
.scene__p { margin-top: 18px; font-size: 1.02rem; line-height: 1.55; color: var(--fg-mid); max-width: 40ch; }
.scene__box { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.scene.on .scene__box { opacity: 1; transform: none; }

/* sparse readouts pinned to the asset being discussed */
.readout {
  position: absolute; z-index: 5; display: none; flex-direction: column; gap: 3px;
  padding: 12px 16px 10px; min-width: 220px;
  background: var(--paper); border: 1px solid var(--rule); border-left: 2px solid var(--teal-700);
  border-radius: var(--r-sm); box-shadow: 0 10px 30px -18px rgba(8, 17, 28, .35);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--fg-mid);
  animation: readin .6s var(--ease-out) both;
}
.readout.on { display: flex; }
.readout b { color: var(--accent-on-ground); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.readout i { font-style: normal; color: var(--fg-hi); }
.readout span { color: var(--fg-low); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }

/* system state: a label, a value, nothing else */
.tel { display: grid; gap: 5px; margin: 9px 0 8px; }
.tel > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: baseline; }
.tel dt { color: var(--fg-low); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.tel dd { margin: 0; color: var(--fg-hi); font-size: .84rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.g-paper .tel dt, .panel--paper .tel dt { color: var(--t-ink-low); }
.g-paper .tel dd, .panel--paper .tel dd { color: var(--t-ink-hi); }
@keyframes readin { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 26. Typographic statements ----------------------------------- */
.say { position: relative; padding-block: clamp(96px, 16vh, 220px); overflow: hidden; }
.say__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); }
.say__a {
  grid-column: 1 / span 8;
  font-size: clamp(2.2rem, 6.4vw, 5.4rem); line-height: .98; letter-spacing: -.04em; font-weight: 600;
  color: var(--fg-hi);
}
.say__b {
  grid-column: 4 / span 9; margin-top: clamp(10px, 1.4vw, 22px);
  font-size: clamp(2.2rem, 6.4vw, 5.4rem); line-height: .98; letter-spacing: -.04em; font-weight: 600;
  color: var(--accent-on-ground);
}
.say__b--dim { color: var(--fg-low); }
.say__b--volt { color: var(--volt-on-ground); }
.say__foot { grid-column: 8 / span 5; margin-top: clamp(26px, 3vw, 46px); }
.say--right .say__a { grid-column: 4 / span 9; text-align: right; }
.say--right .say__b { grid-column: 1 / span 8; text-align: right; }
.say--right .say__foot { grid-column: 1 / span 4; }
.g-paper .say__a, .panel--paper .say__a { color: var(--t-ink-hi); }
.g-paper .say__b, .panel--paper .say__b { color: var(--accent-on-ground); }
.g-paper .say__b--dim, .panel--paper .say__b--dim { color: var(--t-ink-low); }

/* a rule that draws itself as the statement lands */
.say__rule { grid-column: 1 / -1; height: 1px; background: var(--rule); margin-bottom: clamp(30px, 4vw, 56px); position: relative; }
.say__rule::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--teal), transparent 62%);
  transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-out);
}
.reveal.is-in .say__rule::after, .say.is-in .say__rule::after { transform: scaleX(1); }

/* ---------- 27. Asymmetric editorial ------------------------------------- */
.ed { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 60px) clamp(16px, 2vw, 32px); }
.ed__lead { grid-column: 1 / span 5; }
.ed__body { grid-column: 7 / span 6; }
.ed__wide { grid-column: 1 / -1; }
.ed__l7 { grid-column: 1 / span 7; }
.ed__r5 { grid-column: 8 / span 5; }
.ed__l4 { grid-column: 1 / span 4; }
.ed__r7 { grid-column: 6 / span 7; }
.ed__off { grid-column: 3 / span 8; }

/* staggered list of domains — deliberately not four identical cards */
.domains { display: grid; gap: 0; }
.domain {
  display: grid; grid-template-columns: 56px minmax(0, 26ch) minmax(0, 1fr) auto;
  gap: clamp(18px, 2.6vw, 44px); align-items: start;
  padding: clamp(26px, 3vw, 42px) 0;
  border-top: 1px solid var(--rule);
  transition: background .5s var(--ease), padding-left .5s var(--ease-out);
}
.domain:last-child { border-bottom: 1px solid var(--rule); }
.domain:hover { background: linear-gradient(90deg, rgba(0, 210, 196, .05), transparent 60%); padding-left: 14px; }
.domain h3 { font-size: clamp(1.2rem, 1.9vw, 1.65rem); letter-spacing: -.024em; }
.domain p { color: var(--fg-mid); font-size: .97rem; }
.domain .link { align-self: center; }
.g-paper .domain, .panel--paper .domain { border-color: var(--line-ink); }
.g-paper .domain:hover, .panel--paper .domain:hover { background: linear-gradient(90deg, rgba(6, 140, 135, .06), transparent 60%); }

/* the lattice section */
.lattice { position: relative; }
.lattice__canvas { width: 100%; height: clamp(320px, 46vh, 520px); display: block; }
.lattice__cond { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.lattice__cond span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-low);
  display: inline-flex; align-items: center; gap: 9px;
}
.lattice__cond i {
  display: block; width: 42px; height: 2px; background: var(--rule-strong); position: relative; font-style: normal;
}
.lattice__cond i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v, 50%); background: var(--teal);
  transition: width .9s var(--ease-out);
}

/* ---------- 28. Depth + pointer response --------------------------------- */
.tilt { will-change: transform; transition: transform .8s var(--ease-out); }
.parallax { will-change: transform; }

/* ---------- 29. Stage responsive ----------------------------------------- */
@media (max-width: 900px) {
  .chapters { display: none; }
  .shero__row { grid-template-columns: 1fr; gap: 26px; }
  .say__a, .say__b, .say__foot,
  .say--right .say__a, .say--right .say__b, .say--right .say__foot { grid-column: 1 / -1; text-align: left; }
  .ed__lead, .ed__body, .ed__l7, .ed__r5, .ed__l4, .ed__r7, .ed__off { grid-column: 1 / -1; }
  .domain { grid-template-columns: 40px minmax(0, 1fr); gap: 12px 20px; }
  .domain p { grid-column: 2; }
  .domain .link { grid-column: 2; }
  .scene { height: 100svh; }
  .scene__box { max-width: none; }
  .scene[data-pos="right-mid"] .wrap, .scene[data-pos="right-low"] .wrap { justify-content: flex-start; }
  .readout { display: none !important; }
}
@media (max-width: 700px) {
  .stage__grain { opacity: .035; }
  .scene__t { font-size: clamp(1.5rem, 6.6vw, 2rem); }
}


/* ---------- 31. The world ------------------------------------------------
   The 3D energy system is not a hero graphic that ends — it is the ground the
   whole page stands on. One fixed canvas, behind everything, for the life of
   the document. Acts are open (you see the system, type floats on it); panels
   are closed surfaces that slide over it when something must be read.
   ---------------------------------------------------------------------- */
/* The world sits on the page ground now, not against it: the canvas clears to
   transparent and the geometry is mid-tone, so it reads on light. The daylight
   wash keeps a hint of hydro blue so the scene still feels like a system rather
   than a diagram on blank paper. */
.world {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  isolation: isolate; overflow: hidden;
  background:
    radial-gradient(120% 78% at 76% 88%, rgba(255, 230, 0, .07) 0%, rgba(255, 230, 0, 0) 46%),
    radial-gradient(140% 92% at 22% 6%, #EEF6F9 0%, #F7FAFB 40%, var(--paper) 78%);
  background-color: var(--paper);
}
/* Deliberately normal compositing. mix-blend-mode: multiply reads better for
   ink-on-paper line work, but on a fixed, isolated layer it made everything
   painted above the canvas disappear in Chromium — the headline included. The
   scene is darkened in the shader instead, which needs no blending at all
   because the canvas already clears to transparent. */
.world__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Only a short fade at the very bottom, so the story's lower edge meets the
   white panel below cleanly. The old 58% white wash, edge vignette and film
   grain were dark-theme atmosphere; on paper they just greyed the scene. */
.world__horizon {
  position: absolute; inset: auto 0 0 0; height: 18%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7));
}
.world__vignette, .world__grain { display: none; }
.world__fallback { position: absolute; inset: 0; display: none; background: radial-gradient(120% 90% at 70% 20%, #E8F1F7 0%, #F1F5F8 52%, var(--paper) 100%); }
.no-webgl .world__fallback { display: block; }
.no-webgl .world__canvas { display: none; }

main { position: relative; z-index: 1; }

/* an act: the system is visible, the words sit lightly on it */
.act { position: relative; min-height: 100svh; display: flex; padding-block: clamp(40px, 8vh, 90px); }
.act > .wrap { width: 100%; display: flex; }
.act__box { position: relative; max-width: 46ch; }
.act__box::before {                    /* a scrim only where the words are   */
  /* Feathered by blur, not by a gradient: a gradient box is clipped at its own
     edges, which left a visible white card sitting on the scene. */
  content: ""; position: absolute; inset: -22px -32px -26px -32px; z-index: -1;
  background: rgba(255, 255, 255, .93); border-radius: 36px;
  filter: blur(12px);
}
.act[data-pos="left-mid"]  > .wrap { align-items: center; justify-content: flex-start; }
.act[data-pos="right-mid"] > .wrap { align-items: center; justify-content: flex-end; }
.act[data-pos="left-low"]  > .wrap { align-items: flex-end; justify-content: flex-start; }
.act[data-pos="right-low"] > .wrap { align-items: flex-end; justify-content: flex-end; }
.act[data-pos="left-high"] > .wrap { align-items: flex-start; justify-content: flex-start; padding-top: 12vh; }
.act[data-pos="center"]    > .wrap { align-items: center; justify-content: center; text-align: center; }
.act[data-pos="center"] .act__box { max-width: 32ch; }
.act__mark { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-on-ground); display: block; margin-bottom: 16px; }
.act__t { font-size: clamp(1.8rem, 3.6vw, 3.1rem); line-height: 1.03; letter-spacing: -.034em; font-weight: 600; text-wrap: balance; }
.act__t em { font-style: normal; color: var(--accent-on-ground); }
.act__p { margin-top: 18px; font-size: 1.04rem; line-height: 1.55; color: var(--fg-mid); max-width: 40ch; }
.act__box { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.act.on .act__box { opacity: 1; transform: none; }
.act[data-act="origin"] { padding-top: 96px; }
.act[data-act="origin"] .act__box {
  opacity: 1;
  transform: none;
  max-width: min(72rem, 100%);
}
.act[data-act="origin"] .act__box::before {
  inset: -16px -24px -20px -24px;
  background: rgba(255, 255, 255, .72);
  filter: blur(20px);
}

/* a panel: an opaque surface for what has to be read */
.panel { position: relative; background: var(--ground); border-top: 1px solid var(--rule); }
.panel--deep {
  background: linear-gradient(165deg, rgba(0, 51, 102, .08) 0%, rgba(0, 210, 196, .09) 58%, rgba(0, 51, 102, .06) 100%), var(--paper);
  color: var(--fg-hi);
}
/* white, so it alternates against the soft bands rather than matching them */
.panel--paper { background: var(--paper); color: var(--t-ink-hi); }
.panel--open { background: transparent; border-top-color: transparent; }   /* the world shows through */
.panel--veil { background: rgba(255, 255, 255, .86); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* the chapter rail follows the whole journey now */
.rail { position: fixed; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 13px; pointer-events: none; }
.rail b {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  font-family: var(--mono); font-size: .6rem; font-weight: 400; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-low); opacity: .38;
  transition: opacity .5s var(--ease), color .5s var(--ease);
}
.rail b::after { content: ""; width: 12px; height: 1px; background: currentColor; transition: width .5s var(--ease-out); }
.rail b.on { opacity: 1; color: var(--accent-on-ground); }
.rail b.on::after { width: 32px; }
.rail.hide { opacity: 0; transition: opacity .4s var(--ease); }

@media (max-width: 900px) {
  .rail { display: none; }
  .act { min-height: 92svh; }
  .act__box { max-width: none; }
  .act[data-pos="right-mid"] > .wrap, .act[data-pos="right-low"] > .wrap { justify-content: flex-start; }
  .act__box::before { inset: -14px -18px; background: rgba(255, 255, 255, .84); }
}


/* ---------- 33. The comparison beat + representative systems ------------- */
.act--beat { min-height: 78svh; }
.beat {
  font-size: clamp(3rem, 11vw, 9.5rem); line-height: .88; letter-spacing: -.05em; font-weight: 600;
  color: var(--fg-hi); text-wrap: balance;
}
.beat--volt { color: var(--volt-on-ground); }
.act--beat .act__box::before { inset: -10px -40px; }

/* representative systems: editorial rows, not cards */
.applies { display: grid; gap: 0; }
.applies__row {
  display: grid; grid-template-columns: minmax(0, 20ch) minmax(0, 1fr) minmax(0, 24ch);
  gap: 0 clamp(18px, 3vw, 48px); align-items: start;
  padding: clamp(26px, 3vw, 42px) 0; border-top: 1px solid var(--rule);
  transition: background .45s var(--ease), padding-left .45s var(--ease-out);
}
.applies__row:last-child { border-bottom: 1px solid var(--line-ink); }
.applies__row:hover { background: linear-gradient(90deg, rgba(6,140,135,.05), transparent 60%); padding-left: 12px; }
/* badge left, the system in the middle, what it needs on the right */
.applies__row .badge { grid-column: 1; grid-row: 1; }
.applies__row h3     { grid-column: 2; grid-row: 1; align-self: start; }
.applies__row .t-sm  { grid-column: 2; grid-row: 2; margin-top: 10px; }
.applies__row .num   { grid-column: 3; grid-row: 1 / span 2; align-self: start; line-height: 1.7; }
.panel:not(.panel--paper) .applies__row { border-color: var(--rule); }

@media (max-width: 900px) {
  .applies__row { grid-template-columns: 1fr; gap: 12px 0; }
  .applies__row .badge, .applies__row h3, .applies__row .t-sm, .applies__row .num { grid-column: 1; grid-row: auto; }
  .applies__row .t-sm { margin-top: 0; }
  .beat { font-size: clamp(2.6rem, 14vw, 4rem); }
}


/* ---------- 35. Spatial stack + globe ------------------------------------ */
.stack3d__wrap { perspective: 1400px; }
.stack3d { width: 100%; height: auto; display: block; overflow: visible; }
.stack3d__t { font-family: var(--mono); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.stack3d__s { font-family: var(--sans); font-size: 13px; fill: var(--t-ink-mid); }
/* the layer labels carry brand fills authored for a dark ground; CSS beats a
   presentation attribute, so map each one to its paper-safe ink */
.stack3d__t[fill="#FFE600"] { fill: var(--volt-800); }
.stack3d__t[fill="#00D2C4"] { fill: var(--teal-800); }
.stack3d__t[fill="#8FA6B8"] { fill: #4A5D6E; }
.g-paper .stack3d__s, .panel--paper .stack3d__s { fill: rgba(8, 17, 28, .55); }
.stack3d polygon { transition: opacity .5s var(--ease); }
.stack3d:hover polygon { opacity: .85; }

.globe { width: 100%; height: clamp(320px, 46vh, 560px); display: block; }

/* India's power system — globe as the stage, copy overlaid on the left. */
.india {
  padding-block: 0;
  overflow: clip;
}
.india__stage {
  position: relative;
  min-height: min(92svh, 860px);
  display: grid;
  align-items: stretch;
}
.india__globe {
  /* Square globe anchored on the right — fully inside, never clipped oval. */
  position: absolute;
  top: 50%;
  right: max(var(--gutter), 4%);
  left: auto;
  z-index: 0;
  width: min(68svh, 580px);
  height: min(68svh, 580px);
  transform: translateY(-50%);
  pointer-events: none;
}
.globe--stage,
.india .globe {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
}
.india__copy {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding-block: clamp(56px, 9vh, 112px);
  min-height: min(92svh, 860px);
}
.india__card {
  max-width: min(42ch, 100%);
  background: none;
}
.india__card .t-h2 { max-width: 18ch; }
.india__card .t-lead { max-width: 38ch; }

@media (max-width: 900px) {
  .globe { height: clamp(260px, 44vh, 360px); }
  .stack3d__s { font-size: 15px; }
  .stack3d__t { font-size: 17px; }
  .india__stage,
  .india__copy,
  .globe--stage,
  .india .globe { min-height: min(88svh, 720px); }
  .india__globe {
    top: auto;
    bottom: 0;
    left: 50%;
    width: min(78vw, 440px);
    height: min(78vw, 440px);
    transform: translateX(-50%);
    opacity: .82;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 100%);
  }
  .india__copy {
    align-items: flex-start;
    padding-block: clamp(48px, 8vh, 72px) clamp(36px, 6vh, 56px);
  }
  .india__card { max-width: none; }
}


/* ---------- 37. The decision ---------------------------------------------
   Deliberately not a dashboard: two columns, one committed action, and the
   trade-offs that produced it.
   ---------------------------------------------------------------------- */
.decide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.decide__in, .decide__out { display: flex; flex-direction: column; }
.decide__out { border-left: 1px solid var(--rule); padding-left: clamp(24px, 3vw, 48px); }
.decide__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.decide__acts li {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  padding: 7px 12px; border: 1px solid var(--rule); border-radius: 100px;
  color: var(--fg-low); transition: color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.decide__acts li.is-chosen { color: var(--ink-950); background: var(--teal); border-color: var(--accent-on-ground); font-weight: 500; }
.decide__acts li.is-near { color: var(--fg-mid); border-color: var(--rule-strong); }
.decide__action {
  transition: opacity .18s var(--ease);
  font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.06; letter-spacing: -.028em; font-weight: 600;
  color: var(--accent-on-ground); margin-top: 10px; min-height: 1.1em;
}
.decide__out .ticks { margin-top: 12px; }

/* the trace: a timeline, not a log viewer */
.trace { display: grid; gap: 0; margin-top: 16px; counter-reset: none; }
.trace li {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 20px; align-items: baseline;
  padding: 13px 0 13px 22px; position: relative; border-left: 1px solid var(--rule);
}
.trace li::before {
  content: ""; position: absolute; left: -3px; top: 20px; width: 5px; height: 5px;
  background: var(--ground); border: 1px solid var(--accent-on-ground); border-radius: 50%;
}
.trace li:last-child::before { background: var(--accent-on-ground); }
.trace b { font-family: var(--mono); font-size: .74rem; font-weight: 500; color: var(--accent-on-ground); font-variant-numeric: tabular-nums; }
.trace span { font-size: .93rem; color: var(--fg-mid); }

@media (max-width: 900px) {
  .decide { grid-template-columns: 1fr; gap: 30px; }
  .decide__out { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 26px; }
  .trace li { grid-template-columns: 54px minmax(0, 1fr); gap: 14px; }
}


/* ---------- 39. Evidence: ledgers and architecture signals ---------------- */
.ledger { display: grid; gap: 6px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); max-width: 34ch; }
.ledger > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: baseline; }
.ledger dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-low); }
.ledger dd { margin: 0; font-family: var(--mono); font-size: .84rem; color: var(--fg-hi); font-variant-numeric: tabular-nums; }
.ledger__good { color: var(--volt-on-ground) !important; }
.ledger__bad { color: var(--fg-low) !important; }
.ledger__note { margin-top: 12px; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-low); }

.signals { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--rule); padding-top: 22px; }
.signals li {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-mid); padding: 6px 0;
}
.signals li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; background: var(--teal); opacity: .55; margin: 0 16px 2px; }
.g-paper .signals, .panel--paper .signals { border-color: var(--line-ink); }
.g-paper .signals li, .panel--paper .signals li { color: var(--t-ink-mid); }


/* ---------- 41. Light-ground corrections ---------------------------------
   Components whose default colours assume the dark ground. When one of these
   lands on a paper panel it must flip, or it disappears.
   ---------------------------------------------------------------------- */
.g-paper .domain p, .panel--paper .domain p { color: var(--t-ink-mid); }
.g-paper .domain h3, .panel--paper .domain h3 { color: var(--t-ink-hi); }
.g-paper .decide__acts li, .panel--paper .decide__acts li { color: var(--t-ink-low); border-color: var(--line-ink); }
.g-paper .decide__acts li.is-near, .panel--paper .decide__acts li.is-near { color: var(--t-ink-mid); border-color: rgba(8, 17, 28, .28); }
.g-paper .decide__out, .panel--paper .decide__out { border-color: var(--line-ink); }
.g-paper .decide__action, .panel--paper .decide__action { color: var(--accent-on-ground); }
.g-paper .trace li, .panel--paper .trace li { border-color: var(--line-ink); }
.g-paper .trace li::before, .panel--paper .trace li::before { background: var(--paper-100); border-color: var(--accent-on-ground); }
.g-paper .trace li:last-child::before, .panel--paper .trace li:last-child::before { background: var(--teal-700); }
.g-paper .trace b, .panel--paper .trace b { color: var(--accent-on-ground); }
.g-paper .trace span, .panel--paper .trace span { color: var(--t-ink-mid); }
.g-paper .ledger, .panel--paper .ledger { border-color: var(--line-ink); }
.g-paper .ledger dt, .panel--paper .ledger dt,
.g-paper .ledger__note, .panel--paper .ledger__note { color: var(--t-ink-low); }
.g-paper .ledger dd, .panel--paper .ledger dd { color: var(--t-ink-hi); }
.g-paper .ledger__bad, .panel--paper .ledger__bad { color: rgba(8, 17, 28, .38) !important; }
.g-paper .statement, .panel--paper .statement { color: var(--t-ink-hi); }
.g-paper .statement em, .panel--paper .statement em { color: var(--accent-on-ground); }
.g-paper blockquote, .panel--paper blockquote { color: var(--t-ink-hi); }

/* ---------- 42. Responsive ----------------------------------------------- */
@media (max-width: 1080px) {
  .pipe--7 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ftr__top { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .hdr__signin { display: none; }
  .burger { display: flex; }
  .hdr__cta .btn--volt { display: inline-flex; }
  .hero__meta { grid-template-columns: 1fr; gap: 22px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .g-3, .matrix, .compare { grid-template-columns: repeat(1, minmax(0,1fr)); }
  .matrix > * { border-right: 0 !important; }
  .sticky { position: static; }
  .hero__scroll { display: none; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .g-2, .g-4 { grid-template-columns: 1fr; }
  .pipe--7 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pipe__step { min-height: 0; }
  .stats { grid-template-columns: 1fr; }
  .ftr__top { grid-template-columns: 1fr; }
  .hero { min-height: 0; padding-top: 118px; }
  .hero__canvas { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .hdr, .mnav, .prog, .hero__canvas, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- 14. The storyline -------------------------------------------
   The acts used to be stacked full-height sections you scrolled down through.
   They now run horizontally and advance on their own, so the whole narrative
   plays in one viewport instead of costing the reader thirteen screens of
   scrolling. The hero keeps its own section above this one.
   ------------------------------------------------------------------------ */
.storyline { position: relative; }
/* clip rather than hide: an overflow:hidden box with horizontal overflow is a
   scroll container, and with overscroll-behavior on it Chromium swallowed
   vertical wheel/trackpad input over the story — the page stopped scrolling.
   `clip` is not a scroll container, so wheel input always reaches the page. */
.storyline__viewport { overflow: hidden; overflow: clip; }
.storyline__track {
  display: flex;
  will-change: transform;
  transition: transform 1.05s cubic-bezier(.22, 1, .36, 1);
}
.storyline__track.is-snap { transition: none; }
/* Reduced motion: no auto-advance at all, so the chapters stack and are read
   by scrolling like any other section. */
@media (prefers-reduced-motion: reduce) {
  .storyline__track { display: block; transition: none; transform: none !important; }
}

/* Inside the track an act is a panel, not a screen: it stops claiming
   100svh and sizes to the viewport width instead. */
.storyline .act {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  min-height: min(78svh, 680px);
  padding-block: clamp(32px, 6vh, 72px);
  padding-bottom: 72px;
}
/* Copy fades with the slide so the chapter never sits blank while the
   camera is still travelling. */
.storyline .act__box {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.storyline .act.is-live .act__box,
.storyline .act.is-leaving .act__box {
  opacity: 1;
  transform: none;
}
.storyline .act.is-leaving .act__box {
  opacity: 0;
  transform: translateY(-8px);
  transition-duration: .35s;
  transition-delay: 0s;
}
.storyline .act.is-live .act__box { transition-delay: .22s; }
.storyline .act.is-live { z-index: 1; }
.storyline .act.is-leaving { z-index: 2; }
/* Only reachable panels stay in the a11y tree — live + the one leaving. */
.storyline .act:not(.is-live):not(.is-leaving) { visibility: hidden; }
.storyline .act[inert] { pointer-events: none; }

.storyline__bar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px var(--gutter) 28px;
  max-width: var(--maxw); margin-inline: auto;
}
.storyline__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; height: 34px; padding: 0 4px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-mid); border: 0; border-radius: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.storyline__btn:hover,
.storyline__btn:focus-visible {
  color: var(--fg-hi);
  border-bottom-color: var(--teal-700);
}
.storyline__btn:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 4px; }
.storyline__btn span[aria-hidden] {
  font-size: .85em; letter-spacing: 0; opacity: .7;
}
.storyline__progress {
  flex: 1; height: 1px; min-width: 48px;
  background: var(--rule);
  position: relative; overflow: hidden;
}
.storyline__fill {
  display: block; height: 100%; width: 0%;
  background: var(--teal-700);
  transform-origin: left center;
  transition: width 1.05s cubic-bezier(.22, 1, .36, 1);
}
.storyline__count {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  color: var(--fg-low); flex: none; min-width: 4.5ch; text-align: right;
  font-variant-numeric: tabular-nums;
}
.storyline__count-sep { margin-inline: .15em; opacity: .55; }
.storyline__cue {
  margin-top: 28px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-mid);
}
.storyline__cue a { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.storyline__cue a:hover { color: var(--accent-on-ground); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 760px) {
  .storyline .act { min-height: min(86svh, 620px); }
}


/* ---------- 44. Navigation groups ----------------------------------------
   Two of the primary items open a short list. Hover and keyboard focus both
   open it; a click toggles it for touch. The list is plain links — no mega
   menu, no imagery.
   ---------------------------------------------------------------------- */
.nav__grp { position: relative; }
.nav__top {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .93rem; font-weight: 450; letter-spacing: -.008em; color: var(--fg-mid);
  padding: 6px 0; transition: color .3s var(--ease);
}
.nav__top::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor;
  transform: rotate(45deg); opacity: .6; transition: transform .3s var(--ease);
}
.nav__top:hover, .nav__grp.is-current .nav__top, .nav__grp.is-open .nav__top { color: var(--fg-hi); }
.nav__grp.is-current .nav__top { box-shadow: inset 0 -1px 0 var(--teal); }
.nav__menu {
  position: absolute; top: calc(100% + 14px); left: -20px; min-width: 250px;
  display: grid; gap: 0; padding: 10px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: 0 24px 50px -30px rgba(8, 17, 28, .45);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .25s var(--ease), transform .3s var(--ease-out), visibility .25s;
}
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }  /* hover bridge */
.nav__grp:hover .nav__menu, .nav__grp:focus-within .nav__menu, .nav__grp.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__grp.is-closed .nav__menu { opacity: 0; visibility: hidden; }
.nav__menu a { padding: 9px 12px; border-radius: var(--r-sm); font-size: .9rem; color: var(--fg-mid); }
.nav__menu a::after { display: none; }
.nav__menu a:hover, .nav__menu a:focus-visible { background: var(--paper-100); color: var(--fg-hi); }
.nav__menu a[aria-current="page"] { color: var(--accent-on-ground); background: rgba(6, 140, 135, .07); }
.nav__menu small { display: block; font-size: .76rem; color: var(--fg-low); margin-top: 1px; }

.mnav__grp { padding: 16px 0 10px; border-bottom: 1px solid var(--rule); }
.mnav__grp p { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-low); margin-bottom: 6px; }
.mnav__grp a { display: block; padding: 7px 0; font-size: 1.08rem; font-weight: 500; color: var(--fg-hi); }
.mnav__grp a[aria-current="page"] { color: var(--accent-on-ground); }
.mnav a.mnav__link { font-size: clamp(1.4rem, 6vw, 1.9rem); padding: 12px 0; }
@media (max-width: 1180px) and (min-width: 901px) {
  .nav { gap: 16px; }
  .hdr__signin { display: none; }
}

/* ---------- 45. Capability status ----------------------------------------
   Every capability claim on the site carries one of three states, so a
   reader never has to guess which parts ship today.
   ---------------------------------------------------------------------- */
.badge--ok { color: var(--accent-on-ground); border-color: rgba(6, 140, 135, .45); }
.badge--ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-700); }
.badge--part { color: var(--hydro-600); border-color: rgba(10, 75, 140, .35); }
.g-paper .badge--ok, .panel--paper .badge--ok { color: var(--accent-on-ground); border-color: rgba(6, 140, 135, .45); }
.g-paper .badge--part, .panel--paper .badge--part { color: var(--hydro-600); border-color: rgba(10, 75, 140, .35); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.legend .t-xs { margin-right: 4px; }

/* ---------- 46. Capability table -----------------------------------------
   Rows of: what it is · what it does · state. Used for protocols, layers and
   anything a technical buyer will want to scan rather than read.
   ---------------------------------------------------------------------- */
.spec { display: grid; border-top: 1px solid var(--rule); container-type: inline-size; }
.spec__row {
  display: grid; grid-template-columns: minmax(8rem, .8fr) minmax(0, 1.7fr) max-content;
  gap: 8px clamp(18px, 3vw, 44px); align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
}
.spec__row > :first-child { font-weight: 600; letter-spacing: -.012em; color: var(--fg-hi); }
.spec__row > :nth-child(2) { font-size: .94rem; color: var(--fg-mid); }
.spec__row > :last-child { justify-self: start; }
.spec__row--head { padding: 10px 0; }
.spec__row--head > * { font-family: var(--mono); font-size: .66rem !important; font-weight: 500 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-low) !important; }
@container (max-width: 600px) {
  .spec__row { grid-template-columns: minmax(0, 1fr) max-content; gap: 6px 16px; }
  .spec__row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .spec__row--head { display: none; }
}

/* ---------- 47. The layer ladder -----------------------------------------
   Where intelligence sits in a renewable plant, from cell to market. The
   rungs Myto spans are drawn with a continuous rail down the left.
   ---------------------------------------------------------------------- */
.ladder { display: grid; gap: 0; position: relative; }
.ladder__rung {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) max-content;
  gap: 6px clamp(16px, 2.6vw, 40px); align-items: baseline;
  padding: 18px 0 18px 18px; border-top: 1px solid var(--rule); position: relative;
}
.ladder__rung:last-child { border-bottom: 1px solid var(--rule); }
.ladder__rung h3 { font-size: 1.06rem; letter-spacing: -.014em; }
.ladder__rung p { font-size: .92rem; color: var(--fg-mid); }
.ladder__rung.is-myto { background: linear-gradient(90deg, rgba(6, 140, 135, .07), transparent 70%); }
.ladder__rung.is-myto::before {
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--teal-700);
}
@media (max-width: 760px) {
  .ladder__rung { grid-template-columns: minmax(0, 1fr) max-content; }
  .ladder__rung p { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- 48. Single-line energy flow ----------------------------------
   A conceptual single-line diagram, animated from simulated values. The
   dashes run in the direction power flows and their pace follows the MW.
   ---------------------------------------------------------------------- */
.sld { width: 100%; height: auto; display: block; overflow: visible; }
.sld .bus { stroke: var(--t-ink-hi); stroke-width: 3; stroke-linecap: round; }
.sld .feeder { stroke: rgba(8, 17, 28, .28); stroke-width: 1.4; fill: none; }
.sld .flowdash {
  stroke: var(--teal-700); stroke-width: 2.6; fill: none; stroke-linecap: round;
  stroke-dasharray: 3 14; opacity: 0; transition: opacity .6s var(--ease);
}
.sld .flowdash.on { opacity: 1; }
.sld .flowdash.imp { stroke: var(--hydro-600); }
.sld .ctl { stroke: var(--teal-700); stroke-width: 1; stroke-dasharray: 2 5; fill: none; opacity: .55; }
.sld .node { fill: var(--paper); stroke: rgba(8, 17, 28, .32); stroke-width: 1.2; }
.sld .node--core { fill: rgba(6, 140, 135, .08); stroke: var(--teal-700); }
.sld .ico { stroke: var(--teal-800); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sld text { font-family: var(--mono); fill: var(--t-ink-mid); }
.sld .lab { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; fill: var(--t-ink-hi); font-weight: 500; }
.sld .val { font-size: 15px; font-weight: 500; fill: var(--t-ink-hi); font-variant-numeric: tabular-nums; }
.sld .sub { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--t-ink-low); }
.sld .core { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; fill: var(--teal-800); font-weight: 600; }
.sldctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 22px; align-items: center; margin-top: 18px; }
.sldctl output { font-family: var(--mono); font-size: .86rem; color: var(--fg-hi); font-variant-numeric: tabular-nums; min-width: 5ch; }
.sldctl input[type="range"] { width: 100%; accent-color: var(--teal-700); }
.sldctl__state { grid-column: 1 / -1; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-on-ground); }
.sldctl .btn { padding: 8px 14px; font-size: .8rem; }
@media (max-width: 700px) {
  .sldctl { grid-template-columns: auto minmax(0, 1fr); }
  .sldctl__state { grid-column: 1 / -1; }
}

/* ---------- 49. Flows of arbitrary length --------------------------------*/
.pipe--n { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
@media (max-width: 1080px) { .pipe--n { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .pipe--n { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pipe__step .badge { margin-top: auto; }

/* ---------- 50. Configurations -------------------------------------------*/
.configs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.configs > * { background: var(--paper); padding: clamp(22px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 10px; }
.configs .chain { gap: 2px 0; }
.configs .chain b { font-size: .68rem; }
.configs .chain b + b::before { width: 14px; margin: 0 7px; }
@media (max-width: 900px) { .configs { grid-template-columns: 1fr; } }

/* ---------- 51. Assessment -----------------------------------------------*/
.assess { display: grid; gap: clamp(26px, 3vw, 40px); }
.assess fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.assess legend { font-weight: 600; font-size: 1.06rem; letter-spacing: -.014em; padding: 0; margin-bottom: 14px; color: var(--fg-hi); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border: 1px solid var(--rule-strong); border-radius: 100px;
  font-size: .9rem; color: var(--fg-mid); background: var(--paper);
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.chips label:hover span { border-color: var(--teal-700); color: var(--fg-hi); }
.chips input:checked + span { background: rgba(6, 140, 135, .1); border-color: var(--teal-700); color: var(--t-ink-hi); font-weight: 500; }
.chips input:checked + span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-700); }
.chips input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.result { border: 1px solid var(--rule); border-left: 2px solid var(--teal-700); border-radius: var(--r-md); background: var(--paper); padding: clamp(24px, 2.6vw, 38px); }
.result[hidden] { display: none; }
.result__list { display: grid; gap: 0; margin-top: 18px; }
.result__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; padding: 16px 0; border-top: 1px solid var(--rule); }
.result__list h3 { font-size: 1.02rem; letter-spacing: -.012em; }
.result__list p { grid-column: 1 / -1; font-size: .92rem; color: var(--fg-mid); }

/* ---------- 52. One intelligence layer ------------------------------------*/
.hub { width: 100%; height: auto; display: block; overflow: visible; }
.hub .asset { fill: var(--paper); stroke: rgba(8, 17, 28, .26); stroke-width: 1.1; }
.hub .plane { fill: rgba(6, 140, 135, .07); stroke: var(--teal-700); stroke-width: 1.2; }
.hub .plane2 { fill: rgba(255, 230, 0, .10); stroke: rgba(107, 93, 0, .5); stroke-width: 1.1; }
.hub .riser { stroke: rgba(6, 140, 135, .55); stroke-width: 1.1; }
.hub .riser--road { stroke: rgba(107, 93, 0, .5); stroke-dasharray: 3 4; }
.hub .pulse { fill: var(--teal-700); }
.hub text { font-family: var(--mono); fill: var(--t-ink-mid); }
.hub .h { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; fill: var(--t-ink-hi); font-weight: 500; }
.hub .s { font-size: 12.5px; letter-spacing: .06em; fill: var(--t-ink-low); }
.hub .c { font-size: 14px; letter-spacing: .16em; text-transform: uppercase; fill: var(--teal-800); font-weight: 600; }
.hub .v { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; fill: var(--volt-800); font-weight: 600; }
.hub .ico { stroke: var(--teal-800); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 53. Small print that belongs next to a claim ----------------- */
.fine { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-low); }
.kicker { font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.35; letter-spacing: -.018em; font-weight: 500; color: var(--fg-hi); max-width: 44ch; }
.q5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.q5 > * { background: var(--paper); padding: clamp(18px, 1.8vw, 26px); display: flex; flex-direction: column; gap: 8px; }
.q5 b { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-on-ground); font-weight: 500; }
.q5 span { font-size: .95rem; color: var(--fg-hi); font-weight: 500; letter-spacing: -.01em; }
@media (max-width: 900px) { .q5 { grid-template-columns: 1fr; } }

/* ---------- 54. Page section nav, drawer groups, stepped assessment ------ */
.pnav {
  position: sticky; top: 76px; z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.pnav__in {
  display: flex; gap: 4px 22px; overflow-x: auto;
  padding-block: 12px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-low);
}
.pnav a { flex: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.pnav a:hover, .pnav a[aria-current="true"] { color: var(--accent-on-ground); border-bottom-color: var(--teal-700); }

.mnav__toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-low); padding: 4px 0 10px;
}
.mnav__toggle::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg); opacity: .7;
  transition: transform .3s var(--ease);
}
.mnav__toggle[aria-expanded="true"]::after { transform: rotate(225deg); }
.mnav__sub { display: none; padding-bottom: 8px; }
.mnav__toggle[aria-expanded="true"] + .mnav__sub { display: block; }
.mnav__cta { margin-bottom: 28px; }

.assess__prog {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-low);
}
.assess__rail { display: flex; gap: 6px; margin-top: 10px; }
.assess__rail i {
  display: block; flex: 1; height: 3px; background: var(--rule);
  border-radius: 100px; font-style: normal;
}
.assess__rail i.is-on { background: var(--teal-700); }
.assess fieldset { display: none; }
.assess fieldset.is-on { display: grid; }
.assess fieldset.is-need legend { color: var(--teal-800); }
.assess fieldset.is-need .chips span { border-color: var(--teal-700); }
.assess__nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.spec--quiet { opacity: .78; }
.spec--quiet .spec__row { padding: 12px 0; }

@media (max-width: 900px) {
  .reveal:has(> .hub), .reveal:has(> .sld), .stack3d__wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  svg.hub, svg.sld, svg.stack3d { min-width: 760px; }
  .storyline__bar { gap: 12px; }
  .storyline__btn { letter-spacing: .1em; }
  .pnav { top: 76px; }
}