/* RECO home: one pinned film. The page holds still and scrolling only moves the film forward. */
.flow{position:relative;height:1000vh;background:var(--bg)}
.flow .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
#flowCv{position:absolute;inset:0;width:100%;height:100%}
.veil{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;background:linear-gradient(rgba(13,18,18,0) 46%,rgba(13,18,18,.86) 82%)}
.words{position:absolute;inset:0;pointer-events:none;z-index:2}
.w{position:absolute;left:max(22px,env(safe-area-inset-left,0px));right:max(22px,env(safe-area-inset-right,0px));opacity:0;transform:translateY(10px);transition:opacity .6s var(--out),transform .6s var(--out)}
.w.on{opacity:1;transform:none}
.w h1,.w h2{margin:0;font-weight:420;letter-spacing:-.022em;line-height:1.02;color:var(--fg);text-wrap:balance}
.w em{font-style:normal;color:var(--mint)}
.low{bottom:calc(40px + env(safe-area-inset-bottom,0px))}
.low h1,.low h2{font-size:clamp(2.6rem,6.4vw,6rem)}
.right{text-align:right}
.mid{top:50%;transform:translateY(calc(-50% + 10px));text-align:center}
.mid.on{transform:translateY(-50%)}
.mid h2{font-size:clamp(3rem,10.5vw,10rem);text-shadow:0 2px 40px rgba(0,0,0,.35)}
.side{top:50%;transform:translateY(calc(-50% + 10px));max-width:46vw}
.side.on{transform:translateY(-50%)}
.side .huge{font-size:clamp(3.4rem,8.2vw,8rem);line-height:1}
.side p{margin-top:24px;font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.4;color:rgba(242,241,236,.8)}
.eyebrow{display:block;margin-bottom:22px;font:400 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,241,236,.72)}
.cue{position:absolute;z-index:2;right:max(22px,env(safe-area-inset-right,0px));bottom:calc(40px + env(safe-area-inset-bottom,0px));font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,241,236,.6);transition:opacity .4s}
.cue i{display:inline-block;width:1px;height:14px;margin-right:10px;vertical-align:-3px;background:currentColor}
/* the angle, read off the tape */
.deg{position:absolute;z-index:2;left:0;right:0;top:calc(88px + env(safe-area-inset-top,0px));pointer-events:none;opacity:0;transition:opacity .45s}
.deg.on{opacity:1}
.deg strong{display:block;font:300 clamp(4.2rem,10vw,9.5rem)/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--fg)}
.gauge{width:min(240px,42vw);height:3px;margin-top:14px;border-radius:3px;background:rgba(242,241,236,.16);overflow:hidden}
.gauge i{display:block;height:100%;width:0;background:var(--fg)}
.deg span{display:block;margin-top:12px;font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,241,236,.62)}
/* the phone: a real screen, sharp and straight on */
.device{position:absolute;z-index:1;right:clamp(28px,10vw,170px);top:50%;height:min(84svh,780px);aspect-ratio:390/844;padding:9px;border-radius:56px;background:#0a0b0b;box-shadow:0 0 0 1.5px #55595a,0 0 0 3px #1c1e1f,0 50px 120px rgba(0,0,0,.65);opacity:0;visibility:hidden;transform:translateY(calc(-50% + var(--rise,0px)));will-change:transform,opacity}
.device::after{content:"";position:absolute;left:50%;top:21px;width:27%;height:3.2%;border-radius:20px;background:#050505;transform:translateX(-50%)}
.screen{position:relative;width:100%;height:100%;border-radius:47px;overflow:hidden;background:#f2f1ec}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the end of the film */
.join{top:50%;transform:translateY(calc(-50% + 10px));text-align:center;pointer-events:none}
.join.on{transform:translateY(-50%);pointer-events:auto}
.join .cta{display:inline-flex;align-items:baseline;gap:.34em;color:var(--fg);font-size:clamp(2.9rem,8.6vw,8.4rem)}
.join .cta h2{font-size:inherit}
.join .arrow{font-size:.8em;line-height:1;transition:transform .3s var(--out)}
.join .cta:hover .arrow{transform:translateX(.12em)}
.join .cta:focus-visible{outline:2px solid var(--teal);outline-offset:8px}
.join p{margin-top:26px;font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.45;color:rgba(242,241,236,.74)}
.join .tester{margin-top:8px;color:rgba(242,241,236,.5);font-size:.92rem}
@media (max-width:760px){
  .device{right:auto;left:50%;top:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));height:min(68svh,600px);padding:7px;border-radius:44px;transform:translate(-50%,var(--rise,0px))}
  .device::after{top:15px}
  .screen{border-radius:37px}
  .up{top:calc(84px + env(safe-area-inset-top,0px));bottom:auto}
  .right{text-align:left}
  .up h1,.up h2{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  .deg{top:auto;bottom:calc(36px + env(safe-area-inset-bottom,0px))}
  .deg strong{font-size:clamp(4rem,20vw,6rem)}
  .join .cta{flex-direction:column;align-items:center;gap:.1em}
  .side{top:auto;bottom:calc(40px + env(safe-area-inset-bottom,0px));max-width:none;transform:translateY(10px)}
  .side.on{transform:none}
  .side .huge{font-size:clamp(2.8rem,14vw,4.4rem)}
  .eyebrow{margin-bottom:12px}
  .side p{margin-top:12px}
  .mid h2{font-size:clamp(2.8rem,14vw,4.6rem)}
}
@media (prefers-reduced-motion:reduce){.w,.veil,.cue,.deg,.join .arrow{transition:none}}