/* Landing page — emotional, editorial and alive, without gimmicks. */
.landing .site-header { background: transparent; }

/* The header has no background of its own on this page, which is right over the paper
   but leaves it unreadable over the two bands that are nearly black: the marquee and the
   closing invitation. While one of those is behind it, the header is drawn in the light
   ink those bands use themselves (landing.js marks it). */
.site-header .brand, .site-header .brand__mark, .site-header .site-nav,
.site-header .site-nav a, .site-header .btn { transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease); }
.landing .site-header.is-on-dark .brand { color: #f8ecdf; }
.landing .site-header.is-on-dark .brand__mark { background: #f8ecdf; color: var(--primary); }
.landing .site-header.is-on-dark .site-nav { color: rgba(248, 236, 223, .82); }
.landing .site-header.is-on-dark .site-nav a:hover { color: #fff; }
.landing .site-header.is-on-dark .btn-ghost { color: #f8ecdf; }
.landing .site-header.is-on-dark .btn-ghost:hover { background: rgba(248, 236, 223, .12); }
.landing .site-header.is-on-dark .btn-primary { background: #f8ecdf; color: var(--primary); box-shadow: none; }
.landing .site-header.is-on-dark .btn-primary:hover { background: #fff; }
.landing .site-header.is-on-dark .btn-icon { color: #f8ecdf; border-color: rgba(248, 236, 223, .4); }
.lp-h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.lp-section { padding-block: clamp(4.5rem, 10vw, 8rem); }
.lp-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.lp-section__head .t-eyebrow + .lp-h2 { margin-top: .75rem; }
.lp-section__head--center { justify-content: center; text-align: center; }

/* ---------- hero ---------- */
.lp-hero { position: relative; padding: clamp(1.5rem, 5vw, 3.5rem) 0 2rem; overflow: hidden; margin-top: -4rem; padding-top: calc(4rem + clamp(1.5rem, 5vw, 3.5rem)); }
.lp-hero__bg { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(40rem 26rem at 85% 30%, rgba(201, 164, 106, .22), transparent 70%),
  radial-gradient(34rem 24rem at 10% 90%, rgba(138, 59, 69, .10), transparent 70%),
  linear-gradient(180deg, #f7f0e6 0%, var(--canvas) 70%); }
.lp-hero__bg::after { content: ''; position: absolute; inset: 0; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 4 C34 16 40 22 52 28 C40 34 34 40 28 52 C22 40 16 34 4 28 C16 22 22 16 28 4Z' fill='none' stroke='%23a8834a' stroke-opacity='.13' stroke-width='.8'/%3E%3C/svg%3E"); -webkit-mask-image: radial-gradient(60% 60% at 75% 40%, #000, transparent); mask-image: radial-gradient(60% 60% at 75% 40%, #000, transparent); }
.lp-hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 64rem) { .lp-hero__grid { grid-template-columns: 1fr 1.08fr; gap: 2rem; min-height: calc(100svh - 11rem); } }
.lp-kicker { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; color: var(--ink-2); padding: .4rem .8rem .4rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .6); }
.lp-kicker__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--maroon); box-shadow: 0 0 0 0 rgba(138, 59, 69, .5); animation: lp-pulse 2.4s infinite; }
@keyframes lp-pulse { 70% { box-shadow: 0 0 0 .5rem rgba(138, 59, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(138, 59, 69, 0); } }
.lp-title { margin-top: 1.4rem; font-family: var(--serif); font-weight: 400; font-size: clamp(3.1rem, 8.4vw, 6.1rem); line-height: .96; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.lp-title em { font-style: italic; color: var(--maroon); }
.lp-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.lp-title .w > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.19, 1, .22, 1); transition-delay: calc(var(--i) * 55ms + 80ms); }
.lp-title.is-in .w > span { transform: none; }
.lp-lead { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1.02rem, 1.6vw, 1.15rem); }
.lp-cta { margin-top: 2rem; }
.lp-cta .btn-primary { box-shadow: 0 14px 30px -14px rgba(59, 31, 36, .6); }
.lp-proof { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.75rem; font-size: .875rem; color: var(--muted); font-weight: 600; }
.lp-proof li { display: inline-flex; align-items: center; gap: .35rem; }
.lp-proof .icon { color: var(--sage); }

.lp-stage { position: relative; padding: 1rem 0 3rem; perspective: 1600px; }
.lp-laptop { width: 92%; transform: rotateY(-6deg) rotateX(2deg); transform-origin: left center; transition: transform .8s var(--ease); }
.lp-stage:hover .lp-laptop { transform: rotateY(-2deg) rotateX(1deg); }
.lp-screens { position: relative; aspect-ratio: 16 / 10; background: #efe8dd; }
.lp-screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.03); transition: opacity .9s var(--ease), transform 5s linear; }
.lp-screens img.is-active { opacity: 1; transform: scale(1); }
.lp-phone { position: absolute; right: 0; bottom: 0; width: clamp(9.5rem, 26%, 13.5rem); transform: rotate(3deg); animation: lp-float 7s ease-in-out infinite; }
@keyframes lp-float { 50% { transform: rotate(3deg) translateY(-10px); } }
.lp-phone__screen { aspect-ratio: 390 / 800; }
.lp-phone__scroll { position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity .7s var(--ease); }
.lp-phone__scroll.is-active { opacity: 1; animation: lp-scroll 9s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes lp-scroll { 0%, 12% { transform: translateY(0); } 100% { transform: translateY(calc(-100% + 15rem)); } }
.lp-chip { position: absolute; display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: var(--r-lg); background: rgba(255, 255, 255, .96); box-shadow: 0 18px 40px -18px rgba(40, 28, 20, .4), 0 0 0 1px rgba(40, 28, 20, .06); font-size: .78rem; }
.lp-chip strong { display: block; font-size: .8rem; }
.lp-chip small { display: block; color: var(--muted); }
.lp-chip__icon { width: 2rem; height: 2rem; border-radius: 8px; display: grid; place-items: center; background: var(--success-soft); color: var(--success); }
.lp-chip--rsvp { left: -1rem; bottom: 18%; animation: lp-chip 7s 1.5s ease-in-out infinite; }
.lp-chip--theme { left: 44%; top: -1.6rem; animation: lp-chip 8s ease-in-out infinite reverse; }
@keyframes lp-chip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.lp-swatches { display: flex; }
.lp-swatches i { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid #fff; margin-left: -.35rem; transition: background-color .6s; }
.lp-swatches i:first-child { margin-left: 0; }
@media (max-width: 40rem) { .lp-chip--theme { left: auto; right: 34%; } .lp-chip--rsvp { left: 0; bottom: 4%; } }

.lp-theme-tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
.lp-theme-tabs::-webkit-scrollbar { display: none; }
.lp-theme-tab { position: relative; flex: none; border: 1px solid var(--line); background: rgba(255, 255, 255, .7); border-radius: 999px; padding: .45rem .9rem; font-size: .8rem; font-weight: 700; color: var(--muted); overflow: hidden; }
.lp-theme-tab:hover { color: var(--ink); border-color: var(--line-strong); }
.lp-theme-tab.is-active { color: var(--ink); border-color: var(--ink); background: #fff; }
.lp-theme-tab i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--maroon); }
.lp-theme-tab.is-active i { animation: lp-progress var(--dur, 4.5s) linear forwards; }
.lp-theme-tab span { position: relative; }
@keyframes lp-progress { to { width: 100%; } }

/* ---------- marquee ---------- */
.lp-marquee { overflow: hidden; background: var(--primary); color: #f5e9da; padding: 1rem 0; }
.lp-marquee__track { display: flex; align-items: center; gap: 1.6rem; width: max-content; animation: lp-marquee 45s linear infinite; }
.lp-marquee span { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2rem); white-space: nowrap; font-style: italic; }
.lp-marquee b { width: 7px; height: 7px; background: #c9a46a; transform: rotate(45deg); flex: none; }
@keyframes lp-marquee { to { transform: translateX(-50%); } }
.lp-marquee:hover .lp-marquee__track { animation-play-state: paused; }

/* ---------- rail ---------- */
.lp-rail { display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem max(1.25rem, calc((100vw - 72rem) / 2)) 1.5rem; scrollbar-width: none; cursor: grab; }
.lp-rail::-webkit-scrollbar { display: none; }
.lp-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.lp-rail.is-dragging a { pointer-events: none; }
.lp-card { position: relative; flex: 0 0 clamp(14rem, 62vw, 17.5rem); scroll-snap-align: start; border-radius: 14px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); isolation: isolate; }
.lp-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(40, 28, 20, .45); }
.lp-card__img { aspect-ratio: 600 / 1000; overflow: hidden; background: var(--ivory); }
.lp-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.lp-card:hover .lp-card__img img { transform: scale(1.04); }
.lp-card__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: .9rem 1rem 1rem; }
.lp-card__name { font-weight: 800; letter-spacing: -.01em; }
.lp-card__tag { font-size: .8rem; color: var(--muted); line-height: 1.4; margin-top: .15rem; }
[data-spotlight] { --mx: 50%; --my: 50%; }
[data-spotlight]::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit; background: radial-gradient(22rem circle at var(--mx) var(--my), rgba(201, 164, 106, .16), transparent 45%); opacity: 0; transition: opacity .3s; }
[data-spotlight]:hover::after { opacity: 1; }

/* ---------- how it works ---------- */
.lp-how { background: #f4ede3; }
.lp-how__intro { text-align: center; margin-bottom: clamp(2rem, 6vw, 4rem); }
.lp-how__intro .lp-h2 { margin-top: .75rem; }
.lp-how__grid { display: grid; gap: 2rem; }
.lp-steps { display: grid; gap: 3.5rem; }
.lp-step__num { font-family: var(--serif); font-size: 1.4rem; color: var(--maroon); }
.lp-step__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.05; margin: .4rem 0 .9rem; }
.lp-step .t-lead { max-width: 30rem; color: var(--ink-2); }
.lp-step__img { width: min(70%, 16rem); margin-top: 1.75rem; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(40, 28, 20, .45); }
.lp-how__sticky { display: none; }
@media (min-width: 64rem) {
  .lp-how__grid { grid-template-columns: 1fr 1.1fr; gap: 4rem; }
  .lp-steps { gap: 0; }
  /* A step that is not the current one is set back, not dimmed away: the number and
     the heading soften to mark which step you are on, and the sentence underneath
     stays fully readable, because fading body text is only ever a way of making it
     unreadable. The behaviour and the copy are unchanged. */
  .lp-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
  .lp-step__num, .lp-step__title { transition: color .5s var(--ease), opacity .5s var(--ease); }
  .lp-step:not(.is-active) .lp-step__num { color: var(--ink-2); opacity: .75; }
  .lp-step:not(.is-active) .lp-step__title { opacity: .55; }
  .lp-step__img { display: none; }
  .lp-how__sticky { display: block; position: relative; }
  .lp-how__visual { position: sticky; top: calc(50vh - 17rem); height: 34rem; border-radius: 18px; background: var(--paper); box-shadow: 0 40px 80px -40px rgba(40, 28, 20, .4), 0 0 0 1px var(--line); overflow: hidden; }
}
.lp-scene { position: absolute; inset: 0; padding: 2rem; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
[data-active='1'] .lp-scene--1, [data-active='2'] .lp-scene--2, [data-active='3'] .lp-scene--3 { opacity: 1; transform: none; }
.lp-scene--1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-content: center; background: linear-gradient(#fbf8f3, #f4ede3); }
.lp-mini { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 10px 24px -14px rgba(40, 28, 20, .4); transition: transform .5s var(--ease), box-shadow .5s; transition-delay: calc(var(--i) * 40ms); }
.lp-mini img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; object-position: top; }
.lp-mini figcaption { font-size: .72rem; font-weight: 700; padding: .4rem .55rem; }
.lp-mini.is-picked { transform: translateY(-8px) scale(1.04); box-shadow: 0 0 0 2px var(--maroon), 0 24px 40px -18px rgba(40, 28, 20, .5); }
.lp-editor { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1.25rem; height: 100%; align-items: center; }
.lp-editor__panel { background: #fbf8f3; border: 1px solid var(--line); border-radius: 12px; padding: 1rem; display: grid; gap: .6rem; }
.lp-editor__label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lp-field { display: grid; gap: .2rem; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; padding: .5rem .65rem; }
.lp-field span { font-size: .7rem; color: var(--muted); font-weight: 600; }
.lp-field strong { font-size: .9rem; min-height: 1.3em; }
.lp-field strong.is-typing::after { content: ''; display: inline-block; width: 1px; height: 1em; background: var(--maroon); margin-left: 2px; vertical-align: -2px; animation: lp-caret .8s steps(1) infinite; }
@keyframes lp-caret { 50% { opacity: 0; } }
.lp-field--upload { grid-template-columns: auto 1fr; align-items: center; color: var(--success); background: var(--success-soft); border-color: transparent; }
.lp-field--upload span { color: var(--success); font-size: .8rem; }
.lp-editor__site { position: relative; height: 100%; border-radius: 12px; overflow: hidden; }
.lp-editor__site img { width: 100%; height: 100%; object-fit: cover; }
.lp-editor__overlay { position: absolute; inset: 0; display: grid; align-content: end; justify-items: center; text-align: center; padding: 1.5rem 1rem; color: #fff; background: linear-gradient(transparent 35%, rgba(20, 12, 10, .75)); gap: .2rem; }
.lp-editor__overlay strong { font-family: var(--serif); font-weight: 400; font-size: 2.1rem; line-height: 1.05; }
.lp-editor__overlay small { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.lp-scene--3 { display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #f5ecdf, #fff); }
.lp-share { width: min(100%, 22rem); display: grid; gap: .8rem; }
.lp-share__live { display: flex; gap: .7rem; align-items: center; padding: .9rem 1rem; border-radius: 12px; background: var(--success-soft); color: var(--success); }
.lp-share__live strong { display: block; color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.lp-share__live small { color: var(--ink-2); }
.lp-share__url { display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem; border-radius: 10px; border: 1px solid var(--line-strong); background: #fff; font-size: .85rem; font-weight: 600; }
.lp-share__url span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-share__url em { font-style: normal; font-size: .75rem; color: var(--maroon); font-weight: 800; }
.lp-share__row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.lp-share__btn { display: flex; align-items: center; justify-content: center; gap: .45rem; height: 2.6rem; border-radius: 10px; background: #fff; border: 1px solid var(--line-strong); font-size: .85rem; font-weight: 700; }
.lp-share__btn--wa { background: #1f7a4d; color: #fff; border-color: #1f7a4d; }
.lp-share__qr { width: 7rem; margin: .25rem auto 0; padding: .5rem; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.lp-share__qr img, .lp-share__qr canvas { width: 100% !important; height: auto !important; }

/* ---------- bento ---------- */
.lp-bento { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .lp-bento { grid-template-columns: repeat(3, 1fr); } .lp-tile--wide { grid-column: span 2; } }
.lp-tile { position: relative; overflow: hidden; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); padding: 1.5rem; display: grid; gap: 1.25rem; align-content: space-between; min-height: 16rem; isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.lp-tile:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -35px rgba(40, 28, 20, .4); }
.lp-tile h3 { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.1; }
.lp-tile p { color: var(--muted); margin-top: .5rem; max-width: 28rem; }
@media (min-width: 48rem) { .lp-tile--wide { grid-template-columns: 1fr 1fr; align-items: center; } }
.lp-timeline { display: grid; gap: .5rem; }
.lp-timeline li { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: .75rem; padding: .65rem .8rem; border-radius: 10px; background: #fbf8f3; border: 1px solid var(--line); font-size: .9rem; transition: transform .4s var(--ease); }
.lp-tile:hover .lp-timeline li:nth-child(2) { transform: translateX(6px); }
.lp-tile:hover .lp-timeline li:nth-child(3) { transform: translateX(12px); }
.lp-timeline span { font-size: .72rem; font-weight: 800; color: var(--maroon); text-transform: uppercase; }
.lp-timeline em { font-style: normal; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.lp-bars { display: grid; gap: .75rem; }
.lp-bars div { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: .75rem; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.lp-bars i { display: block; height: .6rem; border-radius: 999px; background: linear-gradient(90deg, var(--maroon), var(--terracotta)); width: 0; transition: width 1.2s var(--ease); }
.lp-tile.is-in .lp-bars i { width: var(--w); }
.lp-bars div:nth-child(2) i { background: var(--gold); transition-delay: .15s; }
.lp-bars div:nth-child(3) i { background: var(--line-strong); transition-delay: .3s; }
.lp-palettes { display: flex; gap: .6rem; }
.lp-palettes span { flex: 1; height: 5rem; border-radius: 10px; background: linear-gradient(180deg, var(--a) 0 45%, var(--b) 45% 60%, var(--c) 60%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: transform .45s var(--ease); }
.lp-tile:hover .lp-palettes span:nth-child(odd) { transform: translateY(-6px); }
.lp-tile:hover .lp-palettes span:nth-child(even) { transform: translateY(6px); }
.lp-wa { display: flex; gap: .6rem; align-items: flex-start; background: #e7f3ea; border-radius: 12px; padding: .9rem; }
.lp-wa span { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #1f7a4d; color: #fff; display: grid; place-items: center; flex: none; }
.lp-wa p { margin: 0; color: var(--ink-2); font-size: .85rem; background: #fff; padding: .55rem .7rem; border-radius: 0 10px 10px 10px; box-shadow: var(--shadow-sm); }
.lp-draft { display: flex; align-items: center; gap: .6rem; color: var(--faint); }
.lp-draft .badge { height: 1.8rem; padding: 0 .7rem; font-size: .8rem; }
.lp-photos { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: .6rem; height: 13rem; }
.lp-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; transition: transform .6s var(--ease); }
.lp-photos img:nth-child(2) { transform: translateY(1rem); }
.lp-tile:hover .lp-photos img:nth-child(1) { transform: translateY(-.5rem); }
.lp-tile:hover .lp-photos img:nth-child(3) { transform: translateY(.5rem); }

/* ---------- featured ---------- */
.lp-featured { background: #f7f2eb; }
.lp-featured__grid { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .lp-featured__grid { grid-template-columns: repeat(2, 1fr); } }
.lp-feat__img { border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); aspect-ratio: 16 / 10; }
.lp-feat__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.lp-feat:hover .lp-feat__img img { transform: scale(1.03); }
.lp-post { transition: transform .4s var(--ease), box-shadow .4s; }
.lp-post:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* ---------- faq ---------- */
.lp-faq { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .lp-faq { grid-template-columns: .8fr 1.2fr; gap: 4rem; } }
.lp-faq__list { border-top: 1px solid var(--line); }
.lp-q { border-bottom: 1px solid var(--line); }
.lp-q summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-weight: 700; font-size: 1.02rem; cursor: pointer; }
.lp-q summary::-webkit-details-marker { display: none; }
.lp-q summary .icon { transition: transform .3s var(--ease); color: var(--maroon); flex: none; }
.lp-q[open] summary .icon { transform: rotate(45deg); }
.lp-q p { padding: 0 2rem 1.25rem 0; color: var(--muted); }

/* ---------- final CTA ---------- */
.lp-final { position: relative; overflow: hidden; background: var(--primary); color: #f8ecdf; padding-block: clamp(4.5rem, 12vw, 8rem); }
.lp-final::before { content: ''; position: absolute; inset: 0; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 4 C39 18 46 25 60 32 C46 39 39 46 32 60 C25 46 18 39 4 32 C18 25 25 18 32 4Z' fill='none' stroke='%23c9a46a' stroke-opacity='.18' stroke-width='.8'/%3E%3C/svg%3E"); }
.lp-final__inner { position: relative; display: grid; justify-items: center; text-align: center; gap: 2.25rem; }
.lp-final__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02; }
.lp-final__title em { color: #d9b77e; }
.lp-final__btn { background: #f8ecdf; color: var(--primary); }
.lp-final__btn:hover { background: #fff; }

/* =====================================================================
   Four sections added to the landing page. They use the page's existing
   tokens, type scale and section rhythm, so they read as more of the same
   page rather than components brought in from somewhere else.
   ===================================================================== */

/* ---------- choose a mood ----------
   The section borrows the chosen world's own colours through three custom
   properties the picker sets; nothing else about it changes. */
.lp-mood { position: relative; isolation: isolate; }
.lp-mood__wash { position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background:
    radial-gradient(42rem 26rem at 88% 8%, color-mix(in srgb, var(--mood-a, #6B1B22) 16%, transparent), transparent 72%),
    radial-gradient(34rem 22rem at 4% 92%, color-mix(in srgb, var(--mood-b, #D9922E) 14%, transparent), transparent 72%);
  transition: background 1.1s var(--ease); }
.lp-mood__grid { display: grid; gap: clamp(1.5rem, 4vw, 2.75rem); }
@media (min-width: 62rem) { .lp-mood__grid { grid-template-columns: 15.5rem minmax(0, 1fr); align-items: start; } }

.lp-mood__picker { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; scroll-snap-type: x proximity; }
.lp-mood__picker::-webkit-scrollbar { display: none; }
@media (min-width: 62rem) { .lp-mood__picker { display: grid; gap: .15rem; overflow: visible; padding: 0; } }
.lp-mood__tab { flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .55); border-radius: 999px;
  padding: .5rem .9rem .5rem .55rem; text-align: left; min-height: 2.75rem;
  transition: background-color .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s; }
@media (min-width: 62rem) {
  .lp-mood__tab { width: 100%; border-radius: 10px; border-color: transparent; background: transparent; padding: .7rem .8rem; min-height: 3.1rem; }
  .lp-mood__tab:hover { background: rgba(255, 255, 255, .6); }
  .lp-mood__tab.is-active { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-sm); }
}
.lp-mood__tab.is-active { background: var(--paper); border-color: var(--line-strong); }
.lp-mood__dots { display: flex; flex: none; }
.lp-mood__dots i { width: .85rem; height: .85rem; border-radius: 50%; border: 1.5px solid var(--paper); margin-left: -.3rem; }
.lp-mood__dots i:first-child { margin-left: 0; }
.lp-mood__name { flex: 1; min-width: 0; font-weight: 700; font-size: .92rem; white-space: nowrap; }
.lp-mood__arrow { opacity: 0; color: var(--maroon); transform: translateX(-4px); transition: opacity .25s, transform .25s var(--ease); display: none; }
@media (min-width: 62rem) { .lp-mood__arrow { display: block; } }
.lp-mood__tab.is-active .lp-mood__arrow { opacity: 1; transform: none; }

.lp-mood__stage { position: relative; min-width: 0; }
.lp-mood__panel { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .lp-mood__panel { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; align-items: stretch; } }
.lp-mood__photo { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--ivory); box-shadow: var(--shadow); }
.lp-mood__photo img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.lp-mood__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.1rem 1.1rem;
  color: #fff; font-family: var(--serif); font-size: clamp(1.05rem, 2.4vw, 1.35rem); line-height: 1.3; text-wrap: pretty;
  background: linear-gradient(to top, rgba(22, 14, 10, .82), transparent); }
.lp-mood__designs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (min-width: 48rem) { .lp-mood__designs { grid-template-columns: 1fr; gap: .5rem; align-content: space-between; } }
.lp-mood__design { display: grid; gap: .45rem; text-decoration: none; color: inherit; }
@media (min-width: 48rem) {
  .lp-mood__design { grid-template-columns: 2.9rem minmax(0, 1fr); align-items: center; gap: .8rem;
    background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: .5rem; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
  .lp-mood__design:hover { border-color: var(--line-strong); transform: translateX(3px); box-shadow: var(--shadow-sm); }
}
.lp-mood__thumb { display: block; border-radius: 8px; overflow: hidden; background: var(--ivory); }
.lp-mood__thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; display: block; }
@media (min-width: 48rem) { .lp-mood__thumb img { aspect-ratio: 3 / 4; } }
.lp-mood__meta { display: grid; gap: .1rem; min-width: 0; }
.lp-mood__meta strong { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-mood__meta small { font-size: .75rem; color: var(--muted); }

/* ---------- your invitation, page by page ----------
   Wide screens: the section is pinned and the track is moved sideways by scroll.
   Narrow screens: the same track is a swipeable strip with snap points. */
.lp-pages { overflow: hidden; }
.lp-pages__head { text-align: center; max-width: 42rem; margin-inline: auto; }
.lp-pages__lead { margin: 1rem auto 0; color: var(--muted); }
.lp-pages__viewport { margin-top: clamp(2rem, 5vw, 3.25rem); }
.lp-pages__track { display: flex; gap: clamp(.85rem, 2.5vw, 1.5rem); list-style: none; margin: 0;
  padding-inline: max(1.25rem, calc((100vw - 72rem) / 2)); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lp-pages__track::-webkit-scrollbar { display: none; }
.lp-page { flex: 0 0 min(78vw, 20rem); scroll-snap-align: center; display: grid; gap: .9rem; }
.lp-page__frame { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--ivory); box-shadow: var(--shadow); }
.lp-page__frame img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.lp-page:hover .lp-page__frame img { transform: scale(1.04); }
.lp-page__tag { position: absolute; left: .7rem; top: .7rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; background: rgba(255, 255, 255, .92); color: var(--ink); padding: .3rem .6rem; border-radius: 999px; }
.lp-page__text { display: grid; gap: .35rem; }
/* The gold this page uses elsewhere sits at 3.3:1 on ivory, which is fine behind a
   swatch and not fine as a number somebody has to read. */
.lp-page__n { font-family: var(--serif); font-size: .95rem; font-weight: 700; letter-spacing: .06em; color: #7c5c24; }
.lp-page__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.15; }
.lp-page__text p { color: var(--ink-2); font-size: .9375rem; text-wrap: pretty; }
.lp-pages__rail { margin-top: 1.5rem; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.lp-pages__rail i { display: block; height: 100%; width: 12%; background: var(--maroon); border-radius: 2px; transition: transform .1s linear; transform-origin: left; }

@media (min-width: 64rem) {
  /* While it is pinned the section is exactly one screen: heading, pages and rail all
     inside it, vertically centred. Anything taller and the pin would hold the heading
     at the top with the pages below the fold — which is what it used to do. */
  .lp-pages.is-pinned { height: 100svh; padding-block: clamp(5rem, 9vh, 6.5rem) 2rem; overflow: hidden;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(1rem, 2.5vh, 2rem);
    /* The track is deliberately wider than the screen. Without this the one implicit
       column grows to fit it, and everything else in the section centres itself inside
       that wider column instead of inside the screen. */
    grid-template-columns: minmax(0, 1fr); }
  .lp-pages.is-pinned .lp-pages__head { margin-block: 0; justify-self: center; }
  .lp-pages.is-pinned .lp-pages__lead { margin-top: .6rem; }
  .lp-pages.is-pinned .lp-pages__viewport { margin: 0; min-height: 0; display: flex; align-items: center; }
  .lp-pages.is-pinned .lp-pages__rail { margin: 0; justify-self: center; width: min(100% - 2.5rem, 72rem); }
  .lp-pages.is-pinned .lp-pages__track { overflow: visible; padding-inline: 0; margin-inline: auto;
    width: max-content; scroll-snap-type: none; will-change: transform; max-height: 100%; }
  /* The card fills the height the screen has left rather than claiming a shape of its
     own: the whole section has to fit one screen while it is held there. */
  .lp-pages.is-pinned .lp-page { flex-basis: 20rem; display: grid; grid-template-rows: minmax(0, 1fr) auto;
    max-height: 100%; }
  .lp-pages.is-pinned .lp-page__frame { min-height: 0; }
  .lp-pages.is-pinned .lp-page__frame img { height: 100%; aspect-ratio: auto; object-fit: cover; }
}

/* ---------- the RSVP moment ---------- */
.lp-rsvp__grid { display: grid; gap: clamp(1rem, 3vw, 1.75rem); align-items: start; }
@media (min-width: 58rem) { .lp-rsvp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.lp-rsvp__card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(1.25rem, 4vw, 2rem); box-shadow: var(--shadow); }
.lp-rsvp__eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.lp-rsvp__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.1; margin-top: .5rem; }
.lp-rsvp__note { color: var(--muted); font-size: .9rem; margin-top: .4rem; }
.lp-rsvp__label { display: block; font-size: .78rem; font-weight: 700; color: var(--ink-2); margin: 1.25rem 0 .4rem; }
.lp-rsvp__input { width: 100%; min-height: 2.9rem; padding: .6rem .8rem; border: 1px solid var(--line-strong);
  border-radius: 9px; background: var(--canvas); font-size: 1rem; color: inherit; }
.lp-rsvp__input:focus { outline: none; border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(138, 59, 69, .14); }
.lp-rsvp__choices { display: grid; gap: .5rem; }
@media (min-width: 30rem) { .lp-rsvp__choices { grid-template-columns: 1fr 1fr; } }
.lp-rsvp__choice { min-height: 3rem; padding: .6rem .8rem; border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--canvas); font-size: .9rem; font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s; }
.lp-rsvp__choice.is-on { border-color: var(--maroon); background: var(--maroon-soft); color: var(--maroon); box-shadow: inset 0 0 0 1px var(--maroon); }
.lp-rsvp__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lp-rsvp__row[hidden] { display: none; }
.lp-rsvp__row .lp-rsvp__label { margin-bottom: 0; }
.lp-rsvp__stepper { display: flex; align-items: center; gap: .2rem; border: 1px solid var(--line-strong); border-radius: 9px; padding: .2rem; margin-top: 1.25rem; }
.lp-rsvp__stepper button { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 0; background: transparent; border-radius: 7px; color: var(--ink-2); cursor: pointer; }
.lp-rsvp__stepper button:hover { background: var(--ivory); color: var(--ink); }
.lp-rsvp__stepper output { min-width: 2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-rsvp__send { margin-top: 1.5rem; width: 100%; min-height: 3.1rem; display: inline-flex; align-items: center;
  justify-content: center; gap: .5rem; border: 0; border-radius: 999px; background: var(--maroon); color: #fff;
  font-weight: 700; font-size: .95rem; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s, opacity .2s; }
.lp-rsvp__send:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -16px rgba(138, 59, 69, .8); }
.lp-rsvp__send[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.lp-rsvp__fine { margin-top: .8rem; font-size: .75rem; color: var(--muted); text-align: center; }

.lp-rsvp__list { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.lp-rsvp__listhead { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); font-weight: 700; font-size: .9rem; }
.lp-rsvp__listhead > span { display: inline-flex; align-items: center; gap: .45rem; }
.lp-rsvp__live { font-size: .72rem; color: var(--sage); background: rgba(108, 130, 104, .12); padding: .25rem .55rem; border-radius: 999px; }
.lp-rsvp__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.lp-rsvp__stats div { padding: .9rem 1.1rem; display: grid; gap: .1rem; border-left: 1px solid var(--line); }
.lp-rsvp__stats div:first-child { border-left: 0; }
.lp-rsvp__stats strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.lp-rsvp__stats span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lp-rsvp__rows { list-style: none; margin: 0; padding: 0; max-height: 17rem; overflow-y: auto; }
.lp-rsvp__row-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.lp-rsvp__row-item.is-new { animation: lp-rsvp-in .6s var(--ease) both; }
@keyframes lp-rsvp-in { from { opacity: 0; transform: translateY(-8px); background: var(--maroon-soft); } }
.lp-rsvp__who { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.lp-rsvp__badge { flex: none; font-size: .72rem; font-weight: 700; padding: .25rem .55rem; border-radius: 999px; white-space: nowrap; }
.lp-rsvp__badge.is-going { background: rgba(108, 130, 104, .16); color: #4b6047; }
.lp-rsvp__badge.is-pending { background: var(--gold-soft); color: #7a5c2c; }
.lp-rsvp__badge.is-no { background: var(--ivory); color: var(--muted); }
.lp-rsvp__more { display: flex; align-items: center; gap: .4rem; padding: .9rem 1.1rem; font-size: .84rem;
  font-weight: 600; color: var(--maroon); text-decoration: none; }
.lp-rsvp__more:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- made for an Indian wedding ---------- */
.lp-made__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 60rem) { .lp-made__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); } }
@media (min-width: 60rem) { .lp-made__copy { position: sticky; top: 6rem; } }
.lp-made__copy .t-lead { margin-top: 1.25rem; color: var(--muted); max-width: 30rem; }
.lp-made__copy .btn { margin-top: 1.75rem; }
.lp-made__list { list-style: none; margin: 0; padding: 0; display: grid; }
.lp-made__item { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .3rem .9rem;
  padding: 1.25rem 0; border-top: 1px solid var(--line); align-items: start; }
.lp-made__item:first-child { border-top: 0; padding-top: 0; }
.lp-made__mark { grid-row: span 2; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-soft); color: var(--gold); }
.lp-made__item strong { font-size: 1.02rem; }
.lp-made__item span:last-child { color: var(--muted); font-size: .9375rem; text-wrap: pretty; }

/* motion: these sections are revealed by GSAP where it loaded, and by the page's own
   .reveal observer otherwise. Either way the finished state is the default for anyone
   who has asked for less movement. */
.lp-made__item, .lp-page { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .lp-mood__wash, .lp-mood__tab, .lp-page__frame img, .lp-rsvp__send { transition: none; }
  .lp-rsvp__row-item.is-new { animation: none; }
}