/* Antloom — "Counsel's brief" (v1.1.23)
   The look of a well-set legal or financial document. Paper white, the
   logo's deep teal-black ink, a sober document serif for display (Source
   Serif 4), IBM Plex Sans for reading. A deep-ink hero band and a deep-ink
   contact band bookend the home page; between them each section is a
   two-column document grid on wide screens: the section's name in the left
   margin, the argument in the right column. Plex Mono survives only inside
   the product depictions on the technology page. The redesign layer is the
   last block of this file; earlier rules are the base it overrides.

   Measured contrast (WCAG, computed 2026-10-16):
     #0A2723 on #FFFFFF  15.82:1   ink on page (body text)
     #0A2723 on #F2F5F4  14.42:1   ink on tint
     #4A625D on #FFFFFF   6.57:1   mid on page (secondary)
     #4A625D on #F2F5F4   5.99:1   mid on tint
     #0E6B57 on #F2F5F4   5.87:1   teal small text on tint
     #0A4F41 on #FFFFFF   9.51:1   teal-deep links on page
     #EEF3F1 on #0A2723  14.11:1   paper text on the ink bands
     #A9BDB7 on #0A2723   8.02:1   secondary text on the ink bands
     #B54708 on #FFFFFF   5.43:1   signal flags on page
     #FFFFFF on #0A2723  15.82:1   white text on ink buttons */

/* IBM Plex Sans + IBM Plex Mono (SIL Open Font License 1.1 — see
   fonts/OFL-ibm-plex.txt) and Source Serif 4 (SIL Open Font License 1.1 —
   see fonts/OFL-source-serif-4.txt; variable weight and optical size). Self-hosted latin-subset woff2
   (Fontsource builds); no external request at runtime. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin-var-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin-var-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --page: #FFFFFF;          /* page ground */
  --tint: #F2F5F4;          /* panel wells, alternate surfaces */
  --ink: #0A2723;           /* deep teal ink — all body text and dark art */
  --mid: #4A625D;           /* secondary text */
  --line: #D8E0DD;          /* hairlines */
  --teal: #0E6B57;          /* THE accent: links, eyebrows, numbers, active states */
  --teal-deep: #0A4F41;     /* hover */
  --signal: #B54708;        /* flags / warnings */
  --ok: #0E6B57;            /* calm / ok states share the teal */

  --display: "Source Serif 4", "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", "Segoe UI", system-ui, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace;

  --shell: 1360px;

  --on-ink: #EEF3F1;        /* paper text on the ink bands */
  --on-ink-mid: #A9BDB7;    /* secondary text on the ink bands */
  --on-ink-line: rgba(238, 243, 241, 0.2); /* hairlines on the ink bands */
  --gutter: 28px;
  --header-h: 72px;         /* the sticky header's shell height; anchors land below it */
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Pseudo-elements carry motion too: bare * does not match them, so they
     are named explicitly. */
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--teal); color: #FFFFFF; }

a { color: var(--teal); }
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }

.mono {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

/* ---------- shell / sections ---------- */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}

/* Bold ledger rules: every section seam is a full-width 2px ink stroke —
   the signature of the instrument. Hairlines inside sections stay 1px. */
section { position: relative; border-top: 2px solid var(--ink); }
section.no-rule { border-top: 0; }
section > .shell {
  position: relative; /* stacks section content above the ghost numeral */
  z-index: 1;
  padding-top: clamp(90px, 12vw, 150px);
  padding-bottom: clamp(90px, 12vw, 150px);
}
/* The three home blocks between the contents strip and chapter 01 breathe
   less than the chapters: they are the summary, not the argument. */
.home-block > .shell { padding-top: clamp(64px, 7vw, 96px); padding-bottom: clamp(64px, 7vw, 96px); border-top: 1px solid var(--line); }
.contents-strip + .home-block > .shell { border-top: 0; }
/* The hero is a wrapper inside section 01, so it carries the section
   padding itself. */
.hero > .shell { padding-top: clamp(90px, 12vw, 150px); padding-bottom: clamp(90px, 12vw, 150px); }

/* ---------- outlined numerals (the ledger's wayfinding rhythm) ----------
   Giant mono figures behind each numbered section: hairline outline, no
   fill — a drafting-table trace. Pure decoration: aria-hidden, no pointer
   events, always visible (no JS involved). */
.ghost-host { overflow: hidden; }
.ghost-num {
  position: absolute;
  z-index: 0;
  top: -0.06em;
  font-family: var(--mono);
  font-size: clamp(120px, 14vw, 210px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line);
  pointer-events: none;
  user-select: none;
}
.ghost-host .ghost-num { left: 2vw; }
/* Narrow screens: the eyebrow sits where the numeral does, so the numeral
   moves to the right gutter and shrinks; it stays decoration, never a
   collision with the section label. */
@media (max-width: 900px) {
  .ghost-host .ghost-num { left: auto; right: 3vw; font-size: clamp(88px, 22vw, 120px); top: 10px; }
}

/* ---------- topbar ---------- */

.topbar {
  background: var(--page);
  border-bottom: 2px solid var(--ink);
}
.topbar .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 19px;
}
.brand svg { display: block; }
/* The brand mark and footer A-ant carry their final ink-on-white colors
   directly in the markup — no attribute-selector re-inks here, one source
   of truth. */
.topmail { text-decoration: none; color: var(--mid); transition: color 0.15s ease; }
.topmail:hover { color: var(--teal-deep); }

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

.hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  max-width: 62rem;
}
/* The hero: copy left, the verdict card right on wide screens, so the
   first screen shows the system running. Below 1100px the card flows
   under the copy at full shell width. */
.hero-card { margin-top: 40px; }
@media (min-width: 1100px) {
  .hero > .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(26rem, 36rem);
    column-gap: 48px;
    align-items: center;
  }
  .hero-card { margin-top: 0; }
  /* The verdict card needs 36rem for its longest label on one line, so the
     headline is sized to the column that remains: (shell - card - gap)
     scaled so "AI that works for you." stays one line from 1200px up. */
  .hero > .shell .slogan { font-size: clamp(2.9rem, (min(100vw, 1360px) - 680px) * 0.096, 4.2rem); }
}

/* The contents strip: the ledger's index, one ruled band under the hero.
   Five columns wide, three on tablets, dropped on phones (one scroll). */
.contents-strip { display: none; }
@media (min-width: 700px) {
  .contents-strip { display: block; }
  .contents-strip > .shell { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 28px 22px; }
  .ix-cap { padding: 0 0 6px; color: var(--teal); font-size: 11px; letter-spacing: 0.16em; }
  .ix-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
  .ix-grid a {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    padding: 12px 8px 12px 0;
    color: var(--ink);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .ix-grid a:hover { background: var(--tint); color: var(--teal-deep); }
  .ix-grid a:hover .ix-n { color: var(--teal-deep); }
  .ix-n { color: var(--teal); font-size: 12px; letter-spacing: 0.1em; }
  .ix-body { display: block; }
  .ix-t { display: block; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
  .ix-s { display: block; color: var(--mid); font-size: 14px; line-height: 1.45; margin-top: 2px; }
}
@media (min-width: 1100px) {
  .ix-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.slogan {
  font-family: var(--display);
  font-size: clamp(2.9rem, 5.6vw, 5.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.slogan span { display: block; }
.slogan .accent { color: var(--teal); }
.slogan .setup {
  font-family: var(--sans);
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--mid);
  margin-bottom: 0.55em;
  text-wrap: balance; /* no lone 'firms.' on a phone */
}
.one-liner {
  color: var(--mid);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  max-width: 36em;
}

/* THE SIGNATURE: the severed wire. A live teal line ends in a solid
   terminal; a literal gap holds the label; a dead hairline starts at a
   hollow terminal. A cut connection, drawn as one. */
.airgap-mark {
  display: flex;
  align-items: center;
  align-self: stretch;
  margin: 34px 0;
}
.airgap-mark .wire {
  position: relative;
  flex: 1 1 0;
  height: 2px;
}
.live-wire { background: var(--teal); }
.live-wire::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--teal);
}
.dead-wire { background: var(--line); }
.dead-wire::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border: 1px solid var(--line);
  background: transparent;
}
.gap-label {
  flex: 0 0 auto;
  padding: 0 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-block;
  border-radius: 4px;
  padding: 13px 26px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-solid {
  background: var(--teal);
  color: #FFFFFF;
  border: 1.5px solid var(--teal);
}
.btn-solid:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.btn-arrow { display: inline-block; margin-left: 4px; }
/* The regulation line under the hero buttons: eyebrow voice, quiet. */
.hero-reg { color: var(--teal); font-size: 11px; line-height: 1.7; letter-spacing: 0.16em; text-transform: uppercase; margin-top: -6px; }

/* ---------- eyebrows / titles / leads (shared section voice) ---------- */

.ag-eyebrow, .planet-eyebrow, .con-tag, #contact .lead {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}
.ag-eyebrow { margin-bottom: 16px; }

/* ---------- pen annotations (.anno) and rubber stamps (.stamp) ----------
   Contract with effects.js: idle classes are "anno" / "stamp"; the script's
   IntersectionObserver adds "drawn" / "stamped". Default state (no JS, or
   reduced motion) is the FINAL, fully visible state — the pre-animation
   hidden state exists only under html.js + motion allowed, exactly like the
   .reveal system below. */
.circled { position: relative; display: inline-block; }
/* The underline is a background on the inline phrase, so it breaks with
   the text: on every line it is exactly as wide as the words. (As an
   inline-block, a wrapped phrase got one line under its last row that ran
   on under the empty box to the right.) Same path, stroke and colour
   (--teal) as the svg it replaces, as an image. The svg.anno-line stays in
   the markup as the invisible scroll trigger that carries "drawn". */
.underlined {
  --uline-h: 0.42em;    /* band height, as the svg had */
  --uline-drop: 0.38em; /* calibration: band bottom below the text */
  padding-bottom: var(--uline-drop);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9 C80 4 200 12 396 6' fill='none' stroke='%230E6B57' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% var(--uline-h);
}
.underlined > .anno-line { visibility: hidden; left: auto; bottom: auto; width: 1px; height: 1px; }
/* The hero phrase starts its own line, where the inline-block put it. */
.one-liner .underlined::before { content: "\A"; content: "\A" / ""; white-space: pre; }
.anno { position: absolute; pointer-events: none; overflow: visible; }
.anno path {
  fill: none;
  stroke: var(--teal);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.anno-circle {
  top: -0.16em;
  left: -0.32em;
  width: calc(100% + 0.64em);
  height: calc(100% + 0.32em);
}
.anno-circle path { stroke-width: 3; }
.anno-line { left: 0; bottom: -0.26em; width: 100%; height: 0.42em; }
.anno-line path { stroke-width: 4; }
@media (prefers-reduced-motion: no-preference) {
  /* pathLength="1" in the markup: dashoffset 1 parks the stroke in the
     gap; 0 is fully drawn. A dash boundary still lands exactly on the path
     end at offset 1 and the round linecap paints a dot there, so the
     undrawn state is also opacity 0. The opacity switch is instant, so the
     drawing motion itself is unchanged. */
  html.js .anno path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    transition: stroke-dashoffset 0.7s ease-out, opacity 0s linear;
  }
  html.js .anno.drawn path { stroke-dashoffset: 0; opacity: 1; }
  /* The underline grows along the text, line after line. Without :has()
     the rule is skipped and the line rests fully drawn. */
  @supports selector(:has(*)) {
    html.js .underlined { background-size: 0% var(--uline-h); transition: background-size 0.7s ease-out; }
    html.js .underlined:has(> .anno.drawn) { background-size: 100% var(--uline-h); }
  }
}

.stamp {
  position: absolute;
  right: 6px;
  top: 50%;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1.5px solid var(--teal);
  border-radius: 4px;
  padding: 3px 7px;
  transform: translateY(-50%) rotate(var(--rot, -3deg));
}
@media (prefers-reduced-motion: no-preference) {
  html.js .stamp {
    opacity: 0;
    transform: translateY(-50%) rotate(var(--rot, -3deg)) scale(1.6);
    transition:
      transform 0.28s cubic-bezier(0.2, 1.4, 0.4, 1),
      opacity 0.28s cubic-bezier(0.2, 1.4, 0.4, 1);
  }
  html.js .stamp.stamped {
    opacity: 1;
    transform: translateY(-50%) rotate(var(--rot, -3deg)) scale(1);
  }
}
/* Quiet mono topbar navigation (minimalist-authority school). */
.top-nav { display: flex; gap: 26px; margin-left: auto; margin-right: 40px; }
.top-nav a { color: var(--mid); text-decoration: none; font-size: 12px; letter-spacing: 0.14em; transition: color 0.15s ease; }
.top-nav a:hover { color: var(--teal-deep); }
/* The menu button: a native <details>, so it opens without script and
   says open or closed to screen readers. It replaces the row of links
   where the row does not fit: below 900px on every page, below 1100px on
   the home page, whose row is longer. The panel hangs from the in-flow
   topbar and scrolls with the page; nothing measures geometry. */
.topbar { position: relative; z-index: 10; }
/* The header stays on screen: position sticky is laid out in the document
   and moved by the compositor, so it cannot lag during a fling. Anchors
   land below it: scroll-padding-top is the shared token plus the 1px
   bottom border, never a measured height. */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--page); }
html { scroll-padding-top: calc(var(--header-h) + 1px); }
.menu { display: none; position: relative; margin-left: 24px; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 12px; letter-spacing: 0.14em; color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::marker { content: ""; }
.menu summary:hover { color: var(--teal-deep); }
.menu summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.menu-bars { width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 15rem; background: var(--page); border: 2px solid var(--ink); display: flex; flex-direction: column; }
.menu-panel a { display: block; padding: 13px 18px; color: var(--ink); text-decoration: none; font-size: 13px; letter-spacing: 0.14em; }
.menu-panel a + a { border-top: 1px solid var(--line); }
.menu-panel a:hover, .menu-panel a:focus-visible { color: var(--teal-deep); background: var(--tint); }
.menu-panel a[aria-current="page"] { color: var(--teal); }
@media (max-width: 900px) { .top-nav { display: none; } .menu { display: block; } .topmail { margin-left: auto; } }
@media (max-width: 1099px) { .topbar-wide .top-nav { display: none; } .topbar-wide .menu { display: block; } .topbar-wide .topmail { margin-left: auto; } }
/* The technology page carries seven links; its row needs 1000px. */
@media (max-width: 999px) { .topbar-seven .top-nav { display: none; } .topbar-seven .menu { display: block; } .topbar-seven .topmail { margin-left: auto; } }
@media (max-width: 620px) { .topmail { display: none; } .menu { margin-left: auto; } }
.ag-title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.1vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 22px;
  max-width: 26ch;
}
.ag-lead { color: var(--mid); font-size: 19px; line-height: 1.6; max-width: 56ch; margin-bottom: 26px; }
.ag-note { color: var(--mid); font-size: 16px; margin-top: 30px; max-width: 62ch; }
.ag-compliance { color: var(--mid); font-size: 16px; max-width: 62ch; margin-bottom: 44px; }

/* ---------- 01 / 02: pull quote spread ---------- */

.pull-quote {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 20ch;
  border-left: 4px solid var(--ink);
  padding-left: clamp(18px, 2vw, 30px);
  margin-bottom: 44px;
}
.problem-right .ag-title {
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  margin-bottom: 26px;
  max-width: 40ch;
}
.tri-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 8px; }
.tri { max-width: 26ch; }
.tri-ref { color: var(--teal); font-size: 12px; letter-spacing: 0.14em; margin-bottom: 10px; }
.tri h3 { color: var(--ink); font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.tri p { color: var(--mid); font-size: 16px; line-height: 1.6; }
@media (min-width: 1100px) {
  .problem-spread {
    display: grid;
    grid-template-columns: 35% minmax(0, 1fr); /* trio starts at 40% with the 5% gutter */
    column-gap: 5%;
    align-items: start;
  }
  .pull-quote { margin-bottom: 0; }
  .tri-row { gap: 26px; }
}

/* ---------- insight pulls (the underlined one-liners) ---------- */

.insight-pull {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 26px;
}
/* Sub-headings inside a chapter (the race title's voice) and the second
   ag-title of a chapter, separated from what came before by a rule. */
.sub-title { margin-top: clamp(56px, 6vw, 90px); }
.platform-title, .builder-title { margin-top: clamp(64px, 7vw, 110px); padding-top: clamp(40px, 4vw, 60px); border-top: 1px solid var(--line); max-width: 30ch; }
.apps-eyebrow { margin-top: clamp(48px, 5vw, 72px); }
.files-intro { margin-top: clamp(48px, 5vw, 72px); margin-bottom: 0; }
.contrast-pull { margin-top: 44px; margin-bottom: 0; }
.steps-rail strong { color: var(--ink); font-weight: 600; }

/* ---------- product contrast cards ---------- */

.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 64px); margin: 34px 0 0; }
.con-card { max-width: 52ch; }
.con-card p { color: var(--mid); font-size: 16px; line-height: 1.6; }
.con-card strong { color: var(--ink); }
.con-card p.con-tag { margin-bottom: 10px; font-size: 12px; letter-spacing: 0.16em; color: var(--mid); }
.con-us { border-left: 3px solid var(--teal); padding-left: 18px; }
.con-us p.con-tag { color: var(--teal); }

/* ---------- chips / the pipeline row ---------- */

.plain-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  list-style: none;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--mid);
}
.pipe { margin-bottom: 6px; }
.pipe li:nth-child(even) { color: var(--teal); }
.ag-chips { margin-bottom: 26px; }

/* ---------- the app catalog (tabs / groups / rows) ---------- */

/* Degradation law: with no script the tab row is hidden and every category
   group is visible under its plain mono heading — the block is complete and
   static. effects.js adds .tabs-live on #ag-apps, which shows the tab row,
   hides the headings and collapses to the active group only. */
.ag-tabs { display: none; }
.tabs-live .ag-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.tab {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--mid);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 9px 18px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab:hover { color: var(--ink); border-color: rgba(14, 107, 87, 0.6); } /* teal at 60% */
.tab[aria-selected="true"], .tab[aria-pressed="true"] {
  color: var(--teal);
  border-color: var(--teal);
}
.ag-cat {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 22px 0 4px;
}
.ag-group + .ag-group { margin-top: 10px; }
.tabs-live .ag-cat { display: none; }
.tabs-live .ag-group { display: none; }
.tabs-live .ag-group + .ag-group { margin-top: 0; }
.tabs-live .ag-group.active { display: block; }
.ag-row { border-top: 1px solid var(--line); padding: 18px 0 22px; }
.ag-row h4 { color: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.ag-row p { color: var(--mid); font-size: 16px; margin-top: 6px; max-width: 62ch; }
.ag-row h4 + p { margin-top: 8px; }

#individuals .cta-row, #organizations .cta-row { margin-top: 30px; }

/* ---------- footnotes ---------- */

.planet-eyebrow { margin-bottom: 12px; }
.planet-foot { color: var(--mid); font-size: 19px; line-height: 1.6; max-width: 56ch; }
.foot-gap { margin-top: 30px; }
/* Two-column section splits: use the whole canvas on wide screens. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(44px, 5vw, 96px); align-items: start; }
.split-tight { gap: clamp(36px, 4vw, 72px); }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; gap: 34px; } }

/* The race, in the app windows' own language: three stacked layer bands
   (24 worker cells, 5 reviewer cells, one senior bar with thinking dots).
   IN SEQUENCE runs one 12s pass: a single BRIGHT cell travels left to
   right, each cell settling to a muted done tint behind it. DISTRIBUTED
   runs a 4s loop — three whole completed runs in the time the sequential
   lane needs for one — whole bands flashing together, the senior thinking
   the longest beat. At any instant the lanes differ: the top lane has one
   bright traveling cell, the bottom lane cycles entire runs. Resting and
   reduced motion state: every cell muted-lit, senior teal, tracks at
   final widths. */
.net-card { border: 1px solid var(--line); background: var(--tint); border-radius: 4px; padding: 24px 28px 20px; }
.bench-title { color: var(--mid); letter-spacing: 0.12em; text-transform: uppercase; font-size: 11.5px; margin-bottom: 14px; }
.race { margin-bottom: 20px; }
.race-label { color: var(--ink); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.lane { border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px 10px; background: var(--page); }
.lb { color: var(--mid); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin: 6px 0 4px; }
.lb:first-child { margin-top: 0; }
.cells { display: flex; gap: 3px; }
.cells i, .cells b { display: block; height: 10px; flex: 1 1 0; border-radius: 2px; background: rgba(14, 107, 87, 0.35); }
.cells b { height: 14px; }
.senior { display: flex; align-items: center; gap: 6px; height: 20px; border-radius: 4px; background: var(--teal); padding: 0 10px; }
.senior .sd { width: 5px; height: 5px; border-radius: 50%; background: #FFFFFF; }
.senior em { font-style: normal; color: #FFFFFF; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-left: auto; }
.timetrack { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.timetrack .fill { display: block; height: 100%; background: var(--teal); border-radius: 2px; }
.fill-seq { width: 92%; }
.fill-par { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  /* SEQUENTIAL (12s, one pass): each cell flashes BRIGHT (--teal-deep) for
     its ~0.3s moment via its --i delay, then settles to the muted done
     tint; pending cells sit at --tint. Workers span 0 to 8.3s, reviewers
     27.7 to 34s, the senior thinks 34.4 to 38.6s then lights --teal; the
     bar creeps to 92% by 96.5%; the tail resets everything to --tint.
     40s vs the 4s distributed loop = TEN jobs below per one job here,
     matching the copy: about 30 seconds per agent, thirty in a row, is
     minutes; distributed is about half a minute per job. */
  .lane-seq .cw i { animation: cell-seq 40s linear infinite; animation-delay: calc(var(--i) * 1.12s); }
  .lane-seq .cr b { animation: cell-seq 40s linear infinite; animation-delay: calc(27.7s + var(--i) * 1.33s); }
  .lane-seq .senior { animation: senior-seq 40s linear infinite; }
  /* The label is either fully hidden or fully white on a teal bar: never a
     half-faded state (WCAG contrast). steps(1, end) holds each value and
     jumps exactly when the bar is fully coloured / starts fading. */
  .lane-seq .senior em { animation: em-seq 40s steps(1, end) infinite; }
  .lane-seq .sd { animation: sd-seq 40s linear infinite; animation-delay: calc(var(--i) * 0.5s); }
  .fill-seq { animation: bar-seq 40s linear infinite; }
  /* DISTRIBUTED (4s — TEN completed runs per sequential pass): all cells
     flash bright together, settle muted; reviewers follow; the senior goes
     --teal from 28% with dots blinking through 54% (its think is the
     longest beat); everything fades to --tint at the tail and the bar
     fills 0 to 100% by 72%, resetting at 96%. */
  /* No wave: a layer fires as ONE block — all 24 workers truly at once,
     then all 5 reviewers at once, then the senior. Layers, not ripples. */
  .lane-par .cw i { animation: cell-par 4s linear infinite; }
  .lane-par .cr b { animation: cell-par-r 4s linear infinite; }
  .lane-par .senior { animation: senior-par 4s linear infinite; }
  .lane-par .senior em { animation: em-par 4s steps(1, end) infinite; }
  .lane-par .sd { animation: sd-par 4s linear infinite; animation-delay: calc(var(--i) * 0.12s); }
  .fill-par { animation: bar-par 4s linear infinite; }
}
@keyframes cell-seq {
  0% { background: var(--tint); }
  0.3% { background: var(--teal-deep); }
  2.6% { background: var(--teal-deep); }
  4.2% { background: rgba(14, 107, 87, 0.35); }
  96.5% { background: rgba(14, 107, 87, 0.35); }
  97%, 100% { background: var(--tint); }
}
@keyframes senior-seq {
  0%, 86% { background: var(--tint); }
  86.7% { background: var(--teal-deep); }
  95% { background: var(--teal-deep); }
  95.8% { background: var(--teal); }
  97% { background: var(--teal); }
  98%, 100% { background: var(--tint); }
}
/* Visible exactly while senior-seq is teal-deep or teal (86.7% to 97%). */
@keyframes em-seq {
  0% { opacity: 0; }
  86.7% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes sd-seq {
  0%, 86.7% { opacity: 0.25; }
  88.2% { opacity: 1; }
  89.7% { opacity: 0.25; }
  91.2% { opacity: 1; }
  92.7% { opacity: 0.25; }
  94.2% { opacity: 1; }
  95.8% { opacity: 1; }
  100% { opacity: 0.25; }
}
@keyframes bar-seq {
  0% { width: 0%; }
  96.5% { width: 92%; }
  100% { width: 92%; }
}
@keyframes cell-par {
  0%, 2% { background: var(--tint); }
  6% { background: var(--teal-deep); }
  14% { background: var(--teal-deep); }
  22% { background: rgba(14, 107, 87, 0.35); }
  96% { background: rgba(14, 107, 87, 0.35); }
  100% { background: var(--tint); }
}
@keyframes cell-par-r {
  0%, 16% { background: var(--tint); }
  20% { background: var(--teal-deep); }
  26% { background: var(--teal-deep); }
  30% { background: rgba(14, 107, 87, 0.35); }
  96% { background: rgba(14, 107, 87, 0.35); }
  100% { background: var(--tint); }
}
@keyframes senior-par {
  0%, 26% { background: var(--tint); }
  28% { background: var(--teal); }
  96% { background: var(--teal); }
  100% { background: var(--tint); }
}
/* Visible exactly while senior-par is teal (28% to 96%). */
@keyframes em-par {
  0% { opacity: 0; }
  28% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes sd-par {
  0%, 28% { opacity: 0.25; }
  32% { opacity: 1; }
  36% { opacity: 0.25; }
  40% { opacity: 1; }
  44% { opacity: 0.25; }
  48% { opacity: 1; }
  54%, 96% { opacity: 1; }
  100% { opacity: 0.25; }
}
@keyframes bar-par {
  0% { width: 0%; }
  72% { width: 100%; }
  95% { width: 100%; }
  96% { width: 0%; }
  100% { width: 0%; }
}

/* 03: the demo window sits directly on the page (its own chrome is the
   only frame); the four steps are one ruled rail, not four more boxes. */
.ag-apps { position: relative; z-index: 1; margin-top: 8px; }
.steps-rail {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 30px;
  margin-top: 34px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.steps-rail li { position: relative; color: var(--mid); font-size: 15.5px; line-height: 1.5; padding-right: 24px; }
.step-n { display: block; color: var(--teal); font-size: 12px; letter-spacing: 0.12em; margin-bottom: 6px; }
.steps-rail li:not(:last-child)::after { content: "\2192"; position: absolute; right: 6px; top: 26px; color: var(--teal); font-size: 15px; }
@media (max-width: 900px) { .steps-rail { grid-template-columns: 1fr 1fr; row-gap: 18px; } .steps-rail li:nth-child(2)::after { content: none; } }
@media (max-width: 620px) { .steps-rail { grid-template-columns: 1fr; } .steps-rail li::after { content: none !important; } }

/* The facts as bento tiles: scannable modules, not a text strip. */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 26px; }
@media (min-width: 901px) { .facts-nine, .facts-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts-nine { margin-bottom: 30px; }
.facts-three { margin: 8px 0 34px; }
/* Home block B: the two editions as one fact tile each, scaled up. */
.edition-card { padding: 28px 30px 24px; }
.edition-card h3 { font-family: var(--display); font-size: clamp(1.35rem, 1.8vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 14px; }
.edition-card p { font-size: 16px; line-height: 1.6; margin-bottom: 12px; }
.edition-card p:last-child { margin-bottom: 0; }
.edition-card strong { color: var(--ink); }
.edition-card .tri-ref { margin-bottom: 14px; }
/* Home block C: the link under the three teasers. */
.teaser-foot { text-align: center; margin-top: clamp(40px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--line); max-width: none; }
.nb { white-space: nowrap; }
/* No lone last word in a headline: the browser balances the lines. */
.slogan span, .ag-title, .pull-quote, .tri h3, .race-title, .insight-pull, .edition-card h3, .fact h3, .ix-t { text-wrap: balance; }
/* 05: the slogan line between the mission's movements. */
.slogan-line { margin: 8px 0 clamp(40px, 4vw, 56px); }
.tri strong { color: var(--ink); }
.tri p + p { margin-top: 12px; }
.fact { background: var(--page); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px; }
.fact h3 { color: var(--ink); font-size: 15.5px; font-weight: 600; margin-bottom: 5px; }
.fact p { color: var(--mid); font-size: 14px; line-height: 1.5; }
.fact-wide { grid-column: 1 / -1; }
@media (max-width: 620px) { .facts { grid-template-columns: 1fr; } }

/* Regulator map: a stamped checklist — what the regulator asks, what the
   system answers, ANSWERED at the right edge of every row. */
.reg-map { border-top: 1px solid var(--line); margin: 18px 0 26px; }
.reg-row { position: relative; display: grid; gap: 6px; padding: 14px 104px 14px 0; border-bottom: 1px solid var(--line); transition: background-color 0.15s ease; }
/* Real rubber stamps never land straight twice. */
.reg-row:nth-child(1) .stamp { --rot: -4deg; }
.reg-row:nth-child(2) .stamp { --rot: 2deg; }
.reg-row:nth-child(3) .stamp { --rot: -2deg; }
.reg-row:nth-child(4) .stamp { --rot: 3deg; }
.reg-row:nth-child(5) .stamp { --rot: -3deg; }
/* 02 the race band: asymmetric split, text left, the two run diagrams right. */
@media (min-width: 1101px) {
  #organizations .race-band { grid-template-columns: 38% 54%; column-gap: 8%; }
}
.race-band { margin-top: clamp(56px, 6vw, 90px); padding-top: clamp(40px, 4vw, 60px); border-top: 1px solid var(--line); }
.race-title { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin-bottom: 18px; }
.reg-row:hover { background: var(--tint); }
/* Rows without a stamp need no stamp column. */
.reg-row:not(:has(.stamp)) { padding-right: 0; }
.reg-ask { color: var(--teal); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 3px; }
.reg-ans { color: var(--mid); font-size: 16px; }
@media (max-width: 700px) { .reg-row { grid-template-columns: 1fr; gap: 6px; } }
/* Full shell width ledgers: label column left, answer right. */
.reg-row:nth-child(6) .stamp { --rot: 2deg; }
.reg-row:nth-child(7) .stamp { --rot: -4deg; }
.stamp-open { color: var(--signal); border-color: var(--signal); }
@media (min-width: 701px) { .ask-map .reg-row { grid-template-columns: 22rem minmax(0, 1fr); column-gap: 32px; align-items: baseline; } }
.reg-close { margin-top: 8px; max-width: 62ch; }
/* A ledger directly after a pull quote spread or its lead-in line. */
.problem-spread + .ag-compliance { margin-top: 56px; margin-bottom: 0; }
.problem-spread + .reg-map { margin-top: 40px; }
.ag-compliance + .reg-map { margin-top: 0; }
.reg-intro { margin-top: clamp(56px, 6vw, 90px); margin-bottom: 0; }
.reg-map + .insight-pull { margin-top: 34px; }

/* ---------- contact ---------- */

#contact .lead {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 20px;
}
.big-mail {
  font-family: var(--mono);
  font-size: clamp(1.35rem, 5vw, 4.2rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.18em;
}
.big-mail:hover { color: var(--teal-deep); text-decoration-color: var(--teal-deep); }
/* Contact: one column at every width; the email block, its routes, and
   the label sit at the shell's left edge. */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: start; }
.routes { margin-top: 34px; border-top: 1px solid var(--line); max-width: 60ch; }
.route {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 14px 8px 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.route-label { color: var(--teal); font-size: 12px; letter-spacing: 0.14em; }
.route-text { color: var(--mid); font-size: 16px; line-height: 1.5; }
/* Hover tint only where hover exists: a tap on touch must not leave it stuck. */
@media (hover: hover) {
  .route:hover { background: var(--tint); color: var(--teal-deep); }
  .route:hover .route-text { color: var(--teal-deep); }
}
@media (max-width: 620px) { .route { grid-template-columns: 1fr; gap: 4px; } }

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

footer { border-top: 2px solid var(--ink); }
footer .shell {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 32px;
  padding-bottom: 36px;
}
footer .wordmark {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 26px;
}
footer .foot-note { margin-left: auto; color: var(--mid); text-align: right; }

/* ---------- hover states (one shared restrained lift) ---------- */

.fact {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.fact:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 107, 87, 0.5); /* hairline shifts halfway to teal */
  box-shadow: 0 4px 14px rgba(10, 39, 35, 0.06);
}

/* ---------- entrance motion (scroll reveal + the severed-wire draw) ----------
   Everything here is scoped under html.js (added by effects.js as its very
   first statement) AND under prefers-reduced-motion: no-preference. With no
   script, or with reduced motion, none of it applies: the page is fully
   visible and static by default. Nothing below hides an element except
   .reveal, which effects.js only assigns after its 1200ms failsafe is
   already scheduled. */

@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.48s ease-out, transform 0.48s ease-out;
    /* Per-element stagger arrives as an inline transition-delay. */
  }
  html.js .reveal.revealed { opacity: 1; transform: none; }

  /* The severed wire, orchestrated: the live wire draws in from the left,
     then the gap label fades in, then the dead wire settles from 0.55 to
     full. fill:both holds each "from" state through its delay; without
     .loaded (script died, reduced motion) the mark is whole and static. */
  html.js.loaded .live-wire {
    transform-origin: left;
    animation: wire-draw 0.7s ease-out 0.2s both;
  }
  html.js.loaded .gap-label { animation: gap-fade 0.4s ease-out 0.85s both; }
  html.js.loaded .dead-wire { animation: dead-settle 0.5s ease-out 1.05s both; }
}
@keyframes wire-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gap-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dead-settle { from { opacity: 0.55; } to { opacity: 1; } }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .contrast { grid-template-columns: 1fr; }
}
/* Tablets keep the three binds side by side; below 700px they stack and
   each bind takes the full measure instead of a 26ch strip beside empty
   canvas. */
@media (max-width: 700px) {
  .tri-row { grid-template-columns: 1fr; gap: 26px; }
  .tri { max-width: 60ch; }
}
@media (max-width: 620px) {
  .slogan { font-size: clamp(2.5rem, 2rem + 2.6vw, 3.2rem); }
  footer .shell { flex-wrap: wrap; }
  footer .foot-note { margin-left: 0; text-align: left; }
  /* Phone rhythm: the desktop section pacing leaves screen-high gaps on a
     390px column, so every section breathes less and the wells hug the
     gutter. */
  .shell { padding-left: 20px; padding-right: 20px; }
  section > .shell, .hero > .shell { padding-top: 64px; padding-bottom: 64px; }
  .home-block > .shell { padding-top: 56px; padding-bottom: 56px; }
  .pull-quote { margin-bottom: 32px; }
  .net-card { padding: 18px 16px 14px; }
  .ag-apps { padding: 40px 12px 14px; }
  .airgap-mark { margin: 26px 0; }
  .cta-row .btn { width: 100%; text-align: center; }
  /* The section eyebrow wraps before the ghost numeral in the right gutter. */
  .ghost-host > .shell > .ag-eyebrow:first-child, .hero-left > .ag-eyebrow { max-width: calc(100% - 26vw); }
}

/* The run log: each lane's live status line, the agentic system speaking
   in the app windows' own voice. Stacked spans; keyframes pick the phase.
   Resting/reduced motion state: "answer ready" (the system finished). */
.race-status { position: relative; height: 17px; margin: 8px 0 2px; }
.race-status .st { position: absolute; left: 0; top: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid); opacity: 0; }
.race-status .s4 { color: var(--teal); font-weight: 500; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* Status lines and verdict chips step (never cross-fade): text is either
     fully hidden or at full contrast. */
  .lane-seq + .race-status .s1 { animation: st-seq1 40s steps(1, end) infinite; }
  .lane-seq + .race-status .s2 { animation: st-seq2 40s steps(1, end) infinite; }
  .lane-seq + .race-status .s3 { animation: st-seq3 40s steps(1, end) infinite; }
  .lane-seq + .race-status .s4 { animation: st-seq4 40s steps(1, end) infinite; }
  .lane-par + .race-status .s1 { animation: st-par1 4s steps(1, end) infinite; }
  .lane-par + .race-status .s2 { animation: st-par2 4s steps(1, end) infinite; }
  .lane-par + .race-status .s3 { animation: st-par3 4s steps(1, end) infinite; }
  .lane-par + .race-status .s4 { animation: st-par4 4s steps(1, end) infinite; }
}
@keyframes st-seq1 { 0%, 1% { opacity: 0; } 2%, 67% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes st-seq2 { 0%, 68% { opacity: 0; } 69%, 84% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes st-seq3 { 0%, 85% { opacity: 0; } 86%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes st-seq4 { 0%, 96.5% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes st-par1 { 0%, 3% { opacity: 0; } 5%, 18% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes st-par2 { 0%, 19% { opacity: 0; } 21%, 27% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes st-par3 { 0%, 28% { opacity: 0; } 30%, 53% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes st-par4 { 0%, 55% { opacity: 0; } 57%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
/* Phones: the longest status line must fit the lane; declared after the
   base rule above so it wins on source order. */
@media (max-width: 620px) {
  .race-status .st { font-size: 10px; letter-spacing: 0.04em; }
}

/* ---------- 02 the verdict card ----------
   Five reader rows (lens on the left, verdict chip on the right), one chip
   dissenting in the signal color; five reviewer segments; the senior bar.
   Resting and reduced motion state: every chip shown, the vote full, the
   senior sealed. Motion: 14s loop, readers 0 to 30%, dissent flagged at
   30%, vote 42 to 60%, seal at 66%, hold, reset at 97%. */
.vd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); }
.vd-row:first-of-type { border-top: 0; }
.vd-lens { color: var(--ink); font-size: 10.5px; letter-spacing: 0.1em; }
.vd-chip { font-size: 10px; letter-spacing: 0.08em; color: var(--teal); border: 1px solid rgba(14, 107, 87, 0.45); border-radius: 3px; padding: 2px 7px; white-space: nowrap; }
.vd-chip.vd-dissent { color: var(--signal); border-color: var(--signal); font-weight: 500; }
.vd-vote { display: flex; align-items: center; gap: 12px; margin: 2px 0 4px; }
.vd-bar { display: flex; gap: 3px; flex: 1 1 0; }
.vd-bar i { display: block; height: 14px; flex: 1 1 0; border-radius: 2px; background: rgba(14, 107, 87, 0.35); }
.vd-tally { color: var(--ink); font-size: 10.5px; letter-spacing: 0.1em; white-space: nowrap; }
.vd-senior em { margin-left: 8px; }
@media (max-width: 620px) {
  .vd-tally { white-space: normal; font-size: 9.5px; }
  .vd-bar { min-width: 96px; }
  .vd-senior em { font-size: 8.5px; }
}
@media (prefers-reduced-motion: no-preference) {
  .lane-vd .vd-chip { animation: vd-chip 14s steps(1, end) infinite; animation-delay: calc(var(--i) * 0.7s); }
  .lane-vd .vd-chip.vd-dissent { animation-name: vd-dissent; }
  .lane-vd .vd-bar i { animation: vd-seg 14s linear infinite; animation-delay: calc(var(--i) * 0.2s); }
  .lane-vd .vd-tally { animation: vd-late 14s steps(1, end) infinite; }
  .lane-vd .vd-senior { animation: vd-senior 14s linear infinite; }
  .lane-vd .vd-senior em { animation: em-vd 14s steps(1, end) infinite; }
  .lane-vd .sd { animation: sd-vd 14s linear infinite; animation-delay: calc(var(--i) * 0.4s); }
  .lane-vd + .race-status .s1 { animation: st-vd1 14s steps(1, end) infinite; }
  .lane-vd + .race-status .s2 { animation: st-vd2 14s steps(1, end) infinite; }
  .lane-vd + .race-status .s3 { animation: st-vd3 14s steps(1, end) infinite; }
  .lane-vd + .race-status .s4 { animation: st-vd4 14s steps(1, end) infinite; }
}
/* Chips: hidden until their reader finishes (delay), then held to the reset. */
@keyframes vd-chip { 0% { opacity: 0; } 8% { opacity: 0; } 9.5% { opacity: 1; } 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
/* The dissent lands like the others, then flares at 30% when the flag is raised. */
@keyframes vd-dissent {
  0%, 8% { opacity: 0; background: transparent; }
  9.5% { opacity: 1; }
  19% { background: transparent; color: var(--signal); }
  21% { background: var(--signal); color: #FFFFFF; }
  27% { background: var(--signal); color: #FFFFFF; }
  29% { background: transparent; color: var(--signal); }
  96% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes vd-seg { 0% { background: var(--tint); } 42% { background: var(--tint); } 44% { background: var(--teal-deep); } 50% { background: var(--teal-deep); } 54% { background: rgba(14, 107, 87, 0.35); } 96% { background: rgba(14, 107, 87, 0.35); } 97%, 100% { background: var(--tint); } }
@keyframes vd-late { 0%, 60% { opacity: 0; } 62%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
/* White label visible exactly while vd-senior is teal-deep or teal (66% to 96%). */
@keyframes em-vd { 0% { opacity: 0; } 66% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes vd-senior { 0%, 64% { background: var(--tint); } 66% { background: var(--teal-deep); } 74% { background: var(--teal-deep); } 76% { background: var(--teal); } 96% { background: var(--teal); } 97%, 100% { background: var(--tint); } }
@keyframes sd-vd { 0%, 64% { opacity: 0.25; } 67% { opacity: 1; } 70% { opacity: 0.25; } 73% { opacity: 1; } 76%, 96% { opacity: 1; } 100% { opacity: 0.25; } }
@keyframes st-vd1 { 0%, 1% { opacity: 0; } 2%, 28% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes st-vd2 { 0%, 29% { opacity: 0; } 31%, 40% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes st-vd3 { 0%, 41% { opacity: 0; } 43%, 63% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes st-vd4 { 0%, 65% { opacity: 0; } 67%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* ---------- 04 our mission ---------- */
.planet-link { color: var(--teal); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 0.16em; white-space: nowrap; }
.planet-link:hover { color: var(--teal-deep); text-decoration-color: var(--teal-deep); }
.gift-map { margin-top: 18px; }
/* Phones: the senior bar grows to fit its label on two lines instead of
   clipping the second line inside a 20px bar; the status line drops half
   a pixel so the longest one no longer clips at 390. */
@media (max-width: 620px) {
  .senior { height: auto; min-height: 20px; padding: 4px 10px; align-items: flex-start; }
  .senior .sd { margin-top: 5px; }
  .senior em { white-space: normal; line-height: 1.35; text-align: right; }
  .race-status .st { font-size: 9.5px; }
}

/* ---------- the selling page (index.html) and the Antloom core intro ---------- */

/* The hero's product index: the three applications, each by its promise. */
.app-index { padding: 22px 26px 8px; }
.app-index .bench-title { margin-bottom: 4px; }
.app-index a { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.app-index .bench-title + a { border-top: 0; }
.ai-n { color: var(--teal); font-size: 12px; letter-spacing: 0.1em; }
.ai-t { display: block; font-family: var(--display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1.2; transition: color 0.15s ease; }
.ai-s { display: block; color: var(--mid); font-size: 15.5px; line-height: 1.45; margin-top: 4px; }
@media (hover: hover) { .app-index a:hover .ai-t { color: var(--teal-deep); } }

/* The applications: a static head, then one section per application. */
.apps-head > .shell { position: relative; z-index: 1; padding-top: 70px; padding-bottom: clamp(48px, 5vw, 72px); }
@media (min-width: 1100px) { .hero-apps > .shell { grid-template-columns: minmax(0, 1fr) minmax(24rem, 30rem); } }
.app > .shell { padding-top: 70px; }
.app-label { margin: clamp(36px, 4vw, 52px) 0 14px; }
.ag-title + .app-label { margin-top: 8px; }
/* "What it changes": the ledger with a feature headline in the label
   column and no stamp column. */
.change-map .reg-row, .law-map .reg-row { padding-right: 0; }
.change-map .reg-ask { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; text-transform: none; color: var(--ink); padding-top: 0; }
.law-map .reg-row { padding-top: 10px; padding-bottom: 10px; }
.law-map + .ag-lead { margin-top: 8px; }
.sub-ledger { list-style: none; }
.reg-ans > p + .sub-ledger { border-top: 1px solid var(--line); margin-top: 8px; }
.reg-ans > .sub-ledger:first-child > li:first-child { padding-top: 0; }
.sub-ledger li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.sub-ledger li:last-child { border-bottom: 0; }
@media (min-width: 901px) {
  .sub-ledger-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .sub-ledger-grid li:last-child { border-bottom: 1px solid var(--line); }
}
.app-foot { margin-top: 30px; font-size: 17px; }

/* Editions: each card carries its launch badge, static and always visible. */
.edition-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.edition-top .tri-ref { margin-bottom: 0; }
.soon { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; color: var(--teal); border: 1.5px solid var(--teal); border-radius: 4px; padding: 3px 7px; transform: rotate(-3deg); }
.edition-card .cta-row { margin-top: 22px; }
/* What each edition includes: Tijn's edition-to-application mapping. */
.edition-card p.edition-label { color: var(--teal); font-size: 11.5px; letter-spacing: 0.14em; margin: 20px 0 6px; }
.edition-apps { list-style: none; border-top: 1px solid var(--line); margin-bottom: 4px; }
.edition-apps li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 16px; font-weight: 600; }
.edition-apps a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.edition-apps a:hover { color: var(--teal-deep); text-decoration-color: var(--teal-deep); }
.edition-next li { color: var(--mid); font-weight: 400; }
.edition-apps + p { margin-top: 18px; }
.edition-note { margin-top: clamp(32px, 4vw, 48px); }

/* Footer link to the technology page (the top navigation hides on phones). */
.foot-link { color: var(--teal); text-decoration: underline; text-underline-offset: 0.2em; }
.foot-link:hover { color: var(--teal-deep); }

/* technology.html: the page intro naming it Antloom core. */
.core-intro > .shell { padding-top: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.core-intro .ag-eyebrow { margin-bottom: 6px; }
.core-intro-line { color: var(--mid); font-size: 17px; }

@media (max-width: 620px) {
  .apps-head > .shell { padding-top: 64px; padding-bottom: 40px; }
  .app > .shell { padding-top: 56px; }
  .app-index { padding: 16px 16px 4px; }
  .ai-t { font-size: 1.25rem; }
  footer .foot-link { flex-basis: 100%; }
}

/* ---------- the full brief (index.html, 2026-10-11) ---------- */

/* The hero headline is the one-line pitch: a sentence, not three beats,
   so it sets smaller than the beat headline at every width. */
.slogan-pitch { font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1.06; }
@media (min-width: 1100px) {
  .hero > .shell .slogan-pitch { font-size: clamp(2.4rem, (min(100vw, 1360px) - 680px) * 0.078, 3.3rem); }
}
@media (max-width: 620px) {
  .slogan-pitch { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 2.6rem); }
}


/* The problem: the turn into the three answers. */
.problem-turn { color: var(--ink); font-weight: 600; margin-top: 8px; }

/* The compliance family: each member app under a ruled sub-head. */
.sub-app { margin-top: clamp(40px, 4.5vw, 60px); }
.sub-app-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 40ch;
  padding-top: 18px;
  margin-bottom: 18px;
  border-top: 2px solid var(--ink);
  text-wrap: balance;
}
.family-turn { max-width: 40ch; }

/* =====================================================================
   COUNSEL'S BRIEF — the redesign layer (v1.1.23). Overrides the base
   above. Both pages share one system: the document grid, the short ink
   rule that opens each section, the ink bands and the type. Only what
   index.html alone has (its application index on the hero, its narrower
   hero card) is scoped with body:has(> .topbar-wide), which only
   index.html matches.
   ===================================================================== */

/* ---------- type: serif display, sans reading, no tracked mono chrome ---------- */

body { font-size: 17px; line-height: 1.6; }
a { color: var(--teal-deep); }
h1, h2, h3 { font-optical-sizing: auto; }

.slogan, .ag-title, .pull-quote, .insight-pull, .race-title, .sub-app-title,
.edition-card h3, .ai-t, .big-mail {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.012em;
}
.slogan { line-height: 1.04; }
.slogan .accent { font-style: italic; color: var(--teal-deep); }
.slogan .setup { font-family: var(--sans); font-weight: 600; font-size: clamp(1rem, 1.2vw, 1.15rem); letter-spacing: 0; line-height: 1.4; margin-bottom: 1.2em; }
.ag-title { font-size: clamp(2rem, 1.25rem + 2vw, 3.25rem); line-height: 1.08; max-width: 22ch; margin-bottom: 26px; }
.insight-pull, .pull-quote { font-style: italic; font-size: clamp(1.45rem, 1.1rem + 0.9vw, 2rem); line-height: 1.25; border-left: 0; padding-left: 0; max-width: 32ch; }
.race-title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); line-height: 1.15; }
.sub-app-title { font-size: clamp(1.4rem, 1.05rem + 0.9vw, 1.9rem); line-height: 1.2; border-top: 1px solid var(--ink); padding-top: 22px; }
.edition-card h3 { font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.85rem); line-height: 1.15; }
.ag-lead { font-size: 19px; line-height: 1.6; }

/* The chrome labels were tracked uppercase mono. They become plain
   sentence-case sans: a label is read, not decoded. Mono stays only in the
   product depictions (races, verdict card, app windows, tabs). */
.top-nav a, .menu summary, .menu-panel a, .topmail, .ag-eyebrow, .tri-ref,
.edition-card p.edition-label, .route-label, #contact .lead, .foot-note, .foot-link,
.hero-reg, .bench-title, .reg-ask, .ix-cap, .con-tag, .con-card p.con-tag,
.planet-eyebrow, .step-n, .ag-cat, .soon, .app-label, .tab, .race-label, .race-time {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
}
/* Inside the product depictions the machine voice stays mono, but in
   sentence case: nothing on either page is set in tracked capitals. */
.lb, .race-status .st, .senior em, .vd-lens, .vd-chip, .vd-tally {
  text-transform: none;
  letter-spacing: 0.01em;
}
.tab { font-size: 15px; padding: 9px 16px; border-radius: 2px; }
.race-label { font-size: 15px; font-weight: 600; color: var(--ink); }
.race-time { font-size: 14px; color: var(--mid); margin-top: 6px; }

/* ---------- topbar ---------- */

.topbar { border-bottom: 1px solid var(--line); }
.topbar .shell { height: var(--header-h); }
.brand { font-size: 20px; gap: 12px; }
.top-nav { gap: 28px; }
.top-nav a, .topmail { font-size: 15px; color: var(--mid); }
.top-nav a:hover, .topmail:hover { color: var(--ink); }
.menu summary { font-size: 15px; font-weight: 600; }
.menu-panel { border: 1px solid var(--ink); border-radius: 2px; box-shadow: 0 12px 32px rgba(10, 39, 35, 0.12); }
/* The open menu hangs from the sticky header, so it must fit the screen
   below it or scroll inside itself (short landscape phones). */
.menu-panel { max-height: calc(100vh - var(--header-h) - 24px); max-height: calc(100dvh - var(--header-h) - 24px); overflow-y: auto; overscroll-behavior: contain; }
.menu-panel a { font-size: 16px; }

/* ---------- buttons and links ---------- */

.btn { border-radius: 2px; padding: 14px 24px; font-size: 16px; }
.btn-solid { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.btn-solid:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.btn-ghost { border-width: 1px; }
.planet-link { color: var(--ink); text-decoration-color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; white-space: normal; }
.planet-link:hover { color: var(--teal-deep); }
.app-foot .planet-link { font-weight: 600; }

/* ---------- decoration removed ---------- */

/* Outlined giant numerals, the severed wire and the hand-drawn underline
   were ornaments; the content does not need them. */
.ghost-num, .airgap-mark { display: none; }
.underlined { background: none; padding-bottom: 0; }
.ix-n { display: none; }
.ix-grid a { grid-template-columns: minmax(0, 1fr); }
.reg-row { transition: none; }
.reg-row:hover { background: transparent; }
.fact, .fact:hover { transform: none; box-shadow: none; transition: none; }
.fact:hover { border-color: var(--line); }
/* Labels that were rubber stamps stay as words, set flat. */
.stamp, html.js .stamp, html.js .stamp.stamped {
  opacity: 1;
  transform: translateY(-50%);
  transition: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-width: 1px;
  border-radius: 2px;
}
.stamp { border: 0; padding: 0; }
/* The fact tiles were a grid of identical bordered cards; they become a
   ruled list in the ledgers' voice. (.facts .fact only: the edition
   panels also carry .fact.) */
.facts { gap: 0 40px; }
.facts .fact { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 0 18px; }
.facts .fact:hover { border-color: var(--line); }
.facts .fact h3 { font-size: 17px; }
.facts .fact p { font-size: 16px; line-height: 1.55; }
.soon { transform: none; border: 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--teal-deep); }
/* Every section's content is simply there: the scroll fade-in is off (it
   was the same fade on every element). effects.js sets the hidden state
   inline; these declarations win over it, so nothing waits to be revealed
   and nothing stays hidden if the script misbehaves. */
main section > .shell > *, html.js .reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ---------- section voice: labels, ledgers ---------- */

.ag-eyebrow { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
/* Every section opens with a short ink rule, like a margin heading in a
   brief. The rule belongs to the section, not to its label: a section
   whose heading needs no margin label keeps its seam. */
main section > .shell::before,
.apps-head > .shell::before,
.home-block > .shell::before {
  content: "";
  display: block;
  width: 14rem;
  max-width: 100%;
  border-top: 2px solid var(--ink);
  margin-bottom: 22px;
}
main section > .shell:has(> .ag-eyebrow:first-child)::before,
.apps-head > .shell:has(> .ag-eyebrow:first-child)::before,
.home-block > .shell:has(> .ag-eyebrow:first-child)::before { margin-bottom: 12px; }
#contact > .shell::before { content: none; }
main section > .shell > .ag-eyebrow:first-child,
.apps-head > .shell > .ag-eyebrow:first-child,
.home-block > .shell > .ag-eyebrow:first-child {
  max-width: 14rem;
  margin-bottom: 22px;
}
.app-label { font-size: 17px; font-weight: 600; color: var(--ink); }
.reg-map { border-top: 1px solid var(--ink); }
.reg-row { padding-top: 16px; padding-bottom: 16px; }
.reg-ask, .change-map .reg-ask { font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--ink); padding-top: 0; }
.reg-ans { font-size: 17px; line-height: 1.6; }
@media (min-width: 701px) { .ask-map .reg-row { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: 40px; } }
.tri-ref, .edition-card p.edition-label { font-size: 14px; font-weight: 600; color: var(--teal-deep); }
.bench-title { font-size: 14px; font-weight: 600; }

/* ---------- the document grid (both pages, wide screens) ---------- */

main section { border-top: 0; }
/* Sections are separated by space and by the short ink rule that opens
   each one; no full-width seam. */
main section > .shell,
.apps-head > .shell,
.home-block > .shell {
  padding-top: clamp(64px, 7vw, 120px);
  padding-bottom: clamp(64px, 7vw, 120px);
}
.home-block > .shell { border-top: 0; }
.apps-head > .shell { padding-bottom: clamp(24px, 3vw, 48px); }
.app > .shell { padding-top: clamp(56px, 6vw, 96px); }
.core-intro > .shell { border-bottom: 0; }
@media (min-width: 1100px) {
  main section > .shell,
  .apps-head > .shell,
  .home-block > .shell {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 96px);
    align-items: start;
  }
  main section > .shell > *,
  .apps-head > .shell > *,
  .home-block > .shell > * { grid-column: 2; }
  /* The rule and the section's name sit in the left margin, level with
     the headline's first line. */
  main section > .shell::before,
  .apps-head > .shell::before,
  .home-block > .shell::before { grid-column: 1; grid-row: 1; margin: 0; }
  main section > .shell > .ag-eyebrow:first-child,
  .apps-head > .shell > .ag-eyebrow:first-child,
  .home-block > .shell > .ag-eyebrow:first-child {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding-top: 12px;
    max-width: 14rem;
  }
  main section > .shell > .ag-eyebrow:first-child + * { margin-top: 0; }
  #contact > .shell { display: block; }
}

/* ---------- home: the ink hero band ---------- */

.hero { background: var(--ink); color: var(--on-ink); }
.hero > .shell { padding-top: clamp(64px, 8vw, 136px); padding-bottom: clamp(64px, 8vw, 136px); }
.hero .slogan { color: var(--on-ink); }
body:has(> .topbar-wide) .hero .slogan { color: var(--on-ink); font-size: clamp(2.5rem, 1.3rem + 3.3vw, 4.75rem); }
@media (min-width: 1100px) {
  body:has(> .topbar-wide) .hero > .shell {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem);
    column-gap: clamp(48px, 6vw, 120px);
    align-items: end;
  }
  body:has(> .topbar-wide) .hero > .shell .slogan-pitch { font-size: clamp(2.8rem, 1rem + 2.9vw, 4.5rem); }
}
.hero .slogan .setup { color: var(--on-ink-mid); }
.hero .slogan .accent { color: var(--on-ink); }
.hero .one-liner { color: var(--on-ink-mid); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); max-width: 34em; }
.hero .one-liner strong { color: var(--on-ink); font-weight: 600; }
.hero .hero-reg { color: var(--on-ink); font-size: 16px; line-height: 1.5; margin-top: 4px; }
.hero .btn-solid { background: var(--on-ink); border-color: var(--on-ink); color: var(--ink); }
.hero .btn-solid:hover { background: #FFFFFF; border-color: #FFFFFF; }
.hero .btn-ghost { color: var(--on-ink); border-color: var(--on-ink-mid); }
.hero .btn-ghost:hover { background: var(--on-ink); border-color: var(--on-ink); color: var(--ink); }
.hero :focus-visible { outline-color: var(--on-ink); }
/* The technology page's verdict card is a light panel on the band: it
   keeps the page's ink text and its own 36rem column. */
.hero .verdict-card { color: var(--ink); background: var(--page); border-color: var(--page); border-radius: 2px; }
/* The application index: a plain contents list on the band, no card. */
body:has(> .topbar-wide) .app-index { background: transparent; border: 0; border-radius: 0; padding: 0; }
body:has(> .topbar-wide) .app-index .bench-title { color: var(--on-ink-mid); margin-bottom: 10px; }
body:has(> .topbar-wide) .app-index a { grid-template-columns: minmax(0, 1fr); padding: 18px 0; border-top: 1px solid var(--on-ink-line); color: var(--on-ink); }
body:has(> .topbar-wide) .app-index .bench-title + a { border-top: 1px solid var(--on-ink-line); }
body:has(> .topbar-wide) .app-index a:last-child { border-bottom: 1px solid var(--on-ink-line); }
body:has(> .topbar-wide) .ai-n { display: none; }
body:has(> .topbar-wide) .ai-t { font-size: clamp(1.35rem, 1.1rem + 0.5vw, 1.65rem); line-height: 1.2; }
body:has(> .topbar-wide) .ai-s { color: var(--on-ink-mid); font-size: 16px; }
@media (hover: hover) {
  body:has(> .topbar-wide) .app-index a:hover .ai-t { color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
}

/* ---------- home: sections ---------- */

.problem-turn { font-size: 19px; }
#evidence { background: var(--tint); }
#founder .reg-ask { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.6rem); line-height: 1.2; letter-spacing: -0.01em; }
/* Editions: two quiet panels, not floating cards. */
.edition-card { background: var(--tint); border: 0; border-radius: 2px; padding: clamp(24px, 2.4vw, 40px); }
.edition-apps { border-top-color: var(--line); }
.edition-apps a { text-decoration-color: var(--teal); }

/* ---------- home: the ink contact band ---------- */

#contact { background: var(--ink); color: var(--on-ink); }
#contact > .shell { padding-top: clamp(72px, 9vw, 150px); padding-bottom: clamp(72px, 9vw, 150px); }
#contact .lead { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.big-mail { font-size: clamp(2rem, 1rem + 4.4vw, 5rem); text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
#contact .lead { color: var(--on-ink-mid); }
#contact .big-mail { color: var(--on-ink); text-decoration-color: var(--on-ink-mid); }
#contact .big-mail:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; }
#contact .routes { border-top-color: var(--on-ink-line); max-width: 64rem; margin-top: clamp(40px, 4vw, 64px); }
#contact .route { border-bottom-color: var(--on-ink-line); color: var(--on-ink); padding: 20px 8px 20px 0; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
#contact .route-label { color: var(--on-ink); font-size: 17px; font-weight: 600; }
#contact .route-text { color: var(--on-ink-mid); font-size: 17px; }
#contact :focus-visible { outline-color: var(--on-ink); }
@media (hover: hover) {
  #contact .route:hover { background: rgba(238, 243, 241, 0.06); color: var(--on-ink); }
  #contact .route:hover .route-text { color: var(--on-ink); }
}

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

footer { border-top: 1px solid var(--line); }
main:has(> #contact:last-child) + footer { border-top: 0; }
footer .wordmark { font-size: 22px; }
.foot-note, .foot-link { font-size: 14px; }

/* ---------- phones ---------- */

@media (max-width: 620px) {
  :root { --gutter: 20px; --header-h: 64px; }
  .ag-title { font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.3rem); }
  .ag-lead { font-size: 18px; }
  body:has(> .topbar-wide) .hero .slogan { font-size: clamp(2.2rem, 1.5rem + 3vw, 2.7rem); }
  #contact .route { grid-template-columns: 1fr; gap: 4px; }
  .big-mail { white-space: normal; overflow-wrap: anywhere; }
}

/* Editions: equal panels, the action at the foot of each. */
#editions .split { align-items: stretch; }
.edition-card { display: flex; flex-direction: column; }
.edition-card h3 { margin-bottom: 16px; }
.edition-card p { font-size: 17px; }
.edition-card .cta-row { margin-top: auto; padding-top: 24px; }

/* ---------- both pages: the technology page's own blocks ---------- */

/* A lead-in line sits directly over the ledger it introduces. */
.ag-compliance:has(+ .reg-map) { margin-bottom: 14px; }
/* Second headlines inside a section are set apart by space, not by a
   short hairline that stopped at the headline's measure. */
.platform-title, .builder-title { border-top: 0; padding-top: 0; }
.split:has(> .edition-card) { align-items: stretch; }
.tri h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.2; letter-spacing: -0.012em; }
/* The application windows keep their mono machine voice, in sentence
   case like every other depiction (the ID outranks graphs.css, which
   loads after this file). */
#ag-apps .app-window, #ag-apps .app-window * { text-transform: none; letter-spacing: 0.01em; }
/* The menu panel scrolls, so it clips anything outside it: its links draw
   their focus ring inside their own box. */
.menu-panel a:focus-visible { outline-offset: -3px; }

/* ---------- calculator page ---------- */

.calc { max-width: 60rem; }
.calc-example { color: var(--mid); font-size: 16px; margin-bottom: 22px; max-width: 62ch; }
.calc-people { max-width: 22rem; margin-bottom: 28px; }
.calc-grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.calc-part { background: var(--tint); border-radius: 2px; padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; }
.calc-h { font-family: var(--display); font-size: clamp(1.35rem, 1.1rem + 0.5vw, 1.65rem); font-weight: 600; line-height: 1.2; margin-bottom: 18px; }
.calc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.calc-field label { font-size: 16px; font-weight: 600; line-height: 1.35; }
.calc-unit { font-weight: 400; color: var(--mid); }
.calc-field input { font: inherit; font-size: 17px; color: var(--ink); background: var(--page); border: 1px solid var(--mid); border-radius: 2px; padding: 10px 12px; width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.calc-field input:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 1px; }
.calc-field input[aria-invalid="true"] { border-color: var(--signal); }
.calc-err { color: var(--signal); font-size: 15px; }
.calc-err:empty { margin-top: -6px; } /* stays in the page as a live region; takes no space */
.calc-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-out { margin-top: auto; border-top: 1px solid var(--ink); }
.calc-out > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.calc-out dt { font-size: 16px; color: var(--mid); flex: 1 1 10rem; } /* a value wider than the rest of the row moves under its label */
.calc-out dd { font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + 0.4vw, 1.55rem); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.calc-out dd.calc-gap { font-family: var(--sans); font-size: 15px; font-weight: 400; color: var(--signal); white-space: normal; text-align: right; }
.calc-sources { list-style: none; max-width: 64ch; border-top: 1px solid var(--ink); }
.calc-sources li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }