/* ================================================================
   eventsplanning.ai — Design System  (v3 · Bright Minimalist)
   Warm ivory canvas · gold accents · charcoal ink · soft shadows
   Palette tuned to the gold-on-cream logo.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* DO NOT put overflow-x back on html. Stray horizontal page scroll is contained by
   `overflow-x: hidden` on BODY (just below) and that is deliberate: the viewport only
   takes its overflow from body while html is `visible` in BOTH axes. Setting anything
   else here silently breaks two things at once —
     · body stops propagating and becomes a scroll container itself, which kills every
       position:sticky on the page (the exact thing the old `clip` was meant to avoid);
     · `document.body.style.overflow='hidden'` no longer locks the viewport, so the page
       keeps scrolling behind every open modal (17 call sites all rely on this). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; color: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Variables ──────────────────────────────────────────────────── */
:root {
  /* Surfaces — warm ivory family */
  --cream:    #FFFFFF;   /* page base */
  --cream-2:  #FBFBFE;   /* alt section */
  --cream-3:  #F6F6FC;   /* deeper warm */
  --white:    #FFFFFF;   /* cards */
  /* eventsplanning.ai core palette (v4) */
  --iris:#6B3BF2; --iris-deep:#4517C0; --iris-light:#9670F7; --iris-soft:#F2EEFE;
  --violet:#A22FE2; --blue:#1F6BEC; --blue-deep:#1247A6; --aqua:#26CFEF;
  --n-50:#FBFBFE; --n-100:#F6F6FC; --n-200:#E8E9F4; --n-400:#B9BCD4; --n-600:#666A8C;
  --grad-brand:linear-gradient(120deg,#A22FE2 0%,#6B3BF2 48%,#1F6BEC 100%);
  --grad-aqua:linear-gradient(135deg,#26CFEF 0%,#1F6BEC 100%);
  --grad-spectrum:linear-gradient(90deg,#A22FE2 0%,#6B3BF2 34%,#1F6BEC 68%,#26CFEF 100%);
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  /* Gold (from logo) */
  --gold:        #6B3BF2;
  --gold-deep:   #4517C0;
  --gold-light:  #9670F7;
  --gold-soft:   #F2EEFE;   /* tinted fill */
  --gold-glow:   rgba(107,59,242, 0.22);

  /* Ink / text */
  --ink:       #1A1339;
  --ink-soft:  #666A8C;
  /* #B9BCD4 measured 1.87:1 on white — below AA at any size, and it carried 135
     `color:` declarations across the guest and marketing pages. dashboard.css had
     already re-pointed this token to the AA-safe muted ink for its own scope; this is
     the same fix at the scope it always needed. 5.24:1 on white. De-emphasis comes
     from size, weight, uppercase and letter-spacing, not from unreadable contrast. */
  --ink-faint: #666A8C;

  /* Lines / borders */
  --line:    rgba(26,19,57, 0.10);
  --line-2:  rgba(26,19,57, 0.16);
  --line-gold: rgba(107,59,242, 0.32);

  /* Light frosted glass (over images / sticky bars) */
  --glass:        rgba(255, 255, 255, 0.66);
  --glass-2:      rgba(255, 255, 255, 0.80);
  --glass-border: rgba(26,19,57, 0.12);

  /* Status (muted to fit warm palette) */
  --success:  #4f9d69;
  --warning:  #E8820C;
  --danger:   #c75b50;
  --info:     #1F6BEC;

  /* Layout */
  --sidebar-w: 268px;
  --topbar-h:  70px;

  /* Radii */
  --r-xs: 8px;  --r-sm: 12px;  --r-md: 18px;
  --r-lg: 24px; --r-xl: 32px;  --r-full: 9999px;

  /* Shadows — soft, warm, light-theme */
  --shadow-sm:  0 1px 3px rgba(26,19,57,0.06), 0 1px 2px rgba(26,19,57,0.04);
  --shadow-md:  0 8px 28px rgba(26,19,57,0.09);
  --shadow-lg:  0 24px 60px rgba(26,19,57,0.13);
  --shadow-gold:0 14px 36px rgba(107,59,242,0.22);

  --blur:    blur(16px) saturate(150%);

  /* Transitions */
  --t:      all 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: all 0.16s ease;

  --font-serif: 'Montserrat', system-ui, sans-serif;
  --font-sans:  'Montserrat', system-ui, sans-serif;

  /* ── Backward-compat aliases (legacy v1/v2 names → v3 light) ──── */
  --muted:       var(--ink-soft);
  --muted-2:     var(--ink-faint);
  --bg:          var(--cream);
  --bg-2:        var(--cream-2);
  --bg-3:        var(--cream-3);
  --gold-dark:   var(--gold-deep);
  --gold-glass:  var(--gold-soft);
  --gold-glass-2:var(--gold-soft);
  --gold-border: var(--line-gold);
  --glass-md:    var(--white);
  --glass-3:     var(--white);
  --blur-md:     var(--blur);
  --blur-lg:     var(--blur);
  --inset-hi:    0 0 0 0 transparent;
  --glass-hi:    rgba(255,255,255,0.5);
}

/* Soft warm ambient wash — keeps the flat cream from feeling sterile */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 40% at 85% 8%, rgba(150,112,247, 0.16), transparent 60%),
    radial-gradient(45% 40% at 8% 92%, rgba(162,47,226, 0.08), transparent 60%);
}

/* ── Typography ─────────────────────────────────────────────────── */
/* ── Keyboard focus, on every page ──────────────────────────────────────────
   Two rings on purpose. The iris ring reads on the light surfaces; the white halo
   behind it keeps it visible on the dark hero and footer, where iris alone goes muddy
   at about 2:1. Deliberately no border-radius here — an outline already follows the
   element’s own radius, and forcing one would square off the pill buttons while
   they are focused. Components that already draw their own focus state (.form-control,
   .rg-in, the sign-up fields) out-specify this and keep theirs.
   No halo on a text field: a field is focus-visible on every click, and one that sits
   bare inside a styled box (a search pill) turns its outline off and lets the box show
   focus — the halo still drew a second box inside the first. */
:focus-visible {
  outline: 2px solid var(--iris);
  outline-offset: 2px;
}
:focus-visible:where(:not(textarea, input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]))) {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55);
}
/* Pointer users never see it; only assistive and keyboard navigation do. */
:focus:not(:focus-visible) { outline: none; }

/* Touch. Mobile browsers paint their own translucent box over anything tapped — a
   rectangle in the browser's blue, drawn over pill-shaped buttons it doesn't follow, and
   it lingers. It is off everywhere; buttons answer a tap with their own press instead
   (the :active rules below and on each button family), and keyboard focus keeps the
   :focus-visible ring above. Inherited, so this one rule reaches every element. */
html { -webkit-tap-highlight-color: transparent; }

h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.13; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: clamp(2.5rem, 5.5vw, 4.4rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 600; }
h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 600; }
h4 { font-size: 1.12rem; font-weight: 600; }
p  { line-height: 1.72; }

.gradient-text {
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-deep) 55%, #1F6BEC 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.text-gold { color: var(--gold); }
.text-muted { color: var(--ink-soft); }
.text-center { text-align: center; }
.font-serif { font-family: var(--font-serif); }

/* ── Glass utility (light frost, for over-image use) ───────────── */
.glass {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
}
.glass-2 { background: var(--glass-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-md); }
.glass-gold { background: var(--gold-soft); border: 1px solid var(--line-gold); box-shadow: var(--shadow-md); }

/* Card — clean white with soft shadow */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 1.75rem;
  transition: var(--t);
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--line-gold); }
.card-gold { background: var(--gold-soft); border-color: var(--line-gold); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.74rem 1.7rem; border-radius: var(--r-full);
  font-weight: 600; font-size: 0.9rem; border: 1px solid transparent;
  transition: var(--t); white-space: nowrap; position: relative; isolation: isolate;
}
.btn-sm { padding: 0.46rem 1.05rem; font-size: 0.8rem; }
.btn-lg { padding: 0.92rem 2.3rem; font-size: 1rem; }
/* The press a tap now gets instead of the browser's highlight. */
.btn:active { transform: scale(0.97); }

/* ── Liquid-glass treatment applied to every button ──────────────
   ::before = "liquid" backdrop distortion (SVG turbulence/displacement)
   ::after  = glass rim / edge highlights. Button text sits between. */
.btn > * { position: relative; z-index: 1; }
/* keep button icons proportional to the label */
.btn > i, .btn > svg { font-size: 0.95em; line-height: 1; }
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  pointer-events: none;
  -webkit-backdrop-filter: url("#container-glass"); backdrop-filter: url("#container-glass");
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 2px 2px 0.5px -2px rgba(255,255,255,0.75),
    inset -2px -2px 0.5px -2px rgba(0,0,0,0.45),
    inset 1px 1px 1px -0.5px rgba(255,255,255,0.5),
    inset -1px -1px 1px -0.5px rgba(0,0,0,0.35);
  transition: box-shadow 0.3s ease;
}
@media (prefers-reduced-motion: reduce) { .btn::before { backdrop-filter: none; -webkit-backdrop-filter: none; } }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  color: #FFFFFF; font-weight: 700;
  box-shadow: 0 4px 14px rgba(26,19,57,0.12);
  border-color: rgba(69,23,192, 0.35);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(26,19,57,0.18); filter: brightness(1.04); }
.btn-gold:active { transform: translateY(0) scale(0.97); }   /* drop the hover lift, then press */

.btn-glass {
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-sm);
}
.btn-glass:hover { border-color: #B9BCD4; transform: translateY(-2px); box-shadow: var(--shadow-md); }   /* pinned: the only non-text consumer of the old --ink-faint, kept as-is */
.btn-glass:active { transform: translateY(0) scale(0.97); }   /* its hover lift would otherwise win over .btn:active */

.btn-outline-gold {
  background: var(--gold-soft); color: var(--gold-deep);
  border: 1px solid var(--line-gold);
}
.btn-outline-gold:hover { background: #EDE7FE; border-color: var(--gold); }

.btn-danger  { background: rgba(199,91,80,0.10); color: var(--danger); border-color: rgba(199,91,80,0.3); }
.btn-danger:hover { background: rgba(199,91,80,0.16); }
.btn-danger-solid { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger-solid:hover { background: #b54a40; border-color: #b54a40; }
.btn-success { background: rgba(79,157,105,0.10); color: var(--success); border-color: rgba(79,157,105,0.3); }
.btn-success:hover { background: rgba(79,157,105,0.16); }

/* ── Badge ──────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.32rem;
  padding: 0.26rem 0.72rem; border-radius: var(--r-full);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.badge-gold    { background: var(--gold-soft); color: var(--gold-deep); border: 1px solid var(--line-gold); }
.badge-success { background: rgba(79,157,105,0.12); color: var(--success); border: 1px solid rgba(79,157,105,0.3); }
.badge-warning { background: rgba(232,130,12,0.12); color: var(--warning); border: 1px solid rgba(232,130,12,0.3); }
.badge-danger  { background: rgba(199,91,80,0.12); color: var(--danger); border: 1px solid rgba(199,91,80,0.3); }
.badge-muted   { background: rgba(26,19,57,0.05); color: var(--ink-soft); border: 1px solid var(--line); }
.badge-unread  { background: var(--gold); color: #fff; border: 1px solid var(--gold-deep); }

/* ── Forms ──────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 0.45rem; }
.form-group label { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.07em; }
.form-control {
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink);
  padding: 0.78rem 1rem; font-size: 0.95rem;
  transition: var(--t); outline: none; width: 100%;
}
.form-control::placeholder { color: var(--ink-faint); }
.form-control:focus { border-color: var(--gold); background: #FFFFFF; box-shadow: 0 0 0 3px rgba(107,59,242,0.14); }
select.form-control option { background: var(--white); color: var(--ink); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* ── Divider ────────────────────────────────────────────────────── */
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); margin: 1.5rem 0; }

/* ── Section helpers ────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 4rem 0; position: relative; }
.section-sm { padding: 2.5rem 0; }
.section-header { text-align: center; margin-bottom: 2.5rem; }
.section-label {
  display: inline-block; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 1rem;
}
.section-title { margin-bottom: 1.1rem; }
.section-sub { color: var(--ink-soft); max-width: 580px; margin: 0 auto; font-size: 1.06rem; }

/* alt-tone section (replaces old .bg-dark) */
.bg-dark { background: var(--cream-2); }
.bg-pattern { background-image: radial-gradient(rgba(107,59,242,0.10) 1px, transparent 1px); background-size: 26px 26px; }

.flex { display: flex; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; }
.w-full { width: 100%; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }

/* ════════════════════════════════════════════════════════════════
   NAVBAR
════════════════════════════════════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: 74px; display: flex; align-items: center; padding: 0 2rem;
  background: rgba(255,255,255, 0.72);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line);
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1), background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  will-change: transform;
}
.navbar.scrolled { background: rgba(255,255,255, 0.92); border-bottom-color: var(--line-gold); box-shadow: var(--shadow-sm); }
.navbar.nav-hidden { transform: translateY(-100%); }   /* slide up when scrolling down */
.navbar-brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.navbar-logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-gold); }
.navbar-brand-text { font-family: var(--font-serif); font-size: 1.18rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.navbar-brand-text span { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; color: var(--iris); }
.navbar-nav { display: flex; align-items: center; gap: 0.2rem; margin: 0 auto; }
.navbar-nav a { padding: 0.45rem 1.05rem; border-radius: var(--r-full); font-size: 0.88rem; font-weight: 500; color: var(--ink-soft); transition: var(--t); }
.navbar-nav a:hover, .navbar-nav a.active { color: var(--ink); background: rgba(26,19,57,0.05); }
.navbar-actions { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.navbar-toggle { display: none; background: none; border: none; color: var(--ink); font-size: 1.4rem; padding: 0.25rem; }
.nav-drawer-cta { display: none; }   /* CTAs only appear inside the mobile drawer */
@media (max-width: 900px) {
  .navbar { padding: 0 1.25rem; }
  .navbar-nav { display: none; }
  .navbar-toggle { display: block; }
  .navbar-actions .btn { display: none; }   /* Log In / Get Started move into the drawer */
  .navbar-nav.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: 74px; left: 0; right: 0; margin: 0; list-style: none;
    background: rgba(255,255,255,0.98); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--line-gold); box-shadow: var(--shadow-md);
    padding: 0.5rem 1.1rem 1rem; gap: 0.1rem; max-height: calc(100dvh - 74px); overflow-y: auto; z-index: 80;
  }
  .navbar-nav.open li { width: 100%; }
  .navbar-nav.open a:not(.btn) { display: block; width: 100%; padding: 0.95rem 0.6rem; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
  .navbar-nav.open .nav-drawer-cta { display: block; margin-top: 0.55rem; }
  .navbar-nav.open .nav-drawer-cta .btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
   HERO  — video framed by a soft cream wash, dark editorial type
════════════════════════════════════════════════════════════════ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--cream); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, var(--cream) 0%, rgba(255,255,255,0.96) 34%, rgba(255,255,255,0.62) 55%, rgba(255,255,255,0.12) 78%, rgba(255,255,255,0) 100%);
}
.hero-overlay-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 200px; z-index: 2; background: linear-gradient(to top, var(--cream), transparent); }
.hero-content { position: relative; z-index: 3; max-width: 1200px; margin: 0 auto; padding: 0 2rem; width: 100%; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(255,255,255,0.7);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line-gold);
  padding: 0.5rem 1.1rem; border-radius: var(--r-full);
  margin-bottom: 1.6rem; box-shadow: var(--shadow-sm);
  animation: fadeInDown 0.8s ease both;
}
.hero-title { font-size: clamp(2.9rem, 6.4vw, 5.4rem); font-weight: 700; line-height: 1.05; margin-bottom: 1.5rem; color: var(--ink); animation: fadeInUp 0.8s ease 0.1s both; }
.hero-title .accent { font-style: italic; font-weight: 500;
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-subtitle { font-size: clamp(1rem, 1.7vw, 1.22rem); color: var(--ink-soft); max-width: 520px; margin-bottom: 2.5rem; line-height: 1.72; animation: fadeInUp 0.8s ease 0.2s both; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeInUp 0.8s ease 0.3s both; }
.hero-scroll { position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; color: var(--ink-soft); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; animation: bounce 2.2s infinite; }
.hero-scroll i { font-size: 1rem; color: var(--gold-deep); }

/* ── Stats strip ────────────────────────────────────────────────── */
.stats-strip { background: var(--gold-soft); border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line-gold); padding: 1.8rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-item { text-align: center; padding: 0.5rem 1rem; border-right: 1px solid var(--line-gold); }
.stat-item:last-child { border-right: none; }
.stat-num { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--gold-deep); }
.stat-label { font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.35rem; }
@media (max-width: 600px) { .stats-grid { grid-template-columns: repeat(2,1fr); } .stat-item:nth-child(2) { border-right: none; } }

/* ── Feature cards ──────────────────────────────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.5rem; }
.feature-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2.1rem; transition: var(--t); position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
}
.feature-card::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--gold-light), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; }
.feature-card:hover::before { transform: scaleX(1); }
.feature-card:hover { border-color: var(--line-gold); transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.feature-icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: var(--gold-soft); border: 1px solid var(--line-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem; margin-bottom: 1.3rem; color: var(--gold-deep);
}
.feature-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.55rem; font-family: var(--font-serif); }
.feature-desc { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.68; }

/* ── How it works ───────────────────────────────────────────────── */
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; position: relative; }
.steps-row::before { content: ''; position: absolute; top: 42px; left: calc(16.6% + 1rem); right: calc(16.6% + 1rem); height: 2px; background: linear-gradient(90deg, transparent, var(--line-gold), var(--gold), var(--line-gold), transparent); }
.step-item { text-align: center; position: relative; }
.step-num {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1.9rem; font-weight: 700; color: var(--gold-deep);
  margin: 0 auto 1.5rem; box-shadow: var(--shadow-md);
}
.step-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.6rem; font-family: var(--font-serif); }
.step-desc { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.66; }
@media (max-width: 768px) { .steps-row { grid-template-columns: 1fr; } .steps-row::before { display: none; } }

/* ── Services (legacy — kept for any reuse) ─────────────────────── */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.service-card { position: relative; border-radius: var(--r-lg); overflow: hidden; height: 340px; cursor: pointer; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.service-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.service-card:hover .service-card-img { transform: scale(1.07); }
.service-card-overlay { position: absolute; inset: 0; transition: var(--t); background: linear-gradient(to top, rgba(26,19,57,0.85) 0%, rgba(26,19,57,0.25) 55%, transparent 100%); }
.service-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.75rem; color: #fff; }
.service-card-title { font-size: 1.25rem; font-weight: 600; font-family: var(--font-serif); margin-bottom: 0.35rem; color: #fff; }

/* ════════════════════════════════════════════════════════════════
   SLIDESHOW  — replaces "What We Do"; vertical wipe transition
════════════════════════════════════════════════════════════════ */
.slideshow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.slideshow > * { min-width: 0; }
@media (max-width: 920px) { .slideshow { grid-template-columns: 1fr; gap: 1.75rem; } }

.slideshow-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--cream-3);
  border: 1px solid var(--line);
}
.slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: hidden; will-change: clip-path;
}
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide.active img { animation: kenburns 6s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }

/* caption + progress over the stage */
.slide-caption {
  position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 5;
  background: rgba(255,255,255,0.78);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md); padding: 0.85rem 1.2rem;
  box-shadow: var(--shadow-md); min-width: 180px;
}
.slide-caption-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.slide-caption-title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-top: 0.1rem; }
.slide-counter { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 5; background: rgba(255,255,255,0.78); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); border-radius: var(--r-full); padding: 0.35rem 0.85rem; font-size: 0.78rem; font-weight: 700; color: var(--ink); letter-spacing: 0.05em; box-shadow: var(--shadow-sm); }
.slide-counter b { color: var(--gold-deep); }

.slide-arrows { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 0.75rem; z-index: 5; pointer-events: none; }
.slide-arrow {
  pointer-events: auto; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.82); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
  box-shadow: var(--shadow-md); transition: var(--t); opacity: 0;
}
.slideshow-stage:hover .slide-arrow { opacity: 1; }
.slide-arrow:hover { background: #fff; color: var(--gold-deep); transform: scale(1.08); }

.slide-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.4); z-index: 6; }
.slide-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-light), var(--gold)); }
.slide-progress-fill.run { animation: slideProgress linear forwards; }
@keyframes slideProgress { from { width: 0; } to { width: 100%; } }

/* side copy */
.slideshow-copy .section-label { margin-bottom: 0.8rem; }
.slideshow-copy h2 { margin-bottom: 1.1rem; }
.slideshow-copy p { color: var(--ink-soft); margin-bottom: 1.75rem; line-height: 1.8; }
.slideshow-services { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.75rem; }
.slideshow-service-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); transition: var(--t); }
.slideshow-service-row:last-child { border-bottom: none; }
.slideshow-service-row i { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--gold-soft); border: 1px solid var(--line-gold); color: var(--gold-deep); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; }
.slideshow-service-row .ss-name { font-weight: 600; font-size: 0.95rem; }
.slideshow-service-row .ss-desc { font-size: 0.8rem; color: var(--ink-soft); }

/* thumbnail strip */
.slide-thumbs { display: flex; gap: 0.6rem; margin-top: 1.5rem; overflow-x: auto; padding-bottom: 0.4rem; }
.slide-thumb { flex: 0 0 auto; width: 70px; height: 54px; border-radius: var(--r-sm); overflow: hidden; cursor: pointer; border: 2px solid transparent; opacity: 0.55; transition: var(--t); }
.slide-thumb img { width: 100%; height: 100%; object-fit: cover; }
.slide-thumb:hover { opacity: 0.85; }
.slide-thumb.active { opacity: 1; border-color: var(--gold); box-shadow: var(--shadow-sm); }

/* ── CTA banner ─────────────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, var(--gold-soft), #fff);
  border: 1px solid var(--line-gold); border-radius: var(--r-xl);
  padding: 4.5rem 3rem; text-align: center; position: relative; overflow: hidden;
  box-shadow: var(--shadow-md);
}
.cta-banner::before { content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 700px; height: 700px; background: radial-gradient(circle, rgba(107,59,242,0.10), transparent 70%); pointer-events: none; }

/* ── Footer ─────────────────────────────────────────────────────── */
.footer { background: var(--cream-2); border-top: 1px solid var(--line); padding: 4.5rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer-brand-text { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.72; margin-top: 1rem; }
.footer-col-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 1.25rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links a { color: var(--ink-soft); font-size: 0.88rem; transition: var(--t); }
.footer-links a:hover { color: var(--gold-deep); padding-left: 5px; }
/* Contact rows: icon as a fixed column so wrapped text (e.g. a long address) aligns
   with the first line instead of tucking under the icon. */
.contact-links a { display: flex; align-items: flex-start; gap: 0.55rem; line-height: 1.5; }
.contact-links a i { flex: none; width: 16px; margin-top: 0.22rem; text-align: center; }
.contact-links a:hover { padding-left: 0; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 2rem; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 0.8rem; }
.footer-socials { display: flex; gap: 0.7rem; }
.footer-socials a { width: 38px; height: 38px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 0.85rem; transition: var(--t); }
.footer-socials a:hover { background: var(--gold-soft); border-color: var(--line-gold); color: var(--gold-deep); transform: translateY(-2px); }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   AUTH
════════════════════════════════════════════════════════════════ */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px; margin-bottom: 2rem; }
.auth-tab { padding: 0.62rem; border: none; background: transparent; color: var(--ink-soft); font-size: 0.875rem; font-weight: 600; border-radius: calc(var(--r-md) - 3px); transition: var(--t); display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.auth-tab.active { background: var(--white); color: var(--gold-deep); box-shadow: var(--shadow-sm); }
.auth-switch { text-align: center; margin-top: 1.5rem; color: var(--ink-soft); font-size: 0.88rem; }
.auth-switch a { color: var(--gold-deep); font-weight: 600; }
.role-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.4rem; }
.role-btn { padding: 0.95rem; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--white); color: var(--ink-soft); text-align: center; transition: var(--t); }
.role-btn i { display: block; font-size: 1.55rem; margin-bottom: 0.4rem; color: var(--ink-faint); transition: var(--t); }
.role-btn span { font-size: 0.85rem; font-weight: 600; }
.role-btn.active { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-deep); }
.role-btn.active i { color: var(--gold-deep); }
.role-label { text-align: center; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.75rem; }

/* ════════════════════════════════════════════════════════════════
   DASHBOARD
════════════════════════════════════════════════════════════════ */
.dashboard-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); min-height: 100vh;
  background: var(--white);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; transition: var(--t); overflow-y: auto;
}
.sidebar-header { padding: 1.5rem 1.3rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 0.75rem; }
.sidebar-logo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-gold); }
.sidebar-brand { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; }
.sidebar-brand span { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; color: var(--iris); }
.sidebar-nav { flex: 1; padding: 1rem 0; }
.sidebar-section-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); padding: 1.25rem 1.3rem 0.5rem; }
.sidebar-link { display: flex; align-items: center; gap: 0.8rem; padding: 0.72rem 1.3rem; color: var(--ink-soft); font-size: 0.88rem; font-weight: 500; transition: var(--t); border-left: 3px solid transparent; }
.sidebar-link i { width: 18px; text-align: center; font-size: 0.95rem; }
.sidebar-link:hover { color: var(--ink); background: var(--cream); border-left-color: var(--line-gold); }
.sidebar-link.active { color: var(--gold-deep); background: var(--gold-soft); border-left-color: var(--gold); }
.sidebar-link .badge { margin-left: auto; }
.sidebar-footer { padding: 1rem 1.3rem; border-top: 1px solid var(--line); }
.sidebar-user { display: flex; align-items: center; gap: 0.75rem; }
.sidebar-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-light), var(--gold-deep)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 0.68rem; color: var(--gold-deep); text-transform: uppercase; letter-spacing: 0.1em; }

.dashboard-main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; background: var(--cream); }
.topbar { height: var(--topbar-h); background: rgba(255,255,255,0.85); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 2rem; gap: 1rem; position: sticky; top: 0; z-index: 50; }
.topbar-title { font-size: 1.15rem; font-weight: 600; font-family: var(--font-serif); flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 0.7rem; }
.topbar-icon-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 0.9rem; transition: var(--t); }
.topbar-icon-btn:hover { color: var(--gold-deep); border-color: var(--line-gold); background: var(--gold-soft); }
.page-content { padding: 2rem; flex: 1; }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 2rem; }
.stat-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; display: flex; align-items: flex-start; gap: 1rem; transition: var(--t); box-shadow: var(--shadow-sm); }
.stat-card:hover { border-color: var(--line-gold); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card-icon { width: 46px; height: 46px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.stat-card-icon.gold  { background: var(--gold-soft); color: var(--gold-deep); border: 1px solid var(--line-gold); }
.stat-card-icon.blue  { background: rgba(31,107,236,0.12); color: var(--info); border: 1px solid rgba(31,107,236,0.28); }
.stat-card-icon.green { background: rgba(79,157,105,0.12); color: var(--success); border: 1px solid rgba(79,157,105,0.28); }
.stat-card-icon.red   { background: rgba(199,91,80,0.12); color: var(--danger); border: 1px solid rgba(199,91,80,0.28); }
.stat-card-body { flex: 1; }
.stat-card-value { font-size: 1.9rem; font-weight: 700; font-family: var(--font-serif); line-height: 1; }
.stat-card-label { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.25rem; }
.stat-card-change { font-size: 0.72rem; margin-top: 0.35rem; }
.stat-card-change.up { color: var(--success); }
.stat-card-change.neutral { color: var(--ink-faint); }
@media (max-width: 900px) { .stats-row { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .stats-row { grid-template-columns: 1fr; } }

.event-list { display: flex; flex-direction: column; gap: 1rem; }
.event-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1.25rem; transition: var(--t); cursor: pointer; box-shadow: var(--shadow-sm); }
.event-item:hover { border-color: var(--line-gold); transform: translateX(4px); box-shadow: var(--shadow-md); }
.event-item.active { border-color: var(--gold); background: var(--gold-soft); }
.event-icon { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--gold-soft); border: 1px solid var(--line-gold); display: flex; align-items: center; justify-content: center; font-size: 1.45rem; flex-shrink: 0; }
.event-info { flex: 1; min-width: 0; }
.event-name { font-weight: 600; font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-meta { display: flex; gap: 1rem; margin-top: 0.35rem; flex-wrap: wrap; }
.event-meta-item { font-size: 0.78rem; color: var(--ink-soft); display: flex; align-items: center; gap: 0.3rem; }
.event-meta-item i { color: var(--gold-deep); }
.event-actions { display: flex; gap: 0.5rem; flex-shrink: 0; align-items: center; }

.event-detail-header { background: linear-gradient(135deg, var(--gold-soft), #fff); border: 1px solid var(--line-gold); border-radius: var(--r-lg); padding: 1.85rem; margin-bottom: 1.5rem; display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; box-shadow: var(--shadow-sm); }
.event-detail-icon { width: 66px; height: 66px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line-gold); display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.event-detail-info { flex: 1; min-width: 0; min-height: 84px; display: flex; flex-direction: column;
  justify-content: center; }   /* 84px = the logo tile, so the title centres against it */
.event-detail-title { font-size: 1.6rem; margin-bottom: 0.5rem; }
.event-detail-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.event-detail-meta-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ink-soft); }
.event-detail-meta-item i { color: var(--gold-deep); }

.tab-nav { display: flex; gap: 0.25rem; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px; margin-bottom: 1.5rem; overflow-x: auto; }
/* Tab-row overflow controls. The event tabs run past the edge on a narrow screen, so the
   row gets arrows — but only when there is actually somewhere to scroll, and each arrow
   greys out at its end of the run. The native scrollbar is hidden because the arrows
   replace it. The WRAPPER carries the pill (background, border, radius, padding) and the
   scroller inside it goes transparent, so the arrows sit WITHIN the same bar as the tabs
   and share their shape and hover treatment, rather than floating beside a 55px pill as
   two 32px circles in a different shape — which is exactly how the first attempt read. */
.tab-nav-wrap { display: flex; align-items: stretch; gap: 2px; background: var(--cream-2);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px; margin-bottom: 1.5rem; }
.tab-nav-wrap .tab-nav { flex: 1; min-width: 0; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.tab-nav-wrap .tab-nav::-webkit-scrollbar { display: none; }
.tab-scroll { display: none; flex: 0 0 auto; width: 28px; padding: 0; border: 0; background: transparent;
  color: var(--ink-soft); font-size: 0.7rem; border-radius: calc(var(--r-md) - 3px);
  align-items: center; justify-content: center; cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms ease, background-color 160ms ease, opacity 160ms ease; }
.tab-nav-wrap.scrollable .tab-scroll { display: flex; }
.tab-scroll:hover:not(:disabled) { background: var(--white); color: var(--gold-deep); box-shadow: var(--shadow-sm); }
.tab-scroll:active:not(:disabled) { transform: scale(0.92); }
.tab-scroll:disabled { opacity: 0.25; cursor: default; }
@media (prefers-reduced-motion: reduce) { .tab-nav-wrap .tab-nav { scroll-behavior: auto; } }
.tab-btn { padding: 0.58rem 1.25rem; border: none; background: transparent; color: var(--ink-soft); font-size: 0.85rem; font-weight: 600; border-radius: calc(var(--r-md) - 3px); transition: var(--t); white-space: nowrap; display: flex; align-items: center; gap: 0.4rem; }
.tab-btn.active { background: var(--white); color: var(--gold-deep); box-shadow: var(--shadow-sm); }
.tab-pane { display: none; } .tab-pane.active { display: block; }

.timeline { position: relative; padding-left: 0.5rem; }
.timeline::before { content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(to bottom, var(--gold), var(--line)); }
.timeline-item { position: relative; padding-left: 2.5rem; padding-bottom: 1.75rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; left: 1px; top: 4px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; transition: var(--t); z-index: 1; }
.timeline-dot.completed { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-deep); }
.timeline-dot.in-progress { border-color: var(--info); background: rgba(31,107,236,0.12); color: var(--info); animation: pulse 2s infinite; }
.timeline-dot.upcoming { border-color: var(--line-2); color: var(--ink-faint); }
.timeline-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem 1.25rem; transition: var(--t); box-shadow: var(--shadow-sm); }
.timeline-card.completed { border-color: var(--line-gold); background: var(--gold-soft); }
.timeline-card.in-progress { border-color: rgba(31,107,236,0.32); background: rgba(31,107,236,0.06); }
.timeline-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; gap: 0.5rem; }
.timeline-title { font-weight: 600; font-size: 0.96rem; }
.timeline-time { font-size: 0.78rem; color: var(--ink-soft); display: flex; align-items: center; gap: 0.3rem; }
.timeline-desc { font-size: 0.83rem; color: var(--ink-soft); }

.checklist { display: flex; flex-direction: column; gap: 0.5rem; }
.checklist-category { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); padding: 0.85rem 0 0.4rem; border-bottom: 1px solid var(--line-gold); margin-bottom: 0.3rem; }
.checklist-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); transition: var(--t); }
.checklist-item:hover { border-color: var(--line-gold); }
.checklist-item.done { background: rgba(79,157,105,0.06); border-color: rgba(79,157,105,0.2); }
.checklist-item.done .checklist-task { text-decoration: line-through; color: var(--ink-faint); }
.checklist-checkbox { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line-2); background: var(--white); flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--t); color: transparent; font-size: 0.7rem; }
.checklist-checkbox.checked { background: var(--success); border-color: var(--success); color: #fff; }
.checklist-task { flex: 1; font-size: 0.88rem; }
.checklist-progress-bar { height: 7px; background: var(--cream-3); border-radius: var(--r-full); overflow: hidden; margin-top: 0.75rem; }
.checklist-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light)); border-radius: var(--r-full); transition: width 0.6s ease; }

/* ── Due-date pills (checklist) ─────────────────────────────────── */
.due-pill { font-weight: 700; }
.due-pill.due-overdue { color: var(--danger); }
.due-pill.due-soon    { color: var(--warning); }

/* ── Event-card progress bar + countdown + overdue flag ─────────── */
.event-progress { margin-top: 0.55rem; max-width: 240px; height: 6px; }
.event-countdown { font-weight: 700; }
.event-countdown.is-soon  { color: var(--warning); }
.event-countdown.is-soon i  { color: var(--warning); }
.event-countdown.is-today { color: var(--danger); }
.event-countdown.is-today i { color: var(--danger); }
.event-overdue-flag, .event-overdue-flag i { color: var(--danger); font-weight: 700; }
.event-edited { font-size: 0.75rem; color: var(--ink-faint); margin: -0.6rem 0 1.4rem; display: flex; align-items: center; gap: 0.42rem; }
.event-edited i { color: var(--gold-deep); }

/* ── Client "next steps" focus card ────────────────────────────── */
.focus-card { background: linear-gradient(135deg, var(--gold-soft), #fff); border: 1px solid var(--line-gold); border-radius: var(--r-lg); padding: 1.2rem 1.4rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); }
.focus-card-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.45rem; }
.focus-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0; cursor: pointer; border-radius: var(--r-sm); transition: var(--t); }
.focus-row:hover { background: rgba(255,255,255,0.55); }
.focus-row + .focus-row { border-top: 1px solid var(--line-gold); }
.focus-ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--line-gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--gold-deep); font-size: 1.05rem; }
.focus-txt { flex: 1; min-width: 0; }
.focus-txt strong { font-size: 0.92rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus-txt span { font-size: 0.78rem; color: var(--ink-soft); }

/* ── Events-list controls (search + sort) ──────────────────────── */
.list-controls { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.list-search { flex: 1; min-width: 200px; position: relative; display: flex; align-items: center; }
.list-search i { position: absolute; left: 0.85rem; color: var(--ink-faint); font-size: 0.8rem; pointer-events: none; }
.list-search input { width: 100%; padding: 0.62rem 0.9rem 0.62rem 2.25rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); font: inherit; font-size: 0.86rem; color: var(--ink); transition: var(--t); }
.list-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.list-select { padding: 0.62rem 0.9rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); font: inherit; font-size: 0.86rem; color: var(--ink); cursor: pointer; }
.list-select:focus { outline: none; border-color: var(--gold); }

/* ── Messaging thread (client <-> planner) ─────────────────────── */
.msg-thread { display: flex; flex-direction: column; gap: 0.85rem; max-height: 460px; overflow-y: auto; padding: 0.25rem 0.1rem 0.5rem; }
.msg { display: flex; flex-direction: column; max-width: 80%; }
.msg.me   { align-self: flex-end; align-items: flex-end; }
.msg.them { align-self: flex-start; align-items: flex-start; }
.msg-bubble { padding: 0.62rem 0.95rem; border-radius: 16px; font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--shadow-sm); }
.msg.them .msg-bubble { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg.me .msg-bubble { background: var(--gold-soft); border: 1px solid var(--line-gold); color: var(--ink); border-bottom-right-radius: 5px; }
.msg-meta { font-size: 0.68rem; color: var(--ink-faint); margin-top: 0.28rem; display: flex; gap: 0.38rem; align-items: center; }
.msg-meta .role-tag { font-weight: 700; color: var(--gold-deep); text-transform: uppercase; letter-spacing: 0.05em; }
.msg-composer { display: flex; gap: 0.6rem; align-items: flex-end; margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.msg-composer textarea { flex: 1; resize: none; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); font: inherit; font-size: 0.88rem; color: var(--ink); line-height: 1.5; max-height: 140px; overflow-y: auto; transition: border-color var(--t), box-shadow var(--t); }
.msg-composer textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.msg-composer .btn { flex-shrink: 0; }
.msg-empty { text-align: center; color: var(--ink-soft); padding: 2.5rem 1rem; font-size: 0.88rem; }
.msg-empty i { font-size: 1.9rem; color: var(--gold-deep); display: block; margin-bottom: 0.6rem; opacity: 0.7; }

.upload-zone { border: 2px dashed var(--line-2); border-radius: var(--r-lg); padding: 3rem 2rem; text-align: center; cursor: pointer; transition: var(--t); background: var(--cream); }
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--gold); background: var(--gold-soft); }
.upload-icon { font-size: 2.6rem; color: var(--gold-deep); margin-bottom: 1rem; }
.upload-title { font-weight: 600; margin-bottom: 0.4rem; }
.upload-sub { font-size: 0.82rem; color: var(--ink-soft); }

.modal-overlay { position: fixed; inset: 0; background: rgba(26,19,57,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity 0.28s ease; }
.modal-overlay.show { opacity: 1; pointer-events: all; }
.modal { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); transform: translateY(24px) scale(0.98); transition: transform 0.28s cubic-bezier(0.22,1,0.36,1); }
.modal-overlay.show .modal { transform: translateY(0) scale(1); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 1.8rem 0; }
.modal-title { font-size: 1.25rem; font-family: var(--font-serif); }
.modal-close { width: 34px; height: 34px; border-radius: 50%; background: var(--cream-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 0.85rem; cursor: pointer; transition: var(--t); }
.modal-close:hover { color: var(--ink); background: var(--cream-3); }
.modal-body { padding: 1.5rem 1.8rem; }
.modal-footer { padding: 0 1.8rem 1.6rem; display: flex; gap: 0.75rem; justify-content: flex-end; }

.section-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap; }
.section-row h3 { font-size: 1.18rem; font-family: var(--font-serif); }

.empty-state { text-align: center; padding: 4rem 2rem; color: var(--ink-soft); }
.empty-state i { font-size: 3rem; color: var(--ink-faint); margin-bottom: 1rem; display: block; }
.empty-state h4 { font-family: var(--font-serif); margin-bottom: 0.5rem; color: var(--ink); }
.empty-state p { font-size: 0.88rem; }

.toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 2000; display: flex; flex-direction: column; gap: 0.5rem; }
.toast { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.3rem; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); min-width: 280px; max-width: 380px; animation: slideInRight 0.3s ease; }
.toast i { font-size: 1rem; }
.toast.success { border-color: rgba(79,157,105,0.4); } .toast.success i { color: var(--success); }
.toast.error { border-color: rgba(199,91,80,0.4); } .toast.error i { color: var(--danger); }
.toast.info { border-color: rgba(31,107,236,0.4); } .toast.info i { color: var(--info); }
.toast-msg { flex: 1; font-size: 0.88rem; color: var(--ink); }

/* tracker status pills */
.status-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.26rem 0.7rem; border-radius: var(--r-full); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.status-pill.completed { background: var(--gold-soft); color: var(--gold-deep); border: 1px solid var(--line-gold); }
.status-pill.in-progress { background: rgba(31,107,236,0.12); color: var(--info); border: 1px solid rgba(31,107,236,0.3); }
.status-pill.upcoming { background: rgba(26,19,57,0.05); color: var(--ink-soft); border: 1px solid var(--line); }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(9px); } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(31,107,236,0.35); } 50% { box-shadow: 0 0 0 9px rgba(31,107,236,0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
.animate-fade-up { animation: fadeInUp 0.7s ease both; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Scrollbars: a slim thumb inset in its gutter, on no track of its own; the old tinted track drew a
   lilac strip down the side of every sheet, panel and list. Only where there is a mouse: a phone or
   tablet keeps its own thin scrollbar that shows while scrolling and fades away, instead of a bar
   that never leaves. */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(26,19,57,0.18); background-clip: padding-box; border: 3px solid transparent; border-radius: 9999px; }
  ::-webkit-scrollbar-thumb:hover { background-color: rgba(107,59,242,0.5); }
}

@media (max-width: 1024px) {
  .sidebar { transform: translateX(-280px); width: 280px; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .dashboard-main { margin-left: 0; }
  .sidebar-overlay { position: fixed; inset: 0; background: rgba(26,19,57,0.3); backdrop-filter: blur(3px); z-index: 99; display: none; }
  .sidebar-overlay.show { display: block; }
}

/* ════════════════════════════════════════════════════════════════
   SMOOTH PAGE TRANSITIONS
   Chromium: cross-document View Transitions (auto crossfade).
   Others:   a gentle fade-in on load as a graceful fallback.
════════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtFadeOut 0.26s ease both; }
::view-transition-new(root) { animation: vtFadeIn 0.34s ease both; }
@keyframes vtFadeOut { to { opacity: 0; } }
@keyframes vtFadeIn  { from { opacity: 0; } }

@supports not (view-transition-name: none) {
  @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
  body { animation: pageFadeIn 0.38s ease both; }
}

/* Dashboard internal view swap — fade-in fallback (browsers without
   document.startViewTransition); Chromium uses the crossfade above. */
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page-content.view-anim { animation: viewIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Drilling into an event → content-only horizontal slide (only #pageContent
   animates; the sidebar and topbar stay put). body has overflow-x:hidden so
   the horizontal offset never creates a scrollbar. */
@keyframes viewSlideIn { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
.page-content.view-anim-slide { animation: viewSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .page-content.view-anim-slide { animation: none; }
}

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

/* ════════════════════════════════════════════════════════════════
   MOBILE / PHONE OPTIMIZATIONS (shared, app-wide)
════════════════════════════════════════════════════════════════ */
/* Long unbreakable strings (emails, URLs) must never force overflow */
h1, h2, h3, h4 { overflow-wrap: break-word; }

@media (max-width: 600px) {
  /* 16px inputs prevent iOS Safari auto-zoom on focus (every form, every page).
     The time picker's .tp-s selects need this too, but their base rule sits in
     dashboard.html's inline <style>, which WINS a cascade tie against this file — so
     that override has to live there, not here. */
  .form-control { font-size: 16px; }

  /* tighter gutters keep usable content width on phones */
  .container     { padding: 0 1rem; }
  .page-content  { padding: 1.25rem 1rem; }
  .section       { padding: 2.5rem 0; }
  .section-sm    { padding: 1.75rem 0; }
  .cta-banner    { padding: 2.5rem 1.25rem; }

  /* topbar fits title + icons on a narrow row */
  .topbar         { padding: 0 1rem; gap: 0.5rem; }
  .topbar-actions { gap: 0.4rem; }
  .topbar-title   { font-size: 1rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* modals: less padding; footer buttons wrap & stretch */
  .modal-overlay  { padding: 0.75rem; }
  .modal-header   { padding: 1.25rem 1.25rem 0; }
  .modal-body     { padding: 1.1rem 1.25rem; }
  .modal-footer   { padding: 0 1.25rem 1.25rem; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; }
  .modal-close    { width: 42px; height: 42px; }

  /* event list rows stack their actions under the info */
  .event-item    { flex-wrap: wrap; padding: 1rem 1.1rem; gap: 0.85rem; }
  .event-actions { width: 100%; justify-content: flex-start; }

  /* event-detail header is lighter on phones */
  .event-detail-header { padding: 1.25rem; gap: 1rem; }
  .event-detail-icon   { width: 52px; height: 52px; font-size: 1.6rem; }
  .event-detail-title  { font-size: 1.35rem; }

  /* comfortable touch targets */
  .btn-sm          { min-height: 40px; }
  .topbar-icon-btn { width: 44px; height: 44px; }

  /* toasts span the width, never hug/overflow the edge */
  .toast-container { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; }
  .toast           { min-width: 0; max-width: 100%; width: 100%; }
}

@media (max-width: 400px) {
  .page-content { padding: 1rem 0.85rem; }
}

/* ── Toggle switch ──────────────────────────────────────────────────────────
   For a setting that takes effect immediately ("Close sign-ups"), where a
   checkbox reads like something you still have to submit.

   A real <input type="checkbox"> stays underneath, visually hidden but focusable:
   label association, keyboard, and screen readers all keep working natively and
   only the paint is custom. aria-checked is NOT needed — the input carries it.

   Only transform and background-color animate. Sliding the thumb with `left`
   would lay out on every frame. */
/* The vertical padding is the TAP TARGET, not decoration: the track alone is 22px tall,
   which is a poor thumb target on a phone. This takes the whole label to ~38px without
   changing the size of the switch itself. */
.ep-switch { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0; cursor: pointer; -webkit-user-select: none; user-select: none; font-size: 0.83rem; color: var(--ink-soft); }
.ep-switch > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ep-switch .ep-track {
  position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px;
  background: #DCDCE8; border: 1px solid var(--line);
  transition: background-color 180ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 180ms ease;
}
.ep-switch .ep-thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(26, 19, 57, 0.30);
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.ep-switch > input:checked + .ep-track { background: var(--iris); border-color: transparent; }
/* 38 wide, 1px borders, 2px inset, 16px thumb -> 36 - 2 - 16 - 2 = 16px of travel. */
.ep-switch > input:checked + .ep-track .ep-thumb { transform: translateX(16px); }
.ep-switch > input:checked ~ .ep-lbl { color: var(--ink); font-weight: 600; }
/* Confirms the press before the state has finished moving. */
/* Press feedback. The checked variant is more specific, so it wins whatever the order
   — the thumb must not snap back to the left while the finger is down. */
.ep-switch:active .ep-thumb { transform: scale(0.92); }
.ep-switch:active > input:checked + .ep-track .ep-thumb { transform: translateX(16px) scale(0.92); }
.ep-switch > input:focus-visible + .ep-track { outline: 2px solid var(--iris); outline-offset: 2px; }
.ep-switch > input:disabled + .ep-track { opacity: 0.5; }
.ep-switch > input:disabled ~ .ep-lbl { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  .ep-switch .ep-track, .ep-switch .ep-thumb { transition: none; }
}

/* Shared guest-page footer (rsvp / registry / signup) — see js/guestfoot.js.
   One vocabulary across the three surfaces a guest actually moves between. */
.gfoot { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); text-align: center; }
.gfoot-links { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.1rem; }
.gfoot-links a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600;
  color: var(--gold-deep); text-decoration: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.45rem 0.95rem; transition: border-color 150ms ease, background-color 150ms ease; }
.gfoot-links a:hover { border-color: var(--gold-deep); background: var(--gold-soft); }
.gfoot-links a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
/* --ink-soft, not --ink-faint: this is a promise about someone's phone number,
   and --ink-faint is ~2.4:1 on white. */
.gfoot-note { font-size: 0.78rem; line-height: 1.65; color: var(--ink-soft); max-width: 46ch; margin: 0 auto 1.3rem; }
/* Signs off under the pitch, so it needs its own air above it. */
.gfoot-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 1.1rem; }
.gfoot-brand img { height: 20px; width: auto; opacity: 0.8; }
.gfoot-brand a { color: var(--gold-deep); text-decoration: none; font-weight: 600; }
.gfoot-brand .dot { font-style: italic; }
@media (prefers-reduced-motion: reduce) { .gfoot-links a { transition: none; } }

/* Guest-facing credit line — see js/promo.js for the copy and why it exists.
   Deliberately the quietest thing on the page: it sits last, it is smaller than the
   privacy note above it, and it carries no fill until it is hovered. It is a line a
   curious guest can find, not one the celebration has to compete with. --ink-soft
   rather than --ink-faint, because it is real text someone is meant to be able to
   read (see the token table in DESIGN.md).

   On the specificity: this component is dropped into footers that predate it and
   that style their own descendants — `.wd-foot a` on the event website sets a serif
   face and a 0.5rem gap, and `.tracker-footer-section span` paints every span gold.
   Both are (0,1,1) and both live in page <style> blocks that load AFTER this file,
   so they would win a tie. `a.ep-promo[href]` is (0,2,1) and the inner rules are
   scoped under the root at (0,2,0), which puts the whole component out of their
   reach without either side having to know about the other. */
a.ep-promo, a.ep-promo[href] { display: inline-flex; flex-direction: column; gap: 0.15rem;
  align-items: center; margin-top: 1rem; padding: 0.55rem 1rem; border: 1px solid var(--line);
  border-radius: 999px; text-decoration: none; max-width: 100%;
  font-family: var(--font-sans); font-size: 1rem;
  transition: border-color 150ms ease, background-color 150ms ease; }
a.ep-promo[href]:hover { border-color: var(--gold-deep); background: var(--gold-soft); }
a.ep-promo[href]:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.ep-promo .ep-promo-lead { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-soft); opacity: 1; }
.ep-promo .ep-promo-pitch { font-size: 0.76rem; line-height: 1.45; color: var(--ink-soft);
  font-weight: 400; opacity: 1; }
.ep-promo .ep-promo-pitch b { color: var(--gold-deep); font-weight: 600; }
.ep-promo .ep-promo-pitch .dot { color: var(--gold-deep); font-style: italic; }
@media (prefers-reduced-motion: reduce) { a.ep-promo[href] { transition: none; } }

/* ══ The Secret ══════════════════════════════════════════════════════════
   Self-hosted rather than fetched from Google, which does not carry it.
   Free for commercial use and for inclusion in a website; the licence
   forbids only passing the files on as a download of their own, which
   serving them as a webfont is not. Lives here because styles.css is on
   every page that draws an invitation -- the dashboard, the RSVP page, the
   guest site, the tracker and the templates gallery. woff2 first at 24KB,
   woff behind it at 72KB for anything that cannot read woff2. */
@font-face {
  font-family: 'The Secret';
  src: url('../assets/fonts/thesecret-regular.woff2') format('woff2'),
       url('../assets/fonts/thesecret-regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}