:root{--dark:rgb(6,6,6);--light:#e4e4e4;--line-d:rgba(255,255,255,.08);--line-l:rgba(0,0,0,.08)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--dark);color:#fff;font:400 16px/1.6 "Inter Display","Inter",sans-serif;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.mono{font:400 13px/1.45 "Geist Mono",monospace;letter-spacing:.02em}
.progress{position:fixed;left:0;top:0;right:0;height:2px;background:#fff;mix-blend-mode:difference;transform:scaleX(0);transform-origin:0 50%;z-index:20}
header{position:fixed;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:28px 40px;mix-blend-mode:difference;z-index:10}
header svg{height:36px;width:auto;display:block;color:#fff}
header a.back{color:#fff;text-decoration:none}
header a.back:hover{text-decoration:underline}
.band{position:relative;padding:120px 40px;background-size:25% 100%}
.band.d{background-color:var(--dark);color:#fff;background-image:linear-gradient(90deg,var(--line-d) 1px,transparent 1px)}
.band.l{background-color:var(--light);color:#060606;background-image:linear-gradient(90deg,var(--line-l) 1px,transparent 1px)}
.hero{min-height:88vh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:160px;padding-bottom:64px}
.tag{display:flex;align-items:center;gap:10px;text-transform:uppercase;margin-bottom:22px}
.tag:before{content:"";width:25px;height:11px;background:repeating-linear-gradient(120deg,currentColor 0 3px,transparent 3px 6px)}
h1,h2,h3{font-weight:400;margin:0}
h1{font-size:clamp(46px,7vw,100px);line-height:1.02;letter-spacing:-.03em;max-width:1050px}
h2{font-size:clamp(34px,4.2vw,60px);line-height:1.06;letter-spacing:-1.8px;max-width:760px;margin-bottom:22px}
h3{font-size:22px;line-height:1.25;letter-spacing:-.2px;margin-bottom:10px}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.45;max-width:720px;margin:26px 0 0;color:rgba(255,255,255,.82)}
.col{margin-left:25%;max-width:calc(62% - 40px);padding-left:-10px}
.col p{margin:0 0 16px;font-size:18px;line-height:1.55}
.d .soft,.d .col p{color:rgba(255,255,255,.76)}
.l .soft,.l .col p{color:rgba(0,0,0,.68)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin:64px -40px -64px;border-top:1px solid var(--line-d)}
.facts div{padding:22px 40px 26px}
.facts span{display:block;color:rgba(255,255,255,.55);text-transform:uppercase;margin-bottom:8px}
.facts b{font-weight:400;font-size:17px;line-height:1.35;display:block}
.frame{border:1px solid rgba(128,128,128,.28);background:#111;overflow:hidden}
.frame .bar{display:flex;gap:6px;align-items:center;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55)}
.frame .bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3)}
.frame .bar em{font-style:normal;margin-left:10px}
.frame .view{overflow:hidden}
.frame img{width:100%;height:auto;transition:scale 1s cubic-bezier(.2,.7,.2,1)}
.frame:hover img{scale:1.025}
.shot-wide{padding:0 40px;background:var(--dark)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);margin:56px -40px -120px;border-top:1px solid var(--line-l)}
.d .grid{border-color:var(--line-d)}
.grid article{padding:32px 40px 48px;border-right:1px solid var(--line-l);border-bottom:1px solid var(--line-l);transition:background .3s ease}
.d .grid article{border-color:var(--line-d)}
.grid article:hover{background:rgba(128,128,128,.09)}
.grid .n{display:block;margin-bottom:34px;opacity:.55}
.grid p{margin:0;font-size:16px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split p{margin:0 0 14px;font-size:18px;line-height:1.55}
.d .split p{color:rgba(255,255,255,.76)}
.l .split p{color:rgba(0,0,0,.68)}
.note{margin-top:14px;opacity:.62}
.mock{background:#0b0b0b;color:#fff;border:1px solid rgba(128,128,128,.3);padding:24px}
.mock header,.mock .h{position:static;mix-blend-mode:normal;padding:0}
.mock .h{display:flex;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12)}
.mock .h strong{font-weight:400;font-size:20px;letter-spacing:-.2px}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);transition:opacity .4s ease}
.pill{flex:none;padding:3px 10px;border:1px solid rgba(255,255,255,.3);text-transform:uppercase;font-size:11px;transition:background .35s ease,color .35s ease}
.pill.ok{background:#fff;color:#060606}
.pill.ask{border-style:dashed}
.js .row.wait{opacity:.28}
.js .row.wait .pill{background:transparent;color:transparent;border-color:rgba(255,255,255,.15)}
.ask-box{margin-top:16px;padding:14px;background:rgba(255,255,255,.08);transition:opacity .5s ease,translate .5s ease}
.js .ask-box.wait{opacity:0;translate:0 10px}
.versus{display:grid;grid-template-columns:1fr 1fr;margin-top:40px;border:1px solid var(--line-l)}
.versus>div{padding:30px}
.versus>div+div{background:#060606;color:#fff}
.versus ul{margin:14px 0 0;padding:0;list-style:none}
.versus li{padding:9px 0;border-top:1px solid rgba(128,128,128,.28)}
.quote{font-size:clamp(30px,4.2vw,60px);line-height:1.1;letter-spacing:-1.6px;max-width:1040px;margin:0 0 0 25%}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.trio figcaption,.pair figcaption{margin-top:10px;opacity:.62}
figure{margin:0}
.pair{display:grid;grid-template-columns:2.15fr 1fr;gap:24px;margin-top:56px;align-items:start}
.pair.even{grid-template-columns:1fr 1fr;margin-top:24px}
.flow{list-style:none;margin:56px -40px -120px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-l)}
.flow li{position:relative;padding:28px 40px 44px;border-right:1px solid var(--line-l);border-bottom:1px solid var(--line-l);color:rgba(0,0,0,.66);font-size:15.5px;line-height:1.4;transition:background .45s ease,color .45s ease}
.flow li span{display:block;margin-bottom:38px;opacity:.6}
.flow li b{display:block;font-weight:400;font-size:22px;letter-spacing:-.2px;color:#060606;margin-bottom:8px;transition:color .45s ease}
.flow li:after{content:"";position:absolute;right:-5px;top:50%;width:9px;height:9px;border-top:1px solid #060606;border-right:1px solid #060606;transform:rotate(45deg);background:var(--light);z-index:1}
.flow li:nth-child(4n):after,.flow li:last-child:after{display:none}
.flow li.on{background:#060606;color:rgba(255,255,255,.75)}
.flow li.on b{color:#fff}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px}
.ba figure{position:relative}
.ba figure>span{position:absolute;left:14px;top:14px;z-index:2;background:#060606;color:#fff;padding:5px 11px;text-transform:uppercase}
.ba .after>span{background:#fff;color:#060606}
.ba .view{aspect-ratio:4/3;overflow:hidden;background:#222}
.ba img{width:100%;height:100%;object-fit:cover;transition:scale 1s cubic-bezier(.2,.7,.2,1)}
.ba figure:hover img{scale:1.03}
.game{max-width:440px;margin:0 auto;background:#0b0b0b;color:#fff;border:1px solid rgba(128,128,128,.3);padding:22px}
.game .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.meter{height:6px;background:rgba(255,255,255,.14);margin-bottom:20px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:#fff;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.game h3{font-size:21px;margin-bottom:16px;min-height:52px}
.game button{display:block;width:100%;text-align:left;font:400 16px/1.3 "Inter Display","Inter",sans-serif;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.26);padding:13px 14px;margin-bottom:8px;cursor:pointer;transition:background .2s ease,color .2s ease,translate .2s ease}
.game button:hover:not(:disabled){translate:3px 0;background:rgba(255,255,255,.08)}
.game button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.game button.right{background:#fff;color:#060606}
.game button.wrong{border-style:dashed;opacity:.5}
.game button:disabled{cursor:default}
.feedback{min-height:44px;margin:12px 0 0;opacity:.8}
.result{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid var(--line-d)}
.l .result{border-color:var(--line-l)}
.result li{display:grid;grid-template-columns:25% 1fr;gap:0;padding:24px 0;border-bottom:1px solid var(--line-d);font-size:clamp(20px,2vw,26px);line-height:1.3;letter-spacing:-.3px}
.l .result li{border-color:var(--line-l)}
.result span{opacity:.55;letter-spacing:.02em;font-size:13px;padding-top:7px}
.cta{display:inline-flex;align-items:center;gap:14px;margin-top:30px;background:#fff;color:#060606;padding:12px 22px;text-decoration:none;transition:translate .28s cubic-bezier(.2,.7,.2,1)}
.cta:hover{translate:0 -2px}
.cta.alt{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);margin-left:10px}
.l .cta{background:#060606;color:#fff}
.next{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:44px 40px;text-decoration:none;background:var(--light);color:#060606}
.next strong{font-weight:400;font-size:clamp(28px,4vw,56px);letter-spacing:-1.4px;transition:translate .35s cubic-bezier(.2,.7,.2,1)}
.next:hover strong{translate:10px 0}
footer{border-top:1px solid var(--line-d);padding:24px 40px;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;color:rgba(255,255,255,.65);background:var(--dark)}
footer a{color:inherit}
footer nav{display:flex;gap:20px}
/* Motion: hidden states exist only once case.js has added .js */
.gg-wm{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.gg-w{display:inline-block}
.js .pre-h .gg-w{translate:0 115%}
.js .pre{opacity:0}
@media(max-width:1000px){
  .col{margin-left:0;max-width:none}
  .quote{margin-left:0}
  .split{grid-template-columns:1fr;gap:40px}
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow li:after{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .band{padding:84px 20px;background-size:50% 100%}
  .hero{padding-top:130px;padding-bottom:40px;min-height:0}
  header{padding:20px}
  header svg{height:30px}
  .shot-wide{padding:0 20px}
  .grid{grid-template-columns:1fr;margin:44px -20px -84px}
  .grid article{padding:26px 20px 34px;border-right:0}
  .facts{margin:44px -20px -40px;grid-template-columns:1fr 1fr}
  .facts div{padding:16px 20px 18px}
  .trio,.pair,.pair.even,.versus,.ba{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;margin:44px -20px -84px}
  .flow li{padding:22px 20px 26px;border-right:0}
  .flow li span{margin-bottom:16px}
  .result li{grid-template-columns:1fr;gap:6px}
  .next{padding:32px 20px}
  footer{padding:20px}
  .cta.alt{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.js .pre{opacity:1}.js .pre-h .gg-w{translate:none}}