@media (max-width: 820px) {
  :root {
    --dst-mobile-vh: 100svh;
    --dst-mobile-safe-bottom: env(safe-area-inset-bottom, 0);
    --dst-mobile-shell-width: calc(100vw - 34px);
    --dst-mobile-ai-card-inset: clamp(12px, 2.7vw, 16px);

    --dst-mobile-header-correction: 1px;
    --dst-mobile-hero-edge-gap: clamp(10px, 1.4svh, 12px);
    --dst-nonrail-assistant-right: calc(((100vw - var(--dst-mobile-shell-width)) / 2) + var(--dst-mobile-ai-card-inset));
    --dst-nonrail-assistant-bottom: calc(var(--dst-mobile-hero-edge-gap) + var(--dst-mobile-ai-card-inset) + var(--dst-mobile-safe-bottom));

    --dst-mobile-hero-card-pad-y-short: clamp(13px, 1.9svh, 15px);
    --dst-mobile-hero-intro-gap-short: clamp(8px, 1.2svh, 10px);
    --dst-mobile-hero-subtitle-gap-short: clamp(8px, 1.1svh, 10px);
    --dst-mobile-hero-list-gap-short: clamp(5px, .9svh, 6px);
    --dst-mobile-hero-actions-top-short: clamp(11px, 1.6svh, 13px);
    --dst-mobile-hero-actions-bottom-short: clamp(7px, 1svh, 8px);
    --dst-mobile-hero-actions-gap-short: clamp(7px, 1svh, 8px);
    --dst-mobile-hero-badges-top-short: clamp(5px, .8svh, 6px);
  }
}

@media (max-width: 480px) {
  :root { --dst-mobile-shell-width: calc(100vw - 28px); }
}

@supports (height: 100dvh) {
  @media (max-width: 820px) {
    :root {
      --dst-mobile-vh: 100dvh;
      --dst-mobile-hero-edge-gap: clamp(10px, 1.4dvh, 12px);
      --dst-mobile-hero-card-pad-y-short: clamp(13px, 1.9dvh, 15px);
      --dst-mobile-hero-intro-gap-short: clamp(8px, 1.2dvh, 10px);
      --dst-mobile-hero-subtitle-gap-short: clamp(8px, 1.1dvh, 10px);
      --dst-mobile-hero-list-gap-short: clamp(5px, .9dvh, 6px);
      --dst-mobile-hero-actions-top-short: clamp(11px, 1.6dvh, 13px);
      --dst-mobile-hero-actions-bottom-short: clamp(7px, 1dvh, 8px);
      --dst-mobile-hero-actions-gap-short: clamp(7px, 1dvh, 8px);
      --dst-mobile-hero-badges-top-short: clamp(5px, .8dvh, 6px);
    }
  }
}

@supports not (height: 100svh) {
  @media (max-width: 820px) {
    :root {
      --dst-mobile-vh: 100vh;
      --dst-mobile-hero-edge-gap: clamp(10px, 1.4vh, 12px);
      --dst-mobile-hero-card-pad-y-short: clamp(13px, 1.9vh, 15px);
      --dst-mobile-hero-intro-gap-short: clamp(8px, 1.2vh, 10px);
      --dst-mobile-hero-subtitle-gap-short: clamp(8px, 1.1vh, 10px);
      --dst-mobile-hero-list-gap-short: clamp(5px, .9vh, 6px);
      --dst-mobile-hero-actions-top-short: clamp(11px, 1.6vh, 13px);
      --dst-mobile-hero-actions-bottom-short: clamp(7px, 1vh, 8px);
      --dst-mobile-hero-actions-gap-short: clamp(7px, 1vh, 8px);
      --dst-mobile-hero-badges-top-short: clamp(5px, .8vh, 6px);
    }
  }
}

@media (min-width: 821px) and (max-width: 1199px) {
  :root {
    --dst-compact-header-height: clamp(72px, 7.2vw, 86px);
    --dst-compact-page-gutter: clamp(20px, 3.1vw, 38px);
    --dst-compact-card-pad: clamp(26px, 4vw, 44px);
    --dst-compact-hero-edge-gap: clamp(12px, 1.25svh, 14px);
    --dst-compact-hero-title: clamp(34px, 5.15vw, 52px);
    --dst-compact-portrait-w: clamp(126px, 18vw, 188px);
    --dst-compact-portrait-h: clamp(142px, 21vw, 220px);
    --dst-nonrail-vh: 100svh;
    --dst-nonrail-header-height: var(--dst-compact-header-height);
    --dst-nonrail-hero-edge-gap: var(--dst-compact-hero-edge-gap);
    --dst-nonrail-shell-width: min(calc(100vw - (var(--dst-compact-page-gutter) * 2)), 1060px);
    --dst-nonrail-ai-card-inset: clamp(14px, 1.8vw, 18px);
    --dst-nonrail-assistant-right: calc(((100vw - var(--dst-nonrail-shell-width)) / 2) + var(--dst-nonrail-hero-edge-gap) + var(--dst-nonrail-ai-card-inset));
    --dst-nonrail-assistant-bottom: calc(var(--dst-nonrail-hero-edge-gap) + var(--dst-nonrail-ai-card-inset) + env(safe-area-inset-bottom, 0));
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  :root {
    --dst-nonrail-vh: 100svh;
    --dst-nonrail-header-height: 61px;
    --dst-nonrail-hero-edge-gap: clamp(12px, 1.25svh, 14px);
    --dst-nonrail-shell-width: min(var(--container), calc(100vw - 48px));
    --dst-nonrail-ai-card-inset: clamp(16px, 1.35vw, 20px);
    --dst-nonrail-assistant-right: calc(((100vw - var(--dst-nonrail-shell-width)) / 2) + var(--dst-nonrail-hero-edge-gap) + var(--dst-nonrail-ai-card-inset));
    --dst-nonrail-assistant-bottom: calc(var(--dst-nonrail-hero-edge-gap) + var(--dst-nonrail-ai-card-inset) + env(safe-area-inset-bottom, 0));
  }
}

@supports (height: 100dvh) {
  @media (min-width: 821px) and (max-width: 1599px) {
    :root { --dst-nonrail-vh: 100dvh; --dst-nonrail-hero-edge-gap: clamp(12px, 1.25dvh, 14px); }
  }
}

@supports not (height: 100svh) {
  @media (min-width: 821px) and (max-width: 1599px) {
    :root { --dst-nonrail-vh: 100vh; --dst-nonrail-hero-edge-gap: clamp(12px, 1.25vh, 14px); }
  }
}

@media (min-width: 821px) and (max-width: 940px) {
  :root { --dst-nonrail-shell-width: min(calc(100vw - 40px), 900px); }
}

@media (min-width: 821px) and (max-width: 1199px) and (max-height: 700px) {
  :root {
    --dst-compact-header-height: 68px;
    --dst-compact-page-gutter: clamp(18px, 2.6vw, 28px);
    --dst-compact-card-pad: clamp(20px, 2.8vw, 28px);
    --dst-compact-hero-edge-gap: clamp(12px, 1.25svh, 14px);
    --dst-compact-hero-title: clamp(30px, 3.9vw, 42px);
    --dst-compact-portrait-w: clamp(110px, 13vw, 132px);
    --dst-compact-portrait-h: clamp(116px, 16vw, 144px);
  }
}

@supports (height: 100dvh) {
  @media (min-width: 821px) and (max-width: 1199px) and (max-height: 700px) {
    :root { --dst-compact-hero-edge-gap: clamp(12px, 1.25dvh, 14px); }
  }
}