/* ---------- 0. SELF-HOSTED FONTS (no third-party requests) ---------- */
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-600-italic.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ==========================================================================
   HER RISE — HappyShe Masterclass
   Design system extracted from the Balance Rise Academy masterclass deck.
   Palette: deep petrol ink · warm cream · gold · teal
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Ink family (dark grounds) */
  --ink-900:#05191D;
  --ink-800:#08262B;
  --ink-700:#0B2F35;
  --ink-600:#0D3238;
  --ink-500:#124249;

  /* Teal family (accent, mid tones) */
  --teal-600:#2E6E75;
  --teal-500:#3C858D;
  --teal-300:#7FB4B8;
  --teal-200:#A8CCCF;
  --teal-100:#DCEAEA;

  /* Gold family (primary CTA + emphasis) */
  --gold-700:#9E7122;
  --gold-600:#B5822A;
  --gold-500:#C89434;
  --gold-400:#DDAE52;
  --gold-300:#EBC471;
  --gold-100:#F6E5C0;

  /* Warm neutrals (light grounds) */
  --cream-50:#FDFBF7;
  --cream-100:#FBF7F0;
  --cream-200:#F5EDE0;
  --cream-300:#EBE0CE;
  --clay-400:#C58A5E;
  --rose-300:#E0B2A6;

  /* Text */
  --tx-dark:#0B2F35;
  --tx-mid:#3F5B60;
  --tx-soft:#607579;
  --tx-light:#FBF7F0;
  --tx-light-mid:rgba(251,247,240,.76);
  --tx-light-soft:rgba(251,247,240,.56);

  /* Semantic */
  --line-dark:rgba(11,47,53,.14);
  --line-light:rgba(251,247,240,.16);
  --ok:#3E8E6E;
  --alert:#C4562F;

  /* Type */
  --f-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Rhythm */
  --shell:1200px;
  --shell-narrow:840px;
  --pad:clamp(20px,5vw,48px);
  --sec-y:clamp(64px,9vw,124px);
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;

  /* Elevation */
  --sh-sm:0 1px 2px rgba(8,38,43,.06),0 4px 14px rgba(8,38,43,.05);
  --sh-md:0 2px 6px rgba(8,38,43,.07),0 18px 44px rgba(8,38,43,.09);
  --sh-lg:0 6px 18px rgba(8,38,43,.10),0 40px 90px rgba(8,38,43,.16);
  --sh-gold:0 10px 26px rgba(158,113,34,.30),0 2px 6px rgba(158,113,34,.22);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  color:var(--tx-dark);
  background:var(--cream-100);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block}
img{height:auto}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0; list-style:none}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0}
:focus-visible{outline:2.5px solid var(--gold-500); outline-offset:3px; border-radius:4px}
::selection{background:var(--gold-300); color:var(--ink-800)}

/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad)}
.shell-narrow{max-width:var(--shell-narrow)}
.shell-mid{max-width:1000px}
.section{position:relative; padding-block:var(--sec-y); overflow:hidden; isolation:isolate}
.section > .shell{position:relative; z-index:2}

/* Background treatments -------------------------------------------------- */
.bg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; background-repeat:no-repeat}
.bg::after{content:""; position:absolute; inset:0}

.s-cream{background:var(--cream-100); color:var(--tx-dark)}
.s-cream .bg{background-image:url("../img/bg-cream-bloom.jpg")}

.s-warm{background:var(--cream-200); color:var(--tx-dark)}
.s-warm .bg{background-image:url("../img/bg-warm.jpg")}

.s-plain{background:var(--cream-50); color:var(--tx-dark)}

.s-ink{background:var(--ink-800); color:var(--tx-light)}
.s-ink .bg{background-image:url("../img/bg-ink-bloom.jpg")}

.s-teal{background:var(--ink-600); color:var(--tx-light)}
.s-teal .bg{background-image:url("../img/bg-teal.jpg")}

.s-deep{background:var(--ink-900); color:var(--tx-light)}
.s-deep .bg{background-image:url("../img/bg-ink-deep.jpg")}

/* Dark-section text defaults */
.s-ink .lede,.s-teal .lede,.s-deep .lede{color:var(--tx-light-mid)}
.s-ink p,.s-teal p,.s-deep p{color:var(--tx-light-mid)}
.s-ink .h2,.s-teal .h2,.s-deep .h2,
.s-ink h2,.s-teal h2,.s-deep h2,
.s-ink h3,.s-teal h3,.s-deep h3{color:var(--tx-light)}

/* Fine grain overlay for depth on every backgrounded section */
.grain{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* Decorative petal / ring motifs (inline SVG placed by markup) */
.motif{position:absolute; z-index:1; pointer-events:none; opacity:.5}
.motif--tr{top:-6%; right:-6%; width:min(38vw,420px)}
.motif--bl{bottom:-8%; left:-8%; width:min(34vw,380px)}

/* ---------- 4. TYPE ---------- */
.eyebrow{
  font-family:var(--f-mono); font-size:clamp(10.5px,1.15vw,12.5px);
  letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  color:var(--teal-600); display:flex; align-items:center; gap:14px;
}
.eyebrow::after{content:""; flex:0 1 84px; height:1px; background:currentColor; opacity:.34}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{content:""; flex:0 1 84px; height:1px; background:currentColor; opacity:.34}
.s-ink .eyebrow,.s-teal .eyebrow,.s-deep .eyebrow{color:var(--gold-300)}

.h1{font-family:var(--f-display); font-weight:700; line-height:1.04;
  font-size:clamp(34px,5.4vw,62px); letter-spacing:-.018em; color:var(--ink-700)}
.h2{font-family:var(--f-display); font-weight:700; line-height:1.1;
  font-size:clamp(27px,3.7vw,44px); letter-spacing:-.014em; color:var(--ink-700)}
.h3{font-family:var(--f-display); font-weight:600; line-height:1.2;
  font-size:clamp(20px,2.2vw,26px); letter-spacing:-.008em}
.h4{font-family:var(--f-body); font-weight:600; font-size:17px; line-height:1.4}

.lede{font-size:clamp(16px,1.55vw,19.5px); line-height:1.62; color:var(--tx-mid); max-width:62ch}
.small{font-size:14.5px; line-height:1.55; color:var(--tx-soft)}
.tiny{font-size:12.5px; line-height:1.5; color:var(--tx-soft)}
.s-ink .small,.s-teal .small,.s-deep .small,
.s-ink .tiny,.s-teal .tiny,.s-deep .tiny{color:var(--tx-light-soft)}

.gold{color:var(--gold-600)}
.s-ink .gold,.s-teal .gold,.s-deep .gold{color:var(--gold-300)}
.teal{color:var(--teal-600)}
em.mark{font-style:normal; color:var(--gold-600); font-weight:600}
.serif-em{font-family:var(--f-display); font-style:italic; font-weight:500}

.sec-head{max-width:70ch}
.sec-head--center{margin-inline:auto; text-align:center}
.sec-head--center .h2{max-width:26ch; margin-inline:auto}
.sec-head--center .lede{margin-inline:auto}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head .h2 + .lede{margin-top:16px}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-body); font-weight:600; letter-spacing:.005em;
  border-radius:100px; padding:16px 30px; font-size:16px; line-height:1;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
  text-align:center; border:1.5px solid transparent; position:relative;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none}

.btn-primary{
  background:linear-gradient(158deg,var(--gold-400) 0%,var(--gold-500) 48%,var(--gold-600) 100%);
  color:var(--ink-800); box-shadow:var(--sh-gold);
}
.btn-primary:hover{box-shadow:0 14px 34px rgba(158,113,34,.38),0 2px 6px rgba(158,113,34,.26)}

.btn-lg{padding:20px 40px; font-size:17.5px}
.btn-xl{padding:23px 46px; font-size:19px; letter-spacing:.002em}
.btn-sm{padding:14px 22px; font-size:14.5px}
.btn-block{display:flex; width:100%}

.btn-ghost{border-color:var(--line-dark); color:var(--ink-700); background:rgba(255,255,255,.6); backdrop-filter:blur(6px)}
.btn-ghost:hover{background:#fff; border-color:rgba(11,47,53,.26)}
.s-ink .btn-ghost,.s-teal .btn-ghost,.s-deep .btn-ghost{
  border-color:var(--line-light); color:var(--tx-light); background:rgba(251,247,240,.07)}
.s-ink .btn-ghost:hover,.s-teal .btn-ghost:hover,.s-deep .btn-ghost:hover{background:rgba(251,247,240,.14)}

.btn-ink{background:var(--ink-700); color:var(--cream-100); box-shadow:var(--sh-md)}
.btn-ink:hover{background:var(--ink-800)}

/* subtle sheen sweep on primary CTAs */
.btn-primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit; overflow:hidden;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 48%,transparent 58%);
  background-size:280% 100%; background-position:180% 0; pointer-events:none;
}
.btn-primary:hover::after{background-position:-60% 0; transition:background-position .85s var(--ease)}

.cta-note{font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tx-soft); line-height:1.55}
.cta-note svg{display:inline-block; vertical-align:-2px; margin-right:7px}
.s-ink .cta-note,.s-teal .cta-note,.s-deep .cta-note{color:var(--tx-light-soft)}
.cta-note svg{color:var(--ok)}

/* ---------- 6. HEADER ---------- */
.hdr{
  position:sticky; top:0; z-index:70;
  background:rgba(251,247,240,.94); backdrop-filter:saturate(120%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hdr.is-stuck{background:rgba(251,247,240,.97); border-bottom-color:var(--line-dark);
  box-shadow:0 6px 24px rgba(8,38,43,.08)}
.hdr-in{display:flex; align-items:center; gap:20px; height:72px}
.brand{display:flex; align-items:center; gap:10px; flex:none; padding-block:4px}
.brand picture{display:contents}
.brand-mark{width:auto; height:44px; flex:none}
.brand-txt{display:flex; flex-direction:column; align-items:flex-start; line-height:1}
.brand-word{width:auto; height:23px}
.brand-sub{font-family:var(--f-mono); font-size:9px; letter-spacing:.155em; text-transform:uppercase;
  color:var(--tx-soft); margin-top:6px; padding-left:2px}

.hdr-chips{display:flex; align-items:center; gap:8px; margin-inline:auto}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:100px;
  background:rgba(255,255,255,.7); border:1px solid var(--line-dark);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-mid);
}
.chip svg{color:var(--teal-600); flex:none}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--alert);flex:none;
  box-shadow:0 0 0 0 rgba(196,86,47,.55); animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(196,86,47,0)}100%{box-shadow:0 0 0 0 rgba(196,86,47,0)}}
@media (prefers-reduced-motion:reduce){.dot-live{animation:none}}

/* ---------- 7. HERO ---------- */
.hero{padding-block:clamp(28px,3.6vw,46px) clamp(28px,3.6vw,48px)}
.hero-grid{display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(26px,3.6vw,54px); align-items:center}

.hero-copy{max-width:706px}
.hero .h1{margin-top:15px; font-size:clamp(33px,4.9vw,57px)}
.hero .h1 .l2{display:block; color:var(--teal-600)}
.hero-sub{margin-top:15px; font-size:clamp(15.5px,1.45vw,18px); line-height:1.58; color:var(--tx-mid); max-width:54ch}

/* Session strip — the single most important line in the fold */
.session{
  margin-top:22px; display:grid; grid-template-columns:minmax(0,1.42fr) minmax(0,1fr) minmax(0,1fr);
  background:rgba(255,255,255,.74); backdrop-filter:blur(8px);
  border:1px solid rgba(11,47,53,.11); border-radius:var(--r-md);
  box-shadow:var(--sh-sm); overflow:hidden;
}
.session-item{display:flex; align-items:center; gap:10px; padding:13px 15px; min-width:0}
.session-item + .session-item{border-left:1px solid var(--line-dark)}
.session-ico{width:31px; height:31px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--teal-100),rgba(220,234,234,.35)); color:var(--teal-600)}
.session-l{font-family:var(--f-mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--tx-soft); display:block}
.session-v{font-weight:600; font-size:14px; line-height:1.25; color:var(--ink-700); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.session-item--date .session-ico{background:linear-gradient(150deg,var(--gold-100),rgba(246,229,192,.4)); color:var(--gold-600)}

.hero-cta{margin-top:22px; display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.hero-cta .cd{margin-top:0}

/* Compact countdown in the fold */
.cd{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:22px}
.cd-label{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-soft)}
.cd-units{display:flex; gap:7px}
.cd-units[hidden]{display:none}
.cd-u{min-width:56px; text-align:center; padding:9px 8px 7px; border-radius:11px;
  background:var(--ink-700); color:var(--cream-100); box-shadow:var(--sh-sm)}
.cd-n{font-family:var(--f-mono); font-weight:600; font-size:19px; line-height:1; font-variant-numeric:tabular-nums; display:block}
.cd-l{font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-top:5px; display:block}
.cd--light .cd-u{background:rgba(251,247,240,.1); border:1px solid var(--line-light); color:var(--cream-100)}

/* Live state — replaces the countdown during the session hour */
.cd-live{display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:100px;
  background:linear-gradient(150deg,var(--gold-400),var(--gold-600)); color:var(--ink-800);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:var(--sh-gold)}
.cd-live .dot-live{background:var(--alert); box-shadow:0 0 0 0 rgba(196,86,47,.6)}
.sticky .cd-live{padding:8px 14px; font-size:10.5px}

/* Inline proof under the CTA */
.hero-proof{margin-top:22px; padding-top:18px; border-top:1px solid var(--line-dark);
  display:flex; gap:24px; flex-wrap:wrap; align-items:center}
.hp{display:flex; align-items:center; gap:9px}
.hp svg{color:var(--gold-600); flex:none}
.hp b{font-weight:600; font-size:14.5px; color:var(--ink-700); display:block; line-height:1.2}
.hp b + span{font-size:11.5px; color:var(--tx-soft); display:block; line-height:1.3}

/* Portrait */
.hero-art{position:relative; justify-self:center; width:100%; max-width:450px}
.hero-art-aura{position:relative; border-radius:50% 50% 46% 46%/52% 52% 48% 48%; overflow:hidden;
  background:url("../img/bg-aura.jpg") center/cover; aspect-ratio:1/1.12; box-shadow:var(--sh-lg)}
.hero-art-aura::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent 58%,rgba(251,247,240,.55) 88%,var(--cream-100) 100%)}
.hero-art picture{display:contents}
.hero-art img{position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; height:auto; max-width:none; z-index:1}
.hero-cap{position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); z-index:3;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border:1px solid var(--line-dark);
  border-radius:100px; padding:10px 22px; text-align:center; box-shadow:var(--sh-md); white-space:nowrap}
.hero-cap b{display:block; font-family:var(--f-display); font-size:16px; font-weight:700; color:var(--ink-700); line-height:1.2}
.hero-cap span{display:block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-600); margin-top:4px}
.hero-badge{position:absolute; top:7%; right:-4px; z-index:3; background:var(--ink-700); color:var(--cream-100);
  border-radius:15px; padding:12px 16px; text-align:center; box-shadow:var(--sh-md); transform:rotate(2.5deg)}
.hero-badge b{display:block; font-family:var(--f-display); font-size:23px; line-height:1}
.hero-badge span{display:block; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em;
  white-space:nowrap; text-transform:uppercase; opacity:.72; margin-top:5px}

/* ---------- 8. URGENCY BAND ---------- */
.band{background:var(--ink-800); color:var(--cream-100); padding:15px 0; position:relative; overflow:hidden}
.band::before{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(200,148,52,.16),transparent)}
.band-in{position:relative; display:flex; align-items:baseline; justify-content:center; gap:6px 14px; flex-wrap:wrap; text-align:center}
.band b{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-300)}
.band span{font-size:14px; color:var(--tx-light-mid)}

/* ---------- 9. PROOF STRIP ---------- */
.proof{padding-block:clamp(44px,6vw,72px)}
.proof-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-light);
  border:1px solid var(--line-light); border-radius:var(--r-lg); overflow:hidden}
.proof-cell{background:rgba(8,38,43,.42); backdrop-filter:blur(4px); padding:30px 26px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:11px}
.proof-cell svg{color:var(--gold-300)}
.proof-n{font-family:var(--f-display); font-size:clamp(24px,2.8vw,32px); font-weight:700; line-height:1; color:var(--cream-100)}
.proof-n--sm{font-size:clamp(15px,1.7vw,18px); letter-spacing:.01em}
.proof-t{font-size:13px; line-height:1.45; color:var(--tx-light-soft); max-width:24ch}
.proof-mission{margin-top:26px; text-align:center; max-width:64ch; margin-inline:auto;
  font-family:var(--f-display); font-style:italic; font-size:clamp(17px,2vw,21px); line-height:1.5; color:var(--gold-100)}
.proof-mission-l{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-300); margin-bottom:12px; display:block; text-align:center}

/* ---------- 10. CONTENT GATE ---------- */
.gate{padding-block:clamp(50px,6.5vw,80px); text-align:center}
.gate .h2{margin-bottom:14px}
.gate .lede{margin-inline:auto; margin-bottom:26px; text-align:center}
.gate-btn{display:inline-flex; align-items:center; gap:12px; padding:17px 34px; border-radius:100px;
  border:1.5px solid rgba(11,47,53,.2); background:rgba(255,255,255,.7); font-weight:600; font-size:16px;
  color:var(--ink-700); transition:all .24s var(--ease)}
.gate-btn:hover{background:#fff; border-color:var(--gold-500); transform:translateY(-2px); box-shadow:var(--sh-md)}
.gate-btn svg{transition:transform .24s var(--ease)}
.gate-btn:hover svg{transform:translateY(3px)}
#longform[hidden]{display:none}
.gate.is-open{display:none}

/* ---------- 11. CARDS & LISTS ---------- */
.card{background:rgba(255,255,255,.78); backdrop-filter:blur(6px); border:1px solid rgba(11,47,53,.09);
  border-radius:var(--r-md); padding:26px; box-shadow:var(--sh-sm); transition:transform .26s var(--ease), box-shadow .26s var(--ease)}
.card:hover{transform:translateY(-3px); box-shadow:var(--sh-md)}
.s-ink .card,.s-teal .card,.s-deep .card{background:rgba(251,247,240,.06); border-color:var(--line-light); backdrop-filter:blur(8px)}
.s-ink .card:hover,.s-teal .card:hover,.s-deep .card:hover{background:rgba(251,247,240,.1)}

.grid{display:grid; gap:clamp(14px,1.7vw,20px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* Check list — the recurring "✓" pattern */
.checks{display:grid; gap:12px}
.checks li{display:flex; align-items:flex-start; gap:13px; font-size:16px; line-height:1.5}
.check-ico{width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center; margin-top:1px;
  background:var(--teal-100); color:var(--teal-600)}
.s-ink .check-ico,.s-teal .check-ico,.s-deep .check-ico{background:rgba(200,148,52,.18); color:var(--gold-300)}
.checks--gold .check-ico{background:var(--gold-100); color:var(--gold-600)}
.checks--cross .check-ico{background:rgba(196,86,47,.12); color:var(--alert)}
.checks--2{grid-template-columns:repeat(2,1fr); gap:12px 30px}

/* Left-rule statement cards (lifted from the deck) */
.stmt{display:flex; align-items:center; gap:16px; padding:16px 20px; background:rgba(255,255,255,.82);
  border-left:3px solid var(--teal-600); border-radius:0 var(--r-sm) var(--r-sm) 0; box-shadow:var(--sh-sm)}
.stmt span{color:var(--tx-mid); font-size:15.5px}
.stmt b{color:var(--ink-700); font-weight:600; font-size:15.5px}

/* ---------- 12. FRAMEWORK STEPS ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); margin-top:44px}
.step{position:relative; padding:34px 28px 30px; border-radius:var(--r-lg);
  background:rgba(251,247,240,.055); border:1px solid var(--line-light); backdrop-filter:blur(8px);
  transition:transform .3s var(--ease), background .3s var(--ease)}
.step:hover{transform:translateY(-5px); background:rgba(251,247,240,.1)}
.step-n{font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; color:var(--gold-300); display:block}
.step-ico{width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin:16px 0 18px;
  background:linear-gradient(150deg,rgba(200,148,52,.26),rgba(200,148,52,.08)); color:var(--gold-300);
  border:1px solid rgba(235,196,113,.24)}
.step h3{font-family:var(--f-display); font-size:clamp(22px,2.4vw,28px); font-weight:700; color:var(--cream-100); line-height:1.1}
.step-msg{margin-top:12px; font-size:15.5px; color:var(--tx-light-mid); line-height:1.55}
.step-list{margin-top:18px; display:grid; gap:8px}
.step-list li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--tx-light-mid)}
.step-list li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold-300);
  flex:none; margin-top:.62em}
.step-p{margin-top:22px; padding-top:16px; border-top:1px solid var(--line-light);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-300)}

/* ---------- 13. OLD VS NEW ---------- */
.vs{display:grid; grid-template-columns:1fr auto 1fr; gap:0; margin-top:40px; align-items:stretch;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md)}
.vs-col{padding:34px clamp(22px,3vw,38px)}
.vs-old{background:#EFE9E1}
.vs-new{background:var(--ink-700); color:var(--cream-100)}
.vs-mid{width:1px; background:var(--line-dark)}
.vs-h{font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:22px; display:block}
.vs-old .vs-h{color:#4E6266}
.vs-new .vs-h{color:var(--gold-300)}
.vs-list{display:grid; gap:0}
.vs-list li{padding:11px 0; font-size:15.5px; display:flex; align-items:flex-start; gap:11px}
.vs-old .vs-list li{color:#6F6156; border-bottom:1px solid rgba(11,47,53,.08)}
.vs-new .vs-list li{color:var(--cream-100); border-bottom:1px solid var(--line-light)}
.vs-list li:last-child{border-bottom:0}
.vs-old .vs-list li svg{color:#A99A8C; flex:none; margin-top:.22em}
.vs-new .vs-list li svg{color:var(--gold-300); flex:none; margin-top:.22em}
.vs-quote{margin-top:36px; text-align:center; font-family:var(--f-display); font-size:clamp(19px,2.4vw,27px);
  line-height:1.4; color:var(--ink-700); max-width:52ch; margin-inline:auto}
.vs-quote em{font-style:italic; color:var(--gold-600)}

/* ---------- 14. SECRETS ---------- */
.secret{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start; padding:30px 0;
  border-top:1px solid var(--line-dark)}
.secret:last-child{border-bottom:1px solid var(--line-dark)}
.secret-n{font-family:var(--f-display); font-size:clamp(40px,5vw,64px); font-weight:700; line-height:.85;
  color:var(--gold-500); opacity:.36; min-width:1.4em}
.secret h3{color:var(--ink-700)}
.secret p{margin-top:10px; color:var(--tx-mid); font-size:16px; max-width:62ch}
.secret .chips{margin-top:16px; display:flex; gap:8px; flex-wrap:wrap}
.tag{font-family:var(--f-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  padding:6px 13px; border-radius:100px; background:var(--teal-100); color:var(--teal-600)}

/* ---------- 15. ABOUT ---------- */
.about{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(30px,4.5vw,66px); align-items:center}
.about-art{position:relative}
.about-art-frame{border-radius:var(--r-xl); overflow:hidden; background:url("../img/bg-aura.jpg") center/cover;
  aspect-ratio:1/1.2; position:relative; box-shadow:var(--sh-lg)}
.about-art-frame picture{display:contents}
.about-art-frame img{position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:none}
.about-art-frame::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent 62%,rgba(8,38,43,.28) 100%)}
.about-quote{margin-top:26px; padding:22px 24px; border-left:3px solid var(--gold-500);
  background:rgba(251,247,240,.06); border-radius:0 var(--r-md) var(--r-md) 0}
.about-quote p{font-family:var(--f-display); font-style:italic; font-size:clamp(18px,2.1vw,23px);
  line-height:1.42; color:var(--cream-100)}
.about-creds{margin-top:26px; display:flex; gap:10px; flex-wrap:wrap}
.cred{display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:100px;
  border:1px solid var(--line-light); font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tx-light-mid)}
.cred svg{color:var(--gold-300); flex:none}

/* ---------- 16. TESTIMONIALS ---------- */
.tm{display:flex; flex-direction:column; gap:16px; height:100%}
.tm-stars{display:flex; gap:3px; color:var(--gold-500)}
.tm-q{font-family:var(--f-display); font-size:18.5px; line-height:1.48; color:var(--ink-700); flex:1}
.tm-by{display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line-dark)}
.tm-av{width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--gold-300),var(--clay-400)); color:var(--ink-800);
  font-family:var(--f-display); font-weight:700; font-size:17px}
.tm-by b{display:block; font-size:14.5px; font-weight:600; color:var(--ink-700)}
.tm-by b + span{display:block; font-size:12.5px; color:var(--tx-soft)}

/* ---------- 17. RESOURCES / VALUE STACK ---------- */
.res{position:relative; padding:30px 28px; border-radius:var(--r-lg);
  background:rgba(251,247,240,.06); border:1px solid var(--line-light); backdrop-filter:blur(8px)}
.res-ico{width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(150deg,rgba(200,148,52,.28),rgba(200,148,52,.08)); color:var(--gold-300);
  border:1px solid rgba(235,196,113,.22)}
.res h3{color:var(--cream-100); font-size:20px}
.res p{margin-top:10px; font-size:15px; color:var(--tx-light-mid)}
.res-val{margin-top:18px; padding-top:14px; border-top:1px solid var(--line-light);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-300)}
.res-val s{opacity:.5; margin-right:8px}

.stack{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); background:#fff; max-width:720px; margin-inline:auto}
.stack-row{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 26px;
  border-bottom:1px solid var(--line-dark)}
.stack-row span{font-size:15.5px; color:var(--tx-mid)}
.stack-row b{font-family:var(--f-mono); font-size:15px; color:var(--ink-700); white-space:nowrap}
.stack-row--total{background:var(--cream-200)}
.stack-row--total span,.stack-row--total b{font-weight:700; color:var(--ink-700); font-size:16.5px}
.stack-row--free{background:var(--ink-700); border-bottom:0}
.stack-row--free span{color:var(--cream-100); font-weight:600; font-size:16.5px}
.stack-row--free b{color:var(--gold-300); font-size:20px; font-family:var(--f-display); font-weight:700}
.stack-crown{text-align:center; padding:26px;
  background:linear-gradient(150deg,var(--gold-400),var(--gold-600)); color:var(--ink-800)}
.stack-crown b{display:block; font-family:var(--f-display); font-size:clamp(26px,3.4vw,38px); font-weight:700; line-height:1}
.stack-crown span{display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; opacity:.78; margin-top:8px}

/* ---------- 18. FAQ ---------- */
.faq{max-width:820px; margin-inline:auto; margin-top:40px}
.faq-item{border-bottom:1px solid var(--line-dark)}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0; text-align:left; font-weight:600; font-size:17px; color:var(--ink-700); line-height:1.4}
.faq-q svg{flex:none; color:var(--teal-600); transition:transform .28s var(--ease)}
.faq-item.is-open .faq-q svg{transform:rotate(45deg)}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{padding-bottom:22px; color:var(--tx-mid); font-size:15.5px; max-width:66ch}

/* ---------- 19. ATTEND / NOT ATTEND ---------- */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px); margin-top:40px}
.panel{padding:34px clamp(22px,2.6vw,34px); border-radius:var(--r-lg)}
.panel--yes{background:linear-gradient(158deg,#fff,var(--cream-200)); border:1px solid rgba(11,47,53,.08); box-shadow:var(--sh-sm)}
.panel--no{background:#EEE8E0; border:1px solid rgba(11,47,53,.06)}
.panel h3{margin-bottom:22px; display:flex; align-items:center; gap:12px}
.panel--yes h3{color:var(--teal-600)}
.panel--no h3{color:#8A7A6C}
.panel--no .checks li{color:#6F6156}

/* ---------- 20. FINAL CTA ---------- */
.final{text-align:center}
.final .h2{font-size:clamp(30px,4.6vw,56px); max-width:20ch; margin-inline:auto; color:var(--cream-100)}
.final-copy{margin-top:22px; max-width:56ch; margin-inline:auto; font-size:clamp(16px,1.7vw,19px);
  color:var(--tx-light-mid); line-height:1.62}
.final-copy strong{color:var(--gold-300); font-weight:600}
.final .cd{justify-content:center; margin-top:34px}
.final-btn{margin-top:32px}
.final-scarcity{margin-top:20px; font-family:var(--f-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-300)}

/* Quiet brand hand-off on the thank-you page — the only outbound link that
   appears before the footer, and only after the visitor has converted. */
.ty-brand{max-width:640px; margin:26px auto 0; text-align:center; font-size:15.5px;
  line-height:1.7; color:var(--tx-light-mid)}
.ty-brand a{color:var(--gold-300); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px}
.ty-brand a:hover{color:var(--gold-100)}

/* ---------- 21. VIDEO ---------- */
.video{position:relative; aspect-ratio:16/10; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(150deg,var(--ink-600),var(--ink-900)); border:1px solid var(--line-light);
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--sh-lg)}
.video::before{content:""; position:absolute; inset:0; background:url("../img/bg-teal.jpg") center/cover; opacity:1}
.video::after{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 55% at 50% 45%,rgba(200,148,52,.20),transparent 70%)}
.video-in{position:relative; text-align:center; z-index:1}
.video-play{width:78px; height:78px; border-radius:50%; display:grid; place-items:center; margin:0 auto 16px;
  background:rgba(251,247,240,.14); border:1.5px solid rgba(251,247,240,.4); color:var(--cream-100);
  backdrop-filter:blur(8px); transition:all .26s var(--ease)}
.video:hover .video-play{background:var(--gold-500); border-color:var(--gold-500); transform:scale(1.06)}
.video-t{font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-light-mid)}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:2}

/* ---------- 22. STICKY BOTTOM BAR ---------- */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:rgba(8,38,43,.94); backdrop-filter:saturate(160%) blur(16px);
  border-top:1px solid rgba(235,196,113,.22); color:var(--cream-100);
  transform:translateY(110%); transition:transform .42s var(--ease);
  padding:12px 0; box-shadow:0 -8px 40px rgba(5,25,29,.34);
}
.sticky.is-on{transform:translateY(0)}
.sticky-in{display:flex; align-items:center; gap:20px}
.sticky-l{flex:1 1 auto; min-width:0}
.sticky-l b{display:block; font-family:var(--f-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-300); line-height:1.3}
.sticky-l span{display:block; font-size:12.5px; color:var(--tx-light-soft); margin-top:3px}
.sticky-c{flex:none}
.sticky-r{flex:none; text-align:center}
.sticky-r .tiny{margin-top:6px; color:var(--tx-light-soft); display:flex; align-items:center; gap:6px; justify-content:center}
.sticky .cd-u{min-width:48px; padding:7px 6px 5px; background:rgba(251,247,240,.1); border:1px solid var(--line-light)}
.sticky .cd-n{font-size:16px}

/* ---------- 23. MODAL ---------- */
.modal{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px}
.modal.is-on{display:flex}
.modal-veil{position:absolute; inset:0; background:rgba(5,25,29,.7); backdrop-filter:blur(6px);
  animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-box{position:relative; width:100%; max-width:560px; max-height:92vh; overflow-y:auto;
  background:var(--cream-50); border-radius:var(--r-xl); box-shadow:0 40px 100px rgba(5,25,29,.5);
  animation:rise .38s var(--ease)}
@keyframes rise{from{opacity:0; transform:translateY(22px) scale(.98)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.modal-veil,.modal-box{animation:none}}
.modal-x{position:absolute; top:14px; right:14px; z-index:3; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:rgba(11,47,53,.06); color:var(--tx-mid); transition:all .2s var(--ease)}
.modal-x:hover{background:rgba(11,47,53,.13); color:var(--ink-700)}
.modal-top{padding:28px 32px 0}
.modal-body{padding:22px 32px 32px}
.modal-progress{display:flex; gap:6px; margin-bottom:22px}
.mp{flex:1; height:3px; border-radius:2px; background:rgba(11,47,53,.1); overflow:hidden}
.mp.is-done{background:var(--gold-500)}
.mp.is-now{background:linear-gradient(90deg,var(--gold-500) 50%,rgba(11,47,53,.1) 50%)}
.modal-step{display:none}
.modal-step.is-now{display:block}
.modal h3{font-family:var(--f-display); font-size:clamp(22px,3vw,28px); font-weight:700; color:var(--ink-700); line-height:1.2}
.modal .small{margin-top:10px}

.opt{width:100%; display:flex; align-items:flex-start; gap:14px; padding:20px; margin-top:12px; text-align:left;
  border:1.5px solid rgba(11,47,53,.12); border-radius:var(--r-md); background:#fff; transition:all .22s var(--ease)}
.opt:hover{border-color:var(--gold-500); box-shadow:var(--sh-sm); transform:translateY(-2px)}
.opt-dot{width:22px; height:22px; border-radius:50%; border:2px solid rgba(11,47,53,.2); flex:none; margin-top:1px;
  display:grid; place-items:center; transition:all .22s var(--ease)}
.opt--yes .opt-dot{border-color:var(--ok)}
.opt:hover .opt-dot{border-color:var(--gold-500)}
.opt b{display:block; font-size:15.5px; font-weight:600; color:var(--ink-700); line-height:1.4}
.opt b + span{display:block; font-size:13.5px; color:var(--tx-soft); margin-top:5px; line-height:1.45}

.field{margin-top:18px}

/* Multi-select groups — tappable rows rather than a native <select multiple>,
   which is unusable on a phone and needs ctrl-click on a desktop. */
.field--group{border:0; padding:0; margin-inline:0; min-inline-size:0}
.field--group legend{padding:0; margin-bottom:9px; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tx-soft)}
.field-hint{display:block; margin-top:4px; color:var(--teal-600); letter-spacing:.12em}
.opts{display:grid; gap:7px}
.opt-row{display:flex; align-items:center; gap:12px; min-height:46px; padding:9px 13px;
  border:1.5px solid rgba(11,47,53,.13); border-radius:12px; background:#fff; cursor:pointer;
  transition:border-color .18s var(--ease), background .18s var(--ease)}
.opt-row:hover{border-color:rgba(11,47,53,.28)}

/* The native checkbox IS the box — no duplicate element, so it stays
   keyboard-focusable and hit-testable. */
.opt-row input{appearance:none; -webkit-appearance:none; margin:0; flex:none; cursor:pointer;
  width:22px; height:22px; border-radius:6px; background:#fff;
  border:1.5px solid rgba(11,47,53,.26); display:grid; place-items:center;
  transition:background .18s var(--ease), border-color .18s var(--ease)}
.opt-row input::after{content:""; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px); opacity:0; transition:opacity .15s var(--ease)}
.opt-row input:checked{background:var(--gold-600); border-color:var(--gold-600)}
.opt-row input:checked::after{opacity:1}

.opt-label{font-size:14.5px; line-height:1.35; color:var(--ink-700)}
.opt-row:has(input:checked){border-color:var(--gold-500); background:var(--gold-100)}
/* Fallback for browsers without :has() — JS mirrors the state onto the row. */
.opt-row.is-on{border-color:var(--gold-500); background:var(--gold-100)}
.field--group.has-err .opts{outline:1.5px solid var(--alert); outline-offset:5px; border-radius:14px}
.field > label{display:block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx-soft); margin-bottom:8px}
.field > input,.field > select,.phone input{width:100%; padding:15px 16px; border-radius:12px;
  border:1.5px solid rgba(11,47,53,.14); background:#fff; font-size:16px; color:var(--ink-700);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.field > input::placeholder,.phone input::placeholder{color:#A9B7BA}
.field > input:focus,.field > select:focus,.phone input:focus{outline:none; border-color:var(--gold-500);
  box-shadow:0 0 0 4px rgba(200,148,52,.14)}
.field > select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233F5B60' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:44px}
.field.has-err > input,.field.has-err > select,.field.has-err .phone input{border-color:var(--alert)}
.field--group.has-err .opt-row{border-color:rgba(196,86,47,.4)}
.err{display:none; font-size:12.5px; color:var(--alert); margin-top:7px}
.field.has-err .err{display:block}
.phone{display:flex; gap:0}
.phone-cc{display:grid; place-items:center; padding:0 15px; border:1.5px solid rgba(11,47,53,.14); border-right:0;
  border-radius:12px 0 0 12px; background:var(--cream-200); font-family:var(--f-mono); font-size:15px; color:var(--tx-mid)}
.phone input{border-radius:0 12px 12px 0}
.consent{display:flex; align-items:flex-start; gap:11px; margin-top:20px; cursor:pointer}
.consent input{width:19px; height:19px; margin-top:2px; flex:none; accent-color:var(--gold-500); cursor:pointer}
.consent span{font-size:14px; color:var(--tx-mid); line-height:1.5}
.modal .btn{margin-top:24px}
.modal-back{display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:13px 6px;
  color:var(--tx-soft); font-family:var(--f-mono); letter-spacing:.06em; text-transform:uppercase; font-size:11px}
.modal-back:hover{color:var(--ink-700)}
.modal-sess{display:flex; align-items:center; gap:11px; padding:14px 16px; border-radius:12px;
  background:var(--teal-100); margin-top:20px}
.modal-sess svg{color:var(--teal-600); flex:none}
.modal-sess b{font-size:14.5px; color:var(--ink-700); display:block; line-height:1.3}
.modal-sess span{font-size:12.5px; color:var(--teal-600); display:block}

.soft-no{text-align:center; padding:10px 0}
.soft-no-ico{width:62px; height:62px; border-radius:50%; margin:0 auto 20px; display:grid; place-items:center;
  background:var(--cream-200); color:var(--clay-400)}

/* ---------- 24. FOOTER ---------- */
.ftr{background:var(--ink-900); color:var(--tx-light-soft); padding-block:clamp(44px,5vw,64px) 30px}
.ftr-top{display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap;
  padding-bottom:30px; border-bottom:1px solid var(--line-light)}
.ftr-logo{display:block; flex:none}
.ftr-logo img{height:158px; width:auto}
.ftr-links{display:flex; gap:6px 22px; flex-wrap:wrap}
.ftr-links a{font-size:14px; color:var(--tx-light-mid); transition:color .2s;
  padding:11px 4px; display:inline-block}
.ftr-links a:hover{color:var(--gold-300)}
.ftr-bot{margin-top:24px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12.5px}
.ftr-dis{max-width:70ch; margin-top:18px; font-size:12px; line-height:1.6; color:rgba(251,247,240,.55)}

/* ---------- 25. THANK YOU PAGE ---------- */
.ty-hero{text-align:center; padding-block:clamp(56px,7vw,96px)}
.ty-tick{width:84px; height:84px; border-radius:50%; margin:0 auto 26px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--gold-400),var(--gold-600)); color:var(--ink-800); box-shadow:var(--sh-gold);
  animation:pop .6s var(--ease)}
@keyframes pop{0%{transform:scale(.5); opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1); opacity:1}}
@media (prefers-reduced-motion:reduce){.ty-tick{animation:none}}
.ty-hero .h1{color:var(--cream-100); font-size:clamp(32px,5vw,58px)}
.ty-hero .h2{color:var(--gold-300); font-size:clamp(19px,2.4vw,27px); margin-top:14px; font-weight:600}
.ty-conf{margin-top:22px; max-width:56ch; margin-inline:auto; color:var(--tx-light-mid); font-size:17px}
.ty-sess{margin-top:34px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  border-radius:var(--r-lg); background:var(--line-light); overflow:hidden;
  border:1px solid var(--line-light)}
.ty-sess-i{background:rgba(8,38,43,.4); padding:18px 20px; justify-content:flex-start}
@media (max-width:760px){ .ty-sess{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .ty-sess{grid-template-columns:1fr} }
.ty-sess-i{display:flex; align-items:center; gap:11px; text-align:left}
.ty-sess-i svg{color:var(--gold-300); flex:none}
.ty-sess-i b{display:block; font-size:15.5px; color:var(--cream-100); line-height:1.25}
.ty-sess-i b + span{display:block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx-light-soft); margin-top:3px}

.ty-step{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,38px); align-items:start}
.ty-num{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--ink-700); color:var(--gold-300); font-family:var(--f-display); font-size:23px; font-weight:700}
.s-cream .ty-num,.s-warm .ty-num,.s-plain .ty-num{background:var(--ink-700); color:var(--gold-300)}
.s-ink .ty-num,.s-teal .ty-num,.s-deep .ty-num{background:rgba(200,148,52,.18); color:var(--gold-300);
  border:1px solid rgba(235,196,113,.26)}
.ty-cta-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px}
.ty-cta{display:flex; flex-direction:column; align-items:center; gap:14px; padding:30px 22px; text-align:center;
  border-radius:var(--r-lg); background:rgba(251,247,240,.06); border:1px solid var(--line-light);
  transition:all .26s var(--ease)}
.ty-cta:hover{background:rgba(251,247,240,.12); transform:translateY(-4px)}
.ty-cta-ico{width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(150deg,rgba(200,148,52,.26),rgba(200,148,52,.07)); color:var(--gold-300)}
.ty-cta b{font-size:16px; color:var(--cream-100)}
.ty-cta span{font-size:13px; color:var(--tx-light-soft)}
.wa-btn{background:#25D366; color:#04372A; box-shadow:0 10px 26px rgba(37,211,102,.3)}
.wa-btn:hover{background:#1FBB5A; box-shadow:0 14px 32px rgba(37,211,102,.38)}

/* ---------- 26. LEGAL PAGES ---------- */
.legal{padding-block:clamp(50px,6vw,84px)}
.legal h2{font-family:var(--f-display); font-size:clamp(21px,2.6vw,27px); font-weight:700; color:var(--ink-700);
  margin-top:38px; margin-bottom:12px}
.legal h2:first-of-type{margin-top:24px}
.legal p{color:var(--tx-mid); margin-bottom:14px; font-size:16px}
.legal ul{display:grid; gap:9px; margin:14px 0 20px}
.legal ul li{display:flex; gap:12px; align-items:flex-start; color:var(--tx-mid); font-size:15.5px}
.legal ul li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold-500);
  flex:none; margin-top:9px}
.legal-meta{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tx-soft); margin-top:10px}

/* ---------- 27. REVEAL ANIMATION ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.is-in{opacity:1; transform:none}
.rv-2{transition-delay:.08s} .rv-3{transition-delay:.16s} .rv-4{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}

/* ---------- 28. RESPONSIVE ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .hero-copy{max-width:none}
  .hero-art{max-width:380px; margin-inline:auto}
  .hdr-chips{display:none}
  .hdr .btn{margin-left:auto}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr; gap:36px}
  .about-art{max-width:400px; margin-inline:auto; width:100%}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .ftr-logo img{height:132px}
  .vs{grid-template-columns:1fr}
  .vs-mid{width:auto; height:1px}
  .two-col{grid-template-columns:1fr}
  .checks--2{grid-template-columns:1fr}
  .ty-cta-grid{grid-template-columns:1fr}
  .sticky-c{display:none}
}
/* Phones only: stack the three-up grids. Tablets keep three columns. */
@media (max-width:759px){
  .steps{grid-template-columns:1fr}
  .g-3{grid-template-columns:1fr}
}

@media (max-width:700px){
  body{font-size:16px}

  /* Date spans the row; time + duration share the one below. */
  .session{grid-template-columns:1fr 1fr}
  .session-item{padding:11px 14px}
  .session-item:first-child{grid-column:1 / -1; border-bottom:1px solid var(--line-dark)}
  .session-item:nth-child(2){border-left:0}
  .session-v{white-space:normal}

  /* Tighten the fold so the CTA lands early. */
  .hero{padding-block:24px 26px}
  .hero .h1{font-size:clamp(30px,7.7vw,40px); margin-top:12px}
  .hero-sub{margin-top:13px; font-size:15.5px; line-height:1.5}
  .session{margin-top:18px}
  .hero-cta{margin-top:18px; flex-direction:column; align-items:stretch; gap:16px}
  .hero-cta .btn{width:100%}
  .eyebrow::after,.eyebrow--center::before{display:none}
  .cd{justify-content:center}
  .cta-note{text-align:center}
  .hero-proof{gap:18px; margin-top:20px; padding-top:16px}
  .hp{flex:1 1 40%}
  .g-2{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr}
  .secret{grid-template-columns:1fr; gap:8px}
  .secret-n{font-size:38px}
  .ty-step{grid-template-columns:1fr; gap:16px}
  .stack-row{padding:15px 18px}
  .stack-row span{font-size:14.5px}
  .modal-top{padding:24px 22px 0}
  .modal-body{padding:20px 22px 26px}
  .hero-badge{top:2%; right:-2px; padding:9px 12px}
  .hero-badge b{font-size:18px}
  .band-in{flex-direction:column; gap:6px}
}
/* Header CTA label: full on desktop, short on phones */
.hdr .btn .lbl-long{display:inline}
.hdr .btn .lbl-short{display:none}
@media (max-width:520px){
  .hdr-in{height:66px; gap:12px}
  .hdr .btn{padding:15px 18px; font-size:14px}
  .hdr .btn .lbl-long{display:none}
  .hdr .btn .lbl-short{display:inline}
  .brand-mark{height:36px}
  .brand-word{height:19px}
  .brand-sub{display:none}
}

@media (max-width:560px){
  .sticky{padding:10px 0}
  .sticky-in{gap:12px}
  .sticky-l b{font-size:11px}
  .sticky-l span{display:none}
  .sticky-r .tiny{display:none}
  .sticky-r .btn{padding:14px 20px; font-size:14.5px}
}
/* Narrow phones: drop the label and give the whole bar to the button. */
@media (max-width:470px){
  .sticky-l{display:none}
  .sticky-r{flex:1 1 auto}
  .sticky-r .btn{width:100%; padding:16px 20px; font-size:15.5px}
}
@media (max-width:560px){
  .cd-u{min-width:48px}
  .cd-n{font-size:17px}
  body.sticky-on{padding-bottom:76px}
}
body.sticky-on{padding-bottom:88px; background:var(--ink-900)}

/* ---------- 29. PRINT ---------- */
@media print{
  .hdr,.sticky,.modal,.gate{display:none !important}
  .bg,.grain,.motif{display:none}
  body{background:#fff; color:#000}
}

/* --------------------------------------------------------------------------
   SESSIONS PAUSED — dates/times blurred until the next session is confirmed.
   REVERT: delete this whole block when sessions resume (see project memory).
   -------------------------------------------------------------------------- */
[data-session],
[data-time-blur],
[data-cd] {
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
}

/* Review-only control: main.js creates this on localhost/Lovable preview URLs. */
body.session-preview-unblurred [data-session],
body.session-preview-unblurred [data-cd] {
  filter: none;
  user-select: auto;
  pointer-events: auto;
}

.session-preview-toggle {
  position: fixed;
  right: 18px;
  bottom: 104px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--tx-light);
  background: var(--ink-800);
  border: 1px solid var(--line-light);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}
.session-preview-toggle__copy { display: grid; gap: 2px; }
.session-preview-toggle__copy small {
  color: var(--tx-light-soft);
  font-size: 10px;
  font-weight: 500;
}
.session-preview-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--gold-400);
}
@media (max-width:560px) {
  .session-preview-toggle {
    right: 10px;
    bottom: 86px;
    max-width: calc(100vw - 20px);
  }
}
@media print { .session-preview-toggle { display: none !important; } }