/* ══════════════════════════════════════════════════════════════
   GENNXT — Design System 2.0
   Fonts: Cormorant Garamond (headings) + Inter (body)
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Declaring a scheme is what stops Chrome on Android applying its "Auto
     Dark Theme" to the page. That feature darkens backgrounds algorithmically
     but leaves authored text colours alone, so an invitation card — light
     paper, dark ink, both set deliberately — came out dark ink on a darkened
     card and was unreadable. The palette below is a designed one with no dark
     variant, so light is the honest declaration rather than a workaround.
     Each template also carries <meta name="color-scheme">, which covers the
     pages that do not load this stylesheet. */
  color-scheme: light;

  --bg: #f6f0e4;
  --surface: #fffdf8;
  --surface-2: #f3ead8;
  --line: #decfb1;
  --text: #3d2718;
  --text-soft: #7d6656;
  --primary: #a9621c;
  --primary-dark: #874d14;
  --green: #5f8b4c;
  --green-dark: #43703a;
  --gold: #d2b06a;
  --danger: #c84d3c;
  --shadow: 0 14px 35px rgba(84, 55, 24, 0.08);
  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(circle at top, #fbf7ef 0%, var(--bg) 50%, #efe6d5 100%);
  color: var(--text);
  line-height: 1.55;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.25), transparent 20%),
    radial-gradient(circle at 80% 0%, rgba(255,255,255,0.18), transparent 18%);
}
h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", serif;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.02em;
}
p { margin: 0; color: var(--text-soft); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.topbar, .hero, .stepper, .workspace {
  width: min(1380px, calc(100% - 32px));
  margin-inline: auto;
}

/* ── Top bar ─────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 14px;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
}
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: linear-gradient(180deg, #f5e6bf, #ecd294);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.brand-name { font-weight: 700; font-size: 1.02rem; }
.brand-tag { color: var(--text-soft); font-size: 0.82rem; }
.topnav {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center;
  padding: 8px 12px; background: rgba(139,77,34,0.05); border: 1px solid rgba(139,77,34,0.10);
  border-radius: 999px;
}
.topnav-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topnav-label {
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-soft); padding: 0 2px 0 4px;
}
.topnav-separator { width: 1px; align-self: stretch; background: rgba(188,168,146,0.36); }
.nav-pill,
.topnav a,
.topnav button {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: rgba(255,255,255,0.70); border: 1px solid rgba(188,168,146,0.38); cursor: pointer; padding: 9px 14px;
  color: var(--text-soft); font-size: .84rem; font-weight: 700;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration: none; position: relative; border-radius: 999px; box-shadow: 0 4px 10px rgba(58,37,18,.04);
}
.nav-pill-icon { font-size: .95rem; line-height: 1; }
.nav-pill-text { white-space: nowrap; }
.nav-pill-accent { background: linear-gradient(135deg, rgba(139,77,34,0.10), rgba(201,154,77,0.10)); }
.topnav a:hover, .topnav button:hover {
  background: rgba(139,77,34,0.12); color: var(--text); border-color: rgba(139,77,34,0.18);
  box-shadow: 0 10px 20px rgba(58, 37, 18, 0.08); transform: translateY(-1px);
}
.topnav a.active, .topnav button.active {
  background: linear-gradient(135deg, rgba(139,77,34,0.22), rgba(201,154,77,0.24));
  color: var(--primary-dark); border-color: rgba(139,77,34,0.22);
  box-shadow: 0 12px 24px rgba(58, 37, 18, 0.10), inset 0 0 0 1px rgba(255,255,255,0.35);
}
.nav-pill.active {
  background: linear-gradient(135deg, rgba(139,77,34,0.24), rgba(201,154,77,0.28));
  color: var(--primary-dark); border-color: rgba(139,77,34,0.30);
  box-shadow: 0 14px 28px rgba(58, 37, 18, 0.12), inset 0 1px 0 rgba(255,255,255,0.45);
  transform: translateY(-1px);
}
.nav-pill-accent.active { background: linear-gradient(135deg, rgba(139,77,34,0.30), rgba(95,125,75,0.18)); border-color: rgba(139,77,34,0.34); }
.nav-pill.active .nav-pill-icon { transform: scale(1.06); }
.topnav a.active::after, .topnav button.active::after { display: none; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }

/* ── Sticky topbar: subtle shadow once scrolled ──────────────────────────── */
.topbar { transition: box-shadow .25s ease, background .25s ease; }
.topbar.is-scrolled {
  background: rgba(255, 253, 248, 0.86);
  box-shadow: 0 8px 24px -14px rgba(58, 37, 18, 0.28);
}

/* ── Mobile hamburger (hidden on desktop) ────────────────────────────────── */
.mobile-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px; border: 1px solid rgba(188,168,146,0.38);
  background: rgba(255,255,255,0.7); border-radius: 12px; cursor: pointer;
  padding: 0; margin: 0 4px 0 0; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(58,37,18,.04);
  transition: background .15s ease, border-color .15s ease;
}
.mobile-hamburger span {
  display: block; width: 18px; height: 2px; margin: 0 auto;
  background: var(--primary-dark); border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.mobile-hamburger:hover { background: rgba(139,77,34,0.10); }
.mobile-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-hamburger.open span:nth-child(2) { opacity: 0; }
.mobile-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Nav dropdowns: Discover / Family ────────────────────────────────────── */
.nav-dd { position: relative; }
.nav-dd-trigger {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: rgba(255,255,255,0.70); border: 1px solid rgba(188,168,146,0.38);
  cursor: pointer; padding: 10px 17px; color: var(--text-soft);
  font-size: .97rem; font-weight: 700; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(58,37,18,.04);
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nav-dd-trigger:hover {
  background: rgba(139,77,34,0.12); color: var(--text); border-color: rgba(139,77,34,0.18);
  box-shadow: 0 10px 20px rgba(58, 37, 18, 0.08); transform: translateY(-1px);
}
.nav-dd-trigger[aria-expanded="true"] {
  background: linear-gradient(135deg, rgba(139,77,34,0.22), rgba(201,154,77,0.24));
  color: var(--primary-dark); border-color: rgba(139,77,34,0.22);
}
.nav-dd:has(.nav-pill.active) .nav-dd-trigger {
  background: linear-gradient(135deg, rgba(139,77,34,0.16), rgba(201,154,77,0.18));
  color: var(--primary-dark); border-color: rgba(139,77,34,0.20);
}
.nav-dd-caret { font-size: .7rem; opacity: .7; transition: transform .2s ease; }
.nav-dd-trigger[aria-expanded="true"] .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-panel {
  display: none; flex-direction: column; gap: 4px;
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 8px; box-shadow: 0 20px 44px -16px rgba(58, 37, 18, 0.32);
  z-index: 60; animation: navDdFadeIn .16s ease-out;
}
.nav-dd-panel.open { display: flex; }
@keyframes navDdFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav-dd-panel .nav-pill { justify-content: flex-start; width: 100%; }

/* ── Notification bell ───────────────────────────────────────────────────── */
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.70); border: 1px solid rgba(188,168,146,0.38);
  font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 4px 10px rgba(58,37,18,.04);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.icon-btn:hover {
  background: rgba(139,77,34,0.12); border-color: rgba(139,77,34,0.18);
  box-shadow: 0 10px 20px rgba(58, 37, 18, 0.08); transform: translateY(-1px);
}

/* ── Profile menu ─────────────────────────────────────────────────────────── */
.profile-dd { position: relative; }
.profile-dd-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.70); border: 1px solid rgba(188,168,146,0.38);
  border-radius: 999px; padding: 5px 10px 5px 5px; cursor: pointer;
  box-shadow: 0 4px 10px rgba(58,37,18,.04);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.profile-dd-trigger:hover {
  background: rgba(139,77,34,0.12); border-color: rgba(139,77,34,0.18);
  box-shadow: 0 10px 20px rgba(58, 37, 18, 0.08); transform: translateY(-1px);
}
.profile-dd-trigger[aria-expanded="true"] {
  background: linear-gradient(135deg, rgba(139,77,34,0.22), rgba(201,154,77,0.24));
  border-color: rgba(139,77,34,0.22);
}
.profile-dd-trigger[aria-expanded="true"] .nav-dd-caret { transform: rotate(180deg); }
.profile-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff8ec; font-size: .82rem; font-weight: 800; line-height: 1;
}
.profile-dd-dot {
  position: absolute; top: 2px; right: 2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 2px var(--surface);
}
.profile-dd-panel {
  display: none; flex-direction: column;
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 240px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 8px; box-shadow: 0 20px 44px -16px rgba(58, 37, 18, 0.32);
  z-index: 60; animation: navDdFadeIn .16s ease-out;
}
.profile-dd-panel.open { display: flex; }
.profile-dd-email {
  font-size: .78rem; font-weight: 700; color: var(--text-soft);
  padding: 8px 12px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-dd-sep { height: 1px; background: rgba(188,168,146,0.3); margin: 6px 4px; }
.profile-dd-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; font-size: .86rem; font-weight: 600;
  color: var(--text); text-decoration: none;
  transition: background .15s ease;
}
.profile-dd-item:hover { background: rgba(139,77,34,0.08); }
.profile-dd-item-danger { color: var(--danger); }
.profile-dd-item-danger:hover { background: rgba(200,77,60,0.08); }
.profile-dd-badge {
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--gold), var(--primary));
  color: #fff8ec; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.profile-dd-badge-warn { background: linear-gradient(135deg, #d95f4e, var(--danger)); }

/* ── Mobile drawer ────────────────────────────────────────────────────────── */
/* On desktop this wrapper is transparent to layout — .topnav sits directly
   in the .topbar flex row exactly as before. */
#topbar-collapsible { display: contents; }
#mobile-drawer-backdrop {
  display: none; position: fixed; inset: 0; z-index: 55;
  background: rgba(40, 26, 12, 0.32); backdrop-filter: blur(2px);
}
#mobile-drawer-backdrop.open { display: block; }
body.mobile-drawer-locked { overflow: hidden; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  border: 0; cursor: pointer; border-radius: 999px; padding: 11px 18px; font-weight: 600;
  transition: 0.18s ease; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn-primary { color: #fff; background: linear-gradient(180deg, #be7630, var(--primary)); box-shadow: 0 8px 20px rgba(169,98,28,0.22); }
.btn-secondary { color: var(--text); background: #f6edde; border: 1px solid var(--line); }
.btn-ghost { background: transparent; color: var(--primary-dark); border: 1px solid rgba(169,98,28,0.28); }
.btn-danger { background: linear-gradient(180deg, #d95f4e, var(--danger)); color: #fff; }
.btn-timeline { color: #fff; background: linear-gradient(180deg, #7eb45d, var(--green)); }
.btn-tribute { color: #fff; background: linear-gradient(180deg, #d49a39, #c27d17); }
.btn-small { padding: 9px 14px; font-size: 0.88rem; }
.btn-large { min-width: 220px; }

/* ── Card ────────────────────────────────────────────────────── */
.card {
  background: rgba(255,253,248,0.88);
  border: 1px solid rgba(222,207,177,0.8);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 5%, var(--gold) 35%, var(--primary) 65%, transparent 95%);
  opacity: .55;
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 18px; padding: 20px;
  background:
    radial-gradient(circle at 86% 16%, rgba(255,255,255,0.55), transparent 20%),
    linear-gradient(180deg, rgba(255,252,245,0.98), rgba(244,234,214,0.92));
  border: 1px solid rgba(222,207,177,0.9); border-radius: 34px;
  box-shadow: 0 24px 60px rgba(63, 40, 18, 0.10); margin-bottom: 18px;
  overflow: hidden;
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(139,77,34,0.08), transparent 22%),
    radial-gradient(circle at 90% 12%, rgba(201,154,77,0.14), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,0.12), transparent 36%);
}
.hero-copy { padding: 12px 10px 12px 12px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.eyebrow { text-transform: uppercase; letter-spacing: .20em; font-size: .67rem; font-weight: 800; color: #8c5a31; margin-bottom: 10px; }
.hero h1 { font-size: clamp(1.55rem, 2.9vw, 2.9rem); margin-bottom: 12px; line-height: 1.02; }
.hero h1 em { color: var(--primary); font-style: italic; }
.hero p { max-width: 760px; font-size: .95rem; line-height: 1.6; color: var(--text-soft); }
.hero-features {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.hero-features li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .82rem; line-height: 1.45; color: var(--text-soft);
  padding: 8px 10px; border-radius: 16px; background: rgba(255,255,255,0.42);
  border: 1px solid rgba(188,168,146,0.18);
}
.hero-features li strong { color: var(--text); }
.hf-icon {
  flex-shrink: 0; font-size: .86rem; line-height: 1.4; width: 20px; height: 20px;
  display: inline-grid; place-items: center; border-radius: 999px; background: rgba(139,77,34,0.10);
  box-shadow: inset 0 0 0 1px rgba(139,77,34,0.08);
}
/* ── Hero: health-records callout ─────────────────────────────────────────
   A frosted-glass card matching the invitation designer's glass panel
   (rgba surface + backdrop-filter + soft golden border), tinted sage-green
   (--green) to read as its own thing without leaving the brand palette. */
.hero-health-card {
  margin: 16px 0 0; padding: 14px 16px 16px; border-radius: var(--radius-lg);
  background: rgba(255, 253, 248, .58);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(95, 139, 76, .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 14px 30px -16px rgba(40, 60, 22, .22);
}
.hero-health-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.hero-health-icon {
  flex-shrink: 0; font-size: 1rem; line-height: 1; width: 28px; height: 28px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: rgba(95, 139, 76, .14); box-shadow: inset 0 0 0 1px rgba(95, 139, 76, .18);
}
.hero-health-title { font-weight: 800; font-size: .92rem; color: var(--green-dark); letter-spacing: -.01em; }
.hero-health-copy { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--text-soft); }
.hero-health-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
/* ── Family dashboard (beside/below the photo) ────────────────────────────── */
.fam-dash {
  margin-top: 14px; padding: 16px 18px;
  background: rgba(255, 253, 248, .6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(214, 174, 106, .38); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 12px 28px -18px rgba(58,37,18,.3);
  animation: famDashIn .4s ease-out;
}
@keyframes famDashIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fam-dash-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.fam-dash-title {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem;
  font-weight: 700; color: var(--primary-dark);
}
.fam-dash-sub { font-size: .78rem; color: var(--text-soft); }
.fam-dash-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.fam-dash-stats:empty { display: none; }
.fam-stat {
  display: flex; align-items: center; gap: 6px; padding: 7px 12px;
  background: rgba(255,255,255,.75); border: 1px solid rgba(188,168,146,.3);
  border-radius: 999px; font-size: .8rem;
}
.fam-stat-icon { font-size: .9rem; }
.fam-stat-num { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.fam-stat-label { color: var(--text-soft); }
.fam-dash-block { margin-top: 14px; }
.fam-dash-label { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8c5a31; margin-bottom: 8px; }
.fam-dash-upcoming { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fam-dash-upcoming li {
  display: flex; align-items: center; gap: 8px; font-size: .84rem;
  background: rgba(255,255,255,.55); border-radius: 10px; padding: 7px 10px;
}
.fdu-icon { font-size: .95rem; }
.fdu-text { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdu-when { font-weight: 700; color: var(--primary); font-size: .76rem; white-space: nowrap; }
.fam-dash-insight {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(139,77,34,.08), rgba(201,154,77,.1));
  font-size: .82rem; color: var(--text); line-height: 1.5;
}
.fam-dash-pct { color: var(--primary); font-weight: 800; }
.fam-dash-bar { height: 7px; border-radius: 999px; background: rgba(188,168,146,.28); overflow: hidden; }
.fam-dash-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--primary)); border-radius: 999px; transition: width .5s ease; }
.fam-dash-todo { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fam-dash-todo li { font-size: .78rem; color: var(--text-soft); padding-left: 16px; position: relative; }
.fam-dash-todo li::before { content: "○"; position: absolute; left: 0; color: var(--gold); }
.fam-dash-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; }
.fam-dash-btn {
  flex: 1; min-width: 90px; border: 1px solid rgba(139,77,34,.22); background: rgba(255,255,255,.7);
  color: var(--primary-dark); font-size: .76rem; font-weight: 700; padding: 8px 10px;
  border-radius: 999px; cursor: pointer; transition: all .15s;
}
.fam-dash-btn:hover { background: rgba(139,77,34,.12); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .fam-dash { animation: none; }
  .fam-dash-btn:hover { transform: none; }
}

/* ── Bulk bill import (.xlsx) ─────────────────────────────────────────────── */
.bill-import-box {
  border: 1px solid #edd9bd; background: #fdf9f2; border-radius: 12px;
  padding: 14px 16px; margin: 4px 0 16px;
}
.bill-import-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bill-import-head strong { font-size: .9rem; color: #6b4a2e; }
.bill-import-close {
  border: none; background: none; cursor: pointer; color: #9a8672;
  font-size: .85rem; padding: 2px 6px; border-radius: 6px;
}
.bill-import-close:hover { background: rgba(139,77,34,.1); color: #3d2718; }
.bill-import-hint { font-size: .78rem; color: #7d6656; line-height: 1.5; margin: 6px 0 12px; }
.bill-import-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.bill-import-filename { font-size: .78rem; color: #6b4a2e; font-weight: 600; }
.bill-import-result:empty { display: none; }
.bill-import-summary { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; font-weight: 700; margin-top: 8px; }
.bill-import-summary .bi-ok { color: #2d6a3a; }
.bill-import-summary .bi-skip { color: #8a6d1c; }
.bill-import-summary .bi-err { color: #8f3b3b; }
.bill-import-errors {
  margin: 8px 0 0; padding: 8px 10px 8px 26px; max-height: 180px; overflow-y: auto;
  background: #fff5f5; border: 1px solid #f0d2d2; border-radius: 8px;
  font-size: .78rem; color: #8f3b3b; line-height: 1.55;
}
.bill-import-note { font-size: .78rem; color: #5a4a38; margin-top: 8px; }
.bill-import-err { font-size: .8rem; color: #8f3b3b; font-weight: 600; margin-top: 8px; }

/* ── "Your Family" intro cards (Groups / Occasions discoverability) ──────── */
.fam-intro {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-bottom: 18px;
}
.fam-intro-card {
  background: rgba(255, 253, 248, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(188,168,146,.34); border-radius: var(--radius-lg);
  padding: 20px 22px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 26px -16px rgba(58,37,18,.28);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fam-intro-card:hover {
  transform: translateY(-2px); border-color: rgba(139,77,34,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 34px -18px rgba(58,37,18,.35);
}
.fam-intro-icon { font-size: 1.6rem; line-height: 1; margin-bottom: 8px; }
.fam-intro-title {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem;
  font-weight: 700; color: var(--primary-dark); margin: 0 0 6px;
}
.fam-intro-copy { font-size: .85rem; line-height: 1.55; color: var(--text-soft); margin: 0 0 14px; }
.fam-intro-btn { margin: 0; }
@media (max-width: 720px) { .fam-intro { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .fam-intro-card, .fam-intro-card:hover { transition: none; transform: none; }
}

.hero-health-note { margin: 10px 0 0; font-size: .7rem; line-height: 1.45; color: #9a8672; }
.hero-health-note a { color: #7d8f6d; font-weight: 700; text-decoration: none; }
.hero-health-note a:hover { text-decoration: underline; }
.ask-disclaimer { margin: 10px 2px 0; font-size: .7rem; line-height: 1.45; color: #9a8672; text-align: center; }
.ask-disclaimer a { color: #a9621c; font-weight: 700; text-decoration: none; }
.ask-disclaimer a:hover { text-decoration: underline; }
.hero-health-chip {
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: var(--green-dark);
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(223,235,214,.75));
  border: 1px solid rgba(95, 139, 76, .22); border-radius: 999px; padding: 4px 10px;
  white-space: nowrap;
  opacity: 0; transform: translateY(4px);
  animation: heroHealthChipIn .45s ease-out forwards;
}
.hero-health-chips .hero-health-chip:nth-child(1) { animation-delay: .05s; }
.hero-health-chips .hero-health-chip:nth-child(2) { animation-delay: .12s; }
.hero-health-chips .hero-health-chip:nth-child(3) { animation-delay: .19s; }
.hero-health-chips .hero-health-chip:nth-child(4) { animation-delay: .26s; }
.hero-health-chips .hero-health-chip:nth-child(5) { animation-delay: .33s; }
@keyframes heroHealthChipIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-health-chip { animation: none; opacity: 1; transform: none; }
}
.hero-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.hero-actions .btn { padding: 12px 18px; box-shadow: 0 12px 24px rgba(58, 37, 18, 0.10); }
.hero-actions .btn-primary { background: linear-gradient(135deg, #b36a33, var(--primary)); }
.hero-actions .btn-ghost { background: rgba(255,255,255,0.68); }
.proof-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.proof-chip {
  font-size: 0.7rem; font-weight: 700; letter-spacing: .05em; color: #7a5030;
  background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(246,230,207,.8));
  border: 1px solid rgba(139,77,34,.16); border-radius: 999px; padding: 4px 10px;
  box-shadow: 0 6px 12px rgba(58, 37, 18, 0.04);
}
.hero-art {
  position: relative;
  border-radius: 28px;
  background:
    radial-gradient(circle at 22% 12%, rgba(255,255,255,0.36), transparent 20%),
    linear-gradient(180deg, #f6ecd1 0%, #efdfb5 100%);
  box-shadow: inset 0 0 0 1px rgba(188,168,146,0.28);
  overflow: hidden;
}

/* ── Family photo frame ──────────────────────────────────────── */
/* The hero is a grid, so this column would otherwise stretch to match the copy
   column beside it — around 940px — while the photo inside stays 400px tall and
   centred, leaving ~270px of empty frame above and below it. Sizing to content
   keeps the frame close to the picture. */
.hero-art { align-self: start; }
.family-photo-frame { position: relative; height: 100%; }
.fph-svg-wrap { display: block; }
.fph-photo-wrap {
  padding: 10px;
  height: 100%;
  min-height: 420px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fph-photo-wrap img {
  display: block;
  max-width: 100%;
  width: auto;
  height: 400px;
  object-fit: contain;
  border-radius: 18px; border: 2.5px solid #b8880c;
  box-shadow: 0 18px 36px rgba(74,47,20,.18);
}
.fph-caption {
  text-align: center; font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: .9rem; color: #8b5215; margin-top: 6px; opacity: .8;
}
.fph-upload-btn {
  position: absolute; bottom: 12px; left: 12px; transform: none;
  background: rgba(169,98,28,.85); color: #fff; border-radius: 20px;
  padding: 6px 18px; font-size: .78rem; cursor: pointer;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  backdrop-filter: blur(4px); transition: background .2s, opacity .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.fph-upload-btn:hover { background: rgba(140,70,10,.95); }
.fph-upload-icon { font-size: .95rem; }
.fph-remove-btn {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(90,30,10,.72); color: #ffe8d6; border: none; border-radius: 20px;
  padding: 6px 14px; font-size: .75rem; cursor: pointer; white-space: nowrap;
  backdrop-filter: blur(4px); transition: background .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.fph-remove-btn:hover { background: rgba(120,30,10,.92); }

.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.28), transparent 16%),
    radial-gradient(circle at 88% 10%, rgba(255,255,255,0.20), transparent 14%);
  pointer-events: none;
}

/* ── Hero quote strip ────────────────────────────────────────── */
.hero-quote-strip {
  padding: 6px 22px 50px;
  text-align: center;
}
.hero-quote-mark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 3.6rem;
  color: #c8a030;
  opacity: .38;
  line-height: .5;
  margin-bottom: 6px;
}
.hero-quote-strip .hero-quote-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.6rem;
  color: #7a4a1c;
  line-height: 1.7;
  margin: 0;
  min-height: 3.4em;
  transition: opacity .5s ease;
}

/* ── Stepper ─────────────────────────────────────────────────── */
.stepper-wrap { position: relative; margin-top: 18px; margin-bottom: 18px; }
.stepper {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 10px 52px 10px 12px;
  background: rgba(255,253,248,0.88);
  border: 1px solid rgba(222,207,177,0.8); border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.step { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; min-height: 54px; }
.step-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-weight: 700; flex: 0 0 auto; font-size: .8rem;
}
.step-num.step-done { background: var(--green); }
.step strong { display: block; font-size: .88rem; }
.step p { font-size: 0.78rem; margin-top: 2px; color: var(--text-soft); }
.stepper-toggle-btn {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: .7rem;
  color: var(--text-soft); padding: 4px 8px; border-radius: 8px;
  transition: all .15s; white-space: nowrap; font-family: inherit;
}
.stepper-toggle-btn:hover { background: var(--surface-2); color: var(--text); }
.stepper-pill {
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 52px 10px 16px;
  background: rgba(255,253,248,0.88); border: 1px solid rgba(222,207,177,0.8);
  border-radius: var(--radius-xl); box-shadow: var(--shadow); font-size: .82rem;
}
.stepper-pill .pill-step { display: flex; align-items: center; gap: 5px; color: var(--text-soft); font-weight: 600; }
.stepper-pill .pill-num {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-weight: 700; font-size: .65rem;
}
.stepper-pill .pill-num.done { background: var(--green); }
.stepper-pill .sep { color: #c8b898; }
.stepper-wrap.collapsed .stepper { display: none; }
.stepper-wrap.collapsed .stepper-pill { display: flex; }

/* ── Workspace ───────────────────────────────────────────────── */
.workspace {
  display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 18px;
  margin-top: 18px; padding-bottom: 36px; align-items: start;
}
.sidebar, .canvas { min-height: 400px; }
.sidebar {
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 86px; max-height: calc(100vh - 102px); overflow: auto;
  /* iOS resizes 100vh as its toolbar collapses; dvh follows the real area. */
  max-height: calc(100dvh - 102px);
}
.sidebar-header {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.sidebar-badge {
  font-size: .62rem; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; padding: 3px 9px; border-radius: 10px; font-weight: 700; letter-spacing: .05em;
}
.card-badge {
  font-size: .62rem; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; padding: 3px 9px; border-radius: 10px; font-weight: 700; letter-spacing: .05em; margin-left: auto;
}
.upload-zone { display: grid; gap: 10px; }

/* ── Form inputs ─────────────────────────────────────────────── */
label {
  display: block; margin-bottom: 5px; margin-top: 10px;
  font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: #8a735c;
}
.field-label { display: block; margin: 16px 0 8px; font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .08em; color: #8a735c; }
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
select,
textarea {
  width: 100%; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-md);
  padding: 10px 14px; color: var(--text); outline: none;
  transition: border-color .18s, box-shadow .18s; margin-bottom: 8px;
}
input[type="file"] {
  width: 100%; padding: 7px 10px; font-size: .82rem; margin-bottom: 4px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(169,98,28,.12); outline: none;
}
textarea { resize: vertical; min-height: 80px; }
.search {
  width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 14px;
  padding: 10px 14px; color: var(--text); outline: none;
  transition: border-color .18s; margin: 0; font-size: .88rem;
}
.search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(169,98,28,.12); }

/* ── Storage card ────────────────────────────────────────────── */
.storage-card { padding: 8px 12px; background: var(--surface-2); border-radius: 12px; }
.storage-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; }
.progress { height: 5px; background: rgba(60,40,16,.08); border-radius: 999px; overflow: hidden; margin-top: 6px; }

/* ── URL expander ────────────────────────────────────────────── */
.url-expander {
  margin-top: 4px; border: 1px solid rgba(222,207,177,.5); border-radius: 10px;
}
.url-expander > summary {
  list-style: none; cursor: pointer; padding: 8px 12px;
  font-size: .78rem; font-weight: 600; color: var(--text-soft);
  display: flex; align-items: center; gap: 6px; border-radius: 10px; transition: color .12s;
}
.url-expander > summary::-webkit-details-marker { display: none; }
.url-expander > summary::before { content: '▶'; font-size: .54rem; transition: transform .15s; display: inline-block; }
.url-expander[open] > summary::before { transform: rotate(90deg); }
.url-expander > summary:hover { color: var(--primary); }
.url-expander .url-inner { padding: 0 10px 10px; display: grid; gap: 6px; }
.url-expander .url-inner input { margin: 0; font-size: .82rem; padding: 8px 11px; }
.url-expander .url-inner .btn { margin: 0; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--primary)); }

/* ── Chips & filters ─────────────────────────────────────────── */
.sidebar-tools { display: grid; gap: 10px; }
.filters, .prompt-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: #fff;
  color: var(--text-soft); cursor: pointer; font-size: .8rem; font-weight: 600;
  transition: all .15s; display: inline-flex; align-items: center; white-space: nowrap;
}
.chip:hover { background: #f5ede0; border-color: #c9a870; color: var(--text); }
.chip.active { background: #f1e5d0; color: var(--text); border-color: #d3b889; }
.filters .chip { font-size: .58rem; padding: 2px 6px; font-weight: 600; }
/* chips-label above suggestion chips */
.chips-label {
  font-size: .72rem; font-weight: 700; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 8px;
}

/* ── File list ───────────────────────────────────────────────── */
.file-list {
  display: grid; gap: 8px; max-height: 340px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #c9a96e #f5edda;
  -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
}
.file-list::-webkit-scrollbar { width: 5px; }
.file-list::-webkit-scrollbar-track { background: #f5edda; border-radius: 6px; }
.file-list::-webkit-scrollbar-thumb { background: #c9a96e; border-radius: 6px; }
.file-row {
  display: grid; grid-template-columns: 26px minmax(0,1fr) 30px; gap: 10px; align-items: center;
  background: #fff; border: 1px solid rgba(222,207,177,0.9); border-radius: var(--radius-md);
  padding: 10px 12px; transition: box-shadow .15s, border-color .15s;
}
.file-row:hover { box-shadow: 0 2px 10px rgba(100,60,20,.08); border-color: #d3b889; }
.file-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; color: var(--text); }
.file-meta { color: var(--text-soft); font-size: 0.78rem; margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.asset-num { color: var(--text-soft); font-weight: 700; font-size: .72rem; display: flex; align-items: center; justify-content: center; }
.icon-btn {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--text-soft); cursor: pointer; font-size: .8rem;
  display: flex; align-items: center; justify-content: center; padding: 0; transition: all .15s;
}
.icon-btn:hover { background: #fff0ee; border-color: #e8a898; color: var(--danger); }
.icon-btn.share-btn:hover { background: #e8f0fd; border-color: #b4cef5; color: #2c5fa8; }

/* ── Canvas & cards ──────────────────────────────────────────── */
.canvas { display: grid; gap: 18px; }
.ask-card, .answer-card { padding: 22px; }
.ask-card h2, .answer-card h2 {
  font-size: 1.5rem; border-bottom: 1px solid var(--line); padding-bottom: 9px;
  margin-bottom: 18px; display: flex; align-items: center; gap: 8px;
}

/* ── Prompt chips ────────────────────────────────────────────── */
.prompt-chips { margin-bottom: 14px; margin-top: -4px; }
.prompt-chips .chip { font-size: .76rem; padding: 5px 12px; background: linear-gradient(135deg,#fefcf5,#f5edd8); border-color: #d8ccb4; color: #5a3a1a; }
.prompt-chips .chip:hover { background: #f0e4cc; border-color: var(--gold); color: var(--primary-dark); }

/* ── Ask form ────────────────────────────────────────────────── */
.ask-grid { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 14px; margin-top: 16px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.form-row-2 > div > label { margin-top: 0; }
.question-box {
  width: 100%; resize: vertical; min-height: 100px; border: 1px solid var(--line);
  border-radius: 18px; padding: 14px 16px; background: #fff; color: var(--text);
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.05rem; line-height: 1.6; margin-bottom: 0;
}
.question-box:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(169,98,28,.12); }
/* Context panel — replaces hidden accordion, always visible */
.context-panel {
  margin-top: 12px;
  border: 1px solid rgba(222,207,177,.8); border-radius: 14px;
  background: #fcf8f0; padding: 12px 16px 16px;
}
.context-panel-header {
  display: flex; align-items: center; gap: 7px; margin-bottom: 12px; flex-wrap: wrap;
}
.context-panel-icon { font-size: .9rem; line-height: 1; }
.context-panel-title { font-size: .82rem; font-weight: 700; color: var(--primary); }
.context-panel-opt {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: #fff; background: #c8a060; padding: 2px 8px; border-radius: 10px;
}
.context-panel-desc { font-size: .72rem; color: var(--text-soft); font-style: italic; }
.hint-field-label { font-size: .72rem; font-weight: 700; color: var(--primary); margin-bottom: 4px; letter-spacing: .04em; text-transform: uppercase; }
.hint-text { font-size: .73rem; color: var(--text-soft); font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Generate CTA */
.generate-cta { margin-top: 16px; display: flex; justify-content: center; }
.btn-generate {
  width: auto; min-width: min(320px, 100%); padding: 11px 36px;
  font-size: .88rem; font-weight: 800; font-family: 'Lato', sans-serif;
  letter-spacing: .09em; text-transform: uppercase;
  color: #fff8ec;
  background: linear-gradient(135deg, #8b3c10 0%, #b96a24 45%, #d99a3e 100%);
  background-size: 200% 100%; background-position: 0% 0%;
  border: none; border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 26px -8px rgba(139,60,16,.55);
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: background-position .45s ease, box-shadow .2s ease, transform .12s ease, filter .15s;
}
.btn-generate::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: skewX(-20deg); transition: left .5s ease; pointer-events: none;
}
.btn-generate:hover {
  background-position: 100% 0; transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 14px 30px -8px rgba(139,60,16,.62);
}
.btn-generate:hover::after { left: 120%; }
.btn-generate:active { transform: scale(.96); filter: brightness(.95); }
.btn-generate:disabled { opacity: .65; cursor: not-allowed; transform: none; }
@media (max-width: 480px) { .btn-generate { width: 100%; } }
/* Timeline feature card */
.timeline-feature {
  margin-top: 14px;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e5d9c4; border-radius: 16px;
  background: linear-gradient(180deg, #fbf7ee 0%, #f7f1e3 100%);
  box-shadow: 0 10px 26px -20px rgba(120, 78, 30, .4);
}
.timeline-feature-icon {
  flex-shrink: 0; width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem; border-radius: 12px;
  background: rgba(201, 154, 77, .16); border: 1px solid rgba(201, 154, 77, .3);
}
.timeline-feature-body { flex: 1; min-width: 0; }
.timeline-feature-title {
  display: flex; align-items: center; gap: 6px;
  font-size: .92rem; font-weight: 700; color: #3d2718;
}
.timeline-feature-sub { font-size: .78rem; color: #8a7860; line-height: 1.5; margin-top: 2px; }
.timeline-feature-btn {
  flex-shrink: 0;
  background: transparent; color: #8b4d22;
  border: 1.5px solid rgba(169, 98, 28, .45); border-radius: 999px;
  padding: 9px 20px; font-size: .8rem; font-weight: 700; font-family: 'Lato', sans-serif;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.timeline-feature-btn:hover {
  background: linear-gradient(135deg, #c99a4d, #a9621c); color: #fff;
  border-color: transparent; transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(169, 98, 28, .3);
}
.timeline-feature-btn:active { transform: scale(.96); }
.timeline-feature-btn:disabled { opacity: .6; cursor: wait; transform: none; }
@media (max-width: 640px) {
  .timeline-feature { flex-wrap: wrap; }
  .timeline-feature-btn { width: 100%; padding: 11px 20px; }
}
/* Settings row: timeline only */
.form-settings-row { margin-top: 10px; }
.settings-timeline { display: flex; }
.action-row, .actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btn-quiet {
  background: none; border: none; color: var(--text-soft); font-size: .8rem;
  cursor: pointer; padding: 4px 2px; font-weight: 600; transition: color .15s;
  font-family: inherit; display: inline-flex; align-items: center; gap: 4px;
}
.btn-quiet:hover { color: var(--danger); }
.btn-secondary-action {
  background: none; border: 1px solid rgba(210,176,106,.5); border-radius: 999px;
  padding: 8px 15px; font-size: .82rem; color: var(--text-soft); cursor: pointer;
  transition: all .15s; font-weight: 600; display: inline-flex; align-items: center;
  gap: 6px; font-family: inherit;
}
.btn-secondary-action:hover { background: var(--surface-2); color: var(--text); border-color: #c9a870; }

/* ── Glossy blue action buttons ──────────────────────────────── */
.btn-blue-gloss {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 999px; font-size: .84rem; font-weight: 700;
  font-family: inherit; cursor: pointer; border: none;
  background: linear-gradient(160deg, #5b9cf6 0%, #2563eb 55%, #1d4ed8 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 3px 10px rgba(37,99,235,.35);
  transition: filter .15s, box-shadow .15s, transform .1s;
}
.btn-blue-gloss:hover {
  filter: brightness(1.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 5px 16px rgba(37,99,235,.45);
  transform: translateY(-1px);
}
.btn-blue-gloss:active { filter: brightness(.96); transform: translateY(0); }

.btn-blue-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
  background: rgba(37,99,235,.06); border: 1.5px solid rgba(37,99,235,.28);
  color: #2563eb; transition: all .15s;
}
.btn-blue-ghost:hover {
  background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.5);
  box-shadow: 0 2px 8px rgba(37,99,235,.18);
}

.btn-action-hint {
  display: block; font-size: .71rem; color: var(--text-soft); margin-top: 4px;
  font-style: italic; line-height: 1.3;
}

.answer-panel-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: nowrap;
}
.answer-panel-actions-row { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; flex-shrink: 0; }
.answer-panel-actions { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }

.sidebar-util-row {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}

/* ── Answer panel ────────────────────────────────────────────── */
.answer-question {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 11px 16px;
  background: linear-gradient(135deg, #f8f2e4, #f4ede0);
  border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
}
.answer-q-icon { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.answer-question > span:last-child { font-family: "Cormorant Garamond", Georgia, serif; font-size: .94rem; color: #3a2a14; font-style: italic; line-height: 1.5; }
.answer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.answer-meta:empty { display: none; margin: 0; }
.trust-badge { font-size: .72rem; font-weight: 700; padding: 4px 11px; border-radius: 20px; letter-spacing: .04em; white-space: nowrap; }
.source-chips-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.source-label { font-size: .68rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.source-chip { font-size: .72rem; background: #e8f0fd; color: #2c5fa8; border: 1px solid #b4cef5; border-radius: 10px; padding: 3px 9px; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.answer-body { line-height: 1.82; }
#result { min-height: 80px; line-height: 1.82; font-size: .95rem; color: var(--text); }
.answer-section-heading { font-family: "Cormorant Garamond", serif; font-size: 1.12rem; font-weight: 700; color: var(--primary); margin: 1.2rem 0 0.4rem; border-bottom: 1px solid #d4b483; padding-bottom: 2px; }
.next-questions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.next-q-heading {
  font-size: .7rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 8px;
}
.next-q-btn {
  display: flex; align-items: flex-start; gap: 8px; text-align: left;
  background: #fefcf5; border: 1px solid rgba(210,176,106,.35);
  border-radius: 10px; padding: 9px 13px; font-size: .84rem; color: #4a2e10;
  cursor: pointer; transition: all .15s; font-family: inherit; line-height: 1.4;
  width: 100%; margin-bottom: 5px;
}
.next-q-btn::before { content: '›'; color: var(--primary); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.next-q-btn:hover { background: #f7eedd; border-color: var(--gold); color: var(--text); }
.evidence-excerpt {
  background: #faf6ec; border-left: 2px solid var(--gold);
  border-radius: 0 8px 8px 0; padding: 8px 12px; margin-bottom: 6px;
}
.evidence-source-label {
  font-size: .68rem; font-weight: 700; color: #9a7850; text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 3px; overflow-wrap: break-word; word-break: break-word;
}
.evidence-excerpt-text { font-size: .83rem; color: #4a3020; font-style: italic; line-height: 1.55; }
.name-list { list-style: none; padding: 0; margin: 0 0 0.8rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 1px 12px; }
.name-list li { padding: 2px 0; font-size: 0.9rem; color: var(--text); }

/* ── Badges & tags ───────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: #f5ecdb; color: #7b5d3f; font-size: .84rem; border: 1px solid rgba(210,176,106,.34); }
.badge-high { background: #e7f2e0; color: var(--green-dark); border-color: rgba(95,139,76,.25); }
.badge-trust { background: #fff7df; color: #8a6427; }
.tag { font-size: .68rem; color: var(--text-soft); background: rgba(255,255,255,.8); padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line); white-space: nowrap; }
.tag-ok { background: #e8f4e0 !important; color: #4a7a38 !important; border-color: #b8d8a0 !important; }
.shared-badge { font-size:.72rem; background:#e8f0fd; color:#2c5fa8; border:1px solid #b4cef5; border-radius:10px; padding:1px 8px; white-space:nowrap; }
.share-entry { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid rgba(222,207,177,.6); font-size:.87rem; }
.share-entry:last-child { border-bottom:none; }
.share-entry .share-email { flex:1; color:var(--text); font-weight:600; }
.share-entry .share-date { font-size:.75rem; color:var(--text-soft); white-space:nowrap; }
.btn-revoke { background:#fdf0f0; color:#a83030; border:1px solid #e8b4b4; border-radius:5px; padding:3px 10px; font-size:.78rem; cursor:pointer; white-space:nowrap; }
.btn-revoke:hover { background:#a83030; color:#fff; }
.btn-share-asset { background:#e8f0fd; color:#2c5fa8; border:1px solid #b4cef5; border-radius:5px; padding:3px 9px; font-size:.78rem; cursor:pointer; white-space:nowrap; }
.btn-share-asset:hover { background:#2c5fa8; color:#fff; }

/* ── Empty states ────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 32px 16px 24px; }
.empty-icon  { font-size: 2.2rem; margin-bottom: 12px; opacity: .45; }
.empty-title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.05rem; color: #c8b898; font-style: italic; margin-bottom: 6px; }
.empty-sub { font-size: .83rem; color: #b0a090; }
.empty-archive { text-align: center; padding: 28px 12px 20px; }
.empty-arch-icon { font-size: 2rem; margin-bottom: 10px; opacity: .4; }
.empty-arch-msg { font-family: "Cormorant Garamond", Georgia, serif; font-size: .9rem; color: #b8a888; font-style: italic; margin-bottom: 5px; line-height: 1.45; }
.empty-arch-sub { font-size: .76rem; color: #c0b0a0; }

/* ── Loading spinner ─────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.loading-ring { display: inline-block; width: 28px; height: 28px; border: 3px solid #e8dfd0; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; }
.loading-state { display: flex; align-items: center; gap: 14px; padding: 20px 4px; }
.loading-dots span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); margin: 0 2px; animation: bounce .9s infinite ease-in-out both; }
.loading-dots span:nth-child(2) { animation-delay: .15s; }
.loading-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity:.4; }
  40% { transform: scale(1); opacity:1; }
}
#query-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ── Modals ──────────────────────────────────────────────────── */
#auth-modal, #dup-modal, #share-modal, #tribute-modal, #feedback-modal {
  display: none; position: fixed; inset: 0; background: rgba(20,12,5,.60);
  z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
#auth-modal.open, #dup-modal.open, #share-modal.open, #feedback-modal.open { display: flex; }
.modal-box { background: var(--surface); border-radius: var(--radius-lg); padding: 32px 34px; width: 390px; box-shadow: 0 12px 50px rgba(40,20,5,.30); border: 1px solid var(--line); }
.modal-box h3 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; margin: 0 0 20px; color: var(--text); }
.modal-box input { display: block; width: 100%; margin-bottom: 10px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-size: .9rem; background: #fff; outline: none; transition: border-color .18s, box-shadow .18s; }
.modal-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(169,98,28,.12); }
.modal-box button { width: 100%; padding: 11px; margin-top: 6px; border-radius: var(--radius-sm); font-weight: 700; font-size: .9rem; border: none; cursor: pointer; }
.modal-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.modal-tabs button { flex: 1; background: var(--surface-2); color: var(--text-soft); border: 1.5px solid var(--line); padding: 8px; border-radius: 8px; font-weight: 700; font-size: .85rem; cursor: pointer; margin: 0; transition: all .15s; }
.modal-tabs button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
#auth-submit { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
#auth-submit:hover { opacity: .92; }
.err { color: var(--danger); font-size: .83rem; margin-top: 8px; }
.dup-info { background: #fdf6e0; border: 1px solid #dcc060; border-radius: 9px; padding: 11px 14px; font-size: .87rem; margin-bottom: 16px; color: #4a3a10; }
.dup-actions { display: flex; flex-direction: column; gap: 8px; }
.dup-actions button { padding: 10px 14px; border: none; border-radius: 8px; cursor: pointer; font-size: .88rem; text-align: left; font-weight: 700; width: 100%; margin: 0; }
.btn-replace  { background: #fdf0f0; color: #a83030; border: 1.5px solid #e8b4b4 !important; }
.btn-replace:hover  { background: #a83030; color: #fff; }
.btn-keepboth { background: #e6f2e8; color: #3a6b40; border: 1.5px solid #a8d5af !important; }
.btn-keepboth:hover { background: #3a6b40; color: #fff; }
.btn-rename   { background: #f5ede2; color: var(--primary-dark); border: 1.5px solid #d4b49a !important; }
.btn-rename:hover   { background: var(--primary-dark); color: #fff; }
.btn-skip     { background: var(--surface-2); color: var(--text-soft); border: 1.5px solid var(--line) !important; }
.btn-skip:hover     { background: var(--line); }
.rename-row { display: none; margin-top: 4px; }
.rename-row input { margin-bottom: 0; width: 100%; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 8px; font-size: .88rem; }
.rename-row button { margin-top: 6px; background: var(--primary); color: #fff; border: none; }

/* ── Mobile nav ──────────────────────────────────────────────── */
.mobile-nav {
  position: sticky; bottom: 12px; width: min(96%, 420px); margin: 0 auto 14px;
  display: none; justify-content: space-between; gap: 8px; padding: 8px; z-index: 30;
  background: rgba(255,253,248,.94); border: 1px solid rgba(222,207,177,.8);
  border-radius: 999px; box-shadow: var(--shadow);
}
.mobile-nav button { flex: 1; padding: 10px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mobile-nav button.active { background: rgba(169,98,28,.1); color: var(--primary); }
.mob-tab-icon { font-size: 1.2rem; line-height: 1; }
.mob-tab-label { font-size: .6rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ── Responsive ──────────────────────────────────────────────── */
/* Nav/topbar mobile behavior lives with the nav-dropdown/drawer CSS above —
   see the @media (max-width: 980px) block near the mobile drawer rules. */
@media (max-width: 1200px) { .workspace { grid-template-columns: 320px minmax(0,1fr); } }
@media (max-width: 640px) {
  .topbar, .hero, .stepper, .workspace { width: calc(100% - 20px); }
  .topbar { padding: 12px 0; }
  .hero { padding: 16px; border-radius: 26px; }
  .hero h1 { font-size: 1.55rem; }
  .proof-chips { gap: 5px; }
  .proof-chip { font-size: 0.72rem; padding: 2px 8px; }
  .stepper { grid-template-columns: 1fr; }
  .step { min-height: auto; }
  .sidebar, .ask-card, .answer-card { padding: 16px; }
  .form-row-2 { grid-template-columns: 1fr; }
}

/* ── Weekly Memory Prompt ─────────────────────────────────────── */
.weekly-prompt-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(135deg, #fffbf0 0%, #fef3d8 100%);
  border: 1px solid #e8c96c; border-radius: 12px;
  padding: 11px 14px; margin-bottom: 12px;
}
.weekly-prompt-icon { font-size: 1.35rem; flex-shrink: 0; line-height: 1.3; }
.weekly-prompt-body { flex: 1; min-width: 0; }
.weekly-prompt-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #9c7010; margin-bottom: 3px;
}
.weekly-prompt-text {
  font-size: .87rem; color: #5a3a08; line-height: 1.4; font-style: italic;
}
.weekly-prompt-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.weekly-prompt-ask {
  font-size: .78rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #d4942a, #b87018);
  border: none; border-radius: 20px; padding: 4px 14px; cursor: pointer;
}
.weekly-prompt-dismiss {
  font-size: .74rem; color: #a08040; background: none; border: none; cursor: pointer; padding: 0;
}

/* ── On This Day banner ───────────────────────────────────────── */
.on-this-day-banner {
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(135deg, #f0faf4 0%, #d8f0e4 100%);
  border: 1px solid #7dc49a; border-left: 4px solid #3c9e68;
  border-radius: 10px; padding: 12px 16px; margin-bottom: 16px;
}
.otd-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1.2; }
.otd-body { flex: 1; min-width: 0; }
.otd-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #2a7050; margin-bottom: 3px;
}
.otd-memory { font-size: .9rem; color: #1a4030; line-height: 1.5; font-style: italic; }
.otd-date { font-size: .72rem; color: #4a8060; font-weight: 600; margin-top: 4px; }

/* ── Share Card trigger + modal ───────────────────────────────── */
.share-card-trigger {
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed #d8c8a0;
  display: flex; align-items: center;
}
.share-card-trigger-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 700; letter-spacing: .01em;
  color: #5a2508;
  background: linear-gradient(135deg, #fef8ec 0%, #fdecc4 100%);
  border: 1.5px solid #d4a030; border-radius: 999px;
  padding: 8px 20px; cursor: pointer;
  transition: background .18s, box-shadow .18s;
}
.share-card-trigger-btn:hover {
  background: linear-gradient(135deg, #fdecc4, #fad88a);
  box-shadow: 0 2px 10px rgba(180,120,20,.2);
}
.share-card-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(20,8,0,.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.share-card-modal.hidden { display: none; }
.share-card-inner {
  background: #fffdf4; border-radius: 18px; max-width: 540px; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden;
  max-height: 90vh;
}
.share-card-header {
  background: linear-gradient(135deg, #5a2508 0%, #8b3c10 100%);
  padding: 15px 20px; display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.share-card-header-left { display: flex; align-items: center; gap: 9px; }
.share-card-header-icon { font-size: 1.2rem; }
.share-card-header-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #ffe8a0; font-size: 1.1rem; font-weight: 700; letter-spacing: .03em;
}
.share-card-close {
  color: #ffd070; background: rgba(255,255,255,.12); border: none;
  font-size: 1rem; line-height: 1; width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.share-card-close:hover { background: rgba(255,255,255,.25); }
.share-card-preview {
  padding: 20px 24px 16px;
  background: linear-gradient(180deg, #fffdf4 0%, #fef6e0 100%);
  overflow-y: auto; flex: 1;
  border-bottom: 1px solid #e8d8a8;
}
.share-card-section-label {
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .13em; color: #9c6a20; margin-bottom: 5px;
}
.share-card-q-section { margin-bottom: 0; }
.share-card-q {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem; font-style: italic; color: #4a2010;
  line-height: 1.45; font-weight: 600;
}
.share-card-rule {
  height: 1px; background: linear-gradient(90deg, transparent, #d4b060, transparent);
  margin: 14px 0;
}
.share-card-a-section { margin-bottom: 14px; }
.share-card-answer {
  font-size: .88rem; color: #3d2718; line-height: 1.68;
}
.share-card-answer p { margin: 0 0 .5rem; }
.share-card-answer p:last-child { margin-bottom: 0; }
.share-card-answer ul, .share-card-answer ol { margin: .35rem 0 .5rem 1.4rem; padding: 0; }
.share-card-answer li { margin-bottom: .25rem; }
.share-card-answer h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .92rem; font-weight: 700; color: #5a2508;
  text-transform: uppercase; letter-spacing: .06em;
  margin: .9rem 0 .35rem; border-bottom: 1px solid #e8c878; padding-bottom: 2px;
}
.share-card-answer strong { font-weight: 700; color: #4a2010; }
.share-card-answer em { font-style: italic; }
.share-card-watermark {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px dashed #e0c888;
}
.share-card-wm-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .8rem; font-weight: 700; color: #8b5e20;
}
.share-card-wm-date { font-size: .72rem; color: #a08040; font-style: italic; }
.share-card-actions {
  display: flex; gap: 10px; padding: 14px 20px; flex-shrink: 0;
  background: #fdf8ee;
}
.share-card-copy-btn {
  flex: 1; padding: 11px 0; border-radius: 999px; font-size: .84rem; font-weight: 700;
  background: linear-gradient(135deg, #5f8b4c, #3a6030); color: #fff;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: filter .15s;
}
.share-card-copy-btn:hover { filter: brightness(1.1); }
.share-card-print-btn {
  flex: 1; padding: 11px 0; border-radius: 999px; font-size: .84rem; font-weight: 700;
  background: linear-gradient(135deg, #4a90d9, #1d6abf); color: #fff;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: filter .15s;
}
.share-card-print-btn:hover { filter: brightness(1.1); }
.share-card-btn-icon { font-size: .95rem; }

/* ── Notifications panel ──────────────────────────────────────────── */
.notif-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(20,8,0,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.notif-overlay.hidden { display: none; }
.notif-panel {
  background: #fffdf4; border-radius: 20px; max-width: 480px; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.32);
  overflow: hidden; display: flex; flex-direction: column;
  /* The overlay centres this and is position: fixed, so it cannot scroll.
     Without a ceiling the panel simply grew past both edges of the screen and
     the Save button sat below the fold with no way to reach it — measured at
     906px tall with the digest options open, against roughly 748px of usable
     height on an iPhone once Safari's toolbars are showing. */
  max-height: calc(100vh - 40px);    /* 20px of overlay padding, top and bottom */
  max-height: calc(100dvh - 40px);   /* follows the real area as the toolbar collapses */
}
.notif-header {
  background: linear-gradient(135deg, #3a5a20 0%, #5f8b4c 100%);
  padding: 15px 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.notif-header-left { display: flex; align-items: center; gap: 9px; }
.notif-header-icon { font-size: 1.2rem; }
.notif-header-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #e8f8d8; font-size: 1.1rem; font-weight: 700; letter-spacing: .03em;
}
.notif-close {
  color: #c8e8a0; background: rgba(255,255,255,.15); border: none;
  font-size: 1rem; width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.notif-close:hover { background: rgba(255,255,255,.28); }
/* min-height: 0 is what actually lets this scroll. A flex item defaults to
   min-height: auto, which refuses to shrink below its content, so overflow-y
   alone would leave the panel growing instead of the body scrolling. */
.notif-body { padding: 22px 24px; overflow-y: auto; min-height: 0; }
.notif-intro {
  font-size: .88rem; color: #5a4a38; line-height: 1.55; margin-bottom: 18px;
}
.notif-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid #e8d8b0;
}
.notif-row-info { flex: 1; min-width: 0; }
.notif-row-title {
  font-size: .9rem; font-weight: 700; color: #3d2718; margin-bottom: 4px;
}
.notif-row-desc {
  font-size: .78rem; color: #7a6f65; line-height: 1.5;
}
.notif-digest-day {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.notif-day-label { font-size: .76rem; font-weight: 700; color: #9c6a20; }
.notif-day-select {
  font-size: .8rem; color: #3d2718; border: 1.5px solid #e0d0a0;
  border-radius: 7px; padding: 4px 8px; background: #fffdf4; outline: none;
  cursor: pointer;
}
/* Digest options block */
.notif-digest-options { margin-top: 12px; }
.notif-digest-freq { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.notif-freq-btns { display: flex; gap: 6px; }
.notif-freq-btn {
  padding: 4px 13px; border-radius: 999px; font-size: .75rem; font-weight: 700;
  border: 1.5px solid #c8a860; background: #fffdf4; color: #9c6a20;
  cursor: pointer; transition: background .15s, color .15s;
}
.notif-freq-btn.active, .notif-freq-btn:hover {
  background: #5f8b4c; border-color: #5f8b4c; color: #fff;
}
/* Advance notice row */
.notif-advance-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0 4px; margin-bottom: 2px;
}
/* Section labels */
.notif-section-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #a9621c;
  padding: 14px 0 4px; border-top: 1px solid #e8d8b0; margin-top: 4px;
}
.notif-section-label:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
/* Toggle switch */
.notif-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.notif-toggle input { opacity: 0; width: 0; height: 0; }
.notif-toggle-track {
  position: absolute; inset: 0; background: #d8cdb8; border-radius: 999px;
  cursor: pointer; transition: background .2s;
}
.notif-toggle input:checked + .notif-toggle-track { background: #5f8b4c; }
.notif-toggle-thumb {
  position: absolute; left: 3px; top: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.notif-toggle input:checked + .notif-toggle-track .notif-toggle-thumb { transform: translateX(20px); }
/* Save row */
.notif-save-row {
  display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid #e8d8b0;
}
.notif-save-btn {
  padding: 10px 24px; border-radius: 999px; font-size: .85rem; font-weight: 700;
  background: linear-gradient(135deg, #5f8b4c, #3a6030); color: #fff;
  border: none; cursor: pointer; transition: filter .15s;
}
.notif-save-btn:hover:not(:disabled) { filter: brightness(1.1); }
.notif-save-btn:disabled { opacity: .5; cursor: not-allowed; }
.notif-save-status { font-size: .82rem; font-weight: 600; }
.notif-smtp-note {
  margin-top: 12px; padding: 10px 14px; background: #fff8e8;
  border: 1px solid #e8c060; border-radius: 8px;
  font-size: .76rem; color: #7a5010; line-height: 1.5;
}
.notif-smtp-note code { font-size: .75rem; background: #f0e8c8; padding: 1px 4px; border-radius: 3px; }

/* ── Occasions panel ──────────────────────────────────────────── */
.occasions-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(20,8,0,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.occasions-overlay.hidden { display: none; }
.occasions-panel {
  background: #fffdf4; border-radius: 20px; max-width: 600px; width: 100%;
  max-height: 80vh; box-shadow: 0 24px 64px rgba(0,0,0,.32);
  overflow: hidden; display: flex; flex-direction: column;
}
.occasions-header {
  background: linear-gradient(135deg, #c76e3a 0%, #e89856 100%);
  padding: 15px 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.occasions-header-left { display: flex; align-items: center; gap: 9px; }
.occasions-header-icon { font-size: 1.2rem; }
.occasions-header-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #fff8e8; font-size: 1.1rem; font-weight: 700; letter-spacing: .03em;
}
.occasions-close {
  color: #ffe8c8; background: rgba(255,255,255,.15); border: none;
  font-size: 1rem; width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.occasions-close:hover { background: rgba(255,255,255,.28); }
.occasions-body {
  padding: 22px 24px; overflow-y: auto; flex: 1;
}
.occasions-intro {
  font-size: .88rem; color: #5a4a38; line-height: 1.55; margin-bottom: 18px;
}

/* ── Hero Birthday Banner ──────────────────────────────────────────────────── */
#hero-birthday-banner {
  background: linear-gradient(135deg, #fff3d6 0%, #fde8a8 100%);
  border-top: 3px solid #e8b040;
  border-bottom: 3px solid #e8b040;
  padding: 14px 24px;
  animation: hbb-slide-in .5s ease;
}
@keyframes hbb-slide-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hbb-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
}
.hbb-icon {
  font-size: 1.8rem; flex-shrink: 0; line-height: 1;
  animation: hbb-bounce .8s ease infinite alternate;
}
@keyframes hbb-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}
#hbb-text {
  flex: 1; margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem; font-style: italic;
  color: #6b3a08; line-height: 1.45;
}
.hbb-dismiss {
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: #a07030; opacity: .65;
  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
  transition: opacity .15s;
}
.hbb-dismiss:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   Family Groups UI
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Inbox badge on topbar button ─────────────────────────────────────────── */
.inbox-badge {
  position: absolute; top: -3px; right: -3px;
  background: #c0392b; color: #fff;
  font-size: .62rem; font-weight: 700;
  min-width: 16px; height: 16px; line-height: 16px;
  border-radius: 8px; text-align: center; padding: 0 4px;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--surface, #fdf8f0);
}

/* ── Groups overlay + panel ───────────────────────────────────────────────── */
.groups-overlay {
  position: fixed; inset: 0;
  background: rgba(30,18,10,.45);
  z-index: 1200;
  display: flex; align-items: stretch; justify-content: flex-end;
  transition: opacity .2s;
}
.groups-overlay.hidden { display: none; }
.groups-panel {
  width: min(680px, 100vw);
  background: var(--surface, #fffdf8);
  border-left: 2px solid #e8dcc8;
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 0 0 40px;
}
.groups-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1.5px solid #ede5d5;
  position: sticky; top: 0;
  background: var(--surface, #fffdf8);
  z-index: 2;
}
.groups-panel-title-row { display: flex; align-items: center; gap: 10px; }
.groups-panel-icon { font-size: 1.35rem; }
.groups-panel-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem; font-weight: 700;
  color: var(--text, #3d2718);
}
.groups-close {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: #8b7060; padding: 4px 8px; border-radius: 4px;
  transition: color .15s;
}
.groups-close:hover { color: #3d2718; }

/* ── Groups list ──────────────────────────────────────────────────────────── */
.groups-intro {
  font-size: .85rem; color: #8b7060; line-height: 1.55;
  padding: 16px 22px 8px; margin: 0;
}
.groups-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 12px 22px 22px;
}
.group-card {
  background: #fdf8f2; border: 1.5px solid #e8dcc8; border-radius: 12px;
  padding: 16px 18px; cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.group-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.09); border-color: #c8a878; }
.group-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem; font-weight: 700; color: #3d2718;
  margin-bottom: 4px;
}
.group-card-desc { font-size: .8rem; color: #8b7060; margin-bottom: 10px; min-height: 18px; }
.group-card-meta { font-size: .76rem; color: #7a6656; display: flex; flex-direction: column; gap: 3px; }

.group-card-occ-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e6d7bb;
  font-size: .74rem; font-weight: 700; color: #6b4a1a;
  letter-spacing: .02em;
}
.group-card-occ-badge {
  background: #f4ede0; color: #8b5e3c;
  font-size: .68rem; font-weight: 700;
  border-radius: 999px; padding: 2px 8px;
}
.group-card-occ-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 8px;
}
.group-card-occ {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  color: #4a3524;
  padding: 4px 8px;
  border-radius: 8px;
  background: #fbf5e9;
  border: 1px solid #f0e4cd;
}
.group-card-occ--soon {
  background: #fef3e0;
  border-color: #f0d6a5;
}
.group-card-occ-icon { font-size: .95rem; line-height: 1; }
.group-card-occ-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.group-card-occ-when {
  font-size: .68rem; font-weight: 700;
  color: #8b5e3c; letter-spacing: .02em;
  white-space: nowrap;
}
.group-card-occ--soon .group-card-occ-when { color: #a9621c; }
.group-card-occ-more {
  font-size: .7rem; color: #8b7060; font-weight: 600;
  text-align: center; padding: 2px 0;
}
.group-card-empty-occ {
  font-size: .74rem; color: #9a8975; font-style: italic;
  padding: 6px 4px; line-height: 1.4;
}
.group-card-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed #e6d7bb;
}
.group-card-act {
  flex: 1 1 auto;
  background: #fff8ec; color: #6b4a1a;
  border: 1px solid #ead9b8;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: .7rem; font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.group-card-act:hover {
  background: #f5e5c4; border-color: #c8a878;
}
.group-card-act:active { transform: translateY(1px); }
/* Destructive action — owner-only Delete. */
.group-card-act--danger { background: #fdf1f0; color: #8a2b22; border-color: #eccac5; }
.group-card-act--danger:hover { background: #f8ddda; border-color: #d99a92; }

/* ── Group detail ─────────────────────────────────────────────────────────── */
.groups-back-btn {
  background: none; border: none; cursor: pointer;
  font-size: .85rem; color: #8b5e3c; font-weight: 600;
  padding: 14px 22px 6px; text-align: left;
  display: block; transition: color .15s;
}
.groups-back-btn:hover { color: #3d2718; }
.groups-detail-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 8px 22px 14px;
  border-bottom: 1.5px solid #ede5d5;
}
.groups-detail-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem; font-weight: 700; color: #3d2718;
}
.groups-detail-desc { font-size: .82rem; color: #8b7060; margin-top: 3px; }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.groups-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid #ede5d5;
  padding: 0 22px; margin-top: 4px;
  overflow-x: auto;
}
.groups-tab {
  background: none; border: none; cursor: pointer;
  font-size: .83rem; font-weight: 600; color: #8b7060;
  padding: 10px 16px; border-bottom: 2.5px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s; white-space: nowrap;
}
.groups-tab.active { color: #a9621c; border-bottom-color: #a9621c; }
.groups-tab-content { display: none; padding: 18px 22px; }
.groups-tab-content.active { display: block; }

/* ── Generic items list ───────────────────────────────────────────────────── */
.groups-item-list { display: flex; flex-direction: column; gap: 8px; }
.grp-item {
  display: flex; align-items: center; justify-content: space-between;
  background: #fdf8f2; border: 1px solid #ede5d5; border-radius: 9px;
  padding: 10px 14px;
}
.grp-item-main { flex: 1; min-width: 0; }
.grp-item-name { font-size: .88rem; font-weight: 600; color: #3d2718; }
.grp-item-sub { font-size: .77rem; color: #8b7060; margin-top: 2px; }
.grp-item-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: 10px; }
.grp-act-btn {
  background: none; border: 1.5px solid #d8ccb4; cursor: pointer;
  border-radius: 6px; padding: 3px 7px; font-size: .82rem;
  color: #7a6656; transition: background .12s;
}
.grp-act-btn:hover { background: #f0ebe4; }
.grp-act-del:hover { background: #fde8e0; border-color: #e08070; color: #c0392b; }

/* Occasion rows: stack the info above a full-width, labeled action bar so
   every action reads as icon + text (clearer than icon-only for all ages). */
.grp-item--occ { flex-direction: column; align-items: stretch; gap: 10px; }
.grp-item--occ .grp-item-main { flex: none; }
.occ-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.occ-act {
  display: inline-flex; align-items: center; gap: 7px; line-height: 1;
  font-family: inherit; font-size: .82rem; font-weight: 600; white-space: nowrap;
  color: #6b4a2e; background: #fff; border: 1px solid #e2d3b8; border-radius: 999px;
  padding: 8px 15px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.occ-act .occ-ic { font-size: .95rem; }
.occ-act:hover { background: #f7edda; border-color: #d6ae6a; color: #4b2f14; }
.occ-act:active { transform: scale(.97); }
.occ-act:focus-visible { outline: 2px solid #b0842e; outline-offset: 2px; }
.occ-act--primary { background: #a9621c; border-color: #a9621c; color: #fff; }
.occ-act--primary:hover { background: #be7630; border-color: #be7630; color: #fff; }
.occ-act--danger { color: #9a3b3b; border-color: #e7b7b7; }
.occ-act--danger:hover { background: #fdeeee; border-color: #d98a8a; color: #7a2b2b; }
@media (max-width: 640px) {
  .occ-actions { gap: 7px; }
  .occ-act { flex: 1 1 calc(50% - 4px); justify-content: center; font-size: .8rem; padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) { .occ-act:active { transform: none; } }
.grp-role-sel {
  font-size: .78rem; padding: 3px 6px; border: 1.5px solid #d8ccb4;
  border-radius: 6px; background: #fffdf8; color: #5a4a38; cursor: pointer;
  outline: none;
}
.grp-role-sel:focus { border-color: #a9621c; }
.grp-empty {
  font-size: .82rem; color: #a09080; text-align: center;
  padding: 20px 0; margin: 0;
}
.occ-today { font-weight: 700; color: #c0392b; background: #fde8e0; padding: 1px 6px; border-radius: 4px; }
.occ-soon  { font-weight: 700; color: #a9621c; background: #fef3e0; padding: 1px 6px; border-radius: 4px; }
.occ-days  { font-size: .76rem; color: #8b7060; }

/* ── Reminder pref form ───────────────────────────────────────────────────── */
.reminder-pref-form { display: flex; flex-direction: column; gap: 16px; }
.rpf-row { display: flex; flex-direction: column; gap: 8px; }
.rpf-label { font-size: .82rem; font-weight: 600; color: #5a4a38; }
.rpf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rpf-chip {
  display: flex; align-items: center; gap: 5px;
  font-size: .8rem; color: #5a4a38;
  background: #f0ebe4; border: 1px solid #d8ccb4; border-radius: 20px;
  padding: 4px 12px; cursor: pointer; transition: background .12s;
}
.rpf-chip:hover { background: #e8dcc8; }
.rpf-chip input { width: auto; margin: 0; accent-color: #a9621c; }

/* ── Groups modals ────────────────────────────────────────────────────────── */
.grp-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(30,18,10,.55);
  z-index: 9200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.grp-modal-overlay.hidden { display: none; }
.grp-modal-box {
  background: var(--surface, #fffdf8);
  border-radius: 14px; width: min(460px, 100%);
  max-height: 90vh; overflow-y: auto;
  padding: 26px 24px 20px;
  box-shadow: 0 12px 48px rgba(0,0,0,.2);
}
.grp-modal-box h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem; font-weight: 700; color: #3d2718;
  margin: 0 0 16px;
}
/* ── Guest Management dashboard ──────────────────────────────────────────── */
.gm-box { width: min(760px, 100%); position: relative; }
.gm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gm-head h3 { margin: 0; }
.gm-sub { font-size: .82rem; color: #7d6656; margin: 4px 0 0; }
.gm-close {
  flex-shrink: 0; border: none; background: rgba(139,77,34,.08); color: #6b4a2e;
  width: 30px; height: 30px; border-radius: 999px; cursor: pointer; font-size: .85rem;
  transition: background .15s;
}
.gm-close:hover { background: rgba(139,77,34,.18); }
.gm-stats {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
  margin-bottom: 14px;
}
.gm-stat {
  border-radius: 14px; padding: 10px 6px; text-align: center;
  background: rgba(255, 253, 248, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(188,168,146,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px -12px rgba(58,37,18,.25);
}
.gm-stat-num { font-size: 1.3rem; font-weight: 800; line-height: 1.15; color: #3d2718; font-variant-numeric: tabular-nums; }
.gm-stat-label { font-size: .66rem; font-weight: 700; letter-spacing: .03em; color: #7d6656; margin-top: 2px; white-space: nowrap; }
.gm-stat--yes { border-color: rgba(95,139,76,.35); background: rgba(234,247,237,.65); }
.gm-stat--yes .gm-stat-num { color: #2d6a3a; }
.gm-stat--no { border-color: rgba(200,77,60,.3); background: rgba(255,245,245,.65); }
.gm-stat--no .gm-stat-num { color: #8f3b3b; }
.gm-stat--maybe { border-color: rgba(210,176,106,.42); background: rgba(255,249,232,.7); }
.gm-stat--maybe .gm-stat-num { color: #8a6d1c; }
.gm-stat--pending { border-color: rgba(169,98,28,.3); background: rgba(253,244,231,.7); }
.gm-stat--pending .gm-stat-num { color: #a9621c; }
.gm-stat--heads { border-color: rgba(109,74,140,.28); background: rgba(248,242,255,.7); }
.gm-stat--heads .gm-stat-num { color: #6d4a8c; }
.gm-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.gm-search { flex: 1; min-width: 180px; }
.gm-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.gm-filter {
  border: 1px solid rgba(188,168,146,.4); background: rgba(255,255,255,.6);
  color: #7d6656; font-size: .74rem; font-weight: 700; padding: 5px 11px;
  border-radius: 999px; cursor: pointer; transition: all .15s;
}
.gm-filter:hover { border-color: rgba(139,77,34,.3); color: #3d2718; }
.gm-filter.is-active {
  background: linear-gradient(135deg, rgba(139,77,34,.18), rgba(201,154,77,.2));
  border-color: rgba(139,77,34,.3); color: #633515;
}
.gm-table-wrap {
  border: 1px solid #eadfce; border-radius: 12px; background: #fffcf6;
  max-height: 300px; overflow: auto; margin-bottom: 12px;
}
.gm-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.gm-table thead th {
  position: sticky; top: 0; z-index: 1; background: #f6efe3;
  text-align: left; font-size: .7rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #7d6656; padding: 8px 10px;
  border-bottom: 1px solid #eadfce;
}
.gm-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.gm-th-sort:hover { color: #3d2718; }
.gm-sort-arrow { font-size: .6rem; }
.gm-th-num, .gm-td-num { text-align: right; }
.gm-th-check, .gm-td-check { width: 30px; text-align: center; }
.gm-row { cursor: pointer; transition: background .12s; }
.gm-row:hover { background: rgba(139,77,34,.05); }
.gm-row td { padding: 8px 10px; border-bottom: 1px solid #f2ead9; vertical-align: top; }
.gm-cell-sub { font-size: .72rem; color: #9a8672; }
.gm-rel {
  font-size: .68rem; color: #6d4a8c; background: rgba(248,242,255,.9);
  border: 1px solid rgba(109,74,140,.2); border-radius: 999px; padding: 1px 7px; margin-left: 4px;
}
.gm-td-date { white-space: nowrap; font-size: .78rem; color: #7d6656; }
.gm-badge {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}
.gm-badge--yes { background: #eaf7ed; color: #2d6a3a; border: 1px solid #cde8d3; }
.gm-badge--no { background: #fff0f0; color: #8f3b3b; border: 1px solid #f0d2d2; }
.gm-badge--maybe { background: #fff9e8; color: #8a6d1c; border: 1px solid #f0e3be; }
.gm-badge--pending { background: #fdf4e7; color: #a9621c; border: 1px solid #edd9bd; }
.gm-empty { padding: 22px; text-align: center; font-size: .84rem; color: #9a8672; }
.gm-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gm-action-note { font-size: .78rem; color: #2d6a3a; font-weight: 600; }
.gm-detail {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 90vw);
  background: var(--surface, #fffdf8); z-index: 9300;
  box-shadow: -18px 0 44px -18px rgba(58,37,18,.4);
  border-left: 1px solid #eadfce;
  transform: translateX(105%); transition: transform .24s ease;
  display: flex; flex-direction: column;
}
.gm-detail.open { transform: none; }
.gm-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 12px; border-bottom: 1px solid #f2ead9;
}
.gm-detail-head h4 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem;
  font-weight: 700; color: #3d2718; margin: 0;
}
.gm-detail-body { padding: 14px 18px; overflow-y: auto; }
.gm-detail-row { margin-bottom: 12px; }
.gm-detail-k { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9a8672; margin-bottom: 2px; }
.gm-detail-v { font-size: .86rem; color: #3d2718; line-height: 1.4; word-break: break-word; }
@media (max-width: 640px) {
  .gm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gm-table thead th:nth-child(5), .gm-row td:nth-child(5) { display: none; }
}

.grp-label {
  display: block; font-size: .82rem; font-weight: 600;
  color: #5a4a38; margin-bottom: 5px;
}
.req { color: #c0392b; }
/* Counterpart to .req — muted, and not shouting for attention. */
.grp-optional { color: #a89878; font-weight: 400; font-size: .74rem; }
.grp-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px;
  border: 1.5px solid #d8ccb4; border-radius: 8px;
  font-family: 'Lato', sans-serif; font-size: .88rem;
  background: #fdf8f2; color: #3d2718;
  outline: none; transition: border-color .15s;
}
.grp-input:focus { border-color: #a9621c; }
.grp-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 20px;
}
.grp-err { font-size: .8rem; color: #c0392b; margin-top: 8px; min-height: 1em; }

/* ── Delete-group confirmation ─────────────────────────────────────────────
   Destructive and irreversible, so it reads red rather than reusing the
   warm group-modal palette. ── */
.gdm-box { border-top: 4px solid #c0392b; max-width: 480px; }
.gdm-head { display: flex; align-items: center; gap: 10px; }
.gdm-head h3 { margin: 0; color: #8a2b22; }
.gdm-icon { font-size: 1.5rem; line-height: 1; }
.gdm-lede { font-size: .9rem; color: #4a3a2c; margin: 14px 0 12px; line-height: 1.5; }
.gdm-lede strong { color: #8a2b22; }
.gdm-panel {
  background: #fdf1f0;
  border: 1px solid #eccac5;
  border-radius: 10px;
  padding: 12px 14px;
}
.gdm-panel-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #8a2b22; margin-bottom: 8px;
}
.gdm-list { list-style: none; margin: 0; padding: 0; }
.gdm-list li {
  font-size: .86rem; color: #4a3a2c;
  padding: 3px 0 3px 18px; position: relative;
}
.gdm-list li::before {
  content: "×"; position: absolute; left: 2px;
  color: #c0392b; font-weight: 700;
}
.gdm-list li strong { color: #8a2b22; }
.gdm-warn {
  font-size: .84rem; font-weight: 700; color: #8a2b22;
  margin: 12px 0 16px; line-height: 1.45;
}
.gdm-delete-btn {
  background: #c0392b; color: #fff; border: 1px solid #a5301f;
}
.gdm-delete-btn:not(:disabled):hover { background: #a5301f; }
.gdm-delete-btn:disabled { background: #e3d9d4; color: #9c8d86; border-color: #d9cdc7; cursor: not-allowed; }

/* ── Inbox panel ──────────────────────────────────────────────────────────── */
.inbox-overlay {
  position: fixed; inset: 0;
  background: rgba(30,18,10,.45);
  z-index: 1200;
  display: flex; align-items: stretch; justify-content: flex-end;
}
.inbox-overlay.hidden { display: none; }
.inbox-panel {
  width: min(380px, 100vw);
  background: var(--surface, #fffdf8);
  border-left: 2px solid #e8dcc8;
  display: flex; flex-direction: column;
}
.inbox-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1.5px solid #ede5d5;
  position: sticky; top: 0;
  background: var(--surface, #fffdf8); z-index: 2;
}
.inbox-close {
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: #8b7060; padding: 3px 6px;
}
.inbox-list { flex: 1; overflow-y: auto; }
.inbox-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid #f0ebe4;
  transition: background .12s;
}
.inbox-item.unread { background: #fffbf0; }
.inbox-item-body { flex: 1; min-width: 0; }
.inbox-item-title { font-size: .85rem; font-weight: 600; color: #3d2718; margin-bottom: 2px; }
.inbox-item-text { font-size: .8rem; color: #7d6656; line-height: 1.4; }
.inbox-item-time { font-size: .72rem; color: #a09080; margin-top: 4px; }
.inbox-read-btn {
  background: #f0ebe4; border: 1px solid #d8ccb4;
  border-radius: 5px; cursor: pointer; padding: 3px 7px;
  font-size: .78rem; color: #5f8b4c; flex-shrink: 0;
  align-self: center;
}
.inbox-read-btn:hover { background: #e0d8c0; }

/* ── Occasion reminder popup (bottom-right toast) ────────────────── */
.occ-popup {
  position: fixed; bottom: 28px; right: 28px; z-index: 1400;
  width: min(360px, calc(100vw - 32px));
  background: var(--surface, #fffdf8);
  border: 2px solid #d4a425;
  border-radius: 18px;
  box-shadow: 0 8px 36px rgba(60,30,5,.22);
  transform: translateY(24px);
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.occ-popup.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.occ-popup.hidden { display: none; }
.occ-popup-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1.5px solid #ede5d5;
}
.occ-popup-icon { font-size: 1.3rem; }
.occ-popup-title { flex: 1; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1rem; font-weight: 700; color: #3d2718; }
.occ-popup-close { background: none; border: none; cursor: pointer; font-size: .95rem; color: #8b7060; padding: 2px 6px; }
.occ-popup-close:hover { color: #3d2718; }
.occ-popup-list { list-style: none; margin: 0; padding: 10px 16px; max-height: 200px; overflow-y: auto; }
.occ-popup-item { padding: 8px 0; border-bottom: 1px solid #f0ebe4; }
.occ-popup-item:last-child { border-bottom: none; }
.occ-popup-item-title { display: block; font-size: .87rem; font-weight: 600; color: #3d2718; }
.occ-popup-item-body { display: block; font-size: .8rem; color: #7d6656; margin-top: 2px; line-height: 1.4; }
.occ-popup-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 10px 16px 14px;
  border-top: 1.5px solid #ede5d5;
}
.occ-popup-view-btn {
  background: none; border: 1.5px solid #a9621c; color: #a9621c;
  border-radius: 20px; padding: 5px 14px; font-size: .78rem; cursor: pointer;
  transition: background .15s, color .15s;
}
.occ-popup-view-btn:hover { background: #a9621c; color: #fff; }
.occ-popup-dismiss {
  background: #a9621c; color: #fff; border: none;
  border-radius: 20px; padding: 5px 14px; font-size: .78rem; cursor: pointer;
  transition: background .15s;
}
.occ-popup-dismiss:hover { background: #8b4e18; }
@media (max-width: 480px) {
  .occ-popup { bottom: 12px; right: 12px; left: 12px; width: auto; }
}

/* ── Nani chatbot ─────────────────────────────────────────────────────────── */
#nani-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 1400;
  width: 62px; height: 76px; border-radius: 31px;
  background: linear-gradient(160deg, #1a0a3d 0%, #4a1f9e 55%, #2a0f6e 100%);
  border: none; cursor: pointer;
  box-shadow: 0 4px 20px rgba(26,10,61,.55), inset 0 1px 0 rgba(255,215,80,.18);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding-bottom: 2px;
  transition: transform .2s, box-shadow .2s;
}
#nani-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 7px 26px rgba(26,10,61,.7), inset 0 1px 0 rgba(255,215,80,.28);
}
#nani-fab:hover .nani-label {
  background-position: 0% 50%;
}

/* Nani text label */
.nani-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  /* shimmer: animate gradient across text */
  background: linear-gradient(90deg, #ffe8a0 0%, #fff4c2 40%, #f0b860 60%, #ffe8a0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nani-label-shimmer 3s ease-in-out infinite;
}
@keyframes nani-label-shimmer {
  0%   { background-position: 100% 50%; }
  50%  { background-position: 0%   50%; }
  100% { background-position: 100% 50%; }
}

#nani-panel {
  position: fixed; bottom: 96px; right: 28px; z-index: 1400;
  width: 360px; max-width: calc(100vw - 32px);
  background: #fffdf4; border: 1.5px solid #e0c888;
  border-radius: 18px; box-shadow: 0 8px 36px rgba(90,37,8,.22);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(20px) scale(.97); opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
#nani-panel.open {
  transform: translateY(0) scale(1); opacity: 1; pointer-events: auto;
}

.nani-header {
  background: linear-gradient(135deg, #1a0a3d, #4a1f9e);
  padding: 14px 18px; display: flex; align-items: center; gap: 12px;
}
.nani-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #ffe8a0; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.nani-header-text { flex: 1; }
.nani-header-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem; font-weight: 700; color: #ffe8a0; line-height: 1.2;
}
.nani-header-tag { font-size: .72rem; color: #f0c878; opacity: .85; }
#nani-close-btn {
  background: none; border: none; color: #f0c878; font-size: 1.2rem;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
#nani-close-btn:hover { color: #fff; }

.nani-messages {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  max-height: 320px; min-height: 120px;
  display: flex; flex-direction: column; gap: 10px;
}
.nani-bubble {
  max-width: 88%; padding: 9px 13px; border-radius: 14px;
  font-size: .87rem; line-height: 1.55; word-break: break-word;
}
.nani-bubble.nani { /* Nani's reply */
  background: #fdf0d0; border: 1px solid #e8d0a0;
  color: #3d2718; align-self: flex-start; border-bottom-left-radius: 4px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: .95rem;
}
.nani-bubble.user {
  background: #3d1a82; color: #ffd700;
  align-self: flex-end; border-bottom-right-radius: 4px;
}
.nani-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 9px 13px; background: #fdf0d0; border: 1px solid #e8d0a0;
  border-radius: 14px; border-bottom-left-radius: 4px;
  align-self: flex-start; width: fit-content;
}
.nani-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: #4a1f9e;
  animation: naniDot 1.2s ease-in-out infinite;
}
.nani-typing span:nth-child(2) { animation-delay: .2s; }
.nani-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes naniDot {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40%            { transform: scale(1);  opacity: 1;   }
}

.nani-chips {
  padding: 0 16px 10px; display: flex; flex-wrap: wrap; gap: 6px;
}
.nani-chip {
  background: #fdf0d0; border: 1px solid #d4a86a; color: #7a3a10;
  border-radius: 999px; padding: 5px 12px; font-size: .77rem;
  cursor: pointer; transition: background .15s, color .15s;
  white-space: nowrap;
}
.nani-chip:hover { background: #3d1a82; color: #ffd700; border-color: #3d1a82; }

.nani-input-row {
  display: flex; gap: 8px; padding: 12px 14px;
  border-top: 1px solid #e8d8b0; background: #fdf8ec;
}
#nani-input {
  flex: 1; border: 1.5px solid #d4b87a; border-radius: 999px;
  padding: 8px 14px; font-size: .85rem; background: #fffdf4;
  color: #3d2718; outline: none;
}
#nani-input:focus { border-color: #4a1f9e; }
#nani-send-btn {
  background: linear-gradient(135deg, #1a0a3d, #4a1f9e);
  color: #ffd700; border: none; border-radius: 999px;
  padding: 8px 16px; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
#nani-send-btn:hover { opacity: .88; }
#nani-send-btn:disabled { opacity: .45; cursor: default; }

@media (max-width: 480px) {
  /* Vertical offsets are set with the mobile tab bar rules further down, which
     lift both clear of it; only the horizontal inset differs here. */
  #nani-panel { right: 12px; left: 12px; width: auto; }
  #nani-fab   { right: 16px; }
}

/* ── Feedback system ─────────────────────────────────────────────────────────── */

/* Star rating */
.star-rating {
  display: flex;
  gap: 8px;
  font-size: 1.8rem;
  cursor: pointer;
  margin-top: 6px;
}
.star-rating .star { color: #d8c8a8; transition: color .1s; }
.star-rating .star.active,
.star-rating .star:hover,
.star-rating .star:hover ~ .star { color: #c8900a; }
/* pure CSS hover highlight (right-to-left trick doesn't work without flex-row-reverse) */
.star-rating { flex-direction: row; }

/* Feedback form label */
.fb-label {
  display: block;
  font-size: .83rem;
  font-weight: 600;
  color: #5a4a38;
  margin-bottom: 6px;
}

/* Thumbs row on AI answers */
.query-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e8ddc8;
}
.query-rating-label {
  font-size: .82rem;
  color: #7a6f65;
  flex: 1;
}
.query-thumb-btn {
  background: none;
  border: 1.5px solid #e0d8cc;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  line-height: 1;
  width: auto;
  margin: 0;
}
.query-thumb-btn:hover { background: #f0e8d8; border-color: #c8a870; }
.query-thumb-btn:disabled { opacity: .45; cursor: default; }
.query-thumb-thanks {
  font-size: .8rem;
  color: #3a7d44;
  font-weight: 600;
}

/* ── Nani face / eye-blink ───────────────────────────────────────────────── */
.nani-face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  /* soft halo behind eyes */
  padding: 4px 6px;
  border-radius: 50%;
  background: rgba(255,232,160,.08);
}
.nani-eye {
  display: block;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #ffd700;
  box-shadow: 0 0 7px rgba(255,215,0,.95), 0 0 14px rgba(255,215,0,.45);
  transition: transform .07s;
}
/* Wink: squish scaleY to near-zero then back */
@keyframes nani-wink {
  0%          { transform: scaleY(1); }
  40%         { transform: scaleY(0.05); }
  70%         { transform: scaleY(1.2); }
  100%        { transform: scaleY(1); }
}
.nani-eye.winking {
  animation: nani-wink .4s cubic-bezier(.4,0,.2,1);
}

/* ── Thumbs slide-up on render ───────────────────────────────────────────── */
@keyframes thumbs-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.query-rating-row {
  animation: thumbs-in .4s ease-out both;
}

/* ── Right-edge vertical Feedback tab ───────────────────────────────────── */
#fb-edge-tab {
  position: fixed;
  right: -28px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  /* Below every overlay (modals 1000, groups/inbox 1200, Nani 1400). At
     7500 this floated above all of them and covered the per-person edit
     and delete buttons at the right edge of the Groups panel. Page
     content tops out at 80, so this still sits above everything it
     should. */
  z-index: 900;
  background: linear-gradient(135deg, #5a2508, #8b3c10);
  color: #ffe8a0;
  border: none;
  border-radius: 10px 10px 0 0;
  /* Enlarged so it reads as an invitation rather than a bookmark. The tab is
     rotated, so padding on this axis grows its height on screen and the block
     padding grows how far it protrudes — keep the lc-edge-tab gap in mind when
     changing these. */
  padding: 11px 26px;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  box-shadow: -3px 0 18px rgba(90,37,8,.42);
  transition: right .2s, background .15s, box-shadow .15s;
  white-space: nowrap;
}
#fb-edge-tab:hover {
  right: -14px;
  background: linear-gradient(135deg, #7a3010, #a84810);
  box-shadow: -4px 0 22px rgba(90,37,8,.55);
}

/* ── Live Chat edge tab — brown to match Feedback, positioned above it ────── */
#lc-edge-tab {
  position: fixed;
  right: -28px;
  top: calc(50% - 120px);
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  z-index: 901;
  background: linear-gradient(135deg, #5a2508, #8b3c10);
  color: #ffe8a0;
  border: none;
  border-radius: 8px 8px 0 0;
  padding: 8px 18px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  box-shadow: -2px 0 12px rgba(90,37,8,.3);
  transition: right .2s, background .15s;
  white-space: nowrap;
}
#lc-edge-tab:hover {
  right: -18px;
  background: linear-gradient(135deg, #7a3010, #a84810);
}

/* ── Live Chat panel ──────────────────────────────────────────────────────── */
#lc-panel {
  position: fixed; bottom: 28px; left: 28px; z-index: 9050;
  width: 360px; max-width: calc(100vw - 32px);
  background: #fffdf4; border: 1.5px solid #e0c888;
  border-radius: 18px; box-shadow: 0 8px 36px rgba(26,10,61,.22);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(20px) scale(.97); opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
#lc-panel.open {
  transform: translateY(0) scale(1); opacity: 1; pointer-events: auto;
}
.lc-header {
  background: linear-gradient(135deg, #5a2508, #8b3c10);
  padding: 14px 18px; display: flex; align-items: center; justify-content: space-between;
}
.lc-header-left { display: flex; align-items: center; gap: 10px; }
.lc-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #c8901c; flex-shrink: 0;
  box-shadow: 0 0 6px rgba(200,144,28,.5);
}
.lc-status-dot.online {
  background: #4ddd6a;
  box-shadow: 0 0 8px rgba(77,221,106,.7);
}
.lc-header-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1rem; font-weight: 700; color: #ffe8a0; }
.lc-header-tag  { font-size: .7rem; color: #f0c878; margin-top: 2px; opacity: .85; }
.lc-close-btn   { background: none; border: none; color: #f0c878; font-size: 1.1rem; cursor: pointer; }
.lc-close-btn:hover { color: #ffe8a0; }
.lc-messages {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  max-height: 320px; min-height: 120px;
  display: flex; flex-direction: column; gap: 10px;
  background: #fdfaf6;
}
.lc-bubble {
  max-width: 88%; padding: 9px 13px; border-radius: 14px;
  font-size: .87rem; line-height: 1.55; word-break: break-word; position: relative;
}
.lc-bubble.agent {
  background: #fdf0d0; border: 1px solid #e8d0a0;
  color: #3d2718; align-self: flex-start; border-bottom-left-radius: 4px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: .95rem;
}
.lc-bubble.user {
  background: #8b3c10; color: #ffe8a0;
  align-self: flex-end; border-bottom-right-radius: 4px;
}
.lc-ts {
  display: block; font-size: .65rem; opacity: .55; margin-top: 4px; text-align: right;
}
.lc-input-row {
  display: flex; gap: 8px; padding: 12px 14px;
  border-top: 1px solid #e0d4f0; background: #fdf8f6;
}
#lc-input {
  flex: 1; border: 1.5px solid #d4b87a; border-radius: 999px;
  padding: 8px 14px; font-size: .85rem; background: #fffdf4;
  color: #3d2718; outline: none;
}
#lc-input:focus { border-color: #a8521c; }
#lc-send-btn {
  background: linear-gradient(135deg, #5a2508, #a8521c);
  color: #ffe8a0; border: none; border-radius: 999px;
  padding: 8px 16px; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
#lc-send-btn:hover { opacity: .88; }
#lc-send-btn:disabled { opacity: .45; cursor: default; }

@media (max-width: 480px) {
  #lc-panel { bottom: 80px; left: 12px; right: 12px; width: auto; }
  #lc-edge-tab, #fb-edge-tab { display: none; }
}

/* ── Upgraded feedback modal ─────────────────────────────────────────────── */
.fb-modal-box {
  max-width: 500px;
  width: 95vw;
  padding: 28px 28px 24px;
}
.fb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.fb-modal-header h3 { margin: 0; }
.fb-close-x {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #9c6a42;
  cursor: pointer;
  width: auto;
  margin: 0;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .12s;
}
.fb-close-x:hover { background: #f0e8d8; }

/* Category chips */
.fb-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.fb-chip {
  padding: 6px 13px;
  border: 1.5px solid #e0d0b0;
  border-radius: 999px;
  background: #fffdf8;
  color: #5a4a38;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  width: auto;
  margin: 0;
}
.fb-chip:hover  { background: #f0e8d8; border-color: #c8a870; }
.fb-chip.active { background: linear-gradient(135deg,#5a2508,#8b3c10); color: #ffe8a0; border-color: #8b3c10; }

/* Screenshot upload zone */
.fb-upload-zone {
  border: 2px dashed #d8c8a8;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  background: #fffdf8;
  color: #9c6a42;
  font-size: .83rem;
  transition: border-color .15s, background .15s;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.fb-upload-zone:hover, .fb-upload-zone.drag-over {
  border-color: #a86030;
  background: #fdf4e8;
}

/* Submit / cancel buttons */
.fb-submit-btn {
  flex: 1;
  background: linear-gradient(135deg,#5a2508,#8b3c10);
  color: #ffe8a0;
  border: none;
  border-radius: 8px;
  padding: 11px 0;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: opacity .15s;
}
.fb-submit-btn:hover { opacity: .9; }
.fb-submit-btn:disabled { opacity: .5; cursor: default; }
.fb-cancel-btn {
  width: auto;
  background: #f0ebe4;
  color: #7a6f65;
  border: 1.5px solid #e0d8cc;
  border-radius: 8px;
  padding: 11px 18px;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}
.fb-cancel-btn:hover { background: #e8e0d8; }

/* ── Nani quick-action row ───────────────────────────────────────────────── */
.nani-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 4px;
  border-top: 1px solid #f0e4cc;
}
.nani-qa-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border: 1.5px solid #e8d8b8;
  border-radius: 999px;
  background: #fffdf4;
  color: #5a3a18;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .12s, border-color .12s;
  width: auto;
  margin: 0;
}
.nani-qa-btn:hover { background: #f5e8d0; border-color: #c8a060; }

@media (max-width: 480px) {
  #fb-edge-tab { display: none; } /* too cramped on mobile, FAB is enough */
  .fb-category-chips { gap: 6px; }
  .fb-chip { font-size: .75rem; padding: 5px 10px; }
}

/* ── Visual refresh 2026 ─────────────────────────────────────── */
:root {
  --bg: #f3efe7;
  --surface: rgba(255, 252, 247, 0.94);
  --surface-2: #f3eadf;
  --line: rgba(188, 168, 146, 0.5);
  --text: #2f241d;
  --text-soft: #726357;
  --primary: #8b4d22;
  --primary-dark: #633515;
  --green: #537d4b;
  --green-dark: #355b34;
  --gold: #c99a4d;
  --danger: #b94e42;
  --shadow: 0 18px 48px rgba(58, 37, 18, 0.10);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.72), transparent 24%),
    radial-gradient(circle at top right, rgba(236, 214, 178, 0.22), transparent 20%),
    linear-gradient(180deg, #fbf7f1 0%, #f4ede3 42%, #efe5d7 100%);
}

body::before {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.42), transparent 18%),
    radial-gradient(circle at 82% 0%, rgba(255,255,255,0.28), transparent 16%),
    linear-gradient(120deg, rgba(255,255,255,0.06), transparent 30%, rgba(139,77,34,0.03));
  opacity: 1;
}

.topbar,
.hero,
.stepper,
.workspace {
  width: min(1440px, calc(100% - 40px));
}

.topbar {
  padding: 16px 18px;
  margin-top: 12px;
  background: rgba(255, 252, 247, 0.74);
  border: 1px solid rgba(188, 168, 146, 0.32);
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(68, 44, 20, 0.08);
  backdrop-filter: blur(16px);
}

.brand-mark {
  width: 48px; height: 48px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(71, 45, 20, 0.14);
}

.brand-name {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.brand-tag,
#auth-status,
.topnav a,
.topnav button {
  color: var(--text-soft);
}

.topnav {
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: rgba(139,77,34,0.05);
  border: 1px solid rgba(139,77,34,0.10);
  border-radius: 999px;
}

.topnav-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topnav-label {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-soft);
  padding: 0 2px 0 4px;
}

.topnav-separator {
  width: 1px;
  align-self: stretch;
  background: rgba(188,168,146,0.36);
}

.nav-pill,
.topnav a,
.topnav button {
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(188,168,146,0.38);
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 4px 10px rgba(58, 37, 18, 0.04);
  font-weight: 700;
}

.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .84rem;
  line-height: 1;
}

.nav-pill-icon {
  font-size: .95rem;
  line-height: 1;
}

.nav-pill-text {
  white-space: nowrap;
}

/* Top-level nav sizing. These need more specificity than they look: the
   `.nav-pill, .topnav a, .topnav button` rule above sets .84rem, and
   `.topnav button` (0-1-1) outranks a bare `.nav-dd-trigger` (0-1-0), so the
   triggers must be qualified with .topnav to win. #nav-pricing is an id and
   already outranks it. Dropdown entries keep .84rem — only the top row grows. */
.topnav .nav-dd-trigger { font-size: .97rem; }
#nav-pricing { font-size: .97rem; }
#nav-pricing .nav-pill-icon { font-size: 1.05rem; }

.nav-pill-accent {
  background: linear-gradient(135deg, rgba(139,77,34,0.10), rgba(201,154,77,0.10));
}

.topnav a:hover,
.topnav button:hover {
  background: rgba(139,77,34,0.12);
  color: var(--text);
  border-color: rgba(139,77,34,0.18);
  box-shadow: 0 10px 20px rgba(58, 37, 18, 0.08);
}

.topnav a.active,
.topnav button.active {
  background: linear-gradient(135deg, rgba(139,77,34,0.18), rgba(201,154,77,0.20));
  color: var(--primary-dark);
  border-color: rgba(139,77,34,0.22);
  box-shadow: 0 12px 24px rgba(58, 37, 18, 0.10);
}

.topnav a.active::after,
.topnav button.active::after {
  display: none;
}

.topbar-actions {
  gap: 12px;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-blue-gloss,
.btn-blue-ghost,
.btn-secondary-action,
.btn-generate,
.chip,
.share-card-trigger-btn,
.mobile-nav button,
.modal-tabs button,
.weekly-prompt-ask,
.weekly-prompt-dismiss,
.btn-revoke,
.btn-share-asset,
.nani-chip,
.next-q-btn,
.occ-popup-view-btn,
.occ-popup-dismiss {
  border-radius: 999px;
}

.btn {
  box-shadow: 0 8px 20px rgba(68, 44, 20, 0.08);
}

.btn:hover,
.btn-blue-gloss:hover,
.btn-generate:hover,
.chip:hover,
.share-card-trigger-btn:hover,
.weekly-prompt-ask:hover,
.nani-chip:hover,
.next-q-btn:hover,
.occ-popup-view-btn:hover,
.occ-popup-dismiss:hover {
  transform: translateY(-1px);
}

.btn:focus-visible,
.topnav a:focus-visible,
.topnav button:focus-visible,
.chip:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.mobile-nav button:focus-visible,
.share-card-trigger-btn:focus-visible,
.btn-blue-gloss:focus-visible,
.btn-blue-ghost:focus-visible,
.btn-secondary-action:focus-visible,
.weekly-prompt-ask:focus-visible,
.nani-chip:focus-visible,
.next-q-btn:focus-visible,
.occ-popup-view-btn:focus-visible,
.occ-popup-dismiss:focus-visible {
  outline: 3px solid rgba(201, 154, 77, 0.35);
  outline-offset: 2px;
}

.card,
.modal-box,
.share-card-inner,
.occasions-panel,
.groups-panel,
#nani-panel,
#auth-modal .modal-box,
#share-modal .modal-box,
#dup-modal .modal-box,
#tribute-modal .modal-box {
  background: var(--surface);
  border-color: rgba(188, 168, 146, 0.42);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.card:hover {
  box-shadow: 0 24px 58px rgba(58, 37, 18, 0.12);
}

.card::before {
  height: 4px;
  background: linear-gradient(90deg, rgba(139,77,34,0.08), var(--gold) 28%, var(--primary) 58%, rgba(95,125,75,0.66) 86%, rgba(139,77,34,0.08));
  opacity: .85;
}

.hero {
  position: relative;
  border-radius: 34px;
  border: 1px solid rgba(188, 168, 146, 0.35);
  box-shadow: 0 24px 60px rgba(63, 40, 18, 0.10);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 85% 18%, rgba(255,255,255,0.22), transparent 18%),
    radial-gradient(circle at 12% 10%, rgba(139,77,34,0.06), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,0.12), transparent 38%);
}

.hero-copy {
  padding: 12px;
}

.eyebrow {
  color: #8c5a31;
}

.hero h1 {
  font-size: clamp(1.55rem, 3vw, 2.9rem);
  line-height: 1.02;
}

.hero p {
  font-size: .93rem;
  max-width: 760px;
}

.hero-features {
  gap: 8px;
  margin-top: 14px;
}

.hero-features li {
  gap: 10px;
  font-size: .84rem;
  color: #67584f;
}

.hf-icon {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(139,77,34,0.10);
  box-shadow: inset 0 0 0 1px rgba(139,77,34,0.08);
}

.proof-chips {
  gap: 8px;
  margin-top: 12px;
}

.proof-chip,
.badge,
.tag,
.shared-badge,
.sidebar-badge,
.card-badge,
.trust-badge,
.context-panel-opt,
.source-chip,
.inbox-badge {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.proof-chip {
  background: rgba(139,77,34,0.08);
  color: #7a5030;
  border-color: rgba(139,77,34,0.18);
  font-size: .72rem;
}

.hero-art {
  border-radius: 28px;
  background: linear-gradient(180deg, #f7eedc 0%, #ebd8b4 100%);
  box-shadow: inset 0 0 0 1px rgba(188,168,146,0.28);
  overflow: hidden;
}

.family-photo-frame {
  overflow: hidden;
  border-radius: 28px;
}

.fph-photo-wrap img {
  border-radius: 18px;
  border-color: rgba(139,77,34,0.75);
  box-shadow: 0 18px 35px rgba(74, 47, 20, 0.18);
}

.hero-quote-strip {
  padding: 8px 20px 46px;
}

.hero-quote-mark {
  color: rgba(139,77,34,0.42);
}

.hero-quote-strip .hero-quote-text {
  color: #6f4420;
  font-size: 1.4rem;
}

.stepper,
.stepper-pill {
  border-radius: 28px;
  border: 1px solid rgba(188,168,146,0.34);
  box-shadow: 0 18px 42px rgba(63, 40, 18, 0.08);
}

.step {
  background: rgba(255,255,255,0.40);
  border: 1px solid rgba(188,168,146,0.18);
}

.step-num {
  background: linear-gradient(180deg, var(--gold), var(--primary));
  box-shadow: 0 8px 16px rgba(139,77,34,0.18);
}

.workspace {
  gap: 20px;
}

.sidebar,
.canvas {
  min-height: 420px;
}

.sidebar {
  top: 96px;
  padding: 20px;
  border: 1px solid rgba(188, 168, 146, 0.32);
  border-radius: 28px;
  background: rgba(255, 252, 247, 0.70);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px rgba(63, 40, 18, 0.08);
}

.sidebar-header,
.sidebar-util-row {
  border-color: rgba(188, 168, 146, 0.35);
}

.sidebar-badge,
.card-badge {
  background: linear-gradient(135deg, #8b4d22, #b36a33);
  letter-spacing: .08em;
}

.search,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
select,
textarea,
input[type="file"] {
  background: rgba(255,255,255,0.9);
  border-color: rgba(188,168,146,0.55);
}

.search,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
select,
textarea,
input[type="file"] {
  box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset;
}

.search:focus,
input:focus,
select:focus,
textarea:focus,
.question-box:focus {
  box-shadow: 0 0 0 4px rgba(139,77,34,0.10);
}

.filters,
.prompt-chips {
  gap: 10px;
}

.chip {
  background: rgba(255,255,255,0.88);
  color: var(--text-soft);
  border: 1px solid rgba(188,168,146,0.45);
}

.chip.active,
.prompt-chips .chip {
  background: linear-gradient(135deg, #fff9ef, #f6e6cf);
  color: #5d3817;
  border-color: rgba(139,77,34,0.18);
}

.file-row {
  background: rgba(255,255,255,0.88);
  border-color: rgba(188,168,146,0.45);
}

.file-row:hover {
  box-shadow: 0 12px 28px rgba(63, 40, 18, 0.08);
  border-color: rgba(139,77,34,0.24);
}

.icon-btn {
  background: rgba(255,255,255,0.92);
  border-color: rgba(188,168,146,0.55);
}

.icon-btn:hover {
  background: rgba(139,77,34,0.08);
  border-color: rgba(139,77,34,0.24);
  color: var(--primary-dark);
}

.canvas {
  gap: 20px;
}

.ask-card,
.answer-card {
  padding: 24px;
  border: 1px solid rgba(188,168,146,0.30);
  border-radius: 28px;
}

.ask-card h2,
.answer-card h2 {
  font-size: 1.45rem;
  border-color: rgba(188,168,146,0.32);
}

.weekly-prompt-card,
.on-this-day-banner,
.context-panel,
.answer-question,
.evidence-excerpt,
.storage-card {
  border-color: rgba(188,168,146,0.40);
  box-shadow: 0 10px 24px rgba(63, 40, 18, 0.05);
}

.weekly-prompt-card {
  background: linear-gradient(135deg, #fff8ea, #f6e1b7);
}

.context-panel {
  background: linear-gradient(180deg, rgba(252,247,239,0.96), rgba(246,238,225,0.94));
}

.question-box {
  background: rgba(255,255,255,0.96);
  border-color: rgba(188,168,146,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.answer-question {
  background: linear-gradient(135deg, #fff8ec, #f5ead9);
  border-left-color: var(--primary);
}

.answer-section-heading {
  color: var(--primary-dark);
  border-color: rgba(188,168,146,0.50);
}

.answer-body,
#result,
.narrative {
  color: var(--text);
}

.trust-badge,
.badge-trust {
  background: #fff5d9;
  color: #855f28;
}

.badge-high,
.tag-ok {
  background: #e6f1df !important;
  color: #356233 !important;
}

.modal-box {
  border-radius: 28px;
  padding: 30px 32px;
}

.modal-tabs button {
  background: rgba(243, 234, 223, 0.9);
  border-color: rgba(188,168,146,0.35);
}

.modal-tabs button.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.err {
  color: var(--danger);
}

.mobile-nav {
  position: sticky; bottom: 12px; width: min(96%, 420px); margin: 0 auto 14px;
  display: none; justify-content: space-between; gap: 8px; padding: 10px; z-index: 30;
  background: rgba(255,252,247,.92); border: 1px solid rgba(188,168,146,.45);
  border-radius: 26px; box-shadow: 0 16px 34px rgba(58, 37, 18, 0.12), inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
}

.mobile-nav button {
  flex: 1; padding: 11px 7px; border: 1px solid transparent; border-radius: 20px;
  background: rgba(255,255,255,.72); color: var(--text-soft); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  box-shadow: 0 4px 10px rgba(58, 37, 18, 0.04);
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mobile-nav button:hover { background: rgba(139,77,34,.08); color: var(--text); }
.mobile-nav button.active {
  background: linear-gradient(135deg, rgba(139,77,34,.18), rgba(201,154,77,.18));
  color: var(--primary-dark); border-color: rgba(139,77,34,.20);
  box-shadow: 0 10px 18px rgba(58, 37, 18, 0.10); transform: translateY(-1px);
}

.mob-tab-icon { font-size: 1.15rem; line-height: 1; }
.mob-tab-label { font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.inbox-badge { background: linear-gradient(135deg, #b94e42, #8f322a); }

.share-card-trigger-btn,
.share-card-inner,
.share-card-header,
.share-card-preview {
  border-color: rgba(188,168,146,0.40);
}

.share-card-trigger-btn {
  color: #6f3918;
  background: linear-gradient(135deg, #fff8ec, #f6e2b7);
}

.share-card-header,
.occasions-header,
.groups-panel-header,
.nani-header {
  background: linear-gradient(135deg, #7b441d, #a96a35);
}

.share-card-header-title,
.occasions-header-title,
.groups-panel-title,
.nani-header-name {
  color: #fff7ea;
}

.share-card-preview,
.occasions-body,
.groups-panel,
#nani-panel,
.groups-card,
.group-card {
  background: rgba(255,252,247,0.94);
}

.groups-panel,
.occasions-panel {
  border-left-color: rgba(188,168,146,0.30);
}

.groups-panel-header,
.occasions-header {
  position: sticky;
  top: 0;
}

@media (max-width: 980px) {
  .topbar {
    gap: 10px;
    flex-wrap: wrap;
  }

  .topnav {
    width: 100%;
    justify-content: flex-start;
  }

  .mobile-nav {
    display: flex;
  }

  .workspace {
    gap: 16px;
  }

  .sidebar,
  .ask-card,
  .answer-card {
    border-radius: 24px;
  }

  /* Compact hero illustration on stacked layout to avoid huge empty space */
  .hero { gap: 12px; }
  .hero-art {
    padding: 8px 10px 4px;
    border-radius: 24px;
  }
  .family-photo-frame,
  .fph-svg-wrap { max-width: 460px; margin: 0 auto; }
  .fph-svg-wrap > svg {
    max-height: 260px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }
  .fph-photo-wrap { min-height: 0; padding: 4px; }
  .fph-photo-wrap img { height: auto; max-height: 260px; }
  .hero-quote-strip { padding: 6px 16px 14px; }
  /* Three lines reserved (3 x the 1.7 line-height), because that is what the
     longest quote wraps to once the column narrows. At 2.6em only 1.5 lines
     were held, so the strip grew and shrank as the quotes rotated every seven
     seconds and everything below it moved with it — the vertical bounce while
     reading. Desktop is untouched: there every quote fits the two lines
     already reserved. */
  .hero-quote-strip .hero-quote-text { font-size: 1.15rem; min-height: 5.1em; }
  .hero-quote-mark { font-size: 2.6rem; margin-bottom: 2px; }
}

@media (max-width: 640px) {
  .hero,
  .stepper,
  .workspace {
    width: calc(100% - 18px);
  }

  .topbar {
    padding: 14px;
    border-radius: 22px;
  }

  .topnav {
    padding: 10px;
    gap: 10px;
  }

  .topnav-group {
    width: 100%;
  }

  .topnav-separator {
    display: none;
  }

  .hero {
    border-radius: 26px;
  }

  .hero h1 {
    font-size: 1.55rem;
  }

  .sidebar,
  .ask-card,
  .answer-card,
  .modal-box {
    padding: 18px;
  }
}

@media (max-width: 380px) {
  .mobile-nav { width: calc(100% - 14px); gap: 6px; }
  .mob-tab-label { letter-spacing: .05em; }
}

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

/* ─────────────────────────────────────────────────────────────
   Landing polish pass — refreshed visual language
   ───────────────────────────────────────────────────────────── */

/* Gradient-accent word — used inside headings for emphasis */
.gradient-word {
  background: linear-gradient(90deg, #d68a3a 0%, #b8580a 45%, #7a4a1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
}
.gradient-word-cool {
  background: linear-gradient(90deg, #b18a4a 0%, #8b4d22 50%, #4a2c14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Hero H1 — bigger, chunkier, tighter tracking */
.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 4.2rem);
  letter-spacing: -0.012em;
  line-height: 1.02;
}
.hero h1 em,
.hero h1 .gradient-word {
  font-style: italic;
}

/* Announcement ribbon — thin gradient bar above the topbar */
.announcement-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 44px 8px 16px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  color: #fff5df;
  background: linear-gradient(90deg, #6f3918 0%, #a96a35 50%, #c99a4d 100%);
  box-shadow: 0 6px 20px rgba(58, 37, 18, 0.14);
  text-align: center;
}
.announcement-bar a {
  color: #fff8e8; text-decoration: underline; text-underline-offset: 3px;
  font-weight: 700;
}
.announcement-bar a:hover { color: #fff; }
.announcement-bar .announcement-dismiss {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.14); color: #fff5df; border: 0;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s ease;
}
.announcement-bar .announcement-dismiss:hover { background: rgba(255,255,255,0.28); }
.announcement-bar.is-hidden { display: none; }

/* Pill CTA polish — stronger radius, deeper hover lift */
.hero-actions .btn,
.btn-primary,
.btn-ghost,
.btn-secondary {
  border-radius: 999px;
  transition: transform 0.2s cubic-bezier(.2,.7,.2,1),
              box-shadow 0.25s ease,
              background 0.18s ease,
              color 0.18s ease;
}
.hero-actions .btn:hover,
.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(58, 37, 18, 0.18);
}
.hero-actions .btn:active,
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(58, 37, 18, 0.14);
}

/* Sticky topbar — shrink on scroll (JS toggles .is-scrolled on body) */
.topbar {
  position: sticky; top: 0; z-index: 40;
  transition: padding 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
body.has-announcement .topbar { top: 38px; }
body.is-scrolled .topbar {
  box-shadow: 0 10px 24px rgba(58, 37, 18, 0.12);
  background: rgba(255, 252, 245, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.is-scrolled .brand-mark {
  transform: scale(0.86);
  transition: transform 0.22s ease;
}

/* The half of the shrink that changes the topbar's height.
   `.topbar` is `position: sticky`, so it sits in normal flow and any change
   to its box moves every pixel of the page below it. iOS Safari nudges
   scrollY on its own — the URL bar collapsing, rubber-band settling — so the
   class toggled back and forth across the threshold and the page crept up and
   down under a reader who was not touching it. A pointer device holds a
   steady scrollY, so it keeps the full effect; touch keeps only the
   paint-only half above, which cannot reflow anything. */
@media (hover: hover) {
  body.is-scrolled .topbar { padding-top: 8px; padding-bottom: 8px; }
  body.is-scrolled .brand-tag {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.18s ease, max-height 0.22s ease;
  }
}

/* Section eyebrow — small-cap label used above panel headings */
.section-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-size: 0.66rem;
  font-weight: 800;
  color: #8c5a31;
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(246,230,207,0.72));
  border: 1px solid rgba(139,77,34,0.18);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 10px;
}

/* ─────────────────────────────────────────────────────────────
   Landing sections — feature grid, live preview, FAQ
   ───────────────────────────────────────────────────────────── */
.landing-section {
  width: min(1180px, calc(100% - 40px));
  margin: 72px auto;
  padding: 0;
  position: relative;
}
.landing-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.landing-section-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.08;
  margin: 12px 0 14px;
  color: #3d2718;
}
.landing-section-head p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #6b4a2a;
  max-width: 560px;
  margin: 0 auto;
}

/* ── Feature grid (3-col cards with icon box) ─────────────── */
.landing-features .feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  position: relative;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid rgba(188, 168, 146, 0.35);
  border-radius: 22px;
  padding: 26px 22px 24px;
  box-shadow: 0 8px 22px rgba(63, 40, 18, 0.05);
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1),
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}
.feature-card:hover,
.feature-card:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 22px 44px rgba(63, 40, 18, 0.10);
  border-color: rgba(139, 77, 34, 0.35);
}
.feature-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
/* Directional cue that fades in on hover/focus */
.feature-card-arrow {
  position: absolute;
  right: 18px; bottom: 16px;
  font-size: 1.05rem; font-weight: 700; color: var(--primary);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.feature-card:hover .feature-card-arrow,
.feature-card:focus-visible .feature-card-arrow {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .feature-card, .feature-card:hover, .feature-card:focus-visible { transform: none; }
  .feature-card-arrow { transition: none; }
}
.feature-icon-box {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fff4e0, #f0d9a8);
  border: 1px solid rgba(139, 77, 34, 0.22);
  border-radius: 16px;
  font-size: 1.55rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 6px 14px rgba(139, 77, 34, 0.10);
  margin-bottom: 16px;
}
.feature-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #3d2718;
  margin: 0 0 8px;
  line-height: 1.2;
}
.feature-card p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #6b4a2a;
  margin: 0;
}

/* ── Live preview rotator ─────────────────────────────────── */
.landing-preview .preview-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: linear-gradient(180deg, #fffdf8, #f9ecd0);
  border: 1px solid rgba(188, 168, 146, 0.45);
  border-radius: 28px;
  padding: 30px 32px;
  box-shadow: 0 22px 60px rgba(63, 40, 18, 0.10);
  min-height: 240px;
  position: relative;
  overflow: hidden;
}
/* All three slides occupy the same grid cell, so the wrapper is always as tall
   as the tallest of them and its height never changes when the active one
   swaps. Previously each slide was display:none/block, so the wrapper took the
   height of whichever was showing — between 374px and 485px on a phone. Every
   six seconds it resized and everything below it jumped by up to 111px, which
   is what the vertical bounce while reading actually was.

   visibility rather than display keeps the inactive slides out of the
   accessibility tree and out of tab order while leaving them in the layout. */
.preview-wrap { display: grid; }
.preview-slide {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.preview-slide.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: previewFadeIn 0.55s ease both;
}
/* The dots sit under the stack rather than inside the shared cell. */
.preview-wrap > .preview-dots { grid-area: 2 / 1; }
@keyframes previewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.preview-slide-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8c5a31;
  margin-bottom: 12px;
  padding: 3px 10px;
  background: rgba(139, 77, 34, 0.10);
  border-radius: 999px;
}
.preview-q {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  color: #4a2c14;
  margin: 0 0 14px;
  line-height: 1.4;
}
.preview-a {
  background: #fff;
  border: 1px solid rgba(188, 168, 146, 0.4);
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: #3d2718;
  box-shadow: 0 4px 12px rgba(63, 40, 18, 0.05);
}
.preview-a .preview-cursor {
  display: inline-block;
  width: 8px; height: 1em;
  vertical-align: text-bottom;
  background: #b8580a;
  animation: previewBlink 1s steps(2) infinite;
  margin-left: 2px;
}
@keyframes previewBlink { 50% { opacity: 0; } }
.preview-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.76rem;
  color: #7a5030;
  background: #fff8e8;
  border: 1px solid rgba(139, 77, 34, 0.20);
  border-radius: 999px;
  padding: 3px 12px;
}
.preview-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.preview-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(139, 77, 34, 0.22);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.preview-dot.is-active {
  background: #8b4d22;
  transform: scale(1.35);
}

/* Compact timeline snippet inside preview */
.preview-timeline {
  display: flex; flex-direction: column; gap: 10px;
}
.preview-timeline-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(188, 168, 146, 0.35);
  border-radius: 14px;
}
.preview-timeline-year {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  color: #8b4d22;
  font-size: 1.05rem;
  min-width: 56px;
}
.preview-timeline-text {
  font-size: 0.9rem;
  color: #4a2c14;
  line-height: 1.5;
}

/* ── FAQ accordion ────────────────────────────────────────── */
.landing-faq .faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: #ffffff;
  border: 1px solid rgba(188, 168, 146, 0.40);
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.faq-item[open] {
  box-shadow: 0 14px 32px rgba(63, 40, 18, 0.08);
  border-color: rgba(139, 77, 34, 0.35);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #3d2718;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #8b4d22;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139, 77, 34, 0.08);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.22s ease, background 0.22s ease;
}
.faq-item[open] summary::after {
  content: "−";
  background: rgba(139, 77, 34, 0.18);
  transform: rotate(180deg);
}
.faq-item .faq-answer {
  padding: 0 22px 20px;
  font-size: 0.94rem;
  line-height: 1.65;
  color: #5a4028;
}
.faq-item .faq-answer p { margin: 0 0 10px; }
.faq-item .faq-answer p:last-child { margin-bottom: 0; }

/* Responsive tweaks for landing sections */
@media (max-width: 980px) {
  .landing-section { margin: 56px auto; }
  .landing-section-head { margin-bottom: 32px; }
  .landing-features .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .landing-preview .preview-wrap { padding: 22px; }
}
@media (max-width: 640px) {
  .landing-section { width: calc(100% - 24px); margin: 40px auto; }
  .landing-features .feature-grid { grid-template-columns: 1fr; }
  .feature-card { padding: 22px 18px; }
  .feature-icon-box { width: 46px; height: 46px; font-size: 1.35rem; border-radius: 14px; }
  .faq-item summary { font-size: 1.05rem; padding: 16px 18px; }
  .faq-item .faq-answer { padding: 0 18px 16px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Optional filters — collapsible card with searchable dropdown fields.
   ══════════════════════════════════════════════════════════════════════════ */
.ask-card { overflow: visible; }   /* let filter dropdown lists escape the card */
.filters-card {
  margin: 14px 0 4px;
  border: 1px solid #e5d9c4; border-radius: 16px;
  background: linear-gradient(180deg, #fbf7ee 0%, #f7f1e3 100%);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.filters-card[open] { box-shadow: 0 10px 28px -20px rgba(120, 78, 30, .4); border-color: #d9c79f; }
.filters-summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: 16px;
  font-size: .86rem; color: #6b5a44;
  transition: background .15s ease;
}
.filters-summary::-webkit-details-marker { display: none; }
.filters-summary:hover { background: rgba(201, 154, 77, .06); }
.filters-summary:focus-visible { outline: 2px solid #c99a4d; outline-offset: 2px; }
.filters-summary-lead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.filters-icon { font-size: 1rem; line-height: 1; }
.filters-title { font-weight: 700; color: #3d2718; }
.filters-hint { font-size: .76rem; color: #9c8a72; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filters-summary-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.filters-badge {
  background: linear-gradient(135deg, #c99a4d, #a9621c); color: #fff;
  font-size: .68rem; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}
.filters-toggle-word { font-size: .74rem; font-weight: 700; color: #8b4d22; text-transform: uppercase; letter-spacing: .06em; }
.filters-toggle-word .filters-word-close { display: none; }
.filters-card[open] .filters-toggle-word .filters-word-open { display: none; }
.filters-card[open] .filters-toggle-word .filters-word-close { display: inline; }
.filters-caret { font-size: .7rem; transition: transform .2s ease; }
.filters-card[open] .filters-caret { transform: rotate(180deg); }
.filters-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
  padding: 6px 16px 12px;
  border-top: 1px dashed rgba(139, 77, 34, .15);
  animation: fltFadeIn .22s ease-out;
}
@keyframes fltFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.flt-label {
  display: flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 700; color: var(--primary);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 5px;
}
.flt-info { color: #b09a7c; cursor: help; font-size: .78rem; font-weight: 400; text-transform: none; }
.flt-info:focus-visible { outline: 2px solid #c99a4d; outline-offset: 1px; border-radius: 50%; }
.flt-combo { position: relative; }
.flt-combo input, .flt-combo select {
  width: 100%; margin: 0; box-sizing: border-box;
  font-size: .85rem; font-family: 'Lato', sans-serif; color: #3d2718;
  background: #fffdf8; border: 1px solid #e0d2b6; border-radius: 12px;
  padding: 9px 56px 9px 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.flt-combo select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; }
.flt-combo input:focus, .flt-combo select:focus {
  outline: none; border-color: #c99a4d; background: #fff;
  box-shadow: 0 0 0 3px rgba(201, 154, 77, .18);
}
.flt-combo input::placeholder { color: #b6a68c; }
.flt-combo.has-value input { border-color: #cfae72; background: #fffcf3; }
.flt-caret {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: .62rem; color: #a08a68; pointer-events: none;
  transition: transform .18s ease;
}
.flt-combo.is-open .flt-caret { transform: translateY(-50%) rotate(180deg); }
.flt-clear {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(169, 98, 28, .12); color: #8b4d22;
  font-size: .85rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.flt-clear:hover { background: rgba(169, 98, 28, .25); }
.flt-list {
  position: absolute; z-index: 80; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 4px; list-style: none;
  background: #fffdf8; border: 1px solid #e0d2b6; border-radius: 12px;
  box-shadow: 0 16px 38px -14px rgba(80, 50, 20, .35);
  max-height: 210px; overflow-y: auto;
  animation: fltFadeIn .16s ease-out;
}
.flt-list [role="option"] {
  padding: 8px 10px; border-radius: 8px; font-size: .84rem;
  color: #4a3620; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flt-list [role="option"]:hover, .flt-list [role="option"].is-hl { background: rgba(201, 154, 77, .16); }
.flt-empty { padding: 9px 10px; font-size: .8rem; color: #9c8a72; font-style: italic; }
/* Keywords chips field — spans the full grid width for room to breathe */
.flt-field-chips { grid-column: 1 / -1; }
.flt-help { font-size: .72rem; color: #9c8a72; line-height: 1.45; margin-top: 5px; }
.flt-combo-chips .chips-input {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 42px; padding: 6px 8px;
  background: #fffdf8; border: 1px solid #e0d2b6; border-radius: 12px;
  cursor: text; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.flt-combo-chips.is-focus .chips-input {
  border-color: #c99a4d; background: #fff; box-shadow: 0 0 0 3px rgba(201, 154, 77, .18);
}
.flt-combo-chips.has-value .chips-input { border-color: #cfae72; }
.chip-token {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  background: linear-gradient(135deg, #c99a4d, #a9621c); color: #fff;
  border-radius: 999px; padding: 3px 5px 3px 11px;
  font-size: .78rem; font-weight: 600;
}
.chip-token > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-token button {
  flex-shrink: 0; border: none; cursor: pointer;
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(255, 255, 255, .25); color: #fff;
  font-size: .72rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.chip-token button:hover { background: rgba(255, 255, 255, .5); }
.chips-search {
  flex: 1; min-width: 100px;
  border: none !important; outline: none;
  background: transparent !important; box-shadow: none !important;
  margin: 0; padding: 4px 2px !important;
  font-size: .85rem; font-family: 'Lato', sans-serif; color: #3d2718;
}
.chips-search::placeholder { color: #b6a68c; }
.filters-foot { display: flex; justify-content: flex-end; padding: 0 16px 12px; }
.filters-clear-all {
  background: transparent; border: none; color: #a9621c;
  font-size: .76rem; font-weight: 700; cursor: pointer;
  padding: 6px 10px; border-radius: 999px; transition: background .15s ease;
}
.filters-clear-all:hover { background: rgba(169, 98, 28, .08); }
@media (max-width: 640px) {
  .filters-grid { grid-template-columns: 1fr; }
  .filters-hint { display: none; }
}
/* Ask AI button internals */
.btn-generate { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn-gen-icon { font-size: 1.05rem; line-height: 1; }
.btn-spinner {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2.5px solid rgba(255, 248, 236, .35); border-top-color: #fff8ec;
  animation: btnSpin .7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   Digital Invitations — landing showcase
   ══════════════════════════════════════════════════════════════════════════ */
.landing-invitations .inv-studio {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 34px;
}
.inv-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.inv-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 26px -16px rgba(60, 34, 12, .35);
  transition: transform .22s ease, box-shadow .22s ease;
  text-align: center;
  display: block;
}
.inv-thumb:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(60, 34, 12, .45); }
.inv-thumb:focus-visible { outline: 3px solid #c99a4d; outline-offset: 3px; }
.inv-thumb-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 14px 18px;
}
.inv-thumb-motif { font-size: 1.8rem; line-height: 1; }
.inv-thumb-scene {
  width: 66%;
  max-width: 150px;
  height: auto;
  color: currentColor;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .08));
}
.inv-thumb--gold .inv-thumb-scene { filter: drop-shadow(0 1px 2px rgba(122, 83, 16, .35)); }
.inv-thumb--minimal .inv-thumb-scene { filter: none; }
.inv-thumb-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 700; letter-spacing: .01em; }
.inv-thumb-sub { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; opacity: .78; }

/* Mini invitation card thumbnails (Pixivite-style card previews) */
.inv-thumb-card {
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 12px;
  text-align: center;
  color: inherit;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(1px);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.inv-thumb--minimal .inv-thumb-card { background: rgba(255, 255, 255, .55); border-color: rgba(180, 145, 90, .35); }
.inv-thumb--gold .inv-thumb-card { background: rgba(255, 245, 210, .18); border-color: rgba(58, 31, 8, .35); box-shadow: inset 0 0 0 1px rgba(122, 83, 16, .18); }
.inv-thumb--memorial .inv-thumb-card { background: rgba(252, 250, 244, .45); }

.inv-thumb-corner {
  width: 78%;
  max-width: 130px;
  height: auto;
  color: currentColor;
  flex-shrink: 0;
  opacity: .95;
}
.inv-thumb-corner--top { margin-bottom: 2px; }
.inv-thumb-corner--bot { margin-top: 2px; transform: none; }

.inv-thumb-eyebrow {
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .78;
  margin-top: 2px;
}
.inv-thumb-couple {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 4px 0 2px;
}
.inv-thumb-couple--memorial { font-size: 1.2rem; font-style: italic; font-weight: 600; }
.inv-thumb-and {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  opacity: .75;
  margin: 0 3px;
}
.inv-thumb-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: .015em;
}
.inv-thumb-rule {
  width: 30%;
  height: 1px;
  background: currentColor;
  opacity: .45;
  margin: 3px auto 4px;
}
.inv-thumb-when {
  font-size: .62rem;
  letter-spacing: .1em;
  font-weight: 600;
  opacity: .85;
}
.inv-thumb-where {
  font-size: .58rem;
  letter-spacing: .06em;
  opacity: .7;
  margin-top: 2px;
  padding: 0 4px;
  line-height: 1.25;
}
.inv-thumb-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .82);
  color: #6b4a1a;
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}
.inv-thumb--elegant  { background: radial-gradient(120% 100% at 50% 0%, #fbf5e6 0%, #f0e6cc 60%, #d9c79f 100%); color: #3d2718; }
.inv-thumb--floral   { background: radial-gradient(120% 100% at 50% 0%, #fff1f2 0%, #fde2e4 45%, #f8c5c9 100%); color: #7a2a34; }
.inv-thumb--festive  { background: radial-gradient(120% 100% at 50% 0%, #ffedc9 0%, #f6b23c 50%, #b6541f 100%); color: #40260a; }
.inv-thumb--memorial { background: radial-gradient(120% 100% at 50% 0%, #f4f2ec 0%, #dcd6c6 55%, #a9a294 100%); color: #3a352b; }
.inv-thumb--minimal  { background: linear-gradient(180deg, #ffffff 0%, #f4f0e6 100%); color: #2a2018; border: 1px solid #ead9b8; }
.inv-thumb--gold     { background: radial-gradient(120% 90% at 22% 12%, rgba(255,248,210,.55) 0%, transparent 45%), linear-gradient(135deg, #b8862b 0%, #e8c866 22%, #f4dc8a 44%, #d4a832 62%, #a5731a 82%, #7a5310 100%); color: #2a1a08; }
.inv-thumb--gold .inv-thumb-badge { background: rgba(58, 31, 8, .22); color: #2a1a08; }
.inv-hero-side { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.inv-hero-cta { text-align: center; }
.inv-hero-btn-row {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.inv-hero-btn { padding: 14px 32px !important; font-size: 1.05rem !important; }
.inv-hero-note { margin-top: 10px; font-size: .82rem; color: #7a6f65; font-style: italic; }

/* ══════════════════════════════════════════════════════════════════════════
   Invitation card — themed presentation used in landing + designer + preview
   ══════════════════════════════════════════════════════════════════════════ */
.inv-card {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(30, 18, 8, .55), 0 8px 20px -14px rgba(60, 34, 12, .3);
  position: relative;
  isolation: isolate;
  transition: transform .3s ease;
}
.inv-card:hover { transform: translateY(-2px); }
.inv-card-inner {
  position: absolute;
  inset: 22px;
  border-radius: 16px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  z-index: 2;
}
.inv-card-motif { font-size: 2rem; line-height: 1; margin-bottom: 4px; }
.inv-card-motif--svg { display: flex; align-items: center; justify-content: center; margin: 6px 0 14px; }
.inv-card-motif--svg svg { width: 180px; height: 180px; max-width: 62%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.inv-card-eyebrow { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; opacity: .8; }
.inv-card-names {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 4.8vw, 2.8rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 4px 0 2px;
  letter-spacing: .01em;
}
.inv-card-and { font-style: italic; font-weight: 400; opacity: .7; margin: 0 6px; }
.inv-card-rule { width: 60px; height: 1px; background: currentColor; opacity: .35; margin: 8px 0; }
/* When an AI SVG divider is placed inside the rule, expand it and hide the plain background. */
.inv-card-rule.has-svg { width: 78%; max-width: 260px; height: 14px; background: none; opacity: .85; margin: 10px 0 12px; display: flex; align-items: center; justify-content: center; }
.inv-card-rule.has-svg svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }

/* AI-generated corner flourishes (top-left, top-right, bottom-left, bottom-right). */
.inv-card-corner { position: absolute; width: 68px; height: 68px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.inv-card-corner.has-svg { opacity: .72; }
.inv-card-corner svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.inv-card-corner--tl { top: 14px; left: 14px; }
.inv-card-corner--tr { top: 14px; right: 14px; transform: scaleX(-1); }
.inv-card-corner--bl { bottom: 14px; left: 14px; transform: scaleY(-1); }
.inv-card-corner--br { bottom: 14px; right: 14px; transform: scale(-1, -1); }

/* ── Hero photo layout ────────────────────────────────────────────────────
   When a photo is active it becomes the centrepiece: a full-width hero band
   across the upper half of the card, with the invitation text floating below
   in a frosted-glass panel (semi-transparent white, backdrop blur, golden
   border) — instead of the old faint full-card watermark. */
.inv-card-photo { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; opacity: 0; transition: opacity .4s ease; }
.inv-card-photo.has-photo { opacity: 1; }
.inv-card[data-ai-photo="1"] .inv-card-photo { inset: 0 0 auto 0; height: 56%; }
/* Soft fade where the hero meets the card body, plus gentle top vignette. */
.inv-card[data-ai-photo="1"] .inv-card-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,10,0,.16) 0%, transparent 22%),
    linear-gradient(180deg, transparent 62%, rgba(253,248,240,.55) 88%, rgba(253,248,240,.92) 100%);
}
/* Frosted-glass text panel over the lower half, overlapping the hero edge. */
.inv-card[data-ai-photo="1"] .inv-card-inner {
  inset: 46% 20px 20px;
  padding: 22px 24px 18px;
  gap: 7px;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255, 253, 248, .58);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(214, 174, 106, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    0 18px 40px -18px rgba(40, 22, 6, .45);
}
/* Keep the glass panel airy: hide the large centrepiece ornament and tighten type. */
.inv-card[data-ai-photo="1"] .inv-card-motif,
.inv-card[data-ai-photo="1"] .inv-card-motif--svg { display: none; }
.inv-card[data-ai-photo="1"] .inv-card-names { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.inv-card[data-ai-photo="1"] .inv-card-invite { font-size: .86rem; }
/* Top corner flourishes would sit on the photo — let the hero breathe instead. */
.inv-card[data-ai-photo="1"] .inv-card-corner--tl,
.inv-card[data-ai-photo="1"] .inv-card-corner--tr { opacity: 0; }
/* Cinematic layout opts out of the hero band: it keeps a full-bleed photo with
   a dark scrim and white text (see .inv-card--cinematic rules further down). */
.inv-card--cinematic[data-ai-photo="1"] .inv-card-photo { inset: 0; height: auto; }
.inv-card--cinematic[data-ai-photo="1"] .inv-card-photo::after {
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.55) 100%);
}
.inv-card--cinematic[data-ai-photo="1"] .inv-card-inner {
  inset: 22px; padding: 46px 30px 34px; gap: 0;
  justify-content: space-between;
  background: none; border: none; box-shadow: none; border-radius: 16px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.inv-card--cinematic[data-ai-photo="1"] .inv-card-names { font-size: clamp(2.4rem, 6.4vw, 3.6rem); }
.inv-card--cinematic[data-ai-photo="1"] .inv-card-invite { font-size: .8rem; }

/* ── Cinematic layout: hero title with gradient fill, bottom-anchored date ── */
.inv-card--cinematic .inv-card-inner {
  justify-content: space-between;
  padding: 46px 30px 34px;
  gap: 0;
}
.inv-card--cinematic .inv-card-eyebrow {
  font-size: .62rem;
  letter-spacing: .32em;
  opacity: .55;
  margin-bottom: 0;
}
.inv-card--cinematic .inv-card-rule { display: none; }
.inv-card--cinematic .inv-card-motif { display: none; }
.inv-card--cinematic .inv-card-motif--svg { display: none; }
.inv-card--cinematic .inv-card-names {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6.4vw, 3.6rem);
  line-height: .95;
  margin: 6px 0 6px;
  letter-spacing: .01em;
  text-align: center;
  /* Gradient text fill from AI palette (fallback to warm gold). */
  background: linear-gradient(160deg,
    var(--inv-c0, #8B4D22) 0%,
    var(--inv-c1, #C48A3E) 42%,
    var(--inv-c2, #E8C866) 72%,
    var(--inv-c3, #F4DC8A) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 2px 6px rgba(0,0,0,.14);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
.inv-card--cinematic .inv-card-and {
  display: block;
  font-size: .55em;
  opacity: .78;
  margin: 4px 0;
}
.inv-card--cinematic .inv-card-invite {
  font-size: .78rem;
  font-style: italic;
  opacity: .68;
  max-width: 32ch;
  margin: 10px auto 0;
  text-align: center;
}
.inv-card--cinematic .inv-card-hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1 1 auto;
}
.inv-card--cinematic .inv-card-when {
  gap: 4px;
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.12);
  align-items: center;
}
.inv-card--cinematic .inv-card-date {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.inv-card--cinematic .inv-card-day,
.inv-card--cinematic .inv-card-time { font-size: .72rem; letter-spacing: .16em; opacity: .8; }
.inv-card--cinematic .inv-card-where { font-size: .78rem; margin-top: 4px; opacity: .78; }
.inv-card--cinematic .inv-card-foot { font-size: .58rem; letter-spacing: .22em; opacity: .5; margin-top: 6px; }
.inv-card--cinematic .inv-card-corner { width: 78px; height: 78px; opacity: .55; }
.inv-card--cinematic .inv-card-corner.has-svg { opacity: .55; }
/* Photo + cinematic: the dark scrim lives on .inv-card-photo::after (see the
   hero-photo block above); here we only keep the white-text treatment. */
.inv-card--cinematic[data-ai-photo="1"] .inv-card-inner {
  color: #fff;
}
.inv-card--cinematic[data-ai-photo="1"] .inv-card-eyebrow,
.inv-card--cinematic[data-ai-photo="1"] .inv-card-invite,
.inv-card--cinematic[data-ai-photo="1"] .inv-card-when,
.inv-card--cinematic[data-ai-photo="1"] .inv-card-where,
.inv-card--cinematic[data-ai-photo="1"] .inv-card-foot { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.inv-card--cinematic[data-ai-photo="1"] .inv-card-when { border-top-color: rgba(255,255,255,.35); }

/* "Use my own photo" row inside the AI block */
.inv-photo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ead9b8; }
.inv-photo-btn {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  background: #fff8e8; color: #7a5310;
  border: 1.5px dashed #c99a4d;
  font-size: .74rem; font-weight: 700;
  transition: background .15s ease, border-color .15s ease;
}
.inv-photo-btn:hover { background: #fef4d8; border-color: #8b4d22; border-style: solid; }
.inv-photo-clear {
  border: none; background: transparent; cursor: pointer;
  color: #a04c4c; font-size: .72rem; font-weight: 600;
  padding: 4px 8px; border-radius: 6px;
}
.inv-photo-clear:hover { background: #fdecec; }
.inv-photo-hint { flex: 1 1 100%; font-size: .7rem; color: #7d6656; font-style: italic; }

.inv-card-invite {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.4;
  opacity: .88;
  max-width: 28ch;
}
.inv-card-when { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.inv-card-day { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.inv-card-date { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.4rem; font-weight: 600; letter-spacing: .04em; }
.inv-card-time { font-size: .82rem; font-style: italic; opacity: .82; }
.inv-card-where { font-size: .9rem; font-weight: 500; margin-top: 6px; opacity: .9; }
.inv-card-foot { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .58; margin-top: 10px; }
.inv-card-host { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; margin-top: 4px; }

.inv-card--elegant {
  background: radial-gradient(140% 100% at 50% 0%, #fbf5e6 0%, #f0e6cc 70%, #d9c79f 100%);
  color: #3d2718;
}
.inv-card--elegant .inv-card-inner { border: 1px solid rgba(139, 77, 34, .22); }
.inv-card--floral {
  background: radial-gradient(140% 100% at 50% 0%, #fff1f2 0%, #fde2e4 40%, #f8c5c9 100%);
  color: #7a2a34;
}
.inv-card--floral .inv-card-inner {
  border: 1px solid rgba(122, 42, 52, .18);
  background: radial-gradient(circle at 20% 10%, rgba(248, 197, 201, .3), transparent 40%),
              radial-gradient(circle at 80% 90%, rgba(248, 197, 201, .3), transparent 40%);
}
.inv-card--festive {
  background: radial-gradient(140% 100% at 50% 0%, #ffedc9 0%, #f6b23c 55%, #b6541f 100%);
  color: #3a1f08;
}
.inv-card--festive .inv-card-inner { border: 2px solid rgba(58, 31, 8, .3); box-shadow: inset 0 0 0 4px rgba(255, 245, 217, .5); }
.inv-card--memorial {
  background: radial-gradient(140% 100% at 50% 0%, #f4f2ec 0%, #dcd6c6 60%, #a9a294 100%);
  color: #3a352b;
}
.inv-card--memorial .inv-card-inner { border: 1px solid rgba(58, 53, 43, .2); }
.inv-card--memorial .inv-card-names { font-style: italic; font-weight: 500; }
.inv-card--minimal {
  background: #fdf9f0;
  color: #2a2018;
  box-shadow: 0 30px 60px -30px rgba(30, 18, 8, .3), inset 0 0 0 1px #ecdcb6;
}
.inv-card--minimal .inv-card-inner { border: 1px solid #e2d1a8; }
.inv-card--minimal .inv-card-rule { background: #a9621c; opacity: .9; width: 40px; }

/* Theme: 24k Gold — foil-stamped luxury. Rich metallic gold leaf background,
   deep espresso ink lettering, with a subtle brushed sheen. */
.inv-card--gold {
  background:
    /* soft top-left highlight for foil sheen */
    radial-gradient(120% 90% at 22% 12%, rgba(255, 248, 210, .55) 0%, transparent 45%),
    /* diagonal brushed-gold band */
    linear-gradient(135deg, #b8862b 0%, #e8c866 22%, #f4dc8a 44%, #d4a832 62%, #a5731a 82%, #7a5310 100%);
  color: #2a1a08;
  box-shadow:
    0 30px 60px -28px rgba(60, 34, 6, .65),
    0 8px 22px -12px rgba(140, 90, 20, .45),
    inset 0 0 0 1px rgba(255, 248, 210, .35);
}
.inv-card--gold .inv-card-inner {
  border: 1px solid rgba(74, 46, 8, .45);
  background:
    radial-gradient(120% 90% at 78% 88%, rgba(255, 248, 210, .28) 0%, transparent 40%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 210, .28),
    inset 0 0 60px rgba(140, 90, 20, .18);
}
.inv-card--gold .inv-card-motif { color: #3a1f08; text-shadow: 0 1px 0 rgba(255, 248, 210, .5); }
.inv-card--gold .inv-card-eyebrow { color: #4a2e10; }
.inv-card--gold .inv-card-names {
  background: linear-gradient(180deg, #2a1a08 0%, #4a2e10 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255, 248, 210, .35);
}
.inv-card--gold .inv-card-and { color: #6b4a1a; opacity: .75; }
.inv-card--gold .inv-card-rule { background: #3a1f08; opacity: .55; width: 80px; }
.inv-card--gold .inv-card-invite { color: #3a1f08; opacity: .95; }
.inv-card--gold .inv-card-day { color: #4a2e10; opacity: .75; }
.inv-card--gold .inv-card-date { color: #2a1a08; }
.inv-card--gold .inv-card-time { color: #4a2e10; opacity: .85; }
.inv-card--gold .inv-card-where { color: #2a1a08; }
.inv-card--gold .inv-card-foot { color: #4a2e10; opacity: .7; }

/* ══════════════════════════════════════════════════════════════════════════
   Invitation Designer modal
   ══════════════════════════════════════════════════════════════════════════ */
.inv-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(30, 18, 8, .55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  animation: invOverlayIn .22s ease-out;
}
.inv-modal-overlay.hidden { display: none; }
@keyframes invOverlayIn { from { opacity: 0; } to { opacity: 1; } }
body.inv-modal-open { overflow: hidden; }
.inv-modal {
  background: #fbf7ee;
  border-radius: 22px;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .55);
  width: min(1180px, 100%);
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: invModalIn .28s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes invModalIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.inv-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 28px 16px;
  border-bottom: 1px solid #ead9b8;
  background: linear-gradient(180deg, #ffffff 0%, #fbf7ee 100%);
}
.inv-modal-eyebrow {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #a9621c;
  margin-bottom: 4px;
}
.inv-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: #3d2718;
  margin: 0;
  line-height: 1.15;
}
.inv-modal-close {
  background: transparent;
  border: 1px solid #e2d1a8;
  color: #6b5a44;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.inv-modal-close:hover { background: #f4ead0; transform: rotate(90deg); }
.inv-modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.inv-form {
  padding: 22px 28px;
  overflow-y: auto;
  border-right: 1px solid #ead9b8;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inv-form-block { display: flex; flex-direction: column; gap: 6px; }
.inv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inv-form-block-label {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b4a1a;
}
.inv-form-optional {
  font-weight: 500;
  color: #a09080;
  text-transform: none;
  letter-spacing: 0;
  font-size: .68rem;
  margin-left: 4px;
}
.inv-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e2d1a8;
  border-radius: 10px;
  background: #fffcf5;
  font-size: .9rem;
  color: #3d2718;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.inv-input:focus {
  outline: none;
  border-color: #c99a4d;
  box-shadow: 0 0 0 3px rgba(201, 154, 77, .18);
}
.inv-textarea { resize: vertical; min-height: 60px; }
.inv-theme-row { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-theme-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1.5px solid #e2d1a8;
  border-radius: 999px;
  background: #fffcf5;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: #6b4a1a;
  transition: all .15s ease;
}
.inv-theme-pill input { display: none; }
.inv-theme-pill:hover { border-color: #c99a4d; background: #fdf3d9; }
.inv-theme-pill.is-active {
  background: linear-gradient(135deg, #a9621c, #8b4d22);
  color: #fff;
  border-color: #8b4d22;
  box-shadow: 0 4px 12px -6px rgba(139, 77, 34, .5);
}

/* ── Theme swatches — mini card previews instead of text pills.
   Same six themes as the landing gallery, so the picker inside the designer
   reads the way the thumbnails on the home page do. The themed gradient lives
   on .inv-sw-face (via the shared .inv-thumb--* classes); the label around it
   stays neutral chrome so the selected ring is legible on every theme. ── */
.inv-theme-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.inv-theme-pill.inv-theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 7px 7px 6px;
  border-radius: 12px;
  background: #fffcf5;
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.inv-theme-pill.inv-theme-swatch:hover {
  transform: translateY(-2px);
  border-color: #c99a4d;
  box-shadow: 0 10px 20px -12px rgba(60, 34, 12, .5);
}
/* Neutralise the solid-brown active fill inherited from .inv-theme-pill.is-active
   so the theme's own colours stay visible when selected. */
.inv-theme-pill.inv-theme-swatch.is-active {
  background: #fff8ea;
  color: #6b4a1a;
  border-color: #8b4d22;
  box-shadow: 0 0 0 2px #c99a4d, 0 10px 20px -12px rgba(60, 34, 12, .55);
}
.inv-theme-pill.inv-theme-swatch.is-active::after {
  content: "✓";
  position: absolute;
  top: 5px; right: 6px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #8b4d22;
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.inv-sw-face {
  aspect-ratio: 3 / 4;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 5px;
}
.inv-sw-motif { font-size: .82rem; line-height: 1; }
.inv-sw-bar { width: 58%; height: 3px; border-radius: 2px; background: currentColor; opacity: .5; }
.inv-sw-bar--name { width: 74%; height: 5px; opacity: .78; }
.inv-sw-rule { width: 28%; height: 1px; background: currentColor; opacity: .42; }
.inv-sw-name {
  margin-top: 5px;
  text-align: center;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}
@media (max-width: 560px) {
  .inv-theme-swatches { gap: 8px; }
  .inv-sw-name { font-size: .6rem; }
}

/* ── AI style generation block ─────────────────────────────────────────────── */
.inv-ai-block {
  background: linear-gradient(135deg, rgba(201,154,77,0.10), rgba(139,77,34,0.06));
  border: 1px solid #ead9b8;
  border-radius: 14px;
  padding: 12px;
}
.inv-ai-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.inv-ai-btn {
  border: none; cursor: pointer;
  background: linear-gradient(135deg, #a9621c, #8b4d22);
  color: #fff; font-weight: 700; font-size: .78rem;
  padding: 7px 14px; border-radius: 999px;
  box-shadow: 0 6px 14px -8px rgba(139, 77, 34, .6);
  transition: transform .12s ease, filter .15s ease;
}
.inv-ai-btn:hover { filter: brightness(1.06); }
.inv-ai-btn:active { transform: translateY(1px); }
.inv-ai-btn:disabled { opacity: .6; cursor: default; }
.inv-ai-status { font-size: .74rem; color: #7d6656; margin-top: 8px; min-height: 14px; }
.inv-ai-variants {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.inv-ai-variants:empty { display: none; }
.inv-ai-variant {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; cursor: pointer; text-align: left;
  border: 1.5px solid #e2d1a8; border-radius: 12px;
  background: #fffcf5; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.inv-ai-variant:hover { border-color: #c99a4d; box-shadow: 0 6px 16px -10px rgba(139,77,34,.5); }
.inv-ai-variant:active { transform: translateY(1px); }
.inv-ai-variant.is-active { border-color: #8b4d22; box-shadow: 0 0 0 2px rgba(139,77,34,.25); }
.inv-ai-thumb { position: relative; display: block; height: 44px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); overflow: hidden; }
.inv-ai-thumb-svg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .78; pointer-events: none; }
.inv-ai-thumb-svg svg { width: 70%; height: 70%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.inv-ai-variant-name {
  font-size: .74rem; font-weight: 700; color: #5a4326;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-ai-swatches { display: flex; gap: 4px; }
.inv-ai-sw { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

/* AI message copywriter — Suggest button + 3 suggestion chips under the textarea */
.inv-form-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.inv-msg-ai-btn {
  border: none; cursor: pointer;
  background: linear-gradient(135deg, #7a5310, #b8862b);
  color: #fff8e8; font-weight: 700; font-size: .72rem;
  padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 4px 10px -6px rgba(122, 83, 16, .6);
  transition: transform .12s ease, filter .15s ease;
}
.inv-msg-ai-btn:hover { filter: brightness(1.08); }
.inv-msg-ai-btn:active { transform: translateY(1px); }
.inv-msg-ai-btn:disabled { opacity: .6; cursor: default; }
.inv-msg-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.inv-msg-head { font-size: .72rem; color: #7d6656; padding: 0 2px; }
.inv-msg-loading { font-size: .78rem; color: #7d6656; font-style: italic; padding: 6px 4px; }
.inv-msg-error { color: #b34747; }
.inv-msg-suggestion {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; text-align: left; cursor: pointer;
  border: 1.5px solid #e6d9be; border-radius: 10px;
  background: #fffcf5; color: #3d2718;
  font-size: .82rem; line-height: 1.35;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.inv-msg-suggestion:hover { border-color: #b8862b; background: #fff8e8; box-shadow: 0 4px 12px -8px rgba(122, 83, 16, .45); }
.inv-msg-suggestion.is-active { border-color: #7a5310; background: #fef4d8; box-shadow: 0 0 0 2px rgba(122, 83, 16, .22); }
.inv-msg-suggestion-num {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  background: #b8862b; color: #fff; font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.inv-msg-suggestion-text { flex: 1 1 auto; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: .92rem; }

.inv-form-actions {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed #ead9b8;
  margin-top: 8px;
  flex-wrap: wrap;
}
.inv-form-actions .btn.inv-action-btn {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 9px 12px;
  font-size: .82rem;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-form-actions .btn.inv-action-btn.btn-primary { flex-basis: 46%; }
.inv-form-actions .btn.inv-action-btn.btn-secondary,
.inv-form-actions .btn.inv-action-btn.btn-ghost { flex-basis: 26%; }
.inv-form-hint {
  font-size: .78rem;
  color: #6b5a44;
  background: #fdf3d9;
  border-left: 3px solid #c99a4d;
  padding: 10px 14px;
  border-radius: 6px;
  line-height: 1.45;
}
.inv-preview-rail {
  padding: 22px 28px;
  background: linear-gradient(180deg, #f4ead0 0%, #ead9b8 100%);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.inv-preview-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8b4d22;
  align-self: flex-start;
}
.inv-preview-frame {
  width: 100%;
  max-width: 380px;
  display: flex;
  justify-content: center;
}
.inv-preview-frame .inv-card { max-width: 380px; }
.inv-preview-frame.is-full { max-width: 460px; }
.inv-preview-frame.is-full .inv-card { max-width: 460px; }
.inv-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  padding-top: 8px;
  border-top: 1px dashed rgba(139, 77, 34, .28);
}
.inv-preview-toolbar-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6b5a44;
}
.inv-preview-toolbar-btns { display: inline-flex; gap: 6px; }
.inv-preview-size-btn {
  border: 1px solid #d9c79f;
  background: #fffcf5;
  color: #6b4a1a;
  font-size: .74rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
}
.inv-preview-size-btn:hover { background: #fdf3d9; }
.inv-preview-size-btn.is-active {
  background: #8b4d22;
  color: #fff;
  border-color: #8b4d22;
}

@media (max-width: 980px) {
  .landing-invitations .inv-studio { grid-template-columns: 1fr; gap: 28px; }
  .inv-hero-side { order: -1; }
  .inv-modal { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  .inv-modal-overlay { padding: 16px; }
  .inv-modal-body { grid-template-columns: 1fr; }
  .inv-form { border-right: none; border-bottom: 1px solid #ead9b8; }
  .inv-preview-rail { padding: 18px 20px 28px; }
}
@media (max-width: 640px) {
  .inv-theme-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .inv-thumb-title { font-size: 1.25rem; }
  .inv-modal-head { padding: 16px 18px 12px; }
  .inv-modal-title { font-size: 1.35rem; }
  .inv-form { padding: 16px 18px; }
  .inv-form-grid { grid-template-columns: 1fr; }
  .inv-form-actions .btn { min-width: 100%; }
  .inv-card-inner { padding: 26px 22px; inset: 16px; }
  .inv-card-names { font-size: clamp(1.6rem, 8vw, 2.4rem); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Bill reminders panel
   ══════════════════════════════════════════════════════════════════════════ */
.bills-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(20,8,0,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.bills-overlay.hidden { display: none; }
.bills-panel {
  background: #fffdf4; border-radius: 20px; max-width: 640px; width: 100%;
  max-height: 88vh; box-shadow: 0 24px 64px rgba(0,0,0,.32);
  overflow: hidden; display: flex; flex-direction: column;
}
.bills-header {
  background: linear-gradient(135deg, #8b4d22 0%, #c99a4d 100%);
  padding: 15px 20px; display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.bills-header-left { display: flex; align-items: center; gap: 9px; }
.bills-header-icon { font-size: 1.2rem; }
.bills-header-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #fff3d8; font-size: 1.1rem; font-weight: 700; letter-spacing: .03em;
}
.bills-close {
  color: #ffe8b8; background: rgba(255,255,255,.15); border: none;
  font-size: 1rem; width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.bills-close:hover { background: rgba(255,255,255,.28); }
.bills-body { padding: 22px 24px; overflow-y: auto; }
.bills-intro { font-size: .86rem; color: #5a4a38; line-height: 1.55; margin-bottom: 16px; }

.bills-locked.hidden, .bills-content.hidden { display: none; }
.bills-locked { text-align: center; padding: 32px 16px; }
.bills-locked-icon { font-size: 2.2rem; margin-bottom: 8px; }
.bills-locked-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; font-weight: 700; color: #3d2718; margin-bottom: 6px; }
.bills-locked-msg { font-size: .88rem; color: #7a6a58; max-width: 340px; margin: 0 auto 18px; line-height: 1.5; }
.bills-upsell-btn {
  display: inline-block; background: linear-gradient(135deg, #c99a4d, #a9621c); color: #fff;
  text-decoration: none; font-weight: 700; font-size: .88rem;
  padding: 10px 22px; border-radius: 999px; border: none; cursor: pointer;
  box-shadow: 0 6px 16px rgba(169,98,28,.28);
}

.bill-form { border: 1px solid #e5d9c4; border-radius: 14px; padding: 16px; background: #fbf7ee; margin-bottom: 20px; }
.bill-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.bill-field { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .03em; }
.bill-field em { text-transform: none; font-weight: 400; font-style: italic; color: #9c8a72; }
.bill-field-wide { grid-column: 1 / -1; }
.bill-field input, .bill-field select {
  font-family: 'Lato', sans-serif; font-size: .88rem; font-weight: 400; color: #3d2718;
  text-transform: none; letter-spacing: 0;
  border: 1px solid #e0d2b6; border-radius: 10px; padding: 8px 10px; background: #fffdf8;
}
.bill-field input:focus, .bill-field select:focus {
  outline: none; border-color: #c99a4d; box-shadow: 0 0 0 3px rgba(201,154,77,.18);
}
.bill-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.bill-cancel-btn.hidden { display: none; }
.bill-cancel-btn {
  background: transparent; border: 1px solid rgba(169,98,28,.3); color: #8b4d22;
  font-size: .82rem; font-weight: 700; padding: 9px 18px; border-radius: 999px; cursor: pointer;
}
.bill-cancel-btn:hover { background: rgba(169,98,28,.08); }
.bill-save-btn {
  background: linear-gradient(135deg, #c99a4d, #a9621c); color: #fff; border: none;
  font-size: .82rem; font-weight: 800; padding: 9px 22px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(169,98,28,.25);
}
.bill-save-btn:hover { filter: brightness(1.06); }
.bill-save-btn:disabled { opacity: .6; cursor: not-allowed; }

.bills-list-label { font-size: .78rem; font-weight: 800; color: #8b4d22; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.bills-list { display: flex; flex-direction: column; gap: 8px; }
.bills-empty { text-align: center; color: #9c8a72; font-size: .86rem; font-style: italic; padding: 20px 0; }
.bill-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #e8dcc4; border-radius: 12px; padding: 10px 12px; background: #fff;
}
.bill-row-off { opacity: .55; }
.bill-row-icon { font-size: 1.3rem; flex-shrink: 0; }
.bill-row-main { flex: 1; min-width: 0; }
.bill-row-name { font-weight: 700; color: #3d2718; font-size: .92rem; }
.bill-row-amt { font-weight: 400; color: #7a6a58; }
.bill-row-meta { font-size: .78rem; color: #9c8a72; margin-top: 2px; }
.bill-row-notes { font-size: .76rem; color: #a89878; font-style: italic; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.bill-badge { font-size: .7rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.bill-badge-due { background: #fce1e1; color: #a12b2b; }
.bill-badge-soon { background: #ffe8c2; color: #9a5c0a; }
.bill-badge-near { background: #fff3d6; color: #8a6a1a; }
.bill-badge-far { background: #eef3e4; color: #4a6b2c; }
.bill-badge-off { background: #efe9df; color: #948468; }
.bill-row-actions { display: flex; gap: 4px; }
.bill-row-actions button {
  border: none; background: rgba(169,98,28,.08); color: #8b4d22;
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: .82rem;
}
.bill-row-actions button:hover { background: rgba(169,98,28,.18); }

@media (max-width: 560px) {
  .bill-form-grid { grid-template-columns: 1fr; }
  .bill-row { flex-wrap: wrap; }
  .bill-row-right { flex-direction: row; align-items: center; margin-left: auto; }
}

/* ── Mobile topbar drawer + hero/workspace responsive overrides ──────────────
   Kept at the very end of the file (rather than up near the mobile-drawer
   base rules) so these overrides win the cascade against every later
   same-specificity rule for .hero / .workspace / .ask-grid / .stepper —
   several of those selectors are redefined further up the file, and an
   earlier position here was silently losing to those on tablet/mobile. */
@media (max-width: 980px) {
  .mobile-hamburger { display: flex; }
  /* The wrapper becomes a real, initially-hidden slide-down panel. */
  #topbar-collapsible {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; z-index: 56;
    max-height: 0; overflow: hidden;
    background: var(--surface);
    box-shadow: 0 20px 44px -16px rgba(58, 37, 18, 0.32);
    border-radius: 0 0 22px 22px;
    transition: max-height .28s ease, padding-top .28s ease;
    /* padding-top lives on .open only: max-height can't clamp below the
       padding, so a closed padding of 76px painted a fixed white strip
       over the brand and hamburger. */
    padding-top: 0;
  }
  /* padding-top is set from the measured topbar height when the drawer opens
     (see toggleMobileDrawer) — the 76px assumed here was short of the real
     134px row, so the first menu items opened underneath the header. */
  #topbar-collapsible.open { max-height: 80vh; overflow-y: auto; }
  /* The drawer and the hamburger are siblings inside .topbar, and the drawer
     carries z-index 56 — so while it was open its padding covered the very
     button that closes it, and the menu had no way back out except choosing
     an item. Raising the topbar does not help: the drawer is its child and
     rises with it. The button has to be lifted within the topbar's own
     stacking context, which is why it needs position as well as z-index. */
  .mobile-hamburger { position: relative; z-index: 57; }
  #topbar-collapsible .topnav {
    display: flex; flex-direction: column; gap: 4px;
    background: none; border: none; border-radius: 0;
    padding: 10px 16px 22px;
  }
  #topbar-collapsible .topnav-separator { display: none; }
  #topbar-collapsible .nav-dd { width: 100%; }
  /* Inside the drawer, groups are always expanded — no nested toggle. */
  #topbar-collapsible .nav-dd-trigger {
    width: 100%; justify-content: flex-start; cursor: default;
    background: none; border: none; box-shadow: none;
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
    color: var(--text-soft); padding: 14px 6px 4px;
  }
  #topbar-collapsible .nav-dd-trigger:hover { background: none; transform: none; box-shadow: none; }
  #topbar-collapsible .nav-dd-caret { display: none; }
  #topbar-collapsible .nav-dd-panel {
    display: flex; position: static; box-shadow: none; border: none;
    background: none; padding: 0; min-width: 0; animation: none;
  }
  .mobile-nav { display: flex; }

  /* The Nani launcher is fixed bottom-right and was landing on top of the
     mobile tab bar, covering the TIMELINE tab entirely. Lift both the button
     and its panel above the bar (bar is 82px tall, sitting 12px off the
     bottom). The panel is capped by viewport height so it still fits on short
     phones once raised. */
  #nani-fab { bottom: 108px; }
  #nani-panel { bottom: 192px; }
  #nani-panel .nani-messages { max-height: min(320px, 30vh); }
  .hero { grid-template-columns: 1fr; }
  .stepper { grid-template-columns: repeat(2, 1fr); }
  .workspace { grid-template-columns: 1fr; }
  .sidebar { position: relative; top: auto; max-height: none; overflow: visible; }
  .ask-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .profile-dd-panel { position: fixed; top: auto; right: 10px; left: 10px; }
  .btn-secondary#btn-open-auth { padding: 9px 14px; }
}

/* ── Write-a-Tribute: style picker + personalization form ─────────────────── */
.trib-step-label { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #a06a2e; margin: 0 0 8px; }
.trib-opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: #a0907e; font-size: .8rem; }
.trib-input { width: 100%; margin-bottom: 10px; padding: 8px 12px; border: 1.5px solid #d8c8b0;
  border-radius: 8px; font-family: 'Lato', sans-serif; font-size: .88rem; background: #fdf8f2;
  box-sizing: border-box; color: #3a2410; }
.trib-input:focus { outline: 2px solid #c8a050; outline-offset: 1px; border-color: #c8a050; }
.trib-ta { min-height: 42px; resize: vertical; line-height: 1.5; margin-bottom: 0; }
.trib-style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 9px; }
.trib-style-loading { color: #a0907e; font-size: .85rem; font-style: italic; grid-column: 1 / -1; }
.trib-style-card { text-align: left; background: #fffdf8; border: 1.5px solid #e5d8c0; border-radius: 12px;
  padding: 11px 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s;
  font-family: inherit; display: flex; flex-direction: column; gap: 3px; }
.trib-style-card:hover { border-color: #d0a860; box-shadow: 0 4px 14px rgba(150,100,30,.12); }
.trib-style-card:focus-visible { outline: 2px solid #b0842e; outline-offset: 2px; }
.trib-style-card.selected { border-color: #a9621c; background: #fdf3e2; box-shadow: 0 4px 16px rgba(169,98,28,.18); }
.trib-style-card .tsc-top { display: flex; align-items: center; gap: 7px; }
.trib-style-card .tsc-icon { font-size: 1.1rem; line-height: 1; }
.trib-style-card .tsc-title { font-weight: 700; color: #5a3010; font-size: .86rem; }
.trib-style-card .tsc-prev { font-size: .74rem; color: #8b7060; line-height: 1.35; }
.trib-style-card.selected .tsc-title { color: #8a3d10; }
.trib-details-toggle { margin: 14px 0 0; background: none; border: none; color: #a06a2e; font-weight: 700;
  font-size: .82rem; cursor: pointer; padding: 4px 0; font-family: inherit; }
.trib-details-toggle:hover { color: #7a4a12; }
.trib-details-panel { margin-top: 10px; }
.trib-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 520px) { .trib-grid2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .trib-style-card { transition: none; } }

/* ── Guest save prompt ──────────────────────────────────────────────────────
   Shown once a guest has made something worth losing. Never blocks: a guest
   can dismiss it and carry on without an account. ── */
/* The claim prompt shares the guest-save prompt's shell — same shape, same
   position, so the two never look like different kinds of thing. */
#guest-save-prompt,
#claim-prompt {
  position: fixed; inset: 0; z-index: 1500;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(40, 26, 12, .34);
  padding: 18px;
}
#guest-save-prompt.open,
#claim-prompt.open { display: flex; }
.gsp-box {
  position: relative;
  background: #fffdf7;
  border: 1px solid #e7d6ba;
  border-radius: 20px;
  padding: 26px 28px 22px;
  max-width: 460px; width: 100%;
  box-shadow: 0 24px 60px -20px rgba(60, 34, 12, .45);
  animation: gsp-rise .28s ease;
}
@keyframes gsp-rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gsp-box { animation: none; } }
.gsp-icon { font-size: 1.9rem; line-height: 1; margin-bottom: 8px; }
.gsp-box h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.42rem; color: #4b2f14; margin: 0 0 10px; line-height: 1.25;
}
.gsp-box p { font-size: .9rem; line-height: 1.6; color: #5a4a38; margin: 0 0 10px; }
.gsp-sub { font-weight: 600; color: #6b4a1a !important; }
.gsp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.gsp-actions .btn { flex: 1 1 auto; min-width: 150px; margin: 0; }
.gsp-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: #a89878; line-height: 1;
}
.gsp-close:hover { color: #6b4a1a; }
@media (min-width: 640px) { #guest-save-prompt { align-items: center; } }

/* ── Hero tribute card ──────────────────────────────────────────────────────
   Sits under the family photo for signed-out visitors, where the family
   dashboard appears once signed in. Tributes are the top entry point from
   search, so this is the offer that belongs in the space. ── */
.hero-tribute-card {
  margin: 14px 12px 12px;
  padding: 18px 20px 20px;
  background: linear-gradient(180deg, rgba(255,253,247,.92), rgba(250,242,226,.92));
  border: 1px solid rgba(199,168,120,.45);
  border-radius: 20px;
  box-shadow: 0 10px 26px -18px rgba(74,47,20,.45);
}
.htc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.htc-icon { font-size: 1.15rem; line-height: 1; }
.htc-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem; font-weight: 700; color: #4b2f14; line-height: 1.2;
}
.htc-copy {
  font-size: .88rem; line-height: 1.6; color: #5a4a38; margin: 0 0 14px;
}
.htc-btn { width: 100%; margin: 0; }
@media (max-width: 980px) {
  .hero-tribute-card { margin: 12px; padding: 16px 16px 18px; }
  .htc-title { font-size: 1.2rem; }
  .htc-copy { font-size: .85rem; }
}

/* Cross-reference between the Family and Access tabs. The two lists describe
   different things — who the family remembers, and who can open the group —
   so each row says how it relates to the other list. */
.grp-item-link {
  font-size: .74rem; color: #6b8a5c; margin-top: 3px; line-height: 1.4;
}
.grp-item-link--none { color: #a89878; font-style: italic; }
.grp-hint {
  font-size: .74rem; color: #9a8672; line-height: 1.45; margin-top: 5px;
}

/* ── Group explainer ────────────────────────────────────────────────────────
   Family / Occasions / Access read as three unrelated lists until someone
   explains the chain between them. Opened automatically for an empty group,
   collapsed once there is something to look at. ── */
.grp-explainer {
  background: linear-gradient(180deg, rgba(255,253,247,.9), rgba(250,244,232,.9));
  border: 1px solid rgba(199,168,120,.4);
  border-radius: 14px;
  margin-bottom: 14px;
}
.grp-explainer > summary {
  cursor: pointer; list-style: none;
  padding: 11px 15px;
  font-size: .82rem; font-weight: 700; color: #6b4a1a;
}
.grp-explainer > summary::-webkit-details-marker { display: none; }
.grp-explainer > summary::before { content: "ⓘ "; opacity: .75; }
.grp-explainer > summary::after { content: " ▾"; font-size: .7rem; opacity: .6; }
.grp-explainer[open] > summary::after { content: " ▴"; }
.grp-explainer-body { padding: 0 15px 14px; }
.gx-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 9px; }
.gx-icon { font-size: .95rem; line-height: 1.5; flex-shrink: 0; }
.gx-row div { font-size: .8rem; line-height: 1.55; color: #5a4a38; }
.gx-row b { color: #4b2f14; }
.gx-chain {
  font-size: .8rem; line-height: 1.55; color: #4b2f14;
  background: rgba(201,154,77,.12); border-radius: 9px;
  padding: 8px 11px; margin: 10px 0 8px;
}
.gx-note { font-size: .76rem; line-height: 1.55; color: #8a7560; margin: 0; }

/* ── Start here guide ───────────────────────────────────────────────────────
   The ordered path a new visitor follows. The stepper above the workspace
   describes what the AI does to a document; this is what the person does, so
   every step carries a working button. Hidden once the archive has anything in
   it, or once dismissed. ── */
.start-here { margin-bottom: 16px; }
.sh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sh-head h2 { margin: 0; }
.sh-dismiss {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  font-size: .95rem; color: #a89878; line-height: 1; padding: 4px 2px;
}
.sh-dismiss:hover { color: #6b4a1a; }
.sh-intro { font-size: .86rem; color: #6b5942; line-height: 1.55; margin: 8px 0 14px; }
.sh-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sh-steps li { display: flex; gap: 12px; align-items: flex-start; }
.sh-n {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #c99a4d, #a9621c); color: #fff;
  font-size: .8rem; font-weight: 800;
}
.sh-body { flex: 1; min-width: 0; }
.sh-body b { font-size: .92rem; color: #4b2f14; }
.sh-body p { font-size: .82rem; line-height: 1.55; color: #6b5942; margin: 3px 0 7px; }
.sh-go {
  background: rgba(169,98,28,.10); color: #8b4d22;
  border: 1px solid rgba(169,98,28,.28); border-radius: 999px;
  padding: 6px 14px; font-size: .78rem; font-weight: 700; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.sh-go:hover { background: rgba(169,98,28,.18); border-color: rgba(169,98,28,.45); }
.sh-foot {
  font-size: .76rem; color: #9a8672; line-height: 1.5;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed #e6d7bb;
}
/* Marks the two steps that need an account, so the sign-in prompt on those
   buttons is expected rather than a surprise. */
.sh-need {
  display: inline-block; vertical-align: middle;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #8a6d3b;
  background: #f6ecd8; border: 1px solid #e6d7bb; border-radius: 999px;
  padding: 2px 8px; margin-left: 6px; white-space: nowrap;
}

/* ── Saved invitation designs ────────────────────────────────────────────────
   The list in the designer's left rail. Each row is a wide button that reopens
   the design, plus a small delete affordance. */
.inv-saved-list { display: flex; flex-direction: column; gap: 6px; }
.inv-saved-item {
  display: flex; align-items: stretch; gap: 6px;
  border: 1px solid #e6d7bb; border-radius: 10px; background: #fffdf8;
  overflow: hidden;
}
/* The design currently open in the form, so "Save design" updating rather than
   creating is not a surprise. */
.inv-saved-item.is-editing { border-color: #c9a227; background: #fffaf0; }
.inv-saved-open {
  flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: none; border: 0; cursor: pointer; padding: 8px 10px; text-align: left;
  font: inherit; color: inherit; min-width: 0;
}
.inv-saved-open:hover { background: #f6ecd8; }
.inv-saved-name {
  font-size: .84rem; font-weight: 700; color: #3d2718;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-saved-meta { font-size: .68rem; color: #9a8672; text-transform: capitalize; }
.inv-saved-del {
  flex: 0 0 auto; width: 34px; background: none; border: 0; border-left: 1px solid #efe4cd;
  color: #a89878; cursor: pointer; font-size: .8rem;
}
.inv-saved-del:hover { background: #fdf1f0; color: #8a2b22; }

/* ── Describe your event ─────────────────────────────────────────────────────
   One sentence instead of six fields. Sits above the form it fills. */
.inv-describe-row { display: flex; gap: 8px; align-items: stretch; }
.inv-describe-row .inv-input { flex: 1; min-width: 0; }
.inv-describe-btn { white-space: nowrap; flex: 0 0 auto; }
.inv-describe-status {
  margin-top: 7px; font-size: .78rem; line-height: 1.45;
  color: #8a2b22;                     /* trouble by default */
}
.inv-describe-status.is-ok { color: #3f6b32; }
@media (max-width: 620px) {
  /* The button under the field rather than beside it — side by side leaves the
     input too narrow to read back what was typed. */
  .inv-describe-row { flex-direction: column; }
}

/* ── Touch devices: no movement on hover ─────────────────────────────────────
   iOS applies :hover when you tap and keeps it there until you tap something
   else. Any hover that moves an element therefore shifts the layout on every
   tap and leaves it shifted — reported as "little jerks after clicking any
   option" on Safari. The colour and shadow changes are kept, since those read
   as a press; only the movement goes.

   Scoped to (hover: none) so a mouse or trackpad is unaffected. !important
   because these have to beat the original rules whatever their specificity,
   and the block cannot apply on a pointing device. */
@media (hover: none) {
  .btn:hover,
  .btn-secondary:hover,
  .btn-generate:hover,
  .btn-blue-gloss:hover,
  .icon-btn:hover,
  .fam-dash-btn:hover,
  .fam-intro-card:hover,
  .feature-card:hover,
  .inv-thumb:hover,
  .inv-card:hover,
  .inv-modal-close:hover,
  .inv-theme-pill.inv-theme-swatch:hover,
  .hero-actions .btn:hover,
  .nav-dd-trigger:hover,
  .profile-dd-trigger:hover,
  .timeline-feature-btn:hover,
  .occ-popup-dismiss:hover,
  #nani-fab:hover,
  .sh-go:hover,
  .inv-saved-open:hover,
  a:hover,
  button:hover {
    transform: none !important;
  }
  /* The last tapped control keeps :hover until the next tap, so a lingering
     lift here would read as the button still being held. */
  .feature-card:hover .feature-card-arrow { transform: none !important; }
}

/* ── Sections inside the Family tab ──────────────────────────────────────────
   Family, Occasions and Reminders used to be three tabs. They are one chain —
   who is in the family, which days matter to them, and when you are told — so
   they now sit as sections of one tab, divided rather than separated. */
.grp-section { padding: 4px 0 18px; border-bottom: 1px solid #f0e7d6; }
.grp-section:last-child { border-bottom: 0; padding-bottom: 4px; }
.grp-section-title {
  margin: 0 0 12px; font-size: .78rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: #8b6f52;
}
.grp-section-hint {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: .74rem; color: #a89878; margin-left: 8px;
}
/* Reminders is settings: folded until wanted, so it cannot push the two lists
   off the screen. */
.grp-section-fold > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline;
  padding: 8px 0; margin-bottom: 0;
}
.grp-section-fold > summary::-webkit-details-marker { display: none; }
.grp-section-fold > summary::after {
  content: "▾"; margin-left: auto; font-size: .8rem; color: #a89878;
  transition: transform .15s;
}
.grp-section-fold[open] > summary::after { transform: rotate(180deg); }
.grp-section-fold > summary:hover { color: #6d5540; }
.grp-section-fold[open] > summary { margin-bottom: 10px; }

/* ── Touch devices: no backdrop blur ─────────────────────────────────────────
   Safari on iOS collapses its toolbar continuously as you scroll, and every
   resize makes each blurred element in view recompute its backdrop. With
   blurred cards sitting in the hero — and one .hf-icon per bullet — that reads
   as the page glitching while it scrolls. Chrome on iOS runs the same WebKit
   engine but does not collapse its toolbar the same way, which is why it looks
   fine there.

   The blur goes on touch. Anything that leaned on it for legibility gets a more
   opaque background instead, so nothing ends up sitting on bare page. */
@media (hover: none) {
  /* .topbar, .mobile-nav and .sidebar matter most: they are sticky, so they
     stay on screen for the whole scroll and re-blur on every frame the toolbar
     moves. */
  /* .card is the heaviest of the lot — it appears well over a hundred times on
     the page, each instance blurring its backdrop. Its background is already
     94% opaque, so losing the blur costs nothing visually. */
  .card, .modal-box, .share-card-inner, .occasions-panel, .groups-panel, #nani-panel,
  .topbar, .mobile-nav, .sidebar,
  .hero-health-card, .fam-intro-card, .fam-dash, .gm-stat,
  .hf-icon, .fph-upload-btn, .fph-remove-btn,
  .inv-thumb-card, .inv-thumb-badge,
  .inv-card[data-ai-photo="1"] .inv-card-inner,
  .inv-card--cinematic[data-ai-photo="1"] .inv-card-inner,
  #auth-modal, #dup-modal, #share-modal, #tribute-modal, #feedback-modal,
  #tribute-modal .modal-box, .bills-overlay, .inv-modal-overlay,
  .notif-overlay, .occasions-overlay, .share-card-modal,
  #mobile-drawer-backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* These were readable only because of the blur behind them.
     .topbar.is-scrolled is listed because it outranks a bare .topbar on
     specificity, and it is applied exactly while scrolling — so without it the
     header would go translucent again at the only moment that matters. */
  .topbar, .topbar.is-scrolled { background: rgba(255, 253, 248, .97); }
  /* At .92 the page showed through the bottom bar once the blur behind it was
     gone — the blur had been doing the hiding, not the opacity. */
  .mobile-nav       { background: rgba(255, 253, 248, .98); }
  .sidebar          { background: rgba(255, 252, 247, .96); }
  .hero-health-card { background: rgba(255, 253, 248, .95); }
  .fam-intro-card   { background: rgba(255, 253, 248, .96); }
  .gm-stat          { background: rgba(255, 253, 248, .94); }
}

/* ── Reminder Settings ─────────────────────────────────────────────────────
   A settings centre rather than another page of options: two cards, each
   saying what it governs before it offers a control.

   The ceiling and the scrolling body are deliberate from the start — the
   notification panel shipped without them and its Save button sat below the
   fold on every iPhone, unreachable, because a fixed overlay cannot scroll. */
.rs-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(20,8,0,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.rs-overlay.hidden { display: none; }
.rs-panel {
  background: #fffdf4; border-radius: 20px; max-width: 560px; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.32);
  overflow: hidden; display: flex; flex-direction: column;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
}
.rs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #f0e7d6;
  background: linear-gradient(180deg, #fffdf8, #fdf7ea);
}
.rs-header-left { display: flex; align-items: center; gap: 9px; }
.rs-header-icon { font-size: 1.2rem; }
.rs-header-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem; font-weight: 700; color: #3d2718;
}
.rs-close {
  background: none; border: none; font-size: 1rem; color: #9a8672;
  cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.rs-close:hover { background: #f3ead8; color: #3d2718; }
/* min-height: 0 is what lets this scroll — a flex item will not otherwise
   shrink below its content, and the panel would grow past the screen again. */
.rs-body { padding: 18px 20px 22px; overflow-y: auto; min-height: 0; }
.rs-intro { font-size: .84rem; color: #7d6656; line-height: 1.5; margin: 0 0 16px; }

.rs-card {
  border: 1px solid #ece0c9; border-radius: 16px;
  background: #fffefa; padding: 16px 18px; margin-bottom: 14px;
}
.rs-card:last-child { margin-bottom: 0; }
.rs-card-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.rs-card-icon { font-size: 1.35rem; line-height: 1.2; flex-shrink: 0; }
.rs-card-head-text { min-width: 0; }
.rs-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.12rem; font-weight: 700; color: #3d2718; margin: 0 0 3px;
}
.rs-card-desc { font-size: .8rem; color: #7d6656; line-height: 1.5; margin: 0; }


.rs-group-row { margin-bottom: 16px; }
.rs-group-select { width: 100%; max-width: 260px; font-size: .85rem; }
.rs-group-hint { margin-top: 5px; }
.rs-group-note { font-size: .78rem; color: #9a8672; margin: 0 0 14px; }

.rs-save-row { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.rs-save-status { font-size: .82rem; font-weight: 600; color: #5f8b4c; }

@media (max-width: 560px) {
  .rs-overlay { padding: 10px; }
  .rs-panel { max-height: calc(100dvh - 20px); border-radius: 16px; }
  .rs-body { padding: 14px 14px 18px; }
  .rs-card { padding: 14px; }
  /* The chips already wrap; this just keeps the control off the edge. */
  .rs-group-select { max-width: 100%; }
}

/* ── Reminder Status ───────────────────────────────────────────────────────
   Reuses .rs-overlay / .rs-panel so it matches Reminder Settings, with a
   wider panel because this one carries a table. The table scrolls inside its
   own container rather than letting the page scroll sideways. */
.rst-panel { max-width: 760px; }
.rst-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rst-chip {
  font-size: .74rem; font-weight: 600; color: #6b4a1a;
  background: #fffdf6; border: 1px solid #ece0c9;
  border-radius: 999px; padding: 3px 10px;
}
.rst-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rst-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rst-table th {
  text-align: left; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .05em; color: #9a8672; font-weight: 700;
  padding: 6px 12px 6px 0; border-bottom: 1px solid #ece0c9; white-space: nowrap;
}
.rst-table td {
  padding: 9px 12px 9px 0; border-bottom: 1px solid #f4ecdc; vertical-align: top;
}
.rst-table tr:last-child td { border-bottom: none; }
.rst-name { font-weight: 700; color: #3d2718; }
.rst-sub { display: block; font-size: .72rem; color: #9a8672; font-weight: 400; }
.rst-note { font-size: .78rem; color: #a89878; font-style: italic; }
.rst-nowrap { white-space: nowrap; }
/* A paused reminder is still listed, but reads as not currently acting. */
.rst-row--off td { opacity: .6; }
.rst-row--due .rst-name { color: #8a2b22; }

@media (max-width: 560px) {
  .rst-panel { max-width: 100%; }
  .rst-table { font-size: .78rem; }
  .rst-table th, .rst-table td { padding-right: 10px; }
}