/* Anya Ngay? — shared page styles: /privacy, /delete-account, /support and the landing.
   Tokens are ANYA-DS v0.3 (3. Semantic, dark). Fonts are self-hosted from /fonts so no page
   makes a third-party request. */
:root{
    --page:#00201d; --raised:#005049; --active:#316c65; --mint:#39fce9; --mint-400:#86f5e7; --mint-600:#3ac9ba;
    --text:#ffffff; --muted:#b2eee5; --on-mint:#00201d; --border:#3c8077; --border-subtle:#005049;
    --happy:#fce239; --happy-on:#161306; --calm:#39dbfc; --calm-on:#001117; --anxious:#fc8439; --anxious-on:#170600;
    --sad:#399efc; --sad-on:#000b17; --tired:#ae39fc; --tired-on:#ffffff; --stressed:#fc4039; --stressed-on:#170100;
    --r-sm:8px; --r-md:16px; --r-lg:20px; --r-pill:1000px;
    --display:'Vidaloka', Georgia, 'Times New Roman', serif;
    --body:'Lexend Deca', 'Lexend', system-ui, -apple-system, sans-serif;
    --action:'Lexend', 'Lexend Deca', system-ui, sans-serif;
    --mono:'DM Mono', 'SF Mono', Menlo, Consolas, monospace;
    --hand:'Just Me Again Down Here', 'Bradley Hand', 'Comic Sans MS', cursive;
    --ease:cubic-bezier(.22,1,.36,1); --ease-hover:cubic-bezier(.33,1,.68,1);
    color-scheme:dark;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;overflow-x:hidden}
  html.lenis,html.lenis body{height:auto}
  .lenis.lenis-smooth{scroll-behavior:auto!important}
  body{margin:0;background:var(--page);color:var(--text);font-family:var(--body);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:var(--muted);text-decoration:none;transition:color .25s var(--ease-hover)}
  a:hover{color:var(--mint)}
  a:focus-visible,button:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
  img{display:block;max-width:100%}
  h1,h2,h3,p{margin:0}
  button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

  /* type */
  .mono{font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase}
  .mono-lg{font-family:var(--mono);font-weight:400;font-size:14px;line-height:20px;letter-spacing:.04em;text-transform:uppercase}
  .hand{font-family:var(--hand);font-weight:400;font-size:44px;line-height:1;color:var(--muted)}
  .t-big{font-family:var(--display);font-weight:400;font-size:196px;line-height:.92;letter-spacing:-6px;text-wrap:balance}
  .t-xl{font-family:var(--display);font-weight:400;font-size:64px;line-height:70px;letter-spacing:-1.5px;text-wrap:balance}
  .t-l{font-family:var(--display);font-weight:400;font-size:48px;line-height:56px;letter-spacing:-1px;text-wrap:balance}
  .t-md{font-family:var(--display);font-weight:400;font-size:32px;line-height:40px;text-wrap:balance}
  .t-lead{font-size:20px;line-height:32px;color:var(--muted)}
  .t-body{font-size:16px;line-height:24px;color:var(--muted)}
  .t-caption{font-weight:500;font-size:12px;line-height:16px;color:var(--muted)}
  .t-nav{font-weight:500;font-size:15px;line-height:20px}
  .t-button{font-family:var(--action);font-weight:700;font-size:16px;line-height:24px}
  .t-bio{font-family:var(--body);font-weight:400;font-size:40px;line-height:54px;letter-spacing:-.5px;text-wrap:pretty}
  .em{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.18em;margin:0 .08em}

  .wrap{width:min(1200px,100% - 128px);margin-inline:auto}

  /* type */
  .mono{font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase}
  .mono-lg{font-family:var(--mono);font-weight:400;font-size:14px;line-height:20px;letter-spacing:.04em;text-transform:uppercase}
  .hand{font-family:var(--hand);font-weight:400;font-size:44px;line-height:1;color:var(--muted)}
  .t-big{font-family:var(--display);font-weight:400;font-size:196px;line-height:.92;letter-spacing:-6px;text-wrap:balance}
  .t-xl{font-family:var(--display);font-weight:400;font-size:64px;line-height:70px;letter-spacing:-1.5px;text-wrap:balance}
  .t-l{font-family:var(--display);font-weight:400;font-size:48px;line-height:56px;letter-spacing:-1px;text-wrap:balance}
  .t-md{font-family:var(--display);font-weight:400;font-size:32px;line-height:40px;text-wrap:balance}
  .t-lead{font-size:20px;line-height:32px;color:var(--muted)}
  .t-body{font-size:16px;line-height:24px;color:var(--muted)}
  .t-caption{font-weight:500;font-size:12px;line-height:16px;color:var(--muted)}
  .t-nav{font-weight:500;font-size:15px;line-height:20px}
  .t-button{font-family:var(--action);font-weight:700;font-size:16px;line-height:24px}
  .t-bio{font-family:var(--body);font-weight:400;font-size:40px;line-height:54px;letter-spacing:-.5px;text-wrap:pretty}
  .em{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.18em;margin:0 .08em}

  .wrap{width:min(1200px,100% - 128px);margin-inline:auto}
  /* ── top bar · brand · language switcher · CTA ──────────────────────── */
  .top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 40px;
    background:rgba(0,32,29,0);border-bottom:1px solid rgba(0,80,73,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
    transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease),-webkit-backdrop-filter .5s var(--ease),padding .5s var(--ease)}
  .top.scrolled{background:rgba(0,32,29,.72);border-bottom-color:rgba(0,80,73,.9);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);padding:12px 40px}
  .brand{display:flex;align-items:center;gap:10px;color:var(--text)}
  .brand:hover{color:var(--text)}
  .logo{position:relative;display:inline-block;width:44px;height:41px;flex:0 0 auto}
  .logo svg{width:100%;height:100%;display:block}
  .logo img{position:absolute;left:13%;top:28%;width:74%;height:auto}
  .brand .logo{transition:transform .35s var(--ease)}
  .brand:hover .logo{transform:scale(1.08) rotate(-4deg)}
  .right{display:flex;align-items:center;gap:14px}
  .lang{display:flex;gap:6px;padding:4px;border:1px solid var(--border);border-radius:var(--r-pill);background:rgba(0,32,29,.4)}
  .lang button{font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:var(--r-pill);color:var(--muted);transition:background .25s var(--ease-hover),color .25s var(--ease-hover),transform .25s var(--ease-hover)}
  .lang button:hover{color:var(--text);transform:translateY(-1px)}
  .lang button[aria-pressed="true"]{background:var(--mint);color:var(--on-mint)}
  .top .cta-mini{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border:1px solid var(--border);border-radius:var(--r-sm);font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);transition:border-color .25s,background .25s,transform .3s var(--ease-hover)}
  .top .cta-mini .sq{width:22px;height:22px;border-radius:5px;background:var(--mint);display:grid;place-items:center;color:var(--on-mint)}
  .top .cta-mini:hover{border-color:var(--mint);background:var(--raised);transform:scale(1.02)}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 26px 16px 16px;border-radius:var(--r-sm);border:1px solid transparent;font-family:var(--action);font-weight:700;font-size:16px;line-height:24px;white-space:normal;text-align:left;min-width:0;max-width:100%;
    transition:transform .3s var(--ease-hover),background-color .25s var(--ease-hover),border-color .25s var(--ease-hover),box-shadow .3s var(--ease-hover),color .25s var(--ease-hover);will-change:transform}
  .btn .sq{width:32px;height:32px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto}
  .btn>span:last-child{min-width:0}
  .btn:hover{transform:scale(1.02)} .btn:active{transform:scale(.985);transition-duration:.12s}
  .btn-mint{background:var(--mint);color:var(--on-mint)} .btn-mint .sq{background:var(--on-mint);color:var(--mint)}
  .btn-mint:hover{background:var(--mint-600);box-shadow:0 8px 28px -8px rgba(57,252,233,.45)}
  .btn-ghost{background:var(--page);color:var(--text);border-color:var(--border)} .btn-ghost .sq{background:var(--raised);color:var(--mint)}
  .btn-ghost:hover{border-color:var(--mint);background:var(--raised);box-shadow:0 8px 28px -10px rgba(57,252,233,.35)}

  /* ── in-page routes · Support and Delete your data ──────────────────── */
  .page{padding:calc(76px + 48px) 0 120px;min-height:70vh}
  .page .wrap{display:flex;flex-direction:column;gap:22px;max-width:820px}
  .page .back{color:var(--muted);align-self:flex-start}
  .page .back:hover{color:var(--mint)}
  .page .page-title{font-size:112px;letter-spacing:-4px;line-height:.92}
  .page .page-intro{max-width:640px}
  .faq{margin:24px 0 0;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border-subtle)}
  .faq dt{font-family:var(--display);font-size:28px;line-height:36px;padding:28px 0 8px}
  .faq dd{margin:0;padding:0 0 28px;color:var(--muted);font-size:18px;line-height:30px;border-bottom:1px solid var(--border-subtle);max-width:720px}
  .steps{margin:8px 0 0;padding:0 0 0 22px;color:var(--muted);font-size:18px;line-height:30px;display:flex;flex-direction:column;gap:12px}
  .steps li::marker{color:var(--mint);font-family:var(--mono)}
  .page .card{border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 32px;background:rgba(0,80,73,.25);display:flex;flex-direction:column;gap:12px}
  .js .page.enter .wrap>*{animation:pagein .8s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
  @keyframes pagein{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
  .js main.reenter{animation:fadein .7s var(--ease) both}
  @keyframes fadein{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
  .priv-lang{align-self:flex-start}
  .psecs{margin-top:8px;border-top:1px solid var(--border-subtle)}
  .psec{padding:28px 0;border-bottom:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:10px}
  .psec .mono{color:var(--mint)}
  .psec p:not(.mono){color:var(--muted);font-size:18px;line-height:30px;max-width:720px}
  .plists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px}
  .plist{border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 28px;background:rgba(0,80,73,.25)}
  .plist ul{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:16px;line-height:26px;display:flex;flex-direction:column;gap:6px}
  .plist li::marker{color:var(--mint)}
  @media (max-width:820px){.plists{grid-template-columns:1fr}.psec p:not(.mono){font-size:16px;line-height:26px}.priv-lang{flex-wrap:wrap}}
  @media (max-width:820px){.page{padding-top:calc(60px + 32px)}.page .page-title{font-size:56px;letter-spacing:-1.5px}.faq dt{font-size:22px;line-height:30px}.faq dd,.steps{font-size:16px;line-height:26px}.page .card{padding:22px}}

  .top.static{position:sticky;background:rgba(0,32,29,.72);border-bottom-color:rgba(0,80,73,.9);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);padding:12px 40px}
  .top.static+.page{padding-top:48px}
  @media (max-width:820px){.top.static{padding:12px 20px}.top .brand>span:last-child{display:none}}
