/* ── Anestheo shared styles ── */
/* All pages import this. navbar.js injects its own scoped CSS. */

/* Tokens first: every value below is drawn from them, and a page's own
   <style> still overrides them because a linked sheet is parsed before the
   inline block that follows it. */
@import url("tokens.css?v=2026.08.21-03");

/* The Point — design-system primitive. Every dark composition inherits it. */
@import url("point.css?v=2026.08.21-03");

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

html, body {
  font-family: var(--font);
  background: var(--ground);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── THE GROUND ──
   The homepage lights its graphite with two very soft washes — teal high on
   the right, a cold blue low on the left — and nothing else. Every page now
   sits on the same light.

   This replaces the graph-paper grid that used to be here. The grid was a
   device of the old green-black surface and it read as texture rather than as
   depth; more to the point, the homepage never had it, so every other page
   wearing it was the single loudest way the site announced that Home and the
   rest of it were different products. .theme-clinical sets --ground-glow to
   none: a gradient behind a vitals trace is noise. */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--ground-glow);
  background-repeat: no-repeat;
}

/* ── PAGE WRAPPER ── */
.page-wrap {
  position: relative; z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 52px 28px 80px;
}

/* ── SECTION ── */
.section { margin-bottom: var(--sp-8); }
/* The homepage eyebrow: the lifted teal, wider tracking, and the weight of a
   label rather than a heading. */
.section-tag {
  font-size: 12.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brand-lift);
  display: inline-block; margin-bottom: 12px;
}
/* The homepage has no serif anywhere in its public composition. A Playfair
   heading here was the second loudest way the site said Home and the rest of
   it were different products. Same face, same weight, same tracking. */
.section-title {
  font-family: var(--sans); font-size: clamp(25px,3.4vw,38px);
  font-weight: 650; line-height: 1.16; letter-spacing: -.02em; margin-bottom: 10px;
}
.section-sub {
  font-size: 16px; color: var(--muted); line-height: 1.75;
  font-weight: 400; max-width: 56ch; margin-bottom: var(--sp-6);
}

/* ── CARD GRID ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-2);
  display: flex; flex-direction: column; gap: var(--sp-2);
  position: relative; overflow: hidden;
}
.card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--teal2); transform: scaleX(0); transform-origin: left;
  transition: transform .26s;
}
.card:hover { border-color: var(--border-strong); background: var(--teal-tint); transform: translateY(-1px); }
.card:hover::after { transform: scaleX(1); }
.card-ico   { font-size: 24px; }
.card-title { font-family: var(--sans); font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.card-desc  { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ── HERO (public pages) ── */
/* The page already sits in the homepage glow, so a second wash here stacks
   two light sources on one screen. The hero is sized by its content and closed
   with a hairline, which is how the homepage separates a section. */
.hero-section {
  display: flex; align-items: center;
  padding: var(--sp-8) 28px var(--sp-7);
  position: relative; z-index: 1;
  border-bottom: 1px solid var(--line);
}
.hero-inner { max-width: var(--max); margin: 0 auto; width: 100%; }
/* The homepage eyebrow is a rule and a word, not a pill. */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--brand-lift);
  font-size: 12.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 20px;
}
/* No rule before the label, for the same reason the homepage dropped its
   own: at narrow widths a short line beside a word reads as a stray dash. */
.hero-eyebrow span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: pulse 2.4s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
.hero-h1 {
  font-family: var(--sans); font-size: clamp(34px,5.2vw,60px);
  font-weight: 700; line-height: 1.06; letter-spacing: -.03em; margin-bottom: 22px;
}
/* The homepage sets its second line in a teal-to-mint wash rather than a
   flat accent. Same treatment, same gradient. */
.hero-h1 em {
  font-style: normal;
  background: linear-gradient(100deg,#7ECFC0,#CFE9E2 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  font-size: 17px; color: var(--muted); line-height: 1.75;
  font-weight: 400; max-width: 54ch; margin-bottom: 32px;
}
.hero-btns { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
/* The homepage primary action, exactly: a teal gradient carrying its own
   glow, 50px tall, 650 weight. */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--brand-grad); color: var(--on-brand); border: 1px solid transparent;
  padding: 14px 26px; min-height: 50px; border-radius: var(--radius-md); font-size: 15px;
  font-weight: 650; cursor: pointer; font-family: var(--font);
  text-decoration: none; box-shadow: var(--brand-grad-shadow);
  transition: background var(--dur-2), box-shadow var(--dur-2);
}
.btn-primary:hover { background: var(--brand-grad-hover); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--hair-2);
  padding: 14px 26px; min-height: 50px; border-radius: var(--radius-md); font-size: 15px;
  font-weight: 650; cursor: pointer; font-family: var(--font);
  text-decoration: none; transition: border-color var(--dur-2), background var(--dur-2);
}
.btn-ghost:hover { border-color: rgba(126,207,192,.55); background: var(--brand-tint); }

/* ── DIVIDER ── */
.divider { height: 1px; background: var(--border); margin: 48px 0; }

/* ── FOOTER ── */
.site-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--border);
  background: var(--ground-2);
  padding: 40px 28px 24px;
}
.footer-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-4);
}
.footer-logo { font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none; }
.footer-logo span { color: var(--teal2); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { font-size: 13px; color: var(--hint); text-decoration: none; transition: color var(--dur-2); }
.footer-links a:hover { color: var(--text); }
.footer-copy { font-size: 12px; color: var(--ink-faint); width: 100%; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.06); }

/* ============================================================
   DOCUMENT PAGES
   ------------------------------------------------------------
   The site has thirteen prose pages — legal notices, the policy
   set, the status and release pages, 404, and the two auth
   interstitials. Each one used to carry its own private copy of
   this block, and the copies had drifted: two different heading
   fonts, two different link colours, one family with cards and
   one without, and a brand teal that was wrong on nine of them.

   Both families are kept, because their difference is real: a
   .doc-* page is a set of discrete answers and reads as cards; a
   .legal-* page is one continuous instrument and reads as a
   document. What they now share is the palette, the type scale,
   the radius and the rhythm — consistency, not homogenisation.
   ============================================================ */

/* ── Carded document (policies, status, release notes, 404) ── */
/* One top-space for every document page. The two families had drifted to
   88px and 46px below the fixed navigation; neither was chosen, they were
   just typed at different times. */
.doc-wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: var(--sp-8) 24px 56px; line-height: 1.6; }
.doc-wrap a { color: var(--accent); }
.doc-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.doc-h1 { font-size: clamp(24px,4vw,30px); font-weight: 700; letter-spacing: -.02em; margin: var(--sp-2) 0 6px; }
.doc-lead { font-size: 15px; color: var(--muted); margin-bottom: 26px; }
.doc-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 14px;
}
.doc-card h2 { font-size: 16px; font-weight: 700; margin-bottom: var(--sp-2); }
.doc-card p  { font-size: 14px; color: var(--text-2); margin-bottom: 10px; }
.doc-card p:last-child { margin-bottom: 0; }
.doc-card ul { margin: var(--sp-1) 0 0 18px; }
.doc-card li { font-size: 14px; color: var(--text-2); margin-bottom: 6px; }
.doc-note { font-size: 12.5px; color: var(--ink-faint); margin-top: 14px; }

/* ── Continuous document (privacy, terms, disclaimer, about) ── */
.legal-wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: var(--sp-8) 24px 80px; }
.legal-back { display: inline-block; margin-bottom: var(--sp-5); color: var(--accent); text-decoration: none; font-size: 14px; }
.legal-back:hover { text-decoration: underline; }
.legal-wrap h1 {
  font-family: var(--sans); font-size: clamp(28px,4vw,40px);
  font-weight: 650; letter-spacing: -.02em; margin-bottom: var(--sp-2);
}
.legal-updated { font-size: 13px; color: var(--ink-faint); margin-bottom: 28px; }
.legal-wrap h2 { font-size: 18px; color: var(--accent); margin: 28px 0 10px; }
.legal-wrap p  { font-size: 15px; color: var(--text-2); line-height: 1.75; font-weight: 300; margin-bottom: var(--sp-3); }
.legal-wrap ul { margin: 6px 0 var(--sp-3) 20px; }
.legal-wrap li { font-size: 15px; color: var(--text-2); line-height: 1.7; font-weight: 300; }
.legal-wrap a  { color: var(--accent); }
.legal-note {
  background: var(--warning-bg); border: 1px solid var(--warning-bd);
  border-radius: var(--radius-md); padding: var(--sp-3) 14px;
  font-size: 13px; color: var(--muted); margin-top: 26px; line-height: 1.6;
}

/* ── RESPONSIVE ── */
@media (max-width: 720px) {
  .page-wrap { padding: 36px 16px 60px; }
  .hero-section { padding: 48px 16px 40px; }
  .card-grid { grid-template-columns: 1fr; }
  .site-footer { padding: 32px 16px 20px; }
  .doc-wrap, .legal-wrap { padding-left: 16px; padding-right: 16px; padding-bottom: 56px; }
}

/* ============================================================
   LIGHT SURFACE
   ------------------------------------------------------------
   The component-level half of .theme-light. tokens.css holds its
   palette; these are the few decisions that are not a colour
   swap — the places where a dark composition and a light one
   genuinely want different treatment.

   No page currently carries .theme-light. This is kept, and kept
   correct, so that assigning it to a surface that has a real
   readability reason to be light stays a one-class decision.
   ============================================================ */
.theme-light body::before { display: none; }

/* A white card on warm paper is already separated from its ground, so the
   border does the work a fill used to do and the shadow only has to suggest a
   millimetre of lift. */
.theme-light .card,
.theme-light .doc-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--elev-1);
}
.theme-light .card:hover {
  background: var(--surface);
  border-color: var(--line-2);
  box-shadow: var(--elev-2);
}

/* The teal gradient and its glow are a dark-ground effect; on paper the same
   button reads as a solid, and the hero gradient text loses its contrast. */
.theme-light .btn-primary { background: var(--brand); box-shadow: none; }
.theme-light .btn-primary:hover { background: var(--brand-deep); }
.theme-light .btn-ghost { background: transparent; border-color: var(--line-2); }
.theme-light .btn-ghost:hover { background: var(--brand-tint); border-color: var(--brand); }
.theme-light .hero-h1 em { background: none; -webkit-background-clip: border-box;
  background-clip: border-box; color: var(--brand); }
.theme-light .hero-eyebrow { color: var(--brand); }
.theme-light .section-tag, .theme-light .doc-eyebrow { color: var(--brand); }
.theme-light .doc-wrap a, .theme-light .legal-wrap a,
.theme-light .legal-back, .theme-light .legal-wrap h2 { color: var(--brand); }
.theme-light .footer-logo span { color: var(--brand); }