/* Anastomo design system.
   ────────────────────────────────────────────────────────────────────────
   Two references, deliberately combined:

   · Material supplies the SYSTEM — one 8px spacing grid, one type scale,
     one set of interaction states, applied without exception. Every value
     below is a token; components never invent their own.
   · Dieter Rams supplies the SURFACE — flat planes, 1px hairlines instead
     of elevation shadows, a 2px radius, neutral greys with a single
     accent. "Weniger, aber besser."

   Material's elevation model is deliberately NOT used: drop shadows and
   large radii fight the logo, which is flat geometry defined by negative
   space. Surfaces here are separated by line and spacing, never by depth.

   Type is one grotesque, no second family. Helvetica was drawn as a direct
   competitor to Akzidenz-Grotesk and is what Braun itself moved to, so the
   system stack lands close to the Braun/Ulm reference at zero network cost
   — no webfont, no FOUT, no third-party request from a health app.

   Dark mode: system preference by default, manual override via
   html[data-theme]. */

:root {
  /* ── Type ── one family, weight and size carry hierarchy ── */
  --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale. Fixed steps, not a free-for-all — a component picks a step,
     it does not pick a number. Display sizes are set tight; Helvetica opens
     up badly at size without negative tracking. */
  --text-2xs:  0.6875rem; /* 11 — micro labels */
  --text-xs:   0.75rem;   /* 12 — caps labels, table heads */
  --text-sm:   0.8125rem; /* 13 — fine print */
  --text-md:   0.875rem;  /* 14 — secondary UI */
  --text-base: 1rem;      /* 16 — body */
  --text-lg:   1.125rem;  /* 18 — lead paragraphs */
  --text-xl:   1.375rem;  /* 22 — h3 */
  --text-2xl:  1.75rem;   /* 28 — h2 */
  --text-3xl:  2.25rem;   /* 36 — h1 */

  --track-tight: -0.022em; /* display sizes */
  --track-caps:   0.1em;   /* uppercase labels */

  /* ── Space ── 8px grid; --space-1 is the only half-step ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* ── Surface ── flat. There is no elevation token, on purpose. ── */
  --radius: 2px;
  --hairline: 1px;
  --measure: 34rem; /* ~66 characters, the readable column */

  /* ── Colour ── neutral greys carry the interface, green means action ──
     A second accent, terracotta, carries the opposite charge: the cost of
     fragmentation, not the fix. It was already load-bearing in this system
     as the untitled error colour below; naming it just gives it a second
     job. Two accents, two meanings — still not a palette. */
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --muted: #6b6b6b;      /* 4.88:1 on --bg — AA at body size */
  --accent: #0d7a5a;     /* 4.88:1 on --bg */
  --accent-deep: #0a4d3c;
  --accent-soft: #7fe3c3;
  --accent-wash: #edf3f0;
  --accent-2: #b3402f;      /* 5.2:1 on --bg */
  --accent-2-deep: #7c2d21;
  --accent-2-soft: #e8a698;
  --accent-2-wash: #fbecea;
  /* Deliberately NOT redefined in the dark-mode blocks below — --accent-deep
     flips to a bright mint there (by design, for hover states), which is
     exactly the wrong direction for a fill meant to read as a constant dark
     plane regardless of theme (the cta-band). */
  --band: #0a4d3c;
  --band-soft: #7fe3c3;
  --bg: #f5f5f3;
  --surface: #ffffff;
  --line: #dcdcd8;
  --on-accent: #ffffff;
  color-scheme: light;
}

/* Dark palette — by system preference unless explicitly overridden light,
   and by data-theme=dark regardless of system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ededed;
    --ink-soft: #b4b4b4;
    --muted: #8f8f8f;    /* 5.75:1 on --bg */
    --accent: #2fbf8f;   /* 7.94:1 on --bg */
    --accent-deep: #7fe3c3;
    --accent-soft: #0d7a5a;
    --accent-wash: #16211d;
    --accent-2: #e06a55;      /* 5.6:1 on --bg */
    --accent-2-deep: #f0b6aa;
    --accent-2-soft: #7c2d21;
    --accent-2-wash: #2a1613;
    --bg: #131313;
    --surface: #1c1c1c;
    --line: #333333;
    --on-accent: #131313;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #ededed;
  --ink-soft: #b4b4b4;
  --muted: #8f8f8f;
  --accent: #2fbf8f;
  --accent-deep: #7fe3c3;
  --accent-soft: #0d7a5a;
  --accent-wash: #16211d;
  --accent-2: #e06a55;
  --accent-2-deep: #f0b6aa;
  --accent-2-soft: #7c2d21;
  --accent-2-wash: #2a1613;
  --bg: #131313;
  --surface: #1c1c1c;
  --line: #333333;
  --on-accent: #131313;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font: var(--text-base)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}
main {
  flex: 1 0 auto; width: 100%; max-width: 1080px; margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-8);
}
.site-footer { margin-top: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* One family: hierarchy comes from size and weight, never a second face.
   Helvetica needs negative tracking and tight leading at display sizes. */
h1, h2, h3 { font-weight: 700; letter-spacing: var(--track-tight); line-height: 1.15; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

/* Keyboard focus is one visible, consistent treatment everywhere. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-2) clamp(var(--space-3), 4vw, var(--space-5));
  background: var(--bg);
  border-bottom: var(--hairline) solid transparent;
  transition: border-color .2s;
}
/* Scrolled state is a rule appearing, not a shadow — no elevation. */
.site-header.scrolled { border-bottom-color: var(--line); }
.brand {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: 700; font-size: var(--text-xl);
  color: var(--ink); text-decoration: none; letter-spacing: var(--track-tight);
}
/* The mark is bare ink, not a tile — no border-radius. fill on the <svg>
   cascades to its <path>, so the mark tracks the accent in both themes. */
.brand-mark { width: 28px; height: 28px; display: block; fill: var(--accent); }
/* The "apart" keyframes push circle centers outside the 0-100 viewBox by
   design (systems arriving from off-frame) — SVGs clip to their viewport by
   default, which sliced flat edges through the outer circles. overflow:
   visible lets the full circles paint; the box below still reserves only
   28x28px for layout, so neighbouring elements never reflow. */
.brand-mark-converge { overflow: visible; }

/* Three systems drift apart, converge with a slight overshoot, hold, then
   separate again — a seamless 4.2s loop in both directions. The
   negative-space joints only exist while all three are landed.

   Timings and offsets are ported from the signed-off design doc: offsets
   (0,-26) (-22,13) (22,13) from home, and the cycle 0-8% apart, 8-42%
   converging, 42-62% held, 62-96% separating, 96-100% apart.

   Animating `d` requires every keyframe to share a command structure, which
   they do: three identical arc-pair subpaths where only the start
   coordinates move. Browsers without `d` interpolation simply show the
   resting mark, which is the correct static logo. */
@keyframes brand-converge {
  0%   { d: path("M26 10 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0 M-12 77 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0 M64 77 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0"); animation-timing-function: linear; }
  8%   { d: path("M26 10 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0 M-12 77 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0 M64 77 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0"); animation-timing-function: cubic-bezier(.34, 1.4, .5, 1); }
  42%  { d: path("M26 36 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0 M10 64 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0 M42 64 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0"); animation-timing-function: linear; }
  62%  { d: path("M26 36 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0 M10 64 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0 M42 64 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0"); animation-timing-function: cubic-bezier(.34, 1.4, .5, 1); }
  96%  { d: path("M26 10 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0 M-12 77 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0 M64 77 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0"); animation-timing-function: linear; }
  100% { d: path("M26 10 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0 M-12 77 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0 M64 77 a24 24 0 1 0 48 0 a24 24 0 1 0 -48 0"); }
}
.brand-mark-converge path {
  animation: brand-converge 4.2s linear infinite;
}
/* Reduced motion gets the resting mark — the path attribute in the markup
   is already the settled 1c geometry, so removing the animation is enough. */
@media (prefers-reduced-motion: reduce) {
  .brand-mark-converge path { animation: none; }
}
.site-nav { display: flex; gap: var(--space-4); align-items: center; }
.site-nav a { color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: var(--text-md); }
.site-nav a:hover { color: var(--accent); }
/* Buttons inside the nav keep button colours, not nav-link colours. */
.site-nav a.btn, .site-nav a.btn:hover { color: var(--on-accent); }
.nav-toggle { display: none; }
.auth-links { display: flex; gap: var(--space-2); align-items: center; }
/* Which of patient/practice/organization this account is signed into —
   only the roles the account actually has get a tab (see .role-tabs for
   the equivalent on the signup page, same visual language). */
.nav-role-tabs { display: flex; gap: var(--space-1); }
.nav-role-tab {
  background: none; border: var(--hairline) solid transparent; border-radius: var(--radius);
  padding: var(--space-1) var(--space-2); cursor: pointer; color: var(--ink-soft);
  font-weight: 500; font-size: var(--text-md); font-family: inherit;
  transition: color .15s, border-color .15s, background .15s;
}
.nav-role-tab:hover { color: var(--accent); }
.nav-role-tab.active {
  border-color: var(--accent); color: var(--accent); background: var(--accent-wash); font-weight: 700;
}
/* Circular control — the one place roundness is kept. A Braun dial is a
   circle, and it echoes the mark. */
.theme-toggle {
  background: none; border: var(--hairline) solid var(--line); border-radius: 999px;
  width: 32px; height: 32px; cursor: pointer; color: var(--ink-soft);
  font-size: var(--text-base); line-height: 1; display: inline-flex;
  align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ── Buttons ────────────────────────────────────────────────────────── */
/* Rectangular, flat, no lift. Weight and fill carry the hierarchy. */
.btn {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius);
  border: var(--hairline) solid var(--accent);
  text-decoration: none; font-weight: 700; cursor: pointer;
  font-size: var(--text-md); font-family: var(--font);
  letter-spacing: 0.01em;
  transition: background .15s, border-color .15s, color .15s;
}
/* --on-accent flips with the theme, so the label stays legible on both the
   rest and hover fills without a per-theme override. */
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-ghost {
  background: transparent; color: var(--accent) !important;
  border-color: var(--line);
}
.btn-ghost:hover { background: transparent; border-color: var(--accent); }
.btn-small { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
button.link {
  background: none; border: none; color: var(--ink-soft); cursor: pointer;
  font-size: var(--text-md); font-weight: 500; font-family: var(--font); padding: 0;
}
button.link:hover { color: var(--accent); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { position: relative; text-align: center; padding: clamp(var(--space-6), 10vw, var(--space-8)) 0 var(--space-6); }
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
  pointer-events: none; opacity: .9;
}
/* Uppercase label with wide tracking — a rule under it, not a pill around
   it. Swiss signage, not a chip. */
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: var(--track-caps);
  font-size: var(--text-xs); font-weight: 700; color: var(--accent);
  border-bottom: var(--hairline) solid var(--accent);
  padding: 0 0 var(--space-1); margin-bottom: var(--space-2);
}
/* A dot in the second accent, not the first — the mark reads as a locator
   pin ahead of the label, the same role the little coloured mark plays
   ahead of a wordmark on a type specimen sheet. Circular, like the theme
   toggle and the brand mark: the one other place roundness survives. */
.eyebrow::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  margin-right: var(--space-2); border-radius: 50%;
  background: var(--accent-2); vertical-align: middle;
}
.hero h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1.04; margin: var(--space-3) 0; }
.hero .sub { color: var(--muted); max-width: var(--measure); margin: 0 auto var(--space-5); font-size: var(--text-lg); }
.cta-row { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }

/* ── Story beats (scroll-revealed stats) ────────────────────────────── */
.story-intro { position: relative; text-align: center; max-width: var(--measure); margin: var(--space-7) auto 0; }
.story-intro h2 { font-size: clamp(var(--text-xl), 3.4vw, var(--text-2xl)); margin-bottom: var(--space-1); }
.story-intro p { color: var(--muted); }
/* Three low-opacity, overlapping flat circles behind the intro line — the
   same geometry as the brand mark, at rest, sitting for a moment before it
   ever starts converging. Two accents, not one: this is the first beat of
   the page's red-then-green arc (fragmentation's cost, then the fix), so
   it opens with both in play. z-index needs the section's own stacking
   context, hence position: relative up above. */
.intro-motif {
  position: absolute; top: 50%; left: 50%; z-index: -1;
  transform: translate(-50%, -55%); width: min(420px, 80vw); height: auto;
  pointer-events: none;
}
.story-beat {
  min-height: 52vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
/* Red, not green: these three are the cost of fragmentation, not the fix —
   green stays reserved for "solve" / the CTA band / stats-strip, so it
   keeps meaning "connected" everywhere it appears. */
.story-beat strong {
  display: block; font-weight: 700;
  font-size: clamp(3.5rem, 13vw, 8rem); line-height: 1; color: var(--accent-2);
  letter-spacing: -0.04em;
}
.story-beat span { display: block; color: var(--muted); font-size: var(--text-lg); max-width: 26rem; margin: var(--space-2) auto 0; }
.story-beat .src { display: block; font-size: var(--text-sm); color: var(--muted); opacity: .75; margin-top: var(--space-1); }

/* ── Solve points + CTA band ────────────────────────────────────────── */
.solve { max-width: 46rem; margin: var(--space-7) auto; text-align: center; }
.solve h2 { font-size: clamp(var(--text-xl), 3.4vw, var(--text-2xl)); }
.solve-points {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3); margin: var(--space-5) 0; text-align: left;
}
.solve-point { border-left: 2px solid var(--accent); padding: 0 0 0 var(--space-3); }
.solve-point strong { display: block; margin-bottom: var(--space-1); }
.solve-point p { margin: 0; color: var(--muted); font-size: var(--text-md); }
.cta-band {
  /* Fixed deep green on purpose, via --band rather than --accent-deep:
     --accent-deep flips to a bright mint in dark mode (right for a hover
     state, wrong for a plane that's meant to stay constant), which is what
     was washing this band out. Flat fill — the gradient was the last piece
     of decoration left in the system. */
  background: var(--band);
  border-radius: var(--radius); padding: var(--space-6) var(--space-5); text-align: center;
  margin: var(--space-7) 0 var(--space-3); color: #fff;
}
.cta-band h2 { color: #fff; margin-top: 0; font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); }
.cta-band p { color: rgb(255 255 255 / .8); max-width: 32rem; margin: 0 auto var(--space-4); }
.cta-band .btn { background: #fff; color: var(--band) !important; border-color: #fff; }
.cta-band .btn:hover { background: var(--band-soft); border-color: var(--band-soft); }

/* ── Stats (compact strip, used on solutions) ───────────────────────── */
/* Cells separated by the grid gap showing the line colour through — a
   ruled table, not a row of floating cards. */
.stats-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--hairline); margin: var(--space-6) 0; background: var(--line);
  border: var(--hairline) solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.stats-strip > div { background: var(--surface); padding: var(--space-4) var(--space-3); text-align: center; }
.stats-strip strong {
  display: block; font-weight: 700; letter-spacing: var(--track-tight);
  font-size: clamp(var(--text-2xl), 4vw, 2.5rem); color: var(--accent); line-height: 1.1;
}
.stats-strip span { color: var(--muted); font-size: var(--text-md); }

/* ── Feature tiles ──────────────────────────────────────────────────── */
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-3); margin: var(--space-6) 0;
}
/* Hairline, no shadow, no hover lift — the border does the work. */
.tile {
  background: var(--surface); border: var(--hairline) solid var(--line);
  border-radius: var(--radius); padding: var(--space-4);
  transition: border-color .15s;
}
.tile:hover { border-color: var(--accent); }
.tile h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); color: var(--accent); }
.tile p { margin: 0; color: var(--muted); font-size: var(--text-md); }

/* ── Panels ─────────────────────────────────────────────────────────── */
.pitch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); margin: var(--space-6) 0; }
.panel {
  background: var(--surface); border: var(--hairline) solid var(--line);
  border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin: var(--space-3) 0;
}
.panel.highlight { border-color: var(--accent); }
.panel h2 { margin-top: 0; font-size: var(--text-xl); }
.panel ul { padding-left: var(--space-3); margin: 0; }
.panel li { margin: var(--space-2) 0; color: var(--ink-soft); }
.panel li strong { color: var(--ink); }

/* ── Mission statement (about page) ──────────────────────────────────── */
.mission { text-align: center; max-width: var(--measure); margin: var(--space-7) auto; }
.mission h1 { font-size: clamp(var(--text-2xl), 4.4vw, 2.75rem); line-height: 1.3; font-weight: 500; letter-spacing: normal; }
.mission-flourish { font-style: normal; font-weight: 700; color: var(--accent); }

/* ── Team (about page) ───────────────────────────────────────────────
   Circular photos: a deliberate fourth exception to the flat/no-radius
   rule, alongside the theme toggle, the brand mark, and the eyebrow dot —
   a portrait reads as a portrait only when it's round. */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3); margin: var(--space-6) 0;
}
.team-card {
  background: var(--surface); border: var(--hairline) solid var(--line);
  border-radius: var(--radius); padding: var(--space-5); text-align: center;
}
.team-photo {
  display: block; width: 96px; height: 96px; margin: 0 auto var(--space-3);
  border-radius: 50%; object-fit: cover; border: var(--hairline) solid var(--line);
}
.team-card h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.team-role {
  color: var(--accent); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--track-caps); margin: 0 0 var(--space-2);
}
.team-card p:not(.team-role) { color: var(--muted); font-size: var(--text-md); margin: 0 0 var(--space-3); }

/* ── How-it-works diagrams ──────────────────────────────────────────── */
.diagram { margin: var(--space-5) auto; text-align: center; }
.diagram svg { max-width: 100%; height: auto; }
.diagram .caption { color: var(--muted); font-size: var(--text-md); margin-top: var(--space-2); }

/* ── Prose ──────────────────────────────────────────────────────────── */
.prose { max-width: 44rem; margin: var(--space-6) auto; }
.prose h2 { font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); }
.prose p { color: var(--ink-soft); font-size: var(--text-base); }
.section-head { text-align: center; max-width: 38rem; margin: var(--space-7) auto 0; }
.section-head h2 { font-size: clamp(var(--text-xl), 3.4vw, var(--text-2xl)); margin-bottom: var(--space-1); }
.section-head p { color: var(--muted); }

/* ── API docs page ──────────────────────────────────────────────────── */
/* Audience filter: a compact segmented control, not the full-width
   .role-tabs used on auth forms — this sits inline above a table, not as
   a primary choice. Segments share one hairline border with internal
   dividers, active segment gets the accent wash — same flat-plane
   language as everything else, scaled down. */
.audience-filter {
  display: inline-flex; border: var(--hairline) solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin: var(--space-3) 0 var(--space-2);
}
.audience-filter button {
  appearance: none; background: var(--surface); border: none;
  border-left: var(--hairline) solid var(--line);
  padding: var(--space-1) var(--space-3); font-family: var(--font);
  font-size: var(--text-sm); font-weight: 500; color: var(--muted); cursor: pointer;
}
.audience-filter button:first-child { border-left: none; }
.audience-filter button:hover:not(.active) { color: var(--ink); }
.audience-filter button.active { background: var(--accent-wash); color: var(--accent); font-weight: 700; }

.api-group { margin: var(--space-5) 0; }
.api-group h2 { font-size: var(--text-xl); border-bottom: var(--hairline) solid var(--line); padding-bottom: var(--space-1); }
.endpoint {
  background: var(--surface); border: var(--hairline) solid var(--line);
  border-radius: var(--radius); padding: var(--space-3); margin: var(--space-2) 0;
}
.endpoint .sig { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.method {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius);
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--accent-wash); color: var(--accent);
}
.endpoint .path { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 600; }
.endpoint p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-md); }
.agent-example {
  margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--accent);
  background: var(--accent-wash); border-radius: 0;
  font-size: var(--text-md); color: var(--ink-soft);
}
.agent-example em { color: var(--accent); font-style: normal; font-weight: 700; }
pre.codeblock {
  background: var(--surface); border: var(--hairline) solid var(--line);
  border-radius: var(--radius); font-family: var(--font-mono);
  padding: var(--space-3); overflow-x: auto; font-size: var(--text-sm); line-height: 1.55;
}
.codeblock .comment { color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: .85em; }

/* ── Auth panels & forms ────────────────────────────────────────────── */
.auth-panel {
  max-width: 27rem; margin: var(--space-5) auto; background: var(--surface);
  border: var(--hairline) solid var(--line); border-radius: var(--radius);
  padding: var(--space-5);
}
.auth-panel h1 { margin-top: 0; font-size: var(--text-2xl); text-align: center; }
.auth-panel form { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
.auth-panel-wide { max-width: 52rem; }
.auth-panel-wide .sub { text-align: center; color: var(--muted); }
.role-picker {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  margin: var(--space-4) 0;
}
.role-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border: var(--hairline) solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--ink);
  transition: border-color .15s, background .15s;
}
.role-card:hover { border-color: var(--accent); background: var(--accent-wash); }
.role-card h2 { margin: 0; font-size: var(--text-lg); }
.role-card .btn { margin-top: auto; text-align: center; }
@media (max-width: 640px) {
  .role-picker { grid-template-columns: 1fr; }
}
/* Field labels use the same uppercase-caps treatment as every other label
   in the system. */
label {
  display: flex; flex-direction: column; gap: var(--space-1);
  font-weight: 700; font-size: var(--text-xs); color: var(--muted);
  text-transform: uppercase; letter-spacing: var(--track-caps);
}
input, select {
  padding: var(--space-2); border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  font-size: var(--text-base); font-family: var(--font); background: var(--bg);
  color: var(--ink); text-transform: none; letter-spacing: normal;
  transition: border-color .15s;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.role-tabs { display: flex; gap: var(--hairline); margin: var(--space-3) 0; }
.role-tabs a {
  flex: 1; text-align: center; padding: var(--space-2);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--muted);
  font-weight: 500; font-size: var(--text-md);
}
.role-tabs a.active { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); font-weight: 700; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.check {
  flex-direction: row !important; align-items: center; gap: var(--space-2) !important;
  font-weight: 400 !important; text-transform: none !important;
  letter-spacing: normal !important; font-size: var(--text-md) !important;
  color: var(--ink-soft);
}

/* ── Bits ───────────────────────────────────────────────────────────── */
/* Status is carried by a 2px bar on the leading edge — Swiss signage. */
.flash {
  background: var(--accent-wash); border: var(--hairline) solid var(--line);
  border-left: 2px solid var(--accent); border-radius: var(--radius);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
  font-size: var(--text-md);
}
.flash-error {
  background: var(--accent-2-wash); border-color: var(--line);
  border-left-color: var(--accent-2); color: var(--accent-2-deep);
}
.badge {
  display: inline-block; background: var(--accent-wash); color: var(--accent);
  border-radius: var(--radius); padding: var(--space-1) var(--space-2);
  font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--track-caps);
}
.fine { font-size: var(--text-sm); color: var(--muted); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
th {
  text-transform: uppercase; letter-spacing: var(--track-caps);
  font-size: var(--text-xs); color: var(--muted); font-weight: 700;
}
th, td { text-align: left; padding: var(--space-2); border-bottom: var(--hairline) solid var(--line); }
.inline { display: inline; }
.inline-form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.audit { list-style: none; padding: 0; }
.audit li { padding: var(--space-1) 0; border-bottom: var(--hairline) solid var(--line); font-size: var(--text-md); }
code {
  background: var(--accent-wash); border-radius: var(--radius); padding: 0 var(--space-1);
  font-family: var(--font-mono); font-size: .88em; word-break: break-all;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer { border-top: var(--hairline) solid var(--line); background: var(--surface); }
.footer-inner { max-width: 1080px; margin: 0 auto; padding: var(--space-6) var(--space-3); }
.footer-brand { display: flex; gap: var(--space-2); align-items: flex-start; margin-bottom: var(--space-2); }
.footer-brand strong { font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--track-tight); }
.footer-brand p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-md); }
.site-footer .fine { max-width: 44rem; }

/* ── Motion ─────────────────────────────────────────────────────────── */
/* Quiet and short. Motion clarifies a change of state; it is not decoration. */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .hero-canvas { display: none; }
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px; justify-content: center;
    width: 40px; height: 40px; padding: 0 var(--space-2);
    background: none; border: var(--hairline) solid var(--line);
    border-radius: var(--radius); cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
  .nav-toggle.open span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle.open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: var(--hairline) solid var(--line);
    padding: 0 var(--space-3) var(--space-3);
  }
  .site-nav.open { display: flex; }
  .site-nav a, .site-nav form { padding: var(--space-2) 0; border-bottom: var(--hairline) solid var(--line); }
  .site-nav a:last-child, .site-nav form:last-child { border-bottom: none; }
  .site-nav .btn { text-align: center; margin-top: var(--space-2); border-bottom: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .auth-panel { padding: var(--space-3); margin: var(--space-3) auto; }
  th, td { padding: var(--space-1); font-size: var(--text-sm); }
  .story-beat { min-height: 44vh; }
}

/* ── Elastic scroll (landing + solutions) ───────────────────────────── */
html.snap { scroll-snap-type: y proximity; }
.snap-section {
  position: relative;
  scroll-snap-align: center;
  min-height: 88vh;
  display: flex; flex-direction: column; justify-content: center;
}
@media (prefers-reduced-motion: reduce) { html.snap { scroll-snap-type: none; } }
/* The page's final stretch never snaps — free scroll out to the footer. */
.final-section { padding: 12vh 0 var(--space-6); }

/* ── Scroll cue ─────────────────────────────────────────────────────── */
.scroll-cue {
  position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  color: var(--muted); font-size: var(--text-2xs); letter-spacing: var(--track-caps);
  text-transform: uppercase; pointer-events: none;
}
.scroll-cue .chevrons { display: block; width: 18px; height: 26px; position: relative; }
.scroll-cue .chevrons::before, .scroll-cue .chevrons::after {
  content: ""; position: absolute; left: 2px; width: 10px; height: 10px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); animation: cue-drop 1.6s infinite;
}
.scroll-cue .chevrons::after { animation-delay: .25s; }
@keyframes cue-drop {
  0% { top: 0; opacity: 0; }
  35% { opacity: 1; }
  70%, 100% { top: 12px; opacity: 0; }
}

/* ── SSO buttons ────────────────────────────────────────────────────── */
.sso-row { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
.btn-sso {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none;
  font-weight: 500; font-size: var(--text-md); transition: border-color .15s;
}
.btn-sso:hover { border-color: var(--accent); }
.divider { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-xs); margin: var(--space-3) 0 var(--space-1); text-transform: uppercase; letter-spacing: var(--track-caps); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── Story-beat visuals ─────────────────────────────────────────────── */
.beat-visual { width: min(300px, 70vw); margin-bottom: var(--space-3); }
.beat-visual svg { width: 100%; height: auto; overflow: visible; }

/* A page losing its information: lines of text fade into the page —
   no movement, the ink just dissolves into the paper. */
.story-beat.revealed .line-drift { animation: line-fade 5.2s ease-in-out infinite; }
.story-beat.revealed .line-drift.l2 { animation-delay: 1.7s; }
.story-beat.revealed .line-drift.l3 { animation-delay: 3.4s; }
@keyframes line-fade {
  0%   { opacity: 1; }
  40%  { opacity: 0; }
  78%  { opacity: 0; }
  100% { opacity: 1; }
}

/* Darts: most fly past the board and miss. */
.story-beat.revealed .dart { animation: dart-fly 3.6s cubic-bezier(.2,.7,.3,1) infinite; opacity: 0; }
.story-beat.revealed .dart.d2 { animation-delay: .5s; }
.story-beat.revealed .dart.d3 { animation-delay: 1.0s; }
.story-beat.revealed .dart.d4 { animation-delay: 1.5s; }
@keyframes dart-fly {
  0%   { transform: translateX(-190px); opacity: 0; }
  8%   { opacity: 1; }
  30%  { transform: translateX(0); opacity: 1; }
  78%  { transform: translateX(0); opacity: 1; }
  95%, 100% { transform: translateX(0); opacity: 0; }
}

/* People grid: 100 appear, only 13 in colour. */
.story-beat .person { opacity: 0; }
.story-beat.revealed .person { animation: person-pop .45s ease-out forwards; animation-delay: var(--d, 0s); }
@keyframes person-pop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: var(--o, 1); transform: none; }
}
.person-lit { fill: var(--accent); --o: 1; }
.person-dim { fill: var(--muted); --o: .28; }

/* Story-intro flourish: the punchline arrives. Weight and colour carry the
   emphasis — a grotesque this neutral has no real italic to lean on. */
.intro-flourish { display: block; font-style: normal; font-weight: 700; color: var(--accent-2); opacity: 0; }
.story-intro.revealed .intro-flourish { animation: flourish-in .8s ease .5s forwards; }
@keyframes flourish-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Stat captions are quiet links to their sources. */
.story-beat a { color: inherit; text-decoration: none; }
.story-beat a:hover span { color: var(--accent); }
.story-beat a:hover .src { text-decoration: underline; }

/* ── Home page top row + sharing forms ─────────────────────────────── */
.page-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.badge-soft { background: transparent; border: var(--hairline) solid var(--accent); font-weight: 500; }
.stacked-form { display: flex; flex-direction: column; gap: var(--space-2); }
.stacked-form details { margin: var(--space-1) 0; }
.stacked-form summary { cursor: pointer; color: var(--accent); font-size: var(--text-md); }

/* ── Notification bell ─────────────────────────────────────────────── */
/* Inline SVG (Material Symbols "notifications" glyph), not an emoji — an
   emoji glyph renders in its own fixed colour on every platform and can't
   pick up --ink-soft/--accent the way the rest of .site-nav a does. */
.bell { position: relative; display: inline-flex; text-decoration: none; }
.bell svg { width: 20px; height: 20px; fill: currentColor; }
.bell-count {
  position: absolute; top: -8px; right: -10px; min-width: 16px; height: 16px;
  padding: 0 var(--space-1); border-radius: 999px; background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-2xs); font-weight: 700; line-height: 16px; text-align: center;
}
.notification-list { list-style: none; padding: 0; }
.notification-list li {
  display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline;
  padding: var(--space-2) 0; border-bottom: var(--hairline) solid var(--line);
}
.notification-list li.unread { border-left: 2px solid var(--accent); padding-left: var(--space-2); }
.notification-list .when { color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }