/* Phone refinements are isolated so the desktop reference layout stays intact. */
.meal-swipe-hint { display: none; }

@media (max-width: 700px) {
  /* Her portrait was a full-width arch taller than the phone screen. On a
     phone the tag is centred, then the picture stands beside her name, and
     the sentence that follows it runs full width underneath at a larger size
     — a small introduction next to the photograph, then the statement.
     `display: contents` on the copy and on the heading lets their children
     become grid items of the section, so the three can interleave without
     moving anything in the markup. Every row is pinned, because the picture
     comes first in the markup and would otherwise be placed above the name. */
  .ambica { display: grid; grid-template-columns: 48% minmax(0, 1fr);
    column-gap: 14px; row-gap: 0; align-items: start; }
  .ambica-copy { display: contents; }
  .ambica .ambica-copy > h2 { display: contents; }

  .ambica-copy > .eyebrow { grid-column: 1 / -1; grid-row: 1;
    justify-self: center; margin-bottom: 22px; }

  .ambica-photo { grid-column: 1; grid-row: 2;
    width: 100%; max-width: none; margin: 0; padding-bottom: 0; }
  .ambica-photo-inner { aspect-ratio: .74; border-radius: 280px 280px 0 0; }

  .ambica .ambica-line:first-child { grid-column: 2; grid-row: 2;
    align-self: center; font-size: clamp(15px, 5.1vw, 22px); line-height: 1.2; }
  .ambica .ambica-line:last-child { grid-column: 1 / -1; grid-row: 3;
    margin-top: 6px; font-size: clamp(30px, 8.8vw, 39px); line-height: 1.1; }
  /* At full width it breaks where it likes. */
  .ambica .ambica-line:last-child br { display: none; }
  br.on-phone { display: inline; }

  .ambica-copy > p { grid-column: 1 / -1; grid-row: 4; margin: 20px 0 0; }
  .ambica-copy > blockquote { grid-column: 1 / -1; grid-row: 5; }
  .ambica-copy > .ambica-signoff { grid-column: 1 / -1; grid-row: 6; }
  .ambica-copy > .button { grid-column: 1 / -1; grid-row: 7; justify-self: start; }
  .photo-credit { position: static; display: block; margin-top: 7px;
    font-size: 6.5px; letter-spacing: .6px; }
  :root { --gutter: clamp(18px, 5.13vw, 28px); }
  html { scroll-padding-top: 20px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-width: 0; }
  .section { padding: var(--band) var(--gutter); }
  .section h2,.section-heading h2,.centered-heading h2,.food-banner-copy h2,.faq-intro h2,.ambica-copy h2 {
    font-size: clamp(36px, 10.8vw, 46px); line-height: 1.08;
  }
  .eyebrow { max-width: 100%; font-size: 12px; line-height: 1.4; text-align: center; padding: 8px 12px; }
  .button { min-height: 48px; white-space: normal; line-height: 1.3; }
  .text-link { min-height: 44px; }
  .header-inner { height: 78px; padding-inline: var(--gutter); gap: 10px; }
  .header-actions { gap: 8px; }
  .header-actions .button { min-height: 44px; font-size: 13px; padding: 10px 12px; gap: 12px; }
  .menu-toggle { flex: 0 0 44px; width: 44px; height: 44px; }
  .menu-toggle span { left: 10px; }
  .mobile-menu { padding: 8px var(--gutter) 20px; }
  .mobile-menu a { min-height: 52px; align-items: center; padding-block: 14px; font-size: 16px; }

  .hero { --hero-inset: var(--gutter); }
  .hero-copy { padding: 34px var(--gutter) 32px; }
  .hero-kicker { font-size: 15px; line-height: 1.3; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(42px, 14vw, 76px); line-height: 1.08; }
  .hero-description { font-size: 16px; line-height: 1.5; margin-top: 16px; }
  .hero-ctas { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); align-items: center; gap: 12px; width: 100%; max-width: 440px; margin-top: 24px; }
  .hero-ctas .button { font-size: 13px; padding: 14px 10px; gap: 10px; min-height: 52px; }
  .hero-ctas .text-link { justify-self: center; font-size: 13px; gap: 7px; white-space: nowrap; }
  .hero-features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 28px; }
  .hero-features > span { max-width: none; font-size: 11px; line-height: 1.4; gap: 8px; }
  .hero-features .feature-icon { width: 30px; height: 30px; }
  .hero-visual { display: none; }
  .hero-copy { padding-bottom: 44px; }
  .proof-band { padding: 28px var(--gutter); gap: 6px; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .proof-stat { padding-inline: 5px; min-width: 0; }
  .proof-stat strong { font-size: 38px; min-width: 0; }
  .proof-stat > span { font-size: 11px; line-height: 1.4; }

  .approach.section { padding: var(--band) 0; }
  .approach .approach-inner { max-width: calc(100% - 2 * var(--gutter)); }
  .approach h2 { font-size: clamp(25px, 7vw, 34px); line-height: 1.2; }
  .approach .approach-values { gap: 8px; margin-block: 28px; }
  .approach .approach-values > div { font-size: 12px; }
  .approach .approach-description { font-size: 15px; line-height: 1.65; }
  .nutrition-checklist { padding: 22px 16px; column-gap: 14px; font-size: 13px; line-height: 1.5; }

  .section-heading { margin-bottom: 28px; }
  .section-heading > p,.section-heading-aside > p { font-size: 15px; line-height: 1.5; }
  .transformation-track { grid-auto-columns: 90%; gap: 16px; scroll-padding-inline-start: 1px; overscroll-behavior-x: contain; }
  .transformation-card { padding: 8px 8px 0; }
  .comparison { aspect-ratio: .81; }
  .comparison-label { font-size: 10px; padding: 7px 8px; }
  .comparison-handle { width: 48px; height: 48px; }
  .transformation-info { padding: 16px 3px; gap: 10px; }
  .transformation-info > div { min-width: 0; }
  .transformation-info h3 { font-size: 23px; }
  .transformation-info p { font-size: 12px; line-height: 1.5; }
  .gallery-footer { flex-direction: column-reverse; align-items: stretch; gap: 16px; margin-top: 18px; }
  .gallery-controls { justify-content: flex-end; gap: 10px; }
  .gallery-count { display: inline; margin-right: auto; font-size: 12px; }
  .gallery-controls .circle-button { width: 44px; height: 44px; }
  .gallery-footer > p { max-width: none; font-size: 12px; line-height: 1.5; }
  .gallery-footer > p > span { font-size: 11px; }
  .ambica { gap: 36px; }
  .ambica-photo { width: 100%; }
  .ambica-photo-inner { aspect-ratio: 1; }
  .ambica-copy > p { font-size: 16px; line-height: 1.6; margin-block: 22px; }
  .ambica-signoff { gap: 16px; }
  .ambica-signoff > span:last-child { min-width: 0; }
  .ambica-signoff small { font-size: 12px; line-height: 1.5; }

  .process-grid { gap: 16px; }
  .process-step { min-height: 0; padding: 24px; text-align: left; }
  .step-number { position: static; transform: none; width: 42px; height: 42px; font-size: 24px; }
  .process-step h3 { font-size: 30px; margin: 18px 0 12px; }
  .process-step p { font-size: 16px; line-height: 1.5; }
  .motivation { height: calc(100svh + 90px); min-height: 700px; padding-bottom: 6px; }
  .motivation-sticky { height: 100svh; min-height: 600px; max-height: 900px; }
  .motivation-copy { padding: 32px var(--gutter); }
  .motivation-words { font-size: clamp(82px, 23vw, 145px); letter-spacing: -4px; }
  .motivation-description { margin: 24px 0; min-height: 0; max-width: 340px; }
  .motivation-description p { font-size: 16px; line-height: 1.6; }
  .scroll-cue { display: none; }

  /* All four categories on one row: wrapping onto a second row left a lone
     tab looking like a selected state of its own. */
  .plan-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2px; padding: 3px; }
  .plan-tabs button { min-width: 0; min-height: 52px; padding: 7px 3px; font-size: 10.5px;
    line-height: 1.25; white-space: normal; hyphens: auto; }
  .plan-grid { gap: 20px; }
  .plan-card { padding: 8px; }
  .plan-overview,.plan-details { padding: 22px; }
  .plan-overview { min-height: 0; }
  .plan-card h3 { font-size: 32px; }
  .plan-card:has(.plan-badge) h3 { max-width: none; }
  .plan-badge { position: static; display: table; max-width: 100%; margin: 0 0 14px; font-size: 11px; line-height: 1.4; white-space: normal; }
  .plan-description { min-height: 0; font-size: 16px; line-height: 1.5; }
  .plan-price { font-size: 52px; margin-top: 18px; }
  .plan-price .currency { font-size: 38px; }
  .plan-price small { font-size: 14px; }
  .plan-card ul { gap: 16px; margin-bottom: 24px; }
  .plan-card li { font-size: 15px; line-height: 1.5; }
  .plan-card .button { min-height: 52px; font-size: 16px; padding: 14px 12px; }
  .plan-duration { font-size: 12px; line-height: 1.5; }
  .weight-choice { font-size: 16px; min-height: 48px; max-width: 100%; }
  .plan-help { max-width: 100%; gap: 6px; }
  .plan-help a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; }

  .voices { padding: var(--band) 0; }
  .voices > .centered-heading { padding-inline: var(--gutter); margin-bottom: 26px; }
  .voices .community-stats { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .community-stats > div { min-width: 0; padding-inline: 6px; }
  .community-stats strong { min-width: 0; font-size: 38px; }
  .voices .celebrity-name { left: 22px; right: 18px; font-size: 25px; }
  .voices .celebrity-name small { font-size: 11px; }
  .food-banner { gap: 32px; }
  .food-banner-copy > p { line-height: 1.6; }
  .lifestyle-list { margin-top: 32px; }
  .lifestyle-list ul { column-gap: 20px; font-size: 14px; line-height: 1.5; }
  .food-banner-image { min-height: 0; height: auto; aspect-ratio: .85; width: 100%; margin: 0; }

  .meal-inspiration.section { padding: var(--band) var(--gutter); }
  .meal-heading { margin-bottom: 24px; }
  .meal-heading h2 { font-size: clamp(28px, 7.7vw, 34px); line-height: 1.2; }
  .meal-heading > p:last-child { font-size: 15px; line-height: 1.6; }
  .meal-swipe-hint { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; color: #fff6e8; font-size: 12px; }
  .meal-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84vw,340px); gap: 18px; max-width: none; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding: 20px var(--gutter) 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
  .meal-grid::-webkit-scrollbar { display: none; }
  .meal-grid:focus-visible { outline: 2px solid var(--lime); outline-offset: -3px; }
  .meal-card { scroll-snap-align: start; padding: calc(min(84vw,340px) - 8px) 20px 44px; border-radius: 180px; }
  .meal-plate { top: 24px; }
  .meal-card.is-active .meal-plate img { transform: rotate(45deg) scale(1.1); filter: drop-shadow(0 18px 17px #0003); }
  .meal-card .meal-number { font-size: 28px; }
  .meal-card h3 { font-size: 23px; margin: 12px 0 20px; }
  .meal-button { min-height: 44px; font-size: 14px; padding: 12px 20px; }
  .meal-card > p:last-child { font-size: 14px; line-height: 1.6; margin-top: 18px; }

  .faq { gap: 32px; }
  .faq-intro { gap: 28px; }
  .faq-contact-card { padding: 22px; }
  .faq-contact-card .button { min-height: 48px; }
  .faq-list summary { min-height: 56px; font-size: 17px; line-height: 1.4; gap: 16px; padding-block: 22px; }
  .faq-plus { flex-shrink: 0; }
  .faq-list details > p { font-size: 16px; line-height: 1.6; }
  .footer { padding: 52px var(--gutter) calc(88px + env(safe-area-inset-bottom,0px)); }
  .footer-top { gap: 32px; }
  .footer h3 { margin-bottom: 14px; }
  .footer-top nav { gap: 4px 20px; }
  .footer-top nav a,.footer-contact > a,.footer-bottom > a { display: flex; align-items: center; min-height: 44px; }
  .footer .social-links { gap: 14px; }
  .footer-contact > a { margin-bottom: 6px; }
  .footer-contact p { margin-top: 18px; }
  .footer-bottom { margin-top: 32px; padding-bottom: 0; gap: 14px;
    grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-bottom > :first-child, .footer-bottom > :last-child { justify-self: center; }
  .whatsapp-float { width: 48px; height: 48px; right: max(14px,env(safe-area-inset-right,0px)); bottom: calc(14px + env(safe-area-inset-bottom,0px)); }
  .video-dialog { width: calc(100% - 24px); max-width: 560px; max-height: calc(100svh - 24px); padding: 14px; }
  .dialog-heading { gap: 12px; }
  .dialog-heading h2 { font-size: 25px; line-height: 1.2; }
  .close-dialog { width: 44px; height: 44px; flex: 0 0 44px; }
  .video-dialog video { max-height: calc(100svh - 115px); }
}

/* Horizontal phones use the compact layout too, without a sticky scene trap. */
/* The narrowest phones cannot give her name two lines beside a picture that
   wide, so the picture yields a little there. */
@media (max-width: 370px) {
  .ambica { grid-template-columns: 40% minmax(0, 1fr); }
}

@media (max-width: 950px) and (max-height: 500px) {
  .motivation { height: auto; min-height: 0; }
  .motivation-sticky { position: relative; height: auto; min-height: 520px; }
}


@media (max-width: 700px) {
  /* Grid items default to min-width:auto, so the two-column Pages list forced a
     371px track inside a 350px footer — that was the horizontal scroll. */
  .footer-top > * { min-width: 0; }
  .footer-pages nav { grid-template-columns: 1fr; }
  .footer-contact > a { overflow-wrap: anywhere; }

  /* the identity block is a row on desktop; at phone widths the brand,
     tagline and button cannot sit side by side without overflowing */
  .footer-identity { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-cta { max-width: 100%; }

  /* the leaf lands on top of the broccoli at this width */
  .approach .leaf { display: none; }

  /* let the hero buttons wrap rather than run past the edge on narrow phones */
  .hero-ctas { flex-wrap: wrap; row-gap: 14px; }
}