/* ═══════════════════════════════════════════════════════════════════
   DEV KLON podľa reforme.erevenue.cz
   Hodnoty nie sú odhadnuté. Sú odmerané v Chromiu na 390x713 zo živej
   stránky 2026-09-10 (`getComputedStyle`), viď webdev/ODMERANE.md.
   Stavané mobile-first: základ je telefón, desktop je až v media query.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --tma:#13151b;        /* hero a o nás, ich rgb(19,21,27) */
  --tma2:#0d0f14;       /* záverečná sekcia, ich rgb(13,15,20) */
  --biela:#fff;
  --text-tlm:rgba(255,255,255,.45);   /* ich muted, 45 % */
  --text-tlm2:rgba(255,255,255,.7);
  --karta-bg:rgba(255,255,255,.04);   /* ich karta */
  --karta-ram:rgba(255,255,255,.08);
  --akcent:#35B5EA;                   /* naša značka, len na detaily */
  --r-karta:24px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
/* 🔴 Nič nesmie byť širšie než obrazovka. Keď je dokument širší, telefón
   celú stránku ODDIALI a všetko sa zmenší, čo vyzerá ako „máme malé
   písmo". Zmerané: dialóg s cookies rozťahoval dokument na 595 px pri
   390 px displeji, čiže stránka bežala v mierke 0,65. */
html,body{max-width:100%;overflow-x:hidden}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tma);color:var(--biela);font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

/* ── značka DEV, aby sa to nepomýlilo s ostrou stránkou ──────────── */
.devznak{position:fixed;top:8px;right:8px;z-index:99999;
  background:#ff2d55;color:#fff;font-size:10px;font-weight:700;letter-spacing:.12em;
  padding:4px 9px;border-radius:999px;font-family:var(--sans);pointer-events:none}

/* ── spoločné ───────────────────────────────────────────────────── */
.obal{width:100%;max-width:342px;margin:0 auto;padding:0}

/* ich tlačidlo: 18px/500, biele pozadie, tmavý text, 54 px, radius full */
.cta{display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:500;line-height:1;
  color:#131515;background:var(--biela);
  min-height:54px;padding:0 40px;border-radius:999px;
  text-decoration:none;border:0;cursor:pointer;font-family:var(--sans);
  transition:transform .15s ease,opacity .15s ease}
.cta:active{transform:scale(.98)}

/* eyebrow s čiarkami po stranách, ako majú oni nad „O NÁS" */
.eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-tlm);margin:0}
.eyebrow::before,.eyebrow::after{content:"";height:1px;width:34px;
  background:var(--karta-ram)}

/* ══ HERO ════════════════════════════════════════════════════════ */
/* ich: padding-top 96px, min-height 100svh, obsah zvisle na stred   */
#hero{position:relative;min-height:100svh;padding:96px 24px 0;
  display:flex;flex-direction:column;align-items:center;overflow:hidden;
  background:var(--tma)}
/* 🔴 Presne ich úprava fotky, vyčítaná z ich tried:
     img  `object-cover opacity-40 mix-blend-overlay`
     nad  `bg-gradient-to-b from-[#13151b]/20 via-[#13151b]/60 to-[#13151b]`
   Fotka je u nich TEXTÚRA, nie obrázok. Prvé meranie ukazovalo opak, ale
   to bola moja chyba: pri kreslení ich stránky som im vlastným
   `opacity:1 !important` zrušil práve tento prekryv. */
.herofoto{position:absolute;inset:0;z-index:0}
.herofoto img{width:100%;height:100%;object-fit:cover;
  opacity:.40;mix-blend-mode:overlay}
.herofoto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,21,27,.2) 0%,rgba(19,21,27,.6) 50%,rgba(19,21,27,1) 100%)}
.heroin{position:relative;z-index:2;width:100%;max-width:342px;
  margin:auto 0;text-align:center}

.odznaky{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 0 26px}
/* ich: bg-white/10, border-white/5, px-4 py-1.5, min-w 220px, na stred */
.odznak{display:inline-flex;align-items:center;gap:8px;justify-content:center;
  min-width:220px;font-size:14px;font-weight:500;color:var(--biela);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.05);
  padding:6px 16px;border-radius:999px;backdrop-filter:blur(4px)}
/* ikona má u nich vlastný krúžok: bg-white/10, border-white/10, p-1 */
.odznakikona{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);
  border-radius:999px;padding:4px}
.odznakikona svg{width:14px;height:14px;display:block}

/* ich h1: 36px/500, line-height 37.8 (1.05), letter-spacing -0.9px */
#hero h1{font-size:36px;font-weight:500;line-height:1.05;letter-spacing:-.9px;
  margin:0 0 18px;color:var(--biela);text-align:center;font-family:var(--sans)}
.podnadpis{font-size:20px;line-height:1.35;color:var(--text-tlm2);
  margin:0 0 30px;text-align:center}

/* ── recenzie sú VNÚTRI hero bloku, ako u nich ──────────────────── */
.recenzie{position:relative;z-index:2;width:100%;max-width:342px;
  margin:0 auto;padding:44px 0 64px;text-align:center}
.recenzie .eyebrow{margin-bottom:22px}
/* ═══════════════════════════════════════════════════════════════════
   KARTA RECENZIE
   Vyčítané z ich tried, nie odhadnuté:
     karta   `bg-white/[0.04] border border-white/8 rounded-3xl
              px-6 py-7 md:px-8 md:py-10 flex flex-col justify-between`
     text    `text-white/85 text-sm sm:text-base md:text-lg
              leading-relaxed font-light tracking-[-0.01em]`
     hviezdy `lucide-star fill-amber-400 text-amber-400`, gap-1
     podpis  `flex items-center gap-4 mt-8`
     avatar  `w-10 h-10 rounded-full bg-gradient-to-br
              from-violet-500/80 to-indigo-600/80`
     meno    `text-white text-sm font-semibold`
     rola    `text-white/40 text-xs`
     mriežka `grid grid-cols-1 lg:grid-cols-2 gap-6 items-stretch`

   🔴 Text im RASTIE: 14 px na telefóne, 16 px od 640 a 18 px od 768.
      Ja som mal 14 px všade, čiže na desktope o štvrtinu menšie písmo
      pri dvojnásobne dlhom riadku. To bol ten rozdiel v čitateľnosti.
   🔴 Podpis je PRIPNUTÝ DOLE (`justify-between`). Preto majú karty
      vedľa seba podpisy v jednej línii aj pri rôzne dlhom texte.
   ═══════════════════════════════════════════════════════════════════ */
.rmriezka{display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch}
.rkarta{background:var(--karta-bg);border:1px solid var(--karta-ram);
  border-radius:var(--r-karta);padding:28px 24px;backdrop-filter:blur(4px);
  display:flex;flex-direction:column;justify-content:space-between;
  text-align:left;min-height:0}
.rhviezdy{display:flex;align-items:center;gap:4px;margin:0 0 18px}
.rhviezdy svg{width:16px;height:16px;display:block}
.rkarta p{font-size:14px;font-weight:300;line-height:1.625;
  letter-spacing:-.01em;color:rgba(255,255,255,.85);margin:0}
.rpata{display:flex;align-items:center;gap:16px;margin:32px 0 0}
.rini{width:40px;height:40px;border-radius:999px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;letter-spacing:.04em;color:#fff}
/* ich dva prechody, tretí z tej istej rodiny pre tretiu recenziu */
.av1{background:linear-gradient(135deg,rgba(139,92,246,.8),rgba(79,70,229,.8))}
.av2{background:linear-gradient(135deg,rgba(16,185,129,.8),rgba(13,148,136,.8))}
.av3{background:linear-gradient(135deg,rgba(245,158,11,.8),rgba(234,88,12,.8))}
.rmeno{font-size:14px;font-weight:600;color:var(--biela);line-height:1.35}
.rrola{font-size:12px;color:rgba(255,255,255,.4);line-height:1.35}
.pocitadlo{font-size:14px;color:var(--text-tlm2);margin:24px 0 18px}
.pocitadlo b{color:var(--biela);font-weight:600}
.povod{font-size:12px;line-height:1.5;color:var(--text-tlm);margin:18px 0 0}

/* ══ O NÁS ═══════════════════════════════════════════════════════ */
/* ich: padding 32px hore, 112px dole, 24px po stranách             */
#onas{background:var(--tma);padding:32px 24px 112px;overflow:hidden}
#onas .eyebrow{margin-bottom:26px}
.karty{display:flex;flex-direction:column;gap:16px;max-width:342px;margin:0 auto}
/* ich karta: radius 24, biela 4 %, rám biela 8 %, overflow hidden   */
.karta{background:var(--karta-bg);border:1px solid var(--karta-ram);
  border-radius:var(--r-karta);overflow:hidden;position:relative}
/* obal fotky, aby sa dala dole vytratiť do farby karty, ako u nich:
   `bg-gradient-to-b from-transparent via-transparent to-[#13151b]` */
.kartafoto{position:relative}
.kartafoto img{width:100%;height:144px;object-fit:cover;display:block}
.kartafoto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,transparent 55%,var(--tma) 100%)}
.kartain{padding:0 20px 22px;position:relative}
/* 🔴 Ich ikona NIE JE v krúžku. Trieda je `w-10 h-10 rounded-2xl
   bg-white/8 border border-white/10`, čiže 40x40 so zaoblením 16 px. */
.ikona{width:40px;height:40px;border-radius:16px;margin:-20px 0 14px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.ikona svg{width:18px;height:18px}
.karta h3{font-size:16px;font-weight:600;line-height:22px;margin:0 0 8px;
  color:var(--biela)}
.karta p{font-size:13px;line-height:21px;color:var(--text-tlm);margin:0}

/* 🔴 Veľká karta je u nich JEDNA karta s fotkou NA POZADÍ, minimálne
   480 px vysoká, s tmavým prechodom zdola (`from-[#0d0f14]/90 via /30`)
   a s adresou v sklenenej kartičke hore (`bg-white/[0.07] border
   border-white/10 backdrop-blur-xl rounded-2xl px-7 py-6`). Nie fotka
   a pod ňou text. Preto bola moja adresa nečitateľná: chýbal prechod. */
.velka{margin:20px auto 0;max-width:342px;min-height:604px;
  display:flex;flex-direction:column;justify-content:space-between}
.velkafoto{position:absolute;inset:0;z-index:0}
.velkafoto img{width:100%;height:100%;object-fit:cover}
.velkafoto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(13,15,20,.92) 0%,rgba(13,15,20,.30) 55%,transparent 100%)}
.adresa{position:relative;z-index:2;margin:20px 20px 0;align-self:flex-start;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(16px);border-radius:16px;padding:16px 22px;
  font-size:15px;line-height:1.45;color:var(--biela);font-weight:500;
  font-family:var(--sans)}
.velkain{position:relative;z-index:2;padding:22px 22px 26px}
.velka h2{font-size:30px;font-weight:500;line-height:1.1;letter-spacing:-.6px;
  margin:0 0 12px;color:var(--biela)}
.velka p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.62);margin:0}

/* jemná žiara nad kartami, ich `bg-violet-600/8 blur-[90px]` */
#onas{position:relative}
#onas::before{content:"";position:absolute;top:40px;left:50%;transform:translateX(-50%);
  width:800px;height:220px;border-radius:999px;pointer-events:none;
  background:rgba(124,58,237,.08);filter:blur(90px);z-index:0}
#onas>*{position:relative;z-index:1}

/* ══ ZÁVEREČNÁ VÝZVA ═════════════════════════════════════════════ */
/* ich: pozadie tmavšie, padding 112px hore a 96px dole             */
#zaver{background:var(--tma2);padding:112px 24px 96px;text-align:center}
#zaver h2{font-size:36px;font-weight:500;line-height:1.08;letter-spacing:-.9px;
  margin:0 0 16px;color:var(--biela)}
#zaver .podnadpis{font-size:18px;margin:0 0 28px}
.zaverpoznamka{font-size:12px;color:var(--text-tlm);margin:16px 0 0}
.hodnotenie{font-size:12px;color:var(--text-tlm);margin:26px 0 0}
.naliehavost{display:flex;flex-direction:column;align-items:center;gap:10px;margin:24px 0 0}
.naliehavost span{display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:500;color:var(--text-tlm2);
  background:rgba(255,255,255,.06);border:1px solid var(--karta-ram);
  padding:7px 16px;border-radius:999px}
.pas{font-size:12px;line-height:1.9;color:var(--text-tlm);margin:36px 0 0;
  letter-spacing:.06em}

/* ══ PÄTA ════════════════════════════════════════════════════════ */
/* Päta ako u nich: názov firmy, doména, odkazy. Nič viac. */
.pata{background:var(--tma2);padding:0 24px 44px;text-align:center;
  font-size:12px;line-height:1.7;color:var(--text-tlm)}
.pfirma{font-size:14px;font-weight:600;color:var(--biela);margin:0 0 2px}
.pdomena{font-size:12px;color:var(--text-tlm);margin:0 0 18px}
/* odkazy na jednom riadku s bodkou medzi nimi, ako u nich */
.podkazy{margin:0;display:flex;flex-wrap:wrap;gap:4px 0;justify-content:center}
.podkazy a{padding:0 9px;position:relative}
.podkazy a + a::before{content:"·";position:absolute;left:-2px;color:var(--karta-ram)}
.pata a{color:var(--text-tlm2);text-decoration:none}
.pata a:hover{color:var(--biela)}

/* ══ LIŠTA S COOKIES ═════════════════════════════════════════════ */
/* 🔴 Ako oni: VEĽKÝ blokujúci dialóg na prvej návšteve, nie pilulka
   dole. Overené na ich stránke na telefóne 2026-09-10. Po voľbe
   ostáva len malá pilulka na znovuotvorenie. */
.zaclona{position:fixed;inset:0;z-index:9998;background:rgba(6,7,10,.72);
  backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;
  max-width:100vw;overflow:hidden}
.zaclona[hidden]{display:none}
.cookiepanel{width:100%;max-width:min(520px,100vw);min-width:0;flex:0 1 auto;
  background:#fdfdfb;color:#1b1d22;
  border-radius:20px 20px 0 0;padding:26px 22px calc(26px + env(safe-area-inset-bottom));
  font-family:var(--sans);max-height:88svh;overflow-y:auto}
.cookiepanel h2{font-size:20px;font-weight:600;line-height:1.3;margin:0 0 12px;color:#12141a}
.cookiepanel p{font-size:14.5px;line-height:1.6;color:#3d414b;margin:0 0 16px}
.ctipy{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;min-width:0}
.ctipy span{font-size:13px;color:#3d414b;border:1px solid #d9dbe1;
  padding:6px 14px;border-radius:999px}
.cpodrobne{font-size:14px;font-weight:600;color:#12141a;margin:0 0 20px;
  display:inline-block;text-decoration:underline;cursor:pointer;background:none;border:0;padding:0;
  font-family:var(--sans)}
.cbtny{display:flex;flex-direction:column;gap:10px;min-width:0}
.cbtn{display:flex;align-items:center;justify-content:center;min-height:52px;
  border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;
  background:#1b1d22;color:#fff;border:1px solid #1b1d22;font-family:var(--sans)}
.cbtn.tichy{background:#fff;color:#1b1d22}
/* pilulka po voľbe */
.cpilulka{position:fixed;left:12px;bottom:12px;z-index:9997;
  background:rgba(20,22,28,.92);color:#fff;border:1px solid var(--karta-ram);
  font-size:12px;padding:8px 14px;border-radius:999px;cursor:pointer;
  font-family:var(--sans)}
.cpilulka[hidden]{display:none}

/* ══ DESKTOP ═════════════════════════════════════════════════════ */
/* Mobil je základ. Toto je len rozšírenie, nič sa tu neprepisuje
   naopak, aby sa telefónna verzia nedala pokaziť z desktopu. */
@media(min-width:768px){
  #hero{padding:160px 24px 0}
  .heroin,.recenzie,.karty,.velka,.obal{max-width:720px}
  #hero h1{font-size:56px;letter-spacing:-1.6px}
  .podnadpis{font-size:22px}
  .karty{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .velka>img{height:420px}
  #zaver h2{font-size:52px;letter-spacing:-1.4px}
  .naliehavost{flex-direction:row;justify-content:center}
  .cookiepanel{border-radius:20px;margin-bottom:24px}
  .zaclona{align-items:center}
}
@media(min-width:1100px){
  .heroin,.recenzie,.karty,.velka{max-width:960px}
  #hero h1{font-size:64px}
}

/* ═══════════════════════════════════════════════════════════════════
   KVÍZ (opt in)
   🔴 Ich kvíz je SVETLÝ, hoci landing je tmavý. Overené na
   reforme.erevenue.cz/dotaznik: biele pozadie, obrovská otázka
   pätkovým písmom, pole BEZ rámika a bez karty (len spodná linka),
   a namiesto tlačidla dve šípky vpravo dole. Jedna otázka na obrazovku.
   ═══════════════════════════════════════════════════════════════════ */
body.kviz{background:#fff;color:#171717}
.kvizstr{min-height:100svh;display:flex;flex-direction:column;
  padding:0 20px calc(96px + env(safe-area-inset-bottom));position:relative}
.kvizin{margin:auto;width:100%;max-width:520px}

.krokchip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#5b5f6a;background:#f1f1ef;
  padding:6px 13px;border-radius:6px;margin:0 0 18px}
.kvizin h1{font-family:var(--sans);font-size:30px;font-weight:500;line-height:1.22;
  letter-spacing:-.5px;margin:0 0 14px;color:#101114}
.kvizpod{font-size:20px;line-height:1.4;color:#5b5f6a;margin:0 0 40px}

/* pole: žiadny box, len linka pod textom, ako u nich */
.pole{width:100%;font-family:var(--sans);font-size:24px;line-height:1.3;
  color:#101114;background:transparent;border:0;border-bottom:2px solid #9aa0ad;
  padding:6px 0 12px;outline:none;border-radius:0;appearance:none}
.pole::placeholder{color:#b3b8c2}
.pole:focus{border-bottom-color:#101114}
/* riadok pod poľom, ich `flex ... justify-between gap-4 mt-6 min-h-[60px]` */
.kvizakcia{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin:24px 0 0;min-height:60px}
.chyba{flex:1;font-size:13.5px;line-height:1.4;color:#c62828;margin:0}

/* 🔴 Tlačidlo Pokračovať. Ich hodnoty: výška 56 px (h-14), odsadenie
   32 px (px-8), zaoblenie 16 px (rounded-2xl), tučné biele písmo, tieň
   vo farbe tlačidla na 20 %, a prilieta sprava (x:20 -> x:0).
   Ich farba je #5967B5. Naša značková #35B5EA má s bielym textom len
   2,35:1, čo je nečitateľné, preto tmavší odtieň tej istej modrej
   #0070A8 s 5,41:1. Ich tlačidlo má 5,21:1, čiže rovnaká trieda. */
.pokracovat{flex:0 0 auto;margin-left:auto;
  display:inline-flex;align-items:center;gap:8px;
  height:56px;padding:0 32px;border-radius:16px;border:0;cursor:pointer;
  background:#0070A8;color:#fff;font-family:var(--sans);
  font-size:16px;font-weight:600;line-height:1;
  box-shadow:0 10px 22px -6px rgba(0,112,168,.35);
  animation:prilet .22s ease-out;transition:transform .15s ease}
.pokracovat[hidden]{display:none}
.pokracovat svg{width:20px;height:20px;flex:0 0 auto}
.pokracovat:active{transform:scale(.96)}
@keyframes prilet{from{opacity:0;transform:translateX(20px)}
                  to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.pokracovat{animation:none}}
/* Ich základ je 56 px a bežný telefón má 390 px, takže tam má ostať
   veľké. Zmenšuje sa až pod 360 px, kde by sa s textom chyby netrafilo. */
@media(max-width:360px){
  .pokracovat{height:48px;padding:0 22px;font-size:15px}
  .pokracovat svg{width:18px;height:18px}
}

/* navigácia: dve šípky vpravo dole, presne ako oni */
.sipky{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));
  display:flex;gap:10px;z-index:20}
.sipka{width:52px;height:44px;border-radius:10px;border:1px solid #dcdee3;
  background:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#101114}
.sipka[disabled]{opacity:.35;cursor:default}
.sipka svg{width:20px;height:20px}
.sipka.hlavna{background:#101114;border-color:#101114;color:#fff;width:62px}

/* ═══════════════════════════════════════════════════════════════════
   REZERVÁCIA
   🔴 Ich nadpis nad kalendárom VAROVÁ, že ešte nie je hotovo, aby
   človek po kvíze nemal pocit, že skončil. Pod kalendárom majú
   záchranný text, keby sa nenačítal.
   ═══════════════════════════════════════════════════════════════════ */
body.rez{background:#fff;color:#171717}
.rezstr{min-height:100svh;padding:64px 20px calc(48px + env(safe-area-inset-bottom))}
.rezin{max-width:520px;margin:0 auto;text-align:center}
.rezin h1{font-family:var(--sans);font-size:30px;font-weight:500;line-height:1.2;
  margin:0 0 14px;color:#101114}
.rezin .pod{font-size:16px;line-height:1.55;color:#5b5f6a;margin:0 0 30px}
.kalendar{background:#fff;border:1px solid #e3e5ea;border-radius:16px;
  padding:20px 16px;text-align:left}
.kalmesiac{font-size:15px;font-weight:600;color:#101114;margin:0 0 14px;text-align:center}
.dni{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 20px}
.den{border:1px solid #dcdee3;border-radius:10px;padding:9px 0;text-align:center;
  cursor:pointer;background:#fff;font-family:var(--sans)}
.den b{display:block;font-size:15px;color:#101114;line-height:1.2}
.den span{display:block;font-size:11px;color:#7b8090}
.den[aria-pressed="true"]{background:#101114;border-color:#101114}
.den[aria-pressed="true"] b,.den[aria-pressed="true"] span{color:#fff}
.casy{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cas{border:1px solid #dcdee3;border-radius:10px;padding:11px 0;text-align:center;
  cursor:pointer;background:#fff;font-size:14px;font-weight:600;color:#101114;
  font-family:var(--sans)}
.cas[aria-pressed="true"]{background:#101114;border-color:#101114;color:#fff}
.rezcta{margin:22px 0 0;width:100%;background:#101114;color:#fff;
  min-height:54px;border-radius:12px;font-size:16px;font-weight:600;border:0;
  cursor:pointer;font-family:var(--sans)}
.rezcta[disabled]{opacity:.4;cursor:default}
.zachrana{font-size:13px;color:#7b8090;margin:16px 0 0;text-align:center}
.devpoznamka{margin:26px auto 0;max-width:520px;font-size:12.5px;line-height:1.6;
  color:#8a8f9c;border-top:1px solid #e3e5ea;padding-top:16px;text-align:center}


/* ═══════════════════════════════════════════════════════════════════
   DESKTOP pre opt in a rezerváciu
   🔴 Musí to byť AŽ TU, na konci. Keď to sedelo v hornej media query,
      základné `.kvizin{max-width:520px}` bolo v súbore NIŽŠIE, malo
      rovnakú špecifickosť a prepísalo ho. Stĺpec potom ostal 520 px
      široký aj na 1440 px, kým ich má 760 px.
   ═══════════════════════════════════════════════════════════════════ */
@media(min-width:768px){
  .kvizin{max-width:760px}
  .rezin{max-width:760px}
}

/* ═══════════════════════════════════════════════════════════════════
   RECENZIE na väčších obrazovkách
   Ich `text-sm sm:text-base md:text-lg` a `px-6 py-7 md:px-8 md:py-10`,
   mriežka na dva stĺpce až od `lg`, čiže od 1024 px.
   Musí to byť na konci súboru z toho istého dôvodu ako pri opt ine:
   rovnaká špecifickosť, vyhráva neskoršie pravidlo.
   ═══════════════════════════════════════════════════════════════════ */
@media(min-width:640px){ .rkarta p{font-size:16px} }
@media(min-width:768px){
  .rkarta{padding:40px 32px}
  .rkarta p{font-size:18px}
}
@media(min-width:1024px){
  .rmriezka{grid-template-columns:1fr 1fr}
}

/* Päta na svetlých stránkach lievika (kvíz, rezervácia).
   Oni ju tam majú tiež, len v svetlých farbách. */
body.kviz .pata,body.rez .pata{background:transparent;color:#8a8f9c;
  padding:8px 20px calc(28px + env(safe-area-inset-bottom))}
body.kviz .pfirma,body.rez .pfirma{color:#101114}
body.kviz .pdomena,body.rez .pdomena{color:#8a8f9c}
body.kviz .pata a,body.rez .pata a{color:#5b5f6a}
body.kviz .podkazy a + a::before,body.rez .podkazy a + a::before{color:#c8ccd4}
/* kvíz má obsah zvisle na stred, päta preto nesmie tlačiť hore */
body.kviz .kvizstr{padding-bottom:0}
body.kviz .pata{margin-top:auto}