/* Luna Lunera — one stylesheet for the home page and the legal/support pages.
   Type, colours and icons follow the app: Jost 400/800, the indigo night sky,
   lavender glyphs (#d9cdf0) and the warm amber accent (#f2c27b). */

@font-face{
  font-family:"Jost";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/jost-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Jost";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/jost-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  color-scheme:light dark;
  /* the night: same colours as the app and its store screenshots */
  --sky-top:#211e4e;
  --sky-bottom:#16122c;
  --night:#16122c;
  --night-ink:#f0eef8;
  --night-ink-2:#c9c1e2;
  --glyph:#d9cdf0;
  --warm:#f2c27b;
  --tile:#2a1f3d;
  --tile-song:#1f2a44;

  /* page (light) */
  --bg:#fbfaff;
  --bg-alt:#f1eef9;
  --ink:#17112b;
  --ink-2:#4a4362;
  --accent:#8a5712;
  --surface:#ffffff;
  --badge-bg:#17112b;
  --badge-ink:#ffffff;
  --focus:#8a5712;

  --font:"Jost",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --max:1180px;
  --section:clamp(96px,14vw,184px);
  --radius-phone:13.5% / 6.2%;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#100c20;
    --bg-alt:#1a1431;
    --ink:#f0eef8;
    --ink-2:#c3bbdb;
    --accent:#f2c27b;
    --surface:#1f1838;
    --badge-bg:#f0eef8;
    --badge-ink:#17112b;
    --focus:#f2c27b;
  }
}
:root[data-theme="dark"]{
  --bg:#100c20;--bg-alt:#1a1431;--ink:#f0eef8;--ink-2:#c3bbdb;--accent:#f2c27b;
  --surface:#1f1838;--badge-bg:#f0eef8;--badge-ink:#17112b;--focus:#f2c27b;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-weight:400;font-size:18px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}
img{display:block;max-width:100%;height:auto;}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.06em;}
a:hover{text-decoration-thickness:.12em;}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px;}
.night :focus-visible,.topbar :focus-visible{outline-color:var(--warm);}
h1,h2,h3{font-weight:800;letter-spacing:-0.025em;line-height:1.02;margin:0;text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;}
.hero h1,footer .wordmark{hyphens:none;-webkit-hyphens:none;}
p{margin:0;}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}
.skip{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--warm);color:#17112b;font-weight:800;padding:10px 16px;border-radius:999px;text-decoration:none;
}
.skip:focus{top:10px;}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.ico{width:1em;height:1em;flex:none;fill:currentColor;}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--night);color:var(--night-ink);
}
.topbar .wrap{display:flex;align-items:center;gap:24px;height:56px;}
.brand{
  display:inline-flex;align-items:center;gap:10px;margin-right:auto;
  color:var(--night-ink);text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-0.01em;
}
.brand img{width:22px;height:auto;}
.topnav{display:flex;gap:26px;}
.topnav a{color:var(--night-ink-2);text-decoration:none;font-size:15px;transition:color .2s;}
.topnav a:hover{color:var(--night-ink);}
@media (max-width:860px){.topnav{display:none;}}

/* Language menu: a <details>, works without JavaScript */
.lang-menu{position:relative;}
.lang-menu summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-size:15px;color:var(--night-ink);padding:8px 14px;border-radius:999px;
  background:rgba(217,205,240,.12);transition:background .2s;
}
.lang-menu summary::-webkit-details-marker{display:none;}
.lang-menu summary:hover{background:rgba(217,205,240,.2);}
.lang-menu summary svg{width:16px;height:16px;fill:currentColor;}
.lang-menu ul{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:210px;
  margin:0;padding:6px;list-style:none;border-radius:16px;
  background:#251d40;box-shadow:0 18px 40px rgba(6,4,16,.45);
}
.lang-menu li a{
  display:block;padding:9px 14px;border-radius:10px;color:var(--night-ink);text-decoration:none;font-size:16px;
}
.lang-menu li a:hover{background:rgba(217,205,240,.12);}
.lang-menu li a[aria-current]{color:var(--warm);font-weight:800;}

/* ---------- Night sky (hero, bands) ---------- */
.night{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom));
  color:var(--night-ink);
}
.night a:not(.badge){color:var(--warm);}
.stars{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;}
.stars .tw{animation:twinkle 5s ease-in-out infinite;}
.stars .tw:nth-child(3n){animation-duration:7s;animation-delay:-2s;}
.stars .tw:nth-child(4n){animation-duration:9s;animation-delay:-5s;}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- Phone frame around the real screenshots ---------- */
.phone{
  position:relative;
  padding:2.6%;border-radius:var(--radius-phone);
  background:#07050f;
  box-shadow:0 0 0 1.5px #3a3256 inset;
}
.phone img{width:100%;height:auto;border-radius:11.5% / 5.3%;}

/* ---------- Hero ---------- */
.hero{padding:clamp(56px,9vw,120px) 0 0;}
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:center;
}
.hero-text{padding-bottom:clamp(48px,8vw,120px);}
.hero h1{font-size:clamp(64px,10.5vw,152px);letter-spacing:-0.045em;line-height:.9;}
.tagline{margin-top:22px;font-size:clamp(24px,2.6vw,36px);line-height:1.2;color:var(--warm);}
.pitch{margin-top:22px;max-width:34em;font-size:clamp(18px,1.45vw,20px);line-height:1.6;color:var(--night-ink-2);}
.badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;}
.badge{
  display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:9px 22px 9px 18px;border-radius:14px;
  background:var(--night-ink);color:#17112b;text-decoration:none;line-height:1.1;
  transition:transform .25s var(--ease),background .25s;
}
.badge:hover{transform:translateY(-2px);background:#fff;}
.badge:active{transform:translateY(0) scale(.98);}
.badge svg{width:24px;height:24px;fill:currentColor;flex:none;}
.badge span{display:flex;flex-direction:column;font-weight:800;font-size:18px;}
.badge small{font-weight:400;font-size:13px;opacity:.75;}
.on-page .badge{background:var(--badge-bg);color:var(--badge-ink);}
.on-page .badge:hover{background:var(--badge-bg);}

.hero-art{position:relative;align-self:end;justify-self:center;width:min(100%,400px);}
.hero-art .phone{margin-bottom:-18%;}
.hero-moon{
  position:absolute;z-index:-1;width:50%;top:-4%;left:-36%;
  transform-origin:50% 20%;animation:rock 9s ease-in-out infinite;
}
@keyframes rock{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}

/* ---------- Feature sections ---------- */
.feature{padding:var(--section) 0;}
.feature.alt{background:var(--bg-alt);}
.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(40px,7vw,112px);align-items:center;}
.split.flip{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);}
.split.flip > :first-child{order:2;}
.feature h2,.lamp-band h2{font-size:clamp(40px,6.4vw,92px);}
.split h2{font-size:clamp(40px,4.6vw,66px);}
.copy p{margin-top:24px;font-size:clamp(18px,1.5vw,21px);line-height:1.6;max-width:32em;}
.copy p + p{margin-top:16px;}
.copy .note{color:var(--ink-2);}
.night .copy .note{color:var(--night-ink-2);}
.shot{width:min(100%,380px);justify-self:center;}

/* sound tiles, drawn with the app's own line icons */
.tiles-head{margin:clamp(72px,9vw,128px) 0 28px;font-size:clamp(26px,2.4vw,34px);letter-spacing:-0.02em;}
.tiles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:28px 18px;
  margin:0;padding:0;list-style:none;
}
.tiles li{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:16px;line-height:1.25;}
.tile{
  width:100%;max-width:120px;aspect-ratio:1;border-radius:22%;background:var(--tile);
  display:grid;place-items:center;transition:transform .35s var(--ease);
}
.tile svg{width:80%;height:80%;}
.tiles li:hover .tile{transform:translateY(-4px) rotate(-2deg);}

/* songs: two phones side by side */
.duo{display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,3vw,40px);margin-top:clamp(56px,7vw,96px);}
.duo .phone{width:min(42vw,340px);}
.duo .phone:last-child{margin-top:clamp(40px,7vw,96px);}
.center{text-align:center;}
.center .copy p{margin-left:auto;margin-right:auto;}

/* ambience: the nursery illustration and the lamp, with a slow glow like the app */
.lamp-band{padding:var(--section) 0;}
.lamp-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,72px);align-items:center;margin-top:clamp(56px,7vw,96px);}
.nursery{border-radius:28px;width:100%;}
.lamp-shot{position:relative;width:min(100%,330px);justify-self:center;}
.lamp-shot::before{
  content:"";position:absolute;inset:8% -18%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(242,194,123,.55),rgba(150,90,200,.25) 60%,transparent);
  filter:blur(30px);animation:breathe 8s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:.9;transform:scale(1.05)}}

/* small facts with an icon (timer section) */
.facts-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:44px;}
.fact h3{display:flex;align-items:center;gap:10px;font-size:21px;letter-spacing:-0.01em;line-height:1.2;}
.fact h3 .ico{color:var(--accent);width:24px;height:24px;}
.fact p{margin-top:8px;font-size:17px;color:var(--ink-2);}

/* promise band */
.promise{padding:var(--section) 0;}
.promise h2{font-size:clamp(44px,7vw,104px);max-width:12em;}
.promise ul{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px;
  margin:clamp(56px,7vw,96px) 0 0;padding:0;list-style:none;
}
.promise li .ico{width:34px;height:34px;color:var(--warm);}
.promise h3{margin-top:18px;font-size:22px;letter-spacing:-0.01em;line-height:1.2;}
.promise li p{margin-top:8px;font-size:17px;color:var(--night-ink-2);}

/* the name */
.name{padding:var(--section) 0;}
.name .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;}
.name img{width:clamp(110px,16vw,220px);animation:rock 9s ease-in-out infinite;transform-origin:50% 20%;}
.quote{font-weight:800;font-size:clamp(36px,5.6vw,80px);line-height:1.02;letter-spacing:-0.035em;margin:0;}
.name p.copy-line{margin-top:20px;font-size:clamp(18px,1.5vw,21px);max-width:32em;color:var(--ink-2);}

/* safety + help */
.help{padding:0 0 var(--section);}
.safety{
  background:var(--bg-alt);border-radius:28px;padding:clamp(28px,4vw,48px);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px 48px;
}
.safety h2{font-size:clamp(28px,3vw,40px);letter-spacing:-0.02em;}
.safety p{font-size:18px;}
.help-head{margin-top:clamp(72px,9vw,120px);font-size:clamp(32px,3.6vw,52px);}
.help-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:40px;}
.help-grid h3{font-size:24px;letter-spacing:-0.015em;line-height:1.2;}
.help-grid p{margin-top:10px;font-size:17px;color:var(--ink-2);}
.help-grid .more{display:inline-block;margin-top:14px;font-weight:800;font-size:17px;text-decoration:none;}
.help-grid .more:hover{text-decoration:underline;}

/* closing call */
.cta{padding:var(--section) 0;text-align:center;}
.cta h2{font-size:clamp(56px,9vw,128px);letter-spacing:-0.045em;line-height:.95;max-width:12em;margin:0 auto;}
.cta p{margin:24px auto 0;max-width:30em;font-size:clamp(18px,1.6vw,22px);color:var(--night-ink-2);}
.cta .badges{justify-content:center;}

/* ---------- Footer ---------- */
footer{background:var(--night);color:var(--night-ink-2);padding:64px 0 48px;font-size:15px;}
footer .wordmark{display:block;font-weight:800;color:var(--night-ink);font-size:clamp(48px,9vw,128px);letter-spacing:-0.045em;line-height:.9;margin-bottom:40px;}
footer nav{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:14px;}
footer a{color:var(--night-ink);text-decoration:none;}
footer a:hover{text-decoration:underline;}
footer nav a[aria-current]{color:var(--warm);}
footer nav.langs a{color:var(--night-ink-2);}
footer nav.langs a[aria-current]{color:var(--warm);}
footer p{margin:8px 0 0;}

/* ---------- Entrance motion (only when JS runs; content never stays hidden otherwise) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.js [data-reveal].in{opacity:1;transform:none;}
.js [data-reveal="2"]{transition-delay:.08s;}
.js [data-reveal="3"]{transition-delay:.16s;}
.js [data-reveal="4"]{transition-delay:.24s;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .js [data-reveal]{opacity:1;transform:none;}
}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .promise ul{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:860px){
  .hero .wrap,.split,.lamp-grid{grid-template-columns:minmax(0,1fr);}
  .hero{text-align:center;}
  .hero .pitch{margin-left:auto;margin-right:auto;}
  .hero .badges{justify-content:center;}
  .hero-text{padding-bottom:56px;}
  .hero-art{width:min(78%,340px);}
  .hero-moon{left:-30%;top:-6%;width:48%;}
  .split.flip{grid-template-columns:minmax(0,1fr);}
  .split.flip > :first-child{order:0;}
  .shot{width:min(78%,340px);}
  .facts-row,.help-grid{grid-template-columns:minmax(0,1fr);gap:28px;}
  .safety{grid-template-columns:minmax(0,1fr);}
  .name .wrap{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:520px){
  body{font-size:17px;}
  .cta h2{font-size:48px;}
  .help-head{font-size:30px;}
  .feature h2,.lamp-band h2,.split h2{font-size:38px;}
  .promise ul{grid-template-columns:minmax(0,1fr);}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px;}
  .tiles li{font-size:14px;}
  .badge{flex:1 1 100%;justify-content:center;}
  .duo{gap:12px;}
  .duo .phone{width:46%;}
  .lang-menu summary span{display:none;}
}

/* ---------- Legal and support pages ---------- */
.page-head{padding-top:clamp(56px,8vw,104px);max-width:860px;}
.page-head .section-label{font-size:16px;color:var(--ink-2);margin:0 0 14px;}
.page-head h1{font-size:clamp(34px,6vw,72px);hyphens:auto;-webkit-hyphens:auto;}
.updated{margin-top:16px;color:var(--ink-2);font-size:15px;}
main.wrap{max-width:860px;padding-top:40px;padding-bottom:var(--section);}
.legal-box{font-size:17px;}
.legal-box + .legal-box{margin-top:48px;}
.legal-box h2{font-size:clamp(24px,2.6vw,30px);letter-spacing:-0.02em;line-height:1.15;margin:56px 0 14px;}
.legal-box h2:first-child{margin-top:0;}
.legal-box h3{font-size:20px;letter-spacing:-0.01em;line-height:1.25;margin:32px 0 8px;}
.legal-box p,.legal-box li,.legal-box dd,.legal-box td{line-height:1.65;}
.legal-box p + p{margin-top:12px;}
.legal-box ul,.legal-box ol{padding-left:22px;margin:12px 0;}
.legal-box li{margin:6px 0;}
.lead{font-size:20px;}
.summary{background:var(--bg-alt);border-radius:20px;padding:22px 26px;margin:0 0 12px;}
.summary ul{margin:8px 0 0;}
.table-scroll{overflow-x:auto;margin:16px 0;}
table{border-collapse:collapse;width:100%;font-size:16px;}
th,td{text-align:left;vertical-align:top;padding:12px 14px;}
th{font-weight:800;background:var(--bg-alt);}
tr:nth-child(even) td{background:color-mix(in srgb,var(--bg-alt) 55%,transparent);}
@media (max-width:560px){
  table,tbody,tr,td{display:block;width:100%;}
  thead{display:none;}
  tr{padding:10px 0;}
  td{padding:4px 0;background:none!important;}
  tr + tr{margin-top:12px;}
}
dl.facts{margin:16px 0;display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:10px 22px;}
dl.facts dt{font-weight:800;}
dl.facts dd{margin:0;}
@media (max-width:480px){dl.facts{grid-template-columns:1fr;gap:2px;} dl.facts dd{margin-bottom:12px;}}
.toc{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px;padding:0;list-style:none;}
.toc li{margin:0;}
.toc a{display:inline-block;font-size:15px;padding:8px 16px;border-radius:999px;background:var(--bg-alt);color:var(--ink);text-decoration:none;}
.toc a:hover{background:color-mix(in srgb,var(--bg-alt) 70%,var(--ink) 8%);}
main details{padding:18px 0;}
main details + details{box-shadow:0 -1px 0 color-mix(in srgb,var(--ink) 10%,transparent);}
main summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;
  font-weight:800;font-size:19px;line-height:1.3;
}
main summary::-webkit-details-marker{display:none;}
main summary::after{content:"+";color:var(--accent);font-weight:800;flex:none;}
main details[open] summary::after{content:"\2212";}
main details > :not(summary){margin-top:10px;}
.contact-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;}
.button{
  display:inline-block;background:var(--badge-bg);color:var(--badge-ink);text-decoration:none;
  font-weight:800;font-size:17px;padding:14px 26px;border-radius:999px;transition:transform .2s var(--ease);
}
.button:hover{transform:translateY(-2px);}
.contact-card{margin:8px 0 20px;}