/* The new public web (design "Web E", public/web.html, /novy-web).
 * One heavy grotesque, flat colour tiles and full-bleed bands: red for the
 * alarm, navy for the app. Light = white page; dark = the app's near-black
 * ground (#0B0F14) with navy surfaces. Dark is the default (2026-11-10):
 * html[data-web-theme="dark"] unless the visitor picked Svetlý, or Auto,
 * which removes the attribute and follows prefers-color-scheme.
 * Self-hosted Figtree (vendor/fonts/figtree.css), the app's own face, stands in for the design's Onest. */

.rce {
  --bg: #FFFFFF; --soft: #F3F4F6; --ink: #0F1B2D; --muted: #5A6576; --line: #E3E6EB;
  /* --red-surface: the red blocks with white text (and dimmed white) on
     them - darker than the brand red, 6.5:1 with white */
  --red: #D9211A; --red-hover: #B81A14; --red-surface: #B3261E; --red-text: #C41E17;
  --navy: #0F1B2D; --navy-line: transparent; --navy-text: #D5DCE6;
  --blush: #FCE6E3; --mist: #E6ECF4; --ember: #FFE8D4;
  --pill: #0F1B2D; --pill-ink: #FFFFFF; --device: #1A2333;
  --foot: #0F1B2D; --foot-ink: #E6EAF0; --foot-muted: #9AA7BA;
  --kiko-bg: #FCE6E3; --free-bg: #E3F4EA; --free-ink: #156B3E; --prem-bg: #FFF1D6; --prem-ink: #8A4B00;
  --plan-bg: rgba(255,255,255,.07); --plan-line: rgba(255,255,255,.14); --toggle: #F3F4F6;
  --pop: #FFFFFF; --pop-shadow: 0 24px 48px -20px rgba(15,27,45,.35); --seg-on: #FFFFFF; --seg-shadow: 0 1px 3px rgba(15,27,45,.18);
  --ok-bg: #E3F4EA; --ok-ink: #156B3E; --ok-dot: #16A34A; --warn-bg: #FFF1D6; --warn-ink: #8A4B00; --warn-dot: #F59E0B;
  --down-bg: #FDE4E2; --down-ink: #B3170F; --down-dot: #DC2626;
  --f: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html:not([data-web-theme="light"]) .rce {
    --bg: #0B0F14; --soft: #111A26; --ink: #F2F5F9; --muted: #A6B1C2; --line: #1F2A3A;
    --red-hover: #EE3A2F; --red-surface: #B3170F; --red-text: #FF7A6E;
    --navy: #132036; --navy-line: #22324C; --navy-text: #C9D2DF;
    --blush: #2A1414; --mist: #12213A; --ember: #271B10;
    --pill: #F2F5F9; --pill-ink: #0B0F14; --device: #2A3448;
    --foot: #06090D; --foot-muted: #8E9AAD;
    --kiko-bg: #3A1512; --free-bg: #12301F; --free-ink: #6EE0A0; --prem-bg: #3A2A10; --prem-ink: #FFC266;
    --plan-bg: rgba(255,255,255,.04); --plan-line: #22324C; --toggle: #162131;
    --pop: #16233A; --pop-shadow: 0 24px 48px -16px rgba(0,0,0,.7); --seg-on: #2A3B57; --seg-shadow: none;
    --ok-bg: #12301F; --ok-ink: #6EE0A0; --ok-dot: #34D27B; --warn-bg: #3A2A10; --warn-ink: #FFC266; --warn-dot: #FBBF24;
    --down-bg: #3A1512; --down-ink: #FF8A80; --down-dot: #F87171;
    color-scheme: dark;
  }
}
html[data-web-theme="dark"] .rce {
  --bg: #0B0F14; --soft: #111A26; --ink: #F2F5F9; --muted: #A6B1C2; --line: #1F2A3A;
  --red-hover: #EE3A2F; --red-surface: #B3170F; --red-text: #FF7A6E;
  --navy: #132036; --navy-line: #22324C; --navy-text: #C9D2DF;
  --blush: #2A1414; --mist: #12213A; --ember: #271B10;
  --pill: #F2F5F9; --pill-ink: #0B0F14; --device: #2A3448;
  --foot: #06090D; --foot-muted: #8E9AAD;
  --kiko-bg: #3A1512; --free-bg: #12301F; --free-ink: #6EE0A0; --prem-bg: #3A2A10; --prem-ink: #FFC266;
  --plan-bg: rgba(255,255,255,.04); --plan-line: #22324C; --toggle: #162131;
  --pop: #16233A; --pop-shadow: 0 24px 48px -16px rgba(0,0,0,.7); --seg-on: #2A3B57; --seg-shadow: none;
  --ok-bg: #12301F; --ok-ink: #6EE0A0; --ok-dot: #34D27B; --warn-bg: #3A2A10; --warn-ink: #FFC266; --warn-dot: #FBBF24;
  --down-bg: #3A1512; --down-ink: #FF8A80; --down-dot: #F87171;
  color-scheme: dark;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.rce {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f);
  font-size: 18px; line-height: 1.5; overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.rce *, .rce *::before, .rce *::after { box-sizing: border-box; }
.rce a { color: inherit; text-decoration: none; }
.rce a:focus-visible, .rce button:focus-visible, .rce summary:focus-visible {
  outline: 3px solid var(--red-text); outline-offset: 3px; border-radius: 12px;
}
.rce h1, .rce h2, .rce h3 { margin: 0; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.rce p { margin: 0; }
.rce img { max-width: 100%; }
.rce .skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--red); color: #FFF; padding: 10px 16px; border-radius: 12px; font-weight: 700; }
.rce .skip:focus { left: 12px; }
.rce .wrap {
  max-width: 1240px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.rce .ic { width: 20px; height: 20px; flex: none; }
.rce section[id] { scroll-margin-top: 80px; }

/* nav */
.rce .nav { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.rce .nav-in { height: 72px; display: flex; align-items: center; gap: 32px; }
.rce .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; letter-spacing: -.03em; }
.rce .mark { display: block; width: 34px; height: 34px; flex: none; }
.rce .links { display: flex; gap: 26px; font-weight: 600; font-size: 16px; }
.rce .links a { white-space: nowrap; }
/* nav-fit (web.html): the nav tightens first, then drops the status words,
   then folds the links into the burger, whichever language is longer */
.rce .nav.fit-1 .nav-status .st-label { display: none; }
.rce .nav.fit-1 .nav-status { width: 36px; padding: 0; justify-content: center; }
.rce .nav.fit-0 .nav-in { gap: 24px; }
.rce .nav.fit-0 .links { gap: 20px; font-size: 15px; }
.rce .nav.fit-2 .links { display: none; }
.rce .nav.fit-2 .burger { display: inline-flex; }
.rce .links a:hover { color: var(--red-text); }
.rce .nav-end { margin-left: auto; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.rce .nav-login { padding-inline: 4px; white-space: nowrap; }
.rce .nav-login:hover { color: var(--red-text); }
.rce .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px;
  border-radius: 24px; font-weight: 700; font-size: 16px; border: 0; cursor: pointer; font-family: var(--f); white-space: nowrap;
}
.rce .btn-red { background: var(--red); color: #FFFFFF; }
.rce .btn-red:hover { background: var(--red-hover); }
.rce .round {
  width: 48px; height: 48px; border-radius: 24px; border: 0; background: var(--toggle); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0;
}
.rce .round:hover { color: var(--red-text); }

/* status pill: the landing header's green dot, with its words */
.rce .status {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border-radius: 18px;
  font-size: 14px; font-weight: 700; white-space: nowrap; background: var(--ok-bg); color: var(--ok-ink); flex: none;
}
.rce .status:hover { filter: brightness(.97); }
.rce .st-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--ok-dot); flex: none; }
.rce .st-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ok-dot);
  opacity: 0; animation: rce-pulse 2.4s ease-out infinite;
}
.rce .st-warn { background: var(--warn-bg); color: var(--warn-ink); }
.rce .st-warn .st-dot, .rce .st-warn .st-dot::after { background: var(--warn-dot); border-color: var(--warn-dot); }
.rce .st-warn .st-dot::after { background: none; }
.rce .st-down { background: var(--down-bg); color: var(--down-ink); }
.rce .st-down .st-dot { background: var(--down-dot); }
.rce .st-down .st-dot::after { border-color: var(--down-dot); }
@keyframes rce-pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rce .st-dot::after { animation: none; } }
.rce .menu-status, .rce .foot-status { height: 40px; }
.rce .foot-status { font-size: 14px; }
/* the footer is navy in both themes, so its pill keeps the dark-theme colours */
.rce .foot .status.st-ok { background: rgba(52,210,123,.14); color: #6EE0A0; }
.rce .foot .status.st-ok .st-dot { background: #34D27B; }
.rce .foot .status.st-ok .st-dot::after { border-color: #34D27B; }
.rce .foot .status.st-warn { background: rgba(251,191,36,.16); color: #FFC266; }
.rce .foot .status.st-down { background: rgba(248,113,113,.16); color: #FF8A80; }

/* popovers in the nav: language and theme */
.rce .pop { position: relative; }
.rce .pop-btn {
  list-style: none; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 8px 0 7px; border-radius: 22px;
  background: transparent; color: var(--ink); cursor: pointer; border: 1px solid var(--line); font-weight: 700; font-size: 14px;
}
.rce .pop-btn::-webkit-details-marker { display: none; }
.rce .pop-btn:hover, .rce .pop[open] > .pop-btn { border-color: var(--ink); }
.rce .pop-chev { width: 14px; height: 14px; color: var(--muted); transition: transform .15s; }
.rce .pop[open] .pop-chev { transform: rotate(180deg); }
.rce .pop-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 220px; padding: 6px;
  background: var(--pop); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--pop-shadow);
}
.rce .pop-title { padding: 8px 12px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rce .pop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rce .lang-code {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 24px; padding: 0 6px; border-radius: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; background: var(--soft); color: var(--muted); flex: none;
}
.rce .lang-code-on { background: var(--red); color: #FFFFFF; }
.rce .lang-opt, .rce .th-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 0; background: none;
  color: var(--ink); font: 600 15px/1.2 var(--f); text-align: left; cursor: pointer;
}
.rce .lang-opt:hover, .rce .th-opt:hover { background: var(--soft); }
.rce .lang-opt.on { background: var(--soft); font-weight: 800; }
.rce .lang-opt.on .lang-code { background: var(--red); color: #FFFFFF; }
.rce .lang-name { flex: 1; }
.rce .lang-check, .rce .th-check { width: 18px; height: 18px; color: var(--red-text); margin-left: auto; }
.rce .th-list .th-opt > span { flex: 1; }
.rce .th-list .th-opt .th-check { visibility: hidden; }
.rce .th-list .th-opt[aria-pressed="true"] { background: var(--soft); font-weight: 800; }
.rce .th-list .th-opt[aria-pressed="true"] .th-check { visibility: visible; }
.rce .theme-btn { padding-left: 11px; }
.rce .lang-btn .lang-code { border-radius: 14px; min-width: 30px; height: 28px; }
.rce .th-cur { display: none; }
.rce .th-cur .ic { width: 20px; height: 20px; display: block; }
html[data-web-pref="light"] .rce .th-cur-light, html[data-web-pref="dark"] .rce .th-cur-dark,
html:not([data-web-pref="light"]):not([data-web-pref="dark"]) .rce .th-cur-auto { display: block; }

/* the phone menu: theme as a segmented control, languages as a grid */
.rce .menu-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rce .seg { display: flex; width: 100%; padding: 4px; gap: 4px; border-radius: 26px; background: var(--toggle); }
.rce .seg .th-opt {
  flex: 1 1 0; justify-content: center; gap: 8px; height: 44px; padding: 0 8px; border-radius: 22px; color: var(--muted); font-size: 15px;
}
.rce .seg .th-opt .ic { width: 18px; height: 18px; }
.rce .seg .th-opt:hover { background: none; color: var(--ink); }
.rce .seg .th-opt[aria-pressed="true"] { background: var(--seg-on); color: var(--ink); font-weight: 800; box-shadow: var(--seg-shadow); }
.rce .lang-grid { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rce .menu .lang-grid a { border: 1px solid var(--line); border-radius: 14px; padding: 10px; font-size: 15px; }
.rce .menu .lang-grid a.on { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); background: none; }
.rce .burger { display: none; }
.rce .burger .ic-x { display: none; }
.rce .burger[aria-expanded="true"] .ic-x { display: block; }
.rce .burger[aria-expanded="true"] .ic-menu { display: none; }
/* open, the menu covers the whole screen under the bar: its own scroll, the
   page behind locked (html.menu-open), the sticky download bar hidden */
.rce .menu {
  position: fixed; left: 0; right: 0; top: var(--menu-top, 64px); bottom: 0; z-index: 40;
  background: var(--bg); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.rce .menu[hidden] { display: none; }
.rce .menu-in {
  display: flex; flex-direction: column; gap: 14px; max-width: 560px;
  padding-block: 16px calc(28px + env(safe-area-inset-bottom, 0px));
}
/* the menu (2026-11-10): the pages as rows in one card - a tinted icon
   square (the app's bento colours), a title, one muted line, a chevron */
.rce .menu {
  --mi-blue-bg: #E0EAFF; --mi-blue: #2D4FB3; --mi-amber-bg: #FEF0C7; --mi-amber: #B54708;
  --mi-fire-bg: #FEE4E2; --mi-fire: #B42318; --mi-green-bg: #DCFAE6; --mi-green: #087443;
  --mi-indigo-bg: #E6E4FB; --mi-indigo: #4338A8; --mcard: var(--soft); --mrow-hover: #E9ECF1; --mseg: #E5E8ED;
}
html[data-web-theme="dark"] .rce .menu {
  --mi-blue-bg: #172447; --mi-blue: #A4BCFD; --mi-amber-bg: #2E2310; --mi-amber: #FEC84B;
  --mi-fire-bg: #3A1715; --mi-fire: #FDA29B; --mi-green-bg: #0F2A1F; --mi-green: #75E0A7;
  --mi-indigo-bg: #1E1C3F; --mi-indigo: #B4AEFB; --mrow-hover: #16212F; --mseg: var(--bg);
}
@media (prefers-color-scheme: dark) {
  html:not([data-web-theme]) .rce .menu {
    --mi-blue-bg: #172447; --mi-blue: #A4BCFD; --mi-amber-bg: #2E2310; --mi-amber: #FEC84B;
    --mi-fire-bg: #3A1715; --mi-fire: #FDA29B; --mi-green-bg: #0F2A1F; --mi-green: #75E0A7;
    --mi-indigo-bg: #1E1C3F; --mi-indigo: #B4AEFB; --mrow-hover: #16212F; --mseg: var(--bg);
  }
}
.rce .mcard { background: var(--mcard); border-radius: 22px; }
.rce .mrows { padding: 6px; display: flex; flex-direction: column; }
.rce .mrow {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 12px;
  border-radius: 16px; color: var(--ink);
}
.rce .mrow + .mrow::before {
  content: ""; position: absolute; top: 0; left: 66px; right: 12px; border-top: 1px solid var(--line);
}
.rce .mrow:hover, .rce .mrow:active { background: var(--mrow-hover); }
.rce .mrow:hover::before, .rce .mrow:hover + .mrow::before { opacity: 0; }
.rce .mrow-ic {
  width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid; place-items: center;
}
.rce .mrow-ic .ic { width: 21px; height: 21px; }
.rce .mrow-ic--blue { background: var(--mi-blue-bg); color: var(--mi-blue); }
.rce .mrow-ic--amber { background: var(--mi-amber-bg); color: var(--mi-amber); }
.rce .mrow-ic--amber .ic { fill: currentColor; }
.rce .mrow-ic--fire { background: var(--mi-fire-bg); color: var(--mi-fire); }
.rce .mrow-ic--green { background: var(--mi-green-bg); color: var(--mi-green); }
.rce .mrow-ic--indigo { background: var(--mi-indigo-bg); color: var(--mi-indigo); }
.rce .mrow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rce .mrow-title { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.rce .mrow-sub { font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--muted); }
.rce .mrow .mrow-chev { width: 18px; height: 18px; color: var(--muted); opacity: .7; }
.rce .mrow[aria-current="page"] .mrow-title { color: var(--red-text); }
/* the account: Prihlásiť sa outlined next to the red download */
.rce .menu-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.rce .menu-acts .btn { flex: 1 1 auto; height: 52px; padding: 0 18px; font-size: 16px; }
.rce .menu-acts .menu-login { flex-basis: 40%; }
.rce .menu-acts .menu-dl { flex-basis: 50%; }
/* the settings: one quieter card at the bottom */
.rce .menu-head { padding: 12px 4px 0; font-size: 12px; }
.rce .msets { padding: 4px 16px; }
.rce .mset { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.rce .mset + .mset { border-top: 1px solid var(--line); }
.rce .mset-name { font-size: 15px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.rce .mset-theme { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 14px; }
.rce .msets .seg { background: var(--mseg); }
.rce .msets .seg .th-opt { height: 38px; border-radius: 19px; font-size: 14px; }
.rce .msets .region-row { padding: 2px 0; border: 0; border-radius: 0; }
.rce .msets .region-row:hover { border: 0; }
.rce .msets .region-row .menu-label { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.rce .msets .region-row-val { font-size: 14px; font-weight: 500; color: var(--muted); }
.rce .msets .region-row > .ic { width: 18px; height: 18px; opacity: .7; }
.rce .msets .menu-status { height: 32px; font-size: 13px; padding: 0 12px 0 10px; }
/* the root only: hiding body's overflow as well makes body the scroller,
   and the sticky bar would scroll away with the page under the menu */
html.menu-open { overflow: hidden; }
html.menu-open .rce .nav { z-index: 40; }
html.menu-open .rce .sticky-get { display: none; }

/* store pills + QR */
.rce .get { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.rce .stores { display: flex; flex-wrap: wrap; gap: 12px; }
.rce .store { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 24px 0 18px; border-radius: 30px; background: var(--pill); color: var(--pill-ink); min-width: 0; }
.rce .store:hover { opacity: .92; }
.rce .store svg { width: 26px; height: 26px; fill: currentColor; flex: none; }
.rce .store small { display: block; font-size: 12px; font-weight: 500; opacity: .8; line-height: 1.1; }
.rce .store b { display: block; font-size: 19px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.rce .store-light { background: #FFFFFF; color: #0F1B2D; }
/* the iOS app not public yet (IOS_APP_PUBLIC off): the same badge, greyed
   out, no link, a small "Čoskoro" pill */
.rce .store-soon, .rce .store-soon.store-light { background: var(--soft); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); cursor: default; position: relative; }
.rce .store-soon:hover { opacity: 1; }
.rce .store-soon.store-light { background: rgba(255,255,255,.22); color: rgba(255,255,255,.88); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.rce .store-pill {
  font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  height: 22px; padding: 0 8px; border-radius: 11px; display: inline-flex; align-items: center;
  background: var(--warn-bg); color: var(--warn-ink); margin-left: 4px; flex: none;
}
.rce .store-light .store-pill { background: #FFFFFF; color: #B3170F; }
.rce .qr { display: flex; align-items: center; gap: 16px; }
.rce .qr-box { width: 104px; height: 104px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--line); padding: 10px; flex: none; }
.rce .qr-box svg { display: block; width: 100%; height: 100%; }
.rce .qr-on-red .qr-box { border-color: #FFFFFF; }
.rce .qr p { font-weight: 700; font-size: 16px; line-height: 1.3; }

/* phone frame with a real screenshot */
.rce .shot {
  width: clamp(220px, 28vw, 300px); max-width: 100%; border: 10px solid var(--device); border-radius: 46px; overflow: hidden;
  background: var(--device); flex: none; box-shadow: 0 40px 70px -40px rgba(4,8,14,.65);
  /* bezel above and below the screen, so the app's header is not clipped by the frame's corners */
  position: relative; padding: 30px 0 14px;
}
.rce .shot::before {
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 32%; height: 12px; border-radius: 999px; background: rgba(0,0,0,.55);
}
.rce .shot img { display: block; width: 100%; height: auto; border-radius: 18px; }
.rce .peek { width: clamp(220px, 24vw, 270px); box-shadow: none; }

/* labels */
.rce .badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; font-size: 13px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; align-self: flex-start; }
.rce .badge .ic { width: 14px; height: 14px; }
.rce .b-free { background: var(--free-bg); color: var(--free-ink); }
.rce .b-prem { background: var(--prem-bg); color: var(--prem-ink); }

/* type */
.rce .h-hero { font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: .95; }
.rce .h-hero span { display: block; }
.rce .h-hero .accent { color: var(--red-text); }
.rce .h-hero:is(:lang(de), :lang(hu), :lang(pl)) { font-size: clamp(2.3rem, 4.6vw, 4.4rem); line-height: 1; }
.rce .h-sec { font-size: clamp(2.2rem, 4.6vw, 4.2rem); line-height: 1; }
.rce .h-band { font-size: clamp(2.6rem, 7vw, 6.4rem); line-height: .95; }
.rce .lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--muted); max-width: 40ch; }
.rce .band-lead { font-size: clamp(1.15rem, 1.8vw, 1.5rem); max-width: 38ch; }

/* hero */
.rce .sec { padding-block: 112px; }
.rce .hero-sec { padding-block: 72px 96px; }
.rce .hero { display: flex; gap: 48px; align-items: center; }
.rce .hero-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.rce .hero-vis {
  flex: 0 0 520px; max-width: 100%; border-radius: 40px; background: var(--red-surface); padding: 56px 24px;
  display: flex; justify-content: center; align-items: center; position: relative;
}

/* tiles */
.rce .stack { display: flex; flex-direction: column; gap: 48px; }
.rce .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rce .tile { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rce .tile-vis { border-radius: 32px; padding: 40px 20px; display: flex; justify-content: center; align-items: center; }
.rce .tile h3 { font-size: 30px; line-height: 1.1; }
.rce .tile p { color: var(--muted); font-size: 17px; }
.rce .v-red { background: var(--red-surface); }
.rce .v-navy { background: var(--navy); box-shadow: inset 0 0 0 1px var(--navy-line); }
.rce .v-blush { background: var(--blush); }
.rce .v-ember { background: var(--ember); }
.rce .v-mist { background: var(--mist); }
.rce .v-soft { background: var(--soft); }
.rce .more { display: block; font-weight: 700; font-size: 17px; align-self: flex-start; text-wrap: balance; }
.rce .more .ic { display: inline-block; vertical-align: -4px; margin-left: 6px; }
.rce .more:hover { color: var(--red-text); }
.rce .chips { display: flex; flex-wrap: wrap; gap: 12px; }
.rce .chip { display: inline-flex; align-items: center; height: 56px; padding: 0 26px; border-radius: 28px; font-weight: 700; font-size: 20px; }

/* správa zboru s AI: the card (text, six items, Všetky funkcie) and the phone
   as its own panel - a second column on a wide screen, under the card on a
   phone; never inside the card */
.rce .ai-sec { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: stretch; }
.rce .ai-card { background: var(--soft); border-radius: 40px; padding: 64px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.rce .ai-text { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.rce .ai-shot { background: var(--mist); border-radius: 40px; padding: 48px 24px; display: flex; justify-content: center; align-items: center; min-width: 0; }
.rce .ai-shot .shot { width: 300px; }
.rce .feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rce .feat { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px 12px 12px; border-radius: 20px; background: var(--bg); font-size: 16px; line-height: 1.25; min-width: 0; }
.rce .feat span:last-child { min-width: 0; }
.rce .feat-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--soft); color: var(--red-text); display: flex; align-items: center; justify-content: center; flex: none; }
.rce .feat-kiko { background: var(--kiko-bg); }
.rce .feat-kiko .feat-ic { background: var(--red); color: #FFFFFF; }

/* bands */
.rce .band-red { background: var(--red-surface); color: #FFFFFF; }
.rce .band-navy { background: var(--navy); color: #FFFFFF; box-shadow: inset 0 1px 0 var(--navy-line), inset 0 -1px 0 var(--navy-line); }
.rce .band-soft { background: var(--soft); }
.rce .band { padding-block: 120px; display: flex; flex-direction: column; gap: 36px; }
.rce .chip-white { background: #FFFFFF; color: #0F1B2D; }
.rce .chip-ground { background: var(--bg); color: var(--ink); }
.rce .navy-lead { color: var(--navy-text); max-width: 42ch; }
.rce .muted-lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--muted); max-width: 52ch; }

/* plans */
.rce .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rce .plan { background: var(--plan-bg); border: 1px solid var(--plan-line); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rce .plan h3 { font-size: 28px; line-height: 1.1; color: #FFFFFF; }
.rce .plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 17px; color: var(--navy-text); }
.rce .plan li { display: flex; gap: 10px; align-items: flex-start; }
.rce .plan li .ic { margin-top: 3px; color: #6EE0A0; }
.rce .plan-note { font-size: 15px; color: var(--navy-text); border-top: 1px solid var(--plan-line); padding-top: 16px; }
.rce .more-white { color: #FFFFFF; }
.rce .more-white:hover { color: #FFFFFF; text-decoration: underline; }

/* download */
.rce .dl {
  background: var(--red-surface); color: #FFFFFF; border-radius: 40px; padding: 72px 72px 0;
  display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-end; overflow: hidden;
}
.rce .dl-text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 28px; padding-bottom: 72px; }
.rce .dl-text > p { font-size: 20px; max-width: 30ch; }
.rce .dl-shot { flex: 0 1 300px; display: flex; justify-content: center; min-width: 0; padding-bottom: 72px; margin-inline: auto; }
.rce .dl-shot .shot { width: 280px; }

/* footer */
.rce .foot { background: var(--foot); color: var(--foot-ink); }
.rce .foot-in { padding-block: 72px 40px; display: flex; flex-direction: column; gap: 48px; }
.rce .foot-cols { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 40px; }
.rce .foot-brand { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.rce .foot-brand .logo { color: #FFFFFF; }
.rce .foot-brand > p { color: var(--foot-muted); font-size: 15px; max-width: 30ch; }
.rce .foot-cols h2 { margin: 0 0 14px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--foot-ink); }
.rce .foot-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.rce .foot-cols a { color: var(--foot-muted); }
.rce .foot-cols a:hover, .rce .legal a:hover { color: #FFFFFF; }
.rce .foot-bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.rce .legal { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.rce .legal a { color: var(--foot-muted); }
.rce .copy { font-size: 14px; color: var(--foot-muted); }
.rce .lang { position: relative; }
.rce .lang summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 22px;
  background: rgba(255,255,255,.1); color: #FFFFFF; font-weight: 700; font-size: 15px; cursor: pointer;
}
.rce .lang summary::-webkit-details-marker { display: none; }
.rce .lang summary .ic { width: 16px; height: 16px; }
.rce .lang summary .lang-code { height: 22px; min-width: 30px; font-size: 11px; }
.rce .lang-up { list-style: none; margin: 0 0 8px; padding: 6px; position: absolute; bottom: 100%; left: 0; min-width: 220px; background: #16233A; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; z-index: 5; display: flex; flex-direction: column; gap: 2px; }
.rce .lang-up .lang-opt { color: #E6EAF0; }
.rce .lang-up .lang-opt .lang-code { background: rgba(255,255,255,.1); color: #C9D2DF; }
.rce .lang-up .lang-opt:hover, .rce .lang-up .lang-opt.on { background: rgba(255,255,255,.1); }
.rce .lang-up .lang-opt.on .lang-code { background: var(--red); color: #FFFFFF; }
.rce .lang-up .lang-check { color: #FF8A80; }

.rce .sticky-get { display: none; }

@media (max-width: 1100px) {
  .rce .links { gap: 20px; }
  .rce .nav-in { gap: 24px; }
  .rce .hero-vis { flex-basis: 440px; }
  .rce .ai-sec { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
  .rce .ai-card { padding: 48px 40px; }
  .rce .ai-shot .shot { width: 280px; }
}
@media (max-width: 1240px) {
  .rce .links { gap: 22px; font-size: 15px; }
  .rce .nav-in { gap: 24px; }
}
@media (max-width: 960px) {
  .rce .links { display: none; }
  .rce .burger { display: inline-flex; }
}
@media (max-width: 820px) {
  .rce .nav-login, .rce .nav-dl, .rce .nav-lang, .rce .nav-theme { display: none; }
  .rce .round { width: 44px; height: 44px; }
  .rce .nav-in { height: 64px; gap: 12px; }
  .rce .nav-end { gap: 8px; }
  .rce .hero { flex-direction: column; align-items: stretch; }
  .rce .hero-sec { padding-block: 40px 64px; }
  .rce .qr { display: none; }
  .rce .get, .rce .stores { flex-direction: column; align-items: stretch; }
  .rce .store { height: 58px; justify-content: center; }
  .rce .hero-vis { flex-basis: auto; border-radius: 28px; padding: 36px 16px; }
  .rce .hero-vis .shot { width: 260px; }
  .rce .tiles { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .rce .tile-vis { border-radius: 28px; padding: 36px 16px; }
  .rce .tile-vis .peek { width: 250px; }
  .rce .tile h3 { font-size: 28px; }
  .rce .chip { height: 50px; font-size: 18px; padding: 0 20px; }
  .rce .sec { padding-block: 64px; }
  .rce .band { padding-block: 64px; }
  .rce .ai-sec { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rce .ai-card { padding: 36px 16px; border-radius: 28px; }
  .rce .ai-text { padding-inline: 4px; }
  .rce .ai-shot { padding: 32px 16px; border-radius: 28px; }
  .rce .ai-shot .shot { width: 250px; }
  .rce .feats { gap: 8px; }
  .rce .ai-card .feat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .rce .feat-ic { width: 36px; height: 36px; }
  .rce .feat-ic .ic { width: 18px; height: 18px; }
  .rce .plans { grid-template-columns: minmax(0, 1fr); }
  .rce .plan { padding: 26px 22px; }
  .rce .plan h3 { font-size: 25px; }
  .rce .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .rce .foot-brand { grid-column: 1 / -1; }
  .rce .dl { padding: 36px 22px 0; border-radius: 28px; }
  .rce .dl-text { padding-bottom: 0; }
  .rce .dl-shot { padding-bottom: 32px; }
  .rce .dl-shot .shot { width: 250px; }
  .rce .sticky-get {
    display: flex; position: sticky; bottom: 0; z-index: 20; background: var(--bg); border-top: 1px solid var(--line);
    padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .rce .sticky-get .wrap { width: 100%; }
  .rce .sticky-get .btn { width: 100%; height: 54px; font-size: 17px; }
}
@media (max-width: 420px) {
  .rce .nav-status .st-label { display: none; }
  .rce .nav-status { width: 44px; height: 44px; border-radius: 22px; padding: 0; justify-content: center; }
}

/* --- 2026-11-08 review: wave logo, hero links, calm pillars, map + trust,
   features page, country and language panel ------------------------------ */

/* the live brand mark of the current landing (theme.css .rc-siren): red
   core, wave rings spreading out of it */
.rce { --siren: #D9211A; }
@media (prefers-color-scheme: dark) { html:not([data-web-theme="light"]) .rce { --siren: #F85149; } }
html[data-web-theme="dark"] .rce { --siren: #F85149; }
.rce .rc-siren {
  --rc-siren-size: 18px;
  position: relative; display: inline-block; flex: none;
  width: var(--rc-siren-size); height: var(--rc-siren-size); margin: 0 6px;
  border-radius: 50%; background: var(--siren);
}
.rce .rc-siren::before, .rce .rc-siren::after {
  content: ""; position: absolute; inset: -38%; border-radius: 50%;
  border: 2px solid var(--siren); opacity: .5; animation: rce-siren 2s ease-out infinite;
}
.rce .rc-siren::before { animation-delay: 1s; }
.rce .foot .rc-siren { --siren: #F85149; }
@keyframes rce-siren { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rce .rc-siren::before, .rce .rc-siren::after { animation: none; opacity: .3; } }

/* hero: the bold link inside the lead, and two secondary pill links */
.rce .lead-more { white-space: nowrap; color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--red-text); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rce .lead-more:hover { color: var(--red-text); }
.rce .hero-links { display: flex; flex-wrap: wrap; gap: 10px; }
.rce .hlink {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 6px; border-radius: 24px;
  border: 1px solid var(--line); background: var(--bg); font-weight: 700; font-size: 16px; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.rce .hlink:hover { border-color: var(--ink); }
.rce .hlink > .ic { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; }
.rce .hlink:hover > .ic { transform: translateX(3px); color: var(--red-text); }
.rce .hlink-ic { width: 36px; height: 36px; border-radius: 18px; background: var(--soft); color: var(--red-text); display: flex; align-items: center; justify-content: center; flex: none; }
.rce .hlink-ic .ic { width: 18px; height: 18px; }
.rce .live-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.rce .live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--red); opacity: 0; animation: rce-pulse 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .rce .live-dot::after { animation: none; } }

/* "Od poplachu až po report": calm cards on the neutral surface, the
   whole screenshot under the text, red only in the small icon; the icon
   sits left of the title, the badge in the top right corner */
.rce .pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rce .pcard {
  background: var(--soft); border: 1px solid var(--line); border-radius: 32px; overflow: hidden;
  display: flex; flex-direction: column; min-width: 0; position: relative;
}
.rce .pcard-badge { position: absolute; top: 20px; right: 20px; z-index: 1; }
.rce .pcard:has(> .pcard-badge) .pcard-top { padding-right: 112px; }
.rce .pcard-text { display: flex; flex-direction: column; gap: 14px; padding: 32px 32px 0; }
.rce .pcard h3 { font-size: 30px; line-height: 1.1; }
.rce .pcard p { color: var(--muted); font-size: 17px; max-width: 46ch; }
.rce .pcard-top { display: flex; align-items: center; gap: 14px; }
.rce .pcard-top h3 { min-width: 0; text-wrap: balance; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.rce .pcard-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--blush); color: var(--red-text); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rce .pcard-ic .ic { width: 22px; height: 22px; }
.rce .pcard-vis { margin-top: auto; padding: 32px 24px 36px; display: flex; justify-content: center; align-items: flex-end; }
.rce .pcard-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.rce .pcard-lead .pcard-text { padding: 56px 0 56px 56px; justify-content: center; }
.rce .pcard-lead h3 { font-size: clamp(30px, 3.4vw, 44px); }
.rce .pcard-lead p { font-size: 19px; }
.rce .pcard-lead .pcard-vis { margin-top: 0; padding: 48px 24px; align-items: center; }
.rce .pcard-lead .pcard-vis .peek { width: clamp(240px, 22vw, 290px); }

/* the map card and the trust line under it */
.rce .map-card {
  background: var(--mist); border-radius: 40px; padding: 64px 64px 0; display: grid;
  grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: end; overflow: hidden;
}
.rce .map-text { display: flex; flex-direction: column; gap: 24px; padding-bottom: 64px; min-width: 0; align-items: flex-start; align-self: center; }
.rce .map-shot { padding-bottom: 64px; display: flex; justify-content: center; align-items: flex-start; }
.rce .trust-sec { padding-block: 40px 0; }
.rce .trust {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px 56px; align-items: center;
}
.rce .trust-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; grid-column: 1 / -1; }
.rce .trust-row li { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 20px; background: var(--soft); font-weight: 700; font-size: 15px; }
.rce .trust-ic { width: 30px; height: 30px; border-radius: 15px; background: var(--bg); color: var(--red-text); display: flex; align-items: center; justify-content: center; }
.rce .trust-ic .ic { width: 16px; height: 16px; }
.rce .trust-h { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.08; }
.rce .trust p { color: var(--muted); font-size: 18px; }

/* "Spravujte zbor s AI": six items, label and one line */
.rce .feat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rce .feat-text b { font-weight: 700; font-size: 16px; }
.rce .feat-text small { color: var(--muted); font-size: 14px; line-height: 1.3; }
.rce .more-big { font-size: 19px; }

/* the features page */
.rce .fx-hero { padding-block: 72px 24px; display: flex; flex-direction: column; gap: 24px; }
.rce .fx-hero .lead { max-width: 52ch; }
.rce .fx-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.rce .fx-jump a { height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 20px; border: 1px solid var(--line); font-weight: 700; font-size: 15px; }
/* phone: a compact 3-column grid of small links instead of a tall wall of pills */
@media (max-width: 640px) {
  .rce .fx-jump { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rce .fx-jump a { height: auto; min-height: 40px; padding: 6px 8px; border-radius: 12px; font-size: 13px; line-height: 1.2;
                    text-align: center; justify-content: center; white-space: normal; background: var(--soft); border-color: transparent; }
}
.rce .fx-jump a:hover { border-color: var(--ink); }
.rce .fx-group { padding-block: 40px; display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 80px; }
.rce .fx-group + .fx-group { border-top: 1px solid var(--line); }
.rce .fx-h { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; }
.rce .fx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rce .fx-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px 14px 12px; border-radius: 20px; background: var(--soft); min-width: 0; }
.rce .fx-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rce .fx-text b { font-weight: 700; font-size: 16px; line-height: 1.25; }
.rce .fx-text small { color: var(--muted); font-size: 14px; line-height: 1.35; }
.rce .fx-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--red-text); }
.rce .fx-link:hover { text-decoration: underline; }
.rce .fx-link svg { width: 14px; height: 14px; }
.rce .fx-item .feat-ic { background: var(--bg); }
.rce .fx-item { position: relative; }
.rce .fx-prem .fx-text b { padding-right: 104px; }
.rce .fx-badge { position: absolute; top: 12px; right: 12px; height: 22px; padding: 0 8px; font-size: 11px; }
.rce .fx-badge .ic { width: 11px; height: 11px; }
.rce .fx-dl-qr { flex: 0 0 auto; }
/* the features page has no phone shot under the buttons: the box needs its own bottom edge */
.rce .dl--plain { padding-bottom: 72px; align-items: center; }
.rce .dl--plain .dl-text { padding-bottom: 0; }
@media (max-width: 820px) { .rce .dl--plain { padding: 32px 22px 28px; gap: 24px; } .rce .dl--plain .dl-text { gap: 20px; } }

/* country and language: the row/button that opens the panel */
.rce .flag { font-size: 18px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.rce .region-btn { gap: 6px; padding: 0 6px 0 10px; }
.rce .region-globe { width: 18px; height: 18px; color: var(--muted); }
.rce .region-btn .lang-code { border-radius: 14px; min-width: 30px; height: 28px; }
.rce .region-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line);
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.rce .region-row:hover { border-color: var(--ink); }
.rce .region-row-text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rce .region-row-val { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.rce .region-row > .ic { color: var(--muted); }
.rce .region-foot {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 16px; border-radius: 22px; border: 0;
  background: rgba(255,255,255,.1); color: #FFFFFF; font: 700 15px/1 var(--f); cursor: pointer;
}
.rce .region-foot .ic { width: 16px; height: 16px; }
.rce .region-foot:hover { background: rgba(255,255,255,.16); }

/* the side panel, from the right */
.rce .sheet-back {
  position: fixed; inset: 0; z-index: 60; background: rgba(4,8,14,.5); opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility 0s .25s;
}
.rce .sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(420px, 100%); background: var(--bg);
  display: flex; flex-direction: column; box-shadow: -24px 0 60px -30px rgba(4,8,14,.6);
  transform: translateX(100%); visibility: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s .3s;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
html.sheet-open .rce .sheet { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
html.sheet-open .rce .sheet-back { opacity: 1; visibility: visible; transition: opacity .25s; }
html.sheet-open, html.sheet-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .rce .sheet, .rce .sheet-back { transition: none; } }
.rce .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.rce .sheet-head h2 { font-size: 22px; letter-spacing: -.02em; }
.rce .sheet-body { overflow-y: auto; padding: 8px 20px 28px; display: flex; flex-direction: column; gap: 10px; }
.rce .sheet-body .menu-label { padding-top: 16px; }
.rce .sheet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rce .sheet-opt {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 14px; border-radius: 14px; border: 1px solid transparent;
  font-weight: 600; font-size: 17px;
}
.rce .sheet-opt:hover { background: var(--soft); }
.rce .sheet-opt.on { border-color: var(--red); background: none; font-weight: 800; }
.rce .sheet-opt .flag { font-size: 22px; width: 32px; text-align: center; }
.rce .sheet-name { flex: 1; min-width: 0; }
.rce .sheet-check { color: var(--red-text); }

@media (max-width: 1100px) {
  .rce .map-card { padding: 48px 40px 0; gap: 40px; grid-template-columns: minmax(0, 1fr) 280px; }
  .rce .map-shot .shot { width: 280px; }
  .rce .fx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .rce .nav-region { display: none; }
  .rce .hero-links { flex-direction: column; align-items: stretch; }
  .rce .hlink { justify-content: flex-start; }
  .rce .hlink > span:nth-child(2) { flex: 1; min-width: 0; }
  /* a long name (de "Netzwerk der Feuerwehren mit RaidCall") ran past the
     phone's right edge on one line (QA 2026-11-10): it wraps instead */
  .rce .hlink { white-space: normal; height: auto; min-height: 48px; padding-top: 6px; padding-bottom: 6px; line-height: 1.25; }
  .rce .pillars { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rce .pcard, .rce .pcard-lead { display: flex; border-radius: 28px; }
  .rce .pcard-text, .rce .pcard-lead .pcard-text { padding: 26px 22px 0; }
  .rce .pcard h3 { font-size: 26px; }
  .rce .pcard-lead p, .rce .pcard p { font-size: 17px; }
  .rce .pcard-vis, .rce .pcard-lead .pcard-vis { padding: 28px 16px 28px; }
  .rce .pcard-vis .peek, .rce .pcard-lead .pcard-vis .peek { width: 240px; }
  .rce .pcard:has(> .pcard-badge) .pcard-top { padding-right: 0; }
  .rce .pcard:has(> .pcard-badge) .pcard-text { padding-top: 60px; }
  .rce .pcard-badge { top: 18px; right: 18px; }
  .rce .map-card { grid-template-columns: minmax(0, 1fr); padding: 32px 22px 0; border-radius: 28px; gap: 28px; }
  .rce .map-text { padding-bottom: 0; }
  .rce .map-shot { padding-bottom: 32px; }
  .rce .map-shot .shot { width: 250px; }
  .rce .trust { grid-template-columns: minmax(0, 1fr); padding-block: 32px; }
  .rce .trust p { font-size: 17px; }
  /* the three sources as one row of equal tiles: icon on top, label under */
  .rce .trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
  .rce .trust-row li {
    flex-direction: column; justify-content: flex-start; gap: 8px; height: auto; min-width: 0;
    padding: 14px 6px 12px; border-radius: 18px; font-size: 13px; line-height: 1.2; text-align: center;
    overflow-wrap: anywhere; hyphens: auto;
  }
  .rce .trust-ic { width: 36px; height: 36px; border-radius: 18px; }
  .rce .trust-ic .ic { width: 18px; height: 18px; }
  .rce .fx-hero { padding-block: 40px 8px; }
  .rce .fx-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rce .fx-group { padding-block: 32px; }
  .rce .fx-dl-qr { display: none; }
}

/* --- 2026-11-10: the other public pages in the new web's look -------------
   (public/web/*.html through public.web_page: Cenník, Ako to funguje, Kiko,
   Zbory, Mapa zásahov, a zbor's profile, a zásah, Kontakt, Ukážka reportu,
   the legal texts). One kit from the landing's own parts: the soft cards,
   the blush icon, the red band, the pills. ------------------------------- */

.rce .pg-main { padding-block: 56px 112px; }
.rce .wrap.pg-narrow { max-width: 920px; }
.rce .wrap.pg-mid { max-width: 1120px; }
.rce .pg-back {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 10px; border-radius: 20px;
  border: 1px solid var(--line); font-weight: 700; font-size: 15px; margin-bottom: 28px;
}
.rce .pg-back:hover { border-color: var(--ink); }
.rce .pg-back .ic { width: 16px; height: 16px; }
.rce .pg-hero { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.rce .pg-hero .lead { max-width: 52ch; }
.rce .pg-hero-c { align-items: center; text-align: center; }
.rce .pg-hero-c .lead { margin-inline: auto; }
.rce .pg-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 16px;
  background: var(--blush); color: var(--red-text); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.rce .pg-eyebrow .ic { width: 16px; height: 16px; }
.rce .pg-h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1; }
.rce .pg-h1 .accent { color: var(--red-text); }
.rce .pg-h1-sm { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.04; }
.rce .pg-sec { margin-top: 64px; display: flex; flex-direction: column; gap: 20px; }
.rce .pg-sec-tight { margin-top: 32px; }
.rce .pg-h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.08; }
.rce .pg-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rce .pg-link { color: var(--red-text); font-weight: 700; font-size: 16px; white-space: nowrap; }
.rce .pg-link:hover { text-decoration: underline; }
.rce .pg-link .ic { width: 16px; height: 16px; vertical-align: -3px; }
.rce .pg-muted { color: var(--muted); }
.rce .pg-small { font-size: 15px; line-height: 1.5; }
.rce .pg-tiny { font-size: 13px; line-height: 1.45; color: var(--muted); }
.rce .pg-card {
  background: var(--soft); border: 1px solid var(--line); border-radius: 28px; padding: 32px;
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.rce .pg-card-plain { background: var(--bg); }
.rce .pg-card-accent { border: 2px solid var(--red); background: var(--bg); }
.rce .pg-card h2, .rce .pg-card h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.rce .pg-card p { color: var(--muted); font-size: 17px; }
.rce .pg-card a:not(.btn) { color: var(--red-text); font-weight: 700; }
.rce .pg-card a:not(.btn):hover { text-decoration: underline; }
.rce .pg-grid { display: grid; gap: 16px; }
.rce .pg-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rce .pg-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rce .pg-ic {
  width: 44px; height: 44px; border-radius: 14px; background: var(--blush); color: var(--red-text);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.rce .pg-ic .ic { width: 22px; height: 22px; }
.rce .pg-card-top { display: flex; align-items: center; gap: 14px; }
.rce .pg-card-top > * { min-width: 0; }
.rce .pg-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 17px; }
.rce .pg-check li { display: flex; gap: 12px; align-items: flex-start; }
.rce .pg-check li .ic { color: var(--ok-dot); margin-top: 3px; }
.rce .pg-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.rce .pg-rows li { display: flex; gap: 14px; align-items: flex-start; }
.rce .pg-rows .pg-ic { width: 40px; height: 40px; border-radius: 12px; }
.rce .pg-rows .pg-ic .ic { width: 20px; height: 20px; }
.rce .pg-rows p { font-size: 16px; color: var(--muted); }
.rce .pg-rows b { color: var(--ink); }
.rce .pg-ol, .rce .pg-ul { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.rce .pg-ol li::marker { color: var(--red-text); font-weight: 800; }
.rce .pg-ul li::marker { color: var(--red-text); }
.rce .pg-price { display: flex; align-items: baseline; gap: 6px; font-weight: 800; font-size: 28px; letter-spacing: -.02em; white-space: nowrap; }
.rce .pg-price small { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.rce a.pg-card { transition: border-color .15s; }
.rce a.pg-card:hover { border-color: var(--ink); }
.rce .pg-h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.02em; }
.rce .pg-prog { height: 10px; border-radius: 5px; background: var(--soft); overflow: hidden; }
.rce .pg-prog > span { display: block; height: 100%; border-radius: 5px; background: var(--red); }
.rce .pg-prog-nums { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; font-size: 15px; color: var(--muted); }
.rce .pg-prog-nums b { font-size: 22px; color: var(--ink); }
.rce .pg-big-price { font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.rce .pg-big-price small { font-size: 18px; color: var(--muted); letter-spacing: 0; }
.rce .pg-save { align-self: flex-start; }

/* buttons beside .btn-red */
.rce .btn-white { background: #FFFFFF; color: #B3170F; }
.rce .btn-white:hover { background: #FFF3F2; }
.rce .btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.rce .btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.rce .btn-dark { background: var(--pill); color: var(--pill-ink); }
.rce .btn-dark:hover { opacity: .92; }
.rce .btn-lg { height: 56px; padding: 0 28px; border-radius: 28px; font-size: 17px; }
.rce .btn .ic { width: 18px; height: 18px; }
.rce .pg-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* the red band at the end of a page */
.rce .pg-cta {
  margin-top: 72px; background: var(--red-surface); color: #FFFFFF; border-radius: 40px; padding: 64px;
  display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
}
.rce .pg-cta h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; max-width: 18ch; }
.rce .pg-cta p { font-size: 19px; max-width: 46ch; opacity: .92; }
.rce .pg-cta .pg-tiny { color: #FFFFFF; opacity: .85; }

/* notes and messages */
.rce .pg-note { border-radius: 18px; padding: 14px 18px; font-size: 15px; line-height: 1.5; background: var(--mist); color: var(--ink); }
.rce .pg-note a { color: var(--red-text); font-weight: 700; text-decoration: underline; }
.rce .pg-note-warn { background: var(--warn-bg); color: var(--warn-ink); }
.rce .pg-note .ic { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }
.rce .pg-flashes { padding-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.rce .pg-flash { border-radius: 16px; padding: 14px 18px; font-weight: 700; font-size: 16px; background: var(--mist); }
.rce .pg-flash-ok { background: var(--ok-bg); color: var(--ok-ink); }
.rce .pg-flash-err { background: var(--down-bg); color: var(--down-ink); }

/* forms */
.rce .pg-form { display: flex; flex-direction: column; gap: 12px; }
.rce .pg-form input:not([type=hidden]):not([type=checkbox]), .rce .pg-form textarea, .rce .pg-form select {
  width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line);
  background: var(--bg); color: var(--ink); font: 500 17px/1.4 var(--f); outline: none;
}
.rce .pg-form textarea { resize: vertical; }
.rce .pg-form input::placeholder, .rce .pg-form textarea::placeholder { color: var(--muted); }
.rce .pg-form input:focus, .rce .pg-form textarea:focus, .rce .pg-form select:focus { border-color: var(--red-text); }
.rce .pg-form .btn { width: 100%; height: 56px; font-size: 17px; }
.rce .pg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* _turnstile.html wraps its box in Tailwind's flex utilities */
.rce .flex.justify-center { display: flex; justify-content: center; }
.rce .hidden { display: none !important; }

/* facts in two columns (Kontakt: the company) */
.rce .pg-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 16px; }
.rce .pg-dl dt { color: var(--muted); }
.rce .pg-dl dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.rce .pg-dl a { color: var(--red-text); }

/* numbers in a row */
.rce .pg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; }
.rce .pg-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rce .pg-stat { background: var(--soft); border-radius: 22px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rce .pg-stat b { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rce .pg-stat span { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.rce .pg-stats:empty { display: none; }
/* the live numbers incident_map.js writes into #map-stats */
.rce .pg-stats .rc-dir-stat { background: var(--soft); border: 0; border-radius: 22px; padding: 18px 20px; }
.rce .pg-stats .rc-dir-stat b { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.rce .pg-stats .rc-dir-stat span { font-size: 13px; color: var(--muted); letter-spacing: .05em; }

/* the country pills (Zbory, Mapa zásahov) */
.rce .pg-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; }
.rce .pg-pills::-webkit-scrollbar { display: none; }
.rce .pg-pills a {
  flex: none; height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border-radius: 20px;
  border: 1px solid var(--line); font-weight: 700; font-size: 15px; white-space: nowrap;
}
.rce .pg-pills a:hover { border-color: var(--ink); }
.rce .pg-pills a span { color: var(--muted); font-weight: 600; }
.rce .pg-pills a[aria-current="true"] { background: var(--pill); color: var(--pill-ink); border-color: var(--pill); }
.rce .pg-pills a[aria-current="true"] span { color: inherit; opacity: .75; }

/* the legal texts: the same text, set in the web's type (the documents
   carry Tailwind classes the web does not load - the elements are styled) */
.rce .pg-prose { font-size: 17px; line-height: 1.65; color: var(--ink); overflow-wrap: break-word; }
.rce .pg-prose h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.05; margin: 0 0 12px; }
.rce .pg-prose h2 { font-size: 22px; line-height: 1.25; letter-spacing: -.02em; margin: 40px 0 12px; }
.rce .pg-prose h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; margin: 24px 0 8px; }
.rce .pg-prose h1 + p { color: var(--muted); font-size: 15px; margin-bottom: 28px; }
.rce .pg-prose p { margin: 0 0 12px; }
.rce .pg-prose ul, .rce .pg-prose ol { margin: 0 0 14px; padding-left: 1.4em; }
.rce .pg-prose ul { list-style: disc; }
.rce .pg-prose ol { list-style: decimal; }
.rce .pg-prose li { margin-bottom: 6px; }
.rce .pg-prose li::marker { color: var(--red-text); }
.rce .pg-prose a { color: var(--red-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rce .pg-prose b, .rce .pg-prose strong { font-weight: 700; }
.rce .pg-prose table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 15px; display: block; overflow-x: auto; }
.rce .pg-prose th, .rce .pg-prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.rce .pg-prose th { background: var(--soft); font-weight: 700; }
.rce .pg-prose code { font-size: .92em; background: var(--soft); padding: 1px 5px; border-radius: 6px; }
.rce .pg-company { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* a list of links as cards (Právne dokumenty) */
.rce .pg-links { display: flex; flex-direction: column; gap: 10px; }
.rce .pg-links a {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 22px; background: var(--soft);
  border: 1px solid var(--line); transition: border-color .15s;
}
.rce .pg-links a:hover { border-color: var(--ink); }
.rce .pg-links b { display: block; font-size: 18px; letter-spacing: -.01em; }
.rce .pg-links small { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
.rce .pg-links a > span { flex: 1; min-width: 0; }
.rce .pg-links a > .ic { color: var(--muted); }

/* Ako to funguje: the steps, the phone beside some of them */
.rce .pg-steps { display: flex; flex-direction: column; gap: 16px; margin-top: 48px; }
.rce .pg-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rce .pg-step-shot { grid-template-columns: minmax(0, 1fr) 360px; }
.rce .pg-step-flip { grid-template-columns: 360px minmax(0, 1fr); }
.rce .pg-step-flip .pg-step-vis { order: -1; }
.rce .pg-step .pg-card { justify-content: center; padding: 44px; gap: 16px; }
.rce .pg-step .pg-card p { font-size: 18px; max-width: 58ch; }
.rce .pg-step h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.08; }
.rce .pg-step-n {
  width: 48px; height: 48px; border-radius: 16px; background: var(--red); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; flex: none;
}
.rce .pg-step-vis { border-radius: 28px; background: var(--mist); display: flex; justify-content: center; align-items: center; padding: 36px 20px; }
.rce .pg-step-vis .shot { width: 260px; }
.rce .pg-step .pg-card.v-red { background: var(--red-surface); border-color: transparent; color: #FFFFFF; }
.rce .pg-step .pg-card.v-navy { background: var(--navy); border-color: var(--navy-line); color: #FFFFFF; }
.rce .pg-step .pg-card.v-red p, .rce .pg-step .pg-card.v-navy p { color: #FFFFFF; opacity: .9; }
.rce .pg-step .v-red .pg-step-n, .rce .pg-step .v-navy .pg-step-n { background: rgba(255,255,255,.18); }
.rce .pg-step .v-red .pg-ic, .rce .pg-step .v-navy .pg-ic { background: rgba(255,255,255,.14); color: #FFFFFF; }
.rce .pg-inset { background: var(--bg); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.rce .pg-step .pg-card .pg-inset p { font-size: 16px; }
.rce .pg-key { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; font-weight: 800; font-size: 14px; vertical-align: middle; }
.rce .pg-key-ok { background: var(--ok-bg); color: var(--ok-ink); }
.rce .pg-key-no { background: var(--down-bg); color: var(--down-ink); }

/* Kiko: the ask box (kiko_public.js) in the web's colours */
.rce .pg-kiko-mark {
  width: 64px; height: 64px; border-radius: 20px; background: var(--red); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
}
.rce .pg-kiko-mark .ic { width: 30px; height: 30px; }
.rce .rc-kiko-public { background: var(--soft); border: 1px solid var(--line); border-radius: 32px; padding: 28px; }
.rce .rc-kiko-log:empty { display: none; }
.rce .rc-kiko-log { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.rce .rc-kiko-msg { max-width: 90%; padding: 12px 16px; border-radius: 20px; font-size: 16px; line-height: 1.55; }
.rce .rc-kiko-msg-me { margin-left: auto; border-bottom-right-radius: 6px; background: var(--pill); color: var(--pill-ink); }
.rce .rc-kiko-msg-ai { border-bottom-left-radius: 6px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
.rce .rc-kiko-answer { white-space: pre-wrap; }
.rce .rc-kiko-thinking { color: var(--muted); font-style: italic; }
.rce .rc-kiko-error { background: var(--down-bg); border: 0; color: var(--down-ink); max-width: 100%; }
.rce .rc-kiko-form { display: flex; gap: 10px; align-items: flex-end; }
.rce .rc-kiko-form textarea {
  flex: 1; resize: none; min-height: 56px; border: 1.5px solid var(--line); border-radius: 18px; padding: 15px 18px;
  font: 500 17px/1.4 var(--f); background: var(--bg); color: var(--ink); outline: none; min-width: 0;
}
.rce .rc-kiko-form textarea:focus { border-color: var(--red-text); }
.rce .rc-kiko-send {
  width: 56px; height: 56px; border-radius: 28px; flex: none; border: 0; cursor: pointer;
  background: var(--red); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center;
}
.rce .rc-kiko-send:hover { background: var(--red-hover); }
.rce .rc-kiko-send .ic { width: 22px; height: 22px; }
.rce .rc-kiko-ts { margin-top: 14px; }
.rce .rc-kiko-ts.rc-ts-done { display: none; }
.rce .rc-kiko-left { font-size: 14px; color: var(--muted); margin: 14px 0 0; text-align: center; }
.rce .rc-kiko-left-spent { color: var(--red-text); font-weight: 700; }
.rce .rc-kiko-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; align-items: center; }
.rce .rc-kiko-chips-label { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; width: 100%; }
.rce .rc-kiko-chips button {
  font: 600 15px/1.35 var(--f); text-align: left; border: 1px solid var(--line); border-radius: 20px;
  padding: 9px 16px; color: var(--ink); background: var(--bg); cursor: pointer;
}
.rce .rc-kiko-chips button:hover { border-color: var(--ink); }
.rce .rc-kiko-report { margin-top: 8px; font-size: 13px; }
.rce .rc-kiko-report-open { color: var(--muted); font: 600 13px var(--f); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; cursor: pointer; }
.rce .rc-kiko-report-open:hover { color: var(--red-text); }
.rce .rc-kiko-report-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rce .rc-kiko-report-form input { flex: 1 1 12rem; min-width: 0; font: 14px var(--f); padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: inherit; }
.rce .rc-kiko-report-send, .rce .rc-kiko-report-cancel { font: 700 13px var(--f); padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: none; color: inherit; cursor: pointer; }
.rce .rc-kiko-report-send { border-color: var(--red-text); color: var(--red-text); }
.rce .rc-kiko-report-done { color: var(--muted); font-weight: 600; }

/* Zbory, Mapa zásahov: public_dir.css draws the cards, filters and charts
   through the app's --raidcall-* channels - here they get the web's colours,
   light and dark, and the web's soft cards */
.rce {
  --raidcall-surface: 243 244 246; --raidcall-surface-2: 233 235 239; --raidcall-field: 255 255 255;
  --raidcall-border: 227 230 235; --raidcall-ink: 15 27 45; --raidcall-muted: 90 101 118;
  --raidcall-fire: 196 30 23; --raidcall-fire-light: 252 230 227;
  --raidcall-shadow: 0 1px 3px rgba(15,27,45,.18); --raidcall-shadow-sm: none;
  --raidcall-shadow-md: 0 12px 30px -18px rgba(15,27,45,.35); --raidcall-shadow-lg: 0 18px 40px -20px rgba(15,27,45,.4);
}
@media (prefers-color-scheme: dark) {
  html:not([data-web-theme="light"]) .rce {
    --raidcall-surface: 17 26 38; --raidcall-surface-2: 26 38 56; --raidcall-field: 11 15 20;
    --raidcall-border: 31 42 58; --raidcall-ink: 242 245 249; --raidcall-muted: 166 177 194;
    --raidcall-fire: 255 122 110; --raidcall-fire-light: 42 20 20;
    --raidcall-shadow: none; --raidcall-shadow-md: none; --raidcall-shadow-lg: none;
  }
}
html[data-web-theme="dark"] .rce {
  --raidcall-surface: 17 26 38; --raidcall-surface-2: 26 38 56; --raidcall-field: 11 15 20;
  --raidcall-border: 31 42 58; --raidcall-ink: 242 245 249; --raidcall-muted: 166 177 194;
  --raidcall-fire: 255 122 110; --raidcall-fire-light: 42 20 20;
  --raidcall-shadow: none; --raidcall-shadow-md: none; --raidcall-shadow-lg: none;
}
.rce .rc-dir-card { border-radius: 24px; }
.rce .rc-dir-h2 { font-size: 22px; letter-spacing: -.02em; }
.rce .rc-dir-h2 .ic { width: 22px; height: 22px; color: var(--red-text); }
.rce .rc-dir-link { color: var(--red-text); font-size: 16px; }
.rce .rc-dir-section { margin-top: 56px; }
.rce .rc-dir-split > .rc-dir-card, .rce .rc-insight .rc-dir-card { padding: 24px; }
.rce .rc-dir-invite { padding: 40px 28px; }
.rce .rc-dir-invite-btn { background: var(--red); color: #FFFFFF; border-radius: 24px; height: 48px; padding: 0 22px; }
.rce .rc-dir-invite-btn:hover { background: var(--red-hover); filter: none; }
.rce .rc-dir-invite-btn .ic { width: 18px; height: 18px; }
.rce .rc-zcard { padding: 14px 16px 14px 14px; border-radius: 22px; }
.rce .rc-zname { font-size: 17px; }
.rce .rc-zplace { font-size: 14px; }
.rce .rc-zmeta { font-size: 13px; }
.rce .rc-zcard > .min-w-0 { min-width: 0; flex: 1; }
.rce .rc-zcard .block { display: block; }
.rce .rc-feed-card { border-radius: 22px; }
.rce .rc-feed-type { font-size: 17px; }
.rce .rc-feed-sub { font-size: 14px; }
.rce .rc-feed-more { border-radius: 22px; color: var(--red-text); background: var(--blush); }
.rce .rc-feed-more .ic { width: 28px; height: 28px; }
.rce .rc-feed-card .block { display: block; }
.rce .rc-dir-search input { height: 52px; border-radius: 26px; font: 500 16px var(--f); padding-left: 44px; }
.rce .rc-dir-search > span { left: 16px; }
.rce .rc-dir-search > span .ic { width: 18px; height: 18px; }
.rce .rc-seg { border-radius: 26px; padding: 4px; }
.rce .rc-seg a { border-radius: 22px; padding: 10px 16px; font-size: 15px; }
.rce .rc-kraje a { padding: 8px 14px; font-size: 15px; }
.rce .rc-kraj > summary { font-size: 19px; }
.rce .rc-top-row { padding: 10px 8px; border-radius: 16px; }
.rce .rc-top-row .flex { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.rce .rc-top-row .min-w-0 { min-width: 0; flex: 1; }
.rce .rc-top-row .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rce .rc-dir-legend { font-size: 14px; }
.rce .rc-mf { border-radius: 24px; padding: 8px; }
.rce .rc-mf-toggle { height: 44px; padding: 0 16px; font: 800 15px var(--f); }
.rce .rc-mf-toggle .ic { width: 16px; height: 16px; }
.rce .rc-mf-search input { height: 48px; border-radius: 24px; font: 500 16px var(--f); }
.rce .rc-mf-search-ic .ic { width: 16px; height: 16px; }
.rce .rc-mf-chip, .rce .rc-mf-active, .rce .rc-mf-seg button, .rce .rc-mf-reset { font-family: var(--f); }
.rce .rc-mf-chip { font-size: 15px; padding: 8px 14px; }
.rce .rc-mf-seg button { font-size: 15px; padding: 10px 6px; }
.rce .rc-mf-types .rc-mf-chip { font-size: 14px; padding: 7px 12px; }
.rce .rc-mf-photo-pill { height: 44px; padding: 0 14px; font: 800 14px var(--f); }
.rce .rc-mf-photo-pill .ic { width: 16px; height: 16px; }
.rce .rc-types-more { font: 800 14px var(--f); }
.rce .rc-months small, .rce .rc-months b { font-size: 11px; }
.rce .rc-type { font-size: 15px; font-family: var(--f); }
.rce .pg-map { height: 52vh; min-height: 300px; max-height: 560px; border-radius: 28px; overflow: hidden; background: var(--soft); }
.rce #rc-dir-map { height: 340px; border-radius: 18px; }
.rce .maplibregl-popup-content { border-radius: 12px; font-family: var(--f); color: #0F1B2D; }
.rce .maplibregl-popup-content a { color: #C41E17; font-weight: 700; }
/* the incident list incident_map.js writes (with Tailwind's class names) */
.rce .pm-list { display: flex; flex-direction: column; gap: 10px; }
.rce .pm-list .rc-dir-card { overflow: hidden; border-radius: 20px; }
.rce .pm-list .rc-dir-card > button {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.rce .pm-list .rc-dir-card > button:hover { background: rgb(var(--raidcall-surface-2)); }
.rce .pm-list .rc-dir-card > button > span:first-child { width: 44px; height: 44px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.rce .pm-list .rc-dir-card > button > .min-w-0 { flex: 1; min-width: 0; }
.rce .pm-list .font-bold { font-weight: 700; }
.rce .pm-list .block { display: block; }
.rce .pm-list .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rce .pm-list .text-xs { font-size: 13px; }
.rce .pm-list .text-sm { font-size: 15px; }
.rce .pm-list :is(.text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600) { color: var(--muted); }
.rce .pm-list .shrink-0 { flex-shrink: 0; }
.rce .pm-list .rc-dir-card > div { padding: 0 16px 16px; }
.rce .pm-list .space-y-1 > * + * { margin-top: 4px; }
.rce .pm-list .mb-3 { margin-bottom: 12px; }
.rce .pm-list .mb-1 { margin-bottom: 4px; }
.rce .pm-list .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rce .pm-list .grid img { width: 100%; height: 96px; object-fit: cover; border-radius: 12px; cursor: pointer; }
.rce .pm-list .flex.items-center.flex-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.rce .pm-list button.inline-flex {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 700 15px var(--f); cursor: pointer;
}
.rce .pm-list button.inline-flex svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.rce .pm-list .text-fire { color: var(--red-text); font-weight: 700; }
.rce .pm-list > button { align-self: flex-start; border: 0; background: none; color: var(--red-text); font: 700 15px var(--f); cursor: pointer; padding: 4px 0; }
.rce .pm-list > button.w-full { align-self: stretch; height: 52px; border-radius: 26px; background: var(--soft); color: var(--ink); }
.rce .pm-heading { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 32px 0 12px; }
.rce .pm-empty { color: var(--muted); text-align: center; padding: 24px 0; }

/* a zbor's profile and a zásah: the head card, photos, people, vehicles */
.rce .pg-head {
  border-radius: 32px; padding: 36px; color: #FFFFFF; background: var(--red-surface);
  display: flex; gap: 18px; align-items: flex-start;
}
.rce .pg-head-ic { width: 60px; height: 60px; border-radius: 18px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex: none; font-size: 30px; }
.rce .pg-head-ic .ic { width: 32px; height: 32px; }
.rce .pg-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rce .pg-head h1 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.04; overflow-wrap: anywhere; }
.rce .pg-head-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 16px; opacity: .92; }
.rce .pg-head-meta span { display: inline-flex; align-items: center; gap: 6px; }
.rce .pg-head-meta .ic { width: 16px; height: 16px; }
.rce .pg-eyebrow-w { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.rce .pg-share {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 22px; flex: none;
  background: rgba(255,255,255,.16); color: #FFFFFF; border: 0; font: 700 15px var(--f); cursor: pointer;
}
.rce .pg-share:hover { background: rgba(255,255,255,.26); }
.rce .pg-share svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.rce .pg-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rce .pg-photos img { width: 100%; height: 160px; object-fit: cover; border-radius: 18px; cursor: pointer; display: block; }
.rce .pg-photos img:hover { opacity: .92; }
.rce .pg-photos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rce .pg-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rce .pg-tag { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 20px; background: var(--soft); font-weight: 700; font-size: 15px; }
.rce .pg-tag i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.rce .pg-tag b { color: var(--muted); }
.rce .pg-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rce .pg-person { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: var(--soft); min-width: 0; }
.rce .pg-person-c { box-shadow: inset 0 0 0 1.5px var(--red); }
.rce .pg-person > span:last-child { min-width: 0; }
.rce .pg-av { width: 38px; height: 38px; border-radius: 19px; background: var(--blush); color: var(--red-text); display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.rce .pg-person-c .pg-av { background: var(--red); color: #FFFFFF; }
.rce .pg-person b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rce .pg-person small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--red-text); }
.rce .pg-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rce .pg-items-1 { grid-template-columns: minmax(0, 1fr); }
.rce .pg-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 20px; background: var(--soft); min-width: 0; border: 1px solid transparent; }
.rce a.pg-item { transition: border-color .15s; }
.rce a.pg-item:hover { border-color: var(--ink); }
.rce .pg-item-thumb { width: 72px; height: 54px; border-radius: 12px; overflow: hidden; flex: none; display: block; }
.rce .pg-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rce .pg-item-ic { width: 48px; height: 48px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--blush); color: var(--red-text); overflow: hidden; }
.rce .pg-item-ic img { width: 100%; height: 100%; object-fit: cover; }
.rce .pg-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rce .pg-item-text b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rce .pg-item-text small { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rce .pg-item-text small .ic { width: 13px; height: 13px; vertical-align: -2px; }
.rce .pg-item-side { flex: none; font-size: 13px; color: var(--muted); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.rce .pg-item-side .ic { width: 14px; height: 14px; }
.rce .pg-rowlist { display: flex; flex-direction: column; border-radius: 22px; background: var(--soft); overflow: hidden; }
.rce .pg-rowlist a, .rce .pg-rowlist > div { display: flex; align-items: center; gap: 14px; padding: 16px 20px; font-weight: 600; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.rce .pg-rowlist a + a, .rce .pg-rowlist > div + div { border-top: 1px solid var(--line); }
.rce .pg-rowlist a:hover { background: rgb(var(--raidcall-surface-2)); }
.rce .pg-rowlist .ic { color: var(--red-text); }
.rce .pg-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.rce .pg-badges > div { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.2; }
.rce .pg-about { white-space: pre-line; font-size: 18px; line-height: 1.6; }

/* Ukážka reportu: the app's own report (bento.css) on a panel of its own */
.rce .pg-app { margin-top: 32px; border-radius: 32px; padding: 20px; background: var(--bn-ground, var(--soft)); color: var(--bn-ink, var(--ink)); }
/* Cenník while RaidCall is free: the donation box (_donate_box.html, the
   bank way only - the card way is the signed-in commander's) */
.rce .rc-donate { background: var(--soft); border: 1px solid var(--line); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.rce .rc-donate-head { display: flex; gap: 14px; align-items: flex-start; }
.rce .rc-donate-mark { width: 44px; height: 44px; border-radius: 14px; background: var(--blush); color: var(--red-text); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rce .rc-donate-mark svg { width: 22px; height: 22px; }
.rce .rc-donate-title { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 6px; }
.rce .rc-donate-lead { color: var(--muted); font-size: 17px; }
.rce .rc-donate-way { background: var(--bg); border-radius: 22px; padding: 22px; }
.rce .rc-donate-way[hidden] { display: none; }
.rce .rc-donate-way-h { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 18px; letter-spacing: -.01em; }
.rce .rc-donate-way-h svg { width: 20px; height: 20px; color: var(--red-text); }
.rce .rc-donate-bank { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.rce .rc-donate-qr { margin: 0; text-align: center; }
.rce .rc-donate-qr img { width: 150px; height: 150px; border-radius: 14px; background: #FFFFFF; padding: 8px; border: 1px solid var(--line); display: block; }
.rce .rc-donate-qr figcaption { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 6px; }
.rce .rc-donate-facts { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rce .rc-donate-hint { color: var(--muted); font-size: 15px; }
.rce .rc-donate-account { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 15px; align-items: center; }
.rce .rc-donate-account dt { color: var(--muted); }
.rce .rc-donate-account dd { margin: 0; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.rce .rc-donate-iban { display: flex; align-items: center; gap: 8px; }
.rce .rc-donate-iban .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; flex: 1; min-width: 0; user-select: all; }
.rce .rc-donate-copy { width: 36px; height: 36px; border-radius: 18px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.rce .rc-donate-copy svg { width: 16px; height: 16px; }
.rce .rc-donate-copy.is-done { background: var(--ok-dot); color: #FFFFFF; border-color: transparent; }
.rce .rc-donate-note { width: 100%; height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font: 500 15px var(--f); padding: 0 12px; outline: none; }
.rce .rc-donate-note:focus { border-color: var(--red-text); }
.rce .rc-donate-fine { font-size: 13px; color: var(--muted); }
@media (max-width: 820px) {
  .rce .rc-donate { padding: 22px 18px; border-radius: 24px; }
  .rce .rc-donate-way { padding: 16px; }
  .rce .rc-donate-bank { grid-template-columns: minmax(0, 1fr); }
  .rce .rc-donate-qr img { margin: 0 auto; }
  .rce .rc-donate-account { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rce .rc-donate-account dd { margin-bottom: 8px; }
}
/* icon()'s default size is Tailwind's w-4 h-4, which the web does not load */
.rce .pg-app svg.w-4 { width: 16px; height: 16px; display: inline-block; vertical-align: -.125em; flex: none; }
.rce .pg-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.rce .pg-feats li { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--soft); font-weight: 600; font-size: 15px; line-height: 1.3; }
.rce .pg-feats .pg-ic { width: 36px; height: 36px; border-radius: 12px; }
.rce .pg-feats .pg-ic .ic { width: 18px; height: 18px; }
.rce ul.pg-feats { margin: 0; padding: 0; }

@media (max-width: 1000px) {
  .rce .pg-step-shot, .rce .pg-step-flip { grid-template-columns: minmax(0, 1fr); }
  .rce .pg-step-flip .pg-step-vis { order: 0; }
}
@media (max-width: 820px) {
  .rce .pg-main { padding-block: 32px 72px; }
  .rce .pg-back { margin-bottom: 20px; }
  .rce .pg-sec { margin-top: 48px; }
  .rce .pg-card { padding: 24px 20px; border-radius: 24px; }
  .rce .pg-grid-2, .rce .pg-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .rce .pg-cta { padding: 36px 22px; border-radius: 28px; margin-top: 56px; }
  .rce .pg-cta .btn { width: 100%; white-space: normal; text-align: center; height: auto; min-height: 56px; padding-block: 10px; }
  .rce .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rce .pg-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rce .pg-stats-3 .pg-stat { padding: 14px 12px; }
  .rce .pg-stats-3 .pg-stat span { font-size: 11px; }
  .rce .pg-step .pg-card { padding: 26px 22px; }
  .rce .pg-step .pg-card p { font-size: 17px; }
  .rce .pg-step-vis { padding: 28px 16px; border-radius: 24px; }
  .rce .pg-step-vis .shot { width: 240px; }
  .rce .rc-kiko-public { padding: 18px; border-radius: 26px; }
  .rce .pg-head { padding: 26px 22px; border-radius: 26px; flex-wrap: wrap; }
  .rce .pg-head-ic { width: 52px; height: 52px; }
  .rce .pg-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rce .pg-photos img { height: 130px; }
  .rce .pg-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rce .pg-items { grid-template-columns: minmax(0, 1fr); }
  .rce .pg-app { padding: 10px; border-radius: 24px; margin-inline: -8px; }
  .rce .pg-feats { grid-template-columns: minmax(0, 1fr); }
  .rce .pg-prose { font-size: 16px; }
  .rce .rc-dir-split > .rc-dir-card, .rce .rc-insight .rc-dir-card { padding: 18px; }
  .rce .pg-map { border-radius: 22px; height: 46vh; }
}

/* Ukážka reportu: the six points as compact chips (2026-11-10) */
.rce ul.pg-feats--chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rce .pg-feats--chips li { padding: 6px 12px 6px 6px; gap: 8px; border-radius: 999px; font-size: 13px; }
.rce .pg-feats--chips .pg-ic { width: 24px; height: 24px; border-radius: 999px; }
.rce .pg-feats--chips .pg-ic .ic { width: 14px; height: 14px; }

/* RaidCall Prémium (2026-11-10, toned down the same day - owner: the gold
   pill was too much): a normal link like its neighbours, only the star is
   gold, so it is marked without shouting. Right after Funkcie in the bar and
   the phone menu; /cennik is the Prémium page. --prem-ink is the amber the
   badges use, readable in light and dark */
.rce .links a.nav-prem { display: inline-flex; align-items: center; gap: 5px; }
.rce .links a.nav-prem .ic { width: 15px; height: 15px; fill: var(--prem-ink); color: var(--prem-ink); flex: none; }
.rce .prem-pill { display: inline-flex; align-items: center; gap: 10px; }
.rce .prem-pill .ic { width: 0.8em; height: 0.8em; fill: var(--prem-ink); color: var(--prem-ink); flex: none; }
.rce .prem-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.rce .prem-feats {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.rce .prem-feats li {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 22px;
  background: var(--soft); border: 1px solid var(--line); min-width: 0;
}
.rce .prem-feats b { display: block; font-size: 17px; line-height: 1.3; }
.rce .prem-feats small { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.rce .prem-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--prem-bg); color: var(--prem-ink); }
.rce .prem-ic .ic { width: 20px; height: 20px; }
.rce .sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rce .cmp-wrap { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.rce .cmp { width: 100%; border-collapse: collapse; font-size: 16px; }
.rce .cmp th, .rce .cmp td { padding: 14px 16px; border-top: 1px solid var(--line); text-align: center; vertical-align: middle; }
.rce .cmp thead th { border-top: 0; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.rce .cmp th[scope="row"] { text-align: left; font-weight: 600; line-height: 1.35; }
.rce .cmp thead th:not(:first-child), .rce .cmp td { width: 7.5em; }
.rce .cmp .cmp-prem { background: color-mix(in srgb, var(--prem-bg) 55%, transparent); }
.rce .cmp thead .cmp-prem { color: var(--prem-ink); }
.rce .cmp-head { display: inline-flex; align-items: center; gap: 6px; }
.rce .cmp-head .ic { width: 15px; height: 15px; fill: currentColor; }
.rce .cmp .cmp-yes { width: 22px; height: 22px; color: var(--ok-dot); vertical-align: middle; }
.rce .cmp-no { color: var(--muted); font-weight: 700; }
.rce .cmp tfoot th, .rce .cmp tfoot td { font-size: 17px; }
.rce .cmp tfoot td b { font-size: 20px; white-space: nowrap; }
.rce .cmp tfoot td small { display: block; color: var(--muted); font-size: 13px; }
/* the two narrow columns keep their width; a long word in the first one
   (de Wasserentnahmestellen) breaks instead of pushing Prémium off the card */
.rce .cmp { table-layout: fixed; }
.rce .cmp th[scope="row"] { hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .rce table.cmp th, .rce table.cmp td { padding: 10px 5px; }
  .rce table.cmp th[scope="row"] { padding-left: 12px; font-size: 14px; }
  .rce table.cmp thead th:not(:first-child), .rce table.cmp td { width: 78px; }
  .rce table.cmp thead th { font-size: 10.5px; letter-spacing: 0; }
  .rce table.cmp .cmp-head { flex-direction: column; gap: 2px; }
  .rce table.cmp tfoot th, .rce table.cmp tfoot td { font-size: 14px; }
  .rce table.cmp tfoot td b { font-size: 15px; }
}
@media (max-width: 820px) {
  .rce .prem-feats { grid-template-columns: minmax(0, 1fr); }
  .rce .cmp { font-size: 15px; }
  .rce .cmp th, .rce .cmp td { padding: 12px 10px; }
  .rce .cmp thead th:not(:first-child), .rce .cmp td { width: 5.4em; }
  .rce .cmp thead th { font-size: 12px; letter-spacing: .02em; }
  .rce .cmp tfoot td b { font-size: 17px; }
  .rce .prem-cta .btn { width: 100%; }
}
/* five footer columns since Mapy (2026-11-10): the brand gets its own row on a mid screen */
@media (max-width: 1100px) and (min-width: 821px) {
  .rce .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
  .rce .foot-brand { grid-column: 1 / -1; }
}