/* ==========================================================================
   Capital Hart — components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink-050);
  --btn-bd: var(--hair-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 0.78rem 1.4rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  transition:
    background var(--dur-fast) var(--ease-io),
    border-color var(--dur-fast) var(--ease-io),
    color var(--dur-fast) var(--ease-io),
    transform var(--dur-fast) var(--ease-io),
    box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--red);
  --btn-bd: var(--red);
  --btn-fg: #fff;
  box-shadow: 0 0 0 0 var(--red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--primary:hover {
  --btn-bg: var(--red-lit);
  --btn-bd: var(--red-lit);
  box-shadow: 0 10px 30px -10px var(--red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn--ghost { --btn-bg: rgba(255, 255, 255, 0.02); }
.btn--ghost:hover {
  --btn-bd: var(--hair-strong);
  --btn-bg: rgba(255, 255, 255, 0.06);
}

.btn--lg { padding: 1rem 1.75rem; font-size: 0.95rem; }
.btn--block { width: 100%; }

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

/* Text link with an animated hairline underline. */
.link {
  display: inline-flex; align-items: center; gap: 0.45em;
  color: var(--ink-200);
  font-weight: 500;
  position: relative;
  transition: color var(--dur-fast) var(--ease-io);
}
.link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.link:hover { color: var(--ink-050); }
.link:hover::after { transform: scaleX(1); }
.link .arw { transition: transform var(--dur) var(--ease); }
.link:hover .arw { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed; inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 100;
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease-io),
              border-color var(--dur) var(--ease-io),
              backdrop-filter var(--dur) var(--ease-io);
}
.site-header.is-stuck {
  background: rgba(13, 24, 56, 0.72);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--hair);
}
.site-header__inner {
  width: 100%; max-width: 84rem; margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--s-5);
}

.brand { display: flex; align-items: center; gap: 0.6rem; flex: none; margin-right: auto; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__type { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  color: var(--ink-050); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.01em;
}
.brand__sub {
  font-family: var(--font-mono);
  font-size: 0.5625rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-600);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 0.05rem; }
.nav__link {
  padding: 0.6rem 0.68rem;
  font-size: 0.9875rem; font-weight: 500;
  white-space: nowrap;
  color: var(--ink-400);
  border-radius: var(--r-sm);
  position: relative;
  transition: color var(--dur-fast) var(--ease-io);
}
.nav__link:hover { color: var(--ink-050); }
.nav__link[aria-current='page'] { color: var(--ink-050); }
.nav__link[aria-current='page']::after {
  content: '';
  position: absolute; left: 0.68rem; right: 0.68rem; bottom: 0.2rem;
  height: 1px; background: var(--red);
}

.header__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.header__actions .btn { padding: 0.72rem 1.05rem; font-size: 0.9375rem; }

/* The header lockup runs a size up from the footer's. */
.site-header .brand__mark { width: 36px; height: 36px; }
.site-header .brand__name { font-size: 1.08rem; }
.site-header .brand__sub  { font-size: 0.625rem; margin-top: 4px; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--hair); border-radius: var(--r-sm);
  color: var(--ink-050); cursor: pointer;
  flex: none;
}
.nav-toggle__bars { width: 16px; height: 10px; position: relative; }
.nav-toggle__bars span {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) linear;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { bottom: 0; }
[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }

@media (max-width: 1240px) {
  .nav-toggle { display: inline-flex; }
  .nav, .header__actions .btn--ghost { display: none; }
  .header__actions { gap: var(--s-2); }
}
@media (max-width: 560px) {
  .header__actions .btn--primary { display: none; }
  .brand__sub { display: none; }
}

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--navy-950);
  border-top: 1px solid var(--hair);
  padding: var(--s-6) var(--gutter) var(--s-8);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s-2);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease-io),
              transform var(--dur) var(--ease),
              visibility var(--dur) step-end;
}
.mobile-nav.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur) var(--ease-io),
              transform var(--dur) var(--ease),
              visibility 0s;
}
.mobile-nav__link {
  display: flex; align-items: baseline; gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hair-soft);
  color: var(--ink-200);
  font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em;
}
.mobile-nav__link .idx {
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--ink-700); letter-spacing: 0.1em;
}
.mobile-nav__link[aria-current='page'] { color: var(--ink-050); }
.mobile-nav__actions { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.mobile-nav__actions .btn { padding: 0.95rem 1.4rem; }
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Panels & cards
   -------------------------------------------------------------------------- */

.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  position: relative;
}

.card {
  position: relative;
  padding: var(--s-6) var(--s-5) var(--s-6);
  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));
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-io),
              transform var(--dur) var(--ease),
              background var(--dur) var(--ease-io);
}
.card:hover {
  border-color: var(--hair-strong);
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
}

.card__idx {
  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-5);
}
.card__icon { color: var(--red); margin-bottom: var(--s-4); }
.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--ink-400); font-size: 0.9375rem; }

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }
/* Five across on wide screens; below that, rows that never strand one card
   awkwardly: 3 + 2, then 2 + 2 + 1, then a single column. */
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .grid--5 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Claim chips — the six offerings
   -------------------------------------------------------------------------- */

.claims {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--hair);
}
@media (max-width: 1040px) { .claims { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .claims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.claim {
  padding: var(--s-4) var(--s-5) var(--s-4) 0;
  border-bottom: 1px solid var(--hair);
}
.claim__k {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink-050);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.claim__k em { font-style: normal; color: var(--red-text); }
.claim__v {
  display: block;
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none;
  color: var(--ink-600);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { position: relative; margin-bottom: var(--s-4); }
.field__label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.005em; text-transform: none;
  color: var(--ink-600);
  margin-bottom: 0.45rem;
}
.field__opt { text-transform: none; letter-spacing: 0.02em; color: var(--ink-700); }

.input {
  width: 100%;
  padding: 0.85rem 0.95rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  color: var(--ink-050);
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease-io),
              background var(--dur-fast) var(--ease-io),
              box-shadow var(--dur-fast) var(--ease-io);
}
.input::placeholder { color: var(--ink-700); }
.input:hover { border-color: var(--hair-strong); }
.input:focus {
  outline: none;
  border-color: var(--red);
  background: rgba(0, 0, 0, 0.42);
  box-shadow: 0 0 0 3px var(--red-wash);
}
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238FA0C0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}
select.input option { background: var(--navy-900); color: var(--ink-050); }
textarea.input { resize: vertical; min-height: 7rem; line-height: 1.6; }

.field.is-invalid .input { border-color: var(--red-lit); }
.field.is-valid .input   { border-color: rgba(47, 191, 113, 0.55); }

.field__err {
  display: block;
  font-size: var(--t-micro);
  color: #ff9a9a;
  margin-top: 0.4rem;
  min-height: 0;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity var(--dur-fast) var(--ease-io), transform var(--dur-fast) var(--ease);
}
.field.is-invalid .field__err { opacity: 1; transform: none; }

.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form-note {
  font-size: var(--t-micro);
  color: var(--ink-700);
  line-height: 1.55;
  margin-top: var(--s-3);
}

/* Submit button state machine */
.submit { position: relative; overflow: hidden; }
.submit__label,
.submit__spin,
.submit__done {
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: opacity var(--dur-fast) var(--ease-io), transform var(--dur) var(--ease);
}
.submit__spin, .submit__done {
  position: absolute; inset: 0;
  justify-content: center;
  opacity: 0; transform: translateY(60%);
}
.submit.is-busy .submit__label { opacity: 0; transform: translateY(-60%); }
.submit.is-busy .submit__spin  { opacity: 1; transform: none; }
.submit.is-done .submit__label { opacity: 0; transform: translateY(-60%); }
.submit.is-done .submit__done  { opacity: 1; transform: none; }

.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.form-status {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--hair);
  border-left: 2px solid var(--red);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.9rem;
  color: var(--ink-200);
}
.form-status[hidden] { display: none; }
.form-status--ok { border-left-color: var(--ok); }

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */

.acc { border-top: 1px solid var(--hair); }
.acc__item { border-bottom: 1px solid var(--hair); }
.acc__btn {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  background: none; border: 0;
  color: var(--ink-200);
  font: inherit; font-size: 1.05rem; font-weight: 500;
  letter-spacing: -0.015em;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-io);
}
.acc__btn:hover { color: var(--ink-050); }
.acc__btn[aria-expanded='true'] { color: var(--ink-050); }
.acc__sign {
  flex: none; position: relative;
  width: 14px; height: 14px; margin-top: 0.4rem;
}
.acc__sign::before, .acc__sign::after {
  content: ''; position: absolute; background: var(--red);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) linear;
}
.acc__sign::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
.acc__sign::after  { left: 6px; top: 0; width: 1.5px; height: 14px; }
.acc__btn[aria-expanded='true'] .acc__sign::after { transform: scaleY(0); }

.acc__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-io);
}
.acc__panel > div { overflow: hidden; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__body { padding-bottom: var(--s-5); max-width: 60ch; color: var(--ink-400); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%);
  padding-block: var(--s-8) var(--s-6);
  position: relative;
  overflow: hidden;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: var(--s-7) var(--s-5);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.footer__title {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.005em; text-transform: none;
  color: var(--ink-700);
  margin-bottom: var(--s-4);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 0.6rem; }
.footer__list a {
  font-size: 0.9rem; color: var(--ink-400);
  transition: color var(--dur-fast) var(--ease-io);
}
.footer__list a:hover { color: var(--ink-050); }

.footer__bottom {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  align-items: center; justify-content: space-between;
  font-size: var(--t-micro);
  color: var(--ink-700);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer__legal a:hover { color: var(--ink-200); }

.disclaimer {
  margin-top: var(--s-5);
  font-size: var(--t-micro);
  line-height: 1.7;
  color: var(--ink-600);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--hair); }
.cta-band__inner {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-6);
  padding-block: var(--s-9);
}
.cta-band h2 { margin-bottom: var(--s-3); max-width: 18ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   Proximity glow
   Each box draws two layers positioned by the cursor: an inner wash under the
   pointer, and a border ring lit by a cone aimed at the pointer's direction.
   The cone narrows and brightens as the cursor nears the edge, so the border
   itself does the pointing. JS writes five custom properties; CSS draws.
   -------------------------------------------------------------------------- */

/* Registered so the angle can be animated (the reveal sweep below) rather than
   snapping between keyframes. */
@property --cursor-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --edge-proximity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

[data-glow] {
  --glow-rgb: 226, 52, 58;
  --glow-intensity: 0;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-radius: 340px;
  --cursor-angle: 0deg;
  --edge-proximity: 0;
  /* Wide and diffuse from the middle of a box, tight and directional at its
     edge — the cone sharpens as you close in. */
  --cone: calc(64 - 34 * var(--edge-proximity));
  position: relative;
}

/* Inner wash — the box reads as lit from the cursor's side. */
[data-glow]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    var(--glow-radius) circle at var(--glow-x) var(--glow-y),
    rgba(var(--glow-rgb), 0.17) 0%,
    rgba(var(--glow-rgb), 0.07) 34%,
    transparent 66%
  );
  opacity: var(--glow-intensity);
  transition: opacity var(--dur) var(--ease-io);
  pointer-events: none;
  z-index: 0;
}

/* Border ring — a cone of light plus a faint even frame, both clipped to a
   1px border by an XOR mask. */
[data-glow]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    conic-gradient(
      from calc(var(--cursor-angle) - var(--cone) * 1deg) at 50% 50%,
      rgba(var(--glow-rgb), 0) 0deg,
      rgba(var(--glow-rgb), 1) calc(var(--cone) * 1deg),
      rgba(var(--glow-rgb), 0) calc(var(--cone) * 2deg)
    ),
    linear-gradient(rgba(var(--glow-rgb), 0.2) 0 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: calc(var(--glow-intensity) * (0.55 + 0.45 * var(--edge-proximity)));
  transition: opacity var(--dur) var(--ease-io);
  pointer-events: none;
  z-index: 1;
}

/* Content has to sit above both layers. */
[data-glow] > * { position: relative; z-index: 2; }

/* --- one-shot sweep as a box first scrolls into view --------------------- */

@keyframes border-sweep {
  0%   { --cursor-angle: 110deg; --edge-proximity: 0;   opacity: 0; }
  12%  {                         --edge-proximity: 1;   opacity: 1; }
  78%  {                         --edge-proximity: 1;   opacity: 1; }
  100% { --cursor-angle: 470deg; --edge-proximity: 0.2; opacity: 0; }
}

.is-sweeping::after {
  animation: border-sweep 2s var(--ease-io);
}

/* --- the shared light behind a group of boxes ---------------------------- */

[data-bento] { position: relative; isolation: isolate; }

.bento-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 620px;
  height: 620px;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  background: radial-gradient(
    circle closest-side,
    rgba(226, 52, 58, 0.2) 0%,
    rgba(226, 52, 58, 0.08) 38%,
    transparent 72%
  );
  transition: opacity 0.35s var(--ease-io);
  will-change: transform, opacity;
}

[data-bento] > [data-glow] { z-index: 1; }

/* Cells that are only separated by hairlines (no left/right border) would get a
   phantom frame from the ring — they take the inner wash alone. */
[data-glow='wash']::after { display: none; }

/* Small pill: the ring is the whole point, the wash is too subtle to bother. */
.funding-clock[data-glow] { --glow-radius: 180px; }
.funding-clock[data-glow]::before { display: none; }

/* Big surfaces spread their light further. */
.compare__frame[data-glow] { --glow-radius: 520px; }

/* Wide, short cards — a tighter light reads better than a broad wash. */
.post[data-glow] { --glow-radius: 300px; }

/* --- small bordered controls -------------------------------------------
   Buttons, the menu toggle, status messages and the table footnote all hold
   bare text nodes, which the inner wash would paint straight over. They take
   the ring alone, on a tighter light and a snappier response. */
.btn[data-glow],
.nav-toggle[data-glow],
.form-status[data-glow],
.compare__foot[data-glow] {
  --glow-radius: 150px;
}
.btn[data-glow]::before,
.nav-toggle[data-glow]::before,
.form-status[data-glow]::before,
.compare__foot[data-glow]::before { display: none; }

.btn[data-glow]::after,
.nav-toggle[data-glow]::after { transition: opacity 0.16s var(--ease-io); }

/* A red ring on a red fill is invisible, so the primary button catches white
   light instead — it reads as a specular highlight on the edge. */
.btn--primary[data-glow] { --glow-rgb: 255, 255, 255; }

@media (prefers-reduced-motion: reduce) {
  .bento-spotlight { display: none; }
  [data-glow]::before, [data-glow]::after { transition: none; }
  .is-sweeping::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Standalone border glow — [data-border-glow]
   A thin highlight on the border itself that sits under the cursor and slides
   along the edge as the pointer moves around the box. Two layers, both clipped
   to the border by an XOR mask: a crisp 1px line and a slightly wider, blurred
   copy that gives it a little bloom without ever becoming a blob.
   JS (assets/js/border-glow.js) writes --glow-x/--glow-y (px, relative to the
   box) and --glow-intensity (0–1). Everything else is a dial here.
   -------------------------------------------------------------------------- */

[data-border-glow] {
  --glow-hsl: 357 82% 62%;        /* brand red as bare hsl components */
  --glow-reach: 220px;            /* how much of the border lights at once */
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-intensity: 0;
  --highlight: radial-gradient(
    var(--glow-reach) circle at var(--glow-x) var(--glow-y),
    hsl(var(--glow-hsl) / 100%) 0%,
    hsl(var(--glow-hsl) / 55%) 30%,
    hsl(var(--glow-hsl) / 0%) 70%
  );
  position: relative;
  isolation: isolate;
  overflow: visible;
}

[data-border-glow] > .edge-ring,
[data-border-glow] > .edge-light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--highlight);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: opacity 0.22s var(--ease-io);
  pointer-events: none;
  z-index: 1;
}

/* The crisp line on the border. */
[data-border-glow] > .edge-ring {
  padding: 1px;
  opacity: var(--glow-intensity);
}

/* A hair wider and softened — the bloom around the line. */
[data-border-glow] > .edge-light {
  inset: -1px;
  padding: 3px;
  filter: blur(3px);
  opacity: calc(var(--glow-intensity) * 0.7);
}

/* Content above both layers. */
[data-border-glow] > :not(.edge-light):not(.edge-ring) { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  [data-border-glow] > .edge-light,
  [data-border-glow] > .edge-ring { display: none; }
}

/* --------------------------------------------------------------------------
   Ledger intake — .intake--ledger
   The intake card as a rate sheet rather than a stack of boxes. Each field is
   one row: mono label on the left, the value set right on the same baseline,
   a hairline beneath. A red rule draws in from the right on focus and turns
   green once the value validates. No filled inputs anywhere.
   -------------------------------------------------------------------------- */

.intake.intake--ledger {
  border-radius: 12px;
  padding: var(--s-6) var(--s-6) var(--s-5);
  overflow: visible;
}
.intake.intake--ledger::before { display: none; }   /* the old top rule */

/* Corner brackets, like a hardware label: red top-left, faint bottom-right. */
.intake__bracket { position: absolute; inset: 9px; pointer-events: none; z-index: 2; }
.intake__bracket::before,
.intake__bracket::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
}
.intake__bracket::before { top: 0; left: 0; border-top: 1px solid var(--red-text); border-left: 1px solid var(--red-text); }
.intake__bracket::after  { bottom: 0; right: 0; border-bottom: 1px solid var(--hair-strong); border-right: 1px solid var(--hair-strong); }

/* Head: title left; live meter and count right. */
.intake--ledger .intake__head { align-items: center; margin-bottom: var(--s-4); }
.intake--ledger .intake__head h2 { font-size: 1.25rem; }
.intake__meta { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; }
.intake__meter { display: inline-flex; gap: 3px; }
.intake__meter i {
  display: block; width: 14px; height: 3px;
  background: var(--hair-strong);
  transition: background var(--dur) var(--ease-io), box-shadow var(--dur) var(--ease-io);
}
.intake__meter i.is-on { background: var(--ok); box-shadow: 0 0 8px rgba(47, 191, 113, 0.45); }
.intake--ledger .intake__step {
  font-family: var(--font-sans);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-600);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) { .intake--ledger .intake__step { display: inline; } }

/* Rows */
.intake--ledger .field {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-4);
  margin: 0;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--hair);
  position: relative;
}
.intake--ledger .field--stack { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 0.75rem; }

.intake--ledger .field__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--ink-400);
  transition: color var(--dur-fast) var(--ease-io);
}
.intake--ledger .field:focus-within .field__label { color: var(--ink-050); }
.intake--ledger .field__opt { font-size: 0.75rem; font-weight: 400; color: var(--ink-700); }

.intake--ledger .input,
.intake--ledger .input:hover,
.intake--ledger .input:focus {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0.7rem 0;
  text-align: right;
  font-size: 1.05rem;
  color: var(--ink-050);
  min-width: 0;
}
.intake--ledger select.input {
  text-align-last: right;
  background-position: right 0 center;
  padding-right: 1.4rem;
}
.intake--ledger textarea.input { text-align: left; min-height: 5.5rem; padding-top: 0.4rem; }
.intake--ledger .input::placeholder { color: var(--ink-700); opacity: 0.8; }

/* The rule: draws in from the right on focus, settles green when valid. */
.intake--ledger .field::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--red-text);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease-io), opacity var(--dur) var(--ease-io);
}
.intake--ledger .field:focus-within::after { transform: scaleX(1); }
.intake--ledger .field.is-valid::after   { transform: scaleX(1); background: var(--ok); opacity: 0.7; }
.intake--ledger .field.is-invalid::after { transform: scaleX(1); background: var(--red-lit); }

.intake--ledger .field__err {
  grid-column: 1 / -1;
  text-align: right;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur) var(--ease), opacity var(--dur-fast) var(--ease-io), transform var(--dur-fast) var(--ease);
}
.intake--ledger .field.is-invalid .field__err { max-height: 2rem; padding-bottom: 0.4rem; }

/* MC readout: the digits echoed back into a fixed grid as they are typed. */
.ledger__echo {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--ink-700);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--dur) var(--ease-io), transform var(--dur) var(--ease),
              max-height var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.ledger__echo.is-live { opacity: 1; transform: none; max-height: 2rem; padding-bottom: 0.45rem; }
.ledger__echo b { font-family: var(--font-sans); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.02em; text-transform: none; color: var(--ink-600); }
.ledger__echo b.is-ok { color: var(--ok); }
.ledger__cells { display: inline-flex; gap: 2px; }
.ledger__cells i {
  display: grid; place-items: center;
  width: 13px; height: 16px;
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0;
  color: var(--ink-200);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: background var(--dur-fast) var(--ease-io), color var(--dur-fast) var(--ease-io);
}
.ledger__cells i.is-set { background: rgba(244, 89, 95, 0.12); box-shadow: inset 0 0 0 1px rgba(244, 89, 95, 0.35); color: var(--ink-050); }

/* Section rule inside a long form. */
.ledger__section {
  margin: var(--s-5) 0 0.2rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-700);
}

/* Machined button: lit top edge, shadowed bottom edge, arrow that travels. */
.intake.intake--ledger .btn--primary {
  margin-top: var(--s-5);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--red-lit), var(--red));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(0, 0, 0, 0.4);
}
.intake--ledger .btn--primary:hover {
  background: linear-gradient(180deg, #e0262d, var(--red-lit));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 12px 28px -12px var(--red-glow);
}
.intake--ledger .submit__label svg { transition: transform var(--dur) var(--ease); }
.intake--ledger .submit:hover .submit__label svg { transform: translateX(4px); }

/* In flight: a mono status line inside the button instead of a spinner. */
.intake--ledger .submit__spin,
.intake--ledger .submit__done {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
.intake--ledger .spinner { display: none; }
.intake--ledger .submit__spin::after {
  content: '';
  display: inline-block;
  width: 7px; height: 12px;
  margin-left: 0.1rem;
  background: currentColor;
  animation: caret 900ms steps(2, start) infinite;
}
@keyframes caret { to { visibility: hidden; } }

/* Status becomes a mono line, not a box. */
.intake--ledger .form-status {
  margin-top: var(--s-3);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0;
  line-height: 1.6;
  color: var(--red-text);
}
.intake--ledger .form-status::before { content: '› '; }
.intake--ledger .form-status--ok { color: var(--ok); }
.intake--ledger .form-note { margin-top: var(--s-4); }

/* Motion, once: rows settle in with a 40ms stagger. */
@keyframes ledger-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.intake--ledger .field { animation: ledger-in 560ms var(--ease) both; }
.intake--ledger .field:nth-child(1) { animation-delay: 120ms; }
.intake--ledger .field:nth-child(2) { animation-delay: 160ms; }
.intake--ledger .field:nth-child(3) { animation-delay: 200ms; }
.intake--ledger .field:nth-child(4) { animation-delay: 240ms; }
.intake--ledger .field:nth-child(5) { animation-delay: 280ms; }
.intake--ledger .field:nth-child(6) { animation-delay: 320ms; }
.intake--ledger .field:nth-child(7) { animation-delay: 360ms; }
.intake--ledger .field:nth-child(8) { animation-delay: 400ms; }
.intake--ledger .field:nth-child(n+9) { animation-delay: 440ms; }

@media (prefers-reduced-motion: reduce) {
  .intake--ledger .field { animation: none; }
  .intake--ledger .submit__spin::after { animation: none; }
  .intake--ledger .field::after,
  .intake--ledger .field__err,
  .ledger__echo { transition: none; }
}

/* --------------------------------------------------------------------------
   Shiny text — .shiny
   Port of the ShinyText component: the text is a clipped gradient and a band
   of light sweeps across it right to left, then rests off-screen for a beat
   before the next pass. Pure CSS; the timing dials are the two custom
   properties. Falls back to plain text where clip-to-text is unsupported.
   -------------------------------------------------------------------------- */

.shiny {
  --shine-base:  #dde3f0;     /* the text colour between sweeps */
  --shine-color: #ffffff;     /* the band of light */
  --shine-speed: 2s;          /* one pass */
  --shine-delay: 3.2s;        /* rest between passes */
  --shine-spread: 120deg;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .shiny {
    background-image: linear-gradient(
      var(--shine-spread),
      var(--shine-base) 0%,
      var(--shine-base) 35%,
      var(--shine-color) 50%,
      var(--shine-base) 65%,
      var(--shine-base) 100%
    );
    background-size: 200% auto;
    background-position: 150% center;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine calc(var(--shine-speed) + var(--shine-delay)) linear infinite;
  }
}

/* The sweep occupies the first (speed / total) of each cycle; the rest holds
   the band off-screen to the left so only the base colour shows. */
@keyframes shine {
  0%   { background-position: 150% center; }
  38%  { background-position: -50% center; }
  100% { background-position: -50% center; }
}

@media (prefers-reduced-motion: reduce) {
  .shiny { animation: none; background-position: -50% center; }
}

/* --------------------------------------------------------------------------
   Google reviews strip — .reviews / .marquee
   Ten reviews in a row that scrolls without end. The list is duplicated in
   the markup and the track slides by exactly half its width, so the loop
   point is invisible. Transform-only, so it runs on the compositor. Pauses
   while the pointer is over it; reduced-motion users get a row they can
   scroll by hand.
   -------------------------------------------------------------------------- */

.reviews__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
  margin-bottom: var(--s-8);
}
.reviews__head h2 { margin: 0; max-width: 16ch; }

.reviews__google {
  display: inline-flex; align-items: center; gap: var(--s-4);
  padding: 0.7rem 1rem 0.7rem 0.75rem;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-200);
  transition: border-color var(--dur) var(--ease-io), background var(--dur) var(--ease-io);
}
.reviews__google:hover { border-color: var(--hair-strong); background: rgba(255, 255, 255, 0.05); }
.reviews__g {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #1f2937;
  font-weight: 700; font-size: 1.1rem;
}
.reviews__score { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.reviews__score strong { font-size: 1.15rem; color: var(--ink-050); font-variant-numeric: tabular-nums; }
.reviews__count { font-size: 0.8125rem; color: var(--ink-600); }

/* Five stars, drawn with a mask so they take any colour. */
.stars { display: inline-flex; gap: 2px; }
.stars i {
  width: 14px; height: 14px; display: block;
  background: #f5b301;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.7.8-4.9 4.6 1.3 6.6L12 17.3l-6 3.3 1.3-6.6L2.4 9.4l6.7-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.7.8-4.9 4.6 1.3 6.6L12 17.3l-6 3.3 1.3-6.6L2.4 9.4l6.7-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.marquee {
  --marquee-gap: var(--s-4);
  --marquee-speed: 70s;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--marquee-gap);
  width: max-content;
  animation: marquee var(--marquee-speed) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list {
  display: flex; gap: var(--marquee-gap);
  list-style: none; margin: 0; padding: 0;
  flex: none;
}
@keyframes marquee {
  to { transform: translateX(calc(-50% - var(--marquee-gap) / 2)); }
}

.review {
  width: clamp(17rem, 22vw, 21rem);
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: 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));
}
.review__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-200);
  flex: 1;
}
.review__who { display: flex; align-items: center; gap: var(--s-3); }
.review__who strong { display: block; font-size: 0.875rem; color: var(--ink-050); font-weight: 600; }
.review__who small { display: block; font-size: 0.75rem; color: var(--ink-600); margin-top: 2px; }
.review__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--red-wash);
  color: var(--red-text);
  font-weight: 600; font-size: 0.8125rem;
  overflow: hidden;
}
/* The avatar shows the initial only: the name is clipped to its first letter. */
.review__avatar { max-width: 34px; white-space: nowrap; letter-spacing: 40px; text-indent: 12px; }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
  .marquee__track { animation: none; }
  .marquee__list[aria-hidden='true'] { display: none; }
}

/* --------------------------------------------------------------------------
   Turnstile
   The anti-bot widget slot sits between the last field and the submit
   button. interaction-only mode keeps it zero-height unless Cloudflare
   decides the visitor needs a visible check.
   -------------------------------------------------------------------------- */
.turnstile-slot:not(:empty) { margin-block-end: var(--s-4, 1rem); }
.turnstile-slot iframe { max-width: 100%; }