/* ==========================================================================
   BRAVE MINDS CLUB — landing page styles
   Mobile-first. Designed from 360px up.
   Colour tokens are contrast-checked for WCAG AA (see README -> Accessibility).
   ========================================================================== */

:root{
  /* Brand palette */
  --navy:#16324F;
  --navy-deep:#0E2740;
  --navy-soft:#1E4267;
  --cream:#FFF8ED;
  --cream-warm:#FFF1DE;
  --coral:#F46F5E;        /* accent / illustration only */
  --coral-cta:#CE4429;    /* CTA background — white text = 4.7:1 */
  --coral-hover:#B23A20;
  --coral-deep:#BF3C20;   /* coral as TEXT on light = 5.1:1 */
  --yellow:#F4C95D;
  --teal:#3FA7A3;         /* accent / illustration only */
  --teal-deep:#26706E;    /* teal as TEXT on light = 5.2:1 on sky, 5.4:1 on cream */
  --sky:#EAF5F7;
  --sky-deep:#DDF0F0;
  --peach:#FFE9DF;
  --white:#FFFFFF;
  --ink:#263238;
  --ink-soft:#4C5A62;

  /* Type */
  --font-head:'Nunito Sans','Trebuchet MS','Avenir Next',Verdana,sans-serif;
  --font-body:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;

  /* Space + shape */
  --wrap:1140px;
  --gutter:20px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --shadow-sm:0 2px 8px rgba(22,50,79,.07);
  --shadow-md:0 10px 28px rgba(22,50,79,.10);
  --shadow-lg:0 18px 48px rgba(22,50,79,.16);
  --sticky-h:0px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:var(--sticky-h);
}

img,svg{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy);margin:0 0 .5em;line-height:1.15;letter-spacing:-.01em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}   /* browsers add 40px side margins to figure by default */
strong{font-weight:700}
s{text-decoration-thickness:2px}
em{font-style:italic}

a{color:var(--teal-deep)}
a:hover{color:var(--coral-deep)}

/* ---------- focus + motion ---------- */
:focus-visible{
  outline:3px solid var(--coral-cta);
  outline-offset:3px;
  border-radius:4px;
}
.section--navy :focus-visible,.final :focus-visible{outline-color:var(--yellow)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:var(--cream);
  padding:14px 20px;border-radius:0 0 var(--r-sm) 0;
  font-family:var(--font-head);font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}

/* Grid/flex items must be allowed to shrink below an image's intrinsic width,
   otherwise a wide SVG forces the whole track wider than the viewport. */
.hero__grid>*,.hero__visual>*,.promise__grid>*,.final__grid>*,.book>*,
.guarantee>*,.bonus>*,.carousel__slide{min-width:0}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:820px}

.section{padding:56px 0}
.section--cream{background:var(--cream)}
.section--sky{background:var(--sky)}
.section--navy{background:var(--navy);color:var(--sky)}
.section--navy h2,.section--navy h3,.section--navy h4{color:var(--cream)}

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--font-head);font-size:.78rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-deep);margin:0 0 .7em;
}
.eyebrow--coral{color:var(--coral-deep)}
.eyebrow--yellow{color:var(--yellow)}

.h2{font-size:1.72rem;font-weight:800;margin-bottom:.5em}
.h3{font-size:1.24rem;font-weight:800}
.h4{font-size:1.05rem;font-weight:800}

.lead{font-size:1.06rem;color:var(--ink-soft);max-width:62ch}
.section--navy .lead{color:#C9DEE4}

.footnote{margin-top:26px;font-size:.88rem;color:var(--ink-soft);max-width:62ch}

.microcopy{margin:12px 0 0;font-size:.86rem;color:var(--ink-soft);text-align:center;line-height:1.5}
.microcopy--light{color:#B7CFD8}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:54px;padding:14px 26px;
  font-family:var(--font-head);font-size:1.02rem;font-weight:800;line-height:1.2;
  text-decoration:none;text-align:center;
  border:2px solid transparent;border-radius:999px;cursor:pointer;
  transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease;
}
.btn--primary{background:var(--coral-cta);color:var(--white);box-shadow:0 6px 18px rgba(206,68,41,.32)}
.btn--primary:hover{background:var(--coral-hover);color:var(--white);transform:translateY(-2px);box-shadow:0 10px 24px rgba(206,68,41,.36)}
.btn--primary:active{transform:translateY(0);background:#9E3219;box-shadow:0 3px 10px rgba(206,68,41,.3)}
.btn--ghost{background:transparent;color:var(--navy);border-color:rgba(22,50,79,.28)}
.btn--ghost:hover{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.btn--block{display:flex;width:100%}
.btn--sm{min-height:48px;padding:11px 20px;font-size:.94rem}
.btn--lg{min-height:60px;font-size:1.1rem}
.btn__label{display:inline}
.btn__arrow{flex:0 0 auto;transition:transform .16s ease}
.btn:hover .btn__arrow{transform:translateX(3px)}

.ctablock{margin-top:36px;text-align:center}
.ctablock .btn{width:100%;max-width:420px}
.ctablock--left{text-align:left}
.ctablock--left .btn{width:auto}

/* ---------- countdown bar ---------- */
.countbar{background:var(--coral-cta);color:#FFFFFF}
.countbar[hidden]{display:none}
.countbar__inner{
  max-width:var(--wrap);margin:0 auto;padding:8px var(--gutter);
  display:flex;align-items:center;justify-content:center;gap:5px 9px;
  flex-wrap:wrap;text-align:center;
  font-family:var(--font-head);font-size:.8rem;font-weight:800;letter-spacing:.02em;
}
.countbar__icon{display:flex;flex:0 0 auto}
.countbar__time{
  background:rgba(0,0,0,.22);border-radius:8px;padding:3px 10px;
  font-variant-numeric:tabular-nums;   /* stops the digits jittering */
  letter-spacing:.08em;
}

/* ---------- announcement bar ---------- */
.announce{background:var(--navy-deep);color:var(--cream)}
.announce__inner{
  max-width:var(--wrap);margin-inline:auto;padding:9px var(--gutter);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.35em .55em;
  font-family:var(--font-head);font-size:.78rem;font-weight:700;
  letter-spacing:.05em;text-align:center;
}
.announce__dot{color:var(--yellow)}

/* ---------- masthead ---------- */
.masthead{background:var(--white);border-bottom:1px solid rgba(22,50,79,.10)}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.masthead__cta{display:none}

.brand{display:inline-flex;align-items:center;text-decoration:none}
/* Horizontal lockup, ~7.3:1. Height drives the size; width follows. */
.brand__logo{height:28px;width:auto;transition:opacity .16s ease}
.brand:hover .brand__logo{opacity:.82}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background:
    radial-gradient(120% 90% at 50% 0%,var(--cream-warm) 0%,var(--cream) 55%,var(--white) 100%);
  padding:34px 0 48px;
}
.hero__title{
  font-size:2rem;font-weight:900;letter-spacing:-.02em;line-height:1.14;margin-bottom:.45em;
}
.hero__title em{display:block;font-style:normal;color:var(--coral-deep);margin-top:.18em}
.hero__sub{font-size:1.06rem;color:var(--ink-soft);max-width:56ch;margin-bottom:0}

/* Mobile: unwrap the visual column so copy -> mockup -> offer -> formats can be
   ordered independently, keeping the price on screen as early as possible. */
.hero__grid{display:flex;flex-direction:column}
.hero__visual{display:contents}
.hero__copy{order:1}
.hero__art{order:2;margin:26px 0 0}
.hero__art img,.final__art img{
  filter:drop-shadow(0 16px 26px rgba(22,50,79,.26));
}
.hero__offer{order:3}
.formats{order:4}
.hero__art img{width:100%}
.hero__artcap{
  margin-top:6px;text-align:center;font-size:.8rem;color:var(--ink-soft);
  font-family:var(--font-head);font-weight:600;letter-spacing:.02em;
}

.hero__offer{margin-top:26px}

.ticks{display:grid;gap:11px;margin-bottom:24px}
.ticks li{position:relative;padding-left:34px;font-size:1rem;line-height:1.45}
.ticks li::before{
  content:"";position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:50%;
  background:var(--teal-deep);
}
.ticks li::after{
  content:"";position:absolute;left:7px;top:8px;width:9px;height:5px;
  border-left:2.5px solid var(--cream);border-bottom:2.5px solid var(--cream);
  transform:rotate(-45deg);
}

/* offer box */
.offerbox{
  background:var(--white);border:2px solid rgba(22,50,79,.12);
  border-radius:var(--r-lg);padding:22px 20px;box-shadow:var(--shadow-md);
}
.offerbox__name{
  font-family:var(--font-head);font-weight:800;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal-deep);margin-bottom:.5em;text-align:center;
}
.offerbox__price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:10px;margin-bottom:16px}
.offerbox__now{font-family:var(--font-head);font-size:2.1rem;font-weight:900;color:var(--navy);line-height:1}
.offerbox__was{font-size:.95rem;color:var(--ink-soft)}

.deadline{
  margin:0 0 14px;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--cream-warm);border:1px dashed var(--coral-deep);
  font-family:var(--font-head);font-size:.86rem;font-weight:700;color:var(--coral-deep);
  text-align:center;
}
.deadline--light{background:rgba(244,201,93,.14);border-color:var(--yellow);color:var(--yellow)}

.trustrow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin-top:20px}
.trustrow li{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-head);font-size:.86rem;font-weight:700;color:var(--navy);
}
.trustrow__ico{display:flex;color:var(--teal-deep)}

.formats{margin:28px 0 0}
.formats img{border-radius:var(--r-md)}
.formats figcaption{
  margin-top:8px;text-align:center;font-size:.86rem;color:var(--ink-soft);
  font-family:var(--font-head);font-weight:600;
}

/* ==========================================================================
   SOCIAL PROOF · testimonial marquee + statistics bar
   --------------------------------------------------------------------------
   The track holds the card list twice and slides to -50%. Each group carries
   a trailing gap equal to its internal gap, so half the track is exactly one
   group — that is what makes the loop seamless. Transform only; no JS per frame.
   ========================================================================== */
.sproof{background:var(--sky);padding:44px 0 48px}
.sproof[hidden]{display:none}
.sproof__head{margin-bottom:22px}
.sproof__title{margin-bottom:0;font-size:1.55rem}

/* ---------- marquee ---------- */
.sproof__marquee{
  --sproof-gap:20px;
  --sproof-duration:44s;
  position:relative;
  max-width:var(--wrap);
  margin:0 auto 30px;
  overflow:hidden;
  /* soft edges: cards dissolve instead of being cut off */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.sproof__marquee[hidden]{display:none}
.sproof__track{
  display:flex;width:max-content;
  animation:sproof-scroll var(--sproof-duration) linear infinite;
}
.sproof__group{
  display:flex;flex:0 0 auto;align-items:stretch;
  gap:var(--sproof-gap);
  padding-right:var(--sproof-gap);   /* makes one group = exactly 50% of track */
  margin:0;padding-block:6px;list-style:none;
}
@keyframes sproof-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* Pause for pointer users; touch devices keep scrolling naturally. */
@media (hover:hover) and (pointer:fine){
  .sproof__marquee:hover .sproof__track{animation-play-state:paused}
}

/* ---------- card ---------- */
.sproof__card{
  flex:0 0 auto;
  width:clamp(280px,80vw,320px);
  display:flex;flex-direction:column;gap:9px;
  min-height:196px;
  padding:19px 20px;
  background:var(--white);
  border:1px solid var(--sky-deep);
  border-radius:18px;
  box-shadow:0 2px 10px rgba(22,50,79,.05);
}
.sproof__stars{
  margin:0;color:var(--yellow);font-size:1rem;letter-spacing:.14em;line-height:1;
}
.sproof__quote{margin:0;flex:1 1 auto}
.sproof__quote p{
  margin:0;font-size:.97rem;line-height:1.5;color:var(--navy);
}
.sproof__author{margin:0;display:flex;flex-direction:column;gap:1px}
.sproof__name{
  font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--navy);
}
.sproof__meta{font-size:.83rem;color:var(--ink-soft)}

/* ---------- statistics bar ---------- */
.sproof__stats{
  margin:0;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:22px 10px;
  padding:24px 18px;
  background:var(--navy);
  border-radius:20px;
}
.sproof__stats[hidden]{display:none}
.sproof__stat{text-align:center}
.sproof__statnum{
  margin:0 0 3px;
  font-family:var(--font-head);font-weight:900;font-size:1.72rem;line-height:1.1;
  color:var(--yellow);
}
.sproof__statlabel{margin:0;font-size:.82rem;line-height:1.35;color:#C9DEE4}

@media (min-width:600px){
  .sproof__title{font-size:1.9rem}
  .sproof__stats{padding:26px 20px}
}
@media (min-width:900px){
  .sproof{padding:60px 0 64px}
  .sproof__stats{grid-template-columns:repeat(4,1fr);gap:0;padding:26px 12px}
  /* subtle separators, desktop only */
  .sproof__stat + .sproof__stat{border-left:1px solid rgba(255,248,237,.16)}
  .sproof__statnum{font-size:1.95rem}
}

/* Reduced motion: no travel. The row becomes a plain scrollable strip. */
@media (prefers-reduced-motion:reduce){
  .sproof__marquee{
    overflow-x:auto;
    -webkit-mask-image:none;mask-image:none;
    scroll-snap-type:x proximity;
    padding-inline:var(--gutter);
  }
  .sproof__track{animation:none;width:auto}
  .sproof__group[aria-hidden="true"]{display:none}
  .sproof__card{scroll-snap-align:start}
}

/* ==========================================================================
   RECOGNITION
   ========================================================================== */
.recog{display:grid;gap:14px;margin-top:26px}
.recog__item{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--white);border-radius:var(--r-md);padding:18px;
  box-shadow:var(--shadow-sm);border-left:5px solid var(--coral);
}
.recog__num{
  font-family:var(--font-head);font-weight:900;font-size:1rem;color:var(--coral-deep);
  flex:0 0 auto;padding-top:2px;
}
.recog__item p{margin:0;font-size:1.02rem}

.pullquote{
  margin:30px 0 0;padding:24px 22px;
  background:var(--navy);color:var(--cream);border-radius:var(--r-lg);
  font-family:var(--font-head);font-size:1.16rem;font-weight:700;line-height:1.45;
}

/* ==========================================================================
   METHOD
   ========================================================================== */
.method__name{
  margin:26px 0 18px;font-family:var(--font-head);font-size:1.3rem;font-weight:900;color:var(--navy);
}
.method__name .tm{font-size:.6em;vertical-align:super;font-weight:700}

.method{display:grid;gap:16px;counter-reset:step}
.method__step{
  position:relative;background:var(--white);border-radius:var(--r-lg);
  padding:24px 20px 20px;box-shadow:var(--shadow-sm);border-top:5px solid var(--coral);
}
.method__step--2{border-top-color:var(--teal)}
.method__step--3{border-top-color:var(--yellow)}
.method__badge{
  position:absolute;top:-19px;left:20px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--coral-cta);color:var(--white);
  font-family:var(--font-head);font-weight:900;font-size:1.05rem;
  border:3px solid var(--sky);
}
.method__step--2 .method__badge{background:var(--teal-deep)}
.method__step--3 .method__badge{background:var(--navy)}
.method__step .h3{margin:6px 0 .3em;font-size:1.36rem}
.method__what{margin-bottom:.6em;font-weight:600;color:var(--navy)}
.method__eg{margin:0;font-size:.95rem;color:var(--ink-soft)}
.method__eglabel{font-family:var(--font-head);font-weight:800;color:var(--teal-deep)}

/* ==========================================================================
   BOOKS
   ========================================================================== */
.book{
  display:grid;gap:22px;margin-top:34px;padding:24px 20px;
  background:var(--cream);border-radius:var(--r-xl);
}
.book__cover img{
  width:min(240px,72%);margin-inline:auto;
  filter:drop-shadow(0 14px 22px rgba(22,50,79,.30));
}
.book__tag{
  display:inline-block;margin:0 0 .7em;padding:6px 15px;border-radius:999px;
  background:var(--coral-cta);color:var(--white);
  font-family:var(--font-head);font-size:.74rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
}
.book__tag--2{background:var(--teal-deep)}
.book__tag--3{background:var(--navy)}
.book__title{font-size:1.5rem;margin-bottom:.4em}
.book__outcome{
  margin-bottom:.9em;padding:12px 15px;border-radius:var(--r-sm);
  background:var(--white);border-left:4px solid var(--yellow);
  font-size:.98rem;font-weight:600;color:var(--navy);
}
.book__outcomelabel{display:block;font-family:var(--font-head);font-size:.74rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep)}
.book__desc{color:var(--ink-soft)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chips li{
  background:var(--white);border:1px solid rgba(22,50,79,.14);
  border-radius:999px;padding:7px 14px;font-size:.88rem;color:var(--navy);
}

.book__peek{margin:20px 0 0}
.book__peek img{border-radius:var(--r-md);box-shadow:var(--shadow-md);border:1px solid rgba(22,50,79,.1)}

.specs{margin-top:36px;padding:26px 20px;background:var(--sky);border-radius:var(--r-xl)}
.specs__title{margin-bottom:.8em}
.specs__list{display:grid;gap:10px}
.specs__list li{position:relative;padding-left:26px;font-size:.98rem}
.specs__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;border-radius:3px;
  background:var(--teal-deep);
}

/* ==========================================================================
   DELIVERY STEPS
   ========================================================================== */
.steps{display:grid;gap:18px;margin-top:28px}
.steps__item{
  background:var(--navy-soft);border-radius:var(--r-lg);padding:22px 20px;
  border:1px solid rgba(255,248,237,.12);
}
.steps__n{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;margin-bottom:14px;
  background:var(--yellow);color:var(--navy);
  font-family:var(--font-head);font-weight:900;font-size:1.1rem;
}
.steps__item p{margin:0;color:#C9DEE4;font-size:.98rem}

.notice{
  margin-top:26px;padding:18px 20px;border-radius:var(--r-md);
  background:rgba(244,201,93,.13);border:1px solid var(--yellow);
  color:var(--cream);font-size:.98rem;
}
.notice strong{color:var(--yellow)}
.notice--soft{
  background:var(--white);border-color:rgba(22,50,79,.16);color:var(--ink-soft);
  margin-top:30px;
}

/* ==========================================================================
   OUTCOMES
   ========================================================================== */
.outcomes{display:grid;gap:12px;margin-top:26px}
.outcomes li{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--white);border-radius:var(--r-md);padding:15px 17px;
  box-shadow:var(--shadow-sm);font-size:1rem;color:var(--navy);font-weight:600;
}
.outcomes li::before{
  content:"";flex:0 0 auto;width:10px;height:10px;margin-top:.5em;border-radius:50%;
  background:var(--coral-cta);
}

/* ==========================================================================
   PROMISE
   ========================================================================== */
.promise{background:var(--cream-warm)}
.promise__art img{border-radius:var(--r-xl);box-shadow:var(--shadow-md)}
.promise__copy{margin-top:26px}

/* ==========================================================================
   SCENARIOS
   ========================================================================== */
.scen{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:26px}
.scen__item{
  background:var(--white);border-radius:var(--r-md);padding:18px 14px;
  text-align:center;box-shadow:var(--shadow-sm);
}
.scen__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;margin-bottom:10px;
  background:var(--sky-deep);color:var(--teal-deep);
}
.scen__item p{margin:0;font-size:.94rem;font-weight:600;color:var(--navy);line-height:1.35}

/* ==========================================================================
   BONUSES
   ========================================================================== */
.bonuses{display:grid;gap:22px;margin-top:28px}
.bonus{
  background:var(--cream);border-radius:var(--r-xl);padding:20px;
  border:1px solid rgba(22,50,79,.08);
}
.bonus__art img{border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.bonus__tag{
  display:inline-block;margin:16px 0 .6em;padding:5px 13px;border-radius:999px;
  background:var(--yellow);color:var(--navy);
  font-family:var(--font-head);font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
}
.bonus h3{margin-bottom:.45em}
.bonus>p{color:var(--ink-soft);font-size:.98rem}
.bonus__list{display:grid;gap:8px;margin-top:14px}
.bonus__list li{
  position:relative;padding-left:22px;font-size:.93rem;color:var(--navy);
}
.bonus__list li::before{
  content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;
  background:var(--coral-cta);
}

/* ==========================================================================
   WHO IT IS FOR
   ========================================================================== */
.who{display:grid;gap:14px;margin-top:26px}
.who__item{
  background:var(--white);border-radius:var(--r-md);padding:20px;
  box-shadow:var(--shadow-sm);border-bottom:4px solid var(--sky-deep);
}
.who__item h3{margin-bottom:.35em}
.who__item p{margin:0;font-size:.95rem;color:var(--ink-soft)}

/* ==========================================================================
   COMPARISON
   Mobile: each row becomes a card. Desktop: a real table.
   Meaning is never carried by colour alone — every mark has a text label.
   ========================================================================== */
.cmp__scroll{margin-top:26px}
.cmp{width:100%;border-collapse:collapse}
.cmp thead{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.cmp tr{
  display:block;background:var(--cream);border-radius:var(--r-lg);
  padding:18px;margin-bottom:14px;border:1px solid rgba(22,50,79,.1);
}
.cmp th[scope="row"]{
  display:block;text-align:left;font-family:var(--font-head);font-size:1.06rem;
  font-weight:800;color:var(--navy);margin-bottom:12px;
}
.cmp td{
  display:grid;grid-template-columns:22px 1fr;align-items:start;
  column-gap:10px;row-gap:4px;
  padding:11px 13px;border-radius:var(--r-sm);font-size:.94rem;
  background:var(--white);border:1px solid rgba(22,50,79,.1);
}
.cmp td+td{margin-top:9px}
.cmp td::before{
  content:attr(data-label);grid-column:1 / -1;
  font-family:var(--font-head);font-size:.68rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);
}
.cmp td .mark{margin-top:1px}
.cmp .cmp__ours{background:var(--sky);border-color:var(--teal-deep);font-weight:600;color:var(--navy)}

.mark{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:inline-block;position:relative}
.mark--yes{background:var(--teal-deep)}
.mark--yes::after{
  content:"";position:absolute;left:6px;top:7px;width:9px;height:5px;
  border-left:2.5px solid var(--white);border-bottom:2.5px solid var(--white);transform:rotate(-45deg);
}
.mark--part{background:var(--yellow)}
.mark--part::after{
  content:"";position:absolute;left:5px;top:9.5px;width:12px;height:3px;border-radius:2px;background:var(--navy);
}
.mark--no{background:rgba(22,50,79,.16)}
.mark--no::after,.mark--no::before{
  content:"";position:absolute;left:5px;top:9.5px;width:12px;height:3px;border-radius:2px;background:var(--navy);
}
.mark--no::after{transform:rotate(45deg)}
.mark--no::before{transform:rotate(-45deg)}

/* ==========================================================================
   PRODUCT PREVIEW CAROUSEL
   ========================================================================== */
.carousel{margin-top:26px}
.carousel__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 0 14px;
  scrollbar-width:thin;scrollbar-color:var(--teal) transparent;
  -webkit-overflow-scrolling:touch;
}
.carousel__track::-webkit-scrollbar{height:8px}
.carousel__track::-webkit-scrollbar-thumb{background:var(--teal);border-radius:4px}
.carousel__track::-webkit-scrollbar-track{background:rgba(255,255,255,.12);border-radius:4px}
.carousel__slide{scroll-snap-align:start}
.carousel__slide figure{margin:0}
.carousel__slide img{
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);background:var(--white);
}
.carousel__slide figcaption{margin-top:12px;font-size:.94rem;color:#C9DEE4}
.carousel__kind{
  display:block;font-family:var(--font-head);font-size:.72rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin-bottom:3px;
}
.carousel__controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.carousel__btn{
  width:52px;height:52px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--cream);border:2px solid rgba(255,248,237,.4);
  cursor:pointer;transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
}
.carousel__btn:hover{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.carousel__btn:active{transform:scale(.94)}
.carousel__btn[disabled]{opacity:.35;cursor:not-allowed}
.carousel__btn[disabled]:hover{background:transparent;color:var(--cream);border-color:rgba(255,248,237,.4)}
.carousel__count{
  margin:0;font-family:var(--font-head);font-weight:700;font-size:.92rem;color:#C9DEE4;
  min-width:9ch;text-align:center;
}

/* ==========================================================================
   TESTIMONIALS (hidden until real feedback exists — see config.js)
   ========================================================================== */
.tm-grid{display:grid;gap:18px;margin-top:26px}
.tm-card{
  margin:0;background:var(--white);border-radius:var(--r-lg);padding:22px;
  box-shadow:var(--shadow-sm);border-top:4px solid var(--teal);
}
.tm-card blockquote{margin:0 0 16px}
.tm-card blockquote p{margin:0;font-size:1.02rem;color:var(--navy)}
.tm-card figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.tm-card__photo{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.tm-card__name{font-family:var(--font-head);font-weight:800;color:var(--navy)}
.tm-card__meta{width:100%;font-size:.86rem;color:var(--ink-soft)}
.tm-card__verified{
  padding:4px 10px;border-radius:999px;background:var(--sky);color:var(--teal-deep);
  font-family:var(--font-head);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}

/* ==========================================================================
   GUARANTEE
   ========================================================================== */
.guarantee{display:grid;gap:20px;justify-items:start}
.guarantee__seal{filter:drop-shadow(0 8px 18px rgba(22,50,79,.18))}

/* ==========================================================================
   FINAL OFFER
   ========================================================================== */
.final__art{margin:0 0 26px}
.final__list{display:grid;gap:9px;margin:20px 0 26px}
.final__list li{
  position:relative;padding-left:28px;font-size:1rem;color:var(--sky);
}
.final__list li::before{
  content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:5px;
  background:var(--yellow);
}
.final__list strong{color:var(--cream)}

.finalbox{
  background:var(--navy-soft);border:2px solid rgba(244,201,93,.4);
  border-radius:var(--r-xl);padding:24px 20px;
}
.finalbox__price{display:flex;align-items:baseline;justify-content:center;gap:14px;margin-bottom:6px}
.finalbox__price s{font-size:1.1rem;color:#A9C4CD}
.finalbox__price strong{font-family:var(--font-head);font-size:2.5rem;font-weight:900;color:var(--yellow);line-height:1}
.finalbox__note{text-align:center;font-size:.92rem;color:#C9DEE4;margin-bottom:18px}

.final__after{display:grid;gap:9px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,248,237,.16)}
.final__after li{position:relative;padding-left:24px;font-size:.9rem;color:#C9DEE4}
.final__after li::before{
  content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;
  background:var(--teal);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{margin-top:26px;border-top:1px solid rgba(22,50,79,.14)}
.faq__item{border-bottom:1px solid rgba(22,50,79,.14)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 2px;cursor:pointer;list-style:none;
  font-family:var(--font-head);font-size:1.06rem;font-weight:700;color:var(--navy);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--sky);position:relative;transition:background-color .16s ease;
  background-image:
    linear-gradient(var(--teal-deep),var(--teal-deep)),
    linear-gradient(var(--teal-deep),var(--teal-deep));
  background-size:12px 2.5px,2.5px 12px;
  background-position:center,center;
  background-repeat:no-repeat;
}
.faq__item[open] summary::after{background-size:12px 2.5px,0 0}
.faq__item summary:hover{color:var(--coral-deep)}
.faq__a{padding:0 2px 20px;max-width:68ch}
.faq__a p{margin:0;color:var(--ink-soft);font-size:.99rem}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--navy-deep);color:#B7CFD8;padding:44px 0 40px;font-size:.92rem}
.footer__top{display:grid;gap:8px;margin-bottom:26px}
.brand--footer .brand__logo{height:34px}
.footer__tagline{
  margin:0;font-family:var(--font-head);font-size:.82rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);
}
.footer__nav ul{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:26px}
.footer__nav a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(255,248,237,.3);padding-bottom:2px}
.footer__nav a:hover{color:var(--yellow);border-color:var(--yellow)}
.footer__legal{padding-top:22px;border-top:1px solid rgba(255,248,237,.16)}
.footer__legal p{font-size:.86rem;line-height:1.6}
.footer__disclaimer{color:var(--cream);font-weight:600}
.footer__copy{margin-top:18px;font-size:.82rem;color:#93AEB9}
.footer__copy a{color:#93AEB9}
.footer__copy a:hover{color:var(--yellow)}

/* ==========================================================================
   MOBILE STICKY CTA
   ========================================================================== */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--white);border-top:1px solid rgba(22,50,79,.14);
  box-shadow:0 -8px 24px rgba(22,50,79,.14);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
  transform:translateY(110%);transition:transform .28s ease;
}
.sticky[data-visible]{transform:translateY(0)}
.sticky__inner{
  max-width:var(--wrap);margin-inline:auto;
  display:flex;align-items:center;gap:12px;
}
.sticky__info{flex:1 1 auto;min-width:0}
.sticky__name{
  margin:0;font-family:var(--font-head);font-size:.8rem;font-weight:800;color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sticky__price{margin:0;font-size:.86rem;color:var(--ink-soft);display:flex;gap:7px;align-items:baseline}
.sticky__price strong{font-family:var(--font-head);font-size:1.14rem;color:var(--navy)}
.sticky .btn{flex:0 0 auto}
.sticky__close{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--sky);color:var(--navy);border:none;cursor:pointer;
}
.sticky__close:hover{background:var(--navy);color:var(--cream)}

/* ==========================================================================
   LIVE SALES NOTIFICATION (social proof toast)
   --------------------------------------------------------------------------
   Mobile: bottom centre, lifted above the sticky CTA via --sticky-h (set by
   main.js) so it can never cover the buy button. Desktop: bottom left.
   Uses the existing brand tokens so it matches the page exactly.
   ========================================================================== */
.sp-toast{
  position:fixed;z-index:95;
  left:15px;right:15px;
  bottom:calc(var(--sticky-h,0px) + 16px + env(safe-area-inset-bottom,0px));
  width:auto;max-width:380px;margin-inline:auto;
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 14px;
  background:var(--cream);
  border:1px solid rgba(22,50,79,.13);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(22,50,79,.15),0 2px 6px rgba(22,50,79,.06);
  opacity:0;transform:translateY(14px);
  transition:opacity .38s ease,transform .38s ease;
  will-change:opacity,transform;
}
.sp-toast[data-visible]{opacity:1;transform:translateY(0)}
.sp-toast[hidden]{display:none}

.sp-toast__icon{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--teal-deep);color:var(--cream);
}
.sp-toast__body{flex:1 1 auto;min-width:0}
.sp-toast__msg{
  margin:0;font-size:.92rem;line-height:1.35;color:var(--ink);
  overflow-wrap:anywhere;
}
.sp-toast__title{display:block;font-family:var(--font-head);font-weight:800;color:var(--navy)}
.sp-toast__product{color:var(--teal-deep);font-weight:600}
.sp-toast__meta{
  margin:5px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;
  font-size:.76rem;color:var(--ink-soft);
}
.sp-toast__badge{
  font-family:var(--font-head);font-weight:700;letter-spacing:.02em;color:var(--teal-deep);
}
.sp-toast__time{color:var(--ink-soft);opacity:.85}

.sp-toast__close{
  flex:0 0 auto;width:26px;height:26px;margin:-3px -3px 0 0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:50%;cursor:pointer;
  /* .75 keeps it discreet while clearing the 3:1 WCAG minimum for controls. */
  color:var(--ink-soft);opacity:.75;transition:opacity .16s ease,background-color .16s ease;
}
.sp-toast__close:hover{opacity:1;background:rgba(22,50,79,.08);color:var(--navy)}

@media (min-width:900px){
  .sp-toast{left:24px;right:auto;bottom:24px;width:360px;max-width:none;margin:0}
}

/* Reduced motion: fade only, no travel. */
@media (prefers-reduced-motion:reduce){
  .sp-toast{transform:none;transition:opacity .2s linear}
  .sp-toast[data-visible]{transform:none}
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (min-width:600px){
  body{font-size:17.5px}
  .brand__logo{height:36px}
  .section{padding:72px 0}
  .h2{font-size:2.1rem}
  .hero__title{font-size:2.5rem}
  .hero{padding:44px 0 60px}
  .offerbox{padding:26px}
  .book{padding:30px}
  .scen{grid-template-columns:repeat(3,1fr)}
  .who{grid-template-columns:repeat(2,1fr)}
  .bonuses{grid-template-columns:repeat(2,1fr)}
  .outcomes{grid-template-columns:repeat(2,1fr)}
  .recog{grid-template-columns:repeat(2,1fr)}
  .method{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .specs__list{grid-template-columns:repeat(2,1fr)}
  .carousel__track{grid-auto-columns:66%}
  .guarantee{grid-template-columns:auto 1fr;align-items:center;gap:32px}
  .pullquote{padding:30px 32px;font-size:1.3rem}
  .final__list{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:900px){
  :root{--gutter:32px}
  .section{padding:92px 0}
  .h2{font-size:2.35rem}
  .h3{font-size:1.34rem}

  .masthead__cta{display:inline-flex}

  /* hero becomes two columns */
  .hero{padding:60px 0 76px}
  .hero__grid{
    display:grid;grid-template-columns:1.05fr .95fr;
    grid-template-areas:"copy art" "offer art";
    align-items:start;column-gap:56px;
  }
  /* Desktop: re-wrap so the mockup and the formats strip share the right column. */
  .hero__visual{display:block}
  .hero__art{order:0;margin:0}
  .formats{order:0}
  .hero__copy{grid-area:copy}
  .hero__visual{grid-area:art;margin:0;position:sticky;top:24px;align-self:start}
  .hero__offer{grid-area:offer;margin-top:30px}
  .hero__title{font-size:3.05rem}
  .hero__sub{font-size:1.14rem}
  .formats{margin-top:34px}

  .scen{grid-template-columns:repeat(4,1fr);gap:16px}
  .who{grid-template-columns:repeat(3,1fr)}
  .bonuses{grid-template-columns:repeat(3,1fr);gap:26px}
  .outcomes{grid-template-columns:repeat(4,1fr)}
  .recog{grid-template-columns:repeat(4,1fr)}
  .specs__list{grid-template-columns:repeat(3,1fr)}
  .carousel__track{grid-auto-columns:46%}

  /* books alternate sides */
  .book{grid-template-columns:300px 1fr;gap:40px;align-items:start;padding:40px;margin-top:44px}
  .book__cover img{width:100%}
  .book--flip{grid-template-columns:1fr 300px}
  .book--flip .book__cover{order:2}
  .book--flip .book__body{order:1}

  .promise__grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
  .promise__copy{margin-top:0}

  .final__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
  .final__art{margin:0}
  .finalbox{padding:30px}

  /* real table on desktop */
  .cmp__scroll{overflow-x:auto}
  .cmp{min-width:760px;background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
  .cmp thead{position:static;width:auto;height:auto;clip:auto;overflow:visible}
  .cmp thead th{
    background:var(--navy);color:var(--cream);text-align:left;
    font-family:var(--font-head);font-size:.86rem;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;padding:16px 20px;
  }
  .cmp thead th.cmp__ours{background:var(--teal-deep)}
  .cmp tr{display:table-row;background:transparent;border:0;padding:0;margin:0}
  .cmp tbody tr+tr th,.cmp tbody tr+tr td{border-top:1px solid rgba(22,50,79,.12)}
  .cmp th[scope="row"]{
    display:table-cell;vertical-align:middle;margin:0;padding:18px 20px;
    font-size:1rem;background:var(--cream);width:32%;
  }
  .cmp td{
    display:table-cell;vertical-align:middle;padding:18px 20px;
    background:transparent;border:0;border-radius:0;
  }
  .cmp td::before{display:none}
  .cmp td .mark{margin-right:10px;vertical-align:-5px}
  .cmp .cmp__ours{background:var(--sky)}

  .sticky{display:none}
  body{padding-bottom:0}
}

@media (min-width:1100px){
  .hero__title{font-size:3.4rem}
  .carousel__track{grid-auto-columns:40%}
}

/* Larger screens: keep the sticky bar off — the page has plenty of CTAs */
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .sticky{display:none!important}
}

/* Print */
@media print{
  .announce,.masthead,.sticky,.carousel__controls,.btn{display:none!important}
  body{padding:0;font-size:12pt;color:#000}
  .section{padding:16pt 0;background:#fff!important;color:#000!important}
}