@font-face{font-family:'Jost';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/jost-latin-wght-normal.7726a5cd.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/jost-latin-ext-wght-normal.312ef2b8.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:italic;font-display:swap;font-weight:100 900;src:url(/assets/fonts/jost-latin-wght-italic.0cadc07f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
:root {
    --paper:   #EDEAE2;
    --paper-2: #E4E0D6;
    --ink:     #1A1A18;
    --ink-mid: #57554E;
    --ink-soft:#8B887F;
    --rule:    #C9C4B8;
    --red:     #EE2842;
    --dark:    #191713;
    --f: 'Jost', sans-serif;
    --g: 5vw;
    --maxw: 1500px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--paper); color: var(--ink);
    font-family: var(--f); font-weight: 400;
    font-size: 17px; line-height: 1.72;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
    opacity: .5; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  }
  a { color: inherit; }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--g); }
  .lab { font-size: 12.5px; letter-spacing: .04em; color: var(--ink-soft); }
  .lab .n { color: var(--red); }

  /* ---------- header + running head ---------- */
  header { position: sticky; top: 0; z-index: 60; background: var(--paper);
           border-bottom: 1px solid var(--ink); }
  .head-in { max-width: var(--maxw); margin: 0 auto; padding: 16px var(--g);
             display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
  .logo { width: 148px; height: 31px; display: block; background-color: var(--red);
          -webkit-mask: url("/assets/logo_light.10639efc.png") left center / contain no-repeat;
                  mask: url("/assets/logo_light.10639efc.png") left center / contain no-repeat; }
  #runhead { font-size: 12px; letter-spacing: .1em; color: var(--ink-soft);
             text-transform: lowercase; transition: opacity .35s; padding-left: 26px;
             border-left: 1px solid var(--rule); }
  #runhead b { color: var(--red); font-weight: 400; margin-right: 8px; }
  nav { display: flex; gap: 26px; align-items: center; }
  nav a { font-size: 14px; text-decoration: none; color: var(--ink-mid); padding-bottom: 2px;
          border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
  nav a:hover { color: var(--ink); border-color: var(--ink); }
  @media (max-width: 1000px) { #runhead, nav a:not(:last-child) { display: none; }
                               .head-in { grid-template-columns: auto auto; justify-content: space-between; }
                               .logo { width: 120px; height: 25px; } }

  /* ---------- ink shapes ---------- */
  .tex { position: relative; display: block; }
  .tex i, .tex u { position: absolute; inset: 0; display: block; text-decoration: none;
    -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
  .tex i { background-color: var(--red); animation: drift 26s ease-in-out infinite; }
  .tex u { background-color: var(--red); opacity: .26; animation: misreg 13s ease-in-out infinite; }
  @keyframes drift  { 0%,100% { transform: translate(0,0); } 50% { transform: translate(3px,-4px); } }
  @keyframes misreg { 0%,100% { transform: translate(1.5px,1px); } 50% { transform: translate(-2px,-1.5px); } }

  /* ---------- hero: redakce ---------- */
  .hero { position: relative; min-height: 92vh; display: flex; align-items: center;
          padding-block: 6vh 8vh; }
  .hero-in { width: 100%; container-type: inline-size; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
             overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .doc { margin-top: 30px; font-weight: 300; letter-spacing: -0.012em;
         font-size: 2.86vw; font-size: 3.15cqw; line-height: 1.34; color: var(--ink-mid); }
  /* Bez lowercase: próza pod pruhy má normální velká písmena na začátku vět,
     slogan zůstává malý, protože přeživší slova jsou malá už ve zdroji. */
  .doc .ln { display: block; white-space: nowrap; }
  .doc .set { display: block; }
  .doc .set.narrow { display: none; }
  .doc w, .doc k { position: relative; display: inline-block; white-space: pre; }
  .doc w { z-index: 1; transition: color .01s linear var(--d, 0ms); }
  .doc w::after { content: ""; position: absolute; left: -.05em; right: -.05em; top: -.06em; bottom: -.10em;
    background: var(--red); transform: scaleX(0); transform-origin: left;
    transition: transform .32s cubic-bezier(.3,.7,.3,1); transition-delay: var(--d, 0ms); }
  .hero.lit .doc w.out { color: transparent; }
  .hero.lit .doc w.out::after { transform: scaleX(1); }
  /* Po doznění animace se dá pod pruh podívat. Agentura, která se jmenuje
     Transparent, si to zaslouží: kdo si najede myší, uvidí, co bylo škrtnuté.
     Pruh nemizí, jen zprůsvitní — text prosvítá jako papír proti světlu.
     Layoutem to nehne, slovo je pořád na svém místě, mění se jen barva. */
  @media (hover: hover) and (pointer: fine) {
    .hero.done .doc w.out { transition: color .28s ease; transition-delay: 0s; }
    .hero.done .doc w.out::after { transition: opacity .28s ease, background-color .28s ease;
                                   transition-delay: 0s; }
    .hero.done .doc w.out:hover { color: var(--ink); }
    /* Odkrývá se jen slovo pod kurzorem. Zbytek řádku zůstává zakrytý. */
    .hero.done .doc w.out:hover::after { opacity: .14; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero.done .doc w.out, .hero.done .doc w.out::after { transition: none; }
  }

  .doc k { z-index: 2; color: var(--ink-mid); transition: color .5s ease var(--d, 0ms); }
  .hero.lit .doc k { color: var(--ink); }
  .hero.lit .doc k.last { color: var(--red); }
  /* Interpunkce sloganu, ne prózy. Barvu bere po svém slově, aby čárka po
     „mlčíte" byla inkoustová a tečka na konci červená. */
  .doc k i { position: absolute; left: 100%; top: 0; font-style: normal; color: inherit;
             opacity: 0; transition: opacity .5s ease; }
  /* useknutá interpunkce z prózy — pruh se kolem ní stáhne, ať netvoří ocásek */
  .doc w.tail::after { left: -.02em; right: -.02em; }
  .hero.done .doc k i { opacity: 1; }
  .hero .foot { display: flex; gap: 4vw; flex-wrap: wrap; align-items: baseline; margin-top: 7vh;
                opacity: 0; transition: opacity .9s ease; }
  .hero.done .foot { opacity: 1; }
  .hero .sub { max-width: 30em; color: var(--ink-mid); font-size: 17.5px; margin: 0; }
  .hero .go { display: inline-block; font-size: 15px; text-decoration: none;
              border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
  .hero .go:hover { color: var(--red); border-color: var(--red); }
  /* below this width the fixed lines no longer fit — show the claim plainly instead */
  @media (max-width: 820px) {
    .hero { min-height: 0; }
    /* Kratší sada řádků (LINES_S v _shared.js) se smí lámat. Škrtání nic
       neodstraňuje, jen překrývá, takže se po doznění layout nehne. */
    /* Řádky zůstávají neřádkující i tady — jinak se z nich při jiné šířce
       stane jedenáct řádků. Velikost se bere z šířky kontejneru (.hero-in má
       container-type), takže nejdelší řádek se vejde v každé šířce. */
    .doc { display: block; font-size: min(6.6cqw, 32px); line-height: 1.42; margin-top: 22px; }
    .doc .set.wide { display: none; }
    .doc .set.narrow { display: block; }
    /* na telefonu je poměr škrtnutého k přeživšímu vyšší — pruh proto tenčí */
    .doc w::after { top: .12em; bottom: .04em; }
    /* h1 zůstává jen pro čtečky — vizuálně ho nese .doc, stejně jako na desktopu */
    .hero .foot { margin-top: 5vh; }
  }
  /* bez JS se .doc nenaplní, takže se ukáže prostý nadpis */
  @media (max-width: 820px) {
    .hero:not(.js) .sr-only.h { position: static; width: auto; height: auto; margin: 26px 0 0;
                 overflow: visible; clip: auto; white-space: normal; font-weight: 300;
                 text-transform: lowercase; font-size: clamp(30px, 8.4vw, 52px);
                 line-height: 1.1; letter-spacing: -0.02em; }
    .hero:not(.js) .sr-only.h b { font-weight: 300; color: var(--red); }
    .hero:not(.js) .foot { opacity: 1; }
  }

  /* ---------- sections + chapter openers ---------- */
  .sec { padding-block: 11vh 13vh; }
  .sec.alt { background: var(--paper-2); }
  .chapter { display: flex; align-items: baseline; gap: 22px;
             border-top: 1.5px solid var(--ink); padding-top: 16px; margin-bottom: 7vh; }
  .chapter .num { font-size: clamp(30px, 3.6vw, 54px); font-weight: 200; line-height: 1;
                  color: var(--ink); letter-spacing: -0.02em; }
  .chapter .ttl { font-size: 13px; letter-spacing: .08em; color: var(--ink-soft); }
  .dark .chapter { border-top-color: rgba(237,234,226,.85); }
  .dark .chapter .num { color: var(--paper); }
  .dark .chapter .ttl { color: rgba(237,234,226,.55); }

  h2 { font-weight: 300; font-size: clamp(26px, 3.2vw, 46px); line-height: 1.16;
       letter-spacing: -0.012em; text-transform: lowercase; max-width: 17em; }
  h2 .r { color: var(--red); }
  .lede { margin-top: 28px; max-width: 40em; color: var(--ink-mid); font-size: 18px; }
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 1s ease, transform 1s ease; }
  .reveal.in { opacity: 1; transform: none; }

  /* ---------- rozhovory ---------- */
  .talks { margin-top: 10vh; }
  .talk { max-width: 60em; position: relative; padding-left: 26px; }
  .talk + .talk { margin-top: 10vh; }
  .talk::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 10px; width: 1px;
                  background: var(--red); transform: scaleY(0); transform-origin: top;
                  transition: transform 2.6s cubic-bezier(.4,.6,.3,1); }
  .talk.go::before { transform: scaleY(1); }
  .talk .meta { display: flex; gap: 12px; align-items: baseline; padding-bottom: 12px;
                border-bottom: 1px solid var(--rule); margin-bottom: 30px; }
  .line { display: grid; grid-template-columns: 128px 1fr; gap: 24px; align-items: baseline;
          opacity: 0; transform: translateY(6px); transition: opacity .55s ease, transform .55s ease; }
  .line.shown { opacity: 1; transform: none; }
  .line + .line { margin-top: 30px; }
  .line.us { margin-top: 34px; }
  .line .who { font-size: 12.5px; letter-spacing: .06em; color: var(--ink-soft); padding-top: .55em; }
  .line.us .who { color: var(--red); }
  .line .said { font-size: clamp(19px, 1.65vw, 23px); line-height: 1.62; max-width: 27em;
                color: var(--ink-mid); }
  .line.us .said { color: var(--ink); }
  /* someone is typing */
  .line .said { position: relative; }
  .line .said .txt { visibility: hidden; }
  .line.said-in .said .txt { visibility: visible; }
  .dots { position: absolute; left: 0; top: 0; display: inline-flex; gap: 5px; align-items: center; height: 1.62em; }
  .line.said-in .dots { display: none; }
  .dots b { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); opacity: .35;
            animation: blip 1.1s ease-in-out infinite; }
  .dots b:nth-child(2) { animation-delay: .16s; } .dots b:nth-child(3) { animation-delay: .32s; }
  .line.us .dots b { background: var(--red); }
  @keyframes blip { 0%,100% { opacity:.22; transform: translateY(0); } 45% { opacity:.9; transform: translateY(-2px); } }
  @media (max-width: 760px) { .line { grid-template-columns: 1fr; gap: 5px; } .line .who { padding-top: 0; } }
  .disclaimer { margin-top: 9vh; font-size: 13px; color: var(--ink-soft); max-width: 40em; }

  /* ---------- lidé (dark) ---------- */
  .dark { background: var(--dark); color: var(--paper); padding-block: 12vh 13vh; }
  .dark h2 { color: var(--paper); }
  .dark .lede { color: rgba(237,234,226,.7); }
  .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6vw; margin-top: 9vh;
          max-width: 1080px; }
  .person:nth-child(2) { margin-top: 6vh; }
  .person:nth-child(3) { margin-top: 2vh; }
  .person figure { width: 76%; }
  @media (max-width: 860px) { .trio { grid-template-columns: 1fr; gap: 7vh; max-width: none; }
                              .person { margin-top: 0 !important; }
                              /* na 100 % šířky byl portrét přes celý displej */
                              .person figure { width: min(56%, 190px); } }
  .person img { display: block; width: 100%; height: auto; }
  .person h3 { font-weight: 300; font-size: 24px; margin-top: 22px; text-transform: lowercase; }
  /* jméno vede na LinkedIn; podtržení se objeví až na hover, aby karta zůstala klidná */
  .person h3 a.li { color: inherit; text-decoration: none; border-bottom: 1px solid transparent;
                    transition: color .3s, border-color .3s; }
  .person h3 a.li:hover,
  .person h3 a.li:focus-visible { color: var(--red); border-bottom-color: var(--red); }
  .person .role { display: block; margin-top: 6px; font-size: 13px; color: var(--red); letter-spacing: .03em; }
  .person p { margin-top: 12px; color: rgba(237,234,226,.72); font-size: 15.5px; max-width: 22em; }
  .dark .foot-note { margin-top: 8vh; font-size: 13px; color: rgba(237,234,226,.45); max-width: 40em; }

  /* ---------- produkty ---------- */
  .prow { display: grid; grid-template-columns: 52px 104px 1fr 170px; align-items: center; gap: 3vw; align-items: center;
          padding-block: 5vh; border-top: 1px solid var(--rule); text-decoration: none; transition: background .35s; }
  .prow:last-of-type { border-bottom: 1px solid var(--rule); }
  .prow:hover { background: rgba(26,26,24,.035); }
  .prow .idx { font-size: 13px; color: var(--red); }
  .prow .artwrap { width: 104px; }
  .prow .art { width: 104px; aspect-ratio: 1/1; position: relative; opacity: .72; }
  .prow:hover .art { opacity: .95; }
  .prow .artcap { display: block; margin-top: 9px; font-size: 11px; letter-spacing: .06em;
                  color: var(--ink-soft); }
  @media (max-width: 1000px) { .prow .artcap { display: none; } }
  .prow h3 { font-weight: 300; font-size: clamp(20px, 2.3vw, 32px); line-height: 1.12;
             text-transform: lowercase; letter-spacing: -0.012em; }
  .prow .k { display: block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; letter-spacing: .04em; }
  .prow p { margin-top: 12px; color: var(--ink-mid); font-size: 15.5px; max-width: 27em; }
  .prow .r { font-size: 13px; color: var(--ink-soft); text-align: right; }
  @media (max-width: 1000px) {
    /* Všechno kromě čísla jde do druhého sloupce. Mřížkovou položkou je .artwrap,
       ne .art uvnitř — grid-column na .art se ignoroval a textový div padal
       do 40px sloupce, kde se lámal po jednom slově na řádek. */
    .prow { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
    .prow .artwrap { grid-column: 2; width: 120px; margin-bottom: 10px; }
    .prow .art { width: 120px; }
    .prow > div { grid-column: 2; }
    .prow .r { grid-column: 2; text-align: left; }
  }

  /* Celý odstavec červeně byl moc, samotný inkoust se ztrácel. Červená proto
     drží jen výzvu, zbytek je inkoust. Vpravo, aby se odsadil od výčtu nad ním.
     Kurzíva tu nejde: italický řez Jostu nemá latin-ext, takže česká diakritika
     padá do systémového fontu. Viz HANDOFF, oddíl 2. */
  .bespoke { margin-top: 5vh; max-width: 40em; margin-left: auto; font-size: 15px;
             line-height: 1.62; color: var(--ink); }
  .bespoke .r { color: var(--red); }
  @media (max-width: 1000px) { .bespoke { margin-left: 0; } }

  /* ---------- další formy spolupráce na konci podstránky ---------- */
  .navsec { padding-block: 9vh 10vh; }
  .nextup .lab { display: block; margin-bottom: 26px; }
  .nextpair { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; }
  .nextpair a { display: block; text-decoration: none; padding-block: 6px 20px; }
  .nextpair a + a { text-align: right; }
  .nextpair .dir { display: block; font-size: 15px; color: var(--ink-soft);
                   margin-bottom: 10px; transition: color .3s; }
  .nextpair h3 { font-weight: 300; font-size: clamp(17px, 1.9vw, 24px); line-height: 1.16;
                 text-transform: lowercase; letter-spacing: -0.012em; color: var(--ink);
                 transition: color .3s; }
  .nextpair a:hover .dir, .nextpair a:hover h3 { color: var(--red); }
  @media (max-width: 560px) { .nextpair { gap: 6vw; } }

  /* ---------- reference / loga ---------- */
  .grid { margin-top: 9vh; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
          gap: 3.2vw 2.6vw; max-width: 1240px; }
  @media (max-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 760px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .cell { position: relative; aspect-ratio: 4/2.4; display: flex; padding: 0 0 22px; }
  .cell .no { display: none; }
  .cell .mk { position: relative; display: block; }
  .cell .mk i, .cell .mk u { position: absolute; inset: 0; display: block; text-decoration: none;
      -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
  .cell .mk i { background-color: #A5A199; transition: background-color .4s; }
  .cell .mk u { display: none; }
  .cell:hover .mk i { background-color: var(--red); }
  .cell .cap { position: absolute; left: 0; bottom: 0; font-size: 10.5px; color: var(--ink-soft);
               opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
  .cell:hover .cap { opacity: 1; transform: none; }
  .cell.stamp { opacity: 0; transform: translateY(10px) rotate(var(--rot,0deg)); transition: opacity .7s ease, transform .8s ease; }
  .cell.wide { grid-column: span 2; }
  @media (max-width: 900px) { .cell.wide { grid-column: span 2; } }
  .cell.stamp.in { opacity: 1; transform: rotate(var(--rot,0deg)); }

  /* ---------- cena ---------- */
  .rates { margin-top: 7vh; max-width: 720px; border-top: 1px solid var(--ink); }
  .rate { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: baseline;
          padding-block: 18px; border-bottom: 1px solid var(--rule); }
  .rate .what { font-size: 17px; }
  .rate .what small { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
  .rate .how { font-size: 19px; white-space: nowrap; }
  .rate:hover .how { color: var(--red); }
  .rates-note { margin-top: 22px; font-size: 13px; color: var(--ink-soft); max-width: 40em; }

  .cta-link { display: inline-block; margin-top: 44px; font-size: 17px; text-decoration: none;
              border-bottom: 1px solid var(--red); padding-bottom: 4px; transition: color .3s; }
  .cta-link:hover { color: var(--red); }

  footer { border-top: 1.5px solid var(--ink); padding: 30px var(--g) 50px; }
  .foot-in { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between;
             gap: 20px; flex-wrap: wrap; align-items: center; }
  .foot-in .logo { width: 118px; height: 25px; background-color: var(--ink-soft); }
  .foot-legal { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
  .foot-legal p + p { margin-top: 2px; }
  .foot-in .lab a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
  .foot-in .lab a:hover { color: var(--red); border-color: var(--red); }
  @media (max-width: 760px) { .foot-in { flex-direction: column; align-items: flex-start; gap: 16px; } }

  /* ================= podstránky (formy spolupráce) =================
     Používají jen soubory strategicka-diagnostika / kontinualni-komunikace /
     interni-komunikace. Homepage žádnou z těchto tříd nemá. */

  nav a.here { color: var(--ink); border-color: var(--rule); }

  /* ---------- 01 opener podstránky ---------- */
  .popener { padding-block: 8vh 12vh; }
  .popener .in { display: grid; grid-template-columns: minmax(220px, 30%) 1fr;
                 gap: 5vw; align-items: end; }
  .popener .mat { width: 100%; aspect-ratio: 1/1; position: relative; opacity: .8; }
  .popener h1 { font-weight: 300; font-size: clamp(30px, 5vw, 68px); line-height: 1.06;
                letter-spacing: -0.02em; text-transform: lowercase; max-width: 12em; }
  .popener .matcap { display: block; margin-top: 12px; font-size: 11px;
                     letter-spacing: .06em; color: var(--ink-soft); }
  .popener .one { margin-top: 26px; max-width: 34em; color: var(--ink-mid); font-size: 18px; }
  .back { display: inline-block; font-size: 13px; color: var(--ink-soft);
          text-decoration: none; margin-bottom: 5vh; }
  .back:hover { color: var(--red); }
  @media (max-width: 860px) {
    .popener .in { grid-template-columns: 1fr; gap: 4vh; align-items: start; }
    .popener .mat { width: 140px; }
  }

  /* ---------- číslované kroky ---------- */
  .steps { margin-top: 8vh; max-width: 62em; border-top: 1px solid var(--ink); }
  .step { display: grid; grid-template-columns: 64px 1fr; gap: 3vw;
          padding-block: 4vh; border-bottom: 1px solid var(--rule); }
  .step .no { font-size: 13px; color: var(--red); padding-top: .5em; }
  .step h3 { font-weight: 300; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.14;
             text-transform: lowercase; letter-spacing: -0.012em; }
  .step p { margin-top: 12px; color: var(--ink-mid); font-size: 16px; max-width: 34em; }
  @media (max-width: 700px) { .step { grid-template-columns: 1fr; gap: 8px; } }

  /* ---------- poznámka pod sekcí ---------- */
  .aside { margin-top: 5vh; max-width: 34em; font-size: 14.5px; color: var(--ink-soft); }
  .aside a { color: var(--ink-mid); }

  /* ---------- model ceny ---------- */
  .model { margin-top: 6vh; max-width: 720px; }
  .model .eq { font-size: clamp(19px, 2.1vw, 27px); font-weight: 300; line-height: 1.5;
               text-transform: lowercase; }
  .model .eq b { font-weight: 300; color: var(--red); }

  /* ---------- zkratka verzálkami uvnitř lowercase nadpisu ---------- */
  .kap { text-transform: none; }

  /* ---------- volitelná úroveň služby ---------- */
  .optlevel { margin-top: 8vh; max-width: 46em; padding: 30px 34px;
              border: 1px solid var(--rule); background: rgba(255,255,255,.35); }
  .optlevel .lab { display: block; color: var(--red); margin-bottom: 14px; }
  .optlevel .lead { font-size: clamp(18px, 1.7vw, 22px); font-weight: 300;
                    line-height: 1.45; color: var(--ink); }
  .optlevel .lead + p { margin-top: 14px; font-size: 15.5px; color: var(--ink-mid); }
  @media (max-width: 700px) { .optlevel { padding: 24px 22px; } }

  /* ---------- otázka a odpověď ---------- */
  .qa { margin-top: 7vh; max-width: 44em; padding-left: 26px; position: relative; }
  .qa::before { content: ""; position: absolute; left: 0; top: .35em; bottom: .3em;
                width: 1px; background: var(--red); }
  .qa h3 { font-weight: 300; font-size: clamp(19px, 1.9vw, 24px);
           text-transform: lowercase; letter-spacing: -0.012em; }
  .qa p { margin-top: 12px; font-size: 16.5px; line-height: 1.55; color: var(--ink-mid); }
  .qa .ps { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); }

  /* ---------- mezinadpis nad výčtem kroků ---------- */
  .subh { margin-top: 9vh; font-weight: 300; font-size: clamp(19px, 1.9vw, 24px);
          text-transform: lowercase; letter-spacing: -0.012em; color: var(--ink);
          padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
  .subh + .steps { margin-top: 0; }

  /* ---------- výčet situací, každá na vlastní lince ---------- */
  .cases { margin-top: 7vh; max-width: 46em; list-style: none; }
  .cases li { position: relative; padding-left: 26px; padding-block: 15px;
              border-bottom: 1px solid var(--rule);
              font-size: 18px; line-height: 1.5; color: var(--ink-mid); }
  .cases li:first-child { border-top: 1px solid var(--rule); }
  .cases li::before { content: ""; position: absolute; left: 0; top: 1.45em;
                      width: 12px; height: 1px; background: var(--red); }
  @media (max-width: 700px) { .cases li { padding-left: 20px; } }

  /* ---------- prostý výčet s heslem vlevo ---------- */
  .defs { margin-top: 7vh; max-width: 62em; border-top: 1px solid var(--ink); }
  .defs > div { display: grid; grid-template-columns: 15em 1fr; gap: 3vw;
                padding-block: 26px; border-bottom: 1px solid var(--rule); }
  .defs h3 { font-weight: 300; font-size: 19px; text-transform: lowercase;
             letter-spacing: -0.01em; }
  .defs p { color: var(--ink-mid); font-size: 15.5px; max-width: 36em; }
  @media (max-width: 760px) { .defs > div { grid-template-columns: 1fr; gap: 6px; } }