/* Shared base styles for the Niyat quiz funnels (index / answer / struggle).
   Page-specific component styles (.prompt sizing, .opt/.pill, result card, etc.)
   stay inline in each page's <style>, which loads AFTER this file and overrides.
   Keep design tokens + chrome here so a brand/layout change is one edit. */

:root{
  --emerald:#1B4D35;--emerald-tint:rgba(27,77,53,.07);--emerald-tint-strong:rgba(27,77,53,.12);
  --cream:#FBF7F0;--cream-deep:#F3ECE0;
  --gold:#C8973A;--gold-soft:#D9B871;
  --ink:#0F1A14;--ink-dim:#4A5750;--ink-faint:#8A938C;
  --line:rgba(15,26,20,.10);--line-soft:rgba(15,26,20,.06);
  --serif:"Newsreader","Cambria",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* soft palm-frond shadow motif — pure CSS, no image weight */
body::before{
  content:"";position:fixed;top:-12%;right:-18%;width:75vw;height:75vw;max-width:560px;max-height:560px;
  background:radial-gradient(ellipse at 70% 30%,rgba(200,151,58,.10),transparent 72%);
  pointer-events:none;z-index:0;
}
body::after{
  content:"";position:fixed;bottom:-20%;left:-22%;width:70vw;height:70vw;max-width:520px;max-height:520px;
  background:radial-gradient(ellipse at 30% 70%,rgba(27,77,53,.07),transparent 70%);
  pointer-events:none;z-index:0;
}

.stage{position:relative;z-index:1;min-height:100svh;min-height:100vh;display:flex;flex-direction:column;
  max-width:520px;margin:0 auto;padding:0 24px;padding:0 max(24px,env(safe-area-inset-left)) 0 max(24px,env(safe-area-inset-right));}

/* top bar: brand + progress */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 8px;min-height:64px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:20px;letter-spacing:-.01em;color:var(--emerald)}
.brand img{width:26px;height:26px;border-radius:7px;display:block;object-fit:cover}
.progress{display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .3s var(--ease)}
.progress.show{opacity:1}
.progress-label{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.progress-track{width:64px;height:3px;border-radius:3px;background:var(--line)}
.progress-fill{height:100%;border-radius:3px;background:var(--gold);width:0;transition:width .45s var(--ease)}

/* screen wrapper */
.screens{flex:1;display:flex;flex-direction:column;justify-content:center;padding:8px 0 32px}
.screen{display:none;flex-direction:column}
.screen.active{display:flex;animation:screenIn .42s var(--ease) both}
@keyframes screenIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .screen.active{animation:fadeIn .3s ease both}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
}

.eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}