/* Inter: body, UI, buttons, numerals */
@font-face{font-display:swap;font-family:'Inter';font-style:normal;font-weight:400;src:url('/fonts/inter-v20-latin-regular.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter';font-style:normal;font-weight:500;src:url('/fonts/inter-v20-latin-500.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter';font-style:normal;font-weight:600;src:url('/fonts/inter-v20-latin-600.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter';font-style:normal;font-weight:700;src:url('/fonts/inter-v20-latin-700.woff2') format('woff2')}
/* Inter Tight: display face for headings */
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:400;src:url('/fonts/inter-tight-v9-latin-regular.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:500;src:url('/fonts/inter-tight-v9-latin-500.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:600;src:url('/fonts/inter-tight-v9-latin-600.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:700;src:url('/fonts/inter-tight-v9-latin-700.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:800;src:url('/fonts/inter-tight-v9-latin-800.woff2') format('woff2')}
@font-face{font-display:swap;font-family:'Inter Tight';font-style:normal;font-weight:900;src:url('/fonts/inter-tight-v9-latin-900.woff2') format('woff2')}

:root {
  --bg: #FBFAF7;
  --bg-warm: #F1ECE2;
  --bg-dark: #0E0D0B;
  --surface: #FFFFFF;
  --text: #0E0D0B;
  --text-muted: #2A2D33;
  --text-subtle: #6B7280;
  --border: #E6E2D8;
  --border-light: #F0EDE5;
  --accent: #9B1C2E;        /* primary CTA buttons and link hover ONLY */
  --accent-hover: #7E1525;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-btn: 0 1px 2px rgba(0,0,0,0.10);
  --max: 1120px;
  --nav-h: 60px;
  --radius: 10px;
  --radius-lg: 16px;
  --display: 'Inter Tight', system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
ul{list-style:none}
::selection{background:var(--bg-warm);color:var(--text)}

h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-0.02em}

.container{max-width:var(--max);margin:0 auto;padding:0 20px}
@media(min-width:1024px){.container{padding:0 40px}}

/* ── Section header ── */
.sh{text-align:center;margin-bottom:48px}
.sh-title{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.1;color:var(--text);margin-bottom:12px}
.sh-sub{font-size:1.05rem;color:var(--text-muted);max-width:560px;margin:0 auto;line-height:1.6}

/* Screen-reader only (visually hidden labels) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Honeypot anti-spam */
.hp-field{position:absolute;left:-9999px;opacity:0;pointer-events:none;tab-index:-1}

/* ── Motion ──────────────────────────────────────────────────────────
   Still the same handful of .reveal elements (headings and the hero).
   The richness comes from the curve, the slight de-focus on entry, and
   staggering the parts of a heading WITHOUT adding more observed nodes.
   ------------------------------------------------------------------ */
/* Scoped to html.js: nothing is ever hidden unless the script that reveals
   it again is actually running. */
.js .reveal{
  opacity:0;
  transform:translateY(26px) scale(0.99);
  filter:blur(5px);
  transition:opacity 1s var(--ease), transform 1.05s var(--ease), filter .8s var(--ease);
  will-change:opacity,transform,filter;
}
.js .reveal.up{opacity:1;transform:none;filter:none;will-change:auto}

/* A section header animates as a sequence: title, then subtitle.
   The parent is only the trigger, so the .reveal count stays where it was. */
.js .sh.reveal{opacity:1;transform:none;filter:none;transition:none;will-change:auto}
.js .sh.reveal>*{
  opacity:0;transform:translateY(18px);filter:blur(4px);
  transition:opacity .9s var(--ease), transform .95s var(--ease), filter .7s var(--ease);
}
.js .sh.reveal.up>*{opacity:1;transform:none;filter:none}
.js .sh.reveal.up>*:nth-child(2){transition-delay:.11s}
.js .sh.reveal.up>*:nth-child(3){transition-delay:.22s}

/* Hover feels weightier: lift plus a soft shadow bloom rather than a jump. */
.btn,.nav-cta,.case-demo-btn,.form-btn{transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.case-card,.problem-card,.cap-card,.step-card,.pricing-card{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .sh.reveal>*{opacity:1;transform:none;filter:none;transition:none}
  *{transition:none!important;animation:none!important}
}

.section{padding:56px 0}
@media(min-width:768px){.section{padding:76px 0}}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:15px;padding:13px 26px;border-radius:var(--radius);
  transition:all 0.2s cubic-bezier(0.16,1,0.3,1);white-space:nowrap;cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(0.98)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 4px 14px rgba(0,0,0,0.12)}
.btn-ghost-dark{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.22)}
.btn-ghost-dark:hover{border-color:rgba(255,255,255,0.50);background:rgba(255,255,255,0.06)}
/* Plain text link, used beside a primary button */
.link-plain{font-size:15px;font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--border);padding-bottom:1px;transition:color .15s,border-color .15s}
.link-plain:hover{color:var(--accent);border-color:var(--accent)}

/* ====================================================
   NAV
   ==================================================== */
/* Solid, never translucent: text scrolling through a semi-transparent bar was
   the loudest mobile defect, and backdrop-filter is unreliable on Android. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:var(--bg);
  border-bottom:1px solid var(--border);
  transition:box-shadow 0.3s;
}
@media(min-width:900px){
  .nav.scrolled{box-shadow:0 1px 6px rgba(0,0,0,0.06)}
}
/* Anchor jumps must not park a heading under the fixed bar. */
[id]{scroll-margin-top:calc(var(--nav-h) + 14px)}
.nav-inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  max-width:var(--max);margin:0 auto;padding:0 20px;height:100%;gap:16px;
}
@media(min-width:1024px){.nav-inner{padding:0 40px}}

.nav-logo{font-family:'Inter',system-ui,sans-serif;font-size:17px;font-weight:800;color:var(--text);letter-spacing:-0.02em;flex-shrink:0}
.nav-logo span{color:var(--accent)}

.nav-links{display:none;align-items:center;gap:3px;justify-content:center}
@media(min-width:900px){.nav-links{display:flex}}
.nav-link{font-size:13px;font-weight:600;padding:7px 10px;border-radius:var(--radius);transition:color 0.15s,background 0.15s;color:var(--text-subtle)}
.nav-link:hover{color:var(--text);background:var(--bg-warm)}

.nav-actions{display:none;align-items:center;flex-shrink:0;justify-content:flex-end}
@media(min-width:900px){.nav-actions{display:flex}}
/* Ghost, never solid: only one solid oxblood button may be in view at a time */
.nav-cta{background:transparent;color:var(--text);border:1px solid var(--border);font-size:14px;font-weight:700;padding:8px 17px;border-radius:var(--radius);transition:color 0.2s,border-color 0.2s;white-space:nowrap}
.nav-cta:hover{color:var(--accent);border-color:var(--accent);background:transparent}

.hamburger{display:flex;flex-direction:column;gap:5px;padding:8px;justify-self:end}
@media(min-width:900px){.hamburger{display:none}}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all 0.3s}

.mobile-drawer{
  position:fixed;top:0;right:0;width:300px;max-width:85vw;height:100vh;
  background:#fff;z-index:105;padding:68px 24px 24px;
  display:flex;flex-direction:column;gap:4px;
  transform:translateX(100%);
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
  box-shadow:-8px 0 40px rgba(0,0,0,0.12);
}
.mobile-drawer.open{transform:translateX(0)}
.mobile-drawer a{font-size:20px;font-weight:700;color:var(--text);display:block;padding:9px 0}
.mob-niche{font-size:15px!important;font-weight:600!important;color:var(--text-muted)!important}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:104;opacity:0;pointer-events:none;transition:opacity 0.3s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.close-btn{position:absolute;top:16px;right:18px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:20px}

/* ====================================================
   HERO: text only, left aligned, generous whitespace
   ==================================================== */
.hero{padding:132px 0 46px;background:var(--bg)}
@media(min-width:768px){.hero{padding:170px 0 56px}}
.hero-text{max-width:780px}
.hero h1{
  font-size:clamp(2.4rem,6vw,3.8rem);
  line-height:1.05;color:var(--text);margin-bottom:26px;
}
.hero-sub{font-size:clamp(1.05rem,2vw,1.22rem);color:var(--text-muted);max-width:620px;margin-bottom:40px;line-height:1.65}
.hero-ctas{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.hero-micro{margin-top:16px;margin-bottom:0;font-size:14px;color:var(--text-subtle)}

/* ── Demo line, directly under the hero (the homepage's actual proof) ── */
.demo-line{padding:34px 0;background:var(--bg-warm);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
@media(min-width:768px){.demo-line{padding:42px 0}}

/* Line 1 — muted label */
.demo-label{margin:0;font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-subtle)}

/* Line 2 — the pipeline. Flex items so a wrap can only ever happen BETWEEN
   steps, never inside one. On narrow screens the chain simply stacks. */
.demo-flow{margin:14px 0 0;max-width:860px;font-size:15px;line-height:1.6;color:var(--text-muted);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.flow-step{white-space:nowrap}
.flow-lead{white-space:nowrap;color:var(--text);font-weight:600}
/* The arrow lives INSIDE the step it points at, so it can never end a line. */
.flow-arrow{color:var(--text-subtle);margin-right:6px}
@media(max-width:520px){
  .demo-flow{gap:2px 7px;font-size:14.5px}
  .flow-step,.flow-lead{white-space:normal}
}

/* Line 3 — reads as a link at a glance */
.demo-cta{display:inline-block;margin-top:14px;font-size:15px;font-weight:500;color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:2px;
  transition:color .18s var(--ease),border-color .18s var(--ease)}
.demo-cta:hover{color:var(--accent-hover);border-bottom-width:2px;padding-bottom:1px}

/* ====================================================
   PROBLEM
   ==================================================== */
.problem-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:36px}
@media(min-width:768px){.problem-grid{grid-template-columns:repeat(3,1fr)}}
.problem-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.problem-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--bg-warm)}
.problem-icon svg{width:16px;height:16px;color:var(--text-muted)}
.problem-card h4{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.25;margin-bottom:8px}
.problem-card p{font-size:14px;color:var(--text-muted);line-height:1.6}
.problem-callout{font-family:var(--display);font-weight:700;font-size:24px;text-align:center;margin-top:36px}

/* ====================================================
   WHAT I BUILD
   ==================================================== */
.workflow{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:40px}
@media(min-width:768px){.workflow{flex-direction:row;justify-content:center;align-items:center;gap:0}}
.workflow-col{display:flex;flex-direction:column;gap:10px}
@media(min-width:768px){.workflow-col{padding:0 18px}}
.wf-node{
  display:flex;align-items:center;gap:9px;padding:9px 14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);font-size:13px;font-weight:500;color:var(--text-muted);
}
.wf-node svg{width:16px;height:16px;color:var(--text-subtle);flex-shrink:0}
.n8n-hub{width:68px;height:68px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#1A1A1A,#333);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.n8n-hub svg{width:34px;height:34px;color:#fff}
.wf-arrow{display:none}
@media(min-width:768px){.wf-arrow{display:flex;align-items:center;color:var(--text-subtle);font-size:24px;padding:0 6px;flex-shrink:0}}
.wf-arrow-mob{display:none;align-items:center;justify-content:center;color:rgba(0,0,0,0.22);font-size:22px;padding:4px 0;width:100%}
@media(max-width:767px){.wf-arrow-mob{display:flex}}

.cap-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:768px){.cap-grid{grid-template-columns:repeat(3,1fr)}}
.cap-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px}
.cap-card svg{width:18px;height:18px;color:var(--text-muted);margin-bottom:12px}
.cap-card h4{font-family:var(--display);font-weight:700;font-size:16px;color:var(--text);margin-bottom:7px;line-height:1.3}
.cap-card p{font-size:13.5px;color:var(--text-muted);line-height:1.55}

/* ====================================================
   BLUEPRINTS
   ==================================================== */
.cases-section{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cases-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:768px){.cases-grid{grid-template-columns:repeat(3,1fr)}}

/* Flex column so the demo button can be pinned to the card floor with
   margin-top:auto, on the same baseline whatever the copy length. */
.case-card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:all 0.3s cubic-bezier(0.16,1,0.3,1)}
.case-card:hover{border-color:var(--border);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.case-header{padding:22px 22px 0}
.case-kicker{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-subtle);display:block;margin-bottom:8px}
.case-card h3{font-size:17px;font-weight:700;line-height:1.3;margin-bottom:10px;color:var(--text)}
.case-problem-box{
  font-size:13px;color:var(--text-muted);line-height:1.5;
  padding:10px 12px;background:var(--bg-warm);border-radius:var(--radius);
  border-left:2px solid var(--border);
}
.case-problem-box strong{color:var(--text)}
.case-body{padding:16px 22px 22px;display:flex;flex-direction:column;flex:1}
.case-solution{margin-bottom:14px}
.case-solution li{font-size:13px;color:var(--text-muted);padding:4px 0 4px 18px;position:relative;line-height:1.5}
.case-solution li::before{content:'→';position:absolute;left:0;color:var(--text-subtle);font-weight:700}
.case-what{font-size:13.5px;color:var(--text-muted);line-height:1.6;padding-top:12px;border-top:1px solid var(--border-light);margin-bottom:14px}
/* margin-top:auto pins this to the bottom of the card, so the shorter Slovak
   copy no longer leaves it floating mid-card. */
.case-demo-btn{display:flex;align-items:center;justify-content:center;margin-top:auto;font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:700;color:#fff;background:var(--accent);border-radius:var(--radius);padding:12px 18px;box-shadow:var(--shadow-btn);transition:background 0.2s,transform 0.2s}
.case-demo-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}

/* ── Single CTA band ── */
.cta-band{padding:40px 0}
.cta-band .container{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.cta-band p{font-size:15px;font-weight:600;color:var(--text-muted);margin:0;max-width:520px}

/* ====================================================
   WHY ME
   ==================================================== */
#why{background:var(--surface)}
.why-lead{font-size:16px;color:var(--text-muted);max-width:560px;margin:0 auto 36px}
.comparison-wrap{overflow-x:auto}
.comparison-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.comparison-table th{padding:13px 16px;font-size:14px;font-weight:700;text-align:left;background:var(--bg-warm);font-family:'Inter',system-ui,sans-serif}
.comparison-table td{padding:11px 16px;font-size:13px;line-height:1.5;border-top:1px solid var(--border)}
.comparison-table td:first-child{font-weight:600}
.comparison-table td:nth-child(2){color:var(--text-muted)}
.cmp-source{font-size:12px;color:var(--text-subtle);text-align:center;margin:16px auto 0;max-width:580px;line-height:1.5}

/* Neutral glyphs replace the old two-colour tick-and-cross treatment */
.ic,.ix,.ck{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;vertical-align:-3px;margin-right:6px}
.ic,.ck{color:var(--text-muted)}
.ix{color:var(--text-subtle);opacity:.55}
.ic::before,.ck::before,.ix::before{content:"";width:16px;height:16px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ic::before,.ck::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E")}
.ix::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2218%22%20y1%3D%226%22%20x2%3D%226%22%20y2%3D%2218%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%226%22%20x2%3D%2218%22%20y2%3D%2218%22%2F%3E%3C%2Fsvg%3E")}

/* ====================================================
   PROCESS
   ==================================================== */
.steps-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:36px}
@media(min-width:768px){.steps-grid{grid-template-columns:repeat(3,1fr)}}
.step-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 22px 22px;overflow:hidden}
.step-num{position:absolute;top:8px;right:14px;font-family:var(--display);font-weight:800;font-size:80px;color:#ECE7DD;line-height:1;pointer-events:none}
.step-icon{width:36px;height:36px;border-radius:var(--radius);background:var(--bg-warm);color:var(--text-muted);display:flex;align-items:center;justify-content:center;margin-bottom:12px;position:relative;z-index:1}
.step-icon svg{width:20px;height:20px}
.step-card h4{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.25;margin-bottom:7px;position:relative;z-index:1}
.step-card p{font-size:14px;color:var(--text-muted);line-height:1.6;position:relative;z-index:1}

/* ====================================================
   PRICING
   ==================================================== */
.pricing-section{background:var(--bg-dark);color:#F9F8F4;box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
.pricing-section .sh-title{color:#F9F8F4}
.pricing-section .sh-sub{color:rgba(249,248,244,0.55)}
.pricing-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch}
@media(min-width:768px){.pricing-grid{grid-template-columns:repeat(3,1fr)}}

.pricing-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column}
.pricing-card.featured{background:#fff;color:var(--text);box-shadow:0 8px 48px rgba(0,0,0,0.22)}

/* The only three badges left on the page */
.p-badge{
  display:inline-block;font-family:'Inter',system-ui,sans-serif;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
  padding:3px 10px;border-radius:var(--radius);margin-bottom:9px;align-self:flex-start;
  background:rgba(255,255,255,0.10);color:rgba(255,255,255,0.60);
}
.pricing-card.featured .p-badge{background:var(--bg-warm);color:var(--text-muted)}

.p-name{font-family:var(--display);font-weight:700;font-size:19px;margin-bottom:3px;line-height:1.2}
.p-price{font-family:var(--display);font-size:32px;font-weight:800;margin-bottom:2px;letter-spacing:-0.02em}
.p-time{font-size:12px;color:rgba(255,255,255,0.55);margin-bottom:2px}
.pricing-card.featured .p-time{color:var(--text-subtle)}
.p-rush{font-size:12px;color:rgba(255,255,255,0.55);margin-bottom:13px;font-variant-numeric:tabular-nums}
.pricing-card.featured .p-rush{color:var(--text-subtle)}
.p-desc{font-size:13px;color:rgba(255,255,255,0.68);margin-bottom:16px;line-height:1.55}
.pricing-card.featured .p-desc{color:var(--text-muted)}
.p-features{list-style:none;flex:1;margin-bottom:20px}
.p-cta{margin-top:auto}
.p-cta .btn{width:100%}
.p-features li{font-size:13px;padding:5px 0;display:flex;align-items:flex-start;gap:7px;color:rgba(255,255,255,0.80);border-bottom:1px solid rgba(255,255,255,0.06)}
.p-features li:last-child{border-bottom:none}
.pricing-card.featured .p-features li{color:var(--text-muted);border-bottom-color:var(--border-light)}
.p-features .ck{color:rgba(255,255,255,0.45)}
.pricing-card.featured .p-features .ck{color:var(--text-subtle)}

.pricing-microcopy{text-align:center;font-size:13.5px;color:rgba(255,255,255,0.55);margin:28px auto 0;max-width:580px;line-height:1.5}
.pricing-microcopy strong{color:rgba(255,255,255,0.82);font-weight:700}

.guarantee-box{
  border:1px solid rgba(255,255,255,0.14);border-left:2px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.04);border-radius:var(--radius);padding:20px 24px;margin-top:24px;
}
.g-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:5px}
.guarantee-box p{font-size:13px;color:rgba(255,255,255,0.65);line-height:1.55}

/* Collapsible blocks inside pricing */
.tco-details{margin:24px 0 0;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:var(--radius-lg);overflow:hidden}
.tco-details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;font-size:13px;font-weight:700;letter-spacing:0.03em;color:rgba(255,255,255,0.78)}
.tco-details>summary::-webkit-details-marker{display:none}
.tco-details>summary:hover{color:#fff}
.tco-details .tco-chevron{flex-shrink:0;color:rgba(255,255,255,0.45);transition:transform 0.3s}
.tco-details[open]>summary .tco-chevron{transform:rotate(180deg)}
.tco-details .tco-inner{padding:2px 20px 20px}
.tco-header{margin:6px 0 14px;text-align:left}
.tco-header h3{color:#fff;font-size:1.2rem;font-weight:800;margin-bottom:4px}
.tco-header p{color:rgba(255,255,255,0.55);font-size:13px}
.tco-details .comparison-table{box-shadow:none}
.tco-details .comparison-table th{background:rgba(255,255,255,0.06);color:#fff}
.tco-details .comparison-table td{color:rgba(255,255,255,0.82);border-top-color:rgba(255,255,255,0.08)}
.tco-details .comparison-table td:first-child{color:#fff}
.tco-details .comparison-table td:nth-child(2){color:rgba(255,255,255,0.82)}
.tco-details .comparison-table td strong{color:#fff}
.tco-details .ic,.tco-details .ck{color:rgba(255,255,255,0.55)}
.tco-details .ix{color:rgba(255,255,255,0.35)}
.tco-foot{margin-top:14px;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,0.5)}
.tco-foot strong{color:rgba(255,255,255,0.82)}
.terms-row{display:flex;align-items:baseline;gap:6px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.06);font-size:13px}
.terms-row:last-child{border-bottom:none;padding-bottom:0}
.terms-key{color:rgba(255,255,255,0.70);font-weight:600;flex-shrink:0;min-width:140px}
.terms-val{color:rgba(255,255,255,0.62);line-height:1.5}

/* ====================================================
   ABOUT
   ==================================================== */
.about-grid{display:flex;flex-direction:column;gap:32px}
@media(min-width:768px){.about-grid{flex-direction:row;align-items:flex-start;gap:52px}}
.about-photo-wrap{flex:0 0 36%;display:flex;justify-content:center}
.about-photo-c{position:relative;display:inline-block;width:220px;height:264px}
@media(min-width:768px){.about-photo-c{width:300px;height:360px}}
.about-photo{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-lg);background:var(--bg-warm)}
.about-text{flex:1}
.about-text p{font-size:15px;color:var(--text-muted);line-height:1.70;margin-bottom:12px;max-width:480px}
.about-langs{margin-top:14px;font-size:13px;color:var(--text-subtle)}

/* ====================================================
   FAQ
   ==================================================== */
.faq-section{background:var(--bg-warm)}
.faq-list{max-width:680px;margin:32px auto 0}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 0;text-align:left;font-size:15px;font-weight:600;color:var(--text);cursor:pointer}
.faq-icon{flex-shrink:0;font-size:18px;transition:transform 0.3s;margin-left:12px;color:var(--text-subtle)}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.4s ease}
.faq-item.open .faq-a{max-height:420px;padding-bottom:14px}
.faq-a p{font-size:14px;color:var(--text-muted);line-height:1.65}
.faq-showall{display:none}
@media(max-width:768px){
  .faq-list .faq-item:nth-child(n+4){display:none}
  .faq-list.faq-expanded .faq-item:nth-child(n+4){display:block}
  .faq-showall{display:block;width:100%;margin-top:14px;padding:13px;background:transparent;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',system-ui,sans-serif}
}

/* ====================================================
   FORM
   ==================================================== */
.form-section{background:var(--bg-dark);padding:96px 0 104px;position:relative;overflow:hidden}
@media(max-width:767px){.form-section{padding:64px 0 72px}.sh{margin-bottom:34px}}
.form-inner{max-width:540px;margin:0 auto;text-align:center}
.form-title{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3rem);color:#fff;line-height:1.05;margin-bottom:12px;letter-spacing:-0.02em}
.form-sub{font-size:16px;color:rgba(255,255,255,0.50);margin-bottom:32px}

.form-field{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.form-input{
  width:100%;padding:14px 16px;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius);font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;color:#fff;outline:none;transition:border-color 0.2s,background 0.2s;
}
.form-input::placeholder{color:rgba(255,255,255,0.28)}
.form-input:focus{border-color:rgba(255,255,255,0.45);background:rgba(255,255,255,0.10)}
select.form-input{color:#fff}
select.form-input option{color:#0E0D0B;background:#fff}
textarea.form-input{font-family:'Inter',system-ui,-apple-system,sans-serif}
.form-btn{
  background:var(--accent);color:#fff;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;font-weight:700;padding:15px;
  border-radius:var(--radius);box-shadow:var(--shadow-btn);
  transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
  cursor:pointer;border:none;width:100%;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.form-btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.14)}
.form-note{font-size:12px;color:rgba(255,255,255,0.50)}
.form-note a{color:rgba(255,255,255,0.70);text-decoration:underline}

.form-progress{height:3px;background:rgba(255,255,255,0.12);border-radius:3px;margin-bottom:28px;overflow:hidden}
.form-progress-fill{height:100%;background:rgba(255,255,255,0.55);border-radius:3px;transition:width 0.5s cubic-bezier(0.16,1,0.3,1)}
.form-step-lbl{font-size:11px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:rgba(255,255,255,0.50);margin-bottom:20px}
.form-hi{font-size:16px;color:rgba(255,255,255,0.65);margin-bottom:20px;font-weight:500;line-height:1.4;min-height:22px}
.form-hi strong{color:#fff;font-weight:800}
.form-step-block{will-change:opacity,transform}

.niche-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.niche-card{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:18px 15px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);border-radius:var(--radius);color:rgba(255,255,255,0.70);cursor:pointer;transition:all 0.22s cubic-bezier(0.16,1,0.3,1);text-align:left;font-family:'Inter',system-ui,sans-serif}
.niche-card:hover{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.30);color:#fff;transform:translateY(-2px)}
.niche-card.selected{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.55);color:#fff;transform:translateY(-2px)}
.nc-label{font-size:14px;font-weight:700;display:block;line-height:1.2}
.nc-sub{font-size:12px;color:rgba(255,255,255,0.50);font-weight:400;display:block;margin-top:4px;transition:color 0.2s}
.niche-card.selected .nc-sub,.niche-card:hover .nc-sub{color:rgba(255,255,255,0.55)}
.nc-svg{width:26px;height:26px;display:block;margin-bottom:12px;flex-shrink:0;stroke:rgba(255,255,255,0.50);transition:stroke 0.22s}
.niche-card:hover .nc-svg,.niche-card.selected .nc-svg{stroke:rgba(255,255,255,0.88)}

.contact-toggle{display:flex;gap:8px;margin-bottom:10px}
.contact-btn{flex:1;padding:11px 8px;border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.50);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:'Inter',system-ui,sans-serif}
.contact-btn.active{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.30);color:#fff}
.contact-btn-wa{opacity:0.6}
.contact-btn-wa.active{opacity:1}

.other-field-wrap{overflow:hidden;transition:max-height 0.4s ease,opacity 0.4s ease;max-height:0;opacity:0}
.other-field-wrap.open{max-height:200px;opacity:1}

.s1-body{display:flex;flex-direction:column;gap:14px}
.s3-body{display:flex;flex-direction:column;gap:20px}
.s3-contact{display:flex;flex-direction:column;gap:10px}
.s3-lbl{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.50);margin:0}

/* ====================================================
   FOOTER
   ==================================================== */
.footer{background:var(--bg-dark);color:#fff;padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.footer-grid{grid-template-columns:1fr 1fr 1fr}}
/* Logo, not a heading: stays Inter */
.footer-brand h3{font-family:'Inter',system-ui,sans-serif;font-size:16px;font-weight:800;letter-spacing:-0.02em;margin-bottom:4px}
.footer-brand h3 span{color:var(--accent)}
.footer-brand p,.footer-brand .loc{font-size:13px;color:rgba(255,255,255,0.55)}
.footer-links{display:flex;flex-direction:column;gap:6px}
.footer-links a{font-size:13px;color:rgba(255,255,255,0.55);transition:color 0.15s}
.footer-links a:hover{color:rgba(255,255,255,0.90)}
.footer-contact{display:flex;flex-direction:column;gap:9px}
.footer-contact a{font-size:13px;color:rgba(255,255,255,0.55);transition:color 0.15s}
.footer-contact a:hover{color:rgba(255,255,255,0.90)}
.footer-legal{max-width:700px;margin:0 auto;padding:24px 0 0;text-align:center;font-size:12.5px;line-height:1.65;color:rgba(255,255,255,0.5)}
.footer-legal strong{display:block;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:7px;font-weight:700}
.footer-legal a{color:rgba(255,255,255,0.7);border-bottom:1px solid rgba(255,255,255,0.2)}
.footer-legal a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.07);margin-top:24px;padding-top:20px;font-size:12px;color:rgba(255,255,255,0.45);text-align:center}
.footer-bottom a{color:rgba(255,255,255,0.35)}
.footer-bottom a:hover{color:rgba(255,255,255,0.75)}

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media(max-width:767px){
  .hero-ctas{gap:18px}
  .comparison-table{font-size:12px}
  .comparison-table th,.comparison-table td{padding:9px 10px}
  .about-text p{max-width:100%}
}
@media(max-width:600px){
  .cmp-stack thead{display:none}
  .cmp-stack,.cmp-stack tbody,.cmp-stack tr,.cmp-stack td{display:block;width:100%}
  .cmp-stack{box-shadow:none;border-radius:0;overflow:visible}
  .cmp-stack tr{border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:12px;background:var(--surface);overflow:hidden}
  .cmp-stack td{border-top:none;padding:8px 16px}
  .cmp-stack td:first-child{font-weight:700;font-size:14px;background:var(--bg-warm);padding:10px 16px}
  .cmp-stack td[data-c]::before{content:attr(data-c) "  /  ";font-weight:700;color:var(--text-subtle)}
  .comparison-table:not(.cmp-stack){min-width:520px}
}

/* ====================================================
   LANGUAGE SWITCHER (EN · SK · CS)
   ==================================================== */
.lang-switch{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:0.04em;margin-left:14px}
.lang-switch a{color:var(--text-subtle);transition:color 0.15s}
.lang-switch a:hover{color:var(--accent)}
.lang-switch .lang-cur{color:var(--text)}
.lang-switch .lang-sep{color:var(--border)}
@media(max-width:899px){.nav-inner .lang-switch{display:none}}
.mobile-drawer .lang-switch{margin:18px 0 0;font-size:14px;gap:9px}

/* ====================================================================
   MOBILE PASS — everything below is phone-first (tested target: 390px)
   Desktop layout and copy are untouched.
   ==================================================================== */

/* 2 · Hamburger to the right edge. The 3-column grid put it in the middle
   once the desktop nav-links and nav-actions were hidden. */
@media(max-width:899px){
  .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .hamburger{justify-self:auto;margin-right:-8px}
}

/* 3 · Drawer: one compact group instead of ~900px of dead space, and the
   CTA clear of the home indicator. */
/* Symmetric padding, otherwise justify-content:center centres the group inside
   a box whose top padding (clearing the close button) is 44px deeper than its
   bottom — which parked the optical midpoint on "FAQ". */
.mobile-drawer{
  justify-content:center;
  padding:64px 24px calc(64px + env(safe-area-inset-bottom));
}
.drawer-foot{margin-top:20px}

/* .mobile-drawer a (display:block, 20px, --text, padding:9px 0) was beating
   .btn, so the CTA rendered as a left-aligned block with dark text on oxblood.
   Two classes here outrank it. */
.mobile-drawer .drawer-cta{
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;margin-top:14px;padding:14px 20px;
  font-size:15px;font-weight:700;color:#fff;
}
.mobile-drawer .drawer-cta:hover{color:#fff}
/* The language switcher was inverted: .mobile-drawer a (20px, bold, dark) was
   beating .lang-switch a, so the INACTIVE languages looked active. */
.mobile-drawer .lang-switch{margin:0;gap:9px;font-size:15px}
.mobile-drawer .lang-switch a,
.mobile-drawer .lang-switch .lang-cur{display:inline;padding:0;font-size:15px;line-height:1.4}
.mobile-drawer .lang-switch a{color:var(--text-subtle);font-weight:500}
.mobile-drawer .lang-switch a:hover{color:var(--accent)}
.mobile-drawer .lang-switch .lang-cur{color:var(--text);font-weight:700}

/* 4 · Comparison table: the two column labels once at the top of the stack,
   then every row is just glyph + value. Was 14 repetitions of the labels. */
@media(max-width:600px){
  .cmp-stack thead{display:block;margin-bottom:12px}
  .cmp-stack thead tr{display:flex;gap:20px;margin:0;padding:0 2px;border:0;background:none;border-radius:0}
  .cmp-stack thead th{padding:0;background:none;font-size:12.5px;font-weight:700;display:flex;align-items:center}
  .cmp-stack thead th:empty{display:none}
  .cmp-stack td[data-c]::before{content:none}
}

/* 5 · Flow diagram: eight stacked boxes was over a screen and a half.
   Two chip rows, one arrow between them. Child indexes 4-6 are the hub and
   the trailing arrow in .workflow. */
@media(max-width:639px){
  .workflow{gap:10px;margin-bottom:32px}
  .workflow-col{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px;padding:0}
  .wf-node{padding:6px 10px;font-size:12px;gap:6px;border-radius:var(--radius)}
  .wf-node svg{width:13px;height:13px}
  .workflow>:nth-child(4),.workflow>:nth-child(5),.workflow>:nth-child(6){display:none}
  .wf-arrow-mob{padding:0;font-size:20px}
}

/* 8 · Button press — mobile has no hover, so :active is the only affordance. */
.btn:active,.nav-cta:active,.form-btn:active,.case-demo-btn:active,.demo-cta:active{
  transform:scale(0.98);transition-duration:.12s
}

/* ====================================================================
   MOTION — character, not volume. Observer count is unchanged (9/page).
   Every hiding rule is scoped to html.js, so if the script never runs
   nothing is ever invisible.
   ==================================================================== */

/* Hero: a one-time entrance on load, no observer involved. */
@keyframes bmk-enter{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.js .hero h1,.js .hero-sub,.js .hero-guard,.js .hero-ctas,.js .hero-micro{opacity:0;animation:bmk-enter .95s var(--ease) forwards}
.js .hero h1{animation-delay:.05s}
.js .hero-sub{animation-delay:.17s}
.js .hero-guard{animation-delay:.26s}
.js .hero-ctas{animation-delay:.34s}
.js .hero-micro{animation-delay:.35s}

/* Full-width bands settle into focus without moving. */
@keyframes bmk-focus{from{opacity:0;filter:blur(7px)}to{opacity:1;filter:none}}
.js .demo-line>*{animation:bmk-focus 1s var(--ease) .45s both}
.js .pricing-section .sh.reveal.up>*{transform:none}

/* Card rows react to their own section heading, so no extra observers.
   .sh and the grid are siblings inside .container. */
.js .sh.reveal ~ .problem-grid > *,
.js .sh.reveal ~ .cases-grid > *,
.js .sh.reveal ~ .cap-grid > *,
.js .sh.reveal ~ .steps-grid > *{
  opacity:0;transform:translateY(20px) translateX(var(--lx,0));filter:blur(4px);
  transition:opacity .85s var(--ease),transform .9s var(--ease),filter .7s var(--ease);
}
/* Alternating lateral offset — the row assembles instead of marching. */
.js .sh.reveal ~ .problem-grid > :nth-child(odd),
.js .sh.reveal ~ .cases-grid > :nth-child(odd),
.js .sh.reveal ~ .cap-grid > :nth-child(odd),
.js .sh.reveal ~ .steps-grid > :nth-child(odd){--lx:-3px}
.js .sh.reveal ~ .problem-grid > :nth-child(even),
.js .sh.reveal ~ .cases-grid > :nth-child(even),
.js .sh.reveal ~ .cap-grid > :nth-child(even),
.js .sh.reveal ~ .steps-grid > :nth-child(even){--lx:3px}

.js .sh.reveal.up ~ .problem-grid > *,
.js .sh.reveal.up ~ .cases-grid > *,
.js .sh.reveal.up ~ .cap-grid > *,
.js .sh.reveal.up ~ .steps-grid > *{opacity:1;transform:none;filter:none}
.js .sh.reveal.up ~ .problem-grid > :nth-child(2),
.js .sh.reveal.up ~ .cases-grid > :nth-child(2),
.js .sh.reveal.up ~ .cap-grid > :nth-child(2),
.js .sh.reveal.up ~ .steps-grid > :nth-child(2){transition-delay:.08s}
.js .sh.reveal.up ~ .problem-grid > :nth-child(3),
.js .sh.reveal.up ~ .cases-grid > :nth-child(3),
.js .sh.reveal.up ~ .cap-grid > :nth-child(3),
.js .sh.reveal.up ~ .steps-grid > :nth-child(3){transition-delay:.16s}

@media (prefers-reduced-motion: reduce){
  .js .hero h1,.js .hero-sub,.js .hero-guard,.js .hero-ctas,.js .hero-micro,
  .js .demo-line>*{opacity:1;animation:none;filter:none}
  .js .sh.reveal ~ .problem-grid > *,
  .js .sh.reveal ~ .cases-grid > *,
  .js .sh.reveal ~ .cap-grid > *,
  .js .sh.reveal ~ .steps-grid > *{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
}

/* ════════════════════════════════════════════════════════════════════════
   SK REWORK — new blocks. Everything below is additive: new class names
   only, so the EN and CS pages that share this file are untouched.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero: text left, the one moving thing right ── */
.hero-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:48px}}
.hero-media{margin:0}
.hero-media img{
  width:100%;height:auto;display:block;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

/* ── 2. Ako to vyzera: a vertical chain, one step per row ──
   Four columns forced every screenshot into the same 4:3 box and cropped
   whatever did not fit. These are pictures of text - a cropped line of text
   is a broken picture. So: full width for the shot, natural proportions,
   no cover, and the step reads left to right like a sentence. */
.chain{display:grid;gap:0;max-width:980px;margin:0 auto;list-style:none}
.chain-step{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
@media(min-width:860px){
  .chain-step{grid-template-columns:1fr 560px;gap:34px}
}
.chain-shot{
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-sm);line-height:0;
}
.chain-shot img{width:100%;height:auto;display:block}
.chain-num{
  display:block;font-family:var(--display);font-weight:800;font-size:13px;
  color:var(--text-subtle);letter-spacing:.04em;margin-bottom:7px;
}
.chain-text h3{font-size:1.2rem;line-height:1.3;margin-bottom:8px}
.chain-text p{font-size:1rem;color:var(--text-muted);line-height:1.65}

/* the link between two steps: a line down to an arrow head, centred under
   the picture column so the eye follows the pictures, not the text.
   Drawn as an SVG rather than gradients - a conic-gradient head rendered as
   a broken tick in Chromium. */
.chain-step:not(.chain-step-last)::after{
  content:"";display:block;grid-column:1/-1;justify-self:center;
  width:14px;height:52px;margin:24px 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='52' viewBox='0 0 14 52' fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 1V42' stroke-width='1.3' opacity='.55'/%3E%3Cpath d='M2 37l5 6 5-6' stroke-width='1.6'/%3E%3C/svg%3E") center/14px 52px no-repeat;
}
@media(min-width:860px){
  /* the pictures moved to the right column, so the arrow follows them:
     560px column, its centre is 280px in from the right edge, minus half the
     14px arrow */
  .chain-step:not(.chain-step-last)::after{justify-self:end;margin-right:273px}
}

/* ── 3. Co to nerobi ── */
.nerobi-grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:840px;margin:0 auto}
@media(min-width:760px){.nerobi-grid{grid-template-columns:repeat(2,1fr);gap:24px}}
.nerobi-card{border-left:2px solid var(--accent);padding:2px 0 2px 18px}
.nerobi-card h3{font-size:1.1rem;line-height:1.3;margin-bottom:8px}
.nerobi-card p{font-size:.97rem;color:var(--text-muted);line-height:1.65}

/* ── 4. Nic sa nestrati: two points, two equal columns ── */
.nestrati-grid{display:grid;grid-template-columns:1fr;gap:26px;max-width:900px;margin:0 auto}
@media(min-width:760px){.nestrati-grid{grid-template-columns:1fr 1fr;gap:40px}}
.nestrati-col h3{font-size:1.1rem;line-height:1.3;margin-bottom:8px}
.nestrati-col p{font-size:.97rem;color:var(--text-muted);line-height:1.65}

/* the quiet line under a section subtitle */
.sh-note{margin-top:9px;font-size:.86rem;color:var(--text-subtle)}

/* ── 9a. Co sa stane: the same chain as block 2, without pictures ── */
.tl{display:grid;gap:0;max-width:700px;margin:0 auto;list-style:none}
.tl-step{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.tl-num{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);
  font-family:var(--display);font-weight:800;font-size:14px;color:var(--text-muted);
  /* pull the circle onto the heading baseline instead of the box top */
  margin-top:1px;
}
.tl-text h3{font-size:1.1rem;line-height:1.36;margin-bottom:6px}
.tl-text p{font-size:.97rem;color:var(--text-muted);line-height:1.65}
.tl-step:not(.tl-step-last){padding-bottom:26px}
.tl-step:not(.tl-step-last)::after{
  content:"";grid-column:1;justify-self:center;
  width:1px;height:26px;margin:8px 0 -26px;
  background:linear-gradient(to bottom,var(--border),var(--border-light));
}

/* ── 5. Demo: a still that links to the page with the video ── */
.demo-card{
  position:relative;display:block;max-width:720px;margin:0 auto;
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface);
}
.demo-card img{width:100%;height:auto;display:block}
.demo-card-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;background:rgba(14,13,11,.72);
}
.demo-card-play::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
}
.demo-card-label{
  position:absolute;left:0;right:0;bottom:0;padding:14px 18px;
  background:linear-gradient(to top,rgba(14,13,11,.78),transparent);
  color:#fff;font-weight:600;font-size:.97rem;
}
.demo-card:hover .demo-card-play{background:rgba(14,13,11,.86)}

/* ── 6. The server strip: a step after buying, not a third package ── */
.server-strip{
  margin:36px 0 28px;padding:28px 26px;background:var(--bg-dark);color:#fff;
  border-radius:var(--radius-lg);
}
@media(min-width:760px){.server-strip{padding:34px 38px}}
.server-strip h3{font-size:1.25rem;margin-bottom:14px;color:#fff}
.server-strip p{font-size:.97rem;line-height:1.7;color:rgba(255,255,255,.78);margin-bottom:12px}
.server-strip p:last-child{margin-bottom:0}

/* ── Visible focus, everywhere, for keyboard users ── */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.server-strip :focus-visible,.footer :focus-visible,.form-section :focus-visible{
  outline-color:#fff;
}

/* ── Copy placeholders: invisible in production, visible with ?dev ──
   Max writes the real copy. Until then these hold the exact space it will
   take, so the page can be judged at the right length. */
.ph{display:none}
.dev .ph{
  display:block;color:#8a6d1f;background:rgba(214,178,58,.13);
  border:1px dashed rgba(214,178,58,.55);border-radius:6px;
  padding:6px 10px;font-style:italic;font-weight:400;
}
.dev .ph::before{content:"TEXT: ";font-style:normal;font-weight:700;opacity:.75}
.dev .ph-h{font-size:1.05rem;line-height:1.35}
.dev .ph-line{font-size:.95rem}
.dev .ph-p{font-size:.95rem}
.dev .nestrati-shot{position:relative}
.dev .nestrati-shot::after{content:"IMG";position:absolute;right:10px;bottom:8px;font:700 11px Inter,sans-serif;color:var(--text-subtle);letter-spacing:.06em}

/* Hero: the third line is the promise the whole page rests on, so it is set
   apart from the subheading rather than blended into it. */
.hero-guard{
  margin-top:18px;padding-left:14px;border-left:2px solid var(--accent);
  font-size:1.02rem;font-weight:600;line-height:1.5;color:var(--text);
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* Wording Claude drafted, waiting on Max. Invisible in production, marked at ?dev
   so a draft can never be mistaken for approved copy. */
.dev .draft{background:rgba(155,28,46,.10);box-shadow:inset 0 -1px 0 rgba(155,28,46,.45)}
.dev .draft::after{content:" [DRAFT]";font-size:.8em;font-weight:700;color:var(--accent)}

/* The line that carries block 4 into the price: seven manual steps, six of
   them gone, the seventh is the one worth your judgement. Not a card, not a
   heading - one quiet paragraph standing on its own under the block. */
.bridge{
  max-width:640px;margin:36px auto 0;padding-top:24px;
  border-top:1px solid var(--border);
  font-size:1.05rem;line-height:1.65;color:var(--text);text-align:center;
}
@media(min-width:760px){.bridge{font-size:1.1rem}}

/* ── Image slots with no image yet ──
   An empty framed box is worse than no box: it reads as a broken page. Until
   the file exists the slot collapses in production and the layout closes up.
   At ?dev it comes back, so the space can still be judged. Delete the class
   on a container the moment its image lands. */
.no-img{display:none}
.dev .no-img{display:flex}
.dev .s4-shot.no-img,.dev .nestrati-shot.no-img{display:block}
/* the step number used to sit inside the picture; it now stands on its own
   so it survives a missing one */
.s4-num{
  display:block;position:static;margin-bottom:6px;
  font-family:var(--display);font-weight:800;font-size:13px;
  color:var(--text-subtle);letter-spacing:.04em;
}

/* ════════════════════════════════════════════════════════════════════════
   SK REWORK — fixes found by looking at the published page, not the code.
   ════════════════════════════════════════════════════════════════════════ */

/* Secondary hero button. .btn-ghost-dark is white-on-transparent, meant for
   the dark bands; on the light hero it was white text on a white ground -
   invisible. The hero gets its own light-ground variant. */
.hero .btn-ghost-dark{
  background:transparent;color:var(--text);border:1px solid var(--border);
}
.hero .btn-ghost-dark:hover{border-color:var(--text);background:rgba(14,13,11,0.04)}

/* Two-column rows must collapse when their picture is not there yet, or the
   text sits in half the page next to a blank half. */
.nestrati-grid:has(.nestrati-shot.no-img){grid-template-columns:1fr}
@media(min-width:900px){
    .nestrati-grid:has(.nestrati-shot.no-img) .nestrati-text{max-width:760px}
}

/* Two packages, not three. */
@media(min-width:768px){
  .pricing-grid{grid-template-columns:repeat(2,1fr);max-width:840px;margin:0 auto}
}

/* The server strip sits ON the dark pricing band, so a dark fill made it
   disappear into the background. It needs to read as its own block. */
.server-strip{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14);
  border-left:3px solid var(--accent);
}
.server-strip h3{font-size:1.15rem;letter-spacing:-0.01em}
.server-strip p{color:rgba(255,255,255,0.72)}

/* The guarantee paragraphs ran together into one grey block. */
body.sk .guarantee-box p{margin-bottom:10px}
body.sk .guarantee-box p:last-child{margin-bottom:0}
body.sk .guarantee-box p{font-size:.97rem;color:rgba(255,255,255,0.78)}
body.sk .guarantee-box p:first-of-type{color:rgba(255,255,255,0.90)}
/* superseded: the guarantee heading now uses the shared card-heading token */

/* Demo block with no still yet: the link keeps its shape and stays clickable,
   it just has no picture in it. Remove .demo-card-bare when one lands. */
.demo-card-bare{
  aspect-ratio:auto;max-width:none;width:auto;
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 26px 16px 20px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.demo-card-bare .demo-card-play{
  /* relative, not static: the triangle is an absolutely positioned ::after and
     anchors to the nearest positioned ancestor. Static sent it to the link and
     it landed on top of the label. */
  position:relative;top:auto;left:auto;transform:none;
  width:36px;height:36px;flex:0 0 36px;background:var(--accent);
}
.demo-card-bare .demo-card-play::after{border-width:8px 0 8px 13px;left:56%;top:50%}
.demo-card-bare .demo-card-label{
  position:static;padding:0;background:none;color:var(--text);
  font-size:1rem;font-weight:700;
}
.demo-card-bare:hover{border-color:var(--text);box-shadow:var(--shadow)}
.demo-card-bare:hover .demo-card-play{background:var(--accent-hover)}
.demo-wrap-bare{text-align:center}

/* ════════════════════════════════════════════════════════════════════════
   SK lead form. Three fields, one screen, on the dark band.

   Design brief it answers: no stack of identical rounded cards, no gradient,
   nothing shouting. Fields are ruled lines rather than boxes, the four
   answers sit on one row instead of four slabs, and the two buttons do not
   carry the same weight - Odoslat leads, WhatsApp follows.
   ════════════════════════════════════════════════════════════════════════ */
.lead-form[hidden],.lf-msg[hidden]{display:none !important}
.lead-form{display:grid;gap:28px;margin-top:26px;text-align:left}

/* name + mail share a row on desktop, halving the height of the form */
.lf-pair{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:640px){.lf-pair{grid-template-columns:1fr 1fr;gap:24px}}

.lf-row{display:grid;gap:7px}
.lf-fieldset{border:0;padding:0;margin:0}
.lf-label{
  font-size:13px;font-weight:500;letter-spacing:.01em;
  color:rgba(255,255,255,0.52);padding:0;
}

/* A ruled line, not a filled box. One border to look at instead of four. */
.lf-input{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,0.22);
  border-radius:0;padding:9px 2px;color:#fff;
  font-family:inherit;font-size:1.05rem;line-height:1.5;
  transition:border-color .16s ease;
}
.lf-input::placeholder{color:rgba(255,255,255,0.28)}
.lf-input:hover{border-bottom-color:rgba(255,255,255,0.40)}
.lf-input:focus{outline:none;border-bottom-color:#fff}
.lf-input:focus-visible{outline:none}
.lf-input:autofill{-webkit-text-fill-color:#fff}

/* Four answers on one line.

   Same surface the rest of the dark band already uses - .tco-details and
   .guarantee-box: --radius corners, a faint white fill, a thin white border.
   No pill shape, because nothing else on this page is a pill, and no radio
   dot, because the border already says "press me" and the picked state
   already says "this one". The dot said it a third time.

   The border is a touch stronger than on .tco-details on purpose: that panel
   is a disclosure you may ignore, this is a field you have to answer. */
.lf-choices{display:flex;flex-wrap:wrap;gap:10px;padding-top:6px}
.lf-choice{
  position:relative;display:inline-flex;align-items:center;cursor:pointer;
  padding:11px 18px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.04);
  font-size:.98rem;color:rgba(255,255,255,0.72);
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.lf-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.lf-choice:hover{border-color:rgba(255,255,255,0.42);background:rgba(255,255,255,0.08);color:#fff}
.lf-choice:has(input:checked){
  border-color:var(--accent);background:rgba(155,28,46,0.20);color:#fff;font-weight:600;
}
.lf-choice:has(input:focus-visible){outline:2px solid #fff;outline-offset:3px}

/* Something is missing: the rule turns, no invented sentence appears. */
.lf-bad.lf-input{border-bottom-color:#E4708A}
.lf-bad .lf-choice{border-color:rgba(228,112,138,.65)}

.lf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:6px}
.lf-btn{
  font-family:inherit;font-size:15px;font-weight:700;line-height:1;
  border-radius:var(--radius);cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.lf-btn-primary{
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  padding:15px 34px;box-shadow:var(--shadow-btn);
}
.lf-btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* The second action is real, not decorative, but it must not read as an
   equal alternative: the lead is the form, WhatsApp is what happens after. */
.lf-btn-wa{
  display:inline-flex;align-items:center;gap:9px;
  background:transparent;color:rgba(255,255,255,0.72);
  border:0;padding:15px 2px;font-weight:600;
}
.lf-btn-wa:hover{color:#fff}
.lf-wa-mark{width:19px;height:19px;flex:0 0 19px;color:#25D366}
.lf-btn:disabled{opacity:.5;cursor:default}
.lf-btn:disabled:hover{background:var(--accent);color:rgba(255,255,255,0.72)}
.lf-btn-primary:disabled:hover{background:var(--accent)}

.lf-msg{margin-top:22px;font-size:15px;line-height:1.65;color:rgba(255,255,255,0.72)}
.lf-msg a{color:#fff;text-decoration:underline}
.lf-ok-title{color:#fff;font-size:1.35rem;font-weight:800;font-family:var(--display);margin-bottom:6px}
.lf-ok-sub{color:rgba(255,255,255,0.55);font-size:14px}
.lead-form + .form-note,.lf-msg + .form-note{margin-top:22px}
body.sk .form-section .form-note{text-align:left}
@media(max-width:520px){
  .lf-choice + .lf-choice{margin-left:0}
  .lf-choices{gap:2px 18px}
  .lf-actions{gap:4px 18px}
  .lf-btn-primary{width:100%;text-align:center}
}
.form-section .form-sub[hidden]{display:none !important}

/* A feature line is ONE flex child. It used to be several - the checkmark, a
   <span data-bmk> and a bare text node - so the 7px flex gap landed between
   the figure and the word after it and read as a double space. */
.p-features .p-feat{flex:1;min-width:0}

/* The two card buttons must sit on one line. .btn-ghost-dark carries a 1px
   border and .btn-primary did not, so with margin-top:auto the taller one
   started 2px higher. Same box for both. */
.p-cta .btn{border:1px solid transparent;box-sizing:border-box}
.p-cta .btn-ghost-dark{border-color:rgba(255,255,255,0.22)}

/* The step number sat 4px below the heading it belongs to. */
.tl-num{margin-top:-3px}

/* ── Block 4 wears the same accent rule as block 3, so the two read as one
   system rather than two unrelated layouts ── */
.nestrati-col{border-left:2px solid var(--accent);padding:2px 0 2px 18px}

/* The bridge line was 17.6px near-black while the paragraphs around it are
   15.5px muted. Centred, but the same voice as the rest. */
.bridge{font-size:.97rem;color:var(--text-muted)}

/* ── About: centre the photo and the text as one group, and set them level ──
   The row filled the full 1040 container, so the photo sat in a 374px column
   with 37px of dead space on its left while the text ran to the right edge.
   Fixed columns plus justify-content:center put the ink on the page axis. */
@media(min-width:768px){
  .about-grid{
    display:grid;grid-template-columns:300px minmax(0,560px);
    justify-content:center;align-items:center;gap:52px;
  }
  .about-photo-wrap{flex:none}
}

/* the quiet time line above each timeline heading */
.tl-when{
  font-size:.82rem;color:var(--text-subtle);line-height:1.4;margin-bottom:3px;
  letter-spacing:.01em;
}
.tl-text h3{margin-bottom:6px}

/* Grid items refuse to shrink below their content unless told to: the 1fr
   track resolved to 1090px inside a 700px .flow, and the overflow was then
   silently clipped by overflow-x:hidden on html. Both chains get the guard. */
.tl-step,.tl-text,.chain-step,.chain-text{min-width:0}

/* The two-column pricing grid is for the SK page, which has two packages.
   EN and CS still sell three, and the earlier blanket rule pushed their third
   card onto a row of its own. Columns now follow the number of cards. */
@media(min-width:768px){
  .pricing-grid{grid-template-columns:repeat(3,1fr);max-width:none;margin:0}
  .pricing-grid:not(:has(.pricing-card:nth-child(3))){
    grid-template-columns:repeat(2,1fr);max-width:840px;margin:0 auto;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Fixes from the three-width audit (390 / 768 / 1440).
   ════════════════════════════════════════════════════════════════════════ */

/* 1. SILNO — the cookie banner is position:fixed and nothing made room for
   it, so the last footer line was unreachable at every width, and at 390 it
   also sat over the "Meno" field. JS sets --cookie-h while it is up. */
body{padding-bottom:var(--cookie-h,0px)}

/* 2. SILNO — Inter Tight at -0.02em with word-spacing:0 ate the word gaps:
   "odpoveďuž čaká", "Dohodnemedetaily", "Najednom mieste". The caron of ď
   literally touched the next letter. Give the display face its spaces back. */
h1,h2,h3,.g-title,.p-name,.sh-title{word-spacing:.055em}
h1{letter-spacing:-0.015em}

/* 3. SILNO — this one link was at 0.22 alpha against 0.55 on its four
   neighbours: about 1.9:1, it read as disabled. */
.footer-links a[href^="/terms"]{color:rgba(255,255,255,0.55)!important}
.footer-bottom a{color:rgba(255,255,255,0.55)}

/* 4. SILNO — a two-line FAQ question had line-height:normal, so the hook of
   ľ in "veľa" touched the line above, and the text ran under the + sign. */
body.sk .faq-q{line-height:1.32;gap:18px}
body.sk .faq-q .faq-icon{flex:0 0 auto}

/* 5. SILNO — two blocks that look identical stood on axes 30px apart:
   840/24 against 900/40. One measurement for both. */
body.sk .nerobi-grid,body.sk .nestrati-grid{max-width:880px}
@media(min-width:760px){body.sk .nerobi-grid,body.sk .nestrati-grid{gap:32px}}

/* 6. SILNO — inside one dark band the text started at four different left
   edges, because each box had its own border and padding. Same ink edge now. */
body.sk .server-strip{border-left-width:3px;padding-left:35px}
body.sk .guarantee-box{border-left-width:3px;padding:26px 38px 26px 35px}
@media(min-width:760px){body.sk .server-strip{padding:34px 38px 34px 35px}}
body.sk .tco-details>summary{padding-left:37px!important}
body.sk .tco-details .tco-inner{padding-left:37px;padding-right:37px}

/* 7. POMITNO — a filled button was 2px shorter than an outlined one beside
   it and sat 1px higher. Every button carries the border now, visible or not. */
.btn,.lf-btn{border:1px solid transparent;box-sizing:border-box}
.btn-primary{border-color:var(--accent)}
.lf-btn-primary{border-color:var(--accent)}
.lf-btn-wa{border-color:transparent}

/* 8. POMITNO — the drawer overlay was rgba(0,0,0,.3) with no blur, so the
   page read straight through the 90px strip beside the panel. */
.drawer-overlay.open{background:rgba(10,9,8,.62);backdrop-filter:blur(3px)}

/* 9. POMITNO — the drawer centred five links in 844px, leaving ~200px empty
   above and ~270px below. */
.mobile-drawer{justify-content:flex-start;padding-top:76px}

/* 10. POMITNO — the timeline connector was an 18px stub floating in the
   middle of a 150px gap, touching neither circle. Draw it circle to circle. */
.tl-step:not(.tl-step-last)::after{
  width:1px;height:auto;margin:0;background:var(--border);
  position:absolute;left:14px;top:38px;bottom:8px;
}
.tl-step{position:relative}

/* 11. POMITNO — the answer chips had a 2px vertical gap against 18px
   horizontal: two rows of borders almost touching under a thumb. */
.lf-choices{gap:12px}

/* 12. POMITNO — one kind of thing, four sizes: 19.2 / 18.4 / 17.6 / 15px.
   Two tokens: a step heading and a card heading. */
body.sk .chain-text h3{font-size:1.1rem}
body.sk .server-strip h3{font-size:1.1rem;letter-spacing:-0.02em}
body.sk .g-title{font-size:1.1rem;font-family:var(--display);font-weight:800;letter-spacing:-0.02em;margin-bottom:10px}

/* 13. POMITNO — the form heading was the only H2 off the scale. */
body.sk .form-title{font-size:clamp(1.8rem,4vw,2.6rem)}

/* 14. POMITNO — form and footer share a background, so 120-152px of black
   ran together with no boundary. A hairline, not a new colour. */
.footer{border-top:1px solid rgba(255,255,255,0.10)}

/* 15. POMITNO — the show-all button sat 24px wider than the question list
   it belongs to, so its outline stuck out past the row rules. */
@media(max-width:767px){.faq-showall{max-width:680px;margin-left:auto;margin-right:auto}}

/* 16. POMITNO — this breakpoint was max-width:768px while the desktop rules
   start at min-width:768px, so at exactly 768 the page showed 3 of 7
   questions AND a desktop grid. */
@media(min-width:768px) and (max-width:768px){
  .faq-list .faq-item:nth-child(n+4){display:block}
  .faq-showall{display:none}
}

/* 17. POMITNO — tap targets under 44px, the hamburger worst at 38x32. */
.hamburger{min-width:44px;min-height:44px;padding:6px}
.mobile-drawer .close-btn{min-width:44px;min-height:44px}
.lang-switch a{display:inline-block;padding:12px 8px;margin:-12px 0}
.footer-links a,.footer-contact a{padding:6px 0}

/* 18. DRIBNO — the step pictures carried a 1px border that pushed their
   frame to 21px while the text beside them sat at 20px. */
.chain-shot{box-sizing:border-box}

/* 19. DRIBNO — at 390 the photo was centred while every line of text in the
   same section started at the left edge. */
@media(max-width:767px){.about-photo-wrap{justify-content:flex-start}}

/* Timeline: the circle belongs to the whole step, so centre it on the text
   block rather than pinning it to the first line. */
body.sk .tl-step{align-items:start}
body.sk .tl-num{margin-top:22px}

/* A 143px label overflowed a 140px min-width column, so its value started 6px
   after it and the row read as one sentence. */
body.sk .terms-row{display:grid;grid-template-columns:168px 1fr;gap:12px}
body.sk .terms-key{min-width:0}

/* The cookie buttons were the last tap targets under 44px. */
#cookieBanner button{min-height:44px}

/* The WhatsApp button carries an icon, so its box came out 4px taller than
   the send button beside it. One height for the row. */
body.sk .lf-actions .lf-btn{min-height:51px;display:inline-flex;align-items:center;justify-content:center}
body.sk .tl-num{margin-top:26px}

/* 390 audit, second pass. */

/* The about heading was the only one of nine left-aligned, with half the
   margin of the rest. After seven centred sections it read as unfinished. */
body.sk .sh-about{text-align:center;margin-bottom:34px}
@media(min-width:768px){body.sk .sh-about{text-align:left;margin-bottom:16px}}
@media(max-width:767px){
  body.sk .about-photo-wrap{justify-content:center}
  body.sk .about-photo,body.sk .about-photo-c{width:100%;height:auto;max-width:none}
}

/* The cookie banner sits at z-index 200 and the drawer overlay at 104, so an
   open menu was sliced off by the banner. The menu wins while it is open. */
.mobile-drawer.open,.drawer-overlay.open{z-index:260}
body:has(.mobile-drawer.open) #cookieBanner{display:none!important}

/* Last tap targets under 44px. */
.mobile-drawer .lang-switch a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin:0}
.mob-niche{min-height:44px;display:flex;align-items:center}
.footer-links a,.footer-contact a{min-height:44px;display:flex;align-items:center}

/* The answer chips sat at a 1.2:1 border against the black band - they did
   not read as controls until hovered. */
body.sk .lf-choice{border-color:rgba(255,255,255,0.34)}

/* The picked answer in "Odkiaľ Vám chodia dopyty" was 20% accent over black:
   at arm's length it read the same as an untouched chip. Two things were
   wrong. The fill was nearly the band it sat on, and the accent border meant
   to carry the state was overridden by `body.sk .lf-choice` further up, which
   lands at the same specificity and wins on order.

   It now fills with the same red as the submit button, so "the one I picked"
   and "the thing I press" speak one colour. Hover stays a pale wash on
   purpose: a chip under the cursor must never look like a chip already chosen.

   The tick is CSS. It is not part of the value the form sends, so the webhook
   still receives "z mailu", not "✓ z mailu". */
body.sk .lf-choice:has(input:checked){
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}
body.sk .lf-choice:has(input:checked)::before{
  content:"✓";
  margin-right:7px;
  font-weight:700;
  line-height:1;
}

/* Steps 01 and 04 are both letters; 02 and 03 are small cards between them.
   The reply shot is portrait, so at the full 560px column it runs to 660px -
   two and a half times its neighbours, and the chain loses its rhythm. Capped
   here so the two letters stand the same height, and centred so the arrow
   drawn above it still points at the picture rather than past its edge.
   On a phone the cap is gone: there the lines need every pixel of width. */
@media(min-width:860px){
  body.sk .chain-step-last .chain-shot{max-width:462px;margin:0 auto}
}