/* ==========================================================================
   Aacuity — marketing site.

   DARK, DELIBERATELY, AND ONLY DARK. The reference is stedi.com — named by
   the founder — and this pass matches it BY EYE, from screenshots of the
   rendered pages, because the first pass matched their tokens and missed
   their composition. What the screenshots actually show:

   · Their dark is not neutral. The whole ground is tinted with the brand
     hue (theirs green, ours sky), and it is never flat — big radial washes
     of the accent lift whole regions of the page out of the black.
   · Surfaces step UP from the ground, visibly. Cards and product chrome are
     a real step lighter, not a hairline on the same black.
   · Big luminous objects punctuate the dark: filled accent pills, an
     accent-filled icon tile over the hero, white type at generous sizes.
   · Sections breathe. Their rhythm is ~2× ours was, and alternate sections
     read as different rooms, not different files.
   · The nav bar FLIPS when you scroll: over the hero it is part of the
     dark; from the first scroll it is a solid light bar with dark text, so
     content never slides underneath it ambiguously. We do the same (the
     ten-line script at the foot of each page toggles .is-scrolled); with
     JavaScript off the bar keeps a solid dark step + hairline instead.

   Our accent stays Aacuity's sky — it is the dot in the mark — spent where
   theirs is: the primary action, the washes, the eyebrow that matters,
   numbers in a payload. Severity is semantic colour, not accent, and does
   not count against that.

   Two rules the whole file obeys:

   1. NO EXTERNAL REQUESTS. No web font, no CDN, no analytics, no image
      file. Every mark on the page is inline SVG or a token colour. The site
      renders identically on an aeroplane.

   2. ONE THEME, PAINTED EXPLICITLY. This is a single-look commitment, not a
      missing dark/light pair: there are no prefers-color-scheme blocks on
      purpose. Every colour is a token, every token is defined once on
      :root, and the body paints its own ground, so the page holds on any
      host theme. color-scheme: dark keeps form controls and scrollbars in
      the same world.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */

:root {
  color-scheme: dark;

  /* Ground and surfaces. The reference's dark is its brand hue driven down,
     and every surface is a visible step UP from the ground — depth by
     lightness, the way their product mockups sit out of their green. Ours
     is sky driven down: a deep blue-charcoal, never a neutral wall. */
  --ground:      #0d171e;
  --ground-alt:  #122029;   /* alternate sections sit a real step LIGHTER   */
  --surface:     #16262f;   /* cards — clearly off the ground               */
  --surface-sub: #1d3140;   /* quiet rows inside a card                     */
  --code-bg:     #0a1218;   /* payloads: the darkest pane, inside a card    */
  --ink:         #f2f7fa;
  --ink-mid:     #ccd8de;   /* body copy                                    */
  --ink-mute:    #a4b6c0;   /* supporting copy, captions                    */
  --ink-faint:   #71858f;   /* units, timestamps, struck-through values     */
  --line:        rgba(148, 190, 214, .24);
  --line-soft:   rgba(148, 190, 214, .12);

  /* The scrolled header flips light, exactly as the reference's does. */
  --bar-light:      #f7fafb;
  --bar-light-ink:  #12232c;
  --bar-light-mute: #45606e;
  --bar-light-line: rgba(13, 40, 54, .12);

  /* The accent. Sky, because the mark's filled dot is sky and always has
     been. Used for interaction, the accented eyebrow, and numbers in a
     payload. If a colour on this page is not sky, grey, or a severity, it
     does not belong. */
  --accent:      #2ec7ff;
  --accent-str:  #73d3ff;
  --accent-wash: rgba(46, 199, 255, .08);
  --accent-line: rgba(46, 199, 255, .30);
  /* Ink dark enough to sit ON the accent — the reference fills its primary
     button with its colour and writes on it in its own dark. */
  --on-accent:   #06222e;

  /* Severity. Semantic, same four tones the engine enforces. On a dark
     ground a chip is tinted ink over a faint wash of itself, hairline of
     itself — never a solid block. */
  --crit-ink: #f07575;  --crit-wash: rgba(240, 117, 117, .09);  --crit-line: rgba(240, 117, 117, .32);
  --high-ink: #fabd5e;  --high-wash: rgba(250, 189, 94, .09);   --high-line: rgba(250, 189, 94, .32);
  --med-ink:  #e3d27f;  --med-wash:  rgba(227, 210, 127, .09);  --med-line:  rgba(227, 210, 127, .30);
  --low-ink:  #73d6c9;  --low-wash:  rgba(115, 214, 201, .09);  --low-line:  rgba(115, 214, 201, .30);

  --focus: #73d3ff;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --measure: 1120px;
  --gutter: 24px;
}

/* ------------------------------------------------------------------ base -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  /* Explicit, from a token: the page composites over a ground the browser
     paints in ITS theme, and a transparent body borrows the wrong one. */
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(46, 199, 255, .28); color: #fff; }

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

/* A class selector beats the UA sheet's `[hidden] { display: none }`, so any
   component that sets its own `display` has to re-assert it. The identity row
   on no-access.html is hidden until ?email= supplies a value, and without
   this it renders as an empty "Signed in as" chip. */
[hidden] { display: none !important; }

/* The header is sticky, so an in-page anchor would otherwise land with its
   heading tucked underneath it. */
[id] { scroll-margin-top: 78px; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-str); }

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

code, kbd, samp, pre { font-family: var(--mono); }

/* Dates, counts and money line up in columns, here as in the app. */
table, td, th, time, .num { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 14px; font-size: 13px; font-weight: 600;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- measure -- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 780px; }

/* ---------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.021em;
  line-height: 1.14;
  text-wrap: balance;
}

/* The reference leads BIG — its hero headline is the brightest, largest
   object on the page — and steps down fast after that. */
.h-hero { font-size: clamp(34px, 4.8vw, 56px); letter-spacing: -.032em; line-height: 1.05; }
.h-lg   { font-size: clamp(24px, 2.9vw, 32px); }
.h-md   { font-size: clamp(20px, 2.2vw, 24px); }
.h-sm   { font-size: 16px; letter-spacing: -.014em; }

p { margin: 0; }
.stack > * + * { margin-top: 14px; }

.hero-sub {
  margin-top: 16px;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.32;
  letter-spacing: -.012em;
  color: var(--ink);
  max-width: 24ch;
}
.lede {
  font-size: clamp(16px, 1.5vw, 17.5px);
  line-height: 1.62;
  color: var(--ink-mid);
  max-width: 60ch;
}
.body   { font-size: 15px;   line-height: 1.66; color: var(--ink-mute); max-width: 66ch; }
.body-s { font-size: 13.5px; line-height: 1.6;  color: var(--ink-mute); max-width: 62ch; }

/* Eyebrows are monospace: on the reference, every section label reads like
   an annotation from the build system, and that is the whole voice. */
.eyebrow {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--ink-faint);
}
.eyebrow--accent { color: var(--accent); }

.pull {
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.38;
  letter-spacing: -.016em;
  color: var(--ink);
  font-weight: 500;
  max-width: 46ch;
}

strong, b { font-weight: 600; color: var(--ink); }
em { color: var(--ink-mid); }

/* Inline literal — a payer string, a member id, an endpoint. These are the
   page's real vocabulary, so they sit on the code ground, not the page's. */
.lit {
  font-family: var(--mono);
  font-size: .885em;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1em .4em;
  color: #d9d9d9;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ header -- */

/* Two states, both of them a real bar.

   Default (also the no-JavaScript state): a solid step off the page ground
   with a hairline under it — visible against content at any scroll depth.

   .is-scrolled (added by the tiny script at the foot of each page as soon as
   the page moves): the reference's move exactly — the bar flips to a solid
   light strip with dark text, so scrolled content can never be mistaken
   for part of it. Everything inside inherits through currentColor or is
   overridden below. */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(18, 32, 41, .88);          /* --ground-alt, near-solid   */
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: background .18s ease, border-color .18s ease;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 60px;
}

.site-header.is-scrolled {
  background: var(--bar-light);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: var(--bar-light-line);
}
.site-header.is-scrolled .brand,
.site-header.is-scrolled .brand:hover,
.site-header.is-scrolled .brand-mark { color: var(--bar-light-ink); }
.site-header.is-scrolled .brand-badge {
  color: var(--bar-light-mute);
  border-color: var(--bar-light-line);
}
.site-header.is-scrolled .brand-badge b { color: var(--bar-light-ink); }
.site-header.is-scrolled .nav a { color: var(--bar-light-mute); }
.site-header.is-scrolled .nav a:hover {
  color: var(--bar-light-ink);
  background: rgba(13, 40, 54, .07);
}
.site-header.is-scrolled .nav .nav-signin {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.site-header.is-scrolled .nav .nav-signin:hover {
  background: var(--accent-str);
  border-color: var(--accent-str);
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none;
  min-width: 0;
}
.brand:hover { color: var(--ink); }
.brand-mark { flex-shrink: 0; color: var(--ink); }
.brand-name {
  font-size: 16px; font-weight: 600; letter-spacing: -.02em;
}
.brand-badge {
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint);
  border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 3px 9px; white-space: nowrap;
}
.brand-badge b { color: var(--ink-mute); font-weight: 600; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  font-size: 13.5px; font-weight: 500; color: var(--ink-mute);
  text-decoration: none; padding: 8px 12px; border-radius: 999px;
  white-space: nowrap;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.nav a:hover { color: var(--ink); background: var(--surface-sub); }
/* The sign-in is a filled accent pill in both bar states — the reference
   keeps its call to action filled even over the dark hero. */
.nav .nav-signin {
  color: var(--on-accent); font-weight: 600;
  border: 1px solid var(--accent); margin-left: 10px;
  background: var(--accent);
  padding-inline: 15px;
}
.nav .nav-signin:hover {
  border-color: var(--accent-str); background: var(--accent-str);
  color: var(--on-accent);
}
.nav .nav-hide { display: inline; }

@media (max-width: 720px) {
  .brand-badge { display: none; }
  .nav .nav-hide { display: none; }
}

/* ------------------------------------------------------------------ bands -- */

/* One rule for section rhythm, so nothing further down cancels it out. The
   screenshots said two things the token pass missed: the sections BREATHE
   (their rhythm is roughly twice what ours was), and alternate sections
   read as different rooms — a visibly lighter step, or a wash of the
   accent rising out of the dark — never the same black with a hairline. */
.band { padding-block: 104px; border-top: 1px solid var(--line-soft); }
.band--alt    { background: var(--ground-alt); }
.band--paper  {
  background:
    radial-gradient(1100px 520px at 18% 118%, rgba(46, 199, 255, .10), transparent 68%),
    var(--ground-alt);
}
.band--tight  { padding-block: 72px; }
.band--first  { border-top: 0; padding-top: 64px; }

.band-head { max-width: 68ch; }
.band-head .lede { margin-top: 14px; }

/* ------------------------------------------------------------------- hero -- */

.hero {
  border-top: 0; padding-block: 88px 96px;
  /* The reference's hero is not black with a headline on it — a broad wash
     of the brand colour rises through it, bright enough to see from across
     the room, plus faint vertical traces like their line-work. The washes
     stay off the text column's left edge so contrast never suffers. */
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(46, 199, 255, .17), transparent 66%),
    radial-gradient(900px 520px at 8% 112%, rgba(46, 199, 255, .09), transparent 62%),
    repeating-linear-gradient(90deg,
      rgba(148, 190, 214, .045) 0 1px, transparent 1px 160px),
    var(--ground);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 52px;
  align-items: start;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

.hero h1 { margin-bottom: 20px; }

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px;
}

.hero-foot {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .01em; color: var(--ink-faint);
}
.hero-foot span { display: inline-flex; align-items: center; gap: 7px; }
.hero-foot .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--low-ink); flex-shrink: 0;
  box-shadow: 0 0 6px rgba(115, 214, 201, .55);
}

/* --------------------------------------------------------------- buttons -- */

/* Pills, filled — the reference's buttons are rounded-full and SOLID, one
   in the brand colour and one in white, and they are among the brightest
   objects on the page. Hairline ghosts were the crude version. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  line-height: 1; letter-spacing: -.005em;
  padding: 13px 22px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  text-decoration: none; cursor: pointer;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.btn:hover { border-color: var(--ink-faint); color: var(--ink); background: var(--surface-sub); }
.btn--primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.btn--primary:hover { background: var(--accent-str); border-color: var(--accent-str); color: var(--on-accent); }
.btn--ghost { background: transparent; }
.btn--block { width: 100%; }

/* ------------------------------------------------------------------ cards -- */

/* A card is a REAL step up from the ground — the reference's panels are
   unmistakably lighter than the page, with generous radii. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.card--pad { padding: 24px; }
.card--flat { background: var(--ground-alt); }

.card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.card-head h3 { font-size: 13px; letter-spacing: -.01em; }
.card-head .meta {
  font-family: var(--mono);
  font-size: 10.5px; color: var(--ink-faint); letter-spacing: .01em;
}
.card-body { padding: 16px; }

/* ---------------------------------------------------------------- grids -- */

.cols { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ------------------------------------------------------------------ chips -- */

/* Monospace, tinted ink over a faint wash of itself. A severity chip on a
   dark ground is a status readout, not a sticker. */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 7px; border-radius: 4px;
  border: 1px solid transparent; white-space: nowrap;
}
.chip--crit { color: var(--crit-ink); background: var(--crit-wash); border-color: var(--crit-line); }
.chip--high { color: var(--high-ink); background: var(--high-wash); border-color: var(--high-line); }
.chip--med  { color: var(--med-ink);  background: var(--med-wash);  border-color: var(--med-line); }
.chip--low  { color: var(--low-ink);  background: var(--low-wash);  border-color: var(--low-line); }
.chip--mute { color: var(--ink-mute); background: var(--surface-sub); border-color: var(--line-soft); }

/* --------------------------------------------------------------- specimen --

   The hero's right-hand column is not an illustration of the product. It is
   the product's own change list, in the product's own chrome, rendered from
   the same tokens — because the most persuasive thing we have to show is the
   thing a customer reads on a Tuesday morning.
   -------------------------------------------------------------------------- */

.specimen {
  background: var(--surface);
  /* It sits in the hero's wash, so it gets a faint halo of the accent as
     well as depth — the way the reference's product chrome glows out of
     its ground instead of dissolving into it. */
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, .85),
    0 0 90px -18px rgba(46, 199, 255, .22);
}

.specimen-rows { display: flex; flex-direction: column; }
.specimen-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.specimen-row:first-child { border-top: 0; }
.specimen-row .who {
  font-size: 13px; font-weight: 600; color: var(--ink);
  letter-spacing: -.008em;
}
.specimen-row .what {
  grid-column: 1 / -1;
  font-size: 12.5px; color: var(--ink-mute); line-height: 1.5;
}
.specimen-row .what .was {
  color: var(--ink-faint); text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.specimen-row .when {
  font-family: var(--mono);
  font-size: 10px; color: var(--ink-faint); letter-spacing: .01em;
  padding-top: 2px;
}
.specimen-foot {
  padding: 11px 16px; border-top: 1px solid var(--line);
  background: var(--code-bg);
  font-family: var(--mono);
  font-size: 10.5px; color: var(--ink-faint); letter-spacing: .01em;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ------------------------------------------------------------------ table -- */

.table-scroll { overflow-x: auto; }
.tbl {
  width: 100%; border-collapse: collapse;
  font-size: 13px; min-width: 560px;
}
.tbl th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint);
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  background: var(--code-bg);
  white-space: nowrap;
}
.tbl td {
  padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
  color: var(--ink-mute); vertical-align: top;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.tbl td.k { font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; }

/* On a phone the third column is the one that matters and it is the one a
   560px-wide table pushes off the edge — leaving tall, half-empty rows that
   have to be scrolled sideways to read. Below 700px the table becomes the
   same stacked row the change list uses: name, severity, then the sentence. */
@media (max-width: 700px) {
  .table-scroll { overflow-x: visible; }
  .tbl { min-width: 0; display: block; }
  .tbl thead { display: none; }
  .tbl tbody { display: block; }
  .tbl tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--line-soft);
  }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl td { display: block; padding: 0; border: 0; }
  .tbl td:first-child { white-space: normal; font-size: 13.5px; }
  .tbl td:nth-child(2) { justify-self: end; }
  .tbl td:last-child { grid-column: 1 / -1; font-size: 13px; }
}

/* --------------------------------------------------------------- rows list -- */

.rows { margin: 0; display: flex; flex-direction: column; }
.rows > div {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 6px 20px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.rows > div:first-child { border-top: 0; padding-top: 0; }
.rows dt {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-faint); padding-top: 3px;
}
.rows dd { margin: 0; font-size: 13.5px; color: var(--ink-mute); }
@media (max-width: 560px) {
  .rows > div { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------- code -- */

/* Payloads are first-class content — the darkest surfaces on the page, so
   the eye lands on them the way it lands on an image elsewhere. */
.code {
  margin: 0;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--ink-mid);
  -moz-tab-size: 2; tab-size: 2;
}
.code .c-key { color: #fafafa; font-weight: 500; }
.code .c-str { color: var(--low-ink); }
.code .c-num { color: var(--accent-str); }
.code .c-com { color: var(--ink-faint); font-style: italic; }
.code .c-verb { color: var(--accent); font-weight: 600; }

.code-label {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint); margin-bottom: 8px;
}

/* ------------------------------------------------------------------- note -- */

.note {
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  border-radius: 6px;
  padding: 13px 15px;
  font-size: 13px; line-height: 1.6;
  color: var(--ink-mid);
}

.soon {
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: transparent;
  padding: 20px;
}
.soon h3 { font-size: 15px; margin-bottom: 8px; }

/* ------------------------------------------------------------------- ways -- */

.way { display: flex; flex-direction: column; height: 100%; }
.way .card-body { flex: 1; }
.way-for {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .11em; color: var(--ink-faint); margin-bottom: 6px;
}
.way h3 { font-size: 17px; margin-bottom: 10px; }
.way ul {
  margin: 14px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
.way li {
  position: relative; padding-left: 18px;
  font-size: 13px; color: var(--ink-mute); line-height: 1.55;
}
.way li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 1.5px;
  background: var(--accent);
}

/* --------------------------------------------------------------- CTA band --

   The reference closes on a field of its own colour driven almost to black.
   Ours is the same move in our hue: sky at the bottom of a well.           */

.cta {
  background:
    radial-gradient(1100px 520px at 50% 130%, rgba(46, 199, 255, .22), transparent 72%),
    #04141c;
  border-top: 1px solid var(--accent-line);
  padding-block: 88px;
}
.cta .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px; align-items: center;
}
@media (max-width: 800px) {
  .cta .wrap { grid-template-columns: minmax(0, 1fr); }
}
.cta h2 { color: #fafafa; font-size: clamp(22px, 2.6vw, 28px); }
.cta p { color: rgba(250, 250, 250, .64); font-size: 14px; margin-top: 12px; max-width: 56ch; }
.cta .btn {
  background: #fafafa; border-color: #fafafa; color: #04141c;
}
.cta .btn:hover { background: #fff; border-color: #fff; color: #000; }
.cta .btn--ghost {
  background: transparent; border-color: rgba(250, 250, 250, .28); color: #fafafa;
}
.cta .btn--ghost:hover { background: rgba(250, 250, 250, .07); border-color: rgba(250, 250, 250, .5); color: #fff; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- footer -- */

.site-footer {
  background: var(--code-bg);
  border-top: 1px solid var(--line-soft);
  padding-block: 44px 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}
.footer-grid h2 {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .11em; color: var(--ink-faint); margin-bottom: 12px;
}
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a {
  font-size: 13px; color: var(--ink-mute); text-decoration: none;
}
.footer-links a:hover { color: var(--ink); text-decoration: underline; }

.footer-bottom {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap;
}
.badge-powered {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-faint);
}
.badge-powered b { color: var(--ink-mute); }
.badge-powered svg { color: var(--ink-mute); }
.footer-bottom nav { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-bottom nav a { font-size: 12.5px; color: var(--ink-faint); text-decoration: none; }
.footer-bottom nav a:hover { color: var(--ink); }
.footer-note { font-size: 12px; color: var(--ink-faint); max-width: 62ch; }

.footer-slim { padding-block: 26px 22px; }
.footer-slim .footer-bottom { margin-top: 0; padding-top: 0; border-top: 0; }

/* ------------------------------------------------------------------ forms -- */

.form { display: flex; flex-direction: column; gap: 15px; margin-top: 18px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr); } }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-faint);
}
.field input,
.field select,
.field textarea {
  font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--code-bg);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 9px 11px; width: 100%;
  transition: border-color .13s ease;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-line); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }

.hint { font-size: 12px; color: var(--ink-faint); line-height: 1.5; }
.fineprint { font-size: 12.5px; color: var(--ink-faint); }
.form-foot { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* Honeypot: off-screen for people, present in the DOM for bots. Not
   display:none — some bots skip hidden inputs, and this one must look real. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* Form feedback. Both tones stay on the dark ground — the error borrows the
   critical severity tint, the success the calm "low" tint — so nothing ever
   flashes a bright browser-default box on this page. */
.form-status {
  margin-top: 14px;
  border: 1px solid var(--crit-line);
  border-left: 3px solid var(--crit-ink);
  background: var(--crit-wash);
  border-radius: 6px;
  padding: 12px 15px;
  font-size: 13px; line-height: 1.55;
  color: var(--ink-mid);
}
.form-status--ok {
  border-color: var(--low-line);
  border-left-color: var(--low-ink);
  background: var(--low-wash);
  padding: 20px 22px;
  outline: none;
}
.form-status--ok h3 { color: var(--ink); }
.form-status a { color: var(--accent); }

/* ------------------------------------------------- no-access page states -- */

.page { padding-block: 56px 72px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 34px;
  max-width: 860px;
  margin-inline: auto;
}
@media (max-width: 560px) { .panel { padding: 22px; } }
.panel h1 { font-size: clamp(21px, 3vw, 26px); }

.identity {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  background: var(--code-bg);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 12px; font-size: 13px; color: var(--ink-mute);
  max-width: 100%; flex-wrap: wrap;
}
.identity .label {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-faint);
}
.identity .value { font-family: var(--mono); font-size: 12.5px; color: var(--ink); word-break: break-all; }
.identity svg { color: var(--ink-faint); flex-shrink: 0; }

.choices {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-top: 30px;
}
@media (max-width: 680px) { .choices { grid-template-columns: minmax(0, 1fr); } }
.choice {
  border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 20px; background: var(--ground-alt);
  display: flex; flex-direction: column;
}
.choice h2 { font-size: 15px; margin-bottom: 10px; }
.choice p { font-size: 13.5px; color: var(--ink-mute); line-height: 1.6; }
.choice p + p { margin-top: 10px; }
.choice-foot { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }

.quiet-links {
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.quiet-links a { font-size: 13px; color: var(--ink-mute); text-decoration: none; }
.quiet-links a:hover { color: var(--ink); text-decoration: underline; }

/* The page ships with the default state in the markup and switches with a
   data attribute, so it is correct with JavaScript disabled. */
body[data-state="no-account"]  [data-when="deactivated"] { display: none; }
body[data-state="deactivated"] [data-when="no-account"]  { display: none; }


/* Vertical cards — a named healthcare type, its one-line reason, and (for the
   proven one) a Live chip parked top-right. */
.vert { position: relative; }
.vert .h-sm { margin: 0 0 6px; padding-right: 44px; }
.vert .chip { position: absolute; top: 14px; right: 14px; }
.vert .body-s { margin: 6px 0 0; }