/* Lumi — public marketing landing page (independent of the app's styles.css) */
:root{
  --bg:#F3FAFF; --bg-2:#E4F1FF; --card:#FFFFFF; --ink:#23272B; --ink-soft:#5B6672;
  --lumi:#2FB6FF; --lumi-dark:#0F6B96; --leaf:#FF3D8A; --leaf-dark:#C71F66; --berry:#FF4757;
  --ring:rgba(255,61,138,0.45);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink); font-family:'Nunito',sans-serif; line-height:1.6;
  background:
    radial-gradient(circle at 12% -5%, var(--bg-2), transparent 45%),
    radial-gradient(circle at 90% 8%, #FFF3DE, transparent 42%),
    var(--bg);
}
a{color:var(--leaf-dark); text-decoration:none;}
h1,h2,h3{font-family:'Baloo 2',cursive; color:var(--leaf-dark); line-height:1.15; margin:0 0 .4em;}
img{max-width:100%;}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Baloo 2',cursive; font-weight:700; font-size:16px; padding:13px 22px;
  border-radius:16px; cursor:pointer; border:none; transition:transform .12s ease;
}
.btn:active{transform:translateY(2px);}
.btn-primary{background:var(--leaf); color:var(--ink); box-shadow:0 4px 0 var(--leaf-dark);}
.btn-ghost{background:var(--card); color:var(--leaf-dark); border:2px solid #CFE0D5;}
.btn-lg{font-size:18px; padding:15px 28px;}

/* nav */
.lp-nav{position:sticky; top:0; z-index:20; background:rgba(240,248,255,.85); backdrop-filter:blur(8px); border-bottom:1px solid rgba(199,31,102,.12);}
.lp-nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px; gap:8px;}
.lp-logo{font-family:'Baloo 2',cursive; font-weight:800; font-size:22px; color:var(--leaf-dark); flex:0 0 auto; white-space:nowrap;}
.lp-nav-links{display:flex; align-items:center; gap:22px; flex:0 1 auto; min-width:0;}
.lp-nav-links a.navlink{color:var(--ink-soft); font-weight:700; font-size:14.5px; white-space:nowrap;}
.lp-nav-links a.navlink:hover{color:var(--leaf-dark);}
.lp-nav .btn{white-space:nowrap;}
.lp-nav-toggle{display:none;}
@media(max-width:720px){
  .lp-nav-links .navlink{display:none;}
  /* Hamburger toggle: Features/How it works/Pricing/FAQ/Blog collapse into a
     dropdown on mobile instead of vanishing with no way back to them — the
     Sign in/Get started buttons stay visible either way since they're never
     targeted by the .navlink display:none rule above. */
  .lp-nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; margin-right:2px; order:-1;
    background:none; border:2px solid #E3DFD3; border-radius:10px;
    font-size:19px; color:var(--leaf-dark); cursor:pointer;
  }
  .lp-nav-links{position:static;}
  .lp-nav-links.open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--card); padding:8px 20px 16px;
    box-shadow:0 10px 24px rgba(0,0,0,.1); border-bottom:1px solid rgba(199,31,102,.12);
  }
  .lp-nav-links.open .navlink{
    display:block; width:100%; padding:13px 2px; border-bottom:1px solid rgba(0,0,0,.06);
  }
  .lp-nav-links.open .btn{width:100%; text-align:center; margin-top:10px;}
}

/* Below ~480px (common Android widths like 360/393), tighten everything so
   "Sign in" / "Get started" never wrap inside their buttons. */
@media(max-width:480px){
  .lp-nav .wrap{padding:0 12px; height:58px;}
  .lp-logo{font-size:17px;}
  .lp-nav-links{gap:8px;}
  .lp-nav .btn{padding:9px 13px; font-size:13px; border-radius:12px;}
}
@media(max-width:340px){
  .lp-logo{font-size:15px;}
  .lp-nav .btn{padding:8px 10px; font-size:12px;}
}

/* hero */
.hero{padding:64px 0 40px;}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center;}
.hero h1{font-size:clamp(32px,5vw,52px);}
.hero .lede{font-size:18px; color:var(--ink-soft); max-width:34ch; margin:0 0 24px;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
.hero-sub{margin-top:14px; font-size:13px; color:var(--ink-soft);}
.hero-art{display:flex; align-items:center; justify-content:center;}
.hero-fox{
  font-size:clamp(120px,22vw,190px); filter:drop-shadow(0 14px 24px rgba(217,135,58,.28));
  background:var(--card); border-radius:40px; padding:26px 40px; border:3px solid #FCE7C7;
}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;}
.badge{background:var(--card); border:1px solid #D9E7DE; border-radius:999px; padding:7px 14px; font-size:13px; font-weight:700; color:var(--leaf-dark);}
@media(max-width:820px){ .hero .wrap{grid-template-columns:1fr; text-align:center;} .hero .lede{margin-inline:auto;} .hero-cta,.badges{justify-content:center;} }

/* sections */
section.block{padding:52px 0;}
.block h2{font-size:clamp(26px,3.5vw,34px); text-align:center;}
.block .section-sub{text-align:center; color:var(--ink-soft); max-width:52ch; margin:0 auto 34px;}
.grid{display:grid; gap:18px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(2,1fr);}
@media(max-width:820px){ .grid-3{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr;} }
.card{background:var(--card); border:1px solid #E3EDE6; border-radius:20px; padding:22px; box-shadow:0 6px 18px rgba(0,0,0,.04);}
.card .ico{font-size:34px; margin-bottom:8px;}
.card-link{display:block; text-decoration:none;}

/* real product screenshots ("see Lumi in action") */
.shot-card{background:var(--card); border:1px solid #E3EDE6; border-radius:20px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.04); margin:0;}
.shot-card img{width:100%; height:auto; display:block; border-bottom:1px solid #E3EDE6;}
.shot-card figcaption{padding:14px 18px; font-size:14px; color:var(--ink-soft); text-align:center;}
.card h3{font-size:18px; margin-bottom:4px;}
.card p{margin:0; color:var(--ink-soft); font-size:14.5px;}

/* steps */
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:820px){ .steps{grid-template-columns:1fr;} }
.step{background:var(--card); border:1px solid #E3EDE6; border-radius:20px; padding:24px;}
.step .n{width:38px; height:38px; border-radius:50%; background:var(--leaf); color:var(--ink); font-family:'Baloo 2',cursive; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:10px;}

/* safety band */
.safety{background:linear-gradient(180deg,#FFF6E6,#FFFDF8); border:1px solid #F0E2C4; border-radius:24px; padding:30px;}
.safety ul{list-style:none; padding:0; margin:14px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media(max-width:640px){ .safety ul{grid-template-columns:1fr;} }
.safety li{padding-left:26px; position:relative; font-size:14.5px;}
.safety li::before{content:"✓"; position:absolute; left:0; color:var(--leaf); font-weight:800;}

/* pricing */
.price-card{max-width:420px; margin:0 auto; text-align:center; background:var(--card); border:2px solid #CFE0D5; border-radius:24px; padding:30px;}
.price-amt{font-family:'Baloo 2',cursive; font-size:44px; color:var(--leaf-dark);}
.price-amt small{font-size:16px; color:var(--ink-soft);}
.price-card ul{list-style:none; padding:0; margin:18px 0; text-align:left;}
.price-card li{padding:6px 0 6px 26px; position:relative;}
.price-card li::before{content:"✓"; position:absolute; left:0; color:var(--leaf); font-weight:800;}
.free-note{font-size:13px; color:var(--ink-soft);}

/* faq */
.faq details{background:var(--card); border:1px solid #E3EDE6; border-radius:14px; padding:14px 18px; margin-bottom:10px;}
.faq summary{cursor:pointer; font-weight:700; font-family:'Baloo 2',cursive; color:var(--ink); list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; float:right; color:var(--leaf); font-weight:800;}
.faq details[open] summary::after{content:"–";}
.faq p{color:var(--ink-soft); font-size:14.5px; margin:10px 0 0;}

/* final cta */
.cta-band{text-align:center; background:var(--leaf); border-radius:28px; padding:44px 24px; color:var(--ink);}
.cta-band h2{color:var(--ink);}
.cta-band p{color:var(--ink); margin:0 auto 22px; max-width:46ch;}
.cta-band .btn-primary{background:#fff; color:var(--leaf-dark); box-shadow:0 4px 0 rgba(0,0,0,.15);}

/* footer */
.lp-footer{padding:40px 0; border-top:1px solid rgba(199,31,102,.14); margin-top:24px; color:var(--ink-soft); font-size:13.5px;}
.lp-footer .cols{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.lp-footer a{color:var(--ink-soft); font-weight:700;}
.lp-footer a:hover{color:var(--leaf-dark);}
.lp-footer .legal{max-width:44ch; line-height:1.5;}
.foot-links{display:flex; gap:18px; flex-wrap:wrap;}
.foot-group-label{display:block; width:100%; font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:2px;}
button:focus-visible, a:focus-visible{outline:3px solid var(--ring); outline-offset:2px;}

/* breadcrumb (landing pages) */
.breadcrumb{font-size:13px; color:var(--ink-soft); margin-bottom:14px;}
.breadcrumb a{color:var(--leaf-dark); font-weight:700;}