/* ============================================================
   BADPIECE — service pages (shared layout helpers)
   ------------------------------------------------------------
   Colours, fonts, buttons, panels, the slider and the stickers
   all come from badpiece.webflow.css. This file ONLY adds what
   the service pages need on top of the real design system:
     - scroll-reveal (a robust stand-in for Webflow IX2)
     - the giant two-tone hero
     - a clean slider-slide visual
     - the 7-service list
     - the 6-step process
     - the standards chips
     - a few dark-panel text helpers
   NOTE: in the SPA this stylesheet is linked from index.html, so it loads on
   EVERY route — the homepage included. Service-page rules are keyed off
   .svc-section / .svc-* so they don't touch the homepage; homepage-only tweaks
   live in the "Homepage layout overrides" block at the bottom, scoped to
   .panelcon.
   ============================================================ */

html { scroll-behavior: smooth; }

/* Lenis (weighted smooth scroll) — recommended base styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- language toggle: BADPIECE green sticker, fixed top-right ----------
   One bold label = the language you'd switch to. Black Anton on brand green with
   a hard black outline and a slight tilt; the outline keeps it readable even on
   the green panels, where the fill matches the background. */
.lang-toggle {
  position: fixed;
  top: 22px;
  right: 30px;
  z-index: 70;
  appearance: none;
  cursor: pointer;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: .03em;
  line-height: 1;
  color: var(--black-950, #00171f);
  background: var(--primary-green, #00ff30);
  border: 2.5px solid var(--black-950, #00171f);
  border-radius: 4px;
  padding: 9px 15px 7px;
  box-shadow: 3px 3px 0 var(--black-950, #00171f);
  transform: rotate(-3deg);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.lang-toggle:hover {
  transform: rotate(0deg) scale(1.06);
  background: #fff;
  box-shadow: 4px 4px 0 var(--black-950, #00171f);
}
.lang-toggle:active { transform: rotate(0deg) scale(.98); box-shadow: 1px 1px 0 var(--black-950, #00171f); }
.lang-toggle:focus-visible { outline: 3px solid var(--violet-primary, #9921a3); outline-offset: 3px; }
@media screen and (max-width: 767px) {
  .lang-toggle { top: 16px; right: 16px; font-size: 1.1rem; padding: 7px 12px 5px; }
}

/* ---------- chat launcher: same green sticker as the language toggle.
   Fixed bottom-right placement is handled by the widget's own container; this
   class only carries the sticker look so the two buttons read as a matched set. */
.chat-launch {
  appearance: none;
  cursor: pointer;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: .03em;
  line-height: 1;
  color: var(--black-950, #00171f);
  background: var(--primary-green, #00ff30);
  border: 2.5px solid var(--black-950, #00171f);
  border-radius: 4px;
  padding: 9px 15px 7px;
  box-shadow: 3px 3px 0 var(--black-950, #00171f);
  transform: rotate(-3deg);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.chat-launch:hover {
  transform: rotate(0deg) scale(1.06);
  background: #fff;
  box-shadow: 4px 4px 0 var(--black-950, #00171f);
}
.chat-launch:active { transform: rotate(0deg) scale(.98); box-shadow: 1px 1px 0 var(--black-950, #00171f); }
.chat-launch:focus-visible { outline: 3px solid var(--violet-primary, #9921a3); outline-offset: 3px; }
@media screen and (max-width: 767px) {
  .chat-launch { font-size: 1.05rem; padding: 7px 12px 5px; }
}

/* ---------- mobile menu (global, phones only) ----------
   A fixed hamburger whose solid background MIRRORS the section under it (set
   live from components/mobile-menu.tsx — background/color/border-color are
   inline, so they always match the panel behind), opening a full-screen overlay
   with the cross-site links + the folded-in language switch. Shown ≤767px;
   above that the desktop chrome (logo + lang sticker) is unchanged. */
.bp-topbar { display: none; }
.bp-menu-toggle { display: none; }
@media screen and (max-width: 767px) {
  .lang-toggle { display: none; }            /* folded into the menu on phones */
  /* opaque band carrying the logo + hamburger row, so content scrolls cleanly
     under it instead of colliding with the logo. Mirrors the section colour
     (set inline); above the content, below the logo (z 60) + hamburger (z 90). */
  .bp-topbar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    z-index: 55;
    pointer-events: none;                    /* never block taps or touch-scroll */
  }
  .bp-menu-toggle {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    appearance: none;
    cursor: pointer;
    border: 2.5px solid var(--black-950);
    border-radius: 4px;
    /* box-shadow + colours are set inline (ink-aware) so the button always reads
       as a solid sticker — even when its mirrored fill matches the section. */
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
}
.bp-menu-ico { display: block; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }

.bp-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;              /* above the chat launcher (zIndex 9999) + cookie banner */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
}
@media (prefers-reduced-motion: no-preference) {
  .bp-menu-overlay { animation: bp-menu-in .2s ease both; }
  @keyframes bp-menu-in { from { opacity: 0; } to { opacity: 1; } }
}
.bp-menu-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 2.5px solid currentColor;
  border-radius: 4px;
  font-size: 1.25rem;
  line-height: 1;
}
.bp-menu-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.bp-menu-link {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--space-2) 0;
  text-align: left;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 13vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.bp-menu-link.is-current { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 3px; }
.bp-menu-lang { display: flex; gap: var(--space-3); margin-top: var(--space-12); }
.bp-menu-lang button {
  appearance: none;
  cursor: pointer;
  background: transparent;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: .03em;
  line-height: 1;
  color: inherit;
  border: 2px solid currentColor;
  border-radius: 4px;
  padding: 9px 15px 7px;
  opacity: .45;
  transition: opacity .15s ease;
}
.bp-menu-lang button.is-active { opacity: 1; }

/* ---------- cookie consent: white sticker card, fixed bottom-left ----------
   Real consent gate for Google Analytics (src/lib/analytics.ts): GA loads
   only after "allow", and "reject" gets the exact same button weight — no
   dark patterns. Same sticker family as the lang toggle and chat launcher:
   hard black outline + offset shadow. Bottom-LEFT so it never collides with
   the chat launcher; on phones it spans the width and sits above it. */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 30px;
  z-index: 80;
  max-width: 420px;
  background: #fff;
  border: 2.5px solid var(--black-950, #00171f);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--black-950, #00171f);
  padding: 18px 20px;
  transform: rotate(-1deg);
}
@media (prefers-reduced-motion: no-preference) {
  .cookie-banner { animation: cookie-banner-in .3s ease both; }
  @keyframes cookie-banner-in { from { opacity: 0; } to { opacity: 1; } }
}
.cookie-banner-text {
  margin: 0 0 12px;
  color: var(--black-950, #00171f);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
}
.cookie-banner-actions { display: flex; gap: 10px; }
.cookie-banner-ok,
.cookie-banner-no {
  appearance: none;
  cursor: pointer;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: .03em;
  line-height: 1;
  color: var(--black-950, #00171f);
  background: var(--primary-green, #00ff30);
  border: 2.5px solid var(--black-950, #00171f);
  border-radius: 4px;
  padding: 8px 14px 6px;
  box-shadow: 3px 3px 0 var(--black-950, #00171f);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.cookie-banner-no { background: #fff; }
.cookie-banner-ok:hover,
.cookie-banner-no:hover { transform: scale(1.06); box-shadow: 4px 4px 0 var(--black-950, #00171f); }
.cookie-banner-ok:hover { background: #fff; }
.cookie-banner-no:hover { background: var(--primary-green, #00ff30); }
.cookie-banner-ok:active,
.cookie-banner-no:active { transform: scale(.98); box-shadow: 1px 1px 0 var(--black-950, #00171f); }
.cookie-banner-ok:focus-visible,
.cookie-banner-no:focus-visible { outline: 3px solid var(--violet-primary, #9921a3); outline-offset: 3px; }
@media screen and (max-width: 767px) {
  .cookie-banner { left: 16px; right: 16px; bottom: 84px; max-width: none; transform: none; }
}

/* link to the privacy policy inside the banner text */
.cookie-banner-more {
  color: var(--black-950, #00171f);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-banner-more:hover { color: var(--violet-primary, #9921a3); }

/* footer legal row: privacy policy link + "cookie settings" (reopens the
   consent banner — withdrawing consent has to be as easy as giving it) */
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; }
.cookie-settings {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--black-950, #00171f);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .12s ease;
}
.cookie-settings:hover { color: var(--violet-primary, #9921a3); }
.cookie-settings:focus-visible { outline: 3px solid var(--violet-primary, #9921a3); outline-offset: 3px; }

/* ---------- privacy policy page: plain prose, no Webflow runtime ---------- */
.privacy-page { background: #fff; min-height: 100vh; padding: 120px 0 100px; }
.privacy-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  color: var(--black-950, #00171f);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.privacy-inner p { margin: 0 0 14px; }
.privacy-back {
  display: inline-block;
  margin-bottom: 48px;
  color: var(--black-950, #00171f);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.privacy-back:hover { color: var(--violet-primary, #9921a3); }
.privacy-heading { margin: 0 0 6px; font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: 1.05; }
.privacy-updated { color: var(--base-color-neutral--neutral, #666); margin-bottom: 32px; }
.privacy-subheading { margin: 40px 0 12px; font-size: 1.6rem; }
@media screen and (max-width: 767px) {
  .privacy-page { padding-top: 90px; }
}

/* ---------- minimal nav: the brand mark, fixed top-left ---------- */
.svc-home {
  position: fixed;
  top: 22px;
  left: 40px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
}
.svc-home img.svc-logo { width: 60px; height: auto; }
/* fade the logo out while scrolling so it never sits on top of moving content */
.svc-home { transition: opacity .28s ease, transform .28s ease; }
html.is-scrolling .svc-home { opacity: 0; transform: translateY(-10px); pointer-events: none; }
/* match the homepage's logo swap: white "B" (logo-secondary) on the dark navy
   panels, navy "B" (logo-primary) on the green/white panels. service-pages.js
   toggles html.logo-light based on the section behind the logo. (display lives
   only on the swap classes so neither rule out-specifies the other.) */
.svc-home .svc-logo--ondark { display: block; }
.svc-home .svc-logo--onlight { display: none; }
html.logo-light .svc-home .svc-logo--ondark { display: none; }
html.logo-light .svc-home .svc-logo--onlight { display: block; }

/* ---------- section rhythm ----------
   The homepage panels are a hard 100vh built around full-bleed imagery.
   The service sections are text-led, so forcing 100vh + vertical centering
   just left big empty bands. Instead: natural height with consistent,
   generous vertical padding. (!important to beat the framework's
   .section.background-color-* padding overrides.) */
.svc-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.svc-inner { width: 100%; }

/* Content-led sections (the 7-service lists, the steps, the "where to start"
   cards) anchor to the top, clear the fixed corner logo, and KEEP the 100vh
   panel feel. The container + rows flex to fill the screen, so a short list (5
   rows) or the 3 cards still occupy ~100vh instead of leaving a dead band — but
   the rows use flex-basis:auto (their own content height) rather than 0, so a
   long list (security: 7 services + chips, longer in Czech) is never crammed:
   it just grows past 100vh and scrolls. The scroll layer stops snapping inside
   any section taller than the viewport. */
.svc-section:has(.svc-list),
.svc-section:has(.svc-steps),
.svc-section:has(.svc-start) {
  justify-content: flex-start;
  padding-top: 7rem !important;
  padding-bottom: 4.5rem !important;
}
.svc-section:has(.svc-list) > .container,
.svc-section:has(.svc-steps) > .container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* The 3 "where to start" cards are always short — centre them so the section
   reads as a deliberate, spacious full screen (desktop only; on tablet/phone
   they stack and the section just flows). */
@media screen and (min-width: 992px) {
  .svc-section:has(.svc-start) { justify-content: center; }
}

/* ---------- hero composition ----------
   Stacked, not side-by-side: the giant heading owns the space, the supporting
   line sits beneath it, then the buttons. Side-by-side left a dead void on the
   right (no imagery to fill it) — stacking removes it and reads as deliberate
   "exaggerated minimalism". */
.svc-section .flex-row.mobile-flex-reverse.mobile-reverse.gap20 {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.svc-section .flex-column.align-right.max-width-small {
  align-items: flex-start;
  max-width: 46rem;
}
.svc-hero-title { letter-spacing: -0.015em; margin-bottom: .25rem; }
.svc-section .flex-column.align-right .paragraph {
  font-size: 1.375rem;
  line-height: 1.5;
}
.svc-hero-hand { display: none; }   /* pointed at nothing in this layout */

/* ---------- text on the navy panels ---------- */
.svc-ondark,
.svc-ondark .heading-style-h1,
.svc-ondark .heading-style-h2,
.svc-ondark .heading-style-h4,
.svc-ondark .heading-style-h5,
.svc-ondark .paragraph,
.svc-ondark h3,
.svc-ondark p { color: #fff; }
.svc-accent { color: var(--primary-green); }
/* on the green panels, green-on-green is invisible — use the violet accent there */
.background-color-primary .svc-accent,
.background-color-secondary .svc-accent { color: var(--violet-primary); }

/* ---------- hero ---------- */
.svc-hero-title span { display: block; }
.svc-lead { max-width: 46rem; margin-top: var(--space-6); }
.svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-10);
}
.svc-hero-hand { width: 120px; height: auto; margin-top: var(--space-8); }

/* ---------- section intros ---------- */
.svc-claim { max-width: 20ch; letter-spacing: -0.015em; }
.svc-claim-md { max-width: 26ch; letter-spacing: -0.015em; }
.svc-eyebrow {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--violet-primary);
  font-size: 1.125rem;
  margin: 0 0 var(--space-4);
}
.svc-section-lead { max-width: 42rem; margin-top: var(--space-5); font-size: 1.2rem; line-height: 1.55; }

/* ---------- scroll reveal ----------
   Elements start hidden; Motion (js/animations.js) animates them in on scroll.
   Gated on .w-mod-js so no-JS users just see the content. A fail-safe class
   (.reveal-fallback, added by service-pages.js if Motion never loads) reveals
   everything, so content can never get stuck hidden. */
.w-mod-js [data-reveal] { opacity: 0; will-change: opacity, transform; }
.reveal-fallback [data-reveal] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .w-mod-js [data-reveal] { opacity: 1 !important; transform: none !important; }
}
.svc-noanim [data-reveal] { opacity: 1 !important; transform: none !important; }
html.svc-noanim { scroll-behavior: auto; }

/* ---------- "where most companies start" cards ----------
   The three entry-point services as a clean 3-up grid (replaced the old
   carousel). Self-contained classes — they don't touch the homepage slider. */
.svc-start {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
  width: 100%;
}
.svc-start-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 14px;
  background: #fff;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.svc-start-card:hover {
  border-color: var(--violet-primary);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -20px rgba(0, 0, 0, .45);
}
.svc-start-card__title {
  margin: 0;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  line-height: 1.12;             /* room for Czech diacritics (háček / kroužek) */
  letter-spacing: -.01em;
}
.svc-start-card__tagline {
  margin: 0;
  color: var(--violet-primary);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.svc-start-card__desc { margin: .35rem 0 0; font-size: 1rem; line-height: 1.55; }
.svc-start-card__meta { margin-top: auto; padding-top: var(--space-4); font-size: .95rem; line-height: 1.5; }
.svc-start-card__meta strong { color: #0a7b1f; }   /* dark green — readable on white */

/* ---------- the homepage flagship slider ----------
   (These rules are global; the service pages no longer use a slider, so they now
   only style the homepage carousel.) */
.custom-dots {
  flex-wrap: wrap;
  justify-content: center;        /* group the labels, don't sprawl them */
  gap: var(--space-4) var(--space-8);
  margin: var(--space-10) auto 0;         /* space below the section heading */
  max-width: 880px;
}
.slider-2 { margin-top: var(--space-8); }

/* slide title sits BELOW the section heading, never above it
   (the homepage .title2/4/5 are 90px — too big for a sub-section here) */
.slider-2 .word-break {
  font-size: clamp(2.25rem, 4.2vw, 3.25rem) !important;
  line-height: 1.04 !important;
  word-break: normal !important;
}

/* visible controls — the index dots (the homepage styles these inline; we
   replicate so they're not invisible on white) + active label highlight */
.slider-2 .w-slider-nav { position: static; height: auto; margin-top: var(--space-6); }
.w-slider-dot {
  width: 12px; height: 12px; margin: 0 6px;
  background-color: var(--black-950); opacity: .3;
  transition: opacity .2s, background-color .2s;
}
.w-slider-dot.w-active { background-color: var(--violet-primary); opacity: 1; }
.custom-dot { transition: color .2s; }
.custom-dot.w-active { color: var(--violet-primary); }

/* ---------- service / who-we-help list ----------
   Bold editorial rows with hairline rules — NOT a SaaS card grid (the
   homepage has no such grid). Big Anton names carry the section. */
.svc-list {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
  margin-top: var(--space-6); width: 100%;
}
.svc-list-item {
  /* flex-basis:auto (not 0) is the key: rows start at their own content height
     and then grow EQUALLY to fill a short section (no dead band) — but a long
     list (7 services + chips, longer in Czech) is never crammed below its
     content; it just grows past 100vh and scrolls. */
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  column-gap: var(--space-14);
  row-gap: var(--space-1);
  align-items: baseline;
  align-content: center;       /* centre content when the row grows */
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(0, 0, 0, .16);
}
.svc-list-item:last-child { border-bottom: 1px solid rgba(0, 0, 0, .16); }
.svc-list-item h3 {
  margin: 0;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 2.7vw, 2.6rem);
  line-height: .98;
  letter-spacing: -.012em;
}
.svc-list-item p { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.svc-ondark .svc-list-item { border-color: rgba(255, 255, 255, .22); }

/* ---------- process — oversized numbers, editorial rows ---------- */
.svc-steps {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
  margin-top: var(--space-6); width: 100%;
}
.svc-step {
  flex: 1 1 auto;              /* fill when short, grow past 100vh when long */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-10);
  align-items: baseline;
  align-content: center;
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(0, 0, 0, .16);
}
.svc-step:last-child { border-bottom: 1px solid rgba(0, 0, 0, .16); }
.svc-step-num {
  grid-row: 1 / 3;
  align-self: start;
  font-family: Anton, sans-serif;
  font-size: clamp(2.75rem, 4.6vw, 4.5rem);
  line-height: .85;
  color: var(--violet-primary);
}
.svc-step h3 {
  grid-column: 2;
  margin: 0 0 .35rem;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.3vw, 2.15rem);
  line-height: 1;
  letter-spacing: -.012em;
}
.svc-step p { grid-column: 2; margin: 0; font-size: 1.0625rem; line-height: 1.55; max-width: 54ch; }
.svc-ondark .svc-step { border-color: rgba(255, 255, 255, .22); }

/* ---------- standards chips (security page) ---------- */
.svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.svc-chip {
  font-family: Poppins, sans-serif;
  font-size: .875rem;
  letter-spacing: .02em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 160px;
  padding: var(--space-2) var(--space-4);
}

/* ---------- differentiation (attitude panel) ---------- */
/* size the stacked lines so they don't wrap to 5 lines + overflow the screen */
.background-color-secondary .heading-style-h1 {
  font-size: clamp(2.75rem, 5.2vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.01em;
}
.background-color-secondary .paragraph-3 { font-size: 1.3rem; line-height: 1.55; }

/* ---------- final CTA + sibling routing ---------- */
.svc-cta { align-items: center; text-align: center; gap: var(--space-10) !important; }
/* a bigger, more confident primary button — hover/press come from the
   shared .button system (design-system.css), so only the size lives here */
.svc-cta > .button.w-button {
  font-size: 1.35rem;
  padding: var(--space-4) var(--space-12);
}
/* siblings as bold editorial links with a green underline, not generic pills */
.svc-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-10);
  justify-content: center;
  margin-top: var(--space-2);
}
.svc-siblings .button.is-secondary {
  border: 0;
  border-bottom: 3px solid var(--primary-green);
  border-radius: 0;
  background: transparent;
  box-shadow: none;                 /* opt out of the .button sticker shadow */
  color: #fff;
  padding: 0 0 6px;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  transition: color .15s ease, border-color .15s ease;
}
.svc-siblings .button.is-secondary:hover {
  background: transparent;
  box-shadow: none;
  transform: none;                  /* it's a text link, not a sticker — no lift */
  color: var(--primary-green);
  border-bottom-color: #fff;
}

/* ---------- contact form: centred, sensible width ----------
   .div-block-7 is capped at max-width:960 and left-aligned by the framework; the
   form centres WITHIN it, so the whole block reads as left-shifted. Centre the
   block itself, and the form (which already centres inside it) lands centred. */
footer#contact .div-block-7 { max-width: 960px; margin-left: auto; margin-right: auto; }
footer#contact .form-block { width: 100%; max-width: 760px; }

/* the contact footer is the page's last band — trim its bottom padding so the
   address row sits near the page edge instead of floating above a 5rem gap
   (id + class beats the .svc-section !important) */
footer#contact.svc-section { padding-bottom: 1rem !important; }

/* the divider above the address runs edge-to-edge, not just across the content
   column (the address text stays put — only the rule is full-bleed) */
footer#contact .footer { position: relative; border-top-style: none; }
footer#contact .footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  border-top: 1px solid var(--black-950, #00171f);
}

/* ---------- contact: a single centred column, vertically centred ----------
   The title centred at the top of the stack, the form centred beneath it, the
   address at the bottom — the layout the contact has always used. (An earlier
   wide-screen two-column experiment is reverted; it read as off-brand.)
   .container fills the panel, .div-block-7 is stopped from growing (it ships
   with flex:1, which otherwise shoves the form to the top → top-heavy), and the
   title+form pair is pulled to the vertical centre with auto margins while the
   address stays pinned to the bottom. */
@media screen and (min-width: 768px) {
  /* The container fills the panel; the title+form pair is pulled to the vertical
     centre with auto margins (margin-top on the title, margin-bottom on the form)
     while the address stays pinned to the bottom. .div-block-7 ships with flex:1 —
     left growing, it eats all the slack and the form sticks to the top, so it is
     pinned to its content height here. */
  footer#contact > .container { flex: 1 1 auto; }
  footer#contact > .container > .flex-row.center { margin-top: auto; }
  footer#contact > .container > .div-block-7 { flex: 0 0 auto; margin-bottom: auto; }
}

/* Same single centred column for the homepage contact (.div-block-13 holds the
   title + form, its sibling .footer holds the address): drop the two-column grid
   so it stacks centred, then let the panel fill, centre the title+form, and pin
   the address to the bottom. */
@media screen and (min-width: 768px) {
  .panelcon .section.panel.background-color-primary._100vh:has(.div-block-13) {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-16) !important;
    /* match the service/reality footer — address sits near the page edge,
       not floating above a large gap */
    padding-bottom: 1rem !important;
  }
  .panelcon .section.panel.background-color-primary._100vh:has(.div-block-13) > .container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .panelcon .section.panel.background-color-primary._100vh:has(.div-block-13) > .footer { flex: 0 0 auto; }
}

/* ---------- packages / outputs two-column on green panel ---------- */
.svc-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10) var(--space-14);
  margin-top: var(--space-12);
  width: 100%;
}
.svc-col h3 { margin: 0 0 var(--space-2); }
.svc-col p { margin: 0 0 var(--space-1); }
.svc-col ul { margin: var(--space-2) 0 0; padding-left: var(--space-4); }
.svc-col li { margin-bottom: var(--space-1); }

/* ---------- micro-interactions (a little life on hover) ---------- */
.svc-list-item h3, .svc-step h3 { transition: color .2s ease; }
.svc-list-item:hover h3, .svc-step:hover h3 { color: var(--violet-primary); }
.svc-ondark .svc-list-item:hover h3, .svc-ondark .svc-step:hover h3 { color: var(--primary-green); }
.custom-dot { cursor: pointer; }
.custom-dot:hover { color: var(--violet-primary); }
/* (.button transition + hover now owned by the shared sticker system in
   design-system.css — the old translateY lift conflicted with the press) */

/* ============================================================
   responsive
   ============================================================ */
@media screen and (max-width: 991px) {
  .svc-cols { grid-template-columns: 1fr 1fr; }
  /* fluid hero — scales with the viewport so it never clips off the right edge */
  .heading-style-h1.font-size-150 { font-size: clamp(32px, 8.5vw, 104px); }
  /* "where to start" cards: stack to one column on tablet/phone */
  .svc-start { grid-template-columns: 1fr; }
}

@media screen and (max-width: 767px) {
  /* on phones, drop the 100vh-screen model — let it flow naturally */
  .svc-section { min-height: 0; justify-content: flex-start; padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
  /* the hero (first section) is top-aligned, so at scroll 0 its content butts
     against the fixed top bar + logo/hamburger (~70px). Give it extra clearance
     so it clears the header band with breathing room; later sections scroll
     under the opaque band and are masked, so they keep the base padding. */
  main > .svc-section:first-child { padding-top: 6.5rem !important; }
  .svc-list, .svc-steps { display: block; flex: none; }
  .svc-cols { grid-template-columns: 1fr; }
  .svc-list-item { grid-template-columns: 1fr; row-gap: .55rem; padding: 1.3rem 0; }
  .svc-step { column-gap: 1.4rem; }
  /* slide stacking + full-width visual handled by the <=991px rule above */
  .svc-home { top: 16px; left: 18px; }
  .svc-home img.svc-logo { width: 40px; }
  .svc-section .flex-row.mobile-flex-reverse.mobile-reverse.gap20 { align-items: stretch; }
  footer#contact .form-block { max-width: 100%; }
}

/* ============================================================
   Homepage layout overrides
   ------------------------------------------------------------
   This file loads on every route, so these are scoped to .panelcon
   (homepage only). The same sections on the service pages are .svc-section
   and are already handled above.
   ============================================================ */

/* "the good, the bad, the badpiece." panel — it top-aligned its content in a
   100vh section, leaving the bottom half empty. Centre it vertically (the
   service-page version already centres via .svc-section) and give it room. */
.panelcon .section.background-color-secondary.overflow-hidden.panel._100vh {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 6vh !important;
  padding-bottom: 6vh !important;
}

/* Hero "light switch" gate — the original Webflow toggle shipped without its CSS,
   so it rendered as a bare control. Rebuilt on-brand: a clear track + knob that
   turns BADPIECE green when on, with a bold "Light it up" label so it reads as an
   action. (Scoped to the homepage intro via #intro / .code-embed.) */
#intro .code-embed .switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  user-select: none;
}
#intro .code-embed .switch input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
#intro .code-embed .slider {
  position: relative;
  flex: none;
  width: 78px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 2px solid rgba(255, 255, 255, .4);
  transition: background-color .25s ease, border-color .25s ease;
}
#intro .code-embed .slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s ease, background-color .25s ease;
}
#intro .code-embed input:checked + .slider {
  background: var(--primary-green, #00ff30);
  border-color: var(--primary-green, #00ff30);
}
#intro .code-embed input:checked + .slider::before {
  transform: translateY(-50%) translateX(38px);
  background: var(--black-950, #00171f);
}
#intro .code-embed input:focus-visible + .slider {
  outline: 3px solid var(--primary-green, #00ff30);
  outline-offset: 4px;
}
#intro .code-embed .switch-text {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.3rem;
  color: #fff;
  transition: color .2s ease;
}
#intro .code-embed input:checked ~ .switch-text { color: var(--primary-green, #00ff30); }

/* "Light it up" reveal — flipping the hero toggle irises the REAL panels in:
   the panels are clipped to a zero-radius circle at the viewport centre, then
   the circle expands to the edges, so the green "Welcome to the rebelion"
   section bursts out of the navy from the centre. No overlay element; the clip
   is added/removed by home-glue. Centre is 50% wide × 50vh down = viewport
   centre (the panels' top sits at scroll 0 when this runs). */
.panelcon.reveal-iris {
  clip-path: circle(0% at 50% 50vh);
  will-change: clip-path;
}
.panelcon.reveal-iris.reveal-iris-open {
  /* 72vmax just clears the farthest corner for any aspect ratio — bigger than
     that and the screen is covered before the transition ends (the reveal looked
     faster than its duration). */
  clip-path: circle(72vmax at 50% 50vh);
  transition: clip-path 1.6s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .panelcon.reveal-iris { clip-path: none; }
}

/* ============================================================
   reality.badpiece.com — pricing (scoped .rl-*; loaded everywhere
   but only used on the reality landing page)
   ============================================================ */
.rl-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-8);
}
.rl-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 14px;
  background: #fff;
}
.rl-plan--featured {
  border-color: var(--violet-primary);
  box-shadow: 0 0 0 2px var(--violet-primary);
}
.rl-plan__badge {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: var(--space-6);
  background: var(--violet-primary);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 4px 12px;
  border-radius: 999px;
}
.rl-plan__name { font-size: 1.5rem; font-weight: 700; margin: 0; }
.rl-plan__promise { color: var(--violet-primary); font-weight: 600; margin: 0; }
.rl-plan__for { opacity: .7; margin: 0 0 var(--space-2); }
.rl-plan__price { font-size: 2rem; font-weight: 700; line-height: 1.1; margin: 0; }
.rl-plan__vat { opacity: .6; font-size: .9rem; margin: 0 0 var(--space-4); }
.rl-plan__features { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.rl-plan__features li { position: relative; padding-left: 1.5rem; }
.rl-plan__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary-green);
  font-weight: 700;
}
.rl-plan .button { margin-top: auto; }
.rl-pricing-notes { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.rl-note { max-width: 760px; margin: 0; }
.rl-note--guarantee {
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 14px;
  padding: var(--space-4) var(--space-6);
  background: #fff;
}
@media (max-width: 860px) {
  .rl-pricing { grid-template-columns: 1fr; }
}

/* reality — comparison table (šablona vs. Badpiece) */
.rl-compare-wrap { overflow-x: auto; margin-top: var(--space-6); }
.rl-compare { width: 100%; border-collapse: collapse; min-width: 540px; }
.rl-compare th,
.rl-compare td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  vertical-align: top;
}
.rl-compare thead th { font-weight: 700; }
.rl-compare thead th:last-child { color: var(--violet-primary); }
.rl-compare tbody th { font-weight: 600; white-space: nowrap; }
.rl-compare__us { color: var(--violet-primary); font-weight: 600; }

/* ============================================================
   reality.badpiece.com — page-scoped polish (.rl-page)
   ------------------------------------------------------------
   Loaded on every route but gated on .rl-page (the reality
   <main>), so none of this leaks onto the AI / other service
   pages that share the .svc-* chrome. Same flow, same brand
   language (Anton display, brand-green stickers, violet accent,
   navy) — just a tighter hierarchy, better readability and more
   pizzazz on the reality-only blocks (hero, "why" cards, the
   comparison table and the pricing tier cards).
   ============================================================ */
:root { --rl-ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- hero: heading + CTA left, calculator right ----------
   Option A from the brief: the long Czech headline + CTA own the left column,
   the interactive lost-commission calculator anchors the right, the whole thing
   vertically centred on the navy panel. Stacks (calc under the copy) below the
   breakpoint. The headline is scaled down from the 150px display size so 3–4
   lines fit the narrower column and clear the fixed corner logo. */
.rl-page .rl-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  width: 100%;
}
@media (min-width: 992px) {
  .rl-page .rl-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem); }
}
.rl-page .rl-hero__title.font-size-150 {
  font-size: clamp(2.5rem, 4.7vw, 5rem);
  /* Anton is a tall display face and its uppercase Czech diacritics (Ý, Á, Ě, Ů)
     sit ABOVE the cap line — at 1.1 the acute/háček of one line kissed the line
     above. 1.26 gives them clear air without reading as loose. */
  line-height: 1.26;
  letter-spacing: -.022em;
  margin-bottom: var(--space-6);
}
.rl-page .rl-hero__sub { font-size: 1.2rem; line-height: 1.6; max-width: 40rem; }
.rl-page .rl-hero__actions { margin-top: var(--space-8); }
.rl-page .svc-section-lead { line-height: 1.6; }

/* CTA on the dark bands (hero + Ukázka): the primary becomes the brand-green
   sticker — violet reads muddy on navy, while green matches the page's other
   green stickers (lang toggle, chat) and pops off the dark. ONLY the fill + ink
   are overridden; the white outline is inherited from the base .button. */
.rl-page .svc-ondark .svc-actions .button:not(.is-secondary):not(.is-alternate) {
  background-color: var(--primary-green);
  color: var(--black-950);
}
.rl-page .svc-ondark .svc-actions .button:not(.is-secondary):not(.is-alternate):hover {
  background-color: #fff;
  color: var(--black-950);
}
/* the base .button's hard GREEN offset shadow (the only sticker offset that
   shows on navy) reads as a detached green smear behind these buttons — there's
   no light surface to catch it. Drop the offset on the dark CTA bands; the thick
   white outline carries the sticker. The press still nudges via the transform. */
.rl-page .svc-ondark .svc-actions .button,
.rl-page .svc-ondark .svc-actions .button:hover,
.rl-page .svc-ondark .svc-actions .button:active { box-shadow: none; }

/* green accent is invisible on the green/white panels — use violet there */
.rl-page .background-color-white .svc-accent { color: var(--violet-primary); }

/* ---------- problem: statement + the three silent leaks on one white panel ----
   Merges the old marooned green statement panel and the white card panel into a
   single white section: a true statement-scale headline, the 01/02/03 cards, and
   the closing "uniklé poptávky" line beneath them. */
.rl-page .rl-problem__head { max-width: 54rem; }
.rl-page .rl-problem__title {
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  line-height: 1.18;
  max-width: 18ch;
}
.rl-page .rl-problem .rl-why { margin-top: var(--space-12); }
.rl-page .rl-problem__foot {
  margin-top: var(--space-10);
  max-width: 46rem;
  font-size: 1.2rem;
  line-height: 1.55;
}

/* (section-heading sizing is now global — .svc-claim / .svc-claim-md in
   design-system.css size every page's section titles to one ramp. The
   reality-only override that used to live here is no longer needed.) */

/* ---------- "why" cards: BADPIECE sticker cards + oversized index ----------
   The three silent losses were soft, floaty SaaS tiles (squircle, blurred drop
   shadow) that clashed with the page's hard-edged sticker system. Rebuilt in
   that language: a 2.5px black outline, a solid black OFFSET shadow, the 4px
   button corner — and an oversized violet index so 01/02/03 read as a
   deliberate, weighty sequence. They press into the shadow on hover like the
   buttons. */
.rl-page .svc-start-card {
  position: relative;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6) var(--space-6);
  border: 2.5px solid var(--black-950);
  border-radius: 4px;
  background: #fff;
  box-shadow: 5px 5px 0 var(--black-950);
  transition: transform .18s var(--rl-ease), box-shadow .18s var(--rl-ease);
}
.rl-page .svc-start-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--black-950);
}
.rl-page .rl-why-num {
  display: block;
  font-family: Anton, sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  letter-spacing: 0;
  line-height: .85;
  color: var(--violet-primary);
  margin-bottom: var(--space-3);
}
.rl-page .svc-start-card:hover .svc-start-card__title { color: var(--violet-primary); }
.rl-page .svc-start-card__title { transition: color .25s var(--rl-ease); }
@media (prefers-reduced-motion: reduce) {
  .rl-page .svc-start-card, .rl-page .svc-start-card:hover { transition: none; transform: none; }
}

/* ---------- comparison table: a BADPIECE sticker card, not a SaaS card ----------
   The old version was the one block on the page that broke the brand: a soft
   22px-radius tray with blurred drop-shadows and ghost-grey hairlines — pure
   SaaS. Rebuilt in the sticker language the lang toggle / chat / cookie card
   already speak: a hard 3px black outline, a solid OFFSET shadow, near-square
   corners, hard black hairlines. The "us" column is carved out as a green
   brand block with a 3px black divider and a solid black check. */
.rl-page .rl-compare-wrap {
  border: 3px solid var(--black-950);
  border-radius: 4px;
  background: #fff;
  padding: 0;
  box-shadow: 8px 8px 0 var(--black-950);
}
.rl-page .rl-compare { border-collapse: separate; border-spacing: 0; }
.rl-page .rl-compare thead th {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: .005em;
  padding: var(--space-4) var(--space-5);
  border-bottom: 3px solid var(--black-950);
}
.rl-page .rl-compare thead th:last-child { color: var(--violet-primary); }
.rl-page .rl-compare tbody th {
  font-family: Anton, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: .002em;
  padding: var(--space-4) var(--space-5);
}
.rl-page .rl-compare td {
  padding: var(--space-4) var(--space-5);
  font-size: 1.05rem;
  line-height: 1.45;
  border-bottom: 1px solid var(--black-950);
}
.rl-page .rl-compare tbody tr:last-child td,
.rl-page .rl-compare tbody tr:last-child th { border-bottom: 0; }
.rl-page .rl-compare tbody tr { transition: background-color .2s var(--rl-ease); }
.rl-page .rl-compare tbody tr:hover { background: rgba(153, 33, 163, .045); }
/* the "us" column reads as one continuous green block with a hard divider */
.rl-page .rl-compare thead th:last-child,
.rl-page td.rl-compare__us {
  background: rgba(0, 255, 48, .16);
  border-left: 3px solid var(--black-950);
}
.rl-page td.rl-compare__us {
  position: relative;
  padding-left: 3rem;
  color: var(--black-950);
  font-weight: 600;
}
.rl-page td.rl-compare__us::before {
  content: "✓";
  position: absolute;
  left: var(--space-4);
  color: var(--black-950);   /* solid black check — hard, on the green block */
  font-weight: 700;
}

/* ---------- pricing: bold tier cards in the brand's own voice ----------
   Anton tier names + price, a nested squircle with a soft inset highlight,
   a lifted/glowing featured card, and a full-width CTA. The old cards were
   a generic SaaS pricing grid (system font, flat 1px borders). */
/* tiers keep equal height — the base grid is align-items:start, which let each
   card shrink to its own content (the recommended Pro card ended up shorter than
   its neighbours). Stretch them to the tallest; each CTA stays pinned to the
   bottom via .rl-plan .button { margin-top:auto }. */
.rl-page .rl-pricing { gap: var(--space-6); margin-top: var(--space-12); align-items: stretch; }
.rl-page .rl-plan {
  border-radius: 24px;
  border-color: rgba(0, 0, 0, .1);
  padding: var(--space-10) var(--space-8) var(--space-8);
  box-shadow: 0 24px 52px -38px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .42s var(--rl-ease), box-shadow .42s var(--rl-ease), border-color .42s var(--rl-ease);
}
.rl-page .rl-plan:hover {
  transform: translateY(-6px);
  border-color: var(--violet-primary);
  box-shadow: 0 38px 74px -40px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.rl-page .rl-plan--featured {
  border-color: var(--violet-primary);
  box-shadow: 0 0 0 2px var(--violet-primary), 0 40px 78px -38px rgba(153, 33, 163, .5);
}
@media (min-width: 861px) {
  .rl-page .rl-plan--featured { transform: scale(1.045); }
  .rl-page .rl-plan--featured:hover { transform: scale(1.045) translateY(-6px); }
}
.rl-page .rl-plan__badge {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: .08em;
  top: calc(-1 * var(--space-4));
  padding: 6px 14px 4px;
  box-shadow: 2px 2px 0 var(--black-950);
}
.rl-page .rl-plan__name {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  letter-spacing: -.01em;
  line-height: 1;
}
.rl-page .rl-plan__promise { font-size: 1.05rem; }
.rl-page .rl-plan__price {
  font-family: Anton, sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 3.6vw, 3.1rem);
  letter-spacing: -.012em;
  line-height: 1;
  margin-top: var(--space-2);
}
.rl-page .rl-plan__features { margin-bottom: var(--space-8); }
.rl-page .rl-plan__features li::before { color: #0a7b1f; }   /* darker green — readable on white */
.rl-page .rl-plan .button { width: 100%; text-align: center; }
.rl-page .rl-note--guarantee { border-radius: 18px; box-shadow: 0 18px 40px -34px rgba(0, 0, 0, .5); }

@media (prefers-reduced-motion: reduce) {
  .rl-page .svc-start-card,
  .rl-page .rl-plan,
  .rl-page .rl-plan--featured,
  .rl-page .rl-plan--featured:hover { transition: none; transform: none; }
}

/* ---------- hero: lost-commission calculator ----------
   Interactive háček in the hero — slider for property price × commission %
   resolves to "what's at stake on one lost deal". Framing stays on capture
   (co je v sázce), never "you'll earn more". Lives on the dark hero, so the
   result reads in the green hero accent. */
/* Built in the brand's STICKER language — the soft, translucent, blurred SaaS
   card it used to be clashed with the hard-edged buttons beside it. Now a solid
   lifted surface with a hard white outline at the buttons' sharp 4px corner — no
   offset shadow, because a hard offset only reads against a light surface and on
   the navy hero a green smear is all you get; the crisp outline carries it. */
.rl-calc {
  margin-top: var(--space-10);
  max-width: 640px;
  padding: var(--space-8);
  border: 2.5px solid rgba(255, 255, 255, .85);
  border-radius: 4px;
  background: #06232c;
}
.rl-calc__q { margin: 0 0 var(--space-6); font-weight: 600; font-size: 1.15rem; line-height: 1.4; }
.rl-calc__controls { display: flex; flex-direction: column; gap: var(--space-8); }
.rl-calc__field { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: var(--space-4); }
.rl-calc__label { font-size: .95rem; opacity: .75; }
.rl-calc__value { font-family: Anton, sans-serif; font-size: 1.45rem; text-align: right; }

/* chunky sticker slider — a button-rounded (4px) track with a green fill driven
   by --fill (set per-input in reality.tsx), and an oversized green thumb in the
   on-dark button style: green fill, white outline, hard offset shadow. */
.rl-calc__slider {
  grid-column: 1 / -1;
  width: 100%;
  height: 28px;                       /* tall enough to contain the big thumb */
  margin-top: var(--space-3);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.rl-calc__slider::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--primary-green) 0 var(--fill, 50%),
    rgba(255, 255, 255, .16) var(--fill, 50%) 100%);
}
.rl-calc__slider::-moz-range-track { height: 12px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.rl-calc__slider::-moz-range-progress { height: 12px; border-radius: 4px; background: var(--primary-green); }
.rl-calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px;                   /* centre the 26px thumb over the 12px track */
  border-radius: 4px;
  background: var(--primary-green);
  border: 3px solid #fff;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
}
.rl-calc__slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: var(--primary-green);
  border: 3px solid #fff;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
  box-sizing: border-box;
}
.rl-calc__slider:focus-visible { outline: none; }
.rl-calc__slider:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--primary-green); outline-offset: 2px; }
.rl-calc__slider:focus-visible::-moz-range-thumb { outline: 3px solid var(--primary-green); outline-offset: 2px; }

.rl-calc__result {
  margin: var(--space-8) 0 0;
  font-family: Anton, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
}
.rl-calc__result strong { color: var(--primary-green); font-weight: inherit; }
.rl-calc__note { margin: var(--space-3) 0 0; font-size: .95rem; opacity: .7; line-height: 1.5; }

.rl-hero-micro { margin-top: var(--space-6); max-width: 40rem; }
.rl-hero-micro .paragraph { margin: 0; font-size: .95rem; opacity: .72; }

/* seasonal urgency callout — the summer window, pulled out of the grey fine
   print into a visible green sticker right under the CTA: an Anton tag + one
   bold line, so the time pressure actually lands instead of disappearing. */
.rl-page .rl-hero-season {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  max-width: 40rem;
  padding: var(--space-4) var(--space-5);
  border: 2px solid rgba(0, 255, 48, .45);
  border-radius: 4px;
  background: rgba(0, 255, 48, .08);
}
.rl-page .rl-hero-season__tag {
  flex: none;
  align-self: flex-start;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: .95rem;
  letter-spacing: .05em;
  line-height: 1;
  color: var(--black-950);
  background: var(--primary-green);
  border: 2px solid var(--black-950);
  border-radius: 4px;
  padding: 8px 11px 6px;
  box-shadow: 2px 2px 0 var(--black-950);
}
.rl-page .rl-hero-season__text { margin: 0; font-size: 1.02rem; line-height: 1.45; color: #fff; }
.rl-page .rl-hero-season__text strong { color: var(--primary-green); font-weight: 700; }
/* phones: stack the tag over the text (2 rows) instead of side by side */
@media screen and (max-width: 767px) {
  .rl-page .rl-hero-season { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* in the hero grid the calculator fills its own column (no top margin / cap) */
.rl-page .rl-hero__grid .rl-calc {
  margin-top: 0;
  max-width: none;
  width: 100%;
}

/* ============================================================
   reality.badpiece.com — editorial blocks, showcase band,
   pricing footnotes, FAQ and the closing trust line (.rl-page)
   ============================================================ */

/* ---------- editorial blocks (Funkce + Odlišení): list + brand figure ----------
   Both green panels carry one dark silhouette figure (muz_fly / woman-flying)
   the way the home + AI pages do — the figures only read on the light/green
   panels, never on navy. Natural height (not a forced 100vh) keeps the rows
   tight, so the old stretched-out "air" between list rows is gone. */
.rl-page .rl-editorial.svc-section { min-height: auto; }
.rl-page .rl-editorial__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-top: var(--space-10);
  width: 100%;
}
@media (min-width: 900px) {
  .rl-page .rl-editorial__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
  .rl-page .rl-editorial--media-left .rl-editorial__grid { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
}
.rl-page .rl-editorial__media img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
}
.rl-page .rl-editorial__note { margin-top: var(--space-6); font-size: 1.05rem; opacity: .8; }
/* "viz ceník níže" jumps to the pricing block — dark + underlined, hover to
   violet, the same link treatment used elsewhere on the page */
.rl-page .rl-editorial__note a {
  color: var(--black-950);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s var(--rl-ease);
}
.rl-page .rl-editorial__note a:hover { color: var(--violet-primary); }

/* stacked name-over-description list — fixes the lop-sided name|description grid
   the brief flagged, and reads cleanly in the narrower editorial column */
.rl-page .rl-deflist { display: flex; flex-direction: column; }
.rl-page .rl-deflist__item {
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(0, 0, 0, .16);
}
.rl-page .rl-deflist__item:last-child { border-bottom: 1px solid rgba(0, 0, 0, .16); }
.rl-page .rl-deflist__h {
  margin: 0 0 .3rem;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.1;            /* room for Czech diacritics */
  letter-spacing: -.01em;
  transition: color .2s var(--rl-ease);
}
.rl-page .rl-deflist__p { margin: 0; font-size: 1.0625rem; line-height: 1.5; max-width: 56ch; }
.rl-page .rl-deflist__item:hover .rl-deflist__h { color: var(--violet-primary); }
@media (max-width: 899px) {
  .rl-page .rl-editorial__media { order: 2; }   /* figure under the list on stack */
  .rl-page .rl-editorial__media img { max-width: 260px; }
}

/* ---------- ukázka: compact navy CTA band (example projects removed) ---------- */
.rl-page .rl-showcase.svc-section {
  min-height: auto;
  padding-top: var(--space-24) !important;
  padding-bottom: var(--space-24) !important;
}
.rl-page .rl-showcase .svc-actions { margin-top: 0; justify-content: center; }

/* ---------- pricing footnotes: two branded callout cards with icons ----------
   The plain paragraphs under the tiers now read as deliberate stickers — a help
   card (violet outline icon) and the scarcity card as a solid brand-green
   sticker so the limited-capacity message carries real weight. */
.rl-page .rl-pricing-notes {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 720px) { .rl-page .rl-pricing-notes { grid-template-columns: 1fr; } }
.rl-page .rl-pricenote {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-6);
  background: #fff;
  border: 3px solid var(--black-950);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--black-950);
}
.rl-page .rl-pricenote__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  color: var(--violet-primary);
  border: 2px solid currentColor;
  border-radius: 10px;
}
.rl-page .rl-pricenote__title {
  margin: 0 0 .35rem;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.005em;
  font-size: 1.2rem;
  line-height: 1.15;
}
.rl-page .rl-pricenote__text { margin: 0; font-size: 1rem; line-height: 1.55; }
.rl-page .rl-pricenote--accent { background: var(--primary-green); }
.rl-page .rl-pricenote--accent .rl-pricenote__icon { color: var(--black-950); }

/* ---------- FAQ on white: question | answer, opened-up headings ---------- */
.rl-page .rl-faq.svc-section { min-height: auto; }
.rl-page .rl-faq__list { margin-top: var(--space-10); }
.rl-page .rl-faq__item {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr);
  column-gap: var(--space-14);
  row-gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(0, 0, 0, .16);
}
.rl-page .rl-faq__item:last-of-type { border-bottom: 1px solid rgba(0, 0, 0, .16); }
.rl-page .rl-faq__q {
  margin: 0;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  line-height: 1.18;          /* opened up so Czech diacritics clear */
  letter-spacing: -.005em;
  transition: color .2s var(--rl-ease);
}
.rl-page .rl-faq__item:hover .rl-faq__q { color: var(--violet-primary); }
.rl-page .rl-faq__a { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
@media (max-width: 767px) {
  .rl-page .rl-faq__item { grid-template-columns: 1fr; row-gap: .6rem; padding: 1.4rem 0; }
}

/* links inside an FAQ answer (the closing "Kdo za Badpiece stojí?" pair carries
   the badpiece.com portfolio link): dark + underlined so it reads as a link,
   then hover to the brand violet — the same hover the FAQ questions and deflist
   headings use. */
.rl-page .rl-faq__a a {
  color: var(--black-950);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s var(--rl-ease);
}
.rl-page .rl-faq__a a:hover { color: var(--violet-primary); }