/* ScanVeer — /get download page.
   Lives in css/ (not an inline <style>) because the site CSP is
   `style-src 'self' https://fonts.googleapis.com` with NO unsafe-inline:
   an inline block is refused outright and the page renders unstyled. */

:root{
  color-scheme:light only;
  --orange:#FB5C03;
  --orange-deep:#E8550D;
  --green:#156C08;
  --green-deep:#0E4D06;
  --green-bright:#2E9E14;
  --ink:#16211A;
  --slate:#5E6B62;
  --paper:#F7FBF6;
  --card:#FFFFFF;
  --hair:rgba(21,108,8,.12);
  --head:"Poppins", system-ui, sans-serif;
  --body:"Inter", system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper) !important;
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:44px 20px 130px;
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(110% 55% at 78% -8%, rgba(46,158,20,.13), transparent 62%),
    radial-gradient(90% 45% at 6% 8%, rgba(251,92,3,.07), transparent 60%);
  pointer-events:none;
}

.sheet{position:relative;z-index:1;width:100%;max-width:430px;text-align:center}

.rise{opacity:0;transform:translateY(14px);animation:rise .85s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.34s}.d4{animation-delay:.5s}

/* ---------- headline ---------- */
.eyebrow{
  font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--slate);
}
h1{
  font-family:var(--head);
  font-weight:600;
  font-size:clamp(36px,11vw,46px);
  line-height:1.06;
  letter-spacing:-.028em;
  margin:14px 0 0;
}
h1 .o{color:var(--orange)}
h1 .g{color:var(--green)}
.gradient-rule{
  height:2px;width:150px;margin:20px auto 0;border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--green));
}
.sub{
  font-size:15.5px;line-height:1.6;color:var(--slate);
  margin:16px auto 0;max-width:32ch;
}
.sub b{color:var(--green);font-weight:600}

/* ---------- the two stores: the whole show ---------- */
.stores{margin-top:34px;display:flex;flex-direction:column;gap:14px}
.btn{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:17px;text-align:left;
  text-decoration:none;
  border-radius:18px;
  padding:22px 24px;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;
}
.btn .glyph{
  width:52px;height:52px;flex:0 0 auto;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);
}
.btn b{font-family:var(--head);font-weight:600;font-size:19px;letter-spacing:-.015em;display:block}
.btn small{
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  display:block;margin-top:4px;opacity:.75;
}
.btn .arrow{margin-left:auto;font-size:20px;opacity:.8;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.btn:hover{transform:translateY(-3px)}
.btn:hover .arrow{transform:translate(4px,-4px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--green-bright);outline-offset:3px}
.btn::after{
  content:"";position:absolute;top:0;bottom:0;width:45%;left:-55%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-12deg);
  transition:left .8s cubic-bezier(.16,1,.3,1);
}
.btn:hover::after{left:125%}

/* Apple = brand green, Android = brand orange. Both loud. */
.btn.apple{
  background:linear-gradient(155deg,var(--green-bright) -20%,var(--green) 45%,var(--green-deep) 110%);
  color:#fff;
  box-shadow:0 22px 44px -16px rgba(21,108,8,.55);
}
.btn.apple:hover{box-shadow:0 30px 54px -18px rgba(21,108,8,.62)}
.btn.droid{
  background:linear-gradient(155deg,#FF7A2E -20%,var(--orange) 45%,var(--orange-deep) 110%);
  color:#fff;
  box-shadow:0 22px 44px -16px rgba(232,85,13,.5);
}
.btn.droid:hover{box-shadow:0 30px 54px -18px rgba(232,85,13,.58)}
.btn svg path{fill:#fff}

/* detected platform: slightly larger + pulsing glow ring */
.btn.primary{padding:26px 24px}
.btn.primary b{font-size:21px}
.btn.primary::before{
  content:"";position:absolute;inset:-3px;border-radius:21px;z-index:-1;
  animation:pulse 2.6s ease-in-out 1.2s infinite;
}
.btn.apple.primary::before{box-shadow:0 0 0 0 rgba(46,158,20,.5)}
.btn.droid.primary::before{box-shadow:0 0 0 0 rgba(251,92,3,.5)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(46,158,20,.45)}
  60%{box-shadow:0 0 0 14px rgba(46,158,20,0)}
  100%{box-shadow:0 0 0 0 rgba(46,158,20,0)}
}

.free-note{
  margin-top:20px;font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate);
}
.free-note span{color:var(--green)}

/* ---------- footer + ribbon ---------- */
.tagline{
  margin-top:30px;font-family:var(--head);font-weight:500;font-size:13.5px;
  color:var(--green);
}
.site{margin-top:8px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.site a{color:var(--slate);text-decoration:none;transition:color .3s ease}
.site a:hover{color:var(--orange)}

.ribbon{position:fixed;left:0;right:0;bottom:0;height:110px;pointer-events:none;z-index:0}
.ribbon svg{width:100%;height:100%;display:block}

@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
  .btn.primary::before{animation:none}
  .btn,.btn .arrow,.btn::after{transition:none}
}