/* Layout: Apple-style marketing site, light only. Translucent sticky nav, white and soft-gray bands, centered section
   headlines, hairline dividers instead of boxes, gray tiles that preview the real tools. Navy is reserved for the logo,
   buttons and key numbers. */
:root {
  --bg: #ffffff;
  --mist: #f5f5f7;          /* Apple-style soft gray */
  --ink: #0c1729;           /* logo ink navy */
  --ink2: rgba(12,23,41,.64);
  --ink3: rgba(12,23,41,.36);
  --line: rgba(12,23,41,.1);
  --fill: rgba(12,23,41,.06);
  --navy: #26324c;          /* Buck Mortgage navy: bands and primary buttons */
  --tint: #2f4a86;          /* interactive navy for links and focus */
  --on-navy: #ffffff;
  --on-navy2: rgba(255,255,255,.72);
  --btn: #26324c; --btn-ink: #ffffff;
  --card: #ffffff;
  --chrome: rgba(251,251,253,.82);
  --good: #1f7a3a;
  --logo-light: block; --logo-dark: none;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
  --r-xl: 28px; --r-lg: 20px; --r-md: 14px;
  --script: "Pacifico", "Snell Roundhand", "Brush Script MT", cursive;   /* closest Google Font to the logo's script */
  --logo-ink: #101C30;
  --max: 1080px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font: 17px/1.47 var(--font); -webkit-font-smoothing: antialiased; letter-spacing: -.011em; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--chrome); }
a { color: var(--tint); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 3px solid var(--tint); outline-offset: 3px; border-radius: 10px; }
.num { font-variant-numeric: tabular-nums; }
.logo-light { display: var(--logo-light); } .logo-dark { display: var(--logo-dark); }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px)); }
.band { padding-block: 96px; }
.band.mist { background: var(--mist); }
.band.navy { background: var(--navy); color: var(--on-navy); }
.band.tight { padding-block: 64px; }
@media (max-width: 700px) { .band { padding-block: 64px; } .band.tight { padding-block: 48px; } }

.script { font: 400 clamp(44px, 6vw, 68px)/1.3 var(--script); color: var(--logo-ink); letter-spacing: 0; margin: 0 0 12px; }
.page-head .script + .h1 { font-size: clamp(32px, 4.4vw, 52px); }
.eyebrow { font: 600 15px var(--font); color: var(--tint); letter-spacing: 0; margin: 0 0 10px; }
.navy .eyebrow { color: #b9c7ec; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; }
.h-hero { font-weight: 600; font-size: clamp(48px, 7.2vw, 88px); line-height: 1.04; letter-spacing: -.035em; }
.h-hero em { font-style: normal; color: var(--ink2); }
.h1 { font-weight: 600; font-size: clamp(40px, 5.6vw, 64px); line-height: 1.06; letter-spacing: -.03em; }
.h2 { font-weight: 600; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -.028em; }
.h3 { font-weight: 650; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -.022em; }
.lede { font-size: clamp(19px, 2vw, 24px); line-height: 1.38; color: var(--ink2); letter-spacing: -.016em; max-width: 38ch; margin: 18px 0 0; }
.navy .lede { color: var(--on-navy2); }
.muted { color: var(--ink2); }
.small { font-size: 14px; color: var(--ink2); }
.fine { font-size: 12px; line-height: 1.55; color: var(--ink2); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-weight: 600; font-size: 16px; letter-spacing: -.01em; transition: transform .12s, opacity .15s; }
.btn:hover { text-decoration: none; opacity: .92; }
.btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--tint); box-shadow: inset 0 0 0 1.5px currentColor; }
.navy .btn { background: #ffffff; color: #0c1729; }
.navy .btn.ghost { background: transparent; color: #fff; }
.btn.sm { min-height: 32px; padding: 0 15px; font-size: 14px; font-weight: 500; }
.link-arrow { font-weight: 500; display: inline-flex; gap: 4px; align-items: center; }
.link-arrow::after { content: "›"; font-size: 1.25em; line-height: 1; transform: translateY(-1px); }
.navy .link-arrow { color: #c9d5f3; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 30px; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--chrome); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 52px; }
.nav-logo { display: flex; align-items: center; flex: none; }
.nav-logo img { height: 36px; width: auto; }
.nav-links { display: flex; gap: 30px; margin: 0 auto; font-size: 12.5px; letter-spacing: -.005em; }
.nav-links a { color: var(--ink); opacity: .82; }
.nav-links a:hover { opacity: 1; text-decoration: none; }
.nav-links a[aria-current="page"] { opacity: 1; font-weight: 600; }
.nav-end { display: flex; align-items: center; gap: 16px; font-size: 12.5px; }
.nav-end > a:not(.btn) { color: var(--ink); opacity: .82; }
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 10px; place-items: center; }
.menu-btn svg { width: 22px; height: 22px; }
@media (max-width: 960px) { .nav-links, .nav-end .signin { display: none; } .menu-btn { display: grid; } .nav-end { margin-left: auto; } }
.sheet-menu { position: fixed; inset: 0; z-index: 70; background: var(--bg); padding: calc(env(safe-area-inset-top, 0px) + 12px) max(22px, env(safe-area-inset-right, 0px)) 32px max(22px, env(safe-area-inset-left, 0px)); overflow: auto; animation: fade .2s ease; }
.sheet-menu .top { display: flex; justify-content: space-between; align-items: center; height: 48px; }
.sheet-menu .top img { height: 40px; }
.sheet-menu nav { display: grid; gap: 6px; margin-top: 24px; }
.sheet-menu nav a { font: 700 30px/1.25 var(--display); letter-spacing: -.03em; color: var(--ink); }
.sheet-menu .meta { margin-top: 32px; display: grid; gap: 10px; font-size: 16px; }

/* ---------- Home hero ---------- */
.hero { padding-block: 40px 72px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 44px; align-items: start; }
.hero-grid { align-items: stretch; }
.hero-copy { display: flex; flex-direction: column; padding-bottom: 4px; }
.hero-copy > .hero-script { margin: -10px 0 4px; font-size: clamp(40px, 4.2vw, 58px); line-height: 1.22; font-weight: 400; }
@media (max-height: 820px) and (min-width: 981px) { .hero-points span { display: none; } }
@media (max-width: 980px) { .hero-copy > .hero-script { font-size: 30px; margin: 0 0 4px; } }
.hero-points { list-style: none; margin: 24px 0 0; padding: 0; border-top: .5px solid var(--line); }
.hero-points li { padding: 9px 0; border-bottom: .5px solid var(--line); display: grid; gap: 2px; }
.hero-points li { grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.hero-points b { font-weight: 600; font-size: 14.5px; }
.hero-points span { font-size: 13.5px; color: var(--ink2); }
.hero-text { margin-top: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--mist); color: var(--ink); }
.hero-text:hover { text-decoration: none; background: color-mix(in srgb, var(--mist) 80%, var(--line)); }
.ht-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; }
.ht-icon svg { width: 18px; height: 18px; }
.hero-text b { display: block; font-weight: 600; font-size: 15px; }
.hero-text span span { font-size: 13.5px; color: var(--ink2); }
.ht-go { font-size: 22px; color: var(--ink3); }
.hero-states { padding-top: 22px; }
.hero-states p { display: flex; justify-content: space-between; align-items: baseline; padding: 0; margin: 0 0 10px; line-height: 1; font-size: 13px; color: var(--ink2); }
.hero-states p span:first-child { font-weight: 600; color: var(--ink); }
.hero-states ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.hero-states li { background: var(--mist); border-radius: 14px; padding: 10px 6px 8px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.hero-states svg { width: 100%; max-width: 48px; height: 34px; fill: var(--navy); }
.hero-states li span { font-size: 11.5px; font-weight: 500; line-height: 1.2; color: var(--ink2); }
.hero .h-hero { font-size: clamp(36px, 3.7vw, 52px); }
.hero .lede { font-size: 20px; margin-top: 14px; }
.hero .actions { margin-top: 22px; }
.hero .lede { max-width: 30ch; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 24px; } .hero { padding-block: 20px 48px; } .hero .h-hero { font-size: clamp(34px, 9vw, 52px); } .hero .lede, .hero .actions, .hero .trust, .hero-points, .hero-states, .hero-text { display: none; } .hero .eyebrow { margin-bottom: 6px; } }
/* Foldable iPhone, unfolded: two screens with a crease. Chat on the left, live summary on the right. */
.fold { contain: size; min-height: max(560px, min(640px, calc(100vh - 160px))); height: auto; border-radius: 46px; padding: 11px; background: #1d2029; box-shadow: inset 0 0 0 1.5px #3a3f4b, 0 30px 70px -40px rgba(12,23,41,.45); position: relative; }
.fold-screen { position: relative; height: 100%; border-radius: 36px; background: #fff; overflow: hidden; display: flex; flex-direction: column; color: #0c1729; }
.fold-status { display: flex; justify-content: space-between; align-items: center; padding: 12px 26px 0; font: 600 13px var(--font); height: 34px; flex: none; }
.fold-cam { position: absolute; top: 12px; left: 75%; width: 11px; height: 11px; border-radius: 50%; background: #1d2029; }
.fold-icons { display: flex; gap: 5px; align-items: center; } .fold-icons svg { height: 10px; width: auto; }
.fold-top { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "tabs logo count"; align-items: center; gap: 12px; padding: 10px 22px 14px; flex: none; }
.fold-top img { grid-area: logo; height: 64px; width: auto; justify-self: center; }
.fold-tabs { grid-area: tabs; } .fold-count { grid-area: count; }
.fold-tabs { display: none; justify-self: center; background: rgba(12,23,41,.06); border-radius: 999px; padding: 3px; }
.fold-tabs button { font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: 999px; color: rgba(12,23,41,.6); }
.fold-tabs button[aria-selected="true"] { background: #fff; color: #0c1729; box-shadow: 0 0 0 .5px rgba(12,23,41,.1), 0 1px 2px rgba(12,23,41,.08); }
.fold-count { justify-self: end; font-size: 12px; color: rgba(12,23,41,.55); }
.fold-bar { height: 3px; background: rgba(12,23,41,.07); flex: none; margin: 0 22px; border-radius: 2px; overflow: hidden; }
.fold-bar i { display: block; height: 100%; width: 0; background: #26324c; border-radius: 2px; transition: width .35s cubic-bezier(.2,.8,.2,1); }
.fold-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1px 1fr; }
.fold-crease { background: linear-gradient(90deg, rgba(12,23,41,.03), rgba(12,23,41,.1), rgba(12,23,41,.03)); }
.pane { min-height: 0; overflow-y: auto; padding: 16px 20px 20px; scrollbar-width: thin; }
.pane-chat { display: flex; flex-direction: column; gap: 8px; background: #fff; }
.pane-chat > * { flex: none; }
.b { max-width: 88%; padding: 9px 13px; border-radius: 18px; font-size: 14.5px; line-height: 1.38; }
.b.bot { align-self: flex-start; background: #f2f2f5; border-bottom-left-radius: 6px; }
.b.bot b { font-weight: 600; display: block; }
.b.bot small { display: block; margin-top: 3px; color: rgba(12,23,41,.58); font-size: 12.5px; }
.b.me { align-self: flex-end; background: #2f4a86; color: #fff; border-bottom-right-radius: 6px; }
.duo-opts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.duo-opts button { font-size: 14px; font-weight: 500; color: #2f4a86; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(47,74,134,.35); background: #fff; transition: background .15s; }
.duo-opts button:hover { background: rgba(47,74,134,.07); }
.duo-input { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 2px; }
.duo-input input { min-height: 40px; border-radius: 999px; padding: 0 16px; background: #f2f2f5; box-shadow: none; color: #0c1729; }
.duo-input button { width: 40px; height: 40px; border-radius: 50%; background: #26324c; color: #fff; font-size: 18px; font-weight: 600; }
.duo-err { grid-column: 1 / -1; font-size: 12.5px; color: #b3261e; min-height: 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pane-sum { background: #fbfbfd; display: grid; align-content: start; gap: 14px; }
.sum-head small { font-size: 12px; font-weight: 600; color: #2f4a86; }
.sum-head strong { display: block; font: 600 20px/1.2 var(--display); letter-spacing: -.02em; margin-top: 2px; }
.sum-head p { margin: 6px 0 0; font-size: 13px; color: rgba(12,23,41,.58); }
.sum-sec h4 { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(12,23,41,.5); }
.sum-sec.empty h4 { color: rgba(12,23,41,.28); }
.sum-sec > div { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 7px 0; border-top: .5px solid rgba(12,23,41,.1); font-size: 13px; }
.sum-sec span { color: rgba(12,23,41,.55); grid-column: 1; font-size: 12px; }
.sum-sec b { font-weight: 500; grid-column: 1; }
.sum-sec button { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 12.5px; color: #2f4a86; }
.sum-notes h4 { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(12,23,41,.5); }
.sum-notes p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
.sum-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: rgba(12,23,41,.5); padding-top: 4px; }
.sum-foot button { color: #2f4a86; font-size: 12.5px; font-weight: 500; }
.fold-foot { margin: 0; padding: 8px 22px 14px; font-size: 11px; color: rgba(12,23,41,.5); border-top: .5px solid rgba(12,23,41,.08); flex: none; }
.fold-confirm { position: absolute; inset: 0; background: rgba(255,255,255,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; }
.fold-confirm > div { background: #fff; border-radius: 18px; padding: 20px; max-width: 300px; display: grid; gap: 10px; box-shadow: 0 0 0 .5px rgba(12,23,41,.12), 0 12px 40px rgba(12,23,41,.16); }
.fold-confirm p { margin: 0; font-size: 14px; color: rgba(12,23,41,.6); }
.fold-confirm .link-arrow::after { content: none; }
/* Narrow screens: the fold closes to a single screen with Conversation / Summary tabs. */
@media (max-width: 760px) {
  .fold { contain: none; min-height: 0; height: max(450px, calc(100svh - 245px)); border-radius: 40px; padding: 9px; }
  .fold-screen { border-radius: 32px; }
  .fold-cam { left: 50%; transform: translateX(-50%); width: 80px; height: 22px; border-radius: 12px; top: 9px; }
  .fold-top { grid-template-columns: 1fr auto; grid-template-areas: "logo logo" "tabs count"; padding: 6px 16px 10px; row-gap: 10px; } .fold-top img { height: 52px; }
  .fold-tabs { display: inline-flex; justify-self: start; }
  .fold-bar { margin: 0 16px; }
  .fold-panes { grid-template-columns: 1fr; } .fold-crease { display: none; }
  .fold[data-pane="chat"] .pane-sum, .fold[data-pane="sum"] .pane-chat { display: none; }
  .pane { padding: 14px 16px 16px; }
  .fold-foot { padding: 8px 16px 12px; }
}
.trust { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 36px; font-size: 13px; color: var(--ink2); }
.trust b { color: var(--ink); font-weight: 600; }

/* Phone mockup */
.phone { width: min(330px, 100%); margin: 0 auto; aspect-ratio: 330 / 680; border-radius: 52px; padding: 12px; background: #0b0f17; box-shadow: 0 30px 60px -36px rgba(12,23,41,.35), inset 0 0 0 1.5px #2b3242; position: relative; }
.phone-screen { height: 100%; border-radius: 41px; overflow: hidden; background: #f5f5f7; color: #0c1729; display: flex; flex-direction: column; position: relative; }
.phone-island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 96px; height: 28px; border-radius: 20px; background: #0b0f17; z-index: 2; }
.phone-status { display: flex; justify-content: space-between; padding: 16px 28px 0; font: 600 14px var(--font); height: 48px; }
.phone-body { flex: 1; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.phone-body .q-eyebrow { font-size: 12px; font-weight: 600; color: #2f4a86; }
.phone-body .q-title { font: 700 24px/1.12 var(--display); letter-spacing: -.03em; }
.phone-opt { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 14px; padding: 14px 16px; font-size: 15px; font-weight: 500; text-align: left; width: 100%; color: #0c1729; box-shadow: 0 1px 2px rgba(12,23,41,.05); transition: box-shadow .15s, transform .1s; }
.phone-opt:hover { box-shadow: 0 0 0 1.5px #2f4a86; }
.phone-opt:active { transform: scale(.985); }
.phone-opt span { color: rgba(12,23,41,.35); font-size: 20px; line-height: 1; }
.phone-progress { height: 4px; border-radius: 2px; background: rgba(12,23,41,.1); overflow: hidden; }
.phone-progress i { display: block; height: 100%; width: 20%; background: #26324c; border-radius: 2px; }
.phone-foot { margin-top: auto; font-size: 11px; color: rgba(12,23,41,.55); line-height: 1.4; }

/* ---------- Path tiles ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.tile { border-radius: var(--r-xl); background: var(--mist); text-align: center; align-items: center; padding: 48px 40px 0; display: flex; flex-direction: column; min-height: 520px; overflow: hidden; position: relative; color: var(--ink); }
.tile.wide { grid-column: 1 / -1; min-height: 0; padding-bottom: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; text-align: left; }
.tile.wide p { margin-left: 0; }
.tile.wide .actions { justify-content: flex-start; }
.tile h3 { font: 600 clamp(30px, 3.4vw, 42px)/1.08 var(--display); letter-spacing: -.028em; }
.tile p { margin: 10px auto 0; color: var(--ink2); font-size: 19px; line-height: 1.4; max-width: 30ch; }
.tile .actions { margin-top: 22px; justify-content: center; }
.tile-visual { margin-top: auto; padding-top: 40px; width: 100%; max-width: 420px; text-align: left; }
@media (max-width: 800px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 0; padding: 32px 24px 0; } .tile.wide { grid-template-columns: 1fr; padding-bottom: 32px; } }
/* Mini UI readouts inside tiles: they are computed live by the real calculators. */
.readout { background: var(--card); border-radius: 22px 22px 0 0; padding: 24px 24px 28px; display: grid; gap: 14px; }
.readout small { font-size: 13px; color: var(--ink2); display: block; }
.readout .big { font: 600 50px/1 var(--display); letter-spacing: -.035em; }
.readout .big span { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-left: 4px; opacity: .6; }
.stack-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; }
.stack-bar i { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.be-track { position: relative; height: 12px; border-radius: 6px; background: var(--fill); }
.be-track i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--navy); }
.be-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink2); }
.c1 { background: #26324c; } .c2 { background: #5b6c95; } .c3 { background: #9aa8c7; } .c4 { background: #c9d1e3; } .c5 { background: #e4e8f1; }

/* ---------- Tracker band ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--fill); color: var(--ink2); }
.navy .pill { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.feature-list { display: grid; gap: 0; margin-top: 32px; border-top: .5px solid var(--line); }
.feature-list div { padding: 16px 0; border-bottom: .5px solid var(--line); display: grid; gap: 2px; }
.feature-list b { font-weight: 600; font-size: 17px; }
.feature-list span { color: var(--ink2); font-size: 15px; }
.track-card { background: #fff; border-radius: 18px; padding: 16px; display: grid; gap: 12px; }
.track-card small { font-size: 12px; color: rgba(12,23,41,.55); }
.track-card .stage { font: 700 24px/1.1 var(--display); letter-spacing: -.03em; }
.jbar { position: relative; height: 10px; border-radius: 5px; background: rgba(12,23,41,.08); }
.jbar i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: #26324c; }
.jbar b { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: #2f4a86; border: 3px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(12,23,41,.12); }
.jends { display: flex; justify-content: space-between; font-size: 11px; color: rgba(12,23,41,.55); }
.tile-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile-dates div { background: #fff; border-radius: 14px; padding: 10px 12px; }
.tile-dates small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(12,23,41,.5); }
.tile-dates strong { font: 700 16px var(--display); color: #26324c; }
.mini-steps { background: #fff; border-radius: 14px; padding: 6px 12px; }
.mini-steps div { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: rgba(12,23,41,.5); }
.mini-steps div + div { border-top: .5px solid rgba(12,23,41,.1); }
.mini-steps i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(12,23,41,.25); flex: none; }
.mini-steps .done { color: #0c1729; } .mini-steps .done i { background: #26324c; border-color: #26324c; }
.mini-steps .now { color: #0c1729; font-weight: 600; } .mini-steps .now i { border-color: #2f4a86; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px #2f4a86; }

/* ---------- Text line + transparency ---------- */
.text-line { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .text-line { grid-template-columns: 1fr; gap: 32px; } }
.text-card { background: var(--card); border-radius: var(--r-xl); padding: 28px; display: grid; gap: 10px; }
.bubble-in, .bubble-out { max-width: 82%; padding: 10px 14px; border-radius: 20px; font-size: 16px; line-height: 1.38; }
.bubble-in { justify-self: end; background: #2f4a86; color: #fff; border-bottom-right-radius: 6px; }
.bubble-out { justify-self: start; background: var(--mist); border-bottom-left-radius: 6px; }
.text-num { margin-top: 14px; padding-top: 18px; border-top: .5px solid var(--line); display: grid; gap: 2px; }
.text-num small { font-size: 13px; color: var(--ink2); }
.text-num b { font: 600 34px/1.15 var(--display); letter-spacing: -.02em; }
.text-num span { font-size: 14px; color: var(--ink2); }
.trans-head { margin-top: 112px; }
.partner-home { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.partner-home .device { max-width: 300px; justify-self: center; }
.p-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 32px; border-top: .5px solid var(--line); }
.p-stats > div { padding: 20px 20px 0 0; }
.p-stats > div + div { padding-left: 20px; border-left: .5px solid var(--line); }
.p-stats strong { display: block; font: 700 clamp(22px, 2.2vw, 26px)/1.1 var(--display); letter-spacing: -.025em; color: var(--logo-ink); }
.p-stats span { display: block; font-size: 14px; color: var(--ink2); margin-top: 6px; }
.p-pitch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.p-pitch > div { background: #fff; border-radius: var(--r-xl); padding: 28px; box-shadow: 0 0 0 .5px var(--line); }
.p-pitch h3 { font: 650 21px/1.25 var(--display); letter-spacing: -.02em; margin: 10px 0 8px; }
.p-pitch p { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.5; }
.p-pitch b.num { font: 700 30px/1 var(--display); color: var(--tint); }
@media (max-width: 860px) { .partner-home { grid-template-columns: 1fr; gap: 40px; } .p-pitch { grid-template-columns: 1fr; } .p-stats strong { font-size: 24px; } }
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; gap: 48px; margin-top: 56px; }
.screens figure { margin: 0; display: grid; gap: 18px; align-content: start; }
.device { border-radius: 40px; padding: 9px; background: #1d2029; box-shadow: inset 0 0 0 1.5px #3a3f4b, 0 24px 50px -32px rgba(12,23,41,.4); }
.device img { display: block; width: 100%; height: auto; aspect-ratio: 585 / 1266; border-radius: 32px; }
.screens figcaption { display: grid; gap: 4px; }
.screens figcaption small { font-size: 12px; font-weight: 600; color: var(--tint); }
.screens figcaption b { font: 600 20px/1.25 var(--display); letter-spacing: -.015em; }
.screens figcaption span { font-size: 15px; color: var(--ink2); line-height: 1.45; }
@media (max-width: 960px) { .screens { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(230px, 62%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; } .screens figure { scroll-snap-align: start; } }

/* ---------- Tool carousel ---------- */
.rail-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 36px 2px 18px; margin-top: 4px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail a { scroll-snap-align: start; background: var(--mist); border-radius: var(--r-lg); padding: 26px 24px; min-height: 300px; display: flex; flex-direction: column; gap: 8px; color: var(--ink); transition: transform .2s; }
.rail a:hover { text-decoration: none; transform: scale(1.015); }
.rail small { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); }
.rail strong { font: 600 24px/1.15 var(--display); letter-spacing: -.025em; }
.rail p { margin: 0; color: var(--ink2); font-size: 15px; }
.rail .fig { margin-top: auto; font: 700 34px var(--display); letter-spacing: -.035em; color: var(--tint); }
.rail .fig span { display: block; font: 500 12px var(--font); letter-spacing: 0; color: var(--ink2); margin-top: 2px; }
.rail-btns { display: flex; gap: 10px; }
.rail-btns button { width: 38px; height: 38px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; color: var(--ink); }
.rail-btns svg { width: 16px; height: 16px; }

/* ---------- Meet David ---------- */
.david { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; }
.david img { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; }
@media (max-width: 760px) { .david { grid-template-columns: 1fr; gap: 28px; } .david img { width: 160px; height: 160px; } }
.quote { font: 500 clamp(26px, 3.2vw, 38px)/1.22 var(--display); letter-spacing: -.022em; margin: 0; }
.sig { margin-top: 20px; font-size: 15px; color: var(--ink2); }
.sig b { color: var(--ink); font-weight: 600; display: block; font-size: 17px; }
.states { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ---------- Page header for inner pages ---------- */
.page-head { padding-block: 80px 40px; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
.center .actions { justify-content: center; }
.page-head .lede { max-width: 46ch; }
@media (max-width: 700px) { .page-head { padding-block: 48px 24px; } }

/* ---------- Path pages ---------- */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 48px; border-top: .5px solid var(--line); }
.steps3 > div { padding: 28px 28px 8px 0; display: grid; gap: 8px; align-content: start; }
.steps3 > div + div { padding-left: 28px; border-left: .5px solid var(--line); }
.steps3 .n { font: 700 15px var(--display); color: var(--tint); font-variant-numeric: tabular-nums; }
.steps3 h3 { font: 650 22px/1.2 var(--display); letter-spacing: -.02em; }
.steps3 p { margin: 0; color: var(--ink2); font-size: 16px; }
@media (max-width: 800px) { .steps3 { grid-template-columns: 1fr; } .steps3 > div, .steps3 > div + div { padding: 22px 0; border-left: 0; border-bottom: .5px solid var(--line); } }
.links-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 15px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); }
.chip:hover { text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--tint); }

/* ---------- Compare (loans) ---------- */
.compare-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.cmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
.cmp-col { display: grid; grid-template-rows: subgrid; grid-row: span 8; text-align: center; }
.cmp-col > * { padding: 0 8px; }
.cmp-head { padding-top: 28px; padding-bottom: 28px; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); margin-bottom: 8px; }
.tag.nq { color: #fff; background: var(--navy); padding: 3px 9px; border-radius: 999px; }
.cmp-head h3 { font: 600 30px/1.1 var(--display); letter-spacing: -.025em; }
.cmp-head p { margin: 10px auto 0; color: var(--ink2); font-size: 15px; line-height: 1.4; max-width: 24ch; }
.cmp-cell { border-top: .5px solid var(--line); padding-top: 22px; padding-bottom: 22px; display: grid; gap: 4px; align-content: start; }
.cmp-cell strong { font: 600 28px/1.1 var(--display); letter-spacing: -.025em; color: var(--ink); }
.cmp-cell.text strong { font-size: 19px; line-height: 1.3; letter-spacing: -.015em; font-weight: 500; }
.cmp-cell span { font-size: 13px; color: var(--ink2); }
.cmp-cell a { font-size: 15px; justify-self: center; }
@media (max-width: 760px) {
  .compare-pick, .cmp { grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .compare-pick { gap: 14px; }
  .cmp-col.third, .compare-pick .third { display: none; }
  .cmp-head h3 { font-size: 24px; }
  .cmp-cell strong { font-size: 23px; }
  .cmp-cell.text strong { font-size: 16px; }
}
select, input[type="text"], input[type="number"], input[type="search"] { font: inherit; color: var(--ink); background: var(--card); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; min-height: 46px; padding: 0 14px; width: 100%; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
input:focus, select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--tint); }

/* ---------- Calculators ---------- */
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--fill); padding: 4px; border-radius: 999px; gap: 2px; }
.seg::-webkit-scrollbar { display: none; }
.seg button { white-space: nowrap; flex: none; }
.seg button { padding: 8px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink2); }
.seg button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 .5px var(--line), 0 1px 2px rgba(12,23,41,.08); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 32px; align-items: start; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.panel { background: var(--card); border-radius: var(--r-lg); padding: 32px; }
.mist .panel { background: var(--card); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.fields .full { grid-column: 1 / -1; }
@media (max-width: 460px) { .fields { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink2); }
.field .hint { font-size: 12px; color: var(--ink2); }
.affix { position: relative; }
.affix input { padding-left: 28px; }
.affix::before { content: attr(data-pre); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink2); pointer-events: none; }
.affix.post input { padding-left: 14px; padding-right: 34px; }
.affix.post::before { content: none; }
.affix.post::after { content: attr(data-post); position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink2); pointer-events: none; }
.result { position: sticky; top: 84px; display: grid; gap: 22px; }
.result .label { font-size: 14px; color: var(--ink2); }
.result .figure { font: 600 clamp(48px, 6vw, 64px)/1 var(--display); letter-spacing: -.035em; margin-top: 6px; }
.result .figure span { font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--ink2); margin-left: 4px; }
.rows { display: grid; }
.rows div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: .5px solid var(--line); font-size: 15px; }
.rows div span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--ink2); }
.rows div span:first-child i { width: 8px; height: 8px; border-radius: 50%; }
.compare-bars { display: grid; gap: 10px; }
.compare-bars div { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.compare-bars span:first-child { color: var(--ink2); }
.compare-bars i { display: block; height: 10px; border-radius: 5px; background: var(--navy); }
.compare-bars .alt i { background: #9aa8c7; }
.rows div.total { font-weight: 600; } .rows div.total span:first-child { color: var(--ink); }
.callout { background: var(--mist); border-radius: var(--r-md); padding: 14px 16px; font-size: 14px; color: var(--ink2); line-height: 1.5; }
.mist .callout { background: var(--bg); }
.callout b { color: var(--ink); }
.callout.good b { color: var(--good); }
input[type="range"] { width: 100%; accent-color: var(--navy); }

/* ---------- Learn ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.filters button { min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink2); }
.filters button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
@media (max-width: 900px) { .guides { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .guides { grid-template-columns: 1fr; } }
.guide { text-align: left; background: var(--mist); border-radius: var(--r-lg); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; min-height: 220px; transition: transform .2s; }
.guide:hover { transform: translateY(-2px); }
.guide small { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tint); }
.guide strong { font: 600 22px/1.2 var(--display); letter-spacing: -.022em; }
.guide p { margin: 0; color: var(--ink2); font-size: 15px; }
.guide .meta { margin-top: auto; font-size: 13px; color: var(--ink2); }

/* ---------- Sheet (guide reader) ---------- */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(8,12,20,.42); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s ease; }
.reader { width: 100%; max-width: 720px; max-height: 92vh; overflow: auto; background: var(--bg); border-radius: 22px 22px 0 0; padding: 0 0 calc(32px + env(safe-area-inset-bottom, 0px)); animation: rise .3s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 760px) { .scrim { align-items: center; } .reader { border-radius: 22px; max-height: 86vh; } }
.reader-bar { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--chrome); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: .5px solid var(--line); font-size: 14px; color: var(--ink2); }
.reader-bar button { font-weight: 600; color: var(--tint); font-size: 16px; }
.reader article { padding: 28px clamp(20px, 5vw, 48px) 0; }
.reader h2 { font: 700 clamp(30px, 4vw, 40px)/1.08 var(--display); letter-spacing: -.035em; }
.reader h3 { font: 650 20px/1.25 var(--display); letter-spacing: -.02em; margin-top: 28px; }
.reader p, .reader li { color: var(--ink2); font-size: 17px; line-height: 1.55; max-width: 62ch; }
.reader ul { padding-left: 20px; }
.reader blockquote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--navy); font: 600 19px/1.4 var(--display); letter-spacing: -.015em; color: var(--ink); }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- FAQ ---------- */
.faq { margin-top: 32px; border-top: .5px solid var(--line); max-width: 860px; }
.faq details { border-bottom: .5px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font: 600 20px/1.3 var(--display); letter-spacing: -.02em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 300 28px var(--font); color: var(--ink2); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: -6px 0 22px; color: var(--ink2); max-width: 64ch; }
.search { max-width: 520px; margin-top: 28px; }
.empty { padding: 28px 0; color: var(--ink2); }
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 48px; border-top: .5px solid var(--line); }
.team .person { display: grid; grid-template-columns: 88px 1fr; gap: 20px; padding: 28px 0; border-bottom: .5px solid var(--line); }
.avatar-lg { width: 88px; height: 88px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; overflow: hidden; font: 600 26px var(--display); color: var(--tint); }
.mist .avatar-lg { background: var(--card); }
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { font: 600 22px/1.2 var(--display); letter-spacing: -.02em; }
.person .role { margin: 2px 0 0; font-size: 14px; color: var(--ink2); }
.person .bio { margin: 10px 0 0; font-size: 15px; color: var(--ink2); line-height: 1.5; }
.person-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 14px; }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .team .person { grid-template-columns: 1fr; gap: 12px; } .avatar-lg { width: 72px; height: 72px; } }
.glossary { max-width: 860px; margin: 32px auto 0; border-top: .5px solid var(--line); }
.glossary > div { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 20px 0; border-bottom: .5px solid var(--line); }
.glossary dt { font: 600 18px/1.3 var(--display); letter-spacing: -.015em; }
.glossary dd { margin: 0; color: var(--ink2); }
@media (max-width: 640px) { .glossary > div { grid-template-columns: 1fr; gap: 4px; } }
.doc { margin-top: 40px; border-top: .5px solid var(--line); padding-top: 8px; }
.doc h2 { font: 600 22px/1.25 var(--display); letter-spacing: -.02em; margin-top: 32px; }
.doc p { color: var(--ink2); max-width: 68ch; }

/* ---------- Start (questionnaire) ---------- */
.q-shell { max-width: 720px; margin: 0 auto; }
.q-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; color: var(--ink2); }
.q-bar { height: 4px; border-radius: 2px; background: var(--fill); overflow: hidden; margin-top: 14px; }
.q-bar i { display: block; height: 100%; background: var(--navy); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.q-card { margin-top: 40px; animation: qin .35s cubic-bezier(.2,.8,.2,1); }
@keyframes qin { from { opacity: .001; transform: translateX(24px); } }
.q-card h2 { font: 700 clamp(32px, 4.6vw, 48px)/1.08 var(--display); letter-spacing: -.035em; }
.q-card .lede { max-width: 48ch; font-size: 19px; }
.opts { display: grid; gap: 10px; margin-top: 32px; }
.opts.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .opts.two { grid-template-columns: 1fr; } }
.opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 18px 20px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 17px; font-weight: 500; transition: box-shadow .15s, transform .1s; }
.opt small { display: block; font-size: 14px; font-weight: 400; color: var(--ink2); margin-top: 2px; }
.opt:hover { box-shadow: inset 0 0 0 1.5px var(--tint); }
.opt:active { transform: scale(.99); }
.opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--tint); }
.opt .go { color: var(--ink3); font-size: 22px; line-height: 1; flex: none; }
.q-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.q-back { color: var(--tint); font-weight: 500; }
.range-out { font: 700 44px/1 var(--display); letter-spacing: -.04em; margin-top: 28px; }
.range-out span { font-size: 16px; font-weight: 500; color: var(--ink2); letter-spacing: 0; display: block; margin-top: 8px; }
.result-paths { display: grid; gap: 12px; margin-top: 28px; }
.result-paths { gap: 0 !important; border-top: .5px solid var(--line); }
.result-paths > div { padding: 18px 0; border-bottom: .5px solid var(--line); display: grid; gap: 4px; }
.result-paths b { font: 600 20px var(--display); letter-spacing: -.02em; }
.result-paths span { color: var(--ink2); font-size: 15px; }
.next-step { margin-top: 28px; background: var(--mist); color: var(--ink); border-radius: var(--r-lg); padding: 28px; display: grid; gap: 10px; }
.next-step small { font-size: 13px; font-weight: 600; color: var(--tint); }
.next-step strong { font: 600 28px/1.15 var(--display); letter-spacing: -.025em; }
.next-step p { margin: 0; color: var(--ink2); }
.next-step .actions { margin-top: 12px; }

/* ---------- About ---------- */
.about-hero { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
.about-hero img { width: 300px; height: 300px; border-radius: 50%; object-fit: cover; }
@media (max-width: 800px) { .about-hero { grid-template-columns: 1fr; } .about-hero img { width: 180px; height: 180px; order: -1; } }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; border-top: .5px solid var(--line); }
.facts > div { padding: 24px 24px 0 0; }
.facts > div + div { padding-left: 24px; border-left: .5px solid var(--line); }
.facts small { font-size: 13px; color: var(--ink2); display: block; }
.facts strong { font: 700 22px/1.25 var(--display); letter-spacing: -.02em; display: block; margin-top: 4px; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } .facts > div, .facts > div + div { padding: 18px 0; border-left: 0; border-bottom: .5px solid var(--line); } }
.principles { display: grid; gap: 0; margin-top: 40px; border-top: .5px solid var(--line); }
.principles > div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; padding: 28px 0; border-bottom: .5px solid var(--line); }
.principles h3 { font: 650 24px/1.2 var(--display); letter-spacing: -.022em; }
.principles p { margin: 0; color: var(--ink2); }
@media (max-width: 700px) { .principles > div { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Contact band + footer ---------- */
.cta-band { text-align: left; }
.cta-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; }
@media (max-width: 860px) { .cta-grid { grid-template-columns: 1fr; gap: 28px; } }
.contact-list { display: grid; gap: 0; border-top: .5px solid var(--line); }
.contact-list > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; border-bottom: .5px solid var(--line); font-size: 16px; flex-wrap: wrap; }
.contact-list span { color: var(--ink2); font-size: 14px; }
.copy { font-size: 13px; font-weight: 600; color: var(--tint); }
footer { background: var(--mist); padding-block: 48px 36px; font-size: 12px; color: var(--ink2); border-top: .5px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }
footer h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink); }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
footer a { color: var(--ink2); }
footer a:hover { color: var(--ink); }
footer .foot-logo img { height: 44px; width: auto; }
.legal { margin-top: 40px; padding-top: 24px; border-top: .5px solid var(--line); display: grid; gap: 12px; line-height: 1.6; }
.ehl { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.ehl svg { width: 22px; height: 22px; }

[hidden] { display: none !important; }
.proto-note { display: inline-flex; justify-self: start; background: var(--fill); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--ink2); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }