/* ════════════════════════════════════════════════════════════
   SOPHIA MORGAN — v3 sales site
   Senior-first design: 18px+ body, 4.5:1 contrast, 44px+ targets,
   linear newspaper-like flow, minimal animation.
   ════════════════════════════════════════════════════════════ */
/* ══════════ LAUNCH COUNTDOWN BAR — dark green, 3 timer boxes ══════════ */
.announce-timer{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;background:var(--timer-bg);color:#F3EAD3;text-align:center;padding:12px 16px;font-size:1rem;font-weight:600;letter-spacing:.03em}
.timer-text strong{color:#fff}
.timer-chips{display:flex;gap:10px}
.tchip{background:var(--timer-box);border:1px solid rgba(234,217,168,.4);border-radius:10px;padding:6px 12px;text-align:center;min-width:74px}
.tchip b{display:block;font-size:1.35rem;color:#fff;font-variant-numeric:tabular-nums;line-height:1.25}
.tchip i{font-style:normal;font-size:.62rem;letter-spacing:.18em;color:var(--gold-soft)}
.price-note{font-size:.88rem;color:var(--muted);margin:.45em 0 0}

:root{
  --navy:#14324F;
  --navy-deep:#0C1F33;
  --timer-bg:#0E2E1F;
  --timer-box:#1C4A32;
  --gold:#C49A2B;
  --gold-soft:#EAD9A8;
  --cream:#FFFDF6;
  --cream-2:#F7F2E3;
  --ink:#1A1A1A;
  --muted:#4F4F4F;
  --cta:#1D5FA8;
  --cta-dark:#154A85;
  --line:#E4DCC8;
  --radius:14px;
  --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:18px;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,.serif{font-family:'Fraunces',Georgia,'Times New Roman',serif;line-height:1.25;color:var(--navy)}
h1{font-size:clamp(2.1rem,5vw,3.2rem);font-weight:700;margin-bottom:.5em}
h2{font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:600;margin-bottom:.5em}
h3{font-size:1.25rem;margin-bottom:.35em}
p{margin-bottom:.9em}
.accent{color:#8A6414}
.center{text-align:center}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.kicker{
  font-size:.85rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#8A6414;margin-bottom:.8em;
}
.section{padding:72px 0}
.section-sub{color:var(--muted);max-width:640px;margin:0 auto 2em}

/* ── Buttons: 44px+ targets ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:14px 30px;
  background:var(--cta);color:#fff !important;
  font-size:1.1rem;font-weight:700;text-decoration:none;
  border:none;border-radius:12px;cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{background:var(--cta-dark)}
.btn-large{min-height:60px;padding:16px 40px;font-size:1.2rem}
.btn-small{min-height:48px;padding:10px 22px;font-size:1rem}
.micro{font-size:.92rem;color:var(--muted);margin-top:.7em}

/* ── Sticky header ── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,253,246,.98);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-width:0}
.brand-mark{
  width:42px;height:42px;flex:0 0 42px;border-radius:50%;
  background:var(--navy);color:var(--gold-soft);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.05rem;
}
.brand-name{font-weight:700;color:var(--navy);font-size:1.02rem;line-height:1.2;min-width:0}
.brand-name em{display:block;font-style:normal;font-weight:500;font-size:.8rem;color:var(--muted)}
.main-nav{display:flex;gap:26px}
.main-nav a{color:var(--navy);text-decoration:none;font-weight:600;font-size:1rem;padding:12px 4px;white-space:nowrap}
.main-nav a:hover{text-decoration:underline}

/* ── Hero ── */
.hero{padding:64px 0 72px;background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.lede{font-size:1.2rem;color:#2c2c2c}
.price-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:1.1em 0 .4em}
.price-old{font-size:1.5rem;color:#8a8a8a;text-decoration:line-through}
.price-new{font-size:2.7rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.stamp{
  font-size:.8rem;font-weight:800;letter-spacing:.14em;
  color:#fff;background:#A63D40;border-radius:6px;padding:6px 12px;
  transform:rotate(-3deg);display:inline-block;
}
.save-badge{
  font-size:.85rem;font-weight:800;letter-spacing:.08em;
  color:var(--navy-deep);background:var(--gold-soft);
  border:2px solid var(--gold);border-radius:999px;padding:6px 14px;
}
.save-badge.big{font-size:1rem;padding:8px 18px}
.hero-ctas{margin:1.2em 0 .6em}
.trust-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:1.1em}
.trust-chips li{font-size:1rem;font-weight:600;color:#2E5B34}

/* ── 3D book (pure CSS) ── */
.hero-art{display:flex;flex-direction:column;align-items:center;gap:14px}
.book-3d{position:relative;width:250px;height:360px;perspective:1100px}
.book-cover{
  position:absolute;inset:0;border-radius:6px 12px 12px 6px;
  background:linear-gradient(135deg,#1B3A5C 0%,var(--navy) 55%,var(--navy-deep) 100%);
  color:#FFFDF4;text-align:center;padding:34px 22px;
  transform:rotateY(-18deg);
  box-shadow:24px 28px 50px rgba(12,31,51,.35);
  border-left:6px solid #0A1A2C;
  display:flex;flex-direction:column;align-items:center;
}
.book-spine{
  position:absolute;top:0;bottom:0;left:0;width:14px;
  background:linear-gradient(90deg,#0A1A2C,#1B3A5C);
  border-radius:6px 0 0 6px;transform:rotateY(-18deg) translateX(-2px);
}
.book-pages{
  position:absolute;top:6px;bottom:6px;right:-9px;width:12px;
  background:repeating-linear-gradient(90deg,#F5EFDD 0 2px,#E2D9BE 2px 3px);
  border-radius:0 8px 8px 0;transform:rotateY(-18deg);
}
.cover-edition{font-size:.62rem;letter-spacing:.22em;color:var(--gold);font-weight:700;margin-bottom:18px}
.cover-title{font-size:2rem;line-height:1.15;color:#FFFDF4;margin-bottom:10px;letter-spacing:.02em}
.cover-sub{font-size:.95rem;color:var(--gold-soft);font-style:italic}
.cover-rule{width:56px;height:3px;background:var(--gold);margin:14px auto}
.cover-author{margin-top:auto;font-size:.72rem;letter-spacing:.24em;color:#FFFDF4;font-weight:700}
.cover-note{color:var(--muted);font-size:.95rem}

/* ── Manifesto band ── */
.manifesto{background:var(--navy);color:#F5EDD8;padding:56px 0}
.manifesto-line{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.3rem,3vw,1.8rem);line-height:1.45;margin-bottom:.5em}
.manifesto-sub{color:var(--gold-soft);font-size:1.1rem;margin:0}

/* ── Stats ── */
.stats{background:var(--cream-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat-num{display:block;font-family:'Fraunces',Georgia,serif;font-size:2.4rem;font-weight:700;color:var(--navy)}
.stat-label{font-size:.98rem;color:var(--muted)}

/* ── Cards ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:2.2em 0}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px;position:relative;
}
.card-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--navy);color:var(--gold-soft);
  font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.2rem;margin-bottom:12px;
}
.card-meta{font-size:.9rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8A6414;margin-bottom:.4em}
.card p{font-size:1rem}
.card-do{background:var(--cream-2);border-left:4px solid var(--gold);border-radius:0 8px 8px 0;padding:12px 14px;margin:14px 0 0;font-size:.98rem}

/* ── Value block ── */
.value{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);color:#EDE4CC;padding:64px 0}
.value h2{color:#FFFDF4}
.value .accent{color:var(--gold-soft)}
.value p{color:#D8CFB4;max-width:36em;margin:0 auto;font-size:1.1rem}
.value-badge{
  display:inline-block;font-size:.85rem;font-weight:800;letter-spacing:.2em;
  color:var(--navy-deep);background:var(--gold);border-radius:8px;padding:8px 18px;margin-bottom:1em;
}

/* ── Fit (who it's for) ── */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:2em}
.fit-col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px}
.fit-col h3{margin-bottom:.7em}
.fit-col ul{list-style:none}
.fit-col li{padding:.55em 0 .55em 2em;position:relative;font-size:1.02rem}
.fit-yes li::before{content:"✓";position:absolute;left:0;color:#2E7D32;font-weight:800;font-size:1.2em}
.fit-no li::before{content:"✕";position:absolute;left:0;color:#A63D40;font-weight:800;font-size:1.1em}

/* ── Steps ── */
.how{background:var(--cream-2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:2em}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;text-align:center}
.step-num{
  width:52px;height:52px;border-radius:50%;margin:0 auto 14px;
  background:var(--gold);color:var(--navy-deep);
  font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.4rem;
  display:flex;align-items:center;justify-content:center;
}

/* ── FAQ ── */
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden}
.faq-item summary{
  cursor:pointer;list-style:none;
  padding:20px 24px;font-weight:700;font-size:1.1rem;color:var(--navy);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:60px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.6rem;color:var(--gold);font-weight:700;flex-shrink:0}
.faq-item[open] summary::after{content:"–"}
.faq-item summary:hover{background:#FBF8EE}
.faq-item p{padding:0 24px 22px;color:#2c2c2c}

/* ── Final CTA ── */
.final-cta{background:linear-gradient(180deg,var(--cream-2),var(--cream));padding:80px 0}
.price-card{
  background:#fff;border:2px solid var(--gold);border-radius:18px;
  padding:36px 30px;margin-top:1.6em;box-shadow:0 18px 44px rgba(12,31,51,.12);
}
.price-card-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:1em}
.price-card-old{color:#8a8a8a;font-size:1.4rem}
.price-card-old s{text-decoration-thickness:2px}
.price-card-new{font-size:3rem;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.price-card .save-badge{margin:0}

/* ── Footer ── */
.site-footer{background:var(--navy-deep);color:#C9CFD6;padding:44px 0;font-size:.95rem}
.site-footer strong{color:#fff}
.site-footer .fine{color:#9AA4B0;font-size:.88rem;max-width:70em}

/* ── Sticky mobile CTA ── */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  transform:translateY(110%);transition:transform .25s ease;
  box-shadow:0 -6px 24px rgba(0,0,0,.25);
}
.sticky-cta.visible{transform:translateY(0)}
.sticky-text{font-size:1.02rem}
.sticky-text strong{color:var(--gold-soft);font-size:1.2rem}

/* ── Responsive ── */
@media (min-width:1024px){
  .sticky-cta{display:none}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-art{order:-1}
  .book-3d{width:210px;height:304px}
  .cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .fit-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:900px){
  /* Nav links are supplementary (same anchors exist in-page); below 900px the
     single-row header cannot fit brand + nav + CTA without crushing them. */
  .main-nav{display:none}
}
@media (max-width:640px){
  body{font-size:17px}
  .header-inner{min-height:68px;gap:12px}
  /* v12 fix: this button was white-space:nowrap, which made the whole header
     row 363px wide on every phone — wider than 320/360px screens, so the page
     slid sideways. Let it shrink and wrap tidily instead. */
  .site-header .btn-small{padding:12px 14px;font-size:.92rem;text-align:center;line-height:1.25}
  .cards{grid-template-columns:1fr}
  .section{padding:52px 0}
  .hero{padding:44px 0 52px}
  .btn-large{width:100%;padding:16px 20px}
  .price-new{font-size:2rem}
  .price-card-new{font-size:2.4rem}
  .tchip{min-width:62px;padding:5px 8px}
  .tchip b{font-size:1.15rem}
  .announce-timer{gap:8px;font-size:.9rem;padding:10px 12px}
  .sticky-cta{padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px))}
  .sticky-text{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ── Layout hardening (v12) ──
   Media can never exceed its container, and grid children may shrink below
   their min-content size instead of blowing out the row. */
img,svg,video{max-width:100%;height:auto}
.hero-grid>*,.cards>*,.steps>*,.fit-grid>*,.stats-grid>*{min-width:0}
/* Safety net ONLY (root causes are fixed above): clip any residual
   horizontal overflow. `clip` — unlike `hidden` — creates no scroll
   container, so position:sticky/fixed behaviour is preserved. */
html,body{overflow-x:clip}

/* ── Gumroad overlay button rescue (v13) ──────────────────────
   gumroad.js appends Gumroad's own stylesheet (overlay.css) to <head>
   AFTER ours, and its `a.gumroad-button` rule (specificity 0,1,1 —
   beats our `.btn` at 0,1,0) repaints every buy button from CSS
   variables: background black in the light scheme, and light gray
   (#DDDDDD) under @media (prefers-color-scheme:dark). The dark
   scheme expects black text, but our `color:#fff !important` keeps
   the label white — white text AND Gumroad's white mask wordmark on
   light gray = the washed-out, unreadable buttons in the owner's
   phone screenshot. The bundle also swaps the font to ABC Favorit,
   shrinks the label to 16px, squares the corners and turns hover
   pink. These rules take the buttons back — brand navy + gold in
   BOTH colour schemes, whatever Gumroad injects. */
a.btn.gumroad-button{
  background:linear-gradient(180deg,#1B3A5C 0%,var(--navy) 55%,var(--navy-deep) 100%) !important;
  color:#fff !important;
  border:2px solid var(--gold) !important;
  border-radius:12px;
  font-family:'Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:1.125rem; /* 18px label */
  font-weight:700;
  line-height:1.3;
  padding:14px 30px;
  gap:.6rem;
  box-shadow:0 4px 14px rgba(12,31,51,.28);
  text-decoration:none;
  transition:background .15s ease,box-shadow .15s ease;
}
a.btn.gumroad-button.btn-large{font-size:1.2rem;padding:16px 40px}
a.btn.gumroad-button.btn-small{padding:10px 22px}
a.btn.gumroad-button:hover{
  background:linear-gradient(180deg,#26507C 0%,#1B3A5C 55%,var(--navy) 100%) !important;
  color:#fff !important;
  box-shadow:0 6px 20px rgba(12,31,51,.38);
  transform:none; /* cancel Gumroad's slide-and-hard-shadow hover */
}
a.btn.gumroad-button:active{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%) !important;
  box-shadow:0 2px 8px rgba(12,31,51,.30);
  transform:none;
}
/* The wordmark span the bundle injects: painted with the mask in
   currentColor — our white — so it reads clearly on navy. Sized to
   sit neatly beside the label (their default box is 7.14em wide,
   which scales with font-size and crowds small screens). */
a.btn.gumroad-button .logo-full{width:104px;height:20px;min-height:20px}
/* Sticky-bar button: senior-friendly 56px minimum target. */
.sticky-cta a.btn.gumroad-button{min-height:56px}
@media (max-width:640px){
  /* Preserve the v12 header fit exactly — small font, tight padding,
     tidy wrapping — only the paint changes. */
  .site-header a.btn.gumroad-button{padding:12px 14px;font-size:.92rem;text-align:center;line-height:1.25}
  a.btn.gumroad-button .logo-full{width:88px;height:17px;min-height:17px}
  .sticky-cta a.btn.gumroad-button .logo-full{width:80px;height:16px;min-height:16px}
}