/* ── The Mum's Side Hustle ─ shared tokens + screens ─────────── */

:root {
  /* PALETTE — committed direction (warm cream, terracotta, sienna, ink) */
  --bg:        #ECE4D3;     /* warm paper */
  --bg-deep:   #E2D8C2;     /* paper, second layer */
  --bg-card:   #F5EFE2;     /* lighter card */
  --terra:     #C14E1E;     /* anchor terracotta */
  --sienna:    #9E5B3F;     /* secondary warm */
  --moss:      #586549;     /* sparing accent */
  --ink:       #231D17;     /* deep warm ink */
  --ink-soft:  #4A3F35;     /* muted ink for body */
  --ink-mute:  #7A6F62;     /* captions, eyebrows */
  --rule:      rgba(35,29,23,0.16);
  --rule-strong: rgba(35,29,23,0.34);

  /* TYPE — Fraunces does almost everything; clean fallback for tiny UI */
  --serif: 'Fraunces', 'Tiempos Headline', Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* clean sans for button labels */
  --eye:   'Fraunces', Georgia, serif;
}

/* ── reset & base ──────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: #1f1a16; /* dark surround so the phone reads as a held device */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

/* ── stage: phone centered on a warm dark surround ─────────── */
.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 12px;
  background:
    radial-gradient(1200px 600px at 50% -10%, #2a221b 0%, #1a140f 60%, #110d09 100%);
}
.stage-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* ── inner phone screen container ──────────────────────────── */
.screen {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* full-bleed scroll region under iOS chrome */
.scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: 48px;
}
.scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ── editorial primitives ──────────────────────────────────── */
.eyebrow {
  font-family: var(--eye);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-feature-settings: "ss01";
}
.eyebrow-rule {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-mute);
}
.eyebrow-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.eyebrow-rule.center { justify-content: center; }
.eyebrow-rule.center::before {
  content: ""; flex: 1; height: 1px; background: var(--rule); max-width: 32px;
}
.eyebrow-rule.center::after { max-width: 32px; }

.display {
  font-family: var(--serif);
  font-weight: 360;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 0;
  letter-spacing: -0.022em;
  line-height: 1.02;
  color: var(--ink);
  text-wrap: pretty;
  hyphens: none;
}
.display em, .display .it {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-weight: 380;
}
.h2 {
  font-family: var(--serif);
  font-weight: 380;
  font-variation-settings: "opsz" 90;
  letter-spacing: -0.015em;
  line-height: 1.08;
  font-size: 32px;
  color: var(--ink);
  text-wrap: pretty;
}
.h3 {
  font-family: var(--serif);
  font-weight: 480;
  font-variation-settings: "opsz" 36;
  font-size: 19px;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--ink);
}
.body {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 14;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.body em { font-style: italic; }
/* Emphasis highlight — bold terracotta with a soft underline, for pulling
   the eye to key phrases in body copy. Keeps the sans body face. */
.hl {
  font-weight: 640;
  color: var(--terra);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(193,78,30,0.4);
}
.body-sm { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.cap {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-mute);
  font-style: italic;
}

.numeral {
  font-family: var(--serif);
  font-weight: 320;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-feature-settings: "lnum", "tnum";
  font-size: 44px;
  line-height: 1;
  color: var(--terra);
}
.numeral.ink { color: var(--ink); }

.rule {
  height: 1px; background: var(--rule); margin: 0;
}
.rule.thick { height: 2px; background: var(--ink); opacity: 0.85; }
.rule.dotted {
  height: 0; border-top: 1px dashed var(--rule-strong); background: none;
}

.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; color: var(--terra);
  font-family: var(--serif); font-style: italic; font-size: 18px;
}
.ornament::before, .ornament::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

/* ── buttons ───────────────────────────────────────────────── */
.btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 22px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-variation-settings: normal;
  font-size: 16px;
  letter-spacing: 0.005em;
  text-align: left;
  text-decoration: none;
  transition: transform 120ms ease, background 160ms ease;
}
.btn, .btn:link, .btn:visited, .btn span { text-decoration: none; }
.btn[hidden] { display: none; } /* .btn's display:inline-flex would otherwise beat the [hidden] UA rule, leaking the Apple Pay button onto non-Apple browsers */
.btn .arrow { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1; }
.btn:active { transform: translateY(1px); }
.btn.terra { background: var(--terra); color: #FBF7EE; }
.btn.terra:hover { background: #B0461A; }
/* Apple Pay — official white mark on a black, softly-rounded button */
.btn.applepay {
  background: #000; color: #fff;
  justify-content: center; align-items: center; gap: 8px;
  border-radius: 8px; padding: 14px 22px;
}
.btn.applepay:hover { background: #111; }
.btn.applepay .ap-mark { height: 24px; width: auto; display: block; }
.btn.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); 
}
.btn-pill {
  justify-content: center;
  border-radius: 999px;
  padding: 14px 24px;
  margin-top: 10px;
  background: transparent;
  color: var(--terra);
  border: 1px solid var(--terra);
  font-size: 15px;
}
.btn-pill:hover { background: rgba(193, 78, 30, 0.06); }
.btn-quiet {
  background: transparent; color: var(--ink-mute);
  border: none; padding: 8px 0; width: auto;
  font-size: 14px; letter-spacing: 0.02em;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--rule);
}

/* ── tappable answer card ──────────────────────────────────── */
.ans {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 18px 56px 18px 20px;
  position: relative;
  font-family: var(--serif);
  font-weight: 420;
  font-variation-settings: "opsz" 36;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: background 140ms ease, border-color 140ms ease, transform 120ms ease;
}
.ans .ans-hint {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 4px;
  font-variation-settings: "opsz" 14;
}
.ans::after {
  content: "→";
  position: absolute;
  right: 20px; top: 50%; transform: translateY(-50%);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-mute);
  transition: transform 140ms ease, color 140ms ease;
}
.ans:hover { border-color: var(--ink); background: #FBF6E8; }
.ans:hover::after { color: var(--terra); transform: translate(3px, -50%); }
.ans.selected {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.ans.selected .ans-hint { color: rgba(245,239,226,0.7); }
.ans.selected::after { color: var(--bg); }
.ans:active { transform: scale(0.995); }

/* ── inputs ────────────────────────────────────────────────── */
.field {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 14px 2px 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  outline: none;
  font-variation-settings: "opsz" 36;
}
.field::placeholder { color: var(--ink-mute); font-style: italic; opacity: 0.7; }
.field:focus { border-color: var(--terra); }

/* ── quiz progress (editorial dots) ────────────────────────── */
.qprog {
  display: flex; align-items: center; gap: 10px;
}
.qprog .qpcount {
  font-family: var(--serif);
  font-feature-settings: "lnum", "tnum";
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-transform: uppercase;
  white-space: nowrap;
}
.qprog .qpline {
  flex: 1; height: 1px; background: var(--rule);
  position: relative;
}
.qprog .qpline-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--terra);
  transition: width 480ms cubic-bezier(.5,.1,.2,1);
}

/* ── transitions ───────────────────────────────────────────── */
.fade-in {
  animation: fade-in 360ms cubic-bezier(.2,.6,.2,1) both;
}
.slide-in {
  animation: slide-in 380ms cubic-bezier(.2,.6,.2,1) both;
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── image slot styling ────────────────────────────────────── */
image-slot {
  display: block;
  background: #d8cdb4;
}
.iphoto {
  background: #d8cdb4;
  position: relative;
  overflow: hidden;
}
.iphoto::before {
  content: "PHOTO"; 
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic;
  font-size: 13px; letter-spacing: 0.18em;
  color: rgba(35,29,23,0.35);
}

/* ── pull quote ────────────────────────────────────────────── */
.pull {
  font-family: var(--serif);
  font-weight: 360;
  font-variation-settings: "opsz" 90, "SOFT" 100;
  font-style: italic;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.pull-attr {
  font-family: var(--serif);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 14px;
}

/* ── small chip ────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 4px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terra); }

/* ── archetype crest ───────────────────────────────────────── */
.crest {
  width: 110px; height: 110px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  position: relative;
  background: var(--bg-card);
}
.crest::before, .crest::after {
  content: ""; position: absolute;
  width: 4px; height: 4px; background: var(--terra); border-radius: 50%;
}
.crest::before { top: -2px; left: 50%; transform: translateX(-50%); }
.crest::after  { bottom: -2px; left: 50%; transform: translateX(-50%); }
.crest .crest-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 36px;
  font-weight: 320;
  color: var(--terra);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* ── sales page sectionalisation ───────────────────────────── */
.section {
  padding: 56px 24px;
}
.section + .section { padding-top: 0; }
/* Colored bands (dark / cream) need their top padding back: their background
   makes a 0-top look cramped and the colour seam abrupt. Also restore top
   padding on whatever section FOLLOWS a colored band, for the same reason. */
.section + .section.dark,
.section + .section.cream,
.section.dark + .section,
.section.cream + .section { padding-top: 56px; }
.section.dark {
  background: var(--ink); color: var(--bg-card);
}
.section.dark .body { color: rgba(245,239,226,0.78); }
.section.dark .display { color: var(--bg-card); }
.section.dark .eyebrow { color: rgba(245,239,226,0.55); }
.section.dark .rule { background: rgba(245,239,226,0.18); }

.section.cream {
  background: #F4ECD8;
}

/* faq */
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
}
.faq-item summary {
  cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  list-style: none;
  font-family: var(--serif);
  font-weight: 460;
  font-size: 18px;
  font-variation-settings: "opsz" 36;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-mark {
  font-family: var(--serif); font-style: italic; font-size: 22px;
  color: var(--terra); flex-shrink: 0;
  transition: transform 200ms ease;
}
.faq-item[open] .faq-mark { transform: rotate(45deg); }
.faq-item .faq-body {
  padding-top: 12px;
  font-family: var(--serif); font-size: 16px; line-height: 1.55;
  color: var(--ink-soft);
}

/* bundle component card */
.bundle-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  padding: 22px 22px 24px;
  position: relative;
}
.bundle-card .bundle-num {
  position: absolute;
  top: -14px; left: 18px;
  background: var(--bg-card);
  padding: 0 8px;
  font-family: var(--serif);
  font-style: italic; font-feature-settings: "lnum";
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--terra);
}

/* testimonial */
.testimonial {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.testimonial .tphoto {
  width: 56px; height: 56px; border-radius: 50%;
  flex-shrink: 0;
  background: #d8cdb4;
}

/* guarantee block */
.guarantee {
  border: 2px solid var(--ink);
  padding: 32px 26px;
  text-align: center;
  background: var(--bg-card);
}
.guarantee .gnum {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 320;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 64px;
  line-height: 1;
  color: var(--terra);
}

/* — palette overrides driven by Tweaks — */
.palette-rust   { --terra:#C14E1E; --sienna:#9E5B3F; --bg:#ECE4D3; --bg-card:#F5EFE2; --bg-deep:#E2D8C2; --ink:#231D17; --ink-soft:#4A3F35; }
.palette-claret { --terra:#9E2B2E; --sienna:#7A4A3A; --bg:#F2EBDD; --bg-card:#F8F2E5; --bg-deep:#E6DDC9; --ink:#1F1A16; --ink-soft:#43372E; }
.palette-moss   { --terra:#7E5A2F; --sienna:#3F5547; --bg:#EEE7D5; --bg-card:#F6EFDC; --bg-deep:#DFD6BF; --ink:#1F2520; --ink-soft:#3E433C; }
.palette-ink    { --terra:#B85A2A; --sienna:#7A4A3A; --bg:#E8E1CE; --bg-card:#F0E9D6; --bg-deep:#DDD3BB; --ink:#1A1612; --ink-soft:#3D332A; }

/* — serif overrides — */
.font-fraunces  { --serif: 'Fraunces', Georgia, serif; }
.font-cormorant { --serif: 'Cormorant Garamond', 'Fraunces', Georgia, serif; }
.font-eb        { --serif: 'EB Garamond', 'Fraunces', Georgia, serif; }