/* ============================================================
   MYRO — mobile.css
   Phone layout modelled on Nomio / AG1 / Organised:
   near-white, one idea per screen, large readable type,
   hairline lists, very little decoration.
   Loaded last so it wins. Desktop is untouched.
   ============================================================ */

.mobile-only { display: none !important; }
.announce__short { display: none; }

@media (max-width: 820px) {

  /* ============================================================
     0. Palette + type — more white, bigger text
     ============================================================ */
  :root {
    --bone:   #F7F6F2;      /* page */
    --bone-2: #EFEEEA;      /* alt panel / header */
    --paper:  #FFFFFF;
    --sand:   #E9E6DF;
    --gutter: 22px;
    --radius-lg: 18px;
    --nav-h: 64px;
  }
  body { background: var(--bone); font-size: 17px; line-height: 1.5; }
  .mobile-only { display: block !important; }
  .section { padding-block: 56px; }
  .display-l { font-size: 2.6rem; line-height: 1.02; }
  .display-m { font-size: 2.1rem; line-height: 1.05; }
  .lead { font-size: 1.1rem; line-height: 1.5; max-width: none; color: var(--ink); }
  .shead { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
  .shead h2 { margin-top: 0; }
  .shead .lead { max-width: none; }
  /* decorative labels off — Nomio has none */
  .fig, .eyebrow { display: none; }
  h2 em, h1 em { color: var(--espresso); font-style: italic; }

  /* ============================================================
     1. Page order (AG1 / Nomio sequence) via flex ordering
     ============================================================ */
  body:not(.subpage) { display: flex; flex-direction: column; }
  /* every order rule carries the same specificity as the catch-all,
     otherwise the class-targeted blocks lose and sink to the bottom */
  body:not(.subpage) > * { order: 100; }
  body:not(.subpage) > .announce { order: 1; }
  body:not(.subpage) > .nav { order: 2; }
  body:not(.subpage) > .vhero { order: 3; }
  body:not(.subpage) > #buy { order: 4; }
  body:not(.subpage) > #science { order: 5; }
  body:not(.subpage) > #active { order: 5; }
  body:not(.subpage) > #benefits { order: 6; }
  body:not(.subpage) > #rtabs { order: 7; }
  body:not(.subpage) > #research { order: 8; }
  body:not(.subpage) > #protocol { order: 9; }
  body:not(.subpage) > #subscribe { order: 10; }
  body:not(.subpage) > #athletes { order: 11; }
  body:not(.subpage) > #ingredients { order: 11; }
  body:not(.subpage) > #ugc { order: 12; }
  body:not(.subpage) > #reviews { order: 13; }
  body:not(.subpage) > #story { order: 14; }
  body:not(.subpage) > #guarantee { order: 15; }
  body:not(.subpage) > #faq { order: 16; }
  body:not(.subpage) > section:has(> .news) { order: 17; }
  body:not(.subpage) > .footer { order: 18; }

  /* hidden on phones — the dense science layer lives in the tabs block */
  #product, .trustbar, .marquee, .promotab, .stickybar { display: none !important; }
  body:not(.subpage) #mechanism, body:not(.subpage) .curve, body:not(.subpage) #xray,
  body:not(.subpage) .soil, body:not(.subpage) .specimen, body:not(.subpage) .blurband,
  body:not(.subpage) #shop { display: none !important; }

  /* ============================================================
     2. Announce + header (Nomio: burger · logo · bag)
     ============================================================ */
  .announce { padding: 10px 16px; font-size: 12px; letter-spacing: .1em; }
  .announce__long { display: none; }
  .announce__short { display: inline; }
  .nav { background: var(--bone-2); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; }
  .nav.transparent { background: transparent; }
  .nav.transparent .brandmark, .nav.transparent .nav__cart { color: var(--bone); }
  .nav.transparent .brandmark sup { color: var(--gold-2); }
  .nav.transparent .nav__burger span { background: var(--bone); }
  .nav.transparent .nav__cart .count { background: var(--bone); color: var(--espresso); }
  .nav__inner { grid-template-columns: 44px 1fr 44px; }
  .brandmark { justify-self: center; font-size: 25px; }
  .nav__buy, .nav__cartlabel { display: none; }
  .nav__bag { display: block; width: 22px; height: 22px; }
  .nav__cart { position: relative; justify-self: end; }
  .nav__cart .count { position: absolute; top: -7px; right: -10px; min-width: 17px; height: 17px; font-size: 10px; padding: 0 4px; background: var(--espresso); color: var(--bone); }

  /* ============================================================
     3. Hero — full-bleed video with the copy over it (Nomio / Organised)
     ============================================================ */
  .vhero { margin-top: calc(-1 * var(--nav-h)); background: var(--bone); color: var(--bone); }
  /* the copy sits in the upper middle of the film, not pinned to the bottom */
  .vhero__stage { min-height: 88svh; align-items: center; }
  .vhero__media { display: block; }
  .vhero__img, .vhero__data, .vhero__scroll { display: none !important; }
  .vhero__scrim {
    background:
      linear-gradient(180deg, rgba(12,10,7,.60) 0%, rgba(12,10,7,.30) 22%, rgba(12,10,7,.62) 55%, rgba(12,10,7,.85) 100%);
  }
  .vhero__inner { display: block; padding: var(--nav-h) var(--gutter) clamp(28px, 4vh, 48px); max-width: none; }
  .vhero__copy { max-width: none; padding: 0; }
  .vhero .eyebrow { display: block; color: rgba(239,233,222,.85); font-size: 10px; letter-spacing: .2em; }
  .vhero h1 { color: var(--bone); font-size: 3.1rem; line-height: 1; margin: 14px 0 16px; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
  .vhero h1 em { color: var(--gold-2); }
  .vhero__sub { color: rgba(239,233,222,.9); font-size: 1.05rem; max-width: 32ch; }
  .vhero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
  .vhero__cta .btn { width: 100%; padding: 19px 10px; font-size: 15.5px; min-height: 60px; border-radius: 6px; }
  .vhero__cta .btn--light { background: var(--bone); color: var(--espresso); border: none; }
  .vhero__cta .btn--light .arrow { display: none; }
  .vhero__cta .btn--line { display: inline-flex; border: 1.5px solid rgba(239,233,222,.75); color: var(--bone); background: transparent; text-decoration: none; }

  /* ============================================================
     4. Tick list (Nomio green dots + hairlines)
     ============================================================ */
  /* ============================================================
     5. Evidence — plain text + simple stat rows
     ============================================================ */
  .evidence { background: transparent; border: none; }
  .evidence__grid { gap: 26px; }
  .evidence__copy h2 { margin-top: 0; }
  .evidence__copy .lead { margin-top: 16px; }
  .evidence__copy .hero__cta { margin-top: 22px; }
  .evidence__copy .btn { background: transparent; color: var(--espresso); border: 1.5px solid var(--espresso); border-radius: 6px; padding: 18px 26px; font-size: 16px; min-height: 58px; }
  .evidence__stats { display: grid; grid-template-columns: 1fr; gap: 0; background: var(--espresso); border: none; border-radius: var(--radius-lg); overflow: hidden; }
  .stat, .stat--dark { background: transparent; padding: 22px; border-top: 1px solid rgba(239,233,222,.14); min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; }
  .stat:first-child { border-top: none; }
  .stat .k { color: var(--gold-2); order: 2; text-align: right; flex-shrink: 0; font-size: 11px; }
  .stat .v { color: var(--bone); margin-top: 0; font-size: 2.4rem; }
  .stat .v small { color: var(--lab-2); }
  .stat .l { color: rgba(239,233,222,.72); font-size: 14px; margin-top: 6px; }
  .evidence__note { display: none; }

  .molecule { background: transparent; }
  .molecule__grid { gap: 22px; }
  .molecule__art { aspect-ratio: 1/1; border-radius: 12px; order: -1; }
  .kg__n { font-size: 5.4rem; }
  .kg__l { font-size: 1.6rem; }

  /* ============================================================
     6. Benefits — AG1 photo cards, swipeable
     ============================================================ */
  [data-carousel] {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 12px; padding: 0 var(--gutter) 6px; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none;
  }
  [data-carousel]::-webkit-scrollbar { display: none; }
  [data-carousel] > * { flex: 0 0 84%; scroll-snap-align: start; min-width: 0; }
  [data-carousel] > *:last-child { margin-right: var(--gutter); }
  .carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
  .carousel-dots i { width: 6px; height: 6px; border-radius: 6px; background: var(--clay); transition: all .3s var(--ease); }
  .carousel-dots i.on { width: 22px; background: var(--espresso); }
  .bcards { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .bcard { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3.6; background: var(--sand); margin: 0; }
  .bcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .bcard figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: #fff; background: linear-gradient(transparent, rgba(10,8,5,.72)); }
  .bcard h3 { color: #fff; font-size: 1.6rem; margin-bottom: 6px; }
  .bcard p { font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.9); }
  .bfacts { margin-top: 22px; border: 1.5px solid var(--espresso); border-radius: 100px; padding: 16px; font-size: 16px; color: var(--espresso); }

  /* ============================================================
     7. Research tabs — AG1 "15 years of research"
     ============================================================ */
  .rtabs { background: var(--paper); }
  .rtabs h2 { margin-bottom: 22px; }
  .rtabs__nav { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
  .rtabs__nav::-webkit-scrollbar { display: none; }
  .rtabs__nav button { flex: 0 0 auto; font-size: 17px; color: var(--ink-soft); padding: 0 0 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .rtabs__nav button.on { color: var(--espresso); border-color: var(--espresso); }
  .rtabs__pane { display: none; }
  .rtabs__pane.on { display: block; }
  .rtabs__media { border-radius: 12px; overflow: hidden; background: var(--bone-2); aspect-ratio: 4/3; margin-bottom: 22px; }
  .rtabs__media img { width: 100%; height: 100%; object-fit: cover; }
  .rtabs__media.chart { aspect-ratio: auto; padding: 14px; border: 1px solid var(--line); background: #FBFAF7; }
  .rtabs__media.chart svg { width: 100%; height: auto; }
  .rtabs h3 { font-size: 1.5rem; line-height: 1.15; margin-bottom: 16px; }
  .rtabs h3 sup { font-size: .5em; color: var(--ink-faint); }
  .rtabs__mono { font-family: var(--mono); font-size: 13px; line-height: 1.7; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
  .rtabs__link { display: inline-block; margin-top: 20px; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--espresso); border-bottom: 1px solid var(--espresso); padding-bottom: 2px; }

  /* ============================================================
     8. Research index — trimmed list
     ============================================================ */
  .research { background: transparent; }
  .research__grid { gap: 0; }
  .research__media { display: none; }
  .paper { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .paper a.go { width: auto; justify-self: start; }
  .paper .n, .paper .meta, .paper p { display: none; }
  .paper h3 { font-size: 1.15rem; line-height: 1.25; }
  .paper a.go { justify-self: start; border-radius: 4px; padding: 9px 14px; font-size: 12px; }
  .papers:not(.all) .paper:nth-child(n+4) { display: none; }
  .papers__more { display: inline-flex; margin-top: 22px; width: 100%; border-radius: 4px; border: 1.5px solid var(--espresso); color: var(--espresso); font-size: 16px; }
  .papers.all + .papers__more { display: none; }
  .research__disc { display: none; }

  /* ============================================================
     9. Protocol — Nomio "how athletes use it" table
     ============================================================ */
  .protocol { background: transparent; }
  .protocol__media { display: none; }
  .protocol__grid { gap: 0; }
  .dose__legend { list-style: none; margin: 0 0 28px; display: grid; gap: 12px; font-size: 16px; }
  .dose__legend li { display: flex; align-items: center; gap: 12px; }
  .dose__legend li { gap: 14px; }
  .dose__legend .d + .d, .dose .bottles i + i { margin-left: 7px; }
  .dose .bottles i::before { display: none; }
  .dose { display: block; background: transparent; border: none; border-radius: 0; border-top: 1px solid var(--line); }
  .dose > div { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 16px 0; }
  .dose .k { display: none; }
  .dose h4 { grid-column: 1; grid-row: 1; font-family: var(--grotesk); font-weight: 400; font-size: 16.5px; }
  .dose .t { grid-column: 1; grid-row: 2; text-align: left; font-size: 12.5px; margin-top: 3px; }
  .dose .t b { display: inline; font-size: 12.5px; }
  .dose .t b::after { content: " · "; color: var(--gold); }
  .dose .bottles { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  .dose .bottles { margin: 0; height: auto; gap: 0; }
  .dose .race { background: transparent; }

  .dose .race h4 { color: var(--espresso); }
  .protocol__notes { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
  .protocol__notes > div { padding: 16px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); }
  /* the dosing table already draws a rule under the last row */
  .protocol__notes > div:first-child { border-top: none; }
  .protocol__notes b { margin-bottom: 2px; }

  /* ============================================================
     10. Pricing — AG1 dark panel with "first box includes"
     ============================================================ */
  .subs { background: transparent; }
  .subs__grid { gap: 18px; }
  .subs__gallery { gap: 10px; }
  .subs__art .seal { display: none; }
  .subs__panel { background: var(--espresso); color: var(--bone); border: none; border-radius: var(--radius-lg); padding: 26px 22px 24px; }
  .subs__panel h2 { color: var(--bone); font-size: 1.8rem; }
  .subs__stars { color: rgba(239,233,222,.7); font-size: 14px; }
  .toggle { background: rgba(239,233,222,.12); }
  .toggle button { color: rgba(239,233,222,.7); }
  .toggle button.active { background: var(--bone); color: var(--espresso); }
  .subs__price .now { color: var(--bone); }
  .subs__price .was { color: rgba(239,233,222,.5); }
  .subs__price .per { color: var(--gold-2); }
  .subs__free, .subs__list { display: none; }
  .subs__includes { margin: 18px 0 22px; border-top: 1px solid rgba(239,233,222,.2); padding-top: 18px; }
  .subs__inc-title { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(239,233,222,.75); margin-bottom: 8px; }
  .inc { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 0; }
  .inc b { display: block; font-size: 17px; font-weight: 500; color: var(--bone); }
  .inc span { font-size: 14px; color: rgba(239,233,222,.65); }
  .inc em { font-style: normal; font-size: 17px; font-weight: 500; color: var(--bone); white-space: nowrap; }
  .inc em s { color: rgba(239,233,222,.5); font-weight: 400; margin-right: 6px; }
  .inc.total { border-top: 1px solid rgba(239,233,222,.2); margin-top: 6px; padding-top: 16px; }
  .inc.total b { font-size: 19px; }
  .subs__panel .btn--dark { background: var(--bone); color: var(--espresso); font-size: 17px; padding: 20px; min-height: 62px; }
  .subs__checks { list-style: none; margin: 16px 0 0; display: grid; gap: 10px; text-align: center; font-size: 15px; color: rgba(239,233,222,.85); }
  .subs__note { display: none; }

  /* ============================================================
     11. Athletes — Nomio "Trusted by the best" tabs
     ============================================================ */
  .athletes { background: transparent; }
  .ath-tabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
  .ath-tabs::-webkit-scrollbar { display: none; }
  .ath-tabs button { flex: 0 0 auto; font-size: 17px; color: var(--ink-soft); padding: 0 0 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .ath-tabs button.on { color: var(--espresso); border-color: var(--espresso); }
  .athletes__grid { display: block; }
  .ath { display: none; aspect-ratio: auto; background: transparent; border-radius: 0; }
  .ath.on { display: flex; flex-direction: column-reverse; gap: 22px; }
  .ath img { position: static; aspect-ratio: 4/3; border-radius: 12px; }
  .ath__cap { position: static; padding: 0; background: none; color: var(--espresso); display: flex; flex-direction: column; }
  .ath__cap .who { order: -1; margin: 0 0 12px; flex-direction: column; align-items: flex-start; gap: 4px; font-family: var(--grotesk); text-transform: none; letter-spacing: 0; opacity: 1; }
  .ath__cap .who span { font-family: var(--display); font-size: 1.7rem; color: var(--espresso); }
  .ath__cap .who i { color: var(--ink-soft); font-size: 16px; }
  .ath__cap q { font-family: var(--grotesk); font-size: 18px; line-height: 1.5; color: var(--espresso); }
  .athletes__row { margin-top: 26px; padding-top: 0; border: none; }
  .athletes__row .disciplines { display: none; }
  .athletes__row .btn { width: 100%; border-radius: 4px; border: 1.5px solid var(--espresso); color: var(--espresso); font-size: 16px; padding: 15px; }

  /* ============================================================
     12. Ingredients — Organised tiles (1 wide + 2)
     ============================================================ */
  .ingredients { grid-template-columns: 1fr; gap: 28px; }
  .ing__media { aspect-ratio: 4/3.4; }
  .ing__cap { padding-top: 14px; }
  .ing__cap h4 { font-size: 1.5rem; }
  .ing__cap p { font-size: 15px; max-width: none; }

  /* ============================================================
     13. Reviews — Nomio "Real people, real results" list
     ============================================================ */
  .reviews__head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
  .reviews__score .big { font-size: 2rem; }
  .chips { display: none; }
  .reviews__grid { display: block; }
  .review { background: transparent; border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 22px 0; gap: 10px; }
  .review:nth-child(n+4) { display: none; }
  .review .s { display: none; }
  .review p { font-size: 17px; line-height: 1.5; }
  .review__av { display: none; }
  .review__by b { font-size: 15px; }
  .review__by span { font-size: 13px; }

  /* ============================================================
     14. Founder / guarantee / FAQ / newsletter / footer
     ============================================================ */
  #story { background: transparent !important; }
  .founder { gap: 22px; }
  .founder__media { aspect-ratio: 4/3.6; border-radius: 12px; }

  .founder blockquote { font-size: 1.45rem; line-height: 1.25; }
  .founder cite { font-size: 15px; }
  .founder .readout { display: none; }
  .expand__copy h2 { font-size: 1.9rem; }
  .expand__copy .btn { border-radius: 4px; }
  .faq__q { padding: 20px 0; font-family: var(--grotesk); font-weight: 400; font-size: 17px; }
  .faq__q .pm { font-size: 22px; color: var(--espresso); }
  .faq__a p { font-size: 16px; }
  .footer { padding-top: 44px; background: var(--bone-2); color: var(--espresso); }
  .footer a { color: var(--ink); font-size: 16px; }
  .footer__brand { font-size: 2.6rem; color: var(--espresso); }
  .footer__grid > div > p { color: var(--ink-soft) !important; font-size: 15px; }
  .footer h4 { color: var(--ink-faint); }
  .footer__bottom { border-color: var(--line); color: var(--ink-faint); font-size: 13px; }

  /* cart drawer text sizes */
  .citem__name { font-size: 16px; } .cart__row { font-size: 15px; }
}

@media (max-width: 400px) {
  .vhero h1 { font-size: 2.6rem; }
  [data-carousel] > * { flex-basis: 88%; }
}


@media (max-width: 820px) {
  .phead { padding: 34px 0 30px; }
  .phead h1 { font-size: 2.4rem; }
  .explore { grid-template-columns: 1fr; gap: 12px; }
  .ecard img { aspect-ratio: 16/9; }
  .pcta .buyrow .btn { width: 100%; }
}


@media (max-width: 820px) {
  /* newsletter: the field must not stretch to fill the column */
  .news .news__form { gap: 18px; }
  .news__field { flex: 0 0 auto; width: 100%; }
  .news .news__form .btn--light { margin-top: 2px; }

  /* no autoplaying film on phones, so iOS never paints a play button */
  .expand__media video { display: none; }
  .expand__still { display: block; }

  /* every primary button shares one shape */
  .subs__panel .btn--dark, .expand__copy .btn, .news .news__form .btn--light,
  .athletes__row .btn, .papers__more, .bfacts, .evidence__copy .btn { border-radius: 6px; }

  /* secondary actions stay quiet — the filled buy buttons carry the weight */
  .evidence__copy .btn, .athletes__row .btn, .papers__more, .bfacts {
    box-shadow: none;
    border-width: 1px;
    border-color: var(--clay);
    color: var(--ink);
    font-weight: 500;
  }
}