/*
Theme Name: Midas Daily
Theme URI: https://midasdaily.com
Author: Graham Stuart
Description: Custom lightweight theme for Midas Daily, built to match the brand style guide exactly (projects/own-email-list/style-guide.md). No page-builder dependency.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: midas-daily
*/

/* ============================
   Self-hosted fonts (Lora + Inter, latin + latin-ext)
   Downloaded from Google Fonts and served from this domain so no
   visitor IP is handed to Google on page load -- see
   references/legal-and-compliance.md section 5. Also removes a
   render-blocking third-party connection.
   ============================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/lora-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/lora-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/lora-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/lora-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================
   Brand tokens (from style-guide.md)
   ============================ */
:root {
  /* Fixed brand tokens -- same value in light and dark (never flip) */
  --gold-deco: #C99A2E;    /* logo / decorative fills / large graphics ONLY -- fails AA as text on light bg */
  --gold-btn: #856219;     /* solid gold button fill -- fixed so white button text always has proven contrast */
  --green: #2F5D50;        /* primary CTA / success -- passes AAA against white/cream in both themes */
  --red: #A8412F;          /* error */
  --warning: #9C5314;
  --info: #456070;
  --cream-fixed: #FBF6EC;  /* text/icon color sitting on a fixed-color badge (gold-deco/green), never flips */
  --charcoal-fixed: #2B2723;

  --font-display: 'Lora', Georgia, serif;
  --font-body: 'Inter', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --radius: 10px;
  --container-width: 1080px;
  --container-narrow: 720px;

  /* Semantic tokens -- light theme (default) */
  --bg: #FBF6EC;
  --surface: #ffffff;
  --surface-alt: #F3ECDD;
  --surface-green: #ECF1ED;
  --text: #2B2723;
  --text-soft: #55504a;
  --gold-ui: #856219;      /* gold text/links/buttons ON the page background -- darker in light mode per style-guide.md */
  --hairline: #ded3bc;
  --header-bg: rgba(251, 246, 236, .9);
  --cta-bg: #2B2723;
  --cta-text: #FBF6EC;
  --cta-text-soft: #c9beac;
}

/* Dark theme -- explicit user choice always wins */
:root[data-theme="dark"] {
  --bg: #201C18;
  --surface: #2B2723;
  --surface-alt: #322D27;
  --surface-green: #243029;
  --text: #F7F1E6;
  --text-soft: #b3aa9d;
  --gold-ui: #C99A2E;      /* brighter signature gold for text on dark -- #856219 fails at 2.65:1 on charcoal, per style-guide.md */
  --hairline: #433C34;
  --header-bg: rgba(32, 28, 24, .9);
  --cta-bg: #16130F;
  --cta-text: #F7F1E6;
  --cta-text-soft: #b3aa9d;
}

/* System dark preference, only for visitors who haven't made an explicit choice yet */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #201C18;
    --surface: #2B2723;
    --surface-alt: #322D27;
    --surface-green: #243029;
    --text: #F7F1E6;
    --text-soft: #b3aa9d;
    --gold-ui: #C99A2E;
    --hairline: #433C34;
    --header-bg: rgba(32, 28, 24, .9);
    --cta-bg: #16130F;
    --cta-text: #F7F1E6;
    --cta-text-soft: #b3aa9d;
  }
}

/* ============================
   Reset / base
   ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  transition: background .25s ease, color .25s ease;
}
img { max-width: 100%; height: auto; display: block; }

/* Skip link (WCAG 2.4.1). Off-screen until focused, then pinned top-left --
   deliberately not display:none, which would hide it from screen readers too. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--green); color: #fff;
  padding: .75rem 1.15rem; border-radius: 0 0 var(--radius) 0;
  font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }
a { color: var(--gold-ui); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-ui);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .6rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4vw, 2.5rem); }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1.25rem; }
.lede { font-size: 1.125rem; color: var(--text-soft); }
.eyebrow {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-ui);
  font-weight: 600;
  margin: 0 0 .5rem;
}

/* ============================
   Layout
   ============================ */
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 3rem 0; }
.section-alt { background: var(--surface-alt); }
.section-green { background: var(--surface-green); }
.section-head { max-width: 52ch; margin-bottom: 2rem; }

/* ============================
   Site header / nav
   ============================ */
.site-header {
  border-bottom: 1px solid var(--hairline);
  padding: 1.15rem 0;
  position: sticky;
  top: 0;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  z-index: 10;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); }
.site-logo span { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }

.site-nav ul { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; align-items: center; }
.site-nav a { color: var(--text); text-decoration: none; font-weight: 500; font-size: .95rem; }
.site-nav a:hover { color: var(--gold-ui); }
.site-nav .btn { color: #fff; }

.theme-toggle {
  width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid var(--hairline); background: transparent; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--gold-ui); border-color: var(--gold-ui); }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .ic-moon { display: none; }
  :root:not([data-theme]) .theme-toggle .ic-sun { display: block; }
}

/* ============================
   Buttons
   ============================ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  padding: .8rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: #264c42; color: #fff; }
.btn-gold { background: var(--gold-btn); color: #fff; }
.btn-gold:hover { background: #6d4f14; color: #fff; }

/* ============================
   Hero (homepage)
   ============================ */
.hero { padding: 4rem 0 3rem; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.hero h1 { max-width: 14ch; }
.hero .lede { max-width: 44ch; margin-bottom: 1.6rem; }
.hero-cta { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.trust-line { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--text-soft); margin-top: 1.1rem; flex-wrap: wrap; }
.trust-line .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-soft); opacity: .5; }

.signup-proof {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.1rem;
  padding: .55rem .9rem; border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--surface); font-size: .85rem; color: var(--text-soft);
}
.signup-proof .icon { color: var(--gold-ui); flex: none; display: flex; }
.signup-proof strong { color: var(--text); font-variant-numeric: tabular-nums; }

.hero-art { position: relative; max-width: 460px; margin-left: auto; width: 100%; }
.hero-art .art-svg { width: 100%; height: auto; display: block; }
.hero-coin {
  position: absolute; top: 9%; right: 8%; width: 33%; aspect-ratio: 1;
  filter: drop-shadow(0 8px 16px rgba(43, 39, 35, .35));
}
.hero-coin img { width: 100%; height: 100%; object-fit: contain; }

/* ============================
   How it works (click-through steps carousel)
   ============================ */
.steps-tabs { display: flex; gap: 1rem; list-style: none; margin: 0 0 2rem; padding: 0; border-bottom: 1px solid var(--hairline); }
.step-tab {
  flex: 1 1 0; display: flex; flex-direction: column; gap: .5rem;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 0 0 1rem; color: var(--text-soft); font-family: var(--font-body);
  position: relative;
}
.step-tab .step-tab-num { font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .05em; color: var(--gold-ui); opacity: .7; transition: opacity .2s ease; }
.step-tab .step-tab-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text-soft); transition: color .2s ease; }
.step-tab[aria-selected="true"] .step-tab-num { opacity: 1; }
.step-tab[aria-selected="true"] .step-tab-title { color: var(--text); }
.step-tab-track { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; overflow: hidden; }
.step-tab-fill { display: block; height: 100%; width: 0%; background: var(--gold-ui); border-radius: 2px; }
.step-tab-fill.filling { width: 100%; transition: width linear; }
.step-tab:hover .step-tab-title { color: var(--gold-ui); }
.step-tab:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: 4px; }

.steps-panels { position: relative; min-height: 70px; } /* JS measures and overrides this to the tallest panel's real height */
.step-panel { display: none; gap: 1.25rem; align-items: flex-start; }
.step-panel[data-active="true"] { display: flex; animation: step-fade .35s ease; }
@media (prefers-reduced-motion: reduce) { .step-panel[data-active="true"] { animation: none; } }
@keyframes step-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.step-panel .badge {
  width: 60px; height: 60px; border-radius: 16px; background: var(--green); flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--cream-fixed);
  box-shadow: 0 8px 18px -10px rgba(47, 93, 80, .7);
}
.step-panel h3 { margin-bottom: .35rem; }
.step-panel p { color: var(--text-soft); font-size: 1rem; max-width: 48ch; margin: 0; }

.steps-controls { display: flex; justify-content: flex-end; margin-top: .5rem; }
.steps-pause {
  display: inline-flex; align-items: center; gap: .4rem; background: none; border: 1px solid var(--hairline);
  border-radius: 999px; padding: .4rem .8rem; font-size: .78rem; color: var(--text-soft); cursor: pointer;
  font-family: var(--font-body);
}
.steps-pause:hover { border-color: var(--gold-ui); color: var(--gold-ui); }

@media (max-width: 640px) {
  .steps-tabs { gap: .6rem; }
  .step-tab .step-tab-title { font-size: .92rem; }
  .step-panel { flex-direction: column; }
  .step-panel .badge { width: 52px; height: 52px; }
}

/* ============================
   Pillar cards
   ============================ */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.pillar-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  text-decoration: none;
  color: var(--text);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pillar-card:hover { border-color: var(--gold-ui); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .5); }
.pillar-card .p-icon {
  width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--gold-deco);
  display: flex; align-items: center; justify-content: center; color: var(--charcoal-fixed);
}
.pillar-card h3 { font-size: 1.08rem; margin-bottom: .2rem; }
.pillar-card p { font-size: .88rem; color: var(--text-soft); margin: 0; }
.pillar-card .arrow { margin-left: auto; color: var(--hairline); align-self: center; transition: color .15s ease, transform .15s ease; }
.pillar-card:hover .arrow { color: var(--gold-ui); transform: translateX(3px); }

/* ============================
   Why band
   ============================ */
.why { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; }
.why-lede { color: var(--text-soft); margin: 0; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.why-list li { display: flex; gap: .9rem; align-items: flex-start; }
.why-list .check {
  width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--green);
  color: var(--cream-fixed); display: flex; align-items: center; justify-content: center;
  margin-top: .15rem; box-shadow: 0 6px 14px -8px rgba(47, 93, 80, .75);
}
.why-list h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.why-list p { font-size: .9rem; color: var(--text-soft); margin: 0; }

/* ============================
   Article cards / grid
   ============================ */
.article-grid {
  display: grid;
  /* auto-fill, not auto-fit: auto-fit collapses the empty tracks, so a single
     article stretched its card to the full container width (a 1032px-wide
     thumbnail). auto-fill keeps the empty tracks, so cards stay card-sized
     however few posts a pillar/archive has. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.article-card { text-decoration: none; color: var(--text); }
.article-card .article-thumb {
  aspect-ratio: 16/10;
  background: var(--surface-alt);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: .75rem;
}
.article-card .article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-card .eyebrow { margin-bottom: .3rem; }
.article-card h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.article-card p { font-size: .88rem; color: var(--text-soft); margin: 0; }

/* Homepage "Latest articles" category tabs */
.recent-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.recent-tab {
  font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  padding: .5rem .95rem; border-radius: 999px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--hairline); color: var(--text-soft);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.recent-tab:hover { border-color: var(--gold-ui); color: var(--text); }
.recent-tab[aria-selected="true"] { background: var(--gold-ui); border-color: var(--gold-ui); color: #fff; }
.recent-tab:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.recent-panel[hidden] { display: none; }
.recent-more { margin-top: 1.25rem; }
.recent-more a { color: var(--gold-ui); font-weight: 600; font-size: .88rem; text-decoration: none; }
.recent-more a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .recent-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; }
  .recent-tab { white-space: nowrap; }
}

/* ============================
   Single article
   ============================ */
.article-body { max-width: var(--container-narrow); margin: 0 auto; }
.article-body h2 { margin-top: 2rem; }

/* Affiliate/material-connection disclosure at the top of every article.
   Has to be noticeable rather than tucked away -- FTC guidance treats a
   disclosure the reader can miss as no disclosure at all. Left gold rule +
   tinted panel so it reads as a notice without shouting. */
.affiliate-disclosure {
  background: var(--surface-alt);
  border-left: 3px solid var(--gold-ui);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .85rem 1.1rem;
  margin: 0 0 1.75rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.affiliate-disclosure strong { color: var(--text); }
.affiliate-disclosure a { color: var(--gold-ui); }

/* Editor-driven pages (About, Privacy Policy, Terms) via page.php. Headings
   carry no top margin globally, and lists are unstyled, so give both sensible
   rhythm here rather than relying on the editor to space things by hand. */
.page-content h2 { margin-top: 2.5rem; font-size: 1.6rem; }
.page-content h3 { margin-top: 1.75rem; font-size: 1.2rem; }
.page-content > *:first-child { margin-top: 0; }
.page-content ul, .page-content ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.page-content li { margin-bottom: .5rem; }
.page-content li::marker { color: var(--gold-ui); }
.page-content .btn { margin-top: .5rem; }
.article-meta { font-size: .85rem; color: var(--text-soft); margin-bottom: 1.5rem; }

/* ============================
   Quiz CTA banner (reused across templates)
   ============================ */
.quiz-cta-banner {
  background: var(--cta-bg);
  color: var(--cta-text);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  margin: 2.5rem 0;
  position: relative;
  overflow: hidden;
}
.quiz-cta-banner h2 { color: var(--cta-text); }
.quiz-cta-banner p { color: var(--cta-text-soft); }
.quiz-cta-banner::after {
  content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201, 154, 46, .28), transparent 70%);
}
.quiz-cta-banner > * { position: relative; z-index: 1; }

/* Secondary email-capture path inside the CTA banner. The banner is dark in
   both themes (--cta-bg), so these use fixed light-on-dark values rather than
   the page's semantic tokens, which would flip and break contrast here. */
.cta-divider {
  display: flex; align-items: center; gap: .9rem;
  max-width: 30rem; margin: 1.75rem auto 1.25rem;
  color: var(--cta-text-soft); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .09em;
}
.cta-divider::before, .cta-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(251, 246, 236, .18);
}
.inline-signup { max-width: 32rem; margin: 0 auto; }
.inline-signup-row { display: flex; gap: .5rem; }
.inline-signup input {
  font-family: var(--font-body); font-size: .95rem;
  padding: .7rem .85rem; border-radius: var(--radius);
  background: rgba(251, 246, 236, .07);
  border: 1px solid rgba(251, 246, 236, .22);
  color: var(--cta-text); min-width: 0;
}
.inline-signup input[name="first_name"] { flex: 0 1 10rem; }
.inline-signup input[name="email"] { flex: 1 1 12rem; }
.inline-signup input::placeholder { color: var(--cta-text-soft); opacity: .8; }
.inline-signup input:focus-visible {
  outline: 2px solid var(--gold-deco); outline-offset: 1px; border-color: transparent;
}
.inline-signup input[aria-invalid="true"] { border-color: #E0806E; }
.inline-signup button { flex: 0 0 auto; white-space: nowrap; }
.inline-signup button[disabled] { opacity: .65; cursor: default; }
.inline-signup-msg {
  margin: .7rem 0 0; font-size: .88rem; min-height: 1.2em; text-align: center;
}
.inline-signup-msg[data-state="error"] { color: #E0806E; }
.inline-signup-msg[data-state="success"] { color: var(--gold-deco); }
.inline-signup-fine {
  margin: .85rem 0 0; font-size: .78rem; color: var(--cta-text-soft); text-align: center;
}
@media (max-width: 560px) {
  .inline-signup-row { flex-wrap: wrap; }
  .inline-signup input[name="first_name"],
  .inline-signup input[name="email"] { flex: 1 1 100%; }
  .inline-signup button { width: 100%; }
}

/* ============================
   Footer
   ============================ */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 2.75rem 0 2rem;
  margin-top: 3rem;
  font-size: .9rem;
  color: var(--text-soft);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; }
.footer-brand .site-logo { margin-bottom: .7rem; }
.footer-brand p { max-width: 32ch; font-size: .9rem; margin: 0; }
.footer-col h4 {
  font-family: var(--font-body); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); margin: 0 0 .8rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-col a { color: var(--text-soft); text-decoration: none; }
.footer-col a:hover { color: var(--gold-ui); }
.footer-bottom { border-top: 1px solid var(--hairline); margin-top: 2.2rem; padding-top: 1.2rem; font-size: .8rem; }

/* ============================
   Standalone landing page (page-start.php) -- no header/footer nav
   ============================ */
.landing-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.landing-page .container-narrow { text-align: center; }

/* ============================
   404
   ============================ */
.error-404 { text-align: center; padding: 5rem 1.5rem; }

/* ============================
   Quiz (page-quiz.php) -- reuses global tokens above.
   Mirrors quiz/quiz-embed.html exactly; kept in sync manually since the
   embed version is also used for standalone preview/testing.
   ============================ */
#md-quiz {
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
}
#md-quiz .md-screen { display: none; }
#md-quiz .md-screen.active { display: block; animation: md-fade .25s ease; }
@keyframes md-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

#md-quiz .md-progress-track { height: 6px; background: var(--hairline); border-radius: 999px; overflow: hidden; margin-bottom: 1.5rem; }
#md-quiz .md-progress-fill { height: 100%; background: var(--gold-btn); border-radius: 999px; width: 0%; transition: width .3s ease; }
#md-quiz .md-progress-label { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ui); font-weight: 600; margin-bottom: .5rem; }

#md-quiz .md-options { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.25rem; }
#md-quiz .md-option {
  position: relative; text-align: left; background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: .9rem 2.5rem .9rem 1.1rem; font-family: var(--font-body); font-size: .95rem; color: var(--text); cursor: pointer;
  transition: border-color .15s ease, background .15s ease; width: 100%;
}
#md-quiz .md-option:hover { border-color: var(--gold-ui); background: var(--surface-alt); }
#md-quiz .md-option.selected { border-color: var(--gold-ui); background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--gold-ui); }
#md-quiz .md-option.selected::after {
  content: "✓"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%);
  color: var(--gold-ui); font-weight: 700;
}
#md-quiz .md-option-all { font-style: italic; color: var(--text-soft); }
#md-quiz .md-option-all.selected { color: var(--text); }
#md-quiz .md-next-btn { width: 100%; margin-top: .35rem; }
#md-quiz .md-next-btn:disabled { opacity: .45; cursor: not-allowed; }
#md-quiz .md-next-btn:disabled:hover { background: var(--green); }

#md-quiz .md-form-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
#md-quiz input[type="text"],
#md-quiz input[type="number"],
#md-quiz input[type="email"] {
  flex: 1 1 220px; font-family: var(--font-body); font-size: .95rem; padding: .8rem .9rem;
  border: 1px solid var(--hairline); border-radius: 6px; background: var(--bg); color: var(--text);
}
#md-quiz input.md-age-input { flex: 0 1 160px; }
#md-quiz .md-submit-full { width: 100%; margin-top: 1rem; }
#md-quiz .md-error { color: var(--red); font-size: .82rem; margin: .4rem 0 0; display: none; }
#md-quiz .md-error.show { display: block; }
#md-quiz .md-fine-print { font-size: .78rem; color: var(--text-soft); margin-top: .9rem; }

#md-quiz .md-result-eyebrow { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ui); font-weight: 600; margin-bottom: .5rem; }
#md-quiz .md-restart { background: none; border: none; color: var(--text-soft); text-decoration: underline; font-size: .82rem; cursor: pointer; padding: 0; margin-top: 1rem; }

/* ============================
   Responsive
   ============================ */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-art { order: -1; max-width: 380px; margin: 0 auto; }
  .why { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Narrow phones: the header nav (Articles / About / theme toggle / CTA) was
   tight enough that the CTA button wrapped its text onto two lines. Shrink
   the button and tighten gaps so everything fits on one line. */
@media (max-width: 480px) {
  .site-header .container { gap: .75rem; }
  .site-nav ul { gap: .7rem; }
  .site-nav .btn { padding: .6rem .95rem; font-size: .85rem; white-space: nowrap; }
  .hero-art { max-width: 220px; }
}