/* ============================================================
   Lotara — Quiet Luxe design system
   Shared by the landing page and every sub-page (about, contact,
   help, privacy, terms). Page-specific rules stay in the page.
   ============================================================ */

:root{
  /* Quiet Luxe palette — the app's own tokens */
  --page:#05060d; --navy-1:#0a0c1c; --navy-2:#101228; --navy-3:#14162e;
  --lavender:#a29bfe; --purple:#6633CC; --rose:#e0a8d4; --sage:#9cc2ad;
  --gold:#e8cf9a; --calm:#9bb1de; --wisdom:#a3b2e0; --focus:#b3a8f0; --love:#d7a6cb;
  --ink:rgba(255,255,255,1); --ink-2:rgba(255,255,255,0.72); --ink-3:rgba(255,255,255,0.52);
  --ink-4:rgba(255,255,255,0.38); --ink-5:rgba(255,255,255,0.20);
  --surface:rgba(255,255,255,0.05); --surface-2:rgba(255,255,255,0.035); --border:rgba(255,255,255,0.08);
  --hero-grad:linear-gradient(135deg,#6f5cd6 0%,#8a6fd0 45%,#c98fd8 100%);
  --font:'Nunito',-apple-system,BlinkMacSystemFont,'SF Pro Rounded',sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;line-height:1.5}
a{color:var(--lavender);text-decoration:none;transition:color .2s ease}
a:hover{color:#c4bcff}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-4)}
a:focus-visible,button:focus-visible{outline:2px solid var(--lavender);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy-3);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:200}
.skip:focus{left:0}

/* ---------------- NAV ---------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(10,12,28,0.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand .name{font-size:20px;font-weight:800;letter-spacing:-0.3px;color:#fff}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links .lnk{font-size:15px;font-weight:600;color:var(--ink-2)}
.nav-links .lnk:hover{color:#fff}

/* ---------------- BUTTONS ---------------- */
.btn{font-family:var(--font);font-weight:700;cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,background .2s ease}
.btn-primary{font-size:15px;color:#fff;background:var(--hero-grad);border-radius:9999px;padding:11px 22px;box-shadow:0 0 34px rgba(102,51,204,0.34)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 46px rgba(102,51,204,0.5)}
.btn-ghost{font-size:15px;color:var(--ink-2);background:transparent;border:1px solid var(--border);border-radius:9999px;padding:10px 20px}
.btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,0.28)}
.btn-store{font-size:16px;color:#fff;background:var(--hero-grad);border-radius:16px;padding:15px 26px;box-shadow:0 0 40px rgba(102,51,204,0.34)}
.btn-store:hover{transform:translateY(-2px);box-shadow:0 0 54px rgba(102,51,204,0.5)}
.btn-store .lbl{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.btn-store .lbl small{font-size:11px;font-weight:600;opacity:.85}
.btn-store .lbl b{font-size:17px;font-weight:800}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,0.35);animation:rippleOut .6s ease-out;pointer-events:none}
@keyframes rippleOut{to{transform:scale(3.2);opacity:0}}

/* ---------------- SECTION SHELL ---------------- */
section.block{position:relative;padding:100px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 56px}
.sec-head .eyebrow{color:var(--lavender);opacity:.85;margin-bottom:16px}
.sec-head h2{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-0.8px;color:#fff;line-height:1.12}
.sec-head p{font-size:17px;color:var(--ink-3);margin-top:16px;line-height:1.6}

/* ---------------- SCROLL REVEAL ----------------
   Restored to the original site's character: 40px of travel over 0.8s,
   with directional variants so a section arrives from the side it lives
   on rather than everything sliding the same way. The subtler 22px
   version read as no animation at all. */
.reveal{opacity:0;transform:translateY(40px) scale(.965);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.reveal-left{transform:translate3d(-44px,18px,0) scale(.97)}
.reveal-right{transform:translate3d(44px,18px,0) scale(.97)}
.reveal-scale{transform:scale(.94)}
.reveal.in{opacity:1;transform:none}

/* ---------------- FOOTER ----------------
   Was a default four-column link list on flat navy. Now it has a lit top
   edge, a bloom behind the wordmark, and link rows that actually respond —
   so the page ends deliberately instead of just stopping. */
.foot{position:relative;background:var(--navy-1);padding:72px 0 34px;overflow:hidden}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(162,155,254,.42),rgba(232,207,154,.30),transparent)}
.foot::after{content:"";position:absolute;top:-160px;left:8%;width:440px;height:320px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(162,155,254,.13),transparent)}
.foot .wrap{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px;margin-bottom:48px}
.foot-brand .brand{margin-bottom:16px}
.foot-brand p{font-size:14px;color:var(--ink-3);line-height:1.7;max-width:300px}
.foot-brand .fb-tag{display:inline-block;margin-top:18px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-4)}
.foot-col h4{font-size:11px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-4);margin-bottom:18px}
.foot-col a{display:block;font-size:14.5px;color:var(--ink-3);margin-bottom:13px;width:fit-content;
  transition:color .22s ease,transform .22s cubic-bezier(.22,.61,.36,1)}
.foot-col a:hover{color:#fff;transform:translateX(3px)}
.foot-bot{border-top:1px solid var(--border);padding-top:28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-bot p{font-size:13.5px;color:var(--ink-4)}
.foot-bot .fb-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-bot .fb-links a{font-size:13.5px;color:var(--ink-4)}
.foot-bot .fb-links a:hover{color:var(--ink-2)}

/* ---------------- SUB-PAGE SHELL ----------------
   Shared by about / contact / help / privacy / terms. */
.page-hero{position:relative;padding:150px 0 56px;overflow:hidden;text-align:center}
.page-hero::before{content:"";position:absolute;top:-320px;left:50%;transform:translateX(-50%);width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(162,155,254,0.17)0%,rgba(162,155,254,0)62%);filter:blur(30px);pointer-events:none}
.page-hero .inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.page-hero .eyebrow{color:var(--lavender);opacity:.9;margin-bottom:18px}
.page-hero h1{font-size:clamp(36px,5vw,56px);font-weight:800;letter-spacing:-1.2px;line-height:1.06;color:#fff;margin-bottom:20px}
.page-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;background:var(--hero-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.page-hero p{font-size:18px;color:var(--ink-3);line-height:1.65;max-width:600px;margin:0 auto}
.page-hero .updated{margin-top:22px;font-size:13px;color:var(--ink-4)}

.doc{max-width:820px;margin:0 auto;padding:20px 0 40px}
.doc h2{font-size:26px;font-weight:800;color:#fff;letter-spacing:-0.5px;margin:52px 0 16px;scroll-margin-top:100px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:18px;font-weight:700;color:var(--ink);margin:30px 0 11px}
.doc p{font-size:16px;color:var(--ink-3);line-height:1.75;margin-bottom:16px}
.doc ul{margin:0 0 18px 4px;list-style:none}
.doc li{position:relative;font-size:16px;color:var(--ink-3);line-height:1.7;padding-left:24px;margin-bottom:10px}
.doc li::before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--lavender);opacity:.65}
.doc strong{color:var(--ink-2);font-weight:700}
.doc a{border-bottom:1px solid rgba(162,155,254,.35)}

/* A pulled-out promise — the tone of the whole app in one line. */
.pledge{border-left:2px solid rgba(162,155,254,.45);background:rgba(162,155,254,.07);border-radius:0 16px 16px 0;padding:20px 24px;margin:26px 0}
.pledge p{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-2);line-height:1.6;margin:0}

/* Card grids used by about / help / contact. */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.lcard{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:28px;transition:transform .3s ease,background .3s ease,border-color .3s ease}
.lcard:hover{transform:translateY(-4px);background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.14)}
.lcard .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:rgba(255,255,255,0.06)}
.lcard .ic svg{width:24px;height:24px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lcard h3{font-size:19px;font-weight:700;color:#fff;letter-spacing:-0.3px;margin-bottom:9px}
.lcard p{font-size:14.5px;color:var(--ink-3);line-height:1.6}

/* On-page contents rail for the long legal documents. */
.toc{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:24px 26px;margin-bottom:16px}
.toc h4{font-size:11px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-4);margin-bottom:14px}
.toc ol{list-style:none;counter-reset:t;columns:2;column-gap:28px}
.toc li{counter-increment:t;margin-bottom:9px;break-inside:avoid}
.toc a{font-size:14.5px;color:var(--ink-3)}
.toc a::before{content:counter(t) ". ";color:var(--ink-5);font-weight:700}
.toc a:hover{color:#fff}

/* Accordion for help. Uses <details> so it works with JS disabled. */
.faq{border:1px solid var(--border);border-radius:18px;background:var(--surface-2);margin-bottom:12px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-size:16.5px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px;transition:background .2s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgba(255,255,255,.04)}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);transform:rotate(45deg);transition:transform .3s ease;margin-top:-4px}
.faq[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.faq .ans{padding:0 24px 22px}
.faq .ans p{font-size:15.5px;color:var(--ink-3);line-height:1.7;margin-bottom:12px}
.faq .ans p:last-child{margin-bottom:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001s!important;animation-iteration-count:1!important}
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .toc ol{columns:1}
}
@media (max-width:768px){
  .nav-links .lnk{display:none}
  .page-hero{padding:120px 0 40px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .foot-bot{flex-direction:column;text-align:center}
  .doc h2{font-size:23px}
}