/* Sell Your Soul: The Felt Theatre. Landing layout only.
   Loads after felt.css, which holds the tokens, type, header, footer, patches, badges, waves,
   code blocks and the felt ghost (design/round-2/SYSTEM.md). This sheet sets the landing's own
   layout: the hero stage, the How it works track, the souls rail, the props and section spacing. */

html { scroll-behavior: smooth; }

/* The header sits on the hero stage: the pelmet's hem is the top of the theatre. */
.topbar { position: absolute; inset: 0 0 auto 0; }

/* ---------- section blocks ---------- */
.block { position: relative; padding: clamp(70px, 9vw, 130px) 0 clamp(80px, 10vw, 150px); }
.block::after, .hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--grain); background-size: 180px; mix-blend-mode: overlay; opacity: .22;
}
/* The landing's headlines and ledes are a size up from the app pages. */
.title { font-size: clamp(56px, 7.6vw, 118px); line-height: .9; }
.lede { font-size: clamp(19px, 1.7vw, 23px); }

/* ---------- HERO ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh;
  background:
    radial-gradient(60% 50% at 72% 42%, rgba(246, 181, 68, .16), transparent 70%),
    radial-gradient(90% 70% at 50% 0%, #3a2654 0%, transparent 70%),
    var(--night);
  padding: 92px clamp(18px, 4vw, 56px) 110px;
}

.scenery { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.prop { position: absolute; will-change: transform; }
.hang { top: 58px; transform-origin: 50% 0; display: flex; flex-direction: column; align-items: center; }
.thread { display: block; width: 1.5px; height: var(--len, 80px); background: linear-gradient(rgba(251, 241, 225, .1), rgba(251, 241, 225, .45)); }
.hang svg { margin-top: -2px; }
.moon { right: 4%; }
.moon svg { width: clamp(150px, 15vw, 230px); height: auto; aspect-ratio: 1; }
.bat { left: 47%; }
.bat svg { width: clamp(84px, 8vw, 120px); aspect-ratio: 200 / 110; }
.star svg { width: 38px; aspect-ratio: 1; }
.s1 { left: 3%; } .s2 { left: 40%; }
.s2 svg { width: 28px; }
.cloud svg { width: clamp(150px, 16vw, 240px); aspect-ratio: 240 / 110; }
.c1 { right: 1%; }
.c2 { left: 30%; }
.c1 .thread { opacity: .5; }
.hill {
  position: absolute; left: -10%; right: -10%; bottom: -60px; height: 230px;
  background: radial-gradient(60% 100% at 70% 100%, #22152f 60%, transparent 61%), radial-gradient(50% 80% at 10% 100%, #24172f 60%, transparent 61%);
}
.pumpkin { right: 5%; bottom: 96px; width: clamp(96px, 9vw, 140px); }
.pumpkin svg { width: 100%; aspect-ratio: 240 / 200; }
.pump-light { position: absolute; left: 50%; top: 60%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(rgba(255, 160, 60, .28), transparent 60%); mix-blend-mode: screen; opacity: var(--flame, .8); }
.pump-face { opacity: calc(.75 + var(--flame, .8) * .25); }

.hero-inner {
  position: relative; z-index: 2;
  width: min(1240px, 100%); margin: 0 auto;
  display: grid; justify-items: center; text-align: center;
  grid-template-areas: "title" "ghost" "lede" "doors";
}
.hero-title { grid-area: title; margin: 0; font: 400 clamp(64px, 19vw, 96px)/.86 var(--display); position: relative; z-index: 1; }
.hero-title span { display: block; }
.hero-title .l1 { color: var(--cream); text-shadow: 0 5px 0 #130a1d; transform: rotate(-2deg); }
.hero-title .l2 { color: var(--amber); font-size: .66em; margin-top: .14em; text-shadow: 0 4px 0 #130a1d; transform: rotate(1.5deg); }
.hero-lede { grid-area: lede; margin: 4px 0 22px; max-width: 24em; font-size: 18px; font-weight: 700; color: var(--cream); text-wrap: balance; }
.doors { grid-area: doors; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; }

/* The house ghost is the shared felt ghost (felt.css); here it only gets its place and size. */
.hero .felt-ghost { grid-area: ghost; margin: -8px 0 0; width: min(62vw, 300px); z-index: 2; }
.demo-cursor { display: none; }
.is-demo .demo-cursor {
  display: block; position: fixed; left: 0; top: 0; z-index: 99; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; background: rgba(246, 181, 68, .85); box-shadow: 0 0 0 6px rgba(246, 181, 68, .25); pointer-events: none;
}

@media (min-width: 900px) {
  .hero { padding-top: 120px; padding-bottom: 150px; display: flex; align-items: center; }
  .hero-inner {
    grid-template-columns: 1.08fr .92fr; grid-template-rows: auto auto auto;
    grid-template-areas: "title ghost" "lede ghost" "doors ghost";
    justify-items: start; text-align: left; align-items: center; column-gap: 2vw;
  }
  .hero-title { font-size: clamp(110px, 10.4vw, 168px); align-self: end; }
  .hero-title .l1 { transform-origin: left; }
  .hero-lede { font-size: clamp(20px, 1.6vw, 24px); max-width: 21em; margin: 26px 0 32px; text-wrap: pretty; }
  .doors { justify-content: flex-start; gap: 22px; }
  .hero .felt-ghost { width: min(39vw, 560px); margin: 0; justify-self: center; }
  .pumpkin { right: 3%; bottom: 120px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .hero .felt-ghost { width: min(32vw, 420px); }
  .hero-title { font-size: clamp(96px, 9vw, 140px); }
}
@media (max-width: 899px) {
  .moon { right: -6%; }
  .moon svg { width: 150px; }
  .bat { left: 6%; }
  .bat svg { width: 74px; }
  .s1 { left: 86%; } .s2 { left: 3%; }
  .bat { left: auto; right: 30%; top: 50px; } .bat .thread { height: 18px; }
  .hero .felt-ghost { width: min(76vw, 340px); margin-top: 4px; }
  .hero { display: flex; flex-direction: column; justify-content: center; }
  .c1 { right: auto; left: -14%; }
  .doors { gap: 12px; flex-wrap: nowrap; }
  .doors .patch { padding: 10px 16px 12px; font-size: 26px; min-height: 58px; }
  .pumpkin { right: 4%; bottom: 34px; width: 64px; }
  .prompt { font-size: 16px; }
  /* keep the hanging props clear of the headline */
  .hero .s1 { --len: 14px !important; right: 5%; left: auto; }
  .hero .moon { --len: 196px !important; right: -13%; }
  .hero .moon svg { width: 108px; }
  .hero { padding-bottom: 96px; }
}
@media (max-width: 759px) { /* the header has two rows here: the stage starts under it */
  .hero { padding-top: 128px; }
  .hang { top: 96px; }
  .bat { top: 88px; }
}

/* ---------- 1. how selling works ---------- */
.how-grid { display: grid; gap: 54px; }
@media (min-width: 960px) { .how-grid { grid-template-columns: .95fr 1.05fr; align-items: start; gap: 64px; } }
.steps { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 22px; }
.steps li { display: grid; grid-template-columns: 62px 1fr; gap: 18px; align-items: center; font-size: 18px; color: var(--muted-ink); }
.steps b { display: block; font: 400 clamp(32px, 3vw, 42px)/1 var(--display); color: var(--ink); margin-bottom: 4px; letter-spacing: .01em; }
.num {
  position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  font: 400 34px/1 var(--display); color: var(--cream); background: var(--night);
  box-shadow: 0 4px 0 #120a1c;
}
.steps li:nth-child(2n) .num { background: var(--coral-ink); box-shadow: 0 4px 0 #7d2412; }
.num::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px dashed rgba(251, 241, 225, .7); }

/* The spellbook: the shared code block, with the house ghost peeking over it. */
.spellbook { position: relative; padding-top: 104px; }
.spellbook .codeblock { z-index: 1; }
.peeker { position: absolute; right: 34px; top: 0; width: 230px; height: 150px; overflow: hidden; z-index: 0; transform: rotate(8deg); transform-origin: bottom center; transition: transform .5s var(--squish); }
.peek-inner { position: relative; }
.peeker img { width: 100%; height: auto; }
.peeker canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.spellbook:hover .peeker, .spellbook:focus-within .peeker { transform: rotate(4deg) translateY(-14px); }
.prompt { overflow: hidden; max-height: calc(1.6em * 9); -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.prompt.is-open { max-height: none; -webkit-mask-image: none; mask-image: none; }
.spellbook .link-button { margin: 4px 4px 0; }
.fallback { margin: 22px 6px 0; font-size: 18px; color: var(--muted-ink); }
.fallback .link { color: var(--ink); }

/* ---------- 2. the souls: the hanging rail ----------
   Static by default (no JS, reduced motion): a horizontal scroll-snap row of still puppets.
   rail.js adds .is-live: the section is pinned and the rail slides with the scroll. */
.souls { padding: 0; }
.souls-stage { position: relative; z-index: 2; padding: clamp(70px, 9vw, 120px) 0 70px; overflow: clip; }
.souls .wrap { position: relative; z-index: 1; text-align: center; }
.souls .title { font-size: clamp(54px, 6.4vw, 100px); }
.souls .lede { margin-inline: auto; margin-bottom: .9em; }
.rail-wrap {
  --slot: clamp(176px, 16vw, 250px); --artw: calc(var(--slot) * 1.25); --lenk: 1;
  position: relative; z-index: 2; margin-top: 10px;
}
@media (max-width: 700px) { .rail-wrap { --slot: 172px; --lenk: .7; } }
.rod {
  position: absolute; left: -10px; right: -10px; top: 0; height: 18px; z-index: 1; border-radius: 9px;
  background: linear-gradient(#a06a37, #7c4f26 60%, #61391a);
  box-shadow: 0 4px 0 #4a2b12, 0 12px 18px rgba(0, 0, 0, .35);
}
.rod::before { /* felt wrap, stitched */
  content: ""; position: absolute; left: 0; right: 0; top: 2px; bottom: 3px; border-radius: 8px;
  background: repeating-linear-gradient(115deg, rgba(255, 220, 170, .08) 0 10px, transparent 10px 20px);
}
.rod::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; border-top: 2px dashed rgba(255, 220, 160, .6); }
.track {
  list-style: none; margin: 0; display: flex; position: relative; z-index: 2;
  padding: 0 max(20px, 4vw);
  height: calc(104px * var(--lenk) + var(--artw) * var(--ar) + 150px);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.track::-webkit-scrollbar { display: none; }
.soul { position: relative; flex: 0 0 var(--slot); scroll-snap-align: center; }
.soul .ring { /* brass ring around the rod: the shared ring, stretched to wrap the rod */
  position: absolute; left: 50%; top: -6px; width: 15px; height: 30px; margin-left: -7.5px; z-index: 3;
  border-width: 3.5px; box-shadow: inset 1px 0 0 var(--brass-light), 0 2px 3px rgba(0, 0, 0, .4);
}
/* The link is a still, invisible box over the slot. Only the art and tag inside .swing move. */
.hit {
  position: absolute; z-index: 5; left: 0; width: 100%; border-radius: 22px;
  top: calc(18px + var(--len) * var(--lenk) - 14px);
  height: calc(var(--artw) * var(--ar) * (.93 - var(--ay)) + 178px);
}
.hit:focus-visible { outline: none; }
.is-empty .hit { top: calc(18px + var(--len) * var(--lenk) - 8px); height: 236px; }
.swing { position: absolute; left: 50%; top: 18px; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; }
/* Unscoped on purpose: the hero props have always used this rule too, which keeps their threads
   at zero length, so they hang right under the pelmet. Scoping it would drop them 60 to 250 px. */
.thread { position: absolute; left: -.75px; top: 0; width: 1.5px; height: calc(var(--len) * var(--lenk)); background: rgba(251, 241, 225, .55); }
.body { position: absolute; left: 0; top: calc(var(--len) * var(--lenk)); width: 0; height: 0; transform-origin: 0 0; transition: scale .3s var(--squish); }
.art {
  position: absolute; width: var(--artw); height: calc(var(--artw) * var(--ar));
  left: calc(var(--artw) * var(--ax) * -1); top: calc(var(--artw) * var(--ar) * var(--ay) * -1);
  transform-origin: calc(var(--artw) * var(--ax)) calc(var(--artw) * var(--ar) * var(--ay));
}
.art img, .art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.art img { filter: drop-shadow(0 14px 14px rgba(8, 3, 16, .5)); }
.art canvas { display: none; }
.soul.has-eyes .art canvas { display: block; }
.standin {
  position: absolute; left: 25%; top: 18%; width: 31%; height: 64%; display: grid; place-items: center;
  border: 2.5px dashed rgba(251, 241, 225, .55); border-radius: 50% 50% 18px 18px; background: rgba(251, 241, 225, .06);
  color: var(--lilac-text); font-size: 14px; font-weight: 800;
}
.tag {
  position: absolute; left: calc(var(--slot) * -.46); width: calc(var(--slot) * .92);
  top: calc(var(--artw) * var(--ar) * (.93 - var(--ay)));
  padding: 12px 10px 12px; background: var(--cream); color: var(--ink); text-align: center;
  border-radius: 18px 22px 16px 20px; box-shadow: 0 5px 0 #c7ad86, 0 10px 18px rgba(8, 3, 16, .35);
  transform-origin: 50% 0; rotate: -1.5deg; transition: translate .25s var(--squish);
}
.soul:nth-child(2n) .tag { rotate: 1.5deg; }
.tag::before { content: ""; position: absolute; inset: 6px; border: 2px dashed rgba(42, 27, 61, .35); border-radius: 13px 17px 11px 15px; pointer-events: none; }
.tag-name { display: block; font: 400 clamp(25px, 2.1vw, 32px)/1 var(--display); }
.tag-trade { display: block; font-size: 15px; line-height: 1.3; color: var(--muted-ink); margin: 4px 0 8px; text-wrap: balance; }
.tag-row { display: flex; justify-content: center; align-items: center; gap: 5px 8px; flex-wrap: wrap; font-size: 14px; font-weight: 800; }
.ask, .sell-yours {
  position: absolute; left: 50%; bottom: -17px; translate: -50% 0; rotate: -3deg; white-space: nowrap;
  padding: 4px 12px 5px; border-radius: 12px; background: var(--coral); color: var(--ink);
  font: 400 21px/1 var(--display); box-shadow: 0 3px 0 var(--coral-edge);
  opacity: 0; transition: opacity .2s;
}
.sell-yours { opacity: 1; }
/* Hover or focus: the soul lifts a little; "Ask for 5¢" appears in place. */
.hit:hover ~ .swing .body, .hit:focus-visible ~ .swing .body { scale: 1.03; }
.hit:hover ~ .swing .ask, .hit:focus-visible ~ .swing .ask { opacity: 1; }
.hit:focus-visible ~ .swing .tag { outline: 3px solid var(--amber); outline-offset: 4px; }
/* The empty slot: one felt tag with a brass eyelet, hung on a brass hook. */
.is-empty .art.hook { width: 30px; height: 45px; left: -21px; top: -3px; z-index: 2; }
.is-empty .art.hook svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(8, 3, 16, .45)); }
.soul.is-empty .tag { top: 15px; left: calc(-6px - var(--slot) * .45); width: calc(var(--slot) * .9); padding: 30px 12px 16px; rotate: 0deg; z-index: 1; }
.eyelet {
  position: absolute; left: 50%; top: 6px; width: 17px; height: 17px; margin-left: -8.5px; border-radius: 50%;
  background: radial-gradient(circle, var(--night) 0 3.8px, #7a4d1c 4.4px, #f3cd7a 5.6px, #d9a441 7px, #9a6a28 8.5px);
  box-shadow: 0 1px 2px rgba(8, 3, 16, .4);
}
.is-empty .tag-trade { margin-bottom: 12px; }
.is-empty .sell-yours { position: relative; left: auto; bottom: auto; translate: none; display: inline-block; rotate: -2deg; padding: 6px 14px 7px; font-size: 22px; }
.swipe { display: block; margin: 6px auto 0; text-align: center; font-weight: 800; font-size: 16px; color: var(--amber); }

/* Back layer: small far-off stars and bats on threads. rail.js slides it at a fraction of the rail. */
.backdrop { position: absolute; left: 0; top: 0; height: 100%; width: calc(100% + 480px); z-index: 0; pointer-events: none; }
.bk { position: absolute; left: var(--x); top: var(--y); width: var(--s); opacity: var(--o); }
.bk::before { content: ""; position: absolute; left: 50%; bottom: 72%; width: 1px; height: var(--len); background: linear-gradient(rgba(251, 241, 225, 0), rgba(251, 241, 225, .32)); }
.bk svg { display: block; width: 100%; aspect-ratio: 1; }
.bk-bat svg { aspect-ratio: 200 / 110; }

/* Progress: a small felt tape measure under the rail (live only). */
.tape { display: none; }
.tape-case {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #f3cd7a, #d9a441 55%, #8f6124); box-shadow: 0 2px 3px rgba(8, 3, 16, .45);
}
.tape-case::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.6px dashed rgba(80, 45, 10, .65); }
.tape-strip {
  position: relative; width: clamp(130px, 15vw, 210px); height: 13px; margin-left: -8px; border-radius: 2px 4px 4px 2px; overflow: hidden;
  background: #e9d6b4; box-shadow: 0 2px 0 #b99b6c;
}
.tape-strip::after { /* tick marks, printed on top of the fill */
  content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: repeating-linear-gradient(90deg, rgba(42, 27, 61, .6) 0 1.5px, transparent 1.5px 10px);
}
.tape-fill { position: absolute; inset: 0; background: var(--coral); transform-origin: 0 50%; transform: scaleX(0); }
.tape-count { font-size: 15px; font-weight: 800; color: var(--lilac-text); white-space: nowrap; }
.tape-count b { color: var(--cream); }

/* Live: pinned stage, the track moves by transform only. */
.souls.is-live { height: calc(100svh + var(--pin, 0px)); }
.souls.is-live .souls-stage {
  position: sticky; top: 0; height: 100svh; padding: 28px 0 0;
  display: flex; flex-direction: column; justify-content: center;
}
.souls.is-live .track { overflow: visible; scroll-snap-type: none; will-change: transform; }
.souls.is-live .swipe { display: none; }
.souls.is-live .tape { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; }
.souls.is-live .backdrop { will-change: transform; }
.souls.is-live .swing, .souls.is-live .body, .souls.is-live .art { will-change: transform; }
/* Parked (after the first pass): one screen tall (--pin is 0), never driven by the page scroll.
   A sideways drag or swipe moves the rail; an up or down swipe scrolls the page. */
.souls.is-parked .souls-stage { touch-action: pan-y; cursor: grab; }
.souls.is-dragging .souls-stage { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* ---------- 3. for agents ---------- */
.agents-grid { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .agents-grid { grid-template-columns: .7fr 1.3fr; gap: 60px; } }
/* Felt snow globe (FLORA render, crystal ball b): felt clouds and a tiny ghost with painted eyes under a
   frosted dome. Its glow breathes. The ghost's rise is a 12 fps clip (anim.js makes its canvas over the
   still); the globe, cushion and tassel never move. Dome centre (50%, 40%) and size measured on the web image. */
.crystal { position: relative; width: clamp(180px, 24vw, 320px); justify-self: center; border-radius: 18px; -webkit-tap-highlight-color: transparent; }
.crystal.is-anim { cursor: pointer; }
.crystal::before { /* a light dusk-plum sky behind the frosted gaps, kept inside the dome, so the dome reads on cream */
  content: ""; position: absolute; left: 50%; top: 40%; width: 112%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 43, 88, .5) 0 40%, rgba(62, 43, 88, .22) 50%, rgba(62, 43, 88, 0) 64%);
}
.crystal img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(42, 27, 61, .22)); }
.crystal .ball-glow { z-index: 2; }
.ball-glow { /* centred on the ball: measured on the web image */
  position: absolute; left: 50%; top: 40%; width: 80%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 120, .55), rgba(255, 170, 90, .18) 45%, rgba(255, 170, 90, 0) 68%);
  mix-blend-mode: screen; opacity: .45; pointer-events: none; animation: ball-breathe 4.6s ease-in-out infinite;
}
@keyframes ball-breathe { 50% { opacity: .95; scale: 1.04; } }
/* The MCP address: a one-line code strip with its copy patch. */
.mcp {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 12px 12px 22px; background: var(--night); color: var(--cream);
  border-radius: 20px 24px 18px 22px; box-shadow: 0 6px 0 #160d22; width: fit-content; max-width: 100%; position: relative;
}
.mcp::before { content: ""; position: absolute; inset: 6px; border: 2px dashed rgba(246, 181, 68, .45); border-radius: 15px 19px 13px 17px; pointer-events: none; }
.mcp code { font-size: clamp(15px, 1.6vw, 19px); word-break: break-all; }
.aside { font-size: 20px; margin: 10px 0 0; }

/* ---------- 4. the ledger ---------- */
.ledger .wrap { text-align: center; }
.graves { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 46px); margin: 30px auto 0; position: relative; }
.graves::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -26px; height: 52px; background: #22152f; border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: -1; }
.grave { position: relative; width: clamp(104px, 22vw, 250px); color: var(--ink); }
.grave.tall { width: clamp(118px, 25vw, 286px); }
.grave svg { width: 100%; aspect-ratio: 260 / 300; }
.grave p { position: absolute; inset: 40% 8% auto; margin: 0; display: grid; gap: 6px; }
.grave .n { font: 400 clamp(36px, 6vw, 84px)/.9 var(--display); display: inline-block; }
.grave .l { font-size: clamp(13px, 1.4vw, 18px); font-weight: 800; color: #3b2a50; line-height: 1.2; }
@media (max-width: 600px) {
  .graves { gap: 6px; }
  .grave, .grave.tall { width: 31vw; }
  .grave.tall { width: 33vw; }
  .grave p { inset: 36% 10% auto; }
  .grave .n { font-size: 40px; }
  .grave .l { font-size: 12px; }
}
/* The numbers' pop is a Web Animation in landing.js (no forced layout). */
.last { margin: 60px auto 0; font-size: clamp(17px, 1.6vw, 21px); color: var(--lilac-text); max-width: 36em; }
.last b { color: var(--cream); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); margin-right: 10px; box-shadow: 0 0 0 4px rgba(143, 214, 192, .25); }
.note { font-size: 15px; color: var(--lilac-text); margin: 10px 0 0; }

/* ---------- 5. trust ---------- */
.trust-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .trust-grid { grid-template-columns: 312px 1fr; gap: 56px; align-items: center; } }
/* Felt wardrobe with the peeking skeleton: a 12 fps stop-motion clip (anim.js) drawn on the canvas
   over the still "shh" frame. The still is the reduced-motion and no-JS image. */
.closet { position: relative; justify-self: center; width: clamp(170px, 46vw, 250px); border-radius: 18px; -webkit-tap-highlight-color: transparent; }
@media (min-width: 900px) { .closet { width: 312px; } }
.closet img, .closet canvas { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.closet canvas { position: absolute; inset: 0; height: 100%; display: none; }
.closet.is-anim img { visibility: hidden; }
.closet.is-anim canvas { display: block; }
.closet.is-anim { cursor: pointer; }
.closet-shadow { /* the clip has no ground shadow: a soft, still one under the feet */
  position: absolute; z-index: 0; left: 6%; right: 6%; bottom: -1.5%; height: 6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(42, 27, 61, .34), rgba(42, 27, 61, .12) 60%, transparent);
}
.vows { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 30px; }
@media (min-width: 900px) { .vows { grid-template-columns: repeat(3, 1fr); } }
.vows h3 { font: 400 clamp(36px, 3.2vw, 46px)/1 var(--display); margin: 0 0 8px; }
.vows li:nth-child(2) h3 { color: var(--coral-ink); }
.vows p { margin: 0; font-size: 18px; color: var(--muted-ink); max-width: 22em; }

/* ---------- the last call, before the shared footer ---------- */
.cta { text-align: center; padding-bottom: clamp(50px, 6vw, 90px); }
.cta .doors { justify-content: center; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }