/* full-height hero and pinned sections: use the small viewport so iOS toolbars never hide their bottom edge */
@supports (height: 100svh) {
  @media (max-width: 1199px) {
    /* the announcement bar (announce.js sets --announce-h) sits above the hero, so the hero gives up that height */
    .ohero, .ohero-pin { height: calc(100svh - var(--announce-h, 0px)); }
    .s-coachapp .board-pin { height: 100svh; }
  }
}

@media (max-width: 809px) {
  /* ---------- type: headings break into even lines instead of leaving one word behind ---------- */
  main h1, main h2, main h3 { text-wrap: balance; }
  main p { text-wrap: pretty; }

  /* ---------- hero: "one size" above the mark, "fits nobody" below it ---------- */
  .fw { font-size: 40px; line-height: 44px; letter-spacing: -1.6px; bottom: auto; translate: none; }
  .fw.l, .fw.r { left: 0; right: 0; text-align: center; }
  .fw.l { top: calc(50% - var(--fh, 124px) - 64px); }
  .fw.r { top: calc(50% + var(--fh, 124px) + 20px); }
  .hcopy { bottom: 132px; }
  .hcopy h1 { font-size: 44px; margin-bottom: 16px; }
  .hcopy p { font-size: 16px; margin-bottom: 20px; }
  .hcopy-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
  .hlaurels { bottom: 28px; gap: 16px; }
  .lb-claim b { white-space: nowrap; }

  /* ---------- reel: say it, snap it, ask it ---------- */
  .rl { padding-top: 72px; }
  /* the next card peeks in at the edge; it shows its photo at once instead of a blank slot until it is swiped in */
  .rl-card + .rl-card:not(.in) { opacity: 1; transform: none; }
  .rl-cta { padding: 0 16px; justify-content: flex-start; }

  /* ---------- small buttons: a full 44px tap target on touch ---------- */
  .oj-cta--sm { height: 44px !important; }

  /* ---------- "Everything you need" intro: heading and button stack ---------- */
  .s-ojafi .oj-intro, .s-ojafi .oj-bento { width: auto; margin-left: 16px; margin-right: 16px; }
  .s-ojafi .oj-intro { padding-top: 72px; flex-direction: column; align-items: flex-start; gap: 20px; }
  .s-ojafi .oj-intro h2 { font-size: 34px; }
  .s-ojafi .oj-start { display: inline-flex !important; }
  .s-ojafi .oj-hero { padding-top: 160px; }
  /* the floating "App coming soon" bar: a full 44px tap target for its button */
  .s-ojafi .oj-banner-cta { height: 36px; padding: 0 14px; margin-top: 0; align-self: center; font-size: 14px; }
  .s-ojafi .oj-banner-cta::after { content: ""; position: absolute; inset: -6px -8px; }
  .s-ojafi .oj-banner-cta { position: relative; }

  /* ---------- FAQ heading: the phone lines sit centred under "Common questions" ---------- */
  .s-ojzoom .oz-faq h2 { text-align: center; }
  .s-ojzoom .oz-faq-top, .s-ojzoom .oz-faq-phone { display: block; text-align: center; }
  .s-ojzoom .oz-faq h2 { font-size: 30px; }
  .s-ojzoom .oz-faq { padding-top: 64px; }
  .s-ojzoom .oz-faq-alt { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }

  /* ---------- code hero and closing call to action ---------- */
  .s-ojcode .oc-hero, .s-ojcode .oc-cta { padding-left: 20px; padding-right: 20px; }
  .s-ojcode .oc-hero { padding-top: 64px; padding-bottom: 48px; }
  .s-ojcode .oc-cta { padding-top: 56px; padding-bottom: 64px; }

  /* ---------- about: the four ideas become a swipeable row of full cards ---------- */
  .s-coach .about { padding: 72px 0 0; height: auto; }
  .s-coach .about > .tiny, .s-coach .about > .h52, .s-coach .about > .lead { padding: 0 20px; }
  .s-coach .acc { flex-direction: row; height: auto; margin-top: 32px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 0 16px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .s-coach .acc::-webkit-scrollbar { display: none; }
  .s-coach .acc .acc-i, .s-coach .acc .acc-i.on { flex: 0 0 min(80%, 320px); flex-direction: column; height: 420px; scroll-snap-align: start; cursor: default; transition: none; }
  .s-coach .acc-img, .s-coach .acc-i.on .acc-img { width: 100%; height: 230px; flex: 0 0 230px; border-radius: 12px; transition: none; }
  .s-coach .acc-img img { width: 100%; left: 0; translate: none; filter: none; }
  .s-coach .acc-txt { opacity: 1; padding: 20px; transition: none; }
  .s-coach .acc-txt h3 { font-size: 20px; line-height: 24px; margin-bottom: 10px; }
  .s-coach .acc-txt p { margin-bottom: 0; }
  .s-coach .about-cta { padding: 0 20px; margin-top: 32px; }
  .s-coach .about-link { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------- blog and reviews: tighter section rhythm ---------- */
  .s-coach .blog { padding: 72px 16px 64px; }
  .s-coach .blog-row { margin-top: 32px; gap: 16px; }
  .s-coach .tests { padding: 48px 0 64px; }
  .s-coach .tests .sec-head { padding: 0 20px; }
  .s-coach .tiny { font-size: 13px; line-height: 16px; }

  /* ---------- why Ojafi bento: shorter tiles, and the white captions get a shade so they read over the photos ---------- */
  .s-wellness .essence { margin-top: 64px; padding: 0 16px; }
  .s-wellness .es-head { margin-bottom: 24px; }
  .s-wellness .tile { height: 280px; }
  .s-wellness .t-tall { height: 440px; }
  .s-wellness .t-notes, .s-wellness .t-stat { height: 220px; }
  .s-wellness .t-phone b, .s-wellness .t-tall b { text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 18px rgba(0,0,0,.35); }
  .s-wellness .t-tall::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.32)); pointer-events: none; }
  .s-wellness .es-cta { margin-top: 24px; }

  /* ---------- reviews (wellness): the photo runs full width above the quote ---------- */
  .s-wellness .testi { margin-top: 0; padding: 64px 16px; }
  .s-wellness .testi .h80 { margin-bottom: 24px; }
  .s-wellness .t-grid { grid-template-areas: "p p" "q q" "a b"; grid-template-rows: 240px auto 56px; }
  .s-wellness .t-photo { width: auto; }
  .s-wellness .t-quote { min-height: 0; }
  .s-wellness .t-quote b { margin-top: 20px; }
  .s-wellness .t-cta { margin-top: 24px; }

  /* ---------- reels and the app list ---------- */
  .s-delivery .reels { height: auto; padding-top: 72px; padding-bottom: 64px; }
  .s-burger .app { padding: 64px 16px; gap: 40px; }
  .s-burger .app .sub.left { padding: 0; }
  .s-burger .app-cta { margin: 28px 0 20px; }
  .s-burger .app-meta { gap: 6px 20px; font-size: 15px; }
  .s-burger .process { padding: 40px 0 56px; }
  .s-burger .process .p-cta { margin-top: 32px; }

  /* ---------- pricing: plans size to their content ---------- */
  .s-coachapp .plan { height: auto; padding: 32px 20px 24px; }
  .s-coachapp .plan p { min-height: 0; margin: 12px 0 24px; }
  .s-coachapp .pbtn { margin-bottom: 24px; }
  .s-coachapp .plan li:last-child { margin-bottom: 0; }
  .s-coachapp .plans { gap: 24px; }
  .s-coachapp .p-head { margin-bottom: 32px; }
  .s-coachapp .toggle button { height: 44px; min-width: 88px; }
  .s-coachapp .toggle span { height: auto; padding: 10px 14px; margin: 4px -4px -4px; font-size: 14px; }
  .s-coachapp .p-refund a { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .s-coachapp .journal { padding-top: 72px; padding-bottom: 72px; }

  /* ---------- most-saved recipes: bigger photos around the list ---------- */
  .s-coachapp .board { height: 1500px; }
  .s-coachapp .b-imgs img { width: 180px; height: 180px; border-radius: 14px; }

}

/* narrow phones: the two award badges keep each line whole ("Food guidance" no longer breaks at 390) */
@media (max-width: 419px) {
  .hlaurels { gap: 6px; left: 12px; right: 12px; }
  .lb { gap: 2px; }
  .lb-sprig { width: 30px; height: 44px; }
  .lb-claim span { white-space: nowrap; }
  /* the two hero buttons stay side by side instead of stacking at uneven widths */
  .hcopy-ctas { flex-wrap: nowrap; }
  .hcopy-ctas > * { flex: none; padding: 0 18px !important; white-space: nowrap; }
}
/* the narrowest phones */
@media (max-width: 379px) {
  .lb-claim b { font-size: 16px; }
  .hcopy h1 { font-size: 40px; }
  .hcopy-ctas { gap: 8px; }
  .hcopy-ctas > * { padding: 0 16px !important; }
}