/* ==========================================================================
   बच्चों की कुंडली — the site's own look.

   Written from scratch for this site. Nothing here comes from the old adult
   prototype or from balkundali/static/bal.css.

   The idea: a children's astrology site should feel like a warm evening, not
   a horoscope column. Cream paper, deep indigo night, marigold and coral —
   the colours of a diya and a rangoli, not of a fortune app. Everything is
   round, nothing is sharp, and the type is the friendliest Devanagari face
   that renders well on a phone.
   ========================================================================== */


:root {
  /* paper & ink */
  --cream:   #FFF6E9;
  --cream-2: #FFEFD9;
  --paper:   #FFFFFF;
  --ink:     #2A2358;
  --ink-2:   #5A5183;
  --ink-3:   #6E6696;   /* was #8C85AC — 3.2:1 on cream, below AA */
  --night:   #241D52;
  --night-2: #372C78;

  /* the six playful colours */
  --gold:   #FFB423;
  --coral:  #FF7A66;
  --mint:   #3FC9A5;
  --sky:    #57A8F5;
  --violet: #9271EE;
  --pink:   #FF9ECD;

  /* The bright colours above are for FILLS. As text on cream they fell below
     WCAG AA (coral 2.4:1, violet 3.4:1), so text uses these: the lightest
     shades of the same hues that clear 4.5:1 on cream, cream-2 and white. */
  --coral-ink:  #BA4832;
  --violet-ink: #774DEA;

  --line:   #EADFC9;
  --line-2: #D9CDB4;

  --r-sm: 14px;
  --r:    22px;
  --r-lg: 30px;
  --r-xl: 40px;

  --shadow:    0 6px 0 rgba(42, 35, 88, .07), 0 14px 30px rgba(42, 35, 88, .07);
  --shadow-lg: 0 10px 0 rgba(42, 35, 88, .08), 0 24px 50px rgba(42, 35, 88, .10);

  --head: 'Baloo 2', 'Mukta', system-ui, sans-serif;
  --body: 'Mukta', 'Baloo 2', system-ui, sans-serif;

  --wrap: 1120px;
  --gut: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.72;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--head);
  line-height: 1.22;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4.2vw, 2.4rem); }
/* Each inner page's own title: its one h1, at the size its h2 had. */
.page-h { font-size: clamp(1.5rem, 4.2vw, 2.4rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.45rem); }
p  { margin: 0 0 1em; }
a  { color: var(--violet-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
img, svg { max-width: 100%; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.center { text-align: center; }
.lede { font-size: clamp(1.02rem, 2.3vw, 1.22rem); color: var(--ink-2); max-width: 62ch; }
.center .lede { margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ───────────────────────────── header ───────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 246, 233, .92);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 14px; min-height: 68px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none;
         color: var(--ink); flex-shrink: 0; }
.brand .mark { width: 40px; height: 40px; flex: 0 0 40px; }
.brand b { font-family: var(--head); font-size: 1.22rem; font-weight: 800; display: block; line-height: 1.1; }
.brand span { font-size: .74rem; color: var(--ink-3); font-weight: 600; letter-spacing: .02em; }

.nav { margin-left: auto; display: flex; gap: 4px; }
.nav a {
  font-family: var(--head); font-weight: 600; font-size: .98rem;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; transition: .18s;
}
.nav a:hover { background: var(--cream-2); color: var(--ink); }
.nav a.on { background: var(--ink); color: #fff; }

.burger {
  margin-left: auto; display: none; width: 46px; height: 46px;
  border: 2px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--paper); cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.burger i { display: block; width: 20px; height: 2.5px; background: var(--ink); border-radius: 2px; position: relative; }
.burger i::before, .burger i::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2.5px;
  background: var(--ink); border-radius: 2px;
}
.burger i::before { top: -6px; } .burger i::after { top: 6px; }

@media (max-width: 1040px) {
  .burger { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 2px;
    background: var(--cream); border-bottom: 2px solid var(--line);
    padding: 12px var(--gut) 20px; margin: 0;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
  }
  .nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav a { padding: 12px 16px; font-size: 1.05rem; }
}
.top.compact .burger { display: flex; }
.top.compact .nav {
  position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 2px;
  background: var(--cream); border-bottom: 2px solid var(--line);
  padding: 12px var(--gut) 20px; margin: 0;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
.top.compact .nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.top.compact .nav a { padding: 12px 16px; font-size: 1.05rem; }

/* ───────────────────────────── hero ───────────────────────────── */

.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, var(--night-2) 0%, var(--night) 60%);
  color: #fff; padding: 62px 0 0;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.hero h1 { color: #fff; }
.hero .lede { color: #D9D2F5; }
.hero .wrap { position: relative; z-index: 3; }

.sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sky i {
  position: absolute; background: #fff; border-radius: 50%;
  animation: twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .22; transform: scale(.7); } 50% { opacity: .95; transform: scale(1); } }

.hero .moon { position: absolute; right: -30px; top: 22px; width: 190px; z-index: 2; opacity: .95; animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
/* On a phone the heading runs the full width; a 190px moon sat under its last
   word, white on yellow. Smaller and higher, it stays above the words. */
@media (max-width: 560px) { .hero .moon { width: 112px; right: -26px; top: -8px; } }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--head); font-weight: 600; font-size: .9rem;
  background: rgba(255, 180, 35, .16); color: var(--gold);
  border: 2px solid rgba(255, 180, 35, .34);
  padding: 6px 16px; border-radius: 999px; margin-bottom: 18px;
}
.hero-in { max-width: 700px; padding-bottom: 34px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* the row of children the hero stands on */
.kids { position: relative; z-index: 3; display: block; width: 100%; margin-bottom: -2px; }

/* ───────────────────────────── buttons ───────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--head); font-weight: 700; font-size: 1.04rem;
  padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer;
  text-decoration: none; transition: transform .16s, box-shadow .16s, filter .16s;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .16);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(0, 0, 0, .16); filter: brightness(1.04); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .16); }
.btn-gold  { background: var(--gold);  color: #3D2A00; }
.btn-coral { background: var(--coral); color: var(--ink); }
.btn-ink   { background: var(--ink);   color: #fff; }
.btn-ghost {
  background: transparent; color: #fff; box-shadow: none;
  border: 2.5px solid rgba(255, 255, 255, .42);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .1); box-shadow: none; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-lg { font-size: 1.12rem; padding: 16px 34px; }

/* ───────────────────────────── sections & cards ───────────────────────────── */

section { padding: 62px 0; }
.sec-h { max-width: 60ch; margin: 0 auto 38px; text-align: center; }
.sec-h p { color: var(--ink-2); margin: 0; }
.kicker {
  font-family: var(--head); font-weight: 700; font-size: .84rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--coral-ink);
  margin-bottom: 8px;
}

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  background: var(--paper); border: 2.5px solid var(--line);
  border-radius: var(--r-lg); padding: 26px;
  box-shadow: var(--shadow); position: relative;
}
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }

.card-link { text-decoration: none; color: inherit; display: block; transition: transform .18s, box-shadow .18s; }
.card-link:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card-link .go {
  font-family: var(--head); font-weight: 700; color: var(--violet-ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.card-link:hover .go { gap: 11px; }
.card-link .go span { transition: .18s; }

.ico {
  width: 62px; height: 62px; border-radius: 20px;
  display: grid; place-items: center; margin-bottom: 16px;
}
.ico svg { width: 34px; height: 34px; }
.i-gold   { background: #FFF1D2; } .i-coral  { background: #FFE6E1; }
.i-mint   { background: #DEF7EF; } .i-sky    { background: #DFEDFE; }
.i-violet { background: #EBE3FE; } .i-pink   { background: #FFE8F3; }

/* age bands */
.band { text-align: center; padding: 24px 18px; }
.band .ico { margin: 0 auto 14px; }
.band b { font-family: var(--head); font-size: 1.22rem; display: block; }
.band .yr {
  font-family: var(--head); font-weight: 600; font-size: .9rem;
  color: var(--coral-ink); margin-bottom: 8px; display: block;
}
.band p { font-size: .96rem; color: var(--ink-2); margin: 0; }

/* steps */
.step { text-align: center; }
.step .n {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--gold); color: #3D2A00; display: grid; place-items: center;
  font-family: var(--head); font-weight: 800; font-size: 1.6rem;
  box-shadow: 0 5px 0 #E29A0D;
}
.step p { color: var(--ink-2); font-size: .98rem; }

.band-strip { background: var(--cream-2); }

/* the promise ribbon */
.ribbon {
  background: var(--ink); color: #fff; border-radius: var(--r-lg);
  padding: 34px 30px; text-align: center; position: relative; overflow: hidden;
}
.ribbon p { margin: 0; color: #DDD7F2; max-width: 68ch; margin-inline: auto; }
.ribbon b { color: var(--gold); }
.ribbon .glow {
  position: absolute; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,180,35,.22), transparent 70%);
  top: -120px; right: -60px;
}

/* faq */
.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  background: var(--paper); border: 2.5px solid var(--line);
  border-radius: var(--r); margin-bottom: 12px; overflow: hidden;
}
.faq summary {
  font-family: var(--head); font-weight: 700; font-size: 1.06rem;
  padding: 18px 22px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: '?'; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--violet); color: #fff; display: grid; place-items: center;
  font-size: .9rem;
}
.faq details[open] summary { background: var(--cream-2); }
.faq .a { padding: 4px 22px 20px 60px; color: var(--ink-2); font-size: .99rem; }

/* ───────────────────────────── forms ───────────────────────────── */

.form-card {
  background: var(--paper); border: 2.5px solid var(--line);
  border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow);
  max-width: 720px; margin: 0 auto;
}
.f-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.f-row { display: flex; flex-direction: column; gap: 6px; position: relative; }
.f-row.wide { grid-column: 1 / -1; }
label {
  font-family: var(--head); font-weight: 600; font-size: .94rem; color: var(--ink);
}
input, select {
  font-family: var(--body); font-size: 1.02rem; color: var(--ink);
  padding: 13px 15px; border: 2.5px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--cream); width: 100%; transition: .16s;
}
input:focus, select:focus {
  outline: none; border-color: var(--violet); background: var(--paper);
  box-shadow: 0 0 0 4px rgba(146, 113, 238, .14);
}
input::placeholder { color: var(--ink-3); }
input.filled { background: #F1FBF7; border-color: var(--mint); }

.seg { display: flex; gap: 8px; }
.seg label {
  flex: 1; text-align: center; padding: 12px; border-radius: var(--r-sm);
  border: 2.5px solid var(--line-2); background: var(--cream); cursor: pointer;
  font-size: 1rem; transition: .16s;
}
.seg input:checked + label {
  background: var(--violet-ink); border-color: var(--violet-ink); color: #fff;
}
.seg input:focus-visible + label { box-shadow: 0 0 0 4px rgba(146, 113, 238, .2); }

.hint { font-size: .86rem; color: var(--ink-3); margin: 0; }

/* place autocomplete */
.ac {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: 4px;
  background: var(--paper); border: 2.5px solid var(--line-2);
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
  max-height: 260px; overflow-y: auto; display: none;
}
.ac.show { display: block; }
.ac button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 11px 14px; font-family: var(--body); font-size: .96rem;
  color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--line);
}
.ac button:last-child { border-bottom: 0; }
.ac button:hover, .ac button:focus { background: var(--cream-2); outline: none; }
.ac .msg { padding: 12px 14px; color: var(--ink-3); font-size: .93rem; }

.langs { display: flex; gap: 6px; flex-wrap: wrap; }
.langs input { position: absolute; opacity: 0; pointer-events: none; }
.langs label {
  padding: 7px 15px; border-radius: 999px; border: 2px solid var(--line-2);
  background: var(--cream); cursor: pointer; font-size: .92rem;
}
.langs input:checked + label { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ───────────────────────────── the reading ───────────────────────────── */

.err {
  background: #FFEAE6; border: 2.5px solid var(--coral); color: #8C2D1B;
  border-radius: var(--r); padding: 18px 22px; margin: 22px auto 0;
  max-width: 720px; font-size: .99rem;
}
.err b { display: block; font-family: var(--head); margin-bottom: 4px; }

.loading { text-align: center; padding: 50px 0; }
.loading .orbit { width: 78px; height: 78px; margin: 0 auto 18px; animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading p { font-family: var(--head); font-weight: 600; color: var(--ink-2); }

#out { display: none; }
#out.show { display: block; }

.who {
  background: linear-gradient(135deg, var(--night-2), var(--night));
  color: #fff; border-radius: var(--r-lg); padding: 30px;
  position: relative; overflow: hidden; margin-bottom: 22px;
}
.who h2 { color: #fff; margin-bottom: 4px; }
.who .sub { color: #C9C1EE; font-size: .98rem; margin-bottom: 20px; }
.who .facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.who .fact {
  background: rgba(255, 255, 255, .09); border: 1.5px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-sm); padding: 12px 14px;
}
.who .fact i {
  display: block; font-style: normal; font-size: .76rem; color: #A99FD8;
  font-weight: 600; letter-spacing: .03em; margin-bottom: 2px;
}
.who .fact b { font-family: var(--head); font-size: 1.16rem; font-weight: 700; }
.who .fact small { display: block; font-size: .74rem; color: #C9C1EE; line-height: 1.35; margin-top: 3px; }

.stage-tag {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--head);
  font-weight: 600; font-size: .88rem; background: rgba(63, 201, 165, .18);
  color: #6FE8C6; border: 2px solid rgba(63, 201, 165, .3);
  padding: 5px 14px; border-radius: 999px;
}

.chart-box { text-align: center; }
.chart-box svg { max-width: 380px; width: 100%; height: auto; }

/* Two columns where there is room (three made narrow cards that wrapped every
   other word), and `dense` so a card that follows a full-width one can move
   up into the gap beside a lone card instead of leaving it empty. */
.blocks { display: grid; gap: 18px; grid-auto-flow: row dense; align-items: start;
          grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.blk { background: var(--paper); border: 2.5px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); }
.blk > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.blk .tag {
  font-family: var(--head); font-size: .78rem; font-weight: 700; padding: 3px 11px;
  border-radius: 999px; background: var(--cream-2); color: var(--ink-2);
}
.blk .note { color: var(--ink-2); font-size: .97rem; }
.blk.span2 { grid-column: 1 / -1; }

.do {
  background: #F1FBF7; border-left: 5px solid var(--mint);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 13px 16px; margin-top: 12px;
  font-size: .97rem;
}
.do b { font-family: var(--head); color: #1B8064; }
.care {
  background: #FFF6E2; border-left: 5px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 13px 16px; margin-top: 12px;
  font-size: .97rem;
}
.care b { font-family: var(--head); color: #96650A; }

.kv { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 0; }
.kv div { background: var(--cream); border-radius: var(--r-sm); padding: 10px 13px; }
.kv i { display: block; font-style: normal; font-size: .76rem; color: var(--ink-3); font-weight: 600; }
.kv b { font-family: var(--head); font-size: 1.02rem; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  /* inline-block: a chip that reached the end of a line broke into two
     half-pills on a phone; now it moves down whole and wraps inside. */
  display: inline-block; max-width: 100%;
  font-family: var(--head); font-weight: 600; font-size: .92rem;
  padding: 6px 15px; border-radius: 999px; background: var(--cream-2);
  border: 2px solid var(--line-2);
}
.chip.good { background: #DEF7EF; border-color: #9CE6D0; color: #17795E; }
.chip.soft { background: #FFF1D2; border-color: #FFD98A; color: #8A5E06; }
.chip.date { background: #F3EFFD; border-color: #D9CCFA; color: var(--violet-ink); }

ul.list { margin: 0; padding-left: 0; list-style: none; }
ul.list li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: .98rem; }
ul.list li::before {
  content: '★'; position: absolute; left: 0; top: -1px; color: var(--gold); font-size: .95rem;
}

.graha-row {
  display: flex; gap: 13px; padding: 13px 0; border-bottom: 1.5px dashed var(--line);
}
.graha-row:last-child { border-bottom: 0; }
.graha-row .gname {
  flex: 0 0 96px; font-family: var(--head); font-weight: 700; font-size: 1.02rem;
}
.graha-row .gname small { display: block; font-weight: 500; font-size: .78rem; color: var(--ink-3); }
.graha-row .gtext { font-size: .96rem; color: var(--ink-2); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.d-strong { background: var(--mint); } .d-mid { background: var(--gold); } .d-weak { background: var(--coral); }

.bhava {
  border: 2px solid var(--line); border-radius: var(--r); padding: 15px 17px;
  background: var(--cream); margin-bottom: 11px;
}
.bhava b { font-family: var(--head); font-size: 1.04rem; }
.sk-go {
  margin-top: 10px; font-family: var(--head); font-weight: 700; font-size: .92rem;
  background: var(--paper); color: var(--violet-ink); border: 2px solid var(--violet-ink);
  border-radius: 999px; padding: 6px 16px; cursor: pointer;
}
.sk-go[disabled] { opacity: .55; cursor: wait; }
.sk-days { margin-top: 10px; background: #F3EFFD; border-radius: var(--r-sm); padding: 12px 14px; }
.sk-list { list-style: none; margin: 0 0 8px; padding: 0; }
.sk-list li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.sk-list li:last-child { border-bottom: 0; }
.sk-list small { display: block; color: var(--ink-3); font-size: .84rem; }
.bhava .h-no {
  display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%;
  background: var(--violet); color: #fff; font-family: var(--head); font-weight: 700;
  font-size: .86rem; margin-right: 9px;
}
.bhava p { margin: 7px 0 0; font-size: .95rem; color: var(--ink-2); }

.withheld {
  background: var(--cream-2); border: 2.5px dashed var(--line-2);
  border-radius: var(--r); padding: 17px 21px; font-size: .95rem; color: var(--ink-2);
  text-align: center;
}

.save-bar {
  background: var(--paper); border: 2.5px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; text-align: center; box-shadow: var(--shadow);
}
.save-bar p { color: var(--ink-2); font-size: .96rem; }

/* ───────────────────────────── tables (namkaran) ───────────────────────────── */

.t-wrap {
  background: var(--paper); border: 2.5px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.t-scroll { overflow-x: auto; }
table.akshar { border-collapse: collapse; width: 100%; min-width: 620px; }
table.akshar th, table.akshar td {
  padding: 12px 14px; text-align: left; border-bottom: 1.5px solid var(--line);
}
table.akshar thead th {
  background: var(--ink); color: #fff; font-family: var(--head); font-weight: 600;
  font-size: .92rem; position: sticky; top: 0;
}
table.akshar tbody tr:hover { background: var(--cream-2); }
table.akshar tbody tr:last-child td { border-bottom: 0; }
table.akshar .nk { font-family: var(--head); font-weight: 700; font-size: 1.04rem; white-space: nowrap; }
table.akshar .nk small { display: block; font-weight: 500; font-size: .76rem; color: var(--ink-3); }
table.akshar .ak {
  font-family: var(--head); font-weight: 700; font-size: 1.16rem; color: var(--violet-ink);
  white-space: nowrap;
}
table.akshar .ak small { display: block; font-size: .72rem; color: var(--ink-3); font-weight: 500; }
table.akshar .lord { font-size: .95rem; color: var(--ink-2); }
/* On a phone the table showed the first pada and hid the other three off to
   the right, with nothing to say they were there. There each nakshatra is a
   card instead: name and lord on top, its four syllables in a row beneath,
   each labelled with its pada. */
@media (max-width: 560px) {
  table.akshar { min-width: 0; }
  table.akshar thead { display: none; }
  table.akshar tbody tr {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 6px;
    padding: 12px 14px; border-bottom: 1.5px solid var(--line);
  }
  table.akshar tbody tr:last-child { border-bottom: 0; }
  table.akshar td { border-bottom: 0; padding: 2px; }
  table.akshar td.nk { grid-column: 1 / 4; white-space: normal; }
  table.akshar td.lord { grid-column: 4; text-align: right; align-self: center; }
  table.akshar td.ak { text-align: center; background: var(--cream); border-radius: var(--r-sm); padding: 7px 2px; }
  table.akshar td.ak::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--body); font-weight: 500; font-size: .68rem; color: var(--ink-3);
  }
}
.gm-flag {
  font-family: var(--head); font-size: .7rem; font-weight: 700; background: #FFF1D2;
  color: #8A5E06; border: 1.5px solid #FFD98A; padding: 1px 7px; border-radius: 999px;
  margin-left: 6px; vertical-align: 2px;
}

/* nakshatra cards */
.nk-card { background: var(--paper); border: 2.5px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow); }
.nk-card .hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.nk-card .hd b { font-family: var(--head); font-size: 1.28rem; }
.nk-card .hd .lord { font-size: .84rem; color: var(--ink-3); font-family: var(--head); font-weight: 600; }
.nk-card .num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--cream-2);
  display: grid; place-items: center; font-family: var(--head); font-weight: 700;
  font-size: .85rem; color: var(--ink-2);
}
.nk-card .nat { font-size: 1rem; margin: 10px 0 0; }
.nk-card .pads { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.nk-card .pads span {
  font-family: var(--head); font-weight: 700; font-size: .92rem; padding: 4px 12px;
  border-radius: 999px; background: #EBE3FE; color: #5B39B8; border: 2px solid #D6C6FB;
}

/* sanskar timeline */
.tl { position: relative; max-width: 860px; margin: 0 auto; }
.tl::before {
  content: ''; position: absolute; left: 29px; top: 12px; bottom: 12px; width: 4px;
  background: repeating-linear-gradient(var(--line-2) 0 8px, transparent 8px 16px);
  border-radius: 4px;
}
.tl-item { position: relative; padding-left: 78px; margin-bottom: 22px; }
.tl-item .num {
  position: absolute; left: 0; top: 4px; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--head); font-weight: 800;
  font-size: 1.5rem; color: var(--ink); border: 4px solid var(--cream); z-index: 2;
}
.n-coral { background: var(--coral); } .n-violet { background: var(--violet-ink); color: #fff !important; }
.n-sky { background: var(--sky); } .n-mint { background: var(--mint); }
.n-gold { background: var(--gold); color: #3D2A00 !important; }
.tl-item .box {
  background: var(--paper); border: 2.5px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; box-shadow: var(--shadow);
}
.tl-item .when {
  font-family: var(--head); font-weight: 600; font-size: .88rem; color: var(--coral-ink);
  display: inline-block; margin-bottom: 2px;
}
.tl-item h3 { margin-bottom: .3em; }
.tl-item .jy {
  background: var(--cream); border-radius: var(--r-sm); padding: 14px 16px; margin-top: 13px;
  font-size: .96rem; color: var(--ink-2);
}
.tl-item .jy b { font-family: var(--head); color: var(--violet-ink); display: block; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px; }
@media (max-width: 560px) {
  .tl::before { left: 21px; }
  .tl-item { padding-left: 58px; }
  .tl-item .num { width: 44px; height: 44px; font-size: 1.16rem; border-width: 3px; }
}

/* ───────────────────────────── footer ───────────────────────────── */

.foot {
  background: var(--ink); color: #BDB5DE; margin-top: 30px;
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 46px 0 28px;
}
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.foot h4 { color: #fff; font-size: 1.04rem; margin-bottom: .6em; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 7px; font-size: .96rem; }
.foot .bot {
  border-top: 1.5px solid rgba(255, 255, 255, .13); margin-top: 32px; padding-top: 20px;
  font-size: .88rem; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
}
.foot .brand b { color: #fff; }
.foot .brand span { color: #9A91C4; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Exactly two across once there is room — four cards then sit as a tidy 2×2
   instead of three-and-an-orphan, which is what `auto-fit` gives at this
   width. Below the breakpoint they stack. */
.g2x2 { grid-template-columns: 1fr; }
@media (min-width: 820px) { .g2x2 { grid-template-columns: repeat(2, 1fr); } }

/* ───────────────────────── शुभ दिन — the sanskar picker ───────────────────────── */

.pick { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
/* Hidden but still focusable. Opacity alone left each radio at full width,
   and on a phone the row of them pushed the page 50px wider than the screen. */
.pick input, .seg input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; margin: 0; clip-path: inset(50%);
}
.pick label {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding: 16px 12px; cursor: pointer;
  border: 2.5px solid var(--line-2); border-radius: var(--r);
  background: var(--cream); transition: .16s;
}
.pick label b { font-family: var(--head); font-size: 1rem; font-weight: 700; line-height: 1.25; }
.pick label i { font-style: normal; font-size: .8rem; color: var(--ink-3); font-weight: 600; }
.pick .pi { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.pick .pi svg { width: 24px; height: 24px; }
.pick label:hover { border-color: var(--ink-3); }
.pick input:checked + label {
  border-color: var(--violet); background: #F6F2FE;
  box-shadow: 0 0 0 3px rgba(146, 113, 238, .14);
}
.pick input:focus-visible + label { box-shadow: 0 0 0 4px rgba(146, 113, 238, .28); }

/* ───────────────────────── शुभ दिन — the days ───────────────────────── */

.din {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: 92px 1fr;
  background: var(--paper); border: 2.5px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.din.uttam { border-color: #9CE6D0; background: #FBFFFD; }

.din .cal {
  border-radius: var(--r-sm); overflow: hidden; border: 2px solid var(--line-2);
  text-align: center; background: var(--cream);
}
.din .cal .m {
  background: var(--ink); color: #fff; font-family: var(--head); font-weight: 600;
  font-size: .78rem; padding: 3px 0; letter-spacing: .02em;
}
.din.uttam .cal .m { background: #17795E; }
.din .cal .d { font-family: var(--head); font-weight: 800; font-size: 1.9rem; line-height: 1.15; padding-top: 2px; }
.din .cal .y { font-size: .72rem; color: var(--ink-3); padding-bottom: 4px; }

.din .hd { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.din .hd b { font-family: var(--head); font-size: 1.12rem; }
.din .v {
  font-family: var(--head); font-weight: 700; font-size: .78rem; padding: 2px 11px;
  border-radius: 999px; border: 2px solid;
}
.din .v.uttam { background: #DEF7EF; border-color: #9CE6D0; color: #17795E; }
.din .v.shubh { background: #FFF1D2; border-color: #FFD98A; color: #8A5E06; }

.din .panch {
  display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .94rem;
  color: var(--ink-2); margin-bottom: 10px;
}
.din .panch span b { font-family: var(--head); color: var(--ink); font-weight: 600; }

/* `chk`, not `mark` — the brand logo is `.brand .mark`, and a bare `.mark`
   rule put this pill's padding inside the 40px logo box and shrank it. */
.marks { display: flex; flex-wrap: wrap; gap: 6px; }
.chk {
  font-family: var(--head); font-weight: 600; font-size: .82rem;
  padding: 3px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px;
}
.chk.yes { background: #DEF7EF; color: #17795E; }
.chk.no  { background: var(--cream-2); color: var(--ink-3); }

.shastra {
  background: var(--ink); color: #DDD7F2; border-radius: var(--r-lg);
  padding: 26px 28px; margin-bottom: 22px;
}
.shastra h3 { color: #fff; margin-bottom: .4em; }
.shastra p { margin: 0; font-size: .97rem; line-height: 1.8; }
.shastra .src {
  margin-top: 14px; font-size: .84rem; color: #9A91C4;
  border-top: 1.5px solid rgba(255,255,255,.13); padding-top: 12px;
}

@media (max-width: 520px) {
  .din { grid-template-columns: 68px 1fr; gap: 12px; padding: 14px; }
  .din .cal .d { font-size: 1.5rem; }
}

/* "Why were the other days dropped?" — folded away, because most parents want
   the dates, and the ones who want the reasoning want all of it. */
details.why {
  background: var(--paper); border: 2.5px solid var(--line);
  border-radius: var(--r); margin-bottom: 18px; overflow: hidden;
}
details.why summary {
  font-family: var(--head); font-weight: 700; font-size: .98rem;
  padding: 14px 20px; cursor: pointer; list-style: none; color: var(--ink-2);
}
details.why summary::-webkit-details-marker { display: none; }
details.why summary::after { content: ' ▾'; color: var(--ink-3); }
details.why[open] summary { background: var(--cream-2); color: var(--ink); }
details.why[open] summary::after { content: ' ▴'; }
details.why ul { padding: 14px 20px 18px; margin: 0; }
details.why li { font-size: .95rem; color: var(--ink-2); }

/* ───────────────────────── भाषा — the language strip ───────────────────────── */

/* Its own slim row above the header. Inside the nav it pushed seven links and
   four languages onto one line, and in Gujarati and English the links broke
   across two lines. */
.langbar { background: var(--ink); }
/* Each language is named in its own script. On a page in another script
   those one or two words pulled in a whole web font — 170 KB on the English
   page, for "हिन्दी · मराठी" — so there the phone's own font draws them. */
html:not([lang|="hi"]):not([lang|="mr"]) .lname:is([lang="hi"], [lang="mr"]),
html:not([lang|="gu"]) .lname[lang="gu"] { font-family: system-ui, sans-serif; }
.langbar .wrap { display: flex; justify-content: flex-end; min-height: 32px; align-items: center; }
.langpick { display: flex; gap: 2px; flex-wrap: wrap; }
.langpick a {
  font-family: var(--head); font-weight: 600; font-size: .8rem; line-height: 1.2;
  color: #BDB5DE; text-decoration: none; padding: 5px 10px; border-radius: 999px;
  white-space: nowrap; transition: .16s;
}
.langpick a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.langpick a.on { color: var(--ink); background: var(--gold); }
@media (max-width: 520px) {
  .langbar .wrap { justify-content: center; }
}

/* Gujarati: Baloo 2 and Mukta carry no Gujarati glyphs, so the Gujarati page
   swaps in their own Gujarati siblings (loaded only on that page). */
html[lang="gu"] {
  --head: 'Baloo Bhai 2', 'Baloo 2', 'Mukta Vaani', system-ui, sans-serif;
  --body: 'Mukta Vaani', 'Baloo Bhai 2', system-ui, sans-serif;
}

/* ───────────────────────── when a page is not found ───────────────────────── */

.lost { text-align: center; max-width: 620px; margin: 0 auto; }
.lost-star { width: 220px; height: auto; margin: 0 auto 8px; display: block; }
.lost-h { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.lost .lede { margin-inline: auto; }

/* the place suggestions: town bold, state or country quieter beside it */
.ac button b { font-weight: 600; }
.ac button span { color: var(--ink-3); font-size: .88rem; margin-left: 8px; }
.ac button[aria-selected="true"] { background: var(--cream-2); }

/* ───────────────────────── privacy ───────────────────────── */

.privacy { max-width: 760px; margin: 0 auto; }
.pv {
  background: var(--paper); border: 2.5px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 26px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.pv h3 { margin-bottom: .3em; }
.pv p { margin: 0; color: var(--ink-2); }
.foot .legal { display: flex; gap: 16px; flex-wrap: wrap; }

/* save + share, side by side, stacking on a narrow phone */
.save-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ───────────────────────── the shared birth form ───────────────────────── */

.tick {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font-family: var(--body); font-weight: 500; font-size: .92rem; color: var(--ink-2);
  cursor: pointer;
}
.tick input { width: 18px; height: 18px; accent-color: var(--violet-ink); padding: 0; }
input:disabled { opacity: .5; cursor: not-allowed; }
.place-note { margin: 4px 0 0; font-size: .9rem; color: var(--ink-2); min-height: 1.2em; }
.place-note b { color: var(--ink); }
details.geo { margin-top: 12px; border: 2px dashed var(--line-2); border-radius: var(--r-sm); padding: 0 14px; }
details.geo summary {
  cursor: pointer; font-family: var(--head); font-weight: 600; font-size: .92rem;
  color: var(--ink-2); padding: 10px 0; list-style: none;
}
details.geo summary::-webkit-details-marker { display: none; }
details.geo summary::before { content: "▸ "; }
details.geo[open] summary::before { content: "▾ "; }
details.geo[open] { padding-bottom: 14px; }
#tzHint:empty { display: none; }

/* ───────────────────────── the reading, grouped ───────────────────────── */

.form-card .f-grid + .f-grid { margin-top: 16px; }

.glance {
  background: var(--paper); border: 2.5px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 26px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.glance h3 { margin-bottom: .5em; }
.glance p { margin: 0 0 8px; color: var(--ink-2); }
.glance p:last-child { margin-bottom: 0; }
.glance b { font-family: var(--head); color: var(--ink); margin-right: 6px; }

.tu {
  background: #FFF6E2; border: 2.5px solid #FFD98A; border-radius: var(--r-lg);
  padding: 22px 26px; margin-bottom: 18px;
}
.tu h3 { margin-bottom: .3em; }
.tu h4 { font-family: var(--head); margin: 16px 0 8px; font-size: 1.02rem; }
.tu p { margin: 0; color: var(--ink-2); font-size: .97rem; }
.tu-rows { display: grid; gap: 8px; }
.tu-row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center;
  background: var(--paper); border-radius: var(--r-sm); padding: 10px 14px;
}
.tu-when { font-size: .93rem; color: var(--ink-2); }
.tu-syl { grid-row: span 2; font-family: var(--head); font-size: 1.8rem; color: var(--violet-ink); }
.tu-nak { font-size: .85rem; color: var(--ink-3); }

.jump {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 6px 0 8px; padding: 12px 0; position: sticky; top: 70px; z-index: 5;
  background: var(--cream);
}
.jump span { font-family: var(--head); font-weight: 600; font-size: .9rem; color: var(--ink-2); margin-right: 4px; }
.jump a {
  font-family: var(--head); font-weight: 600; font-size: .92rem; text-decoration: none;
  color: var(--ink); background: var(--paper); border: 2px solid var(--line-2);
  padding: 5px 14px; border-radius: 999px;
}
.jump a:hover { border-color: var(--violet-ink); }

.grp { padding: 0; margin: 26px 0 0; scroll-margin-top: 130px; }
.grp-h { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin-bottom: 14px; }

details.fold {
  margin-top: 26px; background: var(--paper); border: 2.5px solid var(--line);
  border-radius: var(--r-lg); padding: 0 22px;
}
details.fold summary {
  cursor: pointer; list-style: none; padding: 18px 0;
  font-family: var(--head); font-weight: 700; font-size: 1.1rem;
}
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary::before { content: "▸ "; color: var(--violet-ink); }
details.fold[open] summary::before { content: "▾ "; }
details.fold[open] { padding-bottom: 22px; }
details.fold > .note { margin-top: 0; }
details.fold-est { border-color: #FFD98A; background: #FFFBF1; }
@media (max-width: 1040px) { .jump { top: 68px; } }

/* On a phone the jump links are one line that scrolls sideways — wrapped, a
   sticky bar of them ate a third of the screen. */
@media (max-width: 640px) {
  .jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .jump::-webkit-scrollbar { display: none; }
  .jump a, .jump span { flex: 0 0 auto; white-space: nowrap; }
}

/* parts drawn from the shared layout */
.lead { font-family: var(--head); font-size: 1.3rem; font-weight: 700; margin-bottom: .3em; }
.sep { margin: 14px 0; border-top: 1.5px dashed var(--line); }
.small { color: var(--ink-3); font-size: .93rem; margin: 6px 0 0; }
.gnote { margin-top: 6px; color: var(--ink-3); font-size: .92rem; }
.big { text-align: center; margin-bottom: 16px; }
.big b { display: block; font-family: var(--head); font-size: 3.4rem; font-weight: 800; color: var(--violet-ink); line-height: 1; }
.big span { color: var(--ink-3); font-size: .9rem; }

/* the one thing to remember — the chart's "spine", above everything else */
.key {
  background: #F3EFFD; border-left: 5px solid var(--violet-ink); border-radius: var(--r-lg);
  padding: 18px 24px; margin-bottom: 18px;
}
.key h3 { color: var(--violet-ink); margin-bottom: .3em; font-size: 1.12rem; }
.key p { margin: 0; color: var(--ink); }
h4.sub { font-family: var(--head); font-size: 1rem; margin: 12px 0 6px; }
.grp-note { margin: -6px 0 14px; color: var(--ink-2); font-size: .95rem; }

/* shubh din: this child's own window for the rite */
.win {
  background: #F3EFFD; border-left: 5px solid var(--violet-ink); border-radius: var(--r-sm);
  padding: 14px 18px; margin-bottom: 20px;
}
.win p { margin: 0; color: var(--ink); }
.win .btn { margin-top: 12px; }
.din .hd .inwin {
  font-family: var(--head); font-weight: 600; font-size: .8rem; color: var(--violet-ink);
  background: #F3EFFD; border: 1.5px solid #D9CCFA; border-radius: 999px; padding: 2px 10px; margin-left: 8px;
}

/* ───────────────────────── plain words for a parent ───────────────────────── */

/* The hard words of this reading, explained once — closed until asked for. */
details.words {
  background: var(--paper); border: 2.5px solid var(--line); border-radius: var(--r-lg);
  padding: 0 22px; margin-bottom: 18px;
}
details.words summary {
  cursor: pointer; list-style: none; padding: 16px 0;
  font-family: var(--head); font-weight: 700; font-size: 1.02rem;
}
details.words summary::-webkit-details-marker { display: none; }
details.words summary::before { content: "▸ "; color: var(--violet-ink); }
details.words[open] summary::before { content: "▾ "; }
details.words[open] { padding-bottom: 18px; }
details.words > .small { margin-top: 0; }
details.words dl { margin: 10px 0 0; }
details.words dt { font-family: var(--head); font-weight: 700; margin-top: 10px; }
details.words dd { margin: 2px 0 0; color: var(--ink-2); font-size: .95rem; }
details.words h4 { margin: 18px 0 4px; }
details.words dl.gr { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
details.words dl.gr dt, details.words dl.gr dd { margin: 0; }

/* The shastra's method behind a section, one tap away. */
details.how { margin: 8px 0 0; }
details.how summary {
  cursor: pointer; list-style: none; color: var(--violet-ink);
  font-size: .9rem; font-weight: 600;
}
details.how summary::-webkit-details-marker { display: none; }
details.how summary::before { content: "▸ "; }
details.how[open] summary::before { content: "▾ "; }
details.how .small { margin-top: 4px; }

/* What the dots before each graha mean. */
.legend { margin: 0 0 10px; }
.legend-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .9rem; color: var(--ink-2); }
.legend-keys > span { display: inline-flex; align-items: center; }

/* Guidance, not a doctor — said on every page and in every PDF. */
.foot-health { margin: 14px 0 0; font-size: .82rem; opacity: .8; max-width: 70ch; }

/* ─────────── a tool not open yet (pages-only, see TOOLS_OPEN) ─────────── */

.soon-card { border-style: dashed; border-color: #B8D6FB; }
.soon-tag {
  display: inline-block; font-family: var(--head); font-weight: 700; font-size: .84rem;
  background: #DFEDFE; color: #1F5FA8; border: 1.5px solid #B8D6FB;
  padding: 3px 12px; border-radius: 999px; vertical-align: 3px;
}