/* The Sealed Room: the front page, served at /. His phone at 12:29am opens into the page.
   Brat type (Helvetica / Arial, bold, lowercase, tight) for the page; Inter for the phone and the checkout. */
:root {
  --brat: Arial, Helvetica, 'Liberation Sans', sans-serif;
  --ui: Arial, Helvetica, 'Liberation Sans', sans-serif;
  --black: #050506;
  --hi: #f4eee3;
  --body: #bdb6aa;
  --mute: #7f7a72;
  --bone: #ece6da;
  --paper: #f8f4ed;
}
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

html { scroll-behavior: auto; }
body.spx { margin: 0; background: var(--black); color: var(--hi); font-family: var(--brat); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.spx [hidden] { display: none !important; }
.spx p { margin: 0 0 1em; font: 400 clamp(18px, 1.55vw, 21px)/1.55 var(--brat); letter-spacing: -0.012em; color: var(--body); text-wrap: pretty; }
.spx em { font-style: italic; }
.spx h2, .spx h3 { margin: 0; }

/* ================= 0. the phone ================= */
.x-hero { position: relative; height: 270vh; }
.x-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; perspective: 1600px; }
.x-room { position: absolute; inset: 0; background:
  radial-gradient(ellipse 50% 45% at 50% 52%, rgba(233,228,217,.07), transparent 70%),
  radial-gradient(ellipse 80% 40% at 50% 100%, rgba(224,96,63,.08), transparent 70%), var(--black); }
.x-phone { position: relative; width: 414px; height: 868px; flex: none; transform-style: preserve-3d; will-change: transform; }
.x-frame { position: absolute; inset: 0; border-radius: 70px; padding: 12px;
  background: linear-gradient(140deg, #5a5a61 0%, #1d1d21 22%, #34343a 48%, #141417 74%, #48484f 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 0 4px #0b0b0d, 0 70px 140px -40px rgba(0,0,0,.95), 0 0 160px -50px rgba(224,96,63,.35); }
.x-btn { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #2b2b30, #5d5d64); }
.x-btn-a { left: -3px; top: 150px; height: 34px; }
.x-btn-b { left: -3px; top: 210px; height: 64px; }
.x-btn-c { right: -3px; top: 230px; height: 96px; background: linear-gradient(270deg, #2b2b30, #5d5d64); }
.x-screen { position: absolute; inset: 12px; border-radius: 58px; overflow: hidden; background: #000; isolation: isolate; font-family: var(--ui); color: #fff; }
.x-wall { position: absolute; inset: 0; background:
  radial-gradient(120% 60% at 50% 112%, rgba(224,96,63,.55), rgba(109,21,35,.25) 45%, transparent 70%),
  radial-gradient(90% 50% at 50% -10%, rgba(140,150,180,.22), transparent 70%),
  linear-gradient(180deg, #0c0d13 0%, #060608 55%, #140806 100%); transition: filter .8s; filter: brightness(.35); }
.x-screen.awake .x-wall { filter: brightness(1); }
.x-island { position: absolute; top: 11px; left: 50%; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; z-index: 5; }
.x-status { position: absolute; top: 20px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 30px 0 36px; font: 600 16px var(--ui); z-index: 4; opacity: .9; }
.x-icons { display: flex; gap: 6px; align-items: center; }
.x-sig { width: 18px; height: 11px; background: linear-gradient(90deg, #fff 0 3px, transparent 3px 5px, #fff 5px 8px, transparent 8px 10px, #fff 10px 13px, transparent 13px 15px, rgba(255,255,255,.35) 15px 18px);
  -webkit-mask: linear-gradient(0deg, #000 0 100%); clip-path: polygon(0 100%, 0 75%, 17% 75%, 17% 55%, 45% 55%, 45% 30%, 72% 30%, 72% 0, 100% 0, 100% 100%); }
.x-wifi { width: 16px; height: 12px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: radial-gradient(circle at 50% 100%, #fff 0 2px, transparent 2.5px 4px, #fff 4px 6px, transparent 6.5px 8px, #fff 8px 10px, transparent 10.5px); }
.x-batt { position: relative; width: 25px; height: 12px; border-radius: 4px; border: 1px solid rgba(255,255,255,.45); padding: 1.5px; }
.x-batt b { display: block; width: 23%; height: 100%; border-radius: 2px; background: #fff; }
.x-batt::after { content: ''; position: absolute; right: -4px; top: 3.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(255,255,255,.45); }
.x-lock { position: absolute; top: 70px; left: 0; right: 0; text-align: center; z-index: 2; }
.x-date { font: 600 20px var(--ui); letter-spacing: .005em; color: rgba(255,255,255,.88); text-transform: lowercase; }
/* the stretched clock of the new lock screens: tall glass numerals */
.x-time { height: 210px; margin-top: 4px; font: 650 116px/1 var(--ui); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; transform: scaleY(1.8); transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 10%, rgba(255,255,255,.62) 62%, rgba(255,255,255,.3) 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.35)); }
.x-lock .x-coin-lock { position: absolute; left: 50%; top: 168px; --s: 100px; margin-left: calc(var(--s) / -2); z-index: 3; }
.x-notif { position: absolute; left: 12px; right: 12px; bottom: 132px; z-index: 6; display: flex; gap: 12px; align-items: center; padding: 13px 16px 14px 13px; text-align: left; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); border-radius: 26px; background: rgba(48,46,52,.5); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12); color: #fff; font: inherit; opacity: 0; transform: translateY(46px) scale(.94); }
.x-notif-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(180deg, #1c1b1f, #0b0a0c); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.x-notif-icon svg { width: 22px; height: 24px; }
.x-notif-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.x-notif-top { display: flex; justify-content: space-between; font: 600 15px var(--ui); }
.x-notif-top span { font-weight: 400; font-size: 13px; color: rgba(255,255,255,.55); }
.x-notif-text { font: 400 15.5px/1.3 var(--ui); color: rgba(255,255,255,.92); }
.x-foot { position: absolute; left: 0; right: 0; bottom: 46px; display: flex; justify-content: space-between; padding: 0 46px; z-index: 2; }
.x-foot i { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); position: relative; }
.x-torch::after { content: ''; position: absolute; left: 21px; top: 14px; width: 8px; height: 20px; border-radius: 2px 2px 3px 3px; background: rgba(255,255,255,.9); }
.x-cam::after { content: ''; position: absolute; left: 14px; top: 17px; width: 22px; height: 16px; border-radius: 4px; background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 5px rgba(255,255,255,.9), inset 0 0 0 7px #2a2a2e; }
.x-homebar { position: absolute; left: 50%; bottom: 10px; width: 140px; height: 5px; margin-left: -70px; border-radius: 3px; background: rgba(255,255,255,.85); z-index: 2; }
.x-hint { position: absolute; left: 0; right: 0; bottom: max(3vh, env(safe-area-inset-bottom, 0px)); text-align: center; font: 500 13px var(--ui); letter-spacing: .03em; color: rgba(255,255,255,.45); animation: x-breathe 2.4s ease-in-out infinite; }
@keyframes x-breathe { 50% { opacity: .35; } }

/* ================= the page ================= */
.x-sec { position: relative; max-width: 1180px; margin: 0 auto; padding: clamp(90px, 16vh, 190px) 24px; box-sizing: border-box; }
.x-center { max-width: 860px; text-align: center; }
.x-center .x-copy p, .x-center > p { margin-left: auto; margin-right: auto; max-width: 32em; }
.x-lead { font: 700 clamp(28px, 3.6vw, 46px)/1.06 var(--brat) !important; letter-spacing: -0.048em !important; color: var(--hi) !important; }
.x-strong { font-weight: 700 !important; color: var(--hi) !important; }
.x-dim { color: var(--mute) !important; }
.x-ember { color: var(--ghost) !important; }
.x-stamp { font: 700 clamp(72px, 13vw, 168px)/.86 var(--brat) !important; letter-spacing: -0.065em !important; color: var(--hi) !important; margin-bottom: .32em !important; }
.x-kicker { font: 700 15px var(--brat) !important; letter-spacing: -0.01em !important; color: var(--ghost) !important; }
.x-huge { max-width: 13ch; margin: .5em auto 0; text-align: center; font: 700 clamp(50px, 9.4vw, 136px)/.9 var(--brat); letter-spacing: -0.065em; color: var(--hi); text-wrap: balance; }
.x-big { max-width: 16ch; margin: .7em auto .6em; text-align: center; font: 700 clamp(36px, 6vw, 84px)/.95 var(--brat); letter-spacing: -0.06em; color: var(--hi); text-wrap: balance; }

/* text and pictures side by side, swapping sides */
.x-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.x-split.x-rev .x-copy { order: 2; }
@media (max-width: 820px) { .x-split { grid-template-columns: 1fr; } .x-split.x-rev .x-copy { order: 0; } }

/* text coming up as he reaches it */
.x-reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.x-reveal.on { opacity: 1; transform: none; }
.x-copy.x-reveal { opacity: 1; transform: none; }
.x-copy.x-reveal > *, .x-rail.x-reveal > * { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.x-copy.x-reveal.on > *, .x-rail.x-reveal.on > * { opacity: 1; transform: none; }
.x-reveal.on > :nth-child(2) { transition-delay: .09s; } .x-reveal.on > :nth-child(3) { transition-delay: .18s; } .x-reveal.on > :nth-child(4) { transition-delay: .27s; }
.x-reveal.on > :nth-child(5) { transition-delay: .36s; } .x-reveal.on > :nth-child(6) { transition-delay: .45s; } .x-reveal.on > :nth-child(7) { transition-delay: .54s; }

/* the hour-by-hour pages */
.x-timeline { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.x-rail { position: relative; border-left: 1px solid rgba(233,228,217,.12); }
.x-hour { position: relative; display: grid; grid-template-columns: 104px 1fr; gap: 18px; padding: 0 0 34px 26px; }
.x-hour::before { content: ''; position: absolute; left: -4.5px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #2a2a2e; box-shadow: 0 0 0 4px var(--black); }
.x-hour:has(b:not(:empty))::before { background: var(--ghost); box-shadow: 0 0 0 4px var(--black), 0 0 14px var(--ghost-glow); }
.x-hour b { font: 700 clamp(18px, 1.8vw, 24px)/1.15 var(--brat); letter-spacing: -0.04em; color: var(--ghost); }
.x-hour p { margin: 0; }
.x-side { position: sticky; top: 12vh; display: grid; gap: 18px; }
.x-after { grid-column: 1 / -1; text-align: center; margin-top: clamp(40px, 8vh, 90px); }
.x-future { grid-template-columns: 1fr; max-width: 860px; }
.x-future .x-kicker { font-size: clamp(26px, 3.4vw, 42px) !important; letter-spacing: -0.045em !important; margin-bottom: 1.2em !important; }
@media (max-width: 820px) {
  .x-timeline { grid-template-columns: 1fr; }
  .x-side { position: static; }
  .x-hour { grid-template-columns: 1fr; gap: 6px; }
}

/* the slots for PM's own pictures */
.x-slot { margin: 0; display: grid; place-items: center; min-height: 220px; padding: 28px; border-radius: 26px; border: 1px dashed rgba(255,138,90,.5); text-align: center;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 12px, transparent 12px 24px); }
.x-slot-tall { aspect-ratio: 4 / 5; }
.x-note { padding: 3px 9px; border-radius: 7px; background: rgba(255,106,61,.14); border: 1px dashed rgba(255,138,90,.75); color: #ffbea4; font: 500 14px/1.6 var(--ui); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* a light page, for the two turns */
.x-light { max-width: none; background: var(--bone); padding-left: max(24px, calc((100vw - 1180px) / 2)); padding-right: max(24px, calc((100vw - 1180px) / 2)); }
.x-light.x-center { text-align: center; }
.x-light p { color: #4b4740; }
.x-light .x-huge { color: #0b0b0c; }
.x-light .x-kicker { color: #b4462a !important; }

/* the steps */
.x-steps { max-width: 1000px; }
.x-steplist { list-style: none; margin: 36px 0 0; padding: 0; }
.x-steplist li { display: grid; grid-template-columns: clamp(80px, 12vw, 150px) 1fr; gap: 24px; padding: clamp(32px, 5vh, 52px) 0; border-top: 1px solid rgba(233,228,217,.09); }
.x-steplist li > b { font: 700 clamp(52px, 8vw, 104px)/.82 var(--brat); letter-spacing: -0.07em; color: transparent; -webkit-text-stroke: 1.2px rgba(233,228,217,.4); }
.x-steplist h3 { font: 700 clamp(26px, 3vw, 38px)/1.04 var(--brat); letter-spacing: -0.045em; color: var(--hi); margin-bottom: 12px; }
@media (max-width: 640px) { .x-steplist li { grid-template-columns: 1fr; gap: 10px; } }

/* what's in it */
.x-inside { padding-top: clamp(80px, 14vh, 160px); padding-bottom: clamp(80px, 14vh, 160px); }
.x-inside .x-kicker { font-size: clamp(30px, 4vw, 52px) !important; letter-spacing: -0.05em !important; color: #0b0b0c !important; }
.x-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.x-card { grid-column: span 3; padding: clamp(24px, 3vw, 36px); border-radius: 30px; background: var(--paper); color: #0b0b0c; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 34px 60px -44px rgba(0,0,0,.45); }
.x-card h3 { font: 700 clamp(24px, 2.4vw, 32px)/1.05 var(--brat); letter-spacing: -0.045em; margin-bottom: 12px; }
.x-card p { color: #4b4740; margin: 0; }
.x-card-lessons { grid-row: span 2; }
.x-card-lessons ol { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: l; }
.x-card-lessons li { counter-increment: l; display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid rgba(0,0,0,.07); font: 700 clamp(18px, 1.7vw, 21px)/1.25 var(--brat); letter-spacing: -0.03em; }
.x-card-lessons li::before { content: counter(l); flex: none; width: 1.3em; color: #c2502f; }
.x-card-img { padding: 0; overflow: hidden; }
.x-card-img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.x-card-img p { padding: 18px 24px 22px; }
@media (max-width: 820px) { .x-card, .x-card-lessons { grid-column: span 6; grid-row: auto; } }

/* the offer */
.x-offer { max-width: 760px; text-align: center; }
.x-coin-offer { --s: clamp(130px, 18vw, 190px); margin: 0 auto 34px; }
.x-price { display: flex; justify-content: center; align-items: baseline; gap: 14px; margin: 14px 0 10px; }
.x-price b { font: 700 clamp(104px, 18vw, 200px)/.82 var(--brat); letter-spacing: -0.075em; color: var(--hi); }
.x-price span { font: 700 clamp(20px, 2vw, 26px) var(--brat); letter-spacing: -0.03em; color: var(--body); }
.x-price-sub { font-size: 18px !important; color: var(--body) !important; margin-bottom: 6px !important; }
.x-spots { min-height: 1.4em; color: var(--ghost) !important; font-weight: 700 !important; }
.x-trust { list-style: none; margin: 0 auto; padding: 0; max-width: 30em; display: grid; gap: 8px; font: 400 15px/1.5 var(--ui); color: var(--mute); }

/* the buy button: one bright way in, with a slow light running round its edge */
.x-buywrap { position: relative; display: inline-block; margin: 34px 0 28px; padding: 1.5px; border-radius: 999px; isolation: isolate;
  background: conic-gradient(from var(--a), rgba(255,138,90,0) 0deg, rgba(255,138,90,0) 200deg, #ffb08a 280deg, #ff6a3d 320deg, rgba(255,138,90,0) 360deg); animation: x-spin 5s linear infinite; }
.x-buywrap::after { content: ''; position: absolute; inset: -10px; z-index: -1; border-radius: inherit; background: inherit; filter: blur(22px); opacity: .45; }
@keyframes x-spin { to { --a: 360deg; } }
.x-buy { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 38px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #f7f2e9, #ddd6ca); color: #0d0a0a; font: 700 clamp(18px, 1.6vw, 20px) var(--brat); letter-spacing: -0.03em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(0,0,0,.08), 0 14px 34px -14px rgba(224,96,63,.75); transition: transform .2s var(--ease), box-shadow .3s; }
.x-buy::after { content: '\2192'; transition: transform .3s var(--ease); }
.x-buy:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(0,0,0,.08), 0 20px 44px -14px rgba(224,96,63,.9); }
.x-buy:hover::after { transform: translateX(4px); }
.x-buy:active { transform: scale(.98); }
.x-buy:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* questions */
.x-faq { max-width: 1000px; }
.x-qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(20px, 5vw, 60px); padding: clamp(32px, 5vh, 50px) 0; border-top: 1px solid rgba(233,228,217,.09); }
.x-qa h3 { font: 700 clamp(24px, 2.8vw, 34px)/1.08 var(--brat); letter-spacing: -0.045em; color: var(--hi); }
@media (max-width: 720px) { .x-qa { grid-template-columns: 1fr; } }
.x-close { padding-bottom: clamp(120px, 20vh, 220px); }
.x-close .x-buywrap { margin-top: 56px; }
.x-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; padding: 36px 24px 60px; border-top: 1px solid rgba(233,228,217,.06); }
.x-footer a { color: var(--mute); font: 400 13px var(--ui); text-decoration: none; }
.x-footer a:hover { color: var(--hi); }

/* ================= the pictures that move as he scrolls ================= */
.x-viz { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: 30px; overflow: hidden; color: var(--hi);
  background: radial-gradient(120% 80% at 50% 0%, rgba(233,228,217,.05), transparent 60%), linear-gradient(180deg, #0f0f12, #08080a);
  border: 1px solid rgba(233,228,217,.07); box-shadow: 0 50px 90px -50px rgba(0,0,0,.95); font-family: var(--ui); }
.x-viz-wide { aspect-ratio: 16 / 8; max-width: 1000px; margin: 0 auto clamp(48px, 8vh, 80px); }
.x-center .x-viz-wide + .x-copy { margin-top: 0; }
@media (max-width: 720px) { .x-viz-wide { aspect-ratio: 4 / 3.2; } }
.x-viz svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.x-viz text { font-family: var(--brat); font-weight: 700; letter-spacing: -0.03em; }

  background: linear-gradient(180deg, #fff 10%, rgba(255,255,255,.55)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }

/* search */
.v-search { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 22px; padding: 24px; }
.v-bar { display: flex; align-items: center; gap: 12px; width: min(560px, 92%); height: 58px; padding: 0 20px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font: 500 18px var(--ui); color: #fff; box-sizing: border-box; }
.v-bar i { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); position: relative; }
.v-bar i::after { content: ''; position: absolute; width: 2px; height: 7px; right: -4px; bottom: -6px; background: rgba(255,255,255,.55); transform: rotate(-45deg); }
.v-bar span::after { content: ''; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--ghost); animation: x-blink 1s steps(1) infinite; }
@keyframes x-blink { 50% { opacity: 0; } }
.v-results { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(640px, 96%); }


/* alarm */
.v-alarm { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; font-family: var(--ui); }
.v-alarm small { font: 600 15px var(--ui); color: rgba(255,255,255,.55); }
.v-alarm b { font: 650 clamp(74px, 10vw, 118px)/1 var(--ui); letter-spacing: -0.035em; color: #fff; font-variant-numeric: tabular-nums; }
.v-alarm.ring b { animation: x-ring .18s linear infinite; }
@keyframes x-ring { 25% { transform: translateX(-2px) rotate(-1deg); } 75% { transform: translateX(2px) rotate(1deg); } }
.v-alarm .v-cut { display: grid; gap: 6px; margin-top: 18px; font: 600 14px var(--ui); color: var(--mute); text-align: center; }
.v-alarm .v-cut span { opacity: 0; transition: opacity .3s; text-decoration: line-through; text-decoration-color: var(--ghost); }
.v-alarm .v-cut span.on { opacity: 1; }

/* the other version, further away */
.v-recede { position: absolute; inset: 0; perspective: 600px; overflow: hidden; }
.v-floor { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; transform: rotateX(78deg); transform-origin: 50% 100%;
  background: radial-gradient(ellipse 30% 40% at 50% 30%, rgba(255,190,150,.14), transparent 70%), repeating-linear-gradient(90deg, rgba(233,228,217,.16) 0 1px, transparent 1px 60px), repeating-linear-gradient(0deg, rgba(233,228,217,.16) 0 1px, transparent 1px 60px);
  -webkit-mask: linear-gradient(0deg, #000, transparent 85%); mask: linear-gradient(0deg, #000, transparent 85%); }

/* promises getting bigger */
.v-prom { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; padding: 30px; font-family: var(--brat); }
.v-prom div { display: flex; align-items: baseline; justify-content: center; gap: 14px; transform-origin: 50% 100%; }
.v-prom small { font: 700 15px var(--brat); color: var(--mute); width: 4.6em; text-align: right; }
.v-prom b { font: 700 clamp(64px, 9vw, 112px)/.95 var(--brat); letter-spacing: -0.065em; color: var(--hi); font-variant-numeric: tabular-nums; min-width: 2.6ch; text-align: left; }
.v-prom b.up { color: var(--ghost); }

/* best day, worst day; the fall; the pads */
.v-label { fill: #d7d0c4; font: 700 22px var(--brat); letter-spacing: -0.03em; }
.v-faint { fill: var(--mute); }
.v-line { stroke: var(--hi); stroke-width: 3; stroke-linecap: round; }
.v-line-hot { stroke: var(--ghost); }
.v-dash { stroke: var(--ghost); stroke-width: 2; stroke-dasharray: 5 7; opacity: .6; }
.v-dot { fill: var(--ghost); filter: drop-shadow(0 0 9px var(--ghost)); }
.v-path { fill: none; stroke: var(--hi); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.v-ghostpath { fill: none; stroke: rgba(233,228,217,.08); stroke-width: 3; }
.v-pad { fill: var(--ghost); filter: drop-shadow(0 0 12px var(--ghost)); }

/* tabs */
.v-tabsviz { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; }
.v-win { width: 100%; max-width: 440px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, #141519, #0b0b0e); overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.9); transform: perspective(1000px) rotateX(12deg) rotateY(-8deg); }
.v-strip { display: flex; flex-wrap: wrap; gap: 5px; min-height: 48px; padding: 10px 10px 0; background: #09090b; }
.v-tab { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px 10px 0 0; background: #191a20; border: 1px solid rgba(255,255,255,.08); border-bottom: 0;
  font: 600 13px var(--ui); color: #e4ded3; white-space: nowrap; overflow: hidden; transform-origin: 0 100%; }
.v-tab i { font-style: normal; color: var(--mute); }
.v-tab.closing i { color: #ff8a5a; }
.v-lines { display: grid; gap: 11px; padding: 22px 18px 12px; }
.v-lines i { height: 9px; border-radius: 5px; background: rgba(255,255,255,.07); }
.v-run { display: flex; align-items: center; gap: 9px; padding: 12px 18px 16px; font: 500 13px var(--ui); color: var(--mute); }
.v-run b { width: 8px; height: 8px; border-radius: 50%; background: var(--ghost); box-shadow: 0 0 10px var(--ghost); animation: x-breathe 1.6s ease-in-out infinite; }
.x-viz-pads { aspect-ratio: 16 / 9; max-width: 680px; margin-top: 26px; }

/* the mountain run: pinned while he climbs */
.x-mtn { position: relative; height: 480vh; }
.x-mtn-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(90% 60% at 50% 0%, rgba(140,150,180,.10), transparent 70%), linear-gradient(180deg, #07080c, #050506 70%); }
.x-mtn-scene { position: absolute; inset: 0; perspective: 1200px; }
.x-mtn-scene svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 78%; overflow: visible; transform: rotateX(6deg); transform-origin: 50% 100%; }
.m-far { fill: #0c0d12; }
.m-mid { fill: #111218; stroke: rgba(233,228,217,.06); }
.m-main { fill: url(#xm-g); stroke: rgba(233,228,217,.45); stroke-width: 2; stroke-linejoin: round; }
.m-route { fill: none; stroke: rgba(224,96,63,.28); stroke-width: 2; stroke-dasharray: 3 9; }
.m-ledge { stroke: var(--ghost); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 10px var(--ghost)); }
.m-num { fill: var(--hi); font: 700 44px var(--brat); letter-spacing: -0.05em; }
.m-num-hot { fill: var(--ghost); }
.m-who { fill: #ffd2b8; filter: drop-shadow(0 0 12px var(--ghost)) drop-shadow(0 0 30px rgba(224,96,63,.6)); }
.x-mtn-caps { position: absolute; left: 0; right: 0; top: clamp(70px, 13vh, 130px); }
.x-mtn-caps p { position: absolute; left: 50%; width: min(860px, 88vw); margin: 0; text-align: center; transform: translate(-50%, 12px); opacity: 0;
  font: 700 clamp(26px, 3.8vw, 50px)/1.06 var(--brat) !important; letter-spacing: -0.05em !important; color: var(--hi) !important; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.x-mtn-caps p.on { opacity: 1; transform: translate(-50%, 0); }

/* ================= the 3d seal ================= */
.x-coin { --s: 120px; position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; }
.x-coin i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #7d1d2c, #4a0f19 70%); }
.x-coin .c-face { display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #c23a4f 0%, #8a2233 34%, #5a1220 70%, #3b0a13 100%);
  box-shadow: inset 0 0 0 calc(var(--s) * .045) rgba(0,0,0,.18), inset 0 calc(var(--s) * .03) calc(var(--s) * .06) rgba(255,200,190,.25), inset 0 calc(var(--s) * -.04) calc(var(--s) * .08) rgba(0,0,0,.4); }
.x-coin .c-face svg { width: 46%; height: 46%; filter: drop-shadow(0 1px 0 rgba(255,220,210,.25)) drop-shadow(0 -1px 0 rgba(0,0,0,.45)); }
.x-coin .c-shine { background: linear-gradient(115deg, transparent 30%, rgba(255,230,220,.28) 46%, transparent 60%); mix-blend-mode: screen; }
.x-coin-lock { animation: x-coin-sway 7s ease-in-out infinite; }
@keyframes x-coin-sway { 0%, 100% { transform: rotateY(-24deg) rotateX(8deg); } 50% { transform: rotateY(24deg) rotateX(-4deg); } }
.x-coin::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -18%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); transform: translateZ(-30px); }

/* ================= the checkout ================= */
.x-sheet-veil { position: fixed; inset: 0; z-index: 90; background: rgba(3,3,4,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: x-fade .3s ease; }
@keyframes x-fade { from { opacity: 0; } }
.x-sheet { position: fixed; z-index: 91; left: 50%; top: 50%; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
  transform: translate(-50%, -50%); box-sizing: border-box; padding: 26px 26px 22px; border-radius: 30px; color: var(--hi); font-family: var(--ui);
  background: radial-gradient(120% 60% at 50% 0%, rgba(224,96,63,.1), transparent 60%), linear-gradient(180deg, #161518, #0b0a0c);
  border: 1px solid rgba(233,228,217,.1); box-shadow: 0 60px 140px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06); animation: x-rise .45s var(--ease); }
@keyframes x-rise { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
@media (max-width: 640px) {
  .x-sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 94dvh; transform: none; border-radius: 28px 28px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); animation: x-up .45s var(--ease); }
  @keyframes x-up { from { transform: translateY(40%); opacity: 0; } }
}
.k-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.k-head .x-coin { --s: 40px; flex: none; }
.k-head .k-brand { font: 700 19px var(--brat); letter-spacing: -0.04em; }
.k-head .k-brand { white-space: nowrap; }
@media (max-width: 420px) { .k-sw { display: none; } }
.k-x { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.07); color: var(--hi); font-size: 20px; line-height: 1; cursor: pointer; }
.k-x:hover { background: rgba(255,255,255,.12); }
.k-item { padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); margin-bottom: 10px; }
.k-item.k-founding { border-color: rgba(224,96,63,.38); background: radial-gradient(140% 120% at 100% 0%, rgba(224,96,63,.14), transparent 60%), rgba(255,255,255,.035);
  box-shadow: 0 18px 50px -28px rgba(224,96,63,.6), inset 0 1px 0 rgba(255,255,255,.05); }
.k-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.k-gets { display: grid; gap: 7px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.07); list-style: none; }
.k-gets li { display: flex; align-items: flex-start; gap: 9px; font: 400 13.5px/1.4 var(--ui); color: var(--body); }
.k-gets svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--ghost); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.k-secure { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font: 600 11.5px var(--ui); color: var(--body); white-space: nowrap; }
.k-secure svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.k-steps { display: flex; gap: 8px; margin: -6px 0 16px; padding: 0; list-style: none; counter-reset: k; }
.k-steps li { flex: 1; display: grid; gap: 6px; font: 600 11.5px var(--ui); color: var(--mute); text-transform: lowercase; }
.k-steps i { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); }
.k-steps li.done i { background: rgba(244,238,227,.55); }
.k-steps li.now i { background: var(--ghost); box-shadow: 0 0 10px rgba(224,96,63,.7); }
.k-steps li.now { color: var(--hi); }
.k-meter { display: flex; gap: 3px; margin: 0 0 8px; }
.k-meter i { flex: 1; height: 6px; border-radius: 2px; background: rgba(255,255,255,.08); }
.k-meter i.on { background: var(--ghost); box-shadow: 0 0 8px rgba(224,96,63,.6); }
.k-item b { display: block; font: 700 18px var(--brat); letter-spacing: -0.03em; }
.k-item small { display: block; margin-top: 3px; font: 400 13px/1.4 var(--ui); color: var(--mute); }
.k-amt { text-align: right; white-space: nowrap; }
.k-amt b { font: 700 32px/1 var(--brat); letter-spacing: -0.05em; }
.k-amt small { margin-top: 4px; }
.k-was { display: block; margin-bottom: 2px; font: 700 15px var(--brat); color: var(--mute); text-decoration-thickness: 2px; }
.k-promise { margin: 14px 2px 0; text-align: center; font: 700 15px/1.4 var(--brat); letter-spacing: -0.02em; color: #e4ded3; }
.k-spots { margin: 0 4px 18px; font: 600 13px var(--ui); color: var(--ghost); min-height: 1em; }
.k-sec { display: grid; gap: 10px; margin-top: 16px; }
.k-sec > label, .k-label { font: 500 13px var(--ui); color: #a39d93; }
.k-in { width: 100%; box-sizing: border-box; height: 54px; padding: 0 16px; border-radius: 15px; border: 1px solid rgba(255,255,255,.11); background: #0a0a0c; color: #fff; font: 400 16px var(--ui); transition: border-color .2s, box-shadow .2s; }
.k-in:focus { outline: none; border-color: var(--ghost); box-shadow: 0 0 0 4px rgba(224,96,63,.16); }
.k-in::placeholder { color: #5f5b55; }
.k-code { height: 64px; text-align: center; font: 700 30px var(--ui); letter-spacing: .5em; padding-left: .5em; }
.k-who { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 15px; background: rgba(255,255,255,.04); font: 400 14px var(--ui); color: var(--body); }
.k-who b { color: #fff; font-weight: 600; }
.k-link { border: 0; background: none; padding: 0; color: #a39d93; font: 500 13px var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.k-link:hover { color: #fff; }
.k-chk { display: flex; gap: 12px; align-items: flex-start; font: 400 13.5px/1.5 var(--ui); color: #a39d93; cursor: pointer; }
.k-chk input { flex: none; appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; border: 1px solid rgba(255,255,255,.2); background: #0a0a0c; display: grid; place-content: center; cursor: pointer; }
.k-chk input:checked { background: var(--ghost); border-color: var(--ghost); }
.k-chk input:checked::after { content: ''; width: 6px; height: 11px; border: solid #160806; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.k-chk a { color: #e4ded3; }
.k-go { position: relative; width: 100%; min-height: 58px; margin-top: 20px; border: 0; border-radius: 17px; cursor: pointer;
  background: linear-gradient(180deg, #f7f2e9, #ddd6ca); color: #0d0a0a; font: 700 18px var(--brat); letter-spacing: -0.03em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 34px -14px rgba(224,96,63,.75); transition: transform .2s var(--ease), opacity .2s; }
.k-go:active { transform: scale(.985); }
.k-go[disabled] { opacity: .5; cursor: default; }
.k-err { min-height: 1.2em; margin-top: 10px; font: 500 14px var(--ui); color: #ff8f78; }
.k-fields { min-height: 180px; }
#kFast[hidden] { display: none; }
.k-or { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; font: 500 13px var(--ui); color: var(--mute); }
.k-or::before, .k-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.k-skel { height: 52px; margin-bottom: 10px; border-radius: 14px; background: linear-gradient(90deg, #121215, #1b1b20, #121215); background-size: 200% 100%; animation: k-sk 1.3s linear infinite; }
@keyframes k-sk { to { background-position: -200% 0; } }
.k-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 18px 0 0; padding: 0; list-style: none; font: 400 12.5px var(--ui); color: var(--mute); }
.k-trust li { display: inline-flex; align-items: center; gap: 6px; }
.k-trust svg { width: 14px; height: 14px; fill: none; stroke: var(--ghost); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.k-done { text-align: center; padding: 20px 0 8px; }
.k-done h3 { font: 700 30px var(--brat); letter-spacing: -0.045em; margin-bottom: 8px; }
.k-done p { color: var(--body); font: 400 15px/1.5 var(--ui); }

@media (prefers-reduced-motion: reduce) {
  .x-reveal, .x-copy.x-reveal > *, .x-rail.x-reveal > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .x-buywrap, .x-coin-lock, .x-hint, .v-run b { animation: none !important; }
}

/* mountain captions: the old line leaves before the new one arrives, so they never sit on top of each other */
.x-mtn-caps { top: clamp(56px, 9vh, 110px); }
.x-mtn-caps p { transition: opacity .18s ease, transform .18s ease; }
.x-mtn-caps p.on { transition: opacity .45s var(--ease) .2s, transform .45s var(--ease) .2s; }
.x-mtn-scene svg { height: 70%; }

/* the sheet's own small text (the page's paragraph style must not reach in here) */
.spx .x-sheet p { margin: 0; font: 400 14px/1.5 var(--ui); letter-spacing: 0; color: var(--body); }
.spx .x-sheet .k-spots { margin: 0 4px 18px; font: 600 13px var(--ui); color: var(--ghost); }
.spx .x-sheet .k-err { min-height: 1.2em; margin-top: 10px; font: 500 14px var(--ui); color: #ff8f78; }
.spx .x-sheet .k-label { font: 500 13px var(--ui); color: #a39d93; }
.spx .x-sheet .k-done p { font-size: 15px; }
.spx .x-sheet .k-renew { margin: 16px 2px 0; font: 400 12.5px/1.5 var(--ui); color: var(--mute); }

/* ================= v2 ================= */
.x-hero { height: 240vh; }
/* the phone opens onto the first lines */
.x-open { position: absolute; inset: 0; z-index: 3; display: grid; align-content: center; justify-items: center; text-align: center; padding: 0 24px; opacity: 0; pointer-events: none; }
.x-open p { max-width: 32em; margin-left: auto; margin-right: auto; }
.x-first { padding-top: clamp(40px, 8vh, 90px); }
.x-viz-tall { aspect-ratio: 4 / 5; max-height: 78vh; }

/* the big lines: shadow first, then lit; the second half in a different voice */
.x-stack { display: grid; justify-items: center; gap: .02em; margin: .55em auto 0; text-align: center; font: 700 clamp(54px, 10vw, 140px)/.9 var(--brat); letter-spacing: -0.065em; color: var(--hi); }
.x-stack > span { display: block; color: rgba(244,238,227,.1); text-shadow: 0 0 0 transparent; transition: color .45s var(--ease), text-shadow .6s var(--ease); }
.x-stack > span.on { color: var(--hi); }
.x-stack > span.alt { font: 700 clamp(60px, 11vw, 156px)/.95 var(--brat); letter-spacing: -0.03em; color: rgba(255,106,61,.12); }
.x-stack > span.alt.on { color: #ff6a3d; text-shadow: 0 0 60px rgba(224,96,63,.45); }

/* the turn: deep space red */
.x-red { max-width: none; position: relative; overflow: hidden; color: var(--hi);
  padding-left: max(24px, calc((100vw - 1180px) / 2)); padding-right: max(24px, calc((100vw - 1180px) / 2));
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,230,220,.7), transparent 60%), radial-gradient(1px 1px at 68% 14%, rgba(255,230,220,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 62%, rgba(255,230,220,.6), transparent 60%), radial-gradient(1px 1px at 33% 78%, rgba(255,230,220,.5), transparent 60%),
    radial-gradient(1px 1px at 52% 40%, rgba(255,230,220,.4), transparent 60%), radial-gradient(1px 1px at 92% 30%, rgba(255,230,220,.5), transparent 60%),
    radial-gradient(60% 55% at 28% 30%, rgba(255,92,56,.34), transparent 70%),
    radial-gradient(55% 60% at 78% 72%, rgba(150,18,46,.55), transparent 70%),
    radial-gradient(90% 50% at 50% 115%, rgba(255,110,70,.42), transparent 60%),
    linear-gradient(165deg, #12020a 0%, #2c0510 38%, #4a0a17 62%, #160308 100%); }
.x-red::after { content: ''; position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: radial-gradient(40% 30% at 50% 50%, rgba(255,120,80,.18), transparent 70%); animation: x-drift 18s ease-in-out infinite alternate; }
@keyframes x-drift { from { transform: translate(-6%, -4%) scale(1); } to { transform: translate(6%, 5%) scale(1.15); } }
.x-red p { color: rgba(255,232,222,.82) !important; position: relative; z-index: 1; }
.x-red .x-stack { position: relative; z-index: 1; }
.x-stack-red > span { color: rgba(255,240,232,.16); }
.x-stack-red > span.on { color: #fff3ec; text-shadow: 0 0 50px rgba(255,120,80,.35); }
.x-stack-red > span.alt { color: rgba(255,200,180,.16); }
.x-stack-red > span.alt.on { color: #ffd9c9; text-shadow: 0 0 60px rgba(255,140,100,.6); }

/* the notes: every "last time" */
.v-notes { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 26px 22px 18px; font-family: var(--ui); background: linear-gradient(180deg, #17161a, #0e0d10); }
.n-head small { display: block; font: 600 14px var(--ui); color: #ffb08a; margin-bottom: 6px; }
.n-head b { display: block; font: 700 clamp(28px, 3.4vw, 36px) var(--ui); letter-spacing: -0.02em; color: #fff; margin-bottom: 14px; }
.n-list { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.n-row { flex-shrink: 0; overflow: hidden; max-height: 0; opacity: 0; border-bottom: 1px solid rgba(255,255,255,.07); padding: 0 2px; }
.n-row b { display: block; padding-top: 11px; font: 600 16px var(--ui); color: #f2eee8; }
.n-row small { display: block; padding: 2px 0 11px; font: 400 13px var(--ui); color: #8d8a85; }
.n-now b { color: #fff; }
.n-now.typing b::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #ffb08a; animation: x-blink 1s steps(1) infinite; }
.n-now small { color: #ffb08a; }
.n-foot { padding-top: 12px; text-align: center; font: 500 12.5px var(--ui); color: #8d8a85; }

/* search: a list of answers coming up from below */
.v-search { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 26px 22px; }
.v-bar { width: 100%; }
.v-results { display: grid; gap: 0; width: 100%; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.v-row { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-top: 1px solid rgba(255,255,255,.05); font: 500 16px var(--ui); color: #e6e1d8; opacity: 0; transition: background .4s, color .4s; }
.v-row:first-child { border-top: 0; }
.v-row i { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); position: relative; }
.v-row i::after { content: ''; position: absolute; width: 2px; height: 6px; right: -3px; bottom: -5px; background: rgba(255,255,255,.4); transform: rotate(-45deg); }
.v-row span { flex: 1; }
.v-row em { font-style: normal; color: var(--mute); }
.v-row.hot { background: linear-gradient(90deg, rgba(224,96,63,.32), rgba(224,96,63,.12)); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--ghost); }
.v-row.hot i, .v-row.hot i::after { border-color: #ffb08a; background-color: transparent; }

/* the streak, pinned */
.x-streak { position: relative; height: 320vh; }
.x-streak-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(70% 50% at 50% 55%, rgba(224,96,63,.08), transparent 70%), var(--black); }
.x-streak-viz { position: absolute; inset: 0; }
.v-sk { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; }
.sk-num { grid-area: 1 / 1; font: 700 clamp(180px, 34vh, 360px)/.8 var(--brat); letter-spacing: -0.08em; color: var(--hi); font-variant-numeric: tabular-nums; }
.sk-zero { color: var(--ghost); opacity: 0; text-shadow: 0 0 80px rgba(224,96,63,.6); }
.sk-lab { margin-top: 2vh; font: 700 clamp(20px, 2.4vw, 28px) var(--brat); letter-spacing: -0.03em; color: var(--body); }
.sk-lab.dead { color: var(--ghost); }
.sk-row { display: flex; gap: 10px; margin-top: 5vh; }
.sk-day { position: relative; width: clamp(40px, 6vw, 64px); aspect-ratio: 3 / 4; border-radius: 12px; border: 1px solid rgba(233,228,217,.18); background: linear-gradient(180deg, #17181e, #0c0d11); }
.sk-day i { position: absolute; inset: -1px; border-radius: 12px; opacity: 0; background: radial-gradient(circle at 50% 35%, rgba(255,178,122,.6), rgba(224,96,63,.25) 50%, transparent 72%); box-shadow: 0 0 0 1px var(--ghost), 0 0 26px var(--ghost-glow); }
.sk-day b { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font: 600 11px var(--ui); color: var(--mute); }
.sk-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(255,90,60,.9), rgba(120,10,20,.6) 50%, transparent 80%); opacity: 0; pointer-events: none; }
.x-streak-caps { position: absolute; left: 0; right: 0; top: clamp(60px, 11vh, 120px); }
.x-streak-caps p { position: absolute; left: 50%; width: min(860px, 88vw); margin: 0; text-align: center; transform: translate(-50%, 12px); opacity: 0;
  font: 700 clamp(30px, 4.4vw, 56px)/1.04 var(--brat) !important; letter-spacing: -0.05em !important; color: var(--hi); transition: opacity .18s ease, transform .18s ease; }
.x-streak-caps p.x-ember { color: var(--ghost) !important; }
.x-streak-caps p.on { opacity: 1; transform: translate(-50%, 0); transition: opacity .45s var(--ease) .2s, transform .45s var(--ease) .2s; }

/* the alarm's snooze: a real key, pressed for him */
.v-key { margin-top: 26px; position: relative; padding: 18px 46px; border-radius: 22px; pointer-events: none; user-select: none; cursor: default;
  background: linear-gradient(180deg, #ff9a6e, #ff6a3d 55%, #d94e27); color: #2a0b04; font: 700 18px var(--ui);
  transform: perspective(500px) rotateX(24deg); transform-origin: 50% 100%;
  box-shadow: 0 1px 0 rgba(255,220,200,.6) inset, 0 7px 0 #8f2d14, 0 8px 0 #5e1b0b, 0 22px 30px -6px rgba(0,0,0,.7), 0 0 40px -6px rgba(255,106,61,.5); transition: transform .08s, box-shadow .08s; }
.v-key.down { transform: perspective(500px) rotateX(24deg) translateY(6px); box-shadow: 0 1px 0 rgba(255,220,200,.6) inset, 0 1px 0 #8f2d14, 0 2px 0 #5e1b0b, 0 10px 18px -6px rgba(0,0,0,.7), 0 0 30px -8px rgba(255,106,61,.5); }
.v-alarm.ring b { animation: x-ring .18s linear infinite; }

/* the other version of you: his card, further away */
.v-recede { position: absolute; inset: 0; perspective: 700px; overflow: hidden; }
.v-floor { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; transform: rotateX(78deg); transform-origin: 50% 100%;
  background: radial-gradient(ellipse 30% 40% at 50% 30%, rgba(255,190,150,.14), transparent 70%), repeating-linear-gradient(90deg, rgba(233,228,217,.16) 0 1px, transparent 1px 60px), repeating-linear-gradient(0deg, rgba(233,228,217,.16) 0 1px, transparent 1px 60px);
  -webkit-mask: linear-gradient(0deg, #000, transparent 85%); mask: linear-gradient(0deg, #000, transparent 85%); }
.v-card { position: absolute; left: 50%; top: 22%; width: min(260px, 70%); margin-left: calc(min(260px, 70%) / -2); padding: 18px 18px 14px; border-radius: 20px; font-family: var(--ui);
  background: linear-gradient(180deg, rgba(40,26,24,.95), rgba(18,12,13,.95)); border: 1px solid rgba(255,190,150,.28); box-shadow: 0 0 60px -10px rgba(255,140,100,.45), 0 30px 60px -20px rgba(0,0,0,.9); }
.c-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.c-hd i { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe2c8, #ff8a5a 60%, #b3261e); box-shadow: 0 0 18px rgba(255,140,100,.7); }
.c-hd b { font: 700 22px var(--brat); letter-spacing: -0.04em; color: #fff; }
.c-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.07); font: 500 14px var(--ui); color: #e6dfd6; }
.c-row em { font-style: normal; color: #ff9a6e; font-weight: 700; }
.v-falls { position: absolute; left: 0; right: 0; bottom: 7%; text-align: center; font: 700 18px var(--brat); color: var(--mute); }
.v-falls span { color: var(--ghost); font-size: 1.4em; }

/* one page a day */
.v-pages { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 24px 22px 18px; font-family: var(--ui); }
.pg-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.pg-head b { font: 700 22px var(--brat); letter-spacing: -0.03em; color: var(--hi); }
.pg-head small { font: 500 13px var(--ui); color: var(--mute); }
.pg-grid { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; align-content: start; }
.pg-cell { aspect-ratio: 1; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); display: grid; place-content: center; text-align: center; opacity: .25; transition: opacity .3s, background .3s, border-color .3s; }
.pg-cell small { font: 500 9px var(--ui); color: var(--mute); }
.pg-cell b { font: 700 clamp(14px, 1.6vw, 19px) var(--brat); color: var(--hi); }
.pg-cell.on { opacity: 1; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.pg-cell.bad.on { background: rgba(224,96,63,.16); border-color: rgba(224,96,63,.5); }
.pg-cell.bad.on b { color: #ff9a6e; }
.pg-foot { display: flex; justify-content: space-between; padding-top: 14px; font: 500 13px var(--ui); color: var(--mute); }
.pg-foot span { color: #ff9a6e; }
.pg-foot b { color: var(--hi); font-weight: 700; }

/* the code, being rewritten */
.x-viz-code { aspect-ratio: auto; min-height: 460px; background: linear-gradient(180deg, #140708, #0b0405); border-color: rgba(224,96,63,.25); box-shadow: 0 50px 90px -50px rgba(0,0,0,.95), 0 0 80px -40px rgba(224,96,63,.5); }
.v-code { position: absolute; inset: 0; display: flex; flex-direction: column; }
.cd-bar { display: flex; align-items: center; gap: 7px; padding: 14px 16px; border-bottom: 1px solid rgba(224,96,63,.18); background: rgba(0,0,0,.25); }
.cd-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a1a1a; }
.cd-bar i:first-child { background: #ff5f4a; }
.cd-bar span { margin-left: 10px; font: 700 13px var(--brat); color: #c9a59b; }
.v-code.done .cd-bar span { color: #ffb08a; }
.cd-body { flex: 1; padding: 16px 0; overflow: hidden; font: 400 clamp(12px, 1.25vw, 14.5px)/1.85 var(--brat); }
.cd-l { display: flex; gap: 14px; padding: 0 16px; white-space: pre; }
.cd-l em { font-style: normal; width: 1.6em; text-align: right; color: rgba(255,170,150,.25); flex: none; }
.cd-l code { font: inherit; color: #e8d5cf; }
.cd-l .c { color: rgba(255,140,110,.45); font-style: italic; }
.cd-l .k { color: #ff6a4d; }
.cd-l .v { color: #ffd2c2; }
.cd-l .p { color: #ff9a7e; }
.cd-l .s { color: #e8b4a6; transition: color .2s; }
.cd-l .s.dead { color: #ff4a3a; text-decoration: line-through; text-decoration-thickness: 2px; opacity: .8; }
.cd-l .n { color: #fff; font-weight: 600; text-shadow: 0 0 12px rgba(255,170,130,.6); }
.cd-l.dead > code > span:not(.c) { color: #ff4a3a; text-decoration: line-through; opacity: .75; }

/* the steps, with the floor rising beside them */
.x-steps-grid { display: grid; grid-template-columns: 110px 1fr; gap: clamp(20px, 4vw, 60px); margin-top: 30px; }
.x-meter { position: sticky; top: 18vh; height: 60vh; display: grid; grid-template-rows: auto auto 1fr; justify-items: center; gap: 6px; }
.m-lab { font: 700 13px var(--brat); color: var(--mute); text-align: center; }
.m-val { font: 700 44px/1 var(--brat); letter-spacing: -0.06em; color: var(--ghost); text-shadow: 0 0 30px rgba(224,96,63,.5); }
.m-track { position: relative; width: 14px; border-radius: 8px; background: rgba(255,255,255,.06); overflow: hidden; }
.m-fill { position: absolute; inset: 0; transform-origin: 50% 100%; transform: scaleY(0); background: linear-gradient(0deg, #8a2233, #ff6a3d 70%, #ffd2b8); box-shadow: 0 0 20px rgba(255,106,61,.6); border-radius: 8px; }
.x-after-step { margin-top: 14px !important; padding: 12px 16px; border-left: 2px solid var(--ghost); background: linear-gradient(90deg, rgba(224,96,63,.12), transparent); color: #f0d6cb !important; font-weight: 700 !important; }
/* on a phone the floor is a bar that stays pinned at the top while he reads the steps */
@media (max-width: 720px) {
  .x-steps-grid { display: block; }
  .x-meter { position: sticky; top: 12px; z-index: 5; height: auto; margin-bottom: 26px; padding: 12px 16px; border-radius: 16px; grid-template-rows: auto; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; justify-items: stretch; gap: 12px;
    background: rgba(5, 5, 6, .88); border: 1px solid rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .m-val { font-size: 30px; }
  .m-track { width: auto; height: 12px; }
  .m-fill { transform-origin: 0 50%; background: linear-gradient(90deg, #8a2233, #ff6a3d 70%, #ffd2b8); }
}

/* the character */
.x-char .x-kicker { font-size: 15px !important; }
.v-char { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 22px; font-family: var(--ui);
  background: radial-gradient(90% 50% at 50% 0%, rgba(224,96,63,.14), transparent 60%), linear-gradient(180deg, #121014, #09080a); }
.ch-head small { display: block; font: 600 12.5px var(--ui); color: #ffb08a; letter-spacing: .02em; }
.ch-head b { display: block; font: 700 30px var(--brat); letter-spacing: -0.045em; color: #fff; }
.ch-av { align-self: center; width: 84px; height: 100px; transition: opacity .3s; }
.ch-av svg { width: 100%; height: 100%; fill: #ffe2d4; filter: drop-shadow(0 0 22px rgba(255,140,100,.7)); }
.ch-fields { display: grid; gap: 0; }
.ch-f { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14px; }
.ch-f small { color: #9d978f; font-size: 13.5px; }
.ch-f b { color: #fff; font-weight: 700; text-align: right; min-height: 1.2em; }
.ch-mem { padding-top: 4px; }
.ch-mh { display: flex; justify-content: space-between; font-size: 13.5px; color: #9d978f; margin-bottom: 8px; }
.ch-mh b { color: #ff9a6e; font-weight: 700; }
.ch-dots { display: grid; grid-template-columns: repeat(21, 1fr); gap: 3px; }
.ch-dots i { height: 10px; border-radius: 3px; background: rgba(255,255,255,.07); transition: background .25s, box-shadow .25s; }
.ch-dots i.on { background: #ff6a3d; box-shadow: 0 0 8px rgba(255,106,61,.7); }
.ch-play { margin-top: auto; align-self: stretch; text-align: center; padding: 15px; border-radius: 16px; font: 700 18px var(--brat); letter-spacing: -0.03em; color: #6b6660;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); transition: all .5s var(--ease); pointer-events: none; }
.ch-play.on { color: #120a0a; background: linear-gradient(180deg, #f7f2e9, #ddd6ca); box-shadow: 0 0 40px -6px rgba(255,140,100,.7); border-color: transparent; }

/* best day, worst day: the small lines under each */
.v-small { fill: #9d978f; font: 500 15px var(--ui); letter-spacing: 0; }
.v-small-hot { fill: #ff9a6e; }

/* the mountain on wide screens: the words on the left, the climb on the right */
@media (min-width: 900px) {
  .x-mtn-caps { top: 50% !important; left: max(36px, 6vw); right: auto; width: min(38vw, 520px); transform: translateY(-50%); height: 40vh; }
  .x-mtn-caps p { left: 0; top: 50%; width: 100%; text-align: left; transform: translate(0, calc(-50% + 12px)); }
  .x-mtn-caps p.on { transform: translate(0, -50%); }
  .x-mtn-scene svg { left: auto; right: -4vw; width: 66vw; height: 86%; }
}
/* the snooze key, bigger and deeper so it reads as a physical key, not a button to tap */
.v-key { margin-top: 30px; padding: 24px 64px 22px; border-radius: 26px; font: 700 21px var(--ui); letter-spacing: -0.01em;
  background: linear-gradient(180deg, #ffb48f 0%, #ff7a4d 38%, #ff6a3d 60%, #d24a24 100%);
  transform: perspective(520px) rotateX(32deg);
  box-shadow: inset 0 2px 0 rgba(255,230,215,.75), inset 0 -3px 6px rgba(120,30,10,.45),
    0 10px 0 #9a3417, 0 12px 0 #6a210d, 0 14px 0 #4a1608, 0 34px 40px -8px rgba(0,0,0,.8), 0 0 60px -10px rgba(255,106,61,.55); }
.v-key.down { transform: perspective(520px) rotateX(32deg) translateY(9px);
  box-shadow: inset 0 2px 0 rgba(255,230,215,.6), inset 0 -2px 4px rgba(120,30,10,.45), 0 2px 0 #9a3417, 0 4px 0 #6a210d, 0 5px 0 #4a1608, 0 14px 20px -8px rgba(0,0,0,.8), 0 0 40px -12px rgba(255,106,61,.5); }
@media (min-width: 900px) {
  .x-mtn-caps { width: min(32vw, 460px) !important; left: max(36px, 5vw) !important; }
  .x-mtn-scene svg { right: -2vw !important; width: 60vw !important; overflow: hidden; }
  .x-mtn-pin::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 42vw; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(5,5,6,.85), rgba(5,5,6,.4) 70%, transparent); }
  .x-mtn-caps { z-index: 2; }
}
@media (min-width: 900px) {
  .x-mtn-scene svg { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
}

/* ================= v3 ================= */
/* the fifth day: the hours and the alarm share a grid of their own; "we both know" sits below it */
.x-timeline { display: block; }
.x-tl-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.x-future .x-rail { max-width: 860px; }
@media (max-width: 820px) { .x-tl-grid { grid-template-columns: 1fr; } }

/* the big lines: a small lead-in, then the hit, with room between them. the second half is the brat type in red */
.x-stack { font: 700 clamp(46px, 8vw, 112px)/1.02 var(--brat); letter-spacing: -0.06em; gap: .06em; max-width: 100%; }
.x-stack > span { line-height: 1.02; }
.x-stack > span.sm { font-size: .42em; letter-spacing: -0.04em; line-height: 1.25; margin-bottom: .1em; }
.x-stack > span.gap { margin-top: .9em; }
.x-stack > span.alt { font: inherit; font-size: 1em; letter-spacing: -0.06em; color: rgba(255,70,52,.1); }
.x-stack > span.alt.sm { font-size: .42em; letter-spacing: -0.04em; }
.x-stack > span.alt.on { color: #ff4636; text-shadow: 0 0 1px rgba(255,90,70,.8), 0 0 22px rgba(255,50,40,.55), 0 0 70px rgba(200,20,30,.35); filter: blur(.3px); }
.x-stack-red > span.alt { color: rgba(255,200,190,.14); }
.x-stack-red > span.alt.on { color: #ffd5c8; text-shadow: 0 0 1px rgba(255,220,210,.9), 0 0 30px rgba(255,90,60,.7); filter: blur(.3px); }

/* the character's figure stays its own size */
.ch-av svg { position: static; inset: auto; width: 100%; height: 100%; }

/* the mountain in the same deep red as the turn */
.x-mtn-pin { background:
  radial-gradient(1px 1px at 12% 22%, rgba(255,230,220,.7), transparent 60%), radial-gradient(1px 1px at 68% 14%, rgba(255,230,220,.55), transparent 60%),
  radial-gradient(1.5px 1.5px at 84% 32%, rgba(255,230,220,.6), transparent 60%), radial-gradient(1px 1px at 33% 9%, rgba(255,230,220,.5), transparent 60%),
  radial-gradient(1px 1px at 52% 26%, rgba(255,230,220,.4), transparent 60%), radial-gradient(1px 1px at 92% 12%, rgba(255,230,220,.5), transparent 60%),
  radial-gradient(60% 55% at 28% 25%, rgba(255,92,56,.30), transparent 70%),
  radial-gradient(55% 60% at 78% 40%, rgba(150,18,46,.50), transparent 70%),
  radial-gradient(90% 50% at 50% 110%, rgba(255,110,70,.30), transparent 60%),
  linear-gradient(170deg, #12020a 0%, #2c0510 40%, #3d0812 70%, #12020a 100%); }
.m-far { fill: #22060c; }
.m-mid { fill: #170409; stroke: rgba(255,170,150,.08); }
.m-main { stroke: rgba(255,210,195,.5); }
#xm-g stop:first-child { stop-color: #3d121a; }
@media (min-width: 900px) {
  .x-mtn-pin::before { background: linear-gradient(90deg, rgba(18,2,9,.75), rgba(18,2,9,.3) 70%, transparent); }
}

/* one page a day: the bar chart */
.v-pages { padding: 24px 22px 18px; }
.pg-chart { position: static !important; flex: 1; width: 100%; height: auto; min-height: 0; }
.pg-base { stroke: rgba(233,228,217,.25); stroke-width: 1.5; }
.pg-axis { fill: var(--mute); font: 600 13px var(--ui) !important; letter-spacing: 0 !important; }
.pg-floor { stroke: var(--ghost); stroke-width: 2; stroke-dasharray: 6 6; }
.pg-floor-t { fill: #ff9a6e; font: 700 16px var(--brat) !important; }
.pg-bar { fill: rgba(233,228,217,.82); }
.pg-bar.bad { fill: #ff6a3d; filter: drop-shadow(0 0 6px rgba(255,106,61,.8)); }
.pg-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; font: 500 13.5px var(--ui); color: var(--mute); }
.pg-foot span { color: #ff9a6e; }
.pg-foot b { color: var(--hi); }

/* the cookie choice: a thin bar stuck to the foot of the screen (64px), full width with 16px gutters. the two buttons
   look the same, so neither answer is pushed. nothing is counted until he says ok (consent.js) */
#consent { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 0 16px env(safe-area-inset-bottom, 0px);
  background: rgba(12,10,12,.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(233,228,217,.12); font-family: var(--ui); }
#consent p { flex: 1; min-width: 0; margin: 0 !important; font: 400 12px/1.35 var(--ui) !important; color: #c9c3b8 !important; }
#consent a { color: #ffb08a; white-space: nowrap; }
#consent .row { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
#consent button { min-height: 40px; padding: 0 12px; border-radius: 999px; font: 600 13px var(--ui); cursor: pointer; border: 1px solid rgba(233,228,217,.3); background: rgba(233,228,217,.06); color: var(--hi); white-space: nowrap; }
#consent button:hover { border-color: var(--hi); }
@media (min-width: 720px) { #consent { justify-content: center; gap: 20px; } #consent p { flex: 0 1 auto; font-size: 13px !important; } }
/* the first screen: the headline and one line over the bottom of the lock screen (top is set by spx.js) */
.x-head { position: absolute; left: 0; right: 0; top: 55%; z-index: 4; padding: 34px 16px 0; text-align: center; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5,4,6,.9) 28px, rgba(5,4,6,.9) 70%, transparent); }
.x-head > * { max-width: 30em; margin-left: auto !important; margin-right: auto !important; }
.spx .x-head .x-head-k { margin: 0 0 6px; font: 700 14px var(--brat); letter-spacing: -0.02em; color: var(--ghost); }
.spx .x-head .x-head-h { margin: 0 0 10px; font: 700 clamp(28px, 7.6vw, 52px)/1.02 var(--brat); letter-spacing: -0.05em; color: var(--hi); text-wrap: balance; }
.spx .x-head .x-head-p { margin: 0; font: 400 clamp(15px, 4vw, 18px)/1.45 var(--ui); color: var(--body); text-wrap: balance; }
.x-hint { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
body:has(.x-sheet:not([hidden])) #consent { visibility: hidden; }
.x-viz[data-viz="pages"] { aspect-ratio: 6 / 5.2; }
.pg-chart { flex: none !important; margin: auto 0; }

/* ================= 19. what's inside: the stairs (js/spx-stairs.js) ================= */
.x-stairs { position: relative; overflow: hidden; padding: clamp(90px, 15vh, 180px) 0 clamp(80px, 13vh, 160px);
  background:
    radial-gradient(ellipse 60% 45% at 28% 78%, rgba(216, 31, 43, .26), transparent 70%),
    radial-gradient(ellipse 55% 40% at 88% 12%, rgba(109, 21, 35, .38), transparent 72%),
    linear-gradient(180deg, var(--black) 0%, #10060a 40%, #0b0507 75%, var(--black) 100%); }
.x-stairs::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(224, 96, 63, .35), transparent); }
.x-stairs-in { max-width: 1180px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.x-stairs-h { max-width: 15ch; margin: .35em 0 .3em !important; font: 700 clamp(40px, 6.2vw, 88px)/.94 var(--brat); letter-spacing: -0.06em; color: var(--hi); text-wrap: balance; }
.x-stairs-sub { max-width: 34em; }
.x-tap { display: none; }
@media (hover: none) { .x-hov { display: none; } .x-tap { display: inline; } }

.x-stairs-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; margin-top: clamp(24px, 5vh, 56px); }
.x-stairs-3d { position: relative; aspect-ratio: 1.12;
  -webkit-mask-image: radial-gradient(ellipse 64% 62% at 46% 50%, #000 48%, transparent 98%); mask-image: radial-gradient(ellipse 64% 62% at 46% 50%, #000 48%, transparent 98%); }
.x-stairs-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--ease); }
.x-stairs-3d.on canvas { opacity: 1; }
.x-stairs-3d.off { display: none; }

/* the buttons are a staircase too: each one a step higher than the last */
.x-stairs-pick { display: flex; align-items: flex-end; gap: 6px; height: 132px; margin-bottom: 26px; }
.x-st { flex: 1; min-width: 0; height: calc(34px + var(--i) * 13px); display: flex; align-items: flex-start; justify-content: center; padding: 9px 0 0; border-radius: 10px 10px 4px 4px;
  border: 1px solid rgba(236, 230, 218, .12); background: rgba(236, 230, 218, .05); color: var(--mute); font: 700 15px/1 var(--brat); letter-spacing: -0.02em; cursor: pointer;
  transition: background .35s var(--ease), border-color .35s, color .35s, box-shadow .35s, transform .25s var(--ease); }
.x-st:hover { border-color: rgba(236, 230, 218, .3); color: var(--hi); }
.x-st:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; }
.x-st.past { background: linear-gradient(180deg, rgba(216, 31, 43, .34), rgba(109, 21, 35, .28)); border-color: rgba(216, 31, 43, .5); color: #f6dcdc; }
.x-st[aria-selected="true"] { background: linear-gradient(180deg, #f4eee3, #d6cdbf); border-color: transparent; color: #0b0b0c; box-shadow: 0 0 34px -6px rgba(224, 96, 63, .75); transform: translateY(-3px); }
.x-st-top b { font-size: 13px; }

/* every panel sits in the same spot, so the page never jumps as the stone climbs */
.x-sps { display: grid; }
.x-sp { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; }
.x-sp.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .16s, transform .45s var(--ease) .16s, visibility 0s; }
.x-sp-n { margin: 0 0 8px !important; font: 700 14px var(--brat) !important; letter-spacing: -0.01em !important; color: var(--ghost) !important; }
.x-sp h3 { margin: 0 0 20px; font: 700 clamp(30px, 3.4vw, 46px)/1 var(--brat); letter-spacing: -0.05em; color: var(--hi); text-wrap: balance; }
.x-sp-now, .x-sp-get { margin: 0 0 14px !important; padding: 16px 18px; border-radius: 18px; font-size: clamp(17px, 1.4vw, 19px) !important; line-height: 1.45 !important; }
.x-sp-now { background: rgba(236, 230, 218, .04); color: var(--mute) !important; }
.x-sp-get { background: linear-gradient(135deg, rgba(216, 31, 43, .2), rgba(109, 21, 35, .14)); border: 1px solid rgba(216, 31, 43, .32); color: var(--hi) !important; }
.x-sp-now span, .x-sp-get span { display: block; margin-bottom: 6px; font: 700 12.5px var(--brat); letter-spacing: 0; color: var(--mute); }
.x-sp-get span { color: #ff8a6a; }
.x-sp-top h3 { background: linear-gradient(90deg, #f4eee3, #ffb4a0); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* what comes with it */
.x-with { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(60px, 10vh, 110px); }
.x-w { position: relative; padding: 26px 24px 28px; border-radius: 24px; border: 1px solid rgba(236, 230, 218, .1);
  background: linear-gradient(165deg, rgba(236, 230, 218, .075), rgba(236, 230, 218, .02) 60%), rgba(12, 8, 10, .6); }
.x-w::before { content: ''; position: absolute; left: 24px; top: 0; width: 34px; height: 2px; border-radius: 2px; background: var(--ghost); }
.x-w h3 { margin: 0 0 10px; font: 700 clamp(22px, 2vw, 26px)/1.05 var(--brat); letter-spacing: -0.045em; color: var(--hi); }
.x-w p { margin: 0 !important; font-size: 16.5px !important; line-height: 1.5 !important; }

.x-stairs-cta { max-width: 760px; margin: clamp(70px, 12vh, 130px) auto 0; text-align: center; }
.x-stairs-cta .x-lead { text-wrap: balance; }

@media (max-width: 1000px) { .x-with { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .x-stairs-grid { grid-template-columns: 1fr; }
  .x-stairs-3d { aspect-ratio: 1.3; margin: 0 -12px; }
  .x-stairs-pick { height: 112px; gap: 5px; }
  .x-st { height: calc(30px + var(--i) * 11px); font-size: 14px; }
}
@media (max-width: 560px) { .x-with { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .x-sp, .x-sp.on, .x-st, .x-stairs-3d canvas { transition: none; } }

/* the reading bar: how close he is to the end of the page, in the brand red */
.x-readbar { position: fixed; left: 0; right: 0; top: 0; z-index: 80; height: 3px; pointer-events: none; background: rgba(255, 255, 255, .04); }
.x-readbar i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #4a0f0c, #93331b 35%, #d81f2b 75%, #ff6a3d); box-shadow: 0 0 14px rgba(216, 31, 43, .55); }

/* scrollbars on theme */
html { scrollbar-color: #4a1820 transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a141a; border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #6b1d27; background-clip: padding-box; }