/* ── Srovnání · "Three paths" (direction B, final) ──
   Ports (21st.dev): Us vs Them Comparison 21217 (side-by-side cards, ticked rows, CTA in the recommended card),
   Pricing Plan Card 25362 (featured card: ring + straddling badge + full-width CTA), Comparison Section 26826 (muted
   alternatives vs the ticked panel), Comparison Table 26827 (copy, highlighted middle option, zebra rows), Segmented
   Control 23552 (sliding thumb with an inverted label mask) for the phone switcher.
   One grid, three cards on a subgrid: the 7 criteria share row tracks, so a criterion sits at the same height in every
   card (label at the top of the row, answer at the bottom). Every card shows its labels; from 720px up the side cards'
   labels are smaller and lighter, so the OWN Build card leads. Zebra rows run through the gaps, and pointing at /
   tapping a criterion lights it across all three cards. Rows are not focusable: each card is one <dl>, read once.
   Product family: white panels, 1px rgba(0,0,0,.08), radius 16 (cards) and 10 (path panel), 1.5 line icons, mono
   captions like the labelled nodes in Produkt and Napojení. Ink = the recommended path and its ✓; yellow only on the
   badge and the CTA.
   Status icons are aria-hidden; the cell text (or "Ano" for ✓) carries the meaning. Mapping rule, keep it when copy changes:
     ink ✓ disc   = only where the copy itself is ✓ (OWN Build rows 1, 4, 5, 6, as in the old table)
     half disc    = the answer depends: "Záleží na …", "Podle …", "Obvykle …"
     person ring  = the work is on you: "Na vás", "Pokud si je postavíte", "Vývojová práce"
     no icon      = a stated value ("Do 24 h", "Do 14 dní", "Součást dodávky")
   Never add a third, negative-looking state. */
#srovnani{--sv-k:var(--black);--sv-l:rgba(0,0,0,.08);--sv-ic:#76756f;--sv-hl:#ebeae3;--sv-zb:rgba(20,20,20,.02);--sv-lift:18px;--sv-px:24px;--sv-gap:20px;--sv-pp:16px;--sv-nd:30px;--sv-ph:76px;--sv-pt:12px}
#srovnani .sv-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ── grid: [lift] [head] [7 criteria] [foot] ── */
#srovnani .sv-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr);grid-template-rows:var(--sv-lift) auto repeat(7,auto) auto;column-gap:var(--sv-gap);max-width:1120px;margin:var(--head-gap) auto 0}

/* ── cards: the side cards recede (translucent, flat); OWN Build is the only white, raised surface ── */
#srovnani .sv-card{position:relative;z-index:1;grid-row:2/10;display:grid;grid-template-rows:subgrid;min-width:0;margin:0;background:rgba(255,255,255,.35);border:1px solid var(--sv-l);border-radius:16px;--o:0s}
#srovnani .sv-c1{grid-column:1;--o:.12s}
#srovnani .sv-c3{grid-column:3;--o:.2s}
#srovnani .sv-own{grid-column:2;grid-row:1/-1;z-index:2;background:#fff;border-color:var(--sv-k);box-shadow:0 1px 2px rgba(0,0,0,.05),0 24px 48px -28px rgba(0,0,0,.38)}

/* header: any spare height (when sublines wrap differently) goes between the diagram and the name, never under the subline */
#srovnani .sv-top{grid-row:1;display:flex;flex-direction:column;min-width:0;padding:22px var(--sv-px) 20px}
#srovnani .sv-own .sv-top{grid-row:2}
#srovnani .sv-path{margin-bottom:auto}
#srovnani .sv-name{margin-top:20px;font-weight:500;font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
#srovnani .sv-sub{margin-top:6px;font-size:14px;line-height:1.45;color:var(--muted);text-wrap:balance}
/* below 1280 every subline runs to two balanced lines, so the three headers end level */
@media (max-width:1279px){#srovnani .sv-sub{max-width:25ch}}
/* badge straddles the featured card's top edge (Pricing Plan Card 25362), on the site's .mono token */
#srovnani .sv-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:7px 12px;border-radius:999px;background:var(--yellow);color:var(--black);font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

/* ── path diagram: you → … with mono captions (decorative; the words come from each card's own name and subline) ── */
#srovnani .sv-path{position:relative;isolation:isolate;display:flex;align-items:flex-start;justify-content:space-between;flex:none;height:var(--sv-ph);padding:var(--sv-pt) var(--sv-pp) 0;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--sv-l)}
#srovnani .sv-nd{position:relative;z-index:2;flex:none;display:grid;place-items:center;width:var(--sv-nd);height:var(--sv-nd);border-radius:8px;background:#fff;border:1px solid var(--sv-l);box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 14px -8px rgba(0,0,0,.22)}
#srovnani .sv-nd svg{width:16px;height:16px;fill:none;stroke:var(--sv-ic);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#srovnani .sv-own .sv-nd svg{stroke:var(--sv-k)}
#srovnani .sv-own .sv-na{background:var(--sv-k);border-color:var(--sv-k)}
#srovnani .sv-own .sv-na svg{width:17px;height:17px;stroke:none;fill:#fff}
#srovnani .sv-na::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--sv-k);opacity:0;pointer-events:none}
#srovnani .sv-ln{position:absolute;top:calc(var(--sv-pt) + var(--sv-nd)/2);z-index:1;height:1px;margin-top:-.5px;background:rgba(0,0,0,.2);transform-origin:0 50%}
#srovnani .sv-la{left:calc(var(--sv-pp) + var(--sv-nd)/2);right:50%}
#srovnani .sv-lb{left:50%;right:calc(var(--sv-pp) + var(--sv-nd)/2)}
#srovnani .sv-own .sv-ln{background:rgba(11,11,11,.42)}
#srovnani .sv-cap{position:absolute;left:var(--sv-pp);right:var(--sv-pp);top:calc(var(--sv-pt) + var(--sv-nd) + 9px);height:12px;font:500 10px/12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6b6a64;white-space:nowrap;pointer-events:none}
#srovnani .sv-cap span{position:absolute;top:0;min-width:var(--sv-nd);text-align:center}
/* edge captions are centred on their node and, when longer, grow inwards from 6px inside the panel edge */
#srovnani .sv-cap span:nth-child(1),#srovnani .sv-cap span:nth-child(3){min-width:calc(var(--sv-nd) + 2*var(--sv-pp) - 12px)}
#srovnani .sv-cap span:nth-child(1){left:calc(6px - var(--sv-pp))}
#srovnani .sv-cap span:nth-child(2){left:50%;transform:translateX(-50%)}
#srovnani .sv-cap span:nth-child(3){right:calc(6px - var(--sv-pp))}
#srovnani .sv-own .sv-cap{color:#4a4a46}
/* the agent pass on the OWN Build path (napojeni rail: the mover slides by translateX only) */
#srovnani .sv-rail{position:absolute;left:calc(var(--sv-pp) + var(--sv-nd)/2);right:calc(var(--sv-pp) + var(--sv-nd)/2);top:calc(var(--sv-pt) + var(--sv-nd)/2);z-index:1;height:10px;margin-top:-5px;overflow:hidden;pointer-events:none}
#srovnani .sv-mv{position:absolute;inset:0;opacity:0;transform:translateX(-100%)}
#srovnani .sv-mv::before{content:"";position:absolute;right:2.5px;top:4.25px;width:40px;height:1.5px;border-radius:1px;background:linear-gradient(90deg,rgba(11,11,11,0),rgba(11,11,11,.5))}
#srovnani .sv-mv::after{content:"";position:absolute;right:-2.5px;top:2.5px;width:5px;height:5px;border-radius:50%;background:var(--sv-k);box-shadow:0 0 0 1.5px #fff}

/* ── criteria rows ── */
#srovnani .sv-list{grid-row:2/span 7;display:grid;grid-template-rows:subgrid;margin:0}
#srovnani .sv-own .sv-list{grid-row:3/span 7}
#srovnani .sv-row{--sv-i:0;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:5px;padding:12px var(--sv-px) 13px;border-top:1px solid rgba(0,0,0,.06);transition:background-color .2s ease}
#srovnani .sv-row:nth-child(2){--sv-i:1}
#srovnani .sv-row:nth-child(3){--sv-i:2}
#srovnani .sv-row:nth-child(4){--sv-i:3}
#srovnani .sv-row:nth-child(5){--sv-i:4}
#srovnani .sv-row:nth-child(6){--sv-i:5}
#srovnani .sv-row:nth-child(7){--sv-i:6}
#srovnani .sv-row:last-child{padding-bottom:21px}
#srovnani .sv-c1 .sv-row:last-child,#srovnani .sv-c3 .sv-row:last-child{border-radius:0 0 15px 15px}
#srovnani .sv-row dt{font-size:13px;line-height:1.35;color:var(--label);transition:color .2s ease}
#srovnani .sv-row dd{display:flex;align-items:center;gap:10px;min-height:20px;margin:0;font-size:15px;line-height:1.35;color:#4f4e4a}
#srovnani .sv-own .sv-row dt{color:#4a4a46}
#srovnani .sv-own .sv-row dd{color:var(--ink);font-weight:500}
/* zebra on criteria 2, 4, 6 and the lit band; c1/c3 rows bridge the gap to the OWN card (which sits above the bridge) */
#srovnani .sv-row:nth-child(even){background-color:var(--sv-zb)}
#srovnani .sv-c1 .sv-row::after,#srovnani .sv-c3 .sv-row::after{content:"";position:absolute;top:-1px;bottom:0;width:calc(var(--sv-gap) + 2px);background-color:transparent;transition:background-color .2s ease}
#srovnani .sv-c1 .sv-row::after{left:100%}
#srovnani .sv-c3 .sv-row::after{right:100%}
#srovnani .sv-c1 .sv-row:nth-child(even)::after,#srovnani .sv-c3 .sv-row:nth-child(even)::after{background-color:var(--sv-zb)}
#srovnani .sv-row.sv-on,#srovnani .sv-c1 .sv-row.sv-on::after,#srovnani .sv-c3 .sv-row.sv-on::after{background-color:var(--sv-hl)}
#srovnani .sv-row.sv-on dt{color:var(--ink)}

/* status icons (the ✓ glyph stays in the markup of the four ✓ cells, as in the old table; it is hidden, the SVG draws it) */
#srovnani .sv-st{flex:none;position:relative;display:block;width:20px;height:20px;border-radius:50%;font-size:0;line-height:0;font-style:normal;color:var(--sv-ic)}
#srovnani .sv-st svg{position:absolute;inset:0;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#srovnani .sv-y{background:var(--sv-k);color:#fff}
#srovnani .sv-y svg{stroke-width:1.9;stroke-dasharray:1;stroke-dashoffset:0}

/* ── CTA ── */
#srovnani .sv-foot{grid-row:10;padding:18px var(--sv-px) 24px;border-top:1px solid rgba(0,0,0,.06)}
#srovnani .sv-cta{height:48px}
#srovnani .sv-arr{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease-out)}
#srovnani .sv-cta:hover .sv-arr{transform:translateX(2px)}

/* ── phone switcher (Segmented Control 23552): only in the swipe layout ── */
#srovnani .sv-seg{display:none}
#srovnani .sv-seg-in{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,380px);padding:3px;border-radius:999px;background:#f0efec;box-shadow:inset 0 0 0 1px var(--sv-l),inset 0 1px 2px rgba(0,0,0,.05)}
#srovnani .sv-seg-l,#srovnani .sv-seg-mk span{padding:8px 4px;text-align:center;font:500 13px/18px var(--font);letter-spacing:-.005em;white-space:nowrap}
#srovnani .sv-seg-l{color:var(--muted)}
#srovnani .sv-seg-th{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);overflow:hidden;border-radius:999px;background:var(--sv-k);box-shadow:0 1px 2px rgba(0,0,0,.25);transform:translateX(calc(var(--p,.5)*200%));pointer-events:none}
#srovnani .sv-seg-mk{position:absolute;top:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(3,1fr);width:300%;transform:translateX(calc(var(--p,.5)*-66.6667%))}
#srovnani .sv-seg-mk span{color:#fff}
#srovnani .sv-seg-hit{position:absolute;inset:3px;display:grid;grid-template-columns:repeat(3,1fr)}
#srovnani .sv-seg-hit button{margin:0;padding:0;border:0;border-radius:999px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ── reveal on scroll (only once JS has marked the section; no JS = everything visible). The hidden state is instant;
   the transitions live on .sv-in, so nothing fades out on load. Inner motion is spent on OWN Build only: its path
   draws, its nodes arrive, its ✓ discs draw top to bottom; the side cards simply arrive whole. ── */
#srovnani.sv-js:not(.sv-in) .sv-card{opacity:0;transform:translateY(24px)}
#srovnani.sv-js:not(.sv-in) .sv-own .sv-nd{opacity:0;transform:scale(.82)}
#srovnani.sv-js:not(.sv-in) .sv-own .sv-ln{transform:scaleX(0)}
#srovnani.sv-js:not(.sv-in) .sv-own .sv-cap{opacity:0}
#srovnani.sv-js:not(.sv-in) .sv-y{opacity:0;transform:scale(.55)}
#srovnani.sv-js:not(.sv-in) .sv-y svg{stroke-dashoffset:1}
#srovnani.sv-js.sv-in .sv-card{transition:opacity .7s var(--ease-out) var(--o),transform .9s var(--ease-out) var(--o)}
#srovnani.sv-js.sv-in .sv-own .sv-nd{transition:opacity .4s ease,transform .55s var(--ease-out)}
#srovnani.sv-js.sv-in .sv-own .sv-nd:nth-last-child(3){transition-delay:.3s}
#srovnani.sv-js.sv-in .sv-own .sv-nd:nth-last-child(2){transition-delay:.62s}
#srovnani.sv-js.sv-in .sv-own .sv-nd:nth-last-child(1){transition-delay:.94s}
#srovnani.sv-js.sv-in .sv-own .sv-ln{transition:transform .45s cubic-bezier(.4,0,.2,1)}
#srovnani.sv-js.sv-in .sv-own .sv-la{transition-delay:.4s}
#srovnani.sv-js.sv-in .sv-own .sv-lb{transition-delay:.72s}
#srovnani.sv-js.sv-in .sv-own .sv-cap{transition:opacity .5s ease .9s}
#srovnani.sv-js.sv-in .sv-y{transition:opacity .3s ease,transform .5s var(--ease-out);transition-delay:calc(.55s + var(--sv-i) * 90ms)}
#srovnani.sv-js.sv-in .sv-y svg{transition:stroke-dashoffset .4s var(--ease-out) calc(.7s + var(--sv-i) * 90ms)}
/* one agent pass (3.2s, under WCAG 2.2.2's 5s) each time the section comes into view; it ends invisible, at rest.
   .sv-live follows visibility (IntersectionObserver), so nothing runs off screen and leaving resets it. */
#srovnani.sv-in.sv-live .sv-mv{animation:sv-run 3.2s cubic-bezier(.45,0,.3,1) 1.3s 1 both}
#srovnani.sv-in.sv-live .sv-na::after{animation:sv-ping 3.2s ease-out 1.3s 1 both}
@keyframes sv-run{0%{opacity:0;transform:translateX(-100%)}8%{opacity:1}72%{opacity:1;transform:translateX(0)}80%,100%{opacity:0;transform:translateX(0)}}
@keyframes sv-ping{0%,68%{opacity:0;transform:scale(1)}72%{opacity:.55;transform:scale(1)}96%,100%{opacity:0;transform:scale(1.55)}}

/* ── narrower desktop ── */
@media (max-width:1100px){
  #srovnani{--sv-px:20px;--sv-gap:16px}
}
/* ── 720–900: still three cards side by side, tightened ── */
@media (min-width:720px) and (max-width:900px){
  #srovnani{--sv-px:14px;--sv-gap:10px;--sv-pp:10px}
  #srovnani .sv-top{padding:20px var(--sv-px) 16px}
  #srovnani .sv-name{margin-top:16px;font-size:19px}
  #srovnani .sv-row dd{font-size:14px;gap:8px}
  #srovnani .sv-cap{font-size:9.5px;letter-spacing:.06em}
  #srovnani .sv-badge{font-size:10.5px;padding:6px 10px}
  #srovnani .sv-foot{padding:16px var(--sv-px) 18px}
  #srovnani .sv-cta{height:40px;padding:0 16px;font-size:14px}
}
/* ── from 720px (three cards side by side): every card names its criteria, the side cards in a smaller, lighter
   label (--label on the translucent cards ≥ 5:1, also on the lit band) so the questions are always there but the
   OWN Build card still leads ── */
@media (min-width:720px){
  #srovnani .sv-c1 .sv-row dt,#srovnani .sv-c3 .sv-row dt{font-size:12px;line-height:1.35}
}

/* ── ≤719: swipeable snap cards, opening on OWN Build, with a sticky segmented switcher that names the card you read ── */
@media (max-width:719px){
  #srovnani{--sv-nd:26px;--sv-ph:66px;--sv-pt:10px}
  #srovnani.sv-ready .sv-seg{position:sticky;top:64px;z-index:5;display:flex;justify-content:center;margin:24px calc(-1*var(--gutter)) 0;padding:8px var(--gutter) 10px;background:linear-gradient(var(--ground) 78%,rgba(248,247,245,0))}
  #srovnani .sv-grid{--cw:min(84%,400px);grid-template-columns:repeat(3,var(--cw));max-width:none;margin:28px calc(-1*var(--gutter)) 0;padding:22px var(--gutter) 28px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  #srovnani .sv-grid::-webkit-scrollbar{display:none}
  #srovnani .sv-grid:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
  #srovnani.sv-ready .sv-grid{margin-top:10px}
  #srovnani{--sv-gap:12px}
  #srovnani .sv-card{scroll-snap-align:center}
  #srovnani .sv-own{box-shadow:0 1px 2px rgba(0,0,0,.05),0 16px 32px -20px rgba(0,0,0,.34)}
  #srovnani .sv-name{margin-top:16px;font-size:19px}
  #srovnani .sv-top{padding:20px var(--sv-px) 16px}
  #srovnani .sv-nd{border-radius:7px}
  #srovnani .sv-nd svg{width:15px;height:15px}
  #srovnani .sv-badge{font-size:10.5px;padding:6px 11px}
}
@media (max-width:600px){
  #srovnani{--sv-px:18px}
  #srovnani .sv-seg-in{width:100%}
  #srovnani .sv-sub{font-size:13.5px}
  #srovnani .sv-row dd{font-size:14.5px}
}

/* no subgrid (old engines): cards still work, only the cross-card bridges would misalign */
@supports not (grid-template-rows:subgrid){#srovnani .sv-row::after{display:none}}

@media (prefers-reduced-motion:reduce){
  #srovnani .sv-card,#srovnani .sv-nd,#srovnani .sv-ln,#srovnani .sv-cap,#srovnani .sv-st,#srovnani .sv-y svg,#srovnani .sv-row,#srovnani .sv-row::after,#srovnani .sv-row dt,#srovnani .sv-arr,#srovnani .sv-seg-th,#srovnani .sv-seg-mk{transition:none!important}
  #srovnani.sv-js .sv-card,#srovnani.sv-js .sv-nd,#srovnani.sv-js .sv-cap,#srovnani.sv-js .sv-st{opacity:1!important;transform:none!important}
  #srovnani.sv-js .sv-ln{transform:none!important}
  #srovnani.sv-js .sv-y svg{stroke-dashoffset:0!important}
  #srovnani .sv-mv,#srovnani .sv-na::after{animation:none!important;opacity:0}
}

/* Řádek pod kartami: pozvánka pro agentury (31. 10. 2026) */
.cmp-foot{margin:30px auto 0;max-width:54ch;text-align:center;font-size:15px;color:var(--label)}
@media (max-width:600px){.cmp-foot{font-size:14px;margin-top:22px}}