/* ============================================================
   UBG Component Library — Layer 2 (c- prefix)
   Direction: "Payroll Register".
   Pages USE these classes, never redefine them.
   Values reference tokens.css only.
   ============================================================ */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 400; line-height: 1.62;
  color: var(--ink-soft); background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ledger); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ledger-mid); outline-offset: 3px; border-radius: var(--r-sm); }

.c-container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }
.c-section { padding: var(--section-pad) 0; position: relative; }
.c-section--paper  { background: var(--paper-deep); }
.c-section--ink    { background: var(--surface-ink); }
.c-section--ledger { background: var(--ledger); }
.c-measure { max-width: var(--max-w-text); }

/* ------------------------------------------------------------
   Dark surfaces remap the ink ramp. Any component dropped onto
   one is then readable without needing its own colour override —
   which is what previously left list text nearly black on black.
   Background tokens are remapped too, so white panels become
   subtle translucent ones instead of glaring rectangles.
   ------------------------------------------------------------ */
.c-section--ink, .c-section--ledger, .c-cta {
  --ink:        rgba(250,250,247,0.94);
  --ink-soft:   rgba(250,250,247,0.78);
  --ink-mute:   rgba(250,250,247,0.64);
  --ink-faint:  rgba(250,250,247,0.52);
  --ledger-mid: rgba(250,250,247,0.64);
  --rule:       rgba(250,250,247,0.18);
  --rule-soft:  rgba(250,250,247,0.12);
  --white:      rgba(250,250,247,0.05);
  --paper-deep: rgba(250,250,247,0.09);
  --bar:        rgba(250,250,247,0.04);
  --ledger-pale: rgba(250,250,247,0.10);
}
/* Links and citations pick up the light ramp rather than deep green. */
.c-section--ink .c-link, .c-section--ledger .c-link, .c-cta .c-link {
  color: var(--on-ink-strong); border-color: var(--on-ink-rule);
}
.c-section--ink .c-link:hover, .c-section--ledger .c-link:hover, .c-cta .c-link:hover {
  border-color: var(--on-ink-body);
}
.c-cta .c-label { color: var(--on-ink-mute); }
.c-cta .c-label::before { color: var(--on-ink-faint); }
.c-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
   TYPOGRAPHY
   Serif carries the argument, mono carries the money. Headlines
   mix them so a sentence can turn into a line item mid-clause.
   ============================================================ */
.c-h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(38px, 5.4vw, 66px); line-height: 1.03;
  letter-spacing: -0.021em; color: var(--ink);
}
.c-h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(30px, 3.5vw, 42px); line-height: 1.1;
  letter-spacing: -0.017em; color: var(--ink);
}
.c-h3 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 23px; line-height: 1.22; letter-spacing: -0.012em; color: var(--ink);
}
.c-h4 {
  font-family: var(--font-sans); font-weight: 650;
  font-size: 16px; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink);
}
.c-h1 em, .c-h2 em, .c-h3 em { font-style: italic; font-weight: 500; }

/* Breathing room under a heading. Zero-specificity so any page rule
   that sets its own spacing still wins. */
:where(.c-h1, .c-h2) + :where(p, ul, ol, div, span, .c-lede, .c-body) { margin-top: 20px; }
:where(.c-h3, .c-h4) + :where(p, ul, ol, .c-lede, .c-body) { margin-top: 10px; }
:where(.c-qa-q) + :where(p) { margin-top: 8px; }

/* Inline figure — a number set into running prose, as on a stub. */
.c-fig {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 0.82em; letter-spacing: -0.02em;
  color: var(--ledger); font-style: normal; padding: 0 0.06em;
}
.c-h1 .c-fig, .c-h2 .c-fig { border-bottom: 2px solid var(--ledger-pale); }

/* Field label — mono, the way a form names its rows. */
.c-label {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; line-height: 1; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ledger-mid); margin-bottom: 18px;
}
.c-label::before { content: "\00a7  "; color: var(--ink-faint); }
.c-section--ink .c-label, .c-section--ledger .c-label { color: var(--on-ink-mute); }
.c-section--ink .c-label::before, .c-section--ledger .c-label::before { color: var(--on-ink-faint); }

.c-lede { font-size: 19px; line-height: 1.58; color: var(--ink-soft); max-width: var(--max-w-text); }
.c-body { font-size: 16px; color: var(--ink-soft); }
.c-body-sm { font-size: 14.5px; line-height: 1.6; color: var(--ink-mute); }
.c-strong { font-weight: 650; color: var(--ink); }

.c-section--ink .c-h2, .c-section--ledger .c-h2,
.c-section--ink .c-h3, .c-section--ledger .c-h3,
.c-section--ink .c-h4, .c-section--ledger .c-h4 { color: var(--on-ink-strong); }
.c-section--ink p, .c-section--ledger p { color: var(--on-ink-body); }
.c-section--ink .c-strong, .c-section--ledger .c-strong { color: var(--on-ink-strong); }
.c-section--ink .c-body-sm, .c-section--ledger .c-body-sm { color: var(--on-ink-mute); }

/* Footnote — the fine print any real financial document carries. */
.c-note {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.62;
  color: var(--ink-faint); letter-spacing: -0.005em;
}
.c-section--ink .c-note, .c-section--ledger .c-note { color: var(--on-ink-faint); }

/* ============================================================
   BUTTONS
   ============================================================ */
.c-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 650;
  font-size: 15px; line-height: 1; letter-spacing: -0.004em;
  padding: 15px 24px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.c-btn--primary { background: var(--ledger); color: var(--paper); }
.c-btn--primary:hover { background: var(--ink); }
.c-btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.c-btn--ghost:hover { background: var(--white); border-color: var(--ink); }
.c-btn--onink { background: var(--paper); color: var(--surface-ink); }
.c-btn--onink:hover { background: var(--surface-bar); }
.c-btn--onink-ghost { background: transparent; color: var(--on-ink-strong); border-color: var(--on-ink-rule); }
.c-btn--onink-ghost:hover { border-color: var(--on-ink-body); }
.c-btn-arrow { font-family: var(--font-mono); font-weight: 400; opacity: 0.65; }

.c-link {
  font-weight: 600; color: var(--ledger);
  border-bottom: 1px solid var(--rule); padding-bottom: 1px;
  transition: border-color var(--ease), color var(--ease);
}
.c-link:hover { border-color: var(--ledger); }

/* ============================================================
   NAVIGATION (+ login menu)
   ============================================================ */
.c-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 70px;
  background: rgba(250,250,247,0.90);
  backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.c-nav.is-scrolled { border-bottom-color: var(--rule-soft); box-shadow: var(--lift-nav); }
.c-nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); height: 70px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.c-nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.c-nav-logo-img { height: 38px; width: auto; }
.c-nav-right { display: flex; align-items: center; gap: 8px; }

.c-nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.c-nav-links > li > a, .c-login-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-weight: 550; font-size: 15px;
  color: var(--ink-mute); padding: 8px 11px; border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer; line-height: 1.2;
  transition: color var(--ease), background var(--ease);
}
.c-nav-links > li > a:hover, .c-login-btn:hover { color: var(--ink); background: var(--paper-deep); }
.c-nav-links a.is-active { color: var(--ink); font-weight: 650; }
.c-nav-cta { font-size: 14.5px; padding: 11px 18px; }

/* --- Login dropdown --- */
.c-login { position: relative; }
.c-login-btn::after {
  content: ""; width: 0; height: 0; margin-left: 1px;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; opacity: 0.7; transition: transform var(--ease);
}
.c-login-btn[aria-expanded="true"] { color: var(--ink); background: var(--paper-deep); }
.c-login-btn[aria-expanded="true"]::after { transform: rotate(180deg); }

.c-login-menu {
  position: absolute; top: calc(100% + 9px); right: 0; width: 272px;
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--lift);
  padding: 6px; z-index: 210;
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.c-login-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.c-login-opt {
  display: block; width: 100%; text-align: left;
  padding: 12px 13px; border-radius: var(--r-md);
  background: none; border: 0; cursor: pointer; font-family: inherit;
  transition: background var(--ease);
}
.c-login-opt:hover { background: var(--ledger-pale); }
.c-login-opt-name {
  display: block; font-family: var(--font-sans); font-weight: 650;
  font-size: 15px; color: var(--ink); line-height: 1.3;
}
.c-login-opt-desc {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.02em; color: var(--ink-mute); margin-top: 3px; line-height: 1.45;
}
.c-login-sep { height: 1px; background: var(--rule-soft); margin: 5px 13px; }
.c-login-status {
  padding: 9px 13px 5px; font-family: var(--font-mono); font-size: 11px;
  line-height: 1.5; color: var(--ledger); letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0; transition: opacity var(--ease);
}
.c-login-status.is-shown { opacity: 1; }

.c-nav-burger {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: var(--r-sm); cursor: pointer; width: 42px; height: 38px; padding: 0;
}
.c-nav-burger span {
  display: block; width: 17px; height: 1.5px; background: var(--ink);
  margin: 3.5px auto; transition: transform var(--ease), opacity var(--ease);
}
.c-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.c-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.c-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.c-hero {
  background: var(--paper); padding: 150px 0 84px;
  border-bottom: 1px solid var(--rule-soft); position: relative; overflow: hidden;
}
/* Ruled baseline — register paper, not a tech grid. Horizontals only. */
.c-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--rule-soft) 33px 34px);
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 55%, transparent);
}
.c-hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 452px; gap: var(--col-gap); align-items: center;
}
.c-hero--solo .c-hero-inner { grid-template-columns: 1fr; }
.c-hero-cite {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ledger);
  padding-bottom: 9px; border-bottom: 1px solid var(--rule); margin-bottom: 26px;
}
.c-hero-sub { font-size: 19px; line-height: 1.55; color: var(--ink-soft); max-width: 560px; margin: 24px 0 32px; }
.c-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ============================================================
   SIGNATURE — THE EARNINGS STATEMENT
   The whole pitch is one paycheck, restructured. So the hero is
   that paycheck, and the withholding line is what moves.
   ============================================================ */
.c-stub {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--lift);
  overflow: hidden; font-family: var(--font-mono);
}
.c-stub-head {
  background: var(--surface-ink); color: var(--on-ink-strong);
  padding: 15px 20px; display: flex; justify-content: space-between;
  align-items: baseline; gap: 12px;
}
.c-stub-title { font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.c-stub-meta { font-size: 10.5px; color: var(--on-ink-mute); letter-spacing: 0.04em; }

.c-stub-cols {
  display: grid; grid-template-columns: 1fr 92px 92px; gap: 10px;
  padding: 11px 20px 9px; border-bottom: 1px solid var(--rule);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.c-stub-cols span:not(:first-child) { text-align: right; }
.c-stub-cols .is-after { color: var(--ledger); }

.c-stub-row {
  display: grid; grid-template-columns: 1fr 92px 92px; gap: 10px;
  padding: 9px 20px; align-items: baseline;
  border-bottom: 1px solid var(--rule-soft);
}
.c-stub-row:nth-of-type(even) { background: var(--bar); }
.c-stub-row--rule { border-bottom: 1px solid var(--rule); }
.c-stub-desc { font-size: 12.5px; color: var(--ink-soft); letter-spacing: -0.01em; }
.c-stub-val {
  font-size: 13px; font-weight: 500; text-align: right;
  color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.c-stub-val--was  { color: var(--ink-faint); font-weight: 400; }
.c-stub-val--out  { color: var(--oxide); }
.c-stub-val--keep { color: var(--ledger); font-weight: 600; }

.c-stub-total {
  display: grid; grid-template-columns: 1fr 92px 92px; gap: 10px;
  padding: 15px 20px; align-items: baseline;
  background: var(--ledger-pale); border-top: 1px solid var(--ledger);
}
.c-stub-total .c-stub-desc {
  color: var(--ledger); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.c-stub-total .c-stub-val { font-size: 17px; font-weight: 600; color: var(--ledger); }
.c-stub-foot {
  padding: 12px 20px 14px; font-size: 10.5px; line-height: 1.55;
  color: var(--ink-faint); background: var(--white);
}

/* ============================================================
   REGISTER — replaces the card grid. Parallel content is set as
   ruled rows in one ledger, not three floating boxes.
   ============================================================ */
.c-reg { border-top: 1px solid var(--ink); }
.c-reg-row {
  display: grid; grid-template-columns: var(--rail) 1fr 240px;
  gap: var(--col-gap); padding: 34px 0; border-bottom: 1px solid var(--rule);
}
.c-reg-key {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ledger-mid); padding-top: 5px;
}
.c-reg-main .c-h3 { margin-bottom: 9px; }
.c-reg-main p { font-size: 16px; color: var(--ink-soft); max-width: 560px; }
.c-reg-fig { display: grid; gap: 16px; align-content: start; padding-top: 3px; }
.c-reg-fig-item { display: grid; gap: 2px; }
.c-reg-fig-num {
  font-family: var(--font-mono); font-weight: 600; font-size: 25px;
  letter-spacing: -0.035em; color: var(--ledger); line-height: 1.05;
}
.c-reg-fig-num--out { color: var(--oxide); }
.c-reg-fig-label { font-size: 12.5px; color: var(--ink-mute); line-height: 1.4; }
.c-reg-more { margin-top: 14px; }

.c-section--ink .c-reg, .c-section--ledger .c-reg { border-top-color: var(--on-ink-rule); }
.c-section--ink .c-reg-row, .c-section--ledger .c-reg-row { border-bottom-color: var(--on-ink-rule); }
.c-section--ink .c-reg-key, .c-section--ledger .c-reg-key { color: var(--on-ink-mute); }
.c-section--ink .c-reg-main p, .c-section--ledger .c-reg-main p { color: var(--on-ink-body); }
.c-section--ink .c-reg-fig-num, .c-section--ledger .c-reg-fig-num { color: var(--on-ink-strong); }
.c-section--ink .c-reg-fig-label, .c-section--ledger .c-reg-fig-label { color: var(--on-ink-mute); }

/* ============================================================
   PHOTOGRAPHY
   Placed as full-bleed bands and paired panels, never as
   decorative thumbnails. A tint block sits underneath so the
   layout holds its shape before — or without — an image.
   ============================================================ */
.c-photo { position: relative; overflow: hidden; background: var(--ledger); border-radius: var(--r-lg); }
.c-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(23,33,29,0.05), rgba(23,33,29,0.28));
}
.c-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 0.75s ease;
}
.c-photo img.is-loaded { opacity: 1; }

.c-band {
  position: relative; min-height: clamp(440px, 44vw, 720px); display: flex; align-items: flex-end;
  overflow: hidden; background: var(--surface-ink);
}
.c-band .c-photo { position: absolute; inset: 0; border-radius: 0; z-index: 0; }
.c-band .c-photo::after {
  background: linear-gradient(180deg, rgba(23,33,29,0.18) 0%, rgba(23,33,29,0.55) 55%, rgba(23,33,29,0.88) 100%);
}
.c-band-inner {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x) 54px;
}
.c-band-quote {
  font-family: var(--font-serif); font-weight: 400; font-style: italic;
  font-size: clamp(24px, 3.2vw, 36px); line-height: 1.26; letter-spacing: -0.015em;
  color: var(--on-ink-strong); max-width: 800px;
}
.c-band-attr {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--on-ink-mute); margin-top: 18px;
}

.c-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: center; }
.c-pair--flip .c-pair-media { order: -1; }
.c-pair-media { aspect-ratio: 4 / 3; }
.c-pair-media .c-photo { width: 100%; height: 100%; }
.c-photo-cap {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--ink-faint); margin-top: 10px;
}

/* ============================================================
   PROCESS — a real sequence, so it is genuinely numbered.
   ============================================================ */
.c-steps { counter-reset: step; border-top: 1px solid var(--rule); }
.c-step {
  counter-increment: step;
  display: grid; grid-template-columns: 56px 1fr; gap: 4px 22px;
  align-content: start;
  padding: 26px 0; border-bottom: 1px solid var(--rule);
}
.c-step::before {
  content: counter(step, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / -1;
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  letter-spacing: 0.05em; color: var(--ledger-mid); padding-top: 4px;
}
/* Every child sits in the second column, so the step works whether its
   content is wrapped in a single div or listed as separate elements. */
.c-step > * { grid-column: 2; }
.c-step > *:first-child { margin-top: 0; }
.c-step .c-h4 { margin-bottom: 6px; }
.c-step p { font-size: 15.5px; color: var(--ink-soft); max-width: 540px; }
.c-step-tag {
  display: inline-block; justify-self: start; margin-top: 9px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ledger);
  background: var(--ledger-pale); padding: 4px 9px; border-radius: var(--r-sm);
}
.c-section--ink .c-steps, .c-section--ledger .c-steps { border-top-color: var(--on-ink-rule); }
.c-section--ink .c-step, .c-section--ledger .c-step { border-bottom-color: var(--on-ink-rule); }
.c-section--ink .c-step::before, .c-section--ledger .c-step::before { color: var(--on-ink-mute); }
.c-section--ink .c-step p, .c-section--ledger .c-step p { color: var(--on-ink-body); }
.c-section--ink .c-step-tag, .c-section--ledger .c-step-tag { background: rgba(250,250,247,0.10); color: var(--on-ink-body); }

/* ============================================================
   CREDENTIAL STRIP — named parties, set as a signature block.
   ============================================================ */
.c-cred { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--white); padding: 24px 0; }
.c-cred-inner { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.c-cred-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
  border-right: 1px solid var(--rule); padding-right: 30px;
}
.c-cred-item { display: grid; gap: 1px; }
.c-cred-name { font-family: var(--font-sans); font-weight: 650; font-size: 14.5px; color: var(--ink); }
.c-cred-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-mute); }

/* Statute chips — citations, so they look like citations. */
.c-cite-row { display: flex; gap: 8px; flex-wrap: wrap; }
.c-cite {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--ledger); background: var(--ledger-pale);
  border: 1px solid transparent; border-radius: var(--r-sm); padding: 6px 11px;
}
.c-section--ink .c-cite, .c-section--ledger .c-cite {
  color: var(--on-ink-body); background: transparent; border-color: var(--on-ink-rule);
}

/* ============================================================
   PANELS / QA / GRIDS / LISTS
   ============================================================ */
.c-panel { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 28px 26px; }
.c-panel--ledger { background: var(--ledger-pale); border-color: transparent; }
.c-panel .c-h4 { margin-bottom: 8px; }
.c-section--ink .c-panel, .c-section--ledger .c-panel { background: rgba(250,250,247,0.05); border-color: var(--on-ink-rule); }

.c-qa { border-top: 1px solid var(--rule); }
.c-qa-item { border-bottom: 1px solid var(--rule); padding: 24px 0; }
.c-qa-q { font-family: var(--font-serif); font-weight: 600; font-size: 19px; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.c-qa-a { font-size: 15.5px; color: var(--ink-soft); max-width: 720px; }

.c-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.c-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.c-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: start; }
.c-split--rail { grid-template-columns: var(--rail) 1fr; gap: var(--col-gap); }

.c-list { list-style: none; display: grid; gap: 11px; }
.c-list li { position: relative; padding-left: 26px; font-size: 15.5px; color: var(--ink-soft); }
.c-list li::before { content: "\2014"; position: absolute; left: 0; top: 0; font-family: var(--font-mono); color: var(--ledger-mid); }
.c-section--ink .c-list li, .c-section--ledger .c-list li { color: var(--on-ink-body); }
.c-section--ink .c-list li::before, .c-section--ledger .c-list li::before { color: var(--on-ink-mute); }

/* ============================================================
   CLOSING CTA
   ============================================================ */
.c-cta { background: var(--surface-ink); padding: var(--section-pad) 0; }
.c-cta-inner { max-width: 800px; }
/* Safety net: if the inner block is ever dropped in without a
   .c-container around it, it still gets the page gutter and lines
   up with the footer instead of running to the viewport edge. */
.c-cta > .c-cta-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x);
}
.c-cta > .c-cta-inner > * { max-width: 800px; }
.c-cta-title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.09;
  letter-spacing: -0.02em; color: var(--on-ink-strong);
}
.c-cta-sub { font-size: 18px; color: var(--on-ink-body); margin: 20px 0 32px; max-width: 640px; }
.c-cta-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.c-footer { background: var(--surface-ink); color: var(--on-ink-body); padding: 0 0 44px; border-top: 1px solid var(--on-ink-rule); }
.c-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0 44px; }
.c-footer-brand { font-family: var(--font-serif); font-weight: 600; font-size: 20px; color: var(--on-ink-strong); letter-spacing: -0.015em; }
.c-footer-tagline { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; color: var(--on-ink-mute); margin-top: 7px; }
.c-footer-col-title {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-ink-faint); margin-bottom: 15px;
}
.c-footer a { font-size: 14.5px; color: var(--on-ink-body); display: block; margin-bottom: 9px; transition: color var(--ease); }
.c-footer a:hover { color: var(--on-ink-strong); }
.c-footer-legal {
  border-top: 1px solid var(--on-ink-rule); padding-top: 26px;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
  color: var(--on-ink-faint); max-width: 920px;
}

/* ============================================================
   REVEAL
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .c-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--ease-slow), transform var(--ease-slow); }
  .c-reveal.is-visible { opacity: 1; transform: none; }
  .c-reveal-d1 { transition-delay: 0.07s; }
  .c-reveal-d2 { transition-delay: 0.14s; }
  .c-reveal-d3 { transition-delay: 0.21s; }
  .c-reveal-d4 { transition-delay: 0.28s; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .c-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .c-reg-row { grid-template-columns: var(--rail) 1fr; gap: 28px; }
  .c-reg-fig { grid-column: 2; grid-auto-flow: column; justify-content: start; gap: 40px; padding-top: 4px; }
  .c-grid-3 { grid-template-columns: 1fr 1fr; }
  .c-nav-links { display: none; }
  .c-nav-burger { display: block; }

  .c-nav-links.is-open {
    display: block; position: fixed; top: 70px; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    box-shadow: var(--lift); padding: 8px var(--pad-x) 22px;
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .c-nav-links.is-open > li { display: block; width: 100%; border-bottom: 1px solid var(--rule-soft); }
  .c-nav-links.is-open > li:last-child { border-bottom: 0; }
  .c-nav-links.is-open > li > a, .c-nav-links.is-open .c-login-btn {
    display: flex; width: 100%; padding: 15px 0; font-size: 16.5px; border-radius: 0;
  }
  .c-nav-links.is-open .c-login-btn { justify-content: space-between; }
  .c-nav-links.is-open .c-login-btn:hover,
  .c-nav-links.is-open .c-login-btn[aria-expanded="true"] { background: none; }
  /* On mobile the login options expand inline instead of floating. */
  .c-nav-links.is-open .c-login-menu {
    position: static; width: auto; transform: none; visibility: visible; opacity: 1;
    border: 0; box-shadow: none; background: transparent; padding: 0 0 14px; display: none;
  }
  .c-nav-links.is-open .c-login-menu.is-open { display: block; }
  .c-nav-links.is-open .c-login-opt { background: var(--white); border: 1px solid var(--rule-soft); margin-bottom: 7px; }
}

@media (max-width: 760px) {
  .c-pair, .c-split, .c-grid-2, .c-grid-3, .c-split--rail { grid-template-columns: 1fr; gap: 32px; }
  .c-pair--flip .c-pair-media { order: 0; }
  .c-reg-row { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
  .c-reg-fig { grid-column: 1; gap: 28px; }
  .c-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .c-cred-label { border-right: 0; padding-right: 0; width: 100%; }
  .c-cred-inner { gap: 20px 30px; }
  .c-band { min-height: 400px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .c-hero { padding: 118px 0 60px; }
  .c-hero-ctas .c-btn { width: 100%; justify-content: center; }
  .c-footer-grid { grid-template-columns: 1fr; }
  .c-stub-cols, .c-stub-row, .c-stub-total { grid-template-columns: 1fr 74px 74px; gap: 6px; padding-left: 14px; padding-right: 14px; }
  .c-stub-desc { font-size: 11.5px; }
  .c-stub-val { font-size: 12px; }
  .c-stub-total .c-stub-val { font-size: 15px; }
  .c-stub-head { padding: 13px 14px; flex-direction: column; gap: 4px; }
  .c-reg-fig { grid-auto-flow: row; }
}