/* ============================================================================
site.css — the MARKETING site (public/lite/site/*.html): landing, pricing,
sign-in, terms, privacy. This is a SEPARATE surface from the app shell
(public/lite/lite.css, owned by another agent shifting its own accent to
indigo #3F5BD9 with tints sky/mint/butter/lilac/peach) — this file does not
@import or lite.css, so the two can evolve independently without one
agent's edit silently reflowing the other's pages. Instead it reproduces
the SAME token names/values and the SAME component shapes (the .card /
.vcard anatomy: media mat -> body -> name/shop -> stat grid) so a visitor
moving from this site into the app never sees a seam.
The product has NO name yet — every page reads it from GET /api/lite/brand
at runtime (see each page's boot script) and falls back to the documented
placeholder "Creator Replay" until that resolves. Never hardcode a brand
name in markup here.
Design read: Persuade-mode landing/marketing site for TikTok Shop creators,
Calendly-style (liquid glass, aurora hero, pastel icon chips, navy pill
buttons), warm-white ground / navy ink / one indigo accent. Dials:
DESIGN_VARIANCE 7, MOTION_INTENSITY 6, VISUAL_DENSITY 3.
============================================================================ */
/* Geist loads via a Google Fonts in every page's (display=swap)
— NOT @font-face + self-hosted WOFF2. Deliberate exception to the taste
skill's self-hosting preference: this repo has no build step (CLAUDE.md:
"Plain JS, no framework, no build step"), so there is no bundler pass to
run font files through. A real with display=swap and a full system
fallback stack is the honest choice given that constraint. */
:root{
/* ---- color: warm white ground, navy ink, ONE indigo accent, five pastel
tint surfaces (sky/mint/butter/lilac/peach) — the exact values the app
shell is converging on, so the site and the product match. ------------ */
--ground:#FCFBF8; --surface:#FFFFFF; --surface-2:#F3F1EA;
--ink:#071A31; --ink-2:#33475C /* 9.24:1 on ground */;
--muted:#4C5C71 /* 6.60:1 on ground */;
--line:rgba(7,26,49,.10); --line-soft:rgba(7,26,49,.06);
--accent:#3F5BD9 /* decorative/large-text — 5.47:1 on ground, 5.66:1 on white */;
--accent-ink:#2E3FA8 /* 8.48:1 on ground — the color body-size links/copy use */;
--accent-soft:#E4E9FB;
--good:#166B41 /* 6.32:1 */; --bad:#B23B3B /* 5.67:1 */;
--tint-sky:#BFE3FF; --tint-sky-ink:#0B57C4 /* 4.93:1 on its own tint */;
--tint-mint:#CDEFD8; --tint-mint-ink:#166B41 /* 5.27:1 */;
--tint-butter:#FFF0B8; --tint-butter-ink:#7A5710 /* 5.76:1 */;
--tint-lilac:#E2D6FF; --tint-lilac-ink:#5B3FA8 /* 5.62:1 */;
--tint-peach:#FFD9C7; --tint-peach-ink:#A3421E /* 4.77:1 */;
/* primary "pill" buttons invert ink/ground (navy bg, warm-white text)
rather than filling with the accent — matches the app shell exactly and
is the brief's own instruction ("Connect TikTok Shop" (navy pill)). */
--on-accent:var(--ground);
--glass-bg:rgba(255,255,255,.62); --glass-line:rgba(255,255,255,.72);
--shadow-sm:0 1px 2px rgba(7,26,49,.05), 0 4px 10px rgba(7,26,49,.04);
--shadow-md:0 1px 2px rgba(7,26,49,.05), 0 4px 10px rgba(7,26,49,.04), 0 20px 40px rgba(7,26,49,.10);
--radius-control:16px; --radius-card:24px; --radius-sm:10px;
--ease:cubic-bezier(.4,0,.2,1);
--font-display:'Geist',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--measure:66ch;
color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--ground:#0B1526; --surface:#12203A; --surface-2:#182A4A;
--ink:#F2F5FA; --ink-2:#CBD5E3 /* 12.32:1 */; --muted:#8FA0B8 /* 6.86:1 */;
--line:rgba(242,245,250,.12); --line-soft:rgba(242,245,250,.06);
--accent:#7A8CF5 /* 6.0:1 on dark ground */; --accent-ink:#93A5FF /* 7.89:1 */;
--accent-soft:rgba(122,140,245,.18);
--good:#5FD08F /* 9.49:1 */; --bad:#E2776D /* 6.17:1 */;
--tint-sky:rgba(129,178,255,.18); --tint-sky-ink:#9DC4FF;
--tint-mint:rgba(134,224,168,.16); --tint-mint-ink:#86E0AE;
--tint-butter:rgba(255,214,110,.16);--tint-butter-ink:#FFD66E;
--tint-lilac:rgba(196,168,255,.16); --tint-lilac-ink:#CBB8FF;
--tint-peach:rgba(255,168,130,.16); --tint-peach-ink:#FFA882;
--on-accent:var(--ground);
--glass-bg:rgba(18,32,58,.58); --glass-line:rgba(255,255,255,.10);
--shadow-sm:0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.28);
--shadow-md:0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.28), 0 20px 44px rgba(0,0,0,.38);
color-scheme:dark;
}}
:root[data-theme="dark"]{
--ground:#0B1526; --surface:#12203A; --surface-2:#182A4A;
--ink:#F2F5FA; --ink-2:#CBD5E3; --muted:#8FA0B8;
--line:rgba(242,245,250,.12); --line-soft:rgba(242,245,250,.06);
--accent:#7A8CF5; --accent-ink:#93A5FF;
--accent-soft:rgba(122,140,245,.18);
--good:#5FD08F; --bad:#E2776D;
--tint-sky:rgba(129,178,255,.18); --tint-sky-ink:#9DC4FF;
--tint-mint:rgba(134,224,168,.16); --tint-mint-ink:#86E0AE;
--tint-butter:rgba(255,214,110,.16);--tint-butter-ink:#FFD66E;
--tint-lilac:rgba(196,168,255,.16); --tint-lilac-ink:#CBB8FF;
--tint-peach:rgba(255,168,130,.16); --tint-peach-ink:#FFA882;
--on-accent:var(--ground);
--glass-bg:rgba(18,32,58,.58); --glass-line:rgba(255,255,255,.10);
--shadow-sm:0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.28);
--shadow-md:0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.28), 0 20px 44px rgba(0,0,0,.38);
color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font:16px/1.55 var(--font-display);min-height:100vh;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit}
h1,h2,h3,p{margin:0}
/* browser surfaces carry the design too (craft floor): selection, focus ring,
tabular numerals for anything counted. */
::selection{background:var(--accent-soft);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 20px}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important}
}
/* ---- one authored moment: reveal-on-scroll ---------------------------
IntersectionObserver only — no scroll listeners anywhere in this file's
JS. Elements start hidden via [data-reveal] and get .is-in added once,
staggered by --d (set inline per element/child index). */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);
transition-delay:var(--d,0s)}
[data-reveal].is-in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fade-up{animation:fade-up .5s var(--ease) both}
/* ============================================================================
Top nav
============================================================================ */
.topbar{position:sticky;top:0;z-index:20;background:var(--ground)}
.topbar-inner{display:flex;align-items:center;gap:28px;height:72px;max-width:1200px;margin:0 auto;padding:0 32px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--ink);color:var(--ground);
display:flex;align-items:center;justify-content:center;flex:none}
.brand-mark svg{width:16px;height:16px}
.brand-name{font:600 17px/1 var(--font-display);letter-spacing:-.02em;white-space:nowrap}
nav.sitenav{display:flex;align-items:center;gap:26px;margin-left:8px}
nav.sitenav a{font:500 14.5px var(--font-display);color:var(--ink-2);text-decoration:none;
transition:color .15s var(--ease)}
nav.sitenav a:hover{color:var(--ink)}
.topbar .spacer{flex:1}
.topbar-actions{display:flex;align-items:center;gap:10px}
.navlogin{font:500 14.5px var(--font-display);color:var(--ink-2);text-decoration:none;padding:10px 6px;
white-space:nowrap}
.navlogin:hover{color:var(--ink)}
.brand-name{overflow:hidden;text-overflow:ellipsis;max-width:40vw}
@media (max-width:760px){
nav.sitenav{display:none}
.topbar-inner{gap:12px}
}
/* real bug found via Playwright QA at 390px: brand + "Log in" + "Get
started" + the theme toggle, all nowrap in one flex row with no shrink
allowance, forced the topbar (and therefore the whole document) 57-67px
wider than the viewport (measured: scrollWidth 447 vs clientWidth 390).
"Log in" is redundant with the footer's own Log in link and with
signin.html itself (its email door serves returning visitors too), so it
is the one thing that can safely disappear at phone width rather than
wrap or shrink further. */
@media (max-width:480px){
.topbar-inner{padding:0 16px;gap:8px}
.navlogin{display:none}
.topbar-actions .btn-primary{padding:11px 15px;font-size:13.5px}
}
/* ============================================================================
Buttons + glass chips
============================================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-control);
font:500 14.5px var(--font-display);padding:13px 20px;border:1.5px solid transparent;cursor:pointer;
text-decoration:none;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
transition:background-color .15s var(--ease),border-color .15s var(--ease),
color .15s var(--ease),transform .1s var(--ease),box-shadow .15s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px;flex:none}
.btn-primary{background:var(--ink);color:var(--on-accent)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-primary[disabled]{opacity:.45;pointer-events:none}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--on-accent)}
.btn-lg{padding:15px 24px;font-size:15.5px;border-radius:18px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none;cursor:default}
.glass-chip{background:var(--glass-bg);border:1px solid var(--glass-line);
-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
box-shadow:var(--shadow-sm);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.glass-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
@media (prefers-reduced-transparency:reduce){
.glass-chip{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
}
.theme-toggle{width:40px;height:40px;border-radius:var(--radius-control);color:var(--ink-2);cursor:pointer;
padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:inline-flex}
/* ============================================================================
Aurora hero panel (landing page only)
============================================================================ */
.hero-shell{padding:14px 0 8px}
.hero{position:relative;border-radius:32px;overflow:hidden;padding:76px 40px 88px;text-align:center;
isolation:isolate}
.hero::before{content:'';position:absolute;inset:-20%;z-index:-1;
background:
radial-gradient(38% 45% at 18% 22%, var(--tint-sky) 0%, transparent 70%),
radial-gradient(34% 40% at 82% 18%, var(--tint-lilac) 0%, transparent 70%),
radial-gradient(40% 46% at 78% 82%, var(--tint-mint) 0%, transparent 70%),
radial-gradient(30% 38% at 14% 84%, var(--tint-peach) 0%, transparent 70%),
radial-gradient(46% 60% at 50% 50%, var(--tint-butter) 0%, transparent 72%);
filter:blur(46px) saturate(1.3);
animation:aurora-drift 40s ease-in-out infinite alternate;
}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--ground);opacity:.28}
@keyframes aurora-drift{
0%{transform:translate(-2%,-1%) scale(1)}
50%{transform:translate(2%,2%) scale(1.06)}
100%{transform:translate(-1%,3%) scale(1.02)}
}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
background:var(--glass-bg);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);font:500 12.5px var(--font-display);color:var(--ink-2);margin:0 0 22px}
.hero-eyebrow b{color:var(--tint-sky-ink);font-weight:600}
.hero h1{font:600 46px/1.14 var(--font-display);letter-spacing:-.03em;max-width:19ch;margin:0 auto;
color:var(--ink);text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--accent-ink)}
.hero p.sub{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:46ch;margin:18px auto 0}
.hero-ctas{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:30px;flex-wrap:wrap}
@media (max-width:640px){
.hero{padding:56px 22px 64px;border-radius:24px}
.hero h1{font-size:32px}
}
/* ============================================================================
Icon-chip row + scroll-driven feature walk
============================================================================ */
.chiprow-shell{position:sticky;top:72px;z-index:5;display:flex;justify-content:center;padding:22px 0;
pointer-events:none}
.chiprow{display:inline-flex;gap:10px;padding:10px;border-radius:999px;background:var(--glass-bg);
border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(14px) saturate(1.4);
backdrop-filter:blur(14px) saturate(1.4);box-shadow:var(--shadow-md);pointer-events:auto}
@media (prefers-reduced-transparency:reduce){.chiprow{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
.nav-icon-chip{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
color:var(--muted);background:transparent;transition:background-color .2s var(--ease),color .2s var(--ease),
transform .2s var(--ease);cursor:default}
.nav-icon-chip svg{width:19px;height:19px}
.nav-icon-chip.is-active{color:var(--ink);transform:scale(1.06)}
.nav-icon-chip.is-active.tint-sky{background:var(--tint-sky)}
.nav-icon-chip.is-active.tint-mint{background:var(--tint-mint)}
.nav-icon-chip.is-active.tint-butter{background:var(--tint-butter)}
.nav-icon-chip.is-active.tint-lilac{background:var(--tint-lilac)}
@media (max-width:640px){.chiprow-shell{top:64px}.nav-icon-chip{width:38px;height:38px}}
.feature-walk{padding:8px 0 30px}
/* 60vh, not 80vh (QA screenshot at 1440x900 showed excessive dead white
space between stops — cards run 368-645px tall, so 80vh (720px) left up
to ~176px of blank gap above AND below a card). 60vh still gives the
sticky chip row enough scroll runway to feel like a deliberate walk
rather than an instant snap, with a lot less empty-looking scroll. */
.feature-stop{min-height:60vh;display:flex;align-items:center;padding:48px 0}
.feature-stop:first-child{padding-top:20px}
.feature-card{width:100%;background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-md);
padding:44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
/* no per-stop eyebrow/kicker here on purpose — the hero already spends this
page's one eyebrow (taste skill: max 1 per 3 sections), and the icon-chip
row above each stop already signals which one is active. */
.feature-copy h2{font:600 27px/1.25 var(--font-display);letter-spacing:-.02em;margin:0;max-width:16ch}
.feature-copy p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:12px 0 0;max-width:42ch}
.feature-visual{position:relative;min-height:280px}
@media (max-width:900px){
.feature-card{grid-template-columns:1fr;padding:28px;gap:26px}
.feature-stop{min-height:0;padding:36px 0}
}
/* -- feature (a): a real product-card mock, same anatomy as the app's own
.card component (media mat -> body -> name/shop -> stat grid). Reproduced
here rather than linked from lite.css so this page never depends on a file
another agent is actively changing — see the header comment. -- */
.mock-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:20px;overflow:hidden;
box-shadow:var(--shadow-sm);max-width:280px;margin:0 auto}
.mock-card .card-media{aspect-ratio:4/5;background:var(--tint-sky);padding:12px;position:relative}
.mock-card .card-media .mat{width:100%;height:100%;border-radius:12px;overflow:hidden}
.mock-card .card-media .mat img{width:100%;height:100%;object-fit:cover}
.mock-card .card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px}
.mock-card .card-shop{font:500 10.5px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mock-card .card-name{font:500 14.5px/1.35 var(--font-display);color:var(--ink)}
.mock-card .card-statgrid{margin-top:9px;padding-top:9px;border-top:1px solid var(--line-soft);
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mock-card .cs b{display:block;font:500 15px var(--font-display);color:var(--ink)}
.mock-card .cs i{font-style:normal;font:500 8.5px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
/* -- feature (b): a real download-tray component (checkboxes + thumbnails +
real buttons), not a fake screenshot div. -- */
.mock-tray{background:var(--surface);border:1px solid var(--line-soft);border-radius:20px;box-shadow:var(--shadow-sm);
padding:18px;max-width:340px;margin:0 auto}
.tray-row{display:flex;align-items:center;gap:12px;padding:9px 4px;border-radius:12px}
.tray-row+.tray-row{border-top:1px solid var(--line-soft)}
.tray-row input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);flex:none}
.tray-thumb{width:34px;height:60px;border-radius:8px;overflow:hidden;flex:none;background:var(--tint-mint)}
.tray-thumb img{width:100%;height:100%;object-fit:cover}
.tray-name{flex:1;font:500 13px var(--font-display);color:var(--ink);min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.tray-size{font:500 11.5px var(--font-mono);color:var(--muted);flex:none}
.mock-tray .tray-actions{display:flex;gap:8px;margin-top:14px}
/* -- feature (c): earnings stat card — large Geist numerals, tabular. -- */
.mock-stats{background:var(--surface);border:1px solid var(--line-soft);border-radius:20px;box-shadow:var(--shadow-sm);
padding:26px;max-width:340px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}
.mock-stats .stat i{display:block;font-style:normal;font:500 10.5px var(--font-mono);letter-spacing:.06em;
text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.mock-stats .stat b{display:block;font:600 26px var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.mock-stats .stat.is-accent b{color:var(--accent-ink)}
/* -- feature (d): sort chips + a filter popover mock. -- */
.mock-filters{background:var(--surface);border:1px solid var(--line-soft);border-radius:20px;box-shadow:var(--shadow-sm);
padding:22px;max-width:340px;margin:0 auto}
.mock-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.mchip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);
font:500 12.5px var(--font-display);color:var(--ink-2)}
.mchip.is-on{border-color:transparent;background:var(--tint-lilac);color:var(--tint-lilac-ink)}
.mock-filters .frow{display:flex;align-items:center;justify-content:space-between;padding:9px 0;
border-top:1px solid var(--line-soft);font:500 13px var(--font-display);color:var(--ink-2)}
.mock-filters .frow:first-of-type{border-top:none}
.mock-filters .frow b{color:var(--ink);font-weight:500}
/* ============================================================================
How it works — 3 verbs, connected flow (not 3 equal icon cards)
============================================================================ */
.howitworks{padding:70px 0}
.section-head{max-width:640px;margin:0 auto 46px;text-align:center}
.section-head h2{font:600 30px/1.25 var(--font-display);letter-spacing:-.02em}
.section-head p{margin-top:10px;font-size:15px;color:var(--ink-2)}
.steps{display:flex;align-items:flex-start;gap:0;max-width:980px;margin:0 auto}
.step{flex:1;text-align:center;padding:0 18px;position:relative}
.step-num{width:52px;height:52px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);
display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font:600 18px var(--font-display);
color:var(--ink)}
.step:nth-child(1) .step-num{border-color:var(--tint-sky-ink);color:var(--tint-sky-ink)}
.step:nth-child(2) .step-num{border-color:var(--tint-mint-ink);color:var(--tint-mint-ink)}
.step:nth-child(3) .step-num{border-color:var(--tint-lilac-ink);color:var(--tint-lilac-ink)}
.step h3{font:600 19px var(--font-display);letter-spacing:-.01em;margin:0}
.step p{font-size:13.5px;color:var(--muted);margin:8px auto 0;max-width:22ch}
.step-arrow{position:absolute;top:26px;right:-8px;color:var(--line);width:100%;display:flex;justify-content:flex-end}
.step-arrow svg{width:26px;height:26px}
.step:last-child .step-arrow{display:none}
@media (max-width:760px){
.steps{flex-direction:column;gap:34px}
.step-arrow{display:none}
}
/* ============================================================================
Pricing teaser (landing) + full pricing card (pricing.html)
============================================================================ */
.pricing-teaser{padding:70px 0}
.teaser-card{max-width:560px;margin:0 auto;background:var(--surface);border-radius:var(--radius-card);
box-shadow:var(--shadow-md);padding:40px;text-align:center;position:relative;overflow:hidden}
.teaser-card::before{content:'';position:absolute;inset:0;z-index:-1;
background:radial-gradient(60% 60% at 100% 0%, var(--tint-sky) 0%, transparent 70%),
radial-gradient(60% 60% at 0% 100%, var(--tint-lilac) 0%, transparent 70%)}
.trial-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
background:var(--tint-mint);color:var(--tint-mint-ink);font:500 12px var(--font-display);margin-bottom:16px}
.teaser-price{font:600 44px var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.teaser-price span{font:500 15px var(--font-display);color:var(--muted)}
.teaser-list{list-style:none;padding:0;margin:22px 0 26px;display:flex;flex-direction:column;gap:10px;
text-align:left;max-width:340px;margin-left:auto;margin-right:auto}
.teaser-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink-2)}
.teaser-list svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--good)}
.plan-card{background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-md);
padding:48px;max-width:640px;margin:0 auto;position:relative;overflow:hidden}
.plan-card::before{content:'';position:absolute;inset:0;z-index:-1;
background:radial-gradient(50% 50% at 100% 0%, var(--tint-sky) 0%, transparent 70%),
radial-gradient(50% 50% at 0% 100%, var(--tint-butter) 0%, transparent 70%)}
.plan-toggle{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:var(--surface-2);
margin:0 auto 28px}
.plan-toggle button{border:none;background:transparent;padding:9px 18px;border-radius:999px;font:500 13.5px var(--font-display);
color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.plan-toggle button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.plan-toggle .save{font:600 10.5px var(--font-mono);color:var(--good);background:var(--tint-mint);
padding:2px 6px;border-radius:6px}
.plan-price{text-align:center}
.plan-price .amt{font:600 56px var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.plan-price .per{font:500 15px var(--font-display);color:var(--muted)}
.plan-price .note{margin-top:6px;font-size:13px;color:var(--muted)}
.plan-includes{margin:32px 0 0;padding-top:28px;border-top:1px solid var(--line-soft)}
.plan-includes .lbl{font:500 11px var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
margin-bottom:14px}
.plan-includes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.plan-includes li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink-2)}
.plan-includes svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--good)}
@media (max-width:640px){.plan-card{padding:28px}.plan-includes ul{grid-template-columns:1fr}}
/* ============================================================================
FAQ accordion — native
============================================================================ */
.faq{padding:60px 0 90px;max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;padding:20px 4px;display:flex;align-items:center;justify-content:space-between;
gap:16px;cursor:pointer;font:500 16px var(--font-display);color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .plus{width:22px;height:22px;flex:none;position:relative;color:var(--muted)}
.faq-item .plus svg{position:absolute;inset:0;transition:opacity .15s var(--ease),transform .2s var(--ease)}
.faq-item .plus .i-minus{opacity:0;transform:rotate(-90deg)}
.faq-item[open] .plus .i-plus{opacity:0;transform:rotate(90deg)}
.faq-item[open] .plus .i-minus{opacity:1;transform:rotate(0)}
.faq-item p{padding:0 26px 20px 4px;color:var(--ink-2);font-size:14.5px;line-height:1.6;max-width:62ch}
/* ============================================================================
Footer
============================================================================ */
footer.sitefoot{border-top:1px solid var(--line);padding:40px 0 50px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{font:500 13.5px var(--font-display);color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.foot-brand{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px}
.foot-brand .brand-mark{width:22px;height:22px;border-radius:7px}
.foot-brand .brand-mark svg{width:12px;height:12px}
/* ============================================================================
Sign-in split layout
============================================================================ */
.signin-shell{min-height:calc(100vh - 72px);display:grid;grid-template-columns:1fr 1fr}
.signin-copy{background:var(--surface-2);display:flex;flex-direction:column;justify-content:center;
padding:64px;position:relative;overflow:hidden}
.signin-copy::before{content:'';position:absolute;inset:-20%;z-index:0;
background:radial-gradient(40% 50% at 20% 20%, var(--tint-sky) 0%, transparent 70%),
radial-gradient(36% 46% at 85% 80%, var(--tint-lilac) 0%, transparent 70%);
filter:blur(50px);animation:aurora-drift 44s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.signin-copy::before{animation:none}}
.signin-copy>*{position:relative;z-index:1}
.signin-copy h1{font:600 32px/1.25 var(--font-display);letter-spacing:-.02em;max-width:14ch}
.signin-copy p{margin-top:14px;color:var(--ink-2);font-size:15px;max-width:38ch;line-height:1.6}
.signin-copy .signin-list{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-direction:column;gap:14px}
.signin-copy .signin-list li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.signin-copy .signin-list svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--accent-ink)}
.signin-form{display:flex;flex-direction:column;justify-content:center;padding:64px;max-width:440px;margin:0 auto;
width:100%}
.signin-form h2{font:600 24px var(--font-display);letter-spacing:-.02em}
.signin-form .lead{margin:8px 0 26px;color:var(--muted);font-size:14px}
.doorbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font:600 15px var(--font-display);
padding:14px 22px;border-radius:14px;text-decoration:none;transition:transform .15s var(--ease);cursor:pointer;
border:1px solid transparent}
.doorbtn:hover{transform:translateY(-1px)}
.doorbtn.tiktok{background:#000;color:#fff}
.doorbtn.google{background:#fff;color:#1F1F1F;border-color:#DADCE0}
.doorbtn svg{flex:none}
.doorbtn[hidden]{display:none}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;letter-spacing:.06em;
text-transform:uppercase;margin:20px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.emailform label{display:block;font:500 13px var(--font-display);margin:0 0 7px;color:var(--ink)}
.emailform input{width:100%;font:16px var(--font-display);padding:13px 15px;border-radius:14px;
border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.emailform input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.emailform .note{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.5}
.emailform .note.ok{color:var(--good);font-weight:500}
.emailform .note.err{color:var(--bad);font-weight:500}
.signin-alt{margin-top:22px;font-size:13px;color:var(--muted);text-align:center}
.signin-alt a{color:var(--accent-ink);font-weight:500;text-decoration:none}
.signin-alt a:hover{text-decoration:underline}
.device-note{margin-top:18px;padding:12px 14px;border-radius:12px;background:var(--surface-2);
font-size:12.5px;color:var(--muted);line-height:1.5}
@media (max-width:900px){
.signin-shell{grid-template-columns:1fr}
.signin-copy{padding:44px 28px;order:2}
.signin-form{padding:44px 28px}
}
/* ============================================================================
Legal reading layout (terms / privacy)
============================================================================ */
.legal-shell{max-width:1200px;margin:0 auto;padding:44px 32px 90px;display:grid;
grid-template-columns:220px minmax(0,1fr);gap:56px}
.legal-toc{position:sticky;top:92px;align-self:start;display:flex;flex-direction:column;gap:2px}
.legal-toc a{font:500 13px var(--font-display);color:var(--muted);text-decoration:none;padding:7px 10px;
border-radius:9px;transition:background-color .15s var(--ease),color .15s var(--ease)}
.legal-toc a:hover{color:var(--ink);background:var(--surface-2)}
.legal-body{max-width:var(--measure)}
.legal-body h1{font:600 32px var(--font-display);letter-spacing:-.02em;margin-bottom:8px}
.legal-updated{color:var(--muted);font-size:13px;margin-bottom:36px}
.legal-body h2{font:600 19px var(--font-display);letter-spacing:-.01em;margin:38px 0 12px;scroll-margin-top:92px}
.legal-body p{font-size:15px;line-height:1.7;color:var(--ink-2);margin:0 0 14px}
.legal-body ul{margin:0 0 14px;padding-left:20px;color:var(--ink-2);font-size:15px;line-height:1.7}
.legal-body li{margin-bottom:6px}
.legal-body a{color:var(--accent-ink)}
@media (max-width:860px){
.legal-shell{grid-template-columns:1fr;padding:32px 20px 70px}
.legal-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
}
/* ============================================================================
Real product screenshots (operator feedback, 2026-09-03 09:32): "closer
to real screenshots and what we actually offer." Replaces the picsum.photos
mock cards/tray/stats/filters the feature-walk used to fabricate — every
visual on this page is now either a real screenshot
(public/lite/site/img/shot-*.{webp,jpg}) or plain marked-up copy, nothing
invented. WebP primary (~90-270KB each), a downscaled 1440px JPEG fallback
for browsers without WebP support, via .
============================================================================ */
/* ---- hero screenshot, in a plain browser-chrome frame ------------------ */
.hero-shot-wrap{margin:34px auto 0;max-width:960px;padding:0 4px}
.browser-frame{background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;
box-shadow:var(--shadow-md);overflow:hidden}
.browser-frame .chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;
background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
.browser-frame .dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.browser-frame .addr{flex:1;margin-left:8px;height:22px;border-radius:999px;background:var(--ground);
display:flex;align-items:center;padding:0 12px;font:500 11px var(--font-mono);color:var(--muted);
overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.browser-frame img{display:block;width:100%;height:auto}
@media (max-width:640px){.hero-shot-wrap{margin-top:26px}}
/* ---- feature-walk real screenshots (replaces .mock-card/.mock-tray/
.mock-stats/.mock-filters — those rules are now dead selectors, left in
place rather than deleted, same convention this file already follows
elsewhere for a retired look/component) ------------------------------- */
.shot-frame{background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;
box-shadow:var(--shadow-sm);overflow:hidden;width:100%}
.shot-frame img{display:block;width:100%;height:auto}
.shot-frame.is-phone{max-width:220px;margin:0 auto;border-radius:26px}
/* ---- "What you get" section ------------------------------------------- */
.gets-grid{list-style:none;padding:0;margin:0 auto;max-width:900px;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px}
.gets-grid li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.gets-grid svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--good)}
@media (max-width:640px){.gets-grid{grid-template-columns:1fr}}
/* ---- "Who it's for" honesty line --------------------------------------- */
.who-line{max-width:620px;margin:18px auto 0;text-align:center;font-size:13.5px;line-height:1.5;color:var(--muted)}
.who-line b{color:var(--ink-2);font-weight:500}