/* ============================================================
   InTheMude — Storefront Design System
   Dark, intimate, editorial. "Dim-the-lights, not party-bright."
   Upscale hotel bar, not a nightclub.
   ------------------------------------------------------------
   This file is the single source of visual truth for every
   public storefront page. Tokens first, then base, then
   reusable components. Other pages inherit ALL of this and
   should add nothing but page-specific layout.
   No inline styles allowed anywhere (strict CSP) — everything
   lives here.
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Core palette */
  --bg: #141014;                 /* deep warm near-black */
  --bg-raise: #1c171b;           /* raised surface (cards, header) */
  --bg-raise-2: #241d23;         /* second-level raise / hover */
  --bg-sunken: #100c10;          /* footer / sunken bands */

  --oxblood: #7a1e2c;            /* primary accent — muted burgundy */
  --oxblood-deep: #5e1622;       /* pressed / gradient end */
  --oxblood-glow: rgba(122, 30, 44, 0.32);

  --brass: #c9a66b;              /* secondary accent — warm gold */
  --brass-deep: #a8854b;
  --brass-soft: rgba(201, 166, 107, 0.16);

  --cream: #f4ead6;              /* primary text — soft cream, never pure white */
  --muted: #b7a89a;             /* muted text — desaturated warm gray */
  --muted-2: #9a8c80;           /* fainter muted (captions, fine print) — clears WCAG AA 4.5:1 on raised surfaces */

  /* Hairlines & overlays */
  --line: rgba(244, 234, 214, 0.10);     /* default border on dark */
  --line-strong: rgba(244, 234, 214, 0.18);
  --brass-line: rgba(201, 166, 107, 0.30);
  --scrim: rgba(10, 7, 10, 0.72);         /* modal backdrop */

  /* Typography */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale (fluid) */
  --fs-hero: clamp(2.9rem, 7vw, 5.6rem);
  --fs-h1: clamp(2.4rem, 5.2vw, 4.2rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3rem);
  --fs-h3: clamp(1.18rem, 1.6vw, 1.4rem);
  --fs-lead: clamp(1.08rem, 1.7vw, 1.3rem);
  --fs-body: 1.02rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.74rem;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --section-y: clamp(64px, 9vw, 120px);
  --gutter: clamp(20px, 5vw, 68px);

  /* Radii */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadows (warm, deep, soft — never harsh) */
  --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.35);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
  --shadow-glow: 0 18px 50px var(--oxblood-glow);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 220ms;
  --t-med: 420ms;
  --t-slow: 560ms;

  /* Layout */
  --max: 1180px;
  --max-narrow: 820px;

  color-scheme: dark;
}

/* ---------- 2. Reset & Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 700px at 78% -8%, rgba(122, 30, 44, 0.22), transparent 60%),
    radial-gradient(900px 600px at 8% 12%, rgba(201, 166, 107, 0.08), transparent 55%),
    linear-gradient(180deg, #16111600 0%, #100c10 100%);
  background-attachment: fixed;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--oxblood);
  color: var(--cream);
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cream);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }

p {
  margin: 0;
}

h1, h2, h3, p {
  overflow-wrap: break-word;
}

.eyebrow {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

.lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  line-height: 1.6;
}

.muted {
  color: var(--muted);
}

.fine {
  font-size: var(--fs-small);
  color: var(--muted-2);
}

/* Brass-underline accent for select headings */
.accent-rule {
  display: inline-block;
  width: 56px;
  height: 2px;
  margin-bottom: var(--sp-5);
  background: linear-gradient(90deg, var(--brass), transparent);
  border: 0;
}

/* ---------- 4. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  max-width: var(--max-narrow);
}

/* A vertical rhythm section. Variants set background. */
.section {
  padding-block: var(--section-y);
}

.section--raise {
  background: linear-gradient(180deg, rgba(28, 23, 27, 0.0), rgba(28, 23, 27, 0.55) 50%, rgba(28, 23, 27, 0.0));
}

.section--sunken {
  background: var(--bg-sunken);
  border-block: 1px solid var(--line);
}

.section-heading {
  max-width: 720px;
  margin-bottom: var(--sp-7);
}

.section-heading.center {
  margin-inline: auto;
  text-align: center;
}

.section-heading p {
  margin-top: var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-lead);
}

/* ---------- 5. Reveal-on-scroll motion ---------- */
/* Elements tagged [data-reveal] fade + rise into place.
   app.js / age-gate.js add .is-visible via IntersectionObserver.
   If JS is off, content is shown by the no-js fallback below. */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.no-js [data-reveal],
html:not(.js) [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  transition:
    transform var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  color: var(--cream);
  background: linear-gradient(160deg, var(--oxblood), var(--oxblood-deep));
  box-shadow: var(--shadow-glow);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  box-shadow: 0 22px 60px rgba(122, 30, 44, 0.5);
}

.btn--secondary {
  color: var(--cream);
  background: transparent;
  border-color: var(--brass-line);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--brass);
  background: var(--brass-soft);
}

.btn--ghost {
  color: var(--muted);
  background: transparent;
  border-color: var(--line-strong);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--cream);
  border-color: var(--line-strong);
  background: rgba(244, 234, 214, 0.04);
}

.btn--sm {
  /* 44px min-height keeps the compact look while clearing the
     WCAG 2.5.5 / Apple HIG 44px touch-target minimum. */
  min-height: 44px;
  padding: 0 var(--sp-4);
  font-size: 0.88rem;
}

.btn--block {
  width: 100%;
}

/* ---------- 7. Pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 26px;
  padding: 2px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: rgba(244, 234, 214, 0.03);
}

.pill--brass {
  color: var(--brass);
  border-color: var(--brass-line);
  background: var(--brass-soft);
}

/* Intensity pills — sweet/medium/spicy. Suggestive, never graphic. */
.pill--tier {
  text-transform: capitalize;
}

.pill--sweet {
  color: #e6cfa0;
  border-color: var(--brass-line);
  background: rgba(201, 166, 107, 0.10);
}

.pill--medium {
  color: #e0a18f;
  border-color: rgba(193, 109, 90, 0.4);
  background: rgba(193, 109, 90, 0.12);
}

.pill--spicy {
  color: #e89aa3;
  border-color: rgba(122, 30, 44, 0.6);
  background: rgba(122, 30, 44, 0.20);
}

.pill--status {
  color: var(--cream);
  border-color: var(--brass-line);
  background: rgba(201, 166, 107, 0.12);
}

/* ---------- 8. Sticky header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--gutter);
  background: rgba(20, 16, 20, 0.72);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

.brand-lockup img {
  width: 30px;
  height: 30px;
}

.brand-lockup .wordmark-text {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cream);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 34px);
}

.site-nav a {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--muted);
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--cream);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Mobile menu button — hidden on desktop, shown under 960px.
   Built from .nav-toggle__bars (the middle bar) plus ::before/::after
   bars. Animates to an X when the menu is open ([aria-expanded]). */
.nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(244, 234, 214, 0.03);
  color: var(--cream);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  border-color: var(--brass-line);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before {
  position: absolute;
  top: -6px;
  left: 0;
}

.nav-toggle__bars::after {
  position: absolute;
  top: 6px;
  left: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ---------- 9. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 10vw, 128px);
}

.hero::after {
  /* soft vignette to deepen the edges, cinematic */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(10, 7, 10, 0.5) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.hero__copy {
  max-width: 620px;
}

.hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.02;
}

.hero h1 em {
  font-style: italic;
  color: var(--brass);
}

.hero__sub {
  margin-top: var(--sp-5);
  max-width: 540px;
  font-size: var(--fs-lead);
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.hero__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--muted-2);
}

/* Hero visual — a soft "display + phone" suggestion built from
   the wordmark, no bright imagery. */
.hero__visual {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 120% at 30% 10%, rgba(122, 30, 44, 0.35), transparent 60%),
    linear-gradient(165deg, #221a20, #16111500);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 7, 10, 0.55));
}

.hero__visual img {
  position: relative;
  width: min(62%, 320px);
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.5));
}

.hero__visual figcaption {
  position: absolute;
  bottom: var(--sp-5);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Proof strip — quiet stat row under the hero */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  max-width: 560px;
}

.proof-strip > div {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(244, 234, 214, 0.03);
}

.proof-strip dt {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--brass);
}

.proof-strip dd {
  margin: 2px 0 0;
  font-size: var(--fs-small);
  color: var(--muted);
}

/* ---------- 10. Cards (generic surface) ---------- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
  box-shadow: var(--shadow-sm);
}

.card--pad {
  padding: var(--sp-6);
}

/* ---------- 11. Step / feature rows ---------- */
.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.step {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
}

.step__num {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  border: 1px solid var(--brass-line);
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--brass);
  background: var(--brass-soft);
}

.step h3 {
  margin-bottom: var(--sp-2);
}

.step p {
  color: var(--muted);
  font-size: var(--fs-body);
}

/* ---------- 12. Catalog (filters + grid + game cards) ---------- */
.catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 0.6fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.field {
  display: grid;
  gap: var(--sp-2);
}

.field > span {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

input[type="search"],
input[type="email"],
input[type="text"],
select {
  width: 100%;
  min-height: 46px;
  padding: 0 var(--sp-4);
  color: var(--cream);
  background: var(--bg-raise-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

input::placeholder {
  color: var(--muted-2);
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--brass-line);
  box-shadow: 0 0 0 3px var(--brass-soft);
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.empty-state {
  grid-column: 1 / -1;
  padding: var(--sp-7);
  text-align: center;
  color: var(--muted);
}

/* Game card */
.game-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

.game-card:hover {
  transform: translateY(-4px);
  border-color: var(--brass-line);
  box-shadow: var(--shadow);
}

/* Key art region. Real art via inline background-image set by JS as a
   CSS custom property (--art) on the element — NOT an inline style attr.
   Fallback is a branded gradient that shows through when no art / 404. */
.game-card__art {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    var(--art, none),
    linear-gradient(150deg, var(--oxblood-deep), #2a1820 55%, #1b1318);
  background-size: cover, cover;
  background-position: center;
}

.game-card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 20, 0.0) 45%, rgba(20, 16, 20, 0.85));
}

.game-card__art .status-tag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 1;
}

.game-card__art .fav {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 1;
  display: grid;
  place-items: center;
  /* 44x44 hit area for WCAG 2.5.5; the heart glyph stays visually
     light via font-size, so the control still reads delicate. */
  width: 44px;
  height: 44px;
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(16, 12, 16, 0.6);
  color: var(--brass);
  backdrop-filter: blur(6px);
}

.game-card__art .fav:hover {
  border-color: var(--brass);
}

.game-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-3);
  padding: var(--sp-5);
}

.game-card__body h3 {
  font-size: 1.32rem;
}

.game-card__tagline {
  color: var(--cream);
  font-size: 0.98rem;
  line-height: 1.5;
}

.game-card__audience {
  flex: 1;
  color: var(--muted);
  font-size: 0.92rem;
}

.meta-row,
.intensity-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.game-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.launch-result {
  min-height: 20px;
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--brass);
}

.launch-result a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 13. Privacy band ---------- */
.privacy-band {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
}

.privacy-band__points {
  display: grid;
  gap: var(--sp-4);
}

.privacy-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
}

.privacy-point .mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--brass-line);
  color: var(--brass);
  background: var(--brass-soft);
  font-weight: 700;
}

.privacy-point h3 {
  font-size: 1.1rem;
  margin-bottom: var(--sp-1);
}

.privacy-point p {
  color: var(--muted);
  font-size: 0.94rem;
}

/* ---------- 14. Pricing teaser ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
}

.price-card--featured {
  border-color: var(--brass-line);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(122, 30, 44, 0.28), transparent 70%),
    var(--bg-raise-2);
  box-shadow: var(--shadow-glow);
}

.price-card__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}

.price-card__amount {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--cream);
}

.price-card__amount small {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--muted);
}

.price-card ul {
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2);
  flex: 1;
}

.price-card li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 0.94rem;
}

.price-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass);
}

/* ---------- 15. Email capture ---------- */
.lead-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
  gap: clamp(28px, 6vw, 64px);
  align-items: center;
}

.lead-form {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
  box-shadow: var(--shadow-sm);
}

.lead-form .field > span {
  color: var(--muted);
}

.form-status {
  min-height: 20px;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--brass);
}

.form-status[data-error="true"] {
  color: #e89aa3;
}

/* Simple brass-bulleted list (trial rules, feature lists) */
.trial-rules {
  margin: var(--sp-4) 0 var(--sp-4);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2);
}

.trial-rules li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 0.96rem;
}

.trial-rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass);
}

/* ---------- 16. Footer ---------- */
.site-footer {
  background: var(--bg-sunken);
  border-top: 1px solid var(--line);
  padding-block: var(--sp-7);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}

.site-footer__brand {
  display: grid;
  gap: var(--sp-3);
  max-width: 320px;
}

.site-footer__brand .wordmark-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--cream);
}

.site-footer__brand p {
  color: var(--muted-2);
  font-size: var(--fs-small);
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: var(--sp-3);
}

.footer-col nav {
  display: grid;
  gap: var(--sp-2);
}

.footer-col a {
  color: var(--muted);
  font-size: 0.94rem;
}

.footer-col a:hover {
  color: var(--cream);
}

.site-footer__base {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  color: var(--muted-2);
  font-size: var(--fs-small);
}

/* ---------- 17. Age gate modal ---------- */
/* Hidden until age-gate.js decides it must show. The script toggles
   [hidden] on the root. No inline styles. */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: var(--scrim);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  animation: ageFade var(--t-med) var(--ease);
}

.age-gate[hidden] {
  display: none;
}

@keyframes ageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.age-gate__card {
  width: min(440px, 100%);
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
  border: 1px solid var(--brass-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(122, 30, 44, 0.30), transparent 65%),
    var(--bg-raise);
  box-shadow: var(--shadow);
  animation: ageRise var(--t-slow) var(--ease);
}

@keyframes ageRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.age-gate__card img {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--sp-4);
}

.age-gate__card h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  margin-bottom: var(--sp-3);
}

.age-gate__card p {
  color: var(--muted);
  font-size: 0.96rem;
  margin-bottom: var(--sp-5);
}

.age-gate__actions {
  display: grid;
  gap: var(--sp-3);
}

.age-gate__leave {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--muted-2);
}

.age-gate__leave a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Lock scroll while gate is up (class added by age-gate.js to <html>) */
.age-locked,
.age-locked body {
  overflow: hidden;
}

/* ---------- 18. Responsive ---------- */
@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }
  .hero__visual {
    order: -1;
    max-width: 480px;
  }
  .privacy-band,
  .lead-band {
    grid-template-columns: 1fr;
  }
  .step-grid,
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalog-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .catalog-toolbar .field:first-child {
    grid-column: 1 / -1;
  }
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer__brand {
    grid-column: 1 / -1;
  }

  /* Show the hamburger and turn the inline nav into a dropdown
     panel anchored under the sticky header. nav.js toggles
     .is-open + aria-expanded; CSS does the rest. */
  .nav-toggle {
    display: inline-grid;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    right: var(--gutter);
    left: var(--gutter);
    z-index: 39;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: rgba(20, 16, 20, 0.96);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
  }

  .site-nav.is-open {
    display: flex;
    animation: navDrop var(--t-fast) var(--ease);
  }

  .site-nav a {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a[aria-current="page"] {
    background: rgba(244, 234, 214, 0.05);
  }
}

@keyframes navDrop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .proof-strip {
    grid-template-columns: 1fr;
  }
  .step-grid,
  .pricing-grid,
  .catalog-grid,
  .catalog-toolbar {
    grid-template-columns: 1fr;
  }
  .price-card--featured {
    transform: none;
  }
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
  .header-cta .btn--secondary {
    display: none;
  }
}