/* ============================================================================
   Praana Labs — figures, hero, instrument panels
   ========================================================================= */

/* ------------------------------------------------------------------- hero */

.hero{
  position:relative;
  border-bottom:1px solid var(--rule);
  padding-block:clamp(48px,7.5vw,104px) clamp(40px,5.5vw,72px);
  overflow:hidden;
  /* identical to .phead. Top-aligned, not centred: centring makes the page
     with less content start lower, which reads as a smaller header. */
  display:flex; flex-direction:column; justify-content:flex-start;
  min-height:clamp(340px,50vw,680px);
}
.hero > .wrap{ width:100% }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(to right, transparent 0 calc(100%/12 - 1px), var(--rule-2) calc(100%/12 - 1px) calc(100%/12));
  opacity:.55; pointer-events:none;
  mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent);
}
@media (max-width:900px){ .hero::before{ display:none } }
.hero > .wrap{ position:relative }

.hero-kicker{
  display:inline-flex; align-items:center; gap:.8em;
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--rule-hard); padding:7px 12px; margin-bottom:clamp(24px,3vw,38px);
  background:var(--card);
}
.hero-kicker .dot{ width:6px; height:6px; background:var(--green); border-radius:50%; flex:0 0 auto; animation:pulse 2.6s var(--ease) infinite }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.28} }
@media (prefers-reduced-motion:reduce){ .hero-kicker .dot{ animation:none } }

.hero h1{ max-width:19ch }
.hero .lede{ max-width:56ch; margin-top:clamp(22px,2.8vw,34px) }

/* The mission statement carries the hero, and it is the page's h1, so it has
   to out-specify the heading rules while still reading as prose. */
.hero h1.mission,
.mission{
  margin:0; font-family:var(--serif); font-weight:380;
  font-size:clamp(1.22rem,2.05vw,1.86rem); line-height:1.46;
  letter-spacing:0; color:var(--ink-2);
  max-width:56ch; text-wrap:pretty;
}
.mission b{ color:var(--ink); font-weight:500 }

.hero-meta{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
  margin-top:clamp(40px,5vw,68px);
}
.hero-meta > div{ background:var(--paper); padding:clamp(16px,2vw,22px) }
.hero-meta .v{ font-size:clamp(1.35rem,2.1vw,1.85rem); font-weight:600; letter-spacing:-.03em; line-height:1 }
.hero-meta .l{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:9px; line-height:1.5 }
@media (max-width:760px){ .hero-meta{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ------------------------------------------------------ instrument panel */

.pane{
  background:var(--pane); color:var(--pane-ink);
  border:1px solid var(--pane); position:relative;
}
.pane-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--pane-rule);
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--pane-ink-3);
}
.pane-head .live{ display:inline-flex; align-items:center; gap:.6em; color:var(--pane-green) }
.pane-head .live i{ width:5px; height:5px; background:var(--pane-green); border-radius:50%; display:block; animation:pulse 2.2s var(--ease) infinite }
@media (prefers-reduced-motion:reduce){ .pane-head .live i{ animation:none } }
.pane-body{ padding:clamp(16px,2.2vw,26px) }
.pane figcaption{ padding:12px 16px; border-top:1px solid var(--pane-rule); font-family:var(--mono); font-size:var(--t-mono); color:var(--pane-ink-3); line-height:1.6; letter-spacing:.02em }

.pane canvas{ width:100%; display:block }

/* ------------------------------------------------------------ scale bars */

.barset{ display:grid; gap:clamp(16px,2vw,24px) }
.bar-l{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:8px }
.bar-l .t{ font-size:var(--t-sm); color:var(--ink-2) }
.dark .bar-l .t{ color:var(--pane-ink-2) }
.bar-l .v{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.06em; color:var(--ink); white-space:nowrap }
.dark .bar-l .v{ color:var(--pane-ink) }
.bar-t{ height:22px; background:var(--paper-3); position:relative; overflow:hidden }
.dark .bar-t{ background:var(--pane-2) }
.bar-f{ position:absolute; inset:0 auto 0 0; width:0; min-width:0; background:var(--navy); transition:width 1.3s var(--ease) }
.bar-f.sliver{ min-width:4px }
.bar-note{
  position:absolute; inset:0 auto 0 14px; display:flex; align-items:center;
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--rust); pointer-events:none;
}
.bar-note::before{ content:""; width:26px; height:1px; background:var(--rust); margin-right:10px; display:block }
.dark .bar-note{ color:var(--pane-rust) }
.dark .bar-note::before{ background:var(--pane-rust) }
.dark .bar-f{ background:var(--pane-blue) }
.bar-f.r{ background:var(--rust) }
.dark .bar-f.r{ background:var(--pane-rust) }
.bar-f.g{ background:var(--green) }
.dark .bar-f.g{ background:var(--pane-green) }

/* ------------------------------------------------------------- split fig */

.splitfig{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--pane-rule) }
.splitfig > div{ background:var(--pane); padding:clamp(18px,2.4vw,28px) }
@media (max-width:760px){ .splitfig{ grid-template-columns:1fr } }

/* ------------------------------------------------------------------- duo
   Two passes on the same return, side by side. The left column says what
   the capture holds; the right says whether it is true. The mirroring is
   the argument, so both columns keep the same shape.
   ---------------------------------------------------------------------- */

.duo{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule) }
@media (max-width:820px){ .duo{ grid-template-columns:1fr } }

.duocol{ background:var(--card); padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; gap:clamp(20px,2.4vw,30px) }
.duocol > header{ display:flex; flex-direction:column; gap:6px; padding-bottom:18px; border-bottom:1px solid var(--rule-2) }
.duocol > header .k{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.17em; text-transform:uppercase; color:var(--rust) }
.duocol > header .q{ font-family:var(--serif); font-size:1.12rem; color:var(--ink-2); font-weight:380 }
.duocol.proof > header .k{ color:var(--green) }

.duoitem{ display:flex; flex-direction:column; gap:5px }
.duoitem b{
  font-family:var(--sans); font-weight:600; letter-spacing:-.012em;
  font-size:clamp(1.42rem,2.5vw,1.95rem); line-height:1.08; color:var(--ink);
}
.duoitem p{ margin:0; font-family:var(--serif); font-size:1rem; font-weight:380; line-height:1.5; color:var(--ink-2); max-width:38ch }

/* the three outcomes, given colour instead of a footnote */
.verdicts{ display:flex; gap:22px; flex-wrap:wrap; margin-top:auto; padding-top:20px; border-top:1px solid var(--rule-2) }
.verdicts span{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
.verdicts i{ width:9px; height:9px; display:block }
.verdicts .pass i{ background:var(--green) }
.verdicts .fail i{ background:var(--rust) }
.verdicts .none i{ background:var(--amber) }

/* ── the loop, compressed ─────────────────────────────────────────────
   The three products are one loop. Said as a strip under the cards rather
   than as another figure, so it costs almost no vertical space.
   ------------------------------------------------------------------- */

.loopstrip{
  position:relative; margin-top:1px;
  border:1px solid var(--rule); border-top:0; background:var(--card);
  padding:14px 16px 30px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.13em; text-transform:uppercase;
}
.loopstrip .ls-n{ color:var(--ink); font-weight:500 }
.loopstrip .ls-a{ color:var(--ink-4) }
.loopstrip .ls-back{
  position:absolute; left:16px; right:16px; bottom:9px;
  display:flex; align-items:center; gap:9px;
  color:var(--rust); letter-spacing:.12em;
}
/* the return leg: an arrowhead at the left, then a rule running back */
.loopstrip .ls-back::before{
  content:""; flex:0 0 auto; width:0; height:0;
  border:3.5px solid transparent; border-right-color:var(--rust);
}
.loopstrip .ls-back::after{
  content:""; flex:1 1 auto; height:1px; background:var(--rust); opacity:.45;
}
@media (max-width:560px){
  .loopstrip{ font-size:calc(var(--t-mono) * .94); gap:7px }
}

/* --------------------------------------------------------------- product */

.prodgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule) }
@media (max-width:900px){ .prodgrid{ grid-template-columns:1fr } }
/* stacked, for when the grid sits in a half-width column beside a figure */
.prodgrid.col{ grid-template-columns:1fr }
.prodgrid.col .prod{ padding:clamp(18px,2vw,26px); gap:9px }
.prodgrid.col .prod h3{ font-size:1.18rem }
.prod{
  background:var(--card); padding:clamp(24px,3vw,38px);
  display:flex; flex-direction:column; gap:14px;
  border-top:2px solid transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.prod:hover{ background:var(--paper); border-top-color:var(--rust) }
.prod .pn{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.17em; text-transform:uppercase; color:var(--rust) }
.prod h3{ font-size:1.32rem }
.prod .sub{ font-family:var(--serif); font-size:1rem; color:var(--ink-2); line-height:1.55; font-weight:380 }
.prod ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; margin-top:auto; padding-top:16px; border-top:1px solid var(--rule-2) }
.prod li{ font-size:var(--t-sm); color:var(--ink-2); padding-left:16px; position:relative; line-height:1.5 }
.prod li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:var(--ink-4) }

.mapwrap{ position:relative }

/* ------------------------------------------------------------ tier cards */

.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule) }
@media (max-width:980px){ .tiers{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .tiers{ grid-template-columns:1fr } }
.tier{ background:var(--card); padding:clamp(18px,2.2vw,26px); display:flex; flex-direction:column; gap:11px }
.tier .th{ display:flex; align-items:baseline; gap:11px }
.tier .tid{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em; color:#fff; background:var(--navy); padding:3px 7px }
.tier h4{ font-size:1.02rem; font-weight:600; letter-spacing:-.012em }
.tier p{ font-size:var(--t-sm); color:var(--ink-2); line-height:1.55; margin:0 }
.tier .who{ margin-top:auto; padding-top:12px; border-top:1px solid var(--rule-2); font-family:var(--mono); font-size:var(--t-mono); color:var(--ink-3); line-height:1.7; letter-spacing:.03em }

/* --------------------------------------------------------- supply ladder */

.ladder{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:clamp(24px,3vw,36px) }
@media (max-width:760px){ .ladder{ grid-template-columns:repeat(2,1fr) } }
.rung{ background:var(--card); padding:clamp(18px,2.2vw,26px); position:relative }
.rung .s{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) }
.rung h4{ font-size:1.06rem; margin:10px 0 8px }
.rung p{ font-size:var(--t-sm); color:var(--ink-2); margin:0; line-height:1.5 }
.rung.own{ background:var(--navy); color:#fff }
.rung.own .s{ color:rgba(255,255,255,.5) }
.rung.own p{ color:rgba(255,255,255,.78) }
.ladder-scale{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-top:12px }

/* -------------------------------------------------------------- casework */

.case{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:1px; background:var(--rule); border:1px solid var(--rule);
}
@media (max-width:900px){ .case{ grid-template-columns:1fr } }
.case > .cx{ background:var(--card); padding:clamp(24px,3.2vw,44px) }
.case > .cf{ background:var(--pane); color:var(--pane-ink); padding:0; display:flex; flex-direction:column }
.case .status{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.15em; text-transform:uppercase; color:var(--green); margin-bottom:18px }
.case .status i{ width:5px; height:5px; border-radius:50%; background:var(--green); display:block }
.case .status.scoping{ color:var(--amber) } .case .status.scoping i{ background:var(--amber) }
.case h3{ font-size:clamp(1.3rem,2vw,1.75rem); margin-bottom:14px }
.case .kv{ display:grid; grid-template-columns:max-content 1fr; gap:10px 22px; margin-top:24px; padding-top:18px; border-top:1px solid var(--rule-2); font-size:var(--t-sm) }
.case .kv dt{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3) }
.case .kv dd{ margin:0; color:var(--ink-2) }

.metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--pane-rule); margin-top:auto }
.metrics > div{ background:var(--pane); padding:clamp(14px,1.8vw,20px) }
.metrics .v{ font-size:clamp(1.25rem,2vw,1.7rem); font-weight:600; letter-spacing:-.03em; color:var(--pane-ink); line-height:1 }
.metrics .l{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--pane-ink-3); margin-top:8px; line-height:1.5 }

/* -------------------------------------------------------------- verdict */

.verdict{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--pane-rule) }
@media (max-width:700px){ .verdict{ grid-template-columns:1fr } }
.verdict > div{ background:var(--pane); padding:clamp(16px,2vw,22px) }
.verdict .lbl{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--pane-ink-3) }
.verdict .sc{ font-size:clamp(1.4rem,2.2vw,1.9rem); font-weight:600; letter-spacing:-.035em; margin-top:10px; line-height:1 }
.verdict .sc.ok{ color:var(--pane-green) }
.verdict .sc.no{ color:var(--pane-rust) }
.verdict .n{ font-family:var(--mono); font-size:var(--t-mono); color:var(--pane-ink-3); margin-top:9px; line-height:1.6; letter-spacing:.02em }

/* ---------------------------------------------------------------- people */

.people{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule) }
@media (max-width:900px){ .people{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .people{ grid-template-columns:1fr } }
.person{ background:var(--card); padding:clamp(20px,2.4vw,28px) }
.person .rl{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--rust); margin-bottom:12px }
.person h3{ font-size:1.06rem; margin-bottom:10px }
.person p{ font-size:var(--t-sm); color:var(--ink-2); line-height:1.55; margin-bottom:14px }
.person .cv{ font-family:var(--mono); font-size:var(--t-mono); color:var(--ink-3); letter-spacing:.06em; line-height:1.7 }

/* ------------------------------------------------------------ contact fm */

.contact-card{
  background:var(--card); border:1px solid var(--rule); padding:clamp(26px,3.4vw,46px);
  display:flex; flex-direction:column; height:100%;
}
.contact-card h3{ font-size:clamp(1.2rem,1.8vw,1.55rem); margin-bottom:14px }
.contact-card .prose{ font-size:.98rem }
.contact-card .btnrow{ margin-top:auto; padding-top:26px }

/* -------------------------------------------------------- section index */

.sindex{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.sindex a{
  text-decoration:none; font-family:var(--mono); font-size:var(--t-mono);
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
  display:flex; gap:12px; padding:5px 0; border-bottom:1px solid transparent;
  transition:color .18s var(--ease);
}
.sindex a:hover{ color:var(--ink) }
.sindex a.on{ color:var(--ink) }
.sindex a.on .i{ color:var(--rust) }
.sindex .i{ color:var(--ink-3) }

/* ------------------------------------------------------------- quotebar */

.quote{
  border-left:2px solid var(--ink); padding-left:clamp(18px,2.4vw,30px);
  font-family:var(--serif); font-size:clamp(1.15rem,1.9vw,1.55rem); line-height:1.4;
  font-weight:380; letter-spacing:-.008em; max-width:44ch;
}
.dark .quote{ border-left-color:var(--pane-green) }

/* --------------------------------------------------------------- callout */

.callout{
  background:var(--navy); color:#fff; padding:clamp(22px,3vw,34px) clamp(22px,3.4vw,42px);
  display:flex; gap:clamp(18px,3vw,40px); align-items:center; flex-wrap:wrap;
  justify-content:space-between;
}
.callout p{ margin:0; font-family:var(--serif); font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.42; font-weight:380; max-width:62ch }
.callout .btn{ background:#fff; color:var(--navy); border-color:#fff; flex:0 0 auto }
.callout .btn:hover{ background:var(--rust); border-color:var(--rust); color:#fff }

/* ------------------------------------------------------ statement band
   A full-bleed chapter break. One sentence, very large, nothing else.
   Grandeur without word count.
---------------------------------------------------------------------- */

.statement{
  background:var(--band-deep); color:var(--pane-ink);
  padding-block:clamp(72px,11vw,168px);
  border-top:1px solid var(--band-deep); position:relative; overflow:hidden;
}
.statement::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(to right, var(--pane-green), transparent 45%);
  opacity:.6;
}
.statement .st{ text-wrap:normal;
  font-size:clamp(1.85rem,4.4vw,4rem);
  font-weight:600; letter-spacing:-.035em; line-height:1.03;
  max-width:20ch; margin:0;
}
.statement .st em{
  font-style:normal; font-family:var(--serif); font-weight:400; letter-spacing:-.012em;
  color:var(--pane-green);
}
.statement .sub{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.17em; text-transform:uppercase;
  color:var(--pane-ink-3); margin:0 0 clamp(24px,3vw,42px);
}
.statement .after{
  font-family:var(--serif); font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.55; font-weight:380;
  color:var(--pane-ink-2); max-width:46ch; margin:clamp(24px,3vw,40px) 0 0;
}

/* light variant */
.statement.light{ background:var(--paper-2); color:var(--ink); border-top:1px solid var(--rule) }
.statement.light .sub{ color:var(--ink-3) }
.statement.light .st em{ color:var(--rust) }
.statement.light .after{ color:var(--ink-2) }
.statement.light::after{ background:linear-gradient(to right, var(--rust), transparent 45%) }

/* ------------------------------------------------------------ page head
   Interior-page hero: quieter than the homepage, still substantial.
---------------------------------------------------------------------- */

/* Every interior page opens at the same height, whether its headline runs to
   one line or three, so moving between tabs does not make the site jump. */
.phead{
  padding-block:clamp(48px,7.5vw,104px) clamp(44px,5.4vw,74px);
  border-bottom:1px solid var(--rule);
  display:flex; flex-direction:column; justify-content:flex-start;
  /* Same height and the same start position as the hero, so the header is
     identical on every tab regardless of how much copy each one carries. */
  min-height:clamp(340px,50vw,680px);
}
/* the wrap carries auto inline margins, which switch off flex stretch and
   collapse it to fit-content. Hold it at full width so it stays left-aligned. */
.phead > .wrap{ width:100% }
.hero + .band, .phead + .band, .hero + .statement, .phead + .statement{ border-top:0 }
.phead h1{ max-width:26ch }
.phead .lede{ max-width:50ch }
@media (max-width:700px){ .phead{ min-height:0 } }

/* ------------------------------------------------------------- next tab
   A page should hand the reader to the next one rather than dead-end at the
   footer. Full-bleed row, so it is impossible to scroll past by accident.
   ---------------------------------------------------------------------- */

.nextup{
  display:block; border-top:1px solid var(--rule);
  background:var(--paper-2); text-decoration:none; color:inherit;
  transition:background .22s var(--ease);
}
.nextup:hover{ background:var(--paper-3) }
.nextup .wrap{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-block:clamp(30px,4vw,56px);
}
.nextup .k{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.17em;
  text-transform:uppercase; color:var(--rust); display:block; margin-bottom:10px;
}
.nextup .t{
  font-size:clamp(1.5rem,3vw,2.4rem); font-weight:600; letter-spacing:-.02em;
  line-height:1.1; display:block; max-width:22ch;
}
.nextup .s{
  font-family:var(--serif); font-weight:380; color:var(--ink-2);
  font-size:1.02rem; margin-top:10px; display:block; max-width:46ch;
}
.nextup .go{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--rust); white-space:nowrap;
  border-bottom:1px solid currentColor; padding-bottom:3px;
}
.nextup:hover .go{ color:var(--ink) }

/* ── three doors ──────────────────────────────────────────────────────
   Three audiences, three cards of equal weight. The big number gives the
   section graphic presence; the list pins to the bottom so the cards line
   up however long the prose runs.
   ------------------------------------------------------------------- */

.doors{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
}
@media (max-width:900px){ .doors{ grid-template-columns:1fr } }

.door{
  background:var(--card); padding:clamp(26px,3vw,42px);
  display:flex; flex-direction:column;
  border-top:2px solid transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.door:hover{ background:var(--paper); border-top-color:var(--rust) }

.door .dn{
  font-family:var(--mono); font-weight:500;
  font-size:clamp(2.6rem,4.4vw,3.9rem); line-height:.9;
  color:var(--rule-hard); letter-spacing:-.03em; margin-bottom:20px;
}
.door:hover .dn{ color:var(--rust) }
.door .dk{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.17em;
  text-transform:uppercase; color:var(--rust); font-weight:600; margin-bottom:10px;
}
.door h3{ font-size:clamp(1.28rem,1.9vw,1.62rem); letter-spacing:-.018em; line-height:1.18 }
.door p{
  font-family:var(--serif); font-size:1.02rem; line-height:1.58; font-weight:380;
  color:var(--ink-2); margin:12px 0 0; max-width:40ch;
}

.door .dl{
  list-style:none; margin:22px 0 0; padding:18px 0 0;
  border-top:1px solid var(--rule-2);
  display:grid; gap:9px; margin-top:auto;
}
.door .dl li{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.06em;
  color:var(--ink-2); padding-left:16px; position:relative; line-height:1.5;
}
.door .dl li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:1px; background:var(--rust);
}
.door .dgo{
  margin-top:20px; text-decoration:none; align-self:flex-start;
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--rust);
  border-bottom:1px solid currentColor; padding-bottom:3px;
}
.door .dgo:hover{ color:var(--ink) }

/* ------------------------------------------------------- segment blocks */

.segments{ border-top:1px solid var(--ink) }
.segment{
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(20px,4vw,60px);
  padding:clamp(28px,3.6vw,48px) 0;
  border-bottom:1px solid var(--rule);
}
@media (max-width:820px){ .segment{ grid-template-columns:1fr; gap:16px } }
.segment .sh{ display:flex; flex-direction:column; gap:12px }
.segment .sk{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--rust); font-weight:600 }
.segment h2, .segment h3{ font-size:clamp(1.2rem,1.8vw,1.55rem); letter-spacing:-.016em; line-height:1.2 }
.segment .sb p{ font-family:var(--serif); font-size:1.03rem; line-height:1.6; font-weight:380; color:var(--ink-2); margin:0 0 14px; max-width:68ch }
.segment .want{
  display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--rule-2);
}

/* -------------------------------------------------------------- logos-ish */

.partners{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule) }
@media (max-width:820px){ .partners{ grid-template-columns:1fr } }
.partner{ background:var(--card); padding:clamp(22px,2.8vw,34px) }
.partner .pt{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px }
.partner h3{ font-size:1.18rem; margin-bottom:10px; letter-spacing:-.018em }
.partner p{ font-size:var(--t-sm); color:var(--ink-2); line-height:1.55; margin:0 }

/* --------------------------------------------------------------- form */

.field{ display:grid; gap:7px; margin-bottom:16px }
.field label{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) }
.field input,.field textarea,.field select{
  font-family:var(--sans); font-size:.95rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule-hard); padding:11px 13px; border-radius:0;
  width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:2px solid var(--rust); outline-offset:-2px; background:#fff }
.field textarea{ min-height:118px; resize:vertical }

/* ---------------------------------------------------------- spectrum
   Nine classes of capture, read left to right as one continuum.
------------------------------------------------------------------- */

.spectrum{
  display:grid; grid-template-columns:repeat(9,1fr);
  gap:1px; background:var(--rule); border:1px solid var(--rule);
}
@media (max-width:1000px){ .spectrum{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:520px){ .spectrum{ grid-template-columns:repeat(2,1fr) } }

.sp{
  background:var(--card); padding:16px 14px 18px;
  display:flex; flex-direction:column; gap:9px; min-height:132px;
  position:relative; transition:background .2s var(--ease);
}
.sp:hover{ background:var(--paper-2) }
.sp .t{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em; color:var(--ink-3) }
.sp .n{ font-size:.92rem; font-weight:600; letter-spacing:-.012em; line-height:1.22 }
.sp .g{ font-size:var(--t-xs); color:var(--ink-3); line-height:1.45; margin-top:auto }
.sp[data-w="1"]{ box-shadow:inset 0 -3px 0 rgba(20,22,26,.14) }
.sp[data-w="2"]{ box-shadow:inset 0 -3px 0 rgba(20,22,26,.32) }
.sp[data-w="3"]{ box-shadow:inset 0 -3px 0 rgba(20,22,26,.52) }
.sp[data-w="4"]{ box-shadow:inset 0 -3px 0 rgba(20,22,26,.74) }
.sp.overlay{ background:var(--paper-2) }
.sp.overlay .n{ color:var(--amber) }

.spectrum-scale{
  display:flex; justify-content:space-between; gap:16px;
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-top:12px;
}

/* ------------------------------------------------------- hero index */

.hero-index{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink) }
.hero-index a{
  display:grid; grid-template-columns:auto 1fr; gap:2px 14px;
  padding:13px 0; border-bottom:1px solid var(--rule);
  text-decoration:none; transition:background .18s var(--ease);
}
.hero-index a:hover{ background:linear-gradient(to right, rgba(0,0,0,.02), transparent) }
.hero-index .i{ grid-row:1/3; font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em; color:var(--ink-3); padding-top:.25em }
.hero-index .t{ font-size:.94rem; font-weight:600; letter-spacing:-.014em; line-height:1.2 }
.hero-index a:hover .t{ color:var(--rust) }
.hero-index .d{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.08em; color:var(--ink-3); line-height:1.5 }
@media (max-width:900px){ .hero-index{ margin-top:22px } }

/* ====================================================================
   Stepped diagram — a pinned figure with the steps scrolling beside it
   ================================================================= */

.roll{ position:relative }

.roll-grid{
  display:grid; grid-template-columns:minmax(0,2.45fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,44px); align-items:start;
}
@media (max-width:900px){ .roll-grid{ grid-template-columns:1fr; gap:0 } }

/* full-width variant: the figure pins across the page, steps scroll below */
.roll.wide{ display:block }
.roll.wide .roll-steps{ margin-top:clamp(16px,2.4vw,30px) }
.roll.wide .roll-step{ min-height:34vh; max-width:62ch }
@media (max-width:900px){ .roll.wide .roll-step{ min-height:0 } }

/* flat variant: figure above, the beats in a row beneath. No pinning, no
   scroll-jacking — the section is as tall as its content and no taller. */
.roll.flat{ display:block }
.roll.flat .roll-fig{ position:static }
.roll.flat .roll-steps{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--pane-rule);
  border:1px solid var(--pane-rule); border-top:0;
}
.roll.flat .roll-step{
  min-height:0; opacity:1; border-top:0; justify-content:flex-start;
  padding:clamp(20px,2.2vw,28px);
  background:var(--band-deep); cursor:pointer;
  transition:background .22s var(--ease);
}
.roll.flat .roll-step:hover,
.roll.flat .roll-step.on{ background:var(--band-deep-2) }
.roll.flat .roll-step h3{ font-size:clamp(1.02rem,1.35vw,1.22rem); margin-bottom:9px }
.roll.flat .roll-step p{ font-size:.95rem; max-width:34ch }
@media (max-width:900px){
  .roll.flat .roll-steps{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:560px){
  .roll.flat .roll-steps{ grid-template-columns:1fr }
}

.roll-fig{ position:sticky; top:calc(var(--nav-h) + 22px) }
@media (max-width:900px){
  .roll-fig{ top:var(--nav-h); z-index:20; padding-block:10px 14px; background:var(--paper-2) }
  .band:not(.tint) .roll-fig{ background:var(--paper) }
  .band.dark .roll-fig{ background:var(--pane) }
}

.stepdots{ display:flex; gap:4px; align-items:center }
.stepdots .sd{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.08em;
  background:transparent; border:1px solid var(--pane-rule); color:var(--pane-ink-3);
  padding:3px 6px; cursor:pointer; line-height:1;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.stepdots .sd:hover{ color:var(--pane-ink); border-color:var(--pane-ink-3) }
.stepdots .sd.on{ background:var(--pane-green); border-color:var(--pane-green); color:var(--pane) }
.stepdots .sd:focus-visible{ outline:2px solid var(--pane-green); outline-offset:2px }

/* A rail runs the height of the step list and fills to the active beat, so
   there is always a read on how far through the loop you are. */
.roll-steps{ list-style:none; margin:0; padding:0 0 0 30px; position:relative; --roll-p:0 }
.roll-steps::before,
.roll-steps::after{ content:""; position:absolute; left:3px; width:2px; border-radius:2px }
.roll-steps::before{ top:0; bottom:0; background:var(--rule) }
.roll-steps::after{
  top:0; height:calc(var(--roll-p) * 100%);
  background:var(--rust); transition:height .45s var(--ease);
}
.dark .roll-steps::before{ background:var(--pane-rule) }
.dark .roll-steps::after{ background:var(--pane-green) }

.roll-step{
  padding:clamp(18px,2.4vw,26px) 0;
  min-height:44vh; display:flex; flex-direction:column; justify-content:center;
  position:relative;
  opacity:.34; transition:opacity .35s var(--ease);
}
.roll-step.on{ opacity:1 }
/* the marker sits on the rail and fills with its step */
.roll-step::before{
  content:""; position:absolute; left:-32px; top:calc(50% - 4px);
  width:8px; height:8px; border-radius:50%;
  background:var(--paper); border:1px solid var(--rule-hard);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.band.tint .roll-step::before{ background:var(--paper-2) }
.dark .roll-step::before{ background:var(--band-deep); border-color:var(--pane-rule) }
.roll-step.on::before{ background:var(--rust); border-color:var(--rust); transform:scale(1.5) }
.dark .roll-step.on::before{ background:var(--pane-green); border-color:var(--pane-green) }

@media (max-width:900px){
  .roll-step{ min-height:0; padding:22px 0 }
}
@media (prefers-reduced-motion: reduce){
  .roll-step{ opacity:1 }
  .roll-fig{ position:static }
}

.roll-step .rn{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:12px;
}
.dark .roll-step .rn{ color:var(--pane-ink-3) }
.roll-step.on .rn{ color:var(--rust) }
.dark .roll-step.on .rn{ color:var(--pane-green) }
.roll-step h3{ font-size:clamp(1.25rem,2vw,1.7rem); margin-bottom:12px }
.dark .roll-step h3{ color:var(--pane-ink) }
.roll-step p{
  font-family:var(--serif); font-size:1.02rem; line-height:1.58; font-weight:380;
  color:var(--ink-2); margin:0; max-width:44ch;
}
.dark .roll-step p{ color:var(--pane-ink-2) }

/* light variant of the verdict tiles — for the homepage hand-off, where the
   full trace figure belongs to verification.html rather than here */
.verdict.light{ background:var(--rule); border:1px solid var(--rule) }
.verdict.light > div{ background:var(--card) }
.verdict.light .lbl{ color:var(--ink-3) }
.verdict.light .sc.ok{ color:var(--green) }
.verdict.light .sc.no{ color:var(--rust) }
.verdict.light .n{ color:var(--ink-2) }

/* compact programme list — the homepage names what is running and links out */
.proglist{ border-top:1px solid var(--ink) }
.progrow{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) max-content;
  gap:clamp(14px,2.4vw,36px); align-items:baseline;
  padding:clamp(18px,2.4vw,26px) 0; border-bottom:1px solid var(--rule);
}
@media (max-width:760px){
  .progrow{ grid-template-columns:1fr; gap:8px }
  .progrow .pstat{ justify-self:start }
}
.progrow h3{ font-size:clamp(1.02rem,1.4vw,1.2rem) }
.progrow p{ font-size:var(--t-sm); color:var(--ink-2); margin:0; line-height:1.55; max-width:60ch }
.progrow .pstat{
  white-space:nowrap;
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ====================================================================
   Work viewer — a small framed figure with switchable plates.
   Used where the page needs to show the actual output, not describe it.
   ================================================================= */

.viewer{ margin:0; border:1px solid var(--rule); background:var(--card) }
.dark .viewer, .band.dark .viewer{ border-color:var(--pane-rule); background:var(--pane-2) }

.viewer-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:10px 12px; border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3);
}
.dark .viewer-head{ border-bottom-color:var(--pane-rule); color:var(--pane-ink-3) }

.viewer-tabs{ display:flex; gap:4px }
.viewer-tabs button{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase;
  background:transparent; border:1px solid var(--rule-hard); color:var(--ink-3);
  padding:4px 9px; cursor:pointer; line-height:1;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.viewer-tabs button:hover{ color:var(--ink); border-color:var(--ink-3) }
.viewer-tabs button[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.dark .viewer-tabs button{ border-color:var(--pane-rule); color:var(--pane-ink-3) }
.dark .viewer-tabs button:hover{ color:var(--pane-ink); border-color:var(--pane-ink-3) }
.dark .viewer-tabs button[aria-selected="true"]{ background:var(--pane-green); border-color:var(--pane-green); color:var(--pane) }

/* one consistent window, so plates of different aspect sit the same way */
.viewer-stage{
  position:relative; background:var(--paper-2);
  width:100%; height:min(58vh, 520px);
  padding:clamp(10px,1.5vw,18px);
}
@media (max-width:700px){ .viewer-stage{ height:min(52vh, 340px) } }
.dark .viewer-stage{ background:var(--pane) }
.viewer-stage img{
  position:absolute; inset:clamp(10px,1.5vw,18px);
  width:calc(100% - 2*clamp(10px,1.5vw,18px));
  height:calc(100% - 2*clamp(10px,1.5vw,18px));
  object-fit:scale-down; object-position:center;   /* never upscale past native */
  opacity:0; transition:opacity .28s var(--ease); pointer-events:none;
}
.viewer-stage img.on{ opacity:1 }

.viewer figcaption{
  padding:12px 14px; border-top:1px solid var(--rule);
  font-family:var(--serif); font-size:var(--t-sm); line-height:1.55; font-weight:380;
  color:var(--ink-2); max-width:none;
}
.dark .viewer figcaption{ border-top-color:var(--pane-rule); color:var(--pane-ink-2) }
.viewer figcaption b{ font-weight:600; color:var(--ink) }
.dark .viewer figcaption b{ color:var(--pane-ink) }

@media (prefers-reduced-motion: reduce){
  .viewer-stage img{ transition:none }
}

/* ── capability list — the D×T matrix, said in a quarter of the space ── */



/* ── why-now shifts, beside the bars ── */
.shifts{ border-top:1px solid var(--ink) }
.shift{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px;
  padding:14px 0; border-bottom:1px solid var(--rule); align-items:baseline }
.shift .n{ font-family:var(--mono); font-size:var(--t-mono); color:var(--rust); font-weight:600 }
.shift b{ display:block; font-weight:600; letter-spacing:-.01em; margin-bottom:4px }
.shift p{ margin:0; font-size:.95rem; color:var(--ink-2); line-height:1.5 }

/* ── market map, two-column: rows left, classes right ── */
.mmgrid{ align-items:start }
.mmcaps .capfam{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--rust); font-weight:600; margin:12px 0 6px }
.mmcaps .capfam:first-child{ margin-top:0 }
.mmcaps .caprow{
  display:inline-flex; align-items:center;
  padding:6px 11px; margin:0 6px 6px 0;
  border:1px solid var(--rule-hard); border-radius:2px;
  background:var(--card); cursor:default;
}
.mmcaps .caprow b{ font-weight:500; font-size:.85rem; letter-spacing:-.005em; white-space:nowrap }
.mmcaps .caprow:hover,
.mmcaps .caprow.lit{ border-color:var(--rust) }
.mmcaps .caprow .cr{ display:none }        /* the mapping is shown, not printed */
.spectrum.compact{ grid-template-columns:repeat(9,1fr) }
.spectrum.compact .sp{ min-height:0; padding:11px 10px 13px; gap:4px }
.spectrum.compact .sp .g{ display:none }
@media (max-width:900px){ .spectrum.compact{ grid-template-columns:repeat(3,1fr) } }

/* ── the routing board ────────────────────────────────────────────────
   Two columns with a drawn link layer between them: point at a capability
   on the left and the capture classes that can fill it light on the right,
   with the routes themselves drawn in the gutter.
   ------------------------------------------------------------------- */

.router{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) clamp(70px,9vw,150px) minmax(0,1fr);
  align-items:start;
}
.rt-need{ grid-column:1 }
.rt-route{ grid-column:3 }

.rt-links{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1; overflow:visible;
}
.rt-links path{
  fill:none; stroke:var(--rule-hard); stroke-width:1;
  opacity:0; transition:opacity .28s var(--ease), stroke .28s var(--ease);
}
.rt-links path.on{ stroke:var(--rust); stroke-width:1.6; opacity:1 }

.rt-head{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-3);
  margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--rule);
}
.rt-col{ position:relative; z-index:2 }
.rt-need .mmcaps{ display:flex; flex-direction:column; align-items:flex-start }
.rt-need .caprow{ cursor:pointer }

/* Inside the board the classes run down the page, one per row, so they pair
   with the capabilities opposite and the link layer has somewhere to land.
   Nine across in a half-width column overflowed the page. */
.rt-route .spectrum{ grid-template-columns:1fr }
.rt-route .spectrum .sp{
  flex-direction:row; align-items:baseline; gap:12px;
  min-height:0; padding:11px 14px;
}
.rt-route .spectrum .sp .t{ flex:0 0 auto; width:2.2em }
.rt-route .spectrum .sp .n{ flex:1 1 auto; font-size:.9rem }
.rt-route .spectrum .sp .g{ display:none }
.rt-route .spectrum .sp[data-w]{ box-shadow:inset 3px 0 0 rgba(20,22,26,.14) }
.rt-route .spectrum .sp[data-w="2"]{ box-shadow:inset 3px 0 0 rgba(20,22,26,.32) }
.rt-route .spectrum .sp[data-w="3"]{ box-shadow:inset 3px 0 0 rgba(20,22,26,.52) }
.rt-route .spectrum .sp[data-w="4"]{ box-shadow:inset 3px 0 0 rgba(20,22,26,.74) }
/* the gating scale reads top-to-bottom now, not left-to-right */
.rt-route .spectrum-scale{ flex-direction:column; gap:4px; align-items:flex-start }

.rt-readout{
  margin:clamp(20px,2.6vw,30px) 0 0; min-height:1.5em;
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.rt-readout b{ color:var(--ink); font-weight:500 }
.rt-readout i{ color:var(--rust); font-style:normal }

/* stacked: no room for a gutter, so the routes print as chips instead */
@media (max-width:900px){
  .router{ grid-template-columns:1fr; gap:clamp(28px,5vw,44px) }
  .rt-need, .rt-route{ grid-column:1 }
  .rt-links{ display:none }
  .rt-need .caprow .cr{
    display:inline; margin-left:9px; font-family:var(--mono);
    font-size:var(--t-mono); color:var(--ink-3); white-space:normal;
  }
  .rt-need .mmcaps{ align-items:stretch }
  .rt-need .caprow{ display:flex; flex-wrap:wrap; gap:2px 0 }
}

/* ── market map · a capability lights the classes that reach it ── */
.mm .caprow, .mm .sp{ transition:opacity .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease) }
.mm.mm-on .caprow:not(.lit){ opacity:.4 }
.mm.mm-on .sp:not(.lit){ opacity:.32 }
.mm .caprow.lit{ background:var(--rust-soft) }
.mm .caprow.lit .cn{ color:var(--rust) }
.mm .sp.lit{ background:var(--rust-soft); box-shadow:inset 0 -3px 0 var(--rust) }
.mm .caprow:focus-visible{ outline:2px solid var(--rust); outline-offset:2px }
.mm-hint{ margin:clamp(18px,2.6vw,28px) 0 10px; color:var(--ink-3) }
@media (prefers-reduced-motion: reduce){ .mm .caprow, .mm .sp{ transition:none } }

.caplist{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(24px,4vw,56px) }
@media (max-width:760px){ .caplist{ grid-template-columns:1fr } }
.capcol{ border-top:1px solid var(--ink) }
.caprow{
  display:grid; grid-template-columns:38px minmax(0,1fr) max-content;
  gap:12px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--rule);
}
.caprow .cn{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.08em; color:var(--ink-3) }
.caprow b{ font-size:.96rem; font-weight:600; letter-spacing:-.012em }
.caprow .cr{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.08em;
  color:var(--ink-3); text-align:right; white-space:nowrap;
}
@media (max-width:560px){
  .caprow{ grid-template-columns:34px minmax(0,1fr); }
  .caprow .cr{ grid-column:2; text-align:left; white-space:normal }
}

/* ── capability ladder — what you own, and what it opens ── */
.ladder-list{ border-top:1px solid var(--ink) }
@media (max-width:820px){
  .lrung{ grid-template-columns:34px minmax(0,1fr); gap:6px 12px }
}