/* Learn more: a full screen for each idea, one large picture and a sentence or two */
.po main{overflow:clip}
.l-text h2,.warn-copy h2,.l-app-copy h2,.l-end h2,.l-open h1{font-size:clamp(2.8rem,6.4vw,6rem);font-weight:300}
.l-text p,.warn-copy p,.l-app-copy p,.l-open-copy p{margin-top:16px;max-width:31em;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.42;color:rgba(242,241,236,.8)}
.po .soft{color:var(--faint);font-size:14px}

.l-open{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden}
.l-open-art{position:absolute;inset:0;display:grid;place-items:start end}
.l-open-art img{width:min(1500px,100%);height:auto;-webkit-mask-image:linear-gradient(#000 70%,transparent 96%);mask-image:linear-gradient(#000 70%,transparent 96%)}
.l-open-copy{position:relative;padding-bottom:clamp(40px,8vh,80px)}

.l-angle{height:360vh}
.l-pin{position:sticky;top:0;height:100svh;overflow:hidden}
#bendCv{position:absolute;inset:0;width:100%;height:100%}
.l-deg{position:absolute;left:max(22px,env(safe-area-inset-left,0px));top:clamp(70px,11vh,110px);font-size:clamp(4.4rem,11vw,10.5rem);line-height:1;font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.l-angle .l-text{position:absolute;left:0;bottom:clamp(30px,7vh,70px)}
.l-angle .l-text p{max-width:23em}

.l-full{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(70px,12vh,120px)}
.reveal-off{opacity:1}

.load-art{position:relative;display:flex;align-items:flex-end;justify-content:space-between;height:52svh;padding:0 max(22px,3vw)}
.load-art b{position:relative;z-index:1;width:clamp(2px,.28vw,4px);height:var(--h);border-radius:3px 3px 0 0;background:rgba(242,241,236,.62);transform:scaleY(.01);transform-origin:bottom;transition:transform 1s var(--out);transition-delay:calc(var(--i)*26ms)}
.load-art b.over{width:clamp(5px,.6vw,9px);background:#E3805A}
.in .load-art b,.load-art.in b{transform:none}
.load-usual{position:absolute;left:0;right:0;bottom:30%;height:22%;background:rgba(61,219,184,.1)}
.g-label{position:absolute;font-size:14px;line-height:1.2;white-space:nowrap;opacity:0;transition:opacity .7s var(--out) .9s}
.in .g-label{opacity:1}
.g-usual{left:max(22px,3vw);bottom:calc(52% + 8px);color:#3DDBB8}
.g-today{right:max(22px,3vw);top:calc(12% - 26px);color:#E3805A}
.g-before{left:47%;top:-24px;color:#3DDBB8}
.g-tap{left:calc(70% + 18px);top:calc(66.6% - 30px);color:#E3805A}

.pain-art{position:relative;height:50svh}
.pain-art svg{width:100%;height:100%;display:block;overflow:visible}
.pain-day{fill:none;stroke:var(--fg);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:3000;stroke-dashoffset:3000;transition:stroke-dashoffset 2.2s var(--out)}
.pain-before{fill:rgba(61,219,184,.13);transform-box:fill-box;transform-origin:right;transform:scaleX(0);transition:transform 1s var(--out) 1.6s}
.pain-tap{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#E3805A;opacity:0;transition:opacity .4s 1.3s}
.pain-tap::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid #E3805A;animation:pulse 2.4s var(--out) infinite}
@keyframes pulse{from{transform:scale(.5);opacity:1}to{transform:scale(1.7);opacity:0}}
.in .pain-day{stroke-dashoffset:0}
.in .pain-before{transform:none}
.in .pain-tap{opacity:1}

.l-warn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(10px,3vw,50px);padding-top:0}
.warn-art{position:relative;padding:clamp(20px,4vw,60px)}
.warn-center{position:absolute;inset:0;display:grid;place-content:center;gap:4px;text-align:center;opacity:0;transition:opacity .8s var(--out) 1.4s}
.in .warn-center{opacity:1}
.warn-center strong{font-size:clamp(1.8rem,3.4vw,3rem);font-weight:300;letter-spacing:-.02em;color:#E3805A}
.warn-center span{font-size:clamp(.85rem,1.1vw,1rem);color:var(--dim)}
.warn-art svg{display:block;width:100%;max-height:84svh}
.warn-art line{stroke:rgba(242,241,236,.16);stroke-width:3;stroke-linecap:round;transition:stroke .28s;transition-delay:calc(var(--i)*18ms)}
.in .warn-art line.lit{stroke:#3DDBB8}
.in .warn-art line.hot{stroke:#E3805A}

.l-app{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(20px,5vw,80px);padding:clamp(40px,8vh,80px) 0}
.phone{justify-self:center;height:min(88svh,820px);aspect-ratio:390/844;padding:9px;border-radius:54px;background:#0a0b0b;box-shadow:0 0 0 1.5px #55595a,0 0 0 3px #1c1e1f,0 50px 120px rgba(0,0,0,.6)}
.phone-screen{position:relative;width:100%;height:100%;border-radius:45px;overflow:hidden;background:#f2f1ec}
.phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone-screen .second{animation:plan 13.5s ease-in-out infinite}
.phone-screen .third{animation:share 13.5s ease-in-out infinite}
/* Today, then the plan, then sending the week to a PT. Each new screen covers the last before it leaves, so Today never shows through */
@keyframes plan{0%,28%{opacity:0}34%,72%{opacity:1}74%,100%{opacity:0}}
@keyframes share{0%,62%{opacity:0}68%,93%{opacity:1}100%{opacity:0}}
.l-app-copy h2{font-size:clamp(2.4rem,4.8vw,4.6rem)}
.l-app-copy p{margin-top:22px}

.l-end{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(70px,13vh,130px)}
.l-end-copy{display:flex;flex-direction:column;align-items:center;gap:22px}
.l-end .fine{margin-top:-8px}
.l-end-art{width:100%;margin-top:20px}

@media (max-width:860px){
  .l-open{min-height:0;display:block;padding-top:70px}
  .l-open-art{position:relative;inset:auto}
  .l-open-art img{width:150%;max-width:none;margin-left:-44%}
  .l-deg{top:72px;left:22px;right:auto}
  .l-warn,.l-app{grid-template-columns:minmax(0,1fr)}
  .l-warn{padding-top:50px}
  .warn-art{padding:22px 22px 0}
  .warn-copy{padding-bottom:50px}
  .l-app-copy{order:-1}
  .phone{height:auto;width:min(76vw,320px)}
  .load-art,.pain-art{height:44svh}
  .l-end-art{overflow:hidden}
  .l-end-art img{width:190%;max-width:none;margin-left:-90%}
}
@media (prefers-reduced-motion:reduce){
  .load-art b,.pain-day,.pain-before,.pain-tap,.warn-art line,.g-label,.warn-center{transition:none}
  .pain-tap::after,.phone-screen .second,.phone-screen .third{animation:none}
  .phone-screen .second,.phone-screen .third{opacity:0}
}