/* landing.css — Link Leads marketing page. Self-contained: index.html only.
(app.html and the SEO pages keep styles.css.)
Premium restyle (V2): brand purple accent, layered Stripe-like shadows,
full-bleed dark hero with the order builder as the elevated focal card,
purple section eyebrows, 96–112px section rhythm. */
/* ── Tokens ─────────────────────────────────────────────────────────── */
:root{
/* Neutrals — cool slate */
--bg:#ffffff; --soft:#f8f9fb; --soft2:#f1f3f6;
--ink:#0f172a; --ink2:#334155; --mut:#64748b; --line:#e2e8f0; --line2:#cbd5e1;
/* Dark surfaces */
--dark:#0b1220; --dark-2:#101a2e; --dark-line:rgba(255,255,255,.08);
--dark-tx:#e6eaf2; --dark-mut:#8b96ab;
/* Accent — brand purple */
--primary:#6c47ff; --primary-d:#5836e6; --primary-soft:#f1ecff;
--primary-lt:#a58aff; /* purple accent legible on dark */
--green:#047857; --amber:#b45309; --red:#b91c1c;
/* Shape & depth — layered, soft, neutral shadows */
--radius:10px; --radius-sm:8px;
--shadow-sm:0 1px 2px rgba(15,23,42,.05),0 1px 4px rgba(15,23,42,.05);
--shadow:0 2px 4px rgba(15,23,42,.04),0 8px 24px -8px rgba(15,23,42,.14);
--shadow-lg:0 4px 8px rgba(15,23,42,.06),0 24px 64px -16px rgba(15,23,42,.28);
--font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--wrap:1180px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .4em;letter-spacing:-.01em}
.muted{color:var(--mut)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
::selection{background:rgba(108,71,255,.16)}
section[id]{scroll-margin-top:80px}
.grad{color:var(--primary)}
.live{font-variant-numeric:tabular-nums}
/* Purple section eyebrow — the signature detail above major h2s */
.eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--primary);margin:0 0 14px;text-align:center}
/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
background:var(--primary);color:#fff;border:0;border-radius:var(--radius-sm);
padding:10px 18px;font-weight:600;font-size:14.5px;cursor:pointer;font-family:inherit;
box-shadow:0 1px 2px rgba(15,23,42,.2),inset 0 1px 0 rgba(255,255,255,.12);
transition:background-color .15s ease,transform .15s ease}
.btn:hover{background:var(--primary-d)}
.btn:active{transform:scale(.98)}
/* sheen sweep on primary buttons — pseudo-element translate, transform-only */
.btn:not(.btn-ghost):before{content:"";position:absolute;top:-2px;bottom:-2px;left:0;width:38%;
pointer-events:none;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.3),transparent);
transform:translateX(-160%) skewX(-16deg)}
.btn:not(.btn-ghost):hover:before{transform:translateX(380%) skewX(-16deg);
transition:transform .5s ease}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-lg{padding:13px 24px;font-size:15px}
.btn-sm{padding:8px 14px;font-size:13.5px}
.btn-block{width:100%}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line2);box-shadow:none}
.btn-ghost:hover{background:var(--soft)}
/* ── Nav ────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand-logo{height:36px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:500;
color:var(--ink2);white-space:nowrap}
.nav-links>a:not(.btn):hover{color:var(--ink)}
.nav-account{color:var(--ink);font-weight:600}
#navAuth{display:inline-flex;align-items:center;gap:16px;margin-left:6px}
.nav-burger{display:none;background:none;border:0;padding:8px 2px;cursor:pointer;
flex-direction:column;gap:5px}
.nav-burger span{display:block;width:21px;height:2px;background:var(--ink);border-radius:2px;
transition:transform .2s,opacity .2s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-menu{display:none}
@media(max-width:820px){
.nav-links{gap:14px}
.nav-links a:not(.btn){display:none}
.nav-burger{display:flex}
.nav-menu{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;
border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:4px 0}
.nav-menu a{display:block;padding:12px 24px;font-size:15px;font-weight:500;color:var(--ink)}
.nav-menu a:active{background:var(--soft)}
}
@media(max-width:560px){
.brand-logo{height:30px}
.wrap{padding:0 16px}
.nav-inner{height:58px}
#navAuth{gap:10px;margin-left:0}
.btn-sm{padding:8px 12px;font-size:13px}
}
/* ── Hero: full-bleed dark, edge to edge, ends at a hairline ────────── */
.hero{position:relative;background:var(--dark);border-bottom:1px solid var(--line);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
background-size:26px 26px}
/* dedicated glow layer so the breathe animation stays transform/opacity-only */
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(80% 60% at 70% 20%,rgba(108,71,255,.16),transparent 60%);
transform-origin:70% 20%;
animation:glowBreathe 10s ease-in-out infinite alternate}
@keyframes glowBreathe{from{transform:scale(1);opacity:.8}to{transform:scale(1.06);opacity:1}}
.hero-inner{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:88px 24px 0}
.hero-grid{display:grid;grid-template-columns:1fr 400px;gap:72px;align-items:center;
padding-bottom:72px}
.hero-copy{min-width:0}
.hero-eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--primary-lt);margin:0 0 18px}
.hero-copy h1{font-size:clamp(38px,5vw,54px);font-weight:700;line-height:1.08;
letter-spacing:-.025em;color:#fff;margin:0 0 18px}
.hero-copy h1 .grad{color:var(--primary-lt)}
/* animated purple gradient text — accent phrase only (V3 exception) */
@supports((-webkit-background-clip:text) or (background-clip:text)){
.hero-copy h1 .grad{
background:linear-gradient(100deg,#8f6bff,#cbb9ff,#6c47ff,#a58aff);
background-size:220% 100%;background-position:0% 50%;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
animation:gradPan 8s ease-in-out infinite alternate}
}
@keyframes gradPan{from{background-position:0% 50%}to{background-position:100% 50%}}
.hero-lede{font-size:18.5px;line-height:1.6;color:var(--dark-mut);margin:0 0 22px;max-width:52ch}
.hero-lede strong{color:var(--dark-tx);font-weight:600}
/* live inventory chip on dark */
.badge{position:relative;display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;
color:var(--dark-tx);background:rgba(255,255,255,.05);border:1px solid var(--dark-line);
padding:6px 14px;border-radius:999px;margin:0 0 22px;font-variant-numeric:tabular-nums}
.badge:before{content:"";width:7px;height:7px;border-radius:50%;background:#34d399;
box-shadow:0 0 0 3px rgba(52,211,153,.16)}
/* soft ping ring expanding off the live dot */
.badge:after{content:"";position:absolute;left:14px;top:calc(50% - 3.5px);width:7px;height:7px;
border-radius:50%;background:#34d399;pointer-events:none;
animation:livePing 2.5s cubic-bezier(0,0,.2,1) infinite}
@keyframes livePing{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.8);opacity:0}}
.sm-summary{background:rgba(255,255,255,.04);border:1px solid var(--dark-line);
border-radius:var(--radius-sm);padding:12px 16px;margin:0 0 24px;max-width:460px}
.ss-label{display:block;font-size:11px;font-weight:500;letter-spacing:.06em;
text-transform:uppercase;color:var(--dark-mut);margin-bottom:4px}
.ss-value{display:block;font-size:14.5px;font-weight:600;color:#fff;
font-variant-numeric:tabular-nums}
.sm-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.hero .btn-ghost{background:transparent;color:var(--dark-tx);
border-color:rgba(255,255,255,.18)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.06)}
.sm-note{font-size:12.5px;color:var(--dark-mut);margin:0}
/* hairline-divided stats row, directly on the dark bg */
.sm-stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;
margin-top:38px;border-top:1px solid var(--dark-line);padding-top:26px}
.sm-stat{text-align:left;padding:0 28px;position:relative}
.sm-stat:first-child{padding-left:0}
.sm-stat:not(:first-child):before{content:"";position:absolute;left:0;top:12%;bottom:12%;
width:1px;background:var(--dark-line)}
.sm-stat b{display:block;font-size:clamp(24px,2.2vw,30px);font-weight:700;color:#fff;
letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.sm-stat span{display:block;font-size:11px;color:var(--dark-mut);font-weight:500;margin-top:6px;
text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
@media(max-width:1200px){
.sm-stats{grid-template-columns:repeat(2,1fr);gap:18px 0}
.sm-stat:nth-child(odd){padding-left:0}
.sm-stat:nth-child(3):before{display:none}
}
/* ── Order-builder card — the floating light object on the dark field ─ */
.show-builder{position:relative;z-index:2;min-width:0;background:#fff;
border:1px solid var(--line);border-radius:var(--radius);padding:26px;
box-shadow:var(--shadow-lg)}
.sb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.sb-title{font-size:16px;font-weight:600}
.sb-badge{font-size:12px;font-weight:500;color:var(--primary-d);background:var(--primary-soft);
border-radius:999px;padding:4px 11px;white-space:nowrap}
.sb-fld{margin-bottom:18px}
.sb-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
font-size:13px;font-weight:500;color:var(--ink2);margin-bottom:8px}
.sb-label small{font-weight:600;font-size:12px;color:var(--primary);font-variant-numeric:tabular-nums}
.sb-search{width:100%;background:#fff;border:1px solid var(--line2);color:var(--ink);
border-radius:var(--radius-sm);padding:9px 12px;font-size:13.5px;font-family:inherit;
margin-bottom:8px;transition:border-color .15s,box-shadow .15s}
.sb-search:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.sb-states{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px;
grid-auto-rows:min-content;height:128px;overflow:auto;padding:8px;background:var(--soft);
border:1px solid var(--line);border-radius:var(--radius-sm);overscroll-behavior:contain}
.state-chip{font-family:inherit;font-size:12px;font-weight:500;text-align:center;
padding:7px 2px;border-radius:6px;cursor:pointer;border:1px solid var(--line2);
background:#fff;color:var(--ink2);user-select:none;transition:border-color .12s,background-color .12s}
.state-chip:hover{border-color:var(--primary)}
.state-chip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.state-chip.pop{animation:chipPop .18s ease}
@keyframes chipPop{from{transform:scale(.96)}to{transform:scale(1)}}
.sb-states-empty{grid-column:1/-1;font-size:12.5px;color:var(--mut);text-align:center;padding:10px 4px}
/* sliders (shared thumb/track) */
.sb-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
background:var(--soft2);margin:0;cursor:pointer}
.sb-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;
border-radius:50%;background:#fff;border:2px solid var(--primary);
box-shadow:var(--shadow-sm);cursor:grab}
.sb-range::-webkit-slider-thumb:active{cursor:grabbing}
.sb-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
background:#fff;border:2px solid var(--primary);box-shadow:var(--shadow-sm);cursor:grab}
.sb-solo{display:block;margin-top:6px}
/* dual-handle age slider: two overlaid native ranges over one painted track */
.sb-dual{position:relative;height:28px;margin-top:4px}
.sb-dual .sb-range{position:absolute;left:0;top:50%;transform:translateY(-50%);height:28px;
background:transparent;pointer-events:none}
.sb-dual .sb-range::-webkit-slider-thumb{pointer-events:auto}
.sb-dual .sb-range::-moz-range-thumb{pointer-events:auto}
.sb-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:6px;
border-radius:999px;background:var(--soft2)}
.sb-track i{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--primary)}
.sb-price{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--line);
padding-top:14px;margin-top:2px}
.sb-price small{font-size:11.5px;font-weight:500;color:var(--mut)}
.sb-price b{font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.sb-price b.bump{animation:bump .3s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.02)}100%{transform:scale(1)}}
/* trust strip at the hero's bottom edge — muted on dark, small */
.trustbar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
border-top:1px solid var(--dark-line);padding:16px 0 18px;margin:0}
.tb-item{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;
color:var(--dark-mut);padding:1px 16px;line-height:1;white-space:nowrap}
.tb-item:not(:last-child){border-right:1px solid var(--dark-line)}
.tb-item svg{width:15px;height:15px;flex:none;fill:none;stroke:#34d399;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1060px){
.hero-grid{grid-template-columns:1fr 360px;gap:44px}
}
@media(max-width:900px){
.hero-inner{padding:56px 20px 0}
.hero-grid{grid-template-columns:1fr;gap:36px;padding-bottom:48px}
.hero-copy{text-align:center}
.hero-lede{margin-left:auto;margin-right:auto}
.sm-summary{display:none}
.sm-cta{justify-content:center}
.sm-cta .btn{flex:1 1 100%}
.sm-note{margin-bottom:2px}
.sm-stats{padding-top:22px;margin-top:28px}
.sm-stat,.sm-stat:first-child,.sm-stat:nth-child(odd){padding:0 8px;min-width:0;text-align:center}
.sm-stat span{white-space:normal}
.trustbar{border-top:1px solid var(--dark-line);gap:10px 18px;padding:14px 0 16px}
.tb-item{padding:0;border-right:0!important}
}
/* ── Hero entrance stagger — gated on .js-loaded so no-JS visitors see
everything; landing.js adds the class before first paint ─────────── */
@keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes heroCard{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.js-loaded .hero-eyebrow,
.js-loaded .hero-copy h1,
.js-loaded .hero-lede,
.js-loaded .hero .badge,
.js-loaded .sm-summary,
.js-loaded .sm-cta,
.js-loaded .sm-note,
.js-loaded .sm-stats,
.js-loaded .trustbar{animation:heroRise .6s cubic-bezier(.16,1,.3,1) both}
.js-loaded .hero-copy h1{animation-delay:.07s}
.js-loaded .hero-lede{animation-delay:.14s}
.js-loaded .hero .badge,
.js-loaded .sm-summary{animation-delay:.21s}
.js-loaded .sm-cta,
.js-loaded .sm-note{animation-delay:.28s}
.js-loaded .sm-stats{animation-delay:.35s}
.js-loaded .trustbar{animation-delay:.45s}
/* builder card enters last: larger rise; its shadow blooms in with the fade */
.js-loaded .show-builder{animation:heroCard .7s cubic-bezier(.16,1,.3,1) .32s both}
/* ── Logo band → infinite marquee (pure CSS; duplicate rows are aria-hidden) ── */
.logoband{padding:64px 0 0}
.lb-note{display:block;font-size:12px;font-weight:500;letter-spacing:.08em;
text-transform:uppercase;color:var(--mut);margin:0 0 20px;text-align:center}
.lb-marquee{overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lb-track{display:flex;width:max-content;animation:marquee 28s linear infinite}
.lb-marquee:hover .lb-track{animation-play-state:paused}
.lb-row{display:flex;flex:none;gap:14px;padding-right:14px}
@keyframes marquee{to{transform:translateX(-50%)}}
.stack-chip{display:flex;align-items:center;justify-content:center;gap:11px;min-height:62px;
width:220px;flex:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:14px 16px;cursor:pointer;box-shadow:var(--shadow-sm);
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.stack-chip:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--shadow)}
.sc-logo{display:none;max-height:32px;max-width:100%;object-fit:contain}
.stack-chip.has-logo .sc-logo{display:block}
.stack-chip.has-logo .sc-fallback{display:none}
.sc-fallback{display:flex;align-items:center;gap:10px}
.sc-name{font-weight:600;font-size:14px}
@media(max-width:720px){.stack-chip{width:180px;min-height:56px}}
/* ── Live sample sheet ──────────────────────────────────────────────── */
.sheet-sec{padding:56px 0 0}
.sheet{max-width:1000px;margin:0 auto;background:#fff;border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.sheet-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:12px 18px;border-bottom:1px solid var(--line);background:var(--soft)}
.sheet-name{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;
color:var(--ink2);font-family:var(--mono)}
.sheet-name svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--green);stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.sheet-meta{font-size:12px;color:var(--mut);font-weight:500;white-space:nowrap}
.sheet-scroll{max-height:400px;overflow-y:auto;overscroll-behavior:contain}
.sheet-scroll::-webkit-scrollbar{width:10px}
.sheet-scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:2.5px solid #fff}
.sheet-tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px}
.sheet-tbl th{position:sticky;top:0;z-index:2;background:var(--soft);text-align:left;
font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:500;
padding:10px 14px;box-shadow:inset 0 -1px 0 var(--line)}
.sheet-tbl td{padding:9px 14px;border-bottom:1px solid var(--soft2);color:var(--ink2);
white-space:nowrap;font-variant-numeric:tabular-nums}
.sheet-tbl tbody tr:hover td{background:var(--soft)}
.sheet-tbl .num{color:var(--line2);font-size:11px;width:40px;text-align:right;padding-right:10px;
border-right:1px solid var(--soft2)}
.sheet-tbl .phone{color:var(--primary-d);font-weight:600}
.sheet-loading{padding:36px;text-align:center;color:var(--mut);font-size:13.5px}
.sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:13px 18px;border-top:1px solid var(--line);background:var(--soft)}
.sheet-foot small{color:var(--mut);font-size:12.5px}
.sheet-foot-cta{display:flex;gap:9px;flex-wrap:wrap}
@media(max-width:640px){
.sheet-bar{flex-wrap:wrap}
.sheet-scroll{max-height:340px}
.sheet-foot{justify-content:center;text-align:center}
}
/* ── Sections — 96–112px rhythm ─────────────────────────────────────── */
.section{padding:104px 0}
.section h2{font-size:clamp(28px,3vw,34px);font-weight:700;letter-spacing:-.02em;
text-align:center;margin:0 0 16px}
.sub{color:var(--mut);text-align:center;margin:-4px auto 48px;max-width:640px;
font-size:16.5px;line-height:1.6}
.section.alt{background:var(--soft)}
@media(max-width:720px){.section{padding:60px 0}.sub{margin-bottom:36px}}
/* quality cards */
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:26px 24px;box-shadow:var(--shadow)}
.qico{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-sm);
margin-bottom:16px;background:var(--primary-soft);color:var(--primary)}
.qico svg{width:20px;height:20px}
.qcard h3{font-size:16px;font-weight:600;margin-bottom:8px}
.qcard p{color:var(--mut);font-size:14px;margin:0;line-height:1.6}
@media(max-width:980px){.qgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.qgrid{grid-template-columns:1fr}}
/* verticals */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;
box-shadow:var(--shadow);display:flex;flex-direction:column}
.vico{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-sm);
margin-bottom:16px;background:color-mix(in srgb,var(--c) 9%,#fff);color:var(--c)}
.vico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.vcard h3{font-size:16px;font-weight:600;margin-bottom:8px}
.vcard p{color:var(--mut);font-size:14px;margin:0 0 14px;line-height:1.6}
.vcard-cta{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--primary);
transition:transform .2s ease,color .15s ease}
.vcard-cta:hover{color:var(--primary-d)}
.vcard:hover .vcard-cta{transform:translateX(3px)}
@media(max-width:980px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.vgrid{grid-template-columns:1fr}}
/* ── ROI band ───────────────────────────────────────────────────────── */
.roi-band{background:var(--bg)}
.roi-flow{display:flex;align-items:stretch;justify-content:center;gap:16px;flex-wrap:wrap}
.roi-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:24px 26px;text-align:center;min-width:172px;box-shadow:var(--shadow);
display:flex;flex-direction:column;justify-content:center}
.roi-n{font-size:30px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
font-variant-numeric:tabular-nums}
.roi-l{font-size:13.5px;font-weight:600;margin-top:5px;color:var(--ink2)}
.roi-s{font-size:12px;color:var(--mut);margin-top:3px}
.roi-op{align-self:center;font-size:20px;font-weight:600;color:var(--mut)}
.roi-card.win{border-color:#bbe3d3}
.roi-card.win .roi-n{color:var(--green)}
.roi-card.big{background:var(--primary);border-color:var(--primary)}
.roi-card.big .roi-n{color:#fff}
.roi-card.big .roi-l{color:#e6ddff}
.roi-card.big .roi-s{color:#cabaff}
.roi-kicker{text-align:center;margin:30px auto 0;font-size:15px;color:var(--ink2);max-width:640px}
.roi-kicker b{color:var(--ink)}
.fineprint{text-align:center;color:var(--mut);font-size:12px;max-width:640px;margin:14px auto 0}
@media(max-width:760px){.roi-op{display:none}.roi-flow{display:grid;grid-template-columns:1fr 1fr}.roi-card{min-width:0}}
@media(max-width:460px){.roi-flow{grid-template-columns:1fr}}
/* ── Why us / split ─────────────────────────────────────────────────── */
.splitrow{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;margin-top:32px}
.split-list{display:flex;flex-direction:column;gap:12px}
.sl-item{position:relative;padding:16px 18px 16px 48px;background:#fff;border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow-sm);font-size:14.5px;color:var(--ink2);line-height:1.6}
.sl-item b{color:var(--ink);font-weight:600}
.sl-item:before{content:"";position:absolute;left:16px;top:19px;width:18px;height:18px;
border-radius:6px;
background:var(--primary-soft) url('data:image/svg+xml;utf8,') center/10px no-repeat}
.cta-card{position:sticky;top:92px;color:var(--dark-tx);
background:radial-gradient(120% 80% at 80% 0%,rgba(108,71,255,.16),transparent 60%),var(--dark);
border:1px solid var(--dark-line);border-radius:var(--radius);padding:30px 28px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow)}
.cta-card h3{color:#fff;font-size:18px;font-weight:600;margin-bottom:8px}
.cta-card .muted{color:var(--dark-mut);margin:0 0 20px;font-size:14px}
.cta-card .btn-ghost{background:transparent;color:var(--dark-tx);border-color:rgba(255,255,255,.18)}
.cta-card .btn-ghost:hover{background:rgba(255,255,255,.06)}
@media(max-width:900px){.splitrow{grid-template-columns:1fr}.cta-card{position:static}}
/* ── Reviews ────────────────────────────────────────────────────────── */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review{perspective:1400px;cursor:pointer;min-height:280px;outline-offset:4px}
.review-inner{position:relative;width:100%;height:100%;min-height:280px;
transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.8,.3,1)}
.review.flipped .review-inner{transform:rotateY(180deg)}
.review-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
padding:20px;display:flex;flex-direction:column}
.review-face.front{z-index:1}
.review-face.back{transform:rotateY(180deg);padding:12px}
.bubbles{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.bubble{margin:0;background:var(--soft2);color:var(--ink);font-size:13.5px;line-height:1.5;
padding:10px 14px;border-radius:10px 10px 10px 4px;max-width:95%}
.bubble b{font-weight:600;color:var(--primary-d)}
.rv-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;
font-size:12px;color:var(--mut)}
.rv-meta{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink2)}
.rv-check{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
background:#e3f2ec;color:var(--green);font-size:10px;font-weight:700}
.flip-hint{color:var(--primary);font-weight:500}
.shot{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:var(--radius-sm);
flex:1;min-height:0;border:1px solid var(--line)}
.shot-missing{display:none;flex:1;align-items:center;justify-content:center;text-align:center;
background:var(--soft);border-radius:var(--radius-sm);color:var(--mut);font-size:13px}
.review-face.back .rv-foot{padding:10px 8px 0}
@media(max-width:900px){.reviews{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
/* ── Steps ──────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:28px 26px;box-shadow:var(--shadow)}
.step .num{display:inline-grid;place-items:center;width:34px;height:34px;
border-radius:var(--radius-sm);margin-bottom:14px;background:var(--primary-soft);
color:var(--primary);font-weight:600;font-size:15px}
.step h3{font-size:16px;font-weight:600;margin-bottom:8px}
.step p{color:var(--mut);font-size:14px;margin:0;line-height:1.6}
@media(max-width:780px){.steps{grid-template-columns:1fr;max-width:480px;margin:24px auto 0}}
/* ── FAQ ────────────────────────────────────────────────────────────── */
details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
details[open]{border-color:var(--line2)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
gap:16px;padding:16px 20px;font-weight:600;font-size:15px}
summary::-webkit-details-marker{display:none}
summary:after{content:"";flex:none;width:20px;height:20px;border-radius:6px;
background:var(--soft2);
background-image:url('data:image/svg+xml;utf8,');
background-size:11px;background-position:center;background-repeat:no-repeat;transition:transform .2s ease}
details[open] summary:after{transform:rotate(45deg)}
details p{margin:0;padding:0 20px 18px;color:var(--mut);font-size:14.5px;line-height:1.65;max-width:68ch}
details p strong{color:var(--ink2)}
/* ── Compliance strip ───────────────────────────────────────────────── */
.compliance-strip{max-width:var(--wrap);margin:0 auto 72px;background:#fffbeb;
border:1px solid #f2e3b8;border-left:3px solid var(--amber);border-radius:var(--radius-sm);
padding:16px 20px;font-size:13.5px;color:#6b4e0e;line-height:1.6}
.compliance-strip strong{color:#523c09}
/* ── Footer ─────────────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);padding:60px 0 52px;background:var(--soft)}
.footer-inner{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.footer .brand{margin-bottom:8px}
.brand-logo-footer{height:32px;margin-bottom:10px}
.footer-links{font-size:13px;line-height:2;margin:8px 0 0;color:var(--mut)}
.footer-links a{color:var(--ink2);font-weight:500}
.footer-links a:hover{color:var(--primary)}
.disclaimer{color:var(--mut);font-size:12px;line-height:1.7;margin:0}
@media(max-width:680px){.footer-inner{grid-template-columns:1fr}}
/* ── Reveal animations (landing.js adds .reveal/.in; stagger via JS
transition-delay, cleared after entrance) ─────────────────────────── */
.reveal{opacity:0;transform:translateY(14px);
transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
/* Full kill-switch: no entrance/ambient/marquee motion, everything visible */
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
.hero:after{transform:none;opacity:1}
.lb-marquee{-webkit-mask-image:none;mask-image:none}
.lb-track{width:auto;transform:none}
.lb-row{flex:1 1 auto;flex-wrap:wrap;justify-content:center;padding-right:0}
.lb-row[aria-hidden="true"]{display:none}
.btn:not(.btn-ghost):before{display:none}
.btn:active,.vcard:hover .vcard-cta,.stack-chip:hover{transform:none}
}
/* ── Hover lifts (after .reveal so lift transforms win the cascade) ── */
.qcard,.vcard,.step{transition:transform .15s ease,box-shadow .15s ease}
.qcard.reveal,.vcard.reveal,.step.reveal{
transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),
box-shadow .15s ease}
.qcard:hover,.vcard:hover,.step:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
/* ── Modals ─────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
padding:20px;background:rgba(15,23,42,.45)}
.modal-card{position:relative;background:#fff;border:1px solid var(--line);
border-radius:var(--radius);width:100%;max-width:420px;box-shadow:var(--shadow-lg);
max-height:92vh;overflow:auto;animation:modalIn .18s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:12px;right:12px;z-index:5;width:32px;height:32px;border:0;
border-radius:var(--radius-sm);background:transparent;color:var(--mut);font-size:20px;
line-height:1;cursor:pointer;transition:background-color .15s,color .15s}
.modal-x:hover{background:var(--soft2);color:var(--ink)}
/* auth: two-panel card */
.auth-card{max-width:820px;display:grid;grid-template-columns:320px 1fr;overflow:hidden;padding:0}
.auth-aside{color:var(--dark-tx);padding:32px 28px;display:flex;flex-direction:column;
background:radial-gradient(100% 70% at 80% 0%,rgba(108,71,255,.16),transparent 60%),var(--dark);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.auth-brand{font-weight:700;font-size:19px;color:#fff;margin-bottom:30px;letter-spacing:-.01em}
.auth-brand span{color:var(--dark-mut)}
.auth-aside-h{font-size:18px;font-weight:600;color:#fff;margin-bottom:18px;line-height:1.35}
.auth-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;
font-size:13.5px;color:var(--dark-mut);line-height:1.5}
.auth-points svg{width:14px;height:14px;flex:none;margin-right:9px;vertical-align:-2px;
fill:none;stroke:#34d399;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.auth-aside-body{flex:none}
.auth-aside-foot{margin-top:auto;padding-top:26px;font-size:11.5px;color:var(--dark-mut)}
.auth-main{padding:34px 32px}
.auth-main h3{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.auth-main .muted{color:var(--mut);font-size:14px;margin:0 0 20px}
.fld{display:block;margin-bottom:14px}
.fld span{display:block;font-size:13px;font-weight:500;color:var(--ink2);margin-bottom:6px}
.fld input{width:100%;border:1px solid var(--line2);border-radius:var(--radius-sm);
padding:10px 13px;font:inherit;font-size:14.5px;background:#fff;
transition:border-color .15s,box-shadow .15s}
.fld input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.err{background:#fef2f2;border:1px solid #fecaca;color:var(--red);font-size:13px;font-weight:500;
border-radius:var(--radius-sm);padding:10px 13px;margin-bottom:14px}
.auth-perk{font-size:12.5px;color:var(--mut);text-align:center;margin:12px 0 0}
.switch{font-size:13.5px;color:var(--mut);text-align:center;margin:16px 0 0}
.switch a{color:var(--primary);font-weight:600}
@media(max-width:760px){
.auth-card{grid-template-columns:1fr;max-width:440px}
.auth-aside{display:none}
.auth-main{padding:30px 24px}
}
/* promo: quiet first-order notice */
.promo-card{max-width:400px;padding:26px 26px 22px;text-align:left}
.promo-card h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px;padding-right:28px}
.promo-card .muted{font-size:14px;color:var(--ink2);margin:0 0 20px;line-height:1.6}
.promo-code{display:inline-block;font-family:var(--mono);font-size:13px;font-weight:600;
color:var(--ink);background:var(--soft);border:1px solid var(--line2);
border-radius:6px;padding:1px 8px;letter-spacing:.04em}
.promo-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px}
.promo-actions a{font-size:13.5px;font-weight:500;color:var(--mut)}
.promo-actions a:hover{color:var(--ink)}
/* ── SAVE47 promo v2: dark AI-startup card with ambient motion ─────────────── */
.promo-v2{max-width:480px;width:calc(100vw - 32px);padding:44px 36px 34px;text-align:center;
background:var(--dark);border:1px solid rgba(255,255,255,.1);border-radius:16px;
color:var(--dark-tx);overflow:hidden;
box-shadow:0 24px 80px -16px rgba(15,23,42,.55),0 8px 40px -8px rgba(108,71,255,.35)}
.promo-v2:before{content:"";position:absolute;inset:-40%;pointer-events:none;
background:radial-gradient(50% 40% at 50% 30%,rgba(108,71,255,.38),transparent 65%);
animation:pv2glow 7s ease-in-out infinite alternate}
.promo-v2>:not(.pv2-x){position:relative}
.pv2-x{position:absolute;top:14px;right:14px}
@keyframes pv2glow{from{transform:scale(1);opacity:.75}to{transform:scale(1.15);opacity:1}}
.pv2-x{background:rgba(255,255,255,.08);color:var(--dark-mut);border:0}
.pv2-x:hover{background:rgba(255,255,255,.16);color:#fff}
.pv2-eyebrow{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:#a58aff}
.pv2-pct{font-size:clamp(56px,10vw,84px);font-weight:800;letter-spacing:-.03em;line-height:1;
margin:0 0 10px;background:linear-gradient(100deg,#a58aff 0%,#6c47ff 45%,#a58aff 90%);
background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
animation:pv2pan 5s ease-in-out infinite alternate}
@keyframes pv2pan{from{background-position:0% 50%}to{background-position:100% 50%}}
.promo-v2 h3{margin:0 0 10px;font-size:22px;font-weight:700;letter-spacing:-.01em;color:#fff}
.pv2-sub{margin:0 auto 24px;max-width:34ch;font-size:15px;line-height:1.6;color:var(--dark-mut)}
.pv2-code{font-family:var(--mono);font-size:14px;font-weight:700;color:#fff;cursor:pointer;
background:rgba(108,71,255,.22);border:1px solid rgba(165,138,255,.5);border-radius:6px;
padding:2px 10px;letter-spacing:.06em;transition:background .15s}
.pv2-code:hover{background:rgba(108,71,255,.38)}
.pv2-cta{width:100%;font-size:16.5px;padding:15px 24px;
box-shadow:0 6px 24px -6px rgba(108,71,255,.55),inset 0 1px 0 rgba(255,255,255,.15)}
.pv2-dismiss{display:inline-block;margin-top:14px;font-size:13px;color:var(--dark-mut)}
.pv2-dismiss:hover{color:#fff}
/* entrance: backdrop fade + card rise/scale, expo-out */
#promoModal:not([hidden]){animation:pv2fade .3s ease}
#promoModal:not([hidden]) .promo-v2{animation:pv2in .6s cubic-bezier(.16,1,.3,1)}
@keyframes pv2fade{from{opacity:0}to{opacity:1}}
@keyframes pv2in{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:520px){.promo-v2{padding:36px 22px 28px}}
@media(prefers-reduced-motion:reduce){
.promo-v2:before,.pv2-pct{animation:none}
#promoModal:not([hidden]),#promoModal:not([hidden]) .promo-v2{animation:none}
}