/* Lonera landing. Palette from the logo:
   mint #6EF0A0 (decorative only), teal #14B8A6, cyan-blue #0EA5D6, navy #0B3354.
   Text colours: ink #0B3354, body #33465A, muted #566577, teal ink #08706A, blue ink #0B6B91. */
html{scroll-behavior:auto}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:#FBF6EE;color:#0B3354;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif}
a{color:#08706A}a:hover{color:#0B3354}
.lonera *,.lonera *::before,.lonera *::after{box-sizing:border-box}
.lonera h1,.lonera h2,.lonera h3,.lonera p{margin:0;text-wrap:pretty}
.lonera h1,.lonera h2{text-wrap:balance}
.lonera [id]{scroll-margin-top:88px}
:focus-visible{outline:3px solid #0B3354;outline-offset:3px;border-radius:6px}
.dark :focus-visible,.dark:focus-visible{outline-color:#F3EDE3}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#0B3354;color:#F3EDE3;padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{top:12px;color:#F3EDE3}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
.navlink{color:#0B3354;text-decoration:none;font-weight:600;font-size:15px;padding:10px 14px;border-radius:999px;transition:background .2s}
.navlink:hover{background:#F0E9DD;color:#0B3354}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font:inherit;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;border:0;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background .2s}
.pill:hover{transform:translateY(-2px)}
.pill[disabled]{cursor:not-allowed;opacity:.7;transform:none}
.pill-brand{background:#14B8A6;color:#0B3354;box-shadow:0 10px 24px -14px rgba(8,112,106,.8)}
.pill-brand:hover{background:#19CBB8;color:#0B3354}
.pill-line{border:1.5px solid #0B3354;color:#0B3354;background:transparent}
.pill-line:hover{background:#0B3354;color:#FBF6EE}
.pill-cream{background:#F3EDE3;color:#0B3354}
.pill-cream:hover{background:#fff;color:#0B3354}
.kick{font-size:14px;font-weight:800;letter-spacing:.12em;color:#08706A}
.dark .kick{color:#5FD9CB}
.h2{font-size:clamp(40px,5.4vw,74px);line-height:.98;letter-spacing:-.04em;font-weight:800}
.lead{font-size:18px;line-height:1.58;color:#33465A}
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.st>*{opacity:0}
.in .st>*,.st.in>*{animation:pop .9s cubic-bezier(.16,1,.3,1) both}
.st>*:nth-child(2){animation-delay:.1s}.st>*:nth-child(3){animation-delay:.2s}.st>*:nth-child(4){animation-delay:.3s}.st>*:nth-child(5){animation-delay:.4s}.st>*:nth-child(6){animation-delay:.5s}
.boot>*{animation:pop 1s cubic-bezier(.16,1,.3,1) both}
.boot>*:nth-child(2){animation-delay:.1s}.boot>*:nth-child(3){animation-delay:.2s}.boot>*:nth-child(4){animation-delay:.3s}.boot>*:nth-child(5){animation-delay:.4s}
.bubbles{animation:bob 7s ease-in-out infinite}
.pop1{animation:pop 1s cubic-bezier(.16,1,.3,1) .7s both}.pop2{animation:pop 1s cubic-bezier(.16,1,.3,1) 1.2s both}.pop3{animation:pop 1s cubic-bezier(.16,1,.3,1) 1.7s both}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ripple{0%{transform:scale(.85);opacity:.5}100%{transform:scale(2);opacity:0}}
@keyframes livedot{0%,100%{box-shadow:0 0 0 0 rgba(110,240,160,.6)}50%{box-shadow:0 0 0 8px rgba(110,240,160,0)}}
@keyframes swash{from{clip-path:inset(-50% 100% -50% 0)}to{clip-path:inset(-50% 0 -50% 0)}}
@keyframes fillA{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fillB{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.live{animation:livedot 2s ease-in-out infinite}
.ring1{animation:ripple 2.4s ease-out infinite}.ring2{animation:ripple 2.4s ease-out 1.2s infinite}
.swash{animation:swash 1.1s cubic-bezier(.65,0,.35,1) .9s both}
.fillA{transform-origin:left;animation:fillA 4s linear both}
.fillB{transform-origin:left;animation:fillB 4s linear both}
.fillStop{transform:scaleX(1)}
.phone{position:relative;border-radius:54px;padding:11px;background:#082A45;box-shadow:inset 0 0 0 1.5px #1F4A6B,0 50px 90px -40px rgba(8,42,69,.55),0 22px 40px -22px rgba(8,42,69,.45)}
.phone::after{content:"";position:absolute;top:21px;left:50%;width:30%;height:25px;transform:translateX(-50%);background:#03121E;border-radius:20px;z-index:3}
.phone.sm{border-radius:42px;padding:8px}.phone.sm::after{top:15px;height:18px}
.tile{position:relative;overflow:hidden;border-radius:36px}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap}
.fchip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.icon-dot{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%}
.av{display:block;border-radius:50%;object-fit:cover;flex-shrink:0}
.bar>span{display:block;height:100%;border-radius:99px;transition:width .9s cubic-bezier(.16,1,.3,1),background .6s}
.ringc{transition:stroke-dasharray 1s cubic-bezier(.16,1,.3,1),stroke .6s}
.sosring{transition:stroke-dashoffset .35s ease-out}.sosring.on{transition:stroke-dashoffset 3s linear}
.sosbtn{transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s}.sosbtn:active{transform:scale(.97)}
.fade{transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.only-m{display:none}

/* A/B hero variants. Default (no JS) shows A. */
.va{display:block}.vb{display:none}
html[data-variant="b"] .va{display:none}
html[data-variant="b"] .vb{display:block}

/* CSS-built app screens (container query units keep them proportional) */
.phone,.hero-col{container-type:inline-size}
.span2{grid-column:span 2}
.scr{position:relative;aspect-ratio:390/844;border-radius:44px;overflow:hidden;background:#FBF6EE;color:#0B3354;padding:15cqw 5.5cqw 5cqw;display:flex;flex-direction:column;gap:3.4cqw;font-size:4cqw;line-height:1.3}
.phone.sm .scr{border-radius:34px}
.scr-abs{position:absolute;inset:0;transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.m-pill{display:inline-flex;align-items:center;gap:2cqw;align-self:flex-start;padding:1.4cqw 3.4cqw 1.4cqw 1.6cqw;border-radius:999px;background:#fff;border:1px solid #DCD3C3;font-size:3.7cqw;white-space:nowrap}
.m-dot{display:flex;align-items:center;justify-content:center;width:6cqw;height:6cqw;border-radius:50%;flex-shrink:0}
.m-title{font-size:8.6cqw;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.m-sub{font-size:3.7cqw;color:#566577}
.m-card{background:#0B3354;color:#F3EDE3;border-radius:5cqw;padding:4.4cqw;display:flex;flex-direction:column;gap:2cqw}
.m-card b{font-size:5.4cqw;letter-spacing:-.02em}
.m-card small{font-size:3.5cqw;color:#C9D8E4}
.m-btns{display:flex;gap:2.4cqw;margin-top:1.4cqw}
.m-btn{flex:1;text-align:center;padding:2.8cqw 1cqw;border-radius:999px;font-size:3.8cqw;font-weight:700;border:1px solid rgba(243,237,227,.5);color:#F3EDE3}
.m-btn.on{background:#14B8A6;border-color:#14B8A6;color:#0B3354}
.m-row{display:flex;align-items:center;gap:3cqw;background:#fff;border:1px solid #E7E0D3;border-radius:4.4cqw;padding:3.2cqw}
.m-row b{font-size:4cqw}
.m-row small{display:block;font-size:3.4cqw;color:#566577}
.m-ring{position:relative;width:12cqw;height:12cqw;flex-shrink:0}
.m-ring svg{display:block;width:100%;height:100%}
.m-ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:4cqw;font-weight:800}
.m-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw;padding:1cqw;border-radius:999px;background:#F0E9DD}
.m-seg span{text-align:center;padding:2.2cqw 0;border-radius:999px;font-size:3.4cqw;font-weight:700}
.m-seg span.on{background:#0B3354;color:#FBF6EE}
.m-toggle{width:11cqw;height:6.4cqw;border-radius:999px;background:#14B8A6;position:relative;flex-shrink:0}
.m-toggle::after{content:"";position:absolute;top:.8cqw;right:.8cqw;width:4.8cqw;height:4.8cqw;border-radius:50%;background:#fff}
.m-toggle.off{background:#8A96A3}.m-toggle.off::after{right:auto;left:.8cqw}
.m-map{flex:1;min-height:24cqw;border-radius:5cqw;border:1px solid #CBDDE6;background:radial-gradient(circle at 50% 38%,#0B3354 0 1.5cqw,#fff 1.6cqw 2.6cqw,transparent 2.7cqw),radial-gradient(circle at 50% 38%,rgba(14,148,136,.4) 0 10cqw,transparent 10.2cqw),radial-gradient(circle at 18% 20%,rgba(14,148,136,.3) 0 7cqw,transparent 7.2cqw),radial-gradient(circle at 82% 70%,rgba(217,146,26,.35) 0 7cqw,transparent 7.2cqw),url(/assets/map-phone.jpg) 50% 34%/cover no-repeat}
.scr::after{content:"";position:absolute;left:50%;bottom:2cqw;width:34cqw;height:1.3cqw;transform:translateX(-50%);border-radius:99px;background:#0B3354;opacity:.8}
.m-big{font-size:15cqw;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.m-note{background:#DFF9EB;border-radius:4.4cqw;padding:3.4cqw;color:#0B3354;font-size:3.8cqw}
.m-note b{color:#075E42}

/* Map tile */
.mapsvg{position:absolute;inset:0;width:100%;height:100%}

/* Waitlist and forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field legend{font-size:15px;font-weight:700;color:#0B3354}
.field .hint{font-size:13px;font-weight:500;color:#566577}
.input{width:100%;min-height:52px;border:1.5px solid #8A96A3;border-radius:14px;padding:0 14px;font:inherit;font-size:16px;color:#0B3354;background:#fff}
.input::placeholder{color:#566577;opacity:1}
.input:focus-visible{outline:3px solid #0B3354;outline-offset:2px}
.input[aria-invalid="true"]{border-color:#B5362B;background:#FFF7F6}
.err{font-size:14px;font-weight:600;color:#B5362B;min-height:0}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.vote{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid #E7E0D3;border-radius:28px;padding:26px}
.vote h3{font-size:22px;line-height:1.15;letter-spacing:-.02em;font-weight:800}
.vote p{font-size:16px;line-height:1.55;color:#33465A}
.vote button{margin-top:auto;align-self:flex-start;min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid #0B3354;background:transparent;color:#0B3354;font:inherit;font-size:15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s}
.vote button:hover{background:#F0E9DD}
.vote button[aria-pressed="true"]{background:#0B3354;color:#F3EDE3}
.vote button .tick{display:none}
.vote button[aria-pressed="true"] .tick{display:inline}
.vote.on{border-color:#14B8A6;box-shadow:0 0 0 2px #14B8A6}

@media (max-width:960px){
  .only-d{display:none !important}
  .only-m{display:block}
  .g2{grid-template-columns:minmax(0,1fr) !important}
  .hero-media{min-height:560px !important;width:100%;max-width:620px;margin:0 auto}
  .story-step{min-height:0 !important;padding:28px 0 !important}
  .sos-grid{padding:40px 22px !important}
}
@media (max-width:960px){.span2{grid-column:auto !important}}
@media (min-width:961px) and (max-width:1120px){.hero-phone{width:205px !important;left:-20px !important}}
@media (max-width:560px){
  .hero-phone{width:160px !important;left:-6px !important;bottom:-36px !important}
  .bubbles{top:auto !important;bottom:22px !important;right:10px !important;left:auto !important;width:184px !important}
  .bubbles .pop3{display:none}
  .bubbles .pop1>div{height:auto !important;min-height:44px;padding:6px 12px 6px 8px !important;white-space:normal !important;flex-wrap:wrap}
  .bigpill{transform:scale(1.15) !important}
}
@media (prefers-reduced-motion:reduce){
  .lonera *{animation:none !important;transition:none !important}
  .rv,.st>*{opacity:1 !important;transform:none !important}
}

/* Launch film */
.film{position:relative;aspect-ratio:16/9;border-radius:44px;overflow:hidden;background:#082A45;box-shadow:0 60px 100px -50px rgba(8,42,69,.6)}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#082A45}
.film-play{position:absolute;left:32px;bottom:32px;min-height:64px;padding:0 24px 0 8px;border-radius:999px;border:0;background:#FFFFFF;color:#0B3354;display:flex;align-items:center;gap:12px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 20px 40px -12px rgba(8,42,69,.6);animation:filmpulse 2.4s ease-out infinite}
.film-icon{width:48px;height:48px;border-radius:50%;background:#14B8A6;display:flex;align-items:center;justify-content:center;padding-left:3px;flex-shrink:0}
.film-play:hover{background:#F0E9DD}
.film-play:focus-visible{outline:3px solid #F3EDE3;outline-offset:3px}
.film.playing .film-play{display:none}
@keyframes filmpulse{0%{box-shadow:0 20px 40px -12px rgba(8,42,69,.6),0 0 0 0 rgba(110,240,160,.55)}70%,100%{box-shadow:0 20px 40px -12px rgba(8,42,69,.6),0 0 0 22px rgba(110,240,160,0)}}
@media (max-width:560px){.film{border-radius:28px}.film-play{left:12px;bottom:12px;min-height:48px;font-size:13px;padding:0 14px 0 6px;gap:8px}.film-icon{width:36px;height:36px}.film-icon svg{width:16px;height:16px}}
@media (prefers-reduced-motion:reduce){.film-play{animation:none !important}}