/* f88a: home hero A/B. A = the conversation (paper), B = the wall of votes (navy). Variant chosen by the first script in .hv (html[data-hv]); without JS A shows. */
.dx-hero.hv{max-width:none;padding:18px 0 8px;position:relative}
html[data-hv="b"] .hv-a,html:not([data-hv="b"]) .hv-b{display:none}
.hv h1{font-family:LAGOS,Helvetica,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.02}.hv h1 i{font-family:Lectura,Georgia,serif;font-weight:400;font-style:italic;color:var(--red)}
.hv blockquote{margin:0;padding:0;border:0;background:none}
.hv mark{background:linear-gradient(transparent 55%,var(--pad) 55%);color:inherit;font-weight:600}
.hv .lt{width:36px;height:36px;border-radius:9px}
.hv-tool{text-decoration:none;color:inherit}
@keyframes hvup{to{transform:translateY(-50%)}}@keyframes hvlt{to{transform:translateX(-50%)}}
/* ---------- A ---------- */
.hva-in{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:48px;align-items:center;min-height:660px}
.hva-copy h1{font-size:clamp(34px,4.2vw,58px)}
.hva-copy .dek{font-size:19px;color:#2B3D5C;margin:20px 0 22px;max-width:500px}
.hva-copy .dx-k{margin-top:0}
.hva-stage{position:relative;height:640px;overflow:hidden}
.hva-cols{position:absolute;inset:0 0 120px 0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent 0,transparent 92px,#000 168px,#000 74%,transparent 98%);mask-image:linear-gradient(transparent 0,transparent 92px,#000 168px,#000 74%,transparent 98%)}
.hva-cols .col{position:absolute;display:flex;flex-direction:column;gap:16px;animation:hvup 52s linear infinite}
.hva-cols .fr{left:8%;top:100px;width:78%}.hva-cols .fr .hvq:nth-child(even){margin-left:9%}.hva-cols .fr .hvq:nth-child(odd){margin-right:9%}
.hva-cols .far{left:-6%;top:60px;width:58%;opacity:.42;filter:blur(2.4px);transform:scale(.8);animation-duration:74s}
.hva-cols .far2{left:58%;top:60px;width:50%;opacity:.38;filter:blur(3px);transform:scale(.74);animation-duration:88s;animation-direction:reverse}
/* the question sits on its own paper band: nothing scrolls visibly under it, so no card is ever cut behind it (f88a fix) */
.hva-top{position:absolute;left:0;right:0;top:0;height:112px;z-index:3;background:linear-gradient(var(--p) 66%,rgba(251,248,239,0));pointer-events:none}
.hva-top .ask{position:absolute;right:2%;top:14px;background:var(--navy);color:var(--p);font-weight:500;font-size:17px;border-radius:16px 16px 4px 16px;padding:11px 18px;box-shadow:0 12px 26px -14px rgba(20,40,74,.7)}
.hvq{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 14px 30px -22px rgba(20,40,74,.45)}
.hvq.s-negative{border-left:3px solid var(--red)}.hvq.s-positive{border-left:3px solid var(--like)}.hvq.s-mixed,.hvq.s-neutral{border-left:3px solid var(--mix)}
.hvq blockquote{font-family:Lectura,Georgia,serif;font-size:18px;line-height:1.38}
.hv-ft{margin-top:9px;font-size:12.5px;color:var(--mut);display:flex;gap:4px 8px;align-items:center;flex-wrap:wrap}
.hv-ft i{width:3px;height:3px;border-radius:9px;background:var(--mut)}
.hv-tn{font-family:LAGOS,Helvetica,sans-serif;font-weight:700;color:var(--navy)}
.hv-src,.hv-sh{color:var(--red);text-decoration:none;font-weight:600}.hv-sh{border:1px solid var(--line);border-radius:99px;padding:0 9px;color:var(--navy)}.hv-sh:hover{border-color:var(--navy);background:var(--padl)}
.dx-best.hva-lead{position:absolute;left:4%;bottom:2%;z-index:3;width:80%;background:var(--navy);color:var(--p);border-radius:16px;padding:18px 22px;margin:0;box-shadow:0 26px 50px -20px rgba(20,40,74,.8);display:block}
.hva-lead .lab,.hvb-win .lab{color:#9FB0CC}
.hva-lead .hv-row,.hvb-win .hv-row{display:flex;align-items:center;gap:14px;margin-top:8px}.hva-lead b{font-family:LAGOS,Helvetica,sans-serif;font-size:30px}.hva-lead .n,.hvb-win .n{font-family:LAGOS,Helvetica,sans-serif;font-size:32px;color:var(--pad);margin-left:auto}
.hva-lead .d,.hvb-win .d{display:block;margin-top:2px;font-family:Mono,monospace;font-size:12px;color:#9FB0CC}
.hv-belt{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin-top:8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hv-belt .tr{display:flex;gap:44px;width:max-content;animation:hvlt 40s linear infinite}.hv-belt .bi{white-space:nowrap}
.hv-belt .tb{font-size:18px}
/* ---------- B ---------- */
.hvb-stage{position:relative;height:780px;overflow:hidden;border-radius:18px;background:radial-gradient(ellipse 70% 60% at 50% 46%,#1D3A6B 0,#0C1830 70%);color:var(--p)}
.hvb-wall{position:absolute;inset:0;display:flex;justify-content:space-between;padding:0 3%;transform:perspective(1400px) rotateX(12deg) scale(1.08);transform-origin:50% 40%}
.hvb-wall .wc{width:22%;display:flex;flex-direction:column;gap:30px;animation:hvup 60s linear infinite}
.hvb-wall .c2{width:25%;margin-top:-40px;animation-duration:44s}.hvb-wall .c1,.hvb-wall .c3{animation-duration:62s;opacity:.8;filter:blur(1px);margin-top:-190px}
.hvb-wall .c0,.hvb-wall .c4{width:19%;animation-duration:90s;opacity:.42;filter:blur(3px);animation-direction:reverse;margin-top:-30px}
.hvp{position:relative;background:var(--pad);border-radius:6px;padding:16px 18px 14px 40px;background-image:repeating-linear-gradient(transparent 0 25px,rgba(20,40,74,.13) 25px 26px);box-shadow:0 22px 40px -22px rgba(0,0,0,.6);color:var(--navy);transform:rotate(-1.4deg)}
.hvp:nth-child(2n){transform:rotate(1.8deg)}.hvp:nth-child(3n){transform:rotate(-.6deg);background-color:var(--padl)}
.hvp:before{content:"";position:absolute;left:28px;top:0;bottom:0;width:2px;background:var(--red)}
.hvp .lt{position:absolute;left:-14px;top:-14px;box-shadow:0 8px 18px -6px rgba(0,0,0,.5);width:32px;height:32px}
.hvp blockquote{font-family:Lectura,Georgia,serif;font-style:italic;font-size:17px;line-height:26px}.hvp mark{background:rgba(199,58,46,.18)}
.hvp .hv-ft{font-family:Mono,monospace;font-size:11px;letter-spacing:.03em;color:#4B4A3A}.hvp .hv-tn{font-family:Mono,monospace;color:#4B4A3A}.hvp .hv-src,.hvp .hv-sh{display:none}
.hvb-wall .c0 .hvp,.hvb-wall .c4 .hvp{background-color:#9FB0CC}
.hvb-vig{position:absolute;inset:0;background:radial-gradient(ellipse 50% 46% at 50% 50%,rgba(12,24,48,.985) 0,rgba(12,24,48,.95) 62%,transparent 100%);pointer-events:none}
.hvb-core{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);text-align:center;width:min(760px,88%);z-index:2}
.hvb-core .lab{color:#9FB0CC}.hvb-core h1{font-size:clamp(34px,4vw,56px);margin-top:14px;color:var(--p)}.hvb-core h1 i{color:#F08A7F}
.hvb-core .dek{font-size:19px;color:#C6D2E6;margin:18px auto 24px;max-width:540px}
.hvb-core .chips{display:flex;justify-content:center;gap:12px}.hvb-core .chips .lt{width:46px;height:46px;border-radius:12px}
.dx-best.hvb-win{display:inline-block;margin-top:26px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;padding:12px 20px;color:var(--p);text-align:left;min-width:min(430px,100%)}
.hvb-win .hv-row b{font-family:LAGOS,Helvetica,sans-serif;font-size:24px;color:var(--p)}.hvb-win .lt{width:34px;height:34px}.hvb-win .d{color:#C6D2E6}
.hvb-core .dx-k{justify-content:center;color:#C6D2E6;margin-top:18px}.hvb-core .dx-k b{color:var(--p)}.hvb-core .dx-k a{color:var(--pad);border-color:var(--pad)}
.hvb-tick{position:absolute;left:0;right:0;bottom:0;background:#08122A;border-top:1px solid rgba(255,255,255,.12);color:#C6D2E6;font-family:Mono,monospace;font-size:12.5px;overflow:hidden;padding:13px 0;z-index:3}
.hvb-tick .tr{display:flex;gap:46px;width:max-content;animation:hvlt 52s linear infinite;white-space:nowrap}.hvb-tick b{color:var(--p)}.hvb-tick .p{color:#7FD1B9}.hvb-tick .n{color:#F08A7F}
/* ---------- shared tools ---------- */
.hv-tools{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:10px;font-size:13px}
.hv-pause,.hv-site{font:inherit;font-weight:600;color:var(--navy);background:none;border:1px solid var(--line);border-radius:99px;padding:3px 12px;cursor:pointer;text-decoration:none}
.hv-pause:hover,.hv-site:hover{border-color:var(--navy);background:var(--padl)}
.hv[data-paused] *{animation-play-state:paused!important}
.hva-stage:hover .col,.hva-stage:focus-within .col,.hvb-stage:hover .wc,.hvb-stage:focus-within .wc{animation-play-state:paused}
.hv a:focus-visible,.hv button:focus-visible{outline:3px solid var(--red);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hv *{animation:none!important}.hv-pause{display:none}.hva-cols .far,.hva-cols .far2{display:none}.live{animation:none}}
/* ---------- phone ---------- */
@media(max-width:700px){
.dx-hero.hv{padding:10px 0 6px}
.hva-in{grid-template-columns:minmax(0,1fr);gap:8px;min-height:0}.hva-copy .kick{display:none}.hva-copy h1{font-size:31px}.hva-copy .dek{display:none}
.hva-copy .dx-k{margin-top:10px;font-size:12px;gap:2px 14px}.hva-copy .dx-k b{font-size:18px}.hva-copy .dx-k a{display:none}
.hva-stage{height:470px;margin:0 -18px}
.hva-cols .far,.hva-cols .far2{display:none}.hva-cols .fr{left:5%;width:90%;top:78px}.hva-cols .fr .hvq:nth-child(n){margin:0}
.hva-cols{bottom:178px;-webkit-mask-image:linear-gradient(transparent 0,transparent 66px,#000 120px,#000 78%,transparent 100%);mask-image:linear-gradient(transparent 0,transparent 66px,#000 120px,#000 78%,transparent 100%)}.hva-copy .dx-k span:nth-child(3){display:none}
.hva-top{height:80px}.hva-top .ask{font-size:14px;right:5%;top:12px;padding:9px 15px}
.hvq{padding:13px 14px;gap:10px}.hvq .lt{width:30px;height:30px}.hvq blockquote{font-size:16px}
.dx-best.hva-lead{left:5%;width:90%;bottom:10px;padding:13px 16px}.hva-lead b{font-size:23px}.hva-lead .n{font-size:26px}.hva-lead .d{font-size:11px}
.hv-belt{display:none}
.hvb-stage{height:640px;margin:0 -18px;border-radius:0}
.hvb-wall{padding:0 2%;justify-content:space-around}.hvb-wall .c0,.hvb-wall .c4,.hvb-wall .c3{display:none}.hvb-wall .wc{width:46%}.hvb-wall .c1{margin-top:-60px}.hvb-wall .c2{margin-top:-120px}
.hvb-wall .hvp{filter:blur(1.4px);opacity:.92}
.hvb-vig{background:radial-gradient(ellipse 96% 50% at 50% 48%,rgba(12,24,48,.9) 0,rgba(12,24,48,.7) 56%,transparent 100%)}
.hvb-core{top:46%;width:92%;background:rgba(12,24,48,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:18px;padding:16px 12px}
.hvb-core .lab{display:none}.hvb-core h1{font-size:30px;margin-top:0}.hvb-core .dek{font-size:15px;margin:10px auto 14px}
.hvb-core .chips{gap:8px}.hvb-core .chips .lt{width:38px;height:38px}.hvb-core .chips .tb:nth-child(n+6){display:none}
.dx-best.hvb-win{margin-top:16px;padding:10px 14px;min-width:0;width:100%}.hvb-win .hv-row b{font-size:20px}.hvb-win .n{font-size:24px}.hvb-win .d{font-size:11px}
.hvb-core .dx-k{display:none}
.hv-tools{margin-top:6px}
}