/* ==========================================================================
   GunTech Cloud — public design system
   --------------------------------------------------------------------------
   Specification: DESIGN.md (brutalist editorial showroom).
   Canvas #e5e5e5, cards #ffffff, inverted blocks #000000.
   Zero box-shadows. Zero gradients. Depth is surface contrast plus radius.

   This stylesheet is shared by the landing page, the documentation page, the
   legal drafts and the operator console, so console surfaces (tables, forms,
   inputs, buttons, status pills, empty states, a login card) are styled here
   even though this repository's console markup lives elsewhere.

   Class inventory
     Layout      .container .section .section--tight .section__head .stack
                 .cluster .grid .grid--2 .grid--3 .split .rule
     Type        .display .display-xl .heading .heading-sm .subheading .body
                 .small .eyebrow .mono .muted .lede .measure
     Nav         .site-header .nav .nav__inner .brand .brand__mark .brand__text
                 .nav__pill .nav__link .nav__cta .skip-link
     Buttons     .btn .btn--primary .btn--ghost .btn--link .btn--small
                 .btn--block
     Surfaces    .card .card--inverted .card--top-arc .card--feature .card__num
                 .card__label .card__title .card__body .card__meta .panel
                 .panel__head .panel__title .panel__body
     Tags        .tag .tag--mint .tag--dark .pill .status .status--ok
                 .status--warn .status--error .status--idle .dot
     Code        .code-block .code__head .code__label .code__actions
                 .code__body .code__wrap .copy-btn .copy-status .copy-scratch
     Tables      .table-wrap .table .table--routes .cell-mono .error-code
     Forms       .form .field .field__label .field__hint .field__error
                 .field--inline .checkbox .consent .form__actions .form__status
                 .notice .notice--closed .hp-field
     Feedback    .alert .alert--error .alert--success .alert--warn .callout
                 .callout--inverted .callout__title .empty-state
                 .empty-state__title .empty-state__text
     Landing     .hero .hero__grid .hero__copy .hero__title .hero__line
                 .hero__sub .hero__actions .hero__note .arch… .problem
                 .problem__item .checklist .checklist__mark .boundary
                 .boundary__col .boundary__title .boundary__list .facts .fact
                 .fact__key .fact__value .faq .faq__item .faq__body
     Docs        .doc .doc__intro .doc__section .toc .toc__list .toc__link
     Console     .console .console__bar .console__user .login-card
                 .login-card__title .stat-grid .stat .stat__value .stat__label
                 .toolbar .badge .progress .progress__bar .key-reveal .tabs
                 .tab .spinner
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — every value is taken from DESIGN.md
   -------------------------------------------------------------------------- */

:root {
  /* Colors */
  --color-carbon-black: #000000;
  --color-paper-white: #ffffff;
  --color-warm-canvas: #e5e5e5;
  --color-mist-gray: #f3f3f3;
  --color-ash: #c6c6c6;
  --color-smoke: #979797;
  --color-slate: #444444;
  --color-graphite: #2f2f2f;
  --color-mint-chip: #d1ffca;
  --color-voltage-yellow: #fff100;

  /* Font families — local substitutes only. No webfont is fetched, so a
     condensed face is used when the reader already has one installed. */
  --font-display: Anton, 'Bebas Neue', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: Inter, 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale */
  --text-caption: 12px;
  --leading-caption: 1.6;
  --tracking-caption: -0.36px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.3;
  --tracking-body-sm: -0.154px;
  --text-body: 16px;
  --leading-body: 1.25;
  --text-subheading: 18px;
  --leading-subheading: 1.33;
  --text-subheading-lg: 20px;
  --leading-subheading-lg: 1.2;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: -0.84px;
  --text-heading: 40px;
  --leading-heading: 1.1;
  --tracking-heading: -0.8px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 0.9;
  --tracking-heading-lg: -1.44px;
  --text-display: 80px;
  --leading-display: 0.9;
  --tracking-display: -2.4px;
  --text-display-xl: 130px;
  --leading-display-xl: 0.9;
  --tracking-display-xl: -3.9px;

  /* Weights */
  --font-weight-regular: 400;
  --font-weight-450: 450;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 24px;
  --nav-height: 8rem;

  /* Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 48px;
  --radius-full-2: 64px;

  /* Surfaces */
  --surface-canvas: var(--color-warm-canvas);
  --surface-card: var(--color-paper-white);
  --surface-inverted: var(--color-carbon-black);
  --surface-mist: var(--color-mist-gray);

  /* Hairlines: structural only, and never the sole separator for a card. */
  --hairline: 1.5px solid var(--color-ash);

  --transition-fast: 120ms ease;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--spacing-96);
}

body {
  margin: 0;
  background-color: var(--surface-canvas);
  color: var(--color-carbon-black);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  letter-spacing: -0.011em;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a {
  color: var(--color-carbon-black);
  text-decoration: none;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration: underline;
}

strong,
b {
  font-weight: var(--font-weight-medium);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

hr {
  border: 0;
  border-top: var(--hairline);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--color-carbon-black);
  outline-offset: 2px;
}

.card--inverted :focus-visible,
.callout--inverted :focus-visible,
.boundary :focus-visible {
  outline-color: var(--color-paper-white);
}

::selection {
  background-color: var(--color-mint-chip);
  color: var(--color-carbon-black);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

.display,
.display-xl,
.heading,
.heading-sm,
.section__title,
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
}

.display-xl {
  font-size: var(--text-display-xl);
  line-height: var(--leading-display-xl);
}

.heading {
  font-size: clamp(32px, 4.4vw, var(--text-heading));
  line-height: var(--leading-heading);
}

.heading-sm {
  font-size: clamp(24px, 3vw, var(--text-heading-sm));
  line-height: var(--leading-heading-sm);
}

.section__title {
  font-size: clamp(48px, 5.4vw, 64px);
  line-height: 0.9;
}

.subheading {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: -0.01em;
  font-weight: var(--font-weight-450);
}

.body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.small {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
}

.lede {
  font-size: clamp(17px, 1.6vw, var(--text-subheading-lg));
  line-height: var(--leading-subheading-lg);
  color: var(--color-slate);
  font-weight: var(--font-weight-450);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-slate);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: -0.03em;
}

.muted {
  color: var(--color-slate);
}

.dim {
  color: var(--color-smoke);
}

.measure {
  max-width: 62ch;
}

.visually-hidden {
  position: absolute;
  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;
}

/* Screen-reader skip link: off-canvas until focused. */
.skip-link {
  position: absolute;
  left: var(--spacing-16);
  top: -100px;
  z-index: 100;
  display: inline-block;
  padding: 12px 20px;
  background-color: var(--color-carbon-black);
  color: var(--color-paper-white);
  border-radius: var(--radius-lg);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--spacing-16);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}

.section {
  margin-top: var(--section-gap);
}

.section--tight {
  margin-top: var(--spacing-64);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-40);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.stack--24 {
  gap: var(--spacing-24);
}

.stack--40 {
  gap: var(--spacing-40);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16);
}

.grid {
  display: grid;
  gap: var(--spacing-24);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-40);
  align-items: start;
}

.rule {
  border-top: var(--hairline);
  margin-block: var(--spacing-40);
}

/* --------------------------------------------------------------------------
   5. Navigation — 8rem bar, centred white pill, one filled CTA
   -------------------------------------------------------------------------- */

.site-header {
  padding-top: var(--spacing-16);
}

.nav {
  display: flex;
  align-items: center;
  min-height: var(--nav-height);
}

.nav__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-16);
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

.brand__mark {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background-color: var(--color-carbon-black);
  position: relative;
}

.brand__mark::after {
  content: "";
  position: absolute;
  inset: 7px 5px;
  background-color: var(--color-mint-chip);
  border-radius: 2px;
}

.brand__text {
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.nav__pill {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  padding: 14px var(--spacing-24);
  background-color: var(--color-paper-white);
  border-radius: var(--radius-full);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav__pill::-webkit-scrollbar {
  display: none;
}

.nav__link {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate);
  white-space: nowrap;
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--color-carbon-black);
}

.nav__cta {
  justify-self: end;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-24);
  border: 1.5px solid transparent;
  border-radius: var(--radius-lg);
  background: none;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  letter-spacing: -0.011em;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn:hover {
  text-decoration: none;
}

.btn--primary {
  background-color: var(--color-carbon-black);
  color: var(--color-paper-white);
  border-color: var(--color-carbon-black);
}

.btn--primary:hover {
  background-color: var(--color-graphite);
  border-color: var(--color-graphite);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-slate);
  border-color: var(--color-slate);
  border-radius: var(--radius-md);
  padding: var(--spacing-16) var(--spacing-16);
}

.btn--ghost:hover {
  background-color: var(--color-paper-white);
  color: var(--color-carbon-black);
  border-color: var(--color-carbon-black);
}

.btn--link {
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-carbon-black);
  text-decoration: none;
}

.btn--link:hover {
  text-decoration: underline;
}

.btn--small {
  padding: 10px var(--spacing-16);
  font-size: var(--text-body-sm);
}

.btn--block {
  width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background-color: var(--color-ash);
  border-color: var(--color-ash);
  color: var(--color-slate);
  cursor: not-allowed;
}

.btn--ghost:disabled,
.btn--ghost[aria-disabled="true"] {
  background-color: transparent;
  border-color: var(--color-ash);
  color: var(--color-smoke);
}

/* --------------------------------------------------------------------------
   7. Surfaces: cards, panels, inverted blocks
   -------------------------------------------------------------------------- */

.card {
  padding: var(--card-padding);
  background-color: var(--surface-card);
  border-radius: var(--radius-3xl);
}

.card--feature {
  border-radius: var(--radius-3xl-2);
  padding: var(--spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.card--inverted {
  background-color: var(--surface-inverted);
  color: var(--color-paper-white);
  border-radius: var(--radius-3xl-2);
  padding: var(--spacing-40);
}

.card--inverted a {
  color: var(--color-paper-white);
}

.card--inverted .muted,
.card--inverted .lede {
  color: var(--color-smoke);
}

.card--top-arc {
  border-radius: var(--radius-full-2) var(--radius-full-2) 0 0;
  padding: var(--spacing-40) var(--card-padding);
}

.card__num {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  color: var(--color-smoke);
}

.card__label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-slate);
}

.card__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: var(--font-weight-bold);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.card__body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-slate);
}

.card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  color: var(--color-smoke);
  margin-top: auto;
}

.panel {
  background-color: var(--surface-card);
  border-radius: var(--radius-3xl);
  padding: var(--spacing-24);
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-16);
}

.panel__title {
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
}

.panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

/* --------------------------------------------------------------------------
   8. Tags, pills, status
   -------------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full-2);
  background-color: var(--color-mist-gray);
  color: var(--color-carbon-black);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--mint {
  background-color: var(--color-mint-chip);
}

.tag--dark {
  background-color: var(--color-carbon-black);
  color: var(--color-paper-white);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: var(--hairline);
  border-radius: var(--radius-full-2);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full-2);
  background-color: var(--color-mist-gray);
  color: var(--color-carbon-black);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-smoke);
}

.status--ok {
  background-color: var(--color-mint-chip);
}

.status--ok::before {
  background-color: #1f7a1f;
}

.status--warn {
  background-color: var(--color-voltage-yellow);
}

.status--warn::before {
  background-color: var(--color-carbon-black);
}

.status--error {
  background-color: var(--color-carbon-black);
  color: var(--color-paper-white);
}

.status--error::before {
  background-color: var(--color-paper-white);
}

.status--idle::before {
  background-color: var(--color-smoke);
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-smoke);
}

.dot--mint {
  background-color: var(--color-mint-chip);
}

.dot--black {
  background-color: var(--color-carbon-black);
}

.badge {
  display: inline-block;
  min-width: 22px;
  padding: 2px 8px;
  border-radius: var(--radius-full-2);
  background-color: var(--color-carbon-black);
  color: var(--color-paper-white);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  text-align: center;
}

/* --------------------------------------------------------------------------
   9. Code surfaces
   -------------------------------------------------------------------------- */

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.86em;
  letter-spacing: -0.02em;
}

p code,
li code,
td code,
th code,
dd code {
  padding: 2px 6px;
  background-color: var(--color-mist-gray);
  border-radius: var(--radius-md);
  
}

.code-block {
  background-color: var(--surface-inverted);
  color: var(--color-paper-white);
  border-radius: var(--radius-3xl-2);
  overflow: hidden;
}

.code__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-24);
  border-bottom: 1px solid var(--color-graphite);
}

.code__label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-smoke);
}

.code__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}

.code__body {
  margin: 0;
  padding: var(--spacing-24);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--color-paper-white);
  white-space: pre;
  tab-size: 2;
}

.code__body code {
  font-size: inherit;
  background: none;
  padding: 0;
}

.code__wrap {
  background-color: var(--surface-inverted);
  border-radius: var(--radius-3xl);
  padding: var(--spacing-24);
  overflow-x: auto;
}

.code__wrap pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--color-paper-white);
  white-space: pre;
}

.copy-btn {
  border-color: var(--color-smoke);
  color: var(--color-paper-white);
  background-color: transparent;
}

.copy-btn:hover {
  background-color: var(--color-paper-white);
  color: var(--color-carbon-black);
  border-color: var(--color-paper-white);
}

.copy-status {
  min-height: 1.3em;
  max-width: 34ch;
  line-height: 1.3;
  text-align: right;
  color: var(--color-smoke);
}

.copy-status--ok {
  color: var(--color-mint-chip);
}

.copy-status--fail {
  color: var(--color-voltage-yellow);
}

/* Off-screen scratch element used by the clipboard fallback. */
.copy-scratch {
  position: fixed;
  top: 0;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.kbd {
  display: inline-block;
  padding: 2px 6px;
  border: var(--hairline);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}

/* --------------------------------------------------------------------------
   10. Tables — used by the docs route/error tables and by the console
   -------------------------------------------------------------------------- */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  background-color: var(--surface-card);
  border-radius: var(--radius-3xl);
  padding: var(--spacing-8);
}

.table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
  line-height: 1.4;
  text-align: left;
}

.table caption {
  padding: var(--spacing-16);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-slate);
}

.table th {
  padding: 12px var(--spacing-16);
  border-bottom: var(--hairline);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.table td {
  padding: 12px var(--spacing-16);
  border-bottom: 1px solid var(--color-mist-gray);
  vertical-align: top;
  color: var(--color-slate);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table--routes td:first-child,
.table--routes td:nth-child(2) {
  color: var(--color-carbon-black);
}

.cell-mono {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  color: var(--color-carbon-black);
  white-space: nowrap;
}

.error-code {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  color: var(--color-carbon-black);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   11. Forms — landing intake and console forms
   -------------------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.field__label {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
}

.field__hint {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  color: var(--color-smoke);
}

.field__error {
  font-size: var(--text-body-sm);
  color: var(--color-carbon-black);
  font-weight: var(--font-weight-medium);
}

.field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-8);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 14px var(--spacing-16);
  background-color: var(--surface-card);
  color: var(--color-carbon-black);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  font-size: var(--text-body);
  line-height: 1.2;
  letter-spacing: -0.011em;
  appearance: none;
}

textarea {
  min-height: 108px;
  resize: vertical;
}

select {
  background-image: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-smoke);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-slate);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-carbon-black);
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--color-mist-gray);
  border-color: var(--color-ash);
  color: var(--color-slate);
  cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  accent-color: var(--color-carbon-black);
  cursor: pointer;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  cursor: not-allowed;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.checkbox__text {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-slate);
}

.consent {
  padding: var(--spacing-16);
  background-color: var(--color-mist-gray);
  border-radius: var(--radius-3xl);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16);
}

.form__status {
  min-height: 1.4em;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-slate);
}

.form__status--ok {
  color: var(--color-carbon-black);
  font-weight: var(--font-weight-medium);
}

.form__status--error {
  color: var(--color-carbon-black);
  font-weight: var(--font-weight-medium);
  border-left: 4px solid var(--color-carbon-black);
  padding-left: 12px;
}

.notice {
  padding: var(--spacing-16);
  background-color: var(--color-mist-gray);
  border-radius: var(--radius-3xl);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-slate);
}

.notice--closed {
  background-color: var(--color-carbon-black);
  color: var(--color-paper-white);
  font-weight: var(--font-weight-medium);
}

.notice--closed a {
  color: var(--color-paper-white);
}

/* Honeypot: visually removed, still present in the form payload. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.turnstile-slot {
  min-height: 0;
}

.turnstile-slot[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   12. Feedback: alerts, callouts, empty states, progress
   -------------------------------------------------------------------------- */

.alert {
  padding: var(--spacing-16);
  border-radius: var(--radius-3xl);
  background-color: var(--color-mist-gray);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.alert--error {
  background-color: var(--color-carbon-black);
  color: var(--color-paper-white);
}

.alert--success {
  background-color: var(--color-mint-chip);
  color: var(--color-carbon-black);
}

.alert--warn {
  background-color: var(--color-mist-gray);
  color: var(--color-carbon-black);
  border-left: 4px solid var(--color-voltage-yellow);
  font-weight: var(--font-weight-medium);
}

.callout {
  padding: var(--spacing-24);
  background-color: var(--surface-card);
  border-left: 4px solid var(--color-carbon-black);
  border-radius: var(--radius-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.callout--inverted {
  background-color: var(--surface-inverted);
  color: var(--color-paper-white);
  border-left: 0;
  border-radius: var(--radius-3xl-2);
  padding: var(--spacing-40);
}

.callout--inverted .muted,
.callout--inverted .card__body {
  color: var(--color-smoke);
}

.callout--inverted a {
  color: var(--color-voltage-yellow);
}

.callout__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: var(--font-weight-bold);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  padding: var(--spacing-40) var(--spacing-24);
  background-color: var(--color-mist-gray);
  border-radius: var(--radius-3xl);
  text-align: left;
}

.empty-state__title {
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
}

.empty-state__text {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-slate);
  max-width: 52ch;
}

.progress {
  width: 100%;
  height: 12px;
  background-color: var(--color-mist-gray);
  border-radius: var(--radius-full-2);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background-color: var(--color-carbon-black);
  border-radius: var(--radius-full-2);
}

/* --------------------------------------------------------------------------
   13. Landing: hero and the architecture diagram
   -------------------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding-top: var(--spacing-40);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-40);
  align-items: start;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

/**
 * Hero display type.
 *
 * The headline is a two-line lockup: "Claude access," / "under control." Each
 * `.hero__line` is a block, so a line may only break where the markup says it
 * does. That makes the font size a hard layout constraint, not a taste call.
 *
 * Budget, worst case, with no condensed face installed (the stack falls back to
 * Arial Narrow and then to the generic sans-serif). The em figures below are
 * measured from the real TrueType advance tables, not estimated:
 *
 *   column   the copy track is half of a 1200px container minus its 24px gutters
 *            and the 40px grid gap → (1200 − 48 − 40) / 2 = 556px. Just above
 *            the 1024px breakpoint the container is still fluid, which is the
 *            tightest two-column case: (1024 − 48 − 40) / 2 = 468px.
 *   line     "under control." is 14 characters. In Arial/Helvetica Bold the
 *            uppercase advances total 9.055em, and −0.03em tracking over 14
 *            characters removes 0.42em → 8.635em. Verdana Bold, the widest
 *            grotesque that could ever be picked up as the generic sans-serif,
 *            totals 10.029em of advance width, less the same 0.42em of tracking
 *            = 9.609em. Size everything against 9.609em.
 *   max      556 / 9.609 = 57.9px is the absolute ceiling at 1200px, so 56px is
 *            the largest safe maximum: 56 × 9.609 = 538px of 556px (96.8%).
 *            With the realistic worst fallback (Arial Bold) it is 484px (87%).
 *   middle   at 1025px the column is 468px, so the fluid term must satisfy
 *            k × 1025 ≤ 468 / 9.609 = 48.7px → k ≤ 4.75vw. 4.5vw (46.1px at
 *            1025px) renders 443px of 468px — 94.6%, the tightest point in the
 *            whole range.
 *   min      360px viewport with 16px gutters leaves 328px; 32px × 9.609 =
 *            307px (93.7%). A second step covers viewports below 360px; see the
 *            359px media query in section 18.
 *
 * `overflow-wrap: break-word` is inherited from the display rule as a last-resort
 * guard, but no realistic fallback reaches it at these sizes.
 */
.hero__title {
  font-size: clamp(32px, 4.5vw, 56px);
  margin: 0;
}

.hero__line {
  display: block;
}

.hero__sub {
  font-size: clamp(17px, 1.6vw, var(--text-subheading-lg));
  line-height: var(--leading-subheading-lg);
  color: var(--color-slate);
  font-weight: var(--font-weight-450);
  max-width: 46ch;
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  align-items: center;
}

/**
 * Retained as part of the shared class surface. The landing hero no longer
 * carries an affiliation note — that statement now appears once, quietly, in
 * the footer — so nothing renders this rule today.
 */
.hero__note {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  color: var(--color-smoke);
  max-width: 44ch;
}

.arch {
  margin: 0;
  padding: var(--spacing-24);
  background-color: var(--surface-card);
  border-radius: var(--radius-3xl-2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.arch__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-8);
}

.arch__flow {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-8);
}

.arch__node {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--spacing-16);
  background-color: var(--color-mist-gray);
  border-radius: var(--radius-2xl);
}

.arch__node--inverted {
  background-color: var(--color-carbon-black);
  color: var(--color-paper-white);
}

.arch__node-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-smoke);
}

.arch__node--inverted .arch__node-label {
  color: var(--color-smoke);
}

.arch__node-title {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
}

.arch__node-meta {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--color-slate);
}

.arch__node--inverted .arch__node-meta {
  color: var(--color-ash);
}

.arch__link {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
}

.arch__line {
  flex: 1 1 auto;
  height: 0;
  border-top: 1.5px solid var(--color-slate);
}

.arch__arrow {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-top: 1.5px solid var(--color-slate);
  border-right: 1.5px solid var(--color-slate);
  transform: rotate(45deg);
  margin-left: -2px;
}

.arch__loop {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding-left: var(--spacing-8);
}

.arch__loop-line {
  flex: 0 0 40px;
  height: 0;
  border-top: 1.5px dashed var(--color-ash);
}

.arch__loop-text {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--color-smoke);
}

.arch__caption {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-slate);
}

/* --------------------------------------------------------------------------
   14. Landing: problem, capabilities, boundary, FAQ
   -------------------------------------------------------------------------- */

.problem {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.problem__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--spacing-16);
  padding-top: var(--spacing-24);
  border-top: var(--hairline);
}

.problem__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.problem__index {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  color: var(--color-smoke);
}

.problem__title {
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.problem__body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-slate);
  max-width: 60ch;
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checklist__item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: var(--text-body-sm);
  line-height: 1.45;
}

.checklist__mark {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--color-carbon-black);
}

.card--inverted .checklist__mark {
  color: var(--color-mint-chip);
}

.boundary {
  background-color: var(--surface-inverted);
  color: var(--color-paper-white);
  border-radius: var(--radius-3xl-2);
  padding: var(--spacing-40);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}

.boundary__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-40);
}

.boundary__col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.boundary__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: var(--font-weight-bold);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-paper-white);
}

.boundary__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.boundary__item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  font-size: var(--text-body-sm);
  line-height: 1.45;
  color: var(--color-ash);
}

.boundary__mark {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-mint-chip);
}

.boundary__foot {
  border-top: 1px solid var(--color-graphite);
  padding-top: var(--spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
}

.facts--after {
  margin-top: var(--spacing-24);
}

.fact {
  padding: var(--spacing-16);
  background-color: var(--color-mist-gray);
  border-radius: var(--radius-3xl);
}

.fact__key {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-smoke);
  margin-bottom: 4px;
}

.fact__value {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: var(--font-weight-medium);
}

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.faq__item {
  background-color: var(--surface-card);
  border-radius: var(--radius-3xl);
  padding: var(--spacing-16) var(--spacing-24);
}

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--text-subheading);
  line-height: 1;
  color: var(--color-smoke);
  flex: 0 0 auto;
}

.faq__item[open] summary::after {
  content: "–";
}

.faq__item summary:hover {
  text-decoration: none;
}

.faq__question {
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-450);
  line-height: var(--leading-subheading);
  letter-spacing: -0.02em;
}

.faq__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: var(--spacing-16);
  color: var(--color-slate);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: 72ch;
}

/* --------------------------------------------------------------------------
   15. Documentation page
   -------------------------------------------------------------------------- */

.doc {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  padding-top: var(--spacing-40);
}

.doc__intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.doc__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  scroll-margin-top: var(--spacing-96);
}

.toc {
  background-color: var(--surface-card);
  border-radius: var(--radius-3xl);
  padding: var(--spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.toc__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px var(--spacing-24);
  counter-reset: toc;
}

.toc__link {
  display: flex;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
  color: var(--color-slate);
  padding: 4px 0;
}

.toc__link::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-smoke);
}

.toc__link:hover {
  color: var(--color-carbon-black);
}

/* --------------------------------------------------------------------------
   16. Console surfaces
   -------------------------------------------------------------------------- */

.console {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding-block: var(--spacing-40);
}

.console__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-24);
  background-color: var(--surface-card);
  border-radius: var(--radius-full);
}

.console__user {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  color: var(--color-slate);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16);
}

.login-card {
  width: 100%;
  max-width: 460px;
  margin: var(--spacing-80) auto;
  padding: var(--spacing-24);
  background-color: var(--surface-card);
  border-radius: var(--radius-3xl-2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.login-card__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, var(--text-heading-lg));
  font-weight: var(--font-weight-bold);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-16);
}

.stat {
  padding: var(--spacing-24);
  background-color: var(--surface-card);
  border-radius: var(--radius-3xl);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-bold);
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-smoke);
}

.key-reveal {
  display: block;
  padding: var(--spacing-16);
  background-color: var(--color-mint-chip);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  letter-spacing: -0.02em;
  word-break: break-all;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.tab {
  padding: 8px var(--spacing-16);
  border-radius: var(--radius-full-2);
  background-color: var(--color-mist-gray);
  color: var(--color-slate);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  border: 0;
  cursor: pointer;
}

.tab[aria-selected="true"] {
  background-color: var(--color-carbon-black);
  color: var(--color-paper-white);
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-ash);
  border-top-color: var(--color-carbon-black);
  border-radius: 50%;
  animation: gt-spin 700ms linear infinite;
}

@keyframes gt-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--spacing-80);
  padding: var(--spacing-40) 0;
  background-color: var(--surface-inverted);
  color: var(--color-paper-white);
  border-radius: var(--radius-3xl-2) var(--radius-3xl-2) 0 0;
}

.site-footer a {
  color: var(--color-paper-white);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--spacing-40);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.site-footer__title {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-smoke);
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-ash);
  max-width: 60ch;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
}

.email {
  display: inline-block;
  padding: 2px 6px;
  background-color: var(--color-voltage-yellow);
  color: var(--color-carbon-black);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  letter-spacing: -0.02em;
  border-radius: var(--radius-md);
}

.email:hover {
  text-decoration: none;
}

.site-footer__bottom {
  margin-top: var(--spacing-40);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-graphite);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -0.03em;
  color: var(--color-smoke);
}

/* --------------------------------------------------------------------------
   18. Responsive — 1024 / 860 / 720 / 480
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand cta"
      "pill pill";
    row-gap: var(--spacing-8);
  }

  .brand {
    grid-area: brand;
  }

  .nav__cta {
    grid-area: cta;
  }

  .nav__pill {
    grid-area: pill;
    justify-self: center;
  }

  .nav {
    min-height: 0;
    padding-block: var(--spacing-8);
  }
}

@media (max-width: 860px) {
  .split,
  .boundary__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .arch__flow {
    flex-direction: column;
    align-items: stretch;
  }

  .arch__link {
    flex: 0 0 32px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .arch__line {
    width: 0;
    flex: 1 1 auto;
    border-top: 0;
    border-left: 1.5px solid var(--color-slate);
  }

  .arch__arrow {
    transform: rotate(135deg);
    margin-left: 0;
    margin-top: -3px;
  }

  .toc__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  :root {
    --section-gap: var(--spacing-64);
  }

  .grid--2,
  .grid--3,
  .facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .card--inverted,
  .callout--inverted,
  .boundary {
    padding: var(--spacing-24);
  }

  .problem__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-8);
  }

  .hero__sub {
    max-width: none;
  }

  .table {
    min-width: 520px;
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: var(--spacing-16);
  }

  .nav__pill {
    gap: var(--spacing-16);
    padding: 12px var(--spacing-16);
  }

  .hero__actions .btn {
    width: 100%;
  }

  .btn {
    padding: 14px var(--spacing-16);
  }

  .code__body,
  .code__wrap pre {
    font-size: 12px;
  }
}

/**
 * Below the 360px design floor. The headline still has to hold one line per
 * `.hero__line`, and 32px does not survive a 320px viewport with a scrollbar in
 * the widest grotesque that a generic sans-serif could resolve to (Verdana Bold
 * measures 9.61em for "under control."). One step down keeps the lockup intact
 * on the narrowest phone still in use.
 */
@media (max-width: 359px) {
  .hero__title {
    font-size: clamp(24px, 8.75vw, 28px);
  }
}

/* --------------------------------------------------------------------------
   19. Reduced motion
   -------------------------------------------------------------------------- */

@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;
  }

  .spinner {
    animation: none;
    border-top-color: var(--color-ash);
  }
}