/* ==========================================================================
   Anesthesia Intelligence — Ware Solutions LLC
   Palette is sampled from the app icon (#0b555d) and the app's AccentColor
   (#177979, MedicalBlue in ui/theme/Color.kt) so web and app read as one brand.
   ========================================================================== */

:root {
  /* Brand */
  --teal-900: #06343a;
  --teal-800: #0b555d; /* app icon background */
  --teal-700: #177979; /* app AccentColor / MedicalBlue */
  --teal-600: #1d8c8c;
  --teal-500: #3a9b9b; /* MedicalBlueLight */
  --teal-200: #a8d4d2;
  --teal-100: #d9eceb;
  --teal-50:  #eff7f6;
  --cream:    #f2eee7; /* app icon foreground */

  /* Neutrals */
  --ink:      #0e2225;
  --ink-2:    #40585b;
  /* #5c7275 clears WCAG AA on both --paper (5.10:1) and --sand (4.81:1).
     The lighter #6b8285 this replaced only reached 4.07:1. */
  --ink-3:    #5c7275;
  --line:     #e2e8e7;
  --paper:    #ffffff;
  --sand:     #faf8f4;

  /* Darkened from #b0742a, which read 3.91:1 as the required-field marker. */
  --amber:    #9a6524;

  /* Type
     Body/display is the system sans — the same face the app renders in, so web
     and app read as one product. The mono is the utility face: it carries
     eyebrows, figures and prices, borrowing the vernacular of the room this app
     is used in (monitor readouts, drug labels, dosing tables). Both are system
     faces, so there is no webfont request and nothing to fall back from. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Modular type scale, ratio 1.2, 17px base. Replaces the ad-hoc rem values
     this file used to carry (.84375, .90625, .96875 …). */
  --t-2xs: .6875rem;  /* 11px  — store-button kicker */
  --t-xs:  .75rem;    /* 12px  — eyebrows, uppercase labels */
  --t-sm:  .8125rem;  /* 13px  — captions, legal meta */
  --t-md:  .875rem;   /* 14px  — secondary body */
  --t-base: 1rem;     /* 17px  — body */
  --t-lg:  1.125rem;  /* 19px  — lead-in, card titles */
  --t-xl:  1.5rem;    /* 26px  — stat figures */
  --t-2xl: 2.25rem;   /* 38px  — prices */

  /* Spacing scale, 4px base — layout uses these, not arbitrary values. */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* Shape. Radius varies by role rather than one value everywhere: data and
     controls sit tight, containers open up. */
  --r-data: 6px;   /* figures, chips, inputs */
  --r-sm: 10px;
  --r-md: 14px;    /* panels */
  --r-lg: 20px;    /* cards */
  --r-full: 999px;

  --container: 1120px;

  --shadow-sm: 0 1px 2px rgba(14, 34, 37, .06), 0 2px 8px rgba(14, 34, 37, .04);
  --shadow-md: 0 2px 6px rgba(14, 34, 37, .06), 0 12px 28px rgba(14, 34, 37, .08);
  --shadow-lg: 0 8px 24px rgba(6, 52, 58, .12), 0 24px 60px rgba(6, 52, 58, .14);
}

/* --------------------------------------------------------------- Base --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* sticky header clearance for #anchors */
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  letter-spacing: -.021em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5.2vw, 3.75rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.1875rem; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--teal-800); }

img, svg { max-width: 100%; height: auto; display: block; }

strong { font-weight: 650; }

:focus-visible {
  outline: 3px solid var(--teal-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--paper);
  color: var(--teal-800);
  font-weight: 650;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  transition: top .16s ease;
}
.skip-link:focus { top: 12px; }

.section { padding: clamp(64px, 8vw, 104px) 0; }
.section--sand { background: var(--sand); border-block: 1px solid var(--line); }

.section-head { max-width: 46ch; margin-bottom: var(--s-12); }
.section-head p { color: var(--ink-2); font-size: var(--t-lg); margin-bottom: 0; }

/* The utility face. Every uppercase label and every figure on the page runs
   through one of these two rules, so the "instrument" voice stays consistent. */
.eyebrow,
.audience-label,
.plan h3,
.contact-card dt,
.toc h2,
.site-footer h3 {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.stat b,
.plan-price b,
.plan-price span,
.plan-sub {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--s-3);
  color: var(--teal-700);
}

/* ------------------------------------------------------------- Header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { color: var(--ink); }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.brand span { white-space: nowrap; }

.nav { margin-left: auto; }
.nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: .9375rem;
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.nav a:hover { background: var(--teal-50); color: var(--teal-800); }
.nav a[aria-current="page"] { color: var(--teal-800); background: var(--teal-50); }

.nav-toggle {
  display: none;
  margin-left: auto;
  padding: 8px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
}

/* -------------------------------------------------------------- Buttons - */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font: inherit;
  font-size: .96875rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, background .16s ease,
              border-color .16s ease, box-shadow .16s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--teal-700);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--teal-800); color: #fff; }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-800); }

.btn--sm { padding: 9px 18px; font-size: .90625rem; }

/* Store buttons — laid out like the official badges. Swap in Apple's and
   Google's artwork if you'd rather ship their exact assets. */
.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px 11px 18px;
  border-radius: 14px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .16s ease, background .16s ease;
}
.store-btn:hover {
  color: #fff;
  background: #131313;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.store-btn:active { transform: translateY(0); }
.store-btn svg { flex-shrink: 0; }
.store-btn b {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.18;
}
.store-btn small {
  display: block;
  font-size: .6875rem;
  letter-spacing: .015em;
  opacity: .82;
  line-height: 1.2;
}

/* ---------------------------------------------------------------- Hero --- */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90rem 46rem at 74% -18%, #17727c 0%, transparent 58%),
    radial-gradient(60rem 40rem at 8% 108%, #0f6068 0%, transparent 62%),
    var(--teal-900);
  color: var(--cream);
  padding: clamp(64px, 9vw, 116px) 0 clamp(60px, 8vw, 100px);
}

/* Soft vignette toward the audience bar. (An ECG trace used to sit here too;
   removed at the client's request.) */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 180px;
  background: linear-gradient(to top, rgba(6, 52, 58, .55), transparent);
  pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.hero .eyebrow { color: var(--teal-200); }

.hero h1 { color: var(--cream); margin-bottom: .28em; }
.hero h1 sup {
  font-size: .34em;
  font-weight: 600;
  top: -1.35em;
  margin-left: .06em;
}

.hero-lede {
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  line-height: 1.55;
  color: #cfe6e4;
  max-width: 34ch;
  margin-bottom: 2rem;
}

.hero-note {
  margin-top: 22px;
  font-size: .875rem;
  color: #a9cbc9;
}

.hero-art {
  position: relative;
  display: grid;
  place-items: center;
}
.hero-art img {
  width: min(320px, 76%);
  border-radius: 26%;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .1);
}
.hero-art::before {
  content: "";
  position: absolute;
  width: min(420px, 96%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 155, 155, .38), transparent 66%);
  filter: blur(8px);
}

/* --------------------------------------------------------- Audience bar - */

.audience {
  background: var(--teal-800);
  color: var(--cream);
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.audience-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  text-align: center;
}
.audience-label {
  color: var(--teal-200);
  margin-right: var(--s-1);
}
.chip {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-data);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--t-md);
  font-weight: 550;
  white-space: nowrap;
}

/* ------------------------------------------------------------ Features -- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

.feature {
  padding: 30px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature:hover {
  transform: translateY(-3px);
  border-color: var(--teal-200);
  box-shadow: var(--shadow-md);
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  color: var(--teal-700);
}
.feature-icon svg { width: 25px; height: 25px; }

.feature h3 { margin-bottom: .4em; }
.feature p { color: var(--ink-2); font-size: .96875rem; margin-bottom: 0; }

/* ---------------------------------------------------------- About/split - */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

/* Fixed 2x2 — auto-fit left the fourth stat stranded on its own row. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
/* Read as a readout, not a card: hairline rule above the figure, the count in
   the mono face, label beneath. The accent rail this replaced was decoration
   that encoded nothing. */
.stat {
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--teal-200);
}
.stat b {
  display: block;
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--teal-800);
  line-height: 1.15;
}
.stat span {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-md);
  color: var(--ink-2);
}

/* ------------------------------------------------------------- Pricing -- */

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  max-width: 720px;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.plan--featured {
  border-color: var(--teal-600);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}

.plan-badge {
  position: absolute;
  top: -13px;
  left: 30px;
  padding: 5px 14px;
  border-radius: var(--r-full);
  background: var(--teal-700);
  color: #fff;
  font-size: .71875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.plan h3 {
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.plan-price b {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1;
}
.plan-price span { color: var(--ink-3); font-size: var(--t-md); }

.plan-sub {
  font-size: var(--t-sm);
  color: var(--teal-700);
  font-weight: 500;
  letter-spacing: .01em;
  margin-bottom: var(--s-6);
}

.plan ul {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: .96875rem;
  color: var(--ink-2);
}
.plan li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
}
.plan li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--teal-600); }

.plan .btn { margin-top: auto; width: 100%; }

.pricing-note {
  max-width: 62ch;
  margin-top: var(--s-8);
  font-size: var(--t-md);
  color: var(--ink-3);
}

/* ----------------------------------------------------------------- FAQ -- */

.faq { max-width: 780px; }

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.faq details[open] { border-color: var(--teal-200); box-shadow: var(--shadow-sm); }

.faq summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  font-size: 1.0625rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  transition: background .16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--teal-50); }

.faq summary .chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--ink-3);
  transition: transform .2s ease;
}
.faq details[open] summary .chevron { transform: rotate(180deg); }

.faq-body {
  padding: 0 var(--s-6) var(--s-5);
  color: var(--ink-2);
  font-size: var(--t-base);
  max-width: 66ch;
}

/* ------------------------------------------------------------- Contact -- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

.form-field { margin-bottom: 18px; }
.form-field label {
  display: block;
  margin-bottom: 7px;
  font-size: .90625rem;
  font-weight: 600;
}
.form-field .req { color: var(--amber); }

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px 15px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--teal-600);
  box-shadow: 0 0 0 3px rgba(23, 121, 121, .16);
}

.form-hint { font-size: .84375rem; color: var(--ink-3); margin-top: 14px; }

.form-status {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  font-size: .9375rem;
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  color: var(--teal-800);
}
.form-status[hidden] { display: none; }

/* Honeypot — hidden from people, tempting to bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-card {
  padding: 30px 28px;
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  border-radius: var(--r-lg);
}
.contact-card h3 { margin-bottom: .5em; }
.contact-card p { font-size: .96875rem; color: var(--ink-2); }
.contact-card dl { margin: 0; }
.contact-card dt {
  color: var(--ink-3);
  margin-top: var(--s-5);
}
.contact-card dd { margin: var(--s-1) 0 0; font-size: var(--t-base); }

/* ----------------------------------------------------------- Callout ---- */

.callout {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  background: #fdf8f0;
  border: 1px solid #ecdcc2;
  border-radius: var(--r-md);
  color: #6b4d21;
  font-size: .9375rem;
}
.callout svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--amber); margin-top: 1px; }
.callout p { margin-bottom: 0; }
.callout strong { color: #533a17; }

/* ---------------------------------------------------------- CTA banner -- */

.cta-band {
  background:
    radial-gradient(50rem 30rem at 50% -40%, #17727c 0%, transparent 62%),
    var(--teal-900);
  color: var(--cream);
  text-align: center;
  padding: clamp(56px, 7vw, 88px) 0;
}
.cta-band h2 { color: var(--cream); }
.cta-band p { color: #bcdcda; max-width: 52ch; margin-inline: auto; margin-bottom: 32px; }
.cta-band .store-buttons { justify-content: center; }

/* -------------------------------------------------------------- Legal --- */

.legal { max-width: 780px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.legal h2 {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 1.75rem;
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { margin-top: 34px; font-size: 1.125rem; color: var(--teal-800); }
.legal ul { padding-left: 22px; color: var(--ink-2); }
.legal li { margin-bottom: .45em; }
.legal p { color: var(--ink-2); }

.legal-meta {
  font-size: .90625rem;
  color: var(--ink-3);
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

.toc {
  padding: 24px 26px;
  margin-bottom: 40px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
/* The !important flags override `.legal h2`, which owns the top rule and the
   large size for real section headings. This one is a label, not a heading. */
.toc h2 {
  margin: 0 0 var(--s-3) !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: var(--t-xs) !important;
  color: var(--ink-3);
}
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 32px;
  font-size: .9375rem;
}
.toc li { margin-bottom: .4em; break-inside: avoid; }

/* ------------------------------------------------------------- Footer --- */

.site-footer {
  background: var(--teal-900);
  color: #a9cbc9;
  padding: 60px 0 34px;
  font-size: .9375rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 40px;
  padding-bottom: 38px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--cream);
  text-decoration: none;
  letter-spacing: -.02em;
}
.footer-brand img { width: 34px; height: 34px; border-radius: 9px; }
.footer-about { max-width: 40ch; margin-bottom: 0; }

.site-footer h3 {
  margin-bottom: var(--s-3);
  color: var(--teal-200);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: #a9cbc9; text-decoration: none; }
.site-footer a:hover { color: var(--cream); text-decoration: underline; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  font-size: .875rem;
  color: #85b0ae;
}

.footer-disclaimer {
  margin-top: 22px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: .84375rem;
  line-height: 1.6;
  color: #9dc3c1;
}

/* ---------------------------------------------------------- Utilities -- */
/* A deliberately tiny set. The `_headers` CSP forbids inline styles, so these
   cover the handful of one-off spacing cases in the markup. */

.u-mt-24 { margin-top: 24px; }
.u-mt-40 { margin-top: 40px; }
.u-mt-48 { margin-top: 48px; }
.u-mb-40 { margin-bottom: 40px; }
.u-center { text-align: center; }
.u-ml-auto { margin-left: auto; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.error-lede {
  max-width: 46ch;
  margin: 0 auto 32px;
  color: var(--ink-2);
}

.footer-bottom--bare { border-top: 0; padding-top: 0; }

/* --------------------------------------------------------- Responsive --- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-lede { max-width: none; margin-inline: auto; }
  .hero .store-buttons { justify-content: center; }
  .hero-art { order: -1; }
  .hero-art img { width: min(210px, 54%); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  .nav-toggle { display: inline-grid; place-items: center; }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 10px 16px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav a { padding: 13px 14px; font-size: 1rem; }

  .header-cta { display: none; }

  .toc ul { columns: 1; }
  .faq-body { padding-left: 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 420px) {
  .store-buttons { flex-direction: column; }
  .store-btn { width: 100%; }
  .brand span { font-size: 1rem; }
}

/* ----------------------------------------------------------- A11y/print - */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .feature:hover, .store-btn:hover { transform: none; }
}

@media (prefers-contrast: more) {
  :root { --ink-2: #24393c; --ink-3: #45595c; --line: #b9c6c5; }
}

@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .store-buttons { display: none; }
  body { font-size: 12pt; color: #000; }
  .section { padding: 0; }
  a { color: #000; }
  .faq details { border: 0; }
}