/* The storefront (the homepage has its own home.css): sign-up, setup questions and account pages. */
:root { --top-h: 4.25rem; }

.skip { position: fixed; top: var(--space-xs); left: var(--space-xs); z-index: 60; padding: var(--space-xs) var(--space-md); background: var(--ink); color: var(--paper); border-radius: 999px; transform: translateY(-200%); }
.skip:focus { transform: none; }
.btn--big { min-height: 3.5rem; padding: 0 var(--space-xl); font-size: var(--step-0); letter-spacing: 0.01em; }
.notice { padding: var(--space-md) var(--space-lg); border-radius: 0.75rem; background: var(--haze); max-width: 34rem; }
.toast {
  position: fixed; left: 50%; bottom: var(--space-xl); z-index: 30; translate: -50% 0; padding: var(--space-sm) var(--space-lg);
  border-radius: 999px; background: var(--ink); color: var(--paper); font-size: var(--step--1); font-weight: 600;
  opacity: 0; transform: translateY(1rem); pointer-events: none; transition: opacity 0.3s, transform 0.5s var(--out);
}
.toast.is-on { opacity: 1; transform: none; }

/* ---------- top bar ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--top-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  padding: 0 var(--gutter); transition: background-color 0.4s var(--out-quart), box-shadow 0.4s var(--out-quart);
}
.top.is-stuck { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.top--plain { position: static; padding: 0; }
.top__brand { display: block; flex: none; text-decoration: none; }
.top__brand img { display: block; height: 2.15rem; width: auto; }
.lone__mark { display: block; height: 3.6rem; width: auto; margin-bottom: calc(var(--space-xs) * -1); }
.top__links { display: flex; align-items: center; gap: clamp(0.9rem, 2.4vw, 2.25rem); }
.top__links a { font-size: var(--step--1); font-weight: 500; text-decoration: none; white-space: nowrap; }
.top__links a:not(.top__cta):hover { color: var(--blue); }
.top__cta { padding: 0.6rem 1.15rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600 !important; transition: background-color 0.25s var(--out-quart); }
.top__cta:hover { background: var(--blue); }
@media (max-width: 44rem) { .top__links a[href^='#'] { display: none; } }


/* ---------- small standalone pages (sign in, account, not found) ---------- */
.lone { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; gap: var(--space-2xl); padding: var(--space-md) var(--gutter) var(--space-3xl); background: linear-gradient(to bottom, var(--sky), var(--haze) 38%, var(--paper) 75%); }
.lone__main { display: grid; gap: var(--space-lg); align-content: center; justify-items: start; width: min(100%, 30rem); }
.lone__main--wide { width: min(100%, 60rem); align-content: start; padding-top: var(--space-2xl); }
.lone__main h1 { font-size: var(--step-3); }
.lone__foot { font-size: var(--step--1); }
.stack { display: grid; gap: var(--space-xl); width: 100%; }
.stack__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--space-xl) var(--space-lg); }

.acct { display: grid; gap: var(--space-xl); width: 100%; }
.acct__site { display: grid; gap: var(--space-lg); padding: var(--space-xl); border-radius: 0.75rem; background: linear-gradient(160deg, var(--haze), var(--mist)); }
.acct__site h2 { font-size: var(--step-2); }
.acct__site h2 em { font-style: normal; color: var(--blue); }
.acct__url { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; font-weight: 500; overflow-wrap: anywhere; }
.acct__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); align-items: center; }

/* ---------- sign-up ---------- */
.start { min-height: 100svh; display: grid; }
@media (min-width: 60rem) { .start { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); } }
.start__form { display: grid; grid-template-rows: auto 1fr; gap: var(--space-2xl); padding: var(--space-md) var(--gutter) var(--space-3xl); }
.start__form > .stack { align-content: center; max-width: 36rem; }
.start__form h1 { font-size: var(--step-3); }
.slug { display: flex; align-items: baseline; border-bottom: 1px solid var(--ink-soft); }
.slug span { color: var(--ink-soft); white-space: nowrap; }
.slug input { flex: 1; min-width: 6rem; min-height: 3rem; border: 0; background: transparent; font-weight: 600; }
.slug input:focus-visible { outline: none; }
/* With the domain after the name, the box hugs the name so the domain reads straight on from it. */
.slug--suffix input { flex: 0 1 auto; min-width: 2ch; }
.slug:focus-within { border-color: var(--blue); box-shadow: 0 1px 0 0 var(--blue); }
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-sm); border: 0; padding: 0; margin: 0; }
.swatches legend { padding: 0; margin-bottom: var(--space-sm); font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
.swatches label { position: relative; display: flex; align-items: center; gap: var(--space-xs); padding: 0.45rem 0.9rem 0.45rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; font-size: var(--step--1); font-weight: 600; color: oklch(0.24 0.045 256); transition: border-color 0.2s, background-color 0.2s; }
.swatches label::before { content: ''; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: linear-gradient(to bottom, var(--sky-deep), var(--haze)); }
.swatches input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.swatches label:has(:checked) { border-color: oklch(0.24 0.045 256); background: var(--mist); }
.swatches label:has(:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.ticks { display: grid; }
.ticks li { padding: var(--space-sm) 0 var(--space-sm) 1.75rem; border-top: 1px solid var(--line); position: relative; }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before { content: ''; position: absolute; left: 0.2rem; top: 1.15rem; width: 0.7rem; height: 0.35rem; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }

.start__preview {
  position: relative; display: grid; align-content: end; gap: var(--space-md); min-height: 22rem; padding: var(--gutter);
  background: linear-gradient(to bottom, var(--sky-deep), var(--sky) 35%, var(--haze) 70%, var(--paper)); color: var(--ink);
  transition: background 0.6s;
}
@media (max-width: 59.99rem) { .start__preview { order: -1; min-height: 15rem; } .start__form .top { display: none; } }
.start__names { font-size: clamp(3rem, 1.5rem + 6.5vw, 8rem); line-height: 0.88; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.start__names > span { display: block; }
.start__names .pv-two { padding-left: clamp(0.5rem, 5vw, 4rem); }
.start__names em { font-style: normal; color: var(--blue); margin-right: 0.14em; }
.start__addr { font-weight: 500; overflow-wrap: anywhere; }

/* ---------- setup questions ---------- */
.setup { min-height: 100svh; display: grid; grid-template-rows: auto auto 1fr; }
.setup__top { padding: var(--space-md) var(--gutter); }
.setup__count { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.setup__bar { height: 3px; background: var(--line); }
.setup__bar span { display: block; height: 100%; background: var(--blue); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 0.8s var(--out); }
.setup__body { display: grid; gap: var(--space-2xl); padding: clamp(2rem, 6vw, 5rem) var(--gutter) var(--space-4xl); align-items: start; }
@media (min-width: 62rem) { .setup__body { grid-template-columns: 13rem minmax(0, 46rem); gap: clamp(3rem, 8vw, 8rem); } }
.setup__steps { display: none; position: sticky; top: var(--space-xl); }
@media (min-width: 62rem) { .setup__steps { display: grid; gap: var(--space-2xs); } }
.setup__steps button { display: flex; gap: var(--space-sm); width: 100%; padding: var(--space-xs) 0; border: 0; background: none; text-align: left; font-size: var(--step--1); font-weight: 500; color: var(--ink-soft); }
.setup__steps button span { font-variant-numeric: tabular-nums; color: var(--sky-ink); }
.setup__steps button[aria-current='step'] { color: var(--ink); font-weight: 600; }
.setup__steps button[disabled] { cursor: default; opacity: 0.55; }
.q { display: grid; gap: var(--space-xl); animation: q-in 0.9s var(--out); }
@keyframes q-in { from { opacity: 0; transform: translateY(1.5rem); } }
.q h1 { font-size: var(--step-3); max-width: 14ch; }
.q .lede { max-width: 44ch; color: var(--ink-soft); }
.q__sub { font-size: var(--step-2); margin-top: var(--space-lg); }
.setup__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.setup__nav .form-msg { flex: 1; text-align: right; }
.row { display: grid; gap: var(--space-md) var(--space-lg); grid-template-columns: var(--cols); align-items: start; padding: var(--space-md) 0; border-top: 1px solid var(--line); }
.row .field textarea { min-height: 3rem; }
.row .rm { align-self: center; min-height: 2.75rem; color: var(--warn); font-size: var(--step--1); }
@media (max-width: 44rem) { .row { grid-template-columns: 1fr; } .row .rm { justify-self: start; } }
.row-add { margin-top: var(--space-sm); justify-self: start; }
[data-list] { display: grid; }
.finder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.finder__map { position: relative; aspect-ratio: 16 / 7; min-height: 12rem; border-radius: 0.375rem; overflow: hidden; background: var(--mist); }
.finder__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.drop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--space-sm); }
.thumbs li { position: relative; }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.375rem; background: var(--mist); }
.thumbs button { position: absolute; top: 0.3rem; right: 0.3rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper); line-height: 1; }
#video-preview { width: 100%; border-radius: 0.375rem; background: var(--ink); }
.q--done h1 { font-size: clamp(3rem, 1.5rem + 7vw, 7.5rem); max-width: none; line-height: 0.92; }
.first-guest { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: 0.75rem; background: var(--mist); }
.first-guest .q__sub { margin-top: 0; }
.pair--guest { grid-template-columns: minmax(10rem, 1fr) 5.5rem auto; align-items: end; }
@media (max-width: 36rem) { .pair--guest { grid-template-columns: 1fr; } }
.guest-code { font-size: var(--step-1); line-height: 1.4; }
.guest-code strong { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.12em; }

/* ---------- own domain ---------- */
.domain { border-top: 1px solid oklch(0.24 0.045 256 / 0.18); padding-top: var(--space-md); }
.domain summary { cursor: pointer; font-weight: 600; width: fit-content; }
.domain__body { display: grid; gap: var(--space-md); margin-top: var(--space-md); max-width: 44rem; }
.domain__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: end; }
.domain__steps { display: grid; gap: var(--space-sm); }
.domain dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-lg); margin: 0; padding: var(--space-md) var(--space-lg); border-radius: 0.5rem; background: var(--paper); }
.domain dt { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
.domain dd { margin: 0; overflow-wrap: anywhere; }
.domain code { font: 600 0.95em ui-monospace, 'SF Mono', Menlo, monospace; }

/* ====================================================================== */
/* Setup questions: writing the invitation at a sunlit linen desk          */
/* ====================================================================== */
.setup { background: linear-gradient(to bottom, var(--paper) 3rem, transparent 10rem) fixed, url('/media/home/table.jpg') center / cover fixed, #f7f2ea; }
.setup__top { position: relative; z-index: 2; padding: var(--space-md) var(--gutter); background: oklch(0.99 0.006 70 / 0.85); backdrop-filter: blur(6px); }
.setup__bar { position: relative; z-index: 2; height: 4px; background: oklch(0.4 0.03 60 / 0.1); }
.setup__bar span { background: linear-gradient(90deg, var(--sky-deep), var(--blue)); border-radius: 0 999px 999px 0; }
.setup__body { padding-top: clamp(2rem, 5vw, 4rem); }
@media (min-width: 62rem) { .setup__body { grid-template-columns: 13rem minmax(0, 44rem); gap: clamp(2rem, 5vw, 4.5rem); } }
@media (min-width: 84rem) { .setup__body { grid-template-columns: 13rem minmax(0, 44rem) minmax(17rem, 22rem); } }

/* The trail: each step's keepsake, ticked once it is behind you. */
.setup__steps { gap: 0.35rem; }
.setup__steps button { align-items: center; gap: 0.6rem; padding: 0.35rem 0.4rem; border-radius: 0.6rem; transition: background-color 0.25s; }
.setup__steps button:not([disabled]):hover { background: oklch(1 0 0 / 0.6); }
.setup__steps button[aria-current='step'] { background: oklch(1 0 0 / 0.75); box-shadow: 0 0.4rem 0.8rem -0.5rem oklch(0.3 0.04 60 / 0.35); }
.trail__obj { position: relative; flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; }
.trail__obj img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 3px 3px oklch(0.3 0.04 60 / 0.3)) grayscale(0.5); opacity: 0.6; transition: filter 0.4s, opacity 0.4s, transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1); }
.setup__steps button[aria-current='step'] .trail__obj img, .setup__steps button.is-done .trail__obj img { filter: drop-shadow(0 3px 3px oklch(0.3 0.04 60 / 0.3)); opacity: 1; }
.setup__steps button[aria-current='step'] .trail__obj img { transform: scale(1.15) rotate(-6deg); }
.trail__tick { position: absolute; right: -0.25rem; bottom: -0.15rem; display: grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; font-size: 0.6rem; font-style: normal; color: var(--paper); background: var(--blue); transform: scale(0); transition: transform 0.4s cubic-bezier(0.34, 1.5, 0.64, 1); }
.setup__steps button.is-done .trail__tick { transform: scale(1); }
.trail__n { font-variant-numeric: tabular-nums; color: var(--sky-ink); }

/* Each question is a paper card on the desk, with its object leaning in. */
.q { position: relative; padding: clamp(1.6rem, 4vw, 2.8rem); border-radius: 0.25rem; background: url('/media/home/paper.jpg') center / 24rem auto, #fdfaf4;
  box-shadow: 0 0 0 1px oklch(0.4 0.03 60 / 0.08), 0 2rem 3rem -1.6rem oklch(0.3 0.04 60 / 0.45), 0 0.3rem 0.5rem oklch(0.3 0.04 60 / 0.06);
  animation: q-next 0.75s cubic-bezier(0.16, 1, 0.3, 1); }
.q.is-back { animation-name: q-prev; }
@keyframes q-next { from { opacity: 0; transform: translateX(2.5rem) rotate(1.2deg); } }
@keyframes q-prev { from { opacity: 0; transform: translateX(-2.5rem) rotate(-1.2deg); } }
.q h1 { padding-right: 7rem; }
.q .lede { padding-right: 4rem; }
.q__obj { position: absolute; z-index: 2; top: -2.8rem; right: -1.6rem; width: clamp(7.5rem, 12vw, 10.5rem); height: auto; pointer-events: none;
  filter: drop-shadow(0 1.3rem 1.1rem oklch(0.3 0.04 60 / 0.35)); animation: obj-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both, obj-bob 7s ease-in-out 1s infinite alternate; }
@keyframes obj-in { from { opacity: 0; transform: translate(1.5rem, -1rem) rotate(14deg) scale(0.85); } }
@keyframes obj-bob { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-0.45rem) rotate(1.2deg); } }
@media (max-width: 40rem) { .q__obj { width: 6rem; top: -2rem; right: -0.6rem; } .q h1 { padding-right: 4rem; } .q .lede { padding-right: 0; } }
.q .field input, .q .field select, .q .field textarea { background: oklch(1 0 0 / 0.7); }
.field__help { display: block; margin-top: 0.4rem; min-height: 1.1em; font-size: 0.85rem; color: var(--blue); }

/* Reassurance under every question. */
.reassure { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--space-lg); font-size: var(--step--1); color: var(--ink-soft); }
.reassure span { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; font-size: 0.7rem; color: var(--paper); background: var(--blue); }
.setup__nav { margin-top: var(--space-md); padding: 0.8rem 0.8rem 0.8rem 1.2rem; border-top: 0; border-radius: 999px; background: oklch(0.99 0.006 70 / 0.88); backdrop-filter: blur(6px); box-shadow: 0 0 0 1px var(--line), 0 1rem 1.6rem -0.9rem oklch(0.3 0.04 60 / 0.4); }

/* 1. Names written large; colours as little scenes. */
.names { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-md); align-items: end; }
.field--big input { font-family: var(--display); font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); min-height: 3.8rem; }
.names__amp { padding-bottom: 0.45rem; font-size: 2.6rem; line-height: 1; color: var(--blue); animation: amp 3s ease-in-out infinite; }
@keyframes amp { 50% { transform: scale(1.12) rotate(-4deg); } }
@media (max-width: 40rem) { .names { grid-template-columns: 1fr; } .names__amp { display: none; } }
.scenes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; border: 0; padding: 0; margin: 0; }
.scenes legend { padding: 0; margin-bottom: 0.6rem; font-size: var(--step--1); font-weight: 600; }
@media (max-width: 40rem) { .scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scene { position: relative; display: grid; gap: 0.4rem; cursor: pointer; }
.scene input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.scene__img { display: block; aspect-ratio: 16 / 10; border-radius: 0.3rem; border: 3px solid #fff; background: center / cover;
  box-shadow: 0 0 0 1px oklch(0.4 0.03 60 / 0.12), 0 0.6rem 1rem -0.6rem oklch(0.3 0.04 60 / 0.45); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s; }
.scene__name { font-size: 0.85rem; font-weight: 500; text-align: center; }
.scene:hover .scene__img { transform: translateY(-3px) rotate(-1deg); }
.scene:has(:checked) .scene__img { transform: translateY(-5px) scale(1.03); box-shadow: 0 0 0 2px var(--blue), 0 1.1rem 1.5rem -0.7rem oklch(0.3 0.04 60 / 0.55); }
.scene:has(:checked) .scene__name { color: var(--blue); font-weight: 600; }
.scene:has(:focus-visible) .scene__img { outline: 2px solid var(--ink); outline-offset: 3px; }

/* 2. The countdown. */
.countdown { display: flex; align-items: baseline; gap: 0.8rem; padding: 1rem 1.4rem; border-radius: 0.3rem; background: oklch(1 0 0 / 0.6); box-shadow: inset 0 0 0 1px oklch(0.4 0.03 60 / 0.1); justify-self: start; }
.countdown__n { font-size: clamp(3rem, 2rem + 4vw, 4.5rem); line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.countdown__word { font-family: var(--display); font-size: 1.3rem; }

/* 3. The map, framed, with a pin that drops in. */
.finder__map { border: 0.5rem solid #fff; border-radius: 0.2rem; rotate: -0.5deg; box-shadow: 0 0 0 1px oklch(0.4 0.03 60 / 0.1), 0 1rem 1.6rem -1rem oklch(0.3 0.04 60 / 0.45); }
.finder__map::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2.2rem; height: 2.2rem; translate: -50% -100%; pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 31s10-11 10-19A10 10 0 0 0 2 12c0 8 10 19 10 19z' fill='%239b2f45'/%3E%3Ccircle cx='12' cy='12' r='4' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 6px 4px rgb(0 0 0 / 0.3)); }
.finder__map.is-dropped::after { animation: pin-drop 1.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes pin-drop { 0% { opacity: 0; transform: translateY(-3rem); } 30% { opacity: 1; transform: translateY(0); } 40% { transform: translateY(-0.4rem); } 50% { transform: translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; } }

/* 4. Story rows are postcards, stamped with their year; the honeymoon is sealed with wax. */
.row--story { position: relative; padding: 1.1rem 6rem 1.1rem 1.1rem; margin-bottom: 1rem; border: 0; border-radius: 0.2rem; background: #fffdf8;
  box-shadow: 0 0 0 1px oklch(0.4 0.03 60 / 0.1), 0 0.8rem 1.2rem -0.8rem oklch(0.3 0.04 60 / 0.4); }
.row--story:nth-child(odd) { rotate: -0.5deg; }
.row--story:nth-child(even) { rotate: 0.5deg; }
.stamp { position: absolute; top: 0.8rem; right: 0.8rem; display: grid; justify-items: center; gap: 0.05rem; width: 4.2rem; padding: 0.5rem 0.3rem; rotate: 4deg; background: var(--haze); color: var(--blue);
  -webkit-mask: radial-gradient(circle, #0000 0.18rem, #000 0.2rem) -0.32rem -0.32rem / 0.64rem 0.64rem round, linear-gradient(#000 0 0) center / calc(100% - 0.7rem) calc(100% - 0.7rem) no-repeat;
  mask: radial-gradient(circle, #0000 0.18rem, #000 0.2rem) -0.32rem -0.32rem / 0.64rem 0.64rem round, linear-gradient(#000 0 0) center / calc(100% - 0.7rem) calc(100% - 0.7rem) no-repeat; }
.stamp small { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.stamp b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
@media (max-width: 44rem) { .row--story { padding-right: 1.1rem; padding-top: 3.8rem; } }
.sealed { position: relative; padding: 1.2rem 1.2rem 1.2rem 5.2rem; border-radius: 0.2rem; background: oklch(0.97 0.012 60);
  box-shadow: inset 0 0 0 1px oklch(0.4 0.03 60 / 0.12); }
.sealed__seal { position: absolute; left: 1rem; top: 1rem; width: 3.4rem; filter: drop-shadow(0 4px 4px rgb(60 20 20 / 0.35)); }

/* 5. The schedule as an order of the day: a line of time down the side. */
.row--schedule { position: relative; padding-left: 1.6rem; border-top: 0; }
.row--schedule::before { content: ''; position: absolute; left: 0.35rem; top: 0; bottom: 0; width: 2px; background: color-mix(in oklch, var(--blue) 25%, transparent); }
.row--schedule::after { content: ''; position: absolute; left: 0; top: 2.9rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--blue); }

/* 6. Questions guests ask: notecards. */
.row--details, .row--parking { padding: 1rem; margin-bottom: 0.8rem; border: 0; border-radius: 0.2rem; background: #fffdf8; box-shadow: 0 0 0 1px oklch(0.4 0.03 60 / 0.1), 0 0.7rem 1rem -0.7rem oklch(0.3 0.04 60 / 0.4); }
.row--details:nth-child(odd) { rotate: -0.4deg; }
.row { animation: row-in 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.row.is-leaving { transition: opacity 0.3s, transform 0.35s; opacity: 0; transform: translateX(1.5rem) rotate(2deg); }
@keyframes row-in { from { opacity: 0; transform: translateY(-0.5rem); } }

/* 7. Photos: an album page with prints. */
.album { display: grid; gap: var(--space-lg); padding: 1.4rem; border-radius: 0.2rem; background: oklch(0.96 0.015 70); box-shadow: inset 0 0 0 1px oklch(0.4 0.03 60 / 0.12), inset 0 0.5rem 1rem -0.6rem oklch(0.3 0.04 60 / 0.25); }
.album .thumbs { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 1.2rem 1rem; }
.album .thumbs:empty::before { content: 'Your prints will appear here.'; grid-column: 1 / -1; padding: 1.5rem 0; font-family: var(--display); color: var(--ink-soft); text-align: center; }
.print { padding: 0.4rem 0.4rem 1.1rem; background: #fff; rotate: var(--r, 0deg); box-shadow: 0 0 0 1px oklch(0.4 0.03 60 / 0.08), 0 0.8rem 1rem -0.6rem oklch(0.3 0.04 60 / 0.45); animation: print-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.print img { border-radius: 0; }
@keyframes print-in { from { opacity: 0; transform: translateY(-1.2rem) scale(1.1) rotate(-8deg); } }

/* The invitation, filling itself in beside the questions. */
.setup__invite { display: none; }
@media (min-width: 84rem) { .setup__invite { display: grid; gap: 0.6rem; justify-items: center; position: sticky; top: 2rem; } }
.setup__invite[hidden] { display: none !important; }
.invite-card { position: relative; width: 100%; container-type: inline-size; }
.invite-card__photo { display: block; width: 100%; height: auto;
  -webkit-mask: linear-gradient(to right, #0000, #000 10%, #000 90%, #0000), linear-gradient(to bottom, #0000, #000 8%, #000 92%, #0000); -webkit-mask-composite: source-in;
  mask: linear-gradient(to right, #0000, #000 10%, #000 90%, #0000), linear-gradient(to bottom, #0000, #000 8%, #000 92%, #0000); mask-composite: intersect; }
.invite-card__text { position: absolute; left: 16.07%; top: 12.09%; width: 67.86%; height: 73.36%; display: grid; align-content: center; justify-items: center; gap: 2.2cqi; padding: 6cqi 5cqi 10cqi; text-align: center; color: oklch(0.25 0.03 250); }
.invite-card__text::before { content: ''; position: absolute; inset: 3cqi; border: 1px solid color-mix(in oklch, var(--blue) 30%, transparent); pointer-events: none; }
.pv-small { font-size: 2.6cqi; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.pv-names { display: grid; font-size: 8.5cqi; line-height: 1.05; overflow-wrap: anywhere; }
.pv-amp { font-size: 0.6em; color: var(--blue); }
.pv-date { margin-top: 2cqi; font-size: 4.6cqi; line-height: 1.2; }
.pv-time, .pv-venue, .pv-city, .pv-reply { font-size: 3.2cqi; line-height: 1.35; }
.pv-venue { font-weight: 600; }
.pv-reply { margin-top: 2cqi; font-style: italic; color: var(--ink-soft); }
.invite-card__text p:empty { display: none; }
.setup__invite-note { font-size: 0.8rem; color: var(--ink-soft); }

/* 8. The finale: the envelope opens with their names on the card, and a few petals drift down. */
.q--done { overflow: visible; }
.finale { position: relative; width: min(100%, 30rem); aspect-ratio: 1; margin: -2rem auto -3rem; justify-self: center; container-type: inline-size; }
.finale__film, .finale__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply;
  -webkit-mask: radial-gradient(closest-side, #000 72%, #0000); mask: radial-gradient(closest-side, #000 72%, #0000); }
.finale__still { opacity: 0; }
.finale.is-still .finale__still { opacity: 1; }
.finale__names { position: absolute; left: 31.5%; right: 31.5%; top: 33%; text-align: center; font-size: 4.6cqi; line-height: 1.1; color: var(--ink); mix-blend-mode: multiply;
  opacity: 0; filter: blur(3px); transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), filter 1.4s; }
.finale.is-open .finale__names { opacity: 1; filter: none; }
.finale__amp { color: var(--blue); }
.petal { position: fixed; top: -6rem; z-index: 40; width: calc(4.5rem * var(--s, 1)); pointer-events: none; animation: petal-fall 6.5s ease-in var(--d, 0s) both; }
@keyframes petal-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--x), 110vh) rotate(var(--r)); opacity: 0.9; } }
.guest-code { padding: 1rem 1.2rem; border-radius: 0.2rem; background: #fffdf8; box-shadow: 0 0 0 1px oklch(0.4 0.03 60 / 0.1), 0 0.8rem 1.2rem -0.8rem oklch(0.3 0.04 60 / 0.4); }
.guest-code strong { font-family: var(--display); font-size: 1.5em; letter-spacing: 0.08em; color: var(--blue); }
.first-guest { background: oklch(1 0 0 / 0.55); box-shadow: inset 0 0 0 1px oklch(0.4 0.03 60 / 0.1); }

@media (prefers-reduced-motion: reduce) {
  .q, .q__obj, .names__amp, .row, .print, .finder__map.is-dropped::after { animation: none !important; }
  .petal { display: none; }
}

/* Roomier layout with the invitation alongside, and rows that wrap onto two lines inside the cards. */
@media (min-width: 84rem) { .setup__body { grid-template-columns: 11rem minmax(0, 1fr) minmax(16rem, 19rem); gap: 2.5rem; } }
.q .row--story, .q .row--schedule, .q .row--details { grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); }
.q .row--story label:has(textarea), .q .row--schedule label:has(textarea), .q .row--details label:has(textarea) { grid-column: 1 / -1; }
.q .row--story .rm, .q .row--schedule .rm, .q .row--details .rm { grid-column: 1 / -1; justify-self: end; min-height: 2rem; }
.q .row--schedule::after { top: 2.6rem; }
/* The map keeps its shape without forcing the page wider than a phone. */
.finder__map { min-height: 0; width: 100%; }
@media (max-width: 40rem) { .finder__map { aspect-ratio: 4 / 3; } }
@media (max-width: 40rem) {
  .setup__top .top__brand img { height: 1.6rem; }
  .setup__count { font-size: 0.75rem; }
  .setup__left { display: none; }
}

/* ---------- plans on the sign-up and account pages ---------- */
.stack--plans { max-width: none !important; }
@media (min-width: 60rem) { .start:has(#pay:not([hidden])) { grid-template-columns: 1fr; } .start:has(#pay:not([hidden])) .start__preview { display: none; } }
.start:has(#pay:not([hidden])) { background: linear-gradient(to bottom, var(--paper) 3rem, transparent 9rem) fixed, url('/media/home/table.jpg') center / cover fixed, #f7f2ea; }
.plan-grid--pick { margin-top: 2.4rem; }
.plan-grid--pick .plan-card { cursor: pointer; }
.pay-small { font-size: 0.9rem; color: var(--ink-soft); }
.acct__plan { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
.acct__plan img { width: 1.8rem; filter: drop-shadow(0 2px 2px rgb(60 20 20 / 0.3)); }
.plans-box .plan-grid { margin-top: 2.6rem; }
.plans-box summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.lone:has(.acct) { background: linear-gradient(to bottom, var(--paper) 3rem, transparent 10rem) fixed, url('/media/home/table.jpg') center / cover fixed, #f7f2ea; }
.acct__site { background: url('/media/home/paper.jpg') center / 22rem auto, #fdfaf4; border-radius: 0.25rem; box-shadow: 0 0 0 1px oklch(0.4 0.03 60 / 0.08), 0 1.8rem 2.6rem -1.4rem oklch(0.3 0.04 60 / 0.45); }
.plans-box .plan-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.lone__main--wide:has(.plans-box) { width: min(100%, 66rem); }

/* ---------- sign in with Google (via Supabase) ---------- */
.social { display: grid; gap: var(--space-sm); width: 100%; }
.social__btn {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem; min-height: 3.1rem; padding: 0 1.3rem;
  border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-weight: 600;
  box-shadow: 0 0 0 1px oklch(0.3 0.03 250 / 0.16), 0 0.7rem 1.2rem -0.9rem oklch(0.3 0.04 250 / 0.5);
  transition: transform 0.3s var(--out), box-shadow 0.3s var(--out);
}
.social__btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px oklch(0.3 0.03 250 / 0.22), 0 1rem 1.6rem -1rem oklch(0.3 0.04 250 / 0.6); }
.social__btn svg { width: 1.15rem; height: 1.15rem; }
.social__or { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--space-xs); }
.social__or::before, .social__or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.signed-as { font-weight: 600; }
.notice--mail { border-left: 3px solid var(--blue); }

/* ---------- setup, "Your story": a postcard showing the map in motion ---------- */
.peek { position: relative; display: grid; gap: 0.8rem; width: min(100%, 36rem); margin: 0.25rem 0 0.5rem; rotate: -1.2deg; transition: rotate 0.6s var(--out), translate 0.6s var(--out); animation: peek-in 1s var(--out) 0.25s both; }
@keyframes peek-in { from { opacity: 0; translate: 0 1rem; rotate: -4deg; } }
.peek:hover { rotate: 0deg; translate: 0 -3px; }
.peek__frame {
  position: relative; padding: 0.6rem; border-radius: 0.2rem; background: #fffdf8;
  box-shadow: 0 0 0 1px oklch(0.4 0.03 60 / 0.08), 0 1.6rem 2.4rem -1.3rem oklch(0.25 0.04 220 / 0.5), 0 0.25rem 0.5rem oklch(0.3 0.04 60 / 0.08);
}
.peek__frame::before, .peek__frame::after { /* two strips of tape holding the print down */
  content: ''; position: absolute; z-index: 1; top: -0.7rem; width: 5.5rem; height: 1.45rem; opacity: 0.85;
  background: color-mix(in oklch, var(--sky) 70%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0); mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0);
}
.peek__frame::before { left: 1.2rem; rotate: -6deg; }
.peek__frame::after { right: 1.2rem; rotate: 5deg; }
.peek__video { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 1px; background: #6cc2cf; }
.peek figcaption { font-size: var(--step--1); color: var(--ink-soft); max-width: 44ch; padding-left: 0.2rem; }
.peek figcaption b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .peek { animation: none; } }

/* ---------- policies: a long letter on paper, with the short version on a card ---------- */
.legal-page { background: linear-gradient(to bottom, var(--paper) 3rem, transparent 12rem) fixed, url('/media/home/table.jpg') center / cover fixed, #f7f2ea; grid-template-rows: auto 1fr auto; }
.legal { width: min(100%, 64rem); margin: 0 auto; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); padding-top: var(--space-xl); }
.legal__head {
  position: relative; padding: clamp(1.8rem, 4vw, 3rem); border-radius: 0.25rem;
  background: url('/media/home/paper.jpg') center / 26rem auto, #fdfaf4; background-blend-mode: multiply;
  box-shadow: 0 0 0 1px oklch(0.4 0.03 60 / 0.08), 0 1.8rem 2.6rem -1.6rem oklch(0.3 0.04 60 / 0.45); rotate: -0.3deg;
}
.legal__head h1 { font-size: var(--step-3); max-width: 14ch; margin-top: var(--space-sm); }
.legal__seal { position: absolute; right: clamp(0.5rem, 3vw, 2rem); top: -1.6rem; width: clamp(5.5rem, 11vw, 8rem); filter: drop-shadow(0 0.8rem 0.8rem oklch(0.3 0.05 30 / 0.35)); rotate: 12deg; }
.legal__date { margin-top: var(--space-sm); color: var(--ink-soft); font-size: var(--step--1); }
.legal__short {
  padding: clamp(1.3rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2.2rem); border-radius: 0.25rem; rotate: 0.4deg;
  background: repeating-linear-gradient(transparent 0 1.85rem, oklch(0.6 0.05 250 / 0.16) 1.85rem calc(1.85rem + 1px)), #fffef9;
  box-shadow: 0 0 0 1px oklch(0.4 0.03 60 / 0.08), 0 1.2rem 1.8rem -1.2rem oklch(0.3 0.04 60 / 0.4); border-left: 3px solid oklch(0.7 0.1 15 / 0.5);
}
.legal__short-title { font-size: var(--step-1); margin-bottom: 0.4rem; }
.legal__short ul { display: grid; gap: 0.45rem; padding-left: 1.2rem; }
.legal__short li { line-height: 1.5; }
.legal__short-note { margin-top: 0.8rem; font-size: var(--step--1); color: var(--ink-soft); }
.legal__grid { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 60rem) { .legal__grid { grid-template-columns: 15rem minmax(0, 1fr); } .legal__toc { position: sticky; top: 1.5rem; } }
.legal__toc { padding: 1.1rem 1.2rem; border-radius: 0.25rem; background: oklch(1 0 0 / 0.72); box-shadow: 0 0 0 1px oklch(0.4 0.03 60 / 0.08); font-size: 0.88rem; }
.legal__toc p { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.5rem; }
.legal__toc ol { display: grid; gap: 0.35rem; padding-left: 1.2rem; }
.legal__toc a { color: var(--ink); text-decoration: none; }
.legal__toc a:hover { color: var(--blue); text-decoration: underline; }
.legal__body {
  padding: clamp(1.5rem, 4vw, 3rem); border-radius: 0.25rem; min-width: 0;
  background: url('/media/home/paper.jpg') center / 26rem auto, #fdfaf4; background-blend-mode: multiply;
  box-shadow: 0 0 0 1px oklch(0.4 0.03 60 / 0.08), 0 1.8rem 2.6rem -1.6rem oklch(0.3 0.04 60 / 0.4);
}
.legal__sec { scroll-margin-top: 1.5rem; padding-bottom: 1.6rem; margin-bottom: 1.6rem; border-bottom: 1px dashed oklch(0.4 0.03 60 / 0.22); }
.legal__sec:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.legal__sec h2 { display: flex; align-items: baseline; gap: 0.8rem; font-size: var(--step-1); margin-bottom: 0.7rem; }
.legal__sec h2 span { font-size: 0.85rem; color: var(--blue); font-variant-numeric: tabular-nums; }
.legal__sec p, .legal__sec li { line-height: 1.65; color: oklch(0.3 0.03 250); }
.legal__sec p + p, .legal__sec p + ul, .legal__sec ul + p, .legal__sec table + p, .legal__sec p + table { margin-top: 0.75rem; }
.legal__sec ul { display: grid; gap: 0.4rem; padding-left: 1.25rem; }
.legal__sec a { color: var(--blue); }
.legal__table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.legal__table th { text-align: left; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); }
.legal__table td { padding: 0.6rem; border-bottom: 1px solid oklch(0.4 0.03 60 / 0.12); vertical-align: top; }
.legal__table code { font-size: 0.85rem; padding: 0.1rem 0.35rem; border-radius: 0.25rem; background: oklch(0.6 0.05 250 / 0.1); }
.legal__others { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.8rem; }
.legal__other { display: grid; gap: 0.15rem; padding: 1rem 1.1rem; border-radius: 0.25rem; text-decoration: none; color: var(--ink); background: oklch(1 0 0 / 0.75); box-shadow: 0 0 0 1px oklch(0.4 0.03 60 / 0.08), 0 0.8rem 1.2rem -1rem oklch(0.3 0.04 60 / 0.4); transition: transform 0.35s var(--out); }
.legal__other:hover { transform: translateY(-3px); }
.legal__other small { font-size: 0.75rem; color: var(--ink-soft); }
.legal__other b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.legal__foot { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: center; padding: var(--space-xl) 0 0; font-size: var(--step--1); }
.legal__foot a { color: var(--ink-soft); }
.legal__short ul, .legal__sec ul { list-style: disc; }
.legal__toc ol { list-style: decimal; }
.legal__sec li::marker, .legal__short li::marker { color: var(--blue); }
.legal__brand { display: inline-flex; align-items: center; gap: 0.45rem; }
.legal__brand img { height: 1.5rem; width: auto; }