/* V7.5: shared type and spacing roles across all four sections. */
:root {
  --text-section: 35px;
  --text-title: 25px;
  --text-body: 15px;
  --text-intro: 15px;
  --text-lead: 17px;
  --text-meta: 10px;
  --text-caption: 12px;
  --text-control: 14px;
  --text-input: 16px;
  --text-trust: 13px;
  --leading-section: 1.02;
  --leading-title: 1.1;
  --leading-body: 1.6;
  --leading-intro: 1.55;
  --leading-lead: 1.35;
  --leading-meta: 1.4;
  --leading-caption: 1.55;
  --leading-trust: 1.55;
  --weight-title: 760;
  --weight-lead: 500;
  --weight-label: 700;
  --tracking-section: -.055em;
  --tracking-title: -.04em;
  --tracking-lead: -.018em;
  --tracking-meta: .16em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --section-space: var(--space-16);
  --section-bridge: 88px;
  --heading-gap: var(--space-8);
  --intro-gap: var(--space-5);
  --copy-gap: var(--space-4);
  --lead-copy-gap: var(--space-2);
  --component-space: var(--space-6);
  --grid-gap: var(--space-6);
  --measure-body: 64ch;
  --measure-stage: 38ch;
  --measure-intro: 56ch;
}
.keep-together { white-space: nowrap; }
.section-title { white-space: nowrap; }

@media (max-width: 359px) {
  :root { --text-section: 32px; --text-title: 23px; --text-lead: 16px; --text-trust: 12.5px; }
}
@media (max-width: 799px) and (max-height: 590px) {
  :root { --text-caption: 11.5px; }
}
@media (min-width: 800px) {
  :root {
    --text-section: 54px;
    --text-title: 29px;
    --text-body: 15.5px;
    --text-intro: 17px;
    --text-lead: 21px;
    --text-trust: var(--text-caption);
    --section-space: var(--space-24);
    --section-bridge: 128px;
    --heading-gap: var(--space-10);
    --intro-gap: var(--space-6);
    --grid-gap: var(--space-12);
  }
}
@media (min-width: 800px) and (max-width: 1040px) {
  :root { --text-title: 27px; --text-lead: 19px; }
}
@media (min-width: 800px) and (max-width: 1150px) {
  :root { --grid-gap: var(--space-8); }
}
@media (min-width: 800px) and (max-width: 1023px) and (max-height: 500px) {
  :root { --text-intro: 15px; --text-caption: 11.5px; }
}