/* ===========================================================================
   ATLAS AI SOLUTIONS
   Organizing idea: an instrument panel for a leak you can't see.

   The product is measurement — it watches inquiries and reports what happened
   to them. So the page is built like instrumentation: monospaced labels,
   real timestamps, hairline rules, tabular figures, values that look read
   rather than written. "Techy" comes from precision, not from neon.

   Committed to a single dark theme on purpose. The instrument reading is the
   whole conceit and a light variant would be a different design, not a
   translation of this one. color-scheme is declared so native controls follow.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* --- Color -------------------------------------------------------------
     Built in OKLCH so the ramp is perceptually even and contrast behaves
     predictably when the hue moves. One hue drives everything; changing
     --h re-skins the site. 254 keeps the existing logo blue.            */
  --h: 254;

  --bg:        oklch(0.165 0.008 var(--h));   /* page */
  --bg-sunk:   oklch(0.135 0.008 var(--h));   /* recessed bands */
  --surface:   oklch(0.205 0.009 var(--h));   /* panels */
  --surface-2: oklch(0.245 0.010 var(--h));   /* raised within a panel */

  /* Elevation on dark comes from lighter fill, not shadow. Hairlines do the
     separating — that is why there is exactly one shadow token below.     */
  --line:        oklch(0.30 0.010 var(--h));
  --line-strong: oklch(0.40 0.012 var(--h));

  --ink:    oklch(0.96 0.004 var(--h));  /* headlines            15.9:1 */
  --ink-2:  oklch(0.79 0.012 var(--h));  /* body                  8.6:1 */
  --ink-3:  oklch(0.655 0.014 var(--h)); /* labels, meta          5.3:1 */
  /* ink-3 replaces the old #767b85, which measured 3.93:1 on 11-13px text
     and failed WCAG AA. Every value here is verified, not estimated.     */

  /* Dominant: structure, links, diagrams. ~30% of the page.              */
  --blue:     oklch(0.70 0.11 var(--h));
  --blue-dim: oklch(0.52 0.09 var(--h));
  --blue-wash: oklch(0.70 0.11 var(--h) / 0.10);

  /* Accent — third attempt, and this one stops fighting the page.
     Amber read as an alert; terracotta read warmer but still imported a hue
     the brand doesn't have. This is the logo's OWN top stop (#eef0f6, the pale
     ice the mark fades from) used as a filled surface.

     It works because on a dark field the accent doesn't need to be a different
     HUE — it needs to be a different VALUE. The lightest filled object on the
     page is unmistakably the most important thing on it, and taking that light
     from the logo means the whole site is now one hue end to end, which is
     what "more cohesive" actually asks for.                              */
  --accent:      oklch(0.94 0.022 var(--h));
  --accent-lift: oklch(0.98 0.012 var(--h));   /* hover */
  --accent-ink:  oklch(0.21 0.020 var(--h));   /* text ON the accent */

  /* Semantic only. Green never decorates; it means live/healthy/sent.    */
  --live: oklch(0.78 0.15 155);

  /* --- Type --------------------------------------------------------------
     1.25 (major third) from a 16px base. System stacks: zero bytes, zero
     layout shift, and the character here comes from how type is set rather
     than from which face it is. Mono is the instrumentation voice.       */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Cascadia Mono",
          Menlo, Consolas, monospace;

  --t-2xs: 0.694rem;  /* 11.1 — mono ticks only */
  --t-xs:  0.8rem;    /* 12.8 — mono labels */
  --t-sm:  0.875rem;  /* 14   — meta, captions */
  --t-base:1rem;      /* 16   — body floor */
  --t-md:  1.125rem;  /* 18   — lead paragraph */
  --t-lg:  1.375rem;  /* 22   — h3 */
  --t-xl:  1.75rem;   /* 28   — h2 small */
  --t-2xl: clamp(1.75rem, 1.1rem + 2.6vw, 2.5rem);   /* section heads */
  --t-3xl: clamp(2.25rem, 1.2rem + 4.4vw, 3.75rem);  /* hero */

  /* --- Space -------------------------------------------------------------
     Geometric on a 4px base. 64 vs 72 reads as a mistake; 64 vs 96 reads
     as a decision.                                                       */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  /* --- Form --------------------------------------------------------------
     Radii scale with the element and stay tight. Technical drawings do not
     have soft corners, and a shared 12px radius on a badge and a panel is
     one of the things that makes a page read as untouched.               */
  --r-sm: 2px; --r-md: 4px; --r-lg: 6px;

  --shadow: 0 1px 2px oklch(0.10 0.02 var(--h) / 0.5),
            0 8px 24px oklch(0.10 0.02 var(--h) / 0.35);

  --max: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--blue-wash); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* The measurement rules that run the height of the page. This is the whole
   "instrument" motif in six lines — two hairlines at the container edges,
   so every section is visibly measured against the same frame. Cheap,
   distinctive, and it does the job a decorative blur was doing before. */
.rules { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.rules::before, .rules::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
/* Offset OUTSIDE the content column. Sitting exactly on the container edge
   put the rule through the first character of every line, which reads as a
   rendering bug rather than as a margin mark. */
.rules::before { left:  calc(max(var(--gutter), 50% - var(--max) / 2) - var(--s5)); }
.rules::after  { right: calc(max(var(--gutter), 50% - var(--max) / 2) - var(--s5)); }
@media (max-width: 1100px) { .rules { display: none; } }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* Reading measure. Full-width prose is the most common layout failure on
   marketing pages and no font choice rescues it. */
.prose { max-width: 62ch; }

/* --- Motion ---------------------------------------------------------------
   Entrances only, ease-out, transform+opacity so they stay off the layout
   path. Reduced-motion users get the final state immediately.            */
.rise { opacity: 0; transform: translateY(14px); }
.rise.in { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }
.rise.d1.in { transition-delay: .06s; }
.rise.d2.in { transition-delay: .12s; }
.rise.d3.in { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .rise.in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Shared instrumentation type ------------------------------------------ */
.mono {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* Section labels hang in the left margin like a figure number — an editorial
   move that also reads as technical. Falls inline on narrow screens. */
.label {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: baseline; gap: var(--s3);
  margin-bottom: var(--s5);
}
.label .idx { color: var(--blue); }
.label::after {
  content: ""; height: 1px; flex: 1; background: var(--line);
  align-self: center;
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 650; line-height: 1.15; letter-spacing: -0.022em; }
h1 { font-size: var(--t-3xl); font-weight: 700; letter-spacing: -0.032em; line-height: 1.04; text-wrap: balance; }
h2 { font-size: var(--t-2xl); letter-spacing: -0.026em; text-wrap: balance; }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-base); font-weight: 600; letter-spacing: -0.01em; }
p { text-wrap: pretty; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px;   /* WCAG 2.5.8 target size; the submit landed at 43px */
  padding: 0.75rem 1.25rem; border-radius: var(--r-md);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s ease-out, border-color .15s ease-out, color .15s ease-out;
  font-family: inherit;
}
/* The only warm surface on the page. Ink on accent measures 8.6:1. */
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-lift); }
.btn-ghost { color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-lg { padding: 0.9rem 1.6rem; font-size: var(--t-base); }

/* --- Header --------------------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: oklch(0.165 0.008 var(--h) / 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: var(--s3); color: var(--ink);
  font-size: var(--t-base); font-weight: 600; letter-spacing: -0.02em; }
/* The mark is 28px, so the home link needs padding to reach a 44px target. */
header .brand { min-height: 44px; padding-right: var(--s2); }
.brand-mark { width: 28px; height: 28px; flex-shrink: 0; }
.nav-links { display: flex; gap: var(--s6); }
.nav-links a { font-size: var(--t-sm); color: var(--ink-3); transition: color .15s ease-out; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 860px) { .nav-links { display: none; } }
/* Below ~430px the wordmark and the CTA fight for the same row and collide.
   The mark alone still identifies the site, and the CTA is the one thing that
   must survive at every width. */
@media (max-width: 430px) {
  header nav .brand { font-size: 0; gap: 0; }
  header nav .brand-mark { font-size: 1rem; }
  nav .btn { padding: 0.6rem 0.9rem; }
}

/* --- Hero ----------------------------------------------------------------
   Asymmetric 1.15 / 1. Equal halves have no hierarchy, so the eye doesn't
   know where to begin.                                                     */
.hero { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s5); }
/* At 360px the tracked mono runs ~336px against a 320px column and orphans
   "UP" onto its own line. Dropping a step keeps it on one line; the dot moves
   to the top so it stays with the first line if it ever does wrap. */
@media (max-width: 480px) {
  .hero .eyebrow { font-size: var(--t-2xs); letter-spacing: 0.06em; align-items: flex-start; }
  .hero .eyebrow .pulse { margin-top: 5px; }
}
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--live); flex-shrink: 0;
  box-shadow: 0 0 0 0 oklch(0.78 0.15 155 / 0.6); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 70%, 100% { box-shadow: 0 0 0 7px oklch(0.78 0.15 155 / 0); } }
.hero h1 { margin-bottom: var(--s5); }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero .sub { font-size: var(--t-md); color: var(--ink-2); margin-bottom: var(--s6); max-width: 54ch; }
.hero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.hero-note { font-size: var(--t-sm); color: var(--ink-3); display: flex; align-items: center; gap: var(--s2); }
.hero-note svg { color: var(--live); flex-shrink: 0; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: var(--s7); } }

/* --- Timeline instrument ---------------------------------------------------
   The hero's right side. Not decorative: it is the product's actual output,
   shown as a readout. Timestamps are monospaced and tabular so the column
   holds still.                                                             */
/* THE one panel on the page.
   Everything else is separated by hairlines and space; this keeps a surface
   because it is the hero's focal object, and giving exactly one element
   containment is what makes it read as the focal object. When every block was
   boxed, the boxes stopped meaning anything and the page felt like a pile of
   cards. Shadow dropped — a border and a lighter fill already lift it, and on
   a dark field the shadow was invisible work. */
.readout { border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden; }
.readout-bar { display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
  background: var(--bg-sunk); }
.readout-bar .t { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3); }
.readout-bar .st { display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.06em; color: var(--live); }
.track { padding: var(--s5) var(--s4); position: relative; }
/* The spine the events hang from. */
.track::before { content: ""; position: absolute; left: calc(var(--s4) + 5px);
  top: var(--s6); bottom: var(--s6); width: 1px; background: var(--line-strong); }
.ev { display: grid; grid-template-columns: 12px 1fr auto; gap: var(--s4);
  align-items: start; padding: var(--s3) 0; position: relative; }
.ev .node { width: 11px; height: 11px; border-radius: 50%; margin-top: 5px;
  background: var(--bg); border: 2px solid var(--line-strong); }
.ev.on .node { border-color: var(--blue); background: var(--blue-dim); }
.ev.done .node { border-color: var(--live); background: var(--live); }
.ev .ttl { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink); letter-spacing: -0.008em; }
.ev .dsc { display: block; font-size: var(--t-sm); color: var(--ink-3); margin-top: 2px; }
.ev .tm { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 3px; }
.ev .tm.hit { color: var(--live); }

/* --- Metrics band ----------------------------------------------------------
   Recessed and full-bleed, separated by hairlines rather than boxed into
   three cards. Different rhythm from the sections either side of it.       */
.band { background: var(--bg-sunk); border-block: 1px solid var(--line);
  padding: var(--s7) 0; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); }
.metric { padding: 0 var(--s5); border-left: 1px solid var(--line); }
.metric:first-child { padding-left: 0; border-left: none; }
/* The whole figure carries the brand blue, not just the unit — the number is
   the thing being read, so splitting its color made the digits and the sign
   look like two different pieces of information. */
.metric .n { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; color: var(--blue);
  line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.metric .d { font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s3); max-width: 30ch; }
.metric .d em { font-style: normal; color: var(--ink); font-weight: 600; }
.metric .src { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin-top: var(--s3); }
@media (max-width: 820px) {
  .metrics { grid-template-columns: 1fr; gap: var(--s5); }
  .metric { padding: 0 0 var(--s5); border-left: none; border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: none; padding-bottom: 0; }
}

/* --- Sections --------------------------------------------------------------
   Deliberately uneven padding. Even rhythm between every section is what
   makes a page a stack instead of a composition.                           */
section { position: relative; }
.s-tall  { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.s-mid   { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.s-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }

/* Statement — the one place centered text is right, because it is short. */
.statement { font-size: clamp(1.25rem, 2.6vw, 1.875rem); line-height: 1.45;
  font-weight: 500; letter-spacing: -0.02em; max-width: 24ch; color: var(--ink-3); }
.statement b { font-weight: 500; color: var(--ink); }
.statement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.statement-note { font-size: var(--t-sm); color: var(--ink-3); border-left: 2px solid var(--blue-dim);
  padding-left: var(--s4); max-width: 46ch; }
@media (max-width: 880px) { .statement-grid { grid-template-columns: 1fr; } .statement { max-width: 30ch; } }

/* --- Steps -----------------------------------------------------------------
   Three, but not three identical cards: numbered rows on hairlines, which
   suits a sequence better than a grid does — they happen in order.         */
.steps { border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 4.5rem 1fr 1.1fr; gap: var(--s5);
  padding: var(--s6) 0; border-bottom: 1px solid var(--line); align-items: start;
  transition: background .2s ease-out; }
.step:hover { background: oklch(0.96 0.004 var(--h) / 0.022); }
/* The list must not close. With a rule under the last row, the top rule and
   that trailing one framed the three steps into a box — the exact card look
   the rest of the page was stripped of. A list should end, not shut. */
.step:last-child { border-bottom: none; }
.step .num { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.1em;
  color: var(--blue); padding-top: 4px; font-variant-numeric: tabular-nums; }
.step h3 { letter-spacing: -0.022em; }
.step .kicker { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: var(--s2); }
.step p { font-size: var(--t-sm); color: var(--ink-2); }
/* A step with a SECOND paragraph. Auto-placement drops it on a new row in
   column 1 — the 4.5rem number column — and a paragraph 72px wide is 500px of
   stacked words. Pin it under the first paragraph instead. The negative margin
   cancels the grid row-gap down to paragraph spacing: these two are one column
   of prose, not two rows of the step. */
.step p + p { grid-column: 3; margin-top: calc(var(--s3) - var(--s5)); }
@media (max-width: 880px) {
  .step { grid-template-columns: 3rem 1fr; gap: var(--s4); }
  .step p { grid-column: 2; }
  /* Two columns here, so column 3 does not exist. Same specificity as the rule
     above and later in the file, so this wins — but only by that margin; keep
     the two together if either is ever edited. */
  .step p + p { grid-column: 2; margin-top: calc(var(--s3) - var(--s4)); }
}

/* --- How + mail thread ----------------------------------------------------- */
.how-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.how-list { display: flex; flex-direction: column; }
.how-item { display: grid; grid-template-columns: 2rem 1fr; gap: var(--s4);
  padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.how-item:first-child { padding-top: 0; }
.how-item:last-child { border-bottom: none; }
.how-item .n { font-family: var(--mono); font-size: var(--t-xs); color: var(--blue);
  font-variant-numeric: tabular-nums; padding-top: 3px; }
.how-item p { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s2); }

/* De-boxed. This used to be a bordered panel containing two more bordered
   boxes — three nested frames to show two emails. Now the header is a label
   on a rule, and the messages are distinguished from each other the way an
   actual thread distinguishes them: the reply is tinted and marked, the
   incoming message is plain. */
.thread { border-top: 1px solid var(--line); }
.thread-bar { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) 0; }
.thread-bar .dot3 { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.thread-bar .t { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin-left: var(--s2); }
.thread-body { padding: var(--s4) 0 0; }
/* A form submission is structured fields, not prose — so it renders as a
   record. The visual difference from the email below it is the point: one is
   data your site collected, the other is a message Atlas sent. */
.submission { padding: 0 0 0 var(--s4); border-left: 2px solid var(--line); }
.sub-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s3); }
.sub-t { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); }
.fields { display: grid; grid-template-columns: 5rem 1fr; gap: var(--s2) var(--s4);
  margin: 0; font-size: var(--t-sm); }
.fields dt { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.fields dd { margin: 0; color: var(--ink); }
@media (max-width: 420px) {
  .fields { grid-template-columns: 1fr; gap: 0 0; }
  .fields dd { margin-bottom: var(--s3); }
}

.mail { padding: 0 0 0 var(--s4); border-left: 2px solid var(--line); }
/* The automated reply is the thing worth noticing, so it gets the brand
   rule and a wash. The inbound message stays plain — it is context. */
.mail.out { border-left-color: var(--blue); background: var(--blue-wash);
  padding: var(--s4); border-radius: 0 var(--r-md) var(--r-md) 0; }
.mail-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: var(--t-2xs); font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink-3); }
.mail.out .avatar { background: var(--blue); border-color: var(--blue); color: oklch(0.18 0.02 var(--h)); }
.mail-meta { flex: 1; min-width: 0; }
/* These sit inside inline <span> wrappers, so they need to be told to stack —
   otherwise the name and the subject line run together on one line. */
.mail-from { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.mail-sub { display: block; font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-3); letter-spacing: 0.04em; }
.mail-time { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.mail-body { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }
.gap { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0;
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); }
.gap::before, .gap::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.thread-foot { display: flex; align-items: center; justify-content: center; gap: var(--s2);
  margin-top: var(--s4); font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: 0.06em; color: var(--live); }
@media (max-width: 940px) { .how-grid { grid-template-columns: 1fr; } }

/* --- Who marquee ----------------------------------------------------------- */
.marquee { overflow: hidden; margin-top: var(--s6);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { display: flex; gap: var(--s3); width: max-content; animation: scrollx 42s linear infinite; }
.marquee:hover .mq-track, .marquee:focus-within .mq-track { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }
/* De-boxed: twenty-four bordered pills was the densest concentration of frames
   on the page. Now it reads as a running list, separated by a mark rather than
   by an outline. */
.tag { padding: var(--s2) 0; font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--s3); }
.tag::after { content: "·"; color: var(--line-strong); }
.tag b { color: var(--ink); font-weight: 600; }

/* --- Capabilities ----------------------------------------------------------
   Was eight identical cards — the most generic layout available. Now a
   two-column definition list on hairlines, which reads as a spec sheet and
   suits the instrument idea. It also lets the items differ in length
   without eight boxes stretching to match.                                 */
.caps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--line); }
.cap { padding: var(--s5) 0; border-bottom: 1px solid var(--line); display: grid;
  grid-template-columns: 1.5rem 1fr; gap: var(--s4); align-items: start; }
.cap svg { color: var(--blue); margin-top: 3px; flex-shrink: 0; }
.cap h4 { margin-bottom: var(--s2); }
.cap p { font-size: var(--t-sm); color: var(--ink-3); }
/* Same reason as .step:last-child — don't close the list. In two columns the
   final ROW is the last two items; in one column it's just the last. */
.cap:last-child { border-bottom: none; }
@media (min-width: 881px) { .cap:nth-last-child(-n+2) { border-bottom: none; } }
@media (max-width: 880px) { .caps { grid-template-columns: 1fr; } }

/* De-boxed: a band between two rules instead of a card. Same emphasis,
   one less frame. */
.audit { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: center;
  margin-top: var(--s7); padding: var(--s5) 0; border-block: 1px solid var(--line); }
.audit .mk { font-family: var(--mono); font-size: var(--t-lg); color: var(--accent); }
.audit h4 { margin-bottom: var(--s1); }
.audit p { font-size: var(--t-sm); color: var(--ink-3); }
.audit a { color: var(--accent); font-weight: 600; }
.audit a:hover { text-decoration: underline; }
@media (max-width: 600px) { .audit { grid-template-columns: 1fr; } }

/* --- Interior page head -----------------------------------------------------
   Interior pages open with a heading and a lead paragraph, not a hero. Someone
   who clicked "Services" is past being sold and wants the information. */
.page-h1 { font-size: var(--t-2xl); letter-spacing: -0.026em; max-width: 20ch; }
.lede { font-size: var(--t-md); color: var(--ink-2); margin-top: var(--s5); }
.lede em { font-style: normal; color: var(--ink); font-weight: 600; }

/* --- Scope: in / out --------------------------------------------------------
   Two columns of plain statements. Deliberately NOT two cards — the point is
   that both lists carry equal weight, and boxing the "not today" column would
   make it read as a warning rather than as information. */
.scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: start; }
@media (max-width: 820px) { .scope-grid { grid-template-columns: 1fr; gap: var(--s7); } }
.scope-h { margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.ticks { list-style: none; display: flex; flex-direction: column; gap: var(--s4); }
/* Marker is absolutely positioned rather than a grid/flex track. With
   `display:grid` on the li, an item like "<b>Text messages.</b> Everything is
   email…" becomes TWO children — the bold and the trailing text node — and the
   text lands in an implicit zero-width third column, rendering one character
   per line. Padding plus an absolute marker lets the content flow as inline
   text, which is what it is. */
.ticks li { position: relative; padding-left: 1.6rem;
  font-size: var(--t-sm); color: var(--ink-2); }
.ticks li b { color: var(--ink); font-weight: 650; }
.ticks li::before { content: ""; position: absolute; left: 0;
  width: 0.7rem; height: 0.7rem; }
/* A check for what's in, a horizontal bar for what's out — a cross reads as an
   error, and none of these are errors. They're just boundaries. */
.ticks.yes li::before {
  background: var(--live); top: 0.42rem;
  clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 72%);
  width: 0.8rem; height: 0.8rem; }
.ticks.no li::before { background: var(--ink-3); height: 2px; width: 0.75rem; top: 0.68rem; }

/* --- FAQ --------------------------------------------------------------------
   Native <details>, so every answer is in the DOM whether or not it's open.
   That matters more than the interaction: an answer engine reads the markup,
   not the clicks, and JS-gated content is content that doesn't get cited.  */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: grid; grid-template-columns: 1fr 1.25rem; gap: var(--s4);
  align-items: start; padding: var(--s5) 0; cursor: pointer; list-style: none;
  font-size: var(--t-md); font-weight: 600; color: var(--ink);
  letter-spacing: -0.015em; transition: color .15s ease-out;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
/* A drawn sign, not a glyph — rotates to a minus when open. */
.faq .sign { position: relative; width: 1.25rem; height: 1.25rem; margin-top: 4px; }
.faq .sign::before, .faq .sign::after {
  content: ""; position: absolute; background: var(--blue);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.faq .sign::before { width: 13px; height: 1.5px; }
.faq .sign::after  { width: 1.5px; height: 13px; }
.faq details[open] .sign::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.faq .answer { padding: 0 3rem var(--s5) 0; max-width: 68ch; color: var(--ink-2); }
.faq .answer p + p { margin-top: var(--s3); }
.faq .answer a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) { .faq .answer { padding-right: 0; } }

/* --- Contact ---------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.contact-copy .sub { font-size: var(--t-md); color: var(--ink-2); margin-top: var(--s4); max-width: 46ch; }
.contact-points { margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s3); }
.contact-points li { list-style: none; display: flex; gap: var(--s3); font-size: var(--t-sm); color: var(--ink-3); }
.contact-points svg { color: var(--live); flex-shrink: 0; margin-top: 4px; }

/* De-boxed: the contact section already sits on a recessed background, so a
   bordered card inside it was a frame around a frame. A top rule is enough to
   say "the form starts here". */
/* --- "What happens next" ---------------------------------------------------
   A timeline of commitments, not a feature list — so the left column is a
   time and the right is what arrives then. Numbers would imply steps the
   visitor takes; these are steps WE take, which is the reassuring part. */
.next { margin-top: var(--s7); border-top: 1px solid var(--line); padding-top: var(--s5); }
.next-h { margin-bottom: var(--s4); }
.next-list { list-style: none; display: flex; flex-direction: column; gap: var(--s4); }
.next-list li { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--s4); align-items: start; }
.next-list .w { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--blue); padding-top: 3px; }
.next-list .d { font-size: var(--t-sm); color: var(--ink-2); }
.next-foot { margin-top: var(--s5); font-size: var(--t-sm); color: var(--ink-3); max-width: 46ch; }
.next-foot a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 520px) {
  .next-list li { grid-template-columns: 1fr; gap: var(--s1); }
}

.card { border-top: 1px solid var(--line); padding: var(--s6) 0 0; }
@media (min-width: 941px) { .card { border-top: none; padding-top: 0; } }
form label { display: block; font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  margin: var(--s5) 0 var(--s2); }
form label:first-of-type { margin-top: 0; }
input, select, textarea {
  width: 100%; padding: 0.7rem 0.85rem; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink);
  font-family: inherit; font-size: var(--t-base); line-height: 1.5;
  transition: border-color .15s ease-out;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { min-height: 96px; resize: vertical; }
select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--s3);
  margin: var(--s5) 0; align-items: start; }
.consent input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--accent); }
.consent label { font-family: var(--sans); font-size: var(--t-2xs); line-height: 1.55;
  text-transform: none; letter-spacing: 0; color: var(--ink-3); margin: 0; }
.consent label a { color: var(--blue); text-decoration: underline; }
form .btn-primary { width: 100%; justify-content: center; }
.form-error { display: none; margin-top: var(--s4); padding: var(--s3) var(--s4);
  border: 1px solid oklch(0.60 0.16 25 / 0.5); border-radius: var(--r-md);
  background: oklch(0.60 0.16 25 / 0.10); color: oklch(0.82 0.10 25); font-size: var(--t-sm); }
.form-success { display: none; text-align: center; padding: var(--s6) var(--s4); }
.form-success .check { width: 44px; height: 44px; margin: 0 auto var(--s4); border-radius: 50%;
  display: grid; place-items: center; background: oklch(0.78 0.15 155 / 0.14);
  border: 1px solid oklch(0.78 0.15 155 / 0.4); color: var(--live); }
.form-success p { color: var(--ink-3); font-size: var(--t-sm); margin-top: var(--s3); }
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }

/* --- Legal documents --------------------------------------------------------
   Privacy and Terms are read, not scanned, so this is the one place on the site
   that is straight single-column prose held to a reading measure. Same tokens
   as everything else — before this they carried their own stylesheet and looked
   like a different company the moment anyone clicked the footer. */
.doc { max-width: 68ch; }
.doc h1 { font-size: var(--t-2xl); letter-spacing: -0.026em; margin-bottom: var(--s3); }
.doc .updated { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s6); }
.doc .intro { font-size: var(--t-md); color: var(--ink-2); margin-bottom: var(--s7); }
.doc h2 { font-size: var(--t-lg); margin: var(--s8) 0 var(--s3);
  padding-top: var(--s5); border-top: 1px solid var(--line); }
.doc h2:first-of-type { margin-top: var(--s6); }
.doc h3 { font-size: var(--t-base); margin: var(--s5) 0 var(--s2); color: var(--ink); }
.doc p { margin-bottom: var(--s4); color: var(--ink-2); }
.doc ul, .doc ol { margin: 0 0 var(--s4) var(--s5); display: flex;
  flex-direction: column; gap: var(--s3); }
.doc li { color: var(--ink-2); }
.doc strong { color: var(--ink); font-weight: 650; }
.doc a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* Table of contents — a jump list, not decoration, so it stays compact. */
.doc .toc { border-left: 2px solid var(--line); padding: var(--s2) 0 var(--s2) var(--s5);
  margin-bottom: var(--s7); }
.doc .toc h4 { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3); font-weight: 500; }
.doc .toc ol, .doc .toc ul { margin: 0; gap: var(--s2); list-style: none;
  columns: 2; column-gap: var(--s6); }
.doc .toc li { font-size: var(--t-sm); break-inside: avoid; }
.doc .toc a { text-decoration: none; color: var(--ink-2); }
.doc .toc a:hover { color: var(--blue); text-decoration: underline; }
@media (max-width: 620px) { .doc .toc ol, .doc .toc ul { columns: 1; } }

/* The one boxed element in a legal document — reserved for the clause a
   regulator or a client will look for specifically. */
.doc .callout { border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); padding: var(--s5); margin: var(--s5) 0; }
.doc .callout p:last-child { margin-bottom: 0; }

/* --- Footer ----------------------------------------------------------------- */
footer { border-top: 1px solid var(--line); padding: var(--s6) 0; background: var(--bg-sunk); }
.foot { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6);
  align-items: center; justify-content: space-between; }
.foot p, .foot a { font-size: var(--t-sm); color: var(--ink-3); }
.foot a:hover { color: var(--ink); }
.foot-links { display: flex; gap: var(--s5); flex-wrap: wrap; }

/* Long user content must not blow out the layout. */
h1, h2, h3, h4, p, li, td { overflow-wrap: break-word; }