
/* Layout: one long scroll, alternating plain and inked bands like a site plan; phones shown side by side as evidence */
:root{
  --bg:#F6F4EF; --surface:#FFFFFF; --ink:#171C26; --muted:#4F5664; --line:#DDD8CC;
  --accent:#E9A21A; --accent-ink:#171C26; --accent-text:#9A6406;
  --band:#171C26; --band-fg:#F6F4EF; --band-muted:#C5CBD6; --band-card:#222A38;
  --display:'Archivo', 'Arial Narrow', Arial, sans-serif;
  --body:'DM Sans', Arial, sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#12161E; --surface:#1B212C; --ink:#EEF0F3; --muted:#A9B0BC; --line:#2C3444;
  --accent:#F0B238; --accent-ink:#171C26; --accent-text:#F0B238;
  --band:#0B0E14; --band-fg:#F6F4EF; --band-muted:#B7BECA; --band-card:#1B212C; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12161E; --surface:#1B212C; --ink:#EEF0F3; --muted:#A9B0BC; --line:#2C3444;
  --accent:#F0B238; --accent-ink:#171C26; --accent-text:#F0B238;
  --band:#0B0E14; --band-fg:#F6F4EF; --band-muted:#B7BECA; --band-card:#1B212C; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--band)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--band);color:var(--band-fg)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{font-family:var(--display);font-weight:800;letter-spacing:.02em}
.brand span{color:var(--accent)}
nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
nav a{text-decoration:none;color:var(--band-muted)}
nav a:hover{color:var(--band-fg)}
section{padding-block:72px}
section.ink{background:var(--band);color:var(--band-fg)}
section.amber{background:var(--accent);color:var(--accent-ink)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin:0 0 12px}
.ink .eyebrow{color:var(--accent)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
h1{font-size:clamp(44px,8vw,88px);line-height:1;font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(30px,4.6vw,48px);line-height:1.08;font-weight:800}
h3{font-size:22px;font-weight:700}
p{margin:0}
.lead{font-size:clamp(18px,2.2vw,22px);color:var(--muted);max-width:40ch}
.ink .lead{color:var(--band-muted)}
.split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}
.split > div:first-child{display:flex;flex-direction:column;gap:20px;min-width:0}
ul.points{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--muted);max-width:52ch}
.ink ul.points{color:var(--band-muted)}
.phones{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
figure img{width:230px;max-width:100%;aspect-ratio:720/1612;object-fit:cover;object-position:top;border-radius:22px;border:2px solid var(--line);background:var(--surface)}
figure.new img{border-color:var(--accent)}
.tag{font-size:13px;font-weight:700;padding:4px 14px;border-radius:999px;background:var(--line);color:var(--muted)}
.new .tag{background:var(--accent);color:var(--accent-ink)}
.hero{padding-block:64px 72px}
.hero .split{align-items:end}
.hero img{width:260px;max-width:100%;border-radius:26px;border:3px solid #2C3444;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.stat{background:var(--bg);border-radius:18px;padding:28px}
.stat b{display:block;font-family:var(--display);font-size:clamp(44px,7vw,72px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.card{background:var(--band-card);border-radius:18px;padding:26px;border-top:4px solid var(--accent);display:flex;flex-direction:column;gap:8px}
.card p{color:var(--band-muted)}
.cards.light .card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--accent)}
.cards.light .card p{color:var(--muted)}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.role{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;margin-top:32px;align-items:stretch}
.pay{background:var(--accent);color:var(--accent-ink);border-radius:20px;padding:32px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.pay b{font-family:var(--display);font-size:clamp(48px,8vw,84px);line-height:1;font-variant-numeric:tabular-nums}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;gap:14px;font-size:19px}
.checks li{display:flex;gap:12px;align-items:baseline}
.checks li::before{content:"✓";font-weight:800;color:var(--accent-text)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{background:var(--band-card);padding:10px 16px;border-radius:12px;font-size:15px}
.chip.hot{background:var(--accent);color:var(--accent-ink);font-weight:700}
.spec{background:var(--band-card);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:12px}
.spec ul{margin:0;padding-left:20px;color:var(--band-muted)}
.spec small{color:var(--accent);font-size:14px}
.ai{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;margin-top:32px}
.tablebox{overflow-x:auto;margin-top:28px;border-radius:16px;border:1px solid #2C3444}
table{border-collapse:collapse;width:100%;min-width:620px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid #2C3444}
th{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--band-muted);background:var(--band-card)}
tr.best td{background:rgba(233,162,26,.16);font-weight:700}
.note{font-size:14px;color:var(--band-muted);margin-top:14px;max-width:80ch}
.chart{display:flex;align-items:flex-end;gap:clamp(10px,3vw,32px);height:320px;border-bottom:2px solid var(--line);padding-top:30px}
.grp{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;min-width:0}
.bars{display:flex;gap:6px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.bar{width:min(40%,44px);border-radius:6px 6px 0 0;position:relative}
.bar i{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-style:normal;font-size:13px;padding-bottom:4px;white-space:nowrap;color:var(--muted)}
.bar.b{background:#8C93A1}
.bar.p{background:var(--accent)}
.bar.p i{color:var(--ink);font-weight:700}
.xlab{font-weight:700;font-size:14px}
.legend{display:flex;gap:18px;font-size:14px;color:var(--muted);margin-top:14px;flex-wrap:wrap}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:#8C93A1}
.legend span.p::before{background:var(--accent)}
.rev{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:end;margin-top:24px}
.price-list{display:flex;flex-direction:column;gap:6px;color:var(--muted)}
ol.deal{margin:24px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:12px;color:var(--band-muted);font-size:19px;max-width:70ch}
ol.deal b{color:var(--band-fg)}
.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.video{display:flex;flex-direction:column;gap:10px;text-decoration:none;background:var(--band-card);border-radius:18px;padding:22px;border:1px solid #2C3444}
.video:hover{border-color:var(--accent)}
.vthumb{position:relative;display:grid;place-items:center;border-radius:12px;overflow:hidden;background:#0B0E14;aspect-ratio:16/9}
.vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;max-width:none}
.video:hover .play{transform:scale(1.08)}
.play{position:relative;width:52px;height:52px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.play::before{content:"";border-left:16px solid var(--accent-ink);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.video small{color:var(--band-muted)}
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.pick-card{display:flex;gap:20px;align-items:center;background:#000;border-radius:18px;padding:18px;border:1px solid #2C3444}
.pick-card img{width:150px;max-width:40%;border-radius:12px}
.pick-card p{color:var(--band-muted)}
.gpuimg{width:210px;max-width:45%;flex:none}
@media (max-width:820px){.pick{grid-template-columns:minmax(0,1fr)}}
.hint{font-size:15px;color:var(--band-muted)}
.options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.opt{background:var(--band-card);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:6px;border-left:4px solid var(--accent)}
.opt p{color:var(--band-muted)}
@media (max-width:820px){.options{grid-template-columns:minmax(0,1fr)}}
body.locked .seg, body.locked nav{display:none}
body:not(.slides) .hint{display:none}
.deckbar button.wide{width:auto;padding:0 18px;font-size:15px;font-weight:700;border-radius:999px}
.seg{display:flex;background:var(--band-card);border-radius:999px;padding:3px}
.seg button{font:inherit;font-size:14px;font-weight:700;border:0;background:transparent;color:var(--band-muted);padding:6px 14px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.choose{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.choose p{font-weight:700;color:var(--band-fg)}
.choose-btns{display:flex;gap:12px;flex-wrap:wrap}
.big{font:inherit;font-weight:700;font-size:18px;text-align:left;cursor:pointer;border-radius:16px;padding:16px 20px;border:2px solid var(--accent);background:transparent;color:var(--band-fg);display:flex;flex-direction:column;gap:2px;min-width:0}
.big small{font-weight:400;font-size:14px;color:var(--band-muted)}
.big[data-mode="slides"]{background:var(--accent);color:var(--accent-ink)}
.big[data-mode="slides"] small{color:var(--accent-ink)}
.big:hover{transform:translateY(-1px)}
body.slides section{min-height:calc(100vh - 56px);display:flex;align-items:center;padding-block:40px 110px !important}
body.slides section > .wrap{width:100%}
body.slides footer{display:none}
.deckbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:6;display:flex;align-items:center;gap:14px;background:var(--band);color:var(--band-fg);border:1px solid #2C3444;border-radius:999px;padding:6px 8px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
.deckbar button{font:inherit;font-size:24px;line-height:1;width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer}
@media (max-width:820px){.seg button{padding:6px 10px}}
.shops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.shop{display:flex;flex-direction:column;gap:10px}
.shop a{display:flex;flex-direction:column;gap:2px;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.shop a:hover{border-color:var(--accent)}
.shop a b::after{content:" ↗";color:var(--accent-text)}
.shop a span{font-size:14px;color:var(--muted)}
@media (max-width:820px){.shops{grid-template-columns:minmax(0,1fr)}}
.stage{margin-bottom:28px}
.stage svg{display:block;width:100%;height:auto;max-height:170px;overflow:visible}
.st-line{fill:none;stroke:currentColor;stroke-opacity:.35;stroke-width:2}
.st-flow{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 12;animation:flow 1.2s linear infinite}
.st-box{fill:none;stroke:currentColor;stroke-width:2;stroke-opacity:.55}
.st-fill{fill:var(--accent)}
.st-soft{fill:currentColor;fill-opacity:.15}
.st-soft-c{fill:currentColor;fill-opacity:.12;stroke:currentColor;stroke-opacity:.4;stroke-width:2}
.st-card{fill:currentColor;fill-opacity:.08;stroke:currentColor;stroke-opacity:.5;stroke-width:2}
.st-pole{fill:currentColor;fill-opacity:.55}
.st-wheel{fill:currentColor;fill-opacity:.7}
.st-wheel2{fill:none;stroke:currentColor;stroke-width:8;stroke-opacity:.75}
.st-pin{fill:var(--accent)}
.st-ring{fill:none;stroke:var(--accent);stroke-width:2}
.st-dot{fill:currentColor;fill-opacity:.85}
.st-hand{stroke:currentColor;stroke-width:4;stroke-linecap:round}
.st-cart{fill:none;stroke:currentColor;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.st-txt{fill:currentColor;font-family:var(--body);font-size:15px}
.st-txt.b{font-weight:700}
.st-txt.on-accent{fill:var(--accent-ink)}
.st-txt.ok{fill:#2E9E5B;font-weight:700}
section.amber .st-fill{fill:var(--accent-ink)}
.rise{transform-box:fill-box;transform-origin:50% 100%;animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.pop{transform-box:fill-box;transform-origin:center;animation:pop .5s cubic-bezier(.2,.8,.2,1.4) both}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.2s ease-out infinite}
.pulse-soft{transform-box:fill-box;transform-origin:center;animation:pulsesoft 1.6s ease-in-out infinite}
.travel{animation:travel 3s ease-in-out infinite both}
.bob{animation:bob 2.2s ease-in-out infinite}
.toggle{animation:toggle 3.2s ease-in-out infinite}
.swap{animation:swap 3s ease-in-out infinite}
.hand{transform-box:view-box;transform-origin:690px 84px;animation:spin 6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-36}}
@keyframes rise{from{transform:scaleY(0)}}
@keyframes pop{from{transform:scale(0);opacity:0}}
@keyframes pulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes pulsesoft{50%{transform:scale(1.06)}}
@keyframes travel{0%{transform:translateX(0);opacity:0}12%{opacity:1}85%{opacity:1}100%{transform:translateX(var(--dx));opacity:0}}
@keyframes bob{50%{transform:translateY(-8px)}}
@keyframes toggle{0%,20%{transform:translateX(0)}50%,70%{transform:translateX(120px)}100%{transform:translateX(0)}}
@keyframes swap{0%,30%{opacity:0}45%,85%{opacity:1}100%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.stage *{animation:none!important}}
body.slides section{flex-direction:column;justify-content:center;align-items:stretch}
.dealvid{display:block;width:100%;max-width:900px;aspect-ratio:16/9;object-fit:cover;border-radius:18px;margin-top:24px;background:#000}
.fbgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.fbnote{margin-top:28px;display:flex;flex-direction:column;gap:10px;max-width:75ch;color:var(--band-muted)}
.fbnote b{color:var(--band-fg)}
.fbmeta{font-size:14px}
.fbmeta a{color:var(--accent)}
@media (max-width:820px){.fbgrid{grid-template-columns:minmax(0,1fr)}}
.finale{position:fixed;inset:0;z-index:30;background:#000;display:flex;align-items:center;justify-content:center}
.finale video{width:100%;height:100%;object-fit:contain}
#skipFinale{position:absolute;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));font:inherit;font-weight:700;font-size:15px;border:0;border-radius:999px;padding:12px 20px;background:var(--accent);color:var(--accent-ink);cursor:pointer}
.tree{margin-top:32px;overflow-x:auto;padding-bottom:8px}
.trow{display:flex;justify-content:center}
.tstart{background:var(--band-card);border:1px solid #2C3444;border-radius:999px;padding:8px 18px;font-weight:700;font-size:14px}
.tsplit{display:flex;gap:0;position:relative;padding-top:14px;margin-top:4px}
.tsplit::before{content:"";position:absolute;top:0;left:50%;width:2px;height:14px;background:#3A4252}
.tcol{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;padding:14px 8px 0;min-width:160px}
.tcol::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:#3A4252}
.tcol::after{content:"";position:absolute;top:0;left:50%;width:2px;height:14px;background:#3A4252}
.tcol:first-child::before{left:50%}
.tcol:last-child::before{right:50%}
.tcol:only-child::before{display:none}
.tcol.narrow{flex:0 0 30%}
.tnode{font:inherit;color:var(--band-fg);cursor:pointer;text-align:left;width:100%;max-width:240px;background:var(--band-card);border:2px solid #2C3444;border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:4px}
.tnode img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block}
.tn-t{font-family:var(--display);font-weight:800;font-size:16px;padding:2px 4px 0}
.tn-s{font-size:13px;color:var(--band-muted);padding:0 4px 4px}
.tnode:hover{border-color:var(--accent)}
.tnode[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px rgba(233,162,26,.25)}
.tnode.no{border-style:dashed}
.tnode.win{border-color:var(--accent);background:linear-gradient(180deg,rgba(233,162,26,.18),var(--band-card))}
.tnode.win .tn-t{color:var(--accent)}
.tplayer{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;margin-top:28px;align-items:center}
.tplayer video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;background:#000}
.tinfo{display:flex;flex-direction:column;gap:10px}
.tgain{color:var(--band-muted);font-size:17px}
@media (max-width:820px){.tplayer{grid-template-columns:minmax(0,1fr)}.tree{font-size:14px}}
.browser{margin-top:28px;max-width:900px;border-radius:14px;overflow:hidden;border:1px solid #2C3444;background:#F7F4F6;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.bbar{display:flex;align-items:center;gap:14px;padding:10px 14px;background:#E9E4E8}
.bdots{display:flex;gap:6px}
.bdots i{width:11px;height:11px;border-radius:50%;background:#C9BFC6;display:block}
.bdots i:nth-child(1){background:#E35D4F}.bdots i:nth-child(2){background:#E9B53A}.bdots i:nth-child(3){background:#4CC36B}
.burl{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:#fff;color:#3B2A36;border-radius:999px;padding:5px 14px;font-size:13px;text-decoration:none;white-space:nowrap;overflow:hidden}
.block{width:9px;height:7px;border:2px solid #7A6B76;border-radius:2px;position:relative;margin-top:3px}
.block::before{content:"";position:absolute;left:0;top:-7px;width:5px;height:6px;border:2px solid #7A6B76;border-bottom:0;border-radius:4px 4px 0 0}
.bview{position:relative;height:clamp(260px,42vw,460px);overflow:hidden;background:#F7F4F6}
.bview img,.bview iframe{display:block;width:100%;border:0;will-change:transform}
.bview iframe{height:5200px}
.ask{font-family:var(--display);font-size:clamp(26px,4vw,40px);color:var(--accent);margin-top:36px;font-weight:800}
footer{padding-block:28px;font-size:13px;color:var(--muted)}
@media (max-width:820px){
  .split,.role,.ai,.rev{grid-template-columns:minmax(0,1fr)}
  .stats,.cards,.cards.two,.videos{grid-template-columns:minmax(0,1fr)}
  nav{display:none}
  section{padding-block:52px}
  figure img{width:160px}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0}img{max-width:100%}