/* Alternating navy and off-white surfaces. The manual artwork keeps its colors. */
:root {
  --paper: #f8f8f4;
  --ink: #1d3268;
  --body: #536078;
  --line: #d5dce7;
  --white: #f8f8f4;
  --coral: #547bb4;
  --mint: #dce8fa;
  --sky: #e7eef8;
  --yellow: #dce8fa;
}
.header { background: rgba(248, 248, 244, .97); border-color: var(--line); }
.nav nav a:hover { color: #416ba7; }
.facts-bar, .footer { background: var(--paper); border-color: var(--line); }
.facts > div { border-color: var(--line); }
.facts span, .hero-note, .footer-bottom p { color: var(--body); }
.hero-note > span:first-child { color: var(--ink); }
.note-separator { color: #536078; }
.orbit-one { background: #e5ecf6; }
.orbit-two { background: #d4e1f3; opacity: .8; }
.floating-note { background: var(--paper); border-color: #cbd6e6; }
.note-symbol, .check-icon { background: #dce7f8; color: var(--ink); }
.button-navy, .button-coral { background: var(--ink); color: var(--paper); }
.button-navy:hover, .button-coral:hover { background: #2c4b89; }
.page-preview > span { color: var(--paper); }
.text-link { border-color: #a2b0c5; }
.contents summary:hover h3 { color: #416ba7; }
.inside-preview { background: #e6ecf5; }
.preview-label > span:last-child, .page-range { color: #526580; }
.progress-note { border-color: #6b8cbd; }
.checkpoint-dot { border-color: #6b8cbd; }
.checkpoints article:first-child .checkpoint-dot { border-color: var(--ink); }
.checkpoints::before { background: #b9c9e0; }
.fit-list li > span { background: #e0e9f6; color: var(--ink); }

.section-blue {
  --body: #d5e0f2;
  background: var(--ink);
  color: var(--paper);
  border-color: #385381;
}
.section-blue .eyebrow { color: #d5e0f2; }
.section-blue h2 { color: var(--paper); }
.section-blue .section-cta { border-color: #526c97; }
.section-blue .section-cta > p strong { color: var(--paper); }
.section-blue .button-navy, .section-blue .button-coral { background: var(--paper); color: var(--ink); }
.section-blue .button-navy:hover, .section-blue .button-coral:hover { background: #dce7f8; }
.section-blue :is(button, a, summary):focus-visible { outline-color: #b6d1ff; }
.method-letter { color: var(--ink); }
.letter-r { background: #f8f8f4; }
.letter-o { background: #e0eafb; }
.letter-t { background: #c6d8f2; }
.letter-a { background: #abc4e9; }
.method-letter > span { background: var(--ink); color: var(--paper); border-color: #809bc4; }
.evidence { border-color: #526c97; }
.evidence > span { color: #c5d6ed; }
.tabs { border-color: #829bc1; }
.tabs button { color: var(--paper); }
.tabs button[aria-selected=true] { background: var(--paper); color: var(--ink); }
.routine-intro > p:not(.eyebrow), .routine-intro .inline-cta > p { color: #d5e0f2; }

/* Light cards provide a clear reading surface inside blue sections. */
.routine-card, .prompt-card, .offer-card {
  --body: #536078;
  background: var(--paper);
  color: var(--ink);
  border-color: #d5dce7;
}
.routine-card { box-shadow: 0 15px 40px #10234e55; }
#routine-steps li { border-color: var(--line); }
.time-bar span:nth-child(1) { background: #b5cbea; }
.time-bar span:nth-child(2) { background: #8cadd9; }
.time-bar span:nth-child(3) { background: #5c82b9; }
.time-bar span:nth-child(4) { background: var(--ink); }
.routine-source { color: #536078; }
.prompt-card { box-shadow: 8px 8px 0 #122856; }
.prompt-title { border-color: var(--line); }
.prompt-title .dot { background: #547bb4; }
.prompt-title button { color: var(--ink); border-color: #9cacc4; }
.prompt-title button:hover { background: #e2eaf5; }
.prompt-caption { color: #536078; border-color: var(--line); }
mark { background: #dce7f8; color: var(--ink); }
.offer-card { box-shadow: 0 12px 30px #10234e3d; }
.section-blue .offer-card .eyebrow { color: var(--ink); }
.section-blue .offer-card .button { background: var(--ink); color: var(--paper); }
.section-blue .offer-card .button:hover { background: #2c4b89; }
.offer-card li::before { color: #416ba7; }
.price-detail, .availability, .offer-detail { color: #536078; }
.offer-detail { border-color: var(--line); }
.dialog-route { background: #dce7f8; color: var(--ink); }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline-color: #416ba7; }
.section-blue :is(.routine-card, .prompt-card, .offer-card) :is(button, a, summary):focus-visible { outline-color: #416ba7; }

@media (max-width: 760px) {
  .facts > div:nth-child(-n+2), .facts > div:nth-child(3) { border-color: var(--line); }
}