/* Aspen FT, v6. The words are set like a book; the numbers are set like the instrument.
   Paper for the argument, RAID navy for the machine. Colours, mono and the brand lockup
   come from the RAID console (raid_screens/console.css); Literata replaces Fraunces. */
:root{
  --paper:#F4F1EA; --paper2:#ECE7DC; --ink:#071E2C; --ink2:#34424D; --ink3:#66727C;
  --rule:#DAD3C4; --rule2:#C6BDAB; --teal-ink:#0A6E62; --crit-ink:#B93A33;
  /* the console's own tokens, used on the navy bands */
  --bg:#071E2C; --s1:#0d2538; --s2:#102d42; --s3:#1a3a52;
  --text:#FFFFFF; --text2:#C8D0E0; --text3:#8B93A8; --border:rgba(255,255,255,.12); --border2:rgba(255,255,255,.22);
  --teal:#00C2A8; --crit:#E05252;
  --serif:"Literata",Georgia,serif; --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --pad:48px; --gap:24px; --main:720px; --side:260px;
}
*{box-sizing:border-box;margin:0;padding:0}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
html{scroll-behavior:smooth;background:var(--paper)}
body{background:var(--paper) var(--grain);color:var(--ink2);font:400 19px/1.62 var(--serif);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* the paper's grain, painted into the paper (2026-10-15: it was a fixed full-screen layer blended over
   the whole page with mix-blend-mode, which made every scrolled frame re-blend the screen; the scroll shook) */
:root{--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .38  0 0 0 0 .31  0 0 0 .053 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
b,strong{font-weight:600;color:var(--ink)}
.wrap{max-width:1344px;margin:0 auto;padding:0 var(--pad)}
.mono,.lab,.btn,.readout,.hint,.exact,.tag,.fig,.chip,.role,.years span{font-family:var(--mono)}

/* ---- the brand lockup, the console's: mark, serif name, mono sub ---- */
.lockup{display:flex;align-items:center;gap:12px}
.mark{height:34px;width:auto;flex:none}
.lk{display:flex;flex-direction:column;gap:3px;line-height:1}
.lk b{font:600 20px/1 "Fraunces",Georgia,serif;color:var(--ink);letter-spacing:-.005em}
.lk small{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink)}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:40;background:rgba(244,241,234,.97);border-bottom:1px solid var(--rule)}   /* solid, not a blur: a blurred header re-blurs the page under it on every scrolled frame */
.nav .wrap{display:flex;align-items:center;gap:40px;height:68px}
.links{display:flex;gap:30px;margin-left:auto;font-size:16.5px;color:var(--ink2)}
.links a:hover{color:var(--ink)}

/* ---- buttons: the console's badge, grown to a button ---- */
.btn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 20px;border-radius:3px;background:var(--ink);color:var(--paper);
  font-size:13.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;transition:background .15s,box-shadow .15s}
.btn:hover{background:#000}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule2)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn.sm{height:38px;padding:0 14px;font-size:12px}
.btn.teal{background:var(--teal);color:var(--bg)}
.btn.teal:hover{background:#19D6BC}
.cta{display:flex;gap:12px;flex-wrap:wrap}

/* ---- hero ---- */
.hero{padding-top:60px}
.partner{font:500 13.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);display:flex;align-items:center;gap:12px}
.partner::before{content:"";width:26px;height:1px;background:var(--ink3)}
h1{margin-top:30px;font:400 clamp(52px,6.8vw,103px)/.97 var(--serif);letter-spacing:-.022em;color:var(--ink)}
h1 em{display:block;font-style:italic;color:var(--teal-ink)}
.hero-row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);margin-top:34px;align-items:end}
.lead{grid-column:1/8;font-size:22px;line-height:1.5}
.hero-row .cta{grid-column:9/13;justify-content:flex-end}
/* Laptops and up: the question on one line, sized so it always ends flush with the buttons' right edge
   (the line is 12.95 times the font size wide; the content is the screen less 96px, at most 1248px),
   and the lead in two lines beside tighter buttons: at 21px it needs 879px, and from a 1344px screen
   up it gets 900. Phones keep the rules in the 900px block. */
@media (min-width:901px){
  .hero h1{font-size:clamp(52px,calc(7.72vw - 7.4px),96.4px);white-space:nowrap}
  .hero h1 em{display:inline}
  .hero-row{grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center}
  .hero-row .lead{grid-column:auto;font-size:21px}
  .hero-row .cta{grid-column:auto;flex-wrap:nowrap;gap:8px}
  .hero-row .cta .btn{padding:0 14px}
}

/* ---- the instrument ---- */
.instrument{margin-top:52px}
.inst-top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.readout{font-size:13.5px;letter-spacing:.06em;color:var(--ink)}
.readout .d{color:var(--teal-ink);font-weight:500}
.readout .now{color:var(--teal-ink)}
.hint{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.plot{position:relative}
.plot::after{content:"";position:absolute;inset:0;background-image:var(--grain);pointer-events:none}   /* the chart paints flat paper, so it carries the page's grain on top to match the paper around it */
.years{position:relative;height:30px}
.years span{position:absolute;top:8px;transform:translateX(-50%);font-size:12px;letter-spacing:.06em;color:var(--ink2)}
.years span::after{content:"";position:absolute;left:50%;top:20px;width:1px;height:16px;background:var(--rule2)}
.plot canvas{display:block;width:100%;height:470px;cursor:crosshair;touch-action:pan-y}
.cap{display:flex;gap:18px;align-items:baseline;padding-top:14px;padding-bottom:6px;border-top:1px solid var(--rule);font-size:16.5px;font-style:italic;color:var(--ink3)}
.cap .fig{font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap}

/* ---- sections ---- */
.sec{padding:150px 0;position:relative}
.sec+.sec:not(.navy):not(.band)::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(100% - 2*var(--pad));max-width:1248px;border-top:1px solid var(--rule)}
.navy+.sec::before,.band+.sec::before{display:none}
.lab{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.lab .n{color:var(--teal-ink)}
h2{margin-top:22px;font:400 clamp(38px,4.1vw,60px)/1.05 var(--serif);letter-spacing:-.018em;color:var(--ink);max-width:22ch}
.row{display:grid;grid-template-columns:minmax(0,var(--main)) var(--side);column-gap:64px;margin-top:30px;align-items:start}
.row p+p{margin-top:16px}
.side{font-size:16.5px;line-height:1.55;font-style:italic;color:var(--ink3);border-top:1px solid var(--rule2);padding-top:10px}
.side .k{display:block;font:500 12px/1.4 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:6px}
.body{font-size:19px}

/* ---- a number and its exact reading ---- */
.reading{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.reading .big{font:400 clamp(96px,11vw,176px)/.8 var(--serif);letter-spacing:-.035em;color:var(--ink);font-variant-numeric:lining-nums}
.exact{font-size:13.5px;line-height:1.7;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);padding-bottom:10px;border-left:1px solid var(--rule2);padding-left:16px}
.exact b{color:var(--ink);font-weight:500}

/* ---- the failures ledger ---- */
.gap-fig{margin-top:92px}
.ledger{width:100%;border-collapse:collapse;margin-top:46px}
.ledger tr{border-top:1px solid var(--rule)}
.ledger tr:last-child{border-bottom:1px solid var(--rule)}
.ledger td{padding:17px 18px 17px 0;vertical-align:baseline}
.ledger .y{font:500 12px var(--mono);letter-spacing:.06em;color:var(--ink3);width:76px}
.ledger .nm{font-size:24px;color:var(--ink);width:30%}
.ledger .ln{font-style:italic;color:var(--ink2);font-size:16.5px}
.ledger .f{font:500 16.5px var(--mono);text-align:right;color:var(--ink);white-space:nowrap}
.ledger .kd{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);width:190px;padding-right:0}

/* ---- navy bands: the machine, in the console's own language ---- */
.navy{background:var(--bg);color:var(--text2)}
.navy b{color:var(--text)}
.navy .lab{color:var(--text3)} .navy .lab .n{color:var(--teal)}
.navy h2{color:var(--text)}
.navy .body{color:var(--text2)}
.viewer{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);margin-top:66px;align-items:start}
.tabs{grid-column:1/5;display:flex;flex-direction:column}
.tab{all:unset;cursor:pointer;display:grid;grid-template-columns:44px 1fr;row-gap:8px;padding:20px 0 22px;border-top:1px solid var(--border)}
.tab:last-child{border-bottom:1px solid var(--border)}
.tab .i{grid-row:1/3;font:500 12px/2 var(--mono);letter-spacing:.06em;color:var(--text3)}
.tab b{font:400 24px/1.2 var(--serif);color:var(--text3);transition:color .2s}
.tab .t{display:none;font-size:16.5px;line-height:1.55;color:var(--text2)}
.tab.on{border-top-color:var(--teal)} .tab.on .i{color:var(--teal)} .tab.on b{color:var(--text)} .tab.on .t{display:block}
.tab:hover b{color:var(--text)}
.tab:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.screen{grid-column:5/13;border:1px solid var(--border2);border-radius:4px;overflow:hidden;background:var(--s1);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.chrome{display:flex;justify-content:space-between;gap:16px;padding:10px 14px;background:var(--s1);border-bottom:1px solid var(--border);font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.chrome .live{color:var(--teal)}
.chrome .bars{text-align:right} .chrome .bars [data-shot]{display:none} .chrome .bars [data-shot].on{display:inline}
@media (max-width:600px){ .viewer .chrome > span:first-child{display:none} .viewer .chrome .bars{display:block;flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} }   /* a phone shows the book's name alone, on one line */
.stack{position:relative;aspect-ratio:2240/1400}
.stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.stack img.on{opacity:1}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:56px;list-style:none}
.chip{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:3px;background:var(--s2);color:var(--text2);border:1px solid var(--border)}
.navy .note{margin-top:26px;font-size:16.5px;font-style:italic;color:var(--text3);max-width:44em}

/* ---- proof ---- */
.proof-fig{margin-top:64px}
.chart{margin-top:64px}
.chart-top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .cap{margin-top:0}
svg .gain{fill:#CFC6B4} svg .loss{fill:var(--ink)} svg .hi{fill:var(--crit-ink)} svg .warn{fill:var(--ink);stroke:var(--crit-ink);stroke-width:2}
svg rect.bar{cursor:crosshair} svg rect.bar.sel{fill:var(--teal-ink)}
svg .axis{stroke:#B5AC99;stroke-width:1} svg .lbl{font:500 12px var(--mono);letter-spacing:.08em;fill:var(--ink3)}
svg .hi-t{fill:var(--crit-ink)} svg .grid{stroke:#E2DBCC;stroke-width:1} svg .diag{stroke:var(--teal-ink);stroke-width:1.2;stroke-dasharray:4 5}
svg circle.dot{fill:var(--ink);fill-opacity:.78;cursor:crosshair} svg circle.dot.big{fill:var(--teal-ink);fill-opacity:.9} svg circle.dot.sel{fill:var(--crit-ink);fill-opacity:1}
.luck{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);margin-top:140px;align-items:start}
.luck-text{grid-column:1/6}
.luck h3{font:400 44px/1.05 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.luck-text>p{margin-top:20px}
.luck .chart{grid-column:7/13;margin-top:0}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:40px}
.stats div{border-top:1px solid var(--rule2);padding:14px 0 18px}
.stats dt{font:400 44px/1 var(--serif);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:lining-nums}
.stats dd{margin-top:10px;font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.fed{margin-top:72px}

/* ---- where it goes ---- */
.band{background:var(--paper2) var(--grain)}
.roadmap{list-style:none;margin-top:72px;border-top:1px solid var(--ink)}
.roadmap li{display:grid;grid-template-columns:64px 280px 1fr auto;column-gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule2)}
.roadmap .i{font:500 12px var(--mono);letter-spacing:.06em;color:var(--teal-ink)}
.roadmap b{font:400 24px/1.25 var(--serif);color:var(--ink)}
.roadmap .t{font-size:16.5px}
.tag{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);border:1px solid rgba(10,110,98,.4);border-radius:3px;padding:5px 9px}

/* ---- team ---- */
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:36px;margin-top:60px}
.founder img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.founder h3{margin-top:18px;font:400 24px/1.15 var(--serif);color:var(--ink)}
.role{margin-top:8px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.founder .bio{margin-top:10px;font-size:16.5px;line-height:1.55}
.adv-h{margin-top:88px}
.advisors{list-style:none;margin-top:18px;border-top:1px solid var(--ink)}
.advisors li{display:grid;grid-template-columns:56px 280px 1fr;column-gap:22px;align-items:center;padding:15px 0;border-bottom:1px solid var(--rule)}
.advisors img{width:56px;height:56px;object-fit:cover;border-radius:3px}
.advisors h4{font:400 19px/1.2 var(--serif);color:var(--ink)}
.advisors .bio{font-size:16.5px}

/* ---- the ask ---- */
.ask{padding:160px 0 130px}
.ask h2{font-size:clamp(56px,7.4vw,112px);line-height:.97;max-width:12ch}
.ask .body{margin-top:28px;max-width:30em}
.ask .cta{margin-top:40px}
.investors{margin-top:80px;padding-top:16px;border-top:1px solid var(--border);font:500 12px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.investors a{color:var(--teal);text-transform:none;letter-spacing:.02em}
.foot{background:var(--bg);border-top:1px solid var(--border)}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;height:96px;font:500 12px var(--mono);letter-spacing:.06em;color:var(--text3)}
.foot .lk b{color:var(--text)} .foot .lk small{color:var(--teal)}

/* ---- phone ---- */
@media (max-width:900px){
  :root{--pad:20px}
  body{font-size:17.5px}
  .links{display:none} .nav .btn{margin-left:auto}
  .lk small{display:none}
  .nav .btn{white-space:nowrap;padding:0 12px}
  .partner::before{display:none}
  .plot canvas{height:300px}
  .ledger .nm{width:auto}
  .hero{padding-top:36px}
  h1{font-size:clamp(42px,11.8vw,59px)}
  .hero-row{display:block;margin-top:22px}
  .lead{font-size:18.5px}
  .hero-row .cta{justify-content:flex-start;margin-top:24px}
  .instrument{margin-top:36px}
  .inst-top{display:block}
  .hint{display:none}
  .years span{font-size:12px}
  .years span.minor{display:none}
  .cap{display:block} .cap .fig{display:block;margin-bottom:6px}
  .sec{padding:92px 0}
  h2{font-size:36px}
  .row{grid-template-columns:1fr;row-gap:22px}
  .body{font-size:17.5px}
  .reading{gap:14px}
  .exact{border-left:none;padding-left:0}
  .ledger .ln,.ledger .kd{display:none}
  .ledger .nm{font-size:20px}
  .viewer,.luck{display:block}
  .tabs{flex-direction:row;overflow-x:auto;margin-bottom:16px}
  .tab{min-width:200px;padding:12px 14px 14px 0;border-bottom:none!important}
  .tab .t{display:none!important} .tab b{font-size:20px}
  .chart.wide{overflow-x:auto}
  .chart.wide svg{min-width:720px}
  .luck{margin-top:96px}
  .luck .chart{margin-top:40px}
  .stats dt{font-size:34px}
  .roadmap li{grid-template-columns:44px 1fr;row-gap:6px}
  .roadmap .t,.roadmap .tag{grid-column:2} .roadmap .tag{justify-self:start;margin-top:6px}
  .founders{grid-template-columns:1fr 1fr;gap:16px}
  .founder h3{font-size:20px}
  .advisors li{grid-template-columns:56px 1fr} .advisors .bio{grid-column:1/-1;margin-top:10px}
  .ask{padding:100px 0 90px}
  .foot .wrap{flex-direction:column;justify-content:center;align-items:flex-start;height:auto;padding-top:28px;padding-bottom:28px}
}
@media (prefers-reduced-motion:reduce){ .stack img{transition:none} html{scroll-behavior:auto} }

/* ======================= the rest of the site, same system ======================= */

/* nav: the current page, and the phone menu */
.links a{padding:6px 0;border-bottom:2px solid transparent}
.links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--teal-ink)}
.links .menu-cta{display:none}
.nav-toggle{display:none}
.lockup-link{display:inline-flex}

/* an inner page opens with a label, a big line and a lead */
.page-head{padding:92px 0 36px}
.h1p{margin-top:26px;font:400 clamp(48px,6vw,88px)/1 var(--serif);letter-spacing:-.02em;color:var(--ink);max-width:17ch}
.page-head .lead{margin-top:28px;max-width:34em}

/* the link that ends a home section and points to its page */
.more{display:inline-flex;align-items:center;gap:10px;margin-top:48px;font:500 13.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);border-bottom:1px solid currentColor;padding-bottom:6px}
.more:hover{color:var(--ink)}
.navy .more{color:var(--teal)} .navy .more:hover{color:var(--text)}

/* a numbered list, set like a ledger */
.list{list-style:none;margin-top:56px;border-top:1px solid var(--ink);max-width:980px}
.list li{display:grid;grid-template-columns:64px 1fr;column-gap:24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule2);font-size:22px;line-height:1.35;color:var(--ink)}
.list .i{font:500 12px var(--mono);letter-spacing:.06em;color:var(--teal-ink)}

/* the tour: each screen beside what it does, in the console's own colours */
.tour{margin-top:72px;display:flex;flex-direction:column;gap:104px}
.tour-row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:center}
.tour-text{grid-column:1/5}
.tour-shot{grid-column:5/13}
.tour-row.flip .tour-text{grid-column:9/13;grid-row:1}
.tour-row.flip .tour-shot{grid-column:1/9;grid-row:1}
.tour-text .i{font:500 12px var(--mono);letter-spacing:.06em;color:var(--teal)}
.tour-text h3{margin-top:14px;font:400 44px/1.05 var(--serif);letter-spacing:-.015em;color:var(--text)}
.tour-text p{margin-top:16px;font-size:16.5px;line-height:1.6;color:var(--text2)}
.tour-shot{display:block;border:1px solid var(--border2);border-radius:4px;overflow:hidden;background:var(--s1);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);cursor:zoom-in}
.tour-shot img{display:block;width:100%;height:auto}
.tour-note{margin-top:72px}

/* three steps */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gap);margin-top:56px}
.steps3>div{border-top:1px solid var(--ink);padding-top:18px}
.steps3 .i{font:500 12px var(--mono);letter-spacing:.06em;color:var(--teal-ink)}
.steps3 h3{margin-top:12px;font:400 24px/1.2 var(--serif);color:var(--ink)}
.steps3 p{margin-top:12px;font-size:16.5px}

/* what it takes to run: the checklist as tags on paper */
.checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;list-style:none}
.checks li{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:9px 12px;border-radius:3px;border:1px solid var(--rule2);color:var(--ink2)}
.fine{margin-top:22px;font-size:16.5px;font-style:italic;color:var(--ink3)}

/* built, and next */
.cols2{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;margin-top:56px}
.colk{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);padding-bottom:12px;border-bottom:1px solid var(--ink)}
.cols2 ul{list-style:none}
.cols2 li{padding:13px 0;border-bottom:1px solid var(--rule2);font-size:19px;color:var(--ink)}
.cols2 .later li{color:var(--ink2)}
.cols2 .later .colk{color:var(--ink3)}

/* proof: the fund's figures, set like a table in a paper */
.spec{width:100%;max-width:var(--main);border-collapse:collapse;margin-top:48px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.spec td{padding:12px 0;border-bottom:1px solid var(--rule);font-size:16.5px;vertical-align:baseline}
.spec tr:last-child td{border-bottom:none}
.spec td.v{text-align:right;font:500 13.5px var(--mono);letter-spacing:.04em;color:var(--ink);white-space:nowrap;padding-left:24px}
.punch{margin-top:44px;font-size:22px;line-height:1.45;max-width:var(--main)}
.lists{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;margin-top:88px}
.lists ol{list-style:none;margin-top:14px;columns:2;column-gap:28px;border-top:1px solid var(--ink)}
.lists li{padding:8px 0;border-bottom:1px solid var(--rule);font-size:16.5px;break-inside:avoid}
.realx{list-style:none;margin-top:44px;max-width:var(--main);border-top:1px solid var(--ink)}
.realx li{padding:18px 0;border-bottom:1px solid var(--rule2)}

/* who it's for: one desk at a time */
.desks{margin-top:8px}
.desk{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);padding:48px 0 56px;border-top:1px solid var(--ink);scroll-margin-top:90px}
.desk .who{grid-column:1/6}
.desk .cmp{grid-column:7/13;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap)}
.desk .dl{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.desk .tag{display:inline-block;margin-top:12px}
.desk .moment{margin-top:16px;font:400 24px/1.3 var(--serif);color:var(--ink)}
.desk .q{margin-top:14px;font:italic 400 22px/1.35 var(--serif);color:var(--teal-ink)}
.card{border-top:1px solid var(--rule2);padding-top:12px}
.card .k{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.card p{margin-top:10px;font-size:16.5px}
.card.with{border-top:2px solid var(--teal-ink)}
.card.with .k{color:var(--teal-ink)}
.card.with p{color:var(--ink)}

/* company */
.opener{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;margin-top:40px;max-width:1120px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gap);margin-top:56px}
.cols3>div{border-top:1px solid var(--ink);padding-top:18px}
.cols3 h3,.principles h3{font:400 24px/1.2 var(--serif);color:var(--ink)}
.cols3 p,.principles p{margin-top:12px;font-size:16.5px}
.principles{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:56px}
.principles>div{border-top:1px solid var(--ink);padding:18px 0 36px}
.raise .cta{margin-top:36px}
.raise .more{margin-top:40px}

/* the ask, with the request form, in the console's colours */
.ask-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
.ask-grid .copy{grid-column:1/6}
.ask-grid .form-card{grid-column:7/13}
.form-card{position:relative;background:var(--s1);border:1px solid var(--border2);border-radius:4px;padding:30px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label,.flabel{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.field input{box-sizing:border-box;width:100%;height:48px;padding:0 14px;border:1px solid var(--border2);border-radius:3px;background:var(--bg);color:var(--text);font:400 16.5px var(--serif);outline:none;-webkit-appearance:none;appearance:none}
.field input::placeholder{color:#66738A}
.field input:focus{border-color:var(--teal)}
.field input.bad{border-color:var(--crit)}
.err{font:500 12px var(--mono);letter-spacing:.04em;color:var(--crit)}
.err:empty{display:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.chips-sel{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{all:unset;cursor:pointer;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:11px 12px;border-radius:3px;border:1px solid var(--border2);color:var(--text2)}
.chip-btn:hover{border-color:var(--teal)}
.chip-btn[aria-pressed="true"]{background:var(--teal);color:var(--bg);border-color:var(--teal)}
.chip-btn:focus-visible,.submit:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.submit{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 20px;margin-top:8px;border-radius:3px;background:var(--teal);color:var(--bg);font:500 13.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.submit:hover{background:#19D6BC}
.submit[disabled]{opacity:.6;cursor:default}
.priv{margin-top:16px;font-size:16.5px;font-style:italic;color:var(--text3)}
.priv a,.alt a{color:var(--teal)}
.success{display:none}
.form-card.done form{display:none}
.form-card.done .success{display:block}
.success .check{width:44px;height:44px;border-radius:50%;background:var(--teal);color:var(--bg);display:flex;align-items:center;justify-content:center;font:500 22px var(--mono)}
.success h3{margin-top:16px;font:400 24px var(--serif);color:var(--text)}
.success p{margin-top:8px;color:var(--text2)}
.alt{margin-top:24px;font-size:16.5px;color:var(--text3)}

/* full-size screens */
.lightbox{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:rgba(7,30,44,.94);padding:40px}
.lightbox.on{display:flex}
.lightbox img{max-width:min(1500px,100%);max-height:82vh;border:1px solid var(--border2);border-radius:4px}
.lightbox figcaption{font:italic 400 16.5px var(--serif);color:var(--text2);max-width:60em;text-align:center}
.lightbox-close{all:unset;cursor:pointer;position:absolute;top:18px;right:26px;font:400 36px/1 var(--serif);color:var(--text)}

.nf{padding:180px 0 200px}

@media (max-width:900px){
  .nav .wrap{gap:14px}
  .nav .nav-cta{display:none}
  .nav-toggle{display:inline-flex;margin-left:auto;align-items:center;height:38px;padding:0 14px;border-radius:3px;border:1px solid var(--rule2);background:transparent;color:var(--ink);font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
  .links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:8px 20px 22px;background:var(--paper);border-bottom:1px solid var(--rule)}
  .links.open{display:flex}
  .links a{padding:14px 0;border-bottom:1px solid var(--rule);font-size:19px}
  .links a[aria-current="page"]{border-bottom-color:var(--teal-ink)}
  .links .menu-cta{display:inline-flex;align-self:flex-start;margin:18px 0 0;border-bottom:none;padding:0 18px;font-size:13.5px;color:var(--paper)}
  .page-head{padding:48px 0 16px}
  .h1p{font-size:clamp(40px,11vw,56px)}
  .list li{font-size:19px;grid-template-columns:40px 1fr}
  .tour{gap:72px;margin-top:48px}
  .tour-row{display:block}
  .tour-text h3{font-size:34px}
  .tour-shot{margin-top:20px}
  .steps3,.cols2,.cols3,.principles,.opener,.lists,.ask-grid,.desk,.desk .cmp,.row2{display:block}
  .steps3>div+div,.cols3>div+div{margin-top:30px}
  .cols2 .later{margin-top:44px}
  .lists ol{columns:1}
  .lists>div+div{margin-top:40px}
  .desk{padding:36px 0 40px}
  .desk .cmp{margin-top:26px}
  .card+.card{margin-top:20px}
  .opener p+p{margin-top:18px}
  .ask-grid .form-card{margin-top:40px;padding:22px}
  .spec td.v{white-space:normal}
  .nf{padding:110px 0 130px}
}
.ask-grid h2{font-size:clamp(38px,4.1vw,60px);line-height:1.04;max-width:11ch}
.ask-grid .body{margin-top:24px}

/* who it's for: the tabs under the headline, one per desk, and the menu's list of desks */
.desk-tabs{scroll-margin-top:68px}
.tabrow{display:flex;gap:30px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--rule)}
.tabrow::-webkit-scrollbar{display:none}
.tabrow a{flex:none;padding:16px 0 13px;margin-bottom:-1px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);border-bottom:2px solid transparent}
.tabrow a:hover{color:var(--ink)}
.tabrow a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--teal-ink)}
.desk-tabs+.sec{padding-top:64px}   /* room between the tab row and the first use cases */
.sec#proof{padding:96px 0 104px}
.drop{position:relative;display:flex;align-items:center}
.drop>a::after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 3px 9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.links a.here{color:var(--ink);border-bottom-color:var(--teal-ink)}
.drop-menu{position:absolute;top:100%;left:-20px;z-index:45;display:none;flex-direction:column;min-width:210px;padding:10px 0;background:var(--paper);border:1px solid var(--rule);border-radius:3px;box-shadow:0 22px 44px -26px rgba(7,30,44,.4)}
.drop:hover .drop-menu,.drop:focus-within .drop-menu{display:flex}
.links .drop-menu a{padding:9px 20px;border-bottom:none;font-size:16.5px;white-space:nowrap}
.links .drop-menu a:hover{background:var(--paper2)}
.links .drop-menu a[aria-current="page"]{color:var(--teal-ink)}
@media (max-width:900px){
  .tabrow{gap:22px}
  .drop{display:block}
  .drop>a{display:block}
  .drop>a::after{display:none}
  .drop-menu{position:static;display:flex;min-width:0;padding:0 0 4px 18px;border:none;border-radius:0;box-shadow:none;background:transparent}
  .links .drop-menu a{padding:12px 0;border-bottom:1px solid var(--rule);font-size:17px;white-space:normal}
  .links .drop-menu a:hover{background:transparent}
}

/* industry pages: the use cases as headings with one line each, the proof under them, the overview's cards */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:48px}
.case{border-top:1px solid var(--ink);padding-top:18px}
.case h3{font:400 30px/1.15 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.case p{margin-top:12px;font-size:19px;line-height:1.55;max-width:30em}
.proofs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);row-gap:40px;align-items:start}
.proof{border-top:1px solid var(--rule2);padding-top:18px}
.proof .pf{display:block;font:400 clamp(48px,5.4vw,80px)/1 var(--serif);letter-spacing:-.025em;color:var(--ink);font-variant-numeric:lining-nums}
.proof p{margin-top:16px;font-size:17px;line-height:1.5;max-width:24em}
.proof.word .pf{font-size:clamp(28px,2.8vw,40px);letter-spacing:-.01em}
.ucs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:48px}
.uc-card{display:flex;flex-direction:column;align-items:flex-start;padding-top:18px;border-top:1px solid var(--ink);color:var(--ink2)}
.uc-card .ind{font:400 34px/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.uc-card p{margin-top:12px;font-size:18px;line-height:1.5;max-width:30em}
.uc-card .go{margin-top:16px;color:var(--teal-ink)}
.uc-card:hover .ind{color:var(--teal-ink)}
@media (max-width:900px){
  .cases,.proofs,.ucs{grid-template-columns:1fr}
  .desk-tabs+.sec{padding-top:40px}
  .sec#proof{padding:64px 0 72px}
  .case h3{font-size:26px}
  .uc-card .ind{font-size:28px}
}

/* who it's for, second pass: a smaller opening so the content leads, the use cases with what you get,
   and "select an industry" as a menu that switches in place */
.page-head.small{padding:80px 0 28px}
.h1i{margin-top:22px;font:400 clamp(34px,3.7vw,54px)/1.08 var(--serif);letter-spacing:-.015em;color:var(--ink);max-width:22ch}
.page-head.small .lead{margin-top:20px;font-size:20px;max-width:36em}
.case p{font-size:18.5px}
.gets{list-style:none;margin-top:18px;border-top:1px solid var(--rule)}
.gets li{position:relative;padding:10px 0 10px 22px;border-bottom:1px solid var(--rule);font-size:16.5px;line-height:1.45;color:var(--ink2)}
.gets li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:1.5px;background:var(--teal-ink)}
.explorer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:calc(var(--gap)*2);align-items:start}
.ex-tabs{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.ex-tab{all:unset;cursor:pointer;display:block;padding:20px 0 22px 18px;border-bottom:1px solid var(--rule);border-left:2px solid transparent}
.ex-tab b{display:block;font:400 30px/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink3);transition:color .15s}
.ex-tab span{display:block;margin-top:8px;font-size:16px;line-height:1.4;color:var(--ink3)}
.ex-tab:hover b,.ex-tab.on b{color:var(--ink)}
.ex-tab.on{border-left-color:var(--teal-ink)}
.ex-tab.on span{color:var(--ink2)}
.ex-tab:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px}
.ex-panel .ex-lead{font-size:20px;line-height:1.5;color:var(--ink)}
.ex-cases{list-style:none;margin-top:22px;border-top:1px solid var(--ink)}
.ex-cases a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:var(--gap);padding:16px 0;border-bottom:1px solid var(--rule);color:inherit}
.ex-cases b{font:400 22px/1.25 var(--serif);color:var(--ink);font-weight:400}
.ex-cases span{font-size:16.5px;line-height:1.5;color:var(--ink2)}
.ex-cases a:hover b{color:var(--teal-ink)}
.ex-panel .more{margin-top:28px}
.explorer.js .ex-panel[hidden]{display:none}
.explorer:not(.js) .ex-panel{margin-bottom:56px}
@media (max-width:900px){
  .page-head.small{padding:44px 0 16px}
  .page-head.small .lead{font-size:18px}
  .explorer{display:block}
  .ex-tabs{flex-direction:row;overflow-x:auto;border-top:none;border-bottom:1px solid var(--rule);margin-bottom:24px;scrollbar-width:none}
  .ex-tab{flex:none;padding:12px 18px 12px 0;border-left:none;border-bottom:2px solid transparent}
  .ex-tab b{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
  .ex-tab span{display:none}
  .ex-tab.on{border-bottom-color:var(--teal-ink)}
  .ex-cases a{grid-template-columns:1fr;row-gap:6px}
}
.case.soon{border-top-color:var(--rule2)}
.case.soon h3{color:var(--ink3)}
.case.soon p{color:var(--ink3);font-style:italic}
.small+.sec{padding-top:56px}
@media (max-width:900px){ .small+.sec{padding-top:28px} }
.proofs.one{grid-template-columns:1fr}
.proofs.one .proof{display:grid;grid-template-columns:auto minmax(0,30em);column-gap:56px;align-items:end}
.proofs.one .proof p{margin-top:0;font-size:20px;line-height:1.5;padding-bottom:8px}
@media (max-width:900px){ .proofs.one .proof{display:block} .proofs.one .proof p{margin-top:16px;font-size:17.5px} }

/* industry pages, third pass: the headline beside a console screen, the proof in big figures on navy
   with a picture of each, and the use cases set tighter and quieter */
.ih{padding:64px 0 40px}
.ih-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:calc(var(--gap)*2.5);align-items:center}
.ih .h1i{font-size:clamp(32px,3.3vw,50px)}
.ih .lead{font-size:19px}
.ih-shot{margin:0;border:1px solid rgba(7,30,44,.25);border-radius:6px;overflow:hidden;background:var(--bg);box-shadow:0 44px 90px -46px rgba(7,30,44,.7)}
.ih-shot .chrome{padding:9px 14px}
.ih-shot img{display:block;width:100%;height:auto}
.ih + .desk-tabs + .sec{padding-top:0}
.desk-tabs + .sec.navy{margin-top:40px;padding:88px 0 96px}
.pbig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(var(--gap)*2.5);row-gap:56px}
.pbig.n1{grid-template-columns:minmax(0,1fr)}
.pb-viz{border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:26px}
.pb .viz{display:block;width:100%;max-width:600px;height:auto;overflow:visible}
.pb-n{display:block;font:400 clamp(84px,9.5vw,152px)/.86 var(--serif);letter-spacing:-.035em;color:var(--text);font-variant-numeric:lining-nums}
.pb p{margin-top:22px;font-size:19px;line-height:1.5;color:var(--text2);max-width:30em}
.pbig.n1 .pb{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:calc(var(--gap)*2.5);align-items:end}
.pbig.n1 .pb-viz{grid-column:2;grid-row:1/3;border-bottom:none;margin:0;padding:0;align-self:center}
.pbig.n1 .pb-n{grid-column:1;grid-row:1}
.pbig.n1 .pb p{grid-column:1;grid-row:2}
.viz .span{stroke:var(--teal);stroke-width:3}
.viz .tk{stroke:rgba(0,194,168,.55);stroke-width:1.5}
.viz circle.a{fill:var(--teal)} .viz circle.b{fill:var(--crit)}
.viz circle.d{fill:var(--teal)}
.viz .lb{font:500 12px var(--mono);letter-spacing:.08em;fill:var(--text2)}
.viz .val{font:500 15px var(--mono);fill:var(--text)}
.viz rect.ba{fill:var(--teal)} .viz rect.bb{fill:var(--text2)}
.cases{row-gap:40px}
.case h3{font-size:25px}
.case p{font-size:17px;line-height:1.5}
.gets{margin-top:12px;border-top:none}
.gets li{padding:3px 0 3px 20px;border-bottom:none;font-size:15.5px}
.gets li::before{top:14px;width:9px}
@media (max-width:900px){
  .ih{padding:40px 0 20px}
  .ih-grid{display:block}
  .ih-shot{margin-top:28px}
  .desk-tabs + .sec.navy{margin-top:24px;padding:56px 0 64px}
  .pbig,.pbig.n1 .pb{display:block}
  .pb + .pb{margin-top:56px}
  .pbig.n1 .pb-viz{margin-top:24px}
  .pb-n{font-size:clamp(64px,19vw,96px)}
}
.pbig.n2 .pb-viz{min-height:98px;display:flex;align-items:flex-end}   /* the two figures line up whatever their pictures' heights */
.pbig.n1 .pb{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.pbig.n1 .pb-n{font-size:clamp(72px,8vw,128px)}
.sec.navy#proof + .sec#cases{padding-top:96px}
@media (max-width:900px){ .sec.navy#proof + .sec#cases{padding-top:56px} }
.pb-n,.pbig.n1 .pb-n{font-size:clamp(48px,4.6vw,68px);line-height:1;letter-spacing:-.02em}   /* a figure, not a poster */
.pb p{margin-top:16px}
@media (max-width:900px){ .pb-n,.pbig.n1 .pb-n{font-size:48px} }

/* ---- home, 30 September: the tabs move on by themselves, the proof figures on paper, the way in to each industry ---- */
.tab{position:relative}
.tab .prog{position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left center}
.viewer.auto .tab.on{border-top-color:var(--border)}
.viewer.auto .tab.on .prog{transition:transform .1s linear}   /* site.js scales the bar as the screen's time runs: a scale, not a width, so nothing is laid out again */
.gap-fig .big{font-size:clamp(64px,6.4vw,96px)}
.mores{display:flex;flex-wrap:wrap;column-gap:36px;margin-top:48px}
.mores .more{margin-top:0}
#proof .pbig{margin-top:64px}
.pbig.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
.pbig.n3 .pb:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:calc(var(--gap)*2.5);align-items:end}
.pbig.n3 .pb:first-child .pb-viz{grid-column:2;grid-row:1/3;border-bottom:none;margin:0;padding:0;align-self:center}
.pbig.n3 .pb:first-child .pb-n{grid-column:1;grid-row:1}
.pbig.n3 .pb:first-child p{grid-column:1;grid-row:2}
.pbig.n3 .pb:not(:first-child) .pb-viz{min-height:98px;display:flex;align-items:flex-end}
.sec:not(.navy) .pb-viz{border-bottom-color:var(--rule2)}
.sec:not(.navy) .pb-n{color:var(--ink)}
.sec:not(.navy) .pb p{color:var(--ink2)}
.sec:not(.navy) .viz .span{stroke:var(--teal-ink)}
.sec:not(.navy) .viz .tk{stroke:rgba(10,110,98,.45)}
.sec:not(.navy) .viz circle.a,.sec:not(.navy) .viz circle.d{fill:var(--teal-ink)}
.sec:not(.navy) .viz circle.b{fill:var(--crit-ink)}
.sec:not(.navy) .viz .lb{fill:var(--ink3)}
.sec:not(.navy) .viz .val{fill:var(--ink)}
.sec:not(.navy) .viz rect.ba{fill:var(--teal-ink)}
.sec:not(.navy) .viz rect.bb{fill:var(--rule2)}
@media (max-width:900px){
  .pbig.n3 .pb:first-child{display:block}
  .pbig.n3 .pb:first-child .pb-viz{margin-top:24px}
  .mores{flex-direction:column;row-gap:22px}
  .mores .more{align-self:flex-start}
}

/* ---- how it works, 30 September: the science beside Attilio, the crisis replay (no script), security ---- */
.rlead{margin-top:22px;max-width:40em}
.science{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
.science>div{grid-column:1/8}
.science h2{max-width:18ch}
.science .body{margin-top:26px;max-width:36em}
.smbc{margin-top:26px;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.who-card{grid-column:9/13;margin-top:38px}
.who-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px;display:block}
.who-card figcaption{margin-top:14px}
.who-card b{display:block;font:400 22px/1.2 var(--serif);color:var(--ink)}
.who-card span{display:block;margin-top:6px;font-size:16px;line-height:1.5;color:var(--ink2)}
.replay{margin-top:36px}
.replay input{position:absolute;opacity:0;pointer-events:none}
.rtabs{display:flex;flex-wrap:wrap;gap:6px 26px;border-bottom:1px solid var(--rule2)}
.rtabs label{cursor:pointer;padding:12px 0 10px;margin-bottom:-1px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);border-bottom:2px solid transparent}
.rtabs label:hover{color:var(--ink)}
.replay input:focus-visible~.rtabs{outline:2px solid var(--teal-ink);outline-offset:6px}
.rkey{display:flex;gap:28px;margin-top:22px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.rkey i{display:inline-block;width:18px;height:10px;border-radius:2px;margin-right:8px}
.rkey .kp,.rrow .bar.p{background:var(--teal-ink)} .rkey .ka,.rrow .bar.a{background:#B9B0A0}
.rpanels{margin-top:14px}
.rpanel{display:none}
.rrow{display:grid;grid-template-columns:300px 1fr;align-items:center;column-gap:24px;padding:9px 0;border-top:1px solid var(--rule2)}
.rrow:last-child{border-bottom:1px solid var(--rule2)}
.rname{font-size:17px;color:var(--ink)}
.rplot{position:relative;display:block;height:34px}
.rplot .zero{position:absolute;top:-9px;bottom:-9px;width:1px;background:var(--ink)}
.rrow .bar{position:absolute;height:13px;border-radius:2px;animation:grow .8s cubic-bezier(.2,.7,.2,1) both}
.rrow .bar.p{top:2px} .rrow .bar.a{top:19px;animation-delay:.12s}
.rrow .val{position:absolute;margin:0 8px;font:500 12px var(--mono);color:var(--ink);white-space:nowrap}
.rrow .val.p{top:0} .rrow .val.a{top:17px;color:var(--ink3)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.secure{row-gap:40px}
.secure h3{font-size:22px}
.replay input:nth-of-type(1):checked~.rtabs label:nth-of-type(1){color:var(--ink);border-bottom-color:var(--teal-ink)}.replay input:nth-of-type(1):checked~.rpanels .rpanel:nth-of-type(1){display:block}
.replay input:nth-of-type(2):checked~.rtabs label:nth-of-type(2){color:var(--ink);border-bottom-color:var(--teal-ink)}.replay input:nth-of-type(2):checked~.rpanels .rpanel:nth-of-type(2){display:block}
.replay input:nth-of-type(3):checked~.rtabs label:nth-of-type(3){color:var(--ink);border-bottom-color:var(--teal-ink)}.replay input:nth-of-type(3):checked~.rpanels .rpanel:nth-of-type(3){display:block}
.replay input:nth-of-type(4):checked~.rtabs label:nth-of-type(4){color:var(--ink);border-bottom-color:var(--teal-ink)}.replay input:nth-of-type(4):checked~.rpanels .rpanel:nth-of-type(4){display:block}
.replay input:nth-of-type(5):checked~.rtabs label:nth-of-type(5){color:var(--ink);border-bottom-color:var(--teal-ink)}.replay input:nth-of-type(5):checked~.rpanels .rpanel:nth-of-type(5){display:block}
.replay input:nth-of-type(6):checked~.rtabs label:nth-of-type(6){color:var(--ink);border-bottom-color:var(--teal-ink)}.replay input:nth-of-type(6):checked~.rpanels .rpanel:nth-of-type(6){display:block}
.replay input:nth-of-type(7):checked~.rtabs label:nth-of-type(7){color:var(--ink);border-bottom-color:var(--teal-ink)}.replay input:nth-of-type(7):checked~.rpanels .rpanel:nth-of-type(7){display:block}
.replay input:nth-of-type(8):checked~.rtabs label:nth-of-type(8){color:var(--ink);border-bottom-color:var(--teal-ink)}.replay input:nth-of-type(8):checked~.rpanels .rpanel:nth-of-type(8){display:block}
@media (prefers-reduced-motion:reduce){.rrow .bar{animation:none}}
@media (max-width:900px){
  .science{display:block}
  .who-card{max-width:260px;margin-top:40px}
  .rrow{grid-template-columns:1fr;row-gap:8px}
  .rname{font-size:16px}
  .secure{row-gap:28px}
}
#proof .note{margin-top:18px;font:500 12px/1.6 var(--mono);letter-spacing:.06em;color:var(--ink3)}
/* the methodology: five points under the lead, the "where RAID looked" figure */
.mpoints{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(var(--gap)*2.5);row-gap:34px;margin-top:64px;max-width:1100px}
.mpoints>div{border-top:1px solid var(--ink);padding-top:16px}
.mpoints h3{font:400 24px/1.2 var(--serif);color:var(--ink)}
.mpoints p{margin-top:10px;font-size:17px}
.who-card em{display:block;margin-top:4px;font:500 12px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.memfig{margin-top:88px}
.memfig .lab{margin-bottom:18px}
.mem{display:block;width:100%;height:auto;overflow:visible}
.mem .yr{stroke:#E2DBCC;stroke-width:1} .mem .yt{font:500 12px var(--mono);fill:var(--ink3)}
.mem .ma{fill:rgba(10,110,98,.16)} .mem .me{fill:none;stroke:var(--teal-ink);stroke-width:1.6} .mem .mb{stroke:var(--ink);stroke-width:1}
.mem .mn{stroke:var(--crit-ink);stroke-width:1.4} .mem .md{fill:var(--crit-ink)}
.mem .mt{font:400 20px var(--serif);fill:var(--ink)} .mem .mdte{font:500 12px var(--mono);letter-spacing:.08em;fill:var(--ink3)}
.mem .mg{font:500 13px var(--mono);letter-spacing:.04em;fill:var(--teal-ink)}
.memfig .cap{margin-top:12px}
#method .smbc{margin-top:40px}
@media (max-width:900px){
  .mpoints{grid-template-columns:1fr;row-gap:26px;margin-top:40px}
  .memfig{margin-top:56px}
  .mem .yt{font-size:20px} .mem .mt{font-size:28px} .mem .mdte{font-size:18px} .mem .mg{font-size:20px}
}
/* phones get the narrower drawing: half the width, so the same labels read about twice as large */
.mem-narrow{display:none}
@media (max-width:600px){
  .mem-wide{display:none} .mem-narrow{display:block}
  .mem-narrow .yt{font-size:19px} .mem-narrow .mt{font-size:30px} .mem-narrow .mdte{font-size:19px} .mem-narrow .mg{font-size:21px}
}

/* the credit to Attilio, small: thumbnail, name, role, one line */
.science.one>div{grid-column:1/10}
.credit{display:flex;align-items:center;gap:16px;margin-top:28px;padding-top:16px;border-top:1px solid var(--rule2);max-width:40em}
.credit img{width:56px;height:56px;object-fit:cover;border-radius:3px;display:block}
.credit b{display:block;font:400 19px/1.2 var(--serif);color:var(--ink)}
.credit em{display:block;margin-top:3px;font:500 12px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.credit span{display:block;margin-top:4px;font-size:15.5px;line-height:1.45;color:var(--ink2)}

/* How each proof was produced: small type under the picture. On single-proof pages the picture takes the
   figure's row and the note the caption's row, so the note sits directly under the timeline. */
.pb .pb-how{margin-top:14px;font-size:14px;line-height:1.55;color:var(--text3);max-width:34em}
.pb .pb-how b{display:block;margin-bottom:6px;font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.pbig.n1 .pb:has(.pb-how) .pb-viz{grid-row:1}
.pbig.n1 .pb .pb-how{grid-column:2;grid-row:2;align-self:start;margin-top:18px}
.pbig.n1 .pb:has(.pb-how) > p:not(.pb-how){align-self:start}   /* the caption stays under the figure */
/* ---- the demo button stays in the top bar on phones; the menu then does not repeat it ---- */
@media (max-width:900px){
  .nav .nav-cta{display:inline-flex}
  .nav .nav-cta + .nav-toggle{margin-left:0}
  .links .menu-cta{display:none}
}
/* ---- privacy: a plain page, linked quietly from the footer ---- */
.foot .priv-link{color:inherit;text-decoration:underline;text-underline-offset:3px}
.policy-page{padding:120px 0 140px}
.policy{max-width:40em;margin-top:28px}
.policy .body{margin-top:18px}
.policy .date{margin-top:28px;font:500 12px var(--mono);letter-spacing:.06em;color:var(--text3)}
@media (max-width:900px){ .policy-page{padding:72px 0 96px} }
/* ---- small phones: the word "Menu" becomes an icon so the name, the demo button and the menu share one row ---- */
@media (max-width:430px){
  .nav .wrap{gap:10px}
  .lk b{white-space:nowrap}
  .nav .nav-cta{padding:0 10px;font-size:11.5px}
  .nav-toggle{font-size:0;width:40px;padding:0;justify-content:center}
  .nav-toggle::before{content:"";display:block;width:16px;height:11px;
    background:linear-gradient(currentColor,currentColor) 0 0/100% 1.5px no-repeat,
               linear-gradient(currentColor,currentColor) 0 50%/100% 1.5px no-repeat,
               linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat}
  .nav-toggle[aria-expanded="true"]::before{content:"\00d7";width:auto;height:auto;background:none;font:400 24px/1 var(--mono)}
}

/* ---- the line above the ridgeline names the market event behind the month being read ---- */
.readout .ev{font-weight:500;color:var(--ink)}

/* Pricing: a short block under the vision on the home page, and one line in the closing band on every page */
#vision .price{margin-top:40px;padding-top:28px;border-top:1px solid var(--rule);max-width:36em}
#vision .price h3{font:400 clamp(24px,2.4vw,30px)/1.2 var(--serif);color:var(--ink)}
#vision .price .body{margin-top:12px}
.ask .ask-note{margin-top:22px;font:500 12px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}

/* ---- industry pages: the data block spans the page under the job cards, its three lines in a row ---- */
.case.data{grid-column:1/-1}
.case.data p{max-width:none}
@media (min-width:901px){
  .case.data .gets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
}

/* ---- an advisor without a photo yet: initials in the photo's square ---- */
.advisors .mono{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:3px;background:var(--rule);color:var(--ink2);font:400 20px/1 var(--serif)}

/* ---- the ridgeline: the name of the line being pointed at, in the hint's place ---- */
.hint.on{font-size:13.5px;text-transform:none;letter-spacing:.04em;color:var(--teal-ink);font-weight:500}
@media (max-width:900px){ .hint.on{display:block;margin-top:6px} }

/* ---- who it's for: one chart per kind of book, drawn from its demo's own figures (ASP-630) ---- */
.wcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.wcard{display:flex;flex-direction:column;background:var(--paper2);border-top:2px solid var(--ink);padding:30px 30px 28px;color:var(--ink2);transition:background .15s}
.wcard:hover{background:#E8E2D5}
.wcard .k{font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.wcard h2{margin-top:12px;font:400 34px/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.wcard .line{margin-top:8px;font-size:18px;line-height:1.5}
.wfig{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule2);flex:1}
.wfig .wt{font:500 12px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.wfig figcaption{margin-top:12px;font-size:15px;line-height:1.5;font-style:italic;color:var(--ink3)}
.wcard .go{margin-top:22px;align-self:flex-start;font:500 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);border-bottom:1px solid currentColor;padding-bottom:5px}
.wch{display:block;width:100%;height:auto;margin-top:16px;overflow:visible}
.wch-narrow{display:none}
.wch text{font-family:var(--mono);font-size:11.5px;fill:var(--ink2)}
.wch .tk{fill:var(--ink3);font-size:11px}
.wch .ax{fill:var(--ink3);font-size:10.5px;letter-spacing:.05em}
.wch .lt{fill:var(--crit-ink);font-size:10.5px;letter-spacing:.05em} .wch .lt.nr{fill:#C46A1C}
.wch .gr{stroke:var(--rule);stroke-width:1}
.wch .past{fill:var(--crit-ink);opacity:.06}
.wch .lim{stroke:var(--crit-ink);stroke-dasharray:4 4;stroke-width:1.2}
.wch .limv{stroke:var(--ink);stroke-dasharray:4 4;stroke-width:1.2}
.wch .limv+.lt{fill:var(--ink)}
.wch .near{stroke:#C46A1C;stroke-dasharray:2 4;stroke-width:1}
.wch .c{fill-opacity:.16;stroke-width:1.3}
.wch .c.crit{fill:var(--crit-ink);stroke:var(--crit-ink)} .wch .c.high{fill:#C46A1C;stroke:#C46A1C} .wch .c.warn{fill:#A8860F;stroke:#A8860F}
.wch .c.calm{fill:var(--teal-ink);stroke:var(--teal-ink);fill-opacity:.07;stroke-opacity:.55}
.wch .rl{fill:var(--ink);font-size:12.5px}
.wch-narrow .rl{font-size:11px}
.wch .tg,.wch .sc{fill:var(--ink3);font-size:11px}
.wch .bar{fill:var(--teal-ink)} .wch .bar.ext{opacity:.32} .wch .bar.over{fill:var(--crit-ink)}
.wch .val{fill:var(--ink);font-size:12px} .wch .val.over{fill:var(--crit-ink)}
.wch .span{stroke:var(--teal-ink);stroke-width:2} .wch .wk{stroke:var(--rule2)} .wch .a{fill:var(--teal-ink)} .wch .b{fill:var(--crit-ink)}
.wch .wl{fill:var(--teal-ink);font-size:12px;letter-spacing:.1em}
.wch .lt,.wch .rl,.wch .sc,.wch .tg{paint-order:stroke;stroke:var(--paper2);stroke-width:3.5px;stroke-linejoin:round}   /* words over a line or a circle stay readable */

.wleg{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.wleg li{display:flex;align-items:center;gap:7px} .wleg .q{color:var(--ink3)}
.wleg .dot{width:10px;height:10px;border-radius:50%;border:1.3px solid}
.wleg .dot.crit{border-color:var(--crit-ink);background:rgba(185,58,51,.16)} .wleg .dot.high{border-color:#C46A1C;background:rgba(196,106,28,.16)}
.wleg .dot.warn{border-color:#A8860F;background:rgba(168,134,15,.16)} .wleg .dot.calm{border-color:rgba(10,110,98,.55)}
.wleg .sw{width:16px;height:9px;background:var(--teal-ink)} .wleg .sw.ext{opacity:.32}
@media (max-width:900px){ .wcards{grid-template-columns:1fr} }
@media (max-width:600px){ .wch-wide{display:none} .wch-narrow{display:block} .wcard{padding:22px 20px 22px} .wcard h2{font-size:28px} .wcard .line{font-size:17px} }

/* ---- a product page's jobs: each beside a half-width close-up of the real screen, the others as small cards (ASP-630) ---- */
.frows{display:flex;flex-direction:column;gap:96px}
.frow{display:grid;grid-template-columns:repeat(12,1fr);column-gap:calc(var(--gap)*2);align-items:center}
.frow .zshot{grid-column:1/7} .frow .ftext{grid-column:7/13}
.frow.flip .zshot{grid-column:7/13;grid-row:1} .frow.flip .ftext{grid-column:1/7;grid-row:1}
.zshot{display:block;border:none;background:var(--bg);box-shadow:0 26px 60px -34px rgba(7,30,44,.6)}
.zshot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.zbar{display:block;padding:9px 12px;border-bottom:1px solid var(--border);font:500 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.ftext .i{font:500 12px var(--mono);letter-spacing:.06em;color:var(--teal-ink)}
.ftext h3{margin-top:12px;font:400 34px/1.1 var(--serif);letter-spacing:-.012em;color:var(--ink)}
.ftext p{margin-top:12px;font-size:18.5px;line-height:1.55;max-width:30em}
.ftext .gets{margin-top:18px;max-width:30em}
.others{margin-top:112px}
.ocards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}
.ocard{border:1px solid var(--rule2);border-top:2px solid var(--ink);padding:16px 18px 18px}
.ocard b{display:block;font:400 19px/1.25 var(--serif);color:var(--ink);font-weight:400}
.ocard span{display:block;margin-top:6px;font-size:15px;line-height:1.45;color:var(--ink3)}
@media (max-width:1100px){ .ocards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .frows{gap:64px} .frow{display:block} .ftext{margin-top:22px} .ftext h3{font-size:28px} .others{margin-top:72px} }
@media (max-width:600px){ .ocards{grid-template-columns:1fr} }