/* ============================================================
   EVENTARA - Design System
   "Every Occasion, One Platform"
   Visual language: DESIGN-airbnb.md (white canvas, ink #222,
   Royal Blue (#1E40AF) + shiny Gold (#CBA135) accents, Inter as Cereal substitute)
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&display=swap');

/* ============================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ============================================================ */
:root {
  /* --- Brand Colors ---
     Plum scale is re-mapped to Airbnb ink/neutrals; coral carries
     Rausch - the single brand accent. Gold maps to ink (Airbnb
     renders stars/ratings in ink, never gold). */
  --plum-900: #000000;
  --plum-800: #000000;
  --plum-700: #000000;
  --plum: #222222;
  --plum-500: #6a6a6a;
  --plum-400: #6a6a6a;
  --plum-300: #929292;
  --plum-200: #dddddd;
  --plum-100: #ebebeb;
  --plum-50: #f7f7f7;

  --coral: #1E40AF;            /* Royal Blue - primary brand voltage (replaces Rausch red) */
  --coral-hover: #17318A;      /* Royal Blue - pressed / hover */
  --coral-light: #E7ECFB;      /* Royal Blue - pale tint for badges & surfaces */

  --gold: #CBA135;             /* Shiny gold - stars, ratings, premium accents */
  --gold-hover: #B0871F;       /* Gold - hover / press */
  --gold-light: #F8F1D9;       /* Pale gold background */
  --gold-deep: #8A6A12;        /* Legible gold for small text on light surfaces */

  /* --- Semantic Colors --- */
  --trust-green: #2D9F6F;
  --trust-green-light: #E6F7EF;
  --warning: #F59E0B;
  --warning-light: #FEF3C7;
  --error: #c13515;
  --error-light: #FEE2E2;
  --info: #428bff;             /* legal-link blue */
  --info-light: #DBEAFE;

  /* --- Surface Colors --- */
  --canvas: #ffffff;
  --canvas-pure: #ffffff;
  --canvas-alt: #f7f7f7;       /* surface-soft */
  --canvas-plum: #f7f7f7;
  --canvas-warm: #f7f7f7;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-overlay: rgba(255, 255, 255, 0.98);
  --surface-dark: #222222;     /* ink - dark buttons only */
  --surface-dark-alt: #000000;
  --surface-dark-card: #f2f2f2; /* surface-strong */

  /* --- Text Colors --- */
  --ink: #222222;
  --ink-secondary: #3f3f3f;
  --ink-muted: #6a6a6a;
  --ink-faint: #929292;
  --ink-on-dark: #222222;      /* former dark surfaces are now light */
  --ink-on-dark-muted: #6a6a6a;
  --ink-on-primary: #ffffff;

  /* --- Border Colors --- */
  --hairline: #dddddd;
  --hairline-strong: #c1c1c1;
  --hairline-light: #ebebeb;
  --hairline-dark: #dddddd;

  /* --- Shadows: single Airbnb tier (flat or this - nothing else) --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-sm: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0;
  --shadow-md: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0;
  --shadow-lg: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0;
  --shadow-xl: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0;
  --shadow-glow-plum: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0;
  --shadow-glow-coral: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0;

  /* --- Typography: one family carries the whole scale --- */
  --font-display: 'Inter', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif;

  --text-display-xxl: 3rem;     /* 48px - hero only */
  --text-display-xl: 2.25rem;   /* 36px */
  --text-display-lg: 1.75rem;   /* 28px - Airbnb display-xl */
  --text-display-md: 1.375rem;  /* 22px - Airbnb display-lg */
  --text-heading-lg: 1.375rem;  /* 22px */
  --text-heading-md: 1.25rem;   /* 20px - Airbnb display-sm */
  --text-heading-sm: 1.125rem;  /* 18px */
  --text-body-lg: 1.0625rem;    /* 17px */
  --text-body: 1rem;            /* 16px */
  --text-body-sm: 0.875rem;     /* 14px */
  --text-caption: 0.8125rem;    /* 13px */
  --text-micro: 0.75rem;        /* 12px */

  /* --- Spacing --- */
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;
  --space-120: 7.5rem;

  /* --- Border Radius: Airbnb shape language (8 buttons/inputs,
     14 cards, 20 large surfaces, full pills) --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-2xl: 14px;
  --radius-3xl: 20px;
  --radius-pill: 9999px;

  /* --- Transitions --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* --- Z-index Scale --- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-nav: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* --- Container --- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--canvas);
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--plum);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-in-out);
}

a:hover { color: var(--plum-700); }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

ul, ol { list-style: none; }

/* ============================================================
   3. TYPOGRAPHY CLASSES
   ============================================================ */
.display-xxl {
  font-family: var(--font-display);
  font-size: var(--text-display-xxl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--ink);
}

.display-xl {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.display-md {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.4px;
}

.heading-lg {
  font-family: var(--font-body);
  font-size: var(--text-heading-lg);
  font-weight: 600;
  line-height: 1.3;
}

.heading-md {
  font-family: var(--font-body);
  font-size: var(--text-heading-md);
  font-weight: 600;
  line-height: 1.35;
}

.heading-sm {
  font-family: var(--font-body);
  font-size: var(--text-heading-sm);
  font-weight: 500;
  line-height: 1.4;
}

.body-lg {
  font-size: var(--text-body-lg);
  line-height: 1.65;
}

.body-sm {
  font-size: var(--text-body-sm);
  line-height: 1.55;
}

.caption {
  font-size: var(--text-caption);
  color: var(--ink-muted);
  line-height: 1.45;
}

.micro {
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.text-plum { color: var(--plum); }
.text-coral { color: var(--coral); }
.text-gold { color: var(--gold-deep); }
.text-green { color: var(--trust-green); }
.text-muted { color: var(--ink-muted); }
.text-secondary { color: var(--ink-secondary); }
.text-white { color: var(--ink-on-primary); }

.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }

/* ============================================================
   4. LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-24);
}

.container-lg {
  max-width: var(--container-2xl);
}

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

.section {
  padding: var(--space-64) 0;
}

.section-sm {
  padding: var(--space-48) 0;
}

.section-lg {
  padding: var(--space-96) 0;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-4 { gap: var(--space-4); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }
.gap-20 { gap: var(--space-20); }
.gap-24 { gap: var(--space-24); }
.gap-32 { gap: var(--space-32); }
.gap-40 { gap: var(--space-40); }
.gap-48 { gap: var(--space-48); }

.grid {
  display: grid;
  gap: var(--space-24);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.text-center { text-align: center; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.relative { position: relative; }

/* ============================================================
   5. NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline-light);
  padding: 0 var(--space-24);
  transition: border-color var(--duration-normal) var(--ease-out);
}

.navbar.scrolled {
  border-color: var(--hairline);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: 700;
  color: var(--coral);
  text-decoration: none;
  cursor: pointer;
}

.navbar-logo .logo-icon {
  width: 36px;
  height: 36px;
  background: var(--coral);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-family: var(--font-display);
  font-weight: 700;
}

/* Brand logo image (gold arc + eventara wordmark) */
.logo-img {
  height: 40px;
  width: auto;
  display: block;
}
.footer-brand .navbar-logo .logo-img { height: 44px; }
.sidebar-logo .logo-img { height: 34px; }
.auth-logo .logo-img { height: 54px; }
@media (max-width: 640px) {
  .navbar-logo .logo-img { height: 34px; }
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.navbar-nav a {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink-muted);
  transition: color var(--duration-fast) var(--ease-in-out);
  cursor: pointer;
  position: relative;
}

.navbar-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--ink);
  transition: width var(--duration-normal) var(--ease-out);
}

.navbar-nav a:hover { color: var(--ink); }
.navbar-nav a:hover::after { width: 100%; }
.navbar-nav a.active { color: var(--ink); }
.navbar-nav a.active::after { width: 100%; }

.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.navbar-actions .btn-signin {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--ink-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--duration-fast);
}

.navbar-actions .btn-signin:hover { color: var(--ink); }

/* Authenticated state - account chip + logout (injected by auth.js) */
/* ---- User Profile Dropdown (injected by auth.js on every page) ---- */
.account-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.account-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.account-name {
  font-size: var(--text-body-sm);
  font-weight: 600;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Trigger: avatar + name + chevron, same footprint as the old chip */
.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 5px 10px 5px 6px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.account-trigger:hover { background: var(--canvas-alt); }
.account-trigger[aria-expanded="true"] { background: var(--canvas-alt); border-color: var(--hairline); }
.account-trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.account-chevron { width: 15px; height: 15px; color: var(--ink-muted); transition: transform var(--duration-fast) var(--ease-out); }
.account-trigger[aria-expanded="true"] .account-chevron { transform: rotate(180deg); }

/* Dropdown panel */
.account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 248px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-8);
  z-index: var(--z-dropdown);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.account-menu.open .account-dropdown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.account-dd-head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12) var(--space-12);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--hairline-light);
}
.account-dd-id { display: flex; flex-direction: column; min-width: 0; }
.account-dd-id b { font-size: var(--text-body-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.account-dd-id span { font-size: var(--text-caption); color: var(--ink-muted); }
.account-dd-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding: 10px var(--space-12);
  min-height: 44px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast);
}
.account-dd-item svg { width: 18px; height: 18px; color: var(--ink-muted); flex-shrink: 0; }
.account-dd-item:hover { background: var(--canvas-alt); color: var(--ink); }
.account-dd-item:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.account-dd-logout { color: var(--error); border-top: 1px solid var(--hairline-light); margin-top: var(--space-8); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.account-dd-logout svg { color: var(--error); }
.account-dd-logout:hover { background: var(--error-light); color: var(--error); }

@media (prefers-reduced-motion: reduce) {
  .account-dropdown { transition: opacity var(--duration-fast); transform: none; }
  .account-menu.open .account-dropdown { transform: none; }
  .account-chevron { transition: none; }
}

/* Mobile hamburger account block (auth.js injects these) */
.mobile-account-head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16) 0 var(--space-12);
  margin-top: var(--space-8);
  border-top: 1px solid var(--hairline-light);
}
.mobile-account-id { display: flex; flex-direction: column; min-width: 0; }
.mobile-account-id b { font-size: var(--text-body); font-weight: 600; }
.mobile-account-id span { font-size: var(--text-caption); color: var(--ink-muted); }
.mobile-account-item { display: flex; align-items: center; gap: var(--space-12); min-height: 44px; }
.mobile-account-item svg { width: 18px; height: 18px; color: var(--ink-muted); flex-shrink: 0; }

/* Mobile hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-4);
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: var(--radius-pill);
  transition: all var(--duration-normal) var(--ease-out);
}

.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 80px;
  left: var(--space-16);
  right: var(--space-16);
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: var(--space-24);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--hairline);
  z-index: var(--z-nav);
  flex-direction: column;
  gap: var(--space-16);
}

.mobile-menu.active { display: flex; }

.mobile-menu a {
  font-size: var(--text-body-lg);
  font-weight: 500;
  color: var(--ink);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--hairline-light);
  cursor: pointer;
}

.mobile-menu a:last-child { border-bottom: none; }

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-body);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Primary - Rausch fill, 8px radius, flat (no glow, no lift) */
.btn-primary {
  background: var(--coral);
  color: var(--ink-on-primary);
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-size: var(--text-body);
}

.btn-primary:hover {
  background: var(--coral-hover);
  color: var(--ink-on-primary);
}

.btn-primary:active { background: var(--coral-hover); }

/* Secondary - white fill, 1px ink outline */
.btn-secondary {
  background: var(--canvas);
  color: var(--ink);
  padding: 13px 23px;
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  border: 1px solid var(--ink);
}

.btn-secondary:hover {
  background: var(--canvas-alt);
  border-color: var(--ink);
  color: var(--ink);
}

/* Ghost - tertiary text: plain ink, underline on hover */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 13px 23px;
  border-radius: var(--radius-md);
  font-size: var(--text-body);
}

.btn-ghost:hover {
  background: var(--canvas-alt);
  color: var(--ink);
  text-decoration: underline;
}

/* Ink filled (former plum) */
.btn-plum {
  background: var(--plum);
  color: var(--ink-on-primary);
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-size: var(--text-body);
}

.btn-plum:hover {
  background: var(--plum-700);
  color: var(--ink-on-primary);
}

/* Dark */
.btn-dark {
  background: var(--surface-dark);
  color: var(--ink-on-primary);
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-size: var(--text-body);
}

.btn-dark:hover {
  background: var(--surface-dark-alt);
  color: var(--ink-on-primary);
}

/* Small variant */
.btn-sm {
  padding: 10px 20px;
  font-size: var(--text-body-sm);
}

.btn-sm svg {
  width: 16px;
  height: 16px;
}

/* Large variant */
.btn-lg {
  padding: 18px 36px;
  font-size: var(--text-body-lg);
}

/* Icon only - circular, per Airbnb icon-button-outline */
.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--ink);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-in-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  border-color: var(--hairline-strong);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.btn-icon svg { width: 20px; height: 20px; }

/* ============================================================
   7. CARDS
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--hairline);
  transform: translateY(-2px);
}

.card-body {
  padding: var(--space-24);
}

.card-flat {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: var(--space-24);
}

.card-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-xl);
  padding: var(--space-24);
}

.card-dark {
  background: var(--surface-dark-card);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-24);
  color: var(--ink-on-dark);
}

/* Provider card */
.provider-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
}

.provider-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.provider-card .card-image {
  width: 100%;
  height: 220px;
  background: var(--surface-dark-card);
  position: relative;
  overflow: hidden;
}

.provider-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provider-card .card-badge {
  position: absolute;
  top: var(--space-16);
  left: var(--space-16);
  display: flex;
  gap: var(--space-8);
  z-index: 10;
}

.provider-card .wishlist-btn {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  width: 38px;
  height: 38px;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast);
  color: white;
  z-index: 10;
}

.provider-card .wishlist-btn:hover {
  background: white;
  color: var(--coral);
  transform: scale(1.08);
  box-shadow: var(--shadow-md);
}

.provider-card .card-content {
  padding: var(--space-20);
}

.provider-card .provider-name {
  font-weight: 600;
  font-size: var(--text-body-lg);
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.provider-card .provider-type {
  font-size: var(--text-body-sm);
  color: var(--ink-muted);
  margin-bottom: var(--space-12);
}

.provider-card .provider-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  font-size: var(--text-body-sm);
  color: var(--ink-secondary);
}

.provider-card .provider-meta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Keep the map-pin + address on one line, alongside the rating */
.provider-card .location {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  white-space: nowrap;
  min-width: 0;
}

.provider-card .rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink);
  flex-shrink: 0;
}

.provider-card .rating svg {
  color: var(--gold);
}

.provider-card .price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--space-12);
  border-top: 1px solid var(--hairline-light);
}

.provider-card .price {
  font-weight: 600;
  color: var(--ink);
}

.provider-card .price span {
  font-weight: 400;
  color: var(--ink-muted);
  font-size: var(--text-body-sm);
}

/* ============================================================
   8. BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.badge svg { width: 14px; height: 14px; }

.badge-verified {
  background: transparent;
  color: white;
  border: none;
  box-shadow: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.badge-plum {
  background: var(--plum-50);
  color: var(--plum);
}

.badge-coral {
  background: var(--coral-light);
  color: var(--coral);
}

.badge-gold {
  background: var(--gold-light);
  color: var(--gold-deep);
}

.badge-dark {
  background: var(--surface-dark);
  color: var(--ink-on-primary);
}

/* ============================================================
   9. FORM INPUTS
   ============================================================ */
.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.input-group label {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--ink);
}

.input-field {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  color: var(--ink);
  transition: all var(--duration-fast) var(--ease-in-out);
  outline: none;
}

.input-field::placeholder { color: var(--ink-faint); }

.input-field:hover { border-color: var(--hairline-strong); }

/* Focus: border flips to ink - no glow, no ring */
.input-field:focus {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.input-field-lg {
  padding: 16px 20px;
  font-size: var(--text-body-lg);
  border-radius: var(--radius-xl);
}

select.input-field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237C7C9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

textarea.input-field {
  resize: vertical;
  min-height: 100px;
}

/* Search bar */
.search-bar {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-normal) var(--ease-out);
  max-width: 780px;
}

.search-bar:hover, .search-bar:focus-within {
  border-color: var(--hairline);
  box-shadow: var(--shadow-sm);
}

.search-bar .search-field {
  flex: 1;
  min-width: 0;            /* let all four fields share width equally - without this
                             the Event Type <select> keeps its wide min-content size
                             and squeezes the Guest Count field until its placeholder
                             clips to "Guest Cou" */
  border: none;
  background: none;
  padding: 12px 20px;
  font-size: var(--text-body);
  color: var(--ink);
  outline: none;
}

.search-bar .search-field::placeholder { color: var(--ink-faint); }

/* Drop the number spinner so it does not reserve space on the right of the
   Guest Count field (another source of the placeholder clip); value still typed/validated */
.search-bar .search-field[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.search-bar .search-field[type="number"]::-webkit-outer-spin-button,
.search-bar .search-field[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.search-bar .search-divider {
  width: 1px;
  height: 28px;
  background: var(--hairline);
  flex-shrink: 0;
}

.search-bar .search-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--coral);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
  /* Balanced breathing room: the button sits 6px (--space-6, the bar's own
     padding) from the last field on its left and the pill edge on its right,
     so it reads as an integrated part of the bar rather than jammed against
     the Guest Count field */
  margin-left: var(--space-6);
}

.search-bar .search-btn:hover {
  background: var(--coral-hover);
  transform: scale(1.05);
}

.search-bar .search-btn svg {
  width: 20px;
  height: 20px;
}

/* ============================================================
   10. STARS / RATINGS
   ============================================================ */
.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--gold);
}

.stars svg {
  width: 16px;
  height: 16px;
  fill: var(--gold);
}

.stars .empty {
  fill: none;
  stroke: var(--hairline-strong);
}

.rating-large {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.rating-large .rating-value {
  font-size: var(--text-display-md);
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-display);
}

/* ============================================================
   11. HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 100px;
}

/* Airbnb keeps the canvas pure white - no gradient atmosphere */
.hero-gradient {
  display: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 8px 20px;
  background: var(--plum-50);
  border: 1px solid var(--plum-100);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--plum);
  margin-bottom: var(--space-24);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--ink);
  margin-bottom: var(--space-24);
}

/* Single Rausch moment in the hero */
.hero-title .accent {
  color: var(--coral);
}

.hero-subtitle {
  font-size: var(--text-body-lg);
  color: var(--ink-secondary);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto var(--space-40);
}

.hero-search {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-32);
}

.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  flex-wrap: wrap;
}

.hero-trust .trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-body-sm);
  color: var(--ink-secondary);
}

.hero-trust .trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--trust-green);
}

/* ============================================================
   12. CATEGORY SECTION
   ============================================================ */
.category-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2xl);
  padding: var(--space-32);
  text-align: center;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  z-index: 0;
}

/* Hover feedback is the single shadow tier - no tinted overlays */
.category-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--hairline);
}

.category-card .category-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-20);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.category-card .category-icon svg {
  width: 32px;
  height: 32px;
}

.category-card:nth-child(1) .category-icon {
  background: var(--plum-50);
  color: var(--plum);
}
.category-card:nth-child(2) .category-icon {
  background: var(--gold-light);
  color: var(--gold);
}
.category-card:nth-child(3) .category-icon {
  background: var(--coral-light);
  color: var(--coral);
}

.category-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-heading-md);
  font-weight: 600;
  margin-bottom: var(--space-8);
  position: relative;
  z-index: 1;
}

.category-card p {
  font-size: var(--text-body-sm);
  color: var(--ink-muted);
  position: relative;
  z-index: 1;
}

/* ============================================================
   13. SECTION HEADERS
   ============================================================ */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-56);
}

.section-header .section-eyebrow {
  display: inline-block;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: var(--space-12);
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: 600;
  letter-spacing: -0.5px;
  margin-bottom: var(--space-16);
}

.section-header p {
  font-size: var(--text-body-lg);
  color: var(--ink-secondary);
  line-height: 1.65;
}

/* ============================================================
   14. HOW IT WORKS
   ============================================================ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-40);
  position: relative;
}

.steps-grid::before {
  content: '';
  position: absolute;
  top: 48px;
  left: calc(16.67% + 24px);
  right: calc(16.67% + 24px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--plum-200) 0, var(--plum-200) 8px, transparent 8px, transparent 16px);
}

.step-card {
  text-align: center;
  position: relative;
}

.step-card .step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-heading-md);
  font-weight: 700;
  margin: 0 auto var(--space-24);
  position: relative;
  z-index: 1;
}

/* Ink circles - accent color is reserved for CTAs */
.step-card .step-number { background: var(--ink); color: white; }

.step-card .step-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto var(--space-20);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-card .step-icon svg {
  width: 40px;
  height: 40px;
}

.step-card h3 {
  font-size: var(--text-heading-md);
  font-weight: 600;
  margin-bottom: var(--space-8);
}

.step-card p {
  font-size: var(--text-body-sm);
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ============================================================
   15. TRUST SECTION
   ============================================================ */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
}

.trust-item-card {
  text-align: center;
  padding: var(--space-32);
  border-radius: var(--radius-2xl);
  background: var(--surface);
  border: 1px solid var(--hairline);
  transition: all var(--duration-normal) var(--ease-out);
}

.trust-item-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.trust-item-card .trust-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-16);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-item-card .trust-icon svg {
  width: 28px;
  height: 28px;
}

.trust-item-card:nth-child(1) .trust-icon { background: var(--trust-green-light); color: var(--trust-green); }
.trust-item-card:nth-child(2) .trust-icon { background: var(--plum-50); color: var(--plum); }
.trust-item-card:nth-child(3) .trust-icon { background: var(--gold-light); color: var(--gold); }
.trust-item-card:nth-child(4) .trust-icon { background: var(--coral-light); color: var(--coral); }

.trust-item-card h4 {
  font-weight: 600;
  margin-bottom: var(--space-8);
}

.trust-item-card p {
  font-size: var(--text-body-sm);
  color: var(--ink-muted);
}

/* ============================================================
   16. TESTIMONIALS
   ============================================================ */
.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2xl);
  padding: var(--space-32);
  transition: all var(--duration-normal) var(--ease-out);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
}

.testimonial-card .testimonial-text {
  font-size: var(--text-body);
  font-style: normal;
  color: var(--ink-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-24);
  font-family: var(--font-body);
  font-weight: 400;
}

.testimonial-card .testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.testimonial-card .author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--text-body-lg);
  color: white;
  flex-shrink: 0;
}

.testimonial-card .author-info h5 {
  font-weight: 600;
  font-size: var(--text-body);
}

.testimonial-card .author-info p {
  font-size: var(--text-body-sm);
  color: var(--ink-muted);
}

/* ============================================================
   17. CTA BAND
   ============================================================ */
/* Soft-gray editorial band - Rausch CTA is the only color moment */
.cta-band {
  background: var(--canvas-alt);
  color: var(--ink);
  border-radius: var(--radius-3xl);
  padding: var(--space-80) var(--space-48);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band > * { position: relative; z-index: 1; }

.cta-band h2 {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: 700;
  margin-bottom: var(--space-16);
}

.cta-band p {
  font-size: var(--text-body-lg);
  color: var(--ink-muted);
  max-width: 500px;
  margin: 0 auto var(--space-32);
  line-height: 1.7;
}

.cta-band .btn-primary {
  background: var(--coral);
  color: var(--ink-on-primary);
}

.cta-band .btn-primary:hover {
  background: var(--coral-hover);
}

/* ============================================================
   18. FOOTER
   ============================================================ */
/* Light footer - white surface matches the page canvas (no contrast footer) */
.footer {
  background: var(--canvas);
  color: var(--ink);
  border-top: 1px solid var(--hairline-light);
  padding: var(--space-48) 0 var(--space-32);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-48);
  margin-bottom: var(--space-48);
}

.footer-brand .navbar-logo {
  color: var(--coral);
  margin-bottom: var(--space-16);
}

.footer-brand .footer-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-body-sm);
  color: var(--coral);
  margin: -8px 0 12px;
  letter-spacing: 0.2px;
}

.footer-brand p {
  font-size: var(--text-body-sm);
  color: var(--ink-muted);
  line-height: 1.7;
  max-width: 300px;
}

.footer-col h4 {
  font-size: var(--text-body);
  font-weight: 500;
  margin-bottom: var(--space-20);
  color: var(--ink);
}

.footer-col ul { display: flex; flex-direction: column; gap: var(--space-12); }

.footer-col ul li a {
  font-size: var(--text-body-sm);
  color: var(--ink-secondary);
  transition: color var(--duration-fast);
  cursor: pointer;
}

.footer-col ul li a:hover { color: var(--ink); text-decoration: underline; }

.footer-bottom {
  padding-top: var(--space-32);
  border-top: 1px solid var(--hairline-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-caption);
  color: var(--ink-muted);
}

.footer-social {
  display: flex;
  gap: var(--space-16);
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-dark-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: all var(--duration-fast);
  cursor: pointer;
}

.footer-social a:hover {
  background: var(--ink);
  color: white;
}

.footer-social a svg { width: 18px; height: 18px; }

/* ============================================================
   19. STATS / COUNTER
   ============================================================ */
.stats-row {
  display: flex;
  justify-content: center;
  gap: var(--space-64);
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
}

.stat-item .stat-value {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: 700;
  color: var(--plum);
  line-height: 1;
  margin-bottom: var(--space-8);
}

.stat-item .stat-label {
  font-size: var(--text-body-sm);
  color: var(--ink-muted);
  font-weight: 500;
}

/* ============================================================
   20. ANIMATIONS
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered children */
.stagger-children .fade-in:nth-child(1) { transition-delay: 0s; }
.stagger-children .fade-in:nth-child(2) { transition-delay: 0.1s; }
.stagger-children .fade-in:nth-child(3) { transition-delay: 0.2s; }
.stagger-children .fade-in:nth-child(4) { transition-delay: 0.3s; }
.stagger-children .fade-in:nth-child(5) { transition-delay: 0.4s; }
.stagger-children .fade-in:nth-child(6) { transition-delay: 0.5s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-in-left, .fade-in-right, .scale-in {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .hero-gradient::before,
  .hero-gradient::after {
    animation: none;
  }
}

/* ============================================================
   21. DASHBOARD-SPECIFIC
   ============================================================ */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
}

/* Light sidebar - white surface with a hairline, ink text */
.sidebar {
  width: 260px;
  background: var(--canvas);
  color: var(--ink);
  border-right: 1px solid var(--hairline-light);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  overflow-y: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-bottom: var(--space-24);
  margin-bottom: var(--space-24);
  border-bottom: 1px solid var(--hairline-light);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--ink-muted);
  transition: all var(--duration-fast);
  cursor: pointer;
}

.sidebar-nav a:hover {
  background: var(--canvas-alt);
  color: var(--ink);
}

.sidebar-nav a.active {
  background: var(--ink);
  color: white;
}

.sidebar-nav a svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.dashboard-main {
  flex: 1;
  margin-left: 260px;
  padding: var(--space-32);
  background: var(--canvas);
  min-height: 100vh;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-32);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
  margin-bottom: var(--space-32);
}

.metric-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: var(--space-24);
}

.metric-card .metric-label {
  font-size: var(--text-body-sm);
  color: var(--ink-muted);
  margin-bottom: var(--space-8);
}

.metric-card .metric-value {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.metric-card .metric-change {
  font-size: var(--text-caption);
  font-weight: 500;
}

.metric-card .metric-change.positive { color: var(--trust-green); }
.metric-card .metric-change.negative { color: var(--error); }

/* Table */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.data-table thead {
  background: var(--canvas-alt);
}

.data-table th {
  padding: 14px 20px;
  text-align: left;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink-secondary);
  border-bottom: 1px solid var(--hairline);
}

.data-table td {
  padding: 16px 20px;
  font-size: var(--text-body-sm);
  color: var(--ink);
  border-bottom: 1px solid var(--hairline-light);
}

.data-table tbody tr {
  transition: background var(--duration-fast);
}

.data-table tbody tr:hover {
  background: var(--canvas);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Status pills */
.status {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro);
  font-weight: 600;
}

.status-new { background: var(--info-light); color: var(--info); }
.status-quoted { background: var(--gold-light); color: var(--gold-deep); }
.status-confirmed { background: var(--trust-green-light); color: var(--trust-green); }
.status-delivered { background: var(--plum-50); color: var(--plum); }
.status-cancelled { background: var(--error-light); color: var(--error); }

/* --- Supplier portfolio assets (video / brochure / menu) --- */
.asset-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.asset-rows { display: grid; gap: var(--space-8); }
.asset-row, .asset-item {
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--surface);
}
.asset-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.asset-meta b { font-size: var(--text-body-sm); }
.asset-meta span {
  font-size: var(--text-caption); color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asset-list { display: grid; gap: var(--space-8); margin-top: var(--space-16); }
@media (max-width: 520px) {
  .asset-row, .asset-item { flex-wrap: wrap; }
  .asset-meta { flex-basis: 100%; }
}

/* ============================================================
   ONBOARDING METER
   Shown on both dashboards' Profile panels until the account is
   complete. Percentage and the missing-field chips both come from
   profile_completion() (migration 0025) - nothing here is a guess.
   ============================================================ */
.onboard-card {
  margin-bottom: var(--space-24);
  border-left: 3px solid var(--gold);
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--surface) 60%);
}
.onboard-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-16); margin-bottom: var(--space-12);
}
.onboard-head h3 { margin-bottom: 2px; }
.onboard-pct {
  font-family: var(--font-display); font-size: var(--text-heading-md);
  font-weight: 700; color: var(--gold-deep); line-height: 1; white-space: nowrap;
}
.onboard-bar {
  height: 8px; border-radius: var(--radius-pill);
  background: var(--hairline-light); overflow: hidden;
}
.onboard-bar > div {
  height: 100%; width: 0; border-radius: var(--radius-pill);
  background: var(--gold);
  transition: width var(--duration-slow) var(--ease-out), background var(--duration-base);
}
.onboard-bar > div.done { background: var(--trust-green); }
.onboard-missing {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-12);
}
.onboard-missing .chip {
  font-size: var(--text-micro); font-weight: 600;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--hairline);
  color: var(--ink-secondary);
}
.onboard-missing .chip.ok { background: var(--trust-green-light); border-color: transparent; color: var(--trust-green); }
@media (max-width: 520px) {
  .onboard-head { flex-direction: column; gap: var(--space-8); }
  .onboard-pct { font-size: var(--text-heading-sm); }
}

/* --- Dispute case states + priority dots ---
   Shared by both dashboards (disputes-ui.js renders the same markup for the
   customer and supplier panels), so these live here rather than in either
   page's scoped block. */
.status-open { background: var(--info-light); color: var(--info); }
.status-review { background: var(--gold-light); color: var(--gold-deep); }
.status-waiting { background: var(--warning-light); color: var(--gold-deep); }
.status-resolved { background: var(--trust-green-light); color: var(--trust-green); }
.status-closed { background: var(--hairline-light); color: var(--ink-muted); }

.priority-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; margin-right: 6px; vertical-align: middle;
}
.prio-low { background: var(--ink-faint); }
.prio-medium { background: var(--info); }
.prio-high { background: var(--warning); }
.prio-critical { background: var(--error); }

/* ============================================================
   22. MULTI-STEP FORM
   ============================================================ */
.form-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-48);
}

.form-progress .progress-step {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.form-progress .step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--text-body-sm);
  border: 2px solid var(--hairline);
  color: var(--ink-muted);
  background: var(--surface);
  transition: all var(--duration-normal);
}

.form-progress .step-dot.active {
  background: var(--plum);
  border-color: var(--plum);
  color: white;
}

.form-progress .step-dot.completed {
  background: var(--trust-green);
  border-color: var(--trust-green);
  color: white;
}

.form-progress .step-line {
  width: 60px;
  height: 2px;
  background: var(--hairline);
  transition: background var(--duration-normal);
}

.form-progress .step-line.completed {
  background: var(--trust-green);
}

.form-progress .step-label {
  font-size: var(--text-caption);
  color: var(--ink-muted);
  font-weight: 500;
}

.form-progress .step-label.active { color: var(--plum); }

.form-step {
  display: none;
}

.form-step.active {
  display: block;
  animation: fadeInUp 0.4s var(--ease-out);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   23. BOOKING / ESCROW
   ============================================================ */
.escrow-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  padding: var(--space-40) 0;
}

.escrow-timeline::before {
  content: '';
  position: absolute;
  top: 66px;
  left: 40px;
  right: 40px;
  height: 3px;
  background: var(--hairline);
  border-radius: var(--radius-pill);
}

.escrow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  flex: 1;
}

.escrow-step .escrow-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-16);
  transition: all var(--duration-normal);
}

.escrow-step .escrow-dot svg {
  width: 22px;
  height: 22px;
  color: var(--ink-muted);
}

.escrow-step.active .escrow-dot {
  border-color: var(--plum);
  background: var(--plum-50);
}

.escrow-step.active .escrow-dot svg { color: var(--plum); }

.escrow-step.completed .escrow-dot {
  border-color: var(--trust-green);
  background: var(--trust-green);
}

.escrow-step.completed .escrow-dot svg { color: white; }

.escrow-step h5 {
  font-weight: 600;
  font-size: var(--text-body-sm);
  margin-bottom: var(--space-4);
}

.escrow-step p {
  font-size: var(--text-caption);
  color: var(--ink-muted);
  max-width: 140px;
}

/* ============================================================
   24. PROVIDER PROFILE PAGE
   ============================================================ */
.profile-hero {
  height: 360px;
  background: var(--surface-dark-card);
  position: relative;
  border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
  overflow: hidden;
}

.profile-hero .gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-4);
  height: 100%;
}

.profile-hero .gallery-grid .gallery-item {
  background: var(--canvas-alt);
  cursor: pointer;
  transition: opacity var(--duration-fast);
  overflow: hidden;
}

.profile-hero .gallery-grid .gallery-item:hover { opacity: 0.9; }

.profile-hero .gallery-grid .gallery-item:first-child {
  grid-row: 1 / -1;
}

.profile-info-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-24) 0;
}

.package-card {
  background: var(--surface);
  border: 2px solid var(--hairline);
  border-radius: var(--radius-2xl);
  padding: var(--space-32);
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Pins the CTA to the card's bottom edge regardless of how many
   inclusion lines precede it, so buttons align across a row of
   grid-stretched cards instead of each following its own content. */
.package-card > .btn {
  margin-top: auto;
}

.package-card.featured {
  border-color: var(--plum);
  box-shadow: var(--shadow-glow-plum);
}

.package-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--plum);
  color: white;
  padding: 4px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.package-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  margin-bottom: var(--space-8);
}

.package-card .package-price {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: 700;
  color: var(--plum);
  margin-bottom: var(--space-4);
}

.package-card .package-price span {
  font-size: var(--text-body-sm);
  color: var(--ink-muted);
  font-weight: 400;
  font-family: var(--font-body);
}

.package-card .inclusions {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: var(--space-24) 0;
}

.package-card .inclusions li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: var(--text-body-sm);
  color: var(--ink-secondary);
}

.package-card .inclusions li svg {
  width: 18px;
  height: 18px;
  color: var(--trust-green);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================
   25. FILTER BAR (Search Page)
   ============================================================ */
.filter-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-16) 0;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.filter-pills {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  align-items: center;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: 8px 16px;
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all var(--duration-fast);
  white-space: nowrap;
}

.filter-pill:hover {
  border-color: var(--plum-200);
  color: var(--plum);
}

.filter-pill.active {
  background: var(--plum-50);
  border-color: var(--plum);
  color: var(--plum);
}

.filter-pill svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   26. CALENDAR
   ============================================================ */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.calendar-day-header {
  padding: var(--space-12);
  text-align: center;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--canvas-alt);
}

.calendar-day {
  padding: var(--space-12);
  min-height: 80px;
  background: var(--surface);
  font-size: var(--text-body-sm);
  cursor: pointer;
  transition: background var(--duration-fast);
}

.calendar-day:hover { background: var(--canvas); }
.calendar-day.today { background: var(--plum-50); font-weight: 600; }
.calendar-day.has-event { position: relative; }

.calendar-day .event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  margin-top: var(--space-4);
}

.calendar-day.blocked {
  background: var(--canvas-alt);
  color: var(--ink-faint);
  cursor: not-allowed;
}

/* ============================================================
   27. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
  .steps-grid::before { display: none; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  /* min-width:0 lets the flex main shrink below its content's intrinsic width,
     so wide tables scroll inside their own box instead of stretching the page */
  .dashboard-main { margin-left: 0; min-width: 0; }
  .sidebar { display: none; }
  .stats-row { gap: var(--space-40); }
}

@media (max-width: 768px) {
  :root {
    --text-display-xxl: 2.75rem;
    --text-display-xl: 2.25rem;
    --text-display-lg: 1.75rem;
    --text-display-md: 1.5rem;
  }

  .container { padding: 0 var(--space-16); }
  .section { padding: var(--space-64) 0; }
  .section-lg { padding: var(--space-80) 0; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; gap: var(--space-32); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-32); }
  .metrics-grid { grid-template-columns: 1fr; }

  .navbar { padding: 0 var(--space-16); }
  .navbar-inner { height: 64px; }
  .mobile-menu { top: 64px; left: 0; right: 0; border-radius: 0 0 var(--radius-xl) var(--radius-xl); max-height: calc(100vh - 64px); overflow-y: auto; }
  .navbar-nav { display: none; }
  /* Declutter the top bar - all nav/actions live in the hamburger sheet on mobile */
  .navbar-actions { display: none; }
  .hamburger { display: flex; }

  /* Wide data tables scroll inside their own container instead of overflowing the page */
  .data-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* Horizontal slide-in animations would push off-screen elements past the right
     edge (causing a horizontal scroll on load) - slide vertically on mobile instead */
  .fade-in-left, .fade-in-right { transform: translateY(24px); }
  .fade-in-left.visible, .fade-in-right.visible { transform: none; }

  /* Search bar spans the viewport cleanly */
  .search-bar { max-width: 100%; }
  .hero-search { width: 100%; }

  .hero { min-height: auto; padding: 120px 0 var(--space-64); }
  .hero-title { letter-spacing: -1px; }
  .hero-trust { gap: var(--space-16); }

  .search-bar {
    flex-direction: column;
    /* stretch (not the base rule's center) so every stacked field fills the
       width - otherwise fields keep their intrinsic width and the Guest Count
       placeholder clips on narrow phones */
    align-items: stretch;
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
  }
  .search-bar .search-field { padding: 14px 16px; }   /* full-width now, so the field is the touch row */
  /* Date field: match the other stacked inputs - value/placeholder text on the
     left, calendar icon pinned to the right and vertically centred. Empty date
     inputs ignore [placeholder], but the browser's own dd-mm-yyyy format text
     (greyed while empty) reads as the placeholder once it is left-aligned.
     Fixes the "blank field with a centred chevron" seen on some Android builds. */
  .search-bar input[type="date"]::-webkit-datetime-edit { flex: 1 1 auto; text-align: left; }
  .search-bar input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; flex-shrink: 0; }
  .search-bar .search-divider { width: 100%; height: 1px; }
  .search-bar .search-btn { width: 100%; border-radius: var(--radius-xl); height: 48px; margin-left: 0; }

  .cta-band { padding: var(--space-48) var(--space-24); border-radius: var(--radius-2xl); }

  .footer-bottom { flex-direction: column; gap: var(--space-16); text-align: center; }

  .escrow-timeline { flex-direction: column; gap: var(--space-32); }
  .escrow-timeline::before { display: none; }
  .escrow-step { flex-direction: row; text-align: left; gap: var(--space-16); }
  .escrow-step .escrow-dot { margin-bottom: 0; }

  .profile-hero { height: 240px; }
  .profile-hero .gallery-grid { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .profile-hero .gallery-grid .gallery-item:not(:first-child) { display: none; }

  .stats-row { gap: var(--space-32); }
}

@media (max-width: 375px) {
  :root {
    --text-display-xxl: 2.25rem;
    --text-display-xl: 1.875rem;
    --text-display-lg: 1.5rem;
  }
}

/* ============================================================
   28. UTILITIES
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bg-canvas { background: var(--canvas); }
.bg-white { background: var(--canvas-pure); }
.bg-plum-light { background: var(--canvas-plum); }
.bg-warm { background: var(--canvas-warm); }
.bg-alt { background: var(--canvas-alt); }
.bg-dark { background: var(--surface-dark); color: var(--ink-on-dark); }

.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-pill { border-radius: var(--radius-pill); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.overflow-hidden { overflow: hidden; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   14. MOBILE RESPONSIVENESS  (added v12)
   ------------------------------------------------------------
   Appended last so these rules win over earlier equal-specificity
   declarations. Findings come from a measured audit at 375x812.
   Desktop/tablet are untouched: everything here is inside a
   max-width media query, except the two global safety rules below.
   ============================================================ */

/* --- Global safety: nothing may push the page sideways --------- */
html { -webkit-text-size-adjust: 100%; }   /* stop iOS inflating text in landscape */
body { overflow-x: hidden; }               /* last-resort guard against stray overflow */

/* Grid/flex children default to min-width:auto and refuse to shrink
   below their content, which silently widens the page. Opt them out. */
.grid > *,
.faq-layout > *,
.brief-layout > *,
.dashboard-layout > * { min-width: 0; }

/* Media should never exceed its box. */
img, svg, video { max-width: 100%; }

/* ============================================================
   TABLET  (<= 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .compare-wrap,
  .card-flat { -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   MOBILE  (<= 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* --- Touch targets: WCAG 2.5.8 / Apple HIG ~44px ------------- */

  /* The hamburger is the primary mobile nav control - it measured
     24px tall. Pad it out without moving the icon. */
  .hamburger {
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    margin-right: -10px;   /* keep the optical edge alignment */
  }

  /* Footer + breadcrumb links measured 17px tall. Give them a real
     tap area using padding (not height) so text alignment holds. */
  .footer-col ul li a,
  .footer-brand a:not(.navbar-logo),
  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    line-height: 1.2;
  }

  /* Labels that wrap a radio/checkbox ARE the touch target - keep them
     comfortably tappable (the 20px control itself is not the hit area). */
  .seg-radio label,
  .radio-group label,
  .style-grid label { min-height: 44px; }
  .footer-col ul { display: flex; flex-direction: column; }

  /* Buttons and form controls: minimum comfortable height. */
  .btn,
  .btn-sm,
  .input-field,
  select.input-field,
  .filter-select,
  .seg button,
  .faq-navlink,
  .btn-signin {
    min-height: 44px;
  }
  textarea.input-field { min-height: 120px; }

  /* iOS Safari zooms the page when a focused input is under 16px.
     Force 16px on every text-entry control. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  input[type="password"],
  select,
  textarea,
  .input-field,
  .filter-select {
    font-size: 16px;
  }

  /* Checkboxes/radios are easier to hit at 20px. */
  input[type="checkbox"],
  input[type="radio"] { width: 20px; height: 20px; }

  /* --- Tables: scroll inside their card, never clip ------------ */
  /* Dashboard tables were squeezing 7-8 columns into ~309px and
     clipping content. Let the card scroll and keep columns legible. */
  .card-flat { overflow-x: auto; }
  /* width:max-content lets the table size to its content (with nowrap cells)
     instead of compressing 7-8 columns; min-width:100% keeps a narrow table
     filling the card. The card scrolls - the page never does. */
  .data-table { width: max-content; min-width: 100%; }
  .data-table th,
  .data-table td { white-space: nowrap; }

  /* --- Layout ------------------------------------------------- */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .two-col-row { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-32); }

  /* Section rhythm tightens up on small screens. */
  .section { padding-top: var(--space-48); padding-bottom: var(--space-48); }
  .container { padding-left: var(--space-16); padding-right: var(--space-16); }

  /* Long unbroken strings (refs, emails, URLs) must not widen the page. */
  h1, h2, h3, h4, p, td, th, li, dd, .provider-name { overflow-wrap: break-word; }
}

/* ============================================================
   SMALL PHONES  (<= 480px)
   ============================================================ */
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr; }

  /* Stacked action buttons go full width so they are easy to hit. */
  .faq-help-actions .btn,
  .success-actions .btn,
  .form-btn-row .btn { width: 100%; }
  .form-btn-row { flex-direction: column-reverse; gap: var(--space-12); }
}

/* ============================================================
   LANDSCAPE PHONES - short viewports
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
  .navbar { position: static; }   /* reclaim vertical space */
  body { padding-top: 0 !important; }
}

/* ============================================================
   iPhone safe areas (notch / home indicator)
   ============================================================ */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .footer { padding-bottom: max(var(--space-32), env(safe-area-inset-bottom)); }
  }
}

/* Respect reduced-motion for the animation-heavy sections. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}