/* RhythmRx answer pages + pricing — "Breathing horizon" (design.md, 2026-09-28).
   Injected by functions/_middleware.ts AFTER each page's own <style>, so it wins at equal specificity.
   The pages are built on --bg/--ink/--amber/--soft/--line vars; redefining them re-themes all 19 at once. */
:root {
  --bg: #0E1024; --ink: #EEF1FB; --muted: #C9D3F5; --line: #3B2F6B; --soft: #171A3A;
  --amber: #F2A65A; --amber-dk: #F2A65A;
  --rrx-violet: #3B2F6B; --rrx-ember: #F2A65A; --rrx-sage: #8FD1B5;
}
body {
  background-color: #0E1024;
  background-image: radial-gradient(120% 50% at 50% 0%, rgba(59, 47, 107, 0.55) 0%, transparent 60%);
  background-attachment: fixed;
  color: #EEF1FB;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1, h2, h3, .brand {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100;
  font-weight: 500;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; }
.brand { color: #EEF1FB; letter-spacing: 0.01em; }
.brand span { color: inherit; }
p, li { color: rgba(238, 241, 251, 0.88); }
.lead, footer { color: #C9D3F5; }
a { color: #F2A65A; }
header { border-bottom-color: transparent; }
.btn { background: #F2A65A; color: #0E1024; border-radius: 999px; font-weight: 600; }
.btn:hover { background: #F2A65A; color: #0E1024; filter: brightness(1.08); }
.btn.ghost { background: transparent; border: 1px solid #3B2F6B; color: #EEF1FB; }
.btn.ghost:hover { border-color: #C9D3F5; }
.box, .cta { background: rgba(23, 26, 58, 0.8); border: 1px solid #3B2F6B; border-radius: 14px; }
table { border-color: #3B2F6B; }
th, td { border-color: #3B2F6B !important; }
th { background: #171A3A !important; color: #EEF1FB; }
code, kbd, .mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
:focus-visible { outline: 2px solid #F2A65A; outline-offset: 2px; }

/* the signature line (static twin of components/breath-horizon.tsx) */
.rrx-h { height: 40px; overflow: hidden; margin: -6px 0 4px; }
.rrx-h svg { width: 100%; height: 40px; display: block; animation: rrx-breathe 16s ease-in-out infinite; }
@keyframes rrx-breathe {
  0% { transform: translateY(10px); opacity: .55 } 25% { transform: translateY(-6px); opacity: 1 }
  50% { transform: translateY(-6px); opacity: 1 } 75% { transform: translateY(10px); opacity: .55 }
  100% { transform: translateY(10px); opacity: .55 }
}
@media (prefers-reduced-motion: reduce) { .rrx-h svg { animation: none; } }