/* ============================================================
   Save a Seat landing — "Open the Envelope"
   Everything here is scoped to body.landing or lp-* classes so the
   shared system in styles.css (dashboard/event/login) is untouched.
   Resting state of every animated element == its final state, so the
   page is complete with no JS and under prefers-reduced-motion.
   ============================================================ */

/* ---------- 68: metric-matched fallbacks ----------
   Text paints at once in a local font scaled to the web font's widths and line metrics
   (measured in Chromium at hero sizes: Fraunces vs Georgia / Georgia Bold, Plus Jakarta
   Sans vs Arial / Arial Bold, Caveat vs Segoe Print), so the display=swap to the real
   face doesn't reflow the hero. Bold gets its own face: synthetic bold keeps regular widths. */
@font-face { font-family: 'Fraunces Fallback'; font-weight: 100 599; src: local('Georgia'); size-adjust: 101%; ascent-override: 97%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces Fallback'; font-weight: 600 900; src: local('Georgia Bold'), local('Georgia-Bold'); size-adjust: 93%; ascent-override: 105%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: 'Jakarta Fallback'; font-weight: 100 599; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans'); size-adjust: 103.5%; ascent-override: 100.5%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: 'Jakarta Fallback'; font-weight: 600 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Liberation Sans Bold'); size-adjust: 100.5%; ascent-override: 103.5%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: 'Caveat Fallback'; src: local('Segoe Print'); size-adjust: 67%; ascent-override: 143%; descent-override: 45%; line-gap-override: 0%; }
body.landing {
  --display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --body: 'Plus Jakarta Sans', 'Jakarta Fallback', system-ui, -apple-system, sans-serif;
  --hand: 'Caveat', 'Caveat Fallback', 'Segoe Print', 'Bradley Hand', cursive;
}

/* ---------- page canvas ---------- */
/* The tilted hero polaroids overhang the edges on purpose. Clip at the ROOT: overflow on <body>
   alone doesn't stop the page scrolling sideways on phones. (This sheet only loads on the landing.) */
html { overflow-x: clip; }
body.landing { background: var(--paper); overflow-x: clip; }
body.landing::before {             /* paper grain over everything; alpha-only, no blend mode */
  content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background-image: var(--grain); opacity: .32;
}
.landing ::selection { background: rgba(255, 77, 141, .22); }
.lp-skip { position: absolute; left: 16px; top: -60px; z-index: 70; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 999px; font-weight: 700; text-decoration: none; }
.lp-skip:focus { top: 12px; }

/* nav: paper glass + wax-seal mark */
.landing .nav { background: rgba(247, 241, 230, .8); border-bottom-color: var(--paper-edge); }
/* 31: "Start free" lives in the header; Pricing stays visible on phones (the seal alone is the
   logo below 440px so everything fits on one line at 375) */
.landing .nav-links { gap: clamp(.9rem, 2vw, 1.6rem); }
.landing .nav-login { font-weight: 700; }
.landing .nav-start { padding-inline: 1.05rem; }
@media (max-width: 439px) {
  .landing .nav .wrap { padding-inline: 16px; }
  .landing .nav .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .landing .nav-links { gap: .95rem; font-size: .95rem; }
  .landing .nav-links a:not(.btn):not(.hide-sm) { display: inline-flex; align-items: center; min-height: 44px; }
}
.landing .nav-links a:not(.btn) { position: relative; }
.landing .nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px;
  background: var(--grad-party); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-out);
}
.landing .nav-links a:not(.btn):hover::after { transform: scaleX(1); }

/* ---------- shared editorial type ---------- */
.lp-eyebrow {
  display: flex; align-items: center; gap: .9em; margin: 0 0 1.1rem;
  font: 700 .74rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}
.lp-eyebrow span {
  font-family: var(--display); font-style: italic; font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0; text-transform: none; color: var(--wax-text);   /* pink measured 2.5:1 on kraft; wax-text 5.0:1 */
}
.lp-eyebrow span::after { content: ''; display: inline-block; width: 34px; height: 1.5px; margin-left: .9em; vertical-align: middle; background: currentColor; opacity: .5; }
.lp-eyebrow--light { color: rgba(255,255,255,.62); }
.lp-eyebrow--light span { color: var(--marigold); }
.lp-eyebrow--center { justify-content: center; }
.lp-eyebrow--quiet { color: var(--slate-soft); }   /* was #6B7A88, 3.9:1 */

.lp-h2 {
  font-size: clamp(2.3rem, 1.25rem + 3.6vw, 4.5rem); font-weight: 800; line-height: .98;
  letter-spacing: -.028em; font-variation-settings: "SOFT" 60, "WONK" 1;
}
.lp-h2 em, .lp-final__title em {
  font-style: italic; font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 1;
  background: var(--grad-party); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .08em;
}
.lp-sub { font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); color: var(--ink-soft); max-width: 46ch; margin: 1.1rem 0 0; }
.lp-sechead { max-width: 780px; margin-bottom: clamp(40px, 6vw, 76px); }
.lp-sechead--split { max-width: none; display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: end; }
.lp-sechead--split .lp-sub { margin: 0 0 .4rem; }

.lp-textlink {
  font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 77, 141, .45); text-underline-offset: .32em;
  transition: color var(--dur-ui), text-decoration-color var(--dur-ui);
}
.lp-textlink { display: inline-block; padding: .7rem 0; }   /* 44px hit area, same visual */
.lp-textlink:hover { color: var(--pink); text-decoration-color: var(--pink); }
.lp-textlink:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; border-radius: 4px; }
.landing [data-confetti] { position: relative; }

/* ---------- photo slots (graceful fallback: paper/gradient + handwritten label) ---------- */
.ph { position: relative; overflow: hidden; background: linear-gradient(150deg, #FFD9C7, #FFB8CC 55%, #FFE3A3); }
.ph[data-tone="formal"] { background: linear-gradient(150deg, #D5DDE6, #93A6BA); }
.ph[data-tone="night"]  { background: linear-gradient(150deg, #3A1D6E, #5B2A9D 60%, #1E7FB8); }
.ph[data-tone="somber"] { background: linear-gradient(165deg, #EEF1F3, #BFCCD7); }
.ph::before { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .45; }
.ph::after {
  content: attr(data-fallback); position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--hand); font-weight: 700; font-size: clamp(1rem, 12cqi, 2.4rem); color: rgba(42,30,66,.42);
  text-align: center; padding: 8%;
}
.ph[data-tone="night"]::after { color: rgba(255,255,255,.55); }
.ph img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; color: transparent; }
.ph.is-missing img { visibility: hidden; }
html.img-fx .ph img { transition: opacity 700ms var(--ease-out); }
html.img-fx .ph img:not(.is-loaded) { opacity: 0; }
html.img-fx .lp-hero .ph img { opacity: 1; transition: none; }   /* hero: eager, never pops in */

/* ---------- polaroid ---------- */
.pol {
  --r: 0deg; margin: 0; width: var(--w, 200px); position: relative; container-type: inline-size;
  background: #FFFDF8; padding: 6.5% 6.5% 0; border-radius: 2px;
  box-shadow: var(--shadow-paper); transform: rotate(var(--r));
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.pol .ph { aspect-ratio: 4 / 5; }
.pol__cap {
  font-family: var(--hand); font-weight: 600; font-size: 11cqi; line-height: 1.08; color: var(--ink);
  height: 2.9em; padding: .5em .2em 0; text-align: center; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pol--tape::before {
  content: ''; position: absolute; z-index: 2; top: -4.5%; left: 50%; width: 40%; height: 8%;
  transform: translateX(-50%) rotate(-4deg);
  background: repeating-linear-gradient(135deg, rgba(255,194,75,.62) 0 6px, rgba(255,214,140,.62) 6px 12px);
  box-shadow: 0 1px 2px rgba(42,30,66,.12);
}
@media (hover: hover) and (pointer: fine) {
  .pol:not(.pol--still):hover { transform: rotate(0deg) translateY(-8px) scale(1.04); box-shadow: var(--shadow-lift); z-index: 5; }
}

/* ============================================================
   HERO
   ============================================================ */
.lp-hero { position: relative; overflow-x: clip; padding: clamp(40px, 6vw, 84px) 0 clamp(96px, 10vw, 150px); }
.lp-hero::before {                 /* warm lamplight pooled on the "table" */
  content: ''; position: absolute; inset: -10% -5% 0; pointer-events: none;
  background:
    radial-gradient(42% 46% at 76% 46%, rgba(255, 194, 75, .30), transparent 70%),
    radial-gradient(30% 34% at 66% 74%, rgba(255, 77, 141, .13), transparent 70%);
}
.lp-hero .wrap { max-width: 1240px; }
.lp-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lp-hero__copy { position: relative; z-index: 4; }

.lp-kicker { display: flex; align-items: center; gap: .9rem; margin: 0 0 1.4rem; font-weight: 700; font-size: .76rem; letter-spacing: clamp(.1em, .05em + .5vw, .2em); text-transform: uppercase; color: var(--ink-soft); }
.lp-kicker__rule { width: 38px; height: 2px; border-radius: 2px; background: var(--grad-party); }
.lp-title {
  font-size: clamp(2.9rem, 1.05rem + 4.9vw, 5.5rem); line-height: .93; letter-spacing: -.034em;
  font-weight: 800; font-variation-settings: "SOFT" 50, "WONK" 1; margin: 0; max-width: 13ch;
}
.lp-title__line { white-space: nowrap; }
/* the old headline, kept as a quieter second voice */
.lp-subline {
  margin: 1.5rem 0 0; font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); line-height: 1.2; color: var(--ink);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.lp-title__em {
  position: relative; display: inline-block; font-style: italic; font-weight: 500;
  font-variation-settings: "SOFT" 100, "WONK" 1; padding-right: .1em;
  background: var(--grad-party); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-swash { position: absolute; left: 1%; bottom: -.16em; width: 94%; height: .3em; overflow: visible; }
.lp-lead { font-size: clamp(1.06rem, .98rem + .45vw, 1.3rem); color: var(--ink-soft); max-width: 35ch; margin: .9rem 0 2.1rem; }
.lp-lead b { color: var(--ink); }
.lp-hero__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.6rem; }
.lp-proofline { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: 0; margin: 2rem 0 0; font-size: .9rem; font-weight: 600; color: var(--ink-soft); }
.lp-proofline li::before { content: '✦'; color: var(--pink); margin-right: .45em; font-size: .8em; }

/* ---- stage: container-query units make the envelope geometry exact at any width ---- */
.lp-stage { position: relative; container-type: inline-size; width: min(100%, 500px); aspect-ratio: 100 / 118; justify-self: end; z-index: 2; }
.lp-hp { position: absolute; z-index: 1; }
.lp-hp .pol { --w: 100%; }
.lp-hp--1 { width: 33%; right: -22%; top: 1%; }
.lp-hp--2 { width: 29%; left: -21%; top: 18%; }
.lp-hp--3 { width: 31%; right: -9%; bottom: -13%; z-index: 3; }

.env { position: absolute; left: 0; right: 0; bottom: 0; height: 66cqw; z-index: 2; perspective: 1500px; }
.env::after {                       /* contact shadow on the table */
  content: ''; position: absolute; left: 4%; right: 4%; bottom: -5cqw; height: 9cqw; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(42,30,66,.30), transparent 70%);
}
.env__back {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 30% 35%, rgba(255,77,141,.85) 0 .9cqw, transparent 1cqw) 0 0 / 8cqw 8cqw,
    radial-gradient(circle at 75% 72%, rgba(255,194,75,.95) 0 .75cqw, transparent .85cqw) 0 0 / 8cqw 8cqw,
    linear-gradient(180deg, #FFF1E4, #F4DCC6);
  box-shadow: var(--shadow-lift);
}
.env__card {
  position: absolute; z-index: 5; left: 10cqw; width: 80cqw; bottom: 20cqw; height: 90cqw;
  display: flex; flex-direction: column; background: #FFFDF8; padding: 2.4cqw; border-radius: 1cqw;
  transform: rotate(-2.5deg); transform-origin: 50% 100%;
  box-shadow: 0 .4cqw .6cqw rgba(42,30,66,.08), 0 5cqw 9cqw -4cqw rgba(42,30,66,.45);
  transition: transform 320ms var(--ease-out);
}
.env__photo { flex: none; height: 49cqw; border-radius: .6cqw; }
.env__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.3cqw; padding-top: 1.4cqw; }
.env__body p { margin: 0; }
.env__k { font-weight: 800; font-size: 2.3cqw; letter-spacing: .28em; text-transform: uppercase; color: var(--wax-text); }
.env__title { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 7.4cqw; line-height: 1; letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.env__meta { font-weight: 600; font-size: 2.8cqw; color: var(--ink-soft); }
.env__rsvp { display: flex; gap: 1.4cqw; margin-top: .6cqw !important; }
.env__rsvp span { font-weight: 700; font-size: 2.4cqw; padding: 1cqw 2.4cqw; border-radius: 99px; border: .3cqw solid var(--paper-edge); }
.env__rsvp .is-yes { background: var(--mint); border-color: var(--mint); color: #05493A; }
.env__front {
  position: absolute; inset: 0; z-index: 3;
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(172deg, #EFE2CB, #E3D0B2);
}
.env__front::before {               /* bottom fold, a shade lighter so the folds read */
  content: ''; position: absolute; inset: 0; clip-path: polygon(0 100%, 50% 40%, 100% 100%);
  background: linear-gradient(0deg, #EFE3CE, #F6EDDD);
}
.env__front::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .5; }
.env__flap { position: absolute; left: 0; right: 0; top: 0; height: 40cqw; z-index: 1; transform-origin: 50% 0; transform: rotateX(180deg); transform-style: preserve-3d; }
.env__flap::before, .env__flap::after { content: ''; position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.env__flap::before {                /* outside of the flap */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #F8F0E2 0%, #EEE1CA 100%);
}
.env__flap::after {                 /* the patterned liner, revealed as it opens */
  clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: rotateX(180deg);
  background:
    radial-gradient(circle at 30% 35%, rgba(255,77,141,.9) 0 .9cqw, transparent 1cqw) 0 0 / 8cqw 8cqw,
    radial-gradient(circle at 75% 72%, rgba(255,194,75,1) 0 .75cqw, transparent .85cqw) 0 0 / 8cqw 8cqw,
    linear-gradient(0deg, #FFF3E6, #FBE3D2);
}
.env__seal { position: absolute; z-index: 6; left: 42cqw; top: 30cqw; width: 16cqw; height: 16cqw; pointer-events: none; }
.env__seal::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; box-shadow: 0 1.2cqw 2.4cqw -.4cqw rgba(90,0,30,.5); opacity: 0; }
.seal { position: absolute; inset: -12%; opacity: 0; background: url("/static/img/brand/seal.svg") center / contain no-repeat; }
.seal--l { clip-path: polygon(0 0, 54% 0, 47% 22%, 56% 44%, 45% 63%, 53% 82%, 48% 100%, 0 100%); transform: translate(-7cqw, 6cqw) rotate(-26deg); }
.seal--r { clip-path: polygon(54% 0, 100% 0, 100% 100%, 48% 100%, 53% 82%, 45% 63%, 56% 44%, 47% 22%); transform: translate(7cqw, 7cqw) rotate(22deg); }
.env__burst { position: absolute; z-index: 7; left: 50%; top: -28cqw; width: 0; height: 0; pointer-events: none; }
.cf { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; }
.cf-host { position: absolute; left: 50%; top: 20%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.lp-replay {
  position: absolute; left: 0; bottom: -3.2rem; z-index: 4; display: none;
  font: 700 1.3rem/1 var(--hand); color: var(--ink-soft); background: none; border: 0; padding: .4rem .2rem; cursor: pointer;
  transition: color var(--dur-ui), transform var(--dur-press) var(--ease-out);
}
html.motion .lp-replay { display: block; }
.lp-replay:hover { color: var(--pink); }
.lp-replay:active { transform: scale(.96); }
.lp-replay:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
  .env__card:hover { transform: rotate(-1deg) translateY(-1.6cqw); }
}

/* ============================================================
   OCCASIONS — polaroid wall
   ============================================================ */
.lp-occ { position: relative; background: var(--paper-2); padding: clamp(84px, 10vw, 140px) 0 clamp(90px, 10vw, 140px); }
.lp-occ::before, .lp-occ::after {  /* torn paper edges */
  content: ''; position: absolute; left: 0; right: 0; height: 20px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V9l12 3 10-6 13 4 13-6 12 5 14-2 12 5 13-7 13 3 14-5 12 6 13-3 14 5 13-6 12 4 14-5 13 6 12-3 11 2v11z' fill='%23EFE5D3'/%3E%3C/svg%3E") repeat-x 0 0 / 240px 20px;
}
.lp-occ::before { top: -19px; }
.lp-occ::after { bottom: -19px; transform: scaleY(-1); }

.marquee { display: grid; gap: clamp(8px, 1.5vw, 20px); }
.marquee__row {
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 26px 0 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee__row::-webkit-scrollbar { display: none; }
.marquee__track { display: flex; align-items: flex-start; width: max-content; list-style: none; margin: 0; padding: 0 0 0 4vw; }
.marquee__track > li { padding-right: clamp(22px, 3vw, 46px); scroll-snap-align: center; }
.marquee__track > li:nth-child(3n+1) .pol { --r: -3deg; }
.marquee__track > li:nth-child(3n+2) { padding-top: 22px; }
.marquee__track > li:nth-child(3n+2) .pol { --r: 2.5deg; }
.marquee__track > li:nth-child(3n) { padding-top: 8px; }
.marquee__track > li:nth-child(3n) .pol { --r: -1.2deg; }
.marquee .pol { --w: clamp(148px, 15vw, 222px); }
.marquee__row--b .marquee__track { padding-left: 12vw; }
html.motion .marquee.is-ready .marquee__row { overflow: hidden; }
html.motion .marquee.is-ready .marquee__track { animation: lp-drift 80s linear infinite; }
html.motion .marquee.is-ready .marquee__row--b .marquee__track { animation-duration: 92s; animation-direction: reverse; }
.marquee.is-off .marquee__track { animation-play-state: paused !important; }
@media (hover: hover) and (pointer: fine) { .marquee__row:hover .marquee__track { animation-play-state: paused; } }
@keyframes lp-drift { to { transform: translateX(-50%); } }

.lp-kinds {
  max-width: 64ch; margin: clamp(28px, 4vw, 48px) auto 0; text-align: center;
  font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.05rem, .9rem + .7vw, 1.45rem);
  line-height: 1.6; color: var(--ink-soft); font-variation-settings: "SOFT" 100;
}
.lp-kinds .sep { font-size: 0; }                     /* the comma is for screen readers... */
.lp-kinds .sep::before {                              /* ...the eye gets a sparkle */
  content: '✦'; content: '✦' / ''; display: inline-block; margin: 0 .6rem;
  font-size: clamp(.6rem, .5rem + .3vw, .8rem); font-style: normal; color: var(--pink); vertical-align: .25em;
}

/* memorial — still, level, quiet. No tape, no tilt, no hover play, muted palette. */
.lp-memorial {
  display: grid; grid-template-columns: 210px 1fr; gap: clamp(28px, 5vw, 64px); align-items: center;
  max-width: 880px; margin-top: clamp(64px, 8vw, 110px);
  padding: clamp(28px, 4vw, 44px); border-radius: 4px;
  /* warm linen: a faint woven cross-hatch over oat, never the cold grey of an office */
  background:
    repeating-linear-gradient(0deg, rgba(120, 96, 64, .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120, 96, 64, .03) 0 1px, transparent 1px 4px),
    linear-gradient(170deg, #F6F0E6, #EFE6D8);
  border: 1px solid rgba(120, 96, 64, .16);
  box-shadow: 0 1px 1px rgba(80, 64, 40, .05), 0 18px 40px -28px rgba(80, 64, 40, .35);
}
.pol--still { --w: 100%; --r: 0deg; box-shadow: 0 1px 2px rgba(40,50,60,.08), 0 14px 30px -18px rgba(40,50,60,.35); }
.pol--still .ph img { filter: saturate(.78); }
.pol--still .pol__cap { color: #5E584F; font-weight: 500; }
.lp-memorial__title { font-weight: 400; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.1; color: #2F3A46; font-variation-settings: "SOFT" 100; margin-bottom: .8rem; }
.lp-memorial__copy p:last-child { color: #5E584F; margin: 0; max-width: 52ch; }
.lp-memorial .lp-eyebrow--quiet { color: #6E655A; }

/* ============================================================
   SEASONAL — The Holiday Collection (shown Oct 1 – Jan 10; landing.js unhides it)
   Envelopes drawn in CSS (holiday-cards mockup); the seal is the master seal.svg,
   re-inked per season with a hue filter so there is still only ONE seal file.
   ============================================================ */
.lp-season[hidden] { display: none; }
.lp-season {
  position: relative; overflow: clip; padding: clamp(90px, 10vw, 140px) 0 clamp(80px, 9vw, 130px);
  background: var(--grain-fine), radial-gradient(60% 70% at 78% 40%, rgba(255, 194, 75, .22), transparent 70%), linear-gradient(180deg, #EADCC3, #E2D0B2);
}
.lp-season .lp-eyebrow span { color: #8A3B12; }      /* AA on kraft */
.lp-season .lp-sub { color: #4A3F5C; }
.lp-season__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 84px); align-items: center; max-width: 1240px; }
.lp-season__cta { margin-top: 2rem; }
.lp-envs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 34px 22px; }
.lp-envc { grid-column: span 2; text-align: center; --tilt: 0deg; }
.lp-envc:nth-child(4) { grid-column: 2 / span 2; }
.lp-envc:nth-child(1) { --tilt: -4deg; } .lp-envc:nth-child(2) { --tilt: 2.5deg; margin-top: 22px; }
.lp-envc:nth-child(3) { --tilt: -1.5deg; } .lp-envc:nth-child(4) { --tilt: 3deg; } .lp-envc:nth-child(5) { --tilt: -2.5deg; margin-top: -10px; }
.lp-envc b { display: block; margin-top: 14px; font: 800 1.12rem/1.2 var(--display); color: var(--ink-deep); font-variation-settings: "SOFT" 60, "WONK" 1; }
.lp-envc > span:last-child { display: block; font-size: .8rem; font-weight: 600; color: #4A3F5C; margin-top: 2px; }
.lp-envc__env {
  position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 9px; overflow: hidden; container-type: inline-size;
  background-color: var(--env); background-image: var(--pat, none); transform: rotate(var(--tilt));
  box-shadow: 0 2px 3px rgba(42,30,66,.18), 0 18px 30px -14px rgba(42,30,66,.55);
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.lp-envc__flap {
  position: absolute; inset: 0 0 auto; height: 54%; background: var(--env); filter: brightness(1.2);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.lp-envc__seal {
  position: absolute; left: 50%; top: 54%; width: 30cqi; aspect-ratio: 1; transform: translate(-50%, -62%);
  background: url("/static/img/brand/seal.svg") center / contain no-repeat; filter: var(--seal-ink, none) drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.lp-envc__to { position: absolute; left: 0; right: 0; bottom: 7%; font: 700 12.5cqi/1 var(--hand); color: #FFF6E4; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.lp-envc--moonlit   { --env: #231A33; --pat: radial-gradient(circle at 82% 24%, #F4E3B0 0 12px, transparent 12.5px), radial-gradient(circle at 26% 70%, rgba(255,255,255,.35) 0 1.5px, transparent 2.5px), radial-gradient(circle at 60% 84%, rgba(255,255,255,.25) 0 1px, transparent 2px); --seal-ink: hue-rotate(48deg) saturate(1.25) brightness(1.12); }
.lp-envc--harvest   { --env: #B4562A; --pat: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px); --seal-ink: hue-rotate(62deg) saturate(1.1) brightness(1.3); }
.lp-envc--lights    { --env: #1D2B5C; --pat: radial-gradient(circle at 20% 34%, rgba(255,204,92,.95) 0 3px, transparent 7px), radial-gradient(circle at 78% 26%, rgba(255,204,92,.75) 0 2.5px, transparent 6px), radial-gradient(circle at 86% 72%, rgba(255,204,92,.6) 0 2px, transparent 5px), radial-gradient(circle at 12% 78%, rgba(255,204,92,.5) 0 2px, transparent 5px); --seal-ink: hue-rotate(78deg) saturate(.8) brightness(1.55); }
.lp-envc--evergreen { --env: #1F4A3A; --pat: radial-gradient(circle at 18% 30%, rgba(255,255,255,.55) 0 2px, transparent 3px), radial-gradient(circle at 80% 58%, rgba(255,255,255,.45) 0 2px, transparent 3px), radial-gradient(circle at 10% 70%, rgba(255,255,255,.35) 0 1.5px, transparent 2.5px), radial-gradient(circle at 90% 22%, rgba(255,255,255,.4) 0 1.5px, transparent 2.5px); --seal-ink: hue-rotate(24deg) saturate(1.1); }
.lp-envc--midnight  { --env: #141A33; --pat: radial-gradient(circle at 14% 26%, #D4AF37 0 2px, transparent 2.6px), radial-gradient(circle at 84% 34%, #F7E7A6 0 1.6px, transparent 2.2px), radial-gradient(circle at 90% 78%, #D4AF37 0 1.8px, transparent 2.4px), radial-gradient(circle at 8% 70%, #F7E7A6 0 1.5px, transparent 2px), radial-gradient(circle at 70% 14%, #F7E7A6 0 1.2px, transparent 1.8px); --seal-ink: hue-rotate(78deg) saturate(.8) brightness(1.55); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lp-envc:hover .lp-envc__env { transform: rotate(0deg) translateY(-8px) scale(1.04); box-shadow: 0 2px 3px rgba(42,30,66,.18), 0 30px 44px -18px rgba(42,30,66,.6); }
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.lp-how { padding: clamp(100px, 11vw, 160px) 0 clamp(90px, 10vw, 140px); }
.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.2vw, 52px); }
.lp-step:nth-child(2) { margin-top: 72px; }
.lp-step:nth-child(3) { margin-top: 24px; }
.art {
  position: relative; aspect-ratio: 1 / 1.02; border-radius: 22px; overflow: hidden; container-type: inline-size;
  display: grid; place-items: center; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--paper-edge);
}
.art::before { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .5; }
.art--seal { background: #F8DDE4; }
.art--phone { background: radial-gradient(60% 55% at 50% 45%, #4B2E83, #1A1230 75%); }
.lp-step__txt { position: relative; padding: 0 4px; }
.lp-step__n {
  display: block; margin: -2.1rem 0 .4rem 10px; position: relative; z-index: 2;
  font-family: var(--display); font-style: italic; font-weight: 900; font-size: 3.6rem; line-height: 1;
  color: var(--paper); -webkit-text-stroke: 1.5px var(--pink);
}
.lp-step h3 { font-size: 1.65rem; margin: 0 0 .45rem; font-variation-settings: "SOFT" 60, "WONK" 1; }
.lp-step p { color: var(--ink-soft); margin: 0; max-width: 34ch; }

/* step 1 — the draft */
.draft { position: relative; width: 70cqi; background: #FFFDF8; padding: 5cqi; border: .5cqi dashed rgba(42,30,66,.22); border-radius: 2cqi; transform: rotate(-2.5deg); box-shadow: var(--shadow-paper); }
.draft__stamp { position: absolute; top: 3cqi; right: -3cqi; padding: .8cqi 2.4cqi; border: .6cqi solid rgba(200,36,95,.7); border-radius: 1.2cqi; color: rgba(200,36,95,.8); font-weight: 800; font-size: 3.4cqi; letter-spacing: .24em; text-transform: uppercase; transform: rotate(12deg); background: rgba(255,253,248,.85); }
.draft__ph { aspect-ratio: 16 / 9; border: .5cqi dashed rgba(42,30,66,.2); border-radius: 1.4cqi; display: grid; place-items: center; font: 700 5cqi/1 var(--hand); color: rgba(42,30,66,.4); }
.draft p { margin: 0; }
.draft__k { font-weight: 800; font-size: 3cqi; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); margin-top: 3.4cqi !important; }
.draft__title { display: flex; align-items: center; margin-top: 1cqi !important; font-family: var(--display); font-weight: 800; font-size: 7cqi; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }
.draft__type { display: inline-block; }
.draft__caret { display: inline-block; width: .5cqi; height: 7cqi; margin-left: .6cqi; background: var(--pink); border-radius: 1px; }
.draft__line { display: block; height: 2.2cqi; border-radius: 2cqi; background: rgba(42,30,66,.09); margin-top: 2.6cqi; }
.draft__line--s { width: 62%; margin-top: 1.8cqi; }
.draft__swatches { display: flex; gap: 2cqi; margin-top: 4cqi; }
.draft__swatches i { width: 6.5cqi; height: 6.5cqi; border-radius: 50%; }
.draft__swatches i:nth-child(1) { background: linear-gradient(135deg, #FFB020, #FF4D8D); box-shadow: 0 0 0 .6cqi #FFFDF8, 0 0 0 1.2cqi var(--ink); }
.draft__swatches i:nth-child(2) { background: linear-gradient(135deg, #FF7AA2, #8B5CF6); }
.draft__swatches i:nth-child(3) { background: linear-gradient(135deg, #22D3A5, #38BDF8); }
.draft__swatches i:nth-child(4) { background: linear-gradient(135deg, #1A1230, #D4AF37); }

/* step 2 — sealed & published */
.sealed { position: relative; width: 64cqi; margin-top: -8cqi; background: #FFFDF8; padding: 3.6cqi 3.6cqi 5cqi; border-radius: 1.4cqi; transform: rotate(2deg); box-shadow: var(--shadow-lift); text-align: center; }
.sealed p { margin: 0; }
.sealed__ph {
  aspect-ratio: 16 / 10; border-radius: 1cqi;
  background:
    radial-gradient(circle at 18% 30%, #fff 0 1.3cqi, transparent 1.4cqi),
    radial-gradient(circle at 70% 22%, #FFE9A8 0 1.8cqi, transparent 1.9cqi),
    radial-gradient(circle at 84% 70%, #22D3A5 0 1.2cqi, transparent 1.3cqi),
    radial-gradient(circle at 34% 76%, #FF4D8D 0 1.5cqi, transparent 1.6cqi),
    linear-gradient(135deg, #FFB020, #FF7A5A 50%, #FF4D8D);
}
.sealed__title { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 7.2cqi; margin-top: 3cqi !important; font-variation-settings: "SOFT" 100, "WONK" 1; }
.sealed__meta { font-weight: 600; font-size: 3.2cqi; color: var(--ink-soft); margin-top: .8cqi !important; }
.sealed__seal {
  position: absolute; right: -6cqi; bottom: -7cqi; width: 23cqi; height: 23cqi; transform: rotate(-8deg);
  background: url("/static/img/brand/seal.svg") center / contain no-repeat;
  filter: drop-shadow(0 1.6cqi 1.6cqi rgba(90,0,30,.3));
}
.sealed__tag { position: absolute; top: 6cqi; left: 6cqi; padding: .9cqi 2.4cqi; border-radius: 99px; background: #DCFCEF; color: #067A55; font-weight: 800; font-size: 2.6cqi; letter-spacing: .1em; text-transform: uppercase; }
.linkpill { position: absolute; left: 50%; bottom: 7cqi; transform: translateX(-50%); display: flex; align-items: center; gap: 2cqi; white-space: nowrap; background: #fff; padding: 2cqi 2.4cqi 2cqi 2cqi; border-radius: 99px; box-shadow: var(--shadow-paper); font-size: 3.4cqi; font-weight: 700; }
.linkpill__ico { width: 6cqi; height: 6cqi; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 3cqi; }
.linkpill__url { color: var(--ink-soft); }
.linkpill__ok { background: var(--mint); color: #05493A; padding: .8cqi 2cqi; border-radius: 99px; font-size: 2.8cqi; }

/* step 3 — a phone lighting up */
.mphone { position: relative; width: 43cqi; aspect-ratio: 9 / 18.5; padding: 1.6cqi; border-radius: 8cqi; background: #0D0A18; box-shadow: 0 0 0 .5cqi #2E2745, 0 6cqi 12cqi -4cqi rgba(0,0,0,.6), 0 0 18cqi -2cqi rgba(255,77,141,.45); transform: rotate(-3deg); }
.mphone__screen { position: relative; height: 100%; border-radius: 6.6cqi; overflow: hidden; padding: 9cqi 2.6cqi 0; display: flex; flex-direction: column; gap: 1.8cqi; background: linear-gradient(170deg, #FF7A5A, #C0357A 45%, #3A1D6E); }
.mphone__screen::after { content: ''; position: absolute; inset: 0; background: #07050D; opacity: 0; pointer-events: none; }
.mphone__time { text-align: center; color: #fff; font-weight: 700; font-size: 10cqi; line-height: 1; letter-spacing: -.02em; }
.mphone__date { text-align: center; color: rgba(255,255,255,.8); font-size: 2.6cqi; font-weight: 600; margin-bottom: 2cqi; }
.notif { display: flex; gap: 1.8cqi; align-items: flex-start; background: rgba(255,253,248,.9); border-radius: 3cqi; padding: 2cqi; font-size: 2.6cqi; line-height: 1.3; color: var(--ink); box-shadow: 0 1.5cqi 3cqi -1.5cqi rgba(0,0,0,.4); }
.notif b { font-weight: 800; }
.notif small { display: block; color: var(--ink-soft); font-size: 2.3cqi; }
.notif__app { flex: none; width: 5.4cqi; height: 5.4cqi; border-radius: 1.4cqi; background: #FFF4E8 url("/static/img/brand/seal.svg") center / 92% no-repeat; box-shadow: inset 0 0 0 1px rgba(42,30,66,.08); }

/* ============================================================
   PRODUCT PROOF
   ============================================================ */
.lp-proof { position: relative; overflow: clip; color: #fff; background: var(--ink-deep); padding: clamp(100px, 11vw, 160px) 0; }
.lp-proof::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(38% 50% at 72% 50%, rgba(255,77,141,.22), transparent 70%), radial-gradient(30% 40% at 84% 78%, rgba(255,194,75,.14), transparent 70%); }
.lp-proof .lp-h2 { color: #fff; }
.lp-proof .lp-h2 em { background: linear-gradient(110deg, #FFC24B, #FF7A5A 55%, #FF4D8D); -webkit-background-clip: text; background-clip: text; }
.lp-proof .lp-sub { color: rgba(255,255,255,.72); }
.lp-proof__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
.lp-points { list-style: none; padding: 0; margin: 2.4rem 0 0; max-width: 480px; }
.lp-points li { display: grid; gap: .25rem; padding: 1.1rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.lp-points b { font-family: var(--display); font-weight: 700; font-size: 1.25rem; font-variation-settings: "SOFT" 80; }
.lp-points span { color: rgba(255,255,255,.66); font-size: .96rem; }

.lp-proof__device { position: relative; display: grid; place-items: center; }
.phone { position: relative; width: min(318px, 78vw); aspect-ratio: 9 / 19; padding: 11px; border-radius: 48px; background: #0B0914; transform: rotate(-3deg); box-shadow: 0 0 0 1.5px #3A3150, 0 50px 90px -30px rgba(0,0,0,.75), 0 0 140px -30px rgba(255,77,141,.5); }
.phone__notch { position: absolute; z-index: 3; top: 20px; left: 50%; width: 30%; height: 24px; transform: translateX(-50%); border-radius: 99px; background: #0B0914; }
.phone__screen { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: var(--paper); container-type: inline-size; }
.mini-ev { position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--ink); }
.mini-ev__band { position: relative; height: 62cqi; flex: none; }
.mini-ev__cover { position: absolute; inset: 0; }
.mini-ev__cover img { object-position: 50% 18%; }   /* portrait into a short band: keep faces */
.mini-ev__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(26,18,48,.15) 30%, rgba(26,18,48,.78)); }
.mini-ev__head { position: absolute; z-index: 2; left: 0; right: 0; bottom: 9cqi; display: grid; justify-items: center; gap: 1.6cqi; color: #fff; text-align: center; }
.mini-ev__k { font-weight: 800; font-size: 3cqi; letter-spacing: .22em; text-transform: uppercase; }
.mini-ev__title { font-family: var(--display); font-weight: 800; font-size: 9.6cqi; line-height: 1; letter-spacing: -.02em; font-variation-settings: "SOFT" 80, "WONK" 1; text-shadow: 0 1cqi 4cqi rgba(0,0,0,.3); }
.mini-ev__chip { display: inline-flex; align-items: center; gap: 1.2cqi; font-size: 3cqi; padding: 1.4cqi 3cqi; border-radius: 99px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); }
.mini-ev__chip i { width: 1px; height: 3cqi; background: rgba(255,255,255,.5); }
.mini-ev__panel { position: relative; z-index: 3; margin: -6cqi 4cqi 0; padding: 4.4cqi 4cqi 4cqi; border-radius: 5cqi; background: #fff; box-shadow: 0 3cqi 7cqi -3cqi rgba(42,30,66,.35); display: grid; justify-items: center; gap: 3cqi; }
.mini-ev__q { font-family: var(--display); font-weight: 800; font-size: 5.4cqi; }
.mini-ev__btns { display: flex; gap: 1.8cqi; }
.mini-ev__btns span { font-weight: 700; font-size: 3.2cqi; padding: 1.6cqi 3.6cqi; border-radius: 99px; border: .4cqi solid var(--paper-edge); }
.mini-ev__btns .on { background: var(--mint); border-color: var(--mint); color: #05493A; }
.mini-ev__counts { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; text-align: center; border-top: 1px solid var(--line); padding-top: 3cqi; }
.mini-ev__counts span { font-size: 2.5cqi; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.mini-ev__counts b { display: block; font-family: var(--display); font-size: 7.4cqi; line-height: 1.05; color: var(--ink); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.mini-ev__feed { position: relative; list-style: none; margin: 4cqi 4cqi 0; padding: 0; height: 58cqi; overflow: hidden; }
.mini-ev__feed li {
  --i: 0; position: absolute; left: 0; right: 0; top: 0; height: 12.6cqi; display: flex; align-items: center; gap: 2.6cqi;
  padding: 0 1cqi; border-bottom: 1px solid var(--line); transform: translateY(calc(var(--i) * 14.4cqi));
  transition: transform 560ms var(--ease-out), opacity 420ms var(--ease-out);
}
.mini-ev__feed li.is-enter { opacity: 0; transform: translateY(-9cqi) scale(.97); }
.mini-ev__feed li.is-exit { opacity: 0; }
.fav { flex: none; width: 8.4cqi; height: 8.4cqi; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 3.4cqi; }
.fwho { flex: 1; min-width: 0; display: grid; }
.fwho b { font-size: 3.3cqi; font-weight: 700; }
.fwho small { font-size: 2.7cqi; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftag { flex: none; font-size: 2.3cqi; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1cqi 2cqi; border-radius: 99px; }
.ftag.yes { background: #DCFCEF; color: #067A55; } .ftag.maybe { background: #FFF1D6; color: #B4700F; } .ftag.no { background: #FFE4E9; color: #B4123F; }
.bump { animation: lp-bump 420ms var(--ease-out); }
@keyframes lp-bump { 40% { transform: scale(1.18); color: var(--pink); } }

/* 29: tented place cards (seat-moments mockup) — a guest's card behind, the headcount in front,
   stamped with the master seal. Paper, Caveat for the handwriting, a back flap in perspective. */
.placecards { position: absolute; left: -4%; bottom: 6%; z-index: 2; width: 236px; height: 258px; }
.placecard { position: absolute; width: 214px; transform-origin: 50% 100%; }
.placecard__back {
  display: block; height: 22px; margin: 0 6px; border-radius: 5px 5px 0 0; background: #EFE5D3;
  border: 1px solid rgba(42,30,66,.1); border-bottom: 0;
  transform: perspective(260px) rotateX(40deg); transform-origin: 50% 100%;
}
.placecard__front {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px 14px 16px; text-align: center;
  background: var(--grain-fine), #FFFDF8; color: var(--ink); border-radius: 0 0 6px 6px;
  border: 1px solid rgba(42,30,66,.12); box-shadow: 0 30px 44px -24px rgba(0,0,0,.65), 0 2px 3px rgba(0,0,0,.08);
}
.placecard__front::before {        /* the fold line where the tent bends */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(42,30,66,.12);
}
.placecard--guest { left: 18px; top: 0; transform: rotate(-9deg); opacity: .96; }
.placecard--guest .placecard__front { padding: 14px 12px 60px; }
.placecard--count { left: 0; bottom: 0; transform: rotate(-3deg); }
.placecard__name { font: 700 2.05rem/1 var(--hand); color: var(--ink-deep); }
.placecard__k { font-size: .66rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--wax-text); }
.placecard__n { display: flex; align-items: baseline; gap: .4rem; }
.placecard__n b { font-family: var(--display); font-weight: 900; font-size: 3rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; font-variation-settings: "SOFT" 60, "WONK" 1; }
.placecard__hand { font: 700 1.6rem/1 var(--hand); color: var(--ink-deep); }
.placecard__meta { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.placecard__seal {
  position: absolute; right: -22px; top: 2px; width: 64px; height: 64px; transform: rotate(-12deg);
  filter: drop-shadow(0 8px 10px rgba(90,0,30,.4));
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .placecard { transition: transform 300ms var(--ease-out); }
  .placecards:hover .placecard--guest { transform: rotate(-12deg) translate(-10px, -12px); }
  .placecards:hover .placecard--count { transform: rotate(-1deg) translateY(-6px); }
}
.lp-note { position: absolute; margin: 0; font: 700 1.55rem/1 var(--hand); color: var(--marigold); white-space: nowrap; }
.lp-note::after { content: ''; position: absolute; width: 58px; height: 40px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 40' fill='none' stroke='%23FFC24B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M54 6C40 4 22 10 10 30'/%3E%3Cpath d='M4 22l6 9 9-5'/%3E%3C/svg%3E"); }
.lp-note--a { right: -2%; top: 47%; transform: rotate(-4deg); }
.lp-note--a::after { left: -64px; top: -2px; }
.lp-note--b { left: -6%; bottom: -2%; transform: rotate(-3deg); }
.lp-note--b::after { left: 34%; top: -44px; transform: scaleX(-1) rotate(70deg); }

/* ============================================================
   PRICING — stationery cards (hooks untouched; scoped to .landing)
   ============================================================ */
.landing .lp-pricing { padding: clamp(100px, 11vw, 160px) 0; }
.lp-pricing__wrap { max-width: 1260px; }
.landing .plans { gap: 18px; }
.landing .plan {
  --pr: 0deg; max-width: 300px; border: 1px solid var(--paper-edge); border-radius: 6px; padding: 30px 22px 22px;
  background: #FFFDF8; box-shadow: var(--shadow-paper); transform: rotate(var(--pr));
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), opacity 700ms var(--ease-out);
}
.landing .plan:nth-child(1) { --pr: -.7deg; }
.landing .plan:nth-child(2) { --pr: .5deg; }
.landing .plan:nth-child(3) { --pr: -.4deg; }
.landing .plan:nth-child(4) { --pr: .6deg; }
.landing .plan .tier { font-size: .72rem; letter-spacing: .18em; color: var(--wax-text); }   /* pink was 3.1:1 */
.landing .plan .amt { font-weight: 800; font-size: 2.9rem; letter-spacing: -.02em; font-variation-settings: "SOFT" 60, "WONK" 1; margin: .7rem 0 .2rem; }
.landing .plan ul { border-top: 1.5px dashed var(--paper-edge); padding-top: 1.1rem; }
.landing .plan .btn-ghost { background: transparent; border-color: rgba(42,30,66,.2); }
.landing .plan .btn-ghost:hover { background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .landing .plan:hover { transform: rotate(0deg) translateY(-8px); box-shadow: var(--shadow-lift); }
}
.landing .plan.best { border-color: rgba(255,77,141,.45); box-shadow: 0 2px 2px rgba(42,30,66,.05), 0 30px 60px -28px rgba(255,77,141,.55); }
.landing .plan.best::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 6px; border-radius: 6px 6px 0 0; background: var(--grad-party); }
.landing .plan .ribbon {         /* "Best value" as a wax seal */
  top: -26px; right: -14px; width: 78px; height: 78px; padding: 0; display: grid; place-items: center; text-align: center;
  background: var(--grad-wax); border-radius: 50% 46% 52% 48% / 48% 53% 47% 52%; transform: rotate(-12deg);
  font-family: var(--display); font-style: italic; font-weight: 800; font-size: .82rem; line-height: 1.05; letter-spacing: 0; text-transform: none;
  color: #FFE3EC; text-shadow: 0 1px 0 rgba(90,0,30,.5);
  box-shadow: inset 0 -4px 7px rgba(0,0,0,.25), inset 0 3px 5px rgba(255,255,255,.28), 0 10px 20px -8px rgba(138,15,62,.6);
}
.landing .plan .ribbon::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.35); }
.landing .plan.pro { background: linear-gradient(160deg, #1A1230, #2A1E42) ; border-color: rgba(212,175,55,.35); overflow: hidden; }
.landing .plan.pro::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .5; pointer-events: none; }
.landing .plan.pro::after {      /* foil sheen that sweeps on hover */
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(247,231,166,.16) 45%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-130%) skewX(-12deg); transition: transform 900ms var(--ease-out);
}
.landing .plan.pro:hover::after { transform: translateX(330%) skewX(-12deg); }
.landing .plan.pro .tier { background: var(--grad-foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing .plan.pro ul { border-top-color: rgba(212,175,55,.3); }
.landing .plan.pro .btn-ghost { background: var(--grad-foil); color: #1A1230; border-color: transparent; }
@media (min-width: 640px) and (max-width: 1179px) {   /* tablet: a balanced 2 × 2, never 3 + 1 */
  .landing .plans { max-width: 720px; margin-inline: auto; }
  .landing .plan { flex: 1 1 calc(50% - 18px); max-width: calc(50% - 9px); }
}
@media (min-width: 1180px) {
  .landing .plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; max-width: 1180px; margin-inline: auto; }
  .landing .plan { max-width: none; }
  .landing .plan.best { --pr: 0deg; transform: translateY(-16px); }
}
@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
  .landing .plan.best:hover { transform: translateY(-24px); }
}

/* 45: tickets, gifts & donations, with the real fee line — a ruled receipt under the plans */
.lp-money {
  position: relative; max-width: 1180px; margin: clamp(56px, 7vw, 92px) auto 0;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr); gap: clamp(24px, 4vw, 56px); align-items: start;
  padding: clamp(26px, 3.4vw, 40px); border-radius: 6px;
  background: var(--grain-fine), #FFFDF8; border: 1px solid var(--paper-edge); box-shadow: var(--shadow-paper);
}
.lp-money::before {               /* the torn-off receipt edge */
  content: ''; position: absolute; left: 18px; right: 18px; top: -1px; height: 6px; border-radius: 0 0 6px 6px; background: var(--grad-party);
}
.lp-money__title { font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.3rem); line-height: 1.02; letter-spacing: -.02em; font-variation-settings: "SOFT" 60, "WONK" 1; margin: 0 0 .7rem; }
.lp-money__title em { font-style: italic; font-weight: 500; color: var(--wax-text); }
.lp-money__head p { margin: 0; color: var(--ink-soft); max-width: 34ch; }
.lp-money__list { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(18px, 2.6vw, 34px); }
.lp-money__item { padding-top: 1rem; border-top: 1.5px dashed var(--paper-edge); }
.lp-money__item dt { font-family: var(--display); font-weight: 700; font-size: 1.15rem; font-variation-settings: "SOFT" 80; margin-bottom: .35rem; }
.lp-money__item dd { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.lp-money__item dd b { color: var(--ink); }
.lp-money [data-fee] { white-space: nowrap; }   /* "5% + $0.99" never splits */
.lp-money__item--quiet dt { color: #3F4C59; }   /* memorial: calm slate, no party color */

/* ============================================================
   FINAL CTA
   ============================================================ */
.lp-final { position: relative; overflow: clip; background: var(--grad-party); padding: clamp(120px, 14vw, 190px) 0 clamp(110px, 13vw, 170px); }
.lp-final::before { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .45; pointer-events: none; }
.lp-final__pols { position: absolute; inset: 0; pointer-events: none; }
.lp-fp { position: absolute; pointer-events: auto; }
.lp-fp .pol { --w: 100%; }
.lp-fp--1 { width: clamp(120px, 14vw, 200px); left: 5%; top: 12%; }
.lp-fp--2 { width: clamp(120px, 13vw, 190px); right: 6%; top: 9%; }
.lp-fp--3 { width: clamp(110px, 11vw, 170px); right: 13%; bottom: 7%; }
.lp-final__card {
  position: relative; z-index: 2; max-width: 680px; margin: 0 auto; text-align: center; transform: rotate(-1deg);
  padding: clamp(60px, 7vw, 84px) clamp(24px, 5vw, 64px) clamp(40px, 5vw, 56px);
  background: #FFFDF8; border-radius: 4px;
  outline: 1px solid rgba(42,30,66,.14); outline-offset: -14px;
  box-shadow: 0 2px 3px rgba(80,10,40,.12), 0 60px 100px -40px rgba(80,10,40,.6);
}
.lp-final__seal {
  position: absolute; top: -50px; left: calc(50% - 48px); width: 96px; height: 96px; transform: rotate(-10deg);
  filter: drop-shadow(0 12px 14px rgba(90,0,30,.35));
}
.lp-final__title { font-size: clamp(2.4rem, 1.3rem + 3.8vw, 4.3rem); font-weight: 800; line-height: .98; letter-spacing: -.03em; font-variation-settings: "SOFT" 60, "WONK" 1; }
.lp-final__sub { color: var(--ink-soft); font-size: 1.12rem; margin: 1.2rem auto 2rem; max-width: 36ch; }
.lp-final__cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem 1.6rem; }

/* ---------- footer ---------- */
.lp-footer { position: relative; overflow: hidden; padding-bottom: 0; background: var(--ink-deep); }
.lp-footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.lp-footer__h { font-weight: 800; margin-bottom: .7rem; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.lp-footer__list { display: grid; gap: 0; }
.lp-footer__list a { display: flex; align-items: center; min-height: 44px; }   /* tap target */
.lp-footer a { transition: color var(--dur-ui); }
.lp-footer a:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; border-radius: 4px; }
.lp-footer__legal { margin-top: 36px !important; }
.lp-footer__word {   /* 30: whole word on screen (no bottom clip), solid and readable, still decorative */
  margin: 28px 0 0; padding: 0 2vw .14em; text-align: center; white-space: nowrap; line-height: 1; user-select: none;
  font-family: var(--display); font-style: italic; font-weight: 800; font-size: 12.4vw; letter-spacing: -.035em;   /* fits the width with margin */
  font-variation-settings: "SOFT" 100, "WONK" 1;
  background: linear-gradient(100deg, #FF4D8D, #FF7A5A 45%, #FFC24B); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .9;
}

/* ============================================================
   MOTION — only under html.motion (set when reduced-motion is off)
   Resting styles above are the end states; these only add the journey.
   ============================================================ */
html.motion .lp-hero :is(.env__card, .env__flap, .seal, .lp-hp .pol) { animation-play-state: paused; }
html.motion .lp-hero .env__seal::before { animation-play-state: paused; }
html.motion .lp-hero.is-play :is(.env__card, .env__flap, .seal, .lp-hp .pol) { animation-play-state: running; }
html.motion .lp-hero.is-play .env__seal::before { animation-play-state: running; }
html.motion .lp-hero.is-reset :is(.env__card, .env__flap, .seal, .lp-hp .pol) { animation: none !important; }
html.motion .lp-hero.is-reset .env__seal::before { animation: none !important; }

html.motion .env__seal::before { animation: lp-fade-out 260ms var(--ease-out) 380ms backwards; }
html.motion .seal--l { animation: lp-seal-l 440ms var(--ease-out) 200ms backwards; }
html.motion .seal--r { animation: lp-seal-r 440ms var(--ease-out) 200ms backwards; }
html.motion .env__flap { animation: lp-flap 560ms cubic-bezier(.6, 0, .3, 1) 440ms backwards; }
html.motion .env__card { animation: lp-card 960ms 760ms backwards; }
html.motion .lp-hp .pol { animation: lp-toss 620ms var(--ease-out) calc(1050ms + var(--d, 0) * 120ms) backwards; }
html.motion .lp-swash { animation: lp-swash 900ms var(--ease-in-out) 350ms backwards; }

@keyframes lp-fade-out { from { opacity: 1; } }
@keyframes lp-seal-l { 0% { transform: none; opacity: 1; } 30% { transform: scale(.93); opacity: 1; } }
@keyframes lp-seal-r { 0% { transform: none; opacity: 1; } 30% { transform: scale(.93); opacity: 1; } }
@keyframes lp-flap {
  0%   { transform: rotateX(0deg); z-index: 4; }
  49%  { z-index: 4; }
  50%  { z-index: 1; }
  100% { transform: rotateX(180deg); z-index: 1; }
}
@keyframes lp-card {                 /* tucked in the pocket → slides out → comes forward */
  0%   { transform: translateY(17cqw) scale(.68); z-index: 2; animation-timing-function: cubic-bezier(.5, 0, .25, 1); }
  52%  { transform: translateY(-50cqw) scale(.72) rotate(1.5deg); z-index: 2; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  53%  { z-index: 5; }
  100% { transform: rotate(-2.5deg); z-index: 5; }
}
@keyframes lp-toss { from { opacity: 0; transform: translateY(-30px) rotate(calc(var(--r) + 12deg)) scale(1.08); } }
@keyframes lp-swash { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* scroll reveals (html.rv-on is set by landing.js, so no-JS never hides anything) */
.rv { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--rv-delay, 0ms); }
.rv.rv-done { transition-delay: 0ms; }
html.rv-on .rv:not(.is-in) { opacity: 0; transform: translateY(22px); }

/* step choreography — hidden only while not yet in view, animation fills backwards */
html.rv-on .lp-step:not(.is-in) :is(.draft__type, .sealed__seal, .linkpill__ok, .notif) { opacity: 0; }
html.rv-on .lp-step.is-in .draft__type { animation: lp-type 1.1s steps(14, end) 450ms backwards; }
html.motion .draft__caret { animation: lp-blink 1s steps(2, jump-none) 0s 8; }
html.rv-on .lp-step.is-in .sealed__seal { animation: lp-stamp 560ms var(--ease-spring) 520ms backwards; }
html.rv-on .lp-step.is-in .linkpill__ok { animation: lp-pop 360ms var(--ease-out) 1150ms backwards; }
html.rv-on .lp-step:not(.is-in) .mphone__screen::after { opacity: 1; }
html.rv-on .lp-step.is-in .mphone__screen::after { animation: lp-light 700ms var(--ease-out) 350ms backwards; }
html.rv-on .lp-step.is-in .notif { animation: lp-notif 560ms var(--ease-out) calc(950ms + var(--i) * 460ms) backwards; }
/* place cards: the front card flips up on its fold, then the seal stamps it */
html.rv-on .placecards:not(.is-in) .placecard__seal { opacity: 0; }
html.rv-on .placecards.is-in .placecard--count { animation: lp-tent 620ms var(--ease-out) 200ms backwards; }
html.rv-on .placecards.is-in .placecard__seal { animation: lp-stamp 520ms var(--ease-spring) 760ms backwards; }

@keyframes lp-type  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lp-blink { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lp-stamp { from { opacity: 0; transform: scale(1.7) rotate(-32deg); } }
@keyframes lp-pop   { from { opacity: 0; transform: scale(.8); } }
@keyframes lp-light { from { opacity: 1; } }
@keyframes lp-notif { from { opacity: 0; transform: translateY(-45%) scale(.94); } }
@keyframes lp-tent  { from { opacity: 0; transform: perspective(600px) rotateX(70deg) rotate(-3deg); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .lp-note { display: none; }
}
@media (max-width: 900px) {
  .lp-season__grid { grid-template-columns: 1fr; }
  .lp-envs { max-width: 620px; }
  .lp-hero__grid { grid-template-columns: 1fr; }
  .lp-title { max-width: 13ch; }
  .lp-stage { justify-self: center; width: min(100%, 420px); margin-top: 72px; }
  .lp-hp--1 { width: 29%; right: -5%; top: 0; }
  .lp-hp--2 { width: 26%; left: -6%; top: 10%; }
  .lp-hp--3 { width: 26%; right: -4%; bottom: -10%; }
  .lp-sechead--split { grid-template-columns: 1fr; gap: 0; }
  .lp-steps { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; gap: 56px; }
  .lp-step:nth-child(n) { margin-top: 0; }
  .lp-proof__grid { grid-template-columns: 1fr; }
  .lp-proof__device { margin-top: 12px; }
  .placecards { left: 0; bottom: 2%; transform: scale(.82); transform-origin: 0 100%; }
  .lp-fp--3 { display: none; }
}
@media (max-width: 640px) {
  .lp-envs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .lp-envc, .lp-envc:nth-child(4) { grid-column: auto; margin-top: 0 !important; }
  .lp-envc:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 9px); }
  .lp-season__cta .btn { width: 100%; justify-content: center; }
  .lp-memorial { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .lp-memorial .pol--still { --w: 180px; }
  .lp-memorial__copy p:last-child { margin: 0 auto; }
  .lp-memorial .lp-eyebrow { justify-content: center; }
  .lp-fp--1 { left: -6%; top: 3%; width: 116px; }
  .lp-fp--2 { right: -6%; top: 2%; width: 110px; }
  .lp-final { padding-top: 170px; }
  .lp-final__card { transform: none; }
  .lp-hero__cta .btn { flex: 1 1 auto; justify-content: center; }
}
/* 60: on phones the product (the opening envelope) sits right under the headline,
   above the fold at 375 × 812; the copy column dissolves into the hero grid so it can
   be reordered without duplicating any markup. */
@media (max-width: 640px) {
  .lp-hero { padding: 18px 0 64px; }
  .lp-hero__grid { gap: 0; }
  .lp-hero__copy { display: contents; }
  .lp-hero__copy > * { position: relative; z-index: 4; }
  .lp-kicker { order: 1; margin-bottom: .9rem; }
  .lp-title { order: 2; }
  .lp-subline { display: none; }       /* the optional second voice; desktop keeps it */
  .lp-lead { order: 3; margin: .8rem 0 0; font-size: 1.02rem; }
  .lp-stage { order: 4; width: min(80%, 320px); margin-top: 22px; }
  .lp-hero__cta { order: 5; margin-top: 54px; }
  .lp-proofline { order: 6; margin-top: 1.1rem; }
  .lp-replay { left: auto; right: -2%; bottom: -2.9rem; }
  /* 69: phones get a swipeable row instead of the drift (landing.js also skips it) */
  html.motion .marquee.is-ready .marquee__row { overflow-x: auto; }
  html.motion .marquee.is-ready .marquee__track { animation: none; }
  .lp-money { grid-template-columns: 1fr; }
  .lp-money__list { grid-template-columns: 1fr; gap: 1.1rem; }
}
@media (min-width: 641px) and (max-width: 1000px) {
  .lp-money { grid-template-columns: 1fr; }
}
@media (max-width: 439px) {
  .lp-kicker { gap: .6rem; font-size: .68rem; letter-spacing: .12em; }
  .lp-kicker__rule { width: 22px; }
}
@media (max-width: 520px) {
  .landing .plan { max-width: none; }
  .landing .plan .ribbon { right: 4px; }
}

/* reduced motion: no movement on hover either — keep only color/opacity feedback */
@media (prefers-reduced-motion: reduce) {
  .pol, .env__card, .landing .plan, .landing .plan.pro::after, .rv, .lp-envc__env, .placecard { transition: none !important; }
  .pol:not(.pol--still):hover { transform: rotate(var(--r)) !important; box-shadow: var(--shadow-lift); }
  .env__card:hover { transform: rotate(-2.5deg) !important; }
  .landing .plan:hover { transform: rotate(var(--pr)) !important; box-shadow: var(--shadow-lift); }
  .landing .plan.best:hover { transform: none !important; }
}