/* ==========================================================================
   naučit.video · design systém
   Vizuální směr Měkký. Tokeny drží brands/naucit-video/vizual.md.
   Mobile-first od 375px, breakpointy přes min-width.
   ========================================================================== */

:root{
  /* barvy */
  --bg:#F4F6F1;
  --bg-alt:#E9EEE4;
  --surface:#FFFFFF;
  --text:#1C211C;
  --muted:#6E756C;
  --faint:#A0A79E;
  --border:#D7DECF;
  --accent:#0F766E;
  --accent-dark:#0B5A54;
  --on-accent:#FFFFFF;

  /* typografie */
  --font:'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
  --track:-0.035em;

  /* tvar */
  --r:18px;
  --r-sm:10px;
  --sh:0 2px 4px rgba(28,33,28,.04),0 14px 34px rgba(28,33,28,.07);
  --sh-sm:0 1px 2px rgba(28,33,28,.05),0 6px 16px rgba(28,33,28,.05);

  /* rám · stejná šířka jako martynkova.cz, ať weby nepůsobí různě velké */
  --rám:1200px;
  --okraj:clamp(18px,5vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-weight:400;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}

/* ---------- rám ---------- */
.wrap{width:100%;max-width:var(--rám);margin:0 auto;padding:0 var(--okraj)}
section{padding:56px 0}
.sekce-alt{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ---------- typografie ---------- */
h1,h2,h3{font-weight:700;letter-spacing:var(--track);line-height:1.1;margin:0 0 16px}
h1{font-size:38px}
h2{font-size:28px}
h3{font-size:20px;line-height:1.25}
p{margin:0 0 16px}
.lede{font-size:17px;color:var(--muted);max-width:78ch}
.muted{color:var(--muted)}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
         color:var(--accent-dark);margin:0 0 14px}
a{color:var(--accent-dark)}

/* ---------- navigace ---------- */
.nav{padding:22px 0;border-bottom:1px solid var(--border);background:var(--bg)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-weight:700;font-size:19px;letter-spacing:var(--track);color:var(--text);text-decoration:none}
.logo i{color:var(--accent-dark);font-style:normal}
.nav-odkazy{display:flex;gap:18px;font-size:15px}
.nav-odkazy a{color:var(--muted);text-decoration:none}
.nav-odkazy a:hover,.nav-odkazy a[aria-current]{color:var(--accent-dark)}

/* ---------- tlačítka ---------- */
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);text-decoration:none;
     font-weight:700;font-size:16px;padding:16px 30px;border-radius:var(--r-sm);
     border:none;cursor:pointer;transition:background .18s,transform .18s;text-align:center}
.btn:hover{background:var(--accent-dark);transform:translateY(-1px)}
.btn-blok{display:block;width:100%}
.btn-druhy{background:transparent;color:var(--accent-dark);border:1px solid var(--border)}
.btn-druhy:hover{background:var(--bg-alt);color:var(--accent-dark)}
.pod-tlacitkem{font-size:13px;color:var(--faint);margin-top:12px}

/* ---------- karty ---------- */
.karta{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
       padding:26px 22px;box-shadow:var(--sh-sm)}
.karta-zvyraznena{box-shadow:var(--sh)}

/* ---------- mřížky ---------- */
.mrizka{display:flex;flex-direction:column;gap:18px}

/* ---------- statistiky ---------- */
.statistiky{display:flex;flex-direction:column;gap:20px;margin-top:40px;
            padding-top:30px;border-top:1px solid var(--border)}
.stat .cislo{font-size:30px;font-weight:700;line-height:1;color:var(--accent-dark);letter-spacing:var(--track)}
.stat .popis{font-size:13px;color:var(--muted)}

/* ---------- seznamy ---------- */
.odrazky{list-style:none;padding:0;margin:0}
.karta .odrazky{margin-top:4px}
.odrazky li{position:relative;padding-left:24px;margin-bottom:4px;color:var(--muted);
             line-height:1.5}
.odrazky li:last-child{margin-bottom:0}
.odrazky li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
                    border-radius:50%;background:var(--accent)}
.odrazky.tmava li{color:var(--text)}

/* ---------- modul ---------- */
.modul{display:flex;flex-direction:column;gap:4px}
.modul .poradi{font-size:13px;font-weight:700;color:var(--faint);letter-spacing:.1em}

/* ---------- cena ---------- */
.cenovka{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
         padding:30px 24px;box-shadow:var(--sh)}
.cenovka .castka{font-size:44px;font-weight:700;line-height:1;letter-spacing:var(--track);
                 color:var(--accent-dark);margin:6px 0 4px}
.cenovka .puvodni{font-size:14px;color:var(--faint)}

/* ---------- autorka ---------- */
.autorka{display:flex;flex-direction:column;gap:22px}
.portret{width:112px;height:112px;border-radius:var(--r);object-fit:cover;background:var(--border);
         display:flex;align-items:center;justify-content:center;color:var(--faint);
         font-size:11px;letter-spacing:.1em;text-transform:uppercase;flex:none}

/* ---------- patička ---------- */
.pata{border-top:1px solid var(--border);padding:34px 0 56px;color:var(--faint);font-size:14px}
.pata a{color:var(--muted);text-decoration:none}
.pata a:hover{color:var(--accent-dark)}
.pata-radky{display:flex;flex-direction:column;gap:8px}

/* ---------- pomocné ---------- */
.mimo{font-size:12px;color:var(--faint)}
.stred{text-align:center}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width:720px){
  section{padding:80px 0}
  h1{font-size:60px}
  h2{font-size:36px}
  h3{font-size:22px}
  .lede{font-size:18px}
  .btn-blok{display:inline-block;width:auto}
  .karta{padding:32px 30px}
  .cenovka{padding:40px 36px}
  .cenovka .castka{font-size:56px}
  .mrizka{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .mrizka-3{grid-template-columns:repeat(3,1fr)}
  .statistiky{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .autorka{flex-direction:row;gap:34px;align-items:flex-start}
  .portret{width:150px;height:150px}
  .pata-radky{flex-direction:row;justify-content:space-between;align-items:center}
}

/* ==========================================================================
   Komponenty převzaté z původní prodejní stránky
   Telefon a YouTube jsou simulace cizích rozhraní. Používají barvy toho
   rozhraní (černá plocha, červená tečka nahrávání), ne paletu značky.
   Je to citace, ne druhý akcent. Viz brands/naucit-video/vizual.md.
   ========================================================================== */

/* ---------- telefon na šířku ---------- */
.telefon-blok{width:100%;margin:36px 0}
.telefon{width:min(600px,100%);aspect-ratio:19/9;margin:0 auto;background:#14171A;
         border-radius:30px;padding:9px;position:relative;
         box-shadow:0 18px 44px rgba(28,33,28,.18),0 0 0 1.5px rgba(15,118,110,.25)}
.telefon-obrazovka{width:100%;height:100%;border-radius:22px;overflow:hidden;
                   background:linear-gradient(130deg,#2A3330,#1B2220);position:relative}
.telefon-tlacitko{position:absolute;top:50%;left:12px;transform:translateY(-50%);
                  width:20px;height:88px;background:#14171A;border-radius:11px;z-index:6}
.mrizka-kompozice{position:absolute;inset:22px 48px 22px 56px;pointer-events:none}
.mrizka-kompozice::before,.mrizka-kompozice::after{content:"";position:absolute}
.mrizka-kompozice::before{left:33.3%;right:33.3%;top:0;bottom:0;
  border-left:1px solid rgba(244,246,241,.16);border-right:1px solid rgba(244,246,241,.16)}
.mrizka-kompozice::after{top:33.3%;bottom:33.3%;left:0;right:0;
  border-top:1px solid rgba(244,246,241,.16);border-bottom:1px solid rgba(244,246,241,.16)}
.postava{position:absolute;left:47%;top:54%;transform:translate(-50%,-50%);
         width:104px;height:124px;border-radius:52px 52px 13px 13px;
         background:linear-gradient(180deg,rgba(15,118,110,.42),rgba(15,118,110,.12));
         border:1px dashed rgba(244,246,241,.45)}
.postava::before{content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);
                 width:40px;height:40px;border-radius:50%;background:rgba(244,246,241,.24)}
.rec{position:absolute;top:15px;left:46px;display:flex;align-items:center;gap:7px;
     background:rgba(0,0,0,.42);padding:5px 10px;border-radius:18px;
     font-weight:700;font-size:11px;letter-spacing:.04em;color:#F4F6F1}
.rec-tecka{width:8px;height:8px;border-radius:50%;background:#E5484D;animation:blikani 1.4s infinite}
@keyframes blikani{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.rec-tecka{animation:none}}
.cam-badge{position:absolute;top:15px;right:46px;background:rgba(0,0,0,.42);
           padding:5px 9px;border-radius:8px;font-weight:700;font-size:10px;
           letter-spacing:.05em;color:#F4F6F1}
.spoust{position:absolute;right:24px;top:50%;transform:translateY(-50%);
        width:46px;height:46px;border-radius:50%;border:3.5px solid #F4F6F1;background:#E5484D}
.telefon-popisek{text-align:center;margin-top:16px;font-size:13px;color:var(--faint);
                 font-weight:600;letter-spacing:.04em}

/* ---------- YouTube kanál ---------- */
.yt{background:#0f0f0f;border-radius:14px;overflow:hidden;border:1px solid #2A3136;
    box-shadow:var(--sh);max-width:460px}
.yt-banner{height:64px;background:linear-gradient(130deg,var(--accent),#14A89C,#7FCFC6)}
.yt-hlava{display:flex;align-items:flex-end;gap:12px;padding:0 16px 12px}
.yt-avatar{width:50px;height:50px;border-radius:50%;flex:none;margin-top:-25px;z-index:2;
           background:linear-gradient(135deg,var(--accent),#14A89C);border:3px solid #0f0f0f}
.yt-info{flex:1;padding-top:6px}
.yt-jmeno{height:9px;border-radius:5px;background:rgba(255,255,255,.8);width:108px;margin-bottom:5px}
.yt-odbery{height:7px;border-radius:4px;background:rgba(255,255,255,.3);width:62px}
.yt-btn{background:#fff;color:#0f0f0f;font-weight:800;font-size:10px;letter-spacing:.05em;
        text-transform:uppercase;padding:8px 14px;border-radius:20px;flex:none;margin-bottom:2px}
.yt-videa{display:flex;flex-direction:column;gap:10px;padding:10px 14px 14px}
.yt-video{border-radius:8px;overflow:hidden;position:relative}
.yt-nahled{aspect-ratio:16/9;position:relative;
           background:linear-gradient(135deg,rgba(15,118,110,.3),rgba(20,23,26,.75))}
.yt-video.nove .yt-nahled{background:linear-gradient(135deg,rgba(15,118,110,.6),rgba(127,207,198,.3))}
.yt-delka{position:absolute;bottom:5px;right:6px;background:rgba(0,0,0,.85);color:#fff;
          font-weight:700;font-size:9px;padding:2px 5px;border-radius:4px}
.yt-nove{position:absolute;top:5px;left:6px;background:#E5484D;color:#fff;font-weight:800;
         font-size:8px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px}
.yt-popis{padding:6px 2px 0;display:flex;gap:7px}
.yt-popis-av{width:22px;height:22px;border-radius:50%;background:var(--accent);opacity:.5;flex:none}
.yt-popis-info{flex:1}
.yt-popis-titulek{height:7px;border-radius:4px;background:rgba(255,255,255,.55);margin-bottom:4px;width:88%}
.yt-popis-sub{height:6px;border-radius:4px;background:rgba(255,255,255,.22);width:55%}
.yt-zhlednuti{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:9px;
              color:rgba(255,255,255,.45);font-weight:500}
.yt-pocet{color:rgba(255,255,255,.85);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- lektorka ---------- */
.lektorka{display:flex;flex-direction:column;gap:22px}
.lektorka-foto{width:120px;height:120px;border-radius:var(--r);object-fit:cover;flex:none}
.lektorka-dovetek{margin-top:32px;max-width:78ch;color:var(--muted)}
.statistiky-4{display:flex;flex-direction:column;gap:20px}

/* ---------- otázky ---------- */
.otazka{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
        border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--sh-sm)}
.otazka p{margin:0;color:var(--text);font-weight:600}
.otaznik{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);
         font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;font-size:15px}

/* ---------- reference ---------- */
.reference{margin:0;background:var(--surface);border:1px solid var(--border);
           border-radius:var(--r);padding:24px 22px;box-shadow:var(--sh-sm)}
.reference p{color:var(--text)}
.hvezdy{color:var(--accent);letter-spacing:.14em;font-size:15px;margin-bottom:12px}
.reference footer{display:flex;align-items:center;gap:12px;margin-top:18px;
                  padding-top:16px;border-top:1px solid var(--border);font-size:14px;color:var(--muted)}
.inicialy{width:38px;height:38px;border-radius:50%;background:var(--bg-alt);color:var(--accent-dark);
          font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;font-size:13px}

/* ---------- obrázky v obsahu ---------- */
.obrazek{width:100%;border-radius:var(--r);box-shadow:var(--sh);margin:28px 0}
.obrazek-uzky{max-width:340px;margin:28px auto}
.dvojice{display:flex;flex-direction:column;gap:26px;align-items:center}
.badge-garance{width:120px;height:auto;flex:none}

@media (min-width:720px){
  .telefon-blok{margin:48px 0}
  .lektorka{flex-direction:row;gap:34px;align-items:flex-start}
  .lektorka-foto{width:170px;height:170px}
  .statistiky-4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
  .dvojice{flex-direction:row;gap:40px;align-items:center}
  .dvojice > *{flex:1}
  .yt{max-width:100%}
}

/* ---------- <picture> se chová jako obrázek ----------
   Obrázky mají WebP verzi a původní formát jako zálohu, takže jsou zabalené
   v <picture>. Třída sedí na obalu, rozměry proto musí projít na <img> uvnitř. */
picture{display:block}
picture img{display:block;width:100%;height:auto}
.lektorka-foto{width:120px;height:120px;border-radius:var(--r);overflow:hidden;flex:none}
.lektorka-foto img{width:100%;height:100%;object-fit:cover}
.badge-garance{width:120px;flex:none}
.badge-garance img{width:100%}

@media (min-width:720px){
  .lektorka-foto{width:170px;height:170px}
}

/* ==========================================================================
   Prodejní video v rámu telefonu
   Rám je 16:9, aby video sedělo bez ořezu. Dokud video není nahrané,
   je pod ním vidět původní mockup, takže stránka nikdy nezeje prázdnotou.
   ========================================================================== */
.telefon{aspect-ratio:16/9}
.telefon-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
               border-radius:22px;background:transparent;z-index:1}
.telefon-blok[data-video] .telefon-obrazovka{cursor:pointer}

/* HUD leží nad videem */
.telefon-blok .rec,
.telefon-blok .cam-badge,
.telefon-blok .spoust,
.telefon-blok .postava,
.telefon-blok .mrizka-kompozice{z-index:3}
.telefon-blok .spoust{cursor:pointer;transition:transform .18s,box-shadow .18s}
.telefon-blok[data-video] .spoust::after{content:"";position:absolute;top:50%;left:calc(50% + 2px);
  transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #F4F6F1}
.telefon-blok[data-video] .spoust:hover{transform:translateY(-50%) scale(1.06);
  box-shadow:0 0 0 6px rgba(229,72,77,.25)}

/* Během přehrávání HUD zmizí, ať nepřekáží ovládání */
.telefon-blok.hraje .rec,
.telefon-blok.hraje .cam-badge,
.telefon-blok.hraje .spoust,
.telefon-blok.hraje .mrizka-kompozice,
.telefon-blok.hraje .postava{opacity:0;pointer-events:none;transition:opacity .25s}
.telefon-blok.hraje .telefon-video{z-index:4}

/* Karta na celou šířku mřížky */
@media (min-width:720px){
  .karta-siroka{grid-column:1 / -1}
  .karta-siroka .modul-obsah{display:grid;grid-template-columns:1fr 460px;gap:40px;align-items:start}
}

/* ==========================================================================
   Příběhy klientů
   Vlevo seznam, který slouží jako navigace, vpravo karty pod sebou.
   Aktivní položka se mění podle toho, která karta je zrovna vidět.
   ========================================================================== */
.pribehy{display:flex;flex-direction:column;gap:24px;margin-top:30px}

.pribehy-seznam{display:flex;flex-direction:row;gap:8px;overflow-x:auto;
                padding-bottom:6px;-webkit-overflow-scrolling:touch}
.pribehy-seznam a{flex:none;font-size:14px;line-height:1.35;color:var(--muted);
                  text-decoration:none;padding:10px 14px;border:1px solid var(--border);
                  border-radius:99px;background:var(--surface);white-space:nowrap;transition:.18s}
.pribehy-seznam a.aktivni{color:var(--accent-dark);border-color:var(--accent);font-weight:700}

.pribehy-karty{display:flex;flex-direction:column;gap:20px;background:var(--bg)}
.pribeh{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
        box-shadow:var(--sh-sm);overflow:hidden;display:flex;flex-direction:column;
        scroll-margin-top:24px;transition:box-shadow .25s}
.pribeh.vidim{box-shadow:var(--sh)}
.pribeh-text{padding:26px 22px}
.pribeh-cara{display:block;width:26px;height:2px;background:var(--accent);margin-bottom:16px}
.pribeh-text h3{margin-bottom:12px}
.pribeh-text p{color:var(--muted)}
.pribeh-kdo{display:flex;align-items:center;gap:12px;margin:18px 0 0;
            padding-top:16px;border-top:1px solid var(--border);font-size:14px}
.pribeh-media{aspect-ratio:16/10;background:var(--bg-alt);position:relative;
              display:flex;align-items:center;justify-content:center}
.pribeh-media img,.pribeh-media video{width:100%;height:100%;object-fit:cover;display:block}

@media (min-width:900px){
  .pribehy{flex-direction:row;gap:44px;align-items:flex-start}
  .pribehy-seznam{flex-direction:column;width:260px;flex:none;gap:0;overflow:visible;
                  border-left:2px solid var(--border);position:sticky;top:28px}
  .pribehy-seznam a{border:none;background:transparent;border-radius:0;white-space:normal;
                    padding:14px 0 14px 20px;margin-left:-2px;border-left:2px solid transparent}
  .pribehy-seznam a:hover{color:var(--accent-dark)}
  .pribehy-seznam a.aktivni{border-left-color:var(--accent)}
  .pribehy-karty{flex:1;gap:26px;padding-bottom:8vh}
  .pribeh{flex-direction:row;align-items:stretch;position:sticky}
  /* Každá další karta se zastaví o kousek níž, takže se skládají na sebe
     a předchozí zůstává vykouknutá horní hranou. */
  .pribeh:nth-child(1){top:70px}
  .pribeh:nth-child(2){top:88px}
  .pribeh:nth-child(3){top:106px}
  .pribeh:nth-child(4){top:124px}
  .pribeh:nth-child(5){top:142px}
  .pribeh-text{flex:1;padding:34px 30px;display:flex;flex-direction:column}
  .pribeh-kdo{margin-top:auto}
  .pribeh-media{width:44%;flex:none;aspect-ratio:auto}
}

/* ==========================================================================
   Cesta vzhůru
   Šest dovedností jako zastávky na trase k vrcholu. Trasa se nakreslí,
   až se sekce dostane do zorného pole, jinak by animace proběhla naslepo.
   ========================================================================== */
.vystup{display:flex;flex-direction:column;gap:34px}
.vystup-text{flex:1}

.kroky{list-style:none;padding:0;margin:26px 0 0;counter-reset:krok}
.kroky li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;line-height:1.45;
          border-bottom:1px solid var(--border);color:var(--text);opacity:.45;
          transition:opacity .5s ease}
.kroky li:last-child{border-bottom:none}
.krok-cislo{width:26px;height:26px;border-radius:50%;background:var(--bg-alt);
            color:var(--accent-dark);font-weight:700;font-size:13px;flex:none;
            display:flex;align-items:center;justify-content:center;transition:.4s}
.hora-bezi .kroky li{opacity:1}
.hora-bezi .kroky li .krok-cislo{background:var(--accent);color:var(--on-accent)}
.hora-bezi .kroky li:nth-child(1){transition-delay:.15s}
.hora-bezi .kroky li:nth-child(2){transition-delay:.4s}
.hora-bezi .kroky li:nth-child(3){transition-delay:.65s}
.hora-bezi .kroky li:nth-child(4){transition-delay:.9s}
.hora-bezi .kroky li:nth-child(5){transition-delay:1.15s}
.hora-bezi .kroky li:nth-child(6){transition-delay:1.4s}
.hora-bezi .krok-cislo{transition-delay:inherit}

.hora{margin:0;flex:1}
.hora svg{width:100%;height:auto;display:block;overflow:visible}
.hora-mlha{fill:var(--border);opacity:.45}
.hora-telo{fill:#B9C6BC}
.hora-snih{fill:#EDF2EC}

.trasa-pozadi{fill:none;stroke:var(--muted);stroke-width:2;opacity:.35;
              stroke-dasharray:1 7;stroke-linecap:round}
.trasa-postup{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;
              stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.hora-bezi .trasa-postup{transition:stroke-dashoffset 1.8s ease-out;stroke-dashoffset:0}

.bod{fill:var(--surface);stroke:var(--accent);stroke-width:2.5;opacity:0;
     transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.hora-bezi .bod{opacity:1;transform:scale(1);
                transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1);
                transition-delay:calc(.15s + var(--i) * .25s)}
.bod.vrchol{fill:var(--accent);stroke:var(--surface);stroke-width:3}

.stitek{fill:var(--bg-alt);stroke:var(--border);stroke-width:1;opacity:0}
.stitek-vrchol{fill:var(--accent);stroke:none}
.stitek-text{font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.1em;
             fill:var(--muted);text-anchor:middle;opacity:0}
.stitek-text-vrchol{fill:var(--on-accent)}
.hora-bezi .stitek,.hora-bezi .stitek-text{opacity:1;transition:opacity .4s ease .3s}
.hora-bezi .stitek-vrchol,.hora-bezi .stitek-text-vrchol{transition-delay:1.5s}

@media (prefers-reduced-motion:reduce){
  .kroky li,.trasa-postup,.bod,.stitek,.stitek-text{opacity:1;transform:none;transition:none}
  .trasa-postup{stroke-dashoffset:0}
  .kroky li .krok-cislo{background:var(--accent);color:var(--on-accent)}
}

@media (min-width:900px){
  .vystup{flex-direction:row;gap:56px;align-items:center}
  .vystup-text{flex:1.1}
  .hora{flex:1}
}

/* Zlom před sekcí s příběhy, ať je vidět, že začíná nová část stránky. */
.sekce-zlom{border-top:1px solid var(--border)}
.sekce-zlom > .wrap > h2:first-child,
.sekce-zlom .pribehy-nadpis{margin-top:0}

/* ==========================================================================
   Souhlas s měřením
   Sedí dole, nepřekrývá obsah přes celou plochu a nemá tmavou clonu.
   Cílovka téhle značky se bojí, že něco pokazí, takže lišta nesmí působit
   jako past. Obě tlačítka jsou stejně dostupná, odmítnutí není schované.
   ========================================================================== */
.souhlas{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px;
         transform:translateY(110%);transition:transform .26s ease-out}
.souhlas.vidim{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.souhlas{transition:none}}

.souhlas-ram{max-width:var(--rám);margin:0 auto;background:var(--surface);
             border:1px solid var(--border);border-radius:var(--r);
             box-shadow:var(--sh);padding:20px}
.souhlas-text h2{font-size:19px;margin:0 0 8px}
.souhlas-text p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.souhlas-text a{color:var(--accent-dark)}

.souhlas-volby{display:flex;flex-direction:column;gap:12px;margin-top:16px;
               padding-top:16px;border-top:1px solid var(--border)}
.souhlas-volba{display:flex;gap:11px;align-items:flex-start;font-size:14px;
               line-height:1.5;cursor:pointer}
.souhlas-volba input{margin-top:3px;flex:none;width:17px;height:17px;
                     accent-color:var(--accent);cursor:pointer}
.souhlas-volba .mimo{font-size:13px}

.souhlas-tlacitka{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.souhlas-tlacitka .btn{width:100%}
.souhlas-odkaz{background:none;border:none;padding:6px;font:inherit;font-size:14px;
               color:var(--muted);text-decoration:underline;cursor:pointer}
.souhlas-odkaz:hover{color:var(--accent-dark)}

@media (min-width:760px){
  .souhlas{padding:16px}
  .souhlas-ram{display:grid;grid-template-columns:1fr auto;gap:24px;
               align-items:center;padding:22px 26px}
  .souhlas-volby{grid-column:1 / -1;flex-direction:row;gap:30px}
  .souhlas-volba{max-width:340px}
  .souhlas-tlacitka{flex-direction:row;align-items:center;margin-top:0}
  .souhlas-tlacitka .btn{width:auto;white-space:nowrap}
  /* Nastavení patří vlevo od tlačítek, ať se hlavní volba drží u kraje. */
  .souhlas-odkaz{order:-1}
}