/* TugaCarro landing — design v2 (docs/agents/DESIGN.md).
 * One stylesheet for all landing pages (calculators, guides, catalog), 7 languages.
 * Classes used by app.js / import.js / catalog.js / lead.js / pdf.js are kept.
 * No web fonts, no external requests. Tokens in section 1.
 */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light dark;
  /* surfaces */
  --bg: #f7f7f4;
  --bg-elev: #ffffff;
  --bg-soft: #f0f0eb;
  --bg-sunk: #e8e8e1;
  /* ink */
  --ink: #0f1a17;
  --ink-2: #45514c;
  --ink-3: #5f6964;            /* was #7b8580 (3.5:1, failed AA) */
  --line: #e3e3dc;
  --line-strong: #cfd0c7;
  /* brand: TugaCarro */
  --accent: #0b7a5a;
  --accent-hover: #086247;
  --accent-ink: #ffffff;
  --accent-soft: #e3f2eb;
  /* brand: TugaCasa */
  --casa: #a5462a;
  --casa-soft: #fbeee7;
  /* night (hero band, result panel, CTA band) — same in both themes */
  --night: #0c1f1a;
  --night-2: #12312a;
  --night-ink: #f2f7f4;
  --night-ink-2: #c9d6d1;
  --night-ink-3: #9fb3ac;
  --night-line: rgba(255, 255, 255, .12);
  --mint: #5fe0b0;
  /* status */
  --warn: #8a5300;
  --warn-soft: #fff3dd;
  --danger: #a3261b;
  --danger-soft: #fde9e7;
  --ok: var(--accent);
  --tg: #136f9c;               /* Telegram blue darkened: white text 5.5:1 (BUG-74: 4.85 measured 4.36 on antialiased text) */
  --tg-hover: #0f5a82;
  /* type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  --fs-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
  --fs-3xl: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  --fs-num: clamp(2.5rem, 1.8rem + 3vw, 3.75rem);
  /* space (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  /* shape */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
  --radius: var(--r-lg);
  --sh-1: 0 1px 2px rgba(15, 26, 23, .06);
  --sh-2: 0 1px 2px rgba(15, 26, 23, .05), 0 6px 16px -6px rgba(15, 26, 23, .12);
  --sh-3: 0 2px 4px rgba(15, 26, 23, .04), 0 24px 48px -20px rgba(15, 26, 23, .28);
  --shadow: var(--sh-2);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --max: 1240px;
  --header-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1110; --bg-elev: #121a18; --bg-soft: #18221f; --bg-sunk: #1e2a26;
    --ink: #ecf1ee; --ink-2: #b4beb9; --ink-3: #8a9590;
    --line: #23302b; --line-strong: #31403a;
    --accent: #3fc99c; --accent-hover: #5fd8ae; --accent-ink: #04221a; --accent-soft: #123228;
    --casa: #f0936f; --casa-soft: #33190f;
    --night: #07100e; --night-2: #0e2620;
    --warn: #f0b85a; --warn-soft: #2d2410; --danger: #f08a7f; --danger-soft: #341714;
    --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -10px rgba(0,0,0,.6);
    --sh-3: 0 2px 4px rgba(0,0,0,.4), 0 28px 56px -24px rgba(0,0,0,.8);
    --tg: #1778ad; --tg-hover: #126792;   /* as light mode used to be: keeps the icon/link tint readable on dark */
  }
}
:root[data-theme="dark"] {
  --bg: #0b1110; --bg-elev: #121a18; --bg-soft: #18221f; --bg-sunk: #1e2a26;
  --ink: #ecf1ee; --ink-2: #b4beb9; --ink-3: #8a9590;
  --line: #23302b; --line-strong: #31403a;
  --accent: #3fc99c; --accent-hover: #5fd8ae; --accent-ink: #04221a; --accent-soft: #123228;
  --casa: #f0936f; --casa-soft: #33190f;
  --night: #07100e; --night-2: #0e2620;
  --warn: #f0b85a; --warn-soft: #2d2410; --danger: #f08a7f; --danger-soft: #341714;
  --tg: #1778ad; --tg-hover: #126792;
}

/* ---------- 1b. Selection tokens (DESIGN-9) ----------
   ONE place for every "selected / unselected" control: segmented radios, tabs, Auto | Casa,
   language menu. Selected = brand fill + high-contrast ink + check + inner ring; unselected = quiet.
   Light: #fff on #0b7a5a 5.3:1, fill vs track 4.1:1. Dark: #04221a on #3fc99c 8:1, fill vs track 7:1. */
:root {
  --sel-bg: var(--accent);
  --sel-ink: var(--accent-ink);
  --sel-ring: color-mix(in srgb, var(--sel-ink) 55%, transparent);
  --sel-casa-bg: var(--casa);
  --sel-casa-ink: #ffffff;
  --unsel-ink: var(--ink-2);
  --unsel-hover: color-mix(in srgb, var(--ink) 8%, transparent);
  --sel-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sel-casa-ink: #2b1006; } }
:root[data-theme="dark"] { --sel-casa-ink: #2b1006; }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-total, var(--header-h)) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: var(--fs-base)/1.6 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -.022em; margin: 0 0 .5em; text-wrap: balance; }
/* A single word wider than a narrow phone ("Datenschutzerklärung", "конфиденциальности" at 320 px) must not scroll the page
   sideways: on narrow screens long heading words hyphenate, or break as a last resort. Desktop and tablet are untouched. */
@media (max-width: 459px) { h1, h2 { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; } }
h1 { font-size: var(--fs-3xl); font-weight: 800; }
h2 { font-size: var(--fs-2xl); font-weight: 780; }
h3 { font-size: var(--fs-md); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); color: var(--ink-3); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--s-4); }
@media (min-width: 760px) { .wrap { padding: 0 var(--s-5); } }
section { padding: var(--s-8) 0; }
@media (min-width: 900px) { section { padding: var(--s-9) 0; } }
section.alt { background: var(--bg-elev); border-block: 1px solid var(--line); }
.kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-3);
}
.kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.lede { font-size: var(--fs-md); color: var(--ink-2); max-width: 64ch; line-height: 1.55; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px; }
.skip:focus { top: 8px; }

/* ---------- 3. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s-4); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; color: var(--ink); letter-spacing: -.02em; text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  /* one brand mark everywhere (issue #84): flat --night tile, --mint "A", 1px ring at 14 % so the tile stays visible on the dark theme;
     same values as the tile in og-*.svg, logo.svg and the favicon (tests/test_brand_mark.py pins them) */
  background: var(--night); color: var(--mint);
  display: grid; place-items: center; font-size: .95rem; font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.brand-mark svg { width: 20px; height: 20px; }
/* product switch: Auto | Casa */
.product-switch { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: var(--bg-soft); border: 1px solid var(--line); font-size: var(--fs-sm); }
.product-switch a { display: inline-flex; align-items: center; white-space: nowrap; padding: 5px 12px; border-radius: var(--r-pill); color: var(--ink-2); font-weight: 600; text-decoration: none; line-height: 1.2; }
.product-switch a:hover { color: var(--ink); background: var(--unsel-hover); }
.product-switch a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.product-switch a[aria-current] { background: var(--sel-bg); color: var(--sel-ink); box-shadow: inset 0 0 0 2px var(--sel-ring); font-weight: 650; text-shadow: 0 0 .5px currentColor; }
.product-switch a.casa[aria-current] { background: var(--sel-casa-bg); color: var(--sel-casa-ink); }
.product-switch a[aria-current]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.product-switch a.casa[aria-current]::before { background: currentColor; }
.nav { display: none; gap: 4px; margin-left: var(--s-2); font-size: .93rem; }
.nav a { white-space: nowrap; color: var(--ink-2); padding: 6px 10px; border-radius: var(--r-sm); text-decoration: none; }
.nav a:hover { color: var(--ink); background: var(--bg-soft); }
@media (min-width: 1380px) { .nav { display: flex; } }
.header-cta { margin-left: auto; }
.header-cta .label-short { display: none; }
@media (max-width: 559px) {
  .site-header .wrap { gap: 10px; }
  .site-header .product-switch a { padding: 5px 10px; }
  .btn.header-cta { width: 44px; padding: 0; }
  .header-cta .label-long { display: none; }
}
/* BUG-84 method block: the 4-column table keeps a readable width and scrolls inside .table-wrap */
.method-block { padding: 40px 0; }
.method-block table.data { min-width: 640px; font-size: .84rem; }
.method-block td, .method-block th { vertical-align: top; }
.method-block .lede { max-width: 760px; }

/* localized section words (ru: 'Недвижимость') are wider than 'Casa': below 520px a header WITH the Auto|Casa switch
   shows the T mark and the switch; the word stays in the DOM (font-size:0, not display:none). Without the switch
   (TugaCarro site, CASA_ON_SITE off) the word fits next to the mark. */
@media (max-width: 519px) {   /* D-S1: up to 519 px the full word pushed the Telegram button to a row of its own (fr/ru/uk at 460-500 px) */
  .site-header:has(.product-switch) .brand { font-size: 0; gap: 0; }
  .site-header:has(.product-switch) .brand .brand-mark { font-size: .9rem; }
}
@media (max-width: 459px) {
  .site-header .product-switch a { padding: 5px 9px; }
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: var(--r-md); font: inherit; font-weight: 650; font-size: .95rem; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none !important;
  transition: background-color .15s, border-color .15s, transform .08s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, var(--sh-1); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-tg { background: var(--tg); color: #fff; }
.btn-tg:hover { background: var(--tg-hover); }
.btn-ghost { background: var(--bg-elev); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-soft); }
/* a text-style button wraps like the text around it: a long label (de guide, section 1) must not push the page sideways */
.btn-link { background: none; border: 0; padding: 6px 2px; min-height: 36px; color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); white-space: normal; text-align: start; }
.btn-link:hover { color: var(--ink); }
.btn-lg { min-height: 52px; padding: 14px 24px; font-size: 1.02rem; border-radius: 14px; }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- 5. Hero band ---------- */
.hero { padding: var(--s-6) 0 var(--s-5); }
.hero-band {
  position: relative; color: var(--night-ink); padding: var(--s-6) 0 calc(var(--s-8) + 32px);
  background:
    radial-gradient(900px 420px at 85% -10%, color-mix(in srgb, var(--mint) 22%, transparent), transparent 60%),
    radial-gradient(600px 300px at 0% 110%, rgba(23,120,173,.22), transparent 60%),
    linear-gradient(180deg, var(--night-2), var(--night));
  overflow: hidden;
}
.hero-band::after { /* faint engineering grid */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--night-line) 1px, transparent 1px), linear-gradient(90deg, var(--night-line) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent);
}
.hero-band > .wrap { position: relative; z-index: 1; }
.hero-band h1 { color: #fff; max-width: 18ch; }
.hero-band .lede { color: var(--night-ink-2); }
.hero-band .lede strong { color: #fff; }
.hero-band .kicker { color: var(--mint); }
.hero-band .tiny { color: var(--night-ink-3); }
.hero-band a { color: var(--mint); }
.hero-band .small.muted { color: var(--night-ink-2); }
@media (min-width: 960px) {
  .hero-band { padding: var(--s-7) 0 calc(var(--s-8) + 64px); }
  .hero-top { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s-7); align-items: end; }
}
.hero-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 48px; } }
.trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--ink-2); padding: 0; list-style: none; }
.trust span, .trust li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: var(--r-pill); background: var(--bg-elev); border: 1px solid var(--line); }
.trust span::before, .trust li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.hero-band .trust-hero { flex-direction: column; align-items: flex-start; margin-top: 0; }
.hero-band .trust span { background: rgba(255,255,255,.06); border-color: var(--night-line); color: var(--night-ink); backdrop-filter: blur(4px); }
.hero-band .trust span::before { background-color: var(--mint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1f1a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
@media (max-width: 959px) { .hero-band .trust-hero { display: none; } .trust-after { display: flex !important; } }
.trust-after { display: none !important; margin: var(--s-4) 0 0; }

/* ---------- 6. Calculator instrument ---------- */
.card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.calc { padding: 20px; }
@media (min-width: 560px) { .calc { padding: 28px; } }
.calc-shell { margin-top: calc(-1 * (var(--s-8) + 16px)); position: relative; z-index: 2; }
@media (min-width: 960px) { .calc-shell { margin-top: -72px; } }
.calc-shell > .card { box-shadow: var(--sh-3); border-radius: var(--r-xl); overflow: clip; }
.calc-grid { display: grid; }
.calc-grid > * { min-width: 0; }
@media (min-width: 960px) { .calc-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.calc-form { padding: 20px; }
@media (min-width: 560px) { .calc-form { padding: 28px; } }
@media (min-width: 960px) { .calc-form { padding: 32px 36px; } }
.calc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--s-4); flex-wrap: wrap; }
.calc-head h2 { font-size: var(--fs-lg); margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full, .full { grid-column: 1 / -1; }
.field label { font-size: .8rem; font-weight: 650; color: var(--ink-2); }
.field label .hint { font-weight: 400; color: var(--ink-3); }
.input, select.input {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg-elev);
  color: var(--ink); font: inherit; font-size: 1rem; min-height: 46px; transition: border-color .15s, box-shadow .15s;
}
.input:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line-strong)); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
select.input { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6964' stroke-width='2.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 10px center; background-size: 16px; }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field label.check { display: flex; gap: 8px; align-items: center; font-weight: 500; margin-top: 6px; }
.field label.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.seg { display: grid; gap: 3px; padding: 3px; background: var(--bg-sunk); border-radius: 12px; }
.seg-2 { grid-template-columns: 1fr 1fr; }
.seg-3 { grid-template-columns: 1fr 1fr 1fr; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  text-align: center; padding: 8px 6px; border-radius: 9px; font-size: .86rem; font-weight: 600; color: var(--unsel-ink); line-height: 1.25;
  cursor: pointer; user-select: none; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background-color .15s, color .15s;
}
.seg label::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; opacity: 0; -webkit-mask: var(--sel-check) center / contain no-repeat; mask: var(--sel-check) center / contain no-repeat; }
.seg label:hover { color: var(--ink); background: var(--unsel-hover); }
.seg input:checked + label { background: var(--sel-bg); color: var(--sel-ink); box-shadow: inset 0 0 0 2px var(--sel-ring), var(--sh-1); text-shadow: 0 0 .5px currentColor; }
.seg input:checked + label::before { opacity: 1; }
.seg input:checked + label:hover { filter: brightness(1.06); }
.seg input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
details.adv { grid-column: 1 / -1; border-top: 1px dashed var(--line-strong); padding-top: 12px; margin-top: 2px; }
details.adv summary { cursor: pointer; font-size: .86rem; color: var(--ink-2); font-weight: 600; list-style: none; display: flex; gap: 8px; align-items: center; min-height: 32px; }
details.adv summary::-webkit-details-marker { display: none; }
details.adv summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
details.adv[open] summary::before { transform: rotate(45deg); }
details.adv .form-grid { margin-top: 12px; }
.keyhand { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.keyhand h3 { font-size: 1rem; margin-bottom: 12px; }

/* result panel (dark, sticky on desktop) */
.calc-result {
  background: linear-gradient(180deg, var(--night-2), var(--night)); color: var(--night-ink);
  padding: 24px 20px 28px;
}
@media (min-width: 560px) { .calc-result { padding: 28px; } }
@media (min-width: 960px) { .calc-result-inner { position: sticky; top: calc(var(--header-total, var(--header-h)) + 24px); } .calc-result { padding: 32px; } }
.calc-result .result { margin: 0; border: 0; padding: 0; }
.calc-result .muted, .calc-result .tiny { color: var(--night-ink-3); }
.calc-result a:not(.btn) { color: var(--mint); }
.result { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.result-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.result-total .label { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 650; }
.result-total .value { font-size: var(--fs-num); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.result-total .value small { font-size: .45em; font-weight: 700; color: var(--ink-2); margin-left: 2px; }
.calc-result .result-total { flex-direction: column; align-items: flex-start; gap: 10px; }
.calc-result .result-total .label { color: var(--night-ink-3); text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-xs); }
.calc-result .result-total .value { color: var(--mint); margin-top: 6px; }
.badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.calc-result .badge { background: rgba(95,224,176,.14); color: var(--mint); border: 1px solid rgba(95,224,176,.28); }
.breakdown { margin: 16px 0 0; padding: 0; list-style: none; font-size: .93rem; }
.breakdown li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.breakdown li:last-child { border-bottom: 0; }
.breakdown li span:last-child { font-weight: 650; white-space: nowrap; }
.breakdown li.neg span:last-child { color: var(--accent); }
.breakdown li.total { font-weight: 800; border-top: 1px solid var(--line-strong); border-bottom: 0; margin-top: 4px; padding-top: 10px; }
.calc-result .breakdown li { border-color: var(--night-line); color: var(--night-ink-2); }
.calc-result .breakdown li span:last-child { color: var(--night-ink); }
.calc-result .breakdown li.neg span:last-child { color: var(--mint); }
.calc-result .breakdown li.total { color: #fff; border-top-color: rgba(255,255,255,.28); }
.notes { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-soft); font-size: .82rem; color: var(--ink-2); }
.notes ul { margin: 0; padding-left: 18px; }
.notes li + li { margin-top: 3px; }
.calc-result .notes { background: rgba(255,255,255,.05); color: var(--night-ink-2); border: 1px solid var(--night-line); }
.iuc-line { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-soft); font-size: .9rem; }
.iuc-line strong { white-space: nowrap; }
.calc-result .iuc-line { background: rgba(95,224,176,.1); border: 1px solid rgba(95,224,176,.22); color: var(--night-ink); }
.result-sub { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--night-line); }
.result-sub h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--night-ink-3); margin: 0 0 4px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-5); }
.calc-result .result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* QA B1/D-S3: long labels (de, uk 'Copy link to this calculation') wrap inside the button instead of being cut by the card */
.calc-result .result-actions .btn { white-space: normal; text-align: center; min-width: 0; overflow-wrap: break-word; }
.calc-result .result-actions .btn-tg { grid-column: 1 / -1; }
.calc-result .btn-ghost { background: rgba(255,255,255,.06); color: var(--night-ink); border-color: rgba(255,255,255,.2); }
.calc-result .btn-ghost:hover { background: rgba(255,255,255,.12); }
.calc-result .btn-primary { background: var(--mint); color: var(--night); }
.calc-result .btn-primary:hover { background: #7deac2; }
@media (max-width: 380px) { .calc-result .result-actions { grid-template-columns: 1fr; } }

/* ---------- 7. Content blocks ---------- */
.section-head { max-width: 760px; margin-bottom: var(--s-6); }
.grid-2 { display: grid; gap: 20px; }
.grid-3 { display: grid; gap: 20px; }
/* grid items default to min-width:auto and grow to their widest child (table, long word); keep them inside the viewport */
.grid-2 > *, .grid-3 > *, .hero-grid > *, .hero-top > *, .step > * { min-width: 0; overflow-wrap: break-word; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 28px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.tile { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--sh-1); transition: box-shadow .2s, transform .2s, border-color .2s; }
.tile h3 { margin-bottom: 8px; }
.tile .num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 800; margin-bottom: 14px; font-size: .95rem; }
.tile p:last-child { margin-bottom: 0; }
.tile p { color: var(--ink-2); }
section.alt .tile { background: var(--bg); }

table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
table.data th, table.data td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); background: var(--bg-soft); font-weight: 700; }
table.data tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-soft) 45%, transparent); }
table.data tbody tr:hover td { background: var(--accent-soft); }
table.data tr:last-child td { border-bottom: 0; }
table.data td.n, table.data th.n { text-align: right; white-space: nowrap; }
.table-wrap { overflow-x: auto; border-radius: var(--r-md); -webkit-overflow-scrolling: touch; }
/* QA N3: the reference-models table of the calculator already scrolls sideways on phones: the model name stays on one
   line (each row is one line), and its link fills the cell so the tap target keeps the row height */
#models table.data td, #modelos table.data td { white-space: nowrap; }
#models table.data td:first-child a, #modelos table.data td:first-child a { display: block; margin: -10px -14px; padding: 10px 14px; }
#models table.data td:first-child a:focus-visible, #modelos table.data td:first-child a:focus-visible { outline-offset: -3px; }
.table-title { font-size: .95rem; font-weight: 700; margin: 22px 0 10px; }
.callout { padding: 16px 18px; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); font-size: .92rem; }
.callout.ok { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.callout strong { color: inherit; }

.steps { counter-reset: step; display: grid; gap: 14px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-1); }
.step::before { counter-increment: step; content: counter(step); width: 40px; height: 40px; border-radius: 12px; background: var(--night); color: var(--mint); display: grid; place-items: center; font-weight: 800; }
.step h3 { margin-bottom: 6px; }
.step p:last-child { margin-bottom: 0; }
.step .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.step .meta span { font-size: .75rem; padding: 3px 9px; border-radius: var(--r-pill); background: var(--bg-soft); color: var(--ink-2); }

/* FAQ */
.faq .wrap > div { max-width: 860px; }
.faq details { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 20px; margin-bottom: 10px; transition: border-color .15s, box-shadow .15s; }
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--sh-2); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 650; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6964' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 18px; color: var(--ink-2); max-width: 72ch; }
.faq details > div p:last-child { margin-bottom: 0; }

/* CTA band */
.cta-band {
  position: relative; overflow: hidden; color: var(--night-ink); border-radius: var(--r-xl); padding: 36px 24px; display: grid; gap: 24px; align-items: center;
  background: radial-gradient(700px 300px at 100% 0%, color-mix(in srgb, var(--mint) 20%, transparent), transparent 60%), linear-gradient(160deg, var(--night-2), var(--night));
}
@media (min-width: 860px) { .cta-band { grid-template-columns: 1.4fr 1fr; padding: 56px; } }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--night-ink-2); }
.cta-band .kicker { color: var(--mint); }
.cta-band .btns { display: flex; flex-wrap: wrap; gap: 10px; justify-self: start; }
@media (min-width: 860px) { .cta-band .btns { justify-self: end; } }
.cta-band ul { margin: 0 0 16px; padding: 0; list-style: none; color: var(--night-ink); display: grid; gap: 8px; }
.cta-band li { display: flex; gap: 10px; }
.cta-band li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .6em; border-radius: 50%; background: var(--mint); }

/* prose (guides) */
.prose { max-width: 70ch; font-size: 1.04rem; }
.prose h2 { margin-top: 2.2em; font-size: var(--fs-xl); }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--accent); }
.toc { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 22px; margin: 24px 0 8px; box-shadow: var(--sh-1); }
.toc strong { display: block; margin-bottom: 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.toc ol { margin: 0; padding-left: 20px; columns: 1; font-size: .95rem; }
@media (min-width: 700px) { .toc ol { columns: 2; column-gap: 32px; } }
.toc li { break-inside: avoid; margin: 4px 0; }

/* sticky mobile bar */
.sticky-cta {
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 30; padding: 8px 8px 8px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--night) 94%, transparent); color: var(--night-ink); backdrop-filter: blur(10px);
  display: flex; gap: 10px; align-items: center; justify-content: space-between; box-shadow: 0 12px 32px -8px rgba(0,0,0,.45);
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.sticky-cta .small { color: var(--night-ink-2); line-height: 1.3; }
.sticky-cta .live { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sticky-cta .live b { color: var(--mint); font-size: 1.25rem; letter-spacing: -.02em; }
.sticky-cta #sticky-live > span:not(.small) { font-size: .72rem; color: var(--night-ink-3); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 860px) { .sticky-cta { display: none; } }
body.has-sticky { padding-bottom: 84px; }
@media (min-width: 860px) { body.has-sticky { padding-bottom: 0; } }
/* lead.js floating button: sit above the sticky bar, smaller on phones */
#alead-btn { border-radius: var(--r-pill) !important; }
@media (max-width: 859px) { #alead-btn { bottom: 84px !important; right: 12px !important; min-height: 40px; padding: 8px 14px; font-size: .88rem; } }
/* QA D-S2 / S2: lead.js fades the floating button out while a form field has the focus or a control or text is under it */
#alead-btn { transition: background-color .15s, box-shadow .15s, opacity .18s, visibility .18s; }
#alead-btn.alead-fab-off { opacity: 0; visibility: hidden; pointer-events: none; }
/* short landscape screens (a phone turned sideways is 860+ px wide): a smaller floating button */
@media (min-width: 860px) and (max-height: 500px) { #alead-btn { min-height: 40px; padding: 8px 14px; font-size: .88rem; } }
/* the end of the page keeps a clear place for the floating button below the footer text */
@media (min-width: 860px) { body:has(> #alead-btn) footer { padding-bottom: calc(var(--s-7) + 64px); } }

/* ---------- 8. Footer ---------- */
footer { padding: var(--s-8) 0 var(--s-7); border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-2); background: var(--bg-elev); }
footer .cols { display: grid; gap: 28px; }
@media (min-width: 760px) { footer .cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
footer h4, footer .col-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 0 0 12px; font-weight: 700; }
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li + li { margin-top: 8px; }
footer .product-switch { margin-top: 14px; }
.disclaimer { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-3); max-width: none; }

/* ---------- 9. Catalog ---------- */
.cat-hero { padding: var(--s-6) 0 var(--s-5); }
.cat-hero h1 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem); max-width: 28ch; }
.cat-hero .lede { font-size: var(--fs-base); }
.cat-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin: var(--s-5) 0 var(--s-4); }
.cat-bar .seg { min-width: min(100%, 380px); }
.cat-bar .seg label { min-height: 44px; font-size: .92rem; }
.cat-filters { padding: 16px; border-radius: var(--r-lg); margin-bottom: var(--s-4); }
.cat-filters.form-grid { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
@media (min-width: 900px) { .cat-filters.form-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 559px) { .cat-filters .field:last-child { grid-column: 1 / -1; } }
.cat-filters .input { min-height: 42px; font-size: .95rem; }
.cat-count { display: flex; align-items: center; gap: 8px; }
.cat-count::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cat-grid { display: grid; align-items: start; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.car { display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); transition: box-shadow .2s, transform .2s, border-color .2s; }
.car:hover { box-shadow: var(--sh-3); transform: translateY(-2px); border-color: var(--line-strong); }
@media (prefers-reduced-motion: reduce) { .car:hover { transform: none; } }
.car-media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-soft); overflow: hidden; }
.car-media img { width: 100%; height: 100%; object-fit: cover; }
.car-plate { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--mint) 18%, transparent), transparent 55%), linear-gradient(150deg, var(--night-2), var(--night)); color: var(--night-ink); }
.car-plate::after { content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: linear-gradient(var(--night-line) 1px, transparent 1px), linear-gradient(90deg, var(--night-line) 1px, transparent 1px); background-size: 28px 28px; }
.car-plate .make { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; position: relative; z-index: 1; }
.car-plate .model { font-size: .9rem; color: var(--night-ink-2); position: relative; z-index: 1; margin-top: 4px; }
.car-plate .mono { position: absolute; right: 8px; top: 30px; font-size: 4.5rem; font-weight: 900; line-height: 1; color: rgba(255,255,255,.05); letter-spacing: -.06em; }
.car[data-fuel="electric"] .car-plate { background: radial-gradient(120% 90% at 100% 0%, rgba(23,120,173,.45), transparent 55%), linear-gradient(150deg, #10283a, #08141d); }
.car-tags { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; justify-content: space-between; gap: 6px; z-index: 2; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: var(--r-pill); background: rgba(255,255,255,.92); color: #0f1a17; box-shadow: var(--sh-1); }
.tag.src { background: rgba(12,31,26,.7); color: #fff; backdrop-filter: blur(6px); font-weight: 600; }
.car-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.car-title { font-size: 1rem; font-weight: 700; margin: 0 0 6px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.car-meta { display: flex; flex-wrap: nowrap; min-height: 21px; gap: 4px 12px; font-size: .82rem; color: var(--ink-2); margin: 0 0 14px; padding: 0; list-style: none; }
.car-meta li { display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap; }
/* #95 R1-B1: one line, so collapsed cards of a row stay equal; a long place is cut with an ellipsis */
.car-meta li.loc { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; }
.car-meta li.loc svg { display: inline-block; vertical-align: -2px; margin-right: 5px; }
.car-meta svg { width: 14px; height: 14px; color: var(--ink-3); }
.car-rating { margin: -6px 0 12px; font-size: .82rem; color: var(--ink-2); }
.car-rating a { color: var(--ink-2); text-decoration: none; }
.car-rating a:hover, .car-rating a:focus-visible { color: var(--accent); text-decoration: underline; }
.car-rating .n { color: var(--ink-3); }
.car-price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.car-price .lbl { font-size: .8rem; color: var(--ink-2); }
.car-price .val { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.cost { margin-top: 12px; padding: 12px; border-radius: var(--r-md); background: var(--bg-soft); }
.cost-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--bg-sunk); gap: 2px; }
.cost-bar i { display: block; height: 100%; }
.cost-bar .p { background: var(--ink-2); }
.cost-bar .t { background: var(--line-strong); }
.cost-bar .i { background: #d99a2b; }
.cost-rows { margin: 10px 0 0; padding: 0; list-style: none; font-size: .85rem; }
.cost-rows li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--ink-2); }
.cost-rows li span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.cost-rows li span:first-child::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c, transparent); }
.cost-rows li span:last-child { font-weight: 650; color: var(--ink); white-space: nowrap; }
.cost-rows li.total { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line-strong); color: var(--ink); font-weight: 700; align-items: flex-start; }
.cost-rows li.total span:last-child { font-size: 1.15rem; font-weight: 800; color: var(--accent); }
.cost-rows li.total span:first-child { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.cmp { margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; padding: 8px 10px; border-radius: var(--r-sm); }
.cmp.good { background: var(--accent-soft); color: var(--accent); }
.cmp.bad { background: var(--warn-soft); color: var(--warn); }
.cmp-pt { font-size: .82rem; color: var(--ink-2); margin: 10px 0 0; }
.car-actions { margin-top: auto; padding-top: 16px; display: grid; gap: 8px; min-width: 0; }
/* #95: two equal buttons on top, the estimate opens under them (closed = no height, no empty area), the green button last */
.car-rating-ph { margin: -6px 0 12px; font-size: .82rem; }   /* same font as .car-rating, one non-breaking space = same line height */
.est-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.est-row .btn { min-height: 48px; padding: 8px 10px; font-size: .88rem; }
.est-wrap { display: grid; grid-template-rows: 0fr; align-self: start; margin-top: -8px; transition: grid-template-rows .28s ease, margin-top .28s ease; }
.est-wrap.open { grid-template-rows: 1fr; margin-top: 0; }
.est-in { overflow: hidden; min-height: 0; padding: 0 2px; margin: 0 -2px; }
.est-wrap .cost { margin-top: 0; }
.est-form [hidden], .est-result:empty { display: none !important; }
.est-result .cost { margin-top: 10px; background: var(--bg-elev); border: 1px solid var(--line); }
.est-lead { margin: 0 0 10px; font-size: .85rem; font-weight: 650; color: var(--ink-2); }
.est-fields { display: grid; gap: 10px; }
.est-form .field label.check { font-size: .82rem; margin-top: 2px; }
.est-form .input:disabled { opacity: .5; }
.est-form .input { min-height: 42px; font-size: .95rem; }
/* QA S3: iOS Safari zooms the page into a field whose text is under 16 px (the catalog filters and the estimate block
   were 15.2 px): on phones and touch screens every text field and select is at least 16 px, site-wide */
@media (max-width: 859px), (pointer: coarse) {
  .cat-filters .input, .est-form .input { font-size: max(1rem, 16px); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(1rem, 16px); }
}
.est-err { margin: 8px 0 0; font-size: .82rem; font-weight: 600; color: var(--warn); }
.est-form .est-go { width: 100%; margin-top: 12px; min-height: 44px; }
.est-badge { margin: 0 0 6px; display: inline-block; font-size: .72rem; font-weight: 750; letter-spacing: .02em; padding: 3px 9px; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--warn); }
.cost.rng .cost-rows li.total { flex-direction: column; gap: 2px; }
.cost.rng .cost-rows li.total span:last-child { font-size: 1.05rem; }
.est-note { margin: 10px 0 0; font-size: .76rem; line-height: 1.45; color: var(--ink-3); }
/* #156: first registered before 1970 (ISV treatment not settled since the 2023 repeal): the note replaces the figure */
.pre1970-note { margin: 0; padding: 12px 14px; border: 1px solid var(--line-strong, var(--line)); border-radius: 12px; background: var(--bg-soft); color: var(--ink); font-size: .9rem; line-height: 1.5; }
#btn-pdf:disabled { opacity: .5; cursor: not-allowed; }
.est-note.pre1970-note { font-size: .8rem; padding: 10px 12px; }
.est-form [aria-invalid="true"] { border-color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .est-wrap { transition: none; } }
.car-actions .btn { width: 100%; white-space: normal; text-align: center; justify-content: center; min-width: 0; }
.cat-grid > *, .car, .car-body { min-width: 0; }
.car-actions .row { display: flex; justify-content: space-between; gap: 8px; }
.car-actions .row a { text-decoration: none; }
.cat-more { text-align: center; margin-top: var(--s-6); }
.cat-note { margin-top: var(--s-5); }

/* cross-product strip (calc -> catalog -> bot) */
.xlinks { display: grid; gap: 12px; }
@media (min-width: 760px) { .xlinks { grid-template-columns: repeat(3, 1fr); } }
.xlink { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.xlink:hover { border-color: var(--accent); box-shadow: var(--sh-2); }
.xlink .ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.xlink .ico svg { width: 20px; height: 20px; }
.xlink b { display: block; margin-bottom: 2px; }
.xlink span { font-size: .88rem; color: var(--ink-2); }

/* mobile hero density */
@media (max-width: 559px) {
  .hero-band h1 { font-size: 1.9rem; }
  .hero-band .lede { font-size: var(--fs-base); }
  .hero-band .hero-guide { display: none; }   /* same link is in the cross-product strip */
  .hero-band .kicker + .tiny { display: block; margin-top: -6px; margin-bottom: 8px; }
}
/* sticky bar holds: live value or short text | lead button | Telegram (icon-only on phones) */
.sticky-cta .acts { display: flex; gap: 6px; flex: none; }
.sticky-cta #alead-btn { position: static !important; box-shadow: none !important; background: var(--mint); color: var(--night); min-height: 44px; padding: 10px 14px; }
@media (max-width: 559px) {
  .sticky-cta .btn-tg { width: 44px; padding: 0; }
  .sticky-cta .btn-tg .label-long { display: none; }
  .sticky-cta .small { font-size: .8rem; }
}

/* guides: hero band + overlapping table of contents */
.guide-hero { padding-bottom: calc(var(--s-8) + 24px); }
@media (min-width: 960px) { .guide-hero { padding-bottom: calc(var(--s-8) + 48px); } }
.guide-hero h1 { max-width: 24ch; }
.guide-hero .lede { max-width: 70ch; }
.guide-hero .trust span a { color: var(--mint); }
.hero-band .callout { background: rgba(240, 184, 90, .1); color: #f6d9a3; border-color: rgba(240, 184, 90, .35); max-width: 80ch; margin-top: var(--s-4); }
.hero-band .callout a { color: #ffe2ad; }
.guide-shell { margin-top: calc(-1 * (var(--s-8) + 8px)); position: relative; z-index: 2; }
@media (min-width: 960px) { .guide-shell { margin-top: calc(-1 * (var(--s-8) + 24px)); } }
.guide-shell .toc { margin: 0; box-shadow: var(--sh-3); border-radius: var(--r-xl); padding: 22px 26px; }
code { font-size: .9em; padding: 1px 5px; border-radius: 6px; background: var(--bg-soft); }
.xsec { padding-bottom: 0; }
.xlink .ico.tg { background: color-mix(in srgb, var(--tg) 14%, transparent); color: var(--tg); }
.result-sub:has(#keyhand-out:empty) { display: none; }
.calc-result #import-out .result-total { margin-top: 4px; }
/* bottom bar must fit 375 px in every language: text shrinks first, buttons compact */
.sticky-cta .live { flex: 1 1 auto; min-width: 0; }
.sticky-cta .acts { min-width: 0; }
@media (max-width: 559px) {
  .sticky-cta { gap: 8px; padding-left: 12px; }
  .sticky-cta .acts .btn { padding: 10px 12px; font-size: .86rem; }
  .sticky-cta .live .small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 419px) {
  /* two buttons (lead + page action) and a sentence do not fit: keep the buttons */
  .sticky-cta:has(.acts > :nth-child(2)) .live:not(#sticky-live) { display: none; }
  .sticky-cta:has(.acts > :nth-child(2)) .acts { flex: 1; justify-content: flex-end; }
}
/* QA S1: guides and catalog (.sticky-stack): the sentence is never cut. It stays on one line next to the buttons when it
   fits there; otherwise the bar wraps and the sentence takes a row of its own above the buttons, which then share the
   width. The break point is the sentence's own width (flex-basis auto), so no per-language numbers. */
.sticky-cta.sticky-stack { flex-wrap: wrap; row-gap: 6px; }
.sticky-cta.sticky-stack .live { flex: 1 1 auto; }
.sticky-cta.sticky-stack .live .small { display: block; -webkit-line-clamp: none; overflow: visible; }
.sticky-cta.sticky-stack .acts { flex: 1 0 auto; justify-content: flex-end; }
.sticky-cta.sticky-stack .acts > .btn { flex: 1 1 auto; }
@media (max-width: 559px) { .sticky-cta.sticky-stack .acts > .btn-tg { flex: none; } }   /* icon only on phones */
@media (max-width: 859px) { body.has-sticky:has(.sticky-stack) { padding-bottom: 128px; } }   /* room for the two-row bar */

/* ── TugaCasa landing (property alerts) ────────────────────────────── */
.casa-page .kicker { color: var(--casa); }
.hero-band.casa-hero .kicker { color: #f0936f; }
.hero-band.casa-hero {
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(240, 147, 111, .26), transparent 60%),
    radial-gradient(600px 300px at 0% 110%, rgba(95, 224, 176, .14), transparent 60%),
    linear-gradient(180deg, var(--night-2), var(--night));
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: var(--s-5); }
.hero-actions .btn svg { width: 20px; height: 20px; }
.hero-how { color: var(--night-ink-2); font-weight: 650; text-decoration: none; padding: 10px 2px; }
.hero-how:hover { color: #fff; text-decoration: underline; }
.hero-band.casa-hero .trust { margin-top: var(--s-5); }
.hero-band.casa-hero h1 { max-width: 20ch; }
/* funnel: 5 portals -> one chat (decorative) */
.funnel { display: none; }
@media (min-width: 960px) {
  .funnel { display: flex; align-items: center; justify-content: flex-end; gap: 0; color: #f0936f; }
}
.funnel-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.funnel-chips li {
  height: 44px; min-width: 150px; padding: 0 18px; display: flex; align-items: center; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color: var(--night-ink); font-weight: 650; font-size: .92rem;
}
.funnel-lines { flex: none; opacity: .75; }
.funnel-tg { flex: none; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--tg); color: #fff; box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .5); }
.funnel-tg svg { width: 40px; height: 40px; }
/* answer-ready facts */
.answer { padding: 22px 24px 20px; }
@media (min-width: 760px) { .answer { padding: 28px 32px; } }
.answer h2 { font-size: var(--fs-lg); margin-bottom: 14px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 32px; }
@media (min-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); }
.facts li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .facts li::before { background-color: var(--accent); }
}
.problem { max-width: 820px; }
.problem h2 { max-width: 26ch; }
.problem .lede { font-size: 1.2rem; color: var(--ink); }
/* what you get */
.feat-grid { display: grid; gap: 18px; margin-top: var(--s-5); }
@media (min-width: 640px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .feat-grid.n5 { grid-template-columns: repeat(6, 1fr); }
  .feat-grid.n5 .feat { grid-column: span 2; }
  .feat-grid.n5 .feat:nth-child(n+4) { grid-column: span 3; }
}
.feat { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--sh-1); }
.feat .ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--casa-soft); color: var(--casa); margin-bottom: 14px; }
.feat .ico svg { width: 22px; height: 22px; }
.feat h3 { margin-bottom: 6px; }
.feat p { color: var(--ink-2); margin: 0; }
.casa-page .step::before { background: var(--night); color: #f0936f; }
.portal-row { list-style: none; margin: var(--s-4) 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.portal-row li { padding: 12px 20px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line-strong); font-weight: 700; font-size: 1.05rem; box-shadow: var(--sh-1); }
/* plans */
.plans { display: grid; gap: 18px; margin-top: var(--s-5); }
@media (min-width: 760px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--sh-1); }
.plan h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 10px; }
.plan .price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan .price b { font-size: var(--fs-xl); letter-spacing: -.03em; }
.plan .per { color: var(--ink-2); font-size: var(--fs-sm); }
.plan .stars { display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--bg-soft); color: var(--ink-2); font-size: .78rem; font-weight: 700; }
.plan ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; color: var(--ink); }
.plan li { padding-top: 8px; border-top: 1px solid var(--line); }
.casa-page .cta-band .kicker { color: #f0936f; }
.casa-page .cta-band li::before { background: #f0936f; }
.xlinks + .xlinks { margin-top: 12px; }
.xsec .kicker { margin-bottom: var(--s-4); }

.hero-band .btn-tg, .hero-band .btn-tg:hover { color: #fff; }
.casa-page .sticky-cta .live { flex: 0 1 auto; }
.casa-page .sticky-cta .acts .btn { white-space: nowrap; }
@media (max-width: 479px) {
  .casa-page .sticky-cta .live { display: none; }
  .casa-page .sticky-cta .acts { flex: 1; }
  .casa-page .sticky-cta .acts .btn { width: 100%; }
}
/* QA S1 (480-559 px): the generic icon-only Telegram button (44 px) squeezed the Casa button, whose label stays visible */
@media (min-width: 480px) and (max-width: 559px) { .casa-page .sticky-cta .acts .btn-tg { width: auto; padding: 10px 14px; } }

/* ── lead modal (lead.js): form, success, errors; centred card on desktop, bottom sheet on phones ── */
html.alead-lock { overflow: hidden; }
#alead-ov {
  align-items: center; justify-content: center; padding: var(--s-5) var(--s-4); overflow-y: auto;
  background: rgba(7, 16, 14, .72);
}
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  #alead-ov { background: rgba(7, 16, 14, .5); -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1); }
}
#alead-box {
  position: relative; width: 100%; max-width: 440px; margin: auto; max-height: calc(100dvh - 2 * var(--s-5)); overflow-y: auto;
  padding: var(--s-5); background: var(--bg-elev); color: var(--ink); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 32px 80px -16px rgba(0, 0, 0, .55);
  outline: none; overscroll-behavior: contain;
}
#alead-ov.open { animation: alead-fade .16s ease-out; }
#alead-ov.open #alead-box { animation: alead-pop .18s cubic-bezier(.2, .8, .2, 1); }
@keyframes alead-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes alead-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes alead-spin { to { transform: rotate(360deg); } }
@keyframes alead-sheet { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #alead-ov.open, #alead-ov.open #alead-box { animation: none; }
  .btn.loading::before { animation-duration: 1.6s; }
}
.alead-x {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--bg-soft); color: var(--ink-2); cursor: pointer;
}
.alead-x:hover { background: var(--bg-sunk); color: var(--ink); }
.alead-x:focus-visible { outline: none; box-shadow: var(--ring); }
.alead-x svg { width: 18px; height: 18px; }
#alead-box h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -.015em; margin: 0 48px 6px 0; line-height: 1.25; }
.alead-intro { margin: 0 0 var(--s-4); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.alead-car { margin-bottom: var(--s-4); }
.alead-car-cap { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.alead-car-card { display: flex; gap: 14px; align-items: stretch; padding: 12px; border-radius: var(--r-lg); background: var(--bg-soft); border: 1px solid var(--line); }
.alead-car-media { flex: none; width: 72px; height: 72px; border-radius: var(--r-md); overflow: hidden; background: var(--night); }
.alead-car-media img { width: 100%; height: 100%; object-fit: cover; }
.alead-car-ini {
  width: 100%; height: 100%; display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; color: #f2f7f4;
  background: radial-gradient(120% 90% at 100% 0%, rgba(95, 224, 176, .22), transparent 60%), linear-gradient(150deg, var(--night-2), var(--night));
}
.alead-car-ini.calc { color: var(--mint); }
.alead-car-ini svg { width: 28px; height: 28px; }
.alead-car-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.alead-car-title { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; }
.alead-car-meta { font-size: .82rem; color: var(--ink-2); }
.alead-car-prices { margin: 6px 0 0; display: grid; gap: 2px; font-size: .86rem; }
.alead-car-prices > div { display: flex; justify-content: space-between; gap: 12px; }
.alead-car-prices dt { color: var(--ink-2); }
.alead-car-prices dd { margin: 0; font-weight: 650; white-space: nowrap; }
.alead-car-prices .strong dd { color: var(--accent); font-weight: 800; }
.alead-car-prices .alead-pre1970 dd { white-space: normal; text-align: right; font-weight: 600; }      /* #156: the note, not a figure */
#alead-box [hidden] { display: none !important; }
.alead-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.alead-ch-legend { flex: 0 0 100%; font-size: .78rem; color: var(--ink-3); }
.alead-chip { position: relative; margin: 0; cursor: pointer; }
.alead-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.alead-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); font-size: .84rem; font-weight: 600; white-space: nowrap; }
.alead-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.alead-chip input:focus-visible + span { box-shadow: var(--ring); outline: 2px solid transparent; }
.alead-chip:hover input:not(:checked) + span { border-color: var(--ink-3); }
@media (max-width: 420px) { .alead-chips { gap: 4px; } .alead-chip span { padding: 0 10px; font-size: .8rem; } }
.money { position: relative; }
.money-sym { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-weight: 650; pointer-events: none; }
.money .input { padding-left: 32px; font-variant-numeric: tabular-nums; }
#alead-box .field { margin-bottom: var(--s-3); }
#alead-box textarea.input { min-height: 84px; resize: vertical; }
#alead-box .input[aria-invalid="true"] { border-color: var(--danger); }
#alead-box .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent); }
.alead-fe { color: var(--danger); font-size: .82rem; line-height: 1.4; }
.alead-fe:empty { display: none; }
.alead-fe:not(:empty) { margin-top: 2px; }
.alead-consent { margin: var(--s-4) 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-soft); }
.alead-consent label.check { display: flex; gap: 12px; align-items: flex-start; font-size: .84rem; line-height: 1.45; color: var(--ink-2); font-weight: 400; margin: 0; cursor: pointer; }
.alead-consent input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.alead-banner {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--s-3); padding: 12px 14px; border-radius: var(--r-md);
  background: var(--warn-soft); color: var(--warn); font-size: var(--fs-sm); line-height: 1.45;
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
}
.alead-banner[hidden] { display: none; }
.alead-banner svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.btn.loading { pointer-events: none; }
.btn.loading::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: alead-spin .7s linear infinite;
}
/* success */
.alead-done { display: grid; justify-items: stretch; text-align: center; gap: 0; padding: var(--s-4) 0 0; }
.alead-done[hidden], #alead-form[hidden] { display: none; }
.alead-done-ico {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--s-4);
  background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent);
}
.alead-done-ico svg { width: 30px; height: 30px; }
#alead-box .alead-done h2 { margin: 0 0 6px; font-size: 1.375rem; font-weight: 600; outline: none; }
.alead-done-p { margin: 0 auto var(--s-5); color: var(--ink-2); font-size: var(--fs-base); max-width: 32ch; }
.alead-done .btn-block, #alead-send { width: 100%; white-space: normal; text-align: center; }
.alead-done .btn-tg svg { width: 20px; height: 20px; }
.alead-done .btn-link { margin-top: var(--s-2); color: var(--ink-2); }
/* phones: bottom sheet */
@media (max-width: 559px) {
  #alead-ov { align-items: flex-end; padding: 0; }
  #alead-box {
    max-width: none; margin: 0; max-height: 92dvh; border-radius: 24px 24px 0 0; border-bottom: 0;
    padding: var(--s-5) var(--s-4) max(var(--s-5), env(safe-area-inset-bottom));
  }
  #alead-ov.open #alead-box { animation: alead-sheet .2s cubic-bezier(.2, .8, .2, 1); }
  #alead-box::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: -8px auto var(--s-4); }
}

/* 320px (BUG-86): long button labels and buttons wrap instead of pushing the page sideways */
@media (max-width: 359px) {
  .btn { white-space: normal; text-align: center; }
  .btn-lg { padding: 12px 16px; font-size: .98rem; white-space: normal; text-align: center; }
}

/* ── buyback landing ("vender o meu carro", scripts/build_buyback_i18n.py) ─────────────── */
.draft { background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); font-size: .84rem; }
.draft .wrap { padding-top: 8px; padding-bottom: 8px; }
.ph {
  display: inline; padding: 0 4px; margin: 0 1px; border-radius: 4px; font-size: .92em; font-weight: 650;
  background: var(--warn-soft); color: var(--warn); border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent);
}
.sell-page .ph { white-space: normal; }
.sell-hero .trust-hero { list-style: none; margin: 0; padding: 0; }
.sell-hero .trust-hero li { display: flex; align-items: center; gap: 8px; }
.sell-page .facts li::before { background: var(--accent); }
.facts.docs li::before { background: var(--accent); }
.sell-two { gap: 40px; align-items: start; }
.sell-two h2 { margin-bottom: var(--s-3); }
.sell-two .facts { margin-top: var(--s-4); }
.sell-form-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-6); }
.sell-form-card h2 { margin-bottom: var(--s-2); }
.sell-form-card p { margin: 0; max-width: 56ch; }
.tg-note { font-size: var(--fs-sm); color: var(--night-ink-2); margin-top: var(--s-4); }
.tg-note a { color: var(--mint); font-weight: 650; display: inline-flex; align-items: center; gap: 8px; }
.tg-note svg { width: 18px; height: 18px; }
.sell-page .cta-band .btns .btn { white-space: normal; text-align: center; }
.sell-page .step::before { background: var(--night); color: var(--mint); }
@media (max-width: 559px) {
  .sell-page .btn.header-cta { width: auto; max-width: 136px; padding: 8px 10px; font-size: .8rem; line-height: 1.15; white-space: normal; text-align: center; }
}
/* the buyback page has its own request buttons: hide the generic "Pedir cálculo" floating button here */
.sell-page #alead-btn { display: none !important; }
.sell-hero .trust-hero li { background: rgba(255, 255, 255, .07); border-color: var(--night-line); color: var(--night-ink); }
.sell-hero .trust-hero li::before { background-color: var(--mint); }


/* ── header language dropdown (<details class="lang-switch">, DESIGN-6) ─────────────────── */
.lang-switch { position: relative; margin-left: auto; flex: none; }
.lang-switch + .header-cta { margin-left: 0; }
.lang-switch summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg-elev); color: var(--ink-2);
  font-size: .82rem; font-weight: 700; letter-spacing: .02em; user-select: none;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover { color: var(--ink); background: var(--bg-soft); }
.lang-switch summary:focus-visible { outline: none; box-shadow: var(--ring); }
.lang-switch[open] summary { color: var(--ink); background: var(--bg-soft); }
.lang-switch summary svg { width: 18px; height: 18px; flex: none; }
.lang-code { min-width: 1.6em; text-align: left; }
.lang-caret { width: 7px; height: 7px; margin-left: 1px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.lang-switch[open] .lang-caret { transform: rotate(-135deg) translateY(-2px); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 190px; margin: 0; padding: 6px; list-style: none;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 18px 40px -12px rgba(0, 0, 0, .35);
}
.lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 550; font-size: .95rem;
}
.lang-menu a:hover, .lang-menu a:focus-visible { background: var(--bg-soft); outline: none; }
.lang-menu a:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.lang-menu a[aria-current] { background: var(--sel-bg); color: var(--sel-ink); font-weight: 650; text-shadow: 0 0 .5px currentColor; }
.lang-menu a[aria-current]:hover { filter: brightness(1.06); }
.lang-menu a svg { width: 16px; height: 16px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .lang-switch[open] .lang-menu { animation: lang-pop .14s ease-out; }
  @keyframes lang-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
/* phones: icon-only globe, so it fits next to Auto | Casa and the Telegram button */
@media (max-width: 460px) {
  .lang-switch summary { width: 40px; padding: 0; justify-content: center; }
  .lang-switch .lang-code, .lang-switch .lang-caret { display: none; }
  .site-header .wrap { gap: 8px; }
}
@media (max-width: 559px) {
  .sell-page .site-header .btn.header-cta { display: none; }      /* the sticky bar carries the request button on phones */
}
/* a nav in the header row (>= 1380 px, Casa pages): the tighter spacing at every width, because the column stops
   growing at 1240 px (D-S1: from 1520 px the looser spacing ran past the column, ru by 15 px) */
@media (min-width: 1380px) {
  .nav { gap: 0; margin-left: 4px; font-size: .88rem; }
  .nav a { padding: 6px 8px; }
  .site-header .wrap { gap: 10px; }
}

.ph, .facts li { overflow-wrap: anywhere; }
.sell-page .btn.header-cta { white-space: normal; max-width: 190px; line-height: 1.15; text-align: center; padding-top: 8px; padding-bottom: 8px; }
/* tablets / large phones: globe icon only, short Telegram label */
@media (max-width: 760px) {
  .lang-switch summary { width: 40px; padding: 0; justify-content: center; }
  .lang-switch .lang-code, .lang-switch .lang-caret { display: none; }
  .sell-page .btn.header-cta { max-width: 150px; font-size: .84rem; }
}
@media (min-width: 560px) and (max-width: 620px) {
  .btn.header-cta:not(.sell-cta) { width: 44px; padding: 0; }
  .header-cta .label-long { display: none; }
}
@media (min-width: 621px) and (max-width: 760px) {
  .header-cta .label-long { display: none; }
  .header-cta .label-short { display: inline; }
}
@media (max-width: 620px) { .sell-page .site-header .btn.header-cta { display: none; } }
.sell-page .btn-lg { white-space: normal; text-align: center; max-width: 100%; }
@media (max-width: 340px) { .site-header:has(.product-switch) .brand { font-size: 0; } .site-header:has(.product-switch) .brand-mark { font-size: .95rem; } }
/* 320-360 px: long Russian/Ukrainian product labels ("Недвижимость") must not push the Telegram button out */
@media (max-width: 360px) {
  .site-header .wrap { gap: 4px; padding-left: 12px; padding-right: 12px; }   /* D-S1: 6 px left ru 1 px short at 320 px */
  .site-header .product-switch { font-size: .76rem; min-width: 0; }
  .site-header .product-switch a { padding: 5px 7px; }
  .site-header .product-switch a[aria-current]::before { margin-right: 4px; }
  .site-header .btn.header-cta, .lang-switch summary { width: 38px; height: 38px; min-height: 38px; padding: 0; }
  .site-header .brand-mark { width: 30px; height: 30px; }
}

.lang-menu a[aria-current]:hover, .lang-menu a[aria-current]:focus-visible { background: var(--sel-bg); }

/* ── Main site navigation (calculator, catalog, guides) on every page ─────────────────────────────
   >= 1380px: in the header row (rules above). Below: its own scrollable row under the header, so the
   catalog and the guides are always one tap away. The current page uses the selected-state tokens. */
.nav a.nav-catalog { margin-left: 10px; position: relative; }
.nav a.nav-catalog::before { content: ""; position: absolute; left: -7px; top: 22%; bottom: 22%; width: 1px; background: var(--line-strong); }
.nav a[aria-current="page"], .nav a[aria-current="location"] { background: var(--sel-bg); color: var(--sel-ink); box-shadow: inset 0 0 0 2px var(--sel-ring); font-weight: 650; }
@media (max-width: 1379px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 6px; height: auto; min-height: var(--header-h); }
  .site-header .nav { display: flex; order: 20; flex: 0 0 100%; margin: 0; gap: 4px; padding: 0 0 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .site-header .nav::-webkit-scrollbar { display: none; }
  .site-header .nav a { flex: 0 0 auto; }
  :root:has(.site-header .nav) { --header-total: 96px; }
}
/* D-S1: the Auto nav (6 items; it carries the catalog link) needs 1226-1326 px next to the brand, the switch, the language
   menu and the Telegram button, but the column is 1192 px at every width from 1240 px up: it always takes its own row, in
   every language, so the header never runs past the column or the screen. The Casa nav (shorter) stays in the row. */
.site-header .wrap:has(.nav-catalog) { flex-wrap: wrap; row-gap: 6px; height: auto; min-height: var(--header-h); }
.site-header .wrap:has(.nav-catalog) .nav { display: flex; order: 20; flex: 0 0 100%; margin: 0; gap: 4px; padding: 0 0 8px; font-size: .93rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.site-header .wrap:has(.nav-catalog) .nav::-webkit-scrollbar { display: none; }
.site-header .wrap:has(.nav-catalog) .nav a { flex: 0 0 auto; padding: 6px 10px; }
@media (min-width: 1380px) { .site-header .wrap:has(.nav-catalog) { column-gap: var(--s-4); } }   /* the tight 10 px is for a nav in the row */
:root:has(.site-header .nav-catalog) { --header-total: 96px; }

/* buttons placed inside running text (guides: "Peça-nos o cálculo e a proposta") may wrap on phones */
@media (max-width: 560px) {
  .prose .btn { white-space: normal; text-align: left; height: auto; }
}

/* BUG-108: three-way segmented controls must shrink at 280 px (labels wrap, no sideways scroll) */
.seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg label { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 340px) { .seg label { padding-left: 6px; padding-right: 6px; gap: 4px; font-size: .85rem; } .seg label::before { width: 11px; height: 11px; } }
.xlinks { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .xlinks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xlink > span:last-child { min-width: 0; overflow-wrap: anywhere; }


/* ── Casa audience funnels (scripts/build_casa_funnels_i18n.py, DESIGN-11) ───────────────── */
.std-line { margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.hero-band .std-line { color: var(--night-ink-2); }
.cta-band .std-line { color: var(--night-ink-2); }
.qlist { list-style: none; margin: var(--s-4) 0; padding: 0; display: grid; gap: 12px 32px; }
@media (min-width: 900px) { .qlist { grid-template-columns: 1fr 1fr; } }
.qlist li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.qlist li::before {
  content: "?"; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px;
  background: var(--casa-soft); color: var(--casa); font-weight: 800; font-size: .85rem;
}
.qlist li span { overflow-wrap: anywhere; }
.under35 { background: var(--casa-soft); border-color: color-mix(in srgb, var(--casa) 25%, var(--line)); }
.under35 a:not(.btn) { color: var(--casa); font-weight: 650; overflow-wrap: anywhere; }
.season { margin-top: var(--s-4); }
.xh { font-size: var(--fs-lg); margin-bottom: var(--s-4); }
.casa-funnel .answer .facts li::before { background: var(--casa); }
.casa-funnel .btn-lg { white-space: normal; text-align: center; max-width: 100%; }
.under35 > div { min-width: 0; }

/* footer block "Also from TugaCarro" (DESIGN-12): the other product, quiet */
.also { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.also a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.also a:hover { color: var(--ink); text-decoration: underline; }
.privacy-text { padding: var(--s-6) 0 var(--s-7); }
.privacy-text h3 { font-size: 1.05rem; }
.privacy-text dl.ctl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: var(--s-3) 0; padding: var(--s-3) var(--s-4); background: var(--bg-soft); border-radius: var(--r-md); }
.privacy-text dl.ctl dt { color: var(--ink-3); }
.privacy-text dl.ctl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .privacy-text dl.ctl { grid-template-columns: 1fr; gap: 0; } .privacy-text dl.ctl dd { margin-bottom: 8px; } }
.privacy-text .ph-block { margin: var(--s-3) 0; }
.legal-links { margin: 16px 0 0; font-size: .85rem; }
.legal-links a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.legal-links a:hover { color: var(--ink); text-decoration: underline; }
.also + .legal-links { margin-top: 8px; }
/* footer block "Operator" (ticket #64): only rendered when the controller identity is filled; small and muted */
.operator { margin: 8px 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-3); max-width: none; overflow-wrap: anywhere; }
.operator .op-label { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; margin-right: 4px; }
.operator a { color: var(--ink-2); }
.legal-links + .operator + .disclaimer { margin-top: 16px; padding-top: 0; border-top: 0; }
.legal-links + .disclaimer { margin-top: 16px; padding-top: 0; border-top: 0; }
.also + .disclaimer { margin-top: 16px; padding-top: 0; border-top: 0; }

#imp-built.need-pick .seg { box-shadow: 0 0 0 2px var(--warn, #d98a00); }

/* FAQ answers: lead first, conditions as a short list, source line muted (one accordion for quick answers and FAQ) */
.faq details > summary { font-size: 1.0625rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.faq details > .ans { padding: 0 0 18px; color: var(--ink-2); max-width: 72ch; font-size: .96rem; line-height: 1.6; }
.faq .ans p { margin: 0 0 10px; }
.faq .ans .lead { color: var(--ink); font-weight: 600; font-size: 1rem; }
.faq .ans .more { margin-top: 2px; }
.faq .ans-list { margin: 0 0 10px; padding-left: 1.2em; }
.faq .ans-list li { margin: 4px 0; padding-left: 2px; }
.faq .ans-list li::marker { color: var(--accent); }
.faq .ans .src { margin: 12px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); font-size: .8125rem; color: var(--ink-3); line-height: 1.45; }
.faq details.qa-item summary::before { content: none; }

/* EEA CC BY 4.0 credit under the find-car block of the ISV calculator */
.fc-body p.fc-src { margin-top: 10px; }

/* bottom blocks: tight CTA banner, quiet update line */
p.updated { margin: 12px 0 0; font-size: .8125rem; color: var(--ink-3); }
.cta-band { align-items: center; }
.cta-band h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); line-height: 1.2; text-wrap: balance; margin-bottom: 8px; }
.cta-band p { margin: 0; max-width: 56ch; }
.cta-band .btns .btn { white-space: normal; text-align: center; }
/* guide CTA bands: both buttons share one width (owner request 2026-10-22). Phones: full width, stacked;
   560-859px: two equal halves; desktop: stacked in the button column, as wide as the wider label. */
.cta-band .btns.btns-eq { display: grid; grid-template-columns: minmax(0, 1fr); justify-self: stretch; min-width: 0; }
@media (min-width: 560px) and (max-width: 859px) { .cta-band .btns.btns-eq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .cta-band .btns.btns-eq { justify-self: end; max-width: 100%; } }

/* lead modal: transparent pre-filled card, two-step intro, field helpers */
.alead-steps ol { margin: 0 0 var(--s-4); padding: 0; list-style: none; counter-reset: st; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
.alead-steps li { counter-increment: st; display: flex; gap: 10px; align-items: flex-start; }
.alead-steps li::before { content: counter(st); flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .75rem; display: grid; place-items: center; margin-top: 1px; }
.alead-car-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.alead-car-head .alead-car-cap { margin-bottom: 0; text-transform: none; letter-spacing: 0; font-size: .8125rem; color: var(--accent); }
.alead-car-ctl { display: flex; gap: 12px; flex: none; }
.alead-link { background: none; border: 0; padding: 4px 0; font: inherit; font-size: .8125rem; font-weight: 650; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 28px; }
.alead-link.danger { color: var(--danger); }
.alead-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.alead-car-note { margin: 8px 0 0; font-size: .8125rem; color: var(--ink-3); line-height: 1.4; }
.alead-privacy { margin: 6px 0 0 32px; font-size: .8rem; }
.alead-privacy a { color: var(--ink-2); text-decoration: underline; }
.alead-privacy a:hover { color: var(--ink); }
.alead-help { margin-top: 4px; font-size: .78rem; color: var(--ink-3); line-height: 1.4; }
.alead-tag { display: block; width: fit-content; margin: 0 0 6px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 650; }
.alead-tag[hidden] { display: none; }
.alead-disclaimer { margin: 0 0 var(--s-3); font-size: .78rem; line-height: 1.5; color: var(--ink-3); }
.alead-req { margin: 0 0 var(--s-2); font-size: .78rem; color: var(--ink-3); }
@media (max-width: 420px) { .alead-car-head { flex-wrap: wrap; } }

/* buyback request: photo / video upload (ticket #89) */
.alead-files-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.alead-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px; border: 1.5px dashed var(--line, var(--ink-3)); border-radius: var(--r-md); background: var(--bg-soft); transition: border-color .15s, background .15s; }
.alead-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.alead-drop .btn svg { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.alead-drop-or { font-size: .84rem; color: var(--ink-3); }
@media (pointer: coarse) { .alead-drop-or { display: none; } }
.alead-flist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.alead-flist:empty { display: none; }
.alead-fitem { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 6px 6px 6px; border: 1px solid var(--line, transparent); border-radius: var(--r-md); background: var(--bg-soft); }
.alead-fitem.bad { border-color: var(--danger); }
.alead-fthumb { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--bg); color: var(--ink-3); }
.alead-fthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alead-fthumb svg { width: 22px; height: 22px; }
.alead-fname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; color: var(--ink); }
.alead-fsize { flex: none; font-size: .78rem; color: var(--ink-3); }
.alead-frm { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -2px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.alead-frm:hover { background: var(--bg); color: var(--danger); }
.alead-frm:focus-visible, .alead-drop .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.alead-frm svg { width: 18px; height: 18px; }
.alead-fsum { margin-top: 6px; font-size: .8rem; color: var(--ink-3); }
.alead-fsum:empty { display: none; }
.alead-prog { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.alead-prog[hidden] { display: none; }
.alead-prog-track { flex: 1 1 auto; height: 8px; border-radius: 99px; background: var(--bg-soft); overflow: hidden; }
.alead-prog-bar { width: 0; height: 100%; border-radius: 99px; background: var(--accent); transition: width .2s; }
.alead-prog-txt { flex: none; font-size: .8rem; color: var(--ink-2); min-width: 7ch; }

/* guide pages: one card per section, numbered heads, fact tiles, CTA buttons instead of in-text links (owner decision 2026-10-20) */
.g-sec, section.g-sec { margin: 0 0 var(--s-5); padding: 0; }
.g-card { max-width: 920px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-5); box-shadow: var(--sh-1); }
@media (min-width: 760px) { .g-card { padding: var(--s-6); } }
.g-head { display: flex; gap: 14px; align-items: center; margin-bottom: var(--s-4); }
.g-head h2 { margin: 0; font-size: var(--fs-lg); line-height: 1.25; letter-spacing: -.01em; scroll-margin-top: calc(var(--header-total, var(--header-h)) + 20px); }
.g-num { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--night); color: var(--mint); display: grid; place-items: center; font-weight: 800; font-size: .95rem; }
.g-card > p, .g-card > ul, .g-card > .callout { max-width: 70ch; }
.g-card > p { margin: 0 0 var(--s-3); }
.g-card ul { padding-left: 1.2em; margin: 0 0 var(--s-3); }
.g-card li { margin: 6px 0; }
.g-card li::marker { color: var(--accent); }
.g-card .table-wrap { margin: var(--s-3) 0; }
.g-card .callout { margin: var(--s-3) 0; }
.g-card .steps { margin-top: var(--s-3); }
.g-card .step { background: var(--bg-soft); box-shadow: none; }
.g-card h3 { margin: var(--s-4) 0 var(--s-2); font-size: 1.05rem; }
.facts { display: grid; gap: 12px; margin: 0 0 var(--s-3); }
@media (min-width: 700px) { .facts { grid-template-columns: 1fr 1fr; } }
.fact { padding: 14px 16px; border-radius: var(--r-lg); background: var(--bg-soft); border: 1px solid var(--line); display: grid; gap: 4px; align-content: start; font-size: .95rem; color: var(--ink-2); line-height: 1.5; }
.fact b { color: var(--ink); font-size: 1.05rem; line-height: 1.3; }
.g-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--s-4) 0 0 !important; max-width: none !important; }
.g-cta .btn { white-space: normal; text-align: center; }
.cta-mid { max-width: 920px; margin: 0 0 var(--s-5); padding: var(--s-5); gap: var(--s-4); }
@media (min-width: 860px) { .cta-mid { padding: var(--s-5) var(--s-6); grid-template-columns: 1.3fr 1fr; } }
.cta-mid h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); margin: 6px 0 0; }
.g-faq { max-width: 920px; margin: var(--s-7) 0 var(--s-5); }
.g-faq > h2 { margin: 0 0 var(--s-4); font-size: var(--fs-xl); scroll-margin-top: calc(var(--header-total, var(--header-h)) + 20px); }
.g-faq .faq { max-width: none; }
.g-card .step h3 { margin: 0 0 6px; }
.g-card .step { padding: 16px; }
.g-flow, section.g-flow { padding-top: var(--s-6); }
.sell-page .header-cta { white-space: nowrap; }

/* #105: a calculator opened from a catalog card with partial data: the note and the fields still to fill */
.cat-note { scroll-margin-top: 130px; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: .88rem; line-height: 1.45; font-weight: 600; }
.field.is-missing > .input, .field.is-missing .input-row .input, .field.is-missing > .seg { border-color: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 28%, transparent); }