/* Styly veřejných úvodních stránek (fáze 26).
   Doslovný port <style> bloku z návrhu ui_kits/landing/index.html
   (Claude Design projekt b648ff7e-2dbe-46b1-8302-2f8bbe92461d, etag 1785771189349590).

   Tokeny (--brand, --azure-*, --ink, --gradient-azure, --text-*) přicházejí
   z www/css/info/tokens.css. Ten soubor leží pod info/ z historických důvodů
   (fáze 13, kdy ho používala jen administrace) - je to sdílený design systém,
   ne styl administrace. Nepřidávej sem druhou kopii tokenů.

   POZOR (learning fáze 14): zkratka `background` maže `background-image`.
   U prvků s gradientem používej v hover stavech `background-color`.
   POZOR (learning fáze 16): responzivní override musí být v souboru ZA definicí
   komponenty - proto jsou mobilní doplňky až úplně na konci. */

*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);color:var(--text-body);background:var(--white);-webkit-font-smoothing:antialiased}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
a{color:var(--brand);text-decoration:none}a:hover{color:var(--brand-hover)}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);color:var(--text-heading);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight)}
p{margin:0;line-height:var(--leading-relaxed)}
.eyebrow{font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--brand)}
.btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;font-size:var(--text-md);font-weight:var(--weight-bold);border:1px solid transparent;cursor:pointer;font-family:inherit;transition:.15s}
.btn-primary{background:var(--brand);color:var(--text-on-brand)}.btn-primary:hover{background:var(--brand-hover);color:#fff}
.btn-ghost{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-inverse{background:var(--white);color:var(--azure-800)}.btn-inverse:hover{background:var(--azure-50);color:var(--azure-900)}
.btn-lg{height:56px;padding:0 32px;font-size:var(--text-lg)}
/* header */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-default)}
.hdr{display:flex;align-items:center;gap:32px;height:76px}
/* Kotvy v navigaci (#vyhody, #jak, #videa, #faq, #registrace) skáčou na horní
   hranu sekce, kterou ale překrývá sticky hlavička - bez tohohle odsazení
   zmizí prvních 77 px sekce pod ní (změřeno). `scroll-padding-top` na kořeni
   platí pro všechny kotvy naráz; `scroll-margin-top` na jednotlivých sekcích
   by bylo pět zápisů téhož čísla.
   Hodnota = 76px obsah hlavičky + 1px spodní rámeček; drž ji v souladu
   s `.hdr` výše. */
:root{--hdr-h:77px}
/* Kotvy se posouvají plynule, ne skokem - shodně s veřejnou stránkou nemovitosti
   (www/css/property-page.css:9) a s chytry-web-maklere.cz. Uživatelé s vypnutými
   animacemi v systému dostanou původní skok: plynulý scroll přes celou stránku
   je u nich vestibulární zátěž. Issue #3, bod 1. */
html{scroll-padding-top:var(--hdr-h);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-extrabold);letter-spacing:var(--tracking-tight);color:var(--text-heading)}
/* Hlavičkový .brand je od fáze 31 <a>. Bez tohohle by ho `a:hover` obarvil
   na modrou (specificita 0,1,1 přebije .brand 0,1,0) - název značky má
   zůstat tmavý, odezvou je logo. */
a.brand:hover{color:var(--text-heading)}
a.brand:hover .brand-mark{opacity:.82}
.brand-mark{transition:opacity .15s}
.brand-mark{width:34px;height:34px;border-radius:10px;display:block;flex:0 0 auto;object-fit:contain}
.hdr nav{display:flex;gap:26px;margin-left:auto;font-size:var(--text-base);font-weight:var(--weight-semibold)}
.hdr nav a{color:var(--text-body);white-space:nowrap}.hdr nav a:hover{color:var(--brand)}
.hdr-cta{display:flex;gap:10px;align-items:center}
.hdr .btn{height:42px;padding:0 20px;font-size:var(--text-base);white-space:nowrap}
/* hero */
.hero{position:relative;min-height:680px;display:grid;align-items:center;color:#fff;isolation:isolate;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:70% 55%;display:block}
.hero .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(9,9,11,.92) 0%,rgba(9,9,11,.74) 42%,rgba(9,9,11,.22) 100%)}
.hero .wrap{position:relative;z-index:2;padding:96px 32px}
.hero h1{color:#fff;font-size:64px;font-weight:var(--weight-extrabold);text-wrap:balance;max-width:20ch;margin-top:22px}
.hero h1 em{font-style:normal;color:var(--azure-300)}
.hero p.lede{font-size:var(--text-xl);color:rgba(255,255,255,.8);margin-top:22px;max-width:46ch}
.hero-actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero-note{display:flex;gap:24px;margin-top:28px;font-size:var(--text-sm);color:rgba(255,255,255,.62);flex-wrap:wrap}
.hero-note span{display:flex;align-items:center;gap:7px}
/* sections */
section.band{padding:96px 0}
.band-tint{background:var(--azure-50)}
.band-dark{background:var(--ink);color:rgba(255,255,255,.68);position:relative;overflow:hidden}
.band-dark::before{content:"";position:absolute;inset:auto -10% -60% 30%;height:120%;background:radial-gradient(42% 50% at 60% 50%,rgba(16,169,236,.2),transparent 70%)}
.band-dark .wrap{position:relative}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark .eyebrow{color:var(--azure-300)}
.band-dark .sec-head p{color:rgba(255,255,255,.62)}
.sec-head{max-width:44ch;margin-bottom:52px}
.sec-head h2{font-size:40px;font-weight:var(--weight-extrabold)}
.sec-head h2 b{color:var(--brand);font-weight:inherit}
.sec-head p{margin-top:16px;font-size:var(--text-lg);color:var(--text-muted)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.feat{background:var(--white);border:1px solid var(--azure-100);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;transition:.18s}
.feat:hover{border-color:var(--brand-border);box-shadow:0 12px 32px -16px rgba(11,143,202,.28);transform:translateY(-2px)}
.feat-ico{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}
.feat h3{font-size:var(--text-lg);font-weight:var(--weight-bold)}
.feat p{font-size:var(--text-base);color:var(--text-muted)}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.step{padding-top:22px;border-top:3px solid rgba(255,255,255,.16);counter-increment:s;transition:.18s}
.step:first-child{border-color:var(--brand)}
.step::before{content:"0" counter(s);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--azure-300);letter-spacing:var(--tracking-caps)}
.step h3{font-size:var(--text-md);font-weight:var(--weight-bold);margin:8px 0 6px}
.step p{font-size:var(--text-sm);color:rgba(255,255,255,.6)}
/* video */
.video{border-radius:16px;overflow:hidden;border:1px solid var(--border-default);background:var(--ink);aspect-ratio:16/9}
.video iframe{width:100%;height:100%;border:0;display:block}
.video-cap{margin-top:14px;font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-strong)}
/* faq */
.faq{max-width:820px;background:var(--white);border:1px solid var(--azure-100);border-radius:18px;padding:6px 28px}
details{border-bottom:1px solid var(--border-subtle)}
details:last-child{border-bottom:0}
details summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-strong)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:2px solid var(--text-subtle);border-bottom:2px solid var(--text-subtle);transform:translateY(-70%) rotate(45deg);transition:.2s}
details[open] summary{color:var(--brand)}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--brand)}
details p{padding:0 60px 24px 0;font-size:var(--text-md);color:var(--text-muted)}
/* cta */
.band-cta{background:var(--gradient-azure);color:#fff;padding:88px 0}
.cta{display:flex;align-items:center;gap:48px;flex-wrap:wrap}
.cta h2{color:#fff;font-size:38px;font-weight:var(--weight-extrabold);flex:1 1 460px;text-wrap:balance}
.cta p{color:rgba(255,255,255,.85);font-size:var(--text-lg);margin-top:14px}
/* form */
.signup{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.form-card{background:var(--white);border:1px solid var(--azure-100);border-radius:20px;padding:36px;display:flex;flex-direction:column;gap:18px;box-shadow:0 24px 48px -32px rgba(9,9,11,.22)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted)}
.field input{height:48px;padding:0 15px;border:1px solid var(--border-default);border-radius:10px;font-family:inherit;font-size:var(--text-base);color:var(--text-strong);background:var(--white);outline:none}
.field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field .hint{font-size:var(--text-xs);color:var(--text-subtle);line-height:var(--leading-normal)}
.check{display:flex;gap:11px;align-items:flex-start;font-size:var(--text-sm);color:var(--text-muted)}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--brand);flex:0 0 auto}
/* footer */
footer{background:var(--ink);color:rgba(255,255,255,.62);padding:64px 0 40px;font-size:var(--text-sm)}
.foot-top{display:flex;gap:48px;justify-content:space-between;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-top .brand{color:#fff}
footer nav{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);gap:10px 48px}
footer a{color:rgba(255,255,255,.72)}footer a:hover{color:var(--azure-300)}
.disclaimer{margin:32px auto 0;font-size:var(--text-xs);line-height:var(--leading-relaxed);color:rgba(255,255,255,.42);max-width:100ch;text-align:center}
.foot-bottom{margin-top:28px;display:flex;justify-content:space-between;gap:20px;font-size:var(--text-xs);color:rgba(255,255,255,.4);flex-wrap:wrap}
@media(max-width:1240px){.hdr{gap:24px}.hdr nav{gap:20px;font-size:var(--text-sm)}}
/* Pod 1100 px se navigace nevejde vedle loga a CTA. Místo `display:none` (stav
   do fáze 36, kdy na kotvy ani na Ceník nebylo odkud kliknout - hamburger
   neexistuje) se přesune pod hlavičku jako vodorovně scrollovatelný řádek.
   Bez JS. Issue #3, bod 1. */
@media(max-width:1100px){
	/* `header .hdr` (0,1,1), ne `.hdr` (0,1,0): element nese obě třídy
	   (`<div class="wrap hdr">`), takže se sráží s `.wrap{padding:0 32px}`
	   a se stejnou specificitou rozhoduje pořadí v souboru - což vyrábělo
	   dvě různé chyby naráz. Zkratka `padding` je tu navíc zakázaná: smazala
	   by boční odsazení z `.wrap`. Proto longhand `padding-block`. */
	header .hdr{padding-block:12px}
	.hdr{flex-wrap:wrap;height:auto}
	.hdr nav{order:3;flex-basis:100%;margin-left:0;gap:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;scrollbar-width:none}
	.hdr nav::-webkit-scrollbar{display:none}
	.hdr-cta{margin-left:auto}
	/* Hlavička je tu o řádek navigace vyšší, takže `--hdr-h` musí povyrůst s ní.
	   Naměřeno 109 px (shodně na 390 / 600 / 900 / 1024 px). Přesnou hodnotu
	   dopočítá landing.js z reálné výšky - tohle je fallback bez JS a pro případ,
	   že se hlavička v budoucnu zlomí jinak; drž ho v souladu s `.hdr` výše. */
	:root{--hdr-h:110px}
}
@media(max-width:1000px){.grid2,.signup{grid-template-columns:1fr}.grid3,.steps{grid-template-columns:1fr 1fr}.hero h1{font-size:46px}.sec-head h2{font-size:30px}.band-cta{padding:56px 0}}

/* ---- Doplňky mimo návrh ---------------------------------------------- */

/* Ikony ze spritu - návrh je vykresloval JS knihovnou Lucide, my <use>. */
.ds-ico { width: 18px; height: 18px; display: inline-block; vertical-align: middle;
          fill: none; stroke: currentColor; flex: 0 0 auto; }
.hero-note .ds-ico { width: 15px; height: 15px; }
.feat-ico .ds-ico { width: 21px; height: 21px; }
.foot-top .ds-ico { width: 15px; height: 15px; }
.ds-ico.is-play { width: 17px; height: 17px; }
.ds-ico.is-success { width: 17px; height: 17px; color: var(--success); }

/* Patička: návrh počítá se šesti odkazy (3 řádky × 2 sloupce), my máme čtyři. */
footer nav { grid-template-rows: repeat(2, auto); }

/* Chybová hláška formuláře - Latte {form} ji sama nerenderuje (learning fáze 8). */
.form-card .ds-error { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--red-bg); color: #991b1b; font-size: var(--text-sm); list-style: none; }
.form-card .ds-error li + li { margin-top: 6px; }

/* Poznámka na dokončení registrace a fallback prázdných podmínek. */
.ds-note { margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--brand-soft); color: var(--text-strong); font-size: var(--text-sm); }

/* Vložený HTML text podmínek a ochrany údajů z administrace. */
.doc-body { color: var(--text-body); font-size: var(--text-md); line-height: var(--leading-relaxed); }
.doc-body h2 { font-size: var(--text-2xl); margin: 32px 0 12px; }
.doc-body h3 { font-size: var(--text-xl); margin: 24px 0 10px; }
.doc-body h4 { font-size: var(--text-lg); margin: 20px 0 8px; }
.doc-body p { margin: 0 0 14px; }
.doc-body ul, .doc-body ol { margin: 0 0 14px; padding-left: 22px; }
.doc-body li { margin-bottom: 6px; }

/* Fokus na tmavém pozadí - výchozí obrys je na fotce neviditelný. */
.hero a:focus-visible, .band-cta a:focus-visible, footer a:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* Cookie lišta - chování portované z chytra-aukce.cz, vzhled na tokeny. */
#cookies-popup { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 520px; background: var(--white); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-float);
  padding: 22px 24px; font-size: var(--text-sm); color: var(--text-body); }
#cookies-popup[hidden] { display: none; }
#cookies-popup .cookies-buttons { display: flex; gap: 14px; align-items: center;
  margin-top: 16px; flex-wrap: wrap; }
#cookies-popup .cookies-details { display: none; margin-top: 18px; }
#cookies-popup .cookies-details.is-shown { display: block; }
#cookies-popup .cookies-checkbox { display: flex; justify-content: space-between;
  align-items: center; padding: 10px 0; }
#cookies-popup .cookies-checkbox.disabled { color: var(--text-subtle); }
#cookies-popup hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 0; }

/* Antispam: pole skryjeme až z JS (chacz pattern) - bez JS zůstane viditelné,
   aby ho člověk s vypnutým JS mohl vyplnit. */
.field.is-hidden { display: none; }

/* ---- Mobil ------------------------------------------------------------ */
/* Návrh končí breakpointem 1000 px a byl kreslený na 1400 px. Pod 1000 px
   nechává dva sloupce a hlavička s delším názvem značky („Stránka
   nehnuteľnosti") přeteče - proto tyhle tři bloky. */

@media (max-width: 860px) {
  section.band { padding: 64px 0; }
  .wrap { padding: 0 20px; }
}

@media (max-width: 640px) {
  .grid3, .steps { grid-template-columns: 1fr; }
  footer nav { grid-auto-flow: row; grid-template-rows: none; }
  .hero { min-height: 560px; }
  .hero .wrap { padding: 64px 20px; }
  .hero h1 { font-size: 34px; }
  .sec-head h2 { font-size: 26px; }
  .faq { padding: 6px 20px; }
  details summary { font-size: var(--text-md); }
}

@media (max-width: 560px) {
  .brand { font-size: var(--text-lg); }
  .hdr .btn-ghost { display: none; }   /* „Přihlásit se" je i v patičce */
  #cookies-popup { max-width: none; left: 8px; right: 8px; bottom: 8px; }
}

/* Nejužší displeje: v hlavičce zůstane jen značka bez textu. Návrh tenhle
   problém nemá, protože „Chytrá aukce" je krátké - „Stránka nehnuteľnosti"
   spolu s tlačítkem přeteče už na 375 px (ověřeno měřením). V patičce text
   zůstává, tam je místa dost. */
@media (max-width: 460px) {
  .hdr .brand-name { display: none; }
}

/* --- Ceník (fáze 29) --------------------------------------------------- */
/* .btn-outline v landing.css chybí - úvodní stránka ho nikdy nepotřebovala.
   Bez něj mají dvě ze tří karet holý .btn (průhledné pozadí, průhledný okraj),
   tedy klikatelný text bez tlačítka. Definice je z předlohy; token
   --brand-border existuje v tokens.css. */
.btn-outline{background:transparent;color:var(--brand);border-color:var(--brand-border)}
.btn-outline:hover{background:var(--brand-soft);color:var(--brand-hover)}
.phead{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:88px 0 96px;text-align:center}
.phead::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:150%;background:radial-gradient(46% 46% at 50% 14%,rgba(16,169,236,.3),transparent 70%),radial-gradient(38% 38% at 86% 6%,rgba(194,41,255,.18),transparent 70%)}
.phead .wrap{position:relative}
.phead .eyebrow{color:var(--azure-300)}
.phead h1{color:#fff;font-size:56px;font-weight:var(--weight-extrabold);margin-top:20px;text-wrap:balance}
.phead p{font-size:var(--text-xl);color:rgba(255,255,255,.74);margin:20px auto 0;max-width:52ch}
.phead .why{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:10px 20px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:var(--text-sm);color:rgba(255,255,255,.8)}
.tiers-band{padding:0 0 96px;background:linear-gradient(180deg,var(--ink) 0 168px,var(--white) 168px 100%)}
/* auto-fit, ne repeat(3): ceník stránek má čtyři sloupce (fáze 31), ceník
   aukcí tři - pevný počet by u jednoho z nich nechal prázdné místo. */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;align-items:start}
.tier{background:var(--white);border:1px solid var(--border-default);border-radius:20px;padding:34px 30px 30px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--shadow-md);position:relative;transition:.18s}
.tier:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.tier-hi{border-color:var(--brand);box-shadow:0 24px 54px -22px rgba(11,143,202,.44);padding-top:40px}
/* Partnerský sloupec (fáze 44): není to náš balíček, ale balíček sesterského
   Chytrého webu makléře - proto neutrální šedé odlišení. Brandovou linku si drží
   zvýrazněný tarif (.tier-hi); dva azurové sloupce ze čtyř by si přetahovaly
   pozornost. `background-color`, ne `background` (learning fáze 14). */
.tier-partner{background-color:var(--surface-sunken);border-color:var(--border-strong)}
.tier-partner .tier-for{color:var(--text-muted)}
.tier-flag{position:absolute;top:-13px;left:30px;background:var(--brand);color:#fff;font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;padding:6px 14px;border-radius:999px}
.tier-for{font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--brand)}
.tier h3{font-size:var(--text-xl);font-weight:var(--weight-bold);margin-top:8px}
.tier .sub{font-size:var(--text-sm);color:var(--text-muted);margin-top:6px;min-height:60px}
.price{display:flex;align-items:baseline;gap:8px;padding-top:4px;border-top:1px solid var(--border-subtle)}
.price b{font-family:var(--font-display);font-size:46px;font-weight:var(--weight-extrabold);color:var(--text-heading);letter-spacing:var(--tracking-tight);line-height:1.1}
.price span{font-size:var(--text-base);color:var(--text-muted);font-weight:var(--weight-semibold)}
.price.hi b{color:var(--brand)}
/* Recenze (fáze 44). Vědomě jiný tvar než .feat výš - bez rámečku a na tónovaném
   podkladu, aby tři mřížky pod sebou (#vyhody, #proc, #recenze) nesplynuly.
   Monogram má --azure-700 na bílé (kontrast 5,1 : 1); --brand na --brand-soft
   by měl 2,5 : 1, tedy pod hranicí WCAG AA. */
.quote{margin:0;background-color:var(--azure-50);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:20px}
.quote blockquote{margin:0;font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-body)}
.quote figcaption{display:flex;gap:12px;align-items:center;margin-top:auto}
.quote-who{display:flex;flex-direction:column;font-size:var(--text-base)}
.quote-who cite{font-style:normal;font-weight:var(--weight-bold);color:var(--text-heading)}
.quote-who span{color:var(--text-muted)}
/* Fotky referencí (fáze 44b) - 160px zdroj na 44px místě, aby byly ostré
   i na retina displeji. `object-fit` drží tvář uprostřed kolečka. */
.quote-photo{width:44px;height:44px;border-radius:999px;object-fit:cover;flex:0 0 auto;display:block}

.feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:var(--text-base)}
.feats li{display:flex;gap:10px;align-items:flex-start;color:var(--text-body)}
.feats .ds-ico{flex:0 0 auto;color:var(--success);margin-top:2px;width:17px;height:17px}
/* Fáze 30 - funkce, kterou tarif nemá. Ikonu je nutné přebarvit taky:
   `.feats .ds-ico` výš ji barví var(--success), takže by u přeškrtnuté
   položky svítila zeleně. */
.feats li.del{color:var(--text-subtle);text-decoration:line-through}
.feats li.del .ds-ico{color:var(--text-subtle)}
.tier .btn{width:100%;margin-top:auto}
.vat{margin-top:26px;font-size:var(--text-sm);color:var(--text-subtle);text-align:center}
.inc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.inc-item{background:var(--white);border:1px solid var(--azure-100);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px}
.inc-ico{width:42px;height:42px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}
.inc-ico .ds-ico{width:20px;height:20px}
.inc-item h3{font-size:var(--text-md);font-weight:var(--weight-bold)}
.inc-item p{font-size:var(--text-sm);color:var(--text-muted)}
@media(max-width:1240px){
	.tiers{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
	.tiers,.inc{grid-template-columns:1fr}
	.tiers-band{background:var(--white);padding-top:0}
	.phead h1{font-size:40px}
	.tier .sub{min-height:0}
}


/* ---- sekce funkcí: přepínatelný seznam s tmavým panelem (issue #12, note:892)
   Port varianty 2c z ui_kits/landing/funkce-varianty.html (Claude Design projekt
   b648ff7e-2dbe-46b1-8302-2f8bbe92461d, etag 1787236544728767).

   Tři místa, kde se od návrhu vědomě liší:

   1. Panely se NEPOZICUJÍ absolutně, ale překrývají se přes `grid-area:1/1`.
      Návrh měl `position:absolute` + `min-height:430px`, jenže tím kontejner
      nemá v toku žádné dítě a jeho výška JE těch 430 px - s `overflow:hidden`
      se delší text (typicky slovenský) natvrdo ořízne. Přes grid se kontejner
      roztáhne podle nejvyššího panelu a prolínačka zůstane.
   2. `.tablist` je výchozím stavem SKRYTÁ a ukazuje ji až `.is-tabs` z JS.
      Bez toho by při vypnutém JS zůstalo osm mrtvých tlačítek, každý název
      vypsaný dvakrát a `role="tablist"` lhoucí odečítači.
   3. Neaktivní panely dostávají `visibility:hidden`. Samotné `opacity:0` je
      nechává v přístupnostním stromu i ve vyhledávání ve stránce (Ctrl+F na ně
      skáče), takže by se text „našel", ale nebyl vidět.

   Pod 1100 px se taby vypínají úplně - viz media query pod blokem. */
/* Dvousloupcové rozvržení patří AŽ k `.is-tabs`. V základním stavu je
   `.tablist` skrytá, takže není položkou gridu a `.panes` by se samo umístilo
   do prvního sloupce - osm panelů by se vysázelo do 420px proužku s prázdnou
   pravou polovinou (nález /recheck 2026-08-21). */
.tabs{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
.is-tabs{grid-template-columns:420px 1fr}
.tablist{display:none;flex-direction:column;gap:4px}
.is-tabs .tablist{display:flex}
.tab{display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:15px 16px;border-radius:12px;border:1px solid transparent;background-color:transparent;color:var(--text-body);cursor:pointer;font-family:inherit;font-size:var(--text-md);font-weight:var(--weight-semibold);appearance:none;-webkit-appearance:none;transition:.16s}
/* Hover je poloprůhledná bílá, ne `--surface-sunken` z návrhu: sekce sedí na
   tónovaném pásu, kde by sunken splynul s pozadím. Plná bílá zase patří
   vybrané položce a hover by se od ní nedal rozeznat. */
.tab:hover{background-color:rgba(255,255,255,.55)}
.tab[aria-selected="true"]{background-color:var(--white);border-color:var(--brand-border);color:var(--brand);box-shadow:0 10px 26px -20px rgba(11,143,202,.5)}
.tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tab-n{font-family:var(--font-mono);font-size:11px;font-weight:var(--weight-bold);letter-spacing:.1em;color:var(--text-subtle);flex:0 0 auto;width:20px}
.tab[aria-selected="true"] .tab-n{color:var(--brand)}
.tab-l{flex:1;min-width:0}
.tab-ar{flex:0 0 auto;display:flex;opacity:0;transform:translateX(-4px);transition:.16s;color:var(--brand)}
.tab[aria-selected="true"] .tab-ar{opacity:1;transform:none}
/* Základní (bez JS a na mobilu): panely pod sebou, světle. Osm tmavých pásů
   za sebou by byl moc velký blok, obsah zůstává týž. */
.panes{position:relative}
/* První panel oddělovač nemá - byl by hned pod nadpisem sekce. */
.pane:first-child{border-top:0}
.pane{padding:22px 0;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;justify-content:flex-start;gap:10px;position:relative;z-index:1}
.pane h3{color:var(--text-heading);font-size:24px;font-weight:var(--weight-extrabold);max-width:22ch;text-wrap:balance}
.pane p{color:var(--text-muted);font-size:var(--text-base);max-width:44ch}
.pane ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pane li{padding:7px 14px;border-radius:999px;border:1px solid var(--border-default);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted)}
/* Jednopanelový režim zapíná JS. `min-height` je jen podlaha, výšku určuje
   nejvyšší panel - proto grid, ne absolutní pozicování. */
.is-tabs .panes{display:grid;min-height:430px;background-color:var(--ink);border-radius:22px;overflow:hidden}
.is-tabs .panes::before{content:"";position:absolute;inset:auto -20% -70% 25%;height:150%;background:radial-gradient(46% 50% at 50% 50%,rgba(16,169,236,.3),transparent 70%)}
.is-tabs .pane{grid-area:1/1;padding:48px;border-top:0;justify-content:center;gap:18px;opacity:0;visibility:hidden;transition:opacity .28s,visibility 0s .28s}
.is-tabs .pane[data-on]{opacity:1;visibility:visible;transition:opacity .28s}
.is-tabs .pane h3{color:#fff;font-size:36px}
.is-tabs .pane p{color:rgba(255,255,255,.76);font-size:var(--text-lg)}
.is-tabs .pane li{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.86)}

/* Pod 1100 px se taby vypínají úplně. Není to jen zúžení: stohovaná varianta
   z návrhu (tlačítka nahoře, panel pod nimi) znamená na telefonu ťuknutí
   a žádnou viditelnou změnu - panel je pod ohybem. Hodnota 1100 už v souboru
   je (viz zlom hlavičky výš); vlastní 1080 z návrhu by breakpointy množilo. */
@media(max-width:1100px){
	.tabs,.is-tabs{grid-template-columns:1fr;gap:0}
	.is-tabs .tablist{display:none}
	.is-tabs .panes{display:block;min-height:0;background-color:transparent;border-radius:0;overflow:visible}
	.is-tabs .panes::before{display:none}
	/* `[data-on]` (0,3,0) z bloku výš přebíjí `.is-tabs .pane` (0,2,0) i tady,
	   takže první panel potřebuje vlastní pravidlo - jinak by se na něm
	   budoucí změna opacity/visibility tiše neprojevila. */
	.is-tabs .pane,.is-tabs .pane[data-on]{padding:22px 0;border-top:1px solid var(--border-subtle);justify-content:flex-start;gap:10px;opacity:1;visibility:visible}
	.is-tabs .pane:first-child{border-top:0}
	.is-tabs .pane h3{color:var(--text-heading);font-size:24px}
	.is-tabs .pane p{color:var(--text-muted);font-size:var(--text-base)}
	.is-tabs .pane li{border-color:var(--border-default);color:var(--text-muted)}
}