/* ============================================================
   OPTML — Mobile baseline fixes
   ============================================================
   Purpose: make every page on the site readable, tappable, and
   visually correct on phones (≤768px). Loaded AFTER all other
   stylesheets so these rules win when conflicts exist.

   Desktop is intentionally untouched. Every rule lives inside a
   max-width media query, so widths above 768px receive zero
   change from this file.
   ============================================================ */

/* ---------- Universal mobile guardrails ---------- */
@media (max-width: 768px) {

  /* Backstop: nothing should ever cause horizontal scroll. If a
     specific element does, we'll target it below. */
  html, body { max-width: 100vw; overflow-x: hidden; }

  /* Body font floor — never below 16px on mobile */
  body { font-size: 16px; line-height: 1.55; }

  /* CRITICAL: any text element that's overflowing the viewport must wrap */
  h1, h2, h3, h4, h5, p, li, span, a, button {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  /* Promo bar — message + CTA side-by-side, never stacked */
  .promo-inner { flex-wrap: nowrap !important; gap: 8px 10px !important; padding: 0 8px !important; }
  .promo-item { font-size: 12px !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
  .promo-cta { white-space: nowrap !important; flex-shrink: 0; }
  .optml-topbar-inner { flex-wrap: nowrap !important; gap: 8px 10px !important; max-width: 100% !important; }
  .optml-topbar { padding: 8px 14px !important; min-height: auto !important; }
  .optml-topbar .tb-message { font-size: 11.5px !important; line-height: 1.35 !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .optml-topbar .tb-cta { font-size: 12px !important; padding: 6px 12px !important; flex-shrink: 0 !important; }

  /* Sticky CTA bar must not overlap inline CTAs above it. The body
     already gets padding-bottom: 84px on body.has-sticky-cta — verify
     it's enough, and ensure no element near the bottom of the page is
     positioned over it. */
  body.has-sticky-cta { padding-bottom: 96px !important; }
  /* Footer should never sit underneath the sticky CTA */
  .optml-footer { margin-bottom: 0 !important; }

  /* Disable reveal-on-scroll animations on mobile — they often leave
     content stuck at opacity:0 if the JS observer is slow or doesn't
     fire (e.g., bots, crawlers, slow networks). On mobile we want
     instant visibility for paid traffic. */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Megamenu fix — on mobile the mega menu is JS-injected with
     position: static (so it lays out in flow), opacity: 0, visibility: hidden.
     visibility:hidden still occupies space, leaving a 600px empty band
     below the nav. Force it to truly collapse when not open. */
  .optml-mega:not(.open) {
    display: none !important;
  }
  /* When opened on mobile, restore display so the menu shows */
  .optml-mega.open {
    display: block !important;
  }

  /* Container padding tightens on mobile */
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Touch targets — buttons and links should be ≥44px tall */
  .btn, .nav-cta, button.btn, a.btn,
  .btn-primary, .btn-secondary, .btn-white,
  .pricing-card .btn,
  .prod-hero-cta a,
  .prod-hero-cta button {
    min-height: 48px;
    padding: 14px 24px !important;
    font-size: 15.5px !important;
  }

  /* All multi-column grids: collapse safely if not already handled */
  .pricing-grid, .testimonial-grid, .info-grid, .steps-grid,
  .trial-stats, .prod-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ---------- Nav & burger menu ---------- */
@media (max-width: 768px) {

  /* Burger menu items must be readable on both light AND dark backgrounds.
     The site flips the open menu background to #1a1a1a when scrolled — text
     was inheriting --text-secondary (#5C5C5C) which is invisible on black.
     Force light text whenever menu is open over a dark background. */
  .nav-links {
    background: #FFFFFF !important;
    padding: 28px 24px !important;
    gap: 22px !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.10);
  }
  .nav-links a {
    color: #1A1A1A !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    padding: 8px 0;
    width: 100%;
    display: flex;
    align-items: center;
  }
  /* Force light theme on the menu — overrides any .nav.scrolled darkening */
  .nav.scrolled ~ .nav-links,
  .nav.scrolled .nav-links {
    background: #FFFFFF !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
  }
  .nav.scrolled ~ .nav-links a,
  .nav.scrolled .nav-links a {
    color: #1A1A1A !important;
  }

  /* Make the "Find my protocol" yellow pill stand out and tap-friendly */
  .nav-find-protocol {
    width: 100%;
    justify-content: center !important;
    padding: 12px 18px !important;
    font-size: 16px !important;
    white-space: normal !important;
  }

  /* "Get Started" CTA — full width inside menu */
  .nav-cta {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 14px 24px !important;
    font-size: 16px !important;
  }
}

/* ---------- Mobile-only hero photo for Rx pages (universal pattern) ---------- */
.rx-mobile-hero-img { display: none; }
@media (max-width: 768px) {
  /* Photo at top, content below on dark gradient background, Hims/Ro pattern.
     Default crop: focus the upper-third (faces) and avoid empty ceiling/wall space.
     Sized smaller than before (Hims/Ro mobile heroes are short, not tall). */
  .rx-mobile-hero-img {
    display: block;
    width: 100%;
    height: 48vh;
    max-height: 460px;
    min-height: 320px;
    object-fit: cover;
    object-position: center 18%;
  }
  /* Per-page focal point overrides, where the subject sits off-center.
     After image crops removed top/bottom dead space, faces sit near top of frame. */
  /* The TRT hero image (941x1439) has the man's head right at the very top of
     the photo with only a thin sliver of dark room above. Anchor the image to
     its TOP edge — combined with the section's 24px padding-top above, the
     full head + a deliberate breath of dark space sit above his forehead.
     Crop legs/feet at the bottom (user prefers this over cropping the head). */
  body.trt-page .rx-mobile-hero-img    {
    object-position: 56% 0% !important;
    height: 64vh !important;
    min-height: 540px !important;
    max-height: 640px !important;
    margin-top: 40px !important;
  }
  /* TRT page-specific overrides — keep section bg dark and let the 40px
     margin-top on the photo create breathing room above his head (the source
     image has no native headroom — the man's head sits right at the top edge). */
  body.trt-page .prod-hero.trt-hero {
    padding: 0 !important;
    background: #14110D !important;
    isolation: auto !important;
  }
  body.trt-page .prod-hero.trt-hero::before,
  body.trt-page .prod-hero.trt-hero::after {
    display: none !important;
  }
  /* Floating hologram-style symptom chips over the TRT hero photo.
     Constrained to the IMAGE area only (matches img height tokens) so the chips
     don't slide down into the paragraph copy below the photo. */
  .trt-hero-chips {
    position: absolute;
    top: 40px; left: 0; right: 0;
    height: 64vh;
    min-height: 540px;
    max-height: 640px;
    pointer-events: none;
    z-index: 3;
    display: block;
  }
  .trt-hero-chips .trt-chip {
    position: absolute;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(20,16,14,0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    font-family: 'Plus Jakarta Sans','Inter',sans-serif;
    font-size: 11.5px; font-weight: 700; letter-spacing: -0.1px;
    padding: 7px 12px;
    border-radius: 100px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.30);
    animation: trtChipFloat 4s ease-in-out infinite;
  }
  .trt-hero-chips .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #FF6B6B;
    box-shadow: 0 0 0 0 rgba(255,107,107,0.6);
    animation: trtChipPulse 1.6s ease-out infinite;
    flex-shrink: 0;
  }
  /* Position 6 chips around the man's upper body — head/neck through waist.
     Container is constrained to image height so % refer to image area, not
     the full section. The man sits center-right, so chips live in the empty
     room space on the LEFT side of the photo. */
  .trt-hero-chips .trt-chip--1 { top: 18%; left:  5%; animation-delay: 0s;   }  /* Brain fog — near head */
  .trt-hero-chips .trt-chip--2 { top: 28%; left: 10%; animation-delay: .4s;  }  /* Hallucinations — head/neck */
  .trt-hero-chips .trt-chip--3 { top: 38%; left:  4%; animation-delay: .8s;  }  /* Low energy — chest */
  .trt-hero-chips .trt-chip--4 { top: 50%; left:  9%; animation-delay: 1.2s; }  /* Mood drop — chest/abdomen */
  .trt-hero-chips .trt-chip--5 { top: 62%; left:  3%; animation-delay: 1.6s; }  /* Loss of strength — abdomen */
  .trt-hero-chips .trt-chip--6 { top: 74%; left:  8%; animation-delay: 2s;   }  /* Low libido — waist */
  @keyframes trtChipPulse {
    0% { box-shadow: 0 0 0 0 rgba(255,107,107,0.55); }
    70% { box-shadow: 0 0 0 8px rgba(255,107,107,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); }
  }
  @keyframes trtChipFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  /* Tirz hero (hand holding vial w/ yellow nails): anchor near the top so the
     full hand + vial are visible without the dark fade clipping the cap. */
  body.tirz-page .rx-mobile-hero-img   {
    object-position: center 42%;
    height: 62vh !important;
    min-height: 520px !important;
    max-height: 620px !important;
  }
  /* Stack page reuses the tirz-page styles but needs different hero positioning.
     Use cover so the photo's own gray gradient fills edge-to-edge (no border).
     Anchor low so the full vials stay in frame as the image scales up. */
  body.stack-page .rx-mobile-hero-img {
    object-position: center 60% !important;
    object-fit: cover !important;
    background: transparent !important;
    height: 64vh !important;
    min-height: 540px !important;
    max-height: 640px !important;
  }
  /* Tirz mobile hero — visual rhythm so the stacked text feels less dense.
     Hairline dividers between groups + a soft cream container around the trust pills
     so each cluster reads as its own unit instead of a wall of text. */
  body.tirz-page .prod-hero .prod-objections {
    font-size: 12.5px !important;
    color: rgba(0,0,0,0.50) !important;
    margin: 12px 0 8px !important;
    gap: 5px 14px !important;
  }
  body.tirz-page .prod-hero .legit-row[data-legit-hero] {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(0,0,0,0.07);
  }
  body.tirz-page .prod-hero .lead {
    margin-top: 18px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(0,0,0,0.07);
  }
  body.tirz-page .prod-hero .prod-trust-row {
    background: #0A0A0A !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin: 18px 0 22px !important;
    gap: 8px 14px !important;
    position: relative;
  }
  body.tirz-page .prod-hero .prod-trust-row li {
    font-size: 12.5px !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
  }
  /* Add yellow check marker on each pill so the trust message reads as a confirmed list */
  body.tirz-page .prod-hero .prod-trust-row li::before {
    content: "✓";
    color: #F8FFA1;
    font-weight: 800;
    margin-right: 6px;
  }
  body.tirz-page .prod-hero-cta + p {
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(0,0,0,0.07);
    font-size: 12.5px !important;
  }
  /* Push the bottom dark fade gradient lower so it doesn't bleed onto the vial */
  body.tirz-page .prod-hero > .container::before {
    top: -28px !important;
    height: 28px !important;
  }
  /* Sema page now uses a vial+hand product photo (same composition family as Tirz).
     Cover with low-anchored object-position so the vial reads in frame; soft cream gradient
     bg matches the photo edges so any letterbox blends. */
  body.sema-page .rx-mobile-hero-img   {
    object-position: center 50% !important;
    object-fit: cover !important;
    height: 64vh !important;
    min-height: 540px !important;
    max-height: 640px !important;
    background: linear-gradient(180deg, #FAF8F2 0%, #F0EDE6 100%);
  }
  body.hrt-page  .hrt-mobile-hero-img,
  body.hrt-page  .rx-mobile-hero-img   { object-position: center 14%; }
  body.nad-page  .rx-mobile-hero-img   { object-position: center 20%; }
  body.sermorelin-page .rx-mobile-hero-img { object-position: center 22%; }
  /* Enclomiphene hero (cloned from TRT — same dark interior photo composition).
     Mirror the TRT treatment so the photo fills the section edge-to-edge with no
     dead black bar above the image. */
  body.enclomiphene-page .rx-mobile-hero-img {
    object-position: 56% 0% !important;
    object-fit: cover !important;
    height: 64vh !important;
    min-height: 540px !important;
    max-height: 640px !important;
  }
  body.enclomiphene-page .prod-hero.trt-hero {
    padding: 0 !important;
    background: #14110D !important;
    isolation: auto !important;
  }
  body.enclomiphene-page .prod-hero.trt-hero::before,
  body.enclomiphene-page .prod-hero.trt-hero::after {
    display: none !important;
  }
  /* Microdose hero is the OPTML pharma-label two-vial photo on a soft white-grey backdrop. */
  body.microdose-page .rx-mobile-hero-img {
    object-position: center 50% !important;
    object-fit: cover !important;
    height: 64vh !important;
    min-height: 540px !important;
    max-height: 640px !important;
    background: linear-gradient(180deg, #F5F5F2 0%, #E8E8E4 100%);
  }
  /* Microdose page also gets the mobile hero pattern */
  body.microdose-page .md-hero {
    padding: 0 !important;
    background: #0a0a0a !important;
  }
  body.microdose-page .md-hero::before,
  body.microdose-page .md-hero::after {
    display: none !important;
  }
  body.microdose-page .md-hero .md-hero-grid {
    padding: 32px 18px 36px !important;
    background: #0a0a0a;
    position: relative;
    grid-template-columns: 1fr !important;
  }
  body.microdose-page .md-hero .md-hero-grid::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -50px; height: 50px;
    background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.7) 50%, rgba(10,10,10,1) 100%);
    pointer-events: none; z-index: 1;
  }
  body.microdose-page .md-hero .md-hero-grid > * { position: relative; z-index: 2; }
  /* The Rx hero containers reset for mobile photo+text layout */
  .prod-hero {
    padding: 0 !important;
    min-height: 0 !important;
    background: #14100E !important;
    display: block !important;
    position: relative;
    overflow: hidden;
  }
  .prod-hero > .container {
    position: relative;
    padding: 32px 18px 36px !important;
    background: #14100E;
    color: #fff;
  }
  /* Smooth fade between photo and content */
  .prod-hero > .container::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -50px; height: 50px;
    background: linear-gradient(180deg, rgba(20,16,14,0) 0%, rgba(20,16,14,0.7) 50%, rgba(20,16,14,1) 100%);
    pointer-events: none; z-index: 1;
  }
  .prod-hero > .container > * { position: relative; z-index: 2; }
  /* Ensure all hero text is white-on-dark for readability */
  .prod-hero h1, .prod-hero .lead, .prod-hero .prod-objections,
  .prod-hero .prod-trust-row li {
    color: #fff !important;
  }
  .prod-hero .prod-trust-row li { color: rgba(255,255,255,0.85) !important; }
  .prod-hero .prod-eyebrow {
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.18);
  }
  .prod-hero .rating-pill {
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.18);
  }
  .prod-hero .rating-pill strong { color: #fff !important; }
  .prod-hero .prod-objections span {
    color: rgba(255,255,255,0.85) !important;
  }
  .prod-hero .prod-hero-cta .btn-primary {
    background: #fff !important;
    color: #0A0A0A !important;
    font-weight: 700 !important;
    box-shadow:
      0 1px 0 rgba(0,0,0,0.04) inset,
      0 14px 32px rgba(0,0,0,0.30),
      0 0 36px rgba(248,255,161,0.42) !important;
  }
  .prod-hero .prod-hero-cta .btn-secondary {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,0.22) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .prod-hero p[style*="font-size:13px"] {
    color: rgba(255,255,255,0.65) !important;
  }
  .prod-hero p[style*="font-size:13px"] strong {
    color: #fff !important;
  }
  /* Hide the inline calc card on mobile (lives in prod-hero-grid right column) */
  .prod-hero .calc-card { margin-top: 24px; }
}

/* ---------- Product / Rx page hero (tirz, sema, trt, hrt, etc.) ---------- */
@media (max-width: 768px) {

  /* When rx-mobile-hero-img is present, prod-hero already has padding:0
     from the photo+text pattern above — do NOT add top padding here, that
     creates a black band between the nav and the photo. Only apply 96px
     padding to prod-hero variants WITHOUT a mobile photo. */
  .prod-hero-grid {
    gap: 28px !important;
  }
  .prod-eyebrow {
    font-size: 11px !important;
    padding: 5px 12px !important;
    margin-bottom: 14px !important;
  }
  .prod-hero h1 {
    font-size: clamp(22px, 5.6vw, 28px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.4px !important;
    margin-bottom: 14px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
    max-width: 100%;
  }
  /* Highlighter spans inside H1 must wrap correctly and not bleed past viewport */
  .prod-hero h1 .hl,
  h1 .hl, h2 .hl {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .prod-hero .lead {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 22px !important;
  }
  .prod-trust-row {
    gap: 12px 14px !important;
    margin-bottom: 22px !important;
  }
  .prod-trust-row li {
    font-size: 13.5px !important;
  }
  .prod-hero-cta {
    flex-direction: column;
    gap: 10px !important;
    align-items: stretch;
    width: 100%;
  }
  .prod-hero-cta a, .prod-hero-cta button {
    width: 100%;
    text-align: center;
  }
  .prod-hero-visual img {
    border-radius: 16px !important;
  }
}

/* ---------- Sections — premium breathing room ---------- */
@media (max-width: 768px) {
  .section {
    padding: 64px 0 !important;
  }
  .section-header {
    margin-bottom: 36px !important;
    padding: 0 4px;
  }
  .section-header h2 {
    font-size: clamp(24px, 6vw, 30px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 14px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  .section-header h2 .hl {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .section-header p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: rgba(0,0,0,0.62) !important;
  }
  .content-eyebrow {
    font-size: 10.5px !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.18em !important;
  }
  /* Body paragraphs in sections — better breathing */
  .section p, section p {
    line-height: 1.65;
  }
}

/* ---------- Calculator card (tirz/sema slider) ---------- */
@media (max-width: 768px) {
  .calc-card {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }
  /* The "Real Science Real Results" sticker should not bleed past container edge */
  .calc-card > img[src*="real-science"] {
    width: 78px !important;
    height: 78px !important;
    top: -10px !important;
    right: -8px !important;
  }
  /* Tirz/sema: trust pills should wrap onto multiple lines on narrow viewports */
  .prod-objections {
    font-size: 11.5px !important;
    gap: 4px 10px !important;
    margin: 6px 0 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
  }
  .prod-objections > span {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    line-height: 1.4 !important;
  }
  /* If a pill is wider than the row, allow it to break (rare but safe) */
  @supports (overflow-wrap: anywhere) {
    .prod-objections > span { overflow-wrap: anywhere; }
  }
  .prod-trust-row {
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px 14px !important;
  }
  .prod-trust-row li {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 13.5px !important;
  }
  .rating-pill {
    font-size: 12.5px !important;
    padding: 6px 12px !important;
  }
  .rating-pill strong {
    font-weight: 700;
  }
  /* Quick answer panel sizing */
  .quick-answer { padding: 22px 18px !important; border-radius: 14px !important; }
  .quick-answer p { font-size: 14.5px !important; line-height: 1.6 !important; }
  .quick-answer cite { font-size: 12px !important; }
  /* Witb (what's in the box) section */
  .witb-section { padding: 56px 0 !important; }
  .witb-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .witb-item { padding: 22px 20px !important; }
  .witb-h2 { font-size: clamp(26px, 6vw, 32px) !important; line-height: 1.18 !important; }
  .witb-sub { font-size: 15.5px !important; }
  /* Marquee testimonials — smaller cards on mobile */
  .tm-section { padding: 56px 0 !important; }
  .tm-card { flex: 0 0 280px !important; padding: 22px !important; min-height: 240px !important; }
  .tm-card .testimonial-quote { font-size: 14px !important; }
  .calc-card h3 {
    font-size: 19px !important;
  }
  .calc-card-sub {
    font-size: 13px !important;
    margin-bottom: 18px !important;
  }
  .calc-weight-num {
    font-size: 44px !important;
    letter-spacing: -1.5px !important;
  }
  .calc-weight-unit {
    font-size: 16px !important;
  }
  .calc-results {
    margin-top: 22px !important;
    padding-top: 20px !important;
  }
  .calc-results-row {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
  }
  .calc-col {
    padding: 12px 6px !important;
  }
  .calc-col-label {
    font-size: 10px !important;
    letter-spacing: 0.6px !important;
  }
  .calc-col-val {
    font-size: 18px !important;
  }
  .calc-col-sub {
    font-size: 10px !important;
  }

  /* Bigger thumb for touch */
  .calc-slider::-webkit-slider-thumb {
    width: 28px !important;
    height: 28px !important;
  }
  .calc-slider::-moz-range-thumb {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ---------- Pricing ---------- */
@media (max-width: 768px) {
  .pricing-grid {
    max-width: 100% !important;
    padding: 0 !important;
  }
  .pricing-card {
    padding: 26px 22px !important;
    border-radius: 18px !important;
  }
  .pricing-title {
    font-size: 16px !important;
  }
  .pricing-price {
    font-size: 38px !important;
  }
  .pricing-features li {
    font-size: 14px !important;
    padding: 10px 0 !important;
  }
  /* Trust strip above pricing (and other places) */
  .trust-strip {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 8px !important;
    padding: 10px 14px !important;
    font-size: 11.5px !important;
    text-align: center;
  }
  .trust-strip span {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
  /* Green guarantee strip — collapse to multi-line on mobile */
  [data-guarantee-strip] {
    flex-direction: column !important;
    text-align: center !important;
    padding: 14px 18px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }
  /* LegitScript hero link — consistent 24px gap above (matches the rhythm
     between How-it-works button → pricing line → LegitScript → calc card). */
  .legit-row[data-legit-hero] {
    width: fit-content;
    margin: 24px auto 0 !important;
    display: inline-flex !important;
  }
  .legit-row[data-legit-bottom] {
    width: fit-content;
    margin: 0 auto 14px !important;
  }
  /* Pricing line spacing — 24px above and below, matches the button rhythm */
  .prod-hero p[style*="Starting at"] {
    margin: 24px 0 0 !important;
  }
  /* Calc card on mobile (drag-to-estimate) — 24px below LegitScript, not 40px */
  .prod-hero .calc-card { margin-top: 24px !important; }
  .prod-hero-grid { gap: 24px !important; }
}

/* ---------- Steps / How it works ---------- */
@media (max-width: 768px) {
  .step-card {
    padding: 22px 20px !important;
    border-radius: 14px !important;
  }
  .step-card h4 {
    font-size: 17px !important;
  }
  .step-card p {
    font-size: 14.5px !important;
  }
}

/* ---------- Trial / data card ---------- */
@media (max-width: 768px) {
  .trial-card {
    padding: 26px 20px !important;
    border-radius: 18px !important;
  }
  .trial-stat {
    padding: 16px !important;
  }
  .trial-stat-num {
    font-size: 32px !important;
    letter-spacing: -1px !important;
  }
  .trial-stat-label {
    font-size: 12.5px !important;
  }
  .trial-source {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
  }
}

/* ---------- Info / benefits cards ---------- */
@media (max-width: 768px) {
  .info-card {
    padding: 22px 20px !important;
  }
  .info-card h4 {
    font-size: 16.5px !important;
  }
  .info-card p {
    font-size: 14.5px !important;
  }
  .info-card-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
  }
}

/* ---------- Testimonials ---------- */
@media (max-width: 768px) {
  .testimonial-card {
    padding: 24px 20px !important;
    border-radius: 14px !important;
  }
  .testimonial-quote {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }
}

/* ---------- FAQ ---------- */
@media (max-width: 768px) {
  .faq-q,
  details.faq-item summary {
    padding: 18px 20px !important;
    font-size: 15.5px !important;
    gap: 12px !important;
  }
  .faq-a,
  details.faq-item .faq-a {
    padding: 0 20px 20px !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }
}

/* ---------- CTA section (footer-of-page CTA panel) ---------- */
@media (max-width: 768px) {
  .cta-section {
    padding: 56px 22px 48px !important;
    margin: 24px 16px !important;
    border-radius: 22px !important;
  }
  .cta-section h2 {
    font-size: clamp(26px, 6vw, 32px) !important;
    margin-bottom: 12px !important;
  }
  .cta-section p {
    font-size: 15.5px !important;
    margin-bottom: 24px !important;
  }
  .cta-section .btn-white {
    padding: 16px 30px !important;
    font-size: 15.5px !important;
    width: 100%;
    max-width: 380px;
  }
  /* Trust strip in CTA — force exactly 2 chips per line, 2 lines total. */
  .cta-section .trust-strip[data-bottom] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px 10px !important;
    margin: 0 auto 22px !important;
    max-width: 320px !important;
    font-size: 11px !important;
    flex-wrap: nowrap !important;
  }
  .cta-section .trust-strip[data-bottom] span {
    padding: 6px 8px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.02em !important;
    justify-content: center !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
  .cta-section .legit-row[data-legit-bottom] {
    margin: 0 0 18px !important;
  }
}

/* ---------- Footer ---------- */
@media (max-width: 768px) {
  .optml-footer {
    padding: 56px 0 0 !important;
  }
  .optml-footer-grid {
    margin-bottom: 40px !important;
  }
  .optml-footer-grid h4 {
    font-size: 12px !important;
    margin: 0 0 16px !important;
  }
  .optml-footer-grid li {
    margin: 0 0 11px !important;
  }
  .optml-footer-grid a {
    font-size: 16px !important;
  }
  .optml-footer-legal {
    padding: 18px 0 22px !important;
  }
  .optml-footer-legitscript img {
    width: 64px !important;
  }
}

/* ---------- Tables (comparison spec sheets etc.) ---------- */
@media (max-width: 768px) {
  /* Any plain HTML table inside a .container becomes horizontally scrollable */
  .container table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- Generic safety net for common layout bugs ---------- */
@media (max-width: 768px) {
  /* Force any sneaky overflowing element to behave — but DO NOT override
     explicit dimensions on logo, nav icons, vials, etc. */
  [class*="hero"] iframe,
  [class*="hero"] video,
  [class*="hero"] picture {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Generic image cap — only width, never height (which would break logos/icons) */
  img:not(.logo img):not([style*="height"]) {
    max-width: 100%;
  }

  /* Headings that rely on huge clamp() values can still overflow */
  h1, h2, h3 { word-wrap: break-word; overflow-wrap: break-word; }

  /* Card-shadow elements often have horizontal margins that push them out */
  [class*="card"] { max-width: 100%; }
}

/* ============================================================
   PAGE-SPECIFIC OVERRIDES
   These target IDs/classes unique to single pages.
   ============================================================ */

/* ---------- HRT page (the worst offender) ---------- */
@media (max-width: 768px) {
  /* HRT desktop image is positioned center-right showing leg detail. On
     mobile that crop shows just a leg with no face. Replace background
     entirely with a dark gradient that reads as elegant and clinical
     rather than awkwardly cropped. The subject can re-appear via a
     dedicated mobile image inserted later if needed. */
  body.hrt-page .prod-hero {
    min-height: 820px !important;
    /* Dedicated mobile hero: subject (50s woman) shown at top, text overlay
       at bottom on a darkening gradient that maintains image legibility above */
    background-image:
      linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0) 38%, rgba(10,10,10,0.40) 52%, rgba(10,10,10,0.85) 72%, rgba(10,10,10,0.96) 100%),
      url('images/hrt-hero-mobile.png') !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    align-items: flex-end !important;
    display: flex !important;
  }
  body.hrt-page .prod-hero > .container {
    padding: 0 18px 36px !important;
    align-self: flex-end !important;
    width: 100% !important;
  }
  /* Hide the eyebrow + rating-pill on mobile to give the photo room to breathe.
     The H1 and lead carry enough message — eyebrow is repetitive. */
  body.hrt-page .prod-hero .prod-eyebrow,
  body.hrt-page .prod-hero .rating-pill {
    display: none !important;
  }
  /* Tighten lead and trust-pill block so it fits in the lower 40% of hero */
  body.hrt-page .prod-hero .lead {
    margin-bottom: 14px !important;
  }
  body.hrt-page .prod-trust-row {
    margin-bottom: 16px !important;
  }
  body.hrt-page .prod-hero h1 {
    font-size: clamp(22px, 5.4vw, 28px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.3px !important;
    margin-bottom: 16px !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.45);
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  body.hrt-page .prod-hero h1 .hl {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  body.hrt-page .prod-hero .lead {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  body.hrt-page .prod-hero .lead {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 22px !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  }
  body.hrt-page .prod-trust-row {
    gap: 6px !important;
  }
  body.hrt-page .prod-trust-row li {
    font-size: 12px !important;
    padding: 5px 10px !important;
  }
  /* Bigger tap target for primary CTA, full width on mobile */
  body.hrt-page .prod-hero-cta {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  body.hrt-page .prod-hero-cta .btn {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 15.5px !important;
    padding: 16px 22px !important;
  }
  /* Eyebrow + rating chip — keep small on mobile */
  body.hrt-page .prod-hero-text .prod-eyebrow {
    font-size: 10.5px !important;
    padding: 5px 11px !important;
    margin-bottom: 12px !important;
  }
  body.hrt-page .prod-hero-text .rating-pill {
    font-size: 12px !important;
    padding: 6px 12px !important;
    margin-bottom: 18px !important;
  }
  /* Floating symptom chips already hidden at 900px in original CSS; keep that */
  body.hrt-page .hrt-hero-chips { display: none !important; }
  /* Subtext lines (italic / small) */
  body.hrt-page .prod-hero-text > p[style*="font-style:italic"] {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  /* HRT body sections — tighten typography that uses huge clamp values */
  body.hrt-page .hrt-tx { padding: 56px 0 !important; }
  body.hrt-page .hrt-tx-inner { padding: 0 18px !important; }
  body.hrt-page .hrt-tx-top { gap: 18px !important; margin-bottom: 36px !important; }
  body.hrt-page .hrt-tx-top h2 {
    font-size: clamp(32px, 8vw, 42px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
  }
  body.hrt-page .hrt-tx-top p {
    font-size: 15.5px !important;
    line-height: 1.6 !important;
  }
  body.hrt-page .hrt-tx-grid { gap: 14px !important; }
  body.hrt-page .hrt-tx-card { padding: 22px 22px 20px !important; }

  body.hrt-page .hrt-graph-section { padding: 56px 0 !important; }
  body.hrt-page .hrt-graph-inner { padding: 0 18px !important; gap: 24px !important; }
  body.hrt-page .hrt-graph-section h2 {
    font-size: clamp(28px, 7vw, 38px) !important;
    line-height: 1.08 !important;
  }
  body.hrt-page .hrt-graph-section .hrt-graph-lede {
    font-size: 15.5px !important;
  }
  body.hrt-page .hrt-graph-img { padding: 12px !important; border-radius: 14px !important; }
  body.hrt-page .hrt-graph-cap { font-size: 11.5px !important; margin-top: 14px !important; }
}

/* ---------- TRT page (dark hero, holographic calc) ---------- */
@media (max-width: 768px) {
  .test-estimator, .t-estimator {
    padding: 20px !important;
  }
  /* TRT hero — dark background, must keep text legible */
  .trt-hero {
    padding: 96px 0 48px !important;
  }
  /* Push the bg image to the right so subject (which is on right side of trt-hero-bg) doesn't get cropped weirdly */
  .trt-hero::before {
    background-position: 75% 18% !important;
  }
  /* Strengthen the dark gradient overlay on mobile so text reads cleanly */
  .trt-hero::after {
    background:
      linear-gradient(180deg, rgba(8,8,10,0.85) 0%, rgba(8,8,10,0.55) 50%, rgba(8,8,10,0.75) 100%) !important;
  }
  .trt-hero .prod-hero-grid {
    gap: 28px !important;
  }
  /* Holographic calc — keep its dark glassmorphic styling but tighten padding */
  .trt-hero .calc-card.holo {
    padding: 22px 20px !important;
    border-radius: 22px !important;
  }
  .trt-hero .calc-card.holo h3 {
    font-size: 16px !important;
  }
  .trt-hero .calc-card.holo .calc-weight-num {
    font-size: 42px !important;
  }
  /* TRT "Choose your path" comparison */
  .cyp-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* TRT testosterone-by-age chart, T-band chips */
  .t-band-chips, .t-chip-row {
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  /* "How it works" holo steps row — flatten the special background line */
  .how-holo .steps-grid::before { display: none !important; }
}

/* ---------- Body fat calculator and other calculator pages ---------- */
@media (max-width: 768px) {
  /* Calculator inputs need to be tap-friendly */
  input[type="number"], input[type="text"], input[type="email"],
  select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom-on-focus */
    padding: 12px 14px !important;
    min-height: 48px;
    width: 100%;
    box-sizing: border-box;
  }
  /* Inline two-column input rows fall back to stacked */
  .calc-input-row, .form-row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  /* Long-form code/formula text from explainer pages */
  pre, code {
    font-size: 13px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px !important;
    border-radius: 8px;
  }
  /* Pro-tip / callout boxes */
  blockquote, .callout, .pro-tip, .tip-box {
    padding: 16px 18px !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }
  /* Tool/calculator page hero — only when it has .hero h1 + .lede pattern (NOT homepage) */
  .hero h1 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .hero p.lede {
    font-size: 15.5px !important;
    line-height: 1.6 !important;
  }
  .hero-eyebrow {
    font-size: 11px !important;
    padding: 6px 12px !important;
    margin-bottom: 14px !important;
  }
  /* Calculator grid (calc-grid is the form + results layout) */
  .calc-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .calc-card {
    padding: 22px 18px !important;
  }
  /* Big result number — shrink for mobile */
  .result-primary {
    font-size: 56px !important;
  }
  .result-label {
    font-size: 10.5px !important;
  }
  .delta-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  /* Segmented control (Men/Women etc.) */
  .form-segmented {
    flex-wrap: wrap;
    gap: 4px !important;
  }
  .form-segmented label {
    font-size: 13px !important;
    padding: 9px 10px !important;
  }
}

/* ---------- Microdose page (md-* selectors) ---------- */
@media (max-width: 768px) {
  body.microdose-page .md-hero-grid,
  body.microdose-page .md-vs,
  body.microdose-page .md-who,
  body.microdose-page .md-mech-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  body.microdose-page .md-hero-meter {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
  }
  body.microdose-page .pricing-grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
  body.microdose-page .steps-grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Pricing page (sitewide pricing grid) ---------- */
@media (max-width: 768px) {
  /* Pricing page uses repeat(auto-fit, minmax(280px, 1fr)) which would
     collapse on its own, but force 1fr to be safe with inline overrides */
  body.pricing-page .pricing-grid {
    grid-template-columns: 1fr !important;
    padding: 0 18px !important;
  }
}

/* ---------- Weight-loss page GLP-1 comparison band ---------- */
@media (max-width: 768px) {
  .glp-hero {
    padding: 28px 18px !important;
    border-radius: 22px !important;
  }
  .glp-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 !important;
  }
  .glp-vial {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 200px !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .glp-hero-text {
    text-align: center !important;
    align-items: center !important;
    padding: 0 !important;
  }
  .glp-headline {
    font-size: 22px !important;
  }
  .glp-blurb {
    font-size: 14.5px !important;
  }
  .glp-badge-col, .glp-hero-spacer {
    display: none !important;
  }
  .glp-h2 {
    font-size: clamp(28px, 7vw, 36px) !important;
    line-height: 1.1 !important;
  }
  .glp-section {
    padding: 48px 18px 40px !important;
  }
}

/* ---------- Sticky mobile CTA bar (revenue pages) ---------- */
@media (max-width: 768px) {
  /* Reserve space at the bottom of the page so the sticky bar
     doesn't cover the footer. Revenue pages opt in by adding
     class "has-sticky-cta" to <body>. */
  body.has-sticky-cta {
    padding-bottom: 84px;
  }
  .sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #FFFFFF;
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
    padding: 12px 16px env(safe-area-inset-bottom, 12px) 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .sticky-cta-price {
    flex: 1;
    line-height: 1.2;
  }
  .sticky-cta-price strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #0A0A0A;
    letter-spacing: -0.5px;
  }
  .sticky-cta-price span {
    font-size: 12px;
    color: rgba(0,0,0,0.55);
  }
  .sticky-cta a.sticky-cta-btn {
    background: #0A0A0A;
    color: #FFFFFF;
    padding: 14px 22px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    white-space: nowrap;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}

/* Hide sticky CTA on desktop — it's a mobile-only pattern */
@media (min-width: 769px) {
  .sticky-cta { display: none; }
}

/* ---------- Hero image cards on homepage ---------- */
@media (max-width: 768px) {
  /* Stack the women/men tiles vertically so each fills the viewport width.
     Side-by-side on a narrow screen splits faces and looks broken. */
  .hero-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .hero-card {
    aspect-ratio: 16/11 !important;
    border-radius: 20px !important;
    overflow: hidden;
  }
  /* Push the woman's image left so face/torso clears the top-right text */
  .hero-card[href*="weight-loss"] .hero-card-bg {
    object-position: 28% 28% !important;
  }
  /* Push the man's image right so face/torso clears the top-left text */
  .hero-card[href*="trt"] .hero-card-bg {
    object-position: 76% 28% !important;
  }
  /* Stronger directional gradients so the headline always reads clean,
     even if image positioning shifts on different devices */
  .hero-card-overlay.tr {
    background:
      linear-gradient(225deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 38%, rgba(0,0,0,0) 60%),
      linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,0.20) 100%) !important;
  }
  .hero-card-overlay.bl {
    background:
      linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 38%, rgba(0,0,0,0) 60%),
      linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,0.20) 100%) !important;
  }
  .hero-card-content h3 {
    font-size: 19px !important;
    line-height: 1.16 !important;
    max-width: none !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.30);
    margin: 0;
  }
  .hero-card-content { top: 22px !important; }
  .hero-card-content.tr {
    right: 22px !important;
    left: auto !important;
    text-align: right !important;
    max-width: none !important;
  }
  .hero-card-content.bl {
    left: 22px !important;
    right: auto !important;
    text-align: left !important;
    max-width: none !important;
  }
  .hero-card-btn {
    bottom: 16px !important;
    right: 16px !important;
    padding: 11px 18px !important;
    font-size: 13.5px !important;
  }
}

/* ---------- Homepage hero (modern medicine) ---------- */
@media (max-width: 768px) {
  /* Homepage hero is .hero with .hero-top inside */
  body:not(.calc-page) .hero {
    padding: 24px 0 28px !important;
  }
  .hero-top {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .hero-headline {
    font-size: clamp(34px, 8.5vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1.2px !important;
  }
  .hero-sub {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
  }
  .hero-trust {
    gap: 10px !important;
  }
  .hero-trust li {
    font-size: 13.5px !important;
  }
}

/* ---------- Press strip on homepage (marquee — let inline page CSS drive sizing) ---------- */

/* ---------- "What we treat" carousel on homepage ---------- */
@media (max-width: 768px) {
  .product-grid {
    gap: 14px !important;
  }
  .product-card {
    min-width: 78vw !important;
  }
  .product-card-body h3 {
    font-size: 17px !important;
  }
  .product-card-body p {
    font-size: 13.5px !important;
  }
}

/* ---------- Calculator pages: stronger typographic emphasis on mobile ---------- */
@media (max-width: 768px) {
  /* Body copy across calculator pages reads too thin. Bump weight + contrast. */
  body.calc-page .container > p,
  body.calc-page .hero p,
  body.calc-page .quick-answer,
  body.calc-page .answer-block,
  body.calc-page .why-block,
  body.calc-page .formula-block p,
  body.calc-page section p,
  body.calc-page .article-body p,
  body.calc-page .narrative p {
    font-weight: 500;
    color: #1A1A1A;
  }
  /* Headings: larger, tighter, bolder */
  body.calc-page h2 { font-weight: 800 !important; }
  body.calc-page h3 { font-weight: 700 !important; color: #0A0A0A !important; }
  /* Strong/bold inside calc copy: extra weight (light backgrounds only).
     Dark hero/result panels keep their own light-on-dark strong color. */
  body.calc-page strong, body.calc-page b { font-weight: 800; color: #0A0A0A; }
  body.calc-page .result-head strong,
  body.calc-page .result-head b,
  body.calc-page .calc-hero strong,
  body.calc-page .calc-hero b,
  body.calc-page [data-dark-section] strong,
  body.calc-page [data-dark-section] b {
    color: inherit;
  }
  body.calc-page .result-headline strong { color: var(--accent-yellow, #F8FFA1) !important; }
}

/* ---------- Formula collapse: Devine/Robinson/Miller/Hamwi style ---------- */
details.formula-collapse {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  margin: 14px 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 6px 18px -10px rgba(0,0,0,0.08);
  overflow: hidden;
}
details.formula-collapse > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: #0A0A0A;
  letter-spacing: -0.2px;
  position: relative;
}
details.formula-collapse > summary::-webkit-details-marker { display: none; }
details.formula-collapse > summary .fc-year { font-size: 12px; color: rgba(0,0,0,0.45); font-weight: 600; letter-spacing: 0.06em; }
details.formula-collapse > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 22px;
  line-height: 1;
  color: rgba(0,0,0,0.45);
}
details.formula-collapse[open] > summary::after { content: "−"; }
details.formula-collapse[open] > summary { border-bottom: 1px solid rgba(0,0,0,0.06); }
details.formula-collapse .fc-body { padding: 16px 22px 20px; }
details.formula-collapse .fc-body ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; font-size: 15px; }
details.formula-collapse .fc-body p { font-size: 15px; line-height: 1.65; color: rgba(0,0,0,0.78); margin: 0; font-weight: 500; }
details.formula-collapse .fc-body strong { color: #0A0A0A; font-weight: 800; }

/* ---------- Premium tool grid: replaces flat .lk-card list ---------- */
@media (min-width: 769px) {
  body.calc-page .lk-grid { gap: 18px; }
}
body.calc-page .lk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 20px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  text-decoration: none;
  color: #0A0A0A;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 22px -14px rgba(0,0,0,0.10);
  overflow: hidden;
}
body.calc-page .lk-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #F8FFA1 0%, #B89968 100%);
  border-top-left-radius: 18px; border-bottom-left-radius: 18px;
  opacity: 0.85;
}
body.calc-page .lk-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0,0,0,0.16);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 16px 36px -16px rgba(0,0,0,0.18);
}
body.calc-page .lk-card .lk-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: #5C4A1B; background: #F8FFA1; padding: 4px 10px; border-radius: 100px;
  align-self: flex-start;
}
body.calc-page .lk-card .lk-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16.5px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.25;
  color: #0A0A0A; margin: 4px 0 2px;
}
body.calc-page .lk-card .lk-desc {
  font-size: 13.5px; line-height: 1.5; color: rgba(0,0,0,0.62); font-weight: 500;
}
body.calc-page .lk-card::after {
  content: "→";
  position: absolute; right: 18px; top: 22px;
  font-size: 16px; color: rgba(0,0,0,0.32); transition: transform 0.2s, color 0.2s;
}
body.calc-page .lk-card:hover::after { transform: translateX(4px); color: #0A0A0A; }
body.calc-page .lk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
@media (max-width: 560px) {
  body.calc-page .lk-grid { grid-template-columns: 1fr; gap: 12px; }
  body.calc-page .lk-card { padding: 18px 18px 16px; }
}

/* ---------- Quick Answer: collapsible details (works without JS) ---------- */
details.qa-collapse {
  background: #FFFFFF;
  border: 1px solid rgba(10,10,10,0.10);
  border-left: 4px solid #F8FFA1;
  border-radius: 14px;
  padding: 18px 22px;
  margin: 22px 0;
  box-shadow: 0 1px 2px rgba(10,10,10,0.04), 0 12px 28px -16px rgba(10,10,10,0.12);
}
details.qa-collapse > summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0A0A0A;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
}
details.qa-collapse > summary::-webkit-details-marker { display: none; }
details.qa-collapse > summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: #5C5C5C;
  transition: transform 0.2s;
}
details.qa-collapse[open] > summary::after { content: "−"; }
details.qa-collapse[open] { background: #FFFFFF; }
details.qa-collapse .qa-body {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.65;
  color: #1A1A1A;
  font-weight: 500;
}
details.qa-collapse .qa-body strong { font-weight: 700; color: #0A0A0A; }

/* ---------- Footer: collapsible sections on mobile (Hims pattern) ---------- */
@media (max-width: 760px) {
  .optml-footer .of-grid,
  .footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .optml-footer .of-grid > div,
  .footer .footer-grid > div {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 4px 0;
  }
  .optml-footer .of-grid h4,
  .footer .footer-grid h4 {
    cursor: pointer;
    margin: 0 !important;
    padding: 18px 0 18px;
    color: rgba(255,255,255,0.95) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
  }
  .optml-footer .of-grid h4::after,
  .footer .footer-grid h4::after {
    content: "+";
    font-size: 22px;
    line-height: 1;
    font-weight: 300;
    color: rgba(255,255,255,0.7);
    transition: transform 0.2s;
  }
  .optml-footer .of-grid > div.optml-foot-open > h4::after,
  .footer .footer-grid > div.optml-foot-open > h4::after { content: "−"; }
  .optml-footer .of-grid ul,
  .footer .footer-grid ul {
    display: none;
    padding: 0 0 18px !important;
    margin: 0 !important;
  }
  .optml-footer .of-grid > div.optml-foot-open > ul,
  .footer .footer-grid > div.optml-foot-open > ul {
    display: block !important;
  }
  .optml-footer .of-grid li,
  .footer .footer-grid li {
    padding: 8px 0 !important;
    margin: 0 !important;
  }
  .optml-footer .of-grid a,
  .footer .footer-grid a {
    font-size: 15px !important;
  }
}

/* ---------- 5-step "How it works" with phone mockup (Ro pattern) ---------- */
.hiw5 {
  background: linear-gradient(180deg, #FAFAF7 0%, #F1ECE0 100%);
  padding: 80px 0 88px;
}
.hiw5-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  padding: 0 24px;
}
.hiw5-phone-wrap {
  position: sticky; top: 90px;
  display: flex; justify-content: center;
}
.hiw5-phone {
  width: 280px;
  height: 580px;
  background: #0A0A0A;
  border-radius: 38px;
  padding: 12px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.40), 0 0 0 1px rgba(0,0,0,0.10);
  position: relative;
}
.hiw5-phone::before {
  content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 26px; background: #0A0A0A; border-radius: 14px; z-index: 2;
}
.hiw5-screen {
  width: 100%; height: 100%; background: #fff; border-radius: 28px; overflow: hidden;
  position: relative; padding: 50px 22px 24px;
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
}
.hiw5-screen-eye {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(0,0,0,0.45); margin-bottom: 6px;
}
.hiw5-screen h5 {
  font-size: 17px; font-weight: 800; letter-spacing: -0.3px; margin: 0 0 18px; color: #0A0A0A;
}
.hiw5-screen-q {
  background: #F4F4F2; border-radius: 12px; padding: 14px 14px;
  font-size: 13px; font-weight: 600; color: #0A0A0A; margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.hiw5-screen-q .checkbox {
  width: 18px; height: 18px; border: 1.5px solid rgba(0,0,0,0.25); border-radius: 5px; flex-shrink: 0;
}
.hiw5-screen-q.active { background: rgba(248,255,161,0.45); border: 1px solid rgba(248,255,161,1); }
.hiw5-screen-q.active .checkbox { background: #0A0A0A; border-color: #0A0A0A; position: relative; }
.hiw5-screen-q.active .checkbox::after { content: "✓"; color: #F8FFA1; font-size: 12px; font-weight: 800; position: absolute; top: -1px; left: 3px; }
.hiw5-screen-cta {
  position: absolute; bottom: 24px; left: 22px; right: 22px;
  background: #0A0A0A; color: #fff; text-align: center;
  padding: 13px; border-radius: 100px; font-size: 13.5px; font-weight: 700;
}
.hiw5-steps { display: flex; flex-direction: column; gap: 4px; }
.hiw5-step {
  position: relative; padding: 18px 0 18px 56px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.hiw5-step:last-child { border-bottom: none; }
.hiw5-step::before {
  content: ""; position: absolute; left: 17px; top: 32px; bottom: -4px;
  width: 1.5px; background: rgba(0,0,0,0.12);
}
.hiw5-step:last-child::before { display: none; }
.hiw5-step-num {
  position: absolute; left: 0; top: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  background: #0A0A0A; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: -0.3px;
  z-index: 1;
}
.hiw5-step.active .hiw5-step-num { background: #F8FFA1; color: #0A0A0A; box-shadow: 0 0 0 3px rgba(10,10,10,0.92); }
.hiw5-step h4 {
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  font-size: 19px; font-weight: 800; letter-spacing: -0.4px;
  margin: 0 0 6px; color: #0A0A0A; line-height: 1.2;
}
.hiw5-step p {
  font-size: 14.5px; line-height: 1.55; color: rgba(0,0,0,0.65); margin: 0; font-weight: 500;
}
@media(max-width:900px) {
  .hiw5 { padding: 56px 0 64px; }
  .hiw5-grid { grid-template-columns: 1fr; gap: 36px; }
  .hiw5-phone-wrap { position: static; }
  .hiw5-phone { width: 240px; height: 480px; }
  .hiw5-screen { padding: 42px 18px 22px; }
}

/* ---------- Massive-simplicity intro (Hims pattern: one headline, one CTA, big product) ---------- */
.simple-intro {
  text-align: center;
  padding: 80px 24px 100px;
  background: #FAFAF7;
  position: relative;
  overflow: hidden;
}
.simple-intro h2 {
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  font-size: clamp(36px, 5.6vw, 64px);
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1.05;
  color: #0A0A0A;
  margin: 0 0 22px;
  max-width: 880px;
  margin-left: auto; margin-right: auto;
}
.simple-intro p {
  font-size: 17px; line-height: 1.55;
  color: rgba(0,0,0,0.62);
  max-width: 580px; margin: 0 auto 28px;
}
.simple-intro .simple-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #0A0A0A; color: #fff;
  padding: 16px 32px; border-radius: 100px;
  font-weight: 800; font-size: 15.5px; text-decoration: none;
  letter-spacing: -0.2px;
}
.simple-intro .simple-product {
  margin-top: 48px; max-width: 320px; margin-left: auto; margin-right: auto;
}
.simple-intro .simple-product img { width: 100%; height: auto; display: block; }
@media(max-width:560px) {
  .simple-intro { padding: 48px 18px 60px; }
  .simple-intro h2 { font-size: 32px; letter-spacing: -1px; margin-bottom: 14px; }
  .simple-intro p { font-size: 15.5px; }
}

/* ---------- FAQ category groupings (Hims pattern) ---------- */
.faq.faq-grouped .faq-group-h {
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #0A0A0A;
  margin: 32px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.faq.faq-grouped .faq-group-h:first-child { margin-top: 4px; }

/* ---------- Biomarker trend graph (Hims pattern) ---------- */
.bio-trend {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: 22px;
  padding: 28px 28px 24px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 16px 36px -16px rgba(0,0,0,0.14);
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
}
.bio-trend-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.bio-trend-eye {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(0,0,0,0.45);
}
.bio-trend h4 {
  font-size: 22px; font-weight: 800; letter-spacing: -0.5px;
  margin: 6px 0 0; color: #0A0A0A;
}
.bio-trend-pill {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  background: rgba(91,214,160,0.18); color: #00B865;
  padding: 5px 11px; border-radius: 100px; text-transform: uppercase;
}
.bio-trend-svg-wrap { position: relative; padding: 8px 0 4px; }
.bio-trend-axis {
  display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(0,0,0,0.45); font-weight: 600;
  margin-top: 6px; padding: 0 4px;
}
.bio-trend-foot {
  font-size: 11.5px; color: rgba(0,0,0,0.45); margin-top: 14px;
  text-align: center; line-height: 1.5;
}
@media(max-width:560px) {
  .bio-trend { padding: 22px 20px 20px; border-radius: 18px; }
  .bio-trend h4 { font-size: 19px; }
}

/* ---------- 2-column compare summary (Hims/Galleri pattern) ---------- */
/* The big competitor table stays for SEO + transparency, but the headline
   compare is a tight 2-column "OPTML vs the rest" card. */
.cmp2 {
  max-width: 720px;
  margin: 0 auto 28px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 44px -24px rgba(20,20,30,0.14);
}
.cmp2-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #FAFAF7;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.cmp2-head > div {
  padding: 18px 20px 14px;
  text-align: center;
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
}
.cmp2-head .cmp2-us {
  background: #F8FFA1;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.06em;
  color: #0A0A0A;
}
.cmp2-head .cmp2-them {
  font-weight: 600;
  font-size: 13.5px;
  color: rgba(0,0,0,0.55);
  letter-spacing: 0.06em;
}
.cmp2-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.cmp2-row:last-child { border-bottom: none; }
.cmp2-row > div {
  padding: 14px 20px;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmp2-row .cmp2-us-cell { background: #FCFFF0; font-weight: 700; color: #0A0A0A; }
.cmp2-row .cmp2-them-cell { color: rgba(0,0,0,0.6); font-weight: 500; }
.cmp2-row .cmp2-us-cell::before { content: "✓"; color: #2D7A5A; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.cmp2-row .cmp2-them-cell.no::before { content: "−"; color: rgba(0,0,0,0.3); font-weight: 700; font-size: 18px; flex-shrink: 0; }
.cmp2-foot {
  text-align: center;
  font-size: 12.5px;
  color: rgba(0,0,0,0.5);
  padding: 14px 20px;
  background: #FAFAF7;
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* ---------- Sticky section sub-nav (Hims pattern) ---------- */
/* Add <nav class="rx-subnav"> with <a href="#anchor"> children to any product page.
   It auto-sticks just below the main nav on scroll. */
.rx-subnav {
  position: sticky;
  top: 0;
  z-index: 800;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rx-subnav::-webkit-scrollbar { display: none; }
.rx-subnav-inner {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  min-width: 100%;
  justify-content: flex-start;
}
.rx-subnav a {
  flex-shrink: 0;
  padding: 14px 6px 12px;
  margin: 0 14px 0 0;
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(0,0,0,0.55);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  letter-spacing: -0.2px;
}
.rx-subnav a:hover { color: #0A0A0A; }
.rx-subnav a.active { color: #0A0A0A; border-bottom-color: #0A0A0A; }
@media (min-width: 769px) {
  .rx-subnav-inner { justify-content: center; max-width: 1100px; margin: 0 auto; }
  .rx-subnav a { font-size: 15px; padding: 18px 6px 16px; margin: 0 22px 0 0; }
}

/* ---------- Real Science, Real Results badge: inline on mobile, no floating ---------- */
@media (max-width: 768px) {
  .rsrr-badge {
    position: static !important;
    transform: none !important;
    width: 76px !important;
    height: 76px !important;
    margin: 0 0 8px !important;
    display: block !important;
  }
  /* On mobile, ensure the slider calc weight reads correctly */
  .calc-weight-display {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
  }
  .calc-weight-num { font-size: 56px !important; line-height: 1 !important; }
  .calc-weight-unit { font-size: 14px !important; }
}

/* ---------- Final safety: ensure tables, code blocks, and pre
     never blow out the viewport ---------- */
@media (max-width: 768px) {
  table { max-width: 100%; }
  pre, code, kbd, samp {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   MOBILE: Quick Answer collapsible — match the premium desktop
   treatment we ship at >= 769px. White card, yellow "QUICK ANSWER"
   pill on left, dark "Read the answer" pill on right, wraps cleanly
   on narrow phones.
   ============================================================ */
@media (max-width: 768px) {
  details.qa-collapse {
    background: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-left: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin: 20px 0 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 10px 22px -16px rgba(20,20,30,0.12) !important;
  }
  details.qa-collapse[open] {
    background: #FFFFFF !important;
    border-color: rgba(10,10,10,0.18) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 16px 32px -18px rgba(20,20,30,0.16) !important;
  }
  details.qa-collapse > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    font-size: 0;
    color: transparent;
  }
  details.qa-collapse > summary::-webkit-details-marker { display: none; }
  details.qa-collapse > summary::before {
    content: "QUICK ANSWER";
    background: #F8FFA1;
    color: #0A0A0A;
    font-family: 'General Sans','Inter','Plus Jakarta Sans',sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    padding: 6px 11px;
    border-radius: 100px;
    border: 1px solid rgba(184,153,104,0.30);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    flex-shrink: 0;
  }
  details.qa-collapse > summary::after {
    content: "Read the answer  \2193";
    margin-left: auto;
    background: #0A0A0A;
    color: #FFFFFF;
    font-family: 'General Sans','Inter','Plus Jakarta Sans',sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 8px 14px;
    border-radius: 100px;
    box-shadow: 0 6px 12px -6px rgba(10,10,10,0.40);
    transition: background .15s ease, transform .15s ease;
    flex-shrink: 0;
  }
  details.qa-collapse[open] > summary::after {
    content: "Hide  \2191";
    background: #FFFFFF;
    color: #0A0A0A;
    border: 1px solid rgba(10,10,10,0.18);
    box-shadow: none;
  }
  details.qa-collapse .qa-body {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #1A1A1A !important;
    font-weight: 500 !important;
  }
  details.qa-collapse .qa-body strong { font-weight: 700 !important; color: #0A0A0A !important; }
}

/* ============================================================
   MOBILE: Cleaner topbar + nav on every tool/calculator page.
   The previous rule forced the topbar message to single-line ellipsis,
   which clipped tools with longer messages and made the bar feel
   cramped against the nav below it. Allow a clean wrap when needed,
   and tighten the nav so logo + burger feel intentional, not crowded.
   ============================================================ */
@media (max-width: 768px) {
  .optml-topbar {
    padding: 9px 14px !important;
    min-height: auto !important;
    line-height: 1.3 !important;
  }
  .optml-topbar-inner {
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    justify-content: center !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .optml-topbar .tb-message,
  .optml-topbar .tb-item {
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 0 !important;
    letter-spacing: -0.1px !important;
  }
  .optml-topbar .tb-cta {
    font-size: 12px !important;
    padding: 5px 12px !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }
  /* Nav itself — make the logo a touch smaller on mobile so it doesn't
     dwarf the burger, and tighten the bar height. Tool pages set a
     56px nav height; ensure logo + burger fit cleanly inside that. */
  .nav-inner {
    height: 56px !important;
    padding: 0 16px !important;
    align-items: center !important;
  }
  .nav-inner .logo img {
    height: 36px !important;
    width: auto !important;
    display: block !important;
  }
  .nav-inner .logo {
    font-size: 26px !important;
    line-height: 1 !important;
  }
  .burger {
    padding: 10px !important;
    align-self: center !important;
  }
  .burger span {
    width: 22px !important;
    height: 2px !important;
    background: #0A0A0A !important;
    border-radius: 2px !important;
  }
}
@media (max-width: 480px) {
  /* On the narrowest phones, send the topbar CTA to its own row centered */
  .optml-topbar-inner { flex-direction: column !important; gap: 6px !important; }
  .optml-topbar .tb-cta { align-self: center !important; }
}

/* ============================================================
   END mobile-fix.css
   ============================================================ */