.snd{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.05);color:var(--dim);cursor:pointer;display:grid;place-items:center}
.snd:hover{color:var(--bone)}.snd[aria-pressed="true"]{color:var(--gold);background:rgba(255,194,26,.1)}
.snd svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tools{display:flex;align-items:center;gap:10px}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
label.f{display:grid;gap:8px;font-size:15px;color:var(--soft)}
.reel video,.film video{display:block;width:100%;height:auto}
.plain .sec{padding-block:clamp(70px,9vw,140px)}
.plain .founders{align-items:center}
html.locked .tools{opacity:0;pointer-events:none}
/* type and entrances */
h3{margin:0;font-family:var(--display);font-weight:400;text-wrap:balance;font-size:clamp(28px,2.6vw,38px);line-height:1.08}
.plain h2{margin:0;font-family:var(--display);font-weight:400;text-wrap:balance;font-size:clamp(44px,5.6vw,88px);line-height:1;letter-spacing:-.014em}
.plain .lede{font-size:clamp(18px,1.5vw,21px);color:var(--bone);max-width:32em;margin:24px 0 0}
.note{font-size:14px;color:var(--dim)}
.pname{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:var(--soft);margin-bottom:20px}
.pname i{display:block;width:26px;height:1px;background:var(--gold)}
.bl{display:inline-block;white-space:pre}
.js .bl{opacity:0;transform:translateY(.32em);filter:blur(12px);transition:opacity .7s ease,transform 1s var(--ease),filter .8s ease;transition-delay:calc(var(--i)*62ms)}
.js .seen .bl{opacity:1;transform:none;filter:none}
.js .up{opacity:0;transform:translateY(20px);filter:blur(6px);transition:opacity .75s ease,transform 1s var(--ease),filter .75s ease;transition-delay:var(--d,0ms)}
.js .up.seen{opacity:1;transform:none;filter:none}

/* page sections */
main.page{position:relative;z-index:2}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.sec{padding-block:clamp(90px,12vw,190px)}
.phero{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:clamp(24px,4vw,70px);padding-block:120px 70px}
.stack{position:relative;aspect-ratio:1.28;perspective:1500px}
.stack figure{position:absolute;margin:0;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 100px rgba(0,0,0,.7);will-change:transform;transition:transform .9s var(--ease)}
.stack img{width:100%;height:auto}
.stack .a{left:0;top:5%;width:92%;transform:translateZ(-40px) rotateY(-9deg)}
.stack .b{right:0;bottom:2%;width:56%;transform:translateZ(70px) rotateY(-7deg)}
.stack .c{left:4%;bottom:0;width:38%;transform:translateZ(110px) rotateY(-5deg)}
.stack::before{content:"";position:absolute;inset:-14%;background:radial-gradient(closest-side,rgba(255,180,40,.13),transparent 72%);z-index:-1}

.walk{position:relative;height:calc(var(--n)*90svh + 60svh)}
.walk .pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center;gap:clamp(24px,4vw,70px)}
.steps{position:relative;min-height:15em}
.step{position:absolute;inset:0 0 auto;opacity:0;transform:translateY(24px);filter:blur(6px);transition:opacity .5s ease,transform .75s var(--ease),filter .5s ease;pointer-events:none}
.step.on{opacity:1;transform:none;filter:none}
.step p{color:var(--soft);margin:18px 0 0}
.count{font-size:14px;color:var(--gold);margin-bottom:14px;font-variant-numeric:tabular-nums}
.shots{position:relative;aspect-ratio:1.62;perspective:1600px}
.shot{position:absolute;inset:0;display:grid;align-items:center;margin:0;opacity:0;transform:translateZ(-160px) rotateY(-10deg) translateX(50px);transition:opacity .55s ease,transform .95s var(--ease);pointer-events:none}
.shot.on{opacity:1;transform:rotateY(-4deg)}
.shot.past{opacity:0;transform:translateZ(120px) rotateY(2deg) translateX(-80px)}
.shot img{width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 100px rgba(0,0,0,.72)}
.shot figcaption{position:absolute;right:12px;top:12px;padding:3px 10px;font-size:12px;border-radius:99px;background:rgba(10,11,14,.82);color:var(--soft)}
.bar-p{display:flex;gap:6px;margin-top:26px}
.bar-p i{display:block;height:2px;width:34px;background:rgba(255,255,255,.14);border-radius:2px;transition:background .35s ease}
.bar-p i.on{background:var(--gold)}

.film{position:relative;margin-top:44px;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 120px rgba(0,0,0,.65)}
.film video{width:100%;height:auto}
.feat{display:grid;margin-top:50px}
.feat div{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px 40px;padding:28px 6px;border-top:1px solid var(--line);--x:50%;--y:50%}
.feat div:last-child{border-bottom:1px solid var(--line)}
.feat div::before{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--x) var(--y),rgba(255,194,26,.075),transparent 70%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.feat div:hover::before{opacity:1}
.feat p{margin:0;color:var(--soft)}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,60px);margin-top:46px;padding:clamp(22px,3.4vw,46px);border-radius:24px;background:linear-gradient(170deg,#17181C,#0F1013);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 40px 100px rgba(0,0,0,.5)}
label.f{display:grid;gap:8px;font-size:15px;color:var(--soft)}
.rangeRow{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.rangeRow b{font-family:var(--display);font-weight:400;font-size:34px;color:var(--bone);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold) var(--p,0%),rgba(255,255,255,.14) var(--p,0%))}
input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:rgba(255,255,255,.14)}
input[type=range]::-moz-range-progress{height:3px;background:var(--gold)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:linear-gradient(180deg,#FFE9A8,#FFC21A);box-shadow:0 2px 12px rgba(255,194,26,.5),inset 0 1px 0 #fff}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#FFC21A}
.cur{display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:rgba(255,255,255,.06)}
.cur button{border:0;border-radius:99px;padding:6px 14px;background:transparent;color:var(--soft);font:500 14px var(--sans);cursor:pointer;min-height:34px}
.cur button[aria-pressed="true"]{background:#2A2B30;color:var(--bone);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.price{display:flex;align-items:baseline;gap:8px;margin:10px 0 2px}
.price b{font-family:var(--display);font-weight:400;font-size:clamp(58px,6.6vw,96px);line-height:1;font-variant-numeric:tabular-nums}
details.est{margin-top:24px;border-top:1px solid var(--line);padding-top:12px}
details.est summary{cursor:pointer;color:var(--bone);font-weight:500;font-size:16px;padding:8px 0}
.est .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-top:12px}
.est input,.fm input,.fm select,.fm textarea{width:100%;min-height:48px;padding:12px 14px;border:0;border-radius:11px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:var(--bone);font:400 16px var(--sans)}
.est input:focus,.fm input:focus,.fm select:focus,.fm textarea:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--gold)}
.fm select option{background:#17181C}
.estOut{margin-top:16px;padding:14px 16px;border-radius:12px;background:rgba(255,194,26,.07);font-size:16px}
.estOut b{color:var(--gold);font-weight:600}

/* questions */
.faq{margin-top:40px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 2px;font-family:var(--display);font-size:clamp(24px,2.3vw,32px);line-height:1.15}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0;padding:0 2px 24px;color:var(--soft);max-width:46em}

/* other products, founders, form, footer */
.others{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px;margin-top:40px}
.pcard{position:relative;display:block;overflow:hidden;padding:clamp(22px,2.6vw,34px);border-radius:20px;text-decoration:none;background:linear-gradient(170deg,#17181C,#101114);box-shadow:inset 0 1px 0 rgba(255,255,255,.09);transition:transform .5s var(--ease);--x:50%;--y:0%}
.pcard::before{content:"";position:absolute;inset:0;background:radial-gradient(320px circle at var(--x) var(--y),rgba(255,194,26,.1),transparent 70%);opacity:0;transition:opacity .3s ease}
.pcard:hover::before{opacity:1}
.pcard:hover{transform:translateY(-4px)}
.pcard h3{position:relative;font-size:clamp(34px,3.2vw,46px)}
.pcard p{position:relative;margin:10px 0 0;color:var(--soft)}
.plain{position:relative;z-index:2;background:linear-gradient(180deg,rgba(10,11,14,0),var(--ink) 18vh)}
.founders{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:center}
.reel{border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 90px rgba(0,0,0,.6);max-width:420px}
.names{display:flex;flex-wrap:wrap;gap:10px 40px;margin-top:26px}
.names b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,42px);line-height:1.1}
.names span{color:var(--dim);font-size:15px}
.book{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:start}
.fm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:clamp(22px,3vw,40px);border-radius:24px;background:linear-gradient(170deg,#17181C,#0F1013);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 40px 100px rgba(0,0,0,.5)}
.fm .full{grid-column:1/-1}
.fm .err{display:block;color:#F0917F;font-size:14px;min-height:21px;line-height:21px}
.fm select{height:48px;padding-block:0}
.fm textarea{min-height:110px;resize:vertical}
#fmDone{grid-column:1/-1;padding:14px 16px;border-radius:12px;background:rgba(255,194,26,.08);font-size:16px}
footer.ft{position:relative;z-index:2;background:var(--ink);padding-block:70px 34px}
.ftTop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px}
.ftTop a{display:block;color:var(--soft);text-decoration:none;padding:4px 0;font-size:16px}
.ftTop a:hover{color:var(--bone)}
.ftTop b{display:block;font-weight:500;font-size:14px;color:var(--dim);margin-bottom:8px}
.ftWord{width:100%;height:auto;margin:70px 0 24px;opacity:.92}
.ftNote{font-size:14px;color:var(--dim);max-width:60em}

@media (max-width:900px),(max-aspect-ratio:1/1){
  nav.main{display:none}
  .phero{grid-template-columns:minmax(0,1fr);padding-top:110px;min-height:auto}
  .walk{height:calc(var(--n)*85svh + 50svh)}
  .walk .pin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;padding-top:82px;gap:18px}
  .walk .shots{order:-1}
  .steps{min-height:16em}
  .step h3{font-size:30px}
  .calc,.book,.founders{grid-template-columns:minmax(0,1fr)}
  .feat div{grid-template-columns:minmax(0,1fr)}
  .fm{grid-template-columns:minmax(0,1fr)}
  .reel{max-width:330px}
}
@media (prefers-reduced-motion:reduce){.js .bl,.js .up,.step,.shot{transition:none;filter:none}.js .bl,.js .up{opacity:1;transform:none}.key.gold::after{animation:none}}

.key{white-space:nowrap}
.fhero{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
@media (max-width:900px),(max-aspect-ratio:1/1){.fhero{grid-template-columns:minmax(0,1fr)}.fhero .reel{max-width:300px;justify-self:start}}
@media (max-width:480px){.brand .m{height:32px}.brand .w{height:12px}header.bar{gap:10px}.tools{gap:6px}.tools .key{padding:10px 13px;font-size:14px}.snd{width:34px;height:34px}}

header{gap:10px}
@media (max-width:480px){header .tools .key{padding:10px 13px;font-size:14px}header .brand .m{height:32px}header .brand .w{height:12px}}
.caret{max-width:3px}