/* Papcorns 2026 · built from Figma "Papcorns Web · Final v2" */
@font-face{font-family:"Bomstad Display";src:url(fonts/BomstadDisplay-Medium.otf) format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"Biotif";src:url(fonts/Biotif-Book.otf) format("opentype");font-weight:400;font-display:swap}

:root{
  --blue:#0051ED;--lime:#8EFF1E;--lilac:#C6B5F5;
  --bg:#F5F5F7;--card:#FFFFFF;--soft:#F0F0F3;--ink:#000;--mute:#6E6E73;--line:#E3E3E8;--faint:#C7C7CC;
  --accent:var(--blue);--shadow:0 7px 21px rgba(0,0,0,.06);
  --ease:cubic-bezier(.22,.61,.24,1);--out:cubic-bezier(.16,1,.3,1);
  --r-w:40px;--r-c:28px;
  --amb:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MTYgNTAwIj48cGF0aCBkPSJNNDE1LjM0OSAxMDYuMDAzQzQxNS4zNDkgMTA3LjU4OCA0MTUuMzExIDEwOS4xNTUgNDE1LjI1NCAxMTAuNzIyQzQxMy4xNTIgMTYzLjQxNyAzNjguNDQzIDIwNC40MzggMzE1LjY5MSAyMDQuNTUzQzMwOC40MTEgMjA0LjU1MyAyOTQuNTk3IDIwNC42MSAyOTAuMjc5IDIwNC42MjlIMjg0LjI5OUMyNzguNzU4IDIwNC42NjcgMjczLjQyOCAyMDUuNzU2IDI2OC42MTMgMjA3Ljc2M0MyNjcuODI5IDIwOC4wNjggMjY3LjA4NCAyMDguNDEyIDI2Ni4zNTggMjA4Ljc1NkMyNDYuOTA4IDIxOC4wOTkgMjQwLjgxMyAyNDIuOTk1IDI1Mi42OTcgMjYxLjAxMkMyNTQuNTg5IDI2My44NzggMjU2LjM2NiAyNjYuNzA1IDI1Ny42NDYgMjY4Ljk3OUMyNTguNjM5IDI3MC4yNzggMjY0LjgxMSAyNzkuMTgyIDI2Ni43MjEgMjgyLjQzQzI3OS41OCAzMDMuOTI1IDI4Ni44OTggMzI5LjA2OCAyODYuODc4IDM1NS45NTFDMjg2Ljc4MyA0MzIuNTEgMjI1LjQzMyA0OTYuMjI5IDE0OC45NSA0OTkuMDk1QzUyLjI1MzMgNTAyLjc0NSAtMjQuMzA1NiA0MTAuNDk5IDcuMTgxNTYgMzA5LjYxOEMxOS45ODI4IDI2OC41OTcgNTEuNjYxIDIzNS43OTIgOTIuMTQ3MiAyMjEuMzg1Qzk5LjU3OTYgMjE4Ljc0OSAxMDYuNzY0IDIxNi44MzggMTE0LjExOSAyMTUuMzg2QzEyNS45ODQgMjEzLjAzNiAxMzguMDk4IDIxMi4wNDIgMTUwLjE5MiAyMTIuMDA0TDIwNC40NzMgMjExLjc5NEMyMTQuMzMyIDIxMS43NTYgMjIzLjI1NSAyMDcuNzA1IDIyOS43MzIgMjAxLjE3MUMyMzYuODM5IDE5NC4wNDQgMjQwLjkyOCAxODMuOTM3IDI0MC4wMyAxNzMuMDI3QzIzOC40ODIgMTU0LjIwOCAyMjIuMDMyIDE0MC4xMDcgMjAzLjEzNiAxNDAuMTg0TDEwMi43NyAxNDAuMzk0QzY0Ljg2MzQgMTQwLjU0NyAzNC4wMDY4IDEwOS45MTkgMzMuODUzOSA3Mi4wMTI0VjY5LjcwMDZDMzMuNzAxMSAzMS43OTM3IDY0LjMwOTMgMC45MzcwNDIgMTAyLjIzNSAwLjc4NDE5MUwzMDUuNjQxIDAuMDAwODI2NTU4QzMwNi41OTYgMC4wMDA4MjY1NTggMzA3LjUxMyAwLjAwMDgyNjU1OCAzMDguNDQ5IDAuMDAwODI2NTU4QzM2Ny4yMiAtMC4yMjg0NDkgNDE1LjA2MyA0Ny4yNjk4IDQxNS4yOTIgMTA2LjAyMkw0MTUuMzQ5IDEwNi4wMDNaIi8+PC9zdmc+");
}
[data-theme="dark"]{--bg:#000;--card:#141414;--soft:#1C1C1E;--ink:#fff;--mute:#8A8A8E;--line:#2A2A2C;--faint:#3A3A3C;--accent:var(--lilac);--shadow:none}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:400 16px/1.5 "Biotif",-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background-color .6s var(--ease),color .6s var(--ease)}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
.d{font-family:"Bomstad Display",sans-serif;font-weight:500;letter-spacing:0;line-height:1.05}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
section{padding-top:140px}
.shead{text-align:center;margin-bottom:56px}
.shead h2{font-size:clamp(40px,6.1vw,88px)}
.shead p{margin:18px auto 0;max-width:640px;font-size:clamp(15px,1.4vw,20px);color:var(--mute)}
.shead.left{text-align:left}.shead.left p{margin-left:0}
.link{color:var(--accent);font-size:14px}
.chip{display:inline-flex;align-items:center;height:36px;padding:0 18px;border-radius:18px;background:var(--card);font-size:13px}
.btn{display:inline-flex;align-items:center;height:52px;padding:0 26px;border-radius:26px;font-size:15px;transition:transform .2s var(--ease)}
.btn:active{transform:scale(.97)}
.btn.sm{height:40px;padding:0 20px;font-size:13px}
.btn.p{background:var(--ink);color:var(--bg)}
.btn.w{background:#fff;color:#000}.btn.g{background:#2A2A2C;color:#fff}
.pill{position:absolute;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:11px;font-size:11px;white-space:nowrap;background:rgba(0,0,0,.45);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);left:10px;top:10px}
.pill.w{background:#fff;color:#000}.pill.r{left:auto;right:10px}.pill.bl{top:auto;bottom:10px}.pill.tl{left:14px;top:14px}
.pill.ic{height:32px;padding:0 12px 0 4px;border-radius:16px;font-size:12px}.pill.ic .ico{width:24px;height:24px;border-radius:6px}
.pill.chip,.pill.lime{position:static;background:var(--soft);color:var(--ink);height:28px;padding:0 12px;border-radius:14px;font-size:12px;-webkit-backdrop-filter:none;backdrop-filter:none}
.pill.lime{background:var(--lime);color:#000}
.pill.chip,.pill.lime{align-self:flex-start}
.ico{width:44px;height:44px;border-radius:22.5%;flex:none}

/* ---------- opening: a short, soft sequence instead of everything at once ---------- */
@keyframes inUp{from{opacity:0;translate:0 22px}}
@keyframes inFade{from{opacity:0}}
@keyframes inGlass{from{scale:.88;rotate:-8deg}}
.js .hero .wm,.js .phero .word{animation:inUp 1.1s var(--out) .15s both}
.js .hero .gm{animation:inGlass 1.6s var(--out) .3s both}
.js .hero .gm>*{animation:inFade 1.1s var(--ease) .3s both}
.js .hero .chip{animation:inUp 1s var(--out) .6s both}
.js .hero h1{animation:inUp 1s var(--out) .75s both}
.js .dock,.js .toast{animation:inUp 1s var(--out) .95s both}
.js .theme,.js .cwm,.js .hint{animation:inFade .9s var(--ease) 1s both}

/* ---------- scroll motion: small, eased (values set in site.js) ---------- */
[data-p]{translate:0 calc(var(--p,0) * var(--pd,-28px))}
.bento>.w .bgi,.bento>.w figure>img,.stat{will-change:transform}
.bento>.w .bgi,.aiv figure>img,.refix figure>img{transform:scale(1.06) translateY(calc(var(--p,0) * -10px))}

/* ---------- reveals: once, soft ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--out),transform 1.3s var(--out)}
.js .rv.in{opacity:1;transform:none}
.snap,.snap *{transition:none!important}

/* ---------- glass amblem (Figma "glass body" + "chrome rim", in code) ---------- */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.gm{position:absolute;aspect-ratio:416/500;pointer-events:none;container-type:size;transform:perspective(1200px) translate3d(var(--gx,0px),var(--gy,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.gm>*{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.g-blur{-webkit-mask:var(--amb) center/100% 100% no-repeat;mask:var(--amb) center/100% 100% no-repeat;-webkit-backdrop-filter:blur(2.4cqh);backdrop-filter:blur(2.4cqh)}
.g-d{display:none}
[data-theme="dark"] .g-l{display:none}[data-theme="dark"] .g-d{display:inline}
[data-theme="dark"] .g-blur{-webkit-backdrop-filter:blur(2cqh);backdrop-filter:blur(2cqh)}
[data-theme="dark"] .g-home .g-blur{-webkit-backdrop-filter:blur(1.54cqh);backdrop-filter:blur(1.54cqh)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;padding:0;overflow:hidden}
.hero .inner{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:90px;text-align:center}
.lockup{position:relative;width:min(52vw,750px);aspect-ratio:1100/500}
.lockup .wm{position:absolute;left:0;top:29.8%;width:100%;height:40.4%;fill:var(--ink);transition:fill .6s}
.lockup .gm{left:31.1%;top:0;height:100%}
.hero .chip{margin-top:44px}
.hero h1{margin-top:24px;font-size:clamp(26px,3.2vw,46px);padding:0 20px}
.hero h1 em{font-style:normal;color:var(--accent)}
.phero{--ws:clamp(72px,11.5vw,165px)}
.phero .pw{position:relative;display:inline-block;margin-top:calc(var(--ws)*.43)}
.phero .word{display:block;font-size:var(--ws);line-height:1;letter-spacing:0;color:var(--ink)}
.phero .gm{height:calc(var(--ws)*2.06);left:calc(50% - var(--ws)*.771);top:calc(var(--ws)*-.43)}
.phero .pw+.chip{margin-top:calc(var(--ws)*.72 + 24px)}
.phero h1 .wmi{display:inline-block;height:.844em;width:auto;vertical-align:-.184em;fill:currentColor}
/* a quiet liquid trail behind the hero, following the pointer */
.liquid{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;filter:blur(26px);opacity:0;transition:opacity 1.2s var(--ease)}
.hero.on .liquid{opacity:1}
.hero .inner{position:relative;z-index:1}

/* content fades out under the fixed top controls instead of colliding with them */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:92px;z-index:58;pointer-events:none;background:linear-gradient(var(--bg) 30%,color-mix(in srgb,var(--bg) 70%,transparent) 60%,transparent);transition:background .6s var(--ease)}
/* ---------- fixed chrome ---------- */
.theme{position:fixed;left:32px;top:24px;z-index:60;width:44px;height:44px;border-radius:22px;display:grid;place-items:center;background:rgba(0,0,0,.05);border:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .4s var(--ease),background .4s}
.theme:hover{transform:rotate(-15deg)}
.theme svg{width:20px;height:20px}
.theme .moon{fill:#000}.theme .sun{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;display:none}
[data-theme="dark"] .theme{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
[data-theme="dark"] .theme .moon{display:none}[data-theme="dark"] .theme .sun{display:block}
.cwm{position:fixed;right:32px;top:34px;z-index:60;width:110px}.cwm svg{width:100%;fill:var(--ink);transition:fill .6s}
.hint{position:fixed;right:40px;bottom:36px;z-index:55;width:22px;height:34px;border:1.5px solid var(--mute);border-radius:11px;opacity:.8;transition:opacity .5s}
.hint i{position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--mute);animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(9px)}}
.hint.end{opacity:0}
/* tabbar: Figma "Dock tabbar" — glass (refraction .7, depth 24, dispersion .25, light −45°), blur 24, white 55% */
.dock{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;height:72px;padding:6px;border-radius:24px;display:flex;align-items:center;gap:4px;isolation:isolate;
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px) saturate(1.8);backdrop-filter:blur(12px) saturate(1.8);
  box-shadow:0 16px 40px rgba(0,0,0,.12),inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(255,255,255,.35),inset 0 0 18px rgba(255,255,255,.35)}
.lg .dock{background:rgba(255,255,255,.42);-webkit-backdrop-filter:url(#dockglass) saturate(1.7);backdrop-filter:url(#dockglass) saturate(1.7)}
.dock::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:linear-gradient(135deg,#fff,rgba(255,255,255,.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.dock::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.55),transparent 55%);opacity:.8;mix-blend-mode:soft-light}
.dock a{position:relative;z-index:1;height:58px;padding:0 20px;display:inline-flex;align-items:center;border-radius:18px;font-size:16px;color:rgba(0,0,0,.8);transition:background .35s var(--ease),color .35s var(--ease)}
.dock a:hover{background:rgba(0,0,0,.05)}
.dock a[aria-current]{background:#000;color:#fff}
.dock .home{width:92px;height:60px;border-radius:20px;justify-content:center;padding:0}
.dock .home svg{width:25px;height:30px;fill:currentColor}
[data-theme="dark"] .dock{background:rgba(255,255,255,.1);box-shadow:0 16px 40px rgba(0,0,0,.12),inset 1px 1px 0 rgba(255,255,255,.22),inset 0 0 18px rgba(255,255,255,.06)}
[data-theme="dark"].lg .dock{background:rgba(255,255,255,.08)}
[data-theme="dark"] .dock::before{background:rgba(255,255,255,.18);padding:1px}
[data-theme="dark"] .dock::after{opacity:.25}
[data-theme="dark"] .dock a{color:rgba(255,255,255,.85)}[data-theme="dark"] .dock a:hover{background:rgba(255,255,255,.08)}
[data-theme="dark"] .dock a[aria-current]{background:#fff;color:#000}
.toast{position:fixed;left:50%;bottom:106px;transform:translateX(-50%);z-index:59;width:min(390px,calc(100% - 24px));min-height:64px;border-radius:24px;background:var(--card);box-shadow:0 12px 32px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 20px;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.toast p{font-size:14px;line-height:1.35}.toast small{display:block;font-size:12px;color:var(--mute)}
.toast button{height:36px;padding:0 16px;border-radius:18px;background:var(--ink);color:var(--bg);font-size:13px;flex:none}
.toast.gone{opacity:0;transform:translate(-50%,16px);pointer-events:none}

/* ---------- numbers ---------- */
.nums .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{position:relative;overflow:hidden;background:var(--card);border-radius:var(--r-c);padding:34px 28px 30px;box-shadow:var(--shadow)}
.stat::after{content:"";position:absolute;right:-18%;bottom:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:var(--c);opacity:.22;filter:blur(40px)}
.stat b{display:block;font:500 clamp(40px,5vw,72px)/1 "Bomstad Display"}
.stat span{display:block;margin-top:14px;font-size:15px;color:var(--mute)}
.nums .note{margin-top:28px;text-align:center;font-size:13px;color:var(--mute)}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:285px;gap:20px}
.bento>.w{position:relative;overflow:hidden;background:var(--card);border-radius:var(--r-w);box-shadow:var(--shadow);transition:transform .6s var(--out),box-shadow .6s var(--out)}
.bento>.w:hover{transform:translateY(-4px)}
.bento>.w.k{background:#000;color:#fff}
.bento>.w .hd{display:flex;align-items:center;gap:12px;padding:26px 26px 0}
.bento>.w .hd b{display:block;font:500 17px/1.2 "Bomstad Display"}.bento>.w .hd small{display:block;font-size:13px;color:var(--mute)}
.bento>.w.k .hd small,.w.k small.k{color:#A1A1A6}
.aiv{grid-column:1/3;grid-row:1/3}
.aiv-g{position:absolute;left:26px;right:26px;top:96px;bottom:26px;display:grid;grid-template-columns:44% 1fr;gap:20px}
.aiv figure{position:relative;border-radius:22px;overflow:hidden}
.aiv figure img{width:100%;height:100%;object-fit:cover}
.aiv .col{display:flex;flex-direction:column}
.aiv .fan{aspect-ratio:16/9}
.aiv .play{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.aiv .play::before{content:"";position:absolute;left:15px;top:12.5px;border-left:12px solid #000;border-block:7.5px solid transparent}
.aiv .bar{position:absolute;left:12px;right:12px;bottom:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.aiv .bar i{position:absolute;inset:0;background:#fff;transform-origin:left;animation:prog 7s linear infinite}
@keyframes prog{0%{transform:scaleX(0)}90%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.aiv .duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.aiv .duo figure{aspect-ratio:3/4;border-radius:18px}
.aiv h3{margin-top:16px;font-size:clamp(22px,2.2vw,30px)}.aiv p{margin-top:4px;font-size:15px;color:var(--mute)}
.hair{grid-column:3/5}
.hair .looks{position:absolute;left:26px;right:26px;top:92px;bottom:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hair figure{position:relative;border-radius:20px;overflow:hidden;background:var(--soft)}
.hair figure img{width:100%;height:100%;object-fit:cover}
/* the frame line sits above the photo so the rounded corners always read, even on light backgrounds */
.hair figure::after,.lk3 .lk::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:box-shadow .6s var(--ease)}
.hair figure.on::after{box-shadow:inset 0 0 0 3px var(--blue)}
[data-theme="dark"] .hair figure::after,[data-theme="dark"] .lk3 .lk::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
[data-theme="dark"] .hair figure.on::after{box-shadow:inset 0 0 0 3px var(--accent)}
.pl{grid-column:3}.casa{grid-column:4}
.pl small.k{display:block;padding:0 26px;font-size:13px;color:var(--mute)}.pl small.k:first-of-type{margin-top:22px}
.pl .n{display:block;padding:0 26px;font-size:64px;line-height:1.05}
.pl .track{position:absolute;left:26px;right:26px;bottom:50px;height:8px;border-radius:4px;background:var(--soft);overflow:hidden}
.pl .track i{position:absolute;inset:0;background:var(--blue);transform-origin:left;transform:scaleX(var(--pp,1));transition:transform .4s}
.pl .done{position:absolute;left:26px;bottom:22px;font-size:13px;color:var(--blue);opacity:var(--dn,1);transition:opacity .4s}
.bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.casa .before{position:absolute;right:14px;top:14px;width:30%;aspect-ratio:84/108;border-radius:14px;overflow:hidden;border:3px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.casa .before img{width:100%;height:100%;object-fit:cover}.casa .before .pill{left:5px;bottom:5px;height:18px;font-size:10px;padding:0 7px}
.refix{grid-column:1/3;grid-row:3/5}
.refix .pair{position:absolute;left:28px;right:28px;top:110px;height:380px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.refix figure{position:relative;border-radius:24px;overflow:hidden}.refix figure>img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.refix .after{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--ease)}.refix .after img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.refix .aw.show .after{clip-path:inset(0 0 0 0)}
.refix .aw .pill{z-index:1}
.refix .arrow{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;z-index:2}
.refix .tools{position:absolute;left:28px;bottom:28px;display:flex;gap:8px}
.refix .tools span{height:40px;padding:0 18px;border-radius:20px;background:var(--soft);font-size:14px;display:flex;align-items:center;transition:background .5s,color .5s}
.refix .tools span.on{background:var(--ink);color:var(--bg)}
.tune{grid-column:3}.mody{grid-column:4}
.tune small.k{display:block;padding:26px 26px 0;font-size:13px}
.tune .t{display:block;padding:4px 26px 0;font-size:24px}
.tune .wave{position:absolute;left:26px;right:26px;bottom:30px;height:26px;display:flex;align-items:center;gap:7px}
.tune .wave i{flex:1;max-width:6px;height:40%;border-radius:3px;background:var(--lilac);animation:eq 1s ease-in-out infinite alternate}
.tune .wave i:nth-child(n+8){background:#3A3A3C}
@keyframes eq{to{height:100%}}
.mody .stock{position:absolute;right:14px;top:14px;width:72px;height:72px;border-radius:14px;overflow:hidden;border:2.5px solid #fff}.mody .stock img{width:100%;height:100%;object-fit:cover}
.mody .stock .pill{left:4px;bottom:4px;height:18px;font-size:9px;padding:0 6px}
.mody .seg{position:absolute;left:14px;right:14px;bottom:14px;height:40px;border-radius:20px;background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:grid;grid-template-columns:repeat(3,1fr);padding:4px}
.mody .seg span{display:grid;place-items:center;border-radius:16px;font-size:12px;color:#fff;transition:background .5s,color .5s}
.mody .seg span.on{background:#fff;color:#000}
.flexy{grid-column:3}.more{grid-column:4}
.flexy .fx{display:flex;align-items:center;gap:18px;padding:22px 26px 0}
.flexy .ring{position:relative;width:104px;height:104px;border-radius:50%;background:conic-gradient(var(--lime) calc(var(--f,.7)*1turn),var(--soft) 0);display:grid;place-items:center;transition:--f 1s}
.flexy .ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--card)}
.flexy .ring b{position:relative;font-size:22px}
.flexy .fx b.d{font-size:19px}.flexy .fx small{display:block;margin-top:4px;font-size:12px;color:var(--mute)}
.flexy .days{position:absolute;left:26px;bottom:24px;display:flex;gap:6px}
.flexy .days i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:normal 10px "Biotif";background:var(--soft);color:var(--mute)}
.flexy .days i.on{background:var(--lime);color:#000}
.more>b{display:block;padding:26px 26px 0;font-size:17px}
.more .icons{display:grid;grid-template-columns:repeat(3,64px);gap:14px;padding:18px 26px 0}.more .icons .ico{width:64px;height:64px;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.more .link{position:absolute;left:26px;bottom:22px}

/* ---------- how we work ---------- */
.how .labels{display:flex;justify-content:center;gap:8px;margin:-28px 0 22px;flex-wrap:wrap}
.how .labels span{height:36px;padding:0 16px;border-radius:18px;background:var(--card);color:var(--mute);font-size:14px;display:flex;align-items:center;transition:background .5s,color .5s}
.how .play .labels span{background:var(--ink);color:var(--bg)}
.how .labels .s1{transition-delay:.6s}.how .labels .s2{transition-delay:1.3s}.how .labels .s3{transition-delay:2s}.how .labels .s4{transition-delay:2.7s}.how .labels .s5{transition-delay:3.4s}
.stage{container-type:inline-size;position:relative;aspect-ratio:1200/640;border-radius:var(--r-w);overflow:hidden;
  background:radial-gradient(40% 50% at 8% 5%,rgba(198,181,245,.6),transparent 70%),radial-gradient(40% 50% at 95% 10%,rgba(0,81,237,.45),transparent 70%),radial-gradient(40% 50% at 95% 100%,rgba(142,255,30,.45),transparent 70%),#F2F2F4}
.stage>*{position:absolute}
.stage .phone{left:50%;top:5%;height:90%;width:auto;max-width:none;translate:-50% 0;filter:drop-shadow(0 30px 40px rgba(0,0,0,.25))}
.stage .note{background:rgba(255,255,255,.72);border:1px solid #fff;border-radius:1.9cqw;padding:1.5cqw 1.7cqw;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 36px rgba(0,0,0,.08);color:#000}
.stage .note small{font-size:1cqw;color:#6E6E73}.stage .note b{display:block;margin-top:.35cqw;font-size:1.8cqw;line-height:1.2}
.stage .note .num{font-size:4cqw}.stage .note em{display:block;margin-top:.6cqw;font:normal 1.08cqw "Biotif";color:var(--blue)}
.stage .adc{left:7.5%;top:48%;width:17.5%;height:43%;background:var(--lime);border-radius:2cqw;padding:1.8cqw 1.6cqw;display:flex;align-items:flex-end;font-size:2cqw;line-height:1.1;color:#000;rotate:-4deg;box-shadow:0 18px 40px rgba(60,120,0,.25)}
.cur{display:flex;align-items:flex-start;gap:2px;z-index:3}
.cur svg{width:1.8cqw;height:1.8cqw;min-width:14px;min-height:14px}
.cur span{margin-top:1.5cqw;height:2.2cqw;min-height:18px;padding:0 1cqw;border-radius:99px;font-size:max(10px,1cqw);display:flex;align-items:center;white-space:nowrap}
/* one run, in sequence, when the stage is in view */
.js .stage>*{opacity:0;transition:opacity .9s var(--out),transform 1.1s var(--out)}
.js .stage .phone{transform:translateY(24px) scale(.97)}
.js .stage .cur{transform:translate(var(--fx,-80px),var(--fy,40px))}
.js .stage .note,.js .stage .adc{transform:translateY(14px)}
.how.play .stage>*{opacity:1;transform:none}
.how.play .stage .adc{transform:none}
.stage .s0{transition-delay:.1s}.stage .s1{transition-delay:.6s}.stage .note.s1{transition-delay:.9s}.stage .s2{transition-delay:1.3s}.stage .s3{transition-delay:2s}.stage .note.s3{transition-delay:2.3s}.stage .s4{transition-delay:2.7s}.stage .adc.s4{transition-delay:3s}.stage .s5{transition-delay:3.4s}.stage .note.s5{transition-delay:3.7s}
.stage .cur.s2,.stage .cur.s3,.stage .cur.s5{--fx:80px}
.how.reset .stage>*,.how.reset .labels span{transition-duration:.6s!important;transition-delay:0s!important}
[data-theme="dark"] .stage{background:radial-gradient(40% 50% at 8% 5%,rgba(198,181,245,.3),transparent 70%),radial-gradient(40% 50% at 95% 10%,rgba(0,81,237,.35),transparent 70%),radial-gradient(40% 50% at 95% 100%,rgba(142,255,30,.2),transparent 70%),#0E0E10}

/* ---------- home culture ---------- */
.cg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.cg h2{margin-top:20px;font-size:clamp(40px,5.4vw,80px)}
.cg .lead{margin-top:16px;font-size:18px;color:var(--mute);max-width:440px}
.plist{list-style:none;margin-top:48px;border-top:1px solid var(--line)}
.plist li{border-bottom:1px solid var(--line)}
.plist button{width:100%;display:flex;align-items:baseline;gap:18px;padding:16px 0;text-align:left}
.plist .n{font:500 13px "Bomstad Display";color:var(--mute);width:24px;transition:color .5s}
.plist .t{font-size:clamp(24px,2.6vw,38px);color:var(--faint);transition:color .6s var(--ease)}
.plist li.on .t{color:var(--ink)}.plist li.on .n{color:var(--accent)}
.pcard{position:relative;aspect-ratio:1/1.02;border-radius:var(--r-w);background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
.pno{position:absolute;left:32px;top:28px;font-size:14px;color:var(--mute)}
.pword{position:absolute;left:0;right:0;top:38%;text-align:center;font-size:clamp(44px,6vw,96px);transition:opacity .45s var(--ease)}
.pcard .gm{height:56%;left:50%;top:22%;translate:-50% 0}
.ptext{position:absolute;left:32px;right:32px;bottom:30px;transition:opacity .45s var(--ease)}
.ptext small{font-size:13px;color:var(--mute)}.ptext p{margin-top:6px;font-size:clamp(18px,1.6vw,24px);line-height:1.3}
.pcard.swap .pword,.pcard.swap .ptext{opacity:0}
.cg .link{display:inline-block;margin-top:20px}

/* ---------- join + footer ---------- */
.big{width:100%;fill:var(--ink);transition:fill .6s}
.foot{padding:140px 0 140px}
.fw .ft{display:flex;justify-content:space-between;gap:40px}
.fw .fl{width:600px;max-width:50%}
.fw .big{width:100%}
.mail{display:inline-flex;align-items:center;height:48px;margin-top:48px;padding:0 24px;border-radius:24px;background:var(--card);box-shadow:var(--shadow);font-size:15px;transition:transform .3s var(--out)}
.mail:hover{transform:translateY(-2px)}
.fc{display:grid;grid-template-columns:repeat(3,160px);padding-top:4px}
.fc small{display:block;margin-bottom:12px;font-size:13px;color:var(--mute)}
.fc a{display:block;font-size:16px;line-height:30px;transition:color .3s}
.fc a:hover{color:var(--accent)}
.legal{display:flex;align-items:center;gap:8px;margin-top:72px;padding-top:28px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
.legal svg{height:16px;width:auto;fill:var(--ink);margin:0 4px 0 -2px}
.sc-foot{margin-top:36px;display:flex;justify-content:flex-end}

/* ---------- apps page ---------- */
.scene .sc-head{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:end;margin-bottom:56px}
.badge{display:inline-flex;align-items:center;gap:10px;font-size:15px}.badge .ico{width:40px;height:40px}
.scene h2{margin-top:16px;font-size:clamp(34px,3.9vw,56px);line-height:1.07}
.scene .sc-head p{font-size:15px;line-height:1.45;color:var(--mute);padding-bottom:4px}
.film{position:relative;margin:0;aspect-ratio:var(--r);border-radius:22px;overflow:hidden;background:var(--soft);box-shadow:0 20px 40px rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.6)}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film figcaption{position:absolute;left:12px;bottom:12px;height:24px;padding:0 10px;border-radius:12px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;display:flex;align-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
[data-theme="dark"] .film{border-color:rgba(255,255,255,.14);box-shadow:0 20px 40px rgba(0,0,0,.5)}
/* AI Video: pinned fan (V10) */
.aiscene{position:relative;padding-top:0;height:calc(100svh + var(--steps,6) * var(--step,600px) + 320px)}
.aiscene .pin{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:110px 0 116px;overflow:clip}
.aiscene .sc-head{margin-bottom:0;position:relative;z-index:3}
.fanfield{position:relative;isolation:isolate;min-height:0}
.fanfield .film{position:absolute;left:0;top:0;width:var(--fw,240px);transform-origin:50% 50%;will-change:transform,opacity}
.fanfield .film figcaption{display:none}
.fanfield .film[data-off]{visibility:hidden}
.fanfoot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;font-size:14px}
.fanfoot .fcap{color:var(--ink)}.fanfoot .link{justify-self:end}
.ctrl{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.ctrl button{width:38px;height:38px;border-radius:50%;background:var(--card);box-shadow:var(--shadow);font-size:18px;line-height:1;transition:opacity .3s}
.ctrl button:disabled{opacity:.3;cursor:default}
/* HairApp + Modyfy: V10 scroll entry */
.hairg{display:grid;grid-template-columns:520px repeat(3,1fr);gap:16px;align-items:start}
.hairg .film{margin-top:0}
.hairg>*,.three>*{transform:translate3d(var(--ex,0px),var(--ey,0px),0) rotate(var(--er,0deg));will-change:transform}
.studio{background:var(--card);border-radius:36px;padding:36px 36px 28px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.lk3{position:relative;height:300px}
.lk3 .lk{position:absolute;top:20px;left:0;width:40%;height:280px;border-radius:20px;overflow:hidden;box-shadow:0 18px 36px rgba(0,0,0,.12);transition:left .8s var(--out),top .8s var(--out),height .8s var(--out),box-shadow .6s}
.lk3 .lk img{width:100%;height:100%;object-fit:cover;transition:opacity .45s var(--ease)}
.lk3 .lk.p0{left:0}.lk3 .lk.p1{left:30%;top:0;height:300px;z-index:1;box-shadow:0 18px 36px rgba(0,0,0,.14)}
.lk3 .lk.p1::after{box-shadow:inset 0 0 0 3px var(--blue)}.lk3 .lk.p2{left:60%}
.lk3.swap img{opacity:0}
.studio .seg{margin:26px auto 0;display:flex;background:var(--soft);border-radius:20px;padding:4px}
.studio .seg button{height:32px;padding:0 26px;border-radius:16px;font-size:13px;transition:background .4s var(--ease),color .4s var(--ease)}.studio .seg .on{background:var(--ink);color:var(--bg)}
.studio .sf{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:22px}.studio .sf small{font-size:13px;color:var(--mute)}
.three{display:grid;grid-template-columns:repeat(3,250px);justify-content:center;gap:24px}
.six{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ap{background:var(--card);border-radius:var(--r-c);padding:26px;display:flex;flex-direction:column;min-height:264px;box-shadow:var(--shadow)}
.ap .ico{width:64px;height:64px;box-shadow:0 8px 20px rgba(0,0,0,.1)}
.ap h3{margin-top:18px;font-size:24px}.ap p{margin-top:4px;font-size:14px;line-height:1.25;color:var(--mute)}.ap .meta{margin-top:auto;padding-top:14px;font-weight:400;font-size:13px}.ap .link{margin-top:8px}
.many{margin-top:20px;background:#000;color:#fff;border-radius:36px;padding:36px;display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:center}
.many h3{font-size:44px}.many p{margin:10px 0 22px;color:#8A8A8E;font-size:16px}
.many .icons{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;padding:22px;border-radius:28px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.many .ico{width:100%;height:auto;aspect-ratio:1}
[data-theme="dark"] .many{background:#141414}

/* ---------- company ---------- */
.vision{text-align:center}
.vision h2{font-size:clamp(56px,7.2vw,104px)}
.vision p{margin:40px auto 0;max-width:900px;font-size:clamp(22px,2.5vw,36px);line-height:1.3}
.vision .steps{margin-top:48px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.vision .steps span{height:48px;padding:0 24px;border-radius:24px;display:flex;align-items:center;font:500 18px "Bomstad Display";background:#000;color:#fff}
.vision .steps span:nth-child(2){background:var(--blue)}.vision .steps span:nth-child(3){background:var(--lilac);color:#000}.vision .steps span:nth-child(4){background:var(--lime);color:#000}
[data-theme="dark"] .vision .steps span:first-child{background:#fff;color:#000}
.tl{position:relative;padding-bottom:20px}
.tl .line{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--line)}
.ms{position:relative;width:calc(50% - 40px);min-height:140px;background:var(--card);border-radius:var(--r-c);padding:24px 28px;box-shadow:var(--shadow);margin-bottom:28px}
.ms:nth-child(even){margin-left:calc(50% + 40px)}
.ms .dot{position:absolute;top:30px;width:18px;height:18px;border-radius:50%;border:4px solid var(--bg);right:-49px}
.ms:nth-child(even) .dot{right:auto;left:-49px}
.ms .tag{display:inline-flex;height:28px;padding:0 12px;border-radius:14px;align-items:center;font-size:12px}
.ms.b .tag,.ms.b .dot{background:var(--blue);color:#fff}.ms.l .tag,.ms.l .dot{background:var(--lilac);color:#000}.ms.g .tag,.ms.g .dot{background:var(--lime);color:#000}
.ms b{display:block;margin-top:14px;font-size:28px}.ms p{margin-top:6px;font-size:15px;color:var(--mute)}
.ms .no{position:absolute;right:28px;top:26px;font-size:14px;color:var(--faint)}

/* ---------- culture page ---------- */
.five .big{position:relative;width:auto;fill:none;overflow:hidden;background:var(--card);border-radius:var(--r-w);height:300px;padding:40px 48px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.five .big .no,.five .p .no{font:500 14px "Bomstad Display";color:var(--mute)}
.five .big>div:not(.gm){margin-top:auto;position:relative;z-index:1}
.five .big h3{font-size:clamp(56px,6.7vw,96px)}.five .big small{display:block;margin-top:10px;font-size:14px;color:var(--mute)}.five .big p{margin-top:12px;font-size:26px}
.gm.corner{height:120%;right:60px;top:-23%;left:auto}
.four{margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.five .p{position:relative;background:var(--card);border-radius:32px;padding:28px;min-height:240px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.five .p i{width:32px;height:4px;border-radius:2px;background:var(--c)}.five .p .no{margin-top:14px}
.five .p h3{margin-top:auto;font-size:30px}.five .p small{margin-top:6px;font-size:12px;color:var(--mute)}.five .p p{margin-top:12px;font-size:15px;color:var(--mute)}

/* ---------- careers ---------- */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tc{position:relative;background:var(--card);border-radius:var(--r-w);padding:32px;display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:hidden}
.tc h3{margin-top:20px;font-size:clamp(24px,2.3vw,32px)}.tc>p{margin-top:8px;font-size:15px;color:var(--mute);max-width:520px}
.tc .area{position:relative;margin-top:32px;min-height:260px}
.tc.wide{grid-column:span 2}
.prod{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.idea{background:#fff;color:#000;border-radius:20px;padding:16px 18px;rotate:-3deg;box-shadow:0 10px 24px rgba(0,0,0,.08);align-self:start}
.idea small,.brief small{font-size:11px;color:#6E6E73}.idea b{display:block;margin-top:4px;font-size:18px;line-height:1.25}
.brief{grid-column:1;background:var(--lime);color:#000;border-radius:18px;padding:14px 16px;rotate:2deg;align-self:end}.brief small{color:#000}.brief b{display:block;font-size:17px}
.pipe{grid-column:2;grid-row:1/3;background:var(--soft);border-radius:22px;padding:20px}
.pipe ul{list-style:none;margin-top:14px;display:grid;gap:14px}
.pipe li{display:flex;gap:10px;align-items:baseline;font-size:14px}.pipe li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.pipe li small{margin-left:auto;font-size:11px;color:var(--mute)}
.des{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.des .scr{position:relative;height:250px}
.des .scr img{position:absolute;top:24px;width:42%;height:200px;object-fit:cover;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.des .scr img:first-child{left:0}.des .scr img:last-child{right:0}.des .scr .c{left:25%;top:0;width:50%;height:250px;z-index:1;outline:2.5px solid var(--lilac)}
.kit .sw{display:flex;gap:10px}.kit .sw i{width:34px;height:34px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(128,128,128,.25)}
.kit .aa{display:block;margin-top:18px;font-size:72px}.kit small{font-size:12px;color:var(--mute)}
.eng{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}
.code{background:#0A0A0A;color:#D8D8DC;border-radius:20px;padding:20px;font:12.5px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;overflow:hidden}
.code .k{color:var(--lilac)}.code .f{color:var(--lime)}
.rel{background:var(--soft);border-radius:18px;padding:16px}.rel b{font-size:16px}.rel em{display:block;margin-top:6px;font:normal 12px "Biotif";color:var(--blue)}.rel small{display:block;margin-top:8px;font-size:11px;color:var(--mute)}
[data-theme="dark"] .rel em{color:var(--lime)}
.chart{position:relative;height:150px;background:var(--soft);border-radius:20px;padding:18px}
.chart small{font-size:12px;color:var(--mute)}.chart b{display:block;font-size:32px}
.chart svg{position:absolute;left:18px;right:18px;bottom:16px;width:calc(100% - 36px);height:45%}
.chart path{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s var(--ease)}
.tc.in .chart path{stroke-dashoffset:0}
.ab{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ab div{border-radius:18px;padding:14px 16px;background:var(--soft);font-size:14px}.ab small{display:block;font-size:11px;color:var(--mute);margin-top:2px}
.ab .win{background:var(--ink);color:var(--bg)}.ab .win small{color:var(--lime)}[data-theme="dark"] .ab .win small{color:var(--blue)}
.cr{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:start}
.strip{display:flex;gap:12px}
.strip figure{position:relative;width:146px;height:260px;border-radius:20px;overflow:hidden}.strip img{width:100%;height:100%;object-fit:cover}
.strip .va{outline:3px solid var(--lime);outline-offset:-3px}
.strip .ba{width:236px;touch-action:pan-y;cursor:ew-resize}
.ba>img,.ba .b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .b{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.ba .line{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:#fff}
.ba .line i{position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px;border-radius:50%;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.camp{position:relative;background:var(--soft);border-radius:20px;padding:18px 20px 20px}
.camp b{font-size:14px}.camp div{display:grid;grid-template-columns:70px 1fr;align-items:center;margin-top:12px;font-size:11px;color:var(--mute)}
.camp i{height:8px;border-radius:4px;background:var(--c);margin-left:var(--l);width:var(--w)}
.camp em{position:absolute;top:46px;bottom:16px;left:calc(90px + (100% - 110px)*var(--ph,.4));width:2px;background:#fff;animation:ph 8s linear infinite}
@keyframes ph{from{--ph:0}to{--ph:1}}
@property --ph{syntax:"<number>";inherits:false;initial-value:0}
.langs{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}.langs span{height:26px;padding:0 10px;border-radius:13px;border:1px solid var(--line);display:flex;align-items:center;font-size:12px;color:var(--mute)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.tags span{height:34px;padding:0 14px;border-radius:17px;background:var(--soft);font-size:13px;display:flex;align-items:center}
.roles{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}
.hello{position:relative;overflow:hidden;background:#000;color:#fff;border-radius:var(--r-w);padding:36px;min-height:380px;display:flex;flex-direction:column}
.hello .pill.chip{background:#1C1C1E;color:#fff;align-self:flex-start}
.hello h3{margin-top:auto;font-size:56px}.hello p{margin-top:10px;color:#A1A1A6;max-width:420px}
.hello .btns{display:flex;gap:12px;margin-top:22px}
.hello .gm.corner{height:92%;right:28px;top:-11%}
.hello>:not(.gm){position:relative;z-index:1}.hello p{max-width:360px}
[data-theme="dark"] .hello{background:#141414}
.ghost{position:relative;border-radius:var(--r-w);border:1.5px dashed var(--line);padding:32px;display:flex;flex-direction:column;overflow:hidden}
.ghost .pill{align-self:flex-start}.ghost .cap{position:absolute;right:28px;top:36px;font-size:12px;color:var(--mute)}
.ghost h4{margin-top:auto;font-size:30px;color:var(--faint)}.ghost>small:last-child{margin-top:6px;font-size:13px;color:var(--faint)}
.ghost::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-100%);animation:sh 3.5s var(--ease) infinite}
[data-theme="dark"] .ghost::after{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%)}
@keyframes sh{60%,100%{transform:translateX(100%)}}

/* ================= MOBILE (Figma 390) ================= */
@media (max-width:760px){
  section{padding-top:88px}
  .wrap{width:calc(100% - 40px)}
  .shead{margin-bottom:28px}.shead h2{font-size:clamp(34px,10vw,40px)}.shead p{font-size:15px;margin-top:12px}
  body::before{height:76px}
  .theme{left:20px;top:20px;width:36px;height:36px}.theme svg{width:17px;height:17px}
  .cwm{right:20px;top:30px;width:86px}
  .hint{right:20px;bottom:auto;top:calc(100svh - 150px);width:20px;height:32px;position:fixed}
  body[data-page="index"] .hint{top:calc(100svh - 210px)}
  .dock{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100% - 24px);height:60px;padding:5px;gap:2px;border-radius:22px;justify-content:space-between}
  .dock a{height:50px;padding:0 10px;font-size:13.5px;border-radius:17px}.dock .home{width:58px;height:50px;border-radius:17px}.dock .home svg{width:20px;height:24px}
  .toast{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 70px);min-height:52px;border-radius:18px;padding:9px 9px 9px 14px;width:calc(100% - 24px)}
  .toast p{font-size:12px}.toast small{font-size:11px}.toast button{height:32px;padding:0 14px;font-size:12px}
  .hero .inner{padding-bottom:140px}
  .lockup{width:66vw}
  .hero .chip{margin-top:30px;height:30px;font-size:12px;padding:0 14px}
  .hero h1{font-size:26px;line-height:1.2;margin-top:18px}
  .phero{--ws:min(75px,calc((100vw - 40px) / (var(--n) * .8)))}
  .nums .grid{grid-template-columns:1fr 1fr;gap:12px}.stat{padding:22px 18px;border-radius:22px}.stat b{font-size:38px}.stat span{font-size:12px;margin-top:10px}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:14px}
  .bento>.w{border-radius:28px}.bento>.w .hd{padding:16px 16px 0;gap:10px}.bento>.w .hd .ico{width:34px;height:34px}.bento>.w .hd b{font-size:14px}.bento>.w .hd small{font-size:11px}
  .aiv,.hair,.refix{grid-column:1/3;grid-row:auto}
  .aiv{height:372px}.aiv-g{left:18px;right:18px;top:72px;bottom:18px;grid-template-columns:150px 1fr;gap:12px}
  .aiv .duo{gap:8px;margin-top:8px}.aiv .duo figure{border-radius:14px}.aiv .duo .pill{left:6px;bottom:6px;font-size:10px;padding:0 7px;height:20px}
  .aiv h3{margin-top:12px;font-size:20px}.aiv p{margin-top:2px;font-size:13px}
  .aiv .play{width:30px;height:30px;margin:-15px}.aiv .play::before{left:11px;top:9px;border-left-width:10px;border-block-width:6px}
  .hair{height:200px}.hair .looks{left:16px;right:16px;top:62px;bottom:16px;gap:8px}.hair figure{border-radius:14px}
  .pl,.casa,.tune,.mody,.flexy,.more{grid-column:auto;aspect-ratio:1;height:auto}
  .pl small.k{padding:0 16px;font-size:11px}.pl small.k:first-of-type{display:none}.pl .n{margin-top:10px}.pl .n{padding:0 16px;font-size:36px}
  .pl .track{left:16px;right:16px;bottom:34px;height:6px}.pl .done{left:16px;bottom:12px;font-size:11px}
  .pill.ic{height:26px;font-size:11px}.pill.ic .ico{width:20px;height:20px}.pill.tl{left:10px;top:10px}
  .casa .before{right:10px;top:10px;width:30%;border-width:2px;border-radius:10px}.casa .before .pill{display:none}
  .refix{height:362px}.refix .pair{left:18px;right:18px;top:72px;height:220px;gap:10px}.refix figure{border-radius:18px}
  .refix .arrow{width:32px;height:32px;margin:-16px;font-size:14px}.refix .tools{left:18px;bottom:20px;gap:6px}.refix .tools span{height:34px;padding:0 13px;font-size:12px}
  .tune small.k{padding:14px 16px 0;font-size:11px}.tune .t{padding:2px 16px 0;font-size:15px}.tune .wave{left:16px;right:16px;bottom:18px;height:16px;gap:5px}
  .mody .stock{right:10px;top:10px;width:44px;height:44px;border-radius:10px;border-width:2px}.mody .stock .pill{display:none}
  .mody .seg{left:10px;right:10px;bottom:10px;height:30px;padding:3px}.mody .seg span{font-size:10.5px;border-radius:12px}
  .flexy .hd small{display:none}.flexy .fx{padding:12px 16px 0;gap:10px}.flexy .ring{width:64px;height:64px}.flexy .ring::before{inset:8px}.flexy .ring b{font-size:14px}
  .flexy .fx b.d{font-size:13px}.flexy .fx small{font-size:11px}.flexy .days{left:16px;bottom:14px;gap:4px}.flexy .days i{width:16px;height:16px;font-size:0}
  .more>b{padding:16px 16px 0;font-size:14px}.more .icons{grid-template-columns:repeat(3,40px);gap:8px;padding:12px 16px 0}.more .icons .ico{width:40px;height:40px}.more .link{left:16px;bottom:14px;font-size:11px}
  .how .labels{margin:0 0 16px;gap:5px}.how .labels span{height:30px;padding:0 9px;font-size:12px}
  .stage{aspect-ratio:1/1.42;margin:0 -8px;border-radius:30px}
  .stage .phone{top:6%;height:88%}
  .stage .note,.stage .adc{display:none}
  .stage .cur svg{width:16px;height:16px}.stage .cur span{font-size:11px;height:22px;padding:0 9px;margin-top:14px}
  .stage .cur.s1{left:2%!important;top:20%!important}.stage .cur.s4{left:2%!important;top:62%!important}.stage .cur.s5{left:70%!important;top:8%!important}.stage .cur.s2{left:72%!important;top:40%!important}.stage .cur.s3{left:64%!important;top:80%!important}
  .cg{grid-template-columns:1fr;gap:28px}.plist{margin-top:28px}.plist .t{font-size:24px}.plist button{padding:12px 0}.pcard{aspect-ratio:1/1.05}
  .foot{padding:88px 0 120px}
  .fw .ft{flex-direction:column;gap:40px}.fw .fl{width:200px;max-width:none}.mail{height:44px;margin-top:24px;padding:0 18px;font-size:14px}
  .fc{grid-template-columns:repeat(3,1fr);padding-top:0}.fc small{font-size:12px;margin-bottom:8px}.fc a{font-size:14px;line-height:26px}
  .legal{flex-wrap:wrap;gap:4px 6px;margin-top:36px;padding-top:20px;font-size:12px}.legal span:last-child{flex-basis:100%}.legal svg{height:13px}
  .scene .sc-head{grid-template-columns:1fr;gap:10px;margin-bottom:24px}.scene h2{font-size:34px;margin-top:16px}.scene .sc-head p{padding:0}
  .badge{font-size:14px}.badge .ico{width:34px;height:34px}
  .three{display:flex;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:0 20px 8px;scrollbar-width:none}
  .three .film{width:168px;flex:none;scroll-snap-align:start}
  .aiscene .pin{padding:84px 0 96px}
  .fanfoot{grid-template-columns:1fr auto;gap:10px;font-size:12px}.fanfoot .fcap{grid-column:1/-1}.fanfoot .link{justify-self:start;grid-row:2;grid-column:1}
  .hairg{grid-template-columns:1fr 1fr;gap:12px}.hairg .film:nth-of-type(3){display:none}.studio{grid-column:1/3;padding:24px 22px 20px;border-radius:30px}.lk3{height:210px}.lk3 .lk{height:190px;width:37%}.lk3 .lk.p1{height:210px;left:31.5%}.lk3 .lk.p2{left:63%}
  .six{grid-template-columns:1fr 1fr;gap:12px}.ap{min-height:204px;padding:18px;border-radius:24px}.ap .ico{width:48px;height:48px}.ap h3{margin-top:14px;font-size:17px}.ap p{font-size:12px}.ap .meta{font-size:11px;padding-top:10px}.ap .link{font-size:12px}
  .many{grid-template-columns:1fr;padding:24px;border-radius:30px}.many h3{font-size:28px}.many p{font-size:13px}.many .icons{grid-template-columns:repeat(5,1fr);gap:10px;padding:0;background:none;border:0}
  .vision h2{font-size:56px}.vision p{font-size:20px;margin-top:24px}.vision .steps span{height:40px;font-size:15px;padding:0 16px}
  .tl .line{left:8px}.ms{width:auto;margin-left:30px!important;min-height:0;padding:16px 18px;border-radius:22px;margin-bottom:14px}
  .ms .dot{left:-29px!important;right:auto;top:22px;width:14px;height:14px;border-width:3px}.ms .tag{height:22px;font-size:11px;padding:0 9px}.ms b{font-size:19px;margin-top:10px}.ms p{font-size:12px}.ms .no{display:none}
  .five .big{height:240px;padding:24px 22px;border-radius:30px}.five .big h3{font-size:44px}.five .big p{font-size:17px}.gm.corner{height:75%;right:24px;top:-17%}
  .four{grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.five .p{min-height:200px;padding:18px;border-radius:24px}.five .p h3{font-size:19px}.five .p p{font-size:12px}
  .tgrid{grid-template-columns:1fr;gap:14px}.tc{padding:20px;border-radius:28px}.tc.wide{grid-column:auto}.tc h3{font-size:22px}.tc>p{font-size:13px}
  .tc .area{margin-top:20px;min-height:0}
  .prod{grid-template-columns:1fr}.prod .brief{display:none}.idea{rotate:0deg;box-shadow:none;border:1px solid var(--line)}.pipe{grid-column:auto;grid-row:auto}
  .des{grid-template-columns:1fr}.des .scr{height:180px}.des .scr img{height:150px}.des .scr .c{height:180px}.kit{display:flex;align-items:center;gap:14px}.kit .aa{margin:0;font-size:28px}
  .eng{grid-template-columns:1fr}.code{font-size:12px}
  .cr{grid-template-columns:1fr;gap:16px}.strip{display:grid;grid-template-columns:1fr 1fr;gap:10px}.strip figure{width:auto;height:auto;aspect-ratio:9/13}.strip .ba{grid-column:1/3;width:auto;aspect-ratio:310/220}
  .roles{grid-template-columns:1fr;gap:14px}.hello{padding:22px;min-height:320px;border-radius:30px}.hello .gm.corner{height:58%;right:10px;top:-10%}.hello h3{font-size:40px}.hello p{font-size:13px}.hello .btns{flex-wrap:wrap}
  .ghost{min-height:170px;padding:20px;border-radius:30px}.ghost h4{font-size:24px}.ghost .cap{right:20px;top:24px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .stage>*{opacity:1!important;transform:none!important}
}

/* ================= v3 (Figma "Papcorns Web · Final v3") ================= */
/* AI agent: its own colour, white with an ink outline, so it never reads as Creative */
.how .labels .s6{transition-delay:4.1s}
.how .labels .ai,.how.play .labels .ai{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.stage .s6{transition-delay:4.1s}
.stage .cur.ai span{background:#fff;color:#000;box-shadow:inset 0 0 0 1.5px #000}
.howlink{margin-top:28px;text-align:center}
.basenote{margin-top:22px;font-size:15px;color:var(--mute)}
.pword{font-size:clamp(36px,4.6vw,68px);padding:0 24px}

/* in-card glass amblem: one size everywhere, fully inside the card */
.gm.inset{height:clamp(150px,17vw,240px);right:48px;left:auto;top:50%;translate:0 -50%}
.pcard .gm{height:clamp(150px,17vw,240px)}

/* apps: every app */
.sc-foot .lnks,.fanfoot .lnks,.sf .lnks{display:flex;gap:24px;flex-wrap:wrap}
.allapps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 20px}
.ar{display:flex;gap:20px;align-items:center;background:var(--card);border-radius:24px;padding:22px 24px;box-shadow:var(--shadow)}
.ar .ico{width:64px;height:64px;border-radius:15px;flex:none;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.ar h3{font-size:20px}.ar small{display:block;font-size:13px;color:var(--mute);margin-top:2px}
.ar .lnks{display:flex;gap:18px;margin-top:6px}.ar .link{font-size:13px}

/* company: ideas in, photo beside */
.vision.split{text-align:left}
.vg{display:grid;grid-template-columns:1fr 500px;gap:60px;align-items:center}
.vision.split h2{font-size:clamp(56px,7.2vw,104px)}
.vision.split p{margin:32px 0 0;font-size:clamp(20px,2.1vw,30px)}
.vision.split .steps{justify-content:flex-start;margin-top:40px}

/* photos: true ratio, gentler contrast */
.ph{overflow:hidden;border-radius:28px;background:var(--soft)}
.ph img{width:100%;height:auto;filter:contrast(.88) brightness(1.03) saturate(.94)}
.studio-ph .wide+.row4,.studio-ph .row4+.wide{margin-top:20px}
.row4{display:grid;grid-template-columns:2fr 2.12fr 2fr 2fr;gap:20px}
.row4 .ph img{aspect-ratio:2/3;object-fit:cover}.row4 .ph:nth-child(2) img{aspect-ratio:1400/1981}

/* culture: principles 1 + 2×2 */
.five .big{height:340px}
.five .four{grid-template-columns:1fr 1fr}
.five .p{min-height:250px;padding:40px;border-radius:32px}
.five .p .no{position:absolute;right:40px;top:36px;margin:0}
.five .p h3{font-size:36px}.five .p small{font-size:13px}.five .p p{font-size:18px}
.five .p.base{background:var(--soft);box-shadow:none}

/* culture: AI-native card, light */
.aicard{position:relative;overflow:hidden;background:var(--card);border-radius:var(--r-w);padding:56px;min-height:440px;box-shadow:var(--shadow);display:flex}
.aicard>div:not(.gm){position:relative;z-index:1;display:flex;flex-direction:column;max-width:620px}
.aicard h2{font-size:clamp(48px,6.1vw,88px)}
.aicard p{margin-top:28px;font-size:clamp(18px,1.6vw,22px);line-height:1.35}
.aicard .flow{margin-top:auto;padding-top:36px;display:flex;flex-wrap:wrap;gap:10px}
.aicard .flow>*{height:44px;padding:0 20px;border-radius:22px;display:flex;align-items:center;font-size:15px;background:var(--soft);font-weight:400}
.aicard .flow b{background:var(--ink);color:var(--bg)}

/* careers: benefits + hire */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pk{background:var(--card);border-radius:32px;padding:32px;min-height:240px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.pk i{width:32px;height:4px;border-radius:2px;background:var(--c)}
.pk h3{margin-top:auto;font-size:30px}.pk p{margin-top:10px;font-size:15px;color:var(--mute)}
.hg{display:grid;grid-template-columns:440px 1fr;gap:60px;align-items:start}
.hg .shead{margin:0;position:sticky;top:120px}
.hsteps{list-style:none;display:grid;gap:12px}
.hs{display:flex;gap:24px;background:var(--card);border-radius:28px;padding:32px;box-shadow:var(--shadow)}
.hs .no{flex:none;width:44px;height:44px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:14px}
.hs:last-child .no{background:var(--lime);color:#000}
.hs h3{font-size:26px}.hs p{margin-top:8px;font-size:15px;color:var(--mute)}

@media (max-width:760px){
  .gm.inset{height:120px;right:20px}
  .allapps{grid-template-columns:1fr;gap:10px}.ar{padding:14px 16px;gap:14px;border-radius:20px}.ar .ico{width:52px;height:52px;border-radius:12px}.ar h3{font-size:17px}
  .vg{grid-template-columns:1fr;gap:32px}.vision.split h2{font-size:56px}.vision.split p{font-size:20px;margin-top:20px}
  .row4{grid-template-columns:1fr 1fr;gap:12px}.studio-ph .wide+.row4,.studio-ph .row4+.wide{margin-top:12px}.ph{border-radius:20px}
  .five .big{height:260px}.five .four{grid-template-columns:1fr}.five .p{min-height:0;padding:24px;gap:0}.five .p h3{margin-top:28px;font-size:26px}.five .p p{font-size:15px}.five .p .no{right:24px;top:22px}
  .aicard{padding:28px 22px 24px;min-height:0;border-radius:30px}.aicard>div:not(.gm){max-width:none}.aicard .gm.inset{top:28px;translate:none;height:96px}.aicard h2{font-size:44px}.aicard p{font-size:16px}.aicard .flow>*{height:36px;padding:0 14px;font-size:13px}
  .pgrid{grid-template-columns:1fr;gap:12px}.pk{min-height:180px;padding:24px;border-radius:24px}.pk h3{font-size:24px}
  .hg{grid-template-columns:1fr;gap:28px}.hg .shead{position:static}.hs{padding:20px;gap:16px;border-radius:22px}.hs h3{font-size:20px}.hs p{font-size:13px}
}

/* ================= v3 final (Figma v3: desktop/mobile × light/dark) ================= */
/* role chips: one style, no hierarchy, no colour change on play */
.how .labels span,.how.play .labels span,.how .labels .ai,.how.play .labels .ai{background:var(--card);color:var(--ink);box-shadow:none}
[data-theme="dark"] .how .labels span{background:var(--soft)}

/* home culture card: amblem on top, centred; the word sits under it */
.pcard .gm{height:clamp(150px,17vw,240px);top:12%;left:50%;translate:-50% 0}
.pcard .pword{top:58%}
.pno{left:32px;top:28px}.ptext{left:32px;right:32px;bottom:32px}
.plist .t{color:#AEAEB2}[data-theme="dark"] .plist .t{color:#636366}
.plist li.on .t{color:var(--ink)}

/* footer: black in light, white in dark */
.foot{margin-top:140px;background:#000;color:#fff;--ink:#fff;--mute:#8A8A8E;--line:#2A2A2C;--card:#1C1C1E;--accent:var(--lilac)}
[data-theme="dark"] .foot{background:#fff;color:#000;--ink:#000;--mute:#6E6E73;--line:#E3E3E8;--card:#F0F0F3;--accent:var(--blue)}
.foot .big,.foot .legal svg{fill:var(--ink)}.foot .mail{box-shadow:none}

/* dark mode: a few light cards between the dark ones (same tokens as light) */
[data-theme="dark"] :is(.stat,.pcard,.pk,.hs,.studio){--ink:#000;--mute:#6E6E73;--card:#fff;--soft:#F0F0F3;--line:#E3E3E8;--faint:#C7C7CC;--bg:#fff;--accent:var(--blue);background:#fff;color:#000}
[data-theme="dark"] .pcard .plist{color:inherit}

/* apps */
.fanfoot .lnks,.sc-foot .lnks{margin-left:auto;justify-content:flex-end}
.ap{min-height:0;padding:26px 26px 32px}.ap p{margin-top:6px}
.many .icons{grid-template-columns:repeat(5,64px);gap:8px 32px;justify-content:start}
.many .ico{width:64px;height:64px;border-radius:15px}

/* culture: principles mixed with photos (rows follow the Figma frame) */
.mix.m{display:none}
.mix.d{display:grid;gap:20px}
.mr{display:grid;gap:20px;aspect-ratio:1200/527}
.mr.r1{grid-template-columns:790fr 390fr}.mr.r2{grid-template-columns:437fr 372fr 351fr}.mr.r3{grid-template-columns:351fr 333fr 476fr}.mr.r4{grid-template-columns:390fr 790fr}
.mix .ph{margin:0;height:100%}.mix .ph img{width:100%;height:100%;object-fit:cover}
.pc{position:relative;background:var(--card);border-radius:32px;padding:32px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow);min-width:0}
.pc i{position:absolute;left:32px;top:32px;width:32px;height:4px;border-radius:2px;background:var(--c)}
.pc .no{position:absolute;right:32px;top:28px;font-size:14px;color:var(--mute)}
.pc small{display:block;font-size:14px;color:var(--mute)}
.pc h3{margin-top:10px;font-size:clamp(28px,3.06vw,44px);line-height:1.02}
.pc p{margin-top:16px;font-size:17px;line-height:1.45;color:var(--mute)}
.pc.base{background:var(--soft);box-shadow:none;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;min-height:234px}
.pc.base .no{left:32px;right:auto}.pc.base h3{font-size:clamp(36px,3.6vw,52px)}.pc.base p{max-width:440px;font-size:20px;margin:0}

/* photos: true ratio, a lighter touch than before */
.ph img{filter:contrast(.96) saturate(.98) brightness(1.01)}

/* ---------- motion: small entrances, small hovers ---------- */
.js .ph.rv img{transform:scale(1.06);transition:transform 1.6s var(--out)}
.js .ph.rv.in img{transform:none}
.mr>:nth-child(2),.six>:nth-child(3n+2),.pgrid>:nth-child(3n+2){transition-delay:.08s}
.mr>:nth-child(3),.six>:nth-child(3n),.pgrid>:nth-child(3n){transition-delay:.16s}
.hsteps>:nth-child(2){transition-delay:.06s}.hsteps>:nth-child(3){transition-delay:.12s}.hsteps>:nth-child(4){transition-delay:.18s}.hsteps>:nth-child(5){transition-delay:.24s}
@media (hover:hover) and (pointer:fine){
  .js .rv.in:is(.pc,.pk,.ap,.ms,.stat){transition:transform .5s var(--out),box-shadow .5s var(--out),opacity 1.1s var(--out);transition-delay:0s}
  .js .rv.in:is(.pc,.pk,.ap,.ms,.stat):hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.09)}
  .js .rv.in.hs{transition:transform .45s var(--out),opacity 1.1s var(--out);transition-delay:0s}
  .js .rv.in.hs:hover{transform:translateX(6px)}
  .ph.in:hover img,.mix .ph:hover img{transform:scale(1.03);transition:transform 1.2s var(--out)}
  .many .ico{transition:transform .45s var(--out)}.many .ico:hover{transform:translateY(-4px) rotate(-3deg)}
  .vision .steps span{transition:transform .35s var(--out)}.vision .steps span:hover{transform:translateY(-3px)}
}

@media (max-width:760px){
  .foot{margin-top:88px}
  .pcard .gm{height:150px;top:40px}.pcard .pword{top:auto;bottom:118px}.pno{left:20px;top:18px}.ptext{left:20px;right:20px;bottom:20px}
  .ap{padding:18px 18px 20px}
  .many .icons{grid-template-columns:repeat(5,1fr);gap:12px}.many .ico{width:100%;height:auto;aspect-ratio:1;border-radius:12px}
  .mix.d{display:none}.mix.m{display:grid;gap:12px}
  .mix.m .mr{grid-template-columns:1fr 1fr;gap:12px;aspect-ratio:auto}.mix.m .mr.p2{grid-template-columns:174fr 164fr}
  .mix.m .ph img{height:100%}.mix.m>.ph img{height:auto}
  .pc{padding:20px;border-radius:24px}.pc i{left:20px;top:22px;width:24px;height:3px}.pc .no{right:20px;top:18px;font-size:11px}
  .pc small{font-size:11px}.pc h3{font-size:20px;margin-top:6px}.pc p{font-size:13px;margin-top:10px;line-height:1.4}
  .pc.full{min-height:210px}.pc.full h3{font-size:28px}
  .pc.base{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:0;min-height:200px}.pc.base .no{left:auto;right:20px}.pc.base h3{font-size:28px}.pc.base p{font-size:13px;margin-top:10px}
  .pgrid{grid-template-columns:1fr 1fr;gap:12px}.pk{min-height:190px;padding:20px;border-radius:24px}.pk h3{font-size:18px}.pk p{font-size:12px;margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .js .ph.rv img{transform:none!important}
  .js .rv.in:hover,.ph:hover img,.many .ico:hover{transform:none!important}
}
/* dark mode: the white home card keeps the light glass */
[data-theme="dark"] .pcard .g-l{display:inline}[data-theme="dark"] .pcard .g-d{display:none}
[data-theme="dark"] .pcard .g-blur{-webkit-backdrop-filter:none;backdrop-filter:none}
/* dock over the footer: flip so it stays readable (footer is black in light, white in dark) */
.on-foot .dock{background:rgba(255,255,255,.12);box-shadow:0 16px 40px rgba(0,0,0,.2),inset 1px 1px 0 rgba(255,255,255,.22)}
.on-foot .dock a{color:rgba(255,255,255,.88)}.on-foot .dock a[aria-current]{background:#fff;color:#000}.on-foot .dock .home svg{fill:currentColor}
[data-theme="dark"] .on-foot .dock{background:rgba(255,255,255,.72);box-shadow:0 16px 40px rgba(0,0,0,.12)}
[data-theme="dark"] .on-foot .dock a{color:rgba(0,0,0,.85)}[data-theme="dark"] .on-foot .dock a[aria-current]{background:#000;color:#fff}[data-theme="dark"] .on-foot .dock .home svg{fill:currentColor}
.dock,.dock a{transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
@media (max-width:760px){.dsk{display:none}}
/* corner wordmark + theme button over the footer */
.foot-top .cwm,.foot-top .theme{color:#fff}.foot-top .cwm svg{fill:#fff}.foot-top::before{opacity:0}
[data-theme="dark"] .foot-top .cwm,[data-theme="dark"] .foot-top .theme{color:#000}[data-theme="dark"] .foot-top .cwm svg{fill:#000}
/* fixes 3 Kas: code card matches Figma column split (330/186) so no line is cut; hello glass sits above the text on phones */
.eng{grid-template-columns:330fr 186fr}
@media (max-width:760px){
  .eng{grid-template-columns:1fr}.code{font-size:11px;padding:18px 16px}
  .hello .gm.inset{top:20px;translate:none;height:120px;right:20px}
}
/* home culture card: word + text stack from the bottom, the word always keeps room for two lines,
   so a long principle ("Think with Evidence") never runs into the text and the card never jumps */
.pcard{display:flex;flex-direction:column;justify-content:flex-end;padding:32px}
.pcard .pword,.pcard .ptext{position:static;left:auto;right:auto;top:auto;bottom:auto}
.pcard .pword{display:flex;align-items:flex-end;justify-content:center;text-align:center;min-height:2.08em;line-height:1.04;margin:0 0 20px;padding:0;font-size:clamp(34px,3.6vw,56px);text-wrap:balance}
.pcard .gm{top:7%;height:clamp(140px,14.5vw,215px)}
@media (max-width:760px){
  .pcard{padding:20px}.pcard .pword{font-size:34px;margin-bottom:14px}.pcard .gm{top:22px;height:140px}
}
.pcard .ptext p{min-height:2.6em}
/* readability pass 3 Kas: faint numbers/greens/blue-on-dark raised to readable contrast; real content never under 12px on phones */
:root:not([data-theme="dark"]){--mute:#6A6A6F}
.ms .no{color:#8E8E93}[data-theme="dark"] .ms .no{color:#6E6E73}
[data-theme="dark"] .rel em{color:var(--lime)}
[data-theme="dark"] .pl .done{color:var(--lilac)}
[data-theme="dark"] .plist li.on .n{color:var(--lilac)}
@media (max-width:760px){
  .ms .tag{font-size:12px}.ms p{font-size:13px}
  .pc small,.pc .no{font-size:12px}
  .pl .done{font-size:12px}
}
/* Open positions: "none" shows our own empty card, "open" embeds the HRPanda list in a white card (white in dark mode too, HRPanda draws on white) */
.ghost.none::after{display:none}
.ghost.none h4{color:var(--ink);font-size:34px;line-height:1.1}.ghost.none>small:last-child{margin-top:10px;font-size:15px;color:var(--mute)}
.hrp{display:none;background:#fff;border-radius:var(--r-w);padding:32px;margin-bottom:16px}
.hrp iframe{display:block;width:100%;min-height:150px;border:0;background:#fff}
.positions[data-roles="open"] .hrp{display:block}
.positions[data-roles="open"] .ghost{display:none}
.positions[data-roles="open"] .roles{grid-template-columns:1fr}
.positions[data-roles="open"] .hello{min-height:300px}
@media (max-width:760px){
  .hrp{padding:16px;border-radius:30px;margin-bottom:14px}
  .ghost.none h4{font-size:24px}.ghost.none>small:last-child{font-size:13px;margin-top:6px}
}
/* "Say hello" sits on a black card in both themes, so its glass always uses the dark-mode version */
.hello .g-l{display:none}.hello .g-d{display:inline}
/* phone shadow without filter: iPhone Safari draws a filtered image in tiles while it animates, which showed as grey blocks */
.stage .phone{filter:none;border-radius:15%/7.4%;box-shadow:0 30px 60px -12px rgba(0,0,0,.28),0 10px 24px -8px rgba(0,0,0,.12)}
/* AI Video pager: the "03 / 07" counter never breaks onto two lines on phones */
.ctrl span,.ctrl output,.ctrl .n{white-space:nowrap}
@media (max-width:760px){.ctrl{gap:8px}.ctrl button{width:34px;height:34px}}
/* phones: things arrive quicker, so nothing feels like it is still loading */
@media (max-width:760px){
  .js .rv{transition-duration:.55s,.65s;transform:translateY(14px)}
  .js .rv.in{transform:none}
  .js .ph.rv img{transition-duration:.8s}
  .js .stage>*{transition-duration:.5s,.6s}
  .stage .s0{transition-delay:0s}.stage .s1,.stage .note.s1{transition-delay:.2s}.stage .s2{transition-delay:.4s}.stage .s3,.stage .note.s3{transition-delay:.6s}.stage .s4,.stage .adc.s4{transition-delay:.8s}.stage .s5{transition-delay:1s}.stage .s6{transition-delay:1.2s}
}
@media (max-width:760px){.labels .s1{transition-delay:.2s}.labels .s2{transition-delay:.4s}.labels .s3{transition-delay:.6s}.labels .s4{transition-delay:.8s}.labels .s5{transition-delay:1s}.labels .s6{transition-delay:1.2s}}
/* phones: the Modyfy card row scrolls sideways; give it room above and below so tilted cards and their shadows are never cut flat */
@media (max-width:760px){
  .three{padding:18px 20px 40px;margin-top:-18px;margin-bottom:-32px}
}
/* phones: the top fade under the theme button and wordmark is a little taller and more solid, so text scrolling under them stays out of the way */
@media (max-width:760px){body::before{height:92px;background:linear-gradient(var(--bg) 55%,color-mix(in srgb,var(--bg) 70%,transparent) 78%,transparent)}}
/* phones: the Modyfy row snaps cards to the same 20px page margin instead of the screen edge */
@media (max-width:760px){.three{scroll-padding-inline:20px}}
/* the poster painted behind a video stays inside the card's light border, so no dark line shows along the edge */
.film{background-clip:padding-box;background-origin:padding-box}
.film video{inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px)}
/* Open positions empty state ("Stay tuned"), Figma Final v3 option 1 */
.ghost.none{border-color:var(--faint)}
.ghost.none h4{font-size:44px;line-height:1.05}.ghost.none>small:last-child{margin-top:12px;font-size:16px}
@media (max-width:760px){.ghost.none{min-height:200px;padding:22px}.ghost.none h4{font-size:30px}.ghost.none>small:last-child{margin-top:8px;font-size:13px}}