/* ===== v12 overrides (14 Oct feedback) ===== */

/* header: App Store + Google Play, like the VeriBark header */
.nav-stores{display:flex;gap:8px;margin-left:22px;flex:none}
.nav-store{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:4px;background:var(--forest);color:var(--parch);border:1.5px solid var(--forest);font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background .25s,border-color .25s}
.nav-store:hover{background:var(--char);border-color:var(--char)}
.nav-store svg{width:15px;height:15px;flex:none}
.m-store{display:none}
@media(max-width:1180px){.nav-main{gap:14px}.nav-stores{margin-left:14px}.nav-store{padding:0 11px}}
@media(max-width:940px){
  .nav-stores{display:none}
  .nav-main .m-store{display:block;margin-top:10px;padding:14px 16px!important;border:0!important;border-radius:4px;background:var(--forest);color:var(--parch);text-align:center}
  .nav-main .m-store:after{display:none}
}

/* every store button the same colour as the App Store one */
.download-row .download-btn+.download-btn,
.final-sage .download-row .download-btn+.download-btn{background:var(--forest);color:var(--parch);border-color:var(--forest)}
.download-row .download-btn+.download-btn:hover{background:var(--char);border-color:var(--char);color:var(--parch)}
.bg-forest .download-row .download-btn+.download-btn{background:var(--parch);color:var(--forest);border-color:var(--parch)}
.bg-forest .download-row .download-btn+.download-btn:hover{background:#fff;border-color:#fff;color:var(--forest)}
@media(min-width:941px){.hero-full .download-row .download-btn+.download-btn{background:var(--forest);color:var(--parch);border-color:var(--forest)}}

/* "Every signal tells a story": video overlaps the photo more */
.layer-bg{width:70%;height:78%}
.layer-vid{left:6%;bottom:2%;width:62%;z-index:2}
@media(max-width:640px){.layer-vid{left:3%;width:64%}}

/* how it works: timeline on its own, centred */
.timeline{justify-content:center}
.timeline .tl{flex:0 1 1000px;margin:0 auto}
.tl button.on .dot{box-shadow:0 0 0 6px rgba(129,166,132,.22)}

/* arrows: green, under each step's text, with obvious press feedback */
.slide .copy .arrows{display:flex;gap:12px;margin-top:30px}
.arrows button{width:58px;height:58px;border-radius:50%;border:0;background:var(--forest);color:var(--parch);font-size:1.25rem;cursor:pointer;position:relative;transition:background .25s,transform .15s}
.arrows button:hover{background:var(--leaf)}
.arrows button:active{transform:scale(.88)}
.arrows button:focus-visible{outline:2px solid var(--leaf);outline-offset:4px}
.arrows button:after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(129,166,132,.55);pointer-events:none}
.arrows button.tap{animation:arrow-press .45s var(--ease)}
.arrows button.tap:after{animation:arrow-ring .6s ease-out}
@keyframes arrow-press{0%{transform:scale(1)}35%{transform:scale(.86);background:var(--leaf)}100%{transform:scale(1)}}
@keyframes arrow-ring{0%{box-shadow:0 0 0 0 rgba(129,166,132,.55)}100%{box-shadow:0 0 0 16px rgba(129,166,132,0)}}
@media(max-width:640px){.arrows button{width:52px;height:52px}}
@media (prefers-reduced-motion:reduce){.arrows button.tap,.arrows button.tap:after{animation:none}}

/* evidence: breathing room now the badges are gone */
#evidence .stats{margin-bottom:56px}

/* stop the hero photo and stat cards poking past the screen edge on phones */
.hero-full,#evidence{overflow-x:clip}
@media(max-width:940px){.timeline .tl{flex:none;width:100%;margin:0}}