/* ============ Redstone editorial — light, paper & ink, red accent ============ */
:root{
  color-scheme: light;
  /* Redstone brand palette: red #EF1934 · white · #F2F2F1 · #E6E7E4 · #DADCD7 · #CFD1CA · black.
     Text greys are black at reduced alpha (the brand greys are surface tones, too light for text). */
  --paper:#f2f2f1; --card:#ffffff;
  --ink:#000000; --ink-2:rgba(0,0,0,.66); --muted:rgba(0,0,0,.55);
  --grid:#e6e7e4; --baseline:#cfd1ca; --hairline:rgba(0,0,0,.08);
  --red:#ef1934;            /* Expansion scenario · orbital · accent */
  --serif:'ivypresto-display','Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:'articulat-cf','Avenir Next','Helvetica Neue',system-ui,-apple-system,Arial,sans-serif;
  /* Height of the site navbar above the embed (sticky, outside the embed markup).
     Measured at runtime by dashboard.js; 0 when absent (local dev, Designer canvas). */
  --nav-h:0px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper)}
/* Bare element rules are scoped to the embed via :where(.pageshell) — the site navbar now
   shares the page and dashboard.css loads after Webflow's stylesheet, so unscoped h1/body
   rules leaked into it (serif nav links + 10px taller bar, seen 28 Jul). :where() adds zero
   specificity, so the embed-internal cascade is unchanged. */
:where(.pageshell){color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
:where(.pageshell) a{color:inherit;text-decoration:underline;text-decoration-color:var(--baseline);text-underline-offset:3px}
:where(.pageshell) a:hover{text-decoration-color:var(--red)}

/* ---------- layout shell: left section-nav + content column ----------
   Class names are compound (Webflow-embed collision rule). */
.pageshell{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px;align-items:start;
  max-width:1430px;margin:0 auto;padding:0 32px}
.pagecol{min-width:0;container-type:inline-size}
.pagecol main{display:block}
.pagecol section{max-width:820px}
.leftnav{position:sticky;top:var(--nav-h);max-height:calc(100dvh - var(--nav-h));overflow-y:auto;padding:40px 0 24px}
.nav-menu-toggle{display:none}          /* desktop: nav always open; Task 6 shows this on mobile */
.panel-toggle{display:none}             /* desktop: panel always open; Task 6 shows this on mobile */

/* interactive zone: main + sticky scenario panel; tabs span the top */
.izone{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px 40px;align-items:start;max-width:1110px}
.izone-main{min-width:0}
.izone-main > section:first-child{padding-top:0}  /* the tabs bar directly above provides the rhythm */
.izone-main section{max-width:none;scroll-margin-top:calc(var(--nav-h) + 68px)}  /* 820px cap is on the izone, not the inner col; offset clears the sticky tabs on anchor jumps */
#feedback{scroll-margin-top:calc(var(--nav-h) + 56px)}  /* feedback sub-block deep-link target (CTA "Disagree with an input?") */
.scentabs{grid-column:1/-1;position:sticky;top:var(--nav-h);z-index:40;display:flex;padding:10px 0;
  border-bottom:1px solid transparent;transition:background-color .15s,border-color .15s}
.scentabs.is-stuck{background:rgba(242,242,241,.94);backdrop-filter:blur(6px);
  border-bottom-color:var(--hairline)}
.scenpanel{position:sticky;top:calc(var(--nav-h) + 64px);background:var(--card);border:1px solid var(--hairline);
  border-radius:3px;padding:18px 18px 12px;font-size:12.5px}

/* boundary cue — hand-off from static to interactive: double rule + kicker row.
   No bottom margin: the sticky-chrome observer treats #zone-cue's bottom edge as
   the exact point where the tabs bar pins (see dashboard.js). */
.zone-cue{margin:44px 0 0}
.cue-rule{border-top:1px solid var(--ink);padding-top:2px}
.cue-rule::after{content:"";display:block;border-top:1px solid var(--ink)}
.cue-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:12px 0 2px}
.cue-lead{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--ink);margin:0}
.cue-arrow{color:var(--red)}
.cue-sub{font-size:11px;color:var(--muted);margin:0}

/* scenario tabs — joined segmented control (same family as .seg, sized up).
   No wrapper: buttons join via -1px margin collapse; outer corners only are rounded.
   Equal-width segments fill the bar (flex:1 1 0, centred labels).
   Active/focused buttons lift via z-index so their ink border wins the shared edge. */
.scentab{flex:1 1 0;font-family:var(--sans);font-size:12.5px;font-weight:600;padding:8px 18px;
  border:1px solid var(--baseline);background:var(--card);color:var(--ink-2);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  white-space:nowrap;transition:background .15s,color .15s}
.scentab+.scentab{margin-left:-1px}
.scentab:first-child{border-radius:3px 0 0 3px}
.scentab:last-child{border-radius:0 3px 3px 0}
.scentab .dot{width:8px;height:8px;border-radius:50%;flex:none}
.scentab:hover{background:rgba(0,0,0,.04);color:var(--ink)}
.scentab:focus-visible{outline:2px solid var(--ink);outline-offset:2px;position:relative;z-index:1}
.scentab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;
  position:relative;z-index:1}

/* scenario panel — editorial hero: serif name over a scenario-colour keyline, promoted
   2050 stats, then the assumption rows (.rail-row). --scen is set by renderPanel(). */
.scenpanel{--scen:var(--ink)}
.panel-name{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.05;
  letter-spacing:-.01em;color:var(--ink);position:relative;margin:0 0 14px;padding:0 0 13px}
.panel-name::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;
  background:var(--scen);transition:background-color .3s ease}
.panel-desc{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 12px}
.panel-stats{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin:0 0 14px}
.pstat{min-width:0;padding:9px 0 10px;border-top:1px solid var(--grid)}
.pstat-lead{grid-column:1/-1}
.pstat-v{display:block;font-family:var(--serif);font-size:21px;line-height:1;letter-spacing:-.01em;
  color:var(--ink);font-variant-numeric:lining-nums;white-space:nowrap}
.pstat-lead .pstat-v{font-size:27px}
.pstat-u{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em;
  color:var(--ink-2);margin-left:5px}
.pstat-s{display:block;font-size:11px;line-height:1.4;color:var(--muted);margin:6px 0 0}
/* scenario-switch entrance — .panel-swap is (re)applied only when the active scenario changes */
@media (prefers-reduced-motion: no-preference){
  .panel-swap .pstat{opacity:0;transform:translateY(8px);animation:rise .45s cubic-bezier(.2,.7,.3,1) forwards}
  .panel-swap .pstat:nth-child(2){animation-delay:.06s}
  .panel-swap .pstat:nth-child(3){animation-delay:.12s}
  .panel-name.panel-swap{animation:panelswap .45s cubic-bezier(.2,.7,.3,1)}
  @keyframes panelswap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

.rail-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 10px}
.rail-h{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:20px 0 2px}
.rail-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--grid);font-size:12.5px}
.rail-lbl{color:var(--ink-2)}
.rail-val{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rail-nav{display:grid;gap:1px}
.rail-nav a{display:flex;gap:9px;padding:5px 0;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--muted);text-decoration:none}
.rail-nav a .k-no{color:var(--red)}
.rail-nav a:hover,.rail-nav a.on{color:var(--ink)}
/* two-part contents (29 Jul call): "The Compute Buildout" + "Startup Simulator" top-level
   entries; the report's sections are a sub-list that shows while reading the report and
   collapses inside the simulator */
.rail-nav .rail-part{font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--ink-2);
  padding:7px 0;border-bottom:1px solid var(--grid)}
.rail-nav .rail-part:hover,.rail-nav .rail-part.on{color:var(--ink)}
.rail-sub{display:none;margin:4px 0 10px;padding-left:10px}
.rail-group.exp .rail-sub{display:grid;gap:1px}
.rail-cta{font-size:12px;margin:16px 0 0}

/* ---------- mobile (≤1020px): nav → top menu, tabs → sticky bar, panel → expandable summary ----------
   Strip heights are approximate (leftnav bar ~45px incl. padding; scentabs bar ~58px incl.
   padding) — .scentabs top and section scroll-margin-top below are starting values for the
   controller to tune visually; see dashboard/README.md / task-6 report for the numbers chosen. */
@media(max-width:1020px){
  /* single column */
  .pageshell{display:block;padding:0 20px;max-width:none}
  .pagecol{max-width:none}
  .pagecol section, .izone-main section{max-width:none}

  /* left nav → sticky top menu strip with a dropdown */
  .leftnav{position:sticky;top:var(--nav-h);z-index:50;max-height:none;overflow:visible;
    background:rgba(242,242,241,.94);backdrop-filter:blur(6px);
    border-bottom:1px solid var(--hairline);margin:0 -20px;padding:8px 20px}
  .leftnav .rail-eyebrow{display:none}
  .leftnav .rail-cta{display:none}
  .nav-menu-toggle{display:inline-block;font-family:var(--sans);font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;font-weight:600;color:var(--ink);background:none;border:0;padding:6px 0;cursor:pointer}
  .nav-menu-toggle::before{content:"\2261";margin-right:8px;font-size:15px;vertical-align:-1px}
  .leftnav .rail-nav{display:none;margin-top:6px}
  .leftnav.open .rail-nav{display:grid}

  /* interactive zone → stacked; tabs sticky bar; panel directly below tabs, main last.
     flex order overrides source order (panel is the last DOM child) so it sits under the tabs. */
  .izone{display:flex;flex-direction:column}
  .scentabs{order:0;position:sticky;top:calc(var(--nav-h) + 45px);z-index:40;margin:0 -20px;padding:10px 20px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;
    align-self:stretch}  /* .izone align-items:start would shrink the bar to content width */
  .scenpanel{order:1;position:static;margin:0 0 20px}
  .izone-main{order:2}
  .panel-toggle{display:inline-block;font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;font-weight:600;color:var(--muted);background:none;border:0;padding:8px 0 0;cursor:pointer}
  .panel-toggle:hover{color:var(--ink)}
  .panel-name{font-size:24px;margin:0 0 6px;padding:0 0 10px}
  .panel-toggle::before{content:"\25B8";display:inline-block;margin-right:6px;transition:transform .15s ease}
  .panel-toggle[aria-expanded="true"]::before{transform:rotate(90deg)}
  .panel-collapse{display:none}
  .scenpanel.open .panel-collapse{display:block}

  /* stacked sticky strips (nav ~45px + tabs ~58px) clear anchored sections */
  :where(.pageshell) section, .izone-main section{scroll-margin-top:calc(var(--nav-h) + 150px)}
}

/* ---------- header ---------- */
:where(.pageshell) header{padding:64px 0 14px}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:600;margin:0 0 18px}
:where(.pageshell) h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,64px);line-height:1.02;margin:0 0 20px;letter-spacing:-.01em}
.dek{font-size:18px;line-height:1.5;color:var(--ink-2);max-width:640px;margin:0 0 20px}
.thesis{font-family:var(--serif);font-size:21px;line-height:1.4;color:var(--ink);max-width:680px;margin:0 0 16px}
/* the four questions — the page's promise; red index numbers echo the section kickers */
ol.qlist{margin:0 0 6px;padding:0;max-width:680px;list-style:none;counter-reset:q}
ol.qlist li{position:relative;counter-increment:q;font-size:16px;line-height:1.5;font-weight:500;
  color:var(--ink);margin:0 0 10px;padding:0 0 0 36px}
ol.qlist li::before{content:"0" counter(q);position:absolute;left:0;top:3px;
  font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--red)}
/* hero stat band — the paper's four figures, boxed (same card idiom as the KPI tiles) */
.herostats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:6px 0 6px}
@container (max-width:760px){.herostats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:420px){.herostats{grid-template-columns:minmax(0,1fr)}}
.hstat{background:var(--card);border:1px solid var(--hairline);border-radius:3px;padding:18px 20px 16px}
.herostats .h-value{font-family:var(--serif);font-size:clamp(30px,4.2cqw,40px);font-weight:400;
  line-height:1;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:lining-nums;white-space:nowrap}
.herostats .h-unit{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  color:var(--ink-2);margin-left:6px}
.herostats .h-sub{font-size:12px;line-height:1.45;color:var(--muted);margin:8px 0 0}
/* staggered entrance; inherits the .rise reduced-motion guard */
.herostats .hstat:nth-child(2){animation-delay:.07s}
.herostats .hstat:nth-child(3){animation-delay:.14s}
.herostats .hstat:nth-child(4){animation-delay:.21s}
/* scenario primer — the paper's hand-off from the intro to the scenario picker */
.scen-intro{margin:32px 0 0}
ul.scenlist{margin:0 0 22px;padding:0;max-width:660px;list-style:none}
ul.scenlist li{position:relative;font-size:15px;line-height:1.55;color:var(--ink-2);margin:0 0 8px;padding:0 0 0 20px}
ul.scenlist li::before{content:"•";position:absolute;left:2px;color:var(--red)}
ul.scenlist b{color:var(--ink);font-weight:600}
.disclosure{display:inline-block;font-size:12px;color:var(--ink-2);border:1px solid var(--hairline);
  background:var(--card);padding:6px 12px;border-radius:2px}
.disclosure b{color:var(--ink);font-weight:600}

/* ---------- sections & cards ---------- */
:where(.pageshell) section{padding:44px 0 8px}
.sec-kicker{display:flex;align-items:center;gap:12px;font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:700;margin:0 0 12px}
.sec-kicker .k-no{color:var(--red)}
.sec-kicker::after{content:"";flex:1;height:1px;background:var(--baseline)}
:where(.pageshell) h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,36px);line-height:1.1;margin:0 0 14px}
.copy{font-size:15px;line-height:1.55;max-width:660px;color:var(--ink-2);margin:0 0 22px}
.copy b{color:var(--ink);font-weight:600}
.card{background:var(--card);border:1px solid var(--hairline);border-radius:3px;padding:22px 22px 16px;margin:0 0 20px}
.card h3{font-family:var(--sans);font-size:17px;font-weight:600;margin:0 0 3px}
.card .sub{font-size:12.5px;color:var(--muted);margin:0 0 14px}
.duo{display:grid;gap:20px;grid-template-columns:1fr 1fr;align-items:start}
/* halves must shrink below their SVG's width or charts never re-measure smaller on resize;
   subs reserve two lines so the charts start level even when only one sub wraps (no bottom-
   pinning — an opened data table must not push the sibling chart down) */
.duo>div{min-width:0}
.duo .sub{min-height:2lh}
@container (max-width:680px){.duo{grid-template-columns:1fr}.duo .sub{min-height:0}}

/* entrance */
@media (prefers-reduced-motion: no-preference){
  .rise{opacity:0;transform:translateY(14px);animation:rise .6s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ---------- KPI tiles ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:26px 0 4px}
@container (max-width:760px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:420px){.kpis{grid-template-columns:minmax(0,1fr)}}
.kpi{background:var(--card);border:1px solid var(--hairline);border-radius:3px;padding:16px 18px;display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
.kpi .k-label{font-size:12px;color:var(--muted);margin:0 0 6px}
.kpi .k-value{font-size:30px;font-weight:600;line-height:1.05;letter-spacing:-.01em}
.kpi .k-unit{font-size:14px;font-weight:600;color:var(--ink-2);margin-left:2px}
.kpi .k-sub{font-size:12px;color:var(--ink-2);margin:6px 0 12px}

/* ---------- reactor anchor strip ---------- */
.a-row{display:flex;align-items:baseline;gap:10px;margin:14px 0 6px;flex-wrap:wrap}
.a-year{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;flex:none}
.a-count{font-size:12.5px;color:var(--ink-2)}
.a-count b{color:var(--ink);font-weight:600}

/* ---------- charts ---------- */
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto}
.chart .hit{outline:none}
.chart .hit:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.tip{position:absolute;pointer-events:none;background:var(--card);border:1px solid var(--hairline);
  box-shadow:0 6px 24px rgba(0,0,0,.09);border-radius:3px;padding:9px 12px;font-size:12px;
  min-width:150px;opacity:0;transition:opacity .12s;z-index:5}
.tip.on{opacity:1}
.tip .t-year{font-weight:600;font-size:12px;margin-bottom:5px}
.tip .t-row{display:flex;align-items:center;gap:7px;margin:3px 0;white-space:nowrap}
.tip .t-key{width:12px;height:0;border-top:2.5px solid;flex:none}
.tip .t-val{font-weight:600;color:var(--ink);margin-left:auto;font-variant-numeric:tabular-nums}
.tip .t-name{color:var(--ink-2)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin:8px 2px 2px}
.legend .l-item{display:inline-flex;align-items:center;gap:7px}
.legend .l-line{width:16px;height:0;border-top:2.5px solid}
.legend .l-rect{width:11px;height:11px;border-radius:2px}
.tablewrap{margin:10px 0 4px}
/* deterministic disclosure widget — Webflow's normalize sets summary{display:block},
   killing the native marker, so we draw our own and never rely on UA defaults */
.tablewrap summary{display:inline-block;list-style:none;font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.tablewrap summary::-webkit-details-marker{display:none}
.tablewrap summary::before{content:"\25B8";display:inline-block;margin-right:6px;transition:transform .15s ease}
.tablewrap[open] summary::before{transform:rotate(90deg)}
.tablewrap summary:hover{color:var(--ink)}
.tablewrap summary:focus{outline:none}
.tablewrap summary:focus-visible{outline:1px solid var(--muted);outline-offset:3px}
.tablewrap .tbl-scroll{overflow:auto;max-height:260px;margin-top:8px;border:1px solid var(--hairline);border-radius:3px}
table.data{border-collapse:collapse;width:100%;font-size:12px}
table.data th,table.data td{padding:5px 10px;text-align:right;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--grid)}
table.data th{position:sticky;top:0;background:var(--card);color:var(--muted);font-weight:600;text-align:right}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data.tbl-left th,table.data.tbl-left td{text-align:left}   /* text-heavy reference tables (methodology) */

/* ---------- controls ---------- */
.controls{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;margin:4px 0 14px}
@container (max-width:640px){.controls{grid-template-columns:1fr}}
.ctl{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;padding:9px 0;border-bottom:1px solid var(--grid)}
.ctl label{font-size:13px;font-weight:600}
.ctl output{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;min-width:76px}
.ctl input[type=range]{grid-column:1/3;width:100%;accent-color:var(--red);margin:6px 0 2px;height:18px}
.ctl .hint{grid-column:1/3;font-size:11.5px;color:var(--muted)}
.ctl-row{display:flex;align-items:center;gap:10px;margin:12px 0}
.controls .kpi{grid-row:auto;grid-template-rows:none;align-content:center;margin:9px 0}
.controls .kpi .k-sub{margin-bottom:0}
:where(.pageshell) select{font-family:var(--sans);font-size:13px;padding:8px 10px;border:1px solid var(--baseline);border-radius:3px;background:var(--card);max-width:100%}
button.ghost{font-family:var(--sans);font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:3px;
  border:1px solid var(--baseline);background:var(--card);cursor:pointer}
button.ghost:hover{border-color:var(--ink)}
.solid{font-family:var(--sans);font-size:14px;font-weight:600;padding:12px 24px;border-radius:3px;
  border:1px solid var(--red);background:var(--red);color:#fff;cursor:pointer;
  display:inline-block;text-decoration:none}
.solid:hover{background:#d5152e;border-color:#d5152e;color:#fff}
.solid:disabled{opacity:.55;cursor:default}
/* the email CTA block below the live chart:
   a centred column, text inside left-aligned, button + status note centred */
.f-cta{max-width:640px;margin:22px auto 28px;text-align:left}
.f-cta .ctl-row{justify-content:center}
.f-cta #f-note{text-align:center}
/* email + company link, side by side at the bottom of the simulator card */
.f-mail{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:0 0 6px}
@container (max-width:560px){.f-mail{grid-template-columns:1fr}}
.seg{display:inline-flex;border:1px solid var(--baseline);border-radius:3px;overflow:hidden;margin:0 0 14px}
.seg button{font-family:var(--sans);font-size:12px;font-weight:600;padding:7px 14px;border:0;background:var(--card);color:var(--ink-2);cursor:pointer}
.seg button.on{background:var(--ink);color:#fff}
:where(.pageshell) input[type=text],:where(.pageshell) input[type=url],:where(.pageshell) input[type=email],:where(.pageshell) textarea{font-family:var(--sans);font-size:13px;padding:10px 12px;border:1px solid var(--baseline);border-radius:3px;background:var(--card);width:100%;box-sizing:border-box}
:where(.pageshell) textarea{width:100%;margin:0 0 12px;resize:vertical}
.checkline{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin:0;padding:9px 0}
.checkline input{accent-color:var(--red);width:16px;height:16px}

/* ---------- result panels ---------- */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 16px}
@container (max-width:640px){.results{grid-template-columns:1fr}}
.plain{font-family:var(--serif);font-size:21px;line-height:1.35;color:var(--ink);max-width:720px;margin:18px 0 6px}
.plain em{font-style:normal;color:var(--red)}
/* interactive dare — the invitation next to live controls */
.dare{font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 12px}
.dare em{font-style:normal;color:var(--red)}
/* simulator gate — the area choice unlocks the sliders */
.f-gate{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:4px 0 12px}
@container (max-width:560px){.f-gate{grid-template-columns:1fr}}
.f-gate select,.f-gate input{width:100%}
.f-lbl{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.gate-hint{font-size:11.5px;color:var(--muted);margin:4px 0 0}
/* required / optional label marks + deferred inline validation */
.f-req{color:var(--red);font-weight:700}
.f-opt{color:var(--muted);font-weight:400}
.f-err{font-size:11.5px;color:var(--red);margin:4px 0 0}
input.f-invalid:not([type=checkbox]),select.f-invalid,textarea.f-invalid{border-color:var(--red)}
.controls.locked{opacity:.45;pointer-events:none}
/* pull stats — one money number per section, sized for skimmers */
.pull{font-family:var(--serif);font-size:16px;font-weight:400;line-height:1.45;color:var(--ink-2);max-width:760px;margin:4px 0 22px}
.pull em{font-style:normal;color:var(--red);font-weight:600}
.pull .attr{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:8px}
/* mid-#scale lede between the all-scenario chart and the per-scenario close-up,
   deliberately subordinate to the chart title (h3) directly below it. */
#power-headline{font-family:var(--serif);font-size:16px;font-weight:400;line-height:1.45;
  color:var(--ink-2);max-width:760px;margin:2px 0 18px}
.big-stat{color:var(--red);font-weight:600}   /* same size as the line; colour+weight only */
/* feedback sub-block heading inside #founder (was an h2, demoted to h3.subhead in Task 5) */
.subhead{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.15;margin:30px 0 8px;color:var(--ink)}
.counter{border-left:3px solid var(--red);padding:6px 0 6px 20px;margin:26px 0;max-width:720px}
.counter h4{font-size:13px;font-weight:600;margin:0 0 8px;letter-spacing:.04em;text-transform:uppercase}
.counter .c-lead{font-family:var(--serif);font-size:clamp(17px,2vw,20px);font-weight:400;line-height:1.35;margin:0 0 12px}
.counter .c-lead em{font-style:normal;color:var(--red)}
.counter ul{margin:0;padding-left:16px;color:var(--ink-2);font-size:14px}
.counter li{margin:7px 0;padding:0}
/* boxed callout (white-paper "The mismatch" style) — subtle filled box, red heading */
.callout{background:var(--card);border:1px solid var(--hairline);border-radius:3px;padding:16px 20px;margin:22px 0;max-width:660px}
.callout h4{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--red);margin:0 0 6px}
.callout p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0}
.finenote{font-size:12px;color:var(--muted);max-width:660px;margin:10px 0}

/* ---------- sources ---------- */
.sources{font-size:13px;color:var(--ink-2)}
.sources .s-item{padding:10px 0;border-bottom:1px solid var(--grid)}
.sources .s-name{font-weight:600;color:var(--ink)}
/* ---------- colophon ----------
   One-line report end-plate. The chrome links (Privacy/Imprint/social) moved to the site
   footer ("Footer White" component below the embed, 28 Jul) — don't duplicate them here. */
.colophon{max-width:820px;margin-top:64px;border-top:1px solid var(--hairline);padding:48px 0 72px}
.colo-base{font-size:12.5px;color:var(--muted);margin:0}

/* ---------- Startup Simulator masthead + live result (28–29 Jul calls) ----------
   The simulator is the page's second top-level part, after Sources: a double ink rule
   marks the boundary, then an h1-weight serif title. .sim-head overrides the bare header
   padding; .sim-title overrides the h2 size — both bare-element rules are :where()-scoped,
   so the classes win. */
.sim-head{padding:16px 0 0;margin:0 0 4px}
.sim-rule{border-top:1px solid var(--ink);padding-top:2px;margin:0 0 36px}
.sim-rule::after{content:"";display:block;border-top:1px solid var(--ink)}
.sim-title{font-size:clamp(40px,6vw,64px);line-height:1.02;margin:0 0 18px}
/* live result — bold reactor-equivalent lead + bold settings sentence, red effect figures */
.sim-result{margin:2px 0 18px}
.sim-headline{font-size:17px;line-height:1.5;font-weight:700;color:var(--ink);margin:14px 0 4px}
.sim-headline em{font-style:normal;color:var(--red)}
.sim-result .sim-headline+.sim-headline{margin-top:0}

/* ---- Word-doc typesetting ----
   Justified running prose with en-GB hyphenation; display serif (.thesis/.dek) justifies
   but never hyphenates. All prose/callout/finenote width caps lifted so text runs flush
   with the chart cards. Kept last in the file so it overrides the per-class caps above. */
.copy,.dek,.thesis,.pull,#power-headline,.callout p,.card .sub,
.panel-desc,.ctl .hint,.sources .s-item{
  text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3}
.dek,.thesis{-webkit-hyphens:manual;hyphens:manual}
.copy,.dek,.thesis,.pull,#power-headline,ol.qlist,.callout,.finenote{max-width:none}
/* challenges table: justify the wide "why it matters" column (inline style needs the override);
   the narrow label column stays left — justified two-word lines would tear apart */
table.data tr>td:nth-child(2)[style*="text-align:left"]{text-align:justify!important;
  -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3}
/* dial pairs share row tracks (label/slider/hint), so columns align even when one label wraps */
.controls .ctl{grid-row:span 3;grid-template-rows:subgrid;align-items:start}
/* contents nav: numbers in a fixed-width column so every label (incl. unnumbered INTRO)
   starts at the same x; tabular digits stop 01–10 from wobbling */
.rail-nav a .k-no{flex:none;min-width:1.6em;font-variant-numeric:tabular-nums}