/*
 * brand.css — Limitless Health Labs (dark-surface brand).
 * Loads after compiled.css; these --brand-* win by cascade and re-skin the base.
 * Per-brand identity lives HERE; tokens.css defaults are the unconfigured fallback.
 *
 * Dark-theme convention note:
 * M3 says "99 lightest -> 0 darkest". In a dark brand the absolute lightness
 * flips, but the RELATIVE semantic holds — 99 is still the lightest of the
 * neutrals. "Lightest" here is a slightly-lighter-dark used for raised cards
 * that pop UP out of the deeper-dark base. Body ink at 30 is light because
 * ink-on-dark is light.
 *
 * Regenerate the saturated brand ladders (NOT the neutrals — those are hand-tuned):
 *   php bin/make-palette.php --primary=#5fe3d9 --accent=#4a9eff
 */
:root {
  /* PRIMARY — cyan (signature brand mark) */
  --brand-primary-deep:   45 212 191;   /* #2dd4bf — teal (deepest cyan) */
  --brand-primary:        95 227 217;   /* #5fe3d9 — signature aqua */
  --brand-primary-soft:  125 240 229;   /* #7df0e5 — lighter aqua */
  --brand-primary-tint:   23  42  45;   /* cyan-tinted dark — primary containers on dark surface */
  --brand-primary-wash:   18  30  34;   /* very subtle cyan-tinted dark — primary washes */

  /* ACCENT — blue (gradient endpoint, secondary CTAs) */
  --brand-accent-700:     61 130 209;
  --brand-accent-600:     68 145 235;
  --brand-accent:         74 158 255;   /* #4a9eff — signature blue */
  --brand-accent-400:    114 179 255;
  --brand-accent-300:    150 199 255;
  --brand-accent-200:    186 218 255;
  --brand-accent-100:     20  35  58;   /* blue-tinted dark — secondary containers */
  --brand-accent-50:      14  26  44;   /* very subtle blue-tinted dark */

  /* NEUTRAL — dark-first, deep + blue-leaning (B > G dominance).
     M3 numeric (99 lightest -> 0 darkest) preserved semantically. */
  --brand-neutral-99:     18  24  38;   /* raised — popping cards on dark base */
  --brand-neutral-98:     10  14  24;   /* default surface (cards) */
  --brand-neutral-96:      6  10  20;   /* surface-base — body / hero background */
  --brand-neutral-94:      4   7  16;   /* sunken */
  --brand-neutral-90:      2   4  12;   /* strong — deepest near-black w/ blue tint */
  --brand-neutral-50:     94 108 130;   /* subtle ink — blue-grey */
  --brand-neutral-40:    150 168 192;   /* muted ink */
  --brand-neutral-30:    240 244 252;   /* body ink, light w/ blue cast */
  --brand-neutral-0:     255 255 255;   /* brightest ink */

  /* BORDER — hairline divider, blue-leaning */
  --brand-border:         20  28  44;

  /* TYPE — Sora (self-hosted variable font; see fonts.css) */
  --brand-font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand-font-body:    "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* SEMANTIC TONES — Limitless's brand-tuned roles.
     Success uses the brand cyan (peptides ≈ wellness, cyan reads as "good")
     instead of generic green. Error uses pink (#f472b6) rather than red —
     warmer, on-brand for a health-positive store, less alarming. Warning
     stays amber-tinted since blue/cyan can't carry "caution" semantics. */
  --brand-success:        95 227 217;  /* #5fe3d9 — matches --brand-primary */
  --brand-error:         244 114 182;  /* #f472b6 — pink-400 */
  --brand-error-soft:     76  24  56;  /* dark pink-tinted wash */
  --brand-error-strong:  157  23 100;  /* pink-800 */
  --brand-warning:       250 204  21;  /* #facc15 — yellow-400 */

  /* SURFACE INVERSE — on dark brands, brand-primary is a bright colour so the
     default surface-inverse (ref-primary-20 → brand-primary) renders cyan.
     Override to point at the deepest neutral so "inverse" means dark-on-dark. */
  --color-surface-inverse:  var(--brand-neutral-90);
  --color-inverse-surface:  var(--brand-neutral-90);

  /* GRADIENTS — limitless's signature cyan -> blue diagonal is the brand mark.
     -primary   = the brand mark (always cyan -> blue, 135deg diagonal)
     -secondary = vertical surface fade (mirrors limitless --gradient-bg-footer)
     -accent    = horizontal variant of -primary, for moving / animated elements */
  --brand-gradient-primary:   linear-gradient(135deg, #5fe3d9 0%, #4a9eff 100%);
  --brand-gradient-secondary: linear-gradient(to bottom, rgb(var(--brand-neutral-94)) 0%, rgb(var(--brand-neutral-90)) 100%);
  --brand-gradient-accent:    linear-gradient(90deg, #5fe3d9 0%, #4a9eff 100%);
}


/* ─── Self-hosted Sora variable font — graduated from fonts.css into the fork zone ─── */
/* One variable file per subset covers weights 100-800. Paired with the --brand-font-* */
/* token override above, this fully owns Limitless's type without touching base fonts.css. */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(../fonts/sora-latin.woff2) format('woff2-variations'),
       url(../fonts/sora-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(../fonts/sora-latin-ext.woff2) format('woff2-variations'),
       url(../fonts/sora-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Child overrides of core defaults (were base-file edits in the fork) ── */

/* tokens.css carried: form fields sit sunken, not raised. */
:root {
  --field-container-color: rgb(var(--color-surface-sunken));
}

/* footer.php carried: strong surface instead of inverse. Element+class
 * (0,1,1) outranks the .bg-surface-inverse utility (0,1,0) — no !important. */
footer.site-footer {
  background-color: rgb(var(--color-surface-strong));
}


/* ── Hero: full-bleed background instead of the split media column ───────
 * hero_split falls back to mezzo_default('image') whenever its own image
 * field is empty, so emptying the field substitutes the theme default rather
 * than removing the panel. Suppress the column instead and let the section
 * background carry the art. Add `hero-bg-only` to the section's custom
 * classes to opt in. */
.mz-hero-split.hero-bg-only > .relative.z-10 {
  grid-template-columns: 1fr;
}

.mz-hero-split.hero-bg-only > .relative.z-10 > div:last-child {
  display: none;
}

/* The copy now sits on artwork, so hold it clear of the vial on wide screens. */
@media (min-width: 1024px) {
  .mz-hero-split.hero-bg-only > .relative.z-10 > div:first-child {
    max-width: 34rem;
  }
}

/* The subject sits right of centre on a 2560x1187 plate, so bg-cover at phone
 * width crops it out entirely and the hero reads as an empty gradient. 68%
 * lands the vial against the right edge with the whole of it in frame;
 * `right` overshoots and pushes it half off the left.
 *
 * Anchoring it there puts the copy over the artwork, so the same query adds a
 * left-to-right scrim: the text column goes dark, the vial stays lit. The
 * section's own bg_overlay is flat and would dim both. */
@media (max-width: 767px) {
  .mz-hero-split.hero-bg-only .bg-cover.bg-center {
    background-position: 68% center;
  }

  .mz-hero-split.hero-bg-only > [aria-hidden="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      rgba(8, 11, 16, 0.85) 0%,
      rgba(8, 11, 16, 0.6) 42%,
      rgba(8, 11, 16, 0.1) 78%,
      rgba(8, 11, 16, 0) 100%
    );
  }
}


/* ── Header icon tooltips ────────────────────────────────────────────────
 * The three header controls are icon-only, so the label has to arrive on
 * hover. A native `title` takes about a second and draws OS chrome; this
 * lands straight away in brand type. Add `mz-tip` plus `data-mz-tip` to the
 * control. Pointer events stay off so the tip never eats the click, and it
 * is suppressed on touch, where hover does not exist. */
.mz-tip {
  position: relative;
}

.mz-tip::after {
  content: attr(data-mz-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  z-index: 60;
  padding: 0.3125rem 0.5625rem;
  border-radius: 0.375rem;
  /* Fixed near-black, not --color-ink: this brand's ink is a light tone, so
   * the token gave white-on-pale. The tip has to stay legible over the dark
   * hero and the light header alike, so its own surface is always dark. */
  background-color: #0b0e13;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 0.625rem;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-0.2rem);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.mz-tip:hover::after,
.mz-tip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Hover state: the brand gradient on the glyph itself, plus a wash of the
 * same gradient behind it. A CSS gradient cannot paint an SVG stroke, so the
 * stroke points at the #mz-icon-grad paint server header.php emits once. */
.mz-tip {
  background-image: linear-gradient(135deg, rgba(95, 227, 217, 0), rgba(74, 158, 255, 0));
  transition: background-color 0.18s ease, background-image 0.18s ease;
}

.mz-tip:hover,
.mz-tip:focus-visible {
  background-image: linear-gradient(135deg, rgba(95, 227, 217, 0.16), rgba(74, 158, 255, 0.16));
}

.mz-tip:hover svg,
.mz-tip:focus-visible svg {
  stroke: url(#mz-icon-grad);
  transition: stroke 0.18s ease;
}

@media (hover: none) {
  .mz-tip::after {
    display: none;
  }
}


/* ── Responsive-direction rescue ─────────────────────────────────────────
 * child-compiled.css loads after core's compiled.css and ships an
 * unconditional `.flex-col`. A media query adds no specificity, so that flat
 * rule beats core's `.md\:flex-row` and every core layout that stacks on
 * mobile and rows out at md stays stacked at all widths — the footer among
 * them. Raising the specificity restores the pair.
 *
 * This is a plaster. The child Tailwind build collides with ~43 of core's md:
 * utilities the same way; the fix is to regenerate child-compiled.css against
 * the same content scan as core, or to stop shipping a second build. */
@media (min-width: 768px) {
  .flex-col.md\:flex-row {
    flex-direction: row;
  }
}

/* Footer legal links. core footer.php renders the footer_legal menu in the
 * copyright bar; the list inherits its colour from that bar, so all this adds
 * is the hover lift. Move to core's build when compiled.css is next rebuilt. */
.mezzo-footer-legal a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.mezzo-footer-legal a:hover,
.mezzo-footer-legal a:focus-visible {
  color: #fff;
}


/* ── Shop by goal: stacked landscape cards on phones ─────────────────────
 * The core grid is 2-up at every width below md, so on a phone the cards are
 * two narrow 4:5 portraits per row and the artwork is unreadable. One column
 * of 2:1 cards gives each goal a legible image and a full-width tap target. */
@media (max-width: 639px) {
  .mz-shop-by-goal .grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .mz-shop-by-goal .grid > a {
    aspect-ratio: 2 / 1;
  }
}

/* ── Feature strip: icon beside the copy on phones ───────────────────────
 * Stacked icon-over-title-over-body makes each of the four items four lines
 * tall, so the strip runs most of a screen. Moving the icon into its own
 * column halves the height without shrinking any type. */
@media (max-width: 767px) {
  .mz-feature-strip .grid {
    gap: 1.25rem;
  }

  .mz-feature-strip .grid > div {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.875rem;
    row-gap: 0.125rem;
    align-items: start;
  }

  .mz-feature-strip .grid > div > span:first-child {
    grid-row: 1 / span 2;
    margin-top: 0.125rem;
    margin-bottom: 0;
  }

  .mz-feature-strip .grid > div > span:first-child svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* ── CTA band ────────────────────────────────────────────────────────────
 * The band was murky for two reasons, and my first attempt fixed the wrong
 * one. The cyan-circles pattern covers the whole band at 0.6 opacity with
 * saturate(0.2), which greys out everything beneath it; and white headline
 * text sits near 1.6:1 against the aqua end of the brand gradient.
 *
 * Deepening the gradient solved the contrast and made the murk worse. The
 * band should be the same bright pair the hero H1 is set in. So: keep the
 * gradient bright and flip the text to ink instead, which clears 13:1 on the
 * aqua end and 8.6:1 on the blue.
 *
 * The pattern is replaced rather than dimmed. It was a 400px tiled PNG —
 * soft at 2x, and a raster request for what is a line drawing. This is a
 * true honeycomb: a pointy-top hexagon of circumradius 20, so the tile is
 * sqrt(3)*20 wide by 3*20 tall, with hexes centred on the tile corners and
 * one on the offset row. The hexes that overrun the viewBox are completed
 * by the neighbouring tile, which is what makes it seamless.
 *
 * Note it is hexagon OUTLINES only. The widely copied "hexagons" pattern
 * adds a Y inside each cell, and that reads as stacked isometric cubes
 * rather than a honeycomb. A mask fades it toward the edges so it stays
 * texture rather than wallpaper. */
.mz-cta-band .has-pattern-cyan-circles {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234.64%22%20height%3D%2260%22%20viewBox%3D%220%200%2034.64%2060%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%20stroke-opacity%3D%220.32%22%3E%3Cpath%20d%3D%22M0.00%20-20.00%20L17.32%20-10.00%20L17.32%2010.00%20L0.00%2020.00%20L-17.32%2010.00%20L-17.32%20-10.00%20Z%22%2F%3E%3Cpath%20d%3D%22M34.64%20-20.00%20L51.96%20-10.00%20L51.96%2010.00%20L34.64%2020.00%20L17.32%2010.00%20L17.32%20-10.00%20Z%22%2F%3E%3Cpath%20d%3D%22M17.32%2010.00%20L34.64%2020.00%20L34.64%2040.00%20L17.32%2050.00%20L0.00%2040.00%20L0.00%2020.00%20Z%22%2F%3E%3Cpath%20d%3D%22M0.00%2040.00%20L17.32%2050.00%20L17.32%2070.00%20L0.00%2080.00%20L-17.32%2070.00%20L-17.32%2050.00%20Z%22%2F%3E%3Cpath%20d%3D%22M34.64%2040.00%20L51.96%2050.00%20L51.96%2070.00%20L34.64%2080.00%20L17.32%2070.00%20L17.32%2050.00%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 34.64px 60px;
  background-repeat: repeat;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 50%, #000 40%, transparent 85%);
  mask-image: radial-gradient(130% 100% at 50% 50%, #000 40%, transparent 85%);
}

/* section_header lands on white here, and the heading also carries
 * bg-clip-text + an INLINE background-image for the gradient-text treatment.
 * Forcing the text opaque stops the gradient being clipped to the glyphs, so
 * it paints as a rectangle behind the words. The inline style outranks a
 * plain `background: none`, hence !important on the image specifically. */
.mz-cta-band h2 {
  color: #07131c;
  -webkit-text-fill-color: #07131c;
  background-image: none !important;
}

.mz-cta-band .btn--primary {
  background: #07131c;
  border-color: #07131c;
  color: #eaf6ff;
}

.mz-cta-band .btn--primary:hover {
  background: #0f2436;
  border-color: #0f2436;
}


/* ── Pagination: no pill around the whole list ───────────────────────────
 * paginate_links() puts class="page-numbers" on the UL as well as on each
 * link, so core's unqualified .page-numbers pill draws a second box round
 * the entire pager. Core is fixed at source (li-qualified), but compiled.css
 * has not been rebuilt, so neutralise it on the UL here. Drop this block
 * once core's build ships. */
.mezzo-shop .woocommerce-pagination ul.page-numbers {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
}


/* ── Page transitions ────────────────────────────────────────────────────
 * Cross-document view transitions: the browser crossfades between two full
 * page loads. No router, no AJAX, no re-running Woo fragments or Alpine on
 * every view. Browsers without it navigate exactly as before. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The header is fixed and identical between pages, so crossfading it just
 * makes it flicker. Give it its own name and it stays put across the swap. */
.site-header {
  view-transition-name: mz-header;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ── Navigation loader ───────────────────────────────────────────────────
 * Only appears when a navigation takes longer than the eye forgives (JS
 * holds it back 220ms), so a fast page never flashes it. */
.mz-nav-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(8 11 16 / 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s ease;
  /* Never eat a click: if JS ever leaves this up, the page underneath still
   * works. */
  pointer-events: none;
}

.mz-nav-loader[hidden] {
  display: none;
}

.mz-nav-loader.is-on {
  opacity: 1;
}

.mz-nav-loader__mark {
  width: min(148px, 40vw);
  color: #fff;
}

.mz-nav-loader__mark svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The overlay itself must not be carried across a view transition, or it
 * lingers over the incoming page. */
.mz-nav-loader {
  view-transition-name: none;
}


/* ── Logomark animation ──────────────────────────────────────────────────
 * These rules live here, not inside the SVG. An inlined SVG's <style> is
 * just another document stylesheet: two inlined copies would ship the rules
 * twice, and a bare `svg { }` selector in one would restyle every other SVG
 * on the page. Keeping it here also lets the animation be gated per context.
 *
 * The wave travels dot to dot in figure-8 order via a negative per-dot
 * delay, so about five dots are lit at once and it reads as a comet rather
 * than a strobe. The --i index is baked into each circle at build time. */
.mzlm circle {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  /* The wave's baseline is 0.45 but an idle mark sits at full strength, and
     a dot caught mid-pulse is scaled up. When the animation stops applying
     both revert at once; transitioning that reversion is what carries the
     circles home instead of teleporting them. This is the second half of
     the hover wind-down in nav-loader.js, so the durations are paired. */
  transition: opacity 0.42s ease-out, transform 0.42s ease-out;
}

@keyframes mzlm-travel {
  0%   { opacity: 0.45; transform: scale(1); }
  6%   { opacity: 1;    transform: scale(1.28); }
  24%  { opacity: 0.45; transform: scale(1); }
  100% { opacity: 0.45; transform: scale(1); }
}

/* Opt-in only. A logo that pulses forever in a sticky header is noise, so
 * the mark sits still and moves when there is a reason to: pointing at it,
 * the first page of a visit (JS adds .is-playing for one cycle), or an
 * actual wait. */
.mzlm.is-playing circle,
.mz-logo:hover .mzlm circle,
.mz-logo:focus-visible .mzlm circle,
.mz-footer-brand:hover .mzlm circle,
.mz-footer-brand:focus-visible .mzlm circle,
.mz-nav-loader .mzlm circle {
  animation: mzlm-travel 2.4s linear infinite;
  animation-delay: calc(var(--i) * -0.1043s);
}

@media (prefers-reduced-motion: reduce) {
  .mzlm circle {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Header lockup: the inlined SVG scales to the wrapper's height. */
.mz-logo__mark {
  display: block;
}

.mz-logo__mark svg {
  display: block;
  height: 100%;
  width: auto;
}


/* ── Form field baseline, theme-wide ─────────────────────────────────────
 * Any input nothing else styles falls back to the browser default: white
 * fill, a couple of pixels of padding and an orange focus ring, which on a
 * dark surface looks like a bug. The theme already defines --field-* tokens
 * for this; they were just never applied to bare inputs.
 *
 * Wrapped in :where() so the whole block carries ZERO specificity. Anything
 * that already styles a field — Woo blocks, FluentForms, core's own form
 * CSS, a single utility class — beats this outright without needing
 * !important anywhere. It only fills the gap. */
:where(input[type="text"],
       input[type="email"],
       input[type="tel"],
       input[type="url"],
       input[type="number"],
       input[type="search"],
       input[type="password"],
       input[type="date"],
       textarea,
       select) {
  padding: 0.75rem 1rem;
  border: 1px solid rgb(var(--color-line));
  border-radius: var(--field-border-radius, 0.5rem);
  background-color: rgb(var(--color-surface-raised));
  color: rgb(var(--color-ink));
  font: inherit;
  line-height: 1.45;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:where(textarea) {
  min-height: 7rem;
  resize: vertical;
}

:where(input, textarea)::placeholder {
  color: rgb(var(--color-subtle));
  opacity: 1;
}

:where(input[type="text"],
       input[type="email"],
       input[type="tel"],
       input[type="url"],
       input[type="number"],
       input[type="search"],
       input[type="password"],
       textarea,
       select):focus {
  outline: none;
  border-color: rgb(var(--color-primary));
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.25);
}

/* Chrome paints autofilled fields a fixed pale yellow and ignores
 * background-color. The inset shadow trick is the only way to repaint it. */
:where(input):-webkit-autofill,
:where(input):-webkit-autofill:hover,
:where(input):-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(var(--color-ink));
  -webkit-box-shadow: 0 0 0 40rem rgb(var(--color-surface-raised)) inset;
  caret-color: rgb(var(--color-ink));
}


/* ─── Age gate ───────────────────────────────────────────────────────────
   Positioning and the hide-when-verified rule live in the inlined boot
   style so they apply before this file has loaded; everything below is
   presentation only. */

.mz-agegate {
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgb(var(--brand-neutral-90) / 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.mz-agegate__panel {
  width: min(30rem, 100%);
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  padding: 2.25rem 2rem 1.75rem;
  border: 1px solid rgb(var(--color-line));
  border-radius: 1rem;
  background: rgb(var(--color-surface-raised));
  box-shadow: 0 32px 80px -24px rgb(0 0 0 / 0.75);
  text-align: center;
}

/* The mark is the only colour above the fold, so it carries the gradient
   rather than sitting flat. */
.mz-agegate__mark {
  display: block;
  width: 3.25rem;
  margin: 0 auto 1.25rem;
  color: rgb(var(--color-primary));
}

.mz-agegate__mark svg { display: block; width: 100%; height: auto; }

.mz-agegate__title {
  margin: 0 0 0.875rem;
  font-family: var(--brand-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgb(var(--color-ink));
}

.mz-agegate__copy { margin: 0 0 1.5rem; }

.mz-agegate__copy p {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgb(var(--color-muted));
}

.mz-agegate__copy p:first-child {
  font-size: 1rem;
  color: rgb(var(--color-ink));
}

.mz-agegate__copy p:last-child { margin-bottom: 0; }

.mz-agegate__actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.mz-agegate__btn {
  display: block;
  width: 100%;
  padding: 0.8125rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  font-family: var(--brand-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mz-agegate__btn:focus-visible {
  outline: 2px solid rgb(var(--color-primary));
  outline-offset: 2px;
}

.mz-agegate__btn--yes {
  background: var(--brand-gradient-primary);
  /* Fixed near-black: this brand's ink is a light tone and would vanish
     on the cyan end of the gradient. */
  color: #0b0e13;
}

.mz-agegate__btn--yes:hover { filter: brightness(1.08); }

.mz-agegate__btn--no {
  background: transparent;
  border-color: rgb(var(--color-line));
  color: rgb(var(--color-muted));
}

.mz-agegate__btn--no:hover {
  border-color: rgb(var(--color-subtle));
  color: rgb(var(--color-ink));
}

.mz-agegate__fine {
  margin: 1.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgb(var(--color-subtle));
}

@media (min-width: 480px) {
  .mz-agegate__actions { flex-direction: row-reverse; }
  .mz-agegate__btn--no { width: auto; flex: 0 0 auto; padding-inline: 1.5rem; }
}