/* Proof: Viral's palette and copy, with the real scan from the ad as the hero. Loaded after site.css. */
.hero{grid-template-columns:1.08fr .92fr;gap:48px;min-height:min(820px,calc(100svh - 95px));padding-top:36px;padding-bottom:48px}
.hero-copy .lead{max-width:470px}
.avail{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);font-weight:600}
.avail:before{content:"";width:8px;height:8px;border-radius:50%;background:#4f9d1c;box-shadow:0 0 0 4px #d8f0c0;flex:none}

.scan-stage{position:relative;display:flex;flex-direction:column;align-items:center;padding:10px 0}
.scan-stage:before{content:"";position:absolute;top:4%;width:520px;height:520px;max-width:120%;border-radius:50%;background:radial-gradient(circle,#e2f7a0 0,#ebf2cf 40%,transparent 70%);z-index:0}
.scan-stage .blueprint{inset:0 -30px 60px}
.scan-phone{width:300px;transform:rotate(-2deg)}
.scan-phone .phone-screen{aspect-ratio:720/1564;background:#000}
.scan-phone video{object-fit:cover}
.rec{position:absolute;z-index:2;top:-11px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:30px;background:var(--ink);color:#fff;font:700 10px/1 ui-monospace,monospace;letter-spacing:1px;box-shadow:0 4px 12px #0003}
.rec i{width:7px;height:7px;border-radius:50%;background:#ff3b30;animation:rec 1.2s infinite}
@keyframes rec{50%{opacity:.25}}
.chip{position:absolute;z-index:3;right:-6px;top:37%;display:flex;align-items:center;gap:9px;max-width:230px;padding:12px 15px;border-radius:14px;background:#fffdf8;border:1px solid #e0e3d6;box-shadow:0 15px 35px #353c2420;font-size:13px;font-weight:650;line-height:1.3;opacity:0;transform:translateY(10px) rotate(3deg);transition:opacity .35s,transform .35s}
.chip:before{content:"✓";display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--lime);font-size:12px}
.chip.show{opacity:1;transform:translateY(0) rotate(3deg)}
.stages{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:300px;margin-top:14px}
.stages[hidden],.chip[hidden],.rec[hidden]{display:none}
.stage{font-size:12px;font-weight:650;color:var(--muted);transition:color .3s}
.stage span{font:10px ui-monospace,monospace;margin-right:6px;color:#8a917e}
.stage b{display:block;height:4px;margin-top:7px;border-radius:4px;background:#dcdfd2;overflow:hidden}
.stage b i{display:block;height:100%;width:calc(var(--p,0)*100%);background:var(--ink);border-radius:4px}
.stage.on{color:var(--ink)}
.scan-actions,.hero-actions{position:relative;z-index:1;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.pill-btn{min-height:40px;border:1px solid #9aa288;border-radius:30px;background:var(--bg);color:var(--ink);padding:8px 16px;font-size:12px;font-weight:600}
.pill-btn:hover{background:#fff}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.vs-table{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fbfaf5}
.vs-row{display:grid;grid-template-columns:1fr 1fr}
.vs-row>span{padding:22px 28px;display:flex;align-items:center;gap:12px;font-size:16px}
.vs-row+.vs-row{border-top:1px solid var(--line)}
.vs-row>span:first-child{color:var(--muted)}
.vs-row>span:first-child:before{content:"✕";flex:none;font:13px ui-monospace,monospace;color:#b0a595}
.vs-row>span:last-child{background:#f0f7d8;font-weight:650}
.vs-row>span:last-child:before{content:"✓";flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--lime);font-size:11px}
.vs-head>span{font:11px ui-monospace,monospace;text-transform:uppercase;letter-spacing:1.4px;padding:16px 28px}
.vs-head>span:first-child:before,.vs-head>span:last-child:before{content:none}
.vs-head>span:last-child{background:var(--lime);color:var(--ink);font-weight:700}
.vs-head img{width:22px;height:22px;border-radius:6px}
.versus{padding-bottom:40px}

video:fullscreen{width:100vw;height:100vh;object-fit:contain;background:#000;border-radius:0}
.video-modal{width:min(960px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:16px;border:1px solid #647080;border-radius:12px;background:#090c12;color:#f1f6ff}
.video-modal::backdrop{background:#000d}
.video-modal-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.video-modal h2{font:600 1rem/1.5 system-ui;margin:0;color:#f1f6ff;letter-spacing:0}
.video-modal .close{min-width:44px;min-height:44px;background:#192634;color:#fff;border:1px solid #a9b8c8;border-radius:6px;font-size:1.4rem}
.video-modal video{width:100%;max-height:calc(100dvh - 130px);object-fit:contain;background:#000}

@media(max-width:1050px){.hero{gap:24px}.scan-phone,.stages{width:260px}.chip{right:-14px;max-width:190px;font-size:12px}}
@media(max-width:760px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:30px;gap:34px}
  .hero-copy{text-align:left}
  .scan-phone,.stages{width:250px}
  .chip{right:0;top:30%;max-width:170px}
  .vs-row{grid-template-columns:1fr}
  .vs-row>span{padding:14px 18px;font-size:14px}
  .vs-row>span:first-child{padding-bottom:6px}
  .vs-row>span:last-child{padding-top:10px}
  .vs-head{display:none}
  .vs-row:nth-child(2){border-top:0}
}
@media(prefers-reduced-motion:reduce){.rec i{animation:none}.chip{transition:none}}
.hero{overflow-x:clip}

/* Hero tab strip: the scan plus all ten feature clips in the same phone. */
.scan-stage{min-width:0;width:100%}
.tabs-wrap{position:relative;z-index:1;display:flex;align-items:center;gap:6px;width:min(100%,560px);margin-top:22px}
.tabs{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px 2px;flex:1;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;scroll-snap-align:center;display:flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:1px solid #c9cfba;border-radius:30px;background:#fffdf8;color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap}
.tab span{font:10px ui-monospace,monospace;color:#8a917e}
.tab:hover{border-color:#8e977a}
.tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.tab[aria-selected=true] span{color:var(--lime)}
.tab-arrow{flex:none;width:40px;height:40px;border:1px solid #c9cfba;border-radius:50%;background:var(--bg);font-size:16px}
.tab-arrow:hover{background:#fff}
.feature-caption{position:relative;z-index:1;max-width:420px;min-height:2.8em;margin:12px auto 0;text-align:center;font-size:13px;color:var(--muted)}
@media(max-width:760px){.tabs-wrap{width:100%}.tab-arrow{display:none}.tab{font-size:12px;padding:8px 12px}}
button.text-link{border:0;background:none;padding:0;color:inherit;cursor:pointer}

/* Cookie bar: non-blocking, bottom corner on desktop, bottom sheet on phones. Accept is the
   highlighted button; Reject keeps the same size and full-contrast text (no faded button). */
.cookie-bar{position:fixed;z-index:40;left:24px;bottom:24px;width:min(520px,calc(100% - 48px));background:#fffdf8;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px #20231f2e;padding:16px 18px;font-size:13px;line-height:1.5}
.cookie-bar[hidden],.cookie-choices[hidden],#cookie-save[hidden]{display:none}
.cookie-bar p{margin:0 0 12px;color:var(--ink)}
.cookie-bar p a{text-decoration:underline;text-underline-offset:3px}
.cookie-choices{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 12px}
.cookie-choices label{display:flex;align-items:center;gap:7px;font-weight:600}
.cookie-choices input{width:18px;height:18px;accent-color:var(--ink)}
.cookie-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.cookie-choose{margin-right:auto;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.cookie-btn{min-width:112px;min-height:42px;padding:9px 18px;border-radius:10px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-size:13px;font-weight:700}
.cookie-btn:hover{background:#3a4036}
.cookie-btn.ghost{background:transparent;color:var(--ink);font-weight:600}
.cookie-btn.ghost:hover{background:#20231f0d}
@media(max-width:760px){.cookie-bar{left:0;right:0;bottom:0;width:100%;border-radius:16px 16px 0 0;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}body.cookie-open .sticky-cta{display:none}.cookie-btn{flex:1;min-width:0}}
.linkish{border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}
.linkish:hover{text-decoration:underline}