@import url(/fonts/fonts.css);
:root{--ink:#2A2433;--muted:#675E70;--bg:#F4EBDC;--bg2:#EFE3CF;--line:#E2D5BE;--navy:#243A5E;--paper:#FFFDF7;--red:#C8352B;--gold:#F0B93A;--r:22px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Bricolage Grotesque','Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0;color:var(--navy)}
a{color:var(--navy);font-weight:600}
img{display:block;max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:700px;margin:0 auto;padding:0 24px}
/* header */
header.top{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.brand{display:flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.02em;color:var(--navy);text-decoration:none}
.brand img{width:40px;height:40px}
header.top nav a{margin-left:26px;font-weight:500;text-decoration:none;color:var(--muted);font-size:15px}
header.top nav a:hover{color:var(--navy)}
/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:48px 0 72px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--paper);color:var(--navy);border:2px solid var(--line);border-radius:99px;padding:7px 15px;font-size:14px;font-weight:600}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block}
.hero h1{font-size:clamp(40px,6vw,66px);margin:22px 0 18px}
.lede{font-size:20px;line-height:1.55;color:var(--muted);margin:0 0 30px;max-width:520px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;border-radius:16px;padding:15px 24px;text-decoration:none;font-weight:600;font-size:16px;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.alt{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.fine{margin:18px 0 0;font-size:14px;color:var(--muted)}
.fine span{margin-right:14px;white-space:nowrap}
/* phones */
.phone{border-radius:38px;border:9px solid #1E1B26;background:#1E1B26;overflow:hidden;box-shadow:0 30px 60px -24px rgba(36,58,94,.5),0 8px 18px -8px rgba(36,58,94,.25)}
.phone img{width:100%;height:auto}
.duo{position:relative;height:560px;display:flex;justify-content:center}
.duo .phone{position:absolute;width:250px}
.duo .a{left:50%;margin-left:-215px;top:20px;transform:rotate(-4deg)}
.duo .b{left:50%;margin-left:-20px;top:70px;transform:rotate(3deg)}
/* sections */
section{padding:64px 0}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 12px}
h2{font-size:clamp(30px,4.4vw,44px)}
.sec-sub{font-size:19px;color:var(--muted);margin:14px 0 0;max-width:600px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.step{background:var(--paper);border:2.5px solid var(--line);border-radius:var(--r);padding:26px 24px}
.step .n{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.step h3{font-size:24px;margin-bottom:8px}
.step p{margin:0;color:var(--muted)}
.band{background:var(--bg2)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:40px;text-align:center}
.trio .phone{max-width:240px;margin:0 auto}
.trio h3{font-size:22px;margin:22px 0 6px}
.trio p{margin:0;color:var(--muted);font-size:16px}
.priv{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.priv div{padding:22px 0;border-top:3px solid var(--navy)}
.priv h3{font-size:21px;margin-bottom:6px}
.priv p{margin:0;color:var(--muted);font-size:16px}
.cta{background:var(--navy);color:#fff;border-radius:32px;padding:56px 32px;text-align:center;margin:20px 0 40px}
.cta h2{color:#fff;margin-bottom:12px}
.cta p{color:#D3DCEB;margin:0 0 26px;font-size:19px}
.cta .btn{background:#fff;color:var(--navy)}
footer.bot{padding:36px 0 44px;color:var(--muted);font-size:14px;text-align:center}
footer.bot a{font-weight:500;margin:0 8px;text-decoration:none;color:var(--muted)}
footer.bot a:hover{color:var(--navy)}
/* legal and support pages */
main.doc{padding:20px 0 30px}
main.doc h1{font-size:clamp(34px,5vw,46px);margin:10px 0 8px}
main.doc h2{font-size:26px;margin:36px 0 8px}
main.doc p,main.doc li{margin:0 0 12px}
main.doc ul{padding-left:22px;margin:0 0 12px}
main.doc .sub{color:var(--muted);margin:0 0 26px}
.box{background:var(--paper);border:2.5px solid var(--line);border-radius:18px;padding:18px 20px;margin:22px 0}
@media(max-width:860px){
 .hero{grid-template-columns:1fr;gap:20px;padding:24px 0 44px}
 .duo{height:470px}.duo .phone{width:210px}.duo .a{margin-left:-180px}.duo .b{margin-left:-14px}
 .steps,.trio,.priv{grid-template-columns:1fr}
 .trio{gap:44px}
 header.top nav a{margin-left:18px}
 section{padding:44px 0}
}

/* animated paper scenes on the how-it-works cards */
.step{overflow:hidden}
.step .art{position:relative;margin:-26px -24px 20px;aspect-ratio:8/5;overflow:hidden;background:#BFE0EC}
.step .art svg{display:block;width:100%;height:100%}
.step .stmp{position:absolute;right:14px;bottom:12px;width:78px;height:78px;animation:stmpslam 5s ease-in infinite;transform-origin:center;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
@keyframes stmpslam{0%,12%{opacity:0;transform:scale(2.8) rotate(-40deg)}22%,86%{opacity:1;transform:scale(1) rotate(-10deg)}96%,100%{opacity:0;transform:scale(1) rotate(-10deg)}}
@media (prefers-reduced-motion:reduce){.step .stmp{animation:none;opacity:1;transform:rotate(-10deg)}}

/* families: treasure-hunt notebook and sticker sheet */
.fam{background:#DCEBF2;border-radius:34px;padding:44px 32px 40px;margin:56px 0;overflow:hidden}
.fam .sec-sub{max-width:560px}
.famgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;margin-top:34px;align-items:start}
.note{position:relative;background:#FFFDF7;border-radius:10px;box-shadow:0 14px 30px -16px rgba(36,58,94,.55);transform:rotate(-1.2deg);padding-bottom:6px;background-image:repeating-linear-gradient(transparent 0 33px,#E7DFCB 33px 34px)}
.tape{position:absolute;top:-12px;width:78px;height:26px;background:rgba(240,185,58,.75);z-index:3}.t1{left:22px;transform:rotate(-6deg)}.t2{right:22px;transform:rotate(5deg)}
.nart{aspect-ratio:2/1;overflow:hidden;border-radius:10px 10px 0 0;background:#BFE0EC}.nart svg{display:block;width:100%;height:100%}
.nbody{padding:18px 24px 18px}.nk{margin:0;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#C8352B}
.note h3{font-size:26px;margin:2px 0 12px}
.spots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.spots li{display:flex;gap:12px;align-items:center;font-weight:600;color:#243A5E;font-size:16px;line-height:1.3}
.bx{flex:none;width:28px;height:28px;border:3px solid #243A5E;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center}
.bx svg{width:22px;height:22px;fill:none;stroke:#2E9E5B;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30}
.nfoot{margin:14px 0 0;color:#5F5668;font-size:14px}
.sheet{background:#FFFDF7;border-radius:10px;padding:20px 22px 18px;box-shadow:0 14px 30px -16px rgba(36,58,94,.55);transform:rotate(1.1deg)}
.slots{position:relative;aspect-ratio:1/1.04;margin:14px 0 4px}
.slot{position:absolute;aspect-ratio:1;border-radius:50%;border:3px dashed #D3C8AE}
.slot .earn{position:absolute;inset:-3px;display:block;opacity:0;transform-origin:center}
.slot .earn svg{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 4px rgba(0,0,0,.28))}
@keyframes sl0{0%,14%{opacity:0;transform:scale(2.6) rotate(-30deg)}18%,92%{opacity:1;transform:scale(1) rotate(var(--r))}100%{opacity:0;transform:scale(1) rotate(var(--r))}}.earn.s0{animation:sl0 10s cubic-bezier(.2,1.3,.4,1) infinite}
@keyframes tick0{0%,14%{stroke-dashoffset:30}17%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}.spots li:nth-child(1) .bx svg{animation:tick0 10s ease-in-out infinite}
@keyframes sl1{0%,30%{opacity:0;transform:scale(2.6) rotate(-30deg)}34%,92%{opacity:1;transform:scale(1) rotate(var(--r))}100%{opacity:0;transform:scale(1) rotate(var(--r))}}.earn.s1{animation:sl1 10s cubic-bezier(.2,1.3,.4,1) infinite}
@keyframes tick1{0%,30%{stroke-dashoffset:30}33%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}.spots li:nth-child(2) .bx svg{animation:tick1 10s ease-in-out infinite}
@keyframes sl2{0%,46%{opacity:0;transform:scale(2.6) rotate(-30deg)}50%,92%{opacity:1;transform:scale(1) rotate(var(--r))}100%{opacity:0;transform:scale(1) rotate(var(--r))}}.earn.s2{animation:sl2 10s cubic-bezier(.2,1.3,.4,1) infinite}
@keyframes tick2{0%,46%{stroke-dashoffset:30}49%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}.spots li:nth-child(3) .bx svg{animation:tick2 10s ease-in-out infinite}
@keyframes sl3{0%,62%{opacity:0;transform:scale(2.6) rotate(-30deg)}66%,92%{opacity:1;transform:scale(1) rotate(var(--r))}100%{opacity:0;transform:scale(1) rotate(var(--r))}}.earn.s3{animation:sl3 10s cubic-bezier(.2,1.3,.4,1) infinite}
@keyframes tick3{0%,62%{stroke-dashoffset:30}65%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}.spots li:nth-child(4) .bx svg{animation:tick3 10s ease-in-out infinite}
@keyframes sl4{0%,78%{opacity:0;transform:scale(2.6) rotate(-30deg)}82%,92%{opacity:1;transform:scale(1) rotate(var(--r))}100%{opacity:0;transform:scale(1) rotate(var(--r))}}.earn.s4{animation:sl4 10s cubic-bezier(.2,1.3,.4,1) infinite}
/* tips cards animation */
.tip{display:block;width:100%;height:100%}
.tr{animation:trdrive 9s linear infinite}@keyframes trdrive{from{transform:translateX(70px)}to{transform:translateX(640px)}}.puf.p2{animation-delay:.6s}
.puf{animation:puff 1.2s ease-out infinite;transform-box:fill-box;transform-origin:center}@keyframes puff{0%{opacity:.9;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(-12px,-34px) scale(1.8)}}
.sunarc{transform:translate(160px,170px);animation:sunsweep 8s ease-in-out infinite alternate}@keyframes sunsweep{from{transform:translate(160px,170px) rotate(-62deg)}to{transform:translate(160px,170px) rotate(62deg)}}
.hm{transform-origin:160px 118px;animation:an-spin 6s linear infinite}.hh{transform-origin:160px 118px;animation:an-spin 72s linear infinite}
.tk{transform-origin:160px 100px;animation:tkwob 4s ease-in-out infinite}@keyframes tkwob{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-6px)}}
@media (max-width:760px){.fam{padding:32px 18px 28px;border-radius:28px}.famgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.bx svg{animation:none!important;stroke-dashoffset:0}.slot .earn{animation:none!important;opacity:1;transform:rotate(var(--r))}}

/* breadth of landmarks: big number, map and badges coming off */
.breadth{margin:56px 0 8px}
.bgeo{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;align-items:center}
.big{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(96px,22vw,168px);line-height:.88;letter-spacing:-.04em;color:#243A5E;margin:6px 0 6px}
.big sup{font-size:.5em;vertical-align:top;color:#C8352B;margin-left:2px}
.bnum h2{font-size:clamp(26px,5vw,36px);margin-bottom:12px}
.bmap{margin-top:14px}.bmap svg{display:block;width:100%;height:auto;max-height:620px;overflow:visible}
.pop .pb{transform-box:fill-box;transform-origin:center;animation:popoff 9s cubic-bezier(.2,1.2,.4,1) infinite;animation-delay:calc(var(--i)*.7s);opacity:0;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
.pop .leader{opacity:0;animation:leadfade 9s ease-in-out infinite;animation-delay:calc(var(--i)*.7s)}
@keyframes popoff{0%,6%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.15)}20%{opacity:1;transform:translate(0,0) scale(1.08) rotate(-4deg)}26%,82%{opacity:1;transform:translate(0,-3px) scale(1) rotate(2deg)}94%,100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.15)}}
@keyframes leadfade{0%,12%{opacity:0}24%,80%{opacity:.7}92%,100%{opacity:0}}
@media (max-width:760px){.bgeo{grid-template-columns:1fr}.bmap{max-width:420px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){.pop .pb,.pop .leader{animation:none;opacity:1}}

/* the 260+ number rolls up like an odometer when it scrolls into view */
.big{--oh:.88em}
.odo{display:inline-block;height:var(--oh);overflow:hidden;vertical-align:top;line-height:var(--oh)}
.odos{display:block;transition:transform 1.6s cubic-bezier(.16,.84,.24,1);transform:translateY(0)}
.odos b{display:block;height:var(--oh);line-height:var(--oh);font-weight:inherit}