/* Masquerade: the membership page (/masquerade). Builds on landing.css.
   The page is one evening: an invitation arrives and is opened, the title
   card plays, you choose your mask, lift the masks off what's inside, weigh
   the levels, walk through the candlelit room, and the credits roll.

   Choosing a mask re-lights the whole page through the --m-* properties
   below (registered so the light fades between masks instead of jumping). */
@property --m-accent { syntax: "<color>"; inherits: true; initial-value: var(--gold-bright); }
@property --m-deep { syntax: "<color>"; inherits: true; initial-value: var(--gold); }
@property --m-light { syntax: "<color>"; inherits: true; initial-value: rgba(228, 198, 135, 0.16); }
@property --m-glow { syntax: "<color>"; inherits: true; initial-value: rgba(228, 198, 135, 0.32); }

.mq-page { --m-accent: var(--gold-bright); --m-deep: var(--gold); --m-light: rgba(228, 198, 135, 0.16); --m-glow: rgba(228, 198, 135, 0.32);
  transition: --m-accent 1s ease, --m-deep 1s ease, --m-light 1s ease, --m-glow 1s ease; }
.mq-page[data-mask="silver"] { --m-accent: #E2E6EB; --m-deep: #9AA1A8; --m-light: rgba(200, 212, 228, 0.15); --m-glow: rgba(200, 212, 228, 0.28); }
.mq-page[data-mask="black"] { --m-accent: #E7A1B4; --m-deep: var(--wine-bright); --m-light: rgba(176, 68, 95, 0.18); --m-glow: rgba(176, 68, 95, 0.36); }
.mq-page .display-xl em, .mq-page h2 em, .candle-words h2 em { color: transparent; background: linear-gradient(100deg, color-mix(in srgb, var(--m-accent) 70%, #fff) 0%, var(--m-accent) 38%, var(--m-deep) 80%); -webkit-background-clip: text; background-clip: text; }
.mq-page .mono-tag { color: var(--m-deep); }

/* ================= 1. the invitation ================= */
.mq-invite { position: relative; height: 340vh; }
.inv-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  --ew: min(540px, 86vw, calc((100svh - 150px) * 0.87));
  --seal: 0; --flap: 0; --rise: 0; --out: 0; --hint: 1;
}
.inv-sticky::before { /* candle behind the envelope */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 52%, rgba(228, 198, 135, 0.13), rgba(107, 26, 48, 0.12) 18.7vmax, transparent 40.7vmax);
  /* the box clips the glow, so fade it out before the bottom edge rather than
     leaving a hard line where the next section begins */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
  mask-image: linear-gradient(to bottom, #000 62%, transparent);
  animation: candleBreath 5s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes candleBreath { from { opacity: 0.75; } to { opacity: 1; } }
.inv-intro { position: absolute; top: max(110px, 14vh); left: 0; right: 0; text-align: center; opacity: var(--hint); transform: translateY(calc((1 - var(--hint)) * -20px)); pointer-events: none; }
.inv-intro .mono-tag { justify-content: center; }
.inv-hint { position: absolute; bottom: 5vh; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--smoke); opacity: var(--hint); }
.inv-hint i { display: block; width: 1px; height: 38px; margin: 12px auto 0; background: linear-gradient(var(--gold), transparent); animation: hintDrop 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes hintDrop { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.inv-scene { position: relative; width: var(--ew); height: calc(var(--ew) / 1.6); margin-top: 6vh; perspective: 1400px; }
/* .env makes no stacking context of its own (no transform or opacity), so the
   letter can sit between its back and its front; each part falls away by itself */
.env { position: absolute; inset: 0; --drop: translateY(calc(var(--out) * 75%)); }
.env > * { transform: var(--drop); opacity: calc(1 - var(--out) * 1.1); }
.env-back {
  position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(160deg, #3c0f1d, #1c0a10 60%);
  box-shadow: 0 50px 90px rgba(0, 0, 0, 0.6);
}
.env-back::after { /* the lining: faint gold lattice, seen once the flap lifts */
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0.35;
  background: repeating-linear-gradient(45deg, rgba(228, 198, 135, 0.18) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, rgba(228, 198, 135, 0.18) 0 1px, transparent 1px 14px);
}
.env-front, .env-flap { position: absolute; inset: 0; filter: drop-shadow(0 -1px 0 rgba(228, 198, 135, 0.45)); pointer-events: none; }
.env-front { z-index: 3; }
.env-front i, .env-flap i { position: absolute; inset: 0; display: block; }
.env-front i { clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); background: linear-gradient(175deg, #1b161a, #0d0b0d 70%); border-radius: 0 0 6px 6px; }
.env-front i::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 9%; height: 1px; background: linear-gradient(90deg, transparent, rgba(228, 198, 135, 0.35), transparent); }
.env > .env-flap { z-index: 4; transform-origin: 50% 0; transform: var(--drop) rotateX(calc(var(--flap) * -178deg)); }
.inv-sticky.flap-back .env > .env-flap { z-index: 1; }
.env-flap i { height: 62%; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, #211b20, #0f0c0f); }
.seal {
  position: absolute; z-index: 5; left: 50%; top: 62%; width: 24%; aspect-ratio: 1; margin: -12% 0 0 -12%;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
.env > .seal { opacity: calc(1 - var(--flap) * 3); }
.seal span { position: absolute; inset: 0; display: grid; place-items: center; transition: none; }
.seal span img { width: 100%; height: auto; }
.seal .l { clip-path: polygon(0 0, 54% 0, 44% 38%, 56% 60%, 46% 100%, 0 100%); transform: translate(calc(var(--seal) * -60%), calc(var(--seal) * 90%)) rotate(calc(var(--seal) * -38deg)); }
.seal .r { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%, 56% 60%, 44% 38%); transform: translate(calc(var(--seal) * 60%), calc(var(--seal) * 110%)) rotate(calc(var(--seal) * 32deg)); }

/* the letter: a noir invitation card, gold foil frame, gold script title */
.letter {
  position: absolute; z-index: 2; left: 4%; width: 92%; top: 5%; height: calc(var(--ew) / 1.6 * 0.92 * 2);
  border-radius: 4px; padding: 7%; text-align: center; color: var(--cream);
  background: radial-gradient(120% 60% at 50% 0%, rgba(107, 26, 48, 0.32), transparent 62%), radial-gradient(90% 50% at 50% 100%, rgba(199, 166, 92, 0.07), transparent 70%), linear-gradient(172deg, #181219 0%, #0e0b0f 58%, #0a090b 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(199, 166, 92, 0.6);
  transform: translateY(calc(var(--rise) * -50% + var(--out) * 24%)) scale(calc(1 + var(--out) * 0.04));
  clip-path: inset(0 0 calc((1 - var(--rise)) * 50%) 0);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--ew) * 0.022);
}
.inv-sticky.done .letter { z-index: 6; }
/* inner hairline frame with gold corner brackets */
.letter::before { content: ""; position: absolute; inset: 3.4%; border: 1px solid rgba(199, 166, 92, 0.22); pointer-events: none;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / 26px 1px no-repeat, linear-gradient(var(--gold), var(--gold)) top left / 1px 26px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 26px 1px no-repeat, linear-gradient(var(--gold), var(--gold)) top right / 1px 26px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 26px 1px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom left / 1px 26px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 26px 1px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom right / 1px 26px no-repeat; }
.lt-emblem { width: calc(var(--ew) * 0.12); filter: drop-shadow(0 0 14px rgba(228, 198, 135, 0.35)); }
.lt-small { font-family: var(--font-mono); font-size: max(9px, calc(var(--ew) * 0.02)); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); line-height: 1.7; max-width: 30ch; margin: 0; }
.lt-title { display: inline-block; padding: 0.08em 0.14em 0.24em; font-family: var(--font-sans); font-size: calc(var(--ew) * 0.13); line-height: 1; margin: 0;
  background: linear-gradient(100deg, #f3e2b0, var(--gold-bright) 35%, var(--gold) 70%, #a8884a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 18px rgba(228, 198, 135, 0.18)); }
.lt-rule { width: 30%; height: 1px; background: linear-gradient(90deg, transparent, rgba(199, 166, 92, 0.7), transparent); }
.lt-body { font-family: var(--font-serif); font-size: max(13px, calc(var(--ew) * 0.032)); line-height: 1.55; color: rgba(242, 236, 223, 0.82); max-width: 34ch; margin: 0; }
.lt-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: calc(var(--ew) * 0.02); opacity: var(--out); pointer-events: none; }
.inv-sticky.done .lt-actions { pointer-events: auto; }
.lt-btn {
  display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 999px;
  font-family: var(--font-mono); font-size: max(10px, calc(var(--ew) * 0.019)); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  color: #120d0a; background: linear-gradient(135deg, var(--gold), var(--gold-bright)); border: 1px solid transparent; transition: filter .3s ease, background .3s ease, color .3s ease;
}
.lt-btn:hover { filter: brightness(1.08); }
.lt-btn--line { background: transparent; color: var(--gold-bright); border-color: rgba(199, 166, 92, 0.55); }
.lt-btn--line:hover { background: rgba(199, 166, 92, 0.1); filter: none; }

/* ================= 2. the title card: video inside the letters ================= */
.mq-title { position: relative; padding: 70px 0 120px; text-align: center; --vp: 0; }
.vt { position: relative; overflow: hidden; isolation: isolate; }
.vt video, .vt img.vt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.45) contrast(1.05); transform: scale(calc(1.15 - var(--vp) * 0.12)); }
.vt-knock {
  position: relative; margin: 0; padding: 0.06em 0 0.1em; background: var(--noir); color: #fff; mix-blend-mode: multiply;
  font-family: var(--font-serif); font-weight: 700; font-size: clamp(44px, 11.6vw, 230px); line-height: 0.95;
  letter-spacing: calc(0.08em - var(--vp) * 0.1em); white-space: nowrap;
}
/* Multiply leaves the space around the letters darker than the page, which
   showed as a black strip. The same word on top, black letters on the page
   colour with lighten, lifts that space back to exactly the page colour and
   leaves the video inside the letters as it was. */
.vt-lift { position: absolute; inset: 0; color: #000; mix-blend-mode: lighten; }
.mq-title .section-lede { margin: 28px auto 0; text-align: center; }
.mq-title .mono-tag { justify-content: center; margin-bottom: 26px; }

/* ================= 3. choose your mask ================= */
.mq-masks { position: relative; padding: 90px 0 140px; overflow: hidden; }
.mq-masks::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 45% at 50% 30%, var(--m-light), transparent 75%); }
.mq-center { text-align: center; max-width: 760px; margin: 0 auto 56px; position: relative; }
.mq-center .section-lede { margin-left: auto; margin-right: auto; }
/* the orbit: three masks circling the emblem on a tilted ring. Masquerade.js
   places each mask every frame (position, size, brightness and stacking all
   follow its place on the ring) and swings the chosen one to the front. */
.orbit { position: relative; height: clamp(400px, 44vw, 560px); max-width: 1040px; margin: 40px auto 60px; --cy: 40%; --rx: 40%; --ry: 30%; }
.orbit-ring { position: absolute; left: calc(50% - var(--rx)); width: calc(var(--rx) * 2); top: calc(var(--cy) - var(--ry)); height: calc(var(--ry) * 2); overflow: visible; pointer-events: none; }
.orbit-ring path { fill: none; stroke: var(--m-deep); stroke-width: 1; }
.orbit-ring--back { z-index: 1; opacity: 0.35; }
.orbit-ring--back path { stroke-dasharray: 2 7; }
.orbit-ring--front { z-index: 55; opacity: 0.5; }
.orbit-sun { position: absolute; left: 50%; top: var(--cy); z-index: 50; width: clamp(84px, 12vw, 160px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.orbit-sun img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 22px var(--m-glow)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6)); }
.sun-halo { position: absolute; inset: -70%; border-radius: 50%; background: radial-gradient(circle, var(--m-glow), transparent 62%); animation: sunPulse 4s ease-in-out infinite alternate; }
.sun-halo::after { content: ""; position: absolute; inset: 26%; border-radius: 50%; border: 1px dashed var(--m-deep); opacity: 0.35; animation: ringSpin 50s linear infinite; }
@keyframes sunPulse { from { opacity: 0.6; transform: scale(0.94); } to { opacity: 1; transform: scale(1.04); } }
.mask-btn {
  position: absolute; left: 0; top: 0; width: clamp(124px, 14vw, 196px); padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--cream); font: inherit;
  will-change: transform, opacity, filter;
}
.mask-btn .mask-img { width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.6)); transition: filter .8s ease; }
.mask-btn[aria-checked="true"] .mask-img { filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 28px var(--m-glow)); animation: maskFloat 4.5s ease-in-out infinite alternate; }
@keyframes maskFloat { from { translate: 0 0; } to { translate: 0 -6px; } }
.mask-btn b { font-family: var(--font-sans); font-weight: 400; font-size: 28px; line-height: 1; }
.mask-btn small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--smoke); }
.mask-btn::after { content: ""; width: 0; height: 1px; margin-top: 4px; background: var(--m-accent); transition: width .6s ease; }
.mask-btn[aria-checked="true"]::after { width: 34px; }
.mask-btn[data-mask="silver"] b { color: #E2E6EB; } .mask-btn[data-mask="gold"] b { color: var(--gold-bright); } .mask-btn[data-mask="black"] b { color: #E7A1B4; }
.mask-btn:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 6px; border-radius: 12px; }

.mask-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(50px, 8vw, 110px); align-items: center; }
.mask-panel { display: none; }
.mask-panel.active { display: block; animation: panelIn .7s ease; }
.mp-name { font-family: var(--font-sans); font-size: clamp(56px, 6.4vw, 92px); line-height: 1.02; color: var(--m-accent); margin: 0; }
.mp-tag { font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.2vw, 28px); color: var(--cream); margin: 8px 0 0; }
.mp-price { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--smoke); margin: 18px 0 0; }
.mp-price b { font-weight: 500; font-size: 20px; color: var(--cream); }
.mask-panel .tp-list b { color: var(--m-deep); }
.mask-panel .tp-list li { border-top-color: rgba(255, 255, 255, 0.1); }
.mask-stage .demo-phone .phone-glow { background: radial-gradient(ellipse 50% 50% at 50% 46%, var(--m-glow) 0%, transparent 70%); }

/* glowing edges: a soft light on the border that follows the pointer */
.glow { --mx: -999px; --my: -999px; }
.glow::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(260px circle at var(--mx) var(--my), var(--m-accent), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.9;
}
.glow::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), var(--m-light), transparent 55%);
}

/* ================= 5. the comparison slider ================= */
.mq-compare { padding: 110px 0 130px; }
.cmp { position: relative; border-radius: 28px; padding: clamp(28px, 5vw, 64px); background: linear-gradient(160deg, #161114, #0c0a0c 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.cmp-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 34px; }
.cmp-level { font-family: var(--font-sans); font-size: clamp(48px, 5vw, 72px); line-height: 1; color: var(--m-accent); }
.cmp-price { font-family: var(--font-mono); font-size: clamp(34px, 4vw, 54px); color: var(--cream); line-height: 1; }
.cmp-price small { font-size: 14px; color: var(--smoke); margin-left: 4px; }
.cmp-track { position: relative; z-index: 2; padding: 22px 0 44px; }
.cmp-rail { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -12px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.cmp-rail i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v, 50) * 1%); background: linear-gradient(90deg, #9AA1A8, var(--gold-bright) 50%, var(--wine-bright)); border-radius: 2px; }
.cmp-stops { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.cmp-stops button { background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--smoke); font: inherit; letter-spacing: inherit; }
.cmp-stops button.on { color: var(--cream); }
.cmp input[type="range"] { position: relative; width: 100%; margin: 0; height: 40px; background: transparent; -webkit-appearance: none; appearance: none; cursor: grab; }
.cmp input[type="range"]:active { cursor: grabbing; }
.cmp input[type="range"]::-webkit-slider-runnable-track { height: 40px; background: transparent; }
.cmp input[type="range"]::-moz-range-track { height: 40px; background: transparent; }
.cmp input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 54px; height: 34px; margin-top: 3px; border-radius: 999px; border: 0;
  background: var(--noir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4C687' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5c3-1.4 6.2-1.2 9.5 0 3.3-1.2 6.5-1.4 9.5 0-.2 4.6-2.4 7.3-5.4 7.3-2 0-3.1-1.4-4.1-2.9-1 1.5-2.1 2.9-4.1 2.9-3 0-5.2-2.7-5.4-7.3z'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: 0 0 0 1px var(--gold), 0 0 24px var(--m-glow);
}
.cmp input[type="range"]::-moz-range-thumb {
  width: 54px; height: 34px; border-radius: 999px; border: 0;
  background: var(--noir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4C687' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5c3-1.4 6.2-1.2 9.5 0 3.3-1.2 6.5-1.4 9.5 0-.2 4.6-2.4 7.3-5.4 7.3-2 0-3.1-1.4-4.1-2.9-1 1.5-2.1 2.9-4.1 2.9-3 0-5.2-2.7-5.4-7.3z'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: 0 0 0 1px var(--gold), 0 0 24px var(--m-glow);
}
.cmp input[type="range"]:focus-visible { outline: none; }
.cmp input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--cream), 0 0 24px var(--m-glow); }
.cmp-list { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.cmp-list li {
  display: flex; align-items: baseline; gap: 14px; padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 16.5px; color: var(--cream); opacity: 0.28; transition: opacity .5s ease;
}
.cmp-list li::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--smoke-dim); transform: translateY(-2px); transition: background .5s ease, box-shadow .5s ease; }
.cmp-list li.lit { opacity: 1; }
.cmp-list li.lit::before { background: var(--m-accent); box-shadow: 0 0 10px var(--m-glow); }
.cmp-list li em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--smoke); white-space: nowrap; }
.cmp-list li .val { color: var(--m-accent); font-family: var(--font-mono); font-size: 14px; }
.cmp-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 34px; font-size: 15px; color: var(--smoke); }
.cmp-foot p { margin: 0; max-width: 60ch; }
.cmp-foot a:not(.btn) { color: var(--m-accent); }

/* ================= 6. the candlelit room ================= */
.mq-candle { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; --cx: 50%; --cy: 50%; --cr: 230px; cursor: none; }
.candle-room { position: absolute; inset: 0; }
.candle-room img { position: absolute; object-fit: cover; filter: grayscale(0.4) contrast(1.05); border-radius: 18px; }
.candle-room .p1 { left: 6%; top: 12%; width: 26%; height: 52%; }
.candle-room .p2 { left: 37%; top: 30%; width: 26%; height: 58%; }
.candle-room .p3 { right: 6%; top: 8%; width: 26%; height: 46%; }
.candle-words { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.candle-words h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(48px, 8vw, 128px); line-height: 0.98; letter-spacing: -0.02em; color: var(--cream); margin: 0; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.7); }
.candle-words h2 em { font-family: var(--font-display); font-style: italic; font-weight: 300; }
.candle-dark {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle var(--cr) at var(--cx) var(--cy), rgba(11, 10, 12, 0) 0%, rgba(11, 10, 12, 0.35) 35%, rgba(11, 10, 12, 0.9) 70%, #0B0A0C 100%);
}
.candle-dark::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle calc(var(--cr) * 0.7) at var(--cx) var(--cy), var(--m-light), transparent 70%); mix-blend-mode: screen; }
.candle-flame { position: absolute; left: var(--cx); top: var(--cy); width: 10px; height: 16px; margin: -8px 0 0 -5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff6dc, #f3c56b 45%, rgba(176, 68, 95, 0) 72%); filter: blur(0.5px); pointer-events: none; box-shadow: 0 0 22px 8px rgba(243, 197, 107, 0.35); }
.candle-copy { position: absolute; left: 0; right: 0; bottom: 6vh; text-align: center; z-index: 2; }
.candle-copy p { margin: 0 auto 18px; max-width: 54ch; color: var(--smoke); font-size: 16.5px; padding: 0 16px; }
.candle-copy .mono-tag { justify-content: center; margin-bottom: 12px; }
.candle-copy .btn { cursor: pointer; }

/* ================= 7. FAQ ================= */
.mq-faq { padding: 120px 0 120px; }
.mq-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 70px; align-items: start; }
.mq-faq-grid .display-xl { font-size: clamp(42px, 4.6vw, 64px); }
.mq-faq-list details { border-top: 1px solid var(--line-strong); }
.mq-faq-list details:last-child { border-bottom: 1px solid var(--line-strong); }
.mq-faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 2px; font-family: var(--font-serif); font-size: 21px; color: var(--cream); }
.mq-faq-list summary::-webkit-details-marker { display: none; }
.mq-faq-list summary:hover { color: var(--m-accent); }
.mq-faq-list summary::after { content: "+"; font-family: var(--font-mono); font-size: 20px; color: var(--m-deep); transition: transform .3s ease; }
.mq-faq-list details[open] summary::after { transform: rotate(45deg); }
.mq-faq-list details p { margin: -6px 0 24px; max-width: 62ch; font-size: 17px; line-height: 1.75; color: var(--smoke); }
.mq-faq-list details p a { color: var(--m-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ================= 8. the credits ================= */
.mq-finale { position: relative; height: 260vh; --fp: 0; --bars: 0; --c1: 0; --c2: 0; --c3: 0; --c4: 0; }
.fin-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; text-align: center; }
.fin-bar { position: absolute; left: 0; right: 0; height: calc(var(--bars) * 13vh); background: #000; z-index: 4; }
.fin-bar.top { top: 0; } .fin-bar.bottom { bottom: 0; }
.fin-leak {
  position: absolute; inset: -20%; pointer-events: none; opacity: calc(var(--bars) * 0.8);
  background: radial-gradient(ellipse 30% 40% at calc(10% + var(--fp) * 80%) 40%, rgba(243, 160, 107, 0.16), transparent 70%), radial-gradient(ellipse 40% 30% at calc(90% - var(--fp) * 70%) 70%, var(--m-light), transparent 70%);
}
.fin-grain { position: absolute; inset: -50%; pointer-events: none; opacity: calc(0.05 + var(--bars) * 0.1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grainShift .5s steps(4) infinite; }
@keyframes grainShift { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); } }
.fin-credits { position: relative; z-index: 3; padding: 0 16px; }
.fin-credits > * { opacity: 0; transform: translateY(14px); transition: none; }
.fin-c1 { opacity: var(--c1) !important; transform: translateY(calc((1 - var(--c1)) * 14px)) !important; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--smoke); margin: 0 0 22px; }
.fin-c2 { opacity: var(--c2) !important; transform: translateY(calc((1 - var(--c2)) * 14px)) !important; font-family: var(--font-sans); font-size: clamp(64px, 11vw, 168px); line-height: 1; color: var(--m-accent); margin: 0; }
.fin-c3 { opacity: var(--c3) !important; transform: translateY(calc((1 - var(--c3)) * 14px)) !important; font-family: var(--font-display); font-style: italic; font-size: clamp(22px, 2.6vw, 34px); color: var(--cream); margin: 18px 0 0; }
.fin-c4 { opacity: var(--c4) !important; transform: translateY(calc((1 - var(--c4)) * 14px)) !important; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.mq-finale.ready .fin-c4 { pointer-events: auto; }
.fin-c4 { pointer-events: none; }

/* ================= responsive ================= */
@media (max-width: 1000px) {
  .mask-stage { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .mask-stage .demo-phone { order: -1; margin-bottom: 90px; }
  .mq-faq-grid { grid-template-columns: 1fr; gap: 30px; }
  .candle-room .p1 { left: 4%; top: 10%; width: 40%; height: 40%; }
  .candle-room .p2 { left: 30%; top: 40%; width: 40%; height: 44%; }
  .candle-room .p3 { right: 4%; top: 14%; width: 36%; height: 34%; }
}
@media (max-width: 700px) {
  .cmp-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .mq-masks { padding: 60px 0 100px; }
  .mq-compare { padding: 80px 0 90px; }
  .mq-faq { padding: 80px 0; }
  .mq-faq-list summary { font-size: 18.5px; }
  .mq-title { padding: 40px 0 80px; }
  .candle-copy { bottom: 4vh; }
  .cmp-list li { font-size: 15.5px; }
  .fin-c4 .btn { flex: 1 1 100%; max-width: 320px; }
}
@media (hover: none) { .mq-candle { cursor: auto; } }
@media (prefers-reduced-motion: reduce) {
  .mq-invite { height: auto; }
  .inv-sticky { position: relative; height: auto; min-height: 100svh; padding: 140px 0 80px; --rise: 1; --out: 1; --seal: 1; --flap: 1; --hint: 0; }
  .inv-sticky .env { display: none; }
  .inv-sticky .letter { position: relative; top: 0; left: 0; width: 100%; transform: none; clip-path: none; }
  .inv-sticky .lt-actions { pointer-events: auto; }
  .inv-sticky::before, .inv-hint i, .mask-btn[aria-checked="true"] .mask-img, .fin-grain { animation: none; }
  .vt-knock { letter-spacing: 0; }
  .mq-finale { height: auto; }
  .fin-sticky { position: relative; height: auto; padding: 120px 0; }
  .fin-bar, .fin-leak { display: none; }
  .fin-credits > * { opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .candle-dark { background: rgba(11, 10, 12, 0.55); }
  .candle-dark::after, .candle-flame { display: none; }
  .mq-candle { cursor: auto; }
}

/* narrow phones: one button on the letter (Apply stays in the header) */
@media (max-width: 480px) {
  .letter { gap: 7px; padding: 8% 6%; }
  .lt-btn--line { display: none; }
  .lt-btn { padding: 9px 16px; }
}

@media (max-width: 700px) {
  .orbit { height: 380px; margin: 50px auto 30px; }
  .mask-btn { width: 112px; }
  .mask-btn b { font-size: 20px; }
  .mask-btn small { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sun-halo, .sun-halo::after { animation: none; }
}