/* Outlay landing — "THE DOCUMENT".
   The page doesn't contain a statement; it IS one. A financial document set in
   bond-paper white with Swiss annual-report rules: a masthead, a full-width
   ledger as the hero, numbered report sections, giant tabular numerals, one
   black divider band. Red flags, green only where money is verified or saved.
   One quiet motion — ledger rows landing. Nothing else moves. */

@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin-wght-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#fcfcfa;         /* bond paper */
  --ink:#101010;
  --body-c:#41413d;
  --faint:#72726d;
  --hair:#111111;          /* hairlines are INK, not gray — the document look */
  --hair-soft:#d9d9d2;
  --green:#0b6a4a;
  --red:#b23a2c;
  --band:#101010;          /* the divider band */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --w:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:transparent;color:var(--body-c);font-family:var(--sans);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip}
/* ambient layer: a subliminal ledger grid, drifting one cell every 90s */
@media (prefers-reduced-motion: no-preference){
  body::before{content:"";position:fixed;inset:-64px;z-index:-1;pointer-events:none;
    background:
      repeating-linear-gradient(180deg,rgba(16,16,16,.03) 0 1px,transparent 1px 32px),
      repeating-linear-gradient(90deg,rgba(16,16,16,.02) 0 1px,transparent 1px 32px);
    animation:gridpan 90s linear infinite}
  @keyframes gridpan{to{transform:translateY(32px)}}
}
#readbar{position:fixed;top:0;left:0;right:0;height:2px;background:var(--green);
  transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
.wrap{max-width:var(--w);margin:0 auto;padding:0 32px}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--green)}
h1,h2,h3{color:var(--ink);margin:0}
::selection{background:var(--ink);color:var(--paper)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}
.skip-link:focus{left:12px;top:12px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.micro{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.small{font-size:13.5px;color:var(--faint)}

/* ---------- nav: functional, documentary ---------- */
nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
nav .wrap{display:flex;align-items:center;gap:28px;height:60px}
.brand{font-weight:680;font-size:18px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;line-height:1.6}
.brand .dot{color:var(--green)}
.navlinks{display:flex;gap:24px;margin-left:8px}
.navlinks a{color:var(--body-c);font-size:14px;font-weight:520;text-decoration:none;line-height:1.6}
.navlinks a:hover{color:var(--ink)}
.navsp{flex:1}
.btn{display:inline-block;border:1px solid var(--ink);padding:10px 20px;font-weight:560;
  font-size:14.5px;color:var(--ink);text-decoration:none;transition:background .12s ease,color .12s ease}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--green);border-color:var(--green)}
.btn.lg{padding:14px 28px;font-size:16px}
.navcta{display:flex;gap:14px;align-items:center}
.navcta .acctname{color:var(--ink)!important}
.navcta .acctburger{border-color:var(--hair-soft)!important}
.navcta .acctburger span{background:var(--ink)!important}
.hamburger{display:none}

/* ---------- masthead ---------- */
.masthead{padding:64px 0 0;position:relative;overflow:clip}
.masthead .wrap{position:relative;z-index:1}
/* watermark figures drifting behind the document (3.5% ink) */
.wm{position:absolute;font-family:var(--mono);font-weight:700;color:var(--ink);opacity:.035;
  line-height:1;pointer-events:none;user-select:none;z-index:0;font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;white-space:nowrap}
.wm.a{font-size:clamp(120px,16vw,240px);right:-3%;top:4%}
.wm.b{font-size:clamp(90px,11vw,170px);left:44%;bottom:26%}
@media (prefers-reduced-motion: no-preference){
  .wm.a{animation:wmfloat 26s ease-in-out infinite alternate}
  .wm.b{animation:wmfloat 34s ease-in-out -12s infinite alternate-reverse}
  @keyframes wmfloat{from{transform:translateY(-10px)}to{transform:translateY(14px)}}
}
.mast-rule{border-top:3px solid var(--hair)}
.mast-meta{display:flex;justify-content:space-between;gap:16px;padding:12px 0 46px;flex-wrap:wrap}
.display{font-size:clamp(58px,9.2vw,132px);line-height:.96;font-weight:640;letter-spacing:-.05em;
  max-width:11em}
.display .acc{color:var(--green)}
.mast-sub{display:flex;gap:56px;align-items:flex-end;justify-content:space-between;
  margin:40px 0 56px;flex-wrap:wrap}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:33em;color:var(--body-c);margin:0}
.lede b{color:var(--ink);font-weight:600}
.ctarow{display:flex;gap:18px;align-items:center;flex-wrap:wrap;flex:none}

/* ---------- THE LEDGER (full-width hero table) ---------- */
.ledger{border-top:3px solid var(--hair);font-variant-numeric:tabular-nums;position:relative;overflow:clip}
/* the audit scan: a faint green sweep reconciles the ledger every 9s */
@media (prefers-reduced-motion: no-preference){
  .ledger::after{content:"";position:absolute;left:0;right:0;height:56px;top:-64px;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(11,106,74,.05) 42%,rgba(11,106,74,.10) 50%,rgba(11,106,74,.05) 58%,transparent);
    animation:scan 9s ease-in-out 3.2s infinite}
  @keyframes scan{0%,10%{top:-64px;opacity:0}16%{opacity:1}52%{top:100%;opacity:1}58%,100%{top:100%;opacity:0}}
}
.lg-cols,.lg-row{display:grid;grid-template-columns:minmax(0,2.6fr) 1fr 1fr 1.2fr minmax(0,1.1fr);
  gap:20px;align-items:baseline}
.lg-cols{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--faint);
  text-transform:uppercase;padding:12px 0 10px;border-bottom:1px solid var(--hair)}
.lg-row{padding:15px 0;border-bottom:1px solid var(--hair-soft);font-size:15.5px;color:var(--ink)}
/* the ledger is explorable: rows are buttons; the detail is the product view */
.lg-row[aria-controls]{cursor:pointer}
.lg-row[aria-controls]:hover .it,.lg-row[aria-controls]:focus-visible .it{color:var(--green)}
.lg-row[aria-controls]:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.lg-row .it::before{content:"▸";display:inline-block;width:16px;color:var(--faint);
  font-size:11px;transition:transform .15s ease}
.lg-row.exp .it::before{transform:rotate(90deg);color:var(--green)}
.lg-detail{display:none;grid-column:1 / -1;margin-top:12px;padding:10px 0 4px 18px;
  border-left:2px solid var(--green);font-family:var(--mono);font-size:12px;line-height:2;
  color:var(--body-c);font-weight:400;white-space:normal}
.lg-detail.open{display:block}
.lg-detail .k{display:inline-block;min-width:86px;color:var(--faint);font-size:10.5px;
  letter-spacing:.14em}
.lg-detail .g{color:var(--green)} .lg-detail .r{color:var(--red)}
.lg-row.flag .lg-detail,.lg-row.dim .lg-detail{color:var(--body-c)}
.lg-hint{text-align:right;padding:0 0 6px}
@media (prefers-reduced-motion: no-preference){
  .lg-detail.open{animation:land .3s ease-out}
}
.lg-row .it{font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-row .it small{color:var(--faint);font-weight:400}
.lg-row .who,.lg-row .team{font-family:var(--mono);font-size:13px;color:var(--body-c)}
.lg-row .st{font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.lg-row .st.ok{color:var(--green)} .lg-row .st.bad{color:var(--red)} .lg-row .st.dim{color:var(--faint)}
.lg-row .amt{font-family:var(--mono);font-size:15.5px;font-weight:600;text-align:right}
.lg-row.flag .it,.lg-row.flag .amt{color:var(--red)}
.lg-row.dim .it,.lg-row.dim .amt{color:var(--faint)}
.lg-total{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  border-top:2px solid var(--hair);border-bottom:3px solid var(--hair);
  padding:18px 0;margin-top:-1px}
.lg-total .t{font-family:var(--mono);font-size:13px;letter-spacing:.1em;font-weight:700;color:var(--ink)}
.lg-total .t .ok{color:var(--green)}
.lg-total .amt{font-family:var(--mono);font-size:clamp(22px,2.6vw,32px);font-weight:700;color:var(--ink)}
.providers{padding:26px 0 64px;display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.p-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-right:4px}
.pv{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;
  color:var(--body-c);white-space:nowrap}
.pvico{width:14px;height:14px;flex:none;fill:var(--ink);opacity:.72}
/* rows land once, quietly */
@media (prefers-reduced-motion: no-preference){
  .ledger .lg-row,.ledger .lg-total{opacity:0;animation:land .45s ease-out forwards}
  .ledger .lg-row:nth-of-type(3){animation-delay:.12s}.ledger .lg-row:nth-of-type(4){animation-delay:.24s}
  .ledger .lg-row:nth-of-type(5){animation-delay:.36s}.ledger .lg-row:nth-of-type(6){animation-delay:.48s}
  .ledger .lg-row:nth-of-type(7){animation-delay:.6s}.ledger .lg-row:nth-of-type(8){animation-delay:.72s}
  .lg-total{animation-delay:.95s!important}
  @keyframes land{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
}

/* ---------- the wire (live attribution ticker) ----------
   The statement is being written now: a slow, continuous feed of entries
   crossing the page like a wire service. Pauses on hover; static under
   reduced motion. Purely decorative (aria-hidden). */
.ticker{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair-soft);
  background:#fff;display:flex;align-items:stretch;overflow:hidden}
.tk-label{flex:none;display:flex;align-items:center;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--paper);background:var(--ink);
  padding:0 16px;position:relative;z-index:1}
.tk-label i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7ec9a4;
  margin-right:9px;font-style:normal}
.tk-track{display:flex;min-width:0;flex:1}
.tk-seq{display:inline-flex;gap:56px;padding:10px 28px 10px 56px;flex:none;
  font-family:var(--mono);font-size:12px;color:var(--body-c);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.tk-seq b{color:var(--ink);font-weight:600}
.tk-seq .g{color:var(--green);font-weight:600}
.tk-seq .r{color:var(--red);font-weight:600}
@media (prefers-reduced-motion: no-preference){
  .tk-seq{animation:tickmove 64s linear infinite}
  .ticker:hover .tk-seq{animation-play-state:paused}
  @keyframes tickmove{to{transform:translateX(-100%)}}
  .tk-label i{animation:okpulse 2.4s ease-in-out infinite}
  /* the live ledger: entries flash green as they post, then settle to ink */
  .lg-row .amt.flash,.lg-total .amt.flash{animation:amtflash 1.5s ease-out}
  @keyframes amtflash{0%,55%{color:var(--green)}}
  .lg-total .t .ok{animation:okpulse 4.5s ease-in-out infinite}
  @keyframes okpulse{0%,100%{opacity:1}50%{opacity:.5}}
}

/* ---------- numbered report sections ---------- */
.section{padding:96px 0}
.sec-no{display:flex;align-items:baseline;gap:18px;border-top:3px solid var(--hair);padding-top:14px;
  margin-bottom:46px}
.sec-no .no{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--faint)}
.sec-no h2{font-size:clamp(30px,3.6vw,50px);line-height:1.04;font-weight:620;letter-spacing:-.035em}
.sec-intro{max-width:44em;font-size:17.5px;margin:0 0 52px}

/* ---------- the suite (01) — five products, one interactive index ----------
   Radio-driven CSS tabs styled like a document's index dividers: work without
   JS, arrow keys come free with the radio group. One pane is always open. */
.suite{position:relative}
.suite>input{position:absolute;opacity:0;pointer-events:none}
.stabs{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:2px solid var(--hair)}
.stabs label{cursor:pointer;padding:18px 18px 16px 0;border-bottom:1px solid var(--hair-soft);
  position:relative;user-select:none}
.stabs .pn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--faint)}
.stabs .pt{display:block;font-weight:620;font-size:clamp(16px,1.7vw,21px);color:var(--faint);
  letter-spacing:-.015em;margin-top:6px;transition:color .15s ease}
.stabs .ps{display:block;font-size:12.5px;color:var(--faint);margin-top:3px}
.stabs label::after{content:"";position:absolute;left:0;right:18px;bottom:-1px;height:3px;
  background:transparent;transition:background .15s ease}
.stabs label:hover .pt{color:var(--ink)}
#s1:checked~.stabs [for=s1] .pt,#s2:checked~.stabs [for=s2] .pt,
#s3:checked~.stabs [for=s3] .pt,#s4:checked~.stabs [for=s4] .pt,
#s5:checked~.stabs [for=s5] .pt{color:var(--ink)}
#s1:checked~.stabs [for=s1]::after,#s2:checked~.stabs [for=s2]::after,
#s3:checked~.stabs [for=s3]::after,#s4:checked~.stabs [for=s4]::after,
#s5:checked~.stabs [for=s5]::after{background:var(--ink)}
#s1:focus-visible~.stabs [for=s1],#s2:focus-visible~.stabs [for=s2],
#s3:focus-visible~.stabs [for=s3],#s4:focus-visible~.stabs [for=s4],
#s5:focus-visible~.stabs [for=s5]{outline:2px solid var(--green);outline-offset:2px}
.spane{display:none;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:46px 0 10px}
#s1:checked~.spanes #p1,#s2:checked~.spanes #p2,
#s3:checked~.spanes #p3,#s4:checked~.spanes #p4,
#s5:checked~.spanes #p5{display:grid}
.spane h3{font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.022em}
.soon{display:inline-block;font-size:11.5px;font-weight:600;color:#e0922f;border:1px solid #e0922f;border-radius:999px;padding:2px 11px;letter-spacing:.01em;white-space:nowrap;line-height:1.5;vertical-align:middle}
.spane p{margin:12px 0 18px;max-width:32em;font-size:15.5px}
.spane .go{font-size:14px;font-weight:560}
@media (prefers-reduced-motion: no-preference){
  .spane{animation:land .35s ease-out}
}
/* the mixer — drag a team size, the procurement mix reprices live */
.mixer{border-top:2px solid var(--hair);padding-top:16px;display:grid;gap:14px;
  font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink)}
.mixer .mixlab{display:flex;justify-content:space-between;gap:12px}
.mixer .mixlab b{font-weight:700}
.mixer input[type=range]{width:100%;accent-color:var(--green);margin:0;cursor:ew-resize}
.mixer .note{font-size:11px;color:var(--faint);line-height:1.6;font-family:var(--mono)}
/* live pulse tag (Procure "optimizing" / Route "per request") */
.mixer .live{color:var(--green);font-weight:700;position:relative;padding-left:15px}
.mixer .live::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;
  margin-top:-3.5px;border-radius:50%;background:var(--green)}
/* Procure: the seats↔credits split bar that keeps re-balancing to the optimum */
.mixer .alloc{height:15px;display:flex;overflow:hidden;background:#ecece7}
.mixer .alloc .seat{background:var(--green);width:58%}
.mixer .alloc .api{background:#a9cbb8;flex:1}
.mixer .alloc-key{display:flex;gap:18px;font-size:10.5px;color:var(--faint);margin-top:-4px}
.mixer .alloc-key i{display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:-1px}
.mixer .alloc-key .s i{background:var(--green)} .mixer .alloc-key .a i{background:#a9cbb8}
.mixer .optfill{width:22%}
/* Route: requests streaming through the quality gate into cheapest-tier lanes */
.mixer .wire{position:relative;height:58px;background:#ecece7;overflow:hidden}
.mixer .wire .tier{position:absolute;right:9px;font-style:normal;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.mixer .wire .tier.t1{top:7px} .mixer .wire .tier.t2{top:calc(50% - 5px)} .mixer .wire .tier.t3{bottom:7px}
.mixer .wire span{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--green);
  top:calc(7px + var(--lane) * 20px)}
.mixer .wire span:nth-of-type(1){left:9%} .mixer .wire span:nth-of-type(2){left:21%}
.mixer .wire span:nth-of-type(3){left:33%} .mixer .wire span:nth-of-type(4){left:46%}
.mixer .wire span:nth-of-type(5){left:59%} .mixer .wire span:nth-of-type(6){left:72%}
.mixer .wire span:nth-of-type(7){left:85%}
.mixer .optfill2{width:42%}
@media (prefers-reduced-motion: no-preference){
  .mixer .live::before{animation:blink 1.5s ease-in-out infinite}
  .mixer .alloc .seat{animation:rebalance 6s ease-in-out infinite}
  .mixer .optfill{animation:optgrow 6s ease-in-out infinite}
  .mixer .optfill2{animation:optgrow2 5.5s ease-in-out infinite}
  .mixer .wire span{animation:flow 3.5s linear infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
  @keyframes rebalance{0%,100%{width:58%}50%{width:80%}}
  @keyframes optgrow{0%,12%{width:100%}55%{width:16%}72%,100%{width:22%}}
  @keyframes optgrow2{0%,12%{width:100%}55%{width:36%}72%,100%{width:42%}}
  @keyframes flow{
    0%{left:-4%;top:24px;opacity:0}
    9%{opacity:1}
    46%{top:24px}
    72%{top:calc(7px + var(--lane) * 20px)}
    91%{opacity:1}
    100%{left:104%;top:calc(7px + var(--lane) * 20px);opacity:0}}
}

/* ---------- the band (03 — security divider page) ----------
   The ink melts in and out of the paper (no hard section edge) — the seamless
   background transition, done in pure CSS so contrast is never at risk. */
.band{color:#b9b9af;padding:200px 0 210px;margin:-40px 0;position:relative;
  background:linear-gradient(180deg,transparent 0,var(--band) 170px,
             var(--band) calc(100% - 170px),transparent 100%)}
.band .wrap{position:relative;z-index:1}
/* security-paper microprint, drifting like banknote engraving */
@media (prefers-reduced-motion: no-preference){
  .band::before{content:"";position:absolute;inset:-24px;pointer-events:none;
    background:repeating-linear-gradient(45deg,rgba(252,252,250,.05) 0 1px,transparent 1px 8px);
    -webkit-mask:linear-gradient(180deg,transparent 0,#000 200px,#000 calc(100% - 200px),transparent 100%);
    mask:linear-gradient(180deg,transparent 0,#000 200px,#000 calc(100% - 200px),transparent 100%);
    animation:bandpan 70s linear infinite}
  @keyframes bandpan{to{transform:translate(-11.3px,-11.3px)}}
}
.band .sec-no{border-top-color:#3a3a34}
.band .sec-no .no{color:#6e6e64}
.band h2{color:var(--paper)}
.band .lede{color:#b9b9af}
.band .lede b{color:#f0f0e8}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:48px 0 34px;
  border-top:1px solid #3a3a34;border-bottom:1px solid #3a3a34}
.spec{padding:26px 28px 26px 0;border-left:1px solid #3a3a34;padding-left:28px}
.spec:first-child{border-left:none;padding-left:0}
.spec .k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:#7ec9a4;
  text-transform:uppercase;font-weight:600}
.spec .v{margin-top:10px;font-size:13.5px;color:#b9b9af;line-height:1.55}
.band .row2{font-size:14px;max-width:58em;color:#8f8f85}
.band a{color:#f0f0e8}
.band a:hover{color:#7ec9a4}

/* ---------- engage (04) ---------- */
.closing{padding:104px 0 84px}
.closing .display2{font-size:clamp(44px,6.4vw,92px);line-height:.98;font-weight:640;
  letter-spacing:-.045em;color:var(--ink);max-width:12em}
.closing .lede{margin:30px 0 38px}
.morelinks{display:flex;gap:30px;margin-top:46px;flex-wrap:wrap;font-size:14.5px}

/* ---------- faq ---------- */
.faq{max-width:820px;border-top:2px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair-soft);padding:2px 0}
.faq summary{cursor:pointer;font-weight:560;color:var(--ink);font-size:16px;padding:18px 0;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px}
.faq summary::after{content:"+";font-family:var(--mono);font-size:19px;color:var(--faint);flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 20px;font-size:15px;max-width:46em}

/* ---------- colophon ---------- */
footer{border-top:3px solid var(--hair);padding:26px 0 40px;font-size:13.5px}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:var(--body-c);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}
footer .sep{flex:1}
footer .micro{letter-spacing:.14em}

/* ---------- diagrams & charts (bespoke, in-brand — no stock art) ---------- */
.fig-svg{width:100%;height:auto;display:block}
.fig-cap{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint);
  text-transform:uppercase;margin-top:10px}
.diagram{background:#fff;border:1px solid var(--hair-soft);padding:22px 22px 16px}
/* control bars */
.bars{display:grid;gap:16px;border-top:2px solid var(--hair);padding-top:18px;
  font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink)}
.bars .row{display:grid;gap:7px}
.bars .lab{display:flex;justify-content:space-between;gap:12px}
.bars .lab .g{color:var(--green);font-weight:600}
.bars .lab .r{color:var(--red);font-weight:600}
.bars .lab .f{color:var(--faint)}
.bars .track{height:10px;background:#ecece7;position:relative;overflow:visible}
.bars .track .fill{position:absolute;left:0;top:0;bottom:0}
.bars .track .fill.g{background:var(--green)}
.bars .track .fill.r{background:var(--red)}
.bars .track .fill.f{background:#b9b9af}
.bars .track .cap{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink)}
.bars .legend{display:flex;gap:18px;color:var(--faint);font-size:11px}
.bars .legend i{display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:-1px;font-style:normal}
.bars .legend .g i{background:var(--green)} .bars .legend .r i{background:var(--red)}
.bars .legend .f i{background:#b9b9af}
/* Ledger (p1): a dollar resolving down the attribution chain to its ticket.
   Controls (p3): a real-time pacing scan across each budget, breach segment pulsing. */
.diagram .led-spark{opacity:0}
.p3ctrl .track .scan{position:absolute;top:-2px;bottom:-2px;left:0;width:2px;
  background:var(--ink);opacity:0}
@media (prefers-reduced-motion: no-preference){
  .diagram .led-spark{animation:ledflow 3.8s ease-in-out infinite}
  .diagram .led-ticket{animation:ledland 3.8s ease-in-out infinite}
  .p3ctrl .track .scan{opacity:.26;animation:pacescan 2.8s ease-in-out infinite}
  .p3ctrl .track .fill.r{animation:breach 1.5s ease-in-out infinite}
  @keyframes ledflow{0%{transform:translateX(0);opacity:0}8%{opacity:1}
    72%{transform:translateX(223px)}80%{opacity:1}100%{transform:translateX(306px);opacity:0}}
  @keyframes ledland{0%,60%,100%{opacity:.55}72%,82%{opacity:1}}
  @keyframes pacescan{0%{left:0;opacity:0}12%{opacity:.26}88%{opacity:.26}
    100%{left:calc(100% - 2px);opacity:0}}
  @keyframes breach{0%,100%{opacity:1}50%{opacity:.45}}
}
/* boundary diagram sits on the dark band */
.band .bgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:8px}
@media(max-width:980px){.band .bgrid{grid-template-columns:1fr}}

/* ---------- seamless scroll experience ----------
   Children rise into place once as they enter the viewport (staggered via
   --d), figures count up, the masthead drifts at a slower rate, and the nav
   re-inks itself while the dark band passes beneath it. All gated on
   prefers-reduced-motion; content is fully visible without JS. */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(16px);
    transition:opacity .65s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
               transform .65s cubic-bezier(.22,.61,.36,1) var(--d,0ms)}
  .rv.in{opacity:1;transform:none}
  .display,.mast-sub{will-change:transform}
}
/* charts draw themselves when revealed (solid strokes only; dashed lines fade) */
@media (prefers-reduced-motion: no-preference){
  .rv .fig-svg .draw{stroke-dasharray:1;stroke-dashoffset:1}
  .rv.in .fig-svg .draw{animation:svgdraw 1.1s ease-out forwards}
  .rv.in .fig-svg .draw.d2{animation-delay:.5s}
  @keyframes svgdraw{to{stroke-dashoffset:0}}
  .rv .fig-svg .fade{opacity:0}
  .rv.in .fig-svg .fade{animation:svgfade .6s ease-out 1s forwards}
  @keyframes svgfade{to{opacity:1}}
}
nav.overband{background:color-mix(in srgb,var(--band) 92%,transparent);border-bottom-color:#3a3a34}
nav.overband .brand,nav.overband .navlinks a:hover{color:#fff}
nav.overband .navlinks a{color:#b9b9af}
nav.overband .btn.primary{background:var(--paper);border-color:var(--paper);color:var(--ink)}
nav.overband .hamburger span{background:#fff}
nav,nav .brand,nav .navlinks a,nav .btn.primary{transition:background .45s ease,color .45s ease,border-color .45s ease}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .lg-cols,.lg-row{grid-template-columns:minmax(0,2.2fr) 1fr minmax(0,1.1fr)}
  .lg-cols .oc,.lg-row .who,.lg-cols .tc,.lg-row .team{display:none}
  .stabs{grid-template-columns:1fr 1fr}
  .stabs label{border-bottom:none;padding:14px 14px 12px 0}
  .stabs{border-bottom:1px solid var(--hair-soft)}
  .spane{grid-template-columns:1fr;gap:26px;padding:36px 0 6px}
  .specs{grid-template-columns:1fr}
  .spec{border-left:none;padding-left:0;border-top:1px solid #3a3a34;padding-top:22px}
  .spec:first-child{border-top:none}
}
@media(max-width:760px){
  .navlinks{display:none}
  .hamburger{display:flex;flex-direction:column;gap:4.5px;background:none;border:0;padding:8px;cursor:pointer}
  .hamburger span{width:20px;height:2px;background:var(--ink);display:block}
  .nav-toggle:checked ~ .navlinks{display:flex;position:absolute;top:60px;left:0;right:0;
    flex-direction:column;background:var(--paper);border-bottom:1px solid var(--hair);
    padding:18px 32px;gap:16px;margin:0}
  .section{padding:68px 0}
  .band{padding:64px 0}
  .closing{padding:72px 0 56px}
  .masthead{padding:40px 0 0}
  .mast-sub{margin:30px 0 40px}
}

/* ---------- the after-hours ledger (dark twin) ----------
   Designed as a pair with the light Document, not an inversion: the desk goes
   dark, the printed exhibits (.diagram cards) stay paper. Token values are
   canon in design/tokens.json and CI-checked for contrast per theme. */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141412;--ink:#f1f1ea;--body-c:#c9c9c0;--faint:#98988e;
    --hair:#e6e6dd;--hair-soft:#33332e;--green:#57b98d;--red:#e08472;--band:#0a0a09}
  body::before{background:
    repeating-linear-gradient(180deg,rgba(241,241,234,.045) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(90deg,rgba(241,241,234,.03) 0 1px,transparent 1px 32px)}
  .wm{opacity:.055}
  .ticker{background:#1b1b18}
  .bars .track{background:#26261f}
  .bars .track .fill.f,.bars .legend .f i{background:#5a5a52}
  .mixer .alloc,.mixer .wire{background:#26261f}
  .mixer .alloc .api,.mixer .alloc-key .a i{background:#3f6b57}
  .skip-link{color:var(--paper)}
  /* printed exhibits stay paper-white on the dark desk */
  .diagram{background:#fcfcfa;border-color:#33332e}
  /* the ink band: text tones were tuned for near-black and still hold, but the
     band must stay darker than the page */
  .band .sec-no{border-top-color:#2e2e29}
  .ledger::after{background:linear-gradient(180deg,transparent,rgba(87,185,141,.06) 42%,rgba(87,185,141,.12) 50%,rgba(87,185,141,.06) 58%,transparent)}
}