/* ============================================================
   Slinic — static site styles (ported from index.css)
   Works alongside the compiled Tailwind stylesheet (assets/css/tailwind.css; config in tailwind-config.js)
   ============================================================ */

:root {
  --background: 40 30% 98%;
  --foreground: 217 58% 16%;
  --card: 0 0% 100%;
  --card-foreground: 215 25% 27%;
  --popover: 0 0% 100%;
  --popover-foreground: 217 58% 16%;
  --primary: 217 58% 16%;
  --primary-foreground: 0 0% 100%;
  --secondary: 45 18% 88%;
  --secondary-foreground: 217 58% 16%;
  --muted: 45 18% 90%;
  --muted-foreground: 210 16% 32%;
  --accent: 184 61% 27%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 45%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 82%;
  --input: 0 0% 82%;
  --ring: 184 61% 27%;
  --radius: 0.75rem;
}

* { border-color: hsl(var(--border)); }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-family: 'Cormorant Garamond', Georgia, serif; }
::selection { background: #C0C5CB; color: #ffffff; }

img { max-width: 100%; }

/* ------------------------------------------------------------------
   Component classes (plain-CSS equivalents of the app's @layer components)
   ------------------------------------------------------------------ */
.container-slinic { margin-left: auto; margin-right: auto; width: 100%; max-width: 1240px; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px) { .container-slinic { padding-left: 2rem; padding-right: 2rem; } }

/* ── Header rail ────────────────────────────────────────────────────────
   Body content stays at 1240px; the header needs more, because nine
   top-level links, the logo, Patient Login and the eligibility CTA all have
   to sit on one line without touching.

   Measured at 13px: the nine links are 808 units, the logo block 144, the
   login button 143 and the full CTA 252. That is 1406 units of content,
   which does not fit the 1216 available at 1280px wide — so the narrow
   desktop band buys the room back by dropping the "Slinic." wordmark (the
   logo mark still carries the brand), shortening the CTA label and tightening
   the gaps. Everything is restored at 1536px, where it all fits.

   Written as plain CSS because 1280-1535 is not a Tailwind breakpoint and the
   Play CDN cannot be relied on to emit custom screen variants. */
.container-header { margin-left: auto; margin-right: auto; width: 100%; max-width: 1440px; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px) { .container-header { padding-left: 2rem; padding-right: 2rem; } }

/* Defaults (below 1280 the flat nav is hidden and the drawer takes over, so
   there is room for the full CTA label). */
.hdr-row         { column-gap: 1.5rem; }
.hdr-nav         { column-gap: 0.5625rem; }
.hdr-cta-short   { display: none; }
.hdr-login-label { display: none; }
.hdr-login       { padding: 0.625rem; }

/* Narrow desktop: tighter rail, short CTA, login gains its label. */
@media (min-width: 1280px) {
	.hdr-login-label { display: inline; }
	.hdr-login       { padding: 0.5rem 1rem; }
}
@media (min-width: 1280px) and (max-width: 1535.98px) {
	.container-header { padding-left: 1.25rem; padding-right: 1.25rem; }
	.hdr-row          { column-gap: 1.125rem; }
	.hdr-cta-long     { display: none; }
	.hdr-cta-short    { display: inline; }
}
/* 1280-1359 is the only band with no room for the wordmark. */
@media (min-width: 1280px) and (max-width: 1359.98px) {
	.hdr-wordmark { display: none; }
}
@media (min-width: 1360px) and (max-width: 1535.98px) {
	.hdr-nav { column-gap: 0.625rem; }
}
/* Wide desktop: everything at full size. */
@media (min-width: 1536px) {
	.container-header { max-width: 1600px; }
	.hdr-nav          { column-gap: 1rem; }
}

.eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: #5FB0B5; }

/* ── Button system — one consistent pill across the whole site ──────────
   .btn-primary  navy · primary action
   .btn-gold     gold · secondary action
   .btn-ghost    outline · tertiary action
   All share the same shape, size, weight and hover lift.               */
.btn-primary,
.btn-gold,
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 9999px; padding: 0.85rem 1.75rem;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 0.9375rem; font-weight: 600; line-height: 1.15; letter-spacing: 0.01em;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
/* On small phones a long label ("Start Your FREE Clinical Assessment Today")
   wraps instead of pushing its section wider than the screen. */
@media (max-width: 479px) {
  .btn-primary, .btn-gold, .btn-ghost { white-space: normal; text-align: center; max-width: 100%; }
}
.btn-primary:hover, .btn-gold:hover, .btn-ghost:hover { transform: translateY(-1px); }
.btn-primary:focus-visible, .btn-gold:focus-visible, .btn-ghost:focus-visible {
  outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #5FB0B5;
}

/* Deep-navy section gradient, written as plain CSS on purpose.
   Tailwind's via-* sets --tw-gradient-to to a TRANSPARENT copy of the via
   colour as its fallback; on the Play CDN the to-* class did not reliably
   override that, so the section faded to transparent and showed the near-white
   page through it, making the white text unreadable. */
/* Performance-tracker grid: when the tool count is odd the final card has no
   partner, so it spans the row instead of leaving a gap beside it. Adjusts
   itself if tools are added or removed in the editor. */
@media (min-width: 640px) {
  .tools-grid > :last-child:nth-child(odd) { grid-column: span 2 / span 2; }
}

/* Gradients written as plain CSS on purpose.
   Tailwind declares --tw-gradient-from/--tw-gradient-to via @property with an
   initial value of transparent, so when a gradient utility fails to generate
   (which the Play CDN does intermittently) the whole gradient renders
   TRANSPARENT. Where a white icon or white text sits on top, the content
   disappears rather than merely losing its background. */
.grad-hero-veil    { background-image: linear-gradient(to bottom, rgba(244,245,247,.90), rgba(244,245,247,.70) 50%, #ECEFF3); }
.grad-fade-down    { background-image: linear-gradient(to bottom, #ECEFF3, transparent); }
.grad-fade-up      { background-image: linear-gradient(to top, #ECEFF3, transparent); }
.grad-band-tint08  { background-image: linear-gradient(to bottom, rgba(192,197,203,.08), #F4F5F7); }
.grad-band-tint09  { background-image: linear-gradient(to bottom, rgba(192,197,203,.09), #F4F5F7); }
.grad-band-edges   { background-image: linear-gradient(to right, rgba(192,197,203,.15), #F4F5F7 50%, rgba(192,197,203,.15)); }
.grad-band-teal50  { background-image: linear-gradient(to bottom, rgba(228,244,244,.50), #F4F5F7); }
.grad-band-teal35  { background-image: linear-gradient(to bottom, rgba(228,244,244,.35), #F4F5F7); }
/* ---- added for the Sept 2026 Emergent port ---- */
.grad-band-teal70  { background-image: linear-gradient(to bottom, rgba(228,244,244,.70), #FFFFFF); }
.grad-page-hero    { background-image: linear-gradient(to bottom, rgba(230,228,221,.60), #F4F5F7); }
.grad-navy-deep    { background-image: linear-gradient(to bottom right, #042454 0%, #042454 55%, #0C1B33 100%); }

/* Range sliders — the ported calculators use these instead of accent-teal. */
/* ── Assessment progress bar ─────────────────────────────────────────────
   Sticks directly under the site header at whatever height the header is
   right now (--hdr-h, set by site.js). It used to be pinned at 80px, which is
   shorter than the 96px header at the top of the page (so the bar's text was
   cut off behind it) and taller than the 69px header once scrolled (so the
   question showed through the gap). */
.elig-progress { top: var(--hdr-h, 80px); }

/* ── "Every step, explained" on phones ─────────────────────────────────
   Each step's heading and its time badge share one flex row. At 360px that
   row is only 192px wide while the longest heading plus badge needs about
   295px, so both wrapped ("Choose your / treatment", "24 / hours").

   Rather than shrink the type until it fits, most of the space is bought
   back: a smaller circle, a tighter gap, less card padding and a narrower
   page gutter (12px — still a margin, where the approved design runs to the
   edge). The type then only has to come down a little. Everything reverts at
   the sm breakpoint, where there was never a problem.

   Plain CSS, not responsive utilities, because these widths have to be exact
   and the Play CDN is not reliable about arbitrary values. */
@media (max-width: 639.98px) {
  /* Two-class selectors on purpose: these compete with Tailwind utilities on
     the same elements (gap-6, h-14, p-6, text-xl, text-xs), and the Play CDN
     injects its stylesheet after this file, so a single-class rule loses on
     source order. Scoping to .grad-steps wins on specificity instead. */
  .container-slinic.hiw-wrap    { padding-left: 0.75rem; padding-right: 0.75rem; }
  .grad-steps .hiw-row          { column-gap: 0.625rem; }
  .grad-steps .hiw-dot          { height: 2.5rem; width: 2.5rem; font-size: 0.9375rem; }
  .grad-steps .hiw-card         { padding: 1rem; }
  .grad-steps .hiw-head         { column-gap: 0.5rem; }
  .grad-steps .hiw-title        { font-size: 0.9375rem; line-height: 1.3; white-space: nowrap; }
  .grad-steps .hiw-badge        { padding: 0.125rem 0.5rem; font-size: 0.625rem; white-space: nowrap; flex: none; }
  /* The rail sits under the smaller circle's centre (40px / 2 = 20px). */
  .grad-steps .grad-rail        { left: 19px; }
}
/* 320px (SE-class handsets) is 21px short even after the above, so the type
   comes down one more notch rather than let the page scroll sideways. */
@media (max-width: 359.98px) {
  .grad-steps .hiw-title { font-size: 0.8125rem; }
  .grad-steps .hiw-badge { font-size: 0.5625rem; padding: 0.125rem 0.375rem; }
  .grad-steps .hiw-head  { column-gap: 0.25rem; }
  .grad-steps .hiw-card  { padding: 0.875rem; }
}

/* ── "Every step, explained" timeline rail ──────────────────────────────
   template-em-how-it-works.php has always carried a .grad-rail element, but
   the class was never defined anywhere, so a 1px-wide div with no background
   rendered as nothing and the line joining the numbered circles was missing.
   Fades in and out at the ends so it does not collide with the first and last
   circles, and runs teal to grey to match the alternating circle colours. */
.grad-rail {
  background: linear-gradient(to bottom,
    rgba(95,176,181,0) 0%, #5FB0B5 10%, #8FB9BD 50%, #C0C5CB 90%, rgba(192,197,203,0) 100%);
}

.slinic-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 9999px; background: #D1D1D1; cursor: pointer; }
.slinic-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 20px; width: 20px; border-radius: 9999px; background: #5FB0B5; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(17,35,64,.25); cursor: pointer; }
.slinic-range::-moz-range-thumb { height: 18px; width: 18px; border: 2px solid #fff; border-radius: 9999px; background: #5FB0B5; cursor: pointer; }

/* FAQ accordion built on <details>, replacing Radix. Hides the native marker. */
.slinic-faq > summary { list-style: none; }
.slinic-faq > summary::-webkit-details-marker { display: none; }
.slinic-faq > summary::marker { content: ""; }

.grad-band-cloud   { background-image: linear-gradient(to bottom, #FFFFFF, rgba(228,244,244,.40)); }
.grad-teal-navy  { background-image: linear-gradient(to bottom right, #5FB0B5, #042454); }
.grad-teal-gold  { background-image: linear-gradient(to right, #5FB0B5, #C0C5CB); }
.grad-bmi-scale  { background-image: linear-gradient(to right, #5FB0B5, #C0C5CB 50%, #C0492F); }
.grad-navy-veil  { background-image: linear-gradient(to right, #042454, rgba(4,36,84,.85) 45%, rgba(4,36,84,.30)); }
.grad-photo-veil { background-image: linear-gradient(to top, rgba(4,36,84,.70), transparent); }

.bg-navy-deep-gradient { background-image: linear-gradient(to bottom right, #042454 0%, #042454 55%, #0C1B33 100%); }

.btn-primary { background: #042454; color: #fff; box-shadow: 0 6px 18px -6px rgba(4,36,84,0.40); }
.btn-primary:hover { background: #1b3358; box-shadow: 0 12px 26px -8px rgba(4,36,84,0.50); }

.btn-gold { background: #042454; color: #fff; box-shadow: 0 6px 18px -6px rgba(4,36,84,0.40); }
.btn-gold:hover { background: #1b3358; box-shadow: 0 12px 26px -8px rgba(4,36,84,0.50); }

.btn-ghost { background: transparent; color: #042454; border-color: rgba(4,36,84,0.2); }
.btn-ghost:hover { background: #042454; color: #fff; border-color: #042454; }

.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; bottom: 0; left: 0; height: 1px; width: 0;
  background: #5FB0B5; transition: width 0.3s ease;
}
.link-underline:hover::after,
.link-underline.is-active::after { width: 100%; }

/* ------------------------------------------------------------------
   Scroll reveal (replaces Framer Motion whileInView)
   ------------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ------------------------------------------------------------------
   Carousels / marquees
   ------------------------------------------------------------------ */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Auto-scrolling AND finger-swipeable carousel (JS-driven in site.js).
   Native horizontal scroll = works with a finger; site.js nudges scrollLeft
   for the auto-slide and pauses while the user is interacting. */
.pharmo-autoscroll { -webkit-overflow-scrolling: touch; scroll-behavior: auto; -ms-overflow-style: none; scrollbar-width: none; overscroll-behavior-x: contain; }
.pharmo-autoscroll::-webkit-scrollbar { display: none; }

/* Mobile nav: lock the page behind the open menu. */
body.nav-open { overflow: hidden; }

/* ------------------------------------------------------------------
   Mobile nav drawer (slides in from the right; site.js toggles .is-open)
   ------------------------------------------------------------------ */
#mobile-menu { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
#mobile-menu .mm-backdrop { position: absolute; inset: 0; background: rgba(4,36,84,.5); opacity: 0; transition: opacity .3s ease; }
#mobile-menu .mm-panel {
  position: absolute; top: 0; right: 0; height: 100%; height: 100dvh; width: min(88vw, 360px);
  background: #F4F5F7; box-shadow: -24px 0 60px -24px rgba(4,36,84,.55);
  transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
#mobile-menu.is-open { visibility: visible; }
#mobile-menu.is-open .mm-backdrop { opacity: 1; }
#mobile-menu.is-open .mm-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { #mobile-menu .mm-panel, #mobile-menu .mm-backdrop { transition: none; } }
@media (min-width: 1280px) { #mobile-menu { display: none; } }  /* nav goes flat at xl */

.mm-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.15rem; border-bottom: 1px solid rgba(4,36,84,.08); }
.mm-close { display: inline-flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border: 0; border-radius: 9999px; background: rgba(4,36,84,.06); color: #042454; cursor: pointer; }
.mm-close:active { background: rgba(4,36,84,.14); }

.mm-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .5rem .7rem 1rem; }
.mm-nav .mm-link {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .95rem 1rem; font-size: 1.05rem; font-weight: 600; color: #042454;
  border-radius: .9rem; cursor: pointer; list-style: none; text-decoration: none;
}
.mm-nav .mm-link:active { background: #E4F4F4; }
.mm-nav .mm-link__label { display: flex; align-items: center; gap: .55rem; }
.mm-nav .mm-link::-webkit-details-marker { display: none; }
.mm-group { border-radius: .9rem; }
.mm-group[open] { background: rgba(228,244,244,.45); }
.mm-group > summary::-webkit-details-marker { display: none; }
.mm-chev { color: #5FB0B5; transition: transform .2s ease; }
.mm-group[open] > .mm-link .mm-chev { transform: rotate(180deg); }
.mm-sub { display: flex; flex-direction: column; padding: 0 .5rem .5rem 1rem; }
.mm-sub a { display: flex; align-items: center; gap: .4rem; padding: .62rem .9rem; font-size: .95rem; font-weight: 500; color: rgba(4,36,84,.82); border-radius: .7rem; text-decoration: none; }
.mm-sub a:active { background: #E4F4F4; color: #1B6B70; }

.mm-foot { flex: none; border-top: 1px solid rgba(4,36,84,.08); background: #fff; padding: 1rem 1.15rem calc(1rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .65rem; }
.mm-login { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: #1B6B70; padding: .3rem 0; text-decoration: none; }
.mm-phone { display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: .85rem; color: rgba(30,39,51,.65); text-decoration: none; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* The scrolling rows (awards, reviews, products) always move, by request,
   including for visitors with "reduce motion" on. The track holds the items
   twice and slides by exactly one set (-50%), so spacing is a margin on every
   item rather than a gap/padding (which made the loop jump by a few px). */
.marquee-track { display: flex; width: max-content; animation: marquee linear infinite; will-change: transform; backface-visibility: hidden; }
.marquee-track.gap-4, .marquee-track.gap-6 { gap: 0 !important; }
.marquee-track.gap-4 > * { margin-right: 1rem; }
.marquee-track.gap-6 > * { margin-right: 1.5rem; }
/* Pause on hover with a mouse only: on phones a tap left it "hovered" and stuck. */
@media (hover: hover) and (pointer: fine) { .marquee-track:hover { animation-play-state: paused; } }

@keyframes float-slow { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-20px) scale(1.08); } }
.orb { animation: float-slow 14s ease-in-out infinite; }

@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(176,137,76,0.55); } 50% { box-shadow: 0 0 26px 6px rgba(176,137,76,0.6); } }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

@keyframes marquee-y { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.marquee-y { display: flex; flex-direction: column; animation: marquee-y linear infinite; }
.marquee-y-rev { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .marquee-y { animation: none; } }

/* ------------------------------------------------------------------
   Accordion (replaces Radix accordion)
   ------------------------------------------------------------------ */
.acc-panel { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.acc-item.open .acc-panel { max-height: 1200px; }
.acc-item.open .acc-chevron { transform: rotate(180deg); }
.acc-chevron { transition: transform 0.3s ease; }

/* ------------------------------------------------------------------
   Range sliders
   ------------------------------------------------------------------ */
input[type="range"] { accent-color: #5FB0B5; }

/* ── Weight calculator slider ──────────────────────────────────────────
   The custom .wc-bar (mist track + teal fill) is the only visible track.
   The native range sits on top with a transparent track so it no longer
   draws its own line — leaving just the styled thumb riding the bar. */
.wc-range { -webkit-appearance: none; appearance: none; height: 1.5rem; background: transparent; margin: 0; }
.wc-range:focus { outline: none; }
.wc-range::-webkit-slider-runnable-track { height: 1.5rem; background: transparent; border: none; }
.wc-range::-moz-range-track { height: 0.5rem; background: transparent; border: none; }
.wc-range::-moz-range-progress { background: transparent; }
.wc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  height: 22px; width: 22px; margin-top: 1px;
  border-radius: 9999px; background: #5FB0B5; border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(4,36,84,0.35); cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.wc-range::-moz-range-thumb {
  height: 22px; width: 22px; box-sizing: border-box;
  border-radius: 9999px; background: #5FB0B5; border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(4,36,84,0.35); cursor: pointer;
}
.wc-range:hover::-webkit-slider-thumb { transform: scale(1.06); }
.wc-range:active::-webkit-slider-thumb { transform: scale(1.06); }
.wc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(95,176,181,0.4), 0 2px 8px rgba(4,36,84,0.35); }
.wc-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(95,176,181,0.4), 0 2px 8px rgba(4,36,84,0.35); }

/* line clamp helpers */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------------------------------------
   Article body typography (Learning Centre articles)
   ------------------------------------------------------------------ */
.article-body { font-size: 16.5px; line-height: 1.8; color: rgba(30,39,51,0.85); }
.article-body > *:first-child { margin-top: 0; }
.article-body h1 { margin: 3rem 0 1rem; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.875rem; font-weight: 600; color: #042454; }
.article-body h2 { margin: 2.75rem 0 1rem; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 600; color: #042454; }
.article-body h3 { margin: 2rem 0 0.75rem; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; font-weight: 600; color: #042454; }
.article-body h4 { margin: 1.5rem 0 0.5rem; font-size: 1.125rem; font-weight: 600; color: #042454; }
.article-body p { margin: 1.25rem 0; }
.article-body a { font-weight: 500; color: #1B6B70; text-decoration: underline; text-underline-offset: 2px; }
.article-body ul { margin: 1.25rem 0; padding-left: 1.5rem; list-style: disc; }
.article-body ol { margin: 1.25rem 0; padding-left: 1.5rem; list-style: decimal; }
.article-body li { margin: 0.5rem 0; padding-left: 0.25rem; }
.article-body ul li::marker, .article-body ol li::marker { color: #1B6B70; }
.article-body img { margin: 2rem 0; width: 100%; border-radius: 1rem; border: 1px solid rgba(209,209,209,0.6); box-shadow: 0 8px 30px rgba(17,35,64,0.04); }
.article-body blockquote { margin: 1.5rem 0; border-radius: 0 0.75rem 0.75rem 0; border-left: 4px solid #1B6B70; background: rgba(27,107,112,0.05); padding: 0.75rem 1rem 0.75rem 1.25rem; font-style: italic; color: #042454; }
.article-body strong { font-weight: 600; color: #042454; }
.article-body hr { margin: 2.5rem 0; border: none; border-top: 1px solid rgba(209,209,209,0.7); }
.article-body table { margin: 2rem 0; width: 100%; border-collapse: collapse; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(209,209,209,0.7); font-size: 0.875rem; }
.article-body th { border-bottom: 1px solid rgba(209,209,209,0.7); background: #042454; padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: #fff; }
.article-body td { border-bottom: 1px solid rgba(209,209,209,0.5); padding: 0.75rem 1rem; vertical-align: top; }

/* AI coach panel scroll */
.coach-scroll { scrollbar-width: thin; }

/* ── Remastered: hero journey tabs (active state) ──────────────────────── */
.hero-tab.tab-active { border-color: #C0C5CB; background-color: #042454; }
.hero-tab.tab-active .hero-tab-chevron { transform: rotate(180deg); }

/* ── Remastered: journey pop-up — lock page scroll while a modal is open ── */
body.modal-open { overflow: hidden; }

/* ------------------------------------------------------------------
   Migrated blog posts — WordPress core colour presets → Slinic brand.
   A couple of imported posts are Gutenberg block content that used core
   palette/gradient presets; remap them so the panels are on-brand.
   ------------------------------------------------------------------ */
.has-cyan-bluish-gray-background-color { background-color: #E4F4F4 !important; }
.has-cyan-bluish-gray-color { color: #5FB0B5 !important; }
.has-pale-cyan-blue-background-color { background-color: #E4F4F4 !important; }
.has-white-color { color: #ffffff !important; }
.has-midnight-gradient-background { background: linear-gradient(135deg, #042454 0%, #0c1b33 100%) !important; }
.has-very-light-gray-to-cyan-bluish-gray-gradient-background { background: linear-gradient(180deg, #F4F5F7 0%, #E4F4F4 100%) !important; }
.has-luminous-vivid-amber-background-color { background-color: #FDE68A !important; }
.has-luminous-vivid-amber-color { color: #B8912F !important; }
.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background { background: linear-gradient(135deg, #FDE68A 0%, #F4C430 100%) !important; }
.article-body .wp-block-table table th { background: #042454; color: #fff; }

/* ------------------------------------------------------------------
   Legacy ".sla" price-comparison article components → brand
   ------------------------------------------------------------------ */
.article-body .cta-box, .article-body .cta-mid { background: #E4F4F4; border: 1px solid rgba(95,176,181,0.35); border-radius: 1rem; padding: 1.5rem 1.75rem; margin: 1.75rem 0; }
.article-body .cta-btn, .article-body .cta-mid-btn { display: inline-block; background: #042454; color: #fff !important; font-weight: 700; padding: 0.8rem 1.6rem; border-radius: 9999px; text-decoration: none; margin-top: 0.6rem; box-shadow: 0 8px 20px -8px rgba(4,36,84,0.45); }
.article-body .author-box, .article-body .author-footer { background: #F4F5F7; border: 1px solid #E6E2D6; border-radius: 1rem; padding: 1.25rem 1.5rem; margin: 1.75rem 0; }
.article-body .stats { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.75rem 0; padding: 0; list-style: none; }
.article-body .stat { flex: 1 1 140px; background: #fff; border: 1px solid #E6E2D6; border-radius: 0.85rem; padding: 1.1rem; text-align: center; }
.article-body .stat .num { display: block; font-size: 1.8rem; font-weight: 800; color: #5FB0B5; line-height: 1.1; }
.article-body .stat .lbl { font-size: 0.8rem; color: #1E2733; opacity: 0.7; }
.article-body .warn { background: #FEF3C7; border-left: 4px solid #C0C5CB; padding: 1rem 1.25rem; border-radius: 0.5rem; margin: 1.25rem 0; }
.article-body .tip { background: #D1FAE5; border-left: 4px solid #059669; padding: 1rem 1.25rem; border-radius: 0.5rem; margin: 1.25rem 0; }
.article-body .alert { background: #FEE2E2; border-left: 4px solid #DC2626; padding: 1rem 1.25rem; border-radius: 0.5rem; margin: 1.25rem 0; }
.article-body .badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.article-body .badge { background: #042454; color: #fff; font-size: 0.72rem; font-weight: 600; padding: 0.28rem 0.8rem; border-radius: 9999px; }
.article-body .hl { color: #1B6B70; font-weight: 600; }


/* Homepage "Which one are you?" cards: Cormorant is already at its heaviest
   (700), so thicken the strokes slightly for a bolder title. */
.hero-tab-title { -webkit-text-stroke: 0.35px currentColor; overflow-wrap: break-word; hyphens: manual; }

/* ------------------------------------------------------------------
   Treatment dose cards (inc/dose-cards.php): Treatments page + /order/.
   Each strength is a <details>: "Select" opens its bundles.
   ------------------------------------------------------------------ */
.sc-dose > summary::-webkit-details-marker { display: none; }
.sc-dose > summary::marker { content: ""; }
.sc-dose > summary:hover .sc-select { background: #042454; color: #fff; }
.sc-dose[open] > summary { background: rgba(228, 244, 244, 0.45); }
.sc-dose[open] .sc-chev { transform: rotate(180deg); }
.sc-chev { transition: transform 0.2s ease; }
.sc-dose.is-chosen .sc-select { background: #042454; border-color: #042454; color: #fff; }
.sc-dose.is-chosen .sc-select__label { font-size: 0; }
.sc-dose.is-chosen .sc-select__label::before { content: "Selected ✓"; font-size: 11px; }
.sc-dose[open] { background: rgba(228, 244, 244, 0.25); }
.sc-bundle {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%;
  padding: 0.65rem 0.9rem; border: 1px solid rgba(214, 219, 226, 0.9); border-radius: 0.75rem;
  background: #fff; text-align: left; cursor: pointer; text-decoration: none; font: inherit;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.sc-bundle:hover { border-color: #5FB0B5; box-shadow: 0 4px 14px -8px rgba(4, 36, 84, 0.35); }
.sc-bundle__label { font-size: 0.8rem; font-weight: 600; color: #042454; }
.sc-bundle__price { font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.sc-bundle.is-chosen { border-color: #042454; background: #042454; box-shadow: 0 6px 18px -8px rgba(4, 36, 84, 0.5); }
.sc-bundle.is-chosen .sc-bundle__label, .sc-bundle.is-chosen .sc-bundle__price { color: #fff !important; }
.sc-bundle.is-chosen .sc-bundle__label::before { content: "✓ "; }
.pharmo-ob-oral { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(214, 219, 226, 0.8); }

/* ------------------------------------------------------------------
   Reorder check-in: live camera (eligibility.js camOpen()).
   ------------------------------------------------------------------ */
.ro-cam { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: #0b1424; color: #fff; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.ro-cam [hidden] { display: none !important; }
.ro-cam__stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ro-cam__stage::before { content: "Starting camera…"; position: absolute; color: rgba(255,255,255,.6); font-size: .9rem; }
.ro-cam__stage video, .ro-cam__stage img { position: relative; max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; background: #000; }
.ro-cam__stage video.is-mirror { transform: scaleX(-1); }
.ro-cam__count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 6rem; font-weight: 800; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.ro-cam__tip { margin: 0; padding: .6rem 1rem; text-align: center; font-size: .85rem; color: rgba(255,255,255,.8); }
.ro-cam__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem 1.25rem; }
.ro-cam__bar button, .ro-cam__fail button, .ro-cam__fail label { font: inherit; font-size: .9rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 9999px; padding: .65rem 1.1rem; cursor: pointer; }
.ro-cam__side { display: flex; flex-direction: column; gap: .4rem; }
.ro-cam__side button { font-size: .78rem; padding: .45rem .8rem; }
.ro-cam__shutter { width: 72px; height: 72px; flex: none; padding: 0 !important; border-radius: 9999px !important; background: #fff !important; box-shadow: 0 0 0 5px rgba(255,255,255,.35); }
.ro-cam__shutter:active { transform: scale(.94); }
.ro-cam .ro-cam__use { background: #5FB0B5; color: #042454; }
.ro-cam__fail { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1.5rem 1.25rem 2rem; text-align: center; }
.ro-cam__fail p { margin: 0; max-width: 28rem; font-size: .95rem; line-height: 1.5; }

/* /order/ basket: − / + per strength, and the basket summary. */
.sc-qty-row.is-in { background: rgba(228, 244, 244, 0.55); }
.sc-qty { display: inline-flex; align-items: center; flex: none; border: 1px solid rgba(95, 176, 181, 0.45); border-radius: 9999px; background: #fff; }
.sc-qty__btn { width: 34px; height: 34px; border: 0; background: transparent; color: #042454; font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; border-radius: 9999px; }
.sc-qty__btn:hover:not(:disabled) { background: #E4F4F4; }
.sc-qty__btn:disabled { color: rgba(4, 36, 84, 0.25); cursor: default; }
.sc-qty__n { min-width: 1.6rem; text-align: center; font-weight: 700; color: #042454; font-size: 0.9rem; }
.sc-qty-row.is-in .sc-qty { border-color: #042454; }
.pharmo-basket { margin-top: 1.25rem; border: 1px solid rgba(4, 36, 84, 0.15); border-radius: 1rem; background: #fff; padding: 1rem 1.15rem; }
.pharmo-basket__title { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #1B6B70; }
.pharmo-basket__lines { list-style: none; margin: 0; padding: 0; }
.pharmo-basket__lines li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid rgba(214, 219, 226, 0.6); font-size: 0.9rem; color: #042454; }
.pharmo-basket__empty { margin: 0; font-size: 0.9rem; color: rgba(30, 39, 51, 0.65); }
.pharmo-basket__total { display: flex; justify-content: space-between; margin: 0.6rem 0 0; font-size: 1rem; color: #042454; }
.pharmo-basket__total strong { font-size: 1.1rem; }
.pharmo-basket .pharmo-ob-selected { margin-top: 0.4rem; font-size: 0.82rem; }

/* Treatments page "Helpful extras": WooCommerce's AJAX add-to-basket states. */
#extras .add_to_cart_button.loading { opacity: .6; pointer-events: none; }
#extras .add_to_cart_button.added::after { content: " \2713"; margin-left: .3em; }
#extras .added_to_cart { display: block; margin-top: .5rem; text-align: center; font-size: .8125rem; font-weight: 700; color: #1b6b70; text-decoration: underline; text-underline-offset: 2px; }

/* Migrated hand-built posts (.spost): the dark "In short" and CTA bands expect
   their text in <p> tags, which hand-built pages don't get, so set it here. */
.spost__answer, .spost__cta-band { color: #eef2fa; }
/* ...and their lists keep their numbers and bullets (the theme's reset removes them). */
.spost ol { list-style: decimal; padding-left: 1.4rem; margin: 0 0 1.25rem; }
.spost ol li { margin: 0 0 .45rem; padding-left: .2rem; }
.spost ul.spost__list, .spost__refs ul { list-style: disc; }
/* The "guide series" card grid at the end of some classic posts is a list:
   .article-body ul would put a bullet beside every card. */
.article-body ul.scluster__grid { list-style: none; margin: 0; padding-left: 0; }
.article-body .scluster__grid li { margin: 0; padding-left: 0; }