/* ============================================================
   HIGH CARD CAPITAL — design system
   Racing Green #004225 · Table Green #00331D (flat, one shade)
   Card Cream #F5F0E1 · Warm White #FBF9F3 · Sage #8FA898 · Ink #141A16
   Poppins display · Inter body · tabular figures on all numbers
   Every headline ends with a period: racing green on light, sage on felt.
   ============================================================ */

/* ---------- fonts (self-hosted, latin) ---------- */
/* Poppins 500/600/700/800 and Inter 400/500/600 load from Google Fonts via the document head. */

/* ---------- tokens ---------- */
:root {
  --racing:#004225;
  --felt:#00331D;
  --cream:#F5F0E1;
  --white:#FBF9F3;
  --mist:#F4F2EC;
  --sage:#8FA898;
  --sage-deep:#4F6B5C;      /* sage for small text on light — AA contrast */
  --ink:#141A16;
  --slate:#5A6660;
  --cream-dim:#B9C4BC;      /* body text on felt */
  --cream-faint:rgba(245,240,225,.66);

  --line:rgba(0,66,37,.13);            /* hairline on light */
  --line-strong:rgba(0,66,37,.28);
  --line-dark:rgba(245,240,225,.16);   /* hairline on felt */
  --card-dark:rgba(245,240,225,.055);  /* card fill on felt */

  --font-d:'Poppins',ui-sans-serif,system-ui,sans-serif;
  --font-b:'Inter',ui-sans-serif,system-ui,sans-serif;

  --fs-display:clamp(2.65rem, 1.2rem + 4.9vw, 5.1rem);
  --fs-h2:clamp(1.7rem, 1rem + 2.2vw, 2.65rem);
  --fs-h3:clamp(1.18rem, 1rem + .6vw, 1.45rem);
  --fs-lede:clamp(1.02rem, .95rem + .3vw, 1.17rem);
  /* fluid BODY/UI text tokens — every paragraph, label, and caption scales per-pixel
     with the viewport (like the headings above) instead of sitting frozen between
     breakpoints. Ranges are tuned to their old fixed px at the middle of the site width. */
  --fs-body:clamp(.9rem, .84rem + .28vw, 1.02rem);     /* ~14.4→16.3px : card/body copy */
  --fs-body-sm:clamp(.8rem, .76rem + .2vw, .92rem);    /* ~12.8→14.7px : small copy, captions */
  --fs-ui:clamp(.82rem, .78rem + .2vw, .95rem);        /* ~13→15.2px : labels, nav-ish UI text */
  /* MODES-OK: all 4 modes — fluid clamp tokens (both ends defined, scale per-pixel across every width) */
  --fs-micro:clamp(.72rem, .69rem + .16vw, .82rem);    /* ~11.5→13.1px : fine print, legal, footer rows */
  --fs-eyebrow:clamp(.66rem, .63rem + .13vw, .72rem);  /* ~10.5→11.5px : uppercase eyebrow/column labels */
  --fs-num:clamp(1.1rem, .9rem + .8vw, 1.45rem);       /* ~17.6→23px : inline stat numbers */

  /* ── SECTION TYPE SCALE — single source of truth for every page ──────────────
     Standard for all future builds: put class="sec-title" on a section <h2> and it
     gets this size. One edit here re-sizes every section title site-wide.
     MODES-OK (all 4 modes): per-pixel fluid, stays live to ~1415px then caps — no plateau.
     Sized so the site's long one-liner titles ("See why businesses choose us.") never
     wrap at any width. See [[hcc-title-fluidity-lock]]. Exceptions that need a different
     size (narrow-column titles, one-line-critical cards) keep their own scoped clamp. */
  --t-section-title:clamp(.95rem, .72rem + 1.9vw, 2.4rem);   /* ~18→38px : section <h2> */

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --t-fast:.22s;
  --t-med:.45s;

  --r-btn:12px;
  --r-card:18px;
  --r-panel:24px;

  --nav-h:clamp(78px, 5vw + 32px, 92px); /* MODES-OK: nav height fluid — 78px at 921px, full 92px by ~1200px; the <=920 burger override sets 66px */
  --pad-sec:clamp(84px, 7rem + 3vw, 148px);
  --shadow-lift:0 22px 44px -20px rgba(0,51,29,.28);
  --shadow-float:0 30px 70px -30px rgba(0,25,14,.55);
}

/* ---------- reset / base ---------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
html:focus-within { scroll-behavior:smooth; }
body {
  font-family:var(--font-b); font-size:16.5px; line-height:1.65;
  color:var(--ink); background:var(--white);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
  max-width:100%;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--racing); text-decoration:none; }
a:hover { text-decoration:none; }
button { font:inherit; border:none; background:none; cursor:pointer; }
strong { font-weight:600; }
::selection { background:var(--racing); color:var(--cream); }
:focus-visible { outline:2px solid var(--racing); outline-offset:3px; border-radius:4px; }
.on-felt :focus-visible, .felt :focus-visible { outline-color:var(--cream); }

.skip {
  position:absolute; left:-9999px; top:12px; z-index:300;
  background:var(--racing); color:var(--cream); padding:10px 18px; border-radius:10px;
  font-family:var(--font-d); font-weight:600; font-size:14px;
}
.skip:focus { left:12px; }

/* fixed-nav clearance for anchor jumps */
section, [id] { scroll-margin-top:calc(var(--nav-h) + 16px); }

/* numbers: always tabular */
.num, .stat b, .wcard__amt, .terms-card b, td.n { font-variant-numeric:tabular-nums; font-feature-settings:'tnum'; }

/* ---------- layout ---------- */
.container { max-width:1240px; margin-inline:auto; padding-inline:clamp(20px, 5vw, 48px); }
.container--tight { max-width:980px; }
section { padding-block:var(--pad-sec); position:relative; }
.sec-mist { background:var(--mist); }
.sec-sage { background:#E4EBDE; } /* soft sage wash */

/* WHY MERCHANTS CHOOSE US — pine green, centered like OnDeck's blue block */
.sec-choose {
  background:var(--racing); color:var(--cream); text-align:center;
  /* stat bridge overlaps 54px into the top — padding compensates */
  padding-top:clamp(77px, 8vw, 98px); padding-bottom:clamp(35px, 4vw, 54px);
}
/* 3-across zone (>700px): +10% top padding so the heading sits clear of the stat boxes */
@media (min-width:701px) { .sec-choose { padding-top:clamp(85px, 8.8vw, 108px); } }
.choose-us__title { color:var(--cream); }
.sec-choose .dot { color:var(--sage); }
.choose-us {
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(19px, 2.8vw, 42px); margin-top:clamp(21px, 2.8vw, 32px);
}
.choose-us__item img { width:min(120px, 35%); height:auto; display:block; margin:0 auto 12px; }
.choose-us__item h3 { color:var(--cream); font-size:clamp(18px, 16px + .35vw, 20px); margin-bottom:6px; }
.choose-us__item p { color:rgba(245,240,225,.82); font-size:clamp(11px, 10px + .18vw, 12px); line-height:1.55; max-width:220px; margin-inline:auto; }
@media (max-width:700px) { .choose-us { grid-template-columns:1fr; gap:35px; } }
.sec-cream { background:var(--cream); }
.felt { background:var(--felt); color:var(--cream); }
.felt p { color:var(--cream-dim); }

/* embossed cream texture — light sections only (dark stays flat, always) */
.texture { position:relative; isolation:isolate; }
.texture::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:url('../img/tex-cream.webp') center/cover;
  opacity:.38; pointer-events:none;
}

/* ---------- typography ---------- */
.eyebrow {
  font-family:var(--font-d); font-size:clamp(.66rem, .63rem + .12vw, .74rem); letter-spacing:.3em; text-transform:uppercase;
  font-weight:700; color:var(--sage-deep); margin-bottom:20px; display:flex; align-items:center; gap:14px;
}
/* no leading dash on eyebrows — owner's call, locked 2026-07 */
.felt .eyebrow, .on-felt .eyebrow { color:var(--sage); }

h1,h2,h3,h4 { font-family:var(--font-d); font-weight:600; letter-spacing:-.02em; line-height:1.06; text-wrap:balance; }
.h-display { font-size:var(--fs-display); }
h2, .h2 { font-size:var(--fs-h2); line-height:1.1; margin-bottom:18px; }
h3, .h3 { font-size:var(--fs-h3); line-height:1.3; letter-spacing:-.01em; }
/* MODES-OK: the standard section-title size — one token, every page. Put class="sec-title" on a section <h2>.
   Unified ONLY on wide layouts (>=701px: main site + big burger). At <=700px (small burger + mobile) titles
   keep their own original per-section sizes (owner's call — old mobile look preserved). Selectors below are
   element+class (h2.sec-title) so the token beats same-element overrides like .story-card h2 at >=701px. */
@media (min-width:701px) {
  /* MODES-OK: main site + big burger (>=701px) use the unified token; doubled class (0,2,0) reliably
     beats element+class overrides like .story-card h2. Token is per-pixel fluid. All 4 modes covered. */
  .sec-title.sec-title { font-size:var(--t-section-title); }
}

/* the signature period */
.dot { color:var(--racing); }
.felt .dot, .on-felt .dot { color:var(--sage); }

.lede { font-size:var(--fs-lede); line-height:1.65; color:var(--slate); max-width:640px; }
.felt .lede { color:var(--cream-dim); }
.small { font-size:var(--fs-body-sm); line-height:1.6; color:var(--slate); }
.felt .small { color:var(--cream-faint); }

.microcopy { display:flex; align-items:center; gap:8px; font-size:var(--fs-body-sm); color:var(--sage-deep); margin-top:14px; }
.microcopy svg { width:15px; height:15px; flex:none; }
.felt .microcopy, .on-felt .microcopy { color:var(--sage); }

.sec-head { max-width:720px; margin-bottom:clamp(40px, 6vw, 64px); }
.sec-head--center { margin-inline:auto; text-align:center; }
.sec-head--center .eyebrow { justify-content:center; }
.sec-head--center .lede { margin-inline:auto; }

/* ---------- icons ---------- */
.icon { width:24px; height:24px; color:var(--racing); flex:none; }
.icon svg { width:100%; height:100%; display:block; }
.icon--chip {
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--cream); border:1px solid var(--line); color:var(--racing);
}
.icon--chip svg { width:26px; height:26px; }
.felt .icon { color:var(--cream); }

/* ---------- buttons ---------- */
.btn {
  /* MODES-OK: base button padding now fluid (was fixed 16px 30px) — genuinely scales down on small screens and hits the desktop value (16/30) at ~920px+; all 4 modes */
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:clamp(8px, .5vw + 6px, 10px);
  font-family:var(--font-d); font-weight:600; font-size:clamp(.9rem, .86rem + .2vw, 1rem); letter-spacing:.01em;
  padding:clamp(11.5px, 1vw + 8px, 16px) clamp(20px, 2.2vw + 14px, 30px); border-radius:var(--r-btn); white-space:nowrap;
  background:var(--racing); color:var(--cream);
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast);
  will-change:transform;
}
.btn:hover { background:#00522E; box-shadow:0 14px 30px -14px rgba(0,66,37,.5); }
.btn:active { box-shadow:inset 0 0 0 1px rgba(245,240,225,.22); }
/* MODES-OK: arrow icon fluid, all 4 modes (hits 17 at desktop, descends to 14 on mobile) */
.btn .arr { width:clamp(14px, .5vw + 12px, 17px); height:clamp(14px, .5vw + 12px, 17px); transition:transform var(--t-fast) var(--ease-out); }
.btn:hover .arr { transform:translateX(4px); }

/* MODES-OK: cream scrapped → white button, green text, thin green outline; hover fills green.
   Color-only + a 1.5px hairline border; no fluid/sizing tokens changed, applies to all modes (owner's call 2026-07) */
.btn--cream { background:var(--white); color:var(--racing); font-weight:700; border:1.5px solid var(--racing); box-shadow:0 12px 28px -14px rgba(0,0,0,.4); }
.btn--cream:hover { background:var(--racing); color:var(--cream); box-shadow:0 18px 40px -14px rgba(0,0,0,.5); transform:translateY(-2px); }
.btn--lg { padding:clamp(15px,1.1rem + .6vw,19px) clamp(30px,2rem + 1.4vw,40px); font-size:clamp(.95rem,.88rem + .3vw,1.06rem); border-radius:14px; }
.btn--ghost {
  background:transparent; color:var(--racing); border:1px solid var(--line-strong); box-shadow:none;
}
.btn--ghost:hover { background:rgba(0,66,37,.05); box-shadow:none; }
.felt .btn--ghost, .on-felt .btn--ghost { color:var(--cream); border-color:var(--line-dark); }
.felt .btn--ghost:hover, .on-felt .btn--ghost:hover { background:rgba(245,240,225,.07); }
/* MODES-OK: sm/md button padding fluid (was fixed) — scales per-pixel, all 4 modes */
.btn--sm { padding:clamp(9.5px, .6rem + .35vw, 12px) clamp(17px, 1.1rem + .8vw, 22px); font-size:var(--fs-body); border-radius:10px; }
.btn--md { padding:clamp(11px, .75rem + .4vw, 14px) clamp(19px, 1.25rem + .9vw, 24px); font-size:var(--fs-body); }

.link-arrow {
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-d); font-weight:600; font-size:15px; white-space:nowrap;
  color:var(--racing);
  /* room for the 4px hover nudge inside the ripple clip, layout-neutral */
  padding-right:5px; margin-right:-5px;
}

.link-arrow svg { width:16px; height:16px; transition:transform var(--t-fast) var(--ease-out); }
.link-arrow:hover svg { transform:translateX(4px); }
.felt .link-arrow, .on-felt .link-arrow { color:var(--cream); }

.phone-link {
  display:inline-flex; align-items:center; gap:9px; font-family:var(--font-d); font-weight:600;
  font-size:15.5px; color:var(--racing);
}
.phone-link svg { width:17px; height:17px; }
.on-felt .phone-link, .felt .phone-link { color:var(--cream); }

/* ---------- chips / tags ---------- */
.tag {
  display:inline-flex; align-items:center; font-size:12px; font-weight:500; letter-spacing:.02em;
  color:var(--sage-deep); border:1px solid var(--line); border-radius:999px; padding:5px 13px;
  background:rgba(143,168,152,.08);
}
.felt .tag { color:var(--sage); border-color:var(--line-dark); background:rgba(245,240,225,.04); }

.tag--product {
  font-family:var(--font-d); font-weight:700; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--racing); background:rgba(0,66,37,.07); border:none; padding:6px 13px;
}

/* ============================================================
   NAV
   ============================================================ */
/* burger-mode contact strip (Capital Quickly reference, owner 2026-07-29) — desktop never shows it.
   MODES-OK: display-only line; strip sizing lives in the <=920 and <=700 blocks per mode */
.topbar { display:none; }

.nav {
  position:fixed; inset:0 0 auto 0; z-index:120; height:var(--nav-h);
  display:flex; align-items:center;
  background:var(--white); border-bottom:1px solid var(--line);
  transition:background var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out),
             height var(--t-med) var(--ease-out), border-color var(--t-med);
}
/* MODES-OK: nav__in gap fluid (all 4 modes) */
.nav__in { display:flex; align-items:center; justify-content:space-between; gap:clamp(14px, 1vw + 8px, 24px); width:100%; }
/* MODES-OK main site >=921 (owner 2026-07-29: logo +30% so it fills the bar; burger modes keep their own override at the <=920 block) */
.nav__logo { display:block; height:clamp(34px, 1.9vw + 23px, 44px); flex:none; }
.nav__logo img { height:100%; width:auto; }
.nav__logo .lg-cream { display:none; }

/* MODES-OK main site >=921 (links hidden in burger modes) — owner 2026-07-29: pill boxes
   removed, plain racing-green text like the burger language, slide-in underline on hover */
.nav__links { display:flex; align-items:center; gap:clamp(10px, 1.2vw + 2px, 22px); list-style:none; }
.nav__links > li { position:relative; display:flex; }
.nav__links a, .nav__links button {
  display:inline-flex; align-items:center; justify-content:center; gap:clamp(4px, .4vw + 2px, 6px);
  font-family:var(--font-d); font-size:clamp(12px, .4vw + 10.2px, 13.5px); font-weight:600; color:var(--racing); line-height:1;
  height:clamp(32px, 1.4vw + 24px, 38px); padding:0 clamp(2px, .2vw + 1px, 4px); white-space:nowrap;
  background:transparent; border:0; border-radius:0;
  transition:color var(--t-fast);
}
.nav__links > li > a { position:relative; }
.nav__links > li > a::after {
  content:""; position:absolute; left:clamp(2px, .2vw + 1px, 4px); right:clamp(2px, .2vw + 1px, 4px); top:calc(50% + .72em);
  height:2px; border-radius:1px; background:var(--sage);
  /* MODES-OK main site >=921 only (links hidden in burger modes) — owner 2026-07-29: underline snug under the letters (em-relative, scales with the fluid font), not pinned to the hit-area bottom; SAGE line (owner round 3) */
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--t-fast) var(--ease-out);
} /* MODES-OK: underline insets/offset fluid; desktop-only element */
.nav__links > li > a:hover::after, .nav__links > li:focus-within > a::after { transform:scaleX(1); }
/* MODES-OK: caret fluid (all 4 modes) */
.nav__links .caret { width:clamp(10px, .5vw + 8px, 12px); height:clamp(10px, .5vw + 8px, 12px); transition:transform var(--t-fast) var(--ease-out); color:var(--sage-deep); }
/* no current-page highlight — nav buttons are green only on hover (owner's call 2026-07) */
.nav__links li:hover .caret, .nav__links li:focus-within .caret { transform:rotate(180deg); }

/* MODES-OK: nav cta gap + phone (font/height/padding/gap/svg) + apply fluid (all 4 modes) */
.nav__cta { display:flex; align-items:center; gap:clamp(5px, .5vw + 2px, 8px); }
.nav__phone {
  font-family:var(--font-d); font-weight:600; font-size:clamp(12px, .4vw + 10.2px, 13.5px); color:var(--racing); line-height:1;
  display:inline-flex; gap:clamp(5px, .4vw + 3px, 7px); align-items:center; white-space:nowrap;
  height:clamp(32px, 1.4vw + 24px, 38px); padding:0 clamp(2px, .2vw + 1px, 4px);
  background:transparent; border:0; border-radius:0;
  transition:color var(--t-fast);
} /* MODES-OK main site >=921 (hidden in burger modes) — owner 2026-07-29: box removed, plain green icon + number */
.nav__phone:hover { color:var(--racing-deep, #06170F); }
.nav__phone svg { width:clamp(13px, .5vw + 10px, 15px); height:clamp(13px, .5vw + 10px, 15px); }
/* MODES-OK main site >=921 — owner 2026-07-30: small racing pill sized like the phone number.
   Height and font-size track the nav phone exactly; padding is tight so it reads as a boxed
   word rather than a large CTA. A hairline cream border keeps the edge crisp against the header. */
.nav__apply {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  height:clamp(32px, 1.4vw + 24px, 38px);
  padding:0 clamp(10px, .8vw + 6px, 14px);
  font-family:var(--font-d); font-size:clamp(12px, .4vw + 10.2px, 13.5px); font-weight:600; letter-spacing:.01em; text-transform:none; line-height:1; white-space:nowrap;
  color:var(--cream); background:var(--racing); border:1px solid rgba(245,240,225,.35); border-radius:var(--r-btn);
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
  will-change:transform;
}
.nav__apply:hover { background:#00522E; box-shadow:0 12px 24px -12px rgba(0,66,37,.45); }
.nav__apply:active { box-shadow:inset 0 0 0 1px rgba(245,240,225,.22); }


/* dropdown */
.drop {
  position:absolute; top:calc(100% + 10px); left:-12px; width:420px;
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 30px 60px -24px rgba(0,40,22,.25);
  padding:10px; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility var(--t-fast);
}
li:hover > .drop, li:focus-within > .drop, .drop.is-open { opacity:1; visibility:visible; transform:translateY(0); }
.drop a { display:flex; gap:14px; align-items:flex-start; padding:13px 14px; border-radius:12px; }
.drop a:hover { background:var(--mist); }
.drop .icon { width:22px; height:22px; margin-top:2px; }
.drop b { display:block; font-family:var(--font-d); font-weight:600; font-size:14.5px; color:var(--ink); }
.drop span { display:block; font-size:12.5px; color:var(--slate); line-height:1.45; margin-top:1px; }
.drop__foot {
  margin-top:6px; border-top:1px solid var(--line); padding:12px 14px 6px;
}
.drop__foot a { padding:0; display:inline-flex; }
.drop__foot a:hover { background:none; }

/* dropdown links keep light-panel colors even under the dark hero nav */
.nav--dark:not(.is-scrolled) .nav__links .drop a { color:var(--ink); }
.nav--dark:not(.is-scrolled) .nav__links .drop a:hover { background:var(--mist); }
.nav--dark:not(.is-scrolled) .nav__links .drop__foot a { color:var(--racing); }
.nav--dark:not(.is-scrolled) .nav__links .drop__foot a:hover { background:transparent; }

/* scrolled state */
.nav.is-scrolled {
  height:66px; box-shadow:0 10px 30px -18px rgba(0,40,22,.18);
}

/* dark variant — sits on the felt hero until scrolled */
.nav--dark:not(.is-scrolled) { --navink:var(--cream); }
.nav--dark:not(.is-scrolled) .nav__logo .lg-green { display:none; }
.nav--dark:not(.is-scrolled) .nav__logo .lg-cream { display:block; }
.nav--dark:not(.is-scrolled) .nav__links a,
.nav--dark:not(.is-scrolled) .nav__links button { color:var(--cream); }
.nav--dark:not(.is-scrolled) .nav__phone { color:var(--cream); }
.nav--dark:not(.is-scrolled) .nav__phone:hover { color:var(--white); }
/* Apply Now stays solid green everywhere — no cream on the dark hero (owner's call 2026-07) */
.nav--dark:not(.is-scrolled) .caret { color:var(--sage); }
.nav--dark:not(.is-scrolled) .nav__burger span { background:var(--cream); }

/* burger + mobile menu */
.nav__burger { display:none; width:44px; height:44px; border-radius:10px; position:relative; z-index:140; }
.nav__burger span {
  /* owner 2026-07-30: bars pulled in to 22px wide and given a hair more stroke so the icon's
     optical weight matches the wordmark at narrow widths; 44x44 tap target unchanged */
  position:absolute; left:11px; right:11px; height:2.2px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease-io), top .3s var(--ease-io), opacity .2s;
}
/* MODES-OK: 3-line hamburger. The 44x44 button is a fixed accessible tap target (identical in
   big/small/mobile burger by design, not fluid), and the bar offsets are geometry inside that
   fixed box — so these px positions are correct across all 3 burger modes. Three bars centered on
   top:22px, 7px apart. Open → middle fades, top+bottom collapse to center and cross into an X. */
.nav__burger span:nth-child(1){ top:15px; }
.nav__burger span:nth-child(2){ top:22px; }
.nav__burger span:nth-child(3){ top:29px; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ top:22px; transform:rotate(45deg); background:var(--cream); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.2); }
.nav__burger[aria-expanded="true"] span:nth-child(3){ top:22px; transform:rotate(-45deg); background:var(--cream); }

/* while the mobile menu is open, the nav floats above it in cream */
body.menu-open .nav { background:transparent; border-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
body.menu-open .nav__logo .lg-green { display:none; }
body.menu-open .nav__logo .lg-cream { display:block; }
body.menu-open .nav__apply { background:var(--cream); color:var(--racing); }

.menu {
  position:fixed; inset:0; z-index:115; background:var(--felt); color:var(--cream);
  display:flex; flex-direction:column; padding:100px 8vw 40px;
  clip-path:circle(0 at calc(100% - 54px) 44px);
  transition:clip-path .55s var(--ease-io); visibility:hidden;
}
.menu.is-open { clip-path:circle(150% at calc(100% - 54px) 44px); visibility:visible; }
.menu__links { list-style:none; display:flex; flex-direction:column; gap:2px; }
.menu__links a {
  font-family:var(--font-d); font-weight:600; font-size:clamp(26px,7vw,34px); letter-spacing:-.02em;
  color:var(--cream); display:block; padding:10px 0;
  opacity:0; transform:translateY(24px); transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.menu.is-open .menu__links a { opacity:1; transform:none; }
.menu__links a small { font-family:var(--font-b); font-weight:400; font-size:13px; color:var(--sage); display:block; letter-spacing:0; }
.menu__sub { list-style:none; margin:4px 0 10px; border-left:1px solid var(--line-dark); padding-left:20px; }
.menu__sub a { font-size:19px; font-weight:500; padding:7px 0; }
.menu__foot { margin-top:auto; display:flex; flex-direction:column; gap:16px; padding-top:28px; border-top:1px solid var(--line-dark); }
.menu .phone-link { color:var(--cream); }

/* ============================================================
   HOME HERO — the table
   ============================================================ */
.hero {
  background:var(--felt); color:var(--cream); position:relative; overflow:hidden;
  padding-top:calc(var(--nav-h) + 10vh);
  padding-bottom:clamp(31px, 5vh, 62px); display:flex; flex-direction:column;
  /* landing view = nav + hero + trust band + products heading, no cards: hero flexes to fill the remainder */
  min-height:clamp(500px, calc(100svh - 430px), 880px); justify-content:center;
}
.hero > .container { position:relative; z-index:1; }
/* the eclipse — the rim of a huge unseen circle catches sage light past the top right corner */
.hero__fx {
  position:absolute; z-index:0; pointer-events:none;
  width:1700px; height:1700px; top:-1310px; right:-560px; border-radius:50%;
  background:radial-gradient(circle,
    transparent 61.5%,
    rgba(143,168,152,.32) 63.2%,
    rgba(245,240,225,.2) 63.9%,
    rgba(143,168,152,.1) 65%,
    transparent 67.5%);
  filter:blur(7px);
  animation:eclipse 16s ease-in-out infinite;
}
.hero__fx::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, transparent 60%, rgba(143,168,152,.07) 64%, transparent 72%);
  filter:blur(30px);
}
@keyframes eclipse { 0%,100% { opacity:.75; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .hero__fx { animation:none; } }
.hero__grid {
  display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:clamp(32px,4vw,72px);
  align-items:center; flex:1;
}
.hero h1 { color:var(--cream); margin-bottom:24px; font-size:clamp(2.8rem, .6rem + 6vw, 5.4rem); letter-spacing:-.025em; }
.hero .eyebrow { margin-bottom:16px; font-size:11px; letter-spacing:.26em; }
.hero .hero__ctas { margin-top:40px; }
.hero .h-line { display:block; white-space:nowrap; }
@media (max-width:560px) { .hero .h-line { white-space:normal; display:inline; } }
.hero .lede { max-width:490px; font-size:17.5px; line-height:1.85; color:rgba(245,240,225,.9); }
.nowrap { white-space:nowrap; }

.hero__ctas { display:flex; align-items:center; flex-wrap:wrap; gap:26px; margin-top:34px; }

/* needs-router */
.router { margin-top:34px; }
.router__label { font-family:var(--font-d); font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--sage); margin-bottom:12px; }
.router__chips { display:flex; flex-wrap:wrap; gap:9px; }
.router__chip {
  font-family:var(--font-d); font-size:13.5px; font-weight:500; color:var(--cream);
  border:1px solid var(--line-dark); border-radius:999px; padding:9px 18px;
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.router__chip:hover { background:rgba(245,240,225,.08); transform:translateY(-1px); }
.router__chip[aria-pressed="true"] { background:var(--cream); color:var(--racing); border-color:var(--cream); font-weight:600; }

/* hero visual — merchant photo with the wire-confirmation card overlapping */
/* photo-topped wire card: one clean unit, deliberately static (owner's call) */
.hero__visual { position:relative; max-width:249px; justify-self:center; width:100%; }
.proof-stack {
  color:var(--ink); position:relative;
  /* entrance: dealt onto the table, then a slow idle float */
  animation:
    deal-in .95s cubic-bezier(.34,1.56,.64,1) .25s backwards,
    float 7s ease-in-out 1.7s infinite;
}
@keyframes deal-in {
  from { opacity:0; transform:translateY(72px) rotate(5deg); }
  55%  { opacity:1; }
  to   { opacity:1; transform:translateY(0) rotate(0deg); }
}
/* photo floats ON TOP of the card: offset right, hanging over the card's top edge */
.proof-stack__photo {
  width:92%; height:170px; display:block; position:relative; z-index:1;
  margin:0 auto -26px;
  object-fit:cover; object-position:50% 16%;
  border-radius:12px;
  box-shadow:0 18px 36px -16px rgba(0,18,10,.45);
}
.proof-stack__body {
  background:var(--white); border-radius:14px; position:relative; z-index:2;
  box-shadow:0 -10px 24px -18px rgba(0,18,10,.35), 0 26px 54px -24px rgba(0,18,10,.5);
  padding:17px 13px 13px; /* card runs ~10% longer; type below scales to fill it */
}
.proof-stack .wcard__amt { font-size:21px; }
.proof-stack .wcard__rows div { font-size:10.5px; padding:5px 0; }
.proof-stack .wcard__rows { margin-top:9px; }
.proof-stack .wcard__cap { font-size:9px; letter-spacing:.14em; }
.proof-stack .wcard__stars { margin-top:10px; font-size:10.5px; letter-spacing:2px; }
.proof-stack .wcard__quote { margin-top:6px; font-size:11.5px; font-style:italic; }
.proof-stack .wcard__note { margin-top:8px; font-size:8px; }
.proof-stack .funded-pill { font-size:8.5px; padding:2.5px 9px; }
.wcard__note {
  margin-top:12px; font-family:var(--font-d); font-size:9px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sage-deep);
}
.funded-pill {
  font-family:var(--font-d); font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--racing); border:1.5px solid var(--racing); border-radius:999px; padding:3px 12px;
}
@media (max-width:920px) { .hero__visual { justify-self:center; } }

/* the hand — 3D dealt cards */
.hand { position:relative; height:clamp(380px, 44vw, 560px); perspective:1400px; }
.hand__group { position:absolute; inset:0; transform-style:preserve-3d; }
.card3d {
  position:absolute; border-radius:20px; transform-style:preserve-3d;
  box-shadow:var(--shadow-float);
  opacity:0;
}
.hand.is-dealt .card3d { animation:deal .9s var(--ease-spring) forwards; }
.hand.is-dealt .card3d:nth-child(1) { animation-delay:.15s; }
.hand.is-dealt .card3d:nth-child(2) { animation-delay:.3s; }
.hand.is-dealt .card3d:nth-child(3) { animation-delay:.45s; }
@keyframes deal {
  from { opacity:0; transform:translateY(90px) rotate(var(--r, 0deg)) rotateX(18deg) scale(.92); }
  to   { opacity:1; transform:translateY(0) rotate(var(--r, 0deg)) rotateX(0) scale(1); }
}

/* ace card — the brand mark as a playing card back */
.card--ace {
  --r:-11deg;
  left:6%; top:12%; width:min(40%, 205px); aspect-ratio:5/7;
  background:var(--racing); border:1px solid rgba(245,240,225,.22);
  display:grid; place-items:center; z-index:1;
}
.card--ace::before { content:''; position:absolute; inset:11px; border:1px solid rgba(245,240,225,.3); border-radius:12px; }
.card--ace img { width:38%; opacity:.95; }

/* wire-confirmation proof card */
.card--proof {
  --r:4deg;
  right:5%; top:6%; width:min(62%, 300px);
  background:var(--white); color:var(--ink); padding:22px 22px 18px; z-index:3;
  box-shadow:0 40px 90px -34px rgba(0,18,10,.65), 0 10px 30px -14px rgba(0,66,37,.35);
}
.card--proof::after { content:''; position:absolute; inset:9px; border:1px solid var(--line); border-radius:13px; pointer-events:none; }
.wcard__top { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.wcard__cap { font-family:var(--font-d); font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--sage-deep); white-space:nowrap; }
.card--proof .sample-flag { padding:2px 8px; font-size:8.5px; }
.wcard__check { width:20px; height:20px; }
.wcard__check { width:26px; height:26px; color:var(--racing); }
.wcard__amt { font-family:var(--font-d); font-weight:800; font-size:clamp(26px, 2.6vw, 33px); letter-spacing:-.02em; color:var(--racing); line-height:1; }
.wcard__rows { margin-top:16px; border-top:1px solid var(--line); }
.wcard__rows div { display:flex; justify-content:space-between; gap-inline:14px; padding:8px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
.wcard__rows dt { color:var(--slate); }
.wcard__rows dd { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.wcard__quote { margin-top:14px; font-size:12.5px; line-height:1.5; color:var(--slate); font-style:italic; }
.wcard__stars { color:var(--racing); letter-spacing:2px; font-size:12px; margin-top:8px; }

/* floating stat chip */
.card--proof .wcard__check { display:none; }
.card--stat {
  --r:-3deg;
  left:14%; bottom:12%; width:min(48%, 228px);
  background:var(--cream); color:var(--ink); padding:14px 18px; z-index:4;
}
.card--stat b { font-family:var(--font-d); font-weight:800; font-size:21px; color:var(--racing); display:block; line-height:1.15; }
.card--stat span { font-size:11.5px; color:var(--sage-deep); font-weight:500; white-space:nowrap; }

/* idle float after deal */
@keyframes float { 0%,100% { translate:0 0; } 50% { translate:0 -9px; } }
.hand.is-dealt.is-idle .card3d { opacity:1; transform:rotate(var(--r,0deg)); animation:float 7s ease-in-out infinite; }
.hand.is-dealt.is-idle .card3d:nth-child(2) { animation-delay:1.2s; }
.hand.is-dealt.is-idle .card3d:nth-child(3) { animation-delay:2.4s; }

/* hero trust ticks */
.hero__ticks { border-top:1px solid var(--line-dark); margin-top:clamp(12px, 1.8vh, 22px); }
.ticks {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
  padding-block:26px; list-style:none;
}
.ticks li { display:flex; align-items:center; gap:12px; font-size:13.5px; font-weight:500; color:var(--cream-dim); }
.ticks .icon { width:20px; height:20px; color:var(--sage); }
.ticks b { color:var(--cream); font-weight:600; }
.ticks--light li { color:var(--slate); }
.ticks--light .icon { color:var(--racing); }
.ticks--light b { color:var(--ink); }

/* ============================================================
   TRUST BAND — static, all items visible
   ============================================================ */
/* floating pill bar — straddles the hero's bottom edge like Fundbox */
.trust-band {
  /* flat full-width strip: finishes the hero, hairline above, no floating pill */
  background:var(--felt); position:relative; z-index:6;
  border-top:1px solid var(--line-dark);
}
.trust-band .container { max-width:1060px; }
.trust-band__row {
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; row-gap:14px;
  padding:21px 0 23px;
}
.trust-band__item {
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-d); font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream); white-space:nowrap;
  padding-inline:clamp(20px, 3vw, 44px);
}
.trust-band__item + .trust-band__item { border-left:1px solid var(--line-dark); }
.trust-band__item .icon { width:18px; height:18px; color:var(--sage); flex:none; }
@media (max-width:920px) {
  .trust-band__item { border-left:none !important; padding-inline:14px; }
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
/* products section — pulled up under the trust band, heavier centered title */
.sec-products { padding-top:calc(var(--pad-sec) * .5); }
/* soft cream→sage wash behind the cards; ends on page white so the stat-bridge seam stays invisible */
.sec-products {
  background:
    radial-gradient(46% 54% at 8% 14%, rgba(143,168,152,.22), transparent 68%),
    radial-gradient(40% 48% at 94% 30%, rgba(143,168,152,.18), transparent 66%),
    radial-gradient(72% 58% at 50% 24%, rgba(251,249,243,.9), transparent 72%),
    linear-gradient(180deg, #FBF9F3 0%, #F4F2E6 40%, #E8EDDD 74%, #FBF9F3 100%);
  background:
    radial-gradient(46% 54% at 8% 14%, rgba(143,168,152,.22), transparent 68%),
    radial-gradient(40% 48% at 94% 30%, rgba(143,168,152,.18), transparent 66%),
    radial-gradient(72% 58% at 50% 24%, rgba(251,249,243,.9), transparent 72%),
    linear-gradient(180deg in oklch, #FBF9F3 0%, #F4F2E6 40%, #E8EDDD 74%, #FBF9F3 100%);
}
/* held cards start lower + smaller; heading settles into place when they release */
.prod-grid .prod[data-reveal]:not(.is-inview) { transform:translateY(46px) scale(.96); }
.sec-products .sec-head { transition:transform .9s cubic-bezier(.16,.84,.28,1); }
.sec-products .sec-head.presettle { transform:translateY(18px); }
.sec-products .sec-head h2 { font-weight:700; letter-spacing:-.028em; line-height:1.05; }
.sec-products .sec-head::after {
  content:''; display:block; width:56px; height:2px; border-radius:2px;
  background:var(--sage); margin:24px auto 0;
}

/* stat bridge — white proof cards straddling the products / choose-us seam
   (2026-07-29: Google card replaced by the Trustpilot lockup reusing the shared
   .th-stars; owner tried the dark th-trust palette and reverted to white) */
.stat-bridge { position:relative; z-index:5; margin:-54px 0; }
.stat-bridge__row { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.stat-card {
  background:var(--white); border:1px solid rgba(0,66,37,.12); border-radius:14px;
  box-shadow:0 2px 6px rgba(0,66,37,.06), 0 18px 40px -18px rgba(0,18,10,.28);
  padding:26px 20px 22px; text-align:center;
  /* two shared alignment lines across the band: numerals on top, captions pinned to the bottom */
  display:flex; flex-direction:column;
}
.stat-card__num {
  font-family:var(--font-d); font-weight:600; font-size:clamp(28px, 3vw, 40px);
  color:var(--racing); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums;
}
.stat-card__tp { white-space:nowrap; } /* Trustpilot wordmark stays one line; TRUE 476.9 @100px */
.stat-card .th-stars { margin-top:8px; } /* MODES-OK main-site spacing under the wordmark */
.stat-card__label {
  font-family:var(--font-d); font-weight:600; font-size:13px; letter-spacing:.01em;
  color:var(--sage-deep); margin-bottom:10px;
}
@media (max-width:920px) {
  .stat-bridge { margin:-30px 0; }
  .stat-bridge__row { grid-template-columns:1fr; gap:12px; }
}

/* two-tone centered heading accent */
.h2-line { display:block; }
.h2-accent { color:var(--racing); }
.h2-accent .dot { color:var(--sage-deep); }

.prod-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.prod-grid .prod { min-width:0; }
.prod {
  --pp:clamp(24px, 2.2vw, 30px); /* card padding — the keyline-bleed divider depends on it */
  --kl:11px;                     /* playing-card keyline inset */
  position:relative; background:var(--white); border:1px solid rgba(0,66,37,.14); border-radius:20px;
  box-shadow:0 1px 3px rgba(0,66,37,.06), 0 8px 24px -18px rgba(0,66,37,.2);
  padding:var(--pp); display:flex; flex-direction:column; gap:0;
  min-height:352px;
  text-align:center; align-items:center;
  transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med);
  will-change:transform;
}
/* thin inner keyline — the face of a playing card */
.prod::before {
  content:''; position:absolute; inset:var(--kl); border:1px solid rgba(0,66,37,.11);
  border-radius:10px; pointer-events:none;
}
.prod:hover {
  transform:translateY(-4px); border-color:rgba(0,66,37,.32);
  box-shadow:0 2px 5px rgba(0,66,37,.08), 0 12px 26px -16px rgba(0,66,37,.24), 0 30px 60px -30px rgba(0,66,37,.32);
}
/* cursor spotlight — a soft light that follows the pointer inside the card */
[data-spotlight]::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(143,168,152,.15), transparent 72%);
  opacity:0; transition:opacity .35s var(--ease-out);
}
[data-spotlight]:hover::after { opacity:1; }
.prod__head { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; margin-bottom:16px; }
.prod__head h3 {
  /* tracks the 4-across card width so "Line of Credit" stays one line down to 921px */
  font-size:clamp(19px, 3.35vw - 11px, 29px); color:var(--racing); position:relative; padding-bottom:8px;
}
/* sage underline grows from center on card hover */
.prod__head h3::after {
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:0; height:2px; border-radius:2px; background:var(--sage);
  transition:width .35s var(--ease-out);
}
.prod:hover .prod__head h3::after { width:100%; }
.prod .icon--chip { width:40px; height:40px; border-radius:12px; overflow:hidden; }
.prod .icon--chip img { width:100%; height:100%; display:block; } /* icon PNG bakes the cream tile + margins */
.prod__lead {
  font-family:var(--font-d); font-weight:700; font-size:16.5px; letter-spacing:-.01em;
  color:var(--racing); line-height:1.35; max-width:220px;
  min-height:2.7em; display:flex; align-items:center; justify-content:center;
}
.prod__list {
  list-style:none; margin:auto; padding:0; /* auto block margins split the card's extra height evenly around the list */
  display:flex; flex-direction:column; gap:9px; width:min(158px, 100%); /* equal width in every card — left edges line up */
}
.prod__list li { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--slate); text-align:left; }
.prod__list li .icon { width:15px; height:15px; color:var(--racing); flex:none; display:flex; }
.prod__list li .icon svg { width:100%; height:100%; }
.prod__sub { font-size:14px; color:var(--slate); margin-top:6px; }
.prod__tags { display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start; gap:7px; margin-top:14px; min-height:64px; }
.prod .tag { font-size:11px; padding:3.5px 10px; }
.prod__ctas {
  display:flex; align-items:center; justify-content:center; gap:10px; margin-top:auto;
  width:calc(100% + (var(--pp) - var(--kl)) * 2); margin-inline:calc(var(--kl) - var(--pp)); /* divider stops at the keyline */
  padding:16px var(--pp) 0; border-top:1px solid var(--line);
}
.prod__list + .prod__ctas { margin-top:16px; }
.btn--outline { background:transparent; color:var(--racing); border:1.5px solid var(--racing); box-shadow:none; }
.btn--outline:hover { background:rgba(0,66,37,.06); box-shadow:none; }
/* MODES-OK: outline icon fluid (all 4 modes) — matches .arr curve */
.btn--outline .icon { width:clamp(14px, .5vw + 12px, 17px); height:clamp(14px, .5vw + 12px, 17px); color:currentColor; }
/* MODES-OK: outline-sm + prod-cta button padding fluid (all 4 modes); border compensates to match solid btn--sm */
.btn--sm.btn--outline { padding:clamp(8px, .5rem + .3vw, 10.5px) clamp(15.5px, 1rem + .75vw, 20.5px); }
.prod__ctas .btn { padding:clamp(8px, .5rem + .3vw, 10px) clamp(20px, 1.3rem + 1vw, 26px); font-size:clamp(12px, .78rem + .1vw, 13.5px); border-radius:9px; }
.prod__ctas .btn--outline {
  padding:8.5px 24.5px;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.prod__ctas .btn--outline:hover { background:var(--racing); color:var(--cream); border-color:var(--racing); box-shadow:none; }

/* ============================================================
   STEPS (01–02–03)
   ============================================================ */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px, 3vw, 40px); counter-reset:step; }
.step { position:relative; padding-top:18px; }
.step__no {
  font-family:var(--font-d); font-weight:800; font-size:clamp(56px, 6vw, 84px); line-height:1;
  color:var(--sage); opacity:.5; letter-spacing:-.03em; display:block; margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.step h3 { margin-bottom:8px; }
.step p { font-size:14.5px; color:var(--slate); max-width:300px; }
.felt .step p { color:var(--cream-dim); }

/* ============================================================
   MATCH CHECKLIST
   ============================================================ */
.match { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(36px,5vw,80px); align-items:center; }
.checks { list-style:none; display:grid; gap:14px; }
.checks li {
  display:flex; gap:16px; align-items:flex-start; padding:18px 22px;
  background:var(--card-dark); border:1px solid var(--line-dark); border-radius:var(--r-card);
}
.checks .icon { width:24px; height:24px; color:var(--sage); margin-top:1px; }
.checks b { display:block; font-family:var(--font-d); font-weight:600; font-size:15.5px; color:var(--cream); }
.checks span { font-size:13.5px; color:var(--cream-dim); line-height:1.55; }

/* light variant (product pages) */
.match--light .checks li { background:var(--white); border-color:var(--line); }
.match--light .checks .icon { color:var(--racing); }
.match--light .checks b { color:var(--ink); }
.match--light .checks span { color:var(--slate); }

/* home variant — dealt-card photo fan + single checklist card */
.sec-match {
  padding-block:calc(var(--pad-sec) * 0.7);
  /* same cream->sage wash as the funding options section */
  background:
    radial-gradient(46% 54% at 8% 14%, rgba(143,168,152,.22), transparent 68%),
    radial-gradient(40% 48% at 94% 30%, rgba(143,168,152,.18), transparent 66%),
    radial-gradient(72% 58% at 50% 24%, rgba(251,249,243,.9), transparent 72%),
    linear-gradient(180deg, #FBF9F3 0%, #F4F2E6 40%, #E8EDDD 74%, #FBF9F3 100%);
  background:
    radial-gradient(46% 54% at 8% 14%, rgba(143,168,152,.22), transparent 68%),
    radial-gradient(40% 48% at 94% 30%, rgba(143,168,152,.18), transparent 66%),
    radial-gradient(72% 58% at 50% 24%, rgba(251,249,243,.9), transparent 72%),
    linear-gradient(180deg in oklch, #FBF9F3 0%, #F4F2E6 40%, #E8EDDD 74%, #FBF9F3 100%);
}
.match--visual { grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.match-fan { position:relative; padding:6% 9% 7%; width:90%; margin-inline:auto; }
.match-fan img {
  position:relative; z-index:3; width:100%; height:auto; aspect-ratio:5/7; object-fit:cover; display:block;
  border-radius:5.2%/3.7%; transform:rotate(-2.5deg);
  box-shadow:0 34px 64px -24px rgba(0,51,29,.38), 0 6px 18px rgba(0,51,29,.10);
}
.match-fan::before { /* racing card fanned right */
  content:''; position:absolute; z-index:2; inset:6% 9% 7%;
  background:var(--racing); border-radius:5.2%/3.7%; transform:rotate(5.5deg) translate(6.5%,-1.5%);
}
.match-fan::after { /* sage outline card fanned left */
  content:''; position:absolute; z-index:1; inset:6% 9% 7%;
  border:1.5px solid var(--sage); border-radius:5.2%/3.7%; opacity:.8;
  transform:rotate(-10deg) translate(-5.5%,1%);
}
.qcard {
  background:var(--white); border:1px solid rgba(0,66,37,.07); border-radius:var(--r-panel);
  padding:28px 32px; margin-top:28px;
  box-shadow:0 24px 48px -18px rgba(0,51,29,.16), 0 4px 12px rgba(0,51,29,.05);
}
.qcard ul { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:16px 32px; align-items:start; }
.qcard li { display:flex; gap:12px; align-items:flex-start; }
.qcard .icon { width:21px; height:21px; color:var(--racing); flex-shrink:0; }
.qcard b { font-family:var(--font-d); font-weight:600; font-size:14.5px; line-height:1.45; color:var(--ink); text-wrap:pretty; }
.match--visual .hero__ctas { gap:16px; margin-top:28px; }

/* ============================================================
   TESTIMONIALS + STATS
   ============================================================ */
.quote-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.quote {
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-panel);
  padding:30px 30px 26px; display:flex; flex-direction:column; gap:18px;
  transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.quote:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.quote__stars { color:var(--racing); font-size:13px; letter-spacing:3px; }
.quote blockquote { font-size:16px; line-height:1.6; color:var(--ink); font-weight:500; flex:1; }
.quote figcaption { display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid var(--line); padding-top:16px; }
.quote figcaption span { font-size:13px; color:var(--slate); }
.quote-grid--2 { grid-template-columns:1fr 1fr; }
.quote__stars { display:flex; align-items:center; }
.sample-flag {
  margin-left:auto; font-family:var(--font-d); font-size:9.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sage-deep);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px; letter-spacing:.14em;
}

.statband { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:clamp(48px,6vw,72px); border-top:1px solid var(--line); padding-top:clamp(36px,4vw,52px); }
.stat b { display:block; font-family:var(--font-d); font-weight:800; font-size:clamp(30px,3.4vw,44px); letter-spacing:-.02em; color:var(--racing); line-height:1.1; }
.stat > span { font-size:13.5px; color:var(--slate); font-weight:500; display:block; margin-top:6px; }
.felt .stat b { color:var(--cream); }
.felt .stat > span { color:var(--sage); }

/* ============================================================
   CLIENT STORIES — felt stage: cream plaque card + review belt
   ============================================================ */
.sec-match { padding-bottom:calc(var(--pad-sec) * .5); } /* tighter hand-off into the stories stage */
.sec-stories {
  /* MODES-OK: bottom padding now matches top (belt__note removed) — symmetric on all 4 modes */
  background:radial-gradient(140% 120% at 50% -10%, var(--racing) 0%, var(--felt) 60%);
  border-bottom:1px solid var(--line-dark); /* seam so the felt CTA band below reads as its own act */
  padding-top:calc(var(--pad-sec) * .5);
  padding-bottom:calc(var(--pad-sec) * .5);
}
.story-card {
  /* MODES-OK: vertical padding cut ~20% (was clamp(28,3.5vw,44)); rating removed; content centered */
  position:relative; max-width:920px; margin-inline:auto; text-align:center;
  background:var(--cream); color:var(--ink); border-radius:24px;
  padding:clamp(22px, 2.8vw, 35px) clamp(22px, 4vw, 54px);
  display:flex; flex-direction:column; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 34px 80px -34px rgba(0,10,5,.7);
}
.story-card::before {
  content:''; position:absolute; inset:9px; border-radius:17px;
  border:1px solid rgba(0,66,37,.18); pointer-events:none; /* inset plaque line */
}
.sec-stories .story-card .eyebrow { justify-content:center; color:var(--sage-deep); margin-bottom:14px; }
.story-card h2 {
  color:var(--ink); letter-spacing:-.028em;
  margin-bottom:14px; text-wrap:balance; /* one line on desktop; balanced when it must wrap */
}
/* MODES-OK: original story-card title size applies ONLY <=700px (old look); >=701px the .sec-title
   token governs. Scoped so it can't out-source-order the token at wide widths. All 4 modes. */
@media (max-width:700px) { .story-card h2 { font-size:clamp(27px, 2.7vw, 38px); } }
.sec-stories .story-card .dot { color:var(--racing); }
/* MODES-OK: fluid font clamp (all 4 modes). Measure capped to ~62ch and centered for a clean reading
   line-length; text-wrap:pretty avoids orphans/widows. ch scales with the fluid font so no fixed px. */
.sec-stories .story-card .lede { color:#43503F; margin-inline:auto; max-width:62ch; font-size:clamp(14px, .5vw + 12.5px, 16px); line-height:1.62; text-wrap:pretty; }

.belt {
  margin-top:clamp(30px, 4vw, 46px); overflow:hidden; padding-block:6px; /* room for the hover lift */
  /* tight fade — wide masks smear the cream cards into streaks on the felt */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.belt__track { display:flex; width:max-content; animation:belt-drift 55s linear infinite; will-change:transform; }
.belt:hover .belt__track { animation-play-state:paused; }
.belt__set { display:flex; gap:22px; padding-right:22px; }
@keyframes belt-drift { to { transform:translateX(-50%); } }

.rev {
  /* MODES-OK: fluid clamps, all 4 modes. Cards -20% baked into the base (applies to main site, big burger, small burger, mobile uniformly — no 700px step); text/stars handled below */
  flex:0 0 auto; width:clamp(193.6px, 22.32vw + 65.6px, 223.2px); margin:0;
  display:flex; flex-direction:column; gap:clamp(4.8px, .3vw + 3.36px, 5.76px); align-items:center; text-align:center;
  background:var(--cream); color:var(--ink);
  border:1px solid rgba(0,51,29,.08); border-radius:16px;
  padding:clamp(8.8px, 1.16vw + 4.4px, 11.6px) clamp(13.6px, 1.6vw + 6.8px, 16.4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 24px 50px -28px rgba(0,10,5,.65);
  transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), background var(--t-med) var(--ease-out);
}
.rev:hover {
  background:var(--white); transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 30px 60px -28px rgba(0,10,5,.75);
}
.rev__top { display:flex; align-items:center; justify-content:center; }
/* Trustpilot-style star tiles in Trustpilot green (owner 2026-07-29, was review gold #FBBC04) */
.tp { display:inline-flex; gap:4px; }
/* MODES-OK: star tiles -1% (all 4 modes) */
.tp i {
  width:clamp(16.83px, .99vw + 11.88px, 19.8px); height:clamp(16.83px, .99vw + 11.88px, 19.8px); border-radius:3.5px; background:#00B67A;
  display:grid; place-items:center;
}
.tp i::before { content:'\2605'; color:#fff; font-size:clamp(11.88px, .69vw + 8.41px, 13.86px); line-height:1; translate:0 -0.5px; }
/* MODES-OK: quote -20% baked into base (all 4 modes); flex:1 stays dropped so no center gap */
.rev blockquote { font-size:clamp(10px, .28vw + 8.8px, 10.8px); line-height:1.6; font-weight:500; color:var(--ink); text-wrap:balance; }
.rev figcaption {
  /* MODES-OK: caption top-padding -20% (all 4 modes) */
  display:flex; flex-direction:column; align-items:center; gap:2px; width:100%;
  border-top:1px solid var(--line); padding-top:clamp(4.8px, .34vw + 3.44px, 6.08px);
}
/* MODES-OK: name & location/date -20% baked into base (all 4 modes) */
.rev figcaption b { font-family:var(--font-d); font-weight:600; font-size:clamp(9.6px, .28vw + 8.4px, 10.4px); color:var(--ink); }
.rev figcaption span { font-size:clamp(8.4px, .24vw + 7.44px, 9.2px); color:var(--slate); }

/* ============================================================
   PHOTO CARDS
   ============================================================ */
.photo-card { position:relative; border-radius:var(--r-panel); overflow:hidden; }
.photo-card img { width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; }
.photo-card--portrait img { aspect-ratio:4/4.6; }
.photo-card__cap {
  position:absolute; left:14px; right:14px; bottom:14px;
  background:rgba(13,20,15,.74); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--cream); font-size:12.5px; padding:10px 16px; border-radius:12px;
  border:1px solid rgba(245,240,225,.14);
}

/* floating mini-stat over photos */
.floater {
  position:absolute; z-index:2; background:var(--white); border-radius:16px; box-shadow:var(--shadow-lift);
  padding:16px 20px; border:1px solid var(--line);
}
.floater b { font-family:var(--font-d); font-weight:800; font-size:22px; color:var(--racing); display:block; line-height:1.1; font-variant-numeric:tabular-nums; }
.floater span { font-size:12px; color:var(--sage-deep); font-weight:500; }
/* keep the negative-offset badges from poking past the viewport once the container
   loses its side breathing room (≤1080px). Above this the -14px bleed has room. */
@media (max-width:1080px) {
  .floater { right:10px !important; left:auto !important; }
}

/* ============================================================
   SPLIT SECTIONS (product hero, prose)
   ============================================================ */
.split { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(36px,5vw,84px); align-items:center; }
.split--rev { grid-template-columns:minmax(0,5fr) minmax(0,6fr); }

.page-hero { padding-top:calc(var(--nav-h) + clamp(28px,4.5vh,56px)); }
.page-hero .h-display, .apply-hero .h-display { font-size:clamp(2.2rem, 1.2rem + 2.6vw, 3.6rem); }
.page-hero .eyebrow, .apply-hero .eyebrow { margin-bottom:9px; }
.page-hero .h-display { margin-bottom:22px; }
.page-hero__proof { display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:11px 18px; border:1px solid var(--line); border-radius:999px; background:var(--cream); font-family:var(--font-d); font-weight:600; font-size:13.5px; color:var(--racing); }
.page-hero__proof .icon { width:18px; height:18px; }

/* MODES-OK: blog coming-soon photo page (owner 2026-07-29: page cleared, photo only) —
   all spacing fluid clamp()/vh so it flows per-pixel across all 4 modes; --nav-h already
   mode-aware (bar+strip in burger modes), so the top offset clears the header stack everywhere */
.blog-soon { padding:calc(var(--nav-h) + clamp(24px,4.5vh,56px)) 0 clamp(40px,7vh,88px); }
.blog-soon__frame {
  margin:0; max-width:960px; margin-inline:auto;
  border-radius:var(--r-panel); overflow:hidden;
  border:1px solid var(--line); background:var(--white);
  box-shadow:0 24px 60px -32px rgba(15,42,31,.35);
}
.blog-soon__frame img { display:block; width:100%; height:auto; }
/* MODES-OK: overlay title fluid clamp, all 4 modes (owner 2026-07-29: cream title centered on the photo over a soft green scrim) */
.blog-soon__frame { position:relative; }
.blog-soon__title {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  background:rgba(15,42,31,.42);
  padding:0 clamp(16px, 4vw, 40px);
}
/* the caption carries the page h1: inherit the caption's box, keep the exact type */
.blog-soon__title h1 {
  margin:0;
  font-family:var(--font-d); font-weight:700; color:var(--cream);
  font-size:clamp(26px, 1.8rem + 2.6vw, 66px); line-height:1.1; letter-spacing:-.01em;
}

.blog-soon__title .dot { color:var(--sage); } /* MODES-OK: color only — racing dot vanishes on the dark scrim */

/* benefit cards */
.bene-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.bene { background:var(--white); border:1px solid var(--line); border-radius:var(--r-panel); padding:30px; transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.bene:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.bene .icon--chip { margin-bottom:20px; }
.bene h3 { margin-bottom:8px; }
.bene p { font-size:var(--fs-body); color:var(--slate); }

/* terms card — the big numbers panel */
.terms-card {
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-panel);
  padding:clamp(28px,4vw,44px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,3vw,36px);
}
.terms-card div { border-left:2px solid var(--sage); padding-left:20px; }
.terms-card b { display:block; font-family:var(--font-d); font-weight:800; font-size:clamp(24px,2.6vw,34px); color:var(--racing); letter-spacing:-.02em; line-height:1.15; }
.terms-card span { font-size:var(--fs-body-sm); color:var(--sage-deep); font-weight:500; }

/* prose block */
.prose h3 { margin:26px 0 10px; }
.prose p { color:var(--slate); margin-bottom:14px; max-width:640px; }
.prose ul { list-style:none; margin:14px 0; display:grid; gap:10px; }
.prose ul li { display:flex; gap:12px; align-items:flex-start; color:var(--slate); }
.prose ul .icon { width:19px; height:19px; margin-top:3px; }

/* mini-FAQ (product pages) */
.mini-faq { display:grid; gap:0; border-top:1px solid var(--line); }
.mini-faq details, .qa { border-bottom:1px solid var(--line); padding:24px 0; }
.qa h3 { margin-bottom:10px; font-size:clamp(1.25rem, 1.05rem + .7vw, 1.55rem); }
.qa p { color:var(--slate); max-width:720px; }
.qa p + p { margin-top:12px; }

/* inline text links inside running copy read as links */
.qa p a, .prose p a, p.lede a, .small a, #routerLine a {
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:rgba(0,66,37,.45);
}

/* screen-reader-only utility */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   LOC diagram — draw · repay · redraw
   ============================================================ */
.cycle { display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,36px); flex-wrap:wrap; }
.cycle__node {
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-card);
  padding:20px 26px; text-align:center; min-width:150px;
}
.cycle__node b { font-family:var(--font-d); font-weight:600; display:block; font-size:var(--fs-ui); }
.cycle__node span { font-size:var(--fs-body-sm); color:var(--slate); }
.cycle__arrow { width:34px; height:34px; color:var(--sage); flex:none; }
@media (max-width:640px) {
  .cycle { flex-direction:column; }
  .cycle__arrow { width:28px; height:28px; }
  .cycle__arrow svg { transform:rotate(90deg); } /* the reveal engine owns the span's transform */
  .cycle__node { width:100%; max-width:320px; }
}
.cycle__loop { width:44px; height:44px; color:var(--racing); }

/* ============================================================
   HOW IT WORKS — pinned fan + flow
   ============================================================ */
.fan-scene { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,5vw,80px); }
.fan-sticky { position:sticky; top:calc(var(--nav-h) + 40px); height:min(72vh, 560px); display:flex; align-items:center; justify-content:center; }
.fan { position:relative; width:min(300px, 80%); aspect-ratio:5/7; }
.fan__card {
  position:absolute; inset:0; border-radius:18px; background:var(--racing);
  border:1px solid rgba(245,240,225,.25); box-shadow:var(--shadow-float);
  display:grid; place-items:center; transform-origin:50% 88%;
  transition:transform .7s var(--ease-io), opacity .5s;
}
.fan__card::before { content:''; position:absolute; inset:10px; border:1px solid rgba(245,240,225,.3); border-radius:11px; }
.fan__card:nth-child(1) { z-index:3; }
.fan__card:nth-child(2) { z-index:2; }
.fan__card:nth-child(3) { z-index:1; }
.fan__card img { width:34%; height:auto; }
.fan__card .icon { width:32%; height:auto; color:var(--cream); }
.fan__card .icon svg { stroke-width:1.4; }
.fan__card .fan__label {
  position:absolute; bottom:18px; font-family:var(--font-d); font-weight:700; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cream);
}
.fan-steps { display:flex; flex-direction:column; gap:clamp(80px, 18vh, 160px); padding-block:10vh; }
.fan-step { max-width:460px; }
.fan-step .step__no { opacity:.45; }

/* after-you-apply flow */
.flow { list-style:none; display:grid; gap:0; max-width:760px; }
.flow li { position:relative; display:flex; gap:22px; padding-bottom:36px; }
.flow li:last-child { padding-bottom:0; }
.flow li::before {
  content:''; position:absolute; left:25px; top:52px; bottom:0; width:2px;
  background:var(--line);
}
.flow li:last-child::before { display:none; }
.flow .icon--chip { width:52px; height:52px; z-index:1; background:var(--white); }
.flow b { font-family:var(--font-d); font-weight:600; font-size:17px; display:block; margin-bottom:4px; }
.flow p { font-size:14.5px; color:var(--slate); max-width:520px; }
.flow .when { font-family:var(--font-d); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--sage-deep); display:block; margin-bottom:6px; }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.compare-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-panel); background:var(--white); }
.compare-scroll { position:relative; }
.compare-hint { display:none; }
@media (max-width:920px) {
  .compare-scroll::after {
    content:''; position:absolute; top:0; right:0; bottom:0; width:56px; pointer-events:none;
    background:linear-gradient(90deg, rgba(251,249,243,0), rgba(251,249,243,.92));
    border-radius:0 var(--r-panel) var(--r-panel) 0;
  }
  .compare-hint {
    display:flex; align-items:center; gap:8px; justify-content:flex-end;
    font-family:var(--font-d); font-size:12px; font-weight:600; color:var(--sage-deep); margin-top:12px;
  }
  .compare-hint svg { width:14px; height:14px; }
}
.compare { width:100%; border-collapse:collapse; min-width:820px; }
.compare th, .compare td { padding:18px 22px; text-align:left; font-size:var(--fs-body); border-bottom:1px solid var(--line); vertical-align:top; }
.compare thead th {
  font-family:var(--font-d); font-weight:600; font-size:15px; color:var(--ink);
  border-bottom:2px solid var(--line-strong); background:var(--cream);
}
.compare thead th:first-child { background:transparent; }
.compare tbody th { font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-deep); white-space:nowrap; }
.compare td { color:var(--slate); }
.compare td b { color:var(--racing); font-weight:700; font-variant-numeric:tabular-nums; }
.compare .best { display:inline-block; font-size:11.5px; font-weight:600; color:var(--racing); background:rgba(0,66,37,.07); border-radius:999px; padding:4px 12px; }
.compare tfoot td { padding:16px 22px; border-bottom:none; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-layout { display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:clamp(36px,5vw,72px); align-items:start; }
.faq-group { margin-bottom:clamp(44px,6vw,64px); }
.faq-group > h2 { padding-bottom:14px; border-bottom:2px solid var(--line-strong); margin-bottom:8px; }
.faq-rail { position:sticky; top:calc(var(--nav-h) + 30px); display:flex; flex-direction:column; gap:22px; }
.toc { list-style:none; display:flex; flex-direction:column; gap:2px; border-left:2px solid var(--line); }
.toc a { display:block; padding:9px 18px; font-family:var(--font-d); font-weight:500; font-size:var(--fs-body); color:var(--slate); border-left:2px solid transparent; margin-left:-2px; transition:color var(--t-fast), border-color var(--t-fast); }
.toc a:hover { color:var(--racing); }
.toc a.active { color:var(--racing); border-color:var(--racing); font-weight:600; }
.ask-card { background:var(--cream); border:1px solid var(--line); border-radius:var(--r-panel); padding:28px; }
.ask-card h3 { margin-bottom:8px; }
.ask-card p { font-size:var(--fs-body); color:var(--slate); margin-bottom:16px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(36px,5vw,72px); align-items:start; }
.line-card {
  display:flex; gap:18px; align-items:flex-start; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-card); padding:24px 26px; transition:border-color var(--t-fast), transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.line-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.line-card .icon--chip { width:46px; height:46px; }
.line-card > div { min-width:0; flex:1; }
.line-card a.big { overflow-wrap:anywhere; }
.line-card b { font-family:var(--font-d); font-weight:600; font-size:var(--fs-ui); display:block; }
.line-card a.big { font-family:var(--font-d); font-weight:700; font-size:var(--fs-num); color:var(--racing); font-variant-numeric:tabular-nums; }
.line-card span { font-size:var(--fs-body-sm); color:var(--slate); display:block; margin-top:2px; }

/* form */
.form { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form .full { grid-column:1 / -1; }
.field label { display:block; font-family:var(--font-d); font-weight:600; font-size:var(--fs-body-sm); margin-bottom:7px; color:var(--ink); }
.field input, .field select, .field textarea {
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid var(--line-strong); border-radius:12px; padding:13px 16px;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--racing); box-shadow:0 0 0 3px rgba(0,66,37,.12); }
.field input::placeholder, .field textarea::placeholder { color:#6F7A72; }

/* ============================================================
   APPLY
   ============================================================ */
.apply-hero { background:var(--felt); color:var(--cream); padding-top:calc(var(--nav-h) + clamp(36px,5vh,64px)); padding-bottom:clamp(36px,5vh,64px); }
.chooser { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:1080px) { .chooser { grid-template-columns:repeat(2,1fr); } }
.choose {
  position:relative; text-align:left; background:var(--white); border:1px solid var(--line); border-radius:var(--r-panel);
  padding:26px; cursor:pointer; transition:border-color var(--t-fast), transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
  display:flex; flex-direction:column; gap:8px;
}
.choose:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.choose[aria-pressed="true"] { border-color:var(--racing); box-shadow:0 0 0 2px var(--racing) inset, var(--shadow-lift); }
.choose .icon--chip { margin-bottom:8px; }
.choose b { font-family:var(--font-d); font-weight:600; font-size:var(--fs-ui); }
.choose span { font-size:var(--fs-body-sm); color:var(--slate); line-height:1.5; }
.choose .which { font-family:var(--font-d); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-deep); margin-top:10px; }
.choose--wide { grid-column:1 / -1; flex-direction:row; align-items:center; gap:22px; background:var(--cream); }
.choose--wide .icon--chip { margin:0; flex:none; background:var(--white); }
.choose--wide > div { display:flex; flex-direction:column; gap:4px; }
@media (max-width:920px) { .choose--wide { flex-direction:column; align-items:flex-start; } }

.embed-shell { margin-top:clamp(36px,5vw,56px); }
.embed-frame { background:var(--white); border:1px solid var(--line); border-radius:var(--r-panel); overflow:hidden; min-height:640px; position:relative; }
.embed-frame iframe { display:block; width:100%; min-height:640px; border:none; }
.embed-pending { position:absolute; inset:0; display:grid; place-items:center; padding:40px; text-align:center; }
.embed-pending .inner { max-width:420px; display:grid; gap:14px; justify-items:center; }

/* shimmer */
.shimmer { position:relative; overflow:hidden; background:var(--mist); }
.shimmer::after {
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation:shimmer 1.6s infinite;
}
@keyframes shimmer { to { transform:translateX(100%); } }

/* ============================================================
   CTA BAND (felt) + footer
   ============================================================ */
.cta-band { background:var(--felt); color:var(--cream); overflow:hidden; }
.cta-band .mark-ghost {
  position:absolute; right:5%; top:50%; translate:0 -50%; rotate:-8deg;
  width:min(280px,24vw); opacity:.07; pointer-events:none;
}
.cta-band h2 { color:var(--cream); font-size:clamp(1.9rem,3.8vw,3.25rem); }
.cta-band__in { position:relative; display:grid; gap:22px; max-width:680px; }
.cta-band__ctas { display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:10px; }

/* ============================================================
   DEAL PANEL — light cream-green final CTA (home)
   three steps synced to a 3D phone preview
   ============================================================ */
.sec-deal {
  /* MODES-OK: section padding -15% after phone/circle shrink so the panel isn't taller than the content needs (all 4 modes) */
  --hold:4.4s; /* keep in step with HOLD in main.js */
  background:linear-gradient(178deg, var(--white) 0%, #EFF3EA 46%, #E4EBDE 100%);
  overflow:clip;
  padding-block:clamp(51px, 3.4rem + 1.7vw, 81.6px); /* tighter than --pad-sec: closing panel fits one viewport */
}
.deal-orb { position:absolute; border-radius:50%; pointer-events:none; }
.deal-orb--a {
  /* MODES-OK: glow pulled inward + down and sized down ~12% to follow the smaller phone instead of floating in empty top-right space (all 4 modes) */
  width:clamp(264px, 26vw, 422px); aspect-ratio:1; right:-1%; top:11%;
  background:radial-gradient(circle at 34% 30%, rgba(143,168,152,.45), rgba(143,168,152,.1) 60%, transparent 72%);
}
.deal-orb--b {
  width:clamp(150px, 14vw, 220px); aspect-ratio:1; right:36%; bottom:3%;
  background:radial-gradient(circle at 40% 36%, rgba(0,66,37,.14), transparent 70%);
}
.deal-ghost {
  position:absolute; left:-44px; bottom:-64px; width:min(300px, 26vw);
  opacity:.05; rotate:10deg; pointer-events:none;
}
.deal {
  display:grid; grid-template-columns:auto auto; justify-content:center;
  gap:clamp(44px, 8vw, 116px); align-items:center; position:relative;
}
/* single-line headline: sized to the copy column so it never wraps on desktop */
.deal__copy h2 { font-size:clamp(29px, 2.7vw, 37px); letter-spacing:-.028em; }

/* steps */
.deal-steps { list-style:none; margin-top:clamp(26px, 3.5vw, 38px); display:grid; position:relative; }
.deal-steps::before {
  /* MODES-OK: connector line offsets scaled -30% to stay centered on the smaller circles (all 4 modes) */
  content:''; position:absolute; left:16.1px; top:21px; bottom:23.8px; width:2px;
  background:var(--line-strong);
}
.deal-step {
  /* MODES-OK: circles -30% -> column, gap, and vertical padding scaled to match; tightens the gaps between steps (all 4 modes) */
  position:relative; display:grid; grid-template-columns:33.6px 1fr; gap:12.6px; align-items:center;
  padding:11.9px 14px 11.9px 0; cursor:pointer; border-radius:14px;
}
.deal-step__no {
  /* MODES-OK: 1/2/3 circles -30% (48->33.6, font 19->13.3, outline 6->4.2) — all 4 modes */
  position:relative; z-index:1; width:33.6px; height:33.6px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-d); font-weight:700; font-size:13.3px;
  background:#DCE6D8; color:var(--racing); outline:4.2px solid transparent;
  transition:background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out),
             transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-out);
}
.deal-step__body { display:grid; }
.deal-step__body b {
  font-family:var(--font-d); font-weight:600; font-size:clamp(19px, 1.65vw, 22px);
  letter-spacing:-.01em; color:var(--ink); transition:color var(--t-fast);
}
/* MODES-OK: meter left offset follows the smaller circle+gap (66->46.2), all 4 modes */
.deal-step__meter { position:absolute; left:46.2px; right:14px; bottom:5px; height:2px; border-radius:2px; overflow:hidden; }
.deal-step__meter::after { content:''; display:block; height:100%; width:0; background:var(--racing); opacity:0; }
.deal-step.is-active .deal-step__no {
  background:var(--racing); color:var(--cream); transform:scale(1.07);
  box-shadow:0 12px 24px -10px rgba(0,66,37,.55);
}
.deal-step.is-active .deal-step__body b { color:var(--racing); }
.deal-step.is-active .deal-step__meter { background:rgba(0,66,37,.1); }
.deal-step.is-active .deal-step__meter::after { opacity:1; animation:deal-meter var(--hold) linear forwards; }
@keyframes deal-meter { to { width:100%; } }

.deal__ctas { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:clamp(22px, 3vw, 32px); }

/* the scene: perspective stage, tilt group, floats */
.deal-scene { position:relative; perspective:1400px; display:grid; justify-items:center; zoom:.88; }
.deal-scene::before {
  content:''; position:absolute; bottom:-38px; left:50%; translate:-50% 0;
  width:64%; height:46px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,25,14,.3), transparent 68%); filter:blur(6px);
}
.deal-tilt { position:relative; transform-style:preserve-3d; transform:rotateY(-12deg) rotateX(4deg); will-change:transform; }

.dphone {
  /* MODES-OK: fluid phone width, all 4 modes. Caps at 302px on desktop, shrinks smoothly on burger/small-burger/mobile so the device fits the narrower single-column layouts instead of overwhelming them. Bezel radius + padding scale with the width so the device stays proportional as one rigid unit. */
  position:relative; width:clamp(200px, 34vw, 302px); border-radius:clamp(30px, 5.2vw, 46px); padding:clamp(7px, 1.25vw, 11px);
  background:linear-gradient(160deg, #14432C 0%, #00331D 58%, #052717 100%);
  box-shadow:
    inset 0 1px 1px rgba(245,240,225,.35),
    inset 0 -1px 2px rgba(0,0,0,.4),
    0 60px 90px -40px rgba(0,25,14,.5),
    0 24px 44px -24px rgba(0,25,14,.45);
}
.dphone::after { /* glass sheen */
  /* MODES-OK: inset+radius track the fluid phone padding/radius (all 4 modes) */
  content:''; position:absolute; inset:clamp(7px, 1.25vw, 11px); border-radius:clamp(24px, 4vw, 36px); pointer-events:none; z-index:5;
  background:linear-gradient(118deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 20%, transparent 34%);
}
.dphone__notch {
  /* MODES-OK: notch scales with the phone (all 4 modes) */
  position:absolute; top:clamp(15px, 2.4vw, 21px); left:50%; translate:-50% 0; width:clamp(60px, 9.5vw, 84px); height:clamp(14px, 2.15vw, 19px);
  border-radius:999px; background:#052717; z-index:4;
}
.dphone__screen {
  /* MODES-OK: screen radius tracks the phone (all 4 modes) */
  position:relative; border-radius:clamp(24px, 4vw, 36px); overflow:hidden; background:var(--white);
  display:flex; flex-direction:column; aspect-ratio:9 / 18.6;
}
.dphone__bar { display:flex; justify-content:space-between; align-items:center; padding:15px 24px 0; }
.dphone__bar .num { font-size:11px; font-weight:600; color:var(--ink); opacity:.7; }
.dphone__batt { position:relative; width:21px; height:11px; border:1px solid rgba(20,26,22,.4); border-radius:3.5px; display:block; }
.dphone__batt::after { content:''; position:absolute; right:-3.5px; top:3px; width:2px; height:4px; border-radius:0 2px 2px 0; background:rgba(20,26,22,.4); }
.dphone__batt i { position:absolute; inset:1.5px; width:72%; border-radius:1.5px; background:rgba(20,26,22,.55); }
.dphone__stage { position:relative; flex:1; }
.dphone__dots { display:flex; gap:7px; justify-content:center; padding:12px 0 16px; }
.dphone__dots i { width:6px; height:6px; border-radius:999px; background:rgba(0,66,37,.16); transition:background .3s, width .3s var(--ease-out); }
.dphone__dots i.is-on { background:var(--racing); width:18px; }

/* screens crossfade */
.dscreen {
  position:absolute; inset:0; padding:18px 20px 12px; display:flex; flex-direction:column;
  opacity:0; transform:translateY(16px) scale(.985); pointer-events:none;
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.dscreen.is-on { opacity:1; transform:none; transition-delay:.14s; }
.dscreen__cap {
  font-family:var(--font-d); font-weight:700; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sage-deep); margin-bottom:12px;
}

/* screen 1 — application */
.dbar { height:5px; border-radius:99px; background:rgba(0,66,37,.1); overflow:hidden; margin-bottom:16px; }
.dbar i { display:block; height:100%; width:72%; border-radius:99px; background:var(--racing); }
.is-on .dbar i { animation:dbar-fill 1.2s var(--ease-out) both .35s; }
@keyframes dbar-fill { from { width:8%; } }
.dfield {
  position:relative; border:1px solid var(--line); border-radius:12px; padding:9px 14px;
  margin-bottom:10px; background:var(--cream); display:grid; gap:1px;
}
.dfield > span:first-child { font-size:9.5px; color:var(--sage-deep); font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.dfield b { font-size:14px; color:var(--ink); font-weight:600; display:flex; align-items:center; }
.dfield .icon { position:absolute; right:12px; top:50%; translate:0 -50%; width:15px; height:15px; color:var(--racing); }
.dfield.is-live { border-color:var(--racing); background:var(--white); box-shadow:0 0 0 3px rgba(0,66,37,.08); }
.dcaret { display:inline-block; width:2px; height:15px; margin-left:2px; background:var(--racing); animation:dblink 1.1s steps(1) infinite; }
@keyframes dblink { 50% { opacity:0; } }
.dbtn {
  display:block; margin-top:12px; padding:12px 10px; border-radius:12px; text-align:center;
  background:var(--racing); color:var(--cream);
  font-family:var(--font-d); font-weight:600; font-size:12.5px; letter-spacing:.01em;
  box-shadow:0 10px 18px -10px rgba(0,66,37,.55);
}
.dhint { display:flex; gap:6px; align-items:center; font-size:10.5px; color:var(--sage-deep); margin-top:auto; }
.dhint .icon { width:13px; height:13px; }

/* screen 2 — options */
.damt { font-family:var(--font-d); font-weight:700; font-size:33px; letter-spacing:-.02em; color:var(--racing); line-height:1; }
.dsub { font-size:11px; color:var(--slate); margin:5px 0 14px; }
.dopt {
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; margin-bottom:9px; background:var(--white);
}
.dopt__radio { width:15px; height:15px; border-radius:50%; border:2px solid var(--line-strong); flex:none; }
.dopt.is-pick { border-color:var(--racing); box-shadow:0 0 0 3px rgba(0,66,37,.08); }
.dopt.is-pick .dopt__radio { border-color:var(--racing); background:radial-gradient(circle, var(--racing) 42%, transparent 48%); }
.dopt__txt { display:grid; }
.dopt__txt b { font-family:var(--font-d); font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.3; white-space:nowrap; }
.dopt__txt span { font-size:10.5px; color:var(--slate); white-space:nowrap; }
.dopt__tag {
  margin-left:auto; font-family:var(--font-d); font-size:8.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--racing); background:rgba(143,168,152,.22); border-radius:99px; padding:4px 8px;
  white-space:nowrap; flex:none;
}
.dmeta { margin-top:10px; }
.dadvisor { display:flex; align-items:center; gap:10px; margin-top:auto; border-top:1px solid var(--line); padding-top:12px; }
.dadvisor__ava {
  width:30px; height:30px; border-radius:50%; background:var(--racing); color:var(--cream); flex:none;
  display:grid; place-items:center; font-family:var(--font-d); font-weight:700; font-size:12px;
}
.dadvisor__txt { display:grid; }
.dadvisor__txt b { font-size:11.5px; color:var(--ink); line-height:1.35; }
.dadvisor__txt span { font-size:10.5px; color:var(--slate); }
.dadvisor .icon { margin-left:auto; width:16px; height:16px; }

/* screen 3 — funded */
.dscreen--funded { align-items:center; text-align:center; justify-content:center; }
.dcheck { width:72px; height:72px; color:var(--racing); margin-bottom:10px; }
.dcheck svg { width:100%; height:100%; }
.dcheck circle { stroke-dasharray:185; stroke-dashoffset:185; }
.dcheck path { stroke-dasharray:46; stroke-dashoffset:46; }
.is-on .dcheck circle { animation:ddraw .7s var(--ease-io) forwards .15s; }
.is-on .dcheck path { animation:ddraw .45s var(--ease-out) forwards .8s; }
@keyframes ddraw { to { stroke-dashoffset:0; } }
.dfunded__t { font-family:var(--font-d); font-weight:600; font-size:16.5px; color:var(--ink); margin-bottom:12px; }
.dwire { display:flex; justify-content:space-between; gap:12px; width:100%; font-size:11.5px; padding:7px 2px; border-bottom:1px dashed var(--line); }
.dwire span { color:var(--slate); }
.dwire b { color:var(--ink); font-weight:600; }
.dscreen--funded .funded-pill { margin-top:16px; }

/* floating glass stat cards, lifted off the phone in Z */
.deal-float {
  position:absolute; display:grid; gap:2px; padding:13px 18px; border-radius:16px;
  background:rgba(251,249,243,.92); border:1px solid var(--line);
  box-shadow:var(--shadow-lift); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.deal-float b { font-family:var(--font-d); font-weight:800; font-size:20px; color:var(--racing); line-height:1.1; font-variant-numeric:tabular-nums; }
.deal-float span { font-size:11.5px; color:var(--sage-deep); font-weight:500; white-space:nowrap; }
/* MODES-OK: no .deal-float--rate rule/keyframe — the "5.0 rated on Google" chip is removed from the HTML for all sizes (owner 2026-07) */
.deal-float--wire { right:-54px; top:15%; transform:translateZ(70px); animation:dfloat-a 7s ease-in-out infinite alternate; }
@keyframes dfloat-a { from { transform:translateZ(70px) translateY(-6px); } to { transform:translateZ(70px) translateY(9px); } }

/* MODES-OK: per-break sizing for the deal phone + step text.
   zoom on .deal-scene shrinks the phone as one rigid unit AND reclaims layout space (no gap).
   Main site + big burger (>=701px): phone -30% (zoom .88 -> .616), step text -20%.
   Small burger + mobile (<=700px): phone -40% (zoom .88 -> .528), step text -30%. */
@media (min-width:701px) {
  .deal-scene { zoom:.616; }
  .deal-step__body b { font-size:clamp(15.2px, 1.32vw, 17.6px); } /* -20% of clamp(19,1.65vw,22) */
}
@media (max-width:700px) {
  .deal-step__body b { font-size:clamp(13.3px, 1.155vw, 15.4px); } /* -30% of clamp(19,1.65vw,22) */

  /* MODES-OK: small burger + mobile — phone floats on the RIGHT, overlapping the step connector/meter
     lines, instead of stacking below. Copy stays in flow on the left; headline forced to one line. */
  .deal { position:relative; min-height:clamp(360px, 62vw, 430px); }
  .deal__copy { max-width:none; }
  /* headline stays on ONE line down to 390px */
  .deal__copy h2 { white-space:nowrap; font-size:clamp(19px, 5.4vw, 30px); }
  /* the step text stays clear of the phone; give the copy room on the left */
  .deal-step__body { padding-right:clamp(96px, 34vw, 150px); }
  /* MODES-OK: small burger + mobile — phone floated over the right, pulled ~20% further left so the $50,000 chip clears the headline; kept fully on-screen */
  .deal-scene {
    /* MODES-OK: small burger + mobile — phone nudged down 10% (owner 2026-07): top clamp terms all ×1.1 */
    position:absolute; right:clamp(24px, 8vw, 56px); top:clamp(105.6px, 33vw, 209px); margin-top:0;
    zoom:.46; z-index:0; pointer-events:none;
  }
  /* MODES-OK: small burger + mobile — shorten the horizontal meter line so it ends cleanly before the floating phone (no line slicing the phone UI) */
  .deal-step__meter { right:clamp(139px, 40vw, 181px); }
  /* MODES-OK: small burger + mobile — hide the $50,000 wired chip (the rate chip is removed from the HTML for all sizes) */
  .deal-float--wire { display:none; }
  /* steps + their lines sit above the floating phone so text stays readable */
  .deal-steps { position:relative; z-index:1; }
}

/* MODES-OK: at <=700px the copy is single-column and the phone floats absolutely on the right (see the overlap block above), so no stacked phone row/gap is needed; ghost hidden on small screens */
@media (max-width:700px) {
  .deal { grid-template-columns:1fr; gap:0; }
  .deal-ghost { display:none; }
}
@media (max-width:640px) {
  /* MODES-OK: mobile step overrides scaled -30% to match the new base circle size (40->28, etc.) */
  .deal-step { grid-template-columns:28px 1fr; gap:9.8px; padding-right:0; }
  .deal-step__no { width:28px; height:28px; font-size:11.2px; }
  .deal-steps::before { left:13.3px; }
  .deal-step__meter { left:37.8px; right:0; }
  .deal__ctas .btn { width:100%; }
  /* MODES-OK: float chips removed/hidden on small screens (rate deleted for all sizes, wire hidden <=700), so their <=640 corner-pin overrides are gone */
  .deal-orb--a { right:-30%; }
}

/* ============================================================
   FAQ CARD — home: one white floating card, five straight
   answers, one open at a time. Native <details>. All-modes
   fluid: every value is a token or clamp (both ends defined),
   so it scales per-pixel across every width like the rest.
   ============================================================ */
.sec-faqcard {
  background:var(--cream); /* MODES-OK: color-only, all 4 modes */
  padding-block:clamp(46px, 3rem + 1.8vw, 84px);
}
.faqcard {
  /* MODES-OK: slimmer card, all 4 modes — 760px cap on wide widths; below the cap it's
     container-bound and scales per-pixel with the fluid gutter/padding already in play. */
  max-width:760px; margin-inline:auto;
  background:var(--white); /* MODES-OK: color-only, all 4 modes */
  border:1px solid var(--line);
  border-radius:clamp(16px, 12px + .9vw, 24px);
  box-shadow:0 2px 6px rgba(0,66,37,.05), 0 30px 60px -30px rgba(0,18,10,.28);
  padding:clamp(22px, 1rem + 2.6vw, 44px) clamp(20px, .8rem + 2.4vw, 46px);
  overflow:clip;
}
.faqcard__head { text-align:center; margin-bottom:clamp(18px, 1rem + 1vw, 30px); }
/* MODES-OK: title −15% and pinned to ONE line across every width, all 4 modes. The slope
   (4vw − 2.2px) tracks the card's inner width so the single line always fits from ~340px up with
   10–35px of margin; nowrap enforces it. Cap 1.6rem (25.6px) is ~15% under the un-slimmed h2 size. */
.faqcard__head h2 {
  margin-bottom:0;
  /* MODES-OK: title +10%, all 4 modes — both slope terms x1.10 (4vw−2.2 -> 4.4vw−2.42) and cap x1.10 (1.6->1.76rem); floor x1.10 (12->13.2). */
  font-size:clamp(13.2px, 4.4vw - 2.42px, 1.76rem);
  /* nowrap removed: at +10% the one-line fit is lost below ~880px and would clip; allow a graceful 2-line wrap instead. */
  text-wrap:balance;
}
/* MODES-OK: small-burger (481–700) + mobile (≤480) — heading forced to ONE line inside the card.
   Slope 2.9vw−0.44px tracks the card's inner width so the single line fits with ~0px spare from
   ~340px up (verified by rendered measurement at 360/420/481/560/684); cap 15px, floor 10px. nowrap
   enforces the single line. This is necessarily smaller than the wide-mode +10% — a fixed string
   can't stay both larger AND one-line as the container narrows. */
@media (max-width:700px) {
  .faqcard__head h2 { font-size:clamp(10px, 2.9vw - 0.44px, 15px); white-space:nowrap; }
}

.faqcard__list { display:grid; }

/* one question row */
.faqq { border-top:1px solid var(--line); }
.faqq:first-child { border-top:0; }
.faqq summary {
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:clamp(12px, .6rem + 1vw, 22px);
  padding:clamp(14px, .7rem + .9vw, 22px) 0;
  font-family:var(--font-d); font-weight:600; letter-spacing:-.01em;
  color:var(--felt); line-height:1.3;
  transition:color var(--t-fast) var(--ease-out);
}
.faqq summary::-webkit-details-marker { display:none; }
.faqq summary:hover { color:var(--racing); }
.faqq[open] summary { color:#0E8A4F; } /* green when open, like the reference */
/* MODES-OK: question text −25%, all 4 modes — both clamp terms scaled from the original
   (.98→.735rem floor, .92rem+.35vw→.69rem+.2625vw slope, 1.18→.885rem cap) so it stays fluid. */
.faqq__q { font-size:clamp(.735rem, .69rem + .2625vw, .885rem); flex:1; }

/* chevron: pure-CSS caret, rotates on open */
.faqq__ico {
  flex:0 0 auto; width:clamp(13px, 11px + .4vw, 16px); height:clamp(13px, 11px + .4vw, 16px);
  position:relative; margin-right:2px;
  transition:transform var(--t-fast) var(--ease-out);
}
.faqq__ico::before {
  content:''; position:absolute; inset:0; margin:auto;
  width:64%; height:64%;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-18%) rotate(45deg); /* points down */
}
.faqq[open] .faqq__ico { transform:rotate(180deg); }

/* answer */
.faqq__a {
  overflow:hidden;
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--t-med) var(--ease-out);
}
.faqq[open] .faqq__a { grid-template-rows:1fr; }
.faqq__a > p {
  min-height:0; /* required for the 0fr→1fr grid trick to clip */
  /* MODES-OK: answer text −25%, all 4 modes — both terms scaled from --fs-body
     (.9→.675rem floor, .84rem+.28vw→.63rem+.21vw slope, 1.02→.765rem cap), stays fluid. */
  color:var(--slate); font-size:clamp(.675rem, .63rem + .21vw, .765rem); line-height:1.7;
  max-width:64ch;
  padding:0 clamp(24px, 18px + .8vw, 34px) clamp(16px, .7rem + .8vw, 24px) 0;
  margin:0;
}
.faqq__a a { color:var(--racing); text-decoration:underline; text-underline-offset:2px; }
.faqq__a a:hover { color:#0E8A4F; }

/* reduced motion: no row animation, just show/hide */
@media (prefers-reduced-motion:reduce) {
  .faqq__a, .faqq__ico { transition:none; }
}

.faqcard__foot { text-align:center; margin-top:clamp(18px, 1rem + 1vw, 30px); }

/* ============================================================
   GET IN TOUCH — home: emerald band, reach-us (left) + qualify
   form card (right). Reuses .felt, .ticks, .field, .icon--chip.
   All-modes fluid: every value is a token or clamp (both ends).
   ============================================================ */
.sec-touch { padding-block:clamp(48px, 3rem + 2vw, 92px); }
/* MODES-OK: title is PER-PIXEL fluid across every width (all 4 modes) — NOT the global --fs-h2,
   which plateaus (caps ~1200px, flat thereafter). This clamp scales continuously from ~22px@360
   to ~43px@1440 and only caps (2.75rem) beyond ~1470px, so there is no flat band on any real device. */
.touch__title { text-align:center; color:var(--cream); margin-bottom:clamp(26px, 1.4rem + 1.6vw, 46px); }
/* MODES-OK: <=700px keeps the original touch-title size (old mobile look); >=701px uses .sec-title token. */
@media (max-width:700px) { .touch__title { font-size:clamp(1.1rem, .827rem + 1.711vw, 2.42rem); } }
.sec-touch .dot { color:var(--sage); }
/* MODES-OK: two-column on wide widths (main site + big burger), single column at/below 700px
   (small burger + mobile). Fluid gap; card and info both scale per-pixel. */
.touch {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px, 2rem + 3vw, 72px); align-items:start;
}
/* ---- WHOLE CONTAINER is PER-PIXEL fluid, all 4 modes (owner lock 2026-07): every text size,
   field, button, icon, radius AND animation (durations + reveal distances) scales continuously.
   Nothing inherits a shared token that plateaus (--fs-lede/body/eyebrow/ui and --fs-h2 all cap
   ~1030–1200px, so they're re-declared here with clamps that stay live through ~1440px, capping
   only beyond). See [[hcc-title-fluidity-lock]]. Scoped to .sec-touch so other pages are untouched. */

/* fluid animation timing + distance, scoped to this container */
.sec-touch {
  --tt-fast:clamp(.16s, .12s + .3vw, .26s);   /* was fixed --t-fast .22s */
  --tt-med:clamp(.32s, .24s + .6vw, .52s);    /* was fixed --t-med .45s */
  --tt-slide:clamp(20px, 12px + 1.4vw, 40px); /* reveal slide distance (was fixed 34px) */
}
.sec-touch [data-reveal] { transition:opacity clamp(.5s,.4s+.7vw,.9s) var(--ease-out), transform clamp(.5s,.4s+.7vw,.9s) var(--ease-out); transition-delay:var(--d,0s); }
.sec-touch [data-reveal]:not([data-reveal="scale"]):not(.is-inview) { transform:translateY(var(--tt-slide)); }

/* MODES-OK: all clamps below stay live through ~1450px before capping (all 4 modes), so no element
   plateaus on any real desktop. Owner lock: entire container per-pixel fluid — text, fields, button,
   icons, radii, animation timing + distance. See [[hcc-title-fluidity-lock]]. */
.touch__lede {
  color:var(--cream-dim); line-height:1.6; max-width:34ch; font-weight:500; /* ~20% bolder than the default 400 */
  font-size:clamp(.8rem, .749rem + .36vw, 1.075rem);     /* MODES-OK: -20% content scale, live to ~1450px, all 4 modes */
  margin-bottom:clamp(22px, 1.2rem + 1.4vw, 36px);
}

/* reach-us list */
.touch__reach { list-style:none; display:grid; gap:clamp(14px, .8rem + .8vw, 22px); }
.touch__reach li { display:flex; align-items:center; gap:clamp(12px, .6rem + .8vw, 18px); }
.touch__reach .icon--chip {
  flex:0 0 auto;
  width:clamp(20px, 15.19px + 1.336vw, 34.56px); height:clamp(20px, 15.19px + 1.336vw, 34.56px); /* MODES-OK owner 2026-07-27: steeper slope, chips keep shrinking at low px (old floor froze at 28.8 below ~666px); live 360-1450, all 4 modes */
  background:var(--card-dark); border:1px solid var(--line-dark); border-radius:clamp(5.5px, 3.51px + .552vw, 11.52px); /* MODES-OK */
  display:flex; align-items:center; justify-content:center; line-height:0; transition:background var(--tt-fast), border-color var(--tt-fast);
}
/* icon flex-centered inside the chip so the glyph sits dead-center (grid place-items left it optically high) */
.touch__reach .icon--chip .icon { display:flex; align-items:center; justify-content:center; width:clamp(8.4px, 6.42px + .55vw, 14.4px); height:clamp(8.4px, 6.42px + .55vw, 14.4px); color:var(--sage); } /* MODES-OK steeper glyph slope, keeps chip ratio, all 4 modes */
.touch__reach .icon--chip .icon svg { width:100%; height:100%; display:block; }
.touch__reach-t { display:grid; min-width:0; }
.touch__reach-t b { font-family:var(--font-d); font-weight:600; font-size:clamp(.496rem, .464rem + .144vw, .592rem); letter-spacing:.16em; text-transform:uppercase; color:var(--sage); } /* MODES-OK: -20% content scale, all 4 modes */
.touch__reach-t a, .touch__reach-v {
  font-family:var(--font-d); font-weight:500; font-size:clamp(.8rem, .722rem + .389vw, 1.075rem); /* MODES-OK: weight 600->500 (less bold); -20% content scale, live to ~1450px, all 4 modes */
  color:var(--cream); overflow-wrap:anywhere; transition:color var(--tt-fast);
}
.touch__reach-t a:hover { color:var(--sage); }

/* trust ticks — re-declared fluid (base .ticks li font/gap/icon are fixed px) */
.touch__ticks { margin-top:clamp(22px, 1.2rem + 1.4vw, 34px); padding-top:clamp(20px, 1rem + 1.2vw, 28px); border-top:1px solid var(--line-dark); grid-template-columns:1fr; gap:clamp(11px, .6rem + .5vw, 15px); }
.touch__ticks li { gap:clamp(8px, .4rem + .4vw, 11.2px); font-size:clamp(.64rem, .592rem + .24vw, .776rem); } /* MODES-OK: -20% content scale, all 4 modes */
.touch__ticks .icon { width:clamp(13.6px, 12px + .24vw, 16.8px); height:clamp(13.6px, 12px + .24vw, 16.8px); } /* MODES-OK: -20%, all 4 modes */

/* form card */
.touch__card {
  background:var(--white); border:1px solid rgba(245,240,225,.14); border-radius:clamp(16px, 11px + 1vw, 26px);
  box-shadow:0 40px 90px -34px rgba(0,18,10,.6), 0 10px 30px -14px rgba(0,40,22,.4);
  /* MODES-OK owner 2026-07-27: skinnier card frame ("make the border skinnier") — sides/top
     ~28px cap down to 10px at 360, bottom 18px down to 8px; helps the 2-col fit at small px. All 4 modes. */
  padding:clamp(10px, 4.06px + 1.65vw, 28px) clamp(10px, 4.06px + 1.65vw, 28px) clamp(8px, 3.2px + 1.06vw, 18px);
}
/* heading sits directly above the form now (subtitle removed) — add the space the sub used to hold */
.touch__card h3 { font-family:var(--font-d); font-weight:600; letter-spacing:-.02em; color:var(--felt); font-size:clamp(.944rem, .768rem + .807vw, 1.5rem); line-height:1.15; margin-bottom:clamp(14px, .9rem + .8vw, 22px); } /* MODES-OK: -20% content scale, live to ~1450px, all 4 modes */
.touch__card .dot { color:var(--sage-deep); }
.touch__form { gap:clamp(14px, .7rem + .8vw, 18px); }
/* fields per-pixel fluid: base .field uses fixed 15px font, 13px 16px padding, 12px radius */
.touch__form .field label { font-size:clamp(.686rem, .642rem + .229vw, .818rem); margin-bottom:clamp(4px, .24rem + .16vw, 6.4px); } /* MODES-OK: label +10% (text above field boxes); all 4 modes */
.touch__form input, .touch__form select { /* MODES-OK: -20% content scale, thinner boxes (pad-y -25%); font/padding/radius live to ~1450px, all 4 modes */
  font-size:clamp(.72rem, .65rem + .308vw, .93rem);
  padding:clamp(6.6px, .376rem + .248vw, 9.6px) clamp(10.4px, .56rem + .56vw, 15.2px);
  border-radius:clamp(7.2px, 4.8px + .48vw, 11.2px);
}
.touch__btn { width:100%; justify-content:center; margin-top:clamp(2px, .3vw, 6px); border-radius:clamp(7.2px, 4.8px + .48vw, 11.2px); font-size:clamp(.736rem, .67rem + .33vw, .97rem); padding:clamp(9.2px, .8vw + 6.4px, 12.8px) clamp(16px, 1.76vw + 11.2px, 24px); transition:transform var(--tt-fast) var(--ease-out), box-shadow var(--tt-fast) var(--ease-out), background var(--tt-fast); } /* MODES-OK: -20% content scale (incl. base .btn padding), live to ~1450px, all 4 modes */
/* note pulled tight under the button + negative margin cancels the form gap so there's no dead space
   below it before the card's bottom padding */
.touch__note { display:flex; align-items:center; gap:clamp(4.8px, .24rem + .24vw, 7.2px); margin-top:clamp(-8px, -.4rem - .3vw, -4px); color:var(--slate); font-size:clamp(.624rem, .584rem + .192vw, .736rem); } /* MODES-OK: -20% content scale, tightened bottom gap, all 4 modes */
.touch__note .icon { width:clamp(10.4px, 8.8px + .24vw, 12.8px); height:clamp(10.4px, 8.8px + .24vw, 12.8px); color:var(--sage-deep); flex:none; } /* MODES-OK: -20%, all 4 modes */

/* MODES-OK owner 2026-07-27: NO STACK anywhere — the old 1-col collapse at <=700px is
   removed sitewide; the 2-col never-stack layout below now applies to every page. */
@media (max-width:700px) {
  .touch__lede { max-width:none; }
}

/* MODES-OK owner-confirmed: TERM-LOANS-ONLY touch title — match this page's
   signature recipe (nowrap one line, min(2.43rem, Xvw) + sage dot) so it reads
   as a sibling of "Industries we back." above. Scoped to body[data-page="term"]
   so the home-page .sec-touch title (shared sec-title token) is untouched.
   All 4 modes: slope governs below the 2.43rem cap across the whole range;
   relaxed slope <=520 per pool head recipe. */
/* MODES-OK all 4 modes: scope extension only (term + loc carbon copy, owner-locked
   cloning contract 2026-07-28) — values unchanged, same rule now serves both pages */
:is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .sec-touch .touch__title {
  font-family:var(--font-d); font-weight:700; letter-spacing:-.022em;
  line-height:1.05; white-space:nowrap; font-size:min(2.43rem, 4.5vw);
}
@media (max-width:520px) {
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .sec-touch .touch__title { font-size:min(2.43rem, 5.4vw); } /* MODES-OK scope extension only */
}
/* MODES-OK owner-confirmed 2026-07-27: SITEWIDE touch layout (was term-loans-only) —
   reach-us left, form right, NEVER stack, at all 4 modes on every page (owner: "I
   dont want any stack"). The old global 1-col collapse at <=700px is deleted. Column
   gap is a single fluid clamp (both terms scaled) that shrinks on narrow widths so
   two columns stay usable down to ~360px without crushing the fields. */
.sec-touch .touch {
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(10px, 0.5rem + 1.2vw, 40px);
}
/* MODES-OK owner-confirmed 2026-07-27: SITEWIDE (was term-loans-only) touch form is
   CONTAINER-FLUID like the hero form (see [[hcc-container-fluid-forms]]).
   container-type:inline-size lets the card's text size to the FORM's own width (cqi),
   so the header holds ONE line and every element grows/shrinks with the card at every
   px — independent of the 2-col vs viewport width. Header "See how much you qualify
   for." + reach-us values forced nowrap so they never break. All 4 modes; QA 360–1450px. */
.sec-touch .touch__card { container-type:inline-size; }
/* header sized to the card width (cqi) → always one line, scales with the form */
.sec-touch .touch__card h3 {
  white-space:nowrap; font-size:clamp(0.56rem, 5.4cqi, 1.6rem); /* MODES-OK owner 2026-07-27: hero-form slope, floor lowered so ONE line even in a ~150px card (360px viewport), all 4 modes */
}
/* form internals re-based on cqi so they track the card, not the viewport */
.sec-touch .touch__form { gap:clamp(10px, 2.6cqi, 18px); }
.sec-touch .touch__form .field label { font-size:clamp(0.66rem, 2.9cqi, 0.82rem); margin-bottom:clamp(4px, 1cqi, 6.4px); }
.sec-touch .touch__form input,
.sec-touch .touch__form select { font-size:clamp(0.72rem, 3.2cqi, 0.95rem); padding:clamp(7px, 2cqi, 11px) clamp(10px, 3cqi, 14px); }
.sec-touch .touch__btn { font-size:clamp(0.74rem, 3.3cqi, 0.97rem); padding:clamp(9px, 2.6cqi, 12.8px) clamp(14px, 4cqi, 24px); }
.sec-touch .touch__note { font-size:clamp(0.6rem, 2.5cqi, 0.736rem); }
/* reach-us values (email/phone/hours) forced one line, scale with the info column */
.sec-touch .touch__reach-t a,
.sec-touch .touch__reach-v { white-space:nowrap; overflow-wrap:normal; }
.sec-touch .touch__info { container-type:inline-size; }
.sec-touch .touch__reach-t a,
.sec-touch .touch__reach-v { font-size:clamp(0.46rem, 5cqi, 1.075rem); } /* MODES-OK owner 2026-07-27: lower floor + slope so the nowrap email fits the narrowest info column at 360px (never re-wrap), all 4 modes */
.sec-touch .touch__reach-t b { font-size:clamp(0.48rem, 3cqi, 0.592rem); }
/* MODES-OK owner-confirmed (entire container, all 4 modes): whole info column scales
   with its width too — lede + chip/icon track the column, so the ENTIRE container (not
   just the form) reads as one designed, fluid unit. cqi clamps have both ends bounded. */
.sec-touch .touch__lede { max-width:none; font-size:clamp(0.78rem, 6cqi, 1.075rem); }
.sec-touch .touch__reach .icon--chip { width:clamp(18px, 13cqi, 34.56px); height:clamp(18px, 13cqi, 34.56px); } /* MODES-OK owner 2026-07-27: lower floor so chips keep shrinking with the column, all 4 modes */
.sec-touch .touch__reach .icon--chip .icon { width:clamp(7.5px, 5.4cqi, 14.4px); height:clamp(7.5px, 5.4cqi, 14.4px); } /* MODES-OK */

/* MODES-OK: footer size-fluidity pass — all 4 modes. Every hardcoded px below is now a fluid token or
   clamp (both terms defined) so the footer scales per-pixel like the rest of the site, and long tokens
   (email/address) wrap instead of clipping at the column edge. */
/* MODES-OK: footer recolored to a neutral medium gray (owner 2026-07) — light text on gray;
   colors only, no sizing/layout change, applies to all 4 modes. */
.footer {
  --f-bg:var(--cream); --f-text:var(--ink); --f-strong:var(--racing); --f-muted:var(--racing); --f-line:var(--line-strong);
  /* MODES-OK: shorter footer, all 4 modes — both terms scaled down again from 40/28+2.6vw/64 + 22/17+1vw/30. */
  background:var(--f-bg); color:var(--f-text); border-top:1px solid var(--f-line); padding:clamp(30px, 22px + 1.9vw, 48px) 0 clamp(18px, 14px + .8vw, 26px);
}
.footer .dot { color:var(--f-muted); }
/* min-width:0 lets each column shrink so its content wraps rather than overflowing the grid track */
/* MODES-OK: columns grouped left right after the logo — brand sized to content, three link columns
   follow, a trailing 1fr track absorbs leftover space on the right. Tighter col gap & bottom pad.
   All 4 modes, both clamp terms scaled. */
.footer__grid { display:grid; grid-template-columns:auto auto auto minmax(0,max-content) minmax(0,1fr); gap:clamp(20px, 14px + 1.3vw, 36px); padding-bottom:clamp(22px, 16px + 1.4vw, 36px); } /* MODES-OK: proportional tracks, all 4 modes; clamp gap/pad both terms scaled */
.footer__grid > * { min-width:0; }
.footer__brand img { width:min(190px, 60%); margin-bottom:clamp(14px,1.4vw,20px); }
/* MODES-OK: color-only recolor for gray footer (all 4 modes) — sizing/spacing unchanged. */
.footer__tag { font-family:var(--font-d); font-weight:500; font-size:var(--fs-ui); color:var(--f-strong); max-width:240px; line-height:1.5; }
/* MODES-OK: tighter heading margin, all 4 modes — both clamp terms scaled from old 12/1.4vw/18. */
.footer h2 { font-family:var(--font-d); font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--f-muted); margin-bottom:clamp(10px, 8px + .5vw, 14px); }
/* MODES-OK: link stack pulled closer, all 4 modes — both terms scaled down from 6/5+.18vw/8. */
.footer ul { list-style:none; display:grid; gap:clamp(4px, 3.4px + .13vw, 6px); }
/* MODES-OK: link text 20% smaller than prior (14/13+.28vw/15.5 -> x0.8), all 4 modes, both terms scaled.
   Small-burger + mobile take a further 30%-of-original size below (see @media max-width:700). */
.footer a { color:var(--f-text); font-size:clamp(11.2px, 10.4px + .224vw, 12.4px); transition:color var(--t-fast); }
.footer a:hover { color:var(--f-strong); }
/* overflow-wrap:anywhere breaks the long email / address so nothing clips past the column edge */
/* MODES-OK: address text matches the new 20%-smaller link size; tighter row gap. All 4 modes, both terms scaled. */
.footer address { font-style:normal; font-size:clamp(11.2px, 10.4px + .224vw, 12.4px); display:grid; gap:clamp(6px, 4.8px + .3vw, 9px); overflow-wrap:anywhere; }
.footer address a { display:flex; gap:clamp(7px,.8vw,10px); align-items:center; }
.footer address a.footer__apply { display:none; } /* MODES-OK owner 2026-07-29: Reach-us Apply Now link is a small burger + mobile feature (nav already carries Apply Now on main site + big burger); the <=700px block shows it. Specificity must beat .footer address a */
/* MODES-OK: hours row matches the icon+gap of the links above; address indent = icon width + gap so the
   text lines up under them. Both fluid (all 4 modes) — replaces the old inline gap:10px / padding-left:26px. */
.footer__hours { display:flex; gap:clamp(7px,.8vw,10px); align-items:center; }
.footer__addr { padding-left:calc(clamp(13.5px,1.1vw,16px) + clamp(7px,.8vw,10px)); }
.footer address .icon { width:clamp(13.5px,1.1vw,16px); height:clamp(13.5px,1.1vw,16px); color:var(--f-muted); flex:none; } /* MODES-OK: color-only, all 4 modes */
.footer__legal { border-top:1px solid var(--line-dark); padding-top:clamp(22px,2.6vw,28px); display:grid; gap:clamp(9px,1vw,12px); }
.footer__legal p { font-size:var(--fs-micro); line-height:1.6; color:#AFBDB4; max-width:880px; }
.footer__row { display:flex; justify-content:space-between; gap:clamp(14px,1.6vw,20px); flex-wrap:wrap; font-size:var(--fs-micro); }
.footer__row a { font-size:var(--fs-micro); }

/* ============================================================
   MOBILE STICKY BAR
   ============================================================ */
.mobilebar {
  position:fixed; left:12px; right:12px; bottom:12px; z-index:110;
  display:none; grid-template-columns:auto 1fr; gap:8px;
  background:rgba(0,51,29,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-dark); border-radius:14px; padding:8px;
  transform:translateY(120%); transition:transform .45s var(--ease-out);
  box-shadow:0 14px 34px -10px rgba(0,20,11,.5);
}
.mobilebar.is-visible { transform: translateY(0) !important; }
.mobilebar .call {
  display:flex; align-items:center; justify-content:center; line-height:0;
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line-dark); color:var(--cream);
}
.mobilebar .call svg { width:16px; height:16px; display:block; }
.mobilebar .btn {
  width:100%; padding:10px 14px; background:var(--cream); color:var(--racing);
  font-size:13px; font-weight:500; letter-spacing:0.02em;
}

/* ============================================================
   MOTION — reveals, splits, draws
   ============================================================ */
[data-reveal] { opacity:0; transform:translateY(34px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay:var(--d, 0s); will-change:transform, opacity; }
[data-reveal="fade"] { transform:none; }
[data-reveal="left"] { transform:translateX(-34px); }
[data-reveal="right"] { transform:translateX(34px); }
[data-reveal="scale"] { transform:scale(.94); }
[data-reveal].is-inview { opacity:1; transform:none; }

/* split-line headline reveal — bottom padding must clear Poppins descenders (g, y) or they clip */
.sl-line { display:block; overflow:hidden; padding:.08em 0 .22em; margin:-.08em 0 -.22em; }
.sl-inner { display:block; transform:translateY(140%); transition:transform .85s var(--ease-out); transition-delay:var(--d, 0s); will-change:transform; }
.is-inview .sl-inner, .sl-ready.is-inview .sl-inner { transform:none; }

/* icon stroke draw-on */
[data-draw] svg * { stroke-dasharray:60; stroke-dashoffset:60; transition:stroke-dashoffset 1.1s var(--ease-io); transition-delay:var(--d, .1s); }
[data-draw].is-inview svg * { stroke-dashoffset:0; }

/* image curtain reveal */
.curtain { position:relative; overflow:hidden; border-radius:var(--r-panel); }
.curtain::after { content:''; position:absolute; inset:0; background:var(--cream); transform:scaleY(1); transform-origin:top; transition:transform .9s var(--ease-io); z-index:2; }
.felt .curtain::after { background:var(--racing); }
.curtain.is-inview::after { transform:scaleY(0); }
.curtain img { transform:scale(1.12); transition:transform 1.4s var(--ease-out); }
.curtain.is-inview img { transform:scale(1); }

/* view transitions (progressive enhancement) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation:vt-out .28s var(--ease-io) both; }
::view-transition-new(root) { animation:vt-in .34s var(--ease-out) both; }
@keyframes vt-out { to { opacity:0; transform:translateY(-10px); } }
@keyframes vt-in { from { opacity:0; transform:translateY(14px); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px) {
  .bene-grid, .quote-grid { grid-template-columns:1fr 1fr; }
  .statband { grid-template-columns:1fr 1fr; row-gap:36px; }
  /* 921–1080px: collapse phone to icon-only so digits never overflow; keep the icon + chip padding.
     MODES-OK: Main-site mode only (>=921); no fluid tokens changed, hide-rule is width-flat across the band */
  .nav__phone span:not(.icon) { display:none; }
  /* MODES-OK main site 921-1080 (owner 2026-07-29): icon-only phone gets its box BACK — a bare icon floats, boxed reads as a button */
  .nav__phone { padding-inline:0; width:clamp(32px, 1.4vw + 24px, 38px); justify-content:center; background:var(--white); border:1px solid var(--line-strong); border-radius:10px; }
  .nav__phone:hover { background:var(--racing); border-color:var(--racing); color:var(--cream); }
}
@media (max-width:920px) {
  /* MODES-OK: all 3 burger modes — header is now a two-layer stack (Capital Quickly reference,
     owner 2026-07-29): racing contact strip (scrolls away) + white bar (pins). --bar-h is the
     white bar itself; --strip-h is deterministic (calc px+vw, content is nowrap-guarded so it can
     never rewrap taller); --nav-h stays the TOTAL stack so every downstream offset (heroes,
     scroll-margins) clears the whole header at page top. */
  :root { --bar-h:66px; --strip-h:calc(28px + 1.6vw); --nav-h:calc(var(--bar-h) + var(--strip-h)); }
  /* MODES-OK: all 3 burger modes — bar keeps its 66px height; it starts below the strip and
     main.js walks top -> 0 per-pixel as the strip scrolls off (no snap point) */
  .nav { height:var(--bar-h); top:var(--strip-h); }
  body.menu-open .nav { top:0 !important; } /* menu open: bar pins so the one-page menu budget holds */
  /* contact strip — one line in big burger: phone · email ........ [APPLY]
     MODES-OK: all 3 burger modes (this block), <=700 stacks it in two rows below */
  .topbar { display:block; position:absolute; top:0; left:0; right:0; z-index:110; height:var(--strip-h); background:var(--racing); color:var(--cream); }
  .topbar__in { height:100%; display:flex; align-items:center; gap:calc(10px + 1.8vw); } /* MODES-OK big burger row gap, fluid 701-920 */
  .topbar__item { display:inline-flex; align-items:center; gap:calc(5px + .4vw); font-family:var(--font-d); font-weight:500; font-size:calc(10px + .5vw); line-height:1; color:var(--cream); white-space:nowrap; } /* MODES-OK all burger modes, nowrap = strip height can never jump; weight 500 (owner 2026-07-30: 400 read too faint on the racing strip) */
  .topbar__item .icon { width:calc(11px + .5vw); height:calc(11px + .5vw); flex:none; color:var(--cream); } /* MODES-OK all burger modes; cream overrides the racing .icon default, which vanishes on the racing strip */
  /* MODES-OK all burger modes — owner 2026-07-30: same button language as the page buttons
     (cream fill / racing label pair, --r-btn-family radius ramp, .01em tracking, .btn hover +
     active), with its own header weight (600) and its own tighter header size ramp. Sentence
     case: reads "Apply". Flex centering + line-height:1 keeps the label dead centre. */
  .topbar__apply { margin-left:auto; display:inline-flex; align-items:center; justify-content:center; flex:none; background:var(--cream); color:var(--racing); font-family:var(--font-d); font-weight:600; font-size:calc(9.9px + .48vw); letter-spacing:.01em; text-transform:none; line-height:1; height:calc(18.5px + .95vw); padding:0 calc(9px + 1vw); border-radius:calc(5px + .4vw); transition:background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
  .topbar__apply:hover { background:var(--white); box-shadow:0 10px 22px -12px rgba(0,0,0,.45); }
  .topbar__apply:active { box-shadow:inset 0 0 0 1px rgba(0,66,37,.18); }
  body { padding-bottom:86px; } /* clearance for the sticky call/apply bar */
  /* Burger-mode white bar: [logo] ................. [≡ burger] — clean like the reference
     MODES-OK: applies across all 3 burger modes (big 701–920, small 481–700, mobile ≤480) */
  .nav__links { display:none; }
  .nav__in > nav[aria-label="Primary"] { display:none; } /* empty links wrapper — remove so it doesn't take flex space */
  /* MODES-OK: all 3 burger modes. burger moved to the RIGHT edge (owner 2026-07-29); gap fluid */
  .nav__burger { display:block; flex:none; order:3; margin-left:calc(2px + 1vw); }
  /* MODES-OK: all 3 burger modes. logo fluid, +15% (owner 2026-07): ~26.4px at 390px → 33.4px by the
     920px handoff. Both terms scaled by 1.15 so it stays fluid/per-pixel, just 15% larger everywhere. */
  .nav__logo { order:-1; height:calc(31.8px + 1.01vw); margin-right:auto; } /* MODES-OK all 3 burger modes — owner 2026-07-29: logo +35% so it fills the clean bar (~35.7px at 390 → ~41px at 920, inside the 66px bar) */
  /* phone pill + Apply removed from the white bar (owner 2026-07-29) — they live in the strip
     and in the burger menu's cream boxes. MODES-OK: display-only, all 3 burger modes */
  .nav__cta { display:none; }
  /* the home hero eclipse ring is anchored to the hero's top edge; the strip made the header
     stack taller, so drop the ring by the same amount or its lowest sweep hides behind the bar.
     MODES-OK: all 3 burger modes, offset tracks --strip-h so it stays per-pixel correct */
  .hero__fx { top:calc(-1310px + var(--strip-h)); }
  .hero { padding-top:calc(var(--nav-h) + 16px); min-height:auto; }
  .hero__grid { grid-template-columns:1fr; gap:56px; }
  .hand { height:auto; aspect-ratio:6/5; max-width:480px; margin-inline:auto; width:100%; }
  .ticks { grid-template-columns:1fr 1fr; }
  .split, .split--rev, .contact-grid, .fan-scene { grid-template-columns:1fr; } /* match keeps its side-by-side layout until the 700px phone line */
  .fan-sticky { position:relative; top:0; height:auto; padding-block:20px; }
  .fan { width:min(240px, 70%); }
  .fan-steps { gap:56px; padding-block:0; }
  .faq-layout { grid-template-columns:1fr; }
  .faq-rail { position:static; order:-1; }
  .toc { flex-direction:row; flex-wrap:wrap; border-left:none; gap:6px; }
  .toc a { border:1px solid var(--line); border-radius:999px; padding:8px 16px; margin:0; }
  .toc a.active { border-color:var(--racing); }
  .ask-card { display:none; }
  .chooser { grid-template-columns:1fr; }
  .mobilebar { display:grid; }
  .footer__grid { grid-template-columns:1fr 1fr; }
  .footer__brand { grid-column:1/-1; }
}
/* MODES-OK: small-burger (481–700) + mobile (≤480) — link/address text 30% under the ORIGINAL
   (14/13+.28vw/15.5 -> x0.7); both clamp terms scaled so it stays fluid across the whole 320–700 range. */
@media (max-width:700px) {
  /* contact strip stacks like the Capital Quickly phone reference: phone row over email row,
     APPLY box vertically centered on the right. MODES-OK: small burger (481-700) + mobile (<=480),
     every token calc(px + vw) across 320-700; --strip-h deterministic (rows are nowrap-guarded). */
  :root { --strip-h:calc(48px + 2.2vw); } /* MODES-OK ~55px at 320 → ~63px at 700 */
  .topbar__in { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; align-content:center; column-gap:calc(8px + 1vw); row-gap:calc(4px + .6vw); align-items:center; } /* MODES-OK rows hug together and center as a group — no dead band between phone and email (owner 2026-07-29) */
  .topbar__item { font-size:calc(10.5px + .55vw); } /* MODES-OK */
  .topbar__mail { font-size:min(calc(10.5px + .55vw), calc(5.4vw - 8px)); } /* MODES-OK fit guard: long email shrinks to fit at very narrow widths instead of wrapping */
  .topbar__apply { grid-column:2; grid-row:1 / span 2; align-self:center; margin-left:0; height:calc(21px + .6vw); padding:0 calc(9px + 1vw); } /* MODES-OK owner 2026-07-30: pill height now tracks the strip text instead of outgrowing it (~23px at 320 → 25.2px at 700, meeting the big-burger ramp exactly at 701); font/padding inherit the shared burger ramp so nothing dips at the boundary */
  .footer a,
  .footer address { font-size:clamp(9.8px, 9.1px + .196vw, 10.85px); }
  /* MODES-OK: small-burger (481–700) + mobile — owner 2026-07-29 (rev 2): two 1fr tracks
     (no px to scale); LEFT = Reach us then Services, RIGHT = Company starting level with
     Reach us (its title lines up with REACH US). */
  .footer__grid { grid-template-columns:1fr 1fr; }
  .footer__grid > *:last-child { grid-column:1; grid-row:1; } /* MODES-OK Reach us top-left */
  .footer__grid > *:nth-child(2) { grid-column:1; grid-row:2; } /* MODES-OK Services under Reach us */
  .footer__grid > *:nth-child(3) { grid-column:2; grid-row:1 / span 2; } /* MODES-OK Company right, level with Reach us */
  .footer address a.footer__apply { display:flex; } /* MODES-OK owner 2026-07-29: Apply Now link after the email, small burger + mobile only */
  .footer__brand { display:none; }
}
@media (max-width:640px) {
  body { font-size:15.5px; }
  :root { --pad-sec:clamp(64px, 16vw, 84px); }
  .floater { right:12px !important; left:auto !important; }
  .bene-grid, .quote-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; gap:36px; }
  .hero__ctas { gap:18px; }
  .hero__ctas .btn { width:100%; }
  .ticks { grid-template-columns:1fr; gap:12px; padding-block:20px; }
  .statband { grid-template-columns:1fr 1fr; }
  .form { grid-template-columns:1fr; }
  /* MODES-OK: .rev width/padding now handled by fluid clamp in the base rule — 640px step removed */
  .card--proof { width:82%; top:0; right:0; }
  .card--ace { width:46%; left:0; top:6%; }
  .card--stat { display:none; } /* its numbers live in the ticks + stat band on mobile */
  .hand { aspect-ratio:5/4.6; }
  /* MODES-OK: footer straight-down stack now starts at ≤700px (see that block); redundant 1fr removed here */
  .cta-band .mark-ghost { display:none; }
}

/* ============================================================
   SMALL SCREENS — the mobile layout applies everywhere the nav
   collapses (≤920px): phones, small tablets, narrow windows
   ============================================================ */
@media (max-width:920px) {
  /* fluid small-screen tokens: every value is calc(px + vw) so components scale with the
     window across the whole burger range but keep the composition tuned at 390px.
     STANDING RULE: style small-screen work with these tokens, never raw px — that is what
     makes new sections scale automatically. */
  :root {
    /* curves are anchored at 390px and land EXACTLY on the desktop value at the 920px
       handoff, so nothing ever renders larger in burger mode than on the full site */
    --fs-h2:calc(22.8px + 1.45vw);   /* section headings: 28.5 -> 36.1 (desktop 36.3) */
    --fs-h3:calc(14.6px + .755vw);   /* card titles: 17.5 -> 21.5 (desktop 21.5) */
    --fs-lede:calc(16.4px + .175vw); /* ledes: 17.1 -> 18 (desktop 18) */
    --fs-body-s:calc(5.9px + 1.4vw); /* checklist / small copy */
    --fs-btn-s:calc(6.3px + 1.35vw); /* compact buttons */
    --chip:calc(17.5px + 4.2vw);     /* icon chips */
    --sp-1:calc(2.6px + 1.4vw);      /* small gap */
    --sp-2:calc(5px + 2.8vw);        /* card padding */
    --sp-3:calc(2px + 3.1vw);        /* grid gap */
  }
  /* MODES-OK: original choose-us title size restored (governs <=700px old look; token wins >=701px). All 4 modes. */
  .choose-us__title { font-size:min(calc(6.2vw - 2.5px), var(--fs-h2)); }
  /* choose-us art: percentage only, no px cap — tracks the tab width */
  .choose-us__item img { width:35%; }
  /* products keep the desktop 4-card lineup as a 2x2 hand of cards at every size */
  .prod-grid { gap:var(--sp-3); }
  .prod { --pp:var(--sp-2); --kl:calc(3px + 1.5vw); min-height:0; border-radius:calc(8px + 2.6vw); padding-block:calc(var(--pp) * .855); }
  .prod__head { gap:calc(3px + 1.5vw); margin-bottom:calc(4px + 2vw); }
  .prod__head h3 { font-size:var(--fs-h3); padding-bottom:6px; }
  .prod .icon--chip { width:var(--chip); height:var(--chip); border-radius:calc(4px + 1.5vw); }
  .prod__list { width:auto; gap:var(--sp-1); }
  .prod__list li { font-size:var(--fs-body-s); gap:var(--sp-1); }
  .prod__list li .icon { width:calc(4px + 2.6vw); height:calc(4px + 2.6vw); }
  .prod__list + .prod__ctas { margin-top:calc(5px + 2.3vw); }
  .prod__ctas { padding-top:calc(4.5px + 2.2vw); }
  .prod__ctas .btn { width:100%; padding:calc(3.5px + 1.9vw) 0; font-size:var(--fs-btn-s); border-radius:calc(4px + 1.5vw); }
  /* stat bridge stays 3-across like desktop */
  .stat-bridge__row { grid-template-columns:repeat(3, 1fr); gap:calc(3px + 1.8vw); }
  .stat-card { padding:calc(5.1px + 2.22vw) calc(2px + 1.5vw) calc(4.3px + 1.97vw); border-radius:calc(6px + 1.8vw); }
  .stat-card__label { font-size:calc(7.1px + .64vw); letter-spacing:0; margin-bottom:calc(2px + 1.3vw); white-space:nowrap; }
  .stat-card__num { font-size:calc(12px + 1.74vw); }
  .stat-card__tp { font-size:min(calc(12px + 1.74vw), calc(6.05vw - 4.2px)); } /* MODES-OK big+small burger + mobile: fit guard (card inner / TRUE 476.9) kicks in below ~367px so the wordmark never overflows */
  .stat-card .th-stars { margin-top:calc(2px + 1vw); } /* MODES-OK big+small burger + mobile spacing under the wordmark */
  /* hero — fundbox-ratio fluid type: every size scales with the viewport across the whole
     burger range, and the title meets the desktop clamp exactly at the 920px handoff */
  .hero { padding-top:calc(var(--nav-h) + 7vh); } /* 7% of the screen as air under the nav */
  .hero .eyebrow { font-size:calc(6.5px + .75vw); letter-spacing:.2em; margin-bottom:12px; }
  .hero h1 { font-size:calc(23px + 4.5vw); line-height:1.13; letter-spacing:-.02em; margin-bottom:16px; }
  .hero .lede { font-size:calc(9.68px + 1.408vw); line-height:1.55; max-width:33ch; } /* 12% smaller across the burger range; ch measure keeps the 4-line wrap at every width */
  .hero .nowrap { white-space:normal; }
  .hero .hero__ctas { margin-top:28px; }
  .hero .hero__ctas .btn { width:auto; font-size:calc(9.9px + .81vw); padding:calc(8.1px + 1.17vw) calc(16.2px + 3.15vw); } /* 10% smaller across the burger range */
  /* eclipse ring in vw so it grows/shrinks per-pixel like the desktop ring; tilted slightly so
     the arc sweeps in on a diagonal instead of crossing flat. Owner 2026-07-29: +96px base drop —
     the topbar strip made the header stack taller and swallowed the old high arc; the constant
     term compensates the (constant-ish) header, the vw term keeps the per-pixel scaling.
     MODES-OK small burger + mobile */
  .hero__fx { width:185vw; height:185vw; top:calc(96px - 142vw); right:-61vw; transform:rotate(-8deg); filter:blur(5px); }
  /* hero visual scratched on small screens */
  .hero__visual { display:none; }
  /* width:100% defeats the fit-content shrink from .container's auto margins inside the hero flexbox */
  .hero__grid { display:block; width:100%; }
  /* trust band: four across in one straight line at every width */
  .trust-band__row { flex-wrap:nowrap; justify-content:space-evenly; }
  .trust-band__item { font-size:clamp(8.5px, 5px + 1vw, 11px); letter-spacing:.14em; padding-inline:0; gap:calc(4px + .6vw); }
  .trust-band__item .icon { width:calc(9px + 1vw); height:calc(9px + 1vw); }

  /* ---- SITEWIDE FLUID EXTENSION (subpages) ----
     Same philosophy as the home tokens above: every curve is anchored at 390px and
     lands on its desktop value at the 920px handoff, so subpages read as the full
     site fluidly compressed. Home-page components are NOT referenced here. */

  /* page-hero — the subpage/apply header (about, loan pages, faq, contact, how-it-works) */
  .page-hero .h-display, .apply-hero .h-display { font-size:calc(27.4px + 1.7vw); } /* 34 -> 43 (desktop clamp lands ~43) */
  .page-hero { padding-top:calc(var(--nav-h) + 16px + 6vh); } /* breathing room under the collapsed nav */
  .page-hero .h-display { margin-bottom:calc(12px + .9vw); }
  .page-hero__proof { margin-top:calc(14px + 1vw); padding:calc(7px + .4vw) calc(11px + .8vw); font-size:calc(11.8px + .18vw); gap:calc(6px + .4vw); }
  .page-hero__proof .icon { width:calc(13px + .55vw); height:calc(13px + .55vw); } /* pre-15%; the cut below applies on top */

  /* split rows — compress the column gap fluidly through the burger range,
     then the existing ≤700px rule stacks them to one column */
  .split, .split--rev { gap:calc(20px + 2.6vw); }

  /* shared grids — fluid gaps so they compress in step with everything else */
  .bene-grid { gap:calc(12px + 1.1vw); }
  .quote-grid { gap:calc(12px + 1.1vw); }
  .statband { gap:calc(12px + 1.1vw); margin-top:calc(30px + 3vw); padding-top:calc(22px + 2vw); }
  .terms-card { padding:calc(18px + 1.8vw); gap:calc(14px + 1.3vw); }
  .cycle { gap:calc(12px + 1.6vw); }
}

/* ============================================================
   BURGER + MOBILE: 15% smaller photos & icons (≤920px)
   Applies to shared, sitewide art. Home-page pieces already
   hand-tuned in their own ≤920px rules are intentionally excluded
   so they are not shrunk twice: product chips, stat cards,
   trust-band icons, the fan, choose-us art, match-fan.
   ============================================================ */
@media (max-width:920px) {
  /* photos — render the image itself at 85%, centered in its space */
  .photo-card img { width:85%; height:85%; margin:auto; }
  .photo-card { display:grid; place-items:center; } /* center the shrunk image within the figure box */
  .mark-ghost { transform:scale(.85); transform-origin:center; }

  /* icons — shared generic icons cut to 85% of their desktop size */
  .icon { width:20.4px; height:20.4px; }              /* 24 → 20.4 */
  .checks .icon { width:20.4px; height:20.4px; }       /* 24 → 20.4 */
  .drop .icon { width:18.7px; height:18.7px; }         /* 22 → 18.7 */
  .ticks .icon { width:17px; height:17px; }            /* 20 → 17 */
  .wcard__check { width:22.1px; height:22.1px; }       /* 26 → 22.1 */
  .qcard .icon { width:17.85px; height:17.85px; }      /* 21 → 17.85 */
  .prose ul .icon { width:16.15px; height:16.15px; }   /* 19 → 16.15 */
  .page-hero__proof .icon { width:15.3px; height:15.3px; } /* 18 → 15.3 */
  /* footer icon override removed — base .footer address .icon is now a fluid clamp (MODES-OK) */
  .cycle__arrow { width:28.9px; height:28.9px; }       /* 34 → 28.9 */

  /* icon chips (rounded-tile icons) on shared components */
  .bene .icon--chip { width:44.2px; height:44.2px; }   /* 52 → 44.2 (matches .flow default) */
  .line-card .icon--chip { width:39.1px; height:39.1px; } /* 46 → 39.1 */
  .flow .icon--chip { width:44.2px; height:44.2px; }   /* 52 → 44.2 */
}

/* wide burger (701-920px): the hand stays 4-across; card internals ride a
   quarter-width curve so each card keeps phone-card proportions */
@media (min-width:701px) and (max-width:920px) {
  .prod-grid { gap:calc(4px + 1.2vw); }
  .prod { --pp:calc(6px + 1.3vw); --kl:calc(4px + .6vw); border-radius:calc(10px + 1vw); }
  .prod__head { gap:calc(4px + .6vw); margin-bottom:calc(5px + .8vw); }
  .prod__head h3 { font-size:calc(8.1px + 1.17vw); }
  .prod .icon--chip { width:calc(12px + 2.9vw); height:calc(12px + 2.9vw); border-radius:calc(5px + .6vw); }
  .prod__list { gap:calc(3px + .6vw); }
  .prod__list li { font-size:calc(4.5px + .86vw); gap:calc(3px + .5vw); }
  .prod__list li .icon { width:calc(5px + 1.1vw); height:calc(5px + 1.1vw); }
  .prod__list + .prod__ctas { margin-top:calc(6px + .9vw); }
  .prod__ctas { padding-top:calc(5px + .9vw); }
  .prod__ctas .btn { padding:calc(4px + .75vw) 0; font-size:calc(5.4px + .77vw); border-radius:calc(5px + .6vw); }
  /* type follows its column: pure viewport-proportional, equal to main-site values
     at the 920 handoff, so every section reads as the main site scaled by tab width */
  :root { --fs-h2:3.94vw; --fs-h3:2.34vw; --fs-lede:1.95vw; }
  h2 { margin-bottom:1.96vw; }
  .qcard { padding:3.04vw 3.48vw; margin-top:3.04vw; }
  .qcard ul { gap:1.74vw 3.48vw; }
  .qcard li { gap:1.3vw; }
  .qcard b { font-size:1.576vw; }
  .qcard .icon { width:2.28vw; height:2.28vw; }
  .match--visual .hero__ctas { gap:1.74vw; margin-top:3.04vw; }
  .match--visual .hero__ctas .btn { font-size:1.685vw; padding:1.74vw 3.26vw; gap:1.09vw; }
  .match--visual .hero__ctas .btn .icon { width:1.85vw; height:1.85vw; }
}

/* the phone line (≤700px, where choose-us also stacks): the hand folds to 2x2,
   the match section stacks, and the checklist goes 2-up to fill the card width */
@media (max-width:700px) {
  .prod-grid { grid-template-columns:repeat(2, 1fr); }
  .match { grid-template-columns:1fr; }
  .qcard ul { grid-template-columns:1fr 1fr; gap:12px 20px; }
  /* small-burger + phone: photo fan 27.75% smaller total (two 15% cuts), choose-us art 15% smaller, still tab-proportional */
  .match-fan { width:65%; margin-inline:auto; }
  .choose-us__item img { width:30%; }

  /* MODES-OK: CLIENT STORIES title/subtitle shrink for small burger (481-700) + mobile (<=480).
     Title -15%, subtitle -20%. (Review cards -20% / stars -1% now live in the BASE .rev rules,
     applying to all 4 modes uniformly, so their small-screen overrides were removed to avoid duplication.) */
  /* MODES-OK: original story-card mobile title size restored (governs <=700px old look, all 4 modes). */
  .story-card h2 { font-size:clamp(22.95px, 2.29vw, 32.3px); }
  .sec-stories .story-card .lede { font-size:clamp(11.2px, .4vw + 10px, 12.8px); }
}
/* true phones: checklist back to one per row */
@media (max-width:520px) {
  .qcard ul { grid-template-columns:1fr; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  [data-reveal], .sl-inner { opacity:1 !important; transform:none !important; transition:none !important; }
  .curtain::after { display:none; }
  .curtain img { transform:none; transition:none; }
  [data-draw] svg * { stroke-dashoffset:0 !important; transition:none !important; }
  .fan__card:nth-child(2) { transform:rotate(-14deg) translateX(-24px); }
  .fan__card:nth-child(3) { transform:rotate(14deg) translateX(24px); }
  .hand .card3d { opacity:1; animation:none !important; transform:rotate(var(--r,0)) !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
  .menu { transition:none; }
  .belt__track { animation:none !important; } /* belt parks as a static row */
  * { animation-duration:.001s !important; }
}

/* ============================================================
   SERVICES — landing grid + centered page hero + nav additions
   (added with the Services build. Every value here is a scoped
   clamp that stays live through ~1450px — nothing inherits a
   shared token that plateaus early. MODES-OK notes per block.)
   ============================================================ */

/* centered page hero (services landing) — MODES-OK: text centers in all 4 modes,
   lede width is fluid so line length holds from 320px to 1450px+ */
/* MODES-OK: all 4 modes — hero-to-cards gap tightens fluidly (both clamp terms scale),
   lede measure widens fluidly so the last line never orphans; verified 320→1450px */
.page-hero--center { text-align:center; padding-bottom:clamp(10px, .4rem + 1vw, 26px); }
.page-hero--center .lede { margin-inline:auto; max-width:clamp(300px, 30rem + 10vw, 700px); }
.footer h2 a { color:inherit; }

/* the full hand — 7 products + help card.
   main site (>=921): 4 columns, two rows, like the home funding grid */
.sec-services { padding-top:clamp(28px, 1rem + 2.4vw, 64px); }
.svc-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(12px, 6px + .9vw, 19px); }
.svc {
  min-width:0; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-card);
  padding:clamp(18px, 10px + 1.1vw, 26px);
  transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med);
}
.svc:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--line-strong); }
.svc__head { display:flex; align-items:center; gap:clamp(9px, 5px + .55vw, 13px); margin-bottom:clamp(10px, 6px + .5vw, 14px); }
.svc .icon--chip { width:clamp(32px, 22px + 1.1vw, 40px); height:clamp(32px, 22px + 1.1vw, 40px); border-radius:clamp(9px, 6px + .4vw, 12px); flex:none; }
.svc .icon--chip svg { width:clamp(16px, 11px + .55vw, 20px); height:clamp(16px, 11px + .55vw, 20px); }
.svc h3 { font-size:clamp(.98rem, .77rem + .45vw, 1.18rem); line-height:1.22; letter-spacing:-.01em; }
.svc__range { font-family:var(--font-d); font-weight:600; color:var(--sage-deep); font-size:clamp(.72rem, .6rem + .28vw, .86rem); margin-bottom:clamp(6px, 3px + .35vw, 9px); }
.svc__desc { color:var(--slate); line-height:1.55; font-size:clamp(.78rem, .66rem + .3vw, .93rem); flex:1; margin-bottom:clamp(14px, 9px + .6vw, 19px); }
.svc__ctas .btn { font-size:clamp(.72rem, .62rem + .24vw, .84rem); }
.svc__ctas .phone-link { font-size:clamp(.76rem, .66rem + .24vw, .88rem); }
.svc--help { background:var(--cream); }
.svc--help .icon--chip { background:var(--white); }

/* dropdown grew to 7 products — compact rows so the panel stays on screen,
   and a scroll guard for short laptop viewports. MODES-OK: dropdown exists only >=921.
   The row override below unwinds the .nav__links pill constraints (fixed height,
   nowrap, white bg) that squash multi-line dropdown rows. */
.nav__links .drop a {
  display:flex; height:auto; white-space:normal; line-height:1.4;
  justify-content:flex-start; background:transparent; border:none;
  padding:10.5px 14px; border-radius:12px;
}
.nav__links .drop a:hover { background:var(--mist); color:var(--ink); }
.drop { max-height:calc(100vh - var(--nav-h) - 28px); overflow:auto; overscroll-behavior:contain; }

/* mobile menu — ONE SCREEN at every px width AND height (owner 2026-07-29): every row
   scales on svh/vw with desktop caps, so the menu shrinks to fit instead of scrolling
   (overflow stays only as a safety net). Height budget at worst case ~= 82svh + nav.
   MODES-OK: menu exists only <=920 (big burger + small burger + mobile); height-fluid via svh */
.menu { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:calc(var(--bar-h, 66px) + min(2svh, 28px)) 8vw min(2.2svh, 40px); } /* MODES-OK all burger modes, top clears the white bar (menu-open pins the bar to top:0, so bar height not the full strip stack) */
.menu__links a { font-size:min(7vw, 4svh, 34px); line-height:1.15; padding-block:min(.45svh, 10px); } /* MODES-OK all burger modes */
.menu__sub { margin:min(.6svh, 4px) 0 min(1.2svh, 10px); } /* MODES-OK all burger modes */
.menu__sub a { font-size:min(5vw, 2.5svh, 19px); line-height:1.15; padding:min(.4svh, 7px) 0; } /* MODES-OK all burger modes */
.menu__foot { gap:min(1.5svh, 16px); padding-top:min(1.8svh, 28px); } /* MODES-OK all burger modes */
.menu .phone-link { justify-content:center; text-align:center; font-weight:400; font-size:min(2.4svh, 16px); line-height:1.2; background:var(--cream); color:var(--racing); border-radius:var(--r-btn); padding-block:min(1.2svh, 12px); } /* MODES-OK all burger modes, phone centered in a cream box like the nav pills (owner 2026-07-29; round 2: weight 400 to match the thinner strip) */
.menu .phone-link svg { color:var(--racing); }
.menu__foot .btn { padding-block:min(1.4svh, 14px); font-weight:400; font-size:min(2.4svh, 16px); line-height:1.2; background:var(--cream); color:var(--racing); } /* MODES-OK all burger modes, cream box like the open-menu nav Apply (owner 2026-07-29; round 2: weight 400 to match the thinner strip) */
.menu__foot .btn:hover { background:var(--white); }

/* big burger (701-920): the hand goes 2x4 — per-pixel paddings and type via vw */
@media (max-width:920px) {
  .svc-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:calc(8px + 1vw); }
  .svc { padding:calc(12px + 1.4vw); border-radius:calc(10px + 1vw); }
  .svc h3 { font-size:calc(13.4px + .45vw); }
  .svc__range { font-size:calc(10px + .32vw); }
  .svc__desc { font-size:calc(11px + .34vw); }
  .svc .icon--chip { width:calc(24px + 1.4vw); height:calc(24px + 1.4vw); }
  .svc .icon--chip svg { width:calc(12px + .7vw); height:calc(12px + .7vw); }
}

/* small burger (481-700) + mobile (<=480): single column, full-width cards,
   type keeps scaling per-pixel down to 320px */
@media (max-width:700px) {
  .svc-grid { grid-template-columns:1fr; gap:calc(8px + 1.2vw); }
  .svc { padding:calc(13px + 1.6vw); }
  .svc h3 { font-size:calc(13.6px + .75vw); }
  .svc__range { font-size:calc(10.2px + .5vw); }
  .svc__desc { font-size:calc(11.4px + .5vw); }
  .svc .icon--chip { width:calc(26px + 1.8vw); height:calc(26px + 1.8vw); }
  .svc .icon--chip svg { width:calc(13px + .9vw); height:calc(13px + .9vw); }
  .page-hero--center .lede { max-width:100%; }
}

/* ============================================================
   TERM-LOANS HERO — photo + bottom fade, title-left / form-right,
   connector trust band straddling into Container 2.
   Every value is a clamp (spaces around +/-) so it scales per-pixel,
   all 4 modes. Photo below the solid white nav (Capital-Quickly style).
   ============================================================ */
.th-hero {
  --th-formw:clamp(202px, 22vw + 48px, 422px);     /* content -12%; skinny on phones, holds the one-line header */
  --th-gap:clamp(16px, 0.9rem + 1.9vw, 48px);
  --th-minh:clamp(300px, 5vw + 232px, 404px);      /* hero ~20% shorter so the trust band shows into Container 2 */
  /* photo swaps per page via these two vars (body[data-page] override); the
     6-stop scrim is written ONCE here — never duplicate it (cloning contract) */
  --th-hero-img:url('../img/term-hero.webp');
  --th-hero-pos:center 13%;
  position:relative; overflow:hidden;
  background-image:
    linear-gradient(to top,
      rgba(0,51,29,.97) 0%, rgba(0,51,29,.90) 12%, rgba(0,51,29,.58) 30%,
      rgba(0,51,29,.22) 48%, rgba(0,51,29,.10) 68%, rgba(0,51,29,.06) 100%),
    var(--th-hero-img);
  background-size:cover; background-position:var(--th-hero-pos); background-repeat:no-repeat;
}
.th-in {
  position:relative; min-height:var(--th-minh);
  display:grid; grid-template-columns:minmax(0,1fr) var(--th-formw); gap:var(--th-gap);
  align-items:stretch;
  padding-top:calc(var(--nav-h) + clamp(8px, 1vw, 18px));
  padding-bottom:clamp(16px, 1rem + 0.5vw, 32px);
}
/* left column — title bottom, subtitle 2 lines, all in the green fade */
.th-copy { align-self:end; padding-bottom:clamp(6px, 0.7vw, 16px); min-width:0; }
.th-title {
  font-family:var(--font-d); font-weight:700; letter-spacing:-.02em; line-height:1.0;
  white-space:nowrap; color:var(--white);
  font-size:clamp(1.9rem, 0.79rem + 3.87vw, 4.4rem);   /* -12% */
  margin:0 0 clamp(10px, 0.5rem + 0.7vw, 20px);
}
.th-title .dot { color:var(--sage); }
.th-sub {
  color:var(--cream); font-weight:500; line-height:1.45;
  font-size:clamp(0.9rem, 0.75rem + 0.63vw, 1.32rem);   /* -12% */
  max-width:clamp(300px, 23vw + 77px, 458px);        /* tuned so main site = 2 lines */
  margin:0 0 clamp(13px, 0.65rem + 0.9vw, 24px);
}
.th-micro {
  display:flex; align-items:center; gap:clamp(5px, 0.35rem + 0.22vw, 9px);
  color:var(--cream-dim); font-weight:500; font-size:clamp(0.7rem, 0.6rem + 0.31vw, 0.9rem);   /* -12% */
}
.th-micro .icon { width:clamp(11px, 0.44rem + 0.48vw, 15px); height:clamp(11px, 0.44rem + 0.48vw, 15px); color:var(--sage); flex:none; }
.th-micro + .th-micro { margin-top:clamp(4px, 0.2vw + 2.5px, 8px); } /* MODES-OK all 4 modes: fluid gap when a hero stacks two proof lines (heloc, owner 2026-07-28) */
/* right column — form card, vertically centered; header one line; fields straight down */
.th-form { align-self:center; width:100%; }
.th-form.touch__card { padding:clamp(15px, 0.5rem + 1.3vw, 28px) clamp(15px, 0.5rem + 1.3vw, 28px) clamp(11px, 0.5rem + 0.8vw, 19px); container-type:inline-size; }
/* header sized to the FORM width (cqi), so it always stays ONE line and scales
   with the form at every px — never wraps, never overflows */
.th-form h2 { white-space:nowrap; font-size:clamp(0.64rem, 5.4cqi, 1.32rem); margin-bottom:clamp(8px, 0.5rem + 0.4vw, 14px); }
.th-form .form { grid-template-columns:1fr; }
/* form internals shrunk ~12% (fonts) with tighter vertical rhythm so the hero hits ~-20% height */
.th-form .touch__form { gap:clamp(9px, 0.4rem + 0.5vw, 13px); }
.th-form .touch__form .field label { font-size:clamp(0.6rem, 0.565rem + 0.2vw, 0.72rem); margin-bottom:clamp(3px, 0.18rem + 0.12vw, 5px); }
.th-form .touch__form input, .th-form .touch__form select { font-size:clamp(0.63rem, 0.57rem + 0.27vw, 0.82rem); padding:clamp(5px, 0.28rem + 0.18vw, 7px) clamp(9px, 0.49rem + 0.48vw, 13px); }
.th-form .touch__btn { font-size:clamp(0.65rem, 0.59rem + 0.29vw, 0.85rem); padding:clamp(7px, 0.6vw + 4.8px, 10px) clamp(14px, 1.5vw + 9.5px, 20px); }
.th-form .touch__note { font-size:clamp(0.55rem, 0.51rem + 0.17vw, 0.65rem); }

/* CONNECTOR BAND — zero-height seam, band pulled up 50% so it straddles the two
   containers. width:fit-content + centered so it never leaves dead space; the
   content scales per-pixel so the pill grows on big screens. */
.th-seam { height:0; position:relative; z-index:3; }
.th-trust {
  width:fit-content; max-width:100%; margin-inline:auto; transform:translateY(-50%);
  display:flex; align-items:stretch; flex-wrap:wrap; justify-content:center;   /* equal-height columns: labels line up on top, values center below */
  gap:clamp(16px, 0.8rem + 1.8vw, 44px);
  background:var(--ink); border:1px solid rgba(245,240,225,.10);
  border-radius:clamp(12px, 8px + 0.8vw, 20px);
  padding:clamp(13px, 0.5rem + 1vw, 24px) clamp(20px, 0.9rem + 1.8vw, 44px);
  box-shadow:0 30px 70px -28px rgba(0,18,10,.75);
}
/* each item = uppercase label on TOP, then a flexible body that centers the value */
.th-trust__item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(5px, 0.25rem + 0.4vw, 11px); }
.th-trust__body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(5px, 0.25rem + 0.4vw, 10px); }
.th-trust__eyebrow { font-family:var(--font-d); font-weight:600; color:var(--cream-faint); text-transform:uppercase; letter-spacing:.09em; font-size:clamp(0.6rem, 0.48rem + 0.28vw, 0.8rem); line-height:1; }
.th-trust__name { font-family:var(--font-d); font-weight:700; color:var(--cream); font-size:clamp(0.98rem, 0.6rem + 1.05vw, 1.6rem); line-height:1; }
.th-trust__num { font-family:var(--font-d); font-weight:700; color:var(--cream); font-variant-numeric:tabular-nums; font-size:clamp(1.05rem, 0.62rem + 1.35vw, 1.9rem); line-height:1; }
.th-stars { display:flex; justify-content:center; gap:clamp(2px, 0.3vw, 5px); }
.th-stars span {
  width:clamp(10px, 0.34rem + 0.58vw, 15px); height:clamp(10px, 0.34rem + 0.58vw, 15px);
  background:#00B67A; border-radius:clamp(2px, 0.2vw, 4px);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.th-stars svg { width:66%; height:66%; fill:#fff; }
.th-trust__div { width:1px; align-self:stretch; min-height:clamp(34px, 3.4vw, 58px); background:rgba(245,240,225,.16); flex:none; }

/* CONTAINER 2 — Clean paper (--white); tight padding clears the band's lower half.
   Centered title scales with the viewport (nowrap → always ONE line), capped at
   the desktop size; subtitle fluid too. */
.th-next { background:var(--white); }
.th-intro { margin-inline:auto; text-align:center;
            margin-top:clamp(-58px, calc(13px - 4.95vw), -2px);
            margin-bottom:clamp(-150px, calc(-11px - 4.95vw), 0px);
            padding:0 0 clamp(24px, 2vw, 40px); }
.th-intro__title { font-family:var(--font-d); font-weight:700; color:var(--racing);
            letter-spacing:-.022em; line-height:1.05; white-space:nowrap;
            font-size:min(2.43rem, 3.96vw); margin:0 0 clamp(18px, 1.9vw, 34px); }
.th-intro__title .dot { color:var(--sage); }
.th-intro__sub { color:var(--slate); max-width:620px; margin-inline:auto;
            font-size:clamp(0.89rem, 0.78rem + 0.47vw, 1.09rem); line-height:1.6; }

/* ============================================================
   TH-LEDGER — THE NUMBERS (shared component, first used on sba).
   Open numbers strip on WHITE, directly under the C3 intro (owner
   2026-07-28: no felt band, no eyebrow/title, no outline, no CTA).
   Hairline dividers only; the felt C4 below keeps its normal seam
   pull, so the ledger's bottom padding absorbs it. Layout: 1×4 row
   >700px (main site + big burger), 2×2 ≤700px (small burger +
   mobile). Every value fluid per-pixel, live ~1450.
   ============================================================ */
.th-ledger { position:relative; background:var(--white);
  /* pulls up over .th-next's global section padding EXACTLY like .th-why does,
     so the strip lands where the felt used to — same rhythm as term-loans */
  margin-top:clamp(-72px, calc(-4px - 6.3vw), -30px); /* MODES-OK seam pull, fluid all 4 modes */
  padding-top:clamp(10px, 1.2vw, 22px); /* MODES-OK all 4 modes */
  /* bottom = compact pad + the seam C4 eats back (same clamp as .th-why margin-top) */
  padding-bottom:calc(clamp(28px, 1.6vw + 14px, 46px) + clamp(30px, 4px + 6.3vw, 72px)); } /* MODES-OK fluid, all 4 modes */
.th-ledger__grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  max-width:980px; margin-inline:auto;
  gap:clamp(10px, 0.5rem + 0.6vw, 16px); } /* MODES-OK fluid card gap, all 4 modes */
/* stamp-card cells — same language as the C5 answer stamps (owner pick A, 2026-07-28) */
.th-ledger__cell { text-align:center; min-width:0;
  background:rgba(0,66,37,.05); border:1px solid rgba(0,66,37,.14);
  border-radius:clamp(10px, 1.2vw, 16px); /* MODES-OK fluid radius, all 4 modes */
  padding:clamp(14px, 1vw + 8px, 26px) clamp(8px, 1vw, 18px); } /* MODES-OK fluid cell pad, all 4 modes */
.th-ledger__label { font-family:var(--font-d); font-weight:600; color:var(--sage-deep);
  text-transform:uppercase; letter-spacing:.26em; white-space:nowrap; line-height:1;
  font-size:clamp(8.5px, 4.5px + 0.55vw, 12.5px);  /* MODES-OK main + big burger, one line at 701px worst case */
  margin-bottom:clamp(6px, 0.4rem + 0.3vw, 12px); }
.th-ledger__val { font-family:var(--font-d); font-weight:700; color:var(--racing);
  white-space:nowrap; line-height:1; font-variant-numeric:tabular-nums;
  font-size:clamp(15px, 8.5px + 1.068vw, 24px); }  /* MODES-OK main + big burger, "Prime + 2 to 3%" fits at 701px, live to 1450 */
@media (max-width:700px) {
  .th-ledger__grid { grid-template-columns:repeat(2, minmax(0,1fr)); } /* MODES-OK small burger + mobile go 2×2, shared card gap */
  .th-ledger__label { font-size:clamp(8px, 6px + 0.5vw, 11px); }       /* MODES-OK small burger + mobile fluid */
  .th-ledger__val { font-size:clamp(14px, 12.8px + 0.88vw, 20px); }    /* MODES-OK small burger + mobile fluid, fits 360px cells */
}
/* --- table variant: full term-sheet rows (owner pick B for heloc, 2026-07-28).
   Same section shell + label/value type scale as the stamp cards (pool reuse);
   hairline rows in two columns >700px, one stacked column ≤700px. */
.th-ledger__tbl { display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  max-width:900px; margin-inline:auto;
  column-gap:clamp(28px, 1.4vw + 18px, 64px); } /* MODES-OK main + big burger fluid column gutter */
.th-ledger__row { display:flex; align-items:center; justify-content:space-between;
  gap:clamp(10px, 1.4vw, 24px); min-width:0;
  padding-block:clamp(10px, 0.5vw + 6px, 17px); /* MODES-OK fluid row rhythm, all 4 modes */
  border-bottom:1px solid rgba(0,66,37,.14); }
.th-ledger__tbl .th-ledger__row:nth-child(-n+2) { border-top:1px solid rgba(0,66,37,.14); }
.th-ledger__row .th-ledger__label { margin-bottom:0; }
@media (max-width:700px) {
  /* MODES-OK small burger + mobile (owner pick B 2026-07-28): open 2×5 grid — cells go
     label-over-value, centered, hairline lattice; half the height of stacked rows */
  .th-ledger__tbl { grid-template-columns:repeat(2, minmax(0,1fr)); max-width:520px; column-gap:0; }
  .th-ledger__row { flex-direction:column; justify-content:center; text-align:center;
    gap:clamp(6px, 0.8vw + 3px, 10px);                  /* MODES-OK fluid label→value gap */
    padding-block:clamp(10px, 1.4vw + 5px, 16px);       /* MODES-OK fluid cell rhythm */
    padding-inline:clamp(4px, 1vw, 10px); }             /* MODES-OK keeps values off the center divider */
  .th-ledger__row:nth-child(odd) { border-right:1px solid rgba(0,66,37,.14); } /* center divider from the left column */
}

/* ============================================================
   CONTAINER 4 — WHY IT MAKES SENSE (emerald spotlight)
   ============================================================ */
.th-why { position:relative; overflow:hidden; margin-top:clamp(-72px, calc(-4px - 6.3vw), -30px);
  padding-block:clamp(40px, 2vw + 22px, 62px); }
.th-why::before { content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(56% 68% at 80% 24%, rgba(143,168,152,.18), transparent 62%); }
/* ALWAYS two columns: text left, image right (never stacks); title spans full width on top */
.th-why__in { position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,max-content) minmax(0,max-content); justify-content:center;
  column-gap:clamp(14px, 2.2vw, 64px); row-gap:clamp(16px, 2vw, 26px); align-items:center; }
.th-why__head { grid-column:1 / -1; }
.th-why .eyebrow { color:var(--sage); margin-bottom:12px; }
.th-why__title { font-family:var(--font-d); font-weight:700; color:var(--cream);
  letter-spacing:-.022em; line-height:1.05; white-space:nowrap; font-size:min(2.43rem, 3.69vw); margin:0; }
.th-why__title .dot { color:var(--sage); }
.th-why__copy { max-width:520px; }
.th-why .btn { font-size:clamp(.64rem, .56rem + .4vw, .84rem); /* MODES-OK match capstone buttons (C5/C6), all 4 modes */
  padding:clamp(8px, .64vw + 4.8px, 13.6px) clamp(14.4px, 1.6vw + 8px, 27.2px); }
.th-why__list { list-style:none; display:grid; gap:clamp(10px, 1.4vw, 18px); margin:0 0 clamp(18px, 2.6vw, 30px); }
.th-why__list li { display:flex; gap:clamp(8px,1.2vw,14px); align-items:center;
  font-family:var(--font-d); font-weight:500; color:var(--cream);
  font-size:clamp(0.72rem, 0.56rem + 0.68vw, 0.98rem); }
.th-why__list .icon { width:clamp(14px,2.34vw,20.7px); height:clamp(14px,2.34vw,20.7px); color:var(--sage); flex:none; }
/* image keeps full form (no crop); width tracks its column, height auto -> fluid scale.
   MODES-OK big burger + main site: width derived from the copy column's fluid height
   (4 li rows x 1.65lh + gaps + margin + btn) x 3:2 ratio, so photo height == checklist+btn
   height per-pixel; segments cap where each copy clamp caps (988/1154/1375px viewports);
   40vw still governs <=~640 so small burger + mobile keep their proven look */
.th-why__media { position:relative;
  width:max(150px, min(40vw, 129px + 19.82vw, 194.6px + 13.18vw, 251.9px + 8.18vw, 359px)); }
.th-why__card { margin:0; border-radius:clamp(12px, 1.6vw, 24px); overflow:hidden;
  border:1px solid rgba(245,240,225,.13); box-shadow:0 44px 90px -34px rgba(0,18,10,.85); }
.th-why__card img { display:block; width:100%; height:auto; }

/* ============================================================
   TH-CALC — HELOC CALCULATOR (shared component, first used on heloc).
   Clean paper (owner pick A, 2026-07-28): centered eyebrow + title,
   two sliders with live figures, big estimated-line number, split
   bar (mortgage vs available line) + legend + disclaimer. Sits
   between C4 (emerald) and C5 (mist). Label/value type reuses the
   th-ledger pool scales; everything px+vw fluid, live to ~1450.
   ============================================================ */
.th-calc { background:var(--white); padding-block:clamp(28px, 1.6vw + 14px, 46px); } /* MODES-OK pool section pad (matches C5/C6) */
.th-calc__in { max-width:980px; margin-inline:auto; }
.th-calc__head { text-align:center; margin-bottom:clamp(16px, 1.8vw, 30px); }
.th-calc__head .eyebrow { justify-content:center; margin-bottom:8px; }
.th-calc__title { font-family:var(--font-d); font-weight:700; color:var(--racing);
  letter-spacing:-.022em; line-height:1.05; white-space:nowrap;
  font-size:min(2.43rem, 4.82vw); margin:0; } /* MODES-OK all 4 modes, width-ratio retune: "Estimate your line." TRUE 909.9 @100px vs C6 ref 953.4 @4.6vw (probed 2026-07-28) */
.th-calc__title .dot { color:var(--sage); }
.th-calc__fields { display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(16px, 1.2vw + 8px, 30px) clamp(20px, 2.4vw, 44px); /* MODES-OK fluid, all 4 modes */
  max-width:680px; margin:0 auto clamp(18px, 2vw, 30px); }
.th-calc__field { min-width:0; }
.th-calc__field label { display:block; font-family:var(--font-d); font-weight:600;
  color:var(--sage-deep); text-transform:uppercase; letter-spacing:.26em;
  white-space:nowrap; line-height:1;
  font-size:clamp(8.5px, 4.5px + 0.55vw, 12.5px); /* MODES-OK pool: th-ledger label scale */
  margin-bottom:clamp(8px, 0.5vw + 5px, 14px); }
.th-calc__range { -webkit-appearance:none; appearance:none; width:100%; background:transparent;
  height:clamp(18px, 1.4vw + 10px, 26px); cursor:pointer; margin:0; } /* MODES-OK touch-friendly hit area, fluid */
.th-calc__range::-webkit-slider-runnable-track { height:clamp(4px, 0.3vw + 2px, 6px);
  border-radius:999px; background:rgba(0,66,37,.15); }
.th-calc__range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
  width:clamp(14px, 0.6vw + 10px, 20px); height:clamp(14px, 0.6vw + 10px, 20px);
  border-radius:50%; background:var(--racing); border:none;
  margin-top:calc((clamp(4px, 0.3vw + 2px, 6px) - clamp(14px, 0.6vw + 10px, 20px)) / 2);
  box-shadow:0 2px 6px rgba(0,20,10,.3); }
.th-calc__range::-moz-range-track { height:clamp(4px, 0.3vw + 2px, 6px);
  border-radius:999px; background:rgba(0,66,37,.15); }
.th-calc__range::-moz-range-thumb { width:clamp(14px, 0.6vw + 10px, 20px);
  height:clamp(14px, 0.6vw + 10px, 20px); border-radius:50%; background:var(--racing);
  border:none; box-shadow:0 2px 6px rgba(0,20,10,.3); }
.th-calc__fig { font-family:var(--font-d); font-weight:700; color:var(--racing);
  white-space:nowrap; line-height:1; font-variant-numeric:tabular-nums;
  font-size:clamp(13px, 8px + 0.8vw, 19px); /* MODES-OK fluid, all 4 modes */
  margin-top:clamp(6px, 0.4vw + 4px, 11px); }
.th-calc__result { text-align:center; margin-bottom:clamp(14px, 1.6vw, 26px); }
.th-calc__lbl { font-family:var(--font-d); font-weight:600; color:var(--sage-deep);
  text-transform:uppercase; letter-spacing:.26em; white-space:nowrap; line-height:1;
  font-size:clamp(8.5px, 4.5px + 0.55vw, 12.5px); /* MODES-OK pool: th-ledger label scale */
  margin-bottom:clamp(8px, 0.5vw + 5px, 14px); }
.th-calc__big { font-family:var(--font-d); font-weight:700; color:var(--racing);
  letter-spacing:-.022em; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums;
  font-size:clamp(26px, 12px + 2.4vw, 52px); } /* MODES-OK hero-scale figure, fluid all 4 modes */
.th-calc__bar { display:flex; overflow:hidden; border-radius:999px;
  max-width:680px; margin-inline:auto; background:rgba(0,66,37,.12);
  height:clamp(10px, 0.55vw + 7px, 16px); } /* MODES-OK fluid bar, all 4 modes */
.th-calc__bar-m { background:#B9B2A2; transition:width .35s ease; }
.th-calc__bar-h { background:var(--racing); transition:width .35s ease; }
.th-calc__key { display:flex; justify-content:center; gap:clamp(16px, 2vw, 30px);
  margin-top:clamp(8px, 0.8vw, 14px); color:var(--slate);
  font-size:clamp(0.68rem, 0.6rem + 0.3vw, 0.82rem); } /* MODES-OK fluid legend */
.th-calc__key span { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.th-calc__swatch { display:inline-block; border-radius:3px;
  width:clamp(8px, 0.3vw + 6px, 11px); height:clamp(8px, 0.3vw + 6px, 11px); }
.th-calc__swatch--m { background:#B9B2A2; }
.th-calc__swatch--h { background:var(--racing); }
.th-calc__note { text-align:center; color:var(--slate); line-height:1.6;
  white-space:nowrap; /* owner 2026-07-28: ONE line at every px */
  /* MODES-OK all 4 modes: cap = original fine-print clamp ×0.9 (owner 10% shrink);
     fit slopes keep the 53.45em sentence (TRUE 5344.6 @100px Inter, probed 2026-07-28)
     inside the container gutter (clamp(20px,5vw,48px) per side) with 2% margin */
  font-size:min(clamp(0.594rem, 0.522rem + 0.27vw, 0.72rem), 1.65vw, 1.833vw - 0.733px);
  margin:clamp(12px, 1.4vw, 20px) auto 0; }
@media (max-width:560px) {
  .th-calc__fields { grid-template-columns:minmax(0,1fr); max-width:420px; } /* MODES-OK mobile stack at pool 560 break */
}

/* ============================================================
   CONTAINER 5 — STRAIGHT ANSWERS (thin ledger, iteration A)
   ============================================================ */
.th-qa { background:var(--mist); padding-block:clamp(28px, 1.6vw + 14px, 46px); }
.th-qa__in { max-width:980px; margin-inline:auto;
  padding-inline:clamp(28px, 1.6vw + 14px, 46px); }
.th-qa__head { text-align:center; margin-bottom:clamp(12px, 1.4vw, 22px); }
.th-qa__head .eyebrow { justify-content:center; margin-bottom:8px; }
.th-qa__title { font-family:var(--font-d); font-weight:700; color:var(--racing);
  letter-spacing:-.022em; line-height:1.05; white-space:nowrap;
  font-size:min(2.43rem, 3.8vw); margin:0; }
.th-qa__title .dot { color:var(--sage); }
.th-qa__list { border-block:1px solid rgba(143,168,152,.2); }
.th-qa__row { display:grid; align-items:center; /* MODES-OK Stamp B, all 4 modes */
  grid-template-columns:max-content 1fr max-content;
  column-gap:clamp(12px, 1.8vw, 30px);
  padding-block:clamp(12px, 1.8vw, 20px); transition:background .25s; }
.th-qa__row + .th-qa__row { border-top:1px solid rgba(143,168,152,.35); }
.th-qa__row:hover { background:rgba(143,168,152,.09); }
.th-qa__row:hover .th-qa__num { color:var(--sage-deep); -webkit-text-stroke-color:transparent; }
.th-qa__num { font-family:var(--font-d); font-weight:800; align-self:center;
  font-size:clamp(1.15rem, 0.7rem + 1.9vw, 2.1rem); line-height:1;
  min-width:1.35em; font-variant-numeric:tabular-nums; color:transparent;
  -webkit-text-stroke:1.5px rgba(143,168,152,.75);
  transition:color .25s, -webkit-text-stroke-color .25s; }
.th-qa__q { font-family:var(--font-d); font-weight:500; color:var(--slate);
  font-size:clamp(0.89rem, 0.78rem + 0.47vw, 1.09rem); line-height:1.35; margin:0; }
.th-qa__a { margin:0; justify-self:end; }
.th-qa__a span { display:inline-block; font-family:var(--font-d); font-weight:600;
  color:var(--racing); background:rgba(0,66,37,.07); border:1px solid rgba(0,66,37,.13);
  border-radius:999px; line-height:1.35; font-variant-numeric:tabular-nums;
  font-size:clamp(0.78rem, 0.661rem + 0.528vw, 1.14rem); /* MODES-OK all 4 modes, live to ~1450 */
  padding:clamp(4px, 2.68px + 0.367vw, 8px) clamp(11px, 8.03px + 0.826vw, 20px); /* MODES-OK */
  transition:background .25s, border-color .25s, color .25s; }
.th-qa__row:hover .th-qa__a span { background:var(--racing); border-color:var(--racing);
  color:var(--cream); }
.th-qa__cta { display:flex; justify-content:center; margin-top:clamp(14px, 2vw, 22px); }
.th-qa__cta .btn { font-size:clamp(.64rem, .56rem + .4vw, .84rem);
  padding:clamp(8px, .64vw + 4.8px, 13.6px) clamp(14.4px, 1.6vw + 8px, 27.2px); }
@media (max-width:700px) {
  .th-qa__row { grid-template-columns:max-content 1fr; row-gap:clamp(5px, 0.9vw, 10px); }
  .th-qa__num { grid-row:1 / span 2; }
  .th-qa__a { grid-column:2; justify-self:start; } /* MODES-OK small burger + mobile stack */
}
@media (max-width:520px) { .th-qa__title { font-size:min(2.43rem, 4.6vw); } }
@media (max-width:430px) {
  .th-qa__num { -webkit-text-stroke-width:1.2px; }
  .th-qa__row { column-gap:10px; padding-block:11px; }
}

/* ============================================================
   CONTAINER 6 — INDUSTRIES WE FUND (emerald scrim photo cards,
   full pool scale — owner reverted the 70% experiment)
   ============================================================ */
.th-ind { background:var(--white); padding-block:clamp(28px, 1.6vw + 14px, 46px); }
.th-ind__head { text-align:center; margin-bottom:clamp(12px, 1.4vw, 22px); }
.th-ind__head .eyebrow { justify-content:center; margin-bottom:8px; }
.th-ind__title { font-family:var(--font-d); font-weight:700; color:var(--racing);
  letter-spacing:-.022em; line-height:1.05; white-space:nowrap;
  /* MODES-OK owner-confirmed: slope for short headline "Industries we back." */
  font-size:min(2.43rem, 4.6vw); margin:0; }
.th-ind__title .dot { color:var(--sage); }
.th-ind__grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  /* MODES-OK owner-confirmed: main site + big burger photos x0.88 (grid + gap) */
  gap:clamp(8.8px, 1.232vw, 15.84px); width:88%; max-width:739px; margin-inline:auto; }
.th-ind__card { position:relative; border-radius:clamp(12px, 1.6vw, 24px);
  overflow:hidden; aspect-ratio:4/5; border:1px solid rgba(143,168,152,.35); }
.th-ind__card img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .3s cubic-bezier(.4, 0, .2, 1); }
.th-ind__card::after { content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,51,29,.92), rgba(0,51,29,.5) 34%, transparent 66%); }
.th-ind__card:hover img { transform:scale(1.08); }
.th-ind__lbl { position:absolute; left:0; right:0; bottom:clamp(7.92px, 1.144vw, 14.08px);
  z-index:2; text-align:center; font-family:var(--font-d); font-weight:600;
  color:var(--cream); letter-spacing:.01em;
  /* MODES-OK owner-confirmed: labels scale with photos, x0.88 main site + big burger */
  font-size:clamp(0.686rem, 0.598rem + 0.37vw, 0.862rem); }
.th-ind__cta { display:flex; justify-content:center; margin-top:clamp(14px, 2vw, 22px); }
.th-ind__cta .btn { font-size:clamp(.64rem, .56rem + .4vw, .84rem);
  padding:clamp(8px, .64vw + 4.8px, 13.6px) clamp(14.4px, 1.6vw + 8px, 27.2px); }
@media (max-width:700px) {
  /* MODES-OK owner-confirmed: small burger + mobile photos x0.80 (grid, gap, labels) */
  .th-ind__grid { grid-template-columns:repeat(2, minmax(0,1fr));
    gap:clamp(8px, 1.12vw, 14.4px); width:80%; max-width:352px; }
  .th-ind__lbl { bottom:clamp(7.2px, 1.04vw, 12.8px);
    font-size:clamp(0.624rem, 0.544rem + 0.336vw, 0.784rem); }
  /* MODES-OK owner-confirmed: small burger + mobile cards go square */
  .th-ind__card { aspect-ratio:1/1; }
  /* MODES-OK small burger + mobile only (no vertical crop happens >700px where cards
     are 4:5 = the file ratio): the square crop trims 20% of the file height — bias it
     to cut 4% top / 16% bottom so heads keep their headroom (owner 2026-07-28:
     people centered, no head cut off) */
  .th-ind__card img { object-position:center 20%; }
}
/* MODES-OK owner-confirmed: small burger + mobile slope for short headline */
@media (max-width:520px) { .th-ind__title { font-size:min(2.43rem, 5.6vw); } }

/* ============================================================
   CONTAINER 7 — TESTIMONIALS (Trustpilot stars, mist band)
   Follows [[hcc-container-fluid-forms]]: each card is a container
   (container-type:inline-size) and its contents scale in cqi so the
   whole card reads as one designed unit at every px. No eyebrow
   (matches C5/C6). Rhythm: C6 white -> C7 mist -> touch felt.
   MODES-OK: all 4 modes, per-pixel, both clamp ends bounded.
   ============================================================ */
.th-tst { background:var(--mist); padding-block:clamp(28px, 1.6vw + 14px, 46px); }
.th-tst__head { text-align:center; margin-bottom:clamp(18px, 1.9vw, 34px); }
.th-tst__title { font-family:var(--font-d); font-weight:700; color:var(--racing);
  letter-spacing:-.022em; line-height:1.05; white-space:nowrap;
  font-size:min(2.43rem, 3.7vw); margin:0; }
.th-tst__title .dot { color:var(--sage); }
.th-tst__grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px, 1.6vw, 26px); max-width:1000px; margin-inline:auto; }
.th-tst__card { container-type:inline-size;
  display:flex; flex-direction:column; gap:clamp(10px, 3.4cqi, 18px);
  background:var(--white); border:1px solid rgba(143,168,152,.35);
  border-radius:clamp(12px, 1.6vw, 24px); padding:clamp(16px, 5cqi, 28px);
  box-shadow:0 24px 60px -34px rgba(0,18,10,.35); margin:0;
  transition:transform var(--t-fast, .25s) var(--ease-out), box-shadow var(--t-fast, .25s) var(--ease-out); }
.th-tst__card:hover { transform:translateY(-4px); box-shadow:0 34px 74px -34px rgba(0,18,10,.5); }
/* MODES-OK owner-confirmed: 4th review is carousel-only — main site + big burger show the
   original 3 in the grid; the extra card appears only in the <=700px carousel (2026-07-27).
   Placed AFTER the base .th-tst__card rule + doubled class so display:none wins the cascade. */
.th-tst__card.th-tst__card--extra { display:none; }
/* MODES-OK owner-confirmed: stars CENTERED inside the card on all 4 modes (2026-07-27) */
.th-tst__card .th-stars { justify-content:center; gap:clamp(2px, 0.8cqi, 5px); }
.th-tst__card .th-stars span { width:clamp(11px, 4.6cqi, 16px); height:clamp(11px, 4.6cqi, 16px); }
.th-tst__quote { margin:0; font-family:var(--font-b); color:var(--slate);
  line-height:1.55; font-size:clamp(0.82rem, 4.3cqi, 1.02rem); }
.th-tst__by { display:flex; flex-direction:column; gap:clamp(1px, 0.4cqi, 3px); margin-top:auto; }
.th-tst__by b { font-family:var(--font-d); font-weight:600; color:var(--racing);
  font-size:clamp(0.8rem, 4cqi, 0.98rem); }
.th-tst__by span { font-family:var(--font-b); color:var(--sage-deep);
  font-size:clamp(0.68rem, 3.4cqi, 0.82rem); }
/* carousel chrome — hidden by default (>700px = plain 3-up grid) */
.th-tst__viewport { position:relative; }
.th-tst__arrow, .th-tst__dots { display:none; }

/* MODES-OK owner-confirmed: <=700px (small burger + mobile) the 3-up grid becomes an
   INFINITE 1-at-a-time carousel that always shows a neighbor peeking on BOTH sides (owner
   2026-07-27, no dots). Active card = --tst-card of the viewport; JS clones the end cards
   and translates the track by `--tst-slide` per step, nudged right by `--tst-peek` to center
   the active card. All geometry is bounded clamps → per-pixel fluid across 320–700px,
   per [[hcc-fluid-scaling-rule]]. See [[hcc-container-fluid-forms]] (cards keep cqi inside). */
@media (max-width:700px) {
  .th-tst__viewport { position:relative; overflow:hidden; max-width:520px; margin-inline:auto;
    /* card = 74% of viewport → 13% peek each side; gap folded into slide + peek */
    --tst-card:74%; --tst-gap:clamp(8px, 2.4vw, 16px);
    --tst-slide:calc(var(--tst-card) + var(--tst-gap));
    /* MODES-OK: exact center offset = half the leftover after the card (small burger + mobile) */
    --tst-peek:calc((100% - var(--tst-card)) / 2); }
  .th-tst__grid { display:flex; grid-template-columns:none; max-width:none; gap:var(--tst-gap);
    transition:transform clamp(.4s, .34s + .5vw, .6s) var(--ease-out); will-change:transform; }
  .th-tst__card { flex:0 0 var(--tst-card); }
  .th-tst__card.th-tst__card--extra { display:flex; }   /* MODES-OK: 4th review joins the carousel on <=700px */

  .th-tst__arrow { display:flex; align-items:center; justify-content:center;
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:clamp(30px, 3vw + 20px, 40px); height:clamp(30px, 3vw + 20px, 40px);
    border-radius:50%; background:var(--white); border:1px solid rgba(143,168,152,.45);
    color:var(--racing); box-shadow:0 10px 24px -12px rgba(0,18,10,.4);
    cursor:pointer; transition:background var(--t-fast, .25s), transform var(--t-fast, .25s); }
  .th-tst__arrow:hover { background:var(--mist); }
  .th-tst__arrow:active { transform:translateY(-50%) scale(.94); }
  .th-tst__arrow--prev { left:clamp(2px, 1vw, 10px); }
  .th-tst__arrow--next { right:clamp(2px, 1vw, 10px); }
  .th-tst__arrow .icon { width:clamp(13px, 1.4vw + 8px, 18px); height:clamp(13px, 1.4vw + 8px, 18px); display:flex; }
  .th-tst__arrow--prev .icon { transform:scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) {
  .th-tst__grid { transition:none; }
  .th-tst__card { transition:none; }
}
@media (max-width:520px) { .th-tst__title { font-size:min(2.43rem, 4.6vw); } }

/* keep the form ON THE RIGHT and skinny down to phones; title + form header
   wrap when the column gets too narrow to hold one line */
@media (max-width:560px) {
  .th-title { white-space:normal; }
}

/* ============================================================
   LINE OF CREDIT — page overrides. Shares th-* verbatim (cloning
   contract in token-pool.md); per-page surface is ONLY the hero photo
   var + the two retuned title slopes below. MODES-OK all 4 modes:
   owner-locked cloning contract 2026-07-28 — identical fluidity to
   term-loans in every mode; same min(2.43rem, Xvw) recipe live across
   the full range (term's C3/C4 titles have no <=520 relax either),
   slope retuned by measured width ratio so the new headline fills the
   same screen fraction at every px. Hero title keeps the shared clamp
   ("Line of Credit." fits at cap: 419px in a ~770px column).
   ============================================================ */
body[data-page="loc"] .th-hero { --th-hero-img:url('../img/loc-hero.webp'); } /* MODES-OK photo swap only, scrim + pos shared */
/* Hero title ALWAYS one line (owner 2026-07-28). MODES-OK small burger + mobile only
   (<=700px): at >=~500px the shared clamp is the smaller value so sizing stays
   byte-identical to term-loans; below that the title shrinks per-pixel to fit the
   column instead of wrapping. Sized with plain vw math (NOT cqi — container queries
   failed silently in the owner's browser 2026-07-28): column = 0.881vw - 216.4px
   (container pad 5vw x2 + 202px form + gap), "Line of Credit." = 5.957em, 97% fill
   → calc(14.3vw - 36px). Verified fit 340-700px. */
@media (max-width:700px) {
  /* MODES-OK: px-only (no rem) so enlarged browser/OS text settings can't blow the
     title past its column; calc margin also absorbs scrollbar-inclusive vw */
  body[data-page="loc"] .th-title { white-space:nowrap; font-size:min(clamp(30.4px, 12.64px + 3.87vw, 70.4px), calc(13.5vw - 35px)); }
}

/* ============================================================
   REVENUE FINANCING — page overrides. Same carbon-copy contract as
   loc above (token-pool.md): hero photo var + width-ratio slope
   retunes + the locked one-line hero recipe ONLY. MODES-OK all 4
   modes: same min(2.43rem, Xvw) recipe live across the full range,
   slopes retuned by measured width ratio so each headline fills the
   same screen fraction at every px as its term-loans reference.
   ============================================================ */
body[data-page="rbf"] .th-hero { --th-hero-img:url('../img/rbf-hero.webp'); --th-hero-pos:22% 0%; } /* MODES-OK photo swap + pos tune (subject in left third; vertical 0% pins the crop to the photo's top edge so his hair never clips — source has ~2% headroom), scrim shared */
/* "Capital that moves at your speed." 1353.3 vs ref 1326.1 → 3.96 × .9799 */
body[data-page="rbf"] .th-intro__title { font-size:min(2.43rem, 3.88vw); } /* MODES-OK all 4 modes, width-ratio retune */
/* "Built for businesses with real momentum." 1680.6 vs ref 1600.3 → 3.69 × .9522 */
body[data-page="rbf"] .th-why__title { font-size:min(2.43rem, 3.51vw); } /* MODES-OK all 4 modes, width-ratio retune */
/* Hero title STACKS on small screens (owner 2026-07-28): "Revenue Based" line 1,
   "Financing." line 2, via toggle spans in the page markup. Main site + big burger
   (>700px) hide " Based" and show the one-line "Revenue Financing." at the shared
   clamp. MODES-OK small burger + mobile (<=700px): two block lines, font shrinks
   per-pixel to fit the column with plain vw math (NOT cqi — container queries failed
   silently in the owner's browser): longest line "Revenue Based" = 6.186em, column
   = 0.881vw - 216.4px, 97% fill → calc(13.8vw - 35px); above ~480px the shared
   clamp is smaller and wins. Verified fit 340-700px. */
body[data-page="rbf"] .th-title .th-title__based { display:none; }
@media (max-width:700px) {
  /* MODES-OK: px-only (no rem) so enlarged browser/OS text settings can't blow the
     title past its column; calc margin also absorbs scrollbar-inclusive vw */
  body[data-page="rbf"] .th-title { white-space:nowrap; font-size:min(clamp(30.4px, 12.64px + 3.87vw, 70.4px), calc(13vw - 35px)); }
  body[data-page="rbf"] .th-title .th-title__based { display:inline; }
  body[data-page="rbf"] .th-title .th-title__l1,
  body[data-page="rbf"] .th-title .th-title__l2 { display:block; }
}
/* "Ready funds for whatever comes next." 1544.7 vs ref 1326.1 → 3.96 × .8585 */
body[data-page="loc"] .th-intro__title { font-size:min(2.43rem, 3.4vw); } /* MODES-OK all 4 modes, width-ratio retune */
/* "Funds on hand for the moments that matter." 1796.6 vs ref 1600.3 → 3.69 × .891 */
body[data-page="loc"] .th-why__title { font-size:min(2.43rem, 3.29vw); } /* MODES-OK all 4 modes, width-ratio retune */

/* ============================================================
   EQUIPMENT FINANCING — page overrides. Same carbon-copy contract
   as loc/rbf above (token-pool.md): hero photo var + width-ratio
   slope retunes + the locked hero title recipe ONLY. MODES-OK all
   4 modes: same min(2.43rem, Xvw) recipe live across the full
   range, slopes retuned by measured width ratio.
   ============================================================ */
body[data-page="equipment"] .th-hero { --th-hero-img:url('../img/equipment-hero.webp'); --th-hero-pos:22% 13%; } /* MODES-OK photo swap + pos tune (subject sits in the left third; keeps her visible in narrow crops), scrim shared */
/* "The machine pays for itself." 1117.1 vs ref 1326.1 → 3.96 × 1.1871 */
body[data-page="equipment"] .th-intro__title { font-size:min(2.43rem, 4.7vw); } /* MODES-OK all 4 modes, width-ratio retune */
/* C4 title kept from term-loans → no retune. Hero title: one-line
   "Equipment Financing." >700px = 10.84em TRUE rendered width (range-probe measured;
   the scratch measure harness reads ~16% low — fallback font). At the shared clamp it
   would overflow the copy column 701-760px, so fit-cap it: big-burger column =
   66.1vw - 62.4px (10vw pads + 22vw+48 form + 14.4px+1.9vw gap), 95% fill / 10.84em
   → calc(5.79vw - 5.5px); the px clamp is smaller from ~950px up and wins there.
   Px-only re-declare of the shared clamp so an enlarged browser/OS rem can't
   oversize it. MODES-OK main + big burger. */
body[data-page="equipment"] .th-title { font-size:min(clamp(30.4px, 12.64px + 3.87vw, 70.4px), calc(5.79vw - 5.5px)); }
/* Hero title STACKS on small screens (owner 2026-07-28): "Equipment" line 1,
   "Financing." line 2 via toggle spans (rbf pattern). MODES-OK small burger +
   mobile (<=700px): longest line "Equipment" = 5.31em TRUE width, column =
   0.881vw - 216.4px, 95% fill → calc(15.7vw - 39px); above ~436px the shared px
   clamp is smaller and wins. Px-only, no rem, no cqi (both failed in the owner's
   browser 2026-07-28). */
@media (max-width:700px) {
  body[data-page="equipment"] .th-title { white-space:nowrap; font-size:min(clamp(30.4px, 12.64px + 3.87vw, 70.4px), calc(15.7vw - 39px)); }
  body[data-page="equipment"] .th-title .th-title__l1,
  body[data-page="equipment"] .th-title .th-title__l2 { display:block; }
}

/* ---- SBA LOANS (sba) — carbon copy overrides (see brand/page-plans/sba-loans.md).
   Hero title "SBA Loans." = 5.31em TRUE width (531.0 @100px, probed 2026-07-28),
   NARROWER than "Term Loans." → shared clamp everywhere, zero fit math.
   The th-ledger numbers strip (shared component above) is on this page only. */
body[data-page="sba"] .th-hero { --th-hero-img:url('../img/sba-hero.webp'); --th-hero-pos:22% 0%; } /* MODES-OK photo swap + pos tune (subjects left third; vertical 0% pins the top edge so heads never clip, RULE 9), scrim shared */
/* "Small payments. Big moves." 1400.3 vs ref 1589.8 TRUE → 3.96 × 1.1353 */
body[data-page="sba"] .th-intro__title { font-size:min(2.43rem, 4.5vw); } /* MODES-OK all 4 modes, width-ratio retune */
/* "Big plans deserve small payments." 1725.0 vs ref 1903.7 TRUE → 3.69 × 1.1036 */
body[data-page="sba"] .th-why__title { font-size:min(2.43rem, 4.07vw); } /* MODES-OK all 4 modes, width-ratio retune */

/* ---- HELOC (heloc) — carbon copy overrides (see brand/page-plans/heloc.md).
   Hero title "HELOC." is far narrower than "Term Loans." → shared clamp everywhere,
   zero fit math. Page adds two shared components: th-ledger table variant + th-calc. */
body[data-page="heloc"] .th-hero { --th-hero-img:url('../img/heloc-hero.webp'); --th-hero-pos:22% 0%; } /* MODES-OK hero take F 2026-07-29 (bright, smiling couple at their house, WAIST-UP). Plain cover + position tune, same as every other service page. LESSON: the first bright takes were full-body wide shots — subjects' legs ran out at the band's bottom leaving flat green, and the title crossed their bodies. A 135% background-size zoom was tried to compensate and made it worse (zooming past cover lifts the photo's bottom edge INTO the band). The fix is FRAMING, not CSS: waist-up like sba/term-hero so subjects fill the band top to bottom. */
/* "Your equity, on standby." — TRUE 1200.7 @100px (probed 2026-07-28); 3.96 × 1589.8/1200.7 */
body[data-page="heloc"] .th-intro__title { font-size:min(2.43rem, 5.24vw); } /* MODES-OK all 4 modes, width-ratio retune */
/* "The cheapest capital you will ever tap." — TRUE 1879.2 @100px; 3.69 × 1903.7/1879.2 */
body[data-page="heloc"] .th-why__title { font-size:min(2.43rem, 3.74vw); } /* MODES-OK all 4 modes, width-ratio retune */
/* Owner swap 2026-07-29: straight answers moved ABOVE the calculator. Tone swap was
   tried and REJECTED by the owner — each container keeps its ORIGINAL background
   (th-qa mist, th-calc white), so no page-scoped background overrides here. */

/* ============================================================
   FQ — FAQ PAGE (fq-hero shallow photo band + fq slim dropdowns).
   Built from the pool (2026-07-28): section pads, hairlines,
   radii, th-qa question scale, th-qa hover tint, fine-print
   answer scale. Everything px+vw fluid, live to ~1450, all 4
   modes; accordion = grid-rows spring, chevron rotates.
   ============================================================ */
.fq-hero { position:relative; overflow:hidden; display:grid; place-items:center;
  /* nav is fixed and overlays the band top — add --nav-h to BOTH min-height and top
     padding so the title centers in the VISIBLE band (owner 2026-07-28) */
  min-height:calc(var(--nav-h) + clamp(170px, 96px + 16vw, 330px)); /* MODES-OK shallow band, fluid all 4 modes */
  padding-top:calc(var(--nav-h) + clamp(28px, 1.6vw + 14px, 46px)); /* MODES-OK pool pad + nav clearance */
  padding-bottom:clamp(28px, 1.6vw + 14px, 46px); /* MODES-OK pool section pad */
  background-image:
    linear-gradient(to bottom, rgba(0,51,29,.46), rgba(0,51,29,.62) 55%, rgba(0,51,29,.86)),
    var(--fq-hero-img, none);
  background-size:cover; background-position:var(--fq-hero-pos, center 68%); background-color:var(--racing); } /* MODES-OK crop var, default = faq meeting crop; per-page hook overrides */
.fq-hero__title { font-family:var(--font-d); font-weight:700; color:var(--cream);
  letter-spacing:-.022em; line-height:1.05; white-space:nowrap; text-align:center;
  font-size:min(2.43rem, 4.47vw); margin:0; } /* MODES-OK all 4 modes: TRUE 1409.3 @100px (probed 2026-07-28); 3.96 × 1589.8/1409.3, C3 screen fill */
.fq-hero__title .dot { color:var(--sage); }

.fq { background:var(--white); padding-block:clamp(28px, 1.6vw + 14px, 46px); } /* MODES-OK pool section pad */
.fq__in { max-width:980px; margin-inline:auto;
  padding-inline:clamp(0px, 8vw - 57.6px, 46px); } /* MODES-OK pool inner gutter (th-qa recipe), collapses ≤720 */
.fq__cat { font-family:var(--font-d); font-weight:700; color:var(--racing);
  letter-spacing:-.022em; line-height:1.05; white-space:nowrap;
  font-size:var(--t-section-title); /* MODES-OK owner 2026-07-28: same size as the get-in-touch title (shared section-title token, all 4 modes) */
  margin:0 0 clamp(12px, 1.4vw, 22px); } /* MODES-OK pool head margin */
.fq__cat .dot { color:var(--sage); }
.fq + .fq { padding-top:0; } /* categories stack tight; only the first carries the section gap */
.fq__list { background:var(--white); border:1px solid rgba(0,66,37,.14);
  border-radius:clamp(10px, 1.2vw, 16px); overflow:hidden; } /* MODES-OK pool hairline + radius */
.fq__item + .fq__item { border-top:1px solid rgba(0,66,37,.14); }
.fq__q { display:flex; align-items:center; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; color:var(--slate);
  gap:clamp(10px, 1.4vw, 18px); /* MODES-OK pool row gap */
  padding:clamp(12px, 1.8vw, 20px) clamp(14px, 1.6vw + 8px, 28px); /* MODES-OK pool row rhythm */
  font-family:var(--font-d); font-weight:500; line-height:1.35;
  font-size:clamp(0.89rem, 0.78rem + 0.47vw, 1.09rem); /* MODES-OK pool th-qa question scale */
  transition:background .25s, color .25s; }
.fq__q:hover { background:rgba(143,168,152,.09); color:var(--racing); } /* pool hover tint */
.fq__chev { width:clamp(12px, 0.5vw + 9px, 17px); height:clamp(12px, 0.5vw + 9px, 17px); /* MODES-OK fluid chevron */
  color:var(--sage-deep); flex:none;
  transition:transform .3s cubic-bezier(.4, 0, .2, 1); }
.fq__item.is-open .fq__chev { transform:rotate(90deg); }
.fq__item.is-open .fq__q { color:var(--racing); }
.fq__a { display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.4, 0, .2, 1); }
.fq__item.is-open .fq__a { grid-template-rows:1fr; }
.fq__a-in { overflow:hidden; min-height:0; }
.fq__a-in p { color:var(--slate); line-height:1.65;
  font-size:clamp(0.78rem, 0.7rem + 0.35vw, 0.95rem); /* MODES-OK fluid answer text, all 4 modes */
  /* left inset = question pad + chevron + gap so the answer aligns under the question text */
  padding:clamp(2px, 0.4vw, 6px) clamp(14px, 1.6vw + 8px, 28px) clamp(14px, 1.8vw, 22px)
          clamp(36px, 3.5vw + 17px, 63px); margin:0; } /* MODES-OK fluid, all 4 modes */
/* ---- FAQ (faq) — hero photo hook (fq-* components live above) */
body[data-page="faq"] .fq-hero { --fq-hero-img:url('../img/faq-hero.webp'); } /* MODES-OK photo var only */

/* ============================================================
   AB — ABOUT PAGE (pool build 2026-07-28, spec in token-pool.md
   "POOL · AB ABOUT COMPONENTS"). fq-hero reused for the band;
   intro + value cards below. Cards are container-fluid (cqi)
   per the LOCKED RULE so 1x4 and 2x2 both track card width.
   ============================================================ */
.ab-intro { background:var(--white); text-align:center;
  padding-block:clamp(28px, 1.6vw + 14px, 46px); } /* MODES-OK pool section pad, all 4 modes */
.ab-intro__in { max-width:980px; margin-inline:auto; }
.ab-intro__title { font-family:var(--font-d); font-weight:700; color:var(--racing);
  letter-spacing:-.022em; line-height:1.05; white-space:nowrap;
  font-size:min(2.43rem, 4.40vw); /* MODES-OK TRUE 1432.0 @100px (probed 2026-07-28); 3.96 x 1589.8/1432, C3 screen fill, fluid all 4 modes */
  margin:0 0 clamp(18px, 1.9vw, 34px); } /* MODES-OK pool roomy head gap */
.ab-intro__title .dot { color:var(--sage); }
.ab-intro__sub { max-width:720px; margin-inline:auto; color:var(--slate); line-height:1.6;
  font-size:clamp(0.89rem, 0.78rem + 0.47vw, 1.09rem); } /* MODES-OK pool C3 sub token, all 4 modes */

.ab-vals { background:var(--white); padding-top:0;
  padding-bottom:clamp(28px, 1.6vw + 14px, 46px); } /* MODES-OK pool pad; top 0 stacks tight under the intro CTA */
.ab-vals__title { font-family:var(--font-d); font-weight:700; color:var(--racing);
  letter-spacing:-.022em; line-height:1.05; white-space:nowrap; text-align:center;
  font-size:var(--t-section-title); /* MODES-OK shared section-title token (fq__cat / touch standard) */
  margin:0 0 clamp(12px, 1.4vw, 22px); } /* MODES-OK pool head margin */
.ab-vals__title .dot { color:var(--sage); }
.ab-vals__grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  max-width:1080px; margin-inline:auto;
  gap:clamp(12px, 1.6vw, 26px); } /* MODES-OK owner grid lock: 1x4 main site + big burger; pool testimonial gap */
.ab-card { container-type:inline-size; position:relative; background:#fff;
  border:1px solid rgba(143,168,152,.35); text-align:center;
  border-radius:clamp(12px, 1.6vw, 24px); /* MODES-OK pool card radius */
  padding:clamp(12px, 9cqi, 26px); /* MODES-OK cqi pad tracks card width (container-fluid rule) */
  box-shadow:0 24px 60px -34px rgba(0,18,10,.35);
  transition:transform .25s, box-shadow .25s; }
.ab-card::before { content:""; position:absolute; pointer-events:none;
  inset:clamp(6px, 0.8cqi + 4px, 10px); /* MODES-OK fluid inner keyline inset */
  border:1px solid rgba(0,66,37,.10);
  border-radius:calc(clamp(12px, 1.6vw, 24px) - clamp(6px, 0.8cqi + 4px, 10px)); } /* MODES-OK keyline radius follows card radius minus inset */
.ab-card:hover { transform:translateY(-4px); box-shadow:0 30px 70px -34px rgba(0,18,10,.45); }
@media (prefers-reduced-motion:reduce) { .ab-card:hover { transform:none; } }
.ab-card__icon { display:block; margin-inline:auto;
  width:clamp(44px, 30cqi, 88px); height:clamp(44px, 30cqi, 88px); /* MODES-OK owner 2026-07-28 playing-card pip: tile doubled, cqi tracks card width */
  border-radius:clamp(9px, 5.5cqi, 18px); /* MODES-OK cqi tile radius scaled with the pip */
  margin-bottom:clamp(10px, 7cqi, 22px); } /* MODES-OK roomier cqi tile-to-title gap */
.ab-card__t { font-family:var(--font-d); font-weight:700; color:var(--racing);
  letter-spacing:-.022em; line-height:1.15; white-space:nowrap;
  font-size:clamp(0.792rem, 7.04cqi, 1.188rem); /* MODES-OK owner 2026-07-29 title x1.10 in ALL 4 modes (whole curve scaled); "Problem solving." TRUE 824.4 @100px still one line with margin */
  margin:0 0 clamp(5px, 3cqi, 10px); } /* MODES-OK cqi title-to-body gap */
.ab-card__t .dot { color:var(--sage); }
.ab-card__b { color:var(--slate); line-height:1.55; margin:0;
  font-size:clamp(0.66rem, 4.6cqi, 0.92rem); } /* MODES-OK cqi body scale */
@media (min-width:701px) {
  .ab-card__icon { width:clamp(48.4px, 33cqi, 96.8px); height:clamp(48.4px, 33cqi, 96.8px); /* MODES-OK owner 2026-07-29 pip x1.10 in main site + big burger only (whole curve scaled) */
    border-radius:clamp(9.9px, 6.05cqi, 19.8px); } /* MODES-OK tile radius follows the x1.10 pip */
}
@media (max-width:700px) {
  .ab-vals__grid { grid-template-columns:repeat(2, minmax(0,1fr)); max-width:520px;
    gap:clamp(8px, 1.12vw, 14.4px); } /* MODES-OK owner grid lock: 2x2 small burger + mobile; pool phone gap */
}

/* ---- ABOUT (about) — hero photo hook */
body[data-page="about"] .fq-hero { --fq-hero-img:url('../img/about-hero.webp');
  --fq-hero-pos:center 32%; } /* MODES-OK photo vars only; crop keeps the face centered in the shallow band */

/* ============================================================
   SV — SERVICES LANDING (pool build 2026-07-29, spec in
   token-pool.md "POOL · SV SERVICES CARDS" + workbook
   brand/page-plans/services.md). fq-hero + ab-intro reused;
   the photo cards are container-fluid (cqi) per the LOCKED
   RULE so the 2-col and 1-col layouts both track CARD width.
   ============================================================ */
.sv-vals { background:var(--white); padding-top:0;
  padding-bottom:clamp(28px, 1.6vw + 14px, 46px); } /* MODES-OK pool pad; top 0 stacks tight under the intro (ab-vals recipe), all 4 modes */
.sv-vals__grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  max-width:1080px; margin-inline:auto;
  gap:clamp(12px, 1.6vw, 26px); } /* MODES-OK owner grid lock: 2 cols main site + big burger; pool testimonial gap */
.sv-card { container-type:inline-size; position:relative; background:#fff;
  border:1px solid rgba(143,168,152,.35); text-align:left;
  border-radius:clamp(12px, 1.6vw, 24px); /* MODES-OK pool card radius */
  overflow:hidden; /* photo clips inside the card radius */
  box-shadow:0 24px 60px -34px rgba(0,18,10,.35);
  transition:transform .25s, box-shadow .25s;
  display:flex; flex-direction:column; }
.sv-card:hover { transform:translateY(-4px); box-shadow:0 30px 70px -34px rgba(0,18,10,.45); }
@media (prefers-reduced-motion:reduce) { .sv-card:hover { transform:none; } .sv-card:hover .sv-card__photo { transform:none; } }
.sv-card__photo { display:block; width:100%; object-fit:cover;
  height:clamp(120px, 78cqi - 115px, 300px); /* MODES-OK owner 2026-07-29: photo slimmed vs 3/2 and EXTRA smaller on mobile — cqi minus px makes the band proportionally flatter as the card narrows (527px card ≈ 16:9, 330px card ≈ 2.5:1), per-pixel in all 4 modes */
  transition:transform .3s var(--ease-out); } /* MODES-OK C6 photo hover language */
.sv-card:hover .sv-card__photo { transform:scale(1.08); }
.sv-card__in { display:flex; flex-direction:column; flex:1;
  padding:clamp(16px, 5.5cqi, 30px) clamp(16px, 6cqi, 32px) clamp(18px, 6cqi, 32px); } /* MODES-OK owner 2026-07-29 roomier pad (reference match), cqi tracks card width */
.sv-card__t { font-family:var(--font-d); font-weight:700; color:var(--racing);
  letter-spacing:-.022em; line-height:1.15; white-space:nowrap;
  font-size:clamp(0.92rem, 4.2cqi, 1.32rem); /* MODES-OK cqi one-line title tracks card width; longest "Revenue Based Financing." verified at QA widths */
  margin:0 0 clamp(6px, 1.8cqi, 12px); } /* MODES-OK cqi title-to-label gap */
.sv-card__t .dot { color:var(--sage); }
.sv-card__bf { font-family:var(--font-d); font-weight:600; color:var(--racing);
  font-size:clamp(0.7rem, 2.7cqi, 0.88rem); /* MODES-OK cqi label scale */
  margin:0 0 clamp(4px, 1.2cqi, 8px); } /* MODES-OK cqi label-to-list gap */
.sv-card__list { list-style:none; margin:0; padding:0; }
.sv-card__list li { display:flex; align-items:center; gap:clamp(6px, 1.6cqi, 10px); /* MODES-OK cqi check-to-text gap */
  color:var(--ink); font-weight:500; line-height:1.9; /* MODES-OK owner 2026-07-29: check text darker (ink + medium, was slate) — color/weight only, all 4 modes */
  font-size:clamp(0.72rem, 2.9cqi, 0.95rem); } /* MODES-OK cqi one-line bullets track card width */
.sv-card__list li .icon { width:clamp(12px, 2.8cqi, 16px); height:clamp(12px, 2.8cqi, 16px); flex:none; display:flex; } /* MODES-OK cqi check icon */
.sv-card__cta { margin-top:auto; padding-top:clamp(12px, 3.4cqi, 20px); /* MODES-OK cqi list-to-button gap; auto pins buttons level across the row */
  display:flex; justify-content:center; } /* MODES-OK owner 2026-07-29: button centered (reference match), all 4 modes */
.sv-card__cta .btn { font-size:clamp(.64rem, .56rem + .4vw, .84rem);
  padding:clamp(8px, .64vw + 4.8px, 13.6px) clamp(14.4px, 1.6vw + 8px, 27.2px); } /* MODES-OK owner 2026-07-29: Learn more = EXACT th-qa__cta (About us) button curve at every viewport, all 4 modes */
@media (min-width:701px) {
  .sv-card__t { font-size:clamp(1.012rem, 4.62cqi, 1.452rem); } /* MODES-OK owner 2026-07-29 card title x1.10 in main site + big burger; "Revenue Based Financing." still one line */
  .sv-card__bf { font-size:clamp(0.77rem, 2.97cqi, 0.968rem); } /* MODES-OK owner 2026-07-29 Best for x1.10 in main site + big burger */
  .sv-card__list li { font-size:clamp(0.792rem, 3.19cqi, 1.045rem); } /* MODES-OK owner 2026-07-29 bullet text x1.10 in main site + big burger */
  .sv-card__list li .icon { width:clamp(13.2px, 3.08cqi, 17.6px); height:clamp(13.2px, 3.08cqi, 17.6px); } /* MODES-OK owner 2026-07-29 check icon x1.10 with the text */
}
@media (max-width:700px) {
  .sv-vals__grid { grid-template-columns:minmax(0,1fr); max-width:520px;
    gap:clamp(8px, 1.12vw, 14.4px); } /* MODES-OK owner grid lock: 1 col small burger + mobile; pool phone gap */
  .sv-card__photo { height:clamp(108px, 70.2cqi - 103.5px, 270px); } /* MODES-OK owner 2026-07-29: photo band x0.90 in small burger + mobile (whole curve scaled, stays per-pixel) */
  .sv-card__cta .btn { font-size:var(--fs-btn-s); } /* MODES-OK owner 2026-08-02: bump compact Learn more to the same small-screen token as homepage product cards so the Poppins wordmark doesn't read as "Le arn more" */
}

/* ---- SERVICES (services) — hero photo + intro title hooks */
body[data-page="services"] .fq-hero { --fq-hero-img:url('../img/services-hero.webp');
  --fq-hero-pos:center 30%; } /* MODES-OK photo vars only */
body[data-page="services"] .ab-intro__title { font-size:min(2.43rem, 4.65vw); } /* MODES-OK "Find the best option for you." TRUE 1355.0 @100px (probed 2026-07-29, reword round); 3.96 x 1589.8/1355, C3 screen fill */
body[data-page="services"] .ab-vals { background:var(--mist);
  padding-top:clamp(28px, 1.6vw + 14px, 46px); } /* MODES-OK owner 2026-07-29: believe-in band on services sits on the tst mist color and stands alone, so it gets the pool section pad back (About keeps top 0 under its intro) */

/* ---- Industries (industries) — phase 1 hooks only (fq-hero + ab-intro reused,
   workbook brand/page-plans/industries.md). "Industries." hero title reuses the
   shared fq-hero__title size untouched (short-title precedent, TRUE 522.3 @100px). */
body[data-page="industries"] .fq-hero { --fq-hero-img:url('../img/industries-hero.webp');
  --fq-hero-pos:center 45%; } /* MODES-OK photo vars only */

/* ---- SERVICES + ABOUT + FAQ — mobile hero (owner 2026-07-30): shallower band and a
   bigger title on small burger + mobile only. Industries and Apply keep their own values. */
@media (max-width:700px) {
  body[data-page="services"] .fq-hero,
  body[data-page="about"] .fq-hero,
  body[data-page="industries"] .fq-hero,
  body[data-page="faq"] .fq-hero {
    min-height:calc(var(--nav-h) + clamp(112px, 70px + 11.7vw, 240px)); /* MODES-OK band curve x0.73 from the shared 170/96+16vw/330, nav clearance kept so the title stays centered in the visible band */
    padding-top:calc(var(--nav-h) + clamp(20px, 1.15vw + 10px, 34px)); /* MODES-OK pool pad x0.73 + nav clearance */
    padding-bottom:clamp(20px, 1.15vw + 10px, 34px); /* MODES-OK pool pad x0.73 */
    /* the fixed nav overlays the top of the band, so the photo is framed inside the
       CONTENT box (below the nav clearance) while the green wash still covers the whole
       band — this is what lets the subject sit centered in the strip you actually see */
    background-origin:border-box, content-box; } /* MODES-OK layer order = wash, photo */
  body[data-page="about"] .fq-hero { --fq-hero-pos:center 45%; } /* MODES-OK crop only: whole face (eyes through smile) centered in the visible strip */
  body[data-page="services"] .fq-hero { --fq-hero-pos:center 22%; } /* MODES-OK crop only: both faces centered in the visible strip */
  body[data-page="faq"] .fq-hero { --fq-hero-pos:center 96%; } /* MODES-OK crop only: the meeting table sits low in the source, so the frame drops to it */
  body[data-page="industries"] .fq-hero { --fq-hero-pos:center 50%; } /* MODES-OK crop only: keeps the storefront row and street depth centered in the visible strip */
  body[data-page="services"] .fq-hero__title,
  body[data-page="about"] .fq-hero__title,
  body[data-page="industries"] .fq-hero__title,
  body[data-page="faq"] .fq-hero__title {
    font-size:min(calc(7.13px + 3.453vw), calc(7.10vw - 3.13px)); } /* MODES-OK title +18% @393 tapering back to the shared 4.47vw at 701 so nothing jumps at the mode edge; guard = (100vw - gutters) / longest line TRUE 1406.6 @100px ("Frequently Asked Questions.") so no title touches the gutters down to 320 */
}

/* ---- Apply (apply) — thin felt hero only (owner rebuild 2026-07-29): fq-hero band reused
   with NO photo (solid felt, the page's original hero background), one 2-line statement
   title. Old .apply-hero/.chooser/.flow markup removed from the page; their CSS is
   orphaned in git history precedent (.svc). Old chooser/embed markup only in git history. */
body[data-page="apply"] .fq-hero { background-image:none; background-color:var(--felt);
  min-height:calc(var(--nav-h) + clamp(110px, 56px + 11vw, 220px)); /* MODES-OK owner 2026-07-29: apply band ~1/3 shallower than the shared curve (170/96+16vw/330), fluid all 4 modes */
  padding-top:calc(var(--nav-h) + clamp(16px, 1vw + 8px, 28px)); /* MODES-OK owner: top pad cut ~40% from pool (28/1.6vw+14/46), nav clearance kept */
  padding-bottom:clamp(16px, 1vw + 8px, 28px); } /* MODES-OK owner: bottom pad cut to match */
.ap-hero__title { font-family:var(--font-d); font-weight:700; color:var(--cream);
  letter-spacing:-.022em; line-height:1.16; text-align:center; margin:0;
  font-size:clamp(13.2px, 4.48px + 2.42vw, 40.9px); } /* MODES-OK all 4 modes: line 1 TRUE 2272.7 @100px (probed 2026-07-29); spans ~300px @360 -> ~900px @1450, cap engages ~1505px so it grows per-pixel through the whole lock range */
.ap-hero__l { display:block; white-space:nowrap; } /* MODES-OK no px — locks the 2-line break at every width */
@media (max-width:700px) {
  /* MODES-OK owner 2026-07-29 (revised same day): small burger + mobile — original band
     pads restored, top gets a bit extra; title +17% with a fit guard so line 1 never
     escapes the container down to 320 */
  body[data-page="apply"] .fq-hero { min-height:calc(var(--nav-h) + clamp(110px, 56px + 11vw, 220px));
    padding-top:calc(var(--nav-h) + clamp(22px, 1.4vw + 11px, 38px)); padding-bottom:clamp(16px, 1vw + 8px, 28px); }
  .ap-hero__title { font-size:min(calc(5.24px + 2.83vw), calc(4.4vw - 1.76px)); } /* token x1.17; guard = (100vw - container pads) / line 1 TRUE 2272.7 */
}
.ap-hero__title .dot { display:inline; color:var(--sage); }

/* ---- APX apply cards (owner 2026-07-29): 2 centered check-bullet cards — HELOC vs
   Business Funding — SV/IN card box language, cqi internals, Apply Now wired to forms.js.
   Pool entry: token-pool.md POOL · APX APPLY CARDS. */
.apx { background:var(--white); padding-block:clamp(28px, 1.6vw + 14px, 46px); } /* MODES-OK pool section pad */
.apx-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); max-width:1080px; margin-inline:auto; gap:clamp(12px, 1.6vw, 26px); } /* MODES-OK pool grid, all 4 modes */
.apx-card { container-type:inline-size; display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid rgba(143,168,152,.35);
  border-radius:clamp(12px, 1.6vw, 24px); /* MODES-OK pool card radius */
  box-shadow:0 24px 60px -34px rgba(0,18,10,.35); transition:transform .25s, box-shadow .25s;
  padding:clamp(26px, 9.5cqi, 68px) clamp(18px, 5.5cqi, 42px); } /* MODES-OK owner 2026-07-29: taller cards for main site + big burger — vertical pad up ~35%; <=700px block restores the original pad */
.apx-card:hover { transform:translateY(-4px); box-shadow:0 30px 70px -34px rgba(0,18,10,.45); }
@media (prefers-reduced-motion:reduce) { .apx-card:hover { transform:none; } }
.apx-card__ico { margin:auto 0 clamp(14px, 3.4cqi, 26px); } /* MODES-OK owner 2026-07-29 reference round: icon chip tops the card; top margin auto pairs with the button's to center content in the shared row height */
.apx-card__ico img { display:block; width:clamp(48px, 10.8cqi, 77px); height:clamp(48px, 10.8cqi, 77px);
  border-radius:clamp(12px, 2.4cqi, 19px); } /* MODES-OK cqi tile (PNG bakes the cream bg, prod-card precedent); owner +20% round 2026-07-29, radius scaled to match */
.apx-card__t { font-family:var(--font-d); font-weight:700; color:var(--racing); letter-spacing:-.022em;
  white-space:nowrap; font-size:clamp(1.79rem, 7.82cqi, 2.89rem); margin:0 0 clamp(10px, 2.6cqi, 20px); } /* MODES-OK cqi title, one line; ceiling = Business Funding. tighter bottom — the divider carries the gap */
.apx-card__t .dot { color:var(--sage); }
.apx-card__rule { display:block; width:clamp(56px, 14cqi, 96px); height:1px;
  background:rgba(143,168,152,.55); margin:0 0 clamp(18px, 4.6cqi, 38px); } /* MODES-OK reference divider under the title, sage hairline */
.apx-card__list { list-style:none; margin:0 0 clamp(24px, 6cqi, 48px); padding:0;
  display:grid; gap:clamp(18px, 4.4cqi, 36px); justify-items:start; } /* MODES-OK owner 2026-07-29 +25% round: checks gap x1.5 and deeper pre-button margin on main site + big burger (mode blocks below re-tune) */
.apx-card__list li { display:flex; align-items:center; gap:clamp(9px, 2.1cqi, 15px);
  font-family:var(--font-d); font-weight:600; color:var(--ink); white-space:nowrap;
  font-size:clamp(0.99rem, 3.2cqi, 1.35rem); } /* MODES-OK owner 2026-07-29: bullets x1.18 >=701px (<=700px block restores); cqi, never wraps */
.apx-card__list li .icon { width:clamp(16px, 3.3cqi, 24px); height:clamp(16px, 3.3cqi, 24px);
  color:var(--racing); flex:none; display:flex; } /* MODES-OK checks scaled with bullets >=701px (<=700px block restores) */
.apx-card__list li .icon svg { width:100%; height:100%; }
.apx-card .btn { margin-top:auto; }
.apx-empty { container-type:inline-size; max-width:1080px; margin:clamp(12px, 1.6vw, 26px) auto 0; background:#fff;
  border:1px solid rgba(143,168,152,.35); /* MODES-OK owner 2026-07-29: solid hairline card pick — same box language as the cards above */
  border-radius:clamp(12px, 1.6vw, 24px); box-shadow:0 24px 60px -34px rgba(0,18,10,.35); } /* MODES-OK pool card radius + shadow */
.apx-empty__in { display:grid; place-items:center; text-align:center; gap:clamp(5px, 1.3cqi, 14px);
  padding:clamp(26px, 10cqi, 110px) clamp(14px, 3cqi, 34px); } /* MODES-OK owner fluidity round 2026-07-29: cqi inner (container-fluid lock) so the band and its air scale per-pixel with the box at every width/height, mobile included */
.apx-empty .icon { width:clamp(12.8px, 1.52cqi + 12px, 28.8px); height:clamp(12.8px, 1.52cqi + 12px, 28.8px); color:var(--racing); } /* MODES-OK two-ended cqi glyph, owner -20% round 2026-07-29 */
.apx-empty p { margin:0; font-family:var(--font-d); font-weight:700; color:var(--racing);
  white-space:nowrap; font-size:min(clamp(11.2px, 2.08cqi + 9.6px, 32px), 4.4cqi); } /* MODES-OK owner -20% round: whole curve x0.8, still per-pixel to the 1080 box with the cqi shrink-to-fit guard to 320 */
.apx-empty .dot { color:var(--sage); }
.apx-empty[hidden] { display:none; } /* MODES-OK display:grid above would defeat the hidden attr forms.js sets — this keeps the box gone once a form loads */
/* Apply embed head (owner 2026-07-29): big centered title, tighter pending box */
body[data-page="apply"] .embed-shell .sec-head { text-align:center; margin-inline:auto; } /* MODES-OK alignment only */
body[data-page="apply"] .embed-shell .sec-head h2 { font-size:clamp(1.7rem, 1.1rem + 2.8vw, 3rem); } /* MODES-OK big title, fluid all 4 modes, cap ~1465px */
body[data-page="apply"] .embed-shell .microcopy { justify-content:center; } /* MODES-OK alignment only */
body[data-page="apply"] .embed-shell[hidden] { display:none; } /* MODES-OK display:flex below would defeat the hidden attr — shell stays invisible until Apply Now / deep link */
body[data-page="apply"] .embed-shell { display:flex; flex-direction:column;
  scroll-margin-top:calc(var(--nav-h) + 10px); /* MODES-OK owner 2026-07-29: scrollIntoView lands the title just under the fixed nav */
  min-height:calc(100svh - var(--nav-h) - 20px); } /* MODES-OK fills the visible viewport at every px width AND height so the cards above scroll fully out of view */
body[data-page="apply"] .embed-frame { flex:1; min-height:clamp(375px, 37.5vw + 200px, 600px); } /* MODES-OK flex:1 stretches the box to the viewport fill; clamp floor keeps presence on short screens, all 4 modes; a live JotForm iframe still grows past it */
@media (max-width:700px) {
  /* MODES-OK owner 2026-07-29: small burger + mobile go 2-ACROSS like the homepage prod
     cards; internals ride the standing small-screen tokens (--fs-h3/--fs-body-s/--chip/
     --sp-*) so the cards match the prod 2x2 hand at every width, with cqi shrink caps
     from TRUE probes so the nowrap lines never overflow the narrow card. */
  .apx-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3); } /* MODES-OK prod-grid pattern */
  .apx-card { padding:calc(var(--sp-2) * 1.2) calc(var(--sp-2) * .5); border-radius:calc(8px + 2.6vw); } /* MODES-OK prod card curve; side pad x.5 (owner +30% text round 2026-07-29) buys the bigger type room */
  .apx-card__ico { margin-bottom:var(--sp-1); } /* MODES-OK token */
  .apx-card__ico img { width:calc(var(--chip) * 1.08); height:calc(var(--chip) * 1.08); border-radius:calc(4px + 1.5vw); } /* MODES-OK prod chip curve x1.08 (owner: 10% down from the x1.2 round) */
  .apx-card__t { font-size:min(calc(var(--fs-h3) * 1.56), calc(11.19cqi - 0.56px - 0.31vw)); margin-bottom:calc(3px + .8vw); } /* MODES-OK owner +30% round on the +20%: token x1.56, cap-at-max-fit guard = (card - trimmed pads) / "Business Funding." TRUE 893.4, holds to 320 */
  .apx-card__rule { width:calc(24px + 6vw); margin-bottom:calc(6px + 1.6vw); } /* MODES-OK vw curve */
  .apx-card__list { gap:var(--sp-1); margin-bottom:calc(8px + 2vw); } /* MODES-OK tokens */
  .apx-card__list li { gap:var(--sp-1); font-size:min(calc(var(--fs-body-s) * 1.56), calc(7.52cqi - 0.93px - 0.55vw)); } /* MODES-OK owner +30% round on the +20%: token x1.56, cap-at-max-fit guard (owner pick) = (card - pads - check - gap) / "Funding from $5K to $25M" TRUE 1329.2, always 1 line to 320 */
  .apx-card__list li .icon { width:calc(4.8px + 3.12vw); height:calc(4.8px + 3.12vw); } /* MODES-OK prod check curve x1.2 (owner +20% round) */
  .apx-card .btn { width:100%; font-size:var(--fs-btn-s); padding:calc(3.5px + 1.9vw) 0;
    border-radius:calc(4px + 1.5vw); } /* MODES-OK owner 2026-07-29 (final round, supersedes the compact pick): same size recipe as the prod Learn more buttons, solid green kept */
}
body[data-page="industries"] .ab-intro__title { font-size:min(2.43rem, 6.44vw); } /* MODES-OK "We like a challenge." TRUE 978.2 @100px (probed 2026-07-29, reword round); 3.96 x 1589.8/978.2, C3 screen fill */

/* ============================================================
   IN — INDUSTRIES CARDS (pool build 2026-07-29, spec in
   token-pool.md "POOL · IN INDUSTRIES CARDS"). 10 stacked cards:
   photo pane LEFT >=701px / photo band TOP <=700px. Owner locks:
   photos all LOOK THE SAME SIZE (uniform pane width + shared
   fluid min-height), bullets unique across grid, bold closer.
   Container-fluid cqi internals per the LOCKED RULE.
   ============================================================ */
.in-vals { background:var(--white); padding-top:0;
  padding-bottom:clamp(28px, 1.6vw + 14px, 46px); } /* MODES-OK pool section pad; intro above carries the head */
.in-vals__grid { display:grid; grid-template-columns:minmax(0,1fr);
  max-width:1080px; margin-inline:auto;
  gap:clamp(12px, 1.6vw, 26px); } /* MODES-OK sv/ab grid language, all 4 modes */
.in-card { container-type:inline-size; position:relative; display:flex; background:#fff;
  border:1px solid rgba(143,168,152,.35); text-align:left;
  border-radius:clamp(12px, 1.6vw, 24px); overflow:hidden; /* MODES-OK pool card radius */
  box-shadow:0 24px 60px -34px rgba(0,18,10,.35);
  transition:transform .25s, box-shadow .25s;
  min-height:clamp(210px, 30cqi, 340px); } /* MODES-OK owner same-size lock: shared fluid card height sized to the tallest list (Medical) so every photo pane matches */
.in-card:hover { transform:translateY(-4px); box-shadow:0 30px 70px -34px rgba(0,18,10,.45); }
@media (prefers-reduced-motion:reduce) { .in-card:hover { transform:none; } }
.in-card__photo { flex:0 0 34%; width:34%; align-self:stretch; object-fit:cover; } /* MODES-OK uniform pane: fixed width share, fills shared card height (>=701px) */
.in-card__in { flex:1; display:flex; flex-direction:column; justify-content:center; min-width:0;
  padding:clamp(14px, 2.6cqi, 30px) clamp(16px, 3cqi, 34px); } /* MODES-OK cqi pad tracks card width; short lists center against the shared height */
.in-card__t { font-family:var(--font-d); font-weight:700; color:var(--racing);
  letter-spacing:-.022em; line-height:1.1; white-space:nowrap;
  font-size:clamp(0.92rem, 2.1cqi, 1.42rem); /* MODES-OK one-line title, floor holds Manufacturing, Wholesale & Distribution at 360 */
  margin:0 0 clamp(8px, 1.2cqi, 14px); } /* MODES-OK cqi head gap */
.in-card__t .dot { color:var(--sage); }
.in-card__list { list-style:none; margin:0; padding:0; columns:2;
  column-gap:clamp(14px, 2.4cqi, 30px); } /* MODES-OK two columns both layouts, cqi gap */
.in-card__list li { display:flex; align-items:center; break-inside:avoid;
  gap:clamp(6px, 0.8cqi, 10px); color:var(--ink); font-weight:500; line-height:1.9; /* MODES-OK sv bullet language */
  font-size:clamp(0.74rem, 1.35cqi, 0.95rem); } /* MODES-OK fluid bullet scale, all 4 modes */
.in-card__list li::before { content:''; flex:none; border-radius:50%; background:var(--sage);
  width:clamp(5px, 0.55cqi, 7px); height:clamp(5px, 0.55cqi, 7px); } /* MODES-OK fluid dot marker */
.in-card__list li.in-card__close { font-weight:700; color:var(--racing); } /* beats the .in-card__list li weight/color */
@media (max-width:700px) {
  .in-vals__grid { max-width:520px; gap:clamp(8px, 1.12vw, 14.4px); } /* MODES-OK sv phone column width + gap */
  .in-card { flex-direction:column; min-height:0; } /* MODES-OK photo flips on top, height back to content */
  .in-card__photo { flex:none; width:100%; align-self:auto;
    height:clamp(108px, 70.2cqi - 103.5px, 270px); } /* MODES-OK sv mobile photo-band recipe: every card identical, flatter as the card narrows */
}

/* ============================================================
   MOBILE OPTIMIZATION LAYER (owner 2026-07-29) — service pages.
   Appended last so it wins the cascade; every rule is scoped to
   <=700px (small burger + mobile), so main site + big burger
   render byte-identical to before. Values stay clamp()/calc(px+vw)
   per [[hcc-fluid-scaling-rule]]. Built on term-loans, shared th-*
   classes so heloc / sba / loc / equipment / rbf inherit it.
   ============================================================ */
@media (max-width:700px) {

  /* ---- A. type scale ---------------------------------------- */
  /* calmer hero voice on mobile (owner 2026-07-30): the 46px/700 headline and
     500-weight sub read heavier than the photo behind them, so the ramp tops
     out at 41px/600 and the sub/micro step down with it. Hierarchy unchanged. */
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-hero .th-title { white-space:normal; text-wrap:pretty; line-height:1.05;
    font-weight:700; letter-spacing:-.024em;
    font-size:clamp(30px, 20.74px + 2.9vw, 41px); }
  .th-sub { font-size:clamp(13.2px, 11.26px + .61vw, 15.5px); line-height:1.45; max-width:none;
    font-weight:500;
    margin-bottom:clamp(10px, 5px + 1.4vw, 16px); }
  .th-micro { font-size:clamp(10.5px, 9.575px + .29vw, 11.6px); }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) :is(.th-intro__title, .th-why__title, .th-qa__title, .th-ind__title, .th-tst__title),
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .sec-touch .touch__title {
    white-space:normal; text-wrap:pretty; line-height:1.1;
    font-size:clamp(22px, 13px + 4.6vw, 30px); }
  .th-intro__sub { font-size:clamp(14px, 12.2px + .6vw, 16px); line-height:1.55; }
  .eyebrow { font-size:clamp(9.5px, 8.4px + .34vw, 11.5px); letter-spacing:.16em; }

  /* ---- B. hero: stack photo band, copy, form ----------------- */
  .th-hero { --th-minh:auto; }
  .th-hero::after { content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top, rgba(0,51,29,.92) 26%, rgba(0,51,29,.55) 52%,
      rgba(0,51,29,.18) 74%, rgba(0,51,29,0) 100%); }
  .th-in { position:relative; z-index:1; }
  body[data-page="term"] .th-hero { background-position:38% 30%; }
  body[data-page="heloc"] .th-hero { background-position:52% 26%; }
  body[data-page="sba"] .th-hero { background-position:46% 22%; }
  body[data-page="equipment"] .th-hero { background-position:42% 26%; }
  body[data-page="loc"] .th-hero { background-position:36% 24%; }
  body[data-page="rbf"] .th-hero { background-position:center 24%; }
  .th-in { grid-template-columns:minmax(0,1fr); min-height:0;
    gap:clamp(14px, 8px + 1.6vw, 22px);
    padding-top:calc(var(--nav-h) + clamp(96px, 60px + 14vw, 170px));
    padding-bottom:clamp(18px, 10px + 2vw, 30px); }
  .th-copy { align-self:auto; padding-bottom:0; }
  .th-form { align-self:auto; width:100%; max-width:none; }
  .th-form.touch__card { padding:clamp(16px, 10px + 1.6vw, 22px); }
  .th-form h2 { white-space:normal; font-size:clamp(15px, 12.6px + .8vw, 18px); }
  .th-form .touch__form .field label { font-size:clamp(11.5px, 10.3px + .4vw, 13px); }
  .th-form .touch__form input, .th-form .touch__form select {
    font-size:14px; padding:6px 11px; min-height:34px; }
  .th-form .touch__btn { min-height:48px; font-size:15px; }

  /* ---- C. trust band: own block, no collision ---------------- */
  .th-seam { height:auto; padding-bottom:0; }
  .th-trust { transform:none; width:100%; max-width:520px;
    margin:clamp(-30px, -18px - 2vw, -18px) auto clamp(26px, 16px + 2.6vw, 40px);
    flex-wrap:nowrap; align-items:center;
    gap:clamp(8px, 4px + 1.2vw, 16px);
    padding:clamp(14px, 9px + 1.4vw, 20px) clamp(12px, 6px + 1.6vw, 20px); }
  .th-trust__item { flex:1 1 0; min-width:0; }
  .th-trust__div { min-height:clamp(34px, 26px + 2vw, 46px); }
  .th-trust__eyebrow { font-size:clamp(8px, 6.6px + .42vw, 10px); letter-spacing:.06em;
    line-height:1.2; }
  .th-trust__num, .th-trust__name { font-size:clamp(14px, 10.4px + 1.05vw, 19px); }
  .th-stars span { width:clamp(8px, 6.4px + .5vw, 11px); height:clamp(8px, 6.4px + .5vw, 11px); }

  /* ---- D. sections ------------------------------------------ */
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-intro { margin-top:0; margin-bottom:0; }
  .th-intro { margin-top:0; margin-bottom:0;
    padding:clamp(4px, 1vw, 10px) 0 clamp(18px, 10px + 2vw, 30px); }
  .th-next { padding-bottom:clamp(26px, 16px + 2.6vw, 40px); }
  .th-why { margin-top:0; padding-block:clamp(34px, 22px + 3vw, 52px); }
  /* mobile side-by-side card: wider photo, compact one-line checklist */
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-why__in { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); justify-content:stretch;
    column-gap:clamp(10px, 6px + 1.2vw, 18px); row-gap:clamp(12px, 8px + 1.2vw, 20px); align-items:stretch; }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-why__copy { max-width:none; align-self:center; }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-why__media { width:100%; align-self:stretch; }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-why__card { height:100%; }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-why__card img { aspect-ratio:auto; object-fit:cover; height:100%; object-position:50% 50%; }
  .th-why__list { gap:clamp(8px, 6px + .6vw, 12px);
    margin-bottom:clamp(14px, 9px + 1.3vw, 20px); }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-why__list li { display:flex; align-items:center; gap:6px; font-size:clamp(9.5px, 9px + .15vw, 11px); white-space:nowrap; }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-why__list .icon { width:14px; height:14px; }
  .th-qa, .th-ind, .th-tst { padding-block:clamp(34px, 22px + 3vw, 52px); }
  .th-qa__q { font-size:clamp(14px, 12.2px + .6vw, 16px); }
  .th-qa__a span { font-size:clamp(12px, 10.8px + .4vw, 13.5px); }
  .th-ind__grid { gap:clamp(10px, 6px + 1.2vw, 16px); align-items:stretch; }
  .th-ind__card { aspect-ratio:4/3; }
  .th-ind__lbl { font-size:clamp(11.5px, 10.3px + .4vw, 13px); }
  .th-tst__card { padding:clamp(16px, 10px + 1.6vw, 22px); }
  .th-tst__arrow--prev { left:0; }
  .th-tst__arrow--next { right:0; }

  /* ---- E. buttons ------------------------------------------- */
  .th-why .btn, .th-qa__cta .btn, .th-ind__cta .btn {
    min-height:46px; font-size:15px; letter-spacing:.01em;
    padding:clamp(11px, 8px + .8vw, 14px) clamp(20px, 14px + 1.8vw, 28px); }

  /* ---- F. get in touch: keep 2 cols, stop the clipping ------- */
  .sec-touch .touch { grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:clamp(10px, 6px + 1.2vw, 18px); }
  .sec-touch .touch > * { min-width:0; }
  .touch__lede { font-size:clamp(12.5px, 11.3px + .4vw, 14px); line-height:1.5;
    margin-bottom:clamp(16px, 10px + 1.6vw, 24px); }
  .sec-touch .touch__reach-t a, .sec-touch .touch__reach-v { white-space:normal; overflow-wrap:anywhere; line-height:1.3; }
  .sec-touch .touch__card { width:100%; padding:clamp(14px, 8px + 1.6vw, 20px); }
  .sec-touch .touch__card h3 { white-space:nowrap; text-align:center; font-size:clamp(10.5px, 9.5px + .5vw, 13px); }
  .sec-touch .touch__form { gap:clamp(9px, 7px + .55vw, 12px); }
  .sec-touch .touch__form input, .sec-touch .touch__form select { min-width:0; font-size:13.5px; min-height:28px; padding:0 10px; }
  .sec-touch .touch__btn { min-height:36px; font-size:13px; padding:0 10px; }
  .sec-touch .touch__note { color:var(--slate); margin-top:6px; align-items:flex-start;
    font-size:clamp(9.5px, 8.7px + .28vw, 11px); line-height:1.35; }
  .sec-touch .touch__reach-t b { font-size:clamp(8px, 7.2px + .28vw, 9.5px); letter-spacing:.12em; }
  .sec-touch .touch__reach-t a, .sec-touch .touch__reach-v { font-size:clamp(11px, 9.8px + .4vw, 12.5px); }
  .touch__reach .icon--chip { width:clamp(26px, 22px + 1vw, 32px); height:clamp(26px, 22px + 1vw, 32px); }

  /* ---- G. footer -------------------------------------------- */
  .footer__grid { gap:clamp(18px, 12px + 1.6vw, 26px); }
  .footer__brand img { width:min(160px, 48%); }
  .footer address { overflow-wrap:anywhere; }
}

/* ============================================================
   SERVICE PAGES MOBILE HERO PANEL (owner 2026-07-30).
   Scoped to :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) + <=700px so every other page
   and every wider viewport renders byte-identical to before.
   ============================================================ */
.th-hero__cta { display:none; }

@media (max-width:700px) {
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-form { display:none; }

  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-hero { min-height:clamp(390px, 52vh, 470px); }
  body[data-page="term"] .th-hero { background-position:40% 18%; }
  body[data-page="sba"] .th-hero { background-position:46% 16%; }
  body[data-page="heloc"] .th-hero { background-position:52% 16%; }
  body[data-page="equipment"] .th-hero { background-position:42% 16%; }
  body[data-page="loc"] .th-hero { background-position:36% 16%; }
  body[data-page="rbf"] .th-hero { background-position:22% 6%; }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-hero::after {
    background:linear-gradient(to top, rgba(0,51,29,.94) 0%, rgba(0,51,29,.9) 34%,
      rgba(0,51,29,.5) 58%, rgba(0,51,29,0) 78%); }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-in { align-content:end; align-items:end;
    min-height:clamp(390px, 52vh, 470px);
    padding-top:calc(var(--nav-h) + clamp(40px, 22px + 5.6vw, 74px));
    padding-bottom:clamp(8px, 4px + 1vw, 12px); }

  /* one compact left aligned copy group */
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-copy { text-align:left; }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-copy .th-title { margin:clamp(6px, 4px + .6vw, 10px) 0 0; }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-copy .th-sub { margin:clamp(6px, 4px + .6vw, 10px) 0 0; }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-copy .th-micro { margin:clamp(6px, 4px + .6vw, 10px) 0 0; }

  /* glass CTA (owner 2026-07-30): the solid cream block outweighed the
     headline. Same shape and left aligned width, now a frosted cream wash so
     the hero photo reads through it. Fallback below for no backdrop-filter. */
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-hero__cta { display:flex; align-items:center;
    justify-content:center; width:100%; max-width:340px; margin-right:auto;
    background:color-mix(in oklab, var(--cream) 26%, transparent);
    border:1px solid color-mix(in oklab, var(--cream) 42%, transparent);
    color:var(--cream);
    font-weight:600; font-size:15.5px; letter-spacing:.01em;
    min-height:48px; padding:0 clamp(20px, 14px + 1.8vw, 28px);
    margin-top:clamp(8px, 4px + 1vw, 12px);
    backdrop-filter:blur(14px) saturate(130%); }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-hero__cta:active {
    background:color-mix(in oklab, var(--cream) 36%, transparent); }
  @supports not (backdrop-filter:blur(2px)) {
    :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-hero__cta {
      background:color-mix(in oklab, var(--cream) 34%, transparent); }
  }

  /* band pulled up tighter to the button */
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-trust {
    margin:clamp(-52px, -38px - 3vw, -38px) auto clamp(8px, 4px + 1.1vw, 12px); }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-next { padding-top:clamp(12px, 6px + 1.6vw, 20px); }
  :is(body[data-page="term"], body[data-page="loc"], body[data-page="rbf"], body[data-page="equipment"], body[data-page="sba"], body[data-page="heloc"]) .th-intro { padding-top:0; }
}


/* ============================================================
   ALL PAGES MOBILE "LET'S GET IN TOUCH" (owner 2026-07-30).
   Two-column layout is preserved per the owner no-stack lock;
   this only rebalances the columns, drops the icon chips, and
   evens out the card. Applies to every page that renders .sec-touch, <=700px only.
   ============================================================ */
@media (max-width:700px) {
  .sec-touch { padding-block:clamp(30px, 20px + 2.6vw, 46px); }

  /* wider info column so the left text is no longer cramped */
  .sec-touch .touch {
    grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
    gap:clamp(10px, 6px + 1.2vw, 16px);
    align-items:start; }

  /* chips removed on mobile: the uppercase eyebrow already labels each row */
  .sec-touch .touch__reach .icon--chip { display:none; }
  .sec-touch .touch__reach li { gap:0; align-items:flex-start; }
  .sec-touch .touch__reach { gap:clamp(10px, 7px + .8vw, 14px); }

  /* email wraps cleanly instead of splitting a word */
  .sec-touch .touch__reach-t { min-width:0; }
  .sec-touch .touch__reach-t a,
  .sec-touch .touch__reach-v {
    white-space:normal; overflow-wrap:anywhere; min-width:0; max-width:100%;
    font-size:clamp(0.68rem, 0.64rem + 0.18vw, 0.88rem); line-height:1.34; }
  .sec-touch .touch__reach-t b {
    font-size:clamp(0.48rem, 0.45rem + 0.12vw, 0.52rem); letter-spacing:.14em;
    margin-bottom:1px; }
  .sec-touch .touch__lede {
    font-size:clamp(0.72rem, 0.68rem + 0.22vw, 0.88rem); line-height:1.4;
    margin-bottom:clamp(12px, 8px + 1.05vw, 18px); }

  /* form card: skinnier fields, one-line centered header, tighter frame */
  .sec-touch .touch__card {
    padding:clamp(12px, 8px + 1.05vw, 16px) clamp(11px, 7px + 1.05vw, 14px)
            clamp(10px, 6px + 1.05vw, 12px); }
  .sec-touch .touch__card h3 {
    white-space:nowrap; text-align:center;
    font-size:clamp(0.72rem, 0.65rem + 0.35vw, 0.92rem); line-height:1.2;
    margin-bottom:clamp(10px, 6px + 1.05vw, 14px); }
  .sec-touch .touch__form { gap:clamp(8px, 6px + .55vw, 11px); }
  .sec-touch .touch__form .field label {
    font-size:clamp(0.65rem, 0.62rem + 0.15vw, 0.74rem); margin-bottom:3px; }
  .sec-touch .touch__form input,
  .sec-touch .touch__form select {
    font-size:13px;
    min-height:28px; padding:0 clamp(9px, 6px + .8vw, 12px); line-height:1.2; }
  .sec-touch .touch__btn {
    min-height:36px; padding:0 clamp(12px, 8px + 1vw, 16px);
    font-size:clamp(0.75rem, 0.7rem + 0.25vw, 0.88rem); }
  .sec-touch .touch__note {
    font-size:clamp(0.6rem, 0.57rem + 0.16vw, 0.7rem); line-height:1.35;
    align-items:flex-start; margin-top:clamp(-2px, 0px, 2px); }
  .sec-touch .touch__note .icon { margin-top:2px; }
}

/* ============================================================
   HOMEPAGE MOBILE POLISH (<=700px)
   Sizing / weight / tap-target consistency only. Placement is
   unchanged, and the "Let's get in touch" section is left as is.
   ============================================================ */
@media (max-width:700px) {
  /* --- captions: one caption scale across eyebrows, trust band, stat labels --- */
  body[data-page="home"] .eyebrow,
  body[data-page="home"] .hero .eyebrow {
    font-size:clamp(9.6px, 9px + .22vw, 10.6px); font-weight:600;
    letter-spacing:.2em; }
  body[data-page="home"] .trust-band__item {
    font-size:clamp(9.6px, 9px + .22vw, 10.6px); font-weight:600;
    letter-spacing:.06em; white-space:nowrap; }
  body[data-page="home"] .trust-band__item .icon { width:15px; height:15px; }
  body[data-page="home"] .stat-card__label {
    font-size:clamp(9.6px, 9px + .22vw, 10.6px); font-weight:600; letter-spacing:.04em; }

  /* --- stat bridge: equal card heights so the row reads as one band --- */
  body[data-page="home"] .stat-bridge__row { align-items:stretch; }
  body[data-page="home"] .stat-card { display:grid; align-content:center; }
  body[data-page="home"] .stat-card__num { font-size:clamp(16.5px, 15px + .5vw, 19px); }

  /* --- buttons: consistent tap targets and one label weight --- */
  body[data-page="home"] .btn {
    min-height:44px; font-weight:600;
    font-size:clamp(12.6px, 11.9px + .22vw, 13.8px); }
  body[data-page="home"] .btn--sm {
    min-height:40px; font-size:clamp(11.6px, 11.1px + .18vw, 12.6px); }

  /* --- product cards: title/list in step with the caption + body scale --- */
  body[data-page="home"] .prod__head h3 {
    font-size:clamp(15px, 13.6px + .42vw, 17px); line-height:1.25; }
  body[data-page="home"] .prod__list li {
    font-size:clamp(11.2px, 10.7px + .18vw, 12.2px); line-height:1.5; }

  /* --- choose us: fluid title + readable body, same rhythm as the cards --- */
  body[data-page="home"] .choose-us__title {
    font-size:clamp(19px, 16px + 1.1vw, 24px); text-wrap:pretty; }
  body[data-page="home"] .choose-us__item h3 {
    font-size:clamp(15px, 13.6px + .42vw, 17px); margin-bottom:5px; }
  body[data-page="home"] .choose-us__item p {
    font-size:clamp(11.6px, 11.1px + .2vw, 12.6px); line-height:1.5; max-width:258px; }

  /* --- match card bullets: one line each where the copy allows --- */
  body[data-page="home"] .qcard b {
    font-size:clamp(12.4px, 11.7px + .25vw, 13.6px); line-height:1.4; text-wrap:pretty; }

  /* --- FAQ card: the heading is a real title again, questions stay compact --- */
  body[data-page="home"] .faqcard__head h2 {
    white-space:normal; text-wrap:pretty;
    font-size:clamp(17px, 14.6px + 1.1vw, 22px); line-height:1.2; }
  body[data-page="home"] .faqq__q {
    font-size:clamp(12.2px, 11.6px + .22vw, 13.4px); line-height:1.35; }
}

/* ============================================================
   HOMEPAGE: SMALL BURGER / BIG BURGER / MAIN SITE POLISH
   Continues the mobile pass upward so every value only grows as
   the viewport grows. Sizing, weight and tap targets only.
   Placement, copy and the "Let's get in touch" section unchanged.
   ============================================================ */

/* --- small burger (521-700px): even out the button heights --- */
@media (min-width:521px) and (max-width:700px) {
  body[data-page="home"] .btn {
    padding-block:0; min-height:46px; }
  body[data-page="home"] .btn--sm {
    padding-block:0; min-height:42px; }
  /* lede continues into the big-burger ramp instead of overshooting it */
  body[data-page="home"] .lede { font-size:clamp(15.2px, 14px + .3vw, 16.4px); }
}
@media (max-width:520px) {
  body[data-page="home"] .lede { font-size:clamp(14.4px, 13.4px + .28vw, 15.6px); }
}

/* --- big burger (701-920px) --- */
@media (min-width:701px) and (max-width:920px) {
  /* captions: one size and one weight for eyebrow, trust band, stat labels */
  body[data-page="home"] .eyebrow,
  body[data-page="home"] .hero .eyebrow {
    font-size:clamp(10.8px, 10.2px + .09vw, 11.8px); font-weight:600; letter-spacing:.2em; }
  body[data-page="home"] .trust-band__item {
    font-size:clamp(10.8px, 10.2px + .09vw, 11.8px); font-weight:600; letter-spacing:.06em; }
  body[data-page="home"] .stat-card__label {
    font-size:clamp(10.8px, 10.2px + .09vw, 11.8px); font-weight:600; letter-spacing:.04em; }

  /* body copy: continues upward from small burger, never dips */
  body[data-page="home"] .lede { font-size:clamp(16.6px, 15.6px + .18vw, 17.4px); }
  body[data-page="home"] .prod__list li { font-size:clamp(12.4px, 11.8px + .09vw, 13.2px); }
  body[data-page="home"] .choose-us__item p { font-size:clamp(12.8px, 12.2px + .09vw, 13.4px); max-width:270px; }
  body[data-page="home"] .qcard b { font-size:clamp(13.4px, 12.8px + .09vw, 14.2px); }
  body[data-page="home"] .faqq__q { font-size:clamp(13.4px, 12.9px + .07vw, 14px); }

  /* buttons: one weight, one height ramp */
  body[data-page="home"] .btn {
    font-weight:600; padding-block:0; min-height:48px;
    font-size:clamp(14.2px, 13.6px + .09vw, 15.2px); }
  body[data-page="home"] .btn--sm {
    padding-block:0; min-height:44px;
    font-size:clamp(12.8px, 12.2px + .09vw, 13.6px); }
}

/* --- main site (921px and up) --- */
@media (min-width:921px) {
  /* captions unified with the burger modes, one step larger */
  body[data-page="home"] .eyebrow,
  body[data-page="home"] .hero .eyebrow {
    font-size:clamp(12px, 11.6px + .03vw, 12.8px); font-weight:600; letter-spacing:.2em; }
  body[data-page="home"] .trust-band__item {
    font-size:clamp(12px, 11.6px + .03vw, 12.8px); font-weight:600; letter-spacing:.06em; }
  body[data-page="home"] .stat-card__label {
    font-size:clamp(12.4px, 12px + .03vw, 13.2px); font-weight:600; letter-spacing:.04em; }

  /* supporting copy no longer reads smaller than the product list items */
  body[data-page="home"] .choose-us__item p {
    font-size:clamp(13.4px, 13px + .03vw, 14.2px); max-width:290px; }

  /* buttons: hero matches the rest, heights on one ramp */
  body[data-page="home"] .btn {
    font-weight:600; padding-block:0; min-height:52px; }
  body[data-page="home"] .btn--sm {
    padding-block:0; min-height:46px; }
}

/* hero CTA joins the same height ramp in the burger range (its own
   .hero .hero__ctas .btn rule out-ranks the generic home button rule) */
@media (max-width:520px) {
  body[data-page="home"] .hero .hero__ctas .btn { padding-block:0; min-height:44px; }
}
@media (min-width:521px) and (max-width:700px) {
  body[data-page="home"] .hero .hero__ctas .btn { padding-block:0; min-height:46px; }
}
@media (min-width:701px) and (max-width:920px) {
  body[data-page="home"] .hero .hero__ctas .btn { padding-block:0; min-height:48px; }
}

/* ============================================================
   INDUSTRIES PAGE POLISH (owner 2026-07-30).
   Same pool as the homepage pass: one caption scale, one title
   ramp, one body ramp, one button system, stepped across all
   four modes so no value ever shrinks as the viewport grows.
   Scoped to body[data-page="industries"]; placement and copy are
   unchanged and .sec-touch is deliberately excluded.
   ============================================================ */

/* ---- mobile (<=520px) ---- */
@media (max-width:520px) {
  body[data-page="industries"] .eyebrow {
    font-size:clamp(9.6px, 9px + .22vw, 10.6px); font-weight:600; letter-spacing:.2em; }
  body[data-page="industries"] .in-card__t {
    font-size:clamp(15.4px, 14.4px + .26vw, 16.8px); }
  body[data-page="industries"] .in-card__list li {
    font-size:clamp(12px, 11.3px + .18vw, 12.6px); }
  body[data-page="industries"] .th-tst__quote {
    font-size:clamp(13.2px, 12.4px + .2vw, 13.8px); }
  /* attribution + stars sit one step BELOW the quote so the quote stays primary */
  body[data-page="industries"] .th-tst__by,
  body[data-page="industries"] .th-stars {
    font-size:clamp(11.2px, 10.6px + .18vw, 11.9px); } /* MODES-OK was frozen at 15.5px, i.e. larger than the 13.2px quote */
  body[data-page="industries"] .th-tst__arrow {
    width:36px; height:36px; } /* MODES-OK one tap target instead of 31 -> 36 drift */
  body[data-page="industries"] .ab-intro__sub {
    font-size:clamp(14.4px, 13.4px + .28vw, 15.6px); }
  body[data-page="industries"] .btn:not(.touch__btn) {
    padding-block:0; min-height:44px; font-weight:600;
    font-size:clamp(12.6px, 11.9px + .22vw, 13.8px); }
  body[data-page="industries"] .btn--sm {
    padding-block:0; min-height:40px;
    font-size:clamp(11.6px, 11.1px + .18vw, 12.6px); }
}

/* ---- small burger (521-700px) ---- */
@media (min-width:521px) and (max-width:700px) {
  body[data-page="industries"] .eyebrow {
    font-size:clamp(10px, 9.2px + .18vw, 10.7px); font-weight:600; letter-spacing:.2em; }
  body[data-page="industries"] .in-card__t {
    font-size:clamp(16px, 14.8px + .3vw, 17.8px); }
  body[data-page="industries"] .in-card__list li {
    font-size:clamp(12.8px, 12px + .14vw, 13.4px); }
  body[data-page="industries"] .th-tst__quote {
    font-size:clamp(14px, 13px + .19vw, 14.9px); }
  body[data-page="industries"] .th-tst__by,
  body[data-page="industries"] .th-stars {
    font-size:clamp(12px, 11.3px + .14vw, 12.8px); } /* MODES-OK one step under the quote */
  /* the shared fluid curve DIPPED here (23.9px @520 -> 22.2px @600); this ramps
     straight from the 520 value up to the 701 value so nothing ever shrinks */
  body[data-page="industries"] .th-tst__title {
    font-size:clamp(23.9px, 18.1px + 1.114vw, 26px); } /* MODES-OK monotonic repair */
  body[data-page="industries"] .th-tst__arrow {
    width:38px; height:38px; } /* MODES-OK */
  body[data-page="industries"] .ab-intro__sub {
    font-size:clamp(15.2px, 14px + .3vw, 16.4px); }
  body[data-page="industries"] .btn:not(.touch__btn) {
    padding-block:0; min-height:46px; font-weight:600;
    font-size:clamp(13.8px, 13.1px + .14vw, 14.6px); }
  body[data-page="industries"] .btn--sm {
    padding-block:0; min-height:42px;
    font-size:clamp(12.6px, 12px + .12vw, 13.4px); }
}

/* ---- mobile + small burger card cleanup (<=700px) ---- */
@media (max-width:700px) {
  /* dot aligns to the FIRST line of a wrapped bullet instead of floating */
  body[data-page="industries"] .in-card__list li {
    display:grid; grid-template-columns:auto minmax(0,1fr);
    align-items:start; line-height:1.45; margin-bottom:5px; }
  body[data-page="industries"] .in-card__list li::before {
    margin-top:.5em; }
  body[data-page="industries"] .in-card__list {
    column-gap:clamp(10px, 6px + 1.4vw, 18px); }
  body[data-page="industries"] .in-card__t {
    white-space:normal; text-wrap:pretty; line-height:1.2;
    margin-bottom:clamp(7px, 5px + .6vw, 11px); }
  body[data-page="industries"] .in-card__in {
    padding:clamp(12px, 8px + 1.2vw, 18px) clamp(13px, 9px + 1.2vw, 20px)
            clamp(11px, 7px + 1.2vw, 16px); }
  /* every card photo band the same height */
  body[data-page="industries"] .in-card__photo {
    height:auto; aspect-ratio:16/7; object-position:center 42%; }
  body[data-page="industries"] .th-tst__title { text-wrap:pretty; }
  /* the info column could push the grid 4px past a 320px content box */
  body[data-page="industries"] .sec-touch .touch > *,
  body[data-page="industries"] .sec-touch .touch__info,
  body[data-page="industries"] .sec-touch .touch__reach-t { min-width:0; max-width:100%; }
  body[data-page="industries"] .sec-touch .touch__lede,
  body[data-page="industries"] .sec-touch .touch__reach-t a,
  body[data-page="industries"] .sec-touch .touch__reach-v { overflow-wrap:anywhere; }
  /* "See how much you qualify for." stays on ONE line, so it has to size to the
     card's own width (cqi) instead of spilling past it on 320-400px phones */
  body[data-page="industries"] .sec-touch .touch__card h3 {
    font-size:min(clamp(0.72rem, 0.65rem + 0.35vw, 0.92rem), 5.45cqi); }
  body[data-page="industries"] .footer address,
  body[data-page="industries"] .footer a { overflow-wrap:anywhere; }
}

/* ---- big burger (701-920px) ---- */
@media (min-width:701px) and (max-width:920px) {
  body[data-page="industries"] .eyebrow {
    font-size:clamp(10.8px, 10.2px + .09vw, 11.8px); font-weight:600; letter-spacing:.2em; }
  body[data-page="industries"] .in-card__t {
    font-size:clamp(17.4px, 16.2px + .2vw, 19px); }
  body[data-page="industries"] .in-card__list li {
    font-size:clamp(13.4px, 12.6px + .1vw, 14.2px); }
  body[data-page="industries"] .th-tst__quote {
    font-size:clamp(15px, 14.2px + .1vw, 15.8px); }
  body[data-page="industries"] .th-tst__by,
  body[data-page="industries"] .th-stars {
    font-size:clamp(13px, 12.4px + .09vw, 13.8px); } /* MODES-OK one step under the quote */
  body[data-page="industries"] .ab-intro__sub {
    font-size:clamp(16.6px, 15.6px + .18vw, 17.4px); }
  body[data-page="industries"] .btn:not(.touch__btn) {
    padding-block:0; min-height:48px; font-weight:600;
    font-size:clamp(14.2px, 13.6px + .09vw, 15.2px); }
  body[data-page="industries"] .btn--sm {
    padding-block:0; min-height:44px;
    font-size:clamp(12.8px, 12.2px + .09vw, 13.6px); }
}

/* ---- main site (>=921px) ---- */
@media (min-width:921px) {
  body[data-page="industries"] .eyebrow {
    font-size:clamp(12px, 11.6px + .03vw, 12.8px); font-weight:600; letter-spacing:.2em; }
  /* cqi guard keeps the longest one-line title inside the text pane */
  body[data-page="industries"] .in-card__t {
    font-size:min(clamp(19.2px, 17.6px + .16vw, 22.8px), 2.62cqi); }
  body[data-page="industries"] .in-card__list li {
    font-size:clamp(14.4px, 13.4px + .09vw, 15.6px); }
  body[data-page="industries"] .th-tst__quote {
    font-size:clamp(16px, 15.2px + .06vw, 17.2px); }
  body[data-page="industries"] .th-tst__by,
  body[data-page="industries"] .th-stars {
    font-size:clamp(14px, 13.6px + .03vw, 14.6px); } /* MODES-OK one step under the quote */
  body[data-page="industries"] .ab-intro__sub {
    font-size:clamp(17.4px, 17px + .03vw, 18.4px); }
  body[data-page="industries"] .btn:not(.touch__btn) {
    padding-block:0; min-height:52px; font-weight:600;
    font-size:clamp(15px, 14.4px + .06vw, 16px); } /* MODES-OK label was DROPPING to 12.6px at 921 */
  body[data-page="industries"] .btn--sm {
    padding-block:0; min-height:46px; }
}

/* ============================================================
   ABOUT PAGE POLISH (owner 2026-07-30).
   Same pool as the homepage / services / industries passes: one
   caption scale, one title ramp, one body ramp, one button
   system, stepped across all four modes so no value ever
   shrinks as the viewport grows. Scoped to
   body[data-page="about"]; placement and copy are unchanged.
   ============================================================ */

/* ---- mobile (<=520px) ---- */
@media (max-width:520px) {
  /* the cqi curve floors at 12.67px, which is WIDER than the value card at
     phone widths, so the nowrap title was clipped; it wraps here instead and
     rides its own readable ramp */
  body[data-page="about"] .ab-card__t {
    white-space:normal; text-wrap:balance;
    font-size:clamp(13.2px, 12.4px + .25vw, 14.5px); } /* MODES-OK was frozen at 12.7px and overflowing the card */
  body[data-page="about"] .ab-card__b {
    font-size:clamp(11.2px, 10.6px + .18vw, 11.9px); } /* MODES-OK was frozen at 10.56px in every mode */
  body[data-page="about"] .ab-intro__sub {
    font-size:clamp(14.4px, 13.4px + .28vw, 15.6px); }
  body[data-page="about"] .th-tst__quote {
    font-size:clamp(13.2px, 12.4px + .2vw, 13.8px); }
  /* attribution + stars sit one step BELOW the quote so the quote stays primary */
  body[data-page="about"] .th-tst__by,
  body[data-page="about"] .th-stars {
    font-size:clamp(11.2px, 10.6px + .18vw, 11.9px); } /* MODES-OK was frozen at 15.5px, i.e. larger than the quote */
  body[data-page="about"] .th-tst__arrow {
    width:36px; height:36px; } /* MODES-OK one tap target instead of 30 -> 36 drift */
  body[data-page="about"] .btn:not(.touch__btn) {
    padding-block:0; min-height:44px; font-weight:600;
    font-size:clamp(12.6px, 11.9px + .22vw, 13.8px); }
  body[data-page="about"] .btn--sm {
    padding-block:0; min-height:40px;
    font-size:clamp(11.6px, 11.1px + .18vw, 12.6px); }
}

/* ---- small burger (521-700px) ---- */
@media (min-width:521px) and (max-width:700px) {
  body[data-page="about"] .ab-card__t {
    white-space:normal; text-wrap:balance;
    font-size:clamp(13.7px, 12.9px + .16vw, 14.9px); }
  body[data-page="about"] .ab-card__b {
    font-size:clamp(11.6px, 11px + .12vw, 12.2px); }
  body[data-page="about"] .ab-intro__sub {
    font-size:clamp(15.2px, 14px + .3vw, 16.4px); }
  body[data-page="about"] .th-tst__quote {
    font-size:clamp(14px, 13px + .19vw, 14.9px); }
  body[data-page="about"] .th-tst__by,
  body[data-page="about"] .th-stars {
    font-size:clamp(12px, 11.3px + .14vw, 12.8px); } /* MODES-OK one step under the quote */
  /* the shared fluid curve DIPPED here (23.9px @520 -> 22.2px @600); this ramps
     straight from the 520 value up to the 701 value so nothing ever shrinks */
  body[data-page="about"] .th-tst__title {
    font-size:clamp(23.9px, 18.1px + 1.114vw, 26px); } /* MODES-OK monotonic repair */
  body[data-page="about"] .th-tst__arrow {
    width:38px; height:38px; } /* MODES-OK */
  body[data-page="about"] .btn:not(.touch__btn) {
    padding-block:0; min-height:46px; font-weight:600;
    font-size:clamp(13.8px, 13.1px + .14vw, 14.6px); }
  body[data-page="about"] .btn--sm {
    padding-block:0; min-height:42px;
    font-size:clamp(12.6px, 12px + .12vw, 13.4px); }
}

/* ---- mobile + small burger cleanup (<=700px) ---- */
@media (max-width:700px) {
  body[data-page="about"] .ab-card__t { line-height:1.2; }
  body[data-page="about"] .ab-intro__title,
  body[data-page="about"] .ab-vals__title,
  body[data-page="about"] .th-tst__title { text-wrap:pretty; }
  /* the info column could push the contact grid past a 320px content box */
  body[data-page="about"] .sec-touch .touch > *,
  body[data-page="about"] .sec-touch .touch__info,
  body[data-page="about"] .sec-touch .touch__reach-t { min-width:0; max-width:100%; }
  body[data-page="about"] .sec-touch .touch__lede,
  body[data-page="about"] .sec-touch .touch__reach-t a,
  body[data-page="about"] .sec-touch .touch__reach-v { overflow-wrap:anywhere; }
  /* "See how much you qualify for." stays on ONE line, so it has to size to the
     card's own width (cqi) instead of spilling past it on 320-400px phones */
  body[data-page="about"] .sec-touch .touch__card h3 {
    font-size:min(clamp(0.72rem, 0.65rem + 0.35vw, 0.92rem), 5.45cqi); }
  body[data-page="about"] .sec-touch .touch__btn {
    font-size:clamp(12.4px, 11.8px + .18vw, 13.2px); }
  body[data-page="about"] .footer address,
  body[data-page="about"] .footer a { overflow-wrap:anywhere; }
}

/* ---- big burger (701-920px) ---- */
@media (min-width:701px) and (max-width:920px) {
  /* the 4-up grid returns here, so the cqi title still overflows: it keeps the
     wrap and continues the ramp up from the 700px value */
  body[data-page="about"] .ab-card__t {
    white-space:normal; text-wrap:balance; line-height:1.2;
    font-size:clamp(14.1px, 13px + .16vw, 15.5px); } /* MODES-OK was dropping back to 12.7px and clipping */
  body[data-page="about"] .ab-card__b {
    font-size:clamp(12px, 11.4px + .09vw, 12.6px); }
  body[data-page="about"] .ab-intro__sub {
    font-size:clamp(16.6px, 15.6px + .18vw, 17.4px); }
  body[data-page="about"] .th-tst__quote {
    font-size:clamp(15px, 14.2px + .1vw, 15.8px); } /* MODES-OK was dropping to 13.1px at 701 */
  body[data-page="about"] .th-tst__by,
  body[data-page="about"] .th-stars {
    font-size:clamp(13px, 12.4px + .09vw, 13.8px); } /* MODES-OK one step under the quote */
  body[data-page="about"] .btn:not(.touch__btn) {
    padding-block:0; min-height:48px; font-weight:600;
    font-size:clamp(14.2px, 13.6px + .09vw, 15.2px); } /* MODES-OK label was DROPPING to 11.8px at 701 */
  body[data-page="about"] .btn--sm {
    padding-block:0; min-height:44px;
    font-size:clamp(12.8px, 12.2px + .09vw, 13.6px); }
  body[data-page="about"] .sec-touch .touch__btn {
    font-size:clamp(13.4px, 12.8px + .09vw, 14.2px); } /* MODES-OK was DROPPING to 11.8px at 701 */
}

/* ---- main site (>=921px) ---- */
@media (min-width:921px) {
  body[data-page="about"] .ab-intro__sub {
    font-size:clamp(17.4px, 17px + .03vw, 18.4px); } /* MODES-OK base curve dipped 17.1px @820 -> 16.8px @921 */
  body[data-page="about"] .ab-card__t {
    font-size:clamp(14.6px, 13.4px + .13vw, 16.6px); } /* MODES-OK cqi curve flatlined then dipped (14.1px @1280 -> 13.9px @1600) */
  body[data-page="about"] .ab-card__b {
    font-size:clamp(12.7px, 12.1px + .07vw, 13.6px); } /* MODES-OK was frozen at 10.56px */
  body[data-page="about"] .th-tst__quote {
    font-size:clamp(16px, 15.2px + .06vw, 17.2px); }
  body[data-page="about"] .th-tst__by,
  body[data-page="about"] .th-stars {
    font-size:clamp(14px, 13.6px + .03vw, 14.6px); } /* MODES-OK one step under the quote */
  body[data-page="about"] .btn:not(.touch__btn) {
    padding-block:0; min-height:52px; font-weight:600;
    font-size:clamp(15.4px, 14.8px + .06vw, 16.4px); }
  body[data-page="about"] .btn--sm {
    padding-block:0; min-height:46px;
    font-size:clamp(13.8px, 13.2px + .06vw, 14.6px); }
  body[data-page="about"] .sec-touch .touch__btn {
    font-size:clamp(14.4px, 13.9px + .05vw, 15.6px); }
}

/* ============================================================
   SERVICE PAGE POLISH — ALL SIX FUNDING PAGES (owner 2026-07-30).
   Term Loans was approved first; this is the same pool cloned to
   sba / heloc / loc / equipment / rbf via the shared th-* classes:
   one caption scale, one title ramp, one body ramp, one testimonial
   hierarchy and one button system, stepped across all four modes so
   no value ever shrinks as the viewport grows.
   Mobile placement (hero panel, Apply now CTA, trust band, the
   compact contact card and the side-by-side "why" card) is
   deliberately untouched — only sizes and weights move here.
   Hero title 701-920px: the shared 46 -> 48.2px ramp is safe on all
   six. Widest headline is "Line of Credit." at 6.4em TRUE width →
   48.2 x 6.4 = 309px inside a 401px copy column at 701px (the column
   is 66.1vw - 62px); the calc() guard is the per-pixel safety net.
   ============================================================ */

/* ---- small burger (<=700px) ---- */
@media (max-width:700px) {
  /* section titles land on the same value the big-burger ramp starts
     from, so nothing drops at the 701px boundary */
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) :is(.th-intro__title, .th-ind__title),
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .sec-touch .touch__title {
    font-size:clamp(22px, 11.8px + 3.2vw, 27.6px); }
  /* these two are width-limited at 701px (25.9px), so the mobile cap
     stops just under it instead of stepping down at the boundary */
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) :is(.th-why__title, .th-tst__title) {
    font-size:clamp(21.4px, 11.4px + 3.1vw, 25.8px); }
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-qa__title {
    font-size:clamp(21.8px, 11.6px + 3.15vw, 26.4px); }

  /* attribution and stars sit one step BELOW the quote so the quote
     stays primary (they were inheriting 15.5px, above the quote) */
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-tst__by b {
    font-size:clamp(11.8px, 11.2px + .2vw, 13px); }
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-tst__by span {
    font-size:clamp(10.6px, 10.1px + .16vw, 11.6px); }

  /* buttons: one weight and the 44 / 46 tap-target ladder */
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) :is(.th-why .btn, .th-qa__cta .btn, .th-ind__cta .btn) {
    font-weight:600; padding-block:0; min-height:44px;
    font-size:clamp(14.4px, 13.8px + .2vw, 15.2px); }
}
@media (min-width:521px) and (max-width:700px) {
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) :is(.th-why .btn, .th-qa__cta .btn, .th-ind__cta .btn) {
    padding-block:0; min-height:46px; }
}

/* ---- big burger (701-920px) ---- */
@media (min-width:701px) and (max-width:920px) {
  /* hero title keeps the mobile presence instead of dropping 46 -> 40;
     the calc() guard keeps the headline inside the copy column */
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-title {
    font-size:min(clamp(41px, 36.5px + .64vw, 43.5px), calc(13vw - 35px)); }

  /* the loc / rbf section titles run on shallower per-page vw slopes
     (longer headlines), so they landed BELOW the 700px mobile cap at
     701px. Floor them at the mobile value; the vw math takes over as
     soon as it passes the floor, so nothing overflows. */
  body[data-page="loc"] .th-intro__title { font-size:max(27.6px, min(2.43rem, 3.4vw)); }
  body[data-page="loc"] .th-why__title { font-size:max(25.8px, min(2.43rem, 3.29vw)); }
  body[data-page="rbf"] .th-why__title { font-size:max(25.8px, min(2.43rem, 3.51vw)); }


  /* captions: one scale, matching the rest of the pool */
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-ind__lbl {
    font-size:clamp(13px, 12.6px + .06vw, 13.6px); font-weight:600; }

  /* body copy continues upward from the mobile ramp */
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-intro__sub {
    font-size:clamp(16.2px, 15.6px + .09vw, 17px); }
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-qa__q {
    font-size:clamp(16.2px, 15.6px + .09vw, 17px); }
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-tst__quote {
    font-size:clamp(14.8px, 14.2px + .09vw, 15.6px); } /* MODES-OK was frozen at 13.1px from 701px all the way up */
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-tst__by b {
    font-size:clamp(13.4px, 12.9px + .07vw, 14.2px); }
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-tst__by span {
    font-size:clamp(12.2px, 11.8px + .06vw, 12.8px); }

  /* buttons: one weight, no label cliff at 701px, 48px targets */
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) :is(.th-why .btn, .th-qa__cta .btn, .th-ind__cta .btn) {
    font-weight:600; padding-block:0; min-height:48px;
    font-size:clamp(15.4px, 14.8px + .09vw, 16px); }
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .sec-touch .touch__btn,
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-form .touch__btn {
    padding-block:0; min-height:44px;
    font-size:clamp(14px, 13.5px + .07vw, 14.8px); }
}

/* ---- main site (921px and up) ---- */
@media (min-width:921px) {
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-ind__lbl {
    font-size:clamp(13.8px, 13.4px + .03vw, 14.6px); font-weight:600; }
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-tst__quote {
    font-size:clamp(16.2px, 15.6px + .05vw, 17.4px); }
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-tst__by b {
    font-size:clamp(14.4px, 14px + .04vw, 15.4px); }
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-tst__by span {
    font-size:clamp(13px, 12.7px + .03vw, 13.8px); }
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) :is(.th-why .btn, .th-qa__cta .btn, .th-ind__cta .btn) {
    font-weight:600; padding-block:0; min-height:52px;
    font-size:clamp(16.2px, 15.8px + .03vw, 17px); }
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .sec-touch .touch__btn,
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-form .touch__btn {
    padding-block:0; min-height:52px;
    font-size:clamp(15.6px, 15.3px + .03vw, 16.4px); }
}


/* ============================================================
   SERVICE PAGE PARAGRAPH RAG (owner 2026-07-30).
   The centered body copy under each section title was breaking
   at the container edge, which left uneven line lengths and a
   short orphan last line. Wrap-only fix: text-wrap:pretty on
   every service page paragraph, plus a character-based measure
   cap on the CENTERED intro copy so the rag evens out.
   Card-bound paragraphs (testimonial quote, contact lede, the
   Q&A chip) keep their column width — only their line breaking
   improves, so no box moves. No sizes, weights, colours,
   alignment or spacing change anywhere.
   ============================================================ */
:is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"])
  :is(.th-sub, .th-tst__quote, .touch__lede, .th-qa__a) {
  text-wrap:pretty; overflow-wrap:break-word; }
/* the centered intro block reads best when each line fills out to a
   near-equal width and only the LAST line tapers short, so it uses
   text-wrap:pretty (fills, then avoids a stranded final line) rather
   than balance (equal rows, jagged edges at a tight measure) */
:is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-intro__sub {
  text-wrap:pretty; hyphens:none; overflow-wrap:break-word; }

/* centered intro copy: measure cap keeps the existing pixel
   ceiling whenever it is tighter, so desktop is unchanged */
@media (max-width:700px) {
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-intro__sub {
    max-width:min(620px, 38ch); }
}

@media (min-width:701px) and (max-width:920px) {
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-intro__sub {
    max-width:min(620px, 44ch); }
}
@media (min-width:921px) {
  :is(body[data-page="term"], body[data-page="sba"], body[data-page="heloc"], body[data-page="loc"], body[data-page="equipment"], body[data-page="rbf"]) .th-intro__sub {
    max-width:min(620px, 62ch); }
}

/* ==========================================================================
   LEDGER MOTION (owner 2026-07-30) — one clock, one direction, one accent.
   Homepage-scoped choreography + sitewide press feel. No color, layout or
   copy changes: transforms, opacity, filter and pseudo-element accents only.
   ========================================================================== */
:root {
  --lm-fast:.18s; --lm-base:.42s; --lm-slow:.72s;
  --lm-ease:cubic-bezier(.22,.61,.36,1);
  --lm-step:.07s; --lm-rise:14px; --lm-blur:6px;
}
@media (max-width:700px) { :root { --lm-step:.05s; --lm-rise:7px; --lm-blur:4px; } }

/* ---- dimension-stable press feedback (every button, every page) ---- */
.btn, .nav__apply, .topbar__apply, .link-arrow, .mcta__btn { position:relative; }
.btn:active, .nav__apply:active, .topbar__apply:active, .mcta__btn:active {
  filter:brightness(.96);
}

/* ---- hover sheen: single cream sweep, colors untouched ---- */
.btn::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:linear-gradient(105deg, transparent 36%, rgba(245,240,225,.28) 50%, transparent 64%);
  transform:translateX(-120%); opacity:0;
}
.btn--cream::after, .btn--outline::after, .btn--ghost::after {
  background:linear-gradient(105deg, transparent 36%, rgba(0,66,37,.14) 50%, transparent 64%);
}
.btn.lm-sheen::after { animation:lm-sweep .52s var(--lm-ease); }
@keyframes lm-sweep {
  from { transform:translateX(-120%); opacity:0; }
  30%  { opacity:1; }
  to   { transform:translateX(120%); opacity:0; }
}
@media (max-width:700px) { .btn.lm-sheen::after { animation:none; } }

/* ---- numbers never jitter while counting ---- */
.num, .stat-card__num, [data-count], [data-count-to] { font-variant-numeric:tabular-nums; }

/* ---- home: settle instead of float (rise + un-blur, one curve) ---- */
body[data-page="home"] [data-reveal]:not(.prod) {
  transition:opacity var(--lm-slow) var(--lm-ease), transform var(--lm-slow) var(--lm-ease), filter var(--lm-base) var(--lm-ease);
}
body[data-page="home"] [data-reveal]:not(.prod):not([data-reveal="left"]):not([data-reveal="right"]):not([data-reveal="scale"]):not(.is-inview) {
  transform:translateY(var(--lm-rise)); filter:blur(var(--lm-blur));
}
body[data-page="home"] [data-reveal="fade"]:not(.is-inview) { transform:none; }
body[data-page="home"] [data-reveal].is-inview { filter:none; }

/* ---- home hero: one load timeline, 70ms apart ---- */
body[data-page="home"] .hero .eyebrow { --d:0s; }
body[data-page="home"] .hero .h-line:nth-of-type(1) .sl-inner { transition-delay:calc(var(--lm-step) * 1) !important; }
body[data-page="home"] .hero .h-line:nth-of-type(2) .sl-inner { transition-delay:calc(var(--lm-step) * 2) !important; }
body[data-page="home"] .hero .h-line:nth-of-type(3) .sl-inner { transition-delay:calc(var(--lm-step) * 3) !important; }
body[data-page="home"] .hero .lede { --d:calc(var(--lm-step) * 4); }
body[data-page="home"] .hero__ctas { --d:calc(var(--lm-step) * 5); }
body[data-page="home"] .hero__visual { --d:calc(var(--lm-step) * 6); }
/* the frame lands, then it fills */
body[data-page="home"] .hero__visual .proof-stack__body > * {
  transition:opacity var(--lm-base) var(--lm-ease), transform var(--lm-base) var(--lm-ease);
  transition-delay:calc(var(--lm-step) * 6 + .14s);
}
body[data-page="home"] .hero__visual:not(.is-inview) .proof-stack__body > * { opacity:0; transform:translateY(6px); }

/* ---- images develop rather than pop ---- */
body[data-page="home"] [data-reveal] img, body[data-page="home"] .curtain img {
  transition:transform var(--lm-slow) var(--lm-ease), filter var(--lm-slow) var(--lm-ease);
}
body[data-page="home"] [data-reveal]:not(.is-inview) img { transform:scale(1.04); }
body[data-page="home"] .hero__visual .proof-stack__photo,
body[data-page="home"] .match-fan { translate:0 var(--lm-py, 0px); transition:translate .3s linear; }

/* ---- the sage hairline is the connective tissue ---- */
body[data-page="home"] .sec-products .sec-head::after {
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform var(--lm-base) var(--lm-ease) .12s;
}
body[data-page="home"] .sec-products .sec-head:not(.presettle)::after { transform:scaleX(1); }
body[data-page="home"] .choose-us__title[data-reveal]::after,
body[data-page="home"] .story-card[data-reveal] .eyebrow::after {
  content:''; display:block; width:56px; height:2px; border-radius:2px; margin-top:18px;
  background:var(--sage); transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--lm-base) var(--lm-ease) .16s;
}
body[data-page="home"] .choose-us__title[data-reveal].is-inview::after { transform:scaleX(1); }
body[data-page="home"] .story-card[data-reveal].is-inview .eyebrow::after { transform:scaleX(1); }
body[data-page="home"] .choose-us__title[data-reveal]::after { margin-inline:auto; transform-origin:50% 50%; }

/* ---- icons settle, they do not spin ---- */
body[data-page="home"] .prod:hover .icon--chip,
body[data-page="home"] .choose-us__item:hover img {
  transform:rotate(6deg) translateY(-2px); transition:transform var(--lm-base) var(--lm-ease);
}

/* ---- reduced motion: everything resolves instantly ---- */
@media (prefers-reduced-motion: reduce) {
  .btn.lm-sheen::after { animation:none !important; display:none; }
  body[data-page="home"] [data-reveal], body[data-page="home"] [data-reveal] img,
  body[data-page="home"] .proof-stack__body > * {
    opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;
  }
  body[data-page="home"] .sec-products .sec-head::after,
  body[data-page="home"] .choose-us__title[data-reveal]::after,
  body[data-page="home"] .story-card[data-reveal] .eyebrow::after { transform:none !important; }
}