/* ============================================================
   ANTIVIRAL — sections.css
   Sekce landingu a podstránek. Bez syrových hexů.
   ============================================================ */

/* ============================================================
   HERO — struktura přenesená z v5, přeskinovaná na nové tokeny.
   Choreografie běží na .hero-ready (viz konec souboru).
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  height:100vh;height:100svh;min-height:600px;
  background:var(--field-light);
}
.hero-strip{
  position:absolute;top:0;left:0;z-index:1;
  width:calc(5vw + 241px);height:100%;
  background:var(--field-light);
}
.hero-panel{
  position:absolute;top:0;left:calc(5vw + 241px);right:0;height:100%;
  z-index:0;overflow:hidden;background:var(--ph-bg);
  isolation:isolate;contain:paint;
}
/* ---- Vrstvy hera ----------------------------------------------------------
   Tři obrázky na sobě. Každá vrstva je o --hp-room vyšší než panel a o tolik
   vysunutá nahoru, takže má nahoře i dole rezervu, do které se může posunout,
   aniž odkryje okraj. Rezerva stojí zoom (fotka je 1,79:1 a do panelu jde
   přes cover), proto je držená nízko — 70 px stačí na čitelný parallax.
   --hp jede z JS a je společné; --hp-k říká, kolikrát a kterým směrem se ho
   která rovina chytne. Kladné = pomalejší než scroll = dál.

   Proč má subjekt tak malý odstup od pozadí: rodina i pokoj za nimi jsou
   změřeně stejně měkké (2,0–2,7), protože jsou ve scéně zhruba stejně daleko.
   Prostřední rovina nemá ostrostní oporu, a kdyby se rozjela víc, četla by se
   jako nálepka klouzající po tapetě. Nosný předěl je popředí proti zbytku —
   lahev má ostrost 9,1, tam odstup unese cokoli.

   --hp-travel je dráha, kterou JS rozdá vrstvám. Každá vrstva se posune
   travel × svůj koeficient a to se musí vejít do --hp-room, jinak vyjede
   z rezervy a odkryje okraj panelu. Nejvíc jede pozadí (1,0), takže
   travel × 1,0 < room je ta podmínka, kterou hlídat. */
.hero-panel{--hp-room:130px;--hp-travel:117px;}
.hero-layers{position:absolute;inset:0;z-index:0;}
.hero-layer{
  position:absolute;left:0;width:100%;
  top:calc(-1 * var(--hp-room));
  height:calc(100% + 2 * var(--hp-room));
  object-fit:cover;object-position:var(--hp-x,80%) center;
  transform:translate3d(0,calc(var(--hp,0px) * var(--hp-k,0)),0);
}
/* Rozestupy koeficientů, ne jejich absolutní hodnoty, dělají hloubku.
   Dřív byly 1,0 / 0,58 / −0,72, tedy mezera 0,42 k rodině a 1,30 ke stolu —
   rodina se lepila na pozadí a stůl ujížděl všem. Teď jsou mezery 0,66 a 0,86,
   takže roviny stojí po sobě rovnoměrně. */
.hero-layer-bg{--hp-k:1;}
.hero-layer-subject{--hp-k:.34;}
.hero-layer-front{--hp-k:-.52;}

/* Závoj pod hlavičkou — drží bílé odkazy nad fotkou čitelné. Sedí až nad
   vrstvami (ty mají z-index 0), ale uvnitř panelu, takže se nedotkne nadpisu
   v .hero-content. Jen na desktopu: na mobilu je nahoře mléčný přechod
   z .hero-panel::after a hamburger zůstává grafitový. */
@media (min-width:1025px){
  .hero-scrim{
    position:absolute;top:0;left:0;right:0;height:130px;z-index:4;
    pointer-events:none;
    /* Druhá zastávka sedí na 44 px, což je spodní hrana odkazů — do té výšky
       drží závoj sílu a teprve pod ní mizí. Rozprostřít ho rovnoměrně by
       znamenalo buď slabý pás pod textem, nebo zbytečně tmavou fotku. */
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--c-graphite) 52%, transparent) 0%,
      color-mix(in srgb, var(--c-graphite) 40%, transparent) 34%,
      transparent 100%);
    /* Vlevo musí nabíhat po stejné dráze, po jaké se do pole rozpouští fotka
       (viz .hero-panel::before). Závoj leží nad tím gradientem, takže bez
       masky by na hraně panelu udělal svislou čáru. */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 clamp(90px,13vw,210px));
    mask-image:linear-gradient(90deg,transparent 0,#000 clamp(90px,13vw,210px));
  }
}
/* Levý okraj fotky rozpustit do pole. Tady na tom záleží víc než dřív: okraj
   panelu vychází při našem ořezu na #cec9c6 proti mléčné #FAF8F5, takže bez
   gradientu by šev byl vidět jako čára. A ořez nesmí ujet doleva — stěna na
   levém kraji fotky má #989993 a pod ~28 % object-position se začne vtahovat
   do záběru, na to už tenhle gradient stačit nebude. */
.hero-panel::before{
  content:"";position:absolute;top:0;bottom:0;left:0;z-index:3;
  width:clamp(90px,13vw,210px);pointer-events:none;
  background:linear-gradient(90deg,
    var(--field-light) 0%,
    color-mix(in srgb, var(--field-light) 58%, transparent) 42%,
    transparent 100%);
}

.hero-content{
  position:absolute;top:0;left:0;z-index:2;
  width:55%;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding-inline:var(--page-pad);
  padding-left:max(var(--page-pad),calc((100vw - var(--page-max))/2 + var(--page-pad)));
}
.hero-eyebrow{
  display:block;margin-bottom:22px;
  font:500 clamp(9.5px,1.45vw,12px)/1 var(--f-mono);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-accent);
}
.hero h1{font-size:clamp(38px,4.8vw,76px);line-height:1.02;letter-spacing:-.03em;}
/* Nadpis smí přetéct přes hranici fotky — je to záměr, ne chyba.
   width:max-content je nutná: clip-path z reveal animace jinak seká
   text na šířku bloku, ne na šířku textu. */
.hero h1 .hrv{display:block;white-space:nowrap;width:max-content;}
/* Červená tečka místo červeného slova — brandová značka, ne šablonový tik */
.hero h1 i{font-style:normal;color:var(--accent);}
/* Věta se smí zalomit na dva řádky — „plísně — Aspergillus brasiliensis (liquid)“
   se na jeden nevejde. min-height drží místo pro dva řádky, aby layout
   nepodskakoval mezi krátkou a dlouhou frází. */
.hero-lead{
  font-size:clamp(18px,1.8vw,24px);color:var(--text-secondary);
  margin-top:24px;font-weight:500;max-width:none;
  line-height:1.35;min-height:2.7em;text-wrap:pretty;
}
.hero-rot,.hero-rot-phrase{display:inline;}
/* Kategorie = doložený nárok z protokolu, příklad = ilustrace uvnitř ní.
   Rozdíl barvy a váhy nese ten významový rozdíl.
   Obě části jsou inline-block, aby na ně šel transform a aby se řádek
   případně zalomil právě mezi nimi — tedy před pomlčkou. */
.hero-rot-cat,.hero-rot-ex{
  display:inline-block;
  transition:opacity .22s ease,transform .22s ease;
}
.hero-rot-cat{color:var(--text-accent);font-weight:600;}
.hero-rot-ex{color:var(--text-secondary);font-weight:500;margin-left:.28em;}
.hero-rot-ex::before{content:"— ";}
.hero-rot-phrase.is-out .hero-rot-cat,
.hero-rot-phrase.is-out .hero-rot-ex{opacity:0;transform:translateY(4px);}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.hero-cta-m{display:none;}
/* CTA „Poptávka pro firmy" nese značkovou červenou i v heru — i na
   fotce ať je vidět, že vede jinam než primární CTA. Na hover přechází
   do stejné jemné wash červené, kterou má --accent-wash jinde na webu. */
.hero-cta .btn-ghost,
.hero-cta-m .btn-ghost{border-color:var(--accent);}
.hero-cta .btn-ghost:hover,
.hero-cta-m .btn-ghost:hover{background:var(--accent-wash);border-color:var(--accent);}

@media (max-width:1200px){
  .hero{height:88vh;height:88svh;min-height:600px;}
}
@media (max-width:1024px){
  .hero{height:74vh;height:74svh;min-height:600px;max-height:880px;}
  .hero-strip{display:none;}
  .hero-panel{inset:0;left:0;width:100%;}
  .hero-panel::before{display:none;}   /* na mobilu není co rozpouštět */
  /* Ořez zůstává posunutý i na tabletu — panel je pořád užší než na desktopu
     a výchozích 80 % by odřízlo dítě. Dráha a rovina parallaxu se ale od
     1024 px dolů nepřepisují: tablet dědí desktopní --hp-room/--hp-travel
     a svislý transform beze změny, takže tam parallax jede stejně jako na
     desktopu. Zúžení na skutečný mobil řeší blok níž (max-width:680px). */
  .hero-layer{--hp-x:70%;}
  /* Čitelnost textu nad fotkou */
  .hero-panel::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--c-milk) 92%,transparent) 0%,
      color-mix(in srgb,var(--c-milk) 74%,transparent) 34%,
      transparent 62%);
  }
  .hero-content{
    position:absolute;top:0;left:0;right:0;width:100%;height:auto;z-index:3;
    padding-top:clamp(96px,14vh,132px);padding-left:var(--page-pad);padding-right:var(--page-pad);
  }
  .hero h1{font-size:clamp(33px,4.9vw,49px);}
  .hero-lead{font-size:clamp(15px,1.9vw,18px);}
  .hero-content .hero-cta{display:none;}
  .hero-cta-m{
    display:flex;position:absolute;z-index:4;gap:10px;
    left:var(--page-pad);bottom:clamp(20px,3.4vh,40px);
  }
  .hero-cta-m .btn{padding:12px 22px;font-size:14px;}
  /* Průhledné tlačítko na fotce mizí, ať padne na dlažbu nebo do stínu.
     Tmavá poloprůhledná podložka + bílý text drží čitelnost bez ohledu
     na to, co je zrovna pod ním. */
  .hero-cta-m .btn-ghost{
    background:color-mix(in srgb, var(--c-graphite) 55%, transparent);
    border-color:rgba(250,248,245,.75);
    color:var(--text-on-dark);
    -webkit-backdrop-filter:blur(var(--glass-blur));
    backdrop-filter:blur(var(--glass-blur));
  }
  .hero-cta-m .btn-ghost:hover{background:color-mix(in srgb, var(--c-graphite) 68%, transparent);}
}
@media (max-width:680px){
  /* 73 svh, ne 78: cover zoomuje podle výšky panelu, takže každé procento
     výšky ubírá z viditelné šířky fotky. Na 78 svh vyjde okno na 33,1 %,
     ale dítě s lahví potřebují 34,6 %. Na 71 svh je to 36,3 %, což nechá
     pár pixelů i na 360px displeji, kde to jinak sedí přesně na doraz. */
  .hero{height:71vh;height:71svh;min-height:560px;}
  /* Skutečný mobil, ne tablet: panel je tu na výšku, cover zoomuje podle
     výšky a do okna se vejde jen kolem třetiny šířky fotky — dráha navíc
     by odkryla okraj. Fotka proto zůstává statická (viz --hp-room/--hp-travel
     výš, kde tablet dědí desktopní hodnoty beze změny). */
  .hero-panel{--hp-room:0px;--hp-travel:0px;}
  /* Na úzkém displeji se nejdelší fráze rozpadne na tři řádky */
  .hero-lead{min-height:4.05em;}
  .hero h1{font-size:clamp(28px,7.6vw,38px);}
  .hero h1 .hrv{white-space:normal;}
  .hero-cta-m{left:var(--page-pad);right:var(--page-pad);}
  .hero-cta-m .btn{flex:1 1 0;min-width:0;justify-content:center;padding:13px 8px;font-size:13px;}
}

/* ============================================================
   ŠTÍTKOVÝ PÁS — přepis červeného pruhu z obalu.
   Nese normy a původ; samostatná trust lišta zrušena (byla duplicita).
   ============================================================ */
.band-track{justify-content:center;}

/* Na mobilu se celý pás normativ na jeden řádek nevejde a centrovaný
   nowrap text se prostě uřízne po obou stranách. Místo statického ořezu
   klon jede pomalu doleva jako smyčka — druhá kopie navazuje přesně tam,
   kde první končí, takže je vidět postupně všechno. */
@media (max-width:760px){
  .band-track{justify-content:flex-start;}
  .band-viewport{display:flex;width:max-content;}
  .band-track--clone{display:flex;}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .band-viewport{animation:band-scroll 30s linear infinite;}
}
@keyframes band-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ============================================================
   HERO choreografie — CSS-driven, spouští ji .hero-ready
   ============================================================ */
.nav{transform:translateY(-100%);}
html.no-js .nav,
html.hero-ready .nav{transform:translateY(0);}

@media (prefers-reduced-motion: no-preference){
  html.js .nav{transition:transform 900ms var(--ease) 200ms;}

  html.js .hero{transform:translateY(40px);transition:transform 3000ms var(--ease);will-change:transform;}
  html.js.hero-ready .hero{transform:none;}

  /* Nájezd jede na obalu, parallax na vrstvách uvnitř. Dva různé elementy,
     takže si transform nepřepisují a nájezd může doběhnout i během scrollu. */
  html.js .hero-layers{transform:translateY(100%);transition:transform 2200ms var(--ease);will-change:transform;}
  html.js.hero-ready .hero-layers{transform:none;}
  html.js .hero-layer{will-change:transform;}

  html.js .hrv{
    transform:translateY(45px);clip-path:inset(0 0 105% 0);
    will-change:transform,clip-path;
    transition-property:transform,clip-path;
    transition-duration:var(--hdur,700ms);
    transition-timing-function:var(--ease);
    transition-delay:var(--hd,0ms);
  }
  html.js.hero-ready .hrv{transform:none;clip-path:inset(0 0 0 0);}
  .hrv.anim-done{clip-path:none;will-change:auto;}
}

@media (max-width:1024px) and (prefers-reduced-motion: no-preference){
  html.js .hrv{transform:translateY(22px);transition-duration:calc(var(--hdur,700ms)*.72);transition-delay:calc(var(--hd,0ms)*.6);}
  html.js .hero{transform:none;transition:none;will-change:auto;}
  html.js .hero-layers{transform:translateY(24px);opacity:0;transition:transform 900ms var(--ease),opacity 900ms ease;}
  html.js.hero-ready .hero-layers{transform:none;opacity:1;}
}

@media (prefers-reduced-motion: reduce){
  .nav{transform:none;transition:none;}
  .hrv{transform:none;clip-path:none;}
  /* Parallax se v JS ani nespustí; tohle je pojistka, aby vrstvy stály
     přesně na sobě a nedržely kompoziční vrstvu zbytečně. */
  .hero-layers,.hero-layer{transform:none;will-change:auto;}
  .protokol-photo .slot > img{transform:none;}
}

/* ============================================================
   3 · PRODUKTY — pole milk. Produkt vidět celý, přesahuje kartu.
   ============================================================ */
.prod{background:var(--field-light);padding-block:var(--section-y);}
.prod-head{display:flex;flex-direction:column;gap:var(--sp-4);margin-bottom:calc(var(--sp-9) + 40px);max-width:var(--measure);}
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);}

.prod-card{
  position:relative;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--card-radius);padding:var(--card-pad);
  display:flex;flex-direction:column;gap:var(--sp-4);
}
/* Lahvičky vystupují nad horní hranu karty — kompoziční podpis.
   Fotka drží uvnitř paddingu karty; bez stropu, takže vyplní celou šířku obsahu. */
.prod-media{
  margin-top:calc(-1 * var(--card-pad) - 72px);margin-bottom:var(--sp-2);
  align-self:center;width:100%;
}
.prod-media .slot{background:transparent;border-radius:var(--r-md);}
.prod-media .slot > img{object-fit:contain;filter:drop-shadow(var(--sh-cast));}
.prod-media .slot-ph{background:var(--ph-bg);border-radius:var(--r-md);}

.prod-name{font-size:var(--s-h3);}
.prod-name span{color:var(--text-tertiary);font-weight:400;}
.prod-desc{color:var(--text-secondary);}

.prod-badges{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-1);}
.prod-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);
  font:500 var(--s-mono-sm)/1 var(--f-mono);letter-spacing:.06em;
  color:var(--text-secondary);text-transform:uppercase;
}
.prod-badge.is-key{border-color:var(--accent);color:var(--text-accent);}

/* Prstenec 30 s — zmenšený podpis z odpočtu, vrací se napříč webem */
.ring30{display:inline-flex;align-items:center;gap:10px;margin-top:var(--sp-2);}
.ring30 svg{width:44px;height:44px;flex:none;}
.ring30 .r-track{fill:none;stroke:var(--border-strong);stroke-width:2;}
.ring30 .r-arc{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;}
.ring30 .r-num{font:600 15px/1 var(--f-sans);fill:var(--text-primary);}
.ring30 b{font-weight:500;font-size:var(--s-small);}
.ring30 i{font-style:normal;display:block;font:400 var(--s-mono-sm)/1.5 var(--f-mono);color:var(--text-tertiary);}

.prod-foot{margin-top:auto;padding-top:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4);}
.prod-sizes{font:400 var(--s-mono)/1.5 var(--f-mono);color:var(--text-tertiary);}
.prod-sizes b{color:var(--text-secondary);font-weight:500;letter-spacing:.08em;text-transform:uppercase;}
.prod-compare{
  margin-top:var(--sp-8);display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-5);flex-wrap:wrap;padding-top:var(--sp-5);border-top:1px solid var(--border);
}

@media (max-width:860px){
  .prod-grid{grid-template-columns:1fr;gap:calc(var(--sp-8) + 40px);}
  .prod-head{margin-bottom:calc(var(--sp-8) + 40px);}
}

/* ============================================================
   4 · RYCHLOST — pole putty, pinned odpočet, matné sklo nad mlžinou.
   Jediný výskyt skla na celém webu.
   ============================================================ */
.speed{background:var(--field-warm);}
/* Panel musí dýchat ze všech čtyř stran — mlžina ho má obtékat dokola,
   ne jen po bocích. Bez toho sklo nečte jako sklo, ale jako deska. */
.speed-stage{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;overflow:hidden;
  padding-block:clamp(36px,6.2vh,84px);
}
.speed-bg{position:absolute;inset:0;z-index:0;}
.speed-bg .slot{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;height:100%;background:var(--field-warm);}
/* Mlžina během odpočtu sedá: --mist jede 0 → 1 z JS souběžně s obloukem.
   Fotka tím přestává být tapeta a stává se součástí děje. Rozsah je
   schválně na hraně viditelnosti — má se to podvědomě cítit, ne vidět. */
.speed-bg .slot > img{
  object-fit:cover;
  /* Předloha je středně šedá, což je pod sklem nejhorší možný podklad: kapky
     splynou a stíny mezi nimi zároveň stáhnou drobný text pod čitelnost.
     Zesvětlení s přidaným kontrastem řeší obojí naráz — kolem panelu jsou
     kapky ostřejší než dřív a pod ním stoupne nejtmavší místo podkladu. */
  filter:brightness(1.32) contrast(1.10);
  transform:scale(calc(1.045 - .045 * var(--mist,1)));
  opacity:calc(.88 + .12 * var(--mist,1));
  transition:transform 120ms linear,opacity 120ms linear;
}
.speed-bg .slot-ph{justify-content:flex-start;}

.speed-panel{
  position:relative;z-index:1;width:100%;
  /* Zkoušel jsem panel zúžit, aby bylo kolem něj vidět víc mlžiny. Nešlo to:
     užší panel = jiné zalomení textu = o 31 px vyšší panel = veškerý vzduch
     nahoře a dole je pryč. Vzduch má přednost, mlžina se řeší kompozicí fotky. */
  padding:clamp(24px,3.2vw,40px);
}
.speed-head{margin-bottom:clamp(20px,2.6vw,32px);}
.speed-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;}

/* Ciferník = tři soustředné vrstvy s jasnou hierarchií:
   vnější věnec 60 tiků je neutrální stupnice (nehýbe se, jen měří),
   uvnitř běží jediný akcentní oblouk, ve středu tiká číslo.
   Kdyby se rozsvěcely i tiky, soupeří dvě červené věci o stejnou pozornost. */
.speed-dial{width:100%;max-width:400px;margin-inline:auto;}
.speed-face{position:relative;aspect-ratio:1;}
.speed-ring{position:absolute;inset:0;width:100%;height:100%;}
.speed-ring .rdot{fill:var(--border-strong);}
.speed-ring .rdot.five{fill:var(--border-strong);}
.speed-ring .rdot.big{fill:var(--text-tertiary);}
/* Milník si zámek pamatuje — věnec po doběhnutí nese stopu obou zastávek */
.speed-ring .rdot.locked{fill:var(--accent);transition:fill var(--dur-fast) linear;}

/* Oblouk drží přesně tloušťku .speed-track u řádků — stejná linka, stejná
   dvojice barev, jen stočená do kruhu. Bez non-scaling-stroke (atribut je
   v HTML) by se stroke počítal v jednotkách viewBoxu a při šířce 400 px
   vyšel trojnásobně tlustý než linka vedle. */
.speed-arc-bed,.speed-arc{fill:none;stroke-width:2;stroke-linecap:round;}
.speed-arc-bed{stroke:var(--border-strong);}
.speed-arc{stroke:var(--accent);}   /* start i směr určuje dráha v HTML */

.speed-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
}
/* cvaknutí na milníku — jediný okamžik, kdy se číslo hne */
.speed-center.lock{animation:speed-lock 520ms var(--ease);}
@keyframes speed-lock{
  0%{transform:scale(1);} 22%{transform:scale(1.075);} 100%{transform:scale(1);}
}
.speed-num{
  font-size:var(--s-display);line-height:.9;letter-spacing:-.05em;
  /* Za běhu je číslo šedé — červená se šetří na milníky, jinak by celý
     odpočet křičel stejně jako jeho dva vrcholy. Značková --accent by tu
     navíc byla jako text mimo pravidla (DESIGN.md), proto --text-accent. */
  color:var(--text-secondary);font-weight:600;
  transition:color var(--dur-fast) linear;
  /* stopky nesmí poskakovat: pevná šířka číslic + dvojmístný zápis v JS */
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.speed-center.hit .speed-num{color:var(--text-accent);}
/* absolutní velikost — em by se počítalo z rodiče, ne z čísla vedle */
.speed-unit{font-size:clamp(26px,3.2vw,48px);font-weight:500;margin-left:.06em;}
.speed-sub{
  margin-top:var(--sp-2);font:500 var(--s-mono)/1.4 var(--f-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);
  transition:opacity var(--dur-fast) linear;
  /* Popisek musí zůstat uvnitř prstence. Rozhoduje tětiva v jeho výšce,
     ne průměr — proto strop pod 80 %, jinak nejdelší varianta
     „bakterie · kvasinky · plísně" prostřihne kružnici. */
  max-width:68%;
}
.speed-sub.swap{opacity:0;}

/* Lišta pod ciferníkem drží dvě věci: fakt o zrychlení (proto mono,
   pravidlo 4) a ovládání. Rezervuje si výšku, aby se panel nehýbal,
   až se tlačítko po doběhnutí objeví. */
.speed-meta{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-4);
  min-height:22px;margin-top:var(--sp-4);flex-wrap:wrap;
}
.speed-rate{
  font:400 var(--s-mono-sm)/1 var(--f-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-tertiary);
}
.speed-replay{
  font:500 var(--s-mono-sm)/1 var(--f-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-accent);
  background:none;border:0;padding:4px 2px;cursor:pointer;
  border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--ease);
}
.speed-replay:hover{border-bottom-color:currentColor;}
.speed-rate[hidden],.speed-replay[hidden]{display:none;}

.speed-rows{display:grid;gap:var(--sp-1);margin-top:var(--sp-5);}
.speed-row{
  padding-block:var(--sp-3);border-top:1px solid var(--border-strong);
  transition:border-color var(--dur-mid) var(--ease);
}
.speed-row-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);}
.speed-row-name{font-weight:500;}
/* Omezení nároku patří k nároku, ne pod čáru — proto štítek přímo v řádku.
   Samotný pill je v base.css jako .tag-variant, protože ho používá i tabulka
   Dávka v sekci Složení. Tady zůstává jen obal řádku. */
.speed-row-label{display:inline-flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;}
.speed-row-time{
  font:500 var(--s-mono)/1 var(--f-mono);color:var(--text-tertiary);letter-spacing:.06em;
  transition:color var(--dur-mid) var(--ease);
}
.speed-row-norm{display:block;font:400 var(--s-mono-sm)/1.5 var(--f-mono);color:var(--text-tertiary);margin-top:3px;}
.speed-track{margin-top:var(--sp-2);height:2px;background:var(--border-strong);overflow:hidden;border-radius:2px;}
.speed-fill{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;}
/* Zámek řádku = výplata odpočtu. Čas přejde na text-accent (značková
   červená by jako 12px písmo neprošla, viz DESIGN.md) a linka nad řádkem
   ztmavne — řádek se tím vizuálně „uzavře". */
.speed-row.locked{border-top-color:var(--text-primary);}
.speed-row.locked .speed-row-time{color:var(--text-accent);}
.speed-foot{margin-top:var(--sp-5);}

@media (max-width:900px){
  .speed-stage{min-height:auto;padding-block:var(--section-y);}
  .speed-grid{grid-template-columns:1fr;gap:var(--sp-7);}
  .speed-dial{max-width:280px;}
  /* menší ciferník = užší tětiva; popisek se zalomí na dva řádky */
  .speed-sub{font-size:var(--s-mono-sm);letter-spacing:.06em;}
}

/* Vypnuté animace: sekce rovnou v doběhnutém stavu (60 s, vše zamčeno).
   Pak není co zrychlovat ani přehrávat — obojí schová JS. */
@media (prefers-reduced-motion: reduce){
  .speed-center.lock{animation:none;}
  .speed-bg .slot > img{transform:none;opacity:1;transition:none;}
}

/* ============================================================
   5 · SLOŽENÍ — pole bone. Makro + mono popisek | tři shluky částic.
   ============================================================ */
.mix{background:var(--field-base);padding-block:var(--section-y);}
.mix-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:stretch;}
/* Fotka dorůstá na výšku textového sloupce — jinak zůstane pod ní díra */
.mix-photo{display:flex;flex-direction:column;margin:0;}
.mix-photo .slot{flex:1;aspect-ratio:auto;min-height:460px;}
.mix-photo figcaption{
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--border);
  font:400 var(--s-mono)/1.6 var(--f-mono);color:var(--text-tertiary);
}
.mix-photo figcaption b{display:block;color:var(--text-secondary);font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;}
/* Gel a liquid každý na svém řádku — porovnání se čte po sloupci, ne v odstavci.
   Úvodní řádek nese společnou vlastnost, pod ním dvě souměřitelné hustoty. */
.mix-photo figcaption span{display:block;}
.mix-photo figcaption .mix-cap-lead{margin-bottom:var(--sp-2);}
.mix-photo figcaption .mix-cap-row{display:flex;gap:var(--sp-3);}
.mix-photo figcaption .mix-cap-row i{
  flex:0 0 62px;font-style:normal;color:var(--text-secondary);
}

.mix-body{display:flex;flex-direction:column;gap:var(--sp-5);}
/* Jeviště smyčky kapka ↔ oblak. Canvas kreslí kapku i částice;
   popisky a tečky naskakují přes třídu .cloud, kterou přepíná JS. */
.mix-stage{position:relative;aspect-ratio:16/11;margin-top:var(--sp-2);}
.mix-stage canvas{position:absolute;inset:0;width:100%;height:100%;}
/* Zdroj pixelů pro canvas — sám se nezobrazuje */
.mix-drop{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}

.mix-dot{
  position:absolute;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;scale:.4;
}
/* Hodnotový žebřík stejný jako u částic na canvasu:
   červená › prstýnky (aroma) › etanol › opar */
.mix-dot.d-care  {left:33%;top:46%;background:var(--accent);}
.mix-dot.d-aroma {left:67%;top:44%;background:var(--text-secondary);}
.mix-dot.d-active{left:50%;top:61%;background:var(--text-tertiary);}

.mix-call{position:absolute;display:flex;flex-direction:column;gap:5px;max-width:210px;opacity:0;translate:0 8px;}
.mix-call b{font:500 var(--s-small)/1.25 var(--f-sans);color:var(--text-primary);letter-spacing:-.01em;}
.mix-call i{font-style:normal;font:500 var(--s-mono-sm)/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);}
.mix-call.c-care{left:1%;top:5%;}
.mix-call.c-aroma{right:1%;top:3%;text-align:right;align-items:flex-end;}
.mix-call.c-active{left:50%;bottom:1%;transform:translateX(-50%);text-align:center;align-items:center;}

/* Reveal řízený smyčkou: naskočí s oblakem, zmizí před složením kapky */
.mix-stage.live .mix-call{transition:opacity 420ms var(--ease),translate 420ms var(--ease);}
.mix-stage.live.cloud .mix-call{opacity:1;translate:0 0;transition-delay:600ms;}
.mix-stage.live .mix-dot{transition:opacity 300ms var(--ease) 60ms,scale 300ms var(--ease) 60ms;}
.mix-stage.live.cloud .mix-dot{opacity:1;scale:1;transition-delay:520ms;}

/* Vypnuté animace: kapka stojí, popisky jsou rovnou vidět */
@media (prefers-reduced-motion: reduce){
  .mix-call{opacity:1;translate:0 0;}
  .mix-dot{opacity:1;scale:1;}
  .mix-call,.mix-dot{transition:none;}
}

@media (max-width:860px){
  .mix-grid{grid-template-columns:1fr;gap:var(--sp-7);}
  .mix-call{max-width:44%;}
  .mix-call b{font-size:13.5px;}
  .mix-call i{font-size:10.5px;}
  .mix-photo .slot{aspect-ratio:3/4;min-height:0;}
}

/* ============================================================
   6 · OCHRANA — pole milk. Deštník + spektrum účinku.
   ============================================================ */
.prot{background:var(--field-light);padding-block:var(--section-y);}
/* align-items:start, ne center — čtvercová kupole je vyšší než text,
   takže centrování táhlo kicker „Ochrana" hluboko pod číslo 04 a
   vznikla mezi nimi dlouhá prázdná plocha. Ostatní sekce (01, 05, 07)
   drží text nahoře pod číslem, tahle měla být stejná. */
.prot-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:start;}
.prot-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5);}
.prot-pill{
  display:inline-flex;align-items:center;padding:8px 16px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);
  font:400 var(--s-mono)/1 var(--f-mono);color:var(--text-tertiary);
}
.prot-stage{position:relative;aspect-ratio:1;width:100%;}
.prot-stage canvas{position:absolute;inset:0;width:100%;height:100%;}

.prot-callout{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;}
.prot-dot{
  position:absolute;left:var(--dx);top:var(--dy);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--c-red) 16%,transparent);
}
.prot-clabel{position:absolute;left:var(--lx);top:var(--ly);max-width:230px;}
.prot-clabel i{font-style:normal;display:block;font:500 var(--s-mono-sm)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-accent);margin-bottom:6px;}
.prot-clabel span{display:block;font-size:var(--s-small);color:var(--text-secondary);}

.prot-spectrum{margin-top:calc(var(--section-y) * .7);}
.pcards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);}
.pcard{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);overflow:hidden;}
.pcard .slot{border-radius:0;}
.pcard-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1;}
.pcard-title{font-size:19px;}
.pcard-norm{font:500 var(--s-mono-sm)/1.4 var(--f-mono);color:var(--text-accent);letter-spacing:.04em;}
.pcard-desc{font-size:var(--s-small);color:var(--text-secondary);}
.pcard-note{margin-top:auto;padding-top:var(--sp-3);font:400 var(--s-mono-sm)/1.5 var(--f-mono);color:var(--text-tertiary);}
.prot-legal{margin-top:var(--sp-6);max-width:88ch;}
.prot-more{margin-top:var(--sp-6);}

@media (max-width:1000px){
  .pcards{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .prot-hero{grid-template-columns:1fr;gap:var(--sp-6);}
  .prot-stage{max-width:440px;margin-inline:auto;}
}
@media (max-width:560px){
  /* Deštník proti kartám mikroorganismů působil nevyváženě — karty na plnou
     šířku byly vůči němu obří. Deštník vyteče do bleedu stránky a povyroste,
     karty jdou zpátky na dva sloupce a zmenší se. */
  .prot-viz{margin-inline:calc(-1 * var(--page-pad));}
  .pcards{grid-template-columns:1fr 1fr;}
}

/* ============================================================
   7 · Z PROTOKOLU — pole bone. Obří čísla + druhé užití podpisu.
   Překlad logaritmů z protokolů do lidské řeči.
   Stojí hned za Ochranou, aby výklad „> 5 lg“ přišel, dokud má čtenář
   to číslo v hlavě. Pole bylo putty, dokud sekce stála až za galerií —
   po prohození si s ní vyměnilo i barvu, viz gradace u V praxi.
   ============================================================ */
.protokol{background:var(--field-base);padding-block:var(--section-y);overflow:hidden;}
.protokol-head{display:flex;flex-direction:column;gap:var(--sp-4);margin-bottom:calc(var(--sp-8) + 24px);max-width:var(--measure);}
.protokol-head h2 i{font-style:normal;color:var(--accent);}
.protokol-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,5vw,72px);align-items:start;}

/* Fotka prolamuje levý okraj pole — kompoziční podpis, 2. ze 3 užití.
   Odsazení je přesně vzdálenost k okraji okna, stejný vzorec jako .hero-content. */
.protokol-photo{margin:0;}
.protokol-photo .slot{
  margin-left:calc(-1 * max(var(--page-pad), (100vw - var(--page-max))/2 + var(--page-pad)));
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  /* putty placeholder by na putty poli zmizel — tady musí být o stupeň tmavší */
  background:var(--ph-bg-alt);
  /* Rezerva pro parallax níž — stejný princip jako --hp-room u hera, jen
     o řád tišší dráha, protože fotka nestojí přes celou výšku okna. */
  --pp-room:16px;
}
/* Obrázek je o --pp-room vyšší/nižší, než rám ukazuje, a JS ho v té rezervě
   jemně posouvá (--pp) při scrollu — .slot má overflow:hidden z base.css,
   takže okraj se nikdy neodkryje. Bez transition: --pp jede z rAF každý
   snímek, přechod by za rychlým scrollem jen dobíhal pozadu. */
.protokol-photo .slot > img{
  top:calc(-1 * var(--pp-room));
  height:calc(100% + 2 * var(--pp-room));
  transform:translate3d(0,var(--pp,0px),0);
}

.protokol-rows{display:flex;flex-direction:column;}
.protokol-row{
  display:grid;grid-template-columns:clamp(140px,16vw,250px) minmax(0,1fr);
  gap:clamp(16px,2.6vw,40px);align-items:start;
  padding-block:clamp(22px,2.8vw,38px);
  border-top:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
}
/* :last-of-type, ne :last-child — posledním dítětem je mono poznámka pod
   trojicí, takže by se spodní vlásečnice nevykreslila vůbec. */
.protokol-row:last-of-type{border-bottom:1px solid color-mix(in srgb, var(--accent) 42%, transparent);}

/* Číslo a jeho jednotka pod ním — spec-sheet, ne horní index.
   Horní index by u čísla přes 100 px vždycky seděl opticky špatně. */
.protokol-fig{display:flex;flex-direction:column;gap:var(--sp-3);}
.protokol-num{
  display:block;font-weight:600;white-space:nowrap;
  font-size:clamp(66px,7.2vw,110px);line-height:.84;letter-spacing:-.05em;
  color:var(--text-primary);
}
/* Znaménko „větší než" a procento jsou červené — data, ne dekorace */
.protokol-num i{font-style:normal;font-size:.44em;color:var(--text-accent);margin-right:.03em;}
/* Číslo bez „větší než" by jinak viselo o šířku znaménka doleva a sloupec
   číslic by měl roztřepenou levou hranu. Neviditelná kopie znaménka drží
   odsazení přesně, bez ohledu na metriku písma. */
.protokol-num.is-bare::before{
  content:">";font-size:.44em;margin-right:.03em;visibility:hidden;
}
.protokol-num em{font-style:normal;font-size:.42em;color:var(--text-accent);margin-left:.06em;}
.protokol-unit{
  font:500 var(--s-mono-sm)/1 var(--f-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent);
}
.protokol-say{padding-top:6px;}
.protokol-say b{
  display:block;font-weight:600;letter-spacing:-.02em;line-height:1.18;
  font-size:clamp(19px,1.85vw,26px);margin-bottom:var(--sp-3);
}
.protokol-say span{display:block;color:var(--text-secondary);font-size:var(--s-small);max-width:54ch;}
.protokol-say em{font-style:italic;}

/* Pointa sekce, ne drobné písmo z opatrnosti. Sedí pod poslední vlásečnicí,
   odsazená do sloupce textu — čte se jako poslední řádek trojice, ne jako
   patička. Na mobilu sloupec zmizí a řádek jde na plnou šířku. */
/* Odsazení musí být margin, ne padding: s box-sizing:border-box by se
   padding započítal do max-width a řádek by se zlomil do úzkého sloupce. */
.protokol-note{
  margin-top:var(--sp-5);
  margin-left:calc(clamp(140px,16vw,250px) + clamp(16px,2.6vw,40px));
  max-width:58ch;
}

@media (max-width:960px){
  .protokol-grid{grid-template-columns:1fr;gap:var(--sp-7);}
  .protokol-photo{order:2;}
  .protokol-photo .slot{
    margin-left:calc(-1 * var(--page-pad));margin-right:calc(-1 * var(--page-pad));
    aspect-ratio:16/10;border-radius:0;
  }
  .protokol-rows{order:1;}
}
@media (max-width:620px){
  .protokol-row{grid-template-columns:1fr;gap:var(--sp-3);}
  .protokol-say{padding-top:0;}
  .protokol-note{margin-left:0;}
}

/* ============================================================
   8 · V PRAXI — pole putty. Galerie devíti provozů.
   Pravidelná mřížka 3 × 3 přes celou šířku, jméno provozu pod fotkou.

   Seznam jmen ve druhém sloupci a schody mezi sloupci fotek odsud zmizely
   spolu s dvousloupcem. Tři sekce po sobě — Složení, Z protokolu, V praxi —
   měly identickou siluetu „nadpis vlevo nahoře, pod ním vizuál vlevo /
   text vpravo“, a tahle byla z nich poslední, takže dojem opakování padal
   právě sem. K tomu měl seznam mrtvou zónu: devět jmen nikdy nedožene devět
   fotek na výšku a končilo to o ~250 px dřív, což je anti-cíl v DESIGN.md.

   Popisek pod fotkou zůstal jako jediný nosič jména. Pozor na hranici, kam
   smí růst: fotka + jméno + mono řádek je maximum. Odstavec nebo plocha
   karty pod tím udělá ze sekce třetí karetní mřížku vedle Ochrany a Blogu —
   tedy přesně tu podobnost, kterou se rušením dvousloupce řešila.

   Pole klesá milk → bone → putty → grafit, gradace do velkoobchodu.
   Ta rampa je monotónní schválně, ne jen střídání sousedů: světlost jde
   pořád dolů a ústí do tmavé velkoobchodní sekce. Když se V praxi přesunula
   za Z protokolu, prohodily si sekce i pole — jinak by pořadí bylo
   putty → bone → grafit a náběh by se uprostřed rozsvítil.

   Klidový stav je plná sytost. Dřív byla galerie v klidu tlumená celá —
   barva měla být odměna za pozornost — jenže v klidu není zvýrazněná žádná
   fotka, takže výchozí podobou sekce bylo devět vybledlých snímků a hover
   jen vracel normál. Teď je to obráceně: v klidu žije všech devět a ustupují
   teprve ve chvíli, kdy ukazatel vjede do galerie (.is-engaged). Výchozí
   zvýrazněná fotka tady pořád žádná není.

   Tlumení zůstává teplé. Čistá šeď je v béžové paletě cizí těleso, proto
   grayscale + sepia místo samotného grayscale(1): fotka odbarví naplno,
   ale drží se bone a clay kolem sebe.
   ============================================================ */
.praxe{background:var(--field-warm);padding-block:var(--section-y);overflow:hidden;}

/* Hlavička je jednosloupcová jako všude jinde na landingu. Zkoušela se
   dvousloupcová (nadpis vlevo, lead vpravo) jako druhý rozlišovací znak proti
   Z protokolu — jenže lead se tím odtrhl od nadpisu a visel v prostoru bez
   ukotvení: nedržel ho ani okraj stránky, ani účaří nadpisu. Sekci odlišuje
   mřížka, hlavička na to nemá být páka. */
.praxe-head{display:flex;flex-direction:column;gap:var(--sp-4);margin-bottom:calc(var(--sp-8) + 24px);max-width:var(--measure);}
.praxe-head h2 i{font-style:normal;color:var(--accent);}

/* ---------- Mřížka pěti sloupců, širší než textový sloupec ---------- */
/* Mřížka se prolomí z .wrap ven, ale ne až k hraně okna: zastaví se
   o --page-pad dřív. Kdyby dosedla na hranu, popisek pod krajní fotkou by
   začínal na x = 0. Odsazení je proto rozdíl mezi vzdáleností k okraji okna
   (stejný vzorec jako u .protokol-photo a .hero-content) a stránkovým
   paddingem — pod 1320 px vyjde nula a mřížka sedí přesně v .wrap.
   overflow:hidden na sekci hlídá 100vw, které na desktopu počítá i lištu.

   Strop 140 px je tam proto, že prolomení je konstanta layoutu, ne „co okno
   dá“. Bez něj rostly dlaždice s monitorem — na 1920 px vyšly 590 px široké,
   tedy 738 px vysoké, a sekce se natáhla na 3 090 px. Strop je přesně
   prolomení na 1600 px, takže nad touhle šířkou už mřížka jen stojí a roste
   okolní pole.

   Schody zmizely spolu se seznamem vpravo. Nepravidelnost dávala smysl,
   dokud mřížka stála v užším sloupci vedle textu — sama o sobě potřebovala
   rozbít tabulkový dojem. Na plné šířce dělá pravidelnost opak: devět
   provozů se má dát srovnat, ne prohlížet. Rovné řádky navíc drží popisky
   na jedné lince, což u schodů nešlo.

   Sloupců je pět, ne tři. Tři sloupce na prolomené šířce daly dlaždice
   431 × 539 px a sekce narostla na 2 470 px — na galerii, která má jen
   odpovědět „je to pro můj provoz?“, je to měřítko hlavní fotky. Pět
   sloupců dá 252 × 315 px a sekci 1 490 px; lahvička je v tom pořád
   rozeznatelná, což je podmínka registru II. Čtyři sloupce se zavrhly kvůli
   devítce: 4 + 4 + 1 nechá v posledním řádku osamocenou dlaždici. */
.praxe-gal{
  --bleed:min(
    calc(max(var(--page-pad), (100vw - var(--page-max))/2 + var(--page-pad)) - var(--page-pad)),
    140px
  );
  margin-inline:calc(-1 * var(--bleed));
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(26px,2.6vw,38px) clamp(10px,1vw,16px);
  /* Poměr dlaždic a míry odrážky drží galerie, ne jednotlivé buňky — sahá
     po nich jak popisek fotky, tak odkazová dlaždice, a musí souhlasit. */
  --ar:4/5; --dot-w:16px; --dot-gap:9px;
}
.praxe-shot{margin:0;}
.praxe-shot .slot{
  border-radius:var(--card-radius);background:var(--ph-bg-alt);
  transition:box-shadow 400ms var(--ease);
}
/* Klidový stav je plná sytost. Tlumí se teprve ve chvíli, kdy ukazatel vjede
   do galerie — třídu .is-engaged sundává a nasazuje main.js. Dřív tlumení
   viselo natvrdo na fotce a rozsvěcelo ji až .is-on, jenže v klidu není
   aktivní nic: výchozí podobou sekce tak bylo devět vybledlých fotek a to,
   co vypadalo jako efekt při najetí, byl jen návrat do normálu.

   Tlumí se odbarvením, ne průhledností. opacity mísila fotku do clay
   podkladu pod ní, což je doslova blednutí; monochrom v plné neprůhlednosti
   čte jako záměr.

   Odbarvení je plné, ale teplé: grayscale sebere barvu celou, sepia ji
   vzápětí vrátí do béžové rodiny. Samotné grayscale(1) by dalo neutrální
   šeď, a ta je mezi bone a clay cizí těleso — původní pravidlo sekce, které
   platí dál. Mění se jen hloubka, ne teplota. Contrast dorovnává plochost,
   kterou odbarvení přinese. */
.praxe-shot .slot > img{
  transition:filter 400ms var(--ease), transform 400ms var(--ease);
}
.praxe-gal.is-engaged .praxe-shot:not(.is-on) .slot > img{
  filter:grayscale(1) sepia(.18) contrast(1.06);
}
/* Zvětšení sedí na obrázku, ne na .praxe-shot — kdyby scale seděl na figuře,
   šel by s ním i popisek a text by při najetí poskočil. */
.praxe-shot.is-on .slot > img{transform:scale(1.03);}
.praxe-shot.is-on .slot{box-shadow:0 18px 40px rgb(0 0 0 / .14);}

/* ---------- Věta provozu — výplata zvýraznění ---------- */
/* Věta ke každému provozu (SEO) bydlí PŘES spodek fotky, ne pod popiskem.
   Pod popiskem nesmí být — dvě řádky jsou strop, jinak sekce sklouzne
   ke třetí karetní mřížce (pravidlo u .praxe-cap níž platí dál). Překryv
   klidový stav nemění ani o pixel: ukazuje se jen na .is-on, takže
   zvýraznění poprvé něco dává, místo aby jen zvětšovalo.

   Grafit s mlékem je citace velkoobchodu — pole sekce beztak klesá
   milk → bone → putty → grafit, tmavý proužek na aktivní fotce tu rampu
   předjímá. Gradient stojí na --field-dark, ne na černé: čistá čerň je
   v teplé paletě stejné cizí těleso jako čistá šeď u odbarvení.

   pointer-events:none — hover má chytat figura, ne překryv.
   z-index:3 sedí nad fotkou (img má z-index:2 v base.css). */
.praxe-note{
  position:absolute;inset:auto 0 0 0;z-index:3;margin:0;
  padding:clamp(44px,4.2vw,64px) var(--sp-4) var(--sp-4);
  background:linear-gradient(to top,
    color-mix(in srgb, var(--field-dark) 86%, transparent) 0%,
    color-mix(in srgb, var(--field-dark) 46%, transparent) 62%,
    transparent 100%);
  color:var(--text-on-dark);
  font-size:clamp(12.5px,.95vw,14px);line-height:1.5;
  letter-spacing:.005em;
  opacity:0;transform:translateY(10px);
  transition:opacity 320ms var(--ease), transform 320ms var(--ease);
  pointer-events:none;
}
.praxe-shot.is-on .praxe-note{opacity:1;transform:none;}
/* Na placeholderu bez fotky by věta ležela přes popis slotu. */
.praxe-shot .slot:not(:has(> img)) .praxe-note{display:none;}

/* ---------- Popisek pod fotkou ---------- */
/* Jediný nosič jména provozu — dřív existoval jen pod 960 px a na desktopu
   ho zastupoval seznam ve druhém sloupci. Tím, že platí na všech šířkách,
   zmizela duplicita v DOM i rozdvojení layoutu.

   Dvě řádky a dost: jméno a mono řádek s momenty. Odstavec ani plocha karty
   pod tím nesmí přibýt — ve chvíli, kdy by přibyly, čte se sekce jako třetí
   karetní mřížka na stránce vedle Ochrany a Blogu. Ty mají navíc 4:3 na
   šířku; tady drží odlišení i formát 4:5 na výšku. */
.praxe-cap{padding-top:var(--sp-3);}
/* Mřížka, ne inline: druhý řádek delšího jména se má srovnat pod první,
   ne zalomit pod odrážku. margin-top sráží odrážku na optický střed prvního
   řádku — align-items:center by ji u dvouřádkového jména odsunul doprostřed
   celého bloku. */
/* Jméno provozu je <h3> (dřív <b>) — devět podnadpisů dá sekci osnovu
   pro vyhledávače; vizuálně se nemění nic, styl zůstal tentýž a margin:0
   sráží výchozí odsazení nadpisu. Selektor bere obě značky, aby přechod
   nikde nic nerozbil. */
.praxe-cap :is(b,h3){
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--dot-gap);align-items:start;margin:0;
  font-weight:600;font-size:clamp(15px,1.1vw,17px);
  letter-spacing:-.015em;line-height:1.2;color:var(--text-primary);
}
/* Odrážka ze zrušeného seznamu. Jediná červená plocha v sekci — a protože
   se rozjede vždy jen pod ukazatelem, je na obrazovce nejvýš jedna, jak
   žádá pravidlo 3 v DESIGN.md. V klidu je neutrální, takže sekce nezačíná
   devíti červenými body. */
.praxe-dot{
  width:var(--dot-w);height:9px;margin-top:.34em;border-radius:5px;
  background:color-mix(in srgb, var(--text-primary) 22%, transparent);
  transition:width 300ms var(--ease), background-color 300ms var(--ease);
}
.praxe-shot.is-on .praxe-dot{width:24px;background:var(--accent);}
.praxe-cap span{
  display:block;margin-top:6px;
  padding-left:calc(var(--dot-w) + var(--dot-gap));
  font:500 var(--s-mono-sm)/1.45 var(--f-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary);
}
/* Jméno ustupuje spolu se svou fotkou — vazba popisek ↔ snímek se drží
   i v tlumeném stavu. Fotka se tlumí odbarvením, text opacitou: odbarvit
   se dá jen to, co má barvu. */
.praxe-gal.is-engaged .praxe-shot:not(.is-on) .praxe-cap{opacity:.45;}
.praxe-cap{transition:opacity 300ms var(--ease);}

/* ---------- Desátá buňka: odkaz místo fotky ---------- */
/* Obrys, ne plocha. Vyplněná dlaždice by mezi devíti fotkami četla jako
   karta a sekce by se posunula k Ochraně a Blogu; vlásečnice v accentu je
   naopak stejný prvek, jakým jsou oddělené řádky v Z protokolu.
   Červená je tu jen v lince a v šipce odkazu (--text-accent, ne --accent —
   značková by jako písmo neprošla na kontrast). Plošná červená zůstává
   vyhrazená odrážce pod ukazatelem, takže jich na obrazovce není víc. */
/* Stavba kopíruje figuru vedle: rám v poměru fotky, pod ním řádek v místě
   popisku. Proto aspect-ratio, ne height:100% — natažení na výšku řádku by
   dlaždici udělalo o popisek vyšší než sousední fotky a rám by z řady vyčníval.
   Poměr se dědí z --ar, aby stačilo přepsat ho na jednom místě, kdyby se
   formát fotek někdy měnil. */
.praxe-more{display:block;text-decoration:none;color:inherit;}
.praxe-more-box{
  display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-3);
  aspect-ratio:var(--ar, 4/5);
  padding:var(--sp-5);
  border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius:var(--card-radius);
  transition:background-color 300ms var(--ease), border-color 300ms var(--ease);
}
.praxe-more:hover .praxe-more-box{
  background:color-mix(in srgb, var(--accent) 5%, transparent);
  border-color:color-mix(in srgb, var(--accent) 70%, transparent);
}
.praxe-more-box b{
  font-weight:600;font-size:clamp(15px,1.1vw,17px);
  letter-spacing:-.015em;line-height:1.25;color:var(--text-primary);
}
.praxe-more-box > span{font-size:var(--s-small);color:var(--text-secondary);}
/* Sedí v řádku jmen provozů a je odsazený o šířku odrážky, takže začíná na
   stejné svislici jako ona jména — ne o 25 px vlevo od nich. */
.praxe-more-go{
  display:inline-flex;align-items:center;gap:7px;
  padding-top:var(--sp-3);
  padding-left:calc(var(--dot-w) + var(--dot-gap));
  font-weight:600;font-size:clamp(15px,1.1vw,17px);letter-spacing:-.015em;
  color:var(--text-accent);
  transition:gap var(--dur-fast) var(--ease);
}
.praxe-more:hover .praxe-more-go{gap:12px;}
.praxe-more-go svg{width:16px;height:16px;flex:none;}

/* ---------- Užší okna ---------- */
/* Počty sloupců jdou 5 → 3 → 2, čtyřka se přeskakuje. Devět dlaždic vyjde
   beze zbytku jen ve třech sloupcích; ve čtyřech by poslední řádek nesl
   jedinou fotku, a osamocená dlaždice pod dvěma plnými řadami vypadá jako
   chyba sazby. Skok z pěti rovnou na tři je proti tomu jen změna měřítka. */
@media (max-width:1200px){
  .praxe-gal{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(28px,3vw,40px) clamp(12px,1.2vw,18px);
  }
  /* Ve třech sloupcích vyjde devítka beze zbytku a odkaz by zůstal sám ve
     čtvrté řadě. Přes celou šířku z něj je pás pod mřížkou — role zůstává,
     osamocená dlaždice ne. */
  .praxe-more{grid-column:1 / -1;}
  /* Poměr fotky se ruší: přes tři sloupce by z rámu byla plocha vysoká přes
     tisíc pixelů. Zůstává pás, odkaz pod ním na stejné svislici. */
  .praxe-more-box{
    aspect-ratio:auto;
    flex-direction:row;align-items:center;justify-content:flex-start;
    gap:var(--sp-6);
    padding:var(--sp-5) var(--sp-6);
  }
  .praxe-more-box b{flex:none;}
  .praxe-more-box > span{max-width:52ch;}
  .praxe-more-go{padding-left:var(--sp-6);}
}
@media (max-width:780px){
  .praxe-gal{
    grid-template-columns:1fr 1fr;
    gap:clamp(26px,4vw,34px) clamp(16px,3vw,26px);
  }
  .praxe-cap :is(b,h3){font-size:var(--s-small);}
  /* Ve dvou sloupcích se roztažení ruší: devět fotek plus odkaz je deset
     buněk, tedy pět plných řádků. Kdyby odkaz zabral celou šířku jako ve
     třech sloupcích, zůstala by devátá fotka sama. */
  .praxe-more{grid-column:auto;}
  .praxe-more-box{
    aspect-ratio:var(--ar, 4/5);
    flex-direction:column;align-items:flex-start;
    gap:var(--sp-3);padding:var(--sp-4);
  }
  .praxe-more-box > span{max-width:none;}
  .praxe-more-go{padding-left:calc(var(--dot-w) + var(--dot-gap));}
}
/* Dva sloupce drží i na nejužších displejích — jeden sloupec by z devíti
   fotek udělal nekonečný svitek, ve kterém se srovnání provozů ztratí. */
@media (max-width:400px){
  .praxe-gal{gap:22px 12px;}
  .praxe-cap span{letter-spacing:.06em;}
}

/* Odbarvení zůstává i tady — je to změna barvy, ne pohyb, a drží vazbu
   fotka ↔ jméno provozu. Odchází jen zvětšení vybrané fotky. Globální
   pravidlo v base.css navíc zkracuje přechody na nulu, takže se stavy
   přepnou skokem. Dřív se tady vypínalo tlumení celé, protože klidovým
   stavem byla tlumená fotka — ta už je v plné sytosti, důvod padl. */
@media (prefers-reduced-motion: reduce){
  .praxe-shot.is-on .slot > img{transform:none;}
  /* Věta se objeví skokem — nájezd zdola je pohyb. Prohlídku po vjezdu
     do sekce vypíná REDUCE v main.js, hover zůstává. */
  .praxe-note{transform:none;}
}

/* Věta o určení pod mřížkou. Zarovnaná na levou hranu .wrap, ne mřížky —
   mřížka je prolomená ven a patka se má vrátit k textovému sloupci,
   stejně jako to dělá speed-foot v Rychlosti. */
.praxe-foot{margin-top:var(--sp-6);}

/* ============================================================
   9 · VELKOOBCHOD — jediné tmavé pole na webu.
   Světelný kontrast celé stránky stojí na téhle sekci.
   ============================================================ */
.whole{padding-block:var(--section-y);}
/* stretch, ne start: levý sloupec se natáhne na výšku formuláře a přímý
   kontakt se v něm odsadí dolů. Tím se zavře mrtvá zóna, kterou dřív zakrýval
   pás s fotkou přes celou šířku. */
.whole-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(40px,5vw,88px);align-items:stretch;}
.whole-copy{display:flex;flex-direction:column;gap:var(--sp-5);}
.whole-copy h2 i{font-style:normal;color:var(--accent);}

.whole-list{display:flex;flex-direction:column;gap:var(--sp-5);margin-top:var(--sp-2);}
.whole-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);align-items:start;}
.whole-ico{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:var(--c-white);margin-top:2px;
}
.whole-ico svg{width:14px;height:14px;}
.whole-list b{display:block;font-weight:600;margin-bottom:3px;}
.whole-list span{display:block;color:var(--text-on-dark-muted);font-size:var(--s-small);max-width:46ch;}
/* --- Přímý kontakt: patka levého sloupce --- */
.whole-direct{
  margin-top:auto;                         /* drží se u paty formuláře */
  padding-top:var(--sp-6);
  border-top:1px solid var(--border-on-dark);
}
.whole-direct-label{
  display:block;
  font:500 var(--s-mono-sm)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-on-dark-muted);
}
.whole-direct-lines{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);
  margin-top:var(--sp-3);
  font-size:var(--s-h4);
}
.whole-direct-lines a{
  color:var(--text-on-dark);
  border-bottom:1px solid var(--border-on-dark);padding-bottom:3px;
  transition:border-color var(--dur-fast) var(--ease);
}
.whole-direct-lines a:hover{border-color:var(--text-on-dark);}

/* --- Formulář --- */
.whole-form{
  color-scheme:dark;                       /* nativní select se vykreslí tmavý */
  background:color-mix(in srgb, var(--c-milk) 6%, transparent);
  border:1px solid var(--border-on-dark);
  border-radius:var(--card-radius);
  padding:var(--card-pad);
}
.whole-form-title{font-size:var(--s-h3);}
.whole-form-sub{margin-top:var(--sp-2);color:var(--text-on-dark-muted);font-size:var(--s-small);}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-6);}
.f{display:block;}
.f-wide{grid-column:1 / -1;}
.f-label{
  display:block;margin-bottom:7px;
  font:500 var(--s-mono-sm)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-on-dark-muted);
}
.f-label i{font-style:normal;color:var(--accent);}
.f input,.f select,.f textarea{
  width:100%;
  background:color-mix(in srgb, var(--c-milk) 8%, transparent);
  border:1px solid var(--border-on-dark);
  border-radius:var(--r-sm);
  padding:12px 14px;
  color:var(--text-on-dark);
  font:400 var(--s-small)/1.5 var(--f-sans);
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.f textarea{resize:vertical;min-height:88px;}
/* 40 % dávalo na tmavém poli jen 2,9:1 — 58 % je 4,86:1 a pořád je to nápověda */
.f input::placeholder,.f textarea::placeholder{color:color-mix(in srgb, var(--c-milk) 58%, transparent);}
.f input:hover,.f select:hover,.f textarea:hover{border-color:color-mix(in srgb, var(--c-milk) 34%, transparent);}
.f-err{display:none;margin-top:6px;font:400 var(--s-mono-sm)/1.4 var(--f-mono);color:var(--accent-wash);}
.f.err input{border-color:var(--accent);}
.f.err .f-err{display:block;}

.whole-submit{margin-top:var(--sp-6);}
.whole-consent{margin-top:var(--sp-4);font:400 var(--s-mono-sm)/1.6 var(--f-mono);color:var(--text-on-dark-muted);max-width:44ch;}

/* Po odeslání sem JS přesune fokus kvůli čtečkám. Je to oznámení, ne ovládací
   prvek — červený prstenec by tu jen rámoval odstavec. */
.whole-done{display:none;flex-direction:column;align-items:flex-start;gap:var(--sp-3);padding-top:var(--sp-5);}
.whole-done:focus,.whole-done:focus-visible{outline:none;}
.whole-done b{font-size:var(--s-h4);font-weight:600;}
.whole-done > span:last-child{color:var(--text-on-dark-muted);font-size:var(--s-small);max-width:40ch;}
.whole-done a{text-decoration:underline;text-underline-offset:3px;}
.whole-done-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--c-white);
}
.whole-done-ico svg{width:19px;height:19px;}
.whole-form.sent .fgrid,
.whole-form.sent .whole-submit,
.whole-form.sent .whole-consent,
.whole-form.sent .whole-form-sub{display:none;}
.whole-form.sent .whole-done{display:flex;}

@media (max-width:960px){
  .whole-grid{grid-template-columns:1fr;gap:var(--sp-7);}
}
@media (max-width:560px){
  .fgrid{grid-template-columns:1fr;}
}

/* ============================================================
   10 · BLOG — pole bone. Tři náhledy, hover jen v barvě a měřítku.
   ============================================================ */
/* "section.blog", ne holé ".blog" — WordPress dává <body> třídu "blog"
   (viz base.css, komentář u position:relative na přímých dětech sekcí),
   holé ".blog" by tak vneslo padding-block na celé <body> a hlavička
   s patičkou by měly navíc mezeru nahoře i dole. */
section.blog{background:var(--field-base);padding-block:var(--section-y);}
.blog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-8);}
.blog-head h2{margin-top:var(--sp-3);}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);}
.bcard{display:flex;flex-direction:column;gap:var(--sp-3);}
.bcard .slot{margin-bottom:var(--sp-2);}
.bcard .slot > img{transition:transform var(--dur-slow) var(--ease);}
.bcard:hover .slot > img{transform:scale(1.03);}
.bcard-tag{font:500 var(--s-mono-sm)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent);}
.bcard-title{font-size:21px;line-height:1.2;transition:color var(--dur-fast) var(--ease);}
.bcard:hover .bcard-title{color:var(--text-accent);}
.bcard-desc{font-size:var(--s-small);color:var(--text-secondary);}

@media (max-width:900px){
  .blog-grid{grid-template-columns:1fr 1fr;}
  .blog-grid .bcard:last-child{display:none;}
}
@media (max-width:600px){
  .blog-grid{grid-template-columns:1fr;gap:var(--sp-7);}
  .blog-grid .bcard:last-child{display:flex;}
}

/* ============================================================
   11 · FINÁLE — pole milk. Uzavírá slib z hera. Data nesou sekce výš,
   tady zůstává jen povinné biocidní sdělení.
   ============================================================ */
.fin{background:var(--field-light);padding-block:var(--section-y);}
.fin-copy{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--sp-5);max-width:60ch;margin-inline:auto;
}
.fin-h{font-size:var(--s-h1);line-height:1.0;letter-spacing:-.03em;font-weight:600;}
.fin-h i{font-style:normal;color:var(--accent);}
.fin-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.fin-photo{margin:calc(var(--sp-8) + 16px) 0 0;}
/* Povinné sdělení podle čl. 72 nařízení (EU) 528/2012 na patě finále.
   Nese ho .legalnote, ne .mono-note — nařízení chce větu „jasně
   rozlišitelnou a čitelnou“, takže drobný šedý mono je vyloučený.
   Box se centruje, text uvnitř zůstává vlevo: .fin-copy má
   text-align:center a ten by jinak roztrhal štítek i odstavec. */
.fin-legal{margin-top:var(--sp-8);max-width:72ch;margin-inline:auto;text-align:left;}
.fin-legal p{margin-inline:0;}

@media (max-width:680px){
  /* Fotka byla zaražená v odsazení stránky jako ořezaná karta. Vyteče na
     celou šířku displeje bez zaoblení; object-position drží vpravo, aby
     zůstala v záběru ruka od pravého okraje — kompoziční podpis sekce. */
  .fin-photo{margin-inline:calc(-1 * var(--page-pad));}
  .fin-photo .slot{aspect-ratio:4/3;border-radius:0;}
  .fin-photo .slot > img{object-position:right center;}
  .fin-cta .btn{flex:1 1 auto;justify-content:center;}
}

/* ============================================================
   12 · PODSTRÁNKY — sdílené komponenty.
   Sekce na podstránkách nemají vlastní pojmenování jako landing —
   nesou přímo .field-light/.field-base/.field-warm (viz base.css) a
   k tomu jednu z těchhle stavebních tříd. Nikde tu není nový hex ani
   nová velikostní řada — všechno je existující token z tokens.css.
   ============================================================ */

/* ---- Úvodní pás stránky — bez fotky, takže drží nahoře prostor pro
   pevnou hlavičku sám, hero to řeší výškou 100vh. ---- */
.subhead{padding:calc(var(--nav-h) + var(--sp-8)) 0 var(--sp-7);}
.subhead-inner{display:flex;flex-direction:column;gap:var(--sp-4);max-width:var(--measure);}
.subhead h1{font-size:var(--s-h1);}
.subhead h1 i{font-style:normal;color:var(--accent);}

/* ---- Hlavička jedné sekce v obsahu stránky — stejná míra jako
   .protokol-head/.praxe-head na landingu, jen bez vazby na jednu sekci.
   Vědomě NE .prod-head: ten má margin-bottom navíc pro přesah karet, který
   tu nikde není a udělal by před obsahem zbytečně velkou mezeru. ---- */
.sec-head{display:flex;flex-direction:column;gap:var(--sp-4);margin-bottom:calc(var(--sp-8) + 24px);max-width:var(--measure);}
.sec-head h2 i{font-style:normal;color:var(--accent);}

/* ---- Foto + text ve dvou sloupcích — stejná DNA jako .mix-grid/.prot-hero,
   ale bez vazby na konkrétní sekci, takže ji sdílí všechny tři podstránky. ---- */
.split{padding-block:var(--section-y);}
.split-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center;}
.split-photo{margin:0;}
/* Dvojice menších fotek místo jedné — AS-20/AS-21, AS-24/AS-25 */
.split-photo-pair{display:flex;flex-direction:column;gap:var(--sp-4);}
.split-body{display:flex;flex-direction:column;gap:var(--sp-5);}
@media (max-width:860px){.split-grid{grid-template-columns:1fr;gap:var(--sp-7);}}

/* ---- Výhody vedle sebe, ne tabulka — .prod-name/.prod-desc mají už
   správné velikosti, tahle dvojice jen přidává vlásečnici mezi položky. ---- */
.vs-list{display:flex;flex-direction:column;gap:var(--sp-6);}
.vs-item{padding-top:var(--sp-5);border-top:1px solid var(--border);}
.vs-item:first-child{padding-top:0;border-top:0;}
.vs-item h3{font-size:var(--s-h3);}
.vs-item h3 span{color:var(--text-tertiary);font-weight:400;}
.vs-item p{margin-top:var(--sp-2);color:var(--text-secondary);}
.vs-item .prod-badges{margin-top:var(--sp-3);}

/* ---- Očíslovaný postup — světlá obdoba .whole-list (ta je jen pro
   grafitové pole). Čísla jsou skutečná pořadí kroků, ne dekorace. ---- */
.step-group + .step-group{margin-top:var(--sp-7);}
.step-group h3{font-size:var(--s-h4);margin-bottom:var(--sp-4);}
.steps{display:flex;flex-direction:column;gap:var(--sp-4);}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);align-items:start;}
/* Stejná typografie jako .p-seq-no v "Na ruce" (produkty.css) — plain
   mono číslo, žádný kroužek. Sjednoceno na výslovnou žádost, ať obě
   sekce postupu čtou čísla stejně. */
.step-no{
  display:block;flex:none;margin-top:3px;
  font:500 var(--s-mono)/1 var(--f-mono);
  letter-spacing:.14em;color:var(--text-accent);
}
/* div>, ne .step >, protože .step-no je taky span — bez scopingu na
   obalový div by na něj sedlo .step span a přepsalo mu display:inline-flex. */
.step div b{display:block;font-weight:600;margin-bottom:2px;}
.step div span{display:block;color:var(--text-secondary);font-size:var(--s-small);max-width:54ch;}

/* ---- Výčet faktů s ikonou — světlá obdoba .whole-ico/.whole-list. ---- */
.factlist{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-2);}
.factlist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);align-items:start;}
.fact-ico{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:50%;margin-top:2px;
  background:var(--accent);color:var(--c-white);
}
.fact-ico svg{width:14px;height:14px;}
/* div>, ne .factlist >, ze stejného důvodu jako u .step div span výš */
.factlist div b{display:block;font-weight:600;margin-bottom:3px;}
.factlist div span{display:block;color:var(--text-secondary);font-size:var(--s-small);max-width:54ch;}
.field-dark .factlist div b{color:var(--text-on-dark);}
.field-dark .factlist div span{color:var(--text-on-dark-muted);}

/* ---- Datová tabulka — pro B2B čtenáře na ucinnost.html, kde editorialní
   velká čísla (.protokol-*) nestačí: potřebuje to být rychle prohledatelné.
   min-width + overflow drží tabulku čitelnou i na mobilu bez zalamování. ---- */
.dtable-wrap{overflow-x:auto;margin-top:var(--sp-6);}
.dtable{width:100%;border-collapse:collapse;min-width:660px;}
/* Výchozí caption je vycentrovaný — jediný vycentrovaný text na webu,
   který jinak celý stojí na jedné levé ose. */
.dtable caption{
  text-align:left;padding-bottom:var(--sp-4);
  font-size:var(--s-small);color:var(--text-secondary);
}
.dtable th,.dtable td{padding:var(--sp-3) var(--sp-4) var(--sp-3) 0;text-align:left;vertical-align:top;border-top:1px solid var(--border);}
.dtable thead th{
  border-top:0;padding-bottom:var(--sp-2);
  font:500 var(--s-mono-sm)/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);
}
.dtable tbody tr:last-child td{border-bottom:1px solid var(--border);}
.dtable td.num{font:500 var(--s-mono)/1.4 var(--f-mono);color:var(--text-primary);white-space:nowrap;}
.dtable td .tag-variant{margin-left:var(--sp-2);}

/* ---- Plnobarevný pás — jediná výjimka z duotónu na celém webu, vyhrazená
   petriho miskám na ucinnost.html (DESIGN.md). Bez .field-*, je to čistá
   fotka přes celou šířku okna, ne pole s obsahem nad zrnem. ---- */
.colorstrip-sec{padding-block:var(--sp-8) var(--sp-6);}
.colorstrip{margin:0;}
.colorstrip .slot{aspect-ratio:21/9;border-radius:0;}
.colorstrip-note{margin-top:var(--sp-4);}
@media (max-width:680px){.colorstrip .slot{aspect-ratio:16/9;}}

/* ---- .duo / .duo-col zrušeno 2026-08-14. Byla to dvojice orámovaných
   karet „obalené vs. neobalené viry" v sekci 03 na ucinnost.html a nikde
   jinde se nepoužívala. Sekce dnes jede na sdílené .hairgrid a vlastních
   .vmeta / .vlist / .vlimit v css/ucinnost.css — dvě karty stejné váhy
   z ní dělaly výsledkovou tabuli, na které jedna strana prohrála.
   Modifikátor .is-full (accent border = „plně doloženo") navíc mimo tenhle
   jediný kontext nic neznamenal, takže nebylo co zachovávat do zásoby. ---- */

/* ---- Povinné sdělení podle čl. 72 nařízení (EU) 528/2012.

   Sedí tu, i když ho dnes vykresluje jediná stránka. U každé jiné
   komponenty platí „počkej, až ji převezme druhá stránka" — u zákonného
   sdělení ne: je to text, který patří ke každé propagaci přípravku, a
   nemá smysl blokovat jeho nasazení refaktoringem.

   Nařízení po něm chce, aby bylo „jasně odlišitelné a čitelné" od
   zbytku sdělení. Proto NE .mono-note: 12px v --text-tertiary je na
   webu nejdrobnější stupeň, tedy pravý opak. Tady běžná velikost
   odstavce, plná barva textu a vlastní rámeček; mono zůstalo jen
   na štítku, kde nese fakt (DESIGN.md, pravidlo 4). ---- */
.legalnote{
  padding:var(--sp-5);
  border:1px solid var(--border-strong);
  border-radius:var(--r-md);
  background:var(--surface-raised);
}
.legalnote-label{
  display:block;margin-bottom:var(--sp-2);
  font:500 var(--s-mono-sm)/1 var(--f-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary);
}
.legalnote p{color:var(--text-primary);max-width:var(--measure);}
.field-dark .legalnote{
  background:transparent;border-color:var(--border-on-dark);
}
.field-dark .legalnote p{color:var(--text-on-dark);}

/* ---- Uzavírací pás sekce — stejný vzor jako .prod-compare, jen bez vazby
   na produktovou mřížku, aby ho šlo použít i na konci ostatních sekcí. ---- */
.cta-row{
  margin-top:var(--sp-8);display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-5);flex-wrap:wrap;padding-top:var(--sp-5);border-top:1px solid var(--border);
}
.field-dark .cta-row{border-top-color:var(--border-on-dark);}


/* ============================================================
   13 · ČÍSLOVANÉ PODSTRÁNKY — kostra sdílená produkty.html
   a ucinnost.html.

   Tyhle komponenty vznikly jako .p-* v css/produkty.css. DESIGN.md
   k tomu říká: jakmile se komponenta objeví na druhé stránce, patří
   do sections.css a prefix padá. Účinnost převzala hero s kotvami,
   číslované hlavičky sekcí, mřížku s vlásečnicemi, odkaz uvnitř věty
   i odkazovou kartu — takže se sem stěhují všechny.

   V produkty.css zůstalo jen to, co má pořád jediného uživatele:
   diptych gel|liquid, tmavý pás s mlžinou a dvousloupcový postup.

   Přenosy z referencí:
     · hero s číslovanými kotvami              [2ag.com/pages/science]
     · číslo sekce ve stupni H2 na vlásečnici  [seed.com/approach]
     · mřížka buněk s vlásečnicemi             [aesop.com/skin-care]
   ============================================================ */

/* ---- Fixní hlavička překrývá cíl kotvy — bez tohohle by nadpis
   sekce skončil pod ní. ---- */
.numsec{padding-block:var(--section-y);scroll-margin-top:calc(var(--nav-h) + var(--sp-5));}


/* ---- Hero podstránky — vlevo nadpis, argument a číslované kotvy,
   vpravo doprovodný sloupec.

   Proč ne .wrap na sekci: .wrap dává max-width i margin-inline:auto
   naráz. Když se na stejný element přidá užší max-width (jak to dělá
   .subhead-inner), auto marže ten užší blok vycentrují a nadpis stránky
   se odsune z osy webu. Tady drží šířku .pagehero-inner a text si
   měřítko řeže vlastním max-width na .pagehero-copy. ---- */
.pagehero{
  position:relative;
  overflow:hidden;                   /* ořízne bleed na hraně viewportu */
  padding-block:calc(var(--nav-h) + var(--sp-9)) var(--sp-9);
}
.pagehero-inner{
  max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-pad);
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(280px,32vw,520px);
  gap:clamp(32px,5vw,80px);
  align-items:center;
}
.pagehero-copy{display:flex;flex-direction:column;gap:var(--sp-5);max-width:52ch;}
.pagehero h1{font-size:var(--s-h1);}
.pagehero h1 i{font-style:normal;color:var(--accent);}

/* Doprovodný sloupec. Produkty v něm mají fotku, Účinnost souhrn dokladů —
   proto sám o sobě jen sedí na ose a bleed je zvláštní modifikátor. */
.pagehero-aside{align-self:center;}

/* Fotka vyteče doprava přesně o vnější okraj stránky. Výšku jí musí dát
   sousední sloupec, jinak .slot níž nemá k čemu vztáhnout height:100%. */
.pagehero-bleed{
  align-self:stretch;
  margin-right:calc(-1 * var(--gutter-out));
  min-height:clamp(320px,42vw,540px);
}
/* aspect-ratio ze .slot se tu musí zrušit. Výšku určuje sousední sloupec
   s textem (align-self:stretch), a kdyby k té výšce .slot dopočítával
   šířku z poměru 16/9, vyleze z buňky ven a ořez fotky se posune mimo
   záběr — přesně to se tady stalo napoprvé. */
.pagehero-bleed .slot{
  aspect-ratio:auto;
  width:100%;height:100%;
  border-radius:var(--ph-radius) 0 0 var(--ph-radius);
}

/* ---- Číslované kotvy — slib struktury i navigace zároveň ---- */
.jump{
  display:flex;flex-direction:column;
  margin-top:var(--sp-3);
  border-top:1px solid var(--border);
}
.jump a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:var(--sp-4);
  padding-block:var(--sp-4);
  border-bottom:1px solid var(--border);
  transition:padding-left var(--dur-mid) var(--ease);
}
.jump-no{
  font:500 var(--s-mono)/1 var(--f-mono);
  letter-spacing:.14em;color:var(--text-accent);
}
.jump-name{
  font-size:var(--s-h4);font-weight:600;letter-spacing:-.01em;
  /* Podtržení v barvě značky jako u 2AG — ale kreslené pozadím, aby
     šlo animovat a nesedělo na účaří diakritiky (ě, í, ů). */
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 2px;
  transition:background-size var(--dur-mid) var(--ease);
  padding-bottom:2px;
}
.jump a:hover .jump-name,
.jump a:focus-visible .jump-name{background-size:100% 2px;}
.jump-ico{
  width:26px;height:26px;flex:none;border-radius:50%;
  border:1px solid var(--border-strong);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-tertiary);
  transition:transform var(--dur-mid) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.jump-ico svg{width:13px;height:13px;}
.jump a:hover .jump-ico{
  transform:translateY(3px);
  border-color:var(--text-primary);color:var(--text-primary);
}


/* ---- Hlavička číslované sekce  [seed.com/approach]
   Vlásečnice přes celou šířku, pod ní číslo ve stupni nadpisu úplně
   vlevo a název sekce s odstupem. Seed název centruje; tady zůstává
   vlevo, protože celý web stojí na jedné levé ose a vycentrovaný
   nadpis by ji rozbil. Napětí drží ta mezera. ---- */
.numhead{
  border-top:1px solid var(--border);
  padding-top:var(--sp-6);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,5fr);
  gap:clamp(24px,4vw,64px);
  align-items:start;
  margin-bottom:calc(var(--sp-8) + 24px);
}
.numhead-no{
  font-size:var(--s-h2);font-weight:500;line-height:1;
  letter-spacing:-.02em;color:var(--text-accent);
  font-variant-numeric:tabular-nums;
}
.numhead-body{display:flex;flex-direction:column;gap:var(--sp-4);}
.numhead-body h2{font-size:var(--s-h2);letter-spacing:-.03em;}
.numhead-body h2 i{font-style:normal;color:var(--accent);}
/* Na grafitu nemá značková červená dost kontrastu na číslici. */
.field-dark .numhead{border-top-color:var(--border-on-dark);}
.field-dark .numhead-no{color:var(--text-on-dark);}


/* ---- Mřížka buněk s vlásečnicemi  [aesop.com/skin-care]
   Nad každou buňkou vlásečnice, tučný nadpis (u produktů se štítkem
   gel/liquid) a jedna věta. Aesop tu má odkazy se šipkou; tyhle buňky
   nikam nevedou, takže šipka odpadá a nese to štítek nebo číslo. ---- */
.hairgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(24px,4vw,64px);
}
.haircell{
  border-top:1px solid var(--border);
  padding:var(--sp-5) 0 var(--sp-7);
}
.haircell h3{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  font-size:var(--s-h4);font-weight:600;margin-bottom:var(--sp-3);
}
.haircell p{color:var(--text-secondary);font-size:var(--s-small);}
/* Pořadové číslo uvnitř buňky — mono, protože je to index, ne dekorace. */
.haircell-no{
  display:block;margin-bottom:var(--sp-3);
  font:500 var(--s-mono)/1 var(--f-mono);
  letter-spacing:.14em;color:var(--text-accent);
}


/* ---- Odkaz uvnitř věty. .btn-text sem nepatří — je to inline-flex,
   tučný a ve značkové červené, takže uprostřed odstavce působí jako
   tlačítko, které se někam zamíchalo. Tady stačí podtržení. ---- */
.link-in{
  color:var(--text-accent);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--text-accent) 40%,transparent);
  transition:text-decoration-color var(--dur-fast) var(--ease);
}
.link-in:hover{text-decoration-color:currentColor;}


/* ---- Odkazová karta na konci datové sekce ---- */
.callout{
  border:1px solid var(--border);border-radius:var(--card-radius);
  padding:var(--card-pad);background:var(--surface-raised);
  display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start;
}
.callout h3{font-size:var(--s-h4);}
.callout p{color:var(--text-secondary);font-size:var(--s-small);}


/* ---- Responsive ---- */
@media (max-width:1040px){
  .hairgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  /* Doprovodný sloupec pod text: vedle 44 znaků by z něj zbyl proužek. */
  .pagehero-inner{grid-template-columns:1fr;gap:var(--sp-7);}
  /* Jakmile spadne pod text, drží 52ch už jen odstavec. Kotvy se roztáhnou
     na plnou šířku, jinak by vedle nich zbyl prázdný sloupec. */
  .pagehero-copy{max-width:none;}
  .pagehero-copy .lead{max-width:var(--measure);}
  .pagehero-bleed{
    margin-right:0;
    margin-left:0;
    min-height:0;
  }
  /* Fotky jsou nativně na výšku (4:5) — dřív se tu ořezávaly na širokoúhlé
     16:10 a přišly o kompozici. Zůstávají v běžném odsazení stránky, ne
     na plný bleed: to dá „tenounké volné místo" po stranách místo ořezu
     na šířku, který si vyžádal. */
  .pagehero-bleed .slot{aspect-ratio:4/5;border-radius:var(--ph-radius);}
}
@media (max-width:760px){
  /* Číslo sekce nad název — vedle sebe by na název zbylo pár znaků. */
  .numhead{grid-template-columns:1fr;gap:var(--sp-4);margin-bottom:var(--sp-8);}
  .numhead-no{font-size:var(--s-h3);}
}
@media (max-width:560px){
  .hairgrid{grid-template-columns:1fr;}
}