/* ==========================================================================
   PEPTiQX Biotech — Liquid Glass design system
   Palette derived from the brand mark: slate #3D4C63, steel #5B8AC4.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */

:root {
  /* brand */
  --slate-900: #1c2433;
  --slate-800: #26303f;
  --slate-700: #313c4f;
  --slate-600: #3d4c63;   /* logo mark */
  --slate-500: #52627d;
  --slate-400: #74849c;
  --slate-300: #9aa7ba;
  --slate-200: #c3ccd8;
  --slate-100: #e2e7ee;
  --slate-050: #f2f4f8;

  --steel-800: #35598a;
  --steel-700: #3f6ba3;
  --steel-600: #4d7cb8;
  --steel-500: #5b8ac4;   /* logo reversed */
  --steel-400: #7ba4d4;
  --steel-300: #a3c1e3;
  --steel-100: #dceaf7;

  --mint-500: #3fae90;
  --amber-500: #d59a3c;
  --rose-500:  #c85a5a;

  /* semantic — light */
  color-scheme: light;

  --bg:            #f6f7f9;
  --bg-elev:       #ffffff;
  --ink:           #1c2433;
  --ink-soft:      #52627d;
  --ink-faint:     #8494a8;
  --accent:        var(--steel-600);
  --accent-ink:    #ffffff;
  --hairline:      rgba(28, 36, 51, 0.10);
  --hairline-soft: rgba(28, 36, 51, 0.06);

  /* Opaque counterpart to --glass-bg-strong, for panels nested inside another
     glass surface where backdrop-filter cannot reach the page behind. */
  --drawer-bg:     #ffffff;

  /* glass */
  --glass-bg:      rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.80);
  --glass-brd:     rgba(255, 255, 255, 0.75);
  --glass-blur:    saturate(180%) blur(28px);
  --glass-sheen:   linear-gradient(
                     160deg,
                     rgba(255, 255, 255, 0.65) 0%,
                     rgba(255, 255, 255, 0.12) 42%,
                     rgba(255, 255, 255, 0) 70%);

  --shadow-sm: 0 1px 2px rgba(20, 28, 42, 0.06),
               0 2px 6px rgba(20, 28, 42, 0.04);
  --shadow-md: 0 1px 2px rgba(20, 28, 42, 0.06),
               0 8px 24px rgba(20, 28, 42, 0.08);
  --shadow-lg: 0 2px 4px rgba(20, 28, 42, 0.05),
               0 18px 48px rgba(20, 28, 42, 0.14);
  --shadow-ring: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* geometry */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --maxw: 1200px;
  --gut: clamp(1.1rem, 4vw, 2.5rem);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Helvetica Neue", Segoe UI, Roboto, sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
}

/* Dark theme keys off [data-theme], never prefers-color-scheme: the head script
   resolves the OS setting into that attribute so one switch serves both the
   system default and the header toggle. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0e131c;
  --bg-elev:       #161d29;
  --ink:           #eef2f7;
  --ink-soft:      #a8b6c9;
  --ink-faint:     #6f8098;
  --accent:        var(--steel-400);
  --accent-ink:    #0e131c;
  --hairline:      rgba(255, 255, 255, 0.12);
  --hairline-soft: rgba(255, 255, 255, 0.07);

  --drawer-bg:       #161d29;

  --glass-bg:        rgba(30, 39, 54, 0.58);
  --glass-bg-strong: rgba(30, 39, 54, 0.82);
  --glass-brd:       rgba(255, 255, 255, 0.12);
  --glass-sheen:     linear-gradient(
                       160deg,
                       rgba(255, 255, 255, 0.12) 0%,
                       rgba(255, 255, 255, 0.03) 42%,
                       rgba(255, 255, 255, 0) 70%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-ring: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* --- base ----------------------------------------------------------------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ambient mesh — the light the glass refracts */
body::before {
  content: "";
  position: fixed;
  inset: -20vh -10vw;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(48vw 42vw at 12% 4%,  rgba(91, 138, 196, 0.22), transparent 62%),
    radial-gradient(42vw 38vw at 88% 12%, rgba(61, 76, 99, 0.18),  transparent 60%),
    radial-gradient(52vw 40vw at 62% 88%, rgba(63, 174, 144, 0.12), transparent 64%);
  filter: blur(10px);
}

:root[data-theme="dark"] body::before {
  background:
    radial-gradient(48vw 42vw at 12% 4%,  rgba(91, 138, 196, 0.20), transparent 62%),
    radial-gradient(42vw 38vw at 88% 12%, rgba(122, 92, 196, 0.14), transparent 60%),
    radial-gradient(52vw 40vw at 62% 88%, rgba(63, 174, 144, 0.10), transparent 64%);
}

/* --- particle field -------------------------------------------------------
   Sits between the ambient mesh (z -2) and page content (z 0), so the glass
   surfaces blur it the same way they blur the mesh. No background of its own:
   the canvas contributes particles and nothing else.
   `fixed` rather than `absolute` so it stays put on long scrolling pages, and
   `pointer-events: none` so it can never intercept a click meant for the UI —
   hover still works because particles.js listens on `window`. */

#particles-js {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: none;
  pointer-events: none;
}

#particles-js canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

@media (prefers-reduced-motion: reduce) {
  #particles-js { display: none; }
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 640;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -0.028em; }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }

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

a { color: var(--accent); text-decoration: none; transition: opacity 0.2s var(--ease); }
a:hover { opacity: 0.75; }

img, svg { max-width: 100%; height: auto; display: block; }

::selection { background: rgba(91, 138, 196, 0.28); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* --- layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.wrap-narrow { max-width: 780px; }

.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section-tight { padding-block: clamp(2rem, 4vw, 3.25rem); }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.stack   { display: flex; flex-direction: column; gap: 1rem; }
.row     { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.row-end { margin-left: auto; }
.center  { text-align: center; }
.center-x{ margin-inline: auto; }

/* --- glass surfaces ------------------------------------------------------- */

.glass {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md), var(--shadow-ring);
  overflow: hidden;
}

/* the specular highlight that sells the material */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--glass-sheen);
  opacity: 0.85;
}

.glass > * { position: relative; z-index: 1; }

.glass-strong { background: var(--glass-bg-strong); }
.glass-flat   { box-shadow: var(--shadow-sm), var(--shadow-ring); }

.pad    { padding: clamp(1.25rem, 3vw, 2rem); }
.pad-lg { padding: clamp(1.75rem, 4vw, 3rem); }
.pad-sm { padding: 1rem 1.15rem; }

.card-hover {
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--shadow-ring);
}

/* --- type helpers --------------------------------------------------------- */

.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
}

.lede {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--ink-soft);
  line-height: 1.62;
}

.muted  { color: var(--ink-soft); }
.faint  { color: var(--ink-faint); }
.tiny   { font-size: 0.8rem; }
.mono   { font-family: var(--mono); font-size: 0.86em; letter-spacing: -0.01em; }
.nowrap { white-space: nowrap; }

.section-head { max-width: 660px; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head.center { margin-inline: auto; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.4rem;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s var(--ease-spring), box-shadow 0.28s var(--ease),
              background 0.28s var(--ease), opacity 0.2s var(--ease);
}

.btn:hover  { transform: translateY(-1.5px); box-shadow: var(--shadow-md); opacity: 1; }
.btn:active { transform: translateY(0) scale(0.985); }

.btn-ghost {
  --btn-bg: var(--glass-bg);
  --btn-fg: var(--ink);
  border-color: var(--glass-brd);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--hairline);
  box-shadow: none;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.btn-dark { --btn-bg: var(--slate-800); --btn-fg: #fff; }

/* Blue theme. Pinned to the steel brand blue rather than --accent so the pair
   stays a matched set — filled and stroked — wherever it is used. The 700 step
   is the lightest one that still clears 4.5:1 against white at btn-sm size. */
.btn-blue {
  --btn-bg: var(--steel-700);
  --btn-fg: #fff;
}
.btn-blue:hover, .btn-blue.is-active { --btn-bg: var(--steel-800); }

.btn-blue-outline {
  --btn-bg: transparent;
  --btn-fg: var(--steel-700);
  border-color: var(--steel-500);
  box-shadow: none;
}
.btn-blue-outline:hover {
  --btn-bg: rgba(91, 138, 196, 0.10);
  border-color: var(--steel-700);
  box-shadow: none;
}

/* On dark the fill flips the way --accent does: light blue plate, dark ink. */
:root[data-theme="dark"] .btn-blue { --btn-bg: var(--steel-400); --btn-fg: #0e131c; }
:root[data-theme="dark"] .btn-blue:hover,
:root[data-theme="dark"] .btn-blue.is-active { --btn-bg: var(--steel-300); }

:root[data-theme="dark"] .btn-blue-outline {
  --btn-fg: var(--steel-300);
  border-color: var(--steel-600);
}
:root[data-theme="dark"] .btn-blue-outline:hover {
  --btn-bg: rgba(123, 164, 212, 0.14);
  border-color: var(--steel-400);
}

.btn-sm  { padding: 0.46rem 0.95rem; font-size: 0.84rem; }
.btn-lg  { padding: 0.9rem 1.9rem;  font-size: 1rem; }
.btn-full{ width: 100%; }

.btn[disabled], .btn.is-disabled {
  opacity: 0.45; pointer-events: none;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 540; font-size: 0.92rem;
}
.link-arrow svg, .link-arrow .chev { transition: transform 0.3s var(--ease); }
.link-arrow:hover .chev { transform: translateX(3px); }

/* --- pills and badges ----------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.72rem;
  font-size: 0.76rem;
  font-weight: 560;
  letter-spacing: 0.01em;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  color: var(--ink-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.pill-accent { color: var(--accent); border-color: rgba(91, 138, 196, 0.35);
               background: rgba(91, 138, 196, 0.12); }
.pill-mint   { color: var(--mint-500); border-color: rgba(63, 174, 144, 0.35);
               background: rgba(63, 174, 144, 0.12); }
.pill-amber  { color: var(--amber-500); border-color: rgba(213, 154, 60, 0.35);
               background: rgba(213, 154, 60, 0.12); }
.pill-rose   { color: var(--rose-500); border-color: rgba(200, 90, 90, 0.35);
               background: rgba(200, 90, 90, 0.12); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--hairline-soft);
}

.announce {
  background: linear-gradient(90deg, var(--slate-700), var(--steel-700));
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 0.5rem 1rem;
}
.announce a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* The header runs wider than the 1200px prose column. The nav is chrome, not
   reading material, and at --maxw the row had only ~1120px of content box no
   matter how wide the viewport got — which is what put the Spanish labels and
   the actions cluster in the same pixels. */
.site-header .wrap { max-width: 1360px; }

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
  transition: opacity 0.25s var(--ease);
}
.brand:hover { opacity: 0.78; }

/* Official lockup.
   Deliberately NO `width` here. The macro emits width/height attributes on the
   <img>; those are presentational hints that any CSS `width` would beat, and
   `width: auto` on a replaced element resolves to the file's intrinsic 900px —
   which blows the logo up to fill whatever space the flex row allows. Leaving
   width unset lets the attribute size it, and `height: auto` keeps the 900:233
   ratio if a container ever has to shrink it. */
.brand-logo {
  display: block;
  max-width: 100%;
  height: auto;
  flex: none;
}

.brand-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

/* Decorative inline mark — still used for hero and split-media figures. */
.brand-mark { width: 34px; height: 34px; flex: none; }

.brand-sub {
  font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 560;
}

/* Narrow phones: step down to ~28px tall so the nav actions keep their room. */
@media (max-width: 420px) {
  .site-header .brand-logo { width: 108px; }
}

/* Deliberately NO `min-width: 0`. As a flex item this cluster would then be free
   to shrink below its own contents, and because every child is `white-space:
   nowrap` and unshrinkable, the labels spill straight out of the shrunken box
   and print on top of the actions cluster to its right — the sign-in button and
   cart sitting under the last nav link. Leaving the automatic min-content floor
   in place means a row that is too tight pushes instead of overlapping, and the
   collapse breakpoint below is what actually keeps it from getting that tight. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
}

.nav-link {
  position: relative;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  /* The header is a fixed 68px row. Without this a two-word label like
     "COA Library" breaks onto a second line the moment the row gets tight,
     which shoves the whole header out of alignment. */
  white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-link:hover, .nav-link.is-active {
  color: var(--ink);
  background: var(--hairline-soft);
  opacity: 1;
}

/* The buttons living among the text links — they need their own breathing room
   so they do not read as part of the FAQ link next to them, but stay tight to
   each other so the pair reads as one cluster. */
.nav-cta { margin-left: 0.4rem; }
.nav-cta + .nav-cta { margin-left: 0; }

.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }

.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-soft);
  background: var(--glass-bg);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease-spring);
}
.icon-btn:hover { background: var(--hairline-soft); transform: translateY(-1px); opacity: 1; }

.cart-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: 0.66rem; font-weight: 640;
  color: #fff; background: var(--accent);
  border-radius: var(--r-pill);
  border: 2px solid var(--bg);
}

.nav-toggle { display: none; }

/* --- language switch ------------------------------------------------------ */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-soft);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.lang-opt {
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 640;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.lang-opt:hover { color: var(--ink); opacity: 1; }
.lang-opt.is-active {
  color: var(--accent-ink);
  background: var(--accent);
  opacity: 1;
}

.lang-switch-inline { display: none; }

/* --- theme toggle --------------------------------------------------------- */

/* One button, both glyphs: whichever theme is active hides its own icon and
   shows the other, so the button always pictures where pressing it lands. */
.theme-toggle .theme-icon-sun  { display: none; }
.theme-toggle .theme-icon-moon { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun  { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }

.theme-toggle svg { display: block; }

/* The drawer copy reads as a labelled row, not a bare icon, so it matches the
   nav links it sits under rather than the icon cluster it came from. */
.theme-toggle-inline {
  display: none;
  align-items: center;
  gap: 0.55rem;
  width: auto;
  padding: 0.7rem 0.9rem;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.theme-toggle-inline:hover { color: var(--ink); background: var(--hairline-soft); }

/* One step of tightening before the drawer, so locales with long labels get a
   little more runway on 13" laptops instead of collapsing to a burger early. */
@media (max-width: 1400px) {
  .nav { gap: 1rem; }
  .nav-link { padding: 0.5rem 0.55rem; }
}

/* Collapse point for the whole header. The brand lockup, six nav links and the
   actions cluster need ~1120px of content box in Spanish — the labels there run
   noticeably longer than their English sources — so below this hand the links to
   the drawer rather than squeezing them into the actions cluster. */
@media (max-width: 1200px) {
  .lang-switch-desktop { display: none; }
  .theme-toggle-desktop { display: none; }
  .theme-toggle-inline { display: flex; }
  .lang-switch-inline {
    display: inline-flex;
    align-self: flex-start;
    margin: 0.65rem 0.9rem 0;
  }
}

@media (max-width: 1200px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-links.is-open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.85rem var(--gut) 1.35rem;
    /* Opaque, not glass. The drawer lives inside .site-header, which carries its
       own backdrop-filter and so becomes the backdrop root — this element can
       only sample the header, never the page it overhangs, so the blur silently
       no-ops and a translucent panel would leave the hero legible underneath. */
    background: var(--drawer-bg);
    border-bottom: 1px solid var(--hairline);
  }
  .nav-links.is-open .nav-link { padding: 0.7rem 0.9rem; }
  /* The drawer stretches its children; let the CTAs hug their labels instead. */
  .nav-links.is-open .nav-cta {
    align-self: flex-start;
    margin: 0.6rem 0 0 0.9rem;
    padding: 0.55rem 1.15rem;
  }
  .nav-links.is-open .nav-cta + .nav-cta { margin-top: 0.4rem; }
}

/* --- hero ----------------------------------------------------------------- */

.hero { padding-block: clamp(3rem, 8vw, 6.5rem); position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero h1 { margin-bottom: 1.1rem; }
.hero .lede { max-width: 34em; margin-bottom: 1.9rem; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 2.1rem; }

.hero-figure {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.hero-figure svg { width: 100%; height: auto; }

/* The hero mark is a raster, so it needs to be told to fill the card the way the
   old inline SVG did. Capped at the asset's native 512px so it never upscales
   into softness on a wide viewport. */
.hero-figure .brand-logo {
  width: 100%;
  max-width: 512px;
  height: auto;
}

/* --- stat band ------------------------------------------------------------ */

.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-radius: var(--r-lg);
  overflow: hidden;
}

.stat {
  padding: clamp(1.3rem, 3vw, 2rem) 1.25rem;
  text-align: center;
  border-right: 1px solid var(--hairline-soft);
}
.stat:last-child { border-right: none; }

.stat-value {
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  font-weight: 660;
  letter-spacing: -0.035em;
  line-height: 1;
  background: linear-gradient(135deg, var(--slate-700), var(--steel-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-theme="dark"] .stat-value {
  background: linear-gradient(135deg, #dfe8f4, var(--steel-400));
  -webkit-background-clip: text; background-clip: text;
}

.stat-label {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 540;
}

@media (max-width: 620px) {
  .stat { border-right: none; border-bottom: 1px solid var(--hairline-soft); }
  .stat:last-child { border-bottom: none; }
}

/* --- feature cards -------------------------------------------------------- */

.feature { padding: clamp(1.4rem, 3vw, 1.9rem); height: 100%; }

.feature-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  font-size: 1.2rem;
  margin-bottom: 1.05rem;
  color: var(--accent);
  background: linear-gradient(150deg, rgba(91,138,196,0.22), rgba(91,138,196,0.06));
  border: 1px solid rgba(91, 138, 196, 0.22);
}

.feature h3 { font-size: 1.06rem; margin-bottom: 0.4rem; }
.feature p  { font-size: 0.93rem; color: var(--ink-soft); margin: 0; }

/* --- article infographics -------------------------------------------------
   Two sizes of one figure: `.ig-strip` teases it on a research card, `.ig`
   draws it in full on the opened article. Both are pure layout over data —
   nothing here depends on an uploaded image, so the figure follows the theme.
   -------------------------------------------------------------------------- */

/* A card carrying a strip pins its date row to the bottom, so a grid of cards
   with figures of different heights still lines its meta row up. Becoming a flex
   column would otherwise stretch the inline-flex pills across the whole card. */
.feature.has-ig { display: flex; flex-direction: column; }
.feature.has-ig > .row:last-child { margin-top: auto; }
.feature.has-ig > .pill,
.feature.has-ig > .ig-badge { align-self: flex-start; }

.ig-strip {
  margin-top: 1.05rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline-soft);
  display: grid;
  gap: 0.4rem;
}

.ig-strip-bar {
  display: grid;
  grid-template-columns: minmax(0, 5.2rem) 1fr auto;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.68rem;
  line-height: 1.3;
}

.ig-strip-bar-label {
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-strip-bar-value {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-soft);
}

.ig-track {
  display: block;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--hairline);
  overflow: hidden;
}

.ig-track-lg { height: 10px; }

.ig-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--steel-600), var(--steel-400));
  transition: width 0.7s var(--ease);
}

.ig-fill.ig-mint  { background: linear-gradient(90deg, #2f9077, var(--mint-500)); }
.ig-fill.ig-amber { background: linear-gradient(90deg, #b9822c, var(--amber-500)); }
.ig-fill.ig-rose  { background: linear-gradient(90deg, #a94747, var(--rose-500)); }

/* Inner element classes stay clear of `.ig-strip-<kind>`, which the wrapper
   already carries as a hook — a shared name there would restyle the wrapper. */
/* Uploaded figure, cropped to a consistent band so a grid of cards stays even
   whatever aspect ratio the author exported. */
.ig-shot {
  display: block;
  height: 96px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--hairline-soft);
}

.ig-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ig-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--bg-elev);
}

.ig-dots { display: flex; align-items: center; gap: 0.3rem; }

.ig-strip-dot {
  width: 19px; height: 19px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  font-size: 0.6rem;
  font-family: var(--mono);
  color: var(--accent);
  background: rgba(91, 138, 196, 0.16);
  border: 1px solid rgba(91, 138, 196, 0.28);
}

.ig-strip-link { flex: 1; height: 1px; background: var(--hairline); }

.ig-versus {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
}

.ig-strip-col {
  flex: 1;
  padding: 0.32rem 0.5rem;
  border-radius: var(--r-xs);
  background: var(--hairline-soft);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-strip-vs { font-size: 0.6rem; color: var(--ink-faint); text-transform: uppercase; }

.ig-strip-note {
  font-size: 0.68rem;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-tiles { display: flex; gap: 0.9rem; }

.ig-strip-stat { display: grid; gap: 0.05rem; min-width: 0; }
.ig-strip-stat b {
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.ig-strip-stat span {
  font-size: 0.62rem;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.75rem;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* full figure */

.ig {
  margin: 1.6rem 0 0;
  padding: clamp(1.15rem, 3vw, 1.65rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: linear-gradient(160deg, rgba(91, 138, 196, 0.10), rgba(91, 138, 196, 0.02));
}

.ig-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.25rem;
}

.ig-mark {
  width: 38px; height: 38px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  font-size: 1rem;
  color: var(--accent);
  background: linear-gradient(150deg, rgba(91, 138, 196, 0.22), rgba(91, 138, 196, 0.06));
  border: 1px solid rgba(91, 138, 196, 0.22);
}

.ig-title { font-size: 1.05rem; margin: 0.15rem 0 0; }

.ig-bars { display: grid; gap: 0.95rem; }

.ig-bar-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.ig-bar-label { font-size: 0.88rem; color: var(--ink-soft); }
.ig-bar-value {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink);
}

.ig-steps { list-style: none; display: grid; gap: 0.15rem; margin: 0; padding: 0; }

.ig-steps li {
  position: relative;
  display: flex;
  gap: 0.85rem;
  padding-bottom: 1rem;
}

/* The connector is drawn behind the numbers rather than between them, so a step
   whose detail wraps to three lines keeps an unbroken spine. */
.ig-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 1px;
  background: var(--hairline);
}

.ig-steps li:last-child { padding-bottom: 0; }

.ig-step-n {
  position: relative;
  width: 27px; height: 27px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent-ink);
  background: var(--accent);
}

.ig-steps strong { font-size: 0.95rem; display: block; }
.ig-steps p { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--ink-soft); }

.ig-compare { overflow-x: auto; }

.ig-compare-row {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1.35fr;
  gap: 0.9rem;
  min-width: 430px;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.ig-compare-row:last-child { border-bottom: 0; }

.ig-compare-head { padding-top: 0; border-bottom: 1px solid var(--hairline); }

.ig-compare-col {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.ig-compare-aspect { color: var(--ink); font-weight: 550; }

.ig-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.ig-stat {
  padding: 0.9rem 1rem;
  border-radius: var(--r-md);
  background: var(--glass-bg-strong);
  border: 1px solid var(--hairline);
}

.ig-stat strong {
  display: block;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.ig-stat-label { display: block; font-size: 0.85rem; margin-top: 0.15rem; }
.ig-stat-note { display: block; font-size: 0.75rem; color: var(--ink-faint); margin-top: 0.3rem; }

.ig-foot {
  margin-top: 1.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline-soft);
}

.ig-foot p { margin: 0 0 0.3rem; font-size: 0.85rem; color: var(--ink-soft); }

/* --- product cards -------------------------------------------------------- */

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-lg);
}

.product-media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 70% at 50% 30%, rgba(91,138,196,0.16), transparent 70%),
    var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
}
.product-media svg { width: 46%; opacity: 0.92; }

.product-flags {
  position: absolute; top: 0.8rem; left: 0.8rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}

.product-body {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.15rem 1.25rem 1.35rem;
  flex: 1;
}

.product-cat {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 580;
}

.product-name { font-size: 1.04rem; font-weight: 600; margin: 0; color: var(--ink); }
.product-name a { color: inherit; }

.product-summary {
  font-size: 0.86rem; color: var(--ink-soft); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-meta {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin-top: auto; padding-top: 0.65rem;
}

.price { font-size: 1.16rem; font-weight: 650; letter-spacing: -0.02em; }
.price-was { font-size: 0.85rem; color: var(--ink-faint); text-decoration: line-through; }
.price-from { font-size: 0.72rem; color: var(--ink-faint); }

/* --- specs table ---------------------------------------------------------- */

.spec-list { display: grid; gap: 0; }

.spec-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) 1fr;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 0.9rem;
}
.spec-row:last-child { border-bottom: none; }
.spec-key { color: var(--ink-faint); font-weight: 520; }
.spec-val { color: var(--ink); word-break: break-word; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.89rem;
  min-width: 620px;
}
table.data th {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 580;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
table.data td {
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: middle;
}
table.data tbody tr { transition: background 0.2s var(--ease); }
table.data tbody tr:hover { background: var(--hairline-soft); }
table.data tr:last-child td { border-bottom: none; }

/* --- forms ---------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
/* An author `display` beats the UA rule for [hidden], so a field toggled off
   from script stays visible without this. */
.field[hidden] { display: none; }

.field label,
.label {
  font-size: 0.8rem;
  font-weight: 560;
  color: var(--ink-soft);
  letter-spacing: 0.005em;
}

.input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"], input[type="date"],
input[type="url"], select, textarea {
  width: 100%;
  padding: 0.72rem 0.95rem;
  font: inherit;
  font-size: 0.93rem;
  color: var(--ink);
  background: var(--glass-bg-strong);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

textarea { min-height: 130px; resize: vertical; line-height: 1.55; }

.input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px rgba(91, 138, 196, 0.16);
}

::placeholder { color: var(--ink-faint); opacity: 0.75; }

.check {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.87rem; color: var(--ink-soft); line-height: 1.5;
  cursor: pointer;
}
.check input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--accent); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.form-note { font-size: 0.8rem; color: var(--ink-faint); }

/* --- infographic upload (staff console) ---------------------------------- */

.ig-drop {
  display: block;
  position: relative;
  padding: 1.4rem 1.1rem;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-md);
  background: var(--hairline-soft);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.ig-drop:hover, .ig-drop.is-over {
  border-color: var(--accent);
  background: rgba(91, 138, 196, 0.08);
}

/* The input stays in the layout and focusable — display:none would take it out
   of the tab order and off the accessibility tree. */
.ig-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ig-drop-inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.3rem;
  pointer-events: none;
}

.ig-drop-mark { font-size: 1.35rem; color: var(--accent); }
.ig-drop-inner strong { font-size: 0.92rem; }

.ig-preview {
  margin-top: 0.75rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--bg-elev);
  overflow: hidden;
}

.ig-preview[hidden] { display: none; }
.ig-preview img { display: block; width: 100%; height: auto; }

/* --- flash ---------------------------------------------------------------- */

.flash-stack {
  position: fixed;
  top: 84px; right: var(--gut);
  z-index: 200;
  display: flex; flex-direction: column; gap: 0.6rem;
  width: min(380px, calc(100vw - 2 * var(--gut)));
}

.flash {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.9rem 1.05rem;
  border-radius: var(--r-md);
  font-size: 0.89rem;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-lg);
  animation: flash-in 0.5s var(--ease-spring) both;
}

@keyframes flash-in {
  from { opacity: 0; transform: translateX(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.flash-bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--accent); flex: none; }
.flash-success .flash-bar { background: var(--mint-500); }
.flash-error   .flash-bar { background: var(--rose-500); }
.flash-info    .flash-bar { background: var(--steel-500); }

.flash-close {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--ink-faint); font-size: 1.05rem; line-height: 1; padding: 0 0 0 0.4rem;
}

/* --- accordion ------------------------------------------------------------ */

.accordion { border-radius: var(--r-lg); overflow: hidden; }

.acc-item { border-bottom: 1px solid var(--hairline-soft); }
.acc-item:last-child { border-bottom: none; }

.acc-item summary {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem clamp(1.1rem, 3vw, 1.6rem);
  cursor: pointer;
  font-weight: 560;
  font-size: 0.98rem;
  list-style: none;
  transition: background 0.25s var(--ease);
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary:hover { background: var(--hairline-soft); }

.acc-item summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--ink-faint);
  transition: transform 0.35s var(--ease);
}
.acc-item[open] summary::after { transform: rotate(45deg); }

.acc-body {
  padding: 0 clamp(1.1rem, 3vw, 1.6rem) 1.35rem;
  color: var(--ink-soft);
  font-size: 0.93rem;
  max-width: 76ch;
}

/* --- steps ---------------------------------------------------------------- */

.steps { counter-reset: step; display: grid; gap: 1rem; }

.step { display: flex; gap: 1.1rem; padding: 1.25rem 1.4rem; }

.step-num {
  counter-increment: step;
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 0.85rem; font-weight: 640;
  color: var(--accent-ink);
  background: linear-gradient(140deg, var(--steel-500), var(--slate-600));
}
.step-num::before { content: counter(step); }
.step h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.step p  { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

/* --- COA ------------------------------------------------------------------ */

.coa-card { padding: 1.35rem 1.5rem; height: 100%; display: flex; flex-direction: column; gap: 0.85rem; }

.coa-head { display: flex; align-items: flex-start; gap: 0.85rem; }
.coa-purity {
  margin-left: auto;
  font-size: 1.32rem; font-weight: 660; letter-spacing: -0.03em;
  color: var(--mint-500);
}
.coa-batch { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-faint); }

.coa-checks { display: grid; gap: 0.4rem; font-size: 0.84rem; }
.coa-check { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); }
.coa-tick {
  width: 16px; height: 16px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(63, 174, 144, 0.16);
  color: var(--mint-500);
  font-size: 0.62rem; font-weight: 700;
}

/* purity meter */
.meter {
  height: 5px; border-radius: 3px; overflow: hidden;
  background: var(--hairline-soft);
}
.meter-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--steel-500), var(--mint-500));
}

/* --- disclaimer ----------------------------------------------------------- */

.disclaimer {
  border-left: 3px solid var(--amber-500);
  background: rgba(213, 154, 60, 0.08);
  border-radius: var(--r-md);
  padding: 1.1rem 1.35rem;
  font-size: 0.87rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.disclaimer strong { color: var(--ink); }

/* --- CTA ------------------------------------------------------------------ */

.cta-banner {
  position: relative;
  padding: clamp(2.25rem, 6vw, 4rem);
  border-radius: var(--r-xl);
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--slate-800) 0%, var(--slate-600) 48%, var(--steel-700) 100%);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cta-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 90% at 82% 0%, rgba(255,255,255,0.22), transparent 62%);
  pointer-events: none;
}
.cta-banner > * { position: relative; }
.cta-banner h2 { color: #fff; }
.cta-banner p  { color: rgba(255,255,255,0.82); max-width: 56ch; margin-inline: auto; }
.cta-banner .btn-ghost {
  --btn-bg: rgba(255,255,255,0.16);
  --btn-fg: #fff;
  border-color: rgba(255,255,255,0.3);
}
.cta-banner .btn:not(.btn-ghost) { --btn-bg: #fff; --btn-fg: var(--slate-800); }

/* --- footer --------------------------------------------------------------- */

.site-footer {
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--hairline-soft);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding-block: clamp(2.5rem, 5vw, 3.75rem) 1.75rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-col h4 {
  font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.95rem; font-weight: 600;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-col a { color: var(--ink-soft); font-size: 0.89rem; }
.footer-col a:hover { color: var(--accent); opacity: 1; }

.footer-bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline-soft);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  align-items: center;
  font-size: 0.79rem;
  color: var(--ink-faint);
}

/* Contact details are links, but shouldn't shout — they inherit the muted
   footer colour and only pick up the accent on hover. */
.footer-bottom a { color: inherit; }
.footer-bottom a:hover { color: var(--accent); opacity: 1; }

/* --- breadcrumb ----------------------------------------------------------- */

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  font-size: 0.82rem; color: var(--ink-faint);
  padding-block: 1.25rem;
}
.crumbs a { color: var(--ink-faint); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { opacity: 0.5; }

/* --- filter bar ----------------------------------------------------------- */

.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  margin-bottom: 1.75rem;
}
.filter-bar .input { width: auto; min-width: 200px; flex: 1; }
.filter-bar select { width: auto; min-width: 150px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip {
  padding: 0.44rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: 0.83rem;
  font-weight: 520;
  color: var(--ink-soft);
  background: var(--glass-bg);
  border: 1px solid var(--hairline-soft);
  transition: all 0.25s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }
.chip.is-active {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
}

/* --- product detail ------------------------------------------------------- */

.pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
@media (max-width: 900px) { .pdp-grid { grid-template-columns: 1fr; } }

.pdp-media {
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: var(--r-xl);
  background:
    radial-gradient(65% 65% at 50% 32%, rgba(91,138,196,0.18), transparent 72%),
    var(--glass-bg);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.pdp-media svg { width: 70%; }

.variant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 0.6rem; }

.variant {
  position: relative;
  display: block;
  padding: 0.85rem 0.9rem;
  border-radius: var(--r-md);
  border: 1.5px solid var(--hairline);
  background: var(--glass-bg);
  cursor: pointer;
  text-align: center;
  transition: all 0.28s var(--ease);
}
.variant input { position: absolute; opacity: 0; pointer-events: none; }
.variant:hover { border-color: var(--steel-400); }
.variant:has(input:checked) {
  border-color: var(--accent);
  background: rgba(91, 138, 196, 0.1);
  box-shadow: 0 0 0 3px rgba(91, 138, 196, 0.13);
}
.variant-size  { font-weight: 620; font-size: 0.95rem; }
.variant-price { font-size: 0.83rem; color: var(--ink-soft); margin-top: 0.15rem; }
.variant-stock { font-size: 0.7rem; color: var(--ink-faint); margin-top: 0.15rem; }
.variant.is-out { opacity: 0.45; pointer-events: none; }

.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  overflow: hidden;
}
.qty button {
  width: 40px; height: 44px;
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 1.1rem;
  transition: background 0.2s var(--ease);
}
.qty button:hover { background: var(--hairline-soft); }
.qty input {
  width: 46px; height: 44px; padding: 0; text-align: center;
  border: none; background: none; box-shadow: none;
  font-weight: 580;
}
.qty input:focus { box-shadow: none; }

.tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--hairline); margin-bottom: 1.6rem;
        overflow-x: auto; }
.tab {
  padding: 0.75rem 1.05rem;
  font-size: 0.9rem; font-weight: 540;
  color: var(--ink-faint);
  border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fade-up 0.4s var(--ease) both; }

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

/* --- cart / checkout ------------------------------------------------------ */

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 880px) { .checkout-grid { grid-template-columns: 1fr; } }

.summary-sticky { position: sticky; top: 92px; }

.line-item {
  display: grid;
  grid-template-columns: 66px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.line-item:last-of-type { border-bottom: none; }
.line-thumb {
  width: 66px; height: 66px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--hairline-soft);
}
.line-thumb svg { width: 60%; }

.total-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; font-size: 0.91rem; color: var(--ink-soft);
}
.total-row.is-total {
  margin-top: 0.5rem; padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  font-size: 1.1rem; font-weight: 650; color: var(--ink);
}

.empty-state { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; }
.empty-state .glyph { font-size: 2.5rem; opacity: 0.35; margin-bottom: 0.85rem; }

/* --- admin ---------------------------------------------------------------- */

.admin-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
@media (max-width: 860px) { .admin-shell { grid-template-columns: 1fr; } }

.admin-side {
  border-right: 1px solid var(--hairline-soft);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding: 1.5rem 1rem;
}
@media (max-width: 860px) { .admin-side { border-right: none; border-bottom: 1px solid var(--hairline); } }

.admin-nav { display: grid; gap: 0.15rem; margin-top: 1.5rem; }
.admin-nav a {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-sm);
  font-size: 0.89rem; font-weight: 500;
  color: var(--ink-soft);
  transition: all 0.22s var(--ease);
}
.admin-nav a:hover { background: var(--hairline-soft); color: var(--ink); opacity: 1; }
.admin-nav a.is-active { background: var(--accent); color: var(--accent-ink); }

.admin-main { padding: clamp(1.4rem, 3vw, 2.4rem); min-width: 0; }

.admin-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-bottom: 1.75rem;
}
.admin-head h1 { font-size: clamp(1.5rem, 3vw, 1.95rem); margin: 0; }

.kpi { padding: 1.15rem 1.3rem; }
.kpi-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
             color: var(--ink-faint); font-weight: 580; }
.kpi-value { font-size: 1.75rem; font-weight: 660; letter-spacing: -0.03em; margin-top: 0.3rem; }

.block-row {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--hairline-soft);
}
.block-row:last-child { border-bottom: none; }
.block-glyph {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--hairline-soft);
  color: var(--accent);
  font-size: 0.95rem;
}
.block-type { font-weight: 560; font-size: 0.93rem; }
.block-preview { font-size: 0.8rem; color: var(--ink-faint);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.block-actions { margin-left: auto; display: flex; gap: 0.3rem; align-items: center; }
.block-row.is-off { opacity: 0.45; }

.mini-btn {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--hairline-soft);
  background: var(--glass-bg);
  color: var(--ink-soft);
  font-size: 0.8rem; cursor: pointer;
  transition: all 0.2s var(--ease);
}
.mini-btn:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }
.mini-btn.is-danger:hover { border-color: var(--rose-500); color: var(--rose-500); }

.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0.55rem; }
.picker-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 0.9rem 0.6rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-soft);
  background: var(--glass-bg);
  font-size: 0.79rem; font-weight: 520;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: center;
  transition: all 0.25s var(--ease);
}
.picker-item:hover {
  border-color: var(--accent); color: var(--accent);
  transform: translateY(-2px); opacity: 1;
}
.picker-item .glyph { font-size: 1.15rem; color: var(--accent); }

/* --- charts ---------------------------------------------------------------
   Single-series area chart. Each theme gets its own validated colour step
   rather than an automatic flip — both pass the lightness-band, chroma-floor
   and 3:1 contrast checks against their own surface. */

:root {
  --chart-ink:  #4d7cb8;   /* light: validated on #f6f7f9 */
  --chart-grid: rgba(28, 36, 51, 0.10);
  --chart-surface: #ffffff;
}

:root[data-theme="dark"] {
  --chart-ink:  #5b95e8; /* dark: validated on #161d29 */
  --chart-grid: rgba(255, 255, 255, 0.11);
  --chart-surface: #161d29;
}

.chart-caption {
  display: flex; align-items: baseline; gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.chart-caption .tiny { margin-left: auto; }

.chart-frame { position: relative; }
.chart-svg { width: 100%; height: 200px; overflow: visible; }

.chart-grid { stroke: var(--chart-grid); stroke-width: 1; }

.chart-tick {
  fill: var(--ink-faint);
  font-size: 10px;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}

.chart-area { fill: var(--chart-ink); fill-opacity: 0.10; stroke: none; }

.chart-line {
  fill: none;
  stroke: var(--chart-ink);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* 2px surface ring keeps the marker legible where it sits on the line */
.chart-dot {
  fill: var(--chart-ink);
  stroke: var(--chart-surface);
  stroke-width: 2;
}

.chart-endlabel {
  fill: var(--ink);              /* text tokens, never the series colour */
  font-size: 11px;
  font-weight: 620;
  font-family: var(--font);
}

.chart-hit { fill: transparent; cursor: crosshair; }
.chart-hit:hover { fill: var(--chart-ink); fill-opacity: 0.06; }

.chart-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  transform: translate(-50%, -110%);
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-md);
  font-size: 0.78rem;
  white-space: nowrap;
}
.chart-tip strong { display: block; font-size: 0.85rem; }

.chart-table { margin-top: 1rem; }
.chart-table summary {
  cursor: pointer; font-size: 0.82rem; font-weight: 540; color: var(--accent);
}
.chart-table[open] summary { margin-bottom: 0.75rem; }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- affiliate ------------------------------------------------------------ */

.copy-field {
  display: flex; align-items: stretch; gap: 0.5rem;
  margin-top: 0.5rem;
}
.copy-field input {
  font-family: var(--mono);
  font-size: 0.84rem;
  background: var(--hairline-soft);
}
.copy-field .btn { flex: none; }

.affil-code {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 640;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* The host sits inside the field rather than above it, so what a partner is
   choosing reads as the URL it becomes: peptiqxbiotech.com/[______]. */
.code-prefix {
  display: flex; align-items: stretch;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--hairline-soft);
  overflow: hidden;
}
.code-prefix-host {
  display: flex; align-items: center;
  padding: 0 0.1rem 0 0.6rem;
  font-family: var(--mono); font-size: 0.78rem;
  color: var(--ink-faint); white-space: nowrap;
}
.code-prefix .input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  font-family: var(--mono); font-size: 0.84rem;
  padding-left: 0.1rem;
}
.code-prefix:focus-within { border-color: var(--accent); }

.code-request {
  display: flex; gap: 0.75rem; align-items: center; justify-content: space-between;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px dashed var(--hairline);
  background: var(--hairline-soft);
}

.status-note {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 1.05rem 1.25rem;
  border-radius: var(--r-md);
  border-left: 3px solid var(--accent);
  background: rgba(91, 138, 196, 0.09);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.status-note.is-warn { border-left-color: var(--amber-500); background: rgba(213,154,60,0.09); }
.status-note.is-stop { border-left-color: var(--rose-500); background: rgba(200,90,90,0.09); }

/* --- PEPCOiNS -------------------------------------------------------------
   The balance is the one number a holder came to see, so it gets display
   weight and tabular figures — a balance that reflows as it ticks up reads as
   unreliable. Everything else here stays deliberately quiet: a rewards balance
   that shouts on every page starts to feel like a slot machine. */

.coin-banner {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  align-items: center; justify-content: space-between;
}
.coin-balance {
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 680;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin: 0.25rem 0 0.35rem;
}
.coin-unit {
  font-size: 0.8rem; font-weight: 560; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-left: 0.4rem; vertical-align: 0.55em;
}

.coin-chip {
  display: inline-flex; align-items: center; gap: 0.34rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--hairline-soft);
  font-size: 0.8rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.coin-chip:hover { border-color: var(--accent); }
.coin-chip-mark { font-size: 0.72rem; opacity: 0.85; }

.coin-applied {
  display: flex; gap: 0.75rem; align-items: center; justify-content: space-between;
  padding: 0.8rem 0.95rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(91, 138, 196, 0.35);
  background: rgba(91, 138, 196, 0.09);
  font-size: 0.86rem;
}
.coin-form .label { font-size: 0.8rem; }

/* Terms read as a document, not as marketing chrome. */
.legal-body h2 {
  font-size: 1.05rem; margin: 2rem 0 0.6rem;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li {
  font-size: 0.9rem; color: var(--ink-soft); line-height: 1.7;
}
.legal-body ul { margin: 0.6rem 0 0.6rem 1.1rem; display: grid; gap: 0.5rem; }
.legal-body p + p { margin-top: 0.7rem; }
.legal-body .disclaimer { margin: 0.9rem 0; }

.milestone {
  display: grid; gap: 0.55rem;
}
.milestone-row {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.86rem; color: var(--ink-soft);
}
.milestone-row .coa-tick { flex: none; }

/* --- misc ----------------------------------------------------------------- */

.divider { height: 1px; background: var(--hairline-soft); border: none; margin-block: 1.5rem; }

.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.25rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul, .prose ol { padding-left: 1.35rem; color: var(--ink-soft); }
.prose li { margin-bottom: 0.45rem; }
.prose blockquote {
  margin: 1.5rem 0; padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--accent); color: var(--ink-soft); font-style: italic;
}

.quote-card { padding: 1.5rem 1.65rem; height: 100%; display: flex; flex-direction: column; gap: 1rem; }
.quote-mark { font-size: 2rem; line-height: 1; color: var(--steel-400); opacity: 0.55; }
.quote-body { font-size: 0.95rem; color: var(--ink-soft); flex: 1; }
.quote-who  { font-size: 0.84rem; font-weight: 580; }
.quote-role { font-size: 0.78rem; color: var(--ink-faint); }

/* --- age / research-use gate ---------------------------------------------- */

/* Armed by the inline head script in base.html, before first paint, so the
   catalog is never briefly readable behind a gate that has not opened yet. */
html.gate-pending,
html.gate-pending body { overflow: hidden; }

/* Hidden by default: without JS the attribute stays put and the site behaves
   normally — the announcement bar and footer carry the same notice. */
.age-gate[hidden] { display: none; }

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.age-gate-scrim {
  position: fixed;
  inset: 0;
  background: rgba(14, 19, 28, 0.62);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  animation: gate-fade 0.4s var(--ease) both;
}

@keyframes gate-fade { from { opacity: 0; } to { opacity: 1; } }

.age-gate-panel {
  position: relative;
  width: min(560px, 100%);
  margin: auto;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), var(--shadow-ring);
  background: var(--glass-bg-strong);
  animation: gate-rise 0.55s var(--ease) both;
}
.age-gate-panel::after { opacity: 0.5; }

@keyframes gate-rise {
  from { opacity: 0; transform: translateY(22px) scale(0.975); }
  to   { opacity: 1; transform: none; }
}

/* Night plate in both themes — the reversed lockup is the only logo variant
   that belongs on it, so it is referenced directly rather than via the macro. */
.age-gate-head {
  position: relative;
  overflow: hidden;
  padding: clamp(1.6rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.5rem)
           clamp(1.75rem, 4vw, 2.4rem);
  background:
    radial-gradient(120% 140% at 78% 6%, rgba(91, 138, 196, 0.34), transparent 58%),
    linear-gradient(158deg, var(--slate-800) 0%, #101724 78%);
}

.age-gate-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.age-gate-logo {
  position: relative;
  display: block;
  height: 34px;
  width: auto;
  margin-bottom: clamp(1.15rem, 3vw, 1.6rem);
}

.age-gate-title {
  position: relative;
  margin: 0;
  font-size: clamp(1.42rem, 3.4vw, 1.78rem);
  line-height: 1.22;
  letter-spacing: -0.022em;
  color: #fff;
}
.age-gate-title span   { display: block; font-weight: 400; color: var(--slate-100); }
.age-gate-title strong { display: block; font-weight: 660; }

.age-gate-body {
  padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2.5rem)
           clamp(1.5rem, 4vw, 2rem);
  background: var(--bg-elev);
}

.age-gate-lede {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.age-gate-check {
  position: relative;   /* contains the visually-hidden input */
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.35rem 0;
  margin-bottom: 1.1rem;
  cursor: pointer;
}

/* The native input stays in the layout, unpainted, so it keeps its own focus
   ring target and keyboard behaviour; .age-gate-box is what you actually see. */
.age-gate-check input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}

.age-gate-box {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border: 2px solid var(--steel-500);
  border-radius: var(--r-xs);
  background: transparent;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease);
}
.age-gate-box::before {
  content: "";
  display: block;
  width: 100%; height: 100%;
  background: no-repeat center / 14px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1.6 5.7 5.1 9.2 12.4 1.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s var(--ease), transform 0.24s var(--ease-spring);
}
.age-gate-check:hover .age-gate-box { border-color: var(--steel-700); }
.age-gate-check input:checked ~ .age-gate-box {
  background: var(--steel-700);
  border-color: var(--steel-700);
}
.age-gate-check input:checked ~ .age-gate-box::before {
  opacity: 1;
  transform: none;
}
.age-gate-check input:focus-visible ~ .age-gate-box {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.age-gate-copy {
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--ink);
}
.age-gate-copy strong { font-weight: 640; }

.age-gate-rule {
  height: 1px;
  margin: 1.6rem 0 1.35rem;
  background: var(--hairline);
}

.age-gate-go   { margin-bottom: 0.75rem; }
.age-gate-back { font-weight: 620; }

.age-gate-declined { text-align: center; }

@media (max-width: 560px) {
  .age-gate { padding: 0; align-items: stretch; }
  .age-gate-panel { border-radius: 0; min-height: 100%; width: 100%; margin: 0; }
}

:root[data-theme="dark"] .age-gate-box { border-color: var(--steel-400); }
:root[data-theme="dark"] .age-gate-check:hover .age-gate-box { border-color: var(--steel-300); }
:root[data-theme="dark"] .age-gate-check input:checked ~ .age-gate-box {
  background: var(--steel-500);
  border-color: var(--steel-500);
}

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { animation: fade-up 0.75s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* fallback where backdrop-filter is unsupported */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(255,255,255,0.94); --glass-bg-strong: rgba(255,255,255,0.98); }
  :root[data-theme="dark"] {
    --glass-bg: rgba(24,31,44,0.95); --glass-bg-strong: rgba(24,31,44,0.99);
  }
}