/* Track GLP website: Flo-style hero, motion and the newer page components.
   Every animation switches off for people who ask their device for reduced motion. */

/* ---------- Store buttons (Flo style pair) ---------- */
.stores{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.store{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border-radius:12px;padding:8px 16px 8px 12px;min-height:54px;text-decoration:none;border:1px solid #000}
.store small{display:block;font:500 .68rem/1.2 Inter;opacity:.82}
.store b{display:block;font:600 1.12rem/1.15 Poppins;letter-spacing:-.01em}
.store.muted{background:transparent;color:var(--ink);border-color:rgba(26,26,46,.22)}
.store.light{background:#fff;color:var(--ink);border-color:#fff}
.store.light.muted{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
a.store:hover{background:#1a1a1a;color:#fff}

/* ---------- Hero ---------- */
.hero2{position:relative;overflow:hidden;padding:34px 0 0;background:linear-gradient(180deg,#FBF7F2 0%,#F3ECFF 100%);border-radius:0 0 44px 44px;isolation:isolate}
.aurora{position:absolute;inset:-20%;z-index:-1;filter:blur(60px);opacity:.75;pointer-events:none}
.aurora span{position:absolute;border-radius:50%;mix-blend-mode:multiply}
.aurora .a1{width:46%;aspect-ratio:1;left:-4%;top:2%;background:#FFD9B3;animation:drift1 18s ease-in-out infinite}
.aurora .a2{width:42%;aspect-ratio:1;right:-6%;top:-6%;background:#DCCBFF;animation:drift2 22s ease-in-out infinite}
.aurora .a3{width:36%;aspect-ratio:1;right:22%;bottom:-10%;background:#F5C9F2;animation:drift3 26s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(12%,10%) scale(1.1)}}
@keyframes drift2{50%{transform:translate(-14%,12%) scale(.92)}}
@keyframes drift3{50%{transform:translate(10%,-14%) scale(1.15)}}
.dots{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(109,63,224,.16) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0,transparent 60%);mask-image:radial-gradient(ellipse at 70% 40%,#000 0,transparent 60%)}

.hero2-grid{display:grid;gap:10px;align-items:center}
.hero2-copy{text-align:center;padding-top:10px}
.hero2-copy .badge-line{margin-bottom:18px}
.hero2 h1{font-size:clamp(2.3rem,5.6vw,4rem);line-height:1.06;margin-bottom:.4em}
.hero2 .lead{max-width:560px;margin:0 auto 26px;font-size:1.15rem}
.hero2 .stores{justify-content:center}
.scribble{position:relative;display:inline-flex;gap:8px;align-items:flex-start;margin:20px 0 0;font:600 1.02rem/1.25 Poppins;color:var(--action);transform:rotate(-3deg);text-align:left}
.scribble svg{flex:none;margin-top:-14px}
.scribble small{display:block;font:500 .86rem Inter;color:var(--orange-text)}
@media(min-width:960px){
  .hero2{padding-top:30px}
  .hero2-grid{grid-template-columns:1.02fr 1fr;gap:30px;min-height:600px}
  .hero2-copy{text-align:left;padding:30px 0 60px}
  .hero2 .lead{margin-left:0}
  .hero2 .stores{justify-content:flex-start}
}

/* The stage: phone, arcs, orbit, notification, floating cards */
.stage{position:relative;height:clamp(470px,118vw,640px);max-width:600px;margin:0 auto;width:100%}
.stage .phone-wrap{position:absolute;left:50%;top:22px;width:clamp(232px,60vw,300px);transform:translateX(-50%);z-index:3;animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both}
.stage .phone-wrap>img{width:100%;filter:drop-shadow(0 40px 50px rgba(61,31,160,.3))}
@keyframes rise{from{opacity:0;transform:translate(-50%,40px)}}
.halo{position:absolute;left:50%;top:46%;width:min(118%,600px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:1;
  background:conic-gradient(from 0deg,rgba(212,107,242,.0),rgba(212,107,242,.38),rgba(139,92,246,.42),rgba(91,59,224,.0) 60%,rgba(255,138,31,.25) 80%,rgba(212,107,242,0));
  -webkit-mask:radial-gradient(circle,transparent 55%,#000 56%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 55%,#000 56%,#000 70%,transparent 71%);animation:spin 14s linear infinite}
.orbit{position:absolute;left:50%;top:46%;border-radius:50%;border:1.5px dashed rgba(109,63,224,.22);transform:translate(-50%,-50%);z-index:1}
.orbit.o1{width:min(92%,470px);aspect-ratio:1;animation:spin 40s linear infinite}
.orbit.o2{width:min(128%,650px);aspect-ratio:1;animation:spin 60s linear infinite reverse;border-color:rgba(255,138,31,.25)}
.orbit i{position:absolute;top:-6px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--action);box-shadow:0 0 0 6px rgba(109,63,224,.15),0 0 22px rgba(139,92,246,.8)}
.orbit.o2 i{background:var(--orange);box-shadow:0 0 0 6px rgba(255,138,31,.15),0 0 22px rgba(255,138,31,.8);top:auto;bottom:-6px}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.arc{position:absolute;left:-6%;top:6%;width:112%;z-index:2;pointer-events:none;overflow:visible}
.arc path{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.2s .5s cubic-bezier(.6,.1,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Notification that drops onto the phone screen */
.notif{position:absolute;left:5%;right:5%;top:7.5%;z-index:4;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:18px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 14px 30px rgba(26,26,46,.18);
  font:600 .8rem/1.25 Inter;opacity:0;transform:translateY(-24px) scale(.96);animation:notif 9s 1.6s ease-in-out infinite}
.notif img{width:30px!important;height:30px;border-radius:8px;flex:none;filter:none}
.notif small{display:block;font:500 .66rem Inter;color:var(--slate);letter-spacing:.03em}
.notif span{display:block;font-weight:400;color:var(--slate);font-size:.74rem}
@keyframes notif{0%,4%{opacity:0;transform:translateY(-24px) scale(.96)}9%,40%{opacity:1;transform:none}46%,100%{opacity:0;transform:translateY(-24px) scale(.96)}}

/* Floating glass cards */
.fcard{position:absolute;z-index:5;display:flex;gap:10px;align-items:center;white-space:nowrap;padding:10px 14px 10px 10px;border-radius:18px;
  background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 20px 44px rgba(61,31,160,.18);font:600 .86rem/1.25 Inter;animation:pop .7s cubic-bezier(.2,.9,.3,1.3) both,bob 7s ease-in-out infinite}
.fcard small{display:block;font:400 .74rem Inter;color:var(--slate)}
.fcard .ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex:none}
.fc1{left:0;top:40%;animation-delay:1.1s,1.8s}
.fc2{right:0;top:16%;animation-delay:1.3s,0s}
.fc3{right:1%;top:66%;animation-delay:1.5s,3s}
.fc4{left:3%;top:76%;animation-delay:1.7s,4.5s}
.chart-card{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px}
.chart-card svg path.line{stroke-dasharray:200;stroke-dashoffset:200;animation:draw 2s 2s ease forwards}
@keyframes pop{from{opacity:0;transform:scale(.6) translateY(20px)}}
@media(max-width:600px){.fcard{font-size:.72rem;padding:7px 10px 7px 7px;border-radius:14px}.fcard .ic{width:26px;height:26px;border-radius:8px;font-size:.8rem}.fcard small{font-size:.64rem}
  .fc1{left:-6px;top:44%}.fc2{right:-6px;top:10%}.fc3{right:-6px;top:70%}.fc4{display:none}}

/* ---------- Feature chips marquee ---------- */
.marquee{overflow:hidden;padding:26px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:12px;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:#fff;border:1px solid var(--border);font:600 .92rem Inter;white-space:nowrap}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--grad)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Flo-style "what can you do" cards ---------- */
.do-grid{display:grid;gap:18px}
.do-card{position:relative;overflow:hidden;border-radius:32px;padding:30px 28px 0;background:var(--soft);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;min-height:440px;transition:transform .3s}
.do-card:hover{color:var(--ink);transform:translateY(-4px)}
.do-card.o{background:var(--orange-soft)}.do-card.g{background:var(--green-soft)}.do-card.p{background:#F9E3EC}
.do-card h3{font-size:1.35rem;margin-bottom:.35em}
.do-card p{color:var(--slate);margin:0 0 14px}
.do-card .more{font:600 .92rem Inter;color:var(--action);margin-bottom:18px}
.do-card img{width:62%;max-width:230px;margin:auto auto -40px;filter:drop-shadow(0 24px 30px rgba(61,31,160,.2));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.do-card:hover img{transform:translateY(-10px) rotate(-2deg)}
@media(min-width:760px){.do-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.do-grid{grid-template-columns:repeat(4,1fr)}.do-card{min-height:500px}}

/* ---------- Glow cards with a moving gradient border ---------- */
.glow{position:relative;border-radius:var(--r-card);background:#fff;padding:30px;isolation:isolate}
.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;
  background:conic-gradient(from var(--a,0deg),#ECE6F2 0deg,#D46BF2 60deg,#8B5CF6 120deg,#ECE6F2 200deg,#ECE6F2 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:border 6s linear infinite}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes border{to{--a:360deg}}
.glow .ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:var(--soft);color:var(--action)}
.glow p{color:var(--slate);margin:0}
.tilt{transform-style:preserve-3d;transition:transform .25s ease}

/* ---------- Dark "futuristic" band ---------- */
.space{position:relative;background:var(--ground);color:#fff;overflow:hidden;isolation:isolate}
.space::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(201,182,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(201,182,255,.07) 1px,transparent 1px);background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 70%)}
.space::after{content:"";position:absolute;z-index:-1;width:620px;height:620px;right:-220px;top:-260px;border-radius:50%;background:var(--grad);filter:blur(70px);opacity:.45;animation:drift2 20s ease-in-out infinite}
.space .eyebrow{color:#C9B6FF}
.space .lead,.space p{color:#D9D2EC}
.space h2,.space h3{color:#fff}
.space a{color:#fff}
.glass{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:24px;backdrop-filter:blur(8px)}
.glass b{display:block;font:700 1.05rem Poppins;margin-bottom:4px;color:#fff}
.glass span{color:#D9D2EC;font-size:.95rem}
.shield{width:120px;height:120px;margin:0 auto 26px;position:relative}
.shield svg{position:relative;z-index:1}
.shield::before,.shield::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(201,182,255,.5);animation:ping 3s ease-out infinite}
.shield::after{animation-delay:1.5s}
@keyframes ping{from{transform:scale(.7);opacity:1}to{transform:scale(1.8);opacity:0}}

/* ---------- Steps with a line that draws as you scroll ---------- */
.steps3{position:relative;display:grid;gap:26px;max-width:980px;margin:0 auto}
.steps3 .line{position:absolute;left:27px;top:20px;bottom:20px;width:3px;border-radius:3px;background:var(--border)}
.steps3 .line i{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0)*100%);border-radius:3px;background:var(--grad)}
.step{position:relative;display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start}
.step .n{width:56px;height:56px;border-radius:18px;background:#fff;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font:700 1.3rem Poppins;color:var(--action);position:relative;z-index:1;transition:all .4s}
.step.in .n{background:var(--action);border-color:var(--action);color:#fff;box-shadow:0 10px 24px rgba(109,63,224,.35)}
.step .body{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:26px;display:grid;gap:18px;align-items:center}
.step .body img{width:170px;margin:0 auto;filter:drop-shadow(0 18px 24px rgba(61,31,160,.2))}
.step .body p{color:var(--slate);margin:0}
@media(min-width:760px){.step .body{grid-template-columns:1fr 190px}}

/* ---------- Scrolling phone story (features page) ---------- */
.story{display:grid;gap:30px}
.story-phone{display:none}
.story-step{padding:20px 0}
.story-step .mob{width:min(70%,260px);margin:0 auto 22px;filter:drop-shadow(0 24px 30px rgba(61,31,160,.22))}
.story-step h3{font-size:clamp(1.5rem,3vw,2.1rem)}
.story-step p{color:var(--slate)}
.story-step ul{padding-left:1.2em;color:var(--slate)}
@media(min-width:960px){
  .story{grid-template-columns:1fr 1fr;gap:80px}
  .story-phone{display:block;position:sticky;top:90px;height:calc(100vh - 120px);max-height:760px}
  .story-phone .screen-stack{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
  .story-phone .bg{position:absolute;inset:6% 4%;border-radius:44px;background:var(--soft);transition:background .6s}
  .story-phone img{position:absolute;height:88%;width:auto;opacity:0;transform:translateY(30px) scale(.96);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 30px 40px rgba(61,31,160,.26))}
  .story-phone img.on{opacity:1;transform:none}
  .story-phone .progress{position:absolute;right:-26px;top:20%;bottom:20%;width:4px;border-radius:4px;background:var(--border)}
  .story-phone .progress i{display:block;width:100%;border-radius:4px;background:var(--grad);height:calc(var(--sp,0)*100%);transition:height .3s}
  .story-step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .4s}
  .story-step.active{opacity:1}
  .story-step .mob{display:none}
}

/* ---------- Dose planner ---------- */
.planner{display:grid;gap:22px;max-width:1040px;margin:0 auto}
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:28px}
.field{margin-bottom:20px}
.field label,.field .label{display:block;font:600 .95rem Inter;margin-bottom:8px}
.field input[type=date],.field input[type=number],.field select{width:100%;min-height:50px;padding:10px 14px;border-radius:var(--r-md);border:1.5px solid var(--border);font:500 1rem Inter;color:var(--ink);background:var(--cream)}
.field input:focus,.field select:focus{outline:none;border-color:var(--action);box-shadow:0 0 0 4px rgba(109,63,224,.15)}
.seg2{display:flex;flex-wrap:wrap;gap:8px}
.seg2 button{min-height:46px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--border);background:var(--cream);font:600 .95rem Inter;color:var(--ink);cursor:pointer}
.seg2 button[aria-pressed=true]{background:var(--action);border-color:var(--action);color:#fff}
.next-big{border-radius:24px;background:linear-gradient(135deg,#9A45D6,#6D3FE0 55%,#4B2FC0);color:#fff;padding:26px;margin-bottom:20px;position:relative;overflow:hidden}
.next-big small{font:600 .8rem Inter;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.next-big b{display:block;font:700 clamp(1.6rem,4vw,2.2rem)/1.15 Poppins;margin:6px 0 4px}
.next-big span{opacity:.9}
.next-big::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;border:22px solid rgba(255,255,255,.12)}
.dates{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.dates li{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:var(--r-md);background:var(--cream);font-weight:600;animation:pop .4s both}
.dates li span{font-weight:400;color:var(--slate);font-size:.9rem}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:.85rem;margin-top:8px}
.cal .h{font-weight:700;color:var(--slate);font-size:.75rem;padding:4px 0}
.cal .d{padding:8px 0;border-radius:10px}
.cal .d.dose{background:var(--action);color:#fff;font-weight:700}
.cal .d.today{box-shadow:inset 0 0 0 2px var(--orange)}
.cal-title{font:700 1rem Poppins;margin:16px 0 4px}
@media(min-width:900px){.planner{grid-template-columns:.9fr 1.1fr}}

/* ---------- Compare table (Track Plus page) ---------- */
.compare{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;font-size:.97rem}
.compare th,.compare td{padding:14px 18px;border-bottom:1px solid var(--border);text-align:left}
.compare th{background:var(--soft);font:700 .95rem Poppins}
.compare td:not(:first-child),.compare th:not(:first-child){text-align:center;width:22%}
.compare tr:last-child td{border-bottom:0}
.compare .y{color:var(--action);font-weight:800}
.compare .n{color:#B9B3C4}

/* ---------- Page heroes for inner pages ---------- */
.page-hero2{position:relative;overflow:hidden;padding:60px 0 56px;background:linear-gradient(180deg,#FBF7F2,#F3ECFF);border-radius:0 0 44px 44px;isolation:isolate;text-align:center}
.page-hero2 h1{font-size:clamp(2.1rem,5vw,3.4rem);max-width:820px;margin-left:auto;margin-right:auto}
.page-hero2 .lead{max-width:640px;margin:0 auto}
.page-hero2 .stores{justify-content:center;margin-top:24px}

/* Download band reused at the end of every page */
.download{padding:0 0 84px}
.download .final-box .stores{justify-content:center}

@media(prefers-reduced-motion:reduce){
  .aurora span,.halo,.orbit,.fcard,.notif,.marquee-track,.glow::before,.space::after,.shield::before,.shield::after,.stage .phone-wrap{animation:none!important}
  .notif{opacity:1;transform:none}
  .arc path,.chart-card svg path.line{animation:none;stroke-dashoffset:0}
  .marquee-track{flex-wrap:wrap;width:auto;justify-content:center}
  .story-phone img{transition:none}
}