/* Homepage (Task #12927) — restyle v25 to the original soft style of the public site.
   Structure and copy come from app/views/pages/index.html.slim and the section partials;
   locale text is in config/locales/pages/index.*.yml.

   Everything is scoped under .hp so the Tailwind utilities and public.css components
   of the other public pages stay untouched.

   Tokens mirror the rest of the public site: Alata for headings, Roboto Slab for
   paragraphs/leads/quote bodies, Poppins for UI (buttons, kickers, labels).
   Dark mode tokens are dropped for the homepage — the rest of the public site is
   light-only (Task #12927). */

.hp {
  /* Colors — teal→blue gradient family for the live band and CTAs, soft neutrals
     for the rest. Keep WCAG AA contrast from Task #12845 in mind. */
  --teal: #51dacf;
  --teal-dark: #3db8af;
  --teal-deep: #1f9e94;          /* darker stop so white text passes AA on the gradient */
  --teal-ink: #0f5e58;
  --blue: #51a1da;
  --blue-deep: #3d7fb8;          /* darker stop so white text passes AA on the gradient */
  --green: #51da8a;
  --green-dark: #3db86a;
  --grey-icon: #9ca3af;          /* pain icons per Task #12927 */

  --ink: #111827;                /* default gray-900 — same family as the rest of the site */
  --ink-2: #4b5563;              /* paragraph/lead */
  --muted: #6b7280;
  --line: #e5e7eb;
  --paper: #ffffff;
  --ground: #f9fafb;             /* alt section bg */

  /* Soft card shadow (Task #12927). */
  --shadow-card: 0 10px 30px -12px rgba(17, 24, 39, .18);
  --shadow-soft: 0 6px 20px -10px rgba(17, 24, 39, .14);

  /* Buttons */
  --btn-bg: var(--teal-deep);
  --btn-bg-hover: #18877e;
  --btn-fg: #ffffff;

  /* Live numbers band — teal→blue gradient with white numbers (Task #12927). */
  --band-grad: linear-gradient(135deg, var(--teal-deep) 0%, var(--blue-deep) 100%);
  --band-fg: #ffffff;
  --band-sub: rgba(255, 255, 255, .82);
  --band-mute: rgba(255, 255, 255, .62);

  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-family-body, 'Poppins'), system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }

/* Headings — Alata (Task #12927). */
body .hp h1, body .hp h2, body .hp h3 { font-family: var(--font-family-heading, 'Alata'), 'Poppins', sans-serif; font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; color: var(--ink); letter-spacing: -.01em; }
body .hp h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
body .hp h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
body .hp h3 { font-size: 1.1rem; font-weight: 500; }

/* Paragraphs / leads / FAQ answers / quote bodies — Roboto Slab (Task #12927). */
body .hp p { margin: 0; font-family: var(--font-family-paragraph, 'Roboto Slab'), serif; color: var(--ink-2); }
.hp a { color: var(--teal-ink); }
.hp .ms { font-family: 'Material Symbols Sharp'; font-weight: normal; font-style: normal; font-size: 28px; line-height: 1; display: inline-block; color: var(--teal-deep); white-space: nowrap; direction: ltr; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }

.hp-wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
.hp-section { padding-block: clamp(48px, 6.5vw, 88px); }

/* Section headings — centred (Task #12927). Hero stays left-aligned. */
.hp-section .hp-wrap { display: grid; gap: 14px; justify-items: center; text-align: center; }
.hp-section .hp-wrap > * { justify-self: center; }
.hp-section .hp-wrap .hp-pairs,
.hp-section .hp-wrap .hp-claims,
.hp-section .hp-wrap .hp-quotes,
.hp-section .hp-wrap .hp-steps,
.hp-section .hp-wrap .hp-price,
.hp-section .hp-wrap .hp-calc,
.hp-section .hp-wrap .hp-faq-list,
.hp-section .hp-wrap .hp-more-link { justify-self: stretch; text-align: left; }

/* Kicker — small teal with letter-spacing (Task #12927).
   The locale file already capitalises the kicker in Czech/English, so we keep the
   case as-is and rely on letter-spacing for the "small uppercase teal" look. */
.hp-kicker { display: inline-block; font-size: .82rem; color: var(--teal-deep); font-weight: 600; letter-spacing: .14em; margin-bottom: 6px; font-family: var(--font-family-body, 'Poppins'), system-ui, sans-serif; }

.hp-lead { font-size: 1.12rem; color: var(--ink-2); max-width: 58ch; font-family: var(--font-family-paragraph, 'Roboto Slab'), serif; }

.hp-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hp-reassure { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .86rem; color: var(--muted); }
.hp-reassure span { display: inline-flex; align-items: center; gap: 5px; }
.hp-reassure .ms { font-size: 16px; color: var(--green-dark); }

/* Buttons — primary teal with a glow, secondary white with teal outline (Task #12927). */
.hp-btn { display: inline-block; padding: 13px 24px; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: 1rem; border: 2px solid transparent; font-family: var(--font-family-body, 'Poppins'), system-ui, sans-serif; transition: filter .15s ease, transform .15s ease, box-shadow .15s ease; }
.hp a.hp-btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 8px 22px -10px rgba(31, 158, 148, .65); }
.hp a.hp-btn-primary:hover { filter: brightness(1.05); box-shadow: 0 10px 26px -10px rgba(31, 158, 148, .75); }
.hp a.hp-btn-secondary { border-color: var(--teal-deep); color: var(--teal-ink); background: var(--paper); }
.hp a.hp-btn-secondary:hover { background: #f0fbf9; }
.hp a:focus-visible, .hp summary:focus-visible, .hp input:focus-visible, .hp select:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 2px; }

/* Section backgrounds alternate white / #f9fafb (Task #12927). No hairline borders. */
.hp-section { background: var(--paper); }
#pairs, #storno, #more, #pricing, #faq { background: var(--ground); }
#live-stats, #cta-final { background-image: var(--band-grad); color: var(--band-fg); }
#roles { background: var(--paper); }
#testimonials { background: var(--ground); }

/* 1 hero — keeps left alignment (Task #12927). */
.hp-hero { background: var(--paper); padding-block: clamp(48px, 7vw, 96px); }
.hp-hero .hp-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; position: relative; text-align: left; justify-items: start; }
.hp-hero .hp-wrap > * { justify-self: start; }
.hp-hero-copy { display: grid; gap: 18px; max-width: 56ch; }
.hp-hero .hp-lead { font-size: 1.2rem; }
.hp-phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; margin: 0; }
.hp-phone { display: grid; gap: 8px; justify-items: center; margin: 0; }
/* White phone frame + soft shadow, with the requested rotations (Task #12927). */
.hp-phone img { width: 100%; height: auto; border-radius: 24px; background: #fff; padding: 7px; box-shadow: 0 14px 40px -18px rgba(17, 24, 39, .35); }
.hp-phone:nth-child(1) img { transform: rotate(-4deg); }
.hp-phone:nth-child(2) img { transform: translateY(-10px); }
.hp-phone:nth-child(3) img { transform: rotate(4deg); }
.hp-phone figcaption { font-size: .78rem; color: var(--muted); text-align: center; line-height: 1.3; }
.hp .hp-phones-cap { margin-top: 14px; font-size: .82rem; color: var(--muted); text-align: center; }

/* 2 live numbers band — teal→blue gradient with white numbers in Alata (Task #12927). */
.hp-stats { background-image: var(--band-grad); color: var(--band-fg); padding-block: clamp(40px, 5.5vw, 64px); }
.hp-stats .hp-wrap { background: transparent; text-align: left; justify-items: stretch; }
.hp-stats .hp-wrap > * { justify-self: stretch; }
.hp-stats-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.hp .hp-stats-head h2 { font-size: 1.15rem; color: var(--band-fg); font-family: var(--font-family-body, 'Poppins'), sans-serif; font-weight: 500; letter-spacing: 0; text-transform: none; }
.hp-stats .hp-pulse { color: var(--band-mute); }
.hp-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 32px; align-items: end; }
.hp-stat b { display: block; font-family: var(--font-family-heading, 'Alata'), sans-serif; font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; color: var(--band-fg); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hp-stat > span { display: block; margin-top: 8px; font-size: .95rem; color: var(--band-sub); }
.hp-stat.hp-wow { grid-column: 1 / -1; margin-top: 10px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22); display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.hp-stat.hp-wow b { color: var(--band-fg); }
.hp-stat.hp-wow > span { font-size: 1.05rem; color: var(--band-fg); max-width: 40ch; margin: 0; }
.hp-stat.hp-wow small { display: block; color: var(--band-mute); font-size: .8rem; margin-top: 4px; }

.hp-pulse { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.hp-stats .hp-pulse { color: var(--band-mute); }
.hp-pulse i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hp-pulse i { animation: hp-blink 2s infinite; }
  .hp .claim .hp-more .ms, .hp-faq summary .hp-chev { transition: transform .2s; }
  @keyframes hp-blink { 50% { opacity: .3; } }
}

/* 3 pain → fix pairs — white cards with soft shadows (Task #12927). */
.hp-pairs { display: grid; gap: 16px; margin-top: 32px; }
.hp-pair { display: grid; grid-template-columns: 1fr 48px 1fr; gap: 18px; align-items: center; background: var(--paper); border: 0; border-radius: 1rem; padding: 22px 24px; box-shadow: var(--shadow-card); }
.hp-pair .hp-side { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; }
.hp-pair .hp-side .ms { font-size: 56px; font-variation-settings: 'FILL' 0, 'wght' 300, 'opsz' 48; }
.hp-pair .hp-bad .ms { color: var(--grey-icon); } /* pain icons are grey, no red "loss" colour */
.hp-pair .hp-good .ms { color: var(--teal-deep); }
.hp .hp-pair h3 { font-size: 1.12rem; color: var(--ink); }
.hp .hp-pair p { font-size: .94rem; }
.hp .hp-pair .hp-bad p { color: var(--muted); }
.hp .hp-pair .hp-good p { color: var(--ink-2); }
.hp-pair .hp-arrow { text-align: center; }
.hp-pair .hp-arrow .ms { font-size: 32px; color: var(--teal-deep); opacity: .55; }
@media (max-width: 720px) {
  .hp-pair { grid-template-columns: 1fr; }
  .hp-pair .hp-arrow .ms { transform: rotate(90deg); }
}

/* Claim rows (roles, storno, more) — white cards with soft shadows (Task #12927). */
/* 2 columns (1 below 860 px): the 1080 px wrap leaves 3 columns too narrow, titles broke into 3-6 lines (Task #13085).
   align-items: start keeps an opened card from stretching its row neighbours. */
.hp-claims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 32px; align-items: start; }
@media (max-width: 860px) { .hp-claims { grid-template-columns: 1fr; } }
.hp .claim { background: var(--paper); border: 0; border-radius: 1rem; padding: 14px 18px; box-shadow: var(--shadow-card); }
/* "Zjistit více" sits under the title, so the title gets the full card width (Task #13085) */
.hp .claim summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "icon title" "icon more"; gap: 2px 14px; align-items: center; }
.hp .claim summary > .ms { grid-area: icon; }
.hp .claim summary .hp-more { grid-area: more; justify-self: start; }
.hp .claim summary::-webkit-details-marker { display: none; }
.hp .claim summary h3 { grid-area: title; font-size: 1.08rem; color: var(--ink); text-wrap: balance; }
.hp .claim summary > .ms { font-size: 40px; font-variation-settings: 'FILL' 0, 'wght' 300, 'opsz' 48; color: var(--teal-deep); }
.hp .claim .hp-more { font-size: .82rem; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.hp .claim .hp-more .ms { font-size: 18px; color: var(--muted); }
.hp .claim[open] summary .hp-more .ms { transform: rotate(180deg); }
.hp .claim .hp-body { padding: 10px 0 4px 70px; color: var(--ink-2); font-size: .97rem; max-width: 52ch; font-family: var(--font-family-paragraph, 'Roboto Slab'), serif; }
.hp .claim .hp-body b { color: var(--ink); font-weight: 600; }
.hp .claim.hp-wide { grid-column: 1 / -1; }
.hp .claim.hp-wide .hp-body { max-width: none; }
.hp .claim.hp-single { margin-top: 16px; max-width: 640px; justify-self: stretch; }

/* 4 roles — round icon with teal→blue gradient and a glow (Task #12927). */
.hp-roles { background: var(--paper); }
.hp-roles .hp-claims { gap: 12px 16px; margin-top: 8px; }
.hp h3.hp-who { display: flex; align-items: center; gap: 14px; font-family: var(--font-family-heading, 'Alata'), sans-serif; font-weight: 400; font-size: 1.6rem; color: var(--ink); margin-top: 56px; padding-bottom: 10px; border-bottom: 0; width: 100%; }
.hp h3.hp-who:first-of-type { margin-top: 36px; }
.hp-who .ms { font-size: 28px; color: #fff; background-image: linear-gradient(135deg, var(--teal-deep) 0%, var(--blue-deep) 100%); border-radius: 50%; width: 52px; height: 52px; display: grid; place-items: center; font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 48; box-shadow: 0 10px 24px -10px rgba(31, 158, 148, .55); }

/* live panel inside the clinic row */
.hp-live { background: var(--paper); border: 0; border-radius: 1rem; padding: 18px 20px; display: grid; gap: 14px; margin-top: 14px; box-shadow: var(--shadow-soft); }
.hp-live-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: .86rem; color: var(--ink-2); }
#public_day_band { display: grid; gap: 14px; }
.hp-bands { display: grid; gap: 8px; }
.hp-band { display: grid; grid-template-columns: 86px 1fr; gap: 10px; align-items: center; font-size: .8rem; color: var(--muted); }
.hp-bar { height: 20px; border-radius: 6px; background: var(--ground); position: relative; overflow: hidden; }
.hp-seg { position: absolute; top: 0; bottom: 0; }
.hp-seg-booked { background: var(--teal-deep); }
.hp-seg-free_past { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--line) 4px 5px); }
.hp-seg-cleanup { background: repeating-linear-gradient(45deg, transparent 0 3px, var(--line) 3px 4px); }
.hp-seg-pause { background: var(--paper); }
.hp-seg-closed { background: var(--paper); border-left: 1px dashed var(--line); }
.hp-now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); }
.hp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hp-kpi { background: var(--ground); border-radius: 12px; padding: 8px 12px; }
.hp-kpi b { display: block; font-family: var(--font-family-heading, 'Alata'), sans-serif; font-weight: 400; font-size: 1.4rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.hp-kpi span { font-size: .74rem; color: var(--muted); line-height: 1.3; display: block; }

/* 5 storno — white section, calculator behind a toggle (Task #12927). */
.hp-storno { background: var(--ground); }
.hp-calc { margin-top: 22px; background: var(--paper); border: 0; border-radius: 1rem; padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; max-width: 640px; box-shadow: var(--shadow-card); }
.hp-calc label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 4px; font-family: var(--font-family-body, 'Poppins'), system-ui, sans-serif; }
.hp-calc label + input, .hp-calc label + select { margin-bottom: 10px; }
.hp-calc select, .hp-calc input { width: 100%; font: inherit; font-size: 1rem; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--ground); color: var(--ink); }
.hp-calc-out b { display: block; font-family: var(--font-family-heading, 'Alata'), sans-serif; font-weight: 400; font-size: 2rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.hp-calc-out small { color: var(--muted); }

/* 6 how — centred steps with round soft icons (Task #12927). */
.hp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 32px; }
.hp .hp-lead-gap { margin-top: 12px; }
.hp-step { display: grid; gap: 8px; justify-items: center; text-align: center; background: var(--paper); border: 0; border-radius: 1rem; padding: 22px 16px; box-shadow: var(--shadow-card); }
.hp-step .ms { font-size: 40px; color: #fff; background-image: linear-gradient(135deg, var(--teal-deep) 0%, var(--blue-deep) 100%); border-radius: 50%; width: 64px; height: 64px; display: grid; place-items: center; font-variation-settings: 'FILL' 0, 'wght' 300, 'opsz' 48; box-shadow: 0 10px 24px -10px rgba(31, 158, 148, .55); }
.hp .hp-step h3 { font-size: 1rem; }
.hp-step-time { font-size: .82rem; color: var(--teal-deep); font-weight: 600; font-family: var(--font-family-body, 'Poppins'), system-ui, sans-serif; }

/* 7 more — small things that count in practice; keeps the SEO h2 (Task #12927). */
.hp-more-section { background: var(--ground); }
.hp .hp-more-link { margin-top: 18px; font-size: .95rem; }

/* 8 price */
.hp-price { display: flex; flex-wrap: wrap; gap: 16px 36px; align-items: baseline; margin-top: 22px; background: var(--paper); border: 0; border-radius: 1rem; padding: 26px 28px; box-shadow: var(--shadow-card); width: 100%; }
.hp-amount { font-family: var(--font-family-heading, 'Alata'), sans-serif; font-size: 2.6rem; color: var(--ink); }
.hp-amount small { font-size: 1rem; color: var(--muted); font-family: var(--font-family-body, 'Poppins'), sans-serif; }
.hp .hp-price p { color: var(--ink-2); max-width: 48ch; }

/* 9 quotes — Roboto Slab quote bodies (Task #12927). */
.hp-voices { background: var(--ground); position: relative; overflow: hidden; }
.hp-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 32px; }
.hp-quote { position: relative; background: var(--paper); border-radius: 1rem; padding: 28px 30px 26px; margin: 0; box-shadow: var(--shadow-card); display: grid; gap: 16px; overflow: hidden; }
.hp-quote::before { content: "\201E"; position: absolute; top: -30px; right: 18px; font-family: var(--font-family-heading, 'Alata'), sans-serif; font-size: 9rem; line-height: 1; color: var(--teal-deep); opacity: .14; pointer-events: none; }
.hp .hp-quote .hp-pull { font-family: var(--font-family-heading, 'Alata'), sans-serif; font-size: 1.45rem; line-height: 1.25; color: var(--ink); text-wrap: balance; padding-right: 56px; position: relative; }
.hp .hp-quote .hp-rest { font-family: var(--font-family-paragraph, 'Roboto Slab'), serif; font-size: .98rem; line-height: 1.65; color: var(--ink-2); }
.hp-quote footer { display: flex; align-items: center; gap: 12px; font-size: .88rem; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--font-family-body, 'Poppins'), system-ui, sans-serif; }
.hp-avatar { width: 44px; height: 44px; border-radius: 50%; background-image: linear-gradient(135deg, var(--teal-deep) 0%, var(--blue-deep) 100%); color: #fff; display: grid; place-items: center; font-family: var(--font-family-heading, 'Alata'), sans-serif; font-size: 1rem; flex: none; }
.hp-quote footer b { display: block; color: var(--ink); font-weight: 600; }
.hp-tag { margin-left: auto; font-size: .76rem; color: var(--teal-ink); background: #e6f7f6; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }

/* 10 FAQ — white cards (Task #12927). */
.hp-faq { background: var(--ground); }
.hp-faq-list { margin-top: 28px; display: grid; gap: 12px; }
.hp-faq details { background: var(--paper); border: 0; border-radius: 1rem; padding: 14px 18px; box-shadow: var(--shadow-card); }
.hp-faq summary { cursor: pointer; font-weight: 500; list-style: none; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; color: var(--ink); font-family: var(--font-family-heading, 'Alata'), sans-serif; font-size: 1.06rem; }
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary .hp-qi { font-size: 30px; color: var(--teal-deep); font-variation-settings: 'FILL' 0, 'wght' 300, 'opsz' 48; }
.hp-faq summary .hp-chev { font-size: 20px; color: var(--muted); }
.hp-faq details[open] summary .hp-chev { transform: rotate(180deg); }
.hp .hp-faq details p { margin: 8px 0 4px 54px; color: var(--ink-2); font-size: .95rem; max-width: 60ch; font-family: var(--font-family-paragraph, 'Roboto Slab'), serif; }

/* 11 final CTA — gradient with white heading text; primary button white w/ teal text, secondary outlined white (Task #12927). */
.hp-final { background-image: var(--band-grad); color: var(--band-fg); text-align: center; padding-block: clamp(56px, 7vw, 96px); }
.hp .hp-final h2 { color: var(--band-fg); }
.hp .hp-final .hp-lead { color: var(--band-sub); }
.hp-final .hp-ctas { justify-content: center; margin-top: 22px; }
.hp .hp-final a.hp-btn-primary { background: var(--paper); color: var(--teal-ink); box-shadow: 0 10px 30px -10px rgba(15, 94, 92, .45); }
.hp .hp-final a.hp-btn-secondary { background: transparent; color: var(--band-fg); border-color: rgba(255, 255, 255, .85); }
.hp .hp-final a.hp-btn-secondary:hover { background: rgba(255, 255, 255, .1); }
.hp .hp-final p.hp-final-alt { margin-top: 14px; font-size: .95rem; }
.hp .hp-final .hp-final-alt a { color: var(--band-fg); text-decoration: underline; text-underline-offset: 3px; }
.hp-final .hp-reassure { justify-content: center; color: var(--band-fg); margin-top: 14px; }
.hp-final .hp-reassure .ms { color: var(--band-fg); }

.hp-legal { padding-block: 28px; font-size: .84rem; color: var(--muted); border-top: 1px solid var(--line); background: var(--paper); text-align: center; font-family: var(--font-family-body, 'Poppins'), system-ui, sans-serif; }

@media (max-width: 820px) {
  .hp-hero .hp-wrap { grid-template-columns: 1fr; }
  .hp-calc { grid-template-columns: 1fr; }
  .hp-kpis { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .hp-hero-copy > * { animation: hp-up .6s ease both; }
  .hp-hero-copy > *:nth-child(2) { animation-delay: .08s; }
  .hp-hero-copy > *:nth-child(3) { animation-delay: .16s; }
  .hp-hero-copy > *:nth-child(4) { animation-delay: .24s; }
  .hp-hero-copy > *:nth-child(5) { animation-delay: .32s; }
  @keyframes hp-up { from { opacity: .001; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 480px) {
  .hp-pair .hp-side { grid-template-columns: 56px 1fr; }
  .hp-pair .hp-side .ms { font-size: 44px; }
  .hp .claim summary { grid-template-columns: 44px 1fr; }
  .hp .claim summary > .ms { font-size: 30px; }
  /* "Zjistit více" hides on phones, only the chevron stays */
  .hp .claim .hp-more { font-size: 0; gap: 0; }
  .hp .claim .hp-more .ms { font-size: 22px; }
  .hp .claim .hp-body, .hp-roles .claim .hp-body { padding-left: 0; }
  .hp h3.hp-who { font-size: 1.35rem; }
}
/* Task #13084 — on phones the two CTA buttons stack full-width instead of wrapping into an orphan row. */
@media (max-width: 560px) {
  .hp-ctas { flex-direction: column; width: 100%; }
  .hp-ctas .hp-btn { width: 100%; text-align: center; }
}
/* Task #13084 — both hero CTAs keep one row on desktop: the copy column is never narrower than the button pair,
   the phones column gives way; below 960 px the hero goes single-column so the phones keep a readable size. */
@media (min-width: 561px) {
  .hp-hero .hp-ctas { flex-wrap: nowrap; }
  .hp-hero .hp-btn { white-space: nowrap; }
  .hp-hero .hp-wrap { grid-template-columns: minmax(min-content, 1.05fr) minmax(0, .95fr); }
}
@media (max-width: 960px) {
  .hp-hero .hp-wrap { grid-template-columns: 1fr; }
}