/* ==========================================================================
   Koti Japa Yagna — site.css
   Landing & participation page · ISKCON Bangalore · Swagatam Krishna 2026

   All visual constants live in the :root block below. To re-skin, edit there.
   Ported from the design prototype; inline-style values preserved verbatim.
   ========================================================================== */

:root {
  /* Colour */
  --ink:            #2a1a24;   /* primary dark / body text */
  --dark-band:      #23131c;   /* footer / stat strip bg */
  --deepest:        #1e1119;   /* marquee bg / deepest dark */
  --terracotta:     #c65d2e;   /* primary accent / CTA */
  --rust:           #963c18;   /* CTA hover / play triangle */
  --saffron:        #e08a4c;   /* headline accent ("Koti") */
  --gold:           #c9a24b;   /* rings, medallions, fine detail */
  --gold-text:      #e0b970;   /* gold on-dark text / hairlines */
  --bone:           #f7efe1;   /* page background */
  --sand:           #efe3cf;   /* alternating section bg */
  --paper:          #fffdf7;   /* cards / panels */
  --paper-raised:   #fffef9;   /* raised cards */
  --temple-green:   #3f6d55;   /* reflective line (sparing) */
  --muted:          #7a6a5f;   /* muted text */
  --muted-2:        #9a8b7d;   /* labels */
  --live:           #7ed99a;   /* live dot */
  --hairline:       rgba(42,26,36,.12);
  --hairline-faint: rgba(42,26,36,.06);
  --disabled-bg:    #e3d3c4;
  --disabled-text:  #a8977f;

  /* Type */
  /* Body sans: Noto Sans sits at the end of the stack to supply the under-dot
     IAST letters (ṛ ṣ ṇ …) Hanken lacks, per-character — Hanken already has the
     macrons (ā ī ū). For DISPLAY Sanskrit we do not rely on fallback at all; we
     set the whole run in --sanskrit (see below), which covers everything. */
  --sans:     'Hanken Grotesk', 'Noto Sans', system-ui, sans-serif;
  --serif:    'Marcellus', 'EB Garamond', serif;
  /* Display Sanskrit (marquee, verse, mantras). EB Garamond carries the FULL
     IAST set (ā ī ū ṛ ṣ ṇ ṭ ḍ ṃ ḥ ś …); Marcellus lacks the under-dot letters,
     which is why a word like "kṛṣṇa" used to look part-Marcellus, part-Garamond.
     Keeping the whole transliteration in one covering face removes the mismatch. */
  --sanskrit: 'EB Garamond', serif;

  /* Layout */
  --maxw: 1160px;
  --pad:  26px;
}

/* Reset ------------------------------------------------------------------ */
* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }   /* beat author display rules (.btn etc.) */
html { scroll-behavior:smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
a { color: var(--ink); text-decoration:none; }
a:hover { color: var(--terracotta); }
img { max-width:100%; display:block; }

/* Shared helpers --------------------------------------------------------- */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.section { padding:86px 0; }
.eyebrow {
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--muted-2);
}
.eyebrow.accent { color:var(--terracotta); }
.tabular { font-variant-numeric: tabular-nums; }
.sanskrit { font-family: var(--sanskrit); }

.section-head { max-width:640px; margin-bottom:46px; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2 {
  font-family:var(--serif); font-weight:400; line-height:1.1;
  font-size:clamp(30px,5vw,46px); margin:14px 0;
}
.section-head p { color:var(--muted); font-size:17px; }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-weight:600; font-size:15px;
  padding:14px 26px; border-radius:5px; border:none;
  text-decoration:none; cursor:pointer; transition:.16s;
}
.btn-sm { font-size:14px; padding:11px 20px; }
.btn-primary { background:var(--terracotta); color:#fff; }
.btn-primary:hover { background:var(--rust); color:#fff; }
.btn-outline-gold {
  background:transparent; color:var(--gold-text);
  border:1px solid rgba(224,185,112,.4);
}
.btn-outline-gold:hover { border-color:var(--gold-text); color:#fff; }
.btn-gold { background:var(--gold); color:#20160a; }
.btn-gold:hover { background:#fff; color:#20160a; }

/* Nav -------------------------------------------------------------------- */
.nav {
  position:sticky; top:0; z-index:60;
  background:rgba(247,239,225,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(42,26,36,.07);
}
.nav .wrap {
  display:flex; align-items:center; justify-content:space-between; height:66px;
}
.nav-brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; min-width:0; flex-shrink:1; }
.nav-brand:hover .nav-title { color:var(--terracotta); }
.japa-mark { fill:currentColor; display:block; flex:none; }
.nav-mark { width:34px; height:34px; color:var(--terracotta); }
.nav-title {
  font-family:var(--serif); font-weight:400; font-size:19px; letter-spacing:.005em; transition:color .16s;
  display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nav-sub {
  display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2); margin-top:1px;
}
.nav-links { display:flex; gap:30px; font-size:14px; flex-wrap:wrap; }
.nav-links a { color:var(--muted); position:relative; padding:2px 0; transition:color .16s; }
.nav-links a:hover { color:var(--ink); }
.nav-links a.active { color:var(--ink); }
.nav-links a.active::after {
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1.5px;
  background:var(--terracotta); border-radius:2px;
}
.nav-actions { display:flex; align-items:center; gap:12px; flex:none; }
.nav-toggle {
  display:none; width:38px; height:38px; border:1px solid var(--hairline);
  border-radius:8px; background:transparent; cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.nav-toggle span { display:block; width:16px; height:1.5px; background:var(--ink); transition:.2s; }
.nav-links.open .nav-toggle span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }

@media (max-width:820px) {
  .nav-toggle { display:flex; }
  .nav-links {
    position:absolute; top:66px; left:0; right:0; flex-direction:column; flex-wrap:nowrap; gap:0;
    background:var(--bone);          /* fully opaque — no hero bleed-through */
    border-bottom:1px solid var(--hairline); box-shadow:0 20px 40px -30px rgba(42,26,36,.5);
    padding:6px 26px 14px;
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .28s ease, opacity .2s, padding .28s ease;
  }
  /* tall enough for every stacked row (must clear the total item height, or a
     column with flex-wrap would spill into a second column) */
  .nav-links.open { max-height:520px; opacity:1; }
  .nav-links a { padding:13px 0; border-bottom:1px solid var(--hairline-faint); font-size:15px; }
  .nav-links a:last-child { border-bottom:none; }
  .nav-links a.active::after { display:none; }
}
@media (max-width:520px) {
  .nav-title { font-size:16px; white-space:nowrap; }
  .nav-sub { display:none; }
  .nav-mark { width:30px; height:30px; font-size:15px; }
  .nav .btn.btn-sm { padding:9px 14px; font-size:13px; }
  .nav-brand { gap:9px; min-width:0; }
}

/* Hero ------------------------------------------------------------------- */
.hero {
  position:relative; overflow:hidden; color:var(--bone);
  background:radial-gradient(130% 120% at 85% -20%,#432436 0%,#2a1a24 52%,#1e1119 100%);
}
.hero::after {   /* faint gold star-field */
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 24%,rgba(201,162,75,.5),transparent),
    radial-gradient(1.5px 1.5px at 88% 16%,rgba(201,162,75,.4),transparent),
    radial-gradient(1.5px 1.5px at 60% 78%,rgba(201,162,75,.3),transparent),
    radial-gradient(1px 1px at 30% 62%,rgba(201,162,75,.32),transparent);
}
.hero .wrap {
  position:relative; z-index:2; padding:80px 26px 88px;
  display:grid; gap:44px; align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
}
.live-pill {
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold-text); border:1px solid rgba(224,185,112,.28);
  padding:7px 15px; border-radius:999px;
}
.dot-live {
  width:7px; height:7px; border-radius:50%; background:var(--live);
  box-shadow:0 0 8px var(--live); flex:none;
}
.hero h1 {
  font-family:var(--serif); font-weight:400; color:#fff;
  font-size:clamp(46px,8.2vw,80px); line-height:1.04; letter-spacing:.005em;
  margin:22px 0 10px;
}
.hero h1 em { font-style:normal; color:var(--saffron); }
.hero-sub {
  font-family:var(--sans); font-style:italic; font-weight:400;
  font-size:clamp(17px,3vw,22px); color:rgba(247,239,225,.74);
}
.hero-lead {
  max-width:452px; margin:22px 0 30px;
  color:rgba(247,239,225,.72); font-size:16.5px;
}
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* Countdown */
.countdown { margin-top:30px; display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap; }
.cd-unit { text-align:center; }
.cd-num {
  font-family:var(--sans); font-weight:500; font-size:34px; color:#fff;
  line-height:1; font-variant-numeric:tabular-nums;
}
.cd-lbl {
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(247,239,225,.5); margin-top:5px;
}
.cd-colon { font-family:var(--serif); font-size:24px; color:rgba(201,162,75,.5); line-height:1.2; }
@media (max-width:520px) {
  .countdown { gap:12px; }
}

/* Mala Ring */
.ring-col { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring { position:relative; width:min(348px,80vw); aspect-ratio:1; }
.ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring-arc { transition:stroke-dashoffset .3s; }
.ring-center {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
.ring-label { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(224,185,112,.85); }
.ring-count {
  font-family:var(--sans); font-weight:500; font-size:clamp(30px,7vw,44px);
  color:#fff; margin:4px 0; font-variant-numeric:tabular-nums;
}
.ring-note { font-size:12.5px; color:rgba(247,239,225,.62); }
.ring-pct { margin-top:24px; font-size:13px; color:rgba(247,239,225,.7); }
.ring-pct b { color:var(--gold-text); }

/* Stat strip ------------------------------------------------------------- */
.stat-strip { background:var(--dark-band); color:var(--bone); border-top:1px solid rgba(201,162,75,.14); }
.stat-strip .wrap { display:grid; grid-template-columns:repeat(3,1fr); padding:0; }
.stat {
  padding:24px 26px; text-align:center;
  border-right:1px solid rgba(201,162,75,.12);
}
.stat:last-child { border-right:none; }
.stat-num { font-family:var(--sans); font-weight:500; font-size:clamp(22px,4vw,30px); color:#fff; font-variant-numeric:tabular-nums; }
.stat-lbl { font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,239,225,.55); margin-top:4px; }
.stat-sub { font-size:12px; color:var(--gold-text); margin-top:2px; }

/* Marquee ---------------------------------------------------------------- */
.marquee {
  background:var(--deepest); overflow:hidden;
  border-bottom:1px solid rgba(201,162,75,.14); padding:13px 0;
}
.marquee-track {
  display:flex; width:max-content; animation:kjy-marquee 34s linear infinite;
  font-family:var(--sanskrit); font-size:16px; letter-spacing:.16em; color:var(--gold);
}
.marquee-track span { white-space:nowrap; }
@keyframes kjy-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* Activity ticker -------------------------------------------------------- */
.activity { background:var(--bone); padding:16px 26px; text-align:center; }
.activity-pill {
  display:inline-flex; align-items:center; gap:11px;
  background:var(--paper); border:1px solid var(--hairline); border-radius:999px;
  padding:9px 20px; font-size:13.5px; color:var(--muted);
}
.activity-pill b { color:var(--ink); font-weight:600; }
.activity-pill .n { color:var(--terracotta); }
.activity-pill [data-activity] { transition:opacity .24s ease; }
.act-when { white-space:nowrap; }   /* keep "· 2 min ago" together — never split the time */

/* Why chant -------------------------------------------------------------- */
.why { background:var(--paper); }
.split {
  display:grid; gap:52px; align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.photo {
  position:relative; aspect-ratio:4/5; border-radius:12px; overflow:hidden;
  border:1px solid var(--hairline);
}
.photo-fill { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* RKC deity photo is exactly 4:5 (no crop), so its bottom watermark would show —
   zoom in anchored to the top to push the watermark out of the frame. */
.photo-fill[data-img="why-photo"] { transform:scale(1.16); transform-origin:50% 0; }
.photo-caption {
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
  background:linear-gradient(to top,rgba(30,17,25,.72),transparent);
  color:var(--bone); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  pointer-events:none;
}
.verse {
  font-family:var(--sanskrit); font-size:clamp(24px,3.6vw,38px);
  line-height:1.3; color:var(--ink); margin-top:18px;
}
.verse .em { color:var(--terracotta); }
.verse-translation { color:var(--muted); font-size:16.5px; margin-top:20px; max-width:460px; }
.verse-cite {
  font-family:var(--sans); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2); margin-top:18px;
}

/* The mantras ------------------------------------------------------------ */
.mantras { background:var(--paper); }
.mantra { text-align:center; padding:34px 0; }
.mantra + .mantra { border-top:1px solid var(--hairline); }
.mantra-label { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--terracotta); font-weight:600; margin-bottom:16px; }
.mantra-text { font-size:clamp(21px,3.4vw,30px); line-height:1.55; color:var(--ink); letter-spacing:.01em; }
.mantra-text .br-sm { display:none; }   /* extra line breaks appear only on mobile (see media query) */
.mantra-meaning { color:var(--muted); font-size:16px; max-width:620px; margin:18px auto 0; line-height:1.65; }
.mantra-meaning cite { display:block; font-style:normal; font-size:12.5px; color:var(--muted-2); letter-spacing:.03em; margin-top:10px; }

/* Bead-strand divider ---------------------------------------------------- */
.bead-divider {
  height:13px;
  background-image:radial-gradient(circle at center,var(--gold) 0,var(--gold) 2.4px,transparent 3px);
  background-size:22px 13px; background-repeat:repeat-x; background-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}

/* How it works ----------------------------------------------------------- */
.how-head { display:flex; gap:36px; align-items:center; justify-content:space-between; margin-bottom:46px; flex-wrap:wrap; }
.how-head .section-head { margin-bottom:0; flex:1 1 340px; }
.how-illo { flex:none; width:150px; height:150px; object-fit:contain; mix-blend-mode:multiply; }
@media (max-width:560px) { .how-illo { width:112px; height:112px; } }
.steps {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  border:1px solid var(--hairline); border-radius:10px; overflow:hidden; background:var(--paper);
}
.step { padding:32px 28px; border-right:1px solid var(--hairline); }
.step:last-child { border-right:none; }
.step-num { font-family:var(--serif); font-size:16px; color:var(--terracotta); letter-spacing:.1em; }
.step h3 { font-family:var(--serif); font-size:23px; margin:10px 0 8px; font-weight:400; }
.step p { color:var(--muted); font-size:15px; }

/* Learn to chant --------------------------------------------------------- */
.learn { background:var(--sand); }
.learn-grid {
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.video-feature {
  position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/9; display:block;
}
.video-feature .scrim {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(30,17,25,.82),rgba(30,17,25,.05) 60%);
}
.play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%; background:rgba(247,239,225,.94);
  display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.play::before {
  content:''; border-left:18px solid var(--rust);
  border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:5px;
}
.play.sm { width:34px; height:34px; }
.play.sm::before { border-left:11px solid var(--rust); border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:3px; }
.video-feature .cap { position:absolute; left:0; bottom:0; padding:26px; z-index:2; pointer-events:none; }
.video-feature .cap .kicker { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-text); }
.video-feature .cap h3 { font-family:var(--serif); color:#fff; font-size:27px; font-weight:400; margin-top:6px; }
.video-col { min-width:0; display:flex; flex-direction:column; gap:12px; }
.video-list {
  display:grid; grid-template-columns:1fr; gap:12px; margin:0; align-content:start;
  max-height:326px; overflow-y:auto; padding-right:6px;
  scrollbar-width:thin; scrollbar-color:var(--hairline) transparent;
}
.video-list::-webkit-scrollbar { width:6px; }
.video-list::-webkit-scrollbar-thumb { background:var(--hairline); border-radius:3px; }
.video-list::-webkit-scrollbar-track { background:transparent; }
.video-card {
  display:flex; gap:14px; align-items:center; background:var(--paper);
  border:1px solid var(--hairline); border-radius:9px; padding:12px; transition:.15s; cursor:pointer;
}
.video-card:hover, .video-card.active { border-color:var(--terracotta); }
.video-card.active { background:var(--paper-raised); box-shadow:0 0 0 1px var(--terracotta) inset; }
.video-thumb { flex:none; width:104px; height:62px; border-radius:7px; overflow:hidden; position:relative; background:var(--sand); }
.video-card h4 {
  font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.video-card .meta { font-size:12.5px; color:var(--muted-2); }
.video-eplabel { display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--terracotta); font-weight:600; margin-bottom:3px; }
.video-dur {
  position:absolute; right:5px; bottom:5px; z-index:2;
  background:rgba(30,17,25,.85); color:#fff; font-size:10.5px; font-weight:600;
  padding:2px 6px; border-radius:5px; font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.video-feature .video-dur { right:12px; bottom:12px; font-size:12.5px; padding:3px 9px; }
.video-feature { cursor:pointer; }
.video-feature iframe, .video-feature .yt-mount { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Learn playlist — scrollable list + full-playlist link */
.pager-all { align-self:flex-end; font-size:13px; color:var(--muted); }
.pager-all:hover { color:var(--terracotta); }

/* Founder ---------------------------------------------------------------- */
.founder { background:var(--sand); }
.founder .photo { max-width:400px; }
.founder blockquote {
  font-family:var(--serif); font-size:clamp(23px,3.3vw,34px);
  line-height:1.32; color:var(--ink); margin:20px 0 0;
}
.attrib { margin-top:24px; display:flex; align-items:center; gap:14px; }
.avatar {
  width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--gold-text);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:18px; flex:none;
}
.attrib .name { font-weight:600; color:var(--ink); }
.attrib .role { font-size:13px; color:var(--muted); }

/* Srila Prabhupada --------------------------------------------------------- */
.prabhupada { background:var(--sand); }
.prabhupada-name {
  font-family:var(--serif); font-weight:400; line-height:1.08; color:var(--ink);
  font-size:clamp(28px,4.6vw,42px); margin:12px 0 16px;
}
.prabhupada-intro { color:var(--muted); font-size:16.5px; max-width:470px; margin-bottom:24px; }
.pq { padding:20px 0; border-top:1px solid var(--hairline); }
.pq:first-child { border-top:none; padding-top:0; }
.pq {
  /* quotes carry Sanskrit words (Kṛṣṇa, mahā-mantra); render in the covering
     face so the under-dot letters don't switch font mid-word */
  font-family:var(--sanskrit); font-size:clamp(18px,2.3vw,23px); line-height:1.5; color:var(--ink);
}
.pq cite {
  display:block; font-family:var(--sans); font-style:normal; font-size:12.5px;
  letter-spacing:.03em; color:var(--muted-2); margin-top:9px;
}

/* Sankalpa --------------------------------------------------------------- */
.sankalpa { background:var(--paper); }
.sankalpa .section-head { margin-bottom:28px; }
/* the vow explanation now sits BELOW the selector card as supporting reading */
.sankalpa-why { max-width:640px; margin:52px auto 0; text-align:center; }
.sankalpa-why-h { font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.6vw,26px); color:var(--ink); margin:0 0 20px; }
.sankalpa-lead { color:var(--muted); font-size:16.5px; line-height:1.7; max-width:600px; margin:0 auto; }
.sankalpa-q { margin:14px auto 38px; max-width:620px; }
.sankalpa-q:last-child { margin-bottom:0; }
.sankalpa-q blockquote { font-family:var(--sanskrit); font-size:clamp(20px,2.6vw,26px); line-height:1.5; color:var(--ink); }
.sankalpa-q figcaption { font-family:var(--sans); font-size:13px; color:var(--muted-2); margin-top:14px; letter-spacing:.03em; }
.sankalpa-card {
  max-width:760px; margin:0 auto; background:var(--paper-raised);
  border:1px solid var(--hairline); border-radius:14px; padding:40px 34px; text-align:center;
  box-shadow:0 26px 60px -40px rgba(42,26,36,.4);
}
.segmented {
  display:inline-flex; gap:6px; background:var(--bone); border:1px solid var(--hairline);
  border-radius:999px; padding:6px; flex-wrap:wrap; justify-content:center; align-items:center;
}
.seg {
  font-family:var(--sans); font-weight:600; font-size:16px; padding:11px 22px;
  border:none; border-radius:999px; cursor:pointer; transition:.15s;
  background:transparent; color:var(--muted);
}
.seg.active { background:var(--terracotta); color:#fff; }
.segmented .unit { font-size:12px; color:var(--muted-2); padding:0 10px; }
.proj {
  font-family:var(--serif); font-size:clamp(28px,5.4vw,44px); color:var(--ink);
  font-weight:400; line-height:1.14;
}
.proj b { color:var(--terracotta); font-weight:400; font-variant-numeric:tabular-nums; }
.proj-support { color:var(--muted); font-size:15px; margin-top:10px; }
.proj-poetic { margin-top:18px; font-family:var(--sans); font-style:italic; font-size:17px; color:var(--temple-green); }
.streak-note {
  margin-top:26px; display:inline-flex; align-items:center; gap:10px; font-size:13.5px;
  color:var(--muted); background:var(--bone); border:1px solid var(--hairline);
  border-radius:999px; padding:9px 18px;
}
.streak-note .star { color:var(--terracotta); font-family:var(--serif); }

/* Leaderboard ------------------------------------------------------------ */
.board { background:var(--bone); }
.tabs { margin-top:22px; display:flex; justify-content:center; }
.tabs-inner { display:inline-flex; gap:4px; background:var(--paper); border:1px solid var(--hairline); border-radius:999px; padding:5px; }
.tab {
  font-family:var(--sans); font-size:14px; font-weight:600; border:none;
  padding:9px 20px; border-radius:999px; cursor:pointer; transition:.15s;
  background:transparent; color:var(--muted);
}
.tab.active { background:var(--ink); color:var(--bone); }
.podium { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:32px 0 6px; }
.podium-card { background:var(--paper); border:1px solid var(--hairline); border-radius:11px; padding:24px 14px; text-align:center; }
.podium-card.winner { border:1.5px solid var(--terracotta); box-shadow:0 18px 40px -28px rgba(198,93,46,.7); }
.rank-badge {
  width:30px; height:30px; border-radius:50%; background:var(--sand); color:var(--rust);
  font-family:var(--serif); display:flex; align-items:center; justify-content:center; margin:0 auto 10px;
}
.podium-card.winner .rank-badge { background:var(--terracotta); color:#fff; }
.podium-avatar {
  width:54px; height:54px; border-radius:50%; background:var(--ink); color:var(--gold-text);
  font-family:var(--serif); font-size:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 10px;
}
.podium-name { font-weight:600; font-size:15px; }
.podium-city { font-size:12px; color:var(--muted-2); }
.podium-score { font-family:var(--serif); font-size:26px; color:var(--ink); margin-top:8px; font-variant-numeric:tabular-nums; }
.podium-lbl { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.board-list { background:var(--paper); border:1px solid var(--hairline); border-radius:11px; overflow:hidden; margin-top:12px; }
.board-row {
  display:grid; grid-template-columns:34px 1fr auto auto; gap:14px; align-items:center;
  padding:15px 18px; border-bottom:1px solid var(--hairline-faint); font-size:15px;
}
.board-row.single-col { grid-template-columns:34px 1fr auto; }
.board-row:last-child { border-bottom:none; }
.board-row .rank { font-family:var(--serif); color:var(--muted-2); }
.board-row .who b { font-weight:600; }
.board-row .who span { display:block; font-size:12px; color:var(--muted-2); }
.board-row .today { font-weight:600; color:var(--terracotta); text-align:right; min-width:54px; font-variant-numeric:tabular-nums; }
.board-row .total { color:var(--muted); text-align:right; min-width:70px; font-size:14px; font-variant-numeric:tabular-nums; }
.board-row.board-head { padding-top:12px; padding-bottom:9px; }
.board-head .today, .board-head .total { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted-2); }
.cities { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.city-chip {
  background:var(--paper); border:1px solid var(--hairline); border-radius:999px;
  padding:9px 16px; font-size:14px; display:flex; gap:9px; align-items:center;
}
.city-chip .rank { font-family:var(--serif); color:var(--muted-2); }
.city-chip b { color:var(--terracotta); font-weight:600; }

/* Empty state (no rounds logged / no cities yet — fresh launch). Plain text,
   no box — it sits inside .board-list (already boxed) or .cities (unboxed
   flex row), and shouldn't double up either container's own border/background. */
.empty-note {
  width:100%; text-align:center; color:var(--muted); font-size:15px;
  line-height:1.6; padding:34px 20px;
}

/* Voices ----------------------------------------------------------------- */
.voices { background:var(--paper); }
.voices-list { border-bottom:1px solid rgba(42,26,36,.1); }
.voice { padding:30px 0; border-top:1px solid rgba(42,26,36,.1); }
.voice.indent { padding-left:0; margin-left:auto; max-width:92%; }
.voice-quote { font-family:var(--serif); font-size:clamp(20px,2.5vw,26px); line-height:1.4; color:var(--ink); }
.voice-by { margin-top:16px; display:flex; align-items:center; gap:12px; }
.voice-avatar {
  width:38px; height:38px; border-radius:50%; background:var(--sand); color:var(--rust);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:13px; flex:none;
}
.voice-name { font-size:13.5px; color:var(--muted); }
.voice-name b { color:var(--ink); font-weight:600; }

/* CTA band --------------------------------------------------------------- */
.cta-band { position:relative; overflow:hidden; color:var(--bone); }
.cta-band .band-photo { position:absolute; inset:0; width:100%; height:100%; }
.cta-band .band-overlay {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 130% at 50% -20%,rgba(67,36,54,.86),rgba(30,17,25,.94));
}
.cta-band .band-inner { position:relative; z-index:2; padding:96px 0; text-align:center; }
.cta-band h2 { font-family:var(--serif); color:#fff; font-size:clamp(30px,5vw,48px); font-weight:400; line-height:1.1; }
.cta-band p { max-width:520px; margin:16px auto 30px; color:rgba(247,239,225,.78); }

/* Footer ----------------------------------------------------------------- */
.footer { background:var(--dark-band); color:rgba(247,239,225,.6); padding:48px 0; text-align:center; font-size:13px; }
.footer-wordmark { font-family:var(--serif); color:var(--bone); font-size:21px; margin-bottom:8px; }
.footer-links { margin-top:16px; display:flex; gap:22px; justify-content:center; flex-wrap:wrap; }
.footer-links a { color:rgba(247,239,225,.6); }
.footer-links a:hover { color:var(--gold-text); }
.footer-swagatam { color:var(--gold-text); white-space:nowrap; }
.footer-swagatam:hover { color:var(--bone); }
.footer-hare { margin-top:18px; opacity:.55; font-family:var(--serif); letter-spacing:.08em; }

/* Registration modal ----------------------------------------------------- */
.modal-backdrop {
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(30,17,25,.62); backdrop-filter:blur(6px);
}
.modal-backdrop[hidden] { display:none; }
.modal {
  width:100%; max-width:460px; background:var(--paper); border:1px solid rgba(42,26,36,.14);
  border-radius:16px; padding:34px 30px; box-shadow:0 40px 90px -30px rgba(30,17,25,.7);
  position:relative; max-height:90vh; overflow:auto; animation:kjy-pop .28s ease;
}
@keyframes kjy-pop { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
.modal-close {
  position:absolute; top:15px; right:15px; width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(42,26,36,.14); background:transparent; color:var(--muted); cursor:pointer; font-size:14px;
}
.modal-step[hidden] { display:none; }
.modal-kicker { font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--terracotta); font-weight:600; }
.modal h3 { font-family:var(--serif); font-size:27px; font-weight:400; margin:8px 0 6px; }
.modal p { color:var(--muted); font-size:14.5px; margin-bottom:22px; }
.modal p b { color:var(--ink); }
.field-label { display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:6px; }
.field {
  width:100%; padding:12px 14px; border:1px solid rgba(42,26,36,.16); border-radius:8px;
  background:var(--paper-raised); font-family:inherit; font-size:15px; color:var(--ink); margin-bottom:16px;
}
.field:focus { border-color:var(--terracotta); outline:none; }
.field-help { font-size:12.5px; color:var(--muted-2); margin-bottom:20px; }
/* Terms & consent checkbox */
.field-check {
  display:flex; align-items:flex-start; gap:10px; margin:0 0 20px;
  font-size:13px; line-height:1.55; color:var(--muted); cursor:pointer;
}
.field-check input[type="checkbox"] {
  flex:none; width:18px; height:18px; margin-top:1px; accent-color:var(--terracotta); cursor:pointer;
}
.field-check a { color:var(--terracotta); text-decoration:underline; text-underline-offset:2px; }
.field-check a:hover { color:var(--rust); }
.otp-input {
  width:100%; padding:14px; border:1px solid rgba(42,26,36,.16); border-radius:8px;
  background:var(--paper-raised); font-family:var(--serif); font-size:24px; letter-spacing:.5em;
  text-align:center; color:var(--ink); margin-bottom:20px;
}
.otp-input:focus { border-color:var(--terracotta); outline:none; }
.modal-btn {
  width:100%; font-family:var(--sans); font-weight:600; font-size:15px; padding:14px;
  border:none; border-radius:8px; transition:.15s; cursor:pointer; background:var(--terracotta); color:#fff;
}
.modal-btn:disabled { cursor:not-allowed; background:var(--disabled-bg); color:var(--disabled-text); }
.modal-back { text-align:center; margin-top:14px; }
.modal-back a { cursor:pointer; font-size:13px; color:var(--muted); }
.modal-done { text-align:center; padding:6px 0 2px; }
.done-check {
  width:64px; height:64px; border-radius:50%; background:var(--gold); color:#20160a;
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
  font-size:30px; font-family:var(--serif);
}
.done-proj { font-family:var(--sans); font-style:italic; color:var(--temple-green); margin:14px 0 24px; }
.done-redirect-note { font-size:13px; color:var(--muted-2); margin-top:14px; }
.modal-done .modal-btn { margin-top:0; }

/* Image placeholder (dev only — replaced by real <img> in production) ----- */
.img-slot {
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    linear-gradient(135deg,rgba(42,26,36,.05),rgba(42,26,36,.02)),
    repeating-linear-gradient(45deg,transparent,transparent 11px,rgba(42,26,36,.03) 11px,rgba(42,26,36,.03) 12px);
  color:var(--muted-2); font-size:12px; letter-spacing:.08em; padding:16px; line-height:1.4;
}
.img-slot.on-dark { color:rgba(247,239,225,.7); background:
    linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
    repeating-linear-gradient(45deg,transparent,transparent 11px,rgba(255,255,255,.04) 11px,rgba(255,255,255,.04) 12px); }

/* ==========================================================================
   UX / UI polish
   ========================================================================== */

/* Focus-visible — one consistent, on-brand ring for keyboard users -------- */
:focus { outline:none; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--terracotta); outline-offset:3px; border-radius:4px;
}
.field:focus-visible, .otp-input:focus-visible { outline-offset:0; }

/* Button micro-interaction (subtle lift) --------------------------------- */
.btn { will-change:transform; }
.btn-primary:hover, .btn-gold:hover { transform:translateY(-1px); }
.btn-primary:active, .btn-gold:active, .btn-outline-gold:active { transform:translateY(0); }
.nav .btn.is-registered { background:transparent; color:var(--terracotta); border:1px solid var(--terracotta); }
.nav .btn.is-registered:hover { background:var(--terracotta); color:#fff; }

/* Mala Ring intro (fade + gentle scale) + living breath ------------------ */
.ring { opacity:0; transform:scale(.965); }
.ring.ring-in { opacity:1; transform:none; transition:opacity 1.1s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.ring-arc { filter:drop-shadow(0 0 5px rgba(201,162,75,.45)); }
.ring-count { transition:none; }   /* value glides via JS, not CSS */

/* Scroll-reveal ---------------------------------------------------------- */
.reveal { opacity:0; transform:translateY(16px); }
.reveal.is-visible {
  opacity:1; transform:none;
  transition:opacity .7s ease var(--rvd,0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--rvd,0ms);
}

/* Segmented sankalpa — clearer selected state (no movement) -------------- */
.seg { position:relative; }
.seg.active { box-shadow:0 6px 16px -8px rgba(198,93,46,.8); }
.seg:not(.active):hover { color:var(--ink); }

/* Podium — gentle raise on the winner ------------------------------------ */
.podium-card { transition:transform .2s ease; }
.podium-card.winner { transform:translateY(-6px); }
@media (max-width:520px) { .podium-card.winner { transform:none; } }
.board-row { transition:background .15s ease; }
.board-row:hover { background:rgba(42,26,36,.025); }
.city-chip { transition:border-color .15s ease, transform .15s ease; }
.city-chip:hover { border-color:var(--terracotta); }

/* Video play button — grows slightly on card hover ----------------------- */
.video-feature:hover .play { transform:translate(-50%,-50%) scale(1.06); }
.play { transition:transform .2s ease; }

/* Registration — step indicator ----------------------------------------- */
.modal-dots { display:flex; gap:7px; justify-content:center; margin:-6px 0 20px; }
.modal-dot { width:22px; height:3px; border-radius:2px; background:var(--hairline); transition:background .25s ease; }
.modal-dot.active { background:var(--terracotta); }
.modal-step { animation:kjy-step .3s ease; }
@keyframes kjy-step { from { opacity:0; transform:translateX(8px); } to { opacity:1; transform:none; } }

/* Welcome toast (post-registration confirmation) ------------------------- */
.kjy-toast {
  position:fixed; left:50%; bottom:24px; z-index:300; transform:translate(-50%,140%);
  display:flex; align-items:center; gap:14px; max-width:min(520px,calc(100vw - 32px));
  background:var(--ink); color:var(--bone); padding:15px 16px 15px 18px;
  border-radius:12px; box-shadow:0 24px 60px -24px rgba(30,17,25,.8);
  border:1px solid rgba(224,185,112,.25); font-size:14px; line-height:1.5;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.kjy-toast.show { transform:translate(-50%,0); }
.kjy-toast-mark { flex:none; width:34px; height:34px; color:var(--gold-text); }
.kjy-toast-text b { color:#fff; font-weight:600; }
.kjy-toast-close {
  flex:none; margin-left:2px; width:26px; height:26px; border-radius:50%; border:none;
  background:rgba(247,239,225,.1); color:var(--bone); cursor:pointer; font-size:12px;
}
.kjy-toast-close:hover { background:rgba(247,239,225,.2); }

/* Registration — optional tag + experience choice ----------------------- */
.field-label .opt {
  font-family:var(--sans); letter-spacing:0; text-transform:none;
  color:var(--muted-2); font-weight:400; font-size:11px; margin-left:4px;
}
.field-label .opt::before { content:"· "; }
.choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.choice-opt {
  text-align:left; background:var(--paper-raised); border:1px solid rgba(42,26,36,.16);
  border-radius:10px; padding:12px 14px; cursor:pointer; transition:.15s; font-family:var(--sans);
}
.choice-opt b { display:block; color:var(--ink); font-size:14px; font-weight:600; }
.choice-opt span { display:block; color:var(--muted); font-size:12px; margin-top:2px; line-height:1.35; }
.choice-opt:hover { border-color:var(--muted-2); }
.choice-opt.active { border-color:var(--terracotta); background:#fff; box-shadow:0 0 0 1px var(--terracotta) inset; }
.field-reveal { animation:kjy-step .25s ease; }
@media (max-width:420px) { .choice { grid-template-columns:1fr; } }

/* FAQ accordion ---------------------------------------------------------- */
.faq-list { border-top:1px solid var(--hairline); }
.faq-item { border-bottom:1px solid var(--hairline); }
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:none; border:none; cursor:pointer; text-align:left; padding:22px 4px;
  font-family:var(--serif); font-size:clamp(17px,2.2vw,20px); color:var(--ink); line-height:1.3;
}
.faq-q:hover { color:var(--terracotta); }
.faq-icon { position:relative; flex:none; width:16px; height:16px; }
.faq-icon::before, .faq-icon::after {
  content:''; position:absolute; background:var(--terracotta); transition:transform .25s ease;
}
.faq-icon::before { top:7px; left:0; width:16px; height:2px; }
.faq-icon::after  { top:0; left:7px; width:2px; height:16px; }
.faq-item.open .faq-icon::after { transform:scaleY(0); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.open .faq-a { max-height:340px; }
.faq-a-inner { padding:0 4px 24px; color:var(--muted); font-size:16px; max-width:70ch; }
.faq-a-inner .sanskrit { color:var(--ink); }

/* Daily-log modal -------------------------------------------------------- */
.log-forday {
  display:inline-block; margin:-2px 0 4px; padding:5px 13px; border-radius:999px;
  background:rgba(198,93,46,.1); border:1px solid rgba(198,93,46,.28);
  font-size:12.5px; color:var(--terracotta); font-weight:600; letter-spacing:.01em;
}
.log-counter { display:flex; align-items:center; justify-content:center; gap:22px; margin:22px 0 18px; }
.log-step-btn {
  width:46px; height:46px; border-radius:50%; border:1px solid var(--hairline);
  background:var(--paper-raised); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; transition:.15s;
}
.log-step-btn:hover { border-color:var(--terracotta); color:var(--terracotta); }
.log-count { min-width:118px; text-align:center; }
.log-count-input {
  display:block; width:100%; text-align:center; border:none; padding:0;
  background:transparent; font-family:var(--sans); font-weight:600; font-size:44px;
  color:var(--ink); line-height:1; border-bottom:1px dashed var(--hairline);
  -moz-appearance:textfield; appearance:textfield;
}
.log-count-input::-webkit-outer-spin-button,
.log-count-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.log-count-input:hover { border-bottom-color:var(--muted-2); }
.log-count-input:focus { outline:none; border-bottom:1px solid var(--terracotta); }
.log-count small { display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-top:6px; }
.log-quick { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.log-chip {
  min-width:42px; padding:8px 12px; border-radius:999px; border:1px solid var(--hairline);
  background:transparent; color:var(--muted); font-family:var(--sans); font-weight:600; font-size:14px; cursor:pointer; transition:.15s;
}
.log-chip:hover { color:var(--ink); border-color:var(--muted-2); }
.log-chip.active { background:var(--terracotta); color:#fff; border-color:var(--terracotta); }
.log-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:24px;
  padding-top:20px; border-top:1px solid var(--hairline-faint); text-align:center;
}
.log-stats b { display:block; font-family:var(--sans); font-weight:600; font-size:20px; color:var(--ink); }
.log-stats span { display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-top:3px; }
.log-signout { text-align:center; margin-top:18px; }
.log-signout a { cursor:pointer; font-size:13px; color:var(--muted-2); }
.log-signout a:hover { color:var(--terracotta); }

/* Registration — extra fields (gender/age row, selects, password, errors) */
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* the margin lives on the group, not the input — otherwise the input's
   16px bottom margin inflates the flex row and the country box stretches taller */
.phone-field { display:flex; gap:8px; align-items:stretch; margin-bottom:16px; }
.phone-num { flex:1 1 auto; min-width:0; margin-bottom:0; }

/* Country code — locked to India (+91); no other country is offered */
.cc { position:relative; flex:none; display:flex; }   /* flex → badge stretches to field height */
.cc-badge {
  display:flex; align-items:center; gap:7px; width:100%; padding:0 11px;
  border:1px solid rgba(42,26,36,.16); border-radius:8px; background:var(--paper-raised);
  font-family:inherit; font-size:15px; color:var(--ink);
}
.cc-flag {
  width:22px; height:16px; border-radius:2px; object-fit:cover; flex:none;
  box-shadow:0 0 0 1px rgba(42,26,36,.1); background:var(--sand);
}
.cc-dial { font-variant-numeric:tabular-nums; }

/* City autocomplete (Indian cities only) */
.city-field { position:relative; margin-bottom:16px; }
.city-field .field { margin-bottom:0; }
.city-menu {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  background:var(--paper); border:1px solid var(--hairline); border-radius:11px;
  box-shadow:0 24px 50px -22px rgba(42,26,36,.55); padding:6px; max-height:236px; overflow-y:auto;
  list-style:none; margin:0;
}
.city-menu[hidden] { display:none; }
.city-option {
  display:block; width:100%; padding:9px 10px; border:none;
  background:none; cursor:pointer; text-align:left; font-family:inherit; font-size:14px;
  color:var(--ink); border-radius:7px;
}
.city-option:hover, .city-option.active { background:var(--bone); }
.city-empty { padding:10px; color:var(--muted-2); font-size:14px; text-align:center; }
select.field {
  appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%237a6a5f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
}
select.field:has(option[value=""]:checked) { color:var(--muted-2); }
.field-error {
  color:var(--rust); font-size:13px; font-weight:600; margin:2px 0 14px; padding:9px 12px;
  background:#fbe9e2; border-left:3px solid var(--rust); border-radius:6px;
}
.modal-links { display:flex; justify-content:space-between; gap:12px; margin-top:16px; }
.modal-links a { cursor:pointer; font-size:13px; color:var(--muted); }
.modal-links a:hover { color:var(--terracotta); }
.modal-btn.ghost { background:transparent; color:var(--muted); border:1px solid var(--hairline); }
.modal-btn.ghost:hover { color:var(--ink); border-color:var(--muted-2); }

/* WhatsApp CTA (done step) — recognisable platform green, used sparingly */
.btn-whatsapp {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:14px; border-radius:8px; background:#1faa54; color:#fff;
  font-family:var(--sans); font-weight:600; font-size:15px; text-decoration:none;
  transition:.16s; margin-bottom:16px;
}
.btn-whatsapp:hover { background:#178043; color:#fff; transform:translateY(-1px); }
.wa-icon {
  width:19px; height:19px; flex:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/></svg>") center/contain no-repeat;
}

/* Inspiring done step — chanting-sangha panel */
.done-check { box-shadow:0 0 0 8px rgba(201,162,75,.12), 0 12px 32px -8px rgba(201,162,75,.5); }
.done-lead { margin:12px auto 20px; max-width:390px; color:var(--muted); font-size:15px; line-height:1.6; }
.join-panel {
  text-align:left; background:linear-gradient(180deg,var(--paper-raised),var(--bone));
  border:1px solid var(--hairline); border-radius:14px; padding:20px; margin-bottom:20px;
}
.join-panel-head { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.join-panel-om { flex:none; width:44px; height:44px; color:var(--terracotta); }
.join-panel-label { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); font-weight:600; }
.join-panel-name { font-family:var(--serif); font-size:20px; color:var(--ink); line-height:1.2; margin-top:2px; }
.join-panel-note { color:var(--muted); font-size:13.5px; line-height:1.6; margin-bottom:16px; }
.join-panel .btn-whatsapp { margin-bottom:0; }

/* Nav login / logout link */
.nav-login { font-size:14px; color:var(--muted); cursor:pointer; white-space:nowrap; flex-shrink:0; }
.nav-login:hover { color:var(--ink); }

/* Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation:none; }
  .reveal { opacity:1; transform:none; }
  .ring { opacity:1; transform:none; }
  .modal-step, .field-reveal { animation:none; }
  .btn:hover, .seg.active, .podium-card.winner { transform:none; }
  .kjy-toast { transition:none; }
  .faq-a { transition:none; }
  * { scroll-behavior:auto !important; }
}

/* ========================================================================
   Logged-in dashboard (data-user-only). Shown after sign-in in place of the
   guest marketing hero + pitch sections.
   NOTE: this section must stay ABOVE the "Mobile overrides" block below —
   these rules share selectors (.dash-hero .wrap, .dash-stats, .dash-grid,
   .dash-cta, .dash-card-head, .dash-foot, .cal .cell, .dash-hist-card...)
   with the mobile media queries at the same specificity, so whichever
   block comes LAST in the file wins the cascade tie-break on a matching
   viewport. Moving this section after the mobile block (as it used to be)
   silently defeated every phone-only dashboard override.
   ======================================================================== */
.dash-hero {
  position:relative; overflow:hidden; color:var(--bone);
  background:radial-gradient(130% 120% at 85% -20%,#432436 0%,#2a1a24 52%,#1e1119 100%);
}
.dash-hero::after {   /* same faint gold star-field as the guest hero */
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 14% 26%,rgba(201,162,75,.5),transparent),
    radial-gradient(1.5px 1.5px at 86% 18%,rgba(201,162,75,.4),transparent),
    radial-gradient(1.5px 1.5px at 62% 80%,rgba(201,162,75,.3),transparent);
}
.dash-hero .wrap {
  position:relative; z-index:2; padding:52px 26px 58px;
  display:grid; gap:40px; align-items:center;
  grid-template-columns:1fr auto;
}
.dash-hero .live-pill b { color:#fff; font-weight:600; }
.dash-hero h1 {
  font-family:var(--serif); font-weight:400; color:#fff;
  font-size:clamp(38px,6.4vw,64px); line-height:1.05; margin:18px 0 14px;
}
.dash-hero h1 em { font-style:normal; color:var(--saffron); }
.dash-today { color:rgba(247,239,225,.8); font-size:17px; line-height:1.6; margin:0 0 26px; max-width:460px; }
.dash-cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

.dash-flame { text-align:center; }
.flame-ring {
  width:158px; height:158px; border-radius:50%; margin:0 auto;
  border:2px solid rgba(224,185,112,.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 42%,rgba(224,185,112,.16),transparent 70%);
}
.flame-num { font-family:var(--serif); font-size:58px; color:var(--gold-text); line-height:1; }
.flame-lbl { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(247,239,225,.6); margin-top:6px; }
.flame-sub { margin:14px auto 0; font-size:13px; color:rgba(247,239,225,.6); max-width:190px; line-height:1.5; }

.dash-body { padding:44px 26px 66px; }
.dash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:34px; }
.dstat { background:var(--paper); border:1px solid var(--hairline); border-radius:14px; padding:20px 16px; text-align:center; }
.dstat b { display:block; font-family:var(--serif); font-weight:400; font-size:clamp(24px,3.6vw,34px); color:var(--ink); }
.dstat span { display:block; margin-top:6px; font-size:12px; color:var(--muted-2); letter-spacing:.02em; line-height:1.35; }

.dash-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:20px; align-items:start; }
.dash-card { background:var(--paper); border:1px solid var(--hairline); border-radius:16px; padding:24px; }
.dash-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.dash-card-head h2 { font-family:var(--serif); font-weight:400; font-size:21px; color:var(--ink); margin:0; }

.cal-legend { display:flex; gap:14px; font-size:12px; color:var(--muted-2); }
.cal-legend span { display:inline-flex; align-items:center; gap:6px; }
.cal-legend .dot { width:11px; height:11px; border-radius:3px; }
.dot.chanted { background:var(--terracotta); }
.dot.missed { border:1px solid var(--hairline); }
.dot.today { border:2px solid var(--gold); }

.cal-filters { display:flex; gap:8px; margin-bottom:14px; }
.cal-select {
  padding:8px 30px 8px 12px; border:1px solid rgba(42,26,36,.16); border-radius:8px;
  background:var(--paper-raised); font-family:inherit; font-size:13px; color:var(--ink);
  cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1a24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:14px;
}
.cal-select:focus { border-color:var(--terracotta); outline:none; }

.cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
.cal-weekdays span { text-align:center; font-size:10px; letter-spacing:.08em; color:var(--muted-2); }
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal .cell {
  aspect-ratio:1; border-radius:7px; border:1px solid var(--hairline); background:var(--sand);
  display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
.cal .cell.blank { border:none; background:transparent; }
.cal .cell.future { background:transparent; opacity:.45; }
.cal .cell.missed { background:transparent; }
.cal .cell.today { border:2px solid var(--gold); color:var(--ink); font-weight:600; }
.cal .cell.chanted { color:#fff; border-color:transparent; }
.cal .cell.chanted.lvl1 { background:#e6a06a; }
.cal .cell.chanted.lvl2 { background:var(--saffron); }
.cal .cell.chanted.lvl3 { background:var(--terracotta); }
.cal .cell.chanted.lvl4 { background:var(--rust); }
.cal .cell.today.chanted { color:#fff; }
.cal .cell.clickable { cursor:pointer; transition:box-shadow .12s, transform .12s; }
.cal .cell.clickable:hover { box-shadow:0 0 0 2px var(--gold); transform:translateY(-1px); }
.cal .cell.clickable:focus-visible { outline:none; box-shadow:0 0 0 2px var(--terracotta); }
.cal-caption { margin-top:14px; font-size:12.5px; color:var(--muted-2); line-height:1.55; }

/* the history card matches the calendar's height (set in JS) and scrolls inside,
   so a long streak of days never makes it taller than the calendar beside it */
.dash-hist-card { display:flex; flex-direction:column; }
.dash-hist-card .dash-card-head { flex:none; }
.dash-history { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
.hist-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid var(--hairline-faint); flex:none; }
.hist-row:first-child { border-top:none; }
.hist-date { font-size:14.5px; color:var(--ink); }
.hist-date small { display:block; color:var(--muted-2); font-size:12px; margin-top:2px; }
.hist-rounds { font-family:var(--serif); font-size:19px; color:var(--terracotta); white-space:nowrap; }
.hist-rounds span { font-size:12px; color:var(--muted-2); font-family:var(--sans); margin-left:5px; }
.dash-history .hist-empty { color:var(--muted-2); font-size:14px; line-height:1.6; padding:6px 0; }

.dash-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:30px; flex-wrap:wrap; font-size:13.5px; color:var(--muted); }
.dash-foot b { color:var(--ink); font-weight:600; }
.dash-foot a { color:var(--terracotta); cursor:pointer; }
.dash-foot a:hover { color:var(--rust); }

/* ========================================================================
   Mobile overrides — kept LAST in the file on purpose. Several base rules
   for .segmented, .mantra-text, .dash-*, etc. appear earlier in the file
   at the same selector specificity, so an earlier @media block loses the
   source-order tie-break. Placing these at the end guarantees the mobile
   rules win.
   ======================================================================== */
@media (max-width:600px) {
  /* Nav actions (Log in + Join the yagna / Offer rounds + hamburger) must
     all stay visible on phones — tighten the gap and let the brand text
     (which truncates via .nav-title's ellipsis) absorb the squeeze instead. */
  .nav-actions { gap:8px; }
  .nav-actions .btn.btn-sm { padding:8px 12px; font-size:12.5px; }

  /* Keep the badges tidy when the text wraps (dot aligns to first line) */
  .live-pill {
    font-size:11px; letter-spacing:.06em; line-height:1.5; padding:8px 14px;
    border-radius:16px; align-items:flex-start; text-align:left; max-width:100%;
  }
  .live-pill .dot-live { margin-top:4px; }
  .activity-pill {
    font-size:12.5px; line-height:1.55; padding:11px 18px; border-radius:18px;
    align-items:flex-start; text-align:left; gap:10px; max-width:100%;
  }
  .activity-pill .dot-live { margin-top:4px; }

  /* Sankalpa round picker: fit all five evenly, drop the inline label
     (the heading "How many rounds a day?" already says it). */
  .sankalpa-card .segmented { display:flex; width:100%; padding:5px; gap:4px; flex-wrap:nowrap; }
  .sankalpa-card .seg { flex:1 1 0; min-width:0; padding:11px 2px; font-size:15px; }
  .sankalpa-card .seg.active { box-shadow:none; }
  .sankalpa-card .segmented .unit { display:none; }
  .sankalpa-card { padding:32px 22px; }
  .sankalpa-card .btn-primary { font-size:14.5px; padding:14px 18px; }
  /* Smaller here so "By Janmashtami you'll offer" stays on one line and the
     number lands cleanly on the second line (no orphaned "offer") */
  .proj { font-size:22px; line-height:1.32; }

  /* Mantras: smaller, and break each line into its natural halves so nothing
     wraps awkwardly (a lone "Hare" dropping to its own line) */
  .mantra-text { font-size:19px; line-height:1.55; }
  .mantra-text .br-sm { display:inline; }

  /* "How the yagna works" illustration: centre it under the heading */
  .how-illo { margin:0 auto; }

  /* Dashboard: stack the greeting + flame, tighten the grids */
  .dash-hero .wrap { grid-template-columns:1fr; padding:40px 24px 44px; gap:30px; }
  .dash-flame { order:-1; }
  .flame-ring { width:120px; height:120px; }
  .flame-num { font-size:44px; }
  /* Greeting text was left-aligned under a centered flame ring — center it
     to match, and center the CTA row so it doesn't look lopsided stacked. */
  .dash-hero-main { text-align:center; }
  .dash-hero-main .dash-today { margin-left:auto; margin-right:auto; }
  .dash-cta { justify-content:center; }
  .dash-body { padding:34px 22px 52px; }
  .dash-stats { grid-template-columns:repeat(2,1fr); gap:12px; }
  .dash-grid { grid-template-columns:1fr; }
  .dash-card { padding:20px; }
  .dash-card-head { justify-content:center; text-align:center; }
  .cal-legend { justify-content:center; }
  .cal .cell { border-radius:6px; font-size:10px; }
  /* stacked: cap the history so a long streak doesn't run down the page */
  .dash-hist-card { max-height:440px; }
  .dash-foot { justify-content:center; text-align:center; }
}
@media (max-width:860px) and (min-width:601px) {
  .dash-grid { grid-template-columns:1fr; }
  .dash-hist-card { max-height:440px; }
}