/* Approved type roles, 24 October 2026. See TYPOGRAPHY.md.
   Desktop baselines are measured at 1440px; wide-screen roles grow together. */
:root {
  --text-body: 16px;
  --text-question: 18px;
  --text-intro: 20px;
  --text-subheading: 24px;
  --text-story: 48px;
  --text-feature: clamp(38px, 2.638889vw, 72px);
  --section-heading-size: 68px;
  --text-hero: clamp(80px, 5.555556vw, 160px);
  --story-content-width: min(1760px, calc(76% - 80px));
}
.badge-hello { font-size: var(--text-body); }
.faq-list summary { font-size: var(--text-question); }
.badge-story-title { font-size: var(--text-intro); }
.cohort-feedback h3 { font-size: var(--text-subheading); }
.launch-story .story-reading .story-copy { font-size: var(--text-story); }
.showcase-section .story-copy { font-size: var(--text-feature); }
.hero .hero-headline { font-size: var(--text-hero); }
.showcase-section .story-review-sentence {
  font-size: var(--text-wide-body, var(--text-body)); font-weight: 400; line-height: 1.5; letter-spacing: 0;
}

@media (min-width: 1101px) {
  :root {
    --text-wide-label: clamp(14px, .972222vw, 20px);
    --text-wide-body: clamp(16px, 1.111111vw, 24px);
    --hero-text-gap: clamp(24px, 1.666667vw, 40px);
    --course-card-padding: 32px;
  }
  .hero .hero-headline { max-width: 1800px; }
  .hero .hero-description {
    width: 100%; max-width: 560px;
    font-size: var(--text-intro); margin-top: var(--hero-text-gap);
  }
  .hero .eyebrow {
    font-size: var(--text-wide-label); margin-bottom: var(--hero-text-gap);
  }
  .hero .hero-actions { gap: clamp(18px, 1.25vw, 28px); margin-top: calc(var(--hero-text-gap) + 16px); }
  .hero > .hero-byline { font-size: 14px; }
  .showcase-section .story-copy { max-width: none; }
  .showcase-section #showcase-heading { font-size: var(--text-wide-label); margin-bottom: clamp(24px, 1.666667vw, 40px); }

  .showcase-section .course-outcomes { margin-top: clamp(24px, 1.666667vw, 40px); }
  .showcase-section .course-outcomes h3 { font-size: clamp(18px, 1.25vw, 28px); }
  .showcase-section .course-outcomes li { font-size: var(--text-wide-body); }
  .showcase-section .course-outcomes ul { gap: clamp(9px, .625vw, 16px); }
}
@media (min-width: 1001px) {
  .launch-story .story-reading,
  .showcase-section .story-columns { width: var(--story-content-width); max-width: 1760px; }
}
/* Both large reading paragraphs share one whole-number scale above 1440px. */
@media (min-width: 1441px) {
  :root { --text-feature: 48px; --text-story: var(--text-feature); }
}
@media (min-width: 1920px) { :root { --text-feature: 52px; } }
@media (min-width: 2240px) { :root { --text-feature: 60px; } }
@media (min-width: 2560px) { :root { --text-feature: 68px; } }
@media (min-width: 2880px) { :root { --text-feature: 72px; } }
/* Later sections use one wide-screen scale, without enlarging navigation or CTAs. */
@media (min-width: 1920px) {
  :root { --section-heading-size: 80px; --lower-content-width: 1440px; --course-card-padding: 40px; }
  :is(.audience, .course, .faq, .waitlist) {
    --text-body: 20px; --text-description: 24px; --text-question: 24px;
    --text-subheading: 28px; --card-title-size: 36px; --text-section-detail: 16px;
  }
  .fit-course-flow .audience, .course-layout, .waitlist-layout {
    width: calc(100% - 160px); max-width: var(--lower-content-width); padding-inline: 0;
  }
  .course-layout, .faq, .waitlist-layout { column-gap: 96px; }
  .audience .audience-intro .lead { max-width: 36em; }
  .course-intro .course-headline { max-width: none; }
  .fit-card { padding: 44px 48px; }
  .fit-card strong { font-size: var(--text-body); }
  .fit-card ol { padding-left: 1.2em; font-size: var(--text-body); }
  #the-course .curriculum .lesson summary { font-size: var(--text-subheading); }
  #the-course .curriculum .lesson-checklist strong { font-size: var(--text-body); }
  #the-course .curriculum .lesson-subheading,
  #the-course .curriculum .lesson-result strong { font-size: var(--text-section-detail); }
  #the-course .curriculum .lesson-checklist li { grid-template-columns: 1em minmax(0,1fr); gap: 12px; }
  .course .eyebrow, .course-intro > h2.eyebrow, .course .day-label,
  .course .lesson-number, .course .challenge-prep { font-size: var(--text-section-detail); }
  .faq-list summary { padding-block: 28px; }
  .waitlist-field > label, .waitlist-field > legend, .waitlist-other > label,
  .waitlist-choice span, .waitlist-form input[type="email"],
  .waitlist-form input[type="text"], .waitlist-form textarea {
    font-size: var(--text-body);
  }
  .waitlist-consent, .waitlist .field-note { font-size: var(--text-section-detail); }
}
@media (min-width: 2560px) {
  :root { --section-heading-size: 96px; --lower-content-width: 1760px; --course-card-padding: 48px; }
  :is(.audience, .course, .faq, .waitlist) {
    --text-body: 24px; --text-description: 28px; --text-question: 28px;
    --text-subheading: 32px; --card-title-size: 40px; --text-section-detail: 20px;
  }
  .course-layout, .faq, .waitlist-layout { column-gap: 120px; }
  .fit-card { padding: 48px 56px; }
  .faq-list summary { padding-block: 32px; }
}
@media (min-width: 3200px) {
  :root { --section-heading-size: 112px; --lower-content-width: 1920px; }
  :is(.audience, .course, .faq, .waitlist) {
    --text-description: 32px; --text-question: 32px;
    --text-subheading: 36px; --card-title-size: 44px;
  }
}
@media (max-width: 1100px) {
  :root {
    --text-hero: 64px;
    --text-feature: 38px;
    --section-heading-size: clamp(44px, 4.6vw, 68px);
  }
}
@media (max-width: 1000px) {
  :root { --text-story: 32px; --text-feature: 32px; }
}
@media (max-width: 700px) {
  :root {
    --text-hero: clamp(36px, 8.8vw, 59px);
    --text-story: 28px;
    --text-feature: 28px;
  }
}
@media print {
  .launch-story .story-reading .story-copy,
  .showcase-section .story-copy { font-size: var(--text-intro); }
}

/* Day panels and feedback share the same internal desktop spacing. */
@media (min-width: 1101px) {
  #the-course .curriculum { padding: 0; }
  #the-course .curriculum .lesson summary { padding: var(--course-card-padding); }
  #the-course .curriculum .lesson-day .lesson-content {
    padding: 0 var(--course-card-padding) var(--course-card-padding);
  }
  #the-course .cohort-feedback { padding: var(--course-card-padding); }
}

/* Two-column desktop FAQ, with its title following the question list. */
@media (min-width: 1001px) {
  .faq.section-wrap {
    width: 100%; max-width: none;
    padding-inline: max(48px, calc((100% - var(--lower-content-width, 1200px)) / 2));
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    column-gap: clamp(48px, 4vw, 96px); row-gap: 48px; align-items: start;
  }
  .faq.section-wrap > div:first-child {
    position: sticky; top: calc(var(--header-height) + 24px);
    align-self: start; min-width: 0; height: fit-content;
  }
  .faq-list { width: 100%; min-width: 0; }
  .faq-list details > p { max-width: 72ch; }
}

/* The profile pass grows with its portrait, type and clips on larger desktops. */
@media (min-width: 1441px) {
  .conference-badge { width: min(100%, clamp(480px, 31.25vw, 720px)); }
}
@media (min-width: 1920px) {
  .mentor .conference-badge {
    --text-body: 20px; --text-intro: 24px; --badge-label-size: 16px;
    --badge-name-size: 48px; --badge-portrait-size: 88px;
    --badge-padding: 40px; --badge-gap: 24px;
  }
  .conference-badge .badge-card { padding: 48px var(--badge-padding) 28px; }
  .conference-badge .badge-person { gap: var(--badge-gap); margin-top: 24px; }
  .conference-badge .badge-person .mentor-portrait { width: var(--badge-portrait-size); height: var(--badge-portrait-size); }
  .mentor .conference-badge .badge-person #mentor-heading,
  .fit-course-flow.has-scroll-surface .mentor .conference-badge .badge-person #mentor-heading { font-size: var(--badge-name-size); }
  .conference-badge .badge-brand-proof { margin-top: var(--badge-gap); }
  .conference-badge .badge-brand-proof > p,
  .conference-badge .badge-footer a,
  .mentor .conference-badge .badge-card .instagram-profile { font-size: var(--badge-label-size); }
  .conference-badge .badge-card .badge-footer { padding-top: 20px; margin-top: var(--badge-gap); }
  .mentor .conference-badge .badge-card .design-social { margin-top: var(--badge-gap); }
  .mentor .conference-badge .badge-card .reel-track { gap: 12px; }
  .conference-badge .badge-lanyard { width: 48px; left: calc(50% - 24px); }
}
@media (min-width: 2560px) {
  .mentor .conference-badge {
    --text-body: 24px; --text-intro: 28px; --badge-label-size: 20px;
    --badge-name-size: 56px; --badge-portrait-size: 104px;
    --badge-padding: 48px; --badge-gap: 28px;
  }
}