/* ==========================================================================
   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; }
.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;
}
.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; }
.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-goal { margin-top:26px; width:min(348px,80vw); }
.goal-track { height:9px; border-radius:999px; background:rgba(224,185,112,.16); overflow:hidden; }
.goal-fill {
  display:block; height:100%; min-width:7px; border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--saffron)); width:0;
  transition:width .5s ease; box-shadow:0 0 10px rgba(224,185,112,.5);
}
.goal-legend { display:flex; justify-content:space-between; gap:14px; margin-top:9px; font-size:12.5px; color:rgba(247,239,225,.62); }
.goal-legend b { color:var(--gold-text); font-weight:600; }

/* 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,minmax(0,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; }
/* blank custom-number field on its own row below the preset pill */
.seg-other { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; font-size:14px; color:var(--muted); }
.seg-other-input {
  width:84px; padding:9px 12px; text-align:center; font-size:15px; font-weight:600;
  border:1px solid var(--hairline); border-radius:999px; background:var(--paper-raised); color:var(--ink);
  -moz-appearance:textfield;
}
.seg-other-input::-webkit-outer-spin-button, .seg-other-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.seg-other-input::placeholder { color:var(--muted-2); font-weight:400; }
.seg-other-input:focus { outline:none; border-color:var(--terracotta); }
.seg-other-input.is-active { border-color:var(--terracotta); background:#fff; color:var(--terracotta); }
.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); }
/* keep the leaderboard a focused width so the podium and list align and the
   row's name-to-score gap doesn't sprawl on wide screens */
.board .wrap { max-width:840px; }
.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; gap:14px; align-items:center;
  padding:15px 18px; border-bottom:1px solid var(--hairline-faint); font-size:15px;
}
.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 .score { font-weight:600; color:var(--terracotta); text-align:right; min-width:64px; font-variant-numeric:tabular-nums; }
.board-row.board-head { padding-top:12px; padding-bottom:9px; }
.board-head .score { 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; }

/* 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 picker (flag image + dial code) */
.cc { position:relative; flex:none; display:flex; }   /* flex → trigger stretches to field height */
.cc-trigger {
  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);
  cursor:pointer; font-family:inherit; font-size:15px; color:var(--ink); transition:border-color .15s;
}
.cc-trigger:hover { border-color:var(--muted-2); }
.cc[data-open] .cc-trigger, .cc-trigger:focus-visible { border-color:var(--terracotta); outline:none; }
.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; }
.cc-caret { color:var(--muted-2); transition:transform .2s; }
.cc[data-open] .cc-caret { transform:rotate(180deg); }
.cc-menu {
  position:absolute; top:calc(100% + 6px); left:0; z-index:30; width:250px; max-width:78vw;
  background:var(--paper); border:1px solid var(--hairline); border-radius:11px;
  box-shadow:0 24px 50px -22px rgba(42,26,36,.55); padding:8px;
}
.cc-menu[hidden] { display:none; }
.cc-search {
  width:100%; padding:9px 11px; border:1px solid var(--hairline); border-radius:7px;
  font-family:inherit; font-size:14px; margin-bottom:6px; background:var(--paper-raised); color:var(--ink);
}
.cc-search:focus { outline:none; border-color:var(--terracotta); }
.cc-list { list-style:none; margin:0; padding:0; max-height:236px; overflow-y:auto; }
.cc-option {
  display:flex; align-items:center; gap:10px; 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;
}
.cc-option:hover, .cc-option.active { background:var(--bone); }
.cc-option .cc-name { flex:1; }
.cc-option .cc-odial { color:var(--muted-2); font-variant-numeric:tabular-nums; }
.cc-empty { padding:12px 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:12.5px; margin:-6px 0 14px; }
.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); }
/* one flex item for the whole label, so it wraps as text (not as 3 items) */
.wa-label { text-align:center; line-height:1.35; }
.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; }
.nav-login:hover { color:var(--ink); }
@media (max-width:520px) { .nav-login { display:none; } }

/* 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.
   ======================================================================== */
.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; }

/* Sangha invite (dismissible WhatsApp-group nudge at the top of the dashboard) */
.sangha {
  position:relative; overflow:hidden; background:var(--paper);
  border:1px solid var(--hairline); border-radius:16px;
  padding:28px 32px 30px; margin-bottom:34px;
}
.sangha::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(var(--gold), var(--temple-green)); }
.sangha .eyebrow { color:var(--terracotta); }
.sangha h2 { font-family:var(--serif); font-weight:400; font-size:clamp(22px,3.2vw,29px); color:var(--ink); margin:8px 0 10px; }
.sangha > p { color:var(--muted); font-size:15.5px; line-height:1.7; max-width:660px; margin:0; }
.sangha-list { list-style:none; margin:20px 0 24px; padding:0; display:grid; gap:11px; max-width:660px; }
.sangha-list li { display:flex; gap:10px; font-size:15px; line-height:1.5; color:var(--ink-2,#4a3c44); }
.sangha-list b { color:var(--ink); font-weight:600; }
.sangha-mark { color:var(--terracotta); flex:none; line-height:1.5; }
.sangha-cta { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.sangha-cta .btn-whatsapp { margin:0; }
.sangha-dismiss { color:var(--muted-2); font-size:13.5px; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.sangha-dismiss:hover { color:var(--muted); }

.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-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 .cal-month {
  grid-column:1 / -1; margin:10px 0 2px; font-family:var(--sans);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--terracotta); font-weight:600;
}
.cal .cal-month:first-child { margin-top:0; }
.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); }

/* ========================================================================
   Added sections — verse of the day, glories, chant-a-round, why-Janmashtami,
   Koti-milestones, and the offer-modal "regular + extra rounds" note.
   ======================================================================== */

/* Verse of the day — a quiet daily band */
.dailyverse { background:var(--sand); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:32px 0; }
.dv-inner { text-align:center; max-width:780px; margin:0 auto; }
.dv-kicker { display:block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--terracotta); margin-bottom:14px; }
.dv-text { font-family:var(--sanskrit); font-style:italic; font-size:clamp(19px,2.7vw,26px); line-height:1.5; color:var(--ink); }
.dv-cite { display:block; font-style:normal; font-size:12.5px; letter-spacing:.04em; color:var(--muted-2); margin-top:14px; }
.dv-date { font-style:normal; font-weight:500; letter-spacing:.08em; opacity:.72; margin-left:4px; text-transform:none; }

/* Glories of the Holy Name — story cards */
.glories { background:var(--bone); }
.glory-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.glory { background:var(--paper); border:1px solid var(--hairline); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.glory-img { position:relative; aspect-ratio:16/10; background:var(--sand); border-bottom:1px solid var(--hairline); }
.glory-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.glory-img-label { display:none; }
.glory-img.is-placeholder { background:repeating-linear-gradient(45deg, var(--sand), var(--sand) 10px, rgba(42,26,36,.03) 10px, rgba(42,26,36,.03) 20px); }
.glory-img.is-placeholder .glory-img-label { display:flex; align-items:center; justify-content:center; position:absolute; inset:10px; border:1.5px dashed rgba(42,26,36,.22); border-radius:10px; color:var(--muted-2); font-size:12px; letter-spacing:.04em; text-align:center; padding:0 16px; }
.glory-text { padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.glory-kicker { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--terracotta); }
.glory-title { font-family:var(--serif); font-weight:400; font-size:23px; line-height:1.2; margin:12px 0; color:var(--ink); }
.glory-body { color:var(--muted); font-size:15.5px; line-height:1.7; flex:1; }
.glory-cite { display:block; font-style:normal; font-size:12px; letter-spacing:.03em; color:var(--muted-2); margin-top:18px; padding-top:16px; border-top:1px solid var(--hairline); }

/* Chant your first round — interactive japa bead */
/* The chanting screen — dark, app-style japa counter */
.firstround { background:var(--deepest); }
.fr-head .eyebrow { color:var(--gold-text); }
.fr-head h2 { color:#fff; }
.fr-screen { max-width:520px; margin:0 auto; text-align:center; padding:34px 26px 30px; border:1px solid rgba(224,185,112,.16); border-radius:24px; background:rgba(255,255,255,.02); }
.fr-mantra { font-family:var(--sanskrit); font-size:clamp(17px,2.4vw,21px); line-height:1.7; color:var(--gold-text); transition:color .25s; }
.fr-mantra.lit { color:#fff; }

/* Status pills (Rounds · Mantras · Timer), in the manner of a chanting app */
.fr-pills { display:flex; justify-content:center; gap:9px; max-width:420px; margin:22px auto 4px; }
.fr-pill { position:relative; overflow:hidden; flex:1; border:1px solid rgba(224,185,112,.28); border-radius:14px; padding:11px 6px 12px; background:rgba(255,255,255,.03); cursor:pointer; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; touch-action:manipulation; transition:border-color .2s; }
.fr-pill span { position:relative; z-index:1; display:block; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:6px; }
.fr-pill b { position:relative; z-index:1; display:block; font-family:var(--sans); font-weight:600; font-size:22px; line-height:1; color:var(--gold-text); font-variant-numeric:tabular-nums; }
/* hold-to-reset: the pill fills while held (1.2s), release to cancel */
.fr-pill-hold { position:absolute; inset:0; background:rgba(198,93,46,.4); transform:scaleX(0); transform-origin:left; transition:transform .18s ease; pointer-events:none; }
.fr-pill.holding .fr-pill-hold { transform:scaleX(1); transition:transform 1.2s linear; }
.fr-pill.did-reset { border-color:var(--terracotta); }
.fr-pill:focus-visible { outline:none; border-color:var(--gold); }
.fr-pills-note { font-size:10.5px; color:rgba(255,255,255,.3); margin-top:8px; letter-spacing:.02em; }

/* The tap bead — the hero interaction */
.fr-bead { position:relative; width:208px; height:208px; margin:24px auto 2px; border:none; background:none; cursor:pointer; display:block; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.fr-ring { position:absolute; inset:0; width:100%; height:100%; }
/* the mala: 108 tiny beads, lit one per mantra, sumeru at the head */
.fr-mala-dot { fill:rgba(224,185,112,.16); transition:fill .25s; }
.fr-mala-dot.lit { fill:var(--gold); }
.fr-mala-sumeru { fill:rgba(224,185,112,.5); }
.fr-ring.mala-flash .fr-mala-dot { animation:malaflash .6s ease; }
@keyframes malaflash { 45% { fill:#fff; } }
.fr-bead::before { content:''; position:absolute; inset:15px; border-radius:50%; background:radial-gradient(circle at 38% 32%, #fff, var(--sand) 80%); box-shadow:inset 0 2px 8px rgba(255,255,255,.75), 0 10px 26px -10px rgba(0,0,0,.6); z-index:0; transition:transform .12s, box-shadow .2s; }
.fr-bead:hover::before { transform:scale(1.02); }
.fr-bead:active::before { transform:scale(.97); }
.fr-bead.pulse::before { animation:frpulse .26s ease; }
@keyframes frpulse { 0%{transform:scale(1);} 40%{transform:scale(.93);} 100%{transform:scale(1);} }
.fr-bead--idle::before { animation:frbreathe 2.8s ease-in-out infinite; }
@keyframes frbreathe { 0%,100%{transform:scale(1);} 50%{transform:scale(1.035);} }
.fr-bead:focus-visible { outline:none; }
.fr-bead:focus-visible::before { box-shadow:inset 0 2px 8px rgba(255,255,255,.75), 0 0 0 3px var(--gold); }
.fr-bead.lap::before { animation:frlap .6s ease; }
@keyframes frlap {
  0%   { box-shadow:inset 0 2px 8px rgba(255,255,255,.75), 0 10px 26px -10px rgba(0,0,0,.6); }
  45%  { box-shadow:inset 0 2px 8px rgba(255,255,255,.75), 0 0 0 10px rgba(201,162,75,.4), 0 10px 26px -10px rgba(0,0,0,.6); }
  100% { box-shadow:inset 0 2px 8px rgba(255,255,255,.75), 0 10px 26px -10px rgba(0,0,0,.6); }
}
.fr-num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; z-index:1; }
.fr-num b { font-family:var(--sans); font-weight:600; font-size:60px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.fr-num b.tick { animation:numtick .16s ease; }
@keyframes numtick { 45% { transform:scale(1.08); } }
.fr-num small { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-top:7px; }
.fr-hint { color:rgba(255,255,255,.55); font-size:13.5px; margin-top:16px; min-height:1.2em; }

/* Manual lap (in the controls row): close a part-way round by hand */
.fr-lap { background:none; border:1px solid rgba(224,185,112,.4); color:var(--gold-text); font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:7px 20px; border-radius:999px; cursor:pointer; transition:background .18s, color .18s; }
.fr-lap:hover { background:var(--gold); color:#20160a; border-color:var(--gold); }

/* Chant-with-Prabhupāda on/off toggle */
.fr-controls { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; margin-top:22px; }
.fr-toggle { display:inline-flex; align-items:center; gap:11px; cursor:pointer; user-select:none; }
.fr-toggle input { position:absolute; opacity:0; width:0; height:0; }
.fr-toggle-track { position:relative; width:44px; height:25px; border-radius:999px; background:rgba(255,255,255,.18); transition:background .2s; flex:none; }
.fr-toggle-knob { position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .2s; }
.fr-toggle input:checked + .fr-toggle-track { background:var(--terracotta); }
.fr-toggle input:checked + .fr-toggle-track .fr-toggle-knob { transform:translateX(19px); }
.fr-toggle input:focus-visible + .fr-toggle-track { box-shadow:0 0 0 3px var(--gold); }
.fr-toggle-label { font-size:14px; color:#fff; }
.fr-audio-note { font-size:12px; color:rgba(255,255,255,.4); margin-top:9px; }

/* The bead zone: centered on desktop; low and right, by the thumb, in app mode */
.fr-bead-zone { margin-top:18px; }
.fr-offer { margin-top:26px; }
/* App mode: the Chant tab is a full screen — mantra is the header, and the
   bead drops to the bottom right where the right thumb naturally rests */
/* no scroll anchoring in app mode: switching screens must land at the top */
/* App-mode styling is MOBILE ONLY — scoped here so a lingering .app-mode class
   can never alter the desktop layout (JS only decides which screen shows). */
@media (max-width:820px) {
  body.app-mode { overflow-anchor:none; }
  body.app-mode .firstround { padding:22px 0 36px; }
  body.app-mode .fr-head { display:none; }
  body.app-mode .fr-screen { border:none; background:none; padding:6px 2px 0; max-width:none; display:flex; flex-direction:column; min-height:calc(100dvh - 300px); }
  body.app-mode .fr-bead-zone { margin-top:auto; padding-top:16px; }
  body.app-mode .fr-bead-zone .fr-hint { margin:0 0 6px; }
  body.app-mode .fr-bead { margin:8px 5vw 0 auto; }   /* hugged toward the right thumb */
  body.app-mode .fr-offer { margin-top:22px; }
}

/* Why Janmashtami */
.whyjan { background:var(--paper); }
.whyjan-body { max-width:660px; margin:0 auto; text-align:center; }
.whyjan-body p { color:var(--muted); font-size:17px; line-height:1.8; margin:0 0 20px; }
.whyjan-close { color:var(--ink); }
.whyjan-close b { color:var(--terracotta); }
.whyjan-q { margin:28px auto; max-width:560px; }
.whyjan-q blockquote { font-family:var(--sanskrit); font-style:italic; font-size:clamp(20px,2.8vw,27px); line-height:1.5; color:var(--ink); }
.whyjan-q figcaption { font-size:13px; letter-spacing:.03em; color:var(--muted-2); margin-top:14px; }

/* Koti-milestones rail */
.milestones { background:var(--sand); }
.miles { max-width:900px; margin:6px auto 0; padding:26px 12px 8px; scrollbar-width:none; }
.miles::-webkit-scrollbar { display:none; }   /* the rail swipes; no scrollbar chrome */
.miles-rail { position:relative; height:74px; }
.miles-track { position:absolute; left:0; right:0; top:20px; height:4px; border-radius:999px; background:rgba(42,26,36,.1); }
.miles-fill { position:absolute; left:0; top:20px; height:4px; border-radius:999px; background:linear-gradient(90deg,var(--gold),var(--terracotta)); width:0; transition:width .6s cubic-bezier(.22,1,.36,1); }
.miles-dot { position:absolute; top:14px; transform:translateX(-50%); text-align:center; }
.miles-mark { display:block; width:14px; height:14px; margin:0 auto; border-radius:50%; background:var(--paper); border:2px solid rgba(42,26,36,.2); transition:background .3s, border-color .3s, box-shadow .3s; }
.miles-dot.reached .miles-mark { background:var(--terracotta); border-color:var(--terracotta); }
.miles-dot.current .miles-mark { background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 5px rgba(201,162,75,.22); }
.miles-label { display:block; font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--muted-2); margin-top:8px; white-space:nowrap; }
/* keep the first/last labels inside the rail instead of clipping at the edges */
.miles-dot.edge-start .miles-label { transform:translateX(12px); }
.miles-dot.edge-end .miles-label { transform:translateX(-12px); }
.miles-label small { display:block; font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.65; }
.miles-dot.reached .miles-label { color:var(--ink); }
.miles-now { position:absolute; top:-16px; transform:translateX(-50%); transition:left .6s cubic-bezier(.22,1,.36,1); white-space:nowrap; }
.miles-now span { display:inline-block; background:var(--ink); color:var(--bone); font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; position:relative; }
.miles-now span::after { content:''; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid var(--ink); }

/* Offer-modal note: log regular + extra rounds */
.log-note { font-size:12.5px; line-height:1.6; color:var(--muted); background:var(--sand); border-radius:10px; padding:11px 13px; margin:14px auto 2px; max-width:370px; text-align:left; }
.log-note b { color:var(--ink); font-weight:600; }
.log-note-mark { color:var(--terracotta); margin-right:5px; }

/* ========================================================================
   App mode (logged-in): fixed bottom tab bar, one screen at a time.
   ======================================================================== */
@media (max-width:820px) {
  body.app-mode { padding-bottom:86px; }                          /* room for the tab bar */
  body.app-mode .nav-links, body.app-mode .nav-toggle { display:none; }  /* the tab bar is the nav */
}
/* Desktop safety net: app-mode only ever applies to a signed-in chanter, so if
   the class lingers after a resize, every screen still rejoins the scroll. */
@media (min-width:821px) {
  body.app-mode [data-app-screen][hidden] { display:block !important; }
}

@media (min-width:821px) { .app-tabs { display:none !important; } }
.app-tabs {
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; justify-content:center;
  background:rgba(255,253,247,.94);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--hairline);
  padding:7px max(8px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
  box-shadow:0 -8px 24px -18px rgba(42,26,36,.35);
}
.app-tab {
  flex:0 1 104px; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; cursor:pointer; padding:4px 0 2px;
  color:var(--muted-2); font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.05em;
  -webkit-tap-highlight-color:transparent; transition:color .18s;
}
.app-tab svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.app-tab[data-app-tab="more"] svg { fill:currentColor; stroke:none; }
.app-tab.active { color:var(--terracotta); }
.app-tab:focus-visible { outline:none; color:var(--terracotta); }
/* Raised center Chant tab: the japa-mala mark in a terracotta medallion */
.app-tab-chant .chant-fab {
  width:54px; height:54px; border-radius:50%; background:var(--terracotta);
  display:flex; align-items:center; justify-content:center;
  margin-top:-30px; border:3px solid var(--paper);
  box-shadow:0 10px 22px -10px rgba(150,60,24,.65);
  transition:background .18s, transform .12s;
}
.app-tab-chant .chant-fab svg { width:30px; height:30px; fill:#fff; stroke:none; }
.app-tab-chant:active .chant-fab { transform:scale(.94); }
.app-tab-chant.active .chant-fab { background:var(--rust); }

/* Today's nectar: the daily verse card at the top of Home */
.home-verse { display:block; background:var(--paper); border:1px solid var(--hairline); border-left:3px solid var(--gold); border-radius:14px; padding:18px 20px; margin-bottom:14px; transition:border-color .18s, box-shadow .18s; }
.home-verse:hover { box-shadow:0 10px 30px -24px rgba(42,26,36,.5); }
.hv-kicker { display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta); font-weight:600; }
.hv-kicker i { font-style:normal; font-weight:500; opacity:.72; letter-spacing:.08em; margin-left:3px; }
.hv-text { font-style:italic; font-size:clamp(17px,2.3vw,20px); line-height:1.55; color:var(--ink); margin-top:9px; }
.hv-cite { display:block; font-style:normal; font-size:12px; color:var(--muted-2); margin-top:8px; }

/* Today's vow bar in the dark hero */
.vow-today { max-width:420px; margin-top:20px; }
.vow-today-track { height:7px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; }
.vow-today-fill { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--gold),var(--saffron)); transition:width .5s ease; }
.vow-today-lbl { display:block; font-size:12.5px; color:var(--gold-text); margin-top:8px; }

/* Daily sangha as its own section (More tab / late in the desktop scroll) */
.sangha-section { background:var(--bone); padding:56px 0 10px; }

/* Desktop: the Home verse card covers it — hide the Learn-tab strip */
@media (min-width:821px) { .dailyverse { display:none; } }

/* Community pulse strip (dashboard): the yagna's rising total */
.dash-pulse { display:block; background:var(--paper); border:1px solid var(--hairline); border-radius:14px; padding:16px 20px 18px; margin-bottom:18px; transition:border-color .18s, box-shadow .18s; }
.dash-pulse:hover { border-color:var(--gold); box-shadow:0 10px 30px -24px rgba(42,26,36,.5); }
.dash-pulse-text { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.dash-pulse-text span { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); font-weight:600; }
.dash-pulse-text b { font-family:var(--serif); font-weight:400; font-size:21px; color:var(--terracotta); }
.dash-pulse-text small { font-size:12.5px; color:var(--muted); margin-left:auto; }
.dash-pulse-track { height:6px; border-radius:999px; background:rgba(42,26,36,.08); overflow:hidden; margin-top:11px; }
.dash-pulse-fill { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--gold),var(--terracotta)); transition:width .6s cubic-bezier(.22,1,.36,1); }

/* Account card (More tab) */
.app-account { background:var(--bone); padding-bottom:0; }
.acct-card { background:var(--paper); border:1px solid var(--hairline); border-radius:18px; padding:26px 24px; box-shadow:0 20px 50px -40px rgba(42,26,36,.45); }
.acct-row { display:flex; align-items:center; gap:16px; }
.acct-avatar { flex:none; width:54px; height:54px; border-radius:50%; background:var(--terracotta); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:24px; }
.acct-info b { display:block; font-family:var(--serif); font-weight:400; font-size:21px; color:var(--ink); line-height:1.2; }
.acct-info span { display:block; font-size:13px; color:var(--muted-2); margin-top:3px; }
.acct-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:22px; padding-top:20px; border-top:1px solid var(--hairline); }
.acct-signout { font-size:13.5px; color:var(--muted); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.acct-signout:hover { color:var(--terracotta); }

/* ========================================================================
   Mobile overrides — kept LAST in the file on purpose. Several base rules
   for .segmented, .mantra-text, etc. appear far below their section
   comments, 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) {
  /* 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; }
  .dash-body { padding:34px 22px 52px; }
  .sangha { padding:22px 20px 24px; }
  .sangha-cta { gap:14px; }
  .sangha-cta .btn-whatsapp { width:100%; justify-content:center; }
  .dash-stats { grid-template-columns:repeat(2,1fr); gap:12px; }
  .dash-grid { grid-template-columns:1fr; }
  .dash-card { padding:20px; }
  .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; }
}
@media (max-width:860px) and (min-width:601px) {
  .dash-grid { grid-template-columns:1fr; }
  .dash-hist-card { max-height:440px; }
}

/* Added sections — mobile */
@media (max-width:760px) {
  .glory-grid { grid-template-columns:1fr; gap:16px; }
  .glory { padding:24px 22px; }
}
@media (max-width:560px) {
  .fr-screen { padding:26px 14px 24px; }
  .fr-bead { width:204px; height:204px; }
  .fr-num b { font-size:52px; }
  .fr-pills { gap:7px; }
  .fr-pill { padding:10px 4px 11px; border-radius:12px; }
  .fr-pill b { font-size:19px; }
  .fr-toggle-label { font-size:13.5px; }
  .miles { padding:24px 18px 8px; overflow-x:auto; }
  .miles-rail { min-width:440px; }
  .miles-label { font-size:11px; }
  .miles-label small { font-size:8.5px; }
}

/* ========================================================================
   The consolidated offering — the final result of the yajna
   ======================================================================== */
.offering { background:var(--deepest); color:#fff; }
.offering-head { text-align:center; max-width:720px; margin:0 auto 44px; }
.offering-head .eyebrow { color:var(--gold-text); }
.offering-total { display:flex; align-items:baseline; justify-content:center; gap:12px; margin:18px 0 4px; }
.offering-total b { font-family:var(--serif); font-weight:400; font-size:clamp(56px,13vw,116px); line-height:.95; color:var(--gold-text); letter-spacing:-.01em; }
.offering-total span { font-family:var(--serif); font-size:clamp(20px,3.4vw,30px); color:rgba(255,255,255,.6); }
.offering-sub { font-family:var(--sanskrit); font-style:italic; font-size:clamp(17px,2.4vw,22px); color:#fff; }
.offering-window { font-size:13px; color:rgba(255,255,255,.45); margin-top:14px; }
.offering-goal { display:inline-block; margin-top:20px; padding:8px 18px; border-radius:999px; background:rgba(224,185,112,.14); border:1px solid rgba(224,185,112,.4); color:var(--gold-text); font-size:13.5px; font-weight:600; }

.offering-figures { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:52px; }
.ofig { text-align:center; padding:20px 8px; border:1px solid rgba(224,185,112,.2); border-radius:14px; background:rgba(255,255,255,.03); }
.ofig b { display:block; font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.6vw,27px); color:#fff; line-height:1; }
.ofig span { display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-top:8px; }

.offering-h3 { font-family:var(--serif); font-weight:400; font-size:clamp(22px,3vw,28px); color:#fff; margin-bottom:6px; }
.offering-note { font-size:14.5px; color:rgba(255,255,255,.5); margin-bottom:20px; }
.stream-list { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.stream { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px; border:1px solid rgba(224,185,112,.18); border-radius:14px; background:rgba(255,255,255,.03); }
.stream-main h4 { font-family:var(--serif); font-weight:400; font-size:20px; color:#fff; }
.stream-note { font-size:13.5px; color:rgba(255,255,255,.5); margin-top:4px; }
.stream-extra { font-size:12.5px; color:rgba(255,255,255,.35); margin-top:6px; }
.stream-nums { text-align:right; flex:none; }
.stream-crore b { font-family:var(--serif); font-weight:400; font-size:30px; color:var(--gold-text); line-height:1; }
.stream-crore span { display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-top:5px; }
.stream-sub { font-size:12.5px; color:rgba(255,255,255,.55); margin-top:10px; white-space:nowrap; }
.stream-sub b { color:#fff; font-weight:600; }

.offering-begin { margin-top:52px; }
.pledge-list { display:flex; flex-direction:column; gap:11px; max-width:620px; }
.pledge { display:grid; grid-template-columns:190px 1fr 64px; align-items:center; gap:14px; }
.pledge-lbl { font-size:13.5px; color:rgba(255,255,255,.7); }
.pledge-bar { height:9px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.pledge-bar i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold),var(--terracotta)); }
.pledge-n { text-align:right; font-family:var(--serif); font-size:18px; color:#fff; }
.offering-first { font-size:14.5px; color:var(--gold-text); margin-top:22px; }

@media (max-width:900px) { .offering-figures { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px) {
  .offering-figures { grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:40px; }
  .ofig { padding:16px 6px; }
  .stream { flex-direction:column; align-items:flex-start; gap:14px; padding:18px; }
  .stream-nums { text-align:left; }
  .stream-sub { white-space:normal; }
  .pledge { grid-template-columns:1fr 52px; grid-template-areas:'lbl n' 'bar bar'; gap:6px 12px; }
  .pledge-lbl { grid-area:lbl; }
  .pledge-n { grid-area:n; }
  .pledge-bar { grid-area:bar; }
}

/* Countdown, once the yajna is complete */
.countdown-done { display:block; margin-top:26px; }
.cd-done b { display:block; font-family:var(--serif); font-weight:400; font-size:clamp(20px,3vw,26px); color:var(--gold-text); }
.cd-done span { display:block; font-size:13px; color:rgba(255,255,255,.5); margin-top:7px; }
/* retired once the yajna is complete (survives applyAuthUI's hidden toggling) */
.is-retired { display:none !important; }

/* Stat strip on small phones: let the labels wrap inside their track */
@media (max-width:560px) {
  .stat { padding-left:8px; padding-right:8px; }
  .stat-lbl, .stat-sub { white-space:normal; overflow-wrap:anywhere; }
}

/* "Where each devotee began" — scope label, since these figures are portal-only */
.offering-begin-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.offering-begin-head .offering-h3 { margin-bottom:0; }
.offering-scope { display:inline-block; padding:5px 12px; border-radius:999px; border:1px solid rgba(224,185,112,.4); background:rgba(224,185,112,.1); color:var(--gold-text); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.offering-note b { color:#fff; font-weight:600; }