/* Hallmark · macrostructure: Split Studio · genre: modern-minimal
 * theme: custom (tuned) · vibe: "credible, sophisticated, minimal, high-value"
 * paper: oklch(98.6% 0.004 250) · accent: oklch(62% 0.11 75) warm brass
 * display: Space Grotesk · body: Inter · meta: JetBrains Mono
 * axes — paper band: light · display style: grotesk-sans · accent hue: warm
 * nav: N9 edge-aligned minimal · footer: Ft1 mast-headed
 * enrichment: E-custom editorial photography, contained inset (not full-bleed)
 *   6 scene photographs, one per page role, added in the ui-ux-pro-max pass
 * motion: MOTION_INTENSITY 4/10 — hero entrance stagger, one-time section-entry
 *   reveals, staggered list children, active-step highlight (How It Works),
 *   image hover-scale, animated nav underline. Transform/opacity only, no
 *   scroll-hijack, no pin/scrub, no spring. Added in the premium-motion pass.
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */

@import url("tokens.css");

/* ====================================================================
   Base
   ==================================================================== */

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

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

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-2);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* Headings are always roman. Emphasis is carried by weight and accent. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
  min-width: 0;
}

h1 { font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-h2); line-height: var(--leading-snug); }
h3 { font-size: var(--text-h3); line-height: 1.35; font-weight: 600; }

p { margin: 0 0 var(--space-sm); max-width: var(--measure); }

ul, ol { max-width: var(--measure); }

::selection { background: var(--color-accent-soft); color: var(--color-ink); }

/* Focus — instant, never transitioned, always visible. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.on-inverse :focus-visible { outline-color: var(--color-focus-inverse); }

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: calc(var(--space-sm) * -6);
  z-index: var(--z-sheet);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: 500;
}
.skip-link:focus-visible { top: var(--space-sm); }

/* Visually hidden but present for assistive tech / the document outline —
   used where an editorial image already carries a heading visually (see
   the Contact route cards) and a real <h2> is kept for structure only. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ====================================================================
   Layout
   ==================================================================== */

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

.container-prose { max-width: var(--container-prose); }

/* Section rhythm varies deliberately by role — uniform padding is what made
   the old pages read as a list of identical blocks. */
.section { padding-block: var(--space-3xl); }
.section-tight { padding-block: var(--space-2xl); }
.section-open { padding-block: var(--space-4xl); }
.section-alt { background: var(--color-paper-2); }
.section-ruled { border-top: var(--rule-hair) solid var(--color-rule); }

.lede {
  font-size: var(--text-lede);
  line-height: 1.5;
  color: var(--color-ink-2);
  max-width: var(--measure-lede);
}

/* Used on both <p> (pure labels) and <h2> (where the label is also the
   section's real heading, e.g. Home's "What we handle") — font-weight is
   pinned so promoting the tag for correct heading hierarchy never changes
   how the label looks. */
.meta {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 400;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-ink-3);
}

/* The one ordinal label the site keeps — How It Works only. Also doubles
   as the h2 for each track (see note on .meta above). */
.track-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 400;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-md);
}
.track-label::before {
  content: "";
  width: var(--space-md);
  height: var(--rule-mark);
  background: var(--color-accent);
}

/* ====================================================================
   Buttons — 8 states
   ==================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 13px var(--space-md);
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: var(--rule-hair) solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;      /* clickable text never wraps to two lines */
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

.btn-primary { background: var(--color-ink); color: var(--color-paper); }
.btn-primary:hover { background: var(--color-ink-2); }
.btn-primary:active { background: var(--color-ink); }

.btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-rule-strong); }
.btn-secondary:hover { border-color: var(--color-ink); background: var(--color-paper-3); }
.btn-secondary:active { background: var(--color-paper-2); }

/* The single brass fill on the site. Ink text on brass = 5.2:1. */
.btn-accent { background: var(--color-accent-strong); color: var(--color-ink); }
.btn-accent:hover { background: var(--color-accent); }
.btn-accent:active { background: var(--color-accent-strong); }

.btn-ghost { background: transparent; color: var(--color-inverse-ink); border-color: var(--color-inverse-rule); }
.btn-ghost:hover { border-color: var(--color-inverse-ink); }
.btn-ghost:active { background: var(--color-inverse-rule); }

.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn[data-state="loading"] { opacity: 0.7; pointer-events: none; }

/* Typographic link — the tertiary action. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-accent-ink);
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: border-color var(--dur-short) var(--ease-out);
}
.link-arrow:hover { border-bottom-color: var(--color-accent); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

/* ====================================================================
   N9 · Edge-aligned minimal nav
   Wordmark hard-left; links + CTA grouped hard-right. The centre stays
   empty — that gap is the design, and nothing is added to fill it.
   ==================================================================== */

.nav-edge {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-short) var(--ease-out);
}
.nav-edge[data-scrolled="true"] { border-bottom-color: var(--color-rule); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.07rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  white-space: nowrap;
}

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

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

.nav-links a {
  position: relative;
  font-size: var(--text-small);
  color: var(--color-ink-3);
  white-space: nowrap;
  padding-block: var(--space-3xs);
  border-bottom: var(--rule-mark) solid transparent;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.nav-links a:hover { color: var(--color-ink); }
.nav-links a[aria-current="page"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

/* Animated hover underline — desktop only. The current-page link already
   carries a permanent brass underline via border-bottom above. */
@media (min-width: 861px) {
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: var(--rule-mark);
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-short) var(--ease-out);
  }
  .nav-links a:hover::after { transform: scaleX(1); }
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: var(--space-2xs) var(--space-xs);
  background: transparent;
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
}

/* Drawn glyph — not an OS-rendered ☰ character. */
.nav-toggle-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 15px;
}
.nav-toggle-bars span {
  display: block;
  height: 1.5px;
  background: var(--color-ink);
}

/* Industries dropdown — native <details>, no JS required to open/close.
   A small outside-click/Escape helper in main.js closes it on desktop. */
.nav-drop { position: relative; }

.nav-drop > summary {
  display: flex;
  align-items: center;
  gap: 5px;
  list-style: none;
  cursor: pointer;
  font-size: var(--text-small);
  color: var(--color-ink-3);
  white-space: nowrap;
  padding-block: var(--space-3xs);
  border-bottom: var(--rule-mark) solid transparent;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: 0.7;
  transition: transform var(--dur-short) var(--ease-out), margin-top var(--dur-short) var(--ease-out);
}
.nav-drop > summary:hover { color: var(--color-ink); }
.nav-drop[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.nav-drop:has(a[aria-current="page"]) > summary {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

.nav-drop-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: var(--space-2xs);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
}
.nav-drop-menu a {
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  color: var(--color-ink-2);
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.nav-drop-menu a:hover { background: var(--color-paper-3); color: var(--color-ink); }
.nav-drop-menu a[aria-current="page"] { color: var(--color-accent-ink); }

/* ====================================================================
   Split Studio — the diptych. Alternating 7/5 and 5/7, never 50/50.
   ==================================================================== */

.split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-2xl);
  align-items: start;
}

.split-flip { grid-template-columns: 5fr 7fr; }
.split-flip > .split-text { order: 2; }
.split-flip > .split-aside { order: 1; }

.split-text > :last-child { margin-bottom: 0; }

.split-aside { min-width: 0; }

/* ====================================================================
   Editorial photography — contained inset, never full-bleed.
   Framing is done live via object-fit:cover + object-position so one
   source image can serve a portrait split-aside on desktop and a short
   landscape band on mobile without separate crops.
   ==================================================================== */

.img-frame {
  position: relative;
  overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  aspect-ratio: var(--img-ratio, 4 / 5);
}

.img-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--img-focal, 50% 50%);
}

/* Editorial photo-and-caption pairing — image + a short line of copy
   beneath it, magazine-style. Used where a hero aside previously carried
   text alone; the copy becomes the caption instead of being dropped. */
.prose-figure-caption {
  margin-top: var(--space-sm);
  font-size: var(--text-small);
  color: var(--color-ink-3);
  max-width: none;
}

/* Split-aside portrait — Home hero, For Brands, For Creators. */
.img-frame-portrait { --img-ratio: 4 / 5; }

/* Standalone wide anchor — How It Works. */
.img-frame-wide { --img-ratio: 16 / 9; }

/* Small supporting inset — About, Contact. Capped width so it reads as
   a quiet accent, not a second hero. */
.img-frame-inset {
  --img-ratio: 6 / 5;
  max-width: 420px;
}

@media (max-width: 860px) {
  /* On mobile every image becomes a short landscape band under its text,
     never a viewport-filling portrait slab. */
  .img-frame-portrait,
  .img-frame-wide { --img-ratio: 3 / 2; }
  .img-frame-inset {
    --img-ratio: 3 / 2;
    max-width: none;
  }
}

/* Hairline-ruled capability list. Replaces the old card grid entirely —
   no box, no badge, no shadow. */
.ruled-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  max-width: none;
}

.ruled-list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.ruled-list .num {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-ink);
  padding-top: 4px;
  min-width: 2.25rem;
}

/* Creator track — restrained blue/indigo accent, scoped to For Creators only.
   Numerals and the FAQ marker swap hue; layout, weight and copy are untouched. */
.creator-track .ruled-list .num { color: var(--color-creator-accent-ink); }
.creator-track .faq summary::after { color: var(--color-creator-accent-ink); }

/* Compact variant — no numeral column. Used where the list is a summary
   pointing at a detail page rather than the detail itself. */
.ruled-list-plain > li { grid-template-columns: minmax(0, 1fr); }

.ruled-list h3 { margin-bottom: var(--space-3xs); }
.ruled-list p { margin: 0; font-size: var(--text-small); color: var(--color-ink-2); }

/* Type grid — reuses the .route brass-rule-mark pattern for a short list
   of weighted items (creator archetypes), never a bordered/shadowed card. */
.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg) var(--space-xl);
  margin-top: var(--space-lg);
  max-width: none;
}
.type-item {
  border-top: var(--rule-mark) solid var(--color-accent);
  padding-top: var(--space-sm);
}
.type-icon {
  width: 26px;
  height: 26px;
  display: block;
  margin-bottom: var(--space-xs);
  stroke: var(--color-accent-ink);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.type-item h3 { font-size: 1.05rem; margin-bottom: var(--space-3xs); }
.type-item p { margin: 0; font-size: var(--text-small); color: var(--color-ink-2); }

/* ====================================================================
   FAQ — native <details>, hairline-ruled to match the rest of the site.
   ==================================================================== */

.faq {
  border-top: var(--rule-hair) solid var(--color-rule);
  max-width: none;
  margin-top: var(--space-lg);
}
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: var(--space-md) var(--space-xl) var(--space-md) 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 1.05rem; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-accent-ink);
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > p {
  margin: 0 0 var(--space-md);
  font-size: var(--text-small);
  color: var(--color-ink-2);
  max-width: var(--measure);
}

/* ====================================================================
   Narrative Workflow — How It Works
   ==================================================================== */

.stages {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.stage {
  display: grid;
  grid-template-columns: minmax(0, 4rem) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.stage:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }

.stage-num {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-ink);
  padding-top: 5px;
}

.stage h3 { margin-bottom: var(--space-3xs); }
.stage p { margin: 0; font-size: var(--text-small); }

/* ====================================================================
   Long Document — About, Privacy
   ==================================================================== */

.prose { max-width: var(--measure-prose); }
.prose p { line-height: var(--leading-prose); max-width: none; }
.prose > * + * { margin-top: var(--space-sm); }

.prose h2 {
  font-size: 1.35rem;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xs);
}
.prose h2:first-child { margin-top: 0; }

.prose ul {
  margin: 0;
  padding-left: var(--space-md);
  line-height: var(--leading-prose);
  max-width: none;
}
.prose li { margin-bottom: var(--space-3xs); }

.prose a {
  color: var(--color-accent-ink);
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
  transition: border-color var(--dur-short) var(--ease-out);
}
.prose a:hover { border-bottom-color: var(--color-accent); }

/* A single atmospheric photograph inside a prose column — About only.
   Deliberately narrower than the text measure so it reads as a quiet
   accent, not a second hero. */
.prose-figure {
  margin-top: var(--space-2xl) !important;
  margin-bottom: var(--space-2xl);
}
.prose-figure figcaption {
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.prose-note {
  margin-top: var(--space-2xl);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-small);
  color: var(--color-ink-3);
}

.signature {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--rule-mark) solid var(--color-accent);
  max-width: var(--measure-prose);
}
.signature .name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-ink);
}
.signature .role { font-size: var(--text-small); color: var(--color-ink-3); }

/* ====================================================================
   Route cards — Contact. Two weighted, editorial-photo-led paths.
   The uploaded image carries the headline; the card body underneath
   stays to benefits + CTA only (see contact.html for the brief this
   was built against).
   ==================================================================== */

.routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.route-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-top: var(--rule-mark) solid var(--card-accent-mark);
  border-radius: var(--radius-md);
  /* Shadow tint mirrors --color-ink's own L/C/H, written literally (not
     var()-composed) so oklch's alpha slash works without relying on
     relative-colour-syntax browser support. */
  box-shadow:
    0 1px 2px oklch(21% 0.018 258 / 5%),
    0 18px 40px oklch(21% 0.018 258 / 7%);
  transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

.route-card-brand { --card-accent-mark: var(--color-accent); --card-accent-ink: var(--color-accent-ink); }
.route-card-creator { --card-accent-mark: var(--color-creator-accent); --card-accent-ink: var(--color-creator-accent-ink); }

.route-card:hover { transform: translateY(-3px); border-color: var(--color-rule-strong); }

.route-card-media {
  overflow: hidden;
  background: var(--color-paper-2);
  aspect-ratio: var(--img-ratio, 4 / 3);
}
.route-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-short) var(--ease-out);
}
.route-card:hover .route-card-media img { transform: scale(1.015); }

.route-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-lg);
  padding: var(--space-lg);
}

.route-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.route-benefit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}
.route-benefit svg {
  width: 21px;
  height: 21px;
  stroke: var(--card-accent-ink);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.route-benefit span {
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--color-ink-2);
  line-height: 1.35;
}

.route-card .cta-row { margin-top: 0; }
.route-card .btn { width: 100%; }

.btn-indigo { background: var(--color-creator-accent-strong); color: var(--color-ink); }
.btn-indigo:hover { background: var(--color-creator-accent); }
.btn-indigo:active { background: var(--color-creator-accent-strong); }

.route-quiet {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.route-quiet p:last-child { margin-bottom: 0; }
.route-quiet .link-arrow { margin-top: var(--space-2xs); display: inline-flex; }

@media (max-width: 860px) {
  .route-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ====================================================================
   Inverse CTA band — left-biased, never centred
   ==================================================================== */

.cta-band {
  background: var(--color-inverse);
  color: var(--color-inverse-ink-2);
  border-radius: var(--radius-md);
  padding: var(--space-2xl) var(--space-xl);
}
.cta-band h2 { color: var(--color-inverse-ink); max-width: 18ch; }
.cta-band p { color: var(--color-inverse-ink-2); max-width: 46ch; }

.form-hint {
  font-size: var(--text-meta);
  color: var(--color-ink-3);
  margin-top: var(--space-2xs);
}
.cta-band .form-hint { color: var(--color-inverse-ink-2); }

/* ====================================================================
   Ft1 · Mast-headed footer
   ==================================================================== */

.foot-mast {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-2xl) var(--space-xl);
  background: var(--color-paper);
}

.foot-word {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  line-height: 1;
  margin: 0;
}

.foot-tagline {
  margin: var(--space-xs) 0 var(--space-xl);
  max-width: 40ch;
  color: var(--color-ink-3);
  font-size: var(--text-small);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.foot-links a {
  font-size: var(--text-small);
  color: var(--color-ink-3);
  white-space: nowrap;
  border-bottom: var(--rule-hair) solid transparent;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.foot-links a:hover { color: var(--color-ink); border-bottom-color: var(--color-accent); }

.foot-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  margin-top: var(--space-xl);
  font-size: var(--text-meta);
  color: var(--color-ink-3);
}

/* The disclaimer is a stated position, not a footnote beside the © line. */
.foot-disclaimer {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  max-width: 62ch;
  font-size: var(--text-meta);
  color: var(--color-ink-3);
  line-height: 1.6;
}

/* ====================================================================
   Motion — one first-load entrance, nothing on scroll
   ==================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.enter {
  animation: rise var(--dur-entrance) var(--ease-out) both;
}
.enter-2 { animation-delay: 70ms; }
.enter-3 { animation-delay: 140ms; }

/* Hero image — a soft load-in beat after the text, not a curtain wipe. */
@keyframes hero-image-in {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: none; }
}
.enter-image {
  animation: hero-image-in var(--dur-image-reveal) var(--ease-out) both;
  animation-delay: 140ms;
}

/* ====================================================================
   Scroll reveal — one-time, IntersectionObserver-driven (see main.js).
   Everything is visible by default; JS only hides content once it has
   confirmed it can also reveal it again (progressive enhancement).
   ==================================================================== */

html.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
html.js-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children — nth-child delay steps, capped so long lists don't
   trail on forever. */
html.js-ready [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
html.js-ready [data-reveal-group].is-visible > * { opacity: 1; transform: none; }
html.js-ready [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
html.js-ready [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 60ms; }
html.js-ready [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 120ms; }
html.js-ready [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 180ms; }
html.js-ready [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 240ms; }
html.js-ready [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 300ms; }
html.js-ready [data-reveal-group].is-visible > *:nth-child(n+7) { transition-delay: 340ms; }

@media (max-width: 860px) {
  html.js-ready [data-reveal] { transform: translateY(7px); }
  html.js-ready [data-reveal-group] > * { transform: translateY(6px); }
  html.js-ready [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 140ms; }
  html.js-ready [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 175ms; }
  html.js-ready [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 210ms; }
  html.js-ready [data-reveal-group].is-visible > *:nth-child(n+7) { transition-delay: 230ms; }
}

/* ====================================================================
   Hover micro-interactions — transform/opacity only, no layout shift.
   ==================================================================== */

.img-frame img {
  transition: transform var(--dur-short) var(--ease-out);
}
.img-frame:hover img { transform: scale(1.03); }

.btn { transform: translateY(0); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.type-item {
  transition: transform var(--dur-short) var(--ease-out);
}
/* Specificity matches (or beats) the reveal system's settled
   `transform: none` state — otherwise a revealed item's hover lift is
   silently overridden once it has finished animating in. */
html.js-ready [data-reveal-group] > .type-item:hover,
.type-item:hover { transform: translateY(-2px); }

/* Route cards keep their own (larger, -3px) lift — see the Route cards
   block above — but need the same reveal-specificity guard. */
html.js-ready [data-reveal-group] > .route-card:hover { transform: translateY(-3px); }

/* Brass line-draw — the site's one true divider mark. */
.track-label::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
html.js-ready .track-label.is-visible::before,
html:not(.js-ready) .track-label::before {
  transform: scaleX(1);
}

/* How It Works — active step. An absolutely-positioned accent bar fades
   in via opacity (never border-color), so this is transform/opacity-only
   and never affects the box model — zero layout shift by construction. */
.stage {
  position: relative;
}
.stage::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
.stage.is-active::before { opacity: 1; }
.stage.is-active .stage-num {
  color: var(--color-accent);
  transition: color var(--dur-short) var(--ease-out);
}

/* ====================================================================
   Trust & Compliance Components
   ==================================================================== */

/* Cookie Banner */
.cb-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-inverse);
  color: var(--color-inverse-ink);
  border-top: var(--rule-hair) solid var(--color-inverse-rule);
  padding: var(--space-md) var(--page-gutter);
  z-index: 1000;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform var(--dur-med) var(--ease-out);
}
.cb-cookie-banner[data-visible="true"] {
  transform: translateY(0);
}
.cb-cookie-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.cb-cookie-text {
  flex: 1 1 320px;
  font-size: var(--text-small);
  color: var(--color-inverse-ink-2);
  margin: 0;
  line-height: var(--leading-body);
}
.cb-cookie-text a {
  color: var(--color-inverse-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cb-cookie-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.cb-cookie-btn {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  cursor: pointer;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all var(--dur-short) var(--ease-out);
}
.cb-cookie-btn-primary {
  background: var(--color-accent-strong);
  color: var(--color-ink);
}
.cb-cookie-btn-primary:hover {
  background: var(--color-accent);
}
.cb-cookie-btn-secondary {
  background: transparent;
  color: var(--color-inverse-ink);
  border-color: var(--color-inverse-rule);
}
.cb-cookie-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
}
.cb-cookie-btn-link {
  background: transparent;
  color: var(--color-inverse-ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  border: 0;
  padding-inline: var(--space-2xs);
}
.cb-cookie-btn-link:hover {
  color: var(--color-inverse-ink);
}

/* Legal Callout & Consent Notices */
.legal-callout {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-paper-2);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-block: var(--space-lg);
}
.legal-callout p {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-ink-2);
}
.legal-callout strong {
  color: var(--color-ink);
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-xs);
}

.legal-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.legal-sidebar {
  position: sticky;
  top: 96px;
  background: var(--color-paper-2);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  border: var(--rule-hair) solid var(--color-rule);
}
.legal-sidebar h3 {
  font-size: var(--text-small);
  margin: 0 0 var(--space-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta);
  color: var(--color-ink-3);
  font-family: var(--font-mono);
}
.legal-nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.legal-nav-links a {
  font-size: var(--text-small);
  color: var(--color-ink-2);
  text-decoration: none;
  display: block;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-sm);
}
.legal-nav-links a:hover,
.legal-nav-links a.active {
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.form-consent-box {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-block: var(--space-md);
  font-size: var(--text-small);
  color: var(--color-ink-2);
  line-height: var(--leading-body);
}
.form-consent-box a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* FAQ Accordion */
.faq-group {
  margin-top: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.faq-item {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.faq-summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-md);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-ink);
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  position: relative;
  flex-shrink: 0;
  margin-left: var(--space-sm);
  transition: transform var(--dur-short) var(--ease-out);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--color-ink-2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; transition: transform var(--dur-short) var(--ease-out); }
details[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-content {
  padding-bottom: var(--space-md);
  color: var(--color-ink-2);
  line-height: var(--leading-prose);
  font-size: var(--text-body);
  max-width: var(--measure-prose);
}

/* Founder Profile Layout */
.founder-profile {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-2xl);
  align-items: start;
  margin-top: var(--space-xl);
}
.founder-card {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}
.founder-card-header {
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
}
.founder-card-header h2 {
  font-size: var(--text-h2);
  margin: 0;
}
.founder-card-header .role {
  color: var(--color-accent-ink);
  font-weight: 500;
  font-size: var(--text-body);
  margin-top: var(--space-3xs);
}
.founder-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.founder-fact {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-small);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) dashed var(--color-rule);
}
.founder-fact dt {
  color: var(--color-ink-3);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta);
}
.founder-fact dd {
  margin: 0;
  color: var(--color-ink);
  font-weight: 500;
  text-align: right;
}

/* Trust Pill Tags */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 999px;
  font-size: var(--text-small);
  color: var(--color-ink-2);
}
.trust-pill svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent-ink);
}

/* ====================================================================
   Responsive
   ==================================================================== */

@media (max-width: 1040px) {
  .nav-cluster { gap: var(--space-md); }
  .nav-links { gap: var(--space-sm); }
  .split { gap: var(--space-xl); }
}

@media (max-width: 860px) {
  :root { --page-gutter: 20px; }

  .split,
  .split-flip { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .split-flip > .split-text { order: 0; }
  .split-flip > .split-aside { order: 0; }

  .routes { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }

  .section { padding-block: var(--space-2xl); }
  .section-open { padding-block: var(--space-3xl); }

  .cta-band { padding: var(--space-xl) var(--space-md); }

  /* Nav collapses to a real sheet with a labelled button. */
  .nav-toggle { display: inline-flex; }
  .nav-cluster {
    position: fixed;
    inset: 0;
    z-index: var(--z-sheet);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--space-3xl) var(--page-gutter) var(--space-xl);
    background: var(--color-paper);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
  }
  .nav-cluster[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-links a {
    padding-block: var(--space-sm);
    font-size: 1.06rem;
    color: var(--color-ink);
    border-bottom: var(--rule-hair) solid var(--color-rule);
  }
  .nav-links a[aria-current="page"] { color: var(--color-accent-ink); }

  .nav-drop { width: 100%; }
  .nav-drop > summary {
    padding-block: var(--space-sm);
    font-size: 1.06rem;
    color: var(--color-ink);
    border-bottom: var(--rule-hair) solid var(--color-rule);
  }
  .nav-drop-menu {
    position: static;
    margin-top: var(--space-2xs);
    padding: 0;
    background: transparent;
    border: 0;
  }
  .nav-drop-menu a {
    padding: var(--space-2xs) 0 var(--space-2xs) var(--space-sm);
    font-size: 0.98rem;
  }

  .nav-cluster .btn { margin-top: var(--space-lg); width: 100%; }

  .nav-sheet-close {
    position: absolute;
    top: var(--space-md);
    right: var(--page-gutter);
    min-height: 44px;
    padding: var(--space-2xs) var(--space-xs);
    background: transparent;
    border: var(--rule-hair) solid var(--color-rule-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-ink);
    cursor: pointer;
  }
  body[data-nav-open="true"] { overflow: hidden; }
}

@media (min-width: 861px) {
  .nav-sheet-close { display: none; }
}

@media (max-width: 420px) {
  .ruled-list > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .stage { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .foot-meta { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .enter { animation: none; opacity: 1; transform: none; }
  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .img-frame:hover img,
  .btn:hover,
  .type-item:hover,
  .route-card:hover,
  .route-card:hover .route-card-media img { transform: none; }
}

/* ====================================================================
   Native CreatorBridge Form System
   ==================================================================== */

.cb-forms-wrapper {
  margin-top: var(--space-2xl);
}

.cb-form-nav {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-bottom: var(--space-xs);
  flex-wrap: wrap;
}

.cb-tab-btn {
  background: transparent;
  border: none;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink-2);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-short) var(--ease-out);
}

.cb-tab-btn:hover {
  color: var(--color-ink);
  background: var(--color-paper-3);
}

.cb-tab-btn.is-active {
  color: var(--color-brass);
  background: rgba(230, 180, 80, 0.08);
  box-shadow: inset 0 -2px 0 var(--color-brass);
}

.cb-form-card {
  display: none;
  background: var(--color-paper);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow:
    0 1px 2px oklch(21% 0.018 258 / 5%),
    0 8px 24px oklch(21% 0.018 258 / 6%);
}

.cb-form-card.is-active {
  display: block;
  animation: cbFormFadeIn 0.3s ease-out forwards;
}

@keyframes cbFormFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.cb-form-header {
  margin-bottom: var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-bottom: var(--space-md);
}

.cb-form-header h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  margin: 0 0 var(--space-2xs) 0;
}

.cb-form-header p {
  color: var(--color-ink-2);
  margin: 0;
  max-width: 65ch;
}

.cb-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.cb-grid-full {
  grid-column: 1 / -1;
}

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

.cb-label {
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-ink);
  display: flex;
  justify-content: space-between;
}

.cb-label .req {
  color: var(--color-brass);
  margin-left: 2px;
}

.cb-label .opt {
  color: var(--color-ink-2);
  font-size: 0.85em;
  font-weight: 400;
}

.cb-input,
.cb-select,
.cb-textarea {
  width: 100%;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  color: #111827;
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--dur-short), box-shadow var(--dur-short);
  color-scheme: light;
}

.cb-input::placeholder,
.cb-textarea::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.cb-input:focus,
.cb-select:focus,
.cb-textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.14);
}

.cb-input:disabled,
.cb-select:disabled,
.cb-textarea:disabled,
.cb-input[readonly],
.cb-textarea[readonly] {
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

.cb-input:-webkit-autofill,
.cb-input:-webkit-autofill:focus,
.cb-select:-webkit-autofill,
.cb-textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  -webkit-text-fill-color: #111827;
  caret-color: #111827;
}

.cb-textarea {
  min-height: 120px;
  resize: vertical;
}

.cb-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-size: var(--text-small);
  color: var(--color-ink-2);
  cursor: pointer;
  user-select: none;
}

.cb-checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-brass);
  cursor: pointer;
}

.cb-form-feedback {
  display: none;
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  line-height: 1.5;
}

.cb-form-feedback.is-success {
  display: block;
  background: oklch(96% 0.03 150);
  border: 1px solid oklch(70% 0.12 150);
  color: oklch(35% 0.10 150);
}

.cb-form-feedback.is-error {
  display: block;
  background: oklch(96% 0.03 25);
  border: 1px solid oklch(65% 0.16 25);
  color: oklch(38% 0.14 25);
}

.cb-optional-details {
  grid-column: 1 / -1;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  padding: var(--space-sm);
}

.cb-optional-details > summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-ink);
}

.cb-optional-details[open] > summary {
  margin-bottom: var(--space-md);
}

.cb-consent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.cb-consent .cb-checkbox-label {
  flex: none;
}

.cb-consent-link {
  color: var(--color-accent-ink);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cb-submit-row {
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .cb-form-grid {
    grid-template-columns: 1fr;
  }
  .cb-form-card {
    padding: var(--space-lg) var(--space-md);
  }
}