/* ── The Mum's Side Hustle · REBUILD layout + conversion components ──
   The uploaded styles.css holds tokens + quiz screens only; the sales-page
   layout classes lived in a second sheet (not provided), so they're rebuilt
   here, plus every new conversion element from the teardown. ───────────── */

/* surround + phone-ish column */
body {
  background: radial-gradient(1200px 700px at 50% -8%, #2a221b 0%, #1a140f 62%, #110d09 100%);
  min-height: 100vh;
}
.page {
  max-width: 460px;
  margin: 0 auto;
  background: var(--bg);
  min-height: 100vh;
  position: relative;
  box-shadow: 0 30px 120px rgba(0,0,0,0.55);
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--bg); padding: 10px 14px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* masthead */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--rule);
}
.wm { font-family: var(--serif); font-weight: 480; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }
.wm .dot { color: var(--terra); }

/* generic image placeholder — agent fills these */
.img-placeholder, .iphoto {
  background: #d8cdb4; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.img-placeholder::after {
  content: attr(data-label);
  font-family: var(--serif); font-style: italic; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(35,29,23,0.4); text-align: center; padding: 0 14px;
}
.img-placeholder.has-img::after { content: none; }
.img-placeholder.rect { border-radius: 0; }
.img-placeholder.circle { border-radius: 50%; }

/* ── STRUCTURE SWITCH (top control) ─────────────────────────── */
.struct-switch {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--ink); color: var(--bg-card);
  font-family: var(--serif);
}
.struct-switch .ss-label {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,239,226,0.55); white-space: nowrap;
}
.struct-seg {
  display: inline-flex; flex: 1; border: 1px solid rgba(245,239,226,0.28); border-radius: 999px; overflow: hidden;
}
.struct-seg button {
  flex: 1; background: transparent; color: rgba(245,239,226,0.7);
  border: none; padding: 8px 10px; font-family: var(--serif);
  font-size: 12.5px; letter-spacing: 0.02em; transition: background 160ms, color 160ms;
}
.struct-seg button[aria-pressed="true"] { background: var(--terra); color: #FBF7EE; }

/* ── sections reorder by structure via flex order ───────────── */
main.flow { display: flex; flex-direction: column; }
/* Structure A — Emotional Arc (default) */
body.struct-a .s-hook{order:1}
body.struct-a .s-trust{order:2}
body.struct-a .s-cta1{order:3}
body.struct-a .s-belief{order:4}
body.struct-a .s-story{order:5}
body.struct-a .s-bundle{order:6}
body.struct-a .s-credit{order:7}
body.struct-a .s-proof{order:8}
body.struct-a .s-guarantee{order:9}
body.struct-a .s-faq{order:10}
body.struct-a .s-objproof{order:11}
body.struct-a .s-final{order:12}
/* Structure B — Proof-Led */
body.struct-b .s-hook{order:1}
body.struct-b .s-trust{order:2}
body.struct-b .s-proof{order:3}
body.struct-b .s-cta1{order:4}
body.struct-b .s-belief{order:5}
body.struct-b .s-bundle{order:6}
body.struct-b .s-credit{order:7}
body.struct-b .s-story{order:8}
body.struct-b .s-guarantee{order:9}
body.struct-b .s-faq{order:10}
body.struct-b .s-objproof{order:11}
body.struct-b .s-final{order:12}

/* ── payment marks row (quiet reassurance under primary CTAs) ─ */
.pay-marks {
  display: flex; justify-content: center; align-items: center;
  gap: 16px; margin-top: 12px;
}
.pay-marks img {
  height: 20px; width: auto; display: block;
  filter: grayscale(1) opacity(.6);
}

/* ── price deadline note under the first CTA ────────────────── */
.price-note { margin: 10px 0 0; text-align: center; }

/* ── demoted secondary link (was .btn-pill) ─────────────────── */
.link-results {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; margin-top: 4px;
  font-size: 15px; color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--ink-mute);
}
.link-results:hover, .link-results:focus-visible { color: var(--ink); text-decoration-color: var(--ink); }
.link-results .arrow { text-decoration: none; }

/* ── hero standfirst (deck under the H1, before body copy) ──── */
.hero-standfirst {
  font-family: var(--serif);
  font-weight: 440;
  font-variation-settings: "opsz" 24;
  font-size: 16px;            /* 1rem at mobile */
  line-height: 1.4;           /* tighter than .body's 1.5 */
  color: var(--ink);
  text-wrap: pretty;
  max-width: 34rem;           /* matches the H1 column on wider screens */
  margin: 0 0 20px;           /* H1's own 22px bottom margin sets the gap above */
}
.hero-standfirst strong { font-weight: 580; color: var(--terra); }

/* ── stars / rating ─────────────────────────────────────────── */
.rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stars { display: inline-flex; gap: 2px; color: var(--terra); font-size: 18px; line-height: 1; }
.stars svg { width: 18px; height: 18px; display: block; }
.rating .r-score { font-family: var(--serif); font-weight: 480; font-size: 16px; }
.rating .r-count { font-size: 13.5px; color: var(--ink-mute); font-style: italic; }

/* rating row as a quiet tap target → #results (not a button) */
a.rating-link {
  text-decoration: none; color: inherit;
  min-height: 44px;
  -webkit-tap-highlight-color: rgba(0,0,0,0.06);
}
a.rating-link .r-count {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-mute);
}
a.rating-link:hover .r-count,
a.rating-link:focus-visible .r-count { color: var(--ink); text-decoration-color: var(--ink); }

/* ── avatar trio (designed for transparent cut-out photos) ──── */
.avatar-trio { display: flex; align-items: center; }
.avatar-trio .av {
  width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #efe6d2 0%, #ddd0b5 78%);
  border: 2px solid var(--bg);
  box-shadow: inset 0 -6px 14px rgba(35,29,23,0.10);
  margin-left: -14px; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.avatar-trio .av:first-child { margin-left: 0; }
.avatar-trio .av img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.avatar-trio .av .av-tag {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 10px; color: rgba(35,29,23,0.4);
}

/* ── honest urgency device ──────────────────────────────────── */
.urgency {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--rule-strong); background: var(--bg-card);
  padding: 12px 16px;
}
.urgency .u-mark { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--terra); line-height: 1; }
.urgency .u-text { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.urgency .u-text strong { font-weight: 540; color: var(--ink); }

/* ── living / always-ahead band ─────────────────────────────── */
.living-band {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 22px 0; margin-top: 26px;
  display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start;
}
.living-band .lb-icon {
  font-family: var(--serif); font-style: italic; font-size: 34px; color: var(--terra); line-height: 1;
}
.living-band h4 { font-family: var(--serif); font-weight: 500; font-size: 18px; margin: 0 0 6px; }
.living-band p { margin: 0; }

/* ── price block ────────────────────────────────────────────── */
.price-block { margin-top: 18px; padding: 24px 22px 26px; border: 1.5px solid var(--ink); text-align: center; background: var(--bg); }
.price-strike { font-family: var(--serif); font-size: 14px; color: var(--ink-soft); text-decoration: line-through; margin-bottom: 4px; }
.price-big { font-family: var(--serif); font-size: 60px; font-weight: 320; line-height: 1; color: var(--terra); font-variation-settings:'opsz' 144,'SOFT' 100; font-style: italic; }

/* ── Apple Pay button (revealed only on Apple devices via JS) ── */
.btn.applepay {
  background: #000; color: #fff;
  justify-content: center; gap: 7px;
  border-radius: 8px;
}
.btn.applepay:hover { background: #111; }
.btn.applepay .ap-logo {
  font-size: 19px; line-height: 1;
  /* Apple logo glyph () renders on Apple devices, where this button shows */
}
.btn.applepay span { font-weight: 500; letter-spacing: 0; }

/* ── payment / trust cluster ────────────────────────────────── */
.pay-trust { display: flex; align-items: stretch; justify-content: center; margin-top: 18px; }
.pay-trust .pt {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px;
  text-align: center; font-size: 10px; font-weight: 700; line-height: 1.35; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 2px 8px;
}
.pay-trust .pt svg { width: 18px; height: 18px; flex: none; stroke-width: 2.2; }

/* ── toggled proof section ──────────────────────────────────── */
.proof-toggle { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; margin: 6px 0 24px; }
.proof-toggle button {
  background: transparent; color: var(--ink); border: none;
  padding: 11px 18px; font-family: var(--serif); font-size: 14px; letter-spacing: 0.01em;
  transition: background 160ms, color 160ms;
}
.proof-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--bg-card); }
.proof-view[hidden] { display: none; }

/* real proof grid (payouts + photos) */
.payout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.payout-grid figure { margin: 0; }
.payout-grid figcaption { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-mute); margin-top: 6px; }
.payout-grid .tall { aspect-ratio: 9/16; }
.payout-grid .wide { aspect-ratio: 4/5; }
.payout-grid .span2 { grid-column: span 2; aspect-ratio: 16/10; }
/* the grid item is the <figure>, so the span must apply there too */
.payout-grid figure:has(> .span2) { grid-column: span 2; }

/* written testimonial cards */
.review-card { background: var(--bg-card); border: 1px solid var(--rule); padding: 20px 20px 18px; margin-bottom: 14px; }
.review-card .rc-stars { color: var(--terra); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
.review-card .rc-quote { font-family: var(--serif); font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.review-card .rc-quote em { font-style: italic; }
.review-card .rc-who { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.review-card .rc-av { width: 34px; height: 34px; border-radius: 50%; background: #d8cdb4; flex-shrink: 0; }
.review-card .rc-name { font-family: var(--serif); font-size: 13.5px; font-weight: 480; }
.review-card .rc-name span { display: block; font-weight: 400; font-style: italic; color: var(--ink-mute); font-size: 12px; }

/* real message screenshots (In their words) */
.proof-screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.proof-screens figure { margin: 0; }
.proof-screens img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule); border-radius: 16px;
  background: var(--bg-card); box-shadow: 0 6px 22px rgba(35,29,23,0.08);
}
.proof-screens figcaption {
  font-family: var(--serif); font-style: italic; font-size: 12.5px;
  color: var(--ink-mute); margin-top: 8px; text-align: center;
}
@media (max-width: 640px) {
  .proof-screens { grid-template-columns: 1fr; gap: 18px; max-width: 340px; margin: 0 auto; }
}

/* credibility (Sarah) */
.credit-row { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; }

/* bullet list (three differences) */
.bulletlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.bulletlist li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.bulletlist .roman { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--terra); line-height: 1; }

/* ── sticky CTA (mobile) ────────────────────────────────────── */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; justify-content: center;
  transform: translateY(120%); transition: transform 280ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.sticky-cta.on { transform: translateY(0); pointer-events: auto; }
.sticky-cta-inner {
  width: 100%; max-width: 460px;
  display: flex; align-items: center; gap: 14px;
  background: var(--ink); padding: 12px 16px;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.25);
}
.sticky-cta .sc-meta { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; flex-shrink: 0; }
.sticky-cta .sc-rate { font-size: 11px; color: rgba(245,239,226,0.78); white-space: nowrap; }
.sticky-cta .sc-stars { color: var(--terra); letter-spacing: 1px; }
/* sticky-bar rating as quiet tap target → #results; padding+negative
   margin gives ≥44px hit area without changing the bar's visual height */
.sticky-cta a.sc-rate-link {
  text-decoration: none; color: rgba(245,239,226,0.78);
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 14px 0; margin: -14px 0;
  -webkit-tap-highlight-color: rgba(255,255,255,0.08);
}
.sticky-cta a.sc-rate-link .sc-count {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(245,239,226,0.5);
}
.sticky-cta .sc-price { font-family: var(--serif); font-size: 22px; color: var(--bg-card); font-style: italic; }
.sticky-cta .sc-price s { font-size: 13px; color: rgba(245,239,226,0.45); font-style: normal; margin-right: 5px; }
.sticky-cta .sc-label { font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(245,239,226,0.5); white-space: nowrap; }
.sticky-cta .btn { flex: 1; padding-left: 18px; padding-right: 18px; }
.sticky-cta .btn span:first-child { white-space: nowrap; }

/* ── footer ─────────────────────────────────────────────────── */
.site-footer { padding: 32px 24px 110px; border-top: 1px solid var(--rule); }
.footer-grid { display: flex; flex-direction: column; gap: 14px; }
.legal { font-size: 12.5px; color: var(--ink-mute); }
.legal a { color: var(--ink-mute); }

/* misc helpers */
.center { text-align: center; }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 22px; } .mt-l { margin-top: 32px; }

/* ── scroll reveal (progressive enhancement) ────────────────────
   Sections fade + rise as they enter the viewport. The hidden state
   only applies when <html> carries .js-reveal — added synchronously
   by a tiny head script ONLY when JS is on AND the visitor hasn't
   asked for reduced motion. So: no JS, reduced motion, or any error
   → everything renders normally and nothing can get stuck hidden. */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .section {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 0.8s cubic-bezier(.2,.7,.2,1),
      transform 0.8s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
  }
  html.js-reveal .section.is-in {
    opacity: 1;
    transform: none;
  }
}

/* ── Archetype personalization additions ────────────────────────
   "Why this bundle is made for you" callout + related spacing.
   Reuses page tokens (bg-card, rule, terra, ink, sans) for consistency.
   Slightly tighter padding so it feels lighter than price blocks. */
.why-bundle {
  margin: 0 0 16px;
  padding: 13px 17px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.why-bundle .why-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 5px;
}
.why-bundle .why-content {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.48;
  color: var(--ink);
}
.why-bundle .why-reassure {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
  font-family: var(--serif);
}

/* Personalised line directly under H1 — ensure breathing room to standfirst */
#archetype-personal-para {
  font-size: 17px;
  margin: 0 0 14px;
  display: none;
}