/* =========================================================
   Bricks Funding — Marketing site (v2)
   Visual DNA close to the existing bricksfunding.cz, refined:
   - Royal blue accent, white surfaces, cool-gray tints
   - Soft rounded cards, pill tabs, icon stat tiles
   - Single sans-serif (Inter), bold weights
   - Logo lockup: BRICKS in black box + FUNDING serif
   ========================================================= */

:root {
  /* Palette */
  --ink:   #0d1424;
  --ink-2: #2b3344;
  --ink-3: #6b7280;
  --ink-4: #9aa1ad;
  --rule:        #e6e8ee;
  --rule-strong: #cfd3dd;

  --bg:      #ffffff;
  --bg-alt:  #f5f7fa;   /* cool gray fields */
  --bg-soft: #f0f4ff;   /* very subtle blue tint card */

  --blue:        #2046e6;
  --blue-deep:   #1538c7;
  --blue-tint:   #2046e60d;
  --blue-tint-2: #2046e618;

  --green:      #16a34a;
  --green-tint: #16a34a14;
  --amber:      #b45309;
  --amber-tint: #b4530914;

  --accent:      var(--blue);
  --accent-deep: var(--blue-deep);

  /* Type */
  --sans:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:  "Source Serif 4", "Source Serif Pro", Cambria, Georgia, serif; /* used only in the wordmark */
  --mono:   "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Scale */
  --max: 1280px;
  --pad: clamp(20px, 4vw, 56px);
  --pad-mobile: 20px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(13,20,36,0.04), 0 1px 1px rgba(13,20,36,0.03);
  --shadow-md: 0 10px 30px -12px rgba(13,20,36,0.12), 0 2px 6px -2px rgba(13,20,36,0.06);
  --shadow-lg: 0 24px 60px -20px rgba(13,20,36,0.18);
}

/* ---------- Tweaks ---------- */
[data-palette="navy"] {
  --blue: #142a6b; --blue-deep: #0a1845; --blue-tint: #142a6b10; --blue-tint-2: #142a6b1f;
  --accent: var(--blue); --accent-deep: var(--blue-deep);
}
[data-palette="oxblood"] {
  --blue: #7b1f2b; --blue-deep: #5f1822; --blue-tint: #7b1f2b0f; --blue-tint-2: #7b1f2b1c;
  --accent: var(--blue); --accent-deep: var(--blue-deep);
}
[data-palette="forest"] {
  --blue: #2e6a47; --blue-deep: #1f4a31; --blue-tint: #2e6a4710; --blue-tint-2: #2e6a471f;
  --accent: var(--blue); --accent-deep: var(--blue-deep);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
}
.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 76px;
  gap: 24px;
  min-width: 0;
}
.actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand { flex-shrink: 1; min-width: 0; }

/* Burger button */
.burger {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  margin-left: 4px;
  flex-shrink: 0;
}
.burger:hover { border-color: var(--ink-3); }
.burger span {
  position: absolute;
  left: 12px; right: 12px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Nav drop-down panel */
.nav-panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.nav-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-panel__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px var(--pad) 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 24px;
}
.nav-panel__inner a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  color: var(--ink);
  transition: color .15s ease;
}
.nav-panel__inner a:hover { color: var(--accent); }
.nav-panel__inner a[aria-current="page"] { color: var(--accent); }
.nav-panel__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-3); /* was --ink-4 (2.6:1) — bumped to pass WCAG AA as text */
  font-weight: 500;
}
.nav-panel__inner a:hover .nav-panel__num,
.nav-panel__inner a[aria-current="page"] .nav-panel__num { color: var(--accent); }
.nav-panel__label {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
}

/* Language switcher inside the nav panel — always reachable on any viewport */
.nav-panel__lang {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--pad) 28px;
  display: flex; align-items: center; gap: 16px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-3);
}
.nav-panel__lang-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lang--in-panel { background: #fff; }

/* Desktop inline primary nav — mobile keeps the burger + nav-panel. */
.nav-desktop { display: none; }
@media (min-width: 961px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    gap: 28px;
    min-width: 0;
  }
  .nav-desktop__link {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
    transition: color .15s ease;
  }
  .nav-desktop__link:hover { color: var(--accent); }
  .nav-desktop__link[aria-current="page"] { color: var(--accent); font-weight: 600; }
  /* Desktop shows the inline nav; the burger + panel are mobile-only. */
  .burger { display: none; }
}

/* Dim page when nav open */
body.nav-open::after {
  content: "";
  position: fixed; inset: 76px 0 0;
  background: rgba(13, 20, 36, 0.32);
  z-index: 20;
  animation: nav-fade .2s ease;
}
@keyframes nav-fade { from { opacity: 0; } to { opacity: 1; } }

/* Brand lockup: PNG image swap-in for BRICKS|FUNDING */
.brand {
  display: inline-flex; align-items: center; gap: 0;
}
.brand img {
  height: 32px; width: auto; display: block;
}
.brand__box, .brand__word { display: none; }

/* ---------- (legacy .nav removed; replaced by burger + nav-panel) ---------- */

.lang {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px;
  background: #fff;
}
.lang::before {
  content: ""; width: 14px; height: 14px;
  background: radial-gradient(circle, currentColor 1px, transparent 1.5px) 0 0/4px 4px;
  color: var(--ink-3); border-radius: 50%;
  border: 1px solid currentColor; opacity: 0.4;
}
.lang button, .lang a {
  background: none; border: 0; padding: 2px 6px; font-size: 13px; font-weight: 500;
  color: var(--ink-3); border-radius: 999px; cursor: pointer; text-decoration: none;
}
.lang button[aria-pressed="true"], .lang a[aria-pressed="true"] { color: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; border-radius: 10px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 6px 18px -8px rgba(32,70,230,.5);
}
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn--ghost {
  background: #fff; color: var(--ink); border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--ink); }
.btn--white {
  background: #fff; color: var(--ink); border-color: #fff;
}
.btn--white:hover { background: #f5f7fa; }
.btn--link {
  padding: 8px 0; border: 0; color: var(--accent); border-radius: 0; gap: 6px;
}
.btn--link:hover { color: var(--accent-deep); }
.btn--sm { padding: 9px 16px; font-size: 13.5px; }

.btn .arrow { display: inline-block; transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Eyebrows / chips ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--muted { color: var(--ink-3); }

/* Status pill (Aktivní / Naplněné / Brzy) */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  background: var(--blue-tint); color: var(--accent);
}
.pill--active { background: var(--blue-tint); color: var(--accent); }
.pill--filled { background: var(--green-tint); color: var(--green); }
.pill--soon   { background: var(--amber-tint); color: var(--amber); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Type ---------- */
.display, .h1, .h2, .h3 {
  font-family: var(--sans);
  color: var(--ink);
  text-wrap: balance;
}
.display {
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.02;
  font-size: clamp(44px, 6.2vw, 84px);
}
.h1 {
  font-weight: 700; letter-spacing: -0.022em; line-height: 1.08;
  font-size: clamp(34px, 4.4vw, 56px);
}
.h2 {
  font-weight: 700; letter-spacing: -0.018em; line-height: 1.12;
  font-size: clamp(26px, 3vw, 40px);
}
.h3 {
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
  font-size: 20px;
}
.lead {
  font-size: 19px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty;
  max-width: 56ch; font-weight: 400;
}

/* ---------- Section ---------- */
.section { padding: clamp(72px, 9vw, 120px) 0; }
.section--tight { padding: clamp(48px, 6vw, 72px) 0; }
.section--alt { background: var(--bg-alt); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink .eyebrow { color: #93b1ff; }
.section--ink .lead { color: rgba(255,255,255,0.78); }

.section-head { display: grid; gap: 18px; margin-bottom: 56px; text-align: center; justify-items: center; }
.section-head .h1, .section-head .h2 { max-width: 22ch; }
.section-head__meta {
  display: flex; justify-content: center; align-items: center;
  gap: 20px; flex-wrap: wrap; margin-top: 8px;
  color: var(--ink-3); font-size: 14.5px;
}
.section-head__link { color: var(--accent); font-weight: 600; font-size: 14.5px; }
.section-head__link:hover { color: var(--accent-deep); }

.section-head--left { text-align: left; justify-items: start; }
.section-head--left .h1, .section-head--left .h2 { max-width: 22ch; }

/* ---------- Stat tiles (icon + label + big number) ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.stat {
  background: var(--bg-alt);
  border-radius: 4px;
  padding: 26px 24px 24px;
  display: grid; gap: 10px; align-content: start;
  position: relative;
}
.stat--highlight { background: var(--blue-tint); }
.stat__icon {
  width: 38px; height: 38px; border-radius: 4px;
  background: #fff; color: var(--accent);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.stat__icon svg { width: 20px; height: 20px; }
.stat__label { color: var(--ink-3); font-size: 13.5px; font-weight: 500; min-height: 2.4em; }
.stat__value {
  font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.stat--highlight .stat__value { color: var(--accent); }
.stat__value small { font-size: 16px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }

/* Risk inline footer under stats */
.risk-line {
  display: flex; gap: 12px; align-items: center;
  margin-top: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 13.5px; color: var(--ink-3); line-height: 1.5;
}
.risk-line__tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber); background: var(--amber-tint);
  padding: 4px 8px; border-radius: 3px;
  flex-shrink: 0;
}
.risk-line a {
  color: var(--accent); font-weight: 600; margin-left: auto; white-space: nowrap;
}

/* ---------- Cashback promo band ---------- */
.cashback {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  background: var(--blue-tint); border-radius: 4px; padding: 32px 40px;
}
.cashback__lead { display: flex; align-items: center; gap: 28px; flex: 1 1 auto; }
.cashback__badge {
  font-size: clamp(48px, 6vw, 68px); font-weight: 800; letter-spacing: -0.03em;
  color: var(--accent); line-height: 1; flex-shrink: 0;
}
.cashback__badge small { font-size: 0.5em; font-weight: 700; margin-left: 2px; }
.cashback__text { display: grid; gap: 8px; }
.cashback__text .lead { max-width: 58ch; }
.cashback .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .cashback { padding: 24px; gap: 18px; }
  .cashback__lead { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Team: featured lead (photo | wider bio) + pair below ---------- */
/* .card sets display:flex later in the sheet — need .card.team-lead to win. */
.card.team-lead { display: grid; grid-template-columns: 176px 1fr; gap: 36px; align-items: center; }
.team-lead__body { text-align: left; }
@media (max-width: 720px) {
  .card.team-lead { grid-template-columns: 1fr; gap: 20px; text-align: center; justify-items: center; }
  .team-lead__body { text-align: center; }
}

/* ---------- Photo placeholder ---------- */
.photo {
  position: relative;
  background: #e6e8ee;
  overflow: hidden;
  isolation: isolate;
  border-radius: 4px;
}
/* When .photo contains a real <img>, hide the striped diagonal placeholder */
.photo > img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.photo:has(> img)::before { display: none; }
.photo:has(> img) > .photo__label {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.08);
}
.photo::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(13,20,36,0.04) 8px 9px);
  z-index: 0;
}

/* Page banner (for pages without a .photo wrapper) */
.page-banner {
  position: relative;
  margin: 0 auto 40px;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 21/9;
  background: #1a1a1a;
  max-height: 360px;
}
.page-banner > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.page-banner--3-2 { aspect-ratio: 3/2; max-height: 380px; }
.page-banner--16-9 { aspect-ratio: 16/9; max-height: 420px; }
/* Wide variant — used for the home Track Record + FAQ panoramas */
.page-banner--strip { aspect-ratio: auto; height: 200px; max-height: 200px; }
@media (max-width: 640px) {
  .page-banner { aspect-ratio: 16/9; margin-bottom: 24px; max-height: 240px; border-radius: 3px; }
  .page-banner--strip { height: 140px; max-height: 140px; }
}
.photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(13,20,36,0.22));
  z-index: 1;
}
.photo__label {
  position: absolute; z-index: 2;
  top: 16px; left: 16px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); background: #fff;
  border: 1px solid var(--rule);
  padding: 6px 10px; border-radius: 6px;
}
.photo__cap {
  position: absolute; z-index: 2;
  bottom: 16px; left: 16px; right: 16px;
  display: flex; justify-content: space-between; align-items: end; gap: 16px;
  color: #fff;
  font-size: 13px; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.photo--lg { border-radius: var(--r-lg); }

/* ---------- Project card ---------- */
.card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--rule-strong);
}
.card__photo { aspect-ratio: 4/3; border-radius: 0; }
.card__photo .photo__label { background: #fff; }

.card__head {
  position: absolute; z-index: 3;
  top: 14px; left: 14px; right: 14px;
  display: flex; justify-content: space-between; align-items: start;
  pointer-events: none;
}
.card__tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--ink);
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.card__body { padding: 22px 22px 18px; display: grid; gap: 10px; }
.card__title {
  font-size: 22px; font-weight: 700; letter-spacing: -0.012em; color: var(--ink);
}
.card__loc { color: var(--ink-3); font-size: 14px; }

.card__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 12px;
}
.card__stat {
  background: var(--bg-alt);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid; gap: 4px;
}
.card__stat-k { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.card__stat-v { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.card__stat--highlight { background: var(--blue-tint); }
.card__stat--highlight .card__stat-v { color: var(--accent); }

.card__progress { padding: 16px 22px; border-top: 1px solid var(--rule); display: grid; gap: 8px; }
.card__bar {
  height: 6px; background: var(--bg-alt); border-radius: 999px; overflow: hidden;
}
.card__bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.card__progress-meta {
  display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3);
}
.card__progress-meta strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.card__cta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px;
  background: var(--bg-alt);
  font-size: 14px; font-weight: 600; color: var(--accent);
}
.card:hover .card__cta { background: var(--blue-tint); }
.card__cta .arrow { transition: transform .2s ease; }
.card:hover .card__cta .arrow { transform: translateX(4px); }

/* ---------- Seal / trust mark ---------- */
.seal {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--blue-tint);
  color: var(--accent);
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.seal svg { width: 14px; height: 14px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.7);
  padding: 80px 0 36px;
  margin-top: 80px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
}
.site-footer h4 {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 18px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { color: rgba(255,255,255,0.78); font-size: 14.5px; }
.site-footer a:hover { color: #fff; }
.footer-brand .brand img { filter: invert(1); height: 28px; }
.footer-brand p {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  max-width: 38ch;
  margin-top: 18px;
  line-height: 1.6;
}
/* Beat `.site-footer ul { display: grid }` (equal-ish specificity) so icons row up. */
.site-footer .footer-social {
  display: flex; flex-direction: row; gap: 10px; list-style: none; padding: 0; margin: 20px 0 0;
}
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.footer-social a:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.footer-meta {
  margin-top: 60px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255,255,255,0.5);
}
.disclaimer {
  margin-top: 28px;
  font-size: 12.5px; line-height: 1.6;
  color: rgba(255,255,255,0.6);
  max-width: 92ch;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
}

/* ---------- Tweaks panel ---------- */
.tweaks {
  position: fixed; bottom: 20px; right: 20px; z-index: 100;
  width: 280px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--sans); display: none; overflow: hidden;
}
.tweaks.open { display: block; }

/* ---------- Sticky call button ---------- */
.call-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 85;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px;
  background: var(--green); color: #fff;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.call-fab:hover { background: #12833d; transform: translateY(-1px); }
.call-fab:active { transform: translateY(0); }
.call-fab:focus-visible { outline: 3px solid var(--green-tint); outline-offset: 2px; }
.call-fab__icon { width: 20px; height: 20px; fill: currentColor; flex: none; }
.call-fab__num { white-space: nowrap; }
/* Compact circle on phones so it never crowds the layout. */
@media (max-width: 560px) {
  .call-fab { right: 16px; bottom: 16px; padding: 0; width: 56px; height: 56px; justify-content: center; }
  .call-fab__num { display: none; }
  .call-fab__icon { width: 25px; height: 25px; }
}
@media print { .call-fab { display: none; } }
.tweaks__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--bg-alt);
}
.tweaks__close { background: none; border: 0; color: var(--ink-3); font-size: 18px; }
.tweaks__group { padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.tweaks__group:last-child { border-bottom: 0; }
.tweaks__label { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.swatch { aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 8px; cursor: pointer; }
.swatch[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.swatch--blue    { background: #2046e6; }
.swatch--navy    { background: #142a6b; }
.swatch--oxblood { background: #7b1f2b; }
.swatch--forest  { background: #2e6a47; }
.tweaks__row { display: flex; gap: 6px; }
.tweaks__row button {
  flex: 1; padding: 8px 10px; font-size: 12px;
  background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  color: var(--ink-2); font-weight: 500;
}
.tweaks__row button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Utility ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stack { display: grid; gap: 16px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.divider { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ---------- Filters (listing) ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 14px;
  background: var(--bg-alt);
  border-radius: var(--r-md);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-2); background: #fff;
  border: 1px solid var(--rule);
}
.chip[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip__count { font-size: 12px; opacity: 0.7; }
/* Header CTA: full label on desktop, short label on phone (see mobile block) */
.header-cta__short { display: none; }
.sort {
  margin-left: auto; display: inline-flex; gap: 12px; align-items: center;
  font-size: 13.5px; color: var(--ink-3);
}
.sort select {
  font: inherit; background: #fff;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 7px 16px; color: var(--ink); font-weight: 500;
}

/* ---------- Hero ---------- */
.hero-slab {
  background: #faf7f0;
  border-bottom: 1px solid #eee6d4;
  position: relative;
  overflow: hidden;
}
.hero-slab::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 38%;
  background: linear-gradient(180deg, rgba(184, 153, 104, 0.06), transparent 80%);
  pointer-events: none;
}
@media (max-width: 960px) {
  .hero-slab::before { display: none; }
}
.hero {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 64px; align-items: stretch;
  /* Vertical padding only — keep .wrap's horizontal gutters (a shorthand here
     would zero left/right padding and stick content to the screen edges). */
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(36px, 5vw, 64px);
  position: relative;
}
.hero__copy { position: relative; z-index: 1; }
.hero__copy .pill { background: #fff; }
.hero__photo {
  aspect-ratio: 4/5;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 24px 60px -28px rgba(13, 20, 36, 0.25);
  overflow: hidden;
}
/* Property caption overlay on the hero image */
.hero__photo-cap {
  position: absolute; z-index: 3;
  bottom: 16px; left: 16px; right: 16px;
  display: flex; justify-content: space-between; align-items: end; gap: 16px;
  pointer-events: none;
}
.hero__photo-cap .tag {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 4px;
  padding: 10px 14px;
  display: grid; gap: 2px;
  font-family: var(--sans);
  pointer-events: auto;
}
.hero__photo-cap .tag__k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.hero__photo-cap .tag__v {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.hero__photo-badge {
  position: absolute; z-index: 3;
  top: 16px; right: 16px;
  background: var(--accent);
  color: #fff;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 12px -4px rgba(32, 70, 230, 0.45);
}
.hero__photo-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: hero-pulse 2.5s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}
.hero__cta { display: flex; gap: 14px; align-items: center; margin-top: 36px; flex-wrap: wrap; }
.hero__cred {
  margin-top: 32px;
  display: flex; gap: 24px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3);
}
.hero__cred > span { display: inline-flex; align-items: center; gap: 8px; }
.hero__cred > span::before {
  content: "✓"; color: var(--green); font-weight: 700;
  flex-shrink: 0;
}

/* Hero polish (2026-07 review): the display headline was wrapping to 6 lines and
   the portrait photo floated with big beige gaps ("vytáhlé"). Shrink the hero
   headline, let the photo fill the copy height on desktop, and shift it right to
   frame the building. */
.hero__copy .display { font-size: clamp(30px, 3.5vw, 46px); line-height: 1.08; }
.hero__photo img { object-position: 68% center; }
@media (min-width: 961px) {
  .hero__photo { aspect-ratio: auto; min-height: 440px; }
}

/* ---------- How-it-works pill (homepage) ---------- */
.flow {
  background: var(--bg-alt);
  border-radius: var(--r-xl);
  padding: 56px 48px;
  position: relative; overflow: hidden;
}
.flow__grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 18px; position: relative;
}
.flow__node {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 22px 20px;
  display: grid; gap: 8px;
  min-height: 180px;
  box-shadow: var(--shadow-sm);
}
.flow__node-num {
  font-size: 12px; font-weight: 700; color: var(--accent);
  letter-spacing: 0.14em;
}
.flow__node-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; min-height: 2.4em; }
.flow__node-desc { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* ---------- Steps (how-it-works) ---------- */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.step {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  display: grid; gap: 14px; align-content: start;
}
.step__n {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue-tint); color: var(--accent);
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
}
.step__h { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.step__d { color: var(--ink-3); font-size: 14px; line-height: 1.55; }

/* ---------- Detail page ---------- */
.detail {
  display: grid; grid-template-columns: 1fr 380px;
  gap: 48px; align-items: start;
  /* top/bottom only — keep .wrap's horizontal gutters */
  padding-top: 32px;
  padding-bottom: 80px;
}
.detail__main { display: grid; gap: 48px; }
.detail__hero { aspect-ratio: 16/9; border-radius: var(--r-lg); }

/* Tabs as a single pill bar with white pill on active */
.detail__tabs {
  display: inline-flex;
  background: var(--bg-alt);
  padding: 6px;
  border-radius: 999px;
  margin-bottom: 8px;
  position: sticky; top: 84px; z-index: 5;
}
.detail__tab {
  padding: 11px 22px;
  font-size: 14px; font-weight: 600;
  color: var(--ink-3);
  border: 0; background: transparent;
  border-radius: 999px;
}
.detail__tab[aria-current="true"] {
  background: #fff; color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* Right rail */
.detail__rail {
  position: sticky; top: 100px;
  display: grid; gap: 16px;
}
.rail-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 24px;
  display: grid; gap: 18px;
}
.rail-card__head {
  display: flex; justify-content: space-between; align-items: center;
}
.rail-card__big {
  display: grid; gap: 4px;
}
.rail-card__num {
  font-size: 44px; font-weight: 700; letter-spacing: -0.025em; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.rail-card__num small { font-size: 18px; color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.rail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  border-top: 1px solid var(--rule); padding-top: 18px;
}
.rail-grid > div { display: grid; gap: 4px; }
.rail-grid-k { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.rail-grid-v { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.cta-card {
  background: var(--accent); color: #fff;
  border-radius: var(--r-lg);
  padding: 24px; display: grid; gap: 16px;
}
.cta-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.012em; margin: 0; color: #fff; }
.cta-card__rows { display: grid; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.9); }
.cta-card__rows .row-between { font-size: 14px; }
.cta-card__rows strong { font-weight: 700; color: #fff; }
.cta-card .btn--white { width: 100%; justify-content: center; padding: 14px 22px; }
.cta-card__sub { font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.5; margin: 0; }

/* Key-value rows */
.kv {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 24px;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.kv__k { color: var(--ink-3); font-size: 14px; }
.kv__v { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--ink); }

.bullets { display: grid; gap: 12px; padding-left: 0; list-style: none; }
.bullets li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  font-size: 15px; color: var(--ink-2); line-height: 1.55;
}
.bullets li::before {
  content: "✓"; color: var(--accent); font-weight: 700; font-size: 14px;
  background: var(--blue-tint); width: 20px; height: 20px;
  border-radius: 50%; display: grid; place-items: center;
  transform: translateY(2px);
}

.risk-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--amber);
  padding: 22px 24px;
  border-radius: var(--r-md);
  display: grid; gap: 8px;
}
.risk-card h4 {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0; color: var(--amber);
}
.risk-card h4 + p { margin: 0; }
.risk-card__title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.risk-card p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

.doc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-radius: var(--r-md);
  background: var(--bg-alt);
}
.doc-row + .doc-row { margin-top: 10px; }
.doc-row__name { display: flex; align-items: center; gap: 14px; }
.doc-row__icon {
  width: 40px; height: 48px;
  background: #fff; border: 1px solid var(--rule);
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--ink-3);
}
.doc-row__title { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.doc-row__meta { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

/* ---------- Why us ---------- */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* About → principles: image beside a 2×2 card grid. Avoids the cramped
   nested-grid-2-in-grid-2 that wrapped text to shreds on medium desktops. */
.principles { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 32px; align-items: start; }
.principles__img { aspect-ratio: 3/4; max-height: 560px; }
.principles__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Below ~1024px the four cards can't sit beside the image without cramping —
   stack: image on top (landscape), cards full-width below. */
@media (max-width: 1024px) {
  .principles { grid-template-columns: 1fr; gap: 24px; }
  .principles__img { aspect-ratio: 16/9; max-height: 320px; }
}
@media (max-width: 560px) {
  .principles__cards { grid-template-columns: 1fr; }
}
.why__col {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 32px;
  display: grid; gap: 16px;
}
.why__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--blue-tint); color: var(--accent);
  display: grid; place-items: center;
}
.why__icon svg { width: 24px; height: 24px; }
.why__h { font-size: 22px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.2; }
.why__d { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--accent); color: #fff;
  padding: clamp(56px, 8vw, 96px) 0;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 80% 20%, rgba(255,255,255,0.12), transparent),
              radial-gradient(ellipse 60% 50% at 10% 90%, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
}
.cta-band__inner { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: end; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: rgba(255,255,255,0.85); }
.cta-band .eyebrow { color: rgba(255,255,255,0.7); }
.cta-band .btn--primary { background: #fff; color: var(--accent); border-color: #fff; box-shadow: none; }
.cta-band .btn--primary:hover { background: var(--bg-alt); }
.cta-band .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.cta-band .btn--ghost:hover { border-color: #fff; }

/* ---------- Page intro ---------- */
.page-intro {
  /* top/bottom only — keep .wrap's horizontal gutters */
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(32px, 4vw, 48px);
  display: grid; gap: 16px;
  text-align: center; justify-items: center;
}
.page-intro .lead { text-align: center; }

/* ---------- Legal pages (terms / privacy / cookies) ----------
   Served verbatim from _legacy/legal/{slug}.{locale}.html as a bare <article
   class="legal">. All rules scoped under .legal so nothing leaks into the site
   chrome; colours use the site tokens so the pages follow the active palette. */
.legal { max-width: 820px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) 24px 96px; }
.legal h1 { font-size: clamp(1.7rem, 3.4vw, 2rem); line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -0.012em; }
.legal .lead { font-size: 1.1rem; color: var(--ink-2); margin: .25rem 0 1rem; }
.legal .meta { font-size: .9rem; color: var(--ink-3); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .6rem 0; margin: 0 0 1rem; }
.legal .meta a { color: var(--accent); }
.legal .xlnote { font-size: .82rem; color: var(--ink-3); font-style: italic; margin: 0 0 2rem; }
.legal h2 { font-size: 1.25rem; font-weight: 700; margin: 2.2rem 0 .6rem; letter-spacing: -0.01em; }
.legal h3 { font-size: 1.05rem; font-weight: 600; margin: 1.4rem 0 .4rem; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.legal p { margin: .6rem 0; }
.legal ul, .legal ol { margin: .6rem 0; padding-left: 1.4rem; }
.legal li { margin: .3rem 0; }
.legal a { color: var(--accent); }
.legal strong { color: var(--ink); }
.legal table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 14px; }
.legal th, .legal td { border: 1px solid var(--rule); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.legal th { background: var(--bg-alt); font-weight: 600; }
.legal nav.toc { background: var(--bg-alt); border: 1px solid var(--rule); border-radius: 8px; padding: .8rem 1.2rem; margin: 0 0 2rem; }
.legal nav.toc ol { margin: .3rem 0; }
.legal__reopen { margin: 1rem 0 0; }

/* ---------- Timeline (how-it-works) ---------- */
.timeline {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.timeline__cell {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 24px 22px;
  display: grid; gap: 8px;
}
.timeline__time {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.timeline__what { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.timeline__d { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq__item {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0 22px;
}
.faq__q {
  width: 100%; text-align: left;
  background: none; border: 0;
  padding: 22px 0;
  display: grid; grid-template-columns: 1fr auto; gap: 24px;
  align-items: center;
  font-size: 17px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; color: var(--accent); font-size: 22px; font-weight: 400;
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--blue-tint);
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a { padding: 0 0 22px; color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 78ch; }

/* ---------- FAQ table of contents + groups (migrated from faq.html) ---------- */
.faq-toc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 56px; }
.faq-toc a { background: var(--bg-alt); border-radius: var(--r-md); padding: 16px 20px; display: grid; gap: 4px; transition: background .15s ease; }
.faq-toc a:hover { background: var(--blue-tint); }
.faq-toc__n { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--accent); font-weight: 600; }
.faq-toc__t { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.faq-toc__c { font-size: 12.5px; color: var(--ink-3); }
.faq-group { margin-bottom: 56px; }
.faq-group__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.faq-group__n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--accent); font-weight: 700; }
.faq-group__h { font-size: 24px; font-weight: 700; letter-spacing: -0.012em; margin: 0; }
@media (max-width: 880px) { .faq-toc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .faq-toc { grid-template-columns: 1fr; } }

/* ---------- Bond flow diagram (how-it-works) ---------- */
.bigflow {
  background: var(--ink); color: #fff;
  border-radius: var(--r-xl);
  padding: 48px;
  position: relative; overflow: hidden;
}
.bigflow__svg-wrap { position: relative; width: 100%; aspect-ratio: 16/9; }
.bigflow__legend {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 36px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.bigflow__legend > div { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.55; }
.bigflow__legend strong { color: #fff; font-weight: 700; font-size: 15px; display: block; margin-bottom: 4px; }

/* Tax math card */
.tax-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 32px;
  display: grid; gap: 18px;
}
.tax-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tax-card .num {
  font-size: 40px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1;
}
.tax-card .num small { font-size: 16px; color: var(--ink-3); font-weight: 600; }

/* Structure dl */
.struct { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.struct dt {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-top: 24px;
}
.struct dd { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.6; max-width: 60ch; }

/* Archive table */
/* Scroll horizontally when the 7 columns can't fit (medium screens) instead of
   squeezing cells into multi-line wraps / clipping the last column. */
.archive { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.archive table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; }
.archive thead th {
  text-align: left; padding: 16px 22px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); background: var(--bg-alt);
}
.archive tbody td { padding: 20px 18px; border-top: 1px solid var(--rule); font-variant-numeric: tabular-nums; white-space: nowrap; }
.archive tbody tr:hover { background: var(--bg-alt); }
.archive__title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.archive__sub { font-size: 13px; color: var(--ink-3); }

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 90;
  max-width: 640px;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -20px rgba(13,20,36,0.28);
  padding: 22px 24px;
  display: none;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.cookie-banner.open { display: block; }
.cookie-banner h3 {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 6px; color: var(--ink);
}
.cookie-banner p { margin: 0 0 14px; }
.cookie-banner a { color: var(--accent); font-weight: 600; }
.cookie-banner__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.cookie-banner__actions .btn { padding: 10px 16px; font-size: 13.5px; }

/* Detailed preference toggles (shown only when expanded) */
.cookie-banner__prefs {
  margin: 14px 0;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  display: none;
}
.cookie-banner.expanded .cookie-banner__prefs { display: block; }
.cookie-banner.expanded .cookie-banner__hint { display: none; }
.cookie-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  padding: 10px 0;
}
.cookie-row + .cookie-row { border-top: 1px solid var(--rule); }
.cookie-row__copy { flex: 1; min-width: 0; }
.cookie-row__title { font-weight: 600; color: var(--ink); font-size: 14px; }
.cookie-row__desc { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.cookie-row__locked {
  font-size: 11px; font-weight: 600;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em;
  align-self: center;
}
/* iOS-style toggle */
.toggle {
  position: relative; flex-shrink: 0;
  width: 40px; height: 22px;
  background: var(--rule-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease;
  align-self: center;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle::after {
  content: ""; position: absolute;
  width: 18px; height: 18px;
  top: 2px; left: 2px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(13,20,36,0.2);
  transition: transform .15s ease;
}
.toggle:has(input:checked) { background: var(--accent); }
.toggle:has(input:checked)::after { transform: translateX(18px); }

@media (max-width: 560px) {
  .cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 18px 18px; }
  .cookie-banner__actions .btn { flex: 1 0 calc(50% - 4px); justify-content: center; }
}
/* Language is now URL-based (Czech at `/`, English under `/en/…`) and each page
   renders a single language server-side — the old data-lang CSS toggle is gone. */

/* ---------- Real properties grid (home) ---------- */
.prop-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.prop-grid > .photo { border-radius: var(--r-md); aspect-ratio: auto; }
.prop-grid > .photo:first-child { grid-row: span 2; }
.prop-grid > .photo .photo__cap { font-size: 12px; }
.prop-grid__head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 20px; gap: 24px;
}

/* ---------- Track record (completed past developments) ---------- */
.track-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px; align-items: end;
  margin-bottom: 36px;
}
.track-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 22px 24px;
}
.track-stat__v {
  font-size: 28px; font-weight: 700; letter-spacing: -0.018em;
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.track-stat__k {
  font-size: 12.5px; color: var(--ink-3);
  margin-top: 6px;
}
.track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.track-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.track-card:hover {
  transform: translateY(-2px);
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-sm);
}
.track-card__photo {
  aspect-ratio: 4/3;
  background: #e6e8ee;
  position: relative; isolation: isolate;
}
.track-card__photo::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(13,20,36,0.04) 6px 7px);
}
.track-card__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(13,20,36,0.2));
}
.track-card__year {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: #fff;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--ink);
}
.track-card__body { padding: 14px 16px 16px; display: grid; gap: 6px; }
.track-card__title {
  font-size: 14.5px; font-weight: 600; line-height: 1.3;
  color: var(--ink); letter-spacing: -0.005em;
}
.track-card__loc { font-size: 12px; color: var(--ink-3); }
.track-card__tag {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent); margin-top: 4px;
}

@media (max-width: 960px) {
  .track-head { grid-template-columns: 1fr; gap: 32px; }
  .track-stats { grid-template-columns: repeat(3, 1fr); }
  .track { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .track { grid-template-columns: 1fr 1fr; }
  .track-stats { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
}

/* ---------- Form / waitlist ---------- */
.form-shell {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}
.form-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 36px;
  display: grid; gap: 24px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field__label {
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  display: flex; justify-content: space-between; align-items: baseline;
}
.field__label span { color: var(--ink-3); font-weight: 400; font-size: 12px; } /* was --ink-4 — WCAG AA */
.field__input,
.field__select,
.field__textarea {
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  color: var(--ink);
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--blue-tint-2);
}
.field__textarea { min-height: 96px; resize: vertical; }
.field__help { font-size: 12.5px; color: var(--ink-3); }

.field__select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Radio cards (investment range) */
.radio-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.radio-card {
  position: relative; cursor: pointer;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: 14px 16px;
  display: grid; gap: 4px;
  transition: border-color .15s ease, background .15s ease;
}
.radio-card:hover { border-color: var(--ink-3); }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card__title { font-size: 15px; font-weight: 600; color: var(--ink); }
.radio-card__sub { font-size: 12.5px; color: var(--ink-3); }
.radio-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--blue-tint);
  box-shadow: 0 0 0 2px var(--blue-tint-2);
}

/* Checkbox */
.checkbox {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  align-items: start; cursor: pointer;
  padding: 4px 0;
}
.checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox__box {
  width: 22px; height: 22px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 6px;
  background: #fff;
  display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.checkbox__box svg { width: 14px; height: 14px; color: #fff; opacity: 0; }
.checkbox input:checked + .checkbox__box {
  background: var(--accent); border-color: var(--accent);
}
.checkbox input:checked + .checkbox__box svg { opacity: 1; }
.checkbox input:focus-visible + .checkbox__box {
  box-shadow: 0 0 0 3px var(--blue-tint-2);
}
.checkbox__label { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.checkbox__label a { color: var(--accent); font-weight: 600; }
.checkbox__label a:hover { color: var(--accent-deep); }
.checkbox--required .checkbox__label::after {
  content: " *"; color: var(--amber); font-weight: 600;
}

/* Aside (info panel next to form) */
.form-aside { display: grid; gap: 24px; }
.aside-card {
  background: var(--bg-alt);
  border-radius: var(--r-lg);
  padding: 28px;
  display: grid; gap: 18px;
}
.aside-card h3 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.aside-list { display: grid; gap: 16px; padding: 0; margin: 0; list-style: none; }
.aside-list li {
  display: grid; grid-template-columns: 32px 1fr; gap: 14px;
  font-size: 14px; color: var(--ink-2); line-height: 1.5;
}
.aside-list li strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.aside-list li::before {
  content: counter(li-c);
  counter-increment: li-c;
  width: 26px; height: 26px;
  background: #fff; border: 1px solid var(--rule);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--accent);
}
.aside-list { counter-reset: li-c; }

/* Submit row */
.form-submit {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.form-submit__note {
  font-size: 12.5px; color: var(--ink-3); max-width: 32ch;
}

/* Thank-you state */
.thanks {
  display: grid; gap: 18px; justify-items: center;
  text-align: center;
  padding: 48px 24px;
}
.thanks__check {
  width: 64px; height: 64px;
  background: var(--blue-tint);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent);
}
.thanks__check svg { width: 32px; height: 32px; }
.thanks h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.thanks p { color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 48ch; margin: 0; }

@media (max-width: 880px) {
  .form-shell { grid-template-columns: 1fr; }
  .form-grid, .radio-cards { grid-template-columns: 1fr; }
  .form-card { padding: 24px; }
}

/* ---------- Responsive (light pass) ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4, .why, .steps, .timeline, .footer-grid, .flow__grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .detail { grid-template-columns: 1fr; }
  .detail__rail { position: static; }
  .cta-band__inner, .page-intro { grid-template-columns: 1fr; }
  .struct { grid-template-columns: 1fr; gap: 24px; }
  .nav-panel__inner { grid-template-columns: 1fr 1fr; }
  .nav-panel__label { font-size: 18px; }
  /* Hide the header lang + Log in on narrow screens; both are reachable from the burger panel */
  .lang:not(.lang--in-panel) { display: none; }
  .header-login { display: none; }
}
@media (max-width: 560px) {
  .nav-panel__inner { grid-template-columns: 1fr; }
}

/* Narrow phone — collapse the dense grids that look cramped at 2 columns */
@media (max-width: 640px) {
  /* Slightly more breathing room on phone */
  :root { --pad: 20px; }
  /* Compact header CTA on phone: short "Invest" label + arrow (never blank). */
  .header-cta__full { display: none; }
  .header-cta__short { display: inline; }
  .actions .btn--primary { padding: 10px 14px; gap: 6px; }
  .actions .btn--primary .arrow { font-size: 15px; }
  .brand img { height: 26px; }
  .site-header__inner { height: 64px; gap: 12px; }
  /* Don't stack a 5-up timeline or bond-flow as 2x3 — go full vertical */
  .grid-2,
  .timeline,
  .flow__grid,
  .steps,
  .why { grid-template-columns: 1fr; }
  /* Risk line: the 3-up row squeezes the middle text to one word per line on
     phones. Stack it — tag, full-width text, then the link. */
  .risk-line { flex-direction: column; align-items: flex-start; gap: 10px; }
  .risk-line a { margin-left: 0; }
  /* Opportunity/property cards must be full-width on phone, never 2-up */
  .grid-2 { gap: 20px; }
  /* 5-up footer becomes 2-up on phone (was 1fr 1fr from 960 but the brand col is 2fr so it's already wider) */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .footer-brand { grid-column: 1 / -1; }
  /* Stat tiles 2x2 OK, but tighten padding */
  .stat { padding: 20px 18px; }
  .stat__value { font-size: 26px; }
  /* Section padding compresses */
  .section { padding: clamp(48px, 10vw, 72px) 0; }
  .section-head { margin-bottom: 36px; }
  /* Hero photo: 4/5 is too tall on 375px — drop to 4/3 */
  .hero__photo { aspect-ratio: 4/3; }
  /* Bond-flow + flow nodes tighten */
  .flow { padding: 32px 20px; border-radius: var(--r-md); }
  .flow__node { min-height: 0; padding: 18px 16px; }
  .bigflow { padding: 28px 20px; border-radius: var(--r-md); }
  .bigflow__legend { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; padding-top: 20px; }
  /* Detail page hero a bit shorter */
  .detail__hero { aspect-ratio: 3/2; }
  /* Pill tabs: allow horizontal scroll instead of wrapping */
  .detail__tabs {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%;
    scrollbar-width: none;
  }
  .detail__tabs::-webkit-scrollbar { display: none; }
  .detail__tab { white-space: nowrap; padding: 10px 16px; font-size: 13.5px; }
  /* Filter chips: more breathing room, hide the vertical group dividers (they
     read as clutter once chips wrap), full-width sort on its own row. */
  .filters { padding: 14px; gap: 10px; }
  .filters__sep { display: none; }
  .chip { padding: 7px 14px; font-size: 13px; }
  .sort { margin-left: 0; width: 100%; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--rule); }
  /* Section-header rows (title vs. meta) stack instead of cramming side-by-side */
  .row-between { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* …but keep key/value rows inside cards horizontal */
  .cta-card__rows .row-between { flex-direction: row; align-items: center; gap: 24px; }
  /* CTA band: don't right-align buttons */
  .cta-band__inner > div:last-child { justify-content: flex-start !important; }
  /* Card stats inside opp card */
  .card__stats { grid-template-columns: 1fr 1fr 1fr; }
  .card__stat { padding: 10px 12px; }
  .card__stat-v { font-size: 16px; }
  /* Filled/archive table scrolls (see base rule); tighten padding on phones */
  .archive tbody td, .archive thead th { padding: 14px 12px; }
  /* Tax card numbers shrink */
  .tax-card { padding: 24px; }
  .tax-card .num { font-size: 32px; }
  /* Trust seals on detail breadcrumb don't fight title */
  .seal { font-size: 11.5px; padding: 5px 10px; }
}

@media (max-width: 420px) {
  /* Tiniest viewport — go fully single-column everywhere */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .track { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .h1, .display { font-size: 34px !important; }
  .h2 { font-size: 24px !important; }
  .nav-panel__inner { padding: 18px var(--pad) 24px; }
  .nav-panel__label { font-size: 16px; }
  /* Card photo a touch shorter so card stays scannable */
  .card__photo { aspect-ratio: 3/2; }
}

/* ---------- Footprint map (about) ---------- */
.map-grid {
  display: grid; grid-template-columns: 1.7fr 1fr; gap: 40px; align-items: center;
}
.map-figure {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 20px; margin: 0;
}
.map-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.map-legend__row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 10px; border: 1px solid var(--rule); background: #fff;
}
.map-legend__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.map-legend__city { font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; }
.map-legend__count { margin-left: auto; color: var(--ink-3); font-size: 14px; white-space: nowrap; }
@media (max-width: 760px) {
  .map-grid { grid-template-columns: 1fr; gap: 24px; }
  .map-figure { padding: 12px; }
}

/* ---------- Visualization / render badge (offerings that show CGI, not photos) ---------- */
.viz-badge {
  position: absolute; z-index: 3;
  bottom: 12px; right: 12px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: rgba(13, 20, 36, 0.82);
  padding: 5px 9px; border-radius: 6px;
}
.viz-badge--lg { font-size: 12px; bottom: 18px; left: 18px; right: auto; padding: 7px 13px; }
.gallery-item .photo { width: 100%; }

/* ---------- Raising highlight + heritage badge (portfolio pack) ---------- */
/* The 3 "active_raise" objects read as visually distinct from the operating
   portfolio: accent border + accent-filled CTA. */
.card--raising { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-md); }

/* Funding band under the photo — dark band, green progress pill, white meta
   (modeled on the supplier marketplace card). */
.card__fund { background: var(--accent-deep); color: #fff; padding: 15px 22px; display: grid; gap: 10px; }
.card__fund .card__bar { height: 9px; background: rgba(255,255,255,.22); border-radius: 999px; }
.card__fund .card__bar > span { background: var(--green); border-radius: 999px; }
.card__fund-meta { display: flex; justify-content: space-between; font-size: 13.5px; color: rgba(255,255,255,.82); }
.card__fund-meta strong { color: #fff; font-weight: 700; }
.card__fund-note { color: rgba(255,255,255,.8); }

/* Key terms list (investment goal / LTV / interest / type / min term). */
.card__terms { margin-top: 12px; display: grid; }
.card__terms-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.card__terms-row:last-child { border-bottom: 0; }
.card__terms-row > span { color: var(--ink-3); }
.card__terms-row > strong { color: var(--ink); font-weight: 700; text-align: right; }

/* Invest + Show detail action row. */
.card__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--rule); margin-top: auto; }
.card__actions .btn { white-space: nowrap; }
.card__detail-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--accent); }
.card__detail-link .arrow { transition: transform .2s ease; }
.card__detail-link:hover .arrow { transform: translateX(4px); }

.badge--heritage {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--amber); background: var(--amber-tint);
  border: 1px solid var(--amber); border-radius: 999px; padding: 4px 10px;
}
/* Over a card photo, render it as a solid chip so it reads on imagery. */
.card__photo .badge--heritage {
  position: absolute; z-index: 3; bottom: 12px; left: 12px;
  background: #fff; border-color: transparent; box-shadow: var(--shadow-sm);
}

/* ---------- Home return calculator ---------- */
.calc__grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 48px; align-items: start;
  background: var(--bg-soft); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 40px 44px;
}
@media (max-width: 860px) { .calc__grid { grid-template-columns: 1fr; gap: 28px; padding: 26px 18px; } }

.calc__field { margin-bottom: 18px; }
.calc__label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.calc__input-row { display: flex; gap: 8px; align-items: stretch; }
.calc__step {
  width: 44px; flex: none; border: 1px solid var(--rule-strong); background: #fff;
  border-radius: 10px; font-size: 20px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.calc__step:hover { background: var(--bg-alt); }
.calc__input {
  flex: 1; display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--rule-strong); border-radius: 10px; padding: 0 14px; min-height: 46px;
}
.calc__input input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
}
.calc__unit { color: var(--ink-3); font-weight: 600; font-size: 14px; }

.calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--rule-strong); }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer; }
.calc__range::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); cursor: pointer; }

.calc__rate { padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 8px 0 16px; font-size: 15px; }
.calc__cashback {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0 0 16px; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: 8px; background: #fff;
  cursor: pointer; text-align: left; font: inherit; color: var(--ink-2);
  transition: border-color .15s ease, background .15s ease;
}
.calc__cashback:hover { border-color: var(--accent); }
.calc__cashback.is-on { border-color: var(--accent); background: var(--blue-tint); }
.calc__cashback-box {
  width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--rule-strong);
  display: grid; place-items: center; font-size: 12px; color: #fff; flex-shrink: 0;
}
.calc__cashback.is-on .calc__cashback-box { background: var(--accent); border-color: var(--accent); }
.calc__cashback-label { flex: 1; font-size: 13.5px; line-height: 1.35; }
.calc__cashback-badge { color: var(--accent); font-size: 14px; flex-shrink: 0; }
.calc__disclaimer { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0; max-width: 46ch; }

.calc__total-num { font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: -0.02em; color: var(--green); line-height: 1.05; margin-top: 2px; }
.calc__chart { width: 100%; height: auto; display: block; margin-top: 14px; }
.calc__legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.calc__legend span { display: inline-flex; align-items: center; gap: 8px; }
.calc__legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.calc__cta { width: 100%; justify-content: center; margin-top: 22px; }

/* ---------- Design-review fixes (2026-07) ---------- */
/* Photos rendered as background-image divs (cards, detail hero) — :has(>img)
   can't detect them, so hide the striped placeholder explicitly. */
.photo--img::before { display: none; }

/* Status pill over a photo needs a solid chip to stay readable on light skies. */
.card__photo .pill { background: #fff; box-shadow: var(--shadow-sm); }

/* Detail fact strip: keep a compact 3-across row on phones instead of three
   full-screen stacked tiles. */
@media (max-width: 640px) {
  .stats--facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .stats--facts .stat { padding: 14px 12px; }
  .stats--facts .stat__label { min-height: 0; font-size: 12px; }
  .stats--facts .stat__value { font-size: 22px; }
  .stats--facts .stat__value small { font-size: 12px; }
}

/* Featured founder card: mini fact row under the bio. */
.team-lead__facts {
  display: flex; gap: 32px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule);
}
.team-lead__facts > div { display: grid; gap: 2px; }
.team-lead__facts strong { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.team-lead__facts span { font-size: 12px; color: var(--ink-3); }
@media (max-width: 720px) { .team-lead__facts { justify-content: center; gap: 24px; } }

/* How-it-works bond-flow diagram — responsive, locale-aware (replaces the legacy fixed SVG). */
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 8px 0 16px; }
.flow__node { flex: 1 1 190px; min-width: 160px; background: #fff; border: 1px solid var(--rule-strong); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 3px; }
.flow__node--accent { border-color: var(--accent); background: var(--blue-tint); }
.flow__n { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--accent); }
.flow__t { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-top: 2px; }
.flow__s { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.flow__arrow { flex: 0 0 auto; min-width: 72px; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--accent); }
.flow__arrow > span { font-size: 22px; font-weight: 700; line-height: 1; }
.flow__arrow small { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.flow__return { margin-bottom: 20px; border: 1.5px solid var(--accent); border-radius: 14px; padding: 16px 20px; background: var(--blue-tint); display: flex; flex-direction: column; gap: 6px; }
.flow__return-k { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.flow__return-v { font-size: 15px; color: var(--ink); line-height: 1.55; }
@media (max-width: 720px) {
  .flow { flex-direction: column; }
  .flow__arrow { transform: rotate(90deg); margin: -4px 0; }
  .flow__arrow small { display: none; }
}
@media (max-width: 720px) { .flow__node { flex: 0 0 auto; } }

/* How-it-works "why" legend — dark text for the light section (the legacy .bigflow__legend was white-on-dark). */
.flow-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }
.flow-legend > div { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.flow-legend strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 700; font-size: 15px; }
@media (max-width: 720px) { .flow-legend { grid-template-columns: 1fr; gap: 18px; margin-top: 22px; padding-top: 20px; } }

/* Clickable gallery → fullscreen lightbox (2026-07 review: "фотки не тыкаются"). */
.gallery-item__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 4px; overflow: hidden; }
.gallery-item__btn .photo { transition: transform 0.25s ease; }
.gallery-item__btn:hover .photo { transform: scale(1.03); }
.gallery-item__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 14, 24, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 4vw; animation: lb-fade 0.15s ease;
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__img { max-width: min(1100px, 94vw); max-height: 88vh; object-fit: contain; border-radius: 4px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6); }
.lightbox__close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox__close:hover { background: rgba(255,255,255,0.22); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.12); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.lightbox__nav--prev { left: 20px; } .lightbox__nav--next { right: 20px; }
.lightbox__cap { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: 90vw; text-align: center; background: rgba(0,0,0,0.5); color: #fff; font-size: 13.5px; padding: 8px 16px; border-radius: 999px; }
@media (max-width: 640px) { .lightbox__nav { width: 42px; height: 42px; font-size: 28px; } .lightbox__nav--prev { left: 8px; } .lightbox__nav--next { right: 8px; } }

/* Home trust row with the monthly-payout tile — five across, then wraps. */
.stats--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .stats--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stats--5 { grid-template-columns: 1fr; } }

/* ---------- Accessibility & motion (audit fixes 2026-08-28) ---------- */
/* Skip link — hidden until keyboard-focused. */
.skip-link {
  position: fixed; left: 8px; top: -60px; z-index: 200;
  background: var(--accent); color: #fff; padding: 10px 16px;
  border-radius: var(--r-sm); font: 600 14px/1 var(--sans); text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }
main#main { scroll-margin-top: 88px; }
main#main:focus { outline: none; }

/* Calculator amount field: visible focus ring (its inner input clears its own outline). */
.calc__input:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }

/* Touch devices: meet the 44px target on compact controls (desktop mouse keeps compact sizes). */
@media (pointer: coarse) {
  .btn--sm { min-height: 44px; }
  .detail__tab, .chip, .nav-desktop__link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Respect reduced-motion: stop the infinite hero pulse + smooth scroll, and make the
   remaining transitions/animations effectively instant. End-states still apply, so
   hover/focus feedback is preserved — only the animation is removed. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-pulse, [class*="pulse"] { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}