/* =========================================================================
   Agen2ic LLC — agen2ic.ai
   Single stylesheet. No build step, no external requests, no runtime deps.

   BRAND GREEN — DO NOT NORMALIZE THIS TO THE RAW BRAND VALUE
   The canonical brand green is #40F522 (hue 111.5°). garrett.gg runs that
   electric value. Agen2ic runs a restrained derivation of it — same hue,
   pulled down in saturation and lightness:

     --accent       #41BE2D   dark grounds, fills, the mark   7.75:1 on dark
     --accent-deep  #187109   green text on light grounds     6.17:1 on white

   The difference is deliberate. A contracting officer evaluating a task
   order reads a neon site as unserious, so the electric value is not used
   anywhere on this site. If you are here to "fix" the green back to
   #40F522: don't. That is the garrett.gg value, not the Agen2ic one.

   Two greens, because one cannot do both jobs. #41BE2D is only 2.4:1 on
   white — fine as a fill or a mark, unreadable as text. Green TEXT on a
   light ground therefore uses --accent-deep; fills and the mark use
   --accent, with --on-accent (dark ink) sitting on top of the fill.

   Rest of the palette is sampled from the Agen2ic capability statement:
     ink #101614   rule #b4beb9
   Structure is carried by hairline rules and letterspaced mono labels, so
   the site reads like the capability statement rather than a product
   launch.

   THEMING CONTRACT
     - The complete light palette is defined on bare :root.
     - Dark redefines the same token names in two places: the system
       preference (guarded so an explicit light stamp always wins) and an
       explicit [data-theme="dark"] stamp.
     - No colour is ever defined only inside a media or [data-theme] block.
   ========================================================================= */

/* ---------- Light palette: the complete set, on bare :root ------------- */
:root {
  --bg:            #ffffff;
  --bg-sunken:     #f5f8f7;
  --surface:       #ffffff;
  --rule:          #e2e8e5;
  --rule-strong:   #b4beb9;
  --text:          #101614;
  --text-muted:    #4a5450;
  --text-faint:    #5f6a66;
  --accent:            #41BE2D;   /* fills, the mark — never text on light */
  --accent-hover:      #37A226;
  --accent-deep:       #187109;   /* green text on light grounds, 6.17:1 */
  --accent-deep-hover: #0F5405;
  --accent-tint:       #ECF7E8;
  --on-accent:         #101614;   /* dark ink on the green fill, 7.65:1 */
  --focus:             #187109;
  --pending-bg:    #f2f5f4;
  --pending-text:  #5c6763;
  --pending-rule:  #a8b3ae;

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

  --wrap:   72rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section: clamp(3.5rem, 7vw, 5.5rem);

  /* Type scale. The first version topped out around 3.35rem for the hero and
     2.1rem for a headline number, on a 386-word page. Restraint needs
     substance to frame; with nothing to frame it reads as an unfinished
     template. The green stays desaturated — that part was right — but the
     typography now carries the confidence the palette deliberately does not. */
  --step-0:  1.125rem;
  --step-1:  clamp(1.25rem,  1.6vw,  1.4rem);
  --step-2:  clamp(1.5rem,   2.2vw,  1.9rem);
  --step-3:  clamp(1.9rem,   3.4vw,  2.6rem);
  --step-4:  clamp(2.4rem,   5vw,    3.5rem);
  --step-5:  clamp(2.5rem,   7.2vw,  4.9rem);

  color-scheme: light;
}

/* ---------- Dark palette: system preference (explicit light wins) ------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0b0f0e;
    --bg-sunken:     #101614;
    --surface:       #131a18;
    --rule:          #232d2a;
    --rule-strong:   #3a4642;
    --text:          #e6ecea;
    --text-muted:    #a6b2ae;
    --text-faint:    #8b9793;
    --accent:            #41BE2D;   /* fills, the mark, 7.75:1 on dark */
    --accent-hover:      #5AD343;
    --accent-deep:       #41BE2D;   /* the green-text role, on dark grounds */
    --accent-deep-hover: #5AD343;
    --accent-tint:       #12210E;
    --on-accent:         #101614;
    --focus:             #41BE2D;
    --pending-bg:    #161d1b;
    --pending-text:  #97a39f;
    --pending-rule:  #47534f;

    color-scheme: dark;
  }
}

/* ---------- Dark palette: explicit stamp ------------------------------- */
:root[data-theme="dark"] {
  --bg:            #0b0f0e;
  --bg-sunken:     #101614;
  --surface:       #131a18;
  --rule:          #232d2a;
  --rule-strong:   #3a4642;
  --text:          #e6ecea;
  --text-muted:    #a6b2ae;
  --text-faint:    #8b9793;
  --accent:            #41BE2D;   /* fills, the mark, 7.75:1 on dark */
  --accent-hover:      #5AD343;
  --accent-deep:       #41BE2D;   /* the green-text role, on dark grounds */
  --accent-deep-hover: #5AD343;
  --accent-tint:       #12210E;
  --on-accent:         #101614;
  --focus:             #41BE2D;
  --pending-bg:    #161d1b;
  --pending-text:  #97a39f;
  --pending-rule:  #47534f;

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Explicit, token-driven ground. Never transparent. */
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;

  /* Short pages (404) must still put the footer on the floor, not mid-screen. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }
.footer { flex: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.017em;
  text-wrap: balance;
}

p { margin: 0; }
img, svg { max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--accent-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { color: var(--accent-deep-hover); }

/* ---------- Focus: a transparent ring is always present, so focus is a
              colour change on an already-reserved outline. Never removed. */
a, button, summary, [tabindex] {
  outline: 2px solid transparent;
  outline-offset: 3px;
  border-radius: 2px;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline-color: var(--focus);
  outline-width: 3px;
}

/* ---------- Layout primitives ----------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section + .section { border-top: 1px solid var(--rule); }

/* Letterspaced mono eyebrow above a hairline — the core structural motif. */
.eyebrow {
  display: block;
  margin: 0 0 1.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--text-muted);
  max-width: 46ch;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Masthead --------------------------------------------------- */
.masthead {
  border-bottom: 1px solid var(--rule);
  background-color: var(--bg);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  flex-wrap: wrap;
  padding-block: 0.85rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.015em;
  font-size: 1.0625rem;
}
.brand__mark {
  display: block;
  width: 1.55rem;
  height: auto;
  flex: none;
  fill: var(--accent);
}
.brand:hover { color: var(--text); }
.brand:hover .brand__mark { fill: var(--accent-hover); }

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 1.75rem);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.masthead__nav a {
  color: var(--text-muted);
  text-decoration: none;
}
.masthead__nav a:hover { color: var(--accent-deep); }
.masthead__nav a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -1px 0 0 var(--accent);
}

/* ---------- Hero ------------------------------------------------------- */
.hero { padding-block: clamp(3.5rem, 10vw, 7rem) clamp(3rem, 7vw, 5rem); }

.hero__tag {
  display: block;
  margin-bottom: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.hero__claim {
  font-size: var(--step-5);
  max-width: 17ch;
  letter-spacing: -0.032em;
  line-height: 1.02;
  font-weight: 700;
}

.hero__sub {
  margin-top: 1.6rem;
  max-width: 50ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
}

.hero__cta { margin-top: 2.5rem; }

/* ---------- Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background-color: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.btn:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}
.btn__arrow { font-family: var(--font-mono); }

.btn--quiet {
  background-color: transparent;
  color: var(--accent-deep);
  border-color: var(--rule-strong);
}
.btn--quiet:hover {
  background-color: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-deep-hover);
}

/* ---------- Failure modes --------------------------------------------- */
.breaks {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
.break {
  padding-block: 1.9rem;
  border-top: 1px solid var(--rule);
}
.break:first-child { border-top: 0; padding-top: 0; }

.break__idx {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  color: var(--accent-deep);
}
.break__name {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  line-height: 1;
}
.break__body { color: var(--text-muted); max-width: 40ch; font-size: 1.0625rem; }

@media (min-width: 46rem) {
  .breaks {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3.5vw, 2.75rem);
  }
  .break {
    padding-block: 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--rule-strong);
  }
  .break:first-child { padding-top: 1.6rem; border-top: 1px solid var(--rule-strong); }
}

/* ---------- Engagements ------------------------------------------------ */
.tiers { border-top: 1px solid var(--rule-strong); }

.tier {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--rule);
}

.tier__name {
  font-size: 1.125rem;
  font-weight: 650;
}
.tier__price {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--accent-deep);
  white-space: nowrap;
}
.tier__meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.tier__body {
  color: var(--text-muted);
  max-width: 52ch;
  margin-top: 0.5rem;
}

@media (min-width: 46rem) {
  .tier {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }
  .tier__name  { grid-column: 1; }
  .tier__price { grid-column: 2; text-align: right; }
  .tier__meta  { grid-column: 2; text-align: right; }
  .tier__body  { grid-column: 1; margin-top: 0.35rem; }
}

.pricing-note {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--text-faint);
  max-width: 52ch;
}

/* ---------- Proof / stats ---------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.stat {
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
}
.stat:first-child { border-top: 0; padding-top: 0; }

.stat__fig {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.65rem, 4.2vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.stat__label {
  display: block;
  margin-top: 0.8rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.45;
  max-width: 26ch;
}

@media (min-width: 40rem) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 2rem clamp(1.5rem, 4vw, 3rem); }
  .stat { border-top: 1px solid var(--rule-strong); padding-top: 1.4rem; padding-bottom: 0; }
  .stat:first-child { border-top: 1px solid var(--rule-strong); padding-top: 1.4rem; }
}
@media (min-width: 62rem) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}

.provenance {
  margin-top: 2.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-faint);
  max-width: 62ch;
}

/* ---------- Panels (federal teaser, clearance) ------------------------- */
.panel {
  padding: clamp(1.4rem, 3.5vw, 2rem);
  background-color: var(--accent-tint);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
}
.panel__title {
  font-size: 1.0625rem;
  font-weight: 650;
  margin-bottom: 0.7rem;
}
.panel p + p { margin-top: 0.85rem; }
.panel__lead { color: var(--text); }
.panel__fine { color: var(--text-muted); font-size: 0.9375rem; }

.clearance__headline {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  font-weight: 650;
  color: var(--text);
  max-width: 34ch;
}
.clearance__qualifier {
  margin-top: 0.9rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  max-width: 52ch;
}

/* ---------- Definition-style capability lists -------------------------- */
.caps { border-top: 1px solid var(--rule-strong); }
.cap {
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--rule);
}
.cap__name {
  font-weight: 650;
  font-size: 1.0625rem;
  margin-bottom: 0.35rem;
}
.cap__body { color: var(--text-muted); max-width: 68ch; }

@media (min-width: 52rem) {
  .cap {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 0 2.5rem;
    align-items: start;
  }
  .cap__name { margin-bottom: 0; }
}

/* ---------- Data table (federal) --------------------------------------- */
.datatable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.datatable caption {
  text-align: left;
  padding-bottom: 0.7rem;
  color: var(--text-faint);
  font-size: 0.875rem;
}
.datatable th,
.datatable td {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: baseline;
}
.datatable th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  width: 40%;
  padding-right: 1rem;
}
.datatable td { color: var(--text); }

/* Unfilled registration data — must read as obviously not-yet-issued. */
.pending {
  display: inline-block;
  padding: 0.15em 0.55em;
  border: 1px dashed var(--pending-rule);
  border-radius: 2px;
  background-color: var(--pending-bg);
  color: var(--pending-text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- NAICS ------------------------------------------------------ */
.naics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.naics li {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.naics b {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
  margin-right: 0.4rem;
}

/* ---------- Contact ---------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2.5rem;
  align-items: start;
}
@media (min-width: 46rem) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) auto; }
}

.contact__list { display: grid; gap: 0.9rem; }
/* Two actions, deliberately. The phone number was removed at the operator's
   request (crawler harvesting), so booking and email are the only channels
   left — and a page whose single call to action points at a host that is
   down has no working contact path at all. */
.contact__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
}
.contact__key {
  min-width: 5.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact__val { font-size: 1.0625rem; }

/* ---------- Footer ----------------------------------------------------- */
.footer {
  border-top: 1px solid var(--rule);
  background-color: var(--bg-sunken);
  padding-block: 2.5rem;
  font-size: 0.875rem;
  color: var(--text-faint);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}
.footer__legal { font-family: var(--font-mono); letter-spacing: 0.04em; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--accent-deep); text-decoration: underline; }

/* ---------- 404 -------------------------------------------------------- */
.notfound {
  padding-block: clamp(4rem, 14vw, 9rem);
}
.notfound__code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: block;
  margin-bottom: 1.4rem;
}
.notfound__title { font-size: clamp(1.75rem, 4.5vw, 2.5rem); }
.notfound__body { margin-top: 1.1rem; color: var(--text-muted); max-width: 44ch; }
.notfound__links {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- Reduced motion --------------------------------------------
   Disables every animation and transition on the page, including the
   smooth-scroll behaviour, for users who ask for it.                     */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn { transition: none !important; }
}


/* =========================================================================
   SECTIONS ADDED 2026-09-05 — the page was 386 words and read as unfinished.
   A consultancy with no logos, no case studies and no team has to DEMONSTRATE
   expertise instead of citing clients, which means prose. These components
   carry it.

   Every section now gets a real display heading under the mono eyebrow. The
   eyebrow alone was the single biggest reason the page looked like a
   template: a document label is not a headline, and a page whose only
   headline is the hero has one idea on it.
   ========================================================================= */

.section__head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.section__head .eyebrow { margin-bottom: 1rem; }

.section__title {
  font-size: var(--step-3);
  letter-spacing: -0.028em;
  line-height: 1.05;
  max-width: 22ch;
}
.section__lede {
  margin-top: 1rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 56ch;
}

/* ---------- Prose ------------------------------------------------------ */
.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.1rem; }
.prose p { color: var(--text-muted); line-height: 1.65; }
.prose strong { color: var(--text); font-weight: 650; }

/* ---------- The cost story --------------------------------------------- */
.story {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .story { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}
.story__pull {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background-color: var(--accent-tint);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
}
.story__pull p {
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.012em;
}

/* ---------- The five-day audit ----------------------------------------- */
.days { border-top: 1px solid var(--rule-strong); }
.day {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem 2rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--rule);
}
.day__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding-top: 0.3rem;
}
.day__title { font-size: var(--step-1); font-weight: 650; letter-spacing: -0.018em; }
.day__body  { color: var(--text-muted); max-width: 60ch; margin-top: 0.3rem; }
@media (min-width: 46rem) {
  .day { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; }
  .day__label { grid-row: span 2; }
}

/* ---------- Teaching pieces -------------------------------------------- */
.pieces { display: grid; gap: 0; grid-template-columns: 1fr; }
.piece {
  padding-block: 1.9rem;
  border-top: 1px solid var(--rule);
}
.piece:first-child { border-top: 0; padding-top: 0; }
.piece__title {
  font-size: var(--step-2);
  letter-spacing: -0.024em;
  line-height: 1.1;
  margin-bottom: 0.8rem;
  max-width: 20ch;
}
.piece__body { color: var(--text-muted); max-width: 46ch; }
.piece__body p + p { margin-top: 0.85rem; }
@media (min-width: 62rem) {
  .pieces { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); }
  .piece { border-top: 1px solid var(--rule-strong); padding-top: 1.6rem; padding-bottom: 0; }
  .piece:first-child { border-top: 1px solid var(--rule-strong); padding-top: 1.6rem; }
}

/* ---------- FAQ --------------------------------------------------------
   Real <details>, so it works with no JavaScript at all — the site ships
   none and must keep shipping none under `script-src 'self'`. */
.faq { border-top: 1px solid var(--rule-strong); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.25rem;
  cursor: pointer;
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.018em;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--accent-deep);
  transition: transform 140ms ease;
}
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a { padding-bottom: 1.4rem; color: var(--text-muted); max-width: 62ch; }
.faq__a p + p { margin-top: 0.85rem; }

/* ---------- Reduced motion additions ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none !important; }
}

/* ---------- Print: the federal page is going to get printed ------------ */
@media print {
  :root {
    --bg: #ffffff; --text: #000000; --text-muted: #222222;
    --text-faint: #444444; --accent-tint: #ffffff;
    /* On paper the fill green would flood toner and the mark reads better
       solid, so both accent roles collapse to the deep value. */
    --accent: #187109; --accent-deep: #187109; --accent-deep-hover: #187109;
  }
  .masthead__nav, .hero__cta, .notfound__links { display: none; }
  body { font-size: 10.5pt; }
  .section { padding-block: 1.25rem; }
  a { text-decoration: underline; }
}