/* ============================================================
   Loom — Page sections
   ============================================================ */

/* ---- Preloader -------------------------------------------- */
.preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--blush); pointer-events: none; opacity: 1; transition: opacity var(--dur-slow) var(--ease-out); }
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__mark { font-family: var(--font-script); font-size: clamp(4rem, 12vw, 8rem); color: var(--rose-deep); animation: mark-in var(--dur-reveal) var(--ease-out) both; }
@keyframes mark-in { from { opacity: 0; transform: translateY(18px) scale(.97); filter: blur(10px); } }

/* ---- Ambient layers --------------------------------------- */
.ambient { position: fixed; inset: 0; z-index: var(--z-ambient); pointer-events: none; }
.product-stage { position: fixed; inset: 0; z-index: var(--z-product); pointer-events: none; }
.product-stage canvas { display: block; width: 100%; height: 100%; }
.product-stage__fallback { position: absolute; inset: 0; display: none; place-items: center; }
.product-stage.is-fallback .product-stage__fallback { display: grid; }
.product-stage__fallback img { height: 66vh; width: auto; border-radius: var(--radius-l); }

.bloom { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .5; mix-blend-mode: multiply; pointer-events: none; }
.bloom--rose { width: 52vw; height: 52vw; top: -12vw; left: -12vw; background: radial-gradient(circle, var(--rose-soft), transparent 65%); animation: bloom-drift 24s ease-in-out infinite alternate; }
.bloom--gold { width: 40vw; height: 40vw; right: -8vw; bottom: -10vw; background: radial-gradient(circle, var(--gold-soft), transparent 65%); animation: bloom-drift 28s ease-in-out infinite alternate-reverse; }
@keyframes bloom-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw,4vw,0) scale(1.12); } }

/* Refraction: the light a glass bottle throws across a surface */
.refraction { position: absolute; inset: -20%; pointer-events: none; opacity: .5; mix-blend-mode: soft-light; filter: blur(24px);
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,0) 0 90px, rgba(255,255,255,.55) 130px 170px, rgba(255,255,255,0) 210px 300px),
    repeating-linear-gradient(118deg, rgba(163,69,75,0) 0 140px, rgba(163,69,75,.18) 200px 240px, rgba(163,69,75,0) 300px 420px);
  animation: refract 20s ease-in-out infinite alternate; }
@keyframes refract { from { transform: translate3d(-3%,-2%,0) skewX(-2deg); } to { transform: translate3d(3%,2%,0) skewX(2deg); } }

.cursor-dot { position: fixed; top: 0; left: 0; z-index: 60; width: 26px; height: 26px; border-radius: 50%; background: var(--rose); opacity: .5; mix-blend-mode: multiply; pointer-events: none; will-change: transform; transition: width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
body.is-cursor-wide .cursor-dot { width: 62px; height: 62px; opacity: .3; }
@media (hover: none), (pointer: coarse) { .cursor-dot { display: none; } }


/* ---- Hero -------------------------------------------------- */
.hero { position: relative; z-index: var(--z-ambient); min-height: 100svh; display: grid; place-items: center; padding: calc(96px + env(safe-area-inset-top,0px)) var(--gutter) 76px; text-align: center; overflow: hidden; }
.hero__inner { position: relative; z-index: 4; display: grid; justify-items: center; gap: var(--space-s); max-width: 46rem; }
.hero__mark { position: relative; z-index: 1; font-family: var(--font-script); font-size: clamp(5.6rem, 17vw, 15rem); line-height: .9; letter-spacing: -.02em; color: var(--rose-deep); user-select: none; pointer-events: none; perspective: 600px; }
.hero__mark span { display: inline-block; opacity: 0; transform: translateY(40px) rotateX(-55deg) scale(.92); animation: mark-letter var(--dur-reveal) var(--ease-out) forwards; }
@keyframes mark-letter { to { opacity: 1; transform: none; } }
.hero__gap { height: clamp(120px, 20vh, 230px); }
.hero__tagline { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--step-4); }
.hero__tagline b { font-style: normal; font-weight: 400; color: var(--rose-deep); }
.hero__actions { display: grid; justify-items: center; gap: var(--space-xs); margin-top: var(--space-3xs); }

.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 4; display: grid; justify-items: center; gap: var(--space-2xs); font-size: .7rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.scroll-cue i { display: block; width: 1px; height: 42px; background: linear-gradient(var(--rose-ink), transparent); animation: cue 1.9s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 820px) {
  .hero { padding-bottom: 108px; }
  .hero .eyebrow { display: none; }
  .hero__gap { height: clamp(190px, 30vh, 280px); }
}

/* ---- Scrollytelling --------------------------------------- */
.story { position: relative; z-index: var(--z-ambient); height: 210vh; }
.story__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.chapter { position: absolute; top: 50%; width: min(430px, 78vw); transform: translateY(-50%); opacity: 0; z-index: 4; will-change: transform, opacity; }
.chapter--left { left: var(--gutter); }
.chapter--right { right: var(--gutter); text-align: right; }
.chapter--right .eyebrow { flex-direction: row-reverse; }
.chapter h2 { margin: .34em 0 .4em; font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1.04; letter-spacing: -.01em; }
.chapter h2 em { font-style: italic; color: var(--rose-deep); }
.chapter p { color: var(--text-muted); }

.callout { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; opacity: 0; white-space: nowrap; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-accent); will-change: transform, opacity; }
.callout::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: .7; }
.callout--flip { flex-direction: row-reverse; }
#callout-cap   { top: 29%; left: 54%; }
#callout-ball  { top: 44%; right: 54%; }
#callout-glass { top: 59%; left: 54%; }

@media (max-width: 820px) {
  .story { height: 230vh; }
  .chapter { top: auto; bottom: 11vh; left: var(--gutter); right: auto; width: calc(100% - 2 * var(--gutter)); text-align: left; transform: none; }
  .chapter--right { text-align: left; }
  .chapter--right .eyebrow { flex-direction: row; }
  .chapter h2 { font-size: var(--step-3); }
  .callout { display: none; }
}

/* ---- Marquee ---------------------------------------------- */
.marquee { position: relative; z-index: 6; overflow: hidden; padding: 18px 0; background: var(--surface-raised); color: var(--text-accent); border-block: 1px solid rgba(227,157,158,.35); box-shadow: 0 30px 60px -40px rgba(163,69,75,.4); transform: rotate(-1.4deg) scale(1.04); }
.marquee__rail { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee span { display: inline-flex; align-items: center; gap: .75em; padding: 0 .75em; white-space: nowrap; font-family: var(--font-display); font-style: italic; font-size: var(--step-2); }
.marquee .icon { width: .72em; height: .72em; color: var(--rose); stroke-width: 1.4; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---- Ritual ------------------------------------------------ */
.steps { perspective: 1200px; }
.step { overflow: hidden; }
.step__index { font-family: var(--font-display); font-style: italic; font-size: var(--step-0); color: var(--gold-ink); }
.step h3 { margin: .12em 0 .34em; font-family: var(--font-display); font-size: var(--step-3); font-weight: 400; }
.step p { color: var(--text-muted); }
.step__icon { position: absolute; top: var(--space-m); right: var(--space-m); width: 27px; height: 27px; color: var(--rose); opacity: .9; }

/* ---- Moments rail ------------------------------------------ */
.moments { position: relative; width: 100%; margin-top: var(--space-l); overflow: hidden; contain: inline-size;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.moments__rail { display: flex; gap: var(--space-2xs); width: max-content; animation: marquee 48s linear infinite reverse; }
.moments span { padding: .55em 1.1em; border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-display); font-style: italic; font-size: var(--step-0); white-space: nowrap; }
.moments span:nth-child(3n) { background: var(--rose-soft); }
.moments span:nth-child(5n) { background: var(--ink); color: var(--blush); }

.badge-seal { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 98px; height: 98px; border-radius: 50%; background: var(--blush); box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--rose), 0 16px 40px -18px rgba(163,69,75,.6); animation: seal-float 5.5s ease-in-out infinite; }
.badge-seal span { font-family: var(--font-script); font-size: 2rem; color: var(--rose-deep); padding-top: .14em; }
@keyframes seal-float { 50% { transform: translateY(-9px); } }

/* ---- Dark feature ------------------------------------------ */
.feature-dark { position: relative; z-index: var(--z-content); width: min(1400px, 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: clamp(90px, 14vw, 190px); border-radius: var(--radius-xl); background: var(--surface-inverse); color: var(--text-on-inverse); text-align: center; overflow: hidden; isolation: isolate; }
.feature-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 55% at 50% 12%, rgba(227,157,158,.3), transparent 68%), radial-gradient(60% 50% at 80% 100%, rgba(201,164,92,.2), transparent 70%); }
.feature-dark .shell { position: relative; z-index: 1; }
.feature-dark .eyebrow { color: var(--rose-soft); }
.feature-dark .display-2 { max-width: 19ch; margin: var(--space-s) auto 0; }
.feature-dark .display-2 em { color: var(--rose-soft); }
.feature-dark .lead { margin: var(--space-m) auto 0; color: rgba(247,230,223,.78); text-align: center; }

.stat-row { display: flex; flex-wrap: wrap; justify-content: center; margin-top: var(--space-2xl); }
.stat-row > div { padding: var(--space-s) var(--space-l); border-left: 1px solid rgba(247,230,223,.2); text-align: left; }
.stat-row > div:first-child { border-left: 0; }
.stat-row b { display: block; font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; line-height: 1.1; }
.stat-row span { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(247,230,223,.62); }
@media (max-width: 680px) {
  .feature-dark { border-radius: var(--radius-l); }
  .stat-row { flex-direction: column; align-items: center; }
  .stat-row > div { border-left: 0; padding: var(--space-xs); text-align: center; }
}

/* ---- Promise seals ----------------------------------------- */
.seals { perspective: 1200px; justify-items: center; }
.seal { display: grid; justify-items: center; gap: var(--space-s); max-width: 300px; text-align: center; }
.seal__disc { position: relative; display: grid; place-items: center; width: clamp(186px, 19vw, 226px); aspect-ratio: 1; border-radius: 50%; background: var(--blush); box-shadow: 0 0 0 5px var(--cream), 0 0 0 6px var(--rose), 0 30px 60px -30px rgba(163,69,75,.5); transition: transform var(--dur-slow) var(--ease-out); }
.seal:hover .seal__disc { transform: rotate(-6deg) scale(1.05); }
.seal__disc span { font-family: var(--font-script); font-size: clamp(2.5rem, 3.3vw, 3.3rem); color: var(--rose-deep); padding-top: .1em; }
.seal__ring { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); animation: ring-turn 44s linear infinite; }
.seal:nth-child(2) .seal__ring { animation-direction: reverse; }
.seal__ring text { font-family: var(--font-ui); font-size: 8.5px; font-weight: 600; text-transform: uppercase; fill: var(--gold-ink); }
@keyframes ring-turn { to { transform: rotate(360deg); } }
.seal h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
.seal p { color: var(--text-muted); font-size: var(--step--1); }

/* ---- Shop -------------------------------------------------- */
.plan-switch { position: relative; display: inline-flex; margin-bottom: var(--space-m); padding: 4px; border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border); }
.plan-switch button { position: relative; z-index: 1; min-height: 46px; padding: .72em 1.25em; border-radius: var(--radius-pill); font-size: var(--step--1); font-weight: 600; color: var(--text-muted); transition: color var(--dur-base); }
.plan-switch button[aria-pressed="true"] { color: var(--white); }
.plan-switch i { position: absolute; inset: 4px auto 4px 4px; width: calc(50% - 4px); border-radius: var(--radius-pill); background: var(--rose-ink); transition: transform var(--dur-slow) var(--ease-out); }
.plan-switch[data-plan="subscribe"] i { transform: translateX(100%); }
.plan-switch .save { margin-left: .5em; padding: .16em .55em; border-radius: var(--radius-pill); background: var(--gold-ink); color: var(--white); font-size: .69rem; }
.plan-switch button[aria-pressed="true"] .save { background: var(--white); color: var(--rose-ink); }

.products { perspective: 1400px; }
.product { display: grid; gap: var(--space-xs); align-content: start; transform-style: preserve-3d; }
.product__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-l); background: var(--surface-raised); box-shadow: var(--shadow-1); transition: box-shadow var(--dur-slow) var(--ease-out); }
.product:hover .product__media { box-shadow: var(--shadow-2); }
.product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.product:hover .product__media img { transform: scale(1.05); }
.product__tag { position: absolute; top: 14px; left: 14px; padding: .45em .9em; border-radius: var(--radius-pill); background: rgba(255,249,245,.94); backdrop-filter: blur(8px); font-size: .69rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--text-accent); }
.product__action { position: absolute; inset: auto 14px 14px; opacity: 0; transform: translateY(14px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.product:hover .product__action, .product:focus-within .product__action { opacity: 1; transform: none; }
@media (hover: none) { .product__action { opacity: 1; transform: none; } }
.product__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs); }
.product h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
.price { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.price s { margin-right: .4em; font-size: .85em; font-weight: 300; color: var(--text-muted); }
.price .per { display: block; font-size: .7rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.product .sku { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.product.is-flashing .product__media { animation: flash 1.6s var(--ease-out); }
@keyframes flash { 0%, 100% { box-shadow: var(--shadow-1); } 30% { box-shadow: 0 0 0 4px var(--rose), var(--shadow-2); } }

.shop-note { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-l); font-size: var(--step--1); color: var(--text-muted); }
.shop-note .icon { width: 18px; height: 18px; color: var(--gold-ink); }

.offers { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--space-2xl); border-top: 1px solid var(--border); }
.offers > div { padding: var(--space-l) var(--space-m) var(--space-s); border-left: 1px solid var(--border); }
.offers > div:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 820px) {
  .offers { grid-template-columns: 1fr; }
  .offers > div { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); }
  .offers > div:first-child { border-top: 0; }
}
.offers h3 { display: flex; align-items: center; gap: .5em; font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
.offers h3 .icon { width: 23px; height: 23px; color: var(--rose-deep); }
.offers p { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--text-muted); }
.offer-action { display: inline-flex; align-items: center; gap: .5em; margin-top: var(--space-xs); padding: 13px 0; min-height: 44px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-accent); transition: gap var(--dur-fast); }
.offer-action:hover { gap: .85em; text-decoration: underline; text-underline-offset: .25em; }
.offer-action .icon { width: 15px; height: 15px; }

/* ---- Founder ----------------------------------------------- */
.founder blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--step-3); line-height: 1.3; text-wrap: pretty; }
.founder blockquote::before { content: "\201C"; display: block; margin-bottom: var(--space-s); font-style: normal; font-size: 6rem; line-height: .4; color: var(--rose); }
.signature { display: flex; align-items: center; gap: var(--space-s); margin-top: var(--space-m); }
.signature__mark { font-family: var(--font-script); font-size: 3.2rem; line-height: 1; color: var(--rose-deep); }
.signature b { display: block; font-weight: 500; }
.signature small { display: block; font-size: .71rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }

/* ---- Spec list --------------------------------------------- */
.spec { display: grid; margin-top: var(--space-l); }
.spec > div { display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); align-items: start; padding: var(--space-m) 0; border-top: 1px solid var(--border); }
.spec > div:last-child { border-bottom: 1px solid var(--border); }
.spec .icon { width: 25px; height: 25px; margin-top: 4px; color: var(--rose-deep); }
.spec h3 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; }
.spec p { margin-top: 3px; font-size: var(--step--1); color: var(--text-muted); }

/* ---- FAQ --------------------------------------------------- */
.faq { max-width: 780px; margin-inline: auto; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding: var(--space-m) 0; list-style: none; cursor: pointer; font-family: var(--font-display); font-size: var(--step-1); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .marker { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); transition: transform var(--dur-slow) var(--ease-out), background var(--dur-fast); }
.faq summary .marker .icon { width: 16px; height: 16px; }
.faq details[open] summary .marker { transform: rotate(135deg); background: var(--rose-soft); }
.faq details p { max-width: 62ch; padding: 0 0 var(--space-m); color: var(--text-muted); }

/* ---- Instagram --------------------------------------------- */
.ig-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-m); background: var(--surface-raised); text-decoration: none; transition: transform var(--dur-slow) var(--ease-out); }
.ig-tile:hover { transform: translateY(-5px); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ig-tile:hover img { transform: scale(1.07); }
.ig-tile__over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(163,69,75,.58); color: var(--white); opacity: 0; transition: opacity var(--dur-base); }
.ig-tile:hover .ig-tile__over, .ig-tile:focus-visible .ig-tile__over { opacity: 1; }
.ig-tile__over .icon { width: 30px; height: 30px; }
.ig-tile--cta { display: grid; place-items: center; padding: var(--space-m); background: var(--rose-ink); color: var(--white); text-align: center; transition: background var(--dur-base), transform var(--dur-slow) var(--ease-out); }
.ig-tile--cta:hover { background: var(--ink); }
.ig-tile--cta .wordmark__text { color: var(--white); font-size: 2.6rem; }
.ig-tile--cta span { display: inline-flex; align-items: center; gap: .5em; margin-top: var(--space-2xs); font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; }

/* ---- Waitlist ---------------------------------------------- */
.waitlist-panel { position: relative; overflow: hidden; isolation: isolate; padding: clamp(44px, 7vw, 100px) clamp(20px, 6vw, 84px); border-radius: var(--radius-xl); background: linear-gradient(140deg, var(--cream), var(--petal)); box-shadow: var(--shadow-3); text-align: center; }
.waitlist-panel__inner { position: relative; z-index: 1; }
@media (max-width: 680px) {
  .waitlist-panel { border-radius: var(--radius-l); }
}
.waitlist-panel__mark { margin-bottom: var(--space-2xs); font-family: var(--font-script); font-size: clamp(3.6rem, 10vw, 7.5rem); line-height: .9; color: var(--rose-deep); }
.waitlist-panel .lead { margin: var(--space-s) auto var(--space-l); text-align: center; }

.subscribe-form { display: flex; gap: var(--space-2xs); max-width: 560px; margin-inline: auto; padding: 6px; border-radius: var(--radius-pill); background: var(--white); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow var(--dur-fast); }
.subscribe-form:focus-within { box-shadow: inset 0 0 0 1.6px var(--rose-ink); }
.subscribe-form.is-invalid { box-shadow: inset 0 0 0 1.6px var(--danger); animation: shake var(--dur-base); }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.subscribe-form input { flex: 1; min-width: 0; min-height: 50px; padding: .85em 1.25em; border: 0; background: transparent; font-size: var(--step-0); }
.subscribe-form input:focus { outline: none; }
@media (max-width: 540px) { .subscribe-form { flex-direction: column; border-radius: var(--radius-m); } .subscribe-form .btn { width: 100%; } }

.form-status { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 1.5em; margin-top: var(--space-s); font-size: var(--step--1); }
.form-status .icon { width: 17px; height: 17px; }
.form-status.is-error { color: var(--danger); }
.form-status.is-success { color: var(--success); }
.form-fine { margin-top: var(--space-xs); font-size: .8rem; color: var(--text-muted); }

.waitlist-done { display: none; flex-direction: column; align-items: center; gap: var(--space-xs); animation: pop var(--dur-slow) var(--ease-spring); }
.waitlist-panel.is-complete .subscribe-form,
.waitlist-panel.is-complete .form-status,
.waitlist-panel.is-complete .form-fine,
.waitlist-panel.is-complete .captcha-slot { display: none; }
.waitlist-panel.is-complete .waitlist-done { display: flex; }
.waitlist-done__tick { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--rose-ink); color: var(--white); }
.waitlist-done__tick .icon { width: 28px; height: 28px; stroke-width: 2; }
.waitlist-done h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
.waitlist-done p { max-width: 34rem; font-size: var(--step--1); color: var(--text-muted); }

.perks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-m); margin-top: var(--space-m); font-size: .82rem; color: var(--text-muted); }
.perks span { display: inline-flex; align-items: center; gap: .5em; }
.perks .icon { width: 15px; height: 15px; color: var(--rose); }
.captcha-slot:not(:empty) { display: flex; justify-content: center; margin-top: var(--space-s); }

/* ---- Interior page header ---------------------------------- */
.page-head { position: relative; padding: calc(140px + env(safe-area-inset-top,0px)) var(--gutter) var(--space-2xl); text-align: center; overflow: hidden; }
.page-head .display-2 { margin-top: var(--space-xs); }
.page-head .lead { margin: var(--space-s) auto 0; text-align: center; }

/* ---- Legal / long-form ------------------------------------- */
.legal h2 { margin: 2.2em 0 .5em; font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; line-height: 1.18; scroll-margin-top: 110px; }
.legal p, .legal li { max-width: var(--measure); }
.legal p + p { margin-top: 1em; }
.legal ul { padding-left: 1.15em; list-style: disc; }
.legal li { margin: .4em 0; }
.legal .summary-card { display: flex; align-items: flex-start; gap: var(--space-s); margin: var(--space-m) 0; padding: var(--space-m); border-radius: var(--radius-l); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border); }
.legal .summary-card .icon { flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--rose-deep); }
.legal .summary-card p { margin: 0; }
.toc { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: var(--space-m) 0 var(--space-2xs); list-style: none; }
.toc a { display: inline-block; padding: .5em .9em; border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border); font-size: .82rem; text-decoration: none; color: var(--text); transition: background var(--dur-fast); }
.toc a:hover { background: var(--rose-soft); }
.meta-line { margin-bottom: var(--space-l); font-size: var(--step--1); color: var(--text-muted); }

/* ---- 404 --------------------------------------------------- */
.notfound { position: relative; display: grid; place-items: center; min-height: 70svh; padding: calc(140px + env(safe-area-inset-top,0px)) var(--gutter) var(--space-3xl); text-align: center; }
.notfound__inner { position: relative; display: grid; justify-items: center; gap: var(--space-s); max-width: 44rem; }