/* Shared phone layout. Kept separate from the chat's visualViewport app shell. */
@media (max-width: 900px) {
  html:not(.bc-mobile-active) .masthead {
    padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)) !important;
    gap: 12px !important;
    overflow: visible;
  }
  html:not(.bc-mobile-active) .masthead .wordmark { display: inline-flex; align-items: center; min-height: 44px; }
  html:not(.bc-mobile-active) .masthead .studio-menu { position: static; min-width: 0; z-index: 50; }
  html:not(.bc-mobile-active) .masthead .studio-menu summary {
    min-height: 44px; padding: 0 4px; gap: 12px;
    font: 500 16px/1.4 var(--gifs-body, Arial, sans-serif) !important;
  }
  html:not(.bc-mobile-active) .masthead .studio-menu nav {
    /* The positioned masthead is the anchor, not the narrow summary in its middle. */
    position: absolute; left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right));
    width: auto; box-sizing: border-box;
    max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 18px; top: 100%;
  }
  html:not(.bc-mobile-active) .masthead .studio-menu nav a {
    display: flex; align-items: center; min-height: 48px;
    padding: 10px 0; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere;
  }
  html:not(.bc-mobile-active) .masthead .back-link {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: 14px !important; white-space: normal;
  }
  .masthead .studio-menu :is(summary, a):focus-visible { outline: 2px solid #e4c58c; outline-offset: 3px; }

  /* Contact cards stay legible, including the complete phone number at 320px. */
  html.gifs-refined #root #contact {
    padding: 30px max(18px, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)) !important;
  }
  html.gifs-refined #root #contact .contact-window {
    min-height: 0; overflow: visible; padding: 28px 0 12px !important;
  }
  html.gifs-refined #root #contact .contact-window h1 {
    font-size: clamp(32px, 8.4vw, 54px) !important; line-height: 1.17 !important;
    overflow-wrap: anywhere;
  }
  html.gifs-refined #root #contact .contact-lead { font-size: 16px !important; line-height: 1.65 !important; }
  html.gifs-refined #root #contact .contact-actions {
    display: grid !important; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 12px !important;
  }
  html.gifs-refined #root #contact :is(.contact-primary, .contact-secondary) {
    box-sizing: border-box; min-height: 48px; max-width: 100%;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 16px !important; line-height: 1.45 !important; overflow-wrap: anywhere;
  }
  html.gifs-refined #root #contact .contact-primary { width: 100%; padding: 14px 16px !important; gap: 12px; }
  html.gifs-refined #root #contact .direct-contacts { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html.gifs-refined #root #contact .direct-contact { min-width: 0; padding: 18px 14px !important; grid-template-columns: minmax(0, 1fr) 20px; }
  html.gifs-refined #root #contact .direct-contact span { font-size: 13px; line-height: 1.4; letter-spacing: .05em; }
  html.gifs-refined #root #contact .direct-contact b {
    font: 500 clamp(19px, 5.4vw, 26px)/1.45 var(--gifs-body, Arial, sans-serif) !important;
    letter-spacing: -.025em; white-space: normal; overflow-wrap: anywhere;
  }
  html.gifs-refined #root #contact .direct-contact i { font-size: 20px; }

  /* The working brief is scrollable inside the visible area above the keyboard. */
  #brief-dialog.brief-upgraded {
    position: fixed; inset: auto 10px auto; top: var(--gifs-brief-top, 10px);
    width: calc(100% - 20px); max-width: none; margin: 0;
    max-height: calc(var(--gifs-brief-height, 100dvh) - 20px);
    box-sizing: border-box; overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; scroll-padding-block: 60px 24px;
    scrollbar-gutter: auto; -webkit-overflow-scrolling: touch;
  }
  #brief-dialog .brief-dialog-grid { display: block; padding: 4px 20px max(24px, env(safe-area-inset-bottom)) !important; }
  #brief-dialog .contact-aside { display: none; }
  #brief-dialog .brief-content { border-top: 0; padding-top: 0; min-width: 0; }
  #brief-dialog .brief-content > .eyebrow { display: none; }
  #brief-dialog .brief-close { margin: 8px 8px 0 auto; top: 8px; width: 44px; height: 44px; }
  #brief-dialog #contact-title { font-size: clamp(26px, 7vw, 36px); line-height: 1.2; margin-bottom: 20px; overflow-wrap: anywhere; }
  #brief-dialog .step-count { font-size: 13px; letter-spacing: .02em; }
  #brief-dialog :is(legend, .contact-fields label, .channel-options label) { font-size: 16px; line-height: 1.5; }
  #brief-dialog :is(input:not([type=checkbox]), textarea:not(.brief-copy-buffer)) {
    box-sizing: border-box; max-width: 100%; min-width: 0; font-size: 16px; line-height: 1.5; padding: 14px 12px;
  }
  #brief-dialog textarea:not(.brief-copy-buffer) { min-height: 112px; }
  #brief-dialog .channel-options { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #brief-dialog .channel-options label { min-height: 48px; padding: 12px; }
  #brief-dialog .brief-controls { gap: 10px; flex-wrap: wrap; align-items: stretch; }
  #brief-dialog .brief-controls button { min-height: 48px; font-size: 16px; line-height: 1.4; }
  #brief-dialog .brief-controls .text-action { padding: 12px 14px; }
  #brief-dialog :is(.brief-send-actions .text-action, #brief-copy, #brief-download, #brief-edit, .brief-small-action, .brief-clear-confirm button) {
    box-sizing: border-box; min-height: 48px; max-width: 100%; padding: 12px;
    font-size: 15px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere;
  }
  #brief-dialog .brief-send-actions { grid-template-columns: minmax(0, 1fr); }
  #brief-dialog .brief-send-actions .text-action { width: 100%; }
  #brief-dialog :is(.privacy-note, .brief-save-choice, .brief-draft-status, .brief-handoff-note, .error, #download-status) { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
  #brief-dialog .brief-save-choice { min-height: 44px; align-items: flex-start; }
  #brief-dialog .brief-save-choice input { margin-top: 3px; }
  #brief-dialog .brief-review summary { font-size: 16px; min-height: 44px; }
  #brief-dialog .brief-preview { font-size: 15px; max-height: none; padding: 14px; }

  /* Full service pages use the same readable rhythm on phones and small tablets. */
  body.seo-page.su-page { font-size: 16px; }
  .su-page .seo-wrap { width: calc(100% - 36px); margin-inline: auto; }
  .su-page .seo-topline { gap: 14px; padding: 18px 0; }
  .su-page .seo-topline > div { min-width: 0; }
  .su-page .seo-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .su-page .seo-location { display: block; margin: 2px 0 0; font-size: 13px; line-height: 1.5; }
  .su-page .seo-topline .seo-btn { width: auto; max-width: 65%; min-height: 48px; font-size: 14px; padding: 12px; gap: 10px; }
  .su-page .seo-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; padding: 10px 0; }
  .su-page .seo-nav a { display: flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.4; padding-block: 8px; overflow-wrap: anywhere; }
  .su-page .seo-breadcrumbs { font-size: 13px; padding-top: 16px; }
  .su-page .seo-breadcrumbs ol { gap: 4px 10px; }
  .su-page .seo-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .su-page .su-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 30px 0 36px; }
  .su-page h1 { font-size: clamp(32px, 7.8vw, 46px); line-height: 1.2; }
  .su-page h2 { font-size: clamp(26px, 6.5vw, 36px); line-height: 1.25; }
  .su-page h3 { font-size: 20px; line-height: 1.4; }
  .su-page .seo-eyebrow { font-size: 12px; line-height: 1.6; letter-spacing: .09em; margin-bottom: 16px !important; }
  .su-page .seo-lead { font-size: 17px; line-height: 1.65; margin-top: 20px !important; }
  .su-page :is(.su-section-title > div > p, .su-rows p, .su-delivery-lead p, .su-notes span, .seo-steps p, .su-scope-grid p, .seo-faq p, .su-contact p, .su-contact-note p, .su-case-copy p, .su-explore p, .su-chat-demo p, .su-process-demo p) {
    font-size: 16px; line-height: 1.65; overflow-wrap: anywhere;
  }
  .su-page :is(.su-notes strong, .su-contact-note li, .su-scope-grid h3, .seo-steps h3) { font-size: 17px; line-height: 1.5; }
  .su-page :is(.su-hero-note, .su-image figcaption, .su-gallery figcaption, .su-project-label, .su-contact-note > span, .su-explore > div > span) { font-size: 13px; line-height: 1.55; }
  .su-page :is(.su-chat-demo .su-demo-caption, .su-process-demo .su-demo-caption) { font-size: 13px !important; line-height: 1.55; }
  .su-page .su-project-label { flex-wrap: wrap; gap: 5px 12px; padding: 12px; }
  .su-page .seo-btn { box-sizing: border-box; min-height: 48px; font-size: 16px; line-height: 1.45; padding: 13px 16px; white-space: normal; overflow-wrap: anywhere; }
  .su-page .seo-actions { gap: 10px; }
  .su-page .seo-actions .seo-btn, .su-page .seo-hero .seo-actions .seo-btn { width: 100%; font-size: 16px; }
  .su-page .su-page-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; padding: 14px 0; }
  .su-page .su-page-index > span { grid-column: 1 / -1; font-size: 13px; }
  .su-page .su-page-index a { display: flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.4; }
  .su-page .seo-section { padding: 40px 0; }
  .su-page .su-section-title { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 28px; }
  .su-page .su-section-title > .seo-eyebrow { padding-top: 0; }
  .su-page .su-rows li { grid-template-columns: 26px minmax(0, 1fr); gap: 8px 14px; padding: 24px 0; }
  .su-page .su-rows p { grid-column: 2; }
  .su-page .su-row-number { font-size: 13px; }
  .su-page .su-paper-panel { margin-inline: 0; padding: 28px 20px !important; }
  .su-page .su-delivery, .su-page .su-scope-grid, .su-page .su-case-copy { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .su-page .seo-faq { margin-left: 0; }
  .su-page :is(.seo-faq summary, .su-scope summary) { font-size: 16px; line-height: 1.55; min-height: 44px; }
  .su-page .seo-faq details { padding: 14px 0; }
  .su-page .su-contact { grid-template-columns: minmax(0, 1fr); padding: 28px 20px !important; gap: 28px; margin-bottom: 36px; }
  .su-page .su-contact h2 { font-size: clamp(26px, 6.5vw, 36px); }
  .su-page .su-contact-note { border-left: 0; border-top: 1px solid #f3eddf30; padding: 24px 0 0; }
  .su-page .su-contact-note ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .su-page .seo-direct { gap: 4px 18px; font-size: 16px; }
  .su-page :is(.seo-direct a, .su-text-link, .su-explore > a, .seo-footer-nav a, .seo-footer > .seo-wrap > p a) { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
  .su-page .su-explore { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .su-page .su-explore-home { grid-column: auto; white-space: normal; }
  .su-page .su-case-copy { margin-top: 26px; }
  .su-page.su-case #delivery > .su-notes, .su-page.su-case .su-text-link { margin-left: 0; }
  .su-page .seo-footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; width: 100%; }
  .su-page .seo-footer-top { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  .su-page .seo-footer p { font-size: 14px; line-height: 1.65; }
  .su-page :is(a, summary):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  .su-page .su-demo-head { flex-wrap: wrap; font-size: 15px; }
  .su-page :is(.su-demo-head > span:last-child, .su-message small, .su-process-demo small) { font-size: 12px; line-height: 1.5; letter-spacing: .05em; }
  .su-page .su-message { max-width: 94%; padding: 14px; }
  .su-page .su-demo-result strong { font-size: 16px; line-height: 1.5; }
  .su-page .su-art-hero figcaption { font-size: 13px; line-height: 1.5; flex-wrap: wrap; padding: 14px; }

  /* Interactive case: natural document flow, full-width screenshots and tabs. */
  html.gifs-refined #root #case { padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)) !important; }
  html.gifs-refined #root #case .case-layout { grid-template-columns: minmax(0, 1fr); gap: 26px !important; margin-block: 28px !important; }
  html.gifs-refined #root #case .case-notes { min-width: 0; }
  html.gifs-refined #root #case .case-notes h2 { font-size: clamp(28px, 7vw, 38px) !important; line-height: 1.2; }
  html.gifs-refined #root #case .case-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
  html.gifs-refined #root #case .case-tabs button { min-height: 48px; padding: 12px 18px; font-size: 16px; }
  html.gifs-refined #root #case .final-case-flow { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 22px !important; line-height: 1.4; }
  html.gifs-refined #root #case .final-case-flow small { flex-basis: 100%; font-size: 13px; }
  html.gifs-refined #root #case .case-screen { min-width: 0; width: 100%; box-sizing: border-box; margin: 0; }
  html.gifs-refined #root #case .case-screen figcaption { font-size: 15px; line-height: 1.5; padding: 14px 8px; }
  html.gifs-refined #root #case :is(.text-action, .next-chapter) { min-height: 48px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
}

@media (max-width: 520px) {
  .su-page .seo-steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .su-page .su-gallery { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .su-page .su-gallery figure:last-child { grid-column: auto; max-width: none; }
  .su-page .su-chat-demo, .su-page .su-process-demo { padding: 22px 18px; }
  .su-page .su-chat-demo > p, .su-page .su-process-demo > p { max-width: 100%; }
}