/* Shared editorial hierarchy. Loaded after each page's component styles.
   Explicit roles keep prose, captions, tool panels and section titles distinct. */
:root {
  --type-copy: 1rem;
  --type-meta: .875rem;
  --type-card: 1.2rem;
  --type-panel: clamp(1.375rem, 2.2vw, 1.75rem);
  --type-section: clamp(1.75rem, 3.1vw, 2.75rem);
  --type-page: clamp(2.125rem, 4.5vw, 4rem);
  --section-space: clamp(2.5rem, 4.5vw, 4rem);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: var(--type-copy); }

main p,
main .type-copy,
main li:not(:where([class*="breadcrumb"] li, nav li)) {
  font-size: var(--type-copy) !important;
  line-height: 1.65 !important;
}

main .type-kicker {
  font-size: .75rem !important;
  line-height: 1.5 !important;
}

main .type-meta {
  font-size: var(--type-meta) !important;
  line-height: 1.55 !important;
}

main .type-quote,
main blockquote p {
  font-size: clamp(1.25rem, 2.1vw, 1.6rem) !important;
  line-height: 1.4 !important;
}

main .type-page-title {
  font-size: var(--type-page) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
  overflow-wrap: break-word;
  max-width: min(100%, 18ch) !important;
}

main .type-section-title {
  font-size: var(--type-section) !important;
  line-height: 1.15 !important;
  letter-spacing: -.03em !important;
  text-wrap: balance;
  overflow-wrap: break-word;
  max-width: min(100%, 24ch) !important;
}

main h3,
main .type-card-title {
  font-size: var(--type-card) !important;
  line-height: 1.3 !important;
  letter-spacing: -.015em !important;
  text-wrap: balance;
}

main .type-panel-title {
  font-size: var(--type-panel) !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
}

main .rhythm-section-start { padding-top: var(--section-space) !important; }
main .rhythm-section-end { padding-bottom: var(--section-space) !important; }

/* A short line length keeps large screens readable without narrowing grids. */
main :is(.type-copy, .type-meta) { overflow-wrap: break-word; }
main :is(article, aside, fieldset, [class*="-copy"], [class*="-heading"]) { min-width: 0; }
main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  max-width: 100%;
  font-size: 1rem !important;
  line-height: 1.5;
}
main label { line-height: 1.5; }
main :is(h1, h2, h3, section[id]) { scroll-margin-top: 7rem; }

/* Shared reading sections had inherited 9vw gaps and wide, uneven columns. */
body .section > :is(.split, .treatment-layout, .faq-layout, .section-heading),
body :is(.causes-section-heading, .triggers-section-heading, .screener-section-heading) {
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
body .section > :is(.split, .treatment-layout, .faq-layout) { align-items: start; }
body .section p { max-width: 70ch; }

/* Functional panel headings are deliberately smaller than editorial titles. */
main :is(.scan-guidance-copy, .breath-controls-heading, .influence-detail) h3 {
  font-size: var(--type-panel) !important;
  line-height: 1.2 !important;
}
main .breath-alarm-copy h3 {
  font-size: var(--type-section) !important;
  line-height: 1.15 !important;
}

/* Keep the compact support illustration alongside readable copy. */
body .support-band--enhanced .support-intro { align-items: flex-start; }
body .support-band--enhanced .support-list article { min-width: 0; }

/* Narrow utility rails need their own scale, rather than a full hero title. */
main :is(.checkout-summary, .contact-welcome) .type-page-title {
  font-size: var(--type-panel) !important;
  max-width: 100% !important;
}
main .contact-welcome .type-page-title {
  font-size: clamp(2rem, 3vw, 2.75rem) !important;
}
body .site-footer--unified .footer-welcome h2 {
  font-size: var(--type-section);
  line-height: 1.15;
}

/* Keep a single editorial heading above the interactive ERP diagram. */
.erp-cycle-section .ocd-cycle-heading { grid-template-columns: minmax(0, 1fr); }

body :is(.visualisation-intro, .visualisation-guidance, .visualisation-tips,
  .thoughts-intro, .thoughts-guidance, .thoughts-tips) {
  margin-bottom: var(--section-space);
}
body :is(.visualisation-benefit, .thoughts-benefit) { min-height: 0; }
body :is(.visualisation-benefit, .thoughts-benefit) > span { margin-bottom: 1.5rem; }
body :is(.visualisation-section-heading, .thoughts-section-heading) { margin-bottom: 1.5rem; }

@media (max-width: 620px) {
  body :is(.visualisation-content, .thoughts-content) { padding-top: 3rem; }
}

body :is(.visualisation-intro, .visualisation-guidance, .visualisation-tips,
  .thoughts-intro, .thoughts-guidance, .thoughts-tips) {
  margin-bottom: var(--section-space);
}
body :is(.visualisation-benefit, .thoughts-benefit) { min-height: 0; }
body :is(.visualisation-benefit, .thoughts-benefit) > span { margin-bottom: 1.5rem; }
body :is(.visualisation-section-heading, .thoughts-section-heading) { margin-bottom: 1.5rem; }

@media (max-width: 620px) {
  body :is(.visualisation-content, .thoughts-content) { padding-top: 3rem; }
}

@media (max-width: 1000px) {
  :root { --type-page: clamp(2.125rem, 5.7vw, 3rem); }
  body .section > :is(.split, .treatment-layout, .faq-layout),
  body :is(.causes-section-heading, .triggers-section-heading, .screener-section-heading) {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 620px) {
  :root { --type-page: clamp(2.125rem, 9.2vw, 2.5rem); --type-section: 1.75rem; }
  main .type-page-title { max-width: 100%; }
  main .type-section-title { max-width: 100%; }
  body .section { padding-inline: 1.25rem; }
  body .support-band--enhanced .support-intro { gap: .875rem; }
  body .support-band--enhanced .support-art { flex-basis: 4.5rem; width: 4.5rem; height: 4.5rem; }
}
/* Urgent support uses the same outer width as the page's reading sections. */
body main > .help-now { width: min(1200px, 90%); max-width: 1200px; margin: 24px auto; box-sizing: border-box; }
@media (max-width: 620px) { body main > .help-now { width: calc(100% - 40px); } }
/* Accordion questions use the same copy scale throughout the site. */
body main .faq-question { font-family: inherit; font-size: var(--type-copy, 1rem); font-weight: 600; line-height: 1.5; }
body main .faq-question span { font-size: inherit; font-weight: inherit; }