/* Kilowatka · 3 495 → 1. One night map, one camera, native scroll.
   Tokens from concepts/CONCEPTS.md §5. Body colours are set explicitly: hosts may wrap the page
   in a reset with a light body. */
:root {
  --night: #07080b; --surface: #0d0f14; --raised: #151821; --line: #242833;
  --ink: #f5f6f8; --ink-2: #b3b8c3; --ink-3: #8c92a0;
  --violet: #6e2be8; --violet-hi: #a585ff; --violet-light: #c7b5ff; --amber: #f3b54a;
  --t0: #c7b5ff; --t1: #a585ff; --t2: #8f7ae0; --t3: #c9ccd4; --t4: #9da1ab; --t5: #80848f; --tu: #5d616c;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --gut: 16px; --beat: 45svh; --top: 64px; --edge: var(--gut); /* --edge: the one content container (max 1440 px stage), redefined from 1024 px */
  color-scheme: dark;
}
@media (min-width: 1024px) { :root { --gut: 56px; --beat: 85vh; --top: 15vh; } }
*, *::before, *::after { box-sizing: border-box; }
html:root { background: var(--night); color: var(--ink); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; scroll-padding-bottom: 48px; }
html body {
  margin: 0; background: var(--night); color: var(--ink);
  font: 400 17px/1.45 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
html body h1, html body h2, html body h3, html body .brand, html body .brand b, html body .top, html body main, html body .sticky,
html body .big, html body .opts dd, html body .bars b, html body .card .cap b, html body .verdict, html body .plan h3:not(.x) { color: var(--ink); font-family: var(--sans); }
html body .plan.p h3 { color: var(--violet-light); }
html body .sticky { color: #fff; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the scene (fixed, behind everything) ---------- */
.scene { position: fixed; left: 0; top: 0; width: 100%; height: 100lvh; z-index: 0; pointer-events: none; overflow: clip; background: var(--night); }
.poster {
  position: absolute; left: 50%; top: 64%; width: calc(1.6 * (100vw - 8px)); height: auto; max-width: none;
  transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: no-preference) {
.poster {transition: opacity .5s;}}
@media (min-width: 1024px) { .poster { left: 66.5%; top: 55%; width: calc(1.6 * min(56vw, 110vh)); } }
.gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.gl {transition: opacity .5s;}}
.gl-on .gl { opacity: 1; }
.gl-on .poster { opacity: 0; }
.marks { position: absolute; inset: 0; }
.scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,8,11,calc(.94 * var(--st, 1))) 0, rgba(7,8,11,calc(.8 * var(--st, 1))) 20svh, rgba(7,8,11,0) 38svh),
              linear-gradient(0deg, rgba(7,8,11,.78) 0, rgba(7,8,11,0) 16svh); }
@media (min-width: 1024px) {
  .scrim { background: linear-gradient(90deg, rgba(7,8,11,.94) 0, rgba(7,8,11,.8) 26vw, rgba(7,8,11,0) 40vw),
                       linear-gradient(0deg, rgba(7,8,11,.6) 0, rgba(7,8,11,0) 20vh); }
}

/* map labels, placed by app.js (transform only) */
.lb { position: absolute; left: 0; top: 0; white-space: nowrap; font: 500 12px/1 var(--sans); color: var(--ink-2); opacity: 0;
  background: rgba(7,8,11,.86); padding: 2px 5px 3px; border-radius: 5px; }
.lb::before { content: ""; position: absolute; left: -9px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 2px var(--night); }
.lb.city { font: 600 12px/1 var(--sans); color: var(--ink-2); }
.lb.city::before { display: none; }
.lb.major { font-weight: 650; font-size: 13px; color: var(--ink); }
.lb.end::before { background: var(--violet-light); }
.lb.region { font: 600 11px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-2); background: none; }
.lb.region::before, .lb.water::before { display: none; }
.lb.water { font: italic 500 11px/1 var(--sans); color: #a9b8e0; }
.lb.small { font-size: 11px; color: var(--ink-2); }
.lb.small::before { width: 3px; height: 3px; top: 4px; left: -7px; background: var(--ink-3); }
.lb.peak { font-size: 11px; color: var(--ink-2); }
.lb.peak::before { content: "▲"; width: auto; height: auto; background: none; box-shadow: none; left: -12px; top: 0; font-size: 8px; color: var(--ink-3); }
.sh { position: absolute; left: 0; top: 0; opacity: 0; font: 700 11px/1 var(--sans); letter-spacing: .01em; padding: 4px 6px 3px; border-radius: 4px;
  color: #fff; background: #01498e; box-shadow: 0 0 0 1.5px #fff inset, 0 0 0 1px var(--night); }
/* Czech number plates (vyhláška 294/2015 Sb., IS 16a/16b): motorway red with the digits only, class I and II blue */
.sh.d { background: #cd151d; }

/* ---------- navbar: fixed, hides on scroll down, returns on scroll up, always shown at the top ---------- */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 8; display: flex; align-items: center; gap: 10px;
  height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--gut) 0; background: rgba(7,8,11,.92); border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) {

/* ---------- navbar: fixed, hides on scroll down, returns on scroll up, always shown at the top ---------- */
.top {transition: transform .22s ease-out;}}
.nav-hide .top { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.brand .mark { width: 28px; height: 28px; }
.brand b { font-weight: 650; font-size: 17px; letter-spacing: -.01em; }
.links { margin-left: auto; display: none; gap: 28px; font-size: 14px; }
.links a, .menu nav a { color: var(--ink-2); text-decoration: none; }
.links a:hover, .menu nav a:hover { color: var(--ink); }
.navcta { margin-left: auto; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 9px; background: var(--violet); color: #fff; font-size: 14px; font-weight: 650; text-decoration: none; }
html body .navcta { color: #fff; }
.menu summary { list-style: none; display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 4px; font: 500 13px/1 var(--mono); color: var(--ink); cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; padding: 4px var(--gut) 12px; background: #0d0f14; border-bottom: 1px solid var(--line); }
.menu nav a { display: flex; align-items: center; min-height: 48px; font-size: 17px; color: var(--ink); border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .top { height: calc(60px + env(safe-area-inset-top)); } .links { display: flex; } .navcta { margin-left: 24px; } .menu { display: none; } }
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }
[id] { scroll-margin-top: calc(64px + env(safe-area-inset-top)); }

main { position: relative; z-index: 1; }

/* ---------- hero: complete at rest ---------- */
.hero { position: relative; min-height: 100svh; padding: 80px var(--gut) 32px; }
@media (min-width: 1024px) { .hero { display: flex; flex-direction: column; justify-content: center; padding-top: 96px; padding-bottom: 12vh; } .hero > * { max-width: 620px; }
  .hero h1 { max-width: none; font-size: clamp(48px, 5vw, 80px); } }
.eyebrow { font: 500 12.5px/1.3 var(--mono); letter-spacing: .03em; color: var(--ink-2); margin-bottom: 14px; }
h1 { font-size: clamp(40px, 11.2vw, 92px); line-height: .98; letter-spacing: -.035em; font-weight: 700; max-width: 11.5ch; text-wrap: balance; }
h1 span { display: block; color: var(--violet-light); }
.lead { margin-top: 16px; font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-2); max-width: 30ch; }
.cta { display: flex; align-items: center; gap: 22px; margin-top: 24px; }
.badge { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 18px 0 13px; border-radius: 10px; background: #000; color: #fff;
  border: 1px solid #a6a6a6; text-decoration: none; }
.badge .g { width: 24px; height: 24px; }
.badge span { display: flex; flex-direction: column; font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.02; }
.badge small { font-size: 10.5px; font-weight: 500; letter-spacing: .01em; }
.badge:focus-visible, .sticky:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--violet-hi); outline-offset: 3px; }
.qr { display: none; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); }
.qr svg { width: 64px; height: 64px; border-radius: 6px; }
@media (min-width: 1024px) { .qr { display: inline-flex; } }
.stat { margin-top: 18px; font: 500 12.5px/1.4 var(--mono); color: var(--ink-2); }
.stat b { color: var(--ink); font-weight: 600; }

/* ---------- beats: static copy, pinned with CSS sticky ---------- */
.beat { position: relative; min-height: var(--beat); padding: 0 var(--gut); }
.beat::after { content: ""; display: block; height: 8svh; } /* reading room: the block stays pinned while this scrolls (short: the story moves fast) */
@media (min-width: 1024px) { .beat::after { display: none; } }
.block { position: sticky; top: var(--top); max-width: 440px; padding-bottom: 20px; }
/* text never sits on raw scenery: a soft night backing behind the copy (not behind the ladder, where the markers land) */
.copy, .ladder + .stamp, .hcopy { position: relative; }
.copy::before, .ladder + .stamp::before, .hcopy::before { content: ""; position: absolute; z-index: -1; inset: -40px -90px -40px calc(-1 * var(--gut) - 20px); pointer-events: none;
  background: rgba(7,8,11,.88);
  -webkit-mask: linear-gradient(90deg, #000 60%, transparent), linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-composite: source-in; mask: linear-gradient(90deg, #000 60%, transparent), linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-composite: intersect; }
@media (max-width: 1023px) { .copy::before, .ladder + .stamp::before, .hcopy::before { inset: -40px calc(-1 * var(--gut)); background: rgba(7,8,11,.8);
  -webkit-mask: linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask: linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); } }
.nw { white-space: nowrap; }
/* the ladder's column heads, and the thread from the charger's light to its card */
.lhead { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; column-gap: 10px; margin: 14px 0 0; padding: 0 10px 6px 8px; font: 500 10.5px/1.2 var(--mono); color: var(--ink-3); letter-spacing: .02em; }
.lhead + .ladder { margin-top: 0; }
@media (min-width: 1024px) { .lhead { width: min(640px, 46vw); grid-template-columns: 54px minmax(0, 1fr) auto; } }
.thread { position: absolute; left: 0; top: 0; height: 1px; transform-origin: 0 50%; opacity: 0; background: linear-gradient(90deg, rgba(199,181,255,.95), rgba(199,181,255,.5)); }
.tag { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 500 12.5px/1.2 var(--mono); color: var(--ink-2); margin-bottom: 10px; }
.pre { font: 700 10.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--violet-light);
  border: 1px solid rgba(165,133,255,.5); border-radius: 999px; padding: 4px 8px 3px; }
.step { color: var(--ink); background: rgba(110,43,232,.28); border-radius: 6px; padding: 3px 7px; font-weight: 600; }
h2 { font-size: clamp(32px, 8.6vw, 60px); line-height: 1; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.say { margin-top: 10px; font-size: clamp(16.5px, 1.35vw, 19px); color: var(--ink-2); max-width: 34ch; }
.say b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.stamp { margin-top: 10px; font: 500 11px/1.45 var(--mono); color: #a3a9b5; letter-spacing: .005em; max-width: 46ch; }
.gap { height: 10svh; }
/* keyboard: a focused link is never under the sticky bar, and an open source list unpins its block so it can scroll */
@media (max-width: 1023px) { html:root { scroll-padding-bottom: calc(74px + env(safe-area-inset-bottom)); } }
.block:has(.srcs[open]) { position: relative; top: auto; }
@media (max-width: 1023px) and (max-height: 760px) { .gap { height: 7svh; } } /* short phones: the whole card stays (reflow); its end is read as the block unpins */
@media (max-width: 1023px) {
  .card { padding: 13px 15px; margin-top: 8px; }
  .big { font-size: 34px; }
  .opts { margin-top: 6px; }
  .opts div { padding: 4px 0; font-size: 13px; }
  .rec { margin-top: 8px; }
  .src { margin-top: 6px; }
  .bars li { padding: 5px 0; }
  .beat .say { font-size: 16px; }
}
@media (min-width: 1024px) { .gap { height: 22px; } }

/* the price ladder: the legend, the list and the landing strip for the flying markers */
.ladder { list-style: none; padding: 0; margin-top: 14px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ladder li { border-bottom: 1px solid rgba(36,40,51,.7); }
.ladder li { display: grid; grid-template-columns: 50px minmax(0, 1fr) 28px; grid-template-areas: "p v n" "p d n"; column-gap: 10px; align-items: center; padding: 6px 10px 6px 8px; min-height: 46px; }
.ladder .p { grid-area: p; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.ladder .v { grid-area: v; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); text-decoration: none; position: relative; }
.ladder a.v::after { content: ""; position: absolute; inset: -13px -6px; }
.srcs a::after { content: ""; position: absolute; inset: -1.5px -3px; }
.src a::after, footer a::after { content: ""; position: absolute; inset: -5px -3px; } /* never overlap the next line's link */
.card .src { line-height: 2; }
footer.foot a { display: inline-block; padding: 10px 0; line-height: 24px; }
footer.foot p { line-height: 1.8; }
footer.foot .attr a { display: inline; padding: 0; }
.src a, footer a, .srcs a { position: relative; }
.brand { padding: 8px 0; }
html:not(.gl-on) .ladder, html:not(.gl-on) .lhead, html:not(.gl-on) .ladder + .stamp, html:not(.gl-on) .srcs { background: rgba(7,8,11,.94); }
html:not(.gl-on) .ladder { border-radius: 0 0 12px 12px; }
/* a real tab stop shows its block; a heading focused by a nav jump (tabindex -1) does not pin it */
.ladder:focus-within li, .block:has(:focus:not([tabindex="-1"])), .block:has(:focus:not([tabindex="-1"])) .lhead, .block:has(:focus:not([tabindex="-1"])) .srcs, .block:has(:focus:not([tabindex="-1"])) .ladder + .stamp { opacity: 1 !important; }
/* without a live scene (no WebGL or a lost context) the ladder and copy are plain text: nothing waits for markers */
html:not(.gl-on) .marks, html:not(.gl-on) .counter { visibility: hidden; }
html:not(.gl-on) .ladder li, html:not(.gl-on) .lhead, html:not(.gl-on) .ladder + .stamp, html:not(.gl-on) .srcs { opacity: 1 !important; }
.srcs { position: relative; display: flow-root; margin-top: 8px; font: 500 11px/1.5 var(--mono); color: #a3a9b5; }
.srcs[open] { background: rgba(7,8,11,.94); border-radius: 10px; padding: 10px 12px; margin-left: -12px; margin-right: -12px; }
.srcs summary { position: relative; z-index: 1; cursor: pointer; color: var(--violet-hi); width: max-content; padding: 14px 0; margin: -14px 0; min-height: 44px; box-sizing: border-box; }
.srcs ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; }
.srcs a { color: var(--violet-hi); }
.ladder a.v:hover { color: var(--ink); text-decoration: underline; }
.ladder .d { grid-area: d; height: 12px; }
.ladder .n { grid-area: n; justify-self: end; font: 600 12.5px/1 var(--mono); color: var(--ink-2); }
.ladder .best { background: linear-gradient(90deg, rgba(110,43,232,.3), rgba(110,43,232,0) 70%); border-radius: 8px 0 0 8px; }
.ladder .best .p { color: var(--violet-light); }
.ladder .unk .p, .ladder .unk .v { color: var(--ink-2); }
.ladder .unk .v { font-style: italic; }
.t0 .p { color: var(--t0); } .t1 .p { color: var(--t1); } .t2 .p { color: var(--t2); } .t3 .p { color: var(--t3); } .t4 .p { color: var(--t4); } .t5 .p { color: var(--t5); }
@media (min-width: 1024px) {
  .ladder, .lhead { width: min(720px, 50vw); }
  .ladder li { grid-template-columns: 64px 300px minmax(0, 1fr) 34px; grid-template-areas: "p v d n"; min-height: 44px; }
  .ladder .p { font-size: 20px; } .ladder .v { font-size: 14.5px; } .ladder .n { font-size: 14px; }
  .lhead { grid-template-columns: 64px 300px minmax(0, 1fr) 34px; }
  .lhead span:last-child { grid-column: 4; justify-self: end; }
}

/* cards */
.card { margin-top: 14px; padding: 16px 18px; border-radius: 18px; background: #0d0f14; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.card .cap b { display: block; font-size: 16px; font-weight: 700; }
.card .cap span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.rec { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--violet-light); }
.chip { font: 700 9.5px/1 var(--mono); letter-spacing: .04em; color: #fff; background: var(--violet); border-radius: 5px; padding: 4px 6px 3px; }
.big { margin-top: 2px; font-size: 40px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.save { font-size: 13px; color: var(--violet-light); }
.opts { margin-top: 10px; }
.opts div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.07); font-size: 13.5px; }
.opts dt { color: var(--ink-2); }
.opts dt small { color: var(--ink-3); font-size: 11.5px; margin-left: 4px; }
.opts dd { font-weight: 650; white-space: nowrap; }
@media (max-width: 340px) { .opts dd { white-space: normal; text-align: right; } }
.src { margin-top: 10px; font: 500 10.5px/1.5 var(--mono); color: var(--ink-3); }
.src a { color: var(--violet-hi); text-decoration: none; }
.src a:hover { text-decoration: underline; }
.bars { list-style: none; padding: 0; margin-top: 12px; }
.bars li { display: grid; grid-template-columns: 1fr auto; row-gap: 5px; padding: 7px 0; font-size: 13.5px; }
.bars span { color: var(--ink-2); }
.bars small { color: var(--ink-3); font-size: 11.5px; }
.bars b { font-weight: 700; }
.bars .bar { grid-column: 1 / -1; width: 100%; height: 6px; }
.bar rect { fill: rgba(255,255,255,.26); }
.bar rect.bg { fill: rgba(255,255,255,.06); }
.bars .best span { color: var(--violet-light); }
.bars .best .bar rect:not(.bg) { fill: var(--violet-light); }
.verdict { margin-top: 8px; font-size: 15px; font-weight: 700; } /* the answer first, the bars below it are the proof */
.verdict span { display: block; font-size: 13px; font-weight: 500; color: var(--violet-light); }
.soon { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 13px; color: var(--ink-2); }
.soon b { display: block; font: 700 9.5px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--violet-hi); }

/* ---------- close ---------- */
.close { position: relative; padding: 32svh var(--gut) 180px; background: linear-gradient(180deg, rgba(7,8,11,0) 0, rgba(7,8,11,0) 22svh, rgba(7,8,11,.92) 34svh, var(--night) 46svh); }
@media (min-width: 1024px) {
  .close { padding-top: 24vh; background: none; }
  .close::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(7,8,11,.95) 0, rgba(7,8,11,.9) 34vw, rgba(7,8,11,0) 54vw);
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 22vh); mask: linear-gradient(180deg, transparent 0, #000 22vh); }
}
.close h2 { max-width: 13ch; font-size: clamp(44px, 12vw, 84px); line-height: .98; }
.close .tag { margin-bottom: 8px; }
.close .pre { font-size: 13px; padding: 5px 10px 4px; }
.close .cta { margin-top: 16px; }
.price { margin-top: 14px; font-size: clamp(24px, 6.4vw, 32px); font-weight: 600; letter-spacing: -.015em; color: var(--ink-2); }
.price b { color: var(--ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.terms { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); max-width: 46ch; }
.plans { display: grid; gap: 14px; margin-top: 34px; max-width: 900px; }
@media (min-width: 700px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .plans { width: min(820px, 62vw); } }
.plan { border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px 24px; background: rgba(13,15,20,.94); }
.plan h3 { font-size: 20px; margin-bottom: 10px; letter-spacing: -.01em; }
.plan ul { padding-left: 18px; color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.plan.p { border-color: rgba(110,43,232,.75); }
.plan.p h3 { color: var(--violet-light); }
.plan.p ul { list-style: none; padding-left: 0; color: var(--ink); }
.plan.p li::before { content: "✓" / ""; color: var(--violet-hi); font-weight: 700; margin-right: 10px; }
.plan:not(.p) ul { color: var(--ink-2); }
html body footer.foot { position: relative; z-index: 1; margin: 0; padding: 32px var(--gut) 28px; background: linear-gradient(180deg, rgba(7,8,11,0), var(--night) 140px); font-size: 13px; color: var(--ink-3); display: grid; gap: 6px; }
footer.foot > * { max-width: 760px; }
footer.foot::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: 10px; max-width: 760px; }
footer a { color: var(--ink-2); }
footer .attr { font-size: 11.5px; }

/* ---------- fixed chrome ---------- */
.osm { position: fixed; z-index: 0; left: var(--gut); bottom: calc(72px + env(safe-area-inset-bottom)); margin: 0; padding: 4px 6px; border-radius: 6px; background: rgba(7,8,11,.78); font: 500 10px/1 var(--mono); color: var(--ink-2); }
@media (max-width: 1023px) { .osm { font-size: 9.5px; } }
@media (min-width: 1024px) { .osm { left: auto; right: var(--gut); bottom: 12px; } }
.osm-off .osm, .osm-cover .osm { opacity: 0; }
.counter { display: none; position: fixed; z-index: 6; right: 12px; top: 12px; bottom: auto; width: 176px; justify-content: flex-end; margin: 0; align-items: baseline; gap: 7px; opacity: 0;
  font-variant-numeric: tabular-nums; pointer-events: none; padding: 7px 12px 6px; border-radius: 999px; background: rgba(13,15,20,.92); border: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) {
.counter {transition: opacity .25s;}}
.js .counter { display: flex; }
.c-on .counter { opacity: 1; }
.c-on.c-cover .counter { opacity: 0; }
.counter .num { -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1; display: inline-flex; justify-content: flex-end; flex: none; height: 1.08em; overflow: clip; }
.counter .lab { font: 500 11px/1.4 var(--mono); color: var(--ink-2); flex: 0 0 104px; white-space: nowrap; } /* fixed box: a new label never moves the number */
.num .dg { display: inline-flex; flex-direction: column; }
.num .dg span { height: 1.08em; line-height: 1.08em; }
.num .sp { width: .22em; }
.counter { }
@media (prefers-reduced-motion: no-preference) {
.counter {transition: opacity .25s, transform .22s ease-out;}}
@media (max-width: 1023px) { html:not(.nav-hide) .counter { transform: translateY(calc(52px + env(safe-area-inset-top))); } }
@media (min-width: 1024px) {
  .counter { top: auto; right: var(--gut); bottom: 44px; width: 300px; flex-direction: column; align-items: flex-end; gap: 4px; padding: 0; background: none; border: 0; }
  .counter .lab { align-self: stretch; text-align: right; font-size: 15px; color: var(--ink); flex: none; }
  .counter .num { font-size: 96px; }
  .counter .lab { font-size: 13px; }
}
.sticky { position: fixed; z-index: 6; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center;
  height: 50px; border-radius: 14px; background: var(--violet); color: #fff; font-weight: 650; font-size: 16px; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(14px); visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
.sticky {transition: opacity .2s, transform .2s, visibility 0s .2s;}}
.cta-on .sticky { opacity: 1; transform: none; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
.cta-on .sticky {transition: opacity .2s, transform .2s;}}
.cta-on.cta-yield .sticky { opacity: 0; transform: translateY(14px); visibility: hidden; }
@media (min-width: 1024px) { .sticky { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sticky, .cta-on .sticky, .counter, .num .dg, .gl, .poster { transition: none; }
}
/* card sources: one per line, so no tap lands on a neighbour */
.srcl { list-style: none; padding: 0; margin: 2px 0 0; font: 500 10.5px/1.3 var(--mono); color: var(--ink-3); display: grid; gap: 0; }
.srcl li { min-height: 26px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.srcl a { color: var(--violet-hi); text-decoration: none; position: relative; }
.srcl a::after { content: ""; position: absolute; inset: -6px -4px; }
.srcl a:hover { text-decoration: underline; }

/* the facts (homepage traps and vis-ze/) live at the end of this file: "Facts, reworked 27-09 22:15" */

/* ---------- large screens (owner, 27-09): a 12-column stage up to 1440 px with fluid margins. Copy sits in columns 1-4,
   centred on the optical middle (ui.js sets each block's sticky top); the camera frames the route in columns 5-12.
   Type scales with the viewport; the counter belongs to the copy column; backings are soft, with no hard edges. ---------- */
@media (min-width: 1024px) {
  :root { --edge: max(var(--gut), calc((100vw - 1440px) / 2 + var(--gut))); }
  .beat, .hero, .close, .top { padding-left: var(--edge); padding-right: var(--edge); }
  .block { max-width: clamp(440px, 31vw, 600px); }
  h2 { font-size: clamp(48px, 4.6vw, 96px); }
  .tag { font-size: clamp(12.5px, .85vw, 15px); }
  .say { font-size: clamp(18px, 1.25vw, 24px); max-width: 44ch; }
  .beat .stamp { font-size: clamp(11px, .78vw, 14px); }
  .copy::before, .ladder + .stamp::before { inset: -120px -160px -120px calc(-1 * var(--edge)); -webkit-mask: none; mask: none;
    background: radial-gradient(closest-side, rgba(7,8,11,.9), rgba(7,8,11,.72) 55%, rgba(7,8,11,0)); }
  .scrim { background: radial-gradient(ellipse 48vw 85vh at 12vw 50%, rgba(7,8,11,.82), rgba(7,8,11,.5) 50%, rgba(7,8,11,0) 80%),
                       linear-gradient(0deg, rgba(7,8,11,.5) 0, rgba(7,8,11,0) 18vh); }
  .counter { left: var(--edge); right: auto; bottom: auto; align-items: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .counter {transition: opacity .25s, top .25s ease-out;}}
  .counter .lab { text-align: left; }
  .counter .num { font-size: clamp(64px, 5vw, 104px); justify-content: flex-start; }
}
/* tablets in the stacked layout: the sticky bar keeps a phone-like width */
.sticky { max-width: 480px; margin-inline: auto; }
@media (prefers-reduced-motion: reduce) { .counter { transition: none; } }

/* round 9 a11y: the counter's large digits get a night halo; ladder text keeps a backing where markers fly past;
   the "Víš, že" source links get a tap margin; without JS the fixed map credit hides (the footer carries it) */
@media (min-width: 1024px) { .counter .num { text-shadow: 0 0 4px rgba(7,8,11,.95), 0 0 18px rgba(7,8,11,.9); } }
.gl-on .ladder .p, .gl-on .ladder .v, .gl-on .ladder .n { background: rgba(7,8,11,.9); border-radius: 4px; }
.fs a { position: relative; }
.fs a::after { content: ""; position: absolute; inset: -4px -3px; }
html:not(.js) .osm { display: none; }

/* round 10 juror: tablets feather the copy backing's right edge (the block is narrower than the screen); the close
   fades into the facts with no seam; the desktop counter label sits right under its digits; one CTA at a time on phones */
@media (min-width: 481px) and (max-width: 1023px) {
  .copy::before, .ladder + .stamp::before { right: -140px;
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 180px), transparent), linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    -webkit-mask-composite: source-in; mask: linear-gradient(90deg, #000 calc(100% - 180px), transparent), linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-composite: intersect; }
}
@media (min-width: 1024px) { .counter { width: auto; align-items: flex-end; } .counter .lab { text-align: right; } }
@media (max-width: 1023px) { .cta-on .navcta { display: none; } }

/* ---------- Facts, reworked 27-09 22:15 (Jan): three traps before #premium on the homepage, all twelve on vis-ze/.
   A readable vertical list, no carousel. Each fact: the signal glyph (tick in a circle = perk, triangle = trap; never
   colour alone) with the hook number and its unit in the signal colour (kwSaving / kwCaution dark values), the rest of
   the heading in ink, one sentence in ink-2, then what Kilowatka does (violet rule, traps only, only where the app does
   it today) and the sources with the date in grey mono. ---------- */
:root { --good: #3fd17a; }
.pz { width: .8em; height: .8em; flex: none; fill: none; stroke: var(--amber); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pz.good { stroke: var(--good); }
.vlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.vf { display: grid; gap: 8px; align-content: start; padding: 18px 18px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--amber); }
.vf.good { border-top-color: var(--good); }
.vf h3 { display: grid; gap: 6px; font-size: 17px; line-height: 1.3; font-weight: 650; letter-spacing: -.005em; text-wrap: balance; }
.vh { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bad .vh { color: var(--amber); }
.good .vh { color: var(--good); }
.sg { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vn { font-size: clamp(32px, 9vw, 42px); font-weight: 750; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.vh.long .vn { font-size: clamp(27px, 7.4vw, 36px); }
.vn .u, .vn .w { font-size: .6em; font-weight: 600; letter-spacing: -.01em; }
.vl { color: var(--ink); }
.vt { font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.vk { font-size: 14.5px; line-height: 1.45; color: var(--ink); padding: 1px 0 1px 12px; border-left: 2px solid var(--violet-hi); }
.vk .pre { display: inline-block; margin-left: 4px; vertical-align: 1px; font-size: 9.5px; padding: 3px 6px 2px; }
.fs { margin-top: 2px; font: 500 10.5px/1.6 var(--mono); color: #a3a9b5; }
.fs a { color: var(--violet-hi); text-decoration: none; }
.fs a:hover { text-decoration: underline; }
.pasti h2 { display: flex; align-items: center; gap: 10px; font-size: clamp(28px, 7vw, 48px); margin-bottom: 16px; }
@media (max-width: 1023px) { .vlist { max-width: 640px; } }
/* calm reveal (JS, never under reduced motion): only cards below the fold at load, from a visible resting state */
.fx .vf { }
@media (prefers-reduced-motion: no-preference) {
/* calm reveal (JS, never under reduced motion): only cards below the fold at load, from a visible resting state */
.fx .vf {transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);}}
.vf.pre { opacity: .5; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) { .vf, .vf.pre { transition: none; opacity: 1; transform: none; } }

/* homepage: the traps sit between the story and the close, on night, with soft edges into the scene on both sides */
.pasti { position: relative; z-index: 1; padding: 36px var(--gut) 44px; background: var(--night); }
.pasti::before, .pasti::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.pasti::before { top: -12vh; height: 12vh; background: linear-gradient(180deg, rgba(7,8,11,0), var(--night)); }
.pasti::after { bottom: -10vh; height: 10vh; background: linear-gradient(180deg, var(--night), rgba(7,8,11,0)); }
@media (min-width: 1024px) {
  .pasti { padding: 72px var(--edge) 64px; }
  .pasti .vlist { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1320px; }
}
/* the plans: Pro as a muted, planned strip under Zdarma and Premium (no date, no price) */
.plan.x { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 24px; border-style: dashed; background: rgba(13,15,20,.94); }
.plan.x h3 { margin: 0; font-size: 17px; color: var(--ink-2); }
.plan.x h3 span { font-weight: 500; color: var(--ink-3); }
.plan.x p { font-size: 15px; color: var(--ink-3); }
.more { margin-top: 24px; font-size: 16px; }
.more a { display: inline-block; padding: 10px 0; color: var(--violet-hi); font-weight: 600; text-decoration: none; }
.more a:hover { text-decoration: underline; }

/* ---------- Round 2 (Jan, 28-09): one container for both pages, the footer as its own band, vis-ze/ as four
   illustrated groups along a drive. The container is the 1440 px stage: content runs between var(--edge) on both sides
   (16 px gutters below 1024 px, 56 px up to 1440 px, then centred). ---------- */
.links a[aria-current="page"], .menu nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* footer: an opaque band below the scene, aligned to the container; the attribution reads at 12 px */
html body footer.foot { position: relative; z-index: 1; margin: 0; padding: 36px var(--edge) calc(32px + env(safe-area-inset-bottom)); background: var(--night); border-top: 1px solid var(--line); display: grid; gap: 4px; align-content: start; }
footer.foot::before { display: none; }
footer.foot > * { max-width: none; }
footer.foot .attr { margin-top: 10px; font-size: 12px; line-height: 1.65; color: var(--ink-3); max-width: 110ch; }
@media (max-width: 1023px) { html body footer.foot { padding-bottom: calc(92px + env(safe-area-inset-bottom)); } } /* clear of the sticky bar */
@media (min-width: 1024px) {
  html body footer.foot { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; padding-top: 44px; padding-bottom: 44px; }
  footer.foot > p:not(.attr) { grid-column: 1; }
  footer.foot .attr { grid-column: 2; grid-row: 1 / span 4; margin-top: 4px; }
}
.close { padding-bottom: 72px; }
@media (min-width: 1024px) { .close { padding-bottom: 96px; } }
@media (min-width: 1024px) { .pasti .vh.long .vn { font-size: clamp(26px, 2.3vw, 36px); } }

/* vis-ze/ */
.vz { padding: calc(84px + env(safe-area-inset-top)) var(--edge) 24px; }
.vz-head h1 { max-width: 18ch; font-size: clamp(34px, 9.4vw, 68px); line-height: 1.02; }
.vg { margin-top: 64px; }
.vg h2 { font-size: clamp(30px, 7vw, 48px); margin-bottom: 20px; }
.vg-media { margin: 0; }
.vg-media figcaption { margin-top: 4px; color: var(--ink-3); font-size: 12px; line-height: 1.5; text-align: right; }
.vg-media img { display: block; width: 100%; height: auto; border-radius: 20px; }
.vg-media.ph { aspect-ratio: 3 / 2; border-radius: 20px; border: 1px solid var(--line);
  background: radial-gradient(55% 50% at 50% 62%, rgba(110,43,232,.3), rgba(7,8,11,0) 72%), var(--surface); }
.vg-notes { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 24px; }
.vg .vf { background: none; border: 0; border-radius: 0; border-top: 2px solid var(--amber); padding: 14px 0 0; }
.vg .vf.good { border-top-color: var(--good); }
.vz-end { margin-top: 72px; padding-top: 36px; border-top: 1px solid var(--line); }
.vz-end h2 { max-width: 14ch; font-size: clamp(30px, 8vw, 56px); }
.vz-end h2 span { display: block; color: var(--violet-light); }
.vz-end .price { font-size: clamp(18px, 4.6vw, 24px); max-width: 34ch; }
@media (min-width: 768px) and (max-width: 1023px) {
  .vg-media { max-width: 720px; }
  .vg-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .vg.n1 .vg-notes { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
@media (min-width: 1024px) {
  .vz { padding-top: 136px; }
  .vz-head, .vg h2, .vz-end { text-align: center; }
  .vz-head h1, .vz-end h2, .vz-end .price, .vz-end .terms { margin-inline: auto; }
  .vz-end .cta { justify-content: center; }
  .vg { margin-top: 112px; }
  .vg h2 { margin-bottom: 36px; }
  /* the illustration in the middle, the notes to its left and right; a tall group keeps the image in view */
  .vg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); column-gap: clamp(32px, 3.4vw, 64px); align-items: start; }
  .vg-media { grid-column: 2; grid-row: 1; position: sticky; top: 112px; }
  .vg-notes { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; row-gap: 36px; margin: 0; }
  .vg.rows1 .vg-notes { align-self: center; }
  .vg-notes .c1 { grid-column: 1; } .vg-notes .c3 { grid-column: 3; }
  .vg-notes .r1 { grid-row: 1; } .vg-notes .r2 { grid-row: 2; } .vg-notes .r3 { grid-row: 3; } .vg-notes .r4 { grid-row: 4; }
  .vg .vn { font-size: clamp(28px, 2.5vw, 40px); }
  .vg .vh.long .vn { font-size: clamp(22px, 1.9vw, 32px); }
  /* one note: the image and the note side by side, centred as a pair */
  .vg.n1 .vg-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); max-width: 980px; margin-inline: auto; }
  .vg.n1 .vg-media { grid-column: 1; }
  .vg.n1 .vg-notes .c3 { grid-column: 2; }
}

.qr img { width: 72px; height: 72px; border-radius: 4px; }

.languages { display:flex; gap:8px; position:absolute; right:var(--edge); top:68px; font-size:11px; z-index:25; }
.languages a { color:var(--ink2); }
.languages a[aria-current] { color:var(--ink); }