/* ══ The Calls article: the website's own parts, plus the pieces this story needs.
   Every scene below is scrubbed: positions, sizes and numbers are worked out from how far through the scene the reader
   has scrolled (calls.js), so it plays forward and back with the scroll and never pops on a timer. ══ */

/* ── the masthead: a release note's head, in the site's type ─────────────────────────────────────────────────────── */
.amast{padding-top:110px}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.art-meta .dt{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.art-title{margin-top:22px;max-width:20ch;font-weight:500;font-size:clamp(40px,5.2vw,84px);line-height:.98;letter-spacing:-.045em;color:var(--slate)}
.art-title b{font-weight:500;color:var(--ink)}
.art-dek{margin-top:24px;max-width:58ch;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--slate)}
.art-by{display:flex;align-items:center;gap:10px;margin-top:26px;font-weight:500;color:var(--ink)}
.art-by img{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--card);box-shadow:var(--shadow)}
.art-by span{color:var(--mute);font-weight:400}
.art-body{margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;max-width:1100px}
.art-body p{font-size:18px;line-height:1.65;color:var(--slate)}
.art-body p b{color:var(--ink);font-weight:500}

/* three steps, each a white card with a small working piece of ARC in it */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.s3{position:relative;display:flex;flex-direction:column;border-radius:2rem;background:var(--card);box-shadow:var(--shadow);overflow:hidden;min-height:440px}
.s3 .vg{position:relative;height:230px;margin:10px 10px 0;border-radius:1.5rem;background:#0D0E11;overflow:hidden;color:#fff}
.s3 .tx{padding:22px 24px 26px}
.s3 .n{font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--mute)}
.s3 h3{margin-top:10px;font-size:23px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.s3 p{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--slate)}

/* the small working pieces: dark plates in the app's own look */
.vgp{position:absolute;font-family:var(--sans);color:#fff}
.mrow{left:16px;right:16px;bottom:18px;display:flex;align-items:center;gap:10px;padding:11px 11px 11px 13px;border-radius:14px;background:#17181B;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:12.5px}
.mrow img{width:24px;height:24px}
.mrow b{display:block;font-size:13.5px} .mrow small{color:#22C55E;font-weight:700;font-size:11.5px}
.mrow .k{margin-left:auto;height:32px;padding:0 12px;border-radius:10px;background:var(--brand);color:#160803;font-weight:700;font-size:12.5px;display:flex;align-items:center;animation:cxpress 3.2s infinite}
@keyframes cxpress{0%,62%,100%{transform:none}66%{transform:scale(.9)}74%{transform:scale(1.04)}80%{transform:none}}
.mcard{left:16px;right:16px;top:16px;padding:12px 13px;border-radius:14px;background:#121315;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:12.5px;animation:cxcard 3.2s infinite;transform-origin:85% 120%}
@keyframes cxcard{0%,64%{opacity:0;transform:translateY(40px) scale(.5)}76%{opacity:1;transform:translateY(-4px) scale(1.03)}84%,96%{opacity:1;transform:none}100%{opacity:0}}
.mcard .who{display:flex;align-items:center;gap:8px;font-weight:700} .mcard .who i{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--brand2)}
.mcard p{margin-top:7px;font-weight:600;line-height:1.3}
.face{flex:none;width:26px;height:26px}
.mbell{right:14px;width:212px;display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:14px;background:#17181B;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 12px 24px -10px #000;font-size:11.5px;line-height:1.3}
.mbell b{font-weight:700} .mbell em{display:block;font-style:normal;color:#22C55E;font-weight:700}
.mbell:nth-of-type(1){top:22px;animation:cxbell 3.6s infinite}
.mbell:nth-of-type(2){top:84px;animation:cxbell 3.6s .25s infinite}
.mbell:nth-of-type(3){top:146px;animation:cxbell 3.6s .5s infinite}
@keyframes cxbell{0%,10%{opacity:0;transform:translateX(40px) scale(.85)}24%{opacity:1;transform:translateX(-5px)}32%,86%{opacity:1;transform:none}100%{opacity:0}}
.mfeed{left:16px;top:20px;width:120px;display:grid;gap:6px}
.mfeed i{display:block;height:44px;border-radius:10px;background:#17181B;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mfeed i.me{background:linear-gradient(#1f1410,#1a1210);box-shadow:inset 0 0 0 1px rgba(250,111,67,.5);animation:cxrise 3.6s infinite}
@keyframes cxrise{0%,20%{transform:translateY(150px)}45%,100%{transform:none}}
.mpay{left:18px;right:18px;top:18px;bottom:18px;display:grid;grid-template-columns:repeat(4,1fr);align-items:end;gap:10px}
.mpay div{position:relative;border-radius:10px 10px 6px 6px;background:rgba(250,111,67,.16);box-shadow:inset 0 0 0 1px rgba(250,111,67,.35);height:var(--h);animation:cxbar 4s var(--d) infinite;transform-origin:50% 100%}
.mpay div span{position:absolute;left:50%;top:-30px;transform:translateX(-50%);padding:4px 8px;border-radius:99px;background:#fff;color:#15171C;font:700 11px/1 var(--sans);white-space:nowrap}
.mpay div small{position:absolute;left:0;right:0;bottom:-0px;padding:6px 0;text-align:center;font:500 10px/1 var(--mono);color:rgba(255,255,255,.6);letter-spacing:.04em}
@keyframes cxbar{0%,8%{transform:scaleY(.04)}30%,90%{transform:none}100%{transform:scaleY(.04)}}

/* ── scrubbed scenes: a tall track, a pinned dark room, words on the left, a stage on the right ─────────────────── */
.cx{position:relative;height:var(--len,560vh);margin-top:24px}
.cx-pin{position:sticky;top:0;height:100vh;padding:20px 0}
.cx-room{position:relative;height:100%;border-radius:3rem;background:#0D0E11;color:#fff;display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1.4fr);gap:28px;padding:40px;overflow:hidden}
.cx-room>canvas.grd{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55}
.cx-left{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;min-width:0;padding-left:clamp(0px,1.5vw,20px)}
.cx-left .tag{color:rgba(255,255,255,.6)}
.cx-left h2{margin-top:16px;font-weight:500;font-size:clamp(30px,3vw,46px);letter-spacing:-.04em;line-height:1.02;color:rgba(255,255,255,.62)}
.cx-left h2 b{font-weight:500;color:#fff}
.cx-tk{display:flex;gap:6px;margin-top:26px}
.cx-tk i{position:relative;width:34px;height:4px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.cx-tk i b{position:absolute;inset:0;background:var(--brand);transform-origin:0 50%;transform:scaleX(var(--f,0))}
.cx-scs{position:relative;min-height:230px;margin-top:22px}
.cx-sc{position:absolute;inset:0 0 auto 0;will-change:opacity,transform}
.cx-sc .k{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.cx-sc h3{margin-top:10px;font:900 clamp(24px,2.3vw,38px)/1.02 var(--sans);letter-spacing:-.03em;text-transform:uppercase}
.cx-sc p{margin-top:14px;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:rgba(255,255,255,.78);max-width:40ch}
.cx-sc p b{color:#fff;font-weight:600}
.cx-stagebox{position:relative;z-index:1;min-width:0;min-height:0}
.cx-stage{position:absolute;left:50%;top:50%;width:880px;height:660px;transform-origin:50% 50%;transform:translate(-50%,-50%) scale(var(--k,1))}
.cx-stage>*{position:absolute;will-change:transform,opacity}
.cx-stage.ph{width:460px;height:600px}
.cx-stage.ph>*{transform-origin:0 0}
.cx-stage,.mcall .p-card{color:#fff}

/* the parts the stages are built from: ARC's own, at the app's sizes */
.p-card{width:380px;padding:16px;border-radius:20px;background:#121315;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 80px -36px #000}
.p-card.mine{box-shadow:inset 0 0 0 1.5px rgba(250,111,67,.7),0 40px 80px -30px rgba(250,111,67,.35)}
.p-who{display:flex;align-items:center;gap:10px}
.p-who .face{width:38px;height:38px}
.p-who b{font-size:15px} .p-who small{display:block;font-size:12px;color:rgba(255,255,255,.55)}
.p-who .xg{width:12px;height:12px;display:inline-block;margin-left:5px;vertical-align:-1px;opacity:.8}
.chipx{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:99px;font-size:11px;font-weight:700;background:rgba(250,111,67,.14);color:var(--brand2);white-space:nowrap}
.chipx i{width:6px;height:6px;border-radius:50%;background:currentColor}
.chipx.v{background:rgba(255,255,255,.08);color:#fff}
.p-words{margin:13px 0;font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.p-pos{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:13px;background:#17181B;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);font-size:14px}
.p-pos img{width:22px;height:22px}
.p-pos .l{color:#22C55E;font-weight:700}
.p-pos .r{margin-left:auto;font-weight:700;color:#22C55E;font-variant-numeric:tabular-nums}
.p-keys{display:flex;gap:8px;margin-top:12px}
.p-keys span{flex:1;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;background:#1E2024;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.p-keys span+span{background:none;box-shadow:none;color:rgba(255,255,255,.6)}
.p-keys .n{flex:none;padding:0 4px;background:none;box-shadow:none;color:rgba(255,255,255,.55);font-weight:500;font-size:12.5px}

.p-row{width:560px;display:flex;align-items:center;gap:14px;padding:14px 14px 14px 16px;border-radius:18px;background:#121315;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:13px}
.p-row img{width:30px;height:30px}
.p-row .sym b{display:block;font-size:15px} .p-row .sym small{color:#22C55E;font-weight:700;font-size:12px}
.p-row .fg{display:grid;gap:2px;color:rgba(255,255,255,.5);font-size:12px} .p-row .fg b{color:#fff;font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums} .p-row .fg b.up{color:#22C55E}
.p-row .go{margin-left:auto;height:40px;padding:0 16px;border-radius:12px;background:var(--brand);color:#160803;font-weight:700;font-size:14px;display:flex;align-items:center;white-space:nowrap}

.p-sheet{width:420px;padding:20px;border-radius:24px;background:#0D0E11;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 50px 100px -40px #000}
.p-sheet h4{font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.p-sheet h4 span{color:var(--brand)}
.p-sheet .sub{margin-top:8px;font-size:13px;color:rgba(255,255,255,.6)}
.p-sheet .box{margin-top:14px;min-height:76px;padding:12px 13px;border-radius:13px;background:#17181B;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:15px;line-height:1.4}
.p-sheet .box .ph{color:rgba(255,255,255,.4)}
.p-sheet .box .crt{display:inline-block;width:2px;height:17px;margin-left:1px;vertical-align:-3px;background:var(--brand);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.p-sheet .cnt{margin-top:6px;text-align:right;font:500 11px var(--mono);color:rgba(255,255,255,.45)}
.p-sheet .postk{margin-top:12px;height:46px;border-radius:13px;background:var(--brand);color:#160803;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px}

.p-bell{width:330px;display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:#16171A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 20px 40px -18px #000;font-size:13.5px;line-height:1.35}
.p-bell .ring{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--brand),#ffb08f,var(--brand),#c94a24,var(--brand))}
.p-bell .ring .face{width:40px;height:40px}
.p-bell b{font-weight:700} .p-bell em{display:block;font-style:normal;color:#22C55E;font-weight:700} .p-bell small{color:rgba(255,255,255,.45);font-size:11.5px}
.p-phone{width:150px;height:300px;border-radius:30px;background:#08090A;box-shadow:inset 0 0 0 5px #1a1b1e,inset 0 0 0 6px rgba(255,255,255,.08),0 30px 50px -20px #000;overflow:hidden}
.p-phone .isl{position:absolute;left:50%;top:10px;width:48px;height:13px;border-radius:9px;background:#000;transform:translateX(-50%)}
.p-phone .nt{position:absolute;left:8px;right:8px;top:34px;padding:8px;border-radius:14px;background:rgba(40,42,48,.92);font-size:9.5px;line-height:1.3;display:flex;gap:6px;align-items:center}
.p-phone .nt .face{width:22px;height:22px}
.p-phone .nt b{font-weight:700}
.p-phone .wall{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 110%,rgba(250,111,67,.35),transparent 60%),#0B0C0E}
.p-phone .tm{position:absolute;left:0;right:0;top:120px;text-align:center;font:500 40px/1 var(--sans);letter-spacing:-.04em;color:rgba(255,255,255,.85)}
.p-count{font:500 15px/1.3 var(--sans);color:rgba(255,255,255,.7)}
.p-count b{display:block;font:500 54px/1 var(--mono);letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums}

.p-feed{width:380px;height:560px;border-radius:24px;background:#0F1012;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);overflow:hidden}
.p-feed .hd{display:flex;gap:16px;padding:16px 18px;font-size:14px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.07)}
.p-feed .hd span{color:rgba(255,255,255,.45)} .p-feed .hd span.on{color:#fff;box-shadow:0 2px 0 var(--brand)}
.fslot{position:absolute;left:12px;right:12px;height:112px;padding:12px;border-radius:16px;background:#16171A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.75)}
.fslot b{display:block;color:#fff;font-size:13.5px;margin-bottom:4px}
.fslot .tg{display:inline-block;margin-bottom:6px;padding:3px 7px;border-radius:99px;background:rgba(255,255,255,.07);font:500 10px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.fslot.me{background:#1a1310;box-shadow:inset 0 0 0 1.5px rgba(250,111,67,.65)}
.fslot.me .tg{background:rgba(250,111,67,.18);color:var(--brand2)}
.why{width:330px;padding:18px;border-radius:20px;background:#121315;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.why h5{font-size:13px;font-weight:700;color:rgba(255,255,255,.6)}
.why .r{margin-top:14px}
.why .r .t{display:flex;justify-content:space-between;font-size:13.5px} .why .r .t b{font:500 13px var(--mono);color:#fff}
.why .r .bar{margin-top:7px;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.why .r .bar i{display:block;height:100%;width:100%;border-radius:3px;background:var(--brand);transform-origin:0 50%;transform:scaleX(var(--f,0))}
.why .sc{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:baseline}
.why .sc span{font-size:13px;color:rgba(255,255,255,.6)} .why .sc b{font:500 26px/1 var(--mono);color:var(--brand)}
.p-chart{width:700px;height:460px;border-radius:22px;background:#0F1012;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);overflow:hidden}
.p-chart canvas{position:absolute;inset:0;width:100%;height:100%}
.p-chart .hd{position:absolute;left:16px;top:14px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.p-chart .hd img{width:20px;height:20px} .p-chart .hd small{font-weight:500;color:rgba(255,255,255,.5)}
.p-chart .lens{position:absolute;right:14px;top:12px;display:flex;gap:4px;padding:3px;border-radius:10px;background:#17181B;font-size:12px;font-weight:600}
.p-chart .lens span{padding:5px 9px;border-radius:7px;color:rgba(255,255,255,.5)} .p-chart .lens span.on{background:#2A2C31;color:#fff}
.p-share{width:520px;border-radius:22px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 80px -30px #000;overflow:hidden}
.p-share .x{display:flex;align-items:center;gap:10px;padding:14px 16px 0;font-size:14px}
.p-share .x .face{width:36px;height:36px}
.p-share .x small{color:rgba(255,255,255,.5)}
.p-share .x p{padding:0}
.p-share .tw{padding:8px 16px 12px;font-size:15px;line-height:1.4}
.p-share .tw a{color:#1D9BF0}
.p-share .og{margin:0 16px 16px;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);background:#0B0806}
.p-share .og .pic{position:relative;height:200px;background:url(calls/court.jpg) 50% 60%/cover}
.p-share .og .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,5,4,.92) 0,rgba(6,5,4,.5) 55%,rgba(6,5,4,0))}
.p-share .og .in{position:absolute;left:18px;top:18px;z-index:1}
.p-share .og .in small{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.p-share .og .in b{display:block;margin-top:6px;font:900 30px/1 var(--sans);text-transform:uppercase;letter-spacing:-.02em}
.p-share .og .in b span{color:var(--brand)}
.p-share .og .in p{margin-top:8px;font-size:13px;color:rgba(255,255,255,.75)}
.p-share .og .ft{padding:9px 14px;font-size:12.5px;color:rgba(255,255,255,.55)}
.p-share .og .ft b{color:#fff;font-weight:600}

/* the pay scene */
.meter{width:150px;height:540px;border-radius:24px;background:#121315;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.meter .tr{position:absolute;left:58px;top:24px;bottom:24px;width:34px;border-radius:17px;background:rgba(255,255,255,.06);overflow:hidden}
.meter .tr i{position:absolute;left:0;right:0;bottom:0;height:100%;border-radius:17px;background:linear-gradient(0deg,#c94a24,var(--brand) 60%,#ffb08f);transform-origin:50% 100%;transform:scaleY(var(--f,0))}
.rung{position:absolute;left:-210px;width:330px;display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.45);transition:color .25s}
.rung::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.rung b{font:500 13px var(--mono);color:inherit;min-width:52px;text-align:right}
.rung .nm{min-width:110px}
.rung.on{color:#fff}.rung.on b{color:var(--brand)}.rung.on::after{background:rgba(250,111,67,.5)}
.rate{width:360px}
.rate small{display:block;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.rate .big{display:flex;align-items:baseline;gap:14px;margin-top:8px}
.rate .big b{font:900 118px/.82 "Doto",var(--mono);color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rate .big span{font:900 28px/1 var(--sans);text-transform:uppercase}
.rate .vol{margin-top:22px;font-size:15px;color:rgba(255,255,255,.7)} .rate .vol b{font:500 30px/1 var(--mono);color:#fff;display:block;margin-top:6px;letter-spacing:-.03em}
.rate .per{margin-top:22px;padding:14px 16px;border-radius:16px;background:rgba(250,111,67,.08);box-shadow:inset 0 0 0 1px rgba(250,111,67,.3);font-size:14.5px;line-height:1.4}
.rate .per b{font:500 22px var(--mono);color:var(--brand)}
.weeks{width:560px;height:300px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end}
.wkc{position:relative;height:100%;border-radius:18px;background:#121315;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.wkc .bar{position:absolute;left:14px;right:14px;bottom:44px;border-radius:12px 12px 6px 6px;background:linear-gradient(0deg,rgba(250,111,67,.25),rgba(250,111,67,.55));box-shadow:inset 0 0 0 1px rgba(250,111,67,.5);transform-origin:50% 100%;height:var(--h)}
.wkc .lab{position:absolute;left:0;right:0;bottom:14px;text-align:center;font:500 11px var(--mono);letter-spacing:.06em;color:rgba(255,255,255,.55);text-transform:uppercase}
.wkc .usd{position:absolute;left:50%;bottom:calc(var(--h) + 52px);transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;border-radius:99px;background:#fff;color:#15171C;font:700 13px/1 var(--sans);white-space:nowrap}
.wkc .usd i{width:18px;height:18px;border-radius:50%;background:#2775CA;display:grid;place-items:center;color:#fff;font:900 10px/1 var(--sans);font-style:normal}
.wkc .x2{position:absolute;left:50%;top:12px;transform:translateX(-50%);padding:4px 8px;border-radius:99px;background:var(--brand);color:#160803;font:700 11px/1 var(--sans);white-space:nowrap}
.bounty{width:520px;padding:20px;border-radius:22px;background:#121315;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.bounty .t{display:flex;align-items:center;gap:12px;font-size:15px}
.bounty .t .face{width:40px;height:40px}
.bounty .t small{display:block;color:rgba(255,255,255,.55);font-size:12.5px}
.bounty .t .plus{margin-left:auto;font:500 30px var(--mono);color:#22C55E}
.bounty .pg{margin-top:16px;height:10px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.bounty .pg i{display:block;height:100%;width:100%;background:#22C55E;transform-origin:0 50%;transform:scaleX(var(--f,0))}
.bounty .ft{display:flex;justify-content:space-between;margin-top:8px;font:500 12px var(--mono);color:rgba(255,255,255,.55)}

/* the loop */
.ring{width:600px;height:600px}
.ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.node{position:absolute;width:180px;margin-left:-90px;margin-top:-26px;text-align:center;font-size:13px;line-height:1.3;color:rgba(255,255,255,.45);transition:color .25s}
.node b{display:block;font:500 11px var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.35);margin-bottom:4px;transition:color .25s}
.node.on{color:#fff} .node.on b{color:var(--brand)}
.core{position:absolute;left:50%;top:50%;width:300px;transform:translate(-50%,-50%);text-align:center}
.core small{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.core .wkn{font:900 34px/1 "Doto",var(--mono);color:#fff;margin-top:6px}
.core .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 10px;margin-top:18px}
.core .grid div{font-size:12px;color:rgba(255,255,255,.55)}
.core .grid b{display:block;font:500 24px/1.1 var(--mono);color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.core .grid .o b{color:var(--brand)}

/* ── build your platform: the site's white cards, each with a real screen ─────────────────────────────────────── */
.build{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px}
.bc{position:relative;border-radius:2rem;background:var(--card);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .6s var(--ease-jelly,cubic-bezier(.34,1.7,.64,1))}
.bc:hover{transform:translateY(-4px)}
.bc .tx{padding:28px 30px 8px}
.bc .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bc h3{margin-top:12px;font-size:clamp(24px,2vw,30px);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.bc h3 b{font-weight:500;color:var(--brand)}
.bc p{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--slate);max-width:46ch}
.bc .shot{position:relative;margin:22px 0 0 30px;border-radius:1.2rem 0 0 0;overflow:hidden;height:300px;background:#0D0E11;box-shadow:inset 0 0 0 1px var(--line)}
.bc .shot img{width:100%;height:100%;object-fit:cover;object-position:0 0}
.bc .big{font:500 clamp(54px,5vw,84px)/1 var(--mono);letter-spacing:-.05em;color:var(--brand);margin:20px 30px 0}
.bc .big+small{display:block;margin:6px 30px 0;font-size:14px;color:var(--slate)}
.bc .list{margin:20px 30px 30px;display:grid;gap:10px}
.bc .list div{display:flex;gap:10px;font-size:15px;line-height:1.45;color:var(--slate)}
.bc .list svg{flex:none;width:18px;height:18px;color:var(--brand);margin-top:2px}
.bc .list b{color:var(--ink);font-weight:500}
.bc.dark{background:#0D0E11;color:#fff}.bc.dark p,.bc.dark .list div,.bc.dark .big+small{color:rgba(255,255,255,.7)}.bc.dark .list b{color:#fff}
.bc .ctas{margin:auto 30px 30px;display:flex;gap:10px;flex-wrap:wrap}

/* ── fair by design: one band ──────────────────────────────────────────────────────────────────────────────────── */
.fair{margin-top:120px;border-radius:3rem;background:var(--card);box-shadow:var(--shadow);padding:56px clamp(28px,5vw,72px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.fair .checks{display:grid;gap:16px}
.fair .checks div{display:flex;gap:12px;font-size:16px;line-height:1.5;color:var(--slate)}
.fair .checks svg{flex:none;width:20px;height:20px;color:var(--up);margin-top:2px}
.fair .checks b{color:var(--ink);font-weight:500}

/* the hero's beats, with this page's words */
.beat .mcall{margin-top:18px}
.beat .p-card{width:100%;max-width:400px}

/* ── phones: words on top, the stage under them, scaled to fit ─────────────────────────────────────────────────── */
@media (max-width:899px){
  .amast{padding-top:70px}
  .art-body{grid-template-columns:1fr;gap:14px}
  .steps3{grid-template-columns:1fr}
  .cx-room{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:24px 18px;border-radius:2rem;gap:10px}
  .cx-left{justify-content:flex-start}
  .cx-left h2{font-size:26px;margin-top:10px}
  .cx-tk{margin-top:14px}
  .cx-scs{min-height:132px;margin-top:10px}
  .cx-left .tag{font-size:10px}
  .cx-sc h3{font-size:21px}
  .cx-sc p{font-size:14px;margin-top:8px}
  .build{grid-template-columns:1fr}
  .fair{grid-template-columns:1fr;padding:36px 24px;border-radius:2rem}
}
@media (prefers-reduced-motion:reduce){.cx{height:auto}.cx-pin{position:relative;height:100vh;min-height:680px}}

/* ══ v4: the magazine feature, on the website's light page ════════════════════════════════════════════════════════ */
.ed{max-width:760px;margin:0 auto}
.edsec{padding-top:110px}
.edp p,.edlead p{margin-top:20px;font-size:19px;line-height:1.72;color:var(--slate)}
.edp p b,.edlead p b,.edone b{color:var(--ink);font-weight:500}
.edlead{margin-top:48px}
.edlead .lead::first-letter{float:left;margin:10px 14px 0 0;font:500 92px/.78 var(--sans);letter-spacing:-.04em;color:var(--brand)}
.edone{font-size:19px;line-height:1.72;color:var(--slate)}
.figcap{max-width:1100px;margin:16px auto 0;display:flex;gap:12px;align-items:baseline;font-size:14px;line-height:1.5;color:var(--mute)}
.figcap b{flex:none;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.steps3{margin-top:44px}
/* the glossary and the ranking: boxes set into the column, like a magazine's side notes */
.gloss,.side,.tiertab{margin-top:30px;border-radius:1.6rem;background:var(--card);box-shadow:var(--shadow);padding:24px 26px}
.gloss h4,.side h4{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.gloss>div{display:flex;gap:18px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.gloss>div:first-of-type{border-top:0;padding-top:0}
.gloss img{flex:none;width:84px;height:84px;object-fit:contain;transition:transform .6s cubic-bezier(.34,1.7,.64,1)}
.gloss>div:hover img{transform:rotate(-6deg) scale(1.08)}
.gloss b{font-size:17px;font-weight:500;color:var(--ink)} .gloss p{margin-top:4px;font-size:15.5px;line-height:1.55;color:var(--slate)}
.side>div{display:flex;gap:14px;margin-top:16px}
.side i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(250,111,67,.12);color:var(--brand);font:500 12px var(--mono);font-style:normal}
.side p{font-size:15.5px;line-height:1.55;color:var(--slate)} .side p b{color:var(--ink);font-weight:500}
.tiertab table{width:100%;border-collapse:collapse;font-size:15px}
.tiertab th{padding:0 10px 12px 0;text-align:left;font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);vertical-align:bottom}
.tiertab td{padding:13px 10px 13px 0;border-top:1px solid var(--line);color:var(--slate)}
.tiertab td:first-child b{font:500 22px/1 var(--mono);color:var(--brand)}
.tiertab td:last-child{font:500 17px var(--mono);color:var(--ink)}
.tiertab p{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--slate)}
/* fig. 1: the trenches today, an example call group beside the pull quote */
.tgfig{margin:70px auto 0;max-width:1100px;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:56px;align-items:center}
.tgwrap{position:relative;border-radius:2rem;background:#0D0E11;padding:14px;overflow:hidden}
.tgwrap .cx-ground{position:absolute;inset:0;opacity:.9}
.tg{position:relative;border-radius:1.4rem;background:rgba(20,21,24,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#fff;overflow:hidden}
.tghd{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.tghd .gi{width:38px;height:38px;border-radius:50%;background:#2a1a12;display:grid;place-items:center;font-size:18px}
.tghd b{display:block;font-size:15px} .tghd span{font-size:12.5px;color:rgba(255,255,255,.5)}
.tgx{margin-left:auto;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.07);font:500 10.5px var(--mono)!important;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)!important}
.tgms{display:flex;flex-direction:column;gap:9px;padding:14px 14px 18px;min-height:520px}
.tg .m{display:flex;gap:9px;align-items:flex-end;opacity:0;transform:translateY(14px) scale(.96);transform-origin:0 100%;transition:opacity .35s,transform .7s cubic-bezier(.34,1.7,.64,1)}
.tg .m.on{opacity:1;transform:none}
.tg .m .fc{flex:none;width:28px;height:28px}
.tg .m .bb{position:relative;max-width:84%;padding:8px 12px 9px;border-radius:15px 15px 15px 5px;background:#1f2126;font-size:14px;line-height:1.38}
.tg .m.s .bb{background:none;padding:0}
.tg .m.s .n{display:none}
.tg .m .n{display:block;font-size:12px;font-weight:700;margin-bottom:2px}
.tg .m .t{font-size:10.5px;color:rgba(255,255,255,.4);margin-left:8px}
.tg .m.s .t{display:none}
.tg .stk{display:block;width:96px;height:96px;object-fit:contain}
.tg .del{display:none;align-items:center;gap:7px;color:rgba(255,255,255,.45);font-style:italic;padding:8px 12px;font-size:13.5px}
.tg .del svg{width:14px;height:14px}
.tg .m.dead .bb{background:#1f2126;padding:0;animation:tgflip .55s cubic-bezier(.16,1,.3,1)}
.tg .m.dead .lv{display:none}.tg .m.dead .del{display:flex}
@keyframes tgflip{0%{transform:rotateX(0)}45%,55%{transform:rotateX(88deg)}100%{transform:rotateX(0)}}
.tgside .tgq{margin-top:18px;font-weight:500;font-size:clamp(30px,3.2vw,46px);letter-spacing:-.04em;line-height:1.04;color:var(--slate)}
.tgside .tgq b{font-weight:500;color:var(--ink)}
.tgside .tgsub{margin-top:18px;max-width:40ch;font-size:17px;line-height:1.6;color:var(--slate)}
.tgstat{display:flex;gap:34px;margin-top:28px}
.tgstat b{display:block;font:500 54px/1 var(--mono);letter-spacing:-.05em;color:var(--ink)} .tgstat div:first-child b{color:var(--neg)}
.tgstat span{display:block;margin-top:6px;font-size:13.5px;color:var(--mute)}
/* the moving dot ground in every dark room (the website's own ground.js) */
.cx-room>.cx-ground{position:absolute;inset:0;z-index:0;pointer-events:none}
.cx-room>.cx-ground canvas{position:absolute;inset:0;width:100%;height:100%}
.cx-stage>canvas.fx{left:0;top:0;width:100%;height:100%;z-index:20;pointer-events:none}
@media (max-width:899px){.tgfig{grid-template-columns:1fr;gap:28px}.tgms{min-height:470px}.edlead .lead::first-letter{font-size:70px}.edp p,.edlead p,.edone{font-size:17.5px}.gloss img{width:68px;height:68px}.tiertab{padding:18px;overflow-x:auto}.tiertab table{font-size:13.5px}}
/* the close: the court's orange ball sits under the words; darken the top of the picture so they read */
#start.closeroom .veil{background:linear-gradient(180deg,rgba(6,5,4,.82) 0,rgba(6,5,4,.55) 34%,rgba(6,5,4,0) 62%)}

/* ══ A caller's week (/news/calls/assets/week.js), rebuilt for clarity: one call at a time, a scoreboard that says what changed ══ */
.cwk{position:relative;height:var(--len,1000vh);margin-top:24px}
.kw-pin{position:sticky;top:0;height:100vh;padding:20px 0}
.kw-room{position:relative;height:100%;border-radius:3rem;background:#0D0E11;color:#fff;display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:24px;padding:36px;overflow:hidden}
.kw-room>.cx-ground{position:absolute;inset:0;z-index:0;pointer-events:none}
.kw-left{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;min-width:0}
.kw-left .tag{color:rgba(255,255,255,.6)}
.kw-tk{display:flex;gap:5px;margin-top:20px}
.kw-tk i{position:relative;width:24px;height:4px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.kw-tk i b{position:absolute;inset:0;background:var(--brand);transform-origin:0 50%;transform:scaleX(var(--f,0))}
.kw-scs{position:relative;min-height:290px;margin-top:22px}
.kw-sc{position:absolute;inset:0 0 auto 0;will-change:opacity,transform}
.kw-sc .k{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.kw-sc h3{margin-top:10px;font:900 clamp(24px,2.2vw,38px)/1.02 var(--sans);letter-spacing:-.03em;text-transform:uppercase}
.kw-sc p{margin-top:14px;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:rgba(255,255,255,.78);max-width:38ch}
.kw-box{position:relative;z-index:1;min-width:0;min-height:0}
.kw-scale{position:absolute;left:50%;top:50%;width:1000px;height:660px;transform:translate(-50%,-50%) scale(var(--wk,1))}
.kw-app{position:relative;width:100%;height:100%;border-radius:1.6rem;background:#121315;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 90px -40px #000;overflow:hidden;display:grid;grid-template-rows:58px 112px minmax(0,1fr) 74px}
.kw-top{display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.06);font-size:15px}
.kw-top .face{width:32px;height:32px}
.kw-when{margin-left:auto;font:500 15px var(--mono);letter-spacing:.02em;color:#fff}
.kw-when small{color:rgba(255,255,255,.45);font-size:12px;margin-left:6px}
/* the scoreboard: four numbers, each with what just changed */
.kw-score{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(255,255,255,.06)}
.kw-t{position:relative;padding:14px 18px;border-left:1px solid rgba(255,255,255,.06);transition:background .4s}
.kw-t:first-child{border-left:0}
.kw-t small{display:block;font:500 10.5px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.kw-t b{display:block;margin-top:8px;font:500 32px/1 var(--mono);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.kw-t span{display:block;margin-top:7px;font-size:12.5px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kw-t .dl{position:absolute;right:14px;top:12px;padding:4px 9px;border-radius:99px;font:700 12px/1 var(--sans);opacity:0;transform:translateY(6px) scale(.7)}
.kw-t .dl.on{animation:kwdl .7s cubic-bezier(.34,1.7,.64,1) forwards}
.kw-t .dl.up{background:rgba(34,197,94,.16);color:#4ade80}.kw-t .dl.dn{background:rgba(229,72,77,.16);color:#ff7b80}.kw-t .dl.or{background:var(--brand);color:#160803}
@keyframes kwdl{to{opacity:1;transform:none}}
.kw-t.hot{background:rgba(250,111,67,.08);box-shadow:inset 0 -2px 0 var(--brand)}
.kw-t.acc b{color:var(--brand)}
.kw-chart{position:relative;min-height:0}
.kw-chart canvas{position:absolute;inset:0;width:100%;height:100%}
.kw-mk{position:absolute;left:18px;top:14px;display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;z-index:2}
.kw-mk img{width:24px;height:24px}
.kw-mk small{font-weight:500;color:rgba(255,255,255,.5);font-size:12.5px}
.kw-mk em{font-style:normal;margin-left:6px;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.07);font:500 11px var(--mono);color:rgba(255,255,255,.7)}
.kw-stamp{position:absolute;z-index:3;padding:10px 18px 11px;border-radius:12px;background:var(--brand);color:#160803;font:900 24px/1 var(--sans);letter-spacing:.01em;box-shadow:0 18px 40px -16px rgba(250,111,67,.8);opacity:0;pointer-events:none;transform-origin:50% 50%}
/* the week along the bottom: a chip for every call, lit as it closes */
.kw-strip{position:relative;display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid rgba(255,255,255,.06)}
.kw-strip>span{padding:9px 0 0 12px;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4);border-left:1px solid rgba(255,255,255,.05)}
.kw-strip .ph{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--brand);box-shadow:0 0 12px rgba(250,111,67,.6)}
.kw-chip{position:absolute;bottom:8px;width:calc(100% / 7 - 12px);display:flex;align-items:center;gap:7px;height:40px;padding:0 8px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:12px;font-weight:700;color:rgba(255,255,255,.35);white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s,transform .6s cubic-bezier(.34,1.7,.64,1)}
.kw-chip img{width:18px;height:18px;opacity:.4}
.kw-chip.live{color:#fff;box-shadow:inset 0 0 0 1.5px var(--brand);transform:translateY(-3px)}.kw-chip.live img{opacity:1}
.kw-chip.w{background:rgba(34,197,94,.14);box-shadow:inset 0 0 0 1px rgba(34,197,94,.5);color:#4ade80}.kw-chip.l{background:rgba(229,72,77,.14);box-shadow:inset 0 0 0 1px rgba(229,72,77,.5);color:#ff7b80}
.kw-chip.w img,.kw-chip.l img{opacity:1}
.kw-receipt{position:absolute;left:50%;top:84px;z-index:8;width:500px;padding:20px 20px 14px;border-radius:20px;background:rgba(14,15,19,.97);box-shadow:inset 0 0 0 1px rgba(250,111,67,.45),0 40px 90px -30px #000,0 0 50px -20px rgba(250,111,67,.4);opacity:0;visibility:hidden}
.kw-receipt .rh{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.65);margin-bottom:6px}
.kw-receipt .rh .chipx{margin:0}
.kw-receipt .ln{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.kw-receipt .ln .d{width:30px;font:500 11px var(--mono);color:rgba(255,255,255,.45);text-transform:uppercase}
.kw-receipt .ln img{width:22px;height:22px}
.kw-receipt .ln .w{flex:1;min-width:0}.kw-receipt .ln .w b{display:block;font-size:14.5px;font-weight:600}.kw-receipt .ln .w small{display:block;font-size:12px;color:rgba(255,255,255,.5)}
.kw-receipt .ln .v{font:500 17px var(--mono);color:#22C55E}
.kw-receipt .tot{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;font-size:14px;color:#fff;font-weight:600}
.kw-receipt .tot b{font:500 38px/1 var(--mono);color:var(--brand)}
.kw-receipt .rf{margin-top:8px;font:500 11px var(--mono);color:rgba(255,255,255,.4)}
.kw-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:9}
.cwk.ph .kw-room{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:22px 14px;border-radius:2rem;gap:8px}
.cwk.ph .kw-scs{min-height:150px;margin-top:10px}.cwk.ph .kw-sc h3{font-size:20px}.cwk.ph .kw-sc p{font-size:13.5px;margin-top:8px}
.cwk.ph .kw-scale{width:460px;height:780px}
.cwk.ph .kw-app{grid-template-rows:52px 196px minmax(0,1fr) 70px}
.cwk.ph .kw-score{grid-template-columns:1fr 1fr}.cwk.ph .kw-t{border-top:1px solid rgba(255,255,255,.06);padding:11px 14px}.cwk.ph .kw-t b{font-size:26px;margin-top:6px}
.cwk.ph .kw-t:nth-child(3){border-left:0}

.cwk.ph .kw-receipt{width:440px;top:60px}
@media (prefers-reduced-motion:reduce){.cwk{height:auto}.kw-pin{position:relative;height:100vh;min-height:720px}}
.kw-chip span{display:flex;flex-direction:column;min-width:0;line-height:1.15}.kw-chip em{font-style:normal;font-size:11px;font-weight:600;color:inherit;opacity:.8;text-transform:capitalize;white-space:nowrap}.kw-chip b.r{font:700 12.5px/1.2 var(--sans);white-space:nowrap}
.kw-strip>span{padding-top:7px}
.cwk.ph .kw-chip{width:calc(100% / 7 - 6px);padding:0 3px;gap:0;justify-content:center}.cwk.ph .kw-chip span{display:none}.cwk.ph .kw-chip img{width:22px;height:22px}

/* v4 review fixes */
.say-cap{color:rgba(255,255,255,.86)!important;font-size:13px!important}
#story #apReal{display:none}
.cx-stage.ph .node{font-size:19px}.cx-stage.ph .node b{font-size:14px}
.p-phone .nt{font-size:12.5px;padding:10px;top:30px}.p-phone .nt .face{width:26px;height:26px}.p-phone .tm{font-size:28px;top:150px;color:rgba(255,255,255,.5)}
.s-stk{display:flex;gap:10px;align-items:flex-end}
.s-stk img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.s-stk small{display:block;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:6px}
.kw-stamp img{position:absolute;left:-74px;top:-26px;width:72px;height:72px;object-fit:contain;transform:rotate(8deg)}
.rate .lbl{font-size:15px;color:rgba(255,255,255,.75);line-height:1.4;max-width:30ch}
.rate .big b{font-size:132px!important}
.rate .rt{margin-top:14px;display:inline-block;padding:5px 11px;border-radius:99px;background:rgba(250,111,67,.14);color:var(--brand2);font:700 13px/1 var(--sans)}
#start.closeroom .poster{transform:translateY(22%)}
@media (max-width:899px){#start.closeroom .poster{transform:translateY(30%)}}

/* ── socials, his 20 Oct ask: X and Discord in the header and the footer, so ARC is always findable ── */
.soc{flex:none;width:34px;height:34px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s,color .2s}
.soc svg{width:15px;height:15px}
.soc:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.fnav .soc:last-of-type{margin-right:4px}
#mnav .socs{display:flex;gap:10px;margin-top:16px}
#mnav .socs a{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;height:46px;border-radius:99px;border:1px solid var(--line);font-weight:500;color:var(--ink)}
#mnav .socs svg{width:15px;height:15px}
.foot{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}
@media (max-width:1080px){.foot{grid-template-columns:1fr 1fr}}
/* coming soon: the one action is follow on X, with the bell */
.hcopy .cnote{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:9px 15px 9px 12px;border-radius:16px;background:rgba(20,14,10,.5);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:13.5px;line-height:1.4;max-width:44ch}
.hcopy .cnote svg{flex:none;width:16px;height:16px;color:var(--brand)}