@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/SchibstedGrotesk-400.woff2) format("woff2"),url(../fonts/SchibstedGrotesk-400.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/SchibstedGrotesk-500.woff2) format("woff2"),url(../fonts/SchibstedGrotesk-500.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/SchibstedGrotesk-700.woff2) format("woff2"),url(../fonts/SchibstedGrotesk-700.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(../fonts/SchibstedGrotesk-800.woff2) format("woff2"),url(../fonts/SchibstedGrotesk-800.ttf) format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/IBMPlexMono-400.woff2) format("woff2"),url(../fonts/IBMPlexMono-400.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/IBMPlexMono-500.woff2) format("woff2"),url(../fonts/IBMPlexMono-500.ttf) format("truetype");font-weight:500;font-display:swap}
:root{--paper:#F7F6F3;--panel:#FFFFFF;--panel-2:#EFEDE8;--ink:#1A1A1A;--ink-2:#4A4640;--muted:#6E6A63;--rule:#E4E1DB;--red:#B40101;--red-wash:#F6E6E4;--black:#0A0A0B;--f:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;--m:"IBM Plex Mono",ui-monospace,Menlo,monospace;--max:1500px}
/* One look everywhere (Luke, 2026-09-15): the site does NOT follow the device's dark setting — the home page never did, and the inner pages should read the same. Dark chapters are deliberate sections (.chapter-dark), not a theme. */
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img,svg{max-width:100%}
/* A <button> does not inherit font-family from its parent (the UA sheet gives it the platform default — Arial), so every button on the site, the injected cookie banner's included, reads the brand face from here. */
button{font-family:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 70px}
.m{font-family:var(--m)}.eyebrow{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
h1,h2,h3{margin:0;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(44px,7vw,88px);font-weight:800;letter-spacing:-.035em;line-height:.95}
h2{font-size:clamp(30px,4vw,44px);font-weight:800}h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 16px;max-width:64ch}.lede{font-size:20px;color:var(--ink-2);max-width:56ch}
.btn{display:inline-block;padding:15px 24px;border-radius:12px;font-weight:700;font-size:16px;line-height:1;border:1.5px solid transparent}
.btn.red{background:var(--red);color:#fff}.btn.ink{border-color:var(--ink);color:var(--ink)}.btn.white{background:#fff;color:#1A1A1A}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--red);outline-offset:3px}
header.site{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
nav.main{display:flex;gap:28px;align-items:center;font-size:15px;font-weight:500}nav.main a[aria-current]{color:var(--ink);font-weight:700}nav.main a{color:var(--ink-2)}
nav.main .btn{padding:11px 18px;font-size:14px}
.menu{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:8px}
section{padding:88px 0}section.tight{padding:56px 0}
.hero{padding:110px 0 70px}.hero .grid{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center}
.ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:20px;padding:26px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.band{background:var(--black);color:#fff;border-radius:22px;padding:40px 44px}.band .muted{color:#8B8B90}
.num{font-family:var(--m);font-size:30px;letter-spacing:-.01em}.lab{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.chart{display:flex;align-items:flex-end;gap:10px;height:200px;border-bottom:1px solid var(--rule);padding-bottom:6px}.chart i{flex:1;background:var(--ink);border-radius:6px 6px 0 0;display:block}.chart i.hot{background:var(--red)}
.list{margin:0;padding-left:20px}.list li{margin-bottom:8px}
table{border-collapse:collapse;width:100%}th{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 14px 10px 0;border-bottom:1px solid var(--ink)}td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top;font-size:15.5px}td.k{font-weight:700}td.n{font-family:var(--m);white-space:nowrap}
.pill{font-family:var(--m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;border-radius:4px;padding:2px 7px;color:var(--red);margin-left:8px;vertical-align:middle}
.osrow{display:flex;align-items:center;gap:12px}
footer.site{border-top:1px solid var(--rule);padding:56px 0 40px;margin-top:40px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}footer.site a{color:var(--ink-2);display:block;margin-bottom:8px;font-size:15px}
footer.site .fine{font-family:var(--m);font-size:10.5px;letter-spacing:.08em;color:var(--muted);margin-top:34px;text-transform:uppercase}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--panel);color:var(--ink);margin-bottom:16px}textarea{min-height:110px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-bottom:16px}.checks label{font-weight:500;display:flex;gap:10px;align-items:center}.checks input{width:auto;margin:0}
.notice{border-left:3px solid var(--red);background:var(--red-wash);padding:14px 18px;border-radius:0 12px 12px 0;font-size:15px}
.mock{background:var(--panel);border:1px solid var(--rule);border-radius:20px;padding:24px;box-shadow:0 20px 50px rgba(26,26,26,.08)}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.kpi div{background:var(--panel-2);border-radius:12px;padding:12px 14px}.kpi b{font-family:var(--m);font-weight:500;font-size:20px;display:block}.kpi small{font-family:var(--m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){.hero .grid,.grid3,.grid2,.grid4,footer.site .cols,form .row{grid-template-columns:1fr}nav.main{display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--rule);flex-direction:column;align-items:flex-start;padding:18px 28px;gap:16px}nav.main.open{display:flex}.menu{display:block}section{padding:60px 0}.hero{padding:70px 0 50px}.band{padding:30px 26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* module pages */
.modnav{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}.modnav a{font-size:13px;padding:7px 12px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-2);text-decoration:none;font-family:var(--m)}.modnav a.on,.modnav a:hover{border-color:var(--ink);color:var(--ink)}
.msec{padding:60px 0;border-top:1px solid var(--rule)}.msec .grid2{align-items:start;gap:44px}.msec h2{font-size:clamp(26px,3vw,36px);max-width:22ch;letter-spacing:-.02em}.msec p.body{margin-top:14px;color:var(--ink-2);font-size:16.5px;line-height:1.6;max-width:52ch}
.msec:nth-of-type(even) .grid2>div:first-child{order:2}@media(max-width:900px){.msec:nth-of-type(even) .grid2>div:first-child{order:0}}
.figs{display:grid;gap:18px}.fig{margin:0;background:var(--panel);border:1px solid var(--rule);border-radius:14px;overflow:hidden;box-shadow:0 24px 48px -32px rgba(0,0,0,.45)}.fig img{display:block;width:100%;height:auto}.fig figcaption{padding:10px 14px;font-size:12.5px;color:var(--muted);font-family:var(--m);border-top:1px solid var(--rule)}
.featlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:20px}.featlist div{padding:11px 13px;border:1px solid var(--rule);border-radius:10px;font-size:14px;color:var(--ink-2)}
a.card{display:block;color:inherit;text-decoration:none;position:relative}a.card:hover{border-color:var(--ink)}a.card .more{display:block;margin-top:14px;font-size:12.5px;color:var(--red);font-family:var(--m)}

/* platform page — the three-level cycle (CSS-only: nodes pop in 01→02→03, arrows draw between them, then a slow flow) */
.cycle-wrap{display:grid;place-items:center}.cycle{width:min(100%,600px);height:auto;overflow:visible;font-family:var(--m)}
.cy-ring{fill:none;stroke:var(--rule);stroke-width:1}
.cy-arc{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:212;stroke-dashoffset:212;opacity:0;animation:cyDraw 1.8s cubic-bezier(.16,1,.3,1) forwards}
.cy-arc.a1{animation-delay:1.4s}.cy-arc.a2{animation-delay:3s}.cy-arc.a3{animation-delay:4.6s}
.cy-flow{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:3 14;opacity:0;animation:cyFlow 2.8s linear 6.4s infinite,cyFade 1.2s ease 6.4s forwards}
.cy-node{opacity:0;transform-box:fill-box;transform-origin:center;animation:cyPop 1.4s cubic-bezier(.34,1.56,.64,1) forwards}
.cy-node.n1{animation-delay:.4s}.cy-node.n2{animation-delay:2s}.cy-node.n3{animation-delay:3.6s}
.cy-disc{fill:var(--panel);stroke:var(--rule);stroke-width:1.5;filter:drop-shadow(0 10px 18px rgba(26,26,26,.10))}
.cy-cell{fill:var(--ink)}.cy-num{font-size:14px;font-weight:600;fill:var(--ink);letter-spacing:.08em}
.cy-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;fill:var(--muted);opacity:0;animation:cyFade 1s ease forwards}
.cy-label.l1{animation-delay:1s}.cy-label.l2{animation-delay:2.6s}.cy-label.l3{animation-delay:4.2s}
.cy-center{opacity:0;animation:cyFade 1.2s ease 5.8s forwards}.cy-halo{fill:rgba(180,1,1,.12);transform-box:fill-box;transform-origin:center;animation:cyPulse 4.8s ease-in-out 6.8s infinite}
.cy-cap{font-size:10.5px;letter-spacing:.14em;fill:var(--muted)}
@keyframes cyDraw{from{stroke-dashoffset:212;opacity:1}to{stroke-dashoffset:0;opacity:1}}@keyframes cyPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes cyFade{to{opacity:1}}@keyframes cyFlow{to{stroke-dashoffset:-34}}@keyframes cyPulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.35);opacity:.25}}
@media (prefers-reduced-motion:reduce){.cy-arc,.cy-node,.cy-label,.cy-center{animation:none;opacity:1;stroke-dashoffset:0}.cy-flow{display:none}.cy-halo{animation:none}}
@media(max-width:900px){.cycle-wrap{order:2;margin-top:8px}}

/* platform page — the three levels come alive: text fades in on scroll, mocks respond to the cursor (CSS only) */
.pv>*{opacity:1}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){
  .pv>*{animation:pvRise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  .pv>*:nth-child(2){animation-range:entry 6% entry 46%}.pv>*:nth-child(3){animation-range:entry 12% entry 52%}.pv>*:nth-child(n+4){animation-range:entry 18% entry 58%}
}}
@keyframes pvRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.mock.live{position:relative;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s;cursor:default}
.mock.live:hover{transform:translateY(-4px);box-shadow:0 30px 60px -24px rgba(26,26,26,.28)}
.mock-note{margin:14px 0 0;font-size:11px;color:var(--muted);font-family:var(--m)}
/* bars: grow on hover, each shows month + value */
.mock.live .chart i{position:relative;transform-origin:bottom;transition:transform .35s cubic-bezier(.16,1,.3,1),filter .2s}
.mock.live:hover .chart i{animation:barGrow .7s cubic-bezier(.16,1,.3,1) both}
.mock.live:hover .chart i:nth-child(2){animation-delay:.04s}.mock.live:hover .chart i:nth-child(3){animation-delay:.08s}.mock.live:hover .chart i:nth-child(4){animation-delay:.12s}.mock.live:hover .chart i:nth-child(5){animation-delay:.16s}.mock.live:hover .chart i:nth-child(6){animation-delay:.2s}.mock.live:hover .chart i:nth-child(7){animation-delay:.24s}.mock.live:hover .chart i:nth-child(8){animation-delay:.28s}.mock.live:hover .chart i:nth-child(9){animation-delay:.32s}.mock.live:hover .chart i:nth-child(10){animation-delay:.36s}.mock.live:hover .chart i:nth-child(11){animation-delay:.4s}.mock.live:hover .chart i:nth-child(12){animation-delay:.44s}
@keyframes barGrow{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
.mock.live .chart i:hover{filter:brightness(1.25)}
.mock.live .chart i::after{content:attr(data-m) " · " attr(data-v);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,6px);white-space:nowrap;font-family:var(--m);font-size:11px;letter-spacing:.02em;color:#fff;background:var(--ink);padding:5px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.mock.live .chart i:hover::after{opacity:1;transform:translate(-50%,0)}
.mock.live .chart{overflow:visible}
/* pace: number counts up, bar fills, on hover */
@property --n{syntax:"<integer>";inherits:false;initial-value:41}
.count::after{content:counter(n);counter-reset:n var(--n)}
.mock.live:hover .count{animation:countUp 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes countUp{from{--n:0}to{--n:41}}
.pace-bar{height:8px;background:var(--rule);border-radius:4px;overflow:hidden}.pace-bar i{display:block;height:100%;width:var(--w);background:var(--red);border-radius:4px;transform-origin:left}
.mock.live:hover .pace-bar i{animation:fill 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* retention rows */
.mock.live tbody tr{transition:background .2s}.mock.live tbody tr:hover{background:var(--panel-2)}
.mock.live tbody td{transition:padding .2s}.mock.live tbody tr:hover td:first-child{padding-left:8px}
.sbar{display:inline-block;width:56px;height:6px;border-radius:3px;background:var(--rule);vertical-align:middle;margin-right:10px;overflow:hidden}
.sbar i{display:block;height:100%;width:var(--w);background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.mock.live:hover .sbar i{transform:scaleX(1)}
.mock.live tbody tr:hover .sbar i{background:var(--red)}
.n b{font-weight:600}.n b.hot{color:var(--red)}
/* group tiles */
.mock.live .kpi>div{transition:transform .35s cubic-bezier(.16,1,.3,1),background .2s}
.mock.live .kpi>div:hover{transform:translateY(-3px);background:var(--panel)}
@media (prefers-reduced-motion:reduce){.pv>*{animation:none;opacity:1}.mock.live:hover .chart i,.mock.live:hover .count,.mock.live:hover .pace-bar i{animation:none}.sbar i{transform:none}}
@media (hover:none){.sbar i{transform:none}}
@media(max-width:900px){.wrap{padding:0 24px}}

/* ── arrive: every section of every page animates in (CSS scroll-driven; static without support or with reduced motion) ── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    section>.wrap>*:not(.rv):not(.pv):not(.stack__grid):not(.grid):not(.reel__track){animation:arrive linear both;animation-timeline:view();animation-range:entry 0% cover 20%}
    section>.wrap>*:nth-child(2):not(.rv):not(.pv){animation-range:entry 8% cover 26%}
    section>.wrap>*:nth-child(3):not(.rv):not(.pv){animation-range:entry 16% cover 32%}
    section>.wrap>*:nth-child(n+4):not(.rv):not(.pv){animation-range:entry 24% cover 38%}
    .grid2>.card,.grid3>.card,.grid4>div,.grid3>a.card,.msec .figs>.fig,.hosts>.host,.breath__cards>.card,.decks__cards>.card{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
    .grid3>*:nth-child(2),.grid2>*:nth-child(2),.grid4>*:nth-child(2){animation-range:entry 8% entry 48%}
    .grid3>*:nth-child(3),.grid4>*:nth-child(3){animation-range:entry 16% entry 56%}
    .grid4>*:nth-child(4){animation-range:entry 24% entry 64%}
    .plate:not(.reel__track .plate),.mock,.fig{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    .chart i,.bars i{transform-origin:bottom;animation:barUp linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    .chart i:nth-child(2),.bars i:nth-child(2){animation-range:entry 4% entry 64%}.chart i:nth-child(3),.bars i:nth-child(3){animation-range:entry 8% entry 68%}.chart i:nth-child(4),.bars i:nth-child(4){animation-range:entry 12% entry 72%}.chart i:nth-child(5),.bars i:nth-child(5){animation-range:entry 16% entry 76%}.chart i:nth-child(6),.bars i:nth-child(6){animation-range:entry 20% entry 80%}.chart i:nth-child(7),.bars i:nth-child(7){animation-range:entry 24% entry 84%}.chart i:nth-child(8),.bars i:nth-child(8){animation-range:entry 28% entry 88%}.chart i:nth-child(9),.bars i:nth-child(9){animation-range:entry 32% entry 92%}.chart i:nth-child(10),.bars i:nth-child(10){animation-range:entry 36% entry 96%}.chart i:nth-child(11),.bars i:nth-child(11){animation-range:entry 40% entry 100%}.chart i:nth-child(12),.bars i:nth-child(12){animation-range:entry 44% entry 100%}
    .band,.record__fig,.mpanel,.timeline__years{animation:arrive linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    .record__fig{border-top-color:transparent;animation-name:arriveRule}
    table:not(.rows):not(.sheet) tbody tr{animation:arrive linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
    .modnav a,.lens span{animation:arrive linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@keyframes arrive{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes arriveRule{from{opacity:0;transform:translateY(26px);border-top-color:transparent}to{opacity:1;transform:none;border-top-color:var(--rule)}}
@keyframes settle{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
@keyframes barUp{from{transform:scaleY(.06)}to{transform:scaleY(1)}}
/* count-up targets (assets/js/arrive.js): keep widths steady while digits change */
.num,.big,.kpi b,.record__fig .big,[data-count]{font-variant-numeric:tabular-nums}

/* founders */
.card.founder{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start}.card.founder img{width:150px;height:188px;object-fit:cover;border-radius:14px;display:block}@media(max-width:560px){.card.founder{grid-template-columns:1fr}.card.founder img{width:120px;height:150px}}