/* Phone-first corrections shared by the public pages. */
@media (max-width: 700px) {
  html, body { overflow-x: clip; }
  img { max-width: 100%; }
  .hero { padding: 64px 0 82px; }
  .hero h1 { font-size: clamp(43px, 13.8vw, 54px); overflow-wrap: anywhere; }
  .intro, .section-copy { font-size: 16px; }
  .button, .fb-button, .sf-button { max-width: 100%; gap: 14px; }
  .button span, .fb-button span, .sf-button span { font-size: 15px; }
  .apps { padding: 78px 0; }
  .apps-grid { gap: 18px; margin-top: 36px; }
  .apps-grid .app-card { padding: 26px; gap: 22px; }
  .apps-grid .app-card img { justify-self: start; width: 135px !important; }
  .footer { align-items: center; }
  .footer > a > img { width: 104px !important; height: 58px !important; }
  .fb-header { min-height: 76px; height: auto; gap: 8px; }
  .fb-header .back { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fb-header .small-button { max-width: 170px; padding: 8px 12px; text-align: center; }
  .setflow-header { min-height: 76px; height: auto; gap: 8px; }
  .setflow-header .small-button { max-width: 170px; padding: 8px 12px; text-align: center; }
  .fb-hero h1, .fb-intro h2, .feature-band h2, .fb-feature h2, .cooking-section h2, .benefits h2, .fb-cta h2, .sf-hero h1, .sf-intro h2, .sf-feature h2, .sf-cta h2 { font-size: clamp(42px, 13.2vw, 52px); overflow-wrap: anywhere; }
  .fb-lead, .fb-intro p:last-child, .feature-band p:not(.fb-eyebrow), .fb-feature p:not(.fb-eyebrow), .cooking-section p:not(.fb-eyebrow), .sf-lead, .sf-intro p:last-child, .feature-band p:not(.sf-eyebrow), .sf-feature p:not(.sf-eyebrow) { font-size: 16px; }
  .fb-footer, .sf-footer { gap: 14px; }
  .fb-footer div { flex-wrap: wrap; row-gap: 10px; }
  .kitchen-header { gap: 10px; }
  .kitchen-home img { width: 102px; }
  .cookbook-link { min-width: 0; padding: 8px 10px; font-size: 11px; text-align: center; }
  .kitchen-hero h1, .section-heading h2, .detail-main h1 { font-size: clamp(42px, 13.8vw, 58px); overflow-wrap: anywhere; }
  .kitchen-hero > p:not(.eyebrow), .detail-lead { font-size: 16px; }
  .collection-card { min-height: 310px; padding: 25px; }
  .recipe-list a { min-width: 0; padding: 18px; gap: 12px; }
  .recipe-list a span { min-width: 0; overflow-wrap: anywhere; }
  .contact-header { height: 76px; }
  .contact-home img { width: 122px; height: 62px; }
  .contact-hero h1, .social-section h2 { font-size: clamp(42px, 13.4vw, 54px); overflow-wrap: anywhere; }
  .contact-email { max-width: 100%; gap: 12px; padding: 14px 16px; font-size: 16px; overflow-wrap: anywhere; }
}
@media (max-width: 370px) {
  .shell, .wrap { width: calc(100% - 32px); }
  .setflow-header .small-button { max-width: 145px; font-size: 12px; }
  .fb-header .small-button { max-width: 145px; font-size: 12px; }
  .contact-email { font-size: 14px; }
}

/* Keep the public home header compact: the brand, menu and language control
   should be understood as one row, not three unrelated elements. */
@media (max-width: 700px) {
  .site-header { height: 76px; min-height: 76px; flex-direction: row; align-items: center; justify-content: space-between; gap: 0; padding: 8px 0; }
  .site-header > a { align-self: auto; }
  .site-header > a > img { width: 112px !important; height: 54px !important; }
  .site-header nav { width: auto; margin-right: 84px; display: flex; grid-template-columns: none; gap: 0; }
  .site-header .language-select { top: 20px; right: 0; width: 78px; min-width: 78px; min-height: 36px; height: 36px; padding: 5px 7px; font-size: 13px; }
}