/* Alena, odaleny.cz · Nocturne structure in SPOC colors */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
  --bg: #F6F6F6; --surface: #ffffff; --text: #707070;
  --blue: #4682B4; --blue-deep: #2d5a80; --blue-100: #e3edf5; --blue-200: #c7dbe9; --blue-300: #a3c4da; --blue-600: #3a6d99;
  --green: #96BF48; --green-700: #5c782d;
  --n300: #6b6b6b; --n400: #8c8c8c; --n600: #b3b3b3; --n800: #dfdfdf; --n900: #ebebeb;
  --divider: rgba(112,112,112,0.22);
  --r-md: 8px; --r-lg: 12px;
  --sh-sm: 0 1px 3px rgba(70,130,180,0.12); --sh-md: 0 4px 14px rgba(70,130,180,0.16); --sh-lg: 0 12px 32px rgba(70,130,180,0.2);
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.6; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.15; color: var(--text); margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(34px, 4.5vw, 52px); } h2 { font-size: clamp(26px, 3vw, 34px); } h3 { font-size: 20px; }
p { margin: 0 0 1em; }
a { color: var(--blue); text-decoration: none; transition: color .15s; }
a:hover { color: var(--blue-600); }
.s { color: var(--green); font-weight: 600; } .p { color: var(--blue); font-weight: 600; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin: 0 0 12px; }
.muted { color: var(--n400); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
::selection { background: var(--blue-200); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(246,246,246,.88); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.nav.scrolled { border-bottom-color: var(--divider); box-shadow: 0 2px 12px rgba(112,112,112,.08); }
.nav-inner { display: flex; align-items: center; gap: 24px; padding: 14px clamp(16px, 4vw, 32px); max-width: 1200px; margin: 0 auto; flex-wrap: wrap; }
.nav-toggle { display: none; background: none; border: 1px solid var(--divider); border-radius: var(--r-md); padding: 8px 10px; cursor: pointer; color: var(--text); font-size: 16px; line-height: 1; }
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; color: var(--text); margin-right: auto; }
.nav-brand img { width: 34px; height: 34px; }
.nav-brand small { font-weight: 400; font-size: 12px; color: var(--n400); margin-left: 2px; }
.nav a.link { color: var(--text); font-size: 14px; }
.nav a.link:hover, .nav a.link.active { color: var(--blue); }

/* buttons, Nocturne: outlined primary */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: var(--r-md); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn-primary:hover { background: var(--blue-100); color: var(--blue-600); box-shadow: var(--sh-sm); }
.btn-secondary { border-color: var(--divider); color: var(--text); background: transparent; }
.btn-secondary:hover { border-color: var(--n400); background: #fff; }
.btn-solid { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-solid:hover { background: var(--blue-600); }
.btn-light { border-color: var(--blue-300); color: var(--blue-100); background: transparent; }
.btn-light:hover { background: rgba(227,237,245,.14); color: #fff; }

/* cards */
.card { background: var(--surface); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-sm); border: 1px solid rgba(112,112,112,.08); transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.card .kicker { margin-bottom: 8px; }
.card h3 { margin-bottom: 6px; font-size: 17px; font-weight: 600; }
.card p { font-size: 14px; color: var(--n300); margin: 0; }

/* forms */
.input { min-height: 44px; padding: 8px 14px; font: inherit; font-size: 14px; color: var(--text); background: #fff; border: 1px solid var(--divider); border-radius: var(--r-md); transition: border-color .15s, box-shadow .15s; width: 100%; }
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100); outline: none; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity: 1; transform: none; } }

/* sections */
section { padding: clamp(48px, 7vw, 72px) 0; scroll-margin-top: 72px; }
.band-blue { background: radial-gradient(900px 420px at 20% 0%, #4f8fc4, var(--blue-deep) 70%); color: var(--blue-100); }
.band-blue h2 { color: #F6F6F6; }
.hr { border: 0; border-top: 1px solid var(--divider); margin: 0; }
footer { border-top: 1px solid var(--divider); padding: 28px 0 40px; font-size: 13px; color: var(--n400); }
footer a { color: var(--n400); } footer a:hover { color: var(--blue); }

/* pricing */
.price { font-size: 30px; font-weight: 500; color: var(--text); white-space: nowrap; }
.plan .kicker { min-height: 3.4em; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 .35em; }
.price small { font-size: 14px; color: var(--n400); font-weight: 400; }
.plan ul { list-style: none; margin: 14px 0 18px; padding: 0; font-size: 13.5px; color: var(--n300); display: grid; gap: 8px; }
.plan ul li::before { content: "✓ "; color: var(--green); font-weight: 600; }
.plan { display: flex; flex-direction: column; }
.plan .btn { margin-top: auto; }
.plan-hi { border: 1px solid var(--blue-300); position: relative; }
.plan-soon { border: 1px dashed var(--blue-300); background: rgba(70,130,180,.03); }
.plan-soon .price { color: var(--n300); }
.plan ul li.soon::before { content: ""; }
.plan ul li.soon { color: var(--n400); }
.q { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 999px; border: 1px solid var(--blue-300); color: var(--blue); font-size: 10px; font-weight: 600; line-height: 1; cursor: help; position: relative; }
.q:hover, .q:focus-visible { background: var(--blue); color: #fff; border-color: var(--blue); }
.q:hover::after, .q:focus-visible::after { content: attr(data-hint); position: absolute; bottom: 145%; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--text); color: #fff; font-size: 11px; font-weight: 400; padding: 5px 8px; border-radius: 6px; box-shadow: var(--sh-md); z-index: 6; }
.plan-hi .flag { position: absolute; top: -11px; left: 24px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; }

/* screenshots + lightbox */
.shot { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--divider); box-shadow: var(--sh-sm); cursor: zoom-in; background: #fff; transition: box-shadow .2s, transform .2s; }
.shot:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(45,90,128,.55); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 4vh 4vw; opacity: 0; pointer-events: none; transition: opacity .25s; cursor: zoom-out; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: var(--r-md); box-shadow: 0 24px 80px rgba(22,36,50,.45); background: #fff; transform: scale(.96); transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.lightbox.open img { transform: scale(1); }

/* video embed */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(700px 380px at 25% 10%, #4f8fc4, var(--blue-deep) 75%); box-shadow: var(--sh-md); cursor: pointer; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .play { position: absolute; inset: 0; display: grid; place-items: center; transition: background .2s; }
.video .play::before { content: ""; width: 76px; height: 76px; border-radius: 50%; background: rgba(246,246,246,.94); box-shadow: var(--sh-lg); transition: transform .2s; }
.video .play::after { content: ""; position: absolute; width: 0; height: 0; border-left: 22px solid var(--blue); border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 6px; }
.video:hover .play::before { transform: scale(1.08); }
.video .video-label { position: absolute; left: 20px; bottom: 16px; color: #e8f1f8; font-size: 13px; letter-spacing: .04em; }

/* --- demos --- */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.demo-grid { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
.demo-grid > * { min-width: 0; }
.demo-grid .invoice { min-width: 0; overflow-x: auto; }
@media (max-width: 1160px) { .invoice.paper { font-size: 9.5px; } .paper .pp-items { font-size: 9px; } .paper .pp-kv td { font-size: 9px; } }
.panel { background: var(--surface); border-radius: var(--r-lg); border: 1px solid rgba(112,112,112,.12); box-shadow: var(--sh-sm); padding: 22px; }
.panel h4 { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--n400); margin: 0 0 16px; }
.ctl { display: grid; gap: 6px; margin-bottom: 14px; }
.ctl > span { font-size: 12px; color: var(--n300); }
.check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 7px 0; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--blue); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--n400) 50%), linear-gradient(135deg, var(--n400) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }
.chipbtn { border: 1px solid var(--divider); background: transparent; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 11px; color: var(--n300); cursor: pointer; }
.chipbtn:hover { border-color: var(--blue); color: var(--blue); }
.invoice { background: #fff; border-radius: var(--r-lg); border: 1px solid rgba(112,112,112,.14); box-shadow: var(--sh-md); padding: 26px; position: relative; transition: filter .3s, opacity .3s; }
.invoice.unpaid { filter: grayscale(1); opacity: .45; }
.invoice table { width: 100%; border-collapse: collapse; font-size: 13px; }
.invoice th { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--n400); text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--divider); }
.invoice td { padding: 10px 8px; border-bottom: 1px solid rgba(112,112,112,.1); vertical-align: top; }
/* mPOHODA paper replica */
.invoice.paper { font-family: Arial, Helvetica, sans-serif; font-size: 10.5px; color: #1a1a1a; line-height: 1.4; border-radius: 2px; }
.paper .pp-top { display: flex; justify-content: space-between; gap: 10px; font-size: 8px; color: #555; margin-bottom: 8px; }
.paper .pp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12.5px; border-bottom: 1.5px solid #1a1a1a; padding-bottom: 4px; margin-bottom: 10px; }
.paper .pp-cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; }
.paper .pp-lbl { font-size: 9px; color: #555; margin-bottom: 2px; }
.paper .pp-box { border: 1px solid #1a1a1a; border-radius: 6px; padding: 8px 10px; }
.paper .pp-kv td { padding: 1px 8px 1px 0; border: 0; vertical-align: top; font-size: 10px; }
.paper .pp-kv td:first-child, .paper .pp-kv td:nth-child(3) { color: #555; white-space: nowrap; }
.paper .pp-items { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 10px; }
.paper .pp-items th { font-weight: 700; text-align: left; text-transform: none; letter-spacing: 0; color: #1a1a1a; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; padding: 3px 4px; font-size: 9px; line-height: 1.2; }
.paper .pp-items td { padding: 3px 4px; border-bottom: 0; }
.paper .pp-items tfoot td { border-top: 1px solid #1a1a1a; font-weight: 700; }
.paper .num { text-align: right; white-space: nowrap; }
.paper th.num { text-align: right; }
.paper .pp-total { display: flex; align-items: baseline; gap: 12px; border-top: 2px solid #1a1a1a; border-bottom: 2px solid #1a1a1a; padding: 5px 4px; margin-top: 8px; font-size: 12px; }
.paper .pp-total span { font-size: 8.5px; color: #555; }
.paper .pp-total b:last-child { margin-left: auto; font-size: 13px; }
.paper .pp-fine { font-size: 7.5px; color: #555; margin: 8px 0 0; }
.paper .pp-rekap { border-collapse: collapse; margin-top: 10px; font-size: 9.5px; }
.paper .pp-rekap th { text-align: left; text-transform: none; letter-spacing: 0; color: #1a1a1a; font-weight: 700; font-size: 9px; padding: 2px 10px 2px 0; border-bottom: 1px solid #999; }
.paper .pp-rekap td { padding: 2px 10px 2px 0; border: 0; }
.paper .pp-sign { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 10px; border-top: 1px solid #999; font-size: 9.5px; color: #555; }
/* Shopify order mock */
.shp-order { border: 0; border-bottom: 1px dashed var(--n600); background: transparent; font: inherit; font-weight: 600; color: var(--text); width: 11ch; padding: 0; }
.shp-order:focus { outline: none; border-bottom-color: var(--green-700); }
.shp-badge { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: #d5e8c8; color: #3d5c1e; cursor: pointer; user-select: none; }
.shp-badge input { position: absolute; opacity: 0; }
.shp-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #6f9c35; }
.shp-badge:has(input:not(:checked)) { background: #ffe8c2; color: #6e4b12; }
.shp-badge:has(input:not(:checked)) .dot { background: #e2a33b; }
.shp-sec { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--n400); margin: 16px 0 8px; }
.shp-line { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(112,112,112,.22); border-radius: var(--r-md); margin-bottom: 6px; font-size: 12.5px; color: var(--text); position: relative; line-height: 1.35; }
.shp-line small { color: var(--n400); font-size: 11px; }
.shp-line .shp-price { margin-left: auto; white-space: nowrap; font-size: 11.5px; }
.shp-thumb { width: 30px; height: 30px; border-radius: 6px; background: #edf2e2; color: #3d5c1e; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
label.shp-line { cursor: pointer; }
label.shp-line input { position: absolute; opacity: 0; }
label.shp-line:has(input:not(:checked)) { border-style: dashed; opacity: .55; }
label.shp-line:has(input:not(:checked)) .shp-state::before { content: '+ přidat'; }
label.shp-line:has(input:checked) .shp-state::before { content: '✓'; color: #3d5c1e; font-weight: 700; }
label.shp-line:hover { border-color: #6f9c35; opacity: 1; }
.shp-state { font-size: 11px; color: var(--n400); white-space: nowrap; }
.invoice .num { text-align: right; white-space: nowrap; }
.invoice .inv-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--n400); margin-bottom: 4px; }
.invoice tfoot td { font-weight: 600; color: var(--text); border-bottom: 0; border-top: 2px solid var(--divider); }
.invoice table.rekap { font-size: 11.5px; }
.invoice table.rekap th, .invoice table.rekap td { padding: 4px 8px; }
.vat-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--blue-100); color: var(--blue-600); transition: background .25s, color .25s; }
.vat-chip.zero { background: #eaf3dc; color: var(--green-700); }
.ares-badge { font-size: 10px; font-weight: 600; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; background: #eaf3dc; color: var(--green-700); vertical-align: middle; }
.oss-chip { font-size: 10px; font-weight: 600; letter-spacing: .06em; padding: 3px 8px; border-radius: 4px; background: var(--blue); color: #fff; }
.email-state { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--n300); margin-top: 14px; transition: opacity .25s; }
.email-state.off { opacity: .45; text-decoration: line-through; }
.unpaid-note { position: absolute; inset: auto 0 50% 0; text-align: center; font-size: 14px; font-weight: 500; color: var(--text); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; font-size: 12.5px; }
.kv dt { color: var(--n400); } .kv dd { margin: 0; color: var(--text); }

/* VS cutout */
#vs-cutout .vs-ch { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: clamp(26px, 4vw, 44px); transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.3,1); }
#vs-cutout .vs-ch.letter { color: var(--n600); }
#vs-cutout .vs-ch.digit { color: var(--blue); font-weight: 600; }
#vs-cutout.run .vs-ch.letter { opacity: 0; transform: translateY(22px) rotate(8deg); }
#vs-cutout.run .vs-ch.digit { transform: translateX(0); }
#vs-cutout .vs-out { opacity: 0; transform: translateY(10px); transition: opacity .5s .5s, transform .5s .5s; }
#vs-cutout.run .vs-out { opacity: 1; transform: none; }

/* calculator */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--n800); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); cursor: grab; box-shadow: var(--sh-sm); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--blue); cursor: grab; }
.big { font-size: clamp(26px, 3.4vw, 38px); font-weight: 600; color: var(--blue); line-height: 1.1; }

/* fail states */
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--divider); border-radius: var(--r-md); overflow: hidden; }
.seg button { font: inherit; font-size: 13px; padding: 8px 16px; border: 0; background: transparent; color: var(--n300); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.seg button.on { background: var(--blue); color: #fff; }
.logrow { display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--divider); border-radius: var(--r-md); font-size: 13px; }
.badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.badge.ok { background: #eaf3dc; color: var(--green-700); }
.badge.crit { background: #f7e2dd; color: #a4472f; }
.badge.fixed { background: var(--blue-100); color: var(--blue-600); }

@media (max-width: 1030px) { .demo-grid { grid-template-columns: 1fr; } }

/* toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: #4d4d4d; color: #f6f6f6; padding: 12px 20px; border-radius: var(--r-md); font-size: 14px; box-shadow: var(--sh-lg); transition: transform .3s cubic-bezier(.2,.7,.3,1); z-index: 100; }
.toast.show { transform: translateX(-50%) translateY(0); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }

@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  /* media above text on tablet + mobile */
  .hero > *:first-child, .media-first > *:first-child { order: 2; }
  .hero > *:last-child, .media-first > *:last-child { order: 1; }
  .hero { gap: 28px !important; }
  .nav-toggle { display: block; order: 2; margin-left: auto; }
  .nav .btn { order: 3; }
  .nav a.link { display: none; width: 100%; order: 4; padding: 10px 0; border-top: 1px solid var(--divider); }
  .nav-inner.open a.link { display: block; }
}
@media (max-width: 640px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  form[data-waitlist] { flex-direction: column; }
  .nav-brand small { display: none; }
}

/* connector popup */
a.p[data-connector] { font-weight: 600; border-bottom: 1px dashed var(--blue); cursor: pointer; }
a.p[data-connector]:hover { color: var(--blue-600); border-bottom-style: solid; }
.modal-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(45,90,128,.5); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 5vh 5vw; opacity: 0; pointer-events: none; transition: opacity .2s; }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal { background: var(--bg, #f6f6f6); border-radius: var(--r-lg); box-shadow: var(--sh-lg); max-width: 460px; width: 100%; padding: 28px; position: relative; transform: translateY(12px) scale(.97); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.modal-backdrop.open .modal { transform: none; }
.modal-close { position: absolute; top: 12px; right: 12px; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--n400); cursor: pointer; padding: 6px; }
.modal-close:hover { color: var(--text); }

/* POHODA plus banner */
#stw-banner-wrapper { padding: 0; position: relative; overflow: hidden; max-width: 728px; margin: 0 auto; border-radius: var(--r-lg); }
#stw-banner { width: calc(100% + 20px); margin: -10px; aspect-ratio: 1140 / 200; border: 0; display: block; pointer-events: none; }
#stw-banner-link { position: absolute; inset: 0; display: block; z-index: 2; }

/* VOP modal */
.modal-doc { max-width: 920px; padding: 0; overflow: hidden; display: flex; flex-direction: column; height: min(86vh, 980px); }
.modal-doc .doc-bar { padding: 18px 56px 16px 24px; border-bottom: 1px solid var(--divider); background: var(--surface); }
.modal-doc .doc-bar p { margin: 0; font-size: 12px; color: var(--n400); }
.modal-doc .doc-bar h3 { margin: 0 0 2px; font-size: 17px; font-weight: 600; }
.modal-doc iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }
.modal-doc .doc-foot { padding: 12px 24px; border-top: 1px solid var(--divider); background: var(--surface); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--n400); }
.modal-doc .doc-foot a.doc-open { margin-left: auto; }

/* pricing: swipeable row on mobile */
@media (max-width: 640px) {
  .plan-scroll { display: flex; grid-template-columns: none !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: 16px clamp(16px, 4vw, 32px) 14px; margin: -16px calc(-1 * clamp(16px, 4vw, 32px)) 0; scrollbar-width: none; }
  .plan-scroll::-webkit-scrollbar { display: none; }
  .plan-scroll > .plan { flex: 0 0 80%; scroll-snap-align: center; }
  .plan-scroll > .plan:hover { transform: none; }
}

/* návod: kroky jako taby */
.navod-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.navod-tabs button { font: inherit; font-size: 13px; line-height: 1.3; text-align: left; padding: 9px 14px; border: 1px solid var(--divider); border-radius: var(--r-md); background: transparent; color: var(--n300); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.navod-tabs button b { color: var(--n400); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 4px; }
.navod-tabs button:hover { border-color: var(--blue); color: var(--blue); }
.navod-tabs button:hover b { color: var(--blue); }
.navod-tabs button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.navod-tabs button.on b { color: var(--blue-100); }
.step[hidden] { display: none; }
@media (max-width: 640px) { .navod-tabs button { font-size: 12.5px; padding: 8px 11px; } }

/* návod: plovoucí rail vlevo — od tabletů nahoru */
.navod-rail { display: none; }
@media (min-width: 768px) {
  .navod-tabs[data-pos="top"], .navod-tabs[data-pos="bottom"] { display: none; }
  .navod-rail { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: fixed; top: 50%; transform: translateY(-50%); left: 0; width: 46px; padding: 8px 6px; z-index: 20; overflow: hidden; background: transparent; border-radius: 0 var(--r-md) var(--r-md) 0; transition: width .2s ease, background .2s ease, box-shadow .2s ease, opacity .25s ease, visibility .25s; }
  .navod-rail.off { opacity: 0; visibility: hidden; pointer-events: none; }
  .navod-rail:hover, .navod-rail:focus-within { width: 258px; background: var(--surface); box-shadow: 0 12px 40px rgba(22,36,50,.16); }
  .navod-rail button { display: grid; grid-template-columns: 21px 1fr; gap: 6px; align-items: baseline; border: 0; border-left: 2px solid var(--n800); border-radius: 0; background: transparent; padding: 8px 4px 8px 11px; font-size: 12.5px; line-height: 1.35; color: var(--n400); min-width: 0; white-space: nowrap; overflow: hidden; transition: border-color .15s, color .15s; }
  .navod-rail button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .navod-rail button b { margin: 0; }
  .navod-rail button span { opacity: 0; transition: opacity .18s ease; }
  .navod-rail:hover button span, .navod-rail:focus-within button span { opacity: 1; }
  .navod-rail button:hover { background: transparent; border-left-color: var(--blue-300); color: var(--blue); }
  .navod-rail button.on { background: transparent; border-left-color: var(--blue); color: var(--text); }
  .navod-rail button.on b, .navod-rail button:hover b { color: var(--blue); }
}
/* od 1400 px je v levém okraji dost místa, rail je rozbalený natrvalo */
@media (min-width: 1400px) {
  .navod-rail, .navod-rail:hover, .navod-rail:focus-within { left: calc(50% - 430px - 238px); width: 206px; padding: 0; background: transparent; box-shadow: none; }
  .navod-rail button span { opacity: 1; }
  .navod-rail button { white-space: normal; padding: 8px 4px 8px 13px; }
}