/* ===== 01-tokens.css ===== */
/* =====================================================================
   AuditTrace Labs design tokens
   ---------------------------------------------------------------------
   Every colour, size, space and timing value used anywhere on the site is
   declared here. Nothing downstream should contain a raw hex value or a
   magic pixel number. See docs/DESIGN_SYSTEM.md.

   CONTRAST DISCIPLINE - this is why the green tokens have two names:
     --atl-green        #1F6F4A  ~5.3:1 on white  -> SAFE for text, links, buttons
     --atl-green-accent #2BAA6E  ~2.6:1 on white  -> graphics/borders/large display
                                                      ONLY. Never body text on light.
     --atl-mint         #7FD7A6  -> text on dark surfaces only
   Using --atl-green-accent for small text on a light surface fails WCAG AA.
   ===================================================================== */

:root {
  /* ---- brand palette (approved packet palette, matched to the logo) ---- */
  --atl-green:            #1F6F4A;   /* Forest  - primary, AA-safe on white */
  --atl-green-deep:       #17563A;   /* darker press/hover state            */
  --atl-green-accent:     #2BAA6E;   /* Emerald - graphics and accents      */
  --atl-mint:             #7FD7A6;   /* Mint    - accents on dark           */
  --atl-sage:             #C7EACF;   /* Sage    - tints and fills           */

  /* ---- neutrals ---- */
  --atl-near-black:       #10161C;
  --atl-charcoal:         #1F2933;
  --atl-stone:            #6B7280;   /* ~4.8:1 on white - AA for body text  */
  --atl-cloud:            #F5F7F8;
  --atl-white:            #FFFFFF;

  /* ---- semantic surface / text roles ---- */
  --atl-background:       var(--atl-white);
  --atl-background-alt:   var(--atl-cloud);
  --atl-surface:          var(--atl-white);
  --atl-surface-sunken:   #EDF1F3;
  /* sticky header: translucent so content scrolls under it, with an opaque
     fallback in 05-utilities.css for engines without backdrop-filter */
  --atl-surface-translucent: rgba(255, 255, 255, 0.92);
  --atl-surface-dark:     var(--atl-near-black);
  --atl-surface-dark-alt: #18212A;

  --atl-text:             var(--atl-charcoal);
  --atl-text-strong:      var(--atl-near-black);
  /* Muted text is deliberately NOT var(--atl-stone). Stone (#6B7280) is the
     approved palette value and is kept intact above, but it measures 4.50:1 on
     Cloud - fractionally under the 4.5:1 AA threshold. This is the same hue,
     darkened just enough to pass on white, Cloud and the notice tint.
     Verify with: python tools/contrast_check.py */
  --atl-muted:            #626973;
  --atl-text-on-dark:     #E8EDF0;
  --atl-muted-on-dark:    #9AA8B2;

  --atl-border:           #DFE5E8;
  --atl-border-strong:    #C6D0D5;   /* non-interactive dividers only          */
  /* Interactive control boundaries (inputs, secondary buttons, the menu
     button) must reach 3:1 under WCAG 2.2 SC 1.4.11. --atl-border-strong is
     1.57:1 on white, which is fine for a divider and not fine for a control. */
  --atl-border-control:   #7E8B95;
  --atl-border-on-dark:   #2A3743;

  --atl-link:             var(--atl-green);
  --atl-link-hover:       var(--atl-green-deep);
  /* Focus ring: one value that clears 3:1 on white (4.89), Cloud (4.55), the
     notice tint (4.51) AND near-black (3.72), so focus is visible in every
     context the site uses. --atl-green-accent measured only 2.76:1 on Cloud
     and would have failed on tinted sections. */
  --atl-focus:            #238055;
  /* Structural green for strokes that carry visual structure - lineage nodes,
     step markers, notice rules, list markers. Same value as the focus ring so
     the whole UI layer is contrast-safe. Distinct from --atl-green-accent,
     which is for decorative fills where contrast is not required. */
  --atl-green-ui:         #238055;

  /* ---- notice roles ---- */
  --atl-notice-bg:        #F1F7F3;
  --atl-notice-border:    var(--atl-sage);
  --atl-caution-bg:       #FBF7EC;
  --atl-caution-border:   #E3D5AE;
  --atl-caution-accent:   #C89B2C;

  /* ---- error / validation roles (AA on white: #A3271E is ~6.4:1) ---- */
  --atl-danger:           #A3271E;
  --atl-danger-bg:        #F9EBE9;
  --atl-danger-border:    #E5C3BE;

  /* ---- layered-state planes, light to dark (from the logo artwork) ---- */
  --atl-plane-1:          #C3CBD1;
  --atl-plane-2:          #8E9AA3;
  --atl-plane-3:          var(--atl-charcoal);
  --atl-plane-4:          var(--atl-near-black);

  /* ---- print: deliberate absolutes, so policy pages file cleanly ---- */
  --atl-print-bg:         #FFFFFF;
  --atl-print-ink:        #000000;
  --atl-print-rule:       #999999;

  /* ---- typography ---- */
  --atl-font-sans: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                   Roboto, Helvetica, Arial, sans-serif;
  --atl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
                   "Roboto Mono", Menlo, Consolas, monospace;

  /* fluid type scale - min at 360px viewport, max at 1200px */
  --atl-text-xs:      0.78rem;
  --atl-text-sm:      0.875rem;
  --atl-text-base:    1.0625rem;                                  /* 17px      */
  --atl-text-lg:      clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --atl-text-xl:      clamp(1.25rem,  1.13rem + 0.55vw, 1.5rem);
  --atl-h4:           clamp(1.05rem,  1.0rem  + 0.3vw,  1.2rem);
  --atl-h3:           clamp(1.2rem,   1.1rem  + 0.5vw,  1.45rem);
  --atl-h2:           clamp(1.6rem,   1.35rem + 1.1vw,  2.25rem);
  --atl-h1:           clamp(2rem,     1.6rem  + 1.9vw,  3rem);
  --atl-display:      clamp(2.35rem,  1.75rem + 3vw,    3.9rem);

  --atl-leading-tight:  1.14;
  --atl-leading-snug:   1.3;
  --atl-leading-normal: 1.55;
  --atl-leading-relaxed:1.72;

  --atl-tracking-tight:  -0.021em;
  --atl-tracking-normal: 0;
  --atl-tracking-wide:   0.08em;
  --atl-tracking-eyebrow:0.16em;

  --atl-weight-normal:   400;
  --atl-weight-medium:   500;
  --atl-weight-semibold: 600;
  --atl-weight-bold:     700;

  /* ---- spacing scale (4px base) ---- */
  --atl-space-1:  0.25rem;
  --atl-space-2:  0.5rem;
  --atl-space-3:  0.75rem;
  --atl-space-4:  1rem;
  --atl-space-5:  1.5rem;
  --atl-space-6:  2rem;
  --atl-space-7:  2.5rem;
  --atl-space-8:  3rem;
  --atl-space-9:  4rem;
  --atl-space-10: 5rem;

  /* vertical rhythm for full-bleed sections */
  --atl-section-y:       clamp(3.5rem, 7vw, 6.5rem);
  --atl-section-y-tight: clamp(2.5rem, 5vw, 4rem);

  /* ---- containers ---- */
  --atl-wrap:        1152px;   /* standard content width          */
  --atl-wrap-narrow: 812px;    /* policy / long-form reading width */
  --atl-measure:     68ch;     /* max line length for prose        */
  --atl-gutter:      clamp(1.15rem, 4vw, 2.5rem);

  /* ---- radii, lines, elevation ---- */
  --atl-radius-sm: 4px;
  --atl-radius:    8px;
  --atl-radius-lg: 14px;
  --atl-radius-pill: 999px;

  --atl-hairline: 1px;
  --atl-rule:     2px;

  --atl-shadow-sm: 0 1px 2px rgba(16, 22, 28, 0.05);
  --atl-shadow:    0 2px 8px rgba(16, 22, 28, 0.07), 0 1px 2px rgba(16, 22, 28, 0.04);
  --atl-shadow-lg: 0 12px 32px rgba(16, 22, 28, 0.10), 0 2px 6px rgba(16, 22, 28, 0.05);

  /* ---- motion (all of it is suppressed under prefers-reduced-motion) ---- */
  --atl-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --atl-duration:   180ms;
  --atl-duration-lg:320ms;

  /* ---- focus ring ---- */
  --atl-focus-width:  3px;
  --atl-focus-offset: 3px;

  /* ---- layered-state / lineage motif ---- */
  --atl-node-size:   14px;
  --atl-spine-width: 2px;
  --atl-header-h:    76px;
}

/* The site is designed light-first, matching the approved brand direction
   (white and cloud surfaces dominate). Dark sections are deliberate, not a
   theme. We therefore do not swap the palette on prefers-color-scheme; we
   only soften pure-white glare very slightly for dark-preference users. */
@media (prefers-color-scheme: dark) {
  :root { --atl-background: #FCFDFD; }
}

/* ===== 02-base.css ===== */
/* =====================================================================
   Reset, self-hosted typeface, and base element styling.
   Sora is used under the SIL Open Font License 1.1; the license text ships
   at /assets/fonts/Sora-OFL.txt. It is self-hosted so the site makes no
   third-party font request and the CSP can keep font-src 'self'.
   ===================================================================== */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 700;            /* variable font - one file, all weights */
  font-display: swap;
  src: url("fonts/sora-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/sora-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored headings clear the sticky header instead of hiding under it. */
  scroll-padding-top: calc(var(--atl-header-h) + var(--atl-space-4));
}

body {
  margin: 0;
  background: var(--atl-background);
  color: var(--atl-text);
  font-family: var(--atl-font-sans);
  font-size: var(--atl-text-base);
  line-height: var(--atl-leading-relaxed);
  font-weight: var(--atl-weight-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Nothing may cause sideways scroll at any viewport. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--atl-space-4);
  color: var(--atl-text-strong);
  font-weight: var(--atl-weight-semibold);
  line-height: var(--atl-leading-tight);
  letter-spacing: var(--atl-tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--atl-h1); }
h2 { font-size: var(--atl-h2); }
h3 { font-size: var(--atl-h3); line-height: var(--atl-leading-snug); }
h4 { font-size: var(--atl-h4); line-height: var(--atl-leading-snug); letter-spacing: var(--atl-tracking-normal); }
h5, h6 { font-size: var(--atl-text-base); letter-spacing: var(--atl-tracking-normal); }

p { margin: 0 0 var(--atl-space-4); max-width: var(--atl-measure); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--atl-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--atl-link-hover); }

ul, ol { margin: 0 0 var(--atl-space-4); padding-left: 1.35rem; max-width: var(--atl-measure); }
li { margin-bottom: var(--atl-space-2); }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--atl-weight-semibold); color: var(--atl-text-strong); }

blockquote {
  margin: var(--atl-space-6) 0;
  padding: 0 0 0 var(--atl-space-5);
  border-left: var(--atl-rule) solid var(--atl-green-accent);
  font-size: var(--atl-text-xl);
  line-height: var(--atl-leading-normal);
  color: var(--atl-text-strong);
  letter-spacing: var(--atl-tracking-tight);
}
blockquote p { max-width: 46ch; }

code, kbd, samp, pre {
  font-family: var(--atl-font-mono);
  font-size: 0.92em;
}
code {
  background: var(--atl-surface-sunken);
  border: var(--atl-hairline) solid var(--atl-border);
  border-radius: var(--atl-radius-sm);
  padding: 0.1em 0.36em;
  overflow-wrap: break-word;
}
pre {
  background: var(--atl-surface-dark);
  color: var(--atl-text-on-dark);
  padding: var(--atl-space-4);
  border-radius: var(--atl-radius);
  overflow-x: auto;                /* long data never widens the page */
  line-height: 1.6;
}
pre code { background: none; border: 0; padding: 0; color: inherit; }

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

hr {
  border: 0;
  border-top: var(--atl-hairline) solid var(--atl-border);
  margin: var(--atl-space-8) 0;
}

/* ---- focus: always visible, and legible on light and dark surfaces ---- */
:focus-visible {
  outline: var(--atl-focus-width) solid var(--atl-focus);
  outline-offset: var(--atl-focus-offset);
  border-radius: var(--atl-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* On dark sections mint is far more visible than the standard ring (10.55:1
   versus 3.72:1), so the ring is upgraded rather than merely adequate. */
.section--dark :focus-visible,
.statement :focus-visible,
.site-footer :focus-visible { outline-color: var(--atl-mint); }

/* Skip link - the first tab stop on every page. */
.skip {
  position: absolute;
  left: var(--atl-space-4);
  top: -100%;
  z-index: 200;
  padding: var(--atl-space-3) var(--atl-space-4);
  background: var(--atl-green);
  color: var(--atl-white);
  font-weight: var(--atl-weight-semibold);
  border-radius: 0 0 var(--atl-radius) var(--atl-radius);
  text-decoration: none;
}
.skip:focus { top: 0; color: var(--atl-white); }

::selection { background: var(--atl-sage); color: var(--atl-near-black); }

/* Tables are used for factual matrices (retention classes, redirect maps). */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--atl-text-sm);
  margin: 0 0 var(--atl-space-4);
}
caption {
  text-align: left;
  color: var(--atl-muted);
  font-size: var(--atl-text-sm);
  padding-bottom: var(--atl-space-2);
}
th, td {
  text-align: left;
  padding: var(--atl-space-3);
  border-bottom: var(--atl-hairline) solid var(--atl-border);
  vertical-align: top;
}
th {
  font-weight: var(--atl-weight-semibold);
  color: var(--atl-text-strong);
  font-size: var(--atl-text-xs);
  letter-spacing: var(--atl-tracking-wide);
  text-transform: uppercase;
}

/* ===== 03-layout.css ===== */
/* =====================================================================
   Layout primitives: containers, sections, grids.
   Page content files compose these classes; they never invent geometry.
   ===================================================================== */

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

/* ---- full-bleed sections -------------------------------------------- */
.section {
  padding-block: var(--atl-section-y);
}
.section--tight { padding-block: var(--atl-section-y-tight); }

.section--alt   { background: var(--atl-background-alt); }
.section--sunken{ background: var(--atl-surface-sunken); }

/* Dark sections are used sparingly - hero accents, research, program.  */
.section--dark {
  background: var(--atl-surface-dark);
  color: var(--atl-text-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark strong { color: var(--atl-white); }
.section--dark a { color: var(--atl-mint); }
.section--dark a:hover { color: var(--atl-sage); }
.section--dark .lede { color: var(--atl-text-on-dark); }
.section--dark .muted, .section--dark .eyebrow { color: var(--atl-muted-on-dark); }
.section--dark hr { border-top-color: var(--atl-border-on-dark); }

/* A hairline rule between same-coloured stacked sections. */
.section--ruled { border-top: var(--atl-hairline) solid var(--atl-border); }

/* ---- section headers ------------------------------------------------ */
.section__head { margin-bottom: var(--atl-space-7); }
.section__head--center {
  text-align: center;
  margin-inline: auto;
  max-width: 62ch;
}
.section__head--center p { margin-inline: auto; }

.eyebrow {
  display: block;
  margin: 0 0 var(--atl-space-3);
  color: var(--atl-green);
  font-size: var(--atl-text-xs);
  font-weight: var(--atl-weight-semibold);
  letter-spacing: var(--atl-tracking-eyebrow);
  text-transform: uppercase;
  max-width: none;
}

.lede {
  font-size: var(--atl-text-xl);
  line-height: var(--atl-leading-normal);
  color: var(--atl-text);
  letter-spacing: -0.01em;
  max-width: 58ch;
}
.sublede {
  font-size: var(--atl-text-lg);
  line-height: var(--atl-leading-normal);
  color: var(--atl-muted);
  max-width: 62ch;
}

/* ---- grids ---------------------------------------------------------- */
.grid { display: grid; gap: var(--atl-space-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Asymmetric editorial split - keeps pages from reading as a slab. */
.split {
  display: grid;
  gap: clamp(var(--atl-space-6), 5vw, var(--atl-space-9));
  align-items: start;
}
.split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split__sticky { position: sticky; top: calc(var(--atl-header-h) + var(--atl-space-5)); }

.stack > * + * { margin-top: var(--atl-space-4); }
.stack--lg > * + * { margin-top: var(--atl-space-6); }

.prose > * + * { margin-top: var(--atl-space-4); }
.prose h2 { margin-top: var(--atl-space-8); }
.prose h3 { margin-top: var(--atl-space-6); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }

/* ---- responsive collapse ------------------------------------------- */
@media (max-width: 960px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--7-5, .split--5-7, .split--1-1 { grid-template-columns: minmax(0, 1fr); }
  .split__sticky { position: static; }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 04-components.css ===== */
/* =====================================================================
   Components. Each block here is documented in docs/DESIGN_SYSTEM.md.
   The visual language is derived from the approved logo:
     - the vertical lineage spine with circular nodes  -> .lineage / .steps
     - the stacked state planes                        -> .layers
     - the hexagonal containment mark                  -> .badge-hex
   ===================================================================== */

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--atl-surface-translucent);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: var(--atl-hairline) solid var(--atl-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--atl-space-5);
  min-height: var(--atl-header-h);
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand__logo { width: auto; height: 38px; }
.brand__descriptor {
  color: var(--atl-muted);
  font-size: 0.63rem;
  font-weight: var(--atl-weight-medium);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.2;
}

.site-nav { display: flex; align-items: center; gap: var(--atl-space-5); }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.site-nav__list li { margin: 0; }
.site-nav__list a {
  display: block;
  padding: var(--atl-space-2) 10px;
  border: var(--atl-hairline) solid transparent;
  border-radius: var(--atl-radius);
  color: var(--atl-text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: var(--atl-weight-medium);
  white-space: nowrap;
  transition: background var(--atl-duration) var(--atl-ease),
              color var(--atl-duration) var(--atl-ease);
}
.site-nav__list a:hover { background: var(--atl-cloud); color: var(--atl-green); }
.site-nav__list a[aria-current="page"] {
  color: var(--atl-green);
  background: var(--atl-notice-bg);
  box-shadow: inset 0 -2px 0 var(--atl-green-accent);
}

/* The inquiry path is emphasized by outlining the final nav item rather than
   adding a separate header CTA button. A button here duplicated the Contact
   link, pushed the header past its container at 1280px, and worked against
   the "clear inquiry path, not aggressive sales behavior" instruction. */
.site-nav__list li:last-child a {
  border: var(--atl-hairline) solid var(--atl-border-control);
  color: var(--atl-green);
}
.site-nav__list li:last-child a:hover {
  border-color: var(--atl-green);
  background: var(--atl-notice-bg);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--atl-space-2);
  padding: var(--atl-space-2) var(--atl-space-3);
  background: var(--atl-white);
  border: var(--atl-hairline) solid var(--atl-border-control);
  border-radius: var(--atl-radius);
  color: var(--atl-text);
  font-family: inherit;
  font-size: var(--atl-text-sm);
  font-weight: var(--atl-weight-medium);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 16px; height: 10px; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--atl-green);
  border-radius: 2px;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { bottom: 0; }

/* The descriptor is supplementary: it repeats in the hero and the footer.
   Below 1280px the seven nav labels need the room more than it does. */
@media (max-width: 1279px) {
  .brand__descriptor { display: none; }
}

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--atl-space-4);
    padding: var(--atl-space-5) var(--atl-gutter) var(--atl-space-6);
    background: var(--atl-white);
    border-bottom: var(--atl-rule) solid var(--atl-green);
    box-shadow: var(--atl-shadow-lg);
  }
  .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav__list a { padding: var(--atl-space-3); font-size: var(--atl-text-base); }
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--atl-space-2);
  padding: 0.7rem 1.25rem;
  border: var(--atl-rule) solid transparent;
  border-radius: var(--atl-radius);
  font-family: inherit;
  font-size: var(--atl-text-sm);
  font-weight: var(--atl-weight-semibold);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--atl-duration) var(--atl-ease),
              border-color var(--atl-duration) var(--atl-ease),
              color var(--atl-duration) var(--atl-ease),
              transform var(--atl-duration) var(--atl-ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--atl-green); border-color: var(--atl-green); color: var(--atl-white); }
.btn--primary:hover { background: var(--atl-green-deep); border-color: var(--atl-green-deep); color: var(--atl-white); }

.btn--secondary { background: transparent; border-color: var(--atl-border-control); color: var(--atl-text-strong); }
.btn--secondary:hover { border-color: var(--atl-green); color: var(--atl-green); background: var(--atl-notice-bg); }

.btn--on-dark { background: transparent; border-color: var(--atl-mint); color: var(--atl-mint); }
.btn--on-dark:hover { background: var(--atl-mint); color: var(--atl-near-black); border-color: var(--atl-mint); }

.btn--lg { padding: 0.9rem 1.6rem; font-size: var(--atl-text-base); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--atl-space-3);
  margin-top: var(--atl-space-6);
}
/* .center sets text-align, which does nothing to flex children. */
.btn-row.center { justify-content: center; }

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--atl-cloud) 0%, var(--atl-white) 100%);
  border-bottom: var(--atl-hairline) solid var(--atl-border);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--atl-space-6), 5vw, var(--atl-space-9));
  align-items: center;
}
.hero__name {
  display: block;
  font-size: var(--atl-text-sm);
  font-weight: var(--atl-weight-semibold);
  letter-spacing: var(--atl-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--atl-green);
  margin-bottom: var(--atl-space-2);
}
.hero__descriptor {
  display: block;
  font-size: var(--atl-text-lg);
  font-weight: var(--atl-weight-medium);
  color: var(--atl-muted);
  letter-spacing: 0.01em;
  margin-bottom: var(--atl-space-5);
}
.hero__title {
  font-size: var(--atl-display);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: var(--atl-weight-semibold);
  margin-bottom: var(--atl-space-5);
  max-width: 20ch;
}
.hero__promise {
  display: inline-flex;
  align-items: center;
  gap: var(--atl-space-3);
  margin-top: var(--atl-space-6);
  padding-top: var(--atl-space-5);
  border-top: var(--atl-hairline) solid var(--atl-border);
  color: var(--atl-green);
  font-weight: var(--atl-weight-semibold);
  letter-spacing: 0.01em;
}
.hero__promise::before {
  content: "";
  width: var(--atl-node-size);
  height: var(--atl-node-size);
  border: var(--atl-rule) solid var(--atl-green-ui);
  border-radius: 50%;
  background: var(--atl-white);
  flex: 0 0 auto;
}
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__title { max-width: none; }
}

/* -------------------------------------------- layered-state motif (decor) */
/* The planes are 3D-transformed (perspective + rotateX + rotateZ). A rotated
   full-width bar sweeps its corners toward the container edges, and browsers
   can paint that projection slightly past where the layout box reports it, so
   the decorative bars could bleed past the .diagram frame. Two guards:
   (1) the planes are given horizontal margin and a capped width so the rotated
       tips pull well inside the frame instead of reaching for its edges;
   (2) .diagram clips (below), making the framed box the hard boundary in every
       browser regardless of how the transform is rasterised. */
.layers {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: var(--atl-space-7) var(--atl-space-6);
}
.layers__plane {
  width: min(72%, 340px);
  height: 30px;
  border-radius: var(--atl-radius-sm);
  transform: perspective(760px) rotateX(58deg) rotateZ(-34deg);
  transform-origin: center;
  box-shadow: var(--atl-shadow-sm);
}
.layers__plane:nth-child(1) { background: var(--atl-plane-1); }
.layers__plane:nth-child(2) { background: var(--atl-plane-2); }
.layers__plane:nth-child(3) { background: var(--atl-charcoal); }
.layers__plane:nth-child(4) { background: var(--atl-near-black); }

/* ------------------------------------------------------- lineage / spine */
/* The signature diagram: a vertical trace line with circular nodes, one per
   stage. Vertical at every viewport - it mirrors the logo's spine and never
   needs a horizontal-scroll fallback. */
.lineage {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  position: relative;
}
.lineage__stage {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--atl-space-4);
  padding-bottom: var(--atl-space-6);
  margin: 0;
}
.lineage__stage:last-child { padding-bottom: 0; }
/* the connecting trace */
.lineage__stage:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(17px - (var(--atl-spine-width) / 2));
  top: 22px;
  bottom: 0;
  width: var(--atl-spine-width);
  background: var(--atl-sage);
}
.lineage__node {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  margin: 2px auto 0;
  border: var(--atl-rule) solid var(--atl-green-ui);
  border-radius: 50%;
  background: var(--atl-white);
}
.lineage__stage--terminal .lineage__node { background: var(--atl-green); border-color: var(--atl-green); }
.lineage__label {
  font-size: var(--atl-text-xs);
  font-weight: var(--atl-weight-semibold);
  letter-spacing: var(--atl-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--atl-green);
  margin-bottom: var(--atl-space-1);
}
.lineage__body { color: var(--atl-text); margin: 0; }

.section--dark .lineage__stage:not(:last-child)::before { background: var(--atl-border-on-dark); }
.section--dark .lineage__node { background: var(--atl-surface-dark); border-color: var(--atl-mint); }
.section--dark .lineage__stage--terminal .lineage__node { background: var(--atl-mint); }
.section--dark .lineage__label { color: var(--atl-mint); }
.section--dark .lineage__body { color: var(--atl-text-on-dark); }

/* ----------------------------------------------------- numbered workflow */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: atl-step; max-width: none; }
.steps__item {
  position: relative;
  counter-increment: atl-step;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--atl-space-4);
  padding-bottom: var(--atl-space-6);
  margin: 0;
}
.steps__item:last-child { padding-bottom: 0; }
/* The step NUMBER is drawn by ::after (absolutely positioned) and the connecting
   spine by ::before, so neither is a grid item. The only real grid child is the
   content <div>, and with two declared columns it auto-places into column 1 -
   the 40px number gutter - crushing the text to ~40px wide (one word per line)
   with the spine running down through it. Pin content to column 2 so it fills
   the 1fr track. (.lineage does not need this: its node is a real <span>, a
   genuine first grid child.) */
.steps__item > * { grid-column: 2; }
.steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(20px - (var(--atl-spine-width) / 2));
  top: 40px;
  bottom: 0;
  width: var(--atl-spine-width);
  background: var(--atl-sage);
}
.steps__item::after {
  content: counter(atl-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: var(--atl-rule) solid var(--atl-green-ui);
  border-radius: 50%;
  background: var(--atl-white);
  color: var(--atl-green);
  font-size: var(--atl-text-sm);
  font-weight: var(--atl-weight-bold);
  font-variant-numeric: tabular-nums;
}
.steps__title { margin-bottom: var(--atl-space-2); }

/* -------------------------------------------------------- inline flow row */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--atl-space-2) var(--atl-space-3);
  list-style: none;
  margin: 0 0 var(--atl-space-4);
  padding: 0;
  max-width: none;
}
.flow li {
  display: inline-flex;
  align-items: center;
  gap: var(--atl-space-3);
  margin: 0;
  font-size: var(--atl-text-sm);
  font-weight: var(--atl-weight-medium);
  color: var(--atl-text-strong);
}
.flow li:not(:last-child)::after {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--atl-border-strong);
  flex: 0 0 auto;
}

/* .flow--set: the same compact row WITHOUT the connecting line.
   A line between two items claims they are sequential. Four rows on this site
   are not sequences - a taxonomy (observed / derived / uncertain / missing), a
   set of qualifications, a set of engagement attributes, and a published-vs-
   withheld split - and drawing a connector through them asserted a progression
   that does not exist. The data-forensics row was self-contradictory: its own
   aria-label said the items are "separated" while the CSS drew them connected.
   Use plain .flow only where the order genuinely matters; use .flow--set for a
   set, and the aria-label should read like a set rather than a sequence. */
.flow--set li:not(:last-child)::after { content: none; }
/* Static labels, deliberately NOT pill-shaped.
   These carry information (stages of a flow, qualifications), never actions.
   A fully-rounded pill with a solid border and a white fill reads as a button,
   which is a false affordance - the same issue the founder flagged on the
   verifier. So: no button fill, a small square radius instead of 999px, a soft
   tinted ground with a hairline, and a mono treatment that says "labeled value"
   rather than "control". No hover, no pointer - there is nothing to click. */
.flow__item {
  padding: 0.28rem 0.6rem;
  background: var(--atl-surface-sunken);
  border: var(--atl-hairline) solid var(--atl-border);
  border-radius: var(--atl-radius-sm);
  font-family: var(--atl-font-mono);
  font-size: var(--atl-text-xs);
  letter-spacing: 0.01em;
  color: var(--atl-text-strong);
  white-space: nowrap;
}
.section--dark .flow__item {
  background: var(--atl-surface-dark-alt);
  border-color: var(--atl-border-on-dark);
  color: var(--atl-text-on-dark);
}

/* ----------------------------------------------------------------- cards */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--atl-space-5);
  background: var(--atl-surface);
  border: var(--atl-hairline) solid var(--atl-border);
  border-radius: var(--atl-radius-lg);
  box-shadow: var(--atl-shadow-sm);
}
.card > :last-child { margin-bottom: 0; }
.card__title { margin-bottom: var(--atl-space-2); }
.card__title a { text-decoration: none; color: inherit; }
.card__title a:hover { color: var(--atl-green); text-decoration: underline; }
.card p { max-width: none; }
.card__meta {
  margin-top: var(--atl-space-4);
  padding-top: var(--atl-space-3);
  border-top: var(--atl-hairline) solid var(--atl-border);
  color: var(--atl-muted);
  font-size: var(--atl-text-sm);
}

/* Cards carrying the layered-state accent bar at the top edge. */
.card--traced { position: relative; overflow: hidden; }
.card--traced::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--atl-green) 0%, var(--atl-green-accent) 55%, var(--atl-sage) 100%);
}

.card--link { transition: border-color var(--atl-duration) var(--atl-ease), box-shadow var(--atl-duration) var(--atl-ease), transform var(--atl-duration) var(--atl-ease); }
.card--link:hover { border-color: var(--atl-green-accent); box-shadow: var(--atl-shadow); transform: translateY(-2px); }

.section--dark .card {
  background: var(--atl-surface-dark-alt);
  border-color: var(--atl-border-on-dark);
  box-shadow: none;
}
.section--dark .card__meta { border-top-color: var(--atl-border-on-dark); color: var(--atl-muted-on-dark); }

/* ------------------------------------------------------------- statement */
/* A single high-emphasis pull statement. Used for the access principle. */
.statement {
  padding: clamp(var(--atl-space-6), 5vw, var(--atl-space-9));
  background: var(--atl-surface-dark);
  color: var(--atl-white);
  border-radius: var(--atl-radius-lg);
  position: relative;
  overflow: hidden;
}
.statement::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--atl-green-accent), var(--atl-mint));
}
.statement__title {
  font-size: var(--atl-h2);
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--atl-white);
  max-width: 30ch;
  margin-bottom: var(--atl-space-4);
}
.statement p { color: var(--atl-text-on-dark); }

/* --------------------------------------------------------------- notices */
.notice {
  padding: var(--atl-space-4) var(--atl-space-5);
  background: var(--atl-notice-bg);
  border: var(--atl-hairline) solid var(--atl-notice-border);
  border-left: var(--atl-rule) solid var(--atl-green-ui);
  border-radius: var(--atl-radius);
  font-size: var(--atl-text-sm);
  line-height: var(--atl-leading-normal);
}
.notice > :last-child { margin-bottom: 0; }
.notice__title {
  font-size: var(--atl-text-sm);
  font-weight: var(--atl-weight-semibold);
  margin-bottom: var(--atl-space-2);
  letter-spacing: var(--atl-tracking-normal);
}
.notice--caution {
  background: var(--atl-caution-bg);
  border-color: var(--atl-caution-border);
  border-left-color: var(--atl-caution-accent);
}
.notice p { max-width: none; }

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--atl-space-2);
  padding: 0.25rem 0.7rem;
  border-radius: var(--atl-radius-pill);
  background: var(--atl-notice-bg);
  border: var(--atl-hairline) solid var(--atl-notice-border);
  color: var(--atl-green);
  font-size: var(--atl-text-xs);
  font-weight: var(--atl-weight-semibold);
  letter-spacing: var(--atl-tracking-wide);
  text-transform: uppercase;
}
.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--atl-green-accent);
}
.section--dark .badge {
  background: rgba(43, 170, 110, 0.14);
  border-color: rgba(127, 215, 166, 0.35);
  color: var(--atl-mint);
}

/* Hexagonal containment mark, from the logo. Decorative, small, sparing. */
.badge-hex {
  width: 34px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--atl-notice-bg);
  border: var(--atl-rule) solid var(--atl-green-ui);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  color: var(--atl-green);
  font-size: var(--atl-text-sm);
  font-weight: var(--atl-weight-bold);
  flex: 0 0 auto;
}

/* ----------------------------------------------------------------- chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--atl-space-2); list-style: none; margin: 0; padding: 0; max-width: none; }
.chips li { margin: 0; }
/* Static value labels, not controls - see .flow__item above for the reasoning.
   Square small radius and a hairline tint, never a fully-rounded bordered pill. */
.chip {
  display: inline-block;
  padding: 0.26rem 0.6rem;
  background: var(--atl-surface-sunken);
  border: var(--atl-hairline) solid var(--atl-border);
  border-radius: var(--atl-radius-sm);
  font-size: var(--atl-text-sm);
  color: var(--atl-text);
}

/* -------------------------------------------------------------- fact row */
/* Factual figures with a visible source. Never used without a citation. */
.facts { display: grid; gap: var(--atl-space-5); }
.fact__value {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: var(--atl-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--atl-text-strong);
  font-variant-numeric: tabular-nums;
}
.fact__label { color: var(--atl-text); margin-top: var(--atl-space-2); }
.fact__source { display: block; margin-top: var(--atl-space-3); color: var(--atl-muted); font-size: var(--atl-text-xs); }
.section--dark .fact__value { color: var(--atl-white); }
.section--dark .fact__source { color: var(--atl-muted-on-dark); }

/* ------------------------------------------------------------- figure box */
.diagram {
  padding: clamp(var(--atl-space-5), 4vw, var(--atl-space-7));
  background: var(--atl-white);
  border: var(--atl-hairline) solid var(--atl-border);
  border-radius: var(--atl-radius-lg);
  /* Hard boundary for decorative transformed children (e.g. .layers planes),
     clipped to the rounded frame. `clip` does not create a scroll container.
     Legitimately wide content (tables) uses its own .scroll-x wrapper, so this
     never traps scrollable content. */
  overflow: clip;
}
.diagram figcaption {
  margin-top: var(--atl-space-5);
  padding-top: var(--atl-space-4);
  border-top: var(--atl-hairline) solid var(--atl-border);
  color: var(--atl-muted);
  font-size: var(--atl-text-sm);
}
.section--dark .diagram {
  background: var(--atl-surface-dark-alt);
  border-color: var(--atl-border-on-dark);
}
.section--dark .diagram figcaption { border-top-color: var(--atl-border-on-dark); color: var(--atl-muted-on-dark); }

/* ------------------------------------------------------------ breadcrumbs */
.breadcrumbs { padding-block: var(--atl-space-4); font-size: var(--atl-text-sm); border-bottom: var(--atl-hairline) solid var(--atl-border); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--atl-space-2); list-style: none; margin: 0; padding: 0; max-width: none; }
.breadcrumbs li { margin: 0; color: var(--atl-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--atl-space-2); color: var(--atl-border-strong); }

/* ------------------------------------------------------------------ forms */
.form { display: grid; gap: var(--atl-space-5); max-width: 40rem; }
.field { display: grid; gap: var(--atl-space-2); }
.field__label { font-size: var(--atl-text-sm); font-weight: var(--atl-weight-semibold); color: var(--atl-text-strong); }
.field__optional { font-weight: var(--atl-weight-normal); color: var(--atl-muted); }
.field__hint { font-size: var(--atl-text-sm); color: var(--atl-muted); }
.field__error { font-size: var(--atl-text-sm); color: var(--atl-danger); font-weight: var(--atl-weight-medium); }

.input, .textarea, .select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--atl-white);
  border: var(--atl-hairline) solid var(--atl-border-control);
  border-radius: var(--atl-radius);
  color: var(--atl-text);
  font-family: inherit;
  font-size: var(--atl-text-base);
  line-height: 1.5;
}
.textarea { min-height: 9rem; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--atl-green-ui); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--atl-danger); }

/* Honeypot: off-screen, never announced, never focusable by keyboard order. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status {
  padding: var(--atl-space-4) var(--atl-space-5);
  border-radius: var(--atl-radius);
  border: var(--atl-hairline) solid var(--atl-border);
  font-size: var(--atl-text-base);
}
.form__status > :last-child { margin-bottom: 0; }
.form__status.is-ok   { background: var(--atl-notice-bg); border-color: var(--atl-notice-border); }
.form__status.is-fail { background: var(--atl-danger-bg); border-color: var(--atl-danger-border); }

/* ---------------------------------------------------------------- footer */
.site-footer {
  margin-top: var(--atl-space-10);
  background: var(--atl-near-black);
  color: var(--atl-text-on-dark);
  border-top: 3px solid var(--atl-green);
  padding-block: var(--atl-space-8) var(--atl-space-6);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: var(--atl-space-6);
}
.site-footer__brand-link { display: inline-block; }
.site-footer__brand img { height: 34px; width: auto; }
.site-footer__legal-name { margin: var(--atl-space-4) 0 0; font-weight: var(--atl-weight-semibold); color: var(--atl-white); }
.site-footer__descriptor { margin: var(--atl-space-1) 0 0; color: var(--atl-muted-on-dark); font-size: var(--atl-text-sm); }
.site-footer__promise { margin: var(--atl-space-4) 0 0; color: var(--atl-mint); font-weight: var(--atl-weight-medium); }

.site-footer__heading {
  font-size: var(--atl-text-xs);
  font-weight: var(--atl-weight-semibold);
  letter-spacing: var(--atl-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--atl-muted-on-dark);
  margin-bottom: var(--atl-space-4);
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.site-footer__col li { margin-bottom: var(--atl-space-3); }
.site-footer__col a { color: var(--atl-text-on-dark); text-decoration: none; font-size: var(--atl-text-sm); }
.site-footer__col a:hover { color: var(--atl-mint); text-decoration: underline; }

.site-footer__base {
  margin-top: var(--atl-space-8);
  padding-top: var(--atl-space-5);
  border-top: var(--atl-hairline) solid var(--atl-border-on-dark);
}
.site-footer__copy { margin: 0; font-size: var(--atl-text-sm); color: var(--atl-muted-on-dark); max-width: none; }
.site-footer__copy a { color: var(--atl-text-on-dark); text-decoration: none; }
.site-footer__copy a:hover { color: var(--atl-mint); text-decoration: underline; }
.site-footer__copy .sep { margin: 0 var(--atl-space-2); color: var(--atl-border-on-dark); }
.site-footer__disclaimer {
  margin: var(--atl-space-4) 0 0;
  font-size: var(--atl-text-xs);
  line-height: var(--atl-leading-normal);
  color: var(--atl-muted-on-dark);
  max-width: 92ch;
}

@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--atl-space-7); }
}

/* ===== 05-utilities.css ===== */
/* =====================================================================
   Utilities, accessibility affordances, motion and print.
   Keep this file small - if a utility is used more than a few times it
   probably belongs in 04-components.css as a named component.
   ===================================================================== */

.muted      { color: var(--atl-muted); }
.small      { font-size: var(--atl-text-sm); }
.strong     { font-weight: var(--atl-weight-semibold); color: var(--atl-text-strong); }
.mono       { font-family: var(--atl-font-mono); font-size: 0.92em; }
.center     { text-align: center; }
.nowrap     { white-space: nowrap; }
.measure    { max-width: var(--atl-measure); }
.measure-narrow { max-width: 52ch; }
.no-max     { max-width: none; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--atl-space-4); }
.mt-5 { margin-top: var(--atl-space-5); }
.mt-6 { margin-top: var(--atl-space-6); }
.mt-7 { margin-top: var(--atl-space-7); }
.mb-0 { margin-bottom: 0; }

/* Visually hidden but available to assistive technology. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Unbulleted list that keeps list semantics for screen readers. */
.list-plain { list-style: none; padding-left: 0; }
.list-plain > li { margin-bottom: var(--atl-space-3); }

/* Checklist / boundary list with a drawn marker rather than an emoji. */
.list-marked { list-style: none; padding-left: 0; }
.list-marked > li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--atl-space-3);
}
/* SOLID dot, deliberately.
   These are ordinary list items - characteristics, requirements, boundaries -
   and a solid bullet is what an ordinary list item means.

   This marker used to be a 9px HOLLOW circle with a 2px green border, which is
   the same symbol .lineage__node uses for a state in a connected process. One
   symbol cannot mean both "list item" and "stage in a sequence": it made plain
   lists read as process diagrams with the connecting line missing. The site's
   rule is now explicit -
     solid dot            = ordinary list item
     hollow circle + line = an intentional state / transition / lineage node
   so if a list here ever becomes a real sequence, move it to .steps or
   .lineage rather than restyling this marker back. */
.list-marked > li::before {
  content: "";
  position: absolute;
  left: 1px;                /* keeps the 6px dot optically where the 9px ring sat */
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--atl-green-ui);
  border-radius: 50%;
}
.section--dark .list-marked > li::before { background: var(--atl-mint); }

/* Explicit exclusion list - used for "we do not do this" boundaries. */
.list-excluded { list-style: none; padding-left: 0; }
.list-excluded > li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--atl-space-3);
}
.list-excluded > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.86em;
  width: 11px;
  height: var(--atl-rule);
  background: var(--atl-stone);
}

/* Wide content that must scroll inside itself, never widening the page. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* External links get a discreet marker so their behavior is predictable. */
a[rel~="external"]::after {
  content: "\2197";
  display: inline-block;
  margin-left: 0.2em;
  font-size: 0.85em;
  text-decoration: none;
}

/* ---- motion ---------------------------------------------------------- */
/* Motion is limited to short, non-essential transitions. Nothing on the
   site conveys meaning through movement, so removing it loses nothing. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card--link:hover { transform: none; }
  .btn:active { transform: none; }
}

/* Older engines without backdrop-filter get an opaque header instead of a
   translucent one, so header text never sits on top of page content. */
@supports not (backdrop-filter: blur(8px)) {
  .site-header { background: var(--atl-white); }
}

/* ---- print ----------------------------------------------------------- */
/* Policy pages are printed and filed, so print output matters here. */
@media print {
  .site-header, .site-footer__grid, .nav-toggle, .site-nav,
  .skip, .btn-row, .btn { display: none !important; }
  body { background: var(--atl-print-bg); color: var(--atl-print-ink); font-size: 11pt; line-height: 1.45; }
  .section, .hero { padding-block: 0.75rem; background: none !important; color: var(--atl-print-ink) !important; }
  .section--dark, .statement { background: none !important; color: var(--atl-print-ink) !important; border: 1px solid var(--atl-print-rule); }
  .section--dark h1, .section--dark h2, .section--dark h3,
  .statement__title { color: var(--atl-print-ink) !important; }
  .card, .diagram, .notice { border: 1px solid var(--atl-print-rule); box-shadow: none; break-inside: avoid; }
  .lineage__stage, .steps__item { break-inside: avoid; }
  a { color: var(--atl-print-ink); text-decoration: underline; }
  /* Make link targets recoverable on paper. */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .site-footer { margin-top: 1rem; padding: 0.5rem 0 0; background: none; color: var(--atl-print-ink); border-top: 1px solid var(--atl-print-ink); }
  .site-footer__base { margin-top: 0.5rem; }
  .site-footer__copy, .site-footer__disclaimer { color: var(--atl-print-ink); }
}