/* ==========================================================================
   Scoop Sense — one stylesheet for the whole site.
   Class prefix: sc-  |  flat kebab-case naming  |  mobile-first

   Design language: editorial research publication + product database.
   The signature device is the "facts panel" table — thick top rule,
   hairline row rules, right-aligned tabular figures — echoing the
   supplement facts panel the site is about.

   Spacing: 8px system (8 / 16 / 24 / 32 / 48 / 64).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Color — cool graphite black, gym-floor neutral. No warm/brown cast. */
  --sc-bg: #0F1114;            /* page background */
  --sc-bg-deep: #0A0C0E;       /* footer / recessed areas */
  --sc-surface: #171A1F;       /* cards, panels, controls */
  --sc-surface-2: #1F242B;     /* hover / raised */
  --sc-ink: #E9EBEE;           /* primary text */
  --sc-muted: #9AA3AD;         /* secondary text */
  --sc-border: #262B33;        /* hairlines */
  /* Control borders carry meaning (this is an input, this is a button), so
     they have to clear WCAG 1.4.11's 3:1 for non-text contrast. #3A424D was
     1.86:1 on the page and 1.72:1 on a card — effectively borderless.
     #656E7B measures 3.9:1 on the page and 3.4:1 on a card. */
  --sc-border-strong: #656E7B; /* control borders, emphasis rules */

  /* The accent — muted steel blue: calm, credible, research-tool register.
     Primary CTA, active states, focus. Brightens on hover. */
  --sc-accent: #6E93B8;
  --sc-accent-down: #8FB6DC;   /* hover/active brightening */
  --sc-accent-ink: #0C141D;    /* text on accent */

  /* Data/verification accent — muted blue-gray for "this is maintained
     information" furniture: verified lines, label sources, method links. */
  --sc-info: #8FA6BA;
  --sc-paper-info: #4E6478;    /* same role on paper panels */

  /* Paper — the supplement-facts-panel surface. Warm off-white "label"
     panels on the dark shell, like the facts panel on a dark tub. */
  --sc-paper: #F2EDE3;
  --sc-paper-ink: #17140F;
  --sc-paper-muted: rgba(23, 20, 15, 0.64);
  --sc-paper-line: rgba(23, 20, 15, 0.22);
  --sc-paper-amber: #8A5E1B;

  /* Cautions only. */
  --sc-amber: #D6A62E;
  --sc-amber-dim: rgba(214, 166, 46, 0.10);
  --sc-amber-line: rgba(214, 166, 46, 0.38);

  /* Stim-free status (used with text, never color alone). */
  --sc-calm: #8FBF95;
  --sc-calm-dim: rgba(143, 191, 149, 0.10);
  --sc-calm-line: rgba(143, 191, 149, 0.32);

  --sc-radius: 6px;
  --sc-radius-sm: 4px;
  --sc-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

  --sc-font-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sc-font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --sc-font-mono: Consolas, "Cascadia Mono", "SF Mono", Menlo, monospace;

  --sc-max: 1220px;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sc-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--sc-ink);
  background: var(--sc-bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2 {
  font-family: var(--sc-font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 16px;
  color: var(--sc-ink);
  letter-spacing: 0.005em;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}

h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
}

h3 {
  font-family: var(--sc-font-body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0 0 8px;
  color: var(--sc-ink);
}

::selection {
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
}

p {
  margin: 0 0 16px;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--sc-ink);
  text-decoration: underline;
  text-decoration-color: var(--sc-border-strong);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--sc-accent);
}

ul,
ol {
  margin: 0 0 16px;
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
}

strong {
  font-weight: 600;
}

small {
  font-size: 0.85em;
}

table {
  border-collapse: collapse;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
  border-radius: var(--sc-radius-sm);
}

/* The accent is a dark-shell colour: on the cream paper panels it measures
   2.76:1, under the 3:1 a focus indicator needs. Inside paper, focus goes
   dark instead. */
.sc-facts :focus-visible,
.sc-annotated :focus-visible,
.sc-heropanel :focus-visible,
.sc-tile-facts :focus-visible {
  outline-color: var(--sc-paper-ink);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   3. Layout helpers + shared text styles
   -------------------------------------------------------------------------- */

.sc-container {
  max-width: var(--sc-max);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .sc-container {
    padding: 0 24px;
  }
}

.sc-section {
  padding: 40px 0;
}

main > .sc-section + .sc-section {
  border-top: 1px solid var(--sc-border);
}

@media (min-width: 768px) {
  .sc-section {
    padding: 64px 0;
  }
}

/* One band per page may change surface instead of repeating the hairline
   rule. Used for the methodology block, which is the page's argument rather
   than another list. */
.sc-section-deep {
  background: var(--sc-bg-deep);
  border-top: 1px solid var(--sc-border);
  border-bottom: 1px solid var(--sc-border);
}

main > .sc-section-deep + .sc-section {
  border-top: 0;
}

/* Small uppercase label — the ONLY place uppercase is allowed besides
   table headers, tags, and data labels. */
.sc-eyebrow {
  font-family: var(--sc-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-muted);
  margin: 0 0 16px;
}

.sc-kicker {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-muted);
}

.sc-lead {
  font-size: 1.125rem;
  color: var(--sc-muted);
  max-width: 62ch;
}

.sc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  padding: 8px 16px;
  font-weight: 600;
  text-decoration: none;
  z-index: 100;
}

.sc-skip:focus-visible {
  left: 8px;
  top: 8px;
}

/* Available to assistive tech, off the visual page — table captions and
   labels that the layout states visually by other means. */
.sc-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Section heading row: title left, contextual link right. */
.sc-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 24px;
}

.sc-section-head h2 {
  margin-bottom: 0;
}

.sc-action-link {
  display: inline-block;
  color: var(--sc-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.15s ease;
}

.sc-action-link:hover {
  transform: translateX(3px);
}

.sc-action-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--sc-accent);
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. Header + nav
   -------------------------------------------------------------------------- */

.sc-header {
  background: var(--sc-bg);
  border-bottom: 1px solid var(--sc-border);
  animation: sc-drop 0.4s ease-out backwards;
}

.sc-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.sc-logo {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--sc-ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.sc-logo span {
  color: var(--sc-accent);
}

/* Six links measure 541px and cannot share one 390px row. Scrolling that row
   instead left "Health & Safety" and "About" off the screen behind a 20px
   fade phone readers took for a hard cut, and a swipe nobody knows about is
   not navigation. Two wrapped rows cost ~40px of the fold and put every link
   where it can be tapped. */
.sc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  align-items: center;
  max-width: 100%;
}

.sc-nav a {
  position: relative;
  color: var(--sc-muted);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.sc-nav a:hover {
  color: var(--sc-ink);
}

/* Underline grows out from the left on hover; active links keep the
   static accent border below. */
.sc-nav a:not(.sc-active)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--sc-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.sc-nav a:not(.sc-active):hover::after {
  transform: scaleX(1);
}

.sc-nav a.sc-active {
  color: var(--sc-ink);
  border-bottom-color: var(--sc-accent);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sc-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--sc-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    transform 0.15s ease, box-shadow 0.15s ease;
}

.sc-btn:hover {
  transform: translateY(-1px);
}

/* Primary — the main lime moment on a page. Use once or twice per page. */
.sc-btn-primary {
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
}

.sc-btn-primary:hover {
  background: var(--sc-accent-down);
  color: var(--sc-accent-ink);
  box-shadow: 0 6px 20px rgba(143, 182, 220, 0.25);
}

/* Secondary — quiet bordered button. */
.sc-btn-secondary {
  background: transparent;
  border-color: var(--sc-border-strong);
  color: var(--sc-ink);
}

.sc-btn-secondary:hover {
  background: var(--sc-surface-2);
  border-color: var(--sc-border-strong);
}

/* Ghost — for the affiliate action: present, never the loudest thing. */
.sc-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--sc-muted);
  text-decoration: underline;
  text-decoration-color: var(--sc-border-strong);
  text-underline-offset: 3px;
  padding-left: 8px;
  padding-right: 8px;
}

.sc-btn-ghost:hover {
  color: var(--sc-ink);
  text-decoration-color: var(--sc-accent);
}

.sc-btn:active {
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   6. Hero (homepage)
   -------------------------------------------------------------------------- */

.sc-hero {
  position: relative;
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--sc-border);
  background: var(--sc-bg);
}

/* The volt glow lives on a pseudo-element so it can breathe — a very
   slow ambient pulse, never a flash. */
.sc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 85% -10%, rgba(110, 147, 184, 0.09), transparent 60%);
  animation: sc-glow 9s ease-in-out infinite alternate;
  pointer-events: none;
}

.sc-hero > .sc-container {
  position: relative;
}

@media (min-width: 768px) {
  .sc-hero {
    padding: 72px 0 64px;
  }
}

.sc-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 920px) {
  .sc-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr);
    gap: 64px;
  }
}

/* Uppercase condensed display — the one loud typographic moment. */
.sc-hero h1 {
  margin-bottom: 16px;
  font-size: clamp(2.6rem, 6.5vw, 4.4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 0.98;
}

.sc-hero h1 .sc-hl {
  color: var(--sc-accent);
}

.sc-hero .sc-lead {
  margin-bottom: 32px;
}

/* Hero facts panel — a Scoop Sense Facts label, set in the iconic
   thick-and-thin rule system of a real supplement facts panel. */
.sc-heropanel {
  background: var(--sc-paper);
  color: var(--sc-paper-ink);
  border-radius: var(--sc-radius);
  padding: 16px 18px 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(23, 20, 15, 0.9);
}

.sc-heropanel-title {
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
}

.sc-heropanel-sub {
  font-size: 0.85rem;
  color: var(--sc-paper-muted);
  margin: 0 0 8px;
}

.sc-heropanel-bar {
  height: 8px;
  background: var(--sc-paper-ink);
  margin-bottom: 4px;
}

.sc-heropanel dl {
  margin: 0;
}

.sc-heropanel dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--sc-paper-line);
  font-size: 0.92rem;
}

.sc-heropanel dl > div:last-child {
  border-bottom: 4px solid var(--sc-paper-ink);
}

.sc-heropanel dt {
  margin: 0;
}

.sc-heropanel dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sc-heropanel-note {
  font-size: 0.78rem;
  color: var(--sc-paper-muted);
  margin: 8px 0 0;
}

.sc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 40px;
}

/* Credibility row — quiet, hairline-separated facts. */
.sc-cred {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--sc-border);
}

.sc-cred li {
  margin: 0;
  font-size: 0.88rem;
  color: var(--sc-muted);
  padding-left: 12px;
  border-left: 2px solid var(--sc-border-strong);
}

/* --------------------------------------------------------------------------
   7. Data tables — the site's signature device.
   Thick top rule, hairline rows, right-aligned tabular figures.
   -------------------------------------------------------------------------- */

/* Narrow screens scroll the table sideways. Wide screens must not: an
   overflow container becomes the scroll parent, and a sticky <thead> inside
   one has nothing to stick to. */
.sc-table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1100px) {
  .sc-table-scroll {
    overflow-x: visible;
  }
}

/* The right edge has to say the columns continue: a fade over the cut-off
   column and a chevron, both pinned to the visible edge. A fade alone was not
   a hint anyone read — a column cut mid-cell against a near-black page just
   looks like the end of the table — and it never drew at all, because a
   floated strip resolves `height: 100%` against this auto-height box as 0.
   Flex gives the strip a height to stretch to, and the stacking order lifts it
   over the sticky head, which paints on top of it otherwise. The chevron is a
   background image because a url() cannot carry var(--sc-muted).

   Phones only: CSS cannot ask whether a box really scrolls, and while every
   table here overflows a phone, most of them fit by 600px — where the same
   mark would promise columns that are not there. */
@media (max-width: 559px) {
  .sc-table-scroll {
    display: flex;
  }

  .sc-table-scroll::after {
    content: "";
    position: sticky;
    right: 0;
    z-index: 4;
    flex: none;
    align-self: stretch;
    width: 40px;
    margin-left: -40px;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.5l5.5 5.5-5.5 5.5' fill='none' stroke='%239AA3AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
      linear-gradient(to right, rgba(15, 17, 20, 0), var(--sc-bg) 78%);
    background-position: right 9px top 12px, 0 0;
    background-repeat: no-repeat;
    pointer-events: none;
  }
}

.sc-table {
  width: 100%;
  border-top: 3px solid var(--sc-ink);
  font-variant-numeric: tabular-nums;
}

/* Text cells wrap; only the figures hold one line. Keeping every cell on one
   line pushed wide tables (protein carries source and sweetener prose) past
   the container and gave the whole page a horizontal scrollbar. */
.sc-table th,
.sc-table td {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--sc-border);
  text-align: left;
  font-size: 0.95rem;
  vertical-align: baseline;
  white-space: normal;
}

.sc-table .sc-num,
.sc-table thead th {
  white-space: nowrap;
}

.sc-table th:last-child,
.sc-table td:last-child {
  padding-right: 0;
}

/* Except in a phone's scrolling table, where the edge strip parks over this
   column once the reader reaches the far right — without a gutter it would sit
   on the figures. Only the scrolling tables: the facts panels on product pages
   use the same table with no strip over it, and would just lose 40px of
   measure. The table cannot carry the padding itself — border-collapse
   ignores padding on the table box. */
@media (max-width: 559px) {
  .sc-table-scroll .sc-table th:last-child,
  .sc-table-scroll .sc-table td:last-child {
    padding-right: 40px;
  }
}

/* The head sticks: a 38-row comparison table whose column meanings scroll
   away is unreadable past the first screen. The offset clears the sticky
   toolbar where one exists; pages without a toolbar set it to 0. */
.sc-table thead th {
  position: sticky;
  top: var(--sc-table-head-top, 0px);
  z-index: 3;
  background: var(--sc-bg);
  box-shadow: inset 0 -1px 0 var(--sc-border-strong);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-muted);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Whatever the browser scrolls to itself — an anchor, a tabbed link, a
   find-in-page hit — otherwise lands under the stuck head. At 200% text that
   head is 60px tall and swallows a row's whole figure line, leaving a product
   name with no caffeine or citrulline under it. Rows reserve the head's
   height: its 20px of padding plus its own line. */
.sc-table tbody tr,
.sc-table tbody a {
  scroll-margin-top: calc(var(--sc-table-head-top, 0px) + 1.2rem + 24px);
}

.sc-table .sc-num {
  text-align: right;
}

.sc-table td.sc-num {
  font-weight: 600;
}

.sc-table .sc-dim {
  color: var(--sc-muted);
  font-weight: 400;
}

/* Dose qualifier ("malate", "blend"). It sits in a fixed-width slot after the
   figure, emitted even when empty, so a column of numbers still shares one
   right edge — tabular figures are pointless if a trailing word pushes every
   numeral to a different horizontal position. */
.sc-qual {
  display: inline-block;
  width: 5.4em;
  text-align: left;
  padding-left: 8px;
  font-size: 0.78em;
  font-weight: 400;
  color: var(--sc-muted);
  vertical-align: baseline;
}

.sc-tile-fact-value .sc-qual,
.sc-facts .sc-table .sc-qual {
  color: var(--sc-paper-muted);
}

.sc-table tbody td {
  transition: background-color 0.15s ease;
}

/* Tracking one row across eight columns needs a lift you can actually see;
   the previous 0.015 was below threshold on this background. */
.sc-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.045);
}

/* Product cell: brand small over name. */
.sc-table .sc-cell-brand {
  display: block;
  font-size: 0.75rem;
  color: var(--sc-muted);
}

.sc-table .sc-cell-name {
  font-weight: 600;
}

.sc-table a {
  text-decoration: none;
}

.sc-table a .sc-cell-name {
  text-decoration: underline;
  text-decoration-color: var(--sc-border-strong);
  text-underline-offset: 3px;
}

.sc-table a:hover .sc-cell-name {
  text-decoration-color: var(--sc-accent);
}

/* Sortable headers (compare page). */
.sc-sort-btn {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.sc-sort-btn:hover {
  color: var(--sc-ink);
}

th[aria-sort="ascending"] .sc-sort-btn::after {
  content: " ↑";
}

th[aria-sort="descending"] .sc-sort-btn::after {
  content: " ↓";
}

.sc-table-note {
  font-size: 0.85rem;
  color: var(--sc-muted);
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   8. Methodology + annotated label example
   -------------------------------------------------------------------------- */

.sc-method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 900px) {
  .sc-method-grid {
    grid-template-columns: 5fr 4fr;
    gap: 64px;
  }
}

.sc-method-steps {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  counter-reset: step;
}

.sc-method-steps li {
  counter-increment: step;
  margin: 0 0 20px;
  padding: 0 0 20px 40px;
  position: relative;
  border-bottom: 1px solid var(--sc-border);
}

.sc-method-steps li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.sc-method-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.2em;
  font-family: var(--sc-font-mono);
  font-size: 0.8rem;
  color: var(--sc-muted);
}

.sc-method-steps strong {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

.sc-method-steps p {
  margin: 0;
  color: var(--sc-muted);
  font-size: 0.95rem;
}

/* Annotated label card — set on paper, like the panel it explains. */
.sc-annotated {
  background: var(--sc-paper);
  color: var(--sc-paper-ink);
  border: 1px solid rgba(23, 20, 15, 0.9);
  border-radius: var(--sc-radius);
  padding: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
  .sc-annotated {
    padding: 24px;
  }
}

.sc-annotated-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sc-paper-ink);
  margin: 0 0 4px;
}

.sc-annotated-sub {
  font-size: 0.85rem;
  color: var(--sc-paper-muted);
  margin: 0 0 16px;
}

.sc-annotated .sc-table {
  border-top-color: var(--sc-paper-ink);
}

.sc-annotated .sc-table th,
.sc-annotated .sc-table td {
  white-space: normal;
  border-bottom-color: var(--sc-paper-line);
}

.sc-annotated tr.sc-note-row td {
  border-bottom: 1px solid var(--sc-paper-line);
  padding-top: 6px;
  padding-bottom: 10px;
  font-size: 0.85rem;
  color: var(--sc-paper-amber);
  white-space: normal;
}

.sc-annotated tr.sc-flagged td {
  border-bottom: 0;
}

/* Dose scale — used only where the comparison is meaningful, always with
   a labelled range and marker. */
.sc-scale {
  margin-top: 20px;
}

.sc-scale-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-paper-muted);
  margin: 0 0 8px;
}

.sc-scale-bar {
  position: relative;
  height: 8px;
  background: rgba(23, 20, 15, 0.08);
  border: 1px solid rgba(23, 20, 15, 0.3);
  border-radius: 2px;
}

.sc-scale-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--sc-paper-amber);
  border-radius: 1px;
}

.sc-scale-marker {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  background: var(--sc-paper-ink);
}

.sc-scale-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.82rem;
  color: var(--sc-paper-muted);
  margin: 8px 0 0;
}

/* --------------------------------------------------------------------------
   9. "Places to start" rows (homepage)
   -------------------------------------------------------------------------- */

.sc-starts {
  border-top: 3px solid var(--sc-ink);
}

.sc-start {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--sc-border);
}

@media (min-width: 768px) {
  .sc-start {
    grid-template-columns: 200px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 24px;
    padding: 20px 0;
  }
}

.sc-start-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-muted);
  margin: 0;
}

.sc-start-body {
  margin: 0;
}

.sc-start-body strong {
  font-weight: 700;
}

.sc-start-body .sc-start-why {
  display: block;
  font-size: 0.9rem;
  color: var(--sc-muted);
}

.sc-start .sc-action-link {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10. Safety callout
   -------------------------------------------------------------------------- */

.sc-safety {
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-left: 3px solid var(--sc-amber);
  border-radius: var(--sc-radius);
  padding: 20px;
  max-width: 820px;
}

@media (min-width: 768px) {
  .sc-safety {
    padding: 24px 32px;
  }
}

.sc-safety h2 {
  font-family: var(--sc-font-body);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.sc-safety p {
  color: var(--sc-muted);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   11. Affiliate disclosure line — plain, visible, restrained.
   -------------------------------------------------------------------------- */

.sc-disclosure-line {
  font-size: 0.85rem;
  color: var(--sc-muted);
  border-top: 1px solid var(--sc-border);
  padding-top: 12px;
  margin: 20px 0 0;
  max-width: 72ch;
}

/* --------------------------------------------------------------------------
   12. Hub: intro, toolbar, filters
   -------------------------------------------------------------------------- */

.sc-hub-intro {
  padding: 40px 0 24px;
}

@media (min-width: 768px) {
  .sc-hub-intro {
    padding: 56px 0 32px;
  }
}

.sc-hub-intro h1 {
  margin-bottom: 8px;
}

/* Intro composition: copy left, a compact facts panel right — the same
   masthead shape as the homepage, so all three landing pages read as one
   publication instead of leaving half the fold empty. */
.sc-intro-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .sc-intro-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
  }
}

.sc-intropanel {
  background: var(--sc-paper);
  color: var(--sc-paper-ink);
  border-top: 6px solid var(--sc-paper-ink);
  padding: 14px 16px 12px;
}

.sc-intropanel-title {
  font-family: var(--sc-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sc-paper-ink);
}

.sc-intropanel dl {
  margin: 0;
}

.sc-intropanel dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--sc-paper-line);
}

.sc-intropanel dt {
  font-size: 0.85rem;
  color: var(--sc-paper-muted);
}

.sc-intropanel dd {
  margin: 0;
  font-weight: 700;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sc-intropanel-note {
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--sc-paper-muted);
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 3px solid var(--sc-paper-ink);
}

/* On a phone this panel sits between the reader and the products, so it
   folds into two compact columns and drops its footnote. The database is
   what they came for. */
@media (max-width: 899px) {
  .sc-intropanel {
    padding: 10px 12px;
  }

  .sc-intropanel dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .sc-intropanel dl div {
    padding: 5px 0;
  }

  /* Four figures fit two rows; the rest are a desktop luxury. */
  .sc-intropanel dl div:nth-child(n + 5) {
    display: none;
  }

  .sc-intropanel dt {
    font-size: 0.78rem;
  }

  .sc-intropanel-note {
    display: none;
  }
}

/* Category intro paragraph on landing pages — under the lead, quieter. */
.sc-hub-intro-body {
  color: var(--sc-muted);
  font-size: 0.95rem;
  max-width: 72ch;
  margin-top: 10px;
}

/* Category chip row — crawlable links to each category's landing page. */
.sc-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.sc-chip {
  font-family: var(--sc-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sc-muted);
  text-decoration: none;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border-strong);
  border-radius: 999px;
  padding: 6px 14px;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.sc-chip:hover,
.sc-chip:focus-visible {
  color: var(--sc-ink);
  border-color: var(--sc-accent);
}

.sc-chip-active {
  color: var(--sc-accent-ink);
  background: var(--sc-accent);
  border-color: var(--sc-accent);
}

.sc-chip-active:hover,
.sc-chip-active:focus-visible {
  color: var(--sc-accent-ink);
  background: var(--sc-accent-down);
  border-color: var(--sc-accent-down);
}

/* Quick label filters, drawn by js/app.js above the result count. Same chip
   shape as the category row, but these are buttons that toggle a filter rather
   than links that navigate — the label filters were reachable only inside a
   panel that starts collapsed, which is a filter nobody found. */
.sc-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}

button.sc-chip {
  cursor: pointer;
  font-size: 0.85rem;
}

/* Homepage category cards — five doors into the database. */
.sc-cats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .sc-cats { grid-template-columns: repeat(2, 1fr); }
}

/* Three across, not five: at five the description column was ~26 characters
   wide, below any readable measure. Two rows of wider cards read faster. */
@media (min-width: 1024px) {
  .sc-cats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

.sc-cat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 18px 16px;
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.sc-cat-card:hover,
.sc-cat-card:focus-visible {
  background: var(--sc-surface-2);
  border-color: var(--sc-border-strong);
  transform: translateY(-2px);
}

.sc-cat-card-name {
  font-family: var(--sc-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sc-ink);
}

.sc-cat-card-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sc-accent);
}

.sc-cat-card-what {
  font-size: 0.88rem;
  color: var(--sc-muted);
}

/* Sticky, compact toolbar.
   An open filter panel can be taller than a phone viewport, and a pinned
   element taller than the viewport can never be scrolled to its bottom — so
   the bar gives up stickiness for as long as the panel is open. */
.sc-toolbar {
  position: sticky;
  top: 0;
  z-index: 30;
  /* Opaque, not a 96% wash: the "Check price" buttons on the cards passing
     behind the bar ghosted through it. A backdrop blur under a solid fill
     shows nothing, so it went with the transparency. */
  background: var(--sc-bg);
  border-top: 1px solid var(--sc-border);
  border-bottom: 1px solid var(--sc-border);
  padding: 12px 0;
}

.sc-toolbar.sc-open {
  position: static;
}

.sc-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.sc-input,
.sc-select {
  font-family: var(--sc-font-body);
  font-size: 0.92rem;
  color: var(--sc-ink);
  background: var(--sc-surface);
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-sm);
  padding: 8px 12px;
  min-height: 40px;
}

.sc-input::placeholder {
  color: var(--sc-muted);
}

.sc-select {
  cursor: pointer;
}

/* A 200px basis is a pixel width the text does not scale with: at 200% text
   the two lists and the filters button squeezed the field to 236px and the
   placeholder read "Search produ". Sizing it in ch ties the field to the words
   it has to hold, so the rest of the row wraps instead of shrinking it. Capped
   at 100% so the field itself never overflows the row. */
.sc-toolbar .sc-input {
  flex: 1 1 32ch;
  min-width: min(100%, 32ch);
}

.sc-clear-btn {
  font-family: var(--sc-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sc-muted);
  background: none;
  border: 0;
  padding: 8px 4px;
  min-height: 40px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--sc-border-strong);
  text-underline-offset: 3px;
}

.sc-clear-btn:hover {
  color: var(--sc-ink);
}

/* The toolbar row stays one line at every width: search, the two lists that
   scope the whole page, and the way into the filter panel. Everything that
   works on figures lives in the panel below, closed until asked for, so the
   sticky bar can never grow tall enough to eat the grid. */
.sc-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sc-font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--sc-ink);
  background: var(--sc-surface);
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-sm);
  padding: 8px 14px;
  min-height: 40px;
  cursor: pointer;
}

.sc-filters-btn::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.sc-filters-btn[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(-2px);
}

/* A shut panel must not hide the fact that it is doing something. */
.sc-filters-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sc-filters-count:empty {
  display: none;
}

.sc-toolbar-filters {
  flex-basis: 100%;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--sc-border);
  animation: sc-fade 0.25s ease-out;
}

.sc-toolbar-filters[hidden] {
  display: none;
}

/* Simple / Advanced — two ways into one filter, not two filters. */
.sc-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--sc-border);
}

.sc-tab {
  font-family: var(--sc-font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--sc-muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 6px 14px;
  min-height: 38px;
  cursor: pointer;
}

.sc-tab:hover {
  color: var(--sc-ink);
}

.sc-tab[aria-selected="true"] {
  color: var(--sc-ink);
  border-bottom-color: var(--sc-accent);
}

/* One labelled control per step: figure, amount, sort, price. One line on a
   desktop, stacking down as the room runs out. */
.sc-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.sc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 190px;
  min-width: 0;
}

/* The figure is the question the other three answer, so it gets the room. */
.sc-field:first-child {
  flex: 1.4 1 240px;
}

.sc-field-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-muted);
}

.sc-field .sc-select,
.sc-field .sc-numwrap {
  width: 100%;
  min-width: 0;
}

.sc-field .sc-select:disabled,
.sc-field .sc-numinput:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sc-numwrap {
  position: relative;
  display: flex;
  align-items: center;
}

.sc-numinput {
  width: 100%;
  min-width: 0;
  padding-right: 38px;
  font-variant-numeric: tabular-nums;
}

.sc-numunit {
  position: absolute;
  right: 11px;
  font-size: 0.82rem;
  color: var(--sc-muted);
  pointer-events: none;
}

.sc-fnote {
  margin-top: 12px;
  max-width: 78ch;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--sc-muted);
}

.sc-count {
  font-size: 0.85rem;
  color: var(--sc-muted);
  margin: 16px 0;
  font-variant-numeric: tabular-nums;
}

/* "Show more" under the grid. The unnarrowed hub is 187 tiles, which is 48
   desktop screens of scrolling, so the grid draws a helping at a time. */
.sc-more-row {
  display: flex;
  justify-content: center;
  margin: 28px 0 8px;
}

/* Sort controls above a compare table. The table sorts from its own column
   headings, which is unreachable on a phone once the rows are in view. */
.sc-csort-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 16px;
}

.sc-csort-row .sc-field {
  min-width: 12rem;
}

.sc-empty {
  border: 1px dashed var(--sc-border-strong);
  border-radius: var(--sc-radius);
  color: var(--sc-muted);
  padding: 40px 24px;
  margin: 0;
  text-align: center;
  animation: sc-fade 0.35s ease-out; /* re-runs each time [hidden] flips off */
}

.sc-empty p {
  margin: 0 0 16px;
}

.sc-empty[hidden] {
  display: none;
}

.sc-verify-note {
  font-size: 0.85rem;
  color: var(--sc-muted);
  margin: 32px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--sc-border);
  max-width: 72ch;
}

.sc-hub-results {
  padding-bottom: 48px;
}

@media (min-width: 768px) {
  .sc-hub-results {
    padding-bottom: 72px;
  }
}

/* --------------------------------------------------------------------------
   13. Product grid (data-forward cards) + detail dialog
   -------------------------------------------------------------------------- */

.sc-products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 560px) {
  .sc-products {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (min-width: 900px) {
  .sc-products {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tiles are a column so the label panel can be pushed to the bottom of the
   card: names and tag rows vary in height, and a grid of facts panels only
   reads as a database if the panels line up across the row. */
.sc-tile {
  display: flex;
  flex-direction: column;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.sc-tile:hover,
.sc-tile:focus-within {
  border-color: var(--sc-border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* The whole tile is the link to the label breakdown — that is the site's
   job, so it gets the whole surface rather than a button competing with 77
   others. The row below holds only what is not "read this label". */
.sc-tile-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 16px 16px;
  text-decoration: none;
  color: inherit;
}

.sc-tile-link .sc-tile-facts {
  margin-top: auto;
}

/* Shop-style art area: the stylized generic tub (never real packaging). */
.sc-tile-art {
  display: flex;
  flex: none;
  min-height: 0; /* else a flex item's auto min-size lets a tall photo beat the ratio */
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  margin: 0 -16px 14px;
  /* Photos are pre-fitted to this exact ratio and cover it, so the stage below
     only ever shows through for the products that have no photograph and fall
     back to the monogram tub. The glow is for them: it puts light behind the
     artwork so it does not vanish into a near-black card. */
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 62% 58% at 50% 46%,
      rgba(255, 255, 255, 0.15),
      rgba(255, 255, 255, 0.07) 42%,
      rgba(255, 255, 255, 0.02) 68%,
      transparent 82%
    ),
    var(--sc-bg);
  border-bottom: 1px solid var(--sc-border);
}

/* The photo is the card's whole art area, edge to edge. It already carries
   the brand's own backdrop and was fitted to 4:3 with the product at a common
   scale, so cover crops nothing in practice and every tile in a row lines up. */
.sc-tile-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* max-height, not height: a percentage height against a flex-sized parent is
   dropped, and the art area then grows to the artwork's intrinsic size —
   which is what pulled tiles in the same row out of alignment. */
.sc-tile-art svg {
  max-height: 82%;
  height: auto;
  width: auto;
  max-width: 70%;
  object-fit: contain;
  transition: transform 0.25s ease;
}

/* A photo that fills its frame cannot lift without opening a gap under it, so
   it grows in place instead; the floating monogram still lifts. */
.sc-tile:hover .sc-tile-art img {
  transform: scale(1.04);
}

.sc-tile:hover .sc-tile-art svg {
  transform: translateY(-4px);
}

.sc-tile-top {
  display: block;
  margin-bottom: 10px;
}

.sc-tile-id {
  display: block;
  min-width: 0;
}

.sc-tile-brand {
  display: block;
  font-size: 0.75rem;
  color: var(--sc-muted);
}

.sc-tile-name {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}

.sc-tile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* Mini facts panel — a small paper label on the dark card, like the white
   facts panel on a dark tub. Squared off on purpose: a printed panel has
   corners, and rounding them is the one detail that breaks the illusion.
   Same rule grammar as the hero panel — thick top rule, a title, hairline
   rows, a heavier rule closing the figures off from the footer. */
.sc-tile-facts {
  display: block;
  background: var(--sc-paper);
  color: var(--sc-paper-ink);
  border-radius: 0;
  padding: 8px 12px 10px;
  border-top: 6px solid var(--sc-paper-ink);
}

.sc-tile-facts-title {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-paper-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sc-paper-ink);
}

.sc-tile-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--sc-paper-line);
  font-size: 0.85rem;
}

.sc-tile-fact-label {
  color: var(--sc-paper-muted);
}

/* Figures are short and never wrap on their own; text values like a protein
   source ("whey concentrate, isolate, and peptide blend") have to, or they
   run out past the panel edge. */
.sc-tile-fact-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sc-tile-fact-value .sc-dim {
  color: var(--sc-paper-muted);
  font-weight: 400;
}

.sc-tile-fact-value small {
  font-weight: 400;
  color: var(--sc-paper-muted);
}

/* Servings and price tier close the panel, below its heavier bottom rule —
   the same place a printed panel puts its container count. */
.sc-tile-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 3px solid var(--sc-paper-ink);
  font-size: 0.78rem;
  color: var(--sc-paper-muted);
  font-variant-numeric: tabular-nums;
}

.sc-tile-more {
  color: var(--sc-accent);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Card action row. The price link is the affiliate click — the one place the
   site earns — so it is the filled control and takes the width. The shortlist
   toggle sits beside it as a quiet icon square. */
.sc-tile-ctas {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--sc-border);
}

.sc-tile-price {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: var(--sc-radius-sm);
  transition: background-color 0.15s ease, transform 0.12s ease;
}

.sc-tile-price:hover,
.sc-tile-price:focus-visible {
  background: var(--sc-accent-down);
  transform: translateY(-1px);
}

.sc-tile-price .sc-ext {
  font-size: 0.9em;
  opacity: 0.8;
}

/* Icon-only at tile scale: the label is carried by the aria-label and the
   tooltip, so the button does not compete with the price control. */
.sc-tile-ctas .sc-save-btn {
  width: auto;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-style: solid;
  border-color: var(--sc-border-strong);
  border-radius: var(--sc-radius-sm);
}

.sc-tile-ctas .sc-save-btn .sc-save-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Product page: identity, stats, buy box --- */

.sc-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.sc-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
  margin: 0 0 20px;
  padding: 12px 0;
  border-top: 1px solid var(--sc-border);
  border-bottom: 1px solid var(--sc-border);
  font-variant-numeric: tabular-nums;
}

.sc-detail-stats dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-muted);
  margin: 0 0 2px;
}

.sc-detail-stats dd {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  white-space: nowrap;
}

.sc-detail-stats dd small {
  font-weight: 400;
  color: var(--sc-muted);
}

/* Sticky inside the scrolling dialog so the price link and its disclosure
   stay visible while the label breakdown scrolls. */
.sc-detail-verified {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-info);
}

.sc-detail-note {
  flex-basis: 100%;
  font-size: 0.78rem;
  color: var(--sc-muted);
  margin: 0;
}

/* Formula snapshot — a real paper facts panel inside the dialog. */
.sc-facts {
  background: var(--sc-paper);
  color: var(--sc-paper-ink);
  border-radius: var(--sc-radius-sm);
  padding: 14px 16px 4px;
}

.sc-facts-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sc-paper-ink);
  margin: 0 0 2px;
}

.sc-facts-sub {
  font-size: 0.82rem;
  color: var(--sc-paper-muted);
  margin: 0 0 10px;
}

.sc-facts .sc-table {
  border-top: 6px solid var(--sc-paper-ink);
}

.sc-facts .sc-table th,
.sc-facts .sc-table td {
  white-space: normal;
  font-size: 0.92rem;
  border-bottom-color: var(--sc-paper-line);
}

/* Row headers are the ingredient names: they read as label text, not as the
   uppercase column heads the base table style gives <th>. */
.sc-facts .sc-table tbody th[scope="row"] {
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sc-paper-ink);
  background: none;
  box-shadow: none;
  position: static;
  padding-top: 10px;
  padding-bottom: 10px;
}

.sc-facts .sc-table tbody tr:last-child td {
  border-bottom: 0;
}

.sc-facts .sc-table tbody tr:hover td {
  background: transparent;
}

.sc-details-heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-ink);
  margin: 0 0 8px;
}

.sc-notes-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.sc-notes-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  font-size: 0.92rem;
  color: var(--sc-muted);
}

.sc-notes-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 2px;
  background: var(--sc-border-strong);
}

.sc-notes-list li strong {
  color: var(--sc-ink);
}

/* Cautions — amber rule + label + plain text (never color alone). */
.sc-cautions {
  border-left: 3px solid var(--sc-amber);
  padding-left: 14px;
  margin: 0 0 20px;
}

.sc-cautions .sc-details-heading {
  color: var(--sc-amber);
}

.sc-cautions ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-cautions li {
  font-size: 0.92rem;
  margin-bottom: 6px;
}

.sc-facts + .sc-cautions,
.sc-facts-source + .sc-cautions {
  margin-top: 28px;
}

/* On the cream panel the dark-shell amber drops to about 2:1. The paper
   amber is the readable twin of the same colour role. */
.sc-facts .sc-cautions {
  border-left-color: var(--sc-paper-amber);
}

.sc-facts .sc-cautions .sc-details-heading,
.sc-facts .sc-cautions-more a {
  color: var(--sc-paper-amber);
}

.sc-facts .sc-cautions li {
  color: var(--sc-paper-ink);
}

.sc-cautions-more {
  margin: 12px 0 0;
  font-size: 0.85rem;
}

.sc-cautions-more a {
  color: var(--sc-amber);
  font-weight: 600;
}

.sc-details-flavors {
  font-size: 0.88rem;
  color: var(--sc-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   13a. Product pages (products/<id>.html) — shop-style layout, honest CTAs.
   -------------------------------------------------------------------------- */

.sc-crumbs {
  font-size: 0.85rem;
  color: var(--sc-muted);
  margin: 24px 0 20px;
}

.sc-crumbs a {
  color: var(--sc-muted);
  text-decoration: none;
}

.sc-crumbs a:hover {
  color: var(--sc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sc-crumbs span {
  margin: 0 6px;
}

.sc-pdp {
  border-bottom: 1px solid var(--sc-border);
  padding-bottom: 40px;
}

.sc-pdp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 880px) {
  .sc-pdp-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 56px;
  }
}

.sc-pdp-media {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Same lit stage as the tile art, a touch wider for the larger frame. */
  background:
    radial-gradient(
      ellipse 66% 62% at 50% 46%,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.07) 44%,
      rgba(255, 255, 255, 0.02) 70%,
      transparent 84%
    ),
    var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 32px;
}

.sc-pdp-media svg {
  width: min(320px, 70%);
  height: auto;
  display: block;
}

.sc-pdp-caption {
  font-size: 0.78rem;
  color: var(--sc-muted);
  margin: 10px 0 0;
}

/* Trust furniture: analysis label, label-source line, external-link marker,
   how-we-evaluate link near the hub filters. */
.sc-analysis-tag {
  font-family: var(--sc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-muted);
  margin: 14px 0 4px;
}

.sc-facts-source {
  font-size: 0.78rem;
  color: var(--sc-paper-info);
  margin: 10px 0 0;
}

.sc-facts-source a {
  color: inherit;
  text-decoration: underline;
}

.sc-ext {
  font-size: 0.85em;
  opacity: 0.8;
}

.sc-eval-link {
  font-size: 0.82rem;
  color: var(--sc-info);
  margin: 10px 0 0;
}

/* The toolbar is sticky, so every line inside it costs screen for the whole
   session. On a phone the method note keeps its link and drops its sentence. */
.sc-eval-extra {
  display: none;
}

@media (min-width: 768px) {
  .sc-eval-extra {
    display: inline;
  }
}

.sc-eval-link a {
  color: inherit;
}

/* Shortlist — "save to compare" (never cart language). */
.sc-nav .sc-saved-count {
  font-size: 0.85em;
  opacity: 0.75;
}

.sc-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 14px;
  font: 600 0.8rem/1 var(--sc-font-body);
  color: var(--sc-muted);
  background: none;
  border: 1px dashed var(--sc-border-strong);
  border-radius: var(--sc-radius-sm);
  cursor: pointer;
}

.sc-save-btn:hover {
  color: var(--sc-ink);
  border-color: var(--sc-info);
}

.sc-save-btn[aria-pressed="true"] {
  color: var(--sc-accent);
  border-color: var(--sc-accent);
  border-style: solid;
}

.sc-save-btn-pdp[aria-pressed="true"] {
  color: var(--sc-accent);
  border-color: var(--sc-accent);
}

.sc-save-icon::before {
  content: "\2606"; /* ☆ */
}

[aria-pressed="true"] .sc-save-icon::before {
  content: "\2605"; /* ★ */
}

/* Saved-for-comparison page */
.sc-saved-table th[scope="row"] {
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
}

.sc-saved-col {
  min-width: 220px;
  vertical-align: top;
}

.sc-saved-scroll td {
  vertical-align: top;
}

.sc-saved-art {
  display: block;
}

.sc-saved-art img,
.sc-saved-art svg {
  height: 120px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
}

.sc-saved-name {
  display: block;
  font-weight: 700;
  margin: 2px 0 8px;
  color: inherit;
}

.sc-saved-remove {
  padding: 0;
  font-size: 0.78rem;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  text-decoration: underline;
  cursor: pointer;
}

.sc-saved-remove:hover {
  opacity: 1;
}

.sc-saved-links .sc-btn {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

/* Retailer photo gallery (replaces the stylized tub when images exist).
   Paper backdrop so white listing photos blend instead of glaring on the
   dark shell; the first slide is our transparent local render. */
/* White, not paper: every lead photograph is a 4:3 shot on a white ground, and
   `contain` letterboxes it into this square frame. Against the paper tone the
   bars drew a visible white box inside a warm border; on white the photo and
   its frame are one surface. The monogram-tub fallback lives on .sc-pdp-media
   and keeps the paper stage. */
.sc-pdp-media-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  background: #FFFFFF;
}

.sc-pdp-media-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}

.sc-zoom-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font: 600 0.72rem/1 var(--sc-font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sc-paper-ink);
  background: rgba(242, 237, 227, 0.9);
  border: 1px solid rgba(23, 20, 15, 0.25);
  border-radius: var(--sc-radius-sm);
  cursor: zoom-in;
}

.sc-zoom-btn:hover {
  background: #FFFFFF;
}

.sc-lightbox[hidden] {
  display: none;
}

.sc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 12, 14, 0.92);
  cursor: zoom-out;
}

.sc-lightbox img {
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  background: #E7E2D8;
  border-radius: var(--sc-radius);
  cursor: default;
}

.sc-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--sc-ink);
  background: var(--sc-surface);
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-sm);
  cursor: pointer;
}

.sc-lightbox-close:hover {
  border-color: var(--sc-accent);
  color: var(--sc-accent);
}

.sc-safety-cue {
  margin: 8px 0 0;
  font-size: 0.8rem;
}

.sc-safety-cue a {
  color: var(--sc-amber);
  text-decoration: underline;
}

.sc-detail-verified a {
  color: inherit;
  text-decoration: underline;
}

.sc-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.sc-gallery-thumb {
  width: 64px;
  height: 64px;
  padding: 4px;
  background: #E7E2D8;
  border: 1px solid var(--sc-border);
  cursor: pointer;
}

.sc-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sc-gallery-thumb[aria-current="true"] {
  border-color: var(--sc-p-accent, var(--sc-border-strong));
}

.sc-pdp-title {
  margin-bottom: 12px;
}

.sc-pdp-lead {
  margin-bottom: 20px;
}

.sc-buybox {
  background: var(--sc-surface);
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius);
  padding: 18px 20px;
  margin: 20px 0 16px;
  box-shadow: var(--sc-shadow);
}

.sc-buybox-tier {
  font-size: 0.95rem;
  margin: 0 0 4px;
}

.sc-buybox-tier span {
  color: var(--sc-muted);
  font-size: 0.82rem;
}

.sc-buybox-why {
  font-size: 0.85rem;
  color: var(--sc-muted);
  margin: 0 0 14px;
}

.sc-buybox .sc-btn {
  width: 100%;
  margin-bottom: 8px;
}

.sc-btn-lg {
  font-size: 1.05rem;
  padding: 14px 24px;
}

.sc-buybox .sc-detail-note {
  margin-top: 4px;
}

.sc-pdp-flavors {
  font-size: 0.88rem;
  color: var(--sc-muted);
  margin: 0 0 8px;
}

.sc-pdp-h2 {
  margin-bottom: 20px;
}

.sc-pdp-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 880px) {
  .sc-pdp-cols {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 56px;
  }
}

.sc-pdp-reviews-note {
  max-width: 72ch;
  color: var(--sc-muted);
}

.sc-related {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .sc-related {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* Product-page tail: the questions column is measured at ~70ch, so on a wide
   screen it left 400px of empty page beside it. The comparison picks fill
   that column instead of getting a band of their own. */
.sc-pdp-tail {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
  .sc-pdp-tail {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 56px;
  }

  .sc-pdp-tail .sc-related {
    grid-template-columns: 1fr;
  }
}

.sc-related-more {
  margin: 16px 0 0;
  font-size: 0.88rem;
}

.sc-related-more a {
  color: var(--sc-accent);
  font-weight: 600;
}

/* The left rule used to carry each brand's colour — 35 saturated hexes on an
   otherwise monochrome page, encoding nothing a reader could decode. It is a
   neutral rule now; colour on this site means caution, stim-free, or accent. */
.sc-related-card {
  display: block;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-left: 3px solid var(--sc-border-strong);
  border-radius: var(--sc-radius);
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.sc-related-card:hover {
  border-color: var(--sc-border-strong);
  border-left-color: var(--sc-accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.sc-related-meta {
  display: block;
  font-size: 0.82rem;
  color: var(--sc-muted);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   13b. FAQ (homepage) — native details/summary, facts-panel rules.
   -------------------------------------------------------------------------- */

.sc-faq {
  max-width: 820px;
  border-top: 3px solid var(--sc-ink);
}

.sc-faq details {
  border-bottom: 1px solid var(--sc-border);
}

.sc-faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 14px 36px 14px 0;
  position: relative;
  list-style: none;
}

.sc-faq summary::-webkit-details-marker {
  display: none;
}

.sc-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sc-muted);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.25s ease, color 0.15s ease;
}

/* The + rotates into an × when open — same glyph, no content swap. */
.sc-faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.sc-faq summary {
  transition: color 0.15s ease;
}

.sc-faq summary:hover {
  color: var(--sc-accent);
}

.sc-faq summary:hover::after {
  color: var(--sc-accent);
}

.sc-faq details p {
  color: var(--sc-muted);
  font-size: 0.95rem;
  max-width: 70ch;
  margin: 0 0 16px;
}

/* --------------------------------------------------------------------------
   13b. Studied-dose comparison (product pages)

   The one section on a product page that states the site's actual thesis:
   here is the dose, here is what the research used. Built as a measuring
   scale, not a score — no grades, no colour-coded verdicts beyond "at or
   under", and a note under every row explaining the range.
   -------------------------------------------------------------------------- */

.sc-dose-intro {
  color: var(--sc-muted);
  max-width: 72ch;
  margin: 0 0 28px;
}

.sc-dose-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .sc-dose-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 48px;
  }
}

.sc-dose-row {
  border-top: 3px solid var(--sc-ink);
  padding-top: 12px;
}

.sc-dose-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 6px;
}

.sc-dose-name {
  font-family: var(--sc-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.sc-dose-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* "undisclosed" where a figure would sit. It is not a number, so it does not
   take the numeral's weight — the row carries no bar either, and the pair
   reads as an absence rather than a result. `.sc-dim` alone is scoped to
   tables and tiles, so this row needs its own rule. */
.sc-dose-amount.sc-dim {
  font-weight: 500;
  font-style: italic;
  color: var(--sc-muted);
}

.sc-dose-verdict {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sc-dose-at {
  color: var(--sc-calm);
}

.sc-dose-under {
  color: var(--sc-amber);
}

.sc-dose-bar {
  position: relative;
  height: 10px;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border-strong);
}

/* The studied band is the reference, so it reads as printed rule, not fill. */
.sc-dose-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(233, 235, 238, 0.30) 0 2px,
    rgba(233, 235, 238, 0.10) 2px 5px
  );
  border-left: 1px solid var(--sc-ink);
  border-right: 1px solid var(--sc-ink);
}

.sc-dose-mark {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 3px;
  background: var(--sc-accent-down);
}

.sc-dose-scale {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.74rem;
  color: var(--sc-muted);
  font-variant-numeric: tabular-nums;
  margin: 8px 0 0;
}

.sc-dose-scale span:nth-child(2) {
  text-align: center;
  letter-spacing: 0.03em;
}

.sc-dose-note {
  font-size: 0.88rem;
  color: var(--sc-muted);
  max-width: 60ch;
  margin: 10px 0 0;
}

/* The paper the range came from, quoted and openable. Smaller and quieter than
   the note above it: it is provenance, not the point. */
.sc-dose-cite {
  font-size: 0.8rem;
  color: var(--sc-muted);
  max-width: 60ch;
  margin: 6px 0 0;
}

.sc-dose-cite a {
  color: inherit;
  text-decoration: underline;
}

.sc-dose-cite a:hover,
.sc-dose-cite a:focus-visible {
  color: var(--sc-accent);
}

.sc-dose-blendnote {
  margin: 28px 0 0;
  padding: 12px 16px;
  background: var(--sc-amber-dim);
  border-left: 3px solid var(--sc-amber-line);
  font-size: 0.9rem;
  color: var(--sc-ink);
}

/* --------------------------------------------------------------------------
   13c. What other people say (product pages)

   Two signals that must never blur together: the seller's own moderated
   rating, and independent discussion. The seller half sits on paper — the
   same material this site uses for "figures somebody else published" — and
   the community half sits on the dark shell as editorial. Neither is styled
   to look like a Scoop Sense verdict, because it isn't one.
   -------------------------------------------------------------------------- */

.sc-reviews-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .sc-reviews-grid {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 48px;
  }
}

.sc-reviews-seller {
  background: var(--sc-paper);
  color: var(--sc-paper-ink);
  border-top: 6px solid var(--sc-paper-ink);
  padding: 14px 16px 12px;
}

.sc-reviews-seller .sc-facts-title {
  border-bottom: 1px solid var(--sc-paper-ink);
  padding-bottom: 6px;
}

.sc-seller-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 2px;
}

.sc-seller-stars {
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--sc-paper-amber);
}

.sc-seller-num {
  font-family: var(--sc-font-display);
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sc-seller-outof {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sc-paper-muted);
}

.sc-seller-count {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--sc-paper-muted);
  margin: 0 0 10px;
}

.sc-seller-note {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--sc-paper-muted);
  margin: 0;
  padding-top: 10px;
  border-top: 3px solid var(--sc-paper-ink);
}

.sc-reviews-empty .sc-seller-note {
  border-top: 0;
  padding-top: 12px;
}

.sc-community-take {
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 68ch;
  margin: 0 0 20px;
}

.sc-community-points {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.sc-community-points li {
  border-left: 2px solid var(--sc-border-strong);
  padding-left: 14px;
  font-size: 0.95rem;
  color: var(--sc-muted);
  max-width: 68ch;
}

.sc-community-points strong {
  color: var(--sc-ink);
}

/* Tone is a word, never colour alone — the same rule the stim tags follow. */
.sc-tone {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 1px 7px;
  margin-right: 8px;
  border: 1px solid;
  border-radius: 2px;
  vertical-align: 1px;
}

.sc-tone-positive {
  color: var(--sc-calm);
  border-color: var(--sc-calm-line);
  background: var(--sc-calm-dim);
}

.sc-tone-mixed {
  color: var(--sc-muted);
  border-color: var(--sc-border-strong);
}

.sc-tone-negative {
  color: var(--sc-amber);
  border-color: var(--sc-amber-line);
  background: var(--sc-amber-dim);
}

.sc-community-srclabel {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sc-muted);
  margin: 0 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--sc-border);
}

.sc-community-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.sc-community-sources blockquote {
  margin: 0 0 4px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--sc-ink);
  max-width: 66ch;
}

.sc-community-sources a {
  font-size: 0.85rem;
  color: var(--sc-info);
}

/* --------------------------------------------------------------------------
   14. Tags
   -------------------------------------------------------------------------- */

.sc-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
  padding: 1px 8px;
  border: 1px solid var(--sc-border-strong);
  border-radius: 3px;
  color: var(--sc-muted);
  background: transparent;
}

.sc-tag-caution {
  color: var(--sc-amber);
  border-color: var(--sc-amber-line);
  background: var(--sc-amber-dim);
}

.sc-tag-calm {
  color: var(--sc-calm);
  border-color: var(--sc-calm-line);
  background: var(--sc-calm-dim);
}

/* --------------------------------------------------------------------------
   15. Text pages (about, health & safety)
   -------------------------------------------------------------------------- */

.sc-page {
  max-width: 720px;
  padding: 40px 0 56px;
}

@media (min-width: 768px) {
  .sc-page {
    padding: 56px 0 72px;
  }
}

.sc-page h2 {
  font-family: var(--sc-font-body);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 36px 0 8px;
}

.sc-page p,
.sc-page li {
  color: var(--sc-muted);
}

.sc-page p strong,
.sc-page li strong {
  color: var(--sc-ink);
}

.sc-updated {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-muted);
  margin-bottom: 32px;
}

.sc-fda-box {
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-left: 3px solid var(--sc-amber);
  border-radius: var(--sc-radius);
  color: var(--sc-ink);
  padding: 16px 20px;
  margin: 0 0 24px;
  font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   15b. CTA band — one loud closing moment before the footer.
   -------------------------------------------------------------------------- */

.sc-cta-band {
  background: var(--sc-bg-deep);
  border-top: 1px solid var(--sc-border);
  padding: 64px 0;
  text-align: center;
}

@media (min-width: 768px) {
  .sc-cta-band {
    padding: 88px 0;
  }
}

.sc-cta-band h2 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  margin-bottom: 8px;
}

.sc-cta-band h2 span {
  color: var(--sc-accent);
}

.sc-cta-band p {
  color: var(--sc-muted);
  max-width: 52ch;
  margin: 0 auto 24px;
}

/* --------------------------------------------------------------------------
   15c. Motion — one subtle system: rise-in on load (hero), rise-in on
   scroll (JS adds .sc-reveal, then .sc-in when visible), small hovers.
   The global prefers-reduced-motion rule zeroes all of it.
   -------------------------------------------------------------------------- */

@keyframes sc-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sc-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Header settles down from above on load. */
@keyframes sc-drop {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Bars and rules draw in from the left (scale bars, panel rules). */
@keyframes sc-grow {
  from {
    transform: scaleX(0);
  }
}

/* Ambient volt glow behind the hero — slow breathing, never a flash. */
@keyframes sc-glow {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}

/* Hero page-load sequence (CSS-only, works without JS). */
.sc-hero .sc-eyebrow { animation: sc-rise 0.5s ease-out backwards; }
.sc-hero h1 { animation: sc-rise 0.5s ease-out 0.08s backwards; }
.sc-hero .sc-lead { animation: sc-rise 0.5s ease-out 0.16s backwards; }
.sc-hero-actions { animation: sc-rise 0.5s ease-out 0.24s backwards; }
.sc-hero .sc-cred { animation: sc-rise 0.5s ease-out 0.32s backwards; }
.sc-heropanel { animation: sc-rise 0.55s ease-out 0.28s backwards; }

/* Inside the hero facts panel: the thick rule draws, then rows tick in
   one by one — a label printing itself. */
.sc-heropanel-bar {
  transform-origin: left;
  animation: sc-grow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s backwards;
}

.sc-heropanel dl > div { animation: sc-fade 0.4s ease-out backwards; }
.sc-heropanel dl > div:nth-child(1) { animation-delay: 0.6s; }
.sc-heropanel dl > div:nth-child(2) { animation-delay: 0.66s; }
.sc-heropanel dl > div:nth-child(3) { animation-delay: 0.72s; }
.sc-heropanel dl > div:nth-child(4) { animation-delay: 0.78s; }
.sc-heropanel dl > div:nth-child(5) { animation-delay: 0.84s; }
.sc-heropanel dl > div:nth-child(6) { animation-delay: 0.9s; }
.sc-heropanel-note { animation: sc-fade 0.4s ease-out 0.98s backwards; }

/* Hub + compare intro load sequence (CSS-only, static markup). */
.sc-hub-intro .sc-eyebrow { animation: sc-rise 0.5s ease-out backwards; }
.sc-hub-intro h1 { animation: sc-rise 0.5s ease-out 0.08s backwards; }
.sc-hub-intro .sc-lead { animation: sc-rise 0.5s ease-out 0.16s backwards; }
.sc-hub-intro .sc-disclosure-line { animation: sc-fade 0.45s ease-out 0.24s backwards; }
.sc-toolbar { animation: sc-fade 0.45s ease-out 0.3s backwards; }

/* Product-page top block load sequence (above the fold, CSS-only). */
.sc-crumbs { animation: sc-fade 0.4s ease-out backwards; }
.sc-pdp-media-col { animation: sc-rise 0.55s ease-out 0.05s backwards; }
.sc-pdp .sc-eyebrow { animation: sc-rise 0.5s ease-out 0.08s backwards; }
.sc-pdp-title { animation: sc-rise 0.5s ease-out 0.12s backwards; }
.sc-pdp .sc-detail-tags { animation: sc-rise 0.5s ease-out 0.16s backwards; }
.sc-pdp-lead { animation: sc-rise 0.5s ease-out 0.2s backwards; }
.sc-pdp .sc-detail-stats { animation: sc-rise 0.5s ease-out 0.26s backwards; }
.sc-buybox { animation: sc-rise 0.55s ease-out 0.32s backwards; }
.sc-pdp-flavors,
.sc-pdp .sc-detail-verified { animation: sc-fade 0.45s ease-out 0.42s backwards; }

/* Text pages (about, health & safety) rise in as one block. */
.sc-page { animation: sc-rise 0.5s ease-out backwards; }

/* Scroll reveal. JS applies .sc-reveal only when IntersectionObserver is
   available, so no-JS and old browsers see everything immediately. */
.sc-reveal {
  opacity: 0;
}

.sc-reveal.sc-in {
  opacity: 1;
  animation: sc-rise 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

/* Gentle stagger across grid columns. */
.sc-products .sc-tile.sc-in:nth-child(3n + 2) { animation-delay: 0.07s; }
.sc-products .sc-tile.sc-in:nth-child(3n) { animation-delay: 0.14s; }
.sc-related .sc-related-card.sc-in:nth-child(2) { animation-delay: 0.07s; }
.sc-related .sc-related-card.sc-in:nth-child(3) { animation-delay: 0.14s; }
.sc-method-steps li.sc-in:nth-child(2) { animation-delay: 0.06s; }
.sc-method-steps li.sc-in:nth-child(3) { animation-delay: 0.12s; }
.sc-method-steps li.sc-in:nth-child(4) { animation-delay: 0.18s; }

/* Footer columns rise with a small stagger once the grid reveals. */
.sc-footer-grid.sc-in > * { animation: sc-rise 0.55s ease-out backwards; }
.sc-footer-grid.sc-in > *:nth-child(2) { animation-delay: 0.07s; }
.sc-footer-grid.sc-in > *:nth-child(3) { animation-delay: 0.14s; }
.sc-footer-grid.sc-in > *:nth-child(4) { animation-delay: 0.21s; }

/* Table rows tick in when their container reveals — and again whenever
   a sort or filter re-render inserts fresh rows. */
.sc-table-scroll.sc-in tbody tr { animation: sc-fade 0.35s ease-out backwards; }
.sc-table-scroll.sc-in tbody tr:nth-child(2) { animation-delay: 0.03s; }
.sc-table-scroll.sc-in tbody tr:nth-child(3) { animation-delay: 0.06s; }
.sc-table-scroll.sc-in tbody tr:nth-child(4) { animation-delay: 0.09s; }
.sc-table-scroll.sc-in tbody tr:nth-child(5) { animation-delay: 0.12s; }
.sc-table-scroll.sc-in tbody tr:nth-child(6) { animation-delay: 0.15s; }
.sc-table-scroll.sc-in tbody tr:nth-child(7) { animation-delay: 0.18s; }
.sc-table-scroll.sc-in tbody tr:nth-child(8) { animation-delay: 0.21s; }
.sc-table-scroll.sc-in tbody tr:nth-child(n + 9) { animation-delay: 0.24s; }

/* Dose scale draws itself once the annotated card is in view. */
.sc-annotated.sc-in .sc-scale-fill {
  transform-origin: left;
  animation: sc-grow 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s backwards;
}

.sc-annotated.sc-in .sc-scale-marker {
  animation: sc-fade 0.35s ease-out 0.95s backwards;
}

/* Accordion content eases in when opened. */
.sc-faq details[open] > *:not(summary) {
  animation: sc-fade 0.35s ease-out;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.sc-footer {
  background: var(--sc-bg-deep);
  border-top: 1px solid var(--sc-border);
  padding: 48px 0 24px;
  font-size: 0.9rem;
  color: var(--sc-muted);
}

.sc-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .sc-footer-grid {
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: 40px;
  }
}

.sc-footer-logo {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--sc-ink);
  margin: 0 0 8px;
}

.sc-footer-head {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-muted);
  margin: 0 0 12px;
}

.sc-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-footer li {
  margin-bottom: 8px;
}

.sc-footer a {
  color: var(--sc-muted);
  text-decoration: none;
}

.sc-footer a:hover {
  color: var(--sc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sc-footer-legal p {
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.sc-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 1px solid var(--sc-border);
  padding-top: 16px;
  font-size: 0.82rem;
}

.sc-footer-bottom p {
  margin: 0;
}