@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

/* ============================================================
   PREMIUM THEME (funnel pages, NOT the portal)
   Aligns the marketing/checkout pages with the app's editorial
   aesthetic: warm cream, Fraunces serif display, deep forest
   green, terracotta actions. Link AFTER style.css so it wins.
   Deliberately not linked on portal.html (separate product).
   ============================================================ */
:root {
  --bg-color: #F6F1E7;
  --card-bg: #FFFDF8;
  --text-primary: #22302B;
  --text-secondary: #5C6862;
  --accent-teal: #1D4A40;
  --accent-teal-hover: #163A32;
  --accent-gold: #C05A2E;        /* terracotta: primary action */
  --accent-gold-hover: #A34A24;
  --border-color: #E7DFCE;
  --shadow-sm: 0 1px 2px rgba(34, 48, 43, 0.05);
  --shadow-md: 0 6px 18px -6px rgba(34, 48, 43, 0.10);
  --shadow-lg: 0 18px 40px -12px rgba(34, 48, 43, 0.14);
}
body {
  background:
    radial-gradient(1100px 480px at 50% -120px, rgba(29, 74, 64, 0.06), transparent 60%),
    var(--bg-color);
}
::selection { background: rgba(192, 90, 46, 0.22); }

/* Editorial type: serif display, calmer weights, roomier body */
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.012em;
}
h1 { font-size: 2.9rem; line-height: 1.12; }
h2 { font-size: 2rem; border-bottom: none; padding-bottom: 0; }
h3 { font-size: 1.35rem; }
p { line-height: 1.7; }
.pre-headline {
  color: #8A8073;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.hero { padding-top: 56px; }
.hero p.subheadline { font-size: 1.18rem; }

/* Pill buttons, terracotta like the app's primary actions */
.btn {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 16px 34px;
  box-shadow: 0 12px 26px -12px rgba(192, 90, 46, 0.55);
}

/* Softer, warmer cards with generous radius */
.card {
  border-radius: 20px;
  padding: 40px;
}
.section-graphic { border-radius: 14px; }

/* Pricing */
.pricing-tier-card { border-radius: 18px; }
.pricing-tier-card.featured { background-color: #FFFDF6; }
.tier-name { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: 0.01em; }
.tier-price { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 2.3rem; }
.price-week-badge { background: rgba(29, 74, 64, 0.08); }

/* Dark statement card matches the app's deep-green focus card */
.exclusion-card { background-color: #16352A; border-color: #16352A; }

/* Warm the before/after contrast cards */
.contrast-card.before { background-color: #F8F1E9; border-left-color: #B9573F; }
.contrast-card.before h4 { color: #A34733; }
.contrast-card.after { background-color: #EFF3EA; }
.result-subtitle { color: #B4622F; }

/* Result card (quiz + inline sales) */
.result-card { border-radius: 20px; }
.badge { background-color: rgba(29, 74, 64, 0.1) !important; }

/* De-infomercialize the urgency banner and order bump */
#urgency-banner {
  background-color: #F2ECDD;
  border-bottom: 1px solid var(--border-color);
  color: #7A5C2E;
  box-shadow: none;
}
#urgency-banner .timer-pill { background: rgba(122, 92, 46, 0.1); color: #7A5C2E; }
.order-bump-card { background-color: #F7EFDD; border-color: var(--accent-gold); }
.bump-header label { color: #7A4A26; }
.bump-text { color: #6B5638; }

/* Discount band polish */
#discount-optin { border-top-width: 4px; }
#discount-form input {
  border-radius: 999px !important;
  background: #FFFFFF;
  padding-left: 20px !important;
}

/* Thought Partner bubble: terracotta FAB like the app's chat button */
#tp-bubble-btn { background: var(--accent-gold) !important; }

/* Guarantee box: warm it up and put the shield in terracotta */
.guarantee-box { background-color: #FBF7EE; border-radius: 16px; }
.guarantee-icon { color: var(--accent-gold); }

@media (max-width: 820px) {
  h1 { font-size: 2.15rem; }
  h2 { font-size: 1.55rem; }
  .card { padding: 26px 20px; }
}