/* Headings switched to Fraunces 2026-09-26 (Kelly: "this serifed font is STILL hard to read", picked C in
   docs/review/fonts-3.html: "Yes I like C too."). Older notes below mention Bodoni Moda.
   Sol Sparks public site. v4 (2026-09-25 late, Kelly): the Sol Sparks portal palette, not The Prosperity Maven's.
   "I love the branding of the sol sparks portal. Was just too much navy/gold on the sales page."
   Teal, sand/beige, gold, coral, salmon. Navy only as a small accent. Flat colour only (no gradients).
   Headings in Bodoni Moda (Kelly picked it for the whole brand, 2026-09-25: "I like A"), body in Mulish. Real photos only.
   v5 (2026-09-25 night): no menu at the top, one legal line at the bottom (docs/research/sales-pages-and-funnels-2026-09-25.md).
   Font fix (2026-09-25 night, Kelly picked A in docs/review/fonts-2.html): Bodoni Moda's thin strokes vanished at big
   sizes ("this font is just too hard to read"), so the optical size is pinned at 6, the font's sturdiest setting.
   (28 was tried first and made no visible difference at the 20 to 30px sizes Kelly's screen shows.) */
:root{
  --teal:#159AA0; --teal-deep:#0E6F73; --teal-ink:#0B4F52; --teal-soft:#D6ECEA;
  --gold:#F2B134; --gold-2:#E7A11F; --coral:#E07856; --salmon:#F7C9B5; --terracotta:#A34528;
  --cream:#FBF6EC; --sand:#F6EDDF; --night:#1B2340;
  --text:#2B2B2E; --text-soft:#5B5147;
  --rule:rgba(43,43,46,.14); --rule-light:rgba(255,255,255,.28);
  --head:'Fraunces',Georgia,serif; --sans:'Mulish',-apple-system,'Segoe UI',sans-serif;
  /* aliases so older class names keep working */
  --ink:var(--text); --ink-soft:var(--text-soft); --rust:var(--coral); --rule-dark:rgba(43,43,46,.14); --rule-gold:rgba(242,177,52,.45);
  --serif:var(--head);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-variation-settings:normal}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--sans);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--teal-deep)}
strong{font-weight:800}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}

/* preview-only bits (site.js adds .is-preview on localhost) */
.ribbon{display:none;background:var(--teal-ink);color:#fff;font-size:12.5px;text-align:center;padding:6px 16px}
.is-preview .ribbon{display:block}
.tbd{background:rgba(242,177,52,.38)}
.preview-only{display:none}
.is-preview .preview-only{display:block}
.is-preview .shots.preview-only{display:grid}

/* type */
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin:0 0 12px;color:var(--terracotta)}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.06;margin:0;text-wrap:balance;letter-spacing:0;color:var(--teal-ink)}
h1{font-size:clamp(42px,6.4vw,78px);margin-bottom:18px}
h2{font-size:clamp(30px,4vw,48px);margin-bottom:18px}
h3{font-size:22px;margin-bottom:8px;letter-spacing:-.01em}
h1 em,h2 em{font-style:normal;color:var(--coral)}
p{margin:0 0 14px}
.lead{font-size:20px;line-height:1.55}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* buttons: flat */
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;padding:16px 26px;cursor:pointer;
  font-family:var(--sans);font-weight:800;font-size:16px;letter-spacing:.02em;text-decoration:none;transition:background .15s}
.btn-rust,.btn-gold{background:var(--gold);color:var(--teal-ink)}
.btn-rust:hover,.btn-gold:hover{background:var(--gold-2)}
.btn-ink,.btn-teal{background:var(--teal-deep);color:#fff}
.btn-ink:hover,.btn-teal:hover{background:var(--teal-ink)}
.btn-line{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.micro{font-size:14.5px;color:var(--text-soft);margin-top:12px}

/* header */
.top{background:var(--cream);border-bottom:1px solid var(--rule)}
.top .in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px}
.brand{display:inline-flex;flex-direction:column;line-height:1.1;text-decoration:none;color:var(--teal-ink)}
.brand b{font-family:var(--head);font-size:24px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.brand small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft)}
.top .btn{padding:11px 18px;font-size:14px}

/* the Life / Business toggle */
.toggle-row{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 16px 0}
.toggle{display:inline-flex;padding:4px;border:2px solid var(--teal-deep);border-radius:999px;background:#fff}
.toggle a{padding:10px 22px;border-radius:999px;font-weight:800;font-size:15px;text-decoration:none;color:var(--teal-deep)}
.toggle a.on{background:var(--teal-deep);color:#fff}
.toggle-row small{color:var(--text-soft);font-size:14px}

/* layout + colour bands */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.narrow{max-width:780px}
.band{padding:86px 0}
.sand{background:var(--sand)}
.cream{background:var(--cream)}
.salmon{background:var(--salmon)}
.teal{background:var(--teal-deep);color:#EAF6F5}
.teal h2,.teal h3{color:#fff}
.teal .eyebrow{color:var(--gold)}
.rust,.coral{background:var(--coral);color:#fff}
.rust h2,.rust .eyebrow,.coral h2,.coral .eyebrow{color:#fff}
.ink{background:var(--teal-ink);color:#EAF6F5}
.ink h2{color:#fff}

/* hero */
.hero{padding:34px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero .lead{color:var(--text-soft);max-width:30em}
.ai-line{font-size:15px;color:var(--text-soft);margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);max-width:30em}
.ai-line b{color:var(--teal-ink)}
.hero-visual{position:relative;height:560px}
.hero-visual .disc{position:absolute;inset:40px 0 0 40px;border-radius:50%;background:var(--teal-soft)}

/* phones (portal screenshots) */
.phone{position:absolute;width:236px;border-radius:30px;padding:8px;background:#111}
.phone img{border-radius:23px;width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top}
.phone.p1{left:4%;top:60px}
.phone.p2{right:4%;top:0}

/* problem bullets */
.pains{list-style:none;margin:10px 0 0;padding:0;max-width:760px}
.pains li{padding:16px 0 16px 34px;border-top:1px solid rgba(43,43,46,.16);position:relative;font-size:19px}
.pains li:last-child{border-bottom:1px solid rgba(43,43,46,.16)}
.pains li::before{content:"";position:absolute;left:4px;top:26px;width:12px;height:12px;border-radius:50%;background:var(--coral)}
.turn{font-family:var(--head);font-size:clamp(24px,2.6vw,32px);font-weight:800;color:var(--teal-ink);margin-top:30px;letter-spacing:-.01em}

/* what's inside (on teal) */
.inside-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.items{list-style:none;margin:0;padding:0}
.items li{padding:16px 0;border-top:1px solid var(--rule)}
.items li:last-child{border-bottom:1px solid var(--rule)}
.items b{display:block;font-family:var(--head);font-size:21px;font-weight:800;line-height:1.2;color:var(--teal-ink)}
.items span{color:var(--text-soft)}
.teal .items li{border-color:var(--rule-light)}
.teal .items b{color:#fff}
.teal .items span{color:#CFE7E5}
.phones{position:relative;height:540px;width:100%}

/* walkthrough video (placeholder until Kelly records it) */
.video{position:relative;aspect-ratio:16/9;border-radius:10px;background:var(--teal-ink);display:grid;place-items:center;margin-top:10px;overflow:hidden}
.video .play{width:86px;height:86px;border-radius:50%;background:var(--gold);position:relative}
.video .play::after{content:"";position:absolute;left:34px;top:26px;border-style:solid;border-width:17px 0 17px 28px;border-color:transparent transparent transparent var(--teal-ink)}
.video-note{position:absolute;bottom:16px;left:0;right:0;color:#CFE7E5;font-size:14px}
.is-preview section.preview-only{display:block}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:10px;counter-reset:s}
.step{counter-increment:s;border-top:2px solid var(--teal-deep);padding-top:18px}
.step::before{content:counter(s);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--coral);color:#fff;font-weight:800;margin-bottom:14px}
.step p{color:var(--text-soft);margin:0}

/* proof */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:10px}
.quotes blockquote{margin:0;font-family:var(--head);font-size:clamp(24px,2.4vw,30px);line-height:1.25;font-weight:700;letter-spacing:-.01em}
.quotes blockquote::before{content:"\201C";display:block;font-family:Georgia,serif;font-size:64px;line-height:.6;margin-bottom:6px;opacity:.7}
.source{font-size:14px;opacity:.85;margin-top:22px}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.shots .slot{aspect-ratio:3/4;border:2px dashed var(--rule-light);border-radius:6px;display:grid;place-items:center;text-align:center;padding:14px;font-size:14px;opacity:.9}

/* fit */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.fit-grid h3{margin-bottom:14px}
.fit{list-style:none;margin:0;padding:0}
.fit li{padding:10px 0 10px 32px;position:relative;border-top:1px solid var(--rule)}
.fit.yes li::before{content:"";position:absolute;left:6px;top:16px;width:7px;height:13px;border:solid var(--teal);border-width:0 3px 3px 0;transform:rotate(45deg)}
.fit.no li::before,.fit.no li::after{content:"";position:absolute;left:4px;top:23px;width:15px;height:3px;background:var(--coral);transform:rotate(45deg)}
.fit.no li::after{transform:rotate(-45deg)}

/* about */
.about-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:center}
.arch{margin:0;border-radius:999px 999px 8px 8px;overflow:hidden;aspect-ratio:4/5;background:var(--teal-soft);box-shadow:0 0 0 8px var(--salmon)}
.arch img{width:100%;height:100%;object-fit:cover}
.sig{font-family:var(--head);font-weight:700;font-size:28px;color:var(--coral);margin:4px 0 0}

/* offer box */
.offer{max-width:720px;margin:0 auto;border:3px solid var(--teal-deep);border-radius:10px;padding:40px 38px;background:#fff}
.offer .price{font-family:var(--head);font-size:72px;font-weight:800;line-height:1;margin:6px 0 4px;color:var(--teal-ink)}
.offer .price small{font-family:var(--sans);font-size:16px;font-weight:800;letter-spacing:.12em;margin-left:8px}
.offer ul{margin:18px 0 24px;padding-left:22px}
.offer li{margin-bottom:6px}
.guarantee{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);font-size:15.5px;color:var(--text-soft)}

/* faq */
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 0;font-weight:800;font-size:18px;color:var(--teal-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;font-weight:400;color:var(--coral);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 18px;max-width:40em;color:var(--text-soft)}

/* home chooser */
.choose-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px}
.choice{display:block;text-decoration:none;color:inherit;border-radius:10px;padding:30px 28px}
.choice.c-life{background:var(--teal-deep);color:#EAF6F5}
.choice.c-biz{background:var(--coral);color:#fff}
.choice:hover{filter:brightness(1.05)}
.choice .kicker{font-size:12.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.choice.c-biz .kicker{color:#FFE7A8}
.choice h2{font-size:clamp(28px,3vw,38px);margin-bottom:10px;color:#fff}
.choice p{margin:0 0 16px;opacity:.92}
.choice .go{font-weight:800}

/* closing band + footer */
.final{text-align:center}
.final .tag{font-family:var(--head);font-weight:800;font-size:clamp(28px,4vw,46px);line-height:1.15;color:#fff;margin:0 auto 26px;max-width:16em;letter-spacing:-.01em}
footer{background:var(--teal-ink);color:#BFD9D7;font-size:14.5px;padding:38px 0 44px}
footer .in{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:flex-start}
footer a{color:#fff}
footer .brand{color:#fff}
footer .brand small{color:#BFD9D7}
footer .links{display:flex;gap:22px;flex-wrap:wrap}
footer .fine{flex-basis:100%;margin:0;font-size:13px;color:#9DC2BF}
footer .tbd{color:#fff}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:120;max-width:min(92vw,520px);
  background:var(--teal-ink);color:#fff;padding:14px 18px;font-size:15px;border-radius:6px;transition:all .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* text pages + shared bits used by welcome/admin */
.doc{padding:60px 0 90px}
.doc h1{font-size:clamp(38px,5vw,56px)}
.doc h2{font-size:26px;margin:36px 0 8px}
.doc .updated{color:var(--text-soft);font-size:15px}
.doc ul{padding-left:22px}
.doc li{margin-bottom:8px}
.dark{background:var(--teal-deep);color:#EAF6F5}
.dark h1,.dark h2{color:#fff}
.dark .eyebrow{color:var(--gold)}
.price-note{font-size:14.5px;color:#CFE7E5;margin:0}

@media (max-width:980px){
  .hero-grid,.inside-grid,.about-grid{grid-template-columns:1fr;gap:36px}
  .hero-visual,.phones{height:500px;max-width:520px;margin:0 auto;width:100%}
  .arch{max-width:340px}
}
@media (max-width:760px){
  body{font-size:17px}
  .band{padding:60px 0}
  .hero{padding:22px 0 56px}
  .quotes,.choose-grid,.fit-grid,.steps{grid-template-columns:1fr}
  .hero-visual,.phones{height:420px}
  .phone{width:172px;border-radius:24px;padding:6px}
  .phone img{border-radius:19px}
  .phone.p1{left:0;top:40px}.phone.p2{right:0}
  .offer{padding:30px 22px}
  .offer .price{font-size:60px}
  .top .btn{padding:10px 12px;font-size:13px}
  .brand b{font-size:20px}
}
@media (max-width:420px){
  .wrap{padding:0 16px}
  .top .in{padding:12px 16px}
  .toggle a{padding:9px 15px;font-size:14px}
  .hero-visual,.phones{height:370px}
  .phone{width:150px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.toast{transition:none}}

/* v5: wordmark only (no menu), proof strip, sample, objections, one legal line */
.mark-row{max-width:1180px;margin:0 auto;padding:18px 24px 0}
.mark{font-family:var(--head);font-size:22px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink)}
.proof-strip{background:var(--teal-ink);color:#DDEFEC;padding:16px 0}
.proof-strip ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 26px}
.proof-strip li{font-size:14.5px;line-height:1.45}
.proof-strip b{display:block;color:var(--gold);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.turn-sub{font-size:19px;max-width:40em;margin-top:6px}
.lead-p{font-size:19px;line-height:1.65}
.sample{background:#fff;border:1px solid var(--rule);border-left:5px solid var(--gold);border-radius:6px;padding:24px 26px;margin-top:10px;
  font-size:19px;line-height:1.65;box-shadow:0 10px 30px rgba(11,79,82,.08)}
.sample p:last-child{margin-bottom:0}
.sample-try{font-size:16.5px;color:var(--text-soft);border-top:1px dashed var(--rule);padding-top:12px;margin-top:14px}
.sample-try b{color:var(--terracotta)}
.objection h2{font-style:italic}
.objection h2.second{margin-top:44px}
footer.legal{background:var(--cream);color:var(--text-soft);font-size:13.5px;padding:22px 0 30px;border-top:1px solid var(--rule);text-align:center}
footer.legal p{margin:0 0 4px}
footer.legal a{color:var(--text-soft)}
@media (max-width:900px){.proof-strip ul{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.proof-strip ul{grid-template-columns:1fr}}

/* Accessibility, WCAG 2.1 AA contrast (2026-09-25, axe audit): same colours, text-safe shades */
h1 em,h2 em{color:#C2583A}
.salmon .eyebrow{color:#8A3720}
.teal .eyebrow,.choice.c-life .kicker{color:#FFE3A3}
/* coral surfaces stay coral; the text on them goes dark (white on coral is 2.9:1) */
.rust,.coral,.choice.c-biz{color:#1B2340}
.rust h2,.rust .eyebrow,.coral h2,.coral .eyebrow,.choice.c-biz h2,.choice.c-biz .kicker,.choice.c-biz p{color:#1B2340}
.rust .quotes blockquote{color:#1B2340}
.shots .slot{border-color:rgba(27,35,64,.35);color:#1B2340}
.choice.c-life .kicker{color:#FFF0C7;opacity:1}
.shots .slot{opacity:1}
.dark .eyebrow,.teal .eyebrow{color:#FFE3A3}
.sig{color:#C2583A}
/* Last screen: one line above the catch line, and a small line under the final button (copy pass 2026-09-25). */
.final .last-line{font-size:20px;color:#EAF6F5;margin:0 auto 14px;max-width:34em}
.final .final-micro{font-size:14.5px;color:#CFE7E5;margin:12px 0 0}
/* The hero callout is a full question now ("Read about your type on six websites? Start here."), so it reads as a sentence, not tracked caps. */
.hero .eyebrow{text-transform:none;letter-spacing:0;font-size:17px;font-weight:800}
/* Photo beside text (How it reads you, the doubts), and the About fun-facts line (2026-09-25 night). */
.side-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:center}
.side-grid.photo-left{grid-template-columns:.65fr 1.35fr}
.side-photo{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 16px 36px rgba(27,35,64,.14);aspect-ratio:4/5;max-width:380px;justify-self:center;width:100%}
.side-photo img{width:100%;height:100%;object-fit:cover}
.fun-facts{font-size:15.5px;color:var(--text-soft);font-style:italic;border-top:1px solid var(--rule);padding-top:14px;margin-top:18px}
@media (max-width:900px){.side-grid,.side-grid.photo-left{grid-template-columns:1fr;gap:28px}.side-photo{max-width:300px}.side-grid.photo-left .side-photo{order:2}}
/* A long hero headline (more than 40 characters) steps down a size so the button stays in the first screen. */
.hero h1.long{font-size:clamp(36px,4.6vw,58px)}