/* Viewport-width correction. The existing palette, media, and behavior are retained. */
@media screen and (min-width: 761px) {
  :root { --wide-gutter: clamp(22px, 2vw, 72px); }

  /* A viewport gutter replaces the old 1280px page ceiling. */
  .shell {
    width: calc(100% - var(--wide-gutter) - var(--wide-gutter));
    max-width: none;
  }
  .siteHeader { padding-inline: var(--wide-gutter); }
  .cinematicTopline { left: var(--wide-gutter); right: var(--wide-gutter); }
  .cinematicFallback { left: var(--wide-gutter); }
  .heroCopy, .heroCopy h1, .systemCard, .featureCard, .publicTechCard,
  .relatedCard, .boundaryGrid article, .builderCopy, .builderTelemetry {
    min-width: 0;
  }
  .sectionHead > p { max-width: 60ch; }
  .ctaCard h2 { max-width: 22ch; }
  .ctaCard > div > p:last-child { max-width: 68ch; }

  /* The error page uses the same wide canvas; its original message is unchanged. */
  .lostCard {
    width: calc(100% - var(--wide-gutter) - var(--wide-gutter));
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: center;
    column-gap: clamp(36px, 5vw, 160px);
    padding: clamp(40px, 5vw, 150px);
    text-align: left;
  }
  .lostCard img {
    grid-column: 1;
    grid-row: 1 / span 4;
    width: clamp(120px, 20vw, 550px);
    justify-self: center;
  }
  .lostCard > :not(img) { grid-column: 2; }
  .lostCard h1 { font-size: clamp(4.5rem, 8vw, 16rem); }
  .lostCard p { max-width: 55ch; }
  .lostCard .button { justify-self: start; }
}

@media screen and (min-width: 1081px) {
  :root { --header-h: clamp(78px, 5vw, 130px); }
  html { scroll-padding-top: clamp(96px, 7vw, 172px); }
  .siteHeader.scrolled { height: clamp(66px, 4vw, 110px); }
  .siteHeader { gap: clamp(28px, 2vw, 64px); }
  .desktopNav { gap: clamp(20px, 1.8vw, 60px); }
  .brand img { width: clamp(44px, 2.8vw, 86px); height: auto; }
  .brand strong { font-size: clamp(13px, .86vw, 24px); }
  .brand small { font-size: clamp(10px, .58vw, 16px); }
  .desktopNav a, .headerCta { font-size: clamp(10px, .7vw, 20px); }

  .heroContent { padding-top: clamp(142px, 10vh, 240px); }
  .heroCopy { width: 56%; max-width: none; }
  .heroCopy h1 {
    max-width: none;
    font-size: clamp(4.6rem, 5.5vw, 13rem);
  }
  .heroLead { max-width: 58ch; font-size: clamp(1.04rem, 1.05vw, 2rem); }
  .heroActions, .builderActions { gap: clamp(12px, .9vw, 30px); }
  .heroActions { margin-top: clamp(28px, 2vw, 65px); }
  .disciplineRail { gap: clamp(14px, 1vw, 34px); }
  .disciplineRail span { font-size: clamp(9px, .65vw, 18px); }
  .cinematicStatus { font-size: clamp(9px, .65vw, 18px); }
  .mediaControl { font-size: clamp(9px, .65vw, 18px); }
  .button { font-size: clamp(10px, .75vw, 22px); padding: clamp(16px, 1.1vw, 32px) clamp(20px, 1.6vw, 48px); }

  .launchGrid a { min-height: clamp(112px, 8vw, 250px); padding: clamp(18px, 1.5vw, 46px); }
  .launchGrid a strong { font-size: clamp(13px, .95vw, 28px); }
  .launchGrid a b, .launchGrid a em, .launchHeader .textLink { font-size: clamp(9px, .62vw, 18px); }
  .launchHeader { margin-bottom: clamp(22px, 1.6vw, 48px); }

  .sectionHead, .relatedLayout, .boundariesLayout { gap: clamp(48px, 4vw, 140px); }
  .systemGrid, .featureGrid, .publicTechGrid, .relatedCards, .boundaryGrid {
    gap: clamp(18px, 1.25vw, 44px);
  }
  .sectionHead h2, .relatedIntro h2, .boundaryIntro h2 {
    font-size: clamp(2.8rem, 3.5vw, 8.75rem);
  }
  .sectionHead > p, .systemCard > p, .systemCard li,
  .featureCardBody > p:not(.featureKicker), .publicTechCard > p:not(.featureKicker),
  .publicTechCard dd, .relatedIntro > p:not(.eyebrow), .relatedCard div > span,
  .boundaryIntro > p:not(.eyebrow), .boundaryGrid p,
  .builderCopy > p:not(.eyebrow), .ctaCard > div > p:last-child {
    font-size: clamp(14px, .95vw, 28px);
  }
  .systemCard > p, .featureCardBody > p:not(.featureKicker),
  .publicTechCard > p:not(.featureKicker), .relatedIntro > p:not(.eyebrow),
  .boundaryIntro > p:not(.eyebrow), .builderCopy > p:not(.eyebrow) { max-width: 64ch; }
  .eyebrow, .featureKicker, .systemCardSignal, .publicTechCard dt,
  .relatedCard p, .relatedNumber, .featureChips span {
    font-size: clamp(9px, .65vw, 19px);
  }
  .systemCard > a, .textLink, .publicTechCard > a { font-size: clamp(10px, .75vw, 22px); }
  .systemCard { padding: clamp(28px, 2vw, 65px); min-height: clamp(450px, 24vw, 920px); }
  .systemIcon { width: clamp(64px, 5vw, 156px); height: clamp(64px, 5vw, 156px); font-size: clamp(18px, 1.4vw, 42px); }
  .systemCard h3, .relatedCard h3 { font-size: clamp(1.65rem, 1.9vw, 4.4rem); }
  .systemCard ul { gap: clamp(9px, .7vw, 24px); }
  .featureCardVisual { min-height: clamp(230px, 20vw, 620px); }
  .featureCardWide { min-height: clamp(390px, 28vw, 920px); }
  .featureCardBody, .featureCardWide .featureCardBody { padding: clamp(30px, 2.8vw, 88px); }
  .featureCard h3, .publicTechCard h3 { font-size: clamp(2.5rem, 3.1vw, 7rem); }
  .pressVisual span { font-size: clamp(4rem, 5vw, 10.5rem); }
  .publicTechCard { display: flex; flex-direction: column; padding: clamp(32px, 2.5vw, 80px); min-height: clamp(465px, 29vw, 1000px); }
  .publicTechCard > a { position: static; margin-top: auto; padding-top: clamp(20px, 1.5vw, 48px); }
  .publicTechIndex { font-size: clamp(11px, .8vw, 24px); }
  .relatedCard { padding: clamp(22px, 1.7vw, 54px); gap: clamp(22px, 1.5vw, 48px); }
  .boundaryGrid article { padding: clamp(26px, 1.8vw, 58px) clamp(26px, 1.8vw, 58px) clamp(26px, 1.8vw, 58px) clamp(82px, 5vw, 164px); }
  .boundaryGrid article > span { left: clamp(25px, 1.7vw, 55px); top: clamp(27px, 1.8vw, 60px); font-size: clamp(11px, .8vw, 24px); }
  .boundaryGrid h3 { font-size: clamp(1.25rem, 1.4vw, 3rem); }
  .builderCard { gap: clamp(34px, 2.4vw, 80px); padding: clamp(42px, 3vw, 96px); }
  .builderMark { width: clamp(126px, 9vw, 300px); height: clamp(126px, 9vw, 300px); }
  .builderMark img { width: 76%; height: auto; }
  .builderCopy h2 { font-size: clamp(3rem, 4vw, 9rem); }
  .builderTelemetry strong { font-size: clamp(13px, .95vw, 28px); }
  .builderTelemetry small { font-size: clamp(11px, .8vw, 24px); }
  .builderTelemetry div { padding-block: clamp(15px, 1.2vw, 40px); }
  .ctaCard { gap: clamp(40px, 4vw, 140px); padding: clamp(50px, 3.5vw, 112px); }
  .ctaCard h2 { font-size: clamp(3rem, 3.6vw, 9rem); }
  .footerGrid { gap: clamp(36px, 3vw, 96px); }
  .footerBrand p { max-width: 34ch; font-size: clamp(14px, .85vw, 26px); }
  .footerGrid h2 { font-size: clamp(10px, .7vw, 20px); }
  .footerGrid > div:not(.footerBrand) a { font-size: clamp(13px, .85vw, 26px); }
  .footerBottom { font-size: clamp(11px, .7vw, 20px); }
}

/* Long policy copy keeps a reading measure inside the wide page grid. */
@media screen and (min-width: 1100px) {
  .staticPage main {
    width: calc(100% - var(--wide-gutter) - var(--wide-gutter));
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
    gap: 36px clamp(48px, 6vw, 230px);
    align-items: start;
  }
  .staticPage main > .eyebrow, .staticPage main > h1 { grid-column: 1 / -1; margin: 0; }
  .staticPage main > h2 { grid-column: 1; margin: 0; font-size: clamp(1.45rem, 1.5vw, 2.5rem); }
  .staticPage main > p:not(.eyebrow) { grid-column: 2; margin: 0; max-width: 75ch; font-size: clamp(1rem, 1vw, 1.5rem); }
  .staticPage main > p:nth-of-type(2) { grid-column: 1; }
}

@media screen and (min-width: 1800px) {
  .boundaryGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}