/* =============================================================================
   financniradkyne.cz — redesign 2026, paleta „cihla na papíru“
   Implementace design handoffu (design_handoff_financniradkyne).

   Načítá se PO dist/css/style.min.css, takže na starých stránkách (homepage
   z ACF bloků) přebarvuje původní třídy a na přepsaných šablonách (landing,
   magazín, hlavička, patička, formulář) stylu vládne sám.

   KLÍČ K CELÉMU VZHLEDU: pálená cihla #a7482c jako JEDINÝ akcent na teplém
   skoro bílém papíru #fbfaf7. Žádné gradienty, žádné zaoblení, žádné stíny —
   hierarchii dělají 2px linky a plochy. Kdo sem přidá radius nebo box-shadow,
   rozbije to, co drží celek pohromadě.

   Třídy s prefixem .fr- zůstaly z předchozí verze zachované do posledního
   jména. Není to setrvačnost: váže se na ně Twig, redesign.js i selektory
   skillu /test, takže přejmenování by znamenalo měnit kontrakt formuláře kvůli
   barvám. Ponechané třídy bez prefixu (.counter, .range__slider,
   .error-checkbox, .js-accordion, .mag-*) jsou HOOKY původního
   dist/js/scripts.min.js a šablon článků.
   ============================================================================= */

/* ---------- Písmo Archivo z vlastní domény ----------

   Dřív šlo z Google Fonts: CSS z fonts.googleapis.com blokovalo první
   vykreslení (nové spojení na cizí doménu: DNS, TCP, TLS) a samotné soubory
   šly z další domény (fonts.gstatic.com), takže Archivo naskočilo ještě
   později. Z vlastní domény jde písmo po spojení, které už je otevřené kvůli
   HTML (Clarity 21.–23. 9. 2026, bod 5: hlavní obsah se na mobilu načítal 4 s).

   Soubory jsou stažené z Google Fonts (Archivo v25, proměnná osa
   wght 100–900, podmnožiny latin a latin-ext – bez latin-ext by čeština
   měla háčky v jiném písmu). Deklarace jsou taky jako u Googlu, zvlášť
   400, 600 a 800, takže se vzhled nemění: 300 a 500 ze starého CSS se dál
   kreslí jako 400 a 700 jako 800. Kdo sem napíše rozsah „400 800“, změní
   tloušťku tučného textu v článcích.

   Licence SIL OFL 1.1 (fonts/OFL.txt) vlastní hosting dovoluje. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap;
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Barvy — papír a cihla. Hodnoty jsou z tokens.json, ne od oka. */
  --fr-bg:          #fbfaf7;  /* podklad stránky */
  --fr-surface:     #f1efea;  /* karta formuláře, boxy */
  --fr-ink:         #1e1a16;  /* text */
  --fr-ink-2:       rgba(30, 26, 22, .78);  /* běžný text */
  --fr-ink-lead:    rgba(30, 26, 22, .80);  /* perex */
  --fr-ink-muted:   rgba(30, 26, 22, .70);  /* meta, popisky */
  /* Linky a rámečky. Schválně rgba a ne color-mix: výsledek je stejný,
     ale projde i prohlížečem, který color-mix neumí. */
  --fr-divider:     rgba(30, 26, 22, .40);
  --fr-divider-soft:rgba(30, 26, 22, .18);

  --fr-accent:      #a7482c;  /* tlačítka, čísla, odrážky, CTA pás */
  --fr-accent-700:  #883a22;  /* hover tlačítka, kicker, odkazy, chyby */
  --fr-accent-800:  #692c1a;  /* active */
  --fr-accent-100:  #f7e9e3;
  --fr-accent-200:  #eed1c5;

  --fr-neutral-100: #f8f4ee;
  --fr-neutral-200: #ebe6dd;
  --fr-neutral-300: #d9d3c8;

  /* Typografie — jediné písmo. Nadpisy vždy 800. */
  --fr-font: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Odstupy */
  --fr-s1: 4px;  --fr-s2: 8px;  --fr-s3: 12px; --fr-s4: 16px;
  --fr-s5: 24px; --fr-s6: 32px; --fr-s7: 40px; --fr-s8: 56px; --fr-s9: 64px;

  --fr-max: 1200px;
  --fr-pad: clamp(20px, 5vw, 72px);
  --fr-measure: 60ch;

  /* Radius 0 všude. Proměnné zůstávají, aby staré deklarace v původním CSS
     měly co číst a nespadly na výchozí hodnotu s rohy. */
  --fr-r1: 0; --fr-r2: 0; --fr-r3: 0; --fr-r4: 0; --fr-r5: 0;

  /* ---- Přepsané proměnné PŮVODNÍHO stylesheetu ----

     dist/css/style.css si drží vlastní :root a řídí se jím na stovkách míst
     (body, pole, tlačítka, magazín). Nejlevnější cesta, jak celý starý web
     převléct, je přepsat rovnou tyhle tři proměnné: redesign.css se načítá
     po něm, takže na stejné specificitě vyhrává a nikde se nemusí přebíjet
     jednotlivé selektory ani sahat po !important.

     Bez tohohle by zbytek webu zůstal v Outfitu — jenže ten se od redesignu
     už ani nestahuje (viz dequeue ve lib/redesign-assets.php), takže by
     spadl na Arial a stránka by měla dvě různá písma. */
  --font-default: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --text-color-default: rgba(30, 26, 22, .78);
  --bg-body: #fbfaf7;
}

/* ---------- Základ ---------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { background: var(--fr-bg); }

.fr-scope, .fr-scope * { box-sizing: border-box; }

.fr-scope {
  font-family: var(--fr-font);
  color: var(--fr-ink-2);
  font-size: 15px;
  line-height: 1.6;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
}

.fr-in { width: 100%; max-width: var(--fr-max); margin: 0 auto; padding-inline: var(--fr-pad); }
.fr-in--narrow { max-width: 900px; }

.fr-scope h1, .fr-scope h2, .fr-scope h3, .fr-scope h4 {
  font-family: var(--fr-font);
  font-weight: 800;
  color: var(--fr-ink);
  letter-spacing: -.015em;
  line-height: 1.1;
  margin: 0 0 var(--fr-s3);
  text-wrap: pretty;
}
/* Optické zarovnání: velká verzálka má vlevo vzduch, který nadpis proti
   ostatnímu textu opticky odsazuje. Záporná marže ho srovná. */
.fr-scope h1 { font-size: clamp(38px, 5.2vw, 68px); line-height: 1.06; letter-spacing: -.02em; margin-left: -.05em; }
.fr-scope h2 { font-size: clamp(28px, 3.2vw, 40px); max-width: 16ch; }
.fr-scope h3 { font-size: clamp(20px, 1.8vw, 22px); line-height: 1.2; letter-spacing: -.01em; }
.fr-scope p  { margin: 0 0 var(--fr-s4); max-width: var(--fr-measure); }
.fr-scope a  { color: var(--fr-accent-700); text-decoration: underline; text-underline-offset: 2px; }
.fr-scope a:hover { color: var(--fr-accent); }

/* Odkazy, které mají vypadat jako tlačítko, značka nebo telefon — ne jako
   odkaz v textu. Selektor `.fr-scope a` má specificitu 0-1-1 a přebil by
   samotné `.fr-cta__btn` (0-1-0): tlačítko v cihlovém pásu pak mělo tmavě
   červený podtržený text na cihlovém pozadí, tedy prakticky nečitelný.
   `.fr-scope a.trida` je 0-2-1 a vyhrává, aniž by se sáhlo po !important. */
.fr-scope a.fr-btn,
.fr-scope a.fr-cta__btn,
.fr-scope a.fr-nav__cta,
.fr-scope a.fr-nav__phone,
.fr-scope a.fr-header__logo,
.fr-scope a.fr-footer__phone,
.fr-scope a.fr-bar__call,
.fr-scope a.mag-cta__odkaz { text-decoration: none; }

.fr-scope a.fr-btn,
.fr-scope a.fr-cta__btn,
.fr-scope a.fr-nav__cta { color: var(--fr-bg); }
.fr-scope a.fr-btn:hover,
.fr-scope a.fr-nav__cta:hover { color: var(--fr-bg); }
.fr-scope a.fr-cta__btn:hover { color: var(--fr-accent); }
.fr-scope a.fr-btn--ghost,
.fr-scope a.fr-btn--ghost:hover { color: var(--fr-ink); }
.fr-scope a.fr-nav__phone,
.fr-scope a.fr-header__logo,
.fr-scope a.fr-bar__call { color: var(--fr-ink); }
.fr-scope a.fr-nav__phone:hover,
.fr-scope a.fr-header__logo:hover { color: var(--fr-accent); }
.fr-scope strong { color: var(--fr-ink); font-weight: 600; }
.fr-scope :focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; }

/* Plnoformátová 2px linka mezi sekcemi — nese celou hierarchii stránky.
   Dělá se rámečkem sekce, ne elementem <hr>, aby se kvůli barvám nemusely
   přepisovat šablony. */
.fr-rule { border: 0; border-top: 2px solid var(--fr-divider); margin: 0; }

.fr-kicker {
  display: block; font-size: 13px; line-height: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fr-accent-700); font-weight: 600;
  margin-bottom: var(--fr-s4);
}
.fr-micro {
  font-size: 12px; line-height: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fr-ink-muted);
}

.fr-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--fr-accent); color: var(--fr-bg); padding: 12px 18px;
  font-weight: 600; text-decoration: none;
}
.fr-skip:focus { left: 0; }

/* Fotografie: černobíle, poměr 4:3. Barevná fotka v téhle paletě přebije
   cihlový akcent a stránka se rozpadne na dvě soupeřící barvy. */
.fr-photo { margin: 0; position: relative; }
.fr-photo img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}
.fr-photo figcaption {
  position: absolute; left: 0; bottom: 0; padding: 4px 8px;
  background: var(--fr-bg); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fr-ink-muted);
}

/* ---------- Hlavička ---------- */

.fr-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--fr-bg);
  border-bottom: 2px solid var(--fr-divider);
}
.fr-header__in {
  max-width: var(--fr-max); margin: 0 auto; padding: 12px var(--fr-pad);
  display: flex; align-items: center; gap: var(--fr-s5);
}
.fr-header__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; margin-right: auto; }
/* Logo je zelené. Dokud nedodá klient jednobarevnou variantu (handoff to
   doporučuje), srazí se odbarvením — druhá barva by paletu rozbila. */
.fr-header__logo img { display: block; height: 24px; width: auto; filter: grayscale(1) brightness(.35); }
.fr-header__logo span { color: var(--fr-ink); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }

.fr-nav { display: flex; align-items: center; gap: var(--fr-s5); }
.fr-nav__list { display: flex; align-items: center; gap: var(--fr-s5); margin: 0; padding: 0; list-style: none; }
.fr-nav__list a {
  display: block; color: var(--fr-ink-2); font-weight: 400; font-size: 14px; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
}
.fr-nav__list a:hover, .fr-nav__list a:focus-visible { color: var(--fr-accent); }
.fr-nav__list a[aria-current="page"] { color: var(--fr-accent); }
.fr-nav__phone { color: var(--fr-ink); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.fr-nav__cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px;
  background: var(--fr-accent); color: var(--fr-bg); text-decoration: none;
  font-weight: 600; font-size: 15px; padding: 9px 18px; white-space: nowrap;
}
.fr-nav__cta:hover { background: var(--fr-accent-700); color: var(--fr-bg); }
.fr-nav__cta:active { background: var(--fr-accent-800); }
.fr-nav__cta::after { content: "→"; font-size: 14px; }

.fr-nav__toggle {
  display: none; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--fr-divider); background: transparent; cursor: pointer; padding: 0;
}
.fr-nav__toggle span { display: block; width: 20px; height: 2px; margin: 4px auto; background: var(--fr-ink); }

/* Pod 680px se odkazy skrývají — je to landing page, odkazy jsou v patičce.
   Zůstává značka a CTA, protože to jediné na hlavičce vydělává. */
@media (max-width: 680px) {
  .fr-nav__toggle { display: block; }
  .fr-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fr-bg); border-bottom: 2px solid var(--fr-divider);
    padding: var(--fr-s4) var(--fr-pad) var(--fr-s5);
  }
  .fr-nav[hidden] { display: none; }
  .fr-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .fr-nav__list a { padding: 14px 0; font-size: 20px; font-weight: 800; border-bottom: 1px solid var(--fr-divider-soft); }
  .fr-nav__phone { padding: 14px 0; font-size: 18px; }
  .fr-nav__cta { justify-content: center; padding: 14px; font-size: 16px; margin-top: var(--fr-s4); }
  .fr-header__in { position: relative; gap: var(--fr-s3); }
  /* CTA v hlavičce zůstává vidět i se zabaleným menu. */
  .fr-header__in > .fr-nav__cta { order: 2; }
}

/* ---------- Hero ---------- */

.fr-hero { background: var(--fr-bg); padding: var(--fr-s8) 0 var(--fr-s9); }
.fr-hero__grid {
  max-width: var(--fr-max); margin: 0 auto; padding-inline: var(--fr-pad);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 40px clamp(32px, 5vw, 80px); align-items: start;
}
.fr-hero h1 { color: var(--fr-ink); margin-bottom: var(--fr-s5); }
.fr-hero__badge {
  display: block; font-size: 13px; line-height: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fr-accent-700); font-weight: 600;
  margin-bottom: var(--fr-s4);
}
.fr-hero__perex { color: var(--fr-ink-lead); font-size: 17px; line-height: 1.6; max-width: 52ch; margin-bottom: var(--fr-s5); }
.fr-hero__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--fr-s4) var(--fr-s5); margin: 0; padding: 0; list-style: none;
}
.fr-hero__list li {
  display: flex; gap: var(--fr-s3); align-items: flex-start;
  color: var(--fr-ink); font-size: 16px; line-height: 1.4; font-weight: 600;
}
/* Čtvercová odrážka. Kolečko ani fajfka sem nepatří — v téhle paletě není
   jediný kulatý tvar. */
.fr-hero__list li::before {
  content: ""; flex: none; width: 10px; height: 10px;
  background: var(--fr-accent); margin-top: 7px;
}
/* V jednom sloupci jde formulář hned pod nadpis. Dřív byl až pod perexem
   a odrážkami, na mobilu celý pod cookie lištou a polovina lidí k němu
   nedoscrollovala (Clarity 21.–23. 9. 2026). .fr-hero__text se rozpustí
   (display: contents), takže jeho části jsou sourozenci formuláře a dají
   se přeskládat bez změny pořadí v HTML. */
@media (max-width: 880px) {
  .fr-hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .fr-hero__text { display: contents; }
  .fr-hero__badge { order: 1; }
  .fr-hero h1 { order: 2; }
  .fr-hero__form { order: 3; margin-bottom: var(--fr-s6); }
  .fr-hero__perex { order: 4; }
  .fr-hero__list { order: 5; }
}

/* ---------- Lišta důvěry: čísla a banky ---------- */

.fr-trust { padding: var(--fr-s6) 0; border-top: 2px solid var(--fr-divider); }
.fr-trust__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--fr-s5) clamp(32px, 5vw, 80px);
}
.fr-stat__num {
  font-size: clamp(34px, 3.4vw, 48px); line-height: 1; font-weight: 800;
  letter-spacing: -.02em; color: var(--fr-accent); margin-left: -.045em;
}
.fr-stat__label { margin-top: var(--fr-s2); font-size: 12px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--fr-ink-muted); }

.fr-banks { margin-top: var(--fr-s6); padding-top: var(--fr-s5); border-top: 2px solid var(--fr-divider); }
.fr-banks__label { font-size: 12px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--fr-ink-muted); margin-bottom: var(--fr-s4); }
.fr-banks__row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--fr-s4) var(--fr-s5); align-items: center;
}
/* Loga jsou od každé banky jinak: část má průhledné pozadí, část bílé
   a jedno je dokonce JPEG. Na teplém papíru by se z nich staly bílé dlaždice
   v mírně jiných odstínech. `multiply` nechá světlé pozadí splynout s papírem
   a tmavou kresbu zachová, takže sada vypadá jako jedna vrstva. Funguje to
   proto, že všechna loga mají tmavou kresbu na světlém — až přijdou oficiální
   soubory z presskitů, ověřit; bílé logo na tmavém by `multiply` sežral. */
.fr-banks__row img {
  display: block; height: 48px; width: 100%; object-fit: contain; padding: 6px;
  filter: grayscale(1) contrast(1.05); opacity: .85;
}

/* ---------- Formulářová karta ---------- */

.fr-card {
  background: var(--fr-surface);
  border: 2px solid var(--fr-divider);
  padding: clamp(18px, 3vw, 28px);
  display: flex; flex-direction: column; gap: 20px;
  position: relative;
}
/* Přetečení karty pod hero je pryč, a vědomě (viz ZADANI-REDESIGN.md 2.4).
   Novou kompozici drží plnoformátové 2px linky mezi sekcemi, ne záporná
   marže — a reprezentativní příklad zůstává hned pod formulářem v .fr-cols,
   takže povinný údaj se od nabídky neodtrhl. */
.fr-card--overflow { margin-bottom: 0; }

.fr-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fr-s3); }
.fr-card__head h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 0; max-width: none; }
.fr-card__step { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fr-ink-muted); white-space: nowrap; }
.fr-progress { display: flex; gap: 4px; margin: 0; }
.fr-progress span { height: 3px; flex: 1; background: var(--fr-divider-soft); }
.fr-progress span.is-done { background: var(--fr-accent); }

/* Částka: stepper ± a pole s číslem. Hook .counter drží původní
   dist/js/scripts.min.js, proto se třída nepřejmenovala. */
.fr-amount__label { font-size: 15px; font-weight: 600; color: var(--fr-ink); margin: 0; }
.fr-amount .counter { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--fr-divider); background: var(--fr-bg); }
.fr-amount .counter .minus,
.fr-amount .counter .plus {
  flex: none; width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; font-size: 20px; line-height: 1; color: var(--fr-ink);
  background: transparent; border: 0;
}
.fr-amount .counter .minus { border-right: 1px solid var(--fr-divider); }
.fr-amount .counter .plus  { border-left: 1px solid var(--fr-divider); }
.fr-amount .counter .minus:hover,
.fr-amount .counter .plus:hover { background: var(--fr-neutral-200); }
.fr-amount .counter__value { flex: 1; display: flex; }
.fr-amount .counter__value input {
  width: 100%; min-height: 44px; border: 0; background: transparent; text-align: center;
  font-family: var(--fr-font); font-size: 20px; font-weight: 800; letter-spacing: -.01em;
  color: var(--fr-ink); font-feature-settings: 'tnum' 1; padding: 0 var(--fr-s2);
}
.fr-amount .counter__value input:focus { outline: 2px solid var(--fr-accent); outline-offset: -2px; }

.fr-range { margin: 0; position: relative; }
/* Původní stylesheet posuvníku kreslí 6px zelenou dráhu se zaoblením a jako
   jezdec 50px obrázek dist/images/range.svg — zelenou pilulku. V paletě, kde
   není jediný kulatý tvar ani druhá barva, to bije do očí víc než cokoli
   jiného na stránce, proto se přepisuje celé. Barvu dráhy dopisuje JS inline
   (paintSlider), tohle řeší tvar a jezdce. */
.fr-range .range__slider,
.fr-range .fr-range__ovladac {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 0; outline: 0; margin: var(--fr-s2) 0;
  background: linear-gradient(to right, var(--fr-accent) 0%, rgba(30, 26, 22, .18) 0%);
  accent-color: var(--fr-accent); cursor: pointer;
}
.fr-range .range__slider::-webkit-slider-thumb,
.fr-range .fr-range__ovladac::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 0; border: 0;
  background: var(--fr-accent) none; cursor: pointer;
}
.fr-range .range__slider::-moz-range-thumb,
.fr-range .fr-range__ovladac::-moz-range-thumb {
  -moz-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 0; border: 0;
  background: var(--fr-accent) none; cursor: pointer;
}
.fr-range .range__slider:focus-visible,
.fr-range .fr-range__ovladac:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 4px; }
/* S nelineární stupnicí (data-fr-skala) je vidět .fr-range__ovladac z redesign.js
   a původní posuvník jen nese částku. Atribut hidden by přebilo cokoli
   s display, proto pojistka. */
.fr-range .range__slider[hidden] { display: none; }

/* Rychlá volba částky pod stepperem (loan-form.twig, `rychla_volba`). Bez JS
   tlačítka nic nedělají, proto se ukazují jen ve větvi s .fr-js. */
.fr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -8px; }
.fr-chips button {
  flex: 1 1 auto; min-height: 36px; padding: 0 10px; border: 1px solid var(--fr-divider); border-radius: 0;
  background: var(--fr-bg); cursor: pointer;
  font-family: var(--fr-font); font-size: 14px; font-weight: 600; color: var(--fr-ink);
}
.fr-chips button:hover { background: rgba(30, 26, 22, .07); }
.fr-chips button[aria-pressed="true"] { background: var(--fr-accent); border-color: var(--fr-accent); color: var(--fr-bg); }
html:not(.fr-js) .fr-chips { display: none; }
/* Krajní popisky mají v původním CSS position:absolute a bottom:-35px, takže
   by visely mimo. Tady se vrací do toku a rozestoupí se flexem. */
.fr-range__legend { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .06em; color: var(--fr-ink-muted); }
.fr-range__legend .range__value { position: static; bottom: auto; left: auto; right: auto; }

/* Kalkulace. Řádek se splátkou ohraničený 2px linkami nahoře i dole — je to
   jediné místo formuláře, kde se ukazuje číslo, které návštěvník hledá. */
.fr-calc { border-top: 2px solid var(--fr-divider); border-bottom: 2px solid var(--fr-divider); padding: var(--fr-s4) 0; }
.fr-calc__terms { display: flex; border: 1px solid var(--fr-divider); margin-bottom: var(--fr-s4); }
.fr-calc__terms button {
  flex: 1; min-height: 40px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--fr-font); font-size: 14px; font-weight: 600; color: var(--fr-ink);
}
.fr-calc__terms button + button { border-left: 1px solid var(--fr-divider); }
.fr-calc__terms button:hover { background: rgba(30, 26, 22, .07); }
.fr-calc__terms button[aria-pressed="true"] { background: var(--fr-accent); color: var(--fr-bg); }
.fr-calc__rows { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fr-s4); flex-wrap: wrap; }
.fr-calc__rows--buyout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.fr-calc__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fr-ink-muted); margin-bottom: 6px; }
.fr-calc__value {
  font-size: clamp(26px, 2.6vw, 32px); line-height: 1; font-weight: 800; letter-spacing: -.015em;
  color: var(--fr-accent); font-feature-settings: 'tnum' 1;
}
.fr-calc__side { font-size: 13px; line-height: 1.55; color: var(--fr-ink-muted); text-align: right; }
.fr-calc__side strong { color: var(--fr-ink); }
.fr-calc__note { font-size: 12px; line-height: 1.5; color: var(--fr-ink-muted); margin: var(--fr-s3) 0 0; max-width: none; }
.fr-calc--plain .fr-calc__rows { justify-content: flex-start; gap: clamp(24px, 5vw, 64px); }

/* ---------- Pole formuláře ---------- */

.fr-step { display: flex; flex-direction: column; gap: 20px; }
.fr-step[hidden] { display: none; }
/* Bez JavaScriptu se kroky neskrývají — formulář pak odejde kompletní
   na jedno odeslání, místo aby se návštěvník zasekl na tlačítku, které nic
   nedělá. Proto se hidden respektuje jen ve větvi s .fr-js. */
html:not(.fr-js) .fr-step[hidden] { display: flex; }
html:not(.fr-js) .fr-card__step,
html:not(.fr-js) .fr-progress,
html:not(.fr-js) [data-fr-next],
html:not(.fr-js) [data-fr-back] { display: none; }

.fr-legend { font-size: 15px; font-weight: 600; color: var(--fr-ink); padding: 0; margin-bottom: var(--fr-s3); }
.fr-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--fr-divider); }
.fr-choice--quad { grid-template-columns: repeat(auto-fit, minmax(min(50%, 90px), 1fr)); }
.fr-choice label { position: relative; display: block; cursor: pointer; }
.fr-choice label + label { border-left: 1px solid var(--fr-divider); }
.fr-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fr-choice span {
  display: flex; align-items: center; justify-content: center; min-height: 40px;
  font-size: 14px; font-weight: 600; color: var(--fr-ink); text-align: center; padding: 0 var(--fr-s2);
}
.fr-choice label:hover span { background: rgba(30, 26, 22, .07); }
.fr-choice input:checked + span { background: var(--fr-accent); color: var(--fr-bg); }
.fr-choice input:focus-visible + span { outline: 2px solid var(--fr-accent); outline-offset: -2px; }

.fr-field { display: flex; flex-direction: column; }
/* Pole, které redesign.js schová (datum narození u nevlastníka). Bez toho
   by display: flex výš přebil atribut hidden a pole by zůstalo vidět. */
.fr-field[hidden] { display: none; }
.fr-field label { font-size: 15px; font-weight: 600; color: var(--fr-ink); margin-bottom: var(--fr-s2); }
/* Poznámka u nepovinného pole (IČO) — slabší než samotný popisek. */
.fr-field__optional { font-weight: 400; color: var(--fr-ink-muted); }
.fr-field input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--fr-divider); background: var(--fr-bg);
  font-family: var(--fr-font); font-size: 15px; color: var(--fr-ink);
}
.fr-field input::placeholder { color: rgba(30, 26, 22, .45); }
.fr-field input:hover { border-color: rgba(30, 26, 22, .45); }
.fr-field input:focus { outline: 0; border-color: var(--fr-accent); box-shadow: inset 0 0 0 1px var(--fr-accent); }
.fr-field__note { font-size: 12px; line-height: 1.5; color: var(--fr-ink-muted); margin-top: 6px; }
/* Chybová hláška má vlastní místo pod polem už v klidovém stavu, ať se na ni
   nemusí layout překreslovat. */
.fr-field__error { font-size: 12px; line-height: 1.5; color: var(--fr-accent-700); font-weight: 600; margin-top: 6px; }
.fr-field__error:empty { display: none; }
.fr-field.is-invalid input { border-color: var(--fr-accent-700); box-shadow: inset 0 0 0 1px var(--fr-accent-700); }

.fr-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--fr-s4); }
.fr-field--pc { max-width: 100%; }

/* Hook původního skriptu na chybové hlášky u voleb a adresy. */
.error-checkbox { display: none; font-size: 12px; line-height: 1.5; color: var(--fr-accent-700); font-weight: 600; margin-top: 6px; }
.error-checkbox.is-visible, .error-checkbox[style*="block"] { display: block; }

/* Nepovinný souhlas s nabídkami. Zaškrtávátko 16px, accent-color, nic víc —
   žádné zvýraznění, aby nepůsobilo jako povinná brána. */
.fr-nabidky { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--fr-ink-muted); cursor: pointer; }
.fr-nabidky input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--fr-accent); }
.fr-consent-note { font-size: 12px; line-height: 1.5; color: var(--fr-ink-muted); margin: 0; max-width: none; }

/* Honeypot a skrytá pole. Musí zůstat v DOM, jen mimo obraz i mimo
   čtečku — display:none by některé roboty naopak navedl. */
.fr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Tlačítka ---------- */

.fr-btn, .fr-scope .fr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 22px;
  background: var(--fr-accent); color: var(--fr-bg); border: 0; border-radius: 0;
  font-family: var(--fr-font); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
}
.fr-btn::after { content: "→"; font-size: 16px; }
.fr-btn:hover, .fr-scope .fr-btn:hover { background: var(--fr-accent-700); color: var(--fr-bg); }
.fr-btn:active { background: var(--fr-accent-800); }
.fr-btn[disabled] { opacity: .45; cursor: default; }
.fr-btn--block { width: 100%; }
.fr-btn--ghost {
  background: transparent; color: var(--fr-ink); border: 1px solid var(--fr-divider);
}
.fr-btn--ghost::after { content: "←"; order: -1; }
.fr-btn--ghost:hover, .fr-scope .fr-btn--ghost:hover { background: var(--fr-neutral-200); color: var(--fr-ink); }

.fr-actions { display: flex; gap: var(--fr-s3); }
.fr-actions .fr-btn--ghost { flex: none; }
.fr-actions .form__btn { flex: 1; }

/* Tlačítka formuláře nad nabídkou našeptávače (20). Nabídka zůstávala po
   vyplnění adresy otevřená a kdo pak ťukl na „Požádat o půjčku“, trefil místo
   tlačítka adresu z nabídky (README, sekce 22, test 24. 9. 2026, tehdy
   s Foxentry). Nic nesmí zakrývat formulář (Clarity 21.–23. 9. 2026, bod 2). */
.fr-actions { position: relative; z-index: 21; }

/* Našeptávač adres z Mapy.cz (redesign.js, initAdresa; od 20. 10. 2026).
   Zapnutý je jen s klíčem ve formuláři. Nabídka je pod lepivou hlavičkou (40)
   a lepivým CTA (30) a tlačítka formuláře (21) jsou nad ní. */
.fr-field--navrhy { position: relative; }
.fr-suggest {
  position: absolute; z-index: 20; margin: 0; padding: 0; list-style: none;
  max-height: 260px; overflow-y: auto;
  background: var(--fr-bg); border: 1px solid var(--fr-divider); box-shadow: 0 8px 24px rgba(30, 26, 22, .14);
}
.fr-suggest[hidden] { display: none; }
.fr-suggest li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; cursor: pointer; font-size: 15px; color: var(--fr-ink); }
.fr-suggest li + li { border-top: 1px solid var(--fr-divider-soft); }
.fr-suggest li span { font-size: 12px; color: var(--fr-ink-muted); }
.fr-suggest li:hover, .fr-suggest li[aria-selected="true"] { background: var(--fr-neutral-200); }
/* Tlačítko s návrhem opravy u hlášky (překlep v e-mailu). */
.fr-field__fix {
  margin-left: 4px; padding: 2px 8px; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--fr-accent-700); background: none; border: 1px solid var(--fr-accent-700);
}
.fr-field__fix:hover { background: var(--fr-accent-100); }
.fr-step__hint { font-size: 12px; line-height: 1.5; color: var(--fr-ink-muted); margin: 0; max-width: none; }

/* ---------- Co se stane po odeslání ---------- */

.fr-next { border-top: 2px solid var(--fr-divider); padding-top: var(--fr-s4); }
.fr-next__title { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fr-ink-muted); margin: 0 0 var(--fr-s3); max-width: none; }
.fr-next ol { margin: 0; padding: 0; list-style: none; counter-reset: fr-next; display: flex; flex-direction: column; gap: var(--fr-s3); }
.fr-next li {
  counter-increment: fr-next; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--fr-s3);
  font-size: 13px; line-height: 1.5; color: var(--fr-ink-muted);
}
.fr-next li::before {
  content: counter(fr-next, decimal-leading-zero);
  font-size: 13px; font-weight: 800; color: var(--fr-accent); font-feature-settings: 'tnum' 1;
}

/* Hláška po odeslání */
.fr-done { border: 2px solid var(--fr-accent); background: var(--fr-accent-100); padding: clamp(18px, 3vw, 28px); }
.fr-done .success-notice { color: var(--fr-ink); font-size: 16px; line-height: 1.6; }
.error-notice { border: 2px solid var(--fr-accent-700); background: var(--fr-accent-100); padding: var(--fr-s4); color: var(--fr-accent-700); font-size: 14px; }

/* ---------- Druhá šance souhlasu na děkovné stránce (W2) ----------
   Nenápadný pruh pod poděkováním (partial/loan-form.twig, data-fr-druha-sance).
   Obě odpovědi jsou úplně stejná tlačítka: stejná velikost, stejný vzhled,
   vedle sebe. Odmítnout nesmí být těžší ani méně vidět než souhlasit. */
.fr-druha-sance { margin-top: var(--fr-s4); padding: var(--fr-s4) clamp(18px, 3vw, 28px); background: var(--fr-surface); border: 1px solid var(--fr-divider-soft); }
.fr-druha-sance[hidden] { display: none; }
.fr-druha-sance p { margin: 0 0 var(--fr-s3); max-width: var(--fr-measure); }
.fr-druha-sance__otazka { font-weight: 600; color: var(--fr-ink); }
.fr-druha-sance__zneni { font-size: 14px; line-height: 1.5; color: var(--fr-ink-2); }
.fr-druha-sance__poznamka { font-size: 13px; line-height: 1.5; color: var(--fr-ink-muted); }
.fr-druha-sance__tlacitka { display: flex; flex-wrap: wrap; gap: var(--fr-s3); }
.fr-druha-sance .fr-druha-sance__odpoved, .fr-scope .fr-druha-sance .fr-druha-sance__odpoved {
  flex: 1 1 120px; background: transparent; color: var(--fr-ink); border: 1px solid var(--fr-ink-muted);
}
.fr-druha-sance .fr-druha-sance__odpoved::after { content: none; }
.fr-druha-sance .fr-druha-sance__odpoved:hover, .fr-scope .fr-druha-sance .fr-druha-sance__odpoved:hover { background: var(--fr-neutral-200); color: var(--fr-ink); }
.fr-druha-sance p.fr-druha-sance__stav { min-height: 1.5em; margin: var(--fr-s3) 0 0; font-size: 14px; line-height: 1.5; color: var(--fr-ink); }
.fr-druha-sance.is-done { padding-block: var(--fr-s3); }
.fr-druha-sance.is-done p.fr-druha-sance__stav { margin: 0; }

/* ---------- Obsahové sekce ---------- */

.fr-cols { padding: var(--fr-s9) 0; border-top: 2px solid var(--fr-divider); }
.fr-cols__grid {
  max-width: var(--fr-max); margin: 0 auto; padding-inline: var(--fr-pad);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 40px clamp(32px, 5vw, 80px); align-items: start;
}
.fr-cols__main > section { margin-bottom: var(--fr-s8); }
.fr-cols__main > section:last-child { margin-bottom: 0; }
.fr-cols__main h2 { margin-bottom: var(--fr-s4); }
/* Přetečení hera je pryč, tedy i kompenzační odsazení pravého sloupce. */
.fr-cols__aside { padding-top: 0; display: flex; flex-direction: column; gap: var(--fr-s6); }

.fr-list { margin: 0 0 var(--fr-s4); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--fr-s3); }
.fr-list li { display: flex; gap: var(--fr-s3); align-items: flex-start; font-size: 15px; line-height: 1.6; color: var(--fr-ink-2); }
.fr-list li::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--fr-accent); margin-top: 6px; }

.fr-steps { margin: 0; padding: 0; list-style: none; counter-reset: fr-step; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--fr-s5) clamp(32px, 5vw, 80px); }
.fr-steps li { counter-increment: fr-step; border-top: 2px solid var(--fr-divider); padding-top: var(--fr-s3); font-size: 15px; line-height: 1.6; color: var(--fr-ink-2); }
.fr-steps li::before {
  content: counter(fr-step, decimal-leading-zero);
  display: block; font-size: 13px; font-weight: 800; letter-spacing: .06em;
  color: var(--fr-accent); margin-bottom: var(--fr-s2); font-feature-settings: 'tnum' 1;
}

/* Reprezentativní příklad a limity. Tabulka s 1px řádky — povinný údaj
   u nabídky úvěru, proto stojí hned vedle formuláře, ne až pod dotazy. */
.fr-panel { border-top: 2px solid var(--fr-divider); padding-top: var(--fr-s4); }
.fr-panel__head { margin-bottom: var(--fr-s4); }
.fr-panel__head strong { display: block; font-size: 20px; font-weight: 800; color: var(--fr-ink); letter-spacing: -.01em; }
.fr-panel__head span { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fr-ink-muted); }
.fr-panel ul { margin: 0; padding: 0; list-style: none; }
.fr-panel li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--fr-s4);
  padding: 10px 0; border-bottom: 1px solid var(--fr-divider);
  font-size: 14px; color: var(--fr-ink-muted);
}
.fr-panel li:last-child { border-bottom: 0; }
.fr-panel li strong { color: var(--fr-ink); font-weight: 600; font-feature-settings: 'tnum' 1; }
.fr-panel li.is-key strong { color: var(--fr-accent); }
.fr-panel small { display: block; margin-top: var(--fr-s3); font-size: 12px; line-height: 1.5; color: var(--fr-ink-muted); }

/* ---------- Časté dotazy (hook .js-accordion drží původní JS) ---------- */

.fr-faq { padding: var(--fr-s9) 0; border-top: 2px solid var(--fr-divider); }
.fr-faq h2 { margin-bottom: var(--fr-s5); }
.fr-faq .accordion { display: flex; flex-direction: column; }
.fr-faq .accordion__item { border-top: 2px solid var(--fr-divider); }
.fr-faq .accordion__item:last-child { border-bottom: 2px solid var(--fr-divider); }
.fr-faq .accordion__header { cursor: pointer; padding: var(--fr-s4) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--fr-s4); }
.fr-faq .accordion__header h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 800; color: var(--fr-ink); }
.fr-faq .accordion__header::after { content: "⌄"; flex: none; color: var(--fr-accent); font-size: 18px; line-height: 1; }
.fr-faq .accordion__item.is-open .accordion__header::after { content: "⌃"; }
.fr-faq .accordion__content { display: none; }
.fr-faq .accordion__item.is-open .accordion__content { display: block; }
.fr-faq .accordion__helper { padding: 0 0 var(--fr-s4); }
.fr-faq .accordion__helper p { margin: 0; font-size: 15px; line-height: 1.6; max-width: var(--fr-measure); color: var(--fr-ink-2); }

/* ---------- CTA pás ---------- */

.fr-cta { background: var(--fr-accent); color: var(--fr-bg); padding: 72px 0; }
.fr-cta__in { max-width: var(--fr-max); margin: 0 auto; padding-inline: var(--fr-pad); display: flex; align-items: center; justify-content: space-between; gap: var(--fr-s6); flex-wrap: wrap; }
.fr-cta h2 { color: var(--fr-bg); font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; max-width: 22ch; margin: 0; }
.fr-cta__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 18px;
  border: 1px solid var(--fr-bg); color: var(--fr-bg); background: transparent;
  font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.fr-cta__btn:hover { background: var(--fr-bg); color: var(--fr-accent); }
.fr-cta__btn::after { content: "→"; }

/* ---------- Prolinkování ---------- */

.fr-links { padding: var(--fr-s7) 0; border-top: 2px solid var(--fr-divider); }
.fr-links__row { display: flex; flex-wrap: wrap; gap: var(--fr-s4) var(--fr-s5); }
.fr-links__row a {
  display: inline-flex; align-items: center; gap: var(--fr-s2);
  text-decoration: none; font-size: 15px; font-weight: 600; color: var(--fr-accent-700);
}
.fr-links__row a::after { content: "→"; }
.fr-links__row a:hover { color: var(--fr-accent); text-decoration: underline; }

/* ---------- Lepivé CTA na mobilu ---------- */

/* Nad 720px se nezobrazuje vůbec: na desktopu je formulář vedle textu
   a pruh přes celou šířku by jen ukrajoval obraz. */
.fr-bar { display: none; }
@media (max-width: 720px) {
  .fr-bar {
    position: sticky; bottom: 0; z-index: 30;
    display: flex; align-items: center; gap: var(--fr-s3);
    background: var(--fr-bg); border-top: 2px solid var(--fr-divider);
    padding: 10px var(--fr-pad);
  }
  /* Skrývá se, když je formulář na obrazovce — tam už si o sebe říká sám
     (přepíná redesign.js přes IntersectionObserver). */
  .fr-bar[data-fr-bar-hidden] { transform: translateY(110%); pointer-events: none; }
  .fr-bar__text { flex: 1; min-width: 0; }
  .fr-bar__label { font-size: 11px; line-height: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fr-ink-muted); }
  .fr-bar__value { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--fr-ink); font-feature-settings: 'tnum' 1; }
  .fr-bar .fr-btn { min-height: 44px; padding: 10px 16px; font-size: 15px; flex: none; }
  .fr-bar__call {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 1px solid var(--fr-divider); color: var(--fr-ink);
    text-decoration: none; font-size: 18px;
  }
}

/* ---------- Patička ---------- */

.fr-footer { background: var(--fr-bg); border-top: 2px solid var(--fr-divider); padding: 48px 0 32px; }
.fr-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--fr-s6) clamp(32px, 5vw, 80px); }
.fr-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--fr-s3); }
.fr-footer__brand img { display: block; height: 24px; width: auto; filter: grayscale(1) brightness(.35); }
.fr-footer__brand span { font-weight: 800; font-size: 18px; color: var(--fr-ink); letter-spacing: -.01em; }
.fr-footer p { font-size: 13px; line-height: 1.55; color: var(--fr-ink-muted); margin: 0; max-width: 40ch; }
.fr-footer h2 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fr-ink-muted); font-weight: 600; margin: 0 0 var(--fr-s3); max-width: none; }
.fr-footer ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--fr-s2); }
.fr-footer ul a { font-size: 14px; color: var(--fr-ink-2); text-decoration: none; }
.fr-footer ul a:hover { color: var(--fr-accent); text-decoration: underline; }
.fr-footer__phone { font-weight: 600; color: var(--fr-ink) !important; }
.fr-footer p.fr-footer__provozovatel { max-width: none; margin-top: var(--fr-s6); font-size: 12px; }
.fr-footer__bottom {
  margin-top: var(--fr-s6); padding-top: var(--fr-s4); border-top: 2px solid var(--fr-divider);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fr-s3);
  font-size: 12px; color: var(--fr-ink-muted);
}
.fr-footer__bottom a { color: var(--fr-ink-muted); text-decoration: underline; }
.fr-footer__bottom a:hover { color: var(--fr-accent); }
.fr-footer__bottom ul { flex-direction: row; flex-wrap: wrap; gap: var(--fr-s4); }

/* ---------- Vstupní stránka /pujcka/ (test v Google Ads, README sekce 26) ----------

   views/page/vstupni.twig skládá stránku ze stejných dílů jako landing pages
   (.fr-hero, karta formuláře, .fr-panel, .fr-faq). Tady je jen to, čím se
   liší. 82 % kliků z reklamy je z mobilu a tam musí jít nadpis, pod ním
   odrážky a formulář ještě na první obrazovce. Landing pages dávají odrážky
   na mobilu až pod formulář; tady zůstávají nad ním, jen sevřené, a nadpis
   je menší. */

/* Nadpis je skoro dvakrát delší než na landing pages, v plné velikosti by na
   desktopu zabral šest řádků. */
.fr-vstup .fr-hero h1 { font-size: clamp(34px, 3.8vw, 54px); }

@media (max-width: 880px) {
  .fr-vstup .fr-hero { padding-top: var(--fr-s5); }
  .fr-vstup .fr-hero h1 { font-size: clamp(28px, 8vw, 38px); margin-bottom: var(--fr-s4); }
  .fr-vstup .fr-hero__list { order: 3; gap: 6px; margin-bottom: var(--fr-s5); }
  .fr-vstup .fr-hero__list li { font-size: 14px; line-height: 1.35; }
  .fr-vstup .fr-hero__list li::before { width: 8px; height: 8px; margin-top: 5px; }
  .fr-vstup .fr-hero__form { order: 4; }
}

/* Hodnoty v příkladu a limitech jsou doslova z úvodní strany a některé jsou
   celé věty – zarovnané doprava jako tam. */
.fr-vstup .fr-panel li strong { text-align: right; }

/* Patička jen se zákonnými údaji nemá nad sebou mřížku, takže bez odstupu. */
.fr-footer--vstupni p.fr-footer__provozovatel { margin-top: 0; }

/* ---------- Magazín ---------- */

.mag-hlavicka { background: var(--fr-bg); border-bottom: 2px solid var(--fr-divider); padding: var(--fr-s7) 0 var(--fr-s6); }
.mag-drobky { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fr-ink-muted); margin-bottom: var(--fr-s3); }
.mag-drobky a { color: var(--fr-accent-700); text-decoration: none; }
.mag-drobky a:hover { color: var(--fr-accent); text-decoration: underline; }

.mag-rubrika { margin-bottom: var(--fr-s9); }
.mag-rubrika:last-child { margin-bottom: 0; }
.mag-rubrika h2 a { color: var(--fr-ink); text-decoration: none; }
.mag-rubrika h2 a:hover { text-decoration: underline; }

.mag-mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 40px clamp(32px, 5vw, 80px); }
.mag-karta { border-top: 2px solid var(--fr-divider); padding-top: var(--fr-s4); }
.mag-karta__foto { margin: 0 0 var(--fr-s3); }
.mag-karta__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; filter: grayscale(1) contrast(1.08); }
.mag-karta__nazev { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.mag-karta__nazev a { color: var(--fr-ink); text-decoration: none; }
.mag-karta__nazev a:hover { color: var(--fr-accent); text-decoration: underline; }
.mag-karta__perex { margin: var(--fr-s2) 0 0; font-size: 14px; line-height: 1.55; color: var(--fr-ink-muted); }

.mag-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; max-width: 1080px; margin: 0 auto; }
@media (max-width: 1000px) { .mag-layout { grid-template-columns: 1fr; gap: var(--fr-s5); } }

.fr-toc { position: sticky; top: 92px; border-top: 2px solid var(--fr-divider); padding-top: var(--fr-s3); }
.fr-toc[hidden] { display: none; }
.fr-toc strong { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fr-ink-muted); margin-bottom: var(--fr-s3); }
.fr-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--fr-s2); }
.fr-toc a { font-size: 13px; line-height: 1.45; color: var(--fr-ink-muted); text-decoration: none; }
.fr-toc a:hover { color: var(--fr-accent); text-decoration: underline; }
.fr-toc a.is-current { color: var(--fr-accent); font-weight: 600; }
@media (max-width: 1000px) { .fr-toc { display: none; } }

.mag-foto { margin: 0 0 var(--fr-s6); }
.mag-foto img { width: 100%; height: auto; display: block; filter: grayscale(1) contrast(1.08); }
.mag-foto figcaption { padding: 6px 0; font-size: 12px; color: var(--fr-ink-muted); }

.mag-clanek { max-width: 68ch; font-size: 17px; line-height: 1.7; color: var(--fr-ink-2); }
.mag-clanek h2 { font-size: clamp(26px, 2.6vw, 34px); margin: var(--fr-s8) 0 var(--fr-s3); scroll-margin-top: 92px; max-width: 20ch; }
.mag-clanek h3 { font-size: 21px; margin: var(--fr-s6) 0 var(--fr-s2); scroll-margin-top: 92px; }
.mag-clanek p { margin: 0 0 var(--fr-s4); max-width: none; }
.mag-clanek ul, .mag-clanek ol { margin: 0 0 var(--fr-s5); padding-left: 20px; }
.mag-clanek li { margin-bottom: var(--fr-s2); }
.mag-clanek a { color: var(--fr-accent-700); }
.mag-aktualizace { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fr-ink-muted); margin-bottom: var(--fr-s5); }

/* Zvýrazněné bloky. Informační je plocha, varovný se liší cihlovou linkou
   vlevo — druhá barva by v téhle paletě neměla kde vzniknout. */
.mag-box { background: var(--fr-surface); border-left: 4px solid var(--fr-divider); padding: var(--fr-s5); margin: var(--fr-s5) 0; font-size: 15px; }
.mag-box p:last-child { margin-bottom: 0; }
.mag-box__nadpis { font-weight: 800; color: var(--fr-ink); margin-bottom: var(--fr-s2) !important; }
.mag-box--pozor { border-left-color: var(--fr-accent); background: var(--fr-accent-100); }
.mag-box--pozor .mag-box__nadpis { color: var(--fr-accent-700); }

.mag-tabulka-obal { overflow-x: auto; margin: var(--fr-s5) 0; border-top: 2px solid var(--fr-divider); }
.mag-tabulka { width: 100%; border-collapse: collapse; font-size: 14px; }
.mag-tabulka th, .mag-tabulka td { padding: 10px 12px 10px 0; text-align: left; border-bottom: 1px solid var(--fr-divider); }
.mag-tabulka th { font-weight: 800; color: var(--fr-ink); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

.mag-cta { background: var(--fr-accent); padding: var(--fr-s7); margin: var(--fr-s8) 0 0; }
.mag-cta h2 { color: var(--fr-bg); margin-top: 0; font-size: clamp(26px, 2.6vw, 34px); }
.mag-cta p { color: var(--fr-bg); opacity: .9; font-size: 15px; max-width: 44ch; }
.mag-cta__odkaz {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 18px;
  border: 1px solid var(--fr-bg); color: var(--fr-bg) !important; background: transparent;
  font-weight: 600; text-decoration: none;
}
.mag-cta__odkaz::after { content: "→"; }
.mag-cta__odkaz:hover { background: var(--fr-bg); color: var(--fr-accent) !important; }

.mag-dalsi { margin-top: var(--fr-s9); }
.mag-dalsi h2 { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: var(--fr-s5); }

/* =============================================================================
   HOMEPAGE — bloky z ACF se starými třídami.

   Homepage se neskládá ze šablony, ale z polí v databázi (viz
   ZADANI-REDESIGN.md 2.3), takže její strukturu odsud měnit nejde. Co jde:
   převléknout původní třídy do stejné palety, aby nová hlavička, formulář
   a patička nesousedily se zeleným herem z roku 2024.
   ============================================================================= */

body.home { background: var(--fr-bg); }

/* Zelený hero je pryč. Tahle jediná deklarace dělá na homepage největší kus
   práce — bez ní zůstane nahoře tmavě zelená plocha a zbytek stránky je papír. */
body.home .hero,
.hero { background: var(--fr-bg) !important; border-bottom: 2px solid var(--fr-divider); padding: var(--fr-s8) 0 var(--fr-s9) !important; }
.hero .in { max-width: var(--fr-max); margin: 0 auto; padding-inline: var(--fr-pad); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
.hero__box { max-width: none; }
.hero h1, body.home .hero h1 {
  color: var(--fr-ink) !important; font-family: var(--fr-font); font-weight: 800;
  font-size: clamp(38px, 5.2vw, 68px); line-height: 1.06; letter-spacing: -.02em; margin-left: -.05em;
}
.hero .hero__perex, body.home .hero .hero__perex { color: var(--fr-ink-lead) !important; font-size: 17px; line-height: 1.6; max-width: 52ch; }

.hero__list ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--fr-s4) var(--fr-s5); margin: var(--fr-s5) 0 0; padding: 0; list-style: none; }
body.home .hero__list ul li, .hero__list ul li {
  display: flex; gap: var(--fr-s3); align-items: flex-start;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; color: var(--fr-ink) !important;
  font-size: 16px; line-height: 1.4; font-weight: 600;
}
body.home .hero__list ul li::before, .hero__list ul li::before {
  content: "" !important; flex: none; width: 10px; height: 10px;
  background: var(--fr-accent) !important; color: transparent !important;
  margin-top: 7px; border-radius: 0; font-size: 0 !important;
}
.hero__list ul li > div { font-size: 16px; line-height: 1.4; }

/* Formulář na homepage je mimo .fr-scope (vkládá se rovnou do .hero .in),
   takže si písmo a barvu textu musí nastavit sám. */
.fr-card { font-family: var(--fr-font); color: var(--fr-ink-2); font-size: 15px; line-height: 1.6; font-feature-settings: 'tnum' 1; }
.fr-card *, .fr-card *::before, .fr-card *::after { box-sizing: border-box; }
.fr-card h2 { font-family: var(--fr-font); font-weight: 800; color: var(--fr-ink); letter-spacing: -.015em; }
.fr-card a { color: var(--fr-accent-700); text-underline-offset: 2px; }
.fr-card a:hover { color: var(--fr-accent); }

.content-cols { background: var(--fr-bg); padding: var(--fr-s9) 0; border-bottom: 2px solid var(--fr-divider); }
.content-cols .in { max-width: var(--fr-max); margin: 0 auto; padding-inline: var(--fr-pad); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
body.home .content-cols__right, .content-cols__right { padding-top: 0 !important; }

.title, .content-cols h2, .content-cols h3 { font-family: var(--fr-font); font-weight: 800; color: var(--fr-ink); letter-spacing: -.015em; }
.title--medium span, .title--small span { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; }
.title--tiny { font-size: 20px; line-height: 1.2; }
/* Původní .title--line kreslí přes celou šířku linku (v ::before) a maskuje ji
   bílým pozadím spanu. Ve vlastní sekci ji nahrazuje 2px linka nad sekcí, takže
   dekorace jen překáží — a na papírovém podkladu je z bílé masky viditelný
   obdélník. Dřív tu stálo jen ::after; to v šabloně není, takže se nevypínalo nic. */
.title--line::before, .title--line::after, .title--line span::after { display: none !important; }
.title--line span { background: transparent !important; padding: 0 !important; }

.icon-text { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 40px clamp(32px, 5vw, 80px); }
.icon-text__item { border-top: 2px solid var(--fr-divider); padding-top: var(--fr-s4); display: block; }
.icon-text__icon { margin-bottom: var(--fr-s3); }
.icon-text__icon img { height: 28px; width: auto; filter: grayscale(1); opacity: .8; }
.icon-text__name p { font-size: 20px; line-height: 1.2; font-weight: 800; color: var(--fr-ink); letter-spacing: -.01em; margin: 0 0 var(--fr-s2); }
.icon-text__content { font-size: 15px; line-height: 1.6; color: var(--fr-ink-2); }

/* Reprezentativní příklad a limity v pravém sloupci homepage. */
.content-cols__right ul { margin: 0 0 var(--fr-s6); padding: 0; list-style: none; border-top: 2px solid var(--fr-divider); }
.content-cols__right ul li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fr-s4); padding: 10px 0; border-bottom: 1px solid var(--fr-divider); font-size: 14px; }
.content-cols__right ul li p { margin: 0; color: var(--fr-ink-muted); }
.content-cols__right ul li p:last-child { color: var(--fr-ink); font-weight: 600; text-align: right; font-feature-settings: 'tnum' 1; }
.content-cols__right small { display: block; font-size: 12px; line-height: 1.5; color: var(--fr-ink-muted); margin-bottom: var(--fr-s6); }

.accordion-wrapper { background: var(--fr-bg); padding: var(--fr-s9) 0; }
.accordion-wrapper .in { max-width: var(--fr-max); margin: 0 auto; padding-inline: var(--fr-pad); }
body.home .accordion-wrapper .in { grid-template-columns: 1fr; }
.accordion-wrapper__content { max-width: 900px; }
.accordion-wrapper .accordion__item { background: transparent; border: 0; border-top: 2px solid var(--fr-divider); border-radius: 0; }
.accordion-wrapper .accordion__item:last-child { border-bottom: 2px solid var(--fr-divider); }
.accordion-wrapper .accordion__header { cursor: pointer; padding: var(--fr-s4) 0; }
.accordion-wrapper .accordion__header h3 { font-family: var(--fr-font); font-size: 17px; line-height: 1.3; font-weight: 800; color: var(--fr-ink); margin: 0; }
/* Zavřenou odpověď sráží stará šablona na nulovou výšku přes grid-template-rows
   a ořezává ji `overflow: hidden` na .accordion__helper. Padding proto musí
   zůstat AŽ UVNITŘ: overflow ořezává na hranici paddingu, ne obsahu, takže
   padding na helperu nechá zavřenou odpověď prosvítat přesně o svou výšku. */
.accordion-wrapper .accordion__helper { font-size: 15px; line-height: 1.6; color: var(--fr-ink-2); }
.accordion-wrapper .accordion__helper .content-text { padding: 0 0 var(--fr-s4); }

/* Tlačítka mimo .fr-scope (staré šablony, magazín, plovoucí pruh). */
.btn, .form__btn {
  background: var(--fr-accent) !important; color: var(--fr-bg) !important;
  border-radius: 0 !important; border: 0 !important;
  font-family: var(--fr-font) !important; font-weight: 600 !important;
}
.btn:hover, .form__btn:hover { background: var(--fr-accent-700) !important; }
.btn:active, .form__btn:active { background: var(--fr-accent-800) !important; }

.footer { background: var(--fr-bg); border-top: 2px solid var(--fr-divider); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}