/* Align the first screen with the product-style navigation content area. */
body[data-page="home"] main section:first-of-type {
  max-width: 1280px;
}

body[data-page="home"] main section:first-of-type > .max-w-4xl,
body[data-page="home"] main section:first-of-type p.max-w-3xl {
  max-width: none;
  width: 100%;
}

@media (min-width: 1024px) {
  body[data-page="home"] main section:first-of-type > .max-w-4xl {
    max-width: 1080px;
  }

  body[data-page="home"] main section:first-of-type .max-w-2xl {
    width: 88%;
    max-width: none;
  }

  body[data-page="home"] main section:first-of-type .max-w-2xl > form {
    width: 672px;
    zoom: var(--hero-form-scale, 1);
  }

  body[data-page="home"] main section:first-of-type .mt-14.max-w-5xl {
    width: 1024px;
    max-width: none;
    zoom: var(--hero-panel-scale, 1);
  }

  /* Preserve each row's original card dimensions and scale the entire row. */
  body[data-page="home"] main section:first-of-type > .grid.max-w-5xl,
  body[data-page="home"] main section:nth-of-type(2) .grid.max-w-5xl {
    width: 1024px;
    max-width: none;
    zoom: var(--home-card-scale, 1);
  }

  body[data-page="home"] main section:nth-of-type(2) .text-center.max-w-3xl {
    width: calc(1024px * var(--home-card-scale, 1));
    max-width: 100%;
  }

  /* Keep the expanded card frames, but match the smaller cards' text scale. */
  body[data-page="home"] main section:nth-of-type(2) .grid.max-w-5xl {
    font-size: calc(14px / var(--home-card-scale, 1));
    line-height: calc(20px / var(--home-card-scale, 1));
  }

  body[data-page="home"] main section:nth-of-type(2) .grid.max-w-5xl > .rounded-2xl {
    min-height: 367px;
  }

  body[data-page="home"] main section:nth-of-type(2) .grid.max-w-5xl :is(.text-headline-sm, .text-title-md) {
    font-size: calc(16px / var(--home-card-scale, 1));
    line-height: calc(24px / var(--home-card-scale, 1));
  }

  body[data-page="home"] main section:nth-of-type(2) .grid.max-w-5xl .text-body-md {
    font-size: calc(14px / var(--home-card-scale, 1));
    line-height: calc(22.75px / var(--home-card-scale, 1));
  }

  body[data-page="home"] main section:nth-of-type(2) .grid.max-w-5xl :is(.text-body-sm, .text-code-sm) {
    font-size: calc(12px / var(--home-card-scale, 1));
    line-height: calc(16px / var(--home-card-scale, 1));
  }

  body[data-page="home"] main section:nth-of-type(2) .grid.max-w-5xl .text-label-sm {
    font-size: calc(11px / var(--home-card-scale, 1));
    line-height: calc(14px / var(--home-card-scale, 1));
  }

  /* Compensate for frame scaling so the demo uses the shared type sizes. */
  body[data-page="home"] main section:first-of-type .mt-14.max-w-5xl {
    min-height: 448px;
  }

  body[data-page="home"] main section:first-of-type .mt-14.max-w-5xl > .grid > .p-5 {
    min-height: 266px;
  }

  body[data-page="home"] main section:first-of-type .mt-14.max-w-5xl .text-title-md {
    font-size: calc(16px / var(--hero-panel-scale, 1));
    line-height: calc(24px / var(--hero-panel-scale, 1));
  }

  body[data-page="home"] main section:first-of-type .mt-14.max-w-5xl :is(.text-label-md, .text-body-sm) {
    font-size: calc(14px / var(--hero-panel-scale, 1));
    line-height: calc(22.75px / var(--hero-panel-scale, 1));
  }

  body[data-page="home"] main section:first-of-type .mt-14.max-w-5xl .text-code-sm {
    font-size: calc(12px / var(--hero-panel-scale, 1));
    line-height: calc(16px / var(--hero-panel-scale, 1));
  }

  body[data-page="home"] main section:first-of-type .mt-14.max-w-5xl .text-label-sm {
    font-size: calc(11px / var(--hero-panel-scale, 1));
    line-height: calc(14px / var(--hero-panel-scale, 1));
  }

  body[data-page="home"] main section:first-of-type .max-w-2xl > form {
    min-height: 56px;
  }

  body[data-page="home"] main section:first-of-type .max-w-2xl > form :is(input, button) {
    min-height: 44px;
    font-size: calc(14px / var(--hero-form-scale, 1));
    line-height: calc(20px / var(--hero-form-scale, 1));
  }
}