/* Continuous-screen foldables use their actual CSS viewport, not a guessed model/DPR.
   No artificial hinge gutter: iPhone Duo has a continuous inner display. */
.page {
  --page-edge: 16px;
  --page-top: 18px;
  --page-bottom: 56px;
  padding-left: max(var(--page-edge), env(safe-area-inset-left, 0px));
  padding-right: max(var(--page-edge), env(safe-area-inset-right, 0px));
  padding-top: max(var(--page-top), env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--page-bottom) + env(safe-area-inset-bottom, 0px));
}
.site-up-btn {
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--back-to-top-offset, 24px) + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 700px) {
  .page { --page-edge: 12px; --page-top: 12px; --page-bottom: 40px; }
  .site-up-btn { --back-to-top-offset: 94px; }
}
@media (max-width: 560px) {
  .page { --page-edge: 10px; --page-top: 10px; --page-bottom: 34px; }
}

/* The old narrow desktop text column made unfolded/landscape heroes too tall. */
@media (min-width: 701px) and (max-width: 1180px) {
  .home-brand-hero {
    min-height: 0;
    padding: 16px;
  }
  .home-brand-hero__content {
    width: 64%;
    max-width: 640px;
    padding: 22px;
    margin: 0 0 0 auto;
    gap: 10px;
  }
  .home-brand-hero::before {
    width: 64%;
    top: 16px;
    right: 16px;
    bottom: 16px;
    background: linear-gradient(145deg, rgba(6, 11, 24, 0.66), rgba(6, 11, 24, 0.42));
  }
  .home-brand-hero h1 {
    max-width: none;
    margin: 0;
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    line-height: 1;
    justify-self: stretch;
  }
  .home-brand-hero__lead {
    max-width: 42ch;
    margin: 0;
  }
  .home-brand-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }
  .home-brand-hero__actions .home-brand-hero__link {
    width: auto;
    min-height: 44px;
    flex: 0 1 auto;
  }
}

/* A short landscape window should not inherit a portrait-sized introduction. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1180px) {
  .home-brand-hero {
    min-height: 0;
    padding: 12px;
  }
  .home-brand-hero__content {
    width: 76%;
    max-width: none;
    padding: 14px 18px;
    gap: 8px;
    margin: 0 0 0 auto;
  }
  .home-brand-hero::before {
    width: 76%;
    left: auto;
    right: 12px;
    top: 12px;
    bottom: 12px;
    background: linear-gradient(145deg, rgba(6, 11, 24, 0.7), rgba(6, 11, 24, 0.5));
  }
  .home-brand-hero h1 {
    max-width: none;
    margin: 0;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1;
  }
  .home-brand-hero .kicker { margin: 0; }
  .home-brand-hero__lead { max-width: none; margin: 0; }
  .home-brand-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }
  .home-brand-hero__actions .home-brand-hero__link {
    width: auto;
    min-height: 44px;
  }
}

/* Keep controls usable in narrow Split View and folded outer-screen layouts. */
@media (max-width: 1180px) {
  .page button,
  .page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .page select {
    min-height: 44px;
  }
  .page input,
  .page select,
  .page textarea {
    font-size: 16px;
  }
}