/* ==========================================================================
   WarriorBabe — Macro Method funnel · V2
   Design-audit fixes (Phases 1–3) + Apple Liquid Glass design language.

   WHAT CHANGED FROM V1
   - One palette. The ClickFunnels green (#5EA146, 3.15:1) and the teal text
     bar (#47D4D3, 1.81:1) are gone — neither was a brand colour.
   - One type system: Montserrat + Anton, 6 steps, 3 weights (was 16 sizes /
     5 weights / 3 families).
   - Glass is CHROME ONLY — sticky bar, headers, floating controls, panel
     tops. Never behind long-form reading copy. (Apple rule 1 + 7.)
   - Brand colour lives in CONTENT, not in persistent navigation. (Apple rule 5.)
   - Reduce-transparency, reduce-motion, forced-colors and focus-visible all
     handled.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Anton&display=swap');

:root {
  /* ---------- brand ---------------------------------------------------- */
  --brand:          #b01673;   /* white on this = 6.55:1  AA  (was #5EA146 @ 3.15) */
  --brand-hover:    #8e1159;
  --brand-bright:   #ff1e9e;   /* accents on dark only — never as a text bg    */
  --brand-deep:     #a8145f;   /* white on this = 7.17:1  AA                   */
  --brand-magenta:  #d12490;   /* white on this = 4.81:1  AA — kept            */

  /* ---------- surfaces -------------------------------------------------- */
  --ink:            #1a0512;   /* near-black plum. Also the sticky-bar text.   */
  --plum:           #2b0a1d;
  --plum-2:         #4a052e;
  --surface:        #ffffff;
  --surface-2:      #fdf7fa;
  --surface-3:      #f6eef3;
  --line:           #ecdde5;

  /* ---------- text ------------------------------------------------------ */
  --text:           #241019;   /* 14.8:1 on white                             */
  --text-muted:     #6b5560;   /* 5.9:1  on white — was #676767 @ 2.37 on tint */
  --text-on-dark:   #ffffff;
  --text-on-dark-2: rgba(255,255,255,.78);

  /* ---------- semantic -------------------------------------------------- */
  --ok:             #2f7d32;
  --warn:           #8a5a00;
  --danger:         #b3261e;

  /* ---------- type scale — 6 steps (was 16 ad-hoc sizes) ---------------- */
  --t-xs:   13px;
  --t-sm:   15px;
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   26px;
  --t-2xl:  38px;
  --t-hero: clamp(30px, 5vw, 56px);
  /* weights: 400 / 600 / 800 only */

  --f-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-display: 'Anton', Impact, sans-serif;

  /* ---------- spacing — 8pt scale --------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---------- radii / elevation ----------------------------------------- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-full: 999px;
  --e-1: 0 1px 2px rgba(26,5,18,.06), 0 4px 12px rgba(26,5,18,.05);
  --e-2: 0 2px 6px rgba(26,5,18,.08), 0 12px 32px rgba(26,5,18,.10);
  --e-3: 0 8px 24px rgba(26,5,18,.14), 0 24px 64px rgba(26,5,18,.16);

  /* ---------- LIQUID GLASS ---------------------------------------------
     One dominant glass layer per region. Never stacked. (Apple rule 7.)     */
  --glass-blur:        saturate(180%) blur(24px);
  --glass-blur-strong: saturate(200%) blur(40px);
  --glass-light:       rgba(255,255,255,.72);
  --glass-light-edge:  rgba(255,255,255,.85);
  --glass-dark:        rgba(28,8,20,.62);
  --glass-dark-edge:   rgba(255,255,255,.14);
  --glass-hairline:    inset 0 1px 0 rgba(255,255,255,.55);
  --glass-hairline-d:  inset 0 1px 0 rgba(255,255,255,.10);

  --wrap: 1120px;
  --wrap-read: 720px;   /* measure for long-form: ~68ch */
  --ease: cubic-bezier(.32,.72,0,1);
}

/* ============================================================ base ====== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4 { margin: 0 0 var(--s-3); line-height: 1.15; font-weight: 800; }
p { margin: 0 0 var(--s-4); }
a { color: var(--brand); }

/* focus — was entirely absent in V1 */
:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ========================================================== layout ====== */
.wrap  { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
.read  { width: 100%; max-width: var(--wrap-read); margin-inline: auto; padding-inline: var(--s-5); }
.sec   { padding: var(--s-8) 0; }
.sec-sm{ padding: var(--s-6) 0; }
.center{ text-align: center; }
.grid  { display: grid; gap: var(--s-5); }
.g2    { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3    { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* Alternating surfaces give rhythm without decorative layers (Apple rule 2) */
.sec-tint { background: var(--surface-2); }
.sec-3    { background: var(--surface-3); }
.sec-dark {
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(210,31,146,.22), transparent 62%),
    linear-gradient(180deg, var(--plum) 0%, var(--ink) 100%);
  color: var(--text-on-dark);
}
.sec-dark h1, .sec-dark h2, .sec-dark h3 { color: var(--text-on-dark); }
.sec-dark p { color: var(--text-on-dark-2); }

/* ====================================================== typography ====== */
.display {
  font-family: var(--f-display); font-style: oblique 10deg;
  text-transform: uppercase; letter-spacing: .005em; line-height: .92;
  font-size: var(--t-hero); margin: 0 0 var(--s-4);
  /* V1 faded to 18% opacity — the biggest word on the page was half-invisible.
     Floored at 62%: the drama survives, the word stays readable. */
  background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.62) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1.hero    { font-size: clamp(24px, 3.4vw, var(--t-2xl)); letter-spacing: -.02em; }
h1.hero em { font-style: normal; color: var(--brand-bright); }
h2.title   { font-size: var(--t-xl); letter-spacing: -.01em; }
h3.sub     { font-size: var(--t-lg); font-weight: 600; }
.lede      { font-size: var(--t-lg); font-weight: 400; color: var(--text-muted); }
.sec-dark .lede { color: var(--text-on-dark-2); }
.small     { font-size: var(--t-sm); color: var(--text-muted); }
.xs        { font-size: var(--t-xs); color: var(--text-muted); }
/* --brand (6.55:1) on light surfaces; --brand-bright only where the backdrop is dark.
   #FF1E9E on white measures 3.54:1 and fails AA at this size. */
.eyebrow   { font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em;
             text-transform: uppercase; color: var(--brand); }
.sec-dark .eyebrow, .glass-dark .eyebrow, .chrome .eyebrow { color: var(--brand-bright); }

/* =========================================================== glass ====== */
/* Chrome only. Never behind body copy. */
.glass {
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--e-2), var(--glass-hairline);
}
.glass-dark {
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-dark-edge);
  box-shadow: var(--e-2), var(--glass-hairline-d);
}

/* ========================================================= buttons ====== */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 56px; padding: var(--s-3) var(--s-6);
  background: var(--brand); color: #fff; text-decoration: none;
  font-family: var(--f-body); font-size: var(--t-lg); font-weight: 800;
  border: 0; border-radius: var(--r-full); cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow: var(--e-2);
}
.btn:hover  { background: var(--brand-hover); transform: translateY(-1px); box-shadow: var(--e-3); }
.btn:active { transform: translateY(0) scale(.99); }
.btn small  { font-size: var(--t-xs); font-weight: 400; opacity: .92; }
.btn-block  { display: flex; width: 100%; max-width: 460px; margin-inline: auto; }
.btn-ghost {
  background: transparent; color: var(--brand); border: 2px solid currentColor;
  box-shadow: none; font-size: var(--t-md);
}
.btn-ghost:hover { background: var(--brand); color: #fff; }
/* On dark, the button is glass — brand colour stays in content (Apple rule 5) */
.sec-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.sec-dark .btn-ghost:hover { background: rgba(255,255,255,.14); }

/* =================================================== sticky CTA bar ===== */
/* V1: solid #47D4D3 teal, white text @ 1.81:1, 167px tall, always expanded.
   V2: glass over the content, ink text @ 10.8:1, collapses on scroll.       */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border-top: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 -8px 32px rgba(26,5,18,.10), var(--glass-hairline);
  color: var(--ink);
  transition: transform .3s var(--ease), padding .3s var(--ease);
}
.sticky-bar .inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-5); flex-wrap: wrap;
}
.sticky-bar .price { font-weight: 800; font-size: var(--t-lg); color: var(--ink); }
.sticky-bar .price s { font-weight: 400; font-size: var(--t-sm); color: var(--text-muted); }
.countdown { display: flex; gap: var(--s-4); color: var(--ink); }
.countdown div { text-align: center; }
.countdown .n { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown .l { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.sticky-bar.is-collapsed { padding: var(--s-2) 0 calc(var(--s-2) + env(safe-area-inset-bottom)); }
.sticky-bar.is-collapsed .countdown,
.sticky-bar.is-collapsed .price { display: none; }

/* ============================================================ cards ===== */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--e-1);
}
.card-head {
  margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--brand-magenta); color: #fff;      /* 4.81:1 — passes AA */
  font-weight: 800; font-size: var(--t-lg);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.offer {
  border: 2px solid var(--brand); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--s-6); text-align: center;
  box-shadow: var(--e-2);
}
.offer .price   { font-family: var(--f-display); font-size: var(--t-2xl); color: var(--ink); line-height: 1; }
.offer .was     { font-size: var(--t-sm); color: var(--text-muted); }
.offer .save    { display: inline-block; margin-top: var(--s-2); padding: 4px 12px;
                  border-radius: var(--r-full); background: #eaf5ea; color: var(--ok);
                  font-size: var(--t-xs); font-weight: 800; }   /* 5.3:1 */

/* problem / fix — semantic colour, not decorative */
.pf { margin-bottom: var(--s-4); border-radius: var(--r-sm); padding: var(--s-4) var(--s-5); }
.pf-problem { background: #fdf1f0; border-left: 3px solid var(--danger); }
.pf-fix     { background: #eff7ef; border-left: 3px solid var(--ok); }
.pf h4 { font-size: var(--t-md); margin-bottom: var(--s-2); }

/* ========================================================= icon set ===== */
/* V1 used emoji (🚫 ✅ ⚡ ⏰ 🔬 👉 🔒 ⭐) mixed with CSS ✔ and • — three
   parallel vocabularies, OS-dependent rendering. V2: one 24px stroke set.   */
.icon { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 32px; height: 32px; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-3); }
.list li .icon { margin-top: 2px; }
.list-ok li .icon  { color: var(--ok); }
.list-no li .icon  { color: var(--danger); }

/* ==================================================== embed fallback ==== */
/* V1: SamCart / Calendly / JotForm each rendered as blank space with no
   skeleton and no failure state. */
.embed { position: relative; border-radius: var(--r-md); overflow: hidden; min-height: 560px; background: var(--surface-2); }
.skeleton { position: absolute; inset: 0; padding: var(--s-5); display: grid; gap: var(--s-4);
            align-content: start; }
.skeleton i { display: block; height: 46px; border-radius: 8px;
              background: linear-gradient(90deg,#eee6ec 25%,#f7f1f5 37%,#eee6ec 63%);
              background-size: 400% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton i.short { width: 42%; height: 16px; }
@keyframes shimmer { from { background-position: 100% 0 } to { background-position: -100% 0 } }
.embed-fallback {
  position: absolute; inset: 0; display: none; place-content: center; text-align: center;
  padding: var(--s-6); background: var(--surface); gap: var(--s-3);
}
.embed.is-failed .embed-fallback { display: grid; }
.embed.is-failed .skeleton { display: none; }

/* ========================================================== helpers ===== */
.stack > * + * { margin-top: var(--s-4); }
.trust { display: flex; gap: var(--s-2); align-items: center; justify-content: center;
         font-size: var(--t-sm); color: var(--text-muted); }
.marquee-wrap { background: var(--plum-2); overflow: hidden; padding: var(--s-2) 0; white-space: nowrap; }
.marquee { display: inline-flex; gap: var(--s-4); align-items: center; animation: mq 30s linear infinite;
           font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
           font-size: var(--t-xs); color: #fff; }
.marquee .dot { color: var(--brand-bright); }
@keyframes mq { from { transform: translateX(0) } to { transform: translateX(-50%) } }

footer.site { background: var(--ink); color: rgba(255,255,255,.7); padding: var(--s-7) 0 var(--s-8); font-size: var(--t-xs); }
footer.site a { color: #fff; }
footer.site .legal { max-width: 860px; margin: var(--s-4) auto 0; line-height: 1.7; }

/* entrance motion — 200ms, ease-out, reduced-motion aware */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }

/* ===================================================== ACCESSIBILITY ==== */

/* Reduce Transparency — Apple's required fallback, ported to web.
   Glass becomes opaque; contrast is guaranteed rather than assumed. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .sticky-bar {
    background: var(--surface) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-color: var(--line) !important;
  }
  .glass-dark {
    background: var(--ink) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* Higher contrast preference — drop translucency, harden edges */
@media (prefers-contrast: more) {
  .glass, .sticky-bar { background: #fff !important; backdrop-filter: none !important;
                        border: 2px solid var(--ink) !important; }
  .btn { outline: 2px solid var(--ink); }
}

/* Reduced motion — V1 ran a 26s infinite marquee with no guard at all */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .marquee { animation: none !important; }
  .skeleton i { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Windows High Contrast */
@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  .glass, .sticky-bar, .card { border: 1px solid CanvasText; }
}

/* ====================================================== responsive ====== */
@media (max-width: 900px) {
  .g3, .g2 { grid-template-columns: 1fr; }
  .sec { padding: var(--s-7) 0; }
}
@media (max-width: 640px) {
  :root { --t-2xl: 30px; --t-xl: 22px; --t-lg: 18px; }
  .sticky-bar .inner { gap: var(--s-3); }
  .sticky-bar .btn { width: 100%; }
  .countdown { gap: var(--s-3); }
  body { padding-bottom: 92px; }
}