/* Inter is self-hosted (SIL OFL, fonts/OFL.txt) so visitors never load anything from Google. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg:#070b14;--card:#0f1524;--line:rgba(148,163,184,.14);--text:#e8edf5;--muted:#a3adbf;--accent:#22c55e;--teal:#2dd4bf;--violet:#a78bfa;--accent2:#5eead4}
*{box-sizing:border-box}html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;position:relative}
a{color:var(--accent2)}.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.glow{position:absolute;top:0;left:0;right:0;height:900px;z-index:-1;background:radial-gradient(600px 380px at 30% 18%,rgba(34,197,94,.20),transparent 70%),radial-gradient(560px 400px at 72% 25%,rgba(139,92,246,.20),transparent 70%),radial-gradient(500px 300px at 50% 60%,rgba(45,212,191,.10),transparent 70%)}
header{padding:18px 0;border-bottom:1px solid var(--line);backdrop-filter:blur(8px);background:rgba(7,11,20,.55);position:sticky;top:0;z-index:5}
header .wrap{display:flex;justify-content:space-between;align-items:center}
.logo{font-weight:800;font-size:21px;color:var(--text);text-decoration:none;letter-spacing:-.3px}.logo span{background:linear-gradient(90deg,var(--accent),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
nav a{margin-left:22px;color:var(--muted);text-decoration:none;font-size:15px}nav a:hover{color:var(--text)}
.hero{padding:80px 20px 40px;text-align:center}
.hero h1{font-size:clamp(36px,6.2vw,64px);line-height:1.08;margin:18px 0 18px;letter-spacing:-1.5px;background:linear-gradient(100deg,#fff 10%,#86efac 45%,#5eead4 65%,#c4b5fd 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:19px;color:var(--muted);max-width:680px;margin:0 auto 30px}
.tag{display:inline-block;font-size:13px;padding:5px 14px;border-radius:99px;background:rgba(45,212,191,.08);border:1px solid rgba(45,212,191,.35);color:var(--accent2)}
form.wl{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
form.wl input{padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(15,21,36,.85);color:var(--text);min-width:290px;font-size:16px;font-family:inherit}
form.wl input:focus{outline:2px solid var(--teal);outline-offset:1px}
button,.btn{padding:14px 24px;border-radius:12px;border:0;background:linear-gradient(135deg,#22c55e,#2dd4bf);color:#03140c;font-weight:700;font-size:16px;cursor:pointer;font-family:inherit;box-shadow:0 8px 24px -8px rgba(34,197,94,.6);transition:transform .15s}
button:hover{transform:translateY(-1px)}
.msg{margin-top:12px;min-height:24px;color:var(--accent)}.small{font-size:13px;color:var(--muted)}
.app{max-width:640px;margin:40px auto 0;text-align:left;border-radius:16px;background:linear-gradient(180deg,#121a2c,#0c1220);border:1px solid rgba(148,163,184,.2);box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(45,212,191,.08),0 0 60px -10px rgba(139,92,246,.25);overflow:hidden}
.bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.bar i{width:11px;height:11px;border-radius:50%;background:#ef4444}.bar i:nth-child(2){background:#f59e0b}.bar i:nth-child(3){background:#22c55e}
.bar span{margin-left:10px;font-size:13px;color:var(--muted)}
.appbody{padding:18px}
.search{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;background:#0a0f1b;border:1px solid rgba(45,212,191,.4);font-size:15px;margin-bottom:12px}
.search svg{width:18px;height:18px;fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round}
.row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid var(--line);margin-top:8px;font-size:15px}
.row b{min-width:90px}.row em{font-style:normal;color:var(--muted);flex:1;font-size:14px}
.pill{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap}
.pill.free{background:rgba(34,197,94,.15);color:#86efac}.pill.fp{background:rgba(45,212,191,.15);color:#5eead4}.pill.paid{background:rgba(167,139,250,.18);color:#c4b5fd}
section{padding:72px 0;border-top:1px solid var(--line)}
h2{font-size:34px;margin:0 0 28px;text-align:center;letter-spacing:-.6px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 10px 30px -15px rgba(0,0,0,.7)}
.card h3{margin:0 0 8px;font-size:18px;font-weight:700}.card p{margin:0;color:var(--muted)}
.fgrid{grid-template-columns:repeat(3,1fr)}
.fcard{--c:#22c55e;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative}
.fcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 18px 40px -18px color-mix(in srgb,var(--c) 60%,transparent)}
.fcard::before{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--c),transparent)}
.c2{--c:#2dd4bf}.c3{--c:#38bdf8}.c4{--c:#a78bfa}.c5{--c:#f472b6}.c6{--c:#fbbf24}
.ico{display:inline-flex;width:46px;height:46px;border-radius:12px;align-items:center;justify-content:center;margin-bottom:16px;background:color-mix(in srgb,var(--c) 15%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
.ico svg{width:24px;height:24px;fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fcard h3{font-size:19px;font-weight:800}
.pgrid{grid-template-columns:repeat(4,1fr);align-items:stretch;margin-top:10px}
.pgrid .card{display:flex;flex-direction:column;position:relative}
.price{font-size:38px;font-weight:800;margin:6px 0;letter-spacing:-1px}.price small{font-size:15px;color:var(--muted);font-weight:400}
.card ul{list-style:none;padding:0;margin:14px 0 0;color:var(--muted)}
.card li{position:relative;padding-left:28px;margin:8px 0}
.card li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:rgba(34,197,94,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.feat{border:1px solid transparent;background:linear-gradient(180deg,#132036,#0f1524) padding-box,linear-gradient(135deg,#22c55e,#2dd4bf,#a78bfa) border-box;box-shadow:0 20px 50px -20px rgba(45,212,191,.45)}
.badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;padding:4px 12px;border-radius:99px;background:linear-gradient(90deg,#22c55e,#2dd4bf);color:#03140c;white-space:nowrap}
code{background:#0a0f1b;padding:2px 6px;border-radius:6px;color:#86efac;font-size:14px}
footer{padding:36px 0;border-top:1px solid var(--line);color:var(--muted);font-size:14px}footer a{color:var(--muted);margin-right:14px}
.doc{max-width:760px;margin:0 auto;padding:40px 20px}.doc h1{font-size:34px}.doc h2{text-align:left;font-size:22px;margin-top:32px}
@media (max-width:960px){.fgrid{grid-template-columns:repeat(2,1fr)}.pgrid{grid-template-columns:repeat(2,1fr);row-gap:28px}}
@media (max-width:640px){nav{display:none}.fgrid,.pgrid{grid-template-columns:1fr}form.wl input{min-width:0;width:100%}form.wl button{width:100%}.hero{padding:48px 20px 32px}.hero p{font-size:17px}.row em{display:none}}
/* ===== Variant text swapping ===== */
.t-a,.t-b,.t-c{display:none}
html[data-variant=a] .t-a,html[data-variant=b] .t-b,html[data-variant=c] .t-c,html:not([data-variant]) .t-a{display:inline}

/* ===== Variant B: deep navy, dot grid, blue/cyan glow, gradient outlines ===== */
[data-variant=b]{--bg:#050a1f;--card:#0b1430;--line:rgba(96,165,250,.16);--muted:#9fb0d0;--accent:#38bdf8;--teal:#22d3ee;--violet:#818cf8;--accent2:#67e8f9}
[data-variant=b] body{background:radial-gradient(rgba(125,211,252,.10) 1px,transparent 1.5px) 0 0/22px 22px,var(--bg)}
[data-variant=b] .glow{background:radial-gradient(620px 400px at 25% 15%,rgba(56,189,248,.24),transparent 70%),radial-gradient(560px 420px at 78% 22%,rgba(99,102,241,.24),transparent 70%),radial-gradient(500px 300px at 50% 62%,rgba(34,211,238,.12),transparent 70%)}
[data-variant=b] header{background:rgba(5,10,31,.6)}
[data-variant=b] .hero h1{background-image:linear-gradient(100deg,#fff 10%,#7dd3fc 45%,#22d3ee 65%,#a5b4fc 95%)}
[data-variant=b] .tag{background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.4)}
[data-variant=b] button{background:linear-gradient(135deg,#38bdf8,#6366f1);color:#fff;box-shadow:0 8px 24px -8px rgba(56,189,248,.6)}
[data-variant=b] .msg{color:#7dd3fc}
[data-variant=b] .app{background:linear-gradient(180deg,#0e1a3d,#081128);box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 60px -10px rgba(56,189,248,.3)}
[data-variant=b] .search{background:#060d24;border-color:rgba(34,211,238,.45)}
[data-variant=b] .fcard{border:1px solid transparent;background:linear-gradient(180deg,#0e1838,#0a1230) padding-box,linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c2) 70%,transparent) 60%,rgba(96,165,250,.15)) border-box}
[data-variant=b] .fcard::before{display:none}
[data-variant=b] .c1{--c:#38bdf8;--c2:#6366f1}[data-variant=b] .c2{--c:#22d3ee;--c2:#3b82f6}[data-variant=b] .c3{--c:#818cf8;--c2:#22d3ee}[data-variant=b] .c4{--c:#60a5fa;--c2:#a78bfa}[data-variant=b] .c5{--c:#2dd4bf;--c2:#38bdf8}[data-variant=b] .c6{--c:#a5b4fc;--c2:#06b6d4}
[data-variant=b] .card li::before{background:rgba(56,189,248,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
[data-variant=b] .feat{background:linear-gradient(180deg,#112052,#0b1430) padding-box,linear-gradient(135deg,#38bdf8,#22d3ee,#6366f1) border-box;box-shadow:0 20px 50px -20px rgba(56,189,248,.5)}
[data-variant=b] .badge{background:linear-gradient(90deg,#38bdf8,#6366f1);color:#fff}
[data-variant=b] code{background:#060d24;color:#7dd3fc}
[data-variant=b] .pill.free{background:rgba(56,189,248,.15);color:#7dd3fc}[data-variant=b] .pill.fp{background:rgba(34,211,238,.15);color:#67e8f9}[data-variant=b] .pill.paid{background:rgba(129,140,248,.2);color:#c7d2fe}

/* ===== Variant C: warm charcoal, amber/magenta aurora ===== */
[data-variant=c]{--bg:#141012;--card:#1d171a;--line:rgba(251,191,36,.14);--text:#f5ede6;--muted:#bfb1a8;--accent:#f59e0b;--teal:#fb7185;--violet:#e879f9;--accent2:#fbbf24}
[data-variant=c] body{background:linear-gradient(180deg,#1a1215 0,#141012 900px)}
[data-variant=c] .glow{background:radial-gradient(700px 300px at 20% 10%,rgba(245,158,11,.22),transparent 70%),radial-gradient(640px 360px at 80% 20%,rgba(217,70,239,.22),transparent 70%),radial-gradient(800px 220px at 50% 48%,rgba(244,63,94,.12),transparent 70%)}
[data-variant=c] header{background:rgba(20,16,18,.6)}
[data-variant=c] .hero h1{background-image:linear-gradient(100deg,#fff7ed 8%,#fcd34d 40%,#fb7185 68%,#e879f9 95%)}
[data-variant=c] .tag{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.4)}
[data-variant=c] button{background:linear-gradient(135deg,#f59e0b,#ec4899);color:#1a0610;box-shadow:0 8px 24px -8px rgba(236,72,153,.6)}
[data-variant=c] form.wl input{background:rgba(29,23,26,.85)}
[data-variant=c] form.wl input:focus{outline-color:#f59e0b}
[data-variant=c] .msg{color:#fcd34d}
[data-variant=c] .app{background:linear-gradient(180deg,#241b1f,#1a1417);border-color:rgba(251,191,36,.2);box-shadow:0 30px 80px -20px rgba(0,0,0,.85),0 0 60px -10px rgba(236,72,153,.3)}
[data-variant=c] .search{background:#130e10;border-color:rgba(245,158,11,.45)}
[data-variant=c] .fcard{border:1px solid color-mix(in srgb,var(--c) 45%,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 10px 30px -15px rgba(0,0,0,.7)}
[data-variant=c] .fcard::before{left:0;right:auto;top:20px;bottom:20px;width:3px;height:auto;background:linear-gradient(180deg,var(--c),transparent)}
[data-variant=c] .c1{--c:#f59e0b}[data-variant=c] .c2{--c:#fb923c}[data-variant=c] .c3{--c:#f43f5e}[data-variant=c] .c4{--c:#ec4899}[data-variant=c] .c5{--c:#d946ef}[data-variant=c] .c6{--c:#facc15}
[data-variant=c] .card li::before{background:rgba(245,158,11,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
[data-variant=c] .feat{background:linear-gradient(180deg,#2a1d22,#1d171a) padding-box,linear-gradient(135deg,#f59e0b,#f43f5e,#d946ef) border-box;box-shadow:0 20px 50px -20px rgba(236,72,153,.45)}
[data-variant=c] .badge{background:linear-gradient(90deg,#f59e0b,#ec4899);color:#1a0610}
[data-variant=c] code{background:#130e10;color:#fcd34d}
[data-variant=c] .pill.free{background:rgba(245,158,11,.15);color:#fcd34d}[data-variant=c] .pill.fp{background:rgba(251,113,133,.15);color:#fda4af}[data-variant=c] .pill.paid{background:rgba(217,70,239,.18);color:#f0abfc}

/* ===== Which page is this? (set by the script in index.html) =====
   Home: Inky's rotating copy (.hh with .t-a/.t-b/.t-c). Ad pages /v/a|b|c/: their own pitch (.ha with .p-a/.p-b/.p-c). */
.ha,.p-a,.p-b,.p-c,.tg-b,.m-vault{display:none}
html[data-page=ad] .hh{display:none}
html[data-page=ad] .ha{display:inline}
html[data-pitch=a] .p-a,html[data-pitch=b] .p-b,html[data-pitch=c] .p-c{display:inline}
html[data-pitch=b] .tg{display:none}html[data-pitch=b] .tg-b{display:inline}
html[data-pitch=b] .m-search{display:none}html[data-pitch=b] div.m-vault{display:block}html[data-pitch=b] span.m-vault{display:inline}
.hero h1 .ha,.hero h1 .hh{display:inline}html[data-page=ad] .hero h1 .hh{display:none}html:not([data-page=ad]) .hero h1 .ha{display:none}
.hero p.small{font-size:14px;margin-bottom:0}
/* 8 feature cards: 4 across on wide screens. Pricing: 3 cards (Free, Plus, Founder Pass). */
.fgrid{grid-template-columns:repeat(4,1fr)}.pgrid{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:960px){.pgrid{grid-template-columns:1fr}}
@media (max-width:640px){.fgrid{grid-template-columns:1fr}}
.c7{--c:#34d399}.c8{--c:#60a5fa}
[data-variant=b] .c7{--c:#38bdf8;--c2:#22d3ee}[data-variant=b] .c8{--c:#818cf8;--c2:#38bdf8}
[data-variant=c] .c7{--c:#fb7185}[data-variant=c] .c8{--c:#f59e0b}
.btn{display:inline-block;text-decoration:none}
.feat-f{border:1px solid transparent;background:linear-gradient(180deg,#1c1730,#0f1524) padding-box,linear-gradient(135deg,#a78bfa,#f472b6,#fbbf24) border-box}
[data-variant=b] .feat-f{background:linear-gradient(180deg,#151a46,#0b1430) padding-box,linear-gradient(135deg,#818cf8,#a78bfa,#22d3ee) border-box}
[data-variant=c] .feat-f{background:linear-gradient(180deg,#2a1d22,#1d171a) padding-box,linear-gradient(135deg,#fbbf24,#fb7185,#e879f9) border-box}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent2)}
@media (max-width:640px){.cta-row .btn{width:100%;text-align:center}}