:root{
  --indigo:#0E073B;
  --indigo-deep:#0E0436;
  --surface:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.07);
  --stroke:rgba(255,255,255,.09);
  --stroke-bright:rgba(255,255,255,.16);
  --orange:#F97316;
  --orange-soft:rgba(var(--accent-rgb),.14);
  --green:#22C55E;
  --green-soft:rgba(34,197,94,.12);
  --cream:#FFFDF8;
  --mist:#A9A5CE;
  --violet:#454276;
  --radius:20px;
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;scroll-snap-type:y proximity}
body{
  font-family:var(--font);
  background:linear-gradient(180deg,var(--indigo) 0%,var(--indigo-deep) 100%);
  color:var(--cream);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--orange);color:var(--indigo)}

/* ---------- grid overlay ---------- */
.grid-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 100%);
}
main,header,footer{position:relative;z-index:1}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:110px 0}
@media(max-width:768px){section{padding:72px 0}}
/* slideshow: snap to section starts + slide-in transition per section */
main>section{scroll-snap-align:start;scroll-margin-top:70px}
main>section.stats,main>section.games{scroll-snap-align:none}
.sec-slide{opacity:0;transform:translateY(64px) scale(.985)}
.sec-slide.sec-in{
  opacity:1;transform:none;
  transition:opacity .9s cubic-bezier(.22,.8,.3,1),transform .9s cubic-bezier(.22,.8,.3,1);
}

/* ---------- typography ---------- */
h1,h2,h3{font-weight:800;line-height:1.12;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:1.25rem}
.accent{color:var(--orange)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);margin-bottom:20px;
}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--orange);border-radius:2px}
.lede{color:var(--mist);font-size:1.1rem;font-weight:400;max-width:600px}
.center{text-align:center}
.center .lede{margin:16px auto 0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font);font-weight:700;font-size:.95rem;
  padding:15px 28px;border-radius:999px;border:none;cursor:pointer;
  text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--orange);color:#fff;
  box-shadow:0 8px 32px rgba(var(--accent-rgb),.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(var(--accent-rgb),.5)}
.btn-ghost{
  background:var(--surface);color:var(--cream);
  border:1px solid var(--stroke-bright);
}
.btn-ghost:hover{background:var(--surface-2);transform:translateY(-2px)}
.btn .arr{transition:transform .2s ease}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(14,7,59,.78);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--stroke);
}
.nav-inner{
  max-width:1200px;margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav-logo img{height:30px;display:block}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{
  color:var(--mist);text-decoration:none;font-size:.9rem;font-weight:600;
  transition:color .2s ease;white-space:nowrap;
}
@media(max-width:1080px){.nav-links{gap:20px}.nav-links a{font-size:.84rem}}
@media(max-width:1180px){.nav-cta .btn-ghost{display:none}}
.nav-links a:hover{color:var(--cream)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav .btn{padding:11px 22px;font-size:.85rem}
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--cream);margin:5px 0;border-radius:2px;transition:.3s}
@media(max-width:900px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .nav-burger{display:block}
  .nav-mobile{
    display:none;flex-direction:column;gap:4px;
    background:rgba(14,4,54,.97);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--stroke);padding:12px 24px 24px;
  }
  .nav-mobile.open{display:flex}
  .nav-mobile a{color:var(--cream);text-decoration:none;font-weight:600;padding:12px 0;border-bottom:1px solid var(--stroke)}
  .nav-mobile a:last-child{border-bottom:none}
}

@media(max-width:480px){
  .nav-inner{padding:14px 16px;gap:10px}
  .nav-cta{gap:6px}
  .nav .btn-primary{padding:10px 14px;font-size:.76rem}
  .nav-logo img{height:26px}
  main .btn{white-space:normal;text-align:center}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
/* ── the journey: three panels travel horizontally as you scroll — location → stops → destination ── */
.journey{padding:0}
.journey-track{height:560vh;position:relative}
.journey-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.journey-rail{display:flex;height:100%;width:400vw;will-change:transform}
.jpanel{width:100vw;flex:none;height:100%;display:flex;align-items:center;box-sizing:border-box;padding:84px 0 64px;position:relative}
.jpanel .jp-copy,.jpanel .jp-vis{transition:opacity .6s ease,transform .7s cubic-bezier(.22,.8,.3,1)}
.jpanel:not(.on) .jp-copy{opacity:.25;transform:translateX(28px)}
.jpanel:not(.on) .jp-vis{opacity:.35;transform:translateX(48px) scale(.97)}
/* keep the tall hero phone inside a 100vh panel on short screens */
.jpanel .hero-phone{width:min(340px,80%,calc((100vh - 220px) * .478))}
.hero-phone.device{aspect-ratio:340/712;height:auto}
.hero-phone .device-screen{background:#0E0436}
.hero-video{position:absolute;left:0;right:0;top:44px;width:100%;height:calc(100% - 44px);object-fit:cover;object-position:top;display:block;background:#0E0436}
.journey-road{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:min(620px,84vw);height:34px;z-index:5;pointer-events:none}
.journey-road .jr-line{position:absolute;left:0;right:0;top:8px;height:0;border-top:2px dashed rgba(255,255,255,.28)}
.journey-road .jr-dot{position:absolute;top:2px;left:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(249,115,22,.25),0 0 18px rgba(249,115,22,.6);transition:left .15s linear}
.journey-road b{position:absolute;top:22px;transform:translateX(-50%);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.42);white-space:nowrap;transition:color .3s}
.journey-road b.on{color:var(--cream)}
.journey-road b:first-child{transform:none}
.journey-road b:last-child{transform:translateX(-100%)}

/* step 4 · turn-by-turn + automatic reroute */
.rr-stack{position:relative;width:min(340px,100%,calc((100vh - 230px) * .52));margin:0 auto;display:flex;flex-direction:column;gap:12px;padding-left:26px}
.rr-stack::before{content:"";position:absolute;left:7px;top:70px;bottom:26px;border-left:2px dashed rgba(153,135,255,.5)}
.rr-banner{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.55);margin-left:-26px;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.rr-spin{flex:none;width:18px;height:18px;border-radius:50%;border:2px dashed #4ade80;animation:rrSpin 2.4s linear infinite}
@keyframes rrSpin{to{transform:rotate(360deg)}}
.rr-banner b{display:block;font-size:.8rem}
.rr-banner small{display:block;font-size:.66rem;color:var(--mist)}
.rr-eta{margin-left:auto;flex:none;font-size:.66rem;font-weight:700;color:#fff;background:rgba(255,255,255,.08);padding:5px 8px;border-radius:999px;white-space:nowrap}
.rr-eta s{color:rgba(255,255,255,.45);margin-right:4px}
.rr-card{position:relative;display:block;width:100%;flex:none;aspect-ratio:278/160;border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.rr-wrap{position:relative;flex:none;width:100%;aspect-ratio:278/160;border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.rr-wrap>img{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:14px}
.rr-card::after{content:"";position:absolute;left:-23px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#9987FF}
.rr-wrap{position:relative}
.rr-wrap::after{content:"";position:absolute;left:-23px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#9987FF}
.rr-moved{position:absolute;right:10px;top:10px;font-size:.6rem;font-weight:700;padding:4px 8px;border-radius:999px;background:#22c55e;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.loan-card.detour{background:#0f2a22;border:1px solid rgba(74,222,128,.6);aspect-ratio:278/160}
.loan-card.detour .lc-ico{background:#22c55e}.loan-card.detour .lc-ico svg{stroke:#fff}
.loan-card .lc-amt.up{color:#4ade80}

/* ── nearby: the map irises open from your pin; places lock in one by one ── */
.mp{padding:0}
.mp-track{height:240vh;position:relative}
.mp-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#070020;display:flex;align-items:center}
.mp-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;width:100%}
.mp-copy{opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .6s cubic-bezier(.22,.8,.3,1)}
.mp-copy.on{opacity:1;transform:none}
.mp-legend{display:flex;gap:18px;margin-top:22px;font-size:.78rem;font-weight:600;color:var(--mist)}
.mp-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.mp-vis{position:relative;display:flex;justify-content:center}
.mp-map.device{width:auto;min-width:0;height:min(720px,78vh);aspect-ratio:340/712}
.mp-map .device-screen{background:#0E0436}
.mp-video{position:absolute;left:0;right:0;top:44px;bottom:0;width:100%;height:calc(100% - 44px);object-fit:cover;object-position:top;display:block;background:#0E0436}
.mp-status{position:absolute;left:0;right:0;top:0;z-index:3;padding:13px 20px 0}
.mp-layer{position:absolute;inset:0;clip-path:circle(0% at 50% 55%);will-change:clip-path}
.mp-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mp-you{position:absolute;left:50%;top:55%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#9987FF;box-shadow:0 0 0 4px rgba(153,135,255,.35),0 0 24px rgba(153,135,255,.8);z-index:4}
.mp-ring{position:absolute;left:50%;top:55%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid rgba(153,135,255,.6);animation:mpRing 2.4s ease-out infinite;z-index:3}
.mp-ring:nth-child(2){animation-delay:.8s}.mp-ring:nth-child(3){animation-delay:1.6s}
@keyframes mpRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(9);opacity:0}}
.mp-sweep{position:absolute;left:50%;top:55%;width:0;height:0;z-index:2;pointer-events:none}
.mp-sweep::before{content:"";position:absolute;left:-900px;top:-900px;width:1800px;height:1800px;border-radius:50%;background:conic-gradient(from 0deg,rgba(153,135,255,0) 0deg,rgba(153,135,255,.22) 60deg,rgba(153,135,255,0) 62deg);animation:mpSweep 3.2s linear infinite}
@keyframes mpSweep{to{transform:rotate(360deg)}}
.mp-locate{position:absolute;left:50%;top:55%;transform:translate(-50%,28px);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);white-space:nowrap;z-index:4}
@media(max-width:900px),(prefers-reduced-motion:reduce){
  .mp-track{height:auto}.mp-stage{position:static;height:auto;overflow:visible;padding:80px 0 60px}
  .mp-grid{grid-template-columns:1fr;gap:34px;text-align:center}
  .mp-map.device{height:min(620px,72vh)}
  .mp-copy{opacity:1!important;transform:none!important}.mp-legend{justify-content:center}
  .mp-layer{clip-path:none!important}.mp-locate,.mp-sweep,.mp-you,.mp-ring{display:none}
  /* phones: the map stays clean; places become a list beneath it */
}

/* ── under the hood: the explainer film, scrubbed by scroll ── */
.fx{padding:0}
.fx-track{height:560vh;position:relative}
.fx-stage{position:sticky;top:0;height:100vh;height:100dvh;box-sizing:border-box;padding-top:84px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#070020}
.fx-head{text-align:center}
.fx-head .eyebrow{justify-content:center}
.fx-frame{position:relative;width:min(1180px,92vw,calc((100vh - 270px) * 16 / 9));aspect-ratio:16/9;border-radius:22px;overflow:hidden;box-shadow:0 50px 120px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08);background:#c9c0dd}
.fx-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none}
.fx-bar{width:min(1180px,92vw,calc((100vh - 270px) * 16 / 9));height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.fx-bar i{display:block;height:100%;width:0;background:var(--orange);transition:width .12s linear}
.fx-hint{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);display:inline-flex;align-items:center;gap:8px;transition:opacity .4s}
.fx-hint svg{width:14px;height:14px;animation:introArrow 1.6s ease-in-out infinite}
@media(max-width:900px){.fx-track{height:420vh}.fx-frame{border-radius:14px}}
@media(prefers-reduced-motion:reduce){.fx-track{height:auto}.fx-stage{position:static;height:auto;padding:80px 0}.fx-hint{display:none}}

/* ── navis: same destination, different driving ── */
.navis{padding:120px 0 100px}
.navis .sec-head{text-align:center;max-width:720px;margin:0 auto}
.navis .lede{margin:16px auto 0}
.navi-dest{display:inline-flex;align-items:center;gap:10px;margin:26px auto 0;padding:9px 14px;border-radius:999px;border:1px solid rgba(74,222,128,.55);background:rgba(74,222,128,.07);font-size:.8rem;font-weight:700}
.navi-dest svg{width:14px;height:14px;stroke:#4ade80;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.navi-card .role{margin-bottom:10px}
.navi-say{margin-top:16px;padding:10px 12px;border-radius:12px;border:1px solid rgba(74,222,128,.55);background:rgba(74,222,128,.06);font-size:.82rem;line-height:1.4;text-align:left;color:var(--cream);position:relative;display:flex;gap:7px}
.navi-say svg{flex:none;width:12px;height:12px;margin-top:4px;stroke:#4ade80;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* step 2 · mandatory stops — real route cards pinned along a road */
.stops{position:relative;width:min(540px,100%);aspect-ratio:540/480;margin:0 auto}
.stops-road{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stops-road path{fill:none;stroke:rgba(153,135,255,.55);stroke-width:2.5;stroke-dasharray:5 11;stroke-linecap:round}
.stops-road circle{fill:var(--orange)}
.stop{position:absolute;width:46%;display:block;height:auto;border-radius:14px;box-shadow:0 22px 50px rgba(0,0,0,.5)}
.stop.s1{left:0;top:0}.stop.s2{right:0;top:19%}.stop.s3{left:0;top:44%}.stop.s4{right:0;top:66%}
.loan-card{box-sizing:border-box;aspect-ratio:277/150;background:#1E1450;padding:5.5% 5%;color:#fff;display:flex;flex-direction:column;justify-content:space-between;container-type:inline-size;overflow:hidden}
.loan-card .lc-top{display:flex;gap:9px;align-items:center}
.loan-card .lc-ico{width:30%;max-width:44px;aspect-ratio:1;border-radius:22%;background:#0E0436;display:grid;place-items:center;flex:none}
.loan-card .lc-ico svg{width:52%;height:52%;stroke:#F97316;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.loan-card small{display:block;font-size:4.1cqw;color:rgba(255,255,255,.55);white-space:nowrap}
.loan-card .lc-top b{display:block;font-size:6.1cqw;font-weight:600;line-height:1.2;white-space:nowrap}
.loan-card .lc-row{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.09);border-radius:4cqw;padding:3.2cqw 4cqw}
.loan-card .lc-row b{display:block;font-size:5.4cqw;font-weight:600;white-space:nowrap}
.loan-card .lc-amt{color:#F97316;font-weight:700;font-size:5.8cqw;white-space:nowrap}

/* step 3 · destinations */
.goals{position:relative;width:min(470px,100%);margin:0 auto;display:flex;flex-direction:column;gap:14px;padding-left:34px}
.goals::before{content:"";position:absolute;left:11px;top:22px;bottom:22px;border-left:2px dashed rgba(153,135,255,.5)}
.goal{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--indigo-deep,#0E0436);border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.goal::before{content:"";position:absolute;left:-29px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(249,115,22,.22)}
.goal.g3::before{background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.22)}
.goal-ico{width:44px;height:44px;border-radius:12px;background:#1E1450;display:grid;place-items:center;flex:none}
.goal-ico svg{width:22px;height:22px;stroke:#9987FF;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.goal-body{flex:1;min-width:0}
.goal-body b{display:block;font-size:1rem;font-weight:700}
.goal-body small{display:block;font-size:.74rem;color:var(--mist);margin:2px 0 8px}
.goal-bar{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.goal-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#9987FF,#F97316)}
.goal.g3 .goal-bar i{background:linear-gradient(90deg,#9987FF,#4ade80)}
.goal-eta{flex:none;font-size:.68rem;font-weight:700;padding:5px 9px;border-radius:999px;background:rgba(153,135,255,.16);color:#c9c0ff;white-space:nowrap}

@media(max-width:900px),(prefers-reduced-motion:reduce){
  .journey-track{height:auto}
  .journey-stage{position:static;height:auto;overflow:visible}
  .journey-rail{display:block;width:auto;transform:none!important}
  .jpanel{width:auto;height:auto;padding:72px 0 40px}
  .jpanel .jp-copy,.jpanel .jp-vis{opacity:1!important;transform:none!important}
  .jpanel .hero-phone{width:min(290px,78%)}
  .journey-road{display:none}
}
.hero-glow{
  position:absolute;top:-200px;left:50%;transform:translateX(-50%);
  width:900px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.13) 0%,rgba(69,66,118,.12) 40%,transparent 70%);
  pointer-events:none;filter:blur(20px);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:64px}}
.hero h2{margin-bottom:18px;font-size:clamp(2.25rem,1.60rem + 2.6vw,3.75rem)}
/* rotating type/delete line: what NavFi reads to fix your position */
.hero-tw{display:block;min-height:1.6em;margin-bottom:22px;font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:700;color:var(--cream);letter-spacing:-.01em}
.hero-tw .tw-word{color:var(--accent,#9987FF)}
.hero-tw .tw-cur{display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-.12em;background:var(--orange);animation:twBlink 1s steps(2) infinite}
@keyframes twBlink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-tw .tw-cur{display:none}}
.hero .lede{margin-bottom:36px;font-size:1.15rem}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px}
.hero-proof{display:flex;align-items:center;gap:12px;color:var(--mist);font-size:.85rem;font-weight:500}
.hero-proof .live-dot{
  width:9px;height:9px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 10px var(--green);animation:blink 2.2s ease-in-out infinite;
}

/* hero visual */
.hero-visual{position:relative;display:flex;justify-content:center}
.hero-phone{
  width:min(340px,80%);position:relative;z-index:2;
  animation:float 7s ease-in-out infinite;
}

/* ── shared device frame: the hero and the scroll story use the same phone ── */
.device{
  box-sizing:border-box;flex:none;position:relative;
  padding:3px;border-radius:54px;
  background:linear-gradient(155deg,#a9a9ae,#54545a 20%,#9b9ba1 46%,#3e3e44 70%,#8f8f95);
  box-shadow:0 44px 96px rgba(0,0,0,.62);
}
.device-screen{
  box-sizing:border-box;position:relative;width:100%;height:100%;
  border:7px solid #08080b;border-radius:51px;
  background:#0E0436;overflow:hidden;
}
.device-screen>img{width:100%;display:block}
.device-island{
  position:absolute;left:50%;top:9px;transform:translateX(-50%);
  width:104px;height:29px;border-radius:999px;background:#000;z-index:4;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-card{
  position:absolute;z-index:3;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  border:1px solid var(--stroke-bright);
  background:var(--indigo-deep);
  animation:float 8s ease-in-out infinite;
}
.hero-card img{display:block;width:100%}
.hc-1{width:240px;top:6%;left:-4%;animation-delay:-2s}
.hc-2{width:224px;bottom:0;right:-4%;animation-delay:-4.5s}
.hc-2 .dest-row small,.hc-2 .dest-row b,.hc-2 .dest-foot span{white-space:nowrap}
/* compact so it doesn't cover the phone's turn-by-turn steps */
.hc-2 .dest-card{padding:11px}
.hc-2 .dest-head{padding-bottom:9px;margin-bottom:9px;gap:8px}
.hc-2 .dest-title svg{width:15px;height:15px;margin-top:1px}
.hc-2 .dest-title{gap:7px}
.hc-2 .dest-title b{font-size:.72rem}
.hc-2 .dest-title span{font-size:.58rem;margin-top:1px}
.hc-2 .dest-eta{font-size:.53rem;padding:3px 7px}
.hc-2 .dest-row{padding:6px 9px;margin-bottom:6px;border-radius:9px}
.hc-2 .dest-row b{font-size:.68rem}
.hc-2 .dest-row small{font-size:.5rem}
.hc-2 .dest-foot{padding-top:2px}
.hc-2 .dest-foot span{font-size:.56rem}
.hc-2 .dest-foot b{font-size:.8rem}
.hc-2 .dest-card{box-shadow:none;border:none;margin:0}
@media(max-width:960px){.hc-1{left:0}.hc-2{right:0}}
@media(max-width:520px){
  .hc-1{width:145px;left:-2%;top:2%}
  .hc-2{width:186px;right:-2%;bottom:0}
  .hero-phone{width:min(290px,78%)}
}
.hero-route{position:absolute;inset:-40px;z-index:1;pointer-events:none}
.hero-route path{
  fill:none;stroke:var(--orange);stroke-width:2.5;
  stroke-dasharray:4 12;stroke-linecap:round;opacity:.6;
  animation:routeflow 1.2s linear infinite;
}
@keyframes routeflow{to{stroke-dashoffset:-16}}
.hero-route circle{fill:var(--orange)}

/* ---------- trust strip ---------- */
.stats{padding:0 0 8px}
.trust-strip{
  display:flex;justify-content:center;align-items:center;gap:22px 56px;flex-wrap:wrap;
  border-top:1px solid var(--stroke);padding-top:44px;
}
.tr-item{text-align:center}
.tr-item b{
  display:block;font-size:1.15rem;font-weight:800;letter-spacing:-.01em;line-height:1.2;
}
.tr-item span{color:var(--mist);font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.tr-item .green-txt{color:var(--green)}
@media(max-width:640px){.trust-strip{gap:20px 32px}}

/* ---------- savings ---------- */
.sav-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:56px}
@media(max-width:860px){.sav-head{grid-template-columns:1fr}}
.sav-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){.sav-cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sav-cards{grid-template-columns:1fr}}
.sav-card{
  border:1px solid var(--stroke);border-radius:var(--radius);
  background:var(--surface);padding:32px 26px;
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.sav-card:hover{transform:translateY(-6px);border-color:rgba(var(--accent-rgb),.45);background:var(--surface-2)}
.sav-card .ic{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--orange-soft);margin-bottom:22px;font-size:1.2rem;
}
.sav-card b{display:block;font-size:1.55rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.sav-card b em{font-style:normal;color:var(--green)}
.sav-card span{color:var(--mist);font-size:.92rem;font-weight:500}
.sav-total{
  font-size:clamp(2.4rem,5vw,3.6rem);font-weight:900;letter-spacing:-.03em;line-height:1.05;
}
.sav-total small{display:block;font-size:1rem;font-weight:600;color:var(--mist);letter-spacing:0;margin-top:10px}

/* ---------- features showcase ---------- */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr}}
.feat-list{display:flex;flex-direction:column;gap:8px}
.feat-item{
  border:1px solid transparent;border-radius:var(--radius);
  padding:26px 28px;cursor:pointer;transition:background .3s ease,border-color .3s ease;
}
.feat-item.active{background:var(--surface);border-color:var(--stroke)}
.feat-item h3{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.feat-item .num{
  width:32px;height:32px;flex:none;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:800;background:var(--surface-2);color:var(--mist);
  transition:background .3s,color .3s;
}
.feat-item.active .num{background:var(--orange);color:#fff}
.feat-item p{color:var(--mist);font-size:.95rem;display:none;padding-left:46px}
.feat-item.active p{display:block}
.feat-stage{
  position:sticky;top:120px;
  border:1px solid var(--stroke);border-radius:28px;
  background:radial-gradient(circle at 30% 20%,rgba(69,66,118,.35),transparent 60%),var(--surface);
  min-height:560px;display:flex;align-items:center;justify-content:center;
  padding:40px;overflow:hidden;
}
@media(max-width:900px){.feat-stage{position:static;min-height:420px}}
.feat-stage .feat-shot{display:none}
.feat-stage .feat-shot.show{animation:fadeUp .5s ease}
.feat-stage img.feat-shot{
  max-width:100%;max-height:520px;object-fit:contain;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));
  border-radius:20px;
}
.feat-stage img.feat-shot.show{display:block}
/* bill-timing card stack */
#f4.show{display:flex;flex-direction:column;gap:16px;width:min(320px,100%)}
.bt-card{
  background:#2B2462;border-radius:18px;padding:15px;
  box-shadow:0 22px 50px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.05);
}
.bt-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.bt-ic{
  width:44px;height:44px;border-radius:13px;flex:none;
  background:#161042;color:var(--orange);font-size:1.25rem;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}
.bt-when{display:inline-flex;align-items:center;gap:5px;color:var(--mist);font-size:.72rem;font-weight:600}
.bt-head b{display:block;font-size:1rem;line-height:1.3}
.bt-inner{
  background:#39307A;border-radius:13px;padding:11px 14px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.bt-inner b{display:block;font-size:.88rem;line-height:1.3}
.bt-inner span{display:block;color:var(--mist);font-size:.73rem;margin-top:1px}
.bt-inner em{font-style:normal;color:var(--orange);font-weight:800;font-size:.92rem;white-space:nowrap}
#f4 .f4-cal{width:100%;border-radius:18px;box-shadow:0 22px 50px rgba(0,0,0,.45);display:block}
.bt-next{
  font-style:normal;background:rgba(255,255,255,.25);border-radius:999px;
  padding:2px 8px;font-size:.58rem;font-weight:800;letter-spacing:.06em;color:#fff;
}
.bt-card.bt-green{background:linear-gradient(135deg,#27B451,#189A41)}
.bt-green .bt-ic{background:#161042;color:#4ADE80}
.bt-green .bt-when{color:rgba(255,255,255,.85)}
.bt-green .bt-inner{background:rgba(255,255,255,.2)}
.bt-green .bt-inner span{color:rgba(255,255,255,.75)}
.bt-green .bt-inner em{color:#fff}
/* destination card */
.dest-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  border-bottom:2px solid #4D8BFF;padding-bottom:13px;margin-bottom:13px;
}
.dest-title{display:flex;gap:10px;align-items:flex-start}
.dest-title svg{flex:none;margin-top:2px}
.dest-title b{display:block;font-size:.96rem;line-height:1.25}
.dest-title span{display:block;color:var(--mist);font-size:.72rem;margin-top:2px}
.dest-eta{
  flex:none;background:rgba(255,255,255,.09);border-radius:999px;
  padding:5px 11px;font-size:.68rem;font-weight:700;white-space:nowrap;
}
.dest-row{
  background:#39307A;border-radius:13px;padding:10px 14px;margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.dest-row small{display:block;color:var(--mist);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.dest-row b{display:block;font-size:.9rem;margin-top:1px}
.dest-bal{text-align:right}
.dest-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:4px 2px 0;
}
.dest-foot span{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.dest-foot b{font-size:1.05rem;font-weight:800}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.feat-cards{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.feat-cards{grid-template-columns:1fr}}

/* ---------- route / how it works ---------- */
.route-sec{position:relative}
.route-head{max-width:640px;margin-bottom:56px}
.node-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.node-grid{grid-template-columns:1fr}}
.node-card{
  border:1px solid var(--stroke);border-radius:var(--radius);
  background:var(--surface);padding:30px 28px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .3s ease,border-color .3s ease;
}
.node-card:hover{transform:translateY(-5px);border-color:rgba(var(--accent-rgb),.4)}
.node-card .pill{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:800;letter-spacing:.16em;
  background:var(--orange-soft);color:var(--orange);
  padding:6px 13px;border-radius:999px;
}
.node-card h3{font-size:1.25rem;letter-spacing:-.01em}
.node-card p{color:var(--mist);font-size:.92rem;flex:1}
.node-chip{
  align-self:flex-start;display:inline-flex;align-items:baseline;gap:8px;
  border:1px solid var(--stroke-bright);border-radius:999px;padding:7px 15px;
  font-size:.78rem;font-weight:600;color:var(--mist);
}
.node-chip b{font-size:.9rem;font-weight:800;color:var(--cream)}
.node-chip b.green{color:var(--green)}
.obstruction{
  margin-top:80px;border:1px solid rgba(var(--accent-rgb),.4);border-radius:var(--radius);
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.1),transparent 60%);
  padding:26px 32px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.obstruction .blink{
  width:12px;height:12px;border-radius:50%;background:var(--orange);
  animation:blink 1.1s ease-in-out infinite;flex:none;
}
@keyframes blink{50%{opacity:.25}}
.obstruction b{letter-spacing:.14em;font-size:.85rem}
.obstruction span{color:var(--mist);font-size:.9rem}

/* ---------- navi characters ---------- */
.navi-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
@media(max-width:1000px){.navi-cards{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.navi-cards{grid-template-columns:1fr}}
.navi-card{
  border:1px solid var(--stroke);border-radius:var(--radius);
  background:var(--surface);padding:32px 24px 28px;text-align:center;
  transition:transform .3s ease,border-color .3s ease;
  position:relative;overflow:hidden;
}
.navi-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(var(--accent-rgb),.14),transparent 60%);
  opacity:0;transition:opacity .3s ease;
}
.navi-card:hover,.navi-card.on{transform:translateY(-8px);border-color:rgba(var(--accent-rgb),.45)}
.navi-card:hover::before,.navi-card.on::before{opacity:1}
.navi-card.on .navi-say{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.55),0 0 26px rgba(var(--accent-rgb),.28)}
.navi-card .navi-say{transition:box-shadow .5s}
.navi-card img{
  height:170px;object-fit:contain;margin-bottom:20px;position:relative;
  transition:transform .3s ease;
}
.navi-card:hover img,.navi-card.on img{transform:scale(1.06)}
.navi-card h3{font-size:1.15rem;margin-bottom:4px;position:relative}
.navi-card .role{color:var(--orange);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:12px;position:relative}
.navi-card p{color:var(--mist);font-size:.88rem;position:relative}
.navi-cta{margin-top:44px;text-align:center}

/* ---------- games strip ---------- */
.games{padding-top:0}
.games-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.games-row{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.games-row{grid-template-columns:1fr}}
.game{
  border:1px solid var(--stroke);border-radius:16px;background:var(--surface);
  padding:22px 22px 18px;text-decoration:none;color:var(--cream);
  transition:transform .25s ease,border-color .25s ease;display:block;
}
.game:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.4)}
.game small{color:var(--mist);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.game b{display:block;font-size:1rem;margin:6px 0 10px}
.game span{color:var(--orange);font-size:.82rem;font-weight:700}
.games-label{display:flex;align-items:center;gap:14px;margin-bottom:24px;color:var(--mist);font-size:.85rem;font-weight:600}
.games-label b{
  font-size:.72rem;letter-spacing:.16em;color:var(--cream);
  border:1px solid var(--stroke-bright);border-radius:999px;padding:6px 14px;
}

/* ---------- beat-the-optimizer embed ---------- */
.game-frame{
  max-width:960px;margin:52px auto 0;border-radius:26px;overflow:hidden;
  border:1px solid var(--stroke-bright);background:#070020;
  box-shadow:0 40px 100px rgba(0,0,0,.5);
}
.game-frame iframe{display:block;width:100%;height:780px;border:0}
@media(max-width:640px){.game-frame iframe{height:680px}}
.game-close{
  max-width:640px;margin:28px auto 0;text-align:center;
  color:var(--mist);font-size:.95rem;
}
.game-close a{color:var(--orange);font-weight:700;text-decoration:none}

/* ---------- nav play dropdown ---------- */
.nav-drop{position:relative}
.nav-drop>a{cursor:pointer}
.nav-drop .caret{font-size:.6rem;margin-left:4px;opacity:.7}
.drop-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  min-width:250px;display:none;flex-direction:column;gap:2px;
  background:rgba(10,1,40,.97);border:1px solid var(--stroke-bright);
  border-radius:16px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.nav-drop.open .drop-menu,.nav-drop:hover .drop-menu{display:flex}
.drop-menu a{
  display:block;padding:11px 14px;border-radius:10px;
  color:var(--cream)!important;font-size:.88rem;font-weight:600;text-decoration:none;
}
.drop-menu a small{display:block;color:var(--mist);font-weight:500;font-size:.74rem;margin-top:1px}
.drop-menu a:hover{background:var(--surface-2)}

/* ---------- security ---------- */
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
@media(max-width:900px){.sec-grid{grid-template-columns:1fr}}
.sec-card{
  border:1px solid var(--stroke);border-radius:var(--radius);
  background:var(--surface);padding:36px 30px;
}
.sec-card .ic{
  width:48px;height:48px;border-radius:14px;background:var(--green-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;font-size:1.25rem;
}
.sec-card h3{margin-bottom:10px;font-size:1.15rem}
.sec-card p{color:var(--mist);font-size:.93rem}
.sec-badges{
  display:flex;gap:28px;flex-wrap:wrap;justify-content:center;margin-top:52px;
  color:var(--mist);font-size:.85rem;font-weight:600;
}
.sec-badges span{display:inline-flex;align-items:center;gap:9px}
.sec-badges svg{flex:none}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:880px;margin:60px auto 0}
@media(max-width:820px){.price-grid{grid-template-columns:1fr}}
.price-card{
  border:1px solid var(--stroke);border-radius:26px;background:var(--surface);
  padding:44px 38px;position:relative;display:flex;flex-direction:column;
}
.price-card.hot{
  border-color:rgba(var(--accent-rgb),.55);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.08),var(--surface) 45%);
  box-shadow:0 24px 70px rgba(var(--accent-rgb),.12);
}
.price-tag{
  position:absolute;top:-14px;right:30px;
  background:var(--orange);color:#fff;font-size:.72rem;font-weight:800;
  letter-spacing:.1em;padding:7px 16px;border-radius:999px;text-transform:uppercase;
}
.price-card h3{font-size:1.1rem;margin-bottom:4px}
.price-card .sub{color:var(--mist);font-size:.88rem;margin-bottom:26px}
.price-num{display:flex;align-items:baseline;gap:6px;margin-bottom:8px}
.price-num b{font-size:3.2rem;font-weight:900;letter-spacing:-.03em;line-height:1}
.price-num span{color:var(--mist);font-weight:600}
.price-note{color:var(--mist);font-size:.82rem;margin-bottom:28px}
.price-card ul{list-style:none;margin:28px 0 34px;display:flex;flex-direction:column;gap:12px}
.price-card li{
  display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--cream);font-weight:500;
}
.price-card li::before{
  content:'';flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2322C55E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.price-card .btn{margin-top:auto;justify-content:center}
.price-fine{
  max-width:760px;margin:36px auto 0;color:var(--mist);font-size:.78rem;text-align:center;line-height:1.7;
}
.price-fine a{color:var(--cream)}
.price-perks{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:28px;color:var(--mist);font-size:.84rem;font-weight:600}

/* ---------- faq ---------- */
.faq-wrap{max-width:800px;margin:56px auto 0}
.faq{
  border:1px solid var(--stroke);border-radius:16px;background:var(--surface);
  margin-bottom:12px;overflow:hidden;
}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 26px;
  font-weight:700;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';font-size:1.4rem;font-weight:400;color:var(--orange);
  transition:transform .25s ease;flex:none;line-height:1;
}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 26px 24px;color:var(--mist);font-size:.94rem}

/* ---------- blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}}
.blog-card{
  border:1px solid var(--stroke);border-radius:var(--radius);overflow:hidden;
  background:var(--surface);text-decoration:none;color:var(--cream);
  transition:transform .3s ease,border-color .3s ease;display:flex;flex-direction:column;
}
.blog-card:hover{transform:translateY(-6px);border-color:var(--stroke-bright)}
.blog-card .thumb{aspect-ratio:16/9;overflow:hidden}
.blog-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.blog-card:hover .thumb img{transform:scale(1.05)}
.blog-body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-meta{display:flex;gap:10px;align-items:center;color:var(--mist);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;flex-wrap:wrap}
.blog-meta span,.blog-meta i{white-space:nowrap}
.blog-meta i{font-style:normal;color:var(--orange)}
.blog-body h3{font-size:1.05rem;line-height:1.35}
.blog-body span{margin-top:auto;color:var(--orange);font-weight:700;font-size:.85rem}

/* ---------- final cta ---------- */
.arrive{position:relative;overflow:hidden;text-align:center;padding:140px 0}
.arrive-glow{
  position:absolute;bottom:-260px;left:50%;transform:translateX(-50%);
  width:1000px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.16),transparent 65%);
  pointer-events:none;
}
.arrive h2{
  font-size:clamp(3.2rem,10vw,7.5rem);font-weight:900;letter-spacing:-.03em;line-height:.98;
  text-transform:uppercase;margin-bottom:34px;
}
.arrive .lede{margin:0 auto 44px}
.arrive-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:36px}
.store-badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.store-badge{
  display:inline-flex;align-items:center;gap:11px;
  border:1px solid var(--stroke-bright);border-radius:14px;
  background:var(--surface);padding:11px 20px;text-decoration:none;color:var(--cream);
  transition:background .2s ease,transform .2s ease;
}
.store-badge:hover{background:var(--surface-2);transform:translateY(-2px)}
.store-badge img{height:24px;width:24px;object-fit:contain}
@media(max-width:480px){
  .store-badge{padding:9px 11px;gap:7px}
  .store-badge b{font-size:.8rem}
  .store-badge small{font-size:.54rem}
  .store-badge img{height:19px;width:19px}
  .hero-ctas{gap:10px}
}
.store-badge div{text-align:left;line-height:1.2}
.store-badge small{display:block;font-size:.62rem;color:var(--mist);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.store-badge b{font-size:.92rem;font-weight:700}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--stroke);
  background:rgba(0,0,0,.22);
  padding:72px 0 36px;
}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.foot-grid{grid-template-columns:1fr}}
.foot-brand img{height:30px;margin-bottom:20px}
.foot-brand p{color:var(--mist);font-size:.88rem;max-width:360px}
.foot-col b{display:block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);margin-bottom:18px}
.foot-col a{display:block;color:var(--mist);text-decoration:none;font-size:.9rem;padding:6px 0;transition:color .2s}
.foot-col a:hover{color:var(--cream)}
.foot-legal{
  border-top:1px solid var(--stroke);padding-top:28px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  color:var(--mist);font-size:.8rem;
}
.foot-legal nav{display:flex;gap:22px;flex-wrap:wrap}
.foot-legal a{color:var(--mist);text-decoration:none}
.foot-legal a:hover{color:var(--cream)}

/* ---------- projection demo ---------- */
.proj-grid{
  display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start;margin-top:64px;
}
.proj-grid>*{min-width:0}
@media(max-width:920px){.proj-grid{grid-template-columns:1fr}}
.proj-panel{
  border:1px solid var(--stroke);border-radius:26px;background:var(--surface);
  padding:36px 32px;position:sticky;top:110px;
}
@media(max-width:920px){.proj-panel{position:static}}
.proj-panel .panel-label{
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist);margin-bottom:24px;display:flex;align-items:center;gap:10px;
}
.proj-panel .panel-label::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.pfield{margin-bottom:18px;min-width:0}
.pfield label{display:block;font-size:.8rem;font-weight:700;color:var(--mist);margin-bottom:8px}
.pin{
  display:flex;align-items:center;gap:2px;
  border:1px solid var(--stroke-bright);border-radius:14px;background:rgba(0,0,0,.25);
  padding:0 16px;transition:border-color .2s ease,box-shadow .2s ease;
}
.pin:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.pin span{color:var(--mist);font-weight:700;font-size:1rem}
.pin input{
  flex:1;min-width:0;background:none;border:none;outline:none;color:var(--cream);
  font-family:var(--font);font-size:1.15rem;font-weight:700;padding:13px 6px;
  -moz-appearance:textfield;appearance:textfield;
}
.pin input::-webkit-outer-spin-button,.pin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pfield-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.proj-results{margin-top:28px;border-top:1px solid var(--stroke);padding-top:24px}
.tbt-label{
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist);margin-bottom:18px;display:flex;align-items:center;gap:9px;
}
.tbt-label::before{content:'🧭';font-size:.9rem}
.tbt{list-style:none;display:flex;flex-direction:column;margin:0 0 8px;padding:0}
.tbt-step{display:flex;gap:14px;align-items:flex-start;position:relative;padding-bottom:20px}
.tbt-step:last-child{padding-bottom:0}
.tbt-step::before{
  content:'';position:absolute;left:15px;top:36px;bottom:4px;width:2px;
  background:repeating-linear-gradient(180deg,rgba(var(--accent-rgb),.55) 0 4px,transparent 4px 11px);
}
.tbt-step:last-child::before{display:none}
.tbt-step .ti{
  width:32px;height:32px;border-radius:50%;flex:none;position:relative;z-index:1;
  background:var(--surface-2);border:1px solid var(--stroke-bright);
  display:inline-flex;align-items:center;justify-content:center;font-size:.88rem;
}
.tbt-step.dest .ti{background:var(--orange-soft);border-color:rgba(var(--accent-rgb),.55)}
.tbt-step.warn .ti{background:var(--orange-soft);border-color:rgba(var(--accent-rgb),.55)}
.tbt-step.mark .ti{background:var(--green-soft);border-color:rgba(34,197,94,.45)}
.tbt-step .tx{flex:1;min-width:0}
.tbt-step .tx b{display:block;font-size:.92rem;line-height:1.35}
.tbt-step .tx span{display:block;color:var(--mist);font-size:.8rem;line-height:1.5;margin-top:3px}
.tbt-step em{font-style:normal;color:var(--orange);font-weight:800;font-size:.78rem;white-space:nowrap;margin-top:7px}
.pr-hi{
  margin-top:10px;border-radius:14px;background:var(--orange-soft);
  border:1px solid rgba(var(--accent-rgb),.35);padding:16px 18px;
  font-size:.9rem;font-weight:600;line-height:1.5;
}
.pr-hi b{color:var(--orange)}
/* road */
.proj-road{position:relative;min-height:600px}
.proj-road svg{width:100%;height:auto;display:block}
#roadBase{fill:none;stroke:rgba(69,66,118,.55);stroke-width:34;stroke-linecap:round}
#roadEdge{fill:none;stroke:rgba(255,255,255,.08);stroke-width:38;stroke-linecap:round}
#roadDash{fill:none;stroke:rgba(255,253,248,.35);stroke-width:2.5;stroke-dasharray:10 14;stroke-linecap:round;animation:roadcrawl 1.6s linear infinite}
@keyframes roadcrawl{to{stroke-dashoffset:-24}}
#roadProg{fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.7))}
.wp{
  position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;
  pointer-events:none;z-index:4;
  transition:top 1s cubic-bezier(.4,0,.2,1),left 1s cubic-bezier(.4,0,.2,1),opacity .4s ease;
}
.wp .dot{
  width:18px;height:18px;border-radius:50%;background:var(--indigo-deep);
  border:3px solid var(--orange);box-shadow:0 0 0 5px rgba(14,4,54,.85),0 0 18px rgba(var(--accent-rgb),.5);flex:none;
}
.wp.start .dot{border-color:var(--green);box-shadow:0 0 0 5px rgba(14,4,54,.85),0 0 18px rgba(34,197,94,.5)}
.wp.dest .dot{background:var(--orange)}
.wp .tag{
  background:rgba(14,4,54,.92);border:1px solid var(--stroke-bright);border-radius:12px;
  padding:8px 13px;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.wp .tag b{display:block;font-size:.78rem;font-weight:800;letter-spacing:.04em}
.wp .tag span{display:block;font-size:.72rem;color:var(--mist);font-weight:600}
.wp.dest .tag b{color:var(--orange)}
.wp.flip{flex-direction:row-reverse}
.wp.hide{opacity:0}
#carDot{
  position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);
  pointer-events:none;z-index:3;
}
#carDot svg{width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.9))}
.proj-obstruction{
  position:absolute;inset:auto 8% 42%;z-index:4;
  border:1px solid rgba(var(--accent-rgb),.5);border-radius:16px;
  background:rgba(14,4,54,.95);padding:22px 24px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.proj-obstruction b{display:block;letter-spacing:.14em;font-size:.8rem;color:var(--orange);margin-bottom:8px}
.proj-obstruction span{color:var(--mist);font-size:.85rem;line-height:1.5;display:block}

/* ---------- leak chips ---------- */
.leaks{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.leaks span{
  border:1px solid var(--stroke-bright);border-radius:999px;background:var(--surface);
  padding:14px 26px;font-size:.95rem;font-weight:600;color:var(--cream);white-space:nowrap;
}

/* ---------- one-line leak typewriter ---------- */
.leak-h{line-height:1.25}
.type-wrap{color:var(--accent-text,#C9BCFF);display:inline-block;min-height:1.25em;white-space:nowrap}
.type-caret{
  display:inline-block;width:3px;height:.92em;background:currentColor;
  margin-left:7px;vertical-align:-.1em;animation:caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.type-caret{animation:none}}

/* ---------- reviews ---------- */
.rev-head{display:flex;flex-direction:column;align-items:center;gap:14px}
.rev-score{display:flex;align-items:center;gap:14px;font-weight:800;font-size:1.05rem}
.stars{display:inline-flex;gap:3px;color:var(--orange);font-size:1.05rem;letter-spacing:2px}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
@media(max-width:900px){.rev-grid{grid-template-columns:1fr}}
.rev-card{
  border:1px solid var(--stroke);border-radius:var(--radius);background:var(--surface);
  padding:30px 28px;display:flex;flex-direction:column;gap:14px;
  transition:transform .3s ease,border-color .3s ease;
}
.rev-card:hover{transform:translateY(-5px);border-color:rgba(var(--accent-rgb),.4)}
.rev-card h3{font-size:1.02rem;line-height:1.4}
.rev-card p{color:var(--mist);font-size:.92rem;flex:1}
.rev-card .who{display:flex;align-items:center;gap:10px;font-size:.8rem;font-weight:700;color:var(--mist)}
.rev-card .who .av{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:var(--orange-soft);color:var(--orange);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;
}
.rev-note{text-align:center;margin-top:32px;color:var(--mist);font-size:.82rem}
.rev-note a{color:var(--cream)}

/* ---------- watch section ---------- */
.watch-frame{
  margin:56px auto 0;border-radius:26px;overflow:hidden;
  border:1px solid var(--stroke-bright);background:#08051f;
  box-shadow:0 40px 110px rgba(0,0,0,.55);
}
.watch-frame video{display:block;width:100%}
.watch-frame.desktop{max-width:980px}
.watch-frame.mobile{display:none;max-width:400px}
@media(max-width:768px){
  .watch-frame.desktop{display:none}
  .watch-frame.mobile{display:block}
}

/* ---------- vs section ---------- */
.vs-card{
  max-width:920px;margin:60px auto 0;border:1px solid var(--stroke);border-radius:26px;
  overflow:hidden;background:var(--surface);
}
.vs-head{display:grid;grid-template-columns:1fr 1fr}
.vs-head>div{padding:24px 30px;font-weight:800;font-size:1rem;display:flex;align-items:center;gap:10px}
.vs-head .them{color:var(--mist);border-bottom:1px solid var(--stroke)}
.vs-head .us{
  color:var(--cream);border-bottom:2px solid var(--orange);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.1),transparent);
}
.vs-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--stroke)}
.vs-row>div{padding:20px 30px;font-size:.93rem;display:flex;align-items:flex-start;gap:12px;line-height:1.5}
.vs-row .them{color:var(--mist)}
.vs-row .us{color:var(--cream);font-weight:600;background:rgba(var(--accent-rgb),.04)}
.vs-row .x,.vs-row .c{flex:none;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;margin-top:1px}
.vs-row .x{background:rgba(255,255,255,.07);color:var(--mist)}
.vs-row .c{background:var(--green-soft);color:var(--green)}
@media(max-width:640px){
  .vs-head>div,.vs-row>div{padding:16px 18px;font-size:.85rem}
}

/* ---------- reroute animation ---------- */
.reroute{
  margin-top:80px;border:1px solid var(--stroke);border-radius:var(--radius);
  background:var(--surface);padding:30px 34px;
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
}
@media(max-width:640px){.reroute{grid-template-columns:1fr;gap:16px}}
.reroute .rr-label{
  font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--mist);
  text-transform:uppercase;display:flex;align-items:center;gap:10px;white-space:nowrap;
}
.reroute .rr-label .blink{width:10px;height:10px;border-radius:50%;background:var(--orange);animation:blink 1.1s ease-in-out infinite;flex:none}
.rr-stage{position:relative;min-height:64px}
.rr-step{
  position:absolute;inset:0;display:flex;align-items:center;gap:16px;
  opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease;
  pointer-events:none;
}
.rr-step.on{opacity:1;transform:none}
.rr-step .ic{
  width:44px;height:44px;border-radius:13px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;
}
.rr-step.warn .ic{background:rgba(var(--accent-rgb),.16)}
.rr-step.calc .ic{background:rgba(255,255,255,.08)}
.rr-step.done .ic{background:var(--green-soft)}
.rr-step b{display:block;font-size:.95rem;letter-spacing:.01em}
.rr-step span{display:block;color:var(--mist);font-size:.82rem}
.rr-step.calc .ic svg{animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- demo close ---------- */
.demo-close{
  margin-top:64px;text-align:center;border-top:1px solid var(--stroke);padding-top:48px;
}
.demo-close p{color:var(--mist);font-size:1.02rem;max-width:560px;margin:0 auto 28px}
.demo-close p b{color:var(--cream)}

/* ---------- footer signup ---------- */
.foot-signup{
  display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;
  border:1px solid var(--stroke);border-radius:var(--radius);
  background:var(--surface);padding:34px 38px;margin-bottom:56px;
}
@media(max-width:820px){.foot-signup{grid-template-columns:1fr;gap:18px;padding:28px 24px}}
.foot-signup>*{min-width:0}
.foot-signup form{flex-wrap:wrap}
.foot-signup input{flex:1 1 160px}
.foot-signup h3{font-size:1.2rem;margin-bottom:6px}
.foot-signup p{color:var(--mist);font-size:.88rem}
.foot-signup form{display:flex;gap:10px}
.foot-signup input{
  flex:1;min-width:0;background:rgba(0,0,0,.25);border:1px solid var(--stroke-bright);
  border-radius:999px;padding:14px 20px;color:var(--cream);font-family:var(--font);
  font-size:.9rem;font-weight:600;outline:none;transition:border-color .2s ease;
}
.foot-signup input:focus{border-color:var(--orange)}
.foot-signup .btn{padding:13px 24px;font-size:.85rem}
.foot-signup .ok{color:var(--green);font-weight:700;font-size:.9rem}

/* ---------- floating CTA ---------- */
#fab{
  position:fixed;right:22px;bottom:22px;z-index:200;
  opacity:0;transform:translateY(90px);pointer-events:none;
  transition:opacity .45s cubic-bezier(.22,.8,.3,1),transform .45s cubic-bezier(.22,.8,.3,1);
}
#fab.on{opacity:1;transform:none;pointer-events:auto}
#fabBtn{
  display:flex;align-items:center;gap:10px;
  background:var(--cta,#F97316);color:#fff;border:none;cursor:pointer;
  border-radius:999px;padding:15px 24px;
  font-family:var(--font);font-weight:700;font-size:.95rem;
  box-shadow:0 12px 40px var(--cta-shadow,rgba(249,115,22,.35));
  transition:transform .2s ease,box-shadow .2s ease;
}
#fabBtn:hover{transform:translateY(-2px);box-shadow:0 18px 50px var(--cta-shadow,rgba(249,115,22,.45))}
#fabBtn svg{flex:none}
#fabPop{
  position:absolute;bottom:calc(100% + 12px);right:0;
  background:rgba(10,1,40,.97);border:1px solid var(--stroke-bright);
  border-radius:18px;padding:14px;min-width:238px;
  display:none;flex-direction:column;gap:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
#fab.open #fabPop{display:flex;animation:fadeUp .25s ease}
#fabPop .store-badge{width:100%;justify-content:flex-start}
@media(max-width:520px){#fab{right:14px;bottom:14px}#fabBtn{padding:13px 20px;font-size:.88rem}}
@media print{#fab{display:none}}

/* ---------- reveal ---------- */
.rev{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rev,.sec-slide{opacity:1;transform:none}
  html{scroll-snap-type:none}
}


/* ===================== v2 THEME (appended) ===================== */
/* ============================================================================
   NavFi — v2 theme
   Extracted from navfi.money/v2, mapped onto navfi-money.web.app's tokens.

   WHY THIS IS SHORT
   -----------------
   web.app is a single HTML file with one <style> tag and a clean 15-variable
   :root block, and ~90% of its orange already runs through var(--orange).
   So the re-skin is mostly repointing tokens, not rewriting rules.

   HOW TO APPLY — 3 steps
   ----------------------
   1) ONE find-and-replace inside that <style> block (28 hits):
          find:     rgba(249,115,22,
          replace:  rgba(var(--accent-rgb),
      Regex form (catches the spaced variant too):
          rgba\(249\s*,\s*115\s*,\s*22\s*,   ->   rgba(var(--accent-rgb),

   2) Paste this whole file at the END of that <style> tag.
      It wins on cascade — no other CSS edits needed.

   3) Read §12 (Not fixable in CSS). Three things need art/markup, not tokens.

   VERIFIED: applied live against navfi-money.web.app in-browser. The hero,
   savings cards, reviews, comparison table, projector and pricing all hold up.
   ========================================================================== */


/* ---------------------------------------------------------------- 1. TOKENS
   These reuse web.app's EXISTING variable names. Everything already written
   as var(--orange), var(--surface) etc. flips over with zero edits.

   The single most important line here is --orange. web.app uses it in 31
   places; repointing it to lavender re-skins 74 live elements at once. Orange
   then survives only as --cta, on the one button that should shout.          */

:root {

  /* --- Ground -------------------------------------------------------------
     v2's base is one flat near-black violet, not a gradient. That flatness is
     most of why it reads premium. These two stay separate tokens so the
     existing body gradient still resolves — they're just close enough now
     that it reads flat.                                                      */
  --indigo:            #0A0128;   /* was #0E073B */
  --indigo-deep:       #070020;   /* was #0E0436 — v2's true base */

  /* --- Accent (was orange) ------------------------------------------------ */
  --orange:            #9987FF;   /* v2 lavender. Yes, really — see note above */
  --orange-soft:       rgba(153, 135, 255, .12);
  --accent-rgb:        153, 135, 255;   /* target of the find-and-replace */
  --accent-text:       #C9BCFF;   /* lavender for TEXT on dark — clears AA */
  --accent-text-dim:   #B9A9FF;
  --accent-deep:       #584A92;   /* muted violet, secondary glows */
  --accent-grad-from:  #8B79FF;
  --accent-grad-to:    #B9A9FF;

  /* --- Orange, demoted to one job ---------------------------------------- */
  --cta:               #F97316;
  --cta-shadow:        rgba(249, 115, 22, .32);

  /* --- Semantic colors that should NOT be lavender ------------------------
     Stars read as gold or they don't read as stars. This is NavFi's own
     brand gold. Warnings stay warm so they still mean "warning".             */
  --star:              #F6C85F;
  --warn:              #F59E0B;
  --warn-soft:         rgba(245, 158, 11, .14);

  /* --- Supporting hues ---------------------------------------------------- */
  --violet:            #454276;   /* unchanged — already v2's value */
  --green:             #34D399;   /* v2 runs emerald-400, slightly cooler */
  --green-soft:        rgba(52, 211, 153, .12);
  --green-text:        #A7F3D0;

  /* --- Text ---------------------------------------------------------------
     v2 puts pure white headings over translucent-white body copy. The alphas
     below are v2's nudged UP ~0.05 — v2's real body sits at .65 and is
     genuinely hard to read on near-black. Same look, clears 4.5:1.           */
  --cream:             #FFFFFF;   /* v2 uses true white, not cream */
  --text-body:         rgba(255, 255, 255, .78);
  --text-muted:        rgba(255, 255, 255, .70);
  --text-faint:        rgba(255, 255, 255, .55);
  --mist:              rgba(255, 255, 255, .70);   /* was #A9A5CE */

  /* --- Surfaces & strokes -------------------------------------------------
     v2 is entirely white-alpha over the base. No opaque card colors anywhere.
     Both are one step brighter than web.app's, which the darker ground needs. */
  --surface:           rgba(255, 255, 255, .05);   /* was .04 */
  --surface-2:         rgba(255, 255, 255, .08);   /* was .07 */
  --surface-3:         rgba(255, 255, 255, .10);
  --surface-panel:     linear-gradient(158deg, #140A3D 0%, #09021F 100%);
  --stroke:            rgba(255, 255, 255, .10);   /* was .09 */
  --stroke-bright:     rgba(255, 255, 255, .15);   /* was .16 */
  --stroke-accent:     rgba(153, 135, 255, .40);

  /* --- Radii --------------------------------------------------------------
     v2 is rounder. 26px is its workhorse card radius.                        */
  --radius:            26px;   /* was 20px */
  --radius-sm:         12px;
  --radius-md:         16px;
  --radius-lg:         32px;
  --radius-pill:       9999px;

  /* --- Elevation ----------------------------------------------------------
     v2 uses almost no drop shadow. Depth comes from the accent ring glow.    */
  --shadow-card:       none;
  --shadow-selected:   0 0 0 1px rgba(153, 135, 255, .25),
                       0 0 50px -12px rgba(153, 135, 255, .50);
  --shadow-float:      0 20px 45px rgba(0, 0, 0, .40);

  /* --- Type ---------------------------------------------------------------
     The second big move. v2's headings are 500–600 weight at -0.025em
     tracking; web.app's are 800. Dropping the weight is what turns "loud
     startup" into "premium fintech". Do not skip this — it matters more
     than the color swap.                                                     */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-h1:   600;
  --fw-h2:   500;
  --fw-h3:   500;
  --fw-ui:   500;
  --track-display: -0.025em;
  --track-tight:   -0.02em;

  --section-y:     64px;
  --section-y-lg:  96px;
}


/* ------------------------------------------------------------- 2. THE GROUND
   Flat base plus v2's signature soft washes. (v2 literally sets
   backdrop-filter: blur(230px) on its page wrapper; these radial gradients
   reproduce the same depth far more cheaply.)                                */

body {
  background: var(--indigo-deep);
  color: var(--cream);
  font-family: var(--font);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 720px at  8% 12%, rgba(88, 74, 146, .12), transparent 70%),
    radial-gradient(560px 560px at 92% 18%, rgba(153, 135, 255, .08), transparent 70%),
    radial-gradient(600px 600px at 20% 68%, rgba(153, 135, 255, .06), transparent 70%),
    radial-gradient(460px 460px at 85% 88%, rgba(88, 74, 146, .08), transparent 70%);
}
body > * { position: relative; z-index: 1; }

/* Retire the grid-line overlay. v2 has none, and it's the main thing making
   the current build read "SaaS template". Delete this rule to keep it. */
.grid-bg { display: none !important; }


/* ------------------------------------------------------------ 3. TYPOGRAPHY */

h1 { font-weight: var(--fw-h1); letter-spacing: var(--track-display); line-height: 1.0; }
h2 { font-weight: var(--fw-h2); letter-spacing: var(--track-display); line-height: 1.0; }
h3 { font-weight: var(--fw-h3); letter-spacing: var(--track-tight); }

h1, h2, h3 { color: var(--cream); }
p          { color: var(--text-body); }

/* v2's display scale at 1440, made fluid down to mobile */
h1 { font-size: clamp(2.25rem, 1.60rem + 2.6vw, 3.75rem); }   /* -> 60px */
h2 { font-size: clamp(1.50rem, 1.05rem + 1.9vw, 3.00rem); }   /* -> 48px */


/* ---------------------------------------------------------------- 4. ACCENT */

.accent  { color: var(--accent-text); }
.eyebrow { color: var(--accent-text); }

/* Orange lives here and nowhere else. */
.btn-primary {
  background: var(--cta);
  color: #fff;
  font-weight: var(--fw-ui);
  box-shadow: 0 8px 32px var(--cta-shadow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(249, 115, 22, .45);
}

.btn-secondary, .btn-ghost, .btn-outline {
  background: var(--surface);
  border: 1px solid var(--stroke-bright);
  color: var(--cream);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-ui);
  box-shadow: none;
}
.btn-secondary:hover, .btn-ghost:hover, .btn-outline:hover {
  background: var(--surface-2);
  border-color: var(--stroke-accent);
  transform: translateY(-1px);
}


/* ------------------------------------------------------- 5. SEMANTIC RESCUES
   Things the blanket orange->lavender swap gets wrong.                        */

.stars, .rating-stars   { color: var(--star); }
.tbt-step.warn .ti      { background: var(--warn-soft); border-color: rgba(245, 158, 11, .55); }
.rr-step.warn .ic       { background: rgba(245, 158, 11, .16); }
.tbt-step.dest .ti      { background: var(--green-soft); border-color: rgba(52, 211, 153, .55); }


/* ----------------------------------------------------------------- 6. CARDS */

.card, .sav-card, .node-card, .navi-card, .game,
.rev-card, .price-card, .blog-card {
  background: var(--surface);
  border: 1px solid var(--stroke-bright);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, background .3s ease,
              border-color .3s ease, box-shadow .3s ease;
}

.card:hover, .sav-card:hover, .node-card:hover, .navi-card:hover,
.game:hover, .rev-card:hover, .blog-card:hover {
  transform: translateY(-4px);
  background: var(--surface-2);
  border-color: var(--stroke-accent);
}

/* Featured card — v2's lavender ring glow instead of a colored border */
.price-card.hot {
  background: linear-gradient(180deg, rgba(153, 135, 255, .08), var(--surface) 45%);
  border-color: var(--stroke-accent);
  box-shadow: var(--shadow-selected);
}


/* ------------------------------------------------- 7. HARDCODED PANEL COLORS
   The floating turn-by-turn mock cards in the hero use literal hexes that
   were tuned for the old lighter navy. On the darker ground they float. These
   pull them back into the system.                                            */

.bt-card   { background: #1B114D; }              /* was #2B2462 */
.bt-inner,
.dest-row  { background: #2A2065; }              /* was #39307A */
.bt-ic     { background: #140A3D; color: var(--orange); }   /* was #161042 */
.bt-green .bt-ic { background: #140A3D; color: #4ADE80; }
.watch-frame { background: #08051f; }            /* already fine, listed for completeness */


/* ------------------------------------------------- 8. THE ROUTE PROJECTOR
   Keep this module — it's the best thing on the site. Just take the road off
   orange so it stops competing with the CTA.                                 */

#roadProg {
  stroke: var(--orange);
  filter: drop-shadow(0 0 8px rgba(153, 135, 255, .70));
}
.wp .dot {
  background: var(--indigo-deep);
  border-color: var(--orange);
  box-shadow: 0 0 0 5px rgba(7, 0, 32, .85);
}
#carDot svg  { filter: drop-shadow(0 0 10px rgba(153, 135, 255, .90)); }
.pin:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(153, 135, 255, .18);
}


/* ------------------------------------------------------- 9. COMPARISON TABLE */

.vs-head .us {
  color: var(--cream);
  border-bottom: 2px solid var(--orange);
  background: linear-gradient(180deg, rgba(153, 135, 255, .10), transparent);
}
.vs-row .us {
  color: var(--cream);
  font-weight: 600;
  background: rgba(153, 135, 255, .04);
}


/* --------------------------------------------------------------- 10. HEADER */

header, .site-header {
  background: rgba(10, 1, 40, .72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}

/* v2's floating-pill nav. Uncomment to switch to it.
header > .inner, .site-header > .container {
  margin: 12px auto;
  padding: 10px 14px 10px 22px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--stroke-bright);
  backdrop-filter: blur(12px);
}
header, .site-header { background: transparent; border-bottom: none; backdrop-filter: none; }
*/


/* ------------------------------------------------------------- 11. GLOW FX
   v2's signature soft orbs. Drop <div class="glow glow--lg"> into any
   position:relative section for depth. Purely decorative.                    */

.glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(64px);
  width: 560px; height: 560px;
  background: rgba(153, 135, 255, .08);
}
.glow--lg   { width: 720px; height: 720px; background: rgba(88, 74, 146, .12); }
.glow--mint { background: rgba(52, 211, 153, .15); }
.glow--hot  { background: rgba(153, 135, 255, .20); }

.hero-glow, .arrive-glow {
  background: radial-gradient(circle, rgba(153, 135, 255, .16), transparent 70%);
}


/* --------------------------------------------- 12. NOT FIXABLE IN CSS
   Three things this file cannot reach. Flagging so they don't get missed:

   a) THE DEMO VIDEO. The 27-second clip in "Watch the route unfold" is
      authored in the old orange-on-navy palette, with orange captions burned
      into the frames. It will visibly clash. Needs a re-render, or move the
      section below the fold until it's redone.

   b) EMOJI IN THE TRUST STRIP. The pricing footnote uses literal emoji
      glyphs (lock / check / refresh) while the rest of the page uses drawn
      icons. Swap for inline SVG from the set already in the file.

   c) HEADER DENSITY. Six nav items + Blog pill + CTA is too much, and on
      mobile the logo, CTA and hamburger nearly collide. That's a markup trim
      to four items, not a style change.
   ========================================================================== */


/* ------------------------------------------------------------- 13. SUNDRY */

:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

section { padding-block: var(--section-y); }
@media (min-width: 768px) { section { padding-block: var(--section-y-lg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ================= v3 CONVERSION LAYOUT ================= */
/* 2 · the film — aspect locked so it can never squash */
#film{padding-top:0}
.film-frame{
  position:relative;max-width:1100px;margin:0 auto;
  border-radius:26px;overflow:hidden;background:#070020;
  border:1px solid var(--stroke-bright);
  box-shadow:0 50px 120px rgba(0,0,0,.6);
}
.film-frame::after{ /* soft brand halo */
  content:'';position:absolute;inset:-2px;border-radius:26px;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(153,135,255,.10);
}
.film-frame video{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;background:#070020}

/* 3 · why different */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
/* ── evolution: the camera pans from the past (ledgers) across TODAY into the year ahead (the phone) ── */
.ev{padding:0}
.ev-track{height:340vh;position:relative}
.ev-stage{position:sticky;top:0;height:100vh;height:100dvh;box-sizing:border-box;padding-top:96px;overflow:hidden;display:flex;flex-direction:column;background:#070020}
.ev-head{text-align:center;flex:none}
.ev-head h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
.ev-cap{position:relative;height:3.4em;margin:14px auto 0;max-width:620px}
.ev-cap span{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .5s cubic-bezier(.22,.8,.3,1);font-size:clamp(.95rem,1.35vw,1.1rem);line-height:1.45;color:rgba(255,255,255,.82)}
.ev-cap span b{color:#fff}
.ev-cap span.on{opacity:1;transform:none}
.ev-viewport{position:relative;flex:1;min-height:0;overflow:hidden;margin-top:10px}
.ev-rail{position:absolute;inset:0;width:200vw;will-change:transform}
.ev-line{position:absolute;left:0;right:0;top:50%;height:0;pointer-events:none}
.ev-line i{position:absolute;top:0;height:0}
.ev-line .past{left:0;width:88vw;border-top:2px solid rgba(255,255,255,.14)}
.ev-line .future{left:88vw;right:0;border-top:2px dashed rgba(249,115,22,.75)}
.ev-tag{position:absolute;top:12px;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.ev-tag-past{left:16vw}
.ev-tag-future{left:112vw;color:#fb923c}
.ev-past{position:absolute;left:9vw;top:50%;transform:translateY(-50%);width:52vw;height:min(440px,60%)}
.ev-ledger{position:absolute;top:50%;width:min(390px,28vw);border-radius:18px;background:#120a35;border:1px solid rgba(255,255,255,.1);padding:16px 18px 14px;box-shadow:0 26px 60px rgba(0,0,0,.5);filter:saturate(.55);transition:opacity .5s}
.ev-ledger.l1{left:38%;transform:translateY(-50%);z-index:3}
.ev-ledger.l2{left:19%;transform:translateY(-50%) scale(.92);opacity:.7;z-index:2}
.ev-ledger.l3{left:0;transform:translateY(-50%) scale(.84);opacity:.45;z-index:1}
.ev-lh{display:flex;justify-content:space-between;align-items:baseline;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);margin-bottom:10px}
.ev-lh b{font-size:1rem;letter-spacing:0;text-transform:none;color:#fff}
.ev-ledger ul{list-style:none;margin:0;padding:0}
.ev-ledger li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid rgba(255,255,255,.07);font-size:.78rem;color:rgba(255,255,255,.85)}
.ev-ledger li small{color:var(--mist);font-size:.66rem}
.ev-ledger li b{font-weight:600;color:#fb923c}
.ev-lf{margin-top:10px;font-size:.66rem;color:var(--mist);font-style:italic}
.ev-today{position:absolute;left:88vw;top:8%;bottom:8%;width:0;z-index:4}
.ev-today i{position:absolute;left:-1px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,#F97316 18%,#F97316 82%,transparent)}
.ev-today::before{content:"";position:absolute;left:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#F97316;box-shadow:0 0 0 5px rgba(249,115,22,.25),0 0 22px rgba(249,115,22,.7)}
.ev-today b{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fb923c;white-space:nowrap}
.ev-future{position:absolute;left:100vw;top:0;bottom:0;width:100vw}
.ev-phone.device{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;min-width:0;height:min(560px,88%);aspect-ratio:340/712;z-index:3}
.ev-phone .device-screen{background:#0E0436}
.ev-chips{position:absolute;left:0;right:0;top:50%;height:0}
.ev-chip{position:absolute;top:0;transform:translate(-50%,-50%) scale(.85);opacity:0;transition:opacity .45s ease,transform .5s cubic-bezier(.22,.8,.3,1);transition-delay:calc(var(--i) * 70ms);display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 10px;border-radius:12px;background:rgba(14,4,54,.94);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.ev-chip::before{content:"";position:absolute;left:50%;top:-9px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#9987FF}
.ev-chip small{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.ev-chip b{font-size:.8rem}
.ev-chip.up b{color:#4ade80}.ev-chip.dn b{color:#fb923c}
.ev-chip:nth-child(1){left:12vw;top:-120px}.ev-chip:nth-child(2){left:20vw;top:110px}.ev-chip:nth-child(3){left:28vw;top:-70px}.ev-chip:nth-child(4){left:35vw;top:150px}
.ev-chip:nth-child(5){left:65vw;top:-110px}.ev-chip:nth-child(6){left:72vw;top:120px}.ev-chip:nth-child(7){left:80vw;top:-60px}.ev-chip:nth-child(8){left:88vw;top:140px}
.ev-stage.arrived .ev-chip{opacity:1;transform:translate(-50%,-50%)}
.ev-stage.leaving .ev-ledger{opacity:.25}
@media(max-width:900px),(prefers-reduced-motion:reduce){
  .ev-track{height:auto}.ev-stage{position:static;height:auto;padding:80px 0 40px;overflow:visible}
  .ev-cap{height:auto}.ev-cap span{position:static;display:none}.ev-cap span:last-child{display:block;opacity:1;transform:none}
  .ev-viewport{overflow:visible;margin-top:26px}
  .ev-rail{position:static;width:auto;transform:none!important;display:flex;flex-direction:column;align-items:center;gap:26px;padding:0 20px}
  .ev-line,.ev-tag,.ev-chips{display:none}
  .ev-past{position:static;transform:none;width:100%;max-width:360px;height:auto}
  .ev-ledger{position:static;transform:none!important;opacity:1!important;width:100%;max-width:360px}.ev-ledger.l2,.ev-ledger.l3{display:none}
  .ev-today{position:static;width:100%;max-width:360px;height:auto;display:flex;align-items:center;gap:12px;margin:6px 0}
  .ev-today i{display:none}.ev-today::before{position:static;margin:0;flex:none}.ev-today b{position:static;transform:none}
  .ev-today::after{content:"";flex:1;border-top:2px dashed rgba(249,115,22,.7)}
  .ev-future{position:static;width:auto;margin-top:10px}
  .ev-phone.device{position:static;transform:none;height:min(560px,70vh);margin:0 auto}
}
@media(max-width:860px){.why-grid{grid-template-columns:1fr}}
.why-card{
  border:1px solid var(--stroke);border-radius:var(--radius);background:var(--surface);
  padding:34px 30px;text-align:center;transition:transform .3s ease,border-color .3s ease;
}
.why-card:hover{transform:translateY(-5px);border-color:var(--stroke-accent,rgba(153,135,255,.4))}
.why-card .them{display:block;color:var(--mist);font-size:1rem;font-weight:500;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.28)}
.why-card .arrow{display:block;color:var(--orange);font-size:1.5rem;margin:12px 0 10px}
.why-card .us{display:block;font-size:1.25rem;font-weight:700;line-height:1.3}

/* 4 · how it works — GPS route with waypoints */
.route-steps{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:40px;margin-top:72px;
}
.route-steps::before{ /* dashed route connecting the waypoints */
  content:'';position:absolute;top:39px;left:16.67%;right:16.67%;height:2px;
  background:repeating-linear-gradient(90deg,var(--orange) 0 6px,transparent 6px 16px);
  opacity:.45;
}
.rstep{text-align:center;padding:0 14px}
.rnode{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:78px;height:78px;border-radius:50%;margin-bottom:30px;
  background:var(--indigo-deep,#070020);border:2px solid var(--orange);
  box-shadow:0 0 0 10px rgba(7,0,32,.9),0 0 34px rgba(153,135,255,.32);
}
.rnode i{font-style:normal;font-weight:800;font-size:1.5rem;color:var(--orange)}
.rstep.dest .rnode{background:var(--orange);box-shadow:0 0 0 10px rgba(7,0,32,.9),0 0 44px rgba(153,135,255,.55)}
.rstep.dest .rnode i{color:var(--indigo-deep,#070020)}
.rstep h3{font-size:1.55rem;margin-bottom:12px;letter-spacing:-.01em}
.rstep p{color:var(--mist);font-size:.97rem;max-width:330px;margin:0 auto}
@media(max-width:860px){
  .route-steps{grid-template-columns:1fr;gap:44px;margin-top:52px}
  .route-steps::before{
    top:0;bottom:0;left:39px;right:auto;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,var(--orange) 0 6px,transparent 6px 16px);
  }
  .rstep{display:grid;grid-template-columns:78px 1fr;gap:24px;text-align:left;padding:0;align-items:start}
  .rstep .rnode{margin-bottom:0;grid-row:span 2}
  .rstep h3{margin-bottom:6px}
  .rstep p{margin:0;max-width:none}
}

/* 5 · benefits */
.ben-grid{grid-template-columns:repeat(3,1fr);margin-top:56px}
@media(max-width:860px){.ben-grid{grid-template-columns:1fr}}

/* 7 · final CTA navi */
.navi-row{
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(4px,2.4vw,34px);margin-bottom:40px;position:relative;
}
.navi-row::after{ /* soft ground the crew stands on */
  content:'';position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  width:min(660px,86%);height:34px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(153,135,255,.20),transparent 70%);
  filter:blur(6px);pointer-events:none;
}
.navi-row img{
  height:clamp(96px,15vw,190px);width:auto;position:relative;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.55));
  animation:naviFloat 5.5s ease-in-out infinite;
}
.navi-row img:nth-child(1){animation-delay:0s}
.navi-row img:nth-child(2){animation-delay:-1.4s;height:clamp(90px,14.2vw,180px)}
.navi-row img:nth-child(3){animation-delay:-2.7s}
.navi-row img:nth-child(4){animation-delay:-4.1s;height:clamp(90px,14.2vw,180px)}
@keyframes naviFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.navi-row img{animation:none}}

/* supporting zone below the pitch */
#demo,#pricing,#faq{border-top:1px solid var(--stroke)}


/* ================= 2 · SCROLL-DRIVEN ROUTE STORY ================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#story{padding:0}
.story-track{height:400vh;position:relative}
.story-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#0E0436}
.story-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;transform:scale(1.12);will-change:transform}
.story-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,0,32,.8) 0%,rgba(7,0,32,.28) 20%,rgba(7,0,32,0) 42%,rgba(7,0,32,.38) 100%)}
/* the phone starts filling the viewport (you're inside the screen) and pulls back as you scroll */
.story-phone{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;perspective:1400px}
.sp-device{width:auto;min-width:0;height:min(720px,74vh);aspect-ratio:340/712;transform-origin:50% 50%;transform:scale(4.6);will-change:transform}
.story-intro{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;padding:0 24px;will-change:opacity,transform;
}
.story-intro h1{font-size:clamp(2rem,4.6vw,4.2rem);line-height:1.08;margin:0 0 28px;max-width:20ch}
.story-intro>span{display:inline-flex;align-items:center;gap:8px;font-size:1.05rem;color:rgba(255,255,255,.82)}
.story-intro svg{width:16px;height:16px;animation:introArrow 1.6s ease-in-out infinite}
@keyframes introArrow{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.sp-device{width:auto;min-width:0;height:min(669px,74vh);aspect-ratio:340/712}
/* the close: the phone zooms back in and the headline lands (mirror of the opening pull-back) */
.story-outro{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:0 24px;opacity:0;visibility:hidden;will-change:opacity,transform}
.story-outro h2{font-size:clamp(2rem,4.6vw,4.2rem);line-height:1.08;margin:0;max-width:16ch;color:#fff;letter-spacing:-.01em}
@media(max-width:900px){.story-outro h2{font-size:clamp(1.7rem,8vw,2.4rem)}}
@media(prefers-reduced-motion:reduce){.story-outro{position:static;opacity:1;visibility:visible;padding:20px 24px 0}}
/* one line under the phone, changing with what's on screen */
.story-line{position:absolute;left:0;right:0;bottom:26px;height:3.2em;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s}
.story-line.on{opacity:1}
.story-line span{position:absolute;left:50%;top:0;width:min(760px,92vw);transform:translate(-50%,10px);opacity:0;transition:opacity .45s ease,transform .5s cubic-bezier(.22,.8,.3,1);text-align:center;font-size:clamp(1.3rem,2.3vw,2.05rem);font-weight:700;line-height:1.22;color:#fff;letter-spacing:-.01em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.story-line span b{font-weight:700;color:#fff}
.story-line span.on{opacity:1;transform:translate(-50%,0)}
.sp-screen{padding:0;position:relative;height:100%;overflow:hidden;background:#0E0436}
.sp-video{position:absolute;left:0;right:0;top:44px;width:100%;height:calc(100% - 44px);object-fit:cover;object-position:top;display:block;background:#0E0436}
/* calm dark screen under the intro line; lifts as the phone pulls back to reveal the app */
.sp-veil{position:absolute;inset:0;z-index:2;background:radial-gradient(60% 42% at 50% 56%,#2a1b6e,#0E0436 72%);will-change:opacity}
.sp-chrome{padding:0 12px}

/* iOS status bar — mirrors the hero screenshot */
.sp-status{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 8px 0;color:#fff;font-size:.72rem;font-weight:700;
}
.sp-sig{display:flex;align-items:center;gap:5px}
.sp-sig svg{display:block}

/* NavFi app bar — mirrors the hero screenshot */
.sp-appbar{
  position:relative;margin:9px 0 0;padding:25px 9px 9px;
  background:#1B114D;border-radius:15px;
  display:flex;align-items:center;gap:8px;
}
.sp-logo{position:absolute;left:50%;top:5px;transform:translateX(-50%);width:104px;display:block}
.sp-avatar{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,#9d8bff,#6b46e5);color:#fff;font-weight:800;font-size:.85rem;
}
.sp-greet{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.sp-greet b{font-size:.72rem;color:#fff;font-weight:700}
.sp-greet small{font-size:.55rem;color:rgba(255,255,255,.58)}
.sp-right{margin-left:auto;display:flex;align-items:center;gap:7px;flex:none}
.sp-streak{
  display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.09);
  border-radius:999px;padding:6px 10px;font-size:.66rem;font-weight:700;color:#fff;
}
.sp-bell{
  position:relative;width:29px;height:29px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.09);display:grid;place-items:center;
}
.sp-bell i{
  position:absolute;top:-4px;right:-4px;background:#EF4444;color:#fff;
  font-style:normal;font-size:.5rem;font-weight:800;line-height:1;
  padding:2px 4px;border-radius:999px;
}
.sp-title{font-size:.82rem;font-weight:700;color:var(--cream);padding:12px 4px 8px}
/* Navi speaks the route — same green-outlined bubble as the app's command center */
.sp-navi{
  margin:0 0 10px;padding:9px 11px 9px 10px;min-height:56px;
  border:1px solid rgba(74,222,128,.75);border-radius:13px;background:rgba(74,222,128,.06);
  display:flex;gap:7px;align-items:flex-start;font-size:.7rem;line-height:1.38;color:#fff;
  opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s cubic-bezier(.22,.8,.3,1);
}
.sp-navi.on{opacity:1;transform:none}
.sp-navi svg{flex:none;width:12px;height:12px;margin-top:3px}
.sp-navi .cur{display:inline-block;width:2px;height:.85em;background:#4ade80;margin-left:2px;vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
/* status bar sits above the recording */
.sp-chrome{position:absolute;left:0;right:0;top:0;z-index:3}
.sp-list{display:flex;flex-direction:column;gap:10px;transition:transform .6s cubic-bezier(.22,.8,.3,1)}
.sp-card{
  display:block;width:100%;height:auto;border-radius:16px;
  opacity:0;transform:translateY(16px) scale(.97);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.8,.3,1),box-shadow .4s ease;
}
.sp-card.on{opacity:1;transform:none}
.sp-card.live{box-shadow:0 0 0 2px rgba(153,135,255,.65),0 0 30px rgba(153,135,255,.38)}

@media(max-width:900px){
  .story-track{height:400vh}
  .sp-device{height:min(628px,62vh)}
  /* phones: the caption rides under the nav, out of thumb reach; the phone shifts down to make room */
  .story-line{bottom:auto;top:calc(100px + env(safe-area-inset-top));height:auto;min-height:3.2em}
  .story-phone{padding-top:calc(150px + env(safe-area-inset-top))}
  .story-line span{font-size:clamp(1.5rem,6.9vw,1.95rem);font-weight:700;line-height:1.2;color:#fff;width:min(560px,92vw);letter-spacing:-.01em}
  .sp-logo{width:90px}
  .sp-appbar{padding-top:27px}
  .story-intro h1{font-size:clamp(1.7rem,8vw,2.4rem)}
}
@media(prefers-reduced-motion:reduce){
  .story-track{height:auto}
  .story-stage{position:static;height:auto;padding:90px 0}
  .story-phone{position:static;padding:30px 0}
  .sp-device{transform:none!important}
  .story-intro{position:static;padding:0 24px 20px}
  .story-bg{transform:none}
  .sp-card{opacity:1;transform:none}
}


/* sub-pages: clear the fixed nav */
.subpage>section:first-child{padding-top:150px}
.sub-back{display:inline-flex;align-items:center;gap:8px;margin:0 0 26px;font-size:.85rem;font-weight:600;color:var(--mist)}
.sub-back:hover{color:var(--cream)}

/* step 1: store badges sit with the copy */
.hero-stores{justify-content:flex-start;margin-top:4px}
@media(max-width:960px){.hero-stores{justify-content:center}}
/* navis → nearby: crossfade, and the nearby stage settles into place */
.navis .wrap{will-change:opacity}
@media(min-width:901px){html{scroll-snap-type:y proximity}.mp-track{scroll-snap-align:start}}

/* ── phones: premium pass ── */
@media(max-width:900px){
  #fab{display:none}                                  /* the nav's own CTA is always on screen */
  .nav-cta .btn-primary{min-height:42px}
  /* Navis + reviews: swipe, snap to card, next card peeks */
  .navi-cards,.rev-grid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:6px 24px 22px;margin:34px -24px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .navi-cards::-webkit-scrollbar,.rev-grid::-webkit-scrollbar{display:none}
  .navi-cards>*,.rev-grid>*{flex:0 0 78vw;max-width:340px;scroll-snap-align:center;margin:0}
  .navi-card{padding:26px 20px 22px}
  .navi-card img{height:132px;margin-bottom:14px}
  .navi-card p{font-size:.84rem}
  .swipe-hint{display:flex;justify-content:center;gap:6px;margin-top:2px}
  .swipe-hint i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22)}
  .swipe-hint i:first-child{background:var(--orange)}
  .mp-legend{flex-wrap:wrap;gap:10px 18px}.mp-legend span{white-space:nowrap}
  .navis{padding:90px 0 70px}
}
@media(min-width:901px){.swipe-hint{display:none}}

@media(max-width:900px){.sp-device{will-change:auto}.story-track{height:340vh}.story-track{height:340svh}}

/* ══════════ phones: the trailer — one moment per screen ══════════ */
@media(min-width:901px){.m-only{display:none!important}}
@media(max-width:900px){
  .d-only{display:none!important}
  html{scroll-snap-type:y proximity;scroll-padding-top:70px;overscroll-behavior-y:none}
  main{display:flex;flex-direction:column}
  main>section{min-width:0;width:100%}   /* flex items must not inherit their content's min-content width */
  .jpanel>*,.navis>*,.mp-stage>*,.ev-stage>*,.arrive>*{min-width:0;max-width:100%}   /* a swipe carousel's min-content must not widen its screen (it blew the layout viewport to 1185px) */
  #story{order:1}.journey{order:2}.ev{order:3}.fx{order:3}.navis{order:4}.mp{order:5}#proof{display:none}.arrive{order:7}
  /* the opener runs its own show — never a snap target */
  #story,#story *{scroll-snap-align:none}
  main>section{scroll-snap-align:none;scroll-margin-top:0}
  .mscreen,.jpanel,.navis,.mp-stage,.ev-stage,.arrive{scroll-snap-align:start;min-height:100dvh;box-sizing:border-box;padding:calc(76px + env(safe-area-inset-top)) 0 28px;display:flex;flex-direction:column;justify-content:center}
  .mp-stage,.ev-stage{padding-top:calc(76px + env(safe-area-inset-top))}
  .jpanel,.navis,.mp-stage,.ev-stage{padding-bottom:calc(96px + env(safe-area-inset-bottom))}   /* room for the install bar */
  .arrive{padding-bottom:36px}
  /* copy: headline + one line */
  .jp-copy .lede,.hero-stores,.navis .lede,.navi-dest,.navi-card p,.mp-copy .lede,.ev-cap,.ev-past,.ev-today,.ev-line,.ev-tag,.ev-chips{display:none!important}
  .m-line{font-size:1.02rem;line-height:1.45;color:rgba(255,255,255,.8);margin:8px auto 0;max-width:34ch}
  .jp-copy .m-line{margin-left:0}
  .jp-copy h2{font-size:clamp(1.7rem,7.4vw,2.2rem)}
  .hero h2{font-size:clamp(1.7rem,7.4vw,2.2rem)}
  .hero-tw{font-size:1rem;margin-bottom:6px}
  .hero-grid{gap:22px}
  /* visuals sized so headline + visual fit one screen */
  .jpanel .hero-phone{width:min(200px,52%)}
  .stops{width:min(400px,92%)}
  .goals{width:min(380px,100%);gap:10px}.goal{padding:11px 13px}.goal-ico{width:38px;height:38px}
  .rr-stack{width:min(190px,100%);gap:8px}.rr-banner b{font-size:.74rem}.rr-banner small{font-size:.6rem}
  .navis .sec-head h2{font-size:clamp(1.6rem,7vw,2.1rem)}
  .navi-card{padding:22px 18px 18px}.navi-card img{height:120px;margin-bottom:10px}.navi-card h3{font-size:1.05rem}.navi-say{font-size:.8rem;margin-top:10px}
  .mp-map.device{height:min(560px,50svh)}
  .ev-viewport{flex:none;margin-top:14px}.ev-rail{gap:0;padding:0}.ev-future{margin-top:0}.ev-phone.device{height:min(560px,54svh)}
  .ev-head{padding:0 20px}
  /* final screen: proof folded in */
  .arrive .navi-row img{height:88px}
  .m-proof{display:flex;flex-direction:column;align-items:center;gap:4px;margin:6px 0 20px;color:var(--cream)}
  .m-stars{color:#F5B301;letter-spacing:2px;font-size:1rem}
  .m-proof b{font-size:.92rem}
  .m-proof q{font-size:.9rem;color:var(--mist);quotes:"\201C" "\201D"}
  /* sticky install bar */
  #mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(7,0,32,0),rgba(7,0,32,.92) 40%);transform:translateY(110%);transition:transform .35s cubic-bezier(.22,.8,.3,1);pointer-events:none}
  #mbar.on{transform:none;pointer-events:auto}
  #mbar .btn{width:100%;justify-content:center;min-height:50px;font-size:1rem;box-shadow:0 12px 34px rgba(249,115,22,.4)}
}

/* desktop: the narrative lines carry the story — make them read from across the room */
@media(min-width:901px){
  .story-line span{font-size:clamp(1.5rem,2.3vw,2.05rem);font-weight:700;color:#fff}
  .ev-cap{height:3.6em;max-width:720px}
  .ev-cap span{font-size:clamp(1.08rem,1.55vw,1.3rem);color:rgba(255,255,255,.92)}
  .jp-copy .lede,.mp-copy .lede{font-size:1.24rem;line-height:1.55;color:rgba(255,255,255,.86)}
  .navis .lede{font-size:1.18rem;color:rgba(255,255,255,.86)}
  .hero-tw{font-size:clamp(1.25rem,2vw,1.6rem)}
}

@media(max-width:900px) and (max-height:600px){#mbar{display:none!important}.jpanel,.navis,.mp-stage,.ev-stage{padding-bottom:36px}}   /* short phones: the nav CTA is enough */

/* phones: every screen starts at the same line under the nav (no vertical centering except the final screen) */
@media(max-width:900px){
  .jpanel,.navis,.mp-stage,.ev-stage{justify-content:flex-start;padding-top:calc(106px + env(safe-area-inset-top))}
  .jpanel .hero-grid{gap:18px}
  .navis .sec-head{margin-bottom:6px}
  .mp-grid{gap:18px}
  .ev-viewport{margin-top:10px}
}

/* phones: snap already offsets by the nav (scroll-padding-top:70px) — screens add only a small margin of their own */
@media(max-width:900px){
  .jpanel,.navis,.mp-stage,.ev-stage{padding-top:calc(34px + env(safe-area-inset-top))}
  .arrive{padding-top:calc(60px + env(safe-area-inset-top))}
  main>section.sec-slide{transform:none!important;opacity:1!important}   /* no slide-in on phones: a snapped screen must not shift after landing */
}

/* step 4: the real reroute (expense) beside the income case */
.rr-duo{display:flex;gap:28px;align-items:flex-start;justify-content:center}
.rr-col{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.rr-lab{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.rr-phone.device{width:auto;min-width:0;height:min(560px,calc(100vh - 260px));aspect-ratio:340/712}
.rr-phone .device-screen{background:#0E0436}
.rr-col-income .rr-stack{width:min(240px,100%)}
@media(max-width:900px){
  .rr-col-income,.rr-lab{display:none!important}
  .rr-phone.device{height:min(400px,45svh)}
  .rr-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
  .rr-chips span{font-size:.68rem;font-weight:700;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:var(--cream);white-space:nowrap}
}

/* ══════════ one phone, every size: frame chrome scales with the device width (340px hero = reference) ══════════ */
.device{container-type:inline-size;padding:0;background:none}
.device::before{content:"";position:absolute;inset:0;border-radius:16cqw;background:linear-gradient(155deg,#a9a9ae,#54545a 20%,#9b9ba1 46%,#3e3e44 70%,#8f8f95);box-shadow:0 44px 96px rgba(0,0,0,.62)}
.device-screen{position:relative;box-sizing:border-box;width:calc(100% - 1.8cqw);height:calc(100% - 1.8cqw);margin:.9cqw;border:2cqw solid #08080b;border-radius:15cqw;overflow:hidden}
.device-island{width:30.6cqw;height:8.5cqw;top:2.6cqw}
.sp-status,.mp-status{padding:3.8cqw 5.9cqw 0;font-size:3.4cqw;line-height:1.2}
.sp-status>span:first-child{font-size:3.4cqw}
.sp-sig{gap:1.5cqw}
.sp-sig svg{width:auto;height:3.2cqw}
.sp-sig svg:last-child{height:3.5cqw}
.hero-video,.mp-video,.sp-video{top:12.9cqw;height:calc(100% - 12.9cqw)}
.sp-chrome{padding:0 3.5cqw}
/* phones: every phone the same height (the opener is the hero and stays larger) */
@media(max-width:900px){
  .jpanel .hero-phone{width:auto;height:min(400px,48svh)}
  .mp-map.device,.ev-phone.device{height:min(400px,48svh)}
  .rr-phone.device{height:min(370px,44svh)}   /* leaves room for the two chips */
}

/* the titanium ring must anchor to its own phone, never an ancestor */
.device{position:relative}
@media(max-width:900px){.ev-phone.device{position:relative;left:auto;top:auto;transform:none}}

@media(max-width:900px){.rr-chips{flex-wrap:nowrap;gap:8px}.rr-chips span{font-size:.64rem;padding:5px 9px}.rr-phone.device{height:min(360px,43svh)}}

@media(max-width:900px){.mp-map.device{height:min(390px,45svh)}}

/* step 4: one phone, three cases — expense / income / shortfall */
.rr-tabs{display:flex;gap:6px;justify-content:center;margin:0 auto 14px;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);width:max-content;max-width:100%}
.rr-tab{appearance:none;border:0;background:transparent;color:var(--mist);font:inherit;font-size:.78rem;font-weight:700;padding:9px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;min-height:40px;transition:background .25s,color .25s}
.rr-tab.on{background:var(--orange);color:#fff;box-shadow:0 8px 22px rgba(249,115,22,.35)}
.rr-tab:focus-visible{outline:2px solid #fff;outline-offset:2px}
.rr-slot{display:grid;justify-items:center}
.rr-case{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .4s ease,transform .45s cubic-bezier(.22,.8,.3,1);width:100%}
.rr-case.on{opacity:1;pointer-events:auto;transform:none}
.rr-cap{font-size:.86rem;line-height:1.4;color:rgba(255,255,255,.8);text-align:center;max-width:36ch;margin:0}
.rr-case .rr-stack{width:min(240px,100%)}
@media(max-width:900px){
  .rr-tabs{gap:4px;margin-bottom:10px}.rr-tab{font-size:.72rem;padding:8px 11px}.rr-tab .tl{display:none}
  .rr-cap{font-size:.74rem;max-width:30ch}
  .rr-case .rr-stack{width:min(180px,100%)}
  .rr-phone.device{height:min(300px,36svh)}
}

@media(max-width:900px){.rr-case .rr-stack{width:min(158px,100%)}.rr-tab{text-transform:capitalize}}
.rr-case{align-self:start}

@media(max-width:900px) and (max-height:790px){.rr-case .rr-stack{width:min(128px,100%)}.rr-phone.device{height:min(270px,33svh)}.rr-cap{display:none}.rr-tabs{margin-bottom:8px}}

/* step 4: the income case lives in a phone screen now */
.rr-screen{position:absolute;left:0;right:0;top:12.9cqw;bottom:0;padding:1cqw 3.5cqw 0;overflow:hidden;display:flex;flex-direction:column}
.rr-screen-title{font-size:3.6cqw;font-weight:700;color:var(--cream);padding:1.5cqw 1cqw 2.5cqw}
.rr-screen .rr-stack{width:100%;padding:0;gap:2.4cqw}
.rr-screen .rr-stack::before,.rr-screen .rr-card::after,.rr-screen .rr-wrap::after{display:none}
.rr-screen .rr-banner{margin-left:0;padding:2.6cqw 3cqw;gap:2.4cqw;border-radius:3.6cqw}
.rr-screen .rr-banner b{font-size:3.2cqw}.rr-screen .rr-banner small{font-size:2.5cqw}.rr-screen .rr-eta{font-size:2.6cqw;padding:1.4cqw 2.2cqw}
.rr-screen .rr-moved{font-size:2.4cqw;right:2.6cqw;top:2.6cqw;padding:1.2cqw 2.2cqw}
.rr-screen .rr-card,.rr-screen .rr-wrap{border-radius:4cqw;box-shadow:none}
/* journey grows to five stops (desktop rail only — phones stack) */
@media(min-width:901px){.journey-track{height:740vh}.journey-rail{width:500vw}}
/* step 5: the shortfall */
.sf-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.sf-call{display:flex;align-items:flex-start;gap:10px;max-width:340px;padding:10px 13px;border-radius:14px;border:1px solid rgba(239,68,68,.55);background:rgba(239,68,68,.08)}
.sf-call i{font-style:normal;color:#f87171;font-size:1rem;line-height:1.2}
.sf-call b{display:block;font-size:.84rem;color:#fff}
.sf-call small{display:block;font-size:.72rem;color:var(--mist);margin-top:2px}
@media(max-width:900px){
  .journey-track{height:auto}
  .sf-call{max-width:300px;padding:8px 11px}.sf-call b{font-size:.76rem}.sf-call small{font-size:.64rem}
  .rr-screen .rr-stack{width:100%}
}

@media(max-width:900px){.rr-phone.device{height:min(340px,41svh)}}
@media(max-width:900px) and (max-height:790px){.rr-phone.device{height:min(300px,36svh)}}

/* phones: CSS proximity snap was inconsistent on iOS (short flicks landed mid-screen); JS settles instead */
@media(max-width:900px){html{scroll-snap-type:none}main>section,.jpanel,.navis,.mp-stage,.ev-stage,.arrive{scroll-snap-align:none}}

/* ══════════ phones: continuous scroll, footage scrubbed by scroll (canvas frame sequences) ══════════ */
.sp-canvas,.rr-canvas{display:none}
.mtrack{display:contents}
@media(max-width:900px){
  .sp-video,.m-scrub{display:none!important}
  .sp-canvas,.rr-canvas{display:block;position:absolute;left:0;right:0;top:12.9cqw;width:100%;height:auto}
  .mtrack{display:block;height:260svh;position:relative}
  .mtrack.long{height:300svh}                       /* the forecast recording is twice as long as the home screen scroll */
  .mtrack>.jpanel{position:sticky;top:0;height:100dvh;min-height:0}
  .jpanel,.navis,.mp-stage,.arrive{padding-top:calc(104px + env(safe-area-inset-top))}   /* free scroll: content always clears the nav */
  .ev{display:none}                                                                        /* the 365-day beat lives inside the shortfall scrub now */
  .m-cap{font-size:.9rem;line-height:1.4;color:rgba(255,255,255,.88);text-align:center;max-width:32ch;margin:0 auto;min-height:2.8em}
  .mtrack .rr-cap,.mtrack .sf-call{display:none}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){.mtrack{height:auto}.mtrack>.jpanel{position:static;height:auto;min-height:100dvh}}

/* phones, continuous scroll: flow screens size to their content (no forced 100svh gaps); scrub stages and the final screen keep a full viewport */
@media(max-width:900px){
  .jpanel,.navis,.mp-stage{min-height:0;padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  .mtrack>.jpanel{height:100dvh}
  .arrive{min-height:100dvh}
}

/* ── end of Step 5: zoom into the shortfall screen, veil up, then "Powered by optimization" ── */
.jz-veil,.m-veil{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(60% 42% at 50% 56%,#2a1b6e,#0E0436 72%);will-change:opacity}
.m-veil{display:none}
.rr-phone.device{transform-origin:50% 50%;will-change:transform}
.fx{padding:120px 0 96px;background:#0E0436}
.fx .sec-head{text-align:center;max-width:760px;margin:0 auto}
.fx .lede{margin-left:auto;margin-right:auto}
.fx-frame{margin:48px auto 0;pointer-events:auto}
.fx-sound{position:absolute;right:16px;bottom:16px;z-index:3;pointer-events:auto;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(7,0,32,.62);color:#fff;font:600 .82rem/1 inherit;font-family:inherit;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fx-sound[aria-pressed="true"]{background:var(--orange);border-color:var(--orange)}
@media(max-width:900px){
  .m-veil{display:block}
  .mtrack[data-zoom]{height:250svh}
  .mtrack[data-steps]{height:300svh}
  .mtrack>.jpanel{overflow:hidden}
  .fx{padding:72px 0 64px}
  .fx-frame{width:min(86vw,calc((100svh - 250px) * 9 / 16));aspect-ratio:9/16;margin-top:30px}
  .fx-sound{right:12px;bottom:12px;padding:9px 14px;font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){.jz-veil,.m-veil{display:none}}

/* the zoom lands on the words, then the film section follows */
.zoom-title{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:0 24px;opacity:0;visibility:hidden;will-change:opacity,transform}
.zoom-title .eyebrow{justify-content:center;margin-bottom:18px;white-space:nowrap}
@media(max-width:900px){.zoom-title .eyebrow{font-size:.62rem;letter-spacing:.09em;margin-bottom:14px}}
.zoom-title h2{font-size:clamp(1.8rem,3.6vw,3.3rem);line-height:1.12;margin:0;max-width:22ch;color:#fff;letter-spacing:-.01em;text-wrap:balance}
.zoom-title .zt-l{display:block}
.zoom-title .zt-l+.zt-l{margin-top:.18em}
.fx .fx-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx .lede{margin-top:0}
@media(max-width:900px){.zoom-title h2{font-size:clamp(1.45rem,6.6vw,2rem)}.zoom-title{display:none}.mtrack .zoom-title{display:flex}}
@media(min-width:901px){.mtrack .zoom-title{display:none}}
@media(prefers-reduced-motion:reduce){.zoom-title{display:none!important}.fx .fx-title{position:static;width:auto;height:auto;clip:auto;white-space:normal;overflow:visible}}

/* Step 2: destinations, with the mandatory stops already on the route */
.dest{width:min(470px,100%);margin:0 auto;display:flex;flex-direction:column;gap:18px}
.dest .goals{width:100%}
.stops-strip{padding-left:34px}
.stops-label{display:flex;align-items:center;gap:8px;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:10px}
.stops-label i{width:18px;border-top:2px dashed rgba(153,135,255,.55)}
.stops-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stops-row>img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 14px 30px rgba(0,0,0,.4)}
.stops-row .loan-card{width:100%;border-radius:12px;box-shadow:0 14px 30px rgba(0,0,0,.4)}
@media(min-width:901px) and (max-height:820px){.stops-row{grid-template-columns:repeat(4,1fr);gap:8px}.stops-label{margin-bottom:8px}.dest{gap:12px}}
@media(max-width:900px){.dest{width:min(380px,100%);gap:14px}.stops-strip{padding-left:0}.stops-row{gap:8px}}
@media(max-width:900px){.mtrack .hero-visual{flex-direction:column;align-items:center;gap:10px}}
@media(max-width:900px){.mtrack .hero-phone.device{height:min(350px,40svh)}.mtrack .hero-visual{gap:8px}}

/* ── Step 3: the navigator, where the route lands, and the reroute ── */
.nav-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;width:min(540px,100%);margin:0 auto;align-items:start}
.nav-main,.nav-alt{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.nav-duo .rr-phone.device{height:min(440px,calc(100vh - 430px));width:auto}
.nav-alt .fc-chip{margin-top:2px;padding:9px 16px}.nav-alt .fc-chip b{font-size:1.3rem}
.duo-tag{font-size:.74rem;font-weight:600;color:rgba(255,255,255,.72);text-align:center;line-height:1.35}
.land-card{grid-column:1/-1;background:#0E0436;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px 16px;box-shadow:0 20px 50px rgba(0,0,0,.45);transition:opacity .45s ease,transform .5s cubic-bezier(.22,.8,.3,1)}
.land-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.land-head b{font-size:.86rem;color:#fff}.land-head small{font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.land-rows>div{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:baseline;padding:5px 0;border-top:1px solid rgba(255,255,255,.07);font-size:.8rem}
.land-rows>div:first-child{border-top:0}
.land-rows span{color:#fff;font-weight:600}.land-rows small{color:var(--mist);font-size:.76rem;min-width:5.5ch;text-align:right}.land-rows b{color:#F97316;font-weight:700;min-width:6.5ch;text-align:right}.land-rows b.up{color:#4ade80}
.land-rows .net{font-size:.86rem;border-top:1px solid rgba(255,255,255,.16)}
@media(max-width:900px){
  .nav-duo{display:block;position:relative;width:100%}
  .nav-main{gap:0}
  .duo-tag{display:none}
  .mtrack[data-nav]{height:300svh}
  .mtrack[data-nav] .nav-main .rr-phone.device{height:min(340px,38svh)}
  .land-card{position:absolute;left:4%;right:4%;bottom:-6px;z-index:4;opacity:0;transform:translateY(18px);pointer-events:none;padding:9px 13px}
  .land-card.on{opacity:1;transform:none}
  .land-rows>div{padding:3px 0;font-size:.74rem}.land-rows .net{font-size:.8rem}
  .nav-alt{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:8;opacity:0;visibility:hidden;will-change:opacity}
  .nav-alt .rr-phone.device{height:min(420px,50svh)}
}
@media(max-width:900px){.land-head{display:block;margin-bottom:6px}.land-head b{display:block;font-size:.82rem}.land-head small{display:block;margin-top:2px}.land-card{bottom:18px}}

/* opener close: store badges under the headline */
.story-outro .outro-stores{display:flex;justify-content:center;gap:12px;margin-top:30px;pointer-events:auto}
@media(max-width:900px){.story-outro .outro-stores{margin-top:22px;gap:10px}}
/* Step 3 on phones: the navigator screen dissolves into "Rerouting…" inside the same phone */
@media(max-width:900px){
  .mtrack[data-nav] .nav-alt{display:none}
  .mtrack[data-nav]{height:400svh}
  .rr-over{opacity:0;z-index:3;display:block!important}
  .device.recalc{box-shadow:0 0 0 2px rgba(249,115,22,.55),0 0 26px rgba(249,115,22,.22)}
  .device{transition:box-shadow .35s ease}
}

/* Step 4: the forecast — 7 / 30 / 365, landing on one day and one number */
.fc-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.fc-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 22px;border-radius:16px;background:rgba(34,197,94,.1);border:1px solid rgba(74,222,128,.45);box-shadow:0 0 30px rgba(74,222,128,.12);text-align:center}
.fc-chip small{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.fc-chip b{font-size:1.6rem;line-height:1.1;color:#4ade80;letter-spacing:-.01em}
.fc-chip span{font-size:.74rem;color:var(--mist)}
@media(max-width:900px){.mtrack .fc-chip{display:none}}

/* Step 3 on phones: the copy swaps when the screen goes to "Rerouting…" */
@keyframes copyIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:900px){
  .jp-copy .alt.m-only{display:none!important}
  .jp-copy.swap>:not(.alt){display:none!important}
  .jp-copy.swap .alt.m-only{display:block!important;animation:copyIn .45s cubic-bezier(.22,.8,.3,1) both}
  .jp-copy.swap .eyebrow.alt.m-only{display:inline-flex!important}
}

/* Step 3 on phones: two phones, swipe hand-off */
@media(max-width:900px){
  .mtrack[data-nav] .nav-duo{position:relative;display:flex;justify-content:center}
  .mtrack[data-nav] .nav-main{position:relative;will-change:transform,opacity;transform-origin:50% 90%}
  .mtrack[data-nav] .nav-alt{display:flex;position:absolute;inset:0;justify-content:flex-start;align-items:center;opacity:0;visibility:hidden;transform:translateX(118%) rotate(9deg) scale(.92);transform-origin:50% 90%;will-change:transform,opacity;z-index:5}
  .mtrack[data-nav] .nav-alt .rr-phone.device{height:min(340px,38svh)}
}

@media(max-width:900px){.rr-loop{display:block}.jpanel .rr-cap{display:none}}

/* ── the close: destination reached ── */
.story-arrive{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;will-change:opacity}
.story-arrive img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 45%}
.story-arrive::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,4,54,.82) 0%,rgba(14,4,54,.55) 38%,rgba(14,4,54,.12) 62%,rgba(14,4,54,0) 80%),linear-gradient(180deg,rgba(14,4,54,.35) 0%,rgba(14,4,54,0) 30%,rgba(14,4,54,0) 75%,rgba(14,4,54,.55) 100%)}
.story-outro{align-items:flex-start;justify-content:center;text-align:left;padding:0 0 0 clamp(24px,8vw,120px)}
.outro-inner{max-width:600px}
.story-outro .eyebrow{margin-bottom:16px}
.story-outro h2{font-size:clamp(2.4rem,5vw,4.8rem);line-height:1.04;margin:0;max-width:12ch;color:#fff;letter-spacing:-.015em;text-shadow:0 2px 18px rgba(10,2,40,.45)}
.story-outro h2 .accent{color:#ffb26b}
.outro-sub{font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.45;color:rgba(255,255,255,.9);margin:18px 0 0;max-width:44ch;text-shadow:0 1px 10px rgba(10,2,40,.45)}
.arrivals{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;max-width:520px;text-align:left}
.goal-done{font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.4;color:rgba(255,255,255,.92);margin:0;padding-left:26px;position:relative;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .5s cubic-bezier(.22,.8,.3,1);text-shadow:0 1px 10px rgba(10,2,40,.45)}
.goal-done.on{opacity:1;transform:none}
.goal-done::before{content:"\2713";position:absolute;left:0;top:0;color:#ffb26b;font-weight:800}
.story-outro .outro-stores{display:flex;justify-content:flex-start;gap:12px;margin-top:26px;pointer-events:auto}
.story-outro .store-badge{background:rgba(14,4,54,.55);border-color:rgba(255,255,255,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media(max-width:900px){
  .story-arrive img{object-position:50% 58%}
  .story-arrive::after{background:linear-gradient(180deg,rgba(14,4,54,.86) 0%,rgba(14,4,54,.62) 42%,rgba(14,4,54,.18) 66%,rgba(14,4,54,.05) 82%,rgba(14,4,54,.5) 100%)}
  .story-outro{align-items:center;justify-content:flex-start;text-align:center;padding:calc(112px + env(safe-area-inset-top)) 22px 0}
  .outro-inner{max-width:100%}
  .story-outro h2{font-size:clamp(2.1rem,10.5vw,3rem);max-width:none;margin:0 auto}
  .outro-sub{font-size:1rem;margin:12px auto 0;max-width:34ch}
  .arrivals{margin:16px auto 0;gap:7px;max-width:92vw;text-align:left}
  .goal-done{font-size:.92rem;padding-left:22px}
  .story-outro .outro-stores{justify-content:center;margin-top:20px;gap:10px}
}
@media(max-width:900px) and (max-height:700px){.story-outro{padding-top:calc(96px + env(safe-area-inset-top))}.outro-sub{display:none}.goal-done{font-size:.86rem}.arrivals{gap:5px}.story-outro .outro-stores{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.story-arrive{display:none}.story-outro{position:static;padding:20px 24px 0}.goal-done{opacity:1;transform:none}}

/* intro: previous look, plus one line of what it is */
.intro-sub{font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.45;color:rgba(255,255,255,.8);max-width:42ch;margin:16px auto 22px}
@media(max-width:900px){
  .intro-sub{font-size:.98rem;max-width:30ch;margin:12px auto 18px}
  /* close: centred, with a deeper shade through the middle so the copy reads over the house */
  .story-outro{justify-content:center;padding:calc(86px + env(safe-area-inset-top)) 22px 28px}
  .story-arrive::after{background:linear-gradient(180deg,rgba(14,4,54,.88) 0%,rgba(14,4,54,.72) 40%,rgba(14,4,54,.6) 62%,rgba(14,4,54,.3) 80%,rgba(14,4,54,.55) 100%)}
  .arrivals{gap:8px}
  .story-outro .outro-stores{margin-top:22px}
}
@media(max-width:900px) and (max-height:700px){.intro-sub{display:none}.story-outro{padding-top:calc(80px + env(safe-area-inset-top))}}

/* intro: subtitle types itself, then the cue pops in */
.intro-sub{min-height:calc(1.45em * 2)}
.intro-sub.typing::after{content:"";display:inline-block;width:2px;height:.9em;background:#c9c0ff;margin-left:3px;vertical-align:-2px;animation:twBlink 1s steps(2) infinite}
.story-intro>span.wait{opacity:0;transform:translateY(8px) scale(.94)}
.story-intro>span.pop{animation:cuePop .55s cubic-bezier(.22,.8,.3,1) both}
@keyframes cuePop{from{opacity:0;transform:translateY(8px) scale(.94)}60%{transform:translateY(-2px) scale(1.03)}to{opacity:1;transform:none}}
@media(max-width:900px){.story-intro h1{margin:0 0 10px}.intro-sub{min-height:calc(1.45em * 3);margin:0 auto 14px}}

/* intro: three beliefs type in and hold, then give way to the name and the button */
.intro-lead{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 24px;text-align:center;transition:opacity .7s ease,transform .7s ease}
.intro-lead.out{opacity:0;transform:translateY(-10px)}
.belief{display:block;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.45;color:rgba(255,255,255,.9);max-width:32ch;min-height:1.45em;letter-spacing:.005em}
.belief.typing::after{content:"";display:inline-block;width:2px;height:.9em;background:#c9c0ff;margin-left:3px;vertical-align:-2px;animation:twBlink 1s steps(2) infinite}
.story-intro .wait{opacity:0;transform:translateY(10px)}
.story-intro .pop{animation:cuePop .7s cubic-bezier(.22,.8,.3,1) both}
@media(max-width:900px){.belief{font-size:1.08rem;max-width:26ch}.intro-lead{gap:8px}}
@media(prefers-reduced-motion:reduce){.intro-lead{display:none}}
/* intro: belief types in, name rises, then the button */
.story-intro h1{margin:0}
.story-intro .intro-go{pointer-events:auto;margin-top:26px;display:inline-flex;align-items:center;gap:10px;font-size:1.02rem}
.story-intro .intro-go svg{width:16px;height:16px;stroke:currentColor;animation:introArrow 1.6s ease-in-out infinite}
@media(max-width:900px){.story-intro .intro-go{margin-top:22px;padding:14px 24px}}

/* ── review round: intro CTA + cue, positioning close, arrival section, trust strip ── */
.story-intro .intro-see{pointer-events:auto;margin-top:14px;display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:rgba(255,255,255,.82);font:inherit;font-size:1rem;cursor:pointer;padding:8px 4px}
.story-intro .intro-see svg{width:16px;height:16px;stroke:currentColor;animation:introArrow 1.6s ease-in-out infinite}
.story-outro{align-items:center;justify-content:center;text-align:center;padding:0 24px}
.outro-inner{max-width:760px}
.story-outro h2{max-width:none;font-size:clamp(2rem,4.2vw,3.8rem);line-height:1.1}
.story-outro h2 .zt-l{display:block}
.story-outro .outro-sub{margin:16px auto 0;max-width:46ch}
.story-outro .outro-stores{justify-content:center;margin-top:26px}
.story-outro .store-badge{background:rgba(14,4,54,.55);border-color:rgba(255,255,255,.3)}
.arrival{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:120px 0;overflow:hidden;background:#0E0436}
.arrived-bg{position:absolute;inset:0;z-index:0}
.arrived-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 45%}
.arrived-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,4,54,.85) 0%,rgba(14,4,54,.58) 38%,rgba(14,4,54,.14) 62%,rgba(14,4,54,0) 80%),linear-gradient(180deg,rgba(14,4,54,.5) 0%,rgba(14,4,54,0) 25%,rgba(14,4,54,0) 75%,rgba(14,4,54,.6) 100%)}
.arrived-inner{position:relative;z-index:1;max-width:600px;margin-left:clamp(24px,8vw,120px)}
.arrival .eyebrow{margin-bottom:16px}
.arrival h2{font-size:clamp(2.4rem,5vw,4.8rem);line-height:1.04;margin:0;color:#fff;letter-spacing:-.015em;text-shadow:0 2px 18px rgba(10,2,40,.45)}
.arrival h2 .accent{color:#ffb26b}
.arrival .lede{margin:18px 0 0;max-width:44ch;text-shadow:0 1px 10px rgba(10,2,40,.45)}
.arrival .arrivals{margin:22px 0 0;text-align:left}
.arrival .store-badges{justify-content:flex-start;margin-top:26px}
.arrival .store-badge{background:rgba(14,4,54,.55);border-color:rgba(255,255,255,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.trust{list-style:none;margin:22px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:.82rem;color:rgba(255,255,255,.7)}
.trust li{display:inline-flex;align-items:center;gap:7px}
.trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ade80;flex:none}
@media(max-width:900px){
  .story-outro{justify-content:center;padding:calc(86px + env(safe-area-inset-top)) 22px 28px}
  .story-outro h2{font-size:clamp(1.7rem,7.6vw,2.4rem)}
  .story-outro .outro-sub{font-size:1rem;max-width:32ch}
  .arrival{order:3;padding:calc(104px + env(safe-area-inset-top)) 0 calc(112px + env(safe-area-inset-bottom));align-items:center;text-align:center}
  .arrived-bg img{object-position:50% 58%}
  .arrived-bg::after{background:linear-gradient(180deg,rgba(14,4,54,.88) 0%,rgba(14,4,54,.72) 40%,rgba(14,4,54,.6) 62%,rgba(14,4,54,.3) 80%,rgba(14,4,54,.55) 100%)}
  .arrived-inner{margin:0 auto;max-width:100%}
  .arrival h2{font-size:clamp(2.1rem,10.5vw,3rem)}
  .arrival .lede{margin:12px auto 0;max-width:34ch;display:block}
  .arrival .arrivals{margin:16px auto 0;max-width:92vw}
  .arrival .store-badges{justify-content:center;margin-top:20px}
  .trust{flex-direction:column;align-items:center;gap:6px;font-size:.8rem}
  .mtrack[data-nav]{height:300svh}
}
@media(prefers-reduced-motion:reduce){.arrival .goal-done{opacity:1;transform:none}}

/* intro: two buttons side by side; stage-wide veil so the phone's edges never show at the intro or the close */
.stage-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(60% 42% at 50% 56%,#2a1b6e,#0E0436 72%);opacity:1;will-change:opacity}
.intro-actions{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:26px;pointer-events:auto}
.story-intro .intro-go{margin-top:0}
.story-intro .intro-see{margin-top:0;padding:15px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.38);background:rgba(14,4,54,.25);color:#fff;font-size:1.02rem;font-weight:600;gap:8px}
.story-intro .intro-see:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.08)}
@media(max-width:900px){.intro-actions{gap:10px;margin-top:22px;flex-wrap:nowrap}.story-intro .intro-go,.story-intro .intro-see{padding:13px 16px;font-size:.94rem;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.stage-veil{display:none}}

/* ── the journey as streets: six panels on a grid, the rail turns right, down, right, down, right ── */
@media(min-width:901px){
  .journey-track{height:900vh}
  .journey-rail{display:block;position:relative;width:400vw;height:300vh}
  .journey-rail>.jpanel,.journey-rail>.mtrack>.jpanel{position:absolute;left:calc(var(--gx,0) * 100vw);top:calc(var(--gy,0) * 100vh);width:100vw;height:100vh;height:100dvh}
  /* the caption hangs just above the phone instead of being pinned to the top, so the gap is the same on every window; it never rises into the nav */
  .story-line{top:auto;bottom:min(calc(100% - var(--phone-top,50%) + 26px),calc(100% - 186px));height:0;min-height:0}   /* --phone-top is the phone's layout top, set by the opener script */
  .story-line span{top:auto;bottom:0;font-size:clamp(1.75rem,2.6vw,2.4rem);width:min(820px,92vw);line-height:1.18}
  .nav-main{display:none}
  .nav-duo{grid-template-columns:1fr;width:min(360px,100%)}
  .nav-duo .rr-phone.device{height:min(500px,calc(100vh - 380px))}
  .jpanel.arrival{padding:0;display:flex;align-items:center;overflow:hidden;background:#0E0436}
  .jpanel.arrival .arrived-inner{margin-left:clamp(24px,8vw,120px)}
}
@media(max-width:900px){
  .jpanel.arrival{min-height:100dvh;padding:calc(104px + env(safe-area-inset-top)) 0 calc(112px + env(safe-area-inset-bottom));display:flex;align-items:center;text-align:center;position:relative;overflow:hidden;background:#0E0436}
  .jpanel.arrival .arrived-inner{position:relative;z-index:1;margin:0 auto;max-width:100%}
  .arrived-bg{position:absolute;inset:0;z-index:0}
}
@media(min-width:901px){.story-phone{padding-top:150px;box-sizing:border-box}.sp-device{height:min(600px,62vh)}.journey-road{width:min(820px,88vw)}.journey-road b{font-size:.64rem}}

/* ── the arrival lands like the intro: dark, then the sunrise dissolves in and the words rise ── */
.jpanel.arrival .arrived-bg{opacity:0;transform:scale(1.08);transition:opacity 1.6s ease,transform 3.2s ease;will-change:opacity,transform}
.jpanel.arrival .arrived-inner>*{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .9s cubic-bezier(.22,.8,.3,1)}
.jpanel.arrival .arrived-inner>.eyebrow{transition-delay:.6s}
.jpanel.arrival .arrived-inner>h2{transition-delay:.8s}
.jpanel.arrival .arrived-inner>.lede{transition-delay:1.05s}
.jpanel.arrival .arrived-inner>.arrivals{transition-delay:1.25s}
.jpanel.arrival .arrived-inner>.store-badges{transition-delay:1.6s}
.jpanel.arrival.grand .arrived-bg{opacity:1;transform:none}
.jpanel.arrival.grand .arrived-inner>*{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.jpanel.arrival .arrived-bg,.jpanel.arrival .arrived-inner>*{opacity:1;transform:none;transition:none}}

/* phones: the arrival is never a blank screen; it starts faint and completes on entry */
@media(max-width:900px){.jpanel.arrival .arrived-bg{opacity:.15;transform:scale(1.06)}.jpanel.arrival .arrived-inner>*{opacity:0}}

/* phones: the sunrise dissolves in over the zoomed shortfall while the stage is still pinned */
.m-arrive{display:none}
@media(max-width:900px){
  .m-arrive{display:block;position:absolute;inset:0;z-index:7;opacity:0;pointer-events:none;will-change:opacity}
  .m-arrive img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
  .m-arrive::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,4,54,.88) 0%,rgba(14,4,54,.72) 40%,rgba(14,4,54,.6) 62%,rgba(14,4,54,.3) 80%,rgba(14,4,54,.55) 100%)}
  .mtrack[data-zoom]{height:300svh}
  .jpanel.arrival .arrived-bg{opacity:1;transform:none;transition:none}
}
/* phones: the arrival waits pinned beneath the shortfall stage, so the stage slides off to reveal the same frame */
@media(max-width:900px){
  .rail-tail{height:100dvh}
  .mtrack[data-zoom]{position:relative;z-index:2}
  .jpanel.arrival{position:sticky;top:0;height:100dvh;min-height:0;margin-top:-178svh;z-index:1;box-sizing:border-box}
}
.rail-tail{display:none}
@media(max-width:900px){.rail-tail{display:block}}

/* the positioning close carries the film, 16:9 on every screen */
.outro-film{width:min(760px,92vw,calc((100vh - 430px) * 16 / 9));margin:20px auto 0;pointer-events:auto;background:#070020}
.outro-film iframe{background:#070020}
.story-outro h2{font-size:clamp(1.8rem,3.4vw,3rem)}
.story-outro .outro-stores{margin-top:20px}
@media(max-width:900px){.outro-film{width:92vw;margin-top:16px;border-radius:16px}.story-outro h2{font-size:clamp(1.55rem,7vw,2.2rem)}.story-outro .outro-stores{margin-top:16px}.fx-sound{right:10px;bottom:10px;padding:8px 12px;font-size:.74rem}}

/* close: the film is 16:9 on phones too (an old 9:16 rule for the removed engine section must not win) */
@media(max-width:900px){.story-outro .outro-film{aspect-ratio:16/9!important;width:92vw!important;height:auto}}
/* phones: the shortfall stage fades out in place over the pinned arrival (no slide-off seam) */
@media(max-width:900px){.mtrack[data-zoom]{height:400svh}.mtrack[data-zoom]>.jpanel{will-change:opacity}.rail-tail{height:178svh}}

/* seven screens on the street grid */
@media(min-width:901px){.journey-track{height:1040vh}.journey-rail{height:400vh}.journey-road{width:min(960px,92vw)}.journey-road b{font-size:.6rem}}

/* the positioning close: the film carries it */
.story-outro .eyebrow{margin-bottom:14px}
.outro-film{width:min(1100px,92vw,calc((100vh - 250px) * 16 / 9));margin:0 auto}
.story-outro .outro-stores{margin-top:22px}
@media(max-width:900px){.story-outro .outro-film{width:94vw!important}.story-outro .outro-stores{margin-top:18px}}
.story-outro .outro-inner{max-width:1100px;width:100%}
.outro-film{width:min(1100px,92vw,calc((100vh - 300px) * 16 / 9))}
/* phones: no captions under the screens; bigger renderings */
@media(max-width:900px){
  .m-cap{display:none!important}
  .mtrack .hero-visual{gap:0}
  .mtrack .hero-phone.device{height:min(430px,48svh)}
  .mtrack[data-nav] .nav-main .rr-phone.device{height:min(430px,48svh)}
  .mtrack[data-nav] .nav-alt .rr-phone.device{height:min(430px,48svh)}
  .mtrack .rr-phone.device{height:min(430px,48svh)}
  .jpanel:not(.arrival) .rr-phone.device{height:min(440px,50svh)}
  .mtrack .jpanel .rr-phone.device{height:min(430px,48svh)}
  .jpanel .hero-phone{height:min(440px,50svh)}
}
@media(max-width:900px) and (max-height:740px){.mtrack .hero-phone.device,.mtrack .rr-phone.device,.mtrack[data-nav] .nav-main .rr-phone.device,.mtrack[data-nav] .nav-alt .rr-phone.device,.mtrack .jpanel .rr-phone.device{height:min(400px,44svh)}}

/* ── five screens; varied treatments per step ── */
@media(min-width:901px){
  .journey-track{height:820vh}.journey-rail{width:300vw;height:300vh}
  .journey-road{width:min(820px,88vw)}.journey-road b{font-size:.64rem}
  /* step 1: full-bleed crop off the right edge */
  .hero.jpanel .jp-vis{position:static}
  .hero.jpanel .hero-visual{position:absolute;right:-4vw;top:96px;bottom:48px;width:46vw;display:block}
  .hero.jpanel .hero-phone.device.bare{width:100%;height:100%;aspect-ratio:auto;border-radius:34px 0 0 34px;border:0;box-shadow:0 40px 90px rgba(0,0,0,.5);background:#0E0436;overflow:hidden}
  .hero.jpanel .device.bare .device-screen{border-radius:0;transform:scale(1.35);transform-origin:0 0;width:74%;height:74%}
  /* step 4: the moving reroute, large */
  #reroute .rr-phone.device.big{height:min(640px,calc(100vh - 210px))}
  /* nearby section */
  .nearby-sec{padding:120px 0 100px}
  .nearby-sec .rr-phone.device{height:min(560px,calc(100vh - 260px))}
}
.device.bare::before{display:none}
.device.bare .device-island,.device.bare .sp-status{display:none}
.device.bare .rr-canvas,.device.bare .hero-video{top:0;height:100%}
/* step 2: cards floating on their own */
.goals.float::before{display:none}
.goals.float{padding-left:0;gap:18px}
.goals.float .goal::before{display:none}
.goals.float .goal{box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.goals.float .goal.g1{transform:rotate(-2.2deg) translateX(-14px)}
.goals.float .goal.g2{transform:rotate(1.6deg) translateX(18px)}
.goals.float .goal.g3{transform:rotate(-1deg) translateX(-4px)}
/* step 3: before / after pair */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:min(560px,100%);margin:0 auto;align-items:start}
.pair .shot{margin:0;display:flex;flex-direction:column;gap:10px;align-items:center}
.pair .shot img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.pair figcaption{font-size:.76rem;font-weight:600;color:rgba(255,255,255,.72);text-align:center;line-height:1.35}
.pair .shot:first-child figcaption{color:#86efac}
.pair .shot:last-child figcaption{color:#fca5a5}
@media(max-width:900px){
  .device.bare{border-radius:22px;border:0;box-shadow:0 30px 60px rgba(0,0,0,.5);aspect-ratio:auto;width:100%!important;height:min(460px,52svh)!important;overflow:hidden}
  .device.bare .device-screen{border-radius:0}
  .device.bare .rr-canvas{position:absolute;left:0;top:0;width:100%;height:auto}
  .mtrack .hero-visual{width:100%}
  .goals.float .goal.g1,.goals.float .goal.g2,.goals.float .goal.g3{transform:none}
  .goals.float{gap:12px}
  .pair{gap:10px;width:100%}
  .pair .shot img{border-radius:16px}
  .pair figcaption{font-size:.7rem}
  .nearby-sec{padding:72px 0 40px}
  .nearby-sec .jp-vis{margin-top:20px}
}
@media(max-width:900px){.mtrack>.jpanel{align-items:flex-start}.mtrack>.jpanel>.wrap{width:100%}}
@media(max-width:900px){.journey-rail>.jpanel:not(.arrival){padding-bottom:calc(64px + env(safe-area-inset-bottom))}}

/* ── reverted seven-screen build, now six: nearby stays, shortfall folded into step 3 ── */
@media(min-width:901px){
  .journey-track{height:1060vh}.journey-rail{width:400vw;height:300vh}   /* steps 1 and 3 hold twice as long (they scrub a recording), so the rail gets two more screens of track */
  .journey-road{width:min(880px,90vw)}.journey-road b{font-size:.62rem}
  .hero.jpanel .hero-visual{position:relative;right:auto;top:auto;bottom:auto;width:auto;display:flex;justify-content:center}
  .hero.jpanel .hero-phone.device{width:min(340px,80%,calc((100vh - 220px) * .478));height:auto;aspect-ratio:340/712}
  .nav-duo{display:none}
  .pair.d-only{display:grid}
}
@media(max-width:900px){.pair.d-only{display:none!important}}
/* intro belief line, headline-sized */
.belief{font-size:clamp(1.9rem,3.4vw,3.2rem);line-height:1.15;font-weight:600;color:#fff;max-width:20ch;letter-spacing:-.01em}
@media(max-width:900px){.belief{font-size:clamp(1.6rem,7.6vw,2.2rem);max-width:15ch}}
@media(max-width:900px){.belief{max-width:18ch}}

/* intro: the logo stands in for the name */
.intro-logo{display:block;margin:0 auto 14px;height:clamp(48px,5.4vw,78px);width:auto}
.intro-tag{display:block}
@media(max-width:900px){.intro-logo{height:52px;margin-bottom:10px}}

/* step 3: the title follows the beat — green year, then the week it runs short */
.accent.red{color:#fca5a5}
.jp-copy .neg{display:none}
.jp-copy.short .neg{display:inline}
.jp-copy.short .pos{display:none}
.jp-copy .neg,.jp-copy .pos{animation:copyIn .45s cubic-bezier(.22,.8,.3,1) both}
.pair .shot{transition:opacity .6s ease,transform .7s cubic-bezier(.22,.8,.3,1)}
.pair:not(.short) .shot:last-child,.pair.short .shot:first-child{opacity:.45;transform:scale(.95)}
@media(max-width:900px){.mtrack[data-nav]{height:340svh}}
/* every phone as large as its screen allows */
@media(max-width:900px){
  .mtrack .hero-phone.device,.mtrack .rr-phone.device,.mtrack[data-nav] .nav-main .rr-phone.device,.mtrack[data-nav] .nav-alt .rr-phone.device,.mtrack .jpanel .rr-phone.device{height:min(640px,calc(100svh - 372px))}
  .journey-rail>.jpanel:not(.arrival) .rr-phone.device,.jpanel .hero-phone,.nearby-sec .rr-phone.device{height:min(660px,72svh)}
  .mtrack .hero-visual{gap:0}
}
@media(max-width:900px) and (max-height:740px){
  .mtrack .hero-phone.device,.mtrack .rr-phone.device,.mtrack[data-nav] .nav-main .rr-phone.device,.mtrack[data-nav] .nav-alt .rr-phone.device,.mtrack .jpanel .rr-phone.device{height:min(560px,calc(100svh - 376px))}
}
@media(min-width:901px){
  .jpanel .rr-phone.device,#reroute .rr-phone.device.big,.nearby-sec .rr-phone.device,.rr-phone.device{height:min(740px,calc(100vh - 196px))}
  .hero.jpanel .hero-phone.device{width:min(400px,80%,calc((100vh - 196px) * .478))}
  .jpanel .sf-wrap{gap:10px}
}

/* ── phones: the pinned story stages fit the space the browser actually leaves ──
   iOS adds a notch inset at the top and a home-bar inset at the bottom, and Safari's toolbar
   shrinks the viewport further, which used to push the phone mock under the sticky Get NavFi
   bar and clip it. Size the mock from the small viewport minus the copy and both insets. */
@media(max-width:900px){
  .mtrack>.jpanel{padding-top:calc(88px + env(safe-area-inset-top));padding-bottom:calc(28px + env(safe-area-inset-bottom))}   /* the Get NavFi bar steps out while a stage is pinned, so the mock can use that room */
  .mtrack>.jpanel .hero-grid{gap:14px}
  .mtrack{--fit:calc(100svh - 336px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}   /* Safari will not take env() nested inside min(), so resolve it here first */
  .mtrack .hero-phone.device,
  .mtrack[data-nav] .nav-main .rr-phone.device,
  .mtrack[data-nav] .nav-alt .rr-phone.device{height:min(430px,48svh,var(--fit));width:auto;margin-left:auto;margin-right:auto}
}
@media(max-width:900px){body.stage-on #mbar{transform:translateY(120%);pointer-events:none}}   /* the demo stages need the whole screen; the nav CTA stays */

/* ── step 3 is now one phone and one continuous forecast recording, on every screen size ── */
.jp-copy .neg{display:none}
.jp-copy .pos{display:inline}
.jp-copy.short .neg{display:inline}
.jp-copy.short .pos{display:none}
@media(min-width:901px){
  .jpanel .jp-vis.hero-visual{position:relative;display:flex;justify-content:center;align-items:center}
  .jpanel .jp-vis .hero-phone.device{margin:0 auto}
}

/* ── desktop fixes from the stress test ── */
/* reduced motion: the later desktop grid rules used to win over the static layout, leaving a 5760px-wide page */
@media(min-width:901px) and (prefers-reduced-motion:reduce){
  .journey-track{height:auto!important}
  .journey-stage{position:static!important;height:auto!important;overflow:visible!important}
  .journey-rail{display:block!important;position:static!important;width:auto!important;height:auto!important;transform:none!important}
  .journey-rail>.jpanel,.journey-rail>.mtrack>.jpanel{position:static!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;min-height:0!important}
  .journey-road,.jz-veil,.jz-title{display:none!important}
}
/* pinned stages carry their own nav padding, so the section margin only pushed the landing short */
#how,#why{scroll-margin-top:0}
/* the floating CTA sat on the road labels at widths under about 1400px; step out while the journey is pinned */
@media(min-width:901px){body.stage-on #fab{opacity:0;transform:translateY(16px);pointer-events:none}}

/* ── phone matrix fixes ── */
.journey .hero-phone{animation:none}                                   /* a screen you are scrubbing must not bob on its own */
@media(max-width:900px){.jpanel[data-swap] .jp-copy h2{min-height:3.5em}}   /* the red headline wraps to a third line: reserve it so the phone does not jump */
@media(max-width:900px) and (max-height:500px){                        /* landscape phones: no room to pin a stage, so lay it out flat with the phone beside the copy */
  .mtrack{height:auto!important}
  .mtrack>.jpanel{position:static!important;height:auto!important;min-height:0!important;padding-top:calc(76px + env(safe-area-inset-top))!important;padding-bottom:40px!important}
  .mtrack>.jpanel .hero-grid{grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
  .mtrack .hero-phone.device,.mtrack .rr-phone.device,.mtrack .jpanel .rr-phone.device{height:min(300px,72svh)!important;transform:none!important}
  .mtrack .hero-visual{justify-content:center}
}

/* ── phones: one phone size for the whole journey, the biggest that fits the tightest stage (set by JS as --mock-h) ── */
@media(max-width:900px) and (min-height:501px){
  .journey .jpanel .device{height:var(--mock-h,min(430px,48svh,var(--fit)))!important;width:auto!important;max-height:none!important;margin-left:auto;margin-right:auto}
}
/* phones: a link to #how should land with the stage pinned (its own padding clears the nav), not 96px early with the bottom cut off */
@media(max-width:900px){#how{scroll-margin-top:-96px}}

/* ── quick links: the burger opens a grouped menu on every screen size ── */
.nav-burger{display:block}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{display:none;background:rgba(14,4,54,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--stroke);padding:18px 24px 26px}
.nav-mobile.open{display:block;animation:fadeUp .22s ease}
.ql{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 28px;max-width:1180px;margin:0 auto}
.ql-col{display:flex;flex-direction:column;gap:2px}
.ql-col b{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px}
.nav-mobile .ql-col a{color:var(--cream);text-decoration:none;font-weight:600;font-size:.93rem;padding:9px 0;border-bottom:1px solid var(--stroke);transition:color .2s}
.nav-mobile .ql-col a:last-child{border-bottom:none}
.nav-mobile .ql-col a:hover{color:#fff}
.nav-mobile .ql-col a.ql-go{color:var(--orange);font-weight:800}
@media(min-width:901px){
  .nav-mobile{position:absolute;left:0;right:0;top:100%;box-shadow:0 30px 60px rgba(0,0,0,.45)}   /* the header is fixed, so this drops from under it */
}
@media(max-width:900px){
  .nav-mobile{padding:14px 20px 22px;max-height:calc(100dvh - 70px);overflow:auto;-webkit-overflow-scrolling:touch}
  .ql{grid-template-columns:1fr 1fr;gap:10px 22px}
  .nav-mobile .ql-col a{padding:10px 0}
}
@media(max-width:420px){.ql{grid-template-columns:1fr}.ql-col b{margin-top:6px}}

/* ── the road is a GPS: a car drives the route, a turn cue counts down to the next transition ── */
.journey-road .jr-dot{top:auto;bottom:21px;width:26px;height:44px;margin-left:-13px;border-radius:0;background:none;box-shadow:none;transition:left .15s linear}
.journey-road .jr-nav{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom;transform-origin:50% 100%;filter:drop-shadow(0 0 12px rgba(249,115,22,.55)) drop-shadow(0 8px 12px rgba(0,0,0,.55))}
.journey-road .jr-dot.moving .jr-nav{animation:jrWalk .34s ease-in-out infinite}
@keyframes jrWalk{0%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2px) rotate(3deg)}100%{transform:translateY(0) rotate(-3deg)}}
.journey-road .jr-line{border-top:2px dashed rgba(255,255,255,.34)}
.journey-road .jr-turn{position:absolute;left:0;bottom:calc(100% + 40px);display:flex;align-items:center;gap:12px;padding:8px 14px 8px 10px;border-radius:14px;background:rgba(11,3,48,.9);border:1px solid var(--stroke-bright);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 40px rgba(0,0,0,.45);white-space:nowrap;transition:border-color .3s,box-shadow .3s}
.journey-road .jr-turn.now{border-color:var(--orange);box-shadow:0 0 0 4px rgba(249,115,22,.18),0 18px 40px rgba(0,0,0,.45)}
.journey-road .jr-arrow{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(249,115,22,.14)}
.journey-road .jr-arrow svg{display:none;width:26px;height:28px;fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.journey-road .jr-arrow[data-dir="right"] .a-right,.journey-road .jr-arrow[data-dir="down"] .a-down,.journey-road .jr-arrow[data-dir="left"] .a-left,.journey-road .jr-arrow[data-dir="up"] .a-up,.journey-road .jr-arrow[data-dir="arrive"] .a-arrive{display:block}
.journey-road .jr-arrow[data-dir="arrive"] svg{fill:rgba(249,115,22,.25)}
.journey-road .jr-turn.now .jr-arrow svg{animation:jrNudge .6s ease-in-out infinite}
@keyframes jrNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.journey-road .jr-text{display:flex;flex-direction:column;line-height:1.15}
.journey-road .jr-text em{font-style:normal;font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.journey-road .jr-text b{font-size:.92rem;font-weight:800;color:var(--cream);letter-spacing:0;text-transform:none;position:static;transform:none}
.journey-road .jr-dist{font-size:.86rem;font-weight:800;color:var(--orange);padding-left:12px;border-left:1px solid var(--stroke);font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.journey-road .jr-dot.moving .jr-nav,.journey-road .jr-turn.now .jr-arrow svg{animation:none}}

/* ── social channels: footer row + quick-links menu ── */
.foot-social{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:-24px 0 28px}
.foot-social b{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.soc{display:flex;gap:10px}
.soc-a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--cream);transition:border-color .2s,background .2s,color .2s,transform .2s}
.soc-a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.soc-a:hover{border-color:var(--orange);background:rgba(249,115,22,.14);color:#fff;transform:translateY(-2px)}
.ql-follow{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.ql-follow b{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.nav-mobile .ql-follow .soc-a{padding:0;border-bottom:1px solid var(--stroke);width:38px;height:38px}
@media(max-width:540px){.foot-social{margin-top:-8px}}

/* ── article pages (What is NavFi, Compare): plain readable prose for people and crawlers ── */
.article-page .wrap.narrow{max-width:820px}
.article{padding:140px 0 80px}
.article .eyebrow{margin-top:26px}
.article h1{font-size:clamp(2.1rem,4.2vw,3.2rem);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:14px 0 18px;color:var(--cream)}
.article .lead{font-size:1.18rem;line-height:1.6;color:var(--cream);opacity:.92;margin-bottom:30px}
.article h2{font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:800;letter-spacing:-.01em;margin:44px 0 12px;color:var(--cream)}
.article p,.article li{font-size:1.02rem;line-height:1.68;color:var(--mist)}
.article p b,.article li b{color:var(--cream)}
.article ul,.article ol{padding-left:22px;margin:0 0 10px}
.article li{margin:0 0 10px}
.article a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.article .more{margin-top:28px}
.article .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.article .faq-wrap{margin-top:18px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:26px 0 6px}
.facts>div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;border:1px solid var(--stroke);background:rgba(255,255,255,.035)}
.facts b{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.facts span{font-size:.95rem;line-height:1.45;color:var(--cream)}
.tbl-wrap{overflow-x:auto;margin:18px 0 6px;border:1px solid var(--stroke);border-radius:14px}
.cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:.93rem;line-height:1.5}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--stroke)}
.cmp thead th{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);background:rgba(255,255,255,.04)}
.cmp tbody th{color:var(--cream);font-weight:800;white-space:nowrap}
.cmp td{color:var(--mist)}
.cmp td:last-child{color:var(--cream)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:none}
@media(max-width:640px){.facts{grid-template-columns:1fr}.article{padding-top:112px}}

/* ── page navigator button: on the journey it carries the GPS turn (kicker + next stop + turn icon), elsewhere the next section ── */
.jnext{position:fixed;right:32px;bottom:96px;z-index:70;display:inline-flex;align-items:center;gap:12px;padding:10px 14px 10px 18px;border-radius:999px;border:1px solid rgba(249,115,22,.55);background:rgba(11,3,48,.88);color:var(--cream);font-family:var(--font,Montserrat,sans-serif);cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 4px rgba(249,115,22,.12);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s,border-color .2s,background .2s;text-align:left}
.jnext .jn-t{display:flex;flex-direction:column;gap:2px;line-height:1.05}
.jnext .jn-k{font-size:.56rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.jnext .jn-l{font-size:.9rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.jnext .jn-i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(249,115,22,.14);color:var(--orange)}
.jnext .jn-i svg{display:none;width:20px;height:20px}
.jnext[data-dir="down"] .i-down,.jnext[data-dir="turn-right"] .i-turn-right,.jnext[data-dir="turn-down"] .i-turn-down,.jnext[data-dir="arrive"] .i-flag{display:block}
.jnext[data-dir="turn-right"] .jn-i svg,.jnext[data-dir="turn-down"] .jn-i svg{width:22px;height:24px}
.jnext:hover{border-color:var(--orange);background:rgba(249,115,22,.16)}
.jnext:hover .jn-i svg{animation:jnNudge .6s ease-in-out infinite}
@keyframes jnNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.jnext.show{opacity:1;transform:none;pointer-events:auto}
@media(max-width:900px){.jnext{right:14px;bottom:calc(84px + env(safe-area-inset-bottom));width:48px;height:48px;padding:0;justify-content:center;border-radius:50%;gap:0}.jnext .jn-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.jnext .jn-i{width:auto;height:auto;background:none}.jnext .jn-i svg{width:22px;height:22px}.jnext[data-dir] .jn-i svg{display:none}.jnext .i-down{display:block!important}body.on-journey .jnext{bottom:calc(18px + env(safe-area-inset-bottom))}body.on-journey #mbar{transform:translateY(110%)!important;pointer-events:none!important}.jnext.last{width:auto;height:48px;border-radius:999px;padding:0 14px 0 18px;gap:8px}.jnext.last .jn-t{position:static;width:auto;height:auto;clip:auto}.jnext.last .jn-k{display:none}.jnext.last .jn-l{font-size:.8rem}}
@media(max-width:900px) and (max-height:500px){.jnext{bottom:14px}}
@media(prefers-reduced-motion:reduce){.jnext{transition:none}.jnext:hover .jn-i svg{animation:none}}
.journey-road .jr-turn{display:none}

/* primary CTA: long label on desktop, short pill on phones */
.cta-s{display:none}
@media(max-width:900px){.cta-l{display:none}.cta-s{display:inline}}

/* opener: the two store badges first, the offer line underneath */
.story-intro .intro-cta{flex-direction:column;gap:16px;margin-top:30px;pointer-events:auto;transition:opacity .7s ease,transform .7s ease}
.story-intro .intro-stores{gap:12px}
.story-intro .intro-stores .store-badge{background:rgba(14,4,54,.55);border-color:rgba(255,255,255,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.story-intro .intro-free{margin:0;font-size:clamp(1.1rem,1.6vw,1.45rem);font-weight:700;color:#fff;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(10,2,40,.5)}
.story-intro .intro-free .accent{color:var(--orange)}
@media(max-width:900px){.story-intro .intro-cta{margin-top:22px;gap:12px}.story-intro .intro-stores{flex-wrap:nowrap}.story-intro .intro-free{font-size:1.1rem}}

/* ---- v111: Meet your Navi as a picker (tabs + panel), after the v3 site ---- */
.navi-picker{max-width:768px;margin:44px auto 0}
.navi-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.navi-tab{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 16px 14px;border-radius:18px;border:1px solid transparent;background:transparent;color:rgba(255,255,255,.65);font:inherit;font-size:.92rem;font-weight:500;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.navi-tab:hover{background:rgba(255,255,255,.05);color:var(--cream)}
.navi-tab.on{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:var(--cream)}
.navi-tab:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
.navi-tab-img{display:block;height:112px;width:100%}
.navi-tab-img img{width:100%;height:100%;object-fit:contain;opacity:.75;transition:transform .3s,opacity .3s}
.navi-tab:hover .navi-tab-img img{opacity:1}
.navi-tab.on .navi-tab-img img{opacity:1;transform:scale(1.05)}
.navi-panel{display:flex;align-items:flex-start;gap:32px;margin-top:32px;padding:32px;border-radius:24px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);text-align:left}
.navi-panel-copy{flex:1;min-width:0}
.navi-panel-role{font-size:.9rem;color:rgba(255,255,255,.55)}
.navi-panel-name{margin-top:4px;font-size:1.5rem;font-weight:600;line-height:1.2}
.navi-panel-desc{margin-top:8px;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.7)}
.navi-quote{flex:0 0 42%;margin:0;padding:12px 16px 14px;border-radius:16px;background:#1B114D}
.navi-quote figcaption{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.navi-quote blockquote{margin:4px 0 0;font-size:.95rem;font-weight:500;line-height:1.4;color:var(--cream)}
.navi-panel.swap .navi-panel-copy,.navi-panel.swap .navi-quote{animation:naviIn .35s ease both}
@keyframes naviIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.navi-quiz{margin:24px 0 0;text-align:center;font-size:.9rem;color:rgba(255,255,255,.6)}
.navi-quiz a{color:var(--cream);text-decoration:underline;text-underline-offset:4px}
.navi-quiz a:hover{color:rgba(255,255,255,.8)}
.navi-try{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.navi-try span{margin-right:4px;font-size:.76rem;color:rgba(255,255,255,.45)}
.navi-try a{padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.15);font-size:.76rem;color:rgba(255,255,255,.8);text-decoration:none;transition:border-color .2s,color .2s}
.navi-try a:hover{border-color:rgba(255,255,255,.4);color:var(--cream)}
@media(max-width:900px){
  .navi-picker{margin-top:28px}
  .navi-tabs{gap:8px}
  .navi-tab{padding:8px 6px 10px;gap:8px;font-size:.72rem}
  .navi-tab-img{height:68px}
  .navi-panel{flex-direction:column;gap:16px;margin-top:20px;padding:20px;text-align:center}
  .navi-panel-name{font-size:1.25rem}.navi-panel-desc{font-size:.94rem}
  .navi-quote{flex:none;width:100%;text-align:left}
  .navi-try{margin-top:28px;padding-top:20px}
}
@media(prefers-reduced-motion:reduce){.navi-panel.swap .navi-panel-copy,.navi-panel.swap .navi-quote{animation:none}}

/* ---- v112: the navigator is the only floating control on the home page; it becomes the buy button at the last stop ---- */
.jnext{bottom:32px}
.jnext[data-dir="go"] .i-go{display:block}
.jnext.go{border-color:#F97316;background:#F97316;color:#0E073B;box-shadow:0 14px 40px var(--cta-shadow,rgba(249,115,22,.4))}
.jnext.go .jn-k{color:rgba(14,7,59,.72)}
.jnext.go .jn-i{background:rgba(14,7,59,.14);color:#0E073B}
.jnext.go:hover{background:#FF8A3A;border-color:#FF8A3A}
@media(max-width:900px){
  body.nav-on .jnext{bottom:calc(18px + env(safe-area-inset-bottom))}
  body.nav-on #mbar{transform:translateY(110%)!important;pointer-events:none!important}
  .jnext[data-dir="go"] .i-down{display:none!important}
  .jnext[data-dir="go"] .i-go{display:block!important}
  .jnext.go.last{padding:0 16px 0 20px}
  .jnext.go.last .jn-l{font-size:.9rem;font-weight:800}
  .jnext.go .jn-i{background:none;color:#0E073B}
}

/* ---- v113: trust lines open the first screen, above the store badges ---- */
.story-intro .intro-trust{margin:0;gap:6px 18px;font-size:.8rem;color:rgba(255,255,255,.82);text-shadow:0 1px 10px rgba(10,2,40,.6)}
.story-intro .intro-trust li::before{box-shadow:0 0 8px rgba(74,222,128,.7)}
@media(max-width:900px){.story-intro .intro-trust{flex-direction:column;gap:4px;font-size:.78rem}}

/* ---- v114: trust line as a quiet footnote under the first-screen CTA ---- */
.story-intro .intro-trust{margin:2px 0 0;font-size:.78rem;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.6);text-shadow:0 1px 10px rgba(10,2,40,.6);text-align:center;line-height:1.6}
.story-intro .intro-trust .sep{display:inline-block;margin:0 10px;color:rgba(255,255,255,.35)}
@media(max-width:900px){.story-intro .intro-trust{font-size:.74rem;line-height:1.7}.story-intro .intro-trust .tl{display:block}.story-intro .intro-trust .sep{display:none}}

/* ---- v115: the trust line lives on Step 1, where the bank connection comes up ---- */
.jp-copy .trust-line{margin:14px 0 0;font-size:.78rem;font-weight:500;letter-spacing:.01em;line-height:1.7;color:rgba(255,255,255,.55)}
.jp-copy .trust-line .tl{white-space:nowrap}
.jp-copy .trust-line .sep{display:inline-block;margin:0 9px;color:rgba(255,255,255,.3)}
@media(max-width:900px){.jp-copy .trust-line{margin-top:10px;font-size:.72rem;line-height:1.6}.jp-copy .trust-line .sep{margin:0 6px}}

/* ---- v116: navigator "Playing" state while the opener demo plays itself ---- */
.jnext[data-dir="play"] .i-play{display:block}
.jnext.playing{border-color:rgba(var(--accent-rgb),.6)}
.jnext.playing .jn-i{background:rgba(var(--accent-rgb),.18);color:var(--accent-text)}
.jnext.playing .jn-i svg{animation:jnPulse 1.4s ease-in-out infinite}
@keyframes jnPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.86);opacity:.7}}
@media(max-width:900px){.jnext[data-dir="play"] .i-down{display:none!important}.jnext[data-dir="play"] .i-play{display:block!important}}
@media(prefers-reduced-motion:reduce){.jnext.playing .jn-i svg{animation:none}}

/* ---- v117: Start navigating on the timeline, shown once the year ahead has arrived ---- */
.ev-go{margin:18px auto 0;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .5s ease .15s,transform .6s cubic-bezier(.22,.8,.3,1) .15s}
.ev-stage.arrived .ev-go{opacity:1;transform:none;pointer-events:auto}
@media(max-width:900px){.ev-go{margin-top:14px;opacity:1;transform:none;pointer-events:auto}}
@media(prefers-reduced-motion:reduce){.ev-go{transition:none}}

/* v118: room for a three-line caption above the Start navigating button */
.ev-cap{height:6.2em}
.ev-go{margin-top:8px}