/* ============================================================
   Mobile is a design, not a smaller desktop. Phones will see this
   site far more than desktops do, so these are deliberate decisions
   about what tightens, what resizes, and what is removed outright.
   ============================================================ */

@media (max-width: 54rem) {
  :root {
    /* Reclaim vertical space: desktop section rhythm is too airy on a phone. */
    --s-9: 3.5rem;
    --s-10: 4.5rem;
    --t-6: 2.5rem;
    --gutter: 1rem;          /* the 16px side gutter */
  }

  /* Wordmark tightens rather than wrapping. */
  .brand img { width: 1.9rem; height: 1.9rem; }
  .brand__name { font-size: var(--t-0); letter-spacing: -0.03em; }
  .masthead__inner { min-height: 3.75rem; }
  .masthead__nav { inset-block-start: 3.75rem; }

  /* The header CTA is redundant on a phone — the nav panel and the
     page's own CTAs already carry it. Remove it rather than shrink it. */
  .masthead__links .btn { width: 100%; text-align: center; }

  /* Buttons get a smaller variant and go full width so they are easy to hit. */
  .btn { padding: .75em 1.1em; font-size: var(--t--1); }
  .page-head__actions .btn,
  .hero__actions .btn { flex: 1 1 100%; }

  /* Hero: shorter, and the meta row becomes a stack instead of a cramped line. */
  .hero { min-height: auto; padding-block: var(--s-9) var(--s-8); }
  .hero h1 { font-size: clamp(2.25rem, 10vw, 3rem); max-width: 14ch; }
  .hero__mission { font-size: var(--t-0); }
  .hero__meta { flex-direction: column; gap: var(--s-2); }
  .hero__dove { width: 2.5rem; }

  /* Long prose wants a slightly larger body size on a small screen. */
  .prose { font-size: 1.0625rem; }
  .prose h2 { font-size: var(--t-2); }
  .prose h3 { font-size: var(--t-1); }

  /* Blog cards: image above text, not a cramped side column. */
  .post-row img { aspect-ratio: 16/9; }

  /* Pricing rows stack label over value so neither truncates. */
  .plan__rows li { flex-direction: column; gap: var(--s-1); }
  .plan__rows .v { text-align: left; color: var(--ink); }
  .plan { padding: var(--s-5); }
  .plan__for { min-height: 0; }

  /* Two-column "always included" collapses. */
  .section--sunk .checks[style*="repeat(2"] { grid-template-columns: 1fr !important; }

  /* Wide content must never force the page sideways. */
  .prose table { display: block; overflow-x: auto; }
  .prose pre { overflow-x: auto; }
  .embed--form iframe, .embed--form { min-height: 38rem; height: 38rem; }
  .embed--show, .embed--show iframe { height: 22rem; }

  /* Footer: one column reads better than four squeezed ones. */
  .colophon__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .colophon__base { flex-direction: column; gap: var(--s-2); }

  .team { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .pillars { font-size: var(--t--1); }
  .faq summary { font-size: var(--t-0); }
  .addon__price { font-size: var(--t-0); }
}

@media (max-width: 30rem) {
  .team { grid-template-columns: 1fr 1fr; }
  .works, .offers, .articles { gap: var(--s-5); }
}

/* Touch targets: anything tappable gets real area, regardless of width. */
@media (pointer: coarse) {
  .masthead__links a, .colophon a, .chip { padding-block: .35em; }
  .faq summary { padding-block: var(--s-4); }
}