/* Věstba — v6 · jedna vrstva, žádné override kaskády */

/* ---------- tokens ---------- */
:root{
  color-scheme:dark;

  --bg:#100b17;
  --bg-2:#160f1f;
  --surface:#1b1425;
  --surface-2:#241b30;
  --surface-3:#2c2139;

  --line:rgba(233,212,176,.14);
  --line-2:rgba(233,212,176,.26);

  --gold:#e2c797;
  --gold-dim:#bb9a63;
  --cream:#f4ead7;
  --plum:#7d5a95;

  --text:#f6f1e8;
  --muted:#b6abbe;      /* ≥ 7:1 na --bg */
  --muted-2:#948a9d;    /* ≥ 4.6:1, jen ≥13px */
  --danger:#ff8fa0;
  --ok:#8fd6a8;

  /* Typografická škála. Dřív 28 velikostí včetně sedmi půlpixelových
     (12 vs 12,5 vs 13) — okem nerozlišitelné, ale znemožňovaly cokoli
     měnit systémově. Kroky rostou o ~15 %, což je čitelný rozdíl. */
  --fs-xxs:10px;   /* štítky, popisky pozic */
  --fs-xs:11px;    /* eyebrow, drobné meta */
  --fs-sm:12px;    /* fineprint, poznámky */
  --fs-md:13px;    /* popisky karet, tlačítka v panelu */
  --fs-base:14px;  /* běžný text UI, názvy položek */
  --fs-lg:15px;    /* lead, hlavní tlačítka */
  --fs-xl:17px;    /* zvýrazněný text */
  --fs-h3:19px;    /* nadpis třetí úrovně */
  --fs-h2:22px;    /* nadpis v panelu */
  --fs-h1:30px;    /* nadpis stránky */

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* Povrchy. Dřív se táž plocha psala jako .025/.026/.028/.03 podle toho,
     kdy která karta vznikla — čtyři nerozlišitelné hodnoty. */
  --fill-1:rgba(255,255,255,.03);
  --fill-2:rgba(255,255,255,.06);
  --surface-card:#171021;    /* karta na pozadí stránky */
  --surface-input:#15101d;   /* vstupní pole */
  --on-cream:#221a2c;        /* text na krémovém tlačítku */

  /* Zlatá v plochách — 14 různých alf nahrazeno třemi. */
  --gold-a10:rgba(226,199,151,.1);
  --gold-a13:rgba(226,199,151,.13);
  --gold-a16:rgba(226,199,151,.16);

  /* motion — jen compositor-friendly vlastnosti */
  --ease:cubic-bezier(.2,.8,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* Rozšíření panelu: dlouhé a symetrické, bez švihu na konci.
     cubic-bezier(.16,1,.3,1) měl prudký nájezd a dosedal moc rychle. */
  --ease-wide:cubic-bezier(.4,0,.2,1);
  --t-wide:760ms;
  --t-fast:100ms; --t:150ms; --t-slow:210ms;
  /* Velké pohyby měly vlastní nedeklarovanou škálu 260/340/420/620 ms. */
  --t-enter:340ms; --t-panel:420ms; --t-flip:620ms;
  --shell:1120px;
  --shadow:0 24px 70px rgba(0,0,0,.42);
  /* .38 dávalo kontrast ~1,9:1 — pod hranicí 3:1 pro nefiremní prvky
     (WCAG 1.4.11). Focus byl vidět jen tušeně. */
  --ring:0 0 0 3px rgba(226,199,151,.75);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  /* rezervuje místo pro scrollbar — bez toho celá stránka poskočí
     ve chvíli, kdy modál nastaví overflow:hidden na <body> */
  scrollbar-gutter:stable;
}
body{
  margin:0;
  min-height:100dvh;
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-lg);line-height:1.55;
  color:var(--text);
  background:var(--bg);
}
/* Gradienty jako fixní vrstva pod obsahem.
   Dřív byly na <body> s background-attachment:fixed, což nutí prohlížeč
   překreslovat celý viewport při každém scroll framu. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(880px 520px at 78% -6%,rgba(107,70,130,.26),transparent 68%),
    radial-gradient(640px 480px at -8% 60%,rgba(122,86,50,.13),transparent 70%);
}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.025em}
p{margin:0}
img{max-width:100%;display:block}

.shell{width:min(var(--shell),calc(100% - 36px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* jednotné focus prstence — v původní verzi zcela chyběly */
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.gate:focus-visible,.method-link:focus-visible,.full-card:focus-visible,
.chip:focus-visible,.primary:focus-visible,.history-item:focus-visible{box-shadow:var(--ring)}

.skip{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--cream);color:var(--on-cream);padding:10px 16px;border-radius:var(--r-sm);
  font-weight:700;text-decoration:none;transition:top var(--t-slow)
}
.skip:focus{top:12px}

/* Sdělení pro prohlížeč bez JS. Nenápadné, ale ne skryté. */
.noscript{
  width:min(var(--shell),calc(100% - 36px));margin:16px auto 0;
  padding:14px 18px;border-radius:var(--r);
  border:1px dashed var(--line-2);background:var(--gold-a10);
  color:var(--muted);font-size:var(--fs-md);line-height:1.6
}
.noscript b{display:block;color:var(--text);margin-bottom:3px}
.noscript a{color:var(--gold)}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  /* backdrop-filter musí přepočítat blur pokaždé, když se pod lištou cokoli
     překreslí — při scrollu i při animaci v hero. Neprůhledné pozadí je
     vizuálně skoro totéž a stojí nulu. */
  background:rgba(16,11,23,.96);
  border-bottom:1px solid var(--line)
}
.nav{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--text);font-size:var(--fs-h3);font-weight:800;letter-spacing:-.02em
}
.brandmark{
  width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:linear-gradient(150deg,var(--gold-a16),rgba(125,90,149,.22));
  border:1px solid var(--line-2);color:var(--gold);font-size:var(--fs-lg)
}
.linkbtn{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid transparent;background:transparent;
  padding:9px 12px;border-radius:var(--r-sm);
  font-size:var(--fs-md);font-weight:600;color:var(--text);cursor:pointer;transition:background-color var(--t) linear,border-color var(--t) linear,color var(--t) linear
}
.linkbtn:hover{background:var(--fill-2);border-color:var(--line)}
.count{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:var(--r-pill);background:var(--gold-a16);color:var(--gold);
  font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums
}
.count:empty,.count[data-empty="1"]{display:none}

/* ---------- účet v hlavičce ---------- */
.nav-right{display:flex;align-items:center;gap:4px}
.linkbtn.acct{gap:6px}
.credits{
  display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;
  border-radius:var(--r-pill);background:var(--gold-a16);color:var(--gold);
  font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums
}
.acct-label{color:var(--muted-2);font-size:var(--fs-sm)}

/* ---------- modál účtu ---------- */
.acct-mail{color:var(--muted-2);font-size:var(--fs-md);margin-top:4px}
.acct-balance{
  margin:20px 0;padding:22px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--gold-a10);text-align:center
}
.bal-main{display:flex;align-items:baseline;justify-content:center;gap:8px}
.bal-num{font-family:Georgia,serif;font-size:44px;color:var(--gold);line-height:1}
.bal-unit{color:var(--muted);font-size:var(--fs-base)}
.bal-split{margin-top:9px;color:var(--muted-2);font-size:var(--fs-sm);min-height:1.2em}
.acct-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
.acct-actions .ghost{
  padding:12px 18px;border-radius:var(--r);border:1px solid var(--line);
  color:var(--muted);text-decoration:none;font-size:var(--fs-base);font-weight:600;
  transition:color var(--t) linear,border-color var(--t) linear
}
.acct-actions .ghost:hover{color:var(--text);border-color:var(--line-2)}

/* ---------- hero ---------- */
.hero{
  /* Bez rámečku a stínu: hero už není karta se dvěma sloupci, ale úvod
     přes celou šířku. Brány pod ním nesou vizuální váhu samy. */
  position:relative;overflow:hidden;padding:56px 0 4px;
  background:radial-gradient(760px 560px at 50% -12%,rgba(103,68,124,.3),transparent 70%)
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* Bez rotate(): otočený tiling nutí prohlížeč rasterizovat vrstvu mimo osu
     při každém překreslení hero oblasti (např. hover na dlaždici). */
  background-image:radial-gradient(circle,rgba(226,199,151,.9) 0 1px,transparent 1.4px);
  background-size:84px 84px;opacity:.07
}
.hero-in{position:relative;z-index:1;text-align:center}
.hero-in .kicker,.hero-in .hero-trust{justify-content:center}
.hero-in h1{margin-inline:auto}
.hero-in .hero-lead,.hero-in .ai-note{margin-inline:auto;max-width:56ch}
/* Nástup hero obsahu. Dřív se každý prvek animoval zvlášť s prodlevou
   až var(--t-enter), poslední dosedl kolem 960ms — to čtenář vnímá jako postupné
   načítání, ne jako animaci. Teď jeden krátký pohyb celého bloku. */
@keyframes rise{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.hero-in{animation:rise var(--t-enter) var(--ease-out) both}
.gates{animation:rise var(--t-panel) var(--ease-out) 60ms both}

.kicker{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--gold);font-size:var(--fs-xs);font-weight:800;letter-spacing:.2em;text-transform:uppercase
}
.kicker::before{content:"";width:26px;height:1px;background:var(--gold-dim)}
.hero h1{
  font-family:Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(42px,5.6vw,72px);line-height:1.02;letter-spacing:-.035em;
  /* auto po stranách — bez něj se max-width nezarovná na střed a nadpis
     visí doleva, i když má rodič text-align:center. */
  margin:20px auto 16px;max-width:15ch
}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero-lead{color:var(--muted);font-size:var(--fs-xl);max-width:52ch}

.hero-trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;color:var(--muted-2);font-size:var(--fs-md)}
.hero-trust span{position:relative;padding-left:14px}
.hero-trust span::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--gold-dim)}

/* ---------- brány ----------
   Čtyři vchody podle toho, co člověk řeší. Portrét průvodce je velký,
   ale není to volba osoby — průvodce k tématu patří napevno. Barvu nese
   --persona z inline stylu, takže přidání páté brány nevyžaduje CSS. */
.ai-note{margin-top:14px;color:var(--muted-2);font-size:var(--fs-sm);line-height:1.55;opacity:.85}

.gates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:40px}
.gate{
  position:relative;overflow:hidden;display:flex;flex-direction:column;text-align:left;
  padding:0;cursor:pointer;color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface-card);
  /* Jen posun a rámeček — přiblížení portrétu při najetí působilo neklidně. */
  transition:transform var(--t-slow) var(--ease),border-color var(--t-slow) var(--ease)
}
.gate:hover{transform:translate3d(0,-4px,0);border-color:var(--persona)}
.gate:active{transform:none;transition-duration:var(--t-fast)}

.gate-art{position:relative;display:block;height:196px;overflow:hidden}
.gate-art img{
  /* max-width kvůli globálnímu img{max-width:100%}, které jinak zúží
     obrázek na jeho vlastní poměr místo na šířku karty. */
  width:100%;max-width:none;height:100%;object-fit:cover;object-position:50% 16%;
  /* Bylo .84 — spolu s přechodem přes obrázek z toho byla tmavá plocha
     bez obsahu. Portréty jsou to hlavní, co brány odlišuje. */
  filter:saturate(.94) brightness(.96);
  transition:filter var(--t-slow) var(--ease)
}
.gate:hover .gate-art img{filter:saturate(1) brightness(.98)}
/* Přechod do těla karty, ať obrázek nekončí ostrou hranou. */
/*
 * Přechod do těla karty.
 *
 * Kryl 64 % výšky obrázku, ačkoli text do něj zasahuje jen 38 px —
 * z portrétů byla vidět sotva třetina a na tmavém pozadí působily
 * karty prázdně. Teď kryje jen tolik, kolik potřebuje text pod sebou.
 */
.gate-art::after{
  content:"";position:absolute;inset:auto 0 -1px 0;height:42%;
  background:linear-gradient(to top,var(--surface-card) 8%,rgba(23,16,33,.72) 42%,transparent)
}

.gate-body{position:relative;z-index:1;margin-top:-38px;padding:0 18px 20px;
  display:flex;flex-direction:column;flex:1}
.gate-poetic{
  display:block;font-family:Georgia,serif;font-style:italic;
  font-size:var(--fs-md);color:var(--persona);opacity:.85;margin-bottom:1px
}
.gate b{font-family:Georgia,serif;font-weight:400;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.02em}
.gate-sub{margin-top:5px;color:var(--muted);font-size:var(--fs-md);line-height:1.5;
  /* Dvě řádky vždy — jinak se „Vede tě X" u kratších popisků posune výš
     a čtyři brány přestanou být v lince. */
  min-height:2.9em}
.gate-who{display:flex;align-items:center;gap:7px;margin-top:14px;
  font-size:var(--fs-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--persona)}
.gate-who i{font-style:normal;font-size:var(--fs-base)}
.gate-why{margin-top:7px;font-family:Georgia,serif;font-style:italic;
  font-size:var(--fs-sm);line-height:1.55;color:var(--muted-2);min-height:3.1em}
/* Štítek „zdarma". .gate-method .free byl doslovný duplikát. */
.gate-free,.gate-method .free{
  font-size:var(--fs-xxs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-pill);background:rgba(143,214,168,.16);color:var(--ok)
}

.gate-method .from{
  font-size:var(--fs-sm);color:var(--muted-2);white-space:nowrap
}
.gate-method:hover .from{color:var(--persona)}

/* ---------- obsah modálu brány ----------
   Sedí v běžném panelu (.sheet), takže neprůhlednost a ukotvení řeší
   stávající systém modálů. Uvnitř ale nemá vypadat jako seznam položek —
   je to setkání s průvodcem. */

/* Aura za portrétem v barvě persony. Dýchá pomalu; jen transform
   a opacity, takže to obslouží kompozitor bez překreslení. */
.gate-head{position:relative;padding-bottom:26px;margin-bottom:4px;text-align:center}
.gate-head::before{
  content:"";position:absolute;top:-40px;left:50%;width:340px;height:340px;
  margin-left:-170px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--persona-soft),transparent 68%);
  animation:gate-breathe 9s var(--ease) infinite;
  will-change:transform,opacity
}
@keyframes gate-breathe{
  0%,100%{transform:scale(1);opacity:.6}
  50%    {transform:scale(1.09);opacity:1}
}

.gate-fig{position:relative;z-index:1;width:170px;margin:0 auto 18px}
.gate-fig img{
  width:100%;max-width:none;border-radius:50%;aspect-ratio:1;object-fit:cover;
  object-position:50% 14%;
  border:1px solid var(--persona);
  box-shadow:0 0 0 6px var(--persona-soft),0 18px 40px rgba(0,0,0,.55)
}
/* Citát pod portrétem, ne vedle — vedle visel mimo osu a rozbíjel střed. */
.gate-fig p{
  margin-top:16px;font-family:Georgia,serif;font-style:italic;
  font-size:var(--fs-md);line-height:1.65;color:var(--persona)
}

.gate-intro{position:relative;z-index:1}
.gate-intro .eyebrow{color:var(--persona)}
.gate-intro h2{
  font-family:Georgia,serif;font-weight:400;font-size:var(--fs-h1);
  letter-spacing:-.025em;margin:9px auto 10px;max-width:16ch
}
.gate-intro h2 em{font-style:italic;color:var(--persona)}
.gate-intro p{color:var(--muted);font-size:var(--fs-lg);line-height:1.65;max-width:44ch;margin-inline:auto}

/* Oddělovač mezi průvodcem a nabídkou — tenká linka do ztracena,
   ne plná čára přes celou šířku. */
.gate-sep{
  height:1px;margin:26px 0 22px;border:0;
  background:linear-gradient(to right,transparent,var(--line-2),transparent)
}
.gate-lead{text-align:center;color:var(--muted-2);font-size:var(--fs-sm);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}

.gate-methods{display:grid;gap:9px}
.gate-method{
  display:flex;align-items:center;gap:13px;width:100%;padding:14px 16px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--fill-1);color:var(--text);cursor:pointer;
  /* Nástup po řadě — panel se skládá, místo aby naskočil celý najednou. */
  animation:gate-in var(--t-panel) var(--ease-out) both;
  transition:border-color var(--t) linear,background-color var(--t) linear,transform var(--t) var(--ease)
}
@keyframes gate-in{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.gate-method:nth-child(1){animation-delay:40ms}
.gate-method:nth-child(2){animation-delay:80ms}
.gate-method:nth-child(3){animation-delay:120ms}
.gate-method:nth-child(4){animation-delay:160ms}
.gate-method:nth-child(5){animation-delay:200ms}
.gate-method:nth-child(6){animation-delay:240ms}
.gate-method:nth-child(7){animation-delay:280ms}
.gate-method:hover{
  border-color:var(--persona);background:var(--persona-soft);
  transform:translate3d(4px,0,0)
}
.gate-method:active{transform:none;transition-duration:var(--t-fast)}
.gate-method .ic{
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:50%;
  background:var(--persona-soft);color:var(--persona);font-size:var(--fs-lg);
  border:1px solid transparent;transition:border-color var(--t) linear
}
.gate-method:hover .ic{border-color:var(--persona)}
.gate-method b{flex:1;font-size:var(--fs-base);font-weight:600}
/* Šipka až při najetí — napovídá směr, ale neruší v klidu. */
.gate-method::after{
  content:"→";color:var(--persona);font-size:var(--fs-lg);
  opacity:0;transform:translate3d(-6px,0,0);
  transition:opacity var(--t) linear,transform var(--t) var(--ease)
}
.gate-method:hover::after,.gate-method:focus-visible::after{opacity:1;transform:none}




/* ---------- další metody ---------- */
/* ---------- banner „co je zdarma" ----------
   Bezplatná zkouška je hlavní argument, ale musí vedle sebe říct
   i to, co zdarma není — jinak je paywall později překvapení. */
/*
 * Pruh „zdarma" pod hero.
 *
 * Dřív byl zelený — jenže zelená se na webu nikde jinde nevyskytuje,
 * takže pruh vypadal jako cizí vložený banner z jiné stránky. A světlá
 * cedulka měla bílý text na světle zelené: nečitelné.
 *
 * Teď stojí na zlaté z palety, cedulka je tmavý text na zlaté (kontrast
 * přes 8:1) a pruh má stejný rádius i rámeček jako karty výš. Není to
 * reklamní cedule, je to nabídka podniku.
 */
.freebar-wrap{margin-top:30px}
.freebar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 28px;padding:20px 24px;border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:
    radial-gradient(120% 160% at 0% 50%,rgba(226,178,96,.14),transparent 62%),
    var(--fill-1)
}
.freebar-main{display:flex;align-items:center;gap:15px}
.freebar-tag{
  flex:0 0 auto;font-size:var(--fs-xxs);font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:7px 13px;border-radius:var(--r-pill);
  background:var(--gold);color:#231607
}
.freebar-main b{display:block;font-size:var(--fs-base);color:var(--cream)}
.freebar-main span{display:block;color:var(--muted);font-size:var(--fs-md);margin-top:2px}
.freebar-up{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.freebar-up span{color:var(--muted);font-size:var(--fs-md)}
.freebar-up strong{color:var(--gold);white-space:nowrap}
.freebar-cta{
  flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;
  padding:0 20px;border-radius:var(--r);
  background:var(--gold);color:#231607;font-size:var(--fs-md);font-weight:700;
  text-decoration:none;white-space:nowrap;
  transition:filter var(--t) linear,transform var(--t) var(--ease)
}
.freebar-cta:hover{filter:brightness(1.07);transform:translate3d(0,-1px,0)}

@media(max-width:640px){
  .freebar{flex-direction:column;align-items:stretch;gap:14px}
  .freebar-up{flex-direction:column;align-items:stretch;text-align:center}
  .freebar-cta{text-align:center}
}

.methods{padding:64px 0 8px}

/* Štítek zdarma na dlaždici — nahrazuje šipku, aby bylo hned vidět,
   co si můžeš zkusit bez placení. */
.full-free{
  font-style:normal;font-size:var(--fs-xxs);font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);
  background:rgba(143,214,168,.16);color:var(--ok);white-space:nowrap
}
/* Cena u placených metod. Tišší než štítek „zdarma" — ten má lákat,
   tohle má jen informovat, aby cena nepřekvapila až v panelu. */
.full-from{
  font-style:normal;font-size:var(--fs-sm);font-weight:600;
  color:var(--muted-2);white-space:nowrap
}
.full-card:hover .full-from{color:var(--gold)}
.more-wrap{margin-top:18px;text-align:center}
/* Hledání sedí v hlavičce sekce vedle nadpisu. */
.methods .sec-head .search{flex:0 0 auto}

/* ---------- průvodci ----------
   Barvu nese --persona z inline stylu, takže jedna sada pravidel obslouží
   všechny čtyři a přibytí páté nevyžaduje zásah do CSS. */

.guide-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px
}
.guide{
  display:flex;flex-direction:column;gap:14px;padding:22px 20px;
  text-decoration:none;color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--persona-soft,var(--fill-2)),var(--fill-1));
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease)
}
.guide:hover{transform:translate3d(0,-3px,0);border-color:var(--persona,var(--line-2))}
.guide:active{transform:translate3d(0,0,0) scale(.99);transition-duration:var(--t-fast)}
/* Portrét je na výšku (320×420). Vecpaný do kolečka 56px z něj zbyla
   nečitelná šmouha — proto pruh na celou šířku karty s ořezem na horní
   třetinu, kde je obličej. */
.guide-art{
  display:block;width:calc(100% + 40px);height:132px;margin:-22px -20px 0;
  overflow:hidden;position:relative;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:var(--persona-soft,var(--fill-2))
}
.guide-art img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 22%;
  filter:saturate(.8) brightness(.9);
  transition:transform var(--t-slow) var(--ease),filter var(--t-slow) var(--ease)
}
.guide:hover .guide-art img{transform:scale(1.04);filter:saturate(1) brightness(1)}
/* Přechod do karty, ať obrázek nekončí ostrou hranou. */
.guide-art::after{
  content:"";position:absolute;inset:auto 0 0 0;height:60%;
  background:linear-gradient(to top,var(--surface,var(--surface)),transparent)
}
.guide-domain{
  display:block;font-size:var(--fs-xxs);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--persona,var(--gold))
}
.guide-body strong{display:block;font-family:Georgia,serif;font-weight:400;font-size:var(--fs-h2);margin:5px 0 7px}
.guide-pitch{display:block;color:var(--muted);font-size:var(--fs-md);line-height:1.55}
.guide-methods{display:flex;flex-wrap:wrap;gap:5px;margin-top:13px}
.guide-methods span{
  font-size:var(--fs-xs);color:var(--muted-2);
  padding:3px 8px;border:1px solid var(--line);border-radius:var(--r-pill)
}

/* ---------- ceník ---------- */
.pricing{padding:64px 0 8px}
.price-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px
}
.price{
  display:flex;flex-direction:column;padding:22px 20px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--fill-1)
}
/* Zdarma a doporučený tier se musí lišit na první pohled, ne jen textem. */
.price--free{
  background:linear-gradient(165deg,rgba(143,214,168,.09),var(--fill-1));
  border-color:rgba(143,214,168,.32)
}
.price--pick{border-color:var(--line-2);background:linear-gradient(165deg,var(--gold-a10),var(--fill-1))}
.price-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.price-head strong{font-size:var(--fs-lg)}
.price-tag{font-family:Georgia,serif;font-size:var(--fs-h2);color:var(--gold);white-space:nowrap}
.price--free .price-tag{color:var(--ok)}
.price p{margin-top:9px;color:var(--muted);font-size:var(--fs-md);line-height:1.6;flex:1}
.price-pick{
  margin-top:12px;align-self:flex-start;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dim)
}
/* Akce sedí na SPODKU karty (margin-top:auto), takže tlačítka jsou
   v jedné lince napříč ceníkem i při různě dlouhých popiscích. Dřív
   plavala hned pod textem a linka se lámala. */
/* Klikací plocha měla 21px — padding místo pouhého margin-top. */
.price-cta{
  margin-top:auto;padding:14px 0 2px;align-self:flex-start;min-height:44px;
  display:inline-flex;align-items:center;
  font-size:var(--fs-md);font-weight:600;text-decoration:none;
  background:none;border:0;cursor:pointer;color:var(--gold);
  transition:color var(--t) linear
}
.price--free .price-cta{color:var(--ok)}
.price-cta:hover{color:var(--text)}
/* Popisek nesmí tlačit akci dolů — od toho je margin-top:auto výš. */
.price p{flex:1 0 auto}
.price-what{color:var(--text);font-weight:600}
.price-note{
  max-width:78ch;margin:28px auto 0;text-align:center;
  color:var(--muted-2);font-size:var(--fs-md);line-height:1.75
}
/* Popis pod hlavním údajem v kartě ceníku. */
.price-sub{margin-top:4px;color:var(--muted-2);font-size:var(--fs-sm);line-height:1.5}

.sec-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-bottom:14px;border-bottom:1px solid var(--line)
}
.sec-head .eyebrow{display:block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.sec-head p{margin-top:6px;color:var(--muted);font-size:var(--fs-base)}
.toggle-all{
  border:1px solid var(--line);background:var(--fill-1);
  color:var(--gold);font-size:var(--fs-md);font-weight:700;cursor:pointer;
  padding:9px 14px;border-radius:var(--r-pill);white-space:nowrap;transition:background-color var(--t) linear,border-color var(--t) linear,color var(--t) linear
}
.toggle-all:hover{background:var(--gold-a10);border-color:var(--line-2)}

.method-links{display:flex;flex-wrap:wrap;gap:9px;padding:18px 0 4px}
.method-link{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--fill-1);color:var(--muted);
  padding:10px 15px;font-size:var(--fs-md);cursor:pointer;white-space:nowrap;transition:background-color var(--t) linear,border-color var(--t) linear,color var(--t) linear
}
.method-link:hover{background:var(--gold-a10);border-color:var(--line-2);color:var(--cream)}
.method-link span{color:var(--gold);font-size:var(--fs-lg)}

.chips{display:flex;flex-wrap:wrap;gap:7px}
/* Pilulka s přepínatelným stavem. .topic byl doslovný duplikát .chip —
   stejné pravidlo napsané dvakrát na dvou místech souboru. */
.chip,.topic{
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--fill-1);
  color:var(--muted);padding:8px 13px;font-size:var(--fs-sm);cursor:pointer;
  transition:background-color var(--t) linear,border-color var(--t) linear,color var(--t) linear
}
.chip:hover,.topic:hover{border-color:var(--line-2);color:var(--cream)}
.chip[aria-pressed="true"],.topic[aria-pressed="true"]{
  background:var(--cream);border-color:var(--cream);color:var(--on-cream);font-weight:700
}
.search{
  display:flex;align-items:center;gap:8px;min-width:230px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--fill-1);padding:0 12px
}
.search span{color:var(--muted-2)}
.search input{width:100%;border:0;outline:0;background:transparent;padding:10px 0;font-size:var(--fs-base)}
.search input::placeholder{color:var(--muted-2)}
.search:focus-within{border-color:var(--line-2);box-shadow:var(--ring)}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.full-card{
  display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--fill-1);color:var(--text);
  padding:14px;text-align:left;cursor:pointer;transition:transform var(--t) var(--ease),background-color var(--t) linear,border-color var(--t) linear
}
.full-card:hover{background:var(--fill-2);border-color:rgba(226,199,151,.36);transform:translate3d(0,-1px,0)}
.full-card:active{transform:translate3d(0,0,0) scale(.99);transition-duration:var(--t-fast)}
.full-icon{
  width:42px;height:42px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--gold-a13);color:var(--gold);font-size:var(--fs-h3)
}
.full-card strong{display:block;font-size:var(--fs-base)}
.full-card small{display:block;font-size:var(--fs-sm);color:var(--muted);margin-top:3px;line-height:1.45}
.full-card .arrow{color:var(--gold);font-style:normal}
.empty{text-align:center;padding:40px;color:var(--muted)}

/* ---------- jak to funguje ---------- */
.how{padding:64px 0 8px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.step{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--fill-1);padding:22px
}
.step b{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--gold-a13);color:var(--gold);
  font-size:var(--fs-md);margin-bottom:14px;border:1px solid var(--line)
}
.step strong{display:block;font-size:var(--fs-lg);margin-bottom:5px}
.step p{color:var(--muted);font-size:var(--fs-md);line-height:1.6}

/* ---------- safety ---------- */
.safety{padding:64px 0 0}
.strip{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.strip>div{padding:24px 28px}
.strip>div+div{border-left:1px solid var(--line)}
.strip b{display:block;font-size:var(--fs-base);margin-bottom:5px}
.strip span{display:block;font-size:var(--fs-md);line-height:1.55;color:var(--muted-2)}

/*
 * Nabídka „nech si výklad" pod hotovým textem.
 *
 * Záměrně tichá — stojí pod výkladem, ne přes něj. Kdo si ji nevšimne,
 * o nic nepřijde; kdo ji chce, má ji po ruce.
 */
.keep-offer{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 20px;margin-top:20px;padding:16px 18px;
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--gold-a10)
}
.keep-offer b{display:block;font-size:var(--fs-base);color:var(--cream)}
.keep-offer span{display:block;margin-top:3px;color:var(--muted);font-size:var(--fs-md);max-width:52ch}
.keep-offer .primary{flex:0 0 auto;white-space:nowrap}
@media(max-width:560px){
  .keep-offer{flex-direction:column;align-items:stretch}
  .keep-offer .primary{width:100%}
}

.history-empty .primary{margin-top:16px}

/* Očíslované kroky přihlášení — pro toho, kdo čeká políčko na heslo. */
.login-steps{
  margin:14px 0 4px;padding:0 0 0 22px;display:grid;gap:7px;
  color:var(--muted);font-size:var(--fs-md);line-height:1.55
}
.login-steps li{padding-left:3px}
.login-steps li::marker{color:var(--gold);font-weight:700}

/*
 * Cena v panelu výkladu.
 *
 * Cenovka u varianty i pod odesílacím tlačítkem. Zdarma je zeleně,
 * placené zlatě — stejné významy barev jako v ceníku výš.
 */
.variant-price{
  display:block;margin-top:6px;
  font-size:var(--fs-sm);font-weight:700;color:var(--gold)
}
.variant-price.is-free{color:var(--ok)}
.submit-price{
  margin:10px 0 0;text-align:center;
  color:var(--muted);font-size:var(--fs-md);line-height:1.5
}
.submit-price b{color:var(--cream)}

/*
 * Vysvětlivka metody — sbalená.
 *
 * Kdo tarot zná, nechce číst, co to je. Kdo netuší, co jsou runy Elder
 * Futhark, si to rozklikne. Sbalené to nikomu nepřekáží a nezabírá
 * místo nad formulářem.
 */
.about{margin-top:10px}
.about summary{
  display:inline-flex;align-items:center;gap:6px;
  min-height:32px;padding:2px 0;cursor:pointer;list-style:none;
  color:var(--gold);font-size:var(--fs-sm);font-weight:600;
  text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:3px;transition:text-decoration-color var(--t) linear
}
.about summary::-webkit-details-marker{display:none}
.about summary::before{
  content:"›";display:inline-block;font-size:var(--fs-base);
  transition:transform var(--t) var(--ease)
}
.about[open] summary::before{transform:rotate(90deg)}
.about summary:hover,.about summary:focus-visible{text-decoration-color:currentColor}
.about p{
  margin:6px 0 0;color:var(--muted);font-size:var(--fs-md);line-height:1.6;
  max-width:62ch
}

/* Vysvětlivka varianty — přímo v dlaždici, bez rozbalování.
   Je krátká a při výběru rozložení je potřeba hned. */
.variant-about{
  display:block;margin-top:5px;color:var(--muted-2);
  font-size:var(--fs-xs);line-height:1.45
}
/* Upozornění v kartě ceníku, když metoda zdarma není. */
.price-hint{margin:8px 0 0;color:var(--muted-2);font-size:var(--fs-sm);line-height:1.5}

/* ---------- patička ---------- */
/*
 * Mapa výkladů.
 *
 * Odkazy dřív vypadaly jako obyčejný šedý text — nic nenaznačovalo, že
 * jsou klikací, takže si jich nikdo nevšiml. Teď mají barvu textu
 * a podtržení se objeví při najetí.
 *
 * Klikací plocha je 44 px vysoká: WCAG 2.5.8 žádá jen 24 px, ale
 * v patičce jsou odkazy těsně pod sebou a prst na mobilu je hrubší
 * nástroj než myš.
 */
.footer-map{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px;
  padding:44px 0 36px;border-top:1px solid var(--line)
}
.fmap-col b{
  display:block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:2px
}
.fmap-col ul{list-style:none;margin:0;padding:0;display:grid}
.fmap-col a{
  display:block;padding:12px 0;min-height:44px;
  color:var(--muted);font-size:var(--fs-md);
  text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:color var(--t) linear,text-decoration-color var(--t) linear
}
.fmap-col a:hover,.fmap-col a:focus-visible{
  color:var(--cream);text-decoration-color:currentColor
}

/*
 * Spodní řádek: značka vlevo, právní odkazy vpravo, drobným pod čarou.
 *
 * Právní odkazy dřív svítily modře, protože je žádné pravidlo netrefilo
 * a prohlížeč použil výchozí barvu odkazu. Teď mají stejné chování jako
 * mapa výše — jedna patička, jeden jazyk.
 */
.footer{
  padding:8px 0 30px;display:grid;grid-template-columns:auto 1fr;
  gap:18px 20px;align-items:center
}
/*
 * Právní stránky mají v patičce jen odstavec s údaji provozovatele —
 * žádnou značku ani odkazy. Dvousloupcová mřížka ho nacpala do úzkého
 * prvního sloupce a zalomila po slabikách. Navíc nad sebou nemají mapu
 * výkladů, takže si odstup i čáru musí udělat samy.
 *
 * Řešeno třídou, ne selektorem :has() — ten starší prohlížeče neznají
 * a zahodily by celé pravidlo i s rozvržením.
 */
.footer--plain{
  display:block;padding:34px 0 30px;
  border-top:1px solid var(--line);margin-top:40px;
  color:var(--muted-2);font-size:var(--fs-sm)
}
.footer .brand{font-size:var(--fs-lg)}
.footer-links{justify-self:end;display:flex;flex-wrap:wrap;gap:6px 22px}
.footer-links a,.footer-links button{
  display:inline-flex;align-items:center;min-height:44px;padding:4px 0;
  border:0;background:none;cursor:pointer;
  color:var(--muted);font-size:var(--fs-md);font-family:inherit;
  text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:color var(--t) linear,text-decoration-color var(--t) linear
}
.footer-links a:hover,.footer-links a:focus-visible,
.footer-links button:hover,.footer-links button:focus-visible{
  color:var(--cream);text-decoration-color:currentColor
}
.footer small{
  grid-column:1/-1;border-top:1px solid var(--line);
  padding-top:20px;margin-top:6px;
  color:var(--muted-2);font-size:var(--fs-sm);line-height:1.65
}

@media(max-width:900px){
  .footer-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
}
@media(max-width:560px){
  .footer-map{grid-template-columns:1fr;padding:32px 0 26px}
}

/* ---------- modály ---------- */
.modal{position:fixed;inset:0;z-index:50}
.modal[hidden]{display:none}
.backdrop{
  position:absolute;inset:0;background:rgba(7,5,10,.78);
  opacity:0;transition:opacity 260ms var(--ease)
}
.modal.open .backdrop{opacity:1}
.sheet{
  position:absolute;right:0;top:0;height:100%;width:min(640px,100%);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#221830,var(--on-cream));
  border-left:1px solid var(--line);box-shadow:-16px 0 40px rgba(0,0,0,.45);
  /* výchozí stav je mimo obrazovku; třídu .open přidá JS až po layoutu,
     takže animace nikdy nestartuje uprostřed drahého prvního renderu */
  transform:translate3d(100%,0,0);
  /* width se animuje jen jednou, při doručení obrazu — panel se roztáhne,
     aby se druhý sloupec neměl kam natlačit. */
  /* 210 ms na 640px dráze bylo příliš rychlé — oko to nestihne sledovat
     a vjem je trhaný, ne svižný. 340 ms s měkkým dosednutím působí,
     že panel dojede, ne že se přepne. */
  transition:transform var(--t-enter) var(--ease-out),width var(--t-wide) var(--ease-wide);
  will-change:transform
}
.modal.wide .sheet{width:min(1040px,100%)}
.modal.open .sheet{transform:translate3d(0,0,0)}
/* Obsah dojíždí lehce za panelem — panel se otevře, teprve pak se objeví,
   co je uvnitř. Bez toho oboje naskočí naráz a působí to placatě. */
.modal.open .sheet-body{animation:sheet-in var(--t-panel) var(--ease-out) 90ms both}
@keyframes sheet-in{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
.sheet--wide{width:min(720px,100%)}
.sheet-top{
  position:sticky;top:0;z-index:2;flex:0 0 auto;
  display:flex;justify-content:flex-end;padding:12px 14px 0;
  background:linear-gradient(180deg,#221830 60%,transparent)
}
/* 44px je minimum pro dotyk (WCAG 2.5.8). Dřív 38. */
.close{
  width:44px;height:44px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--line);background:var(--surface-3);color:var(--text);font-size:var(--fs-h2);line-height:1
}
.close:hover{background:var(--surface-2);border-color:var(--line-2)}
.sheet-body{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;padding:4px 34px 48px}

.sheet-head{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;margin-bottom:22px}
.sheet-head.simple{display:block}
.modal-icon{
  width:50px;height:50px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--gold-a13);color:var(--gold);font-size:var(--fs-h2)
}
.eyebrow{color:var(--gold);font-weight:800;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase}
.sheet h2{font-family:Georgia,serif;font-weight:400;font-size:var(--fs-h1);letter-spacing:-.02em;margin:5px 0 6px}
.sheet-head p{color:var(--muted);font-size:var(--fs-md)}

/* form */
.field{margin:18px 0}
.field>label{display:block;font-size:var(--fs-md);font-weight:600;margin-bottom:7px}
.field label span{font-weight:400;color:var(--muted-2)}
.field input,.field textarea{
  width:100%;padding:13px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--surface-input);color:var(--cream);outline:0;transition:border-color var(--t) linear,box-shadow var(--t) linear
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field textarea:focus{border-color:var(--gold-dim);box-shadow:var(--ring)}
.field textarea{min-height:124px;resize:vertical;line-height:1.6}
.charcount{text-align:right;color:var(--muted-2);font-size:var(--fs-sm);margin-top:6px;font-variant-numeric:tabular-nums}
.charcount.near{color:var(--gold)}

.variant-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.variant input{position:absolute;opacity:0;width:0;height:0}
.variant span{
  display:block;border:1px solid var(--line);border-radius:var(--r);
  background:var(--fill-1);padding:12px;cursor:pointer;transition:background-color var(--t) linear,border-color var(--t) linear,color var(--t) linear
}
.variant span:hover{border-color:var(--line-2)}
.variant input:checked+span{border-color:var(--gold-dim);background:var(--gold-a10)}
.variant input:focus-visible+span{box-shadow:var(--ring)}
.variant b{display:block;font-size:var(--fs-md)}
.variant small{display:block;color:var(--muted-2);font-size:var(--fs-sm);margin-top:2px}

.divider{display:flex;align-items:center;gap:12px;margin:24px 0 10px;color:var(--muted-2);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

.field-legend em{font-style:normal;font-weight:400;color:var(--muted-2)}
.field-legend{display:block;font-size:var(--fs-md);font-weight:600;margin-bottom:7px}

.topic-chips{display:flex;flex-wrap:wrap;gap:7px}

.q-hint{
  margin-top:-2px;color:var(--gold);font-size:var(--fs-sm);line-height:1.5
}

.prompt-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.prompt-suggestions:empty{display:none}
.suggestion{
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--fill-1);
  color:var(--muted);padding:9px 13px;font-size:var(--fs-sm);cursor:pointer;transition:background-color var(--t) linear,border-color var(--t) linear,color var(--t) linear
}
.suggestion:hover{border-color:var(--gold-dim);color:var(--gold)}

.notice{
  display:flex;gap:11px;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--r);background:var(--fill-1);
  padding:13px;color:var(--muted);font-size:var(--fs-sm);line-height:1.55
}
/* Pozor: selektor .notice>span chytal OBA potomky, takže odstavec dostal
   width:22px a kulatý zlatý styl ikony. Cílíme třídou, ne pozicí. */
.notice-mark{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-a13);color:var(--gold);font-weight:800;font-size:var(--fs-sm)
}
.notice-text{flex:1 1 auto;min-width:0}

/* Diskrétní varianta sdělení o AI. Čl. 50 odst. 4 AI Actu u zjevně
   fiktivních/uměleckých děl omezuje povinnost na vhodné zveřejnění
   existence, které nebrání užívání díla — nesmí ale zmizet úplně. */
.fineprint{
  margin-top:12px;text-align:center;
  color:var(--muted-2);font-size:var(--fs-sm);line-height:1.5
}
.fineprint button{
  border:0;background:none;padding:0 0 0 4px;cursor:pointer;
  color:var(--gold);font-size:var(--fs-sm);text-decoration:underline
}
.fineprint button:hover{color:var(--cream)}

.primary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:var(--r);padding:15px 20px;cursor:pointer;
  background:var(--cream);color:var(--on-cream);font-weight:800;transition:transform var(--t-fast) var(--ease),background-color var(--t) linear
}
.primary:hover{background:#fff7e9}
.primary:active{transform:scale(.985)}
.primary[disabled]{opacity:.55;cursor:progress}
.submit{width:100%;margin-top:14px}

/* palm upload */
.palm-intro{margin:0 0 12px;color:var(--muted);font-size:var(--fs-md)}
.palm-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.palm-drop{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:210px;padding:18px;text-align:center;overflow:hidden;cursor:pointer;
  border:1.5px dashed var(--line-2);border-radius:var(--r);background:#17111f;transition:background-color var(--t) linear,border-color var(--t) linear,color var(--t) linear
}
.palm-drop:hover{border-color:var(--gold-dim);background:var(--surface)}
.palm-drop:focus-within{box-shadow:var(--ring)}
.palm-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.upload-plus{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;
  background:var(--gold-a13);color:var(--gold);font-size:var(--fs-h1)
}
.palm-drop b{font-size:var(--fs-base)}
.palm-drop small{color:var(--muted);font-size:var(--fs-sm);margin-top:4px}
.palm-drop em{font-style:normal;font-size:var(--fs-sm);color:var(--muted-2);margin-top:12px}
.palm-drop img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.palm-drop.ready img{display:block}
.palm-drop.ready::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(15,10,22,.82))}
.palm-drop.ready b,.palm-drop.ready small,.palm-drop.ready .upload-plus{display:none}
.palm-drop.ready em{position:absolute;z-index:2;bottom:14px;color:var(--cream);font-weight:700}
.palm-tips{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px}
.palm-tips span{font-size:var(--fs-sm);color:var(--muted-2)}
.field-help{margin-top:9px;color:var(--muted-2);font-size:var(--fs-sm);line-height:1.55}

/* loading */
.loading-view{text-align:center;padding:90px 20px}
.ritual-loader{
  width:88px;height:88px;margin:0 auto 26px;position:relative;
  display:grid;place-items:center;color:var(--gold);font-size:var(--fs-h1)
}
.ritual-loader::before,.ritual-loader::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--line-2);will-change:transform,opacity
}
.ritual-loader::before{animation:halo 2.6s var(--ease-out) infinite}
.ritual-loader::after{
  border-color:transparent;border-top-color:var(--gold);
  animation:orbit 1.15s linear infinite
}
@keyframes halo{0%{transform:scale(.82);opacity:.85}100%{transform:scale(1.28);opacity:0}}
@keyframes orbit{to{transform:rotate(360deg)}}
.ritual-loader span{animation:breathe 2.6s var(--ease) infinite}
.loading-view h3{font-family:Georgia,serif;font-weight:400;font-size:var(--fs-h1);margin-bottom:10px}
.loading-view p{color:var(--muted);font-size:var(--fs-base);min-height:1.6em;transition:opacity var(--t-slow) linear}

/* result */
.result-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:22px}
.ghost{
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--fill-1);
  color:var(--muted);padding:9px 14px;font-size:var(--fs-md);cursor:pointer;transition:background-color var(--t) linear,border-color var(--t) linear,color var(--t) linear
}
.ghost:hover{color:var(--cream);border-color:var(--line-2)}
.iconbtn{
  width:44px;height:44px;margin-left:6px;border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-lg);
  border:1px solid var(--line);background:var(--fill-1);color:var(--muted);transition:background-color var(--t) linear,border-color var(--t) linear,color var(--t) linear
}
.iconbtn:hover{color:var(--cream);border-color:var(--line-2)}
.iconbtn.on{color:var(--gold);border-color:var(--gold-dim)}


/* Hlavička sekce — bez ní není z UI poznat, že symboly losuje aplikace
   okamžitě a teprve text nad nimi píše model. */
.reversed-note{
  /* Stojí pod celým blokem karet, ne mezi nimi — proto větší odstup. */
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  color:var(--muted-2);font-size:var(--fs-sm);line-height:1.55
}
.reversed-note em{
  font-style:normal;color:var(--gold);
  background:var(--gold-a13);border-radius:var(--r-pill);padding:1px 6px;font-size:var(--fs-xs)
}

.ritual-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  margin:0 0 10px
}
.ritual-head span{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:800}
.ritual-head em{font-style:normal;font-size:var(--fs-sm);color:var(--muted-2)}

/* ---------- výběr karet ---------- */
.pick-fan{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px
}
.pick{
  flex:0 0 auto;width:64px;aspect-ratio:120/186;padding:0;cursor:pointer;
  border:0;background:none;color:var(--gold-dim);border-radius:var(--r-sm);
  transition:transform var(--t) var(--ease),opacity var(--t) linear;
  will-change:transform
}
.pick svg{display:block;width:100%;height:100%;border-radius:var(--r-sm);
  background:linear-gradient(155deg,#241a31,#1a1324)}
.pick:hover{transform:translate3d(0,-6px,0)}
.pick:active{transform:translate3d(0,-2px,0) scale(.97)}
.pick.taken{opacity:0;pointer-events:none;transform:translate3d(0,-22px,0)}
.pick-fan.spent{opacity:0;transition:opacity var(--t) linear}

.pick-note{
  display:flex;align-items:center;gap:12px;margin:0 0 14px;
  color:var(--muted-2);font-size:var(--fs-sm);font-variant-numeric:tabular-nums
}
.pick-note .ghost{padding:6px 12px;font-size:var(--fs-sm)}

@media(max-width:640px){
  .pick{width:calc(20% - 5px)}
}

/* ---------- karty ---------- */
.card-row{
  display:flex;flex-wrap:wrap;gap:14px;
  margin:0 0 4px
}
/*
 * Jediná vylosovaná karta se roztahovala do celé šířky panelu, a při
 * poměru 2:3 z toho byla karta vyšší než obrazovka (791 px při okně
 * 739). Výklad i chybová hláška pak zůstaly schované pod přehybem
 * a uživatel netušil, že má rolovat — u chyby to vypadalo, že se pořád
 * pracuje.
 *
 * Karta se drží v rozumné výšce vůči oknu, ať je jich vylosovaná jedna
 * nebo deset.
 */
/*
 * Omezuje se ŠÍŘKA karty, ne její výška.
 *
 * Dřív tu bylo max-height na .card. Jenže .card je flex sloupec, kde
 * .card-inner drží pevný poměr 120/186 a pod ním ještě stojí popisek —
 * obsah se do zkrácené výšky nevešel a přetekl PŘES text s názvem karty.
 * Vypadalo to jako dvě vrstvy písma přes sebe (nahlášeno z testování).
 *
 * Šířka je bezpečná páka: výška z ní vyplyne poměrem a popisek si své
 * místo udrží.
 */
.card-row .card:only-child{max-width:230px;margin-inline:auto}
.card{
  flex:1 1 148px;max-width:200px;min-width:132px;
  margin:0;display:flex;flex-direction:column;gap:11px
}
.card-inner{
  position:relative;aspect-ratio:120/186;
  transform-style:preserve-3d;transform:rotateY(180deg);
  transition:transform var(--t-flip) cubic-bezier(.3,1.2,.4,1);
  will-change:transform
}
.card.revealed .card-inner{transform:rotateY(0deg)}
.card-back,.card-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--r);overflow:hidden
}
.card-back{
  transform:rotateY(180deg);color:var(--gold-dim);
  background:linear-gradient(155deg,#241a31,#1a1324)
}
.card-face{
  color:var(--card-hue,var(--gold));
  background:linear-gradient(170deg,#221a2e,#191222);
  box-shadow:inset 0 0 0 1px rgba(233,212,176,.14)
}
.card-back svg,.card-face svg{display:block;width:100%;height:100%}
/* Obrácená karta: hlavou dolů jde jen symbol, název a číslice zůstávají
   čitelné. Transform-box, aby se otáčelo kolem středu karty, ne kolem
   počátku souřadnic SVG. */
.card.is-reversed .card-symbol{
  transform:rotate(180deg);
  transform-origin:50% 50%;
  transform-box:view-box
}

.card figcaption{display:flex;flex-direction:column;gap:3px}
.card-pos{
  /* Dva řádky napevno — "Kam se situace může vyvíjet" se láme
     a bez rezervace posouvá obsah karty níž než u sousedů. */
  display:block;min-height:2.7em;
  font-size:var(--fs-xxs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);line-height:1.35
}
.card figcaption strong{font-size:var(--fs-base);line-height:1.3}
.card figcaption em{
  display:inline-block;margin-left:6px;vertical-align:2px;
  font-style:normal;font-size:var(--fs-xxs);font-weight:600;letter-spacing:.04em;
  color:var(--gold);background:var(--gold-a13);
  border-radius:var(--r-pill);padding:2px 6px
}
.card figcaption small{font-size:var(--fs-sm);color:var(--muted);line-height:1.45}

.computed{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.computed span{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--fill-1);padding:9px 12px}
.computed small{display:block;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.computed b{display:block;font-size:var(--fs-lg);margin-top:2px}

/* Stavový pruh během čekání na model. Samotný blikající kurzor nestačí —
   u reasoning modelu trvá 20+ s, než přijde první znak. */
.stream-status{
  display:flex;align-items:center;gap:12px;margin-top:16px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--fill-1);padding:13px 14px
}
.stream-status p{flex:1 1 auto;min-width:0;color:var(--muted);font-size:var(--fs-md)}
.stream-status .ghost{flex:0 0 auto;padding:7px 12px;font-size:var(--fs-sm)}
.stream-dots{flex:0 0 auto;display:inline-flex;gap:4px}
.stream-dots i{
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  opacity:.3;animation:dot 1.2s var(--ease) infinite
}
.stream-dots i:nth-child(2){animation-delay:.16s}
.stream-dots i:nth-child(3){animation-delay:.32s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translate3d(0,-3px,0)}}

.result{line-height:1.75;color:var(--text);margin-top:22px}
.result h1{font-family:Georgia,serif;font-weight:400;font-size:var(--fs-h1);line-height:1.2;margin:8px 0 18px;color:var(--text)}
.result h2{font-size:var(--fs-h3);margin:26px 0 8px;color:var(--gold)}
.result h3{font-size:var(--fs-lg);margin:18px 0 6px}
.result p{margin:10px 0}
.result ul{padding-left:20px;margin:10px 0}
.result li{margin:5px 0}
.result em{color:var(--muted)}

/* Blok jedné pozice ve výkladu. Popisek a název karty nad textem,
   ne slepené do jednoho odstavce. Kopíruje rytmus popisků pod kartami. */
.passage{
  margin:20px 0;padding-left:16px;
  border-left:2px solid var(--line-2)
}
.passage-pos{
  display:block;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);line-height:1.35
}
.passage-name{display:block;font-size:var(--fs-xl);font-weight:700;color:var(--text);margin:3px 0 7px}
.passage-name em{
  display:inline-block;margin-left:7px;vertical-align:2px;
  font-style:normal;font-size:var(--fs-xxs);font-weight:600;letter-spacing:.04em;
  color:var(--gold);background:var(--gold-a13);
  border-radius:var(--r-pill);padding:2px 7px
}
.passage p{margin:0}
.passage p + p{margin-top:9px}

/* citace = Verdikt — první věta, která se k něčemu přiklání */
.result blockquote{
  margin:18px 0;padding:16px 18px;
  border:1px solid var(--line-2);border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;
  background:var(--gold-a10);
  color:var(--text);font-size:var(--fs-xl);line-height:1.6
}
.result blockquote p{margin:0}
.result blockquote strong{color:var(--gold)}

/* kurzor při streamování */
.caret{
  display:inline-block;width:2px;height:1.05em;margin-left:2px;
  vertical-align:-.15em;background:var(--gold);
  animation:blink 1s steps(2,start) infinite
}
@keyframes blink{50%{opacity:0}}
/* Dvousloupcový výsledek. Pravý sloupec je samostatná deska, aby
   nevisel v prázdnu vedle textu. */
.result-cols{
  display:grid;grid-template-columns:1fr;gap:0;align-items:start;
  transition:grid-template-columns var(--t-wide) var(--ease-wide),
             gap var(--t-wide) var(--ease-wide)
}
.result-cols.has-image{grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:26px}

.image-col{
  min-width:0;position:sticky;top:8px;
  margin-top:22px;padding:16px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--fill-1);
  animation:colIn var(--t-flip) var(--ease-wide) 180ms both
}
@keyframes colIn{from{opacity:0;transform:translate3d(24px,0,0)}to{opacity:1;transform:none}}

.image-head{margin:0 0 12px}
.image-head span{
  font-size:var(--fs-xxs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:800
}

.image-loading p{margin-top:11px;color:var(--muted-2);font-size:var(--fs-sm);line-height:1.5}
.image-skeleton{
  aspect-ratio:1;border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(100deg,var(--fill-1) 30%,var(--gold-a10) 50%,var(--fill-1) 70%);
  background-size:220% 100%;
  animation:shimmer 1.6s linear infinite
}
@keyframes shimmer{to{background-position:-120% 0}}

#resultImage{margin:0}
.image-zoom{
  position:relative;display:block;width:100%;padding:0;cursor:zoom-in;
  border:0;background:none;border-radius:var(--r);overflow:hidden
}
.image-zoom img{
  display:block;width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--line-2);background:#17111f;
  transition:transform var(--t) var(--ease)
}
.image-zoom:hover img{transform:scale(1.02)}
.image-zoom-hint{
  position:absolute;right:9px;bottom:9px;
  width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:rgba(16,11,23,.72);color:var(--gold);font-size:var(--fs-md);
  opacity:0;transition:opacity var(--t) linear
}
.image-zoom:hover .image-zoom-hint,.image-zoom:focus-visible .image-zoom-hint{opacity:1}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:26px}
.lightbox[hidden]{display:none}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(7,5,10,.9);animation:fade var(--t) ease both}
.lightbox-inner{
  position:relative;z-index:1;
  max-width:min(880px,100%);max-height:100%;
  display:flex;flex-direction:column;gap:12px;
  animation:zoomIn 260ms var(--ease-out) both
}
@keyframes zoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.lightbox-inner img{
  min-height:0;max-height:76vh;width:auto;max-width:100%;
  margin:0 auto;border-radius:var(--r-lg);
  border:1px solid var(--line-2);background:#17111f;object-fit:contain
}
.lightbox-inner p{
  color:var(--muted);font-size:var(--fs-md);line-height:1.6;text-align:center;
  max-width:62ch;margin:0 auto
}
.lightbox .close{position:absolute;top:-46px;right:0}
@media(max-width:640px){
  .lightbox{padding:14px}
  .lightbox .close{top:auto;bottom:-46px;right:50%;transform:translateX(50%)}
}
#resultImage figcaption{margin-top:11px;font-size:var(--fs-sm);line-height:1.6;color:var(--muted)}
#resultImageDesc{display:block;margin-bottom:8px}
#resultImageDl{color:var(--gold)}
.image-failed{margin:0;color:var(--muted-2);font-size:var(--fs-sm);line-height:1.5}

/* Úzké displeje: sloupce pod sebe, obraz až za textem. */
@media(max-width:900px){
  .result-cols.has-image{grid-template-columns:1fr;gap:0}
  .image-col{position:static;animation:rise var(--t-panel) var(--ease-out) both}
}

/* ---------- nabídka odemknutí ---------- */
.upsell{
  margin:26px 0 0;padding:20px;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--gold-a10),var(--fill-1))
}
.upsell h3{font-family:Georgia,serif;font-weight:400;font-size:var(--fs-h2);margin-bottom:8px}
.upsell p{color:var(--muted);font-size:var(--fs-base);line-height:1.6}
/* Volba úrovně po ochutnávce. Kdo má kredity, pozná to podle rámečku —
   nemusí klikat do platby, aby zjistil, že platit nemusí. */
.tier-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.tier-pick{
  display:flex;flex-direction:column;gap:4px;padding:14px 13px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
  background:var(--fill-1);color:var(--text);
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)
}
.tier-pick:hover{border-color:var(--line-2);transform:translate3d(0,-2px,0)}
.tier-pick:active{transform:none;transition-duration:var(--t-fast)}
.tier-pick b{font-size:var(--fs-base)}
.tier-pick .tier-price{font-family:Georgia,serif;font-size:var(--fs-h3);color:var(--gold)}
.tier-pick small{color:var(--muted-2);font-size:var(--fs-sm);line-height:1.5}
.tier-pick.is-ready{border-color:rgba(143,214,168,.4)}
.tier-pick.is-ready .tier-price{color:var(--ok)}
@media(max-width:640px){
  .tier-picks{grid-template-columns:1fr}
}

/* Testovací režim plateb. Musí být vidět na první pohled — zapomenutý
   test v produkci znamená, že nikdo nemůže zaplatit. */
.test-mode{
  margin:0 0 16px;padding:11px 14px;border-radius:var(--r);
  border:1px dashed rgba(255,143,160,.5);background:rgba(255,143,160,.08);
  color:var(--danger);font-size:var(--fs-md);line-height:1.55
}

.upsell-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.upsell-actions .primary{padding:12px 20px}
.upsell-note{margin-top:12px;color:var(--muted-2);font-size:var(--fs-sm)}

/* ---------- balíčky ---------- */
.packs{display:grid;gap:9px;margin-bottom:18px}
.pack input{position:absolute;opacity:0;width:0;height:0}
.pack span{
  display:flex;flex-direction:column;gap:3px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--fill-1);padding:14px 16px;cursor:pointer;
  transition:border-color var(--t) linear,background-color var(--t) linear
}
.pack span:hover{border-color:var(--line-2)}
.pack input:checked+span{border-color:var(--gold-dim);background:var(--gold-a10)}
.pack input:focus-visible+span{box-shadow:var(--ring)}
.pack b{font-size:var(--fs-xl)}
.pack small{color:var(--muted);font-size:var(--fs-sm)}

.consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0 4px;cursor:pointer}
.consent input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--gold)}
.consent span{font-size:var(--fs-md);line-height:1.5}
.consent small{display:block;color:var(--muted-2);font-size:var(--fs-sm);margin-top:2px}

.balance-pill{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--gold-a10);color:var(--gold);
  padding:5px 11px;font-size:var(--fs-sm);font-weight:700;
  font-variant-numeric:tabular-nums
}

.result-disclaimer{
  margin-top:28px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted-2);font-size:var(--fs-sm);line-height:1.6
}
.error-box{border:1px solid rgba(255,143,160,.32);background:rgba(255,143,160,.07);border-radius:var(--r);padding:20px}
.error-box h2{font-size:var(--fs-h3);margin-bottom:8px;color:var(--danger)}
.error-box p{color:var(--muted);font-size:var(--fs-base)}
.error-tech{margin-top:14px}
.error-tech summary{
  cursor:pointer;color:var(--muted-2);font-size:var(--fs-sm);
  padding:4px 0;list-style:none
}
.error-tech summary::-webkit-details-marker{display:none}
.error-tech summary::before{content:"▸ ";color:var(--gold)}
.error-tech[open] summary::before{content:"▾ "}
.error-tech pre{
  margin:8px 0 0;padding:11px 12px;overflow:auto;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(0,0,0,.28);
  color:var(--muted);font-size:var(--fs-sm);line-height:1.55;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap;word-break:break-word
}
.error-tech .ghost{margin-top:9px;padding:6px 12px;font-size:var(--fs-sm)}

.error-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
/* Tady byl ulomený selektor: komentář se přilepil k `.error-actions`
   a udělal z následujícího pravidla potomka, takže globální .fineprint
   (výš) platil jen uvnitř chybového boxu. Duplicitní .fineprint i
   .primary{padding:11px 18px} jsou pryč — ten druhý navíc tiše
   přebíjel deklarovaný padding hlavního tlačítka o 450 řádků výš. */

/* history */
.history-list{display:grid;gap:9px}
.history-row{position:relative}
.history-item{
  display:grid;grid-template-columns:1fr auto;gap:8px;
  width:100%;text-align:left;padding:14px 46px 14px 15px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:var(--fill-1);
  color:var(--text);transition:background-color var(--t) linear,border-color var(--t) linear,color var(--t) linear
}
.history-item:hover{background:var(--fill-2);border-color:var(--line-2)}
.history-item>div{display:flex;gap:10px;align-items:center}
.history-item>div>span{color:var(--gold);font-size:var(--fs-h3)}
.history-item b{display:block;font-size:var(--fs-base)}
.history-item time{display:block;font-size:var(--fs-sm);color:var(--muted-2)}
.history-item p{grid-column:1/2;color:var(--muted);font-size:var(--fs-sm);line-height:1.5}
.history-del{
  min-width:36px;min-height:36px;display:grid;place-items:center;
  position:absolute;right:10px;top:10px;border:0;background:none;
  color:var(--muted-2);font-size:var(--fs-base);line-height:1;cursor:pointer;padding:7px;border-radius:var(--r-sm);transition:background-color var(--t) linear,border-color var(--t) linear,color var(--t) linear
}
.history-del:hover{color:var(--danger);background:rgba(255,143,160,.1)}
.history-empty{text-align:center;padding:60px 20px}
.history-empty>span{display:block;font-size:38px;color:var(--gold);margin-bottom:12px}
.history-empty h3{font-family:Georgia,serif;font-weight:400;font-size:var(--fs-h2);margin-bottom:8px}
.history-empty p{color:var(--muted);font-size:var(--fs-base)}
.danger-link{border:0;background:none;color:var(--danger);cursor:pointer;text-decoration:underline;margin-top:20px;font-size:var(--fs-md);padding:6px 0}

.info-content h1{font-family:Georgia,serif;font-weight:400;font-size:var(--fs-h1);margin:8px 0 20px}
.info-content h2{font-size:var(--fs-h3);margin:24px 0 8px;color:var(--gold)}
.info-content p{color:var(--text);margin:12px 0;line-height:1.75}
.info-content li{color:var(--text);margin:6px 0}

.modal-open{overflow:hidden}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:80;transform:translate3d(-50%,0,0);
  background:var(--cream);color:var(--on-cream);font-weight:700;font-size:var(--fs-md);
  padding:11px 18px;border-radius:var(--r-pill);box-shadow:0 12px 40px rgba(0,0,0,.4);
  animation:toast var(--t-slow) var(--ease-out) both
}
@keyframes toast{from{opacity:0;transform:translate3d(-50%,14px,0)}}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .gates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gate-head{grid-template-columns:1fr}
  .gate-fig{max-width:170px;margin:0 auto}
  .how-grid{grid-template-columns:1fr}
  /* Čtyři sloupce se na tabletu nevejdou čitelně — dva jsou minimum. */
  .guide-grid,.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip{grid-template-columns:1fr}
  .strip>div+div{border-left:0;border-top:1px solid var(--line)}
  .footer{grid-template-columns:1fr}
  .footer-links{justify-self:start}
}
@media(max-width:640px){
  .shell,.hero{width:min(100% - 24px,var(--shell))}
  .nav{min-height:60px}
  .hero{margin-top:12px;border-radius:22px}
  .hero h1{font-size:clamp(34px,9vw,44px);max-width:none}
  .hero-lead{font-size:var(--fs-lg)}
  .gates{grid-template-columns:1fr;gap:10px;margin-top:28px}
  /* Portrét 196px × 4 brány = tři obrazovky scrollu jen na výběr.
     130px stačí, obličej je v horní části ořezu. */
  .gate-art{height:130px}
  .gate-body{margin-top:-30px;padding:0 16px 16px}
  .gate b{font-size:var(--fs-h1)}
  /* min-height drží linku jen ve víceslupcové mřížce; na mobilu jsou
     karty pod sebou, takže jen přidává prázdno. */
  .gate-sub,.gate-why{min-height:0}
  .gate-why{margin-top:5px}
  .gate-who{margin-top:10px}
    .guide-grid,.price-grid{grid-template-columns:1fr}
  /* Na mobilu ilustrace vedle textu, ne nad ním — karta by byla moc vysoká. */
  .guide{flex-direction:row;align-items:flex-start;gap:16px}
  .guide-art{width:100px;height:100px;flex:0 0 100px;margin:0;border-radius:var(--r)}
  .guide-art::after{display:none}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px}
  .method-links{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-12px;padding-right:12px;scroll-snap-type:x proximity}
  .method-links::-webkit-scrollbar{display:none}
  .method-link{scroll-snap-align:start}
  .grid{grid-template-columns:1fr}
    .sheet-body{padding:4px 20px 44px}
  .sheet h2{font-size:var(--fs-h1)}
  .variant-grid,.palm-upload-grid{grid-template-columns:1fr}
  .card{flex-basis:calc(50% - 7px);max-width:none}
  .strip>div{padding:18px 0}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .ritual-loader span{animation:none}
  .gate-method,.sheet-body{animation:none}
  .gate-head::before{animation:none;opacity:.7}
  .thanks-mark.spin{animation:none}
  .hero-in,.gates{animation:none;opacity:1;transform:none}
  .caret,.stream-dots i{animation:none}
  .card-inner{transition:none;transform:none}
  .result-cols,.image-col,.image-skeleton{transition:none;animation:none}
  .sheet{transition:none}
  .pick{transition:none}
  .sheet{transition:none}
}

/* ---------- stránka persony ---------- */
/* Barvu dodává inline blok na stránce (--accent), tady se na ni jen
   odkazujeme — jedna sada stylů obslouží všechny persony. */
.persona-page .kicker{color:var(--accent)}
.persona-page .kicker::before{background:var(--accent)}
.persona-page .hero h1 em{color:var(--accent)}
.persona-page .brandmark{
  background:linear-gradient(150deg,var(--accent-soft),var(--fill-2));
  border-color:var(--accent);color:var(--accent)
}
.persona-name{letter-spacing:.16em;text-transform:uppercase;font-size:var(--fs-lg)}

.persona-hero{
  background:
    radial-gradient(560px 460px at 84% 30%,var(--accent-soft),transparent 70%),
    linear-gradient(135deg,#1c1526 0%,#22172e 54%,#17111f 100%)
}

.quick-ask{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;max-width:520px}
.quick-field{position:relative;flex:1 1 260px}
.quick-field input{
  width:100%;padding:15px 44px 15px 16px;border-radius:var(--r);
  border:1px solid var(--line-2);background:rgba(0,0,0,.24);color:var(--cream);outline:0;
  transition:border-color var(--t) linear,box-shadow var(--t) linear
}
.quick-field input::placeholder{color:var(--muted-2)}
.quick-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.quick-icon{
  position:absolute;right:14px;top:50%;translate:0 -50%;
  color:var(--accent);font-size:var(--fs-xl);pointer-events:none
}
.quick-submit{
  flex:0 0 auto;padding:15px 26px;
  background:var(--accent);color:var(--on-cream)
}
.quick-submit:hover{background:var(--accent);filter:brightness(1.08)}

/* Portrét průvodce. Dřív to bylo schematické SVG vkládané inline
   (readfile), zatímco homepage už používá malované WebP — dvě různé
   ilustrace téže postavy na dvou stránkách. */
.persona-portrait{
  width:170px;margin:26px auto 0;position:relative
}
.persona-portrait img{
  /* height:auto je nutné: HTML nese height="420" kvůli rezervaci místa
     při načítání, a bez tohohle si ho prohlížeč vezme jako závaznou
     výšku — z kruhu se stal ovál 130×420 s deformovaným obličejem. */
  width:100%;height:auto;max-width:none;border-radius:50%;aspect-ratio:1;
  object-fit:cover;object-position:50% 14%;
  border:1px solid var(--accent);
  box-shadow:0 0 0 6px var(--accent-soft),0 18px 40px rgba(0,0,0,.55)
}
.persona-quote{
  margin-top:16px;font-family:Georgia,serif;font-style:italic;text-align:center;
  color:var(--accent);font-size:var(--fs-md);line-height:1.7
}

/* Formulář na střed jako zbytek hero. */
.persona-hero .quick-ask{margin-inline:auto;justify-content:center}
.persona-hero .hero-trust{justify-content:center}

@media(max-width:640px){
  .persona-portrait{width:130px;margin-top:20px}
}

/* ---------- právní stránky ----------
   Vlastní URL místo modálu: jde na ně odkázat ze Stripe, z e-mailu
   i z účtenky a vidí je vyhledávače. */
.legal{max-width:760px;padding:40px 0 70px}
.legal-back{margin-bottom:26px}
.legal-body h1{
  font-family:Georgia,serif;font-weight:400;font-size:clamp(30px,4vw,42px);
  letter-spacing:-.03em;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line)
}
.legal-body h2{
  font-family:Georgia,serif;font-weight:400;font-size:var(--fs-h2);
  letter-spacing:-.02em;margin:34px 0 10px;color:var(--gold)
}
.legal-body p{margin-bottom:14px;color:var(--muted);font-size:var(--fs-lg);line-height:1.7}
.legal-body strong{color:var(--text);font-weight:600}
.legal-body ul{margin:0 0 16px;padding-left:20px}
.legal-body li{color:var(--muted);font-size:var(--fs-lg);line-height:1.7;margin-bottom:6px}

.legal-more{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:50px}
.legal-more a{
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--fill-1);text-decoration:none;
  transition:border-color var(--t) linear,background-color var(--t) linear
}
.legal-more a:hover{border-color:var(--line-2);background:var(--fill-2)}
.legal-more b{display:block;font-size:var(--fs-base);margin-bottom:3px}
.legal-more small{color:var(--muted-2);font-size:var(--fs-sm);line-height:1.5}

/* ---------- stránka po platbě ---------- */
.thanks{max-width:560px;padding:70px 0;text-align:center}
.thanks h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(28px,4vw,38px);letter-spacing:-.03em}
.thanks p{margin-top:14px;color:var(--muted);font-size:var(--fs-lg);line-height:1.7}
.thanks strong{color:var(--text)}
.thanks-mark{
  display:grid;place-items:center;width:62px;height:62px;margin:0 auto 22px;
  border-radius:50%;font-size:var(--fs-h1);color:var(--gold);
  background:var(--gold-a13);border:1px solid var(--line-2)
}
.thanks-mark.spin{animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.thanks-note{font-size:var(--fs-md);color:var(--muted-2)}
.thanks-actions{margin-top:28px}
.thanks-actions .primary{display:inline-flex;text-decoration:none;padding:14px 24px;border-radius:var(--r)}
/* Tichý textový odkaz. .legal-back a měl stejné pravidlo. */
.ghost-link,.legal-back a{color:var(--muted);font-size:var(--fs-md);text-decoration:none;
  transition:color var(--t) linear}
.ghost-link:hover,.legal-back a:hover{color:var(--text)}

/* Odkaz v hlavičce (Ceník) musí vypadat jako sousední tlačítka. */
a.linkbtn{text-decoration:none;display:inline-flex;align-items:center}

@media(max-width:640px){
  .legal-more{grid-template-columns:1fr}
}