/* ==========================================================================
   OrganoGEN — Mobile Shell
   Single shared stylesheet that powers the mobile (≤768px) experience across
   every page. All rules are namespaced under .mobile-shell so they cannot
   collide with the existing desktop CSS.

   Structure:
     1. Shell swap (desktop ↔ mobile)
     2. Reset + base typography (scoped to mobile shell)
     3. Topbar / drawer / breadcrumb / footer / actionbar (chrome — every page)
     4. Hero variants (homepage bg, procedure-style, logo-style)
     5. Section primitives (kickers, titles, cards, prose, FAQ, reviewer)
     6. Mockup-backed components (pillars carousel, stats, gallery, sticky
        tabs, quick-answer cards, criteria, steps, timeline, spec table,
        evidence list, partners grid, clinic cards)
     7. Pillar color modifiers
   ========================================================================== */

/* ---------- 1. Shell swap ---------- */
.mobile-shell{display:none}
@media (max-width:768px){
  .desktop-shell{display:none!important}
  .mobile-shell{display:block!important}
}

/* Inside the mobile shell only, give the body the layout the templates
   expect. Wrapped in the same media query so desktop body is untouched. */
@media (max-width:768px){
  body{margin:0;padding:0;padding-bottom:80px;background:var(--og-white);overflow-x:hidden}
}

/* ---------- 2. Reset + base typography ---------- */
.mobile-shell,
.mobile-shell *,
.mobile-shell *::before,
.mobile-shell *::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.mobile-shell{font-family:var(--og-font-body);color:var(--og-text-dark);line-height:var(--og-lh-body);-webkit-font-smoothing:antialiased}
.mobile-shell img{max-width:100%;display:block;width:auto;height:auto}
.mobile-shell a{text-decoration:none;color:inherit}
.mobile-shell .wrap{padding:0 18px}

/* ---------- 3. Chrome ---------- */

/* Topbar (60px sticky app-bar). Two layouts:
   - Logo + actions (homepage / listing / static): logo left, call+menu right
   - Back + title + share (detail pages): back arrow, centered title, share */
.mobile-shell .topbar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--og-border);padding-top:env(safe-area-inset-top,0)}
.mobile-shell .topbar__row{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 12px}
.mobile-shell .topbar__logo img{height:32px}
.mobile-shell .topbar__title{font-family:var(--og-font-heading);font-weight:700;font-size:0.95rem;color:var(--og-deep-teal);flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
.mobile-shell .iconbtn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;border:none;color:var(--og-text-dark);cursor:pointer}
.mobile-shell .iconbtn:active{background:var(--og-bg-alt)}
.mobile-shell .iconbtn .material-icons{font-size:1.4rem}
.mobile-shell .topbar__actions{display:flex;align-items:center;gap:4px}

/* Breadcrumb strip (under topbar on detail pages) */
.mobile-shell .crumbs{padding:8px 16px;background:var(--og-bg-alt);font-size:0.74rem;color:var(--og-text-light);overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
.mobile-shell .crumbs::-webkit-scrollbar{display:none}
.mobile-shell .crumbs a{color:var(--og-text-light)}
.mobile-shell .crumbs span{color:var(--og-deep-teal);font-weight:600}

/* Drawer nav */
.mobile-shell .drawer{position:fixed;inset:0;z-index:200;background:rgba(14,50,63,0.5);opacity:0;pointer-events:none;transition:opacity .25s}
.mobile-shell .drawer.is-open{opacity:1;pointer-events:auto}
.mobile-shell .drawer__panel{position:absolute;top:0;right:0;bottom:0;width:84%;max-width:340px;background:#fff;padding:env(safe-area-inset-top,0) 0 0;transform:translateX(100%);transition:transform .3s cubic-bezier(0.16,1,0.3,1);overflow-y:auto}
.mobile-shell .drawer.is-open .drawer__panel{transform:translateX(0)}
.mobile-shell .drawer__head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--og-border)}
.mobile-shell .drawer__head img{height:30px}
.mobile-shell .drawer ul{list-style:none;padding:8px 0;margin:0}
.mobile-shell .drawer li a{display:flex;align-items:center;gap:14px;padding:14px 20px;font-weight:500;font-size:1rem;color:var(--og-text-dark);border-bottom:1px solid var(--og-border-soft)}
.mobile-shell .drawer li a:active{background:var(--og-bg-alt)}
.mobile-shell .drawer li a[aria-current="page"]{background:var(--og-bg-alt);color:var(--og-deep-teal);font-weight:700}
.mobile-shell .drawer li a .material-icons{font-size:1.2rem;color:var(--og-teal-blue)}
.mobile-shell .drawer__lang{display:flex;gap:8px;padding:16px 20px}
.mobile-shell .drawer__lang a{flex:1;text-align:center;padding:10px;border:1px solid var(--og-border);border-radius:4px;font-size:0.85rem;font-weight:600;color:var(--og-text-light)}
.mobile-shell .drawer__lang a[aria-current="true"]{background:var(--og-deep-teal);color:#fff;border-color:var(--og-deep-teal)}

/* Footer (compact) */
.mobile-shell .footer{background:linear-gradient(to right,#001e2e,#001219);color:rgba(255,255,255,0.85);padding:28px 18px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0))}
.mobile-shell .footer img{height:36px;margin-bottom:10px}
.mobile-shell .footer p{font-size:0.82rem;color:rgba(255,255,255,0.65);margin:0 0 14px;line-height:1.5;max-width:340px}
/* Tightened nav: smaller gap + denser links to leave room for additions */
.mobile-shell .footer ul{list-style:none;padding:0;margin:0 0 14px;display:grid;grid-template-columns:1fr 1fr;column-gap:8px;row-gap:2px}
.mobile-shell .footer ul a{color:rgba(255,255,255,0.7);font-size:0.8rem;display:block;padding:3px 0}
.mobile-shell .footer ul a:active{color:var(--og-teal-blue)}
.mobile-shell .footer__cookies{padding:10px 0 12px;margin:0 0 4px;border-top:1px solid rgba(255,255,255,0.08)}
.mobile-shell .footer__cookies .ogcc-manage-link{color:rgba(255,255,255,0.7);font-size:0.8rem;font-family:inherit;text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
.mobile-shell .footer__cookies .ogcc-manage-link:active{color:var(--og-teal-blue)}
.mobile-shell .footer__contact{display:grid;grid-template-columns:1fr 1fr;column-gap:8px;row-gap:2px;font-size:0.78rem;color:rgba(255,255,255,0.7);padding:10px 0 14px;margin:0 0 6px;border-top:1px solid rgba(255,255,255,0.08)}
.mobile-shell .footer__contact a{color:inherit;display:inline-flex;align-items:center;gap:6px}
.mobile-shell .footer__contact .material-icons{font-size:0.95rem;color:var(--og-teal-blue)}
.mobile-shell .footer__small{font-size:0.72rem;color:rgba(255,255,255,0.45);padding-top:12px;border-top:1px solid rgba(255,255,255,0.1)}

/* Restore og-btn-primary/secondary text colors on mobile (`.mobile-shell a {color:inherit}` had higher specificity and was washing them out) */
.mobile-shell .og-btn-primary{color:var(--og-white)}
.mobile-shell .og-btn-secondary{color:var(--og-deep-teal)}
.mobile-shell .og-btn-secondary:hover,.mobile-shell .og-btn-secondary:active{color:var(--og-white)}

/* Centre the social icons in their pills - `.mobile-shell .footer img` was forcing height:36px + margin-bottom:10px */
.mobile-shell .footer .footer__social{display:flex;gap:0.6rem;margin:0 0 14px;align-items:center;flex-wrap:wrap}
.mobile-shell .footer .footer__social a{display:flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,0.08);margin:0}
.mobile-shell .footer .footer__social img{width:22px;height:22px;margin:0;display:block;object-fit:contain;max-width:none;max-height:none}

/* Sticky bottom action bar */
.mobile-shell .actionbar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,255,255,0.96);backdrop-filter:blur(14px);border-top:1px solid var(--og-border);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0));display:flex;gap:8px;box-shadow:0 -4px 14px rgba(14,50,63,0.08)}
.mobile-shell .actionbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:0.85rem 0.6rem;border-radius:6px;font-size:0.78rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em}
.mobile-shell .actionbar a.primary{background:var(--og-deep-teal);color:#fff}
.mobile-shell .actionbar a.secondary{background:var(--og-bg-alt);color:var(--og-deep-teal);border:1px solid var(--og-border)}
.mobile-shell .actionbar .material-icons{font-size:1rem}

/* ---------- 4. Hero variants ---------- */

/* Default homepage hero (with optional decorative bg via .hero--bg).
   Explicitly resets `display`, `min-height`, and `align-items` because the
   homepage's desktop CSS has `.hero{display:flex; align-items:center;
   min-height:clamp(560px,72vh,720px)}` and that rule cascades into the mobile
   shell when both shells share a class name. */
.mobile-shell .hero{position:relative;padding:24px 18px 32px;background:var(--og-bg-alt);overflow:hidden;display:block;min-height:0;align-items:initial;flex-direction:initial}
.mobile-shell .hero--bg::before{content:'';position:absolute;inset:auto -20% -20% -20%;height:60%;background:url('/assets/hero-bg.png') center/cover no-repeat;opacity:0.18}
.mobile-shell .hero__kicker{display:inline-block;font-weight:700;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--og-teal-blue);background:var(--og-tint-teal);padding:0.3rem 0.7rem;border-radius:9999px;margin-bottom:12px;position:relative}
.mobile-shell h1.hero__title{font-family:var(--og-font-heading);font-weight:800;font-size:2rem;line-height:1.1;margin:0 0 12px;color:var(--og-text-dark);position:relative}
.mobile-shell h1.hero__title .grad{background:linear-gradient(90deg,var(--og-deep-teal),var(--og-teal-blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block}
.mobile-shell .hero__lead{font-weight:300;font-size:1rem;color:var(--og-text-light);margin:0 0 18px;line-height:1.55;position:relative}
.mobile-shell .hero__cta{display:flex;flex-direction:column;gap:10px;position:relative}
.mobile-shell .hero__cta .og-btn{width:100%;justify-content:center;padding:0.95rem 1rem;font-size:0.85rem;display:flex;align-items:center}
.mobile-shell .trust{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;position:relative}
.mobile-shell .trust span{display:flex;align-items:center;gap:6px;font-size:0.78rem;color:var(--og-text-light);background:#fff;padding:8px 10px;border-radius:6px;border:1px solid var(--og-border-soft)}
.mobile-shell .trust .material-icons{font-size:0.95rem;color:var(--og-teal-blue)}

/* Detail-page hero variant (procedure / condition / clinic / about / static) */
.mobile-shell .hero--proc{padding:24px 18px;background:linear-gradient(180deg,var(--og-bg-alt) 0%,#fff 100%);overflow:visible}
.mobile-shell .hero--proc::before{display:none}
.mobile-shell .hero--proc .kicker{display:inline-block;font-weight:700;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--og-burgundy);background:var(--og-tint-burgundy);padding:0.3rem 0.7rem;border-radius:9999px;margin-bottom:10px}
.mobile-shell .hero--proc h1{font-family:var(--og-font-heading);font-weight:800;font-size:1.7rem;line-height:1.15;margin:0 0 8px;color:var(--og-text-dark)}
.mobile-shell .hero--proc .alt-name{font-size:0.85rem;color:var(--og-text-light);font-style:italic;margin:0 0 14px}
.mobile-shell .hero--proc .lead{font-weight:300;font-size:0.95rem;color:var(--og-text-light);margin:0;line-height:1.5}
.mobile-shell .meta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mobile-shell .meta-row .pill{display:inline-flex;align-items:center;gap:5px;font-size:0.74rem;color:var(--og-text-dark);background:#fff;padding:7px 11px;border-radius:9999px;border:1px solid var(--og-border-soft)}
.mobile-shell .meta-row .material-icons{font-size:1rem;color:var(--og-teal-blue)}

/* Logo-hero variant (partner pages) */
.mobile-shell .hero--logo{padding:24px 18px 28px;background:var(--og-bg-alt);text-align:center}
.mobile-shell .hero--logo .logo-block{background:#fff;border:1px solid var(--og-border-soft);border-radius:8px;padding:24px;margin-bottom:18px;display:flex;align-items:center;justify-content:center;min-height:120px}
.mobile-shell .hero--logo .logo-block img{max-width:60%;max-height:80px;object-fit:contain}
.mobile-shell .hero--logo .kicker{display:inline-block;font-weight:700;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--og-teal-blue);background:var(--og-tint-teal);padding:0.3rem 0.7rem;border-radius:9999px;margin-bottom:10px}
.mobile-shell .hero--logo h1{font-family:var(--og-font-heading);font-weight:800;font-size:1.6rem;line-height:1.15;margin:0 0 8px;color:var(--og-text-dark)}
.mobile-shell .hero--logo .lead{font-weight:300;font-size:0.95rem;color:var(--og-text-light);margin:0;line-height:1.5}

/* ---------- 5. Section primitives ---------- */

.mobile-shell section.s{padding:32px 0;border-bottom:1px solid var(--og-border-soft)}
.mobile-shell section.s.alt{background:var(--og-bg-alt)}
.mobile-shell section.s.tight{padding:24px 18px}
.mobile-shell section.s:last-of-type{border-bottom:none}
.mobile-shell .s__head{padding:0 18px;margin-bottom:18px;text-align:center}
.mobile-shell .s__head--left{text-align:left;padding:0 18px;margin-bottom:14px}
.mobile-shell .s__kicker{font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--og-teal-blue);font-size:0.74rem;display:block;margin-bottom:6px}
.mobile-shell .s__title{font-family:var(--og-font-heading);font-weight:700;font-size:1.6rem;line-height:1.15;color:var(--og-text-dark);margin:0 0 8px}
.mobile-shell section.s.tight .s__title{font-size:1.3rem;line-height:1.2;margin-bottom:12px}
.mobile-shell .s__lead{font-weight:300;font-size:0.95rem;color:var(--og-text-light);margin:0;line-height:1.5}
.mobile-shell section.s p{font-size:0.95rem;line-height:1.6;color:var(--og-text-dark);margin:0 0 12px;padding:0 18px}
.mobile-shell section.s.tight p{padding:0}

/* AI-citable answer card (generic version with teal accent).
   `border` is reset because the homepage's desktop `.answer` rule sets
   border-top + border-bottom, which would otherwise leak through. */
.mobile-shell .answer{background:#fff;border:0;border-top:3px solid var(--og-teal-blue);padding:22px 18px}
.mobile-shell .answer h2{font:700 0.7rem var(--og-font-heading);text-transform:uppercase;letter-spacing:0.15em;color:var(--og-text-secondary);margin:0 0 10px}
.mobile-shell .answer p{font-size:1rem;line-height:1.6;color:var(--og-text-dark);margin:0}
.mobile-shell .answer p strong{color:var(--og-deep-teal)}

/* Authority chip (small, in flow) */
.mobile-shell .auth{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--og-bg-alt);border-bottom:1px solid var(--og-border)}
.mobile-shell .auth__avatar{width:44px;height:44px;border-radius:50%;background:var(--og-tint-teal);display:flex;align-items:center;justify-content:center;font:700 0.95rem var(--og-font-heading);color:var(--og-deep-teal);flex-shrink:0}
.mobile-shell .auth strong{font-family:var(--og-font-heading);font-size:0.85rem;color:var(--og-deep-teal);display:block}
.mobile-shell .auth span{font-size:0.74rem;color:var(--og-text-light);display:block;margin-top:1px}

/* Reviewer block (larger, on tinted bg) */
.mobile-shell .rev{display:flex;gap:12px;align-items:flex-start;background:var(--og-bg-alt);padding:14px;border-radius:8px;margin:0 18px}
.mobile-shell .rev__avatar{width:48px;height:48px;border-radius:50%;background:var(--og-tint-teal);display:flex;align-items:center;justify-content:center;font:700 1rem var(--og-font-heading);color:var(--og-deep-teal);flex-shrink:0}
.mobile-shell .rev strong{font-family:var(--og-font-heading);font-size:0.92rem;color:var(--og-deep-teal);display:block}
.mobile-shell .rev p{margin:4px 0 0;font-size:0.78rem;color:var(--og-text-light);line-height:1.5}

/* FAQ accordion */
.mobile-shell .faq{display:grid;gap:8px;padding:0 18px}
.mobile-shell details.faq__item{background:#fff;border:1px solid var(--og-border);border-radius:6px;padding:14px 16px}
.mobile-shell details.faq__item[open]{border-color:var(--og-teal-blue)}
.mobile-shell details.faq__item summary{font-family:var(--og-font-heading);font-weight:700;font-size:0.95rem;color:var(--og-deep-teal);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.mobile-shell details.faq__item summary::-webkit-details-marker{display:none}
.mobile-shell details.faq__item summary::after{content:'+';font-size:1.2rem;color:var(--og-teal-blue);font-weight:300;transition:transform .25s ease}
.mobile-shell details.faq__item[open] summary::after{transform:rotate(45deg)}
.mobile-shell .faq__a{margin-top:10px;color:var(--og-text-light);font-size:0.88rem;line-height:1.55}
.mobile-shell .faq__a a{color:var(--og-teal-blue);font-weight:600}
.mobile-shell .faq__a p{margin:0 0 8px;font-size:0.88rem;color:var(--og-text-light);padding:0}
.mobile-shell .faq__a p:last-child{margin:0}

/* Burgundy-accent FAQ variant for procedure / condition pages */
.mobile-shell .faq--burgundy details.faq__item[open]{border-color:var(--og-burgundy)}
.mobile-shell .faq--burgundy details.faq__item summary::after{color:var(--og-burgundy)}

/* Listing card (used by listing pages, related items, partner product line, clinic procedures performed) */
.mobile-shell .cards{display:grid;gap:10px;padding:0 18px}
.mobile-shell .card{background:#fff;border:1px solid var(--og-border-soft);border-radius:8px;padding:14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;color:inherit}
.mobile-shell .card:active{background:var(--og-bg-alt)}
.mobile-shell .card__pill{display:inline-block;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--og-teal-blue);background:var(--og-tint-teal);padding:3px 7px;border-radius:9999px;margin-bottom:6px}
.mobile-shell .card--olive .card__pill{color:var(--og-olive);background:var(--og-tint-olive)}
.mobile-shell .card--burgundy .card__pill{color:var(--og-burgundy);background:var(--og-tint-burgundy)}
.mobile-shell .card h3{font:700 0.95rem var(--og-font-heading);color:var(--og-deep-teal);margin:0 0 3px}
.mobile-shell .card p{font-size:0.78rem;color:var(--og-text-light);margin:0;line-height:1.4;padding:0}
.mobile-shell .card .material-icons{font-size:0.9rem;vertical-align:-2px;color:var(--og-teal-blue)}
.mobile-shell .card .go{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--og-deep-teal);color:#fff;flex-shrink:0}
.mobile-shell .card--olive .go{background:var(--og-olive)}
.mobile-shell .card--burgundy .go{background:var(--og-burgundy)}
.mobile-shell .go .material-icons{color:#fff}

/* Long-form prose block (about / static / legal / 404) */
.mobile-shell .prose{padding:0 18px;max-width:600px}
.mobile-shell .prose h2{font-family:var(--og-font-heading);font-weight:700;font-size:1.3rem;color:var(--og-deep-teal);margin:24px 0 8px;line-height:1.2}
.mobile-shell .prose h2:first-child{margin-top:0}
.mobile-shell .prose h3{font-family:var(--og-font-heading);font-weight:700;font-size:1.05rem;color:var(--og-deep-teal);margin:18px 0 6px;line-height:1.25}
.mobile-shell .prose p{font-size:0.95rem;line-height:1.6;color:var(--og-text-dark);margin:0 0 12px;padding:0}
.mobile-shell .prose ul,.mobile-shell .prose ol{font-size:0.95rem;line-height:1.6;color:var(--og-text-dark);margin:0 0 12px;padding-left:20px}
.mobile-shell .prose li{margin-bottom:5px}
.mobile-shell .prose a{color:var(--og-teal-blue);font-weight:600}
.mobile-shell .prose strong{color:var(--og-deep-teal)}
.mobile-shell .prose blockquote{border-left:3px solid var(--og-teal-blue);padding:0 14px;margin:14px 0;color:var(--og-text-light);font-style:italic}

/* ---------- 6. Mockup-backed components ---------- */

/* Pillars — horizontal swipe carousel (homepage) */
.mobile-shell .pillars{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 18px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mobile-shell .pillars::-webkit-scrollbar{display:none}
.mobile-shell .pillar{flex:0 0 78%;scroll-snap-align:center;background:#fff;border:1px solid var(--og-border-soft);border-radius:8px;padding:22px 20px;box-shadow:var(--og-shadow-sm)}
.mobile-shell .pillar__icon{width:54px;height:54px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.mobile-shell .pillar__icon .material-icons{font-size:1.6rem}
.mobile-shell .pillar h3{font-family:var(--og-font-heading);font-weight:700;font-size:1.15rem;margin:0 0 6px;color:var(--og-deep-teal)}
.mobile-shell .pillar p{color:var(--og-text-light);font-size:0.9rem;margin:0 0 12px;line-height:1.5;padding:0}
.mobile-shell .pillar__list{list-style:none;padding:0;margin:0 0 12px;font-size:0.84rem;color:var(--og-text-dark)}
.mobile-shell .pillar__list li{padding:6px 0;border-top:1px solid var(--og-border-soft)}
.mobile-shell .pillar__list li:first-child{border-top:none}
.mobile-shell .pillar__cta{font-weight:700;font-size:0.74rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--og-deep-teal)}
.mobile-shell .pillar--teal .pillar__icon{background:var(--og-tint-teal)}
.mobile-shell .pillar--teal .pillar__icon .material-icons,.mobile-shell .pillar--teal h3{color:var(--og-teal-blue)}
.mobile-shell .pillar--olive .pillar__icon{background:var(--og-tint-olive)}
.mobile-shell .pillar--olive .pillar__icon .material-icons,.mobile-shell .pillar--olive h3{color:var(--og-olive)}
.mobile-shell .pillar--burgundy .pillar__icon{background:var(--og-tint-burgundy)}
.mobile-shell .pillar--burgundy .pillar__icon .material-icons,.mobile-shell .pillar--burgundy h3{color:var(--og-burgundy)}
.mobile-shell .dots{display:flex;gap:6px;justify-content:center;margin-top:4px}
.mobile-shell .dots span{width:6px;height:6px;border-radius:50%;background:var(--og-border)}
.mobile-shell .dots span.is-on{background:var(--og-teal-blue);width:18px;border-radius:3px}

/* Stats — 2-column grid */
.mobile-shell .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 18px}
.mobile-shell .stat{background:#fff;padding:16px;border-radius:8px;border:1px solid var(--og-border-soft)}
.mobile-shell .stat__num{display:block;font-family:var(--og-font-heading);font-weight:800;color:var(--og-teal-blue);font-size:1.8rem;line-height:1;margin-bottom:6px}
.mobile-shell .stat__lbl{font-size:0.78rem;color:var(--og-text-light);line-height:1.4;display:block}

/* Partners — 3-up grid */
.mobile-shell .partners{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px}
.mobile-shell .partner{background:#fff;border:1px solid var(--og-border);border-radius:4px;height:72px;display:flex;align-items:center;justify-content:center;padding:10px}
.mobile-shell .partner img{max-height:36px;max-width:80%;object-fit:contain;filter:grayscale(40%)}

/* Quick-answer grid (procedure / condition) */
.mobile-shell .qag{padding:20px 18px;background:#fff;border-bottom:1px solid var(--og-border)}
.mobile-shell .qag h2{font:700 0.7rem var(--og-font-heading);text-transform:uppercase;letter-spacing:0.15em;color:var(--og-text-secondary);margin:0 0 12px}
.mobile-shell .qag__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mobile-shell .qac{background:var(--og-bg-alt);padding:12px;border-radius:8px;border-left:3px solid var(--og-teal-blue)}
.mobile-shell .qac strong{display:block;font:700 0.74rem var(--og-font-heading);color:var(--og-text-secondary);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px}
.mobile-shell .qac span{font-size:0.95rem;color:var(--og-deep-teal);font-weight:600;line-height:1.3;display:block}

/* Quick-answer single card (product) */
.mobile-shell .qa{margin:18px;padding:18px;background:#fff;border:1px solid var(--og-border);border-left:4px solid var(--og-teal-blue);border-radius:6px}
.mobile-shell .qa h2{font:700 0.7rem var(--og-font-heading);text-transform:uppercase;letter-spacing:0.15em;color:var(--og-text-secondary);margin:0 0 8px}
.mobile-shell .qa p{font-size:0.95rem;line-height:1.55;color:var(--og-text-dark);margin:0;padding:0}
.mobile-shell .qa strong{color:var(--og-deep-teal)}

/* Sticky chapter / tab strip (procedure: burgundy / product: teal) */
.mobile-shell .chapters,.mobile-shell .tabs{display:flex;gap:4px;padding:0 16px;border-bottom:1px solid var(--og-border);background:#fff;position:sticky;top:60px;z-index:80;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mobile-shell .chapters::-webkit-scrollbar,.mobile-shell .tabs::-webkit-scrollbar{display:none}
.mobile-shell .chap,.mobile-shell .tab{flex:0 0 auto;padding:12px 14px;font:600 0.84rem var(--og-font-body);color:var(--og-text-light);border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none}
.mobile-shell .chap.is-on{color:var(--og-deep-teal);border-bottom-color:var(--og-burgundy)}
.mobile-shell .tab.is-on{color:var(--og-deep-teal);border-bottom-color:var(--og-teal-blue)}

/* Burgundy section kicker variant (procedure / condition) */
.mobile-shell .s--burgundy .s__kicker,.mobile-shell .hero--proc .s__kicker{color:var(--og-burgundy)}

/* Criteria list (procedure candidates / condition symptoms / audience value props) */
.mobile-shell .crit{background:#fff;border:1px solid var(--og-border-soft);border-radius:8px;padding:14px;margin:0 18px}
.mobile-shell .crit ul{list-style:none;margin:0;padding:0}
.mobile-shell .crit li{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-top:1px solid var(--og-border-soft);font-size:0.9rem;line-height:1.5}
.mobile-shell .crit li:first-child{border-top:none}
.mobile-shell .crit li .material-icons{flex-shrink:0;font-size:1.1rem;margin-top:1px}
.mobile-shell .crit li.yes .material-icons{color:var(--og-teal-blue)}
.mobile-shell .crit li.no .material-icons{color:var(--og-burgundy)}
.mobile-shell .crit li strong{color:var(--og-deep-teal)}

/* Numbered step list (procedure how-it's-done) */
.mobile-shell .steps{display:grid;gap:10px;padding:0 18px;counter-reset:s}
.mobile-shell .step{background:#fff;border:1px solid var(--og-border-soft);border-radius:8px;padding:14px;position:relative;padding-left:54px;counter-increment:s}
.mobile-shell .step::before{content:counter(s);position:absolute;left:14px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--og-deep-teal);color:#fff;display:flex;align-items:center;justify-content:center;font:700 0.85rem var(--og-font-heading)}
.mobile-shell .step h3{font-family:var(--og-font-heading);font-weight:700;font-size:0.98rem;color:var(--og-deep-teal);margin:0 0 4px}
.mobile-shell .step p{font-size:0.86rem;color:var(--og-text-light);margin:0;line-height:1.5;padding:0}
.mobile-shell .step .meta{font-size:0.72rem;color:var(--og-text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin-top:6px;display:block}

/* Recovery / progress timeline.
   `border:0` is reset because the cmc-arthroplasty desktop CSS sets
   `.timeline{border-left:3px solid teal-blue}`, which would otherwise draw
   a second vertical line alongside our ::before line. */
.mobile-shell .timeline{position:relative;padding-left:24px;margin:0 18px;border:0;list-style:none}
.mobile-shell .timeline::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--og-border)}
.mobile-shell .tl-item{position:relative;padding:0 0 18px 0}
.mobile-shell .tl-item::before{content:'';position:absolute;left:-20px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--og-burgundy)}
.mobile-shell .tl-item h3{font:700 0.95rem var(--og-font-heading);color:var(--og-deep-teal);margin:0 0 4px}
.mobile-shell .tl-item .when{font:700 0.7rem var(--og-font-body);color:var(--og-burgundy);text-transform:uppercase;letter-spacing:0.08em;display:block;margin-bottom:3px}
.mobile-shell .tl-item p{font-size:0.86rem;color:var(--og-text-light);margin:0;line-height:1.5;padding:0}

/* Clinic / location card */
.mobile-shell .clinics{display:grid;gap:10px;padding:0 18px}
.mobile-shell .clinic{background:#fff;border:1px solid var(--og-border-soft);border-radius:8px;padding:14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.mobile-shell .clinic h3{font:700 0.95rem var(--og-font-heading);color:var(--og-deep-teal);margin:0 0 3px}
.mobile-shell .clinic p{font-size:0.78rem;color:var(--og-text-light);margin:0;line-height:1.4;padding:0}
.mobile-shell .clinic .material-icons{font-size:0.9rem;vertical-align:-2px;color:var(--og-teal-blue)}
.mobile-shell .clinic .pill{display:inline-block;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--og-teal-blue);background:var(--og-tint-teal);padding:3px 7px;border-radius:9999px;margin-bottom:6px}
.mobile-shell .clinic a.go{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--og-deep-teal);color:#fff}

/* Product gallery (image + thumbnails) */
.mobile-shell .gallery{position:relative;background:var(--og-bg-alt)}
.mobile-shell .gallery__main{aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:18px}
.mobile-shell .gallery__main img{max-width:100%;max-height:100%;object-fit:contain}
.mobile-shell .gallery__thumbs{display:flex;gap:8px;padding:0 16px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mobile-shell .gallery__thumbs::-webkit-scrollbar{display:none}
.mobile-shell .gallery__thumb{flex:0 0 64px;height:64px;background:#fff;border:2px solid transparent;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:6px;cursor:pointer}
.mobile-shell .gallery__thumb.is-on{border-color:var(--og-teal-blue)}
.mobile-shell .gallery__thumb img{max-width:100%;max-height:100%;object-fit:contain}

/* Product header block */
.mobile-shell .pHead{padding:20px 18px 16px}
.mobile-shell .pTag{display:inline-block;font-weight:700;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--og-teal-blue);background:var(--og-tint-teal);padding:0.3rem 0.65rem;border-radius:9999px;margin-bottom:10px}
.mobile-shell h1.pTitle{font-family:var(--og-font-heading);font-weight:800;font-size:1.6rem;line-height:1.15;margin:0 0 6px;color:var(--og-text-dark)}
.mobile-shell .pSub{font-size:0.95rem;color:var(--og-text-light);margin:0 0 14px;line-height:1.5}
.mobile-shell .pMeta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.mobile-shell .pMeta span{display:inline-flex;align-items:center;gap:4px;font-size:0.74rem;color:var(--og-text-light);background:var(--og-bg-alt);padding:6px 10px;border-radius:6px}
.mobile-shell .pMeta .material-icons{font-size:0.95rem;color:var(--og-teal-blue)}
.mobile-shell .pCta{display:flex;flex-direction:column;gap:8px}
.mobile-shell .pCta .og-btn{width:100%;justify-content:center}

/* Indication / Contraindication split */
.mobile-shell .split{display:grid;grid-template-columns:1fr;gap:10px;padding:0 18px}
.mobile-shell .split__col{background:#fff;border:1px solid var(--og-border-soft);border-radius:8px;padding:14px}
.mobile-shell .split__col h3{display:flex;align-items:center;gap:6px;font:700 0.85rem var(--og-font-heading);margin:0 0 8px}
.mobile-shell .split__col.indi h3{color:var(--og-teal-blue)}
.mobile-shell .split__col.indi h3 .material-icons{color:var(--og-teal-blue);font-size:1.1rem}
.mobile-shell .split__col.contra h3{color:var(--og-burgundy)}
.mobile-shell .split__col.contra h3 .material-icons{color:var(--og-burgundy);font-size:1.1rem}
.mobile-shell .split ul{list-style:none;margin:0;padding:0;font-size:0.88rem;line-height:1.55}
.mobile-shell .split li{padding:5px 0 5px 18px;position:relative;color:var(--og-text-dark)}
.mobile-shell .split li::before{content:'';position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--og-text-secondary)}
.mobile-shell .split .indi li::before{background:var(--og-teal-blue)}
.mobile-shell .split .contra li::before{background:var(--og-burgundy)}

/* Specifications definition list */
.mobile-shell .spec{background:#fff;border:1px solid var(--og-border-soft);border-radius:8px;overflow:hidden;margin:0 18px}
.mobile-shell .spec dl{margin:0;padding:0}
.mobile-shell .spec dt,.mobile-shell .spec dd{margin:0;padding:12px 14px;font-size:0.88rem}
.mobile-shell .spec dt{background:var(--og-bg-alt);font-weight:600;color:var(--og-text-dark);font-size:0.78rem;text-transform:uppercase;letter-spacing:0.04em;border-bottom:1px solid var(--og-border-soft)}
.mobile-shell .spec dd{color:var(--og-text-light);border-bottom:1px solid var(--og-border-soft);line-height:1.5}
.mobile-shell .spec dd:last-of-type{border-bottom:none}

/* Evidence (peer-reviewed publications) */
.mobile-shell .evi{display:grid;gap:10px;padding:0 18px}
.mobile-shell .evi__item{background:#fff;border:1px solid var(--og-border-soft);border-radius:6px;padding:12px 14px}
.mobile-shell .evi__item h4{font-family:var(--og-font-heading);font-weight:700;font-size:0.92rem;color:var(--og-deep-teal);margin:0 0 4px;line-height:1.3}
.mobile-shell .evi__item .meta{font-size:0.74rem;color:var(--og-text-light);margin-bottom:6px}
.mobile-shell .evi__item .quote{font-size:0.85rem;color:var(--og-text-dark);line-height:1.5;border-left:2px solid var(--og-teal-blue);padding-left:10px}

/* ---------- 7. Pillar color modifiers (apply to .mobile-shell wrapper) ---------- */

/* Hand & Wrist (teal) — default */
.mobile-shell.pillar--teal .hero__kicker,.mobile-shell.pillar--teal .hero--proc .kicker,.mobile-shell.pillar--teal .hero--logo .kicker{color:var(--og-teal-blue);background:var(--og-tint-teal)}

/* Orthopaedics & Trauma (olive) */
.mobile-shell.pillar--olive .hero__kicker,.mobile-shell.pillar--olive .hero--proc .kicker,.mobile-shell.pillar--olive .hero--logo .kicker{color:var(--og-olive);background:var(--og-tint-olive)}
.mobile-shell.pillar--olive .actionbar a.primary{background:var(--og-olive)}
.mobile-shell.pillar--olive .answer{border-top-color:var(--og-olive)}
.mobile-shell.pillar--olive .qa{border-left-color:var(--og-olive)}

/* Regenerative Medicine (burgundy) */
.mobile-shell.pillar--burgundy .hero__kicker,.mobile-shell.pillar--burgundy .hero--proc .kicker,.mobile-shell.pillar--burgundy .hero--logo .kicker{color:var(--og-burgundy);background:var(--og-tint-burgundy)}
.mobile-shell.pillar--burgundy .actionbar a.primary{background:var(--og-burgundy)}
.mobile-shell.pillar--burgundy .answer{border-top-color:var(--og-burgundy)}
.mobile-shell.pillar--burgundy .qa{border-left-color:var(--og-burgundy)}

/* ---- Mobile product photo strip ---- */
.mobile-shell .pGallery{margin:12px 16px 0}
.mobile-shell .pGallery__strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;border-radius:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mobile-shell .pGallery__strip::-webkit-scrollbar{display:none}
.mobile-shell .pGallery__slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/3;background:#fff;border:1px solid var(--og-border-soft);border-radius:10px;display:flex;align-items:center;justify-content:center;margin:0;overflow:hidden}
.mobile-shell .pGallery__slide img{max-width:100%;max-height:100%;object-fit:contain}
.mobile-shell .pGallery__dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.mobile-shell .pGallery__dots span{width:7px;height:7px;border-radius:50%;background:var(--og-border)}
.mobile-shell .pGallery__dots span.is-on{background:var(--og-teal-blue)}
/* ---- 56px thumbnails on listing cards (pillar pages, related strips) ---- */
.mobile-shell .card--media{align-items:center;display:flex}
.mobile-shell .card--media .card__thumb{flex:0 0 56px;width:56px;height:56px;background:#fff;border:1px solid var(--og-border-soft);border-radius:6px;display:flex;align-items:center;justify-content:center;padding:4px;margin-right:12px}
.mobile-shell .card--media .card__thumb img{max-width:100%;max-height:100%;object-fit:contain}
.mobile-shell .card--media>div{flex:1;min-width:0}