/* Readable type overlay. Sizes only — no new composition.
   Button height stays with the current system (block 56px via header-exclaim.js).
   Do not set --btn-exclaim-h here. */

:root { --reading-size: 18px; --reading-line: 1.55; }

#problem .p2__lead,
#problem .p2__item p,
#problem .p2__card p,
#problem .p2__reason p,
#services .s3__lead,
#services .service > p:not(.service__tags),
#prototype .p4__lead,
#prototype .p4__point p,
#cases .c5__lead,
#process .pr2__lead,
#process .pr2-step__copy > p:not(.pr2-step__result),
#faq .az-faq__answer,
#faq .az-faq__lead,
.az-footer-iceberg__intro p,
.az-footer-iceberg__depth p,
.page-article .article-body p,
.page-article .article-body li,
.page-article .article-body blockquote,
.page-article .article-toc li {
  font-size: var(--reading-size) !important;
  line-height: var(--reading-line) !important;
}

#hero .hero__subtitle,
#hero .hero-artboard .hero__content .hero__subtitle,
#hero .hero__bullets,
#hero .hero-artboard .hero__content .hero__bullets,
#hero .hero__bullets li,
#hero .hero-artboard .hero__content .hero__bullets li {
  font-size: 18px !important;
  line-height: 1.5 !important;
}

#hero .hero-artboard .hero__content .micro,
#hero .micro { font-size: 16px !important; line-height: 1.5 !important; }

/* Bullets stay white on orange. Subtitle color is left to the current CSS (black). */
#hero .hero__bullets li { color: #fff !important; }
#hero .hero__bullets li::marker { color: #fff !important; }

#services .service__tags,
#services .service__tags span:not(.service__separator),
#services .s3__tab > span:not(.s3__tab-number),
#cases .c5__card-summary,
.blog-card__excerpt,
.blog-card__more,
#pricing .az-pricing__desc,
#pricing .az-pricing__desc p,
#pricing .az-pricing__desc-after,
#pricing .az-pricing__list li,
#pricing .az-pricing__card-back p,
#pricing .az-pricing__details-link,
#pricing .az-pricing__flip-btn,
#process .pr2-step__result,
#process .pr2-step__result span,
.cta-step__hint,
.contact-messenger__hint,
.form__consent,
.az-footer-iceberg-footer a,
.az-footer-iceberg-footer p {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.az-audience__copy { font-size: 18px !important; line-height: 1.5 !important; white-space: normal !important; }
#services .s3__tab { font-size: 16px !important; }
.cta-step__extra input,
.cta-step__field input,
.cta-step__field textarea { font-size: 16px !important; }

/* Captions only. Height and --btn-exclaim-h stay with the current button system.
   Width may grow with the label (header-exclaim.js measures the text). */
.btn-exclaim .btn-exclaim__label { font-size: 16px !important; }

#hero .hero__actions { flex-wrap: wrap !important; }
#process .pr2-step__result { flex-wrap: wrap; max-width: 100%; height: auto; }
#cases .c5__card-copy { overflow: visible; }

/* Full desktop scene: artboard is scale(var(--hero-scale)).
   Inverse scale on the copy box keeps reading text at 18px on screen
   and restores the previous visual H1 (58px × scene scale). */
@media (min-width: 1366px) {
  .hero-pin #hero .hero-artboard .hero__content {
    transform: scale(calc(1 / var(--hero-scale, 1))) !important;
    transform-origin: top left !important;
    width: calc(650px * var(--hero-scale, 1)) !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  .hero-pin #hero .hero__content > .hero__title,
  .hero-pin #hero .hero__content > .hero__subtitle,
  .hero-pin #hero .hero__content > .hero__bullets,
  .hero-pin #hero .hero__content > .hero__actions,
  .hero-pin #hero .hero__content > .micro {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    transform: none !important;
    flex: none !important;
  }

  .hero-pin #hero .hero__title {
    font-size: calc(58px * var(--hero-scale, 1)) !important;
    line-height: calc(60px * var(--hero-scale, 1)) !important;
    margin: 0 0 20px !important;
  }

  .hero-pin #hero .hero__title-line { white-space: normal !important; }
  .hero-pin #hero .hero__content > .hero__subtitle { margin: 0 0 18px !important; max-width: calc(510px * var(--hero-scale, 1)) !important; }
  .hero-pin #hero .hero__content > .hero__bullets { margin: 0 0 20px !important; padding-left: 1.2em !important; max-width: calc(510px * var(--hero-scale, 1)) !important; }
  .hero-pin #hero .hero__actions { margin: 0 !important; gap: 12px !important; }
  .hero-pin #hero .hero__content > .micro { margin: 18px 0 0 !important; max-width: calc(510px * var(--hero-scale, 1)) !important; }

  .hero-pin {
    height: max(calc(666px * var(--hero-scale, 1)), var(--reading-hero-height, 0px)) !important;
    min-height: max(calc(666px * var(--hero-scale, 1)), var(--reading-hero-height, 0px)) !important;
  }
}

@media (max-width: 600px) {
  #hero .hero__actions { align-items: flex-start !important; gap: 8px !important; }
  .az-footer-iceberg__depth p { max-width: 100%; }
}