/* Scale by CSS viewport width, not physical pixels or devicePixelRatio.
   1920 CSS px stays at the normal scale; high-DPI laptops keep their layout. */
@media (min-width: 1920px) {
  html { font-size: clamp(1rem, .833333vw, 1.75rem); }
  .home-header, .pricing-header { min-height: 4.375rem; padding-inline: max(2rem, calc((100% - 100rem) / 2)); }
  .language-globe { flex-basis: 2.75rem; width: 2.75rem; height: 2.75rem; }
  .language-globe .language-globe-icon { width: 1.4375rem; height: 1.4375rem; }
  .language-globe select { min-height: 2.75rem; }

  /* Keep the homepage's two columns and preview at the same visual scale. */
  .hero {
    width: min(100%, 100rem);
    min-height: min(100svh, 65rem);
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 4rem;
    padding: 7rem 3rem 4rem;
  }
  .hero-copy { max-width: 37.5rem; }
  .hero-lead { max-width: 34.375rem; }
  .primary-cta, .secondary-cta { min-height: 3.25rem; }
  .reply-window { padding: .75rem; border-radius: 2rem; }
  .transformation { grid-template-columns: 6.75rem 2.5rem minmax(0, 1fr); padding: 1.1rem; }
  .source-photo img { width: 6.75rem; height: 8.625rem; }
  .chat-proof { margin-top: .5rem; padding: .8rem 1rem; }
  .chat-proof > header { min-height: 2.125rem; padding-bottom: .625rem; }
  .chat-proof > header > span { width: 1.75rem; height: 1.75rem; }
  .chat-messages { min-height: 9.625rem; padding: .8rem .125rem .5rem; }
  .sent-sticker { width: 7rem; }
  .sent-sticker img { width: 6.5rem; height: 6.5rem; }
  .composer { grid-template-columns: 1.75rem 1fr 1.75rem; }
  .composer > span, .composer > i { width: 1.625rem; height: 1.625rem; }
  .use-cases, .process, .pricing-stop, .final-cta, body:has(.home-header) > footer {
    width: min(calc(100% - 6rem), 94rem);
  }
  .use-cases { min-height: min(90svh, 58rem); padding-block: 6rem; }
  .moment-window article { min-height: 27rem; padding: 1.5rem; }
  .moment-window figure img { width: 5.625rem; height: 7rem; }
  .moment-reaction { max-height: 12rem; }
  .process { padding-block: 6rem; }
  .process-line > li { min-height: 16.25rem; padding: 1.5rem; grid-template-columns: 2.125rem 1fr; gap: .6875rem; }
  .process-line > li > span { width: 1.9375rem; height: 1.9375rem; }
  .process-line > li > figure img { width: 6.75rem; height: 6.75rem; }
  .pricing-stop { padding: 3rem; gap: 3rem; }
  .final-cta { min-height: min(86svh, 56rem); padding-block: 6rem; }

  /* The maker is a bounded work surface, not a screen-wide empty chat box. */
  body:has(.experience) { --header-h: 4.25rem; }
  body:has(.experience) .site-header {
    grid-template-columns: 26rem 1fr auto;
    padding-inline: max(2rem, calc((100% - 104rem) / 2));
  }
  .experience {
    width: min(100%, 108rem);
    height: min(calc(100dvh - var(--header-h)), 62rem);
    margin-inline: auto;
    grid-template-columns: minmax(18rem, 27%) minmax(0, 1fr);
  }
  .story-panel { padding: 3rem 2.5rem 2rem; }
  .story-panel h1 { max-width: 9ch; }
  body:has(.experience) .subject-switch { width: min(100%, 11.25rem); }
  .choose-photo { width: min(100%, 19.375rem); min-height: 4rem; margin-top: .875rem; }
  .access-entry { max-width: 26.875rem; }
  .chat-stage { margin: 1.25rem 1.5rem 1.25rem 0; grid-template-rows: 3.875rem auto minmax(0, 1fr) auto auto auto; }
  .chat-scroll { padding: 1.5rem 2.5rem 2rem; }
  .chat-lane { width: min(100%, 51.25rem); }
  .sample-chat-bubble { max-width: min(100%, 28.125rem); }
  .sample-chat-photo { width: 11.125rem; }
  body:not([data-state="sample"]) .experience { grid-template-columns: 11.75rem minmax(0, 1fr); }
  body:not([data-state="sample"]) .story-panel { padding: 2rem 1rem 1.25rem; }
  body:not([data-state="sample"]) .chat-lane { width: min(100%, 61.25rem); }

  .sample-message-avatar { width: 1.5625rem; height: 1.5625rem; }
  .subject-switch button { min-height: 2.125rem; }
  .legal-shell { width: min(calc(100% - 4rem), 70rem); }
  .legal-shell .site-header {
    min-height: 4.25rem;
    margin-inline: calc((100vw - min(calc(100vw - 4rem), 70rem)) / -2);
    padding-inline: max(2rem, calc((100vw - 70rem) / 2));
  }
  .legal-shell .legal-card, .legal-shell .site-footer { width: min(100%, 51.25rem); }

  body:has(.pricing-header) main { width: min(100%, 94rem); padding-inline: 4rem; }
  .pricing-hero { padding-block: 6rem; }
}