/*
 * FlareEase SK landing page — one fluid layout.
 *
 * Sizes scale with the page width through container query units (`cqi`); the page root is the
 * container. The only switch is a container query: the header navigation from 960 px. Source of
 * truth: documents/zz_archive/landing-page/design-handoff-sk/README.md.
 *
 * Each section's styles live next to its markup (sections/<name>/<name>.css, partials/*.css); page-wide
 * ones in styles/. The build inlines these imports into one stylesheet
 * (tools/assemble-stylesheet.ts), so the order below is the cascade order.
 */

/* url()s are relative to the built styles.css, which this file is inlined into. */
/* Manrope, self-hosted (copied from @fontsource/manrope by the build). */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-500-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-600-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-700-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------------------------------------------------------------------------------------------
 * Tokens (README → Design Tokens)
 * ------------------------------------------------------------------------------------------- */
:root {
  --fe-ink: #1b3a28;
  --fe-paper: #f7f3ec;
  --fe-green-100: #e1f1e8;

  --fe-on-ink: #ffffff;
  --fe-on-ink-body: #e1f1e8;
  --fe-on-ink-muted: #9fd2b4;

  --fe-text-strong: #23211c;
  --fe-text-body: #46433b;
  --fe-primary: #316e4b;
  --fe-primary-hover: #265439;

  --fe-ink-button: #9fd2b4;
  --fe-ink-button-hover: #c3e3cf;
  --fe-ink-button-active: #74bd93;

  --fe-rule-paper: #e0d9cc;
  --fe-rule-green: #9fd2b4;
  --fe-rule-ink: #316e4b;

  --fe-chip-text: #46433b;
  --fe-chip-bg: #efeae1;
  --fe-chip-border: #5f5a50;
  --fe-placeholder: #5f5a50;

  --fe-error: #b42318;
  --fe-error-bg: #fef3f2;

  --fe-timeline-illness: #d9d1c3;

  /* Ground-dependent; redefined on Ink and Green/100 below. */
  --fe-focus: var(--fe-primary);
  --fe-rule: var(--fe-rule-paper);

  /*
   * Motion. Every animation confirms a change or carries the page's argument; none decorates.
   * Movement (translate, scale, rotate, wipe, height) is multiplied by --fe-move, or switched off
   * explicitly under reduced motion; fades always stay, so a state change is still visible.
   */
  --fe-duration-fast: 150ms;
  --fe-duration-base: 200ms;
  --fe-duration-slow: 300ms;
  /* A short story the reader watches (the §2 timeline), not a state change. */
  --fe-duration-story: 1400ms;
  --fe-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --fe-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --fe-move: 1;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fe-move: 0;
  }
}
/* ---------------------------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The header links glide to their section, so the reader sees where they went. This is the
   fallback: app/glide-to-section.ts takes over with a slower glide whenever the script runs. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--fe-paper);
  color: var(--fe-text-strong);
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
figure,
ul {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

/* `hidden` always wins over a component's own `display`. `until-found` keeps the browser's own
   behaviour, so find-in-page can still reveal a closed FAQ answer. */
[hidden]:not([hidden='until-found']) {
  display: none !important;
}

a {
  color: var(--fe-primary);
}

a:hover {
  color: var(--fe-primary-hover);
}

:focus-visible {
  outline: 3px solid var(--fe-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Shared by every component that fades something in. */
@keyframes fe-fade {
  from {
    opacity: 0;
  }
}
/* ---------------------------------------------------------------------------------------------
 * Page, grounds and section rhythm
 * ------------------------------------------------------------------------------------------- */
.page {
  container: page / inline-size;
  width: 100%;
  /* Motion entering from beyond the edge (the §2 visit) never makes the page scroll sideways. */
  overflow-x: clip;
}

.section {
  padding-inline: clamp(20px, 4cqi, 40px);
}

.section__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-block: clamp(56px, 7.8cqi, 112px);
}

.ground-ink {
  --fe-focus: var(--fe-on-ink);
  background: var(--fe-ink);
  color: var(--fe-on-ink);
}

.ground-green {
  --fe-rule: var(--fe-rule-green);
  background: var(--fe-green-100);
}

.page h2 {
  font-size: clamp(26px, calc(16px + 1.7cqi), 40px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fe-text-strong);
  text-wrap: balance;
}

.body-text {
  font-size: clamp(18px, calc(14px + 0.5cqi), 20px);
  line-height: 1.55;
  font-weight: 500;
  color: var(--fe-text-body);
  text-wrap: pretty;
}

.body-text--strong {
  font-weight: 600;
  color: var(--fe-text-strong);
}

/* Side-heading layout (sections 3, 6, 7, 8, 10): side by side from ~920 px, stacked below. */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.8cqi, 40px) clamp(24px, 6.7cqi, 96px);
}

.split__head {
  flex: 1 1 300px;
  max-width: 420px;
}

.split__body {
  flex: 1 1 520px;
  max-width: 680px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4cqi, 20px);
}

.split__body--roomy {
  gap: clamp(24px, 2.2cqi, 32px);
}

.split__body--start {
  align-items: flex-start;
}
/* Shared components: ruled list, placeholder chip, text link, phone screenshot. */

/* Ruled list (sections 3, 6, 7, 8). */
.ruled-list {
  align-self: stretch;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--fe-rule);
}

.ruled-list > li {
  padding-block: 16px;
  border-bottom: 1px solid var(--fe-rule);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--fe-text-body);
  text-wrap: pretty;
}

.ruled-list > li:last-child {
  border-bottom: 0;
}

.ruled-list strong {
  font-weight: 700;
  color: var(--fe-text-strong);
}

.ruled-list--icons > li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ruled-list--icons svg {
  flex: none;
  color: var(--fe-primary);
}

.ruled-list--icons span {
  min-width: 0;
}

.ruled-list--large > li {
  font-size: clamp(18px, calc(14px + 0.5cqi), 20px);
}

.ruled-list--large svg {
  margin-top: 1px;
}

/* Placeholder chip: content still to be filled in. Never filled with invented text. */
.chip {
  display: inline-block;
  border: 1.5px dashed var(--fe-chip-border);
  border-radius: 4px;
  padding: 0 6px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: var(--fe-chip-text);
  background: var(--fe-chip-bg);
  vertical-align: 1px;
}

.chip--block {
  display: block;
  border-radius: 8px;
  padding: 20px;
  font-size: 20px;
  line-height: 1.5;
}

.chip--note {
  display: table;
  padding: 4px 8px;
  font-size: 15px;
  line-height: 1.45;
}

.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--fe-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.text-link--large {
  font-size: 18px;
  font-weight: 700;
  text-decoration-thickness: 1.5px;
}

/* Phone screenshots: the neutral bezel is baked into the image. No CSS bezel, no shadow. */
.phone {
  height: auto;
  aspect-ratio: 1230 / 2592;
}
/* ---------------------------------------------------------------------------------------------
 * Header (not sticky)
 * ------------------------------------------------------------------------------------------- */
.site-header {
  max-width: 1200px;
  margin: 0 auto;
  /* The rule sits below the full header height, as in the design. */
  box-sizing: content-box;
  height: clamp(56px, 6.7cqi, 96px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--fe-rule-ink);
}

.site-header__logo {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.7cqi, 10px);
  text-decoration: none;
}

/* The app icon (tools/app-icons.ts), rounded like an icon on a phone's home screen. */
.site-header__mark {
  width: clamp(30px, 2.6cqi, 38px);
  height: clamp(30px, 2.6cqi, 38px);
  border-radius: 22%;
}

.site-header__wordmark {
  font-size: clamp(19px, 1.5cqi, 22px);
  font-weight: 700;
  color: var(--fe-on-ink);
  letter-spacing: -0.01em;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 28px;
  /* Keeps the nav beside the language switcher, at the right, rather than centred between it and the logo. */
  margin-left: auto;
}

.site-nav__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--fe-on-ink-body);
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}

.site-nav__link:hover {
  color: var(--fe-on-ink);
  text-decoration: underline;
}

/* Outside the nav, so it stays on phones, where the nav is hidden. */
.site-header__language {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--fe-on-ink-body);
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}

.site-header__language:hover {
  color: var(--fe-on-ink);
  text-decoration: underline;
}

@container page (min-width: 960px) {
  .site-nav {
    display: flex;
  }

  .site-header__language {
    padding-left: 16px;
    border-left: 1px solid var(--fe-rule-ink);
  }
}
/* ---------------------------------------------------------------------------------------------
 * 1 · First screen
 * ------------------------------------------------------------------------------------------- */
.hero {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 8.3cqi, 120px);
  padding-block: clamp(20px, 4.4cqi, 64px) clamp(40px, 5.5cqi, 80px);
}

.hero__text {
  flex: 1 1 520px;
  max-width: 640px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hero__title {
  font-size: clamp(28px, calc(16px + 2cqi), 44px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--fe-on-ink);
  text-wrap: pretty;
}

.hero__subhead {
  margin-top: clamp(14px, 1.7cqi, 24px);
  max-width: 560px;
  font-size: clamp(18px, calc(14px + 0.5cqi), 20px);
  line-height: 1.5;
  color: var(--fe-on-ink-body);
  text-wrap: pretty;
}

.hero__boundary {
  margin-top: clamp(12px, 1cqi, 14px);
  max-width: 560px;
  font-size: clamp(16px, calc(14px + 0.3cqi), 18px);
  line-height: 1.5;
  color: var(--fe-on-ink-muted);
  text-wrap: pretty;
}

.hero__form {
  margin-top: clamp(20px, 2.2cqi, 32px);
}

.hero__phone {
  flex: 1 1 300px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.phone--hero {
  width: clamp(240px, 22cqi, 320px);
}
/* ---------------------------------------------------------------------------------------------
 * 2 · Problém (statement treatment: a single column)
 * ------------------------------------------------------------------------------------------- */
.problem {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.2cqi, 32px);
}

.page .problem__title {
  max-width: 820px;
  font-size: clamp(30px, calc(16px + 2.6cqi), 52px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

/* Not to scale on purpose: the visit is drawn wide enough to see (36–42 px, widened from the
   design's 10–14 px by decision). */
.timeline {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timeline__label,
.timeline__legend {
  font-size: clamp(15px, calc(13px + 0.3cqi), 17px);
  line-height: 1.4;
  font-weight: 600;
  color: var(--fe-text-body);
}

.timeline__label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timeline svg {
  flex: none;
}

.timeline__bar {
  display: flex;
  gap: 4px;
  height: clamp(44px, 4cqi, 56px);
}

.timeline__illness {
  flex: 1;
  background: var(--fe-timeline-illness);
  border-radius: 6px 0 0 6px;
}

.timeline__visit {
  width: clamp(36px, calc(20px + 1.5cqi), 42px);
  flex: none;
  background: var(--fe-primary);
  border-radius: 0 6px 6px 0;
}

.timeline__legend {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

/*
 * The two durations sit under what they measure: months under the grey, minutes under the green.
 */
.timeline__months-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.timeline__visit-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--fe-primary);
}

.dialogue {
  max-width: 720px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(10px, 1cqi, 14px) clamp(16px, 1.7cqi, 24px);
  align-items: baseline;
}

.dialogue__speaker {
  font-size: clamp(15px, calc(13px + 0.3cqi), 17px);
  line-height: 1.4;
  font-weight: 600;
  color: var(--fe-text-body);
}

.dialogue__line {
  font-size: clamp(24px, calc(16px + 1.2cqi), 32px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fe-text-strong);
}

.dialogue__speaker--you,
.dialogue__line--you {
  color: var(--fe-primary);
}

.problem__text {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4cqi, 20px);
  font-size: clamp(18px, calc(14px + 0.6cqi), 22px);
  line-height: 1.55;
  color: var(--fe-text-body);
  text-wrap: pretty;
}

.problem__closing {
  font-weight: 600;
  color: var(--fe-text-strong);
}

/* ---------------------------------------------------------------------------------------------
 * Motion — the timeline and the dialogue each tell their part once, the first time they are
 * seen, at their own pace (app/play-when-seen.ts marks them `data-play="pending"`, held at the
 * start, then `"played"`; without the script both are simply static and complete).
 *
 * Timeline: the long grey stretch of illness draws itself from the left while the green visit
 * slides in from the right, and the two meet as the bar completes (--fe-duration-story, same
 * easing for both, so they land together).
 *
 * Dialogue: the doctor's question rises into place, then the answer follows.
 *
 * Under reduced motion everything fades instead.
 * ------------------------------------------------------------------------------------------- */
.timeline[data-play] .timeline__illness {
  animation: fe-wipe var(--fe-duration-story) var(--fe-ease-in-out) both paused;
}

.timeline[data-play] .timeline__visit {
  animation: fe-visit var(--fe-duration-story) var(--fe-ease-in-out) both paused;
}

.dialogue[data-play] > * {
  animation: fe-rise calc(var(--fe-duration-story) / 2) var(--fe-ease-out) both
    paused;
}

/* The answer comes after a beat. */
.dialogue[data-play] > :nth-child(n + 3) {
  animation-delay: 600ms;
}

/* Same specificity as the paused rules above, so these win by coming later. */
.timeline[data-play='played'] :is(.timeline__illness, .timeline__visit),
.dialogue[data-play='played'] > * {
  animation-play-state: running;
}

/* Both ends explicit: `none` (the default) does not interpolate with inset(). */
@keyframes fe-wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Slides in from the right (the page clips anything past its edge) and lands as the bar ends. */
@keyframes fe-visit {
  0% {
    opacity: 0;
    translate: clamp(40px, 12cqi, 160px) 0;
  }

  25% {
    opacity: 1;
  }
}

@keyframes fe-rise {
  from {
    opacity: 0;
    translate: 0 calc(var(--fe-move) * 12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline[data-play] :is(.timeline__illness, .timeline__visit) {
    animation-name: fe-fade;
    animation-duration: var(--fe-duration-slow);
  }
}
/* ---------------------------------------------------------------------------------------------
 * 3 · Kto za tým stojí
 * ------------------------------------------------------------------------------------------- */
.founder {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  align-items: flex-start;
}

.founder__photo {
  width: clamp(112px, 9cqi, 132px);
  height: clamp(112px, 9cqi, 132px);
  flex: none;
  border-radius: 999px;
  object-fit: cover;
}

.founder__text {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.founder__name {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--fe-text-strong);
}

/* The founder's own words, set apart as a quote. */
.founder__story {
  margin: 0;
  padding-left: 16px;
  border-left: 3px solid var(--fe-primary);
  font-size: 18px;
  line-height: 1.55;
  color: var(--fe-text-strong);
}

/* Pavel and the rheumatologists: a small round photo beside each name. */
.team-member {
  display: flex;
  gap: 14px;
  align-items: center;
}

.team-member__photo {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 999px;
  object-fit: cover;
}

.team-doctors {
  margin-top: 14px;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The patient leagues' logos, under the line that names them, at one height. */
.team-partners {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
}

.team-partners__logo {
  width: auto;
  height: 36px;
}
/* ---------------------------------------------------------------------------------------------
 * 4 · Čo v nej nájdete
 * ------------------------------------------------------------------------------------------- */
.features__intro {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 2 × 2 on phones, 4 in a row on desktop. */
.features {
  margin-top: clamp(28px, 3.3cqi, 48px);
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(max(140px, calc(25% - 24px)), 1fr)
  );
  gap: clamp(28px, 2.8cqi, 40px) clamp(16px, 2.2cqi, 32px);
}

.feature {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature .phone {
  width: 100%;
  max-width: 280px;
}

.feature__caption {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 18px;
  line-height: 1.5;
  color: var(--fe-text-body);
  text-wrap: pretty;
}

.feature__caption svg {
  flex: none;
  margin-top: 1px;
  color: var(--fe-primary);
}

.feature__caption span {
  min-width: 0;
}

.feature__caption strong {
  font-weight: 700;
  color: var(--fe-text-strong);
}
/* ---------------------------------------------------------------------------------------------
 * 5 · Správa pre lekára
 * ------------------------------------------------------------------------------------------- */
.doctor-report__intro {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.doctor-report__sample {
  margin-top: clamp(28px, 3.3cqi, 48px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Side by side, up to 560 px each, wide enough to read the "sample data" watermark; stacked
   once two 300 px columns no longer fit, so a phone shows each page at full content width.
   The columns are 1fr, not 560 px: auto-fit counts columns by their maximum, so a fixed 560 px
   would stack the pages up to about 1,150 px of content. The max-width keeps two pages at 560 px. */
.doctor-report__pages {
  max-width: 1152px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(12px, 2.2cqi, 32px);
}

/* The page's edge against the green ground. Flat like the rest of the page: no shadow. */
.doctor-report__page {
  width: 100%;
  height: auto;
  border: 1px solid var(--fe-rule);
  border-radius: 4px;
}

.doctor-report__caption {
  font-size: clamp(15px, calc(13px + 0.3cqi), 17px);
  line-height: 1.4;
  font-weight: 600;
  color: var(--fe-text-body);
}
/* ---------------------------------------------------------------------------------------------
 * 6 · Rovnaké otázky
 * ------------------------------------------------------------------------------------------- */
.questions__list {
  margin-top: clamp(4px, 0.6cqi, 8px);
}
/* ---------------------------------------------------------------------------------------------
 * 9 · Časté otázky — closed, an item shows only its question; the whole answer toggles
 * (hidden="until-found", set by the script, so crawlers and find-in-page still see it). Without the
 * script, everything shows.
 * `.faq__rest` sets no `display`, so the browser's own `[hidden]` rules keep working.
 * ------------------------------------------------------------------------------------------- */
.faq {
  margin-top: clamp(20px, 2.8cqi, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  column-gap: clamp(32px, 6.7cqi, 96px);
  align-items: start;
  border-top: 1px solid var(--fe-rule);
}

.faq__item {
  padding-block: 12px 20px;
  border-bottom: 1px solid var(--fe-rule);
}

.faq__question {
  padding-block: 6px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--fe-text-strong);
}

.faq__question:has(.faq__toggle) {
  padding-block: 0;
}

.faq__toggle {
  width: 100%;
  min-height: 48px;
  padding: 6px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.faq__toggle:hover {
  color: var(--fe-primary);
}

.faq__toggle svg {
  flex: none;
  margin-top: 2px;
}

.faq__toggle[aria-expanded='true'] svg {
  rotate: 180deg;
}

/* The gap above an answer is its own padding, so it stays inside the answer while it opens. */
.faq__rest {
  padding-top: 8px;
}

.faq__rest[hidden] {
  padding-top: 0;
}

.faq__rest p {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--fe-text-body);
  text-wrap: pretty;
}

/* The answer's first sentence reads darker than the rest. */
.faq__rest .faq__lead {
  color: var(--fe-text-strong);
}

.faq__rest > :first-child {
  margin-top: 0;
}

.faq__rest a {
  font-weight: 600;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------------------------
 * Motion — the chevron turns and the answer fades in while it opens. The height grows only where
 * the browser can animate to `auto` (interpolate-size); elsewhere the answer opens at once and
 * still fades. Turning and growing scale with --fe-move (instant under reduced motion). Only items
 * the script marks `data-faq-animated` transition, so answers close at once on load.
 * ------------------------------------------------------------------------------------------- */
.faq__toggle {
  transition: color var(--fe-duration-fast) var(--fe-ease-out);
}

.faq__toggle svg {
  transition: rotate calc(var(--fe-move) * var(--fe-duration-base))
    var(--fe-ease-out);
}

[data-faq-animated] .faq__rest {
  transition:
    opacity var(--fe-duration-slow) var(--fe-ease-out),
    content-visibility var(--fe-duration-slow) allow-discrete;
}

.faq__rest[hidden] {
  opacity: 0;
}

/* Where closed answers are display: none (no hidden="until-found"), fade in from there too. */
@starting-style {
  [data-faq-animated] .faq__rest {
    opacity: 0;
  }
}

@supports (interpolate-size: allow-keywords) {
  .faq__rest {
    interpolate-size: allow-keywords;
    height: auto;
    overflow: clip;
    overflow-clip-margin: 8px;
  }

  [data-faq-animated] .faq__rest {
    transition:
      opacity var(--fe-duration-slow) var(--fe-ease-out),
      height calc(var(--fe-move) * var(--fe-duration-slow)) var(--fe-ease-out),
      padding-top calc(var(--fe-move) * var(--fe-duration-slow))
        var(--fe-ease-out),
      content-visibility var(--fe-duration-slow) allow-discrete;
  }

  .faq__rest[hidden] {
    height: 0;
  }
}
/* ---------------------------------------------------------------------------------------------
 * 10 · Prihlásenie
 * ------------------------------------------------------------------------------------------- */
.signup-intro {
  flex: 1 1 300px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.signup-intro__lead {
  font-size: clamp(22px, calc(14px + 1cqi), 28px);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fe-on-ink);
  text-wrap: pretty;
}

.signup-intro__text {
  font-size: 18px;
  line-height: 1.5;
  color: var(--fe-on-ink-body);
  text-wrap: pretty;
}

.signup-final {
  flex: 1 1 460px;
  max-width: 520px;
  min-width: 0;
}
/* ---------------------------------------------------------------------------------------------
 * Sign-up form (Ink ground; used in sections 1 and 10)
 * Order: label → input → [format error] → consent → [consent error] → button → [sending error] →
 * microcopy. The button is always under the field.
 * ------------------------------------------------------------------------------------------- */
.signup {
  width: 100%;
  max-width: 460px;
}

.signup__form {
  display: flex;
  flex-direction: column;
}

.signup__label {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--fe-on-ink);
}

.signup__input {
  margin-top: 6px;
  height: 56px;
  width: 100%;
  padding: 0 16px;
  border: 1.5px solid var(--fe-on-ink);
  border-radius: 14px;
  background: #ffffff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  color: var(--fe-text-strong);
}

.signup__input::placeholder {
  color: var(--fe-placeholder);
  opacity: 1;
}

.signup__input:focus {
  outline: 3px solid var(--fe-focus);
  outline-offset: 2px;
}

.signup__input[aria-invalid='true'] {
  border: 3px solid var(--fe-error);
  padding: 0 15px;
}

.signup__consent {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.signup__checkbox {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--fe-ink-button);
  cursor: pointer;
}

.signup__checkbox[aria-invalid='true'] {
  outline: 3px solid var(--fe-error);
  outline-offset: 2px;
}

.signup__checkbox:focus-visible {
  outline: 3px solid var(--fe-focus);
}

.signup__consent-label {
  width: 100%;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--fe-on-ink);
  cursor: pointer;
  text-wrap: pretty;
}

.signup__consent-label a {
  color: var(--fe-on-ink);
  font-weight: 600;
  text-underline-offset: 3px;
}

.signup__consent-label a:hover {
  color: var(--fe-on-ink-muted);
}

.signup__note {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fe-on-ink-body);
}

/* Message box: icon + text, never colour alone. */
.signup__message {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--fe-error);
  border-radius: 10px;
  background: var(--fe-error-bg);
  color: var(--fe-error);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
}

.signup__message svg {
  flex: none;
  margin-top: 1px;
}

.button {
  height: 56px;
  width: 100%;
  border-radius: 14px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.button--primary {
  margin-top: 12px;
  border: 0;
  background: var(--fe-ink-button);
  color: var(--fe-ink);
}

.button--primary:hover {
  background: var(--fe-ink-button-hover);
}

.button--primary:active {
  background: var(--fe-ink-button-active);
}

.button--primary[aria-busy='true'] {
  cursor: progress;
}

.button--secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px solid var(--fe-ink-button);
  background: transparent;
  color: var(--fe-on-ink);
}

.button--secondary:hover,
.button--secondary[data-copied] {
  background: var(--fe-primary-hover);
}

.button__icon-copied,
.button--secondary[data-copied] .button__icon-share {
  display: none;
}

.button--secondary[data-copied] .button__icon-copied {
  display: block;
  color: var(--fe-ink-button);
}

.signup__success {
  display: flex;
  flex-direction: column;
  outline: none;
}

.signup__success-title {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--fe-on-ink);
}

.signup__success-title svg {
  flex: none;
  color: var(--fe-ink-button);
}

.signup__success-text {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--fe-on-ink-body);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.signup__success-title + .signup__success-text {
  margin-top: 10px;
}

.signup__success-text strong {
  font-weight: 700;
  color: var(--fe-on-ink);
}

.signup__share {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--fe-rule-ink);
}

.signup__share-text {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--fe-on-ink);
  text-wrap: pretty;
}

.signup__share-action {
  margin-top: 14px;
}

/* ---------------------------------------------------------------------------------------------
 * Motion — every state change of the form shows itself. Movement scales with --fe-move (0 under
 * reduced motion); the fades stay.
 * ------------------------------------------------------------------------------------------- */

/* A message slides into place, so a repeated error still registers as new. */
.signup__message {
  transition:
    opacity var(--fe-duration-base) var(--fe-ease-out),
    translate var(--fe-duration-base) var(--fe-ease-out);
}

@starting-style {
  .signup__message {
    opacity: 0;
    translate: 0 calc(var(--fe-move) * -4px);
  }
}

/* Buttons give under the finger. */
.button {
  transition:
    background var(--fe-duration-fast) var(--fe-ease-out),
    scale var(--fe-duration-fast) var(--fe-ease-out);
}

.button:active {
  scale: calc(1 - var(--fe-move) * 0.02);
}

/* While the request is in flight, the button breathes instead of looking stuck. */
.button--primary[aria-busy='true'] {
  animation: fe-busy 1.2s var(--fe-ease-in-out) infinite;
}

@keyframes fe-busy {
  50% {
    opacity: 0.7;
  }
}

/* The success message rises into the place the form left… */
.signup__success {
  transition:
    opacity var(--fe-duration-slow) var(--fe-ease-out),
    translate var(--fe-duration-slow) var(--fe-ease-out);
}

@starting-style {
  .signup__success {
    opacity: 0;
    translate: 0 calc(var(--fe-move) * 8px);
  }
}

/* …and its check draws itself: the circle first, then the tick. */
.signup__success-title svg :is(path, polyline) {
  stroke-dasharray: 1;
  animation: fe-draw var(--fe-duration-slow) var(--fe-ease-out) both;
}

.signup__success-title svg polyline {
  animation-delay: var(--fe-duration-base);
}

@keyframes fe-draw {
  from {
    stroke-dashoffset: 1;
  }
}

/* Copied: the tick pops in and the new label fades in. */
.button--secondary[data-copied] .button__icon-copied {
  animation: fe-pop var(--fe-duration-base) var(--fe-ease-out);
}

.button--secondary[data-copied] [data-signup-share-label] {
  animation: fe-fade var(--fe-duration-base) var(--fe-ease-out);
}

@keyframes fe-pop {
  from {
    opacity: 0;
    scale: calc(1 - var(--fe-move) * 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .signup__success-title svg :is(path, polyline) {
    animation: none;
  }
}
/* ---------------------------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------------------------- */
.site-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding-block: 28px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  align-items: flex-start;
  justify-content: space-between;
}

.site-footer__company {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fe-text-body);
}

.site-footer__name {
  font-weight: 700;
  color: var(--fe-text-strong);
}