/* Layout: follows the reference — saturated sky-blue hero, white nav, huge centered headline,
   one black pill CTA, a wide translucent product frame sinking into clouds, then a logo row
   and calm white sections. Day/night: theme.js sets html[data-theme]; the night palette and sky live in the
   "Sky" and "Night" blocks at the end. */
:root{
  color-scheme: light;
  --sky-top:#3E68E4; --sky-2:#5A7FEA; --sky-mid:#7E9FF0; --sky-low:#C9D6FA; --white:#FFFFFF; --page:#FFFFFF;
  --cloud:#FFFFFF; --cloud-edge:rgba(255,255,255,.85);
  --ink:#0B0C0E; --text:#1A1D24; --text-2:#5B6270; --text-3:#9097A3; --line:#E6E9F0; --soft:#F4F6FB;
  --blue:#3E68E4; --blue-soft:#EAF0FF; --amber:#F29A3C; --mint:#2DB892;
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,64px);
}
*{box-sizing:border-box}
html{background:var(--page)}
body{margin:0;background:var(--page);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
h1,h2,h3{margin:0;font-weight:500;text-wrap:balance;letter-spacing:-.035em}
p{margin:0}
.wrap{padding-inline:var(--gutter);max-width:1400px;margin-inline:auto}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.num{font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;gap:10px;border-radius:14px;font:500 17px/1 var(--font);padding:18px 28px;white-space:nowrap;cursor:pointer;border:1px solid transparent}
.btn-black{background:var(--ink);color:#fff}
.btn-black:hover{background:#23262d}
.btn-line{border-color:rgba(255,255,255,.55);color:#fff;padding:16px 24px}
.btn-line:hover{background:rgba(255,255,255,.12)}
.btn svg{flex:none}
/* Platform marks on download buttons (official Apple / Windows logos, via Simple Icons). #dlMain holds both and shows the one matching its data-dl. */
[data-dl="mac"] .os-win,[data-dl="win"] .os-mac{display:none}
.btn .os-mac{margin-top:-3px}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-2) 28%,var(--sky-mid) 50%,var(--sky-low) 72%,var(--page) 92%)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-block:30px;color:#fff}
.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:600;letter-spacing:-.02em}
.brand .logo{height:38px;width:auto;display:block}
@media (max-width:760px){.brand .logo{height:32px}}
.nav ul{display:flex;gap:clamp(20px,3vw,42px);list-style:none;margin:0;padding:0;font-size:17px;font-weight:500}
.nav ul a{opacity:.92}.nav ul a:hover{opacity:1}
.nav-end{justify-self:end;display:flex;align-items:center;gap:10px}
.hero-copy{display:grid;justify-items:center;text-align:center;gap:26px;padding-top:clamp(40px,7vw,96px);color:#fff}
.hero h1{font-size:clamp(48px,7.6vw,108px);line-height:1.02;max-width:12ch}
.hero .sub{font-size:clamp(17px,1.5vw,19px);max-width:46ch;opacity:.92}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:8px}
.meta{font-size:14px;opacity:.85}
.meta a{text-decoration:underline;text-underline-offset:3px}

.stage{position:relative;margin-top:clamp(56px,7vw,90px);padding-bottom:clamp(120px,14vw,220px)}
.frame{position:relative;max-width:1100px;margin-inline:auto;padding:14px;border-radius:30px;
  background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.6)}
.frame-in{border-radius:20px;background:#F6F7FA;overflow:hidden;display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2.4vw,32px);align-items:start;padding:clamp(18px,3vw,40px)}
.panel{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:14px;font-size:14px;min-width:0}
.panel h4{margin:0;font-size:14px;font-weight:600;color:var(--text)}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--soft)}
.row.on{background:var(--blue-soft);color:var(--blue)}
.row small{color:var(--text-3);font-size:12px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px}
.chip.live{background:#E4F6F0;color:#16856A}
.big{font-size:34px;font-weight:500;letter-spacing:-.03em;line-height:1}
.big small{font-size:13px;color:var(--text-3);font-weight:400;letter-spacing:0;margin-left:6px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--soft);font-size:12.5px;text-align:center;font-weight:500;color:var(--text-2)}
.seg span{padding:7px 0;border-radius:9px}.seg .on{background:var(--white);color:var(--text);border:1px solid var(--line)}
.bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;width:62%;background:var(--blue);border-radius:inherit}
.stops{display:grid;gap:10px;font-size:13px}
.stops div{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center}
.stops b{width:10px;height:10px;border-radius:50%;border:2px solid var(--blue)}
.stops div:last-child b{background:var(--amber);border-color:var(--amber)}
.stops span:last-child{color:var(--text-3)}

/* phone */
.phone{width:clamp(220px,24vw,290px);aspect-ratio:9/19.5;padding:9px;border-radius:44px;background:#15171B;position:relative;box-shadow:0 40px 80px -30px rgba(30,50,110,.45)}
.phone::before{content:"";position:absolute;top:19px;left:50%;translate:-50% 0;width:30%;height:22px;border-radius:999px;background:#000;z-index:3}
.screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#EEF1F6}
.screen svg.map{position:absolute;inset:0;width:100%;height:100%}
.s-search{position:absolute;top:52px;left:12px;right:12px;display:flex;align-items:center;gap:8px;background:var(--white);border-radius:14px;padding:10px 12px;font-size:13px;font-weight:500;border:1px solid var(--line)}
.s-sheet{position:absolute;left:8px;right:8px;bottom:8px;background:var(--white);border-radius:26px;padding:16px;display:grid;gap:10px;border:1px solid var(--line)}
.s-sheet .t{display:flex;justify-content:space-between;align-items:center}
.s-sheet strong{font-size:17px;font-weight:600;letter-spacing:-.02em}
.s-sheet small{font-size:11.5px;color:var(--text-3)}
.s-stop{background:var(--ink);color:var(--white);text-align:center;border-radius:12px;padding:10px;font-size:13px;font-weight:500}

/* clouds */
.clouds{position:absolute;left:-8%;right:-8%;bottom:-70px;height:72%;pointer-events:none;z-index:2;filter:url(#cloudy)}
.clouds span{position:absolute;border-radius:50%;opacity:var(--o,1);background:radial-gradient(closest-side,var(--cloud) 58%,var(--cloud-edge) 72%,transparent)}
/* Hero clouds thin out in the middle so the phone shows through; full strength at the sides */
#clouds1{-webkit-mask-image:linear-gradient(90deg,#000 18%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.5) 62%,#000 82%);mask-image:linear-gradient(90deg,#000 18%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.5) 62%,#000 82%)}
.fog{position:absolute;left:0;right:0;bottom:0;height:26%;z-index:3;background:linear-gradient(180deg,transparent,var(--page) 70%);pointer-events:none}

/* ---------- Logos ---------- */
.logos{display:grid;justify-items:center;gap:40px;padding-block:24px clamp(40px,5vw,70px);text-align:center}
.apps{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(28px,7vw,110px);color:#A3A9B4;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.02em}
.apps span{display:flex;align-items:center;gap:12px}
/* Logo row scrolls sideways on a loop: main.js duplicates the items, the track slides by half its width */
.marquee{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .apps{flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;animation:marquee 55s linear infinite}
.marquee .apps span{padding-inline:clamp(22px,3.4vw,48px);white-space:nowrap}
.marquee:hover .apps{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
/* Official marks: Google Maps is its inline SVG pin; Apple Maps, Find My and Life360 are their official App Store icons (assets/logos/), rounded like iOS. */
.apps .app-ic{width:40px;height:40px;border-radius:9px;flex:none}

/* ---------- Sections ---------- */
.section{padding-block:clamp(80px,10vw,140px)}
#teams,#pricing,#faq{scroll-margin-top:100px}
#modes{scroll-margin-top:196px}
.head{display:grid;justify-items:center;text-align:center;gap:18px;margin-bottom:clamp(40px,6vw,72px)}
.head h2{font-size:clamp(36px,4.6vw,64px);line-height:1.04;max-width:16ch}
.head p{color:var(--text-2);max-width:52ch}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{background:var(--soft);border-radius:24px;padding:clamp(22px,2.6vw,32px);display:grid;gap:14px;align-content:start;min-width:0}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--white);border:1px solid var(--line)}
.card h3{font-size:22px;line-height:1.15}
.card p{color:var(--text-2);font-size:16px}
.card .demo{margin-top:8px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:10px;font-size:13px}

.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.aud{border:1px solid var(--line);border-radius:24px;padding:clamp(24px,3vw,40px);display:grid;gap:18px;align-content:start}
.aud h3{font-size:clamp(26px,2.6vw,34px);line-height:1.1}
.aud ul{list-style:none;margin:0;padding:0;display:grid}
.aud li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding-block:14px;border-top:1px solid var(--line);color:var(--text-2)}
.aud li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot);margin-top:.6em}

.faq{max-width:820px;margin-inline:auto;display:grid}
.faq details{border-top:1px solid var(--line);padding-block:22px}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-size:19px;font-weight:500;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--text-3);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--text-2);margin-top:12px;max-width:62ch}

/* ---------- Final CTA ---------- */
/* Final download section sits on the page itself, like the FAQ (no box) */
.final{display:grid;justify-items:center;gap:24px;text-align:center;padding:clamp(40px,6vw,80px) var(--gutter) clamp(80px,10vw,140px)}
.final h2{font-size:clamp(40px,6vw,84px);line-height:1.02;max-width:13ch}
.final p{color:var(--text-2);max-width:40ch}
/* Sky-blue card (used by thanks.html) */
.sky-card{position:relative;overflow:hidden;isolation:isolate;margin:0 var(--gutter) var(--gutter);border-radius:32px;
  background:linear-gradient(180deg,var(--sky-top),var(--sky-mid) 65%,var(--sky-low));color:#fff;text-align:center;
  padding:clamp(80px,10vw,130px) 20px clamp(140px,14vw,200px);display:grid;justify-items:center;gap:24px}
.sky-card h2{font-size:clamp(40px,6vw,84px);line-height:1.02;max-width:13ch}
.sky-card p{opacity:.92;max-width:40ch}
footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-block:28px 40px;font-size:14px;color:var(--text-3)}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
footer a:hover{color:var(--text)}

@media (max-width:960px){
  .frame-in{grid-template-columns:1fr;justify-items:center}
  .frame-in .panel{display:none}
  .grid3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav{grid-template-columns:1fr auto}
  .nav ul{display:none}
  .nav .btn{padding:12px 16px;font-size:15px}
}

/* ---------- Motion ---------- */
.ldot{width:6px;height:6px;border-radius:50%;background:currentColor;position:relative;display:inline-block}
.ldot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid currentColor;animation:ping 1.8s cubic-bezier(.22,1,.36,1) infinite}
@keyframes ping{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.rise{animation:rise 1s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.phone{animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.dest .ring,.halo2{transform-box:fill-box;transform-origin:center;animation:ring 2s ease-out infinite}
.halo2{animation-duration:1.6s}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.stops div{transition:color .4s}
.stops div.passed b{background:var(--blue)}
.stops div.here span:nth-child(2){color:var(--blue);font-weight:600}
.seg span{transition:background .35s,color .35s}
.big span{display:inline-block;min-width:1.2em}
#prog{transition:none}
.clouds span{animation:drift var(--t,60s) ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(calc(var(--dx,4%) * -1))}to{transform:translateX(var(--dx,4%))}}
.mini{height:90px;border-radius:12px;background:#EEF1F6;overflow:hidden}
.mini svg{width:100%;height:100%;display:block}
.pin{animation:drop 3.2s cubic-bezier(.22,1,.36,1) infinite}
.shadow{transform-box:fill-box;transform-origin:center;animation:shadow 3.2s cubic-bezier(.22,1,.36,1) infinite}
@keyframes drop{0%{transform:translateY(-40px);opacity:0}25%{transform:none;opacity:1}85%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes shadow{0%{transform:scale(.3);opacity:0}25%{transform:none;opacity:.15}85%{opacity:.15}100%{opacity:0}}
.track{position:relative;height:4px;border-radius:999px;background:var(--line);display:block!important;margin:4px 0 6px}
.track i{position:absolute;inset:0 auto 0 0;width:0;background:var(--blue);border-radius:inherit;animation:fill 5s linear infinite}
.track .runner{position:absolute;top:50%;left:0;width:12px!important;height:12px!important;margin:-6px 0 0 -6px;border-radius:50%;background:var(--white)!important;border:3px solid var(--blue);animation:run 5s linear infinite}
@keyframes fill{to{width:100%}}
@keyframes run{to{left:100%}}
.reveal.pre{opacity:0;transform:translateY(28px)}
.reveal{transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.grid3 .reveal:nth-child(2),.split .reveal:nth-child(2){transition-delay:.1s}
.grid3 .reveal:nth-child(3){transition-delay:.2s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal.pre{opacity:1;transform:none}
  .marquee{-webkit-mask-image:none;mask-image:none}.marquee .apps{flex-wrap:wrap;justify-content:center;width:auto;row-gap:18px}.marquee .apps [aria-hidden="true"]{display:none}}

/* ---------- Pricing ---------- */
.pro-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:linear-gradient(135deg,#3E68E4,#7E9FF0);color:#fff;vertical-align:middle;margin-left:6px}
.explain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:980px;margin:0 auto 40px}
.explain>div{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:var(--soft);font-size:15px;color:var(--text-2);min-width:0}
.explain b{display:block;color:var(--text);font-weight:600}
.ex-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--white);border:1px solid var(--line);color:var(--c)}
.toggle-wrap{display:flex;justify-content:center;margin-bottom:36px}
.toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
.toggle button{position:relative;z-index:1;border:0;background:none;font:500 16px var(--font);color:var(--text-2);padding:12px 26px;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .3s}
.toggle button[aria-checked="true"]{color:var(--text)}
.toggle .knob{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--white);border:1px solid var(--line);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.toggle.pro .knob{transform:translateX(100%)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:22px;padding:clamp(24px,2.6vw,34px);border-radius:26px;border:1px solid var(--line);background:var(--white);min-width:0}
.plan.feat{background:linear-gradient(180deg,#EEF3FF,#fff 60%);border-color:#C9D6FA}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.plan h3{font-size:22px}
.ptag{font-size:12.5px;font-weight:500;color:var(--text-2);padding:5px 10px;border-radius:999px;background:var(--soft)}
.plan.feat .ptag{background:var(--white);color:var(--blue)}
.price{display:flex;align-items:baseline;gap:4px}
.price .cur{font-size:24px;font-weight:500;color:var(--text-2);align-self:flex-start;margin-top:8px}
.price .amt{font-size:clamp(46px,4.4vw,60px);font-weight:500;letter-spacing:-.04em;line-height:1;display:inline-block;transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1)}
.price .amt.swap{opacity:0;transform:translateY(-10px)}
.price .per{font-size:15px;color:var(--text-3);margin-left:4px}
.list{list-style:none;margin:0;padding:0;display:grid;gap:12px;align-content:start;font-size:15.5px}
.list li{display:flex;gap:10px;align-items:center}
[hidden]{display:none!important}
.list .ck{flex:none}
.list .yes .ck{color:var(--mint)}
.list .yes.pro-only .ck{color:var(--blue)}
.list .yes.pro-only span{color:var(--text);font-weight:500}
.list .no{color:var(--text-3)}
.list .no span{text-decoration:line-through;text-decoration-color:rgba(144,151,163,.5)}
.list li{animation:none}
.plans.flip .list li{animation:li .5s cubic-bezier(.22,1,.36,1) both}
.plans.flip .list li:nth-child(2){animation-delay:.05s}.plans.flip .list li:nth-child(3){animation-delay:.1s}
@keyframes li{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.plan-cta{justify-content:center;width:100%}
.btn-soft{background:var(--soft);color:var(--text);border-color:var(--line)}
.btn-soft:hover{background:#EBEEF5}
.addon-buy{color:var(--blue);font-weight:500;white-space:nowrap}
.addon-buy:hover{text-decoration:underline;text-underline-offset:3px}
.addon{display:flex;gap:14px;align-items:center;max-width:720px;margin:28px auto 0;padding:16px 20px;border-radius:18px;border:1px dashed #C9D6FA;background:#F8FAFF;font-size:15.5px;color:var(--text-2)}
.addon b{color:var(--text);font-weight:600}
.fine{text-align:center;margin-top:18px;font-size:14px;color:var(--text-3)}
@media (max-width:960px){.plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}.explain{grid-template-columns:1fr;max-width:520px}}
@media (max-width:480px){.explain>div{padding:12px 14px;font-size:14px}.explain{gap:8px}.toggle button{padding:11px 18px}.addon{align-items:flex-start}}

/* ---------- Sky: sun (day), moon + stars (night), cloud entrance, rain ---------- */
.sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sun,.moon{position:absolute;top:clamp(84px,11vw,150px);right:clamp(20px,12vw,220px);width:clamp(64px,7.5vw,112px);aspect-ratio:1}
.sun i{position:absolute;border-radius:50%}
.sun .core{inset:0;background:radial-gradient(circle at 42% 40%,#FFFDF4 0 30%,#FFF1C2 58%,#FFDC7A 100%);box-shadow:0 0 40px 10px rgba(255,232,160,.55),0 0 120px 40px rgba(255,236,190,.28)}
.sun .glow{inset:-260%;background:radial-gradient(closest-side,rgba(255,244,214,.55),rgba(255,240,205,.18) 45%,transparent 72%)}
/* Light rays: a turning fan of soft wedges, faded out towards the edges */
.sun .rays{inset:-700%;background:repeating-conic-gradient(from 0deg,rgba(255,250,232,.26) 0deg 3.5deg,transparent 3.5deg 11deg,rgba(255,250,232,.12) 11deg 13deg,transparent 13deg 24deg);
  -webkit-mask:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.55) 30%,transparent 72%);mask:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.55) 30%,transparent 72%)}
.moon{display:none;border-radius:50%;
  background:radial-gradient(circle at 30% 34%,rgba(170,176,196,.35) 0 7%,transparent 8%),radial-gradient(circle at 62% 60%,rgba(170,176,196,.28) 0 10%,transparent 11%),radial-gradient(circle at 58% 28%,rgba(170,176,196,.22) 0 5%,transparent 6%),radial-gradient(circle at 40% 38%,#FBF8EE,#E3E0D4 70%,#CFCBBE);
  box-shadow:0 0 30px 6px rgba(214,224,255,.35),0 0 110px 40px rgba(150,170,240,.16);opacity:calc(1 - var(--rain,0) * .6)}
.stars{position:absolute;inset:0 0 35% 0;display:none}
.stars i{position:absolute;width:var(--s,2px);aspect-ratio:1;border-radius:50%;background:#fff;opacity:var(--a,.6);box-shadow:0 0 6px rgba(255,255,255,.6)}
.rain{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:none}

/* Entrances: the sun rises and its rays fan in; clouds billow in one by one (theme.js adds .sky-anim to <html>; sky.js adds .in) */
.sun .core,.sun .glow,.moon{animation:rise-sky 1.8s cubic-bezier(.22,1,.36,1) both}
.sun .rays{animation:rays-in 2.4s cubic-bezier(.22,1,.36,1) .5s both,spin 140s linear 2.9s infinite}
@keyframes rise-sky{from{opacity:0;translate:0 70px;scale:.7}}
@keyframes rays-in{from{opacity:0;scale:.5;rotate:-12deg}}
@keyframes spin{to{rotate:360deg}}
.clouds span{transition:opacity 1.6s cubic-bezier(.22,1,.36,1),translate 1.8s cubic-bezier(.22,1,.36,1),scale 1.8s cubic-bezier(.22,1,.36,1);transition-delay:var(--in,0s)}
.sky-anim .clouds:not(.in) span{opacity:0;translate:0 60px;scale:.75}
.stars i{animation:twinkle var(--tw,4s) ease-in-out var(--td,0s) infinite alternate}
@keyframes twinkle{to{opacity:calc(var(--a,.6) * .25)}}

/* ---------- Night ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --sky-top:#060A1A; --sky-2:#0B1330; --sky-mid:#141E45; --sky-low:#1C2752; --page:#0A0C12;
  --white:#151922; --soft:#12151D; --line:#252A36; --text:#E9ECF3; --text-2:#A6ADBB; --text-3:#6E7684;
  --blue:#7394F4; --blue-soft:#1A2544;
  --cloud:#5A6690; --cloud-edge:rgba(90,102,144,.8);
  /* The night sky sits on the page canvas so the rain (a fixed canvas at z-index -1) falls in front of it */
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-2) 28%,var(--sky-mid) 50%,var(--sky-low) 72%,var(--page) 92%) top / 100% var(--hero-h,100vh) no-repeat,var(--page);
}
[data-theme="dark"] body{background:transparent}
[data-theme="dark"] .hero{background:transparent}
[data-theme="dark"] .sun{display:none}
[data-theme="dark"] .moon,[data-theme="dark"] .stars,[data-theme="dark"] .rain{display:block}
[data-theme="dark"] .clouds{filter:url(#cloudy) brightness(calc(1 - var(--rain,0) * .3))}
/* Thinner mist at night so the rain shows just under the clouds */
[data-theme="dark"] .fog{background:linear-gradient(180deg,transparent,rgba(10,12,18,.5) 55%,var(--page) 100%)}
[data-theme="dark"] .frame{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
[data-theme="dark"] .phone{box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
[data-theme="dark"] .btn-black{border-color:rgba(255,255,255,.16)}
[data-theme="dark"] .btn-black:hover{background:#1A1D24}
[data-theme="dark"] .btn-soft:hover{background:#1C2130}
[data-theme="dark"] .plan.feat{background:linear-gradient(180deg,#172140,var(--white) 60%);border-color:#2C3A66}
[data-theme="dark"] .addon{background:#111726;border-color:#2C3A66}
[data-theme="dark"] .apps{color:#7C8494}
/* Outlined tiles get a solid fill at night so rain passes behind them (it splashes on their top edge) */
[data-theme="dark"] .aud{background:var(--page)}
/* Product mockups keep their daylight look, like a phone screen */
[data-theme="dark"] .frame-in,[data-theme="dark"] .card .demo{
  color-scheme:light;--white:#FFFFFF;--soft:#F4F6FB;--line:#E6E9F0;--text:#1A1D24;--text-2:#5B6270;--text-3:#9097A3;--blue:#3E68E4;--blue-soft:#EAF0FF;color:var(--text)}
[data-theme="dark"] .card .ic,[data-theme="dark"] .ex-ic{background:#1B2030}