/* ============================================================
   AiHealth.clinic — Visual Soul of Health
   Design system: warm editorial clinical-instrument
   ============================================================ */

:root {
  /* Paper + ink */
  --bg:        #f2efea;
  --paper:     #faf9f6;
  --paper-2:   #ffffff;
  --ink:       #0d0d0c;
  --ink-soft:  #44423d;
  --ink-faint: #8b877e;
  --line:      #ddd8cf;
  --line-soft: #e8e4db;

  /* Signal — the soul (teal metabolic line) */
  --teal:       #0e8a7d;
  --teal-deep:  #0a5c54;
  --teal-light: #2fb8a8;
  --teal-glow:  rgba(47,184,168,0.18);

  /* Clinical status */
  --good: #2d6a4f;
  --warn: #b07a16;
  --bad:  #9a2a2a;
  --low:  #2f6fb8;

  /* Type */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --max: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 3px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
section { position: relative; }
.divider { border-top: 1px solid var(--line); }

/* ---------- Type scale ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-deep);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px; background: var(--teal);
  display: inline-block;
}
.eyebrow.no-rule::before { display: none; }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; }
.display {
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.04em; }
.h3 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); letter-spacing: -0.03em; }
.lede { font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--ink-soft); line-height: 1.5; font-weight: 400; }
.muted { color: var(--ink-faint); }
.serif-note { font-style: italic; }
.mono { font-family: var(--mono); }
.measure { max-width: 64ch; }
.measure-sm { max-width: 48ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em;
  padding: 14px 22px; border: 1px solid var(--ink);
  border-radius: var(--radius); background: var(--ink); color: var(--paper);
  transition: all .25s ease; cursor: pointer;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.teal { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.btn.teal:hover { background: transparent; color: var(--teal-deep); }

/* ---------- Wordmark logo (from reference: AIHEALTH / clinic) ---------- */
.wordmark {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  font-family: var(--sans); font-weight: 600; letter-spacing: 0.32em;
  font-size: 18px; text-transform: uppercase; color: var(--ink);
  line-height: 1; padding-left: 0.32em;
}
.wordmark .slash  { color: var(--ink-faint); font-weight: 300; letter-spacing: 0; margin: 0 -0.12em; }
.wordmark .clinic { color: var(--ink-faint); font-weight: 400; letter-spacing: 0.08em; text-transform: lowercase; font-size: 0.8em; }
footer .wordmark, .mission .wordmark, .cta-band .wordmark { color: #fff; }
footer .wordmark .slash, footer .wordmark .clinic { color: #7d7a72; }
.wordmark-lg { font-size: clamp(28px, 5vw, 52px); letter-spacing: 0.3em; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(242,239,234,0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--ink-soft); position: relative; padding: 4px 0;
  transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--teal);
}
.nav-cta { padding: 9px 16px; font-size: 12px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; cursor: pointer; }
.nav-toggle span { display:block; width: 20px; height: 1.5px; background: var(--ink); margin: 4px 0; transition: .25s; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(48px, 9vh, 110px); padding-bottom: clamp(40px, 7vh, 80px); position: relative; overflow: hidden; }
.hero .signal-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: 0.9;
}
.hero-inner { position: relative; z-index: 2; }
.hero .display { margin: 22px 0 26px; max-width: 18ch; }
.hero .lede { max-width: 56ch; }
.hero-cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

/* ---------- Stat band ---------- */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat { padding: 30px 0; border-right: 1px solid var(--line); padding-right: 24px; }
.stat:last-child { border-right: none; }
.stat .num { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 600; letter-spacing: -0.04em; }
.stat .num .unit { font-size: 0.5em; color: var(--teal-deep); font-family: var(--mono); margin-left: 4px; }
.stat .lbl { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; }

/* ---------- Section header ---------- */
.sec { padding-block: clamp(60px, 10vh, 130px); }
.sec-head { margin-bottom: 52px; }
.sec-head .h2 { margin-top: 18px; max-width: 20ch; }
.sec-head .lede { margin-top: 20px; }

/* ---------- Workflow split cards (home) ---------- */
.flows { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.flow {
  padding: clamp(30px,4vw,52px); position: relative;
  display: flex; flex-direction: column; min-height: 440px;
  transition: background .3s; overflow: hidden;
}
.flow:first-child { border-right: 1px solid var(--line); }
.flow:hover { background: var(--paper-2); }
.flow-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-deep); }
.flow h3 { margin: 14px 0 12px; font-size: clamp(1.6rem,2.6vw,2.2rem); }
.flow p { color: var(--ink-soft); font-size: 1rem; }
.flow .viz { margin-top: auto; padding-top: 28px; }
.flow .flow-link { margin-top: 24px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink); display: inline-flex; gap: 8px; align-items: center; }
.flow .flow-link .arrow { transition: transform .25s; }
.flow:hover .flow-link .arrow { transform: translateX(5px); }

/* ---------- Generic cards / grid ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.card { background: var(--paper); padding: 32px; }
.card .idx { font-family: var(--mono); font-size: 12px; color: var(--teal-deep); letter-spacing: 0.1em; }
.card h3 { margin: 16px 0 10px; }
.card p { color: var(--ink-soft); font-size: 0.97rem; }

/* ---------- Instrument panel (data readout) — LIGHT ---------- */
.panel { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px,3.5vw,44px); position: relative; overflow: hidden; }
.panel .eyebrow { color: var(--teal-deep); }
.panel .eyebrow::before { background: var(--teal); }
.panel .panel-sub { color: var(--ink-soft); }
.panel .legend { color: var(--ink-soft); }
.panel-grid { position:absolute; inset:0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 44px 44px; opacity: 0.35; pointer-events:none; }
.readout { font-family: var(--mono); }
.readout .big { font-size: clamp(2.4rem,5vw,3.6rem); font-weight: 500; letter-spacing: -0.02em; }
/* sub-panels (stack tiles) on light */
.subtiles { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.subtiles > div { background:var(--paper); padding:24px; }
.subtiles .k { font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--teal-deep); }
.subtiles p { color:var(--ink-soft); margin-top:10px; font-size:0.95rem; }

/* ---------- App showcase (phone + chat) ---------- */
.app-show { display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(30px,5vw,64px); align-items:center; }
.phone { width:300px; max-width:100%; margin:0 auto; background:#111; border-radius:40px; padding:11px; box-shadow:0 34px 70px -24px rgba(0,0,0,0.42); border:1px solid #2a2a28; }
.phone .screen { position:relative; background:var(--bg); border-radius:30px; overflow:hidden; height:580px; display:flex; flex-direction:column; }
.phone .notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#111; border-radius:0 0 14px 14px; z-index:5; }
.app-vid { width:100%; height:100%; object-fit:cover; display:block; background:#fff; }
.app-phones { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.app-phones figure { margin:0; }
.app-phones .phone { width:100%; max-width:236px; margin:0 auto; }
.app-phones .phone .screen { height:470px; }
.app-cap { text-align:center; margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:0.03em; color:var(--ink-faint); }
.app-cap .t { display:block; color:var(--ink); font-weight:600; font-size:14px; letter-spacing:-0.01em; margin-bottom:4px; font-family:var(--sans); }
@media(max-width:900px){ .app-phones{ grid-template-columns:1fr; gap:40px; } }
.chat-head { background:var(--teal-deep); color:#fff; padding:16px 16px 12px; display:flex; align-items:center; gap:10px; }
.chat-head .av { width:32px; height:32px; border-radius:50%; background:var(--teal-light); color:#073; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:13px; }
.chat-head .nm { font-weight:600; font-size:13px; line-height:1.1; }
.chat-head .st { font-family:var(--mono); font-size:9px; letter-spacing:0.06em; color:#bfeee7; }
.chat-body { flex:1; padding:14px; display:flex; flex-direction:column; justify-content:flex-end; gap:9px; overflow:hidden; background:linear-gradient(180deg,#f2efea,#ece8e1); }
.msg { max-width:82%; padding:9px 12px; border-radius:15px; font-size:12.5px; line-height:1.42; opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease; }
.msg.in { opacity:1; transform:none; }
.msg.user { align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:5px; }
.msg.bot { align-self:flex-start; background:#fff; border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:5px; }
.msg.meal { align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:5px; padding:8px; }
.msg.meal .chip { display:flex; align-items:center; gap:8px; }
.msg.meal .thumb { width:38px; height:38px; border-radius:8px; background:linear-gradient(135deg,#caa46a,#e8d3a8); flex:none; display:flex; align-items:center; justify-content:center; font-size:18px; }
.msg .pill { display:inline-block; margin-top:6px; font-family:var(--mono); font-size:10px; padding:2px 7px; border-radius:100px; }
.msg .pill.warn { background:rgba(176,122,22,0.14); color:var(--warn); }
.msg .pill.good { background:rgba(45,106,79,0.14); color:var(--good); }
.typing { align-self:flex-start; background:#fff; border:1px solid var(--line); border-radius:15px; border-bottom-left-radius:5px; padding:11px 13px; display:none; gap:4px; }
.typing.show { display:flex; }
.typing span { width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:blink 1.2s infinite; }
.typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s}
@keyframes blink { 0%,60%,100%{opacity:.25} 30%{opacity:1} }
.chat-input { border-top:1px solid var(--line); background:var(--paper); padding:9px 12px; display:flex; align-items:center; gap:8px; }
.chat-input .box { flex:1; background:var(--bg); border:1px solid var(--line); border-radius:100px; padding:7px 12px; font-size:11.5px; color:var(--ink-faint); }
.chat-input .snd { width:30px; height:30px; border-radius:50%; background:var(--teal-deep); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
@media (max-width:900px){ .app-show { grid-template-columns:1fr; } }

/* ---------- Photo frames (rural / gallery) ---------- */
.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.photo-frame { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:8px; }
.photo-frame .inner { aspect-ratio:4/3; border:1px solid var(--line); border-radius:2px; background:linear-gradient(160deg,#ece8e1,#f6f4ef); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.photo-frame .inner img { width:100%; height:100%; object-fit:cover; }
.photo-frame .ph { font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; color:var(--ink-faint); text-align:center; padding:14px; }
.photo-frame figcaption { font-family:var(--mono); font-size:11px; color:var(--ink-faint); padding:10px 4px 4px; letter-spacing:0.03em; }
@media (max-width:900px){ .photo-grid { grid-template-columns:1fr; } }

/* ---------- Findings (research) ---------- */
.findings { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.finding { background:var(--paper); padding:30px; display:flex; flex-direction:column; gap:8px; }
.finding .fnum { font-size:clamp(2rem,3.4vw,2.8rem); font-weight:600; letter-spacing:-0.04em; color:var(--teal-deep); line-height:1; }
.finding .fnum .u { font-size:0.42em; font-family:var(--mono); color:var(--ink-faint); margin-left:4px; letter-spacing:0; }
.finding .fstat { font-size:0.98rem; color:var(--ink); font-weight:500; }
.finding .fmeta { font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:var(--ink-faint); margin-top:2px; }
.cohort-bar { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.cohort-bar > div { background:var(--paper); padding:24px 26px; }
.cohort-bar .cnum { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:600; letter-spacing:-0.03em; }
.cohort-bar .clbl { font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px; }

/* ---------- Step / journey ---------- */
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.step { background: var(--paper); padding: 28px clamp(24px,3vw,40px); display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: start; }
.step .n { font-family: var(--mono); font-size: 13px; color: var(--teal-deep); border: 1px solid var(--line); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.step h3 { font-size: 1.2rem; margin-bottom: 6px; }
.step p { color: var(--ink-soft); font-size: 0.97rem; }

/* ---------- Legend / chips ---------- */
.legend { display:flex; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); letter-spacing: 0.03em; }
.legend span { display: inline-flex; align-items:center; gap: 7px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display:inline-block; }
.dot.good{background:var(--good)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)} .dot.low{background:var(--low)} .dot.teal{background:var(--teal)}

.chip { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; padding: 6px 11px; border: 1px solid var(--line); border-radius: 100px; color: var(--ink-soft); background: var(--paper); }

/* ---------- Quote / mission (brand teal, no black) ---------- */
.mission { background: var(--teal-deep); color: #f3faf8; }
.mission .eyebrow { color: #bfeee7; }
.mission .eyebrow::before { background: #bfeee7; }
.mission .big-quote { font-size: clamp(1.6rem, 3.4vw, 2.8rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.18; max-width: 22ch; }
.mission .big-quote em { font-style: normal; color: #c6f3ec; }

/* ---------- Doc block ---------- */
.doc { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px,5vw,70px); align-items: center; }
.doc-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.doc-card .frame { border: 1px solid var(--line); border-radius: 2px; aspect-ratio: 4/5; display:flex; align-items:flex-end; padding: 22px; background: linear-gradient(160deg,#ece8e1,#f6f4ef); position: relative; overflow:hidden; }
.doc-credentials { display:flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.cred { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 0.97rem; color: var(--ink-soft); }
.cred .tick { color: var(--teal-deep); font-family: var(--mono); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--teal-deep); color: #fff; border-radius: var(--radius); padding: clamp(40px,6vw,72px); position: relative; overflow: hidden; }
.cta-band .h2 { color: #fff; max-width: 18ch; }
.cta-band .btn { background: #fff; color: var(--teal-deep); border-color: #fff; }
.cta-band .btn:hover { background: transparent; color: #fff; }
.cta-band .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.cta-band .btn.ghost:hover { background: #fff; color: var(--teal-deep); }

/* ---------- Footer ---------- */
footer { background: var(--ink); color: #b9b5ad; padding-block: 64px 40px; }
footer .brand svg { height: 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
footer h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #6f6c65; margin-bottom: 16px; }
footer a { display:block; color: #b9b5ad; font-size: 0.92rem; padding: 5px 0; transition: color .2s; }
footer a:hover { color: #fff; }
.foot-bottom { display:flex; justify-content: space-between; align-items:center; margin-top: 48px; padding-top: 24px; border-top: 1px solid #2a2926; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: #6f6c65; flex-wrap: wrap; gap: 12px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Page hero (interior) ---------- */
.page-hero { padding-top: clamp(50px,8vh,90px); padding-bottom: clamp(36px,5vh,60px); }
.page-hero .display { max-width: 16ch; margin: 20px 0; font-size: clamp(2.4rem,6vw,4.4rem); }
.breadcrumb { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-faint); }
.breadcrumb a:hover { color: var(--teal-deep); }

/* ---------- Misc viz ---------- */
.bars { display:flex; flex-direction: column; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 54px; align-items:center; gap: 14px; font-family: var(--mono); font-size: 12px; }
.bar-track { height: 10px; background: var(--line-soft); border-radius: 100px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 100px; width: 0; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }

.tir-stack { display:flex; height: 26px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.tir-stack > div { height: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-links.open { display: flex; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: 18px var(--gut); gap: 8px; }
  .nav-links.open a { padding: 12px 0; font-size: 15px; }
  .nav-toggle { display: block; }
  .statband { grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(2) { border-right: none; }
  .flows { grid-template-columns: 1fr; }
  .flow:first-child { border-right: none; border-bottom: 1px solid var(--line); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .findings { grid-template-columns: 1fr; }
  .cohort-bar { grid-template-columns: 1fr; }
  .subtiles { grid-template-columns: 1fr; }
  .doc { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .step { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .statband { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 92px 1fr 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}