/* ===================================================================== Shared note template — one stylesheet, one flag. Families: panels · editorial · data (added in batches). Chrome (masthead, progress, CTA foot, footer) + section styles live here, scoped per family so the three looks don't collide. Gold used as TEXT on a light background is darkened to --gold-ink for WCAG AA contrast; bright --gold is kept for decorative marks and text on dark. ===================================================================== */ /* ---------- base (all families) ---------- */ *{box-sizing:border-box;margin:0;padding:0;} html{-webkit-font-smoothing:antialiased;} img{max-width:100%;} .skip-link{position:absolute;left:-9999px;top:0;z-index:100; font-family:"Helvetica Neue",Arial,sans-serif;font-size:14px;background:#08090b;color:#f2efe8; padding:12px 18px;text-decoration:none;border-radius:0 0 6px 0;} .skip-link:focus{left:0;top:0;} a:focus-visible,button:focus-visible{outline:2px solid #8a5711;outline-offset:3px;border-radius:2px;} .family-data a:focus-visible{outline-color:#e4bd63;} /* ===================================================================== FAMILY: PANELS (The standard is never on the slide, The verifier problem, The polish trap) — dark near-black, full-height scroll panels. ===================================================================== */ body.family-panels{ --ink:#08090b;--ink-soft:#111318;--paper:#f2efe8;--paper-2:#e8e4da; --muted:#5f6167;--muted-dk:#8c8e94;--line:#d6d1c5;--line-dk:#23262c; --gold:#c99a2e;--gold-hi:#e4bd63;--gold-ink:#8a5711; font-family:"Georgia",serif;background:var(--paper);color:var(--ink);line-height:1.5;overflow-x:hidden; } .family-panels .wrap{max-width:1000px;margin:0 auto;padding:0 40px;width:100%;} .family-panels .sans{font-family:"Helvetica Neue",Arial,sans-serif;} .family-panels .progress{position:fixed;top:0;left:0;height:2px;background:var(--gold);width:0;z-index:40;transition:width .1s linear;} .family-panels nav.top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between; padding:20px 40px;transition:background .4s,border-color .4s;border-bottom:1px solid transparent;} .family-panels nav.top.scrolled{background:rgba(242,239,232,.9);backdrop-filter:blur(12px);border-color:var(--line);} .family-panels nav.top .brand{font-family:"Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:.03em;font-size:15px;color:var(--ink);text-decoration:none;} .family-panels nav.top .brand i{color:var(--gold-ink);font-style:normal;} .family-panels nav.top .back{font-family:"Helvetica Neue",Arial,sans-serif;font-size:13.5px;color:var(--ink);text-decoration:none;opacity:.82;} .family-panels nav.top .back:hover{color:var(--gold-ink);opacity:1;} /* intro */ .family-panels .intro{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:140px 0 90px;} .family-panels .intro .kicker{font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--gold-ink);margin-bottom:28px;display:flex;align-items:center;gap:12px;} .family-panels .intro .kicker .dash{width:34px;height:1px;background:var(--gold);display:inline-block;} .family-panels .intro h1{font-size:clamp(36px,6.5vw,80px);line-height:1.05;font-weight:400;letter-spacing:-.025em;} .family-panels .intro h1 em{font-style:italic;color:var(--gold-ink);} .family-panels .intro .meta{font-family:"Helvetica Neue",Arial,sans-serif;font-size:14px;color:var(--muted);margin-top:30px;letter-spacing:.02em;} .family-panels .scrollcue{position:absolute;bottom:34px;left:40px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px; letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px;} .family-panels .scrollcue .bar{width:1px;height:42px;background:var(--line);position:relative;overflow:hidden;} .family-panels .scrollcue .bar::after{content:"";position:absolute;top:-42px;left:0;width:1px;height:42px;background:var(--gold);animation:panels-drop 2.4s cubic-bezier(.5,0,.5,1) infinite;} @keyframes panels-drop{0%{top:-42px;}60%,100%{top:42px;}} /* panels */ .family-panels .panel{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 0;position:relative;} .family-panels .panel.dark{background:var(--ink);color:var(--paper);} .family-panels .panel .step{font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--gold-ink);margin-bottom:34px;opacity:0;transform:translateY(20px);transition:.9s cubic-bezier(.16,.84,.28,1);} .family-panels .panel.dark .step{color:var(--gold-hi);} .family-panels .panel .big{font-size:clamp(30px,5.4vw,64px);line-height:1.1;font-weight:400;letter-spacing:-.02em;max-width:20ch;} .family-panels .panel .big em{font-style:italic;color:var(--gold-ink);} .family-panels .panel.dark .big em{color:var(--gold-hi);} .family-panels .panel .sub{font-size:clamp(17px,2vw,21px);color:var(--ink-soft);max-width:54ch;margin-top:28px;line-height:1.55;} .family-panels .panel.dark .sub{color:var(--muted-dk);} .family-panels .panel .big .line{overflow:hidden;display:block;} .family-panels .panel .big .line>span{display:block;transform:translateY(115%);transition:transform 1s cubic-bezier(.16,.84,.28,1);} .family-panels .panel.in .big .line:nth-child(1)>span{transition-delay:.05s;} .family-panels .panel.in .big .line:nth-child(2)>span{transition-delay:.15s;} .family-panels .panel.in .big .line:nth-child(3)>span{transition-delay:.25s;} .family-panels .panel.in .big .line>span{transform:translateY(0);} .family-panels .panel.in .step{opacity:1;transform:none;} .family-panels .panel .sub{opacity:0;transform:translateY(24px);transition:opacity 1s ease .35s,transform 1s cubic-bezier(.16,.84,.28,1) .35s;} .family-panels .panel.in .sub{opacity:1;transform:none;} /* generic settle reveal (used by quotes/moves/three/closing children) */ .family-panels .settle{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.16,.84,.28,1),transform .9s cubic-bezier(.16,.84,.28,1);} .family-panels .in .settle{opacity:1;transform:none;} .family-panels .in .settle:nth-child(2){transition-delay:.08s;} .family-panels .in .settle:nth-child(3){transition-delay:.18s;} .family-panels .in .settle:nth-child(4){transition-delay:.28s;} .family-panels .in .settle:nth-child(5){transition-delay:.38s;} /* quotes block (the argument in N lines) */ .family-panels .quotes{padding:118px 0;background:var(--ink);color:var(--paper);} .family-panels .quotes .lbl{font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:44px;} .family-panels .qline{display:grid;grid-template-columns:52px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line-dk);align-items:baseline;} .family-panels .qline:last-child{border-bottom:1px solid var(--line-dk);} .family-panels .qline .qi{font-family:"Helvetica Neue",Arial,sans-serif;font-size:13px;font-weight:700;color:var(--gold-hi);letter-spacing:.06em;} .family-panels .qline p{font-size:clamp(21px,2.9vw,34px);line-height:1.24;font-weight:400;letter-spacing:-.015em;color:#f2efe8;} .family-panels .qline p em{font-style:italic;color:var(--gold-hi);} /* moves recap (numbered list of actions) */ .family-panels .moves{padding:120px 0;background:var(--paper-2);} .family-panels .moves .lbl{font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:30px;} .family-panels .moves h2{font-size:clamp(26px,3.6vw,40px);font-weight:400;letter-spacing:-.01em;line-height:1.14;max-width:20ch;margin-bottom:44px;} .family-panels .moves h2 em{font-style:italic;color:var(--gold-ink);} .family-panels .move{display:grid;grid-template-columns:56px 1fr;gap:26px;padding:30px 0;border-top:1px solid var(--line);align-items:baseline;} .family-panels .move .n{font-family:"Helvetica Neue",Arial,sans-serif;font-size:15px;font-weight:700;color:var(--gold-ink);} .family-panels .move h3{font-size:22px;font-weight:400;font-style:italic;margin-bottom:8px;} .family-panels .move p{font-size:16.5px;color:var(--ink-soft);line-height:1.55;max-width:60ch;} .family-panels .moves .tail{margin-top:44px;font-size:19px;color:var(--ink);max-width:56ch;line-height:1.55;} /* "three" grid (numbered failure modes) */ .family-panels .three{padding:120px 0;background:var(--paper-2);} .family-panels .three .lbl{font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:30px;} .family-panels .three h2{font-size:clamp(26px,3.6vw,40px);font-weight:400;letter-spacing:-.01em;line-height:1.14;max-width:22ch;margin-bottom:46px;} .family-panels .three h2 em{font-style:italic;color:var(--gold-ink);} .family-panels .mode{display:grid;grid-template-columns:64px 1fr;gap:26px;padding:34px 0;border-top:1px solid var(--line);align-items:baseline;} .family-panels .mode:last-child{border-bottom:1px solid var(--line);} .family-panels .mode .q{font-family:"Helvetica Neue",Arial,sans-serif;font-size:14px;font-weight:700;color:var(--gold-ink);letter-spacing:.02em;} .family-panels .mode h3{font-size:24px;font-weight:400;font-style:italic;margin-bottom:10px;letter-spacing:-.01em;} .family-panels .mode p{font-size:16.5px;color:var(--ink-soft);line-height:1.55;max-width:62ch;} .family-panels .mode p .name{font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px;} /* closing */ .family-panels .closing{padding:120px 0;} .family-panels .closing.on-paper2{background:var(--paper-2);} .family-panels .closing .lbl{font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:26px;} .family-panels .closing p{font-size:clamp(19px,2.3vw,26px);line-height:1.4;font-weight:400;max-width:28ch;letter-spacing:-.01em;} .family-panels .closing p em{font-style:italic;color:var(--gold-ink);} .family-panels .closing .body{font-size:19px;color:var(--ink-soft);max-width:60ch;line-height:1.6;margin-top:28px;} .family-panels .endrule{height:1px;background:var(--line);margin:44px 0;} .family-panels .signoff{font-family:"Helvetica Neue",Arial,sans-serif;font-size:15px;color:var(--muted);max-width:60ch;line-height:1.5;} .family-panels .signoff b{color:var(--ink);} .family-panels .signoff .src{color:var(--muted);} /* CTA foot + footer */ .family-panels .foot-cta{background:var(--ink);color:var(--paper);padding:96px 0;} .family-panels .foot-cta h2{font-size:clamp(28px,4.4vw,52px);font-weight:400;line-height:1.1;letter-spacing:-.02em;color:#f2efe8;} .family-panels .foot-cta h2 em{font-style:italic;color:var(--gold-hi);} .family-panels .foot-cta p{margin-top:22px;color:#c2c4ca;font-size:19px;max-width:48ch;} .family-panels .foot-cta a.btn{display:inline-flex;align-items:center;gap:12px;margin-top:36px;font-family:"Helvetica Neue",Arial,sans-serif; font-size:15px;letter-spacing:.02em;background:var(--gold);color:var(--ink);text-decoration:none;padding:16px 28px;border-radius:999px;transition:.28s;font-weight:600;} .family-panels .foot-cta a.btn:hover{background:var(--gold-hi);transform:translateY(-2px);} .family-panels footer{background:var(--ink);color:#8c8e94;padding:36px 0 56px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:13px;} .family-panels footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;} .family-panels footer a{color:#c2c4ca;text-decoration:none;} .family-panels footer a:hover{color:var(--gold-hi);} /* Step & limit — a concrete action, then the honest boundary on it. The label is gold-ink, not gold: this sits on the light paper. */ .family-panels .tryit{background:var(--paper);padding:96px 0 104px;} .family-panels .tryit .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;} .family-panels .tryit .ti{border-top:1px solid var(--ink);padding-top:24px;} .family-panels .tryit .ti:last-child{border-top-color:var(--line);} .family-panels .tryit .ti-k{font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:20px;} .family-panels .tryit .ti:last-child .ti-k{color:var(--muted);} .family-panels .tryit .ti-b{font-size:19px;line-height:1.62;color:var(--ink);} .family-panels .tryit .ti:last-child .ti-b{color:var(--muted);} .family-panels .tryit .settle{opacity:0;transform:translateY(20px);transition:opacity .85s cubic-bezier(.16,.84,.28,1),transform .85s cubic-bezier(.16,.84,.28,1);} .family-panels .tryit.in .settle{opacity:1;transform:none;} .family-panels .tryit.in .ti:last-child .settle{transition-delay:.14s;} @media(max-width:760px){.family-panels .tryit .grid{grid-template-columns:1fr;gap:34px;}} /* ===================================================================== FAMILY: EDITORIAL (Your 10,000 people aren't one thing) — warm cream, long-form prose column, drop cap, marginalia, soft audience figure. ===================================================================== */ body.family-editorial{ --ink:#1a1712;--ink-soft:#3f3a32;--paper:#f4f0e6;--paper-2:#eee8da; --muted:#6f6656;--line:#ddd5c4;--gold:#b8892f;--gold-hi:#d0a24a;--gold-ink:#7a5410; --serif:"Georgia","Times New Roman",serif;--sans:"Helvetica Neue",Arial,sans-serif; font-family:var(--serif);background:var(--paper);color:var(--ink);line-height:1.68; } .family-editorial .progress{position:fixed;top:0;left:0;height:2px;background:var(--gold);width:0;z-index:40;transition:width .1s linear;} .family-editorial nav.top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between; padding:20px 40px;transition:background .4s,border-color .4s;border-bottom:1px solid transparent;} .family-editorial nav.top.scrolled{background:rgba(244,240,230,.9);backdrop-filter:blur(12px);border-color:var(--line);} .family-editorial nav.top .brand{font-family:var(--sans);font-weight:700;letter-spacing:.03em;font-size:15px;color:var(--ink);text-decoration:none;} .family-editorial nav.top .brand i{color:var(--gold-ink);font-style:normal;} .family-editorial nav.top .back{font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);text-decoration:none;opacity:.85;} .family-editorial nav.top .back:hover{color:var(--gold-ink);opacity:1;} .family-editorial .col{max-width:680px;margin:0 auto;padding:0 30px;} .family-editorial header.hd{padding:170px 0 60px;border-bottom:1px solid var(--line);margin-bottom:8px;} .family-editorial header.hd .col{max-width:820px;} .family-editorial .eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:26px;} .family-editorial header.hd h1{font-size:clamp(36px,5.6vw,62px);line-height:1.08;font-weight:400;letter-spacing:-.015em;} .family-editorial header.hd h1 em{font-style:italic;color:var(--gold-ink);} .family-editorial header.hd .standfirst{font-size:clamp(19px,2.1vw,23px);color:var(--ink-soft);line-height:1.5;margin-top:26px;max-width:44ch;font-style:italic;} .family-editorial header.hd .byline{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:30px;letter-spacing:.02em;} .family-editorial article{padding:56px 0 40px;} .family-editorial article .col>p{font-size:20px;line-height:1.72;margin-bottom:28px;color:var(--ink);} .family-editorial .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.16,.84,.28,1),transform .8s cubic-bezier(.16,.84,.28,1);} .family-editorial .reveal.in{opacity:1;transform:none;} .family-editorial article .col>p.lead::first-letter{float:left;font-size:76px;line-height:.82;padding:6px 12px 0 0;color:var(--gold-ink);font-weight:400;} .family-editorial article .col>p.lead{font-size:21px;} .family-editorial article h2{font-size:clamp(24px,3vw,32px);font-weight:400;font-style:italic;letter-spacing:-.01em;margin:48px 0 22px;color:var(--ink);} .family-editorial article h2 .n{font-family:var(--sans);font-style:normal;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);display:block;margin-bottom:10px;font-weight:600;} .family-editorial article em{font-style:italic;} .family-editorial article strong{font-weight:600;} .family-editorial blockquote{margin:40px 0;padding-left:26px;border-left:2px solid var(--gold);font-size:clamp(22px,2.6vw,28px);line-height:1.34;font-style:italic;color:var(--ink);} .family-editorial .figure{margin:52px 0;padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .family-editorial .figure .cap{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:28px;} .family-editorial .four{display:grid;grid-template-columns:1fr 1fr;gap:30px 34px;} @media(max-width:560px){.family-editorial .four{grid-template-columns:1fr;}} .family-editorial .aud{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,.84,.28,1),transform .8s cubic-bezier(.16,.84,.28,1);} .family-editorial .figure.in .aud:nth-child(1){transition-delay:.05s;} .family-editorial .figure.in .aud:nth-child(2){transition-delay:.16s;} .family-editorial .figure.in .aud:nth-child(3){transition-delay:.27s;} .family-editorial .figure.in .aud:nth-child(4){transition-delay:.38s;} .family-editorial .aud.in,.family-editorial .figure.in .aud{opacity:1;transform:none;} .family-editorial .aud .dots{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px;height:40px;align-content:flex-start;} .family-editorial .aud .dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.55;} .family-editorial .aud.accent .dots i{background:var(--gold);opacity:.9;} .family-editorial .aud .nm{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:8px;} .family-editorial .aud.accent .nm{color:var(--gold-ink);} .family-editorial .aud .said{font-style:italic;color:var(--ink);font-size:17px;margin-bottom:6px;} .family-editorial .aud p{font-size:15.5px;color:var(--ink-soft);line-height:1.55;} .family-editorial .endrule{height:1px;background:var(--line);margin:48px 0 30px;} .family-editorial .signoff{font-family:var(--sans);font-size:14.5px;color:var(--muted);line-height:1.6;} .family-editorial .signoff b{color:var(--ink-soft);} .family-editorial .foot-cta{background:#14110c;color:var(--paper);padding:96px 0;margin-top:60px;} .family-editorial .foot-cta .col{max-width:680px;} .family-editorial .foot-cta h2{font-size:clamp(28px,4.4vw,52px);font-weight:400;line-height:1.1;letter-spacing:-.02em;color:#f4f0e6;font-style:normal;} .family-editorial .foot-cta h2 em{font-style:italic;color:var(--gold-hi);} .family-editorial .foot-cta p{margin-top:22px;color:#c4bcac;font-size:19px;} .family-editorial .foot-cta a.btn{display:inline-flex;align-items:center;gap:12px;margin-top:36px;font-family:var(--sans);font-size:15px;letter-spacing:.02em; background:var(--gold);color:#14110c;text-decoration:none;padding:16px 28px;border-radius:999px;transition:.28s;font-weight:600;} .family-editorial .foot-cta a.btn:hover{background:var(--gold-hi);transform:translateY(-2px);} .family-editorial footer{background:#14110c;color:#9a9284;padding:34px 0 56px;font-family:var(--sans);font-size:13px;} .family-editorial footer .col{max-width:680px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;} .family-editorial footer a{color:#c4bcac;text-decoration:none;} .family-editorial footer a:hover{color:var(--gold-hi);} /* Step & limit — stacked in the prose column, matching the editorial rhythm. */ .family-editorial .tryit{background:var(--paper-2);border-top:1px solid var(--line);padding:74px 0 80px;} .family-editorial .tryit .ti + .ti{margin-top:34px;padding-top:34px;border-top:1px solid var(--line);} .family-editorial .tryit .ti-k{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:16px;} .family-editorial .tryit .ti.last .ti-k{color:var(--muted);} .family-editorial .tryit .ti-b{font-size:19.5px;line-height:1.66;color:var(--ink);} .family-editorial .tryit .ti.last .ti-b{color:var(--muted);} /* ===================================================================== FAMILY: DATA-TERMINAL (Tokenomics, The hidden costs of AI) — cold dark, monospace figures, grid backdrop, streaming tokens, climbing meter, ledger. Dim greys lightened from the mockup for AA on the dark panels. ===================================================================== */ body.family-data{ --bg:#0b0e13;--bg-2:#10141b;--panel:#141922;--ink:#e9edf2;--dim:#8b95a1;--dimmer:#7e8895; --line:#222834;--grid:#1a202b;--gold:#c99a2e;--gold-hi:#e4bd63;--paper:#f2efe8;--red:#d98b5f;--green:#7fb08a; --mono:"SF Mono","JetBrains Mono","Fira Code",ui-monospace,"Menlo",monospace;--serif:"Georgia",serif; font-family:var(--serif);background:var(--bg);color:var(--ink);line-height:1.5;overflow-x:hidden; } .family-data .wrap{max-width:1080px;margin:0 auto;padding:0 40px;width:100%;} .family-data .mono{font-family:var(--mono);} body.family-data::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:44px 44px;opacity:.35;mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 78%);} body.family-data>*{position:relative;z-index:1;} .family-data .progress{position:fixed;top:0;left:0;height:2px;background:var(--gold);width:0;z-index:40;transition:width .1s linear;box-shadow:0 0 8px var(--gold);} .family-data nav.top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:18px 40px;transition:background .4s,border-color .4s;border-bottom:1px solid transparent;} .family-data nav.top.scrolled{background:rgba(11,14,19,.82);backdrop-filter:blur(12px);border-color:var(--line);} .family-data nav.top .brand{font-family:"Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:.03em;font-size:15px;color:var(--ink);text-decoration:none;} .family-data nav.top .brand i{color:var(--gold);font-style:normal;} .family-data nav.top .back{font-family:var(--mono);font-size:12.5px;color:var(--dim);text-decoration:none;letter-spacing:.02em;} .family-data nav.top .back:hover{color:var(--gold-hi);} .family-data .hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:150px 0 90px;} .family-data .tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--gold);margin-bottom:26px;display:flex;gap:12px;align-items:center;} .family-data .tag::before{content:"▸";color:var(--dim);} .family-data .hero h1{font-size:clamp(38px,7.5vw,90px);line-height:1;font-weight:400;letter-spacing:-.03em;} .family-data .hero h1 .em{font-style:italic;color:var(--gold);} .family-data .hero .readout{font-family:var(--mono);margin-top:40px;max-width:60ch;color:var(--dim);font-size:14.5px;line-height:1.9;} .family-data .hero .readout b{color:var(--ink);font-weight:400;} .family-data .hero .readout .g{color:var(--gold-hi);} .family-data .scrollcue{margin-top:56px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--dimmer);display:flex;align-items:center;gap:12px;} .family-data .scrollcue .bar{width:1px;height:40px;background:var(--line);position:relative;overflow:hidden;} .family-data .scrollcue .bar::after{content:"";position:absolute;top:-40px;left:0;width:1px;height:40px;background:var(--gold);animation:data-drop 2.4s cubic-bezier(.5,0,.5,1) infinite;} @keyframes data-drop{0%{top:-40px;}60%,100%{top:40px;}} .family-data .say{padding:120px 0;} .family-data .say .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--gold);margin-bottom:26px;} .family-data .say h2{font-size:clamp(28px,4.4vw,54px);line-height:1.1;font-weight:400;letter-spacing:-.02em;max-width:18ch;} .family-data .say h2 em{font-style:italic;color:var(--gold-hi);} .family-data .say p{font-family:var(--mono);font-size:14.5px;line-height:1.9;color:var(--dim);max-width:56ch;margin-top:26px;} .family-data .say p b{color:var(--ink);font-weight:400;} .family-data .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,.84,.28,1),transform .9s cubic-bezier(.16,.84,.28,1);} .family-data .in .reveal{opacity:1;transform:none;} .family-data .in .reveal.d1{transition-delay:.12s;} .family-data .meter-sec{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 0;background:#07090d;position:relative;overflow:hidden;} .family-data .meter-sec .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--gold);margin-bottom:22px;} .family-data .meter-sec h2{font-size:clamp(26px,4vw,48px);line-height:1.08;font-weight:400;letter-spacing:-.02em;max-width:18ch;} .family-data .meter-sec h2 em{font-style:italic;color:var(--gold-hi);} .family-data .stream{margin:40px 0;display:flex;flex-direction:column;gap:10px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);} .family-data .lane{white-space:nowrap;font-family:var(--mono);font-size:15px;color:var(--dimmer);will-change:transform;} .family-data .lane span{display:inline-block;padding:0 .5ch;} .family-data .lane span.g{color:var(--gold-hi);} .family-data .lane span.w{color:var(--dim);} .family-data .lane.l1{animation:data-flow1 30s linear infinite;} .family-data .lane.l2{animation:data-flow2 24s linear infinite;} .family-data .lane.l3{animation:data-flow1 38s linear infinite;} @keyframes data-flow1{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes data-flow2{from{transform:translateX(-50%);}to{transform:translateX(0);}} .family-data .meter{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-top:16px;} .family-data .meter .val{font-family:var(--mono);font-size:clamp(40px,7vw,84px);color:var(--gold-hi);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;} .family-data .meter .cap{font-family:var(--mono);font-size:13px;color:var(--dim);letter-spacing:.06em;} .family-data .meter-sec .land{font-family:var(--serif);font-size:clamp(20px,2.6vw,30px);color:var(--ink);margin-top:34px;max-width:22ch;line-height:1.25;} .family-data .meter-sec .land em{font-style:italic;color:var(--gold-hi);} .family-data .anat-sec{padding:120px 0;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .family-data .anat-sec .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--gold);margin-bottom:14px;} .family-data .anat-sec h2{font-size:clamp(24px,3.4vw,38px);font-weight:400;letter-spacing:-.01em;max-width:22ch;margin-bottom:8px;} .family-data .anat-sec h2 em{font-style:italic;color:var(--gold-hi);} .family-data .anat-sec .note{font-family:var(--mono);font-size:13px;color:var(--dim);max-width:58ch;margin-bottom:36px;line-height:1.7;} .family-data .kinds{display:grid;gap:14px;} .family-data .kind{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:22px 24px;font-family:var(--mono); display:grid;grid-template-columns:1fr auto;gap:16px 24px;align-items:center; opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,.84,.28,1),transform .7s cubic-bezier(.16,.84,.28,1);} .family-data .anat-sec.in .kind{opacity:1;transform:none;} .family-data .anat-sec.in .kind:nth-child(1){transition-delay:.05s;} .family-data .anat-sec.in .kind:nth-child(2){transition-delay:.18s;} .family-data .anat-sec.in .kind:nth-child(3){transition-delay:.31s;} .family-data .kind .name{font-size:15px;color:var(--ink);letter-spacing:.02em;} .family-data .kind .name b{color:var(--gold-hi);font-weight:400;} .family-data .kind .rate{font-size:14px;color:var(--dim);text-align:right;white-space:nowrap;} .family-data .kind .rate .x{font-size:20px;color:var(--gold-hi);} .family-data .kind .bar{grid-column:1/-1;height:8px;background:#0e131a;border-radius:4px;overflow:hidden;position:relative;} .family-data .kind .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi));border-radius:4px;transition:width 1.1s cubic-bezier(.16,.84,.28,1);} .family-data .anat-sec.in .kind .bar i{width:var(--w);} .family-data .kind .desc{grid-column:1/-1;font-size:12.5px;color:var(--dim);line-height:1.55;} .family-data .kind.reason{border-color:#3a2f1a;} .family-data .kind.reason .name b{color:var(--red);} .family-data .kind.reason .bar i{background:linear-gradient(90deg,#8a5a34,var(--red));} .family-data .hidden-note{margin-top:26px;border-left:2px solid var(--red);padding:14px 22px;background:rgba(217,139,95,.06);font-family:var(--mono);font-size:13.5px;color:var(--ink);line-height:1.7;max-width:60ch;} .family-data .hidden-note b{color:var(--red);font-weight:400;} .family-data .ledger-sec{padding:120px 0;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .family-data .ledger-sec .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--gold);margin-bottom:14px;} .family-data .ledger-sec h2{font-size:clamp(24px,3.4vw,38px);font-weight:400;letter-spacing:-.01em;max-width:22ch;margin-bottom:8px;} .family-data .ledger-sec h2 em{font-style:italic;color:var(--gold-hi);} .family-data .ledger-sec .note{font-family:var(--mono);font-size:13px;color:var(--dim);max-width:60ch;margin-bottom:30px;line-height:1.7;} .family-data .ledger-sec .note b{color:var(--gold-hi);font-weight:400;} .family-data .legend{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer);margin-bottom:22px;} .family-data .legend span{display:flex;align-items:center;gap:7px;} .family-data .legend i{width:8px;height:8px;border-radius:2px;display:inline-block;} .family-data .legend .counted i{background:var(--green);} .family-data .legend .missed i{background:var(--red);} .family-data .legend .grows i{background:var(--gold-hi);} .family-data .ledger{border:1px solid var(--line);background:var(--panel);border-radius:6px;overflow:hidden;font-family:var(--mono);} .family-data .cost{border-bottom:1px solid var(--line);opacity:0;transform:translateX(-16px);transition:opacity .5s ease,transform .5s cubic-bezier(.16,.84,.28,1);} .family-data .cost:last-child{border-bottom:none;} .family-data .ledger.in .cost{opacity:1;transform:none;} .family-data .ledger.in .cost:nth-child(1){transition-delay:.05s;}.family-data .ledger.in .cost:nth-child(2){transition-delay:.11s;} .family-data .ledger.in .cost:nth-child(3){transition-delay:.17s;}.family-data .ledger.in .cost:nth-child(4){transition-delay:.23s;} .family-data .ledger.in .cost:nth-child(5){transition-delay:.29s;}.family-data .ledger.in .cost:nth-child(6){transition-delay:.35s;} .family-data .ledger.in .cost:nth-child(7){transition-delay:.41s;}.family-data .ledger.in .cost:nth-child(8){transition-delay:.47s;} .family-data .cost > button{all:unset;display:grid;grid-template-columns:44px 1fr auto 26px;gap:16px;align-items:center;padding:18px 22px;width:100%;cursor:pointer;box-sizing:border-box;} .family-data .cost > button:focus-visible{outline:1px solid var(--gold);outline-offset:-3px;} .family-data .cost:hover > button{background:#0e131a;} .family-data .cost .idx{color:var(--gold);font-size:13px;} .family-data .cost .title{font-size:15.5px;color:var(--ink);} .family-data .cost .flag{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding:4px 9px;border-radius:100px;border:1px solid var(--line);color:var(--dim);} .family-data .cost .flag.counted{color:var(--green);border-color:#26402e;} .family-data .cost .flag.missed{color:var(--red);border-color:#3a2a1f;} .family-data .cost .flag.grows{color:var(--gold-hi);border-color:#3a2f1a;} .family-data .cost .chev{width:9px;height:9px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg);transition:transform .3s;margin:0 auto;} .family-data .cost.open .chev{transform:rotate(225deg);border-color:var(--gold-hi);} .family-data .cost .body{max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.16,.84,.28,1);} .family-data .cost.open .body{max-height:340px;} .family-data .cost .body-in{padding:2px 22px 24px 82px;} .family-data .cost .what{font-size:14px;color:var(--ink);line-height:1.6;margin-bottom:14px;} .family-data .cost .bites{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:12.5px;line-height:1.55;} .family-data .cost .bites .lbl{color:var(--gold-hi);letter-spacing:.06em;text-transform:uppercase;font-size:11px;white-space:nowrap;} .family-data .cost .bites .v{color:var(--dim);} .family-data .cost .tokenlink{color:var(--gold-hi);text-decoration:none;border-bottom:1px solid #3a2f1a;} .family-data .cost .tokenlink:hover{border-color:var(--gold-hi);} .family-data .hint{font-family:var(--mono);font-size:11.5px;color:var(--dimmer);margin-top:16px;letter-spacing:.04em;} .family-data .ltotal{display:grid;grid-template-columns:1fr auto;padding:20px 22px;background:#0e131a;font-family:var(--mono);align-items:baseline;border-top:1px solid var(--line);} .family-data .ltotal .l{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);} .family-data .ltotal .r{font-size:15px;color:var(--gold-hi);} .family-data .ltotal .r b{color:var(--red);font-weight:400;} .family-data .breath{padding:120px 0;background:var(--paper);color:#12141a;} .family-data .breath .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#7d5e10;margin-bottom:22px;} .family-data .breath h2{font-size:clamp(26px,3.8vw,44px);font-weight:400;letter-spacing:-.02em;max-width:20ch;line-height:1.12;color:#12141a;} .family-data .breath h2 em{font-style:italic;color:#7d5e10;} .family-data .breath p{font-size:18px;line-height:1.6;color:#3a3f48;max-width:58ch;margin-top:24px;} .family-data .closing{padding:120px 0;} .family-data .closing .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--gold);margin-bottom:24px;} .family-data .closing p.big{font-size:clamp(20px,2.6vw,30px);line-height:1.32;font-weight:400;max-width:26ch;letter-spacing:-.01em;} .family-data .closing p.big em{font-style:italic;color:var(--gold-hi);} .family-data .closing .body{font-family:var(--mono);font-size:14px;line-height:1.9;color:var(--dim);max-width:60ch;margin-top:26px;} .family-data .closing .body b{color:var(--ink);font-weight:400;} .family-data .endrule{height:1px;background:var(--line);margin:44px 0;} .family-data .signoff{font-family:var(--mono);font-size:12.5px;color:var(--dimmer);max-width:62ch;line-height:1.7;} .family-data .signoff b{color:var(--dim);} .family-data .signoff .src{color:var(--dimmer);} /* Step & limit — two panels on the terminal grid. */ .family-data .tryit{background:var(--bg-2);border-top:1px solid var(--line);padding:88px 0;} .family-data .tryit .grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);} .family-data .tryit .ti{background:var(--panel);padding:34px 30px;} .family-data .tryit .ti-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;} .family-data .tryit .ti:last-child .ti-k{color:var(--dimmer);} .family-data .tryit .ti-b{font-family:var(--mono);font-size:14px;line-height:1.85;color:var(--ink);} .family-data .tryit .ti:last-child .ti-b{color:var(--dim);} @media(max-width:760px){.family-data .tryit .grid{grid-template-columns:1fr;}} .family-data .foot-cta{background:#07090d;border-top:1px solid var(--line);padding:96px 0;} .family-data .foot-cta h2{font-family:var(--serif);font-size:clamp(28px,4.4vw,52px);font-weight:400;line-height:1.1;letter-spacing:-.02em;color:var(--ink);} .family-data .foot-cta h2 em{font-style:italic;color:var(--gold-hi);} .family-data .foot-cta p{font-family:var(--mono);margin-top:22px;color:var(--dim);font-size:15px;max-width:48ch;} .family-data .foot-cta a.btn{display:inline-flex;align-items:center;gap:12px;margin-top:36px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:15px;letter-spacing:.02em; background:var(--gold);color:#07090d;text-decoration:none;padding:16px 28px;border-radius:999px;transition:.28s;font-weight:600;} .family-data .foot-cta a.btn:hover{background:var(--gold-hi);transform:translateY(-2px);} .family-data footer{background:#07090d;color:var(--dimmer);padding:34px 0 56px;font-family:var(--mono);font-size:12.5px;} .family-data footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;} .family-data footer a{color:var(--dim);text-decoration:none;} .family-data footer a:hover{color:var(--gold-hi);} /* ---------- data-terminal: narrow layouts (no horizontal overflow) ---------- */ @media(max-width:560px){ .family-data .wrap{padding:0 20px;} .family-data .kind{grid-template-columns:1fr;} .family-data .kind .rate{text-align:left;} .family-data .cost > button{grid-template-columns:30px 1fr auto 18px;gap:12px;padding-left:16px;padding-right:16px;} .family-data .cost .flag{font-size:9.5px;padding:3px 7px;} .family-data .cost .body-in{padding:2px 16px 22px 16px;} .family-data .cost.open .body{max-height:520px;} } /* ---------- reduced motion (all families) ---------- */ @media(prefers-reduced-motion:reduce){ .family-panels .panel .big .line>span, .family-panels .panel .sub, .family-panels .panel .step, .family-panels .settle{transform:none!important;opacity:1!important;transition:none!important;} .family-panels .scrollcue .bar::after{animation:none!important;} .family-editorial .reveal, .family-editorial .aud{transform:none!important;opacity:1!important;transition:none!important;} .family-data .reveal, .family-data .kind, .family-data .cost{transform:none!important;opacity:1!important;transition:none!important;} .family-data .cost .body{transition:none!important;} .family-data .lane{animation:none!important;} .family-data .scrollcue .bar::after{animation:none!important;} }