/* MSRX AI Calculator — site styles.
   Mirrors the app: one recessed plane (the tape), everything else raised or flat,
   and brand colour only where it is load-bearing. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --canvas: #ffffff; --well: #edeff4; --surface: #ffffff; --sunken: #f2f4f8;
  --rule: #d8dde7; --hairline: #e2e6ee;
  --ink: #0a1220; --ink2: #4a5768; --ink3: #8590a0;
  --accent: #4a1fc4;
  --brand-deep: linear-gradient(135deg, #0077a6 0%, #5326c9 100%);
  --brand-bright: linear-gradient(90deg, #00b4e6 0%, #6b36f5 100%);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0a0d13; --well: #04060a; --surface: #141922; --sunken: #0e121a;
    --rule: #1b2330; --hairline: #242c39;
    --ink: #f0f4fa; --ink2: #a2aebf; --ink3: #6c7889; --accent: #b49bff;
  }
}
html { scroll-behavior: smooth; }
body {
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
nav { border-bottom: 1px solid var(--hairline); position: sticky; top: 0; background: color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter: blur(20px); z-index: 10; }
.nav-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 14px; }
.mark { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--hairline); }
.wordmark { font-weight: 800; letter-spacing: 0.14em; font-size: 14px; }
.wordmark span { font-weight: 600; color: var(--ink3); letter-spacing: 0.12em; margin-left: 6px; }
.nav-links { margin-left: auto; display: flex; gap: 20px; font-size: 14px; }
.nav-links a { color: var(--ink2); text-decoration: none; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
header { padding: 64px 0 40px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3); margin-bottom: 14px; }
h1 { font-size: clamp(30px, 5.5vw, 44px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 14px; }
.lede { font-size: 19px; color: var(--ink2); }
/* The tape — the app's signature, restated on the page. */
.tape { background: var(--well); border: 1px solid var(--rule); border-radius: 22px; padding: 18px 20px 20px; margin: 34px 0; }
.tape .line { display: flex; justify-content: space-between; gap: 16px; font: 400 13px/1.9 var(--mono); color: var(--ink3); }
.tape .line:nth-child(1) { opacity: 0.34; } .tape .line:nth-child(2) { opacity: 0.6; }
.tape hr { border: 0; border-top: 1px solid var(--rule); margin: 10px 0 8px; }
.tape .live { font: 400 13px/1.6 var(--mono); color: var(--ink2); }
.tape .out { text-align: right; font-size: 46px; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.btn { display: inline-block; padding: 13px 24px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; }
.btn-p { background: var(--brand-deep); color: #fff; }
.btn-s { background: var(--sunken); color: var(--ink); border: 1px solid var(--hairline); }
.btn:hover { opacity: 0.9; }
section { padding: 40px 0; border-top: 1px solid var(--hairline); }
h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 18px; }
h3 { font-size: 17px; font-weight: 600; margin: 26px 0 6px; }
p { color: var(--ink2); margin-bottom: 14px; }
p strong, li strong { color: var(--ink); font-weight: 600; }
ul { color: var(--ink2); padding-left: 20px; margin-bottom: 14px; }
li { margin-bottom: 7px; }
a { color: var(--accent); }
code { font: 400 0.92em var(--mono); background: var(--sunken); border: 1px solid var(--hairline); border-radius: 5px; padding: 1px 6px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 20px; }
.card h3 { margin-top: 0; }
.card p { margin-bottom: 0; font-size: 15px; }
.rule { height: 2px; width: 56px; background: var(--brand-bright); border-radius: 2px; margin-bottom: 22px; }
footer { border-top: 1px solid var(--hairline); padding: 30px 0 60px; font-size: 14px; color: var(--ink3); }
footer a { color: var(--ink2); text-decoration: none; margin-right: 18px; }
footer a:hover { color: var(--ink); }
.updated { font-size: 14px; color: var(--ink3); margin-bottom: 26px; }