/* ============================================================
   Lalu Safe — landing styles. Mobile-first. Light · warm · green.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --green-700:#0f6b41; --green-600:#15824f; --green-500:#1f8a5b; --green-400:#34a06f;
  --green-200:#a9dcbf; --green-100:#d6efe0; --green-50:#eaf6ef;
  --coral:#e8732c; --coral-50:#fcefe5;
  --bg:#f6f4ef; --surface:#fff; --surface-2:#fbfaf7;
  --ink:#1e1c18; --ink-2:#5b574e; --ink-3:#928d81;
  --line:#ebe7df; --line-2:#dcd7cc;
  --danger:#df2c2c; --danger-bg:#fdeaea; --amber:#df8a2e; --amber-bg:#fbf0e0;
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --pill:999px;
  --sh-1:0 1px 2px rgba(30,28,24,.05),0 1px 1px rgba(30,28,24,.04);
  --sh-2:0 2px 6px rgba(30,28,24,.05),0 12px 30px rgba(30,28,24,.08);
  --sh-3:0 4px 12px rgba(30,28,24,.1),0 24px 50px rgba(30,28,24,.14);
  --maxw:1160px;
  --font:'Manrope',-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; letter-spacing:-.011em; line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
section{position:relative;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
.eyebrow{font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--green-600);}
h1,h2,h3{margin:0; letter-spacing:-.03em; line-height:1.1; font-weight:800; text-wrap:balance;}
h2{font-size:clamp(26px,6vw,40px);}
p{margin:0;}
.lead{color:var(--ink-2); font-size:clamp(15px,4vw,18px); font-weight:500; text-wrap:pretty;}
.sec-head{max-width:620px; margin:0 auto 36px; text-align:center;}
.sec-head h2{margin:12px 0 10px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font); font-weight:700; font-size:16px; letter-spacing:-.01em;
  border:0; cursor:pointer; border-radius:var(--r-md); padding:0 22px; height:54px;
  transition:transform .07s ease, box-shadow .2s, background .2s; white-space:nowrap;
}
.btn:active{transform:scale(.98);}
.btn--play{background:var(--green-500); color:#fff; box-shadow:0 8px 20px rgba(31,138,91,.28);}
.btn--play:hover{background:var(--green-600);}
.btn--dark{background:var(--ink); color:#fff;}
.btn--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-2);}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink-3);}
.btn--soon{background:var(--surface); color:var(--ink-2); box-shadow:inset 0 0 0 1.5px var(--line-2); cursor:default;}
.btn--lg{height:58px; font-size:17px;}
.btn--block{width:100%;}
.btn svg{flex-shrink:0;}
.btn .b-sm{font-size:11px; font-weight:600; opacity:.7; display:block; line-height:1;}
.btn .b-lg{font-size:17px; font-weight:800; line-height:1.1; display:block;}
.btn--store{flex-direction:row; text-align:left; gap:11px; padding:0 20px;}
.btn--store .b-txt{display:flex; flex-direction:column; gap:1px;}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:50; background:rgba(246,244,239,.82);
  backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s,background .2s;
}
.hdr.scrolled{border-color:var(--line); background:rgba(246,244,239,.92);}
.hdr-in{display:flex; align-items:center; gap:16px; height:66px;}
.nav-links{display:none;}
.hdr-right{margin-left:auto; display:flex; align-items:center; gap:10px;}
.nav-links a{font-size:14.5px; font-weight:600; color:var(--ink-2); padding:8px 10px; border-radius:10px;}
.nav-links a:hover{color:var(--ink); background:rgba(0,0,0,.03);}

/* brand */
.brand{display:flex; align-items:center; gap:9px;}
.brand .word{font-size:21px; font-weight:800; letter-spacing:-.04em;}
.brand .word .safe{color:var(--green-600);}

/* language switcher */
.lang{position:relative;}
.lang-btn{
  display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 12px; border-radius:var(--pill);
  background:var(--surface); box-shadow:var(--sh-1); border:1px solid var(--line); cursor:pointer;
  font-family:var(--font); font-weight:700; font-size:13.5px; color:var(--ink);
}
.lang-btn:hover{border-color:var(--line-2);}
.lang-menu{
  position:absolute; right:0; top:48px; background:var(--surface); border-radius:var(--r-md);
  box-shadow:var(--sh-3); border:1px solid var(--line); padding:6px; min-width:170px; display:none; z-index:60;
}
.lang.open .lang-menu{display:block;}
.lang-menu button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:transparent;
  padding:10px 12px; border-radius:10px; cursor:pointer; font-family:var(--font); font-weight:600; font-size:14.5px; color:var(--ink-2);
}
.lang-menu button:hover{background:var(--surface-2);}
.lang-menu button[aria-current="true"]{background:var(--green-50); color:var(--green-700); font-weight:800;}
.lang-menu button[aria-current="true"]::after{content:'✓'; margin-left:auto; color:var(--green-600); font-weight:800;}
.lang-menu .flag{width:20px; text-align:center; font-size:15px;}

/* hide CTA label on small */
.hdr .btn--play{height:42px; font-size:14.5px; padding:0 16px;}
.hdr .btn--play .full{display:none;}

/* ---------- hero ---------- */
.hero{padding:34px 0 12px; overflow:hidden;}
.hero-grid{display:flex; flex-direction:column; gap:36px; align-items:center; text-align:center;}
.badge{
  display:inline-flex; align-items:center; gap:8px; background:var(--green-50); color:var(--green-700);
  padding:8px 15px; border-radius:var(--pill); font-weight:800; font-size:13.5px; align-self:center; white-space:nowrap;
}
.badge .bf{width:18px; height:18px;}
.hero h1{font-size:clamp(33px,8.6vw,60px); margin:18px 0 0;}
.hero .lead{margin:18px auto 0; max-width:520px;}
.hero-cta{display:flex; flex-direction:column; gap:12px; width:100%; max-width:330px; margin:28px auto 0;}
.hero-cta .row{display:flex; gap:10px;}
.hero-cta .row>*{flex:1;}
.micro{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:18px; flex-wrap:wrap;}
.micro span{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--ink-2);}
.micro .dot{width:4px; height:4px; border-radius:50%; background:var(--line-2);}
.micro .star{color:var(--amber);}

/* ---------- phone mockup (CSS) ---------- */
.phone{
  width:286px; height:580px; border-radius:46px; background:#fff; padding:11px;
  box-shadow:var(--sh-3), 0 0 0 11px #15130f, 0 0 0 12px #2a2722; position:relative; flex-shrink:0;
}
.phone-scr{width:100%; height:100%; border-radius:36px; overflow:hidden; position:relative; background:#eef0e9;}
.notch{position:absolute; top:11px; left:50%; transform:translateX(-50%); width:96px; height:26px; background:#15130f; border-radius:0 0 16px 16px; z-index:6;}
.map{position:absolute; inset:0; background:#eef0e9;}
.map .road{position:absolute; background:#fff;}
.map .road.m{background:#f6f4ee;}
.map .park{position:absolute; background:#d7e7c8; border-radius:46% 54% 50% 50%;}
.map .water{position:absolute; background:#cfe0e8;}
.pin{position:absolute; left:52%; top:40%; transform:translate(-50%,-100%); text-align:center;}
.pin .lbl{background:#fff; border-radius:11px; box-shadow:var(--sh-2); padding:6px 11px; font-size:12px; font-weight:800; white-space:nowrap; margin-bottom:7px;}
.pin .tear{width:48px; height:48px; border-radius:50% 50% 50% 7px; transform:rotate(45deg); background:#fff; box-shadow:var(--sh-3); display:flex; align-items:center; justify-content:center; margin:0 auto;}
.pin .av{width:37px; height:37px; border-radius:50%; transform:rotate(-45deg); background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px;}
.scr-status{position:absolute; top:0; left:0; right:0; height:44px; display:flex; align-items:flex-end; justify-content:space-between; padding:0 22px 6px; font-size:13px; font-weight:700; z-index:5;}
.sheet{position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:24px 24px 0 0; box-shadow:0 -8px 24px rgba(30,28,24,.12); padding:12px 16px 18px;}
.sheet .grab{width:36px; height:5px; border-radius:3px; background:var(--line-2); margin:0 auto 12px;}
.sheet-row{display:flex; align-items:center; gap:11px;}
.sheet .av2{width:44px; height:44px; border-radius:50%; background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; box-shadow:0 0 0 3px var(--green-100);}
.sheet .nm{font-weight:800; font-size:16px;}
.sheet .pl{font-size:12.5px; color:var(--ink-2); font-weight:600; display:flex; align-items:center; gap:4px;}
.sheet .badges{display:flex; gap:6px; margin-top:9px;}
.chip-ok{display:inline-flex; align-items:center; gap:5px; background:var(--green-50); color:var(--green-700); font-size:11.5px; font-weight:800; padding:4px 9px; border-radius:var(--pill);}
.chip-ok .d{width:6px; height:6px; border-radius:50%; background:var(--green-500);}
.sheet .acts{display:flex; gap:4px; margin-top:13px; padding-top:12px; border-top:1px solid var(--line);}
.act{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;}
.act .ic{width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--green-50); color:var(--green-700);}
.act.sos .ic{background:var(--danger); color:#fff;}
.act .t{font-size:10.5px; font-weight:700; color:var(--ink-2);}

/* ---------- trust bar ---------- */
.trust{padding:8px 0 4px;}
.trust-band{
  background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:22px 20px;
  display:grid; grid-template-columns:1fr; gap:18px;
}
.trust-head{text-align:center; font-weight:800; font-size:15px; color:rgba(255,255,255,.7); margin-bottom:-2px;}
.tcell{display:flex; align-items:center; gap:13px;}
.tcell .ic{width:46px; height:46px; border-radius:14px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--green-200);}
.tcell.coral .ic{color:#f6b98c;}
.tcell .t{font-weight:800; font-size:15px;}
.tcell .s{font-size:12.5px; color:rgba(255,255,255,.65); font-weight:600;}

/* ---------- features ---------- */
.features{padding:56px 0;}
.feat-grid{display:grid; grid-template-columns:1fr; gap:14px;}
.feat-card{
  background:var(--surface); border-radius:var(--r-lg); padding:22px; box-shadow:var(--sh-1);
  border:1px solid var(--line); position:relative; transition:transform .15s, box-shadow .15s;
}
.feat-card:hover{transform:translateY(-2px); box-shadow:var(--sh-2);}
.feat-card .fic{width:52px; height:52px; border-radius:15px; background:var(--green-50); color:var(--green-600); display:flex; align-items:center; justify-content:center; margin-bottom:15px;}
.feat-card.c-sos .fic{background:var(--danger-bg); color:var(--danger);}
.feat-card.c-loud .fic{background:var(--green-50); color:var(--green-600);}
.feat-card.c-batt .fic{background:var(--amber-bg); color:#a85e16;}
.feat-card h3{font-size:19px; margin-bottom:7px;}
.feat-card p{font-size:14.5px; color:var(--ink-2); font-weight:500;}
.feat-card .prem-tag{position:absolute; top:18px; right:18px; background:var(--green-700); color:#fff; font-size:11px; font-weight:800; padding:3px 9px; border-radius:var(--pill);}

/* ---------- how it works ---------- */
.how{padding:56px 0; background:var(--surface); border-radius:36px;}
.steps{display:grid; grid-template-columns:1fr; gap:18px; counter-reset:step;}
.step{display:flex; gap:16px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px;}
.step .num{width:44px; height:44px; border-radius:50%; background:var(--green-500); color:#fff; font-weight:800; font-size:19px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 14px rgba(31,138,91,.25);}
.step h3{font-size:18px; margin-bottom:5px;}
.step p{font-size:14.5px; color:var(--ink-2); font-weight:500;}
.step .tag{display:inline-block; margin-top:8px; font-size:12px; font-weight:800; padding:3px 10px; border-radius:var(--pill);}
.step .tag.green{background:var(--green-50); color:var(--green-700);}
.step .tag.coral{background:var(--coral-50); color:var(--coral);}

/* ---------- two apps ---------- */
.apps{padding:56px 0;}
.apps-pair{display:flex; flex-direction:column; align-items:center; gap:0;}
.app-card{
  width:100%; max-width:420px; background:var(--surface); border-radius:var(--r-lg); padding:24px;
  box-shadow:var(--sh-2); border:1px solid var(--line); display:flex; align-items:center; gap:16px; position:relative; z-index:2;
}
.app-card.child{border-color:var(--coral-50); background:linear-gradient(180deg,#fffaf4,#fff);}
.app-card .ai{width:60px; height:60px; border-radius:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.app-card.parent .ai{background:var(--green-500);}
.app-card.child .ai{background:var(--coral);}
.app-card h3{font-size:20px; margin-bottom:4px;}
.app-card p{font-size:13.5px; color:var(--ink-2); font-weight:500;}
.app-link{
  width:64px; height:64px; margin:-8px 0; border-radius:50%; background:var(--surface);
  box-shadow:var(--sh-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; z-index:3; position:relative;
}

/* ---------- why ---------- */
.why{padding:56px 0; background:var(--green-700); color:#fff; border-radius:36px;}
.why .sec-head h2,.why .eyebrow{color:#fff;}
.why .eyebrow{color:var(--green-200);}
.why .sec-head .lead{color:rgba(255,255,255,.8);}
.why-grid{display:grid; grid-template-columns:1fr; gap:14px;}
.why-card{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md); padding:20px; display:flex; gap:14px; align-items:flex-start;}
.why-card .wic{width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.12); color:var(--green-200); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.why-card h3{font-size:16.5px; margin-bottom:4px;}
.why-card p{font-size:13.5px; color:rgba(255,255,255,.75); font-weight:500;}

/* ---------- pricing ---------- */
.pricing{padding:56px 0;}
.price-grid{display:grid; grid-template-columns:1fr; gap:16px; max-width:740px; margin:0 auto;}
.price-card{background:var(--surface); border-radius:var(--r-lg); border:1.5px solid var(--line); padding:26px; box-shadow:var(--sh-1); position:relative;}
.price-card.prem{border-color:var(--green-500); box-shadow:var(--sh-2);}
.price-badge{position:absolute; top:-13px; left:26px; background:var(--green-500); color:#fff; font-size:12px; font-weight:800; padding:5px 14px; border-radius:var(--pill); box-shadow:var(--sh-1);}
.price-card .pname{font-weight:800; font-size:15px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em;}
.price-card .pcost{display:flex; align-items:baseline; gap:8px; margin:12px 0 18px;}
.price-card .pcost .amt{font-size:34px; font-weight:800; letter-spacing:-.03em;}
.price-card .pcost .per{font-size:14px; font-weight:600; color:var(--ink-3);}
.price-feats{display:flex; flex-direction:column; gap:11px; margin-bottom:22px;}
.price-feats li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; font-weight:600; color:var(--ink-2); list-style:none;}
.price-feats .ck{width:20px; height:20px; border-radius:50%; background:var(--green-50); color:var(--green-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;}
ul{margin:0; padding:0;}
.daily-note{text-align:center; font-size:13.5px; color:var(--ink-3); font-weight:600; margin-top:18px;}
.billing{margin-top:30px; text-align:center;}
.billing .blab{font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px;}
.pay-row{display:flex; flex-wrap:wrap; gap:9px; justify-content:center;}
.pay{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-radius:var(--pill); background:var(--surface); box-shadow:var(--sh-1); border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--ink-2);}
.pay.carrier{background:var(--green-50); color:var(--green-700); border-color:var(--green-100);}

/* ---------- privacy ---------- */
.privacy{padding:56px 0;}
.privacy-card{background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:36px 24px; text-align:center;}
.privacy-card .shield{width:64px; height:64px; border-radius:20px; background:rgba(255,255,255,.1); color:var(--green-200); display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
.privacy-card h2{color:#fff; margin-bottom:28px;}
.priv-grid{display:grid; grid-template-columns:1fr; gap:16px; max-width:560px; margin:0 auto 28px; text-align:left;}
.priv-item{display:flex; gap:13px; align-items:flex-start;}
.priv-item .pic{width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.1); color:var(--green-200); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.priv-item h3{font-size:16px; margin-bottom:3px;}
.priv-item p{font-size:13.5px; color:rgba(255,255,255,.7); font-weight:500;}
.priv-links{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.priv-links a{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:#fff; background:rgba(255,255,255,.1); padding:11px 18px; border-radius:var(--pill);}
.priv-links a:hover{background:rgba(255,255,255,.16);}

/* ---------- social proof ---------- */
.social{padding:56px 0; background:var(--surface); border-radius:36px;}
.stats{display:flex; justify-content:center; gap:14px; margin-bottom:34px; flex-wrap:wrap;}
.stat{text-align:center; padding:16px 24px; background:var(--surface-2); border-radius:var(--r-md); border:1px solid var(--line); min-width:104px;}
.stat .v{font-size:28px; font-weight:800; color:var(--green-700); letter-spacing:-.02em;}
.stat .l{font-size:12.5px; font-weight:700; color:var(--ink-3);}
.reviews{display:grid; grid-template-columns:1fr; gap:14px;}
.review{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px;}
.review .stars{color:var(--amber); font-size:15px; letter-spacing:2px; margin-bottom:12px;}
.review p{font-size:15px; font-weight:600; line-height:1.5; margin-bottom:14px; text-wrap:pretty;}
.review .who{display:flex; align-items:center; gap:10px;}
.review .who .av{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:16px;}
.review .who .nm{font-size:13.5px; font-weight:800;}

/* ---------- faq ---------- */
.faq{padding:56px 0;}
.faq-list{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:10px;}
.faq-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
.faq-q{width:100%; text-align:left; border:0; background:transparent; cursor:pointer; padding:19px 20px; display:flex; align-items:center; gap:14px; font-family:var(--font); font-size:16px; font-weight:700; color:var(--ink);}
.faq-q .qx{margin-left:auto; width:26px; height:26px; flex-shrink:0; transition:transform .2s; color:var(--green-600);}
.faq-item.open .qx{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding:0 20px 19px; font-size:14.5px; color:var(--ink-2); font-weight:500;}

/* ---------- final CTA + footer ---------- */
.foot-cta{padding:20px 0 50px;}
.foot-cta-card{background:linear-gradient(155deg,var(--green-600),var(--green-700)); color:#fff; border-radius:var(--r-xl); padding:40px 24px; text-align:center; overflow:hidden; position:relative;}
.foot-cta-card .bf-big{position:absolute; right:-30px; top:-20px; width:180px; opacity:.13;}
.foot-cta-card h2{color:#fff; margin-bottom:10px; position:relative;}
.foot-cta-card .lead{color:rgba(255,255,255,.85); margin-bottom:24px; position:relative;}
.foot-cta-card .hero-cta{margin-top:0;}
.foot-cta-card .btn--play{background:#fff; color:var(--green-700);}
.foot-cta-card .btn--soon{background:rgba(255,255,255,.14); color:#fff; box-shadow:none;}

footer{background:var(--ink); color:#fff; padding:44px 0 30px;}
.foot-top{display:grid; grid-template-columns:1fr; gap:30px; margin-bottom:32px;}
.foot-brand .word{font-size:22px; font-weight:800; letter-spacing:-.04em;}
.foot-brand .word .safe{color:var(--green-200);}
.foot-brand p{font-size:14px; color:rgba(255,255,255,.6); margin-top:10px; max-width:280px; font-weight:500;}
.foot-cols{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.foot-col h4{font-size:12.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 14px;}
.foot-col a{display:block; font-size:14px; color:rgba(255,255,255,.75); font-weight:600; padding:5px 0;}
.foot-col a:hover{color:#fff;}
.family-link{margin-top:6px; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:var(--pill); padding:8px 14px; font-size:13px; font-weight:700;}
.foot-bot{border-top:1px solid rgba(255,255,255,.1); padding-top:22px; display:flex; flex-direction:column; gap:16px; align-items:flex-start;}
.foot-bot .lang-btn{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#fff;}
.foot-bot .copy{font-size:12.5px; color:rgba(255,255,255,.5); font-weight:500;}
.foot-bot .made{font-size:12.5px; color:rgba(255,255,255,.5); font-weight:600; display:inline-flex; align-items:center; gap:6px;}
.foot-social{display:flex; gap:10px;}
.foot-social a{width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.8);}
.foot-social a:hover{background:rgba(255,255,255,.16); color:#fff;}

/* mascot */
.bf{display:inline-block;}

/* ============================================================
   Tablet
   ============================================================ */
@media(min-width:680px){
  .wrap{padding:0 32px;}
  .trust-band{grid-template-columns:1fr 1fr; gap:22px 30px; padding:26px 30px;}
  .trust-head{grid-column:1/-1;}
  .feat-grid{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr 1fr;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .price-grid{grid-template-columns:1fr 1fr;}
  .priv-grid{grid-template-columns:1fr 1fr 1fr; max-width:none;}
  .reviews{grid-template-columns:1fr 1fr 1fr;}
  .foot-top{grid-template-columns:1.4fr 2fr;}
  .foot-cols{grid-template-columns:repeat(4,1fr);}
  .foot-bot{flex-direction:row; align-items:center; justify-content:space-between;}
  .hero-cta .row{flex-direction:row;}
}

/* ============================================================
   Desktop
   ============================================================ */
@media(min-width:960px){
  .nav-links{display:flex; align-items:center; gap:4px;}
  .hdr .btn--play .full{display:inline;}
  .hero{padding:60px 0 30px;}
  .hero-grid{flex-direction:row; text-align:left; justify-content:space-between; gap:40px;}
  .hero-grid .hero-copy{flex:1; max-width:560px;}
  .badge{align-self:flex-start;}
  .hero .lead{margin-left:0; margin-right:0;}
  .hero-cta{margin-left:0; max-width:380px;}
  .micro{justify-content:flex-start;}
  .phone{width:308px; height:625px;}
  .sec-head{margin-bottom:48px;}
  .feat-grid{grid-template-columns:1fr 1fr 1fr;}
  .apps-pair{flex-direction:row; max-width:880px; margin:0 auto; align-items:center;}
  .app-card{max-width:none;}
  .app-link{margin:0 -10px; transform:rotate(0);}
  .features,.pricing,.apps,.faq,.privacy{padding:80px 0;}
  .how,.why,.social{padding:72px 0;}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important; transition:none !important;}
}