/* =========================================================
   VIKALPA FOUNDATION — Legal Pages
   Token system: sky blue / black / cream white
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;

  /* --- layout --- */
  --rail-w: 88px;
  --content-w: 760px;
  --radius: 14px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--sky-pale-2); color:var(--sky-deep); }

a{ color:var(--sky-deep); text-decoration-thickness:1.5px; text-underline-offset:2px; }
a:hover{ color:var(--sky); }

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,4vw,48px);
  background:rgba(250,246,236,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cream-line);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  color:var(--ink); text-decoration:none;
}
.brand .mark{
  width:30px; height:30px; border-radius:50%;
  background:conic-gradient(from 220deg, var(--sky), var(--sky-deep) 60%, var(--ink) 100%);
  flex:none;
}
.topbar nav a{
  margin-left:22px; font-size:0.92rem; font-weight:500;
  color:var(--ink-soft); text-decoration:none;
}
.topbar nav a.active,
.topbar nav a:hover{ color:var(--sky-deep); }

/* ---------- hero ---------- */
.hero{
  padding:clamp(48px,8vw,88px) clamp(20px,4vw,48px) clamp(28px,5vw,44px);
  max-width:calc(var(--content-w) + var(--rail-w) + 64px);
  margin:0 auto;
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--sky-deep); font-weight:600;
  padding:6px 12px; border-radius:999px;
  background:var(--sky-pale); border:1px solid var(--sky-pale-2);
  opacity:0; animation:rise .6s ease forwards;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.1rem,5vw,3.2rem);
  line-height:1.08;
  margin:18px 0 14px;
  max-width:14ch;
  opacity:0; animation:rise .7s ease .08s forwards;
}
.hero p.lede{
  max-width:56ch; color:var(--ink-soft); font-size:1.06rem;
  opacity:0; animation:rise .7s ease .16s forwards;
}
.hero .meta{
  margin-top:22px; display:flex; gap:18px; flex-wrap:wrap;
  font-size:0.86rem; color:var(--ink-soft);
  opacity:0; animation:rise .7s ease .24s forwards;
}
.hero .meta strong{ color:var(--ink); }

@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- page frame: rail + content ---------- */
.frame{
  max-width:calc(var(--content-w) + var(--rail-w) + 64px);
  margin:0 auto;
  display:grid;
  grid-template-columns:var(--rail-w) 1fr;
  gap:8px;
  padding:0 clamp(20px,4vw,48px) 40px;
  align-items:start;
}

/* ---------- signature element: the mala / prayer-bead rail ---------- */
.rail{
  position:sticky; top:96px;
  display:flex; flex-direction:column; align-items:center;
  padding-top:6px;
}
.rail .track{
  position:relative; width:2px; background:var(--cream-line);
  border-radius:2px;
}
.rail .fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(var(--sky), var(--sky-deep));
  border-radius:2px; transition:height .15s linear;
}
.rail .bead{
  position:relative; z-index:2;
  width:11px; height:11px; margin:0; border-radius:50%;
  background:var(--white); border:2px solid var(--cream-line);
  cursor:pointer; transition:border-color .25s, background .25s, transform .25s;
}
.rail .bead:hover{ transform:scale(1.2); }
.rail .bead.active{
  background:var(--sky); border-color:var(--sky-deep);
  box-shadow:0 0 0 4px var(--sky-pale);
}
.rail .bead-label{
  position:absolute; left:26px; top:50%; transform:translateY(-50%);
  white-space:nowrap; font-size:0.78rem; font-weight:500;
  color:var(--ink); background:var(--white);
  padding:4px 10px; border-radius:8px; border:1px solid var(--cream-line);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  transform:translateY(-50%) translateX(-4px);
}
.rail .bead:hover .bead-label{ opacity:1; transform:translateY(-50%) translateX(0); }

@media (max-width:860px){
  .rail{ display:none; }
  .frame{ grid-template-columns:1fr; }
  .progress-mobile{ display:block; }
}

/* mobile fallback: slim top progress bar */
.progress-mobile{
  display:none;
  position:sticky; top:57px; z-index:39; height:3px; background:var(--cream-line);
}
.progress-mobile i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--sky), var(--sky-deep));
}

/* ---------- content card ---------- */
.doc{
  background:var(--white);
  border:1px solid var(--cream-line);
  border-radius:var(--radius);
  padding:clamp(24px,4vw,52px);
}

.doc section{ scroll-margin-top:110px; }
.doc section + section{
  margin-top:38px; padding-top:32px; border-top:1px solid var(--cream-line);
}

.doc h2{
  font-family:var(--font-display); font-weight:600;
  font-size:1.4rem; color:var(--ink); margin:0 0 4px;
  display:flex; align-items:baseline; gap:10px;
}
.doc h2 .num{
  font-family:var(--font-body); font-weight:700; font-size:0.85rem;
  color:var(--sky-deep); background:var(--sky-pale);
  border-radius:6px; padding:2px 8px;
}
.doc h3{
  font-family:var(--font-body); font-weight:600; font-size:1.02rem;
  color:var(--ink); margin:22px 0 8px;
}
.doc p{ color:var(--ink-soft); margin:12px 0; }
.doc ul{ margin:12px 0; padding-left:22px; color:var(--ink-soft); }
.doc li{ margin:6px 0; }
.doc li::marker{ color:var(--sky-deep); }
.doc strong{ color:var(--ink); }

.callout{
  margin:16px 0; padding:14px 16px;
  background:var(--sky-pale); border:1px solid var(--sky-pale-2);
  border-radius:10px; font-size:0.92rem; color:var(--sky-deep);
}
.callout strong{ color:var(--sky-deep); }

table.terms-table{ width:100%; border-collapse:collapse; margin:14px 0; font-size:0.92rem; }
table.terms-table th, table.terms-table td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--cream-line);
}
table.terms-table th{ color:var(--ink); font-weight:600; }
table.terms-table td{ color:var(--ink-soft); }

.contact-card{
  margin-top:8px; padding:18px 20px; border-radius:12px;
  background:var(--cream-deep); border:1px solid var(--cream-line);
}
.contact-card p{ margin:4px 0; color:var(--ink); }

/* ---------- back-home CTA ---------- */
.home-return{
  max-width:calc(var(--content-w) + var(--rail-w) + 64px);
  margin:0 auto; padding:0 clamp(20px,4vw,48px) 80px;
  display:flex; justify-content:center;
}
.home-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:0.98rem;
  color:var(--white); background:var(--ink);
  padding:14px 28px; border-radius:999px; text-decoration:none;
  border:1px solid var(--ink);
  transition:background .25s, transform .2s, box-shadow .25s;
}
.home-btn:hover{
  background:var(--sky-deep); border-color:var(--sky-deep);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -10px rgba(27,111,168,0.55);
}
.home-btn svg{ transition:transform .25s; }
.home-btn:hover svg{ transform:translateX(-3px); }

/* ---------- floating quick-home button ---------- */
.float-home{
  position:fixed; right:20px; bottom:20px; z-index:50;
  width:48px; height:48px; border-radius:50%;
  background:var(--sky); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; box-shadow:0 8px 20px -6px rgba(46,156,219,0.6);
  border:1px solid var(--sky-deep);
  opacity:0; transform:translateY(10px);
  transition:opacity .3s, transform .3s, background .25s;
}
.float-home.show{ opacity:1; transform:translateY(0); }
.float-home:hover{ background:var(--sky-deep); }

/* ---------- footer ---------- */
footer{
  text-align:center; padding:28px 20px 40px;
  color:var(--ink-soft); font-size:0.84rem;
}

/* ---------- mobile nav toggle for topbar links ---------- */
@media (max-width:640px){
  .topbar nav{ display:none; }
}