/* Unify Business Debt — site styles
   Layout: light paper pages; one blue "unified line" motif (many strands into one) carries the hero, the steps and the closing band.
   Single brand theme by choice: every color is set explicitly from the tokens below. */
:root {
  --paper: #F6F8FB;
  --white: #FFFFFF;
  --mist: #EEF2F7;
  --line: #D9DFE7;
  --line-strong: #6B7788;
  --ink: #0F1E33;
  --ink-muted: #4B5768;
  /* brand blue: buttons, links, selected states and the unified line (white text on it 6.92:1) */
  --blue: #1E50C8;
  --blue-hover: #173FA6;
  --blue-soft: #E8EFFC;
  /* light blue for marks and links on navy (8.31:1 on navy) */
  --sky: #8CB8FF;
  /* orange accent: the "one payment" moment and the closing call to action (navy text on it 7.09:1) */
  --orange: #FF8A00;
  --orange-hover: #FFA51F;
  --orange-soft: #FFF3E0;
  --navy: #0F1E33;
  --navy-raised: #172A42;
  --navy-deep: #0A1626;
  --navy-line: #2B3E57;
  --on-navy: #F6F8FB;
  --on-navy-muted: #AEBBCB;
  --danger: #B42318;
  --danger-soft: #FDECEA;

  --font-display: "Red Hat Display", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px;
  /* the "U" corner: square shoulders, a rounded bowl, echoing the mark */
  --radius-u: 6px 6px 20px 20px;
  /* one radius for every control: inputs, choices, buttons */
  --radius-control: 10px;
  --container: 1200px;
  --text: 720px;
  --control: 48px;
  --control-lg: 56px;
  --shadow-lg: 0 6px 12px #0f1e3314, 0 18px 40px -6px #0f1e3329;
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--blue);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; }
.icon { width: 24px; height: 24px; flex: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; }
a { color: var(--blue); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
[hidden] { display: none !important; }
.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; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.skip:focus { left: max(16px, env(safe-area-inset-left, 0px)); color: var(--paper); }

/* ---------- frame ---------- */
.wrap { width: 100%; max-width: calc(var(--container) + 48px); margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.wrap--text { max-width: calc(var(--text) + 48px); }
.band { padding-block: var(--space-9); }
.band--white { background: var(--white); }
.band--mist { background: var(--mist); }
.band--navy { background: var(--navy); color: var(--on-navy); }
.band--navy h2, .band--navy h3 { color: var(--on-navy); }

/* ---------- type ---------- */
.display { font-size: clamp(2.75rem, 6.4vw, 5rem); line-height: 0.98; font-weight: 800; letter-spacing: -0.03em; }
.h1 { font-size: clamp(2.375rem, 5vw, 3.75rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; }
.h2 { font-size: clamp(1.875rem, 3.6vw, 2.875rem); line-height: 1.06; font-weight: 750; letter-spacing: -0.025em; }
.h3 { font-size: 1.375rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--ink-muted); max-width: 40em; }
.small { font-size: 0.9375rem; line-height: 1.6; }
.fine { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }
.hl { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 0.11em; text-underline-offset: 0.1em; text-decoration-skip-ink: none; }
/* section marker: a tiny three-into-one strand, then the section name */
.marker { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.9375rem; font-weight: 700; color: var(--blue); letter-spacing: 0.01em; }
.marker svg { width: 28px; height: 14px; flex: none; }
.band--navy .marker { color: var(--sky); }
.section-head { display: grid; gap: var(--space-4); max-width: 46rem; margin-bottom: var(--space-7); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control); padding: 0 var(--space-5); border: 2px solid transparent; border-radius: var(--radius-control); font: 700 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s, transform .15s; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--lg { min-height: var(--control-lg); padding: 0 var(--space-6); font-size: 1.0625rem; }
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-hover); color: var(--white); }
.btn--accent { background: var(--orange); color: var(--navy); }
.btn--accent:hover { background: var(--orange-hover); color: var(--navy); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.band--navy .btn--outline { color: var(--on-navy); border-color: var(--on-navy); }
.band--navy .btn--outline:hover { background: var(--on-navy); color: var(--navy); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.after-link { margin-top: var(--space-7); }
.textlink { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; text-decoration: none; }
.textlink svg { width: 18px; height: 18px; transition: transform .15s; }
.textlink:hover svg { transform: translateX(3px); }
.band--navy a:not(.btn) { color: var(--sky); }
.band--navy a:not(.btn):hover { color: var(--on-navy); }

/* ---------- header ---------- */
.site-header .logo { --logo-mark: var(--blue); --logo-word: var(--ink); }
.site-footer .logo { --logo-mark: var(--sky); --logo-word: var(--on-navy); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .site-header { background: var(--paper); } }
.header-bar { display: flex; align-items: center; gap: var(--space-6); min-height: 76px; }
.brand { display: inline-flex; flex: none; color: inherit; }
.brand .logo { height: 40px; width: auto; display: block; }
.nav { display: flex; gap: var(--space-5); }
.nav a { color: var(--ink); font-weight: 600; font-size: 1rem; text-decoration: none; padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--blue); }
.nav a[aria-current="page"] { border-bottom-color: var(--orange); }
.header-actions { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; }
.phone { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.phone svg { width: 20px; height: 20px; color: var(--blue); }
.phone:hover { color: var(--blue); }
.menu-btn { display: none; align-items: center; justify-content: center; width: var(--control); height: var(--control); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.mobile-nav { border-top: 1px solid var(--line); background: var(--paper); }
.mobile-nav .wrap { display: grid; gap: var(--space-1); padding-block: var(--space-4) var(--space-5); }
.mobile-nav a:not(.btn) { color: var(--ink); font-weight: 600; font-size: 1.125rem; text-decoration: none; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: var(--space-4); }
@media (max-width: 1000px) { .nav { display: none; } .menu-btn { display: inline-flex; } .header-actions { gap: var(--space-3); } }
@media (max-width: 640px) { .header-actions .btn, .phone span { display: none; } .phone { width: var(--control); height: var(--control); justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); } .brand .logo { height: 34px; } .header-bar { min-height: 64px; } }

/* ---------- hero ---------- */
.hero { padding-block: var(--space-8) var(--space-9); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.hero-copy { display: grid; gap: var(--space-5); min-width: 0; }
.hero-note { font-size: 0.9375rem; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; }
.hero-note .tick { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.hero-note .tick svg { width: 18px; height: 18px; color: var(--blue); }
.hero-art { position: relative; min-width: 0; }
.hero-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.strand { fill: none; stroke: var(--line-strong); stroke-width: 5; stroke-linecap: round; }
.strand--1 { stroke: #8E98A6; } .strand--2 { stroke: #6F7B8B; } .strand--3 { stroke: #A3ACB8; } .strand--4 { stroke: #5D6979; }
.trunk { fill: none; stroke: var(--blue); stroke-width: 26; stroke-linecap: round; }
.trunk-flow { fill: none; stroke: var(--sky); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 22; animation: flow 1.6s linear infinite; }
.merge-dot { fill: var(--orange); }
.tag-box { fill: var(--white); stroke: var(--line); }
.tag-text { font: 600 14px var(--font-body); fill: var(--ink); }
.tag-sub { font: 700 18px var(--font-body); fill: var(--ink); font-variant-numeric: tabular-nums; }
.tag-text { font-variant-numeric: tabular-nums; }
.art-note { margin-top: var(--space-3); max-width: 34em; }
.plan-box { fill: var(--ink); }
.plan-text { font: 700 15px var(--font-body); fill: var(--on-navy); }
.plan-amt { font: 800 30px var(--font-display); fill: var(--on-navy); font-variant-numeric: tabular-nums; }
.plan-sub { font: 500 14px var(--font-body); fill: var(--sky); }
@keyframes flow { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .trunk-flow { animation: none; } }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-block: var(--space-7) var(--space-8); } .hero-art { max-width: 560px; } }
.hero-art .art-tall { display: none; }
.trunk--tall { stroke-width: 18; }
@media (max-width: 640px) {
  .hero-art .art-wide { display: none; }
  .hero-art .art-tall { display: block; max-width: 400px; margin-inline: auto; }
  .art-tall .tag-text { font-size: 13px; }
  .art-tall .tag-sub { font-size: 16px; }
  .art-tall .plan-amt { font-size: 32px; }
  .art-tall .plan-sub { font-size: 15px; }
}


/* ---------- hero form ---------- */
.hero-grid--form { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: start; }
.hero-grid--form .hero-copy { padding-top: var(--space-6); }
.hero-call { font-size: 1rem; color: var(--ink-muted); }
.hero-call a { font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-form-wrap { min-width: 0; scroll-margin-top: calc(96px + env(safe-area-inset-top, 0px)); }
.hero-form { display: grid; gap: var(--space-5); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6); }
.hero-form-head { display: grid; gap: var(--space-1); }
.hero-form-head p { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-muted); }
.hf-fields { display: grid; gap: var(--space-4); }
.hf-mcas { border: 0; padding: 0; margin: 0; min-width: 0; }
.hf-mcas legend { padding: 0; margin-bottom: var(--space-2); font-weight: 600; font-size: 0.9375rem; }
.opt { font-weight: 500; color: var(--ink-muted); }
/* the five counts read as one segmented control */
.options.options--seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-control); overflow: hidden; background: var(--white); }
.options--seg .option + .option { border-left: 1px solid var(--line); }
.options--seg .option span { min-height: var(--control); padding: 0; border: 0; border-radius: 0; background: transparent; align-items: center; font: 600 1.0625rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.options--seg .option input:hover + span { background: var(--blue-soft); }
.options--seg .option input:checked + span { background: var(--blue); color: var(--white); }
.options--seg .option input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--blue), inset 0 0 0 4px var(--white); }
.check--compact { font-size: 0.875rem; line-height: 1.5; }
.hf-submit { width: 100%; }
.hf-secure { text-align: center; margin-top: calc(var(--space-3) * -1); }
.hf-secure .icon { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; color: var(--ink-muted); }
.hf-done { justify-items: start; gap: var(--space-4); }
.hf-done .btn { white-space: normal; text-align: left; min-height: var(--control); padding-block: var(--space-2); }
.change-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; margin-bottom: var(--space-7); }
.change-head .section-head { margin-bottom: 0; }
.change-art { max-width: 560px; justify-self: end; width: 100%; }
@media (max-width: 900px) {
  .hero-grid--form { grid-template-columns: 1fr; }
  .hero-grid--form .hero-copy { padding-top: 0; }
  .hero-form-wrap { max-width: 560px; }
  .change-head { grid-template-columns: 1fr; gap: var(--space-5); }
  .change-art { justify-self: start; }
}
@media (max-width: 560px) { .hero-form { padding: var(--space-5); } }
@media (max-width: 640px) {
  .hero-call { display: grid; gap: var(--space-2); }
  .hero-call a { display: flex; align-items: center; justify-content: center; min-height: var(--control); border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--white); color: var(--ink); text-decoration: none; }
}

/* ---------- statement band ---------- */
.statement { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); align-items: end; }
.statement-quote { font-family: var(--font-display); font-size: clamp(1.875rem, 3.8vw, 3.125rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; color: var(--on-navy); text-wrap: balance; }
.band--navy .statement-quote { color: var(--on-navy-muted); }
.statement-quote .hl-amber { color: var(--on-navy); }
.facts { display: grid; gap: var(--space-5); list-style: none; padding: 0; }
.facts li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; color: var(--on-navy-muted); font-size: 1.0625rem; }
.facts li strong { color: var(--on-navy); font-weight: 700; }
.facts svg { width: 28px; height: 14px; margin-top: 7px; color: var(--sky); }
@media (max-width: 900px) { .statement { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---------- before / after ---------- */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: stretch; }
.compare-col { padding: var(--space-6); border-radius: var(--radius-lg); display: grid; align-content: start; gap: var(--space-4); min-width: 0; }
.compare-col--before { background: var(--white); border: 1px solid var(--line); }
.compare-col--after { background: var(--blue-soft); }
.compare-col h3 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.compare-col h3 span { font: 600 0.8125rem/1 var(--font-body); padding: 6px 10px; border-radius: 999px; background: var(--paper); color: var(--ink-muted); letter-spacing: 0.02em; }
.compare-col--after h3 span { background: var(--blue); color: var(--white); }
.compare-list { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.compare-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.compare-list svg { width: 24px; height: 24px; margin-top: 2px; }
.compare-col--before svg { color: var(--line-strong); }
.compare-col--after svg { color: var(--blue); }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ---------- timeline ---------- */
.timeline { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); position: relative; counter-reset: step; }
.timeline::before { content: ""; position: absolute; left: 22px; right: 0; top: 22px; height: 4px; border-radius: 2px; background: var(--blue); }
.timeline li { position: relative; display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.timeline .node { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--white); border: 4px solid var(--blue); font: 800 1.125rem/1 var(--font-display); color: var(--blue); }
.timeline li:last-child .node { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.timeline .when { font-size: 0.875rem; font-weight: 600; color: var(--blue); }
.timeline p { color: var(--ink-muted); font-size: 1rem; }
@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; gap: var(--space-6); }
  .timeline::before { left: 22px; right: auto; top: 24px; bottom: 24px; width: 4px; height: auto; }
  .timeline li { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-5); }
  .timeline li > :not(.node) { grid-column: 2; }
  .timeline .node { grid-row: 1 / span 3; }
}

/* ---------- fit ---------- */
.fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.fit-copy { display: grid; gap: var(--space-5); }
.criteria { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.criteria li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); font-size: 1.125rem; }
.criteria svg { width: 24px; height: 24px; color: var(--blue); margin-top: 3px; }
.notfit { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--white); border: 1px dashed var(--line-strong); font-size: 0.9375rem; color: var(--ink-muted); }
.notfit strong { color: var(--ink); }
.industries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); list-style: none; padding: 0; }
.industries li { position: relative; padding-left: 22px; font-weight: 600; font-size: 0.9375rem; }
.industries li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 12px; height: 3px; border-radius: 2px; background: var(--blue); }
@media (max-width: 480px) { .industries { grid-template-columns: 1fr; } }
.industries-title { font: 700 0.9375rem var(--font-body); color: var(--ink-muted); margin-bottom: var(--space-4); }
@media (max-width: 900px) { .fit { grid-template-columns: 1fr; gap: var(--space-7); } }

/* ---------- receipt ---------- */
.cost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--space-8); align-items: center; }
.receipt { background: var(--white); border-radius: var(--radius-u); padding: var(--space-6); box-shadow: var(--shadow-lg); position: relative; }
.receipt-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 2px solid var(--ink); }
.receipt-head strong { font: 800 1.25rem var(--font-display); }
.receipt-head span { font-size: 0.8125rem; color: var(--ink-muted); font-weight: 600; }
.receipt dl { display: grid; }
.receipt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-5); padding-block: var(--space-4); border-bottom: 1px dashed var(--line-strong); }
.receipt-row:last-child { border-bottom: 0; padding-bottom: 0; }
.receipt-row dt { font-weight: 700; }
.receipt-row dd.value { font: 800 1.25rem var(--font-display); text-align: right; color: var(--blue); }
.receipt-row dd.note { grid-column: 1 / -1; font-size: 0.9375rem; color: var(--ink-muted); }
@media (max-width: 900px) { .cost { grid-template-columns: 1fr; gap: var(--space-7); } }

/* ---------- questions ---------- */
.qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-8); }
.qa { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.qa h3 { font-size: 1.3125rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.qa p { color: var(--ink-muted); }
@media (max-width: 800px) { .qa-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---------- closing band ---------- */
.closer { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.closer-copy { display: grid; gap: var(--space-5); }
.closer-copy > p:not(.marker) { color: var(--on-navy-muted); font-size: 1.1875rem; max-width: 34em; }
.closer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.closer-phone { display: inline-flex; align-items: center; min-height: var(--control); color: var(--on-navy); font: 700 1.375rem var(--font-display); text-decoration: none; font-variant-numeric: tabular-nums; }
.closer-art svg { width: 100%; height: auto; display: block; }
.closer-art path[stroke="#4CC4AE"] { stroke: var(--sky); }
.closer-art circle { fill: var(--orange); }
@media (max-width: 900px) { .closer { grid-template-columns: 1fr; } .closer-art { order: -1; max-width: 420px; } }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--on-navy-muted); padding-block: var(--space-8) var(--space-6); font-size: 0.9375rem; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-7); padding-bottom: var(--space-7); border-bottom: 1px solid var(--navy-line); }
.footer-brand { display: grid; gap: var(--space-4); align-content: start; }
.footer-brand .logo { height: 46px; width: auto; }
.footer-brand p { max-width: 22em; }
.footer-col h2 { font: 700 0.875rem var(--font-body); color: var(--on-navy); margin-bottom: var(--space-2); letter-spacing: 0.02em; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 0; }
.footer-col li > a { display: inline-block; padding-block: 10px; }
.footer-col li:not(:has(a)) { padding-block: 10px; }
.site-footer a { color: var(--on-navy-muted); text-decoration: none; }
.site-footer a:hover { color: var(--on-navy); text-decoration: underline; }
.footer-legal { display: grid; gap: var(--space-4); padding-top: var(--space-6); font-size: 0.8125rem; line-height: 1.65; }
.footer-legal p { max-width: 70em; }
.footer-base { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
@media (max-width: 900px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- inner pages ---------- */
.page-hero { padding-block: var(--space-8) var(--space-7); border-bottom: 1px solid var(--line); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-7); align-items: end; }
.page-hero .lead { margin-top: var(--space-4); }
.crumb { font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); margin-bottom: var(--space-4); display: block; }
@media (max-width: 900px) { .page-hero-grid { grid-template-columns: 1fr; } }

.steps-long { list-style: none; padding: 0; display: grid; gap: 0; }
.step-long { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--space-6); position: relative; padding-bottom: var(--space-8); }
.step-long::before { content: ""; position: absolute; left: 22px; top: 48px; bottom: 0; width: 4px; background: var(--blue); border-radius: 2px; }
.step-long:last-child::before { display: none; }
.step-long:last-child { padding-bottom: 0; }
.step-long .node { width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--blue); background: var(--paper); display: inline-flex; align-items: center; justify-content: center; font: 800 1.125rem/1 var(--font-display); color: var(--blue); position: relative; z-index: 1; }
.step-long:last-child .node { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.step-body { display: grid; gap: var(--space-4); min-width: 0; }
.step-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-2); }
.step-meta div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.step-meta dt { font-size: 0.8125rem; font-weight: 700; color: var(--blue); margin-bottom: var(--space-1); }
.step-meta dd { font-size: 0.9375rem; }
@media (max-width: 700px) { .step-long { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); } .step-meta { grid-template-columns: 1fr; } }

.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.role { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); display: grid; gap: var(--space-3); align-content: start; }
.role-icon { width: 48px; height: 48px; border-radius: 14px 14px 24px 24px; background: var(--blue-soft); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; }
.role-icon svg { width: 24px; height: 24px; }
.role ul { padding-left: 1.1em; display: grid; gap: var(--space-2); color: var(--ink-muted); font-size: 1rem; }
@media (max-width: 900px) { .roles { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.prose { display: grid; gap: var(--space-4); max-width: 40em; }
.prose p, .prose li { color: var(--ink-muted); }
.prose ul { padding-left: 1.2em; display: grid; gap: var(--space-2); }
.prose h2 { margin-bottom: var(--space-2); }
.prose h3 { margin-top: var(--space-4); }
.band--navy .prose p, .band--navy .prose li { color: var(--on-navy-muted); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-7); } }

.terms-list { list-style: none; padding: 0; display: grid; gap: var(--space-5); }
.terms-list li { display: grid; gap: var(--space-2); padding-left: var(--space-5); border-left: 4px solid var(--sky); }
.terms-list strong { color: var(--on-navy); font-size: 1.125rem; }

.promise-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.promise-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); }
.promise-list svg { width: 24px; height: 24px; color: var(--blue); margin-top: 3px; }
.promise-list strong { display: block; color: var(--ink); }
@media (max-width: 700px) { .promise-list { grid-template-columns: 1fr; } }

/* FAQ page */
.faq-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.faq-toc { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); display: grid; gap: var(--space-2); }
.faq-toc p { font-size: 0.8125rem; font-weight: 700; color: var(--ink-muted); margin-bottom: var(--space-2); }
.faq-toc a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; text-decoration: none; }
.faq-toc a:hover { background: var(--white); color: var(--blue); }
.faq-group { display: grid; gap: var(--space-6); padding-bottom: var(--space-8); scroll-margin-top: 100px; }
.faq-group:last-child { padding-bottom: 0; }
.faq-group > h2 { padding-bottom: var(--space-4); border-bottom: 2px solid var(--ink); }
.faq-item { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-3) var(--space-7); padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.faq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.faq-item h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.faq-item div { display: grid; gap: var(--space-3); color: var(--ink-muted); }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; gap: var(--space-6); } .faq-toc { position: static; display: flex; flex-wrap: wrap; } .faq-toc p { width: 100%; } .faq-toc a { background: var(--white); border: 1px solid var(--line); } .faq-item { grid-template-columns: 1fr; } }

/* contact block */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.contact-card { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--navy-raised); display: grid; gap: var(--space-2); align-content: start; }
.contact-card h3 { font: 700 0.875rem var(--font-body); color: var(--on-navy-muted); }
.contact-card .big { font: 750 1.5rem/1.2 var(--font-display); color: var(--on-navy); text-decoration: none; overflow-wrap: anywhere; }
.contact-card .big--sm { font-size: 1.1875rem; }
.contact-card p { color: var(--on-navy-muted); font-size: 0.9375rem; }
.copy-btn { justify-self: start; margin-top: var(--space-2); background: transparent; border: 1px solid var(--navy-line); color: var(--on-navy); border-radius: var(--radius-sm); padding: 6px 12px; font: 600 0.875rem var(--font-body); cursor: pointer; }
.copy-btn:hover { border-color: var(--sky); color: var(--sky); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* legal placeholder */
.placeholder { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--orange-soft); color: var(--ink); font-size: 0.9375rem; }

/* ---------- review flow ---------- */
.flow { padding-block: var(--space-7) var(--space-9); }
.flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); align-items: start; }
.flow-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-7); min-width: 0; }
.progress { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.progress-label { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 700; color: var(--ink-muted); }
.progress-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.progress-track span { height: 6px; border-radius: 3px; background: var(--line); transition: background-color .2s; }
.progress-track span.is-done { background: var(--blue); }
.step { display: grid; gap: var(--space-5); border: 0; padding: 0; margin: 0; min-width: 0; }
.step legend { font-family: var(--font-display); font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: 1.12; font-weight: 750; letter-spacing: -0.02em; color: var(--ink); padding: 0; margin-bottom: var(--space-3); text-wrap: balance; }
.step .help { color: var(--ink-muted); }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.options--count { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.option { position: relative; }
.option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.option span { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: var(--space-3) var(--space-4); border: 2px solid var(--line); border-radius: var(--radius-control); background: var(--white); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; transition: border-color .15s, background-color .15s, color .15s; }
.options--count .option span { align-items: center; font: 800 1.875rem/1 var(--font-display); min-height: 80px; }
.option span small { font: 500 0.875rem/1.35 var(--font-body); color: var(--ink-muted); margin-top: 2px; }
.option input:hover + span { border-color: var(--ink); }
.option input:checked + span { border-color: var(--blue); background: var(--blue); color: var(--white); }
.option input:checked + span small { color: var(--blue-soft); }
.option input:focus-visible + span { box-shadow: var(--focus); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.field { display: grid; gap: var(--space-2); min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field .req { color: var(--danger); }
.field input, .field select { width: 100%; height: var(--control); padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--white); color: var(--ink); font: 400 1.0625rem var(--font-body); appearance: none; -webkit-appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5768' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: var(--space-7); }
.field input:focus, .field select:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.field-error { display: none; color: var(--danger); font-size: 0.875rem; font-weight: 600; }
.field.has-error .field-error, .field-error.is-shown { display: block; }
.consent { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-md); background: var(--paper); }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: 0.875rem; line-height: 1.55; color: var(--ink-muted); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); }
.check.has-error { color: var(--danger); }
.check.has-error input { outline: 2px solid var(--danger); outline-offset: 2px; }
.check-error { padding-left: 36px; margin-top: calc(var(--space-2) * -1); }
.check.has-error + .check-error { display: block; }
.notice { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font-size: 0.9375rem; }
.notice svg { width: 22px; height: 22px; margin-top: 1px; }
.notice--info { background: var(--blue-soft); } .notice--info svg { color: var(--blue); }
.notice--amber { background: var(--orange-soft); }
.flow-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.back-btn { background: none; border: 0; padding: var(--space-2) 0; font: 700 1rem var(--font-body); color: var(--ink-muted); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); }
.back-btn svg { width: 18px; height: 18px; transform: scaleX(-1); }
.back-btn:hover { color: var(--ink); }
.back-btn[hidden] { display: none; }
.flow-side { display: grid; gap: var(--space-5); position: sticky; top: calc(100px + env(safe-area-inset-top, 0px)); }
.side-card { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--navy); color: var(--on-navy-muted); display: grid; gap: var(--space-4); }
.side-card h2 { font: 750 1.375rem/1.2 var(--font-display); color: var(--on-navy); }
.side-card ol { padding-left: 1.2em; display: grid; gap: var(--space-3); font-size: 0.9375rem; }
.side-card ol strong { color: var(--on-navy); }
.side-card .phone-line { color: var(--on-navy); font: 750 1.375rem var(--font-display); text-decoration: none; font-variant-numeric: tabular-nums; }
.summary { justify-self: stretch; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.summary div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.summary div:last-child { border-bottom: 0; }
.summary dt { color: var(--ink-muted); }
.summary dd { font-weight: 700; text-align: right; }
.done { display: grid; gap: var(--space-5); justify-items: start; }
.done-mark { width: 64px; height: 64px; border-radius: 16px 16px 32px 32px; background: var(--blue); color: var(--white); display: inline-flex; align-items: center; justify-content: center; }
.done-mark svg { width: 32px; height: 32px; }
@media (max-width: 960px) { .flow-grid { grid-template-columns: 1fr; } .flow-side { position: static; } }
@media (max-width: 560px) { .flow-card { padding: var(--space-5); } .fields { grid-template-columns: 1fr; } .options--count { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); } .options--count .option span { min-height: 64px; font-size: 1.5rem; padding: var(--space-2); } }

@media (max-width: 640px) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .band { padding-block: var(--space-8); }
  .section-head { margin-bottom: var(--space-6); }
  .compare-col { padding: var(--space-5); }
  .receipt { padding: var(--space-5); }
}