/* chaloop · landing
   Jeden vzor pro celou stránku:
     · mono nadtitulek + serifový nadpis vždy vlevo
     · obsah (náhled, karty, text) vždy vpravo
     · plocha sekce se mění jemným tónem po stupních
   Jediná odchylka je závěr — ten je na střed a tmavý, protože
   je to výzva, ne informace. */

/* ── plochy: hliněný žebřík ─────────────────────────────
   Skokové stupně, ne spojitý přechod — jen tak je postup dolů
   stránkou vidět. Mezi stupni zůstává papír, aby stránka
   dýchala a tón se stupňoval, ne narůstal plynule. */

body { background: var(--paper); }

.surface { background: none; }
.surface--clay-1 { background: var(--clay-1); }
.surface--clay-2 { background: var(--clay-2); }
.surface--clay-3 { background: var(--clay-3); }

/* ── finále: jediný tmavý blok na stránce ────────────── */

.surface--deep {
  background: var(--forest);
  color: var(--on-dark-1);
}

.surface--deep .eyebrow { color: var(--sage-soft); }
.surface--deep h2 { color: var(--on-dark-1); }
.surface--deep .lede { color: var(--on-dark-2); }
.surface--deep .label { color: var(--on-dark-1); }
.surface--deep .hint { color: var(--on-dark-3); }
.surface--deep .hint a { color: var(--sage-soft); border-bottom-color: color-mix(in oklab, var(--sage) 45%, transparent); }
.surface--deep .hint a:hover { border-bottom-color: var(--sage); }
.surface--deep .hint.is-warn { color: var(--orange-soft); }
.surface--deep .btn--primary {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--forest);
}
.surface--deep .btn--primary:hover { background: var(--sage-soft); border-color: var(--sage-soft); }

.surface--deep .closing__who {
  border-top-color: var(--on-dark-rule);
  color: var(--on-dark-3);
}

/* patička navazuje na tmavý blok, ať konec drží pohromadě */
.surface--deep .footbar {
  border-top: 1px solid var(--on-dark-rule);
  color: var(--on-dark-3);
}

.surface--deep .footbar .wordmark { color: var(--on-dark-1); }
.surface--deep .footbar__links .heart { color: var(--orange-soft); }
.surface--deep .footbar a { border-bottom-color: var(--on-dark-rule); }
.surface--deep .footbar a:hover { color: var(--sage-soft); border-bottom-color: var(--sage); }

/* ── duo: rozvrh každé sekce ────────────────────────── */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(52px, 6.5vw, 92px);
  padding-bottom: clamp(52px, 6.5vw, 92px);
}

/* 26ch v tělovém fontu bylo jen 283px a nadpis se lámal na čtyři řádky —
   hlava dostane celý sloupec, měřítko si drží až odstavce v ní */
.duo__head { max-width: 48ch; }
/* nadtitulek s ikonou: ikona pojmenovává téma sekce, ne dekoruje.
   Kroužek ji drží na účaří s mono textem. */
.duo__head .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--orange);
  margin-bottom: 16px;
}

.eyebrow__mark {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 11px;
  /* inline-grid, ne grid — v centrovaném závěru by blokový prvek
     skočil na vlastní řádek a zarovnal se doleva */
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  background: color-mix(in oklab, var(--orange) 22%, var(--paper-2));
  color: color-mix(in oklab, var(--orange) 92%, var(--ink));
  --icon-size: 1.32rem;
  --icon-fill: 1;
}

/* v závěru je nadtitulek centrovaný, tak ať drží i s ikonou */
.closing .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.surface--deep .eyebrow__mark {
  background: color-mix(in oklab, var(--sage) 22%, transparent);
  color: var(--sage-soft);
}
.duo__head h1,
.duo__head h2 {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  text-wrap: balance;
}

.duo__head .lede { margin-top: 18px; max-width: 40ch; }
/* jednotný formát — celá věta stejným řezem i barvou, bez gradace */
.duo__head .jab {
  margin-top: 18px;
  max-width: 46ch;
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 1.06rem;
  text-wrap: balance;
}

.duo__body { min-width: 0; }

/* logo u headlinu — hlavní výskyt značky na stránce */
.hero__brand {
  display: block;
  height: clamp(38px, 3.3vw, 52px);
  margin-bottom: clamp(22px, 2.2vw, 30px);
  color: var(--ink);
}

.hero__brand .wordmark__art { height: 100%; width: auto; fill: currentColor; display: block; }

/* hero má nejsilnější nadpis a formulář, jinak stejný vzor.
   Náhledu dává víc místa než ostatní sekce — je to hlavní argument. */
.duo--hero {
  padding-top: clamp(44px, 5vw, 76px);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.45fr);
  gap: clamp(30px, 3.5vw, 54px);
}
.duo--hero .duo__head .eyebrow { display: block; margin-bottom: 14px; }
.duo--hero .duo__head h1 { font-size: clamp(1.95rem, 2.8vw, 2.6rem); }
.duo--hero .signup { margin-top: 30px; }

.signup { margin-top: 26px; max-width: 440px; }

@media (max-width: 1020px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo__head { max-width: 60ch; }
}

/* ── obsah v pravém/levém sloupci ───────────────────── */

/* karty 2×2 uvnitř sloupce */
.duo__body .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.duo__body .card { padding: clamp(18px, 2vw, 26px); }
.duo__body .card__body { font-size: .96rem; max-width: none; }
.duo__body .card .vignette { height: 84px; margin-bottom: 16px; }

/* odstavce v těle sekce */
.duo__body > .lede + .lede { margin-top: 16px; }
.duo__body > .lede { max-width: 56ch; }

/* fakta: dvě tvrzení oddělená vlasem */
/* výčty: krátké body místo odstavců. Ikona je odrážka jen tam, kde
   nese význam — pod štítkem „je / není to pro vás“ ji nese už štítek. */
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ticks li {
  display: flex;
  align-items: baseline;
  gap: 11px;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.ticks li .icon {
  --icon-size: 1.15rem;
  color: color-mix(in oklab, var(--sage) 58%, var(--ink));
  transform: translateY(3px);
}

/* body bez ikony dostanou tečku, ať drží stejný odstup */
.ticks li:not(:has(.icon))::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in oklab, var(--sage) 55%, var(--ink-soft));
  transform: translateY(-4px);
}

.fact--no .ticks li::before { background: color-mix(in oklab, var(--ink-soft) 45%, transparent); }

.facts { display: grid; gap: 22px; }
.fact { padding-top: 22px; border-top: 1px solid var(--rule); }
.fact:first-child { padding-top: 0; border-top: 0; }

.fact__label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in oklab, var(--sage) 58%, var(--ink));
  margin-bottom: 10px;
}

.fact--no .fact__label { color: var(--ink-soft); }
.fact > p:last-child { color: var(--ink-soft); max-width: 56ch; }
.duo__body .ticks + .duo__note { margin-top: 20px; }

/* poznámka pod obsahem */
.duo__note { margin-top: 22px; color: var(--ink-soft); max-width: none; text-wrap: pretty; }

/* ── závěr: vzor se rozpustí, zůstane jen výzva ─────── */

.closing {
  padding-top: clamp(72px, 9vw, 124px);
  padding-bottom: clamp(64px, 8vw, 104px);
  text-align: center;
}

.closing .eyebrow__mark { background: color-mix(in oklab, var(--sage) 22%, transparent); color: var(--sage-soft); }
.closing h2 { max-width: 26ch; margin: 0 auto; font-size: clamp(1.9rem, 2.9vw, 2.6rem); }
.closing .lede { margin: 26px auto 0; max-width: 50ch; }
.closing .signup { margin: 40px auto 0; }
.closing .hint { text-align: center; }
.closing__who {
  margin: clamp(52px, 6vw, 76px) auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  max-width: 56ch;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .duo__head h1, .duo__head h2, .closing h2 { max-width: none; }
  .duo__body .cards { grid-template-columns: minmax(0, 1fr); }
}