/* zoevo.io home page only. Tokens and shared components (tiles, marks,
   timeline cells, phone frames, kickers, bands, buttons, FAQ) are in
   zoevo.css; this file lays them out. */

/* ----------------------------------------------------------------- hero -- */
.hero{position:relative;overflow:hidden;overflow:clip;padding-block:clamp(28px,6vw,84px) clamp(24px,4vw,56px)}
.hero::before{content:"";position:absolute;inset:-20% -10% auto 30%;height:120%;background:radial-gradient(closest-side,rgba(232,123,0,.16),transparent 70%),radial-gradient(closest-side at 70% 60%,rgba(26,35,126,.45),transparent 75%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.75em;margin-bottom:22px;padding:.45em 1em .45em .8em;border-radius:var(--r-pill);background:var(--chip);border:1px solid var(--line);font-size:.875rem;font-weight:500;color:var(--text-2)}
.eyebrow .dots{font-size:1rem}
.hero h1{max-width:15ch}
.hero .lead{margin-top:clamp(18px,2vw,26px);max-width:52ch}
.hero .btn-row{margin-top:clamp(26px,3vw,36px)}
.hero .chips{margin-top:clamp(28px,3.4vw,40px);max-width:560px}

/* Phone with the real main screen, real tile crops floating around it, and
   the logo's six dots as confetti. All positions are % of .hero-art, so the
   whole picture scales as one. Phone: 52% wide = 111.5% of the width tall. */
.hero-art{position:relative;justify-self:center;width:min(520px,100%);aspect-ratio:1/1.2}
.hero-phone{position:absolute;left:24%;top:3.6%;--pw:52%;z-index:1}
.ft{position:absolute;z-index:2;width:23%;transform:rotate(var(--r,0deg));filter:drop-shadow(0 16px 20px rgba(0,0,0,.55))}
.ft-1{--r:-9deg;left:3%;top:8%}
.ft-2{--r:7deg;left:-1%;top:39%}
.ft-3{--r:-5deg;left:4%;top:69%}
.ft-4{--r:8deg;right:2%;top:3%}
.ft-5{--r:-7deg;right:-1%;top:35%}
.ft-6{--r:5deg;right:3%;top:66%}
.cf{position:absolute;z-index:0;display:block;width:var(--d,12px);height:var(--d,12px);border-radius:50%;background:var(--dc)}
.cf-1{--d:14px;left:21%;top:1%}
.cf-2{--d:10px;left:1%;top:31%}
.cf-3{--d:12px;right:24%;top:95%}
.cf-4{--d:9px;right:0;top:27%}
.cf-5{--d:13px;left:14%;top:97%}
.cf-6{--d:11px;right:12%;top:61%;z-index:3}
@media (prefers-reduced-motion:no-preference){
  .ft{animation:float 6s ease-in-out infinite alternate}
  .ft-2,.ft-5{animation-delay:-2s}.ft-3,.ft-6{animation-delay:-4s}
  .cf{animation:bob 4.5s ease-in-out infinite alternate}
  .cf-2,.cf-4,.cf-6{animation-delay:-2.2s}
}
@keyframes float{from{transform:translateY(0) rotate(var(--r))}to{transform:translateY(-10px) rotate(calc(var(--r) * .6))}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-7px)}}

@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero h1{max-width:13ch}
  .hero-art{width:min(460px,100%)}
}
/* phones: the chips repeat the lead, so drop them and let the app art reach
   the first screen */
@media (max-width:600px){
  .hero .chips{display:none}
  .hero-grid{gap:20px}
  .hero-art{width:min(400px,100%)}
}
@media (max-width:380px){
  .eyebrow{white-space:nowrap;font-size:.8125rem}
  .eyebrow .dots{display:none}
}

/* ---------------------------------------------------------------- steps -- */
.sec-head{max-width:760px;margin-bottom:clamp(32px,5vw,56px)}
.sec-head .lead{margin-top:.8em}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,32px)}
.step-art{--tile-s:clamp(60px,6.8vw,100px);--s:var(--tile-s);display:flex;align-items:center;justify-content:center;gap:calc(var(--s)*.16);min-height:clamp(170px,17vw,220px);padding:18px;background:var(--band);border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:22px;overflow:hidden}
.art-col{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.step-n{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.step h3{margin-top:.3em}
.step h3+p{margin-top:.45em;color:var(--text-2);max-width:40ch}
.mini-tl{display:grid;grid-template-columns:auto repeat(7,minmax(0,1fr)) auto auto;gap:5px;align-items:center;width:100%;max-width:320px}
.mini-tl .h{font-size:.625rem;font-weight:500;color:var(--text-3);text-align:center}
.mini-tl .chip-tile{--cs:28px}
.mini-tl .flame{--fs:36px}
.mini-tl .pct{width:36px;font-size:11px}
@media (max-width:900px){
  .steps{grid-template-columns:minmax(0,1fr);gap:40px}
  .step-art{--tile-s:clamp(72px,21vw,96px);--s:var(--tile-s);min-height:180px}
  .mini-tl{max-width:400px}
  .mini-tl .chip-tile{--cs:32px}
  .mini-tl .pct{width:38px;font-size:11.5px}
  .mini-tl .flame{--fs:40px}
}

/* ------------------------------------------------------ feature showcase -- */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.feature.flip>.feature-text{order:2}
.feature-text h2{margin-bottom:.45em}
.feature-text .ticks{margin-top:clamp(24px,3vw,34px)}
.feature-media{position:relative;display:flex;justify-content:center;align-items:center;min-width:0}
.feature .phone{--pw:clamp(220px,23vw,290px)}
/* surfaces sitting on a band use the page ground, like the app's cards */
.demo{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(16px,2.4vw,24px)}
@media (max-width:900px){
  .feature{grid-template-columns:minmax(0,1fr)}
  .feature.flip>.feature-text{order:0}
}

/* Goals: an Aim tile and a Cap tile beside the editor screenshot */
.goals-media{display:grid;grid-template-columns:auto auto;gap:clamp(20px,3vw,36px);align-items:center;justify-content:center}
.aimcap{--tile-s:clamp(96px,9vw,118px);display:grid;gap:18px}
.aimcap .pair{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.demo-cap{font-size:.875rem;line-height:1.4;color:var(--text-2)}
.demo-cap b{display:block;color:#fff;font-size:1rem}
.mk-legend{--s:130px;--fg:#fff;--mk:#fff;--tb:var(--bg);display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--text-2)}
.mk-legend li{display:flex;align-items:center;gap:10px}
.mk-legend .mk{width:14px;height:14px}
@media (max-width:1100px) and (min-width:901px){.goals-media{grid-template-columns:minmax(0,1fr)}.aimcap{grid-template-columns:1fr 1fr}.aimcap .mk-legend{grid-column:1/-1}}
@media (max-width:900px){
  .goals-media{grid-template-columns:minmax(0,1fr);justify-items:center}
  .aimcap{grid-template-columns:1fr 1fr;width:100%;max-width:460px}
  .aimcap .pair{flex-direction:column;align-items:flex-start}
  .aimcap .mk-legend{grid-column:1/-1}
}

/* Track: three kinds of source */
.kinds{list-style:none;display:grid;gap:12px;margin-top:clamp(24px,3vw,32px)}
.kind{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:12px 18px 12px 12px;border-radius:22px;background:var(--bg);border:1px solid var(--line)}
.kind .tile{--s:clamp(78px,7vw,88px)}
.kind h3{font-size:1.125rem}
.kind p{margin-top:.2em;color:var(--text-2);font-size:.9375rem;line-height:1.5}
.kind p .aka{color:var(--text-3)}
.w75{--p:75%}
/* phone above, notification below at a width where its text stays readable
   (beside the phone it shrank to ~235px and 7px type) */
.track-media{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:clamp(24px,3vw,32px)}
.track-media .phone{--pw:clamp(220px,19vw,250px)}
.notif{margin:0;width:100%;max-width:420px}
.notif img{width:100%;border-radius:24px;box-shadow:0 30px 60px -28px rgba(0,0,0,.8)}
.notif figcaption{margin-top:12px;font-size:.875rem;color:var(--text-2);line-height:1.45}
.notif figcaption b{color:#fff}

/* Routines: step strip + two overlapping phones. Columns may shrink below
   78px so the four steps always fit a 320px screen. */
.rstrip{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,78px));gap:10px clamp(6px,2.4vw,12px);margin-top:clamp(22px,3vw,30px)}
.rstep{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;text-align:center;font-size:.8125rem;line-height:1.25;color:var(--text-2)}
.rstep b{color:#fff;font-weight:500;display:block}
.rstep .chip-tile{--cs:clamp(44px,13vw,54px);position:relative;border-radius:14px}
@media (max-width:380px){.rstep{font-size:.75rem}}
.rstep.now .chip-tile{box-shadow:0 0 0 2.5px #fff}
.rstep.skipped .chip-tile>.ic{opacity:.6}
.sbadge{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 0 0 2px var(--band)}
.sbadge .ic{width:15px;height:15px}
.sbadge.done{background:var(--hit)}
.sbadge.skip{background:var(--skip)}
.duo{display:flex;justify-content:center;align-items:flex-start;padding-bottom:12%}
.duo .phone{--pw:clamp(170px,19vw,250px)}
.duo .shot{position:relative;z-index:1}
.duo .shot+.shot{margin-left:-7%;margin-top:14%;z-index:0}
@media (max-width:900px){.duo .phone{--pw:min(46vw,240px)}}

/* Progress: timeline demo + flame tiers under the feature row */
.progress-extra{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(14px,2vw,20px);margin-top:clamp(48px,6vw,80px)}
/* day cells capped at 44px so they stay in proportion with the row tiles */
.tl-grid{display:grid;grid-template-columns:auto repeat(7,minmax(0,44px)) auto auto;justify-content:center;gap:clamp(4px,.7vw,8px);align-items:center}
.tl-grid .h{font-size:.75rem;font-weight:500;color:var(--text-2);text-align:center}
.tl-grid .h.wide{font-size:.6875rem}
.tl-grid .chip-tile{--cs:clamp(30px,3.4vw,40px)}
.tl-grid .flame{--fs:clamp(34px,3.6vw,44px);justify-self:center}
.tl-grid .pct{width:clamp(36px,3.6vw,44px);font-size:clamp(10.5px,.9vw,12px)}
.demo-title{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);margin-bottom:14px;display:flex;justify-content:space-between;gap:12px}
.demo-title span{color:var(--text-3);font-weight:500;letter-spacing:.02em;text-transform:none}
.tl-demo .legend{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.flames{list-style:none;display:flex;justify-content:space-between;gap:8px;margin-top:6px}
.flames li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.75rem;color:var(--text-3);font-weight:500;white-space:nowrap}
.flames .flame{--fs:clamp(44px,4.6vw,56px)}
/* 320-380px: five "365 days" labels don't fit at 12px, so they wrapped to two lines */
@media (max-width:380px){.flames{gap:2px}.flames li{font-size:.6875rem;gap:4px}.flames .flame{--fs:40px}}
.flame-demo{display:flex;flex-direction:column;justify-content:center}
.flame-demo p{margin-top:16px;color:var(--text-2);font-size:.9375rem}
@media (max-width:900px){.progress-extra{grid-template-columns:minmax(0,1fr)}}

/* Plan: the "plan now" home button, standing beside the planner screenshot
   (never over it), and under it on phones */
.plan-fig{position:relative}
.plan-now{position:absolute;z-index:2;right:calc(100% + 20px);bottom:14%;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.8125rem;font-weight:700;color:#fff;white-space:nowrap}
.plan-now span{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 14px 30px -10px rgba(232,123,0,.7)}
.plan-now .ic{width:30px;height:30px}
@media (max-width:600px){
  .plan-fig{display:flex;flex-direction:column;align-items:center}
  .plan-now{position:static;flex-direction:row;gap:12px;margin-top:22px}
  .plan-now span{width:54px;height:54px}
}

/* mid-page call to action, a band of its own between Progress and Plan */
.band.mid-cta{padding-block:clamp(36px,5vw,56px);background:linear-gradient(160deg,#2b1a08 0%,var(--band) 62%)}
.mid-cta-inner{display:flex;flex-wrap:wrap;align-items:center;gap:18px clamp(20px,3vw,36px)}
.mid-cta .flame{--fs:clamp(56px,6vw,72px)}
.mid-cta-copy{flex:1 1 280px;min-width:0}
.mid-cta h2{font-size:clamp(1.5rem,3.2vw,2.25rem)}
.mid-cta-copy p{margin-top:.35em;color:var(--text-2);font-weight:500}
.mid-cta-copy .nw{white-space:nowrap}
@media (max-width:640px){
  .mid-cta-inner{justify-content:center;text-align:center}
  .mid-cta-copy{flex-basis:100%}
  .mid-cta .btn{flex:1 1 100%}
}

/* ------------------------------------------------------------- everyday -- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.bento .card{grid-column:span 2;display:flex;flex-direction:column;gap:10px;min-width:0}
.bento .card.wide{grid-column:span 3;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,2.4vw,28px);padding-bottom:0;overflow:hidden}
.bento .card.wide .copy{padding-bottom:clamp(20px,3vw,32px)}
.bento h3{font-size:1.25rem}
.bento p{color:var(--text-2);font-size:.9375rem}
.card-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--c);color:#fff;margin-bottom:6px}
.card-ic .ic{width:24px;height:24px}
.peek{align-self:end;height:clamp(200px,20vw,250px);overflow:hidden;margin-top:8px}
.peek .phone{--pw:clamp(130px,13vw,165px);box-shadow:0 0 0 1px rgba(255,255,255,.10)}
.widgets{display:flex;gap:12px;margin-top:auto;padding:16px;border-radius:16px;background:radial-gradient(120% 140% at 80% 0%,#2E57B8 0%,#122a6b 45%,#070d24 100%)}
.widgets img{width:clamp(56px,5.6vw,72px);height:auto;border-radius:14%}
.lang-pills{display:flex;gap:8px;margin-top:auto;padding-top:6px;list-style:none}
.lang-pills li{padding:.45em 1em;border-radius:var(--r-pill);background:var(--control);font-size:.875rem;font-weight:500}
.lang-pills li:first-child{background:var(--selected);color:var(--on-selected)}
.bento p.promise{margin-top:auto;padding-top:4px;color:#fff;font-weight:500}
@media (max-width:1100px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento .card,.bento .card.wide{grid-column:span 1}
  .bento .card.wide{grid-column:span 2}
  .bento .card:last-child{grid-column:span 2}
}
@media (max-width:640px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento .card,.bento .card.wide,.bento .card:last-child{grid-column:auto}
  .bento .card.wide{grid-template-columns:minmax(0,1fr) auto}
  .peek .phone{--pw:120px}
  .peek{height:190px}
}
@media (max-width:420px){
  .bento .card.wide{grid-template-columns:minmax(0,1fr)}
  .peek{justify-self:center;height:180px}
  .peek .phone{--pw:150px}
}

/* -------------------------------------------------------------- gallery -- */
.gallery-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(28px,4vw,48px)}
.gallery-head .hint{color:var(--text-3);font-size:.875rem}
@media (min-width:1000px){.gallery-head .hint{display:none}}

/* --------------------------------------------------------------- zoevo+ -- */
.plus-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(14px,2.2vw,24px);align-items:stretch}
.compare{background:var(--band);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.compare table{width:100%;border-collapse:collapse}
.compare th,.compare td{padding:14px clamp(10px,2vw,22px);text-align:left;vertical-align:middle;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.35}
.compare thead th{padding-block:18px;font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.compare thead th.pc{color:var(--accent)}
.compare tbody th{font-weight:400;color:var(--text-2)}
.compare td{font-weight:500;color:#fff}
.compare .pc{background:rgba(232,123,0,.08)}
.compare tr:last-child>*{border-bottom:0}
.compare-note{padding:14px clamp(10px,2vw,22px) 16px;border-top:1px solid var(--line);font-size:.8125rem;line-height:1.5;color:var(--text-3)}
.trial{display:flex;flex-direction:column;gap:14px;background:linear-gradient(160deg,#2b1a08 0%,var(--band) 55%);border-color:rgba(232,123,0,.3)}
.trial .big{display:flex;align-items:baseline;gap:.25em;font-weight:900;font-size:clamp(4rem,8vw,5.75rem);line-height:.85;color:var(--accent);letter-spacing:-.03em}
.trial .big span{font-size:1.25rem;font-weight:700;letter-spacing:0;color:#fff}
.trial h3{font-size:1.375rem}
.trial p{color:var(--text-2);font-size:.9375rem}
.trial p .ui{white-space:normal}
.trial .ticks{gap:10px;font-size:.9375rem}
.trial .btn{margin-top:auto;align-self:flex-start}
@media (max-width:900px){.plus-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.compare th,.compare td{font-size:.875rem;padding-inline:10px}.compare tbody th{width:36%}}

/* ------------------------------------------------------------------ faq -- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(28px,5vw,72px);align-items:start}
.faq-side .lead{margin-top:.8em}
.faq-side .btn{margin-top:26px}
@media (min-width:901px){.faq-side{position:sticky;top:100px}}
@media (max-width:900px){.faq-grid{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------ final CTA -- */
.cta{position:relative;overflow:hidden;overflow:clip;background:var(--band);padding-block:clamp(72px,10vw,140px);text-align:center}
.cta::before{content:"";position:absolute;left:50%;top:-30%;width:900px;height:900px;max-width:160%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(251,192,45,.13),transparent 70%);pointer-events:none}
.cta .wrap{position:relative}
.cta .flame{--fs:clamp(84px,11vw,120px);margin:0 auto clamp(18px,2.4vw,28px)}
.cta h2{font-size:clamp(2.25rem,6.2vw,4.5rem);max-width:15ch;margin-inline:auto}
.cta .lead{margin:1em auto 0}
.cta .btn-row{justify-content:center;margin-top:clamp(28px,3.6vw,40px)}
.cta .dots{margin-top:30px;font-size:1.25rem;gap:.55em}
@media (prefers-reduced-motion:no-preference){
  .cta .flame>svg{animation:flicker 1.8s ease-in-out infinite alternate;transform-origin:50% 90%}
}
@keyframes flicker{from{transform:scale(1)}to{transform:scale(1.04,1.07)}}

/* ------------------------------------------------ phone install pill --
   Phones don't get a sticky header (two rows would eat the screen), so a
   Play pill fades in at the bottom once the hero is gone. Only where CSS
   scroll-driven animations exist (Chrome for Android among them);
   elsewhere it stays hidden and the in-page buttons carry the page. */
.m-install{display:none}
@media (max-width:760px){
  @supports (animation-timeline:scroll()){
    .m-install{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:60;display:inline-flex;min-height:50px;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 14px 30px -8px rgba(0,0,0,.85);transform:translateX(-50%);animation:m-install linear both;animation-timeline:scroll(root);animation-range:640px 780px}
    .site-footer{padding-bottom:96px}
  }
}
@keyframes m-install{from{opacity:0;visibility:hidden;transform:translate(-50%,18px)}to{opacity:1;visibility:visible;transform:translate(-50%,0)}}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  @supports (animation-timeline:scroll()){.m-install{animation:none;opacity:1;visibility:visible}}
}