/* WebMeter · ON Consulting & Advisory — UI webové aplikace.
   Značka dle Brand Booku v2: paleta Navy & Ivory (pravidlo 60/30/10), Inter Tight (UI, text)
   a Source Serif 4 (display, kurzíva pro akcent) jako na on-consulting.cz (V7.7).
   Písma hostovaná lokálně (CSP 'self', bez přenosu IP adres na Google Fonts).
   Sémantické barvy skóre (zelená/žlutá/červená) sladěné s PDF reportem; ve světlém režimu
   o odstín tmavší, aby text na světlých podkladech (štítky, upozornění) splnil kontrast
   WCAG AA 4,5 : 1. Kontrast textu patičky hlídá test (tests/webapp/test_seo_a11y.py). */

@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/InterTight-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/InterTight-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: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/SourceSerif4-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: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/SourceSerif4-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: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("fonts/SourceSerif4-italic-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: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("fonts/SourceSerif4-italic-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 {
  /* Navy & Ivory (Brand Book v2, on-consulting.cz) */
  --navy: #0A1F38;
  --navy-light: #1B3A5C;
  --navy-soft: #3A5878;
  --ivory: #F6F1E7;
  --ivory-deep: #EDE5D2;
  --warm-white: #FAFAF7;
  --paper: #FFFFFF;
  --ink: #1A2332;
  --ink-soft: #3A4A5F;
  /* 4,9 : 1 na --warm-white (dřív #6E7785 = 4,3 : 1) */
  --muted: #656F7E;
  --line: #E5E9EE;
  --line-soft: #F0F3F7;

  /* role tokenů (světlý režim) */
  --bg: var(--warm-white);
  --surface: var(--paper);
  --surface-2: var(--warm-white);
  --surface-glass: rgba(250, 250, 247, .85);
  --heading: var(--navy);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --accent: var(--navy);
  --accent-hover: var(--navy-light);
  --accent-ink: var(--ivory);
  --track: var(--ivory-deep);
  --ring: rgba(10, 31, 56, .28);

  /* sémantika skóre (zelená a žlutá tmavší než v reportu: text na -bg a na štítku
     pásma s 13 % barvy má aspoň 4,5 : 1) */
  --green: #2C7745;  --green-bg: #E6F1E9;
  --amber: #8C6216;  --amber-bg: #F6EDDA;
  --red: #A83A2F;    --red-bg: #F6E3DF;
  --crit: #7E1618;   --crit-bg: #F2DADA;
  --gray: #5B6574;   --gray-bg: var(--line-soft);

  --shadow: 0 1px 2px rgba(10, 31, 56, .04), 0 12px 32px -18px rgba(10, 31, 56, .22);
  --shadow-lg: 0 1px 2px rgba(10, 31, 56, .05), 0 30px 60px -30px rgba(10, 31, 56, .35);
  --radius: 18px;
  --radius-sm: 12px;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* patička (navy v obou režimech): ivory v neprůhledných odstínech nad --foot-bg, ať jde
     kontrast textu ověřit (WCAG AA 4,5 : 1); u barev podíl ivory smíchané s pozadím */
  --foot-bg: #0A1F38;         /* --navy */
  --foot-heading: #F6F1E7;    /* --ivory */
  --foot-link: #B4B6B6;       /* 72 % */
  --foot-text: #989DA1;       /* 60 % */
  --foot-logo-sub: #8C9298;   /* 55 % */
  --foot-small: #808890;      /* 50 % (dřív 42 % = 3,6 : 1, pod AA) */

  /* pruh testovací instance (preview.webmeter.eu): neprůhledný jantar, ivory text 4,8 : 1 */
  --test-banner-bg: var(--amber);
  --test-banner-text: var(--ivory);
}

/* Tmavý režim = reversed varianta značky: ivory na navy. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #081A30;
    --surface: #0E2644;
    --surface-2: #0B2140;
    --surface-glass: rgba(8, 26, 48, .85);
    --heading: var(--ivory);
    --text: #E9E4D8;
    --text-soft: #C9CFD8;
    --muted: #93A0B2;
    --line: rgba(246, 241, 231, .12);
    --line-soft: rgba(246, 241, 231, .06);
    --accent: var(--ivory);
    --accent-hover: #FFFFFF;
    --accent-ink: var(--navy);
    --track: rgba(246, 241, 231, .10);
    --ring: rgba(246, 241, 231, .35);
    --green: #6FCB91;  --green-bg: rgba(111, 203, 145, .12);
    --amber: #E8B45A;  --amber-bg: rgba(232, 180, 90, .13);
    --red: #F08C7C;    --red-bg: rgba(240, 140, 124, .13);
    --crit: #FF9E9E;   --crit-bg: rgba(255, 140, 140, .15);
    --gray: #A9B3C3;   --gray-bg: rgba(246, 241, 231, .07);
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 14px 34px -18px rgba(0, 0, 0, .6);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, .3), 0 30px 60px -30px rgba(0, 0, 0, .7);
    /* patička na tmavším navy: tytéž podíly ivory nad #061426 */
    --foot-bg: #061426;
    --foot-link: #B3B3B1;
    --foot-text: #96999A;
    --foot-logo-sub: #8A8E90;
    --foot-small: #7E8286;
    /* pruh testovací instance: světlý jantar (--amber tmavého režimu), navy text 8,8 : 1 */
    --test-banner-text: var(--navy);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 400 16px/1.6 var(--sans); color: var(--text);
  background:
    radial-gradient(640px 640px at 88% -8%, rgba(27, 58, 92, .09), transparent 65%),
    radial-gradient(520px 420px at 6% 12%, rgba(237, 229, 210, .55), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "calt";
}
@media (prefers-color-scheme: dark) {
  body { background:
    radial-gradient(640px 640px at 88% -8%, rgba(58, 88, 120, .35), transparent 65%),
    radial-gradient(520px 420px at 6% 12%, rgba(27, 58, 92, .45), transparent 70%),
    var(--bg); }
}
::selection { background: var(--navy); color: var(--ivory); }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
code { font-family: var(--mono); font-size: .86em; background: var(--line-soft); padding: 1px 6px;
  border-radius: 6px; color: var(--text-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 20; padding: 8px 14px; background: var(--surface);
  color: var(--heading); border-radius: 10px; box-shadow: var(--shadow); }
.skip:focus { top: 12px; }

/* --- horní lišta (jako nav na on-consulting.cz) ---------------------------------- */
/* Lišta je poloprůhledná: když pod ní projede tmavý blok (výzva pod výsledkem), podklad
   ztmavne. Vedlejší text lišty má proto --text-soft (ne --muted), ať drží kontrast 4,5 : 1. */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--surface-glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1120px; margin: 0 auto; padding: 16px clamp(20px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Pruh testovací instance (WEBRADAR_INSTANCE=test): první v záhlaví, proto vidět i při
   posouvání. Neprůhledné pozadí (záhlaví je průsvitné), barvy jen z tokenů --test-banner-*. */
.test-banner { background: var(--test-banner-bg); color: var(--test-banner-text); }
.test-banner p { max-width: 1120px; margin: 0 auto; padding: 8px clamp(20px, 4vw, 40px);
  font-size: .86rem; line-height: 1.45; text-align: center; }
.test-banner strong, .test-banner a { font-weight: 600; }
.test-banner a { color: var(--test-banner-text); text-decoration: underline; text-underline-offset: 2px; }
/* Obrys fokusu v barvě textu pruhu: globální --accent (ivory v tmavém režimu) by na světlém
   jantaru měl jen 1,7 : 1; takhle 4,8 : 1 (světlý) a 8,8 : 1 (tmavý), WCAG 1.4.11 chce 3 : 1. */
.test-banner :focus-visible { outline-color: var(--test-banner-text); }
/* Na telefonu menší, ať pruh v přilepeném záhlaví nezabere čtvrtinu obrazovky. */
@media (max-width: 560px) {
  .test-banner p { padding: 6px 16px; font-size: .78rem; line-height: 1.4; }
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--heading); text-decoration: none; }
.brand-mark { font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1; }
.brand-mark .dot, .foot-logo .dot { color: inherit; }
.brand-divider { width: 1px; height: 16px; background: currentColor; opacity: .3; }
.brand-sub { font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); }
.topnav { display: flex; align-items: center; gap: 28px; font-size: .9rem; margin-left: auto; }
.topnav a { color: var(--heading); text-decoration: none; opacity: .85; white-space: nowrap; }
.topnav a:hover { opacity: 1; }
.topnav-ext { padding-left: 24px; border-left: 1px solid var(--line); color: var(--text-soft) !important; }

/* Přepínač jazyků: obyčejné odkazy (hreflang, lang), funguje i bez skriptu. Aktuální jazyk
   má aria-current a obrys; kód je vidět, celý název jazyka čte čtečka. */
.langs { display: flex; align-items: center; gap: 2px; padding-left: 16px; border-left: 1px solid var(--line);
  font-size: .74rem; font-weight: 500; letter-spacing: .12em; }
.langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px;
  padding: 4px 8px; border-radius: 999px; color: var(--text-soft); text-decoration: none; transition: color .2s, background .2s; }
.langs a:hover { color: var(--heading); background: var(--line-soft); }
.langs a[aria-current="true"] { color: var(--heading); box-shadow: inset 0 0 0 1px var(--line); }

/* --- obsah ------------------------------------------------------------------------ */
.wrap { flex: 1; width: 100%; max-width: 900px; margin: 0 auto; padding: 8px 20px 88px; }
/* Lepivá lišta nesmí zakrýt cíl posunu (výsledek skenu, kotva #jak). */
.result, .how, .status { scroll-margin-top: 96px; }

.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font-size: .76rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--heading); }
.eyebrow::before, .hero--home .eyebrow::after, .eyebrow--center::after {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }

.hero { text-align: center; margin: 48px auto 28px; max-width: 760px; }
.hero h1 { font-family: var(--serif); font-weight: 400; color: var(--heading);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.8rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 14px; }
.hero h1 em, .section-heading em { font-style: italic; color: var(--navy-light); }
.hero--home { margin: 72px auto 36px; }
.hero--home h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 4.4rem); line-height: 1.02; margin: 0 0 22px; }
/* Eyebrow je součástí H1 (klíčové slovo na začátku nadpisu, SEO audit 29. 9. 2026): vlastní
   řádek se stejným vzhledem jako dřívější <p class="eyebrow"> — písmo a řádkování textu,
   ne nadpisu. */
.hero--home h1 .eyebrow { display: flex; justify-content: center; margin: 0 0 22px;
  font-family: var(--sans); font-style: normal; line-height: 1.6; }
.lede { color: var(--text-soft); font-size: clamp(1.02rem, .95rem + .3vw, 1.16rem); line-height: 1.65;
  max-width: 60ch; margin: 0 auto; }
@media (prefers-color-scheme: dark) {
  .hero h1 em, .section-heading em { color: #C9D6E6; }
}

/* --- vyhledávání ------------------------------------------------------------------ */
.search { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.searchbar { display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 20px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  transition: border-color .2s, box-shadow .2s; }
.searchbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring), var(--shadow-lg); }
.searchbar-icon { width: 21px; height: 21px; flex: none; color: var(--muted); }
.searchbar input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text);
  font: 400 1.08rem/1.2 var(--sans); padding: 12px 2px; }
.searchbar input::placeholder { color: var(--muted); opacity: .85; }

button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 .98rem/1 var(--sans); text-decoration: none; cursor: pointer; border-radius: 999px;
  border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.searchbar button { flex: none; padding: 16px 28px; background: var(--accent); color: var(--accent-ink); }
.searchbar button:hover, .btn--primary:hover { background: var(--accent-hover); transform: translateY(-1px);
  box-shadow: 0 10px 30px -10px rgba(10, 31, 56, .45); }
.searchbar button:disabled { opacity: .7; cursor: progress; transform: none; box-shadow: none; }

.hint { color: var(--muted); font-size: .88rem; margin: 14px 0 0; }
/* Řádek důvěry pod vyhledáváním: odpovědi na obavy (cena, registrace, zátěž webu, výstup). */
.trust { list-style: none; padding: 0; margin: 18px auto 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px; font-size: .9rem; color: var(--text-soft); }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
/* Na počítači smí řádek důvěry přesáhnout šířku vyhledávání o 50 px na každou stranu, ať
   se čtyři položky („Výsledek zhruba za minutu“) vejdou na jeden řádek. */
@media (min-width: 821px) { .trust { margin-left: -50px; margin-right: -50px; } }
.trust svg { width: 17px; height: 17px; color: var(--green); flex: none; }

.alert { text-align: left; margin: 14px 0 0; padding: 12px 16px; border-radius: var(--radius-sm); font-size: .95rem; }
.alert--error { color: var(--red); background: var(--red-bg); }
.alert--info { color: var(--text-soft); background: var(--line-soft); border: 1px solid var(--line); }
.alert--warn { color: var(--amber); background: var(--amber-bg); margin: 22px 0 0; }
.alert a { color: inherit; font-weight: 600; }

/* --- karty ------------------------------------------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px; margin: 18px 0; }

/* --- průběh skenu ----------------------------------------------------------------- */
.status { padding: 18px 22px; }
.status-row { display: flex; align-items: center; gap: 12px; }
.status-row p { margin: 0; font-weight: 500; color: var(--heading); }
.elapsed { margin-left: auto; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spinner { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--track);
  border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress { position: relative; height: 3px; margin: 14px 0 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.progress span { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: inherit;
  background: linear-gradient(90deg, var(--navy-soft), var(--accent)); animation: slide 1.6s ease-in-out infinite; }
@keyframes slide { to { left: 100%; } }
.status-hint { margin: 0; font-size: .88rem; color: var(--muted); }
.status-hint span { color: var(--text-soft); font-weight: 500; }
/* Sken čeká na zaškrtnutí políčka Turnstile (data-phase="interactive"): místo kolečka ikona
   a pokyn, bez času, pruhu a tipů (skryté prvky mají atribut hidden, fázi řídí app.js).
   Pokyn je červeně jako upozornění: bez potvrzení, že jde o člověka, se nic nezměří. */
.status[data-phase="interactive"] { border-color: var(--red); }
.status[data-phase="interactive"] .status-row p { color: var(--red); font-weight: 600; }
.status-icon { flex: none; line-height: 0; color: var(--red); }
.status-icon svg { display: block; width: 20px; height: 20px; }

/* --- výsledek --------------------------------------------------------------------- */
.result[data-band="zelena"] { --band: var(--green); }
.result[data-band="zluta"] { --band: var(--amber); }
.result[data-band="cervena"] { --band: var(--red); }

.result-card { padding: 34px; }
.result-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 34px; }

.gauge { --c: var(--band, var(--gray)); position: relative; width: 172px; height: 172px; flex: none; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.gauge-track, .gauge-fill { fill: none; stroke-width: 10; }
.gauge-track { stroke: var(--track); }
.gauge-fill { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 427.26; stroke-dashoffset: 427.26;
  transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1); }
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; line-height: 1; }
.gauge-value { font-family: var(--serif); font-size: 3.4rem; font-weight: 500; letter-spacing: -.03em;
  color: var(--heading); font-variant-numeric: lining-nums tabular-nums; }
.gauge-max { margin-top: 8px; font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.result-meta { min-width: 0; }
.result-domain { margin: 0 0 6px; color: var(--muted); font-size: .8rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; word-break: break-all; }
.verdict { margin: 0 0 14px; font-family: var(--serif); font-weight: 400; color: var(--heading);
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.95rem); line-height: 1.2; letter-spacing: -.015em; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
  font-size: .86rem; font-weight: 500; }
.badge--grade { background: var(--ivory); color: var(--navy); }
.badge--grade strong { font-weight: 700; }
.badge--band { color: var(--band, var(--gray)); background: color-mix(in srgb, var(--band, var(--gray)) 13%, transparent); }
@media (prefers-color-scheme: dark) { .badge--grade { background: rgba(246, 241, 231, .12); color: var(--ivory); } }
.meta-note { margin: 12px 0 0; font-size: .88rem; color: var(--muted); }

.section-title { display: flex; align-items: center; gap: 12px; margin: 34px 0 14px; font-size: .74rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--heading); }
.section-title::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }

.areas-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.area { padding: 15px 16px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.area-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.area-label { font-size: .86rem; font-weight: 500; color: var(--text-soft); }
.area-score { display: block; margin: 8px 0 12px; font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--heading); line-height: 1; }
.area-score small { font-size: .78rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.bar { height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c, var(--gray));
  transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.area.is-good { --c: var(--green); }
.area.is-mid { --c: var(--amber); }
.area.is-bad { --c: var(--red); }

/* Co opravit nejdřív — riziko srozumitelnou řečí a doporučení z nálezu (nejvýš 3) */
.fix-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: fix; }
.fix { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; padding: 16px 18px;
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--c, var(--gray)); counter-increment: fix; }
.fix::before { content: counter(fix); grid-row: span 3; font-family: var(--serif); font-style: italic;
  font-size: 1.7rem; line-height: 1; color: var(--c, var(--gray)); }
.fix[data-sev="kriticka"] { --c: var(--crit); }
.fix[data-sev="vysoka"] { --c: var(--red); }
.fix[data-sev="stredni"] { --c: var(--amber); }
.fix[data-sev="nizka"] { --c: var(--green); }
.fix-title { margin: 0; font-weight: 600; color: var(--heading); line-height: 1.35; }
.fix-title .sev { margin-left: 8px; padding: 2px 9px; font-size: .72rem; vertical-align: 2px; }
.fix p { grid-column: 2; margin: 4px 0 0; font-size: .92rem; color: var(--text-soft); line-height: 1.55; }
.fix p.fix-title { margin: 0; font-size: 1rem; color: var(--heading); }
.fix b { color: var(--heading); font-weight: 600; }

.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 600; }
.pill.partial { background: var(--amber-bg); color: var(--amber); }
.pill.skipped, .pill.error { background: var(--gray-bg); color: var(--gray); }
.pill.info { background: var(--gray-bg); color: var(--text-soft); letter-spacing: .06em; }

.findings { display: flex; gap: 8px; flex-wrap: wrap; }
.sev { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; font-size: .86rem; font-weight: 500; }
.sev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sev-kriticka { background: var(--crit-bg); color: var(--crit); }
.sev-vysoka { background: var(--red-bg); color: var(--red); }
.sev-stredni { background: var(--amber-bg); color: var(--amber); }
.sev-nizka { background: var(--green-bg); color: var(--green); }
.sev-info { background: var(--gray-bg); color: var(--gray); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; }
.actions--center { justify-content: center; } /* stránka 404: odkaz na úvod pod nadpisem */
.btn { padding: 14px 24px; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { background: transparent; color: var(--heading); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.btn[hidden] { display: none; }

/* CTA — navy sekce (30 % plochy značky): výzva, tlačítko a rozbalovací formulář poptávky.
   Ivory na navy v obou režimech; barvy textu na navy drží lokální tokeny --on-navy-*. */
.cta { --on-navy: var(--ivory); --on-navy-soft: rgba(246, 241, 231, .78);
  --on-navy-muted: rgba(246, 241, 231, .62); --on-navy-line: rgba(246, 241, 231, .24);
  --on-navy-error: #F5A89C;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 32px;
  margin: 18px 0; padding: 34px; border-radius: var(--radius); background: var(--navy); color: var(--on-navy);
  box-shadow: var(--shadow-lg); position: relative; scroll-margin-top: 96px;
  /* clip (ne hidden): blok není posuvný kontejner, takže ho fokus pole formuláře neposune
     do strany kvůli dekorativnímu kruhu; hidden je záloha pro starší prohlížeče. */
  overflow: hidden; overflow: clip; }
.cta[hidden] { display: none; }
.cta::after { content: ""; position: absolute; right: -120px; top: -160px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(246, 241, 231, .10), transparent 65%); pointer-events: none; }
.cta :focus-visible { outline-color: var(--on-navy); }
.cta-text { position: relative; z-index: 1; }
.cta-eyebrow { margin: 0 0 10px; font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(246, 241, 231, .6); }
.cta-title { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.15; color: var(--on-navy); }
.cta-title em { font-style: italic; color: #C9D6E6; }
.cta-text p { margin: 0; color: var(--on-navy-soft); max-width: 50ch; }
.cta-text .cta-sign { margin-top: 14px; font-size: .84rem; color: rgba(246, 241, 231, .55); }
.cta-actions { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cta-alt { margin: 0; font-size: .86rem; color: var(--on-navy-muted); text-align: center; }
.cta-alt[hidden] { display: none; }
.cta-alt a { color: var(--on-navy); font-weight: 500; overflow-wrap: anywhere; }
.btn--ivory { position: relative; z-index: 1; flex: none; background: var(--ivory); color: var(--navy); white-space: nowrap; }
.btn--ivory:hover { background: #FFFFFF; transform: translateY(-1px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.btn--ivory:disabled { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
/* Otevřený formulář: tlačítko výzvy ustoupí (obrys), hlavní akcí je „Odeslat poptávku“. */
.btn--ivory[aria-expanded="true"] { background: transparent; color: var(--on-navy); border-color: var(--on-navy-line); }
.btn--ivory[aria-expanded="true"]:hover { background: rgba(246, 241, 231, .08); box-shadow: none; }
@media (prefers-color-scheme: dark) { .cta { background: #10304F; border: 1px solid rgba(246, 241, 231, .12); } }

/* Formulář poptávky konzultace (uvnitř CTA, přes celou šířku) */
.inquiry { grid-column: 1 / -1; position: relative; z-index: 1; text-align: left;
  border-top: 1px solid var(--on-navy-line); padding-top: 26px; }
.inquiry[hidden], .inquiry-form[hidden], .inquiry-done[hidden], .field-error[hidden],
.inquiry-alert[hidden] { display: none; }
.inquiry-intro { margin: 0 0 18px; font-size: .93rem; color: var(--on-navy-soft); }
.inquiry-fields { display: grid; gap: 16px; }
.inquiry-row { display: grid; gap: 16px 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: .86rem; font-weight: 500; color: var(--on-navy); }
.field .req, .field .opt { font-weight: 400; color: var(--on-navy-muted); }
.field-input { width: 100%; margin: 0; font: 400 1rem/1.45 var(--sans); color: var(--on-navy);
  background: rgba(246, 241, 231, .06); border: 1px solid var(--on-navy-line); border-radius: 12px;
  padding: 11px 14px; transition: border-color .2s, background .2s; }
textarea.field-input { min-height: 116px; resize: vertical; }
.field-input::placeholder { color: rgba(246, 241, 231, .5); opacity: 1; }
.field-input:hover { border-color: rgba(246, 241, 231, .4); }
.field-input:focus { border-color: var(--on-navy); background: rgba(246, 241, 231, .1); }
.field-input:focus-visible { outline: 2px solid var(--on-navy); outline-offset: 2px; }
.field-input:-webkit-autofill { -webkit-text-fill-color: var(--on-navy); caret-color: var(--on-navy);
  box-shadow: 0 0 0 1000px #13304F inset; }
.field-input[aria-invalid="true"] { border-color: var(--on-navy-error); }
/* Fokus po chybě / po odeslání nesmí skončit pod lepivou horní lištou. */
.field-input, .inquiry-done { scroll-margin-top: 96px; scroll-margin-bottom: 24px; }
.field-error { margin: 0; font-size: .85rem; line-height: 1.45; color: var(--on-navy-error); }
.inquiry-privacy { margin: 18px 0 0; font-size: .9rem; line-height: 1.5; color: var(--on-navy-soft); }
.inquiry-privacy a { color: var(--on-navy); }
.inquiry-alert { margin: 18px 0 0; padding: 11px 14px; border-radius: 12px; font-size: .92rem; color: var(--on-navy-error);
  background: rgba(240, 140, 124, .12); border: 1px solid rgba(240, 140, 124, .35); }
.inquiry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.inquiry-done { padding: 20px 22px; border-radius: 14px; background: rgba(246, 241, 231, .08);
  border: 1px solid var(--on-navy-line); }
.inquiry-done p { margin: 0; color: var(--on-navy-soft); }
.inquiry-done .inquiry-done-title { margin-bottom: 6px; font-family: var(--serif); font-size: 1.35rem; color: var(--on-navy); }
/* Past na roboty: mimo obrazovku (ne display:none — to někteří roboti přeskočí). */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Varianty bloku pod výsledkem (data-variant: good / fix / new; prvky .cta-v skript skryje
   atributem hidden podle varianty). good = světlá karta bez prodeje, new = nabídka nového webu. */
.cta-v[hidden] { display: none; }
.cta[data-variant="good"] { --on-navy: var(--heading); --on-navy-soft: var(--text-soft);
  --on-navy-muted: var(--muted); --on-navy-line: var(--line);
  background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cta[data-variant="good"]::after { display: none; }
.cta[data-variant="good"] .cta-eyebrow { color: var(--green); }
.cta[data-variant="good"] .btn--ivory { background: var(--accent); color: var(--accent-ink); }
.cta[data-variant="good"] .btn--ivory:hover { background: var(--accent-hover); }
@media (prefers-color-scheme: dark) { .cta[data-variant="good"] { background: var(--surface); border-color: var(--line); } }
.offer-reasons { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 7px; }
.offer-reasons li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; color: var(--on-navy-soft); font-size: .94rem; }
.offer-reasons li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: #F08C7C; }
.price { margin: 0; font-family: var(--serif); font-size: 2.3rem; line-height: 1; color: var(--on-navy);
  letter-spacing: -.02em; text-align: center; }
.price small { display: block; margin-bottom: 6px; font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-muted); }
.price-note { margin: -4px 0 0; font-size: .82rem; color: var(--on-navy-muted); text-align: center; }
.cta-link { padding: 0; border: 0; background: none; color: var(--on-navy); font-size: .86rem; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cta-link:hover { text-decoration-thickness: 2px; }

/* RezervApp — jen službám na termín bez online rezervací */
.booking { position: relative; margin: 18px 0; padding: 30px 34px; border-radius: var(--radius);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 36px; align-items: center;
  background: linear-gradient(135deg, var(--ivory) 0%, var(--ivory-deep) 100%); color: var(--navy);
  border: 1px solid var(--ivory-deep); box-shadow: var(--shadow); scroll-margin-top: 96px; }
.booking[hidden] { display: none; }
.booking-eyebrow { margin: 0 0 10px; font-size: .72rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--navy-soft); }
.booking-title { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.15; color: var(--navy); }
.booking-title em { font-style: italic; color: var(--navy-light); }
.booking p { margin: 0; color: #3A4A5F; max-width: 56ch; }
.booking-side { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.rz-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.rz-logo i { width: 26px; height: 26px; border-radius: 8px; background: var(--navy); display: grid; place-items: center; }
.rz-logo svg { width: 15px; height: 15px; color: var(--ivory); }
.pilot { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #E6F1E9; color: #1F6435;
  font-size: .8rem; font-weight: 600; }
.btn--navy { background: var(--navy); color: var(--ivory); }
.btn--navy:hover { background: var(--navy-light); transform: translateY(-1px); }

/* --- srovnání s konkurencí (pod výsledkem; app.js, webradar/webapp/competitors.py) --------- */
/* Vlastní web navy (v tmavém režimu ivory = --accent), konkurence tlumeně šedá; druhý
   konkurent má pruh šrafovaný, ať se pruhy nerozlišují jen odstínem. Hodnoty jsou vždy
   i číslem, čtečka dostane u každého pruhu doménu a skóre. Barvy jen z tokenů. */
/* Srovnání: 3 kategoriální barvy (modrá = váš web, oranžová, tyrkysová), ověřené validátorem
   (odlišitelné i při poruchách barvocitu, obě schémata); 2. konkurent má navíc šrafování. */
/* Pořadí v oblasti i v celkovém skóre (přání provozovatele): nejlepší zelená, prostřední žlutá,
   nejhorší červená. Který web je který, říká popisek u každého pruhu a dlaždice. */
.compare { --cmp-own: var(--gray); --cmp-rival: var(--gray); --cmp-rival-2: var(--gray);
  --rank-best: #2C8A4B; --rank-mid: #D1A10E; --rank-worst: #C0432F; scroll-margin-top: 96px; }
@media (prefers-color-scheme: dark) { .compare { --rank-best: #5FC285; --rank-mid: #E8C547; --rank-worst: #EE7A68; } }
.cmp-bar.cmp-rank-best, .cmp-tile.cmp-rank-best { --cmp-c: var(--rank-best); }
.cmp-bar.cmp-rank-mid, .cmp-tile.cmp-rank-mid { --cmp-c: var(--rank-mid); }
.cmp-bar.cmp-rank-worst, .cmp-tile.cmp-rank-worst { --cmp-c: var(--rank-worst); }
.cmp-bar { row-gap: 3px; }
.cmp-bar-name { grid-row: 1; grid-column: 1 / -1; font-size: .78rem; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.cmp-bar--own .cmp-bar-name { font-weight: 600; color: var(--heading); }
.compare[hidden], .compare-list[hidden], .compare-view[hidden], .compare-state[hidden],
.compare-field-error[hidden] { display: none; }
.compare-eyebrow { margin: 0 0 8px; font-size: .74rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-soft); }
.compare-title { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.2;
  color: var(--heading); }
.compare-title em { font-style: italic; color: var(--navy-light); }
@media (prefers-color-scheme: dark) { .compare-title em { color: #C9D6E6; } }
.compare-intro { margin: 0 0 18px; color: var(--text-soft); max-width: 62ch; }
.compare-fields { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.compare .field label { font-size: .88rem; font-weight: 500; color: var(--heading); }
.compare .field .opt { font-weight: 400; color: var(--muted); }
.compare-input { width: 100%; margin: 0; font: 400 1rem/1.4 var(--sans); color: var(--text); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--muted) 70%, var(--surface)); border-radius: 12px; padding: 11px 14px;
  transition: border-color .2s, box-shadow .2s; scroll-margin-top: 96px; }
.compare-input:hover { border-color: var(--muted); }
.compare-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); outline: none; }
.compare-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.compare-input::placeholder { color: var(--muted); opacity: 1; }
.compare-input[aria-invalid="true"] { border-color: var(--red); }
.compare-field-error { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--red); }
.compare-hint { margin: 12px 0 0; font-size: .88rem; color: var(--muted); max-width: 72ch; }
.compare-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.compare-actions .btn:disabled { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
.compare-state { margin: 0; font-size: .92rem; color: var(--text-soft); }
.compare-state.is-alert { color: var(--red); font-weight: 600; }
.compare .turnstile.is-interactive { margin: 14px 0 0; }
/* Průběh: jeden řádek na web konkurence (kolečko, zelená hotovo, červená hláška). */
.compare-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.compare-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px;
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: .92rem; }
/* Značka stavu u prvního řádku textu (i u víceřádkové hlášky): střed řádku výšky 1.6em. */
.compare-item::before { content: ""; flex: none; align-self: flex-start; width: 10px; height: 10px;
  margin-top: calc((1.6em - 10px) / 2); border-radius: 50%; background: var(--gray); }
.compare-item[data-state="queued"]::before, .compare-item[data-state="running"]::before {
  width: 12px; height: 12px; margin-top: calc((1.6em - 12px) / 2); background: none;
  border: 2px solid var(--track); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.compare-item[data-state="done"]::before { background: var(--green); }
.compare-item[data-state="error"]::before { background: var(--red); }
.compare-item-domain { font-weight: 600; color: var(--heading); overflow-wrap: anywhere; }
.compare-item-text { flex: 1 1 16ch; min-width: 0; color: var(--text-soft); }
.compare-item[data-state="error"] .compare-item-text { color: var(--red); }
.compare-item a { color: inherit; font-weight: 600; }
/* Výsledek: dlaždice se skóre, legenda, pruhy oblastí na jedné škále 0–100, callout. */
.compare-view .section-title { margin-top: 30px; scroll-margin-top: 96px; }
.compare-view .section-title:focus { outline: none; }
.compare-view .section-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cmp-s0 { --cmp-c: var(--cmp-own); }
.cmp-s1 { --cmp-c: var(--cmp-rival); }
.cmp-s2 { --cmp-c: var(--cmp-rival-2); }
.cmp-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cmp-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line); }
.cmp-tile--own { background: var(--navy); border-color: var(--navy); }
@media (prefers-color-scheme: dark) { .cmp-tile--own { background: #16365C; border-color: rgba(246, 241, 231, .28); } }
.cmp-tile { border-top: 4px solid var(--cmp-c); }
.cmp-tile-role { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cmp-tile-domain { font-weight: 600; line-height: 1.3; color: var(--heading); overflow-wrap: anywhere; }
.cmp-tile-score { margin-top: 6px; font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--heading);
  font-variant-numeric: lining-nums tabular-nums; }
.cmp-tile-score small { font-family: var(--sans); font-size: .78rem; letter-spacing: 0; color: var(--muted); }
.cmp-tile--own .cmp-tile-role, .cmp-tile--own .cmp-tile-score small { color: rgba(246, 241, 231, .78); }
.cmp-tile--own .cmp-tile-domain, .cmp-tile--own .cmp-tile-score { color: var(--ivory); }
.cmp-tile-link { margin-top: 8px; font-size: .86rem; font-weight: 500; color: var(--accent); }
.cmp-legend { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: .86rem; color: var(--text-soft); }
.cmp-legend-item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.cmp-swatch { flex: none; width: 22px; height: 10px; border-radius: 999px; background-color: var(--cmp-c); }

.cmp-areas { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cmp-area { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.cmp-area-label { margin: 0 0 10px; font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--heading); }
.cmp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cmp-bar { display: grid; grid-template-columns: minmax(0, 1fr) 3.4ch; align-items: center; gap: 10px; }
.cmp-track { display: block; height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.cmp-s0 .cmp-track { height: 12px; }
.cmp-fill { display: block; height: 100%; width: 0; border-radius: inherit; background-color: var(--cmp-c); }
.cmp-val { font-size: .86rem; font-weight: 600; text-align: right; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cmp-s0 .cmp-val { color: var(--heading); }
.cmp-callout { margin: 18px 0 0; padding: 16px 18px; border-radius: 14px; border-left: 3px solid var(--amber);
  background: var(--amber-bg); }
.cmp-callout[data-state="none"] { border-left-color: var(--green); background: var(--green-bg); }
.cmp-callout-title { margin: 0; font-weight: 600; color: var(--heading); }
.cmp-callout-list { margin: 8px 0 0; padding-left: 20px; color: var(--text); }
.cmp-callout-list li + li { margin-top: 4px; }
/* Informativní oblasti (váha 0): vlastní skupina pod callout, stejné pruhy. */
.cmp-info { margin: 24px 0 0; }
.cmp-info[hidden] { display: none; }
.cmp-group-title { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--heading); }
.cmp-note { margin: 14px 0 0; font-size: .84rem; color: var(--muted); }

/* --- sekce úvodní stránky ------------------------------------------------------------ */
.block { margin: 96px 0 0; }
.block-head { text-align: center; margin-bottom: 30px; }
.block-head .section-heading { margin-bottom: 10px; }
.block-head p { color: var(--text-soft); max-width: 60ch; margin: 0 auto; }
.showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 44px; align-items: center; }
.showcase .section-heading { text-align: left; margin-bottom: 18px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--text-soft); line-height: 1.5; }
.ticks svg { width: 20px; height: 20px; margin-top: 2px; color: var(--green); }
.ticks strong { color: var(--heading); font-weight: 600; }
.showcase-figure { margin: 0; }
.showcase-img { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); background: #fff; transform: rotate(1.4deg); }
.showcase-img img { display: block; width: 100%; height: auto; }
.showcase-img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 90px;
  background: linear-gradient(transparent, rgba(255, 255, 255, .95)); }
/* Popisek leží ve stínu otočeného obrázku (--shadow-lg ztmaví podklad) → --text-soft. */
.showcase-cap { margin: 14px 0 0; text-align: center; font-size: .8rem; color: var(--text-soft); }
.checks-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Tři sloupce ze šesti stop (karta = 2 stopy): neúplný poslední řádek se vystředí, ať
   nezůstane karta nebo dvojice u levého okraje (14 otázek = 4 plné řádky + 2 karty).
   Užší šířky mají 2 a 1 sloupec (14 otázek = plné řádky). */
@media (min-width: 821px) {
  .checks-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .checks-grid > .check { grid-column: span 2; }
  .checks-grid > .check:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .checks-grid > .check:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
.check { padding: 18px 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.check-q { margin: 0; font-weight: 600; color: var(--heading); line-height: 1.35; font-size: 1rem; }
.check-a { margin: auto 0 0; font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.check-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ivory); color: var(--navy); }
.check-ico svg { width: 19px; height: 19px; }
@media (prefers-color-scheme: dark) { .check-ico { background: rgba(246, 241, 231, .1); color: var(--ivory); } }

/* Novinky 2026 (#novinky): tři karty stejné výšky s malou statickou ilustrací (HTML/CSS,
   obecná ukázková data, pro čtečku skrytá). Barvy jen z tokenů (světlý i tmavý režim);
   šířky pruhů třídami, ne atributem style (CSP). Pod 861 px jeden sloupec. */
.news-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.news-card { display: flex; flex-direction: column; min-width: 0; padding: 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.news-card h3 { margin: 20px 0 8px; font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--heading); }
.news-card > p { margin: 0 0 18px; font-size: .93rem; color: var(--text-soft); }
.news-link { margin-top: auto; align-self: flex-start; font-weight: 600; color: var(--heading); }
.news-link:hover { color: var(--accent-hover); }
.news-art { position: relative; min-height: 132px; padding: 30px 14px 14px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column;
  justify-content: center; gap: 12px; font-variant-numeric: tabular-nums; }
.news-tag { position: absolute; top: 9px; right: 12px; font-size: .64rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
/* Srovnání: tři řádky (web, skóre, tenký pruh); vlastní web navy jako dlaždice srovnání. */
.news-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.news-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px;
  row-gap: 5px; padding: 6px 10px 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.news-row-name { font-size: .78rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-row b { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; line-height: 1; color: var(--heading); }
.news-bar { grid-column: 1 / -1; display: block; height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; }
.news-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gray); }
.news-row--own { background: var(--navy); border-color: var(--navy); }
.news-row--own .news-row-name { color: rgba(246, 241, 231, .82); }
.news-row--own b { color: var(--ivory); }
.news-row--own .news-bar { background: rgba(246, 241, 231, .2); }
.news-row--own .news-bar i { background: var(--ivory); }
@media (prefers-color-scheme: dark) { .news-row--own { background: #16365C; border-color: rgba(246, 241, 231, .28); } }
.news-w71 { width: 71%; }
.news-w84 { width: 84%; }
.news-w58 { width: 58%; }
/* Kybernetická hygiena: osmidílný ukazatel (5 v pořádku, 1 částečně, 2 chybí). */
.news-big { margin: 0; display: flex; align-items: baseline; gap: 8px; color: var(--text-soft); font-size: .9rem; }
.news-big b { font-family: var(--serif); font-weight: 400; font-size: 2.3rem; line-height: 1; color: var(--heading);
  white-space: nowrap; }
.news-meter { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.news-seg { display: block; height: 12px; border-radius: 4px; background: var(--track); }
.news-seg--ok { background: var(--green); }
.news-seg--part { background: var(--amber); }
.news-seg--miss { background: var(--red); }
/* Třetí strany: dvě dlaždice a tečky služeb (jantarové = provozovatel mimo EU). */
.news-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.news-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 7px; padding: 9px 11px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line); font-size: .8rem; color: var(--text-soft); }
.news-stat b { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--heading); }
.news-stat--warn { border-color: var(--amber); background: var(--amber-bg); color: var(--amber); }
.news-stat--warn b { color: var(--amber); }
.news-dots { display: flex; gap: 7px; }
.news-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--navy-soft); }
.news-dot--out { background: var(--amber); }
@media (prefers-color-scheme: dark) { .news-dot { background: #C9D6E6; } .news-dot--out { background: var(--amber); } }
/* Vedle sebe stejně vysoké ilustrace (nadpisy karet v jedné linii); pod sebou jen podle obsahu. */
@media (min-width: 861px) { .news-art { min-height: 196px; } }
@media (max-width: 860px) {
  .news-grid { grid-template-columns: minmax(0, 1fr); }
}
.about { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 30px; align-items: center; padding: 34px;
  border-radius: var(--radius); background: var(--ivory); color: var(--navy); border: 1px solid var(--ivory-deep);
  scroll-margin-top: 96px; }
.about-mark { width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; background: var(--navy);
  color: var(--ivory); font-weight: 600; font-size: 2.1rem; letter-spacing: -.03em; box-shadow: var(--shadow-lg); }
.about .eyebrow { margin-bottom: 10px; color: var(--navy-soft); }
.about h2 { margin: 0 0 4px; font-family: var(--serif); font-weight: 400; font-size: 1.8rem; line-height: 1.15; color: var(--navy); }
.about .role { margin: 0 0 12px; font-size: .9rem; color: var(--navy-soft); }
.about p { margin: 0; color: #3A4A5F; max-width: 62ch; }
.about .btn { margin-top: 18px; }
@media (prefers-color-scheme: dark) {
  .about { background: var(--surface); color: var(--text); border-color: var(--line); }
  .about h2 { color: var(--ivory); }
  .about p, .about .role, .about .eyebrow { color: var(--text-soft); }
  .about-mark { background: var(--ivory); color: var(--navy); }
}
.faq { max-width: 760px; margin-left: auto; margin-right: auto; scroll-margin-top: 96px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 4px; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px;
  font-weight: 600; color: var(--heading); font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--muted); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 10px 0 0; color: var(--text-soft); max-width: 64ch; }

/* --- jak to funguje ---------------------------------------------------------------- */
.how { text-align: center; }
.eyebrow--center { margin-bottom: 14px; }
.section-heading { font-family: var(--serif); font-weight: 400; color: var(--heading);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); letter-spacing: -.015em; line-height: 1.15; margin: 0 0 30px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); text-align: left; }
.step { padding: 26px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.step-num { display: block; font-family: var(--serif); font-style: italic; font-size: 1.9rem; line-height: 1; color: var(--navy-light); }
@media (prefers-color-scheme: dark) { .step-num { color: #C9D6E6; } }
.step h3 { margin: 16px 0 8px; font-size: 1.05rem; font-weight: 600; color: var(--heading); }
.step p { margin: 0; color: var(--muted); font-size: .93rem; }

/* Ceník (rozhodnutí provozovatele 29. 9. 2026): Zdarma / Prémium (navy) / Agentura. Kotva
   #cenik (odkaz v horní liště) nesmí skončit pod lepivou lištou. */
.pricing { text-align: center; scroll-margin-top: 96px; }
.plans { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr);
  text-align: left; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 30px 26px 26px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.plan--featured { --on-navy: var(--ivory); --on-navy-soft: rgba(246, 241, 231, .78);
  background: var(--navy); color: var(--on-navy); border-color: var(--navy); box-shadow: var(--shadow-lg); }
/* Obrys fokusu na navy kartě: globální --accent je ve světlém režimu navy (neviditelný). */
.plan--featured :focus-visible { outline-color: var(--on-navy); }
@media (prefers-color-scheme: dark) { .plan--featured { background: #16365C; border-color: rgba(246, 241, 231, .28); } }
.plan-name { margin: 0 0 14px; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.plan--featured .plan-name { color: var(--on-navy-soft); }
.plan-price { margin: 0; font-family: var(--serif); font-size: 2.4rem; line-height: 1.05; color: var(--heading); }
.plan-price small { font-family: var(--sans); font-size: .95rem; color: var(--muted); }
.plan-price--text { font-size: 2rem; }
.plan--featured .plan-price, .plan--featured .plan-price small { color: var(--on-navy); }
.plan-alt { margin: 8px 0 0; font-size: .88rem; color: var(--muted); }
.plan--featured .plan-alt { color: var(--on-navy-soft); }
.plan ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 11px; flex: 1; align-content: start; }
.plan ul li { position: relative; padding-left: 26px; font-size: .95rem; }
/* Fajfka kreslená rámečkem (ne znak ✓): nezávisí na písmu a čtečka ji nečte. */
.plan ul li::before { content: ""; position: absolute; left: 4px; top: .4em; width: 6px; height: 11px;
  border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plan--featured ul li::before { border-color: #8FDBA9; }
.plan .btn { align-self: stretch; justify-content: center; text-align: center; white-space: normal; line-height: 1.25; }
.pricing-note { margin: 18px auto 0; max-width: 72ch; font-size: .86rem; color: var(--muted); }
.pricing-note a { color: inherit; }
.plan-terms { align-self: center; margin-top: 10px; font-size: .86rem; color: inherit; text-decoration: underline; }
/* Věta pod výhodami u formuláře kontroly (zásady a podmínky užití). */
.trust-note { margin: 10px auto 0; max-width: 72ch; text-align: center; font-size: .86rem; color: var(--muted); }
.trust-note a { color: inherit; }
/* Podmínky užití a prémia: číslované body a vzorový formulář. */
.terms-list { padding-left: 22px; }
.terms-list li { margin: 0 0 12px; }
.terms-list li p { margin: 0; }
.withdrawal { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.withdrawal h2 { font-size: 1.1rem; }
.terms-pdf { text-align: center; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

/* --- upozornění, texty stránek ----------------------------------------------------- */
.disclaimer { margin-top: 30px; }
.disclaimer h2 { font-size: 1rem; font-weight: 600; margin: 0 0 14px; color: var(--heading); }
.disclaimer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px 28px; grid-template-columns: 1fr 1fr;
  color: var(--muted); font-size: .9rem; }
.disclaimer strong { display: block; color: var(--heading); font-weight: 600; margin-bottom: 3px; }

.prose h2 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin: 0 0 10px; color: var(--heading); }
.card[id] { scroll-margin-top: 96px; } /* kotvy (/zasady#poptavky) pod lepivou lištou */
.prose p, .prose li { color: var(--text-soft); font-size: .97rem; }
.prose ul { padding-left: 18px; }
pre.robots { font-family: var(--mono); background: var(--line-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px; font-size: .95rem; overflow-x: auto; color: var(--text); }
.notice-card .score-domain { font-weight: 600; font-size: 1.15rem; margin: 0 0 6px; word-break: break-all; color: var(--heading); }
.wrap > .hint { text-align: center; }

/* Zásady (/zasady): obsah s odkazy na oddíly a tabulka dob uložení. Na telefonu se tabulka
   rozloží do bloků pod sebe (stránka se do strany neposouvá). */
.toc ol { margin: 0; padding-left: 22px; columns: 2 16rem; column-gap: 32px; }
.toc li { margin: 3px 0; break-inside: avoid; }
.table-wrap { overflow-x: auto; }
.retention { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 4px 0 14px; }
.retention th, .retention td { text-align: left; vertical-align: top; padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--line); color: var(--text-soft); font-weight: 400; }
.retention thead th { color: var(--heading); font-weight: 600; font-size: .86rem; }
.retention tbody th { color: var(--text); width: 56%; }
@media (max-width: 560px) {
  .retention thead { display: none; }
  .retention tr { display: block; padding: 9px 0; border-bottom: 1px solid var(--line); }
  .retention th, .retention td { display: block; width: auto; padding: 0; border: 0; }
  .retention tbody th { font-weight: 600; margin-bottom: 2px; }
}

/* Stránka robota (/bot): dlouhý User-Agent a adresy IPv6 se zalomí i na mobilu. */
.bot-ua code, .bot-ips code { overflow-wrap: anywhere; }
.prose .bot-ips { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }

/* Tematické stránky a rozcestník „Co kontrolujeme“: drobečková navigace, čitelný sloupec
   článku (nejvýš ~70 znaků na řádek), příkazy v bloku s vlastním posuvníkem (stránka se
   do strany neposouvá ani na 390 px), výzva ke kontrole (navy jako .cta) a karty témat.
   Barvy jen z tokenů (kontrast hlídá tests/webapp/test_seo_a11y.py). */
.crumbs { max-width: 70ch; margin: 28px auto 0; font-size: .86rem; color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--muted); }
.crumbs a { color: var(--text-soft); }
.crumbs [aria-current="page"] { color: var(--muted); }
.hero--topic { margin: 28px auto 36px; }
.hero--topic h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3rem); line-height: 1.1; margin: 0 0 18px; overflow-wrap: break-word; }
/* Datum poslední změny průvodce (stejné jako Article.dateModified a <lastmod>). */
.article-updated { margin: 14px 0 0; font-size: .85rem; color: var(--muted); }
.article { max-width: 70ch; margin: 0 auto; }
.article section + section, .article > section:first-child:not(:only-child) { margin-top: 36px; }
.article h2 { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.25; margin: 0 0 12px; color: var(--heading); }
.article h3 { font-size: 1.02rem; font-weight: 600; line-height: 1.4; margin: 0 0 6px; color: var(--heading); }
.article p, .article li { color: var(--text-soft); line-height: 1.7; }
.article p { margin: 0 0 14px; }
.article ul { padding-left: 20px; margin: 0 0 14px; }
.article li + li { margin-top: 8px; }
.article strong { color: var(--heading); font-weight: 600; }
.article code { overflow-wrap: anywhere; }
.article pre.cmd { margin: 0 0 14px; padding: 14px 16px; overflow-x: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .88rem; line-height: 1.6; color: var(--text); }
.article pre.cmd code { padding: 0; background: none; font-size: inherit; white-space: pre; overflow-wrap: normal; }
.article-note { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--line); font-size: .95rem; }
.cta--topic { max-width: calc(70ch + 68px); margin: 48px auto; }
.cta--topic .cta-alt--topic { grid-column: 1 / -1; text-align: left; margin: 0; }
.faq-list { margin-top: 48px; scroll-margin-top: 96px; }
.faq-item { padding: 16px 0; border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item p { margin: 0; }
.related { margin-top: 48px; }
.related ul { columns: 2 16ch; column-gap: 32px; }
.related li { break-inside: avoid; }
.topic-grid { list-style: none; margin: 0 0 48px; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.topic-card { padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.topic-card h2 { margin: 0 0 8px; font-family: var(--serif); font-weight: 500; font-size: 1.25rem; line-height: 1.25; }
.topic-card h2 a { color: var(--heading); }
.topic-card p { margin: 0; color: var(--text-soft); font-size: .95rem; }
/* Odkaz z formuláře tematické stránky na úvod (#scan-form) nesmí skončit pod lepivou lištou. */
.searchbar { scroll-margin-top: 120px; }
/* Úvodní stránka: odkaz z oblasti kontroly na průvodce a na rozcestník. */
.check-a a { color: inherit; }
.check-a a:hover { color: var(--heading); }
.checks-more { margin: 22px 0 0; text-align: center; }

/* Cloudflare Turnstile: widget je vidět, jen když Cloudflare žádá ruční potvrzení. Kontejner
   je široký jako widget (obrys fokusu ho obepne); fokus sem přesune app.js ze zakázaného
   tlačítka. Pokyn pod widgetem poptávky je v barvě textu navy bloku. */
.turnstile.is-interactive { display: flex; justify-content: center; width: fit-content; max-width: 100%;
  margin: 14px auto 0; border-radius: 10px; }
.turnstile:focus { outline: none; }
.turnstile:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
/* Upozornění, že poptávka čeká na potvrzení „jsem člověk“: červeně (na navy světlejší červená). */
.inquiry-verify { margin: 12px 0 0; font-size: .92rem; font-weight: 600; color: var(--on-navy-error); text-align: center; }

/* --- lišta souhlasu s cookies (static/consent.js; jen s Google Tag Managerem) ------------ */
/* Karta dole přes celou šířku obsahu: nic nepřekrývá celé, stránka jde číst i posouvat (žádná
   zeď). „Přijmout vše“ a „Odmítnout vše“ mají stejný vzhled (--choice), „Nastavení“ a „Uložit
   výběr“ jsou obrysová. Barvy jen z tokenů (světlý i tmavý režim; kontrast hlídá test
   tests/webapp/test_consent.py). Zobrazení řídí atribut hidden. */
.consent-banner { position: fixed; z-index: 30; left: 16px; right: 16px; bottom: 16px; max-width: 1040px;
  margin: 0 auto; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 20px 24px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.consent-banner[hidden], .consent-banner [hidden] { display: none !important; }
.consent-banner:focus { outline: none; }
.consent-banner:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.consent-main { display: grid; gap: 16px 32px; align-items: center; }
.consent-title { margin: 0 0 6px; padding-right: 44px; font-family: var(--serif); font-weight: 500;
  font-size: 1.2rem; line-height: 1.25; color: var(--heading); }
.consent-text { margin: 0; max-width: 72ch; font-size: .92rem; line-height: 1.55; color: var(--text-soft); }
.consent-text + .consent-text { margin-top: 4px; }
.consent-text a { color: var(--accent); font-weight: 500; white-space: nowrap; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#consent-toggle { grid-column: 1 / -1; }
#consent-save { width: 100%; }
.consent-btn { min-height: 44px; padding: 12px 20px; font-size: .95rem; line-height: 1.2; white-space: normal;
  text-align: center; }
.consent-btn--choice { background: var(--accent); color: var(--accent-ink); }
.consent-btn--choice:hover { background: var(--accent-hover); }
.consent-btn--more { background: transparent; color: var(--heading); border-color: var(--muted); }
.consent-btn--more:hover { border-color: var(--accent); }
/* Rozbalení nastavení: šipka u tlačítka (stav čte čtečka z aria-expanded). */
#consent-toggle::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 4px; border: solid currentColor;
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s; }
#consent-toggle[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.consent-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0;
  background: transparent; color: var(--heading); border-color: var(--line); font-size: 1.3rem; }
.consent-close:hover { border-color: var(--accent); }
.consent-settings { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.consent-cats { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.consent-cat { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); }
.consent-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.consent-cat-name { font-weight: 600; font-size: .95rem; color: var(--heading); cursor: default; }
label.consent-cat-name { cursor: pointer; }
.consent-cat-always { font-size: .82rem; color: var(--muted); }
.consent-cat-desc { margin: 6px 0 0; font-size: .86rem; line-height: 1.5; color: var(--text-soft); }
/* Přepínač: skutečný checkbox (role switch) přes celou plochu, vzhled nese stopa vedle něj.
   Stav nejde poznat jen barvou: jezdec se posune. Obrys stopy 3 : 1 (WCAG 1.4.11). */
.consent-switch { position: relative; flex: none; width: 46px; height: 26px; }
.consent-switch-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; }
.consent-switch-track { position: absolute; inset: 0; border: 2px solid var(--muted); border-radius: 999px;
  background: transparent; transition: background .2s, border-color .2s; }
.consent-switch-track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.consent-switch-input:checked + .consent-switch-track { background: var(--accent); border-color: var(--accent); }
.consent-switch-input:checked + .consent-switch-track::before { transform: translateX(20px); background: var(--accent-ink); }
.consent-switch-input:focus-visible + .consent-switch-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.consent-done { margin-top: 16px; }
.consent-done p { margin: 0 0 12px; font-size: .95rem; color: var(--text); }
@media (min-width: 821px) {
  .consent-main { grid-template-columns: minmax(0, 1fr) auto; }
  .consent-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; }
  .consent-actions .consent-btn { white-space: nowrap; }
  .consent-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #consent-save { width: auto; }
}
@media (max-width: 560px) {
  .consent-banner { left: 8px; right: 8px; bottom: 8px; max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px); padding: 16px 16px 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  .consent-banner { animation: consent-in .25s ease-out; }
}
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } }
@media print { .consent-banner { display: none !important; } }

/* --- patička (navy jako na on-consulting.cz) --------------------------------------- */
/* Barvy textu jen z tokenů --foot-* (kontrast ověřuje test), pozadí --foot-bg. */
.foot { background: var(--foot-bg); color: var(--foot-text); }
.foot-inner { max-width: 1120px; margin: 0 auto; padding: 56px clamp(20px, 4vw, 40px) 28px; font-size: .9rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.foot p { margin: 0 0 6px; }
.foot-logo { font-family: var(--serif); font-size: 1.5rem; color: var(--foot-heading); margin-bottom: 12px !important; }
.foot-logo span:not(.dot) { font-family: var(--sans); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--foot-logo-sub); margin-left: 8px; }
.foot-tagline { max-width: 38ch; line-height: 1.6; }
.foot-h { color: var(--foot-heading); font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px !important; }
.foot a { color: var(--foot-link); text-decoration: none; }
.foot a:hover { color: var(--foot-heading); }
/* Obrys fokusu na navy patičce: globální --accent je ve světlém režimu navy (neviditelný). */
.foot :focus-visible { outline-color: var(--foot-heading); }
.foot-links { display: flex; flex-direction: column; gap: 8px; }
/* „Nastavení cookies“ (otevře lištu souhlasu): tlačítko vzhledem jako odkazy patičky. */
.foot-link-button { justify-content: flex-start; padding: 0; border: 0; border-radius: 4px; background: none;
  font: inherit; line-height: inherit; text-align: left; color: var(--foot-link); }
.foot-link-button:hover { color: var(--foot-heading); }
.foot-link-button[hidden] { display: none; }
.foot-bottom { border-top: 1px solid rgba(246, 241, 231, .1); padding-top: 20px; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 10px 24px; font-size: .8rem; color: var(--foot-small); }
.foot-bottom p { margin: 0; }
@media (prefers-color-scheme: dark) { .foot { border-top: 1px solid var(--line); } }

/* --- responzivita a přístupnost ----------------------------------------------------- */
/* Střední šířky: čtyři odkazy na sekce (s „Ceníkem“) a on-consulting.cz se do lišty nevejdou
   a odkazy by se lámaly na dva řádky (španělsky až do 990 px). Odkaz na on-consulting.cz
   tu zůstane jen v patičce a mezery se zmenší; pod 821 px lišta nese jen on-consulting.cz. */
@media (min-width: 821px) and (max-width: 1040px) {
  .topnav { gap: 20px; }
  .topnav-ext { display: none; }
}
@media (max-width: 820px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase-img { transform: none; }
  .checks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking { grid-template-columns: 1fr; text-align: center; }
  .booking p { margin-left: auto; margin-right: auto; }
  .about { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .topnav a:not(.topnav-ext) { display: none; }
  .topnav-ext { border-left: 0; padding-left: 0; }
  .steps { grid-template-columns: 1fr; }
  .disclaimer ul { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .cta { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .cta-text p { margin-left: auto; margin-right: auto; }
  .cta--topic .cta-alt--topic { text-align: center; }
}
@media (max-width: 560px) {
  .brand-sub { display: none; }
  .brand-divider { display: none; }
  .langs { padding-left: 10px; }
  .langs a { padding: 4px 6px; }
  .hero--home { margin-top: 40px; }
  .card, .result-card, .cta, .booking, .about { padding: 22px; }
  .checks-grid { grid-template-columns: 1fr; }
  .block { margin-top: 72px; }
  .searchbar { flex-wrap: wrap; border-radius: 22px; padding: 10px; }
  .searchbar-icon { display: none; }
  .searchbar input { padding: 10px 8px; text-align: center; }
  .searchbar button { width: 100%; }
  .result-head { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
  .badges { justify-content: center; }
  .areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .area { padding: 12px 13px 13px; display: flex; flex-direction: column; }
  .area-top { align-items: flex-start; min-height: 2.6em; }
  .area-label { font-size: .78rem; line-height: 1.3; }
  .area-score { margin-top: auto; }
  .area-score { font-size: 1.4rem; }
  .actions .btn { flex: 1 1 100%; }
  .compare-actions .btn { flex: 1 1 100%; }
  .cmp-tiles { grid-template-columns: minmax(0, 1fr); }
  .cmp-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; }
  .cmp-tile-role, .cmp-tile-domain, .cmp-tile-link { grid-column: 1; }
  .cmp-tile-score { grid-column: 2; grid-row: 1 / span 3; margin: 0; font-size: 2rem; text-align: right; }
  .cmp-tile-score small { display: block; margin-top: 4px; }
  .cta-actions { align-items: stretch; }
  .cta .btn { width: 100%; white-space: normal; line-height: 1.25; text-align: center; }
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
  .related ul { columns: 1; }
  .hero--topic { margin-top: 20px; }
}
@media (max-width: 420px) {
  /* Úzký displej: odkaz na on-consulting.cz zůstává v patičce, lišta nese značku a jazyky. */
  .topnav { display: none; }
  .langs { margin-left: auto; padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}