/* Phones: the same design as desktop, re-scaled the way sunmaid.com and forestfeast.com do it.
   Centred headings and calls to action, tighter vertical rhythm, 16px body text, full-width photos.
   Loaded last so it can tune every section without touching the desktop rules. */

@media (max-width: 700px) {
  :root {
    --gutter: 20px;
    --section: 56px;
    --size-display: 2.7rem;
    --size-h1: 2.1rem;
    --size-h2: 1.75rem;
    --size-h3: 1.15rem;
    --size-lead: 1.02rem;
    --radius: 22px;
    --radius-lg: 30px;
  }
  body { font-size: 1rem; line-height: 1.8; }
  .eyebrow { font-size: .88rem; margin-bottom: 10px; }
  .button { min-height: 50px; padding-inline: 24px; }

  /* Section heads: centred, closer to their content */
  .section-head { margin: 0 auto 26px; text-align: center; }
  .split-head { flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .split-head > div { max-width: none; }
  .actions { justify-content: center; margin-top: 24px; gap: 12px; }

  /* Home hero: copy first, then the arch photo, all centred */
  .home-hero { padding-block: 22px 48px; }
  .home-hero-inner { gap: 30px; }
  .home-hero-copy { text-align: center; }
  .home-hero .display { line-height: 1.2; }
  .h1-sub { margin: 16px auto 0; max-width: 32ch; }
  .home-hero .actions .button { flex: 1 1 100%; max-width: 320px; }
  .home-hero-media { width: min(84%, 340px); margin-inline: auto; }
  .seal { width: 96px; height: 96px; inset-inline-start: -12px; bottom: 6%; }
  .seal strong { font-size: 1.9rem; }
  .seal span { font-size: .74rem; }

  /* Strengths: 2 x 2, centred numbers */
  .strengths-list li, .strengths-list li:first-child, .strengths-list li:nth-child(3) {
    padding: 22px 10px; text-align: center; border-inline-start: 0;
  }
  .strengths-list li:nth-child(odd) { border-inline-end: 1px solid rgba(255, 246, 229, .16); }
  .strengths-list li:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 246, 229, .16); }
  .strengths-list strong { font-size: 2.1rem; }
  .strengths-list span { font-size: .9rem; line-height: 1.6; }

  /* Category index: a 3 x 3 grid of round photos, like a shop shelf */
  .index-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 10px; border-top: 0; }
  .index-list li { border: 0; }
  .index-list a, .index-list a:hover, .index-list a:focus-visible {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 10px; padding: 0; text-align: center; background: none;
  }
  .index-media img { width: 88px; height: 88px; }
  .index-tag, .index-list .icon, .index-num { display: none; }
  .index-name { font-size: 1rem; line-height: 1.4; }

  /* Story bands: photo on top, centred copy */
  .story-layout { gap: 26px; }
  .story-copy { text-align: center; }
  .story-copy h2 { margin-bottom: 14px; }
  .story-copy p { font-size: 1.02rem; line-height: 1.85; margin-inline: auto; }
  .story-copy .text-link { margin-inline: auto; }

  /* Product shelves */
  .product-grid { gap: 22px 12px; }
  .product-media { margin-bottom: 10px; }
  .product-name { font-size: 1rem; line-height: 1.5; }
  .product-more { font-size: .85rem; }

  /* Guides carousel */
  .uses-list { grid-auto-columns: 70%; }

  /* Steps and audience bands */
  .steps-list { gap: 22px; text-align: center; }
  .audience { padding: 52px var(--gutter); text-align: center; }
  .audience h2 { font-size: 1.65rem; margin-bottom: 12px; }
  .audience p:not(.eyebrow) { font-size: 1rem; margin-bottom: 22px; }

  /* Inner page heroes: centred like the home hero */
  .page-hero { padding-block: 26px 46px; text-align: center; }
  .page-hero h1 { margin-inline: auto; }
  .page-hero .lead { margin: 14px auto 0; }
  .page-hero-inner { gap: 26px; }
  .page-hero-media { width: min(70%, 260px); margin-inline: auto; }
  .breadcrumb { margin-bottom: 16px; font-size: .85rem; }
  .breadcrumb ol { justify-content: center; }

  /* Long reading (guides, policies) stays aligned to the start for comfort */
  .prose { font-size: 1.02rem; line-height: 1.95; text-align: start; }
  .prose h2 { font-size: 1.4rem; }

  /* Footer */
  .footer-cols { gap: 26px; padding-block: 40px; }
}

@media (max-width: 380px) {
  :root { --size-display: 2.4rem; --size-h1: 1.9rem; --size-h2: 1.6rem; }
  .seal { width: 84px; height: 84px; }
  .seal strong { font-size: 1.6rem; }
}