@layer pages {
  .auth-page,
  .marketing-page { min-height: var(--viewport-block); }

  .auth-page :where(.auth-copy, .auth-card, .auth-proof > *, form > *, h1, p),
  .marketing-page :where(nav, section, article, h1, h2, h3, p, a, b, small) { min-width: 0; }

  .auth-page :where(h1, p, small),
  .marketing-page :where(h1, h2, h3, p, a, b, small, li) { overflow-wrap: anywhere; }

  .marketing-nav {
    min-height: 72px;
    height: auto;
    padding-left: max(24px, var(--safe-left));
    padding-right: max(24px, var(--safe-right));
  }

  .marketing-hero,
  .marketing-section,
  .marketing-cta {
    padding-left: max(24px, var(--safe-left));
    padding-right: max(24px, var(--safe-right));
  }

  .marketing-hero { overflow: clip; }
  .marketing-hero h1 { max-width: 100%; }
  .hero-stage { max-width: 100%; overflow: hidden; }
  .app-shell .mobile-drawer-close { display: none; }

  @media (max-width: 900px) {
    .app-shell .mobile-drawer-close {
      width: var(--touch-target);
      min-width: var(--touch-target);
      height: var(--touch-target);
      display: grid;
      flex: 0 0 var(--touch-target);
    }
    .app-shell :where(.text-button, .filter-chip, .tab) { min-height: var(--touch-target); }
    .auth-page { min-height: var(--viewport-block); }
    .auth-visual {
      min-height: auto;
      padding: max(28px, var(--safe-top)) max(22px, var(--safe-right)) 28px max(22px, var(--safe-left));
    }
    .auth-panel {
      min-height: 0;
      padding: 20px max(14px, var(--safe-right)) max(40px, var(--safe-bottom)) max(14px, var(--safe-left));
    }
    .auth-card { max-width: 100%; }

    .marketing-nav {
      gap: 12px;
      padding: max(10px, var(--safe-top)) max(16px, var(--safe-right)) 10px max(16px, var(--safe-left));
    }
    .marketing-nav > div { min-width: 0; gap: 6px; }
    .marketing-nav .button { padding-inline: 12px; white-space: nowrap; }
    .marketing-hero {
      padding: clamp(52px, 12vw, 76px) max(16px, var(--safe-right)) 54px max(16px, var(--safe-left));
    }
    .marketing-hero h1 {
      font-size: clamp(38px, 11.5vw, 70px);
      letter-spacing: -.045em;
    }
    .hero-lead { font-size: clamp(16px, 4.6vw, 20px); }
    .marketing-hero .hero-actions {
      width: 100%;
      margin: 28px 0;
      flex-wrap: wrap;
    }
    .marketing-hero .hero-actions .button { flex: 1 1 190px; }
    .marketing-proof { margin-bottom: 52px; padding-inline: max(20px, var(--safe-left)); }
    .marketing-section { padding: 64px max(18px, var(--safe-right)) 64px max(18px, var(--safe-left)); }
    .marketing-section h2 { font-size: clamp(34px, 10vw, 56px); line-height: 1.06; }
    .price-card { min-height: 0; }
    .marketing-cta { padding: 76px max(18px, var(--safe-right)) max(76px, var(--safe-bottom)) max(18px, var(--safe-left)); }
  }

  @media (max-width: 480px) {
    .marketing-brand { gap: 8px; }
    .marketing-brand small { display: none; }
    .marketing-nav .button { padding-inline: 10px; font-size: 12px; }
    .marketing-hero h1 br { display: none; }
    .marketing-hero .hero-actions { display: grid; grid-template-columns: 1fr; }
    .marketing-hero .hero-actions .button { width: 100%; }
    .hero-stage {
      height: auto;
      min-height: 0;
      margin-top: 42px;
      padding: 14px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      border-radius: 24px;
    }
    .stage-core {
      position: relative;
      left: auto;
      top: auto;
      grid-column: 1 / -1;
      width: 100%;
      height: auto;
      min-height: 164px;
      transform: none;
      border-radius: 20px;
    }
    .stage-core strong { font-size: clamp(23px, 7.5vw, 30px); }
    .agent-chip {
      position: static;
      min-width: 0;
      padding: 11px 8px;
      display: grid;
      justify-items: center;
      gap: 2px;
      box-shadow: none;
    }
    .agent-chip :where(b, small) { max-width: 100%; text-align: center; }
    .marketing-proof { margin-bottom: 28px; }
    .auth-copy { margin: 32px 0; }
    .auth-copy h1 { font-size: clamp(31px, 10.5vw, 44px); }
    .auth-copy p { font-size: 14px; }
    .auth-proof { grid-template-columns: 1fr; }
    .auth-proof .card { min-height: 0; }
    .auth-card { padding: 22px 18px; border-radius: var(--radius-overlay); }
  }

  @media (max-height: 720px) and (min-width: 901px) {
    .auth-page { min-height: var(--viewport-block); }
    .auth-visual,
    .auth-panel { overflow-y: auto; }
    .auth-copy { margin: 28px 0; }
    .auth-copy h1 { font-size: clamp(34px, 5.2vw, 62px); }
    .auth-proof .card { min-height: 88px; }
  }
}