/* =========================================================
   LifeShift — landing page
   Ported from the Claude Design artboard "Landing 3B — Peek".
   Light sky-gradient top half, dark bottom half, mascot
   peeking over the seam between them.

   Fredoka  — headlines, buttons, numbers.
   Nunito Sans — body copy.
   ========================================================= */
:root{
  --navy:#06153D;
  --navy-2:#0A2260;
  --blue:#1F7BFF;
  --blue-hover:#3E8DFF;
  --blue-bright:#5AACFF;
  --yellow:#FFC800;

  /* light half */
  --sky-1:#EAF4FF;
  --sky-2:#D6EAFF;
  --sky-3:#BBDCFF;

  --ink-70:rgba(6,21,61,.7);
  --ink-55:rgba(6,21,61,.55);
  --ink-50:rgba(6,21,61,.5);

  /* dark half */
  --w-85:rgba(255,255,255,.85);
  --w-75:rgba(255,255,255,.75);
  --w-74:rgba(255,255,255,.74);
  --w-60:rgba(255,255,255,.6);
  --w-45:rgba(255,255,255,.45);

  --shell:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--navy);
  color:#fff;
  font-family:'Nunito Sans','Segoe UI',system-ui,sans-serif;
  font-size:17px;line-height:1.62;font-weight:500;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
h1,h2{font-family:Fredoka,'Nunito Sans',sans-serif;margin:0;line-height:1.02;letter-spacing:-.02em}
p{margin:0}

/* =========================================================
   light half
   ========================================================= */
.top{
  position:relative;
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 62%,var(--sky-3) 100%);
  color:var(--navy);
}

.bar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(20px,5vw,34px);
  background:rgba(234,244,255,.82);
  border-bottom:1px solid rgba(6,21,61,.08);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:Fredoka,sans-serif;font-size:21px;font-weight:600;color:var(--navy);
}
.brand img{border-radius:9px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 24px;border-radius:999px;white-space:nowrap;
  font-family:Fredoka,sans-serif;font-size:16px;font-weight:600;
  color:#fff;background:var(--blue);
  box-shadow:0 4px 18px rgba(31,123,255,.32);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{background:var(--blue-hover);transform:translateY(-2px);box-shadow:0 8px 24px rgba(31,123,255,.4)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

.hero{
  max-width:820px;margin:0 auto;text-align:center;
  padding:clamp(44px,8vw,84px) clamp(20px,5vw,30px) 0;
}
h1{font-weight:700;font-size:clamp(48px,8vw,94px)}
.hl{color:var(--blue)}
.lead{
  margin:20px auto 0;max-width:36ch;
  font-size:clamp(17px,2.1vw,20px);color:var(--ink-70);
}

/* store badges — announcements, not links, until the stores are live */
.badges{
  margin-top:clamp(28px,4vw,40px);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
}
.badge{
  position:relative;display:flex;align-items:center;gap:16px;
  padding:18px 34px 18px 26px;border-radius:22px;text-align:left;cursor:default;
  min-width:246px;
}
.badge svg{width:34px;height:34px;flex:none}
.badge b{display:block;font-family:Fredoka,sans-serif;font-size:21px;font-weight:600;line-height:1.15}
.badge small{display:block;margin-top:2px;font-size:13.5px;font-weight:700}

.badge.play{background:var(--navy);color:#fff}
.badge.play svg{fill:#fff}
.badge.play small{color:var(--w-60)}

.badge.ios{background:#fff;border:1px solid rgba(6,21,61,.14);color:var(--navy)}
.badge.ios svg{fill:var(--navy)}
.badge.ios small{color:var(--ink-55)}

.tag{
  position:absolute;top:-11px;right:18px;
  padding:3px 12px;border-radius:999px;
  font-family:Fredoka,sans-serif;font-size:12.5px;font-weight:600;
  background:var(--yellow);color:var(--navy);
}
.tag.quiet{background:rgba(6,21,61,.08);color:var(--navy)}

.note{margin-top:14px;font-size:14px;font-weight:700;color:var(--ink-50)}

/* the mascot peeks up over the seam into the dark half */
.peek-frame{
  overflow:hidden;margin-top:clamp(10px,1.6vw,20px);
  display:flex;justify-content:center;
}
.peek{
  width:clamp(180px,23vw,300px);
  margin-bottom:-20px;
}

/* =========================================================
   dark half
   ========================================================= */
.bottom{
  background:
    radial-gradient(900px 700px at 10% 20%, rgba(31,123,255,.25), transparent 64%),
    linear-gradient(180deg,var(--navy-2) 0%,var(--navy) 40%,var(--navy) 100%);
}

/* --- three cards: tilted, with a hard offset shadow --- */
.cards{
  max-width:var(--shell);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;
  padding:clamp(34px,6vw,56px) clamp(20px,5vw,30px) clamp(20px,4vw,40px);
}
.card{
  padding:28px 26px;border-radius:22px;
  box-shadow:6px 6px 0 rgba(31,123,255,.35);
}
.card h2{margin:0 0 8px;font-size:22px;font-weight:600;line-height:1.2}
.card p{margin:0}

.c1{background:rgba(255,255,255,.07);border:2px solid rgba(90,172,255,.5);transform:rotate(-1deg)}
.c1 h2{color:var(--blue-bright)}
.c1 p{color:var(--w-75)}

.c2{background:var(--yellow);border:2px solid var(--yellow);color:var(--navy);transform:rotate(1.2deg)}
.c2 p{color:rgba(6,21,61,.75);font-weight:600}

.c3{background:var(--blue);border:2px solid var(--blue-bright);transform:rotate(-.8deg)}
.c3 p{color:var(--w-85)}

/* --- FAQ --- */
.faq-wrap{
  max-width:700px;margin:0 auto;
  padding:clamp(30px,6vw,60px) clamp(20px,5vw,30px) clamp(146px,14vw,178px);
}
.faq-title{
  margin:0 0 24px;text-align:center;
  font-weight:700;font-size:clamp(28px,4.4vw,40px);line-height:1.1;
}

.faq{display:flex;flex-direction:column;gap:12px}
.faq details{
  padding:0 20px;border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
}
.faq summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 0;
  font-family:Fredoka,sans-serif;font-size:17px;font-weight:600;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--yellow);outline-offset:4px;border-radius:6px}
.chev{
  width:18px;height:18px;flex:none;
  fill:none;stroke:var(--yellow);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s ease;
}
details[open] .chev{transform:rotate(180deg)}
.faq p{margin:0;padding:0 0 18px;color:var(--w-74)}
.faq p + p{padding-top:0}
.faq details p:not(:last-child){padding-bottom:12px}
.faq a{color:var(--blue-bright);font-weight:700}
.faq a:hover{color:var(--yellow)}

/* --- footer --- */
footer{
  position:relative;text-align:center;
  border-top:1px solid rgba(255,255,255,.12);
  background:rgba(2,8,30,.45);
  padding:clamp(30px,5vw,44px) clamp(20px,5vw,30px) 24px;
}
.foot-mascot{
  /* bottom:100% puts its base exactly on the footer's top edge, so the whole
     mascot stays on the section above instead of straddling two backgrounds */
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:24px;
  width:clamp(72px,8.6vw,100px);pointer-events:none;
  filter:drop-shadow(0 12px 20px rgba(2,8,30,.5));
}
.foot-brand{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:Fredoka,sans-serif;font-size:20px;font-weight:600;
}
.foot-brand img{border-radius:8px}

.foot-links{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px;
  margin-top:16px;font-size:15px;font-weight:700;
}
.foot-links a{color:rgba(255,255,255,.78);transition:color .18s ease}
.foot-links a:hover{color:#fff}
.sep{color:var(--yellow);font-size:11px}

.mail{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:16px;padding:9px 20px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:14.5px;font-weight:700;
  transition:background .2s ease;
}
.mail:hover{background:rgba(255,255,255,.14)}
.mail svg{
  width:16px;height:16px;
  fill:none;stroke:var(--yellow);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

.copy{margin-top:20px;font-size:13px;color:var(--w-45)}

/* =========================================================
   legal pages (privacy.html / terms.html)
   ========================================================= */
.legal{
  max-width:760px;margin:0 auto;
  padding:clamp(30px,5vw,52px) clamp(20px,5vw,30px) 48px;
}
.legal h1{font-size:clamp(32px,5vw,46px);font-weight:700}
.legal .updated{margin-top:10px;font-size:14px;font-weight:700;color:var(--w-45)}
.legal h2{font-family:Fredoka,sans-serif;font-weight:600;font-size:21px;margin:36px 0 0}
.legal p,.legal li{color:var(--w-74);font-size:16.5px;line-height:1.7}
.legal p{margin-top:13px}
.legal ul{margin-top:13px;padding-left:22px}
.legal li{margin-top:8px}
.legal strong{color:#fff}
.legal a{color:var(--blue-bright);font-weight:700}
.legal a:hover{color:var(--yellow)}
.back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;
  font-size:15px;font-weight:700;color:var(--w-74);
}
.back:hover{color:#fff}

/* =========================================================
   responsive
   ========================================================= */
@media (max-width:520px){
  body{font-size:16.5px}
  .badges{flex-direction:column;align-items:stretch}
  .badge{justify-content:flex-start;min-width:0;padding:16px 24px 16px 22px}
  /* the tilt costs horizontal room the small screen doesn't have */
  .card{transform:none;box-shadow:4px 4px 0 rgba(31,123,255,.35)}
  .faq summary{font-size:16px}
}

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