/* ==========================================================================
   The Menopause Sleep Method - Global Styles
   Mobile-first, warm wellness aesthetic
   Research-backed palette for women 45-60
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --plum: #4a3548;
  --sage: #7a9e8e;
  --sage-dark: #6a8e7e;
  --coral: #c4726c;
  --coral-dark: #b5635d;
  --gold: #c4a96a;
  --cream: #f3ede4;
  --bg: #faf8f5;
  --white: #ffffff;
  --text: #3d3835;
  --text-light: #6b6260;
  --border: #e0dbd5;
  --max-width: 680px;
  --max-width-article: 700px;
}

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  color-scheme: light only;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Force light mode regardless of system preference - skip when night mode is active */
@media (prefers-color-scheme: dark) {
  html:not(.night-mode), html:not(.night-mode) body {
    background-color: #faf8f5 !important;
    color: #3d3835 !important;
    color-scheme: light !important;
  }
  html:not(.night-mode) * {
    color-scheme: light !important;
  }
  /* Force white background on form fields only, not buttons. Buttons have their own colors
     via their specific classes (.btn, .rd-u1-btn-yes, .rd-u1-quick-btn, etc.), and forcing
     white was breaking every custom-colored button sitewide. */
  html:not(.night-mode) input,
  html:not(.night-mode) select,
  html:not(.night-mode) textarea {
    background-color: #ffffff !important;
    color: #3d3835 !important;
    border-color: #e0dbd5 !important;
  }
  /* Only force bare unclassed native buttons; classed buttons keep their own styles. */
  html:not(.night-mode) button:not([class]) {
    background-color: #ffffff !important;
    color: #3d3835 !important;
    border-color: #e0dbd5 !important;
  }
  html:not(.night-mode) .btn,
  html:not(.night-mode) .btn:hover {
    background-color: #c4726c !important;
    color: #ffffff !important;
  }
}

/* Layout */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

.container--article {
  max-width: var(--max-width-article);
}

/* Typography - serif headlines for editorial trust */
h1 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--plum);
  margin-bottom: 0.5rem;
}

h2 {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-light);
  margin-bottom: 1.5rem;
}

h3 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--plum);
  margin-bottom: 0.75rem;
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--sage-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Brand header */
.brand {
  text-align: center;
  padding: 24px 0 8px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--plum);
  letter-spacing: 0.5px;
}

/* Hero / Lead Section */
.hero {
  text-align: center;
  padding: 32px 0 16px;
}

.hero h1 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.hero h2 {
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}

.hero .subtext {
  font-size: 0.95rem;
  color: var(--text-light);
  margin-bottom: 2rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Email form */
.email-form {
  max-width: 400px;
  margin: 0 auto;
}

.email-form input[type="email"] {
  width: 100%;
  padding: 16px 18px;
  font-size: 1.05rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
  background: var(--white);
}

.email-form input[type="email"]:focus {
  border-color: var(--sage);
}

.btn {
  display: inline-block;
  width: 100%;
  padding: 16px 32px;
  min-height: 52px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  background: var(--coral);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
  text-align: center;
  line-height: 1.4;
}

.btn:hover {
  background: var(--coral-dark);
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--large {
  padding: 16px 32px;
  font-size: 1.15rem;
}

.btn--buy {
  max-width: 420px;
  margin: 0 auto;
  display: block;
}

.privacy-text {
  font-size: 0.82rem;
  color: var(--text-light);
  text-align: center;
  margin-top: 12px;
}

.social-proof-line {
  font-size: 0.88rem;
  color: var(--text-light);
  text-align: center;
  margin-top: 20px;
  font-style: italic;
}

/* Success message */
.form-success {
  display: none;
  text-align: center;
  padding: 24px;
  background: var(--cream);
  border-radius: 12px;
  margin-top: 16px;
}

.form-success h3 {
  color: var(--sage-dark);
  margin-bottom: 8px;
}

/* Sections */
.section {
  padding: 40px 0;
}

.section--cream {
  background: var(--cream);
}

.section--plum {
  background: var(--plum);
  color: var(--white);
}

.section--plum h3 {
  color: var(--white);
}

.section-title {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--plum);
  text-align: center;
  margin-bottom: 24px;
}

.section--plum .section-title {
  color: var(--white);
}

/* Bullet list */
.benefit-list {
  list-style: none;
  padding: 0;
}

.benefit-list li {
  padding: 10px 0 10px 32px;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.6;
}

.benefit-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--sage);
  font-weight: 700;
  font-size: 1.1rem;
}

/* Offer stack */
.offer-stack {
  list-style: none;
  padding: 0;
  margin-bottom: 24px;
}

.offer-stack li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
}

.offer-stack li:last-child {
  border-bottom: none;
}

.offer-stack .value {
  color: var(--text-light);
  font-size: 0.85rem;
  text-decoration: line-through;
}

.price-box {
  text-align: center;
  padding: 24px;
  margin: 24px 0;
}

.price-box .total-value {
  font-size: 1rem;
  color: var(--text-light);
  text-decoration: line-through;
  margin-bottom: 4px;
}

.price-box .your-price {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--plum);
}

/* Guarantee */
.guarantee-box {
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  margin: 32px 0;
}

.guarantee-box h3 {
  color: var(--plum);
  margin-bottom: 12px;
}

.guarantee-box p {
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 0;
}

/* Research stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.stat-card {
  text-align: center;
  padding: 24px 16px;
  background: var(--cream);
  border-radius: 12px;
}
.stat-number {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--plum);
  line-height: 1.1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
}
.stat-source {
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 8px;
  font-style: italic;
}
.researcher-quote {
  background: var(--plum);
  color: #fff;
  padding: 28px 24px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.researcher-quote p {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 12px;
}
.researcher-name {
  font-size: 0.82rem;
  opacity: 0.85;
}
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr; gap: 12px; }
  .stat-number { font-size: 1.8rem; }
}

/* Research citations */
.research-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-light);
}

.research-item:last-child {
  border-bottom: none;
}

/* Reviews */
.review-card {
  background: var(--cream);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}
.review-stars {
  color: #e8a84c;
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.review-body {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
  font-style: italic;
  margin-bottom: 12px;
}
.review-name {
  font-size: 0.82rem;
  color: var(--text-light);
  font-weight: 600;
}

/* FAQ */
.faq-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-q {
  font-weight: 600;
  color: var(--plum);
  margin-bottom: 8px;
  font-size: 1rem;
}

.faq-a {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.7;
}

/* VSL container */
.vsl-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: var(--plum);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.vsl-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255,255,255,0.6);
}

.vsl-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(196, 114, 108, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  cursor: pointer;
}

.vsl-play::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 20px solid var(--white);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}

.vsl-text {
  font-size: 0.88rem;
  color: var(--text-light);
  text-align: center;
  margin-bottom: 32px;
}

/* Trust badges */
.trust-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 16px 0;
  font-size: 0.85rem;
  color: var(--text-light);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Download cards */
.download-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.download-card .title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--plum);
}

.download-card .btn {
  width: auto;
  padding: 10px 20px;
  font-size: 0.85rem;
}

/* Article styles */
.article-header {
  padding: 20px 0 8px;
  font-size: 0.82rem;
  color: var(--text-light);
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}

.article-body {
  line-height: 1.8;
  font-size: 1.05rem;
}

.article-body h2 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--plum);
  margin-top: 32px;
  margin-bottom: 16px;
}

.article-body p {
  margin-bottom: 1.25rem;
}

.byline {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 24px;
}

.article-cta {
  background: var(--cream);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  margin: 32px 0;
}

.article-cta h3 {
  margin-bottom: 8px;
}

.article-cta .btn {
  width: auto;
  display: inline-block;
  margin-top: 12px;
}

/* Footer / Disclaimer */
.disclaimer {
  padding: 32px 0;
  font-size: 0.78rem;
  color: var(--text-light);
  text-align: center;
  line-height: 1.6;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}

/* Subtle variant for member pages -- legally present, visually quiet.
   Meets FTC/FDA "clear and conspicuous" by remaining visible and legible
   without visually dominating the screen on every page. */
.disclaimer--subtle {
  padding: 4px 0 16px;
  font-size: 0.62rem;
  line-height: 1.4;
  border-top: none;
  margin-top: 8px;
  opacity: 0.5;
  font-style: italic;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Blog / Personal Article Layout */
.container--blog {
  max-width: 680px;
}

.blog-home {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--plum);
  text-decoration: none;
  letter-spacing: 0.3px;
}

.blog-home:hover {
  text-decoration: none;
  opacity: 0.8;
}

.blog-category {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--coral-deep);
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 16px;
}

.author-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.author-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--plum);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.9rem;
  font-weight: 600;
  flex-shrink: 0;
}

.author-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.92rem;
}

.author-meta {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-top: 2px;
}

.blog-title {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--plum);
  margin-bottom: 24px;
}

.blog-body {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.12rem;
  line-height: 1.72;
  color: var(--text);
}

.blog-body p {
  margin-bottom: 1.4rem;
}

.blog-body h2 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--plum);
  margin-top: 40px;
  margin-bottom: 16px;
  line-height: 1.3;
}

.blog-body .lead {
  font-size: 1.2rem;
  color: var(--text-light);
  line-height: 1.65;
}

.cortisol-cascade {
  color: var(--coral-deep);
  font-weight: 600;
}

.blog-divider {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 40px 0;
}

.blog-cta-box {
  background: var(--cream);
  border-radius: 12px;
  padding: 32px 28px;
  text-align: center;
  margin: 40px 0;
}

.blog-cta-box p {
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 20px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 1.6;
}

.blog-cta-box .btn {
  width: auto;
  display: inline-block;
  max-width: 420px;
  margin-bottom: 16px;
}

.blog-cta-secondary {
  font-size: 0.9rem;
  color: var(--sage-dark);
  display: block;
  margin-top: 4px;
}

.blog-cta-secondary:hover {
  text-decoration: underline;
}

.blog-author-footer {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 28px 0;
}

.blog-author-footer .author-photo {
  width: 56px;
  height: 56px;
  font-size: 1rem;
}

.blog-author-footer .author-bio-name {
  font-weight: 700;
  color: var(--plum);
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.blog-author-footer .author-bio-text {
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
}

.share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}

.share-label {
  font-size: 0.82rem;
  color: var(--text-light);
  font-weight: 600;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--text-light);
  text-decoration: none;
  transition: background 0.2s;
}

.share-btn:hover {
  background: var(--border);
  text-decoration: none;
}

.share-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Sarah email footer - all pages */
.sarah-footer {
  text-align: center;
  padding: 24px 0;
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.6;
}

.sarah-footer a {
  color: var(--sage-dark);
  font-weight: 500;
}

@media (min-width: 640px) {
  .blog-title {
    font-size: 2.3rem;
  }
  .blog-body {
    font-size: 1.18rem;
  }
}

/* Responsive */
@media (min-width: 640px) {
  h1 {
    font-size: 2.25rem;
  }

  .hero h1 {
    font-size: 2.25rem;
  }

  .hero h2 {
    font-size: 1.25rem;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .section {
    padding: 56px 0;
  }

  .download-card {
    padding: 24px;
  }
}

/* Site footer (legal links) - small, unobtrusive */
.site-footer { border-top: 1px solid #e5e5e5; padding: 24px 16px; margin-top: 48px; background: #fafafa; overflow-x: hidden; }
.site-footer__inner { max-width: 960px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.site-footer__copy { font-size: 14px; color: #666; margin: 0; max-width: 100%; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 14px 16px; max-width: 100%; }
.site-footer__nav a { font-size: 14px; color: #444; text-decoration: none; white-space: nowrap; }
.site-footer__nav a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .site-footer__inner { flex-direction: column; text-align: center; }
  .site-footer__nav { justify-content: center; row-gap: 8px; }
}

/* Legal page layout - single column, readable */
.legal-page { padding: 24px 0 8px; }
.legal-page h1 { margin-bottom: 8px; }
.legal-page .legal-meta { font-size: 0.85rem; color: var(--text-light); margin-bottom: 8px; }
.legal-page .legal-note { font-size: 0.82rem; color: var(--text-light); font-style: italic; margin-bottom: 24px; padding: 10px 14px; background: var(--cream); border-radius: 8px; }
.legal-page h2 { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 1.2rem; font-weight: 700; color: var(--plum); margin-top: 28px; margin-bottom: 10px; }
.legal-page h3 { font-size: 1rem; margin-top: 18px; margin-bottom: 6px; }
.legal-page p, .legal-page li { font-size: 0.98rem; line-height: 1.7; }
.legal-page ul { padding-left: 22px; margin-bottom: 1rem; }

/* ===== REDESIGN V2 (scoped under body.rd) ===== */

/* --- Tokens: CSS custom properties scoped under body.rd ---
   NOTE: Tokens are scoped to body.rd (not :root) to prevent overriding
   existing --plum, --sage, --coral values used by the current site.
   When all pages are migrated to .rd in Phase 8, these move to :root. */
body.rd {
  /* Type */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs:   13px;
  --text-sm:   15px;
  --text-base: 18px;
  --text-md:   20px;
  --text-lg:   24px;
  --text-xl:   30px;
  --text-2xl:  38px;
  --text-3xl:  48px;
  --text-4xl:  60px;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  /* Colors */
  --ink:        #2a2128;
  --ink-soft:   #5c5058;
  --ink-faint:  #6b5f68; /* darkened from #8a7d85 to pass WCAG AA (4.5:1) on cream/bone backgrounds */
  --bone:       #fbf6ef;
  --paper:      #ffffff;
  --linen:      #f5ebe0;
  --rose:       #fce4e0;
  --rule:       #ebe1d4;

  --plum:       #4a2f5a;
  --plum-soft:  #7a5c8a;
  --clay:       #a54c44; /* accessible coral for white button text */
  --clay-deep:  #8f3832;
  --coral:      #a54c44; /* alias of --clay, used for button BACKGROUNDS (white text on top) */
  --coral-deep: #a54c44; /* darkened so it passes WCAG AA for TEXT on cream/bone backgrounds (~5.2:1) */
  --sage:       #8ab09c;
  --sage-deep:  #6f9684;
  --ochre:      #d4a958;
  --moon:       #c4b8d4;

  --night:      #1a1424;
  --night-ink:  #ede5f0;

  /* Spacing (4px rhythm) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Radii */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* Touch */
  --tap-min: 56px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(31,26,32,0.04), 0 2px 6px rgba(31,26,32,0.04);
  --shadow-md: 0 2px 8px rgba(31,26,32,0.06), 0 8px 24px rgba(31,26,32,0.06);
  --shadow-lg: 0 4px 16px rgba(31,26,32,0.08), 0 16px 48px rgba(31,26,32,0.08);
}

/* --- Night-mode token overrides for body.rd ---
   Without these, every redesigned card keeps rendering with the light-mode
   token values (--paper: #ffffff, --ink: #2a2128, etc) even after night-mode
   activates, creating blinding white cards on a dark page. We override the
   full token set so every component inherits the dark palette in one shot
   instead of hand-patching each card / chip / button. WCAG AA contrast
   preserved for body text (e8dfd4 on 1a1520 = 14.3:1) and faint text
   (a09590 on 241d2b = 4.7:1). */
html.night-mode body.rd {
  /* Surfaces - elevated shades over the #1a1520 page bg */
  --bone:       #1a1520;   /* page background */
  --paper:      #241d2b;   /* card surface (used by .card, .rd-tab-bar, etc.) */
  --linen:      #2a2232;   /* tinted panel */
  --rose:       #3a2a3a;   /* rose-wash panel - darker dusty rose on night */
  --rule:       rgba(232, 223, 212, 0.14);

  /* Text - inverted hierarchy */
  --ink:        #e8dfd4;
  --ink-soft:   #c4b8b8;
  --ink-faint:  #a09590;   /* passes AA on #241d2b at 4.7:1 */

  /* Accents - keep plum DARK because it's used as a BACKGROUND for buttons
     and hero cards with white text on top. If we lighten it like the old
     legacy block did, those buttons become light-pink with white text
     (unreadable). We instead restyle serif headlines separately below. */
  /* --plum stays #4a2f5a (inherited from body.rd base) */
  --plum-soft:  #9a7cad;
  --coral-deep: #e4a39c;   /* coral TEXT color on dark cards - lighter for contrast */
  --sage:       #8aae9e;
  --sage-deep:  #a3c4b3;
  --ochre:      #e4bf7a;
  --moon:       #c4b8d4;
  /* --clay / --coral stay the same (#a54c44) since they're button BACKGROUNDS
     with white text on top, which works on both light and dark pages */

  /* Shadows don't read on dark bg - use lighter, wider shadows instead */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.2);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.25);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.4), 0 16px 48px rgba(0,0,0,0.3);
}

/* Body bg explicit (overrides the @media prefers-color-scheme block that
   forces --bone on redesign pages). */
html.night-mode body.rd {
  background-color: var(--bone) !important;
  color: var(--ink);
}

/* Form fields in night mode need a dark bg so they're visible on the dark page
   (the @media prefers-color-scheme block at line 60+ forces white which clashes) */
html.night-mode body.rd input,
html.night-mode body.rd select,
html.night-mode body.rd textarea {
  background-color: #2a2232 !important;
  color: var(--ink) !important;
  border-color: var(--rule) !important;
}
html.night-mode body.rd input::placeholder,
html.night-mode body.rd textarea::placeholder {
  color: var(--ink-faint) !important;
}

/* Serif headlines (h1-h4) use color: var(--plum) throughout the redesign.
   We kept --plum dark because it's also used as a BUTTON BG. So headlines
   on dark pages need their color overridden separately to pale plum for
   readability (passes AA on #1a1520 at 10.6:1). */
html.night-mode body.rd h1,
html.night-mode body.rd h2,
html.night-mode body.rd h3,
html.night-mode body.rd h4,
html.night-mode body.rd .serif,
html.night-mode body.rd [class*="-heading"],
html.night-mode body.rd [class*="__headline"] {
  color: #e8dfd4;
}
/* Eyebrows / ochre accents are too dark on bone in night mode */
html.night-mode body.rd .eyebrow,
html.night-mode body.rd [class*="__eyebrow"],
html.night-mode body.rd [class*="-eyebrow"] {
  color: #e4bf7a;
}
/* Coral-branded text (chips, links, small accents) needs the lighter coral */
html.night-mode body.rd a:not(.btn):not([class*="btn"]):not(.rd-tab-bar a) {
  color: #e4a39c;
}
/* Disclaimer footers need muted color but still readable on dark */
html.night-mode body.rd .rd-disclaimer,
html.night-mode body.rd .disclaimer {
  color: var(--ink-faint);
}

/* Targeted night-mode readability fixes for member pages whose local CSS uses
   plum as text, while global night mode keeps plum dark for button backgrounds. */
html.night-mode body.rd .rd-welcome-brand {
  color: #e8dfd4;
  opacity: 0.82;
}
html.night-mode body.rd .rd-howto__step-head,
html.night-mode body.rd .rd-howto__title,
html.night-mode body.rd .rd-module-title {
  color: #e8dfd4;
}
html.night-mode body.rd .rd-howto__link {
  color: #e4a39c;
  border-bottom-color: rgba(228, 163, 156, 0.45);
}

/* =========================================================================
   NIGHT-MODE CONTRAST SAFETY NET

   Many pages were authored with inline styles like style="color: var(--plum)"
   or a hardcoded plum hex. Inline styles beat our cascade overrides, so
   in night mode those elements render dark-plum-on-dark-bg = invisible.
   The attribute-selector rules below catch those literal substrings in
   inline style attributes and force a readable coral-tinted color in
   night mode. Covers links, buttons, spans, divs, anything with that
   inline pattern. Light mode is unchanged.

   Also paints inline background references to --linen / --paper to
   sensible night-mode equivalents for the same reason.
   ========================================================================= */

/* Any element with inline color pointing at plum */
html.night-mode body.rd [style*="color:var(--plum)"],
html.night-mode body.rd [style*="color: var(--plum)"],
html.night-mode body.rd [style*="color:#4a2f5a"],
html.night-mode body.rd [style*="color: #4a2f5a"],
html.night-mode body.rd [style*="color:#4a3548"],
html.night-mode body.rd [style*="color: #4a3548"] {
  color: #e4a39c !important;
}

/* Inline border-bottom or text-decoration-color pointing at plum
   (used as underline color on the support@ email link) */
html.night-mode body.rd [style*="border-bottom: 1px solid rgba(74,47,90"],
html.night-mode body.rd [style*="border-bottom:1px solid rgba(74,47,90"] {
  border-bottom-color: rgba(228, 163, 156, 0.4) !important;
}

/* Common 'color: var(--text-light)' pattern (--text-light isn't a real
   token, was probably legacy; falls back to browser default grey which
   on dark = muddy). Force it to ink-soft. */
html.night-mode body.rd [style*="color:var(--text-light)"],
html.night-mode body.rd [style*="color: var(--text-light)"] {
  color: var(--ink-soft) !important;
}

/* Inline bg pointing at linen/paper stays visible by mapping to the
   night-mode surface tokens so cards and panels don't render as bright
   cream islands. */
html.night-mode body.rd [style*="background:var(--linen)"],
html.night-mode body.rd [style*="background: var(--linen)"],
html.night-mode body.rd [style*="background:var(--paper)"],
html.night-mode body.rd [style*="background: var(--paper)"] {
  background: var(--paper) !important;
}

/* =========================================================================
   TAB BAR + CHIP CONTRAST (global override for per-page inline duplicates)

   The .rd-tab-bar rule is redefined in 7 member pages. Per-page blocks
   colored labels at var(--ink-faint) fallback #9b87a2 which on white is
   ratio 2.3 (fails WCAG AA at 4.5). The active-tab color-coral-deep is
   also low-contrast (#e4a39c on white = 2.1).

   Higher-specificity selector (html body.rd) forces readable colors in
   both modes without editing all 7 files. Light: near-ink label, plum
   active. Night: light mauve label, coral-deep active (still readable
   on the dark paper #241d2b at 5.4:1).

   .chip--sage was sage-on-sage-tint = 2.56. Shifted the bg tint darker
   and the text to a darker sage so the chip passes AA.
   ========================================================================= */
html body.rd .rd-tab-bar a {
  color: #3d3835;          /* ~14:1 on white, ~12:1 on bone */
  font-weight: 600;
}
html body.rd .rd-tab-bar a.active {
  color: #4a2f5a;          /* plum, ~9:1 on white */
  font-weight: 700;
}
html.night-mode body.rd .rd-tab-bar a {
  color: #c4b8b8;          /* ~7:1 on #241d2b */
}
html.night-mode body.rd .rd-tab-bar a.active {
  color: #e4a39c;          /* coral-deep, ~5.4:1 on #241d2b */
}

/* Sage chip: bumped text to a darker sage and shifted bg slightly
   cooler so the ratio reaches AA. */
body.rd .chip--sage {
  background: rgba(138, 176, 156, 0.22);
  color: #3d6854;          /* ~5.1:1 on the tinted bg */
}
html.night-mode body.rd .chip--sage {
  background: rgba(138, 176, 156, 0.18);
  color: #a3c4b3;
}

/* Eyebrow accents (small all-caps labels like 'CORE', 'WELCOME',
   'TONIGHT'S RITUAL') were --ochre #d4a958 on cream #fbf6ef =
   2.2:1 ratio, failing AA. Darken to #8e6b18 in light mode only --
   still a warm ochre, now ~6.2:1 on cream. Night mode keeps the
   bright ochre (already passes on dark). */
body.rd .eyebrow,
body.rd [class*="__eyebrow"],
body.rd [class*="-eyebrow"] {
  color: #8e6b18;
}
html.night-mode body.rd .eyebrow,
html.night-mode body.rd [class*="__eyebrow"],
html.night-mode body.rd [class*="-eyebrow"] {
  color: #e4bf7a;
}

/* --- Body base styles ---
   !important needed to override the dark-mode @media rule at line 47
   which uses !important to force light mode colors. We want our warm bone
   background on redesigned pages. 18px body is the research floor for
   women 45-60 readability (SKILL_menopause_sleep_marketing.md line 286). */
body.rd,
html body.rd {
  font-family: var(--font-sans) !important;
  color: var(--ink) !important;
  background: var(--bone) !important;
  background-color: var(--bone) !important;
  font-size: var(--text-base) !important;
  line-height: var(--lh-body) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Headings --- */
body.rd h1,
body.rd h2,
body.rd h3,
body.rd h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--plum);
  line-height: var(--lh-tight);
  margin: 0;
}

/* --- Universal resets --- */
body.rd * { box-sizing: border-box; }
body.rd a { color: inherit; text-decoration: none; }
body.rd img,
body.rd svg { display: block; max-width: 100%; }

/* --- Button component --- */
body.rd .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap-min);
  padding: 0 28px;
  background: var(--clay);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-base);
  border-radius: var(--r-full);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: transform .08s ease, background .15s ease;
}
body.rd .btn:hover { background: var(--clay-deep); }
body.rd .btn:active { transform: scale(0.98); }
body.rd .btn--block { width: 100%; }
body.rd .btn--ghost {
  background: transparent;
  color: var(--plum);
  border: 1.5px solid var(--plum);
}
body.rd .btn--ghost:hover { background: var(--plum); color: #fff; }
body.rd .btn--dark { background: var(--plum); }
body.rd .btn--dark:hover { background: #2a1429; }

/* --- Chip component --- */
body.rd .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--linen);
  color: var(--plum);
  border-radius: var(--r-full);
}
body.rd .chip--clay { background: var(--rose); color: var(--coral-deep); }
body.rd .chip--sage { background: rgba(138,176,156,0.25); color: var(--sage-deep); }
body.rd .chip .chip-text { white-space: nowrap; } /* prevents phase chip from breaking at word boundaries on narrow mobile */

/* --- Card component --- */
body.rd .card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px;
}

/* --- Eyebrow component --- */
body.rd .eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ochre);
}

/* --- Lede component --- */
body.rd .lede {
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

/* --- Field component --- */
body.rd .field {
  width: 100%;
  min-height: var(--tap-min);
  padding: 14px 18px;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-md);
  font: inherit;
  color: var(--ink);
}
body.rd .field:focus {
  outline: 2px solid var(--plum);
  outline-offset: 1px;
  border-color: var(--plum);
}

/* --- Container components --- */
body.rd .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
body.rd .container--narrow { max-width: 720px; }
body.rd .container--wide { max-width: 1200px; }

/* --- Botanical helper --- */
body.rd .botanical {
  position: absolute;
  pointer-events: none;
  opacity: 0.24;
}

/* prefers-reduced-motion: disable transitions for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  body.rd .btn { transition: none; }
}

/* --- Protect redesigned pages from the global dark-mode light-forcing override ---
   The @media (prefers-color-scheme: dark) block near the top of this stylesheet
   forces all inputs/buttons/btns to white bg + dark text with !important. That
   breaks the redesign for any visitor whose OS is in dark mode. For body.rd
   pages, the new design tokens must win. */
@media (prefers-color-scheme: dark) {
  html:not(.night-mode) body.rd,
  html:not(.night-mode) body.rd input,
  html:not(.night-mode) body.rd select,
  html:not(.night-mode) body.rd textarea {
    background-color: var(--paper) !important;
    color: var(--ink) !important;
    border-color: var(--rule) !important;
  }
  html:not(.night-mode) body.rd {
    background-color: var(--bone) !important;
  }
  html:not(.night-mode) body.rd.night {
    background-color: var(--night) !important;
    color: var(--night-ink) !important;
  }
  html:not(.night-mode) body.rd .btn {
    background-color: var(--clay) !important;
    color: #ffffff !important;
    border-color: transparent !important;
  }
  html:not(.night-mode) body.rd .btn:hover {
    background-color: var(--clay-deep) !important;
  }
  html:not(.night-mode) body.rd .btn--ghost {
    background-color: transparent !important;
    color: var(--plum) !important;
    border-color: var(--plum) !important;
  }
  html:not(.night-mode) body.rd .btn--ghost:hover {
    background-color: var(--plum) !important;
    color: #ffffff !important;
  }
  html:not(.night-mode) body.rd .btn--dark {
    background-color: var(--plum) !important;
    color: #ffffff !important;
  }
  /* 3am rescue dark-mode buttons: coral 25% alpha per HANDOFF */
  html:not(.night-mode) body.rd.night .btn-rescue-primary {
    background-color: rgba(212, 115, 106, 0.25) !important;
    color: #ffffff !important;
    border-color: rgba(212, 115, 106, 0.5) !important;
  }
  html:not(.night-mode) body.rd.night .btn-rescue-primary:hover {
    background-color: rgba(212, 115, 106, 0.38) !important;
    border-color: rgba(212, 115, 106, 0.75) !important;
  }
  html:not(.night-mode) body.rd.night .btn-rescue-secondary {
    background-color: transparent !important;
    color: rgba(237, 229, 240, 0.65) !important;
    border-color: rgba(237, 229, 240, 0.18) !important;
  }
  html:not(.night-mode) body.rd.night .btn-rescue-secondary:hover {
    border-color: rgba(237, 229, 240, 0.4) !important;
    color: rgba(237, 229, 240, 0.9) !important;
  }
  /* 3am rescue page body + neutral cards should stay dark */
  html:not(.night-mode) body.rd.night input,
  html:not(.night-mode) body.rd.night select,
  html:not(.night-mode) body.rd.night textarea {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--night-ink) !important;
    border-color: rgba(237, 229, 240, 0.18) !important;
  }
}
/* ===== END REDESIGN V2 ===== */
.legal-page li { margin-bottom: 6px; }