/* Self-hosted Sora + Manrope (latin, latin-ext). Nothing is requested from Google (GDPR). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400-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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400-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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500-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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500-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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600-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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600-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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700-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;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700-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: 400;
  font-display: swap;
  src: url('../fonts/sora-400-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;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sora-400-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: 500;
  font-display: swap;
  src: url('../fonts/sora-500-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;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/sora-500-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: 600;
  font-display: swap;
  src: url('../fonts/sora-600-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;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/sora-600-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: 700;
  font-display: swap;
  src: url('../fonts/sora-700-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;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/sora-700-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;
}

/* ==========================================================================
   Peptidi — main stylesheet
   Tokens are copied VERBATIM from theme/src/styles.css (oklch, light only).
   BEM classes; no utility framework. See docs/02-design-system.md.
   ========================================================================== */

:root {
  --radius: 1rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --radius-full: 9999px;

  --background: oklch(0.988 0.002 247.858);
  --foreground: oklch(0.208 0.042 265.755);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.208 0.042 265.755);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.208 0.042 265.755);
  --primary: oklch(0.623 0.214 259.815);
  --primary-foreground: oklch(1 0 0);
  --primary-soft: oklch(0.951 0.026 258);
  --secondary: oklch(0.949 0.009 247.896);
  --secondary-foreground: oklch(0.208 0.042 265.755);
  --muted: oklch(0.949 0.009 247.896);
  --muted-foreground: oklch(0.6 0.033 256.788);
  --accent: oklch(0.951 0.026 258);
  --accent-foreground: oklch(0.45 0.19 259);
  --ink: oklch(0.23 0.032 264);
  --ink-foreground: oklch(0.98 0.003 247.858);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.925 0.011 255.508);
  --input: oklch(0.925 0.011 255.508);
  --ring: oklch(0.623 0.214 259.815);

  --gradient-hero: linear-gradient(160deg, oklch(1 0 0) 0%, oklch(0.97 0.012 250) 45%, oklch(0.945 0.032 256) 100%);
  --gradient-accent: linear-gradient(135deg, oklch(0.623 0.214 259.815), oklch(0.72 0.145 233));
  --shadow-soft: 0 1px 2px oklch(0.5 0.04 258 / 0.06), 0 12px 32px -16px oklch(0.5 0.04 258 / 0.35);
  --shadow-lift: 0 2px 6px oklch(0.5 0.04 258 / 0.08), 0 28px 60px -28px oklch(0.5 0.04 258 / 0.45);

  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;

  --container: 80rem;
  --header-z: 50;
  /* Fixed header row. The mobile menu opens flush under it; JS overrides
     --header-bottom with the measured value, since the topbar above the header
     scrolls away and the offset therefore changes with scroll position. */
  --header-height: 4.5rem;

  /* Scroll-to-top geometry. The toast stack shares the same corner and reads
     these to sit above the button instead of on top of it. */
  --scroll-top-size: 2.75rem;
  --scroll-top-inset: 1.5rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--border); }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  margin: 0;
}
h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
img { border-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
::placeholder { color: var(--muted-foreground); opacity: 1; }

.screen-reader-text, .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .container { padding-inline: 1.5rem; } }

.section { padding-block: 3rem; }
@media (min-width: 640px) { .section { padding-block: 4rem; } }
.section--hero { padding-block: 3.5rem; }
@media (min-width: 640px) { .section--hero { padding-block: 5rem; } }

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */
.bento-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.bento-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.bento-card--static:hover { box-shadow: var(--shadow-soft); transform: none; }
.bento-card--ink { background-color: var(--ink); color: var(--ink-foreground); border-color: transparent; }

.surface-hero { background-image: var(--gradient-hero); }
.text-gradient {
  background-image: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grid-lines {
  background-image:
    linear-gradient(to right, oklch(0.6 0.03 258 / 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.6 0.03 258 / 0.08) 1px, transparent 1px);
  background-size: 64px 64px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
}
.eyebrow--accent { color: var(--accent-foreground); }

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  background-color: var(--primary-soft);
  color: var(--accent-foreground);
  padding: 0.25rem 0.625rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.icon--sm { width: 0.875rem; height: 0.875rem; }
.icon--lg { width: 1.25rem; height: 1.25rem; }
.icon--xl { width: 1.5rem; height: 1.5rem; }

/* Buttons — pill-shaped, three tones (doc 02). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-full);
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background-color: var(--primary); color: var(--primary-foreground); }
.btn--primary:hover { opacity: 0.9; }
.btn--ink { background-color: var(--ink); color: var(--ink-foreground); }
.btn--ink:hover { opacity: 0.9; }
.btn--outline { border: 1px solid var(--border); background-color: var(--card); }
.btn--outline:hover { border-color: var(--primary); }
.btn--lg { padding: 0.75rem 1.5rem; }

.input {
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--radius-xl);
  background-color: var(--background);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  outline: none;
}
.input:focus { box-shadow: 0 0 0 2px var(--ring); }
.input--pill { border-radius: var(--radius-full); background-color: var(--card); border-color: var(--border); }
.input--pill:focus { box-shadow: none; border-color: var(--primary); }

/* --------------------------------------------------------------------------
   FAQ cards
   --------------------------------------------------------------------------
   Shared by the four Phase 9 page FAQs and the homepage's five grouped
   sections, so it lives here rather than in pages.css — the homepage does not
   load that stylesheet and six rules are not worth 617 lines of landing-page
   CSS. The group head (label / rule / count) only appears on the homepage.
   -------------------------------------------------------------------------- */

.faq-cards { display: grid; gap: 1rem; }
.faq-cards__item { padding: 1.25rem; }

.faq-cards__q {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}

.faq-cards__a {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.faq-cards__group-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 640px) { .faq-cards__group-head { margin-top: 2.5rem; } }
.faq-cards__rule { flex: 1; height: 1px; background-color: var(--border); }

.faq-cards__count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   Top bar (Telegram)
   -------------------------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--ink);
  color: var(--ink-foreground);
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.75rem;
}
.topbar__icon { display: none; }
@media (min-width: 640px) { .topbar__icon { display: block; width: 0.875rem; height: 0.875rem; } }
/* The ellipsis stays as a safety valve for very narrow screens; it is no longer
   the normal state on a phone. */
.topbar__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__text--full { display: none; }
@media (min-width: 640px) {
  .topbar__text--short { display: none; }
  .topbar__text--full { display: block; }
}
.topbar__link {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--primary-foreground);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--header-z);
  border-bottom: 1px solid oklch(0.925 0.011 255.508 / 0.7);
  background-color: oklch(0.988 0.002 247.858 / 0.8);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
/* The header keeps a fixed 4.5rem row whatever sits in it. The wordmark was
   removed and the logo grew into the space it left (2.75rem -> 3.25rem), and the
   block padding shrank by exactly the same amount so the header height did not
   move: 44 + 2x14 = 72px before, 52 + 2x10 = 72px now. min-height pins it so a
   future change to either value cannot quietly resize the header. */
.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-height);
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.625rem 1rem;
}
@media (min-width: 640px) { .site-header__inner { padding-inline: 1.5rem; } }

.site-header__brand { display: flex; min-width: 0; align-items: center; }
.site-header__logo { width: 3.25rem; height: 3.25rem; flex-shrink: 0; object-fit: contain; }

.site-header__actions { display: flex; align-items: center; gap: 0.5rem; }

/* Some of the width freed by dropping the wordmark goes here, so the nav is not
   crowded against the cart pill. */
.site-nav { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 1024px) { .site-nav { display: flex; margin-right: 1rem; } }
.site-nav__link {
  border-radius: var(--radius-full);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem; font-weight: 500;
  color: var(--muted-foreground);
  transition: color 0.15s ease;
}
.site-nav__link:hover { color: var(--foreground); }
.site-nav__link.is-active { background-color: var(--primary-soft); color: var(--accent-foreground); }

.cart-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--primary); color: var(--primary-foreground);
  padding: 0.5rem 1rem;
  font-size: 0.875rem; font-weight: 600;
  transition: opacity 0.15s ease;
}
.cart-pill:hover { opacity: 0.9; }
.cart-pill__label { display: none; }
@media (min-width: 640px) { .cart-pill__label { display: inline; } }
.cart-pill__total { font-family: var(--font-display); }
.cart-pill__count {
  position: absolute; top: -0.25rem; right: -0.25rem;
  display: grid; place-items: center;
  min-width: 1.25rem; height: 1.25rem;
  border-radius: var(--radius-full);
  background-color: var(--ink); color: var(--ink-foreground);
  padding-inline: 0.25rem;
  font-size: 10px; font-weight: 600;
}
.cart-pill__count[hidden] { display: none; }

.account-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.5rem; width: 2.5rem; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background-color: var(--card); color: var(--muted-foreground);
  transition: color 0.15s ease;
}
.account-btn:hover { color: var(--foreground); }
@media (min-width: 640px) {
  .account-btn { width: auto; padding-inline: 0.75rem; }
}
.account-btn__label { display: none; font-size: 0.875rem; font-weight: 500; }
@media (min-width: 640px) { .account-btn__label { display: inline; } }
.account-btn__dot {
  position: absolute; top: -0.125rem; right: -0.125rem;
  width: 0.625rem; height: 0.625rem;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  box-shadow: 0 0 0 2px var(--background);
}
.site-header__cta { display: none; flex-shrink: 0; }
@media (min-width: 640px) { .site-header__cta { display: inline-flex; } }

.burger {
  display: grid; place-items: center;
  height: 2.5rem; width: 2.5rem; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background-color: var(--card);
}
@media (min-width: 1024px) { .burger { display: none; } }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

/* Full-screen frosted panel filling the viewport below the header, the same
   shape as the Synerium theme's. It is a sibling of <header> — see header.php.
   `--header-bottom` is written by JS on open; the fallback covers the no-JS and
   first-paint cases. Sized to fit without scrolling on a 375x667 phone: the
   page behind is locked, and a menu that scrolls inside a locked page is the
   confusing case this avoids. overflow-y stays `auto` purely as a safety valve
   for very short viewports (landscape), never as the normal state. */
.mobile-nav {
  position: fixed;
  inset: var(--header-bottom, var(--header-height)) 0 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: oklch(0.988 0.002 247.858 / 0.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 0.5rem 1rem 1.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 1024px) { .mobile-nav { display: none; } }

.mobile-nav__list { display: flex; flex-direction: column; }
/* Row height is deliberate, not decorative: ten links AND the closing CTA have
   to fit under the header on the shortest phone in common use (375x667) without
   the panel scrolling. 10px padding + a 1.35 line-height gives a 44px row —
   exactly the minimum touch target, and the most the button leaves room for. */
.mobile-nav__link {
  display: block;
  padding: 0.625rem 0.25rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 500; line-height: 1.35;
  color: var(--foreground);
}
.mobile-nav__link:last-child { border-bottom: 0; }
.mobile-nav__link:hover { color: var(--primary); }

/* Closing CTA, the same shape and placement as the Synerium theme's: directly
   below the last item on a fixed margin, not pushed to the bottom of the panel. */
.mobile-nav__actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.mobile-nav__cta { width: 100%; gap: 0.5rem; }

/* Scroll lock — the same one the age gate uses, and deliberately body-only.
   While <html> stays `overflow: visible` the used value is propagated from
   <body> to the viewport, so this locks the page WITHOUT making <body> a scroll
   container. Adding `overflow: hidden` to <html> as well looks more thorough and
   is actively wrong: it stops the propagation, <body> becomes a real scroll
   container, and the sticky header comes unstuck and scrolls away behind the
   open menu. Tested — don't "fix" it. */
body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: opacity 0.25s ease, visibility 0.25s ease; transform: none; }
  .mobile-nav.is-open { transform: none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { margin-top: 2rem; border-top: 1px solid var(--border); background-color: var(--card); }
@media (min-width: 640px) { .site-footer { margin-top: 4rem; } }
.site-footer__inner { max-width: var(--container); margin-inline: auto; padding: 3.5rem 1rem; }
@media (min-width: 640px) { .site-footer__inner { padding-inline: 1.5rem; } }

.site-footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.site-footer__brand-row { display: flex; align-items: center; gap: 0.75rem; }
.site-footer__logo { width: 4rem; height: 4rem; flex-shrink: 0; object-fit: contain; }
@media (min-width: 640px) { .site-footer__logo { width: 5rem; height: 5rem; } }
.site-footer__desc { margin-top: 1rem; max-width: 28rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.site-footer__contact { margin-top: 1.5rem; display: grid; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.site-footer__contact-row { display: flex; align-items: center; gap: 0.5rem; }
.site-footer__contact-row .icon { color: var(--primary); }

.site-footer__heading {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--muted-foreground);
}
.site-footer__links { margin-top: 1rem; display: grid; gap: 0.5rem; font-size: 0.875rem; }
.site-footer__links a { color: var(--muted-foreground); }
.site-footer__links a:hover { color: var(--foreground); }
.site-footer__links span { color: var(--muted-foreground); }

/* Newsletter (footer). Same bordered panel as .site-footer__quick below, so the
   block the export never had still reads as part of the design. */
.newsletter {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background-color: var(--background);
  padding: 1.5rem;
}
@media (min-width: 900px) {
  .newsletter { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 2rem; padding: 1.75rem 2rem; }
}
.newsletter__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.newsletter__lead { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); max-width: 42ch; }

.newsletter__form { display: grid; gap: 0.75rem; }
.newsletter__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.newsletter__input { flex: 1 1 12rem; min-width: 0; }
.newsletter__submit { flex-shrink: 0; }

.newsletter__fineprint { font-size: 0.75rem; line-height: 1.55; color: var(--muted-foreground); }
.newsletter__fineprint a { font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.newsletter__fineprint a:hover { color: var(--foreground); }

/* Honeypot: off-canvas rather than display:none, which some bots skip. */
.newsletter__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.newsletter__status { font-size: 0.8125rem; line-height: 1.5; }
.newsletter__status:empty { display: none; }
.newsletter__status.is-error { color: var(--destructive); }
.newsletter__status.is-success { color: var(--accent-foreground); font-weight: 500; }
.newsletter__form.is-busy { opacity: 0.65; pointer-events: none; }

.site-footer__quick {
  margin-top: 2.5rem;
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 1.5rem; row-gap: 0.5rem;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  background-color: var(--background);
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
}
.site-footer__quick-label {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--muted-foreground);
}
.site-footer__quick a { font-weight: 500; color: var(--muted-foreground); }
.site-footer__quick a:hover { color: var(--foreground); }

.site-footer__legal {
  margin-top: 1rem;
  font-size: 0.75rem; line-height: 1.6;
  color: var(--muted-foreground);
}
.site-footer__legal:first-of-type { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 1.5rem; }
.site-footer__legal strong { color: var(--foreground); }
.site-footer__legal a { font-weight: 600; color: var(--primary); text-decoration: underline; }
.site-footer__legal a:hover { color: var(--foreground); }

/* --------------------------------------------------------------------------
   Age gate
   -------------------------------------------------------------------------- */
.age-gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background-color: oklch(0.23 0.032 264 / 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 1rem;
}
.age-gate[hidden] { display: none; }
.age-gate__panel {
  width: 100%; max-width: 36rem; max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  background-color: var(--card);
  box-shadow: var(--shadow-lift);
  padding: 1.5rem;
}
@media (min-width: 640px) { .age-gate__panel { padding: 2rem; } }
.age-gate__title { font-size: 1.25rem; font-weight: 600; }
.age-gate__lead { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
.age-gate__list {
  margin-top: 0.75rem; padding-left: 1.25rem;
  display: grid; gap: 0.5rem;
  list-style: disc;
  font-size: 0.875rem; color: var(--muted-foreground);
}
.age-gate__legal { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-foreground); }
.age-gate__legal a { color: var(--primary); }
.age-gate__legal a:hover { text-decoration: underline; }
.age-gate__confirm-line { margin-top: 0.75rem; font-size: 0.875rem; font-weight: 500; }
.age-gate__actions { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.age-gate__decline {
  border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 0.75rem 1.5rem;
  text-align: center; font-size: 0.875rem; font-weight: 500;
  color: var(--muted-foreground);
}
.age-gate__decline:hover { color: var(--foreground); }
body.age-gate-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Toasts
   -------------------------------------------------------------------------- */
.toast-stack {
  position: fixed; z-index: 120;
  right: var(--scroll-top-inset);
  /* Clear of the scroll-to-top button, which occupies this corner. A fixed
     offset rather than one that follows the button's visibility: toasts that
     jumped when the button appeared would be worse than a little headroom. */
  bottom: calc(var(--scroll-top-inset) + var(--scroll-top-size) + 0.75rem);
  display: grid; gap: 0.5rem;
  max-width: min(22rem, calc(100vw - 2rem));
}
.toast {
  display: flex; align-items: flex-start; gap: 0.625rem;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background-color: var(--card);
  box-shadow: var(--shadow-lift);
  padding: 0.875rem 1rem;
  font-size: 0.875rem; font-weight: 500;
  opacity: 0; transform: translateY(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast .icon { color: var(--primary); margin-top: 0.125rem; }

/* --------------------------------------------------------------------------
   Scroll-to-top (ported from the Synerium theme)
   -------------------------------------------------------------------------- */
.scroll-top {
  position: fixed;
  bottom: var(--scroll-top-inset);
  right: var(--scroll-top-inset);
  z-index: 60;
  display: grid;
  place-items: center;
  width: var(--scroll-top-size);
  height: var(--scroll-top-size);
  border-radius: var(--radius-full);
  background-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.625rem);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top.is-visible:hover { transform: translateY(-2px); opacity: 0.9; }
.scroll-top .icon { width: 1.15rem; height: 1.15rem; }

@media (max-width: 640px) {
  :root { --scroll-top-inset: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top { transition: opacity 0.25s ease, visibility 0.25s ease; transform: none; }
  .scroll-top.is-visible:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Page hero (shared band on inner pages)
   -------------------------------------------------------------------------- */
.page-hero { border-bottom: 1px solid var(--border); }
.page-hero__inner { max-width: var(--container); margin-inline: auto; padding: 4rem 1rem; }
@media (min-width: 640px) { .page-hero__inner { padding: 5rem 1.5rem; } }
.page-hero__eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent-foreground); }
.page-hero__title { margin-top: 0.75rem; max-width: 48rem; font-size: 2.25rem; font-weight: 600; line-height: 1.2; }
@media (min-width: 640px) { .page-hero__title { font-size: 3rem; } }
.page-hero__lead { margin-top: 1rem; max-width: 44rem; font-size: 1rem; line-height: 1.6; color: var(--muted-foreground); }