/* =========================================================================
   RSVPplease — light-pink design system
   Aesthetic: modern letterpress stationery. Blush paper, raspberry ink,
   high-contrast serif display (Fraunces) + warm grotesque body (Hanken).
   ========================================================================= */

/* ---- Design tokens ---------------------------------------------------- */
:root {
  /* Blush paper / surfaces */
  --paper:        #fff6f4;
  --paper-2:      #fdeef0;
  --surface:      #ffffff;
  --surface-soft: #fff9fa;

  /* Pinks */
  --pink-100: #fff0f3;
  --pink-200: #ffe0e7;
  --pink-300: #ffc9d6;
  --pink-400: #f7a8bd;
  --pink-500: #ef7d9d;

  /* Brand — logo bubble (matches the RSVPplease wordmark + app icon) */
  --brand:      #ec6a92;
  --brand-soft: #fbd0dc;

  /* Raspberry — primary action / ink accent */
  --rose:       #d6336c;
  --rose-deep:  #b81e58;
  --rose-soft:  #fbe4ec;

  /* Ink / text (warm plum-black) */
  --ink:        #36262b;
  --ink-soft:   #6f595f;
  --ink-faint:  #9c868c;

  /* Lines */
  --line:       #f3dde2;
  --line-strong:#e9c9d1;

  /* Status */
  --ok:         #3f9d6b;
  --ok-bg:      #e7f5ed;
  --no:         #c25d6e;
  --no-bg:      #fbe9ec;
  --wait:       #c0871f;
  --wait-bg:    #fbf0d9;

  /* Shadows tuned to pink */
  --shadow-sm: 0 1px 2px rgba(182, 70, 104, .08);
  --shadow:    0 6px 24px -8px rgba(182, 70, 104, .22);
  --shadow-lg: 0 24px 60px -22px rgba(150, 40, 80, .32);

  /* Geometry */
  --r-sm: 9px;
  --r:    16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;

  --maxw: 1120px;
}

/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* Paper atmosphere: faint blush gradient mesh + grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 500px at 8% -8%, var(--pink-200), transparent 60%),
    radial-gradient(800px 600px at 100% 0%, #ffe9ef, transparent 55%),
    radial-gradient(700px 700px at 50% 120%, var(--pink-100), transparent 60%),
    var(--paper);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--rose-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---- Typography ------------------------------------------------------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h3 { font-size: 1.15rem; font-weight: 600; }
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .68rem;
  font-weight: 700;
  color: var(--rose);
}
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---- Wordmark --------------------------------------------------------- */
.wordmark {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.02em;
  display: inline-flex;
  align-items: baseline;
  color: #fff;
  background: var(--brand);
  padding: .3em .56em .36em;
  border-radius: .68em .68em .68em .2em;
  position: relative;
  line-height: 1;
}
.wordmark b { color: rgba(255, 255, 255, .9); font-weight: 700; margin-left: .3em; }
.wordmark .dot { display: none; }
.wordmark::after { /* speech-bubble tail */
  content: "";
  position: absolute; left: .8em; bottom: -.3em;
  border: .32em solid transparent;
  border-top-color: var(--brand);
  border-bottom: 0; border-right: 0;
}

/* ---- Layout primitives ------------------------------------------------ */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.row { display: flex; gap: 12px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.spacer { flex: 1; }
.stack { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.grid { display: grid; gap: 18px; }
.hide { display: none !important; }

/* ---- Top bar ---------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 246, 244, .82);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .container { display: flex; align-items: center; gap: 18px; height: 66px; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: .92rem; font-weight: 600; color: var(--ink-soft);
  padding: 8px 14px; border-radius: var(--r-pill); text-decoration: none;
  transition: background .15s, color .15s;
}
.nav a svg { width: 17px; height: 17px; flex: none; }
.nav a:hover { background: var(--pink-100); color: var(--ink); }
.nav a.active { background: var(--rose-soft); color: var(--rose-deep); }
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-400), var(--rose));
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: .85rem; box-shadow: var(--shadow-sm);
  cursor: pointer; border: 2px solid #fff;
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  --bg: var(--surface); --fg: var(--ink); --bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 650; font-size: .94rem; line-height: 1;
  padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bd); cursor: pointer;
  transition: transform .12s ease, box-shadow .15s, background .15s, filter .15s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.primary {
  --bg: linear-gradient(180deg, var(--rose) 0%, var(--rose-deep) 100%);
  --fg: #fff; --bd: transparent;
  box-shadow: 0 8px 20px -8px rgba(182, 30, 88, .6);
}
.btn.primary:hover { filter: brightness(1.04); box-shadow: 0 12px 26px -8px rgba(182, 30, 88, .6); }
.btn.ghost { --bg: transparent; --bd: transparent; --fg: var(--ink-soft); }
.btn.ghost:hover { background: var(--pink-100); color: var(--ink); }
.btn.soft { --bg: var(--rose-soft); --fg: var(--rose-deep); --bd: transparent; }
.btn.danger { --fg: var(--no); --bd: var(--no-bg); }
.btn.danger:hover { background: var(--no-bg); }
.btn.sm { padding: 8px 13px; font-size: .85rem; }
.btn.lg { padding: 15px 26px; font-size: 1rem; }
.btn.block { width: 100%; }
.btn .ic { width: 17px; height: 17px; }

/* ---- Cards ------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 24px;
}
.card.flat { box-shadow: none; }
.card.pad-0 { padding: 0; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }

/* Decorative perforated edge for invite-style cards */
.ticket { position: relative; overflow: hidden; }
.ticket::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--rose) 0 14px, transparent 14px 28px);
  opacity: .85;
}

/* ---- Forms ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font-size: .82rem; font-weight: 650; color: var(--ink-soft); letter-spacing: .01em; }
.input, .textarea, select.input {
  width: 100%;
  background: var(--surface-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: .96rem;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .textarea:focus, select.input:focus {
  outline: none;
  border-color: var(--pink-500);
  box-shadow: 0 0 0 4px var(--rose-soft);
  background: #fff;
}
.textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.help { font-size: .78rem; color: var(--ink-faint); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* 1fr tracks have an `auto` minimum — an input's intrinsic width can force the
   row wider than its card (the invite card visibly shifted when the hidden
   name/phone row appeared). Let the tracks actually shrink. */
.field-row > .field, .field-row .input { min-width: 0; }

/* ---- Pills / badges --------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 700; letter-spacing: .01em;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--pink-100); color: var(--ink-soft);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ok   { background: var(--ok-bg);   color: var(--ok); }
.pill.no   { background: var(--no-bg);   color: var(--no); }
.pill.wait { background: var(--wait-bg); color: var(--wait); }
.pill.rose { background: var(--rose-soft); color: var(--rose-deep); }

/* ---- Stat chips ------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px;
}
.stat .n { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1; }
.stat .k { font-size: .76rem; font-weight: 650; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-top: 6px; }
.stat.ok .n { color: var(--ok); }
.stat.no .n { color: var(--no); }
.stat.wait .n { color: var(--wait); }

/* ---- Tables ----------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.table td { padding: 13px 14px; border-bottom: 1px solid var(--line); font-size: .92rem; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--surface-soft); }
.table .name { font-weight: 650; }
.tel { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .86rem; }

/* ---- Event cards (dashboard) ----------------------------------------- */
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.event-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 22px; cursor: pointer; text-align: left;
  transition: transform .15s, box-shadow .2s, border-color .2s;
  position: relative; overflow: hidden;
}
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.event-card .date-chip {
  display: inline-flex; flex-direction: column; align-items: center;
  background: var(--rose-soft); color: var(--rose-deep);
  border-radius: 12px; padding: 7px 12px; line-height: 1;
}
.event-card .date-chip .m { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.event-card .date-chip .d { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-top: 3px; }
.progress { height: 8px; background: var(--pink-100); border-radius: var(--r-pill); overflow: hidden; display: flex; }
.progress i { display: block; height: 100%; }
.progress i.ok { background: var(--ok); }
.progress i.no { background: var(--pink-400); }

/* ---- Phone preview (templates) --------------------------------------- */
.phone {
  width: 290px; background: #1d1418; border-radius: 36px; padding: 14px;
  box-shadow: var(--shadow-lg); border: 1px solid #2c1f24; flex: none;
}
.phone .screen { background: #fbf1f3; border-radius: 24px; padding: 16px 14px 22px; min-height: 440px; position: relative; }
.phone .notch { width: 110px; height: 22px; background: #1d1418; border-radius: 0 0 14px 14px; margin: -14px auto 14px; }
.phone .bar { text-align: center; font-size: .72rem; color: var(--ink-faint); font-weight: 700; margin-bottom: 14px; }
.bubble {
  background: #fff; border: 1px solid var(--line); border-radius: 16px 16px 16px 5px;
  padding: 11px 13px; font-size: .86rem; line-height: 1.45; color: var(--ink);
  box-shadow: var(--shadow-sm); margin-bottom: 10px; max-width: 92%;
  white-space: pre-wrap; word-break: break-word;
}
.bubble.out { background: linear-gradient(180deg, var(--pink-300), var(--pink-400)); border: none; border-radius: 16px 16px 5px 16px; margin-left: auto; color: #4a1830; }
.bubble .meta { font-size: .66rem; color: var(--ink-faint); margin-top: 5px; font-weight: 600; }
.bubble.out .meta { color: #7a2b48; }

/* ---- Template editor layout ------------------------------------------ */
.tpl-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.tpl-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tpl-tab {
  font-size: .85rem; font-weight: 650; padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.tpl-tab.active { background: var(--rose); color: #fff; border-color: transparent; }
.var-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.var-chip {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .74rem;
  background: var(--pink-100); color: var(--rose-deep); border: 1px solid var(--pink-200);
  padding: 3px 8px; border-radius: 7px; cursor: pointer;
}
.var-chip:hover { background: var(--pink-200); }

/* ---- Conversation drawer --------------------------------------------- */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(54, 38, 43, .42);
  backdrop-filter: blur(2px); z-index: 50; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw);
  background: var(--paper); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg); z-index: 51;
  transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head { padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.drawer-foot { padding: 14px 18px; border-top: 1px solid var(--line); }

/* ---- Modal ------------------------------------------------------------ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(54, 38, 43, .45);
  backdrop-filter: blur(3px); z-index: 60; display: grid; place-items: center;
  padding: 22px; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--paper); border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  transform: translateY(10px) scale(.98); transition: transform .2s;
}
.modal-overlay.open .modal { transform: none; }
.modal-head { padding: 22px 24px 0; }
.modal-body { padding: 18px 24px; display: flex; flex-direction: column; gap: 16px; }
.modal-foot { padding: 6px 24px 22px; display: flex; gap: 10px; justify-content: flex-end; }

/* ---- Toast ------------------------------------------------------------ */
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast {
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-pill);
  font-size: .9rem; font-weight: 600; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 9px;
  animation: toast-in .25s ease both;
}
.toast.ok { background: linear-gradient(180deg, #45a874, var(--ok)); }
.toast.err { background: linear-gradient(180deg, #d2536a, var(--rose-deep)); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- Notices ---------------------------------------------------------- */
.notice {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px dashed var(--line-strong);
  border-radius: var(--r); padding: 14px 16px; font-size: .88rem; color: var(--ink-soft);
}
.notice .ic { color: var(--rose); flex: none; margin-top: 1px; }
.notice.rose { background: var(--rose-soft); border-color: transparent; }

/* ---- Empty states ----------------------------------------------------- */
.empty { text-align: center; padding: 56px 24px; }
.empty .art { width: 60px; height: 60px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--rose-soft); color: var(--rose); opacity: 1; }
.empty .art svg { width: 30px; height: 30px; }
.empty h3 { margin-bottom: 6px; }
.empty p { color: var(--ink-soft); max-width: 420px; margin: 0 auto 18px; }

/* ---- Price breakdown -------------------------------------------------- */
.price-line { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: .94rem; }
.price-line.total { border-bottom: none; padding-top: 16px; font-size: 1.05rem; font-weight: 700; }
.price-line.total .amt { font-family: var(--font-display); font-size: 1.8rem; color: var(--rose-deep); }

/* ---- Auth / public hero ---------------------------------------------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(420px, 100%); }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--rose-deep); text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:hover { color: var(--rose); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ink-faint); font-size: .82rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---- Sections --------------------------------------------------------- */
.page { padding: 32px 0 80px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.crumb { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 10px; }
.crumb:hover { color: var(--rose-deep); }

/* Reveal-on-load stagger */
.reveal { opacity: 0; transform: translateY(10px); animation: reveal .5s ease forwards; }
.reveal:nth-child(2) { animation-delay: .05s; }
.reveal:nth-child(3) { animation-delay: .1s; }
.reveal:nth-child(4) { animation-delay: .15s; }
@keyframes reveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  * { scroll-behavior: auto !important; }
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 860px) {
  .tpl-grid { grid-template-columns: 1fr; }
  .phone { margin: 0 auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .nav { display: none; }
}

/* ---- Landing page (imported "Rally" design · petal palette) ----------- */
/* Tokens scoped to .lp-root so they never touch the dashboard's tokens. */
.lp-root{
  --brand-primary:#E58AA9; --brand-primary-hover:#D2779A; --brand-primary-press:#B86081;
  --brand-soft:#FBE6EE; --brand-soft-2:#F4CFDD; --brand-ink:#243763; --brand-ink-strong:#15223F;
  --surface-page:#FCFAFB; --surface-card:#FFFFFF; --surface-sunken:#F5F0EC; --surface-ink:#1B2747; --surface-brand:#FCEFF4;
  --text-body:#25355F; --text-muted:#4A5C85; --text-subtle:#8C7F75; --text-on-ink:#EAF0FF;
  --border-subtle:#ECE4DE; --border-base:#DBD0C8; --border-brand:#F1D4E0;
  --ink-50:#EEF1F7; --green-500:#3FA66E; --accent-gold:#F0C277;
  --lp-display:'Bricolage Grotesque','DM Sans',sans-serif;
  --lp-body:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --lp-script:'Caveat',cursive;
  --radius-lg:20px; --radius-xl:28px; --radius-2xl:36px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(37,53,95,.06);
  --shadow-sm:0 2px 6px rgba(37,53,95,.07),0 1px 2px rgba(37,53,95,.05);
  --shadow-md:0 8px 20px rgba(37,53,95,.09),0 2px 6px rgba(37,53,95,.06);
  --shadow-lg:0 18px 40px rgba(37,53,95,.12),0 4px 12px rgba(37,53,95,.07);
  --shadow-xl:0 30px 70px rgba(37,53,95,.16),0 8px 20px rgba(37,53,95,.08);
  --shadow-brand-sm:0 6px 16px rgba(232,92,134,.24);
  --dur-base:.18s; --ease-out:cubic-bezier(.2,.7,.2,1);
  font-family:var(--lp-body); color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.lp-root *{box-sizing:border-box;}
.lp-container{max-width:1180px;margin:0 auto;padding:0 32px;}

/* buttons */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--lp-body);
  font-weight:600;border-radius:var(--radius-pill);cursor:pointer;border:1.5px solid transparent;
  transition:transform .12s var(--ease-out),box-shadow .16s,background .16s,color .16s;text-decoration:none;white-space:nowrap;}
.lp-btn:hover{transform:translateY(-1px);}
.lp-btn--primary{background:var(--brand-primary);color:#fff;box-shadow:var(--shadow-brand-sm);}
.lp-btn--primary:hover{background:var(--brand-primary-hover);}
.lp-btn--outline{background:var(--surface-card);border-color:var(--border-base);color:var(--brand-ink-strong);}
.lp-btn--outline:hover{border-color:var(--brand-primary);color:var(--brand-primary-press);}
.lp-btn--ghost{background:transparent;color:var(--text-muted);}
.lp-btn--ghost:hover{color:var(--brand-ink-strong);background:var(--brand-soft);}
.lp-btn--sm{padding:9px 16px;font-size:14px;}
.lp-btn--lg{padding:15px 26px;font-size:16px;}

/* avatars */
.lp-av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;
  font-weight:700;font-size:12px;border:2px solid var(--surface-card);background:var(--brand-primary);flex:none;}
.lp-avstack{display:flex;}
.lp-avstack .lp-av{margin-left:-10px;}
.lp-avstack .lp-av:first-child{margin-left:0;}

/* nav */
.lp-nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface-page) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);}
.lp-nav__inner{display:flex;align-items:center;gap:28px;height:72px;}
.lp-nav__links{display:flex;gap:26px;margin-left:8px;}
.lp-nav__cta{margin-left:auto;display:flex;align-items:center;gap:8px;}
.lp-link{font-size:15px;font-weight:500;color:var(--text-muted);text-decoration:none;background:none;border:0;cursor:pointer;font-family:var(--lp-body);transition:color var(--dur-base) var(--ease-out);}
.lp-link:hover{color:var(--brand-primary-press);}

/* brand logo — pink speech bubble with a clean attached tail */
.lp-logo{display:inline-flex;align-items:center;text-decoration:none;}
.lp-logo__b{position:relative;display:inline-flex;align-items:baseline;background:var(--brand-primary);color:#fff;
  border-radius:.7em .7em .7em .16em;padding:.16em .5em .2em;font-family:var(--lp-display);font-weight:800;
  font-size:23px;letter-spacing:-.02em;line-height:1;}
.lp-logo__b .pls{font-weight:600;opacity:.9;margin-left:.34em;}
.lp-logo__b::after{content:"";position:absolute;left:.42em;bottom:-.26em;border:.3em solid transparent;
  border-top-color:var(--brand-primary);border-bottom:0;border-right:0;}

/* shared type */
.lp-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:.02em;
  color:var(--brand-primary-press);background:var(--brand-soft);padding:7px 14px;border-radius:var(--radius-pill);}
.lp-eyebrow svg{color:var(--brand-primary);}
.lp-eyebrow--center{margin:0 auto;}
.lp-eyebrow--ink{background:rgba(255,255,255,.12);color:#fff;}
.lp-eyebrow--ink svg{color:var(--accent-gold);}
.lp-h1{font-family:var(--lp-display);font-weight:800;font-size:clamp(40px,5.2vw,68px);line-height:1.04;
  letter-spacing:-.025em;color:var(--brand-ink-strong);margin:20px 0 0;text-wrap:balance;}
.lp-h2{font-family:var(--lp-display);font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.1;
  letter-spacing:-.02em;color:var(--brand-ink-strong);margin:14px 0 0;text-wrap:balance;}
.lp-h2--light{color:#fff;}
.lp-lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--text-muted);margin:20px 0 0;max-width:32em;}
.lp-underline{position:relative;color:var(--brand-primary);white-space:nowrap;}
.lp-underline::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.04em;height:.34em;
  background:var(--brand-soft-2);border-radius:var(--radius-pill);z-index:-1;}

/* hero */
.lp-hero{padding:clamp(40px,6vw,84px) 0 clamp(48px,7vw,96px);position:relative;}
.lp-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 88% 0%,var(--brand-soft) 0%,transparent 60%);}
.lp-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.lp-hero__cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;}
.lp-hero__cta--center{justify-content:center;margin-top:24px;}
.lp-trust{display:flex;align-items:center;gap:14px;margin-top:30px;font-size:14px;color:var(--text-muted);}
.lp-trust b{color:var(--brand-ink-strong);}
.lp-freeline{display:flex;align-items:center;gap:7px;margin:16px 0 0;font-size:13.5px;font-weight:500;color:var(--text-muted);}
.lp-freeline svg{flex:none;color:var(--brand-primary);}

/* hero art */
.lp-art{position:relative;height:480px;}
.lp-invite{position:absolute;top:14px;left:6%;width:300px;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);padding:26px 26px 22px;transform:rotate(-4deg);}
.lp-invite__ribbon{font-family:var(--lp-script);font-size:32px;font-weight:700;color:var(--brand-primary);line-height:1;margin-bottom:12px;}
.lp-invite__kicker{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--text-subtle);margin:0 0 6px;}
.lp-invite__title{font-family:var(--lp-display);font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.02em;color:var(--brand-ink-strong);margin:0 0 16px;}
.lp-invite__meta{display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--text-muted);}
.lp-invite__meta span{display:flex;align-items:center;gap:8px;}
.lp-invite__meta svg{color:var(--brand-primary);flex:none;}
.lp-invite__foot{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border-subtle);}
.lp-invite__count{font-size:13px;font-weight:600;color:var(--brand-ink);}
.lp-sms{position:absolute;right:2%;top:54px;width:248px;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:16px;transform:rotate(3deg);}
.lp-sms__head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text-subtle);margin-bottom:12px;}
.lp-sms__dot{width:8px;height:8px;border-radius:50%;background:var(--green-500);}
.lp-sms__bubble{font-size:13.5px;line-height:1.42;padding:10px 13px;border-radius:16px;margin-bottom:8px;max-width:90%;}
.lp-sms__bubble--in{background:var(--surface-sunken);color:var(--text-body);border-bottom-left-radius:5px;}
.lp-sms__bubble--out{background:var(--brand-primary);color:#fff;border-bottom-right-radius:5px;margin-left:auto;}
.lp-sms__bubble b{font-weight:700;}
.lp-chip{position:absolute;left:0;bottom:30px;display:flex;align-items:center;gap:9px;background:var(--brand-ink-strong);
  color:#fff;font-size:13px;font-weight:600;padding:11px 16px;border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);}
.lp-chip b{color:var(--accent-gold);}
.lp-chip__check{display:flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:50%;background:var(--green-500);color:#fff;}

/* sections */
.lp-section{padding:clamp(48px,6vw,88px) 0;}
.lp-section--tight{padding:clamp(24px,3vw,40px) 0;}
.lp-section__head{text-align:center;max-width:680px;margin:0 auto 46px;display:flex;flex-direction:column;align-items:center;}

/* features */
.lp-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.lp-feat{display:flex;flex-direction:column;align-items:flex-start;background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:28px;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);}
.lp-feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.lp-feat__icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--radius-lg);margin-bottom:18px;}
.lp-feat__icon--pink{background:var(--brand-soft);color:var(--brand-primary-press);}
.lp-feat__icon--navy{background:var(--ink-50);color:var(--brand-ink);}
.lp-feat__icon--gold{background:#FBE8CF;color:#9A6B16;}
.lp-feat__title{font-family:var(--lp-display);font-weight:700;font-size:21px;color:var(--brand-ink-strong);margin:0 0 8px;}
.lp-feat__body{font-size:15px;line-height:1.6;color:var(--text-muted);margin:0;}

/* steps */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.lp-step{display:flex;gap:14px;align-items:flex-start;}
.lp-step__n{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:var(--brand-primary);color:#fff;font-family:var(--lp-display);font-weight:800;font-size:17px;box-shadow:var(--shadow-brand-sm);}
.lp-step__t{font-family:var(--lp-display);font-weight:700;font-size:18px;color:var(--brand-ink-strong);margin:6px 0 4px;}
.lp-step__d{font-size:14.5px;line-height:1.55;color:var(--text-muted);margin:0;}

/* nudge band */
.lp-band{background:var(--surface-ink);color:#fff;padding:clamp(52px,6vw,92px) 0;
  background-image:radial-gradient(70% 90% at 100% 0%,rgba(229,138,169,.22) 0%,transparent 55%);}
.lp-band__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.lp-band__lede{font-size:17px;line-height:1.65;color:var(--text-on-ink);opacity:.86;margin:18px 0 0;max-width:30em;}
.lp-band__stats{display:flex;gap:32px;margin-top:30px;flex-wrap:wrap;}
.lp-band__stats strong{display:block;font-family:var(--lp-display);font-weight:800;font-size:32px;color:#fff;}
.lp-band__stats span{font-size:13px;color:var(--text-on-ink);opacity:.7;}
.lp-thread{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-2xl);padding:22px;backdrop-filter:blur(4px);}
.lp-thread__row{display:flex;gap:10px;align-items:flex-end;margin-bottom:12px;}
.lp-thread__row--out{flex-direction:row-reverse;}
.lp-thread__msg{font-size:14px;line-height:1.45;padding:11px 14px;border-radius:16px;max-width:78%;background:rgba(255,255,255,.12);color:#fff;border-bottom-left-radius:5px;}
.lp-thread__msg--out{background:var(--brand-primary);border-bottom-left-radius:16px;border-bottom-right-radius:5px;}
.lp-thread__synced{display:flex;justify-content:center;margin-top:6px;}
.lp-badge-going{display:inline-flex;align-items:center;gap:6px;background:rgba(63,166,110,.18);color:#a9e8c5;
  border:1px solid rgba(63,166,110,.35);font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:var(--radius-pill);}

/* final cta */
.lp-final{text-align:center;padding:clamp(40px,5vw,68px) 32px;background:var(--surface-brand);
  border:1px solid var(--border-brand);border-radius:var(--radius-2xl);}
.lp-final__sub{font-size:17px;color:var(--text-muted);margin:14px 0 0;}

/* footer */
.lp-footer{background:var(--surface-card);border-top:1px solid var(--border-subtle);padding:56px 0 32px;}
.lp-footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;}
.lp-footer__tag{font-size:14px;color:var(--text-muted);margin:14px 0 0;max-width:22em;}
.lp-footer__col{display:flex;flex-direction:column;gap:10px;}
.lp-footer__col h5{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--brand-ink-strong);text-transform:uppercase;margin:0 0 4px;}
.lp-footer__bar{display:flex;justify-content:space-between;margin-top:40px;padding-top:22px;border-top:1px solid var(--border-subtle);font-size:13px;color:var(--text-subtle);flex-wrap:wrap;gap:8px;}

/* reveal animations */
.lp-reveal{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.lp-root.lp-animate .lp-reveal{opacity:0;transform:translateY(26px);}
.lp-root.lp-animate .lp-reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:no-preference){
  .lp-invite{animation:lp-float-a 6s ease-in-out 1s infinite;}
  .lp-sms{animation:lp-float-b 6.6s ease-in-out 1.4s infinite;}
  .lp-chip{animation:lp-float-c 5.2s ease-in-out 1.2s infinite;}
}
@keyframes lp-float-a{0%,100%{transform:rotate(-4deg) translateY(0);}50%{transform:rotate(-4deg) translateY(-12px);}}
@keyframes lp-float-b{0%,100%{transform:rotate(3deg) translateY(0);}50%{transform:rotate(3deg) translateY(-10px);}}
@keyframes lp-float-c{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

@media (max-width:900px){
  .lp-hero__grid,.lp-band__grid{grid-template-columns:1fr;gap:36px;}
  .lp-art{height:430px;margin-top:8px;}
  .lp-feat-grid,.lp-steps{grid-template-columns:1fr;}
  .lp-footer__grid{grid-template-columns:1fr 1fr;}
  /* keep the page links visible on narrow screens — wrap to a 2nd row */
  .lp-nav__inner{flex-wrap:wrap;height:auto;padding:10px 0;row-gap:10px;}
  .lp-nav__links{order:3;width:100%;justify-content:center;gap:8px 18px;font-size:14px;flex-wrap:wrap;margin-left:0;}
  .lp-nav__cta{margin-left:auto;}
}
@media (max-width:600px){
  /* Hero art: stop the invite / SMS / chip cards overlapping — stack them. */
  .lp-art{height:auto;position:static;display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:8px;}
  .lp-invite,.lp-sms{position:static;top:auto;left:auto;right:auto;width:100%;max-width:340px;}
  .lp-chip{position:static;align-self:center;}
  .lp-invite,.lp-sms,.lp-chip{animation:none;}
}
@media (max-width:560px){
  .lp-hide-sm{display:none;}
  .lp-band__stats{gap:20px;}
  /* Nav links: keep all five on-screen without clipping. */
  .lp-nav__links{gap:6px 14px;font-size:13.5px;}
}

/* ---- Utilities -------------------------------------------------------- */
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.text-c{text-align:center}.w-100{width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---- Marketing pages (imported design · .mk-*) ----------------------- */
/* Rally marketing — extra page styles (.mk-*). Builds on landing.css + tokens. */

.mk-logolink{display:inline-flex;text-decoration:none;}
.mk-link--active{color:var(--brand-ink-strong);font-weight:600;}

/* ---------- page hero ---------- */
.mk-phero{position:relative;padding:clamp(40px,5vw,72px) 0 clamp(24px,3vw,40px);}
.mk-phero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(54% 80% at 50% -10%, var(--brand-soft) 0%, transparent 62%);}
.mk-phero__inner{position:relative;z-index:1;max-width:760px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;}
.mk-phero__lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--text-muted);margin:18px 0 0;max-width:34em;}
.mk-phero__cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;justify-content:center;}

/* ---------- walkthrough (How it works) ---------- */
.mk-walk{display:flex;flex-direction:column;gap:clamp(40px,6vw,84px);}
.mk-wstep{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.mk-wstep:nth-child(even) .mk-wstep__media{order:-1;}
.mk-wstep__badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--lp-display);
  font-weight:800;font-size:14px;color:var(--brand-primary-press);background:var(--brand-soft);
  padding:7px 14px 7px 8px;border-radius:var(--radius-pill);}
.mk-wstep__badge i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--brand-primary);color:#fff;font-style:normal;font-size:13px;}
.mk-wstep__t{font-family:var(--lp-display);font-weight:800;font-size:clamp(26px,2.6vw,34px);
  line-height:1.1;letter-spacing:-.02em;color:var(--brand-ink-strong);margin:16px 0 0;}
.mk-wstep__d{font-size:16.5px;line-height:1.6;color:var(--text-muted);margin:14px 0 0;max-width:30em;}
.mk-wlist{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:11px;}
.mk-wlist li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--text-body);line-height:1.5;}
.mk-wlist__ic{flex:none;margin-top:1px;display:flex;align-items:center;justify-content:center;width:21px;height:21px;
  border-radius:50%;background:var(--brand-soft);color:var(--brand-primary-press);}

/* media frame shared by walkthrough + templates */
.mk-frame{position:relative;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);padding:24px;overflow:hidden;}
.mk-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 0%, color-mix(in srgb,var(--brand-soft) 50%,transparent) 0%, transparent 60%);}
.mk-frame__body{position:relative;z-index:1;}

/* a mini "designer canvas" graphic for step 1 */
.mk-canvas{display:flex;flex-direction:column;gap:14px;}
.mk-canvas__bar{display:flex;gap:8px;align-items:center;}
.mk-swatch{width:22px;height:22px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
.mk-canvas__title{font-family:var(--lp-display);font-weight:800;font-size:26px;color:var(--brand-ink-strong);letter-spacing:-.02em;}
.mk-canvas__line{height:11px;border-radius:6px;background:var(--surface-sunken);}
.mk-fontchip{font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--radius-pill);
  background:var(--surface-sunken);color:var(--text-muted);border:1px solid var(--border-subtle);}

/* phone-ish send graphic for step 2 */
.mk-phone{margin:0 auto;width:230px;background:var(--brand-ink-strong);border-radius:34px;padding:12px;box-shadow:var(--shadow-xl);}
.mk-phone__screen{background:var(--surface-card);border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:10px;}
.mk-phone__hd{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-subtle);}
.mk-phone__dot{width:7px;height:7px;border-radius:50%;background:var(--green-500);}
.mk-bub{font-size:13px;line-height:1.4;padding:9px 12px;border-radius:14px;max-width:88%;}
.mk-bub--in{background:var(--surface-sunken);color:var(--text-body);border-bottom-left-radius:5px;}
.mk-bub--out{background:var(--brand-primary);color:#fff;border-bottom-right-radius:5px;margin-left:auto;}

/* ---------- FAQ ---------- */
.mk-faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.mk-faq__item{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);
  padding:4px 20px;transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);}
.mk-faq__item[open]{box-shadow:var(--shadow-sm);border-color:var(--border-brand);}
.mk-faq__q{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  list-style:none;padding:18px 0;font-family:var(--lp-display);font-weight:700;font-size:17.5px;color:var(--brand-ink-strong);}
.mk-faq__q::-webkit-details-marker{display:none;}
.mk-faq__plus{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand-primary-press);transition:transform var(--dur-base) var(--ease-out);}
.mk-faq__item[open] .mk-faq__plus{transform:rotate(45deg);}
.mk-faq__a{font-size:15.5px;line-height:1.65;color:var(--text-muted);margin:0;padding:0 0 20px;max-width:60ch;}

/* ---------- templates ---------- */
.mk-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px;}
.mk-chip{appearance:none;border:1px solid var(--border-base);background:var(--surface-card);
  color:var(--text-muted);font-family:inherit;font-size:14px;font-weight:600;padding:9px 16px;
  border-radius:var(--radius-pill);cursor:pointer;transition:all var(--dur-base) var(--ease-out);}
.mk-chip:hover{border-color:var(--brand-primary);color:var(--brand-ink-strong);}
.mk-chip[aria-pressed="true"]{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;}
.mk-tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.mk-tpl{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border-subtle);
  background:var(--surface-card);box-shadow:var(--shadow-xs);cursor:pointer;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);}
.mk-tpl:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.mk-tpl__art{position:relative;aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:center;
  padding:26px;color:#fff;background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.18) 0%, transparent 45%),
    linear-gradient(150deg, var(--c1), var(--c2));}
.mk-tpl__kicker{font-family:var(--lp-script);font-size:24px;line-height:1;opacity:.95;margin-bottom:6px;}
.mk-tpl__title{font-family:var(--lp-display);font-weight:800;font-size:24px;line-height:1.05;letter-spacing:-.02em;text-wrap:balance;}
.mk-tpl__meta{margin-top:14px;font-size:12.5px;font-weight:600;opacity:.92;display:flex;gap:8px;align-items:center;}
.mk-tpl__use{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.92);color:#1b2747;padding:6px 11px;border-radius:var(--radius-pill);opacity:0;transform:translateY(-4px);
  transition:all var(--dur-base) var(--ease-out);}
.mk-tpl:hover .mk-tpl__use{opacity:1;transform:none;}
.mk-tpl__foot{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;}
.mk-tpl__cat{font-size:13px;font-weight:600;color:var(--brand-ink-strong);}
.mk-tpl__tag{font-size:12px;color:var(--text-subtle);}

/* ---------- pricing ---------- */
.mk-bill{display:inline-flex;align-items:center;gap:10px;margin:6px auto 0;padding:5px;border-radius:var(--radius-pill);
  background:var(--surface-sunken);border:1px solid var(--border-subtle);}
.mk-bill button{appearance:none;border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:600;
  color:var(--text-muted);padding:8px 16px;border-radius:var(--radius-pill);cursor:pointer;transition:all var(--dur-base) var(--ease-out);}
.mk-bill button[aria-pressed="true"]{background:var(--surface-card);color:var(--brand-ink-strong);box-shadow:var(--shadow-xs);}
.mk-bill__save{font-size:12px;font-weight:700;color:var(--brand-primary-press);background:var(--brand-soft);padding:3px 9px;border-radius:var(--radius-pill);}
.mk-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;margin-top:40px;}
.mk-tier{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-2xl);padding:30px 28px;box-shadow:var(--shadow-xs);}
.mk-tier--feat{border-color:var(--brand-primary);box-shadow:var(--shadow-lg);position:relative;}
.mk-tier__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:#fff;
  background:var(--brand-primary);padding:6px 14px;border-radius:var(--radius-pill);box-shadow:var(--shadow-brand-sm);white-space:nowrap;}
.mk-tier__name{font-family:var(--lp-display);font-weight:800;font-size:21px;color:var(--brand-ink-strong);}
.mk-tier__desc{font-size:14px;color:var(--text-muted);margin:6px 0 0;min-height:40px;}
.mk-tier__price{display:flex;align-items:flex-end;gap:4px;margin:18px 0 2px;}
.mk-tier__amt{font-family:var(--lp-display);font-weight:800;font-size:46px;line-height:1;letter-spacing:-.03em;color:var(--brand-ink-strong);}
.mk-tier__per{font-size:14px;color:var(--text-muted);padding-bottom:6px;}
.mk-tier__note{font-size:12.5px;color:var(--text-subtle);min-height:18px;}
.mk-tier__cta{margin:22px 0 8px;}
.mk-tier__feats{list-style:none;padding:18px 0 0;margin:18px 0 0;border-top:1px solid var(--border-subtle);
  display:flex;flex-direction:column;gap:12px;}
.mk-tier__feats li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--text-body);line-height:1.45;}
.mk-tier__feats svg{flex:none;margin-top:2px;color:var(--brand-primary);}
.mk-tier__feats li.is-off{color:var(--text-subtle);}
.mk-tier__feats li.is-off svg{color:var(--border-base);}

/* ---------- stories ---------- */
.mk-feature{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  background:var(--surface-brand);border:1px solid var(--border-brand);border-radius:var(--radius-2xl);
  padding:clamp(28px,4vw,52px);}
.mk-feature__quote{font-family:var(--lp-display);font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.25;
  letter-spacing:-.015em;color:var(--brand-ink-strong);margin:18px 0 0;text-wrap:balance;}
.mk-feature__by{display:flex;align-items:center;gap:13px;margin-top:26px;}
.mk-feature__name{font-weight:700;font-size:15px;color:var(--brand-ink-strong);}
.mk-feature__event{font-size:13px;color:var(--text-muted);}
.mk-story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
.mk-story{display:flex;flex-direction:column;gap:14px;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-xs);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);}
.mk-story:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.mk-story__metric{font-family:var(--lp-display);font-weight:800;font-size:30px;letter-spacing:-.02em;color:var(--brand-primary);}
.mk-story__q{font-size:15.5px;line-height:1.6;color:var(--brand-ink-strong);margin:0;flex:1;text-wrap:pretty;}
.mk-story__by{display:flex;align-items:center;gap:11px;padding-top:6px;}
.mk-story__name{font-weight:700;font-size:13.5px;color:var(--brand-ink-strong);}
.mk-story__event{font-size:12px;color:var(--text-muted);}

/* responsive */
@media (max-width:900px){
  .mk-wstep,.mk-feature{grid-template-columns:1fr;gap:32px;}
  .mk-wstep:nth-child(even) .mk-wstep__media{order:0;}
  .mk-tpl-grid,.mk-tiers,.mk-story-grid{grid-template-columns:1fr;}
}
@media (min-width:601px) and (max-width:900px){
  .mk-tpl-grid,.mk-story-grid{grid-template-columns:1fr 1fr;}
}

/* ---- Pricing calculator (imported design) ---------------------------- */
.mk-calc{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:stretch;}
.mk-calc__left{display:flex;flex-direction:column;}
.mk-calc__count{display:flex;align-items:baseline;gap:10px;margin:26px 0 12px;}
.mk-calc__count strong{font-family:var(--lp-display);font-weight:800;font-size:54px;line-height:1;letter-spacing:-.03em;color:var(--brand-ink-strong);font-variant-numeric:tabular-nums;}
.mk-calc__count span{font-size:16px;font-weight:600;color:var(--text-muted);}
.mk-calc__range{appearance:none;-webkit-appearance:none;width:100%;height:8px;border-radius:999px;outline:none;background-color:var(--surface-sunken);}
.mk-calc__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--brand-primary);border:3px solid var(--surface-card);box-shadow:var(--shadow-md);cursor:pointer;}
.mk-calc__range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--brand-primary);border:3px solid var(--surface-card);box-shadow:var(--shadow-md);cursor:pointer;}
.mk-calc__scale{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--text-subtle);}
.mk-calc__card{background:var(--surface-card);border:1px solid var(--border-brand);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);padding:30px 28px;display:flex;flex-direction:column;}
.mk-calc__total{display:flex;align-items:flex-start;justify-content:center;gap:2px;}
.mk-calc__cur{font-family:var(--lp-display);font-weight:800;font-size:30px;line-height:1.2;color:var(--brand-primary);}
.mk-calc__amt{font-family:var(--lp-display);font-weight:800;font-size:72px;line-height:1;letter-spacing:-.03em;color:var(--brand-ink-strong);font-variant-numeric:tabular-nums;}
.mk-calc__sub{text-align:center;font-size:13.5px;color:var(--text-muted);margin-top:4px;}
.mk-calc__break{list-style:none;padding:18px 0 0;margin:18px 0 0;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:11px;}
.mk-calc__break li{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--text-muted);}
.mk-calc__break li span:last-child{font-weight:600;color:var(--brand-ink);font-variant-numeric:tabular-nums;}
.mk-calc__break--sum{padding-top:11px;border-top:1px dashed var(--border-base);font-size:15.5px;font-weight:700;}
.mk-calc__break--sum span{color:var(--brand-ink-strong)!important;}
.mk-calc__fine{font-size:12px;color:var(--text-subtle);text-align:center;margin:12px 0 0;}
.mk-inc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px;max-width:760px;margin:0 auto;}
.mk-inc{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--text-body);line-height:1.45;}
.mk-inc__ic{flex:none;margin-top:1px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand-primary-press);}
@media (max-width:900px){.mk-calc{grid-template-columns:1fr;gap:28px;}.mk-inc-grid{grid-template-columns:1fr;}}

/* ===== Section alt band (marketing) ===== */
.lp-section--alt{background:var(--surface-sunken);}

/* ===== Pricing tiers (Free vs SMS) ===== */
.mk-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px;margin:0 auto;align-items:stretch;}
.mk-tier{position:relative;display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-base);
  border-radius:var(--radius-2xl);padding:32px 28px;box-shadow:var(--shadow-sm);}
.mk-tier--featured{border-color:var(--brand-primary);box-shadow:var(--shadow-lg);}
.mk-tier__badge{position:absolute;top:-13px;left:28px;background:var(--brand-primary);color:#fff;font-size:12px;font-weight:700;
  padding:5px 13px;border-radius:var(--radius-pill);box-shadow:var(--shadow-brand-sm);}
.mk-tier__name{font-family:var(--lp-display);font-weight:700;font-size:15px;color:var(--brand-ink-strong);}
.mk-tier__price{font-family:var(--lp-display);font-weight:800;font-size:clamp(38px,4.4vw,52px);line-height:1;color:var(--brand-ink-strong);margin:12px 0 2px;}
.mk-tier__per{font-size:18px;font-weight:600;color:var(--text-muted);}
.mk-tier__sub{font-size:14px;color:var(--text-muted);margin:0 0 22px;}
.mk-tier__feats{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:11px;}
.mk-tier__feats li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--text-body);line-height:1.45;}
.mk-tier__feats .mk-inc__ic{width:21px;height:21px;}

/* ===== About page ===== */
.mk-abt{display:flex;flex-direction:column;gap:clamp(48px,6vw,80px);}
.mk-abt__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,60px);align-items:center;}
.mk-abt__copy{min-width:0;}
.mk-abt__eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--brand-primary-press);margin-bottom:12px;}
.mk-abt__eyebrow svg{color:var(--brand-primary);}
.mk-abt__t{font-family:var(--lp-display);font-weight:700;font-size:clamp(26px,3vw,36px);line-height:1.15;color:var(--brand-ink-strong);margin:0 0 14px;}
.mk-abt__d{font-size:16.5px;line-height:1.65;color:var(--text-muted);margin:0 0 12px;}
.mk-abt__d em{color:var(--brand-primary-press);font-style:normal;font-weight:600;}
.mk-abt__media{display:flex;justify-content:center;min-width:0;}
.mk-abt__photo{width:100%;max-width:300px;height:auto;aspect-ratio:3/4;border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);object-fit:cover;}
.mk-abt__sign{font-family:var(--lp-script);font-size:27px;color:var(--brand-primary-press);margin:8px 0 0;}

/* spreadsheet-chaos graphic */
.mk-sheet-wrap{position:relative;padding:6px 10px 22px;}
.mk-sheet{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md);font-size:13.5px;}
.mk-sheet__top{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--surface-sunken);border-bottom:1px solid var(--border-subtle);}
.mk-sheet__top span{width:9px;height:9px;border-radius:50%;background:var(--border-base);}
.mk-sheet__top em{margin-left:8px;font-style:normal;font-size:11.5px;color:var(--text-subtle);}
.mk-sheet__row{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border-subtle);}
.mk-sheet__name{color:var(--text-body);}
.mk-sheet__cell{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
.mk-sheet__cell--yes{background:#E7F5EC;color:var(--green-500);}
.mk-sheet__cell--no{background:var(--brand-soft);color:var(--brand-primary-press);}
.mk-sheet__cell--q{background:#FFF3D6;color:#B4820E;}
.mk-sheet__total{padding:11px 14px;font-size:13.5px;color:var(--text-muted);}
.mk-sheet__total s{opacity:.55;}
.mk-note{position:absolute;right:-4px;bottom:0;transform:rotate(6deg);background:#FFF3D6;color:#7A5A12;font-family:var(--lp-script);
  font-size:19px;line-height:1.15;padding:9px 14px;border-radius:4px;box-shadow:var(--shadow-md);}
.mk-abt-count{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:2px;font-size:11.5px;font-weight:700;
  color:var(--green-500);background:#E7F5EC;padding:5px 10px;border-radius:var(--radius-pill);}
.mk-abt-count svg{color:var(--green-500);}

/* "still a student" note card */
.mk-abt-note{max-width:660px;margin:0 auto;text-align:center;background:var(--surface-card);border:1px solid var(--border-brand);
  border-radius:var(--radius-2xl);padding:clamp(32px,4vw,48px);box-shadow:var(--shadow-sm);}
.mk-abt-note__ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand-primary-press);margin-bottom:14px;}
.mk-abt-note__t{font-family:var(--lp-display);font-weight:700;font-size:clamp(24px,2.6vw,32px);color:var(--brand-ink-strong);margin:0 0 12px;}
.mk-abt-note__d{font-size:16.5px;line-height:1.65;color:var(--text-muted);margin:0 auto;max-width:48ch;}

@media (max-width:820px){
  .mk-tiers{grid-template-columns:1fr;max-width:440px;}
  .mk-abt__row{grid-template-columns:1fr;gap:28px;}
  .mk-abt__media{order:-1;}
}

/* ===== Dashboard: event send options (free share vs paid SMS) ===== */
.send-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.send-opt{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-soft);}
.send-opt--pay{border-color:var(--line-strong);background:var(--rose-soft);}
.send-opt h4{margin:2px 0 0;font-size:1rem;}
.send-opt p{margin:0;font-size:.86rem;line-height:1.5;flex:1;}
.send-opt .pill{align-self:flex-start;}
.send-opt .btn{align-self:flex-start;margin-top:4px;}

/* ===== Share-links modal ===== */
.share-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto;}
.share-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);}
.share-row__who{min-width:0;}
.share-row__who .name{font-weight:600;font-size:.92rem;}
.share-row__who .tel{font-size:.75rem;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(340px,52vw);}
@media (max-width:640px){.send-opts{grid-template-columns:1fr;}}

/* ===== Parties dashboard (multi-party home, design handoff #5) ===== */
.party-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;}
.party-card{position:relative;text-align:left;padding:0;border:1px solid var(--line);background:var(--surface);cursor:pointer;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .16s,box-shadow .16s,border-color .16s;font:inherit;}
.party-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-strong);}
.party-card__art{position:relative;height:124px;padding:16px 18px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:#fff;}
.party-card__kicker{position:relative;font-family:"Caveat",var(--font-display);font-size:20px;line-height:1;color:rgba(255,255,255,.94);}
.party-card__title{position:relative;font-family:var(--font-display);font-weight:600;font-size:1.35rem;line-height:1.06;margin-top:3px;text-wrap:balance;}
.party-card__status{position:absolute;top:14px;left:16px;z-index:2;}
.party-card__body{padding:15px 18px 17px;display:flex;flex-direction:column;gap:11px;}
.party-card__meta{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--ink-soft);}
.party-card__meta svg{flex:none;color:var(--rose);}
.party-card__stats{display:flex;gap:22px;}
.party-card__stats > div{display:flex;flex-direction:column;line-height:1.1;}
.party-card__stats b{font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--ink);}
.party-card__stats span{font-size:.68rem;color:var(--ink-soft);margin-top:3px;text-transform:uppercase;letter-spacing:.04em;}
.party-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line);}
.party-card__reply{font-size:.76rem;color:var(--ink-soft);}
.party-card__price{font-size:.82rem;font-weight:700;color:var(--rose-deep);}
.party-card__price.free{color:var(--ink-faint);font-weight:600;}

/* status pill: SMS active / link only */
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-sm);}
.status-pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor;}
.status-pill.active{color:var(--ok);}
.status-pill.free{color:var(--ink-soft);}

/* new-party card */
.new-party-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:200px;cursor:pointer;
  border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface-soft);color:var(--ink-soft);transition:.16s;font:inherit;}
.new-party-card:hover{border-color:var(--rose);background:var(--rose-soft);}
.new-party-card__ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--rose-soft);color:var(--rose-deep);}
.new-party-card__t{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);}
.new-party-card__d{font-size:.78rem;}

/* account billing summary — "pay only for the parties on SMS" */
.bill-summary{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:space-between;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 22px;margin-bottom:22px;box-shadow:var(--shadow-sm);}
.bill-summary__total{display:flex;align-items:baseline;gap:12px;}
.bill-summary__amt{font-family:var(--font-display);font-weight:600;font-size:2.1rem;line-height:1;color:var(--ink);}
.bill-summary__amt .cur{font-size:1.1rem;margin-right:1px;}
.bill-summary__lbl{font-size:.82rem;color:var(--ink-soft);}
.bill-summary__note{display:flex;gap:8px;align-items:flex-start;font-size:.78rem;line-height:1.5;color:var(--ink-soft);max-width:44ch;}
.bill-summary__note svg{flex:none;margin-top:1px;color:var(--rose);}

/* detail: SMS billing / activate sidebar */
.activate-card{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--surface);box-shadow:var(--shadow-sm);}
.activate-card.on{border-color:var(--ok);}
.activate-card__head{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink);}
.activate-card__big{font-family:var(--font-display);font-weight:600;font-size:2.4rem;line-height:1;color:var(--ink);margin:12px 0 2px;}
.activate-card__big .cur{font-size:1.2rem;}
.bill-line{display:flex;justify-content:space-between;gap:14px;font-size:.86rem;color:var(--ink-soft);padding:6px 0;}
.bill-line.sum{border-top:1px dashed var(--line-strong);margin-top:4px;padding-top:10px;font-weight:700;color:var(--ink);}
.bill-line b,.bill-line span:last-child{color:var(--ink);font-weight:600;}
@media (max-width:640px){.party-grid{grid-template-columns:1fr;}}

/* ===== Party kebab menu (archive / restore / delete) ===== */
.party-card__menu{position:absolute;top:12px;right:12px;z-index:3;}
.hdr-menu{position:relative;}
.party-kebab{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  border:none;cursor:pointer;background:rgba(255,255,255,.85);color:var(--ink);box-shadow:var(--shadow-sm);}
.party-kebab:hover{background:#fff;}
.party-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:180px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;display:none;flex-direction:column;gap:2px;z-index:40;}
.party-menu.open{display:flex;}
.party-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font:inherit;font-size:.86rem;color:var(--ink);padding:9px 10px;border-radius:8px;}
.party-menu button:hover{background:var(--surface-soft);}
.party-menu button svg{color:var(--ink-soft);}
.party-menu button.danger{color:var(--no);}
.party-menu button.danger svg{color:var(--no);}

/* ===== Archived parties ===== */
.party-card.archived{opacity:.94;}
.party-card__art.muted{filter:grayscale(.55) brightness(.98);}
.status-pill.archived{color:var(--ink-faint);}
.arch-section{margin-top:30px;}
.arch-section__head{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.04em;margin:0 0 14px;padding-top:20px;border-top:1px solid var(--line);}
.arch-section__head svg{color:var(--ink-faint);}

/* ===== Invite builder (new/edit party) ===== */
.builder-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start;}
.builder-preview{position:sticky;top:90px;}
.builder-preview .invite{width:100%;}
.theme-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
/* "+ Extras" collapsible in the builder */
.extras-details{border:1.5px dashed var(--line-strong);border-radius:var(--r);padding:12px 16px;}
.extras-details summary{cursor:pointer;font-weight:700;font-size:.92rem;color:var(--ink-soft);list-style:none;}
.extras-details summary::-webkit-details-marker{display:none;}
.extras-details[open] summary{color:var(--rose);margin-bottom:2px;}
.theme-chip{padding:8px 16px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface);cursor:pointer;
  font:inherit;font-size:.85rem;font-weight:600;color:var(--ink-soft);transition:.12s;}
.theme-chip:hover{border-color:var(--rose);color:var(--rose-deep);}
.theme-chip.on{background:var(--rose);border-color:var(--rose);color:#fff;}
.swatches{display:flex;flex-wrap:wrap;gap:10px;}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid var(--line-strong);cursor:pointer;padding:0;transition:transform .12s;}
.swatch:hover{transform:scale(1.1);}
.swatch.on{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--ink);border-color:var(--surface);}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;padding:20px;border:1.5px dashed var(--line-strong);
  border-radius:var(--r);background:var(--surface-soft);color:var(--ink-soft);cursor:pointer;font:inherit;font-size:.85rem;transition:.12s;}
.dropzone:hover{border-color:var(--rose);background:var(--rose-soft);}
.dropzone b{color:var(--ink);}
.photo-set{display:flex;align-items:center;gap:12px;}
.photo-thumb{width:84px;height:60px;border-radius:12px;background-size:cover;background-position:center;border:1px solid var(--line);flex:none;}
.stepper{display:inline-flex;align-items:center;gap:10px;}
.stepper button{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface);cursor:pointer;
  font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1;}
.stepper button:hover{border-color:var(--rose);color:var(--rose-deep);}
.stepper b{font-family:var(--font-display);font-size:1.25rem;min-width:44px;text-align:center;color:var(--ink);}
.stepper__num{width:64px;text-align:center;font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--ink);
  border:1.5px solid var(--line);border-radius:12px;padding:5px 4px;background:var(--surface);-moz-appearance:textfield;}
.stepper__num:focus{outline:none;border-color:var(--rose);}
.stepper__num::-webkit-outer-spin-button,.stepper__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.switchrow{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface-soft);cursor:pointer;}
.switch{position:relative;width:46px;height:26px;appearance:none;-webkit-appearance:none;background:var(--line-strong);
  border-radius:999px;cursor:pointer;transition:.15s;flex:none;margin:0;}
.switch:checked{background:var(--rose);}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.15s;}
.switch:checked::after{left:23px;}
.inv-spots__txt{display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink-soft);margin-top:6px;}
.inv-spots__txt b{color:var(--ink);}
.guest-preview-wrap .invite{width:100%;}
.guest-preview-wrap .big-choice .choice{cursor:default;}
@media (max-width:900px){.builder-grid{grid-template-columns:1fr;}.builder-preview{position:static;order:-1;}}

/* ===== Guest invitation card (rsvp.html + builder preview + guest-view modal) ===== */
.invite{width:min(460px,100%);}
.invite .hero{text-align:center;padding:10px 6px 4px;}
.invite .host-note{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;font-size:.92rem;color:var(--ink-soft);}
.detail-line{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line);}
.detail-line:last-child{border-bottom:none;}
.detail-line .ic{color:var(--rose);}
.big-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1.5px solid var(--line-strong);background:var(--surface);border-radius:var(--r);padding:16px 12px;cursor:pointer;
  text-align:center;font-weight:650;transition:.15s;font:inherit;color:inherit;}
.choice:hover{border-color:var(--rose);transform:translateY(-2px);}
.choice__ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--surface-soft);transition:.15s;}
.choice__ic svg{width:22px;height:22px;}
.choice.yes .choice__ic{color:var(--ok);background:var(--ok-bg);}
.choice.no  .choice__ic{color:var(--no);background:var(--no-bg);}
.choice .big{font-family:var(--font-display);font-size:1.5rem;line-height:1.05;}
.choice__sub{font-size:.85rem;font-weight:500;color:var(--ink-soft);}
.choice.yes.sel{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);}
.choice.no.sel{background:var(--no-bg);border-color:var(--no);color:var(--no);}
.choice.yes.sel .choice__ic{background:var(--ok);color:#fff;}
.choice.no.sel .choice__ic{background:var(--no);color:#fff;}
.choice.sel .choice__sub{color:inherit;opacity:.85;}
.invite.pad0{padding:0;overflow:hidden;}
.inv-banner{position:relative;padding:46px 26px 30px;text-align:center;color:#fff;overflow:hidden;}
.inv-kicker{position:relative;z-index:1;display:block;font-family:"Caveat",var(--font-display);font-size:1.7rem;line-height:1;color:rgba(255,255,255,.95);}
.inv-title{position:relative;z-index:1;font-family:var(--font-display);font-size:2.1rem;line-height:1.08;font-weight:600;color:#fff;margin:8px 0 14px;text-wrap:balance;}
.inv-hostline{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:rgba(255,255,255,.94);}
.inv-host-av{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.65);
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.7rem;color:#fff;}
.inv-body{padding:22px 24px 26px;}
/* animated motifs — one per theme, all sit behind the banner content */
.inv-motif{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.inv-banner > .inv-kicker,.inv-banner > .inv-title,.inv-banner > .inv-hostline{position:relative;z-index:1;}

/* confetti */
.inv-confetti span{position:absolute;top:-14px;border-radius:2px;opacity:.85;animation:inv-fall linear infinite;}
@keyframes inv-fall{from{transform:translateY(-16px) rotate(0deg);}to{transform:translateY(320px) rotate(340deg);}}

/* petals (falling flowers) & leaves — share the sway fall */
.inv-petals span{position:absolute;top:-22px;color:rgba(255,255,255,.9);opacity:.9;line-height:1;animation:inv-fall-sway linear infinite;}
.inv-leaves span{position:absolute;top:-16px;width:15px;height:9px;background:rgba(255,255,255,.5);border-radius:0 100% 0 100%;animation:inv-fall-sway linear infinite;}
@keyframes inv-fall-sway{
  0%{transform:translate(0,-22px) rotate(0deg);}
  50%{transform:translate(16px,150px) rotate(180deg);}
  100%{transform:translate(-8px,320px) rotate(360deg);}
}

/* sunset — glowing sun + slow rotating rays, top-right */
.inv-sun__disc{position:absolute;top:-34px;right:-20px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,205,.95),rgba(255,224,150,.15) 70%);animation:inv-pulse 4s ease-in-out infinite;}
.inv-sun__rays{position:absolute;top:-90px;right:-80px;width:230px;height:230px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,240,190,.20) 0 5deg,transparent 5deg 30deg);animation:inv-spin 30s linear infinite;}
@keyframes inv-spin{to{transform:rotate(360deg);}}
@keyframes inv-pulse{0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}

/* breeze — rising bubbles */
.inv-bubbles span{position:absolute;bottom:-26px;border-radius:50%;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.32);animation:inv-rise linear infinite;}
@keyframes inv-rise{0%{transform:translateY(0);opacity:0;}15%{opacity:.85;}100%{transform:translateY(-270px);opacity:0;}}

/* elegant — twinkling sparkles */
.inv-sparkles svg{position:absolute;width:17px;height:17px;fill:rgba(255,255,255,.92);animation:inv-twinkle 2.4s ease-in-out infinite;}
@keyframes inv-twinkle{0%,100%{opacity:.12;transform:scale(.55);}50%{opacity:1;transform:scale(1);}}

/* midnight — field of twinkling stars */
.inv-stars span{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 4px rgba(255,255,255,.8);animation:inv-blink ease-in-out infinite;}
@keyframes inv-blink{0%,100%{opacity:.2;}50%{opacity:1;}}

/* bold / noir — a diagonal light sweep */
.inv-shine::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);animation:inv-sweep 5s ease-in-out infinite;}
@keyframes inv-sweep{0%{left:-60%;}55%,100%{left:135%;}}

/* hearts — rising, swaying love */
.inv-hearts span{position:absolute;bottom:-30px;line-height:1;animation:inv-heart-rise ease-in infinite;}
@keyframes inv-heart-rise{0%{transform:translateY(0) scale(.7);opacity:0;}15%{opacity:.95;}88%{opacity:.9;}100%{transform:translateY(-300px) scale(1.05);opacity:0;}}

/* cars — cruising across their own lanes (emoji face left → drive right-to-left) */
.inv-cars span{position:absolute;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15));animation:inv-car-drive linear infinite;}
@keyframes inv-car-drive{0%{left:112%;}100%{left:-16%;}}

/* dinosaurs — stomping in place */
.inv-dinos span{position:absolute;line-height:1;transform-origin:bottom center;animation:inv-dino-bob ease-in-out infinite;}
@keyframes inv-dino-bob{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-13px) rotate(3deg);}}

/* fairytale — drifting, twinkling magic */
.inv-fairytale span{position:absolute;line-height:1;animation:inv-fairy ease-in-out infinite;}
@keyframes inv-fairy{0%,100%{opacity:.3;transform:translateY(0) scale(.8) rotate(-8deg);}50%{opacity:1;transform:translateY(-12px) scale(1.05) rotate(8deg);}}

/* host-picked emoji effect — falls like confetti, banner scale */
.inv-emojifx span{position:absolute;top:-34px;line-height:1;opacity:.95;animation:inv-fall linear infinite;}

/* ===== Guest page glow-up (Phase 1) ================================== */
/* Full-viewport effect layer behind the invite card. */
.inv-pagefx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.inv-pagefx .inv-motif{position:absolute;inset:0;}
.rsvp-stage{position:relative;z-index:1;}
/* #rsvp is a centred grid item, so without a set width it sizes to whatever's
   inside — revealing the RSVP fields made the card grow and visibly jump
   sideways. Pin it; the card fills it. */
.rsvp-stage > #rsvp{width:min(460px,100%);}
.rsvp-stage .invite{width:100%;}
/* Falling/rising motifs were tuned to the 320px banner — page scale uses vh. */
.inv-pagefx .inv-confetti span,.inv-pagefx .inv-emojifx span{animation-name:inv-fall-page;}
.inv-pagefx .inv-petals span,.inv-pagefx .inv-leaves span{animation-name:inv-fall-sway-page;}
.inv-pagefx .inv-bubbles span{animation-name:inv-rise-page;}
.inv-pagefx .inv-hearts span{animation-name:inv-heart-rise-page;}
@keyframes inv-fall-page{from{transform:translateY(-6vh) rotate(0deg);}to{transform:translateY(108vh) rotate(340deg);}}
@keyframes inv-fall-sway-page{
  0%{transform:translate(0,-6vh) rotate(0deg);}
  50%{transform:translate(18px,48vh) rotate(180deg);}
  100%{transform:translate(-10px,108vh) rotate(360deg);}
}
@keyframes inv-rise-page{0%{transform:translateY(0);opacity:0;}12%{opacity:.85;}100%{transform:translateY(-112vh);opacity:0;}}
@keyframes inv-heart-rise-page{0%{transform:translateY(0) scale(.7);opacity:0;}12%{opacity:.95;}90%{opacity:.9;}100%{transform:translateY(-110vh) scale(1.05);opacity:0;}}

/* The themed page paints its own gradient — the default pink radial blobs and
   grain (body::before/::after, fixed layers) would sit on top of it. */
body.rsvp-themed::before,body.rsvp-themed::after{display:none;}
/* Never scroll the invite sideways, and reserve the scrollbar gutter so the
   centred card doesn't nudge when revealing the RSVP fields makes the page
   tall enough to scroll. */
html{scrollbar-gutter:stable;}
body.rsvp-themed{overflow-x:hidden;}

/* Frosted-glass invite card over the painted page. */
body.rsvp-themed .invite.ticket{background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(255,255,255,.55);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.rsvp-themed .invite.ticket{background:rgba(255,255,255,.97);}
}
/* Dark themes: dark glass + re-pointed ink tokens inside the card. */
body.rsvp-dark .invite.ticket{background:rgba(20,29,52,.82);border-color:rgba(255,255,255,.14);
  --surface:#1B2747;--surface-soft:rgba(255,255,255,.06);--ink:#F2F5FF;--ink-soft:#C4CEE8;
  --ink-faint:#93A0C4;--line:rgba(255,255,255,.16);--line-strong:rgba(255,255,255,.28);color:var(--ink);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.rsvp-dark .invite.ticket{background:rgba(20,29,52,.97);}
}
body.rsvp-dark .invite .input{background:rgba(255,255,255,.08);color:var(--ink);border-color:var(--line);}
body.rsvp-dark .invite .host-note{background:rgba(255,255,255,.06);}
body.rsvp-dark .invite .bubble{background:rgba(255,255,255,.1);color:var(--ink);}

/* RSVP orbs — big circular glass buttons with themed emoji. */
.big-choice--orbs{display:flex;gap:18px;justify-content:center;padding:6px 0 2px;}
.choice--orb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:132px;height:132px;border-radius:50%;cursor:pointer;border:1.5px solid var(--line-strong);
  background:radial-gradient(120% 120% at 30% 22%,rgba(255,255,255,.85),rgba(255,255,255,.45));
  box-shadow:var(--shadow-sm);transition:transform .14s var(--ease-out,ease),box-shadow .18s,border-color .18s;}
body.rsvp-dark .choice--orb{background:radial-gradient(120% 120% at 30% 22%,rgba(255,255,255,.22),rgba(255,255,255,.06));}
.choice--orb:hover{transform:translateY(-3px) scale(1.03);}
.choice--orb .choice__emo{font-size:2.1rem;line-height:1.15;}
.choice--orb .big{font-family:var(--font-display);font-size:1.12rem;line-height:1.05;}
.choice--orb .choice__sub{font-size:.72rem;font-weight:500;color:var(--ink-soft);}
.choice--orb.sel{transform:scale(1.06);}
.choice--orb.yes.sel{border-color:var(--ok);box-shadow:0 0 0 4px var(--ok-bg),0 10px 28px -8px rgba(63,157,107,.55);}
.choice--orb.no.sel{border-color:var(--no);box-shadow:0 0 0 4px var(--no-bg),0 10px 28px -8px rgba(194,93,110,.5);}
body.rsvp-dark .choice--orb.yes.sel{box-shadow:0 0 0 4px rgba(63,157,107,.35),0 10px 28px -8px rgba(63,157,107,.6);}
body.rsvp-dark .choice--orb.no.sel{box-shadow:0 0 0 4px rgba(194,93,110,.35),0 10px 28px -8px rgba(194,93,110,.55);}
@media (max-width:420px){.big-choice--orbs{gap:12px;}.choice--orb{width:118px;height:118px;}}

/* Extras chips (dress code / playlist / registry / parking). */
.inv-extras{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;}
.inv-extra{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-pill);
  background:var(--surface-soft);border:1px solid var(--line);font-size:.86rem;font-weight:600;color:var(--ink-soft);text-decoration:none;}
.inv-extra b{color:var(--ink);font-weight:700;}
a.inv-extra:hover{border-color:var(--rose);color:var(--rose);}
body.rsvp-dark .inv-extra{background:rgba(255,255,255,.07);}

/* Add-to-calendar row (post-confirm). */
.cal-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:14px 0 2px;}
.cal-row__label{font-size:.86rem;font-weight:600;color:var(--ink-soft);}

/* Social proof strip (opt-in, shown after this guest replied). */
.inv-going{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:11px 14px;border-radius:var(--r);
  background:var(--ok-bg);color:var(--ok);font-weight:600;font-size:.92rem;}
body.rsvp-dark .inv-going{background:rgba(63,157,107,.18);color:#8FE0B4;}
.inv-going .names{color:inherit;opacity:.85;font-weight:500;}

/* ===== Desktop invite: full-page spread, not a floating card =========== */
/* ≥960px the ticket splits into a big sticky poster (the banner — photo or
   gradient + motif) and a frosted interaction panel. Mobile keeps the card.
   :has(.inv-banner) leaves bannerless states (invite-not-found) alone. */
@media (min-width: 960px) {
  body.rsvp-themed .rsvp-stage{padding:48px 40px;align-items:start;}
  body.rsvp-themed .rsvp-stage > #rsvp{width:min(1120px,100%);}
  body.rsvp-themed .invite.ticket:has(.inv-banner){
    display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start;
    width:100%;background:transparent!important;border:none!important;box-shadow:none!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow:visible;
  }
  /* the ticket's perforated top edge belongs to the card look, not the spread */
  body.rsvp-themed .invite.ticket:has(.inv-banner)::before{display:none;}
  body.rsvp-themed .invite.ticket:has(.inv-banner) .inv-banner{
    position:sticky;top:48px;min-height:min(560px,72vh);border-radius:28px;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    box-shadow:var(--shadow-lg);padding:56px 36px;
  }
  body.rsvp-themed .invite.ticket:has(.inv-banner) .inv-title{font-size:clamp(2.6rem,3.6vw,3.6rem);}
  body.rsvp-themed .invite.ticket:has(.inv-banner) .inv-kicker{font-size:2.1rem;}
  body.rsvp-themed .invite.ticket:has(.inv-banner) .inv-hostline{font-size:.95rem;}
  /* poster is taller than the 320px the banner motifs were tuned for —
     use the viewport-scale keyframes so particles travel the full height */
  body.rsvp-themed .invite.ticket:has(.inv-banner) .inv-banner .inv-confetti span,
  body.rsvp-themed .invite.ticket:has(.inv-banner) .inv-banner .inv-emojifx span{animation-name:inv-fall-page;}
  body.rsvp-themed .invite.ticket:has(.inv-banner) .inv-banner .inv-petals span,
  body.rsvp-themed .invite.ticket:has(.inv-banner) .inv-banner .inv-leaves span{animation-name:inv-fall-sway-page;}
  body.rsvp-themed .invite.ticket:has(.inv-banner) .inv-banner .inv-bubbles span{animation-name:inv-rise-page;}
  body.rsvp-themed .invite.ticket:has(.inv-banner) .inv-banner .inv-hearts span{animation-name:inv-heart-rise-page;}
  /* the interactive half becomes its own frosted panel */
  body.rsvp-themed .invite.ticket:has(.inv-banner) .inv-body{
    background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.55);border-radius:24px;
    padding:28px 30px 32px;box-shadow:var(--shadow-lg);
    -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  }
  body.rsvp-dark .invite.ticket:has(.inv-banner) .inv-body{
    background:rgba(20,29,52,.82);border-color:rgba(255,255,255,.14);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    body.rsvp-themed .invite.ticket:has(.inv-banner) .inv-body{background:rgba(255,255,255,.97);}
    body.rsvp-dark .invite.ticket:has(.inv-banner) .inv-body{background:rgba(20,29,52,.97);}
  }
}

/* Party wall (activity) — same gate as the going strip. */
.inv-activity{margin:14px 0 0;padding:12px 14px;border-radius:var(--r);
  background:var(--surface-soft);border:1px solid var(--line);text-align:left;}
body.rsvp-dark .inv-activity{background:rgba(255,255,255,.06);}
.inv-activity__t{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px;}
.inv-act{display:flex;align-items:baseline;gap:8px;padding:5px 0;font-size:.9rem;color:var(--ink-soft);}
.inv-act + .inv-act{border-top:1px dashed var(--line);}
.inv-act__txt{flex:1;min-width:0;}
.inv-act__txt b{color:var(--ink);}
.inv-act__when{font-size:.76rem;color:var(--ink-faint);white-space:nowrap;}

/* "One link for everyone" block in the share modal. */
.share-open{border:1.5px solid var(--brand-soft, #fbd0dc);background:var(--rose-soft);border-radius:var(--r);padding:14px 16px;}
.share-open__head{display:flex;align-items:center;gap:7px;color:var(--rose-deep);font-size:.95rem;}
.share-open .share-row{background:var(--surface);}

/* Honeypot — visually gone, still in the DOM for bots to fill. */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none;}

/* ===== Brand loader — a chat bubble "typing", like a guest replying ===== */
/* Sits in the HTML shell so it paints before any JS runs; the app replaces it
   with the real view. `i` elements (no nested divs) keep the prerenderer's
   #app matching simple. */
/* align-content:center keeps the two rows packed together — without it the
   auto rows stretch across the min-height and the caption drifts away. */
.boot{display:grid;place-items:center;align-content:center;gap:14px;min-height:62vh;padding:40px 20px;}
.boot__bubble{display:inline-flex;align-items:center;gap:8px;padding:17px 22px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:26px 26px 26px 8px;box-shadow:var(--shadow);}
.boot__bubble i{width:10px;height:10px;border-radius:50%;display:block;
  background:var(--brand);animation:boot-dot 1.25s ease-in-out infinite;}
.boot__bubble i:nth-child(2){background:var(--pink-500);animation-delay:.16s;}
.boot__bubble i:nth-child(3){background:var(--rose);animation-delay:.32s;}
.boot__t{font-family:var(--font-display);font-size:1rem;color:var(--ink-soft);letter-spacing:.01em;}
.boot__t b{color:var(--rose);}
@keyframes boot-dot{
  0%,60%,100%{transform:translateY(0) scale(1);opacity:.45;}
  30%{transform:translateY(-7px) scale(1.12);opacity:1;}
}
/* compact inline variant — GIF grid, panels, anywhere mid-page */
.boot--inline{min-height:0;padding:18px 0;gap:10px;}
.boot--inline .boot__bubble{padding:11px 15px;gap:6px;border-radius:18px 18px 18px 6px;}
.boot--inline .boot__bubble i{width:7px;height:7px;}
.boot--inline .boot__t{font-size:.84rem;}
/* on a themed invite page the bubble sits on colour — soften it */
body.rsvp-dark .boot__bubble{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);}
body.rsvp-dark .boot__t{color:rgba(255,255,255,.9);}
body.rsvp-dark .boot__t b{color:#fff;}
@media (prefers-reduced-motion:reduce){
  .boot__bubble i{animation:boot-fade 1.4s ease-in-out infinite;}
  @keyframes boot-fade{0%,100%{opacity:.4;}50%{opacity:1;}}
}

/* ===== GIF picker (GIPHY, attribution required) ===== */
.gif-panel{margin-top:10px;padding:12px;border-radius:var(--r);background:var(--surface-soft);border:1px solid var(--line);}
body.rsvp-dark .gif-panel{background:rgba(255,255,255,.06);}
.gif-mark{height:16px;flex:none;}
.gif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;}
.gif-cell{aspect-ratio:4/3;border:2px solid transparent;border-radius:10px;cursor:pointer;
  background-color:var(--pink-100);background-size:cover;background-position:center;padding:0;}
.gif-cell:hover{border-color:var(--rose);transform:scale(1.02);}
.gif-chosen{display:inline-flex;align-items:center;gap:6px;}
.gif-chosen img{height:52px;border-radius:9px;}
.gif-chosen button{border:none;background:var(--pink-200);color:var(--rose-deep);width:22px;height:22px;
  border-radius:50%;cursor:pointer;font-size:.72rem;line-height:1;}
.inv-act__gif{display:block;max-height:110px;border-radius:10px;margin-top:6px;}
.inv-done__gif{display:block;max-height:150px;border-radius:12px;margin:0 auto 14px;}

/* ===== Party photo album ===== */
.inv-album{margin:14px 0 0;padding:12px 14px;border-radius:var(--r);
  background:var(--surface-soft);border:1px solid var(--line);text-align:left;}
body.rsvp-dark .inv-album{background:rgba(255,255,255,.06);}
.alb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:2px 0 10px;}
.alb-cell{aspect-ratio:1;border-radius:10px;background-color:var(--pink-100);background-size:cover;background-position:center;display:block;}
.alb-cell:hover{opacity:.9;}
@media (max-width:480px){.alb-grid{grid-template-columns:repeat(3,1fr);}}

/* host-side album card */
.host-album{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;}
.host-album .ph{position:relative;aspect-ratio:1;border-radius:10px;background-size:cover;background-position:center;background-color:var(--pink-100);}
.host-album .ph button{position:absolute;top:6px;right:6px;width:24px;height:24px;border:none;border-radius:50%;
  background:rgba(21,34,63,.72);color:#fff;cursor:pointer;font-size:.72rem;line-height:1;}
.host-album .ph button:hover{background:var(--rose-deep);}
.drawer-gif{max-height:90px;border-radius:10px;margin-top:8px;display:block;}

@media (prefers-reduced-motion:reduce){.inv-motif,.inv-motif *,.inv-pagefx *{animation:none!important;}.inv-shine::before{display:none;}.inv-hearts span,.inv-fairytale span,.inv-emojifx span{opacity:.85;}}

/* ===== Blog (marketing · webhook-fed posts) ===== */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(322px,1fr));gap:26px;}
.blog-card{display:flex;flex-direction:column;text-decoration:none;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .16s var(--ease-out),box-shadow .16s;}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.blog-cover{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;}
.blog-cover--tall{aspect-ratio:2/1;}
.blog-cover__mark{font-family:var(--lp-display);font-weight:800;font-size:26px;color:rgba(255,255,255,.95);letter-spacing:-.01em;}
.blog-cover__mark b{font-weight:500;}
.blog-card__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1;}
.blog-card__t{font-family:var(--lp-display);font-weight:700;font-size:20px;line-height:1.22;color:var(--brand-ink-strong);margin:0;text-wrap:balance;}
.blog-card__x{font-size:14.5px;line-height:1.55;color:var(--text-muted);margin:0;flex:1;}
.blog-card__meta{font-size:12.5px;color:var(--text-subtle);margin-top:2px;}
.blog-tag{display:inline-flex;align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--brand-primary-press);background:var(--brand-soft);padding:4px 10px;border-radius:var(--radius-pill);}
.blog-taglist{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;}

/* post */
.blog-post{padding-bottom:20px;}
.blog-post__head{max-width:760px;margin:0 auto;text-align:center;padding-top:clamp(28px,4vw,44px);}
.blog-back{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600;color:var(--text-muted);text-decoration:none;margin-bottom:20px;}
.blog-back:hover{color:var(--brand-primary-press);}
.blog-post__t{font-family:var(--lp-display);font-weight:800;font-size:clamp(30px,4.2vw,46px);line-height:1.1;letter-spacing:-.02em;color:var(--brand-ink-strong);margin:0;text-wrap:balance;}
.blog-post__lede{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--text-muted);margin:18px auto 0;max-width:38em;}
.blog-post__meta{font-size:13.5px;color:var(--text-subtle);margin-top:18px;}
.blog-hero{aspect-ratio:2/1;background-size:cover;background-position:center;border-radius:var(--radius-2xl);margin:clamp(24px,4vw,40px) 0 0;box-shadow:var(--shadow-md);}
.blog-body__wrap{max-width:760px;margin:0 auto;}

/* prose */
.blog-body{font-size:18px;line-height:1.75;color:var(--text-body);padding-top:clamp(28px,4vw,44px);}
.blog-body > *:first-child{margin-top:0;}
.blog-body p{margin:0 0 22px;}
.blog-body h2{font-family:var(--lp-display);font-weight:700;font-size:clamp(24px,2.6vw,30px);line-height:1.2;color:var(--brand-ink-strong);margin:40px 0 14px;}
.blog-body h3{font-family:var(--lp-display);font-weight:700;font-size:21px;color:var(--brand-ink-strong);margin:30px 0 12px;}
.blog-body a{color:var(--brand-primary-press);text-decoration:underline;text-underline-offset:2px;}
.blog-body strong{color:var(--brand-ink-strong);font-weight:700;}
.blog-body ul,.blog-body ol{margin:0 0 22px;padding-left:24px;display:flex;flex-direction:column;gap:8px;}
.blog-body li{padding-left:4px;}
.blog-body img{max-width:100%;height:auto;border-radius:var(--radius-lg);margin:8px 0 24px;box-shadow:var(--shadow-sm);}
.blog-body blockquote{margin:26px 0;padding:6px 0 6px 22px;border-left:3px solid var(--brand-primary);font-family:var(--lp-display);
  font-weight:600;font-size:20px;line-height:1.4;color:var(--brand-ink-strong);font-style:normal;}
.blog-body code{background:var(--surface-sunken);padding:2px 6px;border-radius:6px;font-size:.9em;}
.blog-body hr{border:none;border-top:1px solid var(--border-base);margin:34px 0;}

/* closing "generate invites" banner */
.blog-cta{margin:clamp(36px,5vw,52px) 0 8px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--surface-brand);border:1px solid var(--border-brand);border-radius:var(--radius-2xl);padding:clamp(24px,3vw,34px);}
.blog-cta__t{font-family:var(--lp-display);font-weight:700;font-size:clamp(21px,2.4vw,27px);line-height:1.2;color:var(--brand-ink-strong);margin:8px 0 0;max-width:16em;}
.blog-cta__d{font-size:15px;line-height:1.55;color:var(--text-muted);margin:10px 0 0;max-width:34em;}
.blog-cta .lp-btn{flex:none;}
@media (max-width:640px){.blog-cta{flex-direction:column;align-items:flex-start;}.blog-cta .lp-btn{width:100%;}}