/* ============================================================
   VSL FUNNEL — additions layered over base.css (the funnel brand
   system). Everything here is new or a scoped override.
   ============================================================ */

/* ---------- hero ---------- */
.vsl-hero { padding-top: clamp(14px, 1.6vw, 22px); padding-bottom: clamp(14px, 1.8vw, 22px); }
.hero-copy { max-width: 1000px; margin: 0 auto; text-align: center; }
.hero-copy .display { margin-top: 10px; text-align: center; }
/* Hero headline: nudge THIS max-width value to control line wrapping on desktop.
   Lower ch = fewer words per line (pushes words to next line). Live Bodoni is
   wider than the sandbox font, so tune against the live render. Try 34/33/32 etc. */
.hero-copy .display.hero-headline { font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.16; max-width: 33ch; margin-inline: auto; }
.hero-copy .display em { color: var(--gold-soft); font-style: italic; }
/* Condensed hero: smaller headline + tighter spacing so the video (and her
   face) reaches above the fold on a standard laptop viewport on load. */
.vsl-hero .eyebrow { margin-bottom: 0; display: block; width: 100%; text-align: center; }
.vsl-hero .hero-copy > * { text-align: center; }
.vsl-hero h1.display { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.04; text-align: center !important; width: 100%; margin-inline: auto; }
.vsl-hero .hero-sub { margin-top: 12px; }
.vsl-hero .vsl-frame { margin-top: clamp(16px, 2vw, 24px); }
.hero-sub {
  color: var(--cream-soft);
  font-size: clamp(0.9rem, 1.25vw, 1rem);
  line-height: 1.55;
  max-width: none;
  margin: 14px auto 0;
}

/* ---------- the VSL frame ---------- */
.vsl-frame { max-width: 600px; margin: clamp(16px, 2vw, 24px) auto 0; }
.video-embed { position: relative; aspect-ratio: 16 / 9; }
.vsl-caption {
  text-align: center;
  color: var(--cream-soft);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  margin: 14px auto 0;
  max-width: 48ch;
}

/* video placeholder (used until real embeds land) */
.vsl-placeholder {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  background: linear-gradient(160deg, #17131a, #0c080c);
  border: 1px solid rgba(184,154,106,0.18);
}
.vsl-placeholder.small { gap: 8px; }
.vsl-play {
  width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid var(--gold); display: grid; place-content: center;
}
.vsl-placeholder.small .vsl-play { width: 48px; height: 48px; }
.vsl-play span {
  width: 0; height: 0;
  border-left: 18px solid var(--gold);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  margin-left: 5px;
}
.vsl-placeholder.small .vsl-play span {
  border-left-width: 12px; border-top-width: 7px; border-bottom-width: 7px;
}
.vsl-ph-label {
  font-family: var(--body);
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream-soft);
}

/* ---------- picture-in-picture floating player ---------- */
.vsl-pip {
  position: fixed; bottom: 20px; right: 20px; z-index: 900;
  width: min(360px, 80vw); aspect-ratio: 16 / 9;
  background: #0c080c; border: 1px solid rgba(184,154,106,0.3);
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
  animation: pip-in 0.4s var(--ease);
}
@keyframes pip-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.vsl-pip-slot { position: absolute; inset: 0; }
.vsl-pip-slot > * { width: 100% !important; height: 100% !important; }
/* Vidalytics sizes itself with padding-top, so it must not also take a height */
.vsl-pip-slot > [id^="vidalytics"] { height: 0 !important; }
.vsl-pip-close {
  position: absolute; top: 6px; right: 8px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(12,8,12,0.7); color: var(--cream);
  border: none; font-size: 18px; line-height: 1; cursor: pointer;
}
@media (max-width: 560px) { .vsl-pip { bottom: 12px; right: 12px; width: 62vw; } }

/* ---------- application embed: WIDE and contained, not a tall column ---------- */
.apply-intro { color: var(--ink-soft); max-width: 58ch; margin: 14px auto 0; font-size: 1rem; text-wrap: balance; }
.apply-embed-wrap {
  max-width: 1000px;          /* wide */
  margin: 40px auto 0;
  background: var(--charcoal); /* dark theme, per reference */
  border: 1px solid rgba(184,154,106,0.22);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(12,8,12,0.14);
}
.apply-embed {
  width: 100%;
  height: 620px;              /* shorter, wide panel — not full-length scroll */
  border: 0; display: block;
  background: var(--charcoal);
}
@media (max-width: 700px) { .apply-embed { height: 720px; } }

/* ---------- proof: featured video + anonymized message wall ---------- */
.results-sub { color: var(--ink); max-width: 54ch; margin: 16px auto 0; font-size: 1rem; text-wrap: balance; }

/* Shan's featured video block */
.proof-feature {
  max-width: 860px; margin: 0 auto 20px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 0;
  background: #fff;
  border: 1px solid var(--gold);
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 34px 80px -50px rgba(12,8,12,0.45);
}
.proof-feature-video { position: relative; }
.proof-feature-video wistia-player { display: block; width: 100%; height: 100%; }
.proof-feature-cap {
  padding: 28px 26px; display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid var(--taupe);
}
.proof-feature-cap .rtag {
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600; margin-bottom: 14px;
}
.proof-feature-quote {
  font-family: var(--display); font-style: italic; color: var(--charcoal);
  font-size: 1.15rem; line-height: 1.5; font-variation-settings: "opsz" 11, "wght" 500;
  margin-bottom: 18px;
}
.proof-feature-cap .rcap { display: flex; align-items: center; gap: 9px; }
.proof-feature-cap .rdot { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex: none; }
.proof-feature-cap .rtext { font-size: 0.78rem; color: var(--gold-deep); letter-spacing: 0.03em; }
/* Shan video: landscape embed on desktop, real 9:16 vertical embed on mobile */
.pfv-desktop { display: block; }
.pfv-mobile { display: none; }
@media (max-width: 680px) {
  .proof-feature { grid-template-columns: 1fr; }
  .proof-feature-cap { border-left: none; border-top: 1px solid rgba(184,154,106,0.16); }
  .pfv-desktop { display: none; }
  .pfv-mobile { display: block; max-width: 320px; margin: 0 auto; }
}

/* the message wall inherits .receipts/.receipt from base.css (white cards read
   well on the dark section). Only the disclaimer, which sits on the dark
   background, needs a light colour. */
#results .proof-disclaimer { color: var(--ink-soft); }
/* Proof eyebrow to burgundy for legibility on the light section */
#results > .wrap > .center > .eyebrow { color: var(--burgundy); }

/* ---------- face testimonial wall ---------- */
.facewall { margin-top: 96px; }
.facewall-head { text-align: center; margin-bottom: 48px; }
.facewall-head .eyebrow { color: var(--gold-deep); }
.facewall-head .display { color: var(--burgundy); margin-top: 14px; text-wrap: balance; }
.facewall-sub { color: var(--ink); max-width: 54ch; margin: 16px auto 0; font-size: 1rem; line-height: 1.6; }

.face-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.face-grid + .face-grid { margin-top: 30px; }
.face-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 680px; margin: 30px auto 0; }
.fcard { background: #fff; border: 1px solid var(--taupe); border-radius: var(--radius); overflow: hidden; box-shadow: 0 16px 44px rgba(12,8,12,0.07); display: flex; flex-direction: column; }
.fcard .fphoto { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.face-grid.two .fphoto { aspect-ratio: 3/3.4; }
/* circle-framed portraits use a squarer photo area so the circle nearly fills it (no dead space below) */
.fcard.circ .fphoto { aspect-ratio: 64/66; }
.fcard .fbody { padding: 24px 26px 28px; flex: 1; }
.fcard .fnm { font-family: var(--display); font-variation-settings: "opsz" 11, "wght" 640; font-size: 1.6rem; color: var(--burgundy); line-height: 1; }
.fcard .frole { font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-deep); margin-top: 9px; font-weight: 600; line-height: 1.5; }
.fcard .floc { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 5px; font-weight: 500; }
.fcard .fhr { width: 32px; height: 1px; background: var(--gold); margin: 15px 0; }
.fcard .fq { font-family: var(--body); font-weight: 400; font-size: 1rem; line-height: 1.6; color: var(--ink); }

/* ---------- more-stories slider (contained panel) ---------- */
.morewrap { margin-top: 76px; margin-bottom: 64px; }
.morewrap .display { color: var(--cream); text-align: center; margin-top: 0; }
/* the whole slider sits in its own dark contained panel so it pops off the light section */
.more-panel {
  background: linear-gradient(180deg, #17110F 0%, #1E1712 100%);
  border: 1px solid rgba(184,154,106,0.28);
  border-radius: 4px;
  padding: 44px 40px 36px;
  margin-top: 0;
}
.slider-viewport { overflow: hidden; margin-top: 32px; }
.slider-rail { display: flex; transition: transform 0.5s var(--ease); }
.slider-page { min-width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
/* each testimonial is its own bordered card, like the homepage strip */
.mcard {
  text-align: center;
  background: rgba(243,242,238,0.03);
  border: 1px solid rgba(184,154,106,0.3);
  border-radius: 3px;
  padding: 46px 28px 32px;
  position: relative;
  margin-top: 44px;
}
.mcard img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; display: block; margin: -90px auto 0; }
.mcard .fnm { font-family: var(--display); font-variation-settings: "opsz" 11, "wght" 640; font-size: 1.4rem; color: var(--gold-soft); margin-top: 18px; }
.mcard .frole { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-top: 7px; font-weight: 600; line-height: 1.5; text-wrap: balance; }
.mcard .fq { font-family: var(--body); font-weight: 400; font-size: 0.97rem; line-height: 1.6; color: var(--cream-soft); margin-top: 14px; text-wrap: balance; }
.slider-arrows { display: flex; justify-content: center; gap: 20px; margin-top: 38px; }
.slider-arrow { width: 44px; height: 44px; border: 1px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.1rem; background: transparent; cursor: pointer; user-select: none; transition: all 0.3s var(--ease); }
.slider-arrow:hover { background: var(--gold); color: var(--charcoal); }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.slider-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(184,154,106,0.35); cursor: pointer; }
.slider-dot.on { background: var(--gold); }

@media (max-width: 820px) {
  .face-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .face-grid.two { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .face-grid, .face-grid.two { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .more-panel { padding: 44px 20px 36px; }
  .slider-page { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; gap: 60px; }
}

/* ---------- scarcity ---------- */
.scarcity-body { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; max-width: 58ch; margin: 0 auto; }

/* ============================================================
   /BOOKED PAGE
   ============================================================ */
.booked-hero { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 80px); }
.booked-check { color: var(--gold); display: inline-flex; }

/* step cards */
.steps { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
  background: rgba(255,255,255,0.5); border: 1px solid var(--taupe);
  border-radius: var(--radius); padding: 26px 28px;
  box-shadow: 0 30px 70px -55px rgba(12,8,12,0.4);
}
.step-num {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--burgundy);
  font-family: var(--display); font-size: 1.15rem; font-variation-settings: "opsz" 11, "wght" 600;
  display: grid; place-content: center; flex: none;
}
.step-body h3 {
  font-family: var(--display); color: var(--ink); font-size: 1.2rem;
  font-variation-settings: "opsz" 11, "wght" 600; margin-bottom: 7px;
}
.step-body p { color: var(--ink-soft); line-height: 1.65; font-size: 0.98rem; }
.step-body strong { color: var(--burgundy); font-weight: 600; }

/* mock inbox graphic */
.mock-inbox {
  margin-top: 18px; border: 1px solid var(--taupe); border-radius: 6px;
  overflow: hidden; background: #fff; max-width: 460px;
  box-shadow: 0 20px 50px -40px rgba(12,8,12,0.5);
}
.mock-inbox-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; background: var(--stone); border-bottom: 1px solid var(--taupe);
}
.mi-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--taupe); }
.mi-title { margin-left: 8px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.mock-inbox-row { display: flex; align-items: center; gap: 13px; padding: 15px 16px; }
.mi-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--burgundy); color: var(--gold);
  font-family: var(--display); font-size: 0.82rem; font-variation-settings: "opsz" 11, "wght" 700;
  display: grid; place-content: center; letter-spacing: 0.04em;
}
.mi-lines { flex: 1; min-width: 0; }
.mi-from { font-size: 0.86rem; color: var(--ink); font-weight: 600; }
.mi-addr { color: var(--ink-soft); font-weight: 400; }
.mi-subject { font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-star { color: var(--gold); font-size: 1rem; flex: none; }

/* objection grid */
.obj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 980px; margin: 0 auto; }
@media (max-width: 720px) { .obj-grid { grid-template-columns: 1fr; } }
.obj-card {
  background: #fff; border: 2px solid var(--gold);
  border-radius: 4px; padding: 0 0 22px; overflow: hidden;
  box-shadow: 0 30px 70px -50px rgba(12,8,12,0.4);
}
.obj-video { position: relative; aspect-ratio: 16 / 9; }
.obj-card h3 {
  font-family: var(--display); color: var(--burgundy); font-size: 1.1rem;
  font-variation-settings: "opsz" 11, "wght" 600; font-style: italic;
  margin: 20px 22px 10px; line-height: 1.4;
}
.obj-card p { color: var(--ink); line-height: 1.65; font-size: 0.95rem; margin: 0 22px; }

/* light-section receipts (booked results wall on cream) */
.receipts-light .receipt { background: #fff; }
#results.band-gradient-up .proof-disclaimer { color: var(--ink-soft); }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: clamp(40px,6vw,80px) 24px clamp(60px,8vw,100px); }
.legal-back {
  display: inline-block; margin-bottom: 32px; font-family: var(--body);
  font-size: 0.82rem; letter-spacing: 0.04em; color: var(--gold);
  text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.3s;
}
.legal-back:hover { border-color: var(--gold); }
.legal-title { font-size: clamp(2rem, 5vw, 3rem); color: var(--ink); }
.legal-updated { font-family: var(--body); font-size: 0.8rem; color: var(--ink-soft); margin-top: 10px; letter-spacing: 0.04em; }
.legal-body { margin-top: 36px; }
.legal-body h2 {
  font-family: var(--display); color: var(--burgundy); font-size: 1.3rem;
  font-variation-settings: "opsz" 11, "wght" 600; margin: 34px 0 12px;
}
.legal-body p { color: var(--ink-soft); line-height: 1.75; margin-bottom: 14px; font-size: 1rem; }
.legal-body a { color: var(--burgundy); text-decoration: underline; text-underline-offset: 2px; }

/* personalized greeting on /booked — warm, high-touch for the tier */
.booked-greeting {
  font-family: var(--display); font-style: italic;
  color: var(--gold-deep); font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-variation-settings: "opsz" 11, "wght" 500;
  margin-top: 18px; line-height: 1.3;
}

/* ============================================================
   AUTHORITY / ABOUT SECTION
   ============================================================ */
.authority {
  display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(32px, 5vw, 64px);
  align-items: center; max-width: 1040px; margin: 0 auto;
}
.authority-portrait { margin: 0; }
.authority-portrait img {
  width: 100%; height: auto; display: block; border-radius: 4px;
  box-shadow: 0 40px 90px -50px rgba(12,8,12,0.6);
}
.authority-copy .display { color: var(--ink); }
.authority-lead {
  font-family: var(--display); font-style: italic; color: var(--burgundy);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.45;
  font-variation-settings: "opsz" 11, "wght" 500; margin-top: 20px;
}
.authority-body { color: var(--ink-soft); line-height: 1.75; margin-top: 16px; font-size: 1rem; }
.authority-quote {
  border-left: 2px solid var(--gold); margin: 26px 0 24px; padding: 4px 0 4px 20px;
  font-family: var(--display); font-style: italic; color: var(--burgundy);
  font-size: 1.05rem; line-height: 1.5; font-variation-settings: "opsz" 11, "wght" 500;
}
@media (max-width: 760px) {
  .authority { grid-template-columns: 1fr; gap: 28px; }
  .authority-portrait { max-width: 380px; margin: 0 auto; }
}

/* ============================================================
   MOBILE REFINEMENTS (Marni feedback)
   ============================================================ */
@media (max-width: 620px) {
  /* Point 2 / mock inbox was overflowing the screen. Make everything fluid. */
  .step { padding: 22px 18px; gap: 16px; }
  .mock-inbox { max-width: 100%; width: 100%; }
  .mock-inbox-row { gap: 10px; padding: 13px 12px; }
  /* let the long from-address wrap instead of forcing width */
  .mi-from { font-size: 0.8rem; word-break: break-word; }
  .mi-addr { display: inline-block; word-break: break-all; }
  .mi-subject { white-space: normal; font-size: 0.78rem; }
  /* guard against any child forcing horizontal overflow */
  .step-body { min-width: 0; }
  .step-body p { overflow-wrap: anywhere; }
}
/* Global safety: never allow horizontal scroll from a stray wide child */
html, body { overflow-x: hidden; }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-top: 1px solid var(--taupe); }
.faq-item:last-child { border-bottom: 1px solid var(--taupe); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 4px; text-align: left;
  font-family: var(--display); color: var(--ink);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-variation-settings: "opsz" 11, "wght" 500;
  transition: color 0.3s var(--ease);
}
.faq-q:hover { color: var(--burgundy); }
.faq-icon { position: relative; width: 18px; height: 18px; flex: none; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; background: var(--gold); transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.faq-icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-icon::after  { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
.faq-item.open .faq-icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq-item.open .faq-q { color: var(--burgundy); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.45s var(--ease), opacity 0.45s var(--ease), padding 0.45s var(--ease);
  opacity: 0;
}
.faq-item.open .faq-a { max-height: 500px; opacity: 1; padding-bottom: 24px; }
.faq-a p { color: var(--ink-soft); line-height: 1.75; font-size: 1rem; padding-right: 40px; }
@media (max-width: 560px) { .faq-a p { padding-right: 0; } }

/* ============================================================
   BRAND CREDIBILITY STRIP
   ============================================================ */
.band-cream { background: var(--cream); }
.brand-strip { padding-block: clamp(24px, 3.5vw, 44px); }
.brand-strip-label {
  font-family: var(--body); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 34px;
  max-width: none; white-space: nowrap;
}
.brand-logos {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: nowrap; gap: clamp(20px, 3.5vw, 48px);
  max-width: 1100px; margin: 0 auto;
}
.brand-logos img {
  height: clamp(22px, 2.8vw, 38px); width: auto; display: block;
  opacity: 0.72; transition: opacity 0.4s var(--ease); flex: 0 0 auto;
}
.brand-logos img:hover { opacity: 1; }
/* GUESS reads small (compact wordmark); scale it up as one of the most
   recognisable brands. Lovisa scaled slightly too for visual balance. */
.brand-logos img[src*="guess"] { height: clamp(30px, 3.8vw, 52px); }
.brand-logos img[src*="lovisa"] { height: clamp(32px, 4vw, 56px); }
/* only wrap / shrink on genuinely small screens where one line cannot hold five */
@media (max-width: 720px) {
  .brand-strip-label { white-space: normal; }
  .brand-logos { flex-wrap: wrap; gap: 26px 34px; }
  .brand-logos img { height: 28px; }
  .brand-logos img[src*="guess"] { height: 38px; }
  .brand-logos img[src*="lovisa"] { height: 42px; }
  .brand-logos img[src*="lornajane"] { height: 32px; }
}

/* Tighten the vertical gap between the On Availability CTA and the
   "More, still" panel — the two stacked .section paddings created a large
   dead band. Cut availability's bottom and more's top. */
/* ---- Coordinated section spacing (Marni: bring it all closer) ----
   The stacked .section paddings (up to 120px each) created loose gaps
   between Apply, the video beat, About, and the availability/more panel.
   Scoped overrides pull adjacent edges together for a tighter read. */
.apply-tighten { padding-top: clamp(20px, 2.6vw, 34px); padding-bottom: clamp(28px, 4vw, 52px); }
.proofvideo-tighten { padding-top: clamp(24px, 3.5vw, 44px); padding-bottom: clamp(28px, 4vw, 52px); }
.about-tighten { padding-top: clamp(28px, 4vw, 52px); }
.availability-tighten { padding-bottom: clamp(24px, 3.5vw, 40px); }
.more-tighten { padding-top: clamp(24px, 3.5vw, 40px); }

/* Tighten founders wall top so it sits closer under the brand strip */
.wall-tighten { padding-top: clamp(24px, 3.5vw, 44px); }

/* Proof block: force the "Real people, real results" eyebrow burgundy and
   the "People like you..." heading black, overriding the band-gradient-up
   gold eyebrow rule (same specificity, later in cascade otherwise wins). */
.proof-block .eyebrow.head-burgundy { color: var(--burgundy); }
.proof-block .display.head-burgundy { color: var(--charcoal); }

/* ============================================================
   LONG-FORM COPY (Marni's page copy, Sections 1–15)
   ============================================================ */
.lf { padding-block: clamp(56px, 8vw, 104px); color: var(--ink); }
.lf-cream { background: var(--cream); }
.lf-stone { background: var(--stone); }
.lf-col { max-width: 660px; margin-inline: auto; }
.lf-col p { max-width: none; font-size: 1.1rem; line-height: 1.6; margin: 0 0 0.8em; color: var(--ink); }
.lf-eyebrow { color: var(--gold-deep); font-weight: 600; margin: 0 0 14px; }
.lf-h { font-size: clamp(1.85rem, 3.6vw, 2.7rem); color: var(--burgundy); margin: 0 0 30px; text-wrap: balance; }
.lf-h3 { font-size: clamp(1.5rem, 2.8vw, 2rem); color: var(--burgundy); margin: 0 0 24px; line-height: 1.12; text-wrap: balance; }
.lf-col p.lf-strong { font-weight: 700; color: var(--burgundy); margin-top: 1.1em; margin-bottom: 1.1em; }
.lf-col p.lf-inner { font-family: var(--display); font-variation-settings: "opsz" 11, "wght" 500; font-size: 1.35rem; color: var(--burgundy); padding-left: 18px; border-left: 2px solid var(--gold); margin: 1em 0 1.2em; }
.lf-cta { margin-top: 36px; }
.lf-close { margin-top: 48px; }
.lf-close p { text-align: left; }

/* tried → result list (Section 3) */
.lf-tried { list-style: none; padding: 0; margin: 10px 0 28px; border-top: 1px solid var(--taupe); }
.lf-tried li { display: grid; grid-template-columns: minmax(150px, 38%) 28px 1fr; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--taupe); font-size: 1.05rem; }
.lf-tried .t-try { font-weight: 600; color: var(--ink); }
.lf-tried .t-arrow { color: var(--gold-deep); }
.lf-tried .t-res { color: var(--ink-soft); }
@media (max-width: 560px) {
  .lf-tried li { grid-template-columns: 1fr; gap: 2px; }
  .lf-tried .t-arrow { display: none; }
}

/* early proof (Shan video) */
.lf-proof-early .proof-feature { margin-top: 0; }

/* BEFORE / AFTER */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: 0 auto 72px; }
.ba-box { padding: clamp(28px, 4vw, 44px); border-radius: 4px; }
.ba-before { background: var(--stone); border: 1px solid var(--taupe); }
.ba-after { background: #fff; border: 1px solid var(--gold); box-shadow: 0 24px 50px -30px rgba(59,15,25,0.35); }
.ba-tag { font-size: 0.74rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 700; margin: 0 0 14px; }
.ba-before .ba-tag { color: var(--ink-soft); }
.ba-after .ba-tag, .fit-yes .ba-tag { color: var(--gold-deep); }
.ba-h { font-size: clamp(1.5rem, 2.6vw, 1.95rem); line-height: 1.14; margin: 0 0 22px; text-wrap: balance; }
.ba-before .ba-h { color: var(--ink); }
.ba-after .ba-h { color: var(--burgundy); }
.ba-list, .fit-list { list-style: none; padding: 0; margin: 0; }
.ba-list li, .fit-list li { position: relative; padding: 11px 0 11px 24px; border-top: 1px solid rgba(26,23,20,0.1); font-size: 1.04rem; line-height: 1.5; }
.ba-list li::before, .fit-list li::before { content: ''; position: absolute; left: 2px; top: 1.05em; width: 7px; height: 7px; transform: rotate(45deg); }
.ba-before li { color: var(--ink-soft); }
.ba-before li::before, .fit-not li::before { border: 1px solid var(--ink-soft); }
.ba-after li { color: var(--ink); }
.ba-after li::before, .fit-yes li::before { background: var(--gold); }
.ba-prose { padding-top: 8px; }

/* WHO THIS IS / IS NOT FOR */
.fit-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 22px; max-width: 1020px; margin: 0 auto; align-items: start; }
.fit-box { padding: clamp(26px, 4vw, 42px); border-radius: 4px; }
.fit-not { background: var(--stone); border: 1px solid var(--taupe); }
.fit-not .ba-tag { color: var(--ink-soft); }
.fit-yes { background: #fff; border: 1px solid var(--gold); box-shadow: 0 24px 50px -30px rgba(59,15,25,0.35); }
.fit-not li { color: var(--ink-soft); }
.fit-intro { font-weight: 600; color: var(--burgundy); margin: 0 0 12px; max-width: none; }
.fit-note { margin: 18px 0 0; color: var(--ink); max-width: none; }
.fit-note + .fit-note { margin-top: 6px; }

/* objections (Section 12) */
.obj { padding: 26px 0; border-top: 1px solid var(--taupe); }
.obj:first-of-type { border-top: 0; padding-top: 0; }
.obj-q { font-family: var(--body); font-size: 1.2rem; font-weight: 700; color: var(--burgundy); margin: 0 0 10px; }
.obj p { margin-bottom: 0.45em; }

@media (max-width: 820px) {
  .ba-grid, .fit-grid { grid-template-columns: 1fr; }
}
.fit-not .fit-h { color: var(--ink); }
.fit-yes .fit-h { color: var(--burgundy); }

/* ---- LONG-FORM: centred layout (matches hero, proof and about) ---- */
.lf-col { text-align: center; }
.lf-col p { max-width: 58ch; margin-left: auto; margin-right: auto; }
.lf-h, .lf-h3 { margin-left: auto; margin-right: auto; max-width: 22ch; }
.lf-cta { display: flex; justify-content: center; }
.lf-close p { text-align: center; }
.lf-col p.lf-inner { border-left: 0; padding: 14px 0; max-width: 32ch; position: relative; }
.lf-col p.lf-inner::before, .lf-col p.lf-inner::after { content: ''; display: block; width: 44px; height: 1px; background: var(--gold); margin: 0 auto; }
.lf-col p.lf-inner::before { margin-bottom: 14px; }
.lf-col p.lf-inner::after { margin-top: 14px; }

/* tried -> result: one centred line per row */
.lf-tried { max-width: 560px; margin-left: auto; margin-right: auto; }
.lf-tried li { display: block; text-align: center; }
.lf-tried .t-arrow { display: inline; margin: 0 10px; }

/* objections: centred blocks */
.obj { max-width: 620px; margin: 0 auto; }
.obj-q { text-align: center; }

/* who this is / is not for: equal columns, equal height */
.fit-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
.fit-box { display: flex; flex-direction: column; }
.fit-not .fit-note:first-of-type { margin-top: auto; padding-top: 22px; }
@media (max-width: 820px) { .fit-grid { grid-template-columns: 1fr; } .fit-not .fit-note:first-of-type { margin-top: 18px; padding-top: 0; } }
.lf-col p.lf-inner { margin: 1em auto 1.2em; text-align: center; }

/* ---- headline measure + orphan control ---- */
.lf-h { font-size: clamp(1.8rem, 3.1vw, 2.9rem); max-width: 34ch; line-height: 1.12; }
.lf-col p, .ba-list li, .fit-list li, .obj p { text-wrap: pretty; }
.lf-h, .lf-h3, .ba-h { text-wrap: balance; }
.lf-col { max-width: 1000px; }
.lf-h { max-width: 32ch; }
#s1-one-thing .lf-h { font-size: clamp(1.7rem, 2.6vw, 2.45rem); max-width: 46ch; }
.lf-tried, .obj, .lf-inner { margin-left: auto; margin-right: auto; }

/* ============================================================
   LAYOUT SWITCH: wide left-aligned reading column (Nero-style
   reading pattern, Marni palette). Centred only for proof, the
   Before/After and fit boxes, and the final next step.
   ============================================================ */
.lf-col { max-width: 1000px; text-align: left; }
.lf-col p { max-width: none; margin-left: 0; margin-right: 0; font-size: 1.06rem; line-height: 1.55; margin-bottom: 0.7em; }
.lf-h, .lf-h3 { margin-left: 0; margin-right: 0; max-width: 30ch; font-size: clamp(1.7rem, 2.7vw, 2.5rem); line-height: 1.1; text-wrap: balance; }
#s1-one-thing .lf-h { font-size: clamp(1.7rem, 2.7vw, 2.5rem); max-width: 30ch; }
.lf-cta { justify-content: flex-start; }
.lf-col p.lf-inner { margin: 1em 0 1.2em; text-align: left; max-width: none; padding: 2px 0 2px 18px; border-left: 2px solid var(--gold); }
.lf-col p.lf-inner::before, .lf-col p.lf-inner::after { display: none; }
.obj { max-width: none; margin: 0; }
.obj-q { text-align: left; }
/* centred moments */
.lf-center { text-align: center; }
.lf-center p, .lf-center.lf-close p { margin-left: auto; margin-right: auto; max-width: 62ch; text-align: center; }
.lf-center .lf-h { margin-left: auto; margin-right: auto; }
.lf-center .lf-cta { justify-content: center; }
.lf-h, .lf-h3, #s1-one-thing .lf-h { max-width: 24em; }

/* ============================================================
   VISUAL ACCENTS — icon lists, section badges, objection cards
   ============================================================ */
.lf-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px !important; padding: 7px 14px 7px 12px; border: 1px solid var(--gold); border-radius: 999px; font-size: 0.72rem !important; line-height: 1 !important; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep) !important; background: rgba(255,255,255,0.45); }
.lf-badge::before { content: ''; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

.lf-grid { list-style: none; padding: 0; margin: 14px 0 26px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.lf-grid li { position: relative; padding: 15px 18px 15px 48px; background: #fff; border: 1px solid var(--taupe); border-radius: 6px; font-size: 1.02rem; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.lf-grid li::before { content: ''; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; border-radius: 50%; }
/* "tried / pain" marker: burgundy-outlined circle with a short bar */
.lf-grid--x li::before { border: 1.5px solid rgba(59,15,25,0.55); background: linear-gradient(rgba(59,15,25,0.55),rgba(59,15,25,0.55)) center / 9px 1.5px no-repeat; }
/* "what changes" marker: solid gold circle with a white check */
.lf-grid--check li { border-color: rgba(166,136,79,0.55); }
.lf-grid--check li::before { background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat; }
.lf-stone .lf-grid li { background: rgba(255,255,255,0.7); }

/* objections as a two-column card grid */
.obj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.obj-grid .obj { background: #fff; border: 1px solid var(--taupe); border-top: 2px solid var(--gold); border-radius: 6px; padding: 24px 26px 18px; margin: 0; }
.obj-grid .obj:first-of-type { border-top: 2px solid var(--gold); padding-top: 24px; }
.obj-grid .obj-q { display: flex; gap: 12px; align-items: baseline; font-size: 1.12rem; }
.obj-grid .obj-q::before { content: '?'; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--burgundy); color: #fff; font-size: 0.8rem; font-weight: 700; display: inline-grid; place-items: center; transform: translateY(-2px); }
.obj-grid .obj p { font-size: 1rem; }
@media (max-width: 820px) { .obj-grid { grid-template-columns: 1fr; } }
.lf-center.lf-close p { text-wrap: balance; }
.lf-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.lf-grid li { flex: 0 1 auto; }
/* manual two-line break on desktop */
.lf-h--nobal { text-wrap: wrap; max-width: none; }
@media (max-width: 1100px) { .br-desk { display: none; } .lf-h--nobal { text-wrap: balance; } }
/* badge sits close to the facewall headline */
.proof-block .facewall { margin-top: 0; }
.proof-block .facewall-head .display { margin-top: 18px; }
/* objections: masonry columns so each card is only as tall as its text */
.obj-grid { display: block; column-count: 2; column-gap: 16px; }
.obj-grid .obj { break-inside: avoid; margin: 0 0 16px; display: block; }
@media (max-width: 820px) { .obj-grid { column-count: 1; } }

/* ---- hand-set headline lines (first line longest), desktop only ---- */
.hl-set { --maxf: 2.6rem; }
.ba-h.hl-set { --maxf: 3.1rem; }
.authority-copy .hl-set { --maxf: 2.5rem; }
@media (min-width: 1100px) {
  .hl-set { text-wrap: wrap !important; max-width: none !important;
    font-size: min(var(--maxf), calc(var(--W) / (var(--L) * 0.54)), calc(100vw * var(--VW) / (var(--L) * 0.54))) !important; }
  .hl-set .hl { display: block; white-space: nowrap; }
}
.authority-copy .hl-set { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
/* callout card inside long-form prose */
.lf-callout { background: #fff; border: 1px solid var(--taupe); border-left: 3px solid var(--gold); border-radius: 6px; padding: 22px 26px; margin: 18px 0 24px; }
.lf-callout p:last-child { margin-bottom: 0; }
.lf-callout p.lf-strong:first-child { margin-top: 0; }

/* ============================================================
   MARNI FEEDBACK PASS (Oct 2026): scale, weight, contrast
   ============================================================ */
/* 1. one size up, proportionally (everything is rem-based) */
html { font-size: 112.5%; }
/* 2. body text: pitch black, semibold; highlighted lines extra-bold */
:root { --ink: #000000; --ink-soft: #2E2925; }
body { font-weight: 600; color: #000; }
.lf-col p, .obj p, .fit-list li, .ba-list li, .fcard .fq, .mcard .fq, .faq-a p, .authority-body, .hero-sub, .vsl-caption, .facewall-sub { font-weight: 600; }
.lf-col p { color: #000; }
.lf-col p.lf-strong { font-weight: 800; color: var(--burgundy); font-size: 1.14rem; }
.fcard .fq { color: #000; }
/* 3. hero gold words: stay italic, deeper gold, heavier, lifted with a shadow */
.hero-copy .display em { color: #9A7A3E; font-variation-settings: "wght" 760; font-weight: 760; text-shadow: 0 1px 0 rgba(0,0,0,.18), 0 2px 10px rgba(59,15,25,.18); }
/* 4. Bodoni at smaller sizes: heavier so thin strokes survive */
.lf-h3, .ba-h, .fit-h, .obj-q, .fcard .fnm { font-variation-settings: "wght" 700; font-weight: 700; }
.lf-col p.lf-inner { font-variation-settings: "opsz" 11, "wght" 700; font-weight: 700; font-size: 1.55rem; line-height: 1.3; padding: 4px 0 4px 20px; border-left-width: 3px; margin: 1.4em 0; }
/* 5. About: the italic line becomes bold upright burgundy */
.authority-lead--bold { font-style: normal !important; font-family: var(--body) !important; font-weight: 800 !important; color: var(--burgundy) !important; font-size: 1.3rem !important; line-height: 1.45 !important; }
.authority-copy .btn { margin-top: 26px !important; }
/* 6. lists: clean rows, no outlined boxes */
.lf-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin: 10px 0 24px; }
.lf-grid li, .lf-stone .lf-grid li { background: none; border: 0; border-radius: 0; padding: 9px 0 9px 40px; font-weight: 700; font-size: 1.06rem; color: #000; }
.lf-grid li::before { left: 0; top: 10px; width: 24px; height: 24px; }
/* negative: filled charcoal circle, white cross */
.lf-grid--x li::before { border: 0; background: #2B2628 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8l8 8M16 8l-8 8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat; }
/* positive: filled gold circle, white tick */
.lf-grid--check li { border: 0; }
.lf-grid--check li::before { background-size: 24px 24px; }
/* 7. Before/After + Who this is for: one paired treatment */
.ba-before, .fit-not { background: linear-gradient(160deg, #36302F 0%, #2A2526 55%, #231F20 100%); border: 1px solid #3E3735; box-shadow: 0 24px 50px -30px rgba(0,0,0,.55); }
.ba-before .ba-tag, .fit-not .ba-tag { color: #CFC6BA; }
.ba-before .ba-h, .fit-not .fit-h { color: #F3F2EE; }
.ba-before li, .fit-not li { color: #EFE9E1 !important; border-top-color: rgba(243,242,238,.14) !important; font-weight: 600; }
.fit-not .fit-note { color: #F3F2EE; font-weight: 600; }
.ba-after, .fit-yes { background: #FFFFFF; border: 1px solid var(--gold); }
.ba-after li, .fit-yes li { color: #000 !important; font-weight: 600; }
.fit-yes .fit-intro { font-weight: 800; }
.ba-list li, .fit-list li { padding-left: 36px; }
.ba-list li::before, .fit-list li::before { left: 0; top: 12px; width: 22px; height: 22px; transform: none; border-radius: 50%; border: 0; }
.ba-before li::before, .fit-not li::before { background: #8A827B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' fill='none' stroke='%232A2526' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px 22px no-repeat; }
.ba-after li::before, .fit-yes li::before { background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px 22px no-repeat; }
/* 8. objections + testimonials: heavier, darker */
.obj-grid .obj p { color: #000; }
.fcard .fq, .mcard .fq { font-weight: 600; }
/* 9. breathing room */
.brand-strip { padding-bottom: clamp(56px, 7vw, 88px) !important; }
.lf-thread { padding-top: clamp(80px, 10vw, 128px); }
/* mobile-only line break */
.br-mob { display: none; }
@media (max-width: 700px) { .br-mob { display: inline; } }
/* mobile: sturdier Bodoni hairlines on box headings, prose sub-headings and quotes
   (low optical size = thicker thin strokes) */
@media (max-width: 820px) {
  .ba-h, .fit-h, .lf-h3, .lf-col p.lf-inner { font-variation-settings: "opsz" 8, "wght" 800 !important; font-weight: 800 !important; }
  /* the tall message wall appears without a long fade on mobile */
  .receipts.reveal { opacity: 1; transform: none; transition: none; }
}
/* "The cause" headline on mobile: keep "You cannot out-perform" on line one,
   sized so it always fits the screen width */
@media (max-width: 700px) {
  .h-cause { font-size: min(2.2rem, calc((100vw - 52px) / 11.5)) !important; }
  .h-cause .nowrap-mob { white-space: nowrap; }
}

/* ============================================================
   STAGE 2 REFINEMENTS
   ============================================================ */
/* 1. hero gold: crisper, darker shadow set slightly lower (no soft blur) */
.hero-copy .display em { text-shadow: 0 1.5px 0 rgba(0,0,0,.42), 0 3px 3px rgba(0,0,0,.22) !important; }
/* 3. Before/After prose headings match the other major section headings,
      and stay larger than the pull quotes */
.ba-prose .lf-h3 { font-size: clamp(1.8rem, 3.1vw, 2.9rem) !important; line-height: 1.1; margin-bottom: 26px; }
@media (max-width: 820px) {
  .ba-prose .lf-h3 { font-size: 2rem !important; }
  .ba-prose .lf-inner { font-size: 1.3rem !important; }
}
/* 5. How the experience works */
.exp-label { font-family: var(--body); font-weight: 800 !important; font-size: 1.05rem !important; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep) !important; margin: 0 0 18px !important; }
.exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 32px; }
.exp-item { background: #fff; border: 1px solid var(--taupe); border-top: 2px solid var(--gold); border-radius: 6px; padding: 22px 24px; }
.exp-item h3 { font-family: var(--body); font-weight: 800; font-size: 1.1rem; color: var(--burgundy); margin: 0 0 8px; }
.exp-item p { margin: 0 !important; font-size: 1rem !important; color: #000; }
@media (max-width: 820px) { .exp-grid { grid-template-columns: 1fr; } }
/* 6. What this is not: charcoal band */
.lf-dark { background: linear-gradient(160deg, #36302F 0%, #2A2526 55%, #231F20 100%); }
.lf-dark .lf-col p { color: #EFE9E1; }
.lf-dark .lf-col p strong { color: #F3F2EE; font-weight: 800; }
.lf-dark .lf-col p.lf-strong { color: #F3F2EE; }
.lf-badge--dark { background: rgba(243,242,238,.06) !important; }
.not-list { list-style: none; padding: 0; margin: 6px auto 26px; display: grid; gap: 12px; justify-items: center; }
.not-list li { position: relative; padding-left: 36px; font-weight: 700; font-size: 1.12rem; color: #CFC6BA; }
.not-list li::before { content: ''; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #8A827B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7' fill='none' stroke='%232A2526' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px no-repeat; }
.lf-dark .lf-col p.not-is { font-family: var(--display); font-variation-settings: "opsz" 11, "wght" 700; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; color: #F3F2EE; max-width: 24ch; margin: 0 auto 26px; text-wrap: balance; }

/* ---- HERO HEADLINE FIX ----
   The "glitchy" look came from two things stacking: at large sizes Bodoni's
   optical sizing switches to hairline-thin strokes, and a hard offset shadow
   was doubling every hairline. Fix: sturdier optical size for the whole
   headline, and a small soft shadow (no hard offset) on the gold words. */
.hero-copy .display { font-optical-sizing: none; font-variation-settings: "opsz" 28; }
.hero-copy .display em {
  color: #8C6C32 !important;
  font-variation-settings: "opsz" 28, "wght" 700 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.28) !important;
}
/* hero gold words: crisp directional drop shadow (down-right, no blur),
   sized in em so it scales with the headline on every screen */
.hero-copy .display em { text-shadow: 0.045em 0.045em 0 rgba(59,15,25,.30) !important; }
/* sturdier strokes on the gold words so the drop shadow reads as one clean shape */
.hero-copy .display em { font-variation-settings: "opsz" 12, "wght" 820 !important; font-weight: 820 !important; text-shadow: 0.035em 0.035em 0 rgba(59,15,25,.28) !important; }
/* hero gold words: upright (no italic), heavier, sturdy strokes, light crisp shadow */
.hero-copy .display em { font-style: normal !important; font-variation-settings: "opsz" 12, "wght" 800 !important; font-weight: 800 !important; text-shadow: 0.03em 0.03em 0 rgba(59,15,25,.22) !important; }
/* ---- HERO FINAL: italic gold words with a burgundy underline, no shadow;
        heavier headline so the thin strokes read clearly ---- */
.hero-copy .display.hero-headline { font-variation-settings: "opsz" 20, "wght" 700 !important; font-weight: 700 !important; }
.hero-copy .display em {
  font-style: italic !important;
  font-variation-settings: "opsz" 20, "wght" 800 !important; font-weight: 800 !important;
  color: #8C6C32 !important;
  text-shadow: none !important;
  text-decoration: underline; text-decoration-color: var(--burgundy);
  text-decoration-thickness: 0.07em; text-underline-offset: 0.14em;
  text-decoration-skip-ink: auto;
}
/* ---- HERO: soft burgundy highlight band behind the lower half of the gold
        phrases (replaces the thin underline); phrases never split ---- */
.hero-copy .display em {
  text-decoration: none !important;
  white-space: nowrap;
  background: linear-gradient(transparent 60%, rgba(122,36,54,.22) 60%, rgba(122,36,54,.22) 92%, transparent 92%);
  padding: 0 .06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero-copy .display em { white-space: normal; background: linear-gradient(transparent 58%, rgba(122,36,54,.34) 58%, rgba(122,36,54,.34) 92%, transparent 92%) !important; }
@media (max-width: 700px) {
  .hero-nw { white-space: nowrap; }
  /* size the headline so "see, and 2–5X your results" always fits one line */
  .hero-copy .display.hero-headline { font-size: min(1.8rem, calc((100vw - 40px) / 13.2)) !important; }
}
.hero-copy .display em { background: linear-gradient(transparent 80%, rgba(110,31,47,.85) 80%, rgba(110,31,47,.85) 95%, transparent 95%) !important; }
/* heavier gold phrases so thin strokes (e.g. the "y" descender) hold up over the bar */
.hero-copy .display em { font-variation-settings: "opsz" 8, "wght" 900 !important; font-weight: 900 !important; }

/* ============================================================
   FINAL COSMETIC PASS (Marni)
   ============================================================ */
/* 1. remove the burgundy bars; the heavier gold carries the emphasis */
.hero-copy .display em { background: none !important; padding: 0 !important; }
/* 2. a little more breathing room in the hero stack */
.vsl-hero .eyebrow { margin-bottom: 6px !important; }
.vsl-hero h1.display, .hero-copy .display.hero-headline { margin-top: 18px !important; }
.vsl-hero .hero-sub { margin-top: 22px !important; }
.vsl-hero .vsl-frame { margin-top: clamp(28px, 3vw, 36px) !important; }
/* 3. top strip on mobile: second phrase on its own line, no dot */
@media (max-width: 700px) {
  .topstrip .dot { display: none; }
  .topstrip .ts-2 { display: block; margin-top: 4px; }
}
/* 4. application on mobile: no boxed border, sits in the page like its own section */
@media (max-width: 700px) {
  #apply { background: var(--cream) !important; }
  .apply-embed-wrap { margin: 28px 0 0 !important; width: 100%; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    border-top: 1px solid rgba(184,154,106,.45) !important; border-bottom: 1px solid rgba(184,154,106,.45) !important; background: var(--cream) !important; }
  .apply-embed { background: var(--cream) !important; }
}

/* ============================================================
   APPLICATION: stronger prominence (desktop + mobile)
   Charcoal band behind the whole section; the form sits on it
   as a bright cream card with a gold edge.
   ============================================================ */
#apply { background: linear-gradient(170deg, #36302F 0%, #2A2526 50%, #1F1B1C 100%) !important; color: #F3F2EE; }
#apply .lf-col p { color: #EFE9E1 !important; }
#apply .lf-col p.lf-strong { color: #F3F2EE !important; }
#apply .lf-eyebrow, #apply .eyebrow { color: #CDB083 !important; }
#apply .lf-h { color: #F3F2EE !important; }
#apply .apply-embed-wrap {
  background: var(--cream) !important;
  border: 1px solid rgba(205,176,131,.7) !important;
  border-radius: 8px !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.65), 0 0 0 6px rgba(205,176,131,.10) !important;
  overflow: hidden;
}
#apply .apply-embed { background: var(--cream) !important; }
@media (max-width: 700px) {
  #apply { background: linear-gradient(170deg, #36302F 0%, #2A2526 50%, #1F1B1C 100%) !important; }
  #apply .apply-embed-wrap { margin: 30px 14px 0 !important; width: auto !important; border: 1px solid rgba(205,176,131,.7) !important; border-radius: 8px !important; }
}
/* separate the application band from the dark "What this is not" band above it */
#apply { border-top: 1px solid rgba(205,176,131,.35); }

/* ============================================================
   APPLICATION: its own main stage (Marni, Oct 2026)
   Extra room after the "No countdowns" copy, a large cream
   heading with its own space, then the form card beneath it.
   ============================================================ */
#apply .apply-stage-head {
  text-align: center;
  margin: clamp(72px, 9vw, 130px) auto 0;
  padding: clamp(56px, 7vw, 96px) 20px 0;
  border-top: 1px solid rgba(205,176,131,.28);
  max-width: 1000px;
}
#apply .apply-stage-head h2 {
  font-family: var(--display);
  font-variation-settings: "opsz" 14, "wght" 600;
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #F3F2EE;
  margin: 0;
  text-wrap: balance;
}
#apply .apply-embed-wrap { margin-top: clamp(44px, 5vw, 72px) !important; }
#apply.apply-tighten { padding-bottom: clamp(72px, 9vw, 130px); }
@media (max-width: 700px) {
  #apply .apply-stage-head { margin-left: 14px; margin-right: 14px; }
  #apply .apply-embed-wrap { margin-top: 40px !important; }
}
/* longer CTA labels: allow a clean two-line wrap on narrow phones */
@media (max-width: 480px) {
  .btn.btn-gold { line-height: 1.35; text-align: center; padding-left: 1.6em; padding-right: 1.6em; }
}

/* Booked page question cards: a true grid, so cards read left to right and
   keep an even gap (a later rule for the VSL page's doubts list was turning
   this into text columns with no space between stacked cards). */
#questions .obj-grid { display: grid; column-count: auto; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: start; }
@media (max-width: 720px) { #questions .obj-grid { grid-template-columns: 1fr; } }

/* ============================================================
   LUXURY SPACING PASS (Marni, Oct 22 2026)
   1. Section padding doubled  2. Body line-height + heading tracking
   3. Room around the Before/After and Who-this-is-for lists
   4. Three CTAs only, with the 2-5X line beneath
   ============================================================ */
/* 1. vertical padding between major sections, doubled */
.lf { padding-block: clamp(88px, 16vw, 208px); }
.section { padding-block: clamp(88px, 18vw, 240px); }
.proofvideo-tighten, .wall-tighten { padding-top: clamp(48px, 7vw, 88px); }
.proofvideo-tighten { padding-bottom: clamp(56px, 8vw, 104px); }
.about-tighten { padding-top: clamp(56px, 8vw, 104px); }
.more-tighten { padding-top: clamp(48px, 7vw, 80px); }
.lf-cta { margin-top: 56px; }

/* 2. typography */
body { line-height: 1.7; }
.lf-col p { line-height: 1.75; margin-bottom: 1em; }
.authority-body, .faq-a p { line-height: 1.8; }
.lf-h, .lf-h3, .ba-h, .fit-h, .lf-proof-early .lf-h { letter-spacing: 0.05em; }
.lf-h, .lf-h3 { max-width: 24ch; }

/* 3. lists: room to scan */
.ba-grid { gap: clamp(28px, 4vw, 48px); margin-bottom: clamp(88px, 12vw, 140px); }
@media (min-width: 821px) { .ba-grid, .fit-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.fit-grid { gap: clamp(28px, 4vw, 48px); }
.ba-box, .fit-box { padding: clamp(32px, 5vw, 60px); }
.ba-h { margin-bottom: 30px; }
.ba-list li, .fit-list li { padding: 19px 0 19px 40px; line-height: 1.7; }
.ba-list li::before, .fit-list li::before { top: 22px; }
.fit-intro { margin-bottom: 18px; }
.fit-note { margin-top: 28px; }

/* 4. CTA with the 2-5X line under it */
.cta-stack { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta-sub { font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; padding-left: 0.26em; }

/* hand-set headlines: allow for the added tracking so lines still fit */
@media (min-width: 1100px) {
  .hl-set { font-size: min(var(--maxf), calc(var(--W) / (var(--L) * 0.6)), calc(100vw * var(--VW) / (var(--L) * 0.6))) !important; }
}
.ba-h.hl-set { --maxf: 2.55rem; }
/* phones: lighter tracking so hand-broken headlines still fit the screen */
@media (max-width: 700px) {
  .lf-h, .lf-h3, .ba-h, .fit-h, .lf-proof-early .lf-h { letter-spacing: 0.02em; }
}

/* The Real Reason heading: same size as the other section headings (Marni, Oct 22 2026) */
#s1-one-thing h2.lf-h { font-size: clamp(1.9rem, 4vw, 3.1rem); max-width: 24ch; }

/* ============================================================
   TITLE SYSTEM (Marni, Oct 22 2026)
   One weight for every title: the heavier, sturdier setting from the
   "After" title she approved (low optical size so the thin strokes
   don't blend into the background).
   One size for every section title; the hero headline is always larger.
   ============================================================ */
:root {
  --h-hero: clamp(2rem, 4.6vw, 3.4rem);   /* 36px phone → 61px desktop */
  --h-sec:  clamp(1.7rem, 3.4vw, 2.6rem); /* 31px phone → 47px desktop */
  --h-wght: "opsz" 8, "wght" 800;
}
/* weight: hero, section titles, Before/After, fit boxes, authority, sub-titles */
.hero-copy .display.hero-headline,
h2.display, .lf-h, .lf-h3, .ba-h, .fit-h {
  font-optical-sizing: none !important;
  font-variation-settings: var(--h-wght) !important;
  font-weight: 800 !important;
}
/* hero: largest on every screen; lines wrap naturally at the bigger size */
.hero-copy .display.hero-headline { font-size: var(--h-hero) !important; max-width: 24ch; line-height: 1.12; }
.hero-copy .display.hero-headline .br-mob { display: none !important; }
.hero-copy .hero-nw { white-space: normal !important; }
/* section titles: one size everywhere */
h2.display.lf-h, h2.display.hl-set:not(.authority-copy *), .lf-h3, .ba-h, .fit-h,
#apply h2.display, .proof-block h2.display:not([style*="font-size"]), .facewall-head h2.display {
  font-size: var(--h-sec) !important;
}
#s1-one-thing h2.lf-h { font-size: var(--h-sec) !important; }
/* hand-set line breaks stay, but a line may wrap rather than overflow */
.hl-set .hl { white-space: normal !important; }
.h-cause .nowrap-mob { white-space: normal !important; }
.ba-prose .lf-h3, .lf-h3, .proof-block .display.head-burgundy, h2.display.head-burgundy,
.authority-copy h2.display.hl-set { font-size: var(--h-sec) !important; }
/* "More, still" is a sub-label inside the proof wall, kept a clear step below the titles */
h2.display[style*="font-size:1.9rem"] { font-size: calc(var(--h-sec) * 0.72) !important; }
/* at the unified size, these titles wrap naturally (balanced) instead of hand-set lines */
.authority-copy .hl-set .hl, .ba-h.hl-set .hl { display: inline !important; }
.authority-copy .hl-set, .ba-h, .lf-h--nobal { text-wrap: balance !important; }
.lf-h .br-desk { display: none !important; }
/* same tracking on every section title (hero keeps its own) */
h2.display { letter-spacing: 0.05em; }
@media (max-width: 700px) { h2.display { letter-spacing: 0.02em; } }
.ba-h:not(.fit-h) { text-wrap: wrap !important; }
.ba-grid .ba-h, .fit-grid .fit-h { letter-spacing: 0.02em !important; }
/* card titles may use some of the card's right padding so "What have you" stays on one line */
@media (min-width: 821px) { .ba-grid .ba-h { margin-right: -36px; } }
.ba-grid .ba-h.hl-set .hl { display: block !important; }

/* ============================================================
   BRAND LOGOS spaced out like the homepage brand row (Marni, Oct 23 2026):
   logos spread evenly across the full content width instead of
   bunched in the centre.
   ============================================================ */
.brand-logos { justify-content: space-between !important; max-width: 1180px !important; gap: 36px !important; }
.brand-logos { margin-top: clamp(28px, 4vw, 48px) !important; }
@media (max-width: 720px) {
  /* phones: three across, then two, spread evenly with generous air */
  .brand-logos { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 34px 12px !important; justify-items: center; align-items: center; max-width: 360px !important; margin-inline: auto !important; }
  .brand-logos img { grid-column: span 2; max-width: 100%; }
  .brand-logos img:nth-child(4) { grid-column: 2 / span 2; }
  .brand-logos img:nth-child(5) { grid-column: 4 / span 2; }
}
@media (min-width: 721px) {
  .brand-strip .wrap { max-width: 1240px; }
  .brand-logos { max-width: 1120px !important; padding-inline: clamp(0px, 2vw, 24px); }
}
@media (max-width: 720px) {
  .brand-logos { grid-template-columns: 1fr 1fr !important; gap: 40px 28px !important; max-width: 330px !important; }
  .brand-logos img, .brand-logos img:nth-child(4), .brand-logos img:nth-child(5) { grid-column: auto; max-width: 100%; object-fit: contain; }
  .brand-logos img:nth-child(5) { grid-column: 1 / -1; }
}