/* Prota landing page.
   Direction A: Prota is a scanner you point at dinner. Blue field, giant type behind real hands.
   Every section has its own layering move; see DIRECTION.md. Colours and type are the app's. */
@font-face{font-family:Urbanist;font-weight:900;font-display:swap;src:url(assets/Urbanist-Black.woff2) format("woff2")}
@font-face{font-family:Urbanist;font-weight:700;font-display:swap;src:url(assets/Urbanist-Bold.woff2) format("woff2")}
@font-face{font-family:Urbanist;font-weight:500;font-display:swap;src:url(assets/Urbanist-Medium.woff2) format("woff2")}

:root{
  --blue:#2F5BFF;--blue-hi:#3C6BFF;--blue-lo:#2449E6;--deep:#1B38C4;--grams:#2043D9;
  --ink:#0D1629;--ground:#EDF1FF;--white:#fff;--night:#060A1C;--mist:#C7D0EA;
  --gut:clamp(20px,6vw,104px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0}
html{background:var(--blue);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:Urbanist,system-ui,-apple-system,sans-serif;color:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}

.btn{display:inline-flex;align-items:center;min-height:56px;padding:0 28px;border-radius:18px;background:var(--white);color:var(--deep);font-weight:900;font-size:19px;text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.blue :focus-visible,.hero :focus-visible,.nav :focus-visible,.end :focus-visible,.foot :focus-visible{outline-color:#fff}

.nav{position:absolute;z-index:6;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,3vw,44px)}
.logo{font-weight:900;font-size:30px;letter-spacing:-.8px;color:#fff;text-decoration:none}

/* 1. Hero */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;color:#fff;background:linear-gradient(180deg,var(--blue-hi) 0,var(--blue) 50%,var(--blue-lo) 100%)}
.giant{position:absolute;z-index:1;left:50%;top:clamp(58px,9svh,92px);transform:translateX(-50%);font-weight:900;font-size:min(31vw,max(200px,calc(83.5svh - 294px)));line-height:.86;letter-spacing:-.035em;white-space:nowrap}
.hand{position:absolute;z-index:2;bottom:-3svh;left:60%;transform:translateX(-50%);height:75svh;aspect-ratio:1500/1354;container-type:inline-size;filter:drop-shadow(0 30px 40px rgba(6,16,70,.34))}
.hand>img{position:absolute;inset:0;width:100%;height:100%}
.scr{position:absolute;left:34.77%;top:1.85%;width:36.36%;height:88.17%;overflow:hidden;background:var(--ink)}
.scr>img{position:absolute;left:-68%;top:-2%;width:236%;max-width:none;aspect-ratio:1;object-fit:cover}
.ln{position:absolute;left:0;right:0;height:18%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.34) 96%,#fff 96%)}
.card{position:absolute;left:4.5%;right:4.5%;bottom:2.4%;background:#fff;border-radius:3.4cqw;padding:2.2cqw 2.6cqw 2.4cqw;color:var(--ink)}
.nm{font-size:3.1cqw;line-height:1.15;font-weight:700}
.g{font-size:9.8cqw;line-height:1;font-weight:900;letter-spacing:-.03em;color:var(--grams);font-variant-numeric:tabular-nums}
.g small{font-size:3.4cqw;letter-spacing:0;font-weight:700;margin-left:.6cqw}
.copy{position:absolute;z-index:5;left:clamp(20px,3vw,44px);bottom:clamp(28px,5svh,52px);width:min(440px,27vw)}
h1{font-weight:900;font-size:clamp(34px,min(3.5vw,5.6svh),52px);line-height:1.02;letter-spacing:-.025em}
.copy p{font-weight:500;font-size:19px;line-height:1.35;margin:14px 0 22px}

/* Phone in hand. The real screen sits behind the punched-out hand. */
.mk{position:relative;margin:0;container-type:inline-size}
.mk>img,.mk>.s{position:absolute;display:block}
.mk .s{object-fit:cover;object-position:top;border-radius:6%/2.8%;overflow:hidden}
.mk .h{inset:0;width:100%;height:100%}

/* Feature bands. The bottom of each band trims the wrist; the top lets the phone break into the band above. */
.f{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;min-height:min(900px,108vh);padding:0 var(--gut);clip-path:inset(-240px 0 0 0);background:#fff}
.f .t{position:relative;z-index:3;align-self:center;max-width:560px;padding:90px 0}
h2{font-weight:900;font-size:clamp(46px,6.2vw,96px);line-height:.98;letter-spacing:-.03em;text-wrap:balance}
.t p{font-weight:500;font-size:clamp(20px,1.7vw,25px);line-height:1.32;margin-top:20px;max-width:24em}
.fine{font-weight:500;font-size:clamp(16px,1.15vw,18px);line-height:1.35}
.f .mk{width:min(560px,42vw);justify-self:center;margin:-120px 0 -90px;z-index:2;filter:drop-shadow(0 30px 40px rgba(6,16,70,.3));transition:transform 1s var(--ease)}
html.js [data-rise]:not(.in){transform:translateY(56px)}
.blue{background:var(--blue);color:#fff}
.gn{position:absolute;z-index:1;font-weight:900;letter-spacing:-.04em;line-height:.8;font-variant-numeric:tabular-nums;user-select:none}

/* 2. Scan */
.scan{background:var(--night);color:#fff;min-height:min(900px,108vh);padding-top:clamp(40px,5vw,80px);clip-path:none;overflow:hidden}
.scan .bg,.scan .bg img{position:absolute;inset:0;width:100%;height:100%}
.scan .bg img{object-fit:cover;object-position:62% 50%;max-width:none}
.scan::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,28,.82) 0,rgba(6,10,28,.55) 34%,rgba(6,10,28,0) 58%);pointer-events:none}
.scan .t{z-index:4;max-width:470px}
.scan .fine{color:var(--mist);margin-top:16px}
.scan .mk{margin:0 0 -70px;justify-self:start;width:min(500px,36vw);z-index:4;filter:drop-shadow(0 30px 50px rgba(0,0,10,.6))}
.cam img{position:absolute;left:-68%;top:0;width:236%;max-width:none;aspect-ratio:1;object-fit:cover}
.result{position:absolute;z-index:3;left:4%;width:70%;top:50%;background:#fff;color:var(--ink);border-radius:6cqw;padding:4.2cqw 5cqw 4.4cqw;box-shadow:0 5cqw 9cqw rgba(0,0,12,.45)}
.r1{display:flex;justify-content:space-between;align-items:flex-start;gap:3cqw}
.r1 b{font-weight:700;font-size:5.4cqw;line-height:1.1;display:block;padding-top:1.6cqw}
.big{font-weight:900;font-size:17cqw;line-height:.9;letter-spacing:-.03em;color:var(--grams);font-variant-numeric:tabular-nums}
.big i{font-style:normal;font-weight:700;font-size:5.4cqw;letter-spacing:0;margin-left:.6cqw}
.r2{display:flex;justify-content:space-between;font-size:max(12px,4.4cqw);font-weight:700;margin-top:2.4cqw}
.r2 em{font-style:normal;color:var(--deep)}

/* 3. Your number */
.num{min-height:min(1000px,120vh);z-index:1}
.num .gn{left:18vw;top:60px;font-size:36vw;color:var(--blue)}
.num .t{align-self:end;padding:0 0 90px}

/* 4. Coach */
.coach .t{order:2}
.coach .mk{justify-self:start}
.bubble{position:absolute;z-index:3;left:6%;top:41%;width:76%;background:#fff;color:var(--ink);border-radius:5cqw 5cqw 5cqw 1.4cqw;padding:3.6cqw 4.4cqw 4.2cqw;font-weight:700;font-size:4.2cqw;line-height:1.24;box-shadow:0 4cqw 8cqw rgba(6,16,70,.34)}
.bubble cite{display:block;font-style:normal;font-weight:700;font-size:max(12px,3.1cqw);color:var(--deep);margin-bottom:1cqw}

/* 5. Progress */
.num .mk,.prog .mk{filter:drop-shadow(0 22px 26px rgba(6,16,70,.16))}
.prog{background:var(--ground)}
.prog h2{color:var(--deep)}
.prog .mk{justify-self:end}
.stat{position:absolute;z-index:3;left:-17%;top:27%;background:#fff;border-radius:6cqw;padding:3.4cqw 6cqw 4cqw;box-shadow:0 4cqw 8cqw rgba(13,22,70,.22)}
.stat b{display:block;font-weight:900;font-size:17cqw;line-height:1;letter-spacing:-.03em;color:var(--grams);font-variant-numeric:tabular-nums}
.stat i{font-style:normal;font-weight:700;font-size:6cqw;letter-spacing:0;margin-left:.6cqw}
.stat span{display:block;font-weight:700;font-size:max(12px,4.2cqw);color:var(--ink)}

/* 6. Streak */
.streak{min-height:min(1000px,120vh);padding-bottom:230px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.streak .t{order:2}
.streak .gn{left:4vw;top:70px;font-size:min(50vw,760px);color:#fff}
.streak .mk{justify-self:end;width:min(480px,34vw);margin:-120px 0 -270px}

/* 7. Everything else */
.more{position:relative;z-index:3;background:#fff;padding:210px var(--gut) 120px}
.rail{position:absolute;left:0;right:0;top:-130px;display:flex;overflow:hidden;padding:10px 0 20px}
.track{display:flex;flex:none;gap:36px;padding:0 18px 0;list-style:none;animation:roll 60s linear infinite;min-width:max-content}
.track li{width:240px;display:grid;justify-items:center;text-align:center}
.track img{width:240px;height:240px;border-radius:50%;object-fit:cover;box-shadow:0 18px 34px rgba(6,16,70,.24)}
.track b{font-weight:700;font-size:17px;line-height:1.2;margin-top:16px;min-height:2.4em}
.track span{font-weight:900;font-size:24px;color:var(--grams);font-variant-numeric:tabular-nums}
@keyframes roll{to{transform:translateX(-100%)}}
.list{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start;margin-top:60px}
.list h2{color:var(--deep)}
dl{display:grid;gap:34px}
dt{font-weight:900;font-size:clamp(30px,3vw,44px);line-height:1.05;letter-spacing:-.02em}
dd{font-weight:500;font-size:clamp(19px,1.5vw,23px);line-height:1.3;margin:6px 0 0}

/* 8. End */
.end{position:relative;color:#fff;padding:clamp(90px,11vw,170px) var(--gut) clamp(120px,12vw,180px);background:linear-gradient(180deg,var(--blue-hi) 0,var(--blue) 55%,var(--blue-lo) 100%)}
.end h2{font-size:clamp(56px,10vw,160px);line-height:.94;max-width:9.5em}
.buy{display:flex;align-items:center;flex-wrap:wrap;gap:24px 32px;margin-top:44px}
.price p{font-weight:700;font-size:clamp(19px,1.5vw,22px);line-height:1.3}
.price .fine{font-weight:500;margin-top:2px}
.mascot{position:absolute;right:clamp(20px,9vw,140px);bottom:-44px;width:clamp(120px,14vw,190px);height:auto;z-index:2;filter:drop-shadow(0 14px 18px rgba(6,16,70,.3))}
.foot{display:flex;justify-content:space-between;align-items:center;padding:30px var(--gut);background:var(--deep);color:#fff}
.foot nav{display:flex;gap:28px;padding-right:clamp(130px,20vw,300px)}
.foot a{color:#fff;font-weight:700;font-size:17px;padding:8px 0}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .gn{animation:drift linear both;animation-timeline:view()}
    @keyframes drift{from{translate:0 7%}to{translate:0 -7%}}
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track{animation:none}
  .f .mk,.btn{transition:none}
  html.js [data-rise]:not(.in){transform:none}
}

/* Tablet and phone hero: the word, the hand, then the words underneath. */
@media (max-width:960px){
  .giant{font-size:32vw;top:70px}
  .hero{min-height:760px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;background:linear-gradient(180deg,var(--blue-hi) 0,var(--blue) 60%)}
  /* The hand stands on the blue ledge: pushed down just far enough to hide the wrist, never the phone. */
  .hand{position:relative;grid-row:1;align-self:end;justify-self:center;left:auto;bottom:auto;transform:translateY(8%);height:calc(100% - 132px)}
  .copy{position:relative;grid-row:2;left:auto;bottom:auto;width:auto;padding:22px 20px 26px;background:var(--blue)}
  h1{font-size:40px}
}

/* Phone: each band is recomposed, with the giant figures above the words and the hand last. */
@media (max-width:720px){
  .nav .btn{display:none}
  .f{grid-template-columns:1fr;gap:0;padding:0 20px;min-height:0}
  .f .t,.coach .t,.streak .t,.num .t{order:0;padding:56px 0 18px;align-self:start}
  h2{font-size:46px}
  .t p{font-size:19px}
  .f .mk,.coach .mk,.prog .mk,.streak .mk{width:84%;left:0;justify-self:center;margin:12px auto -70px}
  .scan{padding-top:0}
  .scan .mk{width:84%;margin:12px auto -60px}
  .scan .bg img{object-position:72% 50%}
  .scan::after{background:linear-gradient(180deg,rgba(6,10,28,.84) 0,rgba(6,10,28,.6) 40%,rgba(6,10,28,.1) 70%)}
  .num .gn{position:relative;order:1;left:auto;top:auto;font-size:62vw;line-height:.82;margin-top:14px}
  .num .mk{order:2;margin-top:-26vw}
  .streak{padding-bottom:110px;grid-template-columns:1fr}
  .streak .gn{position:relative;order:1;left:auto;top:auto;font-size:96vw;line-height:.8;text-align:center;margin-top:10px}
  .streak .mk{order:2;margin:-44vw auto -180px}
  .bubble{left:3%;top:40%;width:84%;font-size:4.6cqw}
  .stat{left:-6%;padding:2.4cqw 4cqw 3cqw}
  .stat b{font-size:13cqw}
  .result{left:2%;width:78%}
  .more{padding:180px 20px 80px}
  .rail{top:-100px}
  .track{gap:20px;padding:0 10px}
  .track li{width:176px}
  .track img{width:176px;height:176px}
  .track b{font-size:16px}
  .list{grid-template-columns:1fr;margin-top:40px;gap:28px}
  .end h2{font-size:60px}
  .buy{flex-direction:column;align-items:flex-start}
  .foot{padding:26px 20px;justify-content:flex-start;gap:20px}
  .foot nav{padding-right:0;gap:16px}
  .mascot{width:104px;bottom:-28px;right:20px}
  .btn{white-space:normal;max-width:100%;padding:12px 24px}
  .buy>*{max-width:100%}
}

/* Privacy page */
.legal-top{color:#fff;padding:96px var(--gut) 56px;background:linear-gradient(180deg,var(--blue-hi),var(--blue))}
.legal-top h1{font-size:clamp(56px,9vw,128px);line-height:.95;letter-spacing:-.03em}
.legal-top p{font-weight:500;font-size:19px;margin-top:14px}
.legal{background:#fff;padding:56px var(--gut) 96px}
.legal div{max-width:40em}
.legal h2{font-size:clamp(28px,3vw,38px);line-height:1.08;letter-spacing:-.02em;margin:44px 0 10px;color:var(--deep)}
.legal p,.legal li{font-weight:500;font-size:19px;line-height:1.45}
.legal p+p{margin-top:12px}
.legal ul{padding-left:22px}.legal li+li{margin-top:8px}
.legal a{color:var(--deep);font-weight:700}
.todo{background:#FFF1B8;color:var(--ink);padding:2px 6px;border-radius:6px;font-weight:700}
.foot.plain nav{padding-right:0}