/* Dopisy dětem — centrální typografický systém
 * Amatic SC: pouze H1, H2 a velké pohádkové nadpisy.
 * Open Sans: veškerá ostatní typografie a ovládací prvky.
 */
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/amatic-700-cs.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/open-sans-cs.woff2') format('woff2');
}

:root {
  --font-display: 'Amatic SC', cursive;
  --font-ui: 'Open Sans', Arial, sans-serif;
  --font-heading: var(--font-ui);
  --font-body: var(--font-ui);
  --type-h1-size: clamp(4rem, 6.4vw, 6.75rem);
  --type-h1-leading: .92;
  --type-h2-size: clamp(3.25rem, 4.9vw, 5rem);
  --type-h2-leading: .96;
  --type-h3-size: clamp(1.5rem, 2.2vw, 2rem);
  --type-h3-leading: 1.25;
  --type-h4-size: clamp(1.25rem, 1.7vw, 1.5rem);
  --type-h4-leading: 1.32;
  --type-h5-size: 1.125rem;
  --type-h6-size: 1rem;
  --type-lead-size: clamp(1.125rem, 1.55vw, 1.375rem);
  --type-body-large-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  --type-body-size: clamp(1rem, 1.1vw, 1.125rem);
  --type-small-size: .9375rem;
  --type-caption-size: .875rem;
  --type-sample-copy-size: 1.25rem;
  --type-body-leading: 1.65;
  --type-small-leading: 1.55;
  --type-heading-gap: 1.25rem;
  --type-display-hero-size: var(--type-h1-size);
  --type-display-section-size: var(--type-h2-size);
  --type-display-support-size: clamp(2.75rem, 3.7vw, 3.5rem);
  --type-display-leading: var(--type-h1-leading);
  --display: var(--font-display);
  --head: var(--font-ui);
  --body: var(--font-ui);
}

html { font-family: var(--font-ui); }
body, input, textarea, select, button { font-family: var(--font-ui); }
body { font-size: var(--type-body-size); font-weight: 400; line-height: var(--type-body-leading); }

h1, .type-h1, .type-display, .type-display-hero, .hero h1, .thanks-hero h1,
.order-hero h1, .legal-hero h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  font-weight: 700;
  line-height: var(--type-h1-leading);
  letter-spacing: 0;
  margin-block: 0 2rem;
}

h2, .type-h2, .type-display-section, .sec-title, .offer-title,
.legal-article h2, .toc h2, .fapi-placeholder h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  font-weight: 700;
  line-height: var(--type-h2-leading);
  letter-spacing: 0;
  margin-block: 0 var(--type-heading-gap);
}

.type-display-support, .moment-video-title, .footer-name, .site-footer__brand {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: .96;
  letter-spacing: 0;
}
.moment-video-title, .type-display-support { font-size: clamp(2.75rem, 3.7vw, 3.5rem); }

h3, .type-h3, .item h3, .sample-text h3, .sample-copy-title,
.signup-card h3, .modal h3, .founder h3, .step h3 {
  font-family: var(--font-ui);
  font-size: var(--type-h3-size);
  font-weight: 700;
  line-height: var(--type-h3-leading);
  letter-spacing: 0;
  margin-block: 0 .75rem;
}

h4, .type-h4, .footer h4, .site-footer h4 {
  font-family: var(--font-ui);
  font-size: var(--type-h4-size);
  font-weight: 700;
  line-height: var(--type-h4-leading);
  margin-block: 0 .75rem;
}
h5, .type-h5 { font: 600 var(--type-h5-size) / 1.4 var(--font-ui); margin-block: 0 .625rem; }
h6, .type-h6 { font: 600 var(--type-h6-size) / 1.45 var(--font-ui); margin-block: 0 .5rem; }

.type-eyebrow, .eyebrow, .eyebrow-hero, .sample-text .cap,
.sample-showcase > .cap, .stack > h3, .signup-card .eyebrow,
.pricebox .founding-tag, .urgency {
  font-family: var(--font-ui);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-block: 0 1rem;
}

.type-lead, .hero .lead, .thanks-hero .sub, .order-hero .sub, .founders-lead {
  font: 400 var(--type-lead-size) / 1.6 var(--font-ui);
}
.type-body-large, .sample-text .letter-quote {
  font: 400 var(--type-body-large-size) / 1.65 var(--font-ui);
}
.type-body, p, li, dd, dt, .manifest p, .item p, .kuk-quote p, .kuk-after,
.sample-text p, .stack li, .pricebox p, .signup-card p, .faq .answer p,
.modal p, .legal-copy { font-family: var(--font-ui); font-weight: 400; }
.sample-copy, .offer-bridge {
  font: 400 var(--type-sample-copy-size) / 1.7 var(--font-ui);
}
.offer-bridge {
  max-width: 680px;
  margin: 32px auto 0;
}
.type-small { font: 400 var(--type-small-size) / var(--type-small-leading) var(--font-ui); }
.type-caption, figcaption, .caption { font: 400 var(--type-caption-size) / 1.5 var(--font-ui); }
b, strong, .legal-copy strong, .pricebox .pay strong { font-family: var(--font-ui); font-weight: 700; }

.type-button, .btn, button, [type='submit'], .nav-links a, .faq button,
.site-back, .back-to-top {
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
}
label, legend, .signup-field label, .field label, .field legend {
  font-family: var(--font-ui);
  font-weight: 600;
}
#fapiForm, #fapiForm * { font-family: var(--font-ui) !important; }
.faq button { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
.offer-title { line-height: 1.02; }

@supports (content-visibility: auto) {
  main > section { content-visibility: auto; contain-intrinsic-size: auto 900px; }
}
.stack li, .stack li:last-child { border-top: 0; border-bottom: 0; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

@media (min-width: 761px) {
  .sec { padding-top: 48px; padding-bottom: 48px; }
  .closing { padding-top: 96px; padding-bottom: 120px; }
  #proc { padding-top: 96px; }
  .offer-title-head { max-width: 1100px; }
  .offer-title > span { display: block; white-space: nowrap; }
  #ukazka .sample-showcase .sample-text > :last-child { margin-bottom: 0; }
}

@media (max-width: 760px) {
  :root {
    --type-h1-size: clamp(3rem, 12.3vw, 3.5rem);
    --type-h2-size: clamp(2.75rem, 13vw, 3.75rem);
    --type-h3-size: clamp(1.375rem, 6.2vw, 1.75rem);
    --type-h4-size: clamp(1.1875rem, 5vw, 1.375rem);
    --type-lead-size: 1.125rem;
    --type-body-size: 1rem;
  }
  .offer-title > span { display: inline; }
  .offer-title > span + span::before { content: ' '; }
}