@media (max-width: 900px) {
  .workspace { grid-template-columns: 320px minmax(0,1fr) !important; }
  .site-footer-inner { grid-template-columns: 1.3fr repeat(2,1fr); }
  .footer-column:last-child { grid-column: 2; }
}

@media (max-width: 780px) {
  .page {
    width: min(100% - 20px, 1180px);
    padding-top: var(--header-space-top, 18px);
  }

  .leal-topbar,
  .brand-area {
    gap: 8px !important;
    padding: 0 var(--shell-gutter, 14px) !important;
    margin-bottom: var(--header-space-bottom, 24px) !important;
  }

  .brand-svg, .footer-brand img { width: min(var(--brand-logo-width, 155px), 38vw) !important; }

  .brand-area > .saas-account-button {
    min-width: 142px !important;
    width: min(176px, 46vw) !important;
    padding-left: 6px !important;
  }

  .brand-area > .saas-account-button .saas-account-main {
    font-size: .72rem !important;
  }

  .brand-area > .saas-account-button .saas-account-sub {
    font-size: .56rem !important;
  }

  .brand-area > .saas-account-button .saas-chevron {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
  }

  .brand-area > .saas-account-button .saas-chevron::before {
    width: 23px !important;
    height: 23px !important;
  }

  .workspace {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .workflow { border-right: 0 !important; }

  .preview-area {
    min-height: 430px;
    border-radius: 0 0 24px 24px;
  }

  .tool-navigator { --banner-height: 112px; }

  .tool-label-pill {
    min-width: 0;
    min-height: 0;
    padding: var(--tool-label-padding-y, 9px) var(--tool-label-padding-x, 20px);
  }

  .tool-label-text {
    font-size: var(--tool-label-size, 12px) !important;
  }

  .site-footer-inner {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 28px 20px;
  }

  .footer-brand { grid-column: 1 / -1; }
  .footer-column:last-child { grid-column: auto; }

  .admin-grid { grid-template-columns: 1fr; }
  .admin-background { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --shell-gutter: 14px; }

  .measure-pair,
  .settings-actions,
  .settings-warning-actions {
    grid-template-columns: 1fr;
  }

  .admin-label-style-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 520px) {
  .page { width: calc(100% - 12px); }

  .leal-topbar,
  .brand-area {
    grid-template-columns: auto minmax(4px,1fr) auto !important;
    padding: 0 var(--shell-gutter, 10px) !important;
  }

  .brand-svg, .footer-brand img { width: min(var(--brand-logo-width, 155px), 38vw) !important; }

  .brand-area > .saas-account-button {
    min-width: 128px !important;
    width: 45vw !important;
    max-width: 155px !important;
  }

  .brand-area > .saas-account-button .saas-chevron {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }

  .brand-area > .saas-account-button .saas-chevron::before {
    width: 21px !important;
    height: 21px !important;
  }

  .tool-navigator { --banner-height: 102px; }

  .tool-label-button { padding-inline: 3px; }

  .tool-label-pill {
    min-width: 0;
    width: auto;
    min-height: 0;
    padding: var(--tool-label-padding-y, 9px) var(--tool-label-padding-x, 20px);
  }

  .tool-label-text {
    font-size: var(--tool-label-size, 12px) !important;
    letter-spacing: .12em;
  }

  .preview-toolbar { gap: 10px; }

  .tabs {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
  }

  .tabs button {
    min-width: 0;
    padding-inline: 6px !important;
    font-size: .62rem !important;
  }

  .site-footer-inner {
    grid-template-columns: 1fr;
    padding-top: 32px;
  }

  .footer-brand,
  .footer-column,
  .footer-column:last-child {
    grid-column: auto;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 5px;
  }

  .admin-section,
  .admin-background-fields,
  .admin-label-style-grid {
    grid-template-columns: 1fr;
  }

  .admin-section-title,
  .admin-tool label.full {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}