/* Nescroll landing v6 — light monochrome, product-first, scroll scenes driven by --p (0..1) from app.js. */
:root{
  --snow:#F2F2EF; --white:#FFFFFF; --black:#000000; --graphite:#1C1D1F; --stone:#77797C; --fog:#D6D7D5;
  --display:"Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body:"Instrument Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gut:clamp(20px,4vw,56px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--snow);color:var(--black);font:400 17px/1.6 var(--body)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:50;background:#fff;padding:8px 12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{font-family:var(--display);font-stretch:75%;font-weight:650;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(38px,5.4vw,76px);line-height:.98;margin-bottom:clamp(28px,4vw,52px)}
h3{font-size:clamp(24px,2.4vw,32px);line-height:1.05}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:20;transition:background .3s}
.top.solid{background:rgba(242,242,239,.82);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--fog)}
.row{display:flex;align-items:center;gap:28px;height:72px}
.lockup{display:flex;align-items:center;gap:10px;text-decoration:none}
.lockup img{border-radius:9px}
.lockup b{display:block;font-family:var(--display);font-stretch:75%;font-size:22px;font-weight:650;line-height:1}
.lockup small{display:flex;align-items:center;gap:4px;font-size:12px;opacity:.65;line-height:1.3}
.mkm{width:12px;height:12px;border-radius:3px}
.top nav{display:flex;gap:26px;margin-left:auto;font-size:15px}
.top nav a{text-decoration:none;opacity:.7}.top nav a:hover{opacity:1}
.pillbtn{padding:9px 16px;border-radius:999px;background:#000;color:#fff;text-decoration:none;font-size:14px;font-weight:600}

/* phone frame shared */
.ph{border-radius:46px;padding:9px;background:#000;box-shadow:0 50px 100px -40px rgba(0,0,0,.55)}
.ph img{border-radius:38px;filter:grayscale(1)}

/* 1. hero */
.hero{position:relative;min-height:100svh;padding-top:120px;overflow:hidden}
.hero-in{position:relative;z-index:2}
.hero-h{font-size:clamp(68px,12.5vw,210px);line-height:.84;letter-spacing:-.04em;font-weight:750}
.hero-h span{display:block;animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.hero-h span+span{animation-delay:.12s;color:var(--stone)}
.lead{max-width:30em;margin:28px 0 0;font-size:clamp(17px,1.4vw,20px);color:var(--graphite);animation:rise 1s .25s both}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px;animation:rise 1s .35s both}
.btn{display:inline-flex;align-items:center;padding:16px 26px;border-radius:999px;background:#000;color:#fff;font-weight:600;text-decoration:none;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.status{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--graphite)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:#000;animation:blink 2.4s ease-in-out infinite}
.traits{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:34px 0 0;animation:rise 1s .45s both}
.traits li{padding:7px 14px;border:1px solid var(--fog);border-radius:999px;font-size:14px;background:var(--white)}
.hero-phone{position:absolute;right:max(var(--gut),calc(50vw - 640px));bottom:-120px;width:clamp(240px,23vw,330px);z-index:1;
  transform:translateY(calc(var(--hy,0) * 1px)) rotate(calc(-6deg + var(--hr,0) * 1deg));animation:phoneIn 1.2s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes phoneIn{from{opacity:0;translate:0 120px}to{opacity:1;translate:0 0}}
@keyframes blink{50%{opacity:.25}}

/* 2. story: pinned phone, one platform per step */
.story{height:330vh;position:relative;background:var(--white)}
.story-pin{position:sticky;top:0;height:100svh;display:grid;align-items:center;overflow:hidden}
.story-in{display:grid;grid-template-columns:1fr auto;gap:clamp(40px,8vw,140px);align-items:center}
.story-copy{list-style:none;margin:0;padding:0;display:grid}
.story-copy li{grid-area:1/1;opacity:0;transform:translateY(40px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.story-copy li.on{opacity:1;transform:none}
.story-copy h2{font-size:clamp(56px,8vw,128px);margin-bottom:18px}
.story-copy p{font-size:clamp(18px,1.6vw,22px);max-width:24em;margin:0;color:var(--graphite)}
.mock{margin:0;text-align:center}
.mphone{position:relative;width:clamp(240px,22vw,300px);aspect-ratio:9/19;border-radius:46px;border:10px solid #000;background:#fff;overflow:hidden;box-shadow:0 50px 100px -40px rgba(0,0,0,.5)}
.mscreen{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:16px 12px 0;opacity:0;transform:translateX(30px);transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1)}
.mscreen.on{opacity:1;transform:none}
.mbar{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 0}
.mbar b{font-family:var(--display);font-stretch:75%;font-size:22px}
.stories{display:flex;gap:8px}.stories i{width:42px;height:42px;border-radius:50%;border:2px solid #000;background:var(--fog)}
.post{display:flex;gap:8px;padding:10px;border-radius:14px;background:var(--snow)}
.post .av{flex:none;width:26px;height:26px;border-radius:50%;background:#000}
.post span{flex:1;height:86px;border-radius:9px;background:var(--fog)}.post span.short{height:34px}
.vid{height:96px;border-radius:12px;background:#2a2a2a}.vmeta{height:12px;width:70%;border-radius:6px;background:var(--fog)}
.shelf{padding:8px;border-radius:12px;background:var(--snow);position:relative}
.shelf b{font-size:12px}.shelf div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:6px}.shelf i{height:74px;border-radius:8px;background:#bdbdbd}
.mtabs{margin-top:auto;display:flex;justify-content:space-around;padding:12px 4px 18px;border-top:1px solid var(--fog);font-size:11px;font-weight:600}
.mtabs span{position:relative}
.x{position:relative;transition:opacity .4s .5s}
.x::after{content:"";position:absolute;left:-6%;right:-6%;top:50%;height:3px;background:#000;transform:rotate(-8deg) scaleX(0);transform-origin:left;transition:transform .45s .15s cubic-bezier(.6,0,.2,1)}
.mscreen.on .x::after{transform:rotate(-8deg) scaleX(1)}
.mscreen.on .x{opacity:.25}
.mock figcaption{margin-top:14px;font-size:13px;color:var(--stone)}

/* 3. off: chips switched off one by one */
.off{height:240vh;position:relative;background:#000;color:#fff}
.off-pin{position:sticky;top:0;height:100svh;display:grid;align-items:center;overflow:hidden}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px;max-width:1100px}
.chips li{position:relative;padding:14px 22px;border-radius:999px;border:1.5px solid #fff;font-family:var(--display);font-stretch:85%;font-size:clamp(20px,2.4vw,34px);font-weight:600;transition:opacity .4s,background .4s,color .4s,transform .4s}
.chips li::after{content:"";position:absolute;left:14px;right:14px;top:50%;height:3px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.6,0,.2,1)}
.chips li.offd{opacity:.35;transform:scale(.96)}
.chips li.offd::after{transform:scaleX(1)}
.stays{margin:44px 0 0;max-width:40em;font-size:clamp(18px,1.6vw,22px);color:rgba(255,255,255,.6);transition:color .5s}
.off.done .stays{color:#fff}

/* 4. zoom on the real app */
.zoom{height:280vh;position:relative;background:var(--snow)}
.zoom-pin{position:sticky;top:0;height:100svh;display:grid;align-items:center;overflow:hidden}
.zoom-in{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}
.zoom-copy{display:grid}
.zc{grid-area:1/1;margin:0;font-family:var(--display);font-stretch:75%;font-weight:650;font-size:clamp(40px,5.6vw,84px);line-height:.98;letter-spacing:-.02em;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .6s}
.zc.on{opacity:1;transform:none}
.zoom-phone{margin:0;width:clamp(240px,24vw,330px);transform:scale(calc(.62 + .5 * var(--p,0))) rotate(calc(8deg - 8deg * var(--p,0)));transform-origin:50% 40%}
.zoom-phone figcaption{margin-top:14px;font-size:13px;color:var(--stone);text-align:center}

/* 5. read */
.read{height:200vh;position:relative}
.read-pin{position:sticky;top:0;height:100svh;display:grid;align-items:center}
.read-text{margin-block:0;font-family:var(--display);font-stretch:85%;font-weight:600;font-size:clamp(34px,5vw,74px);line-height:1.04;letter-spacing:-.02em}
[data-words] .w{opacity:.14;transition:opacity .2s}
[data-words] .w.lit{opacity:1}

/* 6. time */
.time{background:#000;color:#fff;padding-block:clamp(90px,12vw,170px)}
.calc-line{margin:0;font-family:var(--display);font-stretch:75%;font-weight:600;font-size:clamp(40px,6vw,88px);line-height:1.02;letter-spacing:-.02em;max-width:15em}
.calc-line b{font-weight:700;font-variant-numeric:tabular-nums}
.num input{width:2.3ch;font:inherit;color:#fff;background:transparent;border:0;border-bottom:3px solid #fff;text-align:center;padding:0;-moz-appearance:textfield}
.num input::-webkit-inner-spin-button,.num input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.range{width:min(560px,100%);margin:44px 0 0;accent-color:#fff}
.time-sub{margin:24px 0 0;max-width:42em;color:rgba(255,255,255,.66)}.time-sub b{color:#fff}

/* 7–8 */
.block{padding-block:clamp(88px,11vw,160px)}
.two{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.two > div{border-top:1px solid var(--black);padding:22px 0 40px}
.two p{margin:12px 0 0;max-width:34em;color:var(--graphite)}
.faq{border-top:1px solid var(--black);max-width:920px}
.faq details{border-bottom:1px solid var(--fog)}
.faq summary{cursor:pointer;list-style:none;padding:24px 40px 24px 0;position:relative;font-family:var(--display);font-stretch:85%;font-size:clamp(20px,1.8vw,26px);font-weight:550}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:14px;height:14px;border-right:2px solid;border-bottom:2px solid;transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-20%) rotate(225deg)}
.faq p{margin:0 0 26px;max-width:40em;color:var(--graphite)}

/* 9. finale */
.finale{height:190vh;position:relative;background:var(--white)}
.finale-pin{position:sticky;top:0;height:100svh;display:grid;place-content:center;text-align:center;overflow:hidden}
.big{margin:0;font-family:var(--display);font-stretch:75%;font-weight:800;line-height:.85;letter-spacing:-.04em;font-size:clamp(80px,17vw,300px);transform:scale(calc(.6 + .4 * var(--p,0)));opacity:calc(.2 + var(--p,0))}
.finale-sub{margin:28px 0 0;font-size:clamp(18px,1.6vw,22px);opacity:calc(var(--p,0) * 1.6)}

/* contact, more, footer */
.contact{background:var(--fog)}
.contact-in{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;padding-block:clamp(80px,10vw,140px)}
.contact h2{margin:0}
.contact p{margin:0 0 22px;max-width:30em}
.ci{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--black)}
.ci a{font-family:var(--display);font-stretch:85%;font-size:clamp(22px,2vw,28px);font-weight:600;text-decoration:none}
.copy{border:1px solid var(--black);background:transparent;border-radius:999px;padding:7px 14px;font:600 13px var(--body);cursor:pointer}
.copy:hover{background:#000;color:#fff}
.more-sec{padding-bottom:clamp(60px,8vw,110px)}
.more-sec h2{font-size:clamp(30px,3.4vw,46px)}
.more{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--black)}
.more li{border-right:1px solid var(--fog)}.more li:last-child{border-right:0}
.more a,.more .here{display:flex;flex-direction:column;gap:2px;padding:18px 16px;text-decoration:none;height:100%}
.more a:hover{background:#fff}
.more .here{background:#000;color:#fff}
.more .here img{border-radius:7px;margin-bottom:8px}
.more b{font-family:var(--display);font-stretch:85%;font-size:19px;font-weight:600}
.more span{font-size:13px;color:var(--stone)}
.foot{background:var(--black);color:#fff;padding:72px 0 36px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.fgrid p{color:rgba(255,255,255,.6);max-width:24em}
.fgrid h4{margin:4px 0 12px;font-size:14px;font-weight:600;color:rgba(255,255,255,.55)}
.fgrid > div > a:not(.lockup){display:block;margin:7px 0;text-decoration:none;font-size:15px}
.fgrid > div > a:hover{text-decoration:underline}
.fbot{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);font-size:13px;color:rgba(255,255,255,.55)}
.fbot p{margin:4px 0}

/* legal page */
.sec{padding-block:120px 80px}
.kicker{margin:0 0 8px;font-size:14px;color:var(--stone)}

@media (max-width:980px){
  .top nav{display:none}
  .hero{padding-top:100px;min-height:auto;padding-bottom:0}
  .hero-phone{position:relative;right:auto;bottom:auto;margin:48px auto -140px;width:240px}
  .hero{padding-bottom:0}
  .story{height:300vh}
  .story-in{grid-template-columns:1fr;gap:20px;align-content:center}
  .story-copy h2{font-size:48px;margin-bottom:8px}.story-copy p{font-size:16px}
  .mock{justify-self:center}.mphone{width:min(230px,58vw)}.mock figcaption{display:none}
  .zoom-in{grid-template-columns:1fr;gap:24px}
  .zoom-phone{justify-self:center;width:220px}
  .zc{font-size:34px}
  .two{grid-template-columns:1fr}
  .contact-in{grid-template-columns:1fr}
  .more{grid-template-columns:repeat(2,1fr)}.more li{border-bottom:1px solid var(--fog)}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-height:740px) and (max-width:980px){.mphone{width:190px}.post span{height:60px}.shelf i{height:52px}}
@media (max-width:520px){.pillbtn{display:none}}
@media (prefers-reduced-motion:reduce){
  .hero-h span,.lead,.cta,.traits,.hero-phone,.status::before{animation:none}
  .story,.off,.zoom,.read,.finale{height:auto}
  .story-pin,.off-pin,.zoom-pin,.read-pin,.finale-pin{position:relative;height:auto;padding-block:100px}
  .story-copy li,.zc{grid-area:auto;opacity:1;transform:none;margin-bottom:24px}
  .mscreen{position:relative;opacity:1;transform:none}.mscreen:not([data-i="0"]){display:none}
  .x::after,.chips li::after{transform:scaleX(1);transition:none}.chips li{opacity:.4}
  [data-words] .w{opacity:1}.zoom-phone,.big{transform:none;opacity:1}.finale-sub{opacity:1}
}