/* ==========================================================================
   Capital Hart — page-level composition
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll progress hairline
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px;
  z-index: 101; pointer-events: none;
}
.scroll-progress__bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--red-deep), var(--red-lit));
  transform: scaleX(0); transform-origin: left;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 6vw, 5.5rem));
  padding-bottom: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
  overflow: hidden;
  border-bottom: 1px solid var(--hair);
}

.hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 27rem);
  grid-template-areas: 'head form' 'lede form' 'claims claims';
  align-items: start;
  column-gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  row-gap: var(--s-5);
}
.hero__head   { grid-area: head; }
.hero__lede   { grid-area: lede; align-self: start; }
.hero__form   { grid-area: form; }
.hero__claims { grid-area: claims; margin-top: var(--s-3); }

@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'head' 'form' 'lede' 'claims';
    row-gap: var(--s-6);
  }
  .hero__lede .lede { max-width: 52ch; }
}

.hero h1 {
  font-size: var(--t-display);
  letter-spacing: -0.038em;
  font-weight: 600;
  margin-bottom: var(--s-5);
}
.hero h1 .accent { color: var(--red); }
.hero h1 .thin { font-weight: 300; color: var(--ink-400); }
.hero .hero__title {
  font-family: var(--font-sans);
  font-size: var(--t-display);
  letter-spacing: -0.038em;
  font-weight: 600;
  line-height: 1.02;
  color: var(--ink-050);
  margin-bottom: var(--s-5);
  text-wrap: balance;
}
.hero .hero__title .accent { color: var(--red); }

/* --- rotating headline ------------------------------------------------
   Every slide sits in the same grid cell, so the block is always as tall as
   the tallest one and nothing below it jumps. The leaving slide exits left
   as the next one enters from the right. */
.rotor { display: grid; }
.rotor__slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateX(28px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-io), transform 0.7s var(--ease), visibility 0s 0.7s;
}
.rotor__slide.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.55s var(--ease-io) 0.12s, transform 0.7s var(--ease) 0.12s, visibility 0s;
}
.rotor__slide.is-leaving { transform: translateX(-28px); }

.rotor__dots { display: flex; gap: 6px; margin-top: var(--s-5); }
.rotor__dots button {
  width: 26px; height: 4px; padding: 0;
  border: 0; border-radius: 2px;
  background: var(--hair-strong);
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: background var(--dur) var(--ease-io);
}
.rotor__dots button::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
}
.rotor__dots button.is-active::after {
  animation: rotor-fill var(--rotor-dwell, 6.5s) linear forwards;
}
.rotor.is-paused ~ .rotor__dots button.is-active::after,
.hero:hover .rotor__dots button.is-active::after { animation-play-state: paused; }
@keyframes rotor-fill { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .rotor__slide, .rotor__slide.is-active { transition: none; transform: none; }
  .rotor__dots button.is-active { background: var(--red); }
  .rotor__dots button.is-active::after { animation: none; }
}

/* --- funding clock ---------------------------------------------------- */

.funding-clock {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 0.5rem 0.9rem 0.5rem 0.7rem;
  border: 1px solid var(--hair);
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.28);
  margin-bottom: var(--s-5);
  font-size: var(--t-small);
}
.clock-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-700);
  position: relative; flex: none;
}
.clock-dot[data-state='open'] { background: var(--ok); }
.clock-dot[data-state='open']::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid var(--ok);
  animation: ping 2.4s var(--ease-io) infinite;
}
@keyframes ping {
  0%   { transform: scale(0.7); opacity: 0.9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .clock-dot::after { animation: none; opacity: .4; } }

.clock-value {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink-050);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.clock-note { color: var(--ink-600); font-size: var(--t-micro); }
@media (max-width: 520px) { .clock-note { display: none; } }

/* --- intake panel ------------------------------------------------------ */

.intake {
  position: relative;
  padding: var(--s-6);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(18, 31, 66, 0.92), rgba(11, 22, 51, 0.92));
  box-shadow: var(--lift-3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}
.intake::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}
.intake__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.intake__head h2 {
  font-size: 1.3rem; margin: 0; letter-spacing: -0.022em;
}
.intake__step {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none;
  color: var(--ink-700); white-space: nowrap;
  flex: none;
}
.intake__head h2 { flex: 0 1 auto; white-space: nowrap; }
@media (max-width: 420px) { .intake__step { display: none; } }
.intake .btn--primary { margin-top: var(--s-2); }

.form-success {
  padding: var(--s-6) var(--s-2);
  text-align: center;
}
.form-success[hidden] { display: none; }
.form-success__tick {
  width: 46px; height: 46px; margin: 0 auto var(--s-4);
  border-radius: 50%;
  border: 1px solid rgba(47, 191, 113, 0.5);
  background: rgba(47, 191, 113, 0.12);
  display: grid; place-items: center;
  color: var(--ok);
}
.form-success h3 { font-size: 1.25rem; margin-bottom: var(--s-3); }

/* --- claim strip ------------------------------------------------------- */

.hero__claims .claims { border-top-color: var(--hair-strong); }

/* --------------------------------------------------------------------------
   Ethics — deliberately quieter than everything around it
   -------------------------------------------------------------------------- */

.ethics { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.014)); }
.ethics__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .ethics__grid { grid-template-columns: 1fr; } }

.pledge { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.pledge li {
  margin: 0;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hair);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: start;
}
.pledge__n {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; font-variant-numeric: tabular-nums;
  color: var(--red-text); padding-top: 0.3rem;
}
.pledge h3 { font-size: 1.0625rem; margin-bottom: 0.3rem; letter-spacing: -0.015em; }
.pledge p { font-size: 0.9375rem; color: var(--ink-400); margin: 0; }

.pull {
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem);
  line-height: 1.28;
  letter-spacing: -0.028em;
  color: var(--ink-050);
  font-weight: 400;
  text-wrap: pretty;
  border-left: 2px solid var(--red);
  padding-left: var(--s-5);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Comparison
   -------------------------------------------------------------------------- */

.compare__frame {
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.012);
}
.compare__table { width: 100%; border-collapse: collapse; }
.compare__table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.compare__table th,
.compare__table td {
  padding: 1.05rem 1.35rem;
  text-align: left;
  border-bottom: 1px solid var(--hair);
  vertical-align: middle;
}
.compare__table tr:last-child th,
.compare__table tr:last-child td { border-bottom: 0; }

.compare__table thead th {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.005em; text-transform: none;
  color: var(--ink-600);
  padding-top: 1.35rem; padding-bottom: 1.35rem;
  border-bottom-color: var(--hair-strong);
}
.compare__table tbody th {
  font-weight: 500;
  color: var(--ink-200);
  font-size: 0.9375rem;
  width: 34%;
}

/* The Capital Hart column: elevated, red-capped, always the visual anchor. */
.col-ch { position: relative; width: 33%; }
.compare__table thead .col-ch {
  color: var(--ink-050);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  letter-spacing: -0.015em;
  text-transform: none;
  font-weight: 600;
  background: rgba(206, 24, 31, 0.13);
}
.compare__table tbody .col-ch { background: rgba(206, 24, 31, 0.055); }
.compare__table tbody tr:hover .col-ch { background: rgba(206, 24, 31, 0.10); }
.compare__table thead .col-ch::after {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--red);
}
.compare__table tbody tr { transition: background var(--dur-fast) var(--ease-io); }
.compare__table tbody tr:hover th { color: var(--ink-050); }

.col-other { color: var(--ink-600); width: 33%; }

.cell {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.9375rem;
}
.cell--yes { color: var(--ink-050); font-weight: 500; }
.cell--no  { color: var(--ink-600); }
.tick, .cross { flex: none; }
.tick { color: var(--ok); }
.cross { color: var(--ink-700); }
.tick path, .cross path {
  stroke-dasharray: 24; stroke-dashoffset: 24;
  transition: stroke-dashoffset var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.is-in .tick path, .is-in .cross path { stroke-dashoffset: 0; }
.no-js .tick path, .no-js .cross path { stroke-dashoffset: 0; }

.compare__foot {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--hair);
  font-size: var(--t-micro);
  color: var(--ink-700);
  background: rgba(0, 0, 0, 0.2);
}

/* Mobile: each row becomes a card that still shows BOTH columns side by side.
   A horizontally-scrolled table would hide exactly the contrast we're selling. */
@media (max-width: 760px) {
  .compare__frame { border: 0; background: none; border-radius: 0; }
  .compare__table, .compare__table tbody, .compare__table tr,
  .compare__table th, .compare__table td { display: block; width: auto; }
  .compare__table thead { display: none; }

  .compare__table tr {
    border: 1px solid var(--hair);
    border-radius: var(--r-md);
    padding: var(--s-4);
    margin-bottom: var(--s-3);
    background: rgba(255, 255, 255, 0.02);
  }
  .compare__table tbody th {
    padding: 0 0 var(--s-4);
    color: var(--ink-050);
    font-size: 1rem;
    line-height: 1.25;
    border-bottom: 0;
  }

  .compare__table td {
    padding: 0.6rem 0.75rem;
    border: 0;
    border-radius: var(--r-sm);
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--s-3);
    align-items: baseline;
  }
  .compare__table td + td { margin-top: 0.35rem; }
  .compare__table td::before {
    content: attr(data-col);
    font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none;
    color: var(--ink-700);
  }
  .compare__table tbody td.col-ch {
    background: rgba(206, 24, 31, 0.09);
    box-shadow: inset 2px 0 0 var(--red);
  }
  .compare__table tbody td.col-ch::before { color: var(--red-text); }
  .compare__table tbody td.col-other { background: rgba(255, 255, 255, 0.025); }
  .compare__table .cell { font-size: 0.875rem; }

  .compare__foot { border: 1px solid var(--hair); border-radius: var(--r-md); }
}

/* --------------------------------------------------------------------------
   Rate estimator
   -------------------------------------------------------------------------- */

.estimator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
@media (max-width: 860px) { .estimator { grid-template-columns: 1fr; } }

.estimator__control { }
.estimator__vol {
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
  font-weight: 500;
  color: var(--ink-050);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.estimator__vol-label {
  display: block;
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.005em; text-transform: none;
  color: var(--ink-600);
  margin-top: var(--s-3);
}

.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px;
  background: none; cursor: pointer;
  margin: var(--s-6) 0 var(--s-2);
  display: block;
}
.slider::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--red) var(--fill, 30%), var(--hair-strong) var(--fill, 30%));
}
.slider::-moz-range-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--red) var(--fill, 30%), var(--hair-strong) var(--fill, 30%));
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -8.5px;
  border-radius: 50%;
  background: var(--ink-050);
  border: 4px solid var(--red);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: transform var(--dur-fast) var(--ease);
}
.slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink-050);
  border: 4px solid var(--red);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.slider:hover::-webkit-slider-thumb { transform: scale(1.12); }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--red-wash); }

.slider-scale {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--t-micro);
  color: var(--ink-700);
}

/* The readout is a ledger, like the intake card: hairline rows on a quiet
   surface, label left, figure right, the headline figure in green. */
.readout {
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.006));
  padding: 0.35rem var(--s-5) 0.35rem;
}
.readout__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--hair);
}
.readout__row:last-child { border-bottom: 0; }
.readout__row--hero { padding: 1.15rem 0; }
.readout__k {
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-050);
  line-height: 1.3;
}
.readout__k small { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--ink-400); margin-top: 3px; }
.readout__v {
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600;
  color: var(--ink-050); font-variant-numeric: tabular-nums; white-space: nowrap;
  letter-spacing: -0.01em;
}
.readout__row--hero .readout__v { font-size: 1.5rem; color: var(--ok); letter-spacing: -0.02em; }
.readout__v--muted { color: var(--ink-600); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--ink-700); }

/* --------------------------------------------------------------------------
   Steps rail
   -------------------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); position: relative; }
@media (max-width: 880px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

.step { position: relative; padding-top: var(--s-6); }
.step::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--hair-strong);
}
.step::after {
  content: '';
  position: absolute; inset: 0 auto auto 0; height: 1px; width: 0;
  background: var(--red);
  transition: width var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.step.is-in::after { width: 100%; }
.no-js .step::after { width: 100%; }

.step__n {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; font-variant-numeric: tabular-nums;
  color: var(--red-text);
  display: block; margin-bottom: var(--s-4);
}
.step h3 { font-size: 1.0625rem; margin-bottom: var(--s-2); }
.step p { font-size: 0.9375rem; margin: 0; }

/* --------------------------------------------------------------------------
   Service detail blocks
   Three tracks: a progress rail, a heading that rides along as you read, and
   the body copy. The rail fills as the block scrolls past, so the page tells
   you where you are inside a long read.
   -------------------------------------------------------------------------- */

.svc {
  --svc-progress: 0;
  display: grid;
  grid-template-columns: 3rem minmax(0, 0.82fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 0.5rem + 2.4vw, 3.25rem);
  padding-block: var(--s-8) var(--s-9);
  border-bottom: 1px solid var(--hair);
  align-items: start;
  scroll-margin-top: calc(var(--header-h) + 2rem);
}
.svc:last-of-type { border-bottom: 0; }

/* --- the rail ---------------------------------------------------------- */

.svc__rail {
  position: relative;
  align-self: stretch;
  display: flex;
  justify-content: center;
}

.svc__node {
  position: sticky;
  top: calc(var(--header-h) + 2.75rem);
  z-index: 2;
  width: 2.375rem;
  height: 2.375rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: var(--navy-950);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink-600);
  transition:
    border-color 0.45s var(--ease-io),
    color 0.45s var(--ease-io),
    box-shadow 0.45s var(--ease-io);
}
.svc.is-active .svc__node {
  border-color: var(--red);
  color: var(--red-text);
  box-shadow: 0 0 0 5px var(--red-wash), 0 0 22px -4px var(--red-glow);
}

.svc__line {
  position: absolute;
  left: 50%;
  top: 2.375rem;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: var(--hair);
}
.svc__line::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  width: 1px;
  height: calc(var(--svc-progress) * 100%);
  background: linear-gradient(180deg, var(--red) 0%, rgba(206, 24, 31, 0.15) 100%);
}

/* --- heading column ---------------------------------------------------- */

.svc__head { position: sticky; top: calc(var(--header-h) + 2.5rem); }
.svc__n {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; font-variant-numeric: tabular-nums;
  color: var(--ink-700); display: block; margin-bottom: var(--s-3);
}
.svc h2 { font-size: var(--t-h3); }

/* Spec sheet — the same facts as the prose, in a form you can scan. */
.spec {
  margin: var(--s-6) 0 0;
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  overflow: hidden;
}
.spec > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0.62rem 0.9rem;
  background: rgba(13, 24, 56, 0.6);
}
.spec dt {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.005em; text-transform: none;
  color: var(--ink-400);
  white-space: nowrap;
}
.spec dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-050);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- body column ------------------------------------------------------- */

.svc__body > p:first-child {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-200);
  max-width: none;
}

.ticks { list-style: none; padding: 0; margin: var(--s-6) 0 0; }
.ticks li {
  display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--hair-soft);
  font-size: 0.9375rem;
}
.ticks li:first-child { border-top: 0; padding-top: 0; }
.ticks svg { color: var(--red-text); margin-top: 0.35rem; }

@media (max-width: 900px) {
  .svc {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    padding-block: var(--s-7);
  }
  .svc__rail { display: none; }
  .svc__head { position: static; }
  .spec { margin-top: var(--s-5); }
}

/* --------------------------------------------------------------------------
   Page header (interior pages)
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 1.5rem + 5vw, 6rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { max-width: 20ch; }

.crumbs {
  display: flex; gap: 0.5rem; align-items: center;
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none;
  color: var(--ink-700);
  margin-bottom: var(--s-5);
}
.crumbs a:hover { color: var(--ink-200); }

/* --------------------------------------------------------------------------
   Contact / apply layouts
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
.split--wide-right { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
@media (max-width: 900px) {
  .split, .split--wide-right { grid-template-columns: 1fr; }
}

.contact-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.contact-list li {
  margin: 0; padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hair);
}
.contact-list dt {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.005em; text-transform: none; color: var(--ink-400);
  margin-bottom: 0.5rem;
}
.contact-list dd { margin: 0; font-size: 1.05rem; color: var(--ink-050); }
.contact-list dd a:hover { color: var(--red-text); }

.map {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy-900);
}
.map__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  /* Google's light map, pulled into the site's palette. */
  filter: invert(0.92) hue-rotate(185deg) saturate(0.55) brightness(0.9) contrast(1.05);
  opacity: 0.92;
}
.map__open {
  position: absolute; right: var(--s-4); bottom: var(--s-4);
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--hair-strong);
  border-radius: 8px;
  background: rgba(13, 24, 56, 0.85);
  backdrop-filter: blur(6px);
  color: var(--ink-050);
  font-size: 0.8125rem; font-weight: 500;
}
.map__open:hover { border-color: var(--red-text); }
.map__open .arw { transition: transform var(--dur) var(--ease); }
.map__open:hover .arw { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Resources / article
   -------------------------------------------------------------------------- */

.post-list { display: grid; gap: var(--s-3); }
.post {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.006));
  transition: border-color var(--dur) var(--ease-io),
              background var(--dur) var(--ease-io),
              transform var(--dur) var(--ease);
}
.post:hover {
  border-color: var(--hair-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  transform: translateY(-2px);
}
.post__kicker {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; font-variant-numeric: tabular-nums; color: var(--ink-700);
}
.post h3 { margin-bottom: 0.4rem; font-size: 1.25rem; }
.post p { font-size: 0.9375rem; margin: 0; max-width: 60ch; }
.post__go { color: var(--red-text); flex: none; }
@media (max-width: 720px) {
  .post { grid-template-columns: 1fr; gap: var(--s-3); }
  .post__go { display: none; }
}

.prose { max-width: 40rem; }
.prose h2 { font-size: var(--t-h3); margin-top: var(--s-8); }
.prose h3 { font-size: 1.15rem; margin-top: var(--s-6); }
.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 1.15em; }
.prose li::marker { color: var(--red-text); }
.prose blockquote {
  margin: var(--s-6) 0;
  padding-left: var(--s-5);
  border-left: 2px solid var(--red);
  color: var(--ink-200);
  font-size: 1.0625rem;
}
.prose table { width: 100%; border-collapse: collapse; margin: var(--s-5) 0; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--hair); }
.prose th { color: var(--ink-200); font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.005em; text-transform: none; }

/* --------------------------------------------------------------------------
   FAQ groups
   -------------------------------------------------------------------------- */

.faq-group { margin-bottom: var(--s-8); }
.faq-group__title {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.005em; text-transform: none; color: var(--red-text);
  margin-bottom: var(--s-4);
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.notfound {
  min-height: 72vh;
  display: grid; place-items: center; text-align: center;
  padding-top: var(--header-h);
}
.notfound__code {
  font-family: var(--font-mono); font-size: clamp(4rem, 2rem + 12vw, 9rem);
  line-height: 1; color: var(--navy-700); letter-spacing: -0.04em;
  margin-bottom: var(--s-5);
}

/* Article table-of-contents rail — sticks alongside the prose on wide screens */
.toc { font-size: 0.9rem; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hair); }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: 0.45rem 0 0.45rem var(--s-4);
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--ink-600);
  transition: color var(--dur-fast) var(--ease-io), border-color var(--dur-fast) var(--ease-io);
}
.toc a:hover { color: var(--ink-050); border-left-color: var(--red); }
@media (min-width: 901px) {
  .toc { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}

/* --------------------------------------------------------------------------
   Beat My Rate
   -------------------------------------------------------------------------- */

/* Live readout inside the form: what they pay now against our floor. */
.beat {
  margin-top: var(--s-5);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 0.2rem var(--s-4);
  background: rgba(0, 0, 0, 0.18);
  animation: ledger-in 420ms var(--ease) both;
}
.beat[hidden] { display: none; }
.beat__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hair);
}
.beat__row:last-child { border-bottom: 0; }
.beat__k { font-size: 0.875rem; font-weight: 500; color: var(--ink-050); }
.beat__k small { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ink-400); margin-top: 2px; }
.beat__v { font-weight: 600; font-size: 1rem; color: var(--ink-050); font-variant-numeric: tabular-nums; white-space: nowrap; }
.beat__row--hero .beat__v { color: var(--red-text); }
.beat__v--diff { color: var(--ok); }
.beat__v--diff.is-worse { color: var(--ink-600); }

/* The homepage strip under the comparison. */
.beat-strip__card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  flex-wrap: wrap;
  padding: var(--s-6) var(--s-7);
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(206, 24, 31, 0.10), rgba(255,255,255,0.02) 55%);
}
.beat-strip__card h2 { font-size: var(--t-h3); margin-bottom: var(--s-3); max-width: 28ch; }
.beat-strip__card p { margin: 0; color: var(--ink-400); max-width: 52ch; }
.beat-strip__card .btn { flex: none; }

/* The nav item that is a pitch, not a page: a small red mark beside it. */
.nav__link--hot { color: var(--ink-050); }
.nav__link--hot::before {
  content: '';
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); margin-right: 0.45rem; vertical-align: 2px;
  box-shadow: 0 0 8px var(--red-glow);
}

/* --------------------------------------------------------------------------
   Comparison table — ledger treatment
   The Capital Hart column is the lit one: a warm wash, a red rule on its
   left, brighter type. Rows keep their staggered reveal; each row's lit cell
   also wipes in from the left as it appears.
   -------------------------------------------------------------------------- */
.compare__frame {
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.006));
  overflow: visible;
}
.compare__frame .compare__table { border-radius: 12px; overflow: hidden; }
.compare__table th, .compare__table td { padding: 1.05rem 1.5rem; }
.compare__table thead th { font-size: 0.8125rem; font-weight: 500; color: var(--ink-400); }
.compare__table thead th.col-ch { color: var(--ink-050); }
.compare__table tbody th { font-size: 0.9375rem; font-weight: 500; color: var(--ink-050); }
.compare__table td.col-ch {
  position: relative;
  background: rgba(206, 24, 31, 0.07);
  box-shadow: inset 2px 0 0 var(--red);
  color: var(--ink-050);
}
.compare__table thead th.col-ch { background: rgba(206, 24, 31, 0.09); box-shadow: inset 2px 0 0 var(--red); }
.compare__table td.col-other { color: var(--ink-600); }
.compare__table td.col-other .cell { opacity: 0.85; }

/* The wipe as a row reveals. */
.compare__table td.col-ch::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(244, 89, 95, 0.35), transparent);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}
.compare__table tr.reveal.is-in td.col-ch::after { animation: compare-wipe 900ms var(--ease) both; animation-delay: var(--reveal-delay, 0ms); }
@keyframes compare-wipe {
  0%   { transform: scaleX(0); opacity: 1; }
  60%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@media (max-width: 760px) {
  .compare__frame { border: 1px solid var(--hair); }
  .compare__table tbody td.col-ch { background: rgba(206, 24, 31, 0.09); }
}
@media (prefers-reduced-motion: reduce) { .compare__table td.col-ch::after { display: none; } }

/* --------------------------------------------------------------------------
   Guides — reading time and the next guide
   -------------------------------------------------------------------------- */
.article__meta {
  display: flex; gap: 0.6rem; align-items: center;
  margin-top: var(--s-4);
  font-size: 0.8125rem; font-weight: 500; color: var(--ink-600);
}
.next-guide {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-4);
  margin-top: var(--s-8);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(206, 24, 31, 0.08), rgba(255,255,255,0.02) 60%);
  color: var(--ink-050);
  transition: border-color var(--dur) var(--ease-io), transform var(--dur) var(--ease);
}
.next-guide:hover { border-color: var(--hair-strong); transform: translateY(-2px); }
.next-guide__k { display: block; font-size: 0.75rem; font-weight: 500; color: var(--red-text); margin-bottom: 0.35rem; grid-column: 1; }
.next-guide strong { display: block; font-size: 1.15rem; letter-spacing: -0.015em; grid-column: 1; }
.next-guide__blurb { display: block; font-size: 0.9rem; color: var(--ink-400); margin-top: 0.35rem; grid-column: 1; }
.next-guide__go {
  grid-column: 2; grid-row: 1 / span 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hair-strong); color: var(--ink-050);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease-io);
}
.next-guide:hover .next-guide__go { transform: translateX(4px); border-color: var(--red-text); }

/* --------------------------------------------------------------------------
   Status chip on inner pages
   -------------------------------------------------------------------------- */
.funding-clock--inline { margin: var(--s-4) 0 var(--s-3); }
.page-head .funding-clock--inline + h1 { margin-top: var(--s-2); }

/* --------------------------------------------------------------------------
   Hero lane lines — a streak of light travelling the grid, transform-only
   -------------------------------------------------------------------------- */
.hero__lane {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.hero__lane--x {
  top: 41%; left: 0;
  width: 240px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 89, 95, 0.75) 60%, transparent);
  box-shadow: 0 0 14px rgba(206, 24, 31, 0.35);
  animation: lane-x 16s linear infinite;
}
.hero__lane--y {
  top: 0; left: 63%;
  width: 1px; height: 200px;
  background: linear-gradient(180deg, transparent, rgba(143, 160, 192, 0.7) 60%, transparent);
  box-shadow: 0 0 12px rgba(143, 160, 192, 0.3);
  animation: lane-y 22s linear infinite;
  animation-delay: -9s;
}
@keyframes lane-x {
  from { transform: translate3d(-260px, 0, 0); }
  to   { transform: translate3d(100vw, 0, 0); }
}
@keyframes lane-y {
  from { transform: translate3d(0, -220px, 0); }
  to   { transform: translate3d(0, 100%, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero__lane { display: none; } }

/* --------------------------------------------------------------------------
   Intake card on phones — tighter, so the rows get the width
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .intake.intake--ledger { padding: var(--s-5) var(--s-4) var(--s-4); }
  .intake__bracket { inset: 7px; }
  .intake--ledger .field { grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr); column-gap: var(--s-3); }
  .intake--ledger .input { font-size: 1rem; }
}