:root { color-scheme:dark; --ink:#09100d; --surface:#121a16; --lime:#c2ff54; --mint:#59f2b7; --text:#f7faf8; --muted:#aebbb4; --line:rgba(255,255,255,.11); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--text); background:var(--ink); font-size:17px; line-height:1.55; } a { color:inherit; } a:focus-visible { outline:3px solid var(--mint); outline-offset:5px; border-radius:6px; } .shell { width:min(100% - 48px,1120px); margin:0 auto; }
.nav { height:82px; display:flex; align-items:center; gap:30px; border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:850; letter-spacing:.13em; } .brand-icon { width:27px; height:27px; border-radius:8px; object-fit:cover; display:block; } .nav-link { margin-left:auto; color:var(--muted); text-decoration:none; font-size:.9rem; } .store-link { text-decoration:none; color:var(--ink); background:var(--lime); font-weight:750; padding:9px 16px; border-radius:999px; font-size:.88rem; }
.hero { min-height:690px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px; overflow:hidden; } .eyebrow { color:var(--lime); font-size:.73rem; font-weight:850; letter-spacing:.14em; margin:0 0 15px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(4.1rem,9vw,7.7rem); line-height:.86; letter-spacing:-.075em; margin-bottom:28px; } h1 em { color:var(--lime); font-style:normal; } .lead { max-width:510px; font-size:1.22rem; color:var(--muted); } .actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:34px; } .button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:800; border-radius:999px; padding:15px 21px; } .primary { color:var(--ink); background:var(--lime); } .quiet { color:var(--text); } .quiet span { margin-left:9px; color:var(--lime); font-size:1.3rem; } .availability { margin-top:20px; color:var(--muted); font-size:.82rem; }
.hero-visual { min-height:560px; position:relative; display:grid; place-items:center; } .glow { position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(194,255,84,.25),rgba(194,255,84,0) 66%); } .phone-shell { position:relative; z-index:1; width:270px; aspect-ratio:9/19.5; overflow:hidden; border-radius:42px; border:9px solid #202522; box-shadow:0 42px 70px rgba(0,0,0,.5); transform:rotate(5deg); } .phone-shell img { display:block; width:100%; height:100%; object-fit:cover; } .signal-card { position:absolute; z-index:2; right:0; bottom:88px; display:grid; grid-template-columns:auto auto; column-gap:9px; align-items:center; padding:13px 18px; border:1px solid rgba(194,255,84,.35); border-radius:18px; background:rgba(18,26,22,.9); backdrop-filter:blur(10px); } .signal-card strong { color:var(--lime); font-size:1.8rem; line-height:1; } .signal-card small { color:var(--muted); } .signal-dot { width:8px; height:8px; border-radius:50%; background:var(--lime); }
.proof { display:flex; align-items:center; gap:20px; justify-content:center; padding:30px 0; color:var(--muted); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .proof p { margin:0; } .proof i { width:5px; height:5px; border-radius:50%; background:var(--lime); }
.steps { padding:150px 0; } .section-intro { margin-bottom:62px; } h2 { font-size:clamp(2.8rem,6vw,5rem); line-height:.92; letter-spacing:-.06em; margin-bottom:0; } .step { display:grid; grid-template-columns:1fr 300px; align-items:center; gap:80px; max-width:850px; margin:0 auto 115px; } .step.reverse { grid-template-columns:300px 1fr; } .step.reverse div { grid-column:2; grid-row:1; } .step.reverse img { grid-column:1; grid-row:1; } .step-number { color:var(--lime); font-weight:850; font-size:.8rem; } h3 { font-size:2rem; letter-spacing:-.045em; margin-bottom:12px; } .step div>p:last-child { color:var(--muted); max-width:410px; } .step img { width:100%; border-radius:31px; border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.27); }
.watch-promise { padding:125px 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .promise-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:25px; } .promise-grid .eyebrow { grid-column:1/-1; } .promise-copy { color:var(--muted); font-size:1.15rem; max-width:430px; align-self:end; margin:0; }
.watch-detail { display:grid; grid-template-columns:290px 1fr; align-items:center; justify-content:center; gap:96px; padding:135px 0; } .watch-image { width:230px; justify-self:center; overflow:hidden; border:8px solid #202522; border-radius:48px; box-shadow:0 30px 65px rgba(0,0,0,.45); } .watch-image img { display:block; width:100%; height:auto; } .watch-detail h2,.voice-detail h2 { margin-bottom:20px; } .detail-copy,.voice-copy p { max-width:490px; color:var(--muted); font-size:1.1rem; }
.voice-detail { padding:115px 0; background:linear-gradient(120deg,#172118,#09100d 62%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .voice-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .voice-copy blockquote { margin:28px 0; padding:20px 0 20px 24px; border-left:3px solid var(--lime); color:var(--text); font-weight:750; font-size:1.4rem; line-height:1.25; } .voice-setting { max-width:470px; margin:25px 0 8px; padding:17px 18px 14px; border:1px solid rgba(194,255,84,.25); border-radius:17px; background:rgba(255,255,255,.05); } .voice-setting > div:first-child { display:flex; justify-content:space-between; gap:12px; color:var(--text); font-size:.9rem; } .voice-setting span { color:var(--lime); font-weight:800; } .voice-setting input { width:100%; margin:16px 0 4px; accent-color:var(--lime); opacity:1; } .voice-scale { display:flex; justify-content:space-between; color:var(--muted); font-size:.75rem; }
.closing { padding:145px 0; text-align:center; } .closing .button { margin-top:30px; } footer { border-top:1px solid var(--line); padding:29px 0; } .footer-content { display:flex; justify-content:space-between; align-items:center; gap:25px; } footer a { color:var(--muted); font-size:.87rem; text-decoration:none; margin-left:19px; } footer .brand { color:var(--text); margin-left:0; } footer .x-link { display:inline-flex; align-items:center; gap:6px; color:var(--text); font-weight:750; } footer .x-link svg { width:15px; height:15px; fill:currentColor; } footer .x-link:hover { color:var(--lime); }
@media (max-width:720px) { .shell { width:min(100% - 32px,1120px); } .nav { height:70px; } .nav-link { display:none; } .hero { min-height:0; grid-template-columns:1fr; padding:78px 0 55px; gap:5px; } h1 { font-size:clamp(4rem,19vw,6rem); } .hero-visual { min-height:430px; } .phone-shell { width:222px; border-radius:35px; border-width:7px; } .signal-card { right:-6px; bottom:36px; } .proof { gap:10px; font-size:.78rem; white-space:nowrap; } .steps { padding:90px 0 20px; } .step,.step.reverse { display:flex; flex-direction:column; gap:28px; margin-bottom:88px; align-items:flex-start; } .step.reverse div,.step.reverse img { order:initial; } .step img { width:230px; align-self:center; } .watch-promise { padding:85px 0; } .promise-grid { grid-template-columns:1fr; gap:27px; } .watch-detail { grid-template-columns:1fr; gap:42px; padding:86px 0; } .watch-image { width:208px; } .voice-detail { padding:83px 0; } .voice-grid { grid-template-columns:1fr; gap:30px; } .voice-copy blockquote { font-size:1.2rem; } .closing { padding:100px 0; } .footer-content { align-items:flex-start; flex-direction:column; } footer a { margin:0 15px 0 0; } }

/* Support and privacy are reading pages, not campaign pages. */
body > header.shell:not(.nav) { min-height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
body > header.shell:not(.nav) .language { color:var(--muted); font-size:.88rem; text-decoration:none; }
body > main.shell { width:min(100% - 48px,760px); padding:54px 0 78px; }
body > main.shell .back { display:inline-flex; margin-bottom:32px; color:var(--lime); font-size:.9rem; font-weight:750; text-decoration:none; }
body > main.shell h1 { font-size:clamp(2.45rem,7vw,4.2rem); line-height:.96; letter-spacing:-.06em; margin:0 0 18px; }
body > main.shell .lead { max-width:650px; font-size:1.12rem; line-height:1.55; }
body > main.shell .meta { margin:0 0 44px; color:var(--muted); font-size:.82rem; }
body > main.shell h2 { margin:42px 0 12px; font-size:1.34rem; line-height:1.15; letter-spacing:-.025em; }
body > main.shell p, body > main.shell li { color:#c8d1cc; }
body > main.shell ul { padding-left:22px; }
body > main.shell li + li { margin-top:7px; }
body > main.shell .notice { margin:30px 0 40px; padding:17px 19px; border:1px solid rgba(194,255,84,.3); border-radius:16px; background:rgba(194,255,84,.07); color:var(--text); }
body > main.shell .notice a, body > main.shell p a { color:var(--lime); }
body > main.shell + footer { padding:22px 0; color:var(--muted); font-size:.82rem; }
@media (max-width:720px) { body > header.shell:not(.nav) { min-height:68px; } body > main.shell { width:min(100% - 32px,760px); padding:38px 0 58px; } body > main.shell .back { margin-bottom:25px; } body > main.shell h1 { font-size:2.85rem; } body > main.shell h2 { margin-top:35px; } }