/* Selling pages (home, pricing, how it works, enterprise). WS1, 24 September 2026.
   Built on the shell's tokens: --ra-lead does sun's four jobs here, and the product
   views are HTML cards with an ink outline and the hard shadow. Phone first. */

/* ── hero ─────────────────────────────────────────────────────── */
.hero{padding-block:clamp(32px,6vw,80px) clamp(40px,7vw,96px)}
.hero-grid{display:grid;gap:var(--s-10);align-items:center}
.hero h1{margin:var(--s-3) 0 0}
.hero h1 mark,.band h2 mark{white-space:nowrap}
.hero .lede{margin-top:var(--s-5);max-width:34ch}
.hero-note{margin-top:var(--s-3);font-size:var(--d-fs-sm);color:var(--d-muted)}
@media (min-width:960px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s-16)}}

/* the one field: stacks full width on a phone */
.signup-form{display:grid;gap:var(--s-3);margin-top:var(--s-8);max-width:520px}
.signup-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.signup-form input[type=text]{width:100%;min-height:52px;padding:0 var(--s-4);font:inherit;font-size:17px;color:var(--d-ink);background:var(--d-white);border:var(--d-border);border-radius:var(--d-radius-sm)}
.signup-form input[type=text]::placeholder{color:var(--d-muted)}
.signup-form input[type=text]:focus{outline:none;box-shadow:0 0 0 3px var(--ra-lead)}
.signup-form .btn{width:100%}
@media (min-width:560px){.signup-form{grid-template-columns:minmax(0,1fr) auto}.signup-form .btn{width:auto}}

/* ── product window: every product view sits in one ───────────── */
.pv{margin:0;padding:0;background:var(--d-white);border:var(--d-border);border-radius:var(--d-radius);box-shadow:var(--d-shadow);overflow:hidden;font-size:var(--d-fs-sm);color:var(--d-ink-2)}
.pv-bar{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--d-line);background:var(--d-cream)}
.pv-bar b{font-weight:600;color:var(--d-ink);font-size:13px}
.pv-bar span{margin-left:auto;font-size:12px;color:var(--d-muted)}
.pv-body{padding:var(--s-4);display:grid;gap:var(--s-3)}
.pv-cap{margin-top:var(--s-3);font-size:13px;color:var(--d-muted)}

/* an affiliate card, as Discover shows one */
.aff{border:1px solid var(--d-line);border-radius:12px;padding:var(--s-3) var(--s-4);display:grid;gap:6px;background:var(--d-white)}
.aff-top{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.aff-top strong{color:var(--d-ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aff-ch{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--d-pill);border:1px solid var(--d-ink);font-size:11.5px;font-weight:600;color:var(--d-ink)}
.aff-ch.yt{background:var(--d-coral-tint)} .aff-ch.web{background:var(--d-mint-tint)} .aff-ch.pod{background:var(--d-lilac-tint)}
.aff-title{color:var(--d-ink-2);line-height:1.45;overflow-wrap:anywhere}
.aff-title a{color:inherit}
.aff-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--d-muted)}
.aff-mail{display:flex;align-items:center;gap:var(--s-2);font-size:12.5px}
.blur{display:inline-block;height:12px;width:140px;border-radius:4px;background:var(--d-line);filter:blur(1.5px)}
.mini-btn{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--d-pill);border:1.5px solid var(--d-ink);background:var(--d-white);box-shadow:var(--d-shadow-sm);font-size:12px;font-weight:600;color:var(--d-ink);white-space:nowrap}
.mini-btn.lead{background:var(--ra-lead)}

/* inside the product views: the app's own pieces, drawn small */
.pv-step{font-size:12px;color:var(--d-muted);margin:0}
.pv-h{font-family:var(--d-font-display);font-weight:800;font-size:19px;color:var(--d-ink);letter-spacing:-.02em;line-height:1.15;margin:0}
.pv-sub{margin:0;color:var(--d-ink-2)}
.pv-label{margin:6px 0 0;font-size:12px;font-weight:600;color:var(--d-ink);text-transform:uppercase;letter-spacing:.06em}
.pv-label small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--d-muted);margin-left:6px}
.pv-note{margin:0;font-size:12.5px;color:var(--d-green);font-weight:600}
.pv-group{display:grid;gap:var(--s-2)}
.picks{display:flex;flex-wrap:wrap;gap:6px}
.comp{display:inline-flex;align-items:baseline;gap:6px;padding:5px 10px;border-radius:var(--d-pill);border:1.5px solid var(--d-ink);background:var(--d-white);font-size:12.5px}
.comp.on{background:var(--ra-lead-tint)}
.comp b{font-weight:600;color:var(--d-ink)} .comp small{color:var(--d-muted);font-size:11.5px}
.pv-status{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:12.5px;color:var(--d-muted)}
.pv-status li{position:relative;padding-left:20px}
.pv-status li::before{content:"";position:absolute;left:2px;top:5px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--d-muted)}
.pv-status li.done{color:var(--d-ink-2)}
.pv-status li.done::before{background:var(--d-mint);border-color:var(--d-ink)}
.chip-s{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--d-pill);border:1px solid var(--d-line);background:var(--d-cream);font-size:11.5px;font-weight:600;color:var(--d-ink-2);white-space:nowrap}
.chip-s.ok{background:var(--d-mint-tint);border-color:var(--d-ink);color:var(--d-ink)}
.evidence{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-2)}
.evidence li{display:grid;gap:2px;padding:var(--s-2) var(--s-3);border:1px solid var(--d-line);border-radius:10px;line-height:1.4;overflow-wrap:anywhere}
.evidence a{color:var(--d-ink)}
.evidence small{color:var(--d-muted);font-size:12px}
.kind{justify-self:start;font-size:11px;font-weight:600;padding:1px 7px;border-radius:var(--d-pill);background:var(--d-cream-deep);color:var(--d-ink)}
.names{justify-self:start;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:var(--d-pill);background:var(--ra-lead-tint);color:var(--d-ink)}
.pv-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pv-radio{position:relative;padding:8px 10px 8px 32px;border:1px solid var(--d-line);border-radius:10px;color:var(--d-ink-2)}
.pv-radio::before{content:"";position:absolute;left:10px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;border:1.5px solid var(--d-ink);background:var(--d-white)}
.pv-radio.on{border-color:var(--d-ink);color:var(--d-ink)}
.pv-radio.on::before{background:radial-gradient(circle,var(--d-ink) 0 3.5px,var(--d-white) 4px)}
.pv-field{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:8px 10px;border:1.5px solid var(--d-ink);border-radius:var(--d-radius-sm);background:var(--d-white)}
.pv-field span{color:var(--d-muted)} .pv-field b{color:var(--d-ink);font-variant-numeric:tabular-nums}
.mail{border:1px solid var(--d-line);border-radius:10px;padding:var(--s-3);display:grid;gap:6px;background:var(--d-cream);line-height:1.5}
.mail p{margin:0}
.mail-subj{font-weight:600;color:var(--d-ink)}
.mail-from{font-size:12px;color:var(--d-muted)}
.threads{display:grid;gap:4px}
.thread{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--s-2);padding:8px 10px;border:1px solid var(--d-line);border-radius:10px}
.thread.on{border-color:var(--d-ink);background:var(--ra-lead-tint)}
.thread b{color:var(--d-ink);font-weight:600} .thread small{grid-column:1;color:var(--d-muted);font-size:12px}
.st{grid-row:1/3;grid-column:2;align-self:center;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--d-pill);border:1px solid var(--d-ink);color:var(--d-ink)}
.st-reply{background:var(--d-mint-tint)} .st-ooo{background:var(--d-cream-deep);border-color:var(--d-line)} .st-bounce{background:var(--d-coral-tint)}
.terms-card{border:1.5px solid var(--d-ink);border-radius:12px;padding:var(--s-3);background:var(--ra-lead-tint)}
.terms-card p{margin:0}
.terms-card p+p{margin-top:4px;color:var(--d-ink);font-weight:600}
.versions{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:12.5px;color:var(--d-ink-2);font-variant-numeric:tabular-nums}
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:var(--s-2);overflow-x:auto;padding-bottom:4px}
.col{background:var(--d-cream);border-radius:10px;padding:var(--s-2);display:grid;gap:6px;align-content:start}
.col-h{margin:0;font-size:12px;font-weight:600;color:var(--d-ink);display:flex;justify-content:space-between}
.col-h span{font-weight:600;padding:0 7px;border-radius:var(--d-pill);background:var(--d-white);border:1px solid var(--d-line)}
.pcard{background:var(--d-white);border:1px solid var(--d-line);border-radius:8px;padding:6px 8px;font-size:12.5px;font-weight:600;color:var(--d-ink);display:grid}
.pcard small{font-weight:400;color:var(--d-muted);font-size:11.5px}
.pcard.hot{border-color:var(--d-ink);background:var(--d-mint-tint)}
.pcard.done{border-color:var(--d-ink);background:var(--ra-lead-tint)}

/* ── sections ─────────────────────────────────────────────────── */
.sec-head{max-width:640px}
.sec-head h2{margin-top:var(--s-3)}
.sec-head p{margin-top:var(--s-4)}
.outcomes{display:grid;gap:var(--s-4);margin-top:var(--s-8)}
.outcome{background:var(--d-white);border:1px solid var(--d-line);border-radius:var(--d-radius);padding:var(--s-6)}
.outcome h3{font-family:var(--d-font-display);font-size:var(--d-fs-h3);font-weight:700;color:var(--d-ink);letter-spacing:-.02em;margin:0 0 var(--s-2)}
@media (min-width:760px){.outcomes{grid-template-columns:repeat(3,minmax(0,1fr))}}

.step>*,.hero-grid>*,.proof>*,.ent>*{min-width:0}
.steps{display:grid;gap:clamp(40px,6vw,72px);margin-top:var(--s-10);counter-reset:step}
.step{display:grid;gap:var(--s-6);align-items:center}
.step-copy h3{font-family:var(--d-font-display);font-size:var(--d-fs-md);font-weight:700;letter-spacing:-.02em;color:var(--d-ink);line-height:1.1;margin:var(--s-2) 0 var(--s-3)}
.step-copy p+p{margin-top:var(--s-3)}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ra-lead-tint);border:1.5px solid var(--d-ink);font-weight:700;color:var(--d-ink);font-size:14px}
@media (min-width:900px){.step{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-16)}.step:nth-child(even) .step-copy{order:2}}

/* stat cards: the lead tint, real numbers only */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-8)}
.stat{background:var(--ra-lead-tint);border:1px solid var(--d-line);border-radius:var(--d-radius-lg);padding:var(--s-5)}
.stat b{display:block;font-family:var(--d-font-display);font-weight:800;font-size:clamp(32px,6vw,48px);line-height:1;color:var(--d-ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:var(--s-2);font-size:13px;color:var(--d-ink-2);line-height:1.4}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* proof beside the pipeline */
.proof{display:grid;gap:var(--s-8);align-items:center;margin-top:var(--s-8)}
.quote{margin:0}
.quote p{font-family:var(--d-font-display);font-weight:700;font-size:var(--d-fs-md);line-height:1.2;letter-spacing:-.02em;color:var(--d-ink);text-wrap:balance}
.quote footer{margin-top:var(--s-4);font-size:var(--d-fs-sm);color:var(--d-muted)}
.quote footer b{color:var(--d-ink);font-weight:600}
@media (min-width:900px){.proof{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}

/* ── video slot: hidden until a file exists ───────────────────── */
.video{position:relative;margin-top:var(--s-8);border:var(--d-border);border-radius:var(--d-radius);box-shadow:var(--d-shadow);overflow:hidden;aspect-ratio:16/9;background:var(--d-ink)}
.video[hidden]{display:none}
.video img,.video video{width:100%;height:100%;object-fit:cover}
.video button{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:var(--ra-lead);border:var(--d-border);box-shadow:var(--d-shadow);cursor:pointer}
.video button::after{content:"";position:absolute;left:30px;top:24px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--d-ink)}

/* ── pricing ──────────────────────────────────────────────────── */
.trial-box{display:grid;gap:var(--s-4);background:var(--ra-lead-tint);border:1px solid var(--d-line);border-radius:var(--d-radius-lg);padding:var(--s-6);margin-top:var(--s-8)}
.trial-box h2{font-family:var(--d-font-display);font-size:24px;font-weight:800;color:var(--d-ink);letter-spacing:-.02em;margin:0}
.trial-box ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2)}
@media (min-width:760px){.trial-box{grid-template-columns:minmax(0,1fr) auto;align-items:center}.trial-box .btn{justify-self:end}}

.cycle{display:inline-flex;gap:4px;padding:4px;margin-top:var(--s-10);background:var(--d-white);border:var(--d-border);border-radius:var(--d-pill)}
.cycle input{position:absolute;opacity:0;pointer-events:none}
.cycle label{display:inline-flex;align-items:center;gap:var(--s-2);min-height:40px;padding:0 18px;border-radius:var(--d-pill);font-weight:600;font-size:15px;color:var(--d-ink);cursor:pointer}
.cycle label em{font-style:normal;color:var(--d-ink);font-size:12px;padding:2px 8px;border-radius:var(--d-pill);background:var(--ra-lead-tint);border:1px solid var(--d-ink)}
.cycle input:checked+label{background:var(--d-ink);color:var(--d-cream)}
.cycle input:focus-visible+label{outline:2px solid var(--d-ink);outline-offset:3px}

.plans{display:grid;gap:var(--s-5);margin-top:var(--s-6)}
.plan{position:relative;background:var(--d-white);border:1px solid var(--d-line);border-radius:var(--d-radius);padding:var(--s-6);display:grid;gap:var(--s-4);align-content:start}
.plan.pick{border:var(--d-border)}
.plan-tag{position:absolute;top:-13px;left:var(--s-6);display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--d-pill);border:1.5px solid var(--d-ink);background:var(--ra-lead);font-size:12.5px;font-weight:600;color:var(--d-ink)}
.plan h3{font-family:var(--d-font-display);font-weight:800;font-size:24px;color:var(--d-ink);margin:0;letter-spacing:-.02em}
.plan .for{color:var(--d-muted);font-size:var(--d-fs-sm);margin-top:-8px}
.price b{font-family:var(--d-font-display);font-weight:800;font-size:44px;line-height:1;color:var(--d-ink);letter-spacing:-.03em}
.price small{font-size:var(--d-fs-sm);color:var(--d-muted);margin-left:4px}
.price .sub{display:block;margin-top:6px;font-size:13px;color:var(--d-ink-2)}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-2)}
.plan li{position:relative;padding-left:26px;line-height:1.45}
.plan li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;background-color:var(--d-ink);-webkit-mask:var(--tick) no-repeat center/contain;mask:var(--tick) no-repeat center/contain}
.plan .btn{width:100%}
.plan .terms{font-size:13px;color:var(--d-muted);text-align:center;margin-top:-6px}
.price .y{display:none}
.pricing:has(#cycle-year:checked) .price .m{display:none}
.pricing:has(#cycle-year:checked) .price b.y{display:inline}
.pricing:has(#cycle-year:checked) .price .sub.y{display:block}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.refund{margin-top:var(--s-6);text-align:center;color:var(--d-ink-2)}

/* comparison table: grouped by job, scrolls in its own box */
.table-wrap{margin-top:var(--s-8);overflow-x:auto;border:var(--d-border);border-radius:var(--d-radius);background:var(--d-white)}
.compare{width:100%;min-width:620px;border-collapse:collapse;font-size:var(--d-fs-sm)}
.compare th,.compare td{padding:12px 14px;border-bottom:1px solid var(--d-line);text-align:center;vertical-align:middle}
.compare th:first-child,.compare td:first-child{text-align:left;position:sticky;left:0;background:var(--d-white);min-width:190px}
.compare thead th{background:var(--d-cream-deep);font-weight:600;color:var(--d-ink)}
.compare thead th:first-child{background:var(--d-cream-deep)}
.compare tbody th[colspan]{background:var(--d-cream);text-align:left;font-family:var(--d-font-display);font-weight:700;color:var(--d-ink);font-size:15px}
.compare td{font-variant-numeric:tabular-nums;color:var(--d-ink)}
.compare .yes{display:inline-block;width:16px;height:16px;background-color:var(--d-ink);-webkit-mask:var(--tick) no-repeat center/contain;mask:var(--tick) no-repeat center/contain;vertical-align:middle}
.compare .no{color:var(--d-muted)}

/* ── the Enterprise form ──────────────────────────────────────── */
.ent{display:grid;gap:var(--s-8);align-items:start}
.ent-form{background:var(--d-white);border:1px solid var(--d-line);border-radius:var(--d-radius);padding:var(--s-6);display:grid;gap:var(--s-4)}
.ent-form label{display:grid;gap:6px;font-weight:600;color:var(--d-ink);font-size:var(--d-fs-sm)}
.ent-form input{min-height:46px;padding:0 var(--s-3);font:inherit;font-weight:400;color:var(--d-ink);background:var(--d-white);border:var(--d-border);border-radius:var(--d-radius-sm)}
.ent-form input:focus{outline:none;box-shadow:0 0 0 3px var(--ra-lead)}
.ent-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ent-msg{margin:0;padding:var(--s-3) var(--s-4);border-radius:var(--d-radius-sm);font-size:var(--d-fs-sm)}
.ent-msg[hidden]{display:none}
.ent-msg.ok{background:var(--d-mint-tint);color:var(--d-ink)}
.ent-msg.err{background:var(--d-coral-tint);color:var(--d-red)}
@media (min-width:900px){.ent{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ── how it works page ────────────────────────────────────────── */
.pv-gap{margin-top:var(--s-8)}
.jump{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-6)}
.jump a{text-decoration:none}

/* ── the ink band's field ─────────────────────────────────────── */
.band .signup-form{margin-inline:auto}
.band-inner{text-align:center}
.band .hero-note{color:rgba(245,243,236,.72)}

/* ── motion: reveal once, off when asked ──────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .type-on{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid var(--d-ink);max-width:0;animation:type 2.4s steps(40,end) .6s forwards,caret .8s step-end 6}
  @keyframes type{to{max-width:100%}}
  @keyframes caret{50%{border-color:transparent}}
}
@media (prefers-reduced-motion:reduce){.type-on{border:0}}