:root{
  --ink:#141414;--paper:#FFFFFF;--fog:#F3F3F3;--stone:#5C5C5C;--line:#DADADA;--tone:#232323;
  --sans:Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:Archivo,"Arial Narrow",Arial,sans-serif;
  --wrap:1200px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.big::before{content:attr(data-n)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
.num{font-family:var(--display);font-weight:800;font-stretch:78%;letter-spacing:-.015em;line-height:.8}
h1,h2,h3{margin:0;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(36px,4.8vw,60px);line-height:1.04;font-weight:800}
h2{font-size:clamp(30px,3.8vw,46px);line-height:1.06;font-weight:800}
h3{font-size:20px;line-height:1.25;font-weight:700}
p{margin:0 0 14px;max-width:62ch}
.lede{font-size:clamp(18px,1.7vw,21px);color:var(--stone);max-width:44ch}
.label{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-bottom:18px}
.dark .label{color:#A8A8A8}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:16px;padding:15px 24px;border-radius:999px;border:0;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn.light{background:#fff;color:var(--ink)}
.btn.light:hover{background:#ECECEC}
.btn-note{font-size:14px;color:var(--stone);margin-top:12px}
.dark .btn-note{color:#A8A8A8}
.textlink{font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}

/* header */
.site-head{border-bottom:1px solid var(--line);background:var(--paper)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px}
.site-head .logo img{height:46px;width:auto}
.site-nav{display:flex;align-items:center;gap:26px;font-weight:600;font-size:15px}
.site-nav a{text-decoration:none}
.site-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.site-nav .btn{padding:10px 18px;font-size:15px}
.nav-links{display:flex;gap:26px}
@media (max-width:860px){.nav-links{display:none}}

/* sections */
section{padding-block:96px}
section+section{border-top:1px solid var(--line)}
.dark{background:var(--ink);color:#fff;border-top:0!important}
.dark+section{border-top:0}
.fog{background:var(--fog)}
@media (max-width:640px){section{padding-block:68px}}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:110px 120px;border-top:0}
.hero .big{position:absolute;right:-3vw;bottom:-14vw;font-size:min(52vw,720px);color:var(--ink);pointer-events:none;user-select:none}
.hero .copy{position:relative;max-width:640px}
.hero h1{margin-bottom:22px;max-width:16ch}
.hero .lede{margin-bottom:34px}
@media (max-width:860px){.hero .big{font-size:80vw;right:-18vw;bottom:-30vw;color:#EFEFEF}.hero{padding-block:72px 96px}}

/* offers */
.offers{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;border-top:2px solid var(--ink)}
.offer{padding:26px 24px 8px 0}
.offer+.offer{padding-left:24px;border-left:1px solid var(--line)}
.offer .n{font-size:64px;display:block;margin-bottom:18px}
.offer h3{margin-bottom:10px}
.offer p{font-size:16px;color:var(--stone)}
@media (max-width:980px){.offers{grid-template-columns:1fr 1fr}.offer:nth-child(3){padding-left:0;border-left:0}.offer:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:560px){.offers{grid-template-columns:1fr}.offer,.offer+.offer{padding-left:0;border-left:0}.offer+.offer{border-top:1px solid var(--line)}}

/* education strip */
.edu{position:relative;overflow:hidden}
.edu .big{position:absolute;right:-2vw;top:50%;transform:translateY(-50%);font-size:min(40vw,520px);color:var(--tone);pointer-events:none;user-select:none}
.edu .copy{position:relative;max-width:620px}
.edu h2{margin-bottom:16px}
.edu p{color:#CFCFCF}
.edu .btn{margin-top:14px}

/* steps */
.steps{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;counter-reset:s}
.steps li{border-top:2px solid var(--ink);padding-top:18px}
.steps .n{font-size:44px;display:block;margin-bottom:12px}
.steps h3{font-size:19px;margin-bottom:8px}
.steps p{font-size:15px;color:var(--stone)}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.promise{margin-top:56px;border:2px solid var(--ink);border-radius:6px;padding:30px 32px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.promise .n{font-size:88px}
.promise p{margin:0;font-size:19px;max-width:62ch}
.promise strong{display:block;font-size:22px;margin-bottom:6px}
@media (max-width:640px){.promise{grid-template-columns:1fr;gap:12px;padding:24px}.promise .n{font-size:64px}}

/* work */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.card{display:flex;flex-direction:column;text-decoration:none}
.card .shot{aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--fog)}
.card .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .4s ease}
.card:hover .shot img{transform:scale(1.025)}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px}
.card h3{font-size:21px}
.card .tag{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);white-space:nowrap}
.card p{font-size:15.5px;color:var(--stone);margin-top:6px}
.card .go{font-weight:700;font-size:15px;margin-top:auto}
.work.two{grid-template-columns:repeat(2,1fr)}
.sub{margin-top:72px}
.sub h3{font-size:24px;margin-bottom:6px}
.sub>p{color:var(--stone)}
@media (max-width:900px){.work,.work.two{grid-template-columns:1fr}}

/* pricing */
.prices{margin-top:44px;border-top:2px solid var(--ink)}
.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) 180px;gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.price .t{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.price p{margin:0;font-size:16px;color:var(--stone)}
.price .amt{font-weight:800;font-size:22px;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.price .amt small{display:block;font-size:13px;font-weight:600;color:var(--stone);text-align:right}
.fine{font-size:15px;color:var(--stone);margin-top:20px}
@media (max-width:760px){.price{grid-template-columns:1fr;gap:6px}.price .amt{text-align:left}.price .amt small{text-align:left}}

/* about */
.about{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start;margin-top:8px}
.about figure{margin:0;background:var(--fog);border-radius:6px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.about figure img{width:82%}
.about h2{margin-bottom:22px}
.facts{display:flex;gap:40px;flex-wrap:wrap;margin:28px 0 26px}
.facts div{min-width:110px}
.facts .num{font-size:72px;display:block}
.facts span:not(.num){font-size:14px;color:var(--stone);font-weight:600}
@media (max-width:820px){.about{grid-template-columns:1fr;gap:32px}.about figure{max-width:260px}}

/* contact */
.contact{position:relative;overflow:hidden}
.contact .big{position:absolute;left:-2vw;bottom:-11vw;font-size:min(38vw,520px);color:var(--tone);pointer-events:none;user-select:none}
.contact .copy{position:relative;max-width:640px;margin-left:auto}
.contact h2{margin-bottom:18px}
.contact p{color:#CFCFCF}
.mail{display:block;font-size:clamp(24px,3.2vw,38px);font-weight:800;letter-spacing:-.02em;margin:26px 0 22px;text-decoration:none;word-break:break-all}
.mail:hover{text-decoration:underline;text-underline-offset:6px}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.copybtn{background:transparent;color:#fff;border:1.5px solid #5C5C5C;border-radius:999px;padding:13px 20px;font:700 15px var(--sans);cursor:pointer}
.copybtn:hover{border-color:#fff}
.privacy{font-size:14px;color:#A8A8A8!important;margin-top:28px}
@media (max-width:860px){.contact .copy{margin-left:0}}

/* education page */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.who div{border-top:2px solid var(--ink);padding-top:18px}
.who h3{margin-bottom:8px}
.who p{font-size:16px;color:var(--stone)}
@media (max-width:860px){.who{grid-template-columns:1fr}}
.rules{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.rules li{padding:20px 0 20px 40px;border-top:1px solid #333;position:relative;color:#E6E6E6}
.rules li::before{content:"";position:absolute;left:0;top:28px;width:18px;height:2px;background:#fff}
.rules strong{color:#fff}
@media (max-width:760px){.rules{grid-template-columns:1fr}}
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.terms div{background:var(--fog);border-radius:6px;padding:26px}
.terms .num{font-size:56px;display:block;margin-bottom:14px}
.terms p{font-size:16px;color:var(--stone);margin:0}
@media (max-width:860px){.terms{grid-template-columns:1fr}}
.guarantee{margin-top:28px;padding:24px 28px;border:2px solid var(--ink);border-radius:6px;background:var(--paper)}
.guarantee p{margin:0;max-width:62ch}

/* footer */
.site-foot{border-top:1px solid var(--line);padding-block:40px;font-size:14px;color:var(--stone)}
.site-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.site-foot img{height:40px;width:auto}
.site-foot nav{display:flex;gap:22px;flex-wrap:wrap}
.site-foot a{text-decoration:none}
.site-foot a:hover{text-decoration:underline}

.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;z-index:9}
.skip:focus{left:8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* ---------- v2: emphasis, hero accordion, chapters ---------- */
h1 em,h2 em,.rule-line em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.08em}

/* hero (home page only, body.home): logo and two buttons top left, headline only, the 8, and five colorful panels on the right */
.home{--pad:clamp(16px,2.8vw,40px);--acc-w:clamp(560px,50vw,820px);--col-gap:clamp(32px,3.6vw,64px)}
.home .site-head{position:absolute;inset:0 0 auto;z-index:5;background:none;border:0;pointer-events:none}
.home .site-head .wrap,.hero-acc .wrap{max-width:1600px;padding-inline:var(--pad);display:grid;grid-template-columns:minmax(0,1fr) var(--acc-w);column-gap:var(--col-gap)}
.home .site-head .wrap{padding-block:var(--pad) 0}
.home .site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}
.home .site-nav{gap:10px}
.site-nav .btn:hover{text-decoration:none}
.btn.line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.line:hover{background:var(--fog)}

.hero-acc{padding-block:var(--pad)}
.hero-acc .wrap{align-items:stretch}
.hero-acc .copy{position:relative;max-width:none;display:flex;flex-direction:column;justify-content:center;padding-block:110px clamp(150px,30vh,300px)}
.hero-acc h1{position:relative;z-index:1;font-size:clamp(40px,4.7vw,80px);line-height:1.02;letter-spacing:-.035em;max-width:13ch;margin:0}

/* the 8: rises in on load, takes a pale tint of whichever panel is open, and its outline drifts against the fill with the pointer */
.eight{position:absolute;right:0;bottom:calc(-1 * var(--pad) - .26em);font-size:clamp(300px,37vw,620px);pointer-events:none;user-select:none}
.eight span{display:block;font-family:var(--display);font-weight:800;font-stretch:78%;line-height:.8;transition:transform .9s var(--ease-out),color 1.2s ease}
.e-fill{color:#EFEFEF}
.e-line{position:absolute;left:.022em;top:-.02em;color:transparent;-webkit-text-stroke:2px var(--ink)}
.js .eight{opacity:0;transform:translateY(16%)}
.js .eight.in{opacity:1;transform:none;transition:opacity .8s ease .2s,transform 1.4s var(--ease-out) .2s}

/* panels */
.acc{--strip:52px;--gap:8px;display:flex;gap:var(--gap);height:clamp(600px,calc(100svh - 2 * var(--pad)),880px)}
.pnl{--fg:#fff;--fg2:rgba(255,255,255,.84);position:relative;isolation:isolate;flex:0 0 var(--strip);min-width:0;border-radius:28px;overflow:hidden;cursor:pointer;background:var(--c1);color:var(--fg);transition:flex-grow .7s var(--ease-out)}
.pnl.is-open{flex-grow:1;cursor:default}
.pnl:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.p-blue{--c1:#3124DD;--c2:#A04DFF;--c3:#FF8AD8;--c4:#1E4FF0}
.p-pink{--c1:#D3175C;--c2:#FF7A45;--c3:#FFA6D0;--c4:#9C127C}
.p-green{--c1:#087A4C;--c2:#35D27F;--c3:#D2F56C;--c4:#0A5A6B}
.p-sun{--c1:#FFC020;--c2:#FF8A1F;--c3:#FFF07E;--c4:#FF7AA8;--fg:var(--ink);--fg2:rgba(20,20,20,.78)}
.p-teal{--c1:#08707F;--c2:#2CC9B6;--c3:#86ECCB;--c4:#2D55D6}

/* soft color fields that drift while a panel is open */
.pnl-mesh{position:absolute;top:0;bottom:0;left:0;width:var(--open,100%);z-index:-1;overflow:hidden;pointer-events:none}
.pnl-mesh i{position:absolute;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--b),transparent);animation:drift 16s var(--ease-in-out) infinite alternate paused}
.pnl.play .pnl-mesh i{animation-play-state:running}
.pnl-mesh i:nth-child(1){--b:var(--c2);width:130%;right:-62%;top:-48%}
.pnl-mesh i:nth-child(2){--b:var(--c3);width:78%;right:-28%;top:4%;animation-duration:19s;animation-direction:alternate-reverse}
.pnl-mesh i:nth-child(3){--b:var(--c4);width:120%;left:-58%;bottom:-48%;animation-duration:22s}
.pnl-mesh::after{content:"";position:absolute;width:170%;aspect-ratio:1;left:-36%;top:44%;border-radius:47% 53% 50% 50%;box-shadow:inset 0 40px 70px -34px rgba(255,255,255,.55);transform:rotate(-14deg)}
@keyframes drift{to{transform:translate(-9%,7%) scale(1.14)}}

.pnl-v{position:absolute;bottom:26px;left:calc(var(--strip) / 2);transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;font-weight:700;font-size:16px;letter-spacing:-.005em;z-index:3;transition:opacity .25s ease .3s}
.pnl.is-open .pnl-v{opacity:0;transition-delay:0s}
.pnl-body{position:absolute;top:0;bottom:0;left:0;width:var(--open,100%);padding:28px;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;opacity:0;transition:opacity .2s ease;z-index:2}
.pnl.is-open .pnl-body{opacity:1;transition:opacity .3s ease .15s}
.pnl-body>:not(.pnl-obj){position:relative;z-index:2}
.pnl-body h2{font-size:clamp(30px,2.6vw,42px);line-height:1.02;letter-spacing:-.035em;max-width:11ch}
.pnl-foot{margin:0;font-size:15px;line-height:1.45;max-width:34ch;color:var(--fg2)}

/* the 3D object: swings in when the panel opens, floats, and tilts toward the pointer */
.pnl-obj{position:absolute;top:24px;right:12px;width:min(60%,320px);aspect-ratio:1;z-index:1;perspective:800px;pointer-events:none}
.pnl-obj .tilt{display:block;width:100%;height:100%;transition:transform .5s var(--ease-out)}
.pnl-obj img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 26px rgba(0,0,0,.2));animation:bob 6s var(--ease-in-out) infinite alternate paused}
.pnl.play .pnl-obj img{animation-play-state:running}
@keyframes bob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-14px) rotate(2deg)}}
.js .pnl .pnl-obj{opacity:0;transform:perspective(800px) translateY(28px) rotateX(18deg) rotateY(-26deg) scale(.9);transition:opacity .15s ease,transform .15s ease}
.js .pnl.play .pnl-obj{opacity:1;transform:none;transition:opacity .5s var(--ease-out) .15s,transform 1.1s var(--ease-out) .15s}

/* 4: mascot faces for how people feel about you, at different depths so they separate when the panel tilts */
.faces .tilt{transform-style:preserve-3d}
.faces .face{position:absolute;display:block;transform:translateZ(var(--z))}
.faces .f1{--z:-20px;--fd:.4s;width:50%;left:0;top:36%}
.faces .f2{--z:-34px;--fd:.55s;width:44%;left:54%;top:2%}
.faces .f3{--z:40px;--fd:.25s;width:62%;left:28%;top:30%}
.faces .f1 img{animation-duration:5.2s;animation-delay:-1.4s}
.faces .f2 img{animation-duration:6.8s;animation-delay:-3s}
.js .pnl .faces .face{opacity:0;transform:translateZ(var(--z)) translateY(18px) scale(.86);transition:opacity .15s ease,transform .15s ease}
.js .pnl.play .faces .face{opacity:1;transform:translateZ(var(--z));transition:opacity .4s var(--ease-out) var(--fd),transform .7s var(--ease-out) var(--fd)}
/* 1: subscriptions */
.pnl-swaps{list-style:none;margin:0;padding:0}
.pnl-swaps li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.26)}
.pnl-swaps s{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:34px;line-height:1;color:rgba(255,255,255,.5);text-decoration:none;position:relative;justify-self:start}
.pnl-swaps s::after{content:"";position:absolute;left:-3%;right:-3%;top:46%;height:3px;background:#fff}
.pnl-swaps span{font-size:15px;font-weight:600;line-height:1.35}
/* 2: agents */
.pnl-drafts{display:grid;gap:10px}
.dr{position:relative;background:#fff;color:var(--ink);border-radius:14px;padding:14px 16px;display:grid;gap:8px;box-shadow:0 16px 30px -16px rgba(0,0,0,.32)}
.dr b{font-size:13px;letter-spacing:.02em}
.dr i{display:block;height:7px;border-radius:4px;background:#E6E6E6}
.dr .w90{width:90%}.dr .w80{width:80%}.dr .w75{width:75%}.dr .w70{width:70%}.dr .w60{width:60%}
.ok{position:absolute;top:11px;right:12px;font-style:normal;font-size:12px;font-weight:700;line-height:1;background:var(--ink);color:#fff;border-radius:999px;padding:5px 9px;transform-origin:right center}
/* 3: websites */
.pnl-chart{background:#fff;color:var(--ink);border-radius:16px;padding:16px 18px;display:grid;gap:8px;box-shadow:0 16px 30px -16px rgba(0,0,0,.32)}
.pnl-chart .pk{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--stone)}
.bars{display:flex;align-items:flex-end;gap:5px;height:96px;padding-top:4px}
.bars i{flex:1;height:calc(var(--h) * 1%);background:var(--ink);border-radius:2px 2px 0 0;transform-origin:bottom center}
.pnl-chart .cap{font-size:12px;color:var(--stone);font-weight:600}
/* 4: listening */
.pnl-src{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pnl-src li{display:grid;grid-template-columns:80px 1fr;gap:14px;align-items:center;font-size:14px;font-weight:700;padding:12px 14px;background:rgba(255,255,255,.58);border-radius:12px}
.pnl-src li::after{content:"";height:7px;border-radius:4px;background:rgba(20,20,20,.2);transform-origin:left center}
.pnl-src li:nth-child(2)::after{width:70%}.pnl-src li:nth-child(3)::after{width:85%}.pnl-src li:nth-child(4)::after{width:60%}
.sum{background:#fff;color:var(--ink);border-radius:14px;padding:16px 18px;display:grid;gap:8px;box-shadow:0 16px 30px -16px rgba(0,0,0,.26)}
.sum p{margin:0 0 4px;font-size:15px;font-weight:700;line-height:1.35}
.sum i{display:block;height:7px;border-radius:4px;background:#E6E6E6;width:90%}
.sum i+i{width:62%}
/* 5: training */
.pnl-rules{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pnl-rules div{background:#fff;color:var(--ink);border-radius:14px;padding:16px;display:grid;gap:9px;align-content:start;box-shadow:0 16px 30px -16px rgba(0,0,0,.32)}
.pnl-rules b{font-size:13px;letter-spacing:.02em;margin-bottom:2px}
.pnl-rules span{font-size:15px;font-weight:600;display:flex;gap:8px;align-items:baseline}
.pnl-rules div:first-child span::before{content:"✓";font-weight:800}
.pnl-rules div:last-child span::before{content:"✕";font-weight:800}

/* panel content plays in each time a panel opens (.play, set by site.js). Without JS it simply shows. */
.js .pnl .in-up{opacity:0;transform:translateY(12px);transition:opacity .15s ease,transform .15s ease}
.js .pnl .in-left{opacity:0;transform:translateX(-14px);transition:opacity .15s ease,transform .15s ease}
.js .pnl .in-right{opacity:0;transform:translateX(18px);transition:opacity .15s ease,transform .15s ease}
.js .pnl.play :is(.in-up,.in-left,.in-right){opacity:1;transform:none;transition:opacity .45s var(--ease-out) var(--d,.2s),transform .6s var(--ease-out) var(--d,.2s)}
.js .pnl .draw,.js .pnl .pnl-src li::after,.js .pnl .pnl-swaps s::after{transform:scaleX(0);transform-origin:left center;transition:transform .15s ease}
.js .pnl.play .draw,.js .pnl.play .pnl-src li::after,.js .pnl.play .pnl-swaps s::after{transform:none;transition:transform .5s var(--ease-out) var(--dd,.4s)}
/* 1: each tool gets struck through, dims, then its replacement slides in */
.pnl-swaps li:nth-child(1){--r:.3s}.pnl-swaps li:nth-child(2){--r:.5s}.pnl-swaps li:nth-child(3){--r:.7s}.pnl-swaps li:nth-child(4){--r:.9s}
.pnl-swaps li{--d:var(--r)}
.pnl-swaps s::after{--dd:calc(var(--r) + .3s)}
.pnl-swaps span{--d:calc(var(--r) + .45s)}
.js .pnl .pnl-swaps s{color:#fff;transition:color .15s ease}
.js .pnl.play .pnl-swaps s{color:rgba(255,255,255,.5);transition:color .3s ease calc(var(--r) + .4s)}
.pnl-swaps~.pnl-foot{--d:1.6s}
/* 2: drafts arrive, lines write themselves, then each is marked ready */
.dr:nth-child(1){--r:.3s}.dr:nth-child(2){--r:.6s}.dr:nth-child(3){--r:.9s}
.dr{--d:var(--r)}
.dr i:nth-of-type(1){--dd:calc(var(--r) + .2s)}.dr i:nth-of-type(2){--dd:calc(var(--r) + .32s)}
.js .pnl .ok{opacity:0;transform:scale(.92);transition:opacity .15s ease,transform .15s ease}
.js .pnl.play .ok{opacity:1;transform:none;transition:opacity .3s var(--ease-out) calc(var(--r) + .6s),transform .3s var(--ease-out) calc(var(--r) + .6s)}
.pnl-drafts~.pnl-foot{--d:1.7s}
/* 3: the chart grows left to right */
.pnl-chart{--d:.35s}
.js .pnl .bars i{transform:scaleY(0);transition:transform .15s ease}
.js .pnl.play .bars i{transform:none;transition:transform .5s var(--ease-out) calc(.6s + var(--i) * 45ms)}
.pnl-chart .cap{--d:1.3s}
/* 4: sources come in, then the one-page summary */
.pnl-src li:nth-child(1){--r:.3s}.pnl-src li:nth-child(2){--r:.42s}.pnl-src li:nth-child(3){--r:.54s}.pnl-src li:nth-child(4){--r:.66s}
.pnl-src li{--d:var(--r);--dd:calc(var(--r) + .2s)}
.sum{--d:1.1s}
.sum i:nth-of-type(1){--dd:1.35s}.sum i:nth-of-type(2){--dd:1.47s}
/* 5: do and don't lists tick in */
.pnl-rules div:nth-child(1){--d:.3s}.pnl-rules div:nth-child(2){--d:.42s}
.pnl-rules div:nth-child(1) span:nth-of-type(1){--d:.55s}.pnl-rules div:nth-child(1) span:nth-of-type(2){--d:.67s}.pnl-rules div:nth-child(1) span:nth-of-type(3){--d:.79s}
.pnl-rules div:nth-child(2) span:nth-of-type(1){--d:1s}.pnl-rules div:nth-child(2) span:nth-of-type(2){--d:1.12s}.pnl-rules div:nth-child(2) span:nth-of-type(3){--d:1.24s}
.pnl-rules~.pnl-foot{--d:1.6s}
@media (prefers-reduced-motion:reduce){.pnl-mesh i,.pnl-obj img{animation:none}}

@media (max-width:1240px){.pnl-swaps s{font-size:28px}.pnl-body{padding:24px}}
/* narrower screens: header back in the flow, headline above the panels */
@media (max-width:1080px){
  .home .site-head{position:static}
  .home .site-head .wrap{display:block}
  .hero-acc .wrap{grid-template-columns:1fr;row-gap:28px}
  .hero-acc .copy{padding-block:64px 40px;overflow:hidden}
  .hero-acc h1{font-size:clamp(38px,7vw,68px);max-width:12ch}
  .eight{font-size:min(56vw,420px);right:-.04em;bottom:-.3em}
  .e-line{-webkit-text-stroke-width:1.5px}
  .acc{height:640px}
}
/* phones: panels stack, the open one grows */
@media (max-width:760px){
  .home .site-nav .btn{padding:9px 14px;font-size:14px}
  .home .site-head .logo img{height:40px}
  .hero-acc .copy{padding-block:48px 28px}
  .acc{flex-direction:column;height:auto}
  .pnl{flex:none;height:60px;border-radius:22px;transition:height .6s var(--ease-out)}
  .pnl.is-open{height:560px}
  .pnl-v{writing-mode:horizontal-tb;transform:none;top:0;bottom:auto;left:22px;height:60px;display:flex;align-items:center}
  .pnl-body{width:100%;padding:22px}
  .pnl-obj{width:150px;top:14px;right:10px}
}

.chapters{position:relative}
.chapter{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;border-top:0!important;padding-block:80px}
.ch-dark{background:var(--ink);color:#fff}
.ch-fog{background:var(--fog)}
.ch-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center;width:100%}
.ch-n{font-size:120px;display:block;margin-bottom:18px}
.ch-dark .ch-n{color:#fff}
.ch-tag{font-size:14px;font-weight:700;color:var(--stone);margin-bottom:10px}
.ch-dark .ch-tag{color:#A8A8A8}
.ch-copy h2{margin-bottom:16px}
.ch-line{font-size:19px;color:var(--stone);max-width:36ch;margin-bottom:26px}
.ch-dark .ch-line{color:#CFCFCF}
.ch-stats{list-style:none;padding:0;margin:0 0 28px;display:flex;gap:40px;flex-wrap:wrap;font-size:14px;font-weight:600;color:var(--stone)}
.ch-stats .num{display:block;font-size:56px;color:var(--ink);margin-bottom:6px}
.swaps p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid #333;margin:0;max-width:none}
.swaps s{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:clamp(30px,3.4vw,46px);line-height:1;color:#6F6F6F;text-decoration-thickness:3px;text-decoration-color:#fff}
.swaps span{font-size:17px;color:#fff;font-weight:600}
.swaps .rule-line{display:block;border:0;padding-top:30px;font-size:24px;font-weight:700;color:#fff}
.scroller{display:block;aspect-ratio:16/11;border:1px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff;box-shadow:8px 8px 0 var(--ink)}
.scroller span{display:block;width:100%;height:100%;background-size:100% auto;background-repeat:no-repeat;background-position:50% 0;animation:scrollshot 26s ease-in-out infinite alternate}
.scroller:hover span{animation-play-state:paused}
@keyframes scrollshot{0%,8%{background-position:50% 0}92%,100%{background-position:50% 100%}}
@media (max-width:900px){.chapter{position:relative;min-height:0}.ch-grid{grid-template-columns:1fr;gap:40px}.ch-n{font-size:84px}}

/* case study pages */
.cs-hero{padding-block:96px 64px;border-top:0}
.cs-hero .ch-tag{margin-bottom:14px}
.cs-hero h1{max-width:18ch;margin-bottom:18px}
.cs-body{display:grid;grid-template-columns:220px 1fr;gap:56px;padding-block:72px}
.cs-body h2{font-size:28px;margin-bottom:14px}
.cs-side{position:sticky;top:24px;align-self:start;font-size:14px;color:var(--stone);display:grid;gap:18px}
.cs-side b{display:block;color:var(--ink);font-size:15px}
.cs-main>div{margin-bottom:52px}
.cs-main ul,.cs-main ol{padding-left:20px;margin:0;max-width:62ch}
.cs-main li{margin:8px 0}
.cs-stats{display:flex;gap:48px;flex-wrap:wrap;margin:6px 0 4px}
.cs-stats div{font-size:14px;font-weight:600;color:var(--stone);max-width:180px}
.cs-stats .num{display:block;font-size:64px;color:var(--ink);margin-bottom:8px}
.callout{border:2px solid var(--ink);border-radius:8px;padding:22px 26px;font-size:18px;max-width:62ch}
.cs-shot{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:8px}
.next{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
@media (max-width:820px){.cs-body{grid-template-columns:1fr;gap:28px}.cs-side{position:static;grid-template-columns:1fr 1fr}}

/* reveal on scroll */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.scroller span{animation:none}.js .reveal{opacity:1;transform:none}}
.swaps s{text-decoration:none;position:relative;display:inline-block}
.swaps s::after{content:"";position:absolute;left:-3%;right:-3%;top:52%;height:3px;background:#fff;transform:translateY(-50%)}
.swaps s{justify-self:start;width:max-content}
.swaps s{color:#8A8A8A}