:root {
  --navy: #0a1628;
  --blue: #1a56db;
  --blue2: #2563eb;
  --sky: #e8f0fe;
  --mist: #f4f7ff;
  --white: #ffffff;
  --slate: #475569;
  --rule: rgba(26,86,219,.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  color: var(--navy);
  background: var(--white);
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 999;
  padding: 20px 0;
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: padding .3s;
}
nav.scrolled { padding: 12px 0; }
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.5px;
  text-decoration: none;
  /* inline-flex, not flex: the anchor still sits in the nav row as an inline
     item, and the mark aligns to the wordmark rather than to the line box. */
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* Sized in em so it tracks the wordmark: 1.5em against a 1.35rem font puts the
   mark at roughly the cap height of the C, which is what makes it read as one
   lockup rather than an icon parked next to some text. */
.nav-logo-mark {
  width: 1.15em; height: 1.15em;
  display: block; flex: none;
  object-fit: contain;
}
/* The wordmark is wrapped so it stays ONE flex item - without it, the bare
   text node and the <span> become separate anonymous items and the flex gap
   opens up between "Court" and "Ledger". But that made ".nav-logo span" match
   the wrapper as well as the inner span, which painted the whole wordmark
   blue. Scoped to the direct child, so Court is navy and Ledger is blue. */
.nav-logo-text { display: inline-block; color: var(--navy); }
.nav-logo-text > span { color: var(--blue); }
@media (max-width: 575px) { .nav-logo { gap: 6px; font-size: 1.2rem; } }
.nav-link-item {
  color: var(--slate);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: color .2s;
}
.nav-link-item:hover { color: var(--blue); }
.btn-nav {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 22px;
  font-size: .88rem;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.btn-nav:hover { background: var(--blue2); transform: translateY(-1px); }

/* ── MOBILE NAV ── */
.nav-toggler {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid rgba(26,86,219,.25);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
@media (max-width: 767.98px) {
  .nav-toggler { display: -webkit-flex; display: flex; }
}
.nav-toggler-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  margin: 2px 0;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggler[aria-expanded="true"] .nav-toggler-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggler[aria-expanded="true"] .nav-toggler-bar:nth-child(2) { opacity: 0; }
.nav-toggler[aria-expanded="true"] .nav-toggler-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 24px 22px;
  border-top: 1px solid var(--rule);
}
.mobile-nav-panel .nav-link-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.mobile-nav-cta {
  margin-top: 12px;
  text-align: center;
}

/* ── HERO ── */
.hero {
  min-height: 100vh;
  padding: 140px 0 100px;
  background: var(--white);
  position: relative;
  overflow: hidden;
}
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .6;
}
.hero-glow {
  position: absolute;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(26,86,219,.08) 0%, transparent 70%);
  top: -100px; right: -100px;
  pointer-events: none;
  animation: glow-pulse 6s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sky);
  color: var(--blue);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 28px;
  animation: fade-up .6s ease both;
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.hero h1 {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--navy);
  animation: fade-up .7s .1s ease both;
}
.hero h1 em {
  font-style: normal;
  color: var(--blue);
  position: relative;
}
.hero h1 em::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 0; right: 0;
  height: 3px;
  background: var(--blue);
  opacity: .25;
  border-radius: 2px;
}
.hero-sub {
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--slate);
  line-height: 1.7;
  max-width: 520px;
  margin: 24px 0 40px;
  animation: fade-up .7s .2s ease both;
}
.hero-ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
  animation: fade-up .7s .3s ease both;
}
.btn-primary-cl {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 30px;
  font-size: .95rem;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  text-decoration: none;
  display: inline-block;
}
.btn-primary-cl:hover {
  background: var(--blue2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,86,219,.3);
  color: #fff;
}
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid rgba(10,22,40,.15);
  border-radius: 10px;
  padding: 14px 30px;
  font-size: .95rem;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
  text-decoration: none;
  display: inline-block;
}
.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
}

/* ── HERO CARD ── */
.hero-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(10,22,40,.08), 0 4px 16px rgba(26,86,219,.06);
  overflow: hidden;
  animation: fade-left .8s .2s ease both;
}
.card-topbar {
  background: var(--mist);
  border-bottom: 1px solid var(--rule);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-r { background: #fc6358; }
.dot-y { background: #fdbc40; }
.dot-g { background: #33c748; }
.card-title-bar {
  flex: 1;
  text-align: center;
  font-size: .75rem;
  color: var(--slate);
  font-weight: 500;
}
.card-body-inner { padding: 24px; }
.schedule-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: .84rem;
  font-weight: 500;
  opacity: 0;
  transform: translateX(12px);
  transition: background .2s;
}
.schedule-row:hover { background: var(--mist); }
.schedule-row .badge-sched {
  background: var(--sky);
  color: var(--blue);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: .72rem;
  font-weight: 500;
  min-width: 32px;
  text-align: center;
}
.schedule-row .amt {
  margin-left: auto;
  font-weight: 500;
  color: var(--navy);
}
.schedule-row .amt.pos { color: #146c33; }
.schedule-row .amt.neg { color: #dc2626; }
.check-icon {
  width: 16px; height: 16px;
  background: #dcfce7;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.check-icon::after {
  content: '✓';
  font-size: .6rem;
  color: #146c33;
  font-weight: 700;
}
.card-footer-inner {
  background: var(--mist);
  border-top: 1px solid var(--rule);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  color: var(--slate);
}
.export-btn-fake {
  background: var(--blue);
  color: #fff;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: .75rem;
  font-weight: 500;
}

@keyframes fade-up { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes fade-left{ from { opacity:0; transform:translateX(32px); } to { opacity:1; transform:none; } }

/* ── STATS BAND ── */
.stats-band {
  background: var(--navy);
  padding: 128px 0;
  position: relative;
  overflow: hidden;
}
.stats-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
}
.stats-band-label {
  text-align: center;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  margin-bottom: 40px;
  position: relative;
}
.stat-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 32px 28px;
  height: 100%;
  transition: border-color .25s, background .25s, transform .25s;
}
.stat-card:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-4px);
}
.stat-card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 24px;
}
.stat-card-icon.teal   { background: rgba(45,212,191,.15);  color: #2dd4bf; }
.stat-card-icon.green  { background: rgba(132,204,22,.15);  color: #84cc16; }
.stat-card-icon.purple { background: rgba(167,139,250,.15); color: #a78bfa; }
.stat-card-icon.blue   { background: rgba(96,165,250,.15);  color: #60a5fa; }
.stat-card-icon.orange { background: rgba(251,191,36,.15);  color: #fbbf24; }
.stat-card-icon.red    { background: rgba(248,113,113,.15); color: #f87171; }
.stat-card-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  display: block;
  margin-bottom: 14px;
}
.stat-card-num .stat-accent { color: #60a5fa; }
.stat-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}
.stat-card-desc {
  font-size: .85rem;
  color: rgba(255,255,255,.55);
  line-height: 1.65;
  font-weight: 300;
}

/* ── FEATURES ── */
.features { padding: 120px 0; background: var(--white); }
.section-label {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.section-title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.section-sub {
  color: var(--slate);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  max-width: 480px;
  margin-top: 16px;
}
.feat-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 36px 32px;
  height: 100%;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  position: relative;
  overflow: hidden;
}
.feat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.feat-card:hover {
  border-color: rgba(26,86,219,.25);
  box-shadow: 0 12px 40px rgba(26,86,219,.08);
  transform: translateY(-4px);
}
.feat-card:hover::before { transform: scaleX(1); }
.feat-icon {
  width: 48px; height: 48px;
  background: var(--sky);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  font-size: 1.4rem;
}
.feat-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
.feat-card p {
  font-size: .9rem;
  color: var(--slate);
  line-height: 1.65;
  font-weight: 300;
}

/* ── HOW IT WORKS ── */
.how { padding: 120px 0; background: var(--mist); }
.step-num {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--sky);
  line-height: 1;
  margin-bottom: 12px;
}
.step-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
.step-desc {
  font-size: .9rem;
  color: var(--slate);
  line-height: 1.65;
  font-weight: 300;
}

/* ── REVIEWS ── */
.reviews { padding: 120px 0; background: var(--white); }
.review-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 32px 28px;
  height: 100%;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.review-card:hover {
  border-color: rgba(26,86,219,.2);
  box-shadow: 0 10px 36px rgba(26,86,219,.07);
  transform: translateY(-3px);
}
.review-stars {
  color: #f59e0b;
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.review-text {
  font-size: .92rem;
  color: var(--slate);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 20px;
  font-style: italic;
}
.reviewer-name {
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy);
}
.reviewer-role {
  font-size: .78rem;
  color: var(--slate);
  margin-top: 2px;
}
.reviewer-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sky);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ── PRICING ── */
.pricing { padding: 120px 0; background: var(--white); }
.price-card {
  border: 1.5px solid var(--rule);
  border-radius: 20px;
  padding: 44px 36px;
  position: relative;
  transition: transform .25s, box-shadow .25s;
  background: var(--white);
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(26,86,219,.1);
}
.price-card.featured {
  border-color: var(--blue);
  background: var(--navy);
}
.popular-badge {
  position: absolute;
  top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--blue);
  color: #fff;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 4px 14px;
  white-space: nowrap;
}
.price-plan {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.price-card.featured .price-plan { color: #60a5fa; }
.price-amount {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.price-card.featured .price-amount { color: #fff; }
.price-period {
  font-size: .85rem;
  color: var(--slate);
  margin-left: 4px;
}
.price-card.featured .price-period { color: rgba(255,255,255,.5); }
.price-desc {
  font-size: .85rem;
  color: var(--slate);
  margin: 12px 0 28px;
  line-height: 1.6;
}
.price-card.featured .price-desc { color: rgba(255,255,255,.6); }
.price-feature {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .88rem;
  color: var(--slate);
  margin-bottom: 12px;
  line-height: 1.5;
}
.price-card.featured .price-feature { color: rgba(255,255,255,.75); }
.price-check {
  width: 18px; height: 18px;
  background: var(--sky);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem;
  color: var(--blue);
  font-weight: 700;
  margin-top: 1px;
}
.price-card.featured .price-check {
  background: rgba(96,165,250,.2);
  color: #60a5fa;
}

/* ── STRIPE SECTION & TRIAL BUTTON ── */
.stripe-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.price-card.featured .stripe-section {
  border-top-color: rgba(255,255,255,.1);
}

.btn-start-trial {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  background: var(--blue);
  color: #fff;
  border: none;
  box-sizing: border-box;
}
.btn-start-trial:hover {
  background: var(--blue2);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,86,219,.3);
}
.btn-start-trial.featured-trial {
  background: #fff;
  color: var(--navy);
}
.btn-start-trial.featured-trial:hover {
  background: #f0f4ff;
  color: var(--navy);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.trial-note {
  font-size: .73rem;
  color: var(--slate);
  text-align: center;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.trial-note::before,
.trial-note::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
  max-width: 40px;
}
.price-card.featured .trial-note {
  color: rgba(255,255,255,.35);
}
.price-card.featured .trial-note::before,
.price-card.featured .trial-note::after {
  background: rgba(255,255,255,.1);
}

/* ── CTA BAND ── */
.cta-band {
  background: var(--blue);
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 50px 50px;
}
.cta-band h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff;
  font-weight: 700;
  letter-spacing: -.02em;
  position: relative;
}
.cta-band p {
  color: rgba(255,255,255,.7);
  font-size: 1rem;
  font-weight: 300;
  margin: 16px auto 36px;
  max-width: 480px;
  position: relative;
}
.btn-white {
  background: #fff;
  color: var(--blue);
  border: none;
  border-radius: 10px;
  padding: 14px 32px;
  font-size: .95rem;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  color: var(--blue);
}

/* ── FOOTER ── */
footer {
  background: var(--navy);
  padding: 48px 0 32px;
}
.foot-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}
.foot-logo span { color: #60a5fa; }
.foot-tagline {
  font-size: .82rem;
  color: rgba(255,255,255,.4);
  margin-top: 6px;
}
.foot-link {
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
  transition: color .2s;
}
.foot-link:hover { color: #60a5fa; }
.foot-divider {
  border-color: rgba(255,255,255,.08);
  margin: 32px 0 24px;
}
.foot-copy {
  font-size: .78rem;
  color: rgba(255,255,255,.3);
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ── COUNTER ── */
.counter-val { display: inline; }

/* ── THANKS / CANCEL PAGES ── */
.standalone-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  background: var(--white);
  position: relative;
  overflow: hidden;
}
.standalone-page .page-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .5;
}
.standalone-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  margin: 0 auto 28px;
  position: relative;
}
.standalone-icon.success { background: #dcfce7; }
.standalone-icon.cancel  { background: #fef2f2; }
.standalone-page h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.03em;
  margin-bottom: 16px;
  position: relative;
}
.standalone-page p {
  font-size: 1.05rem;
  color: var(--slate);
  font-weight: 300;
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 36px;
  position: relative;
}
.standalone-page .back-link {
  font-size: .88rem;
  color: var(--blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  transition: gap .2s;
}
.standalone-page .back-link:hover { gap: 10px; }

/* ── FAQ ── */
.faq { padding: 120px 0; background: var(--mist); }
.faq .accordion-item {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 14px !important;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(10,22,40,.03);
}
.faq .accordion-button {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--navy);
  background: var(--white);
  padding: 20px 24px;
  box-shadow: none !important;
}
.faq .accordion-button:not(.collapsed) {
  color: var(--blue2);
  background: var(--mist);
}
.faq .accordion-button:focus { box-shadow: none; border-color: var(--rule); }
.faq .accordion-button::after {
  filter: invert(28%) sepia(76%) saturate(1839%) hue-rotate(206deg) brightness(93%) contrast(93%);
}
.faq .accordion-body {
  font-size: .92rem;
  font-weight: 300;
  color: var(--slate);
  line-height: 1.7;
  padding: 4px 24px 22px;
}

/* ── Comparison table ──────────────────────────────────────────────────── */
.compare { padding: 120px 0; background: var(--sky); }
.compare-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule); border-radius: 16px; background: var(--white);
}
.compare-table { width: 100%; min-width: 940px; border-collapse: collapse; color: var(--navy); }
.compare-table th, .compare-table td {
  padding: 20px 20px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule); font-size: .9rem; line-height: 1.5;
}
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; }
.compare-table thead th {
  font-family: 'DM Sans', sans-serif;
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--navy); background: var(--mist);
  border-bottom: 2px solid var(--rule); line-height: 1.5;
}
.compare-table thead th span { display: block; margin-top: 4px; color: var(--slate); }
.compare-table tbody th {
  font-weight: 600; width: 17%; color: var(--navy); background: var(--mist);
}
.compare-table td { color: var(--slate); }
.compare-col-us { background: rgba(26,86,219,.055); }
.compare-table td.compare-col-us { color: var(--navy); }
.compare-table thead th.compare-col-us { background: rgba(26,86,219,.12); color: var(--blue); }
.compare-yes { color: #146c33; font-weight: 700; }
.compare-no  { color: #a81b1b; font-weight: 700; }
.compare-unk { color: var(--slate); font-weight: 700; }
.compare-na  { color: var(--slate); font-style: italic; }
.compare-q   { display: block; font-size: .84rem; color: var(--slate); margin-top: 6px; line-height: 1.45; }
.compare-col-us .compare-q { color: #3d4d63; }
.compare-price { display: block; font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.compare-note { font-size: .8rem; color: var(--slate); margin-top: 22px; line-height: 1.7; max-width: 900px; }
.compare-hint { font-size: .8rem; color: var(--slate); margin-bottom: 10px; }
@media (max-width: 991px) {
  .compare { padding: 72px 0; }
  .compare-table th, .compare-table td { padding: 14px 14px; font-size: .86rem; }
}

/* Alternating section grounds, so no two neighbours share one. */
/* ── Section rhythm ────────────────────────────────────────────────────────
   Strict white / grey alternation down the page, so no two neighbours share a
   ground. The two dark bands (stats, CTA) are accents and sit outside it.

   The band is --sky (#e8f0fe), not --mist (#f4f7ff). Mist is about 2% off
   white, which is a value you can measure and not one you can see: compare
   and how were technically different colours and still read as one block.

     hero          white
     stats-band    navy      accent
     features      white
     #security     grey
     compare       white
     how           grey
     pricing       white     currently commented out of the HTML
     faq           grey      (was white while pricing was hidden)
     cta-band      blue      accent

   A hairline top border backs this up, so a seam survives even if two
   neighbours ever do end up matching. */
.features                       { background: var(--white); }
#security.features              { background: var(--sky); }
.compare                        { background: var(--white); }
.how                            { background: var(--sky); }
.pricing                        { background: var(--white); }
.faq                            { background: var(--sky); }
.features, .compare, .how, .pricing, .faq { border-top: 1px solid var(--rule); }
/* The table is a white card; on a white section it needs its own definition. */
.compare-scroll { box-shadow: 0 1px 3px rgba(10,22,40,.06); }

/* ══════════════════════════════════════════════════════════════════════════
   REFACTOR: company dropdown, institution band, workflow walkthrough
   ══════════════════════════════════════════════════════════════════════════
   The pattern worth borrowing is "show the product, not an adjective": every
   claim sits beside a picture of the screen that makes it. Everything below is
   built from the existing tokens, so the navy/blue theme is unchanged. */

/* ── Company dropdown ───────────────────────────────────────────────────── */
.nav-dd { position: relative; display: inline-block; }
.nav-dd-caret {
  display: inline-block; margin-left: 5px; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; vertical-align: middle; opacity: .65;
}
.nav-dd-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 224px; background: var(--white); border: 1px solid var(--rule);
  border-radius: 12px; box-shadow: 0 18px 44px rgba(10,22,40,.13);
  padding: 8px; opacity: 0; visibility: hidden; transition: all .18s ease; z-index: 60;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dd-menu a {
  display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none;
  color: var(--navy); font-size: .88rem; font-weight: 600; line-height: 1.3;
}
.nav-dd-menu a span { display: block; font-weight: 400; font-size: .76rem; color: var(--slate); margin-top: 2px; }
.nav-dd-menu a:hover { background: var(--mist); color: var(--blue); }

/* ── Institution coverage band ──────────────────────────────────────────── */
.inst { padding: 72px 0; background: var(--navy); color: #fff; }
.inst-lead {
  font-family: 'DM Sans', sans-serif; font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  font-weight: 700; line-height: 1.3; margin: 0 0 10px; color: #fff;
}
.inst-sub { color: #b7c6dd; font-size: .95rem; max-width: 780px; margin: 0 auto 26px; line-height: 1.68; }
.inst-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.inst-pill {
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  color: #dce6f5; border-radius: 999px; padding: 7px 15px; font-size: .82rem; font-weight: 600;
}
.inst-pill.any { background: var(--blue); border-color: var(--blue); color: #fff; }
.inst-note { color: #93a6c2; font-size: .8rem; margin-top: 22px; line-height: 1.6; }

/* ── Workflow walkthrough ───────────────────────────────────────────────── */
.flow { padding: 120px 0; background: var(--white); }
.flow-row { align-items: center; }
.flow-row + .flow-row { margin-top: 96px; }
.flow-eyebrow {
  font-family: 'DM Sans', sans-serif; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: var(--blue); margin-bottom: 12px;
}
.flow-title {
  font-family: 'DM Sans', sans-serif; font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 700; color: var(--navy); line-height: 1.25; margin-bottom: 14px;
}
.flow-desc { color: var(--slate); font-size: .96rem; line-height: 1.72; margin-bottom: 14px; }
.flow-point { display: flex; gap: 9px; align-items: flex-start; font-size: .89rem; color: var(--slate); margin-top: 9px; }
.flow-tick { flex: 0 0 auto; margin-top: 2px; color: var(--blue); font-weight: 700; }

/* The app frame. A plain window chrome, so a panel reads as the product
   rather than as decoration. */
.app-frame {
  border: 1px solid var(--rule); border-radius: 14px; background: var(--white);
  box-shadow: 0 22px 60px rgba(10,22,40,.10); overflow: hidden;
}
.app-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: var(--mist); border-bottom: 1px solid var(--rule);
}
.app-dot { width: 9px; height: 9px; border-radius: 50%; background: #cfd8e6; }
.app-bar-title { margin-left: 8px; font-size: .76rem; font-weight: 600; color: var(--slate); }
.app-body { padding: 16px 18px 18px; }
.app-h { font-size: .82rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; }

.app-file {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--rule); border-radius: 9px;
  margin-bottom: 7px; font-size: .8rem; color: var(--navy); background: var(--white);
}
.app-file .sz { color: var(--slate); font-size: .74rem; white-space: nowrap; }
.app-drop {
  border: 2px dashed rgba(26,86,219,.28); border-radius: 11px; padding: 16px;
  text-align: center; color: var(--blue); font-size: .82rem; font-weight: 600;
  background: rgba(26,86,219,.04); margin-top: 10px;
}
.app-kv { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.app-kv:last-of-type { border-bottom: 0; }
.app-kv .k { color: var(--slate); }
.app-kv .v { color: var(--navy); font-weight: 700; white-space: nowrap; }
.app-kv .v.free { color: #146c33; }
.app-cta {
  display: block; width: 100%; text-align: center; background: var(--blue); color: #fff;
  border-radius: 9px; padding: 10px; font-size: .82rem; font-weight: 700; margin-top: 12px;
}
.app-q { border: 1px solid var(--rule); border-radius: 10px; padding: 11px 12px; margin-bottom: 9px; }
.app-q-h { font-size: .8rem; font-weight: 700; color: var(--navy); }
.app-q-s { font-size: .74rem; color: var(--slate); margin-top: 3px; }
.app-q-row { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.app-inp { flex: 1 1 130px; border: 1px solid var(--rule); border-radius: 7px; padding: 6px 9px; font-size: .76rem; color: var(--navy); background: var(--mist); }
.app-sel { border: 1px solid var(--rule); border-radius: 7px; padding: 6px 9px; font-size: .76rem; color: var(--navy); background: var(--mist); }

.app-chk { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: .8rem; }
.app-chk:last-of-type { border-bottom: 0; }
.app-chk .lbl { color: var(--navy); }
.app-tag { font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.app-tag.ok { color: #146c33; background: rgba(20,108,51,.12); }
.app-tag.off { color: #8a5200; background: rgba(154,91,0,.14); }
.app-note { font-size: .74rem; color: var(--slate); margin-top: 10px; line-height: 1.62; }

.app-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.app-tab { font-size: .72rem; font-weight: 700; padding: 5px 10px; border-radius: 7px 7px 0 0; background: var(--mist); color: var(--slate); border: 1px solid var(--rule); border-bottom: 0; }
.app-tab.active { background: var(--white); color: var(--navy); }
.app-tab.recon { background: rgba(26,86,219,.10); color: var(--blue); }
.app-tab.red { background: rgba(192,57,43,.10); color: #c0392b; }

@media (max-width: 991px) {
  .flow { padding: 72px 0; }
  .flow-row + .flow-row { margin-top: 56px; }
  .flow-media { margin-top: 26px; }
  .inst { padding: 56px 0; }
}

/* ── Sub-page hero (About / Security / Contact) ─────────────────────────── */
.page-hero { padding: 132px 0 58px; background: var(--mist); border-bottom: 1px solid var(--rule); }
.page-hero h1 {
  font-family: 'DM Sans', sans-serif; font-weight: 800; color: var(--navy);
  font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.12; margin-bottom: 14px;
}
.page-hero p { color: var(--slate); font-size: 1.02rem; line-height: 1.72; max-width: 730px; margin: 0; }
.page-body { padding: 76px 0; background: var(--white); }
.page-body h2 {
  font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--navy);
  font-size: 1.35rem; margin: 42px 0 12px;
}
.page-body h2:first-child { margin-top: 0; }
.page-body h3 { font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--navy); font-size: 1.02rem; margin: 24px 0 8px; }
.page-body p, .page-body li { color: var(--slate); font-size: .96rem; line-height: 1.78; }
.page-body ul { padding-left: 1.1rem; }
.page-body li { margin-bottom: 7px; }
.page-body strong { color: var(--navy); }
.page-alt { background: var(--mist); }

/* Contact cards */
.contact-card {
  border: 1px solid var(--rule); border-radius: 14px; background: var(--white);
  padding: 24px; height: 100%;
}
.contact-card h3 { margin-top: 0; }
.contact-card a { color: var(--blue); font-weight: 700; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   PASS 2 - section rhythm, a wider nav, and the institution marquee
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Section rhythm ─────────────────────────────────────────────────────────
   Measured in the browser rather than guessed, and it found three collisions:
   the new navy institution band sat against the navy stats band, and compare /
   how / pricing were three white sections in a row. A section boundary you
   cannot see is a section boundary that is not doing its job.

   Strict alternation now, white against --sky, with navy and blue as the two
   punctuation marks. --sky (#e8f0fe) rather than --mist (#f4f7ff) because mist
   is barely off-white and was most of why the page read as one long panel.

   Last rule wins on equal specificity, so these override the earlier blocks
   without having to hunt them down and edit each one. */
.hero                           { background: var(--white); }
.inst                           { background: var(--navy); }
.stats-band                     { background: var(--sky); }
.features#features              { background: var(--white); }
#security.features              { background: var(--sky); }
.compare                        { background: var(--white); }
.flow                           { background: var(--sky); }
.pricing                        { background: var(--white); }
.faq                            { background: var(--sky); }

/* The app frames sit on --sky now, so lift them off it. */
.flow .app-frame { box-shadow: 0 22px 60px rgba(10,22,40,.13); }
.flow .app-frame, .flow .app-file { background: var(--white); }

/* The stats band's own text was written for a navy ground. */
.stats-band .stat-card-num   { color: var(--navy); }
.stats-band .stat-card-title { color: var(--navy); }
.stats-band .stat-card-desc  { color: var(--slate); }
.stats-band .section-label   { color: var(--blue); }
.stats-band .stat-card {
  background: var(--white); border: 1px solid var(--rule);
}

/* ── A wider top bar ────────────────────────────────────────────────────────
   The nav used the same 1140px container as the body copy, so a logo lockup,
   seven links and a button were crowded into the middle of the screen with
   empty space either side. The bar is chrome, not prose: it should use the
   window. Body sections keep the reading measure. */
nav > .container {
  max-width: min(1720px, 94vw);
  padding-left: 26px;
  padding-right: 26px;
}
nav .nav-link-item { white-space: nowrap; }
@media (min-width: 992px) {
  nav > .container { gap: 28px; }
  /* More air between the links themselves, which is the actual crowding. */
  nav .d-none.d-md-flex { gap: 2.1rem !important; }
}
@media (max-width: 1199px) and (min-width: 992px) {
  nav .d-none.d-md-flex { gap: 1.35rem !important; }
  nav > .container { max-width: 96vw; }
}

/* ── Institution marquee ────────────────────────────────────────────────────
   The reference site runs an infinite strip of bank logos. This uses
   TYPOGRAPHIC wordmarks instead of image files: nominative use of a name is
   uncontroversial, whereas shipping a dozen third-party logo assets is a
   licensing question nobody needs. Drop real marks in later by replacing the
   span contents - the marquee mechanics do not change. */
.marquee {
  position: relative; overflow: hidden; margin-top: 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
  display: flex; width: max-content; gap: 14px;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee + .marquee { margin-top: 12px; }
.marquee.rev .marquee-track { animation-direction: reverse; animation-duration: 52s; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}
.mq-item {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  min-width: 178px; height: 60px; padding: 0 22px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  background: rgba(255,255,255,.05);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .95rem;
  letter-spacing: -.01em; color: #e6eefb; white-space: nowrap;
}
.mq-item.any {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
@media (max-width: 575px) { .mq-item { min-width: 142px; height: 52px; font-size: .86rem; } }

/* The stats band moved from a navy ground to --sky, so the two elements that
   were coloured FOR navy have to move with it: the section label was white at
   45% opacity and the accent figure was a light blue picked to glow on dark.
   Both measured under 3:1 on the new ground. The cards inside were already
   white with navy numerals and needed nothing.
   (The emoji icons flag on an automated contrast sweep and are false
   positives - an emoji renders in its own colours and ignores CSS `color`.) */
.stats-band .stats-band-label { color: var(--slate); }
.stats-band .stat-accent      { color: var(--blue); }
/* The "$" in the cost card is a real glyph, not an emoji, so unlike its
   neighbours it does take CSS colour - and the light green picked for a navy
   ground measured 1.78 on the tinted circle. Darkened to clear AA. */
.stats-band .stat-card-icon.green { color: #15803d; }

/* ══════════════════════════════════════════════════════════════════════════
   PASS 3 - the navy grid band stays; the institution band goes light
   ══════════════════════════════════════════════════════════════════════════
   The stats band carries a 40px grid drawn in 3%-white on navy (.stats-band
   ::before). Moving it to a light ground kept the grid and made it invisible,
   which threw away the one piece of texture on the page. So the navy band and
   its grid come back exactly as they were, and the INSTITUTION band takes the
   light slot instead - it is new, so it costs nothing to restyle, whereas the
   stats band had six elements coloured for dark.

   Order, every neighbour different:
     hero white / inst sky / stats NAVY+grid / features white / security sky /
     compare white / how sky / pricing white / faq sky / cta blue / footer navy */
.stats-band { background: var(--navy); }
.stats-band .stats-band-label     { color: rgba(255,255,255,.45); }
.stats-band .stat-accent          { color: #60a5fa; }
.stats-band .stat-card-icon.green { color: #4ade80; }
.stats-band .stat-card            { background: var(--white); border: 0; }

/* Institution band, now on --sky. */
.inst { background: var(--sky); color: var(--navy); }
.inst-lead { color: var(--navy); }
.inst-sub  { color: var(--slate); }
.inst-note { color: var(--slate); }
.mq-item {
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--navy);
}
.mq-item.any { background: var(--blue); border-color: var(--blue); color: #fff; }
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* The workflow sits on --sky, so its frames need to read as raised cards. */
.flow .app-frame { background: var(--white); box-shadow: 0 22px 60px rgba(10,22,40,.13); }

/* ── Contact form ───────────────────────────────────────────────────────── */
.contact-form {
  border: 1px solid var(--rule); border-radius: 16px; background: var(--white);
  padding: 30px; box-shadow: 0 18px 48px rgba(10,22,40,.07);
}
.cf-label {
  display: block; font-family: 'DM Sans', sans-serif; font-size: .78rem;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 7px;
}
.cf-field { margin-bottom: 18px; }
.cf-input, .cf-select, .cf-textarea {
  width: 100%; border: 1px solid var(--rule); border-radius: 9px;
  padding: 11px 13px; font-size: .93rem; color: var(--navy);
  background: var(--white); font-family: inherit; line-height: 1.5;
}
.cf-input:focus, .cf-select:focus, .cf-textarea:focus {
  outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue);
}
.cf-textarea { min-height: 132px; resize: vertical; }
.cf-hint { font-size: .78rem; color: var(--slate); margin-top: 6px; line-height: 1.55; }
.cf-submit {
  width: 100%; background: var(--blue); color: #fff; border: 0; border-radius: 10px;
  padding: 13px; font-family: 'DM Sans', sans-serif; font-weight: 700;
  font-size: .95rem; cursor: pointer; transition: background .18s ease;
}
.cf-submit:hover { background: var(--blue2); }
.cf-foot { font-size: .78rem; color: var(--slate); margin: 12px 0 0; line-height: 1.6; text-align: center; }
.cf-routed {
  font-size: .82rem; color: var(--navy); background: var(--mist);
  border: 1px solid var(--rule); border-radius: 9px; padding: 10px 12px; margin-bottom: 18px;
}
.cf-routed strong { color: var(--blue); }

/* Two glyphs inside the stats band sit on its WHITE cards, not on the navy,
   and were picked to glow against the dark ground - so they measured 1.57 and
   2.54 where they actually render. Pre-existing rather than introduced by the
   re-grounding, and worth a pass: same hues, taken down far enough to read.
   The navy band and its grid are untouched. */
.stats-band .stat-accent          { color: var(--blue2); }
.stats-band .stat-card-icon.green { color: #15803d; }

/* ── Marquee, corrected ─────────────────────────────────────────────────────
   The loop was slipping because flex `gap` sat between the two copies:
   translateX(-50%) is one copy plus HALF a gap, while landing copy two where
   copy one began needs one copy plus a WHOLE gap. 7px of drift per cycle, which
   is what "cuts off and reappears" was.

   Spacing is now margin-right on the item, so there is nothing between the
   copies and -50% is exactly one copy. Do not reintroduce `gap` here.

   Sized up too: 178px items could not fill a wide monitor, and a strip
   narrower than the viewport leaves a hole whatever the loop maths says. */
.marquee-track { gap: 0; }
.mq-group { display: flex; gap: 0; flex: 0 0 auto; }
.mq-item {
  margin-right: 18px;
  min-width: clamp(184px, 13.5vw, 268px);
  height: clamp(64px, 5.2vw, 94px);
  padding: 0 clamp(18px, 1.6vw, 30px);
  font-size: clamp(.94rem, 1.05vw, 1.22rem);
  border-radius: 14px;
}
.marquee { margin-top: 38px; }
.marquee + .marquee { margin-top: 18px; }
/* Longer strips need proportionally longer durations or they race. */
.marquee-track { animation-duration: 76s; }
.marquee.rev .marquee-track { animation-duration: 92s; }
@media (max-width: 575px) {
  .mq-item { min-width: 148px; height: 54px; font-size: .87rem; margin-right: 12px; }
  .marquee-track { animation-duration: 48s; }
  .marquee.rev .marquee-track { animation-duration: 58s; }
}

/* Bootstrap's g-5 gives a row -24px side margins, but .container only supplies
   12px of padding on small screens - so a g-5 row inside a container hangs 12px
   past the viewport on each side and the whole PAGE gets a horizontal scroll.
   Only the workflow rows use g-5, so only they need this. Full gutter returns
   at the breakpoint where the two columns actually sit side by side. */
@media (max-width: 991px) {
  .flow-row { --bs-gutter-x: 1.5rem; }
}

/* ── Stats band: the transparent cards come back ────────────────────────────
   Pass 2 turned these white while the band was briefly light, and they stayed
   white when the navy came back - so a glass card on navy became a solid slab.
   Restored to the original rgba fill and hairline, which is what makes the
   grid behind them read. Every text override from that pass is reverted too:
   on navy the original white/light-blue is both correct and higher contrast
   than the dark colours I had substituted. */
.stats-band .stat-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.stats-band .stat-card-num,
.stats-band .stat-card-title      { color: #fff; }
.stats-band .stat-card-desc       { color: rgba(255,255,255,.55); }
.stats-band .stats-band-label     { color: rgba(255,255,255,.45); }
.stats-band .stat-accent          { color: #60a5fa; }
.stats-band .stat-card-icon.green { color: #4ade80; }

/* ── Features: the same grid, inverted ──────────────────────────────────────
   The navy band draws a 40px grid in 3% white. This is that grid on a light
   ground - blue at 4.5%, which is visible as texture without competing with
   the copy. The container is lifted above it so nothing is dimmed. */
.features#features { position: relative; overflow: hidden; }
.features#features::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(26,86,219,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,86,219,.045) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 55%, transparent 88%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 55%, transparent 88%);
}
.features#features > .container { position: relative; z-index: 1; }

/* ── Institution marks ──────────────────────────────────────────────────────
   Brand-coloured monogram tiles, drawn in CSS. Nominative use of a name is
   uncontroversial; redistributing a company's logo artwork is a licensing
   question a marketing page does not need to take on. To swap in licensed
   artwork later, replace .mq-mark with an <img> - nothing else changes. */
.mq-item { gap: 12px; justify-content: flex-start; }
.mq-mark {
  flex: 0 0 auto;
  width: clamp(30px, 2.4vw, 42px); height: clamp(30px, 2.4vw, 42px);
  border-radius: 9px; background: var(--c, var(--navy)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif; font-weight: 800;
  font-size: clamp(.62rem, .72vw, .82rem); letter-spacing: -.02em;
}
.mq-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-item.any { justify-content: center; }
@media (max-width: 575px) {
  .mq-item { gap: 8px; }
  .mq-mark { width: 26px; height: 26px; border-radius: 7px; font-size: .58rem; }
}

/* The nav is position:fixed, so an in-page jump puts the target's top edge at
   viewport 0 - underneath the bar. Every anchor target lands about 63px of
   heading short, which reads as "the link went to roughly the right place but
   not quite". scroll-margin-top is the whole fix, and it applies to the smooth
   scroll and to a hard #hash load alike. Sized for the taller unscrolled bar. */
section[id], [id].cta-band { scroll-margin-top: 88px; }

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE - follows the system / browser setting
   ══════════════════════════════════════════════════════════════════════════
   prefers-color-scheme only. No toggle, nothing stored, nothing to migrate.

   NEUTRAL GREY, not a dark navy. The light theme is already blue-tinted, and
   carrying that tint into the dark one made the whole page read as one navy
   wash with the brand blue competing against its own background. Greys give
   the blue something to sit on.

   THE TRAP, and why this is not a token swap: --navy does two opposite jobs.
   It is dark TEXT (every heading) and it is also a SURFACE - the nav, the
   stats band, the footer and the featured pricing card are all `background:
   var(--navy)`. Flip the token and the headings come out right while those
   four turn pale with white text on them. So --navy becomes the light text
   colour and every place it meant a surface is named explicitly below.

   Same story for the accents. White on the lifted --blue measures 2.7, and the
   greens and reds picked for white cards (#146c33, #dc2626) are unreadable on
   grey. Both get dark-ground counterparts rather than being left to fail. */
@media (prefers-color-scheme: dark) {
  :root {
    --white: #141517;   /* page ground */
    --mist:  #1a1c1f;   /* first alternate band */
    --sky:   #202225;   /* second alternate band */
    --navy:  #edeef1;   /* was dark text; now LIGHT text */
    --slate: #a8acb3;   /* body copy */
    --blue:  #6d9bff;   /* accent TEXT, lifted for a dark ground */
    --blue2: #8ab0ff;
    --rule:  rgba(255,255,255,.10);
  }

  html, body { background: var(--white); color: var(--slate); }

  /* --navy used as a SURFACE, not as text. */
  nav, nav.scrolled, .stats-band, footer { background: #0e0f11 !important; }
  .price-card.featured { background: #1f2124; }

  /* Cards and frames that were white. */
  .app-frame, .app-file, .mq-item, .contact-form, .price-card,
  .feat-card, .faq-item, .compare-scroll, .compare-table, .stat-card,
  .nav-dd-menu { background: #1a1c1f; }
  .app-bar, .compare-table thead th, .compare-table tbody th { background: #202225; }
  .app-inp, .app-sel, .cf-input, .cf-select, .cf-textarea, .cf-routed,
  .app-tab { background: #141517; }
  .app-tab.active { background: #1a1c1f; }
  .app-drop { background: rgba(109,155,255,.09); border-color: rgba(109,155,255,.42); }

  /* Anything with WHITE TEXT on the brand blue needs a deeper blue: the lifted
     --blue is an accent colour for text, and white on it is 2.7. */
  .btn-nav, .btn-primary-cl, .app-cta, .export-btn-fake, .mq-item.any,
  .btn-start-trial, .cta-band, .cf-submit { background: #2258d8; }
  .cf-submit:hover { background: #2f6df6; }
  .btn-nav:hover, .btn-primary-cl:hover, .btn-start-trial:hover { background: #2f6df6; }
  /* ...and the two inverted buttons need DARK text, since --navy is now light. */
  .btn-white, .btn-start-trial.featured-trial { background: #edeef1; color: #14161a; }
  .btn-white:hover, .btn-start-trial.featured-trial:hover { background: #ffffff; color: #14161a; }

  /* Status colours, relit. */
  .compare-yes, .app-tag.ok, .app-kv .v.free,
  .schedule-row .amt.pos { color: #5ddb92; }   /* .schedule-row .amt.pos
     is (0,3,0); a bare .amt.pos is (0,2,0) and lost silently. */
  .compare-no, .schedule-row .amt.neg { color: #ff8f8f; }
  .app-tag.off  { color: #ffc266; }
  .app-tab.red  { color: #ff9a8f; }
  .app-tag.ok   { background: rgba(93,219,146,.14); }
  .app-tag.off  { background: rgba(255,194,102,.15); }
  .app-tab.red  { background: rgba(255,154,143,.14); }
  .app-tab.recon { background: rgba(109,155,255,.16); }
  .compare-col-us { background: rgba(109,155,255,.09); }
  .compare-table thead th.compare-col-us { background: rgba(109,155,255,.17); color: var(--blue); }
  .compare-col-us .compare-q { color: #b6bcc6; }
  .price-card.featured .price-plan { color: #8ab0ff; }

  /* The features grid was blue-on-white; on grey it has to be light lines or
     it is simply not there. */
  .features#features::before {
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  }

  /* Shadows tuned for a white page read as grey smudges on a dark one. */
  .app-frame, .contact-form, .nav-dd-menu, .price-card:hover {
    box-shadow: 0 22px 60px rgba(0,0,0,.5);
  }
  .hero-grid { opacity: .3; }
}


/* Step 05 spending figure. Mirrors the chart in the downloaded report: one
   series, one colour, sorted, with the value and share beside each bar. A
   radar was tried first and is unreadable on this shape of data - a
   conservatorship almost always has one dominant cost, so one axis pins at
   full radius and the rest collapse toward the centre. */
.fx-chart { margin: 2px 0 12px; }
.fx-chart svg { display: block; overflow: visible; }
.fx-lbl { font-size: 13px; fill: var(--navy); }
.fx-val { font-size: 11.5px; fill: var(--slate); }
.fx-ring { fill: none; stroke: var(--rule-solid, #cfd6e4); stroke-width: 1; }
.fx-area { fill: color-mix(in srgb, var(--blue2) 18%, transparent);
           stroke: var(--blue2); stroke-width: 2.2; stroke-linejoin: round; }
.fx-dot { fill: var(--blue2); }
.fx-cap { font-size: .68rem; color: var(--slate); margin-bottom: 2px; }
@media (max-width: 575.98px) { .fx-lbl { font-size: 14px; } .fx-val { font-size: 12.5px; } }