/* Inter (SIL OFL), self-hosted so every host and OS renders the same face. Variable
   font, weights 100-900, latin + latin-ext (the latter carries the peso sign). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* bidit marketing site (www.bidit.services) — shared stylesheet.
   Layout concept: the product is the hero. One quiet white field, the real
   "What do you need done?" card in the middle, and the logo's ascending
   pixel squares as the only decoration. Sections alternate white / paper /
   navy. Single light theme by design (the app has no dark theme). */

:root {
  /* Brand tokens — identical to frontend/app/assets/app.css (LTST-504). */
  --navy: #072a52;
  --navy-deep: #010d1f;
  --navy-hover: #0a3568;
  --blue: #008eff;
  --blue-hover: #0077db;
  --blue-tint: #e6f4ff;
  --blue-tint-2: #f2f9ff;
  --text: #0b1f3a;
  --muted: #5a6b7d;
  --faint: #8494a4;
  --border: #d7e2ee;
  --border-subtle: #e3eaf2;
  --white: #ffffff;
  --paper: #f5f8fc;
  --ok: #1f9d57;
  --ok-bg: #e7f6ee;
  --warn: #c47a00;
  --warn-bg: #fff6e5;
  --danger: #b91c1c;
  --ring: var(--blue);
  --shadow-lg: 0 24px 60px rgba(7, 42, 82, 0.14);
  --shadow-sm: 0 6px 20px rgba(7, 42, 82, 0.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  /* Type: Inter everywhere, like the app and the store listing. Contrast
     comes from weight and tracking, not from a second family. */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --h1: clamp(2.5rem, 6vw, 4.25rem);
  --h2: clamp(1.75rem, 3.4vw, 2.5rem);
  --h3: 1.2rem;
  --lead: clamp(1.05rem, 1.4vw, 1.2rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--navy); text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
input:focus-visible, textarea:focus-visible { outline: none; }

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

.container { width: min(1120px, 100% - 32px); margin: 0 auto; }
.container-narrow { width: min(780px, 100% - 32px); margin: 0 auto; }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 8px; font-weight: 600;
}
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px; border: 2px solid transparent;
  font-weight: 700; font-size: 1rem; line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 22px rgba(0, 142, 255, 0.28); }
.btn-primary:hover { background: var(--blue-hover); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-hover); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-hover); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: var(--blue-tint); }
.btn-lg { padding: 14px 30px; min-height: 52px; font-size: 1.05rem; border-radius: 12px; }
.btn-sm { padding: 9px 14px; font-size: 0.92rem; border-radius: 9px; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo img { height: 32px; width: auto; }
.logo .wordmark { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.04em; color: var(--navy); line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 0.95rem; }
.nav-links a:not(.btn) { color: var(--muted); padding: 8px 12px; border-radius: 8px; }
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { color: var(--navy); background: rgba(7, 42, 82, 0.05); }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-right .login { font-weight: 600; color: var(--navy); padding: 8px 12px; border-radius: 8px; }
.nav-right .login:hover { background: rgba(7, 42, 82, 0.05); }
.nav-ham {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 42px; padding: 0 11px; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer;
}
.nav-ham i { display: block; height: 2px; border-radius: 2px; background: var(--navy); transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-ham[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-ham[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-ham[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Section rhythm ---------- */
.section { padding-block: clamp(64px, 8vw, 104px); }
.section.paper { background: var(--paper); }
.section.navy { background: linear-gradient(135deg, var(--navy-deep), var(--navy)); color: #fff; }
.section.navy h2, .section.navy h3 { color: #fff; }
.section-head { max-width: 680px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue-hover);
}
.section.navy .eyebrow { color: #8fd0ff; }
h2 { font-size: var(--h2); letter-spacing: -0.025em; line-height: 1.12; }
.section-head p { margin-top: 14px; color: var(--muted); font-size: var(--lead); }
.section.navy .section-head p { color: #c6def7; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 6vw, 80px);
  background: radial-gradient(1100px 520px at 50% -10%, var(--blue-tint) 0%, rgba(230, 244, 255, 0) 62%), var(--white);
}
/* The logo's ascending squares, scaled up and faded — the one flourish. */
.px { position: absolute; border-radius: 14%; background: var(--blue); opacity: 0.08; pointer-events: none; }
.px-1 { width: 120px; height: 120px; right: 6%; top: 60px; }
.px-2 { width: 76px; height: 76px; right: calc(6% + 140px); top: 190px; opacity: 0.06; }
.px-3 { width: 48px; height: 48px; right: calc(6% + 232px); top: 282px; opacity: 0.05; }
.px-4 { width: 90px; height: 90px; left: 5%; bottom: 40px; opacity: 0.05; }
.hero-inner { position: relative; max-width: 800px; margin: 0 auto; text-align: center; }

.hero h1 { font-size: var(--h1); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; }
.hero h1 .accent { color: var(--blue); }
.hero .lead { margin: 22px auto 0; max-width: 580px; font-size: var(--lead); color: var(--muted); }

.need-card {
  max-width: 640px; margin: 34px auto 0; text-align: left;
  background: var(--white); border: 2px solid var(--border); border-radius: 16px;
  padding: 20px 22px; box-shadow: var(--shadow-lg); transition: border-color 0.15s ease;
}
.need-card:focus-within { border-color: var(--blue); }
.need-card.shake { animation: shake 0.3s ease; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.need-q { font-weight: 800; color: var(--navy); font-size: 1.02rem; margin-bottom: 10px; }
.need-card textarea {
  width: 100%; border: 0; outline: 0; resize: none; background: transparent;
  font: inherit; font-size: 1.05rem; line-height: 1.5; color: var(--text); min-height: 76px; padding: 0;
}
.need-card textarea::placeholder { color: #93a3b4; }
.need-go { width: 100%; margin-top: 14px; padding: 14px 24px; min-height: 52px; font-size: 1.02rem; border-radius: 11px; }
.need-eg { max-width: 640px; margin: 16px auto 0; font-size: 0.86rem; color: var(--muted); }
/* LTST-607: the provider doorway right under the customer card. */
.hero-pro { margin: 14px auto 0; font-size: 0.9rem; color: var(--muted); text-align: center; }
.hero-pro a { color: var(--blue-hover, var(--blue)); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.chips button {
  font-size: 0.86rem; font-weight: 600; color: var(--navy); background: var(--white);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: all 0.15s ease;
}
.chips button:hover { border-color: var(--blue); color: var(--blue-hover); background: var(--blue-tint-2); }

.trust-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  margin: 34px auto 0; font-size: 0.9rem; font-weight: 600; color: var(--muted);
}
.trust-row li { display: inline-flex; align-items: center; gap: 8px; }
.trust-row svg { width: 18px; height: 18px; color: var(--ok); flex: none; }

/* ---------- Services tiles ---------- */
/* Tiles: the photo box is a block with a fixed 4:3 ratio and the image is
   pinned inside it. Never give the image a percentage height that resolves
   against the grid item: stretched grid items make `height: 100%` equal the
   whole tile, which pushed every label under the next row (live bug, 2026-09-30). */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 16px; align-items: start; }
.tile { display: block; min-width: 0; border-radius: var(--radius-md); }
.tile .ph {
  display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; height: auto;
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--blue-tint); box-shadow: var(--shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile:hover .ph { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tile b { display: block; margin-top: 10px; font-size: 0.95rem; color: var(--navy); }
.tile small { display: block; color: var(--faint); font-size: 0.8rem; }
.tiles-foot { margin-top: 34px; text-align: center; color: var(--muted); font-size: 0.95rem; }
.tiles-foot a { color: var(--blue-hover); font-weight: 700; }

/* ---------- Steps with phone illustrations ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; align-items: start; }
.step { text-align: center; }
.step .phone { margin: 0 auto 26px; }
.step-n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 800; font-size: 0.95rem; margin-bottom: 12px;
}
.step h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
.step p { margin: 8px auto 0; max-width: 320px; color: var(--muted); }

/* Phone frame — CSS illustration of the app's real screens. Replace with
   captures once production has non-test data. */
.phone {
  width: 250px; max-width: 100%; aspect-ratio: 250 / 520; position: relative;
  background: var(--navy-deep); border-radius: 36px; padding: 10px;
  box-shadow: 0 30px 60px -20px rgba(1, 13, 31, 0.45), inset 0 0 0 2px #1d3557;
}
.phone .screen {
  position: absolute; inset: 10px; border-radius: 28px; overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column; text-align: left;
}
.phone .notch { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 70px; height: 20px; border-radius: 0 0 14px 14px; background: var(--navy-deep); z-index: 2; }
.s-status { display: flex; justify-content: space-between; padding: 10px 16px 0; font-size: 0.62rem; font-weight: 700; color: var(--navy); }
.s-head { padding: 18px 14px 8px; }
.s-kicker { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-hover); }
.s-title { font-size: 1rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; line-height: 1.15; margin-top: 2px; }
.s-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.s-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px 11px; font-size: 0.68rem; line-height: 1.35; color: var(--text); }
.s-card.on { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-tint); }
.s-card.quote { background: var(--blue-tint-2); border-color: #cfe8ff; color: var(--navy); font-style: italic; }
.s-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.s-row b { color: var(--navy); font-weight: 700; }
.s-sub { color: var(--muted); font-size: 0.62rem; margin-top: 2px; }
.s-money { font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.s-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.s-badge { font-size: 0.55rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: var(--blue-tint); color: var(--blue-hover); }
.s-badge.ok { background: var(--ok-bg); color: var(--ok); }
.s-btn { margin-top: auto; background: var(--blue); color: #fff; text-align: center; font-weight: 800; font-size: 0.72rem; padding: 10px; border-radius: 10px; }
.s-btn.navy { background: var(--navy); }
.s-field { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border-subtle); font-size: 0.66rem; }
.s-field:last-child { border-bottom: 0; }
.s-field span { color: var(--muted); }
.s-field b { color: var(--navy); text-align: right; }
.s-rail { display: flex; flex-direction: column; gap: 0; }
.s-rail li { position: relative; padding: 0 0 10px 18px; font-size: 0.66rem; color: var(--muted); }
.s-rail li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.s-rail li::after { content: ""; position: absolute; left: 7.5px; top: 14px; bottom: -2px; width: 1px; background: var(--border-subtle); }
.s-rail li:last-child::after { display: none; }
.s-rail li.done { color: var(--text); }
.s-rail li.done::before { background: var(--ok); }
.s-rail li.now { color: var(--navy); font-weight: 700; }
.s-rail li.now::before { background: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.s-tabs { display: flex; justify-content: space-around; padding: 8px 6px 10px; border-top: 1px solid var(--border-subtle); background: #fff; font-size: 0.5rem; font-weight: 700; color: var(--faint); }
.s-tabs span.on { color: var(--blue-hover); }
.s-tabs .mid { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); margin-top: -16px; box-shadow: 0 6px 12px -4px rgba(0, 142, 255, 0.6); border: 3px solid #fff; }

/* ---------- Comparison ---------- */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: #fff; }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.95rem; }
.cmp th, .cmp td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); }
.cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: var(--paper); font-weight: 700; }
.cmp thead th.us { color: var(--white); background: var(--navy); }
.cmp td.us { background: var(--blue-tint-2); font-weight: 600; color: var(--navy); }
.cmp td:first-child { font-weight: 700; color: var(--navy); width: 24%; }
.cmp .yes, .cmp .no { display: inline-flex; align-items: center; gap: 8px; }
.cmp .yes svg { width: 18px; height: 18px; color: var(--ok); flex: none; }
.cmp .no svg { width: 18px; height: 18px; color: var(--faint); flex: none; }
.cmp .no { color: var(--muted); }

/* ---------- Trust cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.facts.four { grid-template-columns: repeat(4, 1fr); }
.card { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 26px 24px; }
.card .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-tint); color: var(--blue-hover); margin-bottom: 16px; }
.card .ico svg { width: 24px; height: 24px; }
.card h3 { font-size: 1.1rem; letter-spacing: -0.01em; }
.card p { margin-top: 8px; color: var(--muted); font-size: 0.95rem; }
.badge-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--border-subtle); font-size: 0.8rem; font-weight: 700; color: var(--navy); }
.badge .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }

/* ---------- Credits band ---------- */
.credits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.credit { padding: 26px 24px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.credit .amt { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.credit .amt small { font-size: 0.95rem; font-weight: 600; color: #8fd0ff; margin-left: 6px; letter-spacing: 0; }
.credit h3 { margin-top: 12px; font-size: 1.05rem; }
.credit p { margin-top: 6px; color: #c6def7; font-size: 0.93rem; }
.credit .fine { margin-top: 10px; color: #8aa6c6; font-size: 0.8rem; }
.band-cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.band-cta .note { color: #c6def7; font-size: 0.9rem; }

/* ---------- Split sections (providers teaser, app band, pros hero) ---------- */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.split.rev { grid-template-columns: 0.9fr 1.1fr; }
.split h2 { margin-bottom: 14px; }
.split .lead { color: var(--muted); font-size: var(--lead); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.fact { padding: 16px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--border-subtle); }
.fact b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.fact span { display: block; margin-top: 2px; color: var(--muted); font-size: 0.85rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: center; }
.cta-row .sub { color: var(--muted); font-size: 0.9rem; }
.split .phone { margin: 0 auto; }

.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.store {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px;
  background: var(--navy-deep); color: #fff; min-width: 160px;
}
.store svg { width: 24px; height: 24px; flex: none; }
.store small { display: block; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: #9db6d3; line-height: 1; }
.store b { display: block; font-size: 1rem; line-height: 1.15; }
.store.soon { opacity: 0.85; }
.notify { display: flex; gap: 10px; margin-top: 18px; max-width: 460px; }
.notify input {
  flex: 1; min-width: 0; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--border);
  font: inherit; font-size: 0.98rem; color: var(--text); background: #fff;
}
.notify input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.notify-msg { margin-top: 10px; font-size: 0.9rem; color: var(--ok); font-weight: 600; min-height: 1.3em; }

/* ---------- Calculator (pros) ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 30px; }
.calc label { display: block; font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.calc .val { float: right; font-weight: 800; color: var(--blue-hover); font-variant-numeric: tabular-nums; }
.calc input[type="range"] { width: 100%; margin: 12px 0 24px; accent-color: var(--blue); }
.calc .out { background: var(--paper); border-radius: var(--radius-md); padding: 22px; }
.calc .line { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 0.95rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.calc .line b { color: var(--navy); }
.calc .line.total { border-bottom: 0; font-size: 1.15rem; padding-top: 14px; color: var(--navy); }
.calc .line.total b { font-size: 1.7rem; letter-spacing: -0.02em; }
.calc .fine { margin-top: 12px; font-size: 0.82rem; color: var(--faint); }
.toggle { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 0.9rem; color: var(--muted); font-weight: 600; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--blue); }

/* ---------- Status chips (pros incentives) ---------- */
.status { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.status.live { background: var(--ok-bg); color: var(--ok); }
.status.soon { background: var(--warn-bg); color: var(--warn); }
.card .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }

/* ---------- Checklist (pros) ---------- */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin-top: 8px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--text); }
.checks svg { width: 20px; height: 20px; color: var(--ok); flex: none; margin-top: 2px; }
.checks small { display: block; color: var(--muted); font-size: 0.88rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0 20px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 0; font-weight: 700; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--blue-hover); font-weight: 400; transition: transform 0.2s ease; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--muted); max-width: 68ch; }

/* ---------- Final CTA ---------- */
.final { text-align: center; }
.final h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.final p { margin: 14px auto 0; max-width: 560px; color: #c6def7; font-size: var(--lead); }
.final .cta-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: #a9bdd4; padding: 56px 0 28px; font-size: 0.92rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand .wordmark { color: #fff; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.04em; }
.foot-brand p { margin-top: 12px; max-width: 32ch; }
.foot-grid h4 { color: #fff; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.foot-grid li + li { margin-top: 9px; }
.foot-grid a:hover { color: #fff; }
.foot-bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 0.85rem; color: #7f97b3; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .split, .split.rev { grid-template-columns: 1fr; gap: 36px; }
  .split .phone { margin: 0 auto; }
  .cards, .cards.four { grid-template-columns: repeat(2, 1fr); }
  .facts.four { grid-template-columns: repeat(2, 1fr); }
  .credits { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .calc { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nav-links, .nav-right .login { display: none; }
  .nav-ham { display: inline-flex; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; left: 0; right: 0; top: 100%; padding: 10px 16px 16px;
    background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 12px 26px rgba(7, 42, 82, 0.1);
  }
  .nav-links.open a { padding: 13px 10px; font-size: 1.05rem; }
  .steps { grid-template-columns: 1fr; gap: 44px; }
  .step .phone { width: 230px; }
}
@media (max-width: 640px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .cards, .cards.four { grid-template-columns: 1fr; }
  .facts, .facts.four { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .need-card { padding: 16px; }
  .notify { flex-direction: column; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .trust-row { gap: 8px 18px; font-size: 0.85rem; }
  .px-1, .px-2, .px-3 { display: none; }
}