/* ---------------------------------------------------------------------------
   Cloud Sky background + frosted page.

   Loaded after each page's own <style>, so it wins on specificity ties without
   needing !important anywhere except the two places noted below.

   Layering, bottom to top:
     html background  static sky gradient — the fallback when WebGL is missing
                      or the GL context is lost, and what paints before the
                      shader's first frame so nothing flashes white
     #cloud-sky       the shader canvas, fixed to the viewport, z-index -1
     .wrap / main.co  one continuous frosted sheet over the content column
     .top / footer    their own heavier frost, because the header is sticky and
                      content scrolls underneath it
     cards            left solid, so prices, SKUs and body copy never sit on
                      moving cloud

   Nothing here creates a containing block for the fixed overlays: the age
   gate and the cart drawer are siblings of .wrap, not descendants, so the
   backdrop-filter below cannot capture them.
   --------------------------------------------------------------------------- */

html {
  background: #0075FF linear-gradient(to top, #B4D2F0 0%, #6FA8EE 42%, #0075FF 100%) fixed;
}

body {
  background: transparent !important;   /* beats the page's own body rule */
}

#cloud-sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  pointer-events: none;
}

/* ---- the frosted sheet ---- */
.wrap,
main.co {
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(24px) saturate(118%);
  backdrop-filter: blur(24px) saturate(118%);
}

/* The bar floats over raw sky, so it carries its own weight. */
.top {
  background: rgba(255, 255, 255, 0.88) !important;
  -webkit-backdrop-filter: blur(26px) saturate(118%);
  backdrop-filter: blur(26px) saturate(118%);
}

/* Bands that painted a flat page colour would hide the sheet; let it through. */
#regulatory,
#eligibility,
#documentation,
#catalog,
#enquire,
.hero-band,
.masthead,
.foot,
.toc,
.cols,
.stack,
.panels,
.navcol,
.shelf {
  background: transparent;
}

/* ---- things that stay solid ----
   Reading surfaces. A price or a residue table over drifting cloud is the one
   thing this effect must not cost us. */
.cmp,
.panel,
.viewer,
.order-sum,
.enq,
.gate,
.shot,
.drawer,
.drawer-scrim,
.agegate,
.agegate-card,
.sum,
.done,
.reroute,
.step {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.cmp,
.panel,
.viewer,
.order-sum,
.enq,
.gate,
.shot {
  background: #FFFFFF;
}

footer {
  margin-top: 26px;
  border-top: 0 !important;
  /* The notices were capped at 80ch and ran the full width of the panel,
     which on a wide screen is a very long line to read and on a phone is a
     wall of text. Centred, on a measure well inside the panel's edges. */
  padding: 30px 28px 34px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 11px;
}
footer > .foot {
  justify-content: center;
  gap: 6px 20px;
  margin-bottom: 6px;
}
footer .legal {
  max-width: 66ch;
  margin: 0 auto;
}
/* The link row closes the panel, under a rule the width of the text above. */
footer .legal:last-of-type {
  width: 100%;
  max-width: 66ch;
  margin-top: 6px;
  padding-top: 15px;
  border-top: 1px solid rgba(16, 25, 35, 0.10);
}

@media (max-width: 900px) {
  footer {
    padding: 24px 20px 28px !important;
    gap: 10px;
  }
  footer .legal { max-width: none; }
}

/* A frosted sheet needs an edge or it looks like a rendering accident. */
.wrap,
main.co {
  box-shadow: 0 0 0 1px rgba(16, 25, 35, 0.07), 0 24px 70px rgba(10, 40, 90, 0.16);
}

/* Phones: the content column is the full width, so there is no gutter and the
   sky can only read through the sheet itself. Thin it out so it does. */
@media (max-width: 760px) {
  .wrap,
  main.co {
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    backdrop-filter: blur(18px) saturate(115%);
    box-shadow: none;
  }
}

/* No backdrop-filter support (older Firefox with the flag off, some embedded
   browsers): the blur silently does nothing and the sheet would be a flat 74%
   white wash over moving cloud, which is unreadable. Go opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wrap,
  main.co { background: rgba(255, 255, 255, 0.94); }
  .top,
  footer { background: rgba(255, 255, 255, 0.97) !important; }
}

/* ===========================================================================
   Glass panels and rounded corners.

   Lives in this file because it is the one stylesheet every page already
   loads, and because it only makes sense with the sky behind it.

   Radius scale, taking its cue from the MG pills on the catalog, which are
   fully rounded (999px). Pills stay pills; everything larger gets a radius
   in proportion to it, because a 999px card is a lozenge, not a card.
   =========================================================================== */
:root {
  --r-panel: 18px;   /* cards, sections, big surfaces */
  --r-control: 10px; /* buttons, inputs, notes, small blocks */
  --r-media: 18px;   /* images, which clip to their container */
}

/* ---- the frosted page, thinned so the panels on top can read as glass ---- */
.wrap,
main.co {
  background: rgba(255, 255, 255, 0.46);
  border-radius: var(--r-panel);
  width: var(--shell-w);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: 14px;
  margin-bottom: 14px;
}

.top {
  background: rgba(255, 255, 255, 0.80) !important;
  border-radius: var(--r-panel);
}

/* ---- panels: translucent, no blur of their own ----
   They sit on .wrap, which is already a backdrop-filtered sheet, so the sky
   reaches them pre-blurred. Stacking a second backdrop-filter on each of
   seven catalog cards would multiply the most expensive paint on the page
   for an effect you cannot see. Translucency alone is what reads as glass. */
.cmp,
.panel,
.viewer,
.order-sum,
.enq,
.gate,
.shot,
.sum,
.step,
.done,
.reroute,
.trust,
.masthead,
.coa-note,
footer {
  background: rgba(255, 255, 255, 0.58) !important;
  border-radius: var(--r-panel);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 10px 28px rgba(12, 44, 96, 0.08);
}

/* Photos are opaque anyway; this just clips them to the card's corners. */
.cmp,
.cmp-media,
.shot,
.viewer {
  overflow: hidden;
}
.cmp-media,
.cmp-media img,
.shot img,
.doc img {
  border-radius: var(--r-media);
}
/* The image sits at the top of the card, so only its top corners are round. */
.cmp-media,
.cmp-media img {
  border-radius: var(--r-media) var(--r-media) 0 0;
}

/* The rotating ring has to follow the card, or it frames a square that is
   no longer there. The mask shrinks the inner radius by the ring width on
   its own, so only the outer radius is set here. */
.cmp-glow { border-radius: var(--r-panel); }

/* Boxed lists: round the container and clip the rows, so the first and last
   row follow the corner instead of poking through it. */
.nav,
.picker,
.toc,
.gate {
  overflow: hidden;
}

/* ---- controls ---- */
.nav,
.btn,
.btn-alt,
.batch-buy,
.cart-btn,
.qty,
.qty button,
.picker,
.drawer-close,
.agegate .btn,
input,
select,
textarea,
.field input,
.field select,
.field textarea,
.ruo,
.note,
.toc,
.gate-col,
.tick,
.line {
  border-radius: var(--r-control);
}

/* Already-round things stay round: pills, the MG sizes, residue dots. */
.size,
.pick,
.chip,
.lab-pill,
.navi-len,
.purity,
.disc,
.res {
  border-radius: 999px;
}
.res { border-radius: 50%; }

/* ---- fixed overlays ----
   These float over everything and carry the order total and the age gate,
   so they stay close to solid. Rounded on the edges that are not flush
   against the viewport. */
.drawer {
  background: rgba(255, 255, 255, 0.95) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: var(--r-panel) 0 0 var(--r-panel);
}
.agegate-card {
  background: rgba(255, 255, 255, 0.96) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: var(--r-panel);
}

@media (max-width: 760px) {
  /* Full-bleed column on a phone: no outer radius, nothing to round against. */
  .wrap,
  main.co {
    margin-top: 0;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.52);
  }
  .top { border-radius: 0; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wrap,
  main.co { background: rgba(255, 255, 255, 0.94); }
  .cmp, .panel, .viewer, .order-sum, .enq, .gate, .shot,
  .sum, .step, .done, .reroute, .trust, .masthead, .coa-note, footer {
    background: rgba(255, 255, 255, 0.92) !important;
  }
}

/* ===========================================================================
   Floating nav bar.

   Near-clear glass: a blurred pane with a bright rim, floating over the sky.
   The nav's links are built by assets/nav.js so every page offers the same
   menu; the static markup in each page is the no-JS fallback.

   The bar is fixed and lives outside .wrap in the markup, because .wrap is
   backdrop-filtered and a filtered ancestor would become its containing
   block and pin it to the column instead of the viewport.
   =========================================================================== */
:root {
  --nav-h: 60px;
  --nav-top: 18px;
  /* The width of the bar AND of the content column, so the two always agree. */
  --shell-w: min(1180px, calc(100% - 48px));
}

header.top {
  position: fixed !important;
  top: var(--nav-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--shell-w);
  z-index: 60;
  box-sizing: border-box;
  /* Side | mark | side. Both side tracks are 1fr so the middle one sits dead
     centre, and minmax(0, …) lets them shrink instead of pushing the mark
     off-centre. Grid tracks cannot overlap, which is the point: the mark was
     absolutely centred before and ran straight over the links at mid widths. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  min-height: var(--nav-h);
  padding: 0 22px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  transition: background 220ms ease, box-shadow 220ms ease;
}
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }

/* Push the page down past the floating bar. */
.wrap,
main.co {
  margin-top: calc(var(--nav-top) + var(--nav-h) + 18px) !important;
}

/* The mark holds its ground; the links sit right, the lab note is secondary.
   The gap before .topnav is where a 3D vector / logo mark drops in. */
.top .mark {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The home page's own rule gives .topnav `flex: 1 1 auto; justify-content:
   center`, which made it swallow the whole bar and park the links over the
   centred mark — and left no free space for the strapline's auto margin to
   push against. Both are reset here. */
.top .topnav {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: nowrap;
  flex: 0 0 auto !important;
  justify-content: flex-end;
}
.top .topnav a,
.top .lab,
.top .back,
.top .secure { font-size: 0.625rem; letter-spacing: 0.14em; white-space: nowrap; }
/* Three zones: strapline left, mark centred, links right. The mark is taken
   out of the flex flow and centred on the bar itself, so it stays dead centre
   no matter how wide the strapline or the link row happen to be. */
.top .bar-side { display: flex; align-items: center; gap: 14px; min-width: 0; }
.top .bar-left { justify-content: flex-start; }
.top .bar-right { justify-content: flex-end; }
.top .lab { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.top .secure { display: inline-flex; align-items: center; gap: 8px; }
.top .secure svg { width: 13px; height: 13px; flex: none; }
.top .back { display: none; }   /* the same destination is in the Catalog menu */
.top .mark {
  margin: 0;
  justify-self: center;
  position: relative;
  /* Decorative; only the home link inside it takes clicks. */
  pointer-events: none;
}
/* A transparent hit area over the whole mark, since the wordmark canvas is
   click-through and the text beneath it is visually hidden. */
.top .mark-home,
.top .mark.mark-link-self {
  position: absolute;
  inset: -6px -10px;
  pointer-events: auto;
  border-radius: 999px;
  cursor: pointer;
}
.top .mark.mark-link-self { position: relative; inset: auto; display: block; }
.top .mark:hover .mark-vector { opacity: 1; }
.top .mark-vector { transition: opacity 200ms ease; }
@media (prefers-reduced-motion: reduce) { .top .mark-vector { transition: none; } }
.top .mark-home:focus-visible,
.top .mark.mark-link-self:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}
.top .mark a { pointer-events: auto; }
.top .spacer { flex: 1; }
.top .cart-btn, .top .btn-top { margin-left: 2px; }
.top .topnav + .cart-btn, .top .topnav + .btn-top { margin-left: 14px; }

/* Each link gets a pill on hover and on the current page, same family as
   the MG buttons. */
.top .topnav > a {
  font-family: var(--mono);
  text-transform: uppercase;
}
.top .topnav a {
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease;
}
@media (prefers-reduced-motion: reduce) { .top .topnav a { transition: none; } }

.top .btn-top,
.top .cart-btn {
  border-radius: 999px !important;
  padding: 8px 15px !important;
  white-space: nowrap;
}

/* ---------------- Tint: near-clear with a rim ----------------
   Almost no fill — a blurred pane with a bright edge, so the clouds keep
   moving through it. Legibility would otherwise swing with whatever cloud is
   passing, so the type sits on its own faint gradient rather than on raw sky,
   and carries a soft shadow. */
.top {
  background: rgba(255, 255, 255, 0.10) !important;
  background-image: linear-gradient(180deg, rgba(8, 28, 58, 0.26), rgba(8, 28, 58, 0.10)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 20px 50px rgba(6, 26, 56, 0.22);
  color: #fff;
}
.top .mark { color: #fff; text-shadow: 0 1px 10px rgba(6, 26, 56, 0.5); }
.top .mark span { color: rgba(255, 255, 255, 0.70); font-weight: 400; }
.top .topnav a,
.top .lab,
.top .secure,
.top .back,
.top .navbtn {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(6, 26, 56, 0.55);
}
.top .topnav a:hover,
.top .navbtn:hover { color: #fff; background: rgba(255, 255, 255, 0.18); }
.top .topnav a[aria-current="page"],
.top .navbtn[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.22); }
.top .btn-top {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
}
.top .cart-btn {
  color: #0A1A30 !important; background: #fff !important; border-color: #fff !important;
  text-shadow: none;
}

@media (max-width: 1060px) {
  :root { --nav-top: 10px; --nav-h: 52px; --shell-w: calc(100% - 20px); }
  .top .mark-vector { width: 132px; height: 26px; }
  header.top { column-gap: 12px; padding: 0 14px !important; }
  .top .lab { display: none; }
  .top .topnav { gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .top .topnav::-webkit-scrollbar { display: none; }
  .top .topnav a { padding: 6px 9px; }
}

/* ---------------- Dropdowns and the mobile menu ---------------- */
.top .navitem { position: relative; display: flex; align-items: center; }

.top .navbtn {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
@media (prefers-reduced-motion: reduce) { .top .navbtn { transition: none; } }
.top .navbtn .caret {
  width: 7px; height: 7px; flex: none;
  border-right: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}
.top .navbtn[aria-expanded="true"] .caret { transform: translateY(1px) rotate(225deg); }
@media (prefers-reduced-motion: reduce) { .top .navbtn .caret { transition: none; } }

/* The panel is the bar's own material, one step more solid so the links in
   it are readable over whatever happens to be behind. */
.top .menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 232px;
  padding: 9px;
  border-radius: 18px;
  background: rgba(9, 24, 48, 0.93);
  background-image: linear-gradient(180deg, rgba(26, 52, 92, 0.55), rgba(9, 24, 48, 0.25));
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 26px 60px rgba(6, 26, 56, 0.4);
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 170ms ease, transform 170ms ease, visibility 0s linear 170ms;
}
.top .navitem.open .menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 170ms ease, transform 170ms ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) { .top .menu { transition: none; } }

.top .menu a {
  display: block;
  padding: 10px 13px;
  border-radius: 11px;
  font-family: var(--body);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: none;
  white-space: nowrap;
}
.top .menu a:hover,
.top .menu a:focus-visible { background: rgba(255, 255, 255, 0.16); color: #fff; }
.top .menu a .sub {
  display: block;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.52);
  margin-top: 2px;
  letter-spacing: 0.01em;
}
.top .menu a[aria-current="page"] { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* The bar's own hairline divider, used between groups in a panel. */
.top .menu hr { border: 0; height: 1px; background: rgba(255, 255, 255, 0.16); margin: 6px 9px; }

/* ---- the slot for the wordmark / 3D vector ----
   Sized to the bar's cap height so a canvas or an SVG can drop straight in
   without changing the bar's geometry. Empty until the mark is wired up. */
.top .mark-vector {
  display: none;              /* flips to block once a mark is present */
  pointer-events: none;       /* never intercepts a click meant for the bar */
  flex: none;
  width: 200px;
  height: 34px;
  position: relative;
}
.top .mark-vector:not(:empty) { display: block; }
.top .mark-vector > canvas,
.top .mark-vector > svg,
.top .mark-vector > img { display: block; width: 100%; height: 100%; }
/* The vector mark spells out the same words, so the text version goes away
   rather than sitting beside a duplicate of itself. It stays in the markup
   for screen readers and for the case where WebGL never starts. */
.top .mark:has(.mark-vector:not(:empty)) .mark-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------- Mobile: one menu button, one panel ---------------- */
.top .burger { display: none; }

@media (max-width: 1060px) {
  .top .topnav { display: none; }
  .top .lab { display: none; }
  .top .btn-top { display: none !important; }   /* moves into the menu panel;
       beats the page's own rule, which turns it back on below 1000px */
  /* Two zones now: mark left, menu right. */
  header.top { grid-template-columns: auto minmax(0, 1fr); }
  .top .bar-left { display: none; }
  .top .mark { justify-self: start; grid-column: 1; }
  .top .bar-right { grid-column: 2; }
  .top .burger {
    display: inline-flex; margin-left: auto; align-items: center; gap: 9px;
  }
  .top .navitem.full { position: static; }
  .top .navitem.full .menu {
    left: 0; right: 0; transform: translateY(-6px);
    width: auto; min-width: 0;
    max-height: calc(100vh - var(--nav-top) - var(--nav-h) - 28px);
    overflow-y: auto;
  }
  .top .navitem.full.open .menu { transform: translateY(0); }
  .top .menu a { padding: 12px 14px; font-size: 0.875rem; }
}

/* ===========================================================================
   Age / research-use gate.

   These lived inline on the home page, which was the only page that showed
   the gate. It now runs everywhere from assets/agegate.js, so its styles —
   and the .consent row and .btn-alt it relies on, which four of the five
   pages never defined — have to be here too.
   =========================================================================== */
.agegate {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(16, 25, 35, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.agegate-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  max-width: 520px;
  width: 100%;
  padding: 32px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 24px 70px rgba(16, 25, 35, 0.28);
  /* Taller than the screen on a small phone in landscape: scroll the card
     rather than clipping the buttons off the bottom. */
  margin: auto;
}
.agegate-card h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.012em;
  font-size: clamp(1.35rem, 3.6vw, 1.75rem);
  max-width: 22ch;
  margin: 0;
}
.agegate-card > p { margin: 0; font-size: 0.9375rem; line-height: 1.58; color: var(--muted); }
.agegate-card > .lab {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.agegate .consent { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.agegate .consent input {
  width: 16px; height: 16px; margin-top: 3px; flex: 0 0 16px; accent-color: var(--accent);
}
.agegate .consent span { font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.agegate-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
/* Touch: the gate's two buttons were 41px tall, under the 44px that iOS and
   Android both treat as the minimum comfortable target. They are the only
   way past a blocking dialog, so they get the height. */
@media (pointer: coarse) {
  .agegate .btn { min-height: 46px; padding-top: 0; padding-bottom: 0; }
  .agegate .consent input { width: 20px; height: 20px; flex-basis: 20px; }
}
.agegate .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.agegate-note {
  font-size: 0.75rem; line-height: 1.55; color: var(--faint);
  border-top: 1px solid var(--rule-soft); padding-top: 14px; margin: 4px 0 0;
}
.agegate-note a { color: var(--accent); }

/* The gate is the one element that must not be translucent: it is a legal
   condition of entry, read once, over a moving sky. */
.agegate-card { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* .btn and .btn-alt exist on the home page only; the gate needs both
   wherever it appears. Scoped to the gate so no page's own buttons change. */
.agegate .btn {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; cursor: pointer;
  padding: 13px 20px; border-radius: 999px;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.agegate .btn:hover { background: var(--accent); border-color: var(--accent); }
.agegate .btn.btn-alt { background: transparent; color: var(--ink); border-color: var(--rule); }
.agegate .btn.btn-alt:hover { background: var(--raised); border-color: var(--faint); color: var(--ink); }