@font-face { font-family: "Baloo 2"; src: url("assets/fonts/Baloo2-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("assets/fonts/Baloo2-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("assets/fonts/Baloo2-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Gamja Flower"; src: url("assets/fonts/GamjaFlower.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --page: #fffef4; --ink: #000; --ink-soft: #4a4943; --muted: #8d8d8d; --card-edge: #ede3d2;
  --peach: #feddb6; --rust: #b35a1f; --highlight: #f79f5a;
  --sans: "Baloo 2", system-ui, sans-serif; --hand: "Gamja Flower", "Baloo 2", cursive;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--page); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
p, h1 { margin: 0; font-weight: inherit; }
[hidden] { display: none !important; }
.hand { font-family: var(--hand); }


.field { display: flex; gap: 8px; padding: 5px; border-radius: 9999px; background: #fff; border: 1px solid var(--card-edge); width: min(460px, 100%); }
.field input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 18px; font: 400 16px/1 var(--sans); color: var(--ink); outline: none; }
.field button { height: 48px; padding: 0 24px; border: 0; border-radius: 9999px; background: var(--ink); color: #fff; font: 400 15px var(--sans); cursor: pointer; white-space: nowrap; }

html, body { height: auto; }
body { overflow-x: hidden; overflow-y: auto; background: #f3efe6; }

/* =========================================================
   act 1 · the noise
   ========================================================= */
.chaos { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.depth { position: absolute; inset: -6%; will-change: transform; }
.w { position: absolute; left: var(--x); top: var(--y);
}
.w.inlens { will-change: transform; z-index: 5; }
.depth .w.inlens { filter: none !important; opacity: 1 !important; z-index: 5; }
.chaos::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 64% 45%, transparent 45%, rgba(70, 45, 20, .16) 100%); }
.c.shout { padding: 8px 16px; background: #fff; border: 2px solid #b23b2e; border-radius: 8px; color: #b23b2e; font-weight: 800; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 14px 30px -14px rgba(178,59,46,.6); }
.c.shout.y { border-color: #e3a008; color: #6b4a2b; background: #fff3c4; }
.c.shout.k { border-color: #000; background: #000; color: #fff; }
.c.vs { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid #ece7dd; box-shadow: 0 12px 26px -14px rgba(0,0,0,.4); white-space: nowrap; font-size: 13px; }
.c.vs b { font-weight: 800; font-size: 15px; color: #b23b2e; }
.c.vs .st { color: #e3a008; letter-spacing: 1px; } .c.vs .st i { color: #d9d4ca; font-style: normal; }
.notif { position: absolute; right: -8px; top: -8px; z-index: 3; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #e0352b; color: #fff; font: 700 11px/22px var(--sans); text-align: center; box-shadow: 0 0 0 2px #fff; }
.c.shake { animation: drift var(--dur) ease-in-out var(--del) infinite alternate, shake .45s ease-in-out; }
@keyframes shake { 20%, 60% { translate: -4px 0; } 40%, 80% { translate: 4px 0; } }
.depth.far .w { opacity: .42; }
.depth.mid .w { opacity: .85; }
.c { position: relative; font-size: 13px; line-height: 1.35; color: #2b2a27; }
.c.ping { animation: drift var(--dur) ease-in-out var(--del) infinite alternate, ping .9s ease-out; }
@keyframes drift { to { transform: translate(var(--mx), var(--my)) rotate(var(--mr)); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(247,159,90,.75); } 100% { box-shadow: 0 0 0 16px rgba(247,159,90,0); } }
.c.review, .c.thread, .c.article { width: 230px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px -14px rgba(0,0,0,.35); border: 1px solid #ece7dd; }
.c .stars { color: #e3a008; letter-spacing: 1px; } .c .stars i { color: #d9d4ca; font-style: normal; }
.c .t { font-weight: 600; margin-top: 3px; }
.c .meta { margin-top: 6px; font-size: 11px; color: #8d8d8d; }
.c.thread { width: 250px; }
.c.thread .who { font-size: 11px; color: #8d8d8d; } .c.thread .who b { color: #3a6ea5; font-weight: 500; }
.c.thread .votes { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: #8d8d8d; }
.c.thread .reply { margin-top: 8px; padding: 6px 8px; border-left: 2px solid #e5e0d6; font-size: 12px; color: #4a4943; }
.c.reel { width: 128px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #222; box-shadow: 0 14px 28px -14px rgba(0,0,0,.5); }
.c.reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.75)); }
.c.reel .cap { position: absolute; left: 8px; right: 8px; bottom: 26px; z-index: 1; color: #fff; font-weight: 700; font-size: 12px; text-transform: uppercase; line-height: 1.15; }
.c.reel .views { position: absolute; left: 8px; bottom: 8px; z-index: 1; color: rgba(255,255,255,.85); font-size: 10px; }
.c.reel .play { position: absolute; left: 50%; top: 38%; width: 34px; height: 34px; transform: translate(-50%,-50%); z-index: 1; border-radius: 50%; background: rgba(255,255,255,.3); }
.c.reel .play::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid #fff; border-block: 7px solid transparent; }
.c.reel .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #fff; z-index: 1; animation: bar var(--bd) linear infinite; }
@keyframes bar { to { width: 100%; } }
.c.comment { padding: 8px 14px; border-radius: 18px 18px 18px 4px; background: #fff; box-shadow: 0 8px 18px -12px rgba(0,0,0,.4); font-size: 14px; white-space: nowrap; border: 1px solid #ece7dd; }
.c.comment.dark { background: #1b1b1a; color: #fff; border-color: #1b1b1a; }
.c.typing { padding: 9px 14px; border-radius: 18px 18px 18px 4px; background: #fff; border: 1px solid #ece7dd; font-size: 12px; color: #8d8d8d; white-space: nowrap; }
.c.typing i { position: relative; top: 0; display: inline-block; width: 5px; height: 5px; margin-left: 3px; border-radius: 50%; background: #b9b5ab; animation: dot 1.2s infinite; }
.c.typing i:nth-child(2) { animation-delay: .2s; } .c.typing i:nth-child(3) { animation-delay: .4s; }
/* `top`, not transform: a transform animation gets its own GPU layer, and every wall card overlapping a dot would follow */
@keyframes dot { 50% { top: -3px; background: #6d675d; } }
.c.article { width: 250px; padding: 0; overflow: hidden; }
.c.article .k { padding: 8px 12px 0; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: #b23b2e; font-weight: 600; }
.c.article .h { padding: 2px 12px 12px; font-weight: 700; font-size: 15px; line-height: 1.2; }
.c.badge { padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: #fff3c4; color: #6b4a2b; border: 1px dashed #d8b45a; white-space: nowrap; }

/* outside the lens everything is a haze; inside it you can read */
.haze { position: fixed; left: 0; top: 0; width: 370px; height: 370px; border-radius: 50%; z-index: 2; pointer-events: none; will-change: transform;
  background: radial-gradient(closest-side, rgba(243, 239, 230, 0) 72%, rgba(243, 239, 230, .42) 100%); box-shadow: 0 0 0 300vmax rgba(243, 239, 230, .42); }
.ring { position: fixed; left: 0; top: 0; width: 318px; aspect-ratio: 1; border-radius: 50%; will-change: transform;
  border: 1.5px solid rgba(179, 90, 31, .6); pointer-events: none; z-index: 3; box-shadow: 0 0 0 9999px rgba(255,254,244,0); }
.ring { transform-origin: 0 0; }
.ring .rzc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #f3efe6; box-shadow: inset 0 0 22px rgba(107,74,43,.18); }
.ring .rzc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.28), rgba(255,255,255,0) 34%); }
.ring .rz { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ring .rz .chaos { position: absolute; left: 0; top: 0; visibility: visible !important; opacity: 1 !important; z-index: auto; }
.ring .rz, .ring .rz * { will-change: auto !important; }
.ring span { transform-origin: left top; position: absolute; right: -22px; top: 4%; font-family: var(--hand); color: var(--rust); font-size: 20px; transform: rotate(8deg); white-space: nowrap; }
.veil { position: fixed; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(90deg, rgba(255,254,244,.97) 0%, rgba(255,254,244,.93) 34%, rgba(255,254,244,.45) 50%, rgba(255,254,244,0) 64%); }
.focus { position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0; background: rgba(255,254,244,.9); }
.calm { position: fixed; left: 0; top: 0; width: 200px; height: 200px; border-radius: 50%; z-index: 5; pointer-events: none; will-change: transform; transform: scale(0);
  background: radial-gradient(closest-side, #fffef4 0 58%, rgba(255, 250, 238, .85) 76%, rgba(255, 254, 244, 0) 100%); }

/* always something alive behind the calm: drifting light, glows, dust in the sun */
.ambient { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; opacity: 0; }
.ambient .blob { position: absolute; width: 44vmax; aspect-ratio: 1; border-radius: 50%; will-change: transform; animation: roam var(--d) ease-in-out var(--del) infinite alternate; }
.ambient .b1 { left: 38%; top: -18%; --d: 26s; --del: -4s; background: radial-gradient(closest-side, rgba(254, 221, 182, .75), rgba(254, 221, 182, 0)); }
.ambient .b2 { left: 62%; top: 30%; --d: 32s; --del: -12s; background: radial-gradient(closest-side, rgba(203, 227, 244, .55), rgba(203, 227, 244, 0)); }
.ambient .b3 { left: -14%; top: 46%; --d: 29s; --del: -20s; background: radial-gradient(closest-side, rgba(247, 159, 90, .22), rgba(247, 159, 90, 0)); }
.ambient .b4 { left: 20%; top: 60%; --d: 36s; --del: -8s; background: radial-gradient(closest-side, rgba(220, 216, 207, .5), rgba(220, 216, 207, 0)); }
@keyframes roam { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-9vw, 7vh) scale(1.12); } 100% { transform: translate(7vw, -6vh) scale(.94); } }
.ambient .beam { position: absolute; inset: 0 -12%; opacity: .7; will-change: transform; animation: sweep 22s ease-in-out infinite alternate;
  background: repeating-linear-gradient(112deg, rgba(255, 255, 255, 0) 0 8vw, rgba(255, 236, 205, .45) 11vw, rgba(255, 255, 255, 0) 15vw, rgba(255, 255, 255, 0) 27vw); }
@keyframes sweep { from { transform: translateX(-6vw); } to { transform: translateX(6vw); } }
.motes i { position: absolute; bottom: -10px; width: var(--sz); height: var(--sz); border-radius: 50%; background: rgba(214, 150, 92, .55); box-shadow: 0 0 6px rgba(255, 220, 170, .9);
  will-change: transform, opacity; animation: rise var(--d) linear var(--del) infinite; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: .9; } 100% { transform: translate(var(--sx), -110vh); opacity: 0; } }

/* the shelf */
.shelf { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; opacity: 0; will-change: opacity; }
.shelf .row { position: absolute; left: 0; bottom: 0; display: flex; align-items: flex-end; gap: var(--gap); transform: translateX(-50%); }
.shelf .row .p { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
.shelf .row img, .shelf .row .slot { display: block; height: calc(var(--u) * var(--k)); width: auto; filter: drop-shadow(0 10px 8px rgba(90, 56, 22, .18)); }
.shelf .row img, .shelf .row .slot { position: relative; }
/* printed straight onto the packaging */
.shelf .stk { position: absolute; left: 50%; top: var(--t); z-index: 2; width: var(--w); translate: -50% -50%; padding: 4% 3%;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .01); text-align: center; color: #1f1a15; mix-blend-mode: multiply; }
.shelf .stk .k { font-style: normal; font-size: calc(var(--u) * .03); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; opacity: .62; line-height: 1.1; }
.shelf .stk b { font-family: var(--hand); font-weight: 400; font-size: calc(var(--u) * .08); line-height: .96; }
.shelf .stk .r { width: 30%; height: 1px; background: currentColor; opacity: .45; }
.shelf .stk .ml { font-style: normal; font-size: calc(var(--u) * .028); letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.shelf .stk.inv { color: #f4efe6; mix-blend-mode: normal; opacity: .92; }
.shelf .stk.paper { mix-blend-mode: normal; padding: 9% 6% 8%; border-radius: 1px; color: #2b2118;
  background: linear-gradient(90deg, rgba(60,40,20,.16) 0%, rgba(0,0,0,0) 16%, rgba(255,255,255,.22) 38%, rgba(0,0,0,0) 66%, rgba(60,40,20,.2) 100%), #efe8da; }
.shelf .stk.glass { color: #3a1f22; }
.shelf .vt { position: absolute; left: 50%; top: calc(100% + var(--u) * .2); display: grid; justify-items: center; gap: 4px; translate: -50% 0; opacity: calc(var(--vt, 0) * var(--tv, 1));
  transform: translateY(calc((1 - var(--vt, 0)) * 6px)) scale(calc(var(--ik, 1) * (1.3 - .3 * var(--vt, 0)))); transform-origin: 50% 0; white-space: nowrap; }
.shelf .vt b { font-weight: 600; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; padding: 4px 12px; border-radius: 9999px; box-shadow: 0 8px 16px -10px rgba(107,74,43,.5); }
.shelf .vt.k b { background: #feddb6; color: #000; } .shelf .vt.s b { background: #dcdcdc; color: #262626; } .shelf .vt.x b { background: #000; color: #fff; }
.shelf .vt i { font-style: normal; color: var(--rust); font-size: 17px; transform: rotate(-2deg); }
.shelf .p::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 92%; height: 12px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(70, 45, 20, .32), transparent); z-index: -1; }
.shelf .cap { position: absolute; top: calc(100% + 22px); left: 50%; translate: -50% 0; width: max-content; max-width: 124px; padding: 7px 10px 6px;
  background: #fffdf6; color: var(--hand-ink, #3a2a1c); font-family: var(--hand); font-size: 17px; line-height: 1.05; text-align: center;
  box-shadow: 0 6px 12px -6px rgba(90, 56, 22, .35); transform: rotate(var(--rot, -2deg)); }
.shelf .cap::before { content: ""; position: absolute; left: 50%; top: -7px; width: 38px; height: 13px; transform: translateX(-50%) rotate(-4deg);
  background: repeating-linear-gradient(135deg, rgba(255, 238, 214, .92) 0 5px, rgba(247, 159, 90, .28) 5px 8px); }
.shelf .cap.lo { top: calc(100% + 70px); }
.shelf .cap.me { background: #feddb6; color: #000; }
.shelf .plank { background: url(assets/img/shelf-plank.webp) center / 100% 100% no-repeat !important; box-shadow: 0 22px 26px -18px rgba(90, 56, 22, .45) !important; border-radius: 0 !important; position: absolute; left: 50%; top: 0; height: 16px; transform: translateX(-50%); border-radius: 3px;
  background: linear-gradient(#efe3cf, #e2d1b4 60%, #d3bf9e); box-shadow: 0 18px 30px -14px rgba(90, 56, 22, .45), inset 0 1px 0 rgba(255,255,255,.7); }
.shelf .sl { position: absolute; left: 0; bottom: calc(var(--st, 300px) + 30px); translate: -50% 0; width: min(980px, 92vw); text-align: center; opacity: 0; }
.shelf .sl p { margin: 0; font-size: clamp(40px, 4.4vw, 66px); line-height: 1.06; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.shelf .sl .sl-b { color: var(--muted); }
.shelf .sl .sl-b b { color: var(--ink); font-weight: 600; margin-inline: .22em .12em; }
.shelf .sl .sl-b b .hm.ci { left: -10%; top: -18%; width: 120%; height: 136%; stroke-width: 2.2; }
.shelf .sl .sl-b em { font-style: normal; color: var(--rust); font-size: 1.12em; display: inline-block; transform: rotate(-4deg); margin-left: .12em; }
.shelf .sl .sl-b em .hm.ul { left: 0; bottom: -.08em; width: 100%; height: .2em; stroke-width: 2.4; }
.copy section.decided { min-height: 160vh; padding: 0; display: block; }
/* the end: the same noise as the hero, now quiet and settled */
.quiet { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; visibility: hidden;
  -webkit-mask-image: radial-gradient(52% 70% at 50% 46%, transparent 55%, #000 85%); mask-image: radial-gradient(52% 70% at 50% 46%, transparent 55%, #000 85%); }
.quiet .q { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; rotate: var(--r); white-space: nowrap; animation: qd var(--d) ease-in-out var(--dl) infinite alternate; }
@keyframes qd { to { transform: translate(var(--mx), var(--my)); } }
.quiet .op { position: absolute; padding: 7px 14px; border-radius: 16px 16px 16px 4px; background: rgba(255,255,255,.55); border: 1px solid #ece7dd; font-size: 14px; color: #a8a29a; }
.quiet .op svg { position: absolute; left: 4%; top: 50%; width: 92%; height: 14px; translate: 0 -50%; overflow: visible; fill: none; stroke: #c27a4a; stroke-width: 1.8; stroke-linecap: round; opacity: .8; }
.quiet .vp { padding: 4px 12px; border-radius: 9999px; font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; opacity: .55; }
.quiet .vp.k { background: #feddb6; } .quiet .vp.s { background: #dcdcdc; color: #262626; } .quiet .vp.x { background: #000; color: #fff; }
.dhead { position: fixed; left: 50%; top: 9vh; translate: -50% 0; z-index: 10; width: min(900px, 92vw); text-align: center; opacity: 0; pointer-events: none; }
.dhead small { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.dhead p { margin: 0; font-size: clamp(38px, 4.2vw, 62px); font-weight: 500; line-height: 1.06; color: var(--ink); }
.dhead p span { color: var(--muted); }
.dhead em { font-style: normal; color: var(--rust); font-size: 1.12em; display: inline-block; transform: rotate(-4deg); }
.dhead em .hm.ul { left: 0; bottom: -.06em; width: 100%; height: .2em; stroke-width: 2.4; }
.dtally { margin: 16px 0 0 !important; display: flex; justify-content: center; gap: 10px; font-size: 14px !important; line-height: 1 !important; }
.dtally span { padding: 6px 14px; border-radius: 9999px; font-weight: 600; letter-spacing: .4px; }
.dtally .k { background: #feddb6; } .dtally .s { background: #dcdcdc; color: #262626; } .dtally .x { background: #000; color: #fff; }
.dcap { position: fixed; left: 0; top: 0; z-index: 10; margin: 0; width: 280px; text-align: center; font-size: 22px; line-height: 1.1; color: var(--rust); opacity: 0; pointer-events: none; transform-origin: 50% 100%; }
.dcap b { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; padding: 3px 10px; border-radius: 9999px; margin-right: 6px; vertical-align: 3px; }
.dcap b.k { background: #feddb6; color: #000; } .dcap b.s { background: #dcdcdc; color: #262626; } .dcap b.x { background: #000; color: #fff; }
.shelf .vt i { display: none !important; }
/* the decided shelf: each verdict is a big tag stamped across the product */
.shelf.dec { z-index: 8; }
.shelf.dec .vt, .shelf.dec #row > :nth-child(even) .vt { top: 84%; translate: -50% -50%; z-index: 4; transform: scale(calc(1.6 - .6 * var(--vt, 0))) rotate(-6deg); }
.shelf.dec #row > :nth-child(odd) .vt { transform: scale(calc(1.6 - .6 * var(--vt, 0))) rotate(5deg); }
.shelf.dec .vt b { font-size: calc(var(--u) * .1) !important; letter-spacing: .12em; padding: .3em .7em !important; border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 10px 24px -8px rgba(40, 20, 5, .55); }

.shelf .tag { position: absolute; left: 0; translate: -50% 0; top: 70px; font-family: var(--hand); color: var(--rust); font-size: 23px; transform: rotate(-3deg); white-space: nowrap; }
.scan { position: fixed; left: 0; top: 0; z-index: 9; box-shadow: 0 10px 26px -10px rgba(107,74,43,.5); width: 210px; height: 210px; border-radius: 50%; border: 2px solid rgba(179, 90, 31, .75); pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 9999px rgba(255, 254, 244, 0), inset 0 0 30px rgba(255,255,255,.4); }
.scan .mzc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #fffef4; box-shadow: inset 0 0 18px rgba(107,74,43,.25); }
.scan .mz { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.scan .mz > * { opacity: 1 !important; visibility: visible !important; }
.scan .mz, .scan .mz * { will-change: auto !important; }
.scan .mzc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.45), rgba(255,255,255,0) 42%); }
.scan > span { position: absolute; left: 100%; top: -10px; margin-left: 6px; font-family: var(--hand); color: var(--rust); font-size: 22px; white-space: nowrap; transform: rotate(-6deg); }

/* =========================================================
   act 2 · the bottle on your shelf, decoded
   ========================================================= */
.orbits { position: fixed; inset: 0; pointer-events: none; }
.orbits.back { z-index: 6; } .orbits.front { z-index: 8; }
.orbits svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pill { position: absolute; left: 0; top: 0; padding: .32em .9em; border-radius: 9999px; font-size: 14px; font-weight: 500; white-space: nowrap; will-change: transform, opacity; box-shadow: 0 8px 18px -10px rgba(107,74,43,.55); opacity: 0; }
.pill.g { background: #feddb6; color: #000; } .pill.b { background: #000; color: #e9e9e9; } .pill.y { background: #dcdcdc; color: #262626; }
.stage { position: fixed; left: 0; top: 0; height: min(80vh, 820px); aspect-ratio: .3168; z-index: 7; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); will-change: transform, opacity; }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.shadow { position: absolute; left: 50%; bottom: -1.2%; width: 120%; height: 7%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(90,56,22,.35), rgba(90,56,22,.12) 60%, transparent); filter: blur(3px); }
.caustic { position: absolute; left: 50%; bottom: -4%; width: 150%; height: 12%; transform: translateX(-36%); border-radius: 50%; background: radial-gradient(closest-side, rgba(247,159,90,.38), rgba(254,221,182,.2) 55%, transparent); filter: blur(6px); mix-blend-mode: multiply; }
#empty { clip-path: inset(0 0 100% 0); }
.label { position: absolute; left: 4.3%; top: 50.9%; width: 89.9%; height: 30.05%; transform-origin: 100% 50%; overflow: hidden; color: #1b1a17;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--h) * .006);
  background: linear-gradient(90deg, rgba(60,40,20,.14) 0%, rgba(0,0,0,0) 12%, rgba(255,255,255,.18) 34%, rgba(0,0,0,0) 62%, rgba(60,40,20,.2) 100%), #f6f0e6; }
.label .kick { font-size: calc(var(--h) * .011); font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: #8d8d8d; }
.label .brand { font-family: var(--hand); font-weight: 400; font-size: calc(var(--h) * .05); line-height: .95; white-space: nowrap; color: #2b2118; }
.label .stars.hand2 { font-family: var(--hand); color: var(--rust); letter-spacing: 0; font-size: calc(var(--h) * .019); }
.label .stars { font-size: calc(var(--h) * .016); color: #c9932f; letter-spacing: .12em; }
.label .rule { width: 34%; height: 1px; background: rgba(27, 26, 23, .35); margin: calc(var(--h) * .004) 0; }
.label .claims { font-size: calc(var(--h) * .0105); line-height: 1.45; color: #4a4943; letter-spacing: .04em; }
.label .ml { margin-top: calc(var(--h) * .006); font-size: calc(var(--h) * .0095); letter-spacing: .14em; text-transform: uppercase; color: #8d8d8d; }
.shelfnote { position: absolute; right: 88%; top: 18%; font-family: var(--hand); color: var(--rust); font-size: 22px; white-space: nowrap; transform: rotate(-6deg); opacity: 0; }
.shelfnote svg { position: absolute; left: 100%; top: 14px; width: 70px; height: 40px; overflow: visible; }
.mag { position: fixed; left: 0; top: 0; width: 210px; height: 210px; border-radius: 50%; overflow: hidden; z-index: 9; pointer-events: none; opacity: 0;
  border: 2px solid rgba(179, 90, 31, .7); box-shadow: 0 24px 50px -20px rgba(107,74,43,.55), inset 0 0 0 6px rgba(255,255,255,.35); background: #e3d7ca; }
.mag .inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mag .inner .label { opacity: 1 !important; transform: none !important; }
.mag::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 40%); }
.magnote { position: fixed; left: 0; top: 0; z-index: 9; font-family: var(--hand); color: var(--rust); font-size: 21px; opacity: 0; pointer-events: none; white-space: nowrap; }

/* =========================================================
   the words
   ========================================================= */
.copy { position: relative; z-index: 10; max-width: 1360px; margin: 0 auto; padding: 0 clamp(24px, 6vw, 88px); }
.col { width: min(560px, 46vw); }
section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 10vh; }
.logo { position: fixed; left: clamp(24px, 6vw, 88px); top: 26px; height: 60px; z-index: 20; }
.kicker { font-size: 11px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 18px; }
h1, h2 { font-weight: 400; letter-spacing: -.025em; }
h1 { font-size: clamp(38px, 4.3vw, 64px); line-height: 1.03; }
h1 span, h2 span { color: var(--muted); }
h2 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.04; }
.lede { margin-top: 22px; max-width: 34ch; font-size: clamp(17px, 1.45vw, 20px); color: var(--ink-soft); }
.hero form { margin-top: 34px; }
.field { box-shadow: 0 20px 40px -26px rgba(107,74,43,.45); }
.small { margin-top: 12px; padding-left: 20px; font-size: 13px; color: var(--muted); min-height: 1.4em; }
.small.err { color: #b23b2e; }
.cue { margin-top: 7vh; color: var(--rust); font-size: 21px; transform: rotate(-2deg); }

/* sound familiar: its own moment, front and centre */
.familiar { align-items: center; text-align: center; }
.familiar h2 { font-size: clamp(44px, 5.6vw, 84px); line-height: 1; }
.familiar .sub { margin-top: 14px; font-family: var(--hand); color: var(--rust); font-size: 26px; transform: rotate(-1.5deg); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 36px; width: min(1100px, 100%); text-align: left; }
.card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 132px; padding: 24px 74px 24px 28px; border-radius: 26px; cursor: pointer;
  background: #fff; border: 1px solid #ede3d2; font: 400 18px/1.35 var(--sans); color: var(--ink-soft); text-align: left;
  box-shadow: 0 18px 40px -30px rgba(107,74,43,.6); transition: background .3s, border-color .3s, transform .3s, box-shadow .3s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -26px rgba(107,74,43,.6); border-color: #e4d5bd; }
.card b { font-weight: 500; font-size: 23px; line-height: 1.15; color: var(--ink); letter-spacing: -.01em; }
.card .tick { position: absolute; right: 24px; top: 24px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #dcdbd4; transition: all .25s; }
.card .tick svg { width: 100%; height: 100%; opacity: 0; transition: opacity .2s; }
.card[aria-pressed="true"] { background: #feddb6; border-color: #f2cdb0; color: #3a2a1c; }
.card[aria-pressed="true"] .tick { background: #000; border-color: #000; }
.card[aria-pressed="true"] .tick svg { opacity: 1; }
.card .me { position: absolute; right: 22px; bottom: 14px; font-family: var(--hand); color: var(--rust); font-size: 21px; transform: rotate(-4deg); opacity: 0; transition: opacity .3s; }
.card[aria-pressed="true"] .me { opacity: 1; }
.counter { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-top: 26px; min-height: 52px; }
.counter .n { font-size: 44px; font-weight: 600; letter-spacing: -.5px; line-height: 1; }
.counter .n small { font-size: 18px; font-weight: 400; color: var(--muted); }
.counter .msg { font-family: var(--hand); color: var(--rust); font-size: 26px; transform: rotate(-1.5deg); }

#turn { min-height: 90vh; }
.turn h2 { font-size: clamp(54px, 7vw, 104px); line-height: .98; }
.turn p { margin-top: 26px; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.2; max-width: 22ch; letter-spacing: -.01em; color: var(--muted); }
.turn p + p { margin-top: 10px; color: var(--ink); }

#turn { min-height: 80vh; padding: 0; display: block; }
.tpin { position: fixed; inset: 0; z-index: 11; pointer-events: none; transform-origin: 50% 50%; display: grid; place-content: center; justify-items: center; text-align: center; gap: 18px; opacity: 0; will-change: opacity, transform; }
.turn .tpin h2 { font-size: clamp(64px, 9vw, 140px); line-height: .95; }
.turn .tpin .se { position: relative; display: inline-block; color: var(--ink); }
.turn .tpin .se svg { position: absolute; left: -4%; top: 10%; width: 108%; height: 80%; overflow: visible; fill: none; stroke: var(--rust); stroke-width: 3; stroke-linecap: round; }
.turn .tpin .se svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.turn .tpin .yu { position: absolute; left: 50%; bottom: 82%; font-style: normal; color: var(--rust); font-size: 2.6em; line-height: 1; white-space: nowrap; opacity: 0; transform: translateX(-50%) rotate(-6deg) scale(.6); }
.turn .tpin .tl3 { margin-top: 26px; font-size: clamp(22px, 2.4vw, 34px); color: var(--ink); opacity: 0; }
.turn .tpin .tl3 b { font-weight: 500; background: linear-gradient(transparent 62%, rgba(247, 159, 90, .55) 62%); padding: 0 .1em; }
.turn .tpin p { margin: 0; max-width: none; color: var(--ink-soft); font-size: clamp(20px, 2.2vw, 32px); }
.turn .tpin .tl2 { margin-top: 34px; }
em.you { font-style: normal; position: relative; } em.you::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .12em; border-radius: 9px; background: var(--highlight); opacity: .8; }

/* the person the bottle is read against */
.skincard { position: fixed; left: 0; top: 0; z-index: 8; width: 280px; padding: 20px 20px 18px; border-radius: 26px; background: #fff; border: 1px solid #f2cdb0; pointer-events: none;
  box-shadow: 0 30px 60px -30px rgba(107, 74, 43, .5); opacity: 0; will-change: transform, opacity; }
.skincard .who { font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--rust); margin-bottom: 12px; }
.skincard .chips2 { display: flex; flex-wrap: wrap; gap: 6px; }
.skincard .chips2 span { padding: 5px 11px; border-radius: 9999px; background: #fbe6d6; color: #3a2a1c; font-size: 13.5px; }
.skincard #chipsB { position: absolute; left: 20px; right: 20px; top: 47px; opacity: 0; }
.skincard #chipsB span { background: #eef2f6; }
.skincard .note2 { position: absolute; right: -14px; top: -30px; color: var(--rust); font-size: 22px; transform: rotate(5deg); }
.skincard.scan { box-shadow: 0 0 0 3px rgba(247, 159, 90, .55), 0 30px 60px -30px rgba(107, 74, 43, .5); }
.bins { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; }
.bh { position: absolute; margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.bh b { font-weight: 600; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; padding: 3px 10px; border-radius: 9999px; }
.bh.g b { background: #feddb6; color: #000; } .bh.y b { background: #dcdcdc; color: #262626; } .bh.b b { background: #000; color: #fff; }
.flyers { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.fly { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.fly .pill2 { display: block; padding: .28em .8em; font-size: 13px; border-radius: 9999px; font-size: 14px; font-weight: 500; background: #fff; color: #000; border: 1px solid #ede3d2; box-shadow: 0 8px 16px -10px rgba(107,74,43,.5); transition: background .35s, color .35s, border-color .35s; }
.fly.g .pill2 { background: #feddb6; border-color: #f2cdb0; } .fly.y .pill2 { background: #dcdcdc; border-color: #d0d0d0; color: #262626; } .fly.b .pill2 { background: #000; border-color: #000; color: #eee; }
.fly .why { font-family: var(--hand); color: var(--rust); font-size: 18px; transition: opacity .25s; }
/* the lens, now reading against a person */
.sring { position: fixed; left: 0; top: 0; z-index: 8; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.sring .halo { position: absolute; inset: -38%; border-radius: 50%; background: radial-gradient(closest-side, rgba(254, 221, 182, .85), rgba(254, 221, 182, .35) 55%, rgba(254, 221, 182, 0)); transition: transform .35s ease; }
.sring.hit .halo { transform: scale(1.08); }
.sring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255, 250, 240, .75) 60%, rgba(255, 244, 228, .6));
  border: 1.5px solid rgba(179, 90, 31, .55); box-shadow: inset 0 0 40px rgba(255, 255, 255, .7), 0 30px 60px -30px rgba(107, 74, 43, .45); }
.sring .dash { position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(179, 90, 31, .35); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sring .core { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.sring .who { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--rust); }
.sring .note2 { margin-top: 4px; color: var(--rust); font-size: 22px; transform: rotate(-3deg); }
.chips3 { position: absolute; left: 50%; top: 50%; transition: opacity .4s; }
.chips3 span { position: absolute; left: 0; top: 0; padding: 5px 12px; border-radius: 9999px; background: #fff; border: 1px solid #f2cdb0; color: #3a2a1c; font-size: 13px; white-space: nowrap; box-shadow: 0 8px 18px -12px rgba(107,74,43,.5); }
#chipsB { opacity: 0; } #chipsB span { border-color: #d6e2ec; background: #f6f9fc; }
.rows { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; }
.tally { position: absolute; left: 0; top: 0; font: 500 12px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; color: #4a4943; white-space: nowrap; }
.tally b { color: #000; font-weight: 700; } .tally i { font-style: normal; color: #b23b2e; font-weight: 700; }
.rh { position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.rh b { font-weight: 600; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; padding: 3px 11px; border-radius: 9999px; }
.rh.g b { background: #feddb6; color: #000; } .rh.y b { background: #dcdcdc; color: #262626; } .rh.b b { background: #000; color: #fff; }
.rh .for { font-size: 13px; color: var(--ink-soft); }
.rh .rn { display: none; color: var(--rust); font-size: 19px; transform: rotate(-1.5deg); transition: opacity .3s; }
/* the back label: what you actually get to read */
.blabel { position: absolute; left: 4.3%; top: 50.9%; width: 89.9%; height: 30.05%; overflow: hidden; color: #2b2a27; padding: 6% 7% 0 7%;
  background: linear-gradient(90deg, rgba(60,40,20,.14) 0%, rgba(0,0,0,0) 12%, rgba(255,255,255,.18) 34%, rgba(0,0,0,0) 62%, rgba(60,40,20,.2) 100%), #f6f0e6; }
.label, .blabel { will-change: transform; }
.bl-h { font-size: calc(var(--h) * .0125); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2%; }
.bl-list { font-size: calc(var(--h) * .0112); line-height: 1.36; letter-spacing: .03em; text-transform: uppercase; color: #3a3832; }
.bl-list span { position: relative; border-radius: 2px; transition: color .25s, opacity .3s; }
.bl-list span::before { content: ""; position: absolute; inset: -1px -2px; border-radius: 3px; background: rgba(247, 159, 90, .45); transform: scaleX(var(--sc, 0)); transform-origin: left; z-index: -1; }
.bl-list span.gone { opacity: .28; text-decoration: line-through; text-decoration-color: rgba(179, 90, 31, .7); }
.bl-list span.scan { color: #9a4a16; }
.bl-small { margin-top: 4%; font-size: calc(var(--h) * .0068); line-height: 1.4; color: #6d675d; }
.bl-foot { position: absolute; left: 8%; right: 8%; bottom: 5%; display: flex; justify-content: space-between; align-items: flex-end; font-size: calc(var(--h) * .0062); color: #8d8d8d; letter-spacing: .08em; }
.bl-foot .bars { width: 26%; height: calc(var(--h) * .018); background: repeating-linear-gradient(90deg, #2b2a27 0 1px, transparent 1px 3px, #2b2a27 3px 5px, transparent 5px 6px, #2b2a27 6px 7px, transparent 7px 9px); opacity: .7; }
.bl-list { isolation: isolate; }

/* the fine print, pulled out of the label and made readable */
.sheet { position: fixed; left: 0; top: 0; z-index: 8; width: 300px; padding: 22px 24px 24px; background: #fffdf6; border-radius: 4px; pointer-events: none; opacity: 0;
  box-shadow: 0 30px 60px -28px rgba(90, 56, 22, .45), 0 0 0 1px rgba(237, 227, 210, .9); transform-origin: 0 0; will-change: transform, opacity; }
.sheet::after { content: ""; position: absolute; inset: 0; opacity: .3; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 .6 0 0 0 0 .55 0 0 0 0 .5 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.sh-h { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #8d8d8d; margin-bottom: 10px; }
.sh-b { font-size: 15px; line-height: 1.95; letter-spacing: .06em; text-transform: uppercase; color: #3a3832; }
.sh-b span { position: relative; padding: 1px 3px; margin: 0 -3px; border-radius: 4px; transition: color .25s, opacity .3s; font-variant-numeric: tabular-nums; }
.sh-b span::before { content: ""; position: absolute; inset: 0; border-radius: 4px; background: rgba(247, 159, 90, .35); transform: scaleX(var(--sc, 0)); transform-origin: left; z-index: -1; }
.sh-b span.gone { opacity: .25; text-decoration: line-through; text-decoration-color: rgba(179, 90, 31, .6); }
.sh-b span.scan { color: #b35a1f; }
.sring .calc { position: absolute; inset: 14% 10% 8%; border-radius: 50%; overflow: hidden; opacity: .16; transition: opacity .4s;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.sring.hit .calc { opacity: .3; }
.sring .calc pre { margin: 0; font: 500 10.5px/1.75 ui-monospace, "SF Mono", Menlo, monospace; color: #9a4a16; white-space: pre; text-align: center; animation: calc 14s linear infinite; }
@keyframes calc { to { transform: translateY(-50%); } }
.sring .dial { position: absolute; inset: -7%; width: 114%; height: 114%; overflow: visible; animation: spin 60s linear infinite; }
.sring .dial line { stroke: rgba(179, 90, 31, .45); stroke-width: .5; } .sring .dial line.m { stroke-width: .9; stroke: rgba(179, 90, 31, .7); }
.sring .dial text { font: 600 4.2px ui-monospace, Menlo, monospace; fill: rgba(179, 90, 31, .7); text-anchor: middle; }
.fit { position: fixed; left: 0; top: 0; z-index: 9; width: max-content; padding: 5px 12px; border-radius: 9999px; background: rgba(255, 253, 246, .94); box-shadow: 0 6px 16px -10px rgba(107,74,43,.4); text-align: center; pointer-events: none; opacity: 0; font: 500 12px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; color: #4a4943; will-change: transform, opacity; }
.fit b { color: #000; font-weight: 700; }
.tether { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; overflow: visible; }
.tether path { fill: none; stroke: #f79f5a; stroke-width: 1.6; stroke-dasharray: 4 5; opacity: 0; }
.sring .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(247, 159, 90, 0) 0deg, rgba(247, 159, 90, .35) 40deg, rgba(247, 159, 90, 0) 80deg);
  opacity: 0; transition: opacity .3s; animation: spin 1.6s linear infinite; }
.sring.hit .sweep { opacity: 1; }
.sring .who { position: absolute; left: 0; right: 0; top: 13%; z-index: 2; text-shadow: 0 0 8px #fffaf0, 0 0 4px #fffaf0; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--rust); }
.sring .note2 { position: absolute; right: -40px; top: -6px; color: var(--rust); font-size: 22px; transform: rotate(6deg); }
.chips3 span { transition: background .25s, color .25s, transform .25s, box-shadow .25s; }
.chips3 span.on { background: #f79f5a !important; color: #fff; border-color: #f79f5a !important; box-shadow: 0 0 0 6px rgba(247, 159, 90, .22), 0 10px 22px -10px rgba(179, 90, 31, .6); }
.pchips { display: none; position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0; }
.pchips .chips3 { left: 0; top: 0; }
.pbar { position: absolute; left: 0; top: 0; height: 10px; border-radius: 9999px; background: rgba(60, 40, 20, .07); display: flex; gap: 2px; overflow: hidden; }
.pbar i { display: block; height: 100%; width: 0; transition: width .45s cubic-bezier(.3,.7,.3,1); }
.pbar .g { background: #f7c48f; } .pbar .y { background: #c9c9c9; } .pbar .b { background: #111110; }
.plg { position: absolute; left: 0; top: 0; margin: 0; display: flex; gap: 16px; font-size: 13px; color: var(--ink-soft); }
.plg span { display: inline-flex; align-items: center; gap: 6px; } .plg span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.plg .g::before { background: #f7c48f; } .plg .y::before { background: #c9c9c9; } .plg .b::before { background: #111110; }
.plg b { color: var(--ink); font-weight: 600; }
.pchips .pk { position: absolute; left: 0; top: 0; margin: 0; font-size: 10px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--rust); }
.reason { position: fixed; left: 0; top: 0; z-index: 9; width: 360px; text-align: center; color: var(--rust); font-size: 28px; line-height: 1.05; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.fly .pill2 { position: relative; overflow: hidden; isolation: isolate; }
.fly .pill2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--vc, #fff); transform: scaleX(var(--f, 0)); transform-origin: left; }
.fly.g { --vc: #feddb6; } .fly.y { --vc: #dcdcdc; } .fly.b { --vc: #000; }
.fly.g .pill2, .fly.y .pill2, .fly.b .pill2 { background: #fff; border-color: #ede3d2; color: #000; }
.fly.b.filled .pill2 { color: #eee; border-color: #000; }
#decode { min-height: 190vh; padding: 0; display: block; }
.copy section.skins { min-height: 150vh; padding: 0; display: block; }
.pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.beat { position: absolute; width: min(520px, 44vw); opacity: 0; will-change: opacity, transform; }
.beat.top { position: fixed; z-index: 10; left: 50%; top: 10vh; translate: -50% 0; width: min(860px, 92vw); text-align: center; }
.beat.top.right { left: 64%; width: min(760px, 62vw); }
.beat.top.right p { font-size: clamp(28px, 3.1vw, 46px); }
.beat small { display: block; margin-bottom: 14px; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.beat p { font-size: clamp(32px, 3.8vw, 56px); line-height: 1.04; letter-spacing: -.025em; }
.beat p span { color: var(--muted); }
.legend { display: grid; gap: 8px; margin-top: 26px; font-size: 14px; color: var(--ink-soft); }
.legend i { display: inline-block; width: 26px; height: 12px; border-radius: 9999px; margin-right: 10px; vertical-align: -1px; }

.join { visibility: hidden; }
.join .impact { margin-top: 18px; max-width: 34ch; font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-soft); }
.join .box { margin-top: 26px; display: grid; gap: 16px; max-width: 520px; }
.step { display: grid; gap: 14px; animation: in .5s ease both; }
@keyframes in { from { opacity: 0; transform: translateY(10px); } }
.field button { transition: transform .15s ease; }
.field button:active { transform: scale(.94); }
.field button:disabled { opacity: .6; cursor: progress; }
.field[aria-busy] button:disabled { opacity: 1; }
.field button .dots { display: inline-flex; gap: 5px; }
.field button .dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: hop .9s ease-in-out infinite; }
.field button .dots i:nth-child(2) { animation-delay: .12s; } .field button .dots i:nth-child(3) { animation-delay: .24s; }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.field.leaving, .join-aside.leaving { animation: leave .32s ease forwards; pointer-events: none; }
@keyframes leave { to { opacity: 0; transform: scale(.94); } }
.copy .small.success { margin-top: 0; padding-left: 0; display: flex; align-items: center; }
.copy .join .small.success { flex-direction: column; justify-content: center; gap: 12px; }
.j-note { font-size: 16px; color: var(--ink-soft); animation: in .5s ease .25s both; }
.j-note b { font-weight: 600; color: var(--ink); }
.joined b { font-weight: 600; white-space: nowrap; }
.joined { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 9999px; background: var(--peach); color: var(--ink);
  font: 500 16px var(--sans); box-shadow: 0 14px 30px -18px rgba(179,90,31,.55); animation: pop .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.joined i { display: inline-block; font-style: normal; font-size: 18px; color: var(--rust); animation: beat .9s ease-in-out .45s 2; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.3); } 60% { transform: scale(.92); } }
.footer { padding: 0 0 70px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; }

@media (max-width: 900px) {
  .col { width: 100%; }
  .cards { grid-template-columns: 1fr; }
  .veil { background: rgba(255,254,244,.86); }
  .shelfnote { display: none; }
}
html { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ================= gbg type system: two faces, one scale ================= */
.copy h1, .copy h2 { font-weight: 500; letter-spacing: 0; color: var(--ink); }
.copy h1 span, .copy h2 span { color: var(--muted); }
.copy .hero .hl, .copy .familiar .hl { color: inherit; }   /* the line-highlight wrapper must not pick up the muted span colour */
.copy .hero h1 { font-size: clamp(34px, 3.7vw, 54px); line-height: 1.12; max-width: 20ch; }
.copy h2, .copy .familiar h2, .copy .join h2 { font-size: clamp(28px, 2.9vw, 42px); line-height: 1.15; }
.copy .kicker { font-size: 11px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 16px; }
.copy .lede { margin-top: 18px; font-size: 18px; line-height: 1.45; color: var(--ink-soft); max-width: 36ch; }
.copy .hero form { margin-top: 28px; }
.copy .cue { margin-top: 44px; font-family: var(--hand); font-size: 20.5px; color: var(--rust); transform: rotate(-2deg); }
.copy .small { font-size: 13px; }
.stitle { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; width: min(520px, 100%); }
.stitle span { font-size: 14px; font-weight: 600; letter-spacing: .35em; white-space: nowrap; }
.stitle i { flex: 1; height: 1px; background: var(--ink); }
.stitle u { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }

/* sound familiar */
.copy .familiar .sub { margin-top: 10px; font-family: var(--hand); font-size: 24px; color: var(--rust); transform: rotate(-2deg); }
.copy .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; width: min(1180px, 100%); }
.copy .card { min-height: 104px; padding: 18px 54px 18px 20px; font-size: 14.5px !important; border-radius: 24px; border: 1px solid #ede3d2; box-shadow: none; font: 400 16px/1.45 var(--sans); color: var(--ink-soft); gap: 8px; }
.copy .card:hover { box-shadow: 0 14px 30px -22px rgba(107, 74, 43, .45); }
.copy .card .tick { width: 26px; height: 26px; right: 18px; top: 18px; }
.copy .card b { font-size: 17.5px; line-height: 1.25; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.copy .card .me { font-size: 17px; right: 10px; top: 48px; bottom: auto; }
@media (max-width: 1000px) { .copy .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .copy .cards { grid-template-columns: 1fr; } }
.copy .counter .n { font-size: 44px; font-weight: 600; letter-spacing: -.5px; }
.copy .counter .msg { font-size: 24px; }

/* the hero moment */
.copy .turn .tpin h2 { font-size: clamp(48px, 5.4vw, 76px); font-weight: 600; letter-spacing: -.5px; line-height: 1.02; }
.copy .turn .tpin .tl2 { margin-top: 26px; font-size: clamp(18px, 1.6vw, 24px); color: var(--ink-soft); }
.copy .turn .tpin .yu { font-size: 2em; }
.copy .turn .tpin .tl3 { margin-top: 18px; font-size: clamp(20px, 1.9vw, 28px); font-weight: 500; }

/* the decode headlines */
.copy .beat p { font-size: clamp(26px, 2.6vw, 38px); font-weight: 500; line-height: 1.15; letter-spacing: 0; }
.copy .beat.top.right p { font-size: clamp(24px, 2.3vw, 34px); }
.copy .beat small { font-size: 11px; font-weight: 500; letter-spacing: 1.6px; color: var(--muted); margin-bottom: 10px; }

/* the waitlist */
.copy .join .impact { margin-top: 16px; font-size: 18px; line-height: 1.45; }
.copy .join .box { margin-top: 24px; }
.step h3 { font-size: 24px; font-weight: 500; }

/* sound familiar: clean gbg cards; the ones you tap get stuck down */
.copy .card.note { background: #fffdf8; border: 1px solid #ede3d2; border-radius: 18px; overflow: visible; box-shadow: none;
  transition: rotate .35s cubic-bezier(.3,1.4,.5,1), translate .3s ease, background .3s, border-color .3s, box-shadow .3s; }
.copy .card.note:hover { translate: 0 -2px; transform: none; box-shadow: 0 14px 26px -20px rgba(107, 74, 43, .45); }
.copy .card.note .su { font-size: 14.5px; color: var(--ink-soft); }
.copy .card.note b { font-size: 17px; }
.copy .card.note .doo { display: none; }
.swipe { display: none !important; }
.copy .card.note[aria-pressed="true"] { background: #ffefe0; border-color: #f2cdb0; rotate: var(--rot); box-shadow: 0 12px 22px -16px rgba(138, 90, 43, .45); }
.copy .card.note[aria-pressed="true"] .tick { background: #000; border-color: #000; }
.copy .card.note::before { content: ""; position: absolute; left: 50%; top: -8px; width: 56px; height: 16px; translate: -50% 0; rotate: -3deg; opacity: 0; transition: opacity .25s;
  background: repeating-linear-gradient(135deg, rgba(255, 248, 236, .92) 0 6px, rgba(247, 159, 90, .3) 6px 9px); }
.copy .card.note[aria-pressed="true"]::before { opacity: 1; }
.copy .turn .tpin .tl2 { margin-top: 26px; }
.copy .turn .tpin .tlq { margin: 0; font-size: clamp(40px, 4.8vw, 70px); font-weight: 600; letter-spacing: -.5px; line-height: 1.05; color: var(--ink); }
.copy .turn .tpin .tlq .yu { font-size: 1.05em; bottom: 74%; }
.copy .turn .tpin .tlq .se svg { stroke-width: 4; }
.copy .turn .tpin .tl3 { margin-top: 40px; font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; color: var(--ink); }
.copy .turn .tpin .tl3 b { font-weight: 600; background: linear-gradient(transparent 62%, rgba(247, 159, 90, .55) 62%); padding: 0 .1em; }
/* your skin vs hers: the comparison */
.cmp { position: fixed; left: 37vw; top: 22vh; z-index: 9; width: min(760px, 58vw); pointer-events: none; opacity: 0; }
.cmp-row { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; opacity: 0; transform: translateY(10px); will-change: opacity, transform; }
.cmp-row > span:first-child { justify-self: end; text-align: right; } .cmp-row > span:last-child { justify-self: start; }
.cmp-row > i, .cmp-row > em { justify-self: center; font-style: normal; }
.cmp-row.head { margin-bottom: 14px; }
.cmp .who { font-size: 12px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; padding: 6px 14px; border-radius: 9999px; }
.cmp .who.you { background: #feddb6; color: #000; } .cmp .who.her { background: #e3ecf4; color: #1f2f3d; }
.cmp .head i { font-family: var(--hand); color: var(--rust); font-size: 22px; }
.cmp-row.tr { padding: 5px 0; font-size: 17px; color: var(--ink); }
.cmp-row.tr i { color: var(--rust); font-size: 22px; font-weight: 600; }
.cmp-sub { margin: 18px 0 12px; text-align: center; font-size: 14px; color: var(--ink-soft); opacity: 0; letter-spacing: .02em; }
.cmp-row.ir { grid-template-columns: 1fr 190px 1fr; padding: 6px 0; border-top: 1px solid rgba(237, 227, 210, .9); }
.cmp-row.ir em { font-size: 16px; font-weight: 500; color: var(--ink); position: relative; }
.cmp-row.ir em::after { content: "≠"; position: absolute; right: -26px; top: -2px; color: var(--rust); font-weight: 600; }
.cmp-row.ir.same em::after { content: "="; color: var(--muted); }
.cmp .v { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; padding: 4px 12px; border-radius: 9999px; }
.cmp .v.g, .cmp .big.g { background: #feddb6; color: #000; } .cmp .v.y { background: #dcdcdc; color: #262626; } .cmp .v.b, .cmp .big.b { background: #000; color: #fff; }
.cmp-row.fin2 { margin-top: 22px; }
.cmp-row.fin2 span { display: grid; gap: 6px; justify-items: inherit; }
.cmp-row.fin2 > span:first-child { justify-items: end; } .cmp-row.fin2 > span:last-child { justify-items: start; }
.cmp-row.fin2 small { font-size: 11px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.cmp .big { font-size: clamp(20px, 2vw, 28px); font-weight: 600; padding: 6px 20px; border-radius: 9999px; }
.cmp-note { margin-top: 18px; text-align: center; color: var(--rust); font-size: 24px; transform: rotate(-2deg); opacity: 0; }
.join-aside { margin-top: 10px; color: var(--rust); font-size: 21px; transform: rotate(-2deg); }

/* ================= readability pass ================= */
.topband { position: fixed; left: 0; right: 0; top: 0; height: 104px; z-index: 19; pointer-events: none;
  background: linear-gradient(rgba(255, 254, 244, .96) 0%, rgba(255, 254, 244, .85) 55%, rgba(255, 254, 244, 0) 100%); }
/* hero: calmer measure, clear of the logo, readable over the noise */
.copy .hero { padding-top: 120px; padding-bottom: 6vh; }
.copy .hero h1 { font-size: clamp(32px, 3.3vw, 50px); line-height: 1.1; max-width: 17ch; }
.copy .hero h1 em.you::after { display: none; }
.copy .hero h1 em.you { font-style: normal; background: linear-gradient(transparent 70%, rgba(247, 159, 90, .45) 70%); }
.copy .hero h1 span { display: block; margin-top: 8px; }
.copy .lede { max-width: 38ch; font-size: 17px; }
.copy .cue { margin-top: 32px; }
.veil { background: linear-gradient(90deg, rgba(255,254,244,.98) 0%, rgba(255,254,244,.95) 38%, rgba(255,254,244,.6) 50%, rgba(255,254,244,0) 62%) !important; }
/* sound familiar: clear of the logo, fits a 720px screen */
.copy .familiar { padding-block: 110px 24px; min-height: auto; }
.copy .familiar .sub { margin-top: 6px; }
.copy .cards { margin-top: 20px; }
.copy .card { min-height: 92px; }
.copy .counter { margin-top: 18px; }
/* the back label: bigger type, taller label */
.blabel { top: 46%; height: 37%; padding: 5.5% 7% 0 7%; }
.bl-h { font-size: calc(var(--h) * .0135) !important; }
.bl-list { font-size: calc(var(--h) * .0138) !important; line-height: 1.32 !important; letter-spacing: .02em !important; }
.bl-foot { bottom: 3.5%; }
/* the comparison: fits any laptop height */
.cmp { transform-origin: 50% 0; top: 20vh; }
.cmp-note { margin-top: 12px; }
/* the decided shelf: notes wrap instead of colliding */
.shelf .vt i { white-space: normal; width: calc(var(--u) * .62); text-align: center; line-height: 1; font-size: 16px; }
.shelf .vt b { font-size: 12px; }
.stage .wrap { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.stage canvas#labelc { position: absolute; left: 3.75%; width: 91%; top: 45.5%; height: 38%; pointer-events: none; }
.stage .strip { position: absolute; inset: 0; will-change: transform; }
.stage .wrap .label, .stage .wrap .blabel { position: absolute; top: 0; height: 100%; width: 100%; left: 0; opacity: 1 !important; transform: none !important; filter: none !important; visibility: visible !important; }
.stage .wrap .blabel { left: 135%; }
/* the cylinder: label darkens and falls away at both sides, a soft glass highlight on top */
.stage .wrap .curve { display: none; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(50,30,12,.42) 0%, rgba(50,30,12,.16) 7%, rgba(0,0,0,0) 18%, rgba(255,255,255,.22) 30%, rgba(255,255,255,0) 40%, rgba(0,0,0,0) 76%, rgba(50,30,12,.2) 90%, rgba(50,30,12,.5) 100%); }
.stage .lbase { position: absolute; background: linear-gradient(90deg, rgba(60,40,20,.14) 0%, rgba(0,0,0,0) 12%, rgba(255,255,255,.18) 34%, rgba(0,0,0,0) 62%, rgba(60,40,20,.2) 100%), #f6f0e6; }
.stage .label { gap: calc(var(--h) * .008); }
.stage .label .kick { font-size: calc(var(--h) * .012); }
.stage .label .brand { font-size: calc(var(--h) * .047); }
.stage .label .stars.hand2 { font-size: calc(var(--h) * .021); }
.stage .label .claims { font-size: calc(var(--h) * .0115); }
.stage .label .ml { font-size: calc(var(--h) * .0105); }
#labelled { opacity: 0 !important; }
.stage .wrap .label, .stage .wrap .blabel { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,0) 30%, rgba(60,40,20,.05)), #f4eee2 !important; }
/* comparison placement */
.cmp { left: 66%; top: calc(50% + 60px); width: min(720px, 54vw); translate: -50% -50%; transform-origin: 50% 50%; }
.cmp-row.head { margin-bottom: 18px; }
.cmp .who { font-size: 12.5px; padding: 7px 16px; }
.cmp-row.tr { padding: 7px 0; font-size: 19px; }
.cmp-sub { margin: 22px 0 14px; font-size: 15px; }
.cmp-row.ir { grid-template-columns: 1fr 200px 1fr; padding: 9px 0; }
.cmp-row.ir em { font-size: 17px; }
.cmp .v { font-size: 11.5px; padding: 5px 13px; }
.cmp-row.fin2 { margin-top: 28px; }
.cmp .big { font-size: clamp(22px, 2.1vw, 30px); padding: 8px 24px; }
.cmp-note { margin-top: 22px; font-size: 26px; }

/* ================= gbg hand marks ================= */
.mk { position: relative; display: inline-block; }
.copy p.mk { align-self: flex-start; }
.hm { position: absolute; overflow: visible; fill: none; stroke: var(--rust); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.hm path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1); }
.hm path + path { transition-delay: .75s; transition-duration: .3s; }
.mk.drawn > .hm path, .drawn .hm path { stroke-dashoffset: 0; }
.hm.sq { left: -2%; bottom: -.18em; width: 104%; height: .32em; stroke: var(--highlight); stroke-width: 3; }
.copy .hero h1 em.you.mk { background: none; }
.hm.ul { left: -4%; bottom: -.12em; width: 108%; height: .25em; stroke-width: 2.4; }
.hm.ci { left: -14%; top: -26%; width: 128%; height: 152%; stroke-width: 1.8; }
.hm.ar.down { left: 100%; top: 40%; width: 34px; height: 46px; margin-left: 6px; }
.hm.ar.side { right: -78px; top: 6px; width: 70px; height: 40px; }
.hm.he { right: -22px; top: -2px; width: 16px; height: 15px; stroke: #e07a6a; stroke-width: 1.5; rotate: -10deg; }
.counter { position: relative; }
.counter .n { position: relative; }
.ncirc { position: absolute; inset: 0; pointer-events: none; }
.ncirc .hm.ci { left: -18px; top: -12px; width: calc(100% + 36px); height: calc(100% + 24px); }
.counter .n { white-space: nowrap; }
.cmp .big.mk .hm.ci { left: -9%; top: -30%; width: 118%; height: 160%; stroke-width: 2; }
.impact b.mk { font-weight: 600; color: var(--ink); }
.impact b.mk .hm.ci { left: -5%; top: -30%; width: 110%; height: 160%; }
.copy .lede b { font-weight: 500; color: var(--ink); }
.copy .turn .tpin .tl3 b.mk { background: none; }
/* end of page: waitlist + footer fill one screen, no dead space */
.copy section.join { min-height: calc(100vh - 52px); padding-block: 96px 20px; justify-content: center; }
.footer { padding: 0 0 28px !important; }

/* ================= the payoff: your skin vs hers, in motion ================= */
.cmpglow { position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: 0; }
.cmpglow i { position: absolute; top: 18%; width: 46vw; height: 72vh; border-radius: 50%; filter: blur(10px); }
.cmpglow .gy { left: 25vw; background: radial-gradient(closest-side, rgba(247, 159, 90, .42), rgba(247, 159, 90, 0)); }
.cmpglow .gh { left: 56vw; top: 10%; background: radial-gradient(closest-side, rgba(143, 169, 191, .45), rgba(143, 169, 191, 0)); }
.cmp [data-s] { transform: none !important; }
/* heads: drop in */
.cmp-row.head .who { display: inline-block; transform: translateY(calc((1 - var(--a, 0)) * -18px)) scale(calc(.8 + .2 * var(--a, 0))); }
.cmp-row.head i { display: inline-block; transform: scale(calc(.4 + .6 * var(--a, 0))) rotate(calc((1 - var(--a, 0)) * -40deg)); }
/* traits collide from both sides; the ≠ stamps between them */
.cmp-row.tr > span:first-child { transform: translateX(calc((1 - var(--a, 0)) * -70px)); }
.cmp-row.tr > span:last-child { transform: translateX(calc((1 - var(--a, 0)) * 70px)); }
.cmp-row.tr > i { display: inline-block; opacity: clamp(0, calc((var(--a, 0) - .45) * 4), 1); transform: scale(calc(2.4 - 1.4 * clamp(0, calc((var(--a, 0) - .45) * 2.5), 1))) rotate(calc((1 - clamp(0, calc((var(--a, 0) - .45) * 2.5), 1)) * 30deg)); }
/* verdicts flip like a scoreboard, yours first, then hers */
.cmp-row.ir { perspective: 500px; }
.cmp-row.ir > span:first-child .v { display: inline-block; transform: rotateX(calc((1 - clamp(0, calc(var(--a, 0) * 2.2), 1)) * 90deg)); }
.cmp-row.ir > span:last-child .v { display: inline-block; transform: rotateX(calc((1 - clamp(0, calc((var(--a, 0) - .35) * 2.2), 1)) * -90deg)); }
.cmp-row.ir em::after { display: inline-block; opacity: clamp(0, calc((var(--a, 0) - .6) * 4), 1); transform: scale(calc(2 - clamp(0, calc((var(--a, 0) - .6) * 3), 1))); }
/* the outcome lands like a stamp */
.cmp-row.fin2 .big { display: inline-block; opacity: clamp(0, calc(var(--a, 0) * 3), 1);
  transform: scale(calc(1 + (1 - clamp(0, calc(var(--a, 0) * 1.8), 1)) * .9)) rotate(calc((1 - clamp(0, calc(var(--a, 0) * 1.8), 1)) * -8deg)); }
.cmp-row.fin2 > span:last-child .big { opacity: clamp(0, calc((var(--a, 0) - .25) * 3), 1);
  transform: scale(calc(1 + (1 - clamp(0, calc((var(--a, 0) - .25) * 1.8), 1)) * .9)) rotate(calc((1 - clamp(0, calc((var(--a, 0) - .25) * 1.8), 1)) * 8deg)); }
.cmp-row.fin2 .big.mk .hm.ci path { stroke-dashoffset: calc(1 - clamp(0, calc((var(--a, 0) - .55) * 2.5), 1)); transition: none; }
/* the closing line writes itself */
.cmp-note { clip-path: inset(-20% calc((1 - var(--a, 0)) * 100%) -20% 0); }

/* ================= the split: one lens becomes two ================= */
.cmp { display: none !important; }
.duo { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0; }
.lz { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity; }
.lz .halo { position: absolute; inset: -40%; border-radius: 50%; transition: transform .3s; }
.lz.you .halo { background: radial-gradient(closest-side, rgba(254, 221, 182, .9), rgba(254, 221, 182, .3) 55%, rgba(254, 221, 182, 0)); }
.lz.her .halo { background: radial-gradient(closest-side, rgba(214, 228, 240, .95), rgba(214, 228, 240, .35) 55%, rgba(214, 228, 240, 0)); }
.lz.hit .halo { transform: scale(1.12); }
.lz::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 252, 244, .82) 62%, rgba(255, 246, 232, .7));
  border: 1.5px solid rgba(179, 90, 31, .6); box-shadow: inset 0 0 40px rgba(255,255,255,.7), 0 30px 60px -30px rgba(107, 74, 43, .45); }
.lz.her::before { border-color: rgba(79, 106, 128, .55); background: radial-gradient(circle at 35% 30%, #fff, rgba(246, 250, 253, .85) 62%, rgba(232, 240, 247, .75)); }
.lz .dash { position: absolute; inset: -12px; border-radius: 50%; border: 1px dashed rgba(179, 90, 31, .35); animation: spin 40s linear infinite; }
.lz.her .dash { border-color: rgba(79, 106, 128, .35); animation-direction: reverse; }
.lz .dl { position: absolute; inset: -6%; width: 112%; height: 112%; overflow: visible; animation: spin 60s linear infinite; }
.lz .dl text { display: none; }
.lz .dl line { stroke: rgba(179, 90, 31, .4); stroke-width: .6; } .lz.her .dl line { stroke: rgba(79, 106, 128, .4); }
.lz .core { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; }
.lz .who { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--rust); }
.lz.her .who { color: #4f6a80; }
.lz .tg { font-family: var(--hand); font-size: 18px; line-height: 1.1; color: var(--ink-soft); }
.lz.hit::before { box-shadow: 0 0 0 4px rgba(247, 159, 90, .3), inset 0 0 40px rgba(255,255,255,.7), 0 30px 60px -30px rgba(107, 74, 43, .45); }
.lz.her.hit::before { box-shadow: 0 0 0 4px rgba(143, 169, 191, .35), inset 0 0 40px rgba(255,255,255,.7), 0 30px 60px -30px rgba(60, 80, 100, .4); }
.dpills { position: absolute; inset: 0; }
.dpills .fly { position: absolute; }
.res { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 2px; text-align: center; translate: -50% 0; opacity: 0; }
.res .num { font-size: clamp(38px, 4vw, 56px); font-weight: 600; letter-spacing: -.5px; line-height: 1; }
.res.her .num { color: var(--rust); }
.res .hand { margin: 2px 0 8px; font-size: 19px; color: var(--ink-soft); }
.res .big { font-size: clamp(17px, 1.6vw, 22px); font-weight: 600; padding: 6px 20px; border-radius: 9999px; white-space: nowrap; display: inline-block; position: relative; }
.res .big.b { background: #000; color: #fff; } .res .big.g { background: #feddb6; color: #000; }
.res .big .hm.ci { left: -10%; top: -32%; width: 120%; height: 164%; stroke-width: 2; }
.res .big .hm.ci path { transition: none; }
.dnote { position: absolute; left: 0; top: 0; translate: -50% 0; margin: 0; color: var(--rust); font-size: 23px; white-space: nowrap; transform: rotate(-2deg); }
/* the waitlist on desktop: one centred column, the form is the hero, the decided shelf sits under it as proof */
.copy section.join.col { width: 100%; max-width: none; }
.copy section.join { align-items: center; text-align: center; justify-content: flex-start; padding-block: 124px 0; min-height: 100vh; box-sizing: border-box; }
.copy .join .stitle { width: min(460px, 100%); margin-inline: auto; justify-content: center; }
.copy .join h2 { font-size: clamp(34px, 3.4vw, 52px); line-height: 1.08; }
.copy .join .impact { font-size: clamp(17px, 1.3vw, 20px); max-width: 52ch; margin-inline: auto; margin-top: 12px; }
.copy .join .box { margin-top: 30px; position: relative; z-index: 1; }
.copy .join .join-aside { position: relative; z-index: 2; }
.copy .join .join-aside .hm.ar.down { top: 30%; height: 40px; width: 30px; }
.copy .join h2 + .impact, .copy .join .impact { margin-top: 10px; }
.copy .join .stitle { margin-bottom: 12px; }
.copy .join .impact b.mk { white-space: nowrap; }
.copy .join .join-aside { font-size: 23px; align-self: center !important; }
.copy .join .box { width: min(560px, 100%); margin-inline: auto; }
.copy .join .field { width: 100%; height: 64px; align-items: stretch; box-shadow: 0 24px 50px -26px rgba(107,74,43,.55); }
.copy .join .field input { font-size: 17px; padding-left: 22px; } .copy .join .field button { height: auto; font-size: 16px; font-weight: 500; padding: 0 30px; }
.copy .join .small { text-align: center; }
/* ================= phone: everything stacks ================= */
@media (max-width: 700px) {
  .quiet { display: none !important; }
  .ring { display: none !important; }   /* phone hero: the wall and the fade carry it; the glass lives on the shelf */
  .c.shout { font-size: 15px; padding: 5px 11px; border-width: 1.5px; }
  .c.vs { font-size: 11.5px; padding: 7px 10px; gap: 7px; } .c.vs b { font-size: 13px; }
  .c.reel { width: 104px; }
  .depth.far .w { opacity: .75; } .depth.mid .w { opacity: .9; }
  .logo { left: 18px; top: calc(26px + env(safe-area-inset-top, 0px)); height: 44px; transform-origin: 0 0; will-change: transform; }
  .topband { height: calc(92px + env(safe-area-inset-top, 0px)); }
  .copy .hero { padding-top: 186px; }
  .copy section { padding-inline: 20px; }
  .copy .hero h1 { font-size: 33px; }
  .copy .lede { font-size: 16.5px; }
  .copy .field input { min-width: 0; }
  /* sound familiar: two columns, each pair rising in as it scrolls into view */
  .copy .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; align-items: stretch; }
  #decode { min-height: 230vh; }
  .copy .card { min-height: 0; padding: 12px 12px 12px; justify-content: flex-start; gap: 5px;
    opacity: 0; translate: 0 22px; transition: opacity .55s ease, translate .55s cubic-bezier(.2,.8,.3,1), background .25s, border-color .25s; }
  .copy .card.in { opacity: 1; translate: 0 0; }
  .copy .card:nth-child(even) { transition-delay: .08s; }
  .copy .card.note b { font-size: 14.5px; line-height: 1.22; padding-right: 0; }
  .copy .card.note .su { font-size: 12px; line-height: 1.3; padding-right: 24px; margin-top: auto; }
  .copy .cards { gap: 8px; }
  .copy .card .tick { top: auto; bottom: 11px; right: 10px; width: 20px; height: 20px; }
  .copy .card .me { display: none; }
  .copy .familiar .sub { font-size: 21px; }
  .copy .familiar .sub .hm, .copy .cue .hm, .join-aside .hm { display: none; }
  .copy .counter { flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; }
  .copy .counter .n { font-size: 38px; }
  .copy .counter .msg { font-size: 20px; text-align: center; max-width: 30ch; }
  .focus { background: linear-gradient(rgba(255,254,244,.88) 0 50%, rgba(255,254,244,.97) 70%, #fffef4 88%); }
  .copy .turn .tpin { padding-inline: 20px; }
  .copy .turn .tpin h2, .copy .turn .tlq { font-size: 40px; }
  .copy .turn .tpin .tl3 { font-size: 19px; max-width: 30ch; }
  .beat.top, .beat.top.right { left: 50%; width: calc(100vw - 32px); top: calc(98px + env(safe-area-inset-top, 0px)); }
  .copy .beat p, .copy .beat.top.right p { font-size: 21px; }
  .copy .beat small { font-size: 10px; margin-bottom: 6px; }
  .pchips { display: block; }
  .chips3 span { font-size: 13px; padding: 6px 13px; }
  .sring .halo, .sring .calc, .sring .sweep, .sring .dial, .sring .dash, .sring .who, .sring .note2 { display: none; }
  .sring::before { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(255,250,240,.08) 70%) !important; border: 2px solid #b35a1f !important;
    box-shadow: 0 0 0 4px rgba(247,159,90,.25), 0 6px 14px -6px rgba(107,74,43,.5) !important; }
  .sring::after { content: ""; position: absolute; right: -9px; bottom: -9px; width: 14px; height: 3px; border-radius: 2px; background: #b35a1f; transform: rotate(45deg); }
  .tally, .fit { display: none !important; }
  .rh { display: none; }
  .copy .turn .tpin .tlq { line-height: 1.62; }
  .fly .pill2 { font-size: 12px !important; }
  .sring .note2 { top: auto; bottom: -10px; right: -26px; font-size: 18px; transform: rotate(-6deg); }
  .tally { font-size: 11px; letter-spacing: .03em; }
  .sring .who { font-size: 9.5px; letter-spacing: 1.5px; }
  .sring .calc pre { font-size: 8px; }
  .fit { font-size: 11px; padding: 4px 10px; }
  .reason { width: 300px; font-size: 22px; }
  .rh .rn { display: none; }
  .lz .who { font-size: 9.5px; letter-spacing: 1.2px; } .lz .tg { font-size: 12.5px; max-width: 96px; margin-inline: auto; }
  .res .num { font-size: 36px; } .res .hand { font-size: 15px; margin-bottom: 4px; white-space: nowrap; } .res .big { font-size: 16px; padding: 5px 14px; }
  .dnote { white-space: normal; width: calc(100vw - 40px); text-align: center; font-size: 20px; line-height: 1.15; }
  .copy section.join { align-items: stretch; text-align: left; min-height: 0; padding-block: calc(128px + env(safe-area-inset-top, 0px)) 210px; min-height: 0; justify-content: flex-start; }
  .copy .join .box, .copy .join .field, .copy .hero .field { width: 100%; max-width: 100%; box-sizing: border-box; }
  /* the sign-up pill: one clean height, the button sits evenly inside it */
  .copy .field { height: 56px; padding: 5px; border: 1px solid #ecdfcb; box-shadow: 0 12px 28px -20px rgba(107,74,43,.45); }
  .copy .field { align-items: stretch; }
  .copy .field input { padding: 0 6px 0 16px; font-size: 15.5px; }
  .copy .field input::placeholder { color: #9a958c; }
  .copy .field button { height: auto; padding: 0 20px; font-size: 15px; font-weight: 500; letter-spacing: .01em; }
  .copy .join .box > *, .copy .join .step > * { min-width: 0; }
  .copy section.decided { min-height: 210vh; }
  .dhead { top: calc(98px + env(safe-area-inset-top, 0px)); }
  .dhead p { font-size: 31px; line-height: 1.12; }
  .dtally { gap: 6px; margin-top: 12px !important; font-size: 12px !important; } .dtally span { padding: 5px 11px; }
  .dcap { width: calc(100vw - 40px); font-size: 20px; }
  .shelf .sl { width: calc(100vw - 36px); bottom: calc(var(--st, 120px) + 22px); }
  .shelf .sl p { font-size: 31px; line-height: 1.12; }
  #scan > span { position: absolute; left: 50%; right: auto; top: auto; bottom: calc(100% + 4px); translate: -50% 0; white-space: nowrap; font-size: 19px; }
  .shelf .tag { white-space: normal; width: calc(100vw - 60px); text-align: center; font-size: 20px; top: 40px; }
  .shelf .vt b { font-size: var(--tf, 10px); letter-spacing: .8px; padding: .3em .8em; }
  #row > :nth-child(even) .vt { top: calc(100% + var(--u) * .2 + 20px * (var(--ik, 1) - 1)); }
  .scan { width: 176px; height: 176px; }
  .copy .hero { position: relative; }
  .copy .hero > * { position: relative; z-index: 1; }
  /* hero: the same wall, softly faded around the copy so the words read and the opinions stay visible around them */
  .copy .hero::before { content: ""; position: absolute; left: -24px; right: -24px; top: 110px; bottom: -30px; z-index: 0; pointer-events: none;
    background: radial-gradient(115% 62% at 42% 50%, rgba(255,254,244,.96) 0%, rgba(255,254,244,.9) 48%, rgba(255,254,244,.55) 72%, rgba(255,254,244,0) 100%); }
  .shelf .vt i { display: none; }
  .copy .join h2 { font-size: 30px; margin: 0; }
  .copy .join .stitle { margin: 0 0 14px; justify-content: flex-start; width: min(520px, 100%); } .copy .join .impact { margin-inline: 0; } .copy .join .join-aside { align-self: flex-start !important; } .copy .join .box { margin-inline: 0; } .copy .join .small { text-align: left; } .copy .join .small.success { align-items: flex-start; } .copy .join .j-note { display: none; }
  .copy .join .stitle span { letter-spacing: .22em; font-size: 12px; }
  .copy .join .impact { margin-top: 14px; font-size: 16.5px; }
  .copy .join .join-aside { margin-top: 12px; } .copy .join .box { margin-top: 16px; }
  .footer { padding: 24px 20px 36px; flex-direction: column; gap: 6px; }
}