/* AI למאחרים — landing page styles.
   Design language extracted from sites.prh.com/thecreativeact (stark black &
   white, big elegant display type, generous whitespace, sharp buttons).
   Tokens: docs/design-reference/creative-act-tokens.md. RTL Hebrew. */

/* ---------- self-hosted variable fonts ---------- */
@font-face{
  font-family:"Frank Ruhl Libre";
  src:url("/static/fonts/FrankRuhlLibre.ttf") format("truetype-variations");
  font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Heebo";
  src:url("/static/fonts/Heebo.ttf") format("truetype-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------- design tokens ---------- */
:root{
  --ink:#000000; --ink-soft:#333333; --paper:#FFFFFF; --paper-warm:#F7F7F7;
  --mist:#BDBDBD; --night:#0A0A0A; --charcoal:#212121;
  --bg:var(--paper-warm); --fg:var(--ink); --muted:var(--ink-soft); --hairline:#E2E2E2;
  --accent:var(--ink); --tint:var(--paper-warm);
  --ochre:#C0792B;        /* warm accent for non-text UI: borders, icons, bullets (>=3:1) */
  --ochre-dark:#9A5E16;   /* darker burnt-orange for TEXT + CTA fill: white-on-this and this-on-warm both clear WCAG AA 4.5:1 */
  --ochre-darker:#7E4D12; /* CTA hover */
  --star:#F5A623; --star-empty:#D0D0D0;  /* Amazon-gold review stars */

  --font-display:"Frank Ruhl Libre",Georgia,serif;
  --font-body:"Heebo",system-ui,sans-serif;

  --t-hero:52px; --t-h1:45px; --t-h2:32px; --t-lead:23px;
  --t-body:20px; --t-small:15px; --t-tiny:13px;

  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:40px;
  --space-5:64px; --space-6:96px; --space-7:128px;
  --container:1040px; --container-narrow:680px; --section-pad-y:96px;
}
@media (max-width:768px){
  :root{ --t-hero:39px; --t-h1:38px; --t-h2:27px; --t-lead:19.5px; --t-body:17px; --section-pad-y:56px; }
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:var(--t-body); font-weight:400;
  line-height:1.6; direction:rtl; text-align:right;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- accessibility primitives (WCAG 2.0 AA / IS 5568) ---------- */
/* Visible keyboard focus everywhere (was missing site-wide: only the checkout
   input had a focus style). 3px ochre ring clears the 3:1 non-text contrast bar;
   on dark sections it flips to white. */
:focus-visible{ outline:3px solid var(--ochre); outline-offset:2px; border-radius:2px; }
.section--ink :focus-visible, .footer :focus-visible, .btn--accent:focus-visible{ outline-color:#fff; }

/* Screen-reader-only text that becomes visible on focus (used by the skip link
   and associated form labels). */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Skip-to-content link: first focusable element, hidden until focused. */
.skip-link{ position:absolute; top:-100px; inset-inline-start:8px; z-index:1100;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; font-weight:700;
  transition:top .15s ease; }
.skip-link:focus{ top:8px; }

/* legal / statement pages (accessibility) */
.legal{ text-align:start; }
.legal__h{ font-family:var(--font-display); font-size:var(--t-lead); margin:var(--space-4) 0 var(--space-2); }
.legal__list{ margin:0 0 var(--space-2); padding-inline-start:1.2em; display:grid; gap:6px; }
.legal__list li{ line-height:1.5; }
.legal__updated{ margin-top:var(--space-4); color:var(--ink-soft); font-size:var(--t-small); }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.05; margin:0; }
p{ margin:0 0 var(--space-2); }
strong{ font-weight:700; }

/* ---------- layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--space-3); }
.narrow{ max-width:var(--container-narrow); }
.section{ padding-block:var(--section-pad-y); }
.section--paper{ background:var(--paper); }
.section--warm{ background:var(--paper-warm); }
.section--ink{ background:var(--ink); color:var(--paper); }
.section--ink .muted{ color:var(--mist); }
.center{ text-align:center; }
.eyebrow{ font-size:var(--t-tiny); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--space-2); }
/* on dark sections the #333 muted fails contrast; use the light mist instead */
.section--ink .eyebrow{ color:var(--mist); }
.muted{ color:var(--muted); }
.lead{ font-size:var(--t-lead); line-height:1.5; color:var(--ink-soft); }
.hr{ height:1px; background:var(--hairline); border:0; margin-block:var(--space-5); }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--ink); color:var(--paper);
  font-family:var(--font-body); font-size:var(--t-small); font-weight:500;
  letter-spacing:.02em; padding:15px 30px; border:1px solid var(--ink); border-radius:0;
  cursor:pointer; transition:background .15s ease,color .15s ease; text-align:center;
}
.btn:hover{ background:var(--paper); color:var(--ink); }
.btn--lg{ font-size:18px; padding:18px 44px; }
.section--ink .btn{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.section--ink .btn:hover{ background:transparent; color:var(--paper); }
.btn-note{ display:block; margin-top:var(--space-2); font-size:var(--t-small); color:var(--muted); }

/* ---------- top nav (sticky, site-wide) ---------- */
/* DESKTOP/TABLET (>=768px): a clean bar with the brand on the right, the links inline,
   and the buy CTA at the far (left) side. Solid paper surface; a hairline border plus a
   soft shadow that fades in once the page is scrolled (.nav--scrolled, set in JS). */
.nav{ position:sticky; top:0; z-index:60; background:var(--paper); border-bottom:1px solid var(--hairline); transition:box-shadow .2s ease; }
.nav--scrolled{ box-shadow:0 2px 14px rgba(0,0,0,.07); }
.nav__inner{ display:flex; align-items:center; gap:var(--space-3); min-height:62px; }
.nav__brand{ font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:.01em; color:var(--ink); unicode-bidi:isolate; flex:0 0 auto; }
.nav__links{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; flex:1 1 auto; }
.nav__link{ display:inline-flex; align-items:center; font-size:var(--t-small); font-weight:600; color:var(--ink-soft); padding:8px 14px; border-radius:8px; transition:color .15s ease, background-color .15s ease; }
.nav__link:hover{ color:var(--ink); background:color-mix(in srgb,var(--ochre) 12%,transparent); }
.nav__actions{ display:flex; align-items:center; gap:var(--space-2); flex:0 0 auto; }
.nav__cta{ font-size:var(--t-small); }
.nav__cta.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 22px; line-height:1; white-space:nowrap; background:var(--ochre-dark); color:#fff; border-color:var(--ochre-dark); }
.nav__cta.btn:hover{ background:var(--ochre-darker); border-color:var(--ochre-darker); color:#fff; }
.nav__toggle{ display:none; }   /* desktop: links are inline, no hamburger */
.nav__scrim{ display:none; }

/* MOBILE (<768px): a hamburger opens a dropdown PANEL anchored to the sticky bar. */
@media (max-width:767px){
  .nav__inner{ gap:var(--space-2); min-height:56px; }
  .nav__brand{ font-size:20px; }
  .nav__toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid var(--hairline); background:var(--paper); border-radius:10px; color:var(--ink); cursor:pointer; flex:0 0 auto; }
  .nav__toggle[aria-expanded="true"]{ background:color-mix(in srgb,var(--ochre) 14%,transparent); border-color:var(--ochre); }
  .nav__bars, .nav__bars::before, .nav__bars::after{ content:""; display:block; width:20px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
  .nav__bars{ position:relative; }
  .nav__bars::before{ position:absolute; left:0; top:-6px; }
  .nav__bars::after{ position:absolute; left:0; top:6px; }
  .nav-open .nav__bars{ background:transparent; }                                  /* X when open */
  .nav-open .nav__bars::before{ transform:translateY(6px) rotate(45deg); }
  .nav-open .nav__bars::after{ transform:translateY(-6px) rotate(-45deg); }
  /* compact CTA so brand + CTA + hamburger never overflow at 360px */
  .nav__cta.btn{ padding:9px 14px; font-size:var(--t-tiny); }
  /* THE FIX: the panel is OUT OF FLOW, anchored to the bottom of the sticky bar
     (top:100% of the stuck .nav), so it always drops directly under the bar in the
     CURRENT viewport regardless of scroll. Opening it shifts no document layout, so it
     can never trigger scroll-anchoring (the old open-while-scrolled bug). */
  .nav__links{ position:absolute; top:100%; inset-inline:0; display:none; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-top:1px solid var(--hairline); box-shadow:0 14px 30px rgba(0,0,0,.14);
    padding-block:var(--space-1); max-height:calc(100dvh - 56px); overflow-y:auto; }
  .nav-open .nav__links{ display:flex; }
  .nav__link{ min-height:50px; display:flex; align-items:center; padding:0 var(--space-3); font-size:var(--t-body); font-weight:600;
    color:var(--ink); border-radius:0; border-bottom:1px solid color-mix(in srgb,var(--hairline) 55%,transparent); }
  .nav__link:last-child{ border-bottom:none; }
  .nav__link:hover, .nav__link:active{ color:var(--ink); background:color-mix(in srgb,var(--ochre) 10%,transparent); }
  /* scrim: dims the page behind + closes on tap. It lets scroll gestures through (no
     touch-action lock) so that STARTING TO SCROLL dismisses the open menu (handled in JS). */
  .nav__scrim{ position:fixed; inset:0; z-index:55; background:rgba(24,18,10,.42); }
  .nav-open .nav__scrim{ display:block; }
}

/* ---------- hero ---------- */
.hero{ padding-block:var(--space-7) var(--space-6); text-align:center; }
.hero__title{ font-size:var(--t-hero); font-weight:700; margin-bottom:var(--space-2); }
.hero__subtitle{ font-size:var(--t-h2); font-weight:400; color:var(--ink-soft); margin-bottom:var(--space-3); }
.hero__promise{ font-size:var(--t-lead); line-height:1.55; max-width:620px; margin:0 auto var(--space-4); color:var(--ink-soft); }
.hero__cover{ max-width:300px; margin:var(--space-5) auto 0; }
.hero__caption{ font-size:var(--t-small); color:var(--muted); margin-top:var(--space-2); }

/* ---------- pull quote ---------- */
.quote{ text-align:center; }
.quote__text{ font-family:var(--font-display); font-weight:400; font-size:var(--t-h1); line-height:1.25; }
.quote__attrib{ display:block; margin-top:var(--space-3); font-family:var(--font-body); font-size:var(--t-small); color:var(--mist); letter-spacing:.12em; text-transform:uppercase; }

/* ---------- section heading ---------- */
.s-head{ text-align:center; margin-bottom:var(--space-5); }
.s-head__title{ font-size:var(--t-h1); font-weight:500; margin-bottom:var(--space-2); }
.s-head__intro{ font-size:var(--t-lead); color:var(--ink-soft); max-width:600px; margin-inline:auto; }

/* ---------- wins ---------- */
.wins{ display:grid; gap:var(--space-5); max-width:var(--container-narrow); margin-inline:auto; }
.win{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-3); align-items:start; }
.win__num{ font-family:var(--font-display); font-size:var(--t-h2); font-weight:500; color:var(--mist); line-height:1; }
.win__title{ font-size:24px; font-weight:500; margin-bottom:var(--space-1); }
.win__body{ color:var(--ink-soft); margin-bottom:var(--space-2); }
.win__example{ border-inline-start:2px solid var(--ink); padding-inline-start:var(--space-2); font-size:var(--t-small); color:var(--ink-soft); background:var(--paper); padding-block:var(--space-1); }

/* ---------- inside the book ---------- */
.inside{ max-width:760px; margin-inline:auto; }
.inside__cover{ max-width:320px; margin-inline:auto; }
.chapters{ list-style:none; margin:0; padding:0; }
.chapters li{ padding-block:var(--space-2); border-bottom:1px solid var(--hairline); display:flex; gap:var(--space-2); }
.chapters li:last-child{ border-bottom:0; }
.chapters .num{ color:var(--mist); font-family:var(--font-display); min-width:1.6em; }

/* ---------- praise ---------- */
.praise{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.praise__card{ border:1px solid var(--hairline); padding:var(--space-4); background:var(--paper); }
.praise__quote{ font-family:var(--font-display); font-size:var(--t-lead); line-height:1.35; margin-bottom:var(--space-3); }
.praise__by{ font-size:var(--t-small); color:var(--muted); }

/* ---------- author ---------- */
.author{ max-width:var(--container-narrow); margin-inline:auto; text-align:center; }
.author__body{ font-size:var(--t-lead); line-height:1.6; color:var(--ink-soft); }
.author__sign{ font-family:var(--font-display); font-size:var(--t-h2); margin-top:var(--space-3); }

/* ---------- buy ---------- */
.buy{ text-align:center; max-width:var(--container-narrow); margin-inline:auto; }
.buy__price{ font-family:var(--font-display); font-size:var(--t-hero); font-weight:700; margin-block:var(--space-2); }
.buy__includes{ list-style:none; padding:0; margin:var(--space-4) auto; display:inline-grid; gap:var(--space-1); text-align:start; }
.buy__includes li::before{ content:"✓"; margin-inline-end:var(--space-1); }
#paypal-buttons{ max-width:360px; margin:var(--space-4) auto 0; }
.buy__trust{ font-size:var(--t-small); color:var(--mist); margin-top:var(--space-3); }

/* ---------- footer + newsletter ---------- */
.footer{ background:var(--night); color:var(--paper); padding-block:var(--space-6); }
.footer .muted{ color:var(--mist); }
.newsletter{ max-width:480px; margin-inline:auto; text-align:center; }
.newsletter__form{ display:flex; gap:var(--space-1); margin-top:var(--space-3); }
.newsletter__form input{ flex:1; min-width:0; padding:14px 16px; border:1px solid var(--mist); background:transparent; color:var(--paper); font-family:var(--font-body); font-size:16px; border-radius:6px; }
.newsletter__form input::placeholder{ color:var(--mist); }
.newsletter__msg{ min-height:1.2em; margin-top:var(--space-2); font-size:var(--t-small); color:var(--mist); }
.footer__rights{ text-align:center; margin-top:var(--space-5); font-size:var(--t-tiny); color:var(--mist); }

/* ---------- image placeholder (empty slots) ---------- */
.ph{ display:flex; align-items:center; justify-content:center; aspect-ratio:3/4; background:var(--paper); border:1px solid var(--hairline); color:var(--mist); font-size:var(--t-small); }

/* ---------- checkout modal (site-controlled close over PayPal) ---------- */
.checkout-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:var(--space-3); }
.checkout-modal[hidden]{ display:none; }
.checkout-modal__backdrop{ position:absolute; inset:0; background:rgba(20,16,12,.6); }
.checkout-modal__panel{ position:relative; z-index:1; width:100%; max-width:440px; max-height:90vh; overflow-y:auto; background:var(--paper); color:var(--ink); border-radius:14px; padding:22px 22px 20px; box-shadow:0 24px 70px rgba(0,0,0,.4); text-align:center; }
.checkout-modal__close{ position:absolute; top:12px; left:12px; right:auto; width:40px; height:40px; padding:0; border:none; border-radius:50%; background:var(--paper-warm); color:var(--ink); font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease; }
.checkout-modal__close:hover{ background:var(--hairline); }
.checkout-modal__title{ font-family:var(--font-display); font-size:var(--t-lead); margin:0 0 4px; }
.checkout-modal__price{ font-family:var(--font-display); font-size:var(--t-h2); font-weight:700; margin-bottom:14px; }
.checkout-modal__trust{ margin-top:var(--space-3); font-size:var(--t-small); color:var(--muted); }
body.modal-open{ overflow:hidden; }

/* ---------- card-first checkout (Branch B), tuned for older users ---------- */
.co{ text-align:start; }
.co .checkout-modal__title, .co .checkout-modal__price{ text-align:center; }
.co__label{ display:block; font-weight:700; font-size:var(--t-small); margin-bottom:6px; }
.co__input{ width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:18px; padding:16px 14px; min-height:56px; border:1.5px solid var(--hairline); border-radius:10px; background:var(--paper); color:var(--ink); }
.co__input:focus{ outline:none; border-color:var(--ochre); box-shadow:0 0 0 3px rgba(192,120,43,.18); }
.co__note{ font-size:var(--t-tiny); color:var(--muted); margin:6px 0 14px; }
.co__lead{ text-align:center; font-family:var(--font-display); font-weight:700; font-size:var(--t-lead); margin:0 0 6px; }
.co__help{ text-align:center; font-size:var(--t-small); color:var(--ink-soft); margin:0 0 10px; }
.co__help--card{ font-weight:600; color:var(--ink); }
.co__btnwrap{ min-height:50px; margin-bottom:12px; }
.co__or{ display:flex; align-items:center; gap:12px; color:var(--mist); font-size:var(--t-small); margin:var(--space-2) 0; }
.co__or::before, .co__or::after{ content:""; height:1px; background:var(--hairline); flex:1; }
.co__msg{ color:#b3261e; font-size:var(--t-small); min-height:1.2em; margin:8px 0 0; text-align:center; }
.co__msg:empty{ min-height:0; margin:0; } /* reclaim the reserved error space when there is no message */
.co__trust{ margin-top:10px; border-top:1px solid var(--hairline); padding-top:10px; }
.co__trust-line{ font-size:var(--t-small); color:var(--ink-soft); margin:0 0 8px; text-align:center; }
/* Phase B: security badge + refund guarantee, encapsulated AT the pay button. */
.co__secure{ font-size:var(--t-small); color:var(--ink); font-weight:600; margin:0 0 4px; text-align:center; }
.co__encrypt{ font-size:var(--t-tiny); color:var(--ink-soft); margin:0 0 8px; text-align:center; }
.co__guarantee{ display:flex; align-items:flex-start; gap:6px; justify-content:center; text-align:center; font-size:var(--t-small); color:var(--ink-soft); background:var(--paper-warm); border:1px solid var(--hairline); border-radius:8px; padding:7px 10px; margin:0 0 8px; }
.co__guarantee-ic{ flex:none; font-weight:700; color:#2e7d32; }
/* Card-brand acceptance marks (decorative trust cues, self-hosted SVG, not buttons). */
.co__cards{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; }
.co__card{ height:24px; width:auto; display:block; }
/* FBAV redirect button (Phase C): the single pay button shown inside in-app webviews. */
.co__paybtn{ width:100%; margin-top:4px; }
.co__privacy, .co__contact{ text-align:center; font-size:var(--t-tiny); color:var(--muted); margin:var(--space-2) 0 0; }
.co__privacy a, .co__contact a{ text-decoration:underline; }
.co__contact{ font-size:var(--t-small); }
.co__processing{ position:absolute; inset:0; z-index:5; background:rgba(255,255,255,.93); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; font-size:var(--t-lead); color:var(--ink); }
.co__processing[hidden]{ display:none; }
.co__spinner{ width:44px; height:44px; border:4px solid var(--hairline); border-top-color:var(--ochre); border-radius:50%; animation:co-spin .9s linear infinite; }
@keyframes co-spin{ to{ transform:rotate(360deg); } }

/* ---------- download / unboxing page ---------- */
.dl{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--space-4) var(--space-3); background:linear-gradient(180deg,var(--paper-warm),#ECE6DC); }
.dl__card{ width:100%; max-width:560px; background:var(--paper); border:1px solid var(--hairline); border-radius:22px; padding:var(--space-6) var(--space-4) var(--space-5); box-shadow:0 30px 80px rgba(45,33,20,.13); text-align:center; }
.dl__badge{ width:66px; height:66px; margin:0 auto var(--space-3); border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:32px; line-height:1; }
.dl__badge--soft{ background:var(--paper-warm); color:var(--ink); border:1px solid var(--hairline); }
.dl__title{ font-family:var(--font-display); font-size:var(--t-h1); line-height:1.12; margin:0 0 var(--space-2); }
.dl__lead{ font-size:var(--t-lead); line-height:1.55; color:var(--ink-soft); max-width:44ch; margin:0 auto var(--space-5); }
.dl__items{ display:grid; gap:var(--space-2); text-align:start; }
.dl__item{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-4); border:1px solid var(--hairline); border-radius:16px; background:var(--paper-warm); text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.dl__item:hover{ border-color:var(--ink); transform:translateY(-1px); box-shadow:0 10px 24px rgba(45,33,20,.1); }
.dl__meta{ flex:1; min-width:0; }
.dl__label{ display:block; font-weight:700; font-size:var(--t-body); margin-bottom:2px; }
.dl__desc{ display:block; font-size:var(--t-small); color:var(--ink-soft); }
.dl__go{ flex:0 0 46px; width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:22px; }
.dl__note{ margin:var(--space-5) auto 0; font-size:var(--t-small); color:var(--ink-soft); max-width:46ch; }
.dl__tip{ margin:var(--space-2) auto 0; font-size:var(--t-small); color:var(--mist); max-width:46ch; }
.dl__help{ margin-top:var(--space-4); font-size:var(--t-small); color:var(--ink-soft); }
.dl__home{ display:inline-block; margin-top:var(--space-4); font-size:var(--t-small); color:var(--mist); }
/* tablet + desktop: a wider, roomier card with the two downloads as side-by-side
   tiles (arrow on top, label, description), so it reads as an intentional desktop
   layout rather than a phone card floating on a big screen. */
@media (min-width:769px){
  .dl{ padding:var(--space-6); }
  .dl__card{ max-width:640px; padding:var(--space-7) var(--space-6) var(--space-6); border-radius:26px; }
  .dl__badge{ width:74px; height:74px; font-size:36px; }
  .dl__items{ grid-template-columns:1fr 1fr; gap:var(--space-3); margin-top:var(--space-2); }
  .dl__item{ flex-direction:column; align-items:center; text-align:center; gap:var(--space-2); padding:var(--space-4) var(--space-3); }
  .dl__go{ order:-1; }
  .dl__note{ margin-top:var(--space-6); }
}

/* ---------- responsive ---------- */
@media (max-width:768px){
  .praise{ grid-template-columns:1fr; }
  .hero{ padding-block:var(--space-4) var(--space-5); }
  .btn{ display:block; width:100%; }
  /* (sticky-nav mobile rules live in their own @media (max-width:767px) block by the
     nav styles, so >=768px gets the inline desktop nav.) */
  .newsletter__form{ flex-direction:column; }
  /* Top-align on mobile so the priority content (price, email, button, security,
     guarantee, card logos) sits at the TOP of the screen and is visible without
     scrolling, including inside the Facebook in-app browser. A bottom sheet pinned
     the trust cues to the screen bottom (below the FBAV fold). */
  .checkout-modal{ padding:8px 8px 0; align-items:flex-start; }
  .checkout-modal__panel{ max-width:none; border-radius:14px; max-height:96vh; }
  .dl__card{ padding:var(--space-5) var(--space-3) var(--space-4); border-radius:18px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ============ CRO sections (conversion landing) ============ */
/* hero strong headline */
.hero__headline{ font-size:var(--t-h1); line-height:1.12; max-width:18ch; margin-inline:auto; }
/* CTA fill uses --ochre-dark so white label text clears WCAG AA 4.5:1 (plain
   --ochre was 3.49:1). Hover goes one shade darker. */
.btn--accent{ background:var(--ochre-dark); color:#fff; border-color:var(--ochre-dark); }
.btn--accent:hover{ background:var(--ochre-darker); color:#fff; border-color:var(--ochre-darker); }
.section--ink .btn--accent{ background:var(--ochre-dark); color:#fff; border-color:var(--ochre-dark); }
.section--ink .btn--accent:hover{ background:var(--ochre-darker); color:#fff; }

/* pain / empathy */
.pain__text{ font-family:var(--font-display); font-size:var(--t-h2); line-height:1.4; text-align:center; color:var(--ink); }

/* how it works (3 steps) */
.steps{ text-align:center; }
.steps__list{ list-style:none; margin:var(--space-4) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); }
.step{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2); color:var(--paper); }
.step__num{ width:54px; height:54px; border-radius:50%; border:2px solid var(--ochre); color:var(--ochre); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:24px; font-weight:700; }
.step__text{ font-size:var(--t-lead); }

/* reviews carousel */
.reviews__avg{ margin-top:var(--space-1); font-size:var(--t-lead); }
.reviews__avgnum{ font-family:var(--font-display); font-size:var(--t-h2); }
.reviews__star{ color:var(--star); }
.reviews{ position:relative; margin-top:var(--space-4); }
.reviews__viewport{ overflow:hidden; }
.reviews__track{ display:flex; gap:16px; transition:transform .45s ease; }
.review{ flex:0 0 100%; box-sizing:border-box; background:var(--paper); border:1px solid var(--hairline); border-radius:12px; padding:var(--space-4); text-align:start; box-shadow:0 2px 8px rgba(0,0,0,.07); }
.review__stars{ letter-spacing:2px; margin-bottom:var(--space-1); font-size:18px; color:var(--star); }
.review__body{ font-size:var(--t-body); line-height:1.55; color:var(--ink); margin:0 0 var(--space-2); }
.review__meta{ font-size:var(--t-small); color:var(--ink-soft); margin:0; }
.review__name{ font-weight:700; }
.review__verified{ display:inline-block; margin-inline-start:8px; color:var(--ochre-dark); font-weight:700; }
.reviews__arrow{ position:absolute; top:40%; transform:translateY(-50%); width:42px; height:42px; padding:0; border:none; border-radius:50%; background:var(--tint); color:var(--accent); font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.12); z-index:2; }
.reviews__arrow--prev{ right:-8px; left:auto; }
.reviews__arrow--next{ left:-8px; right:auto; }
.reviews__dots{ display:flex; justify-content:center; gap:8px; margin-top:var(--space-3); }
.reviews__dot{ width:24px; height:24px; padding:0; border:none; background:transparent; cursor:pointer; position:relative; display:inline-flex; }
.reviews__dot::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:var(--hairline); }
.reviews__dot.is-active::before{ background:var(--ochre); transform:translate(-50%,-50%) scale(1.3); }

/* gift */
.gift{ text-align:center; }

/* FAQ accordion */
.faq{ max-width:640px; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--hairline); padding:var(--space-2) 0; }
.faq__q{ font-family:var(--font-display); font-size:var(--t-lead); cursor:pointer; list-style:none; }
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{ content:"+"; float:left; color:var(--ochre); font-weight:700; }
.faq__item[open] .faq__q::after{ content:"\2212"; }
.faq__a{ margin:var(--space-2) 0 0; color:var(--ink-soft); line-height:1.55; }

/* buy urgency + consent */
.buy__urgency{ font-size:var(--t-small); color:var(--ochre); font-weight:700; margin-bottom:var(--space-3); }
.consent{ display:flex; align-items:flex-start; gap:10px; font-size:var(--t-small); color:var(--mist); max-width:46ch; margin:var(--space-2) auto 0; text-align:start; line-height:1.45; }
.consent input[type="checkbox"]{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; }
.consent span{ flex:1 1 auto; min-width:0; }
/* the waitlist consent fills the form width and reads right-to-left */
.wl__form .consent{ max-width:none; margin-top:0; color:var(--ink-soft); }
.footer__links{ margin-top:var(--space-3); }
.footer__links a{ color:var(--mist); }

/* waitlist page */
.wl{ min-height:60vh; max-width:560px; margin-inline:auto; padding:var(--space-5) var(--space-3); }
.wl__card{ background:var(--paper); border:1px solid var(--hairline); border-radius:18px; padding:var(--space-5) var(--space-4); margin-bottom:var(--space-4); box-shadow:0 14px 40px rgba(45,33,20,.08); }
.wl__title{ font-family:var(--font-display); font-size:var(--t-h1); margin:0 0 var(--space-2); }
.wl__title2{ font-family:var(--font-display); font-size:var(--t-h2); margin:0 0 var(--space-3); }
.wl__sub{ font-size:var(--t-lead); color:var(--ink-soft); }
.wl__teaser{ color:var(--ink-soft); }
.wl__form{ display:grid; gap:var(--space-2); margin-top:var(--space-3); }
.wl__form input:not([type="checkbox"]), .wl__form textarea{ width:100%; box-sizing:border-box; padding:13px 14px; border:1px solid var(--hairline); border-radius:8px; font:inherit; font-size:16px; background:var(--paper-warm); direction:rtl; text-align:right; }
.wl__msg{ min-height:1.2em; font-size:var(--t-small); color:var(--ochre-dark); }
.wl__back{ text-align:center; }
.wl__back a{ color:var(--mist); font-size:var(--t-small); }
.rating{ display:flex; gap:6px; font-size:30px; }
.rating__star{ background:none; border:none; padding:0 2px; cursor:pointer; color:var(--star-empty); line-height:1; min-width:34px; min-height:34px; }
.rating__star.on{ color:var(--star); }

@media (max-width:768px){
  .hero__headline{ font-size:var(--t-h2); }
  .steps__list{ grid-template-columns:1fr; gap:var(--space-3); }
  .review{ flex-basis:100%; }
  .reviews__arrow{ display:none; }   /* mobile: swipe only, no arrows */
}
@media (min-width:769px){
  .review{ flex-basis:calc(50% - 8px); }
}
@media (min-width:1100px){
  .review{ flex-basis:calc(33.333% - 11px); }
}

.dl__version{ margin-top:var(--space-2); font-size:var(--t-tiny); color:var(--mist); }

/* ============ organized site footer (RTL, multi-column) ============ */
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.6fr; gap:var(--space-5) var(--space-4); align-items:start; }
.footer__name{ font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--paper); margin-bottom:var(--space-1); }
.footer__tagline{ color:var(--mist); font-size:var(--t-small); line-height:1.5; margin:0 0 var(--space-2); max-width:34ch; }
.footer__secure{ color:var(--mist); font-size:var(--t-tiny); margin:0; }
.footer__col{ display:flex; flex-direction:column; }
.footer__h{ font-family:var(--font-body); font-weight:700; font-size:var(--t-small); letter-spacing:.04em; color:var(--paper); margin:0 0 var(--space-2); }
.footer__link{ color:var(--mist); font-size:var(--t-small); padding-block:6px; transition:color .15s ease; }
.footer__link:hover{ color:var(--paper); text-decoration:underline; }
.footer__news{ max-width:none; }
.footer__news .newsletter__form{ margin-top:0; }
.footer__news .consent{ color:var(--mist); margin-top:var(--space-2); max-width:none; }
.footer__news .footer__note{ color:var(--mist); font-size:var(--t-small); margin-bottom:var(--space-2); }
.footer .footer__rights{ border-top:1px solid rgba(255,255,255,.12); padding-top:var(--space-3); margin-top:var(--space-5); }
@media (max-width:768px){
  .footer__grid{ grid-template-columns:1fr 1fr; gap:var(--space-4) var(--space-3); }
  .footer__brand{ grid-column:1 / -1; }
  .footer__news{ grid-column:1 / -1; }
}
@media (max-width:430px){
  .footer__grid{ grid-template-columns:1fr; }
}

/* ============ about / author page ============ */
.about{ text-align:center; }
.about__title{ font-family:var(--font-display); font-size:var(--t-h1); margin:0 0 var(--space-3); }
.about__lead{ font-size:var(--t-lead); line-height:1.6; color:var(--ink-soft); max-width:46ch; margin-inline:auto; }
.about__body{ font-size:var(--t-body); line-height:1.7; }
.about__body p{ margin-bottom:var(--space-3); }
.about__vh{ font-family:var(--font-display); font-size:var(--t-h2); margin:var(--space-5) 0 var(--space-2); }
.about__values{ list-style:none; padding:0; margin:0 0 var(--space-4); display:grid; gap:var(--space-2); }
.about__values li{ position:relative; padding-inline-start:30px; line-height:1.55; }
.about__values li::before{ content:"✓"; position:absolute; inset-inline-start:0; top:0; color:var(--ochre); font-weight:700; }
.about__sign{ font-family:var(--font-display); font-size:var(--t-lead); color:var(--ink); margin-top:var(--space-4); }
.about__cta{ text-align:center; }
.about__price{ font-family:var(--font-display); font-size:var(--t-hero); font-weight:700; margin-block:var(--space-2); color:var(--paper); }
.about__ctanote{ font-size:var(--t-small); color:var(--mist); margin-top:var(--space-3); }

/* ============ funnel sections (rebuild) ============ */
/* anchor offset so the sticky nav never covers a section start */
[id]{ scroll-margin-top:80px; }


/* pain / agitation */
.pain__list{ list-style:none; padding:0; margin:var(--space-4) auto 0; max-width:46ch; display:grid; gap:var(--space-2); }
.pain__list li{ position:relative; padding-inline-start:26px; line-height:1.55; color:var(--ink-soft); }
.pain__list li::before{ content:"•"; position:absolute; inset-inline-start:4px; top:-2px; color:var(--ochre); font-size:22px; }

/* solution */
.solution__points{ list-style:none; padding:0; margin:var(--space-4) auto 0; max-width:560px; display:grid; gap:var(--space-2); }
.solution__points li{ position:relative; padding-inline-start:30px; line-height:1.55; font-size:var(--t-lead); }
.solution__points li::before{ content:"✓"; position:absolute; inset-inline-start:0; top:0; color:var(--ochre); font-weight:700; }

/* capability strip (extra outcomes) */
.caps{ margin-top:var(--space-5); border-top:1px solid var(--hairline); padding-top:var(--space-4); }
.caps__heading{ text-align:center; font-family:var(--font-display); font-size:var(--t-h2); margin:0 0 var(--space-3); }
.caps__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-2); max-width:var(--container-narrow); margin-inline:auto; }
.caps__item{ display:flex; align-items:center; gap:10px; background:var(--paper-warm); border:1px solid var(--hairline); border-radius:10px; padding:14px 16px; font-weight:600; }
.caps__item::before{ content:"✦"; color:var(--ochre); }

/* reviews neutral state (toggle OFF) */
.social-soon{ max-width:var(--container-narrow); }
.social-soon .lead{ margin-bottom:var(--space-4); }

/* author "read more" link */
.author__more{ margin-top:var(--space-3); }
.author__more a{ color:var(--ochre-dark); font-weight:700; text-decoration:underline; }

/* final close */
.final .lead{ max-width:50ch; margin-inline:auto; margin-bottom:var(--space-4); }

@media (max-width:430px){
  .caps__grid{ grid-template-columns:1fr; }
}

/* ============ download page (premium) additions ============ */
.dl__brand{ font-family:var(--font-display); font-weight:700; font-size:var(--t-small); letter-spacing:.04em; color:var(--ochre-dark); margin:0 0 var(--space-3); }
.dl__sent{ display:inline-flex; align-items:center; gap:8px; margin:var(--space-3) auto 0; font-size:var(--t-small); color:var(--ink-soft); background:var(--paper-warm); border:1px solid var(--hairline); border-radius:999px; padding:8px 16px; }
.dl__sent span{ color:var(--ochre-dark); }
.dl__first{ margin:var(--space-5) auto 0; max-width:46ch; text-align:start; background:var(--paper-warm); border:1px solid var(--hairline); border-inline-start:4px solid var(--ochre); border-radius:14px; padding:var(--space-3) var(--space-4); }
.dl__first-h{ display:block; font-family:var(--font-display); font-weight:700; font-size:var(--t-lead); margin-bottom:6px; }
.dl__first p{ margin:0; color:var(--ink-soft); line-height:1.55; }
.dl__help a, .dl__home:hover{ text-decoration:underline; }
.dl__help a{ color:var(--ochre-dark); font-weight:700; }

/* ============ trust row (under hero + buy CTAs) ============ */
/* Understated, premium: one calm row of line icons + payment wordmarks in a
   muted greyscale. Adapts color to light (hero) vs ink (buy) sections. */
.trustrow{ margin-top:var(--space-3); display:flex; flex-direction:column; align-items:center; gap:12px; color:#5f5f5f; }
.section--ink .trustrow{ color:var(--mist); }
.trustrow__items{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; }
.trustrow__item{ display:inline-flex; align-items:center; gap:7px; font-size:var(--t-tiny); letter-spacing:.04em; color:inherit; line-height:1.3; }
.trustrow__ic{ width:16px; height:16px; min-width:16px; max-width:16px; max-height:16px; flex:0 0 16px; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:none; opacity:.85; }
.trustrow__pay{ display:flex; align-items:center; gap:16px; }
/* opacity removed (was .6, which dragged the wordmarks to ~1.9:1); the inherited
   #5f5f5f grey + grayscale keeps them understated while clearing WCAG AA. */
.trustrow__logo{ height:24px; width:auto; display:block; }   /* real payment-brand logos (same assets as the checkout) */
@media (max-width:480px){
  .trustrow__items{ gap:6px 14px; }
  .trustrow__item{ font-size:11px; }
  .trustrow__pay{ gap:13px; }
}

/* ============ CRO v2: ATF hero, digital product, anchored price, value
   comparison, outcome bullets, repeated CTA. Mobile-first; overrides earlier
   .hero__cover sizing so the product + price + CTA sit above an FB-sized fold. */
.hero__product{ position:relative; display:block; width:fit-content; margin:var(--space-3) auto var(--space-4); }
/* The hero is a responsive <picture>. Keep .hero__product a centered block (width
   fit-content + margin auto), NOT inline-block, so the cover sits on its own line and
   never shares the centered inline line with the desktop CTAs (which are inline-block);
   the <picture> is a plain block wrapping the <img> (display:contents on the wrapper
   broke that inline-block centering on desktop). Modern browsers still fetch a tiny
   webp variant via <source>; the 1.63MB DB cover is only the no-<source> fallback. */
.hero__product picture{ display:block; }
.hero__cover{ max-width:240px; margin:0 auto; display:block; }
.hero__format{ position:absolute; left:50%; right:auto; inset-block-end:8px; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:var(--t-tiny); font-weight:700; letter-spacing:.02em;
  padding:5px 13px; border-radius:999px; white-space:nowrap; box-shadow:0 2px 10px rgba(0,0,0,.22); }

/* anchored price: struck regular next to the real launch price */
.pricetag{ white-space:nowrap; }
/* opacity:.9 (was .6) keeps the strikethrough anchor legible against the dark
   CTA fill at WCAG AA; the line-through + weight 400 still de-emphasise it. */
.pricetag__was{ text-decoration:line-through; opacity:.9; font-weight:400; margin-inline-end:.2em; }
.pricetag__now{ font-weight:700; }
.buy__was{ color:var(--mist); text-decoration:line-through; font-weight:400; font-size:.55em; margin-inline-end:.18em; vertical-align:middle; }

/* repeated primary CTA after each major section */
.cta-row{ text-align:center; margin-top:var(--space-4); }

/* outcomes-led "what's inside" (results first, chapters as support) */
.outcomes{ list-style:none; margin:var(--space-3) 0 var(--space-4); padding:0; display:grid; gap:var(--space-2); }
.outcomes li{ position:relative; padding-inline-start:30px; font-size:var(--t-body); line-height:1.5; color:var(--ink); }
.outcomes li::before{ content:"\2713"; position:absolute; inset-inline-start:0; top:0; color:var(--ochre); font-weight:700; }
.chapters__h{ font-family:var(--font-body); font-size:var(--t-small); font-weight:700; color:var(--ink-soft); margin:var(--space-3) 0 var(--space-1); }

/* price-context (value) section */
.value{ text-align:center; }
.value__compare{ display:flex; gap:var(--space-3); justify-content:center; align-items:stretch; margin:var(--space-4) auto 0; max-width:520px; }
.value__col{ flex:1 1 0; min-width:0; background:var(--paper); border:1px solid var(--hairline); border-radius:14px; padding:var(--space-3) var(--space-2); display:flex; flex-direction:column; gap:6px; justify-content:center; }
.value__col--ours{ border-color:var(--ochre); box-shadow:0 6px 22px rgba(192,121,43,.16); }
.value__amt{ font-family:var(--font-display); font-size:var(--t-h2); font-weight:700; line-height:1.1; }
.value__col--alt .value__amt{ color:#6f6f6f; }
.value__col--ours .value__amt{ color:var(--ochre-dark); }
.value__lbl{ font-size:var(--t-small); color:var(--ink-soft); }
.value__mission{ max-width:540px; margin:var(--space-3) auto 0; color:var(--ink-soft); font-size:var(--t-small); line-height:1.55; }

@media (max-width:768px){
  /* compact hero so H1 + promise + product + price + CTA clear an FB-sized fold
     (~650px visible on a 375x812 phone after the in-app browser chrome). */
  .hero{ padding-block:var(--space-2) var(--space-3); }
  .hero .eyebrow{ margin-bottom:var(--space-1); font-size:var(--t-tiny); }
  .hero__subtitle{ font-size:var(--t-body); line-height:1.4; margin-bottom:var(--space-1); }
  .hero__product{ margin:var(--space-1) auto var(--space-2); }
  .hero__cover{ max-width:150px; }
  .outcomes li{ font-size:var(--t-small); }
  .value__compare{ gap:var(--space-2); }
  .value__amt{ font-size:var(--t-lead); }
}

/* ============ free taste ("read a sample") ============ */
/* Secondary, co-primary CTA next to the solid buy button: outlined ochre so buy
   stays the single dominant action while the taste reads as a clear second path. */
.btn--ghost{ background:transparent; color:var(--ochre-dark); border-color:var(--ochre); }
.btn--ghost:hover{ background:rgba(192,121,43,.08); color:var(--ochre-dark); border-color:var(--ochre); }
.taste-open{ margin-top:var(--space-2); }

/* Full-screen in-page overlay holding the sample reader (no popup; FBAV-safe). */
.taste-overlay{ position:fixed; inset:0; z-index:1000; display:none; background:#2A2015; }
.taste-overlay.is-open{ display:block; }
.taste-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
/* close pinned to the RTL far edge: set right:auto so the left value is honored */
.taste-close{ position:absolute; top:10px; left:10px; right:auto; z-index:2;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; font-size:26px; line-height:38px; text-align:center;
  -webkit-tap-highlight-color:transparent; }
body.taste-open-lock{ overflow:hidden; }

/* ============ blog: index cards + article ============ */
.bloglist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-4); margin-bottom:var(--space-5); }
.bcard{ border:1px solid var(--hairline); border-radius:14px; background:var(--paper); overflow:hidden; transition:box-shadow .15s ease, transform .15s ease; }
.bcard:hover{ box-shadow:0 8px 26px rgba(0,0,0,.10); transform:translateY(-2px); }
.bcard__link{ display:flex; flex-direction:column; padding:0 0 var(--space-3); height:100%; }
.bcard__cover{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; margin-bottom:var(--space-2); }
.bcard__title{ font-family:var(--font-display); font-size:var(--t-lead); line-height:1.3; margin:var(--space-3) var(--space-3) var(--space-2); }
.bcard__excerpt{ color:var(--ink-soft); font-size:var(--t-small); line-height:1.6; margin:0 var(--space-3) var(--space-3); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bcard__meta{ color:var(--muted); font-size:var(--t-tiny); margin:auto var(--space-3) 0; padding-top:var(--space-2); border-top:1px solid var(--hairline); }

.crumbs{ font-size:var(--t-tiny); color:var(--muted); margin-bottom:var(--space-3); }
.crumbs a{ color:var(--ochre-dark); text-decoration:underline; }
.article__h1{ font-family:var(--font-display); font-size:var(--t-h1); line-height:1.15; margin:0 0 var(--space-2); }
.article__meta{ color:var(--muted); font-size:var(--t-small); margin-bottom:var(--space-3); }
.article__cover{ width:100%; height:auto; border-radius:14px; margin-bottom:var(--space-4); }
.article__toc{ background:var(--paper-warm); border:1px solid var(--hairline); border-inline-start:4px solid var(--ochre); border-radius:12px; padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4); }
.article__toc ul{ margin:var(--space-1) 0 0; padding-inline-start:1.2em; }
.article__toc a{ color:var(--ochre-dark); }
.article__body{ font-size:var(--t-body); line-height:1.7; color:var(--ink); }
.article__body h2{ font-family:var(--font-display); font-size:var(--t-h2); line-height:1.2; margin:var(--space-5) 0 var(--space-2); scroll-margin-top:70px; }
.article__body h3{ font-family:var(--font-display); font-size:var(--t-lead); margin:var(--space-4) 0 var(--space-1); }
.article__body p{ margin:0 0 var(--space-3); }
.article__body ul, .article__body ol{ margin:0 0 var(--space-3); padding-inline-start:1.4em; display:grid; gap:6px; }
.article__body li{ line-height:1.6; }
.article__body blockquote{ margin:0 0 var(--space-3); padding:var(--space-2) var(--space-4); border-inline-start:4px solid var(--ochre); background:var(--paper-warm); border-radius:0 10px 10px 0; font-style:italic; }
/* Prose links only: must NOT repaint button CTAs inside the body (the inline buy
   button is an <a class="btn btn--accent"> here). Without :not(.btn) this (0,1,1)
   selector beat .btn--accent (0,1,0) and painted the white label brown-on-brown. */
.article__body a:not(.btn){ color:var(--ochre-dark); text-decoration:underline; }
.article__body strong{ font-weight:700; }

.article__faq{ margin-top:var(--space-5); }
.article__faq h2, .article__cta-h{ font-family:var(--font-display); font-size:var(--t-h2); margin:0 0 var(--space-2); }
.article__cta{ margin-top:var(--space-5); padding:var(--space-4); background:var(--paper-warm); border:1px solid var(--hairline); border-radius:16px; text-align:center; }
.article__cta-sample{ font-size:var(--t-small); color:var(--ink-soft); margin-top:var(--space-2); }
.article__cta-sample a{ color:var(--ochre-dark); font-weight:700; text-decoration:underline; }
.article__news{ margin-top:var(--space-4); padding:var(--space-4); border:1px dashed var(--hairline); border-radius:16px; }
.article__newsform{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.article__newsform input[type="email"]{ flex:1; min-width:220px; padding:13px 15px; border:1px solid var(--mist); border-radius:8px; font-size:16px; }
.article__newsform .consent{ flex-basis:100%; font-size:var(--t-tiny); color:var(--muted); }
.article__newsform .newsletter__msg{ flex-basis:100%; min-height:1.2em; font-size:var(--t-small); color:var(--ochre-dark); }
.article__related{ margin-top:var(--space-5); }

/* ============ blog conversion elements (sell the book, tastefully) ============ */
/* index promo band (section--ink supplies the dark bg) */
.blogpromo__txt{ font-size:var(--t-lead); color:var(--ink); margin-bottom:var(--space-3); }
.blogpromo__sample{ margin-top:var(--space-2); }
.blogpromo__sample a{ color:var(--ochre-dark); text-decoration:underline; }

/* soft inline CTA, mid-article (after the value is delivered) */
.inlinecta{ margin:var(--space-5) 0; padding:var(--space-3) var(--space-4); background:var(--paper-warm); border:1px solid var(--hairline); border-inline-start:4px solid var(--ochre); border-radius:14px; text-align:center; }
.inlinecta__txt{ margin-bottom:var(--space-2); color:var(--ink); font-size:var(--t-body); line-height:1.6; }

/* end-of-article CTA: the primary conversion point */
.endcta{ margin-top:var(--space-5); padding:var(--space-4); background:var(--paper-warm); border:1px solid var(--hairline); border-radius:18px; display:flex; gap:var(--space-4); align-items:center; }
.endcta__media{ flex:0 0 auto; }
.endcta__cover{ width:140px; height:auto; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.18); display:block; }
.endcta__body{ flex:1 1 auto; }
.endcta__h{ font-family:var(--font-display); font-size:var(--t-h2); margin:0 0 var(--space-1); }
.endcta__pitch{ color:var(--ink-soft); margin-bottom:var(--space-2); line-height:1.5; }
.endcta__guarantee{ font-size:var(--t-small); color:var(--ink-soft); margin-bottom:var(--space-3); }
.endcta__guarantee span{ color:var(--ochre-dark); font-weight:700; }
.endcta__sample{ font-size:var(--t-small); color:var(--ink-soft); margin-top:var(--space-2); }
.endcta__sample a{ color:var(--ochre-dark); font-weight:700; text-decoration:underline; }
@media(max-width:560px){
  .endcta{ flex-direction:column; text-align:center; }
  .endcta__cover{ width:120px; }
  /* the buy CTA here is a btn--lg (18px / 44px padding): too tall and the long
     label wraps on a phone. Shrink to a normal, tidy full-width button. */
  .endcta .cta-row .btn{ font-size:15px; padding:13px 16px; letter-spacing:0; }
  .endcta .cta-row{ margin-top:var(--space-3); }
}

/* email capture stays, visually subordinate to the buy CTA */
.article__news-h{ font-size:var(--t-small); color:var(--ink-soft); margin:0 0 var(--space-2); }

/* sticky mobile buy bar: unobtrusive, dismissible, mobile-only, never on desktop */
.buybar{ display:none; }
@media(max-width:768px){
  .buybar:not([hidden]){ position:fixed; inset-inline:0; bottom:0; z-index:900; display:flex; align-items:center; gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--ink); color:var(--paper);
    box-shadow:0 -4px 18px rgba(0,0,0,.28); }
  .buybar__price{ flex:1 1 auto; min-width:0; font-size:var(--t-small); font-weight:700; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* override the global mobile .btn (display:block; width:100%) so the sticky CTA
     stays a compact, single-line button inside the bar, never a giant block. */
  .buybar__btn{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:auto; white-space:nowrap; font-size:var(--t-small); line-height:1; padding:11px 20px; }
  .buybar__close{ flex:0 0 auto; width:40px; height:40px; border:none; background:transparent; color:var(--paper); font-size:24px; line-height:1; cursor:pointer; border-radius:8px; }
  body.buybar-on{ padding-bottom:74px; }
}