/* =============================================================================
   CyberBackstop — components.css
   Header/nav, buttons, cards, steps, checklist, CTA band, footer, forms,
   chalk texture utilities.

   Requires base.css (tokens + primitives) to be loaded first.
   No !important. No inline styles. No JavaScript required by anything here.

   CONTRAST RULES APPLIED THROUGHOUT (see base.css §2 for the measured table):
     • Text on any clay fill is --cb-night-950 (6.3:1 on clay-500). Never chalk.
     • --cb-chalk-500 is used ONLY for borders/rules (4.2–4.5:1 vs the grounds,
       clears the 3:1 non-text threshold; it would fail as body text).
     • Error COPY is --cb-clay-300 (10.0:1 on night-800); --cb-danger is used
       for the input border/rail only, where 3:1 applies.
   ============================================================================= */


/* =============================================================================
   1. CHALK TEXTURE UTILITIES
   Near-subliminal field linework. Gradients only — no image files.
   Alpha is capped at .022 so it can never move a text/background pairing.
   Applied via a z-index:-1 pseudo inside an isolated stacking context, so it
   sits above the band's background colour and below all content.
   ============================================================================= */

.cb-chalkline,
.cb-chalkgrid {
  position: relative;
  isolation: isolate;
}

.cb-chalkline::before,
.cb-chalkgrid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Diagonal chalk hatching — the default. */
.cb-chalkline::before {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.022) 0px,
    rgba(255,255,255,.022) 1px,
    transparent 1px,
    transparent 9px
  );
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

/* Groundskeeper's grid — squarer, for CTA bands and the footer. */
.cb-chalkgrid::before {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.020) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.020) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* Single warm bloom, as if one stadium bank is on. Decorative only. */
.cb-bloom {
  position: relative;
  isolation: isolate;
}

.cb-bloom::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(
    ellipse 60% 55% at 78% 0%,
    rgba(255,217,160,.055),
    transparent 70%
  );
}


/* =============================================================================
   2. HEADER + BRAND LOCKUP
   ============================================================================= */

.cb-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(11,15,22,.92);
  border-block-end: 1px solid var(--cb-line);
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .cb-header {
    background-color: rgba(11,15,22,.78);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
  }
}

.cb-header__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cb-space-4);
  min-height: var(--cb-header-h);
}

/* --- Brand lockup: mark slot + two-tone wordmark ------------------------- */

.cb-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--cb-chalk-100);
  flex: none;
}

.cb-brand:hover { color: var(--cb-chalk-50); }

/* Slot for assets/logo.svg (inline <svg> or <img>). */
.cb-brand__mark {
  display: block;
  width: 30px;
  height: 30px;
  flex: none;
}

.cb-brand__word {
  font-family: var(--cb-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* "Cyber" */
.cb-brand__word-a { color: var(--cb-chalk-100); }
/* "Backstop" — clay-500 on the night header = 6.1:1 */
.cb-brand__word-b { color: var(--cb-clay-500); }

/* Larger lockup for the footer / hero use. */
.cb-brand--lg .cb-brand__mark { width: 42px; height: 42px; }
.cb-brand--lg .cb-brand__word { font-size: 2rem; }


/* =============================================================================
   3. NAV — CSS-ONLY MOBILE MENU (zero JavaScript)
   Markup contract (order matters for the sibling selectors):
     <input class="cb-nav-toggle" type="checkbox" id="cb-nav-toggle"
            aria-label="Toggle main menu">
     <label class="cb-nav-btn" for="cb-nav-toggle"><span …bars…></label>
     <nav class="cb-nav" aria-label="Main"> … </nav>

   Accessibility notes:
     • The checkbox is a REAL control: clipped, never display:none, so it stays
       in the tab order and Space toggles it.
     • Its focus ring is forwarded to the visible label via :focus-visible + label.
     • The collapsed panel uses visibility:hidden, so its links are removed from
       the tab order while closed — and are fully reachable when open.
     • Nothing traps focus: tabbing past the last link simply continues into
       <main>, which also closes nothing and breaks nothing.
   ============================================================================= */

.cb-nav-toggle {
  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;
}

.cb-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  cursor: pointer;
  border: 1px solid var(--cb-chalk-500);
  border-radius: var(--cb-radius);
  color: var(--cb-chalk-100);
  background-color: transparent;
  transition: border-color var(--cb-dur) var(--cb-ease),
              background-color var(--cb-dur) var(--cb-ease);
}

.cb-nav-btn:hover {
  border-color: var(--cb-chalk-300);
  background-color: rgba(255,255,255,.06);
}

/* Three chalk bars, drawn in CSS. */
.cb-nav-btn__bars,
.cb-nav-btn__bars::before,
.cb-nav-btn__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform var(--cb-dur) var(--cb-ease),
              opacity var(--cb-dur-fast) var(--cb-ease);
}

.cb-nav-btn__bars {
  position: relative;
}

.cb-nav-btn__bars::before,
.cb-nav-btn__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.cb-nav-btn__bars::before { top: -6px; }
.cb-nav-btn__bars::after  { top: 6px; }

/* Open state → X */
.cb-nav-toggle:checked + .cb-nav-btn .cb-nav-btn__bars {
  background-color: transparent;
}

.cb-nav-toggle:checked + .cb-nav-btn .cb-nav-btn__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.cb-nav-toggle:checked + .cb-nav-btn .cb-nav-btn__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Forward the checkbox's focus ring onto the visible label. */
.cb-nav-toggle:focus-visible + .cb-nav-btn {
  outline: 3px solid var(--cb-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(7,10,15,.85);
}

/* --- Nav list ------------------------------------------------------------ */

.cb-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--cb-space-4), 2vw, var(--cb-space-6));
  list-style: none;
}

.cb-nav__link {
  display: inline-block;
  position: relative;
  padding-block: var(--cb-space-2);
  font-family: var(--cb-font-body);
  font-size: var(--cb-fs-sm);
  font-weight: 500;
  color: var(--cb-chalk-300);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--cb-dur) var(--cb-ease);
}

.cb-nav__link:hover { color: var(--cb-chalk-50); }

/* Chalk underline that grows from the left. */
.cb-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--cb-clay-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--cb-dur) var(--cb-ease);
}

.cb-nav__link:hover::after,
.cb-nav__link:focus-visible::after { transform: scaleX(1); }

/* Current page — mark with aria-current="page" in the markup. */
.cb-nav__link[aria-current="page"] {
  color: var(--cb-chalk-50);
}

.cb-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.cb-nav__cta { flex: none; }

/* --- Mobile: collapsed panel (below 900px) ------------------------------- */

@media (max-width: 899.98px) {
  .cb-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--cb-night-800);
    border-block-end: 1px solid var(--cb-line-strong);
    box-shadow: var(--cb-shadow-3);
    padding: var(--cb-space-5) var(--cb-gutter) var(--cb-space-6);

    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--cb-dur) var(--cb-ease),
                transform var(--cb-dur) var(--cb-ease),
                visibility 0s linear var(--cb-dur);
  }

  .cb-nav-toggle:checked ~ .cb-nav {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .cb-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .cb-nav__list > li + li { border-block-start: 1px solid var(--cb-line); }

  .cb-nav__link {
    display: block;
    padding-block: var(--cb-space-4);
    font-size: 1.0625rem;
  }

  .cb-nav__link::after { display: none; }

  .cb-nav__link[aria-current="page"] {
    color: var(--cb-clay-500);
  }

  .cb-nav__cta {
    display: flex;
    margin-block-start: var(--cb-space-5);
  }

  .cb-header__wrap { position: relative; }
}

/* --- Desktop: inline nav, no toggle -------------------------------------- */

@media (min-width: 900px) {
  /* Both the label and the checkbox go away, so the clipped input can't leave
     a phantom tab stop on desktop where there is nothing to toggle. */
  .cb-nav-btn { display: none; }
  .cb-nav-toggle { display: none; }

  .cb-nav {
    display: flex;
    align-items: center;
    gap: var(--cb-space-6);
  }
}


/* =============================================================================
   4. BUTTONS
   ============================================================================= */

.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 46px;
  padding: 0.7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--cb-radius);
  font-family: var(--cb-font-body);
  font-size: var(--cb-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--cb-dur) var(--cb-ease),
              border-color var(--cb-dur) var(--cb-ease),
              color var(--cb-dur) var(--cb-ease),
              transform var(--cb-dur-fast) var(--cb-ease);
}

.cb-btn:disabled,
.cb-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

/* --- Primary: clay fill, night text (6.3:1) ------------------------------ */

.cb-btn--primary {
  background-color: var(--cb-clay-500);
  border-color: var(--cb-clay-500);
  color: var(--cb-night-950);
  box-shadow: var(--cb-shadow-1);
}

.cb-btn--primary:hover {
  /* clay-400 keeps night-950 text at 8.6:1 */
  background-color: var(--cb-clay-400);
  border-color: var(--cb-clay-400);
  color: var(--cb-night-950);
}

.cb-btn--primary:active {
  /* stays on clay-500 rather than dropping to clay-600, which would put the
     night-950 label at 4.48:1 — under AA. Depth comes from the transform. */
  background-color: var(--cb-clay-500);
  border-color: var(--cb-clay-600);
  transform: translateY(1px);
  box-shadow: none;
}

/* --- Ghost: chalk hairline ----------------------------------------------- */

.cb-btn--ghost {
  background-color: transparent;
  /* chalk-500 border = 4.2–4.5:1 against the grounds (non-text needs 3:1) */
  border-color: var(--cb-chalk-500);
  color: var(--cb-chalk-100);
}

.cb-btn--ghost:hover {
  background-color: rgba(255,255,255,.07);
  border-color: var(--cb-chalk-300);
  color: var(--cb-chalk-50);
}

.cb-btn--ghost:active {
  background-color: rgba(255,255,255,.04);
  transform: translateY(1px);
}

/* --- Quiet: text-level action -------------------------------------------- */

.cb-btn--quiet {
  min-height: 0;
  padding: 0.35rem 0;
  background-color: transparent;
  border-color: transparent;
  color: var(--cb-clay-400);
}

.cb-btn--quiet .cb-btn__arrow {
  transition: transform var(--cb-dur) var(--cb-ease);
}

.cb-btn--quiet:hover {
  color: var(--cb-clay-300);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.cb-btn--quiet:hover .cb-btn__arrow { transform: translateX(3px); }

/* --- Sizes and layout modifiers ------------------------------------------ */

.cb-btn--sm {
  min-height: 38px;
  padding: 0.45rem 1rem;
  font-size: var(--cb-fs-xs);
}

.cb-btn--lg {
  min-height: 54px;
  padding: 0.9rem 2rem;
  font-size: 1.0625rem;
}

.cb-btn--block {
  display: flex;
  width: 100%;
}

/* Trailing glyph slot (→, chevron svg). Mark aria-hidden in markup. */
.cb-btn__arrow {
  display: inline-block;
  line-height: 1;
}

/* Button row with sensible wrapping on narrow screens. */
.cb-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-3);
}

@media (max-width: 400px) {
  .cb-btn-row .cb-btn { width: 100%; }
}


/* =============================================================================
   5. CARDS
   ============================================================================= */

.cb-card {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-3);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  background-color: var(--cb-night-700);
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius);
  transition: border-color var(--cb-dur) var(--cb-ease),
              transform var(--cb-dur) var(--cb-ease),
              box-shadow var(--cb-dur) var(--cb-ease);
}

.cb-card__eyebrow {
  font-family: var(--cb-font-mono);
  font-size: var(--cb-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--cb-track-eyebrow);
  text-transform: uppercase;
  color: var(--cb-clay-500);
}

.cb-card__title {
  font-family: var(--cb-font-display);
  font-size: var(--cb-fs-h3);
  font-weight: 600;
  line-height: 1.15;
  color: var(--cb-chalk-50);
}

/* chalk-300 on night-700 = 9.8:1 */
.cb-card__body {
  color: var(--cb-chalk-300);
  font-size: var(--cb-fs-body);
}

.cb-card__body p { max-width: none; }

.cb-card__foot {
  margin-block-start: auto;
  padding-block-start: var(--cb-space-3);
}

/* Interactive card (whole block is a link, or wraps one). */
.cb-card--link:hover,
.cb-card--link:focus-within {
  border-color: var(--cb-line-strong);
  transform: translateY(-2px);
  box-shadow: var(--cb-shadow-2);
}

/* Card that carries a clay top rail — use to flag the featured item. */
.cb-card--rail {
  border-block-start: 2px solid var(--cb-clay-500);
}

/* Quieter card for "what we don't do" style lists. */
.cb-card--flat {
  background-color: transparent;
  border-color: var(--cb-line);
}

/* --- Grid ---------------------------------------------------------------- */

.cb-card-grid {
  display: grid;
  gap: var(--cb-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: stretch;
}

.cb-card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.cb-card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* --- Pillar: the two big homepage blocks --------------------------------- */

.cb-pillar {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-4);
  padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  background-color: var(--cb-night-800);
  border: 1px solid var(--cb-line);
  border-block-start: 3px solid var(--cb-clay-500);
  border-radius: var(--cb-radius);
  transition: border-color var(--cb-dur) var(--cb-ease),
              box-shadow var(--cb-dur) var(--cb-ease);
}

.cb-pillar:hover,
.cb-pillar:focus-within {
  border-inline-color: var(--cb-line-strong);
  border-block-end-color: var(--cb-line-strong);
  box-shadow: var(--cb-shadow-2);
}

/* Mono index — "01" / "02". */
.cb-pillar__index {
  font-family: var(--cb-font-mono);
  font-size: var(--cb-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--cb-track-eyebrow);
  font-variant-numeric: tabular-nums;
  color: var(--cb-chalk-400);
}

.cb-pillar__title {
  font-family: var(--cb-font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cb-chalk-50);
}

.cb-pillar__kicker {
  font-size: var(--cb-fs-lead);
  line-height: 1.5;
  color: var(--cb-chalk-300);
}

.cb-pillar__body {
  color: var(--cb-text-muted);
}

/* Release the global 68ch <p> measure inside the pillar's own column. */
.cb-pillar__body p { max-width: none; }

.cb-pillar__foot {
  margin-block-start: auto;
  padding-block-start: var(--cb-space-4);
}


/* =============================================================================
   6. NUMBERED STEPS  ("How it works")
   Use an <ol class="cb-steps">. Numerals come from a CSS counter, so the
   markup stays plain and the numbers never desync from the source order.
   ============================================================================= */

.cb-steps {
  counter-reset: cb-step;
  display: grid;
  gap: var(--cb-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  list-style: none;
}

.cb-steps--stacked { grid-template-columns: 1fr; }

.cb-steps__item {
  counter-increment: cb-step;
  position: relative;
  padding-block-start: var(--cb-space-5);
  border-block-start: 1px solid var(--cb-line-strong);
}

.cb-steps__item::before {
  content: counter(cb-step, decimal-leading-zero);
  display: block;
  margin-block-end: var(--cb-space-3);
  font-family: var(--cb-font-mono);
  font-size: var(--cb-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--cb-track-eyebrow);
  font-variant-numeric: tabular-nums;
  /* clay-500 = 5.7–6.1:1 on the grounds this pattern sits on */
  color: var(--cb-clay-500);
}

.cb-steps__title {
  font-family: var(--cb-font-display);
  font-size: var(--cb-fs-h3);
  font-weight: 600;
  line-height: 1.12;
  color: var(--cb-chalk-50);
  margin-block-end: var(--cb-space-2);
}

.cb-steps__body {
  color: var(--cb-text-muted);
  font-size: var(--cb-fs-sm);
}

.cb-steps__body p { max-width: 46ch; }

/* Stacked variant: numeral to the left of the copy on wider screens. */
@media (min-width: 700px) {
  .cb-steps--stacked .cb-steps__item {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: var(--cb-space-5);
    align-items: start;
  }

  .cb-steps--stacked .cb-steps__item::before { margin-block-end: 0; }
}


/* =============================================================================
   7. CHECKLIST
   Custom marker: a tiny home plate drawn with clip-path. No emoji, no images.
   ============================================================================= */

.cb-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-3);
  list-style: none;
}

.cb-checklist > li {
  position: relative;
  padding-inline-start: 1.75rem;
  color: var(--cb-chalk-300);
}

/* Home plate: square top and shoulders, pointed bottom. */
.cb-checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 11px;
  height: 11px;
  background-color: var(--cb-clay-500);
  clip-path: polygon(0% 0%, 100% 0%, 100% 55%, 50% 100%, 0% 55%);
  transform: translateY(-2px);
}

/* Outline plate — for "what we don't do" / neutral inventories. */
.cb-checklist--quiet > li { color: var(--cb-text-muted); }

.cb-checklist--quiet > li::before {
  background-color: var(--cb-chalk-500);
}

/* Success-toned plates, used sparingly. */
.cb-checklist--safe > li::before {
  background-color: var(--cb-turf-500);
}

/* Roomier variant for long-form lists. */
.cb-checklist--loose { gap: var(--cb-space-4); }

.cb-checklist--loose > li { padding-inline-start: 2rem; }


/* =============================================================================
   8. CTA BAND
   ============================================================================= */

.cb-cta-band {
  background-color: var(--cb-night-800);
  border-block: 1px solid var(--cb-line);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.cb-cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cb-space-5);
  text-align: center;
}

.cb-cta-band__title {
  font-family: var(--cb-font-display);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--cb-chalk-50);
  text-wrap: balance;
}

.cb-cta-band__body {
  max-width: 56ch;
  font-size: var(--cb-fs-lead);
  line-height: 1.5;
  color: var(--cb-chalk-300);
}

.cb-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cb-space-3);
  margin-block-start: var(--cb-space-2);
}

/* Mono reassurance line under the buttons. chalk-400 = 7.0:1 on night-800. */
.cb-cta-band__note {
  font-family: var(--cb-font-mono);
  font-size: var(--cb-fs-xs);
  letter-spacing: var(--cb-track-mono);
  color: var(--cb-text-muted);
}

/* Split layout: copy left, actions right, on wide screens. */
@media (min-width: 860px) {
  .cb-cta-band--split .cb-cta-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: var(--cb-space-7);
  }

  .cb-cta-band--split .cb-cta-band__actions { margin-block-start: 0; }
}


/* =============================================================================
   9. FOOTER
   ============================================================================= */

.cb-footer {
  background-color: var(--cb-night-950);
  border-block-start: 1px solid var(--cb-line);
  padding-block: var(--cb-space-8) var(--cb-space-6);
  font-size: var(--cb-fs-sm);
}

.cb-footer__grid {
  display: grid;
  gap: var(--cb-space-7);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .cb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .cb-footer__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--cb-space-6);
  }
}

/* --- Brand block --------------------------------------------------------- */

.cb-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-4);
  max-width: 34ch;
}

/* chalk-400 on night-950 = 7.9:1 */
.cb-footer__tagline {
  color: var(--cb-text-muted);
  font-size: var(--cb-fs-sm);
  line-height: 1.55;
}

/* --- Link columns -------------------------------------------------------- */

.cb-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-3);
}

.cb-footer__title {
  font-family: var(--cb-font-mono);
  font-size: var(--cb-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--cb-track-eyebrow);
  text-transform: uppercase;
  /* chalk-400 rather than chalk-500 (which would be 4.7:1 but is reserved for
     rules); 7.9:1 here. */
  color: var(--cb-text-muted);
}

.cb-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-2);
  list-style: none;
}

.cb-footer__link {
  color: var(--cb-chalk-300);
  text-decoration: none;
  transition: color var(--cb-dur) var(--cb-ease);
}

.cb-footer__link:hover {
  color: var(--cb-chalk-50);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- Legal line ---------------------------------------------------------- */

.cb-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cb-space-3);
  margin-block-start: var(--cb-space-7);
  padding-block-start: var(--cb-space-5);
  border-block-start: 1px solid var(--cb-line);
  font-family: var(--cb-font-mono);
  font-size: var(--cb-fs-xs);
  letter-spacing: var(--cb-track-mono);
  color: var(--cb-text-muted);
}

.cb-footer__legal a {
  color: var(--cb-chalk-300);
  text-decoration: none;
}

.cb-footer__legal a:hover {
  color: var(--cb-chalk-50);
  text-decoration: underline;
}

/* One understated line acknowledging the sister brands. */
.cb-footer__family {
  color: var(--cb-text-muted);
}

.cb-footer__family a { color: var(--cb-chalk-300); }


/* =============================================================================
   10. FORMS
   ============================================================================= */

.cb-form {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-5);
  max-width: 640px;
}

.cb-form__grid {
  display: grid;
  gap: var(--cb-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .cb-form__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-form__grid .cb-field--full { grid-column: 1 / -1; }
}

.cb-fieldset {
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius);
  padding: var(--cb-space-5);
  margin: 0;
}

.cb-legend {
  padding-inline: var(--cb-space-2);
  font-family: var(--cb-font-mono);
  font-size: var(--cb-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--cb-track-eyebrow);
  text-transform: uppercase;
  color: var(--cb-chalk-300);
}

/* --- Field wrapper ------------------------------------------------------- */

.cb-field {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-2);
}

.cb-label {
  font-family: var(--cb-font-body);
  font-size: var(--cb-fs-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cb-chalk-100);
}

/* Required marker — clay-400 is 8.3:1 on night-900, 7.7:1 on night-800. */
.cb-label__req {
  color: var(--cb-clay-400);
  font-family: var(--cb-font-mono);
}

.cb-label__optional {
  font-weight: 400;
  color: var(--cb-text-muted);
}

/* --- Controls ------------------------------------------------------------ */

.cb-input,
.cb-textarea,
.cb-select {
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 0.85rem;
  background-color: var(--cb-night-800);
  /* chalk-500 border on night-800 = 4.2:1, clears the 3:1 non-text minimum */
  border: 1px solid var(--cb-chalk-500);
  border-radius: var(--cb-radius);
  color: var(--cb-chalk-100);
  font-family: var(--cb-font-body);
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color var(--cb-dur) var(--cb-ease),
              background-color var(--cb-dur) var(--cb-ease);
}

.cb-input:hover,
.cb-textarea:hover,
.cb-select:hover {
  border-color: var(--cb-chalk-300);
}

.cb-input:focus,
.cb-textarea:focus,
.cb-select:focus {
  border-color: var(--cb-clay-500);
  background-color: var(--cb-night-900);
}

.cb-textarea {
  min-height: 9rem;
  resize: vertical;
}

.cb-select {
  appearance: none;
  padding-inline-end: 2.5rem;
  cursor: pointer;
  /* Chevron drawn with gradients — no image file. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cb-chalk-300) 50%),
    linear-gradient(135deg, var(--cb-chalk-300) 50%, transparent 50%);
  background-position:
    right 1.15rem center,
    right 0.8rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.cb-select option {
  background-color: var(--cb-night-800);
  color: var(--cb-chalk-100);
}

.cb-input:disabled,
.cb-textarea:disabled,
.cb-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: var(--cb-night-600);
}

/* --- Checkbox / radio row ------------------------------------------------ */

.cb-check {
  display: flex;
  align-items: flex-start;
  gap: var(--cb-space-3);
  cursor: pointer;
}

.cb-check__box {
  width: 20px;
  height: 20px;
  flex: none;
  margin-block-start: 0.15rem;
  accent-color: var(--cb-clay-500);
  cursor: pointer;
}

.cb-check__label {
  font-size: var(--cb-fs-sm);
  line-height: 1.45;
  color: var(--cb-chalk-300);
}

/* --- Help text and errors ------------------------------------------------ */

/* chalk-400 = 7.0:1 on night-800/900. */
.cb-help {
  font-size: var(--cb-fs-xs);
  line-height: 1.5;
  color: var(--cb-text-muted);
}

/* Error copy uses clay-300 (10.0:1). --cb-danger is 3.97:1 and would fail as
   text, so it is confined to the border and the rail below. */
.cb-field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-family: var(--cb-font-mono);
  font-size: var(--cb-fs-xs);
  line-height: 1.5;
  letter-spacing: var(--cb-track-mono);
  color: var(--cb-clay-300);
}

/* Home-plate glyph as the error bullet, matching the checklist marker. */
.cb-field__error::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  margin-block-start: 0.4em;
  background-color: var(--cb-clay-300);
  clip-path: polygon(0% 0%, 100% 0%, 100% 55%, 50% 100%, 0% 55%);
}

.cb-field--error .cb-input,
.cb-field--error .cb-textarea,
.cb-field--error .cb-select,
.cb-input[aria-invalid="true"],
.cb-textarea[aria-invalid="true"],
.cb-select[aria-invalid="true"] {
  border-color: var(--cb-danger);
  border-inline-start-width: 3px;
}

/* Form-level status messages. */
.cb-form__status {
  padding: var(--cb-space-4);
  border: 1px solid var(--cb-line);
  border-inline-start: 3px solid var(--cb-chalk-500);
  border-radius: var(--cb-radius);
  background-color: var(--cb-night-800);
  font-size: var(--cb-fs-sm);
  color: var(--cb-chalk-300);
}

.cb-form__status--ok      { border-inline-start-color: var(--cb-success); }
.cb-form__status--error   { border-inline-start-color: var(--cb-danger); }

/* --- Honeypot ------------------------------------------------------------
   Visually hidden AND hidden from assistive tech. The wrapper should also
   carry aria-hidden="true" and the input tabindex="-1" autocomplete="off".
   Not display:none — some bots skip those; this keeps it in the layout tree
   but unreachable and unpaintable.                                          */

.cb-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* --- Submit row ---------------------------------------------------------- */

.cb-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cb-space-4);
}

.cb-form__actions .cb-help { max-width: 40ch; }