/* ============================================================
   CLEAN START KIT — FUNNEL v4 TOKENS  ("creator low-ticket" genre)
   bg #FFFFFF · ink #191414 · pink #E84D8A (CTA) / deep #C9336E
   blush #FDEDF3 (panels) · highlight #FFE68F (marker swipe)
   gold #F5B301 (stars) · line #EFE4E9
   Type: Bricolage Grotesque (display, chunky) / Figtree (body) /
         Caveat (handwritten asides & doodles)
   Conversion skeleton unchanged from v1: VSL → CTA → proof →
   contents → guarantee → FAQ → disclaimer; Stripe-hosted checkout;
   post-purchase upsell; delivery. (v4: lead-capture step before Stripe + soft capture on the sales page.)
   ============================================================ */
:root{
  --bg:#FFFFFF; --ink:#191414; --soft:#6B5F66;
  --pink:#E84D8A; --pink-deep:#C9336E; --blush:#FDEDF3;
  --hl:#FFE68F; --gold:#F5B301; --line:#EFE4E9; --card:#FFFFFF;
  --shadow:0 14px 34px rgba(201,51,110,.10);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#FFFFFF; }  /* sales pages stay light */
}
:root[data-theme="dark"]{ --bg:#FFFFFF; }
html{ scroll-padding-top:calc(60px + env(safe-area-inset-top,0px)); scroll-behavior:smooth; }
*,*::before,*::after{ box-sizing:inherit; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Figtree',system-ui,sans-serif; font-size:18px; line-height:1.6;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition:none!important;} }

/* ---------- layout ---------- */
.page{ max-width:680px; margin:0 auto 30px; padding:28px 20px 70px; }
.page.wide{ max-width:940px; }
section + section, .gap, .btn-micro + section{ margin-top:64px; }

/* ---------- type ---------- */
h1,h2,h3{ font-family:'Bricolage Grotesque',system-ui,sans-serif; line-height:1.08; margin:0; letter-spacing:-.015em; }
h1{ font-size:clamp(34px,7vw,52px); font-weight:800; }
h2{ font-size:clamp(26px,5vw,36px); font-weight:800; }
h3{ font-size:21px; font-weight:700; }
.sub{ color:var(--soft); margin:18px 0 0; font-size:19px; }
.hand{ font-family:'Caveat',cursive; font-weight:700; }
mark{ /* the marker swipe */
  background:linear-gradient(104deg, transparent 2%, var(--hl) 5%, var(--hl) 95%, transparent 98%);
  padding:.06em .18em; margin:0 -.08em; border-radius:4px; color:inherit;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
mark.pink{ background:linear-gradient(104deg, transparent 2%, #FBD3E2 5%, #FBD3E2 95%, transparent 98%); }
.stars{ color:var(--gold); letter-spacing:2px; font-size:17px; }
.cred{ display:flex; align-items:center; gap:10px; color:var(--soft); font-size:15.5px; margin:0 0 18px; font-weight:500; }

/* ---------- buttons ---------- */
.btn{
  display:block; width:100%; border:0; cursor:pointer; text-align:center; text-decoration:none;
  background:var(--pink); color:#fff;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:20px;
  padding:19px 24px; border-radius:999px;
  box-shadow:0 6px 0 var(--pink-deep), var(--shadow);
  transition:transform .08s ease;
}
.btn:hover{ background:var(--pink-deep); }
.btn:active{ transform:translateY(3px); box-shadow:0 3px 0 var(--pink-deep); }
.btn:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible{
  outline:3px solid var(--ink); outline-offset:2px;
}
.btn-micro{ text-align:center; color:var(--soft); font-size:15px; margin:12px 0 0; }
.btn-ghost{ display:inline-block; margin:20px auto 0; color:var(--soft); font-size:15.5px;
  text-decoration:underline; text-underline-offset:3px; background:none; border:0; cursor:pointer; }

/* doodle underline + arrow accents */
.squiggle{ display:block; width:190px; height:16px; margin:14px 0 0; }
.arrow-note{ display:flex; align-items:center; gap:6px; justify-content:center; margin:26px 0 8px;
  color:var(--pink-deep); font-family:'Caveat',cursive; font-weight:700; font-size:24px; }

/* ---------- sales ---------- */
.vsl{
  margin:30px 0 20px; aspect-ratio:16/9; background:#1C1518; border-radius:18px;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
  color:#D9CDD4; font-size:15px; text-align:center; padding:10px;
}
.vsl .play{ width:70px; height:70px; border-radius:50%; background:var(--pink);
  display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
.vsl .play::after{ content:""; border-style:solid; border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent #fff; margin-left:5px; }
.proof-img{ width:100%; height:auto; display:block; border-radius:14px; border:1.5px solid var(--line); box-shadow:var(--shadow); }
.caption{ color:var(--soft); font-size:16px; margin:14px 0 0; }
.inside{ list-style:none; margin:26px 0 0; padding:0; }
.inside li{ padding:14px 0 14px 42px; position:relative; border-bottom:1.5px solid var(--line); font-size:18.5px; font-weight:500; }
.inside li:last-child{ border-bottom:0; }
.inside li::before{ content:"✓"; position:absolute; left:2px; top:11px; width:26px; height:26px;
  background:var(--blush); color:var(--pink-deep); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; }
.flow{ margin:34px 0 0; display:block; width:100%; height:auto; }
.guarantee{
  margin:56px 0 0; background:var(--blush); border-radius:20px; padding:28px 28px 26px; text-align:center;
}
.guarantee h3{ color:var(--pink-deep); }
.guarantee p{ margin:10px auto 0; color:var(--soft); font-size:17px; max-width:46ch; }
details{ border-bottom:1.5px solid var(--line); }
summary{ cursor:pointer; list-style:none; padding:17px 34px 17px 2px; font-size:18px; position:relative; font-weight:600; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; position:absolute; right:6px; top:13px; color:var(--pink); font-size:24px; font-weight:700; }
details[open] summary::after{ content:"–"; }
details p{ margin:0 0 18px; color:var(--soft); font-size:17px; padding-right:12px; }
.disclaimer{ margin-top:64px; padding-top:28px; border-top:1.5px solid var(--line); color:var(--soft); font-size:14px; line-height:1.65; }
.disclaimer h3{ font-size:15px; color:var(--soft); font-family:'Figtree',sans-serif; font-weight:700; }

.stack{ display:grid; gap:18px; margin-top:22px; }
.card{ background:#fff; border:1.5px solid var(--line); border-radius:20px; padding:24px 24px 14px; box-shadow:var(--shadow); }
.card .tag{ display:inline-block; background:var(--blush); color:#B02A60; /* deep pink, nudged for 4.5:1 on blush */ font-weight:700; font-size:13px;
  letter-spacing:.05em; padding:4px 12px; border-radius:999px; margin-bottom:10px; }
.card .inside{ margin-top:10px; }

.inside li b{ font-weight:700; }
.inside li span{ display:block; color:var(--soft); font-size:16px; font-weight:400; margin-top:2px; line-height:1.45; }
.packlist{ color:var(--soft); font-size:15.5px; margin:14px 0 0; line-height:1.6; }


/* ---------- form fields ---------- */
.field{ margin:16px 0 0; }
.field label{ display:block; font-size:15px; color:var(--soft); margin:0 0 7px; font-weight:600; }
.field input{ width:100%; padding:15px 16px; font:inherit; font-size:17px; border:1.5px solid var(--line);
  border-radius:12px; background:#fff; color:var(--ink); }
.field input:focus{ border-color:var(--pink); }

/* ---------- lead capture ---------- */
.capture-card{ background:#fff; border:1.5px solid var(--line); border-radius:24px; padding:30px 26px 26px;
  box-shadow:var(--shadow); max-width:520px; margin:0 auto; position:relative; }
.cap-step{ margin:0 0 8px; color:var(--pink-deep); font-weight:700; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; }
.cap-h{ font-size:clamp(25px,5vw,31px); }
.cap-sub{ color:var(--soft); margin:10px 0 4px; font-size:16.5px; }
.opt{ font-weight:500; color:#A89AA2; font-size:13px; margin-left:6px; }
.consent{ display:flex; gap:11px; align-items:flex-start; margin:16px 0 0; font-size:14.5px; color:var(--soft); line-height:1.45; cursor:pointer; }
.consent input{ width:20px; height:20px; margin-top:1px; accent-color:var(--pink); flex:none; }
.sms-consent{ display:none; }
.cap-form.has-phone .sms-consent{ display:flex; }
.cap-x{ position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:var(--blush); color:var(--pink-deep); font-size:16px; font-weight:700; }
dialog.capture-dlg{ border:0; padding:0; background:transparent; max-width:560px; width:calc(100% - 24px); margin:auto; }
dialog.capture-dlg::backdrop{ background:rgba(25,20,22,.58); }
dialog.capture-dlg .capture-card{ margin:0; max-height:calc(100dvh - 24px); overflow:auto; }
.softcap{ margin-top:64px; background:var(--blush); border-radius:20px; padding:28px 26px 24px; }
.softcap .tag{ display:inline-block; background:#fff; color:var(--pink-deep); font-weight:700; font-size:13px;
  letter-spacing:.04em; padding:4px 12px; border-radius:999px; margin-bottom:10px; }
.softcap p{ color:var(--soft); margin:10px 0 0; font-size:17px; }
.softrow{ display:grid; gap:0 14px; }
@media (min-width:560px){ .softrow{ grid-template-columns:1fr 1fr; } }

/* ---------- upsell ---------- */
.steps{ display:flex; gap:8px; margin:0 0 26px; }
.steps i{ flex:1; height:7px; border-radius:4px; background:var(--line); }
.steps i.on{ background:var(--pink); }
.wait{ background:var(--hl); color:#6B4A00; display:inline-block; padding:7px 16px; border-radius:999px;
  font-weight:700; font-size:15px; margin:0 0 18px; }
.upsell-box{ margin:28px 0 0; background:#fff; border:1.5px solid var(--line); border-radius:20px;
  padding:28px; box-shadow:var(--shadow); }
.price-line{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:32px; margin:16px 0 0; }
.price-line .now{ color:var(--pink-deep); }

/* ---------- thanks ---------- */
.dl{ display:flex; align-items:center; justify-content:space-between; gap:14px; background:#fff;
  border:1.5px solid var(--line); border-radius:16px; padding:18px 20px; margin:14px 0 0; box-shadow:var(--shadow); }
.dl b{ font-weight:700; }
.dl a{ white-space:nowrap; color:var(--pink-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.lost{ margin:34px 0 0; background:var(--blush); border-radius:20px; padding:24px 24px 22px; }
.lost p{ color:var(--soft); margin:8px 0 0; font-size:16.5px; }
.lost .fine{ font-size:14.5px; margin-top:18px; line-height:1.55; }
.note-hand{ margin:28px 0 0; font-size:25px; color:var(--pink-deep); }


/* ---------- forms (course login) ---------- */
.notice{ background:var(--blush); border-radius:16px; padding:16px 20px; margin:18px 0 0; color:var(--ink); font-size:16.5px; }
.notice.warn{ background:#FFF6D6; }
form.inline{ margin:0; }

/* ---------- course ---------- */
.modules{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px; }
.modules a{ display:flex; gap:14px; align-items:center; text-decoration:none; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow); }
.modules a:hover{ border-color:var(--pink); }
.modules .num{ flex:0 0 36px; height:36px; border-radius:50%; background:var(--blush); color:var(--pink-deep);
  display:flex; align-items:center; justify-content:center; font-weight:800; }
.modules small{ display:block; color:var(--soft); font-size:15px; }
.player{ margin:24px 0 0; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#1C1518; box-shadow:var(--shadow); }
.player iframe{ border:0; width:100%; height:100%; display:block; }
.pager{ display:flex; justify-content:space-between; gap:12px; margin:26px 0 0; font-weight:600; }
.pager a{ color:var(--pink-deep); }

/* ---------- VSL facade ---------- */
.vsl{ position:relative; overflow:hidden; border:0; width:100%; cursor:pointer; font:inherit; }
.vsl img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vsl .play{ position:relative; z-index:1; }
.vsl iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- legal pages ---------- */
.legal h2{ margin-top:36px; font-size:24px; }
.legal p, .legal li{ color:var(--soft); font-size:17px; }
.todo{ background:var(--hl); padding:0 .2em; border-radius:3px; color:#6B4A00; }

/* ---------- site footer ---------- */
.site-foot{ max-width:680px; margin:0 auto; padding:24px 20px 48px; color:var(--soft); font-size:14px; }
.site-foot nav{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 10px; }
.site-foot a{ color:var(--soft); }

/* ---------- capture form states ---------- */
.form-error{ color:#A3123F; font-size:15px; margin:12px 0 0; }
.form-error:empty{ display:none; }
.btn[disabled]{ opacity:.7; cursor:progress; }
.ts-slot:empty{ display:none; }

/* ---------- email typo hint + delivery notices (built on design tokens) ---------- */
.email-hint{ margin:8px 0 0; font-size:15px; color:var(--ink); }
.email-hint button{ background:none; border:0; padding:0; font:inherit; color:var(--pink-deep); font-weight:700;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.sent-to{ margin:14px 0 0; color:var(--soft); font-size:16px; }
.dl{ flex-wrap:wrap; }
.dl b{ flex:1 1 9em; }
.sent-to a, .notice a{ color:var(--pink-deep); font-weight:600; }