/* ==========================================================================
   NOVATION COMPUTE — web system, brand identity v4.0
   Tokens and Moderne devices mirror the product's tailwind.config.ts and
   globals.css exactly. Ground is marble black; plates are one step off it,
   framed with the inlaid gold hairline. Fluting on green-pier bands only.
   No rounded corners. No glows. No floating plates.
   ========================================================================== */

:root{
  /* Core five */
  --pine:#00692C;          /* Novation Green — actions, our own series, positive deltas */
  --pine-deep:#0B3B24;     /* Green Pier — masthead bands, dividers, table heads */
  --gold:#E0B445;          /* Gold Leaf — display type, inlay, chevrons, attention */
  --plate:#0E2427;         /* Plate — every framed object */
  --ground:#08191A;        /* Marble Black — the ground */
  --data:#12302F;          /* Data surface — number surfaces only */

  /* Ramps */
  --green-300:#9FC9B0; --green-400:#79C99E; --green-500:#4C9C6C;
  --gold-300:#EDD188;  --gold-600:#C39A33;
  --parchment:#EDE6D4; --marble-200:#C8D2CB; --marble-300:#A8B6B0;
  --marble-400:#8B9C96; --marble-600:#4A5C57; --marble-700:#2E403C;

  /* Signals — not palette members */
  --mint:#79C99E;
  --claim:#E0705F;

  /* Device lines — identical to globals.css */
  --gold-line:rgba(224,180,69,.9);
  --hairline:rgba(168,182,176,.16);

  --display:'Josefin Sans','Century Gothic',Futura,sans-serif;
  --chrome:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Barlow',-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --maxw:1160px;
  --gut:clamp(20px,4vw,44px);
}

*{box-sizing:border-box;border-radius:0}
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--parchment);
  font:400 15px/1.55 var(--body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
::selection{background:var(--pine);color:var(--parchment)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--marble-700)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Moderne device 01 · gold inlay frame ------------------------- */
.plate{position:relative;background:var(--plate);border:1px solid var(--gold-line);padding:28px}
.plate::before{content:"";position:absolute;inset:5px;border:1px solid var(--hairline);pointer-events:none}
.plate>*{position:relative}
@media(max-width:620px){.plate{padding:22px}}

/* ---------- Moderne device 02 · fluting (green-pier bands only) ---------- */
.fluted{background-color:var(--pine-deep);
  background-image:repeating-linear-gradient(90deg,
    rgba(224,180,69,.05) 0px,rgba(224,180,69,.05) 1px,transparent 1px,transparent 8px)}

/* ---------- Type ---------------------------------------------------------- */
.eyebrow{font:500 11px/1.4 var(--chrome);letter-spacing:.18em;text-transform:uppercase;
  color:var(--marble-400);margin:0 0 14px}
.eyebrow.gold{color:var(--gold-600)}
.eyebrow.mint{color:var(--mint)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0}
.statement{font:400 clamp(23px,2.7vw,31px)/1.26 var(--display);letter-spacing:0;color:var(--parchment);margin:0}
.card-title{font:600 16px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;
  color:var(--parchment);margin:0 0 10px}
p{margin:0 0 14px;color:var(--marble-200)}
p.lead{color:var(--parchment)}
p:last-child{margin-bottom:0}
strong{color:var(--parchment);font-weight:600}
.fig{font:600 clamp(27px,4vw,42px)/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--green-400)}
.fig.gold{color:var(--gold)}
.fig .unit{font-size:.5em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.src{font:400 12px/1.55 var(--mono);color:var(--marble-400);margin-top:16px}
.src a{color:var(--marble-300)}

.section-head{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--hairline);
  padding-bottom:14px;margin-bottom:32px;position:relative}
.section-head::before{content:"";position:absolute;left:0;top:-9px;width:52px;height:2px;background:var(--gold)}
.section-head .num{font:500 12px/1 var(--chrome);letter-spacing:.2em;color:var(--gold);transform:translateY(-3px)}
.section-head h2{font-size:clamp(22px,3.3vw,32px);line-height:1.1;letter-spacing:.14em;
  text-transform:uppercase;color:var(--parchment)}

/* ---------- Layout -------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
section{padding:70px 0}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- Masthead ------------------------------------------------------ */
header{position:sticky;top:0;z-index:60;background:var(--ground);border-bottom:1px solid var(--hairline)}
.masthead .wrap{display:flex;align-items:center;gap:24px;height:64px}
.lockup{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.lockup svg{width:25px;height:25px;display:block}
.lockup .word{font:600 19px/1 var(--display);letter-spacing:.06em;color:var(--parchment)}
.lockup .desc{font:500 10px/1 var(--chrome);letter-spacing:.22em;color:var(--gold);
  padding-left:10px;border-left:1px solid var(--hairline)}
nav{margin-left:auto;display:flex;gap:20px;align-items:center}
nav a{font:500 11px/1 var(--chrome);letter-spacing:.16em;text-transform:uppercase;
  color:var(--marble-300);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
nav a:hover{color:var(--parchment);border-bottom-color:var(--gold)}
.navbtn{font:500 11px/1 var(--chrome);letter-spacing:.16em;text-transform:uppercase;
  color:var(--parchment);text-decoration:none;border:1px solid var(--gold-line);padding:9px 14px}
.navbtn:hover{background:var(--pine);border-color:var(--pine)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--hairline);
  color:var(--parchment);font:500 11px/1 var(--chrome);letter-spacing:.16em;padding:10px 12px;cursor:pointer}
@media(max-width:1180px){
  nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--ground);
    border-bottom:1px solid var(--hairline);flex-direction:column;align-items:stretch;gap:0;padding:4px var(--gut) 16px}
  nav.open{display:flex}
  nav a{padding:13px 0;border-bottom:1px solid var(--hairline)}
  .navbtn{text-align:center;margin-top:12px}
  .menu-btn{display:block}
}

/* The tape — 24px row, glanceable, never clicked */
.tape{border-bottom:1px solid var(--hairline);overflow:hidden}
.tape .wrap{display:flex;align-items:center;gap:24px;height:34px;white-space:nowrap}
.tape .lbl{font:500 10px/1 var(--chrome);letter-spacing:.2em;color:var(--gold);flex:0 0 auto}
.tape .marks{display:flex;gap:24px;overflow:hidden;flex:1 1 auto;
  font:400 12px/24px var(--mono);font-variant-numeric:tabular-nums;color:var(--marble-200)}
.tape .marks span.v{color:var(--parchment)}
.tape .up{color:var(--mint)}.tape .dn{color:var(--claim)}
.tape .sim{font:400 10px/1 var(--mono);color:var(--marble-600);flex:0 0 auto}
@media(max-width:820px){.tape .sim{display:none}}

/* ---------- Buttons ------------------------------------------------------- */
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{font:500 12px/1 var(--chrome);letter-spacing:.18em;text-transform:uppercase;
  padding:15px 24px;text-decoration:none;display:inline-block;border:1px solid transparent}
.btn-primary{background:var(--pine);color:var(--parchment);box-shadow:inset 0 0 0 1px var(--gold-line)}
.btn-primary:hover{background:#007A33}
.btn-ghost{border-color:var(--gold-line);color:var(--parchment)}
.btn-ghost:hover{color:var(--gold)}

/* ---------- Tables -------------------------------------------------------- */
.tablewrap{position:relative;background:var(--plate);border:1px solid var(--gold-line);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{font:500 10px/1 var(--chrome);letter-spacing:.18em;text-transform:uppercase;
  text-align:left;padding:13px 16px;color:var(--parchment);
  background-color:var(--pine-deep);
  background-image:repeating-linear-gradient(90deg,rgba(224,180,69,.05) 0 1px,transparent 1px 8px)}
tbody td{padding:13px 16px;border-bottom:1px solid var(--hairline);color:var(--marble-200);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(odd){background:rgba(18,48,47,.45)}
tbody td:first-child{color:var(--parchment);font-weight:500}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.t-gold{color:var(--gold-600)!important}
.t-mint{color:var(--mint)!important}
.t-claim{color:var(--claim)!important}

/* ---------- Stage rail ---------------------------------------------------- */
.rail{display:flex;overflow-x:auto;background:var(--plate);border:1px solid var(--gold-line)}
.stage{flex:1 0 146px;padding:18px 16px;border-right:1px solid var(--hairline)}
.stage:last-child{border-right:0}
.stage .sn{font:500 10px/1 var(--chrome);letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:9px}
.stage .st{font:600 14px/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--parchment)}
.stage .sf{font:400 11px/1.4 var(--chrome);letter-spacing:.06em;color:var(--marble-400);margin-top:7px;display:block}
.stage.entry{background:rgba(11,59,36,.55)}
.stage.entry .st{color:var(--gold-300)}

/* ---------- Lists inside plates ------------------------------------------- */
.plate ul{margin:12px 0 0;padding-left:18px;color:var(--marble-200)}
.plate li{margin-bottom:7px}
.plate li::marker{color:var(--gold-600)}
.also{font:500 10px/1.5 var(--chrome);letter-spacing:.14em;text-transform:uppercase;
  color:var(--marble-400);border-top:1px solid var(--hairline);padding-top:12px;margin-top:16px;display:block}

/* ---------- Claim / counter-claim pairs (the honesty section) ------------- */
.pair{background:var(--plate);border:1px solid var(--gold-line);position:relative}
.pair::before{content:"";position:absolute;inset:5px;border:1px solid var(--hairline);pointer-events:none}
.pair .row{position:relative;padding:22px 26px;border-bottom:1px solid var(--hairline)}
.pair .row:last-child{border-bottom:0}
.pair .q{font:600 14px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-300);margin:0 0 10px}
.pair .a{margin:0;color:var(--marble-200);font-size:14.5px}

/* ---------- Ladder / pricing ---------------------------------------------- */
.rung{display:grid;grid-template-columns:40px 1fr auto;gap:16px;padding:20px 24px;
  border-bottom:1px solid var(--hairline);align-items:start}
.rung:last-child{border-bottom:0}
.rung .n{font:600 19px/1.2 var(--display);color:var(--gold)}
.rung strong{display:block;font:600 13px/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.rung p{margin:0;font-size:14px}
.rung .price{font:400 12px/1.5 var(--mono);color:var(--green-400);text-align:right;white-space:nowrap}
@media(max-width:700px){.rung{grid-template-columns:32px 1fr}.rung .price{grid-column:2;text-align:left;margin-top:8px}}

/* ---------- Pills --------------------------------------------------------- */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pill{font:500 10px/1 var(--chrome);letter-spacing:.16em;text-transform:uppercase;
  padding:9px 13px;border:1px solid var(--hairline);color:var(--marble-200)}
.pill.on{background:var(--pine);color:var(--parchment);border-color:var(--pine)}
.pill.later{color:var(--marble-400)}
.pill.out{color:var(--claim);border-color:rgba(224,112,95,.4)}

/* ---------- Insight cards ------------------------------------------------- */
.paper{display:flex;flex-direction:column;text-decoration:none;min-height:100%}
.paper:hover{border-color:var(--gold)}
.paper .kicker{font:500 10px/1 var(--chrome);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-600)}
.paper h3{font-size:17px;letter-spacing:.03em;line-height:1.28;margin:12px 0 10px;text-transform:none;color:var(--parchment)}
.paper p{font-size:14px}
.paper .meta{font:400 11px/1 var(--mono);color:var(--marble-400);margin-top:auto;padding-top:18px}

/* ---------- Article ------------------------------------------------------- */
.article{max-width:760px;margin:0 auto;padding:0 var(--gut)}
.article h1{font-size:clamp(27px,4vw,40px);line-height:1.16;letter-spacing:.01em;
  font-weight:400;text-transform:none;margin:0 0 20px}
.article h2{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300);
  margin:44px 0 16px;padding-top:18px;border-top:1px solid var(--hairline)}
.article p{font-size:16px;line-height:1.62;margin-bottom:18px}
.article .standfirst{font:400 19px/1.5 var(--display);color:var(--parchment);margin-bottom:28px}
.article ul{padding-left:20px;color:var(--marble-200);font-size:16px;line-height:1.62}
.article li{margin-bottom:10px}
.article li::marker{color:var(--gold-600)}
.article .byline{font:500 11px/1.4 var(--chrome);letter-spacing:.16em;text-transform:uppercase;
  color:var(--marble-400);margin-bottom:34px}
.article blockquote{margin:26px 0;padding:20px 24px;background:var(--data);
  border-left:2px solid var(--gold);color:var(--parchment);font-size:16px}
.article blockquote p:last-child{margin-bottom:0}
.pullstat{display:flex;gap:28px;flex-wrap:wrap;margin:28px 0;padding:22px 0;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.pullstat div{min-width:120px}
.pullstat .fig{font-size:30px}
.pullstat .cap{font:500 10px/1.4 var(--chrome);letter-spacing:.14em;text-transform:uppercase;
  color:var(--marble-400);display:block;margin-top:8px}

/* ---------- Footer -------------------------------------------------------- */
footer{border-top:1px solid var(--hairline);padding:34px 0;margin-top:24px}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
footer .rule{height:2px;background:var(--gold);width:52px;margin-bottom:16px}
.fnote{font:400 12px/1.7 var(--mono);color:var(--marble-400);max-width:460px}
footer nav{margin:0;display:flex;gap:18px;position:static;flex-direction:row;padding:0;border:0;background:none}
@media(max-width:1180px){footer nav{display:flex}}
footer nav a{border:0;padding:0}


/* ---------- Multi-page chrome ------------------------------------------- */
.navcard{display:flex;flex-direction:column;text-decoration:none}
.navcard:hover{border-color:var(--gold)}
.navcard .n{font:500 11px/1 var(--chrome);letter-spacing:.2em;color:var(--gold);margin-bottom:12px}
.navcard h3{font:600 16px/1.25 var(--display);letter-spacing:.06em;color:var(--parchment);
  margin:0 0 10px;text-transform:none}
.navcard p{font-size:14px;margin:0}

.pagenav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0 40px}
@media(max-width:620px){.pagenav{grid-template-columns:1fr}}
.pn{position:relative;background:var(--plate);border:1px solid var(--gold-line);
  padding:20px 24px;text-decoration:none;display:block}
.pn::before{content:"";position:absolute;inset:5px;border:1px solid var(--hairline);pointer-events:none}
.pn:hover{border-color:var(--gold)}
.pn span{position:relative;display:block;font:500 10px/1 var(--chrome);letter-spacing:.18em;
  text-transform:uppercase;color:var(--marble-400);margin-bottom:9px}
.pn strong{position:relative;font:600 15px/1.25 var(--display);letter-spacing:.06em;color:var(--parchment)}
.pn.next{text-align:right}

.fnav{display:grid;grid-template-columns:repeat(4,auto);gap:26px 40px}
@media(max-width:760px){.fnav{grid-template-columns:repeat(2,1fr);gap:22px 24px}}
.fcol{display:flex;flex-direction:column;gap:9px}
.fcol h4{font:500 10px/1 var(--chrome);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-600);margin:0 0 3px}
.fcol a{font:400 13px/1.3 var(--body);color:var(--marble-300);text-decoration:none}
.fcol a:hover{color:var(--parchment)}
nav a[aria-current="page"]{color:var(--parchment);border-bottom-color:var(--gold)}


/* ---------- Figures — diagram library ------------------------------------
   Ported from the Novation Diagram Library. Every figure is its own plate,
   already framed with the gold inlay; the site supplies only the header rail,
   the scroll floor on narrow screens, and the two interaction layers.
   Parchment ink; green = the movable pool and work that is running; gold = a
   gate or a mark waiting on a person; claim red only for a breach.
   -------------------------------------------------------------------------- */
.nvfig{margin:30px 0}
.nvfig-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 12px;
  padding-bottom:10px;border-bottom:1px solid var(--hairline)}
.nvfig-n{font:400 12px/1 var(--mono);color:var(--gold);letter-spacing:.06em}
.nvfig-head h3{margin:0;font:600 15px/1.2 var(--display);letter-spacing:.09em;
  text-transform:uppercase;color:var(--parchment)}
.nvfig-tag{margin-left:auto;font:500 9px/1 var(--chrome);letter-spacing:.14em;
  text-transform:uppercase;color:var(--marble-400);border:1px solid var(--hairline);padding:6px 9px}
.nvfig-lead{max-width:78ch;margin:0 0 14px;font-size:14px;color:var(--marble-200)}
.nvfig-note{max-width:78ch;margin:14px 0 0;font:400 12.5px/1.6 var(--body);color:var(--marble-400)}
.nvfig-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.nvfig-scroll::-webkit-scrollbar{height:6px}
.nvfig svg{max-width:none}
.nvfig figure{margin:0}
.nvfig-scroll p,.nvfig-flow p{margin:0}
/* wide figures scroll rather than collapse; say so where that is what happens */
.nvfig-swipe{display:none}
@media(max-width:760px){
  .nvfig-swipe{display:block;margin:8px 0 0;font:500 9px/1 var(--chrome);
    letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600)}
}

/* the figures carry inline display values, so hiding a variant needs weight */
.nvfig [hidden]{display:none!important}

/* the figures set every colour inline; only the two interactive layers need rules */
.nvfig .nvstage{appearance:none;-webkit-appearance:none;display:block;width:100%;margin:0;
  font:inherit;background:transparent;border:1px solid rgba(237,230,212,.25);
  transition:border-color .12s linear,background-color .12s linear}
.nvfig .nvstage:hover{border-color:var(--gold)}
.nvfig .nvstage[data-on]{background:#123528;border-color:var(--green-400)}
.nvfig .nvstage:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.nvfig .nvstage-t{overflow-wrap:normal}
@media(max-width:1240px){.nvfig .nvstage-t{font-size:11px;letter-spacing:.01em}}
@media(max-width:1080px){.nvfig .nvstage-t{font-size:10px}}

/* grid tracks lifted out of the inline styles so narrow screens can reflow */
.nvfig .nvg1{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:560px){.nvfig-flow .nvg1{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nvfig .nvg2{grid-template-columns:repeat(8,minmax(0,1fr))}
@media(max-width:860px){.nvfig-flow .nvg2{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.nvfig-flow .nvg2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nvfig .nvg3{grid-template-columns:minmax(0,0.9fr) minmax(0,1.6fr)}
@media(max-width:640px){.nvfig-flow .nvg3{grid-template-columns:1fr}}
.nvfig .nvg4{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr)}
.nvfig .nvg5{grid-template-columns:8px 1fr}
.nvfig .nvg6{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)}
.nvfig .nvg7{grid-template-columns:repeat(10,minmax(0,1fr))}
@media(max-width:860px){.nvfig-flow .nvg7{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:560px){.nvfig-flow .nvg7{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nvfig .nvg8{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:560px){.nvfig-flow .nvg8{grid-template-columns:minmax(0,1fr)}}
.nvfig .nvg9{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){.nvfig-flow .nvg9{grid-template-columns:1fr}}
.nvfig .nvg10{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:860px){.nvfig-flow .nvg10{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.nvfig-flow .nvg10{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nvfig .nvg11{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:640px){.nvfig-flow .nvg11{grid-template-columns:1fr}}
.nvfig .nvg12{grid-template-columns:18px minmax(0,1fr)}
.nvfig .nvg13{grid-template-columns:120px minmax(0,1fr)}
.nvfig .nvg14{grid-template-columns:170px minmax(0,1fr)}
.nvfig .nvg15{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media(max-width:640px){.nvfig-flow .nvg15{grid-template-columns:1fr}}
.nvfig .nvg16{grid-template-columns:82px minmax(0,1fr) minmax(0,1fr)}

/* ---------- Stage groups on the Platform page ---------------------------- */
/* Each group leads with its figures and closes with the paragraph the figure
   cannot carry: a caveat, a field list, an integration detail. */
.stagegroup{margin:44px 0 0;padding-top:26px;border-top:1px solid var(--hairline)}
.stagegroup>.eyebrow{margin-bottom:4px}
.stagegroup>.plate{margin-top:22px}
.stagegroup .card-title{margin-top:0}

/* ---------- Home contents, grouped ---------------------------------------- */
/* Twelve equal cards made the reader choose twelve times. Three columns of
   plain rows let them find the one page they came for. */
.toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.toc{grid-template-columns:1fr}}
.toccol{border-top:1px solid var(--gold-line);padding-top:16px}
.toccol h3{margin:0 0 14px;font:500 10px/1 var(--chrome);letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-600)}
.tocrow{display:block;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--hairline)}
.tocrow:last-child{border-bottom:0}
.tocrow strong{display:block;font:600 14px/1.25 var(--display);letter-spacing:.05em;
  text-transform:uppercase;color:var(--parchment)}
.tocrow span{display:block;margin-top:5px;font:400 13px/1.45 var(--body);color:var(--marble-400)}
.tocrow:hover strong{color:var(--gold)}
.tocrow:hover span{color:var(--marble-200)}

/* ---------- Specimen artifacts -------------------------------------------- */
/* A stranger cannot get into the demo. These are the objects it produces,
   printed on the page, so the shape of the output is inspectable without an
   account. Every one is synthetic and says so. */
.spec{background:var(--data);border:1px solid var(--hairline);padding:0;margin:0 0 14px;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec pre{margin:0;padding:18px 20px;font:400 12.5px/1.7 var(--mono);
  color:var(--marble-200);white-space:pre;tab-size:2}
.spec .k{color:var(--green-400)}
.spec .c{color:var(--marble-600)}
.spec .g{color:var(--gold)}
.spec .r{color:var(--claim)}
.speclabel{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.speclabel .t{font:600 12px/1 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--parchment)}
.speclabel .s{font:500 9px/1 var(--chrome);letter-spacing:.14em;text-transform:uppercase;
  color:var(--claim);border:1px solid var(--claim);padding:5px 8px}
@media(max-width:620px){.spec pre{font-size:11.5px;padding:14px}}

/* ---------- Evidence labels ----------------------------------------------- */
/* Four states, beside every headline number. The word carries the state;
   colour only reinforces it, per the brand's signal-state rule. Nothing here
   blinks and nothing is distinguished by colour alone. */
.ev{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;
  font:500 9px/1 var(--chrome);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--hairline);padding:5px 8px;white-space:nowrap;
  color:var(--marble-400);text-decoration:none}
.ev::before{content:"";width:7px;height:7px;flex:0 0 auto;display:block;
  border:1px solid currentColor}
.ev-model{color:var(--marble-400)}
.ev-hist{color:var(--gold-600);border-color:rgba(224,180,69,.35)}
.ev-hist::before{background:currentColor}
.ev-pilot{color:var(--green-400);border-color:rgba(121,201,158,.35)}
.ev-pilot::before{background:currentColor;transform:rotate(45deg)}
.ev-recon{color:var(--parchment);border-color:var(--gold-line)}
.ev-recon::before{background:var(--gold);border-color:var(--gold)}
a.ev:hover{border-color:var(--gold);color:var(--gold)}
.evkey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 8px}
@media(max-width:820px){.evkey{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.evkey{grid-template-columns:1fr}}
.evkey>div{border-top:1px solid var(--hairline);padding-top:12px}
.evkey p{margin:10px 0 0;font:400 13px/1.5 var(--body);color:var(--marble-300)}
.evkey .no{display:block;margin-top:8px;font:400 12px/1.5 var(--mono);color:var(--claim)}

/* ---------- Parked state, for a tier that is not on sale --------------------- */
/* The brand's Parked signal: outlined mark, reason beside it. Legible, plainly
   not available, and not greyed into unreadability. */
.rung.parked{opacity:.72}
.rung.parked strong{color:var(--marble-200)}
.rung.parked .n{color:var(--marble-600);border-color:var(--marble-700)}
.parkmark{display:inline-block;font:500 9px/1 var(--chrome);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-600);border:1px solid var(--gold-600);
  padding:5px 8px;margin-bottom:6px}

/* ---------- The frontier grid ---------------------------------------------- */
/* Lifted out of the calculator so the one-page site can show it too. Generated
   at build time from the same arithmetic, and the build fails if they diverge. */
.grid-tbl{border-collapse:collapse;width:100%;font:500 12px/1 var(--mono);font-variant-numeric:tabular-nums}
.grid-tbl th{font:500 10px/1 var(--chrome);letter-spacing:.14em;text-transform:uppercase;
  color:var(--marble-400);padding:9px 6px;text-align:center;background:none}
.grid-tbl td{padding:10px 6px;text-align:center;border:1px solid var(--hairline)}
.grid-tbl td.p{background:rgba(0,105,44,.34);color:var(--mint)}
.grid-tbl td.f{background:rgba(224,112,95,.13);color:var(--claim)}
.grid-tbl td.here{outline:2px solid var(--gold);outline-offset:-2px;color:var(--parchment)}
.grid-tbl th.rowh{text-align:right;padding-right:10px;white-space:nowrap}

/* ---------- Figure 00, the campaign hero ------------------------------------ */
.nvfig .nvg-camp{grid-template-columns:minmax(0,0.62fr) minmax(0,2.9fr)}
.nvfig .nvg-camp3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nvfig .nvg-camp4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){
  .nvfig-flow .nvg-camp{grid-template-columns:1fr}
  .nvfig-flow .nvg-camp3{grid-template-columns:1fr}
  .nvfig-flow .nvg-camp4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- White paper figures ------------------------------------------- */
/* The paper's charts are rebuilt rather than described. Same grammar as the
   diagram library: parchment ink, mint for what moves, gold for a gate or a
   mark that waits on a person, claim red only for a breach or a failure. */
.wpfig{margin:34px 0;border-top:1px solid var(--gold-line);padding-top:20px}
.wpfig .lbl{font:500 10px/1.4 var(--chrome);letter-spacing:.16em;text-transform:uppercase;
  color:var(--marble-400);margin:0 0 16px}
.wpfig .cap{font:600 13px/1.35 var(--display);letter-spacing:.05em;text-transform:uppercase;
  color:var(--parchment);margin:20px 0 8px}
.wpfig .note{font:400 13.5px/1.6 var(--body);color:var(--marble-300);margin:0 0 8px;max-width:none}
.wpfig .cite{font:400 12px/1.55 var(--mono);color:var(--marble-400);margin:10px 0 0}
.wpfig .plot{overflow-x:auto}

/* horizontal bars */
.hbar{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) minmax(52px,auto);
  gap:10px 12px;align-items:center;font:400 12px/1.3 var(--body)}
.hbar .k{font:500 10px/1.3 var(--chrome);letter-spacing:.1em;text-transform:uppercase;
  color:var(--marble-300);text-align:right}
.hbar .t{height:16px;background:rgba(237,230,212,.06);position:relative;min-width:2px}
.hbar .t span{position:absolute;left:0;top:0;bottom:0;display:block}
.hbar .v{font:400 12px/1.3 var(--mono);color:var(--parchment)}
.hbar .sub{grid-column:1/-1;font:400 11.5px/1.45 var(--body);color:var(--marble-600);
  margin:-4px 0 6px;padding-left:108px}
@media(max-width:620px){
  .hbar{grid-template-columns:minmax(0,1fr) minmax(44px,auto);gap:6px 10px}
  .hbar .k{grid-column:1/-1;text-align:left}
  .hbar .sub{padding-left:0}
}

/* the wall of identical prices */
.wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media(max-width:700px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wall div{border:1px solid var(--hairline);padding:12px 10px;text-align:center}
.wall .n{font:500 10px/1.3 var(--chrome);letter-spacing:.1em;text-transform:uppercase;
  color:var(--marble-300);display:block;margin-bottom:8px;min-height:26px}
.wall .p{font:400 17px/1 var(--mono);color:var(--mint)}
.wall .odd{border-color:var(--gold-line)}
.wall .odd .p{color:var(--gold)}

/* the eight-condition scorecard */
.cond td:first-child{width:34%}
.cond .st{font:500 9px/1 var(--chrome);letter-spacing:.14em;text-transform:uppercase;
  padding:5px 8px;border:1px solid;white-space:nowrap;display:inline-block}
.cond .ok{color:var(--mint);border-color:rgba(121,201,158,.45)}
.cond .part{color:var(--gold);border-color:var(--gold-line)}
.cond .open{color:var(--claim);border-color:rgba(224,112,95,.45)}

/* ---------- Hero: vision left, deliverable right ------------------------- */
.herogrid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:start}
@media(max-width:900px){.herogrid{grid-template-columns:1fr;gap:34px}}
.herocard{padding:24px 26px}
@media(max-width:620px){.herocard{padding:22px}}

.getlist{list-style:none;margin:0;padding:0;counter-reset:g}
.getlist li{counter-increment:g;position:relative;padding:9px 0 9px 32px;
  border-bottom:1px solid var(--hairline)}
.getlist li:last-child{border-bottom:0;padding-bottom:2px}
.getlist li::before{content:counter(g,decimal-leading-zero);position:absolute;left:0;top:12px;
  font:600 11px/1 var(--mono);color:var(--gold);letter-spacing:.06em}
.getlist strong{display:block;font:600 14px/1.25 var(--display);letter-spacing:.02em;
  color:var(--parchment)}
.getlist span{display:block;margin-top:3px;font:400 12.5px/1.45 var(--body);color:var(--marble-300)}

/* ---------- Two figures, one of them ours ------------------------------- */
.numpair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:26px}
@media(max-width:620px){.numpair{grid-template-columns:1fr}}
.numpair .plate{padding:22px 24px}
.numpair .ours{border-color:var(--mint);box-shadow:inset 0 0 0 1px rgba(121,201,158,.18)}
.numpair .tag{font:500 10px/1 var(--chrome);letter-spacing:.2em;text-transform:uppercase;
  color:var(--marble-400);margin:0 0 10px}
.numpair .ours .tag{color:var(--mint)}

/* round 4: accessible-name helper for page-level headings */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}