/* ==========================================================================
   Reset & base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-5);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-accent-hover);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--duration-base) var(--ease-out);
}

.btn:hover svg {
  transform: translateX(3px);
}

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

.btn-accent {
  background: var(--gradient-accent);
  color: var(--color-white);
  box-shadow: var(--shadow-glow-accent);
}

.btn-accent:hover {
  box-shadow: 0 16px 34px rgba(255, 59, 48, 0.36);
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-glow-primary);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Originally a white-on-dark treatment for the old gradient hero; the
   hero is light now, so this reads as a standard light-context outline
   button. Kept as its own class (rather than folded into .btn-outline)
   in case a dark section wants the old behavior back later. */
.btn-outline-invert {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}

.btn-outline-invert:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg-alt);
}

.btn-ghost-invert {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border: 1px solid var(--color-border-on-dark);
}

.btn-ghost-invert:hover {
  background: rgba(255, 255, 255, 0.18);
}

.btn-sm {
  padding: 0.625rem 1.125rem;
  font-size: var(--fs-xs);
}

.btn-block {
  width: 100%;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

/*
  The translucent blur lives on this pseudo-element rather than directly on
  .site-header. backdrop-filter on an ancestor creates a new containing
  block for any position:fixed descendant (per spec) — the mobile nav
  drawer below is fixed and needs the real viewport as its containing
  block, not the 76px-tall header box, or it collapses to near-zero height.
*/
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 1px 0 rgba(15, 23, 60, 0.02), 0 8px 24px rgba(15, 23, 60, 0.05);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
}

.brand__logo {
  width: auto;
}

.brand__logo--full {
  height: 44px;
}

.brand__logo--icon {
  display: none;
  height: 38px;
}

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

.nav-primary a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text);
  transition: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

/* Sliding accent underline — shows on hover, and persists on whichever
   item's tab is currently active in the value matrix below (see
   data-nav-tab wiring in main.js). Bank Partners has no matching tab, so
   it only ever shows the hover state. */
.nav-primary a::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: 3px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-base) var(--ease-out);
}

.nav-primary a:hover,
.nav-primary a.is-active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.nav-primary a:hover::after,
.nav-primary a.is-active::after {
  transform: scaleX(1);
}

.nav-chevron {
  display: none;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--color-text-faint);
  transition: transform var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

/* ---- Nav dropdown ("Businesses") ---- */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text);
  transition: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.nav-dropdown-trigger:hover,
.nav-dropdown.is-open .nav-dropdown-trigger {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.nav-caret {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform var(--duration-base) var(--ease-out);
}

.nav-dropdown.is-open .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 10;
  width: 420px;
  padding: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.nav-dropdown.is-open .nav-dropdown-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/*
  Both of these are <a> tags living inside .nav-primary, so the generic
  ".nav-primary a" rule (class + element = higher specificity than a
  single class) was winning the cascade regardless of source order and
  forcing them into the pill-nav flex/underline treatment instead of the
  block card layout below. Scoping under .nav-dropdown-panel raises
  specificity enough to actually win.
*/
.nav-dropdown-panel .nav-dropdown-link {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.nav-dropdown-panel .nav-dropdown-link::after {
  content: none;
}

.nav-dropdown-panel .nav-dropdown-link:hover {
  background: var(--color-bg-alt);
  color: inherit;
}

.nav-dropdown-link__title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--color-ink);
  white-space: normal;
}

.nav-dropdown-link__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  white-space: normal;
}

.nav-dropdown-panel .nav-dropdown-viewall {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  background: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-primary);
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-dropdown-panel .nav-dropdown-viewall::after {
  content: none;
}

.nav-dropdown-viewall svg {
  width: 14px;
  height: 14px;
}

.nav-dropdown-panel .nav-dropdown-viewall:hover {
  color: var(--color-primary-hover);
  background: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
}

.nav-toggle:hover {
  background: var(--color-bg-alt);
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 20px;
  margin-inline: auto;
  background: var(--color-ink);
  border-radius: var(--radius-pill);
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/*
  1040px rather than a rounder 900/960: at ~960px (a common small-laptop
  width) the bolder nav-link weight + letter-spacing added above pushes
  "For Med Spas & Practices" to wrap onto a second line before the
  horizontal nav has room to breathe. 1040px was verified to keep every
  item on one line with margin to spare.
*/
@media (max-width: 1040px) {
  .nav-primary {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-white);
    padding: var(--space-5);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out);
  }

  .nav-primary.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-primary a {
    justify-content: space-between;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
  }

  /* The sliding underline reads as a desktop-nav idiom; a full-row tint
     plus the chevron nudging inward communicates "active" better once
     items are stacked as full-width rows. */
  .nav-primary a::after {
    content: none;
  }

  .nav-primary a:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
  }

  .nav-chevron {
    display: block;
  }

  .nav-primary a:hover .nav-chevron,
  .nav-primary a.is-active .nav-chevron {
    color: var(--color-primary);
    transform: translateX(3px);
  }

  /* "Businesses" becomes an inline accordion in the drawer rather than a
     floating flyout — a fixed-position popover doesn't make sense inside
     an already-fullscreen mobile menu. */
  .nav-dropdown {
    border-bottom: 1px solid var(--color-border);
  }

  .nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
  }

  .nav-dropdown-panel {
    position: static;
    width: auto;
    padding: 0;
    margin-top: 0;
    border: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-base) var(--ease-out);
  }

  .nav-dropdown.is-open .nav-dropdown-panel {
    max-height: 260px;
  }

  .nav-dropdown-link {
    padding: var(--space-3) var(--space-4);
  }

  .nav-dropdown-viewall {
    padding: var(--space-3) var(--space-4);
  }

  .header-actions .btn-outline {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-ink);
  padding-block: var(--space-9) var(--space-9);
}

/* Soft blurred color "glows" instead of a hard dark gradient — the color
   still shows up big, it's just diffuse rather than a solid field. */
.hero::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -12%;
  width: 640px;
  height: 640px;
  background: var(--glow-blue);
  pointer-events: none;
  /* --parallax-1 is set on .hero by main.js's scroll listener; the glow
     drifts slower than the page scrolls, which is what reads as depth. */
  transform: translateY(var(--parallax-1, 0px));
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -22%;
  left: -14%;
  width: 560px;
  height: 560px;
  background: var(--glow-red);
  pointer-events: none;
  transform: translateY(var(--parallax-2, 0px));
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* Narrower than a 50/50 split (was 1.05fr/0.95fr) so the wider ~560px
     hero graphic (.ls-graphic) has room to reach closer to its intended
     width on desktop instead of being squeezed by the copy column. */
  grid-template-columns: 0.88fr 1.12fr;
  gap: var(--space-8);
  align-items: start;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
}

.hero__eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.25);
}

.hero__title {
  margin-top: var(--space-5);
  font-size: clamp(2.25rem, 4.6vw, var(--fs-5xl));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}

/* Highlighter-marker treatment instead of a gradient text-clip — reads
   clean on a light background, and box-decoration-break keeps the mark
   intact across a line wrap. */
.hero__title .accent-text {
  padding-inline: 0.15em;
  border-radius: 0.2em;
  background-image: linear-gradient(var(--color-accent-soft), var(--color-accent-soft));
  background-repeat: no-repeat;
  background-size: 100% 42%;
  background-position: 0 88%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero__subtitle {
  margin-top: var(--space-5);
  max-width: 46ch;
  font-size: var(--fs-md);
  color: var(--color-text-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.hero__meta {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5) var(--space-6);
}

/* hero__content is only ~560px wide while it shares the hero grid with
   hero__visual (desktop, ≥981px) — auto-fit alone would land on 3 columns
   (with the 4th item alone on a stretched row) somewhere below ~1100px,
   before the hero itself collapses to one column at 980px. Force straight
   to 2x2 through that span instead of ever passing through 3-up. */
@media (max-width: 1100px) {
  .hero__meta {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero__meta-item strong {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.hero__meta-item span {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Hero visual — verbatim drop-in from the hero-graphic.html reference
   handoff (.ls- prefix kept as authored; grepped the codebase first, no
   collisions). Do not restyle/reinterpret the .ls-* rules or animation
   timing — port any future changes by replacing this block wholesale from
   an updated reference file instead of hand-editing individual values.
   ========================================================================== */
.hero__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* hero__inner is top-aligned (align-items:start); nudge down so the
     graphic's own top edge lines up with the first line of the headline
     ("Close the Job") instead of the eyebrow tag above it. */
  margin-top: 42px;
}

.ls-graphic{position:relative;width:100%;max-width:560px;padding-bottom:34px;box-sizing:border-box}
.ls-graphic *{box-sizing:border-box}

.ls-window{position:relative;border-radius:22px;background:#fff;border:1px solid #eceaf2;
  box-shadow:0 30px 70px -30px rgba(27,27,138,.28),0 2px 6px rgba(35,35,54,.05);overflow:hidden}
.ls-chrome{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #f2f1f6;background:#fcfcfe}
.ls-chrome i{width:9px;height:9px;border-radius:50%;background:#e6e5ed}
.ls-chrome .ls-url{margin-left:8px;height:8px;flex:1;max-width:170px;border-radius:999px;background:#f1f0f6}
.ls-body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:22px}

.ls-steps{display:flex;justify-content:space-between;gap:8px}
.ls-step{display:flex;flex-direction:column;align-items:center;gap:9px}
.ls-step b{width:11px;height:11px;border-radius:50%;background:#e8e7ee;display:block}
.ls-step s{height:6px;width:52px;border-radius:99px;background:#eceaf2;display:block}

.ls-rows{display:flex;flex-direction:column;gap:12px}
.ls-row{height:13px;border-radius:99px;background:#f4f3f8;overflow:hidden}
.ls-pair{display:flex;gap:12px}
.ls-pair .ls-row{flex:1}
.ls-row span{display:block;height:100%;width:0;border-radius:99px;background:#e3e2ec}

.ls-scan{position:relative;height:5px;border-radius:99px;background:#f1f0f6;overflow:hidden}
.ls-scan span{position:absolute;inset:0;width:38%;border-radius:99px;
  background:linear-gradient(90deg,transparent,#c9c8e6,transparent);transform:translateX(-100%)}

.ls-approval{opacity:0;border:1px solid #e7e6f0;border-radius:16px;padding:20px 22px;
  display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,#fbfbff,#fff)}
.ls-eyebrow{font-size:11px;font-weight:600;line-height:1;letter-spacing:.14em;color:#1B1B8A}
.ls-figures{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ls-amount{opacity:0;font-size:40px;font-weight:700;line-height:1;letter-spacing:-.02em}
.ls-amount sup{font-size:20px;font-weight:600;color:#8b8d9b}
.ls-terms{opacity:0;font-size:15px;font-weight:500;line-height:1.4;color:#5a5c6e}
.ls-actions{display:flex;gap:10px;flex-wrap:wrap;opacity:0}
.ls-btn{padding:11px 20px;border-radius:10px;background:#1B1B8A;color:#fff;font-size:13px;font-weight:500;line-height:1}
.ls-btn--ghost{background:transparent;border:1px solid #e2e1e9;color:#5a5c6e;padding:11px 18px}

.ls-phone{position:absolute;right:-14px;bottom:-26px;width:128px;border-radius:20px;background:#fff;
  border:1px solid #eceaf2;box-shadow:0 18px 40px -18px rgba(27,27,138,.3);
  padding:12px;display:flex;flex-direction:column;gap:9px;opacity:0}
.ls-phone .ls-notch{align-self:center;width:34px;height:4px;border-radius:99px;background:#eceaf2}
.ls-phone .ls-accent{height:9px;width:66%;border-radius:99px;background:#FA4028;opacity:.85}
.ls-phone .ls-bar{height:8px;border-radius:99px;background:#f1f0f6}
.ls-phone .ls-bar--short{width:78%}
.ls-phone .ls-cta{margin-top:4px;height:26px;border-radius:8px;background:#1B1B8A;opacity:.9}

/* Footnote is a sibling of .ls-graphic, never inside it. */
.ls-footnote{position:relative;z-index:1;margin:22px 0 0;max-width:560px;
  font-size:11px;line-height:1.55;color:#6d6f80;text-wrap:pretty}
.ls-footnote sup{color:#8b8d9b}

/* ── Motion: applied only once .is-playing is added by the observer ── */
@keyframes lsFill{from{width:0}to{width:var(--w)}}
@keyframes lsIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes lsSnap{0%{opacity:0;transform:scale(.92)}60%{opacity:1;transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes lsDot{to{background:#2020A6;box-shadow:0 0 0 5px rgba(32,32,166,.12)}}
@keyframes lsSweep{from{transform:translateX(-100%)}to{transform:translateX(260%)}}

.ls-graphic.is-playing .ls-step:nth-child(1) b{animation:lsDot .01s linear .10s forwards}
.ls-graphic.is-playing .ls-step:nth-child(2) b{animation:lsDot .01s linear 1.10s forwards}
.ls-graphic.is-playing .ls-step:nth-child(3) b{animation:lsDot .01s linear 2.10s forwards}
.ls-graphic.is-playing .ls-step:nth-child(4) b{animation:lsDot .01s linear 3.10s forwards}
.ls-graphic.is-playing .ls-row:nth-of-type(1) span,
.ls-graphic.is-playing .ls-rows>.ls-row:first-child span{animation:lsFill .5s ease-out .25s forwards}
.ls-graphic.is-playing .ls-pair .ls-row:nth-child(1) span{animation:lsFill .5s ease-out .50s forwards}
.ls-graphic.is-playing .ls-pair .ls-row:nth-child(2) span{animation:lsFill .5s ease-out .68s forwards}
.ls-graphic.is-playing .ls-rows>.ls-row:last-child span{animation:lsFill .5s ease-out .86s forwards}
.ls-graphic.is-playing .ls-scan span{animation:lsSweep 1.15s ease-in-out 1.25s 1 both}
.ls-graphic.is-playing .ls-approval{animation:lsIn .5s ease-out 2.50s forwards}
.ls-graphic.is-playing .ls-amount{animation:lsSnap .45s cubic-bezier(.2,.9,.3,1.2) 2.75s forwards}
.ls-graphic.is-playing .ls-terms{animation:lsIn .4s ease-out 3.00s forwards}
.ls-graphic.is-playing .ls-actions{animation:lsIn .4s ease-out 3.20s forwards}
.ls-graphic.is-playing .ls-phone{animation:lsIn .5s ease-out 3.45s forwards}

/* Rest state for reduced motion or no JS: show the finished frame, no movement. */
@media (prefers-reduced-motion:reduce){
  .ls-graphic *{animation:none!important}
}
.ls-graphic.is-static .ls-step b{background:#2020A6;box-shadow:0 0 0 5px rgba(32,32,166,.12)}
.ls-graphic.is-static .ls-row span{width:var(--w)}
.ls-graphic.is-static .ls-approval,
.ls-graphic.is-static .ls-amount,
.ls-graphic.is-static .ls-terms,
.ls-graphic.is-static .ls-actions,
.ls-graphic.is-static .ls-phone{opacity:1;transform:none}

@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__visual {
    margin-top: var(--space-6);
  }
}

/* ==========================================================================
   Hero step timeline — the four steps that used to live inside the hero
   graphic itself, now a slim horizontal strip directly under the hero.
   ========================================================================== */
.hero-steps {
  padding-block: var(--space-7);
  border-top: 1px solid var(--color-hairline);
}

/* Wraps the grid so a single connecting line can run behind all four
   circles, full-bleed, giving the row a sense of flow/progression instead
   of reading as four unrelated cards. */
.hero-steps__track {
  position: relative;
}

/* The track opts into the sitewide .reveal/[data-reveal-group] system
   purely to pick up an .is-visible toggle at the right scroll moment —
   its own fade/rise is neutralized here so it doesn't double up with each
   .hero-steps__step revealing independently below; only the connecting
   line's draw-in animation actually uses it. */
.hero-steps__track.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.hero-steps__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Vertical center of the 28px index circle below. */
  top: 14px;
  height: 1px;
  background: var(--color-border);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-cinematic) var(--ease-premium);
}

.hero-steps__track.is-visible::before {
  transform: scaleX(1);
}

.hero-steps__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

/* Same auto-fit-passes-through-3 risk as .hero__meta above, but measured
   against the full container width (~1160px) rather than the half-width
   hero column — here the danger zone falls roughly between 790-1030px.
   Force 2x2 through that span. The connecting line only makes sense as a
   single unbroken row, so it's hidden once the steps wrap to two rows. */
@media (max-width: 1040px) {
  .hero-steps__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-steps__track::before {
    display: none;
  }
}

.hero-steps__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.hero-steps__index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: 700;
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.hero-steps__step:hover .hero-steps__index {
  transform: scale(1.12);
  box-shadow: 0 0 0 6px var(--color-accent-soft);
}

.hero-steps__step p {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
}

/* ==========================================================================
   Price reframe — a big project cost shown as a small monthly number.
   Figures are explicitly illustrative (see .price-reframe__detail); this
   is a marketing device, not a rate quote.
   ========================================================================== */
.price-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 940px;
  margin-inline: auto;
}

.price-card {
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  text-align: center;
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.price-card__label {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.price-card__figures {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.price-card__full {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--color-text-faint);
  text-decoration: line-through;
  text-decoration-color: var(--color-text-faint);
  text-decoration-thickness: 2px;
}

.price-card__arrow {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--color-text-faint);
}

.price-card__monthly {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-ink);
}

.price-card__monthly strong {
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--color-accent);
  /* Fixed-width digits so the count-up animation (main.js) doesn't jostle
     this number's width — and with it the centered arrow/strikethrough
     price beside it — as the digit count changes while counting up. */
  font-variant-numeric: tabular-nums;
}

.price-card__desc {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
}

.price-calc {
  max-width: 560px;
  margin: var(--space-7) auto 0;
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.price-calc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  text-align: left;
}

.price-calc__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-ink);
}

.price-calc__value {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/*
  Custom range slider — the bare native control (default OS thumb + hairline
  track) reads cheap, not premium. Track fill is driven by main.js writing a
  two-stop gradient onto the input's own `background` (the standard
  cross-browser trick for WebKit, which has no built-in "progress" concept);
  Firefox's native ::-moz-range-progress fills automatically and just needs
  its color set to match.
*/
.price-calc__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  margin-top: var(--space-7);
  border-radius: var(--radius-pill);
  background: var(--color-border);
  outline: none;
  cursor: pointer;
}

.price-calc__slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: transparent;
}

.price-calc__slider::-moz-range-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.price-calc__slider::-moz-range-progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.price-calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-primary);
  box-shadow: var(--shadow-md);
  cursor: grab;
  transition: transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.price-calc__slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  cursor: grab;
  transition: transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.price-calc__slider:hover::-webkit-slider-thumb,
.price-calc__slider:focus-visible::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow: var(--shadow-lg);
}

.price-calc__slider:hover::-moz-range-thumb,
.price-calc__slider:focus-visible::-moz-range-thumb {
  transform: scale(1.12);
  box-shadow: var(--shadow-lg);
}

.price-calc__slider:active::-webkit-slider-thumb,
.price-calc__slider:active::-moz-range-thumb {
  cursor: grabbing;
}

.price-calc__slider:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-pill);
}

.price-calc__result {
  margin-top: var(--space-5);
  font-size: var(--fs-md);
  color: var(--color-text-soft);
}

.price-calc__result strong {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .price-calc__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}

.price-reframe__note {
  max-width: 880px;
  margin: var(--space-6) auto 0;
  text-align: center;
}

.price-reframe__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-soft);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  transition: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.price-reframe__toggle:hover {
  color: var(--color-primary);
  background: var(--color-bg-alt);
}

.price-reframe__chevron {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-base) var(--ease-out);
}

.price-reframe__toggle[aria-expanded="true"] .price-reframe__chevron {
  transform: rotate(180deg);
}

.price-reframe__detail {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--color-text-faint);
}

@media (max-width: 640px) {
  .price-cards {
    grid-template-columns: 1fr;
  }

  .price-card__monthly strong {
    font-size: var(--fs-3xl);
  }

  .price-card__full {
    font-size: var(--fs-lg);
  }
}

/* ==========================================================================
   Stats strip
   ========================================================================== */
.stats-strip {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-hairline);
}

.stats-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: var(--space-7);
}

.stats-strip__item {
  padding-inline: var(--space-5);
  text-align: center;
  border-left: 1px solid var(--color-hairline);
}

.stats-strip__item:first-child {
  border-left: none;
}

.stats-strip__item strong {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.stats-strip__item span {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 760px) {
  .stats-strip__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) 0;
  }

  .stats-strip__item:nth-child(3) {
    border-left: none;
  }

  .stats-strip__item {
    border-left: 1px solid var(--color-border);
  }

  .stats-strip__item:nth-child(odd) {
    border-left: none;
  }
}

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
.section {
  padding-block: var(--space-9);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-8);
}

.section-head.center {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

.section-title {
  margin-top: var(--space-4);
  font-size: clamp(1.875rem, 3.4vw, var(--fs-3xl));
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--color-ink);
}

.section-subtitle {
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  color: var(--color-text-soft);
}

.reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition: opacity var(--duration-cinematic) var(--ease-premium),
    transform var(--duration-cinematic) var(--ease-premium);
  /* Set by main.js on children of [data-reveal-group] so a group's items
     settle in one after another instead of firing at once. Unset (0ms)
     for any standalone .reveal not inside a stagger group. */
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ==========================================================================
   Value Matrix (interactive vertical tabs)
   ========================================================================== */
.matrix {
  background: var(--color-bg);
}

.matrix__prompt {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-soft);
  margin-bottom: var(--space-4);
}

.matrix__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-7);
}

.matrix__tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-text-soft);
  transition: background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.matrix__tab .tab-index {
  font-size: var(--fs-xs);
  opacity: 0.6;
  font-weight: 700;
}

.matrix__tab .tab-icon {
  width: 20px;
  height: 20px;
  flex: none;
  opacity: 0.55;
  transition: opacity var(--duration-base) var(--ease-out);
}

.matrix__tab[aria-selected="true"] .tab-icon,
.matrix__tab:hover .tab-icon {
  opacity: 1;
}

.matrix__tab[aria-selected="true"] {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.matrix__tab:hover {
  color: var(--color-primary);
}

.matrix__panels {
  position: relative;
}

.matrix__panel {
  display: none;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-8);
  align-items: start;
}

.matrix__panel[data-active="true"] {
  display: grid;
  animation: panel-in var(--duration-slow) var(--ease-out);
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.matrix__intro {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
}

.matrix__intro .icon-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}

.matrix__intro .icon-chip svg {
  width: 26px;
  height: 26px;
}

.matrix__intro h3 {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.matrix__intro p {
  margin-top: var(--space-4);
  color: var(--color-text-soft);
}

.matrix__intro .btn {
  margin-top: var(--space-6);
}

.matrix__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.feature-card {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-soft-border);
}

.feature-card .check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.feature-card .check svg {
  width: 15px;
  height: 15px;
}

.feature-card p {
  font-size: var(--fs-sm);
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .matrix__panel[data-active="true"] {
    grid-template-columns: 1fr;
  }

  .matrix__intro {
    position: static;
  }
}

@media (max-width: 560px) {
  .matrix__features {
    grid-template-columns: 1fr;
  }

  .matrix__tabs {
    flex-direction: column;
    width: 100%;
    border-radius: var(--radius-md);
  }

  .matrix__tab {
    justify-content: flex-start;
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-sm);
  }
}

/* ==========================================================================
   Lifecycle (interactive stepper)
   ========================================================================== */
.lifecycle {
  background: var(--color-bg-alt);
  border-block: 1px solid var(--color-border);
}

.lifecycle__stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.lifecycle__track {
  position: absolute;
  top: 27px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

.lifecycle__track-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 12.5%;
  background: var(--gradient-accent);
  transition: width var(--duration-slow) var(--ease-out);
}

.lifecycle__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-top: var(--space-2);
}

.lifecycle__step .step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  font-weight: 800;
  font-size: var(--fs-md);
  color: var(--color-text-faint);
  transition: border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.lifecycle__step[aria-selected="true"] .step-circle {
  border-color: transparent;
  background: var(--gradient-accent);
  color: var(--color-white);
  box-shadow: var(--shadow-glow-accent);
}

.lifecycle__step h4 {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: color var(--duration-base) var(--ease-out);
}

.lifecycle__step[aria-selected="true"] h4 {
  color: var(--color-ink);
}

@media (max-width: 760px) {
  .lifecycle__stepper {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .lifecycle__track {
    top: 0;
    bottom: 0;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .lifecycle__track-fill {
    width: 100%;
    height: 12.5%;
  }

  .lifecycle__step {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding-top: 0;
    padding-block: var(--space-2);
  }

  .lifecycle__step h4 {
    margin-top: 0;
  }
}

.lifecycle__detail {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.lifecycle__detail-index {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--color-primary-soft-border);
  line-height: 1;
}

.lifecycle__detail h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-ink);
}

.lifecycle__detail p {
  margin-top: var(--space-3);
  color: var(--color-text-soft);
  max-width: 60ch;
}

@media (max-width: 560px) {
  .lifecycle__detail {
    grid-template-columns: 1fr;
    padding: var(--space-5);
  }
}

/* ==========================================================================
   Institutional mention (quiet — a door for the small percentage of
   visitors who are asset managers or banks, not a stop on the merchant
   path).
   ========================================================================== */
.institutional-mention {
  padding-block: var(--space-5);
  background: var(--color-bg-alt);
  border-block: 1px solid var(--color-border);
}

.institutional-mention__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.institutional-mention__text {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
}

.institutional-mention__links {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

.institutional-mention__links a {
  color: var(--color-primary);
}

.institutional-mention__links a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.institutional-mention__links span {
  color: var(--color-text-faint);
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--gradient-cta);
  color: var(--color-white);
  padding-block: var(--space-8);
}

.cta-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.cta-band h2 {
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  max-width: 24ch;
}

.cta-band p {
  margin-top: var(--space-3);
  color: var(--color-text-on-dark-soft);
  max-width: 42ch;
}

.cta-band__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-bg-ink);
  color: var(--color-text-on-dark-soft);
  padding-top: var(--space-9);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border-on-dark);
}

.footer__brand .brand__logo {
  height: 44px;
  filter: brightness(0) invert(1);
}

.footer__brand p {
  margin-top: var(--space-4);
  max-width: 34ch;
  font-size: var(--fs-sm);
}

.footer__col h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-4);
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__col a {
  font-size: var(--fs-sm);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__col a:hover {
  color: var(--color-white);
}

.footer__bottom {
  padding-block: var(--space-6) var(--space-7);
}

.footer__legal {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--color-text-on-dark-soft);
  opacity: 0.82;
}

.footer__legal .placeholder {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
  cursor: help;
}

@media (max-width: 980px) {
  .footer__top {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer__top {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Business cards (/businesses hub page)
   ========================================================================== */
.businesses-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

/* Grid items default to min-width:auto, so they refuse to shrink below
   their own content's min-content size even inside a 1fr track — without
   this, .business-card's fixed padding forces real horizontal overflow on
   mobile despite the 760px breakpoint below collapsing to one column. */
.businesses-grid > * {
  min-width: 0;
}

.business-card {
  padding: var(--space-7);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.business-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.business-card .icon-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.business-card .icon-chip svg {
  width: 26px;
  height: 26px;
}

.business-card .eyebrow {
  margin-top: var(--space-5);
}

.business-card h2 {
  margin-top: var(--space-3);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.business-card > p {
  margin-top: var(--space-3);
  color: var(--color-text-soft);
}

/* A plain text line reads calmer than a wall of pill chips for a list
   this long (six to nine items) — same information, none of the visual
   noise of nine bordered boxes. */
.business-card__served {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-faint);
}

.business-card__served span {
  font-weight: 700;
  color: var(--color-text-soft);
}

.business-card .btn {
  margin-top: var(--space-6);
}

@media (max-width: 760px) {
  .businesses-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .business-card {
    padding: var(--space-6);
  }
}

/* ==========================================================================
   Vertical acquisition pages (/businesses/home-improvement,
   /businesses/elective-medical) — a lighter single-column hero variant,
   a trade/specialty grid, a static process explainer, a three-up price
   row, and an FAQ accordion. All built from the same tokens/components as
   the homepage; nothing here introduces a parallel design system.
   ========================================================================== */

/* Single-column, centered hero content — reuses .hero for the glow
   background and .hero__eyebrow/__title/__subtitle/__actions/__meta as-is,
   just without the two-column .hero__inner grid the homepage needs for
   its side visual. */
.hero__content--centered {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.hero__content--centered .hero__actions {
  justify-content: center;
}

.hero__content--centered .hero__meta {
  justify-content: center;
  text-align: left;
}

/* .hero__subtitle's max-width:46ch shrinks its box below the 720px
   centered container's width, but the box itself has no auto margins, so
   it defaults to flush-left instead of centered — text-align:center only
   centers the lines *within* the box, not the box itself. */
.hero__content--centered .hero__subtitle {
  margin-inline: auto;
}

.price-cards--trio {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
}

@media (max-width: 860px) {
  .price-cards--trio {
    grid-template-columns: 1fr;
  }
}

.trade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: 900px;
  margin-inline: auto;
}

.trade-card {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.trade-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.trade-grid__note {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-faint);
}

.trade-grid__note a {
  color: var(--color-primary);
  font-weight: 600;
}

.trade-grid__note a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .trade-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 1000px;
  margin-inline: auto;
}

.process-step {
  text-align: center;
}

.process-step__index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
}

.process-step h3 {
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-ink);
}

.process-step p {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
}

@media (max-width: 760px) {
  .process-steps {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
}

/* 4-up variant (e.g. /funding-partners' origination-to-servicing flow) —
   wider max-width so 4 columns don't feel cramped, one intermediate
   2-column step before collapsing to a single column. */
.process-steps--quad {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1240px;
}

@media (max-width: 980px) {
  .process-steps--quad {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .process-steps--quad {
    grid-template-columns: 1fr;
  }
}

.faq-list {
  max-width: 760px;
  margin-inline: auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-hairline);
}

.faq-item__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding-block: var(--space-5);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-ink);
}

.faq-item__chevron {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--color-text-faint);
  transition: transform var(--duration-base) var(--ease-out);
}

.faq-item__toggle[aria-expanded="true"] .faq-item__chevron {
  transform: rotate(180deg);
}

.faq-item__panel {
  padding-bottom: var(--space-5);
  max-width: 62ch;
  color: var(--color-text-soft);
  line-height: 1.65;
}

/* Three-up "who's involved" explainer cards (/borrowers) */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 1000px;
  margin-inline: auto;
}

.info-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  text-align: center;
}

.info-card .icon-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.info-card .icon-chip svg {
  width: 26px;
  height: 26px;
}

.info-card h3 {
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-ink);
}

.info-card p {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
}

@media (max-width: 760px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Comparison grid — Funding Partners' "traditional lender vs. LendStrm's
   program-manager model" contrast. Two labeled columns, not a card grid,
   since the point is the side-by-side difference, not repeated items.
   ========================================================================== */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 980px;
  margin-inline: auto;
}

.compare-col {
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.compare-col--traditional {
  background: var(--color-white);
}

.compare-col--lendstrm {
  background: var(--color-white);
  border-color: var(--color-primary-soft-border);
  box-shadow: var(--shadow-md);
}

.compare-col__label {
  display: inline-flex;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.compare-col--traditional .compare-col__label {
  color: var(--color-text-faint);
}

.compare-col--lendstrm .compare-col__label {
  color: var(--color-primary);
}

.compare-col ul {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.compare-col li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.compare-col--traditional li {
  color: var(--color-text-soft);
}

.compare-col--lendstrm li {
  color: var(--color-text);
  font-weight: 500;
}

.compare-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 16px;
  height: 2px;
  border-radius: var(--radius-pill);
}

.compare-col--traditional li::before {
  background: var(--color-border);
}

.compare-col--lendstrm li::before {
  background: var(--gradient-accent);
}

@media (max-width: 760px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Callout card — a bordered highlight box for a single distilled claim
   (e.g. Funding Partners' document-custody/eVault callout), rather than a
   full section of its own cards like .info-grid above.
   ========================================================================== */
.callout-card {
  max-width: 980px;
  margin-inline: auto;
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.callout-card__grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.callout-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.callout-feature .icon-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.callout-feature .icon-chip svg {
  width: 22px;
  height: 22px;
}

.callout-feature h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-ink);
}

.callout-feature p {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
}

@media (max-width: 640px) {
  .callout-card__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Sticky CTA — a slim persistent bar once the visitor has scrolled past
   the hero's own CTAs; hidden again once the full-size CTA band (right
   before the footer) is in view, so it never doubles up. See
   data-sticky-cta wiring in main.js.
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px rgba(15, 23, 60, 0.08);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}

.sticky-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.sticky-cta__inner p {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
}

@media (max-width: 560px) {
  .sticky-cta__inner p {
    display: none;
  }

  .sticky-cta .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Contact page (/contact) — a two-column layout: quick-links to the right
   destination for common intents on the left, the actual inquiry form on
   the right. Form fields are a new base component (nothing on the site
   used a real <input>/<select>/<textarea> before this page).
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-8);
  align-items: start;
}

/* Grid items default to min-width:auto, so they refuse to shrink below
   their own content's min-content size even inside an fr track — without
   this, .contact-card's fixed padding forces real horizontal overflow on
   mobile (cutting off the form itself) despite the 900px breakpoint below
   collapsing this to one column. */
.contact-layout > * {
  min-width: 0;
}

.contact-aside h2 {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--color-ink);
}

.contact-aside__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.contact-quicklink {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.contact-quicklink:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-soft-border);
}

.contact-quicklink .icon-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.contact-quicklink .icon-chip svg {
  width: 20px;
  height: 20px;
}

.contact-quicklink h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-ink);
}

.contact-quicklink p {
  margin-top: 4px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-text-soft);
}

.contact-quicklink .card-arrow {
  margin-left: auto;
  align-self: center;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--color-text-faint);
  transition: transform var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

.contact-quicklink:hover .card-arrow {
  color: var(--color-primary);
  transform: translateX(3px);
}

.contact-aside__note {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-text-faint);
  line-height: 1.6;
}

.contact-card {
  padding: var(--space-7);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-field {
  margin-bottom: var(--space-5);
}

.form-field label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.form-field__optional {
  font-weight: 400;
  color: var(--color-text-faint);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-alt);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-white);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239295ab' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 16px;
  padding-right: var(--space-8);
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-card {
    padding: var(--space-6);
  }
}

.form-status {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
}

.form-status--error {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
}

/* ===================== app.lendstrm.com "Launching Soon" page ===================== */

.launching-teaser-image {
  width: 100%;
  max-width: 560px;
  border-radius: var(--radius-lg);
}

.launching-form-card {
  max-width: 560px;
  margin-inline: auto;
}

/* ============================ 404 error page ============================ */

.error-page {
  padding-block: var(--space-9) var(--space-8);
  text-align: center;
}

.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error-page__title {
  margin-top: var(--space-4);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--color-ink);
}

.error-page__subtitle {
  margin: var(--space-3) auto 0;
  max-width: 480px;
  color: var(--color-text-soft);
}

.error-page__actions {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.error-page__links {
  max-width: 900px;
  margin: var(--space-8) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  text-align: left;
}

@media (max-width: 760px) {
  .error-page__links {
    grid-template-columns: 1fr;
  }
}

/* ============================ Legal Document template ============================
   Deliberately plain per ARCHITECTURE.md: no hero art, no cards — clean
   long-form typography only. Used by /privacy-policy and /terms-of-use. */

.legal-header {
  padding-block: var(--space-7) var(--space-6);
  border-bottom: 1px solid var(--color-hairline);
}

.legal-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, var(--fs-3xl));
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--color-ink);
}

.legal-updated {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-faint);
}

.legal-notice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-secondary-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text);
}

.legal-notice svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--color-secondary);
}

.legal-notice strong {
  color: var(--color-secondary-hover);
}

.legal-content {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--space-7);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--color-text-soft);
}

.legal-toc {
  margin-bottom: var(--space-7);
  padding: var(--space-5);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

.legal-toc p {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
}

.legal-toc ol {
  margin: 0;
  padding-left: 1.2em;
  columns: 2;
  column-gap: var(--space-6);
}

.legal-toc li {
  break-inside: avoid;
  margin-bottom: var(--space-2);
}

.legal-toc a {
  font-size: var(--fs-sm);
  color: var(--color-text);
  text-decoration: none;
}

.legal-toc a:hover {
  color: var(--color-primary);
}

@media (max-width: 640px) {
  .legal-toc ol {
    columns: 1;
  }
}

.legal-content h2 {
  margin-top: var(--space-7);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.legal-content > h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  margin-top: var(--space-5);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-ink);
}

.legal-content p,
.legal-content ul,
.legal-content ol {
  margin-top: var(--space-4);
}

.legal-content ul,
.legal-content ol {
  padding-left: 1.4em;
}

.legal-content li + li {
  margin-top: var(--space-2);
}

.legal-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-soft-border);
  text-underline-offset: 2px;
}

.legal-content a:hover {
  text-decoration-color: currentColor;
}

.legal-content strong {
  color: var(--color-ink);
}

.legal-content .placeholder {
  border-bottom: 1px dashed var(--color-text-faint);
  cursor: help;
}

/* ============================ Bank partner compliance list ============================
   Used by /bank-partners — text-only entries (no third-party logos, since displaying a
   bank's mark needs their permission) presenting each program lender's charter,
   membership, NMLS ID, and address as a definition list. */

.bank-partner-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 780px;
  margin-inline: auto;
}

.bank-partner-card {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.bank-partner-card__logo {
  width: 108px;
  height: auto;
  flex: none;
}

.bank-partner-card h3 {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--color-ink);
}

.bank-partner-card__details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
}

.bank-partner-card__details dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
}

.bank-partner-card__details dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

/* ============================ Leadership team grid ============================
   Used by /about — three founder cards. Left-aligned bio copy inside a
   centered header (name + role) keeps longer bios easy to read. */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 1100px;
  margin-inline: auto;
}

.team-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  text-align: center;
}

.team-card h3 {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--color-ink);
}

.team-card__title {
  display: inline-block;
  margin-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.team-card p {
  margin-top: var(--space-4);
  text-align: left;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-text-soft);
}

@media (max-width: 900px) {
  .team-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

/* ============================ Empty state ============================
   Used by /careers for an honest "no openings right now" state — a real
   status, not a placeholder to fill in later. */

.empty-state {
  max-width: 620px;
  margin-inline: auto;
  padding: var(--space-7);
  text-align: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
}

.empty-state .icon-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.empty-state .icon-chip svg {
  width: 26px;
  height: 26px;
}

.empty-state h3 {
  margin-top: var(--space-4);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--color-ink);
}

.empty-state p {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  line-height: 1.7;
}

.empty-state .btn {
  margin-top: var(--space-5);
}

.business-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ============================ Social & banner downloads (/resources/materials) ============================ */

.asset-verticals-row {
  display: flex;
  gap: var(--space-8);
  justify-content: center;
  flex-wrap: wrap;
}

.asset-vertical-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.asset-thumb-grid {
  display: flex;
  gap: var(--space-5);
}

.asset-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.asset-thumb img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.asset-thumb:hover img {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.asset-thumb span {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
}

.banner-group {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

.banner-group + .banner-group {
  margin-top: var(--space-7);
}

.banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-hairline);
}

.banner-row:last-child {
  border-bottom: none;
}

.banner-row__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.banner-row__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* FAQ category grouping (/resources) — a small label above each .faq-list
   when several categories share one page. */
.faq-category {
  max-width: 760px;
  margin: 0 auto var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.faq-category:not(:first-child) {
  margin-top: var(--space-8);
}

/* Small breadcrumb-style "back" link for sub-pages (e.g. /resources/materials) */
.back-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-2);
  margin: 0 auto var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-faint);
  text-decoration: none;
}

.back-link svg {
  width: 16px;
  height: 16px;
}

.back-link:hover {
  color: var(--color-primary);
}

.bank-partner-note {
  max-width: 780px;
  margin: var(--space-5) auto 0;
  font-size: var(--fs-sm);
  color: var(--color-text-faint);
  text-align: center;
}

@media (max-width: 560px) {
  .bank-partner-card {
    flex-direction: column;
  }

  .bank-partner-card__details {
    grid-template-columns: 1fr;
    gap: var(--space-1) 0;
  }

  .bank-partner-card__details dt {
    margin-top: var(--space-3);
  }
}

/* ============================ Partner application wizard (/become-a-partner) ============================
   Lightweight, no-third-party-API lead-qualification flow — plain text
   fields only (no address autocomplete/map). Collects just enough to let
   the team reach out and confirm fit, distinct from the full underwriting
   application (business profile, principal info, financials, docs, ACH)
   that happens later, after that first conversation. */

.wizard {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-8);
  max-width: 900px;
  margin-inline: auto;
}

.wizard__steps-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}

.wizard__steps ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.wizard__steps li {
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-faint);
  border-left: 2px solid var(--color-border);
}

.wizard__steps li.is-active {
  color: var(--color-ink);
  border-left-color: var(--color-primary);
}

.wizard__steps li.is-done {
  color: var(--color-text-soft);
  border-left-color: var(--color-primary-soft-border);
}

.wizard__mobile-progress {
  display: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-5);
}

.wizard__panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-7);
}

.wizard__step-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.wizard__step-subtitle {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  margin: 0 0 var(--space-6);
}

.vertical-choice-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.vertical-choice {
  display: block;
  position: relative;
  cursor: pointer;
}

.vertical-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vertical-choice__card {
  display: block;
  padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: 700;
  color: var(--color-ink);
  transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}

.vertical-choice input:checked + .vertical-choice__card {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.vertical-choice input:focus-visible + .vertical-choice__card {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.wizard__actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.wizard__actions--end {
  justify-content: flex-end;
}

.wizard__done {
  text-align: center;
  padding-block: var(--space-6);
}

.wizard__done .icon-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.wizard__done h2 {
  margin-top: var(--space-4);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--color-ink);
}

.wizard__done p {
  margin-top: var(--space-3);
  color: var(--color-text-soft);
}

@media (max-width: 760px) {
  .wizard {
    grid-template-columns: 1fr;
  }

  .wizard__steps {
    display: none;
  }

  .wizard__mobile-progress {
    display: block;
  }

  .wizard__panel {
    padding: var(--space-5);
  }
}