/* Self-hosted, latin-subset only. The site is entirely English/Latin-script;
   the only non-ASCII glyphs it ever renders (checked directly against every
   page's actual content) are U+00A9 (c) U+00B7 (middle dot) U+2026 (ellipsis)
   and U+2191 (up arrow), all inside the latin subset's own range -- so this
   drops cyrillic/greek/vietnamese/latin-ext coverage the site never used.
   The right-arrow (U+2192) and FAQ/Assumptions "+" (U+FF0B) already render
   via a fallback font today (neither of these families cover them,
   Google-hosted or not), so self-hosting changes nothing about that. The
   hamburger menu icon used to be a U+2630 glyph too, but is now three CSS
   spans instead (so it can morph into an X on open), not a rendered
   character at all.
   Previously loaded from fonts.googleapis.com via a render-blocking
   stylesheet fetch, which Lighthouse measured at ~1.4s of the mobile
   Performance score. Self-hosting removes that request/redirect/parse
   chain entirely -- the files load same-origin, no separate CSS fetch
   needed before the browser even knows which font files to request. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/archivo-500.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/barlow-condensed-400.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/barlow-condensed-500.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-condensed-600.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-condensed-700.woff2") format("woff2");
}

/* Inter's 400/500/600 all resolve to the same file (confirmed by content
   hash against what Google itself serves for each weight) -- matching
   Google's own @font-face structure exactly (three discrete-weight rules,
   one shared src) rather than guessing at variable-font range syntax that
   Google's own CSS doesn't use either. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
}

:root {
  --navy: #0f1e38;
  --navy-2: #172b48;
  --navy-3: #203a5b;
  --gold: #c9862b;
  --gold-on-light: #754b07;
  --paper: #f4f1e9;
  --white: #ffffff;
  --ink: #11233e;
  --muted: #59697d;
  --steel: #e7edf3;
  --line: rgba(17, 35, 62, 0.15);
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand: "Archivo", var(--body);
  --shadow: 0 24px 70px rgba(6, 22, 44, 0.12);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: var(--body);
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--navy);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: var(--white);
  color: var(--navy);
  text-decoration: none;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.wrap {
  width: min(1160px, calc(100% - 42px));
  margin-inline: auto;
}

section {
  padding: 120px 0;
}

section[id] {
  scroll-margin-top: 88px;
}

/* FAQ answers carry their own id (deep-linkable independent of the section),
   so a direct link to one specific question also needs the sticky-header
   offset, not just the section-level anchors above. */
.faq-answer[id] {
  scroll-margin-top: 88px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  letter-spacing: -0.025em;
}

section h2::after,
.prose h2::after {
  display: block;
  width: 54px;
  height: 2px;
  margin-top: 22px;
  background: var(--gold);
  content: "";
}

.centered-head h2::after {
  margin-inline: auto;
}

h1,
h2 {
  line-height: 0.98;
}

h1 {
  font-size: clamp(4.5rem, 7.2vw, 7rem);
  font-weight: 600;
}

h2 {
  font-size: clamp(3rem, 5.6vw, 5.2rem);
  font-weight: 600;
}

h3 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.05;
}

p {
  color: var(--muted);
}

.button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 23px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 220ms var(--ease-out),
    border-color 300ms ease,
    background-color 300ms ease,
    color 250ms ease,
    box-shadow 300ms ease;
}

.button-primary {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.button-primary:hover {
  border-color: var(--navy-3);
  background: var(--navy-3);
  box-shadow: 0 12px 28px rgba(8, 22, 43, 0.16);
}

.button-secondary {
  border-color: var(--navy);
  background: transparent;
  color: var(--navy);
}

.button-secondary:hover {
  background: rgba(15, 30, 56, 0.06);
  box-shadow: 0 12px 28px rgba(8, 22, 43, 0.1);
}

.button-on-light.button-primary {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.button-on-light.button-primary:hover {
  border-color: var(--navy-3);
  background: var(--navy-3);
  color: var(--white);
}

.button-on-light.button-secondary {
  border-color: var(--navy);
  background: transparent;
  color: var(--navy);
}

.button-on-light.button-secondary:hover {
  background: rgba(15, 30, 56, 0.06);
  color: var(--navy);
}

.button-on-dark.button-primary {
  border-color: var(--white);
  background: var(--white);
  color: var(--navy);
}

.button-on-dark.button-primary:hover {
  border-color: #eef3f8;
  background: #eef3f8;
  color: var(--navy);
}

.button-on-dark.button-secondary {
  border-color: var(--gold);
  background: transparent;
  color: var(--gold);
}

.button-on-dark.button-secondary:hover {
  border-color: #dda349;
  background: rgba(201, 134, 43, 0.08);
  color: #dda349;
}

@media (hover: hover) {
  .button:hover {
    transform: translateY(-1px);
  }
}

.site-nav {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  color: var(--white);
  transition:
    background-color 350ms ease,
    box-shadow 350ms ease,
    backdrop-filter 350ms ease;
}

.site-nav.scrolled {
  background: rgba(15, 30, 56, 0.95);
  box-shadow: 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font: 500 15px var(--brand);
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-links a:not(.button) {
  position: relative;
  color: rgba(255, 255, 255, 0.74);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: color 220ms ease;
}

.nav-links a:not(.button)::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: var(--gold);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}

.nav-links a:not(.button):hover {
  color: var(--gold);
}

.nav-links a:not(.button):hover::after {
  transform: scaleX(1);
}

.menu-button {
  display: none;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

/* Three bars that morph into an X on open, driven by the aria-expanded state
   app.js already sets on click -- same pattern as
   .faq-item button[aria-expanded="true"], no extra JS needed. Sized to
   roughly match the hamburger glyph's previous visual footprint. */
.menu-button-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
}

.menu-button-icon span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition:
    transform 260ms var(--ease-out),
    opacity 200ms ease;
}

.menu-button[aria-expanded="true"] .menu-button-icon span:first-child {
  transform: translateY(7px) rotate(45deg);
}

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

.menu-button[aria-expanded="true"] .menu-button-icon span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .menu-button-icon span {
    transition: none;
  }
}

.mobile-nav-cta {
  display: none;
}

.hero {
  position: relative;
  display: flex;
  min-height: min(840px, 100svh);
  align-items: center;
  overflow: hidden;
  padding: 160px 0 120px;
  background: linear-gradient(128deg, #0b1930, #162d4d 72%, #0f203d);
  color: var(--white);
}

/* Experimental (2026-08-24, not yet confirmed): a faint robotics/warehouse
   schematic behind the three navy bands. Sits as a separate ::before layer
   rather than folded into each section's own background shorthand, so one
   opacity/positioning knob controls all three and .hero's own gradient
   still shows through underneath rather than being replaced by it. Each
   host rule needs position: relative (.hero already has it) so inset: 0
   covers just that section, and its own .wrap needs an explicit stacking
   context so content paints above this layer -- .hero > .wrap already had
   one for an unrelated reason (z-index: 1, see below); .dark-section and
   .contact-section did not, and now do, scoped narrowly (> .wrap only, not
   the shared .wrap class) so no other section is affected. */
.hero::before,
.dark-section::before,
.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/schematic-bg.webp") center / cover no-repeat;
  opacity: 0.14;
  pointer-events: none;
}

.dark-section > .wrap,
.contact-section > .wrap {
  position: relative;
  z-index: 1;
}

/* /shortv's hero has no trust-bar, so its content is short enough that the
   840px floor above (sized for the homepage's fuller hero) leaves the
   align-items: center flex behavior padding out empty space above and below
   the CTA row rather than the hero ending at its own padding. Scoped to
   body.shortv so the homepage's hero (still at the 840px floor) is
   unaffected. With min-height removed, align-items: center has nothing left
   to redistribute -- the top and bottom gaps become whatever padding-top/
   padding-bottom apply at the current breakpoint. 2026-08-23: the matching
   padding-bottom overrides for the shared .hero rule's three narrower
   breakpoints (the unscoped .hero's own asymmetry -- e.g. 160/120 at this
   base tier -- was sized for the homepage's fuller hero, footnote included,
   not chosen for this shorter one) live alongside each of those breakpoints'
   own .hero rule rather than in new media blocks here: check.mjs's tablet-
   contract check locates its content by the first "@media (max-width:
   1040px)" string in the file, and a new one earlier in the file than the
   existing ones would shift what it finds. print's own .hero override is
   unrelated and untouched. */
body.shortv .hero {
  min-height: 0;
  padding-bottom: 160px;
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 1100px;
}

.hero h1 {
  max-width: 1080px;
  font-size: clamp(5.6rem, 8vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.042em;
}

.hero-subtitle {
  max-width: 760px;
  margin: 36px 0 32px;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.55;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.microcopy {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 16px;
}

/* Additive only: no current page uses this class, so it cannot affect the
   live homepage. Sits between .hero-subtitle (body copy) and h1 (display) --
   more weight than a paragraph, short of a heading. */
.hero-emphasis {
  max-width: 640px;
  /* Top margin collapses with .hero-subtitle's own 32px bottom margin, so 0
     here still leaves that gap intact. The bottom margin is the one that
     matters: it's what separates this line from the button row below. */
  margin: 0 0 32px;
  color: var(--white);
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.4;
}

.section-head {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 52px;
}

.section-head > p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}

.centered-head {
  max-width: 850px;
  margin: 0 auto 58px;
  text-align: center;
}

.centered-head > p:last-child {
  font-size: 18px;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.problem-card {
  min-height: 260px;
  padding: 27px;
  border: 1px solid var(--line);
  background: var(--white);
}

.card-number {
  display: block;
  margin-bottom: 58px;
  color: var(--gold-on-light);
  font: 600 28px var(--display);
}

.problem-card h3 {
  font-size: 1.75rem;
}

.problem-card p {
  margin: 16px 0 0;
  font-size: 16px;
}

.statistic {
  background: var(--navy);
  color: var(--white);
}

.statistic strong {
  display: block;
  margin-top: 8px;
  color: var(--gold);
  font: 600 5.5rem/1 var(--display);
}

.statistic span {
  display: block;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.76);
}

/* /testpage's variant of the dark callout card: no percentage to anchor it
   (deliberately, per that page's brief), so the statement itself needs the
   weight a stat number would otherwise carry, rather than sitting in the
   card at the dim, secondary .statistic-span colour with a lot of empty
   space below it. New class names only -- .statistic itself, .statistic
   strong and .statistic span are untouched, so the live homepage's actual
   "20-30%" card is unaffected. */
.statistic-quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.statistic-mark {
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 20px;
  background: var(--gold);
}

.statistic-quote p {
  margin: 0;
  color: var(--white);
  font: 600 1.55rem/1.32 var(--display);
}

.pull-quote {
  margin: 38px 0 0;
  color: var(--ink);
  font-size: 1.15rem;
  font-style: italic;
}

.dark-section {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}

.dark-section p {
  color: rgba(255, 255, 255, 0.76);
}

.program-intro {
  max-width: 940px;
  margin-bottom: 54px;
}

.program-lead {
  max-width: 820px;
  margin: 30px 0 0;
  padding: 0;
  border: 0;
  font-size: 20px;
  line-height: 1.6;
}

.program-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  background: transparent;
}

.program-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 24px;
  min-height: 210px;
  padding: 34px 30px;
  border-top: 0;
  background: var(--navy-2);
}

.program-step > span {
  color: var(--gold);
  font: 600 32px/1 var(--display);
}

.program-step h3 {
  font-size: clamp(2.2rem, 2.8vw, 2.7rem);
}

.program-step div > p:last-child {
  margin: 18px 0 0;
  font-size: 16px;
}

.ownership-panel {
  margin-top: 18px;
  padding: 0;
}

.ownership-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr);
  gap: 14px;
}

.ownership-card {
  min-height: 290px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--white);
  color: var(--ink);
}

.ownership-retain {
  border-left: 3px solid var(--gold);
  background: var(--white);
}

.ownership-card > span {
  color: var(--navy);
  font: 600 16px var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ownership-card ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.ownership-card li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.5;
}

.ownership-card li:last-child {
  border-bottom: 0;
}

.principal-note {
  max-width: 920px;
  margin: 25px 0 0;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 17px;
  line-height: 1.6;
}

.calculator {
  display: grid;
  grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.22fr);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow);
}

.calculator-controls {
  min-width: 0;
  padding: 38px;
  border-right: 1px solid var(--line);
}

.range-field {
  margin: 28px 0;
}

/* The box carries the formatted value, so the label row is the label alone. */
.range-field label {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.range-caption {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.range-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 136px;
  gap: 14px;
  align-items: center;
  margin-top: 7px;
}

.slider-shell {
  position: relative;
  height: 44px;
  --pct: 0;
}

.slider-shell::before,
.slider-fill {
  position: absolute;
  top: 50%;
  right: 8px;
  left: 8px;
  height: 6px;
  content: "";
  transform: translateY(-50%);
}

.slider-shell::before {
  background: #7b8ba0;
}

.slider-fill {
  z-index: 1;
  background: var(--navy);
  transform: translateY(-50%) scaleX(var(--pct));
  transform-origin: left;
}

.slider-shell input[type="range"] {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.slider-shell input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}

.slider-shell input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 3px solid var(--white);
  border-radius: 50%;
  appearance: none;
  background: var(--navy);
  box-shadow: 0 0 0 1px rgba(17, 35, 62, 0.2), 0 3px 9px rgba(17, 35, 62, 0.2);
}

.slider-shell input[type="range"]::-moz-range-track {
  height: 6px;
  background: transparent;
}

.slider-shell input[type="range"]::-moz-range-progress {
  background: transparent;
}

.slider-shell input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 1px rgba(17, 35, 62, 0.2), 0 3px 9px rgba(17, 35, 62, 0.2);
}

.range-number {
  min-height: 44px;
  padding: 8px 10px;
  border-color: #6e8097;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Prefix and suffix are static text inside the field, not part of the editable
   value, so the box can carry the units the label no longer repeats. */
.number-shell {
  display: flex;
  min-height: 44px;
  gap: 3px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #6e8097;
  background: var(--white);
}

.number-shell:focus-within {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

.number-shell .range-number {
  width: 100%;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: transparent;
}

.number-affix {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

/* The column stretches to match .calculator-controls' height. Centering used
   to live here as justify-content, which was a no-op for the full output
   (already fills or exceeds the panel) but recentered it -- a visible
   vertical drift -- whenever the sibling controls column changed height,
   e.g. opening the calculator's Assumptions panel. Centering now lives on
   .deployment-guard itself (margin: auto 0 below) instead, so the full
   output stays pinned to the top unconditionally and only the short guard
   message centers in the tall panel. */
.calculator-results {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(32px, 4vw, 52px);
  background: var(--steel);
}

.assumptions {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.assumptions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--navy);
  cursor: pointer;
  font-size: 16px;
  font-weight: 650;
  list-style: none;
}

.assumptions summary::-webkit-details-marker {
  display: none;
}

.assumptions summary:focus-visible {
  border-radius: 1px;
}

.assumptions-indicator {
  display: inline-block;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transition: transform 260ms var(--ease-out);
}

.assumptions[open] .assumptions-indicator {
  transform: rotate(45deg);
}

/* Native <details> otherwise shows/hides this content in one frame (no
   transition is possible across a display:none boundary). grid-template-rows
   0fr->1fr animates the reveal to the content's real height -- same
   technique as .faq-answer, and more reliable across repeat toggles than a
   guessed max-height cap turned out to be: a fixed max-height transitions
   fine the first time a details element opens, but was observed to stop
   animating on later opens of the same element, while the grid-row
   technique (already proven on the JS-driven FAQ accordion) held up across
   repeat toggles in the same testing. The grid row needs exactly one child
   (.assumptions-body-inner) -- a second direct child would create an
   uncollapsed implicit row and never hide. */
.assumptions-body {
  display: grid;
  grid-template-rows: 0fr;
  padding-top: 0;
  opacity: 0;
  transition:
    grid-template-rows 320ms var(--ease-out),
    opacity 220ms ease,
    padding-top 320ms var(--ease-out);
}

.assumptions[open] .assumptions-body {
  grid-template-rows: 1fr;
  padding-top: 4px;
  opacity: 1;
}

.assumptions-body-inner {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .assumptions-body {
    transition: none;
  }
}

.assumptions-body .range-field {
  margin: 24px 0;
}

.cash-result {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.cash-result strong {
  display: block;
  margin: 3px 0 2px;
  color: var(--gold-on-light);
  font: 600 clamp(3.5rem, 6vw, 5.9rem)/0.96 var(--display);
  font-variant-numeric: tabular-nums;
}

.cash-result span {
  color: var(--muted);
}

.cash-result > span:first-child {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

/* States the size of the thing being financed, and quantifies the holdback that
   corrects the apparent discount. */
.deployment-ledger {
  margin: 26px 0 0;
  border-top: 1px solid var(--line);
}

.deployment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.deployment-row dt {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.35;
}

.deployment-row dd {
  margin: 0;
  color: var(--ink);
  font: 600 1.3rem/1 var(--display);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The two rows that have a self-funded/with-Spotlight counterpart carry a bar
   under the label and figure, scaled to the larger of the two figures so
   their lengths are directly comparable. Each figure now appears once.

   The bar element lives inside <dd> in the markup, not as its sibling --
   <dl> only permits each dt/dd group to contain dt and dd (optionally
   wrapped in a div), and a third element there fails that content model,
   which Lighthouse's accessibility audit flags. Positioning it absolutely
   against this row (rather than letting it size to dd's own grid column)
   is what keeps it spanning the full row width like before; padding-bottom
   reserves the same vertical space the old grid row used to. */
.deployment-row-bar {
  position: relative;
  padding-bottom: 31px;
}

.deployment-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 13px;
  display: block;
  height: 8px;
  background: rgba(15, 30, 56, 0.12);
}

.deployment-bar > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--navy);
  transition: width 500ms var(--ease-out);
}

.deployment-bar > span.term-bar {
  background: #7b8ba0;
}

.tradeoff-note {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.holdback-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Replaces the output panel below the minimum ticket (or above the maximum
   the calculator models). Both sliders stay live so the reader can drag back
   and watch the normal output reappear. margin: auto centers this one child
   within .calculator-results regardless of the parent's own justify-content,
   which is what actually keeps a short guard message centered in the tall
   panel now that centering no longer lives on the parent. */
.deployment-guard {
  margin: auto 0;
}

.deployment-guard h3 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.15;
}

.deployment-guard p {
  margin: 18px 0 26px;
  font-size: 16px;
  line-height: 1.6;
}

.calculator-alert {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--gold);
  background: #fff8ea;
  color: #5e4928;
  font-size: 16px;
  line-height: 1.5;
}

/* /test3 only. Above-cap answer: a confident result in the same shell as
   the normal .calculator-output (not .deployment-guard/.calculator-alert,
   which stay warning-toned and remain in use by testpage.html and
   index.html's own, separate calculators). Top-aligned like the normal
   output -- no auto-centering -- since this panel is designed to reach a
   similar height, not to be a short message in a tall empty box. */
.overcap-result:not([hidden]) {
  display: flex;
  flex-direction: column;
}

.results-kicker {
  margin: 0 0 3px;
}

/* /test3 only. Default answer before the visitor has touched a control:
   same shell, row labels and disclaimer as the populated .calculator-output
   (see .value-placeholder / .calculator-hint below), so nothing reflows when
   real figures replace the placeholders. Static -- test3.js never writes
   into this panel, only toggles which of the three answers is visible. */
/* "Set your deployment" is far wider than a dollar figure, so it cannot
   share the populated hero's clamp(3.5rem, 6vw, 5.9rem) without wrapping to
   a second line -- min-height reserves exactly that line's height (the same
   formula, so it tracks the same clamp at every viewport) regardless of the
   smaller font size actually used here, and the smaller text centers inside
   the reserved slot instead of sitting flush against its top. */
.calculator-zero .cash-result strong {
  display: flex;
  align-items: center;
  min-height: calc(clamp(3.5rem, 6vw, 5.9rem) * 0.96);
  color: var(--muted);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
}

.value-placeholder {
  color: var(--muted);
}

/* Scoped to test3's own two panels (not the shared .deployment-row dd rule,
   which index.html and testpage.html also use) -- without a reserved floor,
   the single-character placeholder dot leaves dt's auto grid track wider
   than a real "$10,000,000" value does, so labels wrap an extra line only
   in the populated state at narrow widths, and .calculator-results' height
   no longer matches the zero state's. 100px comfortably fits the widest
   value the capped calculator ever renders ($10,000,000 measures ~95px in
   this font), so both states reserve the same column width regardless of
   which one's dd content is actually showing. */
#t3-zero-state .deployment-row dd,
#t3-calculator-output .deployment-row dd {
  min-width: 100px;
}

.calculator-hint {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Reserves the hint's line height in the populated panel too, so swapping
   between the zero and normal answers never changes .calculator-results'
   height. The text is identical in both; only visibility differs. */
.calculator-output .calculator-hint {
  visibility: hidden;
}

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

.overcap-hero {
  display: block;
  margin: 3px 0 2px;
  color: var(--gold-on-light);
  font: 600 clamp(3.5rem, 6vw, 5.9rem)/0.96 var(--display);
  font-variant-numeric: tabular-nums;
}

.overcap-caption {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.overcap-echo {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.overcap-divider {
  margin: 24px 0;
  border-top: 1px solid var(--line);
}

.overcap-lead {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.overcap-body {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Same bar DNA as .deployment-bar (thin navy horizontal fill) adapted for
   four fixed segments instead of one percentage-driven fill, since this
   bar illustrates a sequence, not a proportion -- no amount it could be
   scaled against. */
.staging-bar {
  display: flex;
  gap: 3px;
  height: 8px;
  margin: 22px 0 8px;
}

.staging-segment {
  height: 100%;
  background: var(--navy);
}

.staging-segment:nth-child(1) {
  flex: 0 1 38%;
  opacity: 1;
}

.staging-segment:nth-child(2) {
  flex: 0 1 27%;
  opacity: 0.68;
}

.staging-segment:nth-child(3) {
  flex: 0 1 19%;
  opacity: 0.42;
}

.staging-segment:nth-child(4) {
  flex: 0 1 12%;
  opacity: 0.24;
}

.staging-captions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

/* gap, not a space character in the arrow span's text: flexbox trims
   leading/trailing whitespace inside an anonymous flex item, so a literal
   " →" collapsed against the preceding text with no visible gap. */
.overcap-cta {
  align-self: flex-start;
  margin-top: 22px;
  gap: 8px;
}

/* Cross-fade between the zero, normal and above-cap answers: swapping which
   element is hidden never happens in the same frame -- test3.js fades the
   outgoing element out, then fades the incoming one in, so it reads as a
   different answer rather than a hidden/broken state. */
.calculator-zero,
.calculator-output,
.overcap-result,
.qualification-form,
.form-success {
  opacity: 1;
  transition: opacity 180ms ease;
}

.calculator-zero.fade-hidden,
.calculator-output.fade-hidden,
.overcap-result.fade-hidden,
.qualification-form.fade-hidden,
.form-success.fade-hidden {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .calculator-zero,
  .calculator-output,
  .overcap-result,
  .qualification-form,
  .form-success {
    transition: none;
  }
}

.fine-print {
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.55;
}

.muted-section {
  background: var(--steel);
}

.eligibility-head {
  max-width: 900px;
  margin-bottom: 52px;
}

.eligibility-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.28);
}

.credit-box,
.decline-box {
  padding: 38px;
}

.credit-box {
  border-right: 1px solid var(--line);
}

.credit-box > h3,
.decline-box > h3 {
  font-size: 2.35rem;
}

.credit-box ul,
.decline-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.credit-box li,
.decline-list li {
  position: relative;
  padding: 15px 0 15px 25px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

.credit-box li::before,
.decline-list li::before {
  position: absolute;
  top: 25px;
  left: 0;
  width: 9px;
  height: 2px;
  background: var(--gold);
  content: "";
}

.credit-box li::before {
  top: 23px;
  width: 7px;
  height: 7px;
}

.eligibility-scope {
  margin: 24px 0 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}

/* Homepage eligibility (2026-08-24 revision): the 8 remaining bullets sit as
   two plain columns rather than boxed -- .eligibility-matrix's border-top/
   bottom and background wash, plus 38px padding on both articles, cost
   roughly 80px of height for a treatment four fewer items per column no
   longer needs. .credit-box/.decline-box's own h3/ul/li styling (including
   the per-item hairline and gold marker) is untouched -- only the outer
   chrome is stripped, via a modifier rather than by editing those shared
   rules, since /shortvcodex's own eligibility section still uses them
   boxed. The 820px collapse below has this modifier's own override,
   matching the pattern already established there for the unmodified
   .credit-box. */
.eligibility-matrix.eligibility-plain {
  border-top: 0;
  border-bottom: 0;
  background: transparent;
  gap: 56px;
}

.eligibility-matrix.eligibility-plain .credit-box,
.eligibility-matrix.eligibility-plain .decline-box {
  padding: 0;
}

.eligibility-matrix.eligibility-plain .credit-box {
  padding-right: 28px;
  border-right: 1px solid var(--line);
}

/* /shortv's halved eligibility section (2026-08-23 revision) -- four short
   facts laid out as a plain row rather than boxed, since the box itself
   (previously .eligibility-matrix/.credit-box, now removed from this
   section) was the problem: card chrome sized for an 8-item two-column list
   looked sparse holding four one-line facts. Hairline dividers only at the
   4-column desktop width, where they sit between items in a single row; at
   2 and 1 column (see the existing 820px/600px breakpoints further down,
   where these rules live alongside .eligibility-matrix's own collapse for
   the same reason noted on body.shortv .hero above) the items wrap onto
   separate rows and the existing grid gap alone separates them, avoiding
   fragile nth-child border math across three breakpoints. */
.qualify-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.qualify-row p {
  margin: 0;
  padding-right: 24px;
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

.qualify-row p:last-child {
  padding-right: 0;
  border-right: 0;
}

.faq {
  max-width: 900px;
  margin: auto;
}

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

.faq-item h3 {
  margin: 0;
}

.faq-item button {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 27px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 600 1.85rem var(--display);
  text-align: left;
}

/* The fullwidth "＋" glyph renders as an oversized ~2.8x-of-font-size box in
   the fallback font that ends up handling this character (Barlow Condensed
   has no glyph for it) -- at this button's 1.85rem font-size that's large
   enough to push the row past the viewport on narrow screens, since
   justify-content: space-between doesn't shrink flex items on its own.
   Fixing the indicator to a small, explicit, clipped box makes its layout
   footprint independent of that glyph's real rendered size; min-width: 0 on
   the question text lets it wrap and shrink instead of holding its
   unwrapped width. */
.faq-item button span:first-child {
  min-width: 0;
}

.faq-item button span:last-child {
  flex: 0 0 auto;
  overflow: hidden;
  width: 22px;
  height: 22px;
  font-size: 22px;
  line-height: 22px;
  text-align: center;
  transition: transform 180ms ease;
}

.faq-item button[aria-expanded="true"] span:last-child {
  transform: rotate(45deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 1fr;
  padding: 0 0 25px;
  opacity: 1;
}

/* Collapse is a JS-driven enhancement, not the baseline: without .js on
   <html> (script blocked or fails), every answer stays at the .faq-answer
   default above instead of being permanently hidden by CSS with no way for
   a script-less visitor to ever open it. */
.js .faq-answer {
  grid-template-rows: 0fr;
  padding: 0;
  opacity: 0;
  transition:
    grid-template-rows 450ms var(--ease-out),
    opacity 320ms ease,
    padding 450ms var(--ease-out);
}

.js .faq-answer.open {
  grid-template-rows: 1fr;
  padding: 0 0 25px;
  opacity: 1;
}

/* One grid child, so the collapsed 0fr row constrains the whole answer. With the
   paragraphs as direct children, a second paragraph lands in an implicit auto
   row and keeps its full height while collapsed. */
.faq-answer-body {
  min-height: 0;
  overflow: hidden;
}

.faq-answer p {
  margin: 0;
  font-size: 16px;
}

.faq-answer p + p {
  margin-top: 10px;
}

/* Caption, not a pull-quote: one step down, greyed, no left border. */
.faq-answer .legal-inline-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Shares the cream of the FAQ above it. Separated by whitespace and a hairline
   rather than a colour change, so the page changes band five times, not six. */
.summary-section {
  padding-block: 92px;
  border-top: 1px solid var(--line);
}

.summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.7fr);
  gap: clamp(48px, 7vw, 90px);
  align-items: center;
}

.summary-grid h2 {
  max-width: 780px;
  font-size: clamp(3rem, 5vw, 4.7rem);
}

.summary-grid > div > p:last-child {
  max-width: 650px;
  margin: 26px 0 0;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--gold-on-light);
  font: 600 14px var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow-on-dark {
  color: var(--gold);
}

.table-scroll {
  margin: 24px 0;
  overflow-x: auto;
}

.provider-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
}

.provider-table th,
.provider-table td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.provider-table th {
  color: var(--muted);
  font-weight: 600;
}

.provider-table td:first-child {
  white-space: nowrap;
  font-weight: 600;
}

.summary-form {
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow);
  /* The card sits in a narrow grid column on wide screens, so whether the input
     and button fit side by side depends on the card, not the viewport. */
  container-type: inline-size;
}

.summary-form > label:first-child {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.summary-form-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
}

.summary-form-row input {
  min-height: 56px;
  border-right: 0;
}

.summary-form-row .button {
  white-space: nowrap;
}

/* Below this the 280px input and the content-sized button no longer fit on one
   line, so they stack rather than squeezing the button until its label clips. */
@container (max-width: 520px) {
  .summary-form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .summary-form-row input {
    border-right: 1px solid #7b8ba0;
  }

  .summary-form-row .button {
    width: 100%;
  }
}

.summary-status,
.summary-privacy {
  margin: 13px 0 0;
  font-size: 15px;
}

.consent-row {
  display: flex;
  min-height: 44px;
  gap: 11px;
  align-items: flex-start;
  margin-top: 16px;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.consent-row input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--navy);
}

/* Scoped under .contact-section so these beat `.contact-section a`, which sets
   the white link colour for the navy band. Both links sit on the white form
   card inside that band, so an unscoped rule ties on specificity and loses on
   source order, rendering the link white on white. */
.contact-section .form-privacy a,
.contact-section .consent-row a,
.contact-section .form-success a,
.form-privacy a,
.consent-row a,
.form-success a {
  color: var(--navy);
  text-underline-offset: 3px;
}

.summary-status:not(:empty) {
  color: var(--ink);
}

.summary-status a {
  color: var(--navy);
  font-weight: 600;
  text-underline-offset: 4px;
}

.contact-section {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  align-items: start;
}

.contact-grid h2 {
  max-width: 480px;
  font-size: clamp(3rem, 5vw, 4.8rem);
}

.onboarding-list {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.onboarding-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding: 18px 0;
}

.onboarding-list li > span {
  padding-top: 2px;
  color: var(--gold);
  font: 600 18px var(--display);
}

.onboarding-list h3 {
  color: var(--white);
  font-size: 1.45rem;
}

.onboarding-list p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.5;
}

.simple-header nav a:hover,
.contact-section a:hover,
.footer-links a:hover {
  color: var(--gold);
  text-decoration-color: var(--gold);
}

.contact-section p {
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
}

.contact-section a {
  color: var(--white);
}

.qualification-form {
  padding: 34px;
  background: var(--white);
  color: var(--ink);
}

.contact-conversion {
  min-width: 0;
}

.calendar-path {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 16px !important;
}

.calendar-path a {
  margin-left: 6px;
  color: var(--white);
  font-weight: 600;
  text-underline-offset: 5px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid label {
  display: grid;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
}

.form-grid label small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.full-field {
  grid-column: 1 / -1;
}

input,
select,
textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid #7b8ba0;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
}

textarea {
  resize: vertical;
}

.form-submit {
  margin-top: 19px;
  border: 0;
}

.form-status,
.form-privacy {
  margin: 13px 0 0;
  color: var(--muted) !important;
  font-size: 16px;
}

.form-privacy {
  font-size: 16px;
}

.form-privacy a:hover,
.consent-row a:hover,
.form-success a:hover {
  color: var(--navy-3);
}

.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-success {
  min-height: 280px;
  padding: 42px 36px;
  background: var(--white);
  color: var(--ink);
}

.form-success strong {
  display: block;
  font: 600 clamp(3.4rem, 5vw, 5rem)/1 var(--display);
}

.form-success p {
  margin: 18px 0 0;
  color: var(--muted);
}

.site-footer {
  padding: 56px 0 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #061429;
  color: rgba(255, 255, 255, 0.58);
}

.site-footer .brand {
  color: rgba(255, 255, 255, 0.92);
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: flex-start;
}

.footer-grid > p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 14px;
  line-height: 1.65;
}

.footer-links {
  display: flex;
  gap: 20px;
  margin-top: 18px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  text-decoration: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 720ms var(--ease-out),
    transform 720ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.visible {
  opacity: 1;
  transform: none;
}

.js .hero-copy {
  opacity: 1;
  transform: none;
  transition: none;
}

/* The hero is always in the initial viewport, so unlike .reveal above it
   never has a genuine "scrolled into view" moment to key off of -- it only
   needs a one-time settle-in on page load. Animating on a class the
   IntersectionObserver adds (as .reveal does) ties the start of that
   motion to app.js's own load/parse/execute time, which varies with
   network and device: the text would sit static, shifted down, for
   however long that takes, then suddenly jump into its slide. A plain CSS
   animation starts at paint instead, with no script dependency, so the
   motion is the same on every load. */
@keyframes hero-settle {
  from {
    transform: translateY(16px);
  }
}

.js .hero-copy > * {
  opacity: 1;
  animation: hero-settle 680ms var(--ease-out) both;
}

.js .hero-copy > :nth-child(1) { animation-delay: 40ms; }
.js .hero-copy > :nth-child(2) { animation-delay: 110ms; }
.js .hero-copy > :nth-child(3) { animation-delay: 200ms; }
.js .hero-copy > :nth-child(4) { animation-delay: 290ms; }

.stagger > .reveal:nth-child(2) {
  --reveal-delay: 85ms;
}

.stagger > .reveal:nth-child(3) {
  --reveal-delay: 170ms;
}

.simple-page {
  min-height: 100vh;
  background: var(--paper);
}

.simple-header {
  padding: 24px 0;
  background: var(--navy);
  color: var(--white);
}

.simple-header .nav-inner {
  height: auto;
}

.simple-header nav {
  display: flex;
  gap: 22px;
}

.simple-header nav a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  text-decoration: none;
}

.simple-header nav a:hover {
  color: var(--gold);
}

.simple-hero {
  padding: 104px 0 80px;
  background: var(--navy);
  color: var(--white);
}

.simple-hero .wrap,
.prose {
  max-width: 900px;
}

/* Terms and Legal read as denser, more legalistic prose than Privacy, so they
   get a narrower column (720-840px) for a shorter, more readable line length. */
.prose-narrow {
  max-width: 800px;
}

.simple-hero p:last-child {
  max-width: 700px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 18px;
}

.simple-hero h1 {
  font-size: clamp(4rem, 7vw, 6.6rem);
}

.prose {
  padding: 76px 0 108px;
}

.prose h2 {
  margin: 56px 0 18px;
  font-size: clamp(2.4rem, 4vw, 3.8rem);
}

.prose h3 {
  margin: 32px 0 8px;
  font-size: 1.65rem;
}

.prose p,
.prose li {
  font-size: 16px;
}

.prose a {
  color: var(--navy);
}

.prose a:hover {
  text-decoration-color: var(--gold);
}

.not-found {
  display: grid;
  min-height: calc(100vh - 100px);
  place-items: center;
  padding: 60px 20px;
  background: var(--navy);
  color: var(--white);
  text-align: center;
}

.not-found strong {
  display: block;
  color: var(--white);
  font: 600 clamp(5rem, 15vw, 10rem)/0.9 var(--display);
}

.not-found h1 {
  margin-top: 24px;
  font-size: clamp(3rem, 7vw, 5.5rem);
}

.not-found p {
  max-width: 560px;
  margin: 24px auto 32px;
  color: rgba(255, 255, 255, 0.65);
}

/* ---------------------------------------------------------------------
   /test3 only. New class names throughout, so none of this can affect
   index.html, testpage.html, privacy.html or capital-partners.html.
   --------------------------------------------------------------------- */

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin: 30px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.trust-item {
  position: relative;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 600;
}

.trust-item::before {
  position: absolute;
  top: 6px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--gold);
  content: "";
}

.pathway-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pathway-card {
  padding: 34px;
  border: 1px solid var(--line);
  background: var(--white);
}

.pathway-label {
  display: block;
  margin-bottom: 20px;
  color: var(--gold-on-light);
  font: 600 13px var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pathway-card h3 {
  font-size: 2rem;
}

.pathway-card > p {
  margin: 16px 0 0;
  font-size: 16px;
}

.pathway-footer {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.credential-intro {
  max-width: 760px;
}

.credential-intro p {
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 1.6;
}

.credential-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 44px;
}

.credential-card {
  padding: 27px;
  border-top: 2px solid var(--gold);
}

.credential-card h3 {
  font-size: 1.4rem;
}

.credential-card p {
  margin: 14px 0 0;
  font-size: 16px;
}

.brief-card .brief-download {
  display: flex;
  width: 100%;
}

.brief-email-reveal {
  margin-top: 18px;
  text-align: center;
}

.brief-email-reveal summary {
  display: inline-block;
  color: var(--navy);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brief-email-reveal summary::-webkit-details-marker {
  display: none;
}

.brief-email-reveal summary:hover {
  color: var(--navy-3);
}

/* Same technique as .assumptions-body: grid-template-rows 0fr->1fr rather
   than a guessed max-height cap, so it keeps animating on repeat opens, not
   just the first. The grid row needs exactly one child
   (.brief-email-panel-inner) -- the form and the success message are two
   direct children today, and a second one would land in an uncollapsed
   implicit row. */
.brief-email-panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  text-align: left;
  opacity: 0;
  transition:
    grid-template-rows 320ms var(--ease-out),
    opacity 220ms ease,
    margin-top 320ms var(--ease-out);
}

.brief-email-reveal[open] .brief-email-panel {
  grid-template-rows: 1fr;
  margin-top: 18px;
  opacity: 1;
}

.brief-email-panel-inner {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .brief-email-panel {
    transition: none;
  }
}

.brief-email-success p {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.form-warning {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 12px 14px;
  background: var(--steel);
  /* .contact-section p (rgba(255,255,255,.76), higher specificity) otherwise
     wins over this on the navy contact section, rendering near-white text on
     the pale steel background -- effectively invisible. */
  color: var(--muted) !important;
  font-size: 14px !important;
  line-height: 1.5;
}

/* Nested inside the existing .site-footer wrapper, so /test3 keeps the same
   navy background, top hairline and padding as the shared footer while its
   inner content uses its own four-column grid instead of .footer-grid. */
.footer-columns {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-columns h3 {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.9);
  font: 600 13px var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-columns p {
  margin: 0;
  max-width: 260px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  line-height: 1.55;
}

.footer-entity-disclosure {
  margin-top: 14px !important;
  font-size: 13px !important;
  /* 0.38 measured at 3.54:1 against the footer's #061429 background,
     short of WCAG AA's 4.5:1 for normal text (confirmed via Lighthouse).
     0.5 clears it at 5.26:1. */
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1.55;
}

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

.footer-columns li {
  margin-top: 12px;
}

.footer-columns li:first-child {
  margin-top: 0;
}

.footer-columns a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  text-decoration: none;
}

.footer-columns a:hover {
  color: var(--gold);
}

.footer-legal {
  padding-top: 28px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1.6;
}

.footer-legal p {
  margin: 0;
  color: inherit;
  font-size: inherit;
}

.footer-legal p + p {
  margin-top: 10px;
}

.sticky-cta {
  position: fixed;
  z-index: 60;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 30, 56, 0.97);
  transform: translateY(100%);
  transition: transform 260ms var(--ease-out);
}

@supports (backdrop-filter: blur(1px)) {
  .sticky-cta {
    backdrop-filter: blur(10px);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none;
  }
}

/* Shared across every page (added 2026-08-20 for the simple-page family:
   privacy, terms, legal, /notes). On the homepage specifically it's also a
   desktop/tablet companion to the mobile sticky CTA below -- the two never
   show at once there, hidden below via the body:not(.simple-page) scoping
   on the 1040px rule further down. The simple-page family has no sticky
   CTA to collide with, so back-to-top stays visible at every width there. */
.back-to-top {
  position: fixed;
  z-index: 55;
  right: 28px;
  bottom: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(15, 30, 56, 0.18);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(8, 22, 43, 0.12);
  transition: border-color 200ms ease, transform 200ms ease;
}

.back-to-top.visible {
  display: flex;
}

@media (hover: hover) {
  .back-to-top:hover {
    border-color: var(--navy);
    transform: translateY(-2px);
  }
}

@media (max-width: 1040px) {
  body:not(.simple-page) .back-to-top.visible {
    display: none;
  }
}

@media (max-width: 1080px) {
  .hero {
    min-height: auto;
    padding: 144px 0 96px;
  }

  .hero-subtitle {
    max-width: 720px;
  }

  body.shortv .hero {
    padding-bottom: 144px;
  }
}

@media (max-width: 1040px) {
  .menu-button {
    display: block;
  }

  .mobile-nav-cta {
    display: inline-flex;
    min-height: 44px;
    margin-left: auto;
    padding: 8px 13px;
    font-size: 14px;
    line-height: 1.1;
    text-align: center;
    /* No white-space: nowrap here on purpose: a longer CTA label (this
       component is shared across pages) wraps to a second line within the
       button's min-height instead of being clipped by .button's
       overflow: hidden. */
  }

  /* Kept in flow (not display:none) at all times so max-height can animate
     the reveal, same technique as .assumptions-body -- a display:none
     boundary can't transition. visibility is layered on top specifically
     here (assumptions-body doesn't need it): these are primary nav links,
     so keeping them out of the tab order while closed matters more than it
     does for a details panel. The 0s-duration, delayed transition on
     visibility is the standard way to animate a property that can't
     interpolate: closing waits for the 320ms collapse to finish before
     leaving the tab order; opening joins it immediately. */
  .nav-links {
    position: absolute;
    top: 90px;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-right: max(28px, calc((100vw - 1160px) / 2));
    padding-bottom: 0;
    padding-left: max(28px, calc((100vw - 1160px) / 2));
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--navy);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transition:
      max-height 320ms var(--ease-out),
      opacity 220ms ease,
      padding-top 320ms var(--ease-out),
      padding-bottom 320ms var(--ease-out),
      visibility 0s linear 320ms;
  }

  .nav-links.open {
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    padding-top: 22px;
    padding-bottom: 22px;
    opacity: 1;
    visibility: visible;
    transition:
      max-height 320ms var(--ease-out),
      opacity 220ms ease,
      padding-top 320ms var(--ease-out),
      padding-bottom 320ms var(--ease-out),
      visibility 0s linear 0s;
  }

  .nav-links .button {
    width: 100%;
  }

  .nav-links .nav-cta {
    display: none;
  }

  .section-head,
  .contact-grid,
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .calculator {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    padding: 132px 0 88px;
  }

  body.shortv .hero {
    padding-bottom: 132px;
  }

  .section-head {
    gap: 20px;
    align-items: start;
  }

  .problem-grid {
    grid-template-columns: 1fr 1fr;
  }

  .calculator-controls {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .contact-grid {
    gap: 35px;
  }

  /* /test3 only */
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }

  .sticky-cta.visible {
    display: block;
    transform: translateY(0);
  }

}

@media (prefers-reduced-motion: reduce) {
  .nav-links,
  .nav-links.open {
    transition: none;
  }
}

@media (max-width: 820px) {
  .program-steps,
  .ownership-grid {
    grid-template-columns: 1fr;
  }

  .program-step,
  .ownership-card {
    min-height: 0;
  }

  .eligibility-matrix {
    grid-template-columns: 1fr;
  }

  .credit-box {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .eligibility-matrix.eligibility-plain .credit-box {
    padding-right: 0;
    padding-bottom: 28px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .qualify-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .qualify-row p {
    padding-right: 0;
    border-right: 0;
  }

  /* /test3 only */
  .credential-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 700px) {
  /* /test3 only */
  .pathway-grid {
    grid-template-columns: 1fr;
  }

}

/* The brief capture stacks once the 280px input and the button no longer fit
   side by side. */
@media (max-width: 640px) {
  .summary-form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .summary-form-row input {
    border-right: 1px solid #7b8ba0;
  }

  .summary-form-row .button {
    width: 100%;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 16px;
  }

  .wrap {
    width: min(100% - 28px, 1160px);
  }

  section {
    padding: 82px 0;
  }

  h1 {
    font-size: clamp(3.75rem, 18vw, 4.55rem);
  }

  .hero h1 {
    font-size: min(4.15rem, 14.5vw);
  }

  h2 {
    font-size: clamp(2.75rem, 13vw, 3.7rem);
  }

  .brand {
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  .nav-inner {
    gap: 8px;
    height: 76px;
  }

  .nav-links {
    top: 76px;
  }

  .mobile-nav-cta {
    padding-inline: 9px;
    font-size: 12px;
  }

  .menu-button {
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .hero {
    min-height: auto;
    padding: 116px 0 58px;
  }

  body.shortv .hero {
    padding-bottom: 116px;
  }

  .qualify-row {
    grid-template-columns: 1fr;
  }

  .hero-subtitle {
    margin: 28px 0 26px;
    font-size: 18px;
  }

  .actions {
    display: grid;
  }

  .actions .button {
    width: 100%;
  }

  .problem-grid,
  .program-steps,
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* /test3 only */
  .footer-columns {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .trust-bar {
    gap: 10px 22px;
  }

  .problem-grid {
    gap: 12px;
  }

  .problem-card {
    min-height: 0;
  }

  .card-number {
    margin-bottom: 35px;
  }

  .program-step {
    grid-template-columns: 38px 1fr;
    gap: 16px;
    padding: 28px 22px;
  }

  .ownership-panel {
    padding: 0;
  }

  .calculator-controls,
  .calculator-results,
  .credit-box,
  .decline-box,
  .qualification-form {
    padding: 26px 22px;
  }

  .contact-grid {
    gap: 32px;
  }

  .range-input-row {
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 10px;
  }

  .number-shell {
    padding: 0 8px;
  }

  .number-affix {
    font-size: 13px;
  }

  .deployment-row {
    gap: 12px;
  }

  .deployment-row dt {
    font-size: 15px;
  }

  .summary-section {
    padding-block: 76px;
  }

  .summary-form {
    padding: 24px 20px;
  }

  .site-footer {
    padding: 44px 0 40px;
  }

  .footer-grid {
    display: grid;
    gap: 32px;
  }

  .cash-result strong {
    font-size: 3.5rem;
  }

  .simple-header .nav-inner {
    height: auto;
    min-height: 66px;
    flex-wrap: wrap;
    gap: 16px;
  }

  .simple-header nav {
    width: 100%;
    justify-content: space-between;
  }
}

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

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .hero-copy > * {
    opacity: 1;
    transform: none;
    animation: none !important;
    transition: none;
  }

}

/* The page had no print styles, so printing carried the fixed nav, the full
   viewport-height hero and the collapsed FAQ answers, and ended on a blank
   sheet led by a navy bar. */
@media print {
  html,
  body {
    background: var(--white);
    color: #000;
  }

  .site-nav,
  .menu-button,
  .nav-links,
  .mobile-nav-cta,
  .skip-link,
  .calculator-alert,
  .qualification-form,
  .summary-form,
  .form-success,
  .sticky-cta,
  .back-to-top {
    display: none !important;
  }

  .hero,
  .dark-section,
  .contact-section,
  .muted-section,
  .statistic,
  .calculator-results,
  .site-footer {
    background: var(--white) !important;
    background-image: none !important;
    color: #000 !important;
  }

  .hero {
    min-height: 0;
    padding: 0 0 24px;
  }

  section {
    padding: 18px 0;
    break-inside: avoid;
  }

  /* Answers print expanded; the collapse is a screen affordance. */
  .faq-answer {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
  }

  .faq-answer-body {
    overflow: visible;
  }

  .js .reveal,
  .js .hero-copy > * {
    opacity: 1 !important;
    transform: none !important;
  }

  /* The trailing blank sheet came from the last band's padding and footer
     margin pushing past the final page box. */
  .site-footer {
    padding: 18px 0 0;
    break-before: avoid;
  }

  main > section:last-of-type {
    padding-bottom: 0;
  }

  body > *:last-child {
    margin-bottom: 0;
  }

  a[href^="/"]::after {
    content: " (spotlightcapital.com" attr(href) ")";
    font-size: 11px;
  }
}