/* Physiosolution addons — additional styles for Nursing Staff and
   Physiotherapy Products sections. Loaded alongside site.css. All colors
   and radii reuse the existing design tokens defined in site.css. */

/* ---------- Medical disclaimer callout ---------- */
.disclaimer-box {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  padding: 1.25rem 1.5rem;
  max-width: 62rem;
  margin-inline: auto;
}
.disclaimer-box h3 {
  font-size: 1rem;
  color: var(--foreground);
  margin: 0 0 0.5rem;
}
.disclaimer-box p {
  font-size: 0.9rem;
  color: var(--muted-foreground);
  line-height: 1.65;
}

/* ---------- Nursing service pill grid on hub page ---------- */
.service-pill-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) { .service-pill-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .service-pill-grid { grid-template-columns: repeat(3, 1fr); } }
.service-pill-grid a {
  display: block;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  font-size: 0.95rem;
  font-weight: 500;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.service-pill-grid a:hover {
  border-color: color-mix(in oklab, var(--primary) 45%, transparent);
  background: var(--primary-soft);
  color: var(--primary-dark);
  transform: translateY(-2px);
}
.service-pill-grid a span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted-foreground);
}

/* ---------- Product image placeholder ---------- */
.product-media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--primary-soft) 60%, var(--card)),
    color-mix(in oklab, var(--surface-alt) 90%, var(--card))
  );
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.product-media svg {
  width: 44%;
  height: 44%;
  color: var(--primary);
  stroke-width: 1.4;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.product-media .cat-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 92%, transparent);
  backdrop-filter: blur(4px);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary-dark);
  border: 1px solid var(--border);
}

/* ---------- Product card grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
}
.product-card h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.product-card .desc {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  line-height: 1.55;
  flex-grow: 1;
}
.product-card .meta {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.product-card .meta dt {
  font-weight: 600;
  color: var(--foreground);
  margin-top: 0.5rem;
}
.product-card .meta dt:first-child { margin-top: 0; }
.product-card .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.product-card .actions .btn { flex: 1; min-width: 6rem; font-size: 0.8rem; padding: 0.5rem 0.75rem; }

/* ---------- Filter / search panel ---------- */
.filter-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}
.filter-panel h3 {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.6rem;
  margin-top: 1.25rem;
}
.filter-panel h3:first-of-type { margin-top: 0; }
.filter-search {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--background);
  color: var(--foreground);
}
.filter-search:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.filter-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--foreground);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.filter-chip:hover { border-color: color-mix(in oklab, var(--primary) 50%, transparent); }
.filter-chip[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.filter-reset {
  margin-top: 1rem;
  padding: 0.5rem 0.9rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  cursor: pointer;
  width: 100%;
}
.filter-reset:hover { color: var(--primary); border-color: var(--primary); }

/* ---------- Product listing layout ---------- */
.product-layout { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) {
  .product-layout { grid-template-columns: 18rem 1fr; align-items: start; }
  .filter-panel { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.filter-result-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.filter-result-meta p { font-size: 0.85rem; color: var(--muted-foreground); }
.filter-active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.filter-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.75rem;
  font-weight: 500;
}
.filter-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--muted-foreground);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

/* ---------- Mobile filter toggle ---------- */
.filter-mobile-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--foreground);
  cursor: pointer;
  margin-bottom: 1rem;
}
@media (min-width: 1000px) { .filter-mobile-toggle { display: none; } }
.filter-panel[data-mobile-hidden="true"] {
  display: none;
}
@media (min-width: 1000px) { .filter-panel[data-mobile-hidden="true"] { display: block; } }

/* ---------- Small icon-only illustrations for products ---------- */
.product-illustration {
  display: grid;
  place-items: center;
  height: 100%;
  width: 100%;
}

/* ==================================================================
   CMS hero banner
   Rendered by render_content_hero() in app/helpers.php.

   Typography, colour and spacing are deliberately identical to
   .page-hero in site.css, which is what the rest of the site already
   uses at the top of a blog post. A hero placed above a page should
   not announce itself with a different type scale, so the only things
   that vary here are the ones the editor actually exposes: image,
   overlay, alignment, copy width and height.
   ================================================================== */

.cms-hero {
  --hero-pad: 3.25rem;
  --hero-min: 0px;
  --hero-copy: 56rem;     /* .page-hero h1 max-width */
  --hero-lede: 46rem;     /* .page-hero .lede max-width */
  --hero-scrim: oklch(0.985 0.008 190 / 0.9);
  --hero-focal: center;

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: var(--hero-min);
  margin: 0;
  background: color-mix(in oklab, var(--primary-soft) 60%, var(--background));
}

/* ---------- image layer ---------- */
.cms-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cms-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focal);
  display: block;
}
.hero-focal-top    { --hero-focal: center top; }
.hero-focal-center { --hero-focal: center center; }
.hero-focal-bottom { --hero-focal: center bottom; }

/* ---------- scrim ----------
   Only over an image. The flat background already carries enough
   contrast on its own. */
.cms-hero.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.cms-hero.has-image.hero-overlay-none::before { display: none; }

.cms-hero.has-image.hero-overlay-light.hero-align-left::before {
  background: linear-gradient(90deg, var(--hero-scrim) 0%,
              color-mix(in oklab, var(--hero-scrim) 88%, transparent) 42%,
              transparent 88%);
}
.cms-hero.has-image.hero-overlay-light.hero-align-right::before {
  background: linear-gradient(270deg, var(--hero-scrim) 0%,
              color-mix(in oklab, var(--hero-scrim) 88%, transparent) 42%,
              transparent 88%);
}
.cms-hero.has-image.hero-overlay-light.hero-align-center::before {
  background: color-mix(in oklab, var(--hero-scrim) 92%, transparent);
}

.cms-hero.has-image.hero-overlay-dark::before {
  background: linear-gradient(90deg, oklch(0.21 0.04 265 / 0.82) 0%,
              oklch(0.21 0.04 265 / 0.62) 55%,
              oklch(0.21 0.04 265 / 0.38) 100%);
}
.cms-hero.has-image.hero-overlay-dark.hero-align-right::before {
  background: linear-gradient(270deg, oklch(0.21 0.04 265 / 0.82) 0%,
              oklch(0.21 0.04 265 / 0.62) 55%,
              oklch(0.21 0.04 265 / 0.38) 100%);
}
.cms-hero.has-image.hero-overlay-dark.hero-align-center::before {
  background: oklch(0.21 0.04 265 / 0.66);
}

/* ---------- copy ---------- */
.cms-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  padding-block: var(--hero-pad);
}
.cms-hero-copy {
  width: 100%;
  max-width: var(--hero-copy);
  min-width: 0;
}

.hero-width-narrow { --hero-copy: 42rem; --hero-lede: 38rem; }
.hero-width-normal { --hero-copy: 56rem; --hero-lede: 46rem; }
.hero-width-wide   { --hero-copy: 72rem; --hero-lede: 56rem; }

.hero-align-left   .cms-hero-inner { justify-content: flex-start; }
.hero-align-center .cms-hero-inner { justify-content: center; }
.hero-align-center .cms-hero-copy  { text-align: center; }
.hero-align-center .cms-hero-copy .btn-row { justify-content: center; }
.hero-align-right  .cms-hero-inner { justify-content: flex-end; }
.hero-align-right  .cms-hero-copy  { text-align: right; }
.hero-align-right  .cms-hero-copy .btn-row { justify-content: flex-end; }

/* Matches .eyebrow in site.css. */
.cms-hero-eyebrow,
.hero-heading-top {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}

/* Matches the global h1 plus .page-hero h1, so the hero heading is the
   same size whether it is tagged h1 or h2. */
.cms-hero-title {
  margin: 0.75rem 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.cms-hero-title .accent { color: var(--primary); }

/* Matches .page-hero .lede. */
.cms-hero-lede {
  margin: 1.25rem 0 0;
  max-width: var(--hero-lede);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.hero-align-center .cms-hero-lede { margin-inline: auto; }
.hero-align-right  .cms-hero-lede { margin-inline: auto 0; }

.cms-hero-copy .btn-row { margin-top: 1.75rem; }

/* ---------- secondary button over a photo ----------
   .btn-outline is transparent with a --border edge. That reads fine on the
   flat background, which is why .page-hero leaves it alone, but over a hero
   image the button all but disappears: a near-white hairline on a pale
   photograph. Only the image case gets a surface, so a text-only hero stays
   pixel-identical to .page-hero. */
.cms-hero.has-image .btn-outline {
  background: color-mix(in oklab, var(--background) 88%, transparent);
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  color: var(--primary-dark);
  box-shadow: 0 1px 2px oklch(0.2 0.04 230 / 0.08);
}
.cms-hero.has-image .btn-outline:hover {
  background: var(--background);
  border-color: var(--primary);
  color: var(--primary-dark);
}
@supports (backdrop-filter: blur(2px)) {
  .cms-hero.has-image .btn-outline {
    background: color-mix(in oklab, var(--background) 72%, transparent);
    backdrop-filter: blur(6px) saturate(1.1);
  }
}

/* ---------- inverse (dark scrim) ---------- */
.cms-hero.is-inverse .cms-hero-title { color: var(--primary-foreground); }
.cms-hero.is-inverse .cms-hero-eyebrow,
.cms-hero.is-inverse .hero-heading-top { color: oklch(0.87 0.09 187.5); }
.cms-hero.is-inverse .cms-hero-title .accent { color: oklch(0.87 0.09 187.5); }
.cms-hero.is-inverse .cms-hero-lede { color: oklch(0.93 0.012 247.9); }
.cms-hero.is-inverse .btn-outline {
  background: color-mix(in oklab, oklch(0.21 0.04 265) 42%, transparent);
  color: var(--primary-foreground);
  border-color: color-mix(in oklab, var(--primary-foreground) 55%, transparent);
  box-shadow: none;
}
.cms-hero.is-inverse .btn-outline:hover {
  background: color-mix(in oklab, var(--primary-foreground) 16%, transparent);
  color: var(--primary-foreground);
  border-color: var(--primary-foreground);
}
@supports (backdrop-filter: blur(2px)) {
  .cms-hero.is-inverse .btn-outline {
    background: color-mix(in oklab, oklch(0.21 0.04 265) 28%, transparent);
    backdrop-filter: blur(6px);
  }
}

/* ---------- heights ----------
   A text-only banner is sized by its padding, the same way .page-hero
   is, so it never carries dead space under the copy. A banner with a
   photo needs a floor or the image has nothing to fill. */
.cms-hero-compact { --hero-pad: 2.5rem; }
.cms-hero-medium  { --hero-pad: 3.25rem; }
.cms-hero-tall    { --hero-pad: 4rem; }
.cms-hero-full    { --hero-pad: 4rem; --hero-min: min(100svh - var(--header-h), 820px); }

.cms-hero.has-image.cms-hero-compact { --hero-min: 320px; }
.cms-hero.has-image.cms-hero-medium  { --hero-min: 440px; }
.cms-hero.has-image.cms-hero-tall    { --hero-min: 600px; }

@media (min-width: 768px) {
  .cms-hero-compact { --hero-pad: 3.25rem; }
  .cms-hero-medium  { --hero-pad: 4.5rem; }
  .cms-hero-tall    { --hero-pad: 6rem; }
  .cms-hero-full    { --hero-pad: 6rem; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cms-hero { --hero-copy: none; --hero-lede: none; }
  .cms-hero.has-image.cms-hero-tall { --hero-min: 460px; }
  .cms-hero-full { --hero-min: 0px; }
  .hero-align-right .cms-hero-copy,
  .hero-align-right .cms-hero-copy .btn-row { text-align: left; justify-content: flex-start; }
  .hero-align-right .cms-hero-lede { margin-inline: 0; }
  .cms-hero.has-image.hero-overlay-light::before {
    background: color-mix(in oklab, var(--hero-scrim) 90%, transparent);
  }
  .cms-hero.has-image.hero-overlay-dark::before {
    background: oklch(0.21 0.04 265 / 0.7);
  }
}

@media (max-width: 640px) {
  .cms-hero-copy .btn-row { gap: 0.6rem; }
  .cms-hero-copy .btn-row .btn { flex: 1 1 100%; }
}

@media print {
  .cms-hero { min-height: 0; background: none; }
  .cms-hero-media, .cms-hero.has-image::before { display: none; }
  .cms-hero-title, .cms-hero-lede, .cms-hero-eyebrow { color: #000; }
  .cms-hero .btn-row { display: none; }
}

/* ---------- Mega dropdown (header Conditions menu) ---------- */
.menu-panel.menu-mega {
  position: fixed; left: 0; right: 0; top: auto; margin-inline: auto;
  width: min(78rem, calc(100vw - 2rem));
  max-height: calc(100vh - var(--header-h, 4.5rem) - 3.5rem); overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-grid.mega-cols { display: block; columns: 13.5rem; column-gap: 1.5rem; max-height: none; overflow: visible; }
.menu-grid.mega-cols .menu-group { break-inside: avoid-column; margin-bottom: 0.9rem; }
.menu-grid.mega-cols .menu-label {
  margin: 0 0 0.25rem; padding: 0 0.6rem 0.3rem; border-bottom: 1px solid var(--border);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary);
}
.menu-grid.mega-cols a { padding: 0.28rem 0.6rem; font-size: 0.8125rem; line-height: 1.35; }
.nav-desktop .nav-link { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1280px) {
  .nav-desktop { gap: 0; }
  .nav-desktop .nav-link { padding-inline: 0.45rem; font-size: 0.85rem; gap: 0.2rem; }
}

/* Exercise pages: numbered steps and compact pill grids inside articles */
.article ol.ex-steps { counter-reset: step; display: grid; gap: 0.7rem; margin-top: 1rem; }
.article ol.ex-steps li { counter-increment: step; display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.95rem; color: var(--muted-foreground); line-height: 1.6; }
.article ol.ex-steps li::before { content: counter(step); flex: none; width: 1.65rem; height: 1.65rem; margin-top: 0.1rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; font-size: 0.8rem; display: grid; place-items: center; }
@media (min-width: 900px) { .article .service-pill-grid.ex-grid { grid-template-columns: repeat(2, 1fr); } }
.section.section-tight { padding-top: 0; }
.heading p { margin-top: 0.5rem; color: var(--muted-foreground); }
.heading h2 a { color: inherit; }
.heading h2 a:hover { color: var(--primary); }

/* Contextual in-text links */
.ctx-link { color: var(--primary-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--primary) 45%, transparent); }
.ctx-link:hover { color: var(--primary); text-decoration-color: currentColor; }

/* Dropdowns never push the page wider than the viewport */
html { overflow-x: clip; }
.menu-panel { max-width: calc(100vw - 2rem); }

/* ---------------------------------------------------------------- calculators */
.calc-page { max-width: 60rem; }
.calc { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); padding: clamp(1rem, 3vw, 1.75rem); }
.calc-grid { display: grid; gap: 0.9rem 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .calc-grid { grid-template-columns: repeat(2, 1fr); } }
.calc-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.calc-field[hidden] { display: none; }
.calc-wide, .calc-grid fieldset { grid-column: 1 / -1; }
.calc-field label, .calc-field legend { font-size: 0.9rem; font-weight: 600; color: var(--foreground); line-height: 1.35; }
.calc-unit { font-weight: 400; color: var(--muted-foreground); }
.calc-field input[type=number], .calc-field input[type=date], .calc-field select { width: 100%; min-height: 2.75rem; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); color: var(--foreground); font: inherit; }
.calc-field input:focus, .calc-field select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.calc-grid fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0; }
.calc-check { display: flex; gap: 0.55rem; align-items: flex-start; font-weight: 400 !important; font-size: 0.9rem; padding: 0.25rem 0; }
.calc-check input { margin-top: 0.2rem; accent-color: var(--primary); }
.calc-range { display: flex; align-items: center; gap: 0.75rem; }
.calc-range input { flex: 1; accent-color: var(--primary); }
.calc-range output { min-width: 2rem; text-align: center; font-weight: 700; color: var(--primary-dark); }
.calc-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.calc-err { margin-top: 0.75rem; color: #b42318; font-size: 0.9rem; }
.calc-out:empty { display: none; }
.calc-out { margin-top: 1.5rem; display: grid; gap: 1rem; }
.calc-result { border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-left: 5px solid var(--success); background: var(--surface-alt); }
.calc-result.lv-fair { border-left-color: #d99a06; }
.calc-result.lv-poor { border-left-color: #e0612b; }
.calc-result.lv-alert { border-left-color: #b42318; background: #fff5f4; }
.calc-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); }
.lv-fair .calc-badge { background: #fff4d6; color: #7a5600; }
.lv-poor .calc-badge { background: #ffe8dc; color: #9a3b12; }
.lv-alert .calc-badge { background: #fde2df; color: #8f1d12; }
.calc-result h3 { margin: 0.5rem 0 0.75rem; font-size: 1.25rem; }
.calc-table-wrap { overflow-x: auto; }
.calc-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.calc-table th, .calc-table td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.calc-table th { font-weight: 500; color: var(--muted-foreground); width: 50%; }
@media (max-width: 480px) { .calc-table th { width: 42%; } }
.calc-table td { font-weight: 600; color: var(--foreground); }
.calc-note { margin-top: 0.75rem; font-size: 0.92rem; color: var(--muted-foreground); line-height: 1.6; }
.calc-spark { display: block; width: 100%; max-width: 20rem; height: 4rem; margin-top: 0.75rem; color: var(--primary); }
.calc-rx { display: grid; gap: 1rem; }
@media (min-width: 760px) { .calc-rx { grid-template-columns: 1fr 1fr; } }
.calc-rx-col { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.15rem; background: var(--card); }
.calc-rx-col h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.calc-rx-col p { font-size: 0.9rem; color: var(--muted-foreground); line-height: 1.55; margin: 0 0 0.5rem; }
.calc-dose { color: var(--foreground) !important; font-weight: 500; }
.calc-links { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.3rem; }
.calc-links a { color: var(--primary-dark); font-weight: 600; font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.calc-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.calc-disclaimer { font-size: 0.8rem; color: var(--muted-foreground); }
.calc-read { width: 100%; border-collapse: collapse; margin-top: 0.75rem; font-size: 0.92rem; }
.calc-read th, .calc-read td { border: 1px solid var(--border); padding: 0.5rem 0.65rem; text-align: left; vertical-align: top; }
.calc-read th { background: var(--surface-alt); width: 40%; }
.calc-search { width: 100%; max-width: 32rem; min-height: 3rem; padding: 0.65rem 1rem; border: 1px solid var(--border); border-radius: 999px; font: inherit; background: var(--card); }
.calc-search:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.calc-hub-grid a small { display: block; font-weight: 400; color: var(--muted-foreground); font-size: 0.8rem; margin-top: 0.15rem; line-height: 1.4; }
[data-calc-group][hidden], [data-calc-item][hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.faq-pack .faq-groups h3 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; color: var(--foreground); }
.faq-pack .faq-groups h3:first-child { margin-top: 0; }
.faq-pack .accordion .answer p { margin: 0; line-height: 1.65; }
.faq-pack details:target summary { color: var(--primary); }
.accordion .answer p { margin: 0; line-height: 1.65; }
.accordion details:target summary { color: var(--primary); }