/* 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. */

/* Pepsynth Labs palette, read off https://thepepsynth.com on 2026-09-15.
   The --gold-* names are kept so nothing downstream has to change; on this client
   they carry the brand blue instead. #2f63c4, #1D395F, #061331, #dce3ec and #eef3f8
   are the store's own values. */
:root {
  --navy: #0a1131;
  --navy-deep: #061331;
  --navy-2: #1D395F;
  --navy-3: #2f63c4;
  --ink: #0a1131;
  --ink-2: #4a5468;
  --gold: #2f63c4;
  --gold-2: #4a7fd6;
  --gold-3: #6f9beb;
  --gold-deep: #1d4a9e;
  --gold-pale: #cfe0ff;
  --bg: #ffffff;
  --bg-soft: #eef3f8;
  --line: #dce3ec;
  --disp: 'Montserrat', system-ui, -apple-system, sans-serif;
  --body: 'Rubik', 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(111,155,235,.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(6,19,49,.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(207,224,255,.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: #ffeda0; 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: #8a93a8; }

.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(207,224,255,.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(6,19,49,.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(111,155,235,.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(6,19,49,.95) 28%, rgba(6,19,49,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(207,224,255,.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(6,19,49,.94) 26%, rgba(6,19,49,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); }
}

/* ---------- Pepsynth geometry override ----------
   The shipped rules assume 455x1000 portrait vials on a bare background. This client's
   catalogue shots are 1254x1254 with the lab scene already inside the frame, so the
   image IS the plinth. Square container, zero padding, object-fit stays contain, so
   nothing is cropped and the vial never touches an edge it was not already sitting in. */
.vial { aspect-ratio: 1 / 1; padding: 0; background: var(--navy-deep); }
.vial-hero { aspect-ratio: 1 / 1; }
.vial-rail { aspect-ratio: 1 / 1; }
.trio .vial { aspect-ratio: 1 / 1; }
@media (max-width: 560px) { .vial-hero { aspect-ratio: 1 / 1; } }

/* A 1:1 hero at full column width is overbearing, so the figure caps its own width
   and centres. The caption bar still spans the figure, which reads as a plate. */
.adv-hero { max-width: 560px; margin-left: auto; margin-right: auto; }

/* The supplied catalogue screenshots are wide and text-heavy. Give them room and a
   light mat rather than the dark plinth, which would fight the white card background. */
.brand-band { background: #fff; }
.brand-band img { width: 100%; height: auto; }

/* Live coupon pill, used in the CTA blocks. */
.adv-coupon {
  display: inline-block; margin-top: 12px;
  font: 600 .76rem/1 var(--mono); letter-spacing: .06em;
  color: var(--gold-deep); background: var(--bg-soft);
  border: 1px dashed var(--gold-3); border-radius: 999px; padding: 9px 14px;
}
.band.dark .adv-coupon, .home-hero .adv-coupon {
  color: var(--gold-pale); background: rgba(47,99,196,.16); border-color: rgba(111,155,235,.5);
}

/* Six checks, not eight, so three columns divides evenly instead of leaving orphans. */
@media (min-width: 980px) { .eight-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- bridge landing page ---------- */
/* ================= bridge landing page =================
   Every element here funnels to one destination. Built on the existing card and
   band components so it adds no new layout system. */

.lp-hero {
  background: radial-gradient(120% 90% at 50% 0%, #14264d 0%, var(--navy-deep) 68%);
  color: var(--bg-soft); padding: 54px 0 58px; text-align: center;
}
.lp-hero .adv-kicker { color: var(--gold-3); margin: 0 0 14px; }
.lp-hero h1 {
  font-family: var(--disp); font-weight: 600; color: #fff;
  font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; margin: 0 0 18px;
}
.lp-hero h1 b { color: var(--gold-3); font-weight: 800; }
.lp-hero .lp-dek { color: #b9c0d0; font-size: 1.02rem; max-width: 640px; margin: 0 auto 30px; }

/* The banner CTA is the primary action on the page, so it is deliberately oversized. */
.lp-banner-cta {
  display: inline-block; max-width: 100%;
  background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%);
  color: #fff; text-decoration: none;
  font: 800 clamp(.98rem, 2.6vw, 1.22rem)/1.25 var(--body); letter-spacing: .01em;
  padding: 22px 40px; border-radius: 999px;
  box-shadow: 0 16px 38px rgba(47,99,196,.42);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.lp-banner-cta:hover, .lp-banner-cta:focus-visible {
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 22px 48px rgba(47,99,196,.52);
}

/* ---- age confirmation ---- */
.lp-age {
  max-width: 660px; margin: 46px auto 10px; text-align: center;
  background: var(--bg-soft); border: 2px solid var(--gold-3);
  border-radius: 16px; padding: 32px 24px 26px;
}
.lp-age-kicker {
  font: 700 .68rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 12px;
}
.lp-age h2 {
  font-family: var(--disp); font-size: clamp(1.3rem, 3.6vw, 1.7rem);
  color: var(--navy-deep); margin: 0 0 10px; font-weight: 700; line-height: 1.22;
}
.lp-age p { color: var(--ink-2); font-size: .94rem; max-width: 460px; margin: 0 auto 20px; }
.lp-age-cta {
  display: inline-block; background: var(--gold); color: #fff; text-decoration: none;
  font: 700 1rem/1 var(--body); padding: 18px 34px; border-radius: 999px;
}
.lp-age-cta:hover, .lp-age-cta:focus-visible { background: var(--gold-deep); }
.lp-age .lp-age-exit { margin: 16px auto 0; max-width: none; }
.lp-age-exit a { color: var(--ink-2); font-size: .8rem; text-decoration: underline; }
.lp-age-exit a:hover { color: var(--navy-deep); }

/* ---- five card grid ---- */
.lp-grid { display: grid; gap: 20px; margin-bottom: 8px; }
@media (min-width: 620px)  { .lp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lp-grid { grid-template-columns: repeat(3, 1fr); } }
/* spans inside the shared .card need explicit block flow */
.lp-grid .card-kicker, .lp-grid .card-dek, .lp-grid .card-more, .lp-grid .lp-card-title { display: block; }
.lp-card-title {
  font-family: var(--disp); font-size: 1.05rem; line-height: 1.28;
  color: var(--navy-deep); margin: 0 0 9px; font-weight: 700;
}
.lp-grid .card-dek { flex: 1; }

.lp-band { margin-top: 34px; }

/* Landing cards are teasers, not article hero art. A 3/4 portrait box made each card
   630px tall, which pushes the grid off the fold on a page whose whole job is the click. */
.lp-grid .card-img.vial { aspect-ratio: 4 / 3; padding: 5% 6%; }
.lp-grid .card-body { padding: 16px 16px 18px; }

/* The body reserves --bar-bottom so content is never hidden behind the fixed bar, but the
   bar itself renders shorter than that reserve. The leftover was bare white body background
   sitting under and above the bar. Push the footer's own dark block through the reserved
   space, then cancel the height it adds so the document does not grow. Both sides read from
   --bar-bottom, so the reserve and the fill cannot drift apart. */
.adv-foot {
  padding-bottom: calc(30px + var(--bar-bottom));
  margin-bottom: calc(var(--bar-bottom) * -1);
}

/* The sticky bar is position:fixed, so when its two buttons outgrow the viewport the
   document scrollWidth does NOT change and an overflow check reports clean while the
   second button is physically off screen. Measured at 320px: right edge 334px, 14px past
   the edge. Tighten the bar below 420px so both buttons stay inside the smallest phones. */
@media (max-width: 420px) {
  .adv-bottombar { gap: 8px; padding: 10px 10px; }
  .bb-primary, .bb-secondary { min-width: 0; }
  .bb-primary { padding: 13px 14px; font-size: .78rem; }
  .bb-secondary { padding: 12px 12px; font-size: .72rem; }
}