/* Navigation added by the official homepage; the ritual styling stays in styles.css. */
.section-intro > div { min-width: 0; max-width: 790px; }
.section-intro h1 { font-family: Georgia, "Times New Roman", serif; }
.intro-copy { max-width: 72ch; }
.topbar .brand { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0; }
.ritual-state-slot { height: 360px; }
.result-inner h2 { font-size: 30px; line-height: 1.25; }
.result-inner > .result-question { flex: 1; min-height: 0; }
.ritual-status { padding-inline: 12px; line-height: 1.4; }
.site-footer { flex-wrap: wrap; }
.site-footer > p { flex: 1 1 230px; }
.footer-link { display: inline-flex; align-items: center; margin-left: 0; }
.seo-content-section { padding-block: 48px 56px; }
.seo-reading + .seo-reading { margin-top: 42px; padding-top: 36px; border-top: 1px solid var(--divider); }
.seo-reading h2 { max-width: 36ch; color: var(--ink-blue); font: 30px/1.3 Georgia, "Times New Roman", serif; text-wrap: balance; }
.seo-reading > p { max-width: 78ch; margin-top: 18px; color: var(--text-secondary); }
.seo-reading > .eyebrow { margin-top: 0; color: var(--vermilion); }
.ritual-steps { max-width: 78ch; padding-left: 26px; color: var(--text-secondary); }
.ritual-steps li { margin-top: 18px; padding-left: 6px; }
.ritual-steps strong { color: var(--text-primary); }
.seo-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.seo-outcome { padding: 24px; background: var(--surface); border: 1px solid var(--divider); border-top: 3px solid var(--outcome-color); border-radius: var(--radius-card); }
.seo-outcome.sacred { --outcome-color: var(--ink-blue); }
.seo-outcome.laughter { --outcome-color: var(--vermilion); }
.seo-outcome.negative { --outcome-color: var(--text-secondary); }
.seo-outcome .outcome-label { color: var(--outcome-color); font-size: 13px; }
.seo-outcome h3 { margin-top: 12px; font: 22px/1.4 Georgia, "Times New Roman", serif; }
.seo-outcome > p:last-child { margin-top: 14px; color: var(--text-secondary); font-size: 16px; }
.seo-reading .guide-pair { float: none; margin: 0 0 20px; }
.seo-cast-link { display: inline-block; min-height: var(--touch-target); padding-block: 12px; margin-top: 16px; color: var(--ink-blue); }
.seo-reading.faq-list { max-width: 80ch; }
.seo-reading.faq-list h2 { margin-bottom: 16px; }
.seo-reading.faq-list summary { font-size: 17px; }
.seo-reading.faq-list details p { font-size: 17px; }
/* Paper reading surfaces keep the existing palette in either system theme. */
@media (max-width: 900px) {
  .seo-outcomes { grid-template-columns: 1fr; }
  .seo-outcome { padding: 24px; }
}
@media (max-width: 640px) {
  .topbar-actions a.home-link { display: inline-flex; }
  .topbar-actions { gap: 10px; }
  .topbar .brand { font-size: 20px; letter-spacing: 1px; }
  .section-intro h1 { font-size: 29px; letter-spacing: -.5px; }
  .section-intro .eyebrow { font-size: 11px; letter-spacing: 1px; }
  .intro-copy { font-size: 16px; line-height: 1.6; }
  .ritual-state-slot { height: 320px; }
  .result-inner h2 { font-size: 28px; }
  .result-meaning { font-size: 15px; }
  .seo-content-section { padding-block: 32px 40px; }
  .seo-reading h2 { font-size: 27px; }
  .seo-reading + .seo-reading { margin-top: 30px; padding-top: 28px; }
  .seo-outcome { padding: 22px; }
}
@media (max-width: 360px) {
  .topbar-actions a[href="#knowledge"] { display: none; }
  .topbar .brand-icon { width: 28px; height: 28px; }
  .topbar .brand { gap: 6px; font-size: 18px; }
  .topbar-actions { gap: 8px; }
  .topbar-actions .quiet-button { font-size: 12px; }
}
.app-next-step { margin-top: 32px; padding: 28px; border: 1px solid var(--divider); border-radius: var(--radius-card); background: var(--surface); display: flex; align-items: center; gap: 32px; }
.app-next-step h2 { font: 26px/1.4 var(--font-ritual); margin-bottom: 12px; }
.app-next-step p { color: var(--text-secondary); font-size: 15px; }
.app-next-step .eyebrow { color: var(--vermilion); font-size: 12px; }
.app-next-step .bridge-note { font-size: 13px; margin-top: 12px; }
.app-download-link { color: var(--ink-blue); font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; flex-shrink: 0; max-width: 240px; }
@media (max-width: 760px) { .app-next-step { align-items: flex-start; flex-direction: column; gap: 20px; padding: 22px; } }