/* Hugo landing — shared styles for content sub-pages (/srovnani, /cenove-srovnani).
   Mirrors the tokens, nav, buttons and the "vs-board" table look of the main
   page (index.html) so the sub-pages read as the same site. HUGO-1828. */
:root{
  --cream:#F3EFE6; --cream-2:#ECE6D7; --cream-3:#E4DDC8;
  --ink:#14110D; --ink-2:#2A2620; --muted:#6B6357; --line:#1411101A;
  --yellow:#FFDF2C; --yellow-deep:#F2C800; --hl:#FFF3A8;
  --green:#1BA85B; --red:#E2533B;
  --radius-sm:14px; --radius-md:22px; --radius-lg:34px; --radius-pill:999px;
  --display:"Spline Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --body:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --container:1180px;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--cream); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--yellow); color:var(--ink); }
:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:8px; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 28px; }
p{ margin:0; text-wrap:pretty; }
h1,h2,h3{ margin:0; font-family:var(--display); letter-spacing:-.025em; text-wrap:balance; }

.eyebrow{ font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.lead{ font-size:19px; color:var(--ink-2); line-height:1.5; }
.vat{ font-size:.55em; font-weight:600; color:var(--muted); letter-spacing:0; white-space:nowrap; }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line); }
.nav-inner{ display:flex; align-items:center; gap:24px; height:68px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.02em; }
.brand img{ width:28px; height:28px; border-radius:7px; display:block; }
.nav-links{ display:flex; gap:24px; margin-left:12px; }
.nav-links a{ font-weight:500; color:var(--ink-2); font-size:15px; padding:8px 0; white-space:nowrap; }
.nav-links a:hover, .nav-links a.is-on{ color:var(--ink); }
.nav-links a.is-on{ box-shadow:inset 0 -2px 0 var(--yellow-deep); }
.nav-cta{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.lang{ display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill); padding:3px; gap:2px; }
.lang button, .lang a{ appearance:none; border:0; background:transparent; cursor:pointer; font-family:var(--body); font-weight:600;
  font-size:12.5px; color:var(--muted); padding:6px 11px; border-radius:var(--radius-pill); line-height:1; }
.lang button.is-on, .lang a.is-on{ background:var(--ink); color:#fff; }
/* HUGO-1872 — mobile menu (hugo-nav.js) */
.nav-burger{ order:1; display:none; appearance:none; border:1px solid var(--line); background:#fff; width:40px; height:40px; flex:0 0 40px; border-radius:999px; padding:0; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.nav-burger span{ display:block; width:16px; height:2px; border-radius:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease; }
.menu-open .nav-burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-open .nav-burger span:nth-child(2){ opacity:0; }
.menu-open .nav-burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (max-width:860px){
  .nav-links{ display:none; } .nav-cta .btn{ display:none; }
  .nav-burger{ display:inline-flex; }
  .nav.menu-open .nav-links{ display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; margin:0; padding:4px 20px 14px; background:var(--cream); border-bottom:1px solid var(--line); box-shadow:0 18px 30px -18px rgba(20,17,13,.35); max-height:calc(100vh - 68px); overflow-y:auto; }
  .nav.menu-open .nav-links a{ padding:14px 0; font-size:17px; border-bottom:1px solid var(--line); box-shadow:none; }
  .nav.menu-open .nav-links a:last-child{ border-bottom:0; }
  .nav.menu-open .nav-links a.is-on{ font-weight:700; }
}

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--body); font-weight:600;
  font-size:15px; padding:13px 22px; border-radius:var(--radius-pill); border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, background .2s ease; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--yellow); color:var(--ink); box-shadow:0 1px 0 rgba(0,0,0,.06), 0 12px 28px -10px rgba(242,200,0,.55); }
.btn-primary:hover{ background:var(--yellow-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:rgba(20,17,13,.16); }
.btn-ghost:hover{ border-color:rgba(20,17,13,.32); background:rgba(20,17,13,.04); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-lg{ padding:16px 26px; font-size:16px; }
.btn .arr{ width:14px; height:14px; }

/* ---------- page hero ---------- */
.phero{ padding:72px 0 40px; }
.phero h1{ font-weight:800; font-variation-settings:"wdth" 95; font-size:clamp(38px,6vw,76px); line-height:.98; margin:14px 0 22px; max-width:16ch; }
/* The highlight box is the font's content area (~1.2em for Spline Sans) while lines sit .98em
   apart, so each wrapped line's box overlapped the line above by ~.22em and hid its y/p tails
   ("Kdvž kartv", HUGO-2185). The band therefore starts .22em below the box top. */
.phero h1 .hl{ background:linear-gradient(transparent .22em, var(--yellow) .22em); padding:0 .12em; border-radius:.12em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
/* Printing without "background graphics" (Chromium's default) paints every box that has a
   background as solid white over its whole height, transparent band included, so the next
   line hid the tails again. On paper the highlight is dropped instead, with its padding, so
   lines starting inside it stay flush with the rest of the heading. */
@media print{ .phero h1 .hl{ background:none; padding:0; } }
.phero h1 em{ font-style:normal; font-weight:500; color:var(--muted); font-variation-settings:"wdth" 75; }
.phero .lead{ max-width:62ch; }
/* Pricing header with illustration: text + CTAs left, barista right, facing the headline.
   On phones/tablets the barista drops beside the CTAs instead of below everything. */
.phero-art{ padding-bottom:0; }
.phero-grid{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"text img" "ctas img"; column-gap:40px; align-items:end; align-content:end; }
.phero-text{ grid-area:text; }
.phero-grid > .ctas{ grid-area:ctas; margin-bottom:48px; }
.phero-img{ grid-area:img; display:block; width:auto; height:clamp(320px,38vw,460px); align-self:end; }
@media (max-width:900px){
  .phero-grid{ column-gap:24px; }
  .phero-img{ height:300px; }
}
@media (max-width:600px){
  .phero-grid{ grid-template-areas:"text text" "ctas img"; column-gap:16px; }
  .phero-grid > .ctas{ flex-direction:column; align-items:stretch; margin-bottom:32px; }
  .phero-grid > .ctas .btn{ white-space:normal; padding:14px 18px; font-size:15px; }
  .phero-img{ height:190px; margin-top:8px; }
}
.phero .ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ---------- sections ---------- */
.sec{ padding:56px 0; }
.sec-alt{ background:var(--cream-2); }
.sec-head{ max-width:760px; margin-bottom:30px; }
.sec-head h2{ font-weight:800; font-variation-settings:"wdth" 90; font-size:clamp(28px,3.6vw,44px); line-height:1.02; margin-top:10px; }
.sec-head h2 em{ font-style:normal; font-weight:500; color:var(--muted); font-variation-settings:"wdth" 75; }
.sec-head .lead{ margin-top:14px; }

/* ---------- comparison table (scrolls sideways on phones) ---------- */
.tbl-wrap{ border:2px solid var(--ink); border-radius:var(--radius-md); background:#fff; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl{ width:100%; border-collapse:collapse; font-size:15px; min-width:860px; }
.tbl th, .tbl td{ padding:14px 16px; text-align:left; vertical-align:top; border-top:1px solid var(--line); }
.tbl thead th{ background:var(--ink); color:var(--cream); font-weight:600; font-size:14px; border-top:0; white-space:nowrap; }
.tbl tbody th{ font-weight:600; color:var(--ink-2); white-space:nowrap; position:sticky; left:0; background:#fff; z-index:1; }
.tbl thead th:first-child{ position:sticky; left:0; z-index:2; }
.tbl .is-hugo{ background:var(--hl); font-weight:700; color:var(--ink); }
.tbl thead th.is-hugo{ background:var(--yellow); color:var(--ink); }
.tbl td{ min-width:120px; }
.tbl td small{ display:block; color:var(--muted); font-weight:400; font-size:12.5px; margin-top:3px; }
.tbl .yes{ color:var(--green); font-weight:700; }
.tbl .no{ color:var(--red); font-weight:700; }
.tbl-hint{ display:none; font-size:13px; color:var(--muted); margin:10px 2px 0; }
@media (max-width:900px){ .tbl-hint{ display:block; } }
.note{ font-size:13px; color:var(--muted); margin-top:14px; max-width:90ch; }

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; display:flex; flex-direction:column; gap:10px; }
.card h3{ font-size:21px; font-weight:800; font-variation-settings:"wdth" 92; display:flex; align-items:center; gap:10px; }
.card .tag{ font-family:var(--body); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); background:var(--cream); border-radius:var(--radius-pill); padding:4px 10px; }
.card p{ font-size:15px; color:var(--ink-2); }
.card .pm{ margin:4px 0 0; padding:0; list-style:none; display:grid; gap:7px; font-size:14.5px; }
.card .pm li{ display:flex; gap:9px; align-items:flex-start; }
.card .pm li::before{ flex:0 0 18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; line-height:18px; text-align:center; margin-top:2px; }
.card .pm .p::before{ content:"+"; background:rgba(27,168,91,.14); color:var(--green); }
.card .pm .m::before{ content:"−"; background:rgba(226,83,59,.13); color:var(--red); }
.card .vs-hugo{ margin-top:auto; padding-top:12px; border-top:1px dashed var(--line); font-size:14.5px; color:var(--ink); }
.card .vs-hugo b{ background:var(--hl); padding:0 4px; border-radius:4px; }
.card.dark{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.card.dark h3{ color:#fff; }
.card.dark p, .card.dark .vs-hugo{ color:var(--cream); border-color:#3a352d; }
.card.dark .vs-hugo b{ background:var(--yellow); color:var(--ink); }
@media (max-width:980px){ .cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .cards{ grid-template-columns:1fr; } }

/* ---------- checklist ---------- */
.checks{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px; margin:0; padding:0; list-style:none; }
.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; }
.checks li b{ display:block; }
.checks li span.t{ color:var(--muted); font-size:15px; }
.checks .ck{ flex:0 0 28px; width:28px; height:28px; border-radius:9px; background:var(--yellow); display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--display); }
@media (max-width:760px){ .checks{ grid-template-columns:1fr; } }

/* ---------- pricing table (Hugo) ---------- */
.ptable{ border:2px solid var(--ink); border-radius:var(--radius-md); overflow:hidden; background:#fff; }
.prow{ display:grid; grid-template-columns:1.3fr 1fr; border-top:1px solid var(--line); }
.prow:first-child{ border-top:0; }
.prow > div{ padding:18px 22px; }
.prow .k b{ display:block; font-size:16.5px; }
.prow .k span{ color:var(--muted); font-size:14.5px; }
.prow .v{ font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 88; letter-spacing:-.02em;
  font-size:clamp(20px,2.2vw,28px); line-height:1.1; background:var(--hl); display:flex; flex-direction:column; justify-content:center; }
.prow .v small{ font-family:var(--body); font-weight:500; font-size:13px; color:var(--muted); letter-spacing:0; margin-top:4px; }
.prow .v s{ color:var(--muted); font-weight:600; font-size:.6em; margin-right:6px; }
.prow.head{ background:var(--ink); color:var(--cream); }
.prow.head > div{ padding:14px 22px; font-weight:600; font-size:14px; background:transparent; font-family:var(--body); color:var(--cream); }
@media (max-width:640px){ .prow{ grid-template-columns:1fr; } .prow .v{ padding-top:12px; } .prow.head{ display:none; } }

/* ---------- cost scenario bars ---------- */
.scen-tabs{ display:inline-flex; flex-wrap:wrap; gap:6px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill); padding:4px; margin-bottom:22px; }
.scen-tabs button{ appearance:none; border:0; background:transparent; cursor:pointer; font:600 14px var(--body); color:var(--muted); padding:9px 16px; border-radius:var(--radius-pill); }
.scen-tabs button.is-on{ background:var(--ink); color:#fff; }
.bars{ display:grid; gap:10px; }
.bar{ display:grid; grid-template-columns:150px 1fr 120px; align-items:center; gap:14px; }
.bar .nm{ font-weight:600; font-size:15px; }
.bar .track{ height:30px; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.bar .fill{ height:100%; background:#A69C88; border-radius:9px; transition:width .45s ease; }
.bar.is-hugo .fill{ background:var(--yellow); }
.bar.is-hugo .nm{ font-weight:800; }
.bar .amt{ font-family:var(--display); font-weight:800; font-size:18px; text-align:right; white-space:nowrap; }
@media (max-width:640px){ .bar{ grid-template-columns:96px 1fr 92px; gap:8px; } .bar .amt{ font-size:15px; } .bar .nm{ font-size:13.5px; } }

/* ---------- CTA band + footer ---------- */
.cta-band{ background:var(--ink); color:var(--cream); border-radius:var(--radius-lg); padding:clamp(30px,5vw,56px);
  display:flex; flex-wrap:wrap; gap:22px 40px; align-items:center; justify-content:space-between; }
.cta-band h2{ font-weight:800; font-size:clamp(26px,3.4vw,40px); line-height:1.05; max-width:22ch; color:#fff; }
.cta-band h2 em{ font-style:normal; color:var(--yellow); }
.cta-band p{ color:#CFC8BB; margin-top:10px; max-width:52ch; }
.foot{ padding:44px 0 60px; color:var(--muted); font-size:14px; }
.foot-in{ display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; border-top:1px solid var(--line); padding-top:22px; }
.foot a{ color:var(--ink-2); }
.foot .links{ display:flex; flex-wrap:wrap; gap:16px; }

/* Comparison qualifications stay readable beside the figures (HUGO-1952). */
.comparison-date{ margin-top:14px; font-weight:600; }
.comparison-methodology{ padding:28px 0; font-size:13px; line-height:1.5; color:var(--muted); }
.comparison-methodology .sec-head{ margin-bottom:12px; }
.comparison-methodology .sec-head h2{ font-size:22px; line-height:1.2; margin-top:0; color:var(--ink); }
.comparison-methodology p{ max-width:none; margin-bottom:10px; line-height:1.5; }
.comparison-methodology .comparison-intro{ font-size:15px; color:var(--ink-2); margin-bottom:16px; }
.comparison-methodology h3{ font-size:14px; margin-top:16px; }
.comparison-methodology a,.note a{ text-decoration:underline; text-underline-offset:3px; }
.comparison-sources{ display:flex; flex-wrap:wrap; gap:6px 22px; padding-left:18px; margin:8px 0 0; }