:root {
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --nav-offset: calc(env(safe-area-inset-top, 0px) + 12px);
  --nav-z: 1000;
  --bg: #f6f5f1;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-strong: rgba(255, 255, 255, 0.97);
  --surface-dark: #121a2d;
  --surface-dark-2: #1a2540;
  --ink: #23282A;
  --muted: #5E6661;
  --line: #D2D8CF;
  --line-strong: rgba(255, 255, 255, 0.9);
  --accent: #6F8F73;
  --accent-hover: #5E7C62;
  --accent-contrast: #ffffff;
  --ring: #6F8F73;
  --blue: #3f628e;
  --blue-deep: #243c59;
  --green: #7ea483;
  --green-deep: #55785c;
  --sky: #eef2f4;
  --mint: #edf1ea;
  --red: #b42318;
  --success: #067647;
  --shadow: 0 26px 72px rgba(35, 40, 42, 0.11);
  --shadow-soft: 0 14px 40px rgba(35, 40, 42, 0.07);
  --shadow-lift: 0 8px 24px rgba(35, 40, 42, 0.10);
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--surface);
  --card-foreground: var(--ink);
  --primary: var(--accent);
  --primary-foreground: var(--accent-contrast);
  --secondary: var(--green);
  --border: var(--line);
  --muted-foreground: var(--muted);
  --gradient-start: #fbfaf7;
  --gradient-end: #ffffff;

  /* ── Spacing scale ──────────────────────────────────
     One rhythm for every stacked layout. Use these instead of
     hand-picked pixel values so fields, panels and action rows
     stay in proportion to each other. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Form rhythm: label→control, and field→field. */
  --field-gap: 10px;
  --field-stack: 22px;
  --panel-pad: clamp(20px, 2.4vw, 28px);
}

/* ─── Noir theme ─────────────────────────────────────── */
[data-theme="noir"] {
  --bg: #0B0A08;
  --surface: rgba(26, 20, 12, 0.94);
  --surface-strong: rgba(36, 28, 16, 0.98);
  --surface-dark: #2A241B;
  --surface-dark-2: #1E1A14;
  --ink: #F5EFE3;
  --muted: #B6AC97;
  --line: rgba(201, 162, 75, 0.20);
  --line-strong: rgba(201, 162, 75, 0.28);
  --accent: #C9A24B;
  --accent-hover: #DCB75E;
  --accent-contrast: #0B0A08;
  --ring: #C9A24B;
  --blue: #C9A24B;
  --blue-deep: #A07828;
  --green: #C9A24B;
  --green-deep: #A07828;
  --shadow: 0 26px 72px rgba(0, 0, 0, 0.52);
  --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.36);
  --shadow-lift: 0 8px 28px rgba(201, 162, 75, 0.18);
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--surface);
  --card-foreground: var(--ink);
  --primary: var(--accent);
  --primary-foreground: var(--accent-contrast);
  --border: var(--line);
  --muted-foreground: var(--muted);
}

/* ─── Glass theme (glassmorphism) ──────────────────────────── */
[data-theme="glass"] {
  --bg: #e6ecfb;
  --surface: rgba(255, 255, 255, 0.42);
  --surface-strong: rgba(255, 255, 255, 0.60);
  --surface-dark: rgba(255, 255, 255, 0.30);
  --surface-dark-2: rgba(255, 255, 255, 0.22);
  --ink: #1b2230;
  --muted: #555f73;
  --line: rgba(255, 255, 255, 0.55);
  --line-strong: rgba(255, 255, 255, 0.85);
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-contrast: #ffffff;
  --ring: #6366f1;
  --blue: #4f7cf0;
  --blue-deep: #2f53b8;
  --green: #2f9e7e;
  --green-deep: #1f7a60;
  --shadow: 0 26px 72px rgba(40, 50, 90, 0.22);
  --shadow-soft: 0 14px 40px rgba(40, 50, 90, 0.14);
  --shadow-lift: 0 8px 28px rgba(99, 102, 241, 0.18);
  --gradient-start: #e8edfb;
  --gradient-end: #f4ecff;
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--surface);
  --card-foreground: var(--ink);
  --primary: var(--accent);
  --primary-foreground: var(--accent-contrast);
  --secondary: var(--green);
  --border: var(--line);
  --muted-foreground: var(--muted);
}

/* Keep glass readable where backdrop-filter is unsupported. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  [data-theme="glass"] {
    --surface: rgba(255, 255, 255, 0.92);
    --surface-strong: rgba(255, 255, 255, 0.97);
    --surface-dark: rgba(255, 255, 255, 0.88);
    --surface-dark-2: rgba(255, 255, 255, 0.82);
    --line: rgba(120, 130, 160, 0.30);
  }
}

/* ─── Clay theme (claymorphism) ────────────────────────────── */
[data-theme="clay"] {
  --bg: #f1e4ea;
  --surface: #faf0f4;
  --surface-strong: #fdf7f9;
  --surface-dark: #ecd9e1;
  --surface-dark-2: #e3ccd6;
  --ink: #4a2740;
  --muted: #8a6079;
  --line: #f0d8e2;
  --line-strong: #ffffff;
  --accent: #e8568f;
  --accent-hover: #cf3f78;
  --accent-contrast: #ffffff;
  --ring: #e8568f;
  --blue: #5b8def;
  --blue-deep: #3a64c4;
  --green: #1fb89a;
  --green-deep: #138a73;
  --red: #ff6b81;
  --success: #16a34a;
  /* Claymorphism: soft outer drop + light/dark insets for the puffy 3D edge. */
  --shadow:
    16px 18px 34px rgba(182, 110, 145, 0.30),
    -10px -12px 26px rgba(255, 255, 255, 0.80),
    inset 3px 3px 8px rgba(255, 255, 255, 0.92),
    inset -6px -6px 14px rgba(200, 140, 170, 0.42);
  --shadow-soft:
    12px 14px 28px rgba(182, 110, 145, 0.22),
    -8px -10px 20px rgba(255, 255, 255, 0.74),
    inset 2px 2px 6px rgba(255, 255, 255, 0.88),
    inset -5px -5px 12px rgba(200, 140, 170, 0.34);
  --shadow-lift:
    10px 12px 26px rgba(232, 86, 143, 0.28),
    inset 2px 2px 6px rgba(255, 255, 255, 0.72),
    inset -4px -4px 10px rgba(175, 50, 105, 0.30);
  --gradient-start: #faeaf1;
  --gradient-end: #fdecf3;
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--surface);
  --card-foreground: var(--ink);
  --primary: var(--accent);
  --primary-foreground: var(--accent-contrast);
  --secondary: var(--green);
  --border: var(--line);
  --muted-foreground: var(--muted);
}

/* Clay base/login backdrop: soft pastel dream (the full non-login refinement
   lives at the end of the file so it can outrank the default body block). */
[data-theme="clay"] body {
  background-color: #d94f86;
  background-image:
    linear-gradient(160deg, rgba(255, 246, 250, 0.42) 0%, rgba(255, 238, 247, 0.32) 100%),
    url("../img/clay-bg.86e1b6062d4f.jpg");
  background-image:
    linear-gradient(160deg, rgba(255, 246, 250, 0.42) 0%, rgba(255, 238, 247, 0.32) 100%),
    image-set(url("../img/clay-bg.400981ca1deb.webp") type("image/webp"), url("../img/clay-bg.86e1b6062d4f.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  background: var(--bg, #050403);
}

body {
  margin: 0;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background-color: var(--bg);
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 28%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 32%),
    linear-gradient(180deg, var(--gradient-start, var(--bg)) 0%, var(--bg) 60%, var(--bg) 100%);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-theme="noir"] body {
  background:
    radial-gradient(circle at 18% 12%, rgba(201, 162, 75, 0.07), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(201, 162, 75, 0.04), transparent 28%),
    linear-gradient(180deg, #0E0C09 0%, #0B0A08 50%, #0A0906 100%);
}

/* Glass needs a vivid backdrop for the frosted surfaces to read. This base
   rule covers the login page; the full non-login refinement lives at the end
   of the file (so it can outrank the default Noir body block). */
[data-theme="glass"] body {
  background-color: #16306e;
  background-image:
    linear-gradient(160deg, rgba(20, 36, 90, 0.20) 0%, rgba(14, 26, 68, 0.26) 100%),
    url("../img/glass-bg.498407b2cc52.jpg");
  background-image:
    linear-gradient(160deg, rgba(20, 36, 90, 0.20) 0%, rgba(14, 26, 68, 0.26) 100%),
    image-set(url("../img/glass-bg.8c7a1a985cd7.webp") type("image/webp"), url("../img/glass-bg.498407b2cc52.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  body,
body::before,
body::after,
.page-grid,
.site-footer,
.site-nav,
.theme-select,
.language-select,
.hero,
.band,
.workflow,
.page-hero,
.dashboard-head,
.section-grid article,
.panel,
.price-card,
.limit-card,
.feature-status,
.table-panel,
.filter-bar,
.result-card,
.metric-grid article,
.timeline-grid article,
.button,
.nav-cta,
input,
select,
textarea {
    transition:
      background-color 240ms ease,
      background 240ms ease,
      border-color 240ms ease,
      backdrop-filter 240ms ease,
      box-shadow 240ms ease,
      color 240ms ease,
      outline-color 240ms ease;
  }
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 180ms ease, opacity 180ms ease;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  text-wrap: balance;
}

h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.015em; }
h3 { letter-spacing: -0.01em; }

p,
li,
td,
th,
label,
input,
select,
textarea,
button {
  font-family: var(--font-body);
}

main:not(.top-menu-bar),
.page-main {
  min-height: calc(100vh - 150px);
  position: relative;
  z-index: 1;
}

.page-aura,
.page-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.page-aura {
  display: none;
  pointer-events: none;
}

[data-theme="noir"] .page-aura {
  display: block;
}

.page-grid {
  opacity: 0.22;
  background-image:
    linear-gradient(color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%);
}

.aura {
  position: absolute;
  border-radius: 999px;
  filter: blur(32px);
  opacity: 0.5;
  animation: drift 22s ease-in-out infinite;
}

.aura-one {
  top: 90px;
  left: -70px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.10), rgba(201, 162, 75, 0));
}

.aura-two {
  top: 260px;
  right: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.07), rgba(201, 162, 75, 0));
  animation-delay: -5s;
}

.aura-three {
  bottom: 140px;
  left: 28%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.06), rgba(201, 162, 75, 0));
  animation-delay: -9s;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.home-page .site-footer {
  display: none;
}

/* ── Footer embedded inside the home video hero ── */
.video-hero-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 18px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255, 248, 232, 0.13);
  pointer-events: auto;
}

.video-hero-footer .site-footer-top {
  justify-content: space-between;
}

.video-hero-footer .site-footer-brand strong {
  color: #fff;
  opacity: 1;
}

.video-hero-footer .site-footer-logo {
  opacity: 1;
  filter: none;
}

.video-hero-footer .site-footer-desc {
  color: #fff;
}

.video-hero-footer .site-footer-nav a,
.video-hero-footer .footer-cookie-button {
  color: #fff;
}

.video-hero-footer .site-footer-nav a:hover,
.video-hero-footer .footer-cookie-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.video-hero-footer .site-footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.14);
  padding-top: 10px;
}

.video-hero-footer .site-footer-copy,
.video-hero-footer .site-footer-attr {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

/* ── Video hero footer: phone layout — center everything ── */
@media (max-width: 600px) {
  .video-hero-footer {
    align-items: center;
    text-align: center;
  }

  .video-hero-footer .site-footer-top {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .video-hero-footer .site-footer-nav {
    justify-content: center;
  }

  .video-hero-footer .site-footer-desc {
    text-align: center;
  }

  .video-hero-footer .site-footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
}

.site-footer {
  width: min(1240px, calc(100% - 24px));
  margin: 64px auto 24px;
  padding: 28px 32px 24px;
  border-radius: 24px;
  color: var(--muted);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

[data-theme="noir"] .site-footer {
  background: linear-gradient(180deg, rgba(26, 20, 12, 0.96), rgba(14, 11, 7, 0.98));
  border-color: var(--line);
}

.site-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.site-footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.site-footer-logo {
  width: auto;
  height: 26px;
  opacity: 0.68;
}

.site-footer-brand strong {
  font-weight: 800;
  font-size: 0.94rem;
  color: var(--ink);
  opacity: 0.82;
}

.site-footer-desc {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0;
  max-width: 52ch;
}

.site-footer-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.site-footer-nav a,
.footer-cookie-button {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease;
}

.site-footer-nav a:hover,
.footer-cookie-button:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.footer-cookie-button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}

.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.site-footer-copy,
.site-footer-attr {
  font-size: 0.76rem;
  color: var(--muted);
  opacity: 0.64;
}

@media (max-width: 600px) {
  .site-footer-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer-nav {
    gap: 4px;
  }

  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

.brand,
.site-nav,
.theme-switcher,
.language-switcher,
.site-footer nav,
.actions,
.inline-form,
.message-actions,
.auth-points {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.brand-logo {
  display: block;
  width: auto;
  height: 44px;
  object-fit: contain;
}

.brand-name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.site-nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 80%, transparent);
  position: relative;
  z-index: 1;
}

.inline-form {
  margin: 0;
  flex: 0 0 auto;
}

.site-nav a,
.link-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: color-mix(in srgb, var(--surface-strong) 85%, transparent);
}

.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;
}

.theme-switcher {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.theme-select,
.language-select {
  min-height: 42px;
  max-width: 160px;
  padding: 0 34px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--foreground);
  background: var(--card);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.theme-select:focus-visible,
.language-select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 32%, transparent);
  outline-offset: 2px;
}

.nav-cta,
.button,
.link-button {
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 220ms ease, border-color 220ms ease;
}

.link-button {
  padding: 0 10px;
  background: transparent;
  appearance: none;
}

.button,
.nav-cta {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  padding: 11px 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.button.primary,
.nav-cta {
  color: var(--accent-contrast);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover, var(--accent)));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 32%, transparent);
  animation: none;
}

[data-theme="noir"] .button.primary,
[data-theme="noir"] .nav-cta {
  background: linear-gradient(135deg, #A07828, #C9A24B, #E8C46A);
  box-shadow: 0 8px 28px rgba(201, 162, 75, 0.36);
}

.site-nav a.nav-account-settings,
.site-nav a.nav-logout {
  font-weight: 800;
  border: 1px solid rgba(36, 60, 89, 0.14);
}

.site-nav a.nav-account-settings::after,
.site-nav a.nav-logout::after {
  display: none;
}

.site-nav a.nav-logout {
  color: #9f1f1f;
  background: rgba(255, 255, 255, 0.82);
}

.site-nav a.nav-logout:hover,
.site-nav a.nav-logout:focus-visible {
  color: #fff;
  background: #b42318;
}

.button.secondary {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  backdrop-filter: blur(10px);
}

.button:hover,
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 28%, transparent);
}

.button:active,
.nav-cta:active {
  transform: translateY(0px) scale(0.98);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent);
}

.tab-nav a:hover,
.list-row:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}

.button:focus-visible,
.nav-cta:focus-visible,
.tab-nav a:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

.messages {
  width: min(1240px, calc(100% - 24px));
  margin: 14px auto 0;
}

.message {
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #ecfdf3;
  color: var(--success);
  border: 1px solid #abefc6;
}

.toast-region {
  position: fixed;
  top: 88px;
  right: 18px;
  z-index: 80;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}

.live-toast {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  animation: hero-rise 220ms ease both;
}

.live-toast-success {
  border-color: rgba(6, 118, 71, 0.28);
}

.live-toast-info {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.live-toast.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

.live-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
  font-size: 0.78rem;
  font-weight: 800;
}

.live-status::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 999px;
  background: var(--muted);
}

.live-status[data-live-state="success"]::before {
  background: var(--success);
}

.live-status[data-live-state="error"]::before {
  background: var(--red);
}

.live-status[data-live-state="paused"]::before {
  background: var(--accent);
}

.is-live-updated {
  animation: live-pulse 760ms ease both;
}

[data-live-payment-state="paid"],
[data-live-payment-state="published"] {
  color: var(--success);
}

[data-live-payment-state="failed"],
[data-live-payment-state="cancelled"],
[data-live-payment-state="refunded"] {
  color: var(--red);
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 24%, transparent);
  }

  100% {
    box-shadow: 0 0 0 8px transparent;
  }
}

.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1400;
  width: 100%;
  height: 3px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.page-progress.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-loader {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.slide-loader::before {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 74%, #ffffff), transparent);
  animation: slide-loader 1050ms cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.skeleton,
.skeleton-line,
.skeleton-title,
.skeleton-card,
.skeleton-avatar,
.skeleton-table-row,
[data-live-loading].is-loading::after,
[data-image-loading].is-loading::after {
  background:
    linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.14) 42%, transparent 78%),
    color-mix(in srgb, var(--surface-strong) 15%, rgba(255, 255, 255, 0.07));
  background-size: 220% 100%;
  animation: skeleton-slide 1350ms ease-in-out infinite;
}

.skeleton {
  display: block;
  border-radius: 16px;
}

.skeleton-line,
.skeleton-title {
  display: block;
  height: 12px;
  border-radius: 999px;
}

.skeleton-title {
  width: min(320px, 72%);
  height: 18px;
}

.skeleton-line {
  width: 100%;
}

.skeleton-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
}

.skeleton-card {
  min-height: 150px;
  border-radius: 24px;
}

.skeleton-table-row {
  height: 48px;
  border-radius: 12px;
}

[data-live-loading],
[data-image-loading] {
  position: relative;
}

[data-live-loading].is-loading::after,
[data-image-loading].is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: screen;
}

[data-live-loading][data-skeleton="metrics"].is-loading article,
[data-live-loading][data-skeleton="card"].is-loading,
[data-live-loading][data-skeleton="cards"].is-loading .panel,
[data-live-loading][data-skeleton="list"].is-loading .list-row,
[data-live-loading][data-skeleton="table"].is-loading tbody tr {
  position: relative;
  overflow: hidden;
}

[data-live-loading].has-loading-error::before {
  content: attr(data-loading-error);
  display: block;
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
  font-size: 0.82rem;
  font-weight: 800;
}

[data-image-loading] {
  overflow: hidden;
}

[data-image-loading] img {
  transition: opacity 220ms ease, transform 220ms ease;
}

[data-image-loading].is-loading img {
  opacity: 0.18;
}

[data-image-loading].has-loading-error::before {
  content: attr(data-loading-error);
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
  font-weight: 900;
  text-align: center;
}

form.is-loading {
  cursor: progress;
}

form.is-loading button[type="submit"].is-loading,
form.is-loading input[type="submit"].is-loading {
  cursor: progress;
  opacity: 0.82;
}

form.is-loading button[type="submit"].is-loading::after {
  content: "";
  width: 1em;
  height: 1em;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: loader-spin 760ms linear infinite;
}

@keyframes skeleton-slide {
  0% {
    background-position: 180% 0;
  }

  100% {
    background-position: -80% 0;
  }
}

@keyframes slide-loader {
  0% {
    transform: translateX(-45%);
  }

  100% {
    transform: translateX(245%);
  }
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Page-section skeleton: static server-rendered sections during initial page load ── */
[data-page-section] {
  position: relative;
}

[data-page-section].is-loading {
  overflow: hidden;
}

[data-page-section].is-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 42%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 72%, #ffffff), transparent);
  animation: slide-loader 1050ms cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  pointer-events: none;
}

[data-page-section].is-loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 3px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  pointer-events: none;
}

[data-page-section].has-loading-error::before {
  content: attr(data-loading-error);
  display: block;
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
  font-size: 0.82rem;
  font-weight: 800;
}

[data-page-section].has-loading-error::after {
  display: none;
}

@keyframes section-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-page-section].is-loaded {
  animation: section-fade-in 280ms ease both;
}

/* ── Retry button inside error states ── */
.live-retry-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 60%, transparent);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.live-retry-button:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 54%, transparent);
}

/* ── Error toast variant ── */
.live-toast.live-toast-error {
  border-color: color-mix(in srgb, var(--red, #e04c4c) 40%, transparent);
  color: color-mix(in srgb, var(--red, #e04c4c) 90%, var(--text, #fff));
  background: color-mix(in srgb, var(--red, #e04c4c) 9%, var(--surface, #111));
}

/* ── Warning toast variant ── */
.live-toast.live-toast-warning {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  color: color-mix(in srgb, var(--accent) 90%, var(--text, #fff));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface, #111));
}

.video-hero {
  min-height: max(100svh, 780px);
  width: 100%;
  margin-top: -86px;
  position: relative;
  overflow: hidden;
  display: block;
  padding: 0;
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(245, 208, 122, 0.2), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(126, 164, 131, 0.18), transparent 26%),
    linear-gradient(140deg, #0b0905 0%, #171005 48%, #080706 100%);
}

.home-page .video-hero {
  margin-top: 0;
}

body.home-page {
  --home-nav-overlap: calc(env(safe-area-inset-top, 0px) + 78px);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.home-page .page-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--home-nav-overlap) * -1);
}

.home-page .video-hero {
  flex: 0 0 auto;
  min-height: max(100svh, 720px) !important;
  height: auto;
  margin-top: 0 !important;
  padding-top: var(--home-nav-overlap);
}

.home-page .video-hero-content {
  top: calc(var(--home-nav-overlap) + clamp(14px, 4svh, 42px));
}

html[data-theme] body.home-page .top-menu-bar {
  border-color: rgba(245, 208, 122, 0.34);
  color: #fff8e8;
  background:
    linear-gradient(180deg, rgba(12, 10, 6, 0.42), rgba(8, 7, 5, 0.28));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 244, 210, 0.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

html[data-theme] body.home-page .top-menu-bar .brand,
html[data-theme] body.home-page .top-menu-bar .brand-name,
html[data-theme] body.home-page .top-menu-bar .desktop-nav a,
html[data-theme] body.home-page .top-menu-bar .dropdown-link,
html[data-theme] body.home-page .top-menu-bar .nav-preference {
  color: #fff8e8;
}

html[data-theme] body.home-page .top-menu-bar .desktop-nav,
html[data-theme] body.home-page .top-menu-bar .account-trigger {
  border-color: rgba(245, 208, 122, 0.22);
  background: rgba(255, 244, 210, 0.08);
}

html[data-theme] body.home-page .top-menu-bar .account-dropdown,
html[data-theme] body.home-page .top-menu-bar .mobile-nav-panel {
  border-color: rgba(245, 208, 122, 0.3);
  color: #fff8e8;
  background:
    radial-gradient(circle at 80% 0%, rgba(245, 208, 122, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(15, 12, 7, 0.985), rgba(7, 6, 4, 0.985));
}

html[data-theme] body.home-page .top-menu-bar .theme-select,
html[data-theme] body.home-page .top-menu-bar .language-select {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.24);
  background: rgba(5, 4, 3, 0.96);
}

@media (max-height: 620px) {
  body.home-page {
    display: block !important;
  }

  .home-page .page-main {
    display: block !important;
  }

  .home-page .video-hero {
    min-height: 620px !important;
  }
}

@media (max-width: 920px) {
  body.home-page {
    --home-nav-overlap: calc(env(safe-area-inset-top, 0px) + 66px);
  }

  .home-page .video-hero-content {
    top: calc(var(--home-nav-overlap) + 12px);
  }
}

@media (max-width: 720px) {
  .public-invite {
    width: 100%;
    padding-inline: 0;
    justify-items: center;
  }
}

.video-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: cinematic-zoom 18s ease-in-out infinite alternate;
}

.video-hero-media.is-autoplay-managed {
  opacity: 0;
}

.video-hero-media.is-autoplay-managed.is-playing {
  opacity: 1;
}

.video-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 13, 19, 0.6) 0%, rgba(10, 13, 19, 0.26) 42%, rgba(10, 13, 19, 0.72) 100%),
    linear-gradient(90deg, rgba(10, 13, 19, 0.42), rgba(10, 13, 19, 0.04) 50%, rgba(10, 13, 19, 0.42));
}

.video-hero-content {
  width: min(1040px, 100%);
  position: absolute;
  left: 50%;
  top: clamp(48px, 8svh, 96px);
  z-index: 1;
  text-align: center;
  margin: 0 auto;
  padding: 0 24px;
  transform: translateX(-50%);
  animation: hero-fade 900ms ease both;
}

.video-hero .eyebrow {
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 18px;
}

.video-hero h1 {
  margin: 0 auto;
  max-width: 960px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 5.2rem;
  line-height: 0.92;
  letter-spacing: -0.015em;
}

.video-hero-content > p:not(.eyebrow) {
  max-width: 800px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.1rem;
}

.video-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
  animation: hero-rise 900ms ease 180ms both;
}

.button.secondary.light {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(12px);
}

.home-summary {
  width: 100%;
  padding: clamp(54px, 8vw, 96px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(ellipse at 10% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 48%),
    linear-gradient(180deg, #0D0B08 0%, #0B0A07 100%);
  color: #F5EFE3;
}

.home-summary .eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

.summary-heading,
.summary-list {
  width: min(1240px, 100%);
  margin: 0 auto;
}

.summary-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1.15fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  margin-bottom: 42px;
}

.summary-heading h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
}

.summary-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.summary-list article {
  padding: 30px clamp(18px, 3vw, 36px) 10px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.summary-list article:last-child {
  border-right: 0;
}

.summary-list span {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--accent);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  opacity: 0.82;
}

.summary-list h3 {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-family: var(--font-heading);
  font-weight: 700;
}

@media (max-width: 700px) {
  .summary-heading {
    grid-template-columns: 1fr;
  }

  .summary-list {
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .summary-list article {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding: 24px 0 20px;
  }

  .summary-list article:last-child {
    border-bottom: 0;
  }
}

.summary-list p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.editorial-band {
  width: 100%;
  max-width: none;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: clamp(56px, 8vw, 96px) clamp(18px, 5vw, 72px);
}

.editorial-band > .section-intro,
.editorial-band > .section-grid,
.editorial-band > .timeline-grid {
  width: min(1240px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.hero,
.band,
.workflow,
.page-hero,
.dashboard-head,
.content-grid,
.pricing-grid,
.split,
.metric-grid,
.table-panel,
.tab-nav,
.scanner-layout,
.public-invite,
.result-card {
  width: min(1240px, calc(100% - 24px));
  margin-left: auto;
  margin-right: auto;
}

.hero,
.video-hero,
.page-hero,
.dashboard-head {
  scroll-margin-top: 128px;
}

.hero,
.band,
.workflow,
.page-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--surface-strong) 0%, color-mix(in srgb, var(--bg) 60%, var(--surface)) 100%);
  box-shadow: var(--shadow);
}

[data-theme="noir"] .hero,
[data-theme="noir"] .band,
[data-theme="noir"] .workflow,
[data-theme="noir"] .page-hero {
  border-color: var(--line);
  background:
    radial-gradient(ellipse at 80% 0%, rgba(201, 162, 75, 0.08), transparent 50%),
    linear-gradient(180deg, rgba(26, 20, 12, 0.96) 0%, rgba(14, 12, 9, 0.98) 100%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(201, 162, 75, 0.12);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.96fr);
  gap: 56px;
  align-items: center;
  padding: clamp(84px, 11vw, 132px) clamp(22px, 5vw, 76px) 64px;
  margin-top: 28px;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 28%),
    radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 32%),
    linear-gradient(180deg, var(--surface-strong) 0%, color-mix(in srgb, var(--bg) 40%, var(--surface)) 100%);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.hero::before {
  top: -80px;
  right: 12%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent);
}

.hero::after {
  bottom: -80px;
  left: 8%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
}

.hero-copy,
.hero-visual,
.band,
.workflow,
.page-hero,
.dashboard-head,
.metric-grid,
.content-grid,
.pricing-grid,
.split,
.scanner-layout,
.public-invite {
  position: relative;
  z-index: 1;
}

.eyebrow,
.small-label {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.hero-copy .eyebrow,
.page-hero > .eyebrow,
.dashboard-head .eyebrow,
.pricing-note .eyebrow,
.feature-banner .eyebrow,
.auth-form .eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 1.2;
  opacity: 0.88;
}

.hero-copy h1,
.page-hero h1,
.dashboard-head h1,
.auth-story h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.015em;
}

.hero-copy h1 {
  max-width: 760px;
  font-size: clamp(2.6rem, 6vw, 5.3rem);
}

.page-hero h1,
.dashboard-head h1 {
  max-width: 860px;
  font-size: clamp(2rem, 4vw, 4rem);
}

.id-line {
  margin: 10px 0 0;
  color: var(--gold-soft);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.hero-copy p,
.page-hero p,
.dashboard-subtitle,
.section-intro p,
.feature-banner p:last-child,
.auth-story p,
.invite-intro {
  color: var(--muted);
}

.hero-copy p,
.page-hero p {
  max-width: 700px;
  font-size: 1.08rem;
}

.hero-copy > p:not(.eyebrow) {
  margin-bottom: 24px;
}

.hero-points {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.hero-points-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 780px;
}

.hero-points span {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(36, 60, 89, 0.08);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  box-shadow: none;
}

.hero-points strong {
  font-size: 0.96rem;
}

.hero-points small {
  color: var(--muted);
}

.hero-visual {
  min-height: 620px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)),
    linear-gradient(135deg, rgba(63, 98, 142, 0.08), rgba(126, 164, 131, 0.08));
}

.hero-showcase {
  position: relative;
  width: min(620px, 100%);
  padding: 42px 22px 22px;
}

.showcase-frame {
  position: relative;
  min-height: 520px;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    linear-gradient(145deg, #e7e2d7 0%, #cab9a0 38%, #8e7a62 100%);
  box-shadow: 0 30px 72px rgba(33, 39, 52, 0.16);
}

.showcase-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22, 32, 51, 0.04), rgba(22, 32, 51, 0.22)),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 44%);
}

.showcase-card,
.invite-preview,
.card-preview {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 34px;
  color: #fff;
}

.showcase-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  min-height: 240px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(22, 32, 51, 0.82), rgba(22, 32, 51, 0.94));
  backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
}

.showcase-card::after,
.invite-preview::after,
.card-preview::after {
  content: "";
  position: absolute;
  inset: -34% auto auto 56%;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  transform: rotate(18deg);
}

.showcase-card h2,
.invite-preview h2,
.card-preview h1,
.card-preview h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.02;
}

.showcase-details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.showcase-details span,
.hero-note {
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  width: fit-content;
}

.hero-note {
  position: absolute;
  max-width: 230px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(36, 60, 89, 0.08);
  box-shadow: var(--shadow-soft);
}

.hero-note strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.94rem;
}

.hero-note small {
  color: var(--muted);
}

.hero-note.one {
  top: 54px;
  left: 0;
  animation: float-card 10s ease-in-out infinite;
}

.hero-note.two {
  right: 0;
  bottom: 18px;
  animation: float-card 12s ease-in-out infinite reverse;
}

.status-chip,
.badge,
.price-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 0.78rem;
  font-weight: 800;
}

.status-chip {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}

.badge,
.price-badge {
  color: var(--blue-deep);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.9);
}

.band,
.workflow,
.page-hero,
.dashboard-head {
  margin-top: 26px;
  padding: 34px clamp(18px, 5vw, 28px) 28px;
}

.section-intro {
  max-width: 760px;
  margin-bottom: 22px;
}

.section-intro h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
}

.section-intro-split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  gap: 24px;
  align-items: end;
}

.section-grid,
.content-grid,
.pricing-grid {
  display: grid;
  gap: 18px;
  padding: 0 clamp(18px, 5vw, 0px) 24px;
}

.section-grid,
.pricing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.features-grid {
  margin-top: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
}

.page-hero + .content-grid,
.page-hero + .pricing-grid,
.page-hero + .section-grid,
.page-hero + .band,
.page-hero + .split,
.page-hero + .table-panel,
.page-hero + .public-invite,
.dashboard-head + .metric-grid,
.dashboard-head + .content-grid,
.dashboard-head + .tab-nav,
.dashboard-head + .operation-grid,
.dashboard-head + .split,
.dashboard-head + .table-panel,
.dashboard-head + .filter-bar,
.dashboard-head + .panel {
  margin-top: 26px;
}

.rsvp-lock-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.rsvp-lock-panel > div {
  max-width: 720px;
}

.rsvp-lock-panel.is-unlocked {
  border-color: color-mix(in srgb, #d97706 55%, var(--line));
}

@media (max-width: 680px) {
  .rsvp-lock-panel {
    align-items: stretch;
    flex-direction: column;
  }
}

.section-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.section-grid article,
.panel,
.price-card,
.table-panel,
.filter-bar,
.result-card,
.metric-grid article,
.timeline-grid article {
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}

.section-grid article,
.panel,
.price-card,
.result-card,
.timeline-grid article {
  padding: var(--panel-pad);
}

.section-grid article,
.price-card,
.panel,
.metric-grid article,
.timeline-grid article,
.result-card,
.table-panel {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.section-grid article:hover,
.price-card:hover,
.panel:hover,
.metric-grid article:hover,
.timeline-grid article:hover,
.result-card:hover,
.table-panel:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.section-grid article::before,
.price-card::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.feature-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 4vw, 36px);
}

.feature-panel h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.18;
}

.feature-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  flex-shrink: 0;
}

.feature-icon svg {
  width: 22px;
  height: 22px;
}

.feature-lead {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: clamp(24px, 5vw, 56px);
  padding: clamp(32px, 5vw, 52px);
}

.feature-lead .feature-lead-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-lead h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  max-width: 18ch;
}

.feature-lead .feature-lead-points {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
  margin: 4px 0 0;
}

.feature-lead .feature-lead-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
}

.feature-lead .feature-lead-points li::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  flex-shrink: 0;
}

.feature-lead-mock {
  flex: 0 0 auto;
  width: clamp(200px, 36%, 340px);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)),
    var(--surface-dark, #1E2540);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px;
  gap: 10px;
}

.feature-mock-chip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.feature-mock-chip span {
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.feature-mock-title {
  height: 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  width: 70%;
  margin-top: 6px;
}

.feature-mock-rows {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.feature-mock-row {
  height: 40px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  display: grid;
  grid-template-columns: 32px 1fr 56px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}

.feature-mock-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

.feature-mock-line {
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
}

.feature-mock-badge {
  height: 20px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

@media (max-width: 820px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-lead {
    flex-direction: column;
    grid-column: auto;
  }

  .feature-lead-mock {
    width: 100%;
    aspect-ratio: 4 / 2.4;
  }

  .feature-mock-rows {
    grid-template-columns: repeat(2, 1fr);
  }
}

.about-unified-frame {
  padding: clamp(34px, 6vw, 64px);
}

.about-frame-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  min-height: 330px;
}

.about-brand-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px 10px;
  text-align: center;
  position: relative;
}

.about-brand-card::before {
  content: "";
  position: absolute;
  inset: 8% 8% auto;
  height: 190px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(245, 208, 122, 0.2), transparent 68%);
  pointer-events: none;
}

.about-brand-card img {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 30px;
  object-fit: contain;
  box-shadow: 0 24px 54px rgba(33, 39, 52, 0.18);
}

.about-brand-card strong {
  position: relative;
  font-family: var(--font-heading);
  font-size: 1.55rem;
  line-height: 1;
  color: var(--blue-deep);
}

.about-brand-card span {
  position: relative;
  max-width: 220px;
  color: var(--muted);
  font-size: 0.95rem;
}

.about-story-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 480px);
  gap: clamp(24px, 4vw, 44px);
  align-items: end;
  margin-top: clamp(28px, 5vw, 52px);
  padding-top: clamp(24px, 4vw, 38px);
  padding-bottom: 24px;
  border-top: 1px solid rgba(36, 60, 89, 0.08);
  border-bottom: 1px solid rgba(36, 60, 89, 0.08);
}

.about-story-intro h2,
.about-mission-grid h3,
.about-columns h3 {
  margin: 0;
}

.about-story-intro h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 0.98;
  letter-spacing: -0.018em;
  color: var(--blue-deep);
}

.about-story-intro p,
.about-columns p,
.about-workflow-note p,
.about-founder-note,
.about-columns li {
  color: var(--muted);
}

.about-mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 48px);
  margin-top: 26px;
}

.about-mission-grid article,
.about-columns article {
  min-width: 0;
}

.about-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 42px);
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(36, 60, 89, 0.08);
}

.about-columns ul {
  display: grid;
  gap: 9px;
  margin: 12px 0 0;
  padding-left: 18px;
}

.about-columns li::marker {
  color: var(--green-deep);
}

.about-mission-grid article,
.about-columns article {
  position: relative;
}

.about-mission-grid article::before,
.about-columns article::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.about-workflow-note {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(36, 60, 89, 0.08);
}

.about-workflow-note span {
  color: var(--blue-deep);
  font-weight: 900;
}

.about-workflow-note p {
  margin: 0;
}

.about-founder-note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(36, 60, 89, 0.08);
  font-size: 0.96rem;
}

.feature-icon {
  display: inline-grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 16px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--green), var(--blue));
}

.feature-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 20px;
  align-items: end;
  margin-bottom: 26px;
  padding: 22px 24px;
  border-radius: 20px;
  border: 1px solid rgba(36, 60, 89, 0.08);
  background: linear-gradient(135deg, rgba(126, 164, 131, 0.08), rgba(63, 98, 142, 0.08));
}

.feature-banner.compact {
  margin-bottom: 0;
}

.feature-banner h2,
.panel h2,
.price-card h2,
.section-grid h3,
.timeline-grid h3 {
  margin-top: 0;
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--blue-deep);
}

.price {
  margin: 0 0 10px;
  font-size: 2rem;
  font-weight: 900;
}

.price-card .button {
  margin-top: 14px;
}

.price-card .package-cta {
  gap: 0.35em;
}

.workflow .section-intro p:last-child {
  margin-bottom: 0;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.timeline-grid span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--green-deep), var(--blue));
  box-shadow: 0 10px 24px rgba(33, 39, 52, 0.1);
}

.dashboard-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

.dashboard-subtitle {
  max-width: 620px;
  margin: 10px 0 0;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  padding: 0 clamp(18px, 5vw, 0px) 24px;
}

.metric-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-grid article {
  padding: 18px;
}

.metric-grid span {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--blue-deep);
}

.metric-grid p {
  margin: 4px 0 0;
  color: var(--muted);
}

/* Admin live summary: reuse the metric-card look, but let the linked cards
   (payments, feedback, suggestions, AI work) be clickable shortcuts. */
.admin-live-grid a {
  display: block;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: inherit;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.admin-live-grid a:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}

.split,
.scanner-layout,
.public-invite {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 0 clamp(18px, 5vw, 0px) 24px;
}

.scanner-layout-live {
  grid-template-columns: minmax(0, 780px);
  justify-content: center;
}

.auth-shell {
  display: grid;
  place-items: start center;
  padding: 50px 18px;
}

.auth-layout {
  width: min(1160px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 480px);
  gap: 24px;
}

.account-settings-layout {
  width: min(780px, 100%);
  display: flex;
  justify-content: center;
}

.settings-layout {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

.settings-home-layout,
.settings-detail-layout {
  width: min(760px, 100%);
}

.settings-detail-layout {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.settings-detail-layout > * {
  width: 100%;
}

.settings-home-panel,
.settings-form-card {
  display: grid;
  gap: 22px;
  width: 100%;
}

.settings-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 18px;
}

.settings-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

.settings-profile-card h2,
.settings-profile-card h1,
.settings-profile-card p {
  margin: 0;
}

.settings-profile-card h1,
.settings-profile-card h2 {
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.settings-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #fff8e8;
  background:
    radial-gradient(circle at 72% 20%, rgba(245, 208, 122, 0.42), transparent 35%),
    linear-gradient(145deg, #050403, #263145);
  border: 1px solid rgba(245, 208, 122, 0.42);
  font-size: 1.45rem;
  font-weight: 900;
}

.settings-menu {
  display: grid;
  gap: 10px;
}

.settings-menu-home {
  gap: 12px;
}

.settings-menu-button {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(36, 60, 89, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--ink);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.settings-menu-home .settings-menu-button {
  min-height: 84px;
  align-content: center;
  padding: 18px;
}

.settings-menu-button:hover,
.settings-menu-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(245, 208, 122, 0.52);
  box-shadow: 0 18px 38px rgba(25, 43, 93, 0.1);
}

.settings-menu-button span {
  color: var(--muted);
  font-size: 0.88rem;
}

.settings-content,
.settings-form {
  display: grid;
  gap: 18px;
}

.settings-card {
  width: 100%;
}

.settings-section-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(36, 60, 89, 0.1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 208, 122, 0.1), transparent 28%),
    rgba(255, 255, 255, 0.58);
}

.settings-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.settings-section-heading h2,
.settings-section-heading p {
  margin: 0;
}

.settings-section-heading h2 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.settings-section-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--blue-deep);
  background: rgba(245, 208, 122, 0.16);
  border: 1px solid rgba(245, 208, 122, 0.32);
  font-weight: 900;
}

.settings-password-row,
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(36, 60, 89, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.56);
}

.settings-password-row small,
.settings-toggle-row small {
  display: block;
  margin-top: 4px;
}

.settings-toggle-row {
  justify-content: flex-start;
  cursor: pointer;
}

.settings-toggle-row input[type="checkbox"] {
  width: 22px;
  min-height: 22px;
  flex: 0 0 22px;
  accent-color: #d9ad55;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}

.settings-back-link {
  width: fit-content;
  font-weight: 800;
}

.settings-detail-back {
  justify-self: start;
}

.settings-detail-card {
  max-width: 680px;
  margin-inline: auto;
  padding: clamp(22px, 4vw, 34px);
}

.settings-detail-heading {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.settings-detail-heading .settings-section-icon {
  width: 54px;
  height: 54px;
  flex-basis: 54px;
  border-radius: 20px;
  font-size: 1.2rem;
}

.settings-detail-heading h1 {
  margin: 4px 0 0;
  font-size: clamp(1.8rem, 4vw, 2.55rem);
  line-height: 1;
}

.settings-detail-heading p:not(.eyebrow) {
  max-width: 48ch;
  margin-inline: auto;
}

.settings-detail-card .settings-form {
  width: min(520px, 100%);
  margin-inline: auto;
}

.settings-detail-card .settings-form p {
  display: grid;
  gap: 8px;
  margin: 0;
}

.settings-detail-actions {
  justify-content: center;
  padding-top: 4px;
}

.settings-password-card {
  width: min(680px, 100%);
  margin-inline: auto;
}

.logout-shell {
  min-height: calc(100svh - 230px);
  place-items: center;
}

.logout-card {
  width: min(560px, 100%);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(24px, 5vw, 40px);
  text-align: center;
}

.logout-card h1,
.logout-card p {
  margin: 0;
}

.logout-card h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
}

.logout-copy {
  display: grid;
  gap: 8px;
  max-width: 42ch;
}

.logout-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.auth-story {
  min-height: 100%;
  padding: 34px;
  border-radius: 22px;
  border: 1px solid rgba(36, 60, 89, 0.08);
  background:
    radial-gradient(circle at top right, rgba(63, 98, 142, 0.12), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(237, 241, 234, 0.92));
  box-shadow: var(--shadow-soft);
}

.auth-story h1 {
  font-size: clamp(2rem, 4vw, 3.3rem);
  margin-bottom: 14px;
}

.auth-points {
  flex-wrap: wrap;
  margin-top: 18px;
}

.auth-points span {
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.76);
}

.auth-form h2 {
  margin-top: 0;
}

.login-auth-shell {
  min-height: calc(100dvh - 150px);
  place-items: center;
  padding-block: clamp(30px, 7vh, 78px);
}

.login-auth-layout {
  width: min(480px, 100%);
  display: flex;
  justify-content: center;
}

.login-auth-layout .auth-form {
  width: 100%;
}

.login-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.login-eyebrow span + span::before {
  content: "/";
  margin-right: 8px;
  color: var(--muted);
}

.public-invite {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
}

.public-invite .invitation-card {
  justify-self: center;
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1528px);
  min-height: 0;
  aspect-ratio: auto;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 64px;
}

.invitation-card-frame {
  --card-frame-scale: 0.42;
  justify-self: center;
  position: relative;
  z-index: 1;
  width: 454px;
  height: 642px;
  overflow: visible;
}

.invitation-card-frame[data-layout="square"] {
  --card-design-w: 1080px;
  --card-design-h: 1080px;
}

.invitation-card-frame[data-layout="landscape"] {
  --card-design-w: 1920px;
  --card-design-h: 1080px;
}

.invitation-card-frame > .invitation-card {
  position: absolute;
  inset: 0 auto auto 0;
  transform: scale(var(--card-frame-scale));
  transform-origin: top left;
}

.invitation-card-frame.is-exporting {
  /* Lift the card out of the responsive flex/grid layout and pin it to a clean
     origin so html2canvas captures the whole design at native size, never
     clipped by columns, flex-shrink, sticky offsets or the viewport. */
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  flex: 0 0 auto;
  margin: 0;
  max-width: none;
  width: var(--card-design-w, 1080px) !important;
  height: var(--card-design-h, 1528px) !important;
}

.invitation-card-frame.is-exporting > .invitation-card {
  transform: none;
}

.public-invite .invitation-card[data-layout="square"] {
  width: var(--card-design-w, 1080px);
  min-height: auto;
  height: var(--card-design-h, 1080px);
  aspect-ratio: auto;
}

.public-invite .invitation-card[data-layout="landscape"] {
  width: var(--card-design-w, 1920px);
  height: var(--card-design-h, 1080px);
}

.public-invite .panel.form-shell {
  background: var(--surface-strong);
  padding: 26px 22px;
}

.public-invite .panel.form-shell h2 {
  margin: 10px 0;
  font-size: 1.55rem;
}

.public-invite .panel.form-shell p:last-child {
  margin-bottom: 0;
}

.public-card-offline-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.public-card-offline-actions .button {
  width: auto;
  max-width: 100%;
  justify-self: center;
}

.public-card-offline-actions small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.4;
}

/* ---- Public invitation: showcase + details rail ---- */
.invitation-showcase {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.invitation-showcase::before {
  content: "";
  position: absolute;
  inset: 4% 6% 0;
  z-index: 0;
  border-radius: 40px;
  background: radial-gradient(120% 92% at 50% 4%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 68%);
  filter: blur(40px);
  opacity: 0.65;
  pointer-events: none;
}

.invite-rail {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  min-width: 0;
}

.invite-rail-head {
  display: grid;
  gap: 14px;
}

.invite-rail-head .eyebrow {
  margin: 0;
}

.invite-rail-head .invite-rail-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.05rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.invite-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.invite-identity-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--accent-contrast);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover, var(--accent)));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 32%, transparent);
}

.invite-identity-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.invite-identity-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.invite-identity-text strong {
  font-size: 1.06rem;
  overflow-wrap: anywhere;
}

.invite-celebrant {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin: 0 0 4px;
  text-align: center;
}

.invite-celebrant img {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(5, 4, 3, 0.18);
}

.invite-celebrant-caption {
  display: grid;
  gap: 3px;
}

.invite-celebrant-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.invite-celebrant-caption strong {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

@media (min-width: 901px) {
  .invitation-showcase {
    position: sticky;
    top: clamp(80px, 9vh, 120px);
  }
}

@media (max-width: 900px) {
  .invitation-showcase {
    position: relative;
  }

  .invite-rail {
    width: 100%;
  }
}

.invite-intro {
  margin: 0 0 14px;
}

.invite-description {
  margin-top: 10px;
  margin-bottom: 0;
  line-height: 1.65;
}

.invitation-card .invite-description {
  width: 100%;
  max-height: none;
  overflow: visible;
  overflow-wrap: anywhere;
  margin-top: 0;
  padding: 10px 12px;
  border: 1px solid var(--card-chip-border, rgba(255, 255, 255, 0.16));
  border-radius: 14px;
  background: var(--card-readable-surface, rgba(5, 4, 3, 0.22));
  font-size: var(--card-description-size, 24px);
  font-weight: 800;
  line-height: 1.45;
}

.invite-deadline {
  margin: 0 0 14px;
  font-weight: 700;
  color: var(--ink);
}

.invite-choice-help {
  margin-top: 0;
  margin-bottom: 12px;
  line-height: 1.6;
  overflow-wrap: normal;
  text-wrap: pretty;
  word-break: normal;
}

.invite-detail-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
}

.invite-detail-label {
  font-weight: 800;
}

.invite-detail-label::after {
  content: ":";
  margin-left: 2px;
}

.invite-detail-value {
  display: inline-flex;
  align-items: baseline;
}

.invite-detail-note {
  margin-top: 0;
  margin-bottom: 14px;
}

.rsvp-status-card {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(245, 208, 122, 0.26);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 208, 122, 0.16), transparent 34%),
    rgba(245, 208, 122, 0.08);
}

.rsvp-status-card h3 {
  margin: 0;
  font-size: 1.25rem;
}

.rsvp-status-card p,
.rsvp-status-card small {
  margin: 0;
  line-height: 1.55;
}

.rsvp-status-card.is-attending {
  border-color: rgba(47, 122, 69, 0.34);
  background:
    radial-gradient(circle at 100% 0%, rgba(47, 122, 69, 0.18), transparent 34%),
    rgba(47, 122, 69, 0.08);
}

.rsvp-status-card.is-not-attending {
  border-color: rgba(180, 35, 24, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(180, 35, 24, 0.14), transparent 34%),
    rgba(180, 35, 24, 0.07);
}

.rsvp-status-card.is-checked-in {
  border-color: rgba(34, 115, 83, 0.36);
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 115, 83, 0.2), transparent 34%),
    rgba(34, 115, 83, 0.09);
}

/* Django renders RadioSelect as <div id="id_status"><div><label>…</label></div>…
   not the <ul>/<li> this block was originally written against, so the grid
   never applied and the three options stacked flush with no gap. Target the
   widget container itself; the ul/li selectors stay as a harmless fallback. */
.rsvp-choice-field #id_status,
.rsvp-choice-field ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

/* Option wrapper: a plain <div> on current Django, <li> historically. */
.rsvp-choice-field #id_status > div,
.rsvp-choice-field li {
  display: flex;
  margin: 0;
}

/* Scoped to the options on purpose — the unscoped `.rsvp-choice-field label`
   this replaces also matched the field's own "Status" heading, drawing it as
   a bordered pill above the real ones. */
.rsvp-choice-field #id_status label,
.rsvp-choice-field li label {
  flex: 1;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  /* Lighter than the field's own "Status" heading (800) so the group
     reads as heading + options, matching .field-package. */
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.rsvp-choice-field #id_status label:hover,
.rsvp-choice-field li label:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.rsvp-choice-field #id_status label:has(input:checked),
.rsvp-choice-field li label:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 12%, transparent);
}

.rsvp-choice-field input[type="radio"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  inline-size: 15px;
  block-size: 15px;
  margin: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 2px var(--surface-strong);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.rsvp-choice-field input[type="radio"]:checked {
  border-color: var(--primary);
  background: radial-gradient(circle, var(--primary) 0 45%, transparent 48%), var(--surface-strong);
  box-shadow: inset 0 0 0 2px var(--surface-strong);
}

.rsvp-choice-field input[type="radio"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ring) 32%, transparent);
  outline-offset: 2px;
}

/* The button column was stretched to match the status panel's height,
   giving "Save RSVP" a 64px-tall slab. Let it take its natural size and
   centre it against the panel instead. */
.rsvp-confirmation-row {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr);
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-2);
}

.rsvp-confirmation-row .button {
  min-height: 52px;
  padding-inline: var(--space-6);
}

.rsvp-inline-status {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(245, 208, 122, 0.24);
  border-radius: 18px;
  background: rgba(245, 208, 122, 0.08);
}

.rsvp-inline-status span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rsvp-inline-status strong {
  font-size: 1.18rem;
}

.rsvp-inline-status small {
  color: var(--muted);
  line-height: 1.45;
}

.rsvp-inline-status.is-attending {
  border-color: rgba(47, 122, 69, 0.34);
  background: rgba(47, 122, 69, 0.08);
}

.rsvp-inline-status.is-not-attending {
  border-color: rgba(180, 35, 24, 0.28);
  background: rgba(180, 35, 24, 0.07);
}

.rsvp-inline-status.is-pending {
  border-color: rgba(183, 121, 31, 0.28);
  background: rgba(255, 247, 214, 0.16);
}

@media (max-width: 720px) {
  .rsvp-choice-field #id_status,
  .rsvp-choice-field ul,
  .rsvp-confirmation-row {
    grid-template-columns: 1fr;
  }
}

.field-package #id_package {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Same widget shape as the RSVP group: the option wrapper is a <div>.
   Make it a flex item so both pills in a row match height. */
.field-package #id_package > div,
.field-package #id_package li {
  display: flex;
  margin: 0;
}

.field-package #id_package > div > label {
  flex: 1;
}

.field-package #id_package label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  font-weight: 500;
  line-height: 1.35;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.field-package #id_package label:hover {
  border-color: rgba(79, 124, 255, 0.35);
  background: rgba(79, 124, 255, 0.05);
}

.field-package #id_package label:has(input[type="radio"]:checked) {
  border-color: var(--primary);
  background: rgba(79, 124, 255, 0.08);
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.08);
}

.field-package #id_package input[type="radio"] {
  flex-shrink: 0;
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 3px var(--surface-strong);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.field-package #id_package input[type="radio"]:checked {
  border-color: var(--primary);
  background: radial-gradient(circle, var(--primary) 0 42%, transparent 45%), var(--surface-strong);
  box-shadow: inset 0 0 0 3px var(--surface-strong);
}

.field-package #id_package input[type="radio"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ring) 32%, transparent);
  outline-offset: 2px;
}

.field-package #id_package input[type="radio"]:disabled ~ *,
.field-package #id_package label:has(input[type="radio"]:disabled) {
  opacity: 0.6;
  cursor: default;
}

.field-package #id_package label:has(input[type="radio"]:disabled):hover {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.rsvp-status-actions {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.rsvp-status-actions p {
  margin: 0;
}

.invitation-card-inner {
  display: grid;
  width: 100%;
  gap: 10px;
  justify-items: center;
  align-content: center;
  text-align: center;
}

.invitation-card-heading {
  display: grid;
  gap: 7px;
  justify-items: center;
}

.invitation-card-heading h1 {
  font-size: var(--card-heading-size, 67px);
  max-width: 16ch;
  line-height: 1;
}

.invitation-card-subtitle {
  max-width: 30ch;
  font-size: var(--card-guest-size, 31px);
  font-family: var(--card-guest-font, "Cormorant Garamond"), var(--font-heading);
  font-weight: 900;
  line-height: 1.25;
  color: var(--card-guest-color, var(--card-muted, rgba(255, 248, 232, 0.78)));
}

.invitation-guest-block,
.invitation-host-block {
  display: grid;
  gap: 4px;
  width: 100%;
  justify-items: center;
  padding: 10px 12px;
  border: 1px solid var(--card-panel-border, rgba(245, 208, 122, 0.28));
  border-radius: 16px;
  background: var(--card-readable-surface, rgba(5, 4, 3, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.invitation-guest-block span,
.invitation-host-block span,
.invitation-detail-grid span {
  color: var(--card-muted, rgba(255, 248, 232, 0.72));
  font-size: calc(var(--card-detail-size, 22px) * 0.58);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invitation-host-block span {
  font-size: calc(var(--card-host-size, 25px) * 0.52);
}

.invitation-guest-block strong {
  font-size: 1.3rem;
  line-height: 1.06;
}

.invitation-host-block strong {
  font-size: var(--card-host-size, 25px);
  line-height: 1.18;
}

.invitation-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.invitation-detail-grid p {
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 62px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--card-chip-border, rgba(255, 255, 255, 0.16));
  border-radius: 14px;
  background: var(--card-readable-surface, rgba(5, 4, 3, 0.22));
}

.invitation-detail-grid strong {
  font-size: var(--card-detail-size, 22px);
  line-height: 1.22;
}

.public-invite .form-shell label,
.form-shell label {
  font-weight: 800;
}

.narrow {
  max-width: 760px;
}

.event-form [data-contribution-field][hidden] {
  display: none !important;
}

.event-form [data-contribution-field] {
  justify-items: center;
  text-align: center;
}

.event-photo-picker {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
}

.event-photo-picker:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 14%, transparent);
}

.form-field.has-error .event-photo-picker,
.form-field.has-client-error .event-photo-picker {
  border-color: var(--red);
}

.event-photo-preview {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 154px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 86%, var(--primary) 4%);
}

.event-photo-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 154px;
  object-fit: cover;
}

.event-photo-placeholder {
  display: grid;
  justify-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.event-photo-placeholder span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--primary);
  background: var(--surface);
  font-size: 1.7rem;
  line-height: 1;
}

.event-photo-placeholder strong,
.event-photo-details > strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.event-photo-placeholder small,
.event-photo-filename {
  color: var(--muted);
  font-size: 0.82rem;
}

.event-photo-details {
  display: grid;
  align-content: center;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
}

.event-photo-details > strong,
.event-photo-details .helptext {
  min-width: 0;
  overflow-wrap: anywhere;
}

.event-photo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.event-photo-button {
  margin: 0;
  min-height: 42px;
  cursor: pointer;
}

.event-photo-button.is-focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ring) 32%, transparent);
  outline-offset: 2px;
}

.event-photo-filename {
  flex: 1 1 150px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-photo-input {
  position: absolute;
  width: 1px !important;
  min-height: 1px !important;
  height: 1px;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .auth-shell {
    padding-inline: 12px;
  }

  .event-form {
    width: 100%;
    padding: 16px;
  }

  .event-form .form-field > label {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .event-photo-picker {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 10px;
  }

  .event-photo-preview,
  .event-photo-preview img {
    min-height: 150px;
  }

  .event-photo-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .event-photo-button {
    width: 100%;
    justify-content: center;
  }
}

.pricing-note {
  width: min(calc(100% - 36px), 760px);
  margin: 10px auto 28px;
  text-align: center;
}

.pricing-note .eyebrow {
  margin-inline: auto;
}

.form-shell {
  width: min(100%, 560px);
}

.account-settings-layout .form-shell {
  width: 100%;
}

.wide-form {
  width: min(100%, 860px);
}

.event-form {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: clip;
}

.form-shell p {
  display: grid;
  gap: var(--field-gap);
  margin: 0 0 var(--field-stack);
}

.form-field {
  display: grid;
  gap: var(--field-gap);
  min-width: 0;
  margin: 0 0 var(--field-stack);
}

/* The last field should not add trailing space above the action row,
   which brings its own margin. */
.form-shell p:last-child,
.form-field:last-child {
  margin-bottom: 0;
}

.form-field > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.required-marker {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--blue-deep);
  background: rgba(245, 208, 122, 0.12);
  border: 1px solid rgba(245, 208, 122, 0.24);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.form-error-summary {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(180, 35, 24, 0.22);
  background: rgba(255, 251, 250, 0.94);
  color: var(--red);
}

.form-error-summary strong {
  display: block;
  margin-bottom: 4px;
  color: var(--red);
}

.form-error-summary p {
  color: var(--red);
}

.form-error-summary p {
  margin: 0;
}

.form-error-links {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 18px;
}

.form-error-links a {
  color: var(--red);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.form-error-links a:hover,
.form-error-links a:focus-visible {
  text-decoration: underline;
}

.form-field.has-error input:not([type="radio"]):not([type="checkbox"]),
.form-field.has-client-error input:not([type="radio"]):not([type="checkbox"]),
.form-field.has-error select,
.form-field.has-client-error select,
.form-field.has-error textarea,
.form-field.has-client-error textarea,
.form-field.has-error #id_package label,
.form-field.has-client-error #id_package label,
.was-validated input:not([type="radio"]):not([type="checkbox"]):invalid,
.was-validated select:invalid,
.was-validated textarea:invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 5px rgba(180, 35, 24, 0.08);
}

input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font: inherit;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

textarea {
  min-height: 104px;
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(79, 124, 255, 0.3);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 6px rgba(79, 124, 255, 0.08);
  transform: translateY(-1px);
}

input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  appearance: auto;
  color-scheme: dark;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  filter: invert(78%) sepia(52%) saturate(416%) hue-rotate(357deg) brightness(105%) contrast(93%);
}

p:has(.tz-phone-input),
.form-field:has(.tz-phone-input) {
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0;
  align-items: stretch;
}

p:has(.tz-phone-input) label,
.form-field:has(.tz-phone-input) label {
  grid-column: 1 / -1;
  grid-row: 1;
}

p:has(.tz-phone-input) .helptext,
p:has(.tz-phone-input) .errorlist,
.form-field:has(.tz-phone-input) .helptext,
.form-field:has(.tz-phone-input) .errorlist {
  grid-column: 1 / -1;
  grid-row: 3;
}

p:has(.tz-phone-input)::before,
.form-field:has(.tz-phone-input)::before {
  content: "🇹🇿 Tanzania +255";
  display: inline-flex;
  align-items: center;
  grid-column: 1;
  grid-row: 2;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  font-weight: 800;
  white-space: nowrap;
}

.tz-phone-input {
  grid-column: 2;
  grid-row: 2;
  border-radius: 0 12px 12px 0;
}

.helptext,
small,
.list-row span,
.guest-summary span {
  color: var(--muted);
}

.errorlist {
  color: var(--red);
  padding-left: 18px;
}

.table-panel {
  overflow-x: auto;
  margin-bottom: 24px;
}

.table-panel.flat {
  box-shadow: none;
  margin-top: 14px;
}

/* Payment approvals: inset panel headings/intro from the edges, center footer link */
.payment-approvals-page .table-panel > h2 {
  margin: 0;
  padding: 20px clamp(16px, 3vw, 22px) 10px;
}

.payment-approvals-page .table-panel > p {
  margin: 0 0 10px;
  padding: 0 clamp(16px, 3vw, 22px);
}

.payment-approvals-page .approvals-footer {
  margin: 8px 0 24px;
  text-align: center;
}

/* WhatsApp delivery: .table-panel frames its table edge-to-edge, so headings and
   intro copy need their own inset and the outer columns need to clear the corner
   radius. One shared value keeps every row on the same optical margin. */
.event-whatsapp-messages-page .table-panel {
  --table-panel-inset: clamp(18px, 3vw, 26px);
  padding-bottom: 6px;
}

.event-whatsapp-messages-page .table-panel > h2 {
  margin: 0;
  padding: 22px var(--table-panel-inset) 10px;
}

.event-whatsapp-messages-page .table-panel > p {
  margin: 0 0 16px;
  padding: 0 var(--table-panel-inset);
  max-width: 78ch;
}

.event-whatsapp-messages-page .table-panel th,
.event-whatsapp-messages-page .table-panel td {
  padding: 16px 14px;
}

.event-whatsapp-messages-page .table-panel th:first-child,
.event-whatsapp-messages-page .table-panel td:first-child {
  padding-left: var(--table-panel-inset);
}

.event-whatsapp-messages-page .table-panel th:last-child,
.event-whatsapp-messages-page .table-panel td:last-child {
  padding-right: var(--table-panel-inset);
}

/* The last row's divider would otherwise float above the panel's bottom edge. */
.event-whatsapp-messages-page .table-panel tbody tr:last-child td {
  border-bottom: 0;
}

/* Stacked detail lines inside a cell read as one block, not four loose lines. */
.event-whatsapp-messages-page .table-panel td small {
  display: inline-block;
  margin-top: 4px;
  line-height: 1.45;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

th,
td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, rgba(57, 212, 143, 0.08), rgba(79, 124, 255, 0.08));
}

tbody tr:hover td {
  background: linear-gradient(90deg, rgba(57, 212, 143, 0.05), rgba(79, 124, 255, 0.05));
}

.list {
  display: grid;
  gap: 8px;
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(36, 60, 89, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

.list-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.list-row > span {
  text-align: right;
}

@media (max-width: 560px) {
  .list-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .list-row > span {
    text-align: left;
  }
}

.filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 180px auto;
  gap: 12px;
  padding: 14px;
  margin-bottom: 16px;
}

.filter-bar--inline {
  grid-template-columns: minmax(0, 460px) auto auto;
  justify-content: start;
  align-items: center;
}

.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 clamp(18px, 5vw, 0px) 24px;
}

.tab-nav a {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(36, 60, 89, 0.08);
  background: rgba(255, 255, 255, 0.76);
  font-weight: 800;
}

.package-command {
  width: min(1240px, calc(100% - 24px));
  margin: 0 auto 24px;
}

.package-command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.package-command-head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 3rem);
}

.operation-grid {
  width: min(1240px, calc(100% - 24px));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 auto 24px;
}

.package-command .operation-grid {
  width: 100%;
  margin: 0 0 22px;
}

/* Event overview tools. Previously a rigid auto-fill grid with 220px
   minimum columns and width:100% buttons, so short labels like
   "Contributions" sat in a box nearly twice their width. A wrapping
   flex row lets each pill size to its own label instead. */
.action-grid {
  width: min(1240px, calc(100% - 24px));
  margin: 0 auto 24px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.action-grid .button {
  flex: 0 1 auto;
  width: auto;
  justify-content: center;
  text-align: center;
}

.button.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.limit-card,
.operation-card {
  display: grid;
  gap: 12px;
}

.limit-card {
  min-height: 160px;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(36, 60, 89, 0.08);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.limit-card strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
}

.limit-card p,
.operation-card p {
  margin: 0;
}

.feature-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

/* Messages page: align every block to the page width, keep an even vertical
   rhythm, flow the stat cards to fit, and let the forms fill their columns. */
.event-messages-page .page-main > .panel {
  width: min(1240px, calc(100% - 24px));
  margin-inline: auto;
}

.event-messages-page .page-main > * + * {
  margin-top: 22px;
}

.event-messages-page .feature-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Below the auto-fit floor a single 200px track would leave one card per row,
   so pin phones to a two-up instead. Placed after the rules above so it is not
   outranked by them. */
@media (max-width: 480px) {
  .feature-status-grid,
  .event-messages-page .feature-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.event-messages-page .form-shell {
  width: 100%;
}

.bulk-template-panel {
  display: grid;
  gap: 18px;
}

.bulk-template-panel .messages-section-head {
  margin-bottom: 0;
}

.bulk-template-form {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(260px, 1fr);
  gap: 18px 22px;
  align-items: end;
}

.bulk-template-field {
  margin: 0;
}

.bulk-resend-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 82px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-strong) 58%, transparent);
  cursor: pointer;
}

.bulk-resend-option input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.bulk-resend-option span,
.bulk-resend-option small {
  display: block;
}

.bulk-resend-option small {
  margin-top: 5px;
  line-height: 1.45;
}

.bulk-template-form .form-actions {
  grid-column: 1 / -1;
  margin-top: 0;
}

.bulk-template-status {
  margin: 0;
}

@media (max-width: 760px) {
  .bulk-template-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .bulk-template-form .form-actions {
    grid-column: auto;
  }
}

/* ── Message templates: preview cards + editor with live preview ─────── */
.messages-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.messages-section-head h2 {
  margin: 6px 0 4px;
}

.messages-section-head p {
  margin: 0;
  color: var(--muted);
}

.template-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.template-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 60%, transparent);
}

.template-card-head {
  display: grid;
  gap: 8px;
}

.template-card-head strong {
  font-size: 1.02rem;
}

.template-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.template-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-card-actions .button {
  min-height: 38px;
}

.template-empty {
  display: grid;
  justify-items: start;
  gap: 12px;
}

/* Chat-style preview bubble shared by the cards and the editor */
.message-preview-device {
  padding: 14px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(57, 212, 143, 0.12), transparent 60%),
    color-mix(in srgb, var(--bg) 60%, var(--surface));
  border: 1px solid var(--line);
}

.message-preview-bubble {
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.message-preview-bubble[data-empty="true"] {
  color: var(--muted);
  font-style: italic;
}

.message-template-page .template-editor {
  width: min(1240px, calc(100% - 24px));
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 20px;
  align-items: start;
}

/* This form uses bare <label> + control + errors with no .form-field
   wrapper, so a single flat gap spaced a label from its own input exactly
   as far as from the previous field — nothing read as a group. Keep the
   gap tight and push the groups apart at each label instead. */
.template-editor-form {
  width: 100%;
  display: grid;
  gap: var(--field-gap);
}

.template-editor-form > label {
  font-weight: 800;
  margin-top: var(--space-3);
}

.template-editor-form > label:first-of-type {
  margin-top: 0;
}

.template-editor-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.template-editor-row > div {
  display: grid;
  gap: var(--field-gap);
}

.template-editor-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-weight: 700;
}

.template-editor-check input {
  width: auto;
}

.template-variable-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 4px;
}

.template-chip {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px dashed var(--line-strong);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink);
  font-size: 0.78rem;
  font-family: monospace;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.template-chip:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent);
}

.template-editor-preview {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 12px;
}

.message-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.template-variable-legend {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.template-variable-legend > p {
  margin: 0 0 8px;
  font-weight: 800;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.template-variable-legend ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.template-variable-legend li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.template-variable-legend code {
  font-size: 0.78rem;
  color: var(--accent);
}

.template-variable-legend span {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: right;
}

.badge-muted {
  opacity: 0.66;
}

@media (max-width: 920px) {
  .message-template-page .template-editor {
    grid-template-columns: 1fr;
  }

  .template-editor-preview {
    position: static;
  }
}

.feature-status {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(36, 60, 89, 0.08);
  background: rgba(255, 255, 255, 0.56);
}

.feature-status span {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
}

.feature-status.included span {
  color: #064e3b;
  background: #d1fadf;
}

.feature-status.locked span {
  color: #7a271a;
  background: #fee4e2;
}

.operations-actions,
.compact-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.operations-actions > *,
.operations-actions .inline-action-form {
  min-width: 0;
}

@media (max-width: 560px) {
  .operations-actions > *,
  .operations-actions .inline-action-form,
  .operations-actions .button {
    width: 100%;
  }
}

.compact-form select {
  flex: 1 1 240px;
}

.compact-form .button {
  width: auto;
}

.split.flush {
  width: 100%;
  padding: 0;
}

.operations-list {
  margin-bottom: 18px;
}

#id_package {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#id_package li {
  margin: 0;
}

#id_package label {
  min-width: 0;
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.68);
  cursor: pointer;
  line-height: 1.35;
  overflow-wrap: anywhere;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#id_package label > * {
  min-width: 0;
}

#id_package input {
  width: 18px;
  min-height: 18px;
  flex: 0 0 auto;
  accent-color: #d9ad55;
}

#id_package label:has(input:checked) {
  border-color: rgba(245, 208, 122, 0.7);
  box-shadow: 0 0 0 4px rgba(245, 208, 122, 0.12);
}

#id_package label:hover {
  transform: translateY(-2px);
}

.event-form .field-package #id_package input[type="radio"] {
  width: 14px;
  min-width: 14px;
  min-height: 14px;
  inline-size: 14px;
  block-size: 14px;
  padding: 0;
  border-width: 1.5px;
  box-shadow: none;
}

.event-form .field-package #id_package input[type="radio"]:checked {
  background: radial-gradient(circle, var(--primary) 0 44%, transparent 48%), var(--surface-strong);
  box-shadow: none;
}

.scanner-box {
  min-height: 420px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
  background: #172026;
}

.scanner-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scanner-help {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 14px;
  border-radius: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
}

.scanner-form {
  gap: 14px;
}

.scanner-instructions {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.55;
}

.scanner-camera {
  position: relative;
  min-height: min(58vh, 430px);
  overflow: hidden;
  border: 1px solid rgba(245, 208, 122, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 42%, rgba(245, 208, 122, 0.12), transparent 28%),
    linear-gradient(145deg, #050403, #171006);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 210, 0.06);
}

.scanner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.28;
  transition: opacity 180ms ease;
}

.scanner-video video,
.scanner-video canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.scanner-video img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  background: #050403;
}

.scanner-video br,
.scanner-video button,
.scanner-video select,
.scanner-video a {
  display: none !important;
}

.scanner-camera.is-active .scanner-video {
  opacity: 1;
}

.scanner-camera-placeholder {
  position: absolute;
  inset: 18px;
  z-index: 1;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px dashed rgba(245, 208, 122, 0.34);
  border-radius: 18px;
  color: #fff8e8;
  text-align: center;
  background: rgba(5, 4, 3, 0.34);
  transition: opacity 180ms ease;
}

.scanner-camera-placeholder strong {
  color: #fff2bc;
  font-size: 1.1rem;
}

.scanner-camera-placeholder span {
  color: rgba(255, 248, 232, 0.74);
}

.scanner-camera.is-active .scanner-camera-placeholder {
  opacity: 0;
  pointer-events: none;
}

.scanner-controls {
  display: grid;
  gap: 10px;
}

.scanner-controls #stop-camera {
  min-height: 42px;
  justify-self: start;
  padding: 9px 16px;
}

.scanner-start-button {
  min-height: 54px;
  font-size: 1rem;
}

.scanner-status {
  display: block;
  min-height: 1.35em;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.scanner-status[data-tone="success"] {
  color: #2f7a45;
}

.scanner-status[data-tone="warning"] {
  color: #b7791f;
}

.scanner-status[data-tone="error"] {
  color: var(--red);
}

.scanner-permission-help {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

.scanner-permission-help[hidden] {
  display: none;
}

.scanner-live-result {
  position: absolute;
  inset: 16px;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 22px;
  border-radius: 20px;
  border: 1px solid rgba(245, 208, 122, 0.24);
  color: #fff8e8;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(5, 4, 3, 0.9), rgba(23, 16, 6, 0.82));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}

.scanner-live-result[hidden] {
  display: none;
}

.scanner-live-result h3,
.scanner-live-result p {
  margin: 0;
}

.scanner-live-result h3 {
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  line-height: 1.1;
  color: #fff2bc;
}

.scanner-live-result p {
  max-width: 36rem;
  color: rgba(255, 248, 232, 0.84);
  font-weight: 800;
  line-height: 1.45;
}

.scanner-live-result.success {
  border-color: rgba(47, 122, 69, 0.32);
  background:
    radial-gradient(circle at 50% 0%, rgba(69, 190, 107, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(9, 54, 25, 0.94), rgba(5, 4, 3, 0.82));
}

.scanner-live-result.warning {
  border-color: rgba(183, 121, 31, 0.32);
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 208, 122, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(91, 58, 11, 0.94), rgba(5, 4, 3, 0.82));
}

.scanner-live-result.error {
  border-color: rgba(180, 35, 24, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(239, 68, 68, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(91, 18, 18, 0.94), rgba(5, 4, 3, 0.82));
}

.scanner-live-result-details {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.scanner-live-guest {
  color: #ffffff;
  font-size: clamp(1.08rem, 3vw, 1.45rem);
  font-weight: 900;
}

.scanner-live-capacity {
  padding: 10px 14px;
  border-radius: 999px;
  color: #172026;
  background: #fff2bc;
  font-size: clamp(0.98rem, 2.8vw, 1.18rem);
  font-weight: 950;
}

.scanner-live-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.scanner-result-ok {
  min-height: 52px;
  width: min(100%, 320px);
  font-size: 1rem;
}

.scanner-fallbacks {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.scanner-fallbacks summary,
.scanner-activity summary {
  padding: 13px 15px;
  cursor: pointer;
  font-weight: 850;
}

.scanner-fallback-fields {
  display: grid;
  gap: 12px;
  padding: 0 15px 15px;
}

.scanner-fallbacks p {
  margin: 0;
}

.scanner-fallbacks input[type="file"] {
  width: 100%;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.scanner-activity {
  width: min(780px, calc(100% - 36px));
  margin: 0 auto 24px;
}

.scanner-activity[open] summary {
  margin-bottom: 12px;
}

.result-card.success {
  border-color: #abefc6;
  background: #f6fef9;
}

.result-card.warning {
  border-color: #fecdca;
  background: #fffbfa;
}

.guest-summary {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.invitation-card {
  min-height: 0;
}

.card-editor-head .button-row {
  align-items: center;
}

.cardkit-editor {
  display: grid;
  grid-template-columns: minmax(320px, 440px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.cardkit-controls {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 18px;
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.cardkit-control-head,
.cardkit-layer-title,
.cardkit-stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cardkit-control-head h2,
.cardkit-stage-toolbar h2 {
  margin: 0;
}

.cardkit-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cardkit-template-tile {
  position: relative;
  min-height: 126px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: #fff8e8;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.cardkit-template-tile::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  pointer-events: none;
}

.cardkit-template-tile span,
.cardkit-template-tile small,
.cardkit-template-tile strong {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  color: var(--card-ink, #fff8e8);
  text-shadow: var(--card-text-shadow, 0 2px 14px rgba(5, 4, 3, 0.48));
}

.cardkit-template-tile span,
.cardkit-template-tile small {
  color: var(--card-muted, rgba(255, 248, 232, 0.72));
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cardkit-template-tile strong {
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--swatch-title-surface, rgba(5, 4, 3, 0.28));
  font-size: 0.92rem;
  line-height: 1.1;
}

.cardkit-template-tile.is-selected {
  outline: 3px solid var(--secondary, #d9ad55);
  outline-offset: 2px;
}

.cardkit-template-tile.is-locked {
  cursor: not-allowed;
  filter: grayscale(0.4);
  opacity: 0.6;
}

.cardkit-layer-stack {
  display: grid;
  gap: 12px;
}

.cardkit-layer {
  display: grid;
  gap: var(--field-gap);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
}

/* Like .template-editor-form, these are bare label/control pairs with no
   .form-field wrapper. Add separation at the label so each control groups
   with its own label instead of floating between two of them. */
.cardkit-layer > label {
  margin-top: var(--space-2);
}

.cardkit-layer-title span {
  font-weight: 900;
}

.file-upload-field {
  display: grid;
  gap: 6px;
}

.image-uploader {
  position: relative;
  cursor: pointer;
  border: 2px dashed var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 180ms ease;
}

.image-uploader:hover {
  border-color: var(--primary);
}

.image-uploader-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.image-uploader-display {
  position: relative;
  min-height: 110px;
}

.image-uploader-display img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
}

.image-uploader-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 110px;
  color: var(--muted);
  text-align: center;
}

.image-uploader-empty span {
  font-size: 0.85rem;
  font-weight: 600;
}

.image-uploader-empty small {
  font-size: 0.75rem;
}

.image-uploader-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 180ms ease;
}

.image-uploader:hover .image-uploader-overlay {
  opacity: 1;
}

.image-uploader-overlay--ready {
  opacity: 1;
  background: rgba(16, 100, 60, 0.72);
}

.cardkit-layer-title small,
.cardkit-layer > small {
  color: var(--muted);
}

.cardkit-layer label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.cardkit-layer input,
.cardkit-layer textarea,
.cardkit-layer select {
  width: 100%;
}

.cardkit-layer input[type="color"] {
  width: 100%;
  min-height: 44px;
  padding: 4px;
}

.cardkit-static-field {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-strong) 66%, transparent);
}

.cardkit-static-field span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cardkit-static-field strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.cardkit-color-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.scanner-live-result-actions .button {
  min-height: 52px;
}

.cardkit-guest-color-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.cardkit-guest-color-control .button {
  min-height: 44px;
  white-space: nowrap;
}

.cardkit-guest-color-control .button.is-active {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.cardkit-layer-title--preview {
  margin-top: var(--space-2);
}

.cardkit-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
}

.cardkit-segmented button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.cardkit-segmented button.is-active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.cardkit-segmented--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cardkit-field-hint {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.field-errors,
.cardkit-layer .errorlist {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #fecdca;
  border-radius: 8px;
  color: #7a271a;
  background: #fffbfa;
  font-size: 0.84rem;
  font-weight: 800;
  list-style: none;
}

.cardkit-stage-wrap {
  display: grid;
  gap: 14px;
}

.cardkit-stage-toolbar {
  min-height: 76px;
}

.cardkit-layout-toggle {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
}

.cardkit-layout-toggle button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.cardkit-layout-toggle button.is-active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.cardkit-stage {
  display: grid;
  place-items: center;
  min-height: 720px;
  padding: clamp(16px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(0deg, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
    color-mix(in srgb, var(--surface-strong) 68%, transparent);
}

.cardkit-live-preview {
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1528px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 64px;
  font-family: var(--editor-font, inherit);
  zoom: var(--card-editor-zoom, 0.42);
}

.cardkit-live-preview[data-layout="square"] {
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1080px);
  min-height: auto;
  aspect-ratio: auto;
}

.cardkit-live-preview[data-layout="landscape"] {
  width: var(--card-design-w, 1920px);
  height: var(--card-design-h, 1080px);
  min-height: auto;
  aspect-ratio: auto;
  zoom: var(--card-editor-landscape-zoom, 0.3);
}

.cardkit-rendered[data-layout="landscape"] {
  width: var(--card-design-w, 1920px);
  height: var(--card-design-h, 1080px);
  min-height: auto;
  aspect-ratio: auto;
}

.cardkit-rendered[data-layout="square"] {
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1080px);
}

.cardkit-rendered:not([data-layout]),
.cardkit-rendered[data-layout="portrait"] {
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1528px);
}

.public-invite .invitation-card.cardkit-rendered[data-layout="landscape"] {
  min-height: auto;
}

.cardkit-rendered {
  font-family: var(--editor-font, inherit);
  font-size: 36px;
  line-height: 1.25;
}

.cardkit-rendered .cardkit-preview-content,
.cardkit-rendered .invitation-card-inner {
  position: absolute;
  left: var(--card-info-x, 50%);
  top: var(--card-info-y, 48%);
  z-index: 3;
  width: var(--card-info-w, 62%);
  max-width: 100%;
  text-align: var(--card-info-align, center);
  transform: translate(-50%, -50%) scale(var(--card-info-scale, 1));
  transform-origin: center;
}

.cardkit-rendered .invitation-card-inner {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, var(--card-surface-opacity, 0.78));
  border: 1px solid rgba(245, 208, 122, calc(0.28 * var(--card-surface-opacity, 0.78)));
  box-shadow: 0 18px 48px rgba(0, 0, 0, calc(0.12 * var(--card-surface-opacity, 0.78)));
}

.cardkit-rendered .qr-wrap {
  position: absolute;
  left: var(--card-qr-x, 50%);
  top: var(--card-qr-y, 84%);
  z-index: 4;
  box-sizing: content-box;
  width: var(--card-qr-size, 14%);
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 18px;
  aspect-ratio: 1;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.cardkit-rendered > .helptext,
.cardkit-rendered .invitation-card-qr-help {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 4;
  width: min(82%, 420px);
  margin: 0;
  text-align: center;
  transform: translateX(-50%);
}

.cardkit-preview-qr {
  display: grid;
  place-items: center;
  border: 8px solid var(--card-qr-bg, #fff);
  background:
    linear-gradient(90deg, #111 12px, transparent 12px) 0 0 / 28px 28px,
    linear-gradient(0deg, #111 12px, transparent 12px) 0 0 / 28px 28px,
    #fff;
}

.cardkit-preview-qr span {
  display: block;
  width: 88%;
  aspect-ratio: 1;
  border: 8px solid #111;
  background: #fff;
}

.cardkit-preview-content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 13px;
  width: min(100%, 430px);
}

.cardkit-preview-content h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.7rem);
  line-height: 0.98;
}

.cardkit-preview-content p {
  margin: 0;
}

.cardkit-preview-details {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.cardkit-preview-details p {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--card-chip-border, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
  background: var(--card-readable-surface, rgba(5, 4, 3, 0.22));
}

.cardkit-preview-details span {
  color: var(--card-muted, rgba(255, 248, 232, 0.72));
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cardkit-live-preview .card-logo,
.cardkit-live-preview .card-host-photo {
  max-width: none;
  align-self: flex-start;
}

.cardkit-live-preview .card-logo {
  width: 82px;
}

.cardkit-live-preview .card-host-photo {
  width: 112px;
}

.cardkit-live-preview.template-saffron-split-bloom > .cardkit-preview-content,
.cardkit-live-preview.template-crimson-floral-save-date > .cardkit-preview-content,
.cardkit-live-preview.template-royal-plum-florals > .cardkit-preview-content,
.cardkit-live-preview.template-peacock-regalia > .cardkit-preview-content,
.cardkit-live-preview.template-savanna-heritage > .cardkit-preview-content,
.cardkit-live-preview.template-family-sendoff > .cardkit-preview-content {
  width: min(44%, 320px);
  max-width: 44%;
  align-self: flex-end;
  text-align: center;
}

.cardkit-live-preview.cardkit-rendered > .cardkit-preview-content {
  position: absolute;
  width: var(--card-info-w, 62%);
  max-width: 100%;
  align-self: auto;
  text-align: var(--card-info-align, center);
}

.cardkit-live-preview.template-aurelia-black-tie > .cardkit-preview-content,
.cardkit-live-preview.template-botanic-noir > .cardkit-preview-content,
.cardkit-live-preview.template-pearl-arch > .cardkit-preview-content {
  width: min(100%, 430px);
  max-width: 100%;
  align-self: center;
  text-align: center;
}

@media (max-width: 1040px) {
  .cardkit-editor {
    grid-template-columns: 1fr;
  }

  .cardkit-controls {
    position: static;
    max-height: none;
  }

  .cardkit-stage {
    min-height: 620px;
  }
}

@media (max-width: 680px) {
  .cardkit-template-grid,
  .cardkit-color-row {
    grid-template-columns: 1fr;
  }

  .cardkit-stage-toolbar,
  .cardkit-control-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .cardkit-layout-toggle {
    width: 100%;
  }

  .cardkit-layout-toggle button {
    width: 100%;
  }

  .cardkit-stage {
    min-height: 520px;
    padding: 12px;
  }

  .cardkit-live-preview,
  .cardkit-live-preview[data-layout="square"] {
    zoom: var(--card-editor-zoom-mobile, 0.32);
  }

  .cardkit-live-preview[data-layout="landscape"] {
    zoom: var(--card-editor-landscape-zoom-mobile, 0.2);
  }

  .cardkit-live-preview.template-saffron-split-bloom > .cardkit-preview-content,
  .cardkit-live-preview.template-crimson-floral-save-date > .cardkit-preview-content,
  .cardkit-live-preview.template-royal-plum-florals > .cardkit-preview-content,
  .cardkit-live-preview.template-peacock-regalia > .cardkit-preview-content,
  .cardkit-live-preview.template-savanna-heritage > .cardkit-preview-content,
  .cardkit-live-preview.template-family-sendoff > .cardkit-preview-content {
    width: min(58%, 360px);
    max-width: 100%;
  }
}

.card-preview,
.template-swatch {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 78% 10%, rgba(217, 173, 85, 0.28), transparent 28%),
    linear-gradient(145deg, var(--primary, #111722), #080706);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

.card-preview > *,
.template-swatch > * {
  position: relative;
  z-index: 1;
}

.card-media {
  position: relative;
  align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

.card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-logo {
  width: 82px;
  height: 82px;
  padding: 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
}

.card-logo img {
  object-fit: contain;
}

.card-host-photo {
  width: 112px;
  height: 112px;
  border-radius: 32px;
  overflow: hidden;
}

/* Logo is freely placeable on the card via the editor (X / Y / size). */
.cardkit-rendered .card-logo {
  position: absolute;
  left: var(--card-logo-x, 50%);
  top: var(--card-logo-y, 12%);
  z-index: 4;
  width: var(--card-logo-size, 16%);
  height: auto;
  aspect-ratio: 1;
  align-self: auto;
  margin: 0;
  transform: translate(-50%, -50%);
}

/* The client/celebrant portrait is an independent editor layer. Its safe
   default sits at the top-left, leaving the central details and bottom QR
   zones available; all placement and crop values come from editor settings. */
.cardkit-rendered .card-host-photo {
  position: absolute;
  left: var(--card-photo-x, 10%);
  top: var(--card-photo-y, 20%);
  z-index: 2;
  width: var(--card-photo-size, 16%);
  height: auto;
  aspect-ratio: 4 / 5;
  align-self: auto;
  margin: 0;
  border: 5px solid rgba(255, 255, 255, 0.82);
  border-radius: 18%;
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%);
}

.cardkit-rendered .card-host-photo img {
  object-fit: var(--card-photo-fit, cover);
  object-position: var(--card-photo-crop-x, 50%) var(--card-photo-crop-y, 50%);
}

.cardkit-rendered[data-photo-shape="square"] .card-host-photo {
  aspect-ratio: 1;
  border-radius: 18%;
}

.cardkit-rendered[data-photo-shape="circle"] .card-host-photo {
  aspect-ratio: 1;
  border-radius: 50%;
}

.cardkit-rendered[data-photo-visibility="hide"] .card-host-photo {
  display: none;
}

.card-background-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  border-radius: inherit;
  opacity: 0.34;
  box-shadow: none;
  overflow: hidden;
}

/* Background source: "template" shows the template artwork only; "custom"
   uses the uploaded photo as the full-bleed background. */
.cardkit-rendered[data-bg-source="template"] .card-background-photo {
  display: none;
}

.cardkit-rendered[data-bg-source="custom"] .card-background-photo {
  display: block;
  opacity: 1;
}

.card-background-photo img {
  object-fit: var(--card-bg-fit, cover);
  object-position: var(--card-bg-x, 50%) var(--card-bg-y, 50%);
  transform: scale(var(--card-bg-scale, 1));
}

.card-background-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(5, 4, 3, 0.36), rgba(5, 4, 3, 0.76));
}

.cardkit-rendered[data-content-mode="finished"] .card-background-photo::before {
  display: none;
}

/* Finished artwork: a supplied design that Ventiqa only personalizes. It sits
   above the template background so switching modes never loses either asset,
   and it carries no scrim because the design already handles its own contrast. */
.card-finished-artwork {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  overflow: hidden;
}

.cardkit-rendered[data-content-mode="finished"] .card-finished-artwork {
  display: block;
}

.card-finished-artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The supplied design replaces every template layer beneath it. */
.cardkit-rendered[data-content-mode="finished"] .card-background-photo,
.cardkit-rendered[data-content-mode="finished"] .card-host-photo,
.cardkit-rendered[data-content-mode="finished"] .card-logo {
  display: none;
}

/* A supplied design is the entire card. It gets no template paint, no frame
   padding, and no fixed orientation box: the artwork keeps whatever proportions
   it was exported at, and the card's height simply follows it. The [data-layout]
   variant is here only to outrank the portrait/square/landscape sizing rules. */
.cardkit-rendered[data-content-mode="finished"],
.cardkit-rendered[data-content-mode="finished"][data-layout] {
  width: var(--card-artwork-w, 1080px);
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  aspect-ratio: auto;
}

.cardkit-rendered[data-content-mode="finished"]::before,
.cardkit-rendered[data-content-mode="finished"]::after {
  content: none;
}

/* In flow, not absolutely positioned, so the image's natural ratio is what
   gives the card its height -- nothing is cropped to a preset canvas. */
.cardkit-rendered[data-content-mode="finished"] .card-finished-artwork {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
}

.cardkit-rendered[data-content-mode="finished"] .card-finished-artwork img {
  width: 100%;
  height: auto;
  object-fit: fill;
}

/* Export pins the frame to the design canvas; a free-ratio card sizes itself. */
.invitation-card-frame[data-content-mode="finished"].is-exporting {
  width: auto !important;
  height: auto !important;
}

/* Orientation is meaningless once the artwork defines its own dimensions. */
.cardkit-editor[data-content-mode="finished"] .cardkit-layout-toggle {
  display: none;
}

.card-media[data-image-loading].has-loading-error::before {
  content: attr(data-loading-error);
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-strong) 86%, transparent);
  font-weight: 900;
  text-align: center;
}

.template-gallery {
  margin-top: 18px;
}

.template-swatch-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.template-swatch {
  border: 0;
  text-align: left;
  cursor: pointer;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 18px;
  color: #fff8e8;
}

.template-swatch:disabled {
  cursor: not-allowed;
}

.template-swatch:not(:disabled):hover,
.template-swatch:not(:disabled):focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.32);
}

.template-swatch span,
.template-swatch small {
  color: var(--card-muted, rgba(255, 248, 232, 0.72));
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.template-swatch strong {
  color: var(--card-ink, inherit);
  font-size: 1.05rem;
  line-height: 1.08;
}

.card-preview[class*="template-"] .small-label,
.template-swatch[class*="template-"] span,
.template-swatch[class*="template-"] small {
  color: var(--card-muted, rgba(255, 248, 232, 0.72));
}

.card-preview[class*="template-"] h1,
.card-preview[class*="template-"] h2,
.card-preview[class*="template-"] p,
.card-preview[class*="template-"] strong,
.template-swatch[class*="template-"] strong {
  color: var(--card-ink, #fff8e8);
}

.card-preview[class*="template-"] .small-label,
.card-preview[class*="template-"] h1,
.card-preview[class*="template-"] h2,
.card-preview[class*="template-"] p,
.card-preview[class*="template-"] strong,
.template-swatch[class*="template-"] span,
.template-swatch[class*="template-"] small,
.template-swatch[class*="template-"] strong {
  text-shadow: var(--card-text-shadow, 0 2px 14px rgba(5, 4, 3, 0.46));
}

.card-preview[class*="template-"] p,
.card-preview[class*="template-"] strong {
  font-weight: 800;
}

.template-swatch[class*="template-"] span,
.template-swatch[class*="template-"] small,
.template-swatch[class*="template-"] strong {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--swatch-label-surface, rgba(5, 4, 3, 0.2));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.template-swatch[class*="template-"] strong {
  border-radius: 12px;
  background: var(--swatch-title-surface, rgba(5, 4, 3, 0.28));
}

.template-swatch.is-locked {
  filter: grayscale(0.35);
  opacity: 0.62;
}

.template-swatch.is-locked::after {
  content: "Upgrade";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  color: #100d07;
  background: linear-gradient(135deg, #d9ad55, #fff2bc);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.template-aurelia-black-tie {
  --card-ink: #fff8e8;
  --card-muted: rgba(255, 248, 232, 0.72);
  color: #fff8e8;
  background:
    repeating-linear-gradient(90deg, rgba(245, 208, 122, 0.08) 0 1px, transparent 1px 58px),
    linear-gradient(180deg, rgba(245, 208, 122, 0.14), transparent 36%),
    linear-gradient(145deg, #030302 0%, #171006 54%, #050403 100%);
}

.template-aurelia-black-tie::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(245, 208, 122, 0.48);
  border-radius: 22px;
  pointer-events: none;
}

.template-crimson-floral-save-date {
  --card-ink: #2c160d;
  --card-muted: rgba(78, 43, 24, 0.68);
  color: #2c160d;
  justify-content: center;
  text-align: center;
  background:
    url("../img/cards/floral-crimson-corners.fc95b227aab3.svg") left center / 50% 100% no-repeat,
    radial-gradient(circle at 8% 9%, #b51222 0 8%, #7e101b 9% 13%, transparent 14%),
    radial-gradient(circle at 18% 5%, rgba(206, 38, 34, 0.82) 0 7%, transparent 8%),
    radial-gradient(circle at 88% 92%, #9c1021 0 10%, #5d0b17 11% 16%, transparent 17%),
    radial-gradient(ellipse at 24% 17%, rgba(186, 118, 32, 0.42) 0 12%, transparent 13%),
    radial-gradient(ellipse at 76% 82%, rgba(186, 118, 32, 0.38) 0 14%, transparent 15%),
    repeating-linear-gradient(90deg, rgba(163, 103, 39, 0.12) 0 1px, transparent 1px 42px),
    linear-gradient(145deg, #fff8ec 0%, #f8e9cc 54%, #e5c996 100%);
}

.template-crimson-floral-save-date::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(157, 93, 31, 0.34);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(177, 122, 44, 0.38), transparent 16%, transparent 84%, rgba(177, 122, 44, 0.38)),
    linear-gradient(180deg, rgba(177, 122, 44, 0.28), transparent 18%, transparent 82%, rgba(177, 122, 44, 0.28));
  pointer-events: none;
}

.template-royal-plum-florals {
  --card-ink: #ffe6a3;
  --card-muted: rgba(255, 230, 163, 0.76);
  color: #ffe6a3;
  justify-content: center;
  text-align: center;
  background:
    url("../img/cards/floral-plum-corners.d4a0a35cb4ae.svg") left center / 50% 100% no-repeat,
    radial-gradient(circle at 7% 8%, #6b2179 0 12%, #351047 13% 22%, transparent 23%),
    radial-gradient(circle at 94% 10%, #7e2a85 0 13%, #2a0d3d 14% 23%, transparent 24%),
    radial-gradient(circle at 15% 96%, #8b338b 0 12%, #371044 13% 23%, transparent 24%),
    radial-gradient(circle at 91% 92%, #7b2b80 0 12%, #270b38 13% 23%, transparent 24%),
    radial-gradient(ellipse at 18% 25%, rgba(241, 200, 102, 0.62) 0 8%, transparent 9%),
    radial-gradient(ellipse at 82% 30%, rgba(241, 200, 102, 0.52) 0 9%, transparent 10%),
    repeating-linear-gradient(90deg, rgba(241, 200, 102, 0.1) 0 1px, transparent 1px 58px),
    linear-gradient(145deg, #2b0738 0%, #4a0d4f 52%, #16031f 100%);
}

.template-royal-plum-florals::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(241, 200, 102, 0.58);
  border-radius: 24px;
  box-shadow:
    inset 0 0 0 4px rgba(241, 200, 102, 0.08),
    inset 0 0 34px rgba(241, 200, 102, 0.08);
  pointer-events: none;
}

.template-peacock-regalia {
  --card-ink: #ffe7a3;
  --card-muted: rgba(255, 231, 163, 0.75);
  color: #ffe7a3;
  justify-content: center;
  text-align: center;
  background:
    url("../img/cards/peacock-regalia-frame.d63ef6a0a85f.svg") left center / 50% 100% no-repeat,
    radial-gradient(ellipse at 18% 72%, #07a968 0 4%, #1e75b8 5% 8%, #f0b84c 9% 11%, transparent 12%),
    radial-gradient(ellipse at 82% 72%, #07a968 0 4%, #1e75b8 5% 8%, #f0b84c 9% 11%, transparent 12%),
    radial-gradient(ellipse at 12% 86%, rgba(15, 166, 105, 0.74) 0 14%, transparent 15%),
    radial-gradient(ellipse at 88% 86%, rgba(15, 166, 105, 0.74) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 8%, rgba(240, 184, 76, 0.72) 0 4%, transparent 5%),
    repeating-linear-gradient(90deg, rgba(240, 184, 76, 0.12) 0 1px, transparent 1px 42px),
    linear-gradient(145deg, #4b0036 0%, #5e073f 58%, #28001f 100%);
}

.template-peacock-regalia::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 2px solid rgba(240, 184, 76, 0.54);
  border-radius: 20px;
  background:
    radial-gradient(circle at 13% 22%, rgba(240, 184, 76, 0.72) 0 2%, transparent 3%),
    radial-gradient(circle at 87% 22%, rgba(240, 184, 76, 0.72) 0 2%, transparent 3%),
    linear-gradient(90deg, transparent 0 20%, rgba(240, 184, 76, 0.22) 20% 21%, transparent 21% 79%, rgba(240, 184, 76, 0.22) 79% 80%, transparent 80%);
  pointer-events: none;
}

.template-saffron-split-bloom {
  --card-ink: #fff2d2;
  --card-muted: rgba(255, 242, 210, 0.72);
  color: #fff2d2;
  align-items: flex-end;
  text-align: center;
  background:
    url("../img/cards/saffron-split-bloom.8417c70ab423.svg") left center / 50% 100% no-repeat,
    linear-gradient(90deg, transparent 0 48%, #77471f 48% 100%),
    radial-gradient(circle at 18% 24%, #f08d24 0 9%, #dc5f22 10% 14%, transparent 15%),
    radial-gradient(circle at 30% 38%, rgba(255, 186, 68, 0.78) 0 8%, transparent 9%),
    radial-gradient(ellipse at 24% 72%, rgba(80, 128, 67, 0.48) 0 16%, transparent 17%),
    linear-gradient(145deg, #fff1d7 0%, #f7deb6 48%, #77471f 49%, #4f2d18 100%);
}

.template-saffron-split-bloom::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 18px;
  border: 1px solid rgba(117, 71, 31, 0.32);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 46%, rgba(255, 255, 255, 0.04) 46% 100%),
    repeating-linear-gradient(135deg, rgba(117, 71, 31, 0.12) 0 1px, transparent 1px 18px);
  pointer-events: none;
}

.template-saffron-split-bloom > * {
  max-width: 46%;
}

.template-saffron-split-bloom h1,
.template-saffron-split-bloom h2,
.template-saffron-split-bloom p,
.template-saffron-split-bloom strong {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.card-preview.template-aurelia-black-tie,
.card-preview.template-crimson-floral-save-date,
.card-preview.template-royal-plum-florals,
.card-preview.template-peacock-regalia,
.card-preview.template-botanic-noir,
.card-preview.template-pearl-arch,
.card-preview.template-savanna-heritage,
.card-preview.template-family-sendoff {
  padding: clamp(34px, 7vw, 64px);
}

.card-preview.template-aurelia-black-tie > *,
.card-preview.template-crimson-floral-save-date > *,
.card-preview.template-royal-plum-florals > *,
.card-preview.template-peacock-regalia > *,
.card-preview.template-botanic-noir > *,
.card-preview.template-pearl-arch > *,
.card-preview.template-savanna-heritage > *,
.card-preview.template-family-sendoff > * {
  width: min(100%, 430px);
  align-self: center;
  text-align: center;
}

.card-preview.template-aurelia-black-tie::after,
.card-preview.template-crimson-floral-save-date::after,
.card-preview.template-royal-plum-florals::after,
.card-preview.template-peacock-regalia::after,
.card-preview.template-botanic-noir::after,
.card-preview.template-pearl-arch::after,
.card-preview.template-savanna-heritage::after,
.card-preview.template-family-sendoff::after {
  content: "";
  position: absolute;
  inset: clamp(54px, 12%, 92px) clamp(28px, 9%, 58px);
  z-index: 0;
  border: 1px solid var(--card-panel-border, rgba(245, 208, 122, 0.28));
  border-radius: 26px;
  background: var(--card-panel, rgba(5, 4, 3, 0.42));
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.card-preview.template-crimson-floral-save-date {
  --card-panel: rgba(255, 250, 240, 0.78);
  --card-panel-border: rgba(157, 93, 31, 0.38);
}

.card-preview.template-botanic-noir,
.card-preview.template-pearl-arch {
  --card-panel: rgba(255, 250, 238, 0.72);
  --card-panel-border: rgba(80, 61, 34, 0.25);
}

.card-preview.template-royal-plum-florals,
.card-preview.template-peacock-regalia,
.card-preview.template-aurelia-black-tie {
  --card-panel: rgba(8, 4, 10, 0.58);
  --card-panel-border: rgba(245, 208, 122, 0.36);
}

.card-preview.template-savanna-heritage,
.card-preview.template-family-sendoff {
  --card-panel: rgba(15, 8, 4, 0.64);
  --card-panel-border: rgba(245, 208, 122, 0.34);
}

.card-preview.template-saffron-split-bloom::after {
  content: "";
  position: absolute;
  inset: clamp(46px, 11%, 84px) 30px clamp(46px, 11%, 84px) 51%;
  z-index: 0;
  border: 1px solid rgba(255, 242, 210, 0.22);
  border-radius: 22px;
  background: rgba(58, 31, 15, 0.7);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.card-preview.template-saffron-split-bloom > * {
  width: min(44%, 300px);
  align-self: flex-end;
}

.card-preview.template-saffron-split-bloom,
.card-preview.template-crimson-floral-save-date,
.card-preview.template-royal-plum-florals,
.card-preview.template-peacock-regalia,
.card-preview.template-savanna-heritage,
.card-preview.template-family-sendoff {
  align-items: flex-end;
  padding: clamp(34px, 6vw, 60px) 30px;
}

.card-preview.template-saffron-split-bloom::after,
.card-preview.template-crimson-floral-save-date::after,
.card-preview.template-royal-plum-florals::after,
.card-preview.template-peacock-regalia::after,
.card-preview.template-savanna-heritage::after,
.card-preview.template-family-sendoff::after {
  inset: clamp(46px, 11%, 84px) 30px clamp(46px, 11%, 84px) 51%;
  border-radius: 22px;
}

.card-preview.template-saffron-split-bloom > *,
.card-preview.template-crimson-floral-save-date > *,
.card-preview.template-royal-plum-florals > *,
.card-preview.template-peacock-regalia > *,
.card-preview.template-savanna-heritage > *,
.card-preview.template-family-sendoff > * {
  width: min(44%, 320px);
  max-width: 44%;
  align-self: flex-end;
  text-align: center;
}

.card-preview.template-crimson-floral-save-date::after {
  background: rgba(255, 250, 240, 0.84);
  box-shadow: 0 18px 54px rgba(92, 46, 18, 0.14);
}

.card-preview.template-royal-plum-florals::after,
.card-preview.template-peacock-regalia::after,
.card-preview.template-savanna-heritage::after,
.card-preview.template-family-sendoff::after {
  background: rgba(8, 4, 10, 0.72);
}

.template-swatch.template-crimson-floral-save-date,
.template-swatch.template-royal-plum-florals,
.template-swatch.template-peacock-regalia,
.template-swatch.template-saffron-split-bloom,
.template-swatch.template-savanna-heritage,
.template-swatch.template-family-sendoff {
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}

.template-swatch.template-crimson-floral-save-date > *,
.template-swatch.template-royal-plum-florals > *,
.template-swatch.template-peacock-regalia > *,
.template-swatch.template-saffron-split-bloom > *,
.template-swatch.template-savanna-heritage > *,
.template-swatch.template-family-sendoff > * {
  width: 54%;
  max-width: 54%;
  align-self: flex-end;
}

@media (max-width: 680px) {
  .card-preview.template-saffron-split-bloom,
  .card-preview.template-crimson-floral-save-date,
  .card-preview.template-royal-plum-florals,
  .card-preview.template-peacock-regalia,
  .card-preview.template-savanna-heritage,
  .card-preview.template-family-sendoff {
    align-items: flex-end;
    padding: clamp(36px, 10vw, 56px) 22px;
  }

  .card-preview.template-saffron-split-bloom::after,
  .card-preview.template-crimson-floral-save-date::after,
  .card-preview.template-royal-plum-florals::after,
  .card-preview.template-peacock-regalia::after,
  .card-preview.template-savanna-heritage::after,
  .card-preview.template-family-sendoff::after {
    inset: clamp(54px, 13%, 84px) 18px clamp(42px, 10%, 68px) 40%;
  }

  .card-preview.template-saffron-split-bloom > *,
  .card-preview.template-crimson-floral-save-date > *,
  .card-preview.template-royal-plum-florals > *,
  .card-preview.template-peacock-regalia > *,
  .card-preview.template-savanna-heritage > *,
  .card-preview.template-family-sendoff > * {
    width: min(58%, 360px);
    max-width: 100%;
    align-self: flex-end;
  }
}

.template-botanic-noir {
  --card-ink: #183024;
  --card-muted: rgba(24, 48, 36, 0.68);
  color: #183024;
  background:
    repeating-linear-gradient(135deg, rgba(40, 96, 68, 0.08) 0 1px, transparent 1px 24px),
    linear-gradient(145deg, #fff4df 0%, #e9f2df 54%, #d3c3a5 100%);
}

.template-botanic-noir::before {
  content: "";
  position: absolute;
  right: -28px;
  top: -44px;
  width: 210px;
  height: 330px;
  border-radius: 48% 52% 42% 58%;
  border: 1px solid rgba(38, 89, 64, 0.24);
  background:
    repeating-linear-gradient(90deg, rgba(44, 118, 82, 0.18) 0 2px, transparent 2px 18px),
    rgba(255, 255, 255, 0.2);
  transform: rotate(17deg);
}

.template-pearl-arch {
  --card-ink: #201407;
  --card-muted: rgba(32, 20, 7, 0.66);
  color: #201407;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), transparent 36%),
    linear-gradient(145deg, #fff8e8 0%, #d9c7a4 48%, #8d6425 100%);
}

.template-pearl-arch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 28px;
  width: min(72%, 330px);
  height: 82%;
  border: 2px solid rgba(141, 100, 37, 0.46);
  border-radius: 999px 999px 26px 26px;
  transform: translateX(-50%);
}

.template-pearl-arch .small-label,
.template-pearl-arch p,
.template-pearl-arch strong,
.template-pearl-arch h1,
.template-pearl-arch h2 {
  color: #201407;
}

.template-savanna-heritage {
  --card-ink: #fff8e8;
  --card-muted: rgba(255, 248, 232, 0.74);
  color: #fff8e8;
  background:
    url("../img/cards/heritage-strip.b9a890b88589.svg") left center / 50% 100% no-repeat,
    repeating-linear-gradient(45deg, rgba(255, 248, 232, 0.06) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(135deg, rgba(245, 208, 122, 0.14) 0 2px, transparent 2px 18px),
    linear-gradient(145deg, #4f1f11 0%, #a14c1d 44%, #162f2b 100%);
}

.template-savanna-heritage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(245, 208, 122, 0.24);
  border-radius: 22px;
  background: linear-gradient(90deg, rgba(5, 4, 3, 0.34), transparent 22%, transparent 78%, rgba(5, 4, 3, 0.34));
  pointer-events: none;
}

.template-cinematic-photo-luxe {
  --card-ink: #fff8e8;
  --card-muted: rgba(255, 248, 232, 0.76);
  color: #fff8e8;
  background:
    linear-gradient(180deg, rgba(5, 4, 3, 0.04), rgba(5, 4, 3, 0.82)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 46px),
    linear-gradient(145deg, #0d2437 0%, #31485a 42%, #0b0905 100%);
}

.template-cinematic-photo-luxe::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(2px);
}

.template-birthday-glow {
  --card-ink: #321223;
  --card-muted: rgba(50, 18, 35, 0.66);
  color: #321223;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.32) 0 8px, transparent 8px 28px),
    repeating-linear-gradient(135deg, rgba(238, 98, 112, 0.18) 0 2px, transparent 2px 18px),
    linear-gradient(145deg, #ffe3ec 0%, #ffd36d 46%, #92dfcd 100%);
}

.template-birthday-glow::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(50, 18, 35, 0.32);
  border-radius: 22px;
  pointer-events: none;
}

.template-graduation-day {
  --card-ink: #fff8e8;
  --card-muted: rgba(255, 248, 232, 0.74);
  color: #fff8e8;
  background:
    linear-gradient(132deg, transparent 0 58%, rgba(244, 209, 123, 0.9) 58% 64%, transparent 64%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 42px),
    linear-gradient(145deg, #07172d 0%, #153d4c 62%, #07111f 100%);
}

.template-graduation-day::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(244, 209, 123, 0.42);
  transform: rotate(45deg);
}

.template-corporate-summit {
  --card-ink: #112236;
  --card-muted: rgba(17, 34, 54, 0.64);
  color: #112236;
  background:
    linear-gradient(90deg, rgba(39, 91, 134, 0.14), transparent 32%),
    repeating-linear-gradient(0deg, rgba(17, 34, 54, 0.08) 0 1px, transparent 1px 34px),
    linear-gradient(145deg, #f8fbff 0%, #d9e7ef 52%, #b7c8d0 100%);
}

.template-corporate-summit::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 18px;
  background: linear-gradient(180deg, #1f5f8b, #2f8f83, #f0c96d);
}

.template-family-sendoff {
  --card-ink: #fff8e8;
  --card-muted: rgba(255, 248, 232, 0.76);
  color: #fff8e8;
  background:
    url("../img/cards/heritage-strip.b9a890b88589.svg") left center / 50% 100% no-repeat,
    repeating-linear-gradient(45deg, rgba(255, 248, 232, 0.09) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(135deg, rgba(244, 209, 123, 0.16) 0 2px, transparent 2px 24px),
    linear-gradient(145deg, #0c4a48 0%, #b45322 48%, #21140a 100%);
}

.template-family-sendoff::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(245, 208, 122, 0.24);
  border-radius: 22px;
  background: linear-gradient(90deg, rgba(5, 4, 3, 0.34), transparent 22%, transparent 78%, rgba(5, 4, 3, 0.34));
  pointer-events: none;
}

.template-memorial-calm {
  --card-ink: #28313a;
  --card-muted: rgba(40, 49, 58, 0.64);
  color: #28313a;
  background:
    linear-gradient(90deg, rgba(94, 113, 89, 0.14), transparent 42%),
    repeating-linear-gradient(90deg, rgba(40, 49, 58, 0.04) 0 1px, transparent 1px 56px),
    linear-gradient(145deg, #f3f1ec 0%, #dce3dc 52%, #bcc7c0 100%);
}

.template-memorial-calm::before {
  content: "";
  position: absolute;
  inset: 20px;
  border-left: 3px solid rgba(94, 113, 89, 0.42);
  border-bottom: 1px solid rgba(40, 49, 58, 0.14);
  pointer-events: none;
}

.template-red-pearl-frame {
  --card-ink: #30130f;
  --card-muted: rgba(75, 42, 38, 0.72);
  --card-readable-surface: rgba(255, 255, 255, 0.72);
  --card-panel-border: rgba(167, 24, 24, 0.18);
  --card-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92), 0 12px 26px rgba(80, 0, 0, 0.12);
  color: #30130f;
  background:
    var(--card-template-red-pearl-frame) var(--card-bg-x, 50%) var(--card-bg-y, 50%) /
      calc(100% * var(--card-bg-scale, 1)) calc(100% * var(--card-bg-scale, 1)) no-repeat,
    #fbfaf8;
}

.template-red-pearl-frame::before,
.template-red-pearl-frame::after {
  content: none;
}

.template-red-pearl-frame .small-label,
.template-red-pearl-frame p,
.template-red-pearl-frame strong,
.template-red-pearl-frame h1,
.template-red-pearl-frame h2 {
  color: var(--card-ink, #30130f);
  text-shadow: var(--card-text-shadow);
}

.template-red-pearl-frame .cardkit-preview-content,
.template-red-pearl-frame .invitation-card-inner {
  box-shadow: none;
}

.template-gold-heart-floral-frame {
  --card-ink: #2f2111;
  --card-muted: rgba(74, 53, 28, 0.72);
  --card-readable-surface: rgba(255, 255, 255, 0.68);
  --card-panel-border: rgba(184, 123, 21, 0.16);
  --card-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92), 0 12px 24px rgba(132, 72, 5, 0.1);
  color: #2f2111;
  background:
    var(--card-template-gold-heart-floral-frame) var(--card-bg-x, 50%) var(--card-bg-y, 50%) /
      calc(100% * var(--card-bg-scale, 1)) calc(100% * var(--card-bg-scale, 1)) no-repeat,
    #fbfaf8;
}

.template-champagne-floral-arch {
  --card-ink: #36271a;
  --card-muted: rgba(82, 62, 44, 0.7);
  --card-readable-surface: rgba(255, 255, 255, 0.64);
  --card-panel-border: rgba(178, 119, 33, 0.14);
  --card-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.94), 0 12px 24px rgba(93, 54, 19, 0.08);
  color: #36271a;
  background:
    var(--card-template-champagne-floral-arch) var(--card-bg-x, 50%) var(--card-bg-y, 50%) /
      calc(100% * var(--card-bg-scale, 1)) calc(100% * var(--card-bg-scale, 1)) no-repeat,
    #fbfaf8;
}

.template-gold-heart-floral-frame::before,
.template-gold-heart-floral-frame::after,
.template-champagne-floral-arch::before,
.template-champagne-floral-arch::after {
  content: none;
}

.template-gold-heart-floral-frame .small-label,
.template-gold-heart-floral-frame p,
.template-gold-heart-floral-frame strong,
.template-gold-heart-floral-frame h1,
.template-gold-heart-floral-frame h2,
.template-champagne-floral-arch .small-label,
.template-champagne-floral-arch p,
.template-champagne-floral-arch strong,
.template-champagne-floral-arch h1,
.template-champagne-floral-arch h2 {
  color: var(--card-ink, #36271a);
  text-shadow: var(--card-text-shadow);
}

.template-gold-heart-floral-frame .cardkit-preview-content,
.template-gold-heart-floral-frame .invitation-card-inner,
.template-champagne-floral-arch .cardkit-preview-content,
.template-champagne-floral-arch .invitation-card-inner {
  box-shadow: none;
}

.template-black-gold-horizontal-frame {
  --card-ink: #fff8e8;
  --card-muted: rgba(255, 248, 232, 0.72);
  --card-readable-surface: rgba(9, 9, 14, 0.46);
  --card-panel-border: rgba(245, 208, 122, 0.28);
  --card-text-shadow: 0 2px 16px rgba(0, 0, 0, 0.66), 0 0 1px rgba(0, 0, 0, 0.82);
  --card-chip-border: rgba(245, 208, 122, 0.22);
  --card-qr-bg: rgba(255, 248, 232, 0.96);
  --card-qr-ink: #050403;
  color: #fff8e8;
  background:
    var(--card-template-black-gold-horizontal-frame) var(--card-bg-x, 50%) var(--card-bg-y, 50%) /
      calc(100% * var(--card-bg-scale, 1)) calc(100% * var(--card-bg-scale, 1)) no-repeat,
    #10121d;
}

.template-black-gold-horizontal-frame::before,
.template-black-gold-horizontal-frame::after {
  content: none;
}

.template-black-gold-horizontal-frame .small-label,
.template-black-gold-horizontal-frame p,
.template-black-gold-horizontal-frame strong,
.template-black-gold-horizontal-frame h1,
.template-black-gold-horizontal-frame h2 {
  color: var(--card-ink, #fff8e8);
  text-shadow: var(--card-text-shadow);
}

.template-black-gold-horizontal-frame .cardkit-preview-content,
.template-black-gold-horizontal-frame .invitation-card-inner {
  border-radius: 8px;
  background: var(--card-readable-surface);
}

.template-aurelia-black-tie,
.template-royal-plum-florals,
.template-peacock-regalia,
.template-saffron-split-bloom,
.template-cinematic-photo-luxe,
.template-graduation-day,
.template-savanna-heritage,
.template-family-sendoff {
  --card-text-shadow: 0 2px 16px rgba(5, 4, 3, 0.68), 0 0 1px rgba(5, 4, 3, 0.78);
  --swatch-label-surface: rgba(5, 4, 3, 0.28);
  --swatch-title-surface: rgba(5, 4, 3, 0.38);
  --card-readable-surface: rgba(5, 4, 3, 0.34);
  --card-title-surface: rgba(5, 4, 3, 0.42);
  --card-chip-ink: #fff8e8;
  --card-chip-border: rgba(255, 248, 232, 0.2);
  --card-qr-bg: rgba(255, 248, 232, 0.95);
  --card-qr-ink: #050403;
}

.template-crimson-floral-save-date,
.template-botanic-noir,
.template-pearl-arch,
.template-birthday-glow,
.template-corporate-summit,
.template-memorial-calm {
  --card-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88), 0 0 18px rgba(255, 255, 255, 0.46);
  --swatch-label-surface: rgba(255, 250, 240, 0.58);
  --swatch-title-surface: rgba(255, 250, 240, 0.68);
  --card-readable-surface: rgba(255, 250, 240, 0.68);
  --card-title-surface: rgba(255, 250, 240, 0.78);
  --card-chip-ink: var(--card-ink, #201407);
  --card-chip-border: rgba(58, 42, 24, 0.14);
  --card-qr-bg: rgba(255, 255, 255, 0.96);
  --card-qr-ink: #111111;
}

.inline-action-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.sms-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.device-limit-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.device-list {
  display: grid;
  gap: 12px;
  margin: 14px 0 18px;
}

.device-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(36, 60, 89, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
}

.device-card > div {
  min-width: 0;
}

.selectable-device-card {
  cursor: pointer;
}

.device-card-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.device-card strong,
.device-card small {
  display: block;
}

.device-card small {
  margin-top: 5px;
  color: var(--muted);
}

.status-pill {
  display: inline-flex;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--blue-deep);
  background: rgba(245, 208, 122, 0.18);
  border: 1px solid rgba(245, 208, 122, 0.34);
  font-size: 0.72rem;
  font-weight: 900;
}

@media (max-width: 900px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-sidebar {
    position: static;
  }

  .settings-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .settings-shell {
    padding-inline: 12px;
  }

  .settings-menu {
    grid-template-columns: 1fr;
  }

  .settings-password-row,
  .device-card {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-actions,
  .settings-detail-actions,
  .logout-actions,
  .settings-password-row .button,
  .device-card .button {
    width: 100%;
  }

  .settings-detail-card,
  .logout-card {
    padding: 20px;
  }

  .settings-detail-back {
    justify-self: stretch;
    text-align: center;
  }

  .logout-actions {
    display: grid;
  }

  .settings-section-card {
    padding: 14px;
  }
}

.section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.danger-link {
  color: var(--red);
}

.danger-button {
  border-color: rgba(180, 35, 24, 0.42);
  color: #fff8e8;
  background: linear-gradient(135deg, #5f1712, #b42318);
}

.payment-summary-card,
.refund-policy-card,
.refund-panel {
  border-color: rgba(217, 173, 85, 0.36);
}

.payment-method-card {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(217, 173, 85, 0.32);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.payment-method-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.payment-method-head img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}

.payment-method-head strong,
.payment-method-head span {
  display: block;
}

.payment-reference-form p {
  flex: 1 1 220px;
  margin: 0;
}

.sms-copy-panel {
  margin-top: 6px;
}

.sms-copy-panel summary {
  cursor: pointer;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 800;
}

.sms-copy-panel p {
  max-width: 360px;
  margin: 6px 0 0;
  padding: 10px;
  border: 1px solid rgba(217, 173, 85, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.card-dashboard-section {
  align-items: stretch;
}

.dashboard-card-preview {
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1528px);
  min-height: 0;
  justify-self: center;
  align-self: start;
  padding: 64px;
  zoom: var(--card-dashboard-zoom, 0.26);
}

.dashboard-card-preview[data-layout="square"] {
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1080px);
}

.dashboard-card-preview[data-layout="landscape"] {
  width: var(--card-design-w, 1920px);
  height: var(--card-design-h, 1080px);
  zoom: var(--card-dashboard-landscape-zoom, 0.2);
}

.dashboard-card-preview .invitation-card-heading,
.dashboard-card-preview .invitation-card-subtitle {
  width: 100%;
}

.dashboard-card-preview .invitation-card-heading h1 {
  width: 100%;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.dashboard-card-preview .invitation-card-subtitle {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}

.qr-wrap {
  width: fit-content;
  max-width: 100%;
  margin-top: 14px;
  padding: 10px;
  border-radius: 18px;
  color: #050403;
  background: #fff;
  box-shadow: 0 14px 34px rgba(5, 4, 3, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.qr-wrap svg,
.qr-wrap canvas,
.qr-wrap img.qr-code-image {
  display: block;
  width: 100%;
  height: 100%;
  color: #050403;
  background: #fff;
  border-radius: 10px;
  image-rendering: pixelated;
  object-fit: contain;
  shape-rendering: crispEdges;
}

.qr-wrap svg path {
  fill: #050403;
}

html[data-theme="noir"] .qr-wrap {
  color: #050403;
  background: #fff;
}

.card-preview[class*="template-"] .qr-wrap {
  color: #050403;
  background: #fff;
  box-shadow: 0 14px 34px rgba(5, 4, 3, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.invitation-card .qr-wrap {
  border-radius: 10px;
}

.invitation-card .qr-wrap svg,
.invitation-card .qr-wrap canvas,
.invitation-card .qr-wrap img.qr-code-image {
  width: 100%;
  height: auto;
  display: block;
}

.invitation-card .qr-wrap + .helptext {
  max-width: 30ch;
  margin-top: 2px !important;
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: center;
}

.invitation-card[class*="template-"] h1,
.invitation-card[class*="template-"] h2,
.invitation-card[class*="template-"] p,
.invitation-card[class*="template-"] .small-label,
.invitation-card[class*="template-"] .status-chip {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 12px;
  background: var(--card-readable-surface, rgba(5, 4, 3, 0.26));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.invitation-card[class*="template-"] h1,
.invitation-card[class*="template-"] h2 {
  padding: 6px 10px;
  border-radius: 16px;
  background: var(--card-title-surface, var(--card-readable-surface, rgba(5, 4, 3, 0.32)));
}

.invitation-card[class*="template-"] .status-chip {
  color: var(--card-chip-ink, var(--card-ink, #fff8e8));
  border: 1px solid var(--card-chip-border, rgba(255, 255, 255, 0.18));
}

.invitation-card[class*="template-"] .qr-wrap + .helptext {
  color: var(--card-ink, #fff8e8);
  font-weight: 800;
}

.public-invite .invitation-card[class*="template-"] {
  width: var(--card-design-w, 1080px);
  height: var(--card-design-h, 1528px);
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 64px;
}

.invitation-card[class*="template-"] .invitation-card-inner {
  width: 100%;
  align-self: center;
  text-align: center;
}

.invitation-card[class*="template-"] .invitation-card-heading h1 {
  width: fit-content;
  max-width: 16ch;
}

.invitation-card[class*="template-"] .invitation-card-subtitle {
  width: fit-content;
  max-width: 40ch;
}

.invitation-card[class*="template-"] .invite-description {
  width: 100%;
  max-width: 100%;
}

.invitation-card[class*="template-"] .invitation-guest-block,
.invitation-card[class*="template-"] .invitation-host-block {
  width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
}

.invitation-card[class*="template-"] .invitation-detail-grid {
  width: 100%;
}

.invitation-card[class*="template-"] .invitation-detail-grid p {
  width: auto;
  max-width: none;
  min-height: 62px;
  padding: 9px 10px;
  border-radius: 14px;
}

.public-invite .invitation-card[class*="template-"] .qr-wrap {
  width: var(--card-qr-size, 14%);
  align-self: center;
}

.cardkit-rendered.invitation-card[class*="template-"] .invitation-card-inner {
  position: absolute;
  left: var(--card-info-x, 50%);
  top: var(--card-info-y, 48%);
  width: var(--card-info-w, 62%);
  max-width: 100%;
  align-self: auto;
  text-align: var(--card-info-align, center);
  transform: translate(-50%, -50%) scale(var(--card-info-scale, 1));
}

/* Finished artwork already contains the event copy. It keeps only the
   per-guest name/capacity layer and the independently positioned QR code. */
.invitation-guest-personalization,
.invitation-type-personalization {
  display: none;
}

.cardkit-rendered[data-content-mode="finished"] .invitation-card-inner {
  display: none;
}

.cardkit-rendered[data-content-mode="finished"] .invitation-guest-personalization {
  position: absolute;
  left: var(--card-guest-x, 50%);
  top: var(--card-guest-y, 28%);
  z-index: 4;
  display: grid;
  gap: 10px;
  width: var(--card-guest-w, 72%);
  max-width: 100%;
  margin: 0;
  color: var(--card-guest-color, var(--card-ink, #fff8e8));
  text-align: var(--card-guest-align, center);
  transform: translate(-50%, -50%);
}

/* Editor-only width guide. With guest-panel="plain" the name block loses its
   border and background, so there is nothing on screen showing how wide
   --card-guest-w has actually made the name area. Outline it while designing.
   `outline` rather than `border`: it costs no layout, so the name keeps its
   exact placement and the guide cannot shift the design it is measuring.
   Scoped to .cardkit-live-preview, which only the card editor's preview
   carries -- both export paths (invitation-download.js and
   guest-card-render.js) capture [data-invitation-card], so this can never
   reach a rendered or downloaded card. */
.cardkit-live-preview[data-content-mode="finished"] .invitation-guest-personalization {
  outline: 1px dashed var(--card-guide-color, rgba(125, 211, 252, 0.85));
  outline-offset: 2px;
}

/* Safety net: the guide never applies to a card that can be exported, even if
   the preview classes are ever reused on the real card markup. */
.invitation-card .invitation-guest-personalization,
.invitation-card-frame.is-exporting .invitation-guest-personalization {
  outline: none;
}

/* Invitation type is placed on its own, so it can sit anywhere on the design
   rather than being stacked under the guest name. Colour falls back to the
   name's colour, which keeps the two matching until they are set apart. */
.cardkit-rendered[data-content-mode="finished"] .invitation-type-personalization {
  position: absolute;
  left: var(--card-type-x, 50%);
  top: var(--card-type-y, 40%);
  z-index: 4;
  display: block;
  width: var(--card-type-w, 60%);
  max-width: 100%;
  margin: 0;
  color: var(--card-type-color, var(--card-guest-color, var(--card-ink, #fff8e8)));
  text-align: var(--card-type-align, center);
  transform: translate(-50%, -50%);
}

/* Set the colour on the text container as well as its positioned layer. This
   makes the type-colour control work in both finished artwork and standard
   template cards, whose capacity text lives inside the detail grid. */
.card-preview.cardkit-rendered .invitation-type-copy,
.card-preview.cardkit-rendered .invitation-type-copy > strong,
.card-preview.cardkit-rendered .invitation-type-copy > span {
  color: var(--card-type-color, var(--card-guest-color, var(--card-ink, #fff8e8)));
}

.cardkit-rendered[data-content-mode="finished"] .invitation-capacity-badge {
  font-size: var(--card-type-size, 22px);
}

.cardkit-rendered .invitation-card-subtitle {
  color: var(--card-guest-color, var(--card-muted, rgba(255, 248, 232, 0.78)));
  font-family: var(--card-guest-font, "Cormorant Garamond"), var(--font-heading);
  font-size: var(--card-guest-size, 31px);
}

.cardkit-rendered[data-content-mode="finished"] .invitation-card-subtitle {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: inherit;
  text-align: inherit;
  overflow-wrap: anywhere;
  background: transparent;
}

.invitation-guest-name-badge,
.invitation-capacity-badge {
  display: grid;
  gap: 3px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid var(--card-panel-border, rgba(245, 208, 122, 0.28));
  border-radius: 12px;
  color: inherit;
  font-family: var(--card-guest-font, "Cormorant Garamond"), var(--font-heading);
  font-size: max(13px, calc(var(--card-guest-size, 31px) * 0.42));
  line-height: 1.25;
  text-align: inherit;
  background: var(--card-readable-surface, rgba(5, 4, 3, 0.42));
  /* Both personalised blocks render flat. The shared shadow read as a halo on
     the guest name (full --card-guest-size) while being invisible on the
     invitation type (42% of it), so the two never matched. `none` rather than
     dropping the declaration, so an inherited shadow from a future ancestor
     rule cannot quietly reintroduce it. */
  text-shadow: none;
}

.invitation-guest-name-badge {
  display: block;
  border: 1px solid var(--card-panel-border, rgba(245, 208, 122, 0.28));
  border-radius: 12px;
  padding: 9px 14px;
  background: var(--card-readable-surface, rgba(5, 4, 3, 0.42));
}

.invitation-capacity-badge strong {
  font-size: 1.08em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Supplied artwork carries its own styling, so the readable panel behind the
   guest name is optional: without it the name and invitation type sit directly
   on the design and follow only the chosen font, size, and color. */
.cardkit-rendered[data-guest-panel="plain"] .invitation-guest-name-badge,
.cardkit-rendered[data-guest-panel="plain"] .invitation-capacity-badge {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.cardkit-rendered.invitation-card .qr-wrap svg,
.cardkit-rendered.invitation-card .qr-wrap canvas,
.cardkit-rendered.invitation-card .qr-wrap img.qr-code-image {
  width: 100%;
  height: 100%;
}

.invitation-card-frame.is-exporting .card-media,
.invitation-card-frame.is-exporting .card-media img {
  min-width: 0;
  max-width: none;
}

.warning-text {
  color: var(--red);
  font-weight: 800;
}

code {
  padding: 2px 6px;
  border-radius: 8px;
  background: #eef2f6;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 600ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
      transform 600ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(20px, -18px, 0);
  }
}

@keyframes float-card {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes cinematic-zoom {
  from {
    transform: scale(1.04);
  }

  to {
    transform: scale(1.12);
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (min-width: 1280px) {
  .video-hero-content {
    top: clamp(52px, 7svh, 92px);
  }

  .video-hero h1 {
    font-size: 5.8rem;
  }
}

@media (max-width: 900px) {
  .site-footer,
.dashboard-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero,
  .split,
  .operation-grid,
  .scanner-layout,
  .public-invite,
  .section-grid,
  .section-grid.four,
  .content-grid,
  .pricing-grid,
  .timeline-grid,
  .hero-points-grid,
  .auth-layout,
  .feature-banner,
  .section-intro-split,
  .summary-heading,
  .summary-list {
    grid-template-columns: 1fr;
  }

  .summary-list {
    border-top: 0;
    gap: 18px;
  }

  .summary-list article {
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-right: 0;
  }

  .hero,
  .band,
  .workflow,
  .page-hero,
  .dashboard-head,
  .package-command,
  .metric-grid,
  .content-grid,
  .pricing-grid,
  .split,
  .scanner-layout,
  .public-invite,
  .table-panel,
  .tab-nav,
  .action-grid,
  .site-footer,
  .messages {
    width: min(100%, calc(100% - 18px));
  }

  .hero {
    padding-bottom: 34px;
  }

  .video-hero {
    min-height: max(100svh, 900px);
    padding: 0;
  }

  .video-hero h1 {
    font-size: 3.4rem;
  }

  .video-hero-content {
    top: clamp(42px, 7svh, 76px);
  }

  .hero-visual {
    min-height: 500px;
  }

  .hero-note.one {
    top: 22px;
    left: 10px;
  }

  .hero-note.two {
    right: 12px;
    bottom: 18px;
  }

  .metric-grid,
  .metric-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-bar,
  .filter-bar--inline {
    grid-template-columns: 1fr;
  }

  .package-command-head {
    flex-direction: column;
  }

  .template-swatch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-form {
    order: 1;
  }

  .auth-story {
    order: 2;
  }

  #id_package {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  html,
  body {
    min-height: 100dvh;
    background: var(--bg, #050403);
  }

  main:not(.top-menu-bar),
  .page-main {
    background: var(--bg, #050403);
  }

  .home-page,
  .home-page main:not(.top-menu-bar),
  .home-page .page-main {
    min-height: 100dvh;
    background: var(--bg, #050403);
  }

  body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: env(safe-area-inset-top);
    background: var(--bg, #050403);
    pointer-events: none;
  }

  .site-footer {
    display: none;
  }

  .brand {
    width: 100%;
    min-width: 0;
    gap: 8px;
  }

  .brand-logo {
    height: 36px;
    flex: 0 0 auto;
  }

  .brand-name {
    min-width: 0;
    font-size: 0.9rem;
    white-space: normal;
  }

  .site-nav {
    gap: 5px;
    justify-content: stretch;
    width: 100%;
    flex-wrap: wrap;
    overflow-x: visible;
    padding: 5px;
    border-radius: 18px;
  }

  .site-nav .inline-form {
    flex: 1 1 calc(33.333% - 5px);
    min-width: 0;
  }

  .site-nav a,
  .site-nav .link-button {
    flex: 1 1 calc(33.333% - 5px);
    min-width: 0;
    min-height: 34px;
    padding: 0 7px;
    font-size: 0.76rem;
    white-space: nowrap;
  }

  .site-nav .link-button {
    width: 100%;
  }

  .theme-switcher,
  .language-switcher {
    width: 100%;
  }

  .theme-select,
  .language-select {
    width: 100%;
    max-width: none;
    min-height: 36px;
    font-size: 0.78rem;
  }

  .metric-grid,
  .metric-grid.compact,
  .metric-strip {
    grid-template-columns: 1fr;
  }

  .template-swatch-grid {
    grid-template-columns: 1fr;
  }

  .actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .button,
  .nav-cta {
    width: 100%;
  }

  .hero {
    margin-top: 18px;
    padding: 74px 18px 28px;
    border-radius: 28px;
  }

  .video-hero {
    margin-top: 0;
    min-height: calc(100dvh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
    padding: 0 0 env(safe-area-inset-bottom);
  }

  .home-page .video-hero {
    margin-top: 0;
  }

  .video-hero h1 {
    font-size: 1.9rem;
    line-height: 1.05;
  }

  .video-hero-content {
    top: 34px;
    padding: 0 16px;
  }

  .video-hero-content > p:not(.eyebrow) {
    font-size: 0.9rem;
    line-height: 1.42;
    margin-top: 12px;
  }

  .video-hero-actions {
    position: relative;
    align-items: stretch;
    flex-direction: column;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 16px;
    gap: 10px;
  }

  .video-hero-actions .button {
    min-height: 42px;
  }

  .video-hero-actions .button {
    width: 100%;
  }

  .hero-visual {
    min-height: auto;
    padding: 16px;
  }

  .hero-showcase {
    padding: 8px;
  }

  .hero-note {
    position: static;
    margin-top: 12px;
    max-width: none;
  }

  .auth-story {
    padding: 24px;
  }
}

body:not(.login-page) {
  --bg: #080705;
  --surface: rgba(23, 20, 14, 0.86);
  --surface-strong: rgba(34, 29, 18, 0.94);
  --surface-dark: #090806;
  --surface-dark-2: #17130d;
  --ink: #fff8e8;
  --muted: #c9b98f;
  --line: rgba(213, 175, 92, 0.22);
  --line-strong: rgba(245, 208, 122, 0.36);
  --blue: #d9ad55;
  --blue-deep: #f4d17b;
  --green: #b88a3c;
  --green-deep: #d9ad55;
  --sky: rgba(244, 209, 123, 0.14);
  --mint: rgba(70, 82, 47, 0.22);
  --red: #ffb4a8;
  --success: #9ee6b4;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.36);
  --background: #080705;
  --foreground: #fff8e8;
  --card: rgba(23, 20, 14, 0.86);
  --card-foreground: #fff8e8;
  --primary: #d9ad55;
  --primary-foreground: #0b0905;
  --secondary: #b88a3c;
  --accent: #f5d07a;
  --border: rgba(245, 208, 122, 0.24);
  --muted-foreground: #c9b98f;
  --gradient-start: #050403;
  --gradient-end: #171109;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 6%, rgba(244, 209, 123, 0.16), transparent 26%),
    radial-gradient(circle at 85% 12%, rgba(93, 82, 45, 0.22), transparent 28%),
    linear-gradient(180deg, #050403 0%, #0c0905 42%, #171109 100%);
}

body:not(.login-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(245, 208, 122, 0.07), transparent 24%, rgba(255, 255, 255, 0.025) 46%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(245, 208, 122, 0.045) 0 1px, transparent 1px 120px);
  opacity: 0.55;
  mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.7) 52%, transparent 100%);
}

body:not(.login-page) a {
  color: #f4d17b;
}

body:not(.login-page) .page-grid {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(245, 208, 122, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 208, 122, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
}

body:not(.login-page) .site-footer {
  border-color: rgba(245, 208, 122, 0.34);
  background:
    linear-gradient(180deg, rgba(25, 20, 11, 0.9), rgba(11, 9, 6, 0.86));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

body:not(.login-page) .brand,
body:not(.login-page) .site-nav a,
body:not(.login-page) .link-button,
body:not(.login-page) .site-footer,
body:not(.login-page) .site-footer a {
  color: #fff8e8;
}

body:not(.login-page) .brand-name {
  color: #f4d17b;
}

body:not(.login-page) .site-nav {
  border-color: rgba(245, 208, 122, 0.18);
  background: rgba(255, 244, 210, 0.06);
}

body:not(.login-page) .site-nav a::after {
  background: linear-gradient(90deg, #8d6425, #f5d07a, #fff2bc);
}

body:not(.login-page) .site-nav a:hover,
body:not(.login-page) .site-nav a:focus-visible,
body:not(.login-page) .link-button:hover,
body:not(.login-page) .link-button:focus-visible {
  background: rgba(245, 208, 122, 0.1);
}

body:not(.login-page) .button.primary,
body:not(.login-page) .nav-cta {
  color: #0b0905;
  border-color: rgba(255, 242, 188, 0.48);
  background: linear-gradient(135deg, #8d6425 0%, #f0c96d 48%, #fff2bc 100%);
  box-shadow: 0 16px 34px rgba(217, 173, 85, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

body:not(.login-page) .site-nav a.nav-account-settings {
  color: #0b0905;
  border-color: rgba(255, 242, 188, 0.48);
  background: linear-gradient(135deg, #8d6425 0%, #f0c96d 48%, #fff2bc 100%);
  box-shadow: 0 12px 28px rgba(217, 173, 85, 0.2);
}

body:not(.login-page) .site-nav a.nav-logout {
  color: #ffd7d2;
  border-color: rgba(255, 176, 168, 0.36);
  background: rgba(180, 35, 24, 0.16);
}

body:not(.login-page) .site-nav a.nav-logout:hover,
body:not(.login-page) .site-nav a.nav-logout:focus-visible {
  color: #fff;
  background: #b42318;
}

body:not(.login-page) .button.secondary {
  color: #f8e7b0;
  border-color: rgba(245, 208, 122, 0.28);
  background: rgba(245, 208, 122, 0.08);
}

body:not(.login-page) .button.secondary.light {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.38);
  background: rgba(5, 4, 3, 0.5);
}

body:not(.login-page) .button:hover,
body:not(.login-page) .nav-cta:hover,
body:not(.login-page) .tab-nav a:hover,
body:not(.login-page) .list-row:hover {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46), 0 0 30px rgba(245, 208, 122, 0.1);
}

body:not(.login-page) .button:focus-visible,
body:not(.login-page) .nav-cta:focus-visible,
body:not(.login-page) .tab-nav a:focus-visible,
body:not(.login-page) a:focus-visible,
body:not(.login-page) input:focus-visible,
body:not(.login-page) select:focus-visible,
body:not(.login-page) textarea:focus-visible,
body:not(.login-page) button:focus-visible {
  outline-color: rgba(245, 208, 122, 0.5);
}

body:not(.login-page) .hero,
body:not(.login-page) .band,
body:not(.login-page) .workflow,
body:not(.login-page) .page-hero,
body:not(.login-page) .dashboard-head,
body:not(.login-page) .section-grid article,
body:not(.login-page) .panel,
body:not(.login-page) .price-card,
body:not(.login-page) .limit-card,
body:not(.login-page) .feature-status,
body:not(.login-page) .table-panel,
body:not(.login-page) .filter-bar,
body:not(.login-page) .result-card,
body:not(.login-page) .metric-grid article,
body:not(.login-page) .timeline-grid article {
  border-color: rgba(245, 208, 122, 0.24);
  background:
    linear-gradient(180deg, rgba(38, 31, 18, 0.9), rgba(13, 11, 7, 0.92));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

body:not(.login-page) .hero,
body:not(.login-page) .page-hero,
body:not(.login-page) .dashboard-head {
  background:
    radial-gradient(circle at 86% 10%, rgba(245, 208, 122, 0.2), transparent 28%),
    linear-gradient(140deg, rgba(45, 34, 14, 0.96), rgba(8, 7, 5, 0.96) 62%, rgba(28, 20, 8, 0.98));
}

body:not(.login-page) .band,
body:not(.login-page) .workflow {
  background:
    linear-gradient(180deg, rgba(27, 22, 13, 0.92), rgba(8, 7, 5, 0.94)),
    linear-gradient(90deg, rgba(245, 208, 122, 0.08), transparent);
}

body:not(.login-page) .page-hero::before,
body:not(.login-page) .dashboard-head::before,
body:not(.login-page) .band::before,
body:not(.login-page) .workflow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(245, 208, 122, 0.2), transparent 38%),
    repeating-linear-gradient(135deg, rgba(255, 244, 210, 0.045) 0 1px, transparent 1px 22px);
  opacity: 0.72;
}

body:not(.login-page) .hero-copy h1,
body:not(.login-page) .page-hero h1,
body:not(.login-page) .dashboard-head h1,
body:not(.login-page) .auth-story h1,
body:not(.login-page) .summary-heading h2,
body:not(.login-page) .section-intro h2 {
  font-family: var(--font-heading);
  color: #fff8e8;
  font-weight: 700;
  letter-spacing: -0.012em;
}

body:not(.login-page) .feature-banner h2,
body:not(.login-page) .panel h2,
body:not(.login-page) .price-card h2,
body:not(.login-page) .section-grid h3,
body:not(.login-page) .timeline-grid h3 {
  color: #f4d17b;
}

body:not(.login-page) .hero-copy p,
body:not(.login-page) .page-hero p,
body:not(.login-page) .dashboard-subtitle,
body:not(.login-page) .section-intro p,
body:not(.login-page) .feature-banner p:last-child,
body:not(.login-page) .auth-story p,
body:not(.login-page) .invite-intro,
body:not(.login-page) p {
  color: var(--muted);
}

body:not(.login-page) strong,
body:not(.login-page) h1,
body:not(.login-page) h2,
body:not(.login-page) h3,
body:not(.login-page) label,
body:not(.login-page) td {
  color: #fff8e8;
}

body:not(.login-page) .eyebrow,
body:not(.login-page) .small-label {
  color: #f4d17b;
}

body:not(.login-page) .hero-copy .eyebrow,
body:not(.login-page) .page-hero > .eyebrow,
body:not(.login-page) .dashboard-head .eyebrow,
body:not(.login-page) .pricing-note .eyebrow,
body:not(.login-page) .feature-banner .eyebrow,
body:not(.login-page) .auth-form .eyebrow {
  color: #f4d17b;
  background: transparent;
}

body:not(.login-page) .section-grid article::before,
body:not(.login-page) .price-card::before {
  background: linear-gradient(90deg, #8d6425, #f5d07a, #fff2bc);
}

body:not(.login-page) .price {
  color: #fff2bc;
}

body:not(.login-page) .price-card {
  position: relative;
  overflow: hidden;
}

body:not(.login-page) .price-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 80% 0%, rgba(245, 208, 122, 0.14), transparent 32%);
}

body:not(.login-page) .price-card > * {
  position: relative;
  z-index: 1;
}

body:not(.login-page) .badge,
body:not(.login-page) .price-badge,
body:not(.login-page) .status-chip {
  color: #100d07;
  border-color: rgba(255, 242, 188, 0.38);
  background: linear-gradient(135deg, #d9ad55, #fff2bc);
}

body:not(.login-page) .feature-banner {
  border-color: rgba(245, 208, 122, 0.2);
  background:
    linear-gradient(135deg, rgba(245, 208, 122, 0.12), rgba(70, 57, 30, 0.16)),
    rgba(10, 8, 5, 0.62);
}

body:not(.login-page) .feature-icon,
body:not(.login-page) .timeline-grid span {
  color: #100d07;
  background: linear-gradient(135deg, #8d6425, #f5d07a, #fff2bc);
}

body:not(.login-page) .metric-grid span {
  color: #fff2bc;
}

body:not(.login-page) .metric-grid p,
body:not(.login-page) .helptext,
body:not(.login-page) small,
body:not(.login-page) .list-row span,
body:not(.login-page) .guest-summary span,
body:not(.login-page) th {
  color: var(--muted);
}

body:not(.login-page) .list-row,
body:not(.login-page) .tab-nav a {
  border-color: rgba(245, 208, 122, 0.18);
  background: rgba(255, 244, 210, 0.055);
}

body:not(.login-page) #id_package label {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.2);
  background: rgba(255, 244, 210, 0.055);
}

body:not(.login-page) #id_package label:has(input:checked) {
  border-color: rgba(245, 208, 122, 0.7);
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 208, 122, 0.16), transparent 34%),
    rgba(245, 208, 122, 0.08);
}

body:not(.login-page) .limit-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 208, 122, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(38, 31, 18, 0.88), rgba(13, 11, 7, 0.92));
}

body:not(.login-page) .limit-card strong {
  color: #fff2bc;
}

body:not(.login-page) .feature-status.included {
  border-color: rgba(158, 230, 180, 0.28);
  background: rgba(18, 55, 34, 0.38);
}

body:not(.login-page) .feature-status.locked {
  border-color: rgba(255, 180, 168, 0.26);
  background: rgba(59, 28, 20, 0.36);
}

body:not(.login-page) .feature-status.included span {
  color: #082015;
  background: #9ee6b4;
}

body:not(.login-page) .feature-status.locked span {
  color: #2c0b07;
  background: #ffb4a8;
}

body:not(.login-page) input:not([type="radio"]):not([type="checkbox"]),
body:not(.login-page) select,
body:not(.login-page) textarea {
  color: #fff8e8;
  -webkit-text-fill-color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.28);
  background: rgba(7, 6, 4, 0.82);
}

body:not(.login-page) p:has(.tz-phone-input)::before,
body:not(.login-page) .form-field:has(.tz-phone-input)::before {
  color: #0b0905;
  border-color: rgba(245, 208, 122, 0.38);
  background: linear-gradient(135deg, #8d6425, #f5d07a, #fff2bc);
}

body:not(.login-page) input::placeholder,
body:not(.login-page) textarea::placeholder {
  color: rgba(201, 185, 143, 0.68);
  -webkit-text-fill-color: rgba(201, 185, 143, 0.68);
}

body:not(.login-page) input:not([type="radio"]):not([type="checkbox"]):hover,
body:not(.login-page) select:hover,
body:not(.login-page) textarea:hover,
body:not(.login-page) input:not([type="radio"]):not([type="checkbox"]):focus-visible,
body:not(.login-page) select:focus-visible,
body:not(.login-page) textarea:focus-visible {
  border-color: rgba(245, 208, 122, 0.58);
  box-shadow: 0 0 0 6px rgba(245, 208, 122, 0.08);
}

body:not(.login-page) th,
body:not(.login-page) td {
  border-bottom-color: rgba(245, 208, 122, 0.16);
}

body:not(.login-page) th {
  background: linear-gradient(90deg, rgba(245, 208, 122, 0.12), rgba(245, 208, 122, 0.035));
}

body:not(.login-page) tbody tr:hover td {
  background: rgba(245, 208, 122, 0.055);
}

body:not(.login-page) code {
  color: #fff2bc;
  background: rgba(245, 208, 122, 0.12);
}

body:not(.login-page) .message {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.3);
  background: rgba(34, 29, 18, 0.94);
}

body:not(.login-page) .form-error-summary {
  color: #ffb4a8;
  border-color: rgba(255, 180, 168, 0.32);
  background: rgba(59, 28, 20, 0.42);
}

body:not(.login-page) .form-error-summary strong,
body:not(.login-page) .form-error-summary p {
  color: #ffb4a8;
}

body:not(.login-page) .required-marker {
  color: #0b0905;
  border-color: rgba(255, 242, 188, 0.38);
  background: linear-gradient(135deg, #d9ad55, #fff2bc);
}

body:not(.login-page) .result-card.success {
  border-color: rgba(158, 230, 180, 0.45);
  background: rgba(14, 44, 29, 0.84);
}

body:not(.login-page) .result-card.warning {
  border-color: rgba(255, 180, 168, 0.45);
  background: rgba(56, 19, 17, 0.84);
}

body:not(.login-page) .scanner-box {
  border: 1px solid rgba(245, 208, 122, 0.24);
  background: #050403;
}

body:not(.login-page) .public-invite .panel.form-shell {
  background: var(--surface-strong);
}

body:not(.login-page) .auth-story {
  border-color: rgba(245, 208, 122, 0.24);
  background:
    radial-gradient(circle at top right, rgba(245, 208, 122, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(38, 31, 18, 0.94), rgba(9, 8, 5, 0.96));
}

body:not(.login-page) .settings-menu-button,
body:not(.login-page) .settings-section-card,
body:not(.login-page) .settings-detail-card,
body:not(.login-page) .settings-password-row,
body:not(.login-page) .settings-toggle-row,
body:not(.login-page) .device-card {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.24);
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 208, 122, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(31, 25, 14, 0.9), rgba(9, 8, 5, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

body:not(.login-page) .settings-menu-button:hover,
body:not(.login-page) .settings-menu-button:focus-visible {
  border-color: rgba(245, 208, 122, 0.62);
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 208, 122, 0.2), transparent 36%),
    linear-gradient(180deg, rgba(45, 34, 14, 0.94), rgba(11, 9, 6, 0.94));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), 0 0 30px rgba(245, 208, 122, 0.1);
}

body:not(.login-page) .settings-menu-button strong,
body:not(.login-page) .settings-section-heading h1,
body:not(.login-page) .logout-card h1 {
  color: #f4d17b;
}

body:not(.login-page) .settings-menu-button span,
body:not(.login-page) .settings-section-heading p,
body:not(.login-page) .logout-copy,
body:not(.login-page) .settings-password-row small,
body:not(.login-page) .settings-toggle-row small {
  color: var(--muted);
}

body:not(.login-page) .settings-avatar,
body:not(.login-page) .settings-section-icon {
  color: #0b0905;
  border-color: rgba(255, 242, 188, 0.46);
  background:
    radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.46), transparent 35%),
    linear-gradient(135deg, #8d6425, #f5d07a, #fff2bc);
}

body:not(.login-page) .auth-points span,
body:not(.login-page) .hero-points span,
body:not(.login-page) .hero-note {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.22);
  background: rgba(245, 208, 122, 0.08);
}

body:not(.login-page) .showcase-frame {
  background:
    linear-gradient(145deg, #0d0a05 0%, #3c2d12 46%, #d9ad55 100%);
}

body:not(.login-page) .showcase-card {
  border-color: rgba(245, 208, 122, 0.28);
  background: linear-gradient(180deg, rgba(23, 18, 9, 0.9), rgba(5, 4, 3, 0.94));
}

body:not(.login-page) .home-summary {
  color: #fff8e8;
  background:
    radial-gradient(circle at 10% 0%, rgba(245, 208, 122, 0.14), transparent 26%),
    linear-gradient(180deg, #080705, #171109);
}

body:not(.login-page) .editorial-band {
  background: transparent;
}

body:not(.login-page) .summary-list,
body:not(.login-page) .summary-list article {
  border-color: rgba(245, 208, 122, 0.2);
}

body:not(.login-page) .summary-list p,
body:not(.login-page) .summary-list span,
body:not(.login-page) .home-summary .eyebrow {
  color: var(--muted);
}

/* Refined global navigation */

.desktop-nav {
  justify-self: center;
  flex-wrap: nowrap;
  gap: 3px;
  padding: 4px;
  border-radius: 16px;
}

.desktop-nav .nav-link {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  white-space: nowrap;
}

.desktop-nav .nav-link::after {
  left: 12px;
  right: 12px;
  bottom: 6px;
}

.navbar-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-menu {
  position: relative;
}

.account-trigger,
.mobile-menu-trigger {
  border: 1px solid var(--border);
  color: var(--foreground);
  background: color-mix(in srgb, var(--card) 84%, transparent);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 5px 10px 5px 6px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 900;
}

.account-avatar {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  color: var(--primary-foreground);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  font-size: 0.82rem;
  font-weight: 900;
}

.menu-chevron {
  font-size: 0.75rem;
  opacity: 0.72;
}

.account-dropdown,
.mobile-nav-panel {
  border: 1px solid var(--border);
  color: var(--foreground);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.16);
  backdrop-filter: blur(22px) saturate(1.16);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: calc(var(--nav-z) + 2);
  width: min(310px, calc(100vw - 28px));
  padding: 12px;
  border-radius: 20px;
}

.dropdown-link,
.mobile-nav-links a,
.mobile-logout {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--foreground);
  font-family: var(--font-body);
  font-weight: 800;
}

.dropdown-link:hover,
.dropdown-link:focus-visible,
.mobile-nav-links a:hover,
.mobile-nav-links a:focus-visible,
.mobile-logout:hover,
.mobile-logout:focus-visible,
.account-trigger:hover,
.account-trigger:focus-visible,
.mobile-menu-trigger:hover,
.mobile-menu-trigger:focus-visible {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.dropdown-link-strong {
  color: var(--primary-foreground);
  background: linear-gradient(135deg, var(--primary), var(--accent));
}

.dropdown-link-danger,
.mobile-logout {
  color: var(--red);
}

.dropdown-divider {
  height: 1px;
  margin: 10px 0;
  background: var(--border);
}

.dropdown-label {
  margin: 0 0 8px;
  padding: 0 4px;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-preference {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.nav-preference .theme-select,
.nav-preference .language-select {
  width: 100%;
  max-width: none;
  min-height: 42px;
  border-radius: 12px;
  box-shadow: none;
}

.mobile-menu-trigger {
  display: none;
  justify-self: end;
  width: 44px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  border-radius: 14px;
}

.mobile-menu-trigger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.mobile-nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: calc(var(--nav-z) + 1);
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
}

.mobile-nav-links,
.mobile-preferences {
  display: grid;
  gap: 8px;
}

.mobile-nav-links a {
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--surface-strong) 58%, transparent);
}

.mobile-logout {
  border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
  background: color-mix(in srgb, var(--red) 9%, transparent);
}

body.mobile-nav-open {
  overflow-x: hidden;
}

body:not(.login-page) .account-trigger,
body:not(.login-page) .mobile-menu-trigger {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.28);
  background: rgba(255, 244, 210, 0.07);
}

body:not(.login-page) .account-avatar,
body:not(.login-page) .dropdown-link-strong {
  color: #0b0905;
  background: linear-gradient(135deg, #8d6425, #f5d07a, #fff2bc);
}

body:not(.login-page) .account-dropdown,
body:not(.login-page) .mobile-nav-panel {
  border-color: rgba(245, 208, 122, 0.32);
  background:
    linear-gradient(180deg, rgba(25, 20, 11, 0.96), rgba(8, 7, 5, 0.94));
}

body:not(.login-page) .dropdown-link,
body:not(.login-page) .mobile-nav-links a,
body:not(.login-page) .mobile-logout,
body:not(.login-page) .nav-preference {
  color: #fff8e8;
}

body:not(.login-page) .dropdown-label {
  color: #c9b98f;
}

@media (min-width: 921px) {
  .mobile-nav-panel {
    display: none !important;
  }
}

@media (max-width: 920px) {

  .desktop-nav,
.navbar-actions {
    display: none;
  }

  .mobile-menu-trigger {
    display: inline-flex;
  }

}

@media (max-width: 540px) {

  .mobile-nav-panel {
    max-height: calc(100dvh - 86px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Final navbar information architecture cleanup */

.desktop-nav {
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  justify-self: center;
}

.desktop-nav .nav-link {
  min-height: 36px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 0.84rem;
}

.navbar-actions {
  min-width: 0;
}

.account-trigger {
  min-height: 39px;
  padding: 4px 9px 4px 5px;
  border-radius: 12px;
  font-size: 0.84rem;
}

.account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.menu-chevron {
  position: relative;
  width: 10px;
  height: 10px;
  font-size: 0;
}

.menu-chevron::before {
  content: "";
  position: absolute;
  inset: 1px 2px 3px 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.72;
}

.account-trigger[aria-expanded="true"] .menu-chevron::before {
  transform: translateY(2px) rotate(225deg);
}

.account-dropdown {
  border-radius: 16px;
}

.dropdown-link,
.mobile-nav-links a,
.mobile-logout {
  min-height: 46px;
  border-radius: 10px;
}

.nav-preference .theme-select,
.nav-preference .language-select {
  min-height: 44px;
  border-radius: 10px;
}

@media (max-width: 920px) {

  .mobile-menu-trigger {
    display: inline-flex;
    width: 42px;
    height: 40px;
    border-radius: 11px;
    box-shadow: none;
  }

  .mobile-nav-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 72px);
    left: 10px;
    right: 10px;
    width: auto;
    max-height: calc(100dvh - 88px);
    padding: 10px;
    border-radius: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-nav-links,
  .mobile-preferences {
    gap: 7px;
  }

  .mobile-nav-links a,
  .mobile-logout {
    min-height: 48px;
    padding: 0 13px;
    border-radius: 11px;
    font-size: 0.94rem;
  }

  .nav-preference {
    margin-top: 8px;
  }
}

@media (max-width: 430px) {

  .mobile-menu-trigger {
    width: 40px;
    height: 38px;
  }

  .mobile-nav-panel {
    left: 8px;
    right: 8px;
    top: calc(env(safe-area-inset-top, 0px) + 68px);
    max-height: calc(100dvh - 82px);
  }
}

/* Mobile navbar drawer repair */
.mobile-nav-backdrop {
  display: none;
}

.mobile-nav-backdrop[hidden],
.mobile-nav-panel[hidden] {
  display: none !important;
}

@media (max-width: 920px) {
  body.mobile-nav-open {
    overflow: hidden;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--nav-z) - 1);
    display: block;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.58);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    cursor: default;
  }

  .mobile-nav-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 70px);
    left: 8px;
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index: calc(var(--nav-z) + 2);
    width: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 18px;
    border-color: rgba(245, 208, 122, 0.26);
    background:
      linear-gradient(180deg, rgba(15, 12, 7, 0.99), rgba(7, 6, 4, 0.99));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 244, 210, 0.08);
    scrollbar-width: none;
  }

  .mobile-nav-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .mobile-nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-nav-links a,
  .mobile-logout {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(245, 208, 122, 0.16);
    color: #fff8e8;
    background: rgba(255, 244, 210, 0.055);
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.15;
  }

  .mobile-nav-links a:hover,
  .mobile-nav-links a:focus-visible,
  .mobile-logout:hover,
  .mobile-logout:focus-visible {
    background: rgba(245, 208, 122, 0.12);
  }

  .mobile-preferences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(245, 208, 122, 0.16);
  }

  .mobile-preferences .nav-preference {
    margin: 0;
    gap: 6px;
  }

  .mobile-preferences .nav-preference span {
    color: #f4d17b;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .mobile-preferences .theme-select,
  .mobile-preferences .language-select {
    min-height: 42px;
    padding-left: 10px;
    padding-right: 28px;
    border-radius: 11px;
    border-color: rgba(245, 208, 122, 0.22);
    color: #fff8e8;
    background: rgba(5, 4, 3, 0.96);
    font-size: 0.82rem;
  }

  .mobile-logout {
    justify-content: center;
    width: 100%;
    margin-top: 0;
    border-color: rgba(255, 180, 168, 0.28);
    color: #ffd7d2;
    background: rgba(180, 35, 24, 0.14);
  }

  .mobile-menu-trigger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .mobile-menu-trigger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-trigger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .mobile-menu-trigger span {
    transition: transform 180ms ease, opacity 180ms ease;
  }
}

@media (max-width: 430px) {
  .mobile-nav-panel {
    top: calc(env(safe-area-inset-top, 0px) + 66px);
    left: 7px;
    right: 7px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    padding: 10px;
    border-radius: 16px;
  }

  .mobile-nav-links {
    gap: 7px;
  }

  .mobile-nav-links a,
  .mobile-logout {
    min-height: 42px;
    padding: 0 10px;
    font-size: 0.84rem;
  }

  .mobile-preferences {
    gap: 8px;
  }

  .mobile-preferences .theme-select,
  .mobile-preferences .language-select {
    min-height: 40px;
    font-size: 0.78rem;
  }
}

/* Legacy navbar fallback kept in normal document flow. */

body:not(.home-page) .page-main {
  padding-top: 0;
}

body:not(.home-page) .messages {
  margin-top: 16px;
}

.home-page .video-hero {
  margin-top: 0;
}

@media (max-width: 920px) {

  body:not(.home-page) .page-main {
    padding-top: 0;
  }

  body:not(.home-page) .messages {
    margin-top: 12px;
  }
}

/* Legacy header fallback. Do not pin it to the viewport. */

/* Phone navigation as an off-canvas sidebar. */
@media (max-width: 920px) {
  .mobile-nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: calc(var(--nav-z) + 1) !important;
    display: block;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.58);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }

  .mobile-nav-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: calc(var(--nav-z) + 2) !important;
    width: 50vw !important;
    min-width: 0 !important;
    max-width: 50vw !important;
    max-height: none !important;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: calc(env(safe-area-inset-top, 0px) + 22px) 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: rgba(245, 208, 122, 0.28);
    border-radius: 24px 0 0 24px;
    background:
      radial-gradient(circle at 80% 0%, rgba(245, 208, 122, 0.12), transparent 34%),
      linear-gradient(180deg, rgba(15, 12, 7, 0.995), rgba(7, 6, 4, 0.995));
    box-shadow: -28px 0 80px rgba(0, 0, 0, 0.58), inset 1px 0 0 rgba(255, 244, 210, 0.08);
    scrollbar-width: none;
    animation: nav-sidebar-in 220ms ease-out both;
  }

  .mobile-nav-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .mobile-nav-links,
  .mobile-preferences {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .mobile-nav-links a,
  .mobile-logout {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 13px;
    font-size: 0.92rem;
    justify-content: flex-start;
  }

  .mobile-preferences {
    padding-top: 12px;
    border-top: 1px solid rgba(245, 208, 122, 0.16);
  }

  .mobile-preferences .theme-select,
  .mobile-preferences .language-select {
    min-height: 44px;
  }

}

@keyframes nav-sidebar-in {
  from {
    transform: translateX(104%);
  }

  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-panel {
    animation: none !important;
  }
}

/* Clean flow top menu. This replaces the old fixed site-header/site-navbar stack. */
.top-menu-bar,
.top-menu-bar * {
  box-sizing: border-box;
}

.top-menu-bar {
  position: relative !important;
  z-index: 1000 !important;
  width: min(1180px, calc(100% - 32px));
  min-height: 62px;
  margin: calc(env(safe-area-inset-top, 0px) + 8px) auto 0 !important;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  border: 1px solid rgba(245, 208, 122, 0.34);
  border-radius: 18px;
  color: #fff8e8;
  background: linear-gradient(180deg, rgba(25, 20, 11, 0.96), rgba(8, 7, 5, 0.94));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 244, 210, 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  overflow: visible;
}

.top-menu-bar .brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f4d17b;
}

.top-menu-bar .brand-logo {
  width: auto;
  height: 38px;
  flex: 0 0 auto;
}

.top-menu-bar .brand-name {
  max-width: 260px;
  overflow: hidden;
  color: #f4d17b;
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-menu-bar .desktop-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(245, 208, 122, 0.18);
  border-radius: 14px;
  background: rgba(255, 244, 210, 0.06);
}

.top-menu-bar .desktop-nav a {
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  color: #fff8e8;
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
}

.top-menu-bar .desktop-nav a:hover,
.top-menu-bar .desktop-nav a:focus-visible {
  background: rgba(245, 208, 122, 0.12);
}

.top-menu-bar .navbar-actions {
  justify-self: end;
  display: flex;
  align-items: center;
}

.top-menu-bar .account-menu {
  position: relative;
}

.top-menu-bar .account-trigger,
.top-menu-bar .mobile-menu-trigger {
  border: 1px solid rgba(245, 208, 122, 0.3);
  color: #fff8e8;
  background: rgba(255, 244, 210, 0.07);
  box-shadow: none;
}

.top-menu-bar .account-trigger {
  min-height: 40px;
  padding: 5px 10px 5px 6px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 13px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 900;
}

.top-menu-bar .account-avatar {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  color: #0b0905;
  background: linear-gradient(135deg, #8d6425, #f5d07a, #fff2bc);
}

.top-menu-bar .menu-chevron {
  position: relative;
  width: 10px;
  height: 10px;
  font-size: 0;
}

.top-menu-bar .menu-chevron::before {
  content: "";
  position: absolute;
  inset: 1px 2px 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.72;
  transform: rotate(45deg);
}

.top-menu-bar .account-trigger[aria-expanded="true"] .menu-chevron::before {
  transform: translateY(2px) rotate(225deg);
}

.top-menu-bar .account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1002;
  width: min(310px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid rgba(245, 208, 122, 0.3);
  border-radius: 18px;
  color: #fff8e8;
  background: linear-gradient(180deg, rgba(25, 20, 11, 0.98), rgba(8, 7, 5, 0.96));
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 244, 210, 0.08);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.top-menu-bar .dropdown-link,
.top-menu-bar .mobile-nav-links a,
.top-menu-bar .mobile-logout {
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  color: #fff8e8;
  font-weight: 900;
}

.top-menu-bar .dropdown-link:hover,
.top-menu-bar .dropdown-link:focus-visible {
  background: rgba(245, 208, 122, 0.12);
}

.top-menu-bar .dropdown-link-strong {
  color: #0b0905;
  background: linear-gradient(135deg, #8d6425, #f5d07a, #fff2bc);
}

.top-menu-bar .dropdown-link-danger {
  color: #ffd7d2;
}

.top-menu-bar .dropdown-divider {
  height: 1px;
  margin: 10px 0;
  background: rgba(245, 208, 122, 0.2);
}

.top-menu-bar .dropdown-label {
  margin: 0 0 8px;
  color: #c9b98f;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.top-menu-bar .nav-preference {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  color: #fff8e8;
  font-size: 0.82rem;
  font-weight: 900;
}

.top-menu-bar .theme-select,
.top-menu-bar .language-select {
  width: 100%;
  max-width: none;
  min-height: 42px;
  border-radius: 11px;
  border-color: rgba(245, 208, 122, 0.24);
  color: #fff8e8;
  background: rgba(5, 4, 3, 0.96);
  box-shadow: none;
}

.top-menu-bar .mobile-menu-trigger,
.top-menu-bar .mobile-nav-backdrop {
  display: none;
}

.page-main {
  min-height: calc(100vh - 150px);
  position: relative;
  z-index: 1;
}

body:not(.home-page) .page-main {
  padding-top: 0;
}

body:not(.home-page) .messages {
  margin-top: 16px;
}

.home-page .video-hero {
  margin-top: 0;
}

@media (max-width: 920px) {
  .top-menu-bar {
    width: min(520px, calc(100% - 16px)) !important;
    min-height: 56px;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 15px;
  }

  .top-menu-bar .desktop-nav,
  .top-menu-bar .navbar-actions {
    display: none !important;
  }

  .top-menu-bar .brand {
    width: auto;
    min-width: 0;
    gap: 8px;
  }

  .top-menu-bar .brand-logo {
    height: 32px;
  }

  .top-menu-bar .brand-name {
    max-width: calc(100vw - 118px);
    font-size: 0.86rem;
  }

  .top-menu-bar .mobile-menu-trigger {
    width: 42px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    flex-direction: column;
    gap: 4px;
    border-radius: 11px;
  }

  .top-menu-bar .mobile-menu-trigger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .top-menu-bar .mobile-menu-trigger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .top-menu-bar .mobile-menu-trigger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .top-menu-bar .mobile-menu-trigger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .top-menu-bar .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: block;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.58);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }

  .top-menu-bar .mobile-nav-backdrop[hidden],
  .top-menu-bar .mobile-nav-panel[hidden] {
    display: none !important;
  }

  .top-menu-bar .mobile-nav-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 1002 !important;
    width: 50vw !important;
    min-width: 0 !important;
    max-width: 50vw !important;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    padding: calc(env(safe-area-inset-top, 0px) + 22px) 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: rgba(245, 208, 122, 0.28);
    border-radius: 24px 0 0 24px;
    background:
      radial-gradient(circle at 80% 0%, rgba(245, 208, 122, 0.12), transparent 34%),
      linear-gradient(180deg, rgba(15, 12, 7, 0.995), rgba(7, 6, 4, 0.995));
    box-shadow: -28px 0 80px rgba(0, 0, 0, 0.58), inset 1px 0 0 rgba(255, 244, 210, 0.08);
    animation: nav-sidebar-in 220ms ease-out both;
  }

  .top-menu-bar .mobile-nav-links,
  .top-menu-bar .mobile-preferences {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .top-menu-bar .mobile-nav-links a,
  .top-menu-bar .mobile-logout {
    min-height: 46px;
    border: 1px solid rgba(245, 208, 122, 0.16);
    background: rgba(255, 244, 210, 0.055);
  }

  .top-menu-bar .mobile-preferences {
    padding-top: 12px;
    border-top: 1px solid rgba(245, 208, 122, 0.16);
  }

  body:not(.home-page) .page-main {
    padding-top: 0;
  }

  body:not(.home-page) .messages {
    margin-top: 12px;
  }

}

/* Home page: let the video hero sit behind the menu bar. */
html[data-theme] body.home-page {
  --home-nav-overlap: calc(env(safe-area-inset-top, 0px) + 78px);
}

html[data-theme] body.home-page .page-main {
  margin-top: calc(var(--home-nav-overlap) * -1);
}

html[data-theme] body.home-page .video-hero {
  margin-top: 0 !important;
  min-height: 100dvh !important;
  height: 100dvh;
  padding-top: var(--home-nav-overlap) !important;
}

html[data-theme] body.home-page .video-hero-media,
html[data-theme] body.home-page .video-hero-media.is-autoplay-managed {
  display: block;
  visibility: visible;
  opacity: 1;
}

html[data-theme] body.home-page .video-hero-content {
  top: calc(var(--home-nav-overlap) + clamp(14px, 4svh, 42px)) !important;
}

html[data-theme] body.home-page .top-menu-bar.top-menu-bar {
  border-color: rgba(245, 208, 122, 0.34);
  color: #fff8e8;
  background:
    linear-gradient(180deg, rgba(12, 10, 6, 0.42), rgba(8, 7, 5, 0.28));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 244, 210, 0.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

html[data-theme] body.home-page .top-menu-bar .brand,
html[data-theme] body.home-page .top-menu-bar .brand-name,
html[data-theme] body.home-page .top-menu-bar .desktop-nav a,
html[data-theme] body.home-page .top-menu-bar .dropdown-link,
html[data-theme] body.home-page .top-menu-bar .nav-preference {
  color: #fff8e8;
}

html[data-theme] body.home-page .top-menu-bar .desktop-nav,
html[data-theme] body.home-page .top-menu-bar .account-trigger {
  border-color: rgba(245, 208, 122, 0.22);
  background: rgba(255, 244, 210, 0.08);
}

html[data-theme] body.home-page .top-menu-bar .account-dropdown,
html[data-theme] body.home-page .top-menu-bar .mobile-nav-panel {
  border-color: rgba(245, 208, 122, 0.3);
  color: #fff8e8;
  background:
    radial-gradient(circle at 80% 0%, rgba(245, 208, 122, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(15, 12, 7, 0.985), rgba(7, 6, 4, 0.985));
}

html[data-theme] body.home-page .top-menu-bar .theme-select,
html[data-theme] body.home-page .top-menu-bar .language-select {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.24);
  background: rgba(5, 4, 3, 0.96);
}

@media (max-width: 920px) {
  html[data-theme] body.home-page {
    --home-nav-overlap: calc(env(safe-area-inset-top, 0px) + 66px);
  }

  html[data-theme] body.home-page .video-hero-content {
    top: calc(var(--home-nav-overlap) + 12px) !important;
  }
}

/* Login page theme parity. The main theme blocks intentionally skip .login-page. */
body.login-page {
  --bg: #080705;
  --surface: rgba(23, 20, 14, 0.86);
  --surface-strong: rgba(34, 29, 18, 0.94);
  --surface-dark: #090806;
  --surface-dark-2: #17130d;
  --ink: #fff8e8;
  --muted: #c9b98f;
  --line: rgba(213, 175, 92, 0.22);
  --line-strong: rgba(245, 208, 122, 0.36);
  --blue: #d9ad55;
  --blue-deep: #f4d17b;
  --green: #b88a3c;
  --green-deep: #d9ad55;
  --sky: rgba(244, 209, 123, 0.14);
  --mint: rgba(70, 82, 47, 0.22);
  --red: #ffb4a8;
  --success: #9ee6b4;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.36);
  --background: #080705;
  --foreground: #fff8e8;
  --card: rgba(23, 20, 14, 0.86);
  --card-foreground: #fff8e8;
  --primary: #d9ad55;
  --primary-foreground: #0b0905;
  --secondary: #b88a3c;
  --accent: #f5d07a;
  --border: rgba(245, 208, 122, 0.24);
  --muted-foreground: #c9b98f;
  --gradient-start: #050403;
  --gradient-end: #171109;
  color: var(--foreground);
  background:
    radial-gradient(circle at 18% 6%, rgba(244, 209, 123, 0.16), transparent 26%),
    radial-gradient(circle at 85% 12%, rgba(93, 82, 45, 0.22), transparent 28%),
    linear-gradient(180deg, #050403 0%, #0c0905 42%, #171109 100%);
}

body.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(245, 208, 122, 0.07), transparent 24%, rgba(255, 255, 255, 0.025) 46%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(245, 208, 122, 0.045) 0 1px, transparent 1px 120px);
  opacity: 0.55;
  mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.7) 52%, transparent 100%);
}

body.login-page a {
  color: #f4d17b;
}

body.login-page .page-grid {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(245, 208, 122, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 208, 122, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
}

body.login-page .site-footer {
  border-color: rgba(245, 208, 122, 0.34);
  color: #fff8e8;
  background:
    linear-gradient(180deg, rgba(25, 20, 11, 0.9), rgba(11, 9, 6, 0.86));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

body.login-page .site-footer a,
body.login-page .site-footer p {
  color: #c9b98f;
}

body.login-page .login-auth-shell {
  color: #fff8e8;
}

body.login-page .auth-form {
  border-color: rgba(245, 208, 122, 0.26);
  color: #fff8e8;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 208, 122, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(38, 31, 18, 0.92), rgba(13, 11, 7, 0.94));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

body.login-page .auth-form h2 {
  color: #fff8e8;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 0.95;
}

body.login-page .auth-form label,
body.login-page .auth-form p {
  color: #c9b98f;
}

body.login-page .login-eyebrow {
  color: #f4d17b;
  border-color: rgba(245, 208, 122, 0.24);
  background: rgba(245, 208, 122, 0.1);
}

body.login-page .login-eyebrow span + span::before {
  color: rgba(201, 185, 143, 0.7);
}

body.login-page input:not([type="radio"]):not([type="checkbox"]),
body.login-page select,
body.login-page textarea {
  color: #fff8e8;
  -webkit-text-fill-color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.26);
  background: rgba(7, 6, 4, 0.82);
  color-scheme: dark;
}

body.login-page input::placeholder,
body.login-page textarea::placeholder {
  color: rgba(201, 185, 143, 0.72);
  -webkit-text-fill-color: rgba(201, 185, 143, 0.72);
}

body.login-page input:not([type="radio"]):not([type="checkbox"]):hover,
body.login-page select:hover,
body.login-page textarea:hover,
body.login-page input:not([type="radio"]):not([type="checkbox"]):focus-visible,
body.login-page select:focus-visible,
body.login-page textarea:focus-visible {
  border-color: rgba(245, 208, 122, 0.52);
  box-shadow: 0 0 0 6px rgba(245, 208, 122, 0.12);
}

body.login-page .button.primary {
  color: #0b0905;
  border-color: rgba(255, 242, 188, 0.48);
  background: linear-gradient(135deg, #8d6425 0%, #f0c96d 48%, #fff2bc 100%);
  box-shadow: 0 16px 34px rgba(217, 173, 85, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

body.login-page .message,
body.login-page .errorlist {
  color: #ffd7d2;
  border-color: rgba(255, 176, 168, 0.32);
  background: rgba(180, 35, 24, 0.14);
}

html[data-theme="noir"] body.login-page .auth-form input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="noir"] body.login-page .auth-form select,
html[data-theme="noir"] body.login-page .auth-form textarea,
html[data-theme="noir"] .auth-shell .form-shell input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="noir"] .auth-shell .form-shell select,
html[data-theme="noir"] .auth-shell .form-shell textarea {
  color: #fff8e8;
  -webkit-text-fill-color: #fff8e8;
  caret-color: #f5d07a;
  border-color: rgba(245, 208, 122, 0.32);
  background: rgba(7, 6, 4, 0.9);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.38);
  color-scheme: dark;
}

html[data-theme="noir"] body.login-page .auth-form input:not([type="radio"]):not([type="checkbox"]):hover,
html[data-theme="noir"] body.login-page .auth-form select:hover,
html[data-theme="noir"] body.login-page .auth-form textarea:hover,
html[data-theme="noir"] .auth-shell .form-shell input:not([type="radio"]):not([type="checkbox"]):hover,
html[data-theme="noir"] .auth-shell .form-shell select:hover,
html[data-theme="noir"] .auth-shell .form-shell textarea:hover {
  border-color: rgba(245, 208, 122, 0.48);
}

html[data-theme="noir"] body.login-page .auth-form input:not([type="radio"]):not([type="checkbox"]):focus-visible,
html[data-theme="noir"] body.login-page .auth-form select:focus-visible,
html[data-theme="noir"] body.login-page .auth-form textarea:focus-visible,
html[data-theme="noir"] .auth-shell .form-shell input:not([type="radio"]):not([type="checkbox"]):focus-visible,
html[data-theme="noir"] .auth-shell .form-shell select:focus-visible,
html[data-theme="noir"] .auth-shell .form-shell textarea:focus-visible {
  border-color: rgba(245, 208, 122, 0.64);
  box-shadow: 0 0 0 5px rgba(245, 208, 122, 0.12), inset 0 1px 4px rgba(0, 0, 0, 0.38);
}

html[data-theme="noir"] body.login-page .auth-form input::placeholder,
html[data-theme="noir"] body.login-page .auth-form textarea::placeholder,
html[data-theme="noir"] .auth-shell .form-shell input::placeholder,
html[data-theme="noir"] .auth-shell .form-shell textarea::placeholder {
  color: rgba(201, 185, 143, 0.72);
  -webkit-text-fill-color: rgba(201, 185, 143, 0.72);
}

html[data-theme="noir"] body.login-page .auth-form input:-webkit-autofill,
html[data-theme="noir"] body.login-page .auth-form input:-webkit-autofill:hover,
html[data-theme="noir"] body.login-page .auth-form input:-webkit-autofill:focus,
html[data-theme="noir"] .auth-shell .form-shell input:-webkit-autofill,
html[data-theme="noir"] .auth-shell .form-shell input:-webkit-autofill:hover,
html[data-theme="noir"] .auth-shell .form-shell input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff8e8;
  -webkit-box-shadow: 0 0 0 1000px rgba(7, 6, 4, 0.94) inset;
  caret-color: #f5d07a;
}

.contact-action-row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.contact-choice {
  position: relative;
}

.contact-choice summary {
  list-style: none;
  user-select: none;
}

.contact-choice summary::-webkit-details-marker {
  display: none;
}

.contact-choice-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 20;
  min-width: 180px;
  padding: 8px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.contact-choice-panel a {
  min-height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  color: var(--foreground);
  font-weight: 800;
}

.contact-choice-panel a:hover,
.contact-choice-panel a:focus-visible {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

@media (max-width: 540px) {
  .contact-action-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .contact-action-row .button,
  .contact-choice summary {
    width: 100%;
  }

  .contact-choice-panel {
    position: static;
    margin-top: 8px;
  }
}

body.contact-page .page-main {
  min-height: 0 !important;
  overflow: visible;
}

body.contact-page .page-hero {
  overflow: visible;
  z-index: 5;
}

body.contact-page .contact-choice[open] {
  z-index: 30;
}

body.contact-page .site-footer {
  margin-top: clamp(14px, 2vw, 22px);
}

@media (max-width: 540px) {
  body.contact-page .site-footer {
    width: min(100%, calc(100% - 18px));
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  body.contact-page .site-footer nav {
    flex-wrap: wrap;
  }
}

.nav-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.top-menu-bar .nav-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-menu-bar .desktop-nav a,
.top-menu-bar .dropdown-link,
.top-menu-bar .mobile-nav-links a,
.top-menu-bar .mobile-logout,
.top-menu-bar .account-trigger {
  gap: 8px;
}

.top-menu-bar .desktop-nav a .nav-icon {
  width: 0.96rem;
  height: 0.96rem;
  opacity: 0.9;
}

.top-menu-bar .account-avatar .nav-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.15;
}

.top-menu-bar .dropdown-link .nav-icon,
.top-menu-bar .mobile-nav-links a .nav-icon,
.top-menu-bar .mobile-logout .nav-icon {
  width: 1.02rem;
  height: 1.02rem;
  opacity: 0.92;
}

.top-menu-bar .dropdown-label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.top-menu-bar .dropdown-label .nav-icon {
  width: 0.88rem;
  height: 0.88rem;
  opacity: 0.86;
}

.top-menu-bar .nav-preference-label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.top-menu-bar .nav-preference-label .nav-icon {
  width: 0.95rem;
  height: 0.95rem;
  opacity: 0.9;
}

@media (max-width: 920px) {
  .top-menu-bar .mobile-nav-links a,
  .top-menu-bar .mobile-logout {
    justify-content: flex-start;
  }

  .top-menu-bar .mobile-preferences .nav-preference-label {
    justify-content: flex-start;
  }
}

.footer-cookie-button {
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.footer-cookie-button:hover,
.footer-cookie-button:focus-visible {
  color: var(--primary);
}

.cookie-consent {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1200;
  width: min(460px, calc(100vw - 32px));
  transition: opacity 180ms ease, transform 180ms ease;
}

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent.is-hiding {
  opacity: 0;
  transform: translateY(10px);
}

.cookie-consent-card {
  display: grid;
  gap: 11px;
  max-height: calc(100dvh - 32px);
  padding: 15px;
  overflow-y: auto;
  border: 1px solid rgba(245, 208, 122, 0.28);
  border-radius: 18px;
  color: #fff8e8;
  background:
    radial-gradient(circle at 96% 0%, rgba(245, 208, 122, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(25, 20, 11, 0.98), rgba(8, 7, 5, 0.98));
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 244, 210, 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.cookie-consent-copy h2,
.cookie-consent-copy p {
  margin: 0;
}

.cookie-consent-copy h2 {
  color: #f4d17b;
  font-size: 1.08rem;
  line-height: 1.25;
}

.cookie-consent-copy p:last-child {
  margin-top: 5px;
  color: #c9b98f;
  font-size: 0.8rem;
  line-height: 1.45;
}

.cookie-consent-details {
  border-top: 1px solid rgba(245, 208, 122, 0.18);
}

.cookie-consent-details summary {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 2px 0;
  color: #f4d17b;
  font-size: 0.8rem;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.cookie-consent-details summary::-webkit-details-marker {
  display: none;
}

.cookie-consent-details summary::after {
  content: "+";
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  border: 1px solid rgba(245, 208, 122, 0.28);
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.cookie-consent-details[open] summary::after {
  transform: rotate(45deg);
}

.cookie-consent-details summary:focus-visible {
  outline: 2px solid rgba(245, 208, 122, 0.34);
  outline-offset: 2px;
}

.cookie-consent-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 8px;
}

.cookie-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(245, 208, 122, 0.18);
  border-radius: 12px;
  background: rgba(255, 244, 210, 0.055);
}

.cookie-option input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 16px;
  min-height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
  border: 1.5px solid rgba(245, 208, 122, 0.46);
  border-radius: 5px;
  background: rgba(5, 4, 3, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, 0.08);
  cursor: pointer;
}

.cookie-option input::before {
  content: "";
  width: 5px;
  height: 9px;
  border: solid #100d07;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 120ms ease;
}

.cookie-option input:checked {
  border-color: #f4d17b;
  background: linear-gradient(135deg, #d9ad55, #fff2bc);
}

.cookie-option input:checked::before {
  transform: rotate(45deg) scale(1);
}

.cookie-option input:focus-visible {
  outline: 3px solid rgba(245, 208, 122, 0.28);
  outline-offset: 2px;
}

.cookie-option input:disabled {
  cursor: not-allowed;
  opacity: 0.86;
}

.cookie-option strong,
.cookie-option small {
  display: block;
}

.cookie-option strong {
  font-size: 0.78rem;
  line-height: 1.3;
}

.cookie-option small {
  margin-top: 2px;
  color: #c9b98f;
  font-size: 0.7rem;
  line-height: 1.35;
}

.cookie-option.is-essential {
  border-color: rgba(245, 208, 122, 0.34);
}

.cookie-consent-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cookie-consent-actions .button,
.cookie-consent-save {
  min-height: 40px;
  padding: 8px 11px;
  font-size: 0.78rem;
}

.cookie-consent-save {
  width: 100%;
  margin-top: 8px;
}

@media (max-width: 720px) {
  .cookie-consent {
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
  }

  .cookie-consent-card {
    max-height: calc(100dvh - 16px);
    padding: 13px;
  }
}

body:not(.login-page) .about-brand-card {
  background: transparent;
  box-shadow: none;
}

body:not(.login-page) .about-story-intro,
body:not(.login-page) .about-columns,
body:not(.login-page) .about-workflow-note,
body:not(.login-page) .about-founder-note {
  border-color: rgba(245, 208, 122, 0.18);
}

body:not(.login-page) .about-brand-card strong,
body:not(.login-page) .about-story-intro h2,
body:not(.login-page) .about-mission-grid h3,
body:not(.login-page) .about-columns h3,
body:not(.login-page) .about-workflow-note span {
  color: #f4d17b;
}

body:not(.login-page) .about-mission-grid article::before,
body:not(.login-page) .about-columns article::before {
  background: linear-gradient(90deg, #8d6425, #f5d07a, #fff2bc);
}

@media (max-width: 920px) {
  .about-frame-top,
  .about-story-intro,
  .about-mission-grid,
  .about-columns,
  .about-workflow-note {
    grid-template-columns: 1fr;
  }

  .about-brand-card {
    justify-self: stretch;
  }
}

@media (max-width: 920px) {
  .top-menu-bar .mobile-nav-panel,
  .mobile-nav-panel {
    right: 0 !important;
    left: auto !important;
    width: 50vw !important;
    min-width: 0 !important;
    max-width: 50vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .top-menu-bar .mobile-nav-links,
  .top-menu-bar .mobile-preferences,
  .mobile-nav-links,
  .mobile-preferences {
    min-width: 0 !important;
  }

  .top-menu-bar .mobile-nav-links a,
  .top-menu-bar .mobile-logout,
  .mobile-nav-links a,
  .mobile-logout {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .top-menu-bar .mobile-nav-links a span,
  .top-menu-bar .mobile-logout span,
  .mobile-nav-links a span,
  .mobile-logout span,
  .top-menu-bar .nav-preference,
  .top-menu-bar .nav-preference-label,
  .top-menu-bar .theme-select,
  .top-menu-bar .language-select {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM THEME LAYER  ·  Ventiqa
   Luxury UI refinements for Noir
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared luxury hover lift & easing ── */
.section-grid article,
.panel,
.price-card,
.result-card,
.metric-grid article,
.timeline-grid article,
.table-panel,
.tab-nav a,
.list-row,
.settings-menu-button,
.device-card {
  transition:
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 300ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

.section-grid article:hover,
.price-card:hover,
.panel:hover {
  transform: translateY(-10px) scale(1.006);
}

.metric-grid article:hover {
  transform: translateY(-6px) scale(1.014);
}

.list-row {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease, border-color 180ms ease, background 180ms ease;
}

input,
select,
textarea {
  border-radius: 14px;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  transform: translateY(-2px);
}

/* Shimmer keyframes */
/* The sweep is kept to a short slice at the end of the timeline so the glint
   itself stays quick (~0.9s) while the idle gap between shines runs the full
   cycle duration (see the ~15s animation durations below). */
@keyframes gold-shimmer {
  0%, 93% { transform: translateX(-150%); opacity: 0; }
  94% { opacity: 1; }
  98% { opacity: 1; }
  99%, 100% { transform: translateX(160%); opacity: 0; }
}

@keyframes sage-shimmer {
  0%, 93% { transform: translateX(-150%); opacity: 0; }
  94% { opacity: 1; }
  98% { opacity: 1; }
  99%, 100% { transform: translateX(160%); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   NOIR  ·  Obsidian & 24-Karat Metallic Gold
   ═══════════════════════════════════════════════════════════════════ */

/* Body: true obsidian with warm chromatic glow */
html[data-theme="noir"] body {
  background:
    radial-gradient(ellipse 115% 52% at 6% -6%, rgba(245, 208, 122, 0.12) 0%, transparent 46%),
    radial-gradient(ellipse 72% 42% at 96% 2%, rgba(180, 143, 52, 0.07) 0%, transparent 38%),
    radial-gradient(ellipse 55% 36% at 50% 108%, rgba(36, 60, 89, 0.1) 0%, transparent 34%),
    linear-gradient(168deg, #0e0c09 0%, #07060504 48%, #050403 100%);
}

/* Nav bar: deep obsidian glass with gold micro-border */
html[data-theme="noir"] .top-menu-bar {
  border-color: rgba(245, 208, 122, 0.22);
  background:
    radial-gradient(ellipse 80% 140% at 50% -30%, rgba(245, 208, 122, 0.07) 0%, transparent 55%),
    linear-gradient(180deg, rgba(30, 24, 13, 0.97) 0%, rgba(10, 8, 5, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(245, 208, 122, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 24px 58px rgba(0, 0, 0, 0.52),
    0 6px 18px rgba(0, 0, 0, 0.28);
}

/* CTA / primary button: genuine metallic gold with shimmer */
html[data-theme="noir"] .button.primary,
html[data-theme="noir"] .nav-cta {
  position: relative;
  overflow: hidden;
  color: #120a00;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: linear-gradient(128deg,
    #6b4416 0%,
    #b07a22 20%,
    #e8c24a 42%,
    #f6d97a 54%,
    #d4a030 70%,
    #7a5018 100%
  );
  border-color: rgba(224, 172, 58, 0.62);
  box-shadow:
    inset 0 2px 0 rgba(255, 247, 200, 0.36),
    inset 0 -1px 0 rgba(60, 36, 8, 0.38),
    0 14px 36px rgba(197, 148, 50, 0.38),
    0 4px 12px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 0 rgba(255, 248, 190, 0.28);
  animation: none;
}

html[data-theme="noir"] .button.primary::before,
html[data-theme="noir"] .nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 36%,
    rgba(255, 252, 228, 0.38) 50%,
    transparent 64%
  );
  transform: translateX(-150%);
  animation: gold-shimmer 15s linear infinite;
  pointer-events: none;
}

html[data-theme="noir"] .button.primary:hover,
html[data-theme="noir"] .nav-cta:hover {
  color: #0e0700;
  background: linear-gradient(128deg,
    #7a5218 0%,
    #c49030 20%,
    #f2d05e 42%,
    #fae492 54%,
    #d8a838 70%,
    #8a5c1c 100%
  );
  box-shadow:
    inset 0 2px 0 rgba(255, 247, 210, 0.44),
    inset 0 -1px 0 rgba(60, 36, 8, 0.42),
    0 18px 48px rgba(220, 168, 58, 0.46),
    0 6px 16px rgba(0, 0, 0, 0.32);
  transform: translateY(-4px);
}

/* Secondary button */
html[data-theme="noir"] .button.secondary {
  color: #d8c080;
  background: rgba(245, 208, 122, 0.07);
  border-color: rgba(245, 208, 122, 0.22);
  box-shadow: inset 0 1px 0 rgba(245, 208, 122, 0.09);
}

html[data-theme="noir"] .button.secondary:hover {
  color: #f0d870;
  background: rgba(245, 208, 122, 0.13);
  border-color: rgba(245, 208, 122, 0.36);
  box-shadow: inset 0 1px 0 rgba(245, 208, 122, 0.16), 0 12px 28px rgba(0, 0, 0, 0.26);
}

/* Cards & panels: warm obsidian glass with gold inner highlight */
html[data-theme="noir"] .section-grid article,
html[data-theme="noir"] .panel,
html[data-theme="noir"] .price-card,
html[data-theme="noir"] .table-panel,
html[data-theme="noir"] .filter-bar,
html[data-theme="noir"] .result-card,
html[data-theme="noir"] .metric-grid article,
html[data-theme="noir"] .timeline-grid article {
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(245, 208, 122, 0.07) 0%, transparent 52%),
    linear-gradient(158deg, rgba(32, 26, 14, 0.9) 0%, rgba(14, 11, 6, 0.96) 100%);
  border-color: rgba(245, 208, 122, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(245, 208, 122, 0.11),
    0 22px 54px rgba(0, 0, 0, 0.38),
    0 4px 12px rgba(0, 0, 0, 0.22);
}

html[data-theme="noir"] .section-grid article:hover,
html[data-theme="noir"] .panel:hover,
html[data-theme="noir"] .price-card:hover,
html[data-theme="noir"] .metric-grid article:hover,
html[data-theme="noir"] .timeline-grid article:hover {
  border-color: rgba(245, 208, 122, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(245, 208, 122, 0.2),
    0 0 0 1px rgba(245, 208, 122, 0.07),
    0 32px 68px rgba(0, 0, 0, 0.46),
    0 8px 18px rgba(0, 0, 0, 0.28),
    0 0 40px rgba(245, 208, 122, 0.04);
}

/* Accent bars on section articles & price cards */
html[data-theme="noir"] .section-grid article::before,
html[data-theme="noir"] .price-card::before {
  background: linear-gradient(90deg, #5a3510, #c9972a, #f5d07a, #e0b040, #7a5018);
}

/* Hero & page surfaces */
html[data-theme="noir"] .hero,
html[data-theme="noir"] .band,
html[data-theme="noir"] .workflow,
html[data-theme="noir"] .page-hero,
html[data-theme="noir"] .dashboard-head {
  background:
    radial-gradient(ellipse 65% 48% at 84% 0%, rgba(245, 208, 122, 0.11) 0%, transparent 48%),
    radial-gradient(ellipse 48% 40% at 8% 104%, rgba(36, 60, 89, 0.12) 0%, transparent 38%),
    linear-gradient(152deg, rgba(30, 24, 13, 0.93) 0%, rgba(13, 10, 6, 0.97) 100%);
  border-color: rgba(245, 208, 122, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(245, 208, 122, 0.12),
    0 28px 68px rgba(0, 0, 0, 0.38);
}

/* Typography: warm cream-gold tones */
html[data-theme="noir"] body {
  color: #e0d4a8;
}

html[data-theme="noir"] h1,
html[data-theme="noir"] h2,
html[data-theme="noir"] h3,
html[data-theme="noir"] .hero-copy h1,
html[data-theme="noir"] .page-hero h1,
html[data-theme="noir"] .dashboard-head h1,
html[data-theme="noir"] strong {
  color: #f0e4c0;
}

html[data-theme="noir"] p,
html[data-theme="noir"] .metric-grid p,
html[data-theme="noir"] small,
html[data-theme="noir"] .helptext,
html[data-theme="noir"] .list-row span,
html[data-theme="noir"] .guest-summary span {
  color: #8c7c58;
}

html[data-theme="noir"] label,
html[data-theme="noir"] td {
  color: #cabb8c;
}

/* Metric numbers: warm amber gold */
html[data-theme="noir"] .metric-grid span,
html[data-theme="noir"] .price {
  color: #e8c24a;
  font-variant-numeric: tabular-nums;
}

html[data-theme="noir"] .limit-card strong {
  color: #d4a030;
}

/* Eyebrow labels use an editorial text treatment without badges or markers. */
html[data-theme="noir"] .eyebrow {
  display: inline-block;
  padding: 0;
  margin-bottom: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c49030;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.88;
}

html[data-theme="noir"] .small-label {
  color: #c49030;
}

/* Dark-section overrides */
html[data-theme="noir"] .home-summary .eyebrow {
  background: transparent;
  color: rgba(245, 208, 122, 0.76);
}

html[data-theme="noir"] .video-hero .eyebrow {
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
}

/* Accent bars on section-grid cards & price-cards */
html[data-theme="noir"] .section-grid article::before,
html[data-theme="noir"] .price-card::before {
  background: linear-gradient(90deg, #5a3510, #c9972a, #f5d07a, #d4a030);
}

/* Input fields: near-black with gold focus glow */
html[data-theme="noir"] input,
html[data-theme="noir"] select,
html[data-theme="noir"] textarea {
  color: #f0e8c8;
  border-color: rgba(245, 208, 122, 0.2);
  background: rgba(16, 12, 7, 0.9);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.28);
}

html[data-theme="noir"] input::placeholder,
html[data-theme="noir"] textarea::placeholder {
  color: rgba(160, 140, 96, 0.7);
}

html[data-theme="noir"] input:hover,
html[data-theme="noir"] select:hover,
html[data-theme="noir"] textarea:hover {
  border-color: rgba(245, 208, 122, 0.35);
}

html[data-theme="noir"] input:focus-visible,
html[data-theme="noir"] select:focus-visible,
html[data-theme="noir"] textarea:focus-visible {
  border-color: rgba(245, 208, 122, 0.52);
  box-shadow: 0 0 0 5px rgba(245, 208, 122, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.2);
  outline-color: rgba(245, 208, 122, 0.3);
}

/* Payment reference form inputs */
html[data-theme="noir"] .payment-reference-form input {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.3);
  background: rgba(11, 10, 8, 0.92);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

html[data-theme="noir"] .payment-reference-form input::placeholder {
  color: rgba(201, 185, 143, 0.6);
}

html[data-theme="noir"] .payment-reference-form input:hover {
  border-color: rgba(245, 208, 122, 0.45);
}

html[data-theme="noir"] .payment-reference-form input:focus-visible {
  border-color: rgba(245, 208, 122, 0.62);
  box-shadow: 0 0 0 5px rgba(245, 208, 122, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.25);
  outline-color: rgba(245, 208, 122, 0.3);
}

html[data-theme="noir"] .payment-method-card {
  border-color: rgba(245, 208, 122, 0.28);
  background: rgba(14, 11, 5, 0.7);
}

/* Table headers */
html[data-theme="noir"] th {
  color: #8b7a52;
  background: linear-gradient(90deg, rgba(245, 208, 122, 0.1), rgba(245, 208, 122, 0.04));
}

html[data-theme="noir"] td,
html[data-theme="noir"] th {
  border-bottom-color: rgba(245, 208, 122, 0.1);
}

html[data-theme="noir"] tbody tr:hover td {
  background: rgba(245, 208, 122, 0.04);
}

/* Tab nav */
html[data-theme="noir"] .tab-nav a {
  color: #9a8a60;
  border-color: rgba(245, 208, 122, 0.14);
  background: rgba(245, 208, 122, 0.05);
}

html[data-theme="noir"] .tab-nav a:hover {
  color: #e8c84a;
  border-color: rgba(245, 208, 122, 0.28);
  background: rgba(245, 208, 122, 0.1);
}

/* List rows */
html[data-theme="noir"] .list-row {
  border-color: rgba(245, 208, 122, 0.12);
  background: rgba(22, 17, 9, 0.8);
}

html[data-theme="noir"] .list-row:hover {
  border-color: rgba(245, 208, 122, 0.26);
  background: rgba(30, 23, 12, 0.88);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(245, 208, 122, 0.07);
}

/* Badges & chips */
html[data-theme="noir"] .badge,
html[data-theme="noir"] .price-badge {
  color: #0e0800;
  background: linear-gradient(128deg, rgba(245, 208, 122, 0.92), rgba(212, 165, 55, 0.96));
  border-color: rgba(212, 165, 55, 0.5);
}

html[data-theme="noir"] .feature-icon,
html[data-theme="noir"] .timeline-grid span {
  background: linear-gradient(135deg, #6b4416, #c9972a, #e8c24a);
  box-shadow: 0 8px 24px rgba(197, 148, 50, 0.32);
}

/* Feature banner */
html[data-theme="noir"] .feature-banner {
  border-color: rgba(245, 208, 122, 0.14);
  background: linear-gradient(135deg, rgba(245, 208, 122, 0.06), rgba(36, 60, 89, 0.08));
}

html[data-theme="noir"] .feature-banner h2,
html[data-theme="noir"] .panel h2,
html[data-theme="noir"] .price-card h2,
html[data-theme="noir"] .section-grid h3,
html[data-theme="noir"] .timeline-grid h3 {
  color: #e8c24a;
}

/* Auth story panel */
html[data-theme="noir"] .auth-story {
  background:
    radial-gradient(ellipse 58% 48% at 90% 0%, rgba(245, 208, 122, 0.13) 0%, transparent 44%),
    linear-gradient(148deg, rgba(30, 24, 13, 0.93) 0%, rgba(12, 10, 6, 0.97) 100%);
  border-color: rgba(245, 208, 122, 0.16);
}

html[data-theme="noir"] .auth-points span,
html[data-theme="noir"] .hero-points span {
  color: #e0d4a8;
  border-color: rgba(245, 208, 122, 0.2);
  background: rgba(245, 208, 122, 0.07);
}

/* Settings cards */
html[data-theme="noir"] .settings-menu-button,
html[data-theme="noir"] .settings-section-card,
html[data-theme="noir"] .settings-password-row,
html[data-theme="noir"] .settings-toggle-row,
html[data-theme="noir"] .device-card {
  color: #e0d4a8;
  border-color: rgba(245, 208, 122, 0.14);
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(245, 208, 122, 0.07) 0%, transparent 42%),
    linear-gradient(158deg, rgba(30, 24, 13, 0.9) 0%, rgba(12, 10, 6, 0.95) 100%);
  box-shadow: inset 0 1px 0 rgba(245, 208, 122, 0.09);
}

html[data-theme="noir"] .settings-menu-button:hover {
  border-color: rgba(245, 208, 122, 0.3);
  background:
    radial-gradient(ellipse 70% 58% at 100% 0%, rgba(245, 208, 122, 0.13) 0%, transparent 46%),
    linear-gradient(158deg, rgba(36, 28, 15, 0.95) 0%, rgba(14, 12, 7, 0.98) 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(245, 208, 122, 0.09);
}

html[data-theme="noir"] .settings-avatar,
html[data-theme="noir"] .settings-section-icon,
html[data-theme="noir"] .status-pill {
  color: #0e0800;
  border-color: rgba(212, 165, 55, 0.44);
  background: linear-gradient(135deg, #8d6425, #e8c24a, #f5d87a);
}

/* Site footer */
html[data-theme="noir"] .site-footer {
  background:
    linear-gradient(180deg, rgba(22, 17, 9, 0.96) 0%, rgba(8, 7, 5, 0.98) 100%);
  border-color: rgba(245, 208, 122, 0.17);
  box-shadow: inset 0 1px 0 rgba(245, 208, 122, 0.1), 0 20px 48px rgba(0, 0, 0, 0.3);
}

/* Focus rings */
html[data-theme="noir"] .button:focus-visible,
html[data-theme="noir"] .nav-cta:focus-visible,
html[data-theme="noir"] a:focus-visible,
html[data-theme="noir"] button:focus-visible {
  outline-color: rgba(245, 208, 122, 0.52);
}

/* Required marker */
html[data-theme="noir"] .required-marker {
  color: #e8c24a;
  background: rgba(245, 208, 122, 0.1);
  border-color: rgba(245, 208, 122, 0.22);
}

/* Home summary section */
html[data-theme="noir"] .home-summary {
  background:
    radial-gradient(ellipse 60% 55% at 8% 0%, rgba(245, 208, 122, 0.12) 0%, transparent 46%),
    linear-gradient(178deg, #100d06 0%, #0a0804 100%);
}

/* Scanner camera */
html[data-theme="noir"] .scanner-camera {
  background:
    radial-gradient(circle at 50% 42%, rgba(245, 208, 122, 0.14) 0%, transparent 32%),
    linear-gradient(145deg, #0e0c09, #2a1e0a);
}

/* Mobile solid bg fallback */
@media (max-width: 540px) {

  html[data-theme="noir"],
  html[data-theme="noir"] body,
  html[data-theme="noir"] main:not(.top-menu-bar),
  html[data-theme="noir"] .page-main {
    background: #050403;
  }
}

/* ── details/summary panel collapsibles ── */
details.panel > summary,
details.panel > summary::-webkit-details-marker {
  list-style: none;
}

details.panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

details.panel > summary h2 {
  margin: 0;
  flex: 1;
}

details.panel > summary::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  opacity: 0.6;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform 220ms ease, opacity 180ms ease;
}

details[open].panel > summary::after {
  transform: rotate(180deg);
  opacity: 0.85;
}

details.panel > summary:hover::after {
  opacity: 0.9;
}

details.panel > summary + *,
details.panel[open] > *:not(summary) {
  margin-top: 18px;
}

details.panel.refund-policy-card > summary {
  font-weight: 700;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════
   DESIGN SYSTEM V2 — Premium surfaces, curved frames,
   mosaic section, contact, form inputs, token fixes
   ═══════════════════════════════════════════════════════ */

/* ─── Global panel curves ───────────────────────────── */
.panel,
.price-card,
.table-panel,
.result-card,
.section-grid article {
  border-radius: 28px;
}

.page-hero {
  border-radius: 36px;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 68px);
}

/* ─── Premium form inputs ────────────────────────────── */
.form-shell p input:not([type="radio"]):not([type="checkbox"]),
.form-shell p select,
.form-shell p textarea,
.form-field input:not([type="radio"]):not([type="checkbox"]),
.form-field select,
.form-field textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
select,
textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.5;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 16%, transparent), 0 2px 8px rgba(0, 0, 0, 0.06);
}

textarea {
  min-height: 100px;
  resize: vertical;
}

html[data-theme="noir"] body:not(.login-page) .event-form input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="noir"] body:not(.login-page) .event-form select,
html[data-theme="noir"] body:not(.login-page) .event-form textarea {
  color: #fff8e8;
  border-color: rgba(245, 208, 122, 0.3);
  background: rgba(7, 6, 4, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, 0.08);
  color-scheme: dark;
}

html[data-theme="noir"] body:not(.login-page) .event-form input:not([type="radio"]):not([type="checkbox"]):hover,
html[data-theme="noir"] body:not(.login-page) .event-form select:hover,
html[data-theme="noir"] body:not(.login-page) .event-form textarea:hover,
html[data-theme="noir"] body:not(.login-page) .event-form input:not([type="radio"]):not([type="checkbox"]):focus-visible,
html[data-theme="noir"] body:not(.login-page) .event-form select:focus-visible,
html[data-theme="noir"] body:not(.login-page) .event-form textarea:focus-visible {
  border-color: rgba(245, 208, 122, 0.62);
  box-shadow: 0 0 0 5px rgba(245, 208, 122, 0.1), inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

html[data-theme="noir"] body:not(.login-page) .event-form input::placeholder,
html[data-theme="noir"] body:not(.login-page) .event-form textarea::placeholder {
  color: rgba(201, 185, 143, 0.7);
}

html[data-theme="noir"] body:not(.login-page) .event-form select option {
  color: #fff8e8;
  background: #0b0a08;
}

html[data-theme="noir"] body:not(.login-page) .event-form input:-webkit-autofill,
html[data-theme="noir"] body:not(.login-page) .event-form textarea:-webkit-autofill,
html[data-theme="noir"] body:not(.login-page) .event-form select:-webkit-autofill {
  -webkit-text-fill-color: #fff8e8;
  box-shadow: 0 0 0 1000px #0b0a08 inset;
}

.event-form .form-field input[type="checkbox"] {
  display: inline-grid;
  place-content: center;
  width: 16px;
  min-width: 16px;
  min-height: 16px;
  inline-size: 16px;
  block-size: 16px;
  padding: 0;
  margin: 2px 0 0;
  border: 1.5px solid var(--line);
  border-radius: 3px;
  background: var(--surface-strong);
  color: var(--primary);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  cursor: pointer;
}

.event-form .form-field input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: transform 120ms ease;
  background: currentColor;
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 20%, 84% 8%, 35% 68%);
}

.event-form .form-field input[type="checkbox"]:checked {
  border-color: var(--primary);
}

.event-form .form-field input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.event-form .form-field input[type="checkbox"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ring) 32%, transparent);
  outline-offset: 2px;
}

html[data-theme="noir"] body:not(.login-page) .event-form .form-field input[type="checkbox"] {
  color: #f5d07a;
  border-color: rgba(245, 208, 122, 0.48);
  background: rgba(7, 6, 4, 0.86);
}

.form-shell p label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}

/* ─── About page token fixes ─────────────────────────── */
.about-mission-grid article::before,
.about-columns article::before {
  background: var(--accent);
}

.about-columns li::marker {
  color: var(--accent);
}

.about-workflow-note span {
  color: var(--accent);
}

.about-columns {
  border-top-color: var(--line);
}

.about-workflow-note {
  border-top-color: var(--line);
}

.about-founder-note {
  border-top-color: var(--line);
}

.required-marker {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

[data-theme="noir"] .auth-story {
  border-color: var(--line);
  background:
    radial-gradient(circle at top right, rgba(201, 162, 75, 0.08), transparent 35%),
    linear-gradient(145deg, rgba(26, 20, 12, 0.96), rgba(20, 17, 10, 0.98));
}

/* ─── Home photo mosaic ──────────────────────────────── */
.home-mosaic {
  width: 100%;
  padding: clamp(40px, 6vw, 72px) clamp(18px, 5vw, 56px);
  display: grid;
  gap: 32px;
  align-items: center;
  background: var(--bg);
}

.home-mosaic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr 1.3fr;
  grid-template-rows: 280px 200px;
  gap: 14px;
  width: min(1240px, 100%);
  margin: 0 auto;
}

.home-mosaic-panel {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background-size: cover;
  background-position: center;
}

.home-mosaic-panel:nth-child(1) { grid-row: 1 / 3; border-radius: 32px 24px 24px 32px; }
.home-mosaic-panel:nth-child(2) { grid-column: 2; grid-row: 1; border-radius: 24px 24px 16px 16px; }
.home-mosaic-panel:nth-child(3) { grid-column: 3 / 5; grid-row: 1; border-radius: 24px 32px 24px 16px; }
.home-mosaic-panel:nth-child(4) { grid-column: 2 / 4; grid-row: 2; border-radius: 16px 16px 24px 24px; }

/* Rich CSS art fallbacks (replace with real event photos) */
.home-mosaic-wedding {
  background:
    radial-gradient(ellipse at 30% 60%, rgba(201, 162, 75, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(232, 196, 106, 0.35) 0%, transparent 45%),
    linear-gradient(160deg, #2a1a08 0%, #4a2d10 40%, #1a0e05 100%);
}

.home-mosaic-graduation {
  background:
    radial-gradient(ellipse at 20% 40%, rgba(53, 90, 140, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(201, 162, 75, 0.3) 0%, transparent 45%),
    linear-gradient(135deg, #0a1628 0%, #1a2d4a 50%, #0d1e36 100%);
}

.home-mosaic-corporate {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(111, 143, 115, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(60, 80, 62, 0.4) 0%, transparent 45%),
    linear-gradient(160deg, #0e1a10 0%, #1a2e1c 50%, #0c1710 100%);
}

.home-mosaic-cultural {
  background:
    radial-gradient(ellipse at 40% 50%, rgba(180, 70, 30, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(201, 162, 75, 0.35) 0%, transparent 40%),
    linear-gradient(145deg, #1e0c05 0%, #3a1408 45%, #180a04 100%);
}

.home-mosaic-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.62) 100%);
}

.home-mosaic-label {
  position: absolute;
  bottom: 18px;
  left: 20px;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.home-mosaic-caption {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.home-mosaic-caption p {
  max-width: 52ch;
  color: var(--muted);
  font-size: 1.02rem;
  margin: 0;
}

@media (max-width: 900px) {
  .home-mosaic-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 180px 200px;
  }

  .home-mosaic-panel:nth-child(1) { grid-row: 1 / 3; border-radius: 28px; }
  .home-mosaic-panel:nth-child(2) { grid-column: 2; grid-row: 1; border-radius: 24px; }
  .home-mosaic-panel:nth-child(3) { grid-column: 1 / 3; grid-row: 3; border-radius: 24px; }
  .home-mosaic-panel:nth-child(4) { grid-column: 2; grid-row: 2; border-radius: 24px; }
}

@media (max-width: 560px) {
  .home-mosaic-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 160px 180px;
  }

  .home-mosaic-caption {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ─── Contact page premium ───────────────────────────── */
.contact-hero {
  width: min(1240px, calc(100% - 24px));
  margin: 40px auto 0;
  padding: clamp(52px, 8vw, 100px) clamp(28px, 6vw, 80px);
  border-radius: 40px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  box-shadow: var(--shadow);
}

[data-theme="noir"] .contact-hero {
  background:
    radial-gradient(ellipse at 90% 10%, rgba(201, 162, 75, 0.08), transparent 40%),
    linear-gradient(180deg, rgba(26, 20, 12, 0.96), rgba(14, 11, 7, 0.98));
}

.contact-hero-inner {
  max-width: 680px;
}

.contact-hero h1 {
  margin: 12px 0 18px;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  line-height: 0.96;
}

.contact-hero-accent {
  color: var(--accent);
  display: block;
}

.contact-hero-body {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 52ch;
  margin: 0;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.contact-card {
  display: grid;
  gap: 8px;
  padding: 28px 24px;
  border-radius: 24px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  box-shadow: var(--shadow-soft);
  list-style: none;
}

.contact-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.contact-card-primary {
  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.contact-card-details > summary {
  list-style: none;
  display: grid;
  gap: 8px;
  cursor: pointer;
}

.contact-card-details > summary::-webkit-details-marker { display: none; }

.contact-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  margin-bottom: 6px;
}

.contact-card-label {
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--ink);
}

.contact-card-sub {
  font-size: 0.84rem;
  color: var(--muted);
}

.contact-choice-panel {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.contact-choice-panel a {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.88rem;
  transition: background 160ms ease, color 160ms ease;
}

.contact-choice-panel a:hover {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

@media (max-width: 720px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }

  .contact-hero {
    border-radius: 28px;
  }
}

/* ─── Footer copy line (handled above) ──────────────── */

/* ─── Organic dividers on public panels ──────────────── */
.page-hero.about-unified-frame {
  border-radius: 36px;
  overflow: hidden;
}

.about-columns {
  border-top-color: var(--line);
}

/* ═══════════════════════════════════════════════════════════════════
   APP PAGES  ·  Layout & Roundness Refresh
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Rounder surfaces ───────────────────────────────── */
.panel,
.price-card,
.table-panel,
.result-card,
.section-grid article,
.filter-bar,
.metric-grid article {
  border-radius: 28px;
}

.list-row {
  border-radius: 16px;
  padding: 14px 18px;
}

.feature-status {
  border-radius: 18px;
  padding: 16px;
}

.feature-status-grid {
  gap: 12px;
}

/* ─── Calmer hover for data panels ──────────────────── */
.section-grid article:hover,
.price-card:hover,
.panel:hover {
  transform: translateY(-4px) scale(1.001);
  box-shadow: var(--shadow);
}

.metric-grid article:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.table-panel:hover {
  transform: none;
  box-shadow: var(--shadow);
}

/* ─── Dashboard header: top-aligned ─────────────────── */
.dashboard-head {
  align-items: flex-start;
}

/* ─── Tab navigation: unified pill bar ──────────────── */
.tab-nav {
  gap: 5px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.tab-nav a {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 18px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted);
}

.tab-nav a:hover {
  background: var(--surface-strong);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  color: var(--ink);
  transform: none;
}

/* ─── Operation grid: fluid auto-fill columns ────────── */
.operation-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ─── Event cards grid on main dashboard: fluid ─────── */
.content-grid.operations-list {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

/* ─── Metric grid inside a panel: adaptive wrap ─────── */
.panel .metric-grid {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  padding: 0;
  margin: 12px 0 0;
}

/* ─── Filter bar: rounder, better padding ────────────── */
.filter-bar {
  border-radius: 28px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

/* ─── Form inputs in filter bars ────────────────────── */
.filter-bar input,
.filter-bar select,
input[type="search"] {
  border-radius: 16px;
}

.dashboard-head + .filter-bar--inline {
  margin-top: 34px;
}

.filter-bar.filter-bar--inline {
  width: min(700px, calc(100% - 24px));
  margin-right: auto;
  margin-left: auto;
  grid-template-columns: minmax(220px, 1fr) auto auto;
}

.filter-bar--inline input[type="search"] {
  min-width: 0;
}

.message-channel-grid {
  width: min(1240px, calc(100% - 24px));
  margin: 26px auto 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.message-channel-card {
  display: grid;
  gap: 6px;
  min-height: 118px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
}

.message-channel-card span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.message-channel-card strong {
  font-size: 1.08rem;
}

.message-channel-card small {
  color: var(--muted);
}

.message-channel-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

@media (max-width: 720px) {
  .filter-bar.filter-bar--inline {
    width: min(100%, calc(100% - 18px));
    grid-template-columns: 1fr;
  }

  .message-channel-grid {
    width: min(100%, calc(100% - 18px));
    grid-template-columns: 1fr;
  }
}

.code-block {
  max-width: 100%;
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
  background: rgba(0, 0, 0, 0.22);
  font: 600 0.88rem/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}

/* ─── Feedback: severity / risk badges — Noir (default) ─── */
body:not(.login-page) .badge.badge--high,
body:not(.login-page) .badge.badge--critical {
  color: #ffb3ad;
  background: rgba(180, 35, 24, 0.30);
  border-color: rgba(255, 100, 90, 0.28);
}

body:not(.login-page) .badge.badge--medium {
  color: #fcd34d;
  background: rgba(146, 64, 14, 0.28);
  border-color: rgba(217, 155, 38, 0.28);
}

body:not(.login-page) .badge.badge--low {
  color: #9ee6b4;
  background: rgba(6, 118, 71, 0.25);
  border-color: rgba(30, 160, 90, 0.28);
}

/* ─── Feedback: workflow notice — Noir (default) ─── */
.workflow-notice {
  margin: 0 clamp(18px, 5vw, 28px) 24px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(245, 208, 122, 0.28);
  background: rgba(245, 208, 122, 0.08);
  font-size: 0.88rem;
  line-height: 1.5;
}

.workflow-notice strong {
  display: block;
  margin-bottom: 4px;
  color: #f4d17b;
}

.workflow-notice p {
  margin: 0;
  color: #c9b98f;
}

/* ─── Feedback: summary body prose — Noir (default) ─── */
body:not(.login-page) .summary-body,
body:not(.login-page) .summary-body p {
  color: #fff8e8;
  font-size: 0.94rem;
  line-height: 1.7;
}

body:not(.login-page) .summary-body p {
  margin: 0 0 12px;
}

/* ─── Scroll-safe mobile small screens ──────────────── */
@media (max-width: 540px) {
  .home-mosaic {
    padding: 24px 14px 32px;
  }

  .home-mosaic-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 180px);
  }

  .home-mosaic-panel:nth-child(1),
  .home-mosaic-panel:nth-child(2),
  .home-mosaic-panel:nth-child(3),
  .home-mosaic-panel:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
    border-radius: 22px;
  }
}

/* ════════════════════════════════════════════════════════════
   SITE-WIDE SUBTLE POLISH
   Theme-neutral refinements driven by existing tokens so every
   theme adapts automatically. No layout,
   DOM, or backend impact; no new continuous animations.
   ════════════════════════════════════════════════════════════ */

/* ── Branded text selection ── */
::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
::-moz-selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── Themed slim scrollbars ── */
html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 48%, transparent) transparent;
}
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 3px solid transparent;
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 66%, transparent);
  background-clip: padding-box;
}

/* ── Consistent, modern keyboard focus ring on interactive elements
   (sets only width/style/offset; theme rules keep supplying the
   accent outline-color, so both themes stay correct) ── */
body:not(.login-page) .button:focus-visible,
body:not(.login-page) .nav-cta:focus-visible,
body:not(.login-page) .account-trigger:focus-visible,
body:not(.login-page) .mobile-menu-trigger:focus-visible,
body:not(.login-page) .tab-nav a:focus-visible,
body:not(.login-page) .dropdown-link:focus-visible,
body.login-page .button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 62%, transparent);
  outline-offset: 3px;
}

/* ── Refined card hover: add a faint accent edge on top of the
   existing shadow lift, for a premium "glow" without motion cost.
   Two scopes so each theme's base border-color is overridden on
   hover at matching-or-higher specificity. ── */
body:not(.login-page) .panel:hover,
body:not(.login-page) .section-grid article:hover,
body:not(.login-page) .price-card:hover,
body:not(.login-page) .result-card:hover,
body:not(.login-page) .metric-grid article:hover,
body:not(.login-page) .timeline-grid article:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}

/* ── List rows: gentle accent edge on hover to match cards ── */
body:not(.login-page) .list-row:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

/* ── Disabled controls: clearer, consistent affordance ── */
.button:disabled,
.button[disabled],
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Respect reduced-motion: neutralize hover transforms ── */
@media (prefers-reduced-motion: reduce) {
  .button:hover,
  .nav-cta:hover,
  .panel:hover,
  .section-grid article:hover,
  .price-card:hover,
  .result-card:hover,
  .metric-grid article:hover,
  .timeline-grid article:hover,
  .table-panel:hover,
  .list-row:hover {
    transform: none;
  }
}

/* ── Brand-tinted native controls (checkboxes, radios, range, progress) ── */
body {
  accent-color: var(--accent);
}

input[type="radio"] {
  display: inline-block;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  inline-size: 16px;
  block-size: 16px;
  flex: 0 0 16px;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--accent);
  transform: none;
}

input[type="radio"]:hover,
input[type="radio"]:focus-visible {
  transform: none;
}

/* ── Branded text caret in fields ── */
input,
textarea {
  caret-color: var(--accent);
}

/* ── Tabular figures so numeric data aligns cleanly in dashboards ── */
table,
td,
th,
.metric-grid,
.metric-grid span,
.limit-card strong,
.price,
.list-row span,
.badge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Gentle table zebra striping (kept below hover specificity so row
   hover still reads on every row) ── */
tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* ── Tame browser autofill so saved logins/details keep the themed
   field look instead of the default yellow box ── */
body:not(.login-page) input:-webkit-autofill,
body:not(.login-page) input:-webkit-autofill:hover,
body:not(.login-page) input:-webkit-autofill:focus,
body:not(.login-page) textarea:-webkit-autofill,
body:not(.login-page) select:-webkit-autofill,
body.login-page input:-webkit-autofill,
body.login-page input:-webkit-autofill:hover,
body.login-page input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff8e8;
  -webkit-box-shadow: 0 0 0 1000px rgba(7, 6, 4, 0.92) inset;
  caret-color: #fff8e8;
  transition: background-color 9999s ease-in-out 0s;
}

/* Final noir form-control guardrail. Several page-specific form blocks
   sit late in this stylesheet, so keep this near the end to prevent white
   native fields with unreadable light text across guest/admin panels. */
html[data-theme="noir"] input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"]),
html[data-theme="noir"] select,
html[data-theme="noir"] textarea {
  color: #fff8e8;
  -webkit-text-fill-color: #fff8e8;
  caret-color: #f5d07a;
  border-color: rgba(245, 208, 122, 0.32);
  background: rgba(7, 6, 4, 0.92);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.38);
  color-scheme: dark;
}

html[data-theme="noir"] input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"])::placeholder,
html[data-theme="noir"] textarea::placeholder {
  color: rgba(201, 185, 143, 0.72);
  -webkit-text-fill-color: rgba(201, 185, 143, 0.72);
}

html[data-theme="noir"] input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"]):hover,
html[data-theme="noir"] select:hover,
html[data-theme="noir"] textarea:hover {
  border-color: rgba(245, 208, 122, 0.48);
}

html[data-theme="noir"] input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"]):focus-visible,
html[data-theme="noir"] select:focus-visible,
html[data-theme="noir"] textarea:focus-visible {
  border-color: rgba(245, 208, 122, 0.64);
  box-shadow: 0 0 0 5px rgba(245, 208, 122, 0.12), inset 0 1px 4px rgba(0, 0, 0, 0.38);
}

html[data-theme="noir"] select option {
  color: #fff8e8;
  background: #090806;
}

html[data-theme="noir"] input:-webkit-autofill,
html[data-theme="noir"] input:-webkit-autofill:hover,
html[data-theme="noir"] input:-webkit-autofill:focus,
html[data-theme="noir"] textarea:-webkit-autofill,
html[data-theme="noir"] textarea:-webkit-autofill:hover,
html[data-theme="noir"] textarea:-webkit-autofill:focus,
html[data-theme="noir"] select:-webkit-autofill,
html[data-theme="noir"] select:-webkit-autofill:hover,
html[data-theme="noir"] select:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff8e8;
  -webkit-box-shadow: 0 0 0 1000px rgba(7, 6, 4, 0.94) inset;
  caret-color: #f5d07a;
}

/* ═══════════════════════════════════════════════════════════════════
   Systematic event UI: shared subnav, lifecycle stepper, nav-card stats
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Event subnav: single navigation system per event ── */
.event-subnav {
  margin-top: 18px;
  margin-bottom: 22px;
  align-items: center;
}

.tab-nav a.is-active {
  color: var(--accent-contrast);
  background: var(--accent);
  box-shadow: var(--shadow-soft);
}

.tab-nav a.is-active:hover {
  color: var(--accent-contrast);
  background: var(--accent-hover);
}

.subnav-lock-note {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
}

/* ─── Lifecycle stepper: where you are, what is next ──── */
.lifecycle-panel {
  display: grid;
  gap: 16px;
}

.lifecycle-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lifecycle-step {
  display: grid;
  gap: 6px;
  justify-items: start;
  align-content: start;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.lifecycle-step strong {
  font-size: 0.88rem;
  line-height: 1.2;
}

.lifecycle-step small {
  color: var(--muted);
  line-height: 1.35;
}

.lifecycle-marker {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  background: transparent;
}

.lifecycle-step.is-done {
  opacity: 0.86;
}

.lifecycle-step.is-done .lifecycle-marker {
  color: var(--accent-contrast);
  border-color: transparent;
  background: var(--accent);
}

.lifecycle-step.is-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow-soft);
  background: var(--surface-strong);
}

.lifecycle-step.is-current .lifecycle-marker {
  color: var(--accent);
  border-color: var(--accent);
}

.lifecycle-step.is-upcoming {
  opacity: 0.62;
}

.lifecycle-hint {
  margin: 0;
  color: var(--muted);
}

.lifecycle-hint strong {
  color: var(--ink);
}

/* ─── Nav cards: every card shows the number it names ─── */
.nav-card-stat {
  margin: 0;
  color: var(--muted);
}

.nav-card-stat strong {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--ink);
}

.section-nav-grid .operation-card h2 {
  font-size: 1.2rem;
  margin: 0;
}

/* ─── Collapsed billing details on event overview ─────── */
.billing-details > summary {
  cursor: pointer;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}

.billing-details[open] > summary {
  margin-bottom: 14px;
}

.billing-details h3 {
  margin: 18px 0 6px;
  font-size: 1.02rem;
}

/* ── Event overview: one tidy column, page-width blocks, even rhythm ── */
.event-overview-page .panel {
  width: min(1240px, calc(100% - 24px));
  margin-inline: auto;
}

.event-overview-page .page-main > * + * {
  margin-top: 22px;
}

/* Workspace pages: match the event dashboard rhythm and keep tools compact. */
:is(.event-admin-page, .dashboard-page) .page-main > .dashboard-head,
:is(.event-admin-page, .dashboard-page) .page-main > .event-subnav,
:is(.event-admin-page, .dashboard-page) .page-main > .filter-bar,
:is(.event-admin-page, .dashboard-page) .page-main > .panel,
:is(.event-admin-page, .dashboard-page) .page-main > .table-panel,
:is(.event-admin-page, .dashboard-page) .page-main > .split,
:is(.event-admin-page, .dashboard-page) .page-main > .content-grid,
:is(.event-admin-page, .dashboard-page) .page-main > .metric-grid,
:is(.event-admin-page, .dashboard-page) .page-main > .scanner-layout,
:is(.event-admin-page, .dashboard-page) .page-main > .auth-shell,
:is(.event-admin-page, .dashboard-page) .page-main > .template-editor,
:is(.event-admin-page, .dashboard-page) .page-main > .workflow-notice,
:is(.event-admin-page, .dashboard-page) .page-main > .result-card,
:is(.event-admin-page, .dashboard-page) .page-main > .message-channel-grid {
  width: min(1240px, calc(100% - 24px));
  margin-inline: auto;
}

:is(.event-admin-page, .dashboard-page) .page-main > * + * {
  margin-top: 22px;
}

:is(.event-admin-page, .dashboard-page) .page-main > .table-panel,
:is(.event-admin-page, .dashboard-page) .page-main > .content-grid,
:is(.event-admin-page, .dashboard-page) .page-main > .filter-bar,
:is(.event-admin-page, .dashboard-page) .page-main > .workflow-notice {
  margin-bottom: 0;
}

:is(.event-admin-page, .dashboard-page) .page-main > .auth-shell {
  padding: 0;
}

:is(.event-admin-page, .dashboard-page) .filter-bar {
  width: min(940px, calc(100% - 24px));
  grid-template-columns: minmax(220px, 360px) minmax(150px, 180px) minmax(150px, 180px) auto auto;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

:is(.event-admin-page, .dashboard-page) .filter-bar input[type="search"] {
  min-width: 0;
  width: 100%;
}

:is(.event-admin-page, .dashboard-page) .filter-bar .button {
  min-height: 44px;
  white-space: nowrap;
}

:is(.event-admin-page, .dashboard-page) .filter-bar.filter-bar--inline {
  width: min(700px, calc(100% - 24px));
  grid-template-columns: minmax(220px, 1fr) auto auto;
}

:is(.event-admin-page, .dashboard-page) .dashboard-head + .filter-bar.filter-bar--inline {
  margin-top: 32px;
}

.event-guests-page .filter-bar {
  width: min(960px, calc(100% - 24px));
  grid-template-columns: minmax(220px, 340px) minmax(140px, 170px) minmax(150px, 190px) auto auto;
}

.event-feedback-page .filter-bar {
  width: min(980px, calc(100% - 24px));
}

.ai-work-page .filter-bar,
.suggestions-page .filter-bar {
  width: min(760px, calc(100% - 24px));
  grid-template-columns: minmax(150px, 180px) minmax(150px, 180px) auto auto;
}

.event-reports-page .split {
  align-items: stretch;
}

.event-card-page .page-main > .cardkit-editor {
  width: min(1480px, calc(100% - 24px));
  margin-inline: auto;
}

.event-whatsapp-messages-page .feature-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.event-whatsapp-messages-page .operations-actions {
  gap: 12px;
  margin-top: 16px;
}

.event-whatsapp-messages-page .operations-actions .inline-action-form {
  margin: 0;
}

.event-whatsapp-messages-page .operations-actions .button {
  min-height: 44px;
  white-space: normal;
}

.guest-options-cell {
  min-width: 150px;
}

.guest-channel-form {
  display: grid;
  grid-template-columns: minmax(128px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 220px;
  max-width: 290px;
}

.guest-channel-form select {
  min-height: 38px;
  padding: 8px 34px 8px 10px;
  border-radius: 10px;
  font-size: 0.86rem;
}

.guest-channel-save {
  min-height: 38px;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 0.82rem;
}

.guest-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

.guest-options-panel {
  position: relative;
  width: max-content;
  min-width: 132px;
  max-width: 220px;
}

.guest-options-panel > summary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.guest-options-panel > summary::-webkit-details-marker {
  display: none;
}

.guest-options-panel > summary::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}

.guest-options-panel[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}

.guest-options-menu {
  display: grid;
  gap: 6px;
  min-width: 210px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.guest-options-menu a,
.guest-options-menu .link-button {
  width: 100%;
  min-height: 38px;
  justify-content: flex-start;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ink);
  text-align: left;
  font-size: 0.86rem;
}

.guest-options-menu .inline-action-form {
  width: 100%;
}

.guest-options-menu small {
  display: block;
  padding: 8px 10px;
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width: 760px) {
  .guest-form-grid {
    grid-template-columns: 1fr;
  }

  .guest-channel-form {
    max-width: 100%;
  }
}

body:not(.home-page) .page-main {
  padding-top: clamp(18px, 2.5vw, 34px);
}

.public-invite .invite-rail {
  align-items: center;
}

.public-invite .invite-rail-head,
.public-invite .panel.form-shell {
  width: 100%;
  max-width: 560px;
  text-align: center;
}

.public-invite .invite-rail-head,
.public-invite .panel.form-shell {
  justify-items: center;
}

.public-invite .panel.form-shell {
  display: grid;
  gap: 14px;
}

.public-invite .panel.form-shell h2,
.public-invite .invite-deadline,
.public-invite .warning-text {
  margin-left: auto;
  margin-right: auto;
}

.public-invite .invite-identity {
  width: 100%;
  justify-content: center;
}

/* These sit in a stretch-aligned grid, and a flat 360px width made short
   labels ("Open Map") float in a box several times their size. Size to the
   label instead, centred, with 360px as a ceiling rather than a target. */
.public-invite .panel.form-shell > .button {
  width: auto;
  max-width: min(100%, 360px);
  justify-self: center;
  padding-inline: var(--space-6);
}

.public-invite .public-card-offline-actions {
  width: min(100%, 360px);
}

.public-invite .panel.form-shell .form-field,
.public-invite .rsvp-confirmation-row {
  width: 100%;
}

.public-invite .panel.form-shell > .button {
  justify-content: center;
}

.public-invite .public-card-offline-actions {
  justify-items: center;
  margin-left: auto;
  margin-right: auto;
}

.public-invite .rsvp-inline-status,
.public-invite .rsvp-status-card {
  width: min(100%, 420px);
  text-align: center;
}

/* Keep the package & billing summary compact instead of full-width rows */
.billing-details .list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.billing-details .compact-form {
  max-width: 520px;
}

@media (max-width: 920px) {
  .lifecycle-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .billing-details .list {
    grid-template-columns: 1fr;
  }

  .subnav-lock-note {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  :is(.event-admin-page, .dashboard-page) .page-main > .dashboard-head,
  :is(.event-admin-page, .dashboard-page) .page-main > .event-subnav,
  :is(.event-admin-page, .dashboard-page) .page-main > .filter-bar,
  :is(.event-admin-page, .dashboard-page) .page-main > .panel,
  :is(.event-admin-page, .dashboard-page) .page-main > .table-panel,
  :is(.event-admin-page, .dashboard-page) .page-main > .split,
  :is(.event-admin-page, .dashboard-page) .page-main > .content-grid,
  :is(.event-admin-page, .dashboard-page) .page-main > .metric-grid,
  :is(.event-admin-page, .dashboard-page) .page-main > .scanner-layout,
  :is(.event-admin-page, .dashboard-page) .page-main > .auth-shell,
  :is(.event-admin-page, .dashboard-page) .page-main > .template-editor,
  :is(.event-admin-page, .dashboard-page) .page-main > .workflow-notice,
  :is(.event-admin-page, .dashboard-page) .page-main > .result-card,
  :is(.event-admin-page, .dashboard-page) .page-main > .message-channel-grid,
  .event-card-page .page-main > .cardkit-editor {
    width: min(100%, calc(100% - 18px));
  }

  :is(.event-admin-page, .dashboard-page) .page-main > * + * {
    margin-top: 18px;
  }

  :is(.event-admin-page, .dashboard-page) .filter-bar,
  .event-guests-page .filter-bar,
  .event-feedback-page .filter-bar,
  .ai-work-page .filter-bar,
  .suggestions-page .filter-bar {
    grid-template-columns: 1fr;
  }

  :is(.event-admin-page, .dashboard-page) .filter-bar .button,
  .event-whatsapp-messages-page .operations-actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════
   GLASS THEME — full glassmorphism refinement
   Mirrors the Silver Sage component coverage, but every surface is
   translucent + blurred so the colourful backdrop reads through.
   Scoped to body:not(.login-page) at the end of the file so it
   outranks the default (Noir) body block and re-declares the
   palette that block would otherwise force onto Glass.
   ════════════════════════════════════════════════════════════ */
html[data-theme="glass"] {
  background: #16306e;
}

html[data-theme="glass"] body:not(.login-page) {
  --bg: #e8edfb;
  --surface: rgba(255, 255, 255, 0.42);
  --surface-strong: rgba(255, 255, 255, 0.60);
  --surface-dark: rgba(255, 255, 255, 0.30);
  --surface-dark-2: rgba(255, 255, 255, 0.22);
  --ink: #1b2230;
  --muted: #4c5670;
  --line: rgba(255, 255, 255, 0.60);
  --line-strong: rgba(255, 255, 255, 0.85);
  --blue: #4f7cf0;
  --blue-deep: #2f53b8;
  --green: #2f9e7e;
  --green-deep: #1f7a60;
  --sky: rgba(99, 102, 241, 0.12);
  --mint: rgba(45, 212, 191, 0.16);
  --red: #d6455e;
  --success: #1f9e6f;
  --shadow: 0 28px 80px rgba(40, 50, 90, 0.22);
  --shadow-soft: 0 18px 44px rgba(40, 50, 90, 0.14);
  --background: #e8edfb;
  --foreground: #1b2230;
  --card: rgba(255, 255, 255, 0.42);
  --card-foreground: #1b2230;
  --primary: #6366f1;
  --primary-foreground: #ffffff;
  --secondary: #2f9e7e;
  --accent: #6366f1;
  --border: rgba(255, 255, 255, 0.60);
  --muted-foreground: #4c5670;
  --gradient-start: #eef2ff;
  --gradient-end: #ecfdf7;
  color: var(--foreground);
  background-color: #16306e;
  background-image:
    linear-gradient(160deg, rgba(20, 36, 90, 0.20) 0%, rgba(14, 26, 68, 0.26) 100%),
    url("../img/glass-bg.498407b2cc52.jpg");
  background-image:
    linear-gradient(160deg, rgba(20, 36, 90, 0.20) 0%, rgba(14, 26, 68, 0.26) 100%),
    image-set(url("../img/glass-bg.8c7a1a985cd7.webp") type("image/webp"), url("../img/glass-bg.498407b2cc52.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Pin the backdrop on capable, non-touch viewports so the blur reads while
   scrolling. Skipped on touch/small screens where fixed backgrounds jank. */
@media (min-width: 900px) and (hover: hover) {
  html[data-theme="glass"] body:not(.login-page) {
    background-attachment: fixed;
  }
}

html[data-theme="glass"] body:not(.login-page)::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 30%, rgba(255, 255, 255, 0.18) 52%, transparent 78%);
  opacity: 0.5;
}

html[data-theme="glass"] body:not(.login-page) a {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .page-grid {
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.08) 1px, transparent 1px);
}

/* ── Frosted chrome: header, footer, nav ── */
html[data-theme="glass"] body:not(.login-page) .site-footer {
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 18px 48px rgba(40, 50, 90, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="glass"] body:not(.login-page) .brand,
html[data-theme="glass"] body:not(.login-page) .site-nav a,
html[data-theme="glass"] body:not(.login-page) .link-button,
html[data-theme="glass"] body:not(.login-page) .site-footer,
html[data-theme="glass"] body:not(.login-page) .site-footer a {
  color: #1b2230;
}

html[data-theme="glass"] body:not(.login-page) .brand-name,
html[data-theme="glass"] body:not(.login-page) .feature-banner h2,
html[data-theme="glass"] body:not(.login-page) .panel h2,
html[data-theme="glass"] body:not(.login-page) .price-card h2,
html[data-theme="glass"] body:not(.login-page) .section-grid h3,
html[data-theme="glass"] body:not(.login-page) .timeline-grid h3 {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .site-nav {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

html[data-theme="glass"] body:not(.login-page) .site-nav a::after,
html[data-theme="glass"] body:not(.login-page) .section-grid article::before,
html[data-theme="glass"] body:not(.login-page) .price-card::before {
  background: linear-gradient(90deg, #6366f1, #ec4899, #2dd4bf);
}

html[data-theme="glass"] body:not(.login-page) .site-nav a:hover,
html[data-theme="glass"] body:not(.login-page) .site-nav a:focus-visible,
html[data-theme="glass"] body:not(.login-page) .link-button:hover,
html[data-theme="glass"] body:not(.login-page) .link-button:focus-visible {
  background: rgba(99, 102, 241, 0.14);
}

/* ── Primary actions: tinted glass ── */
html[data-theme="glass"] body:not(.login-page) .button.primary,
html[data-theme="glass"] body:not(.login-page) .nav-cta,
html[data-theme="glass"] body:not(.login-page) .site-nav a.nav-account-settings {
  color: #ffffff;
  border-color: rgba(99, 102, 241, 0.5);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.92) 0%, rgba(139, 92, 246, 0.92) 52%, rgba(236, 72, 153, 0.88) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 34px rgba(99, 102, 241, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

html[data-theme="glass"] body:not(.login-page) .site-nav a.nav-logout {
  color: #a01b34;
  border-color: rgba(214, 69, 94, 0.3);
  background: rgba(255, 255, 255, 0.4);
}

html[data-theme="glass"] body:not(.login-page) .site-nav a.nav-logout:hover,
html[data-theme="glass"] body:not(.login-page) .site-nav a.nav-logout:focus-visible {
  color: #ffffff;
  background: #d6455e;
}

html[data-theme="glass"] body:not(.login-page) .button.secondary,
html[data-theme="glass"] body:not(.login-page) .button.secondary.light {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-theme="glass"] body:not(.login-page) .button:hover,
html[data-theme="glass"] body:not(.login-page) .nav-cta:hover,
html[data-theme="glass"] body:not(.login-page) .tab-nav a:hover,
html[data-theme="glass"] body:not(.login-page) .list-row:hover {
  box-shadow: 0 18px 42px rgba(40, 50, 90, 0.16), 0 0 30px rgba(99, 102, 241, 0.22);
}

html[data-theme="glass"] body:not(.login-page) .button:focus-visible,
html[data-theme="glass"] body:not(.login-page) .nav-cta:focus-visible,
html[data-theme="glass"] body:not(.login-page) .tab-nav a:focus-visible,
html[data-theme="glass"] body:not(.login-page) a:focus-visible,
html[data-theme="glass"] body:not(.login-page) input:focus-visible,
html[data-theme="glass"] body:not(.login-page) select:focus-visible,
html[data-theme="glass"] body:not(.login-page) textarea:focus-visible,
html[data-theme="glass"] body:not(.login-page) button:focus-visible {
  outline-color: rgba(99, 102, 241, 0.5);
}

/* ── Core surfaces: frosted glass panels ── */
html[data-theme="glass"] body:not(.login-page) .hero,
html[data-theme="glass"] body:not(.login-page) .band,
html[data-theme="glass"] body:not(.login-page) .workflow,
html[data-theme="glass"] body:not(.login-page) .page-hero,
html[data-theme="glass"] body:not(.login-page) .dashboard-head,
html[data-theme="glass"] body:not(.login-page) .section-grid article,
html[data-theme="glass"] body:not(.login-page) .panel,
html[data-theme="glass"] body:not(.login-page) .price-card,
html[data-theme="glass"] body:not(.login-page) .limit-card,
html[data-theme="glass"] body:not(.login-page) .feature-status,
html[data-theme="glass"] body:not(.login-page) .table-panel,
html[data-theme="glass"] body:not(.login-page) .filter-bar,
html[data-theme="glass"] body:not(.login-page) .result-card,
html[data-theme="glass"] body:not(.login-page) .metric-grid article,
html[data-theme="glass"] body:not(.login-page) .timeline-grid article {
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.32));
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

html[data-theme="glass"] body:not(.login-page) .hero,
html[data-theme="glass"] body:not(.login-page) .page-hero,
html[data-theme="glass"] body:not(.login-page) .dashboard-head {
  background:
    radial-gradient(circle at 86% 10%, rgba(99, 102, 241, 0.26), transparent 32%),
    radial-gradient(circle at 8% 90%, rgba(45, 212, 191, 0.22), transparent 34%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.34) 62%, rgba(255, 255, 255, 0.28));
}

html[data-theme="glass"] body:not(.login-page) .band,
html[data-theme="glass"] body:not(.login-page) .workflow {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.3)),
    linear-gradient(90deg, rgba(99, 102, 241, 0.12), transparent);
}

html[data-theme="glass"] body:not(.login-page) .page-hero::before,
html[data-theme="glass"] body:not(.login-page) .dashboard-head::before,
html[data-theme="glass"] body:not(.login-page) .band::before,
html[data-theme="glass"] body:not(.login-page) .workflow::before {
  background:
    linear-gradient(90deg, rgba(99, 102, 241, 0.16), transparent 38%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 22px);
}

/* ── Type colours ── */
html[data-theme="glass"] body:not(.login-page) .hero-copy h1,
html[data-theme="glass"] body:not(.login-page) .page-hero h1,
html[data-theme="glass"] body:not(.login-page) .dashboard-head h1,
html[data-theme="glass"] body:not(.login-page) .auth-story h1,
html[data-theme="glass"] body:not(.login-page) .summary-heading h2,
html[data-theme="glass"] body:not(.login-page) .section-intro h2,
html[data-theme="glass"] body:not(.login-page) strong,
html[data-theme="glass"] body:not(.login-page) h1,
html[data-theme="glass"] body:not(.login-page) h2,
html[data-theme="glass"] body:not(.login-page) h3,
html[data-theme="glass"] body:not(.login-page) label,
html[data-theme="glass"] body:not(.login-page) td {
  color: #1b2230;
}

html[data-theme="glass"] body:not(.login-page) .hero-copy p,
html[data-theme="glass"] body:not(.login-page) .page-hero p,
html[data-theme="glass"] body:not(.login-page) .dashboard-subtitle,
html[data-theme="glass"] body:not(.login-page) .section-intro p,
html[data-theme="glass"] body:not(.login-page) .feature-banner p:last-child,
html[data-theme="glass"] body:not(.login-page) .auth-story p,
html[data-theme="glass"] body:not(.login-page) .invite-intro,
html[data-theme="glass"] body:not(.login-page) p,
html[data-theme="glass"] body:not(.login-page) .metric-grid p,
html[data-theme="glass"] body:not(.login-page) .helptext,
html[data-theme="glass"] body:not(.login-page) small,
html[data-theme="glass"] body:not(.login-page) .list-row span,
html[data-theme="glass"] body:not(.login-page) .guest-summary span,
html[data-theme="glass"] body:not(.login-page) th {
  color: var(--muted);
}

html[data-theme="glass"] body:not(.login-page) .eyebrow,
html[data-theme="glass"] body:not(.login-page) .small-label,
html[data-theme="glass"] body:not(.login-page) .hero-copy .eyebrow,
html[data-theme="glass"] body:not(.login-page) .page-hero > .eyebrow,
html[data-theme="glass"] body:not(.login-page) .dashboard-head .eyebrow,
html[data-theme="glass"] body:not(.login-page) .pricing-note .eyebrow,
html[data-theme="glass"] body:not(.login-page) .feature-banner .eyebrow,
html[data-theme="glass"] body:not(.login-page) .auth-form .eyebrow {
  color: #4f46e5;
  background: transparent;
}

html[data-theme="glass"] body:not(.login-page) .price,
html[data-theme="glass"] body:not(.login-page) .metric-grid span,
html[data-theme="glass"] body:not(.login-page) .limit-card strong {
  color: #4f46e5;
}

/* ── Accent chips, badges, icons ── */
html[data-theme="glass"] body:not(.login-page) .badge,
html[data-theme="glass"] body:not(.login-page) .price-badge,
html[data-theme="glass"] body:not(.login-page) .status-chip,
html[data-theme="glass"] body:not(.login-page) .feature-icon,
html[data-theme="glass"] body:not(.login-page) .timeline-grid span,
html[data-theme="glass"] body:not(.login-page) .required-marker,
html[data-theme="glass"] body:not(.login-page) p:has(.tz-phone-input)::before,
html[data-theme="glass"] body:not(.login-page) .form-field:has(.tz-phone-input)::before {
  color: #ffffff;
  border-color: rgba(99, 102, 241, 0.4);
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

html[data-theme="glass"] body:not(.login-page) .feature-banner,
html[data-theme="glass"] body:not(.login-page) .list-row,
html[data-theme="glass"] body:not(.login-page) .tab-nav a {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html[data-theme="glass"] body:not(.login-page) #id_package label {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

html[data-theme="glass"] body:not(.login-page) #id_package label:has(input:checked),
html[data-theme="glass"] body:not(.login-page) .limit-card {
  border-color: rgba(99, 102, 241, 0.45);
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.2), transparent 34%),
    rgba(255, 255, 255, 0.42);
}

html[data-theme="glass"] body:not(.login-page) #id_package label:has(input:checked) {
  color: #14213a;
  border-color: rgba(99, 102, 241, 0.6);
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.42));
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="glass"] body:not(.login-page) #id_package input {
  accent-color: #6366f1;
}

html[data-theme="glass"] body:not(.login-page) .feature-status.included {
  border-color: rgba(31, 158, 111, 0.3);
  background: rgba(209, 250, 229, 0.5);
}

html[data-theme="glass"] body:not(.login-page) .feature-status.locked {
  border-color: rgba(214, 69, 94, 0.28);
  background: rgba(254, 226, 226, 0.5);
}

html[data-theme="glass"] body:not(.login-page) .feature-status.included span {
  color: #ffffff;
  background: #1f9e6f;
}

html[data-theme="glass"] body:not(.login-page) .feature-status.locked span {
  color: #ffffff;
  background: #d6455e;
}

/* ── Form controls: frosted, readable ── */
html[data-theme="glass"] body:not(.login-page) input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="glass"] body:not(.login-page) select,
html[data-theme="glass"] body:not(.login-page) textarea {
  color: #1b2230;
  -webkit-text-fill-color: #1b2230;
  border-color: rgba(99, 102, 241, 0.32);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html[data-theme="glass"] body:not(.login-page) input::placeholder,
html[data-theme="glass"] body:not(.login-page) textarea::placeholder {
  color: rgba(76, 86, 112, 0.7);
  -webkit-text-fill-color: rgba(76, 86, 112, 0.7);
}

html[data-theme="glass"] body:not(.login-page) input:not([type="radio"]):not([type="checkbox"]):hover,
html[data-theme="glass"] body:not(.login-page) select:hover,
html[data-theme="glass"] body:not(.login-page) textarea:hover,
html[data-theme="glass"] body:not(.login-page) input:not([type="radio"]):not([type="checkbox"]):focus-visible,
html[data-theme="glass"] body:not(.login-page) select:focus-visible,
html[data-theme="glass"] body:not(.login-page) textarea:focus-visible {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.14);
}

/* ── Tables, code, messages ── */
html[data-theme="glass"] body:not(.login-page) th,
html[data-theme="glass"] body:not(.login-page) td {
  border-bottom-color: rgba(99, 102, 241, 0.16);
}

html[data-theme="glass"] body:not(.login-page) th {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.14), rgba(255, 255, 255, 0.3));
}

html[data-theme="glass"] body:not(.login-page) tbody tr:hover td,
html[data-theme="glass"] body:not(.login-page) code {
  background: rgba(99, 102, 241, 0.1);
}

html[data-theme="glass"] body:not(.login-page) code {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .message {
  color: #15543c;
  border-color: rgba(31, 158, 111, 0.28);
  background: rgba(236, 253, 245, 0.6);
}

html[data-theme="glass"] body:not(.login-page) .form-error-summary {
  color: #a01b34;
  border-color: rgba(214, 69, 94, 0.3);
  background: rgba(254, 242, 244, 0.6);
}

html[data-theme="glass"] body:not(.login-page) .form-error-summary strong,
html[data-theme="glass"] body:not(.login-page) .form-error-summary p {
  color: #a01b34;
}

html[data-theme="glass"] body:not(.login-page) .result-card.success {
  border-color: rgba(31, 158, 111, 0.34);
  background: rgba(220, 250, 235, 0.55);
}

html[data-theme="glass"] body:not(.login-page) .result-card.warning {
  border-color: rgba(214, 69, 94, 0.34);
  background: rgba(255, 235, 238, 0.55);
}

/* ── Settings + account surfaces ── */
html[data-theme="glass"] body:not(.login-page) .settings-menu-button,
html[data-theme="glass"] body:not(.login-page) .settings-section-card,
html[data-theme="glass"] body:not(.login-page) .settings-detail-card,
html[data-theme="glass"] body:not(.login-page) .settings-password-row,
html[data-theme="glass"] body:not(.login-page) .settings-toggle-row,
html[data-theme="glass"] body:not(.login-page) .device-card {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

html[data-theme="glass"] body:not(.login-page) .settings-menu-button:hover,
html[data-theme="glass"] body:not(.login-page) .settings-menu-button:focus-visible {
  border-color: rgba(99, 102, 241, 0.45);
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.24), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.42));
  box-shadow: 0 18px 42px rgba(40, 50, 90, 0.16), 0 0 30px rgba(99, 102, 241, 0.2);
}

html[data-theme="glass"] body:not(.login-page) .settings-menu-button strong,
html[data-theme="glass"] body:not(.login-page) .settings-section-heading h1,
html[data-theme="glass"] body:not(.login-page) .logout-card h1 {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .settings-menu-button span,
html[data-theme="glass"] body:not(.login-page) .settings-section-heading p,
html[data-theme="glass"] body:not(.login-page) .logout-copy,
html[data-theme="glass"] body:not(.login-page) .settings-password-row small,
html[data-theme="glass"] body:not(.login-page) .settings-toggle-row small,
html[data-theme="glass"] body:not(.login-page) .device-card small {
  color: var(--muted);
}

html[data-theme="glass"] body:not(.login-page) .settings-avatar,
html[data-theme="glass"] body:not(.login-page) .settings-section-icon,
html[data-theme="glass"] body:not(.login-page) .status-pill {
  color: #ffffff;
  border-color: rgba(99, 102, 241, 0.34);
  background:
    radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.32), transparent 35%),
    linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* ── Auth + showcase ── */
html[data-theme="glass"] body:not(.login-page) .auth-story {
  border-color: rgba(255, 255, 255, 0.5);
  background:
    radial-gradient(circle at top right, rgba(99, 102, 241, 0.2), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
}

html[data-theme="glass"] body:not(.login-page) .auth-points span,
html[data-theme="glass"] body:not(.login-page) .hero-points span,
html[data-theme="glass"] body:not(.login-page) .hero-note {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.38);
}

html[data-theme="glass"] body:not(.login-page) .showcase-frame {
  background: linear-gradient(145deg, #c7d2fe 0%, #a5b4fc 46%, #6366f1 100%);
}

html[data-theme="glass"] body:not(.login-page) .showcase-card {
  border-color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.36));
}

/* ── Video hero (kept dark for legible overlay text) ── */
html[data-theme="glass"] body:not(.login-page) .video-hero {
  color: #ffffff;
  background:
    radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.4), transparent 30%),
    radial-gradient(circle at 82% 8%, rgba(45, 212, 191, 0.3), transparent 28%),
    linear-gradient(140deg, #1e2440 0%, #312e81 48%, #0f172a 100%);
}

html[data-theme="glass"] body:not(.login-page) .video-hero .eyebrow,
html[data-theme="glass"] body:not(.login-page) .video-hero h1,
html[data-theme="glass"] body:not(.login-page) .video-hero-content > p:not(.eyebrow) {
  color: #ffffff;
}

html[data-theme="glass"] body:not(.login-page) .video-hero .button.secondary.light {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(49, 46, 129, 0.45);
}

/* ── Home summary band (dark by design) ── */
html[data-theme="glass"] body:not(.login-page) .home-summary {
  color: #ffffff;
  background:
    radial-gradient(circle at 10% 0%, rgba(129, 140, 248, 0.28), transparent 28%),
    linear-gradient(180deg, #1e2440, #312e81);
}

html[data-theme="glass"] body:not(.login-page) .home-summary h2,
html[data-theme="glass"] body:not(.login-page) .home-summary h3,
html[data-theme="glass"] body:not(.login-page) .home-summary strong {
  color: #ffffff;
}

html[data-theme="glass"] body:not(.login-page) .summary-list,
html[data-theme="glass"] body:not(.login-page) .summary-list article {
  border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="glass"] body:not(.login-page) .summary-list p,
html[data-theme="glass"] body:not(.login-page) .summary-list span,
html[data-theme="glass"] body:not(.login-page) .home-summary .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

/* ── Preference selects ── */
html[data-theme="glass"] body:not(.login-page) .theme-select,
html[data-theme="glass"] body:not(.login-page) .language-select {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ── Scanner / check-in surfaces ── */
html[data-theme="glass"] body:not(.login-page) .scanner-box {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}

html[data-theme="glass"] body:not(.login-page) .scanner-camera {
  border-color: rgba(99, 102, 241, 0.3);
  background:
    radial-gradient(circle at 50% 42%, rgba(99, 102, 241, 0.18), transparent 28%),
    linear-gradient(145deg, #1e2440, #312e81);
}

html[data-theme="glass"] body:not(.login-page) .scanner-camera-placeholder {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(20, 24, 48, 0.42);
}

html[data-theme="glass"] body:not(.login-page) .scanner-camera-placeholder strong {
  color: #ffffff;
}

html[data-theme="glass"] body:not(.login-page) .scanner-camera-placeholder span {
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="glass"] body:not(.login-page) .scanner-live-result {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(30, 36, 64, 0.94), rgba(15, 23, 42, 0.86));
}

html[data-theme="glass"] body:not(.login-page) .scanner-live-result h3 {
  color: #f4f6ff;
}

html[data-theme="glass"] body:not(.login-page) .scanner-live-result p {
  color: rgba(255, 255, 255, 0.86);
}

html[data-theme="glass"] body:not(.login-page) .scanner-live-capacity {
  color: #1b2230;
  background: rgba(224, 231, 255, 0.7);
}

html[data-theme="glass"] body:not(.login-page) .scanner-fallbacks input[type="file"] {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 540px) {
  /* Keep the photo backdrop on mobile: fall the content containers back to
     transparent so the body image shows (it scrolls rather than fixes here). */
  html[data-theme="glass"] {
    background: #16306e;
  }

  html[data-theme="glass"] main:not(.top-menu-bar),
  html[data-theme="glass"] .page-main,
  html[data-theme="glass"] .home-page main:not(.top-menu-bar),
  html[data-theme="glass"] .home-page .page-main {
    background: transparent;
  }

  html[data-theme="glass"] body::after {
    background: rgba(22, 48, 110, 0.92);
  }

  html[data-theme="glass"] .theme-switcher,
  html[data-theme="glass"] .language-switcher {
    width: 100%;
  }

  html[data-theme="glass"] .theme-select,
  html[data-theme="glass"] .language-select {
    width: 100%;
    max-width: none;
  }

}

/* ════════════════════════════════════════════════════════════
   GLASS — navigation system (top menu bar, account dropdown,
   mobile nav) + luxury refinements. This is the chrome shown on
   every page, so it needs the same frosted treatment as panels.
   ════════════════════════════════════════════════════════════ */

/* ── Account dropdown / mobile menu chrome ── */
html[data-theme="glass"] body:not(.login-page) .account-trigger,
html[data-theme="glass"] body:not(.login-page) .mobile-menu-trigger {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

html[data-theme="glass"] body:not(.login-page) .account-avatar,
html[data-theme="glass"] body:not(.login-page) .dropdown-link-strong {
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

html[data-theme="glass"] body:not(.login-page) .account-dropdown,
html[data-theme="glass"] body:not(.login-page) .mobile-nav-panel {
  border-color: rgba(255, 255, 255, 0.55);
  color: #1b2230;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.52));
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  backdrop-filter: blur(26px) saturate(1.4);
  box-shadow: 0 24px 60px rgba(40, 50, 90, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

html[data-theme="glass"] body:not(.login-page) .dropdown-link,
html[data-theme="glass"] body:not(.login-page) .mobile-nav-links a,
html[data-theme="glass"] body:not(.login-page) .mobile-logout,
html[data-theme="glass"] body:not(.login-page) .nav-preference {
  color: #1b2230;
}

html[data-theme="glass"] body:not(.login-page) .dropdown-link:hover,
html[data-theme="glass"] body:not(.login-page) .dropdown-link:focus-visible,
html[data-theme="glass"] body:not(.login-page) .mobile-nav-links a:hover,
html[data-theme="glass"] body:not(.login-page) .mobile-nav-links a:focus-visible {
  background: rgba(99, 102, 241, 0.14);
}

html[data-theme="glass"] body:not(.login-page) .dropdown-link-danger {
  color: #a01b34;
}

html[data-theme="glass"] body:not(.login-page) .dropdown-divider {
  background: rgba(99, 102, 241, 0.2);
}

html[data-theme="glass"] body:not(.login-page) .dropdown-label {
  color: #4c5670;
}

/* ── Top menu bar (primary navbar) ── */
html[data-theme="glass"] body:not(.login-page) .top-menu-bar {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 18px 44px rgba(40, 50, 90, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .brand,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .desktop-nav a,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .dropdown-link,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .nav-preference {
  color: #1b2230;
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .brand-name {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .desktop-nav {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.32);
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .account-trigger {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(255, 255, 255, 0.42);
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .desktop-nav a:hover,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .desktop-nav a:focus-visible,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .dropdown-link:hover,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .dropdown-link:focus-visible {
  background: rgba(99, 102, 241, 0.14);
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .account-avatar,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .dropdown-link-strong {
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .account-dropdown {
  border-color: rgba(255, 255, 255, 0.55);
  color: #1b2230;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.52));
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  backdrop-filter: blur(26px) saturate(1.4);
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .dropdown-link-danger {
  color: #a01b34;
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .dropdown-divider {
  background: rgba(99, 102, 241, 0.2);
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .dropdown-label {
  color: #4c5670;
}

html[data-theme="glass"] body:not(.login-page) .top-menu-bar .theme-select,
html[data-theme="glass"] body:not(.login-page) .top-menu-bar .language-select {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.5);
}

/* ── Luxury refinement: glinting primary action + richer hovers ── */
html[data-theme="glass"] body:not(.login-page) .button.primary,
html[data-theme="glass"] body:not(.login-page) .nav-cta {
  position: relative;
  overflow: hidden;
}

html[data-theme="glass"] body:not(.login-page) .button.primary::before,
html[data-theme="glass"] body:not(.login-page) .nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 36%, rgba(255, 255, 255, 0.4) 50%, transparent 64%);
  transform: translateX(-150%);
  animation: sage-shimmer 16s linear infinite;
  pointer-events: none;
}

html[data-theme="glass"] body:not(.login-page) .button.primary:hover,
html[data-theme="glass"] body:not(.login-page) .nav-cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(99, 102, 241, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

html[data-theme="glass"] body:not(.login-page) .section-grid article:hover,
html[data-theme="glass"] body:not(.login-page) .panel:hover,
html[data-theme="glass"] body:not(.login-page) .price-card:hover,
html[data-theme="glass"] body:not(.login-page) .metric-grid article:hover,
html[data-theme="glass"] body:not(.login-page) .timeline-grid article:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(99, 102, 241, 0.06),
    0 30px 66px rgba(40, 50, 90, 0.2),
    0 6px 16px rgba(99, 102, 241, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="glass"] body:not(.login-page) .button.primary::before,
  html[data-theme="glass"] body:not(.login-page) .nav-cta::before {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════
   GLASS — remaining page surfaces (cookie banner, about, feedback,
   QR, video hero, mobile preferences) so no Noir leaks
   through on secondary pages.
   ════════════════════════════════════════════════════════════ */

/* ── Cookie consent banner (shown to every new visitor) ── */
html[data-theme="glass"] .cookie-consent-card {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.6);
  background:
    radial-gradient(circle at 96% 0%, rgba(99, 102, 241, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.55));
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 14px 38px rgba(40, 50, 90, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="glass"] .cookie-consent-copy h2 {
  color: #4f46e5;
}

html[data-theme="glass"] .cookie-consent-copy p:last-child,
html[data-theme="glass"] .cookie-option small {
  color: #4c5670;
}

html[data-theme="glass"] .cookie-consent-details {
  border-color: rgba(99, 102, 241, 0.2);
}

html[data-theme="glass"] .cookie-consent-details summary {
  color: #4f46e5;
}

html[data-theme="glass"] .cookie-consent-details summary::after {
  border-color: rgba(99, 102, 241, 0.3);
}

html[data-theme="glass"] .cookie-option {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.5);
}

html[data-theme="glass"] .cookie-option.is-essential {
  border-color: rgba(99, 102, 241, 0.3);
}

html[data-theme="glass"] .cookie-option input {
  border-color: rgba(99, 102, 241, 0.46);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="glass"] .cookie-option input:checked {
  border-color: #6366f1;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

html[data-theme="glass"] .cookie-option input:checked::before {
  border-color: #ffffff;
}

html[data-theme="glass"] .cookie-option input:focus-visible {
  outline-color: rgba(99, 102, 241, 0.28);
}

/* ── About page ── */
html[data-theme="glass"] body:not(.login-page) .about-brand-card {
  background: transparent;
  box-shadow: none;
}

html[data-theme="glass"] body:not(.login-page) .about-story-intro,
html[data-theme="glass"] body:not(.login-page) .about-columns,
html[data-theme="glass"] body:not(.login-page) .about-workflow-note,
html[data-theme="glass"] body:not(.login-page) .about-founder-note {
  border-color: rgba(255, 255, 255, 0.5);
}

html[data-theme="glass"] body:not(.login-page) .about-brand-card strong,
html[data-theme="glass"] body:not(.login-page) .about-story-intro h2,
html[data-theme="glass"] body:not(.login-page) .about-mission-grid h3,
html[data-theme="glass"] body:not(.login-page) .about-columns h3,
html[data-theme="glass"] body:not(.login-page) .about-workflow-note span {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .about-mission-grid article::before,
html[data-theme="glass"] body:not(.login-page) .about-columns article::before {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

/* ── Feedback page ── */
html[data-theme="glass"] body:not(.login-page) .workflow-notice {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.1);
}

html[data-theme="glass"] body:not(.login-page) .workflow-notice strong {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .workflow-notice p {
  color: #4c5670;
}

html[data-theme="glass"] body:not(.login-page) .code-block {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(99, 102, 241, 0.08);
}

html[data-theme="glass"] body:not(.login-page) .summary-body,
html[data-theme="glass"] body:not(.login-page) .summary-body p {
  color: #1b2230;
}

html[data-theme="glass"] body:not(.login-page) .badge.badge--high,
html[data-theme="glass"] body:not(.login-page) .badge.badge--critical {
  color: #7a271a;
  background: #fee4e2;
  border-color: rgba(180, 35, 24, 0.2);
}

html[data-theme="glass"] body:not(.login-page) .badge.badge--medium {
  color: #92400e;
  background: #fef3c7;
  border-color: rgba(146, 64, 14, 0.2);
}

html[data-theme="glass"] body:not(.login-page) .badge.badge--low {
  color: #054f31;
  background: #d1fadf;
  border-color: rgba(5, 79, 49, 0.2);
}

/* ── QR code stays on solid white for scannability ── */
html[data-theme="glass"] .qr-wrap {
  color: #050403;
  background: #ffffff;
}

/* ── Video hero (home) keeps a dark, indigo-tinted overlay ── */
html[data-theme="glass"] body:not(.login-page) .video-hero-overlay {
  background:
    linear-gradient(180deg, rgba(20, 24, 48, 0.64) 0%, rgba(20, 24, 48, 0.3) 42%, rgba(20, 24, 48, 0.72) 100%),
    linear-gradient(90deg, rgba(20, 24, 48, 0.5), rgba(20, 24, 48, 0.08) 50%, rgba(20, 24, 48, 0.48));
}

html[data-theme="glass"] body.home-page .video-hero-footer,
html[data-theme="glass"] body.home-page .video-hero-footer .site-footer-brand strong,
html[data-theme="glass"] body.home-page .video-hero-footer .site-footer-desc,
html[data-theme="glass"] body.home-page .video-hero-footer .site-footer-nav a,
html[data-theme="glass"] body.home-page .video-hero-footer .footer-cookie-button {
  color: #ffffff;
}

html[data-theme="glass"] body.home-page .video-hero-footer .site-footer-copy,
html[data-theme="glass"] body.home-page .video-hero-footer .site-footer-attr {
  color: rgba(255, 255, 255, 0.6);
}

html[data-theme="glass"] body.home-page .video-hero-footer .site-footer-nav a:hover,
html[data-theme="glass"] body.home-page .video-hero-footer .footer-cookie-button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

/* ── Mobile preferences in the slide-out menu ── */
html[data-theme="glass"] body:not(.login-page) .mobile-preferences {
  border-top-color: rgba(255, 255, 255, 0.5);
}

html[data-theme="glass"] body:not(.login-page) .mobile-preferences .nav-preference span {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .mobile-preferences .theme-select,
html[data-theme="glass"] body:not(.login-page) .mobile-preferences .language-select {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.5);
}

/* ════════════════════════════════════════════════════════════
   GLASS — login page. The login body re-declares the palette to
   Noir by default, so Glass needs its own override (mirrors
   the Silver Sage login block) or the sign-in screen stays dark.
   ════════════════════════════════════════════════════════════ */
html[data-theme="glass"] body.login-page {
  --bg: #e8edfb;
  --surface: rgba(255, 255, 255, 0.42);
  --surface-strong: rgba(255, 255, 255, 0.60);
  --surface-dark: rgba(255, 255, 255, 0.30);
  --surface-dark-2: rgba(255, 255, 255, 0.22);
  --ink: #1b2230;
  --muted: #4c5670;
  --line: rgba(255, 255, 255, 0.60);
  --line-strong: rgba(255, 255, 255, 0.85);
  --blue: #4f7cf0;
  --blue-deep: #2f53b8;
  --green: #2f9e7e;
  --green-deep: #1f7a60;
  --sky: rgba(99, 102, 241, 0.12);
  --mint: rgba(45, 212, 191, 0.16);
  --red: #d6455e;
  --success: #1f9e6f;
  --shadow: 0 28px 80px rgba(40, 50, 90, 0.22);
  --shadow-soft: 0 18px 44px rgba(40, 50, 90, 0.14);
  --background: #e8edfb;
  --foreground: #1b2230;
  --card: rgba(255, 255, 255, 0.42);
  --card-foreground: #1b2230;
  --primary: #6366f1;
  --primary-foreground: #ffffff;
  --secondary: #2f9e7e;
  --accent: #6366f1;
  --border: rgba(255, 255, 255, 0.60);
  --muted-foreground: #4c5670;
  --gradient-start: #eef2ff;
  --gradient-end: #ecfdf7;
  color: var(--foreground);
  background-color: #16306e;
  background-image:
    linear-gradient(160deg, rgba(20, 36, 90, 0.20) 0%, rgba(14, 26, 68, 0.26) 100%),
    url("../img/glass-bg.498407b2cc52.jpg");
  background-image:
    linear-gradient(160deg, rgba(20, 36, 90, 0.20) 0%, rgba(14, 26, 68, 0.26) 100%),
    image-set(url("../img/glass-bg.8c7a1a985cd7.webp") type("image/webp"), url("../img/glass-bg.498407b2cc52.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 900px) and (hover: hover) {
  html[data-theme="glass"] body.login-page {
    background-attachment: fixed;
  }
}

html[data-theme="glass"] body.login-page::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 30%, rgba(255, 255, 255, 0.18) 52%, transparent 78%);
  opacity: 0.5;
}

html[data-theme="glass"] body.login-page a {
  color: #4f46e5;
}

html[data-theme="glass"] body.login-page .page-grid {
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.08) 1px, transparent 1px);
}

/* Login navbar */
html[data-theme="glass"] body.login-page .top-menu-bar {
  border-color: rgba(255, 255, 255, 0.55);
  color: #1b2230;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 18px 44px rgba(40, 50, 90, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="glass"] body.login-page .top-menu-bar .brand,
html[data-theme="glass"] body.login-page .top-menu-bar .brand-name,
html[data-theme="glass"] body.login-page .top-menu-bar .desktop-nav a,
html[data-theme="glass"] body.login-page .top-menu-bar .dropdown-link,
html[data-theme="glass"] body.login-page .top-menu-bar .mobile-nav-links a,
html[data-theme="glass"] body.login-page .top-menu-bar .mobile-logout,
html[data-theme="glass"] body.login-page .top-menu-bar .nav-preference {
  color: #1b2230;
}

html[data-theme="glass"] body.login-page .top-menu-bar .desktop-nav,
html[data-theme="glass"] body.login-page .top-menu-bar .account-trigger,
html[data-theme="glass"] body.login-page .top-menu-bar .mobile-menu-trigger {
  border-color: rgba(255, 255, 255, 0.5);
  color: #1b2230;
  background: rgba(255, 255, 255, 0.42);
}

html[data-theme="glass"] body.login-page .top-menu-bar .account-avatar,
html[data-theme="glass"] body.login-page .top-menu-bar .dropdown-link-strong {
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

html[data-theme="glass"] body.login-page .top-menu-bar .account-dropdown,
html[data-theme="glass"] body.login-page .top-menu-bar .mobile-nav-panel {
  border-color: rgba(255, 255, 255, 0.55);
  color: #1b2230;
  background:
    radial-gradient(circle at 80% 0%, rgba(99, 102, 241, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.52));
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  backdrop-filter: blur(26px) saturate(1.4);
}

html[data-theme="glass"] body.login-page .top-menu-bar .dropdown-label {
  color: #4c5670;
}

html[data-theme="glass"] body.login-page .top-menu-bar .dropdown-divider {
  background: rgba(99, 102, 241, 0.2);
}

html[data-theme="glass"] body.login-page .top-menu-bar .mobile-preferences {
  border-color: rgba(255, 255, 255, 0.5);
}

html[data-theme="glass"] body.login-page .top-menu-bar .desktop-nav a:hover,
html[data-theme="glass"] body.login-page .top-menu-bar .desktop-nav a:focus-visible,
html[data-theme="glass"] body.login-page .top-menu-bar .dropdown-link:hover,
html[data-theme="glass"] body.login-page .top-menu-bar .dropdown-link:focus-visible {
  background: rgba(99, 102, 241, 0.14);
}

html[data-theme="glass"] body.login-page .top-menu-bar .mobile-nav-links a,
html[data-theme="glass"] body.login-page .top-menu-bar .mobile-logout {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.42);
}

html[data-theme="glass"] body.login-page .top-menu-bar .dropdown-link-danger {
  color: #a01b34;
}

html[data-theme="glass"] body.login-page .top-menu-bar .theme-select,
html[data-theme="glass"] body.login-page .top-menu-bar .language-select {
  color: #1b2230;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.5);
}

/* Login footer */
html[data-theme="glass"] body.login-page .site-footer {
  border-color: rgba(255, 255, 255, 0.55);
  color: #1b2230;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.34));
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 18px 48px rgba(40, 50, 90, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

html[data-theme="glass"] body.login-page .site-footer a,
html[data-theme="glass"] body.login-page .site-footer p {
  color: #4c5670;
}

/* Auth shell + form */
html[data-theme="glass"] body.login-page .login-auth-shell {
  color: #1b2230;
}

html[data-theme="glass"] body.login-page .auth-form {
  border-color: rgba(255, 255, 255, 0.55);
  color: #1b2230;
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.36));
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

html[data-theme="glass"] body.login-page .auth-form h2,
html[data-theme="glass"] body.login-page .auth-form label {
  color: #1b2230;
}

html[data-theme="glass"] body.login-page .auth-form p {
  color: #4c5670;
}

html[data-theme="glass"] body.login-page .login-eyebrow {
  color: #4f46e5;
  border-color: rgba(99, 102, 241, 0.24);
  background: rgba(99, 102, 241, 0.12);
}

html[data-theme="glass"] body.login-page .login-eyebrow span + span::before {
  color: rgba(76, 86, 112, 0.72);
}

/* Login inputs (also covers .auth-shell .form-shell parity) */
html[data-theme="glass"] body.login-page input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="glass"] body.login-page select,
html[data-theme="glass"] body.login-page textarea,
html[data-theme="glass"] body.login-page .auth-form input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="glass"] body.login-page .auth-form select,
html[data-theme="glass"] body.login-page .auth-form textarea {
  color: #1b2230;
  -webkit-text-fill-color: #1b2230;
  caret-color: #6366f1;
  border-color: rgba(99, 102, 241, 0.32);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 3px rgba(40, 50, 90, 0.05);
  color-scheme: light;
}

html[data-theme="glass"] body.login-page input::placeholder,
html[data-theme="glass"] body.login-page textarea::placeholder {
  color: rgba(76, 86, 112, 0.72);
  -webkit-text-fill-color: rgba(76, 86, 112, 0.72);
}

html[data-theme="glass"] body.login-page input:not([type="radio"]):not([type="checkbox"]):hover,
html[data-theme="glass"] body.login-page select:hover,
html[data-theme="glass"] body.login-page textarea:hover,
html[data-theme="glass"] body.login-page input:not([type="radio"]):not([type="checkbox"]):focus-visible,
html[data-theme="glass"] body.login-page select:focus-visible,
html[data-theme="glass"] body.login-page textarea:focus-visible {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.14);
}

html[data-theme="glass"] body.login-page input:-webkit-autofill,
html[data-theme="glass"] body.login-page input:-webkit-autofill:hover,
html[data-theme="glass"] body.login-page input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1b2230;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.78) inset;
  caret-color: #6366f1;
}

html[data-theme="glass"] body.login-page .button.primary {
  color: #ffffff;
  border-color: rgba(99, 102, 241, 0.5);
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 52%, #ec4899 100%);
  box-shadow: 0 16px 34px rgba(99, 102, 241, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

html[data-theme="glass"] body.login-page .message {
  color: #15543c;
  border-color: rgba(31, 158, 111, 0.28);
  background: rgba(236, 253, 245, 0.7);
}

html[data-theme="glass"] body.login-page .errorlist {
  color: #a01b34;
  border-color: rgba(214, 69, 94, 0.3);
  background: rgba(254, 242, 244, 0.7);
}

/* ════════════════════════════════════════════════════════════
   GLASS — components only the default (Noir) styled. These
   have NO Silver Sage override either, so they hardcode gold and
   leaked into Glass. Found by auditing against Noir, the
   most complete theme. (RSVP / payment / SMS — guest-facing.)
   ════════════════════════════════════════════════════════════ */

/* RSVP status (shown to guests) — base/pending state was gold */
html[data-theme="glass"] body:not(.login-page) .rsvp-status-card {
  border-color: rgba(99, 102, 241, 0.26);
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}

html[data-theme="glass"] body:not(.login-page) .rsvp-inline-status {
  border-color: rgba(99, 102, 241, 0.24);
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

html[data-theme="glass"] body:not(.login-page) .rsvp-inline-status.is-pending {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.1);
}

/* Payment + refund surfaces */
html[data-theme="glass"] body:not(.login-page) .payment-method-card {
  border-color: rgba(99, 102, 241, 0.32);
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}

html[data-theme="glass"] body:not(.login-page) .payment-summary-card,
html[data-theme="glass"] body:not(.login-page) .refund-policy-card,
html[data-theme="glass"] body:not(.login-page) .refund-panel {
  border-color: rgba(99, 102, 241, 0.36);
}

html[data-theme="glass"] body:not(.login-page) .sms-copy-panel summary {
  color: #4f46e5;
}

html[data-theme="glass"] body:not(.login-page) .sms-copy-panel p {
  border-color: rgba(99, 102, 241, 0.22);
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Danger button: red is semantic, just drop the warm cream text */
html[data-theme="glass"] body:not(.login-page) .danger-button {
  color: #ffffff;
}

/* ════════════════════════════════════════════════════════════
   GLASS — home page nav. Over the video the navbar must read as the
   Glass theme (frosted blue, indigo accents) — NOT the shared gold
   cinematic look. A blue tint + blur + light text keep it legible
   over any video frame. End-of-file + doubled specificity so this
   beats the theme-agnostic home block and the inline critical CSS.
   ════════════════════════════════════════════════════════════ */
html[data-theme="glass"] body.home-page .top-menu-bar.top-menu-bar {
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  background: linear-gradient(180deg, rgba(34, 44, 92, 0.46), rgba(20, 28, 66, 0.40));
  box-shadow: 0 18px 48px rgba(10, 16, 40, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
}

html[data-theme="glass"] body.home-page .top-menu-bar .brand,
html[data-theme="glass"] body.home-page .top-menu-bar .desktop-nav a,
html[data-theme="glass"] body.home-page .top-menu-bar .dropdown-link,
html[data-theme="glass"] body.home-page .top-menu-bar .mobile-nav-links a,
html[data-theme="glass"] body.home-page .top-menu-bar .mobile-logout,
html[data-theme="glass"] body.home-page .top-menu-bar .nav-preference {
  color: #ffffff;
}

html[data-theme="glass"] body.home-page .top-menu-bar .brand-name {
  color: #c7d2fe;
}

html[data-theme="glass"] body.home-page .top-menu-bar .desktop-nav,
html[data-theme="glass"] body.home-page .top-menu-bar .account-trigger,
html[data-theme="glass"] body.home-page .top-menu-bar .mobile-menu-trigger {
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
}

html[data-theme="glass"] body.home-page .top-menu-bar .desktop-nav a:hover,
html[data-theme="glass"] body.home-page .top-menu-bar .desktop-nav a:focus-visible,
html[data-theme="glass"] body.home-page .top-menu-bar .dropdown-link:hover,
html[data-theme="glass"] body.home-page .top-menu-bar .dropdown-link:focus-visible {
  background: rgba(99, 102, 241, 0.32);
}

html[data-theme="glass"] body.home-page .top-menu-bar .account-dropdown,
html[data-theme="glass"] body.home-page .top-menu-bar .mobile-nav-panel {
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  background:
    radial-gradient(circle at 80% 0%, rgba(99, 102, 241, 0.22), transparent 36%),
    linear-gradient(180deg, rgba(26, 34, 74, 0.86), rgba(16, 22, 54, 0.82));
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  backdrop-filter: blur(26px) saturate(1.3);
}

html[data-theme="glass"] body.home-page .top-menu-bar .dropdown-label {
  color: rgba(255, 255, 255, 0.66);
}

html[data-theme="glass"] body.home-page .top-menu-bar .dropdown-divider {
  background: rgba(255, 255, 255, 0.16);
}

html[data-theme="glass"] body.home-page .top-menu-bar .dropdown-link-danger {
  color: #ffb4c0;
}

/* account-avatar / dropdown-link-strong keep Glass's indigo from the main block. */

html[data-theme="glass"] body.home-page .top-menu-bar .theme-select,
html[data-theme="glass"] body.home-page .top-menu-bar .language-select {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(20, 28, 64, 0.85);
  color-scheme: dark;
}

/* ════════════════════════════════════════════════════════════
   NOIR — photographic backgrounds, mapped per page.
   • main/default pages → gold silk ribbons (dark centre for content)
   • contact page       → gold chevron frame
   • login page         → atmospheric gold dust
   A soft obsidian scrim keeps the dark panels and cream text legible
   while the gold detail still reads. High specificity + end-of-file
   order so these beat the luxury obsidian-gradient body rules above.
   ════════════════════════════════════════════════════════════ */
html[data-theme="noir"] body:not(.login-page):not(.contact-page) {
  background-color: #050403;
  background-image:
    linear-gradient(180deg, rgba(8, 6, 3, 0.42) 0%, rgba(5, 4, 3, 0.58) 100%),
    url("../img/noir-main.c9a378c1980f.jpg");
  background-image:
    linear-gradient(180deg, rgba(8, 6, 3, 0.42) 0%, rgba(5, 4, 3, 0.58) 100%),
    image-set(url("../img/noir-main.2acf4d7c7d9d.webp") type("image/webp"), url("../img/noir-main.c9a378c1980f.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

html[data-theme="noir"] body.contact-page {
  background-color: #050403;
  background-image:
    linear-gradient(180deg, rgba(8, 6, 3, 0.40) 0%, rgba(5, 4, 3, 0.56) 100%),
    url("../img/noir-contact.9d4fb1e75da2.jpg");
  background-image:
    linear-gradient(180deg, rgba(8, 6, 3, 0.40) 0%, rgba(5, 4, 3, 0.56) 100%),
    image-set(url("../img/noir-contact.a7196d957eaa.webp") type("image/webp"), url("../img/noir-contact.9d4fb1e75da2.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

html[data-theme="noir"] body.login-page {
  background-color: #050403;
  background-image:
    linear-gradient(180deg, rgba(5, 4, 3, 0.52) 0%, rgba(5, 4, 3, 0.40) 55%, rgba(5, 4, 3, 0.58) 100%),
    url("../img/noir-login.89f5a36c815c.jpg");
  background-image:
    linear-gradient(180deg, rgba(5, 4, 3, 0.52) 0%, rgba(5, 4, 3, 0.40) 55%, rgba(5, 4, 3, 0.58) 100%),
    image-set(url("../img/noir-login.650c16c8566f.webp") type("image/webp"), url("../img/noir-login.89f5a36c815c.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Pin the backdrop on capable, non-touch viewports. */
@media (min-width: 900px) and (hover: hover) {
  html[data-theme="noir"] body:not(.login-page):not(.contact-page),
  html[data-theme="noir"] body.contact-page,
  html[data-theme="noir"] body.login-page {
    background-attachment: fixed;
  }
}

/* Mobile: let the content containers fall back to transparent so the body
   photo shows (it scrolls here rather than fixing). */
@media (max-width: 540px) {
  html[data-theme="noir"] main:not(.top-menu-bar),
  html[data-theme="noir"] .page-main,
  html[data-theme="noir"] .home-page main:not(.top-menu-bar),
  html[data-theme="noir"] .home-page .page-main {
    background: transparent;
  }
}

/* ════════════════════════════════════════════════════════════
   CLAY THEME — claymorphism. Opaque pastel surfaces that look
   soft-extruded ("puffy") via a coloured outer drop + light/dark
   insets, generous radii, no translucency. Scoped to
   body:not(.login-page) at end-of-file so it outranks the default
   (Noir) body block and re-declares the palette.
   ════════════════════════════════════════════════════════════ */
html[data-theme="clay"] {
  background: #f1e4ea;
}

html[data-theme="clay"] body:not(.login-page) {
  --bg: #f1e4ea;
  --surface: #faf0f4;
  --surface-strong: #fdf7f9;
  --surface-dark: #ecd9e1;
  --surface-dark-2: #e3ccd6;
  --ink: #4a2740;
  --muted: #8a6079;
  --line: #f0d8e2;
  --line-strong: #ffffff;
  --blue: #5b8def;
  --blue-deep: #3a64c4;
  --green: #1fb89a;
  --green-deep: #138a73;
  --sky: #eef1fe;
  --mint: #e3f6f1;
  --red: #ff6b81;
  --success: #16a34a;
  --background: #f1e4ea;
  --foreground: #4a2740;
  --card: #faf0f4;
  --card-foreground: #4a2740;
  --primary: #e8568f;
  --primary-foreground: #ffffff;
  --secondary: #1fb89a;
  --accent: #e8568f;
  --border: #f0d8e2;
  --muted-foreground: #8a6079;
  --gradient-start: #faeaf1;
  --gradient-end: #fdecf3;
  color: var(--foreground);
  background-color: #d94f86;
  background-image:
    linear-gradient(160deg, rgba(255, 246, 250, 0.42) 0%, rgba(255, 238, 247, 0.32) 100%),
    url("../img/clay-bg.86e1b6062d4f.jpg");
  background-image:
    linear-gradient(160deg, rgba(255, 246, 250, 0.42) 0%, rgba(255, 238, 247, 0.32) 100%),
    image-set(url("../img/clay-bg.400981ca1deb.webp") type("image/webp"), url("../img/clay-bg.86e1b6062d4f.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 900px) and (hover: hover) {
  html[data-theme="clay"] body:not(.login-page) {
    background-attachment: fixed;
  }
}

html[data-theme="clay"] body:not(.login-page)::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 32%, rgba(255, 255, 255, 0.18) 56%, transparent 80%);
  opacity: 0.5;
}

html[data-theme="clay"] body:not(.login-page) a {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .page-grid {
  opacity: 0.10;
  background-image:
    linear-gradient(rgba(232, 86, 143, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 86, 143, 0.08) 1px, transparent 1px);
}

/* ── Chrome: header, footer, nav (puffy clay) ── */
html[data-theme="clay"] body:not(.login-page) .site-footer {
  border: 1px solid #ffffff;
  border-radius: 26px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .brand,
html[data-theme="clay"] body:not(.login-page) .site-nav a,
html[data-theme="clay"] body:not(.login-page) .link-button,
html[data-theme="clay"] body:not(.login-page) .site-footer,
html[data-theme="clay"] body:not(.login-page) .site-footer a {
  color: #4a2740;
}

html[data-theme="clay"] body:not(.login-page) .brand-name,
html[data-theme="clay"] body:not(.login-page) .feature-banner h2,
html[data-theme="clay"] body:not(.login-page) .panel h2,
html[data-theme="clay"] body:not(.login-page) .price-card h2,
html[data-theme="clay"] body:not(.login-page) .section-grid h3,
html[data-theme="clay"] body:not(.login-page) .timeline-grid h3 {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .site-nav {
  border: none;
  border-radius: 18px;
  background: #f1dfe8;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.4), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

html[data-theme="clay"] body:not(.login-page) .site-nav a::after,
html[data-theme="clay"] body:not(.login-page) .section-grid article::before,
html[data-theme="clay"] body:not(.login-page) .price-card::before {
  background: linear-gradient(90deg, #e8568f, #ff8aa6, #2bc7a6);
}

html[data-theme="clay"] body:not(.login-page) .site-nav a:hover,
html[data-theme="clay"] body:not(.login-page) .site-nav a:focus-visible,
html[data-theme="clay"] body:not(.login-page) .link-button:hover,
html[data-theme="clay"] body:not(.login-page) .link-button:focus-visible {
  background: rgba(232, 86, 143, 0.12);
}

/* ── Primary actions: puffy clay button ── */
html[data-theme="clay"] body:not(.login-page) .button.primary,
html[data-theme="clay"] body:not(.login-page) .nav-cta,
html[data-theme="clay"] body:not(.login-page) .site-nav a.nav-account-settings {
  color: #ffffff;
  border: none;
  border-radius: 16px;
  background: linear-gradient(145deg, #ee6fa0 0%, #e8568f 50%, #cf3f78 100%);
  box-shadow:
    8px 10px 20px rgba(207, 63, 120, 0.40),
    -5px -6px 14px rgba(255, 255, 255, 0.55),
    inset 2px 2px 5px rgba(255, 255, 255, 0.45),
    inset -3px -4px 8px rgba(175, 45, 100, 0.55);
}

html[data-theme="clay"] body:not(.login-page) .button.primary:hover,
html[data-theme="clay"] body:not(.login-page) .nav-cta:hover {
  transform: translateY(-3px);
}

html[data-theme="clay"] body:not(.login-page) .button.primary:active,
html[data-theme="clay"] body:not(.login-page) .nav-cta:active {
  transform: translateY(1px);
  box-shadow:
    inset 4px 4px 10px rgba(175, 45, 100, 0.6),
    inset -3px -3px 8px rgba(255, 255, 255, 0.35);
}

html[data-theme="clay"] body:not(.login-page) .site-nav a.nav-logout {
  color: #c2334a;
  border: none;
  border-radius: 14px;
  background: #f6dde2;
  box-shadow: inset 2px 2px 5px rgba(194, 51, 74, 0.18), inset -2px -2px 5px rgba(255, 255, 255, 0.8);
}

html[data-theme="clay"] body:not(.login-page) .site-nav a.nav-logout:hover,
html[data-theme="clay"] body:not(.login-page) .site-nav a.nav-logout:focus-visible {
  color: #ffffff;
  background: #ff6b81;
}

html[data-theme="clay"] body:not(.login-page) .button.secondary,
html[data-theme="clay"] body:not(.login-page) .button.secondary.light {
  color: #7a4060;
  border: none;
  border-radius: 16px;
  background: linear-gradient(145deg, #fcf1f6, #f1dde8);
  box-shadow: var(--shadow-lift);
}

html[data-theme="clay"] body:not(.login-page) .button:focus-visible,
html[data-theme="clay"] body:not(.login-page) .nav-cta:focus-visible,
html[data-theme="clay"] body:not(.login-page) .tab-nav a:focus-visible,
html[data-theme="clay"] body:not(.login-page) a:focus-visible,
html[data-theme="clay"] body:not(.login-page) input:focus-visible,
html[data-theme="clay"] body:not(.login-page) select:focus-visible,
html[data-theme="clay"] body:not(.login-page) textarea:focus-visible,
html[data-theme="clay"] body:not(.login-page) button:focus-visible {
  outline-color: rgba(232, 86, 143, 0.55);
}

/* ── Core surfaces: puffy clay cards ── */
html[data-theme="clay"] body:not(.login-page) .hero,
html[data-theme="clay"] body:not(.login-page) .band,
html[data-theme="clay"] body:not(.login-page) .workflow,
html[data-theme="clay"] body:not(.login-page) .page-hero,
html[data-theme="clay"] body:not(.login-page) .dashboard-head,
html[data-theme="clay"] body:not(.login-page) .section-grid article,
html[data-theme="clay"] body:not(.login-page) .panel,
html[data-theme="clay"] body:not(.login-page) .price-card,
html[data-theme="clay"] body:not(.login-page) .limit-card,
html[data-theme="clay"] body:not(.login-page) .feature-status,
html[data-theme="clay"] body:not(.login-page) .table-panel,
html[data-theme="clay"] body:not(.login-page) .filter-bar,
html[data-theme="clay"] body:not(.login-page) .result-card,
html[data-theme="clay"] body:not(.login-page) .metric-grid article,
html[data-theme="clay"] body:not(.login-page) .timeline-grid article {
  border: 1px solid #ffffff;
  border-radius: 28px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .hero,
html[data-theme="clay"] body:not(.login-page) .page-hero,
html[data-theme="clay"] body:not(.login-page) .dashboard-head {
  background:
    radial-gradient(circle at 88% 8%, rgba(240, 130, 178, 0.22), transparent 36%),
    radial-gradient(circle at 6% 92%, rgba(64, 220, 200, 0.18), transparent 38%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
}

html[data-theme="clay"] body:not(.login-page) .band,
html[data-theme="clay"] body:not(.login-page) .workflow {
  background: linear-gradient(145deg, #fcf0f5, #f4e0ea);
}

html[data-theme="clay"] body:not(.login-page) .page-hero::before,
html[data-theme="clay"] body:not(.login-page) .dashboard-head::before,
html[data-theme="clay"] body:not(.login-page) .band::before,
html[data-theme="clay"] body:not(.login-page) .workflow::before {
  background: linear-gradient(90deg, rgba(240, 130, 178, 0.14), transparent 40%);
  opacity: 0.5;
}

/* ── Type colours ── */
html[data-theme="clay"] body:not(.login-page) .hero-copy h1,
html[data-theme="clay"] body:not(.login-page) .page-hero h1,
html[data-theme="clay"] body:not(.login-page) .dashboard-head h1,
html[data-theme="clay"] body:not(.login-page) .auth-story h1,
html[data-theme="clay"] body:not(.login-page) .summary-heading h2,
html[data-theme="clay"] body:not(.login-page) .section-intro h2,
html[data-theme="clay"] body:not(.login-page) strong,
html[data-theme="clay"] body:not(.login-page) h1,
html[data-theme="clay"] body:not(.login-page) h2,
html[data-theme="clay"] body:not(.login-page) h3,
html[data-theme="clay"] body:not(.login-page) label,
html[data-theme="clay"] body:not(.login-page) td {
  color: #4a2740;
}

html[data-theme="clay"] body:not(.login-page) .hero-copy p,
html[data-theme="clay"] body:not(.login-page) .page-hero p,
html[data-theme="clay"] body:not(.login-page) .dashboard-subtitle,
html[data-theme="clay"] body:not(.login-page) .section-intro p,
html[data-theme="clay"] body:not(.login-page) .feature-banner p:last-child,
html[data-theme="clay"] body:not(.login-page) .auth-story p,
html[data-theme="clay"] body:not(.login-page) .invite-intro,
html[data-theme="clay"] body:not(.login-page) p,
html[data-theme="clay"] body:not(.login-page) .metric-grid p,
html[data-theme="clay"] body:not(.login-page) .helptext,
html[data-theme="clay"] body:not(.login-page) small,
html[data-theme="clay"] body:not(.login-page) .list-row span,
html[data-theme="clay"] body:not(.login-page) .guest-summary span,
html[data-theme="clay"] body:not(.login-page) th {
  color: var(--muted);
}

html[data-theme="clay"] body:not(.login-page) .eyebrow,
html[data-theme="clay"] body:not(.login-page) .small-label,
html[data-theme="clay"] body:not(.login-page) .hero-copy .eyebrow,
html[data-theme="clay"] body:not(.login-page) .page-hero > .eyebrow,
html[data-theme="clay"] body:not(.login-page) .dashboard-head .eyebrow,
html[data-theme="clay"] body:not(.login-page) .pricing-note .eyebrow,
html[data-theme="clay"] body:not(.login-page) .feature-banner .eyebrow,
html[data-theme="clay"] body:not(.login-page) .auth-form .eyebrow {
  color: #cf3f78;
  background: transparent;
}

html[data-theme="clay"] body:not(.login-page) .price,
html[data-theme="clay"] body:not(.login-page) .metric-grid span,
html[data-theme="clay"] body:not(.login-page) .limit-card strong {
  color: #cf3f78;
}

/* ── Accent chips, badges, icons (small puffy) ── */
html[data-theme="clay"] body:not(.login-page) .badge,
html[data-theme="clay"] body:not(.login-page) .price-badge,
html[data-theme="clay"] body:not(.login-page) .status-chip,
html[data-theme="clay"] body:not(.login-page) .feature-icon,
html[data-theme="clay"] body:not(.login-page) .timeline-grid span,
html[data-theme="clay"] body:not(.login-page) .required-marker,
html[data-theme="clay"] body:not(.login-page) p:has(.tz-phone-input)::before,
html[data-theme="clay"] body:not(.login-page) .form-field:has(.tz-phone-input)::before {
  color: #ffffff;
  border: none;
  background: linear-gradient(145deg, #f08bb2, #e8568f);
  box-shadow: 3px 4px 10px rgba(207, 63, 120, 0.34), inset 1px 1px 3px rgba(255, 255, 255, 0.5);
}

html[data-theme="clay"] body:not(.login-page) .feature-banner,
html[data-theme="clay"] body:not(.login-page) .list-row,
html[data-theme="clay"] body:not(.login-page) .tab-nav a {
  border: 1px solid #ffffff;
  border-radius: 18px;
  background: linear-gradient(145deg, #fcf0f5, #f5e1ea);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) #id_package label {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 18px;
  background: linear-gradient(145deg, #fcf0f5, #f5e1ea);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) #id_package label:has(input:checked),
html[data-theme="clay"] body:not(.login-page) .limit-card {
  border-color: rgba(232, 86, 143, 0.4);
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 86, 143, 0.16), transparent 36%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
}

html[data-theme="clay"] body:not(.login-page) #id_package label:has(input:checked) {
  color: #3c1f33;
  box-shadow: var(--shadow-lift);
}

html[data-theme="clay"] body:not(.login-page) #id_package input {
  accent-color: #e8568f;
}

html[data-theme="clay"] body:not(.login-page) .feature-status.included {
  border-color: rgba(31, 184, 154, 0.32);
  background: #d8f5ee;
}

html[data-theme="clay"] body:not(.login-page) .feature-status.locked {
  border-color: rgba(255, 107, 129, 0.3);
  background: #fde2e7;
}

html[data-theme="clay"] body:not(.login-page) .feature-status.included span {
  color: #ffffff;
  background: #1fb89a;
}

html[data-theme="clay"] body:not(.login-page) .feature-status.locked span {
  color: #ffffff;
  background: #ff6b81;
}

/* ── Form controls: recessed (pressed-in) clay ── */
html[data-theme="clay"] body:not(.login-page) input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="clay"] body:not(.login-page) select,
html[data-theme="clay"] body:not(.login-page) textarea {
  color: #4a2740;
  -webkit-text-fill-color: #4a2740;
  border: none;
  border-radius: 14px;
  background: #f3e1ea;
  box-shadow: inset 4px 4px 9px rgba(200, 140, 170, 0.45), inset -4px -4px 9px rgba(255, 255, 255, 0.92);
}

html[data-theme="clay"] body:not(.login-page) input::placeholder,
html[data-theme="clay"] body:not(.login-page) textarea::placeholder {
  color: rgba(138, 96, 121, 0.72);
  -webkit-text-fill-color: rgba(138, 96, 121, 0.72);
}

html[data-theme="clay"] body:not(.login-page) input:not([type="radio"]):not([type="checkbox"]):hover,
html[data-theme="clay"] body:not(.login-page) select:hover,
html[data-theme="clay"] body:not(.login-page) textarea:hover,
html[data-theme="clay"] body:not(.login-page) input:not([type="radio"]):not([type="checkbox"]):focus-visible,
html[data-theme="clay"] body:not(.login-page) select:focus-visible,
html[data-theme="clay"] body:not(.login-page) textarea:focus-visible {
  box-shadow: inset 4px 4px 9px rgba(200, 140, 170, 0.5), inset -4px -4px 9px rgba(255, 255, 255, 0.95), 0 0 0 4px rgba(232, 86, 143, 0.18);
}

/* ── Tables, code, messages ── */
html[data-theme="clay"] body:not(.login-page) th,
html[data-theme="clay"] body:not(.login-page) td {
  border-bottom-color: rgba(232, 86, 143, 0.16);
}

html[data-theme="clay"] body:not(.login-page) th {
  background: linear-gradient(90deg, rgba(232, 86, 143, 0.12), rgba(255, 255, 255, 0.3));
}

html[data-theme="clay"] body:not(.login-page) tbody tr:hover td,
html[data-theme="clay"] body:not(.login-page) code {
  background: rgba(232, 86, 143, 0.1);
}

html[data-theme="clay"] body:not(.login-page) code {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .message {
  color: #0f6b51;
  border: none;
  border-radius: 16px;
  background: #d8f5ee;
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .form-error-summary {
  color: #c2334a;
  border: none;
  border-radius: 16px;
  background: #fde2e7;
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .form-error-summary strong,
html[data-theme="clay"] body:not(.login-page) .form-error-summary p {
  color: #c2334a;
}

html[data-theme="clay"] body:not(.login-page) .result-card.success {
  border-color: rgba(31, 184, 154, 0.34);
  background: #dcf6ef;
}

html[data-theme="clay"] body:not(.login-page) .result-card.warning {
  border-color: rgba(255, 107, 129, 0.34);
  background: #fde4e9;
}

/* ── Settings + account surfaces ── */
html[data-theme="clay"] body:not(.login-page) .settings-menu-button,
html[data-theme="clay"] body:not(.login-page) .settings-section-card,
html[data-theme="clay"] body:not(.login-page) .settings-detail-card,
html[data-theme="clay"] body:not(.login-page) .settings-password-row,
html[data-theme="clay"] body:not(.login-page) .settings-toggle-row,
html[data-theme="clay"] body:not(.login-page) .device-card {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 86, 143, 0.12), transparent 36%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .settings-menu-button:hover,
html[data-theme="clay"] body:not(.login-page) .settings-menu-button:focus-visible {
  box-shadow: var(--shadow-lift);
}

html[data-theme="clay"] body:not(.login-page) .settings-menu-button strong,
html[data-theme="clay"] body:not(.login-page) .settings-section-heading h1,
html[data-theme="clay"] body:not(.login-page) .logout-card h1 {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .settings-menu-button span,
html[data-theme="clay"] body:not(.login-page) .settings-section-heading p,
html[data-theme="clay"] body:not(.login-page) .logout-copy,
html[data-theme="clay"] body:not(.login-page) .settings-password-row small,
html[data-theme="clay"] body:not(.login-page) .settings-toggle-row small,
html[data-theme="clay"] body:not(.login-page) .device-card small {
  color: var(--muted);
}

html[data-theme="clay"] body:not(.login-page) .settings-avatar,
html[data-theme="clay"] body:not(.login-page) .settings-section-icon,
html[data-theme="clay"] body:not(.login-page) .status-pill {
  color: #ffffff;
  border: none;
  background: linear-gradient(145deg, #f08bb2, #e8568f);
  box-shadow: 4px 5px 12px rgba(207, 63, 120, 0.34), inset 1px 1px 3px rgba(255, 255, 255, 0.5);
}

/* ── Auth + showcase ── */
html[data-theme="clay"] body:not(.login-page) .auth-story {
  border: 1px solid #ffffff;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(232, 86, 143, 0.18), transparent 40%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .auth-points span,
html[data-theme="clay"] body:not(.login-page) .hero-points span,
html[data-theme="clay"] body:not(.login-page) .hero-note {
  color: #4a2740;
  border: none;
  border-radius: 14px;
  background: #f9e7f0;
  box-shadow: inset 2px 2px 5px rgba(200, 140, 170, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.85);
}

html[data-theme="clay"] body:not(.login-page) .showcase-frame {
  background: linear-gradient(145deg, #fbc2da 0%, #f593ba 46%, #e8568f 100%);
}

html[data-theme="clay"] body:not(.login-page) .showcase-card {
  border: 1px solid #ffffff;
  border-radius: 24px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

/* ── Video hero (kept rich for legible overlay text) ── */
html[data-theme="clay"] body:not(.login-page) .video-hero {
  color: #ffffff;
  background:
    radial-gradient(circle at 18% 18%, rgba(240, 130, 178, 0.5), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(255, 138, 166, 0.4), transparent 30%),
    linear-gradient(140deg, #6e2d52 0%, #a23a72 48%, #4a1a36 100%);
}

html[data-theme="clay"] body:not(.login-page) .video-hero .eyebrow,
html[data-theme="clay"] body:not(.login-page) .video-hero h1,
html[data-theme="clay"] body:not(.login-page) .video-hero-content > p:not(.eyebrow) {
  color: #ffffff;
}

html[data-theme="clay"] body:not(.login-page) .video-hero .button.secondary.light {
  color: #ffffff;
  border: none;
  background: rgba(150, 58, 108, 0.5);
}

html[data-theme="clay"] body:not(.login-page) .video-hero-overlay {
  background:
    linear-gradient(180deg, rgba(82, 26, 56, 0.62) 0%, rgba(82, 26, 56, 0.28) 42%, rgba(82, 26, 56, 0.7) 100%),
    linear-gradient(90deg, rgba(82, 26, 56, 0.48), rgba(82, 26, 56, 0.06) 50%, rgba(82, 26, 56, 0.46));
}

/* ── Home summary band ── */
html[data-theme="clay"] body:not(.login-page) .home-summary {
  color: #ffffff;
  background:
    radial-gradient(circle at 10% 0%, rgba(245, 158, 196, 0.32), transparent 30%),
    linear-gradient(180deg, #6e2d52, #a23a72);
}

html[data-theme="clay"] body:not(.login-page) .home-summary h2,
html[data-theme="clay"] body:not(.login-page) .home-summary h3,
html[data-theme="clay"] body:not(.login-page) .home-summary strong {
  color: #ffffff;
}

html[data-theme="clay"] body:not(.login-page) .summary-list,
html[data-theme="clay"] body:not(.login-page) .summary-list article {
  border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="clay"] body:not(.login-page) .summary-list p,
html[data-theme="clay"] body:not(.login-page) .summary-list span,
html[data-theme="clay"] body:not(.login-page) .home-summary .eyebrow {
  color: rgba(255, 255, 255, 0.8);
}

/* ── Preference selects (recessed clay) ── */
html[data-theme="clay"] body:not(.login-page) .theme-select,
html[data-theme="clay"] body:not(.login-page) .language-select {
  color: #4a2740;
  -webkit-text-fill-color: #4a2740;
  border: none;
  border-radius: 12px;
  background: #f3e1ea;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.42), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

/* ════════════════════════════════════════════════════════════
   CLAY — navigation (top menu bar, account dropdown, mobile nav).
   Puffy pastel clay; opaque so it reads over content and the video.
   ════════════════════════════════════════════════════════════ */
html[data-theme="clay"] body:not(.login-page) .top-menu-bar {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 22px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .brand,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .desktop-nav a,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .dropdown-link,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .mobile-nav-links a,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .mobile-logout,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .nav-preference {
  color: #4a2740;
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .brand-name {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .desktop-nav {
  border: none;
  background: #f1dfe8;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.38), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .account-trigger,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .mobile-menu-trigger {
  color: #4a2740;
  border: none;
  border-radius: 13px;
  background: linear-gradient(145deg, #fcf0f5, #f1dde8);
  box-shadow: 5px 6px 14px rgba(182, 110, 145, 0.26), -4px -5px 12px rgba(255, 255, 255, 0.75), inset 1px 1px 3px rgba(255, 255, 255, 0.7);
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .desktop-nav a:hover,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .desktop-nav a:focus-visible,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .dropdown-link:hover,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .dropdown-link:focus-visible {
  background: rgba(232, 86, 143, 0.14);
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .account-avatar,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .dropdown-link-strong {
  color: #ffffff;
  border: none;
  background: linear-gradient(145deg, #f08bb2, #e8568f);
  box-shadow: 3px 4px 9px rgba(207, 63, 120, 0.32), inset 1px 1px 3px rgba(255, 255, 255, 0.5);
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .account-dropdown,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .mobile-nav-panel {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 22px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow);
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .dropdown-label {
  color: #8a6079;
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .dropdown-divider {
  background: rgba(232, 86, 143, 0.2);
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .dropdown-link-danger {
  color: #c2334a;
}

html[data-theme="clay"] body:not(.login-page) .top-menu-bar .theme-select,
html[data-theme="clay"] body:not(.login-page) .top-menu-bar .language-select {
  color: #4a2740;
  -webkit-text-fill-color: #4a2740;
  border: none;
  border-radius: 12px;
  background: #f3e1ea;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.42), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

/* Home page: clay is opaque, so the same puffy pastel nav reads over the
   video. Re-assert with doubled specificity to beat the shared gold
   cinematic home nav + inline critical CSS. */
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 22px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .brand,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .desktop-nav a,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .dropdown-link,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .mobile-nav-links a,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .mobile-logout,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .nav-preference {
  color: #4a2740;
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .brand-name {
  color: #cf3f78;
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .desktop-nav {
  border: none;
  background: #f1dfe8;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.38), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .account-trigger,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .mobile-menu-trigger {
  color: #4a2740;
  border: none;
  background: linear-gradient(145deg, #fcf0f5, #f1dde8);
  box-shadow: 5px 6px 14px rgba(182, 110, 145, 0.26), -4px -5px 12px rgba(255, 255, 255, 0.75), inset 1px 1px 3px rgba(255, 255, 255, 0.7);
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .account-dropdown,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .mobile-nav-panel {
  color: #4a2740;
  border: 1px solid #ffffff;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow);
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .dropdown-label {
  color: #8a6079;
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .dropdown-divider {
  background: rgba(232, 86, 143, 0.2);
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .dropdown-link-danger {
  color: #c2334a;
}

html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .theme-select,
html[data-theme="clay"] body.home-page .top-menu-bar.top-menu-bar .language-select {
  color: #4a2740;
  -webkit-text-fill-color: #4a2740;
  border: none;
  background: #f3e1ea;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.42), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

/* ════════════════════════════════════════════════════════════
   CLAY — login page. The login body re-declares the palette to
   Noir by default, so Clay needs its own override.
   ════════════════════════════════════════════════════════════ */
html[data-theme="clay"] body.login-page {
  --bg: #f1e4ea;
  --surface: #faf0f4;
  --surface-strong: #fdf7f9;
  --ink: #4a2740;
  --muted: #8a6079;
  --line: #f0d8e2;
  --blue: #5b8def;
  --green: #1fb89a;
  --red: #ff6b81;
  --success: #16a34a;
  --background: #f1e4ea;
  --foreground: #4a2740;
  --card: #faf0f4;
  --card-foreground: #4a2740;
  --primary: #e8568f;
  --primary-foreground: #ffffff;
  --secondary: #1fb89a;
  --accent: #e8568f;
  --border: #f0d8e2;
  --muted-foreground: #8a6079;
  --gradient-start: #faeaf1;
  --gradient-end: #fdecf3;
  color: var(--foreground);
  background-color: #d94f86;
  background-image:
    linear-gradient(160deg, rgba(255, 246, 250, 0.42) 0%, rgba(255, 238, 247, 0.32) 100%),
    url("../img/clay-bg.86e1b6062d4f.jpg");
  background-image:
    linear-gradient(160deg, rgba(255, 246, 250, 0.42) 0%, rgba(255, 238, 247, 0.32) 100%),
    image-set(url("../img/clay-bg.400981ca1deb.webp") type("image/webp"), url("../img/clay-bg.86e1b6062d4f.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 900px) and (hover: hover) {
  html[data-theme="clay"] body.login-page {
    background-attachment: fixed;
  }
}

html[data-theme="clay"] body.login-page::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 32%, rgba(255, 255, 255, 0.18) 56%, transparent 80%);
  opacity: 0.5;
}

html[data-theme="clay"] body.login-page a {
  color: #cf3f78;
}

html[data-theme="clay"] body.login-page .top-menu-bar {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 22px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body.login-page .top-menu-bar .brand,
html[data-theme="clay"] body.login-page .top-menu-bar .desktop-nav a,
html[data-theme="clay"] body.login-page .top-menu-bar .dropdown-link,
html[data-theme="clay"] body.login-page .top-menu-bar .mobile-nav-links a,
html[data-theme="clay"] body.login-page .top-menu-bar .nav-preference {
  color: #4a2740;
}

html[data-theme="clay"] body.login-page .top-menu-bar .brand-name {
  color: #cf3f78;
}

html[data-theme="clay"] body.login-page .top-menu-bar .desktop-nav,
html[data-theme="clay"] body.login-page .top-menu-bar .account-trigger,
html[data-theme="clay"] body.login-page .top-menu-bar .mobile-menu-trigger {
  color: #4a2740;
  border: none;
  background: linear-gradient(145deg, #fcf0f5, #f1dde8);
  box-shadow: 5px 6px 14px rgba(182, 110, 145, 0.24), -4px -5px 12px rgba(255, 255, 255, 0.72), inset 1px 1px 3px rgba(255, 255, 255, 0.7);
}

html[data-theme="clay"] body.login-page .top-menu-bar .account-avatar,
html[data-theme="clay"] body.login-page .top-menu-bar .dropdown-link-strong {
  color: #ffffff;
  background: linear-gradient(145deg, #f08bb2, #e8568f);
}

html[data-theme="clay"] body.login-page .top-menu-bar .account-dropdown,
html[data-theme="clay"] body.login-page .top-menu-bar .mobile-nav-panel {
  color: #4a2740;
  border: 1px solid #ffffff;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow);
}

html[data-theme="clay"] body.login-page .top-menu-bar .theme-select,
html[data-theme="clay"] body.login-page .top-menu-bar .language-select {
  color: #4a2740;
  -webkit-text-fill-color: #4a2740;
  border: none;
  background: #f3e1ea;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.42), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

html[data-theme="clay"] body.login-page .site-footer {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 24px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body.login-page .site-footer a,
html[data-theme="clay"] body.login-page .site-footer p {
  color: #8a6079;
}

html[data-theme="clay"] body.login-page .login-auth-shell {
  color: #4a2740;
}

html[data-theme="clay"] body.login-page .auth-form {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 86, 143, 0.16), transparent 36%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow);
}

html[data-theme="clay"] body.login-page .auth-form h2,
html[data-theme="clay"] body.login-page .auth-form label {
  color: #4a2740;
}

html[data-theme="clay"] body.login-page .auth-form p {
  color: #8a6079;
}

html[data-theme="clay"] body.login-page .login-eyebrow {
  color: #cf3f78;
  border: none;
  background: #f6e1ed;
  box-shadow: inset 2px 2px 5px rgba(200, 140, 170, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.85);
}

html[data-theme="clay"] body.login-page input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="clay"] body.login-page select,
html[data-theme="clay"] body.login-page textarea,
html[data-theme="clay"] body.login-page .auth-form input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="clay"] body.login-page .auth-form select,
html[data-theme="clay"] body.login-page .auth-form textarea {
  color: #4a2740;
  -webkit-text-fill-color: #4a2740;
  caret-color: #e8568f;
  border: none;
  border-radius: 14px;
  background: #f3e1ea;
  box-shadow: inset 4px 4px 9px rgba(200, 140, 170, 0.45), inset -4px -4px 9px rgba(255, 255, 255, 0.92);
  color-scheme: light;
}

html[data-theme="clay"] body.login-page input::placeholder,
html[data-theme="clay"] body.login-page textarea::placeholder {
  color: rgba(138, 96, 121, 0.72);
  -webkit-text-fill-color: rgba(138, 96, 121, 0.72);
}

html[data-theme="clay"] body.login-page input:-webkit-autofill,
html[data-theme="clay"] body.login-page input:-webkit-autofill:hover,
html[data-theme="clay"] body.login-page input:-webkit-autofill:focus {
  -webkit-text-fill-color: #4a2740;
  -webkit-box-shadow: 0 0 0 1000px #f3e1ea inset;
  caret-color: #e8568f;
}

html[data-theme="clay"] body.login-page .button.primary {
  color: #ffffff;
  border: none;
  border-radius: 16px;
  background: linear-gradient(145deg, #ee6fa0 0%, #e8568f 50%, #cf3f78 100%);
  box-shadow:
    8px 10px 20px rgba(207, 63, 120, 0.40),
    -5px -6px 14px rgba(255, 255, 255, 0.5),
    inset 2px 2px 5px rgba(255, 255, 255, 0.45),
    inset -3px -4px 8px rgba(175, 45, 100, 0.55);
}

html[data-theme="clay"] body.login-page .message {
  color: #0f6b51;
  border: none;
  border-radius: 16px;
  background: #d8f5ee;
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body.login-page .errorlist {
  color: #c2334a;
  border: none;
  border-radius: 16px;
  background: #fde2e7;
  box-shadow: var(--shadow-soft);
}

/* ════════════════════════════════════════════════════════════
   CLAY — secondary page surfaces (cookie banner, about, feedback,
   RSVP, payment, scanner) so no Noir leaks through.
   ════════════════════════════════════════════════════════════ */

/* Cookie consent */
html[data-theme="clay"] .cookie-consent-card {
  color: #4a2740;
  border: 1px solid #ffffff;
  border-radius: 20px;
  background:
    radial-gradient(circle at 96% 0%, rgba(232, 86, 143, 0.16), transparent 32%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] .cookie-consent-copy h2 {
  color: #cf3f78;
}

html[data-theme="clay"] .cookie-consent-copy p:last-child,
html[data-theme="clay"] .cookie-option small {
  color: #8a6079;
}

html[data-theme="clay"] .cookie-consent-details {
  border-color: rgba(232, 86, 143, 0.2);
}

html[data-theme="clay"] .cookie-consent-details summary {
  color: #cf3f78;
}

html[data-theme="clay"] .cookie-consent-details summary::after {
  border-color: rgba(232, 86, 143, 0.3);
}

html[data-theme="clay"] .cookie-option {
  border: none;
  border-radius: 16px;
  background: #f7e6ee;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.36), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

html[data-theme="clay"] .cookie-option.is-essential {
  box-shadow: inset 3px 3px 7px rgba(232, 86, 143, 0.2), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

html[data-theme="clay"] .cookie-option input {
  border: none;
  background: #ecd7e0;
  box-shadow: inset 2px 2px 4px rgba(200, 140, 170, 0.5);
}

html[data-theme="clay"] .cookie-option input:checked {
  background: linear-gradient(145deg, #f08bb2, #e8568f);
  box-shadow: 2px 2px 6px rgba(207, 63, 120, 0.4);
}

html[data-theme="clay"] .cookie-option input:checked::before {
  border-color: #ffffff;
}

html[data-theme="clay"] .cookie-option input:focus-visible {
  outline-color: rgba(232, 86, 143, 0.4);
}

/* About page */
html[data-theme="clay"] body:not(.login-page) .about-brand-card {
  background: transparent;
  box-shadow: none;
}

html[data-theme="clay"] body:not(.login-page) .about-story-intro,
html[data-theme="clay"] body:not(.login-page) .about-columns,
html[data-theme="clay"] body:not(.login-page) .about-workflow-note,
html[data-theme="clay"] body:not(.login-page) .about-founder-note {
  border-color: #ffffff;
}

html[data-theme="clay"] body:not(.login-page) .about-brand-card strong,
html[data-theme="clay"] body:not(.login-page) .about-story-intro h2,
html[data-theme="clay"] body:not(.login-page) .about-mission-grid h3,
html[data-theme="clay"] body:not(.login-page) .about-columns h3,
html[data-theme="clay"] body:not(.login-page) .about-workflow-note span {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .about-mission-grid article::before,
html[data-theme="clay"] body:not(.login-page) .about-columns article::before {
  background: linear-gradient(90deg, #e8568f, #f08bb2);
}

/* Feedback page */
html[data-theme="clay"] body:not(.login-page) .workflow-notice {
  border: none;
  border-radius: 16px;
  background: #f7e6ee;
  box-shadow: inset 2px 2px 6px rgba(200, 140, 170, 0.3), inset -2px -2px 6px rgba(255, 255, 255, 0.85);
}

html[data-theme="clay"] body:not(.login-page) .workflow-notice strong {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .workflow-notice p {
  color: #8a6079;
}

html[data-theme="clay"] body:not(.login-page) .code-block {
  color: #4a2740;
  border: none;
  border-radius: 14px;
  background: #f7e6ee;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.34), inset -3px -3px 7px rgba(255, 255, 255, 0.88);
}

html[data-theme="clay"] body:not(.login-page) .summary-body,
html[data-theme="clay"] body:not(.login-page) .summary-body p {
  color: #4a2740;
}

html[data-theme="clay"] body:not(.login-page) .badge.badge--high,
html[data-theme="clay"] body:not(.login-page) .badge.badge--critical {
  color: #7a271a;
  background: #fee4e2;
  border-color: rgba(180, 35, 24, 0.2);
}

html[data-theme="clay"] body:not(.login-page) .badge.badge--medium {
  color: #92400e;
  background: #fef3c7;
  border-color: rgba(146, 64, 14, 0.2);
}

html[data-theme="clay"] body:not(.login-page) .badge.badge--low {
  color: #054f31;
  background: #d1fadf;
  border-color: rgba(5, 79, 49, 0.2);
}

/* RSVP status (guest-facing) */
html[data-theme="clay"] body:not(.login-page) .rsvp-status-card {
  border: none;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 86, 143, 0.16), transparent 36%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .rsvp-inline-status {
  border: none;
  border-radius: 18px;
  background: #f7e6ee;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.32), inset -3px -3px 7px rgba(255, 255, 255, 0.88);
}

html[data-theme="clay"] body:not(.login-page) .rsvp-inline-status.is-pending {
  background: rgba(232, 86, 143, 0.12);
}

/* Payment + refund */
html[data-theme="clay"] body:not(.login-page) .payment-method-card {
  border: 1px solid #ffffff;
  border-radius: 18px;
  background: linear-gradient(145deg, #fcf0f5, #f5e1ea);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .payment-summary-card,
html[data-theme="clay"] body:not(.login-page) .refund-policy-card,
html[data-theme="clay"] body:not(.login-page) .refund-panel {
  border-color: rgba(232, 86, 143, 0.32);
}

html[data-theme="clay"] body:not(.login-page) .sms-copy-panel summary {
  color: #cf3f78;
}

html[data-theme="clay"] body:not(.login-page) .sms-copy-panel p {
  border: none;
  border-radius: 12px;
  background: #f7e6ee;
  box-shadow: inset 2px 2px 6px rgba(200, 140, 170, 0.3), inset -2px -2px 6px rgba(255, 255, 255, 0.85);
}

html[data-theme="clay"] body:not(.login-page) .danger-button {
  color: #ffffff;
  border: none;
  background: linear-gradient(145deg, #ff8194, #ff6b81);
  box-shadow: 6px 7px 16px rgba(214, 69, 94, 0.34), inset 1px 1px 3px rgba(255, 255, 255, 0.4);
}

/* Scanner / check-in */
html[data-theme="clay"] body:not(.login-page) .scanner-box {
  border: 1px solid #ffffff;
  border-radius: 24px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  box-shadow: var(--shadow-soft);
}

html[data-theme="clay"] body:not(.login-page) .scanner-camera {
  border-color: rgba(232, 86, 143, 0.3);
  background:
    radial-gradient(circle at 50% 42%, rgba(232, 86, 143, 0.18), transparent 28%),
    linear-gradient(145deg, #6e2d52, #a23a72);
}

html[data-theme="clay"] body:not(.login-page) .scanner-camera-placeholder {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(82, 26, 56, 0.42);
}

html[data-theme="clay"] body:not(.login-page) .scanner-camera-placeholder strong {
  color: #ffffff;
}

html[data-theme="clay"] body:not(.login-page) .scanner-camera-placeholder span {
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="clay"] body:not(.login-page) .scanner-live-result {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 86, 143, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(110, 45, 80, 0.94), rgba(82, 26, 56, 0.86));
}

html[data-theme="clay"] body:not(.login-page) .scanner-live-result h3 {
  color: #fff0f7;
}

html[data-theme="clay"] body:not(.login-page) .scanner-live-result p {
  color: rgba(255, 255, 255, 0.86);
}

html[data-theme="clay"] body:not(.login-page) .scanner-live-capacity {
  color: #4a2740;
  background: #f3e0ec;
}

html[data-theme="clay"] body:not(.login-page) .scanner-fallbacks input[type="file"] {
  border: none;
  background: #f7e6ee;
  box-shadow: inset 3px 3px 7px rgba(200, 140, 170, 0.34), inset -3px -3px 7px rgba(255, 255, 255, 0.88);
}

/* Mobile: clay backdrop scrolls; keep containers transparent. */
@media (max-width: 540px) {
  html[data-theme="clay"] main:not(.top-menu-bar),
  html[data-theme="clay"] .page-main,
  html[data-theme="clay"] .home-page main:not(.top-menu-bar),
  html[data-theme="clay"] .home-page .page-main {
    background: transparent;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SPACING & RHYTHM
   Stacked controls need room to read as separate things. Everything
   here works off the --space-* / --field-* scale in :root so the
   vertical rhythm stays consistent across forms, panels and toolbars.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Action rows ────────────────────────────────────────
   .button-row had no base style, so submit/cancel pairs collapsed
   against each other and sat flush under the last field. */
.button-row,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* A bare submit button placed straight after the fields (no wrapper)
   needs the same separation the action row gets. */
.form-shell > button[type="submit"],
.form-shell > .button,
.form-shell > input[type="submit"] {
  margin-top: var(--space-5);
}

/* ...but not when it already sits inside an action row. */
.button-row > .button,
.button-row > button,
.form-actions > .button,
.form-actions > button {
  margin-top: 0;
}

/* The action element owns the separation, so drop the trailing margin
   on the field just above it. Without this the field margin and the
   action margin stack (.button is inline-flex, so they never collapse)
   and forms end up with a much wider gap before the submit button than
   the ones that group their fields in a wrapper.
   Scoped with :has(~ …) so it only fires when the action really is a
   sibling — rows like .rsvp-confirmation-row keep their own rhythm. */
.form-shell .form-field:not(:has(~ .form-field)):has(~ button[type="submit"]),
.form-shell .form-field:not(:has(~ .form-field)):has(~ .button-row),
.form-shell .form-field:not(:has(~ .form-field)):has(~ .form-actions),
.form-shell p:has(+ button[type="submit"]),
.form-shell p:has(+ input[type="submit"]),
.form-shell p:has(+ .button),
.form-shell p:has(+ .button-row) {
  margin-bottom: 0;
}

/* ─── Field internals ────────────────────────────────────
   Help text and errors are grid children of .form-field, so the
   field gap already spaces them. Just give them room to breathe. */
.helptext {
  line-height: 1.5;
}

.form-field > .helptext,
.form-shell p > .helptext {
  margin: 0;
}

/* Keep the default list layout (markers intact) and space the entries
   with margin rather than switching the <ul> to grid. */
.errorlist {
  margin: 0;
  line-height: 1.5;
}

.errorlist li + li {
  margin-top: var(--space-1);
}

/* Checkbox / radio sitting beside its own label reads as one unit. */
.form-field > label > input[type="checkbox"],
.form-field > label > input[type="radio"] {
  margin-right: var(--space-2);
}

/* ─── Form intro block ───────────────────────────────────
   Separate the title/description from the first input. */
.form-shell > h1,
.form-shell > h2 {
  margin-bottom: var(--space-2);
}

/* An eyebrow labels the heading right under it — keep them together. */
.form-shell > .eyebrow {
  margin-bottom: var(--space-1);
}

.form-shell > h1 + .helptext,
.form-shell > h2 + .helptext,
.form-shell > .eyebrow + h1,
.form-shell > .eyebrow + h2 {
  margin-top: 0;
}

.form-shell > .helptext:not(:last-child) {
  display: block;
  margin-bottom: var(--space-5);
}

/* ─── Grouped fields ─────────────────────────────────────
   The two-column guest grid only set a column gap, so its rows were
   spaced by each field's own margin — which left the final row short.
   Own the spacing on the grid instead. */
.guest-form-grid {
  column-gap: var(--space-5);
  row-gap: var(--field-stack);
}

.guest-form-grid > .form-field {
  margin-bottom: 0;
}

/* ─── Toolbars ───────────────────────────────────────────
   Filter controls were 12px apart; give them a touch more so the
   inputs stop reading as one merged block. */
.filter-bar {
  gap: var(--space-4);
}

/* ─── Stacked panels ─────────────────────────────────────
   Consecutive panels in the page flow should not touch. Scoped to
   direct children of .page-main on purpose: .panel is also used as a
   grid item inside .content-grid / .metric-grid, where the container
   gap already handles spacing and a margin would offset the row. */
.page-main > .panel + .panel,
.page-main > .result-card + .result-card,
.page-main > .panel + .auth-shell {
  margin-top: var(--space-5);
}

/* ─── Small screens ──────────────────────────────────────
   Keep the rhythm but reclaim a little horizontal room. */
@media (max-width: 540px) {
  :root {
    --field-stack: 18px;
    --panel-pad: 18px;
  }

  .button-row,
  .form-actions {
    gap: var(--space-2);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTON SIZING
   Buttons should be as wide as their label plus padding — not as wide
   as whatever container they happen to land in. Stretching is kept for
   the cases where it is deliberate: single-action mobile rows and
   full-bleed CTAs.
   ═══════════════════════════════════════════════════════════════════ */

/* A long label wraps to a balanced two-line block instead of forcing a
   very wide button; a short one is unaffected. */
.button,
.nav-cta {
  max-width: 100%;
  text-wrap: balance;
}

/* Action rows lay their buttons out on the content, not the grid. */
.button-row > .button,
.button-row > button,
.form-actions > .button,
.form-actions > button,
.actions > .button,
.actions > button {
  flex: 0 1 auto;
  width: auto;
}

/* Buttons sitting directly in a grid stretch to the track by default.
   Pull them back to their own width and align them to the start. */
.form-shell > button[type="submit"],
.form-shell > .button,
.form-shell > input[type="submit"] {
  width: auto;
  justify-self: start;
}

/* Centre-aligned shells (the public invite) opt into centring instead. */
.public-invite .panel.form-shell > button[type="submit"],
.public-invite .panel.form-shell > input[type="submit"] {
  justify-self: center;
}

/* ─── Small screens ──────────────────────────────────────
   Below 540px a content-width pill can be an awkward tap target, so
   let the tool pills and action rows share the row evenly instead. */
@media (max-width: 540px) {
  .action-grid .button,
  .button-row > .button,
  .button-row > button,
  .form-actions > .button,
  .form-actions > button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Card editor: the content-mode switch is the first decision, so the controls it
   makes irrelevant are removed from the panel rather than left greyed out. */
.cardkit-editor [data-mode-scope="finished"] {
  display: none;
}

.cardkit-editor[data-content-mode="finished"] [data-mode-scope="standard"] {
  display: none;
}

.cardkit-editor[data-content-mode="finished"] [data-mode-scope="finished"] {
  display: block;
}

.cardkit-layer--mode {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
}

.cardkit-layer--artwork .cardkit-field-hint {
  display: block;
  margin-top: 10px;
}

.cardkit-editor[data-content-mode="finished"] [data-guest-color-auto] [data-mode-scope="standard"] {
  display: none;
}

.cardkit-editor[data-content-mode="finished"] [data-guest-color-auto] [data-mode-scope="finished"] {
  display: inline;
}

/* Finished-artwork actions: load the chosen file onto the canvas, swap it, or
   drop it and go back to a Ventiqa template. */
.cardkit-artwork-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.cardkit-artwork-actions .button {
  flex: 1 1 auto;
  min-width: 132px;
  padding: 9px 14px;
  font-size: 0.86rem;
  text-align: center;
}

.cardkit-artwork-actions .button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.cardkit-artwork-actions .button[hidden] {
  display: none;
}

.cardkit-artwork-remove-flag[hidden] {
  display: none;
}

[data-artwork-status] {
  display: block;
  margin-top: 10px;
}

/* ── WhatsApp delivery page ───────────────────────────────────────────────
   Figures used to sit inline with their labels, which left every number
   reading as part of a sentence and nothing lining up down the page. These
   tiles fix the reading order — label, figure, detail — so the numbers form
   a column of their own, and the delivery lists get a toolbar of their own
   because they are now previewed rather than dumped in full. */

.wa-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.wa-panel-head h2 {
  margin: 8px 0 0;
}

.wa-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

/* The card panel pairs one figure with the explanation that belongs to it. */
.wa-stat-grid--split {
  grid-template-columns: minmax(200px, 260px) minmax(240px, 1fr);
  align-items: stretch;
}

.wa-stat {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 15px 16px 15px 19px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* A rail rather than a coloured pill: state reads at a glance without
   competing with the figure for attention. */
.wa-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--wa-rail, var(--line));
}

.wa-stat.is-ready {
  --wa-rail: var(--success);
}

.wa-stat.is-blocked {
  --wa-rail: var(--red);
}

.wa-stat.is-neutral {
  --wa-rail: var(--accent);
}

.wa-stat-label {
  margin: 0;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.wa-stat-value {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Word values ("Needs setup") would otherwise wrap to three lines at the
   size the figures want. */
.wa-stat-value.is-word {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.25;
}

.wa-stat-meta {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

.wa-stat-note {
  margin: 0;
  align-self: center;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 700px) {
  .wa-stat-grid--split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Delivery tabs: counts as chips, not "(12)" in the label ───────────── */
.wa-tab-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tab-count {
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  /* A neutral wash reads correctly on both the light surface and the dark
     accent of the selected tab, so one value covers every theme. */
  background: rgba(128, 128, 128, 0.2);
  color: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.tab-nav a.is-active .tab-count {
  background: rgba(255, 255, 255, 0.26);
}

/* ── Delivery list: heading, notes, toolbar, footer ────────────────────── */
.wa-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px var(--table-panel-inset) 0;
}

.wa-list-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.wa-count-chip {
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(128, 128, 128, 0.12);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.wa-list-lede {
  margin: 6px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* The long explanations are reference material, not something to re-read on
   every visit, so they fold away instead of pushing the table down the page. */
.wa-details {
  margin: 12px var(--table-panel-inset) 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(128, 128, 128, 0.05);
}

.wa-details > summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--muted);
  list-style-position: inside;
}

.wa-details[open] > summary {
  border-bottom: 1px solid var(--line);
}

.wa-details > p {
  margin: 0;
  padding: 12px 14px;
  max-width: 78ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Buttons and notes that sit as direct children of the panel need the same
   optical margin the table cells already get. */
.wa-list-panel > .wa-inset,
.wa-list-panel > .operations-actions {
  padding-inline: var(--table-panel-inset);
}

.wa-list-panel > .operations-actions {
  margin-top: 12px;
}

.wa-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px var(--table-panel-inset);
  margin-top: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.wa-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
}

.wa-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* Matches the specificity of the panel's own `> p` rule above, and comes
   later, so the empty state keeps its own breathing room. */
.event-whatsapp-messages-page .table-panel > .wa-empty {
  margin: 0;
  padding: 26px var(--table-panel-inset) 28px;
  color: var(--muted);
}

/* Two link actions in one cell stack instead of colliding on narrow tables. */
.wa-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* The admin shell repaints every card surface in its own palette; the stat
   tiles and count chips join in so they do not float as light rectangles. */
body:not(.login-page) .wa-stat {
  border-color: rgba(245, 208, 122, 0.24);
  background: linear-gradient(180deg, rgba(38, 31, 18, 0.9), rgba(13, 11, 7, 0.92));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

body:not(.login-page) .tab-count,
body:not(.login-page) .wa-count-chip {
  background: rgba(245, 208, 122, 0.14);
}

body:not(.login-page) .wa-details {
  background: rgba(255, 244, 210, 0.04);
}

/* ── Guest list: search-first, with the full list on request ───────────── */
.guest-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px clamp(16px, 3vw, 22px);
  color: var(--muted);
  font-size: 0.88rem;
}

.guest-list-panel > .guest-list-toolbar:first-child {
  border-bottom: 1px solid var(--line);
}

.guest-list-panel > .guest-list-toolbar:last-child {
  border-top: 1px solid var(--line);
}

/* The state this page usually opens in: no rows, a count, and the two ways
   of getting at a guest. */
.guest-list-prompt {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(30px, 6vw, 52px) clamp(16px, 3vw, 22px);
  text-align: center;
}

.guest-list-prompt h2 {
  margin: 0;
}

.guest-list-prompt p {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
  line-height: 1.6;
}

.guest-list-figures {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 4px 0;
}

.guest-list-figures span {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.08);
  font-size: 0.84rem;
  color: var(--muted);
}

.guest-list-figures strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

body:not(.login-page) .guest-list-figures span {
  background: rgba(245, 208, 122, 0.1);
}

/* One guest's card rebuilt from the options menu, with its own status line. */
.guest-card-regenerate {
  display: grid;
  gap: 2px;
  justify-items: start;
}

.guest-card-regenerate small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.guest-card-regenerate small:empty {
  display: none;
}

/* ── Pricing page ──────────────────────────────────────────────────────────
   The plan cards used to be four loose sentences each; what every package
   carries is now stated once at the top, and each card is reduced to the
   figures that actually differ, on a fixed grid so they line up across cards. */
.pricing-hero-note {
  max-width: 68ch;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--muted);
}

.pricing-included {
  width: min(1240px, calc(100% - 24px));
  margin: 24px auto;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.pricing-included h2 {
  margin: 0 0 18px;
}

.pricing-included-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-included-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: start;
}

.pricing-included-list strong {
  grid-column: 2;
  line-height: 1.3;
}

.pricing-included-list small {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.pricing-tick {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(6, 118, 71, 0.12);
  color: var(--success);
  font-size: 0.8rem;
  font-weight: 900;
}

.pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  align-items: stretch;
  gap: 20px;
  padding-inline: clamp(12px, 3vw, 0px);
}

.price-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 18px;
  padding: clamp(24px, 2.6vw, 32px);
}

.price-card-head h2 {
  margin: 12px 0 6px;
}

.price-card .price {
  margin: 0;
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Two columns of figure + label: the numbers align down the card and across
   cards, which is what makes packages comparable at a glance. */
.price-card .price-card-blurb {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.price-card-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 16px 0;
  border-block: 1px solid var(--line);
  list-style: none;
}

.price-card-specs li {
  display: grid;
  gap: 2px;
}

.price-card-specs strong {
  font-size: 1.25rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.price-card-specs span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.price-card-extras {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}

.price-card-extras li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 0.88rem;
  line-height: 1.45;
}

.price-card-extras .is-on span:first-child {
  color: var(--success);
  font-weight: 900;
}

.price-card .package-cta {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.pricing-note {
  margin-top: 8px;
}

/* ── Features page ─────────────────────────────────────────────────────── */
.feature-flow {
  width: min(1240px, calc(100% - 24px));
  margin: 24px auto 0;
}

.feature-flow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.feature-flow-steps li {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.feature-flow-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.85rem;
  font-weight: 800;
}

.feature-flow-steps strong {
  line-height: 1.3;
}

.feature-flow-steps small {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.feature-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.feature-panel {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: clamp(22px, 2.4vw, 30px);
}

.feature-lead-points {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.features-cta {
  margin-top: 24px;
  text-align: center;
}

.features-cta .operations-actions {
  justify-content: center;
}

body:not(.login-page) .pricing-included,
body:not(.login-page) .feature-flow-steps li {
  border-color: rgba(245, 208, 122, 0.24);
  background: linear-gradient(180deg, rgba(38, 31, 18, 0.9), rgba(13, 11, 7, 0.92));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

body:not(.login-page) .pricing-tick {
  background: rgba(158, 230, 180, 0.14);
}

/* ── Event team: assign scanner access ─────────────────────────────────── */
.team-assign-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin-top: 14px;
}

.team-assign-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.team-assign-field label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.team-assign-form input,
.team-assign-form select {
  margin: 0;
  width: 100%;
}

.team-assign-form .button {
  height: 46px;
}

@media (max-width: 720px) {
  .team-assign-form {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
}

/* The team page reuses the delivery-list frame, so it needs the same inset. */
.event-team-page .table-panel {
  --table-panel-inset: clamp(18px, 3vw, 26px);
  padding-bottom: 6px;
}

.event-team-page .table-panel th,
.event-team-page .table-panel td {
  padding: 16px 14px;
}

.event-team-page .table-panel th:first-child,
.event-team-page .table-panel td:first-child {
  padding-left: var(--table-panel-inset);
}

.event-team-page .table-panel th:last-child,
.event-team-page .table-panel td:last-child {
  padding-right: var(--table-panel-inset);
}

.event-team-page .table-panel tbody tr:last-child td {
  border-bottom: 0;
}

.event-team-page .table-panel > .wa-empty {
  margin: 0;
  padding: 26px var(--table-panel-inset) 28px;
  color: var(--muted);
}

/* ── Event overview: figures, tools, billing ───────────────────────────── */
.overview-figures {
  width: min(1240px, calc(100% - 24px));
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.overview-figure {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 18px 20px 18px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.overview-figure::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--overview-rail, var(--line));
}

.overview-figure.is-good {
  --overview-rail: var(--success);
}

.overview-figure.is-accent {
  --overview-rail: var(--accent);
}

.overview-figure-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.overview-figure-value {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.overview-figure-meta {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

.overview-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 6px;
}

/* Each tool says what it does, so the page can be read rather than guessed at. */
.overview-tool {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.overview-tool:hover,
.overview-tool:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
  text-decoration: none;
}

.overview-tool strong {
  line-height: 1.3;
}

.overview-tool small {
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.overview-tool.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.overview-tool.is-locked:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}

.billing-details > summary {
  cursor: pointer;
  font-weight: 700;
}

.billing-body {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.payment-qr-image {
  width: 100%;
  max-width: 356px;
  border-radius: 12px;
}

body:not(.login-page) .overview-figure,
body:not(.login-page) .overview-tool {
  border-color: rgba(245, 208, 122, 0.24);
  background: linear-gradient(180deg, rgba(38, 31, 18, 0.9), rgba(13, 11, 7, 0.92));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

/* ── Completion dialog: acknowledge, then carry on where you were ───────── */
.action-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 7, 5, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.action-dialog {
  width: min(460px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.action-dialog h2 {
  margin: 0;
  font-size: 1.3rem;
}

.action-dialog p {
  margin: 0;
  line-height: 1.6;
  color: var(--muted);
}

.action-dialog .action-dialog-line.is-error {
  color: var(--red);
}

.action-dialog-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

body:not(.login-page) .action-dialog {
  border-color: rgba(245, 208, 122, 0.28);
  background: linear-gradient(180deg, rgba(38, 31, 18, 0.98), rgba(13, 11, 7, 0.99));
}

/* ── Final report sheet ────────────────────────────────────────────────── */
.report-sheet {
  width: min(1000px, calc(100% - 24px));
  margin: 0 auto 28px;
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18), var(--shadow-soft);
}

.report-sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 28px;
  margin-bottom: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}

.report-brand-lockup {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* The emblem carries its own ring and ground, so it needs no plate behind it --
   a badge inside a badge is what the gold tile used to make it look like. */
.report-brand-mark {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: contain;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.report-kicker {
  margin: 0;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.report-sheet-head h2 {
  margin: 5px 0 8px;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  letter-spacing: -0.035em;
}

.report-sheet-meta {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.report-sheet-ids {
  display: grid;
  gap: 8px;
  margin: 0;
  min-width: 180px;
}

.report-sheet-ids div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.86rem;
}

.report-sheet-ids dt {
  color: var(--muted);
}

.report-sheet-ids dd {
  margin: 0;
  font-weight: 700;
}

.report-status-pill {
  display: inline-flex;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.report-event-brief {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.7fr);
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.report-lead {
  max-width: 76ch;
  margin: 9px 0 0;
  color: var(--ink);
  font-size: clamp(0.98rem, 1.6vw, 1.12rem);
  line-height: 1.75;
}

.report-brief-details {
  display: grid;
  gap: 10px;
  margin: 0;
}

.report-brief-details div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  font-size: 0.82rem;
}

.report-brief-details dt {
  color: var(--muted);
}

.report-brief-details dd {
  margin: 0;
  font-weight: 700;
}

.report-block {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}

.report-block:last-of-type {
  border-bottom: 0;
}

.report-block h3 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.report-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.report-section-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.report-section-head > div > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 50%;
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 900;
}

.report-section-head > p {
  max-width: 48ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: right;
}

.report-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.report-figure {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(128, 128, 128, 0.07), rgba(128, 128, 128, 0.02));
}

.report-figure small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.report-figure span {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.report-figure p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

.report-figure.is-good span {
  color: var(--success);
}

.report-figure.is-accent span {
  color: var(--accent);
}

.report-figures--compact .report-figure span {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.report-rate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.report-rate-card {
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(128, 128, 128, 0.035);
}

.report-rate-card > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
}

.report-rate-card strong {
  color: var(--accent);
  font-size: 1.05rem;
}

.report-rate-card progress {
  width: 100%;
  height: 6px;
  margin: 10px 0 5px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.18);
}

.report-rate-card progress::-webkit-progress-bar {
  background: rgba(128, 128, 128, 0.18);
}

.report-rate-card progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #c79435, #f8e5a5);
}

.report-rate-card progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #c79435, #f8e5a5);
}

.report-rate-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.report-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.report-table-wrap .report-table {
  min-width: 620px;
}

.report-table-wrap .report-delivery-table {
  min-width: 920px;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
}

.report-table th,
.report-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.report-table thead th {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.report-table tbody th {
  font-weight: 600;
  color: var(--muted);
}

.report-table .report-table-note {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.report-table td {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.report-table tbody tr:last-child th,
.report-table tbody tr:last-child td {
  border-bottom: 0;
}

.report-note {
  margin: 14px 0 0;
  max-width: 78ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}

.report-definition {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 0.78rem;
  line-height: 1.55;
}

.report-definition p {
  margin: 0;
  color: var(--muted);
}

.report-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.report-sheet-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  border-top: 2px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

.report-sheet-foot div {
  display: grid;
  gap: 3px;
}

.report-sheet-foot strong {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.report-sheet-foot span {
  font-size: 0.7rem;
}

.report-sheet-foot p {
  margin: 0;
}

body:not(.login-page) .report-sheet {
  border-color: rgba(245, 208, 122, 0.24);
  background: linear-gradient(180deg, rgba(38, 31, 18, 0.9), rgba(13, 11, 7, 0.92));
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 244, 210, 0.08);
}

body:not(.login-page) .report-figure {
  background: rgba(255, 244, 210, 0.05);
  border-color: rgba(245, 208, 122, 0.2);
}

@media (max-width: 760px) {
  .report-event-brief,
  .report-rate-grid,
  .report-two-column {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-section-head,
  .report-sheet-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-section-head > p {
    text-align: left;
  }
}

/* The report is the one page people actually print, so it prints as a document.
   The site chrome goes and the page becomes white stock -- printing a dark
   theme wastes a cartridge and reads badly -- but the identity stays: the gold
   accent, the display serif, the numbered sections. The result should look like
   something an event company hands a client, not like a web page that was sent
   to a printer.

   Backgrounds are dropped by browsers on print by default, so anything carrying
   the brand colour asks for it back explicitly with print-color-adjust. */
@media print {
  @page {
    size: A4;
    margin: 15mm 13mm 16mm;
  }

  .top-menu-bar,
  .site-footer,
  .event-subnav,
  .report-screen-head,
  .messages,
  .page-progress,
  .toast-region,
  .cookie-consent {
    display: none !important;
  }

  body,
  body:not(.login-page),
  body:not(.login-page) .report-sheet,
  body:not(.login-page) .report-figure {
    background: #fff !important;
    color: #1b1b18 !important;
    box-shadow: none !important;
  }

  .report-sheet {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  /* Headings in the display serif, as on screen. This is most of what makes the
     printed page read as a document rather than a dump of a web page. */
  .report-sheet h2,
  .report-sheet h3 {
    font-family: var(--font-heading), Georgia, serif;
    color: #14110a !important;
    letter-spacing: -0.01em;
  }

  .report-sheet-head h2 {
    font-size: 24pt;
    line-height: 1.1;
  }

  .report-section-head h3 {
    font-size: 13pt;
  }

  /* The gold: the one colour the document keeps. */
  .report-kicker,
  .report-section-head > div > span {
    color: #96731f !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The emblem is the one image on the page that must survive to paper: a
     report handed to a client without its logo looks unfinished. */
  .report-brand-mark {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    background: none !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-sheet-head {
    padding-bottom: 14pt;
    border-bottom: 1.5pt solid #c9a24b !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-section-head > div > span {
    border-color: #c9a24b !important;
  }

  .report-status-pill {
    border: 0.75pt solid #c9a24b !important;
    color: #6b5214 !important;
    background: transparent !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Figures read as a row of stats, each with its own hairline rather than a
     filled card, which is what a filled card degrades into on paper anyway. */
  .report-figure {
    border: 0.75pt solid #d8d3c6 !important;
    border-radius: 4pt;
    padding: 8pt 10pt;
  }

  .report-sheet table {
    border-collapse: collapse;
    width: 100%;
    font-size: 9.5pt;
    font-variant-numeric: tabular-nums;
  }

  .report-sheet th,
  .report-sheet td {
    padding: 5pt 7pt;
    border-bottom: 0.5pt solid #e2ded2 !important;
    text-align: left;
  }

  .report-sheet thead th {
    border-bottom: 1pt solid #c9a24b !important;
    color: #14110a !important;
    font-size: 8.5pt;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* A table split across pages repeats its header, so page two is still
     readable on its own. */
  .report-sheet thead {
    display: table-header-group;
  }

  .report-sheet tr {
    break-inside: avoid;
  }

  /* A heading stranded at the foot of a page is the classic way a printed
     report looks careless. */
  .report-sheet h2,
  .report-sheet h3 {
    break-after: avoid;
  }

  .report-sheet p {
    orphans: 3;
    widows: 3;
  }

  a[href] {
    color: inherit !important;
    text-decoration: none;
  }

  .report-block {
    break-inside: avoid;
  }

  .report-sheet-head,
  .report-event-brief,
  .report-sheet-foot {
    break-inside: avoid;
  }

  .report-table-wrap {
    overflow: visible;
  }

  .report-table-wrap .report-table,
  .report-table-wrap .report-delivery-table {
    min-width: 0;
  }
}

/* The delivery-list frame is shared by the SMS, WhatsApp and team pages, so its
   insets belong to the component rather than to one page's body class. */
.wa-list-panel {
  --table-panel-inset: clamp(18px, 3vw, 26px);
  padding-bottom: 6px;
}

.wa-list-panel th,
.wa-list-panel td {
  padding: 16px 14px;
}

.wa-list-panel th:first-child,
.wa-list-panel td:first-child {
  padding-left: var(--table-panel-inset);
}

.wa-list-panel th:last-child,
.wa-list-panel td:last-child {
  padding-right: var(--table-panel-inset);
}

.wa-list-panel tbody tr:last-child td {
  border-bottom: 0;
}

.wa-list-panel > .wa-empty {
  margin: 0;
  padding: 26px var(--table-panel-inset) 28px;
  color: var(--muted);
}

.wa-list-panel td small {
  display: inline-block;
  margin-top: 4px;
  line-height: 1.45;
}

/* The messages page keeps its own panel width; the list frame must not be
   squeezed narrower than the panels above it. */
.event-messages-page .page-main > .table-panel {
  width: min(1240px, calc(100% - 24px));
  margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   Nested surfaces: theme coverage
   ───────────────────────────────────────────────────────────────────────
   Glass and Clay restyle their surfaces through an explicit list of
   component classes. Everything added after that list was written -- the
   messaging cards, the overview tools, the stat rails -- kept the Noir-era
   defaults underneath them, which is why the SMS and WhatsApp pages read as
   a different site once you left Noir. These are the cards that sit *inside*
   a panel, so they take a lighter version of the same treatment: nested,
   not a second full panel.
   ═══════════════════════════════════════════════════════════════════════ */

/* First, the tokens these components should have been using all along. */
.sms-copy-panel summary {
  /* --gold was never defined in any theme, so this had no colour at all. */
  color: var(--accent);
}

.sms-copy-panel p {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface-strong) 55%, transparent);
}

/* The preview device was tinted with a fixed WhatsApp green, which is both
   the wrong channel on the SMS page and the wrong hue in every light theme. */
.message-preview-device {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg) 60%, var(--surface));
}

.event-whatsapp-messages-page .message-preview-device {
  background:
    radial-gradient(circle at 18% 0%, rgba(57, 212, 143, 0.12), transparent 60%),
    color-mix(in srgb, var(--bg) 60%, var(--surface));
}

/* ── Glass ──────────────────────────────────────────────────────────── */
html[data-theme="glass"] body:not(.login-page) .wa-stat,
html[data-theme="glass"] body:not(.login-page) .wa-stat-note,
html[data-theme="glass"] body:not(.login-page) .wa-details,
html[data-theme="glass"] body:not(.login-page) .message-channel-card,
html[data-theme="glass"] body:not(.login-page) .template-card,
html[data-theme="glass"] body:not(.login-page) .message-preview-bubble,
html[data-theme="glass"] body:not(.login-page) .overview-tool,
html[data-theme="glass"] body:not(.login-page) .sms-copy-panel p {
  border-color: rgba(255, 255, 255, 0.62);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.26));
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

html[data-theme="glass"] body:not(.login-page) .message-preview-device {
  border-color: rgba(255, 255, 255, 0.55);
  background:
    radial-gradient(circle at 18% 0%, rgba(99, 102, 241, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.2));
}

html[data-theme="glass"] body:not(.login-page) .message-channel-card.is-active {
  border-color: rgba(99, 102, 241, 0.5);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.16), rgba(255, 255, 255, 0.3));
}

html[data-theme="glass"] body:not(.login-page) .overview-tool:hover,
html[data-theme="glass"] body:not(.login-page) .overview-tool:focus-visible {
  border-color: rgba(99, 102, 241, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.34));
}

/* ── Clay ───────────────────────────────────────────────────────────── */
html[data-theme="clay"] body:not(.login-page) .wa-stat,
html[data-theme="clay"] body:not(.login-page) .wa-stat-note,
html[data-theme="clay"] body:not(.login-page) .wa-details,
html[data-theme="clay"] body:not(.login-page) .message-channel-card,
html[data-theme="clay"] body:not(.login-page) .template-card,
html[data-theme="clay"] body:not(.login-page) .message-preview-bubble,
html[data-theme="clay"] body:not(.login-page) .overview-tool,
html[data-theme="clay"] body:not(.login-page) .sms-copy-panel p {
  border: 1px solid #ffffff;
  border-radius: 20px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* The puffy edge, at the scale a nested card wants. */
  box-shadow:
    6px 7px 16px rgba(182, 110, 145, 0.18),
    -4px -5px 12px rgba(255, 255, 255, 0.7),
    inset 1px 1px 3px rgba(255, 255, 255, 0.85);
}

html[data-theme="clay"] body:not(.login-page) .message-preview-device {
  border: 1px solid #ffffff;
  background:
    radial-gradient(circle at 18% 0%, rgba(232, 86, 143, 0.14), transparent 62%),
    linear-gradient(145deg, #f9e9f0, #f3dde7);
}

html[data-theme="clay"] body:not(.login-page) .message-channel-card.is-active {
  border-color: #e8568f;
  background: linear-gradient(145deg, #fdeef4, #f8dbe8);
}

html[data-theme="clay"] body:not(.login-page) .overview-tool:hover,
html[data-theme="clay"] body:not(.login-page) .overview-tool:focus-visible {
  border-color: #e8568f;
}

/* ═══════════════════════════════════════════════════════════════════════
   Numbered pagination
   ───────────────────────────────────────────────────────────────────────
   One pager for every list and log on the platform. Built from tokens so
   it inherits Noir, Glass and Clay without a per-theme block -- the trap
   the messaging cards fell into.
   ═══════════════════════════════════════════════════════════════════════ */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 16px var(--table-panel-inset, 18px) 18px;
}

/* The whole line carries the emphasis: the count is a single text node so that
   it can be translated in one piece, which leaves no inner element to style. */
.pager-count {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pager-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pager-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pager-number,
.pager-step,
.pager-gap {
  min-width: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.pager-gap {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  min-width: 22px;
  padding: 0 2px;
}

a.pager-number:hover,
a.pager-step:hover,
a.pager-number:focus-visible,
a.pager-step:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: var(--surface-strong);
  text-decoration: none;
}

.pager-number.is-current {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-lift);
}

.pager-step.is-disabled {
  opacity: 0.42;
  cursor: default;
}

/* A pager that follows a table sits flush inside the panel frame, so it needs
   the rule that separates it from the last row. */
.table-panel > .pager {
  border-top: 1px solid var(--line);
  margin-top: 0;
}

@media (max-width: 640px) {
  .pager {
    justify-content: center;
    padding-inline: 12px;
  }

  .pager-count {
    width: 100%;
    text-align: center;
  }

  /* The step buttons and the current page are enough to navigate by thumb;
     the far ends of the number strip are what gets dropped first. */
  .pager-number,
  .pager-step,
  .pager-gap {
    min-width: 34px;
    min-height: 34px;
    padding: 0 7px;
    font-size: 0.8rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Error pages (400 / 403 / 404 / 500 / 503)
   ───────────────────────────────────────────────────────────────────────
   One centred card, the status code as a quiet watermark rather than the
   headline. Tokens only, so it carries every theme.
   ═══════════════════════════════════════════════════════════════════════ */
.error-page .page-main {
  display: grid;
  place-items: center;
  padding-block: clamp(32px, 8vh, 96px);
}

.error-shell {
  width: min(560px, calc(100% - 32px));
  margin-inline: auto;
  padding: clamp(28px, 5vw, 46px);
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* Big enough to identify the page at a glance, quiet enough that the sentence
   underneath is what gets read first. */
.error-code {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 12vw, 5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--accent);
  opacity: 0.32;
}

.error-shell h1 {
  margin: 0;
  font-size: clamp(1.35rem, 3.4vw, 1.85rem);
  line-height: 1.25;
}

.error-message {
  margin: 0;
  max-width: 46ch;
  line-height: 1.65;
  color: var(--muted);
}

.error-hint {
  margin: 0;
  max-width: 46ch;
  padding: 12px 16px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}

.error-actions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 520px) {
  .error-actions {
    width: 100%;
    flex-direction: column;
  }

  .error-actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Danger zone (permanent event deletion, platform admins only)
   ───────────────────────────────────────────────────────────────────────
   Deliberately unlike the rest of the page: a red rail and a typed
   confirmation, so the one irreversible control on the dashboard cannot be
   mistaken for the routine ones above it.
   ═══════════════════════════════════════════════════════════════════════ */
.danger-zone {
  display: grid;
  gap: 18px;
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  border-left: 4px solid var(--red);
}

.danger-zone .eyebrow {
  color: var(--red);
}

.danger-zone h2 {
  margin: 6px 0 8px;
}

.danger-zone p {
  margin: 0;
  max-width: 68ch;
  color: var(--muted);
}

.danger-zone-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
}

.danger-zone-field {
  width: 100%;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.danger-zone-form input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.danger-zone-form input[type="text"]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.danger-zone-form .danger-button {
  flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--red) 55%, var(--line));
  color: var(--red);
}

.danger-zone-form .danger-button:hover,
.danger-zone-form .danger-button:focus-visible {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
}

@media (max-width: 560px) {
  .danger-zone-form .danger-button {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Manual
   ───────────────────────────────────────────────────────────────────────
   A reading page, not a dashboard: one column, generous measure, and a
   sticky contents strip so a long document stays navigable.
   ═══════════════════════════════════════════════════════════════════════ */
.manual-hero p {
  max-width: 62ch;
}

.manual-toc {
  position: sticky;
  top: 12px;
  z-index: 5;
  width: min(1240px, calc(100% - 24px));
  margin: 0 auto 20px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.manual-toc a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.manual-toc a:hover,
.manual-toc a:focus-visible {
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.manual-body {
  width: min(1240px, calc(100% - 24px));
  margin-inline: auto;
  display: grid;
  gap: 18px;
}

/* scroll-padding on <html> already clears the navbar for anchor jumps. */
.manual-section {
  scroll-margin-top: 140px;
}

.manual-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.manual-section-head h2 {
  margin: 0;
}

.manual-audience {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.manual-summary {
  margin: 6px 0 0;
  max-width: 70ch;
  color: var(--muted);
}

.manual-section h3 {
  margin: 22px 0 8px;
  font-size: 1.02rem;
}

.manual-points {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  max-width: 78ch;
  line-height: 1.65;
}

.manual-points li {
  color: var(--muted);
}

@media (max-width: 640px) {
  .manual-toc {
    position: static;
    max-height: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Light-theme coverage, second pass
   ───────────────────────────────────────────────────────────────────────
   Glass and Clay repaint surfaces through an explicit list of component
   classes, so anything built after that list was written keeps the Noir
   defaults and reads as a dark box on a light page. The pricing page showed
   it plainly: .price-card is on the list and .pricing-included, sitting
   directly beneath it, was not.

   Invitation cards (.invitation-card, .cardkit-*, .template-*) are
   deliberately absent here: those are printed artwork whose design must not
   move when somebody switches the site theme.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Panel-level surfaces ───────────────────────────────────────────── */
html[data-theme="glass"] body:not(.login-page) .pricing-included,
html[data-theme="glass"] body:not(.login-page) .error-shell,
html[data-theme="glass"] body:not(.login-page) .contact-card,
html[data-theme="glass"] body:not(.login-page) .contact-choice-panel,
html[data-theme="glass"] body:not(.login-page) .scanner-help,
html[data-theme="glass"] body:not(.login-page) .report-sheet,
html[data-theme="glass"] body:not(.login-page) .form-shell,
html[data-theme="glass"] body:not(.login-page) .guest-options-panel,
html[data-theme="glass"] body:not(.login-page) .event-photo-picker,
html[data-theme="glass"] body:not(.login-page) .manual-toc,
html[data-theme="glass"] body:not(.login-page) .admin-live-grid a {
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.32));
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

html[data-theme="clay"] body:not(.login-page) .pricing-included,
html[data-theme="clay"] body:not(.login-page) .error-shell,
html[data-theme="clay"] body:not(.login-page) .contact-card,
html[data-theme="clay"] body:not(.login-page) .contact-choice-panel,
html[data-theme="clay"] body:not(.login-page) .scanner-help,
html[data-theme="clay"] body:not(.login-page) .report-sheet,
html[data-theme="clay"] body:not(.login-page) .form-shell,
html[data-theme="clay"] body:not(.login-page) .guest-options-panel,
html[data-theme="clay"] body:not(.login-page) .event-photo-picker,
html[data-theme="clay"] body:not(.login-page) .manual-toc,
html[data-theme="clay"] body:not(.login-page) .admin-live-grid a {
  border: 1px solid #ffffff;
  border-radius: 28px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}

/* ── Nested surfaces inside those panels ────────────────────────────── */
html[data-theme="glass"] body:not(.login-page) .lifecycle-step,
html[data-theme="glass"] body:not(.login-page) .overview-figure,
html[data-theme="glass"] body:not(.login-page) .report-figure,
html[data-theme="glass"] body:not(.login-page) .report-rate-card,
html[data-theme="glass"] body:not(.login-page) .feature-lead-mock,
html[data-theme="glass"] body:not(.login-page) .bulk-resend-option,
html[data-theme="glass"] body:not(.login-page) .event-photo-preview,
html[data-theme="glass"] body:not(.login-page) .live-status {
  border-color: rgba(255, 255, 255, 0.62);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.26));
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

html[data-theme="clay"] body:not(.login-page) .lifecycle-step,
html[data-theme="clay"] body:not(.login-page) .overview-figure,
html[data-theme="clay"] body:not(.login-page) .report-figure,
html[data-theme="clay"] body:not(.login-page) .report-rate-card,
html[data-theme="clay"] body:not(.login-page) .feature-lead-mock,
html[data-theme="clay"] body:not(.login-page) .bulk-resend-option,
html[data-theme="clay"] body:not(.login-page) .event-photo-preview,
html[data-theme="clay"] body:not(.login-page) .live-status {
  border: 1px solid #ffffff;
  border-radius: 20px;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    6px 7px 16px rgba(182, 110, 145, 0.18),
    -4px -5px 12px rgba(255, 255, 255, 0.7),
    inset 1px 1px 3px rgba(255, 255, 255, 0.85);
}

/* The action dialog floats above the page in both light themes, so it needs a
   solid ground rather than a translucent one -- there is a backdrop behind it,
   not the page. */
html[data-theme="glass"] .action-dialog {
  border-color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 255, 0.94));
  color: var(--ink);
}

html[data-theme="clay"] .action-dialog {
  border: 1px solid #ffffff;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
  color: var(--ink);
}

/* The contact page's hero is its own class rather than .page-hero, so it missed
   the gradient the other heroes get and rendered as a flat panel. */
html[data-theme="glass"] body:not(.login-page) .contact-hero {
  border-color: rgba(255, 255, 255, 0.55);
  background:
    radial-gradient(circle at 86% 10%, rgba(99, 102, 241, 0.26), transparent 32%),
    radial-gradient(circle at 8% 90%, rgba(45, 212, 191, 0.22), transparent 34%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.34) 62%, rgba(255, 255, 255, 0.28));
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  backdrop-filter: blur(20px) saturate(1.35);
}

html[data-theme="clay"] body:not(.login-page) .contact-hero {
  border: 1px solid #ffffff;
  background:
    radial-gradient(circle at 88% 8%, rgba(240, 130, 178, 0.22), transparent 36%),
    radial-gradient(circle at 6% 92%, rgba(64, 220, 200, 0.18), transparent 38%),
    linear-gradient(145deg, #fdf7f9, #f7e6ee);
}

/* Dropdowns float over the page rather than sitting on it, so a translucent
   ground reads as muddy: whatever is underneath shows through the menu. */
html[data-theme="glass"] .guest-options-menu {
  border-color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 247, 255, 0.95));
}

html[data-theme="clay"] .guest-options-menu {
  border: 1px solid #ffffff;
  background: linear-gradient(145deg, #fdf7f9, #f7e6ee);
}

/* ═══════════════════════════════════════════════════════════════════════
   Themed export: the PDF that looks like the screen
   ───────────────────────────────────────────────────────────────────────
   The block above prints the report as a paper document -- white stock, dark
   ink -- which is right for a printer and wrong for a PDF you email to a
   client. This mode keeps the theme instead, and it is opt-in per export:
   print-report.js adds .print-themed to <body> for the duration of the
   dialog and takes it off afterwards.

   Everything here uses the theme tokens rather than fixed colours, so the
   export follows whichever theme the reader is actually in -- Noir, Glass or
   Clay -- with no per-theme rules to keep in sync.

   print-color-adjust: exact is what makes a browser render these backgrounds
   at all; without it they are dropped and the page comes out blank-white.
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
  /* The root background propagates to the page canvas, so it covers the sheet
     edge to edge including the @page margins. Without this the dark report
     would sit in a white frame. */
  html.print-themed,
  body.print-themed,
  body.print-themed:not(.login-page) {
    background: var(--bg) !important;
    color: var(--ink) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.print-themed:not(.login-page) .report-sheet {
    padding: 12mm 10mm;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)) !important;
    border-radius: 6mm;
    background: var(--surface) !important;
    color: var(--ink) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.print-themed .report-sheet h2,
  body.print-themed .report-sheet h3,
  body.print-themed .report-sheet strong,
  body.print-themed .report-sheet dd,
  body.print-themed .report-sheet td {
    color: var(--ink) !important;
  }

  body.print-themed .report-sheet p,
  body.print-themed .report-sheet dt,
  body.print-themed .report-section-head > p,
  body.print-themed .report-sheet small {
    color: var(--muted) !important;
  }

  body.print-themed .report-kicker,
  body.print-themed .report-section-head > div > span {
    color: var(--accent) !important;
  }

  body.print-themed .report-sheet-head {
    border-bottom-color: color-mix(in srgb, var(--accent) 35%, var(--line)) !important;
  }

  body.print-themed .report-section-head > div > span {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
  }

  body.print-themed .report-status-pill {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.print-themed .report-figure {
    border: 1px solid var(--line) !important;
    border-radius: 4mm;
    background: color-mix(in srgb, var(--surface-strong) 60%, transparent) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.print-themed .report-sheet th,
  body.print-themed .report-sheet td {
    border-bottom-color: var(--line) !important;
  }

  body.print-themed .report-sheet thead th {
    border-bottom-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
    color: var(--ink) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Print: what must be switched off, and tables that have to fit the page
   ───────────────────────────────────────────────────────────────────────
   Applies to both export modes, and last so it wins.

   The decorative layers behind every page (.page-aura, .page-grid) are
   position: fixed, which Chromium repaints on *every* sheet of a print job.
   One of them is animated and blurred by 32px and the other carries a
   mask-image. Repeated across a multi-page report that is enough to make the
   print pipeline fail outright -- the browser reports it as "printer failed",
   which sounds like a hardware fault and is not one.

   backdrop-filter goes for the same reason, and because it is meaningless on
   paper: there is nothing behind the page to blur.
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
  .page-aura,
  .page-grid,
  .aura {
    display: none !important;
  }

  *,
  *::before,
  *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    mask-image: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* ── Tables shrink to the page instead of scrolling off it ─────────── */
  .report-table-wrap {
    overflow: visible !important;
    border-radius: 4pt;
  }

  /* The screen gives these a min-width and lets the wrapper scroll. Paper has
     no scrollbar, so the columns are made to share the width that exists. */
  .report-table-wrap .report-table,
  .report-table-wrap .report-delivery-table,
  .report-sheet table {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .report-sheet th,
  .report-sheet td {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* The delivery table is the widest thing in the document: fixed layout is
     what guarantees it fits rather than merely usually fitting. */
  .report-delivery-table {
    table-layout: fixed;
    font-size: 8pt;
  }

  .report-delivery-table th,
  .report-delivery-table td {
    padding: 3pt 4pt;
    line-height: 1.35;
  }

  .report-delivery-table small {
    font-size: 7.5pt;
  }
}

@media print {
  /* Nine columns, one of which holds words and eight of which hold small
     numbers. Equal shares would starve the channel name and waste the rest. */
  .report-delivery-table th:first-child,
  .report-delivery-table td:first-child {
    width: 17%;
  }

  .report-delivery-table thead th {
    text-transform: none;
    letter-spacing: 0;
    hyphens: auto;
  }

  /* Figures line up under their heading and read down the column. */
  .report-delivery-table td {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .report-delivery-table thead th:not(:first-child) {
    text-align: right;
  }

  .report-delivery-table th:first-child,
  .report-delivery-table td:first-child {
    text-align: left;
  }
}

/* The pricing page's call to action. It sits between two centred bands, so it
   takes the same width they do; without that it was a full-bleed flex row and
   the button landed hard against the left edge of the window. */
.pricing-cta {
  width: min(1240px, calc(100% - 24px));
  margin: 4px auto 26px;
  display: flex;
  justify-content: center;
}

@media (max-width: 560px) {
  .pricing-cta .button {
    width: 100%;
    justify-content: center;
  }
}