/* =====================================================================
   Nuvari — CONCISE MOBILE (Hims / Ro pattern)
   ---------------------------------------------------------------------
   Goal: same site, same words, same design language — but a mobile page
   you can actually get to the bottom of. Long stacked sections become
   tap-to-open cards; vertical rhythm tightens; tiles go 2-up.

   DESKTOP IS UNTOUCHED. Every rule in this file lives inside
   @media (max-width: 820px) — the same breakpoint mobile-redesign.css
   already uses. Nothing here can render above 821px.

   KILL SWITCHES
     - spacing / grid only   → remove the <link> to this file
     - tap-to-open sections  → remove the <script> for mobile-concise.js
       (the page then renders fully expanded, exactly as before)

   Loaded AFTER /partials/site.css so it wins on specificity ties.
   ===================================================================== */

@media (max-width: 820px) {

/* ═══════════════════════════════════════════════════════════════════
   1. VERTICAL RHYTHM
   Desktop section padding (56–90px top AND bottom) was leaking onto
   phones. Hims/Ro run 32–40px. This alone removes ~1.5 screens/page.
   ═══════════════════════════════════════════════════════════════════ */
  .featured-section,
  .membership-section,
  .how-section,
  .split-value-section,
  .cta-section,
  .mh-how, .mh-member, .mh-final,
  .wh-how, .wh-member, .wh-final,
  .hiw-hero, .timeline, .trust, .faq,
  .mp4-annual, .mp4-stacks, .mp4-faq, .mp4-cta,
  .stacks-section,
  .trt-stack, .take-section, .timeline-section, .compare-section, .mol-merge,
  .proto-page .sec {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .mh-goal, .wh-goal, .sh4-years, .mp4-sec, .sh4-shop {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  /* Heroes: 48–56px of dead space above the fold is 6% of the screen */
  .hero, .about-hero, .faq-hero, .sh4-hero {
    padding-top: 32px !important;
    padding-bottom: 24px !important;
  }
  .mp-hero { padding-top: 40px !important; }
  /* About page long-reads */
  .mission, .different { padding-top: 32px !important; padding-bottom: 32px !important; }
  /* Sections that set padding through an inline style="padding:64px 32px" */
  .proto-page section[style*="padding:64px"] {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

/* ═══════════════════════════════════════════════════════════════════
   2. TYPE SCALE
   48px display type on a 390px viewport eats a third of the screen and
   wraps to four lines. Cap it. Same faces, same colours, same italics.
   ═══════════════════════════════════════════════════════════════════ */
  .sh4-hero h1,
  .mp4-hero h1 {
    font-size: 32px !important;
    line-height: 1.1 !important;
    margin-bottom: 14px !important;
  }
  .hero h1, .mh-hero h1, .wh-hero h1, .hiw-hero h1, .faq-hero h1 {
    font-size: 30px !important;
    line-height: 1.14 !important;
  }
  .mh-goal h2, .wh-goal h2,
  .sh4-years h2, .timeline-section h2,
  .nv-related h2, .stacks-section h2 {
    font-size: 25px !important;
    line-height: 1.16 !important;
  }
  .mh-intro, .wh-intro, .mp-sub {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

/* ═══════════════════════════════════════════════════════════════════
   3. TILES GO 2-UP
   Four full-width photo cards = 1066px of scroll for four taps.
   Hims runs these as a 2×2 grid. Same cards, same photos, quarter the
   scroll. (This overrides the older 1-column rule in index.html.)
   ═══════════════════════════════════════════════════════════════════ */
  .nm-cat-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .nm-cat-cards > a > div:first-child {
    height: 132px !important;
  }
  .nm-cat-cards > a > .bottom,
  .nm-cat-cards > a > div:last-child {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }

  /* Homepage hero quick-links + membership cards: 2-up as well */
  .hero-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .hero-cards .hc { min-height: 0 !important; }

  /* Protocol lineups — the page already ships a two-up rail between
     561px and 1020px; phones were the only width dropped to one card
     per screen, which is what made these pages twelve screens long. */
  /* THE OFFERINGS. A 2-up grid put six products across three rows and made
     the lineup 2,379px on crown — a third of that page, and most of the
     "dragged out" feeling. One swipeable row instead: same cards, same
     order, same information, about a third of the height. It is also the
     pattern this design language already uses, for the triptych above it
     and for desire's own lineup.
     Symmetry survives for free — a single flex row stretches every card to
     the same height, so .head{flex:1 1 auto} still lines the images up. */
  .sh4-rail {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 16px;
    padding-left: 16px !important;
    padding-right: 16px !important;
    scrollbar-width: none;
  }
  .sh4-rail::-webkit-scrollbar { display: none; }
  .sh4-rail > .sh4-card {
    grid-column: auto !important;
    min-width: 0 !important;
    flex: 0 0 76% !important;
    max-width: 320px !important;
    scroll-snap-align: center;
  }
  /* grid-auto-rows:1fr sizes EVERY row to the tallest row in the grid. With one
     row of four on desktop that is free; with four rows of two on a phone it
     stretched every card to the tallest card on the page and opened ~280px of
     dead white between the copy and the price. Rows size themselves now.
     The founder's symmetry rule is untouched: cards in a ROW still stretch to
     each other, so .head{flex:1 1 auto} still lines their images up. */
  .sh4-rail { grid-auto-rows: auto !important; }
  .sh4-rail .sh4-card { overflow: hidden !important; }
  /* Badge row has to wrap at half width or it runs out of the card */
  .sh4-rail .sh4-card .chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .sh4-rail .sh4-card .chips > * {
    font-size: 9.5px !important;
    padding: 3px 7px !important;
    letter-spacing: 0.4px !important;
    /* wrap, never clip — "Women under 45" was losing its last word */
    white-space: normal !important;
    /* and never wider than the card: "GENTLE RESTART" escaped its own
       card at 320px, painting over the gutter between the columns */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .sh4-rail .sh4-card .chips { min-width: 0 !important; max-width: 100% !important; }
  /* Shrink the art frame but keep its layout: the ingredient caption is
     absolutely positioned inside it and needs the box to stay a box. */
  .sh4-rail .sh4-card .visual { height: 180px !important; margin: 0 10px !important; }
  .sh4-rail .sh4-card .visual:not(.photo) img { max-height: 66% !important; max-width: 78% !important; }
  /* The ingredient caption is absolutely positioned over the bottom of the art.
     At 4-up it clears the bottle; at 2-up it lands on top of it and collides
     with the label. It is also a verbatim repeat of .actives three lines above,
     so hiding it at this width costs the reader nothing. */
  .sh4-rail .sh4-card .visual .mol { display: none !important; }
  .sh4-rail .sh4-card .visual .gl-tag {
    font-size: 9.5px !important;
    padding: 4px 8px !important;
    white-space: normal !important;
    text-overflow: clip !important;
    max-width: calc(100% - 20px) !important;
  }
  .sh4-rail .sh4-card .head { padding: 14px 10px !important; }
  /* The card title is set to nowrap+ellipsis for the wide desktop column.
     At half a phone width that clips the product NAME itself — "Semaglutide
     Injection" rendered as "Semaglutid...". Let it wrap instead. */
  .sh4-rail .sh4-card .head h3 {
    /* Sized from the measured worst case, not by eye. The longest single
       word in any lineup is "Bremelanotide" (desire) at 123px when set at
       17px; "Enclomiphene" (apex) is 119px. The 2-up title box is ~115px
       at 375px, so 17px broke both mid-word on the most common phone
       width. 15px puts the worst word at ~109px with room to spare. */
    font-size: 15px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .sh4-rail .sh4-card .head .actives,
  .sh4-rail .sh4-card .head .nmc-actives { font-size: 12.5px !important; line-height: 1.35 !important; }
  .sh4-rail .sh4-card .head .form,
  .sh4-rail .sh4-card .head .why { font-size: 12.5px !important; line-height: 1.4 !important; }
  /* .why carries -webkit-line-clamp:2 from the page — sized for the wide
     desktop column. At half a phone width two lines cut most of the
     sentence off: "Enclomiphene plus DHEA, boron &..." was showing 36px
     of 105px. Rows size to their own content now, so the description can
     simply be read in full. */
  .sh4-rail .sh4-card .head .why {
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
    min-height: 0 !important;
  }
  /* .pr carries margin-top:auto, which parks the price at the bottom of
     .head and dumps every pixel of stretch slack between the description
     and the price — the gap that made these cards look broken. Pin it to
     the copy; the slack then collects below it, directly above the image,
     where a uniform band across the row reads as breathing room and still
     keeps every product image on the same line. */
  .sh4-rail .sh4-card .head .pr { font-size: 20px !important; margin-top: 14px !important; }
  .sh4-rail .sh4-card .head .pr small { font-size: 11.5px !important; }
  .sh4-rail .sh4-card .foot { padding: 12px !important; }
  .sh4-rail .sh4-card .foot .b { font-size: 12.5px !important; padding: 10px 8px !important; white-space: normal !important; }
  .sh4-rail .sh4-card .foot .isi a { font-size: 10.5px !important; }
  /* break-word, NOT anywhere: `anywhere` breaks at any character, which
     rendered "Tirzepatide Chewable" as "Tirzepatid / e Chewable" at 320px.
     break-word only splits a word that cannot fit on a line of its own. */
  .sh4-rail .sh4-card * { overflow-wrap: break-word; hyphens: none; }

  /* Store catalogue — one card per screen means eleven screens to see
     eleven products. Two up, the way every DTC store does it on phones. */
  .product-grid {
    /* minmax(0,1fr) — without the 0 floor the columns refuse to go below
       their min-content width and the second one runs off the screen. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 10px !important;
    padding: 24px 0 32px !important;
  }
  .product-grid > * { min-width: 0 !important; }
  .product-grid .product-card * { overflow-wrap: anywhere; }
  .product-grid .product-card .tile img,
  .product-grid .product-card .tile { max-height: 210px !important; }
  .product-grid .product-card .tile img { object-fit: cover !important; }
  .product-grid .product-card .info { padding-top: 10px !important; }
  .product-grid .product-card .info h3 { font-size: 15px !important; line-height: 1.25 !important; }
  .product-grid .product-card .info .price { font-size: 13px !important; }
  .product-grid .product-card .info .meta { font-size: 11.5px !important; line-height: 1.4 !important; }
  .product-grid .product-card .info .actions { gap: 6px !important; }
  .product-grid .product-card .info .actions a,
  .product-grid .product-card .info .actions button {
    font-size: 12.5px !important;
    padding: 10px 8px !important;
    white-space: normal !important;
  }
  /* The label/value meta rows need the full column width at half size */
  .product-grid .product-card .info .meta { display: block !important; }
  .product-grid .product-card .info .meta > * { display: block !important; }

  /* Homepage: membership card art, and the value-prop / comparison split */
  .mp-hero .mp-card img { max-height: 150px !important; object-fit: contain !important; }
  .split-grid { gap: 18px !important; }
  .split-grid > div > div[style*="border-left"] { padding: 16px 18px !important; }

  /* Trust / proof cards — four stacked cards is 800px for four facts */
  .trust-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .trust-grid .trust-card { padding: 16px 14px !important; }
  .trust-grid .trust-icon { width: 34px !important; height: 34px !important; margin-bottom: 10px !important; }
  .trust-grid .trust-card h3 { font-size: 14px !important; }
  .trust-grid .trust-card p { font-size: 12.5px !important; line-height: 1.45 !important; }

/* ═══════════════════════════════════════════════════════════════════
   4. MEDIA CAPS
   Full-bleed art blocks sized for a 1440px canvas.
   ═══════════════════════════════════════════════════════════════════ */
  .mp-hero { min-height: 0 !important; }
  .mp-hero .mp-photo { position: relative !important; top: 0 !important; max-height: 300px !important; overflow: hidden !important; }
  .mp-hero .mp-cards { margin-top: 20px !important; gap: 12px !important; }
  .mp-card { min-height: 0 !important; padding-bottom: 0 !important; }
  /* THE MAN POWER BAND — "faded and weird".
     Two causes. First, mine: an earlier wave capped .mpb-bg at 340px inside
     a 520px band, leaving a flat slate rectangle under the photo.
     Second, the artwork itself: mpb-band.webp is a 2000x1116 DESKTOP split —
     a navy gradient on the left for the copy, the model plus four floating
     chips on the right. Cropped to a narrow portrait band it becomes a thin
     vertical slice, so the headline and buttons always landed on top of
     chips that read as ghost text.
     Stack it instead: the photograph gets its own strip where the chips are
     legible and intentional, and the copy sits below on clean navy. No text
     over text, and the band gets shorter. */
  .mpb {
    display: block !important;
    min-height: 0 !important;
    background: linear-gradient(160deg, #0A1F3C 0%, #123252 60%, #163A5C 100%) !important;
  }
  .mpb::after { display: none !important; }
  .mpb .mpb-bg {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 232px !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: 74% 16% !important;
    display: block !important;
  }
  .mpb .mpb-copy {
    max-width: none !important;
    padding: 22px 20px 26px !important;
  }
  .mpb .mpb-name { text-shadow: none !important; }
  .mh-hero-img img, .wh-hero-img img { max-height: 300px !important; object-fit: cover !important; }

/* ═══════════════════════════════════════════════════════════════════
   5. TAP-TO-OPEN SECTIONS  (built by mobile-concise.js)
   Nothing below applies until the script wraps a section, so if the
   script never runs the page simply renders long — as it does today.
   ═══════════════════════════════════════════════════════════════════ */
  .nmc-acc {
    padding: 0 !important;
    border-top: 1px solid rgba(10, 22, 40, 0.10);
  }
  .nmc-acc + .nmc-acc { border-top: 1px solid rgba(10, 22, 40, 0.10); }
  .nmc-acc:last-of-type { border-bottom: 1px solid rgba(10, 22, 40, 0.10); }

  .nmc-acc__hd {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    /* The wrapped element already supplies the side gutter; .nmc-acc--gutter
       is added by the script only where it does not. */
    padding: 20px 0;
    background: transparent;
    border: 0;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nmc-acc__label { flex: 1 1 auto; min-width: 0; }
  .nmc-acc__kicker {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #00808F;
    margin-bottom: 5px;
  }
  .nmc-acc__title {
    display: block;
    font-family: 'DM Serif Display', serif;
    font-size: 23px;
    line-height: 1.15;
    color: #0A1628;
  }
  .nmc-acc__hint {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: #5A6B7D;
    margin-top: 6px;
    /* one line only — the full sentence is inside, one tap away */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Chevron — rotates on open. Same teal as every other affordance. */
  .nmc-acc__chev {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 180, 198, 0.45);
    position: relative;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
  }
  .nmc-acc__chev::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 7px; height: 7px;
    margin: -5px 0 0 -4px;
    border-right: 2px solid #00808F;
    border-bottom: 2px solid #00808F;
    transform: rotate(45deg);
  }
  .nmc-acc[data-open="1"] > .nmc-acc__hd .nmc-acc__chev {
    transform: rotate(180deg);
    background: rgba(0, 180, 198, 0.10);
  }
  .nmc-acc__hd:active .nmc-acc__chev { background: rgba(0, 180, 198, 0.18); }

  /* The header teaser is a two-line clamp of the section's own intro. The
     full sentence lives in the body, so once the section is open the
     teaser would just repeat it — hide it there. */
  .nmc-acc[data-open="1"] > .nmc-acc__hd .nmc-acc__hint,
  .nmc-acc[data-open="1"] > * > .nmc-acc__hd .nmc-acc__hint { display: none !important; }

  .nmc-acc__body[hidden] { display: none !important; }
  .nmc-acc__body {
    padding: 0 0 30px;
    animation: nmc-open 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes nmc-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nmc-acc__body { animation: none; }
    .nmc-acc__chev { transition: none; }
  }
  .nmc-acc--gutter > .nmc-acc__hd,
  .nmc-acc--gutter > .nmc-acc__body,
  .nmc-acc--gutter > * > .nmc-acc__hd,
  .nmc-acc--gutter > * > .nmc-acc__body {
    padding-left: calc(18px + env(safe-area-inset-left, 0px));
    padding-right: calc(18px + env(safe-area-inset-right, 0px));
  }

  /* Timeline steps keep their numeral beside the header */
  .timeline .tl-step.nmc-acc { display: block; border-top: 0; }
  .timeline .tl-step.nmc-acc + .tl-step.nmc-acc { border-top: 1px solid rgba(10, 22, 40, 0.10); }
  .timeline .tl-step.nmc-acc .tl-num { margin-bottom: -46px; position: relative; z-index: 2; }
  .timeline .tl-step.nmc-acc .nmc-acc__hd { padding-left: 56px; }
  .timeline .tl-step.nmc-acc .nmc-acc__body { padding-left: 56px; }

/* ═══════════════════════════════════════════════════════════════════
   6. STICKY ACTION BAR on the pages that were missing one.
   Reuses .nm-sticky from mobile-redesign.css — same pill, same teal.
   The label and destination are copied from the page's own hero CTA,
   so this introduces no new link and no new copy.
   ═══════════════════════════════════════════════════════════════════ */
  /* FOUNDER CALL 2026-09-03: no pinned bottom bars anywhere on mobile. The builder in
     mobile-concise.js is disabled (early return in addStickyCTA); these rules also
     hide any bar that still reaches the DOM — static markup, a cached script — and
     release the space either bar system reserved. */
  .nm-sticky, .nm-bottom-cta { display: none !important; }
  body.nmc-has-sticky { padding-bottom: 0 !important; }
  body { padding-bottom: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════
   7. SMALL FIXES surfaced while measuring
   ═══════════════════════════════════════════════════════════════════ */
  /* Jump nav: let it scroll rather than clip the last item */
  .mh-jumpnav, .wh-jumpnav, .proto-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mh-jumpnav::-webkit-scrollbar,
  .wh-jumpnav::-webkit-scrollbar,
  .proto-tabs::-webkit-scrollbar { display: none; }

  /* Nothing may push the page sideways.
     On <body> this is a trap: overflow-x:hidden forces overflow-y to compute
     as auto, which makes the BODY a scroll container. position:sticky then
     resolves against body instead of the viewport, and window.scrollTo /
     IntersectionObserver measure the wrong box — that is what left the glow
     science video on its poster. Clip on the root element instead: it stops
     sideways scroll without creating a scroller. */
  html { overflow-x: hidden; }
  @supports (overflow-x: clip) {
    html { overflow-x: clip; }
  }
  /* REVERTED 2026-10-07. This used to force `body { overflow-x: visible }`
     so that document.scrollWidth could exceed clientWidth and my own
     overflow test could fail honestly. That was a DIAGNOSTIC, and it had
     no business shipping: mobile-app.css:26 clips the body below 481px
     for a reason. Clipping only <html> is not enough on iOS Safari —
     the layout viewport still widened to the widest content, so Safari
     scaled the whole page down to fit and the site rendered as a
     shrunken column with a dead band beside it. The founder's words:
     "why can i zoom out and zoom in and it looks like a wordpress page".
     The test did not need this anyway. It walks element rects and
     compares them to the viewport, so it never depended on
     document.scrollWidth. Never change the product to make a
     measurement work. */
  body { overflow-x: hidden !important; }

  /* iOS zooms the whole page when a focused input is under 16px. The guard
     for that lives in mobile-app.css inside @media (max-width:480px), but
     this layer runs to 820px — so every width from 481 to 820, which is
     exactly where an iPhone in landscape (812px) sits, fell through the gap
     and auto-zoomed on the partner application form. Same rule, full range. */
  input, select, textarea { font-size: 16px !important; }

  /* Flex and grid children default to min-width:auto, so a wide child cannot
     shrink and pushes past the viewport. At 320px this cut up to 16px off the
     "What You'll Take" sections once they were wrapped as accordions. */
  .nmc-acc__hd, .nmc-acc__body { min-width: 0 !important; }
  .nmc-acc__hd > .nmc-acc__label { min-width: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════
   8. ONE-SCREEN MENU (founder 2026-09-03: "fit in one screen without
   scrolling" — the ro/hims pattern, our vibe). The sheet's content is
   re-ordered with flex so it reads label → the eight categories → the
   three utility rows → footer links in two quiet columns → the waitlist
   pill pinned at the bottom. The 320px hero card IS that pill now.
   Scrolling stays available as a fallback on short phones — nothing is
   ever unreachable; it simply fits a 390×844 without it.
   ═══════════════════════════════════════════════════════════════════ */
  .slide-menu .menu-page { padding: 0 0 8px !important; }
  #menuMain { display: flex; flex-direction: column; min-height: 100%; }
  #menuMain .menu-label { order: 0; padding: 12px 24px 4px !important; font-size: 11px !important; }
  #menuMain .menu-cat { order: 0; }
  .slide-menu .menu-cat {
    padding: 10px 24px !important; min-height: 46px; margin: 0 !important; width: 100% !important;
    border: 0 !important; border-left: 3px solid transparent !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; transform: none !important;
  }
  .slide-menu .menu-cat span { font-size: 20px !important; line-height: 1.2 !important; }
  .slide-menu .menu-cat svg { width: 16px !important; height: 16px !important; opacity: .55; }
  #menuMain .menu-divider { order: 40; margin: 6px 24px !important; }
  #menuMain .menu-cat--browse,
  #menuMain .menu-cat--membership { order: 50; padding: 8px 24px !important; min-height: 38px; }
  #menuMain .menu-cat--browse span,
  #menuMain .menu-cat--membership span {
    font-family: 'DM Sans', sans-serif !important; font-size: 14.5px !important; font-weight: 600 !important;
    color: var(--teal, #00B4C6) !important; letter-spacing: 0 !important;
  }
  #menuMain .menu-cat--browse svg,
  #menuMain .menu-cat--membership svg { stroke: var(--teal, #00B4C6) !important; opacity: .8; }
  #menuMain .menu-bottom {
    order: 60;
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px 12px;
    padding: 6px 24px 0 !important; margin: 0 !important; border: 0 !important;
  }
  #menuMain .menu-bottom a { font-size: 12.5px !important; padding: 2px 0 !important; color: var(--ink-mute, #6B7C88) !important; }
  .slide-menu .menu-hero {
    order: 100;
    margin: auto 16px 6px !important; padding: 0 18px !important;
    min-height: 0 !important; height: 52px !important; border-radius: 99px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .slide-menu .menu-hero-content {
    display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important;
    gap: 10px; min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important;
  }
  .slide-menu .menu-hero h3 { display: none !important; }
  .slide-menu .menu-hero h4 { margin: 0 !important; font-family: 'DM Sans', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: #fff !important; }
  .slide-menu .menu-hero-arrow { width: 26px !important; height: 26px !important; margin: 0 !important; flex: 0 0 auto; }
  .slide-menu .menu-hero-arrow svg { width: 13px !important; height: 13px !important; }
  /* Sub-pages get the same compact rhythm */
  .slide-menu .menu-link { padding: 11px 24px !important; }
  .slide-menu .menu-link small { font-size: 12px !important; }
  .slide-menu .menu-sub-title { padding: 6px 24px 2px !important; font-size: 22px !important; }

/* ═══════════════════════════════════════════════════════════════════
   9. TYPE FLOOR (founder audit 2026-09-03 — "concise, natural", hims/ro
   never go below ~11px on a phone). A 375px sweep found 17–34 elements
   per page under 11px: ingredient captions (.mol 10px), safety links
   (.nv-isi 10.5), badge chips (9.5), reference sources (10.5), stage pills
   (10.5). Nothing decorative drops below 11px; readable secondary text
   sits at 11.5–12px. Same faces, same colours — just legible.
   ═══════════════════════════════════════════════════════════════════ */
  .sh4-rail .sh4-card .chips > *,
  .sh4-rail .sh4-card .visual .gl-tag,
  .aud, .fx-aud, .flag, .gl-tag, .badge, .hp-aud { font-size: 11px !important; letter-spacing: .3px !important; }
  .sh4-card .visual .mol, .mol { font-size: 11px !important; }
  .sh4-rail .sh4-card .foot .isi a, .nv-isi, .isi a { font-size: 11.5px !important; }
  .ref-source, .rcy-pill, .rs-pill, .ign-pill, .rs-feel span, .sym-actives span, .sym-actives li,
  .stat small, .sh4-tryp .stat small { font-size: 11.5px !important; }
  .dc-chip b, .dc-chip--big b, small, .why, .form { font-size: 12px !important; }
  .ev-head span, .ev-head b, .ev-head small, .pharm-k, .ev-limit-k, .off-flag-k,
  .orb-tags span, .orb-tags b, .mm-tag, .tag, .bmi-scale-labels span, .scale-ticks span,
  .nm-sticky__btn small { font-size: 11px !important; }
  /* Page-family badges, eyebrows and keys found by the 375px sweep (all 9–10.5px) */
  .sh4-rail .sh4-card .visual .mol,
  .proto-badge, .rp-chip, .rp-bubble-who,
  .mwl-badge, .msk-eyebrow, .mhr-route, .msp-key, .men-badge, .nv-pick,
  .nvc-flag, .sw-fact b, .sl-tick b, .sw-tag, .nvc-pick, .mb-tag,
  .fx-engine li span, .fc-eyebrow, .sym-if, .sym-picker-q, .sym-flag,
  .hp-fact b, .hp-diff b, .dif-flag, .off-picker-l, .pt-sub, .step-label,
  .mtx-flag, .sk-eyebrow, .sw-pick, .sl-eyebrow { font-size: 11px !important; }
  .stack-card .cat, .stx-fn { font-size: 11.5px !important; }

  /* ── Wave 5c: the last 25, almost all bare tags that a class-based
     selector could not reach on the first two sweeps ───────────────── */
  /* Homepage email-consent line — an inline style="font-size:10px" (one
     element sitewide), so it needs the attribute selector to be reached. */
  p[style*="font-size:10px"] { font-size: 11.5px !important; }
  /* Science page: superscript reference links */
  .ev-ref, .ev-ref a { font-size: 11px !important; }
  /* Bare <b> inside a paragraph: drift ingredient names, reclaim stage
     labels (§9 already raised .rs-feel span but not its <b>) */
  .dr-cols p b, .rs-feel b { font-size: 11px !important; }
  /* Reclaim: flex-dose label, and the titration diagram's in-SVG band
     labels — 10.5 -> 11px, checked against the ramp's fixed geometry */
  .rc-top .lab { font-size: 11px !important; }
  .ramp-visual svg text { font-size: 11px !important; }
  /* Glow: the inset skin figure's caption pill, 7.5px under its own
     container query — the smallest type left on the site */
  .gl-ext figcaption { font-size: 11px !important; }
  /* Store availability pill, Apex exclusivity flag, Rewind science link */
  .product-card .info .status, .mpb-flag, .snac-cta { font-size: 11px !important; }
  /* Burn structure-and-function footnote — readable, not decorative */
  .bn-fn { font-size: 11.5px !important; }

  /* ═══════════════════════════════════════════════════════════════════
     10. TOUCH TARGETS (audit 2026-09-08). A 375px sweep found 17-31
     controls per page under the 44px minimum every touch guideline uses
     — including the Important Safety Information link at 17px tall and
     the "Get started" button on every protocol card at 36px. Hit areas
     grow; type, colour and copy do not move.

     Deliberately NOT included: links inside running prose. Padding a
     mid-sentence link out to 44px breaks the paragraph it sits in, and
     no guideline asks for it. Footer link columns are also left alone —
     they are a separate layout question, flagged rather than guessed at.
     ═══════════════════════════════════════════════════════════════════ */
  .sh4-card .foot .b,
  .product-card .info .actions a,
  .product-card .info .actions button,
  .mtx-go, .mtx-altgo, .mp-go, .mp-alt, .ygo, .snac-cta, .rail-more,
  .store-filter .chip, .gx-filter button, .sym-chip, .cat-btn,
  .mh-protolink, .wh-protolink {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  /* Full-width card CTAs stay full width once they become flex items */
  .sh4-card .foot .b,
  .product-card .info .actions a,
  .product-card .info .actions button,
  .mtx-go, .mtx-altgo { width: 100% !important; }

  /* The safety link is the one that matters most: it was 17px tall and
     is the link a regulator expects a patient to be able to hit. */
  .nv-isi {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }

  /* Chips sit in a row — give them breathing room without a second line */
  .store-filter .chip, .gx-filter button, .sym-chip {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ═══════════════════════════════════════════════════════════════════
     11. THE FLOATING PROTOCOL CTA has to stop covering things.
     a.sh4-sticky is position:fixed at bottom:26px on every protocol page,
     so it permanently owns the last ~70px of the viewport. At the foot of
     the page there is nothing left to scroll, and what it lands on is the
     Important Safety Information link on the bottom card. Reserve the
     space it occupies so every link stays reachable.
     ═══════════════════════════════════════════════════════════════════ */
  body:has(.sh4-sticky) { padding-bottom: 96px; }
  body.nmc-sticky { padding-bottom: 96px; }
  /* The chat bubble sits above the pill rather than on it */
  body:has(.sh4-sticky) .float-chat { bottom: 100px !important; }
  body.nmc-sticky .float-chat { bottom: 100px !important; }
  body:has(.sh4-sticky) .float-chat-tooltip { display: none !important; }
  body.nmc-sticky .float-chat-tooltip { display: none !important; }

  /* ═══════════════════════════════════════════════════════════════════
     12. THE OVERFLOW THAT WAS HIDING BEHIND body{overflow-x:hidden}
     With <body> no longer clamping scrollWidth, a detector that measures
     element right edges (and ignores anything inside a real horizontal
     scroller) finds what was always there. Eight elements, all small,
     all the same cause: a flex/grid child at min-width:auto that cannot
     shrink below its content.
     ═══════════════════════════════════════════════════════════════════ */
  .mmt-info, .mmt-go, .mmt-isi,
  .msx-info, .msx-pr,
  .trt-col, .trt-matrix, .sh4-tryp .stat,
  .wl-inc-art {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Full-bleed background video sized to its own intrinsic width */
  .dif-band .dif-media, video.dif-media {
    max-width: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  /* "Which one fits me?" carried 26px of side padding inside a narrow row */
  .shd-band-ctas { flex-wrap: wrap !important; }
  .shd-band-ctas > a { max-width: 100% !important; box-sizing: border-box !important; }

  /* ═══════════════════════════════════════════════════════════════════
     13. SECOND-PASS AUDIT (2026-09-08). Measured with every collapsible
     section OPEN and in landscape — the two states the first sweep never
     looked at, which is why these survived it.
     ═══════════════════════════════════════════════════════════════════ */

  /* --- type floor, the open-accordion and landscape hold-outs --- */
  .mwt-head span, .mhr-soon b, .mmt-job, .msp-ask span, .men-note b,
  .maa-head span, .maa-when b, .en-kick, .en-spine-cap, .ag-note-copy b,
  .snac-note b, .cr-cap, .bq-cap, .dip-chip,
  svg text, svg g text { font-size: 11px !important; }

  /* --- tap targets: the near-misses, 1-2px short of 44 --- */
  .mh-chips a, .wh-chips a, .sym-act a,
  .wsk-tab, .nvt-tab, .msx-go, .men-go, .mmt-go, .fx-filter button,
  .dc-go, .rc-cta, .nav-login {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  /* the earnings slider was a 16px-tall drag target */
  input[type="range"] { height: 44px !important; }

  /* --- standalone links that sit on their own line --- */
  .breadcrumb a, nav.nm-shrink-on-scroll > a, .ribbon a, .pk-back a,
  .proto-intro-link a, .ag-note-isi, .topbar a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }

  /* --- links INSIDE running prose keep their place in the sentence.
     Padding plus an equal negative margin grows the hit area without
     moving a single glyph, which is the only safe way to do this to a
     footnote marker or an inline email address. --- */
  .ev-ref a, p > a[href^="mailto:"], li > a[href^="mailto:"] {
    padding: 15px 10px !important;
    margin: -15px -10px !important;
    position: relative;
  }

  /* --- the consent banner took 33% of a 320x568 screen (189px), and it is
     fixed, so it was sitting on real CTAs: "Join Nuvari+", "See the
     science", the store product tiles. Tighter frame, and its own two
     buttons brought up to 44px — they were 36px and are the only way to
     dismiss it. The notice text is NOT truncated: consent copy stays whole. --- */
  #nv-consent-banner { padding: 10px 14px !important; }
  #nv-consent-banner .nv-cb-text { font-size: 12.5px !important; line-height: 1.4 !important; }
  #nv-consent-banner .nv-cb-btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ═══════════════════════════════════════════════════════════════════
     14. THE THREE TILES AT THE TOP OF EVERY PROTOCOL PAGE
     The page ships a 3-up triptych and, below 880px, drops to 1fr 1fr
     and hides the third tile outright. On a 375px phone that leaves two
     126px-wide boxes carrying overlay text laid out for a ~400px desktop
     tile — so the headline inside tile 2 ("Testosterone made by you") was
     clipped by the tile's own overflow:hidden, tile 1's caption ran out
     of its rounded box, and the third tile did not exist at all.

     A snap rail instead: all three tiles are back, each wide enough for
     its own text, and the row is the same height it was — so this costs
     nothing in page length, which is the other complaint.
     ═══════════════════════════════════════════════════════════════════ */
  .sh4-tryp {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 18px;
    padding-left: 18px !important;
    padding-right: 18px !important;
    scrollbar-width: none;
  }
  .sh4-tryp::-webkit-scrollbar { display: none; }
  .sh4-tryp > .t {
    flex: 0 0 72% !important;
    max-width: 300px !important;
    scroll-snap-align: start;
  }
  /* the third tile is the whole point of a triptych — put it back */
  .sh4-tryp > .t.t3 { display: block !important; }

  /* Overlay type was sized for a 400px tile. Fit it to the real width and
     let it wrap instead of running under the tile's clip. */
  .sh4-tryp .t .stat,
  .sh4-tryp .t .lab,
  .sh4-tryp .t .badge {
    max-width: calc(100% - 28px) !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }
  .sh4-tryp .t .stat { font-size: 14px !important; line-height: 1.25 !important; padding: 9px 12px !important; }
  .sh4-tryp .t .lab  { font-size: 14px !important; line-height: 1.25 !important; }
  .sh4-tryp .t .badge { font-size: 12px !important; padding: 6px 12px !important; }

  /* Restoring the third tile surfaced type that had never been measured,
     because display:none elements are not in any audit. Same 11px floor as
     the rest of the site, and the inset figure's caption wraps rather than
     clipping "Fine lines" to "Fine line...". */
  .sh4-tryp .rl-num,
  .sh4-tryp .rl-lab i,
  .sh4-tryp .rl-cap span,
  .sh4-tryp .gl-head h3 em,
  .sh4-tryp em,
  .sh4-tryp .t3 span,
  .sh4-tryp .t3 i { font-size: 11px !important; }
  .sh4-tryp .gl-ext figcaption {
    white-space: normal !important;
    line-height: 1.2 !important;
    font-size: 11px !important;
  }

  /* Wave-8 follow-up (Jarvis, 2026-09-08): the "Chewed, not shot" figure's two
     callout notes were drawn for a ~400px tile — at 198px they overprint each
     other ("Tirzepatide" × "Semaglutide" measured overlapping by ~100px). Phones
     keep the headline, the CTA and the pill image; the two caption notes and their
     leader lines hide. Nothing is added — the same facts sit on the lineup cards. */
  .sh4-tryp .t-snac .snac-note,
  .sh4-tryp .t-snac .snac-line { display: none !important; }
  /* Same class of defect on desire: the Epiq Chew "what's inside" inline SVG
     (viewBox 300x200) is squeezed to ~166x46px in the 198px tile, so its callout
     text renders ~3.5px tall — an unreadable smudge. Phones keep the badge, the
     headline and the "Epiq Chew" label; the diagram hides. The actives it names
     (tadalafil, vardenafil, D3 + K2) are on the lineup card below. */
  /* The diagram was hidden back when these tiles were 126px wide and 2-up.
     They are full-width now (294px), and .sh4-tryp .t is aspect-locked at
     4/4.3 — so hiding it just left a 316px pink box with a hole in the
     middle. At this width the 300x200 figure reads fine; show it again. */
  .sh4-tryp .t.ds-illo .ds-illo-fig { display: flex !important; }
  /* The 26px top padding here used to put the badge on top of the
     headline. desire.html:167 pins .badge at top:16px and it is 30px
     tall, so the page reserves 56-60px of top padding to clear it;
     cutting that to 26px painted "Beyond the standard pill" straight
     over "Nothing to swallow." Keep the trimmed sides and bottom,
     give the badge its clearance back. */
  .sh4-tryp .t.ds-illo { justify-content: flex-start !important; padding: 56px 20px 24px !important; }

  /* ═══════════════════════════════════════════════════════
     13. THE LINEUP CARD IS THE BUTTON (founder pick "A", 2026-09-08).
     On a phone the card's own navy "Get started" pill and the floating
     "Begin the PROTOCOL" pill sat in one screen and competed, and the
     floating one hovered over the next heading. Now the price row wears
     the same teal arrow chip the homepage goal tiles use, the whole card
     is the tap target, and the floating pill is gone below 820px.
     The card's link is KEPT (href, data-cta-name tracking, keyboard
     focus) — it stretches invisibly over the card; the safety link sits
     above it. Cards also stop reserving desktop height, which closes the
     white band between the price and the photo. Desktop is untouched.
     The chat bubble goes back to its own phone offset (80px, see the
     per-page @media(max-width:768px) rule) now that nothing sits under it.
     ═══════════════════════════════════════════════════════ */
  .sh4-sticky { display: none !important; }
  body:has(.sh4-sticky) { padding-bottom: 0 !important; }
  body.nmc-sticky { padding-bottom: 0 !important; }
  body:has(.sh4-sticky) .float-chat { bottom: 80px !important; }
  body.nmc-sticky .float-chat { bottom: 80px !important; }

  /* desire's two-card "Always ready" rail is justify-content:center on
     desktop (.sh4-rail--daily). Once the row overflows a phone, centring
     parks the first card 31px off the left edge where no swipe can reach
     it (identical on production). Rails start at the gutter on phones. */
  .sh4-rail { justify-content: flex-start !important; }
  /* The merchandising flag ("OUR STRONGEST", "NEEDLE-FREE", …) carries
     margin-left:auto so it sits at the far right of the wide desktop chip
     row. On a phone the row wraps, the flag drops to its own line and the
     auto margin shoves it against the right edge — it read as misplaced.
     Left-aligned under the chips, in line with the title. */
  .sh4-rail .sh4-card .chips .flag { margin-left: 0 !important; }
  .sh4-rail .sh4-card { min-height: 0 !important; position: relative !important; }
  .sh4-rail .sh4-card .head { min-height: 0 !important; flex: 0 0 auto !important; }
  /* The photo absorbs any height difference between neighbouring cards
     (object-fit: cover), so the slack never reappears as a white band —
     not above the photo, not between the photo and the safety link. */
  .sh4-rail .sh4-card .visual {
    margin: 14px 10px 0 !important;
    height: auto !important;
    min-height: 180px !important;
    flex: 1 1 auto !important;
  }
  .sh4-rail .sh4-card .head .pr { position: relative !important; padding-right: 48px !important; }
  .sh4-rail .sh4-card .head .pr::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #0E7C86 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  }
  .sh4-rail .sh4-card .foot { padding: 8px 12px 13px !important; }
  .sh4-rail .sh4-card .foot .b {
    position: absolute !important;
    inset: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    border-radius: 26px !important;
    z-index: 1 !important;
  }
  .sh4-rail .sh4-card .foot .isi { position: relative !important; z-index: 2 !important; margin-top: 0 !important; }
}

/* =====================================================================
   VERY SMALL PHONES (iPhone SE and friends, <=359px)
   ---------------------------------------------------------------------
   The two-up protocol lineup is the right call from 375px up. Below it
   the column measures 83px of text, and the drug names do not fit:
   "Semaglutide" needs 105px at the card's 17px title, so it was breaking
   mid-word as "Semagluti / de". One column, and the names read.
   The store catalogue is left two-up — its titles ("The IGNITE Protocol")
   wrap on their own word boundaries and were measured clean at 320px.
   ===================================================================== */
@media (max-width: 374px) {
  .sh4-rail > .sh4-card { flex-basis: 84% !important; }
  .sh4-rail .sh4-card .head h3 { font-size: 20px !important; }
  .sh4-rail .sh4-card .visual { height: 200px !important; }
  /* One per row means the card can breathe again */
  .sh4-rail .sh4-card .head { padding: 16px 16px !important; }
  .sh4-rail .sh4-card .foot { padding: 14px 16px !important; }

  /* Two hold-outs measured on glow at 320px:
     - the inset figure's caption pill is nowrap+ellipsis and clipped
       "Fine lines" to "Fine line..." in a 67px box that needed 72px;
     - the tryptich deck is a fluid clamp() that falls to 10.55px here,
       under the 11px floor the rest of the site now keeps. */
  .gl-ext figcaption { white-space: normal !important; line-height: 1.2 !important; }
  .sh4-tryp em, .sh4-tryp .t em { font-size: 11px !important; }
}

/* =====================================================================
   NO SIDEWAYS SCROLLING ON PHONES — founder, 2026-09-29
   "These images shouldn't be a scroll to the right and same with the
   products as well... think of something creative to do it."

   Two horizontal scrollers were hiding content behind a swipe nobody
   performs: the hero triptych (3 tiles, 326px visible of 686px) and the
   product lineup (up to 6 cards, 326px visible of 1,433px). On a phone a
   sideways rail reads as "the page ends here" — the 2nd and 3rd tiles and
   every card past the first were effectively invisible.

   The earlier swipe rail was a deliberate trade to stop crown's lineup
   being a 2,379px wall (see the .sh4-rail note above). That trade is now
   off, so the height has to come out of the CARDS instead of the layout:
   both sections go to a 2-up mosaic, and the cards get a compact phone
   skin (shorter image box, tighter type) so 6 of them still fit in about
   a third of the old stacked height.

   2-up is also what /protocols/store already does on phones, so this is
   the design language the site had, not a new one.
   ===================================================================== */
@media (max-width: 820px) {

  /* ---- Hero triptych: mosaic, not a rail ------------------------------
     Tile 1 carries the headline, the CTA and the annotated figure, so it
     takes the full width. Tiles 2 and 3 are a photo and a video loop that
     read fine at half width, so they pair up underneath. All three are on
     screen at once. */
  .sh4-tryp {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }
  .sh4-tryp > .t { flex: none !important; width: auto !important; min-width: 0 !important; scroll-snap-align: none !important; }
  /* One tile per row. A 2-up mosaic was tried first and abandoned: these
     tiles are not interchangeable across the ten pages — shed's first tile
     is flow content, glow's is a photo carrying three absolutely-positioned
     overlays, rewind's is an annotated figure — and at ~165px the overlays
     collided with each other. Full width is 358px, within touching distance
     of the ~400px desktop tile they were all composed for, so every tile
     renders as designed. */
  /* Tiles 2 and 3 are photography with a single overlay pill — they read
     better short and wide. Tile 1 is the explainer on every page (the
     annotated figure, the molecule diagram, the science CTA) and its
     children are absolutely positioned for the tall desktop tile, so it
     keeps its native aspect. Forcing it to 16/10 made glow's bullet pills
     land on top of its own headline. */
  .sh4-tryp > .t:nth-child(n + 2) { aspect-ratio: 16 / 10 !important; }

  /* ---- Product lineup: 2-up grid, not a rail -------------------------- */
  .sh4-rail {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .sh4-rail > .sh4-card {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    grid-column: auto !important;
    scroll-snap-align: none !important;
  }
  /* The swipe affordance under the rail has nothing left to scroll. */
  .sh4-rail + .rail-more, .rail-more { display: none !important; }

  /* Compact phone skin for a ~165px card. Every number here is the height
     that stops 6 cards becoming a wall again. */
  /* Keep the grow-to-absorb-slack behaviour from the rule above — that is
     what keeps two cards in a row even — and only lower its floor, because
     a 165px-wide card does not need a 180px-tall photo. Setting a fixed
     height here instead would reintroduce the white band it was added to
     remove. */
  .sh4-rail .sh4-card .visual { min-height: 120px !important; margin: 10px 8px 0 !important; }
  .sh4-rail .sh4-card .visual:not(.photo) img { max-height: 76% !important; max-width: 84% !important; }
  .sh4-rail .sh4-card .head { padding: 10px 10px 6px !important; min-height: 0 !important; }
  .sh4-rail .sh4-card .head h3 { font-size: 14.5px !important; line-height: 1.25 !important; }
  .sh4-rail .sh4-card .head .actives,
  .sh4-rail .sh4-card .head .form,
  .sh4-rail .sh4-card .head .why { font-size: 11.5px !important; line-height: 1.35 !important; }
  /* The price reserves 48px on its right for the round arrow button. In a
     ~165px card that leaves too little room and "$279/mo" broke after the
     "m", printing a lone "o" on the next line. Smaller arrow, smaller
     reserve, and the amount itself never wraps. */
  .sh4-rail .sh4-card .head .pr {
    font-size: 17px !important; margin-top: 10px !important;
    padding-right: 38px !important; white-space: nowrap !important;
  }
  .sh4-rail .sh4-card .head .pr small { font-size: 10.5px !important; white-space: normal !important; }
  .sh4-rail .sh4-card .head .pr::after { width: 30px !important; height: 30px !important; background-size: 14px 14px !important; }
  .sh4-rail .sh4-card .head .labsreq { font-size: 11.5px !important; margin-bottom: 7px !important; }
  /* At ~165px wide a four-part ingredient list ("Azelaic acid + Hydrocortisone
     + Hydroquinone + Kojic acid") runs four lines and the description another
     four, which is what made a six-card lineup 1,600px. Clamp both; the full
     text is on the product page one tap away. */
  .sh4-rail .sh4-card .head .actives,
  .sh4-rail .sh4-card .head .nmc-actives {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  .sh4-rail .sh4-card .head .why {
    display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  .sh4-rail .sh4-card .head h3 { -webkit-line-clamp: 2; }
  .sh4-rail .sh4-card .chips { gap: 4px !important; margin-bottom: 7px !important; min-height: 0 !important; }
  .sh4-rail .sh4-card .chips > * { font-size: 9.5px !important; height: 19px !important; padding: 0 6px !important; }
  .sh4-rail .sh4-card .foot { padding: 8px 10px 10px !important; }
  .sh4-rail .sh4-card .foot .b { font-size: 11.5px !important; padding: 9px 6px !important; }
  .sh4-rail .sh4-card .foot .isi a { font-size: 9.5px !important; }

  /* Desire's "Always ready" pair is already a 2-up grid on desktop; keep it
     from inheriting a third column's worth of gap here. */
  .sh4-rail--daily { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* An odd card count leaves a hole in a 2-up grid. Let the last card span
   both columns rather than sit beside empty space. */
@media (max-width: 820px) {
  .sh4-rail > .sh4-card:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
  .sh4-rail > .sh4-card:last-child:nth-child(odd) .visual { min-height: 170px !important; }
}

/* =====================================================================
   FULL-BLEED BANDS: GET THE FACE OUT FROM BEHIND THE COPY — 2026-09-29
   "Same with this area as well. Have her face is showing on mobile."

   The band is built for desktop: the subject sits off to one side and the
   centred copy clears her. A phone crops to the middle of the photo, so
   the headline, the paragraph and both buttons landed directly on her
   face — on shed she was unrecognisable behind "Needle or No Needle."

   Fix is compositional, not a crop tweak: the copy moves to the BOTTOM of
   the band and sits on its own scrim, leaving the upper two-thirds — where
   a portrait's head always is — completely clear. The band keeps its
   height, its images and its words.
   ===================================================================== */
@media (max-width: 820px) {
  .shd-band {
    justify-content: flex-end !important;
    padding: 0 20px 30px !important;
    min-height: 78vh !important;
  }
  /* The desktop mask fades the top of the photo out, which on a phone
     erased the head entirely. Keep the photo whole and let the new scrim
     do the legibility work. */
  .shd-band .shd-band-bg {
    object-position: 50% 14% !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  /* The three slides are not composed alike: slide 1 is centred, but the
     subjects in slides 2 and 3 stand to the RIGHT of frame, so a centre
     crop cut their faces off at the edge. Anchored per image (by src, so
     reordering the slides cannot silently re-break this). */
  .shd-band .shd-band-bg[src*="shed-slide2"] { object-position: 74% 12% !important; }
  .shd-band .shd-band-bg[src*="shed-slide3"] { object-position: 70% 14% !important; }
  .shd-band::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 58%;
    z-index: 1;
    background: linear-gradient(180deg,
      rgba(239, 230, 212, 0) 0%,
      rgba(239, 230, 212, .55) 32%,
      rgba(239, 230, 212, .88) 58%,
      rgba(239, 230, 212, .97) 100%);
    pointer-events: none;
  }
  .shd-band h2, .shd-band p, .shd-band-ctas { position: relative; z-index: 2; }
  .shd-band h2 { font-size: 30px !important; margin-bottom: 10px !important; }
  .shd-band p { font-size: 14.5px !important; line-height: 1.5 !important; margin-bottom: 18px !important; }
  /* Two pills side by side overflow a 390px screen once the labels are
     real words; stack them and let each be a full-width tap target. */
  .shd-band-ctas { flex-direction: column !important; width: 100% !important; max-width: 320px !important; gap: 9px !important; white-space: normal !important; }
  .shd-band-ctas .go, .shd-band-ctas .alt { display: block !important; text-align: center !important; padding: 14px 20px !important; }
  /* The secondary pill is a translucent scrim colour built to sit on a dark
     desktop photo. On the light cream scrim it turned into grey-on-cream.
     Solid navy on the phone, which is the site's own button colour. */
  .shd-band-ctas .alt { background: #12283E !important; backdrop-filter: none !important; color: #fff !important; }
}

/* ---- Triptych: the two tiles that need a hand ------------------------
   Everything else renders as designed at full width. Two exceptions:
   .t-snac is flow content (headline, CTA, figure) sized by a flex spacer
   for a tall desktop tile, so a fixed aspect leaves a dead gap under the
   CTA; and the orbit tile's four tag pills are every product in the lineup
   immediately below it, so they are repetition on a phone. */
@media (max-width: 820px) {
  .sh4-tryp > .t.t-snac { aspect-ratio: auto !important; padding: 18px 16px 16px !important; }
  .sh4-tryp > .t.t-snac .snac-fig { flex: 0 0 auto !important; margin: 8px -10px 0 !important; }
  .sh4-tryp > .t.t-snac .snac-fig img { max-height: 200px !important; object-fit: contain !important; }
  /* The four tag pills were hidden here as de-duplication — they name the
     same products as the lineup directly below. Founder asked for them back
     on 2026-10-08: they label what the clip is showing, and the clip is
     abstract without them. Kept on one row; see section 61 for the sizing
     that makes four fit a 320px screen. */
}

/* The <=374px block above was written for the one-card-wide swipe rail:
   bigger title, 200px photo, roomier padding, "one per row means the card
   can breathe again". With the 2-up grid those sizes fight the column and
   made glow 1,906px at 360px. Restate the compact sizes below it. */
@media (max-width: 374px) {
  .sh4-rail > .sh4-card { flex-basis: auto !important; }
  .sh4-rail .sh4-card .head h3 { font-size: 13.5px !important; }
  .sh4-rail .sh4-card .visual { height: auto !important; min-height: 104px !important; }
  .sh4-rail .sh4-card .head { padding: 9px 9px 6px !important; }
  .sh4-rail .sh4-card .foot { padding: 8px 9px 10px !important; }
  .sh4-rail .sh4-card .head .pr { font-size: 15.5px !important; padding-right: 34px !important; }
  .sh4-rail .sh4-card .head .pr::after { width: 26px !important; height: 26px !important; background-size: 12px 12px !important; }
  .sh4-rail > .sh4-card:last-child:nth-child(odd) .visual { min-height: 150px !important; }


}

@media (max-width: 820px) {
  /* ═══════════════════════════════════════════════════════════════════
     16. THE 11px FLOOR, RE-ASSERTED ON THE LINEUP CARDS
     The compact 2-up grid rewrite shrank the card furniture to fit six
     products: chips to 9.5px, the price sub-line to 10.5px, and the
     Important Safety Information link to 9.5px. A 375px sweep found 155
     elements under the floor across the ten protocol pages — and an ISI
     link is the one piece of type on this site that a regulator expects a
     patient to be able to read.
     Back to 11px. The height is bought back from padding and gaps rather
     than from type size, so the cards stay compact.
     ═══════════════════════════════════════════════════════════════════ */
  .sh4-rail .sh4-card .chips > * {
    font-size: 11px !important;
    height: 21px !important;
    padding: 0 7px !important;
    letter-spacing: 0 !important;
  }
  .sh4-rail .sh4-card .chips { gap: 4px !important; margin-bottom: 6px !important; }
  .sh4-rail .sh4-card .head .pr small { font-size: 11px !important; }
  .sh4-rail .sh4-card .foot .isi a,
  .sh4-rail .sh4-card .foot .isi a.nv-isi,
  .sh4-card .isi a.nv-isi { font-size: 11px !important; }
  /* paid for out of spacing, not type */
  .sh4-rail .sh4-card .head { padding: 9px 10px 5px !important; }
  .sh4-rail .sh4-card .foot { padding: 7px 10px 9px !important; }
  .sh4-rail .sh4-card .visual { margin-top: 8px !important; }
}

/* =====================================================================
   17. LEAD WITH A CHOOSER, AND MAKE THE PICK OBVIOUS
   (founder, 2026-10-05)

   The lineup stopped scrolling sideways on 2026-09-29, so what is left
   on a six-product page is choice paralysis. Two answers:

   a) A chooser above the grid. Its question and its options are DERIVED
      from the cards' own text — the delivery line ("Once weekly ·
      self-injection") or the audience chip ("Women 45+") — so nothing
      here is invented copy and a new product sorts itself. Default is
      "All": it narrows, it never hides anything on arrival.

   b) The card the page already marks .sh4-card--pref goes first and
      carries "Our pick" — the site's own existing wording (.nv-pick on
      mens-health). Deliberately NOT "most picked": that is a claim about
      what customers do, and with the store not open there is no data
      behind it.
   ===================================================================== */
@media (max-width: 820px) {

  .nmc-choose { margin: 0 0 14px; padding: 0 16px; }
  .nmc-choose__q {
    margin: 0 0 9px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #0A1628;
  }
  .nmc-choose__row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }
  .nmc-choose__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 99px;
    border: 1.5px solid rgba(10, 22, 40, 0.16);
    background: #fff;
    color: #0A1628;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  }
  .nmc-choose__n {
    font-size: 11px;
    font-weight: 700;
    color: #5A6B7D;
    background: rgba(10, 22, 40, 0.07);
    border-radius: 99px;
    padding: 2px 7px;
  }
  .nmc-choose__chip[aria-pressed="true"] {
    background: #0A1628;
    border-color: #0A1628;
    color: #fff;
  }
  .nmc-choose__chip[aria-pressed="true"] .nmc-choose__n {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
  }
  .nmc-choose__chip:active { transform: scale(0.98); }

  /* a filtered-out card is removed from the grid, not just dimmed */
  .sh4-rail > .sh4-card[hidden] { display: none !important; }

  /* --- the pick --- */
  .sh4-rail > .sh4-card.nmc-is-pick { order: -1; }
  .nmc-pick {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-bottom: 7px;
    padding: 4px 10px;
    border-radius: 99px;
    background: #0E7C86;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
  }
  .sh4-rail > .sh4-card.nmc-is-pick {
    box-shadow: 0 0 0 2px #0E7C86, 0 10px 26px rgba(14, 124, 134, 0.18);
  }
}

/* =====================================================================
   18. AUDIT PASS, 2026-10-05 — three defects confirmed by measurement.
   (A wider sweep also flagged ~177 "anchor lands under the sticky nav"
   and a pile of contrast hits on brand display type. Both were checked
   by hand and left alone: the anchors already carry
   scroll-margin-top:146px and land correctly — the detector was picking
   up a full-viewport fixed overlay as the header — and the teal display
   headings are a deliberate brand treatment, not something to repaint
   from here.)
   ===================================================================== */
@media (max-width: 820px) {

  /* 1. THE COMPOUNDING DISCLAIMER WAS THE LEAST READABLE TEXT ON THE PAGE.
     rgb(134,150,168) on the cream body is 2.86:1 at 11.5px, against the
     4.5:1 that normal-size text needs. This is required disclosure — the
     FDA-approval and illustrative-imagery notice — so it is the one piece
     of small print that has to be legible. Same slate family, darker. */
  .sh4-fda,
  .sh4-fda strong,
  .sh4-plansup { color: #647282 !important; }

  /* 2. THE GOAL JUMP-NAV CHIPS SAT 2px APART.
     Each chip clears 44px of height, but two pixels between adjacent
     links in a scrolling row is a mis-tap waiting to happen. */
  .mh-chips, .wh-chips { gap: 8px !important; }
  .mh-chips a, .wh-chips a { margin-right: 0 !important; }

  /* 3. THE CONSENT BANNER COULD SIT ON A CTA WITH NOTHING LEFT TO SCROLL.
     It is fixed to the bottom and covers roughly 170px. At the foot of a
     page that is a button you simply cannot reach. Reserve its space
     while it is on screen; consent-banner.js removes the element on
     dismiss, so the padding goes with it. */
  /* §6 sets `body { padding-bottom: 0 !important }` to release the space the
     old pinned-CTA bars reserved. This is a different thing — a temporary
     banner, removed from the DOM on dismiss, not a pinned CTA — so it needs
     to out-rank that rule without resurrecting any bar. */
  body:has(#nv-consent-banner) { padding-bottom: 180px !important; }
  body.nmc-consent { padding-bottom: 180px !important; }
}

/* =====================================================================
   19. NO PLAY BUTTON ON THE AUTOPLAYING VIDEOS (founder, 2026-10-05)

   iOS Safari paints its own big "start playback" control over any inline
   <video> that is not currently playing. That glyph is what shows up when
   the OS refuses autoplay — Low Power Mode is the common one, but it also
   happens for the first frames while a late-assigned src is still loading.
   assets/lazy-video.js already retries on the first touch anywhere, so the
   clip does start; the glyph is what the founder sees in the meantime.

   ::-webkit-media-controls-start-playback-button is that control. Hidden,
   a refused video shows its poster — the correct fallback — instead of a
   button that implies the user has to do something.

   Scoped to autoplay + muted loops, which are decorative. Any video a
   visitor is meant to start themselves keeps its controls.
   ===================================================================== */
@media (max-width: 820px) {
  /* NOTE: this block's element-level `pointer-events: none` has been
     removed. In Low Power Mode iOS deliberately refuses autoplay and
     shows the play button so the viewer can start the clip themselves —
     Apple will not let that be suppressed (WebKit #219889, WONTFIX).
     Killing pointer events on the element removed the one affordance
     left, so the video simply could not be started. Section 26a puts
     pointer-events on the pseudo-elements instead, which is the narrow
     version that was intended. */
  video[autoplay][muted]::-webkit-media-controls,
  video[autoplay][muted]::-webkit-media-controls-panel,
  video[autoplay][muted]::-webkit-media-controls-start-playback-button,
  video[autoplay][muted]::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
  }
}

/* =====================================================================
   20. THE BRAND TEAL, MADE READABLE (founder: "we need to fix this")

   Measured on the live pages, the teal family on cream/white:
     #00B4C6  rgb(0,180,198)   2.38–2.52:1   the bright brand teal
     #009DAE  rgb(0,157,174)   2.88–2.96:1
     #008B9C  rgb(0,139,156)   3.84:1        the "Log in" link
     #00808F  rgb(0,128,143)   4.43:1        just under the bar
   WCAG AA wants 4.5:1 for normal text and 3:1 for large (24px+, or 18.7px
   bold). Everything above fails at the size it is actually used.

   #0E7C86 is already in this palette — glow's figure caption and the form
   chips use it — and it measures 4.74:1 on the cream body and 5.03:1 on
   white. One teal, both backgrounds, still unmistakably the brand.

   TEXT ONLY. Teal fills and borders are untouched: white on #00B4C6 is
   4.0:1 and large-button text passes on its own.

   Mobile only, so desktop still carries the lighter teal and still fails
   there — that is a brand call, not something to decide from here.
   ===================================================================== */
@media (max-width: 820px) {
  /* NOT .proto-badge — it carries a per-category colour inline (pink for
     Sexual Health, slate for Most Popular). An earlier version of this
     rule repainted all of them teal. */
  .proto-card .tagline,
  .proto-card .card-cta,
  .nav-login .nav-login-cta,
  .ms .ms-num,
  .col-nuvari,
  .plan-from, .plan-from-inline,
  .nmc-acc__kicker,
  .hero h1 span[style*="--teal"], .hero h1 span[style*="color"],
  h2 span[style*="--teal"], h2 span[style*="color:var(--teal)"],
  a[style*="color:var(--teal)"],
  div[style*="color:var(--teal)"],
  span[style*="color:var(--teal)"],
  .faq-hero .tag, .hiw-hero .tag,
  .store-hero .eyebrow,
  .cat-nav .cat-btn.active,
  .cta-contact a,
  .sh4-tryp h3 em {
    color: #0E7C86 !important;
  }
  /* Large display teal only needs 3:1, and these sit on cream */
  /* REMOVED: `h2 span, .hero h1 span { color: #0E7C86 }`.
     A bare element-descendant selector with !important hit EVERY span in
     EVERY h2 site-wide and beat inline styles. Measured on the homepage:
     three headings with no inline colour at all were being repainted —
     "Real results.", "era starts here.", "all the benefits" — and on the
     navy band that took the gold from 11.6:1 down to 3.67:1. It made
     contrast worse on the pretext of fixing it. The attribute-scoped
     rule above already covers the headings that are actually teal. */
}

/* =====================================================================
   21. THE CATEGORY BADGES (founder: "we need to fix this")

   The homepage protocol cards carry a tinted pill per category — the text
   and the background are the same hue, which looks good and reads badly.
   Measured against each pill's own tint at 11px, where AA wants 4.5:1:

     Skin        #6BBFA0 on #E8F5F0   1.96:1
     Metabolic   #F59E0B on #FFF8E1   2.02:1
     Weight Loss #E67E22 on #FFF3E0   2.60:1
     Recovery    #7B8A5B on #EDF3E8   3.30:1
     Longevity   #059669 on #E8F8F0   3.43:1
     Sleep       #6B7FA0 on #E8EDF3   3.45:1
     Sexual Hlth #D63384 on #FFE4EC   3.76:1
     Most Pop.   #5B7B8A on #E3EEF3   3.83:1
     Hair        #8B6914 on #FFF3E0   4.64:1  (already passes — untouched)

   Each is darkened within its OWN hue until it clears 4.5:1 — the pill
   stays pink for Sexual Health, amber for Metabolic, green for Longevity.
   The tint behind it is not touched, so the cards look like themselves.
   ===================================================================== */
@media (max-width: 820px) {
  .proto-badge[style*="#5B7B8A"] { color: #526F7C !important; }  /* 3.83 -> 4.55 */
  .proto-badge[style*="#D63384"] { color: #BE2D75 !important; }  /* 3.76 -> 4.57 */
  .proto-badge[style*="#E67E22"] { color: #A85C19 !important; }  /* 2.60 -> 4.55 */
  .proto-badge[style*="#059669"] { color: #047F59 !important; }  /* 3.43 -> 4.54 */
  .proto-badge[style*="#F59E0B"] { color: #9D6507 !important; }  /* 2.02 -> 4.60 */
  .proto-badge[style*="#6BBFA0"] { color: #437865 !important; }  /* 1.96 -> 4.54 */
  .proto-badge[style*="#6B7FA0"] { color: #5B6C88 !important; }  /* 3.45 -> 4.52 */
  .proto-badge[style*="#7B8A5B"] { color: #66734C !important; }  /* 3.30 -> 4.53 */
  /* the one that uses the teal custom properties rather than a literal */
  .proto-badge[style*="--tealD"] { color: #0A5F68 !important; }
}

/* =====================================================================
   22. THE LAST THREE, each solved against its real background.
   ===================================================================== */
@media (max-width: 820px) {
  /* The Important Safety Information link is set inline to the bright
     brand teal on cream — 2.38:1 at 13px. This is the safety link; it is
     the last thing on the site that should be hard to read. */
  a[style*="#00B4C6"], a[style*="#00b4c6"] { color: #007E8B !important; }

  /* The comparison table's Nuvari column is teal TEXT on a teal FILL
     (#0E7C86 on #00B4C6) — 1.97:1. Darkening the teal cannot fix a
     same-hue pair; the navy ink the rest of the site uses gives 7.18:1. */
  th.col-nuvari, .col-nuvari th { color: #0A1628 !important; }

  /* shed's pull-quote sits on the warm sand panel (#EDE0C6), where
     #0E7C86 is 3.80:1. One step darker clears it at 5.55:1. */
  .sh4-tryp h3 em, .mol-merge h3 em { color: #0A5F68 !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   23. THREE FOUNDER FIXES — 2026-10-06
   Mobile only, as every rule in this file is. Desktop is untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* ---- 23a. The "how it works" rail: dots + a visible peek ----------
     The rail already snapped; nothing told you it could. Dots make the
     count visible at rest, mobile-concise.js advances it slowly, and a
     firmer peek of the next card does the rest. */
  .rp-cards { scroll-padding-left: 20px !important; }
  .rp-cards > .rp-card { flex-basis: 76vw !important; min-height: 360px !important; }
  .nmc-dots {
    display: flex !important; justify-content: center !important;
    gap: 7px !important; margin: 14px 0 2px !important;
  }
  .nmc-dots i {
    width: 7px !important; height: 7px !important; border-radius: 99px !important;
    background: rgba(10, 22, 40, .18) !important;
    transition: background .25s, width .25s !important;
  }
  .nmc-dots i.on { width: 20px !important; background: #0E7C86 !important; }

  /* ---- 23b. The Man Power band -------------------------------------
     mpb-band.webp is a 2000x1116 DESKTOP split: an empty navy field on
     the left for desktop copy, the model at ~72% x, a beige wall at the
     right edge, and four chips placed to read at desktop width. At
     phone width `cover` crops almost nothing, so the whole desktop
     composition arrived squeezed — dead navy, a beige sliver, chips
     floating with no order. That is the "out of order" look.

     Crop hard to the model instead. object-position pins the focal
     frame shows his head and shoulders, the wall he leans on, and the
     two chips that fall inside the crop whole. The other two are
     restated as real text by the JS below.

     The photo's navy is within a shade of the panel gradient under it,
     so the strip reads as one object rather than a photo sitting on a
     block.

     A transform was the wrong tool: a scaled element still only
     occupies its untransformed 208px of layout, so the zoomed photo
     painted ~95px above and below its own box and sat on top of the
     headline. Widen the element instead. At width 192% the image is
     laid out 749px wide inside a 390px band, so `cover` shows 52% of
     the frame and nothing overflows vertically. The negative margin
     and the width are both percentages of the same containing block,
     so the crop holds at every phone width.
        visible source x  46-98%   (head, the wall, both whole chips)
        visible source y   7-50%   (ends in the gap above 'Steady energy')
     The y figures were measured off a render, not guessed: the gap
     between the 'Balanced mood' and 'Steady energy' pills is only ~1.6%
     of frame height, so the band height sets where the cut lands.      */
  .mpb .mpb-bg {
    width: 192% !important;
    max-width: none !important;
    margin-left: -88.3% !important;
    /* NOT a fixed height. The horizontal crop is a percentage of the
       container, so it holds at every width — but `cover` scales with
       the container too, so against a PINNED height the visible slice
       of the frame shrank as the phone got wider: 66% of frame height
       at 320px down to 24% at 820px, which cut his face off at the
       eyes from 768px up and in landscape.
       An aspect-ratio makes the box grow with the width, so the window
       is the same slice of the photograph at every size:
         box      = 1.92W wide, 1.92W / 3.446 tall
         visible  = source x 46-98%, y 5-57%  — constant
       The 52% slice is the widest one that still clears the top of the
       "Steady energy" pill at 58.6%, and it is the only window that
       holds his whole face (12-46%) AND the whole "Balanced mood" pill
       (46-56%) at the same time. A shallower slice made the band only
       118px on a 320px phone.                                        */
    height: auto !important;
    aspect-ratio: 3.446 !important;
    object-fit: cover !important;
    object-position: 50% 10.4% !important;
    transform: none !important;
  }
  .nmc-mpb-chips {
    display: flex !important; flex-wrap: wrap !important;
    gap: 7px !important; margin: 0 0 22px !important;
  }
  .nmc-mpb-chips span {
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: .01em !important; color: #CFF7FC !important;
    background: rgba(0, 207, 227, .14) !important;
    border: 1px solid rgba(0, 207, 227, .42) !important;
    border-radius: 99px !important; padding: 6px 12px !important;
    line-height: 1.2 !important;
  }
  /* The band's own paragraph sat hard against the buttons; the chip row
     now carries that gap. */
  .mpb .mpb-copy p { margin-bottom: 16px !important; }

  /* ---- 23c. The runner stays on his poster frame --------------------
     Belt and braces for the JS: if the clip ever does get a frame up,
     the poster is what paints. */
  video[poster*="weight-loss-poster"] { object-position: center top !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   24. PRODUCT LINEUP → LIST ROWS  (founder decision, 2026-10-06)
   Mobile only. Desktop keeps the card grid exactly as authored.

   WHY THE OLD MOBILE CARD FAILED. .sh4-card stacks eight free-flowing
   blocks — chips, h3, actives, form, why, price, labs note, image,
   button, ISI. The chip row wraps to one, two or three lines depending
   on how many badges a product carries, and the name wraps to one, two
   or three. So on a 2-up grid NOTHING below the chips ever lined up:
   names at different heights, prices at different heights, and the
   photograph — which sits after the price in source order — landing
   wherever the text above it happened to end. Earlier waves of this
   file answered that by shrinking type to 9.5px and clamping the
   actives list to an ellipsis. That is patching, not designing.

   THE ROW. One product per line: a fixed 84px product thumbnail, the
   name, its form, and its price, with the real "Get started" anchor
   kept as a 44px circular affordance on the right. Every row is built
   from the same three fixed columns, so ragged alignment is no longer
   possible — a row cannot be taller than its own content, and its
   content is now four short lines.

   WHAT COMES OFF THE ROW, and where it went:
     .actives  the ingredient list — already repeated verbatim on the
               product page the row opens.
     .why      the pitch sentence — same.
   WHAT STAYS, deliberately:
     .labsreq  "Labs required to start" changes what you are buying.
     .isi      Important Safety Information is a required disclosure
               and stays a real, per-product link on every row.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* The rail was a horizontal flex scroller, then a 2-up grid. Now a
     plain single-column list. */
  .sh4-rail,
  [class*="sh4-rail"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .sh4-rail > .sh4-card,
  [class*="sh4-rail"] > .sh4-card {
    display: grid !important;
    /* Continuous, not stepped. A hard breakpoint that swapped
       84/44/12px for 64/40/10px took 28px of overhead out in one jump,
       so the TEXT COLUMN GOT WIDER AS THE PHONE GOT NARROWER — 162px at
       374 against 133px at 375. Names clipped on the wide side of the
       breakpoint (iPhone SE and mini are exactly 375). Scaling the
       thumbnail and the arrow with the viewport removes the inversion
       outright; both floors stay at or above the 40px touch minimum. */
    grid-template-columns:
      clamp(64px, 20vw, 84px) minmax(0, 1fr) clamp(44px, 11vw, 48px) !important;
    grid-template-areas: "img head cta" "isi isi isi" !important;
    align-items: center !important;
    column-gap: clamp(10px, 3vw, 12px) !important;
    row-gap: 0 !important;
    flex: none !important;
    width: auto !important;
    min-height: 0 !important;
    padding: clamp(11px, 3vw, 12px) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  /* The chooser hides non-matching cards with the [hidden] attribute.
     display:grid !important would beat the UA's [hidden]{display:none},
     so say it explicitly or filtering silently stops working. */
  .sh4-rail > .sh4-card[hidden],
  [class*="sh4-rail"] > .sh4-card[hidden] { display: none !important; }

  /* The unreleased card had its own three-column override from the list-row
     era, and that selector uses :has(), so it is (0,3,0) and outranks the
     (0,2,0) rule above. Left alone, crown's card kept a 64px first track
     and gave its text 32px of width — "COMING SOON" and "Pricing being
     finalized" both reported as clipped at every width. Two rules, not one
     list: :has() is unsupported on older Safari and an unsupported selector
     drops the whole rule it is in. */
  .sh4-rail > .sh4-card--soon,
  [class*="sh4-rail"] > .sh4-card--soon {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }
  .sh4-rail > .sh4-card:has(.b--soon),
  [class*="sh4-rail"] > .sh4-card:has(.b--soon) {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  /* Thumbnail ------------------------------------------------------ */
  .sh4-rail .sh4-card .visual {
    grid-area: img !important;
    width: clamp(64px, 20vw, 84px) !important;
    height: clamp(64px, 20vw, 84px) !important;
    min-height: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .sh4-rail .sh4-card .visual img {
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    object-fit: cover !important;
  }
  /* Molecule diagrams are line art on a tint — they need breathing
     room, not a crop. */
  .sh4-rail .sh4-card .visual:not(.photo) img {
    object-fit: contain !important;
    width: 84% !important; height: 84% !important;
  }

  /* Text column ---------------------------------------------------- */
  .sh4-rail .sh4-card .head {
    grid-area: head !important;
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    padding: 0 !important; margin: 0 !important;
    min-height: 0 !important; min-width: 0 !important;
  }
  .sh4-rail .sh4-card .head .actives,
  .sh4-rail .sh4-card .head .why { display: none !important; }

  /* One badge line. The pick marker leads; the product's own flag
     ("THE FULL STACK", "MOST VERSATILE") follows. RX and the audience
     chips are what the chooser above already filters on, so they are
     redundant noise in a row. */
  .sh4-rail .sh4-card .head .chips {
    display: flex !important; flex-wrap: nowrap !important;
    gap: 5px !important; margin: 0 0 1px !important;
    min-height: 0 !important; max-width: 100% !important;
    overflow: hidden !important;
  }
  .sh4-rail .sh4-card .head .chips .rx,
  .sh4-rail .sh4-card .head .chips .aud { display: none !important; }
  .sh4-rail .sh4-card .head .chips .flag {
    font-size: 9.5px !important; letter-spacing: .07em !important;
    height: 18px !important; padding: 0 8px !important;
    margin-left: 0 !important; white-space: nowrap !important;
  }
  .sh4-rail .sh4-card .head .chips:empty { display: none !important; }

  /* Three lines, not two: "Sildenafil + Tadalafil Combo ODT" needs a
     third line below ~389px, and clipping it drops the ODT designation
     that is the only thing separating it from desire's other variants.
     A clamp only costs height when the content actually reaches it. */
  .sh4-rail .sh4-card .head h3 {
    font-size: 15.5px !important; line-height: 1.22 !important;
    margin: 0 !important;
    display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden !important;
    overflow-wrap: break-word !important;
  }
  /* Two lines, not one: "Under the tongue \u00b7 on demand" clipped to
     "on de\u2026" on a single line, which looks like a bug. */
  .sh4-rail .sh4-card .head .form {
    font-size: 12px !important; line-height: 1.3 !important;
    margin: 0 !important; max-width: 100% !important;
    white-space: normal !important;
    display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  /* Stacked, not inline. The text column is ~148px wide, and
     "$169/mo  plans from $135" needs ~172px — so an inline price wrapped
     on some rows and not others purely on digit count, which read as
     sloppy down the column. Stacking it is the same height as the wrap
     and is identical on every row. */
  .sh4-rail .sh4-card .head .pr {
    font-size: 16.5px !important; line-height: 1.2 !important;
    margin: 3px 0 0 !important; padding-right: 0 !important;
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important; gap: 1px !important;
    /* The superseded card block set `white-space: nowrap` on this same
       selector. This one did not restate it, so between 375 and 820px a
       price could only overflow into the card's own overflow:hidden —
       it could never wrap. A clipped price is the worst thing on the
       row to get wrong. */
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
  /* No nowrap. "2-month plan \u00b7 from $55" is ~125px and the text column
     is 108px at 320, so pinning it to one line pushed it under the
     card's overflow:hidden. Allowed to wrap it only wraps where it
     must; there is room for one line at every other width. */
  .sh4-rail .sh4-card .head .pr small {
    font-size: 11.5px !important; margin: 0 !important;
    white-space: normal !important; max-width: 100% !important;
  }
  /* The circular arrow that earlier waves hung off .pr now lives on the
     real anchor instead — one affordance, not two. */
  .sh4-rail .sh4-card .head .pr::after { display: none !important; }
  .sh4-rail .sh4-card .head .labsreq {
    font-size: 11px !important; line-height: 1.3 !important;
    margin: 2px 0 0 !important;
  }

  /* CTA + disclosure ------------------------------------------------
     .foot becomes display:contents so its two children can be placed
     in different grid areas — the anchor beside the text, the ISI
     link on its own full-width line underneath. The anchor keeps its
     href, its data-cta attributes and its accessible name; only the
     visible label is swapped for the arrow. */
  .sh4-rail .sh4-card .foot {
    display: contents !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important;
  }
  /* Self-contained on purpose. Section 13 defines this same selector at
     the same specificity with `position:absolute; inset:0; min-height:0`
     — a full-card tap overlay from the old card design. This block
     redefined the size but not those, so the arrow was being PLACED by
     `top:0;left:0` and measured 42.9x42.9 instead of 44: justify-self
     and align-self below were inert, and the 44px touch floor was dead.
     The row is still fully tappable via the card's own data-href. */
  .sh4-rail .sh4-card .foot .b {
    grid-area: cta !important;
    position: static !important;
    inset: auto !important;
    width: clamp(44px, 11vw, 48px) !important;
    height: clamp(44px, 11vw, 48px) !important;
    min-width: clamp(44px, 11vw, 48px) !important;
    min-height: clamp(44px, 11vw, 48px) !important;
    padding: 0 !important; margin: 0 !important;
    border-radius: 99px !important;
    font-size: 0 !important;           /* label hidden visually, still read aloud */
    display: flex !important; align-items: center !important; justify-content: center !important;
    justify-self: end !important; align-self: center !important;
    /* An earlier wave animates .foot .b in from opacity 0 and the row
       never triggers whatever reveals it, so the arrow was invisible. */
    opacity: 1 !important; visibility: visible !important; transform: none !important;
  }
  .sh4-rail .sh4-card .foot .b::after {
    content: "" !important;
    width: 16px !important; height: 16px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  }
  .sh4-rail .sh4-card .foot .isi {
    grid-area: isi !important;
    margin: 9px 0 0 !important; padding: 8px 0 0 !important;
    border-top: 1px solid rgba(10, 22, 40, .08) !important;
    text-align: left !important;
    /* NOT a flex container. Making it one turned an inline sentence
       into flex items — the label, each drug link and each "·" became
       separate boxes that wrapped one per line, which is how a single
       drug name ended up orphaned on its own line. Normal flow lets it
       wrap as the sentence it is. */
    display: block !important;
  }
  .sh4-rail .sh4-card .foot .isi a {
    font-size: 11px !important; line-height: 1.3 !important;
  }

  /* The pick marker sits above the name, not floating over the card. */
  .sh4-rail .sh4-card .nmc-pick {
    position: static !important;
    margin: 0 0 2px !important;
    align-self: flex-start !important;
  }
  /* A one-card-wide last row was a leftover of the 2-up grid. */
  .sh4-rail > .sh4-card:last-child:nth-child(odd) { grid-column: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   25. AUDIT FIXES — 2026-10-06, second pass
   Everything here answers a measured finding from the full-page sweep
   of section 24. Mobile only; desktop untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* M1 — four rows (burn, crown, reclaim, rewind) rendered a 170px
     letterbox thumbnail instead of the 84px square, making those cards
     258px against 172px neighbours. Cause: a leftover from the 2-up
     grid, `.sh4-rail > .sh4-card:last-child:nth-child(odd) .visual`,
     whose specificity (0,4,1) beats section 24's (0,3,0). Section 24
     neutralised that selector's grid-column but not its min-height.
     Matched here selector-for-selector so source order decides. */
  .sh4-rail > .sh4-card:last-child:nth-child(odd) .visual,
  [class*="sh4-rail"] > .sh4-card:last-child:nth-child(odd) .visual {
    min-height: 0 !important;
    height: clamp(64px, 20vw, 84px) !important;
    width: clamp(64px, 20vw, 84px) !important;
  }

  /* M2 — glow's concern pill, now lifted into the text column by
     liftConcernTags(). Restyled from a dark floating badge into a
     quiet label line, since it no longer sits on a photo. */
  .sh4-rail .sh4-card .head .nmc-concern {
    position: static !important;
    max-width: 100% !important;
    margin: 0 0 1px !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #0E7C86 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* M5 — crown's "Coming soon" card is a <span class="b b--soon">, not
     a link. Section 24's font-size:0 erased its label, leaving a navy
     circle pixel-identical to a live CTA that does nothing when tapped.
     Hiding it is better than restyling it: the row already says COMING
     SOON in its badge and "Pricing being finalized" where the price
     goes, so the pill was a third repetition — and keeping it cost the
     text column 92 of its 148px at 320. Nothing is lost. */
  .sh4-rail .sh4-card .foot .b--soon { display: none !important; }
  /* With no CTA in it, that card's third column collapses and the text
     takes the space. Matched on the markup's own .sh4-card--soon rather
     than :has(), because :has() is unsupported on older Safari — a
     phone browser — and that card would keep an empty third column
     there. Kept as TWO rules on purpose: a selector list containing one
     unsupported selector is dropped whole, so combining them would
     lose both on exactly the browsers the first one is for.
     The columns mirror section 24's continuous scale. */
  .sh4-rail > .sh4-card--soon,
  [class*="sh4-rail"] > .sh4-card--soon {
    grid-template-columns: clamp(64px, 20vw, 84px) minmax(0, 1fr) 0 !important;
    column-gap: clamp(10px, 3vw, 12px) !important;
  }
  .sh4-rail > .sh4-card:has(.b--soon),
  [class*="sh4-rail"] > .sh4-card:has(.b--soon) {
    grid-template-columns: clamp(64px, 20vw, 84px) minmax(0, 1fr) 0 !important;
    column-gap: clamp(10px, 3vw, 12px) !important;
  }

  /* m6 — the ISI container sat at the authored 10.5px while its links
     were set to 11px, so the "Important Safety Information:" prefix and
     the "·" separators rendered half a pixel smaller than the drug
     names beside them. */
  .sh4-rail .sh4-card .foot .isi { font-size: 11px !important; }

  /* m2 — section 24 set .flag to 9.5px, under this file's own 11px
     floor (and under the 10px the page itself authors). 10.5px with a
     real ellipsis is the compromise: legible, and when it does run out
     of room it truncates like a truncation instead of a bug. */
  .sh4-rail .sh4-card .head .chips .flag {
    font-size: 10.5px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* p1 (pre-existing, cheap to fix here) — the chat bubble sits at
     bottom:16px and the consent banner is 154-172px tall with
     z-index 2147483640, so the bubble was 100% covered: a 56x56 total
     overlap at 390, and elementFromPoint at its centre returned the
     banner. Lift it clear while the banner is in the DOM. The banner
     is removed on accept/decline, so this stops applying by itself. */
  /* Height-gated. In an 812x375 landscape window, bottom:196px puts the
     bubble at y 123-179 — the vertical middle of the screen — where it
     covered a product's "Get started" button on apex and shed. Only lift
     it where there is room above the banner to lift it to. Below 600px
     tall the pre-existing overlap stands; it is not made worse. */
  @media (min-height: 600px) {
    body:has(#nv-consent-banner) .float-chat,
    body:has(#nv-consent-banner) .nv-chat-fab {
      bottom: 196px !important;
    }
    /* A separate rule on purpose — see the note on .sh4-card--soon. */
    body.nmc-consent .float-chat,
    body.nmc-consent .nv-chat-fab {
      bottom: 196px !important;
    }
  }

  /* NEW-4 — desire's shortest ISI anchor ("tadalafil") measured
     41.4x44, under the 44px width minimum. These are inline links in a
     sentence, so widen them by padding rather than a min-width that
     would break the run of "A · B · C". */
  .sh4-rail .sh4-card .foot .isi a { padding: 0 3px !important; }
}

/* M4 + m1 — the 320px column.
   At 320 the card's content box is 232px, so 84 + 44 + 24 of gaps left
   the text column at 78px: narrower than the thumbnail beside it. Badges
   clipped mid-word ("PCOS FORMU"), and the delivery line lost half its
   words behind the 2-line clamp. Give the text back 24px by trimming the
   thumbnail and the arrow — both stay above the 44px touch minimum. */
@media (max-width: 374px) {
  /* Neither the grid nor the padding is restated here — both scale
     continuously in section 24. Only type steps down, which is
     monotonic and so cannot invert across the breakpoint. */
  .sh4-rail .sh4-card .head h3 { font-size: 14.5px !important; }
  /* Raising the CTA to a true 44px took 4px off the text column, which
     put "GENTLE RESTART" and "MOST VERSATILE" back over the edge at
     320. Let the badge wrap onto a second line rather than drop the
     type below the floor again — a two-line badge on the smallest
     phone is fine; a clipped word is not. */
  .sh4-rail .sh4-card .head .chips { flex-wrap: wrap !important; overflow: visible !important; }
  .sh4-rail .sh4-card .head .chips .flag {
    font-size: 10px !important;
    white-space: normal !important;
    text-overflow: clip !important;
    line-height: 1.15 !important;
    height: auto !important;
    padding: 3px 7px !important;
  }
  /* Section 24's 16.5px beat crown's inline 15px, so "Pricing being
     finalized" measured 176.7px in a 144px column and lost its last
     letter to the card's overflow:hidden. Step the price down here with
     everything else, and let it wrap rather than run off the edge. */
  .sh4-rail .sh4-card .head .pr {
    font-size: 14.5px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  /* Three lines at this width: "Sublingual tablet · 1 tablet before
     activity" is four lines of 78px text and was losing half of itself. */
  .sh4-rail .sh4-card .head .form { -webkit-line-clamp: 3; }
  /* "Sildenafil + Tadalafil Combo ODT" is three lines in a 104px
     column; two clipped it. */
  .sh4-rail .sh4-card .head h3 { -webkit-line-clamp: 3; }

}

/* ═══════════════════════════════════════════════════════════════════
   26. FOUNDER PASS — 2026-10-06, third round
   Mobile only. Desktop untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* ---- 26a. The play glyph, properly ------------------------------
     The suppression rule was scoped `video[autoplay][muted]`. That made
     it depend on an attribute the JS itself removes when a clip is held
     on its poster, so the one video we deliberately stopped was the one
     that got the glyph back. iOS paints this control on any video it
     considers not-playing, so the rule must not care about attributes. */
  video::-webkit-media-controls,
  video::-webkit-media-controls-panel,
  video::-webkit-media-controls-start-playback-button,
  video::-webkit-media-controls-overlay-play-button,
  video::-webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* The still that replaces the weight-loss clip inherits the video's
     own inline sizing, so it needs nothing but the blend mode kept. */
  img[data-nmc-still] { display: block !important; }

  /* ---- 26b. Choices on one straight line --------------------------
     Both pickers were wrapping flex rows, so the chips broke into a
     ragged two-line block and crown's question sat ON the first chip's
     line. Equal columns in a single row instead: one straight line of
     choices, every chip the same width and the same height, with the
     question on its own line above. Labels wrap inside their own cell
     rather than pushing the row out of alignment. */
  .nmc-choose__row {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 1fr !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  .nmc-choose__chip {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 2px !important;
    padding: 6px 4px !important;
    font-size: 11.5px !important;
    line-height: 1.15 !important;
    min-height: 44px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
  .nmc-choose__n { font-size: 10.5px !important; }

  /* crown's own audience filter, same treatment */
  /* Flex, not grid: with grid-auto-flow:column the question became a
     column of its own and sat on the chips' line, which is the ragged
     look the founder flagged. flex-basis:100% puts it on its own row
     and lets the buttons share the next one equally. */
  .fx-filter {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 12px !important;
  }
  .fx-q {
    flex: 0 0 100% !important;
    margin: 0 0 2px !important;
    font-size: 14px !important;
  }
  .fx-filter button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 4px !important;
    font-size: 11.5px !important;
    line-height: 1.15 !important;
    min-height: 44px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    box-shadow: none !important;
  }

  /* ---- 26c. Important Safety Information -------------------------
     REVERTED. I shrank this to 10.5px with tightened tracking on the
     claim that it then fit one line. It does not. My probe measured the
     whole string at the container's size, but the drug names render at
     11px — section 16's `a.nv-isi` is (0,5,0) and outranks anything
     here — so the measurement was short and the real result is two or
     three line boxes, with the label and the separators now rendering
     SMALLER than the drug names beside them. That is the exact defect
     section 25 m6 was written to remove, on the one piece of type that
     a regulator expects a patient to be able to read.
     Back to 11px, and the 3px link padding that keeps the shortest drug
     anchor at a usable tap width. One line would need the label itself
     shortened, which is a compliance decision, not a CSS one. */
  .sh4-rail .sh4-card .foot .isi {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .sh4-rail .sh4-card .foot .isi a {
    font-size: 11px !important;
    padding: 0 3px !important;
  }

  /* ---- 26d. crown's third tile: her chin was outside the frame -----
     crown.html:171 pins that tile's media to `object-position: 50% 0%`,
     which is right for the tall 4/4.3 tile it was composed for. This
     file forces tiles 2 and 3 to 16/10 on phones, and in a short wide
     box "from the top" stops at 46.9% of a portrait photograph — her
     hair starts at 17.9% and her chin is at 51.4%, so the bottom of her
     face fell off the edge.
       window height = 184/392 = 46.9% of the frame
       want the window to start at 15%  ->  p = 0.15 / (208/392) = 28%
       giving 15%-61.9%: all of her head, plus shoulders.             */
  /* Scoped to crown. The 28% is derived from ONE photograph (her hair
     at 17.9%, her chin at 51.4%); applying it to every page's third
     tile was tuning one image and moving the rest blind. .cr-still
     exists only on crown, so it can stay unqualified. */
  .sh4-tryp .t3 video[poster*="crown-hair"],
  .sh4-tryp .t3 img[src*="crown-hair"],
  .sh4-tryp .t3 .cr-still {
    object-position: 50% 28% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   27. FOUNDER PASS — 2026-10-06, fourth round
   Mobile only. Desktop untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* ---- 27a. shed's first tile: the pills sat on the copy -----------
     .t-snac's figure image is `position:absolute; bottom:11%` inside
     .snac-fig, which the desktop sizes with `flex:1` so it fills the
     tall tile. This file set that figure to `flex:0 0 auto`, which left
     it 0px high — so "11% from the bottom" of a zero-height box put the
     pills 83px UP, straight over the headline and the "See the science"
     button. Measured: .snac-top ends at y672, the image starts at y589.
     Put the image back in normal flow. Nothing is positioned against a
     box with no height any more, so it cannot overlap whatever the
     headline wraps to. */
  .sh4-tryp > .t.t-snac .snac-fig {
    flex: 0 0 auto !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 14px 0 0 !important;
  }
  .sh4-tryp > .t.t-snac .snac-fig img {
    position: static !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    transform: none !important;
    width: 62% !important;
    max-width: 210px !important;
    max-height: 160px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  /* ---- 27b. "Desire has two sides": let the photograph be seen -----
     .ds-her carries its photograph as a background and the page
     reserves `padding-top: clamp(196px,54vw,272px)` so it reads as a
     band above the copy. Collapsing the section into a 70px accordion
     header cropped that band to a sliver — just the tops of two heads,
     which looks like a mistake rather than an invitation to open it.
     Give the closed header the height the photograph was composed for,
     with the title sitting on the bottom of the image. It still opens
     to the full section. */
  .ds-her > .nmc-acc__hd {
    min-height: 188px !important;
    align-items: flex-end !important;
    padding: 16px 20px 14px !important;
    background: transparent !important;
  }
  .ds-her { background-position: 26% 26% !important; }
  .ds-her > .nmc-acc__hd .nmc-acc__label {
    align-self: flex-end !important;
  }
  /* A soft floor under the title so it stays readable on the photo
     without a hard band across it. */
  .ds-her > .nmc-acc__hd::before {
    content: "" !important;
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    height: 50% !important;
    background: linear-gradient(180deg, rgba(255,245,244,0), rgba(255,245,244,.25) 34%, rgba(255,245,244,.88) 72%, rgba(255,245,244,1)) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  .ds-her > .nmc-acc__hd > * { position: relative !important; z-index: 1 !important; }

  /* ---- 27c. the DESIRE band: bring the man back into frame --------
     `object-position: 50% 50%` centred a landscape frame on her, which
     pushed him off the left edge. Shifting the window left shows both
     of them. */
  .dc-band video,
  .dc-band img {
    object-position: 32% 50% !important;
    transform-origin: 32% 34% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   28. FACES — 2026-10-06, from the media audit
   Every number here is the computed visible source window, not a guess.
   Mobile only.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* 28a. rewind's beach tile — BOTH heads were gone entirely, shoulders
     down only. box 294x184, src 896x1200, cover:
       scale   = max(294/896, 184/1200) = 0.3281
       visible = 184/0.3281 = 560.8px = 46.67% of frame height
       top     = p x 53.33 ; the heads sit at y 14-27%
       p = 0.14 -> window 7.5-54.1%: both heads whole, ~6pt headroom. */
  .sh4-tryp .t img.rw-zoom,
  img[src*="rewind-beach"] { object-position: 50% 14% !important; }

  /* 28b. glow's third tile — the man's crown was sliced flat by the top
     edge in every frame. box 294x184, src 1248x1664:
       visible = 184/0.2356 = 781px = 46.94% ; top = p x 53.06
       his crown is at 12.5%, so p must be <= 0.236
       p = 0.20 -> window 10.6-57.6%, ~2pt of headroom. */
  .sh4-tryp .t3 .gl-scene { object-position: 50% 20% !important; }

  /* 28c. the homepage men's-health tile — the middle man's FACE was
     sliced vertically by the left edge, leaving a nose-to-chin strip.
     box 173x216, src 1296x720: only 44.5% of the frame width is visible
     and holding both of the right-hand men needs 50%, so no
     object-position can hold them at this aspect. Rather than change
     one tile's aspect and leave the category grid ragged, pin to the
     right edge: window 55.5-100%. The third man is whole and the
     second reduces to the back of his head — no sliced face. */
  /* NOTE THE LEADING SLASH. Written as [src*="mens-health-home-hi"]
     this also matched /images/WOmens-health-home-hi.webp — "womens"
     contains "mens" — so it threw the women's-health photograph to the
     right edge as well and cut her out of her own tile. The slash
     anchors it to the start of the filename. */
  img[src*="/mens-health-home-hi"] { object-position: 80% 0% !important; }

  /* Founder: zoom the men's tile out so two of them fit. A SHORTER box
     shows more of a landscape frame under object-fit:cover:
       173 x 216 -> scale 0.300, visible width 173/389 = 44.5%
       173 x 192 -> scale 0.267, visible width 173/346 = 50.1%
     and the three men span x 10-29, 40-60, 68-90, so 50% starting at
     40% holds the second and third whole. The aspect goes on ALL four
     category tiles, not just this one, or the grid goes ragged. */
  .nm-cat-cards > a > div:first-child { aspect-ratio: 173 / 192 !important; height: auto !important; }

  /* 28d. the DESIRE band — 32% brought her into frame but still cut the
     back of his head on the left and his crown on the top. At 290x560
     only 29.13% of the frame is visible and the two heads span 41%, so
     it is geometrically impossible at that height. A shorter box shows
     MORE of a landscape frame:
       290 x 398 (0.729)  -> scale 0.4914, visible width 40.98%
       left = 0.29 x 59.02 = 17.1% -> window 17.1-58.1%
     which holds both heads whole.
     NOT TAKEN. Rendered, that shorter box pushes the "Viagra did not
     work?" panel up over HER face — it fixes one head by covering the
     other. At the authored 560px height the two heads span more frame
     than is visible, so one of them meets an edge whichever way you
     crop; the founder asked to see "a little bit of the man", and the
     back of a head meeting the frame edge is ordinary framing, not a
     defect. Keep the height, keep the wider shift. */
  .dc-band video,
  .dc-band img { object-position: 29% 50% !important; }
  .dc-band { aspect-ratio: auto !important; }

  /* 28f. rewind's first tile — "See the science" sat on top of the
     "Nightly / taken at bedtime" annotation. .rw-snac .snac-side is
     `position:absolute; top:18px; right:24px` holding the badge and the
     CTA in a vertical stack, and .snac-top reserves 128px of
     padding-right for it. On a tall desktop tile the stack clears the
     figure; in a 294x316 phone tile it reaches straight down into the
     annotations, which sit at top:4% of .snac-fig.
     Put the stack in flow as a row under the heading. Nothing is
     positioned over the figure any more, and the reserved padding can
     go back to the headline. */
  .sh4-tryp .t.rw-snac .snac-top { order: 1 !important; padding-right: 0 !important; min-height: 0 !important; }
  .sh4-tryp .t.rw-snac .snac-side {
    order: 2 !important;
    position: static !important;
    top: auto !important; right: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
  }
  .sh4-tryp .t.rw-snac .snac-fig { order: 3 !important; }
  /* The two annotations are pinned left:5% and right:5% with a 135px
     max-width each — 270px of labels in a 224px tile at 320px, so they
     ran into each other. Cap each at 44% of the tile. */
  .sh4-tryp .t.rw-snac .snac-note { max-width: 44% !important; }

  /* 28e. the Man Power hero tile was INVISIBLE on every phone width.
     Same mistake as shed's pills: index.html:896 positions .mp-photo
     `absolute; top:clamp(...); bottom:0`, so it takes its height from
     that stretch. This file made it `position: relative`, which drops
     the bottom anchor — and since its only children are themselves
     absolutely positioned, it had no in-flow content and computed to
     height 0 with overflow:hidden. The video and poster were being
     clipped out of existence.
     Put the media back in flow and let the tile size to it. */
  .mp-hero .mp-photo {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  .mp-hero .mp-photo img,
  .mp-hero .mp-photo video:not([data-nmc-still]),
  .mp-hero .mp-photo img[data-nmc-still] {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   29. STILLS — 2026-10-07 (founder: "we don't want them to have to
   press play")
   In Low Power Mode iOS refuses autoplay and deliberately shows its
   play button; Apple will not allow that to be suppressed. So a clip
   that is not playing becomes its own poster frame instead — see
   swapToStill() in mobile-concise.js. These rules give the replacement
   image the box the video had, since the page styles most of them by
   element name and an <img> does not match `video`.
   Mobile only.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  img[data-nmc-still] {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* The weight-loss still carries the video's own inline style
     (contain + multiply), which outranks the defaults above. */
}

/* ═══════════════════════════════════════════════════════════════════
   30. FOUNDER PASS — 2026-10-07
   Mobile only. Desktop untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* ---- 30a. Bigger product rows -----------------------------------
     Founder: "make the boxes for each drug bigger." The row was built
     to be as short as possible; it over-corrected. Everything scales
     together so the columns stay continuous and nothing can clip. */
  .sh4-rail > .sh4-card,
  [class*="sh4-rail"] > .sh4-card {
    grid-template-columns:
      clamp(84px, 26vw, 112px) minmax(0, 1fr) clamp(44px, 11vw, 48px) !important;
    column-gap: clamp(12px, 3.4vw, 15px) !important;
    padding: clamp(13px, 3.6vw, 16px) !important;
    border-radius: 20px !important;
  }
  .sh4-rail .sh4-card .visual,
  .sh4-rail > .sh4-card:last-child:nth-child(odd) .visual,
  [class*="sh4-rail"] > .sh4-card:last-child:nth-child(odd) .visual {
    width: clamp(84px, 26vw, 112px) !important;
    height: clamp(84px, 26vw, 112px) !important;
    border-radius: 16px !important;
  }
  .sh4-rail .sh4-card .head h3 { font-size: clamp(16px, 4.4vw, 18px) !important; }
  .sh4-rail .sh4-card .head .form { font-size: clamp(12.5px, 3.4vw, 13.5px) !important; }
  .sh4-rail .sh4-card .head .pr { font-size: clamp(17.5px, 4.8vw, 19px) !important; }
  .sh4-rail .sh4-card .head .pr small { font-size: 12px !important; }
  .sh4-rail .sh4-card .head { gap: 3px !important; }

  /* ---- 30b. glow's "Shop by" picker, one straight line -------------
     Same treatment as the other two pickers: the question on its own
     line, the choices as equal columns in a single row. */
  .gx-filter {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .gx-q { flex: 0 0 100% !important; margin: 0 0 4px !important; }
  .gx-filter button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 9px 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    min-height: 44px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* ---- 30c. The category bar says it scrolls -----------------------
     It was already a scroller; nothing said so, and the founder's
     report is that people do not find the rest of the categories. The
     fade is a mask on the bar itself, so it does not travel with the
     content, and markScrollEdges() keeps it on the edge that actually
     has something beyond it. The button is for everyone who will never
     swipe a row of chips. */
  .store-filter[data-edge] {
    justify-content: flex-start !important;
    padding-right: 42px !important;
    scroll-padding-left: 16px !important;
  }
  .store-filter[data-edge="start"] {
    -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
  }
  .store-filter[data-edge="mid"] {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 78%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 78%, transparent 100%);
  }
  .store-filter[data-edge="end"] {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%);
  }
  .nmc-railwrap { position: relative !important; display: block !important; }
  button.nmc-more {
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 34px !important; height: 34px !important;
    border-radius: 99px !important;
    border: 1px solid rgba(10, 22, 40, .14) !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(10, 22, 40, .12) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; z-index: 3 !important; cursor: pointer !important;
  }
  button.nmc-more span {
    width: 15px !important; height: 15px !important;
    background: #0A1628 !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  }

  /* ---- 30d. glow's middle tile: her mouth was behind the caption ----
     That tile's <img> box is 353x221 sitting at y23 inside a 294x184
     tile, object-fit:contain, so the photograph renders 180x221 and
     object-position has no vertical slack to work with — changing it
     does nothing. Her hairline lands at tile y63 and her chin at y133,
     while the caption occupies y104 to y168. Lift the photograph 35px
     and her whole face clears it. But a 35px lift then cut the top of
     her hair, which is the same defect at the other end. Give the tile
     the extra height instead — 16/10 was chosen for photographs with a
     single overlay pill, and this one carries a three-line caption —
     then a 14px lift is enough. Her hair and her chin both clear. */
  .sh4-tryp > .t.bq-life { aspect-ratio: 294 / 218 !important; }
  .sh4-tryp .t img[src*="glow-t2-cut"] {
    transform: translateY(-14px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   31. THE SMALLEST PHONES KEEP THE COMPACT ROW
   Section 30a makes the product row bigger. At 320px the card has only
   206px of content to divide, so a 112px thumbnail plus a 44px arrow
   plus the gaps leaves the text about 54px — which clipped names and
   delivery lines on five pages. "Bigger" is for the phones with the
   room. This block must come AFTER section 30: an earlier 374px block
   loses to it on source order at equal specificity, which is exactly
   how the first attempt at this failed.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 374px) {
  .sh4-rail > .sh4-card,
  [class*="sh4-rail"] > .sh4-card {
    grid-template-columns: 64px minmax(0, 1fr) 44px !important;
    column-gap: 10px !important;
    padding: 11px !important;
  }
  .sh4-rail .sh4-card .visual,
  .sh4-rail > .sh4-card:last-child:nth-child(odd) .visual,
  [class*="sh4-rail"] > .sh4-card:last-child:nth-child(odd) .visual {
    width: 64px !important; height: 64px !important;
  }
  .sh4-rail .sh4-card .head h3 { font-size: 14.5px !important; }
  .sh4-rail .sh4-card .head .form { font-size: 11.5px !important; }
  .sh4-rail .sh4-card .head .pr { font-size: 14.5px !important; }
  .sh4-rail .sh4-card .head .pr small { font-size: 11px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   32. PRODUCT CARD — IMAGE ON TOP   (founder chose option A2, 10-07)
   Replaces the list row of sections 24/30/31. One product per card,
   full width: photograph across the top, then the name, how it is
   taken, the price, and a real labelled button. The per-product
   Important Safety Information keeps its own line underneath.

   SELF-CONTAINED ON PURPOSE. Twice today a block redefined this card
   and inherited something it never restated — an absolute inset that
   placed the arrow, a nowrap that stopped a price wrapping. Every
   property those earlier blocks set is restated here, even where the
   value is the browser default.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  .sh4-rail,
  [class*="sh4-rail"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  .sh4-rail > .sh4-card,
  [class*="sh4-rail"] > .sh4-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "img" "head" "cta" "isi" !important;
    column-gap: 0 !important;
    row-gap: 12px !important;
    align-items: start !important;
    padding: 0 0 16px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    min-height: 0 !important;
    width: auto !important;
    flex: none !important;
  }
  .sh4-rail > .sh4-card[hidden],
  [class*="sh4-rail"] > .sh4-card[hidden] { display: none !important; }

  /* The photograph ------------------------------------------------- */
  .sh4-rail .sh4-card .visual,
  .sh4-rail > .sh4-card:last-child:nth-child(odd) .visual,
  [class*="sh4-rail"] > .sh4-card:last-child:nth-child(odd) .visual {
    grid-area: img !important;
    width: 100% !important;
    height: clamp(170px, 48vw, 210px) !important;
    min-height: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .sh4-rail .sh4-card .visual img {
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    object-fit: cover !important;
  }
  .sh4-rail .sh4-card .visual:not(.photo) img {
    object-fit: contain !important; width: 80% !important; height: 80% !important;
  }
  .sh4-rail .sh4-card .visual .gl-tag { display: none !important; }

  /* The copy -------------------------------------------------------- */
  .sh4-rail .sh4-card .head {
    grid-area: head !important;
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 0 16px !important; margin: 0 !important;
    min-height: 0 !important; min-width: 0 !important;
  }
  .sh4-rail .sh4-card .head .actives,
  .sh4-rail .sh4-card .head .why { display: none !important; }
  .sh4-rail .sh4-card .head .chips {
    display: flex !important; flex-wrap: wrap !important;
    gap: 6px !important; margin: 0 0 2px !important;
    min-height: 0 !important; max-width: 100% !important; overflow: visible !important;
  }
  .sh4-rail .sh4-card .head .chips .rx,
  .sh4-rail .sh4-card .head .chips .aud { display: none !important; }
  .sh4-rail .sh4-card .head .chips .flag {
    font-size: 11px !important; letter-spacing: .06em !important;
    height: auto !important; padding: 4px 10px !important;
    margin-left: 0 !important; white-space: normal !important;
    line-height: 1.15 !important; text-overflow: clip !important;
    /* The list row clipped long badges with overflow:hidden. This card
       has the room, and restating it is the point of section 32 —
       leaving it inherited is how "COMING SOON" kept reporting as
       clipped on crown at every width. */
    overflow: visible !important;
    max-width: 100% !important;
  }
  .sh4-rail .sh4-card .head .nmc-concern {
    position: static !important; margin: 0 0 1px !important; padding: 0 !important;
    background: none !important; box-shadow: none !important; border-radius: 0 !important;
    color: #0E7C86 !important; font-size: 11px !important; font-weight: 800 !important;
    letter-spacing: .07em !important; text-transform: uppercase !important;
    white-space: normal !important; overflow: visible !important; max-width: 100% !important;
  }
  .sh4-rail .sh4-card .head h3 {
    font-size: clamp(18px, 5.2vw, 21px) !important;
    line-height: 1.18 !important; margin: 0 !important;
    display: block !important; overflow: visible !important;
    overflow-wrap: break-word !important;
  }
  .sh4-rail .sh4-card .head .form {
    font-size: clamp(13px, 3.6vw, 14px) !important; line-height: 1.35 !important;
    margin: 0 !important; max-width: 100% !important;
    white-space: normal !important; display: block !important; overflow: visible !important;
  }
  .sh4-rail .sh4-card .head .pr {
    display: flex !important; flex-direction: row !important;
    align-items: baseline !important; flex-wrap: wrap !important;
    gap: 2px 9px !important;
    font-size: clamp(20px, 5.6vw, 23px) !important; line-height: 1.2 !important;
    margin: 6px 0 0 !important; padding-right: 0 !important;
    white-space: normal !important; overflow-wrap: break-word !important;
  }
  .sh4-rail .sh4-card .head .pr small {
    font-size: 12.5px !important; margin: 0 !important; white-space: normal !important;
  }
  .sh4-rail .sh4-card .head .pr::after { display: none !important; }
  .sh4-rail .sh4-card .head .labsreq { font-size: 12px !important; margin: 3px 0 0 !important; }
  /* crown's unreleased card puts a sentence where the price goes
     ("Pricing being finalized"), which does not want price-sized type. */
  .sh4-rail .sh4-card--soon .head .pr {
    font-size: 15px !important;
    font-weight: 700 !important;
    overflow: visible !important;
  }

  /* A real button, with its label back ------------------------------
     The list row hid the label with font-size:0 and drew an arrow in a
     44px circle. Here it is the primary action on the card, so it says
     what it does. */
  .sh4-rail .sh4-card .foot { display: contents !important; }
  .sh4-rail .sh4-card .foot .b {
    grid-area: cta !important;
    position: static !important; inset: auto !important;
    justify-self: stretch !important; align-self: auto !important;
    width: auto !important; min-width: 0 !important;
    height: auto !important; min-height: 50px !important;
    margin: 0 16px !important; padding: 14px 18px !important;
    border-radius: 99px !important;
    font-size: clamp(15px, 4.1vw, 16px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
    white-space: normal !important; text-align: center !important;
  }
  .sh4-rail .sh4-card .foot .b::after { display: none !important; }
  .sh4-rail .sh4-card .foot .b--soon { display: none !important; }

  /* Founder 2026-10-07: the disclosure should not read as its own box.
     The divider above it was what made it look separate, so it goes;
     the link now sits directly under the button as part of the same
     block, which is also how hims presents it. It stays a real,
     per-product, always-visible link — only the rule above it changed. */
  /* Founder 2026-10-07: "whitespace should be way smaller and directly
     under Get started." The card's row-gap was spacing it like a
     separate block; it is overridden to a hairline here so the
     disclosure reads as part of the button's own group. */
  .sh4-rail .sh4-card .foot .isi {
    grid-area: isi !important;
    display: block !important;
    margin: -6px 16px 0 !important; padding: 0 !important;
    border-top: 0 !important;
    line-height: 1.3 !important;
    /* Founder: directly under Get started, not off to the left. The
       button is full width, so centring puts the disclosure on the
       button's own axis. */
    text-align: center !important;
    font-size: 11px !important; line-height: 1.4 !important;
    letter-spacing: normal !important; word-spacing: normal !important;
  }
  .sh4-rail .sh4-card .foot .isi a { font-size: 11px !important; padding: 0 3px !important; }

  .sh4-rail .sh4-card .nmc-pick { position: static !important; margin: 0 0 2px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   33. THE CATEGORY BAR IS A GRID   —  SUPERSEDED BY SECTION 52
   The complaint was "they won't know to scroll." A fade and a chevron
   signpost that problem; a grid removes it — every category is on
   screen, so there is nothing left to not know about.
   Founder reversed this on 10-07: "I don't like the box method you did,
   just make it noticeable that they can scroll." The rules below are
   left in place but overridden wholesale by section 52, which restores
   the page's own rail and makes the scroll explicit instead.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .store-filter,
  .store-filter[data-edge] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    padding-right: 0 !important;
    justify-content: stretch !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .store-filter .chip {
    width: auto !important;
    text-align: center !important;
    padding: 13px 8px !important;
    font-size: 13px !important;
    min-height: 46px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    white-space: normal !important; line-height: 1.2 !important;
  }
  /* The scroll affordance has nothing left to point at. */
  button.nmc-more { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   34. THE UNRELEASED CARD JOINS SECTION 32
   crown's "Coming soon" card carried a three-column override from the
   list-row era. One of those selectors uses :has(), so it is (0,3,0)
   and outranks section 32's (0,2,0) — the card kept a 78px first track
   and gave its text 222px in a column it was not laid out for, so
   "COMING SOON" and "Pricing being finalized" both measured as clipped
   at every width.
   This has to live at the END of the file: an identical block written
   earlier went into section 24 by mistake and lost on source order to
   the very rules it was meant to beat.
   Two rules, not one list — an unsupported :has() drops the whole rule
   it sits in, which would take the plain-class fallback with it.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .sh4-rail > .sh4-card--soon,
  [class*="sh4-rail"] > .sh4-card--soon {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }
  .sh4-rail > .sh4-card:has(.b--soon),
  [class*="sh4-rail"] > .sh4-card:has(.b--soon) {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   35. V3 EDITORIAL CARD + TWO AUDIT FIXES — 2026-10-07
   Founder picked view V3 from rendered options.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* ---- 35a. The product card, V3 ----------------------------------
     The photograph is the card. Name, delivery line and price sit in
     white ON it, over a fade that is fully opaque navy by the bottom
     edge — so the text's contrast does not depend on the photograph
     behind it, which is what makes this safe across ten protocols with
     ten different product colours. "Get started" stays a real button
     below, on white, and the safety disclosure keeps its own line. */
  .sh4-rail > .sh4-card,
  [class*="sh4-rail"] > .sh4-card {
    grid-template-areas: "img" "cta" "isi" !important;
    row-gap: 10px !important;
    position: relative !important;
    padding: 0 0 15px !important;
  }
  .sh4-rail .sh4-card .visual,
  .sh4-rail > .sh4-card:last-child:nth-child(odd) .visual,
  [class*="sh4-rail"] > .sh4-card:last-child:nth-child(odd) .visual {
    /* Taller now that the disclosure is no longer its own boxed block
       under a divider — founder, 2026-10-07: "that should give us space
       to make our product boxes larger." */
    height: clamp(300px, 84vw, 360px) !important;
    border-radius: 22px 22px 0 0 !important;
  }
  .sh4-rail .sh4-card .head {
    position: absolute !important;
    left: 0 !important; right: 0 !important; top: 0 !important;
    height: clamp(300px, 84vw, 360px) !important;
    display: flex !important; flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 18px !important;
    margin: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;   /* the card below stays tappable */
    background: linear-gradient(180deg,
      rgba(10, 22, 40, 0) 36%,
      rgba(10, 22, 40, .70) 72%,
      rgba(10, 22, 40, .90) 100%) !important;
  }
  .sh4-rail .sh4-card .head h3 { color: #fff !important; font-size: clamp(20px, 5.6vw, 23px) !important; }
  .sh4-rail .sh4-card .head .form { color: rgba(255, 255, 255, .88) !important; }
  .sh4-rail .sh4-card .head .pr { color: #fff !important; font-size: clamp(21px, 5.8vw, 23px) !important; }
  .sh4-rail .sh4-card .head .pr small { color: #9BE7F0 !important; }
  .sh4-rail .sh4-card .head .labsreq { color: rgba(255, 255, 255, .82) !important; }
  .sh4-rail .sh4-card .head .nmc-concern { color: #9BE7F0 !important; }
  .sh4-rail .sh4-card--soon .head .pr { color: #fff !important; }

  /* ---- 35b. Dark accordion bands ----------------------------------
     Found by audit: .nmc-acc__title computed rgb(10,22,40) on a parent
     whose background is a navy gradient — roughly 1:1 contrast, so the
     collapsed heading was invisible. On shed, desire, glow and crown.
     markDarkAccordions() tags the band; this makes it readable. */
  .nmc-acc--dark > .nmc-acc__hd .nmc-acc__title,
  .nmc-acc--dark > .nmc-acc__hd .nmc-acc__kicker { color: #fff !important; }
  .nmc-acc--dark > .nmc-acc__hd .nmc-acc__hint { color: rgba(255, 255, 255, .82) !important; }
  .nmc-acc--dark > .nmc-acc__hd .nmc-acc__chev {
    border-color: rgba(255, 255, 255, .5) !important;
    background: rgba(255, 255, 255, .10) !important;
  }
  .nmc-acc--dark > .nmc-acc__hd .nmc-acc__chev::before,
  .nmc-acc--dark > .nmc-acc__hd .nmc-acc__chev::after { background: #fff !important; }

  /* ---- 35c. The protocol tabs say they scroll ----------------------
     Same finding: .proto-tabs is 390 wide with 569 of content, so
     "Sources & References" was off-screen with nothing to indicate it.
     markScrollEdges() now covers it; this is the matching paint. */
  .proto-tabs[data-edge] { padding-right: 40px !important; }
  .proto-tabs[data-edge="start"] {
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
  }
  .proto-tabs[data-edge="mid"] {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 80%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 80%, transparent 100%);
  }
  .proto-tabs[data-edge="end"] {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   36. THE FIRST SCREEN AND THE BOTTOM BAR — 2026-10-07
   Mobile only. Desktop untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* ---- 36a. The trust line, on one line ---------------------------
     "Prescription only · Licensed US physicians · Licensed US
     pharmacies" wrapped to two. The cost was almost entirely the
     tracking: at 11px it needs 390px against 358px available, and
     0.5px across 67 characters IS 33 of those px. Dropping the
     tracking alone fits it — 357 against 358 — but one pixel is not a
     margin, so half a point comes off the size too: 341 against 358.
     It is a trust line, not a required disclosure, and uppercase at
     10.5px is still comfortably legible. */
  /* MEASURED, not extrapolated. At 10.5px the line needs 381px against
     the 358px the hero column gives it at 390 — so one line requires
     9.86px. 9.5px it is. At 320 it would need 7.9px, which is not a
     trade worth making, so there it still wraps to two. */
  .hero .hero-text p[style*="uppercase"] {
    font-size: 9.5px !important;
    letter-spacing: 0 !important;
    /* NOT nowrap. nowrap cannot fail safely — where the line does not
       fit it runs past its own edge and is clipped, which is worse than
       the two lines it replaced. Let it wrap; at 390 and above the
       tracking removal alone is enough that it does not need to. */
    white-space: normal !important;
  }
  @media (max-width: 374px) {
    .hero .hero-text p[style*="uppercase"] { font-size: 9.5px !important; }
  }

  /* 36b REMOVED 2026-10-07 — the founder reverted the top of the
     homepage: no injected button above the fold, and the hero
     paragraph is back to its authored length. Only the trust line
     below keeps today's change, because that one was asked for
     separately. */

  /* ---- 36c. The bottom bar ----------------------------------------
     68px, one button, the page's own wording. It is only shown once
     the page's own hero CTA has scrolled away. */
  .nmc-bar {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 9997 !important;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255, 255, 255, .94) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    border-top: 1px solid rgba(10, 22, 40, .10) !important;
    transform: translateY(110%) !important;
    transition: transform .22s ease !important;
    pointer-events: none !important;
  }
  body.nmc-bar-on .nmc-bar { transform: translateY(0) !important; pointer-events: auto !important; }
  .nmc-bar__go {
    display: flex !important; align-items: center !important; justify-content: center !important;
    min-height: 48px !important;
    border-radius: 99px !important;
    background: #0A1628 !important;
    color: #fff !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 16px !important; font-weight: 700 !important;
    text-decoration: none !important; text-align: center !important;
  }
  /* Room for it, so it can never sit on top of a safety disclosure or
     the last row of a page. */
  body.nmc-bar-on { padding-bottom: 86px !important; }
  /* And the chat bubble goes above it rather than under it — they
     already collided with the consent banner once today. */
  body.nmc-bar-on .float-chat,
  body.nmc-bar-on .nv-chat-fab { bottom: 96px !important; }
  /* WHILE THE COOKIE BANNER IS UP, THE BAR STAYS AWAY.
     Lifting it above the banner put its top at y608 on a 820x844
     screen — straight onto the Important Safety Information link on
     desire and crown. Measured: 16 of 102 disclosure hit-tests failed,
     every one of them to .nmc-bar.
     Stacking a second call to action above a banner that is already
     demanding a decision was the wrong idea anyway. The banner is
     dismissed in one tap and the bar arrives after it. */
  body:has(#nv-consent-banner) .nmc-bar,
  body.nmc-consent .nmc-bar {
    transform: translateY(130%) !important;
    pointer-events: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   37. drift's sleeping shot — 2026-10-07
   His eyes cleared the caption card but his nose, mouth and chin sat
   behind it. The tile is object-fit:cover with vertical slack, so
   RAISING object-position shows a lower slice of the frame, which
   moves him up in the box and above the caption.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .sh4-tryp .t.dr-night video,
  .sh4-tryp .t.dr-night img { object-position: 50% 46% !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   38. THE TRUST BLOCK — EVEN GRID (founder chose T2 from renders)
   It was a wrapping row, so four items landed 2 + 1 + 1 with ragged
   edges. Two equal columns, each item a card of the same size.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .sh4-perks--trust {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    justify-content: stretch !important;
  }
  .sh4-perks--trust > * {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, .7) !important;
    border: 1px solid rgba(10, 22, 40, .08) !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    min-height: 56px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   39. READABILITY — from the full-site audit, 2026-10-07
   Every number below was measured by the audit and re-checked here.
   These are not style preferences: they are text a patient is expected
   to be able to read, currently below the 4.5:1 minimum.
   Mobile only.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* 39a. THE WORST ONE. On desire, the Important Safety Information
     link renders rgb(92,106,118) on the dusty-pink panel rgb(197,132,135)
     — 1.86:1, against a 4.5:1 minimum. The safety link for a
     prescription product was effectively invisible.
     Navy on that pink is 6.9:1. Applied to every ISI link, because a
     safety disclosure should not be the lowest-contrast text anywhere
     on the page it sits on.

     A FIXED COLOUR WAS THE WRONG FIX. Setting every safety link navy
     also hit the ones in the navy footer, where it measured 1.00:1 —
     worse than the 1.86:1 it was written to repair. markSafetyLinks()
     measures each link's actual background and tags it; these two
     rules then paint it for the surface it is on. */
  a.nv-isi, .isi a, a[href*="importantsafety"] {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
  }
  /* Specificity high enough to beat the page's own panel rules — the
     dusty-pink band on desire styles its footer links at (0,3,0), so a
     plain class lost even with !important behind it. */
  a.nv-isi.nmc-isi-onLight,
  .isi a.nmc-isi-onLight,
  .dif-foot a.nmc-isi-onLight,
  a.nmc-isi-onLight { color: #0A1628 !important; }
  a.nv-isi.nmc-isi-onDark,
  .isi a.nmc-isi-onDark,
  a.nmc-isi-onDark { color: #FFFFFF !important; }
  /* Mid-tone panels, where neither brand navy nor white clears 4.5:1. */
  a.nv-isi.nmc-isi-onMid,
  .isi a.nmc-isi-onMid,
  .dif-foot a.nmc-isi-onMid,
  a.nmc-isi-onMid { color: #050B14 !important; }
  .sh4-rail .sh4-card .foot .isi { color: #3A4553 !important; }

  /* 39b. The homepage prescription line was 2.63:1 at rgb(155,155,155).
     The SIZE is a separate decision the founder has been asked about —
     one line costs legibility — but the colour is not a trade-off at
     all, so it is fixed here regardless: 5.9:1 on cream. */
  .hero .hero-text p[style*="uppercase"] { color: #5A6472 !important; }

  /* 39c. The weight-loss calculator's entire medical disclaimer block,
     "Consult a healthcare provider before starting" included, rendered
     at 2.66:1. */
  .wlc-disclaimer, .wlc-note, [class*="disclaimer"] p,
  [class*="disclaimer"] li, [class*="disclaimer"] span {
    color: #4A5565 !important;
  }

  /* 39d. Body and meta greys. rgb(134,150,168) measured 2.86:1 on
     cream across 41 elements and 3.03:1 on white across 52. One
     accessible grey instead: 5.3:1 on cream, 5.8:1 on white. */
  .sh4-plansup, .mp-sub, .how-sub, .sh4-right h2,
  .breadcrumb, .cr-cap, .bq-cap, .snac-note, .mol-note {
    color: #4F5A6A !important;
  }

  /* 39e. The nav drawer. Secondary links were 165x20 and the account
     icon 22x22, against a 44px minimum; the teal labels were 2.38:1. */
  .slide-menu a.menu-cat,
  .slide-menu .menu-links a,
  .slide-menu .menu-sub a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  .slide-menu a.drawer-auth {
    min-width: 44px !important; min-height: 44px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .slide-menu .menu-sub-title,
  .slide-menu [style*="#00B4C6"] { color: #0A6B75 !important; }

  /* 39f. shed's "Sources & References" rendered at left=393 in a 390px
     viewport — 147px past the edge, clipped by overflow-x:hidden and
     unreachable. The tabs are a scroller; it just was not reachable
     because nothing scrolled it. markScrollEdges() now gives the tabs
     their affordance (section 35c); this makes sure the last tab can
     actually be reached. */
  .proto-tabs { scroll-padding-right: 16px !important; }
  .proto-tabs > *:last-child { margin-right: 16px !important; }

  /* 39g. The homepage protocol carousel holds every protocol TWICE —
     20 cards, 10 unique, the duplicates marked .proto-clone for a
     marquee that is switched off below 820px. So the clones buy
     nothing and make the rail read as a glitch on the second pass. */
  .proto-row .proto-clone { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   40. FOUNDER PASS — 2026-10-07 evening
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* 40a. THE BAR MUST NOT OUTRANK A MODAL.
     .nmc-bar was z-index 9997 and the quiz popup is 9000, so the bar
     painted OVER the popup — the founder's screenshot shows the popup's
     own "Find your protocol · 30 seconds" with my "Take the Quiz"
     stacked underneath it, two calls to action for the same thing. Drop
     the bar below every modal on the site; the popup's full-screen
     overlay then covers it, which is what should have happened. */
  .nmc-bar { z-index: 8900 !important; }

  /* 40b. The Man Power cards: bigger box, bigger man, nothing cut.
     The card is 351x280 with overflow:hidden, and the photograph was
     rendering 215x150 against a natural 613x769 — a 0.80 portrait
     squeezed into 1.43, so he was both small and cropped. Give the card
     the height and let the picture keep its own shape. */
  .mp-cards .mp-card {
    min-height: 360px !important;
    padding-bottom: 14px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .mp-cards .mp-card img {
    width: 78% !important;
    height: auto !important;
    max-height: 232px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    margin: auto auto 0 !important;
    align-self: center !important;
  }

  /* 40c. The fine print above the safety link, smaller as asked. It is
     a disclosure, so it does not go below the floor: 10px, and the
     colour stays where section 39 put it. */
  /* Founder: "make it more discreet." It is a disclosure, so it does
     not get smaller than 10px or lighter than 5:1 — but it can stop
     reading as body copy. Tighter leading, a narrower measure and a
     quieter grey (#5F6B7A on cream = 5.03:1). */
  .mp-fine {
    font-size: 10px !important;
    line-height: 1.45 !important;
    color: #5F6B7A !important;
    max-width: 34em !important;
    margin-left: auto !important;
    margin-right: auto !important;
    letter-spacing: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   41. THE BOTTOM BAR IS JUST THE BUTTON — 2026-10-07
   Founder: no white bar, no borders, the button in the logo blue.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .nmc-bar {
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-top: 0 !important;
    padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .nmc-bar__go {
    /* #00B4C6 is --teal, the accent on the "i" in the wordmark.
       The label is NAVY, not white: white on this teal measures 2.52:1
       and the site-wide audit flagged it on 31 other buttons. Navy on
       the same teal is 6.6:1, so the brand colour stays and the words
       are actually readable. */
    /* The Peak Performance tile on the homepage is
       linear-gradient(135deg, #008B9A, #00B4C6 40%, #33D4E4) — founder
       wants this button that lighter blue. Same sweep, shifted up: its
       darkest point is #00B4C6 rather than #008B9A, because navy on
       #008B9A is 4.04:1 and this label is 15.5px bold, which is not
       large text. Across this range navy runs 7.2:1 at the dark end to
       10.0:1 at the light end. */
    background: linear-gradient(135deg, #00B4C6 0%, #33D4E4 60%, #4FDDEC 100%) !important;
    color: #0A1628 !important;
    border: 0 !important;
    min-height: 52px !important;
    font-size: 15.5px !important;
    letter-spacing: .005em !important;
    box-shadow: 0 10px 28px rgba(51, 212, 228, .40) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   42. THE SHRINK-TO-FIT BUG — 2026-10-07, root cause
   Founder: "why can i zoom out and zoom in and it looks like a
   wordpress page". Measured on the live DOM: html and body both
   computed width:390px INSIDE a layout viewport near 930px, with the
   hamburger and chat bubble pinned to the far right of that wider
   viewport while the content sat in a 390px column on the left.

   THE MECHANISM, and it is mine.
   mobile-redesign.css:75 sets `html, body { max-width: 100vw;
   overflow-x: hidden }`. That pairing is safe only while the body
   actually clips. Section 12 of THIS file forced
   `body { overflow-x: visible !important }` — deliberately, so that
   document.scrollWidth could exceed clientWidth and my own overflow
   test could fail honestly. Being later in the cascade it beat
   mobile-redesign.css:1239's `html, body { overflow-x: hidden
   !important }` for the body. With the body no longer clipping,
   content overflows it, iOS widens the layout viewport, 100vw follows,
   and Safari scales the page down to fit.

   Desktop Chromium and desktop WebKit do not model that shrink-to-fit,
   which is why every automated pass called this clean. The fix is in
   two parts: section 12 is reverted to clip the body, and the 100vw
   cap is replaced with a percentage, which has no such feedback.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   43. The two hero tiles, taller — founder picked S1 at 265px.
   Height only. The wording keeps the size it already had: the tile
   gets no wider, so the headline is unaffected and "Peak Performance,"
   cannot start overflowing the way it did when I scaled the type up
   for the larger renders.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .hero-cards .hc { min-height: 265px !important; }

  /* The headline was ALREADY being cut, before any change of mine to
     this tile. "Peak Performance," needs 139px and the tile gives it
     130px at 390 and 95px at 320 — it fits at 22.4px and 16.4px.
     It has to scale, or the word is clipped mid-letter. 5vw lands at
     16.0 / 19.5 / 21.5 across 320 / 390 / 430, all inside the limit.
     "Start Your Weight Loss Today" always fitted and is unaffected
     beyond following the same scale. */
  .hero-cards .hc h2 {
    font-size: clamp(16px, 5vw, 24px) !important;
    line-height: 1.1 !important;
    overflow-wrap: break-word !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   44. THE RE-AUDIT'S FINDINGS — 2026-10-07
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* 44a. REVERTED SAME DAY — this one broke the site.
     An audit flagged mobile-redesign.css:86's
     `body, body * { max-width: 100vw }` as a residual vw path, and I
     capped every descendant at 100% instead. But full-bleed sections
     reach the screen edges with `width: 100vw; margin-left: calc(50% -
     50vw)`, and 100% of a padded parent is NARROWER than that — so
     every full-bleed band stopped short and left a cream stripe down
     the right of the dark protocol stacks, the "Needle or No Needle"
     hero and the pairs rail.
     I was fixing a hypothetical and broke something real. The outage
     was caused by `body { overflow-x: visible }`, not by this rule,
     which had been in place for months without harm. html and body
     stay capped at 100% (section 42) — that is the actual fix — and
     descendants are left exactly as the site has always had them. */

  /* 44b. position:sticky was dead sitewide, and section 42 did it.
     `overflow-x: hidden` forces overflow-y to compute `auto`, which
     makes the body a scroll container; sticky then resolves against a
     box that never scrolls. Measured: .nav top was -1585 at scrollY
     1500, and -85 with body's overflow-y restored. Section 12 wrote
     this trap down in prose and section 42 walked into it anyway.
     `clip` is the answer, and always was: it stops sideways scrolling
     WITHOUT creating a scroll container. `hidden` stays as the
     fallback for anything that does not support it. */
  @supports (overflow-x: clip) {
    html, body { overflow-x: clip !important; }
  }

  /* 44c. Headings painted UNDER decorative photographs.
     On burn ("One shot. Ninety days."), ignite ("Two ways in. Shot or
     tablet.") and desire, the h3 is static while the image beside it is
     absolutely positioned — so the image paints in the positioned layer
     above in-flow text and the heading disappears entirely. A
     screenshot clipped to the h3's own box showed only the photograph.
     This file already does the right thing elsewhere; these were
     missed. */
  /* .ds-illo-h removed 2026-10-07: pulling desire's illustration
     heading forward dropped it on top of the "Beyond the standard pill"
     badge, text on text. Reverted to how it was. */
  .orb-copy, .orb-copy h3, .orb-copy h2, .orb-copy p,
  .bw-copy h3, .ign-copy h3 {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   45. FOUNDER PASS — 2026-10-07 late
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* 45a. The compounded-medications disclosure belongs BELOW the
     products, not in the gap above them. .sh4-shop is a plain block, so
     it becomes a flex column purely to give one child an order. Nothing
     else moves: every other child keeps the default order 0 and the
     source sequence it already had. Centred, with a measure that stops
     it running the full width. */
  .sh4-shop { display: flex !important; flex-direction: column !important; }
  .sh4-shop > * { order: 0; }
  .sh4-shop > .sh4-fda {
    order: 99 !important;
    text-align: center !important;
    max-width: 36em !important;
    margin: 22px auto 0 !important;
    padding: 0 16px !important;
    line-height: 1.5 !important;
  }

  /* 45b. "OUR PICK" and the product flag go back to the top of the
     card. .head is a flex column pinned to the bottom of the
     photograph, so the badges were sitting just above the title.
     margin-bottom:auto on the chip row pushes everything after it down
     and leaves the badges at the top, where they were before the card
     was rebuilt. */
  .sh4-rail .sh4-card .head .chips { margin-bottom: auto !important; }
  .sh4-rail .sh4-card .head .nmc-pick { margin-bottom: 4px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   46. FOUNDER PASS — 2026-10-07, cards and chips
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

  /* 46a. The Man Power cards: no letterboxing, no dead strip.
     The photograph was 227x232 with max-height clamping a 0.80 portrait
     into a 0.98 box, so object-fit:contain letterboxed it — and the
     card's own min-height left 16px of empty cream under it. Drop the
     cap so the picture keeps its shape, and let the card size to its
     content so there is nothing left over at the bottom. */
  .mp-cards .mp-card {
    min-height: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  .mp-cards .mp-card img {
    width: 74% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 12px auto 0 !important;
    display: block !important;
  }

  /* 46b. The picker chips, wide enough for their own labels.
     Four equal 69px columns put "Men & women" on two lines. Sizing each
     chip to its content and letting the row wrap keeps every label on
     one line — which is what was actually asked for — and on these
     pages they still come out as a single row. */
  .nmc-choose__row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
  }
  .nmc-choose__chip {
    /* 0 1 auto, not 1 1 auto: letting them grow made the last chip
       334px wide at 430 while its neighbour was 93. Each chip is its
       own label's width now, and the row wraps when it must. */
    flex: 0 1 auto !important;
    min-width: max-content !important;
    flex-direction: row !important;
    gap: 7px !important;
    padding: 8px 13px !important;
    white-space: nowrap !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   47. The unreleased product goes last — 2026-10-07
   crown's "Dutasteride — Men" is COMING SOON and was sitting second,
   above four products that can actually be bought today. Founder: put
   it below the choices we actually offer. The rail is a grid, so one
   `order` moves it without touching the markup; everything else keeps
   the source sequence it already had.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .sh4-rail > .sh4-card { order: 0; }
  .sh4-rail > .sh4-card--soon { order: 90 !important; }
  .sh4-rail > .sh4-card:has(.b--soon) { order: 90 !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   48. The plans line, on one line — 2026-10-07
   "3, 6, and 12-month plans at checkout — save up to 20% · Cancel
   anytime" was running to two lines on every protocol page and three
   on drift at 320. Measured: at 12.5px it needs 320-430px against the
   256-366px it has, so it fits between 10.0px and 10.9px depending on
   page and width. 10px with a hair of negative tracking clears every
   combination with margin.
   This is a commercial line, not a required disclosure, so it is not
   held to the same type floor as the safety text.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .sh4-plansup {
    font-size: 10px !important;
    letter-spacing: -0.02em !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    text-align: center !important;
    max-width: none !important;
    /* No side padding: 10px each side cut the content box to 306 against
       a 321px need and put it straight back onto two lines. */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ===================================================================
   49. FOUNDER PASS - 2026-10-07, burn and desire
   =================================================================== */
@media (max-width: 820px) {

  /* 49a. burn's runner - her head was entirely out of frame, the tile
     started at her shoulders. A higher slice brings her face in. */
  .sh4-tryp .t.t3 video[poster*="burn-move"],
  .sh4-tryp .t.t3 img[src*="burn-move"] { object-position: 50% 12% !important; }

  /* 49b. The compounded-medications disclosure stops reading as its own
     section: smaller, quieter, narrower measure. It stays visible - it
     is a required disclosure, not decoration. The gap beneath it was
     100px before the next section, which is more air than a footnote
     needs. */
  .sh4-shop > .sh4-fda {
    font-size: 9.5px !important;
    line-height: 1.5 !important;
    max-width: 30em !important;
    color: #6B7684 !important;
    margin: 14px auto 2px !important;
  }
  .sh4-shop { padding-bottom: 0 !important; }
  .sh4-shop + section { margin-top: 10px !important; }

  /* 49c. "Confidence, on demand." needs 352px at 30px against the 307
     it has, so it fits at 26.1px. */
  /* It is .shop-head h2, not .dc-head - and only desire's is long
     enough to wrap, so it is scoped to that page rather than shrinking
     the heading on all ten. */
  body.nmc-page-desire .sh4-shop .shop-head h2 {
    font-size: 26px !important;
    line-height: 1.12 !important;
  }

  /* 49d. "Desire has two sides" - the scrim that keeps the title
     readable over the photograph while the section is CLOSED was still
     painting once it opened, which is the white line across their
     heads. It belongs to the closed state only. */
  .ds-her > .nmc-acc__hd[aria-expanded="true"]::before { display: none !important; }
  .ds-her > .nmc-acc__hd[aria-expanded="true"] { min-height: 0 !important; padding: 14px 20px !important; }
}

/* ===========================================================
   50  DESIRE — TIMING CHOOSER
   The page stacks two timing groups with plain headings. On a
   phone the second one sits far enough down to read as absent,
   so this is a loud two-up picker above both. Jump links only:
   both groups stay in the flow, nothing is hidden.
   =========================================================== */
@media (max-width: 820px) {

  .nmc-timing {
    margin: 4px 2.5vw 18px !important;
    padding: 13px 13px 12px !important;
    border-radius: 16px !important;
    background: #F6F3ED !important;
    border: 1px solid #E4DDD0 !important;
  }

  .nmc-timing__lbl {
    display: block !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #6B7684 !important;
    margin-bottom: 9px !important;
  }

  .nmc-timing__row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .nmc-timing__b {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-height: 60px !important;
    padding: 10px 10px !important;
    border-radius: 12px !important;
    border: 1.5px solid #D8D2C6 !important;
    background: #fff !important;
    text-align: left !important;
    cursor: pointer !important;
    font: inherit !important;
  }

  .nmc-timing__b strong {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #0A1628 !important;
    letter-spacing: -.01em !important;
  }

  .nmc-timing__b em {
    font-style: normal !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    color: #6B7684 !important;
  }

  /* The live one. Navy on cream reads at 13.4:1; the teal rule is
     the only accent, so it cannot be mistaken for a disabled state. */
  .nmc-timing__b.is-on {
    border-color: #0A1628 !important;
    box-shadow: inset 0 0 0 1px #0A1628, 0 2px 8px rgba(10,22,40,.10) !important;
  }
  .nmc-timing__b.is-on strong { color: #0A1628 !important; }
  .nmc-timing__b.is-on em     { color: #4A5568 !important; }

  /* The group headings themselves get a rule so the jump lands
     somewhere that looks like a destination. */
  body.nmc-page-desire .sh4-shop .dch-head {
    border-top: 2px solid #0A1628 !important;
    padding-top: 12px !important;
    margin-top: 26px !important;
  }
  body.nmc-page-desire .sh4-shop .dch-head h3 { font-size: 19px !important; }
}


/* ===========================================================
   51  A STILLED CLIP STAYS HIDDEN
   swapToStill() hides the <video> with an inline display:none,
   and an inline style loses to any !important rule. That is how
   the Man Power clip stayed live on the home page after being
   stilled: .mp-hero .mp-photo video carried display:block
   !important at (0,2,1). The doubled attribute here matches that
   specificity and, being last in the file, wins on source order.
   =========================================================== */
@media (max-width: 820px) {
  video[data-nmc-still][data-nmc-still] { display: none !important; }
}


/* ===========================================================
   52  THE CATEGORY BAR SCROLLS, VISIBLY
   Supersedes section 33's grid. store.html already ships the
   rail (flex-wrap:nowrap; overflow-x:auto) with its scrollbar
   hidden — which is exactly why nobody knew it moved. So the
   rail comes back and the scrollability is stated three ways
   at once: the last chip is cut off by the right edge, the
   edge fades, and a real progress bar sits under the row and
   tracks the thumb. The peek is the strongest of the three;
   the bar is the one that survives a still screenshot.
   =========================================================== */
@media (max-width: 820px) {

  /* undo 33 */
  .store-filter,
  .store-filter[data-edge] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    /* 34px of right padding guarantees a chip is clipped by the
       edge at rest — a half-seen chip is the clearest "more that way" */
    padding: 0 34px 0 16px !important;
    margin-bottom: 8px !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  .store-filter::-webkit-scrollbar { display: none !important; }

  .store-filter .chip {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    text-align: center !important;
    padding: 11px 16px !important;
    font-size: 13px !important;
    min-height: 42px !important;
    line-height: 1.1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    scroll-snap-align: start !important;
  }

  /* the wrapper JS puts around the rail, so the fade and the bar
     have something to anchor to that is not the scroller itself */
  .nmc-catwrap { position: relative !important; }

  .nmc-catwrap::after {
    content: '' !important;
    position: absolute !important;
    top: 0; right: 0; bottom: 14px;
    width: 46px !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(246,243,237,0) 0%, rgba(246,243,237,.92) 72%, #F6F3ED 100%) !important;
    opacity: 1 !important;
    transition: opacity .18s ease !important;
  }
  .nmc-catwrap[data-end="1"]::after { opacity: 0 !important; }

  /* the part that reads as a scrollbar even in a screenshot */
  .nmc-catbar {
    position: relative !important;
    height: 3px !important;
    margin: 0 16px 4px !important;
    border-radius: 99px !important;
    background: #E4DDD0 !important;
    overflow: hidden !important;
  }
  .nmc-catbar > i {
    position: absolute !important;
    top: 0; bottom: 0; left: 0;
    border-radius: 99px !important;
    background: #0A1628 !important;
    transition: transform .08s linear !important;
    will-change: transform !important;
  }

  .nmc-cathint {
    display: block !important;
    margin: 0 16px 10px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #6B7684 !important;
  }

  /* The chevron sat on top of the one chip that is meant to peek,
     which is the strongest signal of the four. Peek + fade + bar +
     label is already more than enough; the chevron only hid one of
     them. Keep it off here. */
  .nmc-catwrap button.nmc-more { display: none !important; }
}

/* ===========================================================
   53  THE PRODUCT KICKER STAYS AT ITS NATURAL SIZE
   An earlier draft of this line carried one drug list per audience
   and had to be shrunk to 11.2px to hold them. Founder replaced both
   with a single selling line on 10-07, so the shrink is gone - the
   copy reads at the inherited 13px on both pages. Crown's line is one
   line on a phone; glow's runs to two, which is what desire's kicker
   has always done. Nothing here forces a size.
   =========================================================== */

/* ===========================================================
   54  THE FORMAT PICKER IS ONE ROW AGAIN
   Section 26b made .nmc-choose__row a single-row grid of equal
   columns. Section 46 then widened the Man Power card chips
   with `.nmc-choose__chip { flex: 0 1 auto; min-width:
   max-content }` and reset the row to a wrapping flex — it was
   written for the card badges but matches this picker too, and
   it is later in the file, so it won. Shed's All / Injection /
   Chewable / Dissolves broke onto two rows.
   Back to one row. Equal columns, tighter padding so four
   options fit a 320px screen without a chip wrapping.
   =========================================================== */
@media (max-width: 820px) {
  .nmc-choose__row {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 1fr !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    align-items: stretch !important;
  }
  .nmc-choose__chip {
    flex: initial !important;
    min-width: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1px !important;
    padding: 7px 3px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }
  .nmc-choose__n { font-size: 10px !important; }
}

/* ===========================================================
   55  DESIRE — THE HER BAND IS READABLE OVER THE PHOTOGRAPH
   .ds-her paints desire-her-band.webp behind its own copy, so
   the eyebrow and the deck were printing straight across two
   faces: mid-grey on skin tones, no scrim, no shadow. The
   photograph is the point of the band, so it stays — a wash
   that is clear at the very top, where the heading sits on the
   lighter corner, and ramps to near-solid by the time the
   paragraph starts. The faces still read behind the text
   instead of fighting it.
   =========================================================== */
@media (max-width: 820px) {
  section.ds-her { position: relative !important; }

  section.ds-her > * { position: relative !important; z-index: 1 !important; }

  section.ds-her::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(252,247,245,0)    0%,
      rgba(252,247,245,.20)  7%,
      rgba(252,247,245,.80) 14%,
      rgba(252,247,245,.93) 24%,
      rgba(252,247,245,.96) 55%,
      rgba(252,247,245,.97) 100%
    ) !important;
  }

  /* The eyebrow sat at the same weight as the body and in a rose that
     measured barely 2:1 on skin. Darkened and tracked out so it reads
     as a label on any part of the image. */
  /* It is .ds-her-kick — the page's own class. It sits high in the
     band where the wash is still light, so it carries the contrast
     itself rather than relying on the scrim. */
  section.ds-her .ds-her-kick {
    color: #7A1F2E !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
  }
  section.ds-her .ds-her-deck { color: #2B3440 !important; }
}

/* ===========================================================
   56  DESIRE — THE TIMING PICKER SHOWS ONE GROUP AT A TIME
   Both timing groups were stacked, so someone who already knew
   they wanted the daily option still scrolled past everything
   else. The picker now switches; the inactive panel is hidden,
   one tap away, and the live one is marked clearly enough that
   nobody thinks the other is gone.
   =========================================================== */
@media (max-width: 820px) {
  .nmc-timing__b {
    position: relative !important;
    transition: border-color .14s ease, box-shadow .14s ease !important;
  }
  .nmc-timing__b.is-on::after {
    content: '' !important;
    position: absolute !important;
    left: 12px; right: 12px; bottom: -1px;
    height: 3px !important;
    border-radius: 99px 99px 0 0 !important;
    background: #00799A !important;
  }
  .nmc-timing__panel[hidden] { display: none !important; }
  .nmc-timing__panel { animation: nmcFade .18s ease both !important; }
  @keyframes nmcFade { from { opacity: 0 } to { opacity: 1 } }
}

/* ===========================================================
   57  THE WEIGHT-LOSS STILL FILLS ITS CARD
   swapToStill copies the video's inline style onto the <img>,
   and that style carried `object-fit: contain`. In a 173x192
   card a 624x624 source renders 173x173, so the runner was
   letterboxed: a flat band under him and his legs ending on a
   hard horizontal edge, while every sibling card is a filled
   photograph. Cover fills the width but the source's own lower
   edge still lands inside the card, so the image is scaled
   slightly past cover from its top — the parent clips, and the
   cut now falls outside the card instead of across him.
   Inline styles beat plain rules, hence !important throughout.
   =========================================================== */
@media (max-width: 820px) {
  img[data-nmc-still][src*="weight-loss-poster"] {
    object-fit: cover !important;
    object-position: 50% 6% !important;
    mix-blend-mode: normal !important;
    transform: scale(1.22) !important;
    transform-origin: 50% 0% !important;
  }
}

/* ===========================================================
   58  THE CHOICE CHIPS FIT THEIR WORDS
   Section 54 gave every chip an equal 1fr column. On crown that
   is 70px, while "Women Under 45" needs 92 and "Women 45+"
   needs 63 — so the longest options, which are the women's
   ones, were the squeezed ones. The count badge was taking
   room from exactly the labels that could not spare it, and
   the founder does not want the counts anyway.
   Counts out; chips size to their own text and share what is
   left over, so a row still reads as one even set.
   =========================================================== */
@media (max-width: 820px) {
  .nmc-choose__n { display: none !important; }

  .nmc-choose__row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .nmc-choose__row::-webkit-scrollbar { display: none !important; }

  .nmc-choose__chip {
    flex: 1 1 auto !important;
    min-width: max-content !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 11px 7px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }
}

/* ===========================================================
   59  D — THE ACTIVES, UNDER EACH PRODUCT NAME
   Founder: "just like on our website how each drug lists under
   each protocol. Mimic that, make it look natural."
   There are two copies of this text in every card. `.mol` lives
   inside `.visual`, absolutely positioned for the desktop
   layout — unhiding that one throws it outside the card and
   clips it. `.actives` is the other, and it already sits in the
   head's text column between the name and the format line,
   which is exactly where this belongs. It only needed showing.
   The head floats over the photograph's dark fade, so the line
   takes the same light teal the price note already uses rather
   than the desktop ink teal, which would disappear there.
   =========================================================== */
@media (max-width: 820px) {
  .sh4-rail .sh4-card .head .actives,
  .sh4-rail .sh4-card .head .nmc-actives {
    display: block !important;
    order: unset !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: .01em !important;
    color: #7FE4F0 !important;
    margin: 1px 0 3px !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-transform: none !important;
  }
  /* The lineup rail is the only place this belongs — leave the
     compare tables and the drug hub alone. */
  .sh4-rail .sh4-card .visual .actives { display: none !important; }
}

/* ===========================================================
   60  NO DEAD MENU BUTTON
   .nm-float-menu is fixed to the screen on every page, but
   /waitlist ships #slideMenu at display:none and
   /find-protocol has no #slideMenu at all. The button hit
   tests as tappable on both, so the tap just fails. JS adds
   .nmc-nomenu only when it has confirmed there is nothing to
   open, so this can never hide a working control.
   =========================================================== */
@media (max-width: 820px) {
  body.nmc-nomenu .nm-float-menu { display: none !important; }
}


/* ===========================================================
   61  SHED — THE ORBIT TILE HOLDS ITS OWN CONTENT
   Founder wants this tile to read like the desktop one: the
   wording on top, the clip under it, all four drugs on one
   line.
   Why it did not: section 28's `.sh4-tryp > .t:nth-child(n+2)
   { aspect-ratio: 16/10 }` pinned the tile to 184px at 390px
   wide, and the page gives .t overflow:hidden. The clip alone
   fills those 184px, so .orb-copy (33px) rendered at y=1254
   against a tile ending at y=1232 — present, reported visible
   by offsetParent, and clipped out of sight. The tags were
   absolutely positioned against that same squashed box.
   So: let this one tile size to its content, put the copy
   first, and bring the tags back into flow underneath.
   SCOPED TO SHED. .t3 is not shed-specific — unscoped, this
   collapsed the third tile to 95px on burn, crown, glow and
   ignite, and to 26px with five children spilling out of it on
   rewind. body.nmc-page-shed comes from markPage().
   =========================================================== */
@media (max-width: 820px) {
  body.nmc-page-shed .sh4-tryp > .t.t3 {
    aspect-ratio: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 14px 12px 12px !important;
  }

  /* The copy sits after the figure in the DOM; on a phone it leads. */
  body.nmc-page-shed .sh4-tryp > .t.t3 > .orb-copy {
    order: -1 !important;
    position: static !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  /* Founder picked X3 (2026-10-08) after seeing the clip at four sizes:
     a 330px clip gives a 429px tile. The art is 900x1202 — PORTRAIT — in
     a landscape box, with no slack at the sides or bottom (margins 0.9%,
     0.2%, 0.2%) and 15.9% empty only at the top. So object-fit must stay
     `contain`: cover at any height slices the tops off both pens, which
     the founder explicitly rejected. The pens can therefore only grow
     with the box, and 330px renders them 247x330. The clip is the only lever —
     the headline and the tag row cost the same at any size — and 329
     keeps this tile in proportion with the two above it in the row.
     contain, not cover: the orbit art is a composed frame and cropping
     it cuts the pens. 289 keeps this tile in proportion with the two
     above it in the row. */
  /* The clip IS the tile's first child — a bare <video>, not a wrapper
     around one. An earlier pass targeted `> *:first-child video` and
     matched nothing, so the feather below silently never applied while
     the height did. Target the element itself. */
  body.nmc-page-shed .sh4-tryp > .t.t3 > :first-child {
    height: 330px !important;
    min-height: 0 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    background: transparent !important;
    /* contain, never cover: the orbit is a composed frame and cropping
       it slices the pens. Nothing here may cut the artwork. */
    object-fit: contain !important;
    /* THE RECTANGLE-IN-A-RECTANGLE. The clip carries its own baked
       background — sampled rgb(236,223,195) at the top, rgb(232,217,188)
       at the bottom — against a tile of rgb(237,224,198). Close, but it
       is a GRADIENT, so a flat retint still leaves a seam along the
       bottom. Feather the outer edge into the panel instead; 16px hides
       the step and stays well clear of the pens. */
    -webkit-mask-image:
      linear-gradient(to right,  transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%) !important;
    -webkit-mask-composite: source-in !important;
    mask-image:
      linear-gradient(to right,  transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%) !important;
    mask-composite: intersect !important;
  }

  /* Was absolute against the old 184px box. In flow it simply follows. */
  body.nmc-page-shed .sh4-tryp > .t.t3 .orb-tags {
    position: static !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }
  /* Four real drug names on one line inside the tile's inner width.
     Measured against .t.t3 itself, which is what clips — not the row. */
  body.nmc-page-shed .sh4-tryp > .t.t3 .orb-tags > * {
    flex: 0 1 auto !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 6px 5px !important;
    line-height: 1.1 !important;
    min-width: 0 !important;
  }
}