/* Mobile navigation and hero: normal content flow, with a swipeable work row. */
.nav-toggle { display: none; }
.hero .hero-previews .preview-mobile-only { display: none; }

@media (max-width: 700px) {
  :root { --header-height: 112px; --nav-height: 88px; }
  html:not(.mobile-nav-ready) { --header-height: 168px; }
  .cohort-banner { height: 24px; padding-block: 4px; box-sizing: border-box; }
  .cohort-marquee, .cohort-track { height: 16px; }
  .cohort-track-group span { line-height: 16px; padding-block: 0; }

  .site-header .header-controls {
    position: relative; grid-template-columns: minmax(0,1fr) auto 48px;
    gap: 10px; margin-top: 16px; width: calc(100% - 32px);
  }
  .site-header .header-controls > .wordmark {
    grid-area: 1 / 1; font-size: 19px; white-space: nowrap;
  }
  .site-header .wordmark .brand-mark { display: none; }
  body .site-header .header-controls > .header-waitlist {
    grid-area: 1 / 2; min-width: 118px; width: 118px; margin-right: 6px;
  }
  .site-header .header-controls > .header-waitlist > .button-face { padding-inline: 12px; }
  .site-header.has-mobile-nav .nav-toggle {
    display: grid; place-items: center; grid-area: 1 / 3;
    width: 48px; height: 48px; padding: 0; border-radius: 8px;
    border: 1px solid rgb(255 255 255 / .16); background: #10121b;
    color: #fff; pointer-events: auto; cursor: pointer;
  }
  .site-header .nav-toggle[data-surface="light"] {
    background: #fff; color: #20211f; border-color: rgb(32 33 31 / .12);
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
  .nav-toggle path { transform-origin: 12px 12px; transition: transform 180ms ease; }
  .is-menu-open .menu-line-top { transform: rotate(45deg) translateY(4px); }
  .is-menu-open .menu-line-bottom { transform: rotate(-45deg) translateY(-4px); }

  .site-header.has-mobile-nav .header-controls > nav {
    display: none; position: absolute; top: calc(100% + 14px); right: 0; left: auto;
    width: min(280px,100%); height: auto; min-height: 0; padding: 8px;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: #10121b; box-shadow: 0 8px 24px rgb(0 0 0 / .16);
  }
  .site-header.has-mobile-nav.is-menu-open .header-controls > nav { display: flex; }
  .site-header.has-mobile-nav .header-controls > nav[data-surface="light"] { background: #fff; }
  .site-header.has-mobile-nav .header-controls > nav .nav-indicator { display: none; }
  .site-header.has-mobile-nav .header-controls > nav .nav-link {
    min-height: 48px; height: auto; justify-content: flex-start; padding: 12px 16px;
  }
  .site-header.has-mobile-nav .header-controls > nav .nav-link[aria-current="location"] {
    background: var(--nav-highlight);
  }

  .intro-flow .hero {
    min-height: 0; padding: calc(var(--header-height) - var(--banner-height) + 24px) 20px 40px;
    justify-content: flex-start; gap: 0;
  }
  .hero .hero-copy { width: 100%; min-height: 0; padding: 0; }
  .hero > .hero-byline {
    position: relative; inset: auto; transform: none; width: 100%; max-width: none;
    margin: 26px 0 0; text-align: center;
  }
  .hero .hero-previews {
    position: relative; inset: auto; display: flex; align-items: center; gap: 16px;
    width: calc(100% + 40px); max-width: none; margin: 24px -20px 0;
    padding: 8px 20px 16px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; scroll-padding-inline: 20px;
    overscroll-behavior-x: contain; scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / .3) transparent; pointer-events: auto;
  }
  .hero .hero-previews .preview-mobile-only { display: block; }
  .hero .hero-previews .preview-card {
    position: relative; inset: auto; flex: 0 0 82%; width: 82%; max-width: 420px;
    min-width: 0; margin: 0 !important; transform: none; translate: none;
    animation: none !important; scroll-snap-align: start;
  }
  .hero-previews:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
  .hero .hero-previews .preview-card:focus-visible { outline-offset: 3px; }
}
@media (max-width: 370px) {
  .site-header .header-controls { gap: 6px; width: calc(100% - 24px); }
  .site-header .header-controls > .wordmark { font-size: 17px; }
  body .site-header .header-controls > .header-waitlist { min-width: 112px; width: 112px; }
}
@media (max-width: 700px) and (hover: none) {
  .hero .hero-previews .prompt-bubble { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle path { transition: none; }
  .hero .hero-previews { scroll-behavior: auto; }
}
@media print { .nav-toggle { display: none !important; } }

/* Cover the full browser viewport, including when tablet controls collapse. */
@media screen {
  .intro-flow .intro-backdrop {
    height: 100vh; height: 100lvh;
    margin-bottom: -100vh; margin-bottom: -100lvh;
  }
  .launch-story .story-stage {
    min-height: 100vh; min-height: 100dvh;
  }
  .launch-story.is-staged .story-stage { height: 100vh; height: 100dvh; }
}

@media screen and (max-width: 1366px) {
  .site-header .wordmark .brand-mark { display: none; }

  /* Optional browsing: vertical gestures always continue the page. */
  .showcase-section,
  .showcase-section.is-scroll-showcase { height: auto; min-height: 100svh; }
  .intro-flow.is-motion-ready .showcase-section { background: transparent; }
  .showcase-section .showcase-stage {
    position: relative; top: auto; height: auto; min-height: 100svh;
    padding: calc(var(--header-height) + 24px) 0 72px;
    overflow: visible;
  }
  .showcase-section .story-columns {
    height: auto; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto;
    row-gap: 32px; opacity: 1; will-change: auto;
  }
  .showcase-section .story-columns .story-showcase {
    width: calc(100% + 56px); max-width: none; height: auto; max-height: none;
    margin-inline: -28px; padding: 0 28px 12px;
    overflow-x: auto; overflow-y: hidden; mask-image: none;
    pointer-events: auto; opacity: 1;
    scroll-snap-type: x proximity; scroll-padding-inline: 28px;
    overscroll-behavior-x: contain; scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / .3) transparent;
  }
  .showcase-section .showcase-track {
    flex-direction: row; gap: 16px; transform: none; will-change: auto;
  }
  .showcase-section .showcase-card {
    flex: 0 0 88%; width: 88%; max-width: 420px;
    aspect-ratio: 16/9; scroll-snap-align: start;
  }
  .showcase-section .story-showcase:focus-visible {
    outline: 2px solid #fff; outline-offset: -4px;
  }
  .showcase-section .showcase-scroll-progress { display: none; }
}
@media screen and (max-width: 370px) {
  .showcase-section .story-columns { width: calc(100% - 44px); }
  .showcase-section .story-columns .story-showcase {
    width: calc(100% + 44px); margin-inline: -22px;
    padding-inline: 22px; scroll-padding-inline: 22px;
  }
}

/* A transparent mobile header and a clean page ending. */
@media screen and (max-width: 700px) {
  html, body { overscroll-behavior-y: none; background-color: #fff; }
  .site-header, .site-header.is-scrolled { background: transparent; }
  .site-header .wordmark { transition: color 180ms ease; }
  .site-header .wordmark:focus-visible { outline-color: currentColor; }
  .fit-card ol > li::before { top: 0; font-size: 15px; line-height: 1.35; }
  .badge-footer a[href*="linkedin.com"] > span[aria-hidden="true"] { display: none; }
  .waitlist-layout { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .waitlist .form-status:empty { min-height: 0; height: 0; margin: 0 !important; }
}
@media (prefers-reduced-motion: reduce) { .site-header .wordmark { transition: none; } }

/* Follow the reading order: description, actions, byline, then examples. */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hero-sequence-running .hero-actions > .hero-waitlist {
    animation-delay: calc(var(--hero-description-at) + 140ms);
    animation-duration: 450ms;
  }
  .hero-sequence-running .hero-actions > .hero-offer-video {
    animation-delay: calc(var(--hero-description-at) + 240ms);
    animation-duration: 450ms;
  }
  .hero-sequence-running .hero > .hero-byline {
    animation-delay: calc(var(--hero-description-at) + 360ms);
    animation-duration: 450ms;
  }
  .hero-sequence-running .hero .preview-card .preview-screen {
    animation-name: hero-chunk-up;
    animation-delay: calc(var(--hero-description-at) + 500ms + var(--mobile-card-stagger, 0ms));
    animation-duration: 500ms;
  }
}

/* Tablet galleries are optional swipe rows, not a long pinned scene. */
@media screen and (min-width: 701px) and (max-width: 1366px) {
  .showcase-section .story-columns {
    width: calc(100% - 96px); max-width: 1000px; row-gap: 40px;
  }
  .showcase-section .story-copy { max-width: none; }
  .showcase-section .story-showcase .showcase-card {
    flex-basis: 48%; width: 48%; max-width: 480px;
  }
  .showcase-section .story-showcase .showcase-track { gap: 24px; }
}

/* Keep the curriculum introduction alongside the day cards above phone sizes. */
@media screen and (min-width: 701px) {
  #the-course .course-intro {
    position: sticky; top: calc(var(--header-height) + 24px);
    align-self: start; min-width: 0;
  }
}
@media screen and (min-width: 701px) and (max-width: 1000px) {
  #the-course .course-layout {
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); column-gap: 32px;
  }
  #the-course .course-intro .course-headline { font-size: 32px; }
}
@media screen and (min-width: 901px) and (max-width: 1100px) {
  #the-course .course-intro .course-headline { font-size: 40px; }
}
@media screen and (min-width: 1101px) and (max-width: 1366px) {
  #the-course .course-intro .course-headline { font-size: 48px; }
}

/* Portrait tablets and phones share the same complete work tickers. */
.hero .hero-previews [data-ticker-copy],
.showcase-section .showcase-track [data-ticker-copy] { display: none; }
@media screen and (max-width: 1024px) {
  .hero .hero-previews .preview-mobile-only { display: block; }
  .hero .hero-previews.work-ticker-ready,
  .showcase-section .story-columns .story-showcase.work-ticker-ready {
    scroll-snap-type: none; scroll-behavior: auto;
  }
  .hero .hero-previews.work-ticker-ready [data-ticker-copy],
  .showcase-section .work-ticker-ready .showcase-track [data-ticker-copy] { display: block; }
  .hero .hero-previews .preview-card { flex-shrink: 0; }
  .showcase-section .showcase-scroll-progress { display: none; }
}
@media screen and (min-width: 701px) and (max-width: 1024px) {
  :root { --text-story: 48px; --text-feature: 48px; }
  .launch-story .story-reading .story-copy, .showcase-section .story-copy { font-size: 48px; }
  .intro-flow .hero {
    min-height: 0; height: auto;
    padding: calc(var(--header-height) - var(--banner-height) + 48px) 48px 48px;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 0;
  }
  .hero .hero-copy { width: 100%; min-height: 0; padding: 0; }
  .hero > .hero-byline {
    position: relative; inset: auto; transform: none; width: 100%; max-width: none;
    margin: 26px 0 0; text-align: center;
  }
  .hero .hero-previews {
    position: relative; inset: auto; display: flex; align-items: center; gap: 24px;
    width: calc(100% + 96px); max-width: none; margin: 32px -48px 0;
    padding: 8px 48px 16px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; scroll-padding-inline: 48px;
    overscroll-behavior-x: contain; scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / .3) transparent; pointer-events: auto;
  }
  .hero .hero-previews .preview-card {
    position: relative; inset: auto; flex: 0 0 48%; width: 48%; max-width: 480px;
    min-width: 0; margin: 0 !important; transform: none; translate: none;
    animation: none !important; scroll-snap-align: start;
  }
  .hero-previews:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
}
@media (max-width: 1024px) and (hover: none) {
  .hero .hero-previews .prompt-bubble { display: none; }
}
/* A normal-flow ending avoids a sticky footer's unused tablet scroll area. */
@media screen and (max-width: 1366px) {
  html, body { overscroll-behavior-y: none; background-color: #fff; }
  .waitlist { position: relative; bottom: auto; }
  .waitlist-layout { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .waitlist .form-status:empty { min-height: 0; height: 0; margin: 0 !important; }
}

/* Portrait-tablet composition: examples first, then the designer credit. */
@media screen and (min-width: 701px) and (max-width: 1024px) and (orientation: portrait) {
  .intro-flow .hero {
    min-height: calc(100svh - var(--banner-height));
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto minmax(32px, 1fr) auto;
    padding-top: calc(var(--header-height) - var(--banner-height) + 24px);
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .hero .hero-copy { grid-row: 2; }
  .hero .hero-previews { grid-row: 3; min-width: 0; margin-top: 32px; }
  .hero > .hero-byline { grid-row: 5; margin-top: 0; }
  .launch-story .story-reading { width: calc(100% - 96px); max-width: 1000px; }
  .launch-story .story-reading .story-copy { text-wrap: balance; }
  .launch-story .story-icon-phrase { white-space: normal; }
  .launch-story .story-icon-phrase:has(> .story-eyes),
  .launch-story .story-icon-phrase:has(> .story-budget) { white-space: nowrap; }
  .launch-story .story-serif[data-icon-cue="clock"] { white-space: normal; }
  #the-course .course-intro .course-headline { font-size: 36px; }
  #the-course .course-headline-stack { height: 3.24em; }
  #the-course .course-headline-slide { line-height: 1.08; text-wrap: initial; }
  #the-course .course-headline-slide .headline-line { display: block; white-space: nowrap; line-height: inherit; }
  #the-course .course-intro .course-headline + p { margin-top: 16px; }
}
@media screen and (min-width: 801px) and (max-width: 900px) and (orientation: portrait) {
  #the-course .course-intro .course-headline { font-size: 40px; }
}
@media screen and (min-width: 901px) and (max-width: 1024px) and (orientation: portrait) {
  #the-course .course-intro .course-headline { font-size: 48px; }
}
@media (min-width: 701px) and (max-width: 1024px) and (orientation: portrait) and (prefers-reduced-motion: no-preference) {
  .hero-sequence-running .hero > .hero-byline { animation-delay: calc(var(--hero-description-at) + 700ms); }
}
/* One tablet grid for questions and signup; titles follow their own sections. */
@media screen and (min-width: 701px) and (max-width: 1366px) {
  .faq.section-wrap, .waitlist .waitlist-layout {
    width: 100%; max-width: none; padding-inline: 48px;
    display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr);
    column-gap: 32px; row-gap: 32px; align-items: start;
  }
  .faq.section-wrap { padding-bottom: 64px; }
  .faq > div:first-child, .waitlist .waitlist-intro {
    position: sticky; top: calc(var(--header-height) + 24px); align-self: start;
    min-width: 0; height: fit-content;
  }
  .faq .faq-list, .waitlist .signup { width: 100%; min-width: 0; }
  .waitlist .waitlist-layout {
    height: auto; min-height: 0; padding-top: 64px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .waitlist .waitlist-intro h2 { max-width: none; }
  .waitlist { height: auto; min-height: 0; margin-bottom: 0; }
  main { padding-bottom: 0; margin-bottom: 0; }
  body { padding-bottom: 0; background-image: none; }
}

.story-icon-tail { white-space: nowrap; }