/* =========================================================
   VISION · Worldbuilders · homepage
   One fixed stage, one camera. Silver is Vision, color is the worlds,
   the galaxy stays behind. Bricolage 700 for display, Inter for the rest.
   ========================================================= */

:root{
  --paper:#FAFAF8; --ink:#0E0E0F; --ink2:#33333a; --grey:#6C6C66; --hair:#E7E6E1;
  --void:#030308; --bg:#0A0A0C; --bg2:#0C0C11; --line:#191920; --tx:#E9E9EE; --dim:#8D8D96;
  --silver:conic-gradient(from 0deg,#e6e9f0,#9aa3b5,#fdfdfd,#6b7280,#cfd6e6,#aab2c4,#fafbff,#7b8497,#e6e9f0);
  --irid:conic-gradient(from 0deg,#e3e9f4,#ff6ec4,#b06bff,#5ad1ff,#cdd6e8,#ffd98a,#ff7a4d,#d3a0ff,#7ad9ff,#e3e9f4);
  --iridLin:linear-gradient(100deg,#eef1f7,#4fd0ff,#cfd6e6,#ff5fb0,#d9dff0,#ffd45f,#c6cdda,#8a5cff,#e9edf5,#ff7a3d,#eef1f7);
  --disp:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --disc:min(84vmin,800px);
  --bar-h:64px;
  --cv:3,3,8;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--void);color-scheme:dark}
body{font-family:var(--body);color:var(--tx);background:var(--void);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fg,#E9E9EE);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* language: the html lang attribute is the source of truth */
html[lang^="fr"] .en{display:none!important}
html[lang^="en"] .fr{display:none!important}

.skip{position:fixed;left:16px;top:-60px;z-index:100;background:#fff;color:#0a0a0a;font:600 13px var(--body);padding:10px 14px;border-radius:999px;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}

/* ---------- theme tokens ---------- */
[data-theme="dark"]{--fg:var(--tx);--fg2:#c8c8d2;--mute:var(--dim);--rule:var(--line);--canvas:var(--void);--field:#0c0c11;--field-b:#26262e}
[data-theme="light"]{--fg:var(--ink);--fg2:var(--ink2);--mute:var(--grey);--rule:var(--hair);--canvas:var(--paper);--field:#fff;--field-b:#d9d8d1}
html:not(.stage-mode) .scene[data-static-theme="dark"]{--fg:var(--tx);--fg2:#c8c8d2;--mute:var(--dim);--rule:var(--line);--canvas:var(--void);--field:#0c0c11;--field-b:#26262e;background:var(--void);color:var(--fg)}
html:not(.stage-mode) .scene[data-static-theme="light"]{--fg:var(--ink);--fg2:var(--ink2);--mute:var(--grey);--rule:var(--hair);--canvas:var(--paper);--field:#fff;--field-b:#d9d8d1;background:var(--paper);color:var(--fg)}

/* ---------- type roles ---------- */
.display,.title,.q,.wm-v,.own-line,.cost-line,.warn-line,.become-line,.step h3,.brand-v,.lk .v{font-family:var(--disp);font-variation-settings:'opsz' 96,'wght' 700;letter-spacing:-.03em;line-height:.98}
.eyebrow{font:600 11.5px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin:0 0 18px}
.title{font-size:clamp(28px,4.2vw,52px);line-height:1.04;letter-spacing:-.025em;color:var(--fg);max-width:20ch;margin:0 0 20px}
.lead{font-size:clamp(17px,1.9vw,21px);line-height:1.55;color:var(--fg);max-width:58ch}
.body{font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.6;color:var(--fg2);max-width:52ch;margin:0 0 26px}
.small{font-size:12.5px;color:var(--mute)}
.eyebrow,.title,.lead,.body,.q,.step,.cost,.own,.bar{transition:color .45s}
.q,.title,.own-line,.cost-line,.cost-turn,.own-sub{text-wrap:balance}

/* ---------- metals ---------- */
@keyframes chmorph{0%,100%{border-radius:46% 54% 60% 40%/52% 44% 56% 48%}50%{border-radius:60% 40% 44% 56%/46% 58% 42% 54%}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinRev{to{transform:rotate(-360deg)}}
@keyframes spinT{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes shim{0%,100%{filter:hue-rotate(0deg) saturate(1.05)}50%{filter:hue-rotate(40deg) saturate(1.3)}}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-5%) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-5%,5%) scale(.9)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(.94)}33%{transform:translate(-4%,-4%) scale(1.12)}66%{transform:translate(4%,3%) scale(1.02)}}
@keyframes nebhue{from{filter:blur(70px) hue-rotate(0deg)}to{filter:blur(70px) hue-rotate(360deg)}}
@keyframes cuepulse{0%,100%{opacity:.35}50%{opacity:1}}

/* the silver disc · the brand book build: conic silver, morphing blob, slow spin,
   counter-rotating spec so the light source stays fixed */
.sdisc{position:absolute;inset:0;overflow:hidden;background:var(--silver);filter:blur(1px);border-radius:46% 54% 60% 40%/52% 44% 56% 48%;animation:chmorph 18s ease-in-out infinite,spin 60s linear infinite;box-shadow:0 40px 130px -22px rgba(150,160,200,.5),0 0 180px -20px rgba(200,210,240,.25)}
.sspec{position:absolute;inset:-25%;pointer-events:none;animation:spinRev 60s linear infinite;
  background:radial-gradient(circle at 50% 48%,rgba(252,252,255,.92),transparent 46%),radial-gradient(circle at 39% 34%,rgba(255,255,255,.7),transparent 26%),radial-gradient(circle at 65% 71%,rgba(18,18,28,.34),transparent 40%)}

/* the worlds, layered, colored, never flat */
.world{position:relative;display:block;border-radius:50%;overflow:hidden;flex:none}
.world .metal{position:absolute;inset:-30%;background:var(--irid);animation:spin 16s linear infinite,shim 9s ease-in-out infinite}
.world .spec{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.92),transparent 32%),radial-gradient(circle at 72% 82%,rgba(0,0,0,.5),transparent 46%)}
.w-a{filter:hue-rotate(0deg) saturate(1.05)}
.w-b{filter:hue-rotate(85deg) saturate(1.1)}
.w-c{filter:hue-rotate(165deg) saturate(1.05)}
.w-d{filter:hue-rotate(250deg) saturate(1.12)}
.w-e{filter:hue-rotate(320deg) saturate(1.18)}
/* small worlds are flat aurora balls: the metal never spins at tiny sizes */
.world.mini{width:34px;height:34px;box-shadow:0 0 0 6px var(--canvas),0 12px 30px -14px rgba(0,0,0,.35)}
.world.mini .metal{animation:none;background:radial-gradient(circle at 34% 30%,#ffd0dd,#ff5f8f 55%,#a32f55)}

/* big worlds use the layered client-world recipe: five-stop radial base,
   slow conic sheen at low opacity, one light source. reads like metal, not paint */
.cworld{position:relative;display:block;border-radius:50%;overflow:hidden;flex:none;
  background:radial-gradient(circle at 34% 30%,var(--c-hi) 0%,var(--c-soft) 36%,var(--c-base) 60%,var(--c-deep) 82%,var(--c-rim) 100%)}
.cworld .csheen{position:absolute;inset:-25%;animation:spin 24s linear infinite;opacity:.42;mix-blend-mode:overlay;filter:blur(14px);
  background:conic-gradient(from 0deg,var(--c-hi),var(--c-base),#fff,var(--c-deep),var(--c-soft),var(--c-base),#fff,var(--c-rim),var(--c-hi))}
.cworld .cspec{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.9),transparent 34%),radial-gradient(circle at 72% 80%,rgba(0,0,0,.42),transparent 48%)}
.cw-teal{--c-hi:#d9f8f1;--c-soft:#6fe0cd;--c-base:#34D8C4;--c-deep:#0f7d72;--c-rim:#093c46}
.cw-rose{--c-hi:#ffd9e4;--c-soft:#ff9ab8;--c-base:#FF6F9C;--c-deep:#b83060;--c-rim:#5c1830}

/* the highlight device: one or two key words in the accent, never a phrase.
   one specific color across the whole site: teal, the first world we show */
.hl{background:linear-gradient(115deg,#8ff3e6,#34D8C4 45%,#0fa38f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
[data-theme="light"] .hl,html:not(.stage-mode) .scene[data-static-theme="light"] .hl{background-image:linear-gradient(115deg,#18b3a0,#0e8c7d 55%,#0a6b60)}
/* the quieter variant: keep the ink, underline in the accent */
.ul{text-decoration:underline;text-decoration-color:#12b8a2;text-decoration-thickness:.075em;text-underline-offset:.14em}

/* mini aurora dots: tiny worlds as accents and bullets */
.adot{display:inline-block;width:11px;height:11px;border-radius:50%;position:relative;flex:none;box-shadow:0 4px 10px -3px rgba(0,0,0,.35)}
.adot::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.75),transparent 46%)}
.adot-teal{background:radial-gradient(circle at 34% 30%,#8ff3e6,#12c8b0 55%,#0a5c63)}
.adot-violet{background:radial-gradient(circle at 34% 30%,#d9c7ff,#8a5cff 55%,#4a2da6)}
.adot-amber{background:radial-gradient(circle at 34% 30%,#ffe0b0,#ff9a3c 55%,#a35e16)}
.adot-rose{background:radial-gradient(circle at 34% 30%,#ffd0dd,#ff5f8f 55%,#a32f55)}
.eyebrow .adot{margin-right:10px;vertical-align:-1.5px}

/* buttons: rounded, one silver per screen */
/* one hover for every button: a calm brighten, no movement. press is a gentle scale. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;cursor:pointer;font:600 15px/1 var(--body);padding:15px 26px;position:relative;overflow:hidden;text-decoration:none;white-space:nowrap;transition:transform .22s var(--ease),box-shadow .3s,filter .22s,background-color .3s,color .3s}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.985)}
.btn-sm{font-size:12.5px;padding:10px 16px}
.btn-solid{background:var(--fg);color:var(--canvas)}
.btn-silver{color:#0a0a0a;font-weight:700;box-shadow:0 8px 24px -12px rgba(150,160,200,.55)}
.btn-silver:hover{box-shadow:0 12px 30px -12px rgba(150,160,200,.75)}
.btn-silver .metal{position:absolute;left:50%;top:50%;width:240%;aspect-ratio:1/1;border-radius:50%;transform:translate(-50%,-50%);background:var(--silver);animation:spinT 14s linear infinite;z-index:0}
.btn-silver:hover .metal{animation-duration:9s}
.btn-silver .gloss{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 52%,rgba(0,0,0,.16))}
.btn-silver .lbl{position:relative;z-index:3;color:#111}
.btn-silver::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent,rgba(255,255,255,.72),transparent);transform:translateX(-190%) skewX(-14deg)}
.btn-silver:hover::after{transform:translateX(340%) skewX(-14deg);transition:transform .72s ease}
.btn.is-busy{pointer-events:none;opacity:.7}

/* ---------- the stage ---------- */
.track{display:none}
.stage{position:relative;min-height:100vh;background:rgb(var(--cv));color:var(--fg)}
.scene{position:relative;padding:calc(var(--bar-h) + 40px) 24px 72px}

html.stage-mode .track{display:block;height:1700vh}
html.stage-mode .stage{position:fixed;inset:0;overflow:hidden;min-height:0}
html.stage-mode .scene{position:absolute;inset:0;padding:var(--bar-h) 24px 24px;display:grid;place-items:center;visibility:hidden;pointer-events:none}
html.stage-mode .scene.on{visibility:visible;pointer-events:auto}
html.stage-mode .scene.on.no-pe{pointer-events:none}
html:not(.stage-mode) .scene{min-height:100svh;display:grid;place-items:center}

/* atmosphere */
.sky,.galaxy,.daylight,.vignette{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sky{z-index:0}
.galaxy{z-index:1}
.daylight{z-index:1;opacity:0}
.vignette{z-index:2;background:radial-gradient(circle at 50% 50%,rgba(3,3,8,0) 34%,rgba(3,3,8,.62) 82%)}
.dust{position:absolute;left:-15%;top:34%;width:130%;height:46vh;transform:rotate(-16deg);filter:blur(34px);
  background:linear-gradient(180deg,rgba(233,233,238,0),rgba(180,186,210,.09) 42%,rgba(225,229,245,.13) 52%,rgba(180,186,210,.09) 62%,rgba(233,233,238,0))}
.neb{position:absolute;border-radius:50%;filter:blur(70px);animation:nebhue 40s linear infinite}
.neb.n1{left:4%;top:4%;width:40vmin;height:40vmin;opacity:.18;background:radial-gradient(circle at 40% 40%,#E11D74,#7A1FA2 70%,transparent)}
.neb.n2{right:2%;bottom:-8%;width:36vmin;height:36vmin;opacity:.15;background:radial-gradient(circle at 45% 40%,#2563EB,#7A1FA2 70%,transparent);animation-delay:-20s}
.neb.n3{left:46%;bottom:14%;width:26vmin;height:26vmin;opacity:.1;background:radial-gradient(circle at 46% 42%,#FFB627,#FF5A3C 56%,#E11D74);animation-delay:-9s}
.orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.11}
.orb.o1{width:56vmin;height:56vmin;left:-12%;top:-18%;background:radial-gradient(circle at 38% 36%,#FF5A3C,#E11D74 56%,#7A1FA2 80%,transparent);animation:drift1 16s ease-in-out infinite}
.orb.o2{width:48vmin;height:48vmin;right:-12%;bottom:-20%;background:radial-gradient(circle at 42% 40%,#A855F7,#7A1FA2 60%,#4F1FB8 80%,transparent);animation:drift2 19s ease-in-out infinite}
.orb.o3{width:32vmin;height:32vmin;left:42%;bottom:-14%;background:radial-gradient(circle at 46% 42%,#FFB627,#FF5A3C 56%,#E11D74 80%,transparent);animation:drift3 17s ease-in-out infinite;opacity:.08}
/* the whisper rule: the veil folds the orbs back into the paper so the words win */
.daylight .veil{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(250,250,248,0) 22%,rgba(250,250,248,.8) 74%)}
html:not(.stage-mode) .sky,html:not(.stage-mode) .galaxy,html:not(.stage-mode) .daylight,html:not(.stage-mode) .vignette{display:none}
html:not(.stage-mode) .scene[data-static-theme="dark"]{background:radial-gradient(circle at 50% 30%,#0c0c14,#030308 70%)}

/* ---------- header ---------- */
.bar{position:absolute;top:0;left:0;right:0;height:var(--bar-h);z-index:50;display:flex;align-items:center;gap:clamp(14px,3vw,36px);padding:0 clamp(16px,3vw,32px);color:var(--fg);
  background:linear-gradient(180deg,rgba(var(--cv),.86),rgba(var(--cv),0))}
html.stage-mode .bar{opacity:0;pointer-events:none}
html.stage-mode .bar.on{opacity:1;pointer-events:auto}
html:not(.stage-mode) .bar{position:sticky;top:0;--fg:var(--tx);--fg2:#c8c8d2;--mute:var(--dim);--canvas:var(--void);background:rgba(3,3,8,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--fg);flex:none}
.brand-txt{display:inline-flex;align-items:baseline;gap:9px}
.bar-disc{width:26px;height:26px;border-radius:50%;position:relative;overflow:hidden;background:var(--silver);align-self:center;box-shadow:0 6px 18px -8px rgba(0,0,0,.5);flex:none}
.bar-disc .sp{position:absolute;inset:0;background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.85),transparent 38%),radial-gradient(circle at 72% 82%,rgba(20,20,30,.4),transparent 46%)}
.brand-v{font-size:17px;letter-spacing:-.035em;line-height:1}
.brand-w{font:600 7.5px/1 var(--body);letter-spacing:.32em;text-transform:uppercase;color:var(--mute);margin-left:1px}
html.stage-mode .brand-v,html.stage-mode .brand-w{opacity:0}
html.stage-mode .bar.landed .brand-v,html.stage-mode .bar.landed .brand-w{opacity:1;transition:opacity .35s}
.nav{display:flex;gap:clamp(14px,2.2vw,28px);margin:0 auto}
.nav a{font:600 12.5px/1 var(--body);letter-spacing:.02em;color:var(--fg2);text-decoration:none;padding:8px 2px;position:relative;opacity:.9;transition:opacity .2s}
.nav a:hover{opacity:1;color:var(--fg)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.bar-right{display:flex;align-items:center;gap:18px;flex:none;margin-left:auto}
.lang{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:3px;gap:2px}
.lang button{border:0;background:none;font:600 11px/1 var(--body);letter-spacing:.08em;padding:6px 10px;border-radius:999px;color:var(--mute);cursor:pointer;transition:background-color .25s,color .25s}
.lang button.on{background:var(--fg);color:var(--canvas)}
.bar-progress{position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;opacity:.28;transform:scaleX(0);transform-origin:left}
html:not(.stage-mode) .bar-progress{display:none}
html:not(.stage-mode) .nav{margin:0 auto}

/* ---------- 1 · hero ---------- */
.s-hero{z-index:20}
.disc-wrap{position:absolute;left:50%;top:50%;width:var(--disc);height:var(--disc);margin:calc(var(--disc) / -2) 0 0 calc(var(--disc) / -2);z-index:1;transform-origin:50% 50%}
html:not(.stage-mode) .disc-wrap{position:relative;left:auto;top:auto;margin:0 auto}
.wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:.36em;text-align:center;pointer-events:none}
.wm-v{display:inline-block;font-size:clamp(64px,11vw,156px);color:#0a0a0a;line-height:.92;letter-spacing:-.035em;transform-origin:50% 50%;will-change:transform}
.wm-w{display:inline-block;font:500 clamp(11px,1.5vw,17px)/1 var(--body);letter-spacing:.46em;text-indent:.46em;text-transform:uppercase;color:#0a0a0a}
html:not(.stage-mode) .s-hero{min-height:100svh;display:grid;place-items:center;padding-top:var(--bar-h)}
html:not(.stage-mode) .wm{position:absolute}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;font:600 10px/1 var(--body);letter-spacing:.26em;color:var(--dim)}
.cue i{display:block;width:1px;height:32px;background:linear-gradient(var(--dim),transparent);animation:cuepulse 2.6s ease-in-out infinite}
html:not(.stage-mode) .cue{display:none}

/* ---------- 10 · the warning · the pattern break before the close ---------- */
.s-warn{z-index:19}
.warn-line{font-size:clamp(46px,8.6vw,132px);line-height:.96;letter-spacing:-.035em;text-align:center;color:#fff;max-width:11ch;margin:0 auto;transform-origin:50% 50%;will-change:transform,filter}

/* ---------- 2 · the question ---------- */
.s-question{z-index:12}
.q{font-size:clamp(38px,7.2vw,104px);line-height:.98;text-align:center;color:var(--fg);max-width:13ch;margin:0 auto;transform-origin:50% 50%;will-change:transform,filter}

/* ---------- 3 · empathy ---------- */
.s-empathy{z-index:13}
.emp-h{font-family:var(--disp);font-variation-settings:'opsz' 96,'wght' 700;letter-spacing:-.025em;font-size:clamp(30px,3.8vw,48px);line-height:1.02;color:var(--fg);margin:0}
.ebar{display:block;width:64px;height:3px;border-radius:3px;background:linear-gradient(90deg,#34D8C4,#0fa38f);margin:18px 0 20px}
.empathy-copy .lead{font-size:clamp(16.5px,1.6vw,19px);color:var(--fg);margin-bottom:14px}
.empathy-copy .body{max-width:54ch}
.empathy{display:grid;grid-template-columns:auto minmax(0,54ch);gap:clamp(28px,5vw,80px);align-items:center;max-width:min(1080px,100%);justify-content:center}
.portraits{--pw:clamp(88px,min(14vw,20vh),200px);display:grid;grid-template-columns:repeat(2,var(--pw));gap:clamp(10px,1.4vw,18px);align-items:start}
.pt{width:var(--pw);aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#dedcd5;box-shadow:0 30px 60px -30px rgba(0,0,0,.35);will-change:transform;margin:0}
.pt img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.pt2,.pt4{margin-top:clamp(18px,4vh,44px)}
.empathy-copy{max-width:56ch}
html.stage-mode .empathy-copy,html.stage-mode .pt{transform-origin:50% 50%}

/* ---------- 4 · the answer ---------- */
.s-answer{z-index:14}
.answer{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,72px);align-items:center;width:min(1120px,100%)}
.answer-copy .title{font-size:clamp(26px,3.4vw,44px);max-width:22ch;margin-bottom:18px}
.a-villain{font-family:var(--disp);font-variation-settings:'opsz' 96,'wght' 700;letter-spacing:-.015em;font-size:clamp(16px,1.5vw,19px);line-height:1.3;color:var(--fg2);max-width:34ch;margin:0 0 12px}
.a-def{font-family:var(--disp);font-variation-settings:'opsz' 96,'wght' 700;letter-spacing:-.015em;font-size:clamp(17px,1.7vw,21px);line-height:1.3;color:var(--fg);max-width:34ch;margin:0 0 16px}
.mwl{list-style:none;display:grid;gap:11px;margin:0 0 26px;padding:0}
.mwl li{display:flex;align-items:flex-start;gap:12px;font-size:clamp(14px,1.15vw,15.5px);line-height:1.5;color:var(--fg2);max-width:46ch}
.mwl .adot{margin-top:5px}
.answer-viz{position:relative;height:min(50vmin,460px);display:grid;place-items:center}
.world-answer{width:min(38vmin,360px);height:min(38vmin,360px);box-shadow:0 46px 100px -34px rgba(0,0,0,.5);will-change:transform,filter,opacity}
.frags{position:absolute;inset:0;pointer-events:none;overflow:visible}
.frag{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:3px;background:#b9b8b1;will-change:transform,opacity}
html:not(.stage-mode) .frags{display:none}

/* ---------- 5 · three steps ---------- */
.s-plan{z-index:15}
.plan{width:min(1080px,100%);position:relative}
.plan-head{text-align:center;margin-bottom:clamp(28px,5vh,56px)}
.plan-head .title{margin:0 auto}
.steps-wrap{position:relative}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);position:relative;z-index:2}
.step{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:0 4px}
.step-n{font-family:var(--disp);font-variation-settings:'opsz' 96,'wght' 700;font-size:clamp(28px,3vw,42px);letter-spacing:-.03em;line-height:1;color:var(--fg)}
.step h3{font-size:clamp(21px,2.2vw,28px);letter-spacing:-.02em;line-height:1.05;color:var(--fg);margin-top:6px}
.step p{font-size:clamp(14.5px,1.15vw,16px);line-height:1.55;color:var(--fg2);max-width:34ch}
.steps-line{position:absolute;left:4px;right:4px;top:calc(clamp(28px,3vw,42px) + 14px + 17px);height:1px;background:var(--rule);transform:scaleX(0);transform-origin:left;z-index:1}

/* ---------- 6 · the stakes ---------- */
.s-cost{z-index:16}
.cost{text-align:center;max-width:920px}
.cost .eyebrow{margin-bottom:22px}
.cost-line{font-size:clamp(24px,3.4vw,46px);line-height:1.12;letter-spacing:-.025em;color:var(--fg);max-width:26ch;margin:0 auto}
/* a row of identical grey worlds: one of many, none of them chosen */
.cost-viz{display:flex;justify-content:center;gap:clamp(12px,1.8vw,20px);margin:clamp(24px,4vh,40px) auto 0;will-change:transform,opacity}
.gball{width:clamp(18px,2.2vw,26px);height:clamp(18px,2.2vw,26px);border-radius:50%;position:relative;
  background:radial-gradient(circle at 34% 30%,#e8e7e2,#bdbcb5 55%,#8f8e88);box-shadow:0 10px 22px -10px rgba(0,0,0,.4)}
.gball::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.7),transparent 44%)}
.fade-word{color:var(--mute)}
.cost-turn{margin:clamp(24px,4vh,44px) auto 0;font-size:clamp(30px,5.2vw,74px);color:var(--fg)}

/* ---------- 7 · the change · who you become ---------- */
.s-become{z-index:17}
.become{text-align:center;max-width:980px}
.become-line{font-size:clamp(30px,5.4vw,80px);line-height:1.0;letter-spacing:-.03em;color:#fff;max-width:17ch;margin:0 auto;transform-origin:50% 50%;will-change:transform,filter}
.become-sub{margin:clamp(22px,4vh,40px) auto 0;font-size:clamp(24px,3.6vw,50px);font-variation-settings:'opsz' 96,'wght' 700;letter-spacing:-.025em;line-height:1.06;color:#fff;max-width:21ch}
.become-sub .l1{display:block;font-size:.52em;font-variation-settings:'opsz' 96,'wght' 600;letter-spacing:-.015em;color:#a9a9b3;margin-bottom:.55em}

/* ---------- 8 · the example ---------- */
.s-example{z-index:18}
.example{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,72px);align-items:center;width:min(1120px,100%)}
.example{grid-template-columns:auto minmax(0,1fr)}
.example-card{max-width:520px}
.example-card .title{font-size:clamp(28px,3.8vw,48px);max-width:18ch}
.world-far{position:relative;width:min(46vmin,440px);height:min(46vmin,440px);display:grid;place-items:center;transform-origin:50% 50%;will-change:transform}
.world-example{width:100%;height:100%;box-shadow:0 60px 140px -40px rgba(0,0,0,.7)}
.bloom{position:absolute;left:50%;top:50%;width:220%;height:220%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,170,215,.55) 0%,rgba(255,120,190,.22) 26%,rgba(255,120,190,0) 60%);opacity:.3}
.mini-form{margin-top:4px}
.mini-row{display:flex;gap:10px;flex-wrap:wrap}
.mini-row input{flex:1 1 220px;min-width:0;height:50px;border-radius:999px;border:1px solid var(--field-b);background:var(--field);color:var(--fg);padding:0 20px;font:500 15px var(--body);outline:none;transition:border-color .2s}
.mini-row input:focus{border-color:var(--fg)}
.mini-row input::placeholder{color:var(--mute)}
.form-note{font-size:13px;color:var(--mute);margin-top:12px}
.form-note.ok,.form-note.err{display:none;color:var(--fg)}
form.is-sent .form-note.ok{display:block}
form.is-sent .mini-row,form.is-sent .form-note.small,form.is-sent .frow,form.is-sent .field,form.is-sent .fsend .btn{display:none}
form.is-failed .form-note.err{display:block}

/* ---------- 11 · own a world ---------- */
.s-own{z-index:20}
.own{position:relative;text-align:center;display:grid;place-items:center;width:100%}
.own-disc{position:absolute;left:50%;top:50%;width:min(78vmin,760px);height:min(78vmin,760px);transform:translate(-50%,-50%);opacity:.28;pointer-events:none;z-index:0}
.own-disc .sdisc{box-shadow:none}
.own-disc::after{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 50% 50%,rgba(3,3,8,.35),rgba(3,3,8,.1) 55%,rgba(3,3,8,0))}
.own-line{position:relative;z-index:2;font-size:clamp(52px,10.5vw,150px);line-height:.94;color:#fff;letter-spacing:-.04em;max-width:10ch;transform-origin:50% 50%;will-change:transform,filter}
.own-sub{position:relative;z-index:2;margin-top:clamp(18px,3vh,30px);font-size:clamp(18px,2.4vw,28px);font-variation-settings:'opsz' 96,'wght' 600;letter-spacing:-.015em;color:#c8c8d2}
.own-cta{position:relative;z-index:2;margin-top:clamp(24px,4vh,40px)}

/* ---------- 11 · the form ---------- */
.s-form{z-index:21}
.formwrap{width:min(92vw,600px);max-height:calc(100vh - var(--bar-h) - 16px);overflow:auto;overscroll-behavior:contain;padding:6px;-webkit-overflow-scrolling:touch}
.formcard{background:rgba(12,12,17,.72);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3.4vw,38px);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.formcard .title{font-size:clamp(26px,3.4vw,40px);margin-bottom:24px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font:600 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.field input,.field textarea{width:100%;background:var(--field);border:1px solid var(--field-b);border-radius:12px;color:var(--fg);padding:12px 14px;font:500 15px/1.4 var(--body);outline:none;transition:border-color .2s;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--fg)}
.fsend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.fsend .form-note{margin:0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 8px 8px;color:var(--mute);font-size:12.5px}
.lk{display:inline-flex;align-items:baseline;gap:.55em}
.lk .v{font-size:18px;color:#fff;letter-spacing:-.02em}
.lk .w{font:500 8px/1 var(--body);letter-spacing:.42em;text-transform:uppercase;color:var(--dim)}
.foot a{color:var(--mute);text-decoration:none;text-underline-offset:3px}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .sep{opacity:.5;margin:0 4px}

/* ---------- static layout niceties ---------- */
html:not(.stage-mode) .s-question .q,html:not(.stage-mode) .own-line{opacity:1}
html:not(.stage-mode) .steps-line{transform:none}
html:not(.stage-mode) .formwrap{max-height:none;overflow:visible}
html:not(.stage-mode) .own-disc{opacity:.32}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav{display:none}
}
@media (max-width:820px){
  :root{--bar-h:58px;--disc:min(88vw,58vh)}
  .step .step-n{min-width:2.2ch}
  .brand-w{display:none}
  .empathy{grid-template-columns:1fr;gap:clamp(18px,3vh,30px);justify-items:center;text-align:center}
  .portraits{--pw:clamp(64px,20vw,110px);grid-template-columns:repeat(4,var(--pw));gap:10px}
  .pt2,.pt4{margin-top:clamp(10px,2vh,18px)}
  .empathy-copy{max-width:60ch}
  .empathy-copy .lead{font-size:clamp(15.5px,4.3vw,19px)}
  .answer{grid-template-columns:1fr;gap:clamp(14px,3vh,28px)}
  .answer-viz{order:-1;height:min(30vmin,220px)}
  .world-answer{width:min(28vmin,220px);height:min(28vmin,220px)}
  .answer-copy .title{font-size:clamp(23px,6vw,34px)}
  .answer-copy .body{font-size:15px;margin-bottom:18px}
  .steps{grid-template-columns:1fr;gap:clamp(12px,2.4vh,22px)}
  .step{display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:4px;align-items:center}
  .step .step-n{grid-row:1/3;font-size:26px}
  .step .world.mini{grid-row:1/3;width:30px;height:30px}
  .step h3{margin:0;font-size:20px}
  .step p{grid-column:3;font-size:14px}
  .steps-line{display:none}
  .plan-head{margin-bottom:clamp(16px,3vh,28px)}
  .example{grid-template-columns:1fr;gap:clamp(12px,3vh,26px);justify-items:center}
  .world-far{width:min(34vmin,240px);height:min(34vmin,240px)}
  .example-card{text-align:center}
  .example-card .title{margin-left:auto;margin-right:auto}
  .example-card .body{margin-left:auto;margin-right:auto}
  .mini-row{justify-content:center}
  .frow{grid-template-columns:1fr}
  .cost-line{font-size:clamp(22px,5.6vw,34px)}
  .cost-turn{font-size:clamp(28px,8vw,48px)}
}
@media (max-width:480px){
  .bar-right .btn-sm{padding:9px 13px;font-size:12px}
  .lang button{padding:6px 8px}
  .portraits{--pw:clamp(58px,19vw,90px)}
  .wm-w{font-size:10px}
  .q{font-size:clamp(34px,10.5vw,52px)}
  .warn-line{font-size:clamp(38px,12vw,56px)}
  .become-line{font-size:clamp(30px,9vw,44px)}
}
@media (max-height:640px) and (min-width:821px){
  .portraits{--pw:clamp(80px,16vh,150px)}
  .answer-viz{height:min(44vmin,320px)}
  .world-answer{width:min(32vmin,280px);height:min(32vmin,280px)}
  .world-far{width:min(40vmin,340px);height:min(40vmin,340px)}
}

/* ---------- motion budget ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}