/* Final cross-page readability layer. Loaded after route-specific stylesheets. */

/* Keep the brand's display type, while raising labels that were below 12px. */
.eyebrow,
.hero-trust,
.scroll-cue,
.field-group small,
.builder-progress-meta,
.library-count,
.story-library-page .library-card-category,
.story-library-page .library-hero-art-label,
.template-category,
.story-label,
.story-skill > span,
.story-art-caption,
.demo-pill,
.concept-banner,
body:not(.concept-night) .footer-bottom,
body:not(.concept-night) .reviews-note,
.story-result .eyebrow,
.account-page .saved-story-head p,
.account-page .share-story-meta,
.journey-copy small {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.hero .eyebrow {
  font-size: 15px !important;
}

/* Form labels and helper text. */
.field-group > span,
.field-group label,
.auth-form > label:not(.account-consent),
.account-consent,
.library-filter label {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.field-group small {
  font-size: 14px !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font-size: 16px !important;
}

/* Explanatory copy that previously resolved to 7–11px on mobile. */
.benefit-card p,
.step-card p,
.step-intro,
.faq-item > p,
.faq-title > p,
.pricing-copy > p,
.price-features li,
.builder-heading > p,
.heading-split > p,
.library-note p,
.account-page .login-copy,
.account-page .saved-story-excerpt,
.account-page .account-hero-row p,
.share-story-text {
  font-size: 17px !important;
  line-height: 1.55 !important;
}

.story-library-page .library-card-age,
.story-library-page .library-card-skill,
.story-library-page .library-card details summary {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.account-page .login-note,
.account-page .login-status,
.account-page .retention-notice,
.account-page .saved-story-head p,
.account-page .share-story-meta,
.demo-pill,
.concept-workshop .dialog-note,
body:not(.concept-night) .footer-bottom,
body:not(.concept-night) .reviews-note {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Action labels stay large enough to recognize and tap. */
.button,
.hero-actions .button,
.step-actions .button,
.result-actions .button,
.saved-story-actions .button,
.saved-story-actions a,
.delete-story-button,
.header-cta,
.button-small,
.button-back,
.library-card-button {
  font-size: 15px !important;
  line-height: 1.3 !important;
  min-height: 44px;
  white-space: normal !important;
}

.main-nav a,
.mobile-nav a,
.concept-banner nav a,
.text-link {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.saved-story-actions {
  flex-wrap: wrap;
}

#create,
.builder-form-panel {
  scroll-margin-top: 6rem;
}

@media (max-width: 760px) {
  .hero .eyebrow {
    font-size: 14px !important;
  }

  .benefit-card p,
  .step-card p,
  .step-intro,
  .faq-item > p,
  .faq-title > p,
  .pricing-copy > p,
  .price-features li,
  .builder-heading > p,
  .heading-split > p,
  .library-note p,
  .account-page .login-copy,
  .account-page .saved-story-excerpt,
  .account-page .account-hero-row p,
  .share-story-text {
    font-size: 16px !important;
  }

  .button,
  .hero-actions .button,
  .step-actions .button,
  .result-actions .button,
  .saved-story-actions .button,
  .saved-story-actions a,
  .delete-story-button,
  .header-cta,
  .button-small,
  .button-back,
  .library-card-button {
    font-size: 14px !important;
  }

  .main-nav a,
  .mobile-nav a,
  .concept-banner nav a,
  .text-link {
    font-size: 14px !important;
  }

  .story-library-page .library-card-age,
  .story-library-page .library-card-skill,
  .story-library-page .library-card details summary {
    font-size: 14px !important;
  }

  .account-page .login-note,
  .account-page .login-status,
  .account-page .retention-notice,
  .account-page .saved-story-head p,
  .account-page .share-story-meta,
  .demo-pill,
  .concept-workshop .dialog-note,
  body:not(.concept-night) .footer-bottom,
  body:not(.concept-night) .reviews-note {
    font-size: 14px !important;
  }

  #create,
  .builder-form-panel {
    scroll-margin-top: 5rem;
  }
}


.hero-trust {
  flex-wrap: wrap;
  white-space: normal !important;
}

.hero-trust > * {
  white-space: normal !important;
}

/* Keep the opening hero phrase on a single line at desktop widths. */
@media (min-width: 1101px) {
  .hero h1 { font-size: clamp(48px, 4vw, 56px); }
}