/* Advertorial design system.
   THE ONLY BLOCK YOU CHANGE PER CLIENT IS :root BELOW.
   Extract the real values from the client's live site (see RECON.md) and paste them in.
   Everything after :root is client-agnostic and should not need editing. */

/* Client tokens, read off the advertiser's live theme stylesheet on 2026-09-12.
   Their accent is teal, not gold, so the --gold-* slots carry the teal ramp: darkened
   where the token sits behind white text on a light background, brand teal where it
   fills against navy. Purple is their price/gradient colour and is added here. */
:root {
  --navy: #172C45;
  --navy-deep: #0E1C2E;
  --navy-2: #1F3A5A;
  --navy-3: #2E4E75;
  --ink: #172C45;
  --ink-2: #4A5568;
  --gold: #0C7E76;        /* fills carrying white text: btn, trust strip, avatar */
  --gold-2: #0E9A90;      /* small accents: bullets, mono numerals */
  --gold-3: #1FC6B9;      /* brand teal, fills against navy with dark text */
  --gold-deep: #095F59;   /* hovers and accent text on light */
  --gold-pale: #A5E9E3;   /* text on navy */
  --purple: #8D6DE0;
  --purple-deep: #6C4BC4;
  --bg: #FFFFFF;
  --bg-soft: #F5F8FA;
  --line: #E6EBEF;
  --disp: 'Sora', system-ui, sans-serif;
  --body: 'Manrope', system-ui, -apple-system, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, Menlo, monospace;

  --bar-top: 44px;
  --bar-bottom: 82px;
}

body.adv {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.62;
  padding-top: var(--bar-top);
  padding-bottom: var(--bar-bottom);
}

.adv h1, .adv h2, .adv h3 { font-family: var(--disp); letter-spacing: -0.02em; }

.adv-wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; }

/* Two column on desktop, the rail is CTA #3 that stays on screen.
   padding-top clears the fixed bar for BOTH columns. It lives here rather than on
   .adv-kicker because `.adv p` (0,1,1) outranks `.adv-kicker` (0,1,0) and silently
   zeroes that margin, which left the first line flush against the bar. */
.adv-grid { display: block; padding-top: 34px; }
@media (min-width: 1000px) {
  .adv-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 44px; align-items: start; }
}

/* ---------- sticky bar 1 (top) ---------- */
.adv-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--bar-top);
  background: var(--navy-deep); color: var(--bg-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 16px;
  border-bottom: 1px solid rgba(179,148,92,.28);
}
.adv-topbar .brand {
  font-family: var(--disp); font-weight: 700; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-pale);
  text-decoration: none; white-space: nowrap;
}
.adv-topbar .brand span { color: #fff; }
.adv-topbar .top-cta {
  font: 600 .74rem/1 var(--body); letter-spacing: .04em;
  color: var(--navy-deep); background: var(--gold-3);
  padding: 8px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.adv-topbar .top-cta:hover { background: var(--gold-pale); }

/* ---------- sticky bar 2 (bottom) holds CTA #2 and #3 ---------- */
.adv-bottombar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: var(--navy-deep);
  border-top: 2px solid var(--gold-3);
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: 0 -8px 28px rgba(10,19,34,.28);
}
.adv-bottombar .bb-copy { display: none; color: var(--bg-soft); font-size: .78rem; line-height: 1.35; }
.adv-bottombar .bb-copy strong { color: var(--gold-pale); display: block; font-family: var(--disp); font-size: .92rem; }
@media (min-width: 720px) { .adv-bottombar .bb-copy { display: block; } }
.bb-primary {
  background: var(--gold-3); color: var(--navy-deep);
  font: 700 .86rem/1 var(--body); letter-spacing: .02em;
  padding: 14px 22px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.bb-primary:hover { background: var(--gold-pale); }
.bb-secondary {
  color: var(--gold-pale); font: 600 .78rem/1 var(--body);
  padding: 13px 16px; border: 1px solid rgba(220,202,158,.42);
  border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.bb-secondary:hover { border-color: var(--gold-pale); color: #fff; }

/* ---------- article ---------- */
.adv-kicker {
  font: 700 .7rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin: 30px 0 14px;
}
.adv h1 {
  font-size: clamp(1.72rem, 5vw, 2.62rem); line-height: 1.12;
  color: var(--navy-deep); margin: 0 0 18px; font-weight: 600;
}
.adv h1 b { font-weight: 800; }
.adv-standfirst {
  font-size: 1.04rem; color: var(--ink-2); margin: 0 0 22px;
}
.adv-standfirst mark {
  background: #FBEFC9; color: var(--ink); padding: 2px 5px; box-decoration-break: clone;
}
/* Source shots are 455x1000 portrait vials. Everything crops to square the way the
   client's own catalogue does, otherwise a card image runs 700px tall. */
.adv-hero { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-soft); }
.adv-hero .vial { border-radius: 0; }
.adv-figcap {
  font: 500 .74rem/1.5 var(--mono); color: var(--ink-2);
  padding: 10px 14px; border-top: 1px solid var(--line); background: #fff;
}

.adv p { margin: 0 0 1.15em; }
.adv h2 {
  font-size: clamp(1.24rem, 3.4vw, 1.58rem); color: var(--navy-deep);
  margin: 40px 0 12px; font-weight: 700; line-height: 1.22;
}
.adv h2 .num {
  font-family: var(--mono); color: var(--gold-2); font-size: .82em;
  margin-right: 10px; font-weight: 500;
}
.adv .takeaway {
  font-weight: 650; color: var(--navy-deep);
  border-left: 3px solid var(--gold-3); padding-left: 14px; margin: 0 0 1.2em;
}

/* checklist */
.adv-checks { list-style: none; margin: 0 0 26px; padding: 0; }
.adv-checks li { position: relative; padding-left: 30px; margin-bottom: 11px; }
.adv-checks li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  color: var(--gold-2); font-weight: 800;
}
.adv-checks b { color: var(--navy-deep); }

/* ---------- inline CTA blocks ---------- */
.adv-cta {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px 20px; margin: 34px 0; text-align: center;
}
.adv-cta h3 {
  font-size: 1.18rem; color: var(--navy-deep); margin: 0 0 8px; font-weight: 700; line-height: 1.25;
}
.adv-cta p { font-size: .92rem; color: var(--ink-2); margin: 0 0 16px; }
.btn-gold {
  display: inline-block; background: var(--gold); color: #fff;
  font: 700 .95rem/1 var(--body); padding: 16px 30px;
  border-radius: 999px; text-decoration: none;
}
.btn-gold:hover { background: var(--gold-deep); }
.adv-usp {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  margin-top: 14px; font: 500 .72rem/1 var(--mono); color: var(--ink-2);
}
.adv-usp span::before { content: "● "; color: var(--gold-2); }

/* ---------- COA card, the lab-document motif ---------- */
.coa {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; margin: 30px 0;
}
.coa-head {
  background: var(--navy-deep); color: var(--gold-pale);
  padding: 12px 16px; font: 600 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 10px;
}
.coa-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--bg-soft);
  font: 500 .82rem/1.4 var(--mono);
}
.coa-row:last-child { border-bottom: 0; }
.coa-row .k { color: var(--ink-2); }
.coa-row .v { color: var(--navy-deep); font-weight: 600; text-align: right; }
.coa-row .pass { color: #1c7a4a; }
.coa-row .fail { color: #b3352b; }

/* comparison table */
.cmp { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: .88rem; }
.cmp th, .cmp td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th { font: 700 .74rem/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cmp thead th:nth-child(2) { color: var(--gold-deep); }
.cmp td:nth-child(2) { color: #1c7a4a; font-weight: 650; }
.cmp td:nth-child(3) { color: #a2503f; }

/* ---------- desktop rail: always-visible CTA ---------- */
.adv-rail { display: none; }
@media (min-width: 1000px) {
  .adv-rail { display: block; position: sticky; top: calc(var(--bar-top) + 22px); }
}
.rail-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; margin-bottom: 16px;
}

.rail-body { padding: 18px 16px; text-align: center; }
.rail-body h4 {
  font-family: var(--disp); font-size: 1.02rem; line-height: 1.25;
  color: var(--navy-deep); margin: 0 0 10px; font-weight: 700;
}
.rail-body p { font-size: .82rem; color: var(--ink-2); margin: 0 0 14px; }
.rail-body .btn-gold { display: block; padding: 14px 12px; font-size: .88rem; }
.rail-facts { list-style: none; margin: 14px 0 0; padding: 0; text-align: left; }
.rail-facts li {
  font: 500 .74rem/1.5 var(--mono); color: var(--ink-2);
  padding: 7px 0; border-top: 1px solid var(--bg-soft);
}
.rail-facts li::before { content: "✓ "; color: var(--gold-2); font-weight: 700; }

/* ---------- comment thread ---------- */
.adv-comments { margin: 44px 0 0; border-top: 1px solid var(--line); padding-top: 26px; }
.adv-comments h3 {
  font-family: var(--disp); font-size: 1.05rem; color: var(--navy-deep);
  margin: 0 0 20px; font-weight: 700;
}
.cmt { display: flex; gap: 12px; margin-bottom: 20px; }
.cmt.reply { margin-left: 42px; }
.avatar {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 .8rem/1 var(--body); color: #fff; background: var(--navy-3);
}
.avatar.g { background: var(--gold); }
.avatar.n { background: var(--navy-2); }
.cmt-body { flex: 1; min-width: 0; }
.cmt-name { font: 700 .84rem/1.3 var(--body); color: var(--gold-deep); margin-bottom: 2px; }
.cmt-text { font-size: .88rem; color: var(--ink-2); margin: 0 0 4px; }
.cmt-meta { font: 500 .72rem/1 var(--body); color: #9c957f; }

.adv-note { font: 500 .76rem/1.55 var(--mono); color: var(--ink-2); margin: -18px 0 26px; }

/* ---------- scorecard hero (advertorial 2) ---------- */
.scorecard { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; margin: 0 0 26px; }
.sc-head {
  background: var(--navy-deep); color: var(--gold-pale); padding: 13px 16px;
  font: 600 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.sc-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--bg-soft); font-size: .86rem; }
.sc-row:last-of-type { border-bottom: 0; }
.sc-n { font: 500 .78rem/1 var(--mono); color: var(--gold-2); flex: 0 0 24px; }
.sc-k { flex: 1; color: var(--navy-deep); font-weight: 600; }
.sc-v { font: 500 .78rem/1 var(--mono); white-space: nowrap; }
.sc-v.pass { color: #1c7a4a; }
.sc-v.miss { color: #b3352b; }
.sc-foot { background: var(--bg-soft); padding: 13px 16px; font-size: .82rem; color: var(--ink-2); border-top: 1px solid var(--line); }

/* ---------- trio hero (advertorial 3) ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; }
.trio figure { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-soft); }

.trio figcaption {
  font: 500 .7rem/1.3 var(--mono); color: var(--ink-2);
  padding: 8px 6px; text-align: center; background: #fff; border-top: 1px solid var(--line);
}

/* ---------- homepage ---------- */
.home-hero { background: var(--navy-deep); color: var(--bg-soft); padding: 46px 0 52px; margin-bottom: 0; }
.home-hero .adv-kicker { color: var(--gold-3); margin-top: 0; }
.home-hero h1 { color: #fff; font-size: clamp(1.9rem, 5.4vw, 3rem); margin-bottom: 16px; font-weight: 600; }
.home-hero h1 b { color: var(--gold-3); font-weight: 800; }
.home-dek { color: #b9c0d0; font-size: 1.02rem; max-width: 640px; margin: 0 0 26px; }
.home-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-ghost {
  display: inline-block; color: var(--gold-pale); border: 1px solid rgba(220,202,158,.45);
  font: 600 .95rem/1 var(--body); padding: 16px 28px; border-radius: 999px; text-decoration: none;
}
.btn-ghost:hover { border-color: var(--gold-pale); color: #fff; }

.trust-strip { background: var(--gold); color: #fff; }
.trust-inner {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  padding: 13px 18px; font: 600 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}

.sec-title { font-family: var(--disp); font-size: clamp(1.35rem, 3.6vw, 1.8rem); color: var(--navy-deep); margin: 48px 0 6px; font-weight: 700; }
.sec-dek { color: var(--ink-2); margin: 0 0 26px; }

.card-grid { display: grid; gap: 20px; }
@media (min-width: 760px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,32,58,.12); }
.card-img { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.card-img { border-bottom: 1px solid var(--line); }
.card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.card-kicker { font: 700 .66rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 9px; }
.card h3 { font-family: var(--disp); font-size: 1.08rem; line-height: 1.28; color: var(--navy-deep); margin: 0 0 9px; font-weight: 700; }
.card-dek { font-size: .87rem; color: var(--ink-2); margin: 0 0 14px; flex: 1; }
.card-more { font: 700 .82rem/1 var(--body); color: var(--gold-deep); }

.band {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 16px;
  padding: 32px 24px; margin: 44px 0; text-align: center;
}
.band h3 { font-family: var(--disp); font-size: clamp(1.2rem, 3.2vw, 1.55rem); color: var(--navy-deep); margin: 0 0 10px; font-weight: 700; }
.band p { color: var(--ink-2); max-width: 620px; margin: 0 auto 20px; font-size: .95rem; }
.band.dark { background: var(--navy-deep); border-color: var(--navy-deep); }
.band.dark h3 { color: #fff; }
.band.dark p { color: #b9c0d0; }

.eight-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .eight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .eight-grid { grid-template-columns: repeat(4, 1fr); } }
.eight { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; font-size: .82rem; color: var(--ink-2); }
.eight .n { display: block; font: 500 .78rem/1 var(--mono); color: var(--gold-2); margin-bottom: 8px; }
.eight b { display: block; font-family: var(--disp); font-size: .98rem; color: var(--navy-deep); margin-bottom: 5px; }

.trio a { text-decoration: none; color: inherit; display: block; }
.adv-hero a { display: block; }

/* ---------- legal / plain pages ---------- */
.legal { max-width: 720px; margin: 0 auto; padding: 34px 0 10px; }
.legal h1 { font-size: clamp(1.6rem, 4.4vw, 2.1rem); color: var(--navy-deep); margin-bottom: 18px; }
.legal h2 { font-size: 1.15rem; color: var(--navy-deep); margin: 30px 0 10px; }
.legal p, .legal li { color: var(--ink-2); }

/* ---------- footer ---------- */
.adv-foot {
  margin-top: 46px; background: var(--navy-deep); color: #8b93a8;
  padding: 30px 18px; font-size: .72rem; line-height: 1.6; text-align: center;
}
.adv-foot a { color: var(--gold-pale); }
.adv-foot p { max-width: 760px; margin: 0 auto 12px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 18px; }
.foot-links a { font: 600 .76rem/1 var(--body); text-decoration: none; }
.foot-links a:hover { color: #fff; }
.adv-disclosure {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font: 500 .72rem/1.5 var(--body); color: var(--ink-2); margin: 26px 0 0;
}


/* ---------- vial: the full bottle, never cropped, and interactive ----------
   Source shots are 455x1000 portrait. These were previously cropped square with
   object-fit:cover, which sliced the vial in half. Contained on a lit plinth instead,
   so the whole bottle and its label are visible at every size. */
.vial {
  position: relative; display: block;
  overflow: hidden; aspect-ratio: 3 / 4; isolation: isolate;
  padding: 7% 8% 9%;
  background: radial-gradient(122% 78% at 50% 10%, #24334f 0%, #141f36 48%, var(--navy-deep) 100%);
}
/* pool of gold light the vial appears to stand in */
.vial::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; bottom: 7%; width: 64%; height: 13%;
  transform: translateX(-50%) scale(1);
  background: radial-gradient(50% 50% at 50% 50%, rgba(179,148,92,.55), transparent 72%);
  filter: blur(7px); opacity: .5;
  transition: opacity .42s ease, transform .42s ease;
}
.vial img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.5));
  transition: transform .42s cubic-bezier(.2,.7,.3,1), filter .42s ease;
}
.vial-cta {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 11px 8px; text-align: center;
  background: linear-gradient(to top, rgba(10,19,34,.95) 28%, rgba(10,19,34,0));
  color: var(--gold-pale); font: 600 .7rem/1.2 var(--body);
  transform: translateY(101%); transition: transform .34s ease;
}

/* Two cases: the vial is inside a link, or the link is the vial. */
a:hover .vial img, a:focus-visible .vial img,
a.vial:hover img, a.vial:focus-visible img {
  transform: translateY(-9px) scale(1.06);
  filter: drop-shadow(0 28px 36px rgba(0,0,0,.58)) brightness(1.07);
}
a:hover .vial::before, a:focus-visible .vial::before,
a.vial:hover::before, a.vial:focus-visible::before {
  opacity: .92; transform: translateX(-50%) scale(1.18);
}
a:hover .vial-cta, a:focus-visible .vial-cta,
a.vial:hover .vial-cta, a.vial:focus-visible .vial-cta { transform: translateY(0); }

/* Per-placement proportions. The hero is landscape, everything else portrait. */
.vial-hero { aspect-ratio: 16 / 10; border-radius: 0; }

@media (max-width: 560px) { .vial-hero { aspect-ratio: 4 / 3; } }

.vial-rail { display: block; aspect-ratio: 4 / 3; }


.trio .vial { aspect-ratio: 2 / 3; }
.trio figcaption { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .vial img, .vial::before, .vial-cta { transition: none; }
  a:hover .vial img, a.vial:hover img { transform: none; }
  .vial-cta { transform: translateY(0); }
}

/* ---------- client-supplied brand imagery ----------
   Representation shots, not catalogue product shots. Shown whole, never cropped. */
.home-hero-grid { display: block; }
@media (min-width: 900px) {
  .home-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); gap: 44px; align-items: center; }
}
.home-hero-img {
  display: block; margin-top: 30px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(220,202,158,.22);
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.home-hero-img img { width: 100%; height: auto; display: block; }
.home-hero-img:hover, .home-hero-img:focus-visible {
  transform: translateY(-5px); box-shadow: 0 32px 72px rgba(0,0,0,.55);
}
@media (min-width: 900px) { .home-hero-img { margin-top: 0; } }

.brand-band {
  margin: 34px 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
}
.brand-band > a { position: relative; display: block; overflow: hidden; }
.brand-band img {
  width: 100%; height: auto; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.brand-band > a:hover img, .brand-band > a:focus-visible img { transform: scale(1.035); }
.band-cta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 12px; text-align: center;
  background: linear-gradient(to top, rgba(10,19,34,.94) 26%, rgba(10,19,34,0));
  color: var(--gold-pale); font: 700 .82rem/1.2 var(--body);
  transform: translateY(101%); transition: transform .34s ease;
}
.brand-band > a:hover .band-cta, .brand-band > a:focus-visible .band-cta { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .home-hero-img, .brand-band img, .band-cta { transition: none; }
  .home-hero-img:hover { transform: none; }
  .brand-band > a:hover img { transform: none; }
  .band-cta { transform: translateY(0); }
}

/* ==========================================================================
   CLIENT OVERRIDES
   Appended rather than patched in place, so the shared design system above stays
   intact for the next client and the cascade does the work.
   ========================================================================== */

/* ---------- product container ----------
   The shipped default is a dark plinth for bare portrait vials on transparent
   backgrounds. This client ships square 1024x1024 shots with their own lit blue
   background baked in, so a dark plinth behind them reads as a mistake. Light panel,
   square ratio, small padding, and the plinth light pool switched off entirely. */
.vial {
  aspect-ratio: 1 / 1;
  padding: 3%;
  background: var(--bg-soft);
}
.vial::before { display: none; }
.vial img {
  border-radius: 10px;
  filter: drop-shadow(0 10px 20px rgba(23, 44, 69, .16));
}
a:hover .vial img, a:focus-visible .vial img,
a.vial:hover img, a.vial:focus-visible img {
  filter: drop-shadow(0 20px 30px rgba(23, 44, 69, .24)) brightness(1.03);
}
.vial-cta {
  background: linear-gradient(to top, rgba(14, 28, 46, .94) 28%, rgba(14, 28, 46, 0));
  color: #fff;
}
/* Contained square art inside a landscape hero panel, centred with room either side. */
.vial-hero { aspect-ratio: 16 / 10; }
@media (max-width: 560px) { .vial-hero { aspect-ratio: 1 / 1; } }
.vial-rail { aspect-ratio: 1 / 1; }

/* ---------- catalogue screenshots ----------
   Supplied by the client, used unedited at his direction. Wide landscape, so they sit
   in their own frame rather than the square product panel. */
.adv-catalog {
  position: relative; margin: 0 0 26px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-soft); overflow: hidden;
}
.adv-catalog > a {
  position: relative; display: block; overflow: hidden; text-decoration: none;
}
.adv-catalog img {
  width: 100%; height: auto; display: block;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.adv-catalog > a:hover img, .adv-catalog > a:focus-visible img { transform: scale(1.02); }
.adv-catalog > a:hover .band-cta, .adv-catalog > a:focus-visible .band-cta { transform: translateY(0); }
.adv-catalog .adv-figcap { padding: 11px 14px; }

/* ---------- teal corrections for values hardcoded as gold ---------- */
.adv-topbar { border-bottom-color: rgba(31, 198, 185, .3); }
.btn-ghost { border-color: rgba(165, 233, 227, .45); }
.adv-standfirst mark { background: #D6F5F1; }
.cmt-meta { color: #8595A6; }

/* Brand teal reads as a tint, not text, on white. Keep the accent tokens legible where
   the design system puts them on a light surface. */
.adv-kicker, .card-kicker { color: var(--gold-deep); }

/* The client's own gradient, teal into purple, on the primary action. */
.btn-gold {
  background: linear-gradient(90deg, var(--gold) 0%, var(--purple-deep) 100%);
}
.btn-gold:hover {
  background: linear-gradient(90deg, var(--gold-deep) 0%, #5A3BA8 100%);
}

/* Two-up variant of the trio hero, for the two vials on advertorial 2. */
.trio.duo { grid-template-columns: repeat(2, 1fr); max-width: 560px; }

/* Five advertorials, not three. Six columns so the grid lands 3-up then 2-up with both
   rows running full width, instead of leaving a hole in the second row. */
@media (min-width: 760px) {
  .card-grid { grid-template-columns: repeat(6, 1fr); }
  .card { grid-column: span 2; }
  .card:nth-child(4), .card:nth-child(5) { grid-column: span 3; }
}

/* Bottom bar: this client's CTA labels are longer than the ones the bar was sized for
   ("Browse the lab-tested range" + "Open the COA library"), and both buttons are nowrap, so
   at 375px they ran 42px past the viewport. Let them share the row and shrink instead of
   cutting the copy. Measured at 375, 390 and 414. */
@media (max-width: 719px) {
  .adv-bottombar { gap: 8px; padding: 10px 12px; }
  .bb-primary, .bb-secondary {
    flex: 1 1 0; min-width: 0; text-align: center; white-space: normal;
  }
  .bb-primary  { padding: 12px 10px; font-size: .8rem; }
  .bb-secondary { padding: 11px 10px; font-size: .74rem; }
}

/* ---------- offer pill ---------- */
.offer {
  display: inline-flex; align-items: center; gap: 8px;
  background: #E7FAF8; border: 1px solid var(--gold-3);
  color: var(--gold-deep); border-radius: 999px;
  font: 700 .78rem/1 var(--body); padding: 9px 15px; margin: 0 0 16px;
}
.offer::before { content: "%"; font: 800 .72rem/1 var(--mono); }
.adv-cta .offer { background: rgba(31, 198, 185, .16); border-color: var(--gold-3); color: var(--gold-pale); }

@media (prefers-reduced-motion: reduce) {
  .adv-catalog img { transition: none; }
  .adv-catalog > a:hover img { transform: none; }
  .adv-catalog .band-cta { transform: translateY(0); }
}