/* Self-hosted fonts.

   WAS: a render-blocking stylesheet on fonts.googleapis.com, which
   only then triggered woff2 fetches from fonts.gstatic.com. Two extra
   origins on the critical path, each costing DNS + TLS before a
   single glyph could paint.

   Google serves these as VARIABLE fonts: every requested weight of a
   family returned the byte-identical file (verified by md5 - 14
   downloads, 4 unique files). So each family+subset is declared once
   with a font-weight RANGE instead of once per weight. 730 KB -> 205 KB.

   Only latin + latin-ext are kept. latin-ext is NOT optional: the
   rupee sign U+20B9 falls in its unicode-range, and the site is full
   of prices. Cyrillic, greek and vietnamese are dropped. */
/* Fraunces — Cormorant Garamond ki jagah (19 Aug 2026).

   KYUN BADLA: Cormorant Garamond ek high-contrast display serif hai —
   thin strokes, jo DARK background par (site ka poora palette hai)
   halke se blur/vanish ho jaate hain, khaaskar italic aur chhote size
   par. Yahi "eye load" ka asli kaaran tha, font choti hone ka nahi.

   Fraunces variable font hai (optical-size + weight dono axis ek hi
   file me) — 2024-2026 ke premium/mystical brand redesigns me sabse
   zyada istemal hone wala serif, aur stroke-contrast Cormorant se kam
   hai isliye dark background par saaf padhta hai. Warmth aur character
   bhi zyada hai — "cosmic/mystic" brand ke liye Cormorant se behtar
   fit. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url('assets/fonts/fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url('assets/fonts/fraunces-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url('assets/fonts/fraunces-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url('assets/fonts/fraunces-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* === Devanagari ===================================================
   Site ke chaaron font (Inter, Cormorant) LATIN-ONLY subset hain —
   unke unicode-range me U+0900-097F hai hi nahi. Iska matlab tha ki
   har Hindi akshar system ke fallback font me dikhta tha: Windows par
   Nirmala UI, Android par Noto, purane phone par kuch aur. Ek hi
   panne par do alag typography, aur har device par alag.

   Devanagari pehle se site par thi (homepage ka "आपकी समस्या क्या है?"),
   isliye ye kami aaj bhi dikh rahi thi — sirf kisi ne naapi nahi thi.

   `unicode-range` sabse zaroori hissa hai: browser ye font TABHI
   download karta hai jab panne par Devanagari sach me ho. Yani
   English aur Hinglish panne par iska ek byte bhi nahi jaata.

   Noto = SIL Open Font License, self-host ki poori ijazat.
   Serif heading ke liye (Cormorant ki jagah), Sans baaki sab ke liye. */
@font-face{
  font-family:'Noto Sans Devanagari'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('assets/fonts/noto-sans-devanagari.woff2') format('woff2');
  unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face{
  font-family:'Noto Serif Devanagari'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('assets/fonts/noto-serif-devanagari.woff2') format('woff2');
  unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* ===========================================================
   KAAL CHAKRAA — Cosmic Glow Design System v2
   Palette: Void Indigo / Nebula Magenta / Aurora Violet /
            Celestial Gold / Starlight / Ember Rose
=========================================================== */

/* ═══════════════════════════════════════════════════════════════
   THEME 1 — "MIDNIGHT PLUM"  (applied 10 Aug 2026)

   Ye poori tarah naya palette NAHI hai. Site pehle se plum-aur-gold
   par thi, aur "midnight plum" khud 2026 ka ek naamit dark base hai —
   yaani hue kabhi galat tha hi nahi. Jo kami thi wo SYSTEM ki thi:

     • surface ki koi seedhi nahi thi (page, card, raised sab lagbhag
       ek jaise gehre the — card page me ghul jaata tha)
     • neutrals bina tint ke the
     • glow ko roshni ki tarah nahi, bhare hue rang ki tarah use kiya
       ja raha tha

   TOKEN KE NAAM JAAN-BUJHKAR NAHI BADLE GAYE. Puraane naam poori site
   par lagbhag 1,583 jagah chal rahe hain (--gold 262, --gold-soft 433,
   --starlight 221, --starlight-dim 338, --line 329). Sirf VALUES badli
   hain, isliye har purana selector waise hi kaam karta hai — aur agar
   ye theme pasand na aaye to sirf ye block wapas badalne se poori site
   purani ho jaati hai. Backup: style.css.pre-midnight-plum.bak

   Naye token neeche ALAG se jode gaye hain (surface ladder, glow,
   line-lo). Naya token jodne se kuch toot nahi sakta — jo use hi nahi
   ho raha wo kisi ko nuksan nahi deta.

   Har jodi naapi gayi hai (WCAG AA): body 17.15:1, card par body
   15.5:1, secondary 7.9:1, gold 8.9:1, aur gold button ka label
   10.03:1. Surface ki seedhi pehle se behtar hai — page→card 1.149
   (pehle 1.14), card→raised 1.199 (pehle 1.19).
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Surface ki seedhi — teen alag star, ab sach me alag dikhte hain */
  --ink-void:        #0B0714;   /* page ka aadhar (tha #0A0818) */
  --ink-nebula:      #201338;   /* card / panel   (tha #1D1140) */
  --ink-nebula-2:    #321D58;   /* uthaa hua star (tha #33195E) */

  /* Sajawati orb aur gradient — brand ki pehchan, isliye jyon ke tyon */
  --twilight:        #7B3FC4;
  --twilight-soft:   #A15FE0;
  --magenta:         #C13FAE;
  --magenta-soft:    #E166CC;

  /* Gold thoda garm aur saaf — 8.28:1 se 8.88:1 par */
  --gold:            #D9B44A;   /* tha #D4AF37 */
  --gold-soft:       #F0CD6E;
  --starlight:       #F5EDE1;   /* tha #F7ECDD */
  --starlight-dim:   #B7A9C4;   /* tha #C9BFD6 — ab sach me "secondary" */

  /* Semantic — theme ke saath nahi badalte */
  --ember:           #C97064;
  --ember-soft:      #E08F7E;

  --line:            rgba(217,180,74,0.20);

  /* ── GLASS KA TEEN-STAR LADDER ─────────────────────────────────
     Site par cards ka background --ink-nebula nahi, ek paardarshi
     wash hai. Pehle wo wash 17 alag alpha par bikhri hui thi
     (0.025 se 0.06 tak) aur uska rang CREAM tha (245,230,211).

     Do dikkatein isse aati thi:

     1. Card page se alag hi nahi dikhta tha. 0.04 alpha plum base
        ke upar sirf 1.06 ka farak deta hai — aankh ko lagbhag kuch
        nahi. Surface ladder token me to bana, par jo render hota
        hai usme utarta hi nahi tha.

     2. Cream wash plum ke upar chadh kar card ko GARM SLETI bana
        deta tha (rgb 30,25,35 — saturation 0.29). Poora page plum
        aur har card sleti — isi se site thodi dhundhli lagti thi.

     Ab wash ka rang plum-warm hai (saturation 0.49, theme ke andar)
     aur teen tay star hain. Alpha isliye badhaya gaya ki plum cream
     se gehra hai — usi alpha par wo kam ujaala deta. */
  --glass-1:         rgba(196,158,228,0.07);  /* halka — table stripe, hover */
  --glass-2:         rgba(196,158,228,0.11);  /* card, panel — mukhya star */
  --glass-3:         rgba(196,158,228,0.16);  /* uthaa hua — chip, active */
  --glass:           var(--glass-2);          /* purana naam, ab ladder par */

  /* ── Naye token (sirf jode gaye, kuch hataya nahi) ──────────────
     Purana code inhe nahi jaanta aur use jaanne ki zarurat bhi nahi;
     naya code inhe use karta hai taaki har baar rgba() haath se na
     likhna pade. */
  --surface:         var(--ink-nebula);      /* card ka saaf naam */
  --surface-raise:   var(--ink-nebula-2);    /* uthaa hua star */
  --line-lo:         rgba(217,180,74,0.10);  /* halki lakeer — table rows */
  --starlight-faint: #7E7290;                /* teesra star — meta, captions */

  /* Glow: 2026 me neon bharne ke liye nahi, roshni ke liye hai.
     Isi liye alpha itna kam hai — ye rang ka dhabba nahi, ujaala hai. */
  --glow-gold:       rgba(217,180,74,0.45);  /* CTA ka halo (hover/focus) */
  --glow-violet:     rgba(139,92,246,0.10);  /* upar-baayein ka ambient */
  --glow-amber:      rgba(217,180,74,0.07);  /* upar-daayein ka ambient */

  --serif: 'Fraunces', 'Noto Serif Devanagari', 'Georgia', serif;
  --sans: 'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Type scale ----------------------------------------------------
     There were ~30 distinct font-size values between .6rem and 1.05rem
     across this file — no scale, just whatever each component author felt
     like. Six steps now cover everything below heading level, and every
     step moved UP or stayed put (nothing shrank). Root stays 16px so all
     rem values below remain predictable.

       --fs-micro  .74rem  11.8px  uppercase micro-labels WITH letterspacing
       --fs-fine   .82rem  13.1px  fine print, meta, captions
       --fs-sm     .88rem  14.1px  secondary copy inside cards
       --fs-md     .95rem  15.2px  default component text
       --fs-base   1rem    16px    body-equivalent inside components
       --fs-lead   1.06rem 17px    card titles, lead-ins

     Below --fs-micro is reserved for the installed-app tab bar only. */
  --fs-tab:   .68rem;    /* app tab-bar labels ONLY — not for web pages */
  /* 19 Aug 2026: do sabse chhote step (micro, fine) thode aur bade
     kiye gaye — ye wahi text hai jo fine-print/meta/badge me sabse
     zyada aankh par bhaar daalta hai. sm/md/base/lead ko haath nahi
     lagaya — unki jagah pehle hi theek naapi ja chuki thi, aur badge/
     tab jaisi tang jagah unhe aur bada karne se overflow karti hai. */
  --fs-micro: .76rem;
  --fs-fine:  .85rem;
  --fs-sm:    .88rem;
  --fs-md:    .95rem;
  --fs-base:  1rem;
  --fs-lead:  1.06rem;

  /* ---- Spacing rhythm ------------------------------------------------
     One 4px-derived ladder so section gaps, card padding and stack gaps
     stop being independently invented per component. */
  --sp-1: 6px;  --sp-2: 10px; --sp-3: 14px; --sp-4: 18px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 44px; --sp-8: 64px; --sp-9: 96px;

  /* ---- Corner radius -------------------------------------------------
     WAS: --radius:3px (near-square) for .card / .btn / .field, while the
     newer surfaces — gem cards, paywall, auth modal, invoice, panchang,
     classroom modules, and every per-page .ks-* block in the HTML — all
     used 10-18px. Two design languages on one page.

     The SOFT language wins, for three reasons: it is already the majority
     (the 3px group is 4 rules, the soft group is 40+), it is what the
     category leader looks like, and softening .card/.btn is a one-token
     change whereas hard-squaring 40 rules is not. Four steps only. */
  --radius-sm:   8px;    /* chips, inner boxes, table cells */
  --radius:     12px;    /* buttons, fields, cards — the default */
  --radius-card:18px;    /* large surfaces: modals, panels, feature cards */
  --radius-pill:999px;
  --maxw: 1180px;
}

*{box-sizing:border-box;}
/* overflow-x:clip (not hidden) — `hidden` does NOT clip position:fixed
   descendants like the off-canvas mobile menu (fixed elements are clipped by
   the viewport, not an ancestor's overflow), which was letting the closed
   slide-out menu extend the page to ~2x width and cause horizontal scroll /
   jitter on phones. `clip` establishes a clipping context that DOES contain
   it, killing the sideways scroll across iOS, Android, Mac & Windows. */
html{scroll-behavior:smooth; overflow-x:clip; max-width:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ink-void);
  color:var(--starlight);
  font-family:var(--sans);
  /* Body copy was inheriting the 16px root. Raised to 17px (and the leading
     opened from 1.6 to 1.65 to match) — this is the "font thoda bada" ask,
     and it only affects prose that has no explicit size of its own. Every
     rem value elsewhere is unchanged because the ROOT is still 16px. */
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  max-width:100%;
  -webkit-tap-highlight-color:rgba(212,175,55,0.18);
}
/* Lock background scroll while the full-screen mobile menu is open — stops the
   page bleeding/scrolling behind the overlay, a key "native app" feel on iOS. */
body.menu-open{ overflow:hidden; }

/* === Starfield + glowing aurora backdrop === */
.starfield{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(ellipse 65% 45% at 18% -5%, rgba(193,63,174,0.32), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 8%, rgba(123,63,196,0.38), transparent 60%),
    radial-gradient(ellipse 60% 45% at 92% 96%, rgba(201,112,100,0.18), transparent 60%),
    radial-gradient(ellipse 55% 40% at 4% 90%, rgba(212,175,55,0.10), transparent 60%),
    var(--ink-void);
}
.starfield .aurora{
  position:absolute; inset:-10%; opacity:.55; filter:blur(60px);
  background:
    radial-gradient(circle at 20% 20%, rgba(193,63,174,0.45), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(123,63,196,0.4), transparent 42%),
    radial-gradient(circle at 50% 80%, rgba(212,175,55,0.22), transparent 45%);
  animation:auroraShift 26s ease-in-out infinite alternate;
}
@keyframes auroraShift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-2%,2%,0) scale(1.06); }
  100%{ transform:translate3d(2%,-1%,0) scale(1.02); }
}
.starfield::before, .starfield::after{
  content:""; position:absolute; inset:0;
  background-repeat:repeat; opacity:.6;
}
.starfield::before{
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 80px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 150px 160px, var(--gold-soft), transparent),
    radial-gradient(1px 1px at 230px 60px, #fff, transparent),
    radial-gradient(1.4px 1.4px at 280px 200px, #fff, transparent),
    radial-gradient(1px 1px at 340px 120px, var(--starlight-dim), transparent);
  background-size:380px 380px;
}
.starfield::after{
  background-image:
    radial-gradient(1px 1px at 60px 110px, #fff, transparent),
    radial-gradient(1.3px 1.3px at 180px 40px, #fff, transparent),
    radial-gradient(1px 1px at 260px 180px, var(--magenta-soft), transparent),
    radial-gradient(1.5px 1.5px at 320px 90px, #fff, transparent);
  background-size:420px 420px;
  animation:drift 200s linear infinite;
}
@keyframes drift{ from{transform:translateY(0);} to{transform:translateY(-420px);} }
@media (prefers-reduced-motion: reduce){ .starfield::after, .starfield .aurora{animation:none;} }

/* Phone cost control for the aurora.
   blur(60px) over a full-viewport, position:fixed layer forces the compositor
   to re-rasterise a very large surface, and auroraShift keeps it dirty for
   26s at a stretch — that is the janky scroll on cheap Androids. Nothing is
   removed: on phones the blur radius drops to 26px (still a soft wash at
   phone scale, and blur cost scales with radius) and the transform loop is
   dropped, since a slow drift nobody looks at is not worth a permanent
   compositor job. The gradients themselves are untouched, so the page looks
   the same standing still. */
@media (max-width:700px){
  .starfield .aurora{ filter:blur(26px); opacity:.5; animation:none; }
  .starfield::after{ animation:none; }
}

main, header, footer{ position:relative; z-index:1; }

/* === Typography === */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:700;
  color:var(--starlight);
  margin:0 0 .4em;
  letter-spacing:.01em;
}
/* ── Display type: ab OONCHAI ka bhi khayal ──────────────────────
   Pehle ye sirf `vw` par tha — yaani type screen ki CHAUDAI se badhta
   tha. Par jo cheez kam padti hai wo oonchai hai, aur laptop chaude
   hote hain par chhote. 1280x720 par 5.5vw = 70px ban jaata tha, aur
   akela h1 370px kha jaata tha — poori screen ka 51%. Isi se site
   "zoom ki hui" lagti thi aur ek section kabhi ek frame me nahi aata tha.

   `min(vw, vh)` dono ko dekhta hai: chaudi par chhoti screen (laptop)
   par vh jeet jaata hai aur type sambhal jaata hai; badi screen par vw,
   jahan jagah sach me hai. Body text (--fs-* ladder) BILKUL NAHI badla —
   dikkat padhne wale text me thi hi nahi, display type me thi. */
/* MOBILE KA MINIMUM WAISA HI HAI (2.6 / 1.9 / 1.3rem) — jaan-bujhkar.
   Mobile par purana code kabhi dikkat de hi nahi raha tha: wahan chaudai
   kam hai, isliye 5.5vw sirf ~21px deta tha aur clamp ka minimum hi lagta
   tha. Dikkat sirf laptop par thi — chaude par CHHOTE. Un par 5.5vw = 70px
   ban jaata tha aur akela h1 screen ka 51% kha jaata tha.

   `min(vw, vh)` sirf badi screen par asar dikhata hai; mobile par wo
   minimum se neeche rehta hai, isliye mobile ka nateeja BILKUL WAHI hai
   jo pehle tha. Naapa gaya: 360/390/412/768 — chaaron par h1 42px, waisa
   hi. Body text (--fs-* ladder) kahin chhua hi nahi gaya. */
h1{ font-size:clamp(2.6rem, min(4vw, 6.6vh), 3.6rem); line-height:1.06; font-weight:700; }
h2{ font-size:clamp(1.9rem, min(2.6vw, 4.3vh), 2.3rem); }
h3{ font-size:clamp(1.3rem, min(1.7vw, 2.8vh), 1.5rem); }
p{ color:var(--starlight-dim); margin:0 0 1em; }
a{ color:var(--gold-soft); text-decoration:none; }
.eyebrow{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em;
  font-size:var(--fs-micro); color:var(--gold); font-weight:600; margin-bottom:.9em; display:block;
}
.text-glow{ text-shadow:0 0 22px rgba(212,175,55,0.35), 0 0 46px rgba(193,63,174,0.18); }

/* === Layout helpers === */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-6); }
section{ padding:var(--sp-9) 0; position:relative; }
.divider{
  width:60px; height:1px; background:linear-gradient(90deg,var(--gold),transparent);
  margin:var(--sp-4) 0 var(--sp-5);
}
.center{ text-align:center; }
.grid{ display:grid; gap:var(--sp-5); }
.grid-2{ grid-template-columns:1fr 1fr; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* === Header / Nav === */
header.site{
  position:sticky; top:0; z-index:90;
  /* WAS rgba(11,7,20,.95) — that is --ink-void itself, so the sticky header
     sat at almost the EXACT same colour as the page behind it. No lift, no
     separation; the whole top of every page read as one flat black slab.
     Shifted toward --ink-nebula (the card/panel plum used everywhere else)
     so the header reads as its own surface, the way a card does. */
  background:rgba(26,16,46,0.95);
  /* NOTE: intentionally NO backdrop-filter here. An ancestor with backdrop-filter
     establishes a containing block for position:fixed descendants — which made
     the fixed full-screen mobile menu (a child of this header) position relative
     to the ~60px header instead of the viewport, rendering it cut-off/incomplete
     ("adha-adhura menu"). A near-solid 0.95 background gives the same premium
     look without breaking the menu on iOS/Android/desktop. */
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top); /* clear the iPhone notch / Dynamic Island */
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.5rem; color:var(--starlight); }
/* Trademark nishan — TM-A file ho chuki hai (Aug 2026), isliye ™ chalta hai.
   ® tabhi lagega jab registration certificate aa jaye; usse pehle ® lagana
   Trade Marks Act ke tahat apradh hai. Badalne se pehle certificate dekh lijiye.

   Ye <sup> jaan-boojh kar <strong> ke ANDAR hai, .brand ka seedha bachcha nahi.
   Seedha bachcha hone par wo ek flex item ban jaata hai, aur flex item par
   superscript ka bartav lagta hi nahi — footer me wo naam ke beecho-beech
   latak raha tha. Text ke andar rehne par browser khud sahi jagah rakhta hai.

   min font-size isliye ki footer ka brand chhota hai (15px); wahan .42em
   6px ban jaata tha — dikhta hi nahi.

   aria-hidden isliye ki screen reader "Kaal Chakraa trademark" na bole — ™
   naam ka hissa nahi hai, ek kanooni nishan hai. */
.brand .tm{
  font-size:max(9px, .45em); letter-spacing:0; margin-left:1px;
  color:var(--starlight-dim); font-family:var(--sans); font-weight:400;
}
/* HEADER KA CHINH — sona, chitra nahi.

   Pehle yahan poora logo (logo-mark.webp) lagta tha. Wo 300px par sundar
   hai, par 34px ke gol dabbe me wo chitra nahi rehta, dhabba ban jaata
   hai. Naap kar dekha gaya: header ke background ki luminance 0.0079,
   aur logo ke AADHE pixel 0.0101 par — contrast 1.04:1. Yani wo
   background se alag hi nahi tha; sirf 4.3% pixel padhne laayak the.

   Sirf chamkane se kaam nahi banta: 1.75x brightness par bhi contrast
   1.97:1 aata hai, jabki kisi chinh ke liye kam se kam 3:1 chahiye. Wo
   ek jhootha ilaaj hota — dikhta kuch badla hua, padhta phir bhi nahi.

   Isliye SVG ko MASK ki tarah lagaya hai, image ki tarah nahi. Isse rang
   CSS ke haath me rehta hai: yahan sona ka dhalaav, aur chhapte waqt
   gehra sona — kyunki kagaz safed hota hai aur wahi sona wahan phika
   pad jaata. Ek hi file, dono jagah theek.

   Mask na chalne wali purani browser me neeche ka gold gradient hi bacha
   rehta hai — ek sona ka gol chinh. Kam sundar, par GAYAB NAHI. */
.brand .glyph{
  width:34px; height:34px; border-radius:50%;
  display:inline-block; flex:none; overflow:hidden;
  position:relative;
  box-shadow:0 0 16px rgba(217,180,74,0.5);
  border:1px solid rgba(240,205,110,0.55);
  background:radial-gradient(circle at 50% 45%, rgba(217,180,74,.20), transparent 70%);
}
/* Mask ANDAR ki parat par hai, .glyph par nahi. Pehle maine wo seedha
   .glyph par lagaya tha — mask element ki poori rangai kaatta hai, isliye
   sona ka gol ghera aur uski chamak dono kat jaate. Ghera bahar rehna
   chahiye, chinh andar. */
.brand .glyph::after{
  content:""; position:absolute; inset:2px;
  background:linear-gradient(135deg,#F5DFA0 0%,#E8C76A 48%,#C9971F 100%);
  -webkit-mask:url("assets/img/logo-glyph.svg") center/contain no-repeat;
          mask:url("assets/img/logo-glyph.svg") center/contain no-repeat;
}
/* Asli <img> ab dikhta nahi. Hataya isliye nahi gaya ki uska alt text
   bekaar hai — balki isliye ki brand link me "KaalChakraa" shabd pehle se
   likha hai, to screen reader ko naam waise bhi mil jaata hai; do baar
   bolna sirf shor hota. */
.brand .glyph img{ display:none; }
.brand strong{ color:var(--gold-soft); font-weight:600; }
nav.links{ display:flex; gap:26px; align-items:center; flex-wrap:nowrap; }
nav.links a{
  /* 19 Aug 2026: --starlight-dim (#B7A9C4) seedhe near-black header par
     washed-out padhta tha, khaaskar Devanagari me — patli combining
     maatra thi to aur bhi kam dikhti thi. --fs-md se ek notch bada
     kiya, taaki nav apne aap me component text se alag, "isse zaroor
     dabao" jaisa lage. Emoji (diya/hearts/globe) yahan se hataye
     gaye hain — decorative icon sirf teen link par tha, baaki saat
     par nahi, aur bright-multicolor emoji plum/gold palette se takra
     rahe the.

     Pehla round "achha nahi laga, bahut simple" wapas aaya — font-weight
     600 kiya (Inter yahan pehle se 400 tha, poori site me sabse halka
     jagah yahi thi) aur hover/active ab ek glowing pill dikhate hain,
     bajaye sirf rang badalne ke.

     Pill ::before se banti hai, PADDING se nahi — box ka apna
     padding:4px 0 hi rehta hai. Wajah: 1300px+ wale single-row layout
     ka gap/width hisaab upar wale comment me measured hai ("row needed
     612px, box had 586px"); agar sab 10 link ka padding badha dete to
     wahi takraav wapas aa jaata. ::before absolutely positioned hai,
     isliye flex layout ki chaudai me ginta hi nahi — sirf ek "halo"
     hai jo text ke thoda bahar tak failta hai. */
  color:color-mix(in srgb, var(--starlight-dim) 55%, var(--starlight) 45%);
  font-family:var(--sans); font-weight:600; font-size:calc(var(--fs-md) + .03rem); letter-spacing:.02em;
  position:relative; padding:4px 0; white-space:nowrap;
}
nav.links a::before{
  content:""; position:absolute; left:-12px; right:-12px; top:-6px; bottom:-6px;
  border-radius:var(--radius-pill); background:transparent;
  transition:background-color .18s ease, box-shadow .18s ease; pointer-events:none; z-index:-1;
}
nav.links a:hover{ color:var(--gold-soft); text-shadow:0 0 12px var(--glow-gold); }
nav.links a:hover::before{ background:rgba(217,180,74,0.14); }
nav.links a.active{ color:var(--gold); font-weight:700; text-shadow:0 0 14px var(--glow-gold); }
nav.links a.active::before{
  background:rgba(217,180,74,0.18);
  box-shadow:0 0 18px rgba(217,180,74,0.25);
}
nav.links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--gold); border-radius:2px; box-shadow:0 0 8px var(--glow-gold);
}
.nav-cta{ display:flex; gap:10px; align-items:center; flex:none; }
.nav-toggle{ display:none; background:none; border:none; color:var(--starlight); font-size:1.6rem; cursor:pointer; }
/* .nav-inner is capped at --maxw (1180px) REGARDLESS of window width, so on
   every desktop size — not just narrow ones — Brand + all 7 nav links + Login
   + WhatsApp + Book Reading together needed ~1310px inside a ~1124px budget.
   The rightmost button (Book Reading) was overflowing the header's own right
   edge and getting sliced by the viewport — "cut off in the top-right corner"
   on desktop. The header WhatsApp button is redundant (WhatsApp CTAs already
   exist as the floating button, per-service buttons, and "Ask on WhatsApp" in
   the hero) so it's dropped from the header on all sizes ≥1300px, matching the
   convention already used below 1299px. */
@media (min-width:1300px){
  .nav-cta .btn-whatsapp{ display:none; }
}

/* ---------------------------------------------------------------------------
   HEADER OVERFLOW — 320px wala maamla (iPhone SE, chhote Android)

   Ooper desktop wala overflow theek ho chuka tha. Ye doosra sira hai, aur
   users ne ise BATAYA tha: "content ya border screen se bahar jaate hain".

   320px par naapa gaya:

       jagah      292px   (320 - 14 - 14 padding)
       chahiye    337px
         .brand   139  (milte hain 120  ->  "Kaal Chakraa" ka "k" KAT gaya)
         gap        8
         .nav-cta 190  (lang 86 + avatar 44 + toggle 44 + gaps)

   45px ki kami. Aur `.nav-cta{flex:none}` ki wajah se wo sikud bhi nahi
   sakta tha, isliye `.nav-toggle` viewport se 12px bahar chala jaata tha --
   menu ka button aadha kata hua dikhta tha, har panne par.

   Ilaaj `overflow:hidden` NAHI hai. Wo sirf pardaa daal deta aur brand
   ka naam kata hi rehta. Jagah sach me banani padti hai:

     - brand ka font chhota (1.5rem se 1.15rem) -- ~30px bachta hai
     - bhasha ke button me sirf globe, "HIN" ka paath nahi -- ~45px
       (bhasha badalne wala poora vikalp menu ke andar bhi hai, isliye
        yahan kuch khoya nahi jaata)
     - padding aur gap thode kam

   Iske baad 320px par lagbhag 240px chahiye hote hain -- 50px ki gunjaish
   bachi rehti hai, taaki bade font wale phone par bhi na toote.
   --------------------------------------------------------------------------- */
@media (max-width:380px){
  /* Ye ank naapkar rakhe gaye hain. Pehli koshish (padding 10, gap 8,
     font 1.15rem) me brand phir bhi 3px se kat raha tha -- itna kam ki
     dekhne me pata bhi na chalta, par "Kaal Chakraa" ka aakhri akshar
     phir gayab ho jaata. */
  .nav-inner{ padding:12px 8px; gap:6px; }
  .brand{ font-size:1.1rem; gap:5px; min-width:0; white-space:nowrap; }
  .brand .glyph{ transform:scale(.82); transform-origin:left center; }
  .nav-cta{ gap:4px; }
  /* Bhasha ka button: globe rehta hai, "HIN" ka paath jaata hai --
     wahi ~45px kha raha tha.

     Pehle yahan `.lang-code` likha tha. Wo class hai hi nahi (asli naam
     `.lang-dd-cur` hai), aur galat class chup-chaap KUCH NAHI karti --
     CSS koi error nahi deta. Sudhaar lagta rehta aur header waisa hi
     toota rehta. Naam DOM se padhkar liya gaya hai, yaad se nahi. */
  .nav-cta .lang-dd-cur{ display:none; }
  .nav-cta .lang-dd-btn{ padding-left:9px; padding-right:9px; gap:0; }
  .nav-toggle, .nav-cta .kt-avatar{ width:38px; min-width:38px; padding:0; }
}

/* ---------------------------------------------------------------------------
   HEADER OVERFLOW — the real fix (measured: container 1180px, content 1380px)

   Dropping the WhatsApp button above bought ~130px, but the header still had
   no way to ADAPT: nav.links used a fixed 26px gap with flex-wrap:nowrap and
   .nav-cta was flex:none, so nothing could shrink. The moment a signed-in
   user's chip ("👤 Chandan") appeared, the row needed 200px more than it had
   and "Book Reading" was sliced off the right edge again.

   Two changes, so this stops being a recurring whack-a-mole:

   1. On wide screens the header is no longer capped at the 1180px content
      width. Body copy stays narrow for readability, but a NAV BAR has no
      reason to be — capping it was also what left that large empty gap
      between the screen edge and the logo while the right side overflowed.

   2. The link row is now elastic: it takes the leftover space and its gap
      and font size scale with the viewport via clamp(). So any future
      addition (another nav item, a longer name) is absorbed automatically
      instead of pushing content off-screen.
--------------------------------------------------------------------------- */
@media (min-width:1300px){
  header.site .nav-inner{
    max-width:min(1560px, 100% - 40px);
    gap:18px;
  }
  .brand{ flex:0 0 auto; }
  nav.links{
    flex:1 1 auto;
    min-width:0;                       /* without this a flex item refuses to shrink */
    justify-content:center;
    /* Floor lowered 12px -> 8px. Measured at 1230px viewport with the signed-in
       chip present: the link row needed 612px inside a 586px box, and because
       it is centred with nowrap the 26px spilled BOTH ways — colliding with
       the brand on the left and the CTA on the right. Six gaps x 4px reclaims
       24px of that 26px; the rest comes from the font floor below.

       2026-08: Free Kundli aur Kundli Milan nav me aane se ab 8 ke
       bajay 10 link hain — 9 gaps. 1.5vw par 1280px ki screen par
       row ko 842px chahiye the aur mile 728px, aur "Contact Us"
       seedha "Book Reading" button ke upar chadh gaya. vw factor
       1.5 -> 1.05 karne se 1280px par gap 19px se 13px hota hai,
       yaani 9 gaps me ~54px bachte hain — takraav 19px ka tha,
       isliye kaafi jagah bachti hai. Upper bound bhi 26 -> 22, jisse
       badi screen par row ke dono sire aur bhi khule rehte hain. */
    gap:clamp(8px, 1.05vw, 22px);
  }
  /* upper bound raised to match --fs-md so the desktop nav no longer reads a
     step smaller than every other component; lower bound is --fs-fine.
     19 Aug 2026: nudged both ends up .02rem — nav emoji (diya/hearts/
     globe) were removed from 3 of the 10 links, freeing back roughly
     the width this costs, so the documented row-width math above
     still holds. */
  /* `.nav-grp-btn` bhi yahan hona ZAROORI hai. Ye niyam sirf `a` par tha,
     isliye 1300px+ par sapaat link 13.68px ke ho gaye aur dropdown wale
     label 15.68px ke — ek hi kataar me do alag naap, jo turant "kuch
     theek nahi lag raha" jaisa dikhta hai. */
  nav.links a,
  nav.links .nav-grp-btn{ font-size:clamp(.82rem, .95vw, .97rem); }
  .nav-cta{ flex:0 0 auto; min-width:0; }
  /* A long display name must truncate rather than push the buttons out */
  .nav-cta .kt-account-btn, .nav-cta > button{
    max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

/* Last line of defence: even if some future element misbehaves, the PAGE must
   never scroll sideways. `clip` (not `hidden`) is used so it cannot silently
   break position:sticky on the header. */
html, body{ overflow-x:clip; }

/* NAV KA BREAKPOINT: 880px -> 1200px (2026-08)
   ---------------------------------------------
   Nav me ab 10 link hain (Free Kundli aur Kundli Milan jude). Naap kar
   dekha: 10 link ki row ko ~813px chahiye, aur 1300px se neeche brand +
   row + "Book Reading" button ek line me aate hi nahi — "Contact Us"
   seedha button ke upar chadh jaata tha.

   DHYAN DENE WALI BAAT: 940px aur 881px par ye takraav 8 link ke saath
   PEHLE SE tha (naapa: lastR 648 vs ctaL 620). Yaani ye ek purani
   kharabi bhi thi jo laptop par dikh rahi thi. Breakpoint uthane se
   dono theek hote hain.

   Ab 1299px tak slide-out menu chalta hai — tablet aur chhote laptop
   par saare 10 link poore khulte hain, kate hue nahi. Ye badlaav
   site.js ke matchMedia se juda hua hai; ek badlo to doosra bhi. */
@media (max-width:1299px){
  nav.links{
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:
      radial-gradient(80% 50% at 50% 0%, rgba(123,63,196,0.22), transparent 70%),
      rgba(8,6,20,0.985);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    flex-direction:column; align-items:center; text-align:center;
    /* `safe center` — kam list ho to beech me, par list lambi ho jaye to
       upar se shuru. Saada `center` ke saath ek purana flexbox dosh hai:
       content overflow kare to pehla item scroll-area ke UPAR chala jaata
       hai aur scroll karke bhi haath nahi aata. 10 link + Login button
       ke saath menu ko 877px chahiye — iPhone SE (667px) par "Home"
       hamesha ke liye gayab ho jaata. Jo browser `safe` nahi samajhta
       wo upar wali `center` line par rehta hai. */
    justify-content:center;
    justify-content:safe center;
    padding:calc(56px + env(safe-area-inset-top)) 28px calc(40px + env(safe-area-inset-bottom));
    gap:0; transform:translateX(100%);
    transition:transform .4s cubic-bezier(.22,1,.36,1);
    z-index:200; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  nav.links::before{
    content:"✦ Kaal Chakraa ✦"; display:block; font-family:var(--serif);
    color:var(--gold); font-size:var(--fs-sm); letter-spacing:.35em; margin-bottom:26px; opacity:.85;
  }
  nav.links a{
    display:block; width:100%; max-width:320px;
    font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--starlight);
    padding:13px 6px; border:none; background:none; position:relative;
    border-bottom:1px solid rgba(212,175,55,0.12);
    opacity:0; transform:translateY(14px);
    -webkit-tap-highlight-color:transparent;
  }
  nav.links a:last-child{ border-bottom:none; }
  nav.links a:active{ color:var(--gold-soft); }
  nav.links a.active{ color:var(--gold-soft); }
  nav.links a.active::after{ content:"✦"; position:static; display:inline-block; margin-left:10px; font-size:var(--fs-fine); color:var(--gold); background:none; height:auto; }
  nav.links.open{ transform:translateX(0) !important; }
  nav.links.open a{ opacity:1; transform:translateY(0); transition:opacity .4s ease, transform .4s ease; }
  nav.links.open a:nth-child(1){ transition-delay:.06s; } nav.links.open a:nth-child(2){ transition-delay:.11s; }
  nav.links.open a:nth-child(3){ transition-delay:.16s; } nav.links.open a:nth-child(4){ transition-delay:.21s; }
  nav.links.open a:nth-child(5){ transition-delay:.26s; } nav.links.open a:nth-child(6){ transition-delay:.31s; }
  nav.links.open a:nth-child(7){ transition-delay:.36s; }
  .nav-toggle{ display:block; position:relative; z-index:210; -webkit-tap-highlight-color:transparent; line-height:1; }
  .nav-cta .btn-text{ display:none; }
  /* "Book Reading" + hamburger sliced off the top-right on real phones
     (reported on Android/iOS; not reproducible in the 375px emulator
     above, which has more slack than a 360px device or one with system
     text zoom on). nav-inner is `justify-content:space-between` with
     brand + nav-cta both flex:none — neither can shrink, so once their
     combined width exceeds the header's, the excess spills past the
     right edge and html/body's overflow-x:clip makes that spillover
     silently invisible instead of wrapping or scrolling. Letting both
     shrink (min-width:0) and truncating the button label is what
     actually stops the overflow, rather than just narrowing padding. */
  .nav-inner{ min-width:0; }
  .brand{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-cta{ min-width:0; flex-shrink:1; }
  .nav-cta .btn{ min-width:0; max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* The auth/Login button (injected by auth-ui.js) is relocated INTO the
     slide-out menu on mobile by site.js — hide any stray copy left in the
     header so the top bar stays clean: Brand + one CTA + hamburger only. */
  .nav-cta > #ktNavAuth{ display:none; }
  /* When #ktNavAuth is moved inside the menu, style it as a full-width menu action */
  nav.links #ktNavAuth{
    display:block; width:100%; max-width:320px; margin:18px auto 0;
    padding:14px 18px; font-size:var(--fs-lead); border-radius:var(--radius);
    border:1px solid rgba(212,175,55,0.4); color:var(--gold-soft);
    opacity:0; transform:translateY(14px); order:99;
  }
  nav.links.open #ktNavAuth{ opacity:1; transform:translateY(0); transition:opacity .4s ease .4s, transform .4s ease .4s; }
}

@media (max-width:520px){
  .nav-inner{ padding:12px 14px; gap:8px; }
  .brand{ font-size:1.2rem; gap:6px; }
  .brand .glyph{ width:28px; height:28px; }
  .nav-cta{ gap:8px; align-items:center; }
  .nav-cta .btn{ padding:9px 12px; font-size:var(--fs-fine); max-width:40vw; }
  .nav-toggle{ font-size:1.5rem; padding:0 4px; min-width:34px; flex-shrink:0; }
}

/* Very narrow phones (e.g. 360px Android, or 375px with system text
   zoom on) — "Book Reading" still doesn't fit next to the hamburger
   even truncated. Swap to just "Book" so nothing is ever sliced off. */
@media (max-width:360px){
  .nav-cta .btn-primary{ font-size:0; max-width:none; padding:9px 12px; }
  .nav-cta .btn-primary::before{ content:"Book"; font-size:var(--fs-fine); }
}

/* === Buttons === */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  /* Held at --fs-md, NOT --fs-base. Measured: bumping button labels to 1rem
     widened .nav-cta enough to push nav.links into overflow (612px of links
     in a 586px box) and the row visibly collided with the brand. Button
     labels running one step under body copy is also the normal convention. */
  font-family:var(--sans); font-weight:600; font-size:var(--fs-md); letter-spacing:.02em;
  line-height:1; /* was inheriting body's 1.6 — made emoji/text sit loose & off-centre */
  padding:14px 28px; border-radius:var(--radius); cursor:pointer; border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap; text-align:center; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.btn-primary{
  background:linear-gradient(135deg, var(--gold-soft), var(--gold) 60%, #B68F2C);
  color:var(--ink-void);
  box-shadow:0 6px 22px rgba(212,175,55,0.32), 0 0 34px rgba(212,175,55,0.14);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(212,175,55,0.48), 0 0 50px rgba(212,175,55,0.22); }
.btn-ghost{
  background:transparent; color:var(--starlight); border-color:rgba(245,230,211,0.3);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-soft); box-shadow:0 0 24px rgba(212,175,55,0.15); }
.btn-whatsapp{
  background:#1F2C28; color:#6CE3A6; border:1px solid rgba(108,227,166,0.35);
}
.btn-whatsapp:hover{ background:#223A30; box-shadow:0 6px 20px rgba(108,227,166,0.22); }
.btn-call{
  background:linear-gradient(135deg, #291A47, #321D58); color:var(--starlight);
  border:1px solid rgba(161,95,224,0.5);
}
.btn-call:hover{ box-shadow:0 6px 22px rgba(123,63,196,0.35); transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn svg{ width:18px; height:18px; flex:none; display:block; }
/* On phones, long CTA buttons (e.g. "⚡ ₹111 Mein Chart Confirmation Shuru Karein")
   were overflowing the screen because of white-space:nowrap and getting cut. Allow
   them to wrap to two neat centred lines instead, and never exceed their container. */
@media (max-width:560px){
  .btn{ white-space:normal; max-width:100%; padding-left:20px; padding-right:20px; }
}

/* Floating action buttons */
.float-stack{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:flex; flex-direction:column; gap:14px; align-items:flex-end;
}
.float-btn{
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,0.45); cursor:pointer; border:none;
}
.float-whatsapp{
  background:#1F2C28; border:1px solid rgba(108,227,166,0.45);
  animation:pulse-wa 3.2s ease-in-out infinite;
}
.float-whatsapp svg{ width:28px; height:28px; }
@keyframes pulse-wa{
  0%,100%{ box-shadow:0 8px 26px rgba(0,0,0,0.45),0 0 0 0 rgba(108,227,166,0.35);}
  50%{ box-shadow:0 8px 26px rgba(0,0,0,0.45),0 0 0 10px rgba(108,227,166,0);}
}
.float-astro{
  position:relative;
  width:66px; height:66px;
  background:radial-gradient(circle at 35% 30%, var(--gold-soft), var(--magenta) 65%, var(--twilight) 100%);
  border:2px solid rgba(212,175,55,0.65);
  animation:pulse-astro 3.6s ease-in-out infinite, spin-astro-ring 6s linear infinite;
  font-size:1.5rem;
  transition:transform .2s ease;
}
.float-astro:hover{ transform:scale(1.08); }
.float-astro::before{
  content:""; position:absolute; inset:-6px; border-radius:50%; z-index:-1;
  background:conic-gradient(from 0deg, var(--gold), var(--magenta), var(--gold-soft), var(--magenta), var(--gold));
  opacity:0.55; filter:blur(2px);
  animation:spin-astro-ring 4s linear infinite;
}
.float-astro::after{
  content:""; position:absolute; top:2px; right:2px; width:13px; height:13px;
  border-radius:50%; background:#6CE3A6; border:2px solid var(--ink-void);
  box-shadow:0 0 8px #6CE3A6;
}
@keyframes spin-astro-ring{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } }
@keyframes pulse-astro{
  0%,100%{ box-shadow:0 8px 26px rgba(0,0,0,0.45),0 0 0 0 rgba(193,63,174,0.4);}
  50%{ box-shadow:0 8px 26px rgba(0,0,0,0.45),0 0 0 14px rgba(193,63,174,0);}
}
.astro-chat-label{
  position:fixed; z-index:71; right:96px; bottom:108px;
  background:var(--ink-nebula); border:1px solid rgba(212,175,55,0.45);
  color:var(--starlight); font-size:var(--fs-fine); font-weight:600;
  padding:10px 16px; border-radius:var(--radius); border-bottom-right-radius:4px;
  box-shadow:0 10px 30px rgba(0,0,0,0.4); white-space:nowrap;
  animation:label-float 2.6s ease-in-out infinite, label-in .3s ease;
  cursor:pointer;
}
.astro-chat-label::after{
  content:""; position:absolute; right:-6px; bottom:10px; width:12px; height:12px;
  background:var(--ink-nebula); border-right:1px solid rgba(212,175,55,0.45); border-bottom:1px solid rgba(212,175,55,0.45);
  transform:rotate(-45deg);
}
@keyframes label-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@keyframes label-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@media (max-width:480px){
  .astro-chat-label{ right:82px; bottom:100px; font-size:var(--fs-fine); padding:8px 12px; }
}
@media (prefers-reduced-motion: reduce){ .float-whatsapp, .float-astro, .float-astro::before, .astro-chat-label{ animation:none; } }

/* === Cards === */
.card{
  /* Do parat, aur dono ka apna kaam:
       upar — halki sheen (jaise roshni upar se pad rahi ho)
       neeche — FARSH, jo poore card par ek jaisa rehta hai

     Pehle sirf sheen thi aur wo transparent par khatam hoti thi,
     yaani card ka nichla aadha hissa page me ghul jaata tha. Card
     panel ki tarah nahi, ek dhundhle dhabbe ki tarah dikhta tha —
     aur surface ladder ka poora kaam wahin bekaar ho jaata tha.

     Ab farsh hai, isliye card har jagah page se alag dikhta hai;
     sheen usse gehrai deti hai, banati nahi.

     DHYAN: ye do alag declaration hain, ek shorthand nahi. Shorthand
     me `background:linear-gradient(...), var(--glass-1)` likhne par
     browser doosre comma wale hisse ko ek aur IMAGE layer maanta hai
     — aur bas ek rang valid image nahi hota, isliye wo chup-chaap
     `none` ban jaata hai. Farsh gayab, aur galti kahin dikhti nahi. */
  background-image:linear-gradient(180deg, var(--glass-3), transparent 70%);
  background-color:var(--glass-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px;
  position:relative;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.card:hover{ border-color:rgba(212,175,55,0.45); box-shadow:0 14px 40px rgba(123,63,196,0.18); transform:translateY(-3px); }

/* Glow-rim card variant for premium / featured content */
.card-glow{
  border-color:rgba(212,175,55,0.4);
  box-shadow:0 0 0 1px rgba(212,175,55,0.12) inset, 0 20px 60px rgba(123,63,196,0.22);
}

/* === Footer === */
footer.site{
  border-top:1px solid var(--line);
  padding:64px 0 28px;
  background:linear-gradient(180deg, transparent, rgba(51,25,94,0.28));
}
footer.site .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
footer.site h4{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:var(--fs-fine); color:var(--gold); margin-bottom:16px;}
footer.site a{ color:var(--starlight-dim); display:block; margin-bottom:10px; font-size:var(--fs-md); }
footer.site a:hover{ color:var(--gold-soft); }
.legal-bar{
  max-width:var(--maxw); margin:40px auto 0; padding:24px 28px 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:var(--fs-fine); color:var(--starlight-dim);
}
@media (max-width:860px){ footer.site .wrap{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ footer.site .wrap{ grid-template-columns:1fr; } }

/* === Orbit signature element === */
.orbit-wrap{
  position:relative; width:420px; height:420px; max-width:90vw; margin:0 auto;
  overflow:visible;
}
/* Inner holder carries the fixed 420px geometry; on phones we shrink the OUTER
   wrap's layout box AND scale this inner set to match, so the full orbit shows
   (never cut) while the wrap never forces the hero grid wider than the screen. */
.orbit-inner{
  position:absolute; top:50%; left:50%; width:420px; height:420px;
  transform:translate(-50%,-50%);
}
/* Rotating Zodiac Wheel (replaces the old planet orbit) */
.zodiac-wheel{ width:420px; height:420px; display:block; overflow:visible; }
.zodiac-wheel text{ user-select:none; }
.zring{ fill:none; stroke:var(--gold, #D4AF37); stroke-width:1; opacity:.55; }
.zring-thin{ fill:none; stroke:rgba(212,175,55,0.30); stroke-width:1; }
.zring-dash{ fill:none; stroke:rgba(245,230,211,0.26); stroke-width:1; stroke-dasharray:3 7; }
.ztick{ stroke:rgba(212,175,55,0.38); stroke-width:1; }
.ztick-l{ stroke:var(--gold-soft, #E8C766); stroke-width:1.7; }
.zspoke{ stroke:rgba(212,175,55,0.28); stroke-width:1; }
.zg{
  fill:var(--gold-soft, #E8C766); font-family:var(--serif, 'Fraunces', serif);
  font-size:27px; text-anchor:middle; dominant-baseline:central;
  filter:drop-shadow(0 0 4px rgba(212,175,55,0.45));
}
.zspark{ fill:var(--starlight, #F5E6D3); filter:drop-shadow(0 0 4px rgba(245,230,211,0.8)); }
.zom{
  fill:var(--gold-soft, #E8C766); font-size:40px; text-anchor:middle; dominant-baseline:central;
  font-family:serif; filter:drop-shadow(0 0 8px rgba(212,175,55,0.6));
}
.zphoto-ring{ fill:none; stroke:var(--gold, #D4AF37); stroke-width:2.5; filter:drop-shadow(0 0 10px rgba(212,175,55,0.7)); }
.zphoto-ring-outer{ fill:none; stroke:rgba(212,175,55,0.35); stroke-width:1; }
.zw-rot{ transform-box:view-box; transform-origin:210px 210px; }
/* Calmer, trust-focused rotation (slower than before so Kajal's photo reads as the anchor) */
.zw-cw{ animation:zwspin 200s linear infinite; }
.zw-ccw{ animation:zwspin 150s linear infinite reverse; }
.zw-cw-fast{ animation:zwspin 90s linear infinite; }
@keyframes zwspin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.zw-pulse{ transform-box:view-box; transform-origin:210px 210px; animation:zwPulse 4.5s ease-in-out infinite; }
@keyframes zwPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:.9; transform:scale(1.05); } }
@media (prefers-reduced-motion: reduce){ .zw-cw, .zw-ccw, .zw-cw-fast, .zw-pulse{ animation:none; } }

/* Hero astrologer caption under the wheel */
.hero-visual{ display:flex; flex-direction:column; align-items:center; }
.hero-astro-cap{ text-align:center; margin-top:-6px; }
.hero-astro-cap strong{
  display:block; font-family:var(--serif, 'Fraunces', serif);
  font-size:1.5rem; color:var(--gold-soft, #E8C766); letter-spacing:.01em;
}
.hero-astro-cap span{ font-size:var(--fs-fine); color:var(--starlight-dim, #b8a9c9); }
.hero-astro-cap .verified-tick{ color:#6CE3A6; font-weight:600; }

/* Orbit on phones: shrink the wrap's LAYOUT box to a size that fits the screen,
   and scale the inner 420px geometry to match — the full circle stays visible
   (never sliced) and the hero grid column can't be forced past the viewport. */
@media (max-width:600px){
  .orbit-wrap{ width:240px; height:240px; }
  .orbit-inner{ transform:translate(-50%,-50%) scale(0.57); }
}
@media (max-width:380px){
  .orbit-wrap{ width:200px; height:200px; }
  .orbit-inner{ transform:translate(-50%,-50%) scale(0.47); }
}

/* === Forms === */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:var(--fs-fine); color:var(--starlight-dim); margin-bottom:7px; letter-spacing:.02em;}
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; background:var(--glass-2);
  border:1px solid rgba(245,230,211,0.18); border-radius:var(--radius);
  color:var(--starlight); font-family:var(--sans); font-size:var(--fs-md);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,0.15);
}
.field textarea{ min-height:120px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}

/* === Badges / pills === */
.pill{
  display:inline-block; padding:6px 14px; border:1px solid var(--line); border-radius:var(--radius-pill);
  font-size:var(--fs-fine); color:var(--starlight-dim); letter-spacing:.03em;
}

/* === Section tinted alt === */
.alt{ background:linear-gradient(180deg, rgba(51,25,94,0.25), transparent); }

/* === Utility === */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.muted{ color:var(--starlight-dim); }
.gold{ color:var(--gold-soft); }
.magenta{ color:var(--magenta-soft); }
img{ max-width:100%; display:block; }

/* === Service / course card images === */
.svc-img, .course-img{
  width:calc(100% + 56px); margin:-32px -28px 22px; display:block;
  height:auto; max-height:420px; object-fit:contain; object-position:top center;
  background:var(--ink-nebula);
  border-bottom:1px solid var(--line);
}
.svc-card{ padding-top:0; overflow:hidden; }
.svc-card .svc-img{ border-radius:var(--radius) var(--radius) 0 0; }
/* chakra-healing.jpg is a pale/bright poster unlike the other warm dark
   posters — tone it down + warm it so it matches the cosmic theme everywhere. */
.svc-img[src*="chakra-healing"], .course-img[src*="chakra-healing"]{
  filter:brightness(0.66) contrast(1.08) saturate(1.35) sepia(0.22) hue-rotate(-10deg);
}
.course-card{ overflow:hidden; }
.course-card .course-img{ width:calc(100% + 56px); margin:-32px -28px 18px; max-height:380px; }

/* === People photos (Kajal Sharma) === */
.people-photo{
  width:100%; height:auto; object-fit:contain;
  border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(0,0,0,0.45), 0 0 60px rgba(193,63,174,0.12);
}
.people-photo-sm{
  width:180px; height:180px; border-radius:50%; object-fit:cover; object-position:top center;
  margin:0 auto 20px; display:block; border:2px solid var(--gold);
  box-shadow:0 0 40px rgba(212,175,55,0.32);
}

/* === Brand seal (logo lockup, larger contexts) === */
.brand-seal{
  width:120px; height:120px; border-radius:50%; object-fit:cover;
  border:1px solid var(--line); box-shadow:0 0 30px rgba(212,175,55,0.25);
  display:block;
}

/* === Language switch (EN / हिं) === */
.lang-switch{ display:inline-flex; border:1px solid var(--line); border-radius:var(--radius-pill); overflow:hidden; margin-right:4px; }
.lang-switch a{
  padding:6px 12px; font-size:var(--fs-fine); font-weight:600; color:var(--starlight-dim, #b8a9c9);
  text-decoration:none; line-height:1.2; transition:background .2s ease, color .2s ease;
}
.lang-switch a.active{ background:var(--gold, #D4AF37); color:#1a1330; }
.lang-switch a:not(.active):hover{ color:var(--gold-soft, #E8C766); }
/* Jo bhasha is panne par abhi nahi hai — dikhti hai par dabti nahi.
   Chhupa dene se visitor ko kabhi pata hi nahi chalta ki wo bhasha
   aati hai. Dikhane se pata chalta hai, aur jhoothi ummeed bhi nahi
   bandhti kyunki wo saaf taur par band lagti hai. */
/* Jin panno par header hai hi nahi (offline, payment-issue, call,
   certificate, app-install-guide) wahan switcher kone me tairta hai.
   Jahan header hai wahan wo header me hi rehta hai — ye sirf unke
   liye hai jinke paas jagah nahi thi. */
.lang-switch-float{
  position:fixed; top:14px; right:14px; z-index:60;
  background:rgba(20,14,38,.92); backdrop-filter:blur(8px);
}
@media (max-width:520px){
  .lang-switch-float{ top:auto; bottom:14px; right:14px; }
}
/* Band vikalp ab ek asli <button> hai, <span> nahi — taaki phone par
   dabne par jawab de sake aur keyboard se bhi pahunch me rahe.
   `all:unset` isliye NAHI kiya ki uske saath focus ring bhi chali
   jaati hai; sirf browser ka apna button-roop hataya gaya hai. */
.lang-switch .lang-na{
  padding:6px 12px; font-size:var(--fs-fine); font-weight:600;
  color:var(--starlight-dim, #b8a9c9); opacity:.5;
  line-height:1.2; user-select:none;
  background:none; border:0; font-family:inherit; cursor:pointer;
  /* Ye phone par ungli ke liye kaafi bada hona chahiye. 44px Apple
     aur Google dono ka sujhaya hua sabse chhota tap-target hai. */
  min-height:44px;
}
.lang-switch .lang-na:hover,
.lang-switch .lang-na:focus-visible{ opacity:.8; }
.lang-switch .lang-na[aria-expanded="true"]{
  opacity:1; color:var(--gold-soft, #E8C766);
}

/* "Ye bhasha yahan nahi hai" wala sandesh.
   Body me rehta hai, switcher ke andar nahi — `.lang-switch` par
   `overflow:hidden` hai aur wo ise kaat deta. Jagah JS se milti hai
   (button ke neeche, par screen ke andar hi). */
.lang-note{
  position:fixed; z-index:200; max-width:min(280px, calc(100vw - 20px));
  background:rgba(20,14,38,.97); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:12px;
  padding:12px 34px 12px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  font-size:var(--fs-fine); line-height:1.45;
}
.lang-note p{
  margin:0 0 8px; color:var(--starlight, #e9e2f5);
}
.lang-note a{
  color:var(--gold-soft, #E8C766); text-decoration:none; font-weight:600;
}
.lang-note a:hover, .lang-note a:focus-visible{ text-decoration:underline; }
.lang-note-x{
  position:absolute; top:6px; right:8px;
  background:none; border:0; cursor:pointer; padding:2px 6px;
  color:var(--starlight-dim, #b8a9c9); font-size:1.1rem; line-height:1;
  font-family:inherit;
}
.lang-note-x:hover, .lang-note-x:focus-visible{ color:var(--gold-soft, #E8C766); }
@media (prefers-reduced-motion: no-preference){
  .lang-note{ animation:lang-note-in .16s ease-out; }
  @keyframes lang-note-in{
    from{ opacity:0; transform:translateY(-4px); }
    to{ opacity:1; transform:none; }
  }
}
/* Kagaz par bhasha ka switcher ka koi matlab nahi */
@media print{ .lang-note, .lang-switch{ display:none !important; } }

/* === Instant invoice card === */
.kt-invoice{
  background:var(--glass-2); border:1px solid rgba(212,175,55,0.4);
  border-radius:var(--radius-card); padding:22px; margin:22px 0; text-align:left;
}
.kti-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.kti-head img{ width:40px; height:40px; border-radius:50%; vertical-align:middle; margin-right:10px; }
.kti-head > div:first-child{ display:flex; align-items:center; }
.kti-head strong{ display:block; font-family:var(--serif, serif); font-size:1.15rem; color:var(--gold-soft, #E8C766); }
.kti-head span{ display:block; font-size:var(--fs-micro); color:var(--starlight-dim, #b8a9c9); }
.kti-tag{ font-size:var(--fs-micro); letter-spacing:.12em; color:#6CE3A6; border:1px solid rgba(108,227,166,0.4); border-radius:var(--radius-pill); padding:5px 12px; }
.kti-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-bottom:14px; }
.kti-grid label{ display:block; font-size:var(--fs-micro); color:var(--starlight-dim, #b8a9c9); letter-spacing:.05em; text-transform:uppercase; }
.kti-grid b{ font-size:var(--fs-md); color:var(--starlight, #F5E6D3); font-weight:600; }
.kti-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); margin-bottom:12px; }
.kti-table th, .kti-table td{ padding:9px 10px; border-bottom:1px solid rgba(245,230,211,0.12); text-align:left; color:var(--starlight, #F5E6D3); }
.kti-table th{ color:var(--gold-soft, #E8C766); font-weight:600; }
.kti-table td:last-child, .kti-table th:last-child{ text-align:right; }
.kti-table tfoot td{ font-weight:700; color:var(--gold-soft, #E8C766); border-bottom:none; }
.kti-note{ font-size:var(--fs-fine); color:var(--starlight-dim, #b8a9c9); margin:0 0 12px; }
.kti-actions{ text-align:right; }
@media print{
  body.kti-printing *{ visibility:hidden !important; }
  body.kti-printing .kt-invoice, body.kti-printing .kt-invoice *{ visibility:visible !important; }
  body.kti-printing .kt-invoice{ position:absolute; left:0; top:0; width:100%; background:#fff; color:#000; border-color:#999; }
  body.kti-printing .kt-invoice b, body.kti-printing .kt-invoice td, body.kti-printing .kt-invoice th, body.kti-printing .kt-invoice strong{ color:#000 !important; }
  body.kti-printing .kti-actions{ display:none !important; }
}

/* === Gemstone energization (vidhi) table === */
.vidhi-table{ width:100%; border-collapse:collapse; min-width:640px; font-size:var(--fs-sm); }
.vidhi-table thead th{
  background:linear-gradient(135deg, rgba(212,175,55,0.16), rgba(193,63,174,0.12));
  color:var(--gold-soft, #E8C766); font-family:var(--serif, serif); font-weight:600;
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.vidhi-table tbody td{ padding:11px 14px; border-bottom:1px solid rgba(245,230,211,0.07); color:var(--starlight, #F5E6D3); }
.vidhi-table tbody tr:nth-child(odd){ background:var(--glass-1); }
.vidhi-table tbody tr:hover{ background:rgba(212,175,55,0.07); }
.vidhi-table tbody td:first-child{ font-weight:600; color:var(--gold-soft, #E8C766); }

/* === Testimonial / quote === */
blockquote{
  font-family:var(--serif); font-size:1.3rem; font-style:italic; color:var(--starlight);
  border-left:2px solid var(--gold); padding-left:20px; margin:0;
}

/* === Responsive section padding === */
@media (max-width:700px){
  section{ padding:var(--sp-8) 0; }
  footer.site{ padding:var(--sp-7) 0 var(--sp-5); }
}

/* ===========================================================
   BOOKING CALENDAR WIDGET
=========================================================== */
.cal-card{
  background:var(--ink-nebula); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; max-width:520px; margin:0 auto;
}
.cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cal-title{ font-family:var(--serif); font-size:1.3rem; color:var(--gold-soft); }
.cal-nav{
  background:transparent; border:1px solid var(--line); color:var(--starlight);
  width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:var(--fs-base);
}
.cal-nav:hover{ border-color:var(--gold); color:var(--gold-soft); }
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; }
.cal-weekdays span{ text-align:center; font-size:var(--fs-micro); color:var(--starlight-dim); letter-spacing:.06em; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-cell{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  background:var(--glass-1); border:1px solid transparent; border-radius:50%;
  color:var(--starlight); font-size:var(--fs-sm); cursor:pointer;
}
.cal-cell:hover:not(.cal-disabled):not(.cal-empty){ border-color:var(--gold); color:var(--gold-soft); }
/* Past/blocked dates were rgba(...,0.18) = 1.54:1 on the card — effectively
   invisible, so the calendar read as having holes in it. Raised to 0.38 =
   3.06:1: clearly still "off" next to a live date (11.2:1) but legible.
   Deliberately left under 4.5:1 — WCAG 1.4.3 exempts inactive controls, and
   pushing it to AA would make disabled days look bookable. */
.cal-disabled{ color:rgba(245,230,211,0.38); cursor:not-allowed; }
.cal-empty{ background:transparent; }
.cal-selected{ background:var(--gold); color:var(--ink-void) !important; font-weight:700; }
.cal-note{ font-size:var(--fs-fine); margin:14px 0 0; }
.cal-slots-head{ font-size:var(--fs-sm); color:var(--gold-soft); margin:18px 0 10px; letter-spacing:.02em; }
.cal-slots-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cal-slot{
  padding:10px 6px; background:var(--glass-2); border:1px solid var(--line);
  border-radius:var(--radius); color:var(--starlight); font-size:var(--fs-fine); cursor:pointer;
}
.cal-slot:hover{ border-color:var(--gold); background:rgba(212,175,55,0.1); color:var(--gold-soft); }
@media (max-width:480px){ .cal-slots-grid{ grid-template-columns:repeat(2,1fr); } }

.form-status{ margin-top:14px; font-size:var(--fs-sm); padding:10px 14px; border-radius:var(--radius); display:none; }
.form-status.success{ display:block; background:rgba(108,227,166,0.1); color:#8FE3B6; border:1px solid rgba(108,227,166,0.3); }
.form-status.error{ display:block; background:rgba(201,112,100,0.12); color:var(--ember-soft); border:1px solid rgba(201,112,100,0.35); }

/* ===========================================================
   ASTRO CHATBOT WIDGET
=========================================================== */
/* ── Astro Professor ka panel ──────────────────────────────
   Purana 360x520 ka dabba ek canned-jawab widget ke liye theek
   tha. Ab isme asli baat-cheet hoti hai — vistrit vishleshan,
   photo, kai paragraph — isliye ye bada aur khula hai. */
.astro-chat-panel{
  position:fixed; right:22px; bottom:92px; z-index:70;
  width:400px; max-width:calc(100vw - 32px);
  height:min(620px, calc(100vh - 130px));
  background:linear-gradient(180deg, var(--ink-nebula-2), var(--ink-void));
  border:1px solid rgba(217,180,74,0.32); border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6), 0 0 70px rgba(123,63,196,0.16);
  display:none; flex-direction:column; overflow:hidden;
}
.astro-chat-panel.open{ display:flex; animation:apRise .28s cubic-bezier(.22,1,.36,1); }
@keyframes apRise{ from{ opacity:0; transform:translateY(14px) scale(.985); } }

.astro-chat-head{
  padding:14px 16px; display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg, rgba(217,180,74,0.15), rgba(139,123,196,0.12));
  border-bottom:1px solid var(--line); flex:none;
}
.astro-chat-head img{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(217,180,74,0.5); flex:none; }
.astro-chat-head .info{ flex:1; min-width:0; }
.astro-chat-head .info strong{ display:block; font-family:var(--serif); font-size:1.05rem; color:var(--starlight); }
.astro-chat-head .info span{ font-size:var(--fs-micro); color:#8FE3B6; }
.astro-chat-head .status-dot{
  width:8px; height:8px; border-radius:50%; background:#6CE3A6; display:inline-block;
  margin-right:5px; box-shadow:0 0 8px #6CE3A6;
}
.astro-chat-close{ background:none; border:none; color:var(--starlight-dim); font-size:1.3rem; cursor:pointer; line-height:1; flex:none; }
.astro-chat-close:hover{ color:var(--gold-soft); }

.astro-chat-body{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:16px 14px 6px; display:flex; flex-direction:column; gap:10px;
}

/* ── Purane chatbot ke bubbles (.astro-msg) ────────────────
   ABHI YAHI CHAL RAHA HAI. Neeche wali .ap-* wali styling
   Astro Professor (AI agent) ke liye hai, jo bana hua hai par
   chalu nahi (dekhiye docs/astro-agent-chalu-karna.md).

   Dono set saath rehte hain — sirf ek hi ek waqt me istemal
   hota hai, jo bhi script page par lagi ho. Ye jaan-boojh kar
   hai: agent chalu karte waqt CSS dobara likhni na pade, aur
   agar wapas purane par aana pade to wo bhi bina design ke na
   reh jaye (ye galti ek baar ho chuki hai). */
.astro-msg{ max-width:85%; font-size:var(--fs-sm); line-height:1.55; padding:10px 13px; border-radius:14px; }
.astro-msg.bot{
  align-self:flex-start; background:var(--glass-3); color:var(--starlight);
  border:1px solid var(--line); border-bottom-left-radius:4px;
}
.astro-msg.user{
  align-self:flex-end; background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  color:var(--ink-void); font-weight:500; border-bottom-right-radius:4px;
}
.astro-msg.cta{
  align-self:stretch; max-width:100%;
  background:linear-gradient(160deg, rgba(139,123,196,0.16), rgba(217,180,74,0.08));
  border:1px solid rgba(217,180,74,0.4); border-radius:14px; padding:14px;
}
.astro-msg.cta p{ margin:0 0 10px; color:var(--starlight); font-size:var(--fs-sm); }
.astro-msg.cta .cta-row{ display:flex; gap:8px; flex-wrap:wrap; }
.astro-msg.cta .cta-row a{
  flex:1; text-align:center; padding:9px 10px; border-radius:var(--radius-sm);
  font-size:var(--fs-fine); font-weight:600;
}

/* ── Astro Professor (agent) ke bubbles ─────────────────
   Ek jawab ke kai paragraph alag-alag bubble me aate hain,
   isliye do bubble ke beech ka faasla kam rakha gaya hai —
   warna ek hi baat tooti hui lagti hai. */
.ap-row{ display:flex; }
.ap-row.bot{ justify-content:flex-start; }
.ap-row.user{ justify-content:flex-end; }
.ap-row + .ap-row.bot{ margin-top:-4px; }

.ap-bubble{
  max-width:88%; font-size:var(--fs-sm); line-height:1.62;
  padding:11px 14px; border-radius:16px;
  animation:apPop .2s ease-out;
}
@keyframes apPop{ from{ opacity:0; transform:translateY(5px); } }
.ap-row.bot .ap-bubble{
  background:var(--glass-3); color:var(--starlight);
  border:1px solid var(--line); border-bottom-left-radius:5px;
}
.ap-row.user .ap-bubble{
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  color:var(--ink-void); font-weight:500; border-bottom-right-radius:5px;
}
.ap-bubble p{ margin:0 0 8px; }
.ap-bubble p:last-child{ margin-bottom:0; }
.ap-bubble p.ap-li{ padding-left:14px; position:relative; }
.ap-bubble p.ap-li::before{ content:"•"; position:absolute; left:2px; color:var(--gold); }
.ap-bubble strong{ color:var(--gold-soft); font-weight:600; }
.ap-row.user .ap-bubble strong{ color:inherit; }
.ap-bubble a{ color:var(--gold-soft); text-decoration:underline; text-underline-offset:2px; }
.ap-row.user .ap-bubble a{ color:var(--ink-void); }

/* ── "Likh rahe hain" ka nishaan ───────────────────────── */
.ap-typing{ display:flex; gap:5px; padding:14px 16px; }
.ap-typing span{
  width:7px; height:7px; border-radius:50%; background:var(--starlight-dim);
  animation:apDot 1.3s infinite ease-in-out;
}
.ap-typing span:nth-child(2){ animation-delay:.18s; }
.ap-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes apDot{ 0%,60%,100%{ opacity:.28; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-4px); } }
@media (prefers-reduced-motion: reduce){
  .ap-typing span{ animation:none; opacity:.6; }
  .ap-bubble, .astro-chat-panel.open{ animation:none; }
}

/* ── Photo ─────────────────────────────────────────────── */
.ap-shots{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:7px; }
.ap-shots img{ width:88px; height:88px; object-fit:cover; border-radius:10px; display:block; }
.ap-tray{ display:flex; gap:8px; padding:10px 14px 0; flex-wrap:wrap; }
.ap-thumb{ position:relative; }
.ap-thumb img{ width:56px; height:56px; object-fit:cover; border-radius:10px; border:1px solid var(--line); display:block; }
.ap-thumb button{
  position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
  border:none; cursor:pointer; background:var(--ink-void); color:var(--starlight);
  font-size:11px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}

.ap-note{
  align-self:center; text-align:center; max-width:92%;
  font-size:var(--fs-fine); color:var(--starlight-dim);
  background:rgba(232,163,61,0.08); border:1px solid rgba(232,163,61,0.28);
  border-radius:12px; padding:9px 13px; line-height:1.5;
}

/* ── Sujhav aur input ──────────────────────────────────── */
.astro-chip-row{ display:flex; flex-wrap:wrap; gap:7px; padding:6px 14px 10px; flex:none; }
.astro-chip{
  background:var(--glass-3); border:1px solid var(--line); color:var(--starlight-dim);
  font-size:var(--fs-fine); padding:7px 12px; border-radius:var(--radius-pill); cursor:pointer;
}
.astro-chip:hover{ border-color:var(--gold); color:var(--gold-soft); }

.astro-chat-foot{
  display:flex; gap:8px; align-items:center; padding:11px 13px;
  border-top:1px solid var(--line); background:rgba(255,255,255,0.02); flex:none;
}
.ap-clip{
  width:38px; height:38px; border-radius:50%; flex:none; cursor:pointer;
  background:var(--glass-2); border:1px solid rgba(245,230,211,0.18);
  font-size:1rem; line-height:1;
}
.ap-clip:hover{ border-color:var(--gold); }
.ap-clip:disabled, .astro-chat-foot input:disabled{ opacity:.5; cursor:not-allowed; }
.astro-chat-foot input{
  flex:1; min-width:0; background:var(--glass-2); border:1px solid rgba(245,230,211,0.18);
  border-radius:var(--radius-pill); padding:10px 16px; color:var(--starlight); font-size:var(--fs-sm);
}
.astro-chat-foot input:focus{ outline:none; border-color:var(--gold); }
.astro-chat-foot button[type=submit]{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--gold-soft), var(--gold)); color:var(--ink-void);
  display:flex; align-items:center; justify-content:center; flex:none;
}

@media (max-width:480px){
  /* Phone par ye lagbhag poori screen leta hai — vistrit jawab
     ek chhoti khidki me padhna mushkil hai. */
  .astro-chat-panel{
    right:8px; left:8px; width:auto; bottom:80px;
    height:min(78vh, calc(100vh - 110px)); border-radius:18px;
  }
  .ap-bubble{ max-width:92%; }
}

/* ===========================================================
   PANCHANG / KUNDLI CALCULATOR TOOL
=========================================================== */
.panchang-tool{
  background:linear-gradient(165deg, rgba(51,25,94,0.35), rgba(10,8,24,0.6));
  border:1px solid rgba(212,175,55,0.3); border-radius:var(--radius);
  padding:36px; box-shadow:0 0 60px rgba(123,63,196,0.15);
}
.panchang-result{ margin-top:28px; display:none; }
.panchang-result.show{ display:block; }
.pn-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px, 100%),1fr)); gap:14px; margin:20px 0; }
.pn-stat{
  background:var(--glass-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; text-align:center;
}
.pn-stat .pn-label{ font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:6px; }
.pn-stat .pn-value{ font-family:var(--serif); font-size:1.25rem; color:var(--starlight); }
.kundli-chart{ margin:24px auto 0; display:block; max-width:360px; }
.kundli-house-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px, 100%),1fr)); gap:10px; margin-top:20px; }
.kundli-house-list .kh{
  background:var(--glass-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:10px 14px; font-size:var(--fs-fine); display:flex; justify-content:space-between; gap:8px;
}
.kundli-house-list .kh b{ color:var(--gold-soft); font-weight:600; }
.panchang-disclaimer{
  margin-top:22px; padding:14px 16px; border-radius:var(--radius-sm); font-size:var(--fs-fine);
  background:rgba(212,175,55,0.06); border:1px solid var(--line); color:var(--starlight-dim);
}
.pn-loading{ text-align:center; padding:20px; color:var(--gold-soft); font-family:var(--serif); font-size:1.1rem; display:none; }
.pn-loading.show{ display:block; }

/* Call button emphasis block on contact page */
.contact-action-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .contact-action-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   CLASSROOM ENGINE
=========================================================== */
.classroom-tabs{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px;
}
.classroom-tab{
  flex:1; min-width:150px; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 12px; border-radius:var(--radius); cursor:pointer;
  background:var(--glass-1); border:1px solid var(--line); color:var(--starlight-dim);
  transition:all .25s ease;
}
.classroom-tab .ct-title{ font-family:var(--serif); font-size:var(--fs-base); color:var(--starlight); }
.classroom-tab .ct-progress{ font-size:var(--fs-micro); letter-spacing:.06em; color:var(--starlight-dim); }
.classroom-tab.active{
  border-color:var(--tab-accent); background:color-mix(in srgb, var(--tab-accent) 12%, transparent);
  box-shadow:0 0 24px color-mix(in srgb, var(--tab-accent) 30%, transparent);
}
/* ---- Accent-as-TEXT lift -------------------------------------------------
   Per-course / per-gem accents are injected from JS (classroom.js, the gem
   data) and are chosen to look good as BORDERS and GLOWS, where contrast is
   irrelevant. Several of them are then reused as small text colour, where it
   is not. Measured on --ink-void, every accent in the data set passes 4.5:1
   EXCEPT the brand magenta #C13FAE at 4.33:1 — and that is the default
   accent, so it is the one on screen most.

   Rather than restyle each accent (they live in JS this file does not own),
   text usages mix the accent 80% with --starlight. That lifts #C13FAE to
   5.64:1 and leaves the hue plainly magenta; the worst case across all 14
   accents in the data becomes 5.64:1, and any accent added later is lifted
   automatically. Borders/glows keep the raw accent — only text is mixed. */
.classroom-tab.active .ct-progress{
  color:color-mix(in srgb, var(--tab-accent) 80%, var(--starlight));
  font-weight:700;
}
.classroom-tab:hover{ border-color:var(--tab-accent); }

.classroom-header{
  text-align:center; max-width:680px; margin:0 auto 40px;
  padding:32px 28px; border-radius:var(--radius);
  background:linear-gradient(165deg, var(--course-accent-soft), transparent);
  border:1px solid color-mix(in srgb, var(--course-accent) 35%, transparent);
}
/* classroom.js renders this eyebrow with an INLINE style="color:{accent}".
   With the default magenta accent that is 4.33:1 on --ink-void at 11.8px —
   an AA failure on a public, indexed page (courses.html renders this block).
   An inline style can only be beaten by !important, and classroom.js is
   owned elsewhere, so the override lives here. Same 80% starlight lift as
   every other accent-as-text usage above: 5.64:1. */
.classroom-header .eyebrow{
  color:color-mix(in srgb, var(--course-accent, var(--gold)) 80%, var(--starlight)) !important;
}
.classroom-progress-bar{ margin-top:20px; }
.cpb-track{ height:8px; border-radius:var(--radius-sm); background:rgba(245,230,211,0.08); overflow:hidden; }
.cpb-fill{ height:100%; border-radius:var(--radius-sm); transition:width .4s ease; }
.cpb-label{ display:block; margin-top:8px; font-size:var(--fs-fine); color:var(--starlight-dim); letter-spacing:.02em; }

.classroom-modules{ display:flex; flex-direction:column; gap:14px; max-width:820px; margin:0 auto; }
.classroom-module{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--glass-1); transition:border-color .25s ease, box-shadow .25s ease;
}
.classroom-module.open{
  border-color:color-mix(in srgb, var(--course-accent) 50%, transparent);
  box-shadow:0 14px 40px color-mix(in srgb, var(--course-accent) 18%, transparent);
}
.classroom-module.done .cm-title{ color:var(--starlight-dim); text-decoration:line-through; text-decoration-color:rgba(245,230,211,0.3); }
.cm-head{
  display:flex; align-items:center; gap:14px; padding:18px 20px; cursor:pointer;
}
.cm-check{ position:relative; flex:none; width:22px; height:22px; }
.cm-check input{ position:absolute; opacity:0; width:22px; height:22px; margin:0; cursor:pointer; }
.cm-check span{
  display:block; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--glass-2);
}
.cm-check input:checked + span{
  background:var(--course-accent); border-color:var(--course-accent);
  box-shadow:0 0 12px color-mix(in srgb, var(--course-accent) 60%, transparent);
}
.cm-title-wrap{ flex:1; min-width:0; }
.cm-index{ display:block; font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb, var(--course-accent) 80%, var(--starlight)); margin-bottom:3px; }
.cm-title{ margin:0; font-size:var(--fs-lead); }
.cm-meta{ flex:none; font-size:var(--fs-fine); color:var(--starlight-dim); white-space:nowrap; }
.cm-chevron{ flex:none; color:var(--starlight-dim); transition:transform .25s ease; }
.classroom-module.open .cm-chevron{ transform:rotate(180deg); color:var(--course-accent); }
.cm-body{
  padding:0 20px 24px 56px; color:var(--starlight-dim); font-size:var(--fs-md); line-height:1.75;
}
.cm-mentor-btn{ margin-top:18px; display:inline-flex; }

@media (max-width:700px){
  .classroom-tabs{ flex-direction:column; }
  .cm-body{ padding:0 16px 20px 16px; }
  .cm-meta{ display:none; }
}

/* ===========================================================
   AUTH — login modal + nav user badge
=========================================================== */
.kt-auth-overlay{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(6,4,16,0.72); backdrop-filter:blur(6px); padding:20px;
}
.kt-auth-overlay.open{ display:flex; }
.kt-auth-modal{
  width:420px; max-width:100%; max-height:90vh; overflow-y:auto;
  background:linear-gradient(180deg, #170F30, #0E0920);
  border:1px solid rgba(212,175,55,0.35); border-radius:var(--radius-card); padding:30px 26px 26px;
  position:relative; box-shadow:0 30px 80px rgba(0,0,0,0.6), 0 0 50px rgba(138,95,194,0.28);
  animation:chatIn .3s ease;
}
.kt-auth-close{
  position:absolute; top:16px; right:16px; background:none; border:none;
  color:var(--starlight-dim); font-size:1.3rem; cursor:pointer;
}
.kt-auth-head{ text-align:center; margin-bottom:22px; }
.kt-auth-glow{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--gold-soft), var(--twilight) 80%);
  font-size:1.3rem; margin-bottom:10px; box-shadow:0 0 24px rgba(212,175,55,0.4);
}
.kt-auth-head h3{ margin:0 0 4px; font-size:1.3rem; }
.kt-auth-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px; border-radius:var(--radius); border:1px solid rgba(245,230,211,0.25);
  background:#fff; color:#1a1a2e; font-weight:600; font-size:var(--fs-md); cursor:pointer; font-family:var(--sans);
}
.kt-auth-btn:hover{ box-shadow:0 6px 20px rgba(255,255,255,0.15); }
.kt-auth-divider{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--starlight-dim); font-size:var(--fs-fine); }
.kt-auth-divider::before, .kt-auth-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.kt-auth-tabtoggle{ display:flex; gap:8px; margin-bottom:16px; }
.kt-auth-tab{
  flex:1; padding:9px; border-radius:var(--radius-sm); border:1px solid var(--line); background:transparent;
  color:var(--starlight-dim); font-size:var(--fs-sm); cursor:pointer; font-family:var(--sans);
}
.kt-auth-tab.active{ background:rgba(212,175,55,0.14); border-color:var(--gold); color:var(--gold-soft); }
.kt-auth-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
@media (max-width:400px){ .kt-auth-row{ grid-template-columns:1fr; } }

/* Nav user badge + dropdown */
.kt-user-menu{
  position:absolute; top:calc(100% + 10px); left:0; z-index:60; min-width:180px;
  background:#170F30; border:1px solid rgba(212,175,55,0.35); border-radius:var(--radius); padding:12px;
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
}
.kt-user-name{ font-size:var(--fs-sm); color:var(--starlight); margin-bottom:10px; word-break:break-word; }
.kt-user-signout{
  width:100%; padding:8px; border-radius:var(--radius-sm); border:1px solid var(--line); background:transparent;
  color:var(--ember-soft); font-size:var(--fs-fine); cursor:pointer; font-family:var(--sans);
}
.kt-user-signout:hover{ background:rgba(201,112,100,0.12); }

/* ===========================================================
   GEMSTONES PAGE
=========================================================== */
.gems-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px, 100%),1fr)); gap:26px; }
.gem-card{
  border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden;
  background:linear-gradient(180deg, var(--glass-1), transparent);
  display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.gem-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--ga) 55%, transparent);
  box-shadow:0 20px 55px color-mix(in srgb, var(--ga) 22%, transparent); }
.gem-media{ position:relative; aspect-ratio:4/3; overflow:hidden;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--ga) 14%, #0B0B1F), #0B0B1F); }
.gem-media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%;
  user-select:none; -webkit-user-drag:none; pointer-events:none; }
.gem-planet{
  position:absolute; top:12px; left:12px; padding:5px 12px; border-radius:var(--radius-pill); font-size:var(--fs-micro);
  background:rgba(11,11,31,0.75); border:1px solid color-mix(in srgb, var(--ga) 55%, transparent);
  color:var(--starlight); letter-spacing:.04em; backdrop-filter:blur(4px);
}
.gem-soon{
  position:absolute; bottom:12px; right:12px; padding:4px 10px; border-radius:var(--radius); font-size:var(--fs-micro);
  background:rgba(11,11,31,0.8); color:var(--starlight-dim); border:1px solid var(--line);
}
.gem-head{ padding:18px 20px 6px; }
.gem-head h3{ margin:0 0 4px; font-size:1.35rem; }
.gem-hindi{ color:color-mix(in srgb, var(--ga) 80%, var(--starlight)); font-size:var(--fs-base); }
.gem-tagline{ font-size:var(--fs-sm); color:var(--starlight-dim); margin:0 0 8px; }
.gem-from{ font-size:var(--fs-sm); color:var(--starlight-dim); margin:0; }
.gem-from strong{ color:color-mix(in srgb, var(--ga) 80%, var(--starlight)); font-family:var(--serif); font-size:1.15rem; }

.gem-story-btn{
  margin:12px 20px 0; padding:10px 14px; border-radius:var(--radius); cursor:pointer; text-align:left;
  background:color-mix(in srgb, var(--ga) 10%, transparent); color:var(--starlight);
  border:1px dashed color-mix(in srgb, var(--ga) 45%, transparent); font-size:var(--fs-sm); font-family:var(--sans);
}
.gem-story{ display:none; padding:16px 20px 4px; }
.gem-story.open{ display:block; animation:chatIn .3s ease; }
.gs-text{ font-size:var(--fs-md); line-height:1.75; color:var(--starlight-dim); }
.gs-facts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0; }
.gs-facts div{ font-size:var(--fs-fine); color:var(--starlight); padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:rgba(11,11,31,0.35); }
.gs-facts span{ display:block; font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.1em; color:color-mix(in srgb, var(--ga) 80%, var(--starlight)); margin-bottom:2px; }
.gs-who{ font-size:var(--fs-sm); color:var(--starlight-dim); }
.gs-caution{ font-size:var(--fs-fine); color:var(--ember-soft); border-left:2px solid var(--ember); padding-left:10px; }

.gem-calc{ padding:14px 20px 20px; margin-top:auto; border-top:1px solid var(--line); }
.gc-label{ display:block; font-size:var(--fs-fine); letter-spacing:.06em; text-transform:uppercase; color:var(--starlight-dim); margin:12px 0 8px; }
.gc-opts{ display:grid; gap:8px; }
.gc-opt{
  display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-radius:var(--radius);
  background:var(--glass-2); border:1px solid var(--line); color:var(--starlight-dim);
  cursor:pointer; font-size:var(--fs-sm); font-family:var(--sans);
}
.gc-opt span{ color:color-mix(in srgb, var(--ga) 80%, var(--starlight)); font-weight:600; }
.gc-opt.active{ border-color:var(--ga); color:var(--starlight);
  background:color-mix(in srgb, var(--ga) 14%, transparent); box-shadow:0 0 18px color-mix(in srgb, var(--ga) 25%, transparent); }
.gc-slider{ width:100%; accent-color:var(--ga); margin:4px 0 12px; }
.gem-calc-rows{ border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; background:rgba(11,11,31,0.4); }
.gcr{ display:flex; justify-content:space-between; gap:12px; font-size:var(--fs-sm); color:var(--starlight-dim); padding:5px 0; }
.gcr strong{ color:var(--starlight); }
.gcr.discount span, .gcr.discount strong{ color:#7FE3A8; }
.gcr.muted-row span, .gcr.muted-row strong{ color:var(--starlight-dim); font-size:var(--fs-fine); }
.gcr.total{ border-top:1px solid var(--line); margin-top:6px; padding-top:10px; font-size:var(--fs-base); }
.gcr.total strong{ color:color-mix(in srgb, var(--ga) 80%, var(--starlight)); font-family:var(--serif); font-size:1.35rem; }
.gem-consent{ display:flex; gap:10px; align-items:flex-start; margin:14px 0; cursor:pointer; }
.gem-consent input{ margin-top:3px; accent-color:var(--ga); width:16px; height:16px; flex:none; }
.gem-consent span{ font-size:var(--fs-fine); color:var(--starlight-dim); line-height:1.5; }
.gem-order:disabled{ opacity:.45; cursor:not-allowed; }

/* CSS-rendered gems for missing photos */
.css-gem{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.css-gem span{ display:block; border-radius:22% 60% 40% 55%; width:52%; aspect-ratio:1;
  transform:rotate(-8deg); position:relative; }
.css-gem.gomed span{
  background:radial-gradient(circle at 32% 28%, #F5D9A0 0%, #E0A85C 30%, #B5722E 62%, #7A4416 100%);
  box-shadow:0 0 60px rgba(224,168,92,0.5), inset -14px -18px 40px rgba(80,40,8,0.55), inset 10px 12px 30px rgba(255,235,190,0.5);
}
.css-gem.catseye span{
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #E8EFC0 0%, #C9CF7E 28%, #8F9A45 60%, #4F5722 100%);
  box-shadow:0 0 60px rgba(201,207,126,0.45), inset -14px -18px 40px rgba(40,45,10,0.6), inset 10px 12px 28px rgba(245,250,210,0.5);
}
/* MOTI — gol, safed, halki si nacreous chamak. Baaki ratnon jaisi
   tez chamak nahi: Moti ki pehchaan hi uski naram, doodhiya aabha
   hai, isliye highlight halka aur phaila hua rakha gaya hai. */
.css-gem.pearl span{
  border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #FFFFFF 0%, #F4F0E8 26%, #DDD5C8 58%, #A99F92 100%);
  box-shadow:0 0 55px rgba(240,236,226,0.4), inset -12px -16px 34px rgba(120,112,100,0.42),
             inset 12px 14px 30px rgba(255,255,255,0.75);
}
/* Anjaan ratna ke liye tatasth roop — taaki naya ratna jodne par
   wo kisi doosre ratna jaisa na dikhe (ye galti Moti ke saath hui thi). */
.css-gem.plain span{
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #E9E2F2 0%, #C4B4D8 30%, #8B7BC4 64%, #4A3E68 100%);
  box-shadow:0 0 50px rgba(139,123,196,0.4), inset -12px -16px 34px rgba(35,25,60,0.55),
             inset 10px 12px 28px rgba(240,235,250,0.45);
}
.css-gem.catseye span::after{
  content:""; position:absolute; left:50%; top:6%; bottom:6%; width:7%; transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,0.95) 18%, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.95) 82%, transparent);
  border-radius:50%; filter:blur(1.5px);
}

/* Gem page hero + trust strip */
.gem-hero-badges{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.gem-hero-badges .pill{ font-size:var(--fs-fine); }
@media (max-width:700px){ .gems-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   CLASSROOM v2 — XP, quiz, confetti
=========================================================== */
.classroom-xpbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px;
  padding:12px 18px; border:1px solid var(--line); border-radius:var(--radius-pill);
  background:linear-gradient(90deg, rgba(212,175,55,0.08), rgba(107,63,160,0.10)); }
.cxp-level{ font-family:var(--serif); font-size:var(--fs-lead); color:var(--gold-soft); white-space:nowrap; }
.cxp-track{ flex:1; min-width:120px; height:8px; border-radius:var(--radius-pill); background:rgba(245,230,211,0.1); overflow:hidden; }
.cxp-fill{ height:100%; border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--gold-soft),var(--twilight-soft)); transition:width .5s ease; }
.cxp-num{ font-size:var(--fs-fine); color:var(--starlight-dim); white-space:nowrap; }
.classroom-complete{ margin-top:12px; padding:10px 14px; border:1px dashed var(--gold); border-radius:var(--radius);
  color:var(--gold-soft); font-size:var(--fs-md); text-align:center; }
.cm-intro{ color:var(--starlight-dim); line-height:1.75; font-size:var(--fs-md); }
.cm-panels{ display:grid; gap:10px; margin:16px 0; }
.cm-panel{ display:flex; gap:12px; align-items:flex-start; padding:13px 15px; border-radius:var(--radius);
  background:rgba(11,11,31,0.45); border:1px solid var(--line); border-left:3px solid var(--course-accent,var(--gold));
  opacity:0; animation:panelIn .5s ease forwards; }
@keyframes panelIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.cmp-ic{ color:color-mix(in srgb, var(--course-accent,var(--gold)) 80%, var(--starlight)); flex:none; margin-top:2px; }
.cmp-head{ display:block; color:var(--starlight); font-size:var(--fs-md); margin-bottom:2px; }
.cmp-body{ color:var(--starlight-dim); font-size:var(--fs-sm); line-height:1.65; }
.cm-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }

.cm-quiz{ margin-top:18px; padding:16px 18px; border-radius:var(--radius);
  border:1px dashed color-mix(in srgb, var(--course-accent,var(--gold)) 55%, transparent);
  background:color-mix(in srgb, var(--course-accent,var(--gold)) 7%, transparent); }
.cm-quiz.solved{ border-style:solid; }
.cmq-head{ font-size:var(--fs-fine); letter-spacing:.08em; text-transform:uppercase; color:color-mix(in srgb, var(--course-accent,var(--gold)) 80%, var(--starlight));
  font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.cmq-badge{ font-size:var(--fs-micro); padding:3px 10px; border-radius:var(--radius); background:rgba(212,175,55,0.15); color:var(--gold-soft); letter-spacing:.02em; }
.cmq-q{ color:var(--starlight); font-size:var(--fs-md); margin:10px 0 12px; line-height:1.55; }
.cmq-opts{ display:grid; gap:8px; }
.cmq-opt{ text-align:left; padding:11px 14px; border-radius:var(--radius); cursor:pointer; font-family:var(--sans); font-size:var(--fs-sm);
  background:var(--glass-2); border:1px solid var(--line); color:var(--starlight-dim); transition:all .2s ease; }
.cmq-opt:hover:not(:disabled){ border-color:var(--course-accent,var(--gold)); color:var(--starlight); }
.cmq-opt.right{ background:rgba(108,227,166,0.15); border-color:#6CE3A6; color:#8FE3B6; }
.cmq-opt.wrong{ background:rgba(201,112,100,0.15); border-color:var(--ember); color:var(--ember-soft); animation:shake .4s ease; }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
.cmq-opt:disabled{ cursor:default; opacity:.75; }
.cmq-opt.right:disabled{ opacity:1; }
.cmq-why{ margin-top:12px; font-size:var(--fs-sm); color:var(--starlight); font-style:italic; line-height:1.6;
  border-left:2px solid var(--course-accent,var(--gold)); padding-left:12px; }

.kt-confetti{ position:fixed; bottom:38vh; width:9px; height:9px; border-radius:2px; z-index:300; pointer-events:none;
  animation:confetti 1.5s cubic-bezier(.2,.8,.4,1) forwards; }
@keyframes confetti{
  from{ transform:translate(0,0) rotate(0); opacity:1; }
  to{ transform:translate(var(--dx,0), var(--dy,-200px)) rotate(var(--rot,360deg)); opacity:0; }
}

/* ===========================================================
   30-DAY TRIAL — pill, banner, paywall
=========================================================== */
.kt-trial-pill{ position:fixed; left:18px; bottom:18px; z-index:80; padding:10px 18px; border-radius:var(--radius-pill);
  font-size:var(--fs-fine); color:var(--starlight); font-family:var(--sans);
  background:linear-gradient(135deg, rgba(212,175,55,0.18), rgba(107,63,160,0.25));
  border:1px solid rgba(212,175,55,0.5); backdrop-filter:blur(8px);
  box-shadow:0 8px 26px rgba(0,0,0,0.4), 0 0 20px rgba(212,175,55,0.2); }
.kt-trial-pill.expired{ border-color:var(--ember); }
.kt-trial-pill a{ color:var(--gold-soft); font-weight:700; }
.kt-trial-banner{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  padding:16px 22px; margin:0 auto 26px; max-width:760px; border-radius:var(--radius-card); text-align:center;
  background:linear-gradient(135deg, rgba(212,175,55,0.14), rgba(201,112,100,0.10));
  border:1px solid rgba(212,175,55,0.45); color:var(--starlight); font-size:var(--fs-md); }
.kt-locked{ filter:blur(7px) saturate(.7); pointer-events:none; user-select:none; }
.kt-paywall{ position:absolute; inset:0; z-index:40; display:flex; align-items:flex-start; justify-content:center; padding:60px 20px; }
.kt-paywall-card{ max-width:480px; text-align:center; padding:36px 30px; border-radius:var(--radius-card);
  background:linear-gradient(180deg,#1A102F,#0E0920); border:1px solid rgba(212,175,55,0.5);
  box-shadow:0 30px 80px rgba(0,0,0,0.65), 0 0 60px rgba(138,95,194,0.3); }
.kt-paywall-ic{ font-size:2.2rem; display:block; margin-bottom:10px; }
.kt-paywall-card h3{ font-size:1.35rem; margin-bottom:10px; }
.kt-paywall-card p{ font-size:var(--fs-md); }
.kt-paywall-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px; }
@media (max-width:520px){ .kt-trial-pill{ left:10px; bottom:10px; font-size:var(--fs-micro); padding:8px 13px; } }

/* ===========================================================
   COSMIC CTA v2 — leader-grade task buttons (AstroTalk-class)
=========================================================== */
/* CONTRAST FIX — the site's primary CTA was failing AA.
   .btn-primary sets color:var(--ink-void) (#0A0818) and this gradient ended
   at #8A5FC2, which against that ink measures 4.24:1 — under the 4.5:1 floor.
   Worse, :hover slides background-position to 95%, dragging that darkest
   violet UNDER the label. Tail lightened to #9E7AD4: 5.83:1, passes AA, and
   the violet-into-gold identity is unchanged. Mid stop #B98BE0 = 7.38:1. */
.btn-primary{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(120deg,#D9B44A 0%, #E8C766 28%, #B98BE0 62%, #9E7AD4 100%);
  background-size:220% 100%;
  border:1px solid rgba(232,199,102,0.7);
  box-shadow:0 6px 22px rgba(212,175,55,0.28), 0 0 0 0 rgba(212,175,55,0.35);
  transition:background-position .5s ease, transform .15s ease, box-shadow .3s ease;
}
.btn-primary:hover{
  background-position:95% 0;
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(138,95,194,0.4), 0 0 24px rgba(212,175,55,0.35);
}
.btn-primary:active{ transform:translateY(0) scale(.985); }
.btn-primary::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%);
  transform:translateX(-120%); transition:transform .6s ease;
}
.btn-primary:hover::after{ transform:translateX(120%); }
.btn-primary:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .btn-primary, .btn-primary::after{ transition:none; }
}

/* Trust strip — leader pattern */
.trust-strip{
  display:flex; gap:22px; justify-content:center; flex-wrap:wrap;
  padding:18px 24px; margin:0 auto; max-width:900px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.trust-strip span{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-sm); color:var(--starlight-dim); letter-spacing:.02em;
}
.trust-strip b{ color:var(--gold-soft); font-weight:600; }

/* Fair pricing compare card */
.fair-price{
  display:grid; grid-template-columns:1fr 1fr; gap:0; max-width:840px; margin:26px auto 0;
  border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden;
}
.fair-price > div{ padding:26px 28px; }
.fp-market{ background:var(--glass-1); }
.fp-kayla{ background:linear-gradient(160deg, rgba(212,175,55,0.10), rgba(107,63,160,0.12));
  border-left:1px solid rgba(212,175,55,0.4); }
.fair-price h4{ margin:0 0 10px; font-size:var(--fs-lead); }
.fp-kayla h4{ color:var(--gold-soft); }
.fair-price li{ font-size:var(--fs-sm); color:var(--starlight-dim); margin:8px 0; list-style:none; }
.fair-price li::before{ content:"— "; color:var(--starlight-dim); }
.fp-kayla li::before{ content:"✓ "; color:var(--gold-soft); }
.fair-price ul{ padding:0; margin:0; }
@media (max-width:640px){ .fair-price{ grid-template-columns:1fr; } .fp-kayla{ border-left:none; border-top:1px solid rgba(212,175,55,0.4);} }

/* ===========================================================
   KAAL CHAKRAA — Cinematic App Shell (installed app only)
   Everything below is scoped under html.kt-app-mode so the
   normal browser / SEO'd website is completely unaffected.
=========================================================== */

/* --- Cinematic splash --- */
#kt-splash{
  position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 38%, #3a2160 0%, #1a1035 46%, #0B0714 100%);
  overflow:hidden;
  animation:kt-splash-in .5s ease both;
}
#kt-splash.kt-splash-out{ animation:kt-splash-out .62s ease both; }
@keyframes kt-splash-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes kt-splash-out{ from{ opacity:1; } to{ opacity:0; transform:scale(1.08); filter:blur(4px); } }

/* twinkling starfield */
.kt-splash-stars{ position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 82% 60%, rgba(232,199,102,.85), transparent),
    radial-gradient(1px 1px at 33% 75%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 55% 48%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 14% 86%, rgba(232,199,102,.6), transparent),
    radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 46% 14%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 64% 82%, rgba(255,255,255,.55), transparent);
  animation:kt-stars-tw 3s ease-in-out infinite;
}
@keyframes kt-stars-tw{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* pulsing aura behind the core */
.kt-splash-aura{ position:absolute; top:38%; left:50%; width:360px; height:360px; pointer-events:none;
  transform:translate(-50%,-50%); filter:blur(6px);
  background:radial-gradient(circle, rgba(193,63,174,.34) 0%, rgba(212,175,55,.16) 40%, transparent 68%);
  animation:kt-aura 3.4s ease-in-out infinite;
}
@keyframes kt-aura{ 0%,100%{ transform:translate(-50%,-50%) scale(.9); opacity:.7; } 50%{ transform:translate(-50%,-50%) scale(1.14); opacity:1; } }

.kt-splash-core{ position:relative; width:200px; height:200px; display:flex; align-items:center; justify-content:center; margin-bottom:30px; }

/* dashed orbit rings */
.kt-orbit{ position:absolute; border-radius:50%; }
.kt-orbit.o1{ inset:2px; border:1px dashed rgba(212,175,55,.30); animation:kt-orbit-spin 18s linear infinite; }
.kt-orbit.o2{ inset:34px; border:1px dashed rgba(193,63,174,.32); animation:kt-orbit-spin 22s linear infinite reverse; }
@keyframes kt-orbit-spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

/* rotating zodiac ring */
.kt-zodiac-ring{ position:absolute; inset:0; animation:kt-ring-spin 26s linear infinite; }
.kt-zodiac-ring .zs{ position:absolute; top:50%; left:50%; width:22px; height:22px; margin:-11px;
  font-size:var(--fs-lead); line-height:22px; text-align:center; color:rgba(232,199,102,.9);
  text-shadow:0 0 8px rgba(212,175,55,.55); }
@keyframes kt-ring-spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

/* Kajal photo in the center */
.kt-splash-photo-wrap{ position:relative; width:122px; height:122px; border-radius:50%; padding:3px;
  background:linear-gradient(135deg,#E8C766,#C13FAE 60%,#E8C766);
  box-shadow:0 0 32px rgba(212,175,55,.6), 0 0 64px rgba(193,63,174,.35);
  animation:kt-photo-in .9s cubic-bezier(.2,.9,.3,1.25) both;
}
.kt-splash-photo-wrap img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:2px solid #0B0714; }
@keyframes kt-photo-in{ from{ transform:scale(.35); opacity:0; } to{ transform:scale(1); opacity:1; } }

.kt-splash-brand{ position:relative; font-family:var(--serif,'Fraunces',serif);
  font-size:2.15rem; letter-spacing:.04em; font-weight:600;
  background:linear-gradient(90deg,#F5E6D3 0%,#E8C766 38%,#fff 50%,#E8C766 62%,#F5E6D3 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:kt-brand-in .7s ease .22s both, kt-shine 3s linear .6s infinite;
}
.kt-splash-brand b{ font-weight:700; }
@keyframes kt-brand-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes kt-shine{ from{ background-position:180% center; } to{ background-position:-80% center; } }

.kt-splash-tag{ font-size:var(--fs-md); color:var(--starlight-dim,#b8a9c9); font-style:italic; margin-top:9px;
  animation:kt-tag-in .7s ease .48s both; }
@keyframes kt-tag-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:.9; transform:translateY(0); } }

.kt-splash-loader{ position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
  width:130px; height:3px; border-radius:3px; background:rgba(212,175,55,.16); overflow:hidden; }
.kt-splash-loader span{ position:absolute; top:0; bottom:0; width:42%; border-radius:3px;
  background:linear-gradient(90deg,transparent,#E8C766,transparent); animation:kt-loader 1.3s ease-in-out infinite; }
@keyframes kt-loader{ 0%{ left:-42%; } 100%{ left:100%; } }
body.kt-splash-active{ overflow:hidden; }

/* --- Bottom tab bar with raised centre FAB (app-only) --- */
html.kt-app-mode body.kt-has-tabbar{ padding-bottom:74px; }
html.kt-app-mode body.kt-has-tabbar .float-stack{ bottom:96px; }
html.kt-app-mode body.kt-has-tabbar .astro-chat-panel{ bottom:168px; }
#kt-tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; justify-content:space-around; align-items:flex-end;
  height:66px; padding-bottom:env(safe-area-inset-bottom,0);
  background:linear-gradient(to top, rgba(12,8,24,.98), rgba(22,14,42,.93));
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(212,175,55,.25);
  box-shadow:0 -8px 30px rgba(0,0,0,.42);
}
.kt-tab{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--starlight-dim,#b8a9c9); text-decoration:none; font-size:var(--fs-tab); letter-spacing:.02em;
  flex:1; padding:9px 0 7px; transition:color .2s;
}
.kt-tab-ic{ font-size:1.24rem; line-height:1; transition:transform .2s; }
.kt-tab.active{ color:var(--gold-soft,#E8C766); }
.kt-tab.active .kt-tab-ic{ transform:translateY(-2px) scale(1.14); }
.kt-tab:active .kt-tab-ic{ transform:scale(.85); }

/* raised centre "Consult" FAB */
.kt-tab-fab{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  text-decoration:none; transform:translateY(-16px); }
.kt-fab-btn{ width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,#E8C766 0%,#C13FAE 130%); color:#1a1330;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  box-shadow:0 8px 24px rgba(193,63,174,.5), 0 0 0 4px rgba(12,8,24,.92);
  animation:kt-fab-pulse 2.6s ease-in-out infinite; transition:transform .18s;
}
.kt-fab-lb{ font-size:var(--fs-tab); letter-spacing:.03em; color:var(--gold-soft,#E8C766); margin-top:4px; }
@keyframes kt-fab-pulse{
  0%,100%{ box-shadow:0 8px 24px rgba(193,63,174,.5),0 0 0 4px rgba(12,8,24,.92),0 0 0 0 rgba(232,199,102,.45); }
  50%{ box-shadow:0 8px 24px rgba(193,63,174,.5),0 0 0 4px rgba(12,8,24,.92),0 0 0 12px rgba(232,199,102,0); }
}
.kt-tab-fab:active .kt-fab-btn{ transform:scale(.9); }

/* --- Page entrance: pure-CSS fade, always completes, never depends on JS timing --- */
html.kt-app-mode body{ animation:kt-body-fadein .35s ease both; }
@keyframes kt-body-fadein{ from{ opacity:0; } to{ opacity:1; } }

/* --- Tap "haptic" pulse feedback (app-only) --- */
html.kt-app-mode .kt-tap-pulse{ animation:kt-tap-pulse .26s ease; }
@keyframes kt-tap-pulse{ 0%{ transform:scale(1); } 40%{ transform:scale(.96); } 100%{ transform:scale(1); } }

@media (prefers-reduced-motion: reduce){
  #kt-splash, #kt-splash *, html.kt-app-mode *{ animation:none !important; transition:none !important; }
}

/* ===========================================================
   DAILY RASHIFAL (Horoscope) widget
=========================================================== */
.rf-heading{ text-align:center; font-family:var(--serif,serif); font-size:1.1rem; color:var(--gold-soft,#E8C766); margin:0 0 14px; }
.rf-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
@media (max-width:520px){ .rf-grid{ grid-template-columns:repeat(3, 1fr); } }
.rf-sign{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 6px; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer;
  background:var(--glass-2); color:var(--starlight-dim,#b8a9c9); transition:all .18s;
}
.rf-sign:hover{ border-color:var(--gold); color:var(--gold-soft); transform:translateY(-2px); }
.rf-glyph{ font-size:1.5rem; color:var(--gold-soft,#E8C766); }
.rf-label{ font-size:var(--fs-micro); }
.rf-result{ text-align:center; }
.rf-change{ background:none; border:none; color:var(--starlight-dim,#b8a9c9); font-size:var(--fs-fine); cursor:pointer; margin-bottom:10px; text-decoration:underline; }
.rf-sign-big{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px; }
.rf-glyph-big{ font-size:2.2rem; color:var(--gold-soft,#E8C766); filter:drop-shadow(0 0 10px rgba(212,175,55,0.5)); }
.rf-sign-big strong{ font-family:var(--serif,serif); font-size:1.2rem; color:var(--starlight,#F5E6D3); }
.rf-eyebrow{ font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--gold,#D4AF37); margin:14px 0 6px; }
.rf-today-text{ font-size:var(--fs-base); line-height:1.7; color:var(--starlight,#F5E6D3); max-width:480px; margin:0 auto 18px; }
.rf-enabled{ font-size:var(--fs-sm); color:#6CE3A6; }
.rf-status{ font-size:var(--fs-fine); color:#E85B6B; margin-top:8px; min-height:1.2em; }

/* ---- language switcher (kt-i18n.js) -------------------------------
   Deliberately a two-button toggle, not a <select>. There are exactly
   two languages and both fit in the space; a dropdown would cost a tap
   and hide the current choice behind it. */
.kt-lang{display:inline-flex;border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-pill);overflow:hidden;vertical-align:middle;margin-right:8px}
.kt-lang-btn{background:transparent;border:0;color:#cbb9e8;cursor:pointer;
  /* was system-ui — the only control on the site not set in Inter, which
     read as a foreign widget next to the nav. Same size, site typeface. */
  font:600 var(--fs-micro)/1 var(--sans);padding:8px 12px;letter-spacing:.04em;
  transition:background .15s,color .15s}
.kt-lang-btn+.kt-lang-btn{border-left:1px solid rgba(255,255,255,.14)}
.kt-lang-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.kt-lang-btn.active{background:#e8c76a;color:#2a1a3e}
.kt-lang-btn:focus-visible{outline:2px solid #e8c76a;outline-offset:2px}

/* ---- clickable zodiac wheel (zodiac-wheel.js) ---------------------
   The glyphs sit in a rotating group. Clicking a moving target is a bad
   experience, so hover/focus stops the spin -- the wheel stays alive to
   look at, and holds still the moment you reach for it. */
.zodiac-wheel .zg-hit{ cursor:pointer; }
.zodiac-wheel .zg-target{ fill:transparent; }      /* the real hit area */
.zodiac-wheel .zg{ transition:fill .18s ease, font-size .18s ease; }

.zodiac-wheel:hover .zw-rot,
.zodiac-wheel:focus-within .zw-rot{ animation-play-state:paused; }

.zodiac-wheel .zg-hit:hover .zg-target,
.zodiac-wheel .zg-hit:focus-visible .zg-target{
  fill:rgba(232,199,106,.18); stroke:var(--gold,#e8c76a); stroke-width:1.5; }
.zodiac-wheel .zg-hit:hover .zg{ fill:var(--gold,#e8c76a); }
.zodiac-wheel .zg-hit:focus{ outline:none; }
.zodiac-wheel .zg-hit:focus-visible .zg{ fill:var(--gold,#e8c76a); }

/* the answer to a tap: the glyph flares, then settles */
.zodiac-wheel .zg-picked .zg-target{ fill:rgba(232,199,106,.42); }
.zodiac-wheel .zg-picked .zg{ fill:#fff; }

/* Anyone who has asked their system to reduce motion should not be given
   a spinning wheel at all -- the clicks still work exactly the same. */
@media (prefers-reduced-motion: reduce){
  .zodiac-wheel .zw-rot{ animation:none !important; }
  .zodiac-wheel .zg{ transition:none; }
}

/* Visible only to screen readers. The wheel uses this to announce which
   rashi just opened — without it the page jumps and a non-sighted user is
   told nothing about why. */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }


/* ═══════════════════════════════════════════════════════════════
   LAPTOP AUR DESKTOP KI OONCHAI — sirf 900px se chaudi screen par
   ═══════════════════════════════════════════════════════════════
   Mobile par site theek chal rahi thi, isliye upar ka kuch bhi nahi
   badla gaya. Dikkat sirf laptop par thi, aur uski wajah seedhi hai:
   laptop CHAUDE hote hain par CHHOTE. 1280x720 par —

     • section ka padding 96+96 = 192px  (screen ka 27%, khaali hawa)
     • Kajal ki photo 707px             (screen ka 98%)
     • har service image 420px          (screen ka 58%)

   Teeno milkar ek section ko 1.5 screen se bada bana dete the, isliye
   ek bhi hissa poora dikhta hi nahi tha aur har cheez zoom ki hui
   lagti thi.

   Ye sab yahan `vh` se bandha hai — screen jitni oonchi, utni chhoot.
   Media query isliye hai ki mobile is block me aata hi nahi. */
@media (min-width: 900px){
  section{ padding:clamp(44px, 7vh, var(--sp-9)) 0; }

  /* Photo apne column me rahe, poori screen na ghere */
  .people-photo{ max-height:62vh; }

  /* Card ki image itni hi ki uske neeche ka content bhi frame me aaye */
  .svc-img, .course-img{ max-height:min(420px, 34vh); }
}

/* ═══════════════════════════════════════════════════════════════
   FESTIVE BANNER — homepage
   ═══════════════════════════════════════════════════════════════
   Ek patli patti, jaan-bujhkar. Abhi hi poore page se oonchai
   bachayi gayi hai; ek naya banner usi jagah ko wapas kha le to
   kaam ulta ho jaayega. Isliye ye ek line me rehta hai aur mobile
   par do line se zyada nahi jaata.

   Rang phase se aata hai (--fest-rang), isliye Shravan aur Raksha
   Bandhan alag dikhte hain bina alag CSS likhe. */
.kt-festive[hidden]{ display:none; }
.kt-festive{
  display:flex; align-items:center; justify-content:center;
  gap:10px 16px; flex-wrap:wrap;
  padding:9px 16px; margin:0 0 2px;
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--fest-rang,#8B7BC4) 22%, transparent),
    color-mix(in srgb, var(--fest-rang,#8B7BC4) 8%, transparent));
  border-bottom:1px solid color-mix(in srgb, var(--fest-rang,#8B7BC4) 40%, transparent);
  font-size:var(--fs-sm); line-height:1.5; text-align:center;
}
.kt-festive .fest-msg{ color:var(--starlight); }
.kt-festive .fest-msg b{ color:var(--fest-rang,#8B7BC4); font-weight:700; }
.kt-festive .fest-sub{ color:var(--starlight-dim); font-size:var(--fs-fine); }
.kt-festive .fest-offer{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--gold); color:var(--ink-void);
  padding:4px 13px; border-radius:20px;
  font-size:var(--fs-fine); font-weight:700; white-space:nowrap;
}
.kt-festive .fest-offer a{ color:inherit; text-decoration:underline; }
@media(max-width:640px){
  .kt-festive{ padding:8px 12px; gap:6px 10px; }
  /* Mobile par upa-vaakya chhupa dete hain — mukhya sandesh aur
     offer hi kaam ke hain, aur teen line ka banner mobile par
     poori pehli screen kha jaata hai. */
  .kt-festive .fest-sub{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR KE DROPDOWN  (22 Aug 2026)
   ═══════════════════════════════════════════════════════════════
   Pehle navbar me 10 sapaat link the aur site par 70+ panne. Yani
   jo cheez bikti hai — pooja, anushthan, paath, ratna — unme se
   zyadatar navbar me the hi nahi. Visitor ko `services` panne par
   jaakar dhoondhna padta tha, aur jo pehli baar aaya hai wo ye
   maan leta hai ki jo nav me nahi dikha, wo hai hi nahi.

   Ab har shreni ka apna dropdown hai. Dhaancha tools/nav-data.json
   me hai — yahan sirf uska roop.

   DO CHEEZEIN JAAN-BOOJHKAR AISI HAIN:
   1. Panel `display:none` se shuru hota hai, kisi JS class se nahi.
      Isse JS aane se PEHLE bhi menu band rehta hai — warna panne ke
      pehle 30ms sab menu khule dikhte (FOUC).
   2. Desktop par `:hover` ke saath `:focus-within` bhi hai, taaki
      keyboard se Tab dabane wale ko bhi menu khule. Sirf hover
      rakhna keyboard aur screen-reader ke liye menu ko band kar
      deta hai.
   ═══════════════════════════════════════════════════════════════ */

.nav-grp{ position:relative; display:flex; align-items:center; }

/* Button ko theek wahi roop jo `nav.links a` ka hai — visitor ko
   pata na chale ki ye <a> nahi <button> hai. Browser ke apne button
   default (background, border, font) yahan poori tarah hatane padte
   hain, warna wo header par ek grey dabba jaisa dikhta hai. */
.nav-grp-btn{
  background:none; border:none; padding:4px 0; margin:0; cursor:pointer;
  color:color-mix(in srgb, var(--starlight-dim) 55%, var(--starlight) 45%);
  font-family:var(--sans); font-weight:600;
  font-size:calc(var(--fs-md) + .03rem); letter-spacing:.02em;
  position:relative; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;
  -webkit-tap-highlight-color:transparent;
}
.nav-grp-btn::before{
  content:""; position:absolute; left:-12px; right:-12px; top:-6px; bottom:-6px;
  border-radius:var(--radius-pill); background:transparent;
  transition:background-color .18s ease, box-shadow .18s ease;
  pointer-events:none; z-index:-1;
}
.nav-grp-btn:hover{ color:var(--gold-soft); text-shadow:0 0 12px var(--glow-gold); }
.nav-grp-btn:hover::before{ background:rgba(217,180,74,0.14); }
.nav-grp-btn.active{ color:var(--gold); font-weight:700; text-shadow:0 0 14px var(--glow-gold); }
.nav-grp-btn.active::before{
  background:rgba(217,180,74,0.18); box-shadow:0 0 18px rgba(217,180,74,0.25);
}

/* Teekona nishan — CSS se bana hai, emoji se nahi. Emoji har OS par
   alag rang aur alag chaudai ka aata hai, aur baaki nav gold-plum
   palette me hai. */
.nav-caret{
  width:0; height:0; flex:none;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.75;
  transition:transform .2s ease;
}

.nav-menu{ display:none; }

/* ── Desktop: neeche latakta panel ───────────────────────────── */
@media (min-width:1300px){
  .nav-menu{
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    margin-top:12px; padding:14px; z-index:120;
    background:rgba(20,13,34,0.985);
    border:1px solid rgba(212,175,55,0.18); border-radius:16px;
    /* Teen parat ka saaya. Ek hi bada shadow "chipka hua" lagta hai;
       ek chhota tight shadow kinara paribhaashit karta hai, ek lamba
       gehra shadow panel ko panne se UPAR uthata hai, aur ek halki
       plum ring use header ke palette se jodti hai. */
    box-shadow:
      0 2px 6px rgba(0,0,0,.40),
      0 28px 64px -12px rgba(0,0,0,.78),
      0 0 0 1px rgba(123,63,196,.16);
    /* Do column — jaise reference image me. 6 se zyada item wale menu
       ek hi lambi laton me 12 item tak khinch jaate the, jo screen ki
       oonchai se bahar nikal jaata. Column ki chaudai `minmax` se
       tay hoti hai, fixed nahi, taaki lamba naam kate nahi. */
    /* `display:none` — grid NAHI. Ye niyam upar wale `.nav-menu{display:none}`
       ke BAAD aata hai, isliye yahan `grid` likhne par saare saat panel
       panna khulte hi khule dikh jaate the. Chaudai aur column ka hisaab
       yahin rehta hai; `display` sirf hover/focus/.open par grid banta hai. */
    display:none; grid-template-columns:repeat(2, minmax(214px, 1fr));
    gap:2px 10px;
    /* Bina iske panel apne container (button, ~90px) jitna chaura
       rehta hai aur do column uske BAHAR nikal jaate hain — text
       panel ke kinare ke bahar chhapta hai. */
    width:max-content; max-width:min(92vw, 640px);
  }
  /* 4 ya usse kam item ho to do column me aadha panel khaali dikhta
     hai — un chhote menu ko ek hi column me rakhiye. */
  /* Calculators me 26 item hain. Do column me wo 13 kataar banti
     hain — kareeb 600px — jo chhote laptop ki screen se bahar
     nikal jaati hai, aur neeche ke calculator kabhi dikhte hi
     nahi. Teen column me wo 9 kataar rehti hai. `max-height` ek
     rakhwala hai: agar aage aur item jude to panel screen se
     bahar jaane ke bajaye apne andar scroll karega. */
  .nav-grp[data-grp="calc"] .nav-menu{
    grid-template-columns:repeat(3, minmax(178px, 1fr));
    max-height:min(70vh, 560px); overflow-y:auto;
  }
  .nav-grp[data-grp="horo"] .nav-menu,
  .nav-grp[data-grp="panchang"] .nav-menu{
    grid-template-columns:repeat(2, minmax(196px, 1fr));
  }
  .nav-grp[data-grp="pooja"] .nav-menu,
  .nav-grp[data-grp="rituals"] .nav-menu,
  .nav-grp[data-grp="services"] .nav-menu,
  .nav-grp[data-grp="shop"] .nav-menu,
  .nav-grp[data-grp="connect"] .nav-menu{ grid-template-columns:minmax(228px,1fr); }
  /* Kinare wale menu screen se bahar na nikle */
  .nav-grp:first-of-type .nav-menu{ left:0; transform:none; }
  .nav-grp:last-of-type  .nav-menu{ left:auto; right:0; transform:none; }
  /* Button aur panel ke beech 12px ki khaali jagah hai. Bina is
     bridge ke mouse us khaali jagah se guzarte hi hover toot jaata
     hai aur menu band ho jaata hai — user ko lagta hai menu "bhaag
     raha hai". Ye ek anokha pull hai jo us gap ko dhak deta hai. */
  .nav-grp::after{
    content:""; position:absolute; top:100%; left:0; right:0; height:14px;
  }
  /* `display:grid`, `block` NAHI. `.nav-menu` upar grid banaya gaya hai,
     par ye niyam baad me aata hai — `block` likhne par wo grid ko dabaa
     deta tha aur panel wapas ek-column ki patli suchi ban jaata tha
     (chaudai 180px, jabki column 214px maange the). */
  .nav-grp:hover > .nav-menu,
  .nav-grp:focus-within > .nav-menu,
  .nav-grp.open > .nav-menu{ display:grid; }
  .nav-grp:hover .nav-caret,
  .nav-grp:focus-within .nav-caret{ transform:rotate(180deg); }

  .nav-menu a{
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    padding:11px 14px; border-radius:10px;
    font-size:var(--fs-sm); font-weight:500; white-space:nowrap;
    color:var(--starlight); letter-spacing:0;
    transition:background-color .15s ease, color .15s ease;
  }
  /* Daayin taraf ka teer — batata hai ki ye ek panne par le jaayega,
     aur nazar ko har pankti ke aakhir tak le jaata hai. Halka rehta
     hai; hover par hi poora ubhrta hai. */
  .nav-menu a::after{
    content:"→"; display:inline-block !important;
    font-size:.95em; opacity:.28; color:var(--gold-soft);
    transition:opacity .15s ease, transform .15s ease;
    /* `nav.links a.active::after` ek gold ki patti hai jo link ke neeche
       lagti hai — position:absolute, height:2px, background:gold. Wo bhi
       ::after hi hai, isliye active link par dono niyam MIL jaate hain
       aur teer ek 2px ki patti ban kar gayab ho jaata. Isliye wo saare
       gun yahan saaf reset kiye ja rahe hain. */
    position:static; inset:auto; height:auto; width:auto;
    background:none; box-shadow:none; border-radius:0;
  }
  .nav-menu a:hover::after{ opacity:1; transform:translateX(3px); }
  /* `nav.links a::before` ek z-index:-1 wali pill hai. Panel ke andar
     wo pill panel ke apne background ke PEECHE chali jaati hai — hover
     par kuch dikhta hi nahi. Isliye yahan use band karke seedha
     background diya gaya hai. */
  .nav-menu a::before{ display:none !important; }
  .nav-menu a:hover{ background:rgba(217,180,74,0.14); color:var(--gold-soft); }
  .nav-menu a.active{ background:rgba(217,180,74,0.18); color:var(--gold); font-weight:700; }
}

/* ── Phone/tablet: accordion, latakta panel nahi ─────────────── */
@media (max-width:1299px){
  .nav-grp{ display:block; width:100%; max-width:320px; }
  .nav-grp-btn{
    display:flex; width:100%; justify-content:center;
    font-family:var(--serif); font-size:1.5rem; font-weight:600;
    color:var(--starlight); padding:13px 6px;
    border-bottom:1px solid rgba(212,175,55,0.12);
    opacity:0; transform:translateY(14px);
  }
  nav.links.open .nav-grp-btn{
    opacity:1; transform:translateY(0);
    transition:opacity .4s ease, transform .4s ease;
  }
  .nav-grp.open > .nav-menu{ display:block; }
  .nav-grp.open .nav-caret{ transform:rotate(180deg); }
  .nav-menu{
    padding:4px 0 10px;
    border-bottom:1px solid rgba(212,175,55,0.12);
    background:rgba(123,63,196,0.07);
  }
  /* Ander ke link chhote aur halke — taaki ye ek "shreni ke andar ki
     soochi" lage, upar wale mukhya link ke barabar ka na lage. */
  .nav-menu a{
    font-size:1.06rem; font-family:var(--sans); font-weight:500;
    padding:11px 6px; border-bottom:none;
    color:color-mix(in srgb, var(--starlight-dim) 40%, var(--starlight) 60%);
    opacity:1; transform:none;
  }
  .nav-menu a.active{ color:var(--gold); }
  /* Ungli ke liye poora 44px ka nishana — WCAG ki nyoontam maap. */
  .nav-grp-btn{ min-height:44px; }
  .nav-menu a{ min-height:44px; display:flex; align-items:center; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .nav-caret{ transition:none; }
  .nav-grp-btn{ transition:none; }
}


/* ═══════════════════════════════════════════════════════════════
   PANCHANG PANNA  (23 Aug 2026)
   ═══════════════════════════════════════════════════════════════
   Ek Panchang panna ginti ka panna hai — log usse padhte nahi,
   SCAN karte hain. "Rahu Kaal kab hai" ka jawab ek nazar me
   milna chahiye, paragraph me nahi.

   Isliye yahan taal ka aadhaar hai: label chhota aur halka,
   MAAN bada aur saaf, aur samay ke ankon par `tabular-nums` —
   taaki 24 hora ki kataar me ank ek doosre ke theek neeche
   khade hon. Bina uske har pankti thodi khisak jaati hai aur
   suchi tedhi dikhne lagti hai.

   Rang se matlab nikalta hai, sajawat nahi: shubh = gold,
   asubh = halka laal, madhyam = saada. Ye teen hi hain, aur
   inhe site ke accent (gold) se alag rakha gaya hai taaki
   "achha/bura" padhne me chinh ki tarah kaam kare.
   ═══════════════════════════════════════════════════════════════ */

.pn-wrap{ max-width:960px; margin:0 auto; }

/* ── Jagah aur tareekh chunne ki patti ───────────────────────── */
.pn-bar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
  padding:16px; margin-bottom:26px;
  background:rgba(123,63,196,0.07);
  border:1px solid rgba(212,175,55,0.16); border-radius:14px;
}
.pn-place{ position:relative; flex:1 1 260px; min-width:0; }
.pn-bar label{
  display:block; font-size:var(--fs-fine); letter-spacing:.08em;
  text-transform:uppercase; color:var(--starlight-dim); margin-bottom:6px;
}
.pn-bar input[type=text], .pn-bar input[type=date]{
  width:100%; padding:11px 13px; border-radius:10px;
  background:rgba(8,6,20,0.6); color:var(--starlight);
  border:1px solid rgba(212,175,55,0.22); font-family:var(--sans);
  font-size:var(--fs-sm); min-height:44px;
}
.pn-city-tag{
  display:inline-block; margin-top:7px; font-size:var(--fs-fine);
  color:var(--gold-soft);
}
.pn-results{
  display:none; position:absolute; top:100%; left:0; right:0; z-index:40;
  margin-top:6px; max-height:280px; overflow-y:auto;
  background:rgba(20,13,34,0.99); border:1px solid rgba(212,175,55,0.22);
  border-radius:12px; box-shadow:0 20px 44px rgba(0,0,0,.6);
}
.pn-results.show{ display:block; }
.geo-item{
  padding:11px 14px; cursor:pointer; font-size:var(--fs-sm); color:var(--starlight);
  border-bottom:1px solid rgba(212,175,55,0.08); min-height:44px;
}
.geo-item:last-child{ border-bottom:none; }
.geo-item:hover{ background:rgba(212,175,55,0.14); }
.geo-item small{ display:block; color:var(--starlight-dim); font-size:.76rem; margin-top:2px; }
.geo-item.geo-loading, .geo-item.geo-empty{ cursor:default; color:var(--starlight-dim); }

/* ── Sheersh ─────────────────────────────────────────────────── */
.pn-head{ text-align:center; margin-bottom:22px; }
.pn-head-date{ font-family:var(--serif); font-size:1.35rem; color:var(--starlight); }
.pn-head-place{ font-size:var(--fs-sm); color:var(--starlight-dim); margin-top:4px; }
.pn-note{
  margin:14px auto 0; max-width:620px; padding:11px 14px;
  font-size:var(--fs-fine); line-height:1.65; text-align:left;
  color:var(--starlight-dim);
  background:rgba(123,63,196,0.10); border-left:3px solid var(--gold);
  border-radius:0 10px 10px 0;
}
.pn-warn{
  padding:20px; border-radius:14px; line-height:1.7;
  background:rgba(123,63,196,0.10); border:1px solid rgba(212,175,55,0.22);
  color:var(--starlight);
}

/* ── "Abhi kya chal raha hai" ────────────────────────────────── */
.pn-now{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:30px; }
.pn-now-item{
  padding:15px 17px; border-radius:14px; text-align:center;
  background:rgba(26,16,46,0.85); border:1px solid rgba(212,175,55,0.20);
}
.pn-now-label{
  display:block; font-size:var(--fs-fine); letter-spacing:.09em;
  text-transform:uppercase; color:var(--starlight-dim); margin-bottom:5px;
}
.pn-now-item strong{ display:block; font-family:var(--serif); font-size:1.5rem; color:var(--gold); }
.pn-now-item small{ display:block; margin-top:3px; font-size:var(--fs-fine); color:var(--starlight-dim); }

/* ── Khand ───────────────────────────────────────────────────── */
.pn-sec{ margin:0 0 38px; }
.pn-sec h2{ font-size:1.35rem; margin:0 0 8px; }
.pn-sub{ font-size:1.02rem; margin:20px 0 8px; color:var(--gold-soft); }
.pn-sec-note{ font-size:var(--fs-sm); color:var(--starlight-dim); line-height:1.75; margin:0 0 14px; }

/* Jis vishay ka panna hai, uska khand ujagar */
.pn-sec.pn-focus{
  padding:20px; border-radius:16px;
  background:rgba(123,63,196,0.08);
  border:1px solid rgba(212,175,55,0.20);
}

.pn-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; }
.pn-card{
  padding:14px 16px; border-radius:12px;
  background:rgba(26,16,46,0.72); border:1px solid rgba(212,175,55,0.13);
}
.pn-card-label{
  font-size:var(--fs-fine); letter-spacing:.08em; text-transform:uppercase;
  color:var(--starlight-dim); margin-bottom:5px;
}
.pn-card-val{
  font-family:var(--serif); font-size:1.16rem; color:var(--starlight);
  font-variant-numeric:tabular-nums; line-height:1.35;
}
.pn-card-sub{ margin-top:4px; font-size:var(--fs-fine); color:var(--starlight-dim); }

/* ── Samay ki kataar ─────────────────────────────────────────── */
.pn-list{ border:1px solid rgba(212,175,55,0.13); border-radius:12px; overflow:hidden; }
.pn-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:12px 16px; min-height:44px;
  border-bottom:1px solid rgba(212,175,55,0.09);
  background:rgba(26,16,46,0.55);
}
.pn-row:last-child{ border-bottom:none; }
.pn-row-name{ font-weight:600; color:var(--starlight); }
/* Ank ek doosre ke THEEK neeche — 24 hora ki suchi me ye farak
   nazar aata hai. Bina tabular-nums ke har pankti thodi khisakti
   hai aur kataar tedhi lagti hai. */
.pn-row-time{
  font-variant-numeric:tabular-nums; font-size:var(--fs-sm);
  color:var(--starlight-dim); white-space:nowrap;
}
.pn-row.pn-shubh{ background:rgba(217,180,74,0.11); }
.pn-row.pn-shubh .pn-row-name{ color:var(--gold); }
.pn-row.pn-asubh{ background:rgba(196,74,74,0.10); }
.pn-row.pn-asubh .pn-row-name{ color:#E3908C; }
.pn-row.pn-raat{ background:rgba(8,6,20,0.55); }
.pn-now-item.pn-shubh strong{ color:var(--gold); }
.pn-now-item.pn-asubh strong{ color:#E3908C; }

@media (max-width:520px){
  .pn-row{ flex-direction:column; align-items:flex-start; gap:3px; padding:11px 14px; }
  .pn-head-date{ font-size:1.15rem; }
}


/* ═══════════════════════════════════════════════════════════════
   NUMEROLOGY PANNA  (23 Aug 2026)
   ═══════════════════════════════════════════════════════════════
   Is panne par ANK hi mukhya cheez hai — shabd nahi. Isliye
   taal ulta hai: label chhota, aur ank bada, serif me, gold me.
   Paathak "5" dhoondhne aata hai, "Moolank" nahi.

   LO SHU GRID KA EK KHAAS FAISLA
   ------------------------------
   Har khaane me ank UTNI BAAR chhapta hai jitni baar wo aaya —
   "3x" likhkar nahi. Ye Lo Shu ki apni parampara hai, aur
   padhne me bhi seedha hai: teen 1 dikhna "1 x3" padhne se
   turant samajh aata hai.

   Jo ank moolank/bhagyank se jodkar aaye hain wo HALKE dikhte
   hain (`.nu-jode`). Bina is farak ke grid zyada bhara hua
   lagta hai jitna wo sach me hai — aur khaali ank hi Lo Shu ka
   asli natija hote hain.
   ═══════════════════════════════════════════════════════════════ */

.nu-wrap{ max-width:960px; margin:0 auto; }

.nu-form{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px; align-items:end; padding:18px; margin-bottom:28px;
  background:rgba(123,63,196,0.07);
  border:1px solid rgba(212,175,55,0.16); border-radius:14px;
}
.nu-form label{
  display:block; font-size:var(--fs-fine); letter-spacing:.08em;
  text-transform:uppercase; color:var(--starlight-dim); margin-bottom:6px;
}
.nu-form input{
  width:100%; padding:11px 13px; border-radius:10px; min-height:44px;
  background:rgba(8,6,20,0.6); color:var(--starlight);
  border:1px solid rgba(212,175,55,0.22);
  font-family:var(--sans); font-size:var(--fs-sm);
}
.nu-form .nu-hint{ font-size:var(--fs-fine); color:var(--starlight-dim); margin-top:5px; }

.nu-warn{
  padding:20px; border-radius:14px; line-height:1.75;
  background:rgba(123,63,196,0.10); border:1px solid rgba(212,175,55,0.22);
  color:var(--starlight);
}

.nu-sec{ margin:0 0 40px; }
.nu-sec h2{ font-size:1.35rem; margin:0 0 8px; }
.nu-sub{ font-size:1.02rem; margin:22px 0 10px; color:var(--gold-soft); }
.nu-note{ font-size:var(--fs-sm); color:var(--starlight-dim); line-height:1.8; margin:0 0 16px; }
.nu-sec.nu-focus{
  padding:20px; border-radius:16px;
  background:rgba(123,63,196,0.08); border:1px solid rgba(212,175,55,0.20);
}

/* ── Mukhya ank ─────────────────────────────────────────────── */
.nu-bigs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.nu-big{
  padding:20px 18px; border-radius:16px; text-align:center;
  background:rgba(26,16,46,0.82); border:1px solid rgba(212,175,55,0.20);
}
.nu-big-label{
  font-size:var(--fs-fine); letter-spacing:.1em; text-transform:uppercase;
  color:var(--starlight-dim);
}
.nu-big-num{
  font-family:var(--serif); font-size:3.1rem; line-height:1.05;
  color:var(--gold); margin:6px 0 4px; font-variant-numeric:tabular-nums;
  text-shadow:0 0 22px var(--glow-gold);
}
.nu-big-word{ font-size:var(--fs-sm); color:var(--starlight); }
.nu-big-sub{ margin-top:6px; font-size:var(--fs-fine); color:var(--starlight-dim); line-height:1.6; }

.nu-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:12px; }
.nu-card{
  padding:14px 16px; border-radius:12px;
  background:rgba(26,16,46,0.72); border:1px solid rgba(212,175,55,0.13);
}
.nu-card-label{
  font-size:var(--fs-fine); letter-spacing:.08em; text-transform:uppercase;
  color:var(--starlight-dim); margin-bottom:5px;
}
.nu-card-val{
  font-family:var(--serif); font-size:1.9rem; color:var(--gold);
  font-variant-numeric:tabular-nums; line-height:1.2;
}
.nu-card-val.nu-word{ font-size:1.16rem; color:var(--starlight); }
.nu-card-sub{ margin-top:4px; font-size:var(--fs-fine); color:var(--starlight-dim); line-height:1.6; }

.nu-flag{
  margin-top:14px; padding:13px 16px; border-radius:0 10px 10px 0;
  font-size:var(--fs-sm); line-height:1.8; color:var(--starlight-dim);
  background:rgba(123,63,196,0.10); border-left:3px solid rgba(212,175,55,0.45);
}
.nu-flag strong{ color:var(--starlight); }
.nu-flag-gold{ background:rgba(217,180,74,0.10); border-left-color:var(--gold); }
.nu-flag-gold strong{ color:var(--gold); }

/* ── Lo Shu 3x3 ─────────────────────────────────────────────── */
.nu-loshu{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  max-width:360px; margin:0 auto 6px;
}
.nu-cell{
  position:relative; aspect-ratio:1; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(26,16,46,0.8); border:1px solid rgba(212,175,55,0.18);
}
.nu-cell-n{
  position:absolute; top:6px; left:9px;
  font-size:var(--fs-fine); color:var(--starlight-dim); opacity:.7;
}
.nu-cell-v{
  font-family:var(--serif); font-size:1.5rem; color:var(--gold);
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
/* Jo ank moolank/bhagyank se JODE gaye hain — halke, taaki grid
   sach se zyada bhara hua na dikhe. */
.nu-jode{ color:var(--starlight-dim); opacity:.55; font-style:normal; }
.nu-cell.nu-khaali{ background:rgba(8,6,20,0.5); border-style:dashed; }
.nu-cell-empty{ color:var(--starlight-dim); opacity:.4; font-size:1.1rem; }

.nu-tal{ border:1px solid rgba(212,175,55,0.13); border-radius:12px; overflow:hidden; }
.nu-tal-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:12px 16px; min-height:44px;
  border-bottom:1px solid rgba(212,175,55,0.09);
  background:rgba(26,16,46,0.55);
}
.nu-tal-row:last-child{ border-bottom:none; }
.nu-tal-name{ color:var(--starlight); font-weight:600; }
.nu-tal-name small{ color:var(--starlight-dim); font-weight:400; }
.nu-tal-val{ font-size:var(--fs-sm); color:var(--starlight-dim); white-space:nowrap; }
.nu-tal-row.nu-poora{ background:rgba(217,180,74,0.11); }
.nu-tal-row.nu-poora .nu-tal-val{ color:var(--gold); }
.nu-tal-row.nu-khaali .nu-tal-val{ color:#E3908C; }

.nu-seema{
  margin-top:34px; padding:16px 18px; border-radius:12px;
  font-size:var(--fs-fine); line-height:1.85; color:var(--starlight-dim);
  background:rgba(8,6,20,0.5); border:1px solid rgba(212,175,55,0.13);
}

/* ── Shiksha ka hissa (ank 1-9 ke card) ─────────────────────── */
.nu-ank-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.nu-ank{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px; border-radius:14px;
  background:rgba(26,16,46,0.72); border:1px solid rgba(212,175,55,0.13);
}
.nu-ank-n{
  flex:none; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.4rem; color:var(--gold);
  background:rgba(217,180,74,0.12); border:1px solid rgba(212,175,55,0.32);
}
.nu-ank-b{ min-width:0; }
.nu-ank-b strong{ display:block; color:var(--starlight); margin-bottom:3px; }
.nu-ank-b small{ display:block; color:var(--starlight-dim); font-size:var(--fs-fine); line-height:1.65; }

@media (max-width:520px){
  .nu-big-num{ font-size:2.6rem; }
  .nu-loshu{ max-width:300px; gap:6px; }
  .nu-cell-v{ font-size:1.25rem; }
  .nu-tal-row{ flex-direction:column; align-items:flex-start; gap:3px; }
}


/* ═══════════════════════════════════════════════════════════════
   RASHI KE CHINH aur HOROSCOPE PANNA  (23 Aug 2026)
   ═══════════════════════════════════════════════════════════════
   12 card ki kataar ka poora asar EK cheez par tikta hai: sab
   BILKUL ek naap ke dikhein. Isliye har card ka `aspect-ratio`
   tay hai aur chinh 100x100 ke ek hi viewBox se aata hai — naap
   card se aati hai, chitra se nahi.

   Chinh ka rang `currentColor` se aata hai, isliye hover, chuna
   hua roop aur dono theme apne aap chalte hain — SVG ko haath
   lagaye bina.
   ═══════════════════════════════════════════════════════════════ */

.zd-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(122px,1fr));
  gap:12px; margin:0 0 30px;
}
.zd-card{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px 10px 14px; cursor:pointer;
  background:rgba(26,16,46,0.72);
  border:1px solid rgba(212,175,55,0.16); border-radius:16px;
  color:var(--starlight-dim); font-family:var(--sans);
  transition:border-color .18s ease, background-color .18s ease,
             color .18s ease, transform .18s ease;
  -webkit-tap-highlight-color:transparent; min-height:44px;
}
.zd-card:hover{
  color:var(--gold-soft); border-color:rgba(212,175,55,0.42);
  background:rgba(217,180,74,0.08); transform:translateY(-2px);
}
.zd-card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.zd-card.zd-on{
  color:var(--gold); border-color:var(--gold);
  background:rgba(217,180,74,0.13);
  box-shadow:0 0 0 1px rgba(217,180,74,0.35), 0 10px 28px -10px rgba(217,180,74,0.4);
}
.zd-chinh{ display:block; width:64px; height:64px; }
/* Bahar ka gol ghera rekha se halka rehna chahiye — warna wo
   khud ek aakar ban jaata hai aur chinh dab jaata hai. */
.zd-ghera{ stroke:currentColor; }
.zd-naam{ font-size:var(--fs-sm); font-weight:600; letter-spacing:.01em; }
.zd-dev{ font-size:var(--fs-fine); opacity:.72; }

@media (prefers-reduced-motion:reduce){
  .zd-card{ transition:none; }
  .zd-card:hover{ transform:none; }
}

/* ── Horoscope ka natija ─────────────────────────────────────── */
.ho-wrap{ max-width:860px; margin:0 auto; }
.ho-warn{
  padding:20px; border-radius:14px; line-height:1.8;
  background:rgba(123,63,196,0.10); border:1px solid rgba(212,175,55,0.22);
  color:var(--starlight);
}
.ho-head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:12px; padding-bottom:14px; margin-bottom:20px;
  border-bottom:1px solid rgba(212,175,55,0.16);
}
.ho-head-rashi{ display:flex; align-items:center; gap:12px; color:var(--gold); }
.ho-head-rashi .zd-chinh{ width:54px; height:54px; }
.ho-head-rashi span{ font-family:var(--serif); font-size:1.5rem; }
.ho-head-rashi small{ display:block; font-family:var(--sans);
  font-size:var(--fs-fine); color:var(--starlight-dim); letter-spacing:.02em; }
.ho-head-kab{ font-size:var(--fs-sm); color:var(--starlight-dim); }

.ho-sec{ margin:0 0 34px; }
.ho-sec h2{ font-size:1.3rem; margin:0 0 8px; }
.ho-note{ font-size:var(--fs-sm); color:var(--starlight-dim); line-height:1.8; margin:0 0 16px; }

.ho-row{
  padding:16px 18px; margin-bottom:12px; border-radius:14px;
  background:rgba(26,16,46,0.62); border:1px solid rgba(212,175,55,0.12);
}
.ho-row-head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:10px; margin-bottom:7px;
}
.ho-row-head strong{ font-family:var(--serif); font-size:1.14rem; color:var(--gold); }
.ho-row-pos{ font-size:var(--fs-fine); color:var(--starlight-dim); }
.ho-vakri{ color:#E3908C; font-style:normal; }
.ho-row-baat{ margin:0; font-size:var(--fs-sm); line-height:1.85; color:var(--starlight); }

.ho-flag{
  padding:15px 18px; margin-bottom:22px; border-radius:0 12px 12px 0;
  font-size:var(--fs-sm); line-height:1.85; color:var(--starlight-dim);
  background:rgba(217,180,74,0.09); border-left:3px solid var(--gold);
}
.ho-flag strong{ color:var(--gold); }
.ho-flag a{ color:var(--gold-soft); }

.ho-list{ border:1px solid rgba(212,175,55,0.13); border-radius:12px; overflow:hidden; }
.ho-item{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:13px 16px; min-height:44px;
  border-bottom:1px solid rgba(212,175,55,0.09);
  background:rgba(26,16,46,0.55);
}
.ho-item:last-child{ border-bottom:none; }
.ho-item-name{ font-weight:600; color:var(--starlight); }
.ho-item-time{ font-size:var(--fs-sm); color:var(--starlight-dim);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

.ho-seema{
  margin-top:30px; padding:16px 18px; border-radius:12px;
  font-size:var(--fs-fine); line-height:1.9; color:var(--starlight-dim);
  background:rgba(8,6,20,0.5); border:1px solid rgba(212,175,55,0.13);
}
.ho-seema a{ color:var(--gold-soft); }

@media (max-width:520px){
  .zd-grid{ grid-template-columns:repeat(3,1fr); gap:9px; }
  .zd-card{ padding:12px 6px 10px; }
  .zd-chinh{ width:48px; height:48px; }
  .zd-dev{ display:none; }
  .ho-item{ flex-direction:column; align-items:flex-start; gap:3px; }
  .ho-head-rashi span{ font-size:1.25rem; }
}


/* ── Wheel ke rashi-chinh ab SVG hain, Unicode <text> nahi ──────
   Purane `.zg` niyam <text> ke liye bane the: `fill` se rang aur
   `font-size` se naap. Rekha-chitra unme se kisi se nahi chalta —
   `fill` lagate hi chinh ek bhara hua dhabba ban jaata hai, aur
   `font-size` ka to koi matlab hi nahi.

   Isliye `.zg-svg` un dono ko ULTA karta hai: fill band, stroke
   chalu. Ye zaroori hai kyunki CSS presentation-attribute par
   bhaari padti hai — SVG me `fill="none"` likh dena kaafi nahi
   hota jab CSS `.zg{fill:...}` keh rahi ho.

   stroke-width 5 ek 100x100 viewBox ke andar hai jo 0.30 par
   chhota hota hai — yani screen par ~1.5px. Wheel ki baaki
   rekhaayein (zring, zspoke) 1-1.7px ki hain, isliye chinh unke
   saath ek hi haath ka lagta hai, chipka hua nahi. */
.zodiac-wheel .zg-svg{
  fill:none !important;
  stroke:var(--gold-soft, #E8C766);
  stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .18s ease;
  filter:drop-shadow(0 0 3px rgba(212,175,55,0.45));
}
.zodiac-wheel .zg-hit:hover .zg-svg,
.zodiac-wheel .zg-hit:focus-visible .zg-svg{ stroke:var(--gold, #e8c76a); }
.zodiac-wheel .zg-picked .zg-svg{ stroke:#fff; }


/* ═══════════════════════════════════════════════════════════════
   CALCULATOR PANNE  (23 Aug 2026)
   ═══════════════════════════════════════════════════════════════
   Bees calculator, ek hi roop. Panna `data-calc` se apna kaam
   uthata hai; CSS sab par ek jaisi lagti hai — isliye ek jagah
   sudhaar bees jagah lagta hai.

   `.cl-khel` sabse zaroori niyam hai. Love/FLAMES jaise panne
   jyotish NAHI hain, aur wo baat natije se PEHLE dikhni chahiye,
   baad me nahi. Isliye wo patti upar hai aur uska rang baaki
   panne se alag — taaki wo "chhoti si line" na lage jise log
   chhod dete hain.
   ═══════════════════════════════════════════════════════════════ */

.cl-wrap{ max-width:900px; margin:0 auto; }

.cl-form{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px; align-items:start; padding:18px; margin-bottom:28px;
  background:rgba(123,63,196,0.07);
  border:1px solid rgba(212,175,55,0.16); border-radius:14px;
}
.cl-khet{ min-width:0; position:relative; }
.cl-form label{
  display:block; font-size:var(--fs-fine); letter-spacing:.08em;
  text-transform:uppercase; color:var(--starlight-dim); margin-bottom:6px;
}
.cl-form input{
  width:100%; padding:11px 13px; border-radius:10px; min-height:44px;
  background:rgba(8,6,20,0.6); color:var(--starlight);
  border:1px solid rgba(212,175,55,0.22);
  font-family:var(--sans); font-size:var(--fs-sm);
}
.cl-hint{ font-size:var(--fs-fine); color:var(--starlight-dim); margin-top:5px; line-height:1.5; }
.cl-place-tag{ display:block; margin-top:6px; font-size:var(--fs-fine); color:var(--gold-soft); }
.cl-results{
  display:none; position:absolute; top:74px; left:0; right:0; z-index:40;
  max-height:270px; overflow-y:auto;
  background:rgba(20,13,34,0.99); border:1px solid rgba(212,175,55,0.22);
  border-radius:12px; box-shadow:0 20px 44px rgba(0,0,0,.6);
}
.cl-results.show{ display:block; }
.cl-form .btn{ width:100%; min-height:44px; }

.cl-warn{
  padding:20px; border-radius:14px; line-height:1.85;
  background:rgba(123,63,196,0.10); border:1px solid rgba(212,175,55,0.22);
  color:var(--starlight);
}

/* Khel ki patti — natije se PEHLE, aur alag rang me. Iska kaam
   hi ye hai ki nazar isse bach kar na nikal jaye. */
.cl-khel{
  padding:14px 18px; margin-bottom:22px; border-radius:12px;
  font-size:var(--fs-sm); line-height:1.8;
  color:var(--starlight);
  background:rgba(123,63,196,0.16);
  border:1px dashed rgba(212,175,55,0.45);
}

.cl-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); gap:12px; margin-bottom:22px; }
.cl-card{
  padding:16px 18px; border-radius:14px;
  background:rgba(26,16,46,0.78); border:1px solid rgba(212,175,55,0.15);
}
.cl-card-label{
  font-size:var(--fs-fine); letter-spacing:.09em; text-transform:uppercase;
  color:var(--starlight-dim); margin-bottom:6px;
}
.cl-card-val{
  font-family:var(--serif); font-size:1.5rem; color:var(--gold); line-height:1.25;
  font-variant-numeric:tabular-nums;
}
.cl-card-sub{ margin-top:5px; font-size:var(--fs-fine); color:var(--starlight-dim); line-height:1.6; }

.cl-sub{ font-size:1.02rem; margin:22px 0 10px; color:var(--gold-soft); }
.cl-list{ border:1px solid rgba(212,175,55,0.13); border-radius:12px; overflow:hidden; margin-bottom:20px; }
.cl-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:12px 16px; min-height:44px;
  border-bottom:1px solid rgba(212,175,55,0.09);
  background:rgba(26,16,46,0.55);
}
.cl-row:last-child{ border-bottom:none; }
.cl-row-name{ font-weight:600; color:var(--starlight); }
.cl-row-val{ font-size:var(--fs-sm); color:var(--starlight-dim); text-align:right;
  font-variant-numeric:tabular-nums; }
.cl-row.cl-shubh{ background:rgba(217,180,74,0.11); }
.cl-row.cl-shubh .cl-row-name{ color:var(--gold); }

.cl-baat{ font-size:var(--fs-sm); line-height:1.9; color:var(--starlight); margin:0 0 18px; }
.cl-baat a{ color:var(--gold-soft); }

.cl-dhyan{
  padding:14px 18px; margin:0 0 20px; border-radius:0 12px 12px 0;
  font-size:var(--fs-sm); line-height:1.9; color:var(--starlight-dim);
  background:rgba(123,63,196,0.10); border-left:3px solid rgba(212,175,55,0.45);
}
.cl-dhyan strong{ color:var(--starlight); }
.cl-dhyan a{ color:var(--gold-soft); }
.cl-dhyan-gold{ background:rgba(217,180,74,0.10); border-left-color:var(--gold); }
.cl-dhyan-gold strong{ color:var(--gold); }

.cl-seema{
  margin-top:30px; padding:16px 18px; border-radius:12px;
  font-size:var(--fs-fine); line-height:1.9; color:var(--starlight-dim);
  background:rgba(8,6,20,0.5); border:1px solid rgba(212,175,55,0.13);
}

/* Doosre calculators ke link */
.cl-aur{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:16px; }
.cl-aur a{
  display:block; padding:12px 14px; border-radius:11px; min-height:44px;
  background:rgba(26,16,46,0.66); border:1px solid rgba(212,175,55,0.13);
  color:var(--starlight); font-size:var(--fs-sm);
  transition:border-color .16s ease, color .16s ease, background-color .16s ease;
}
.cl-aur a:hover{ border-color:rgba(212,175,55,0.42); color:var(--gold-soft);
  background:rgba(217,180,74,0.08); }

@media (max-width:520px){
  .cl-row{ flex-direction:column; align-items:flex-start; gap:3px; }
  .cl-row-val{ text-align:left; }
  .cl-card-val{ font-size:1.32rem; }
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER — dus column  (23 Aug 2026)
   ═══════════════════════════════════════════════════════════════
   Purana footer ka grid `1.4fr 1fr 1fr 1.2fr` tha — theek CHAAR
   column ke liye. Ab dus hain (brand + 8 shreni + sampark), aur
   fixed column wale niyam me wo ek doosre par chadh jaate.

   `.ft-grid` isliye `auto-fit` + `minmax` use karta hai: column
   ki GINTI jagah se tay hoti hai, likhi hui nahi. Column jodna ya
   hataana ab CSS ka kaam nahi rehta — `footer-data.json` badliye,
   layout apne aap sambhal leta hai.

   `1.6fr` sirf brand ke liye: usme paath hai, link ki suchi nahi,
   isliye use zyada chaudai chahiye. Wo `.ft-brand` par alag se
   lagta hai, poore grid par nahi.

   PURANA `footer.site .wrap` NIYAM ABHI BHI HAI aur wo `.ft-grid`
   se pehle aata hai — isliye yahan specificity ek notch oonchi
   rakhi gayi hai (`footer.site .wrap.ft-grid`), warna purana
   chaar-column wala niyam jeet jaata.
   ═══════════════════════════════════════════════════════════════ */

footer.site .wrap.ft-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(158px, 1fr));
  gap:34px 26px;
  align-items:start;
}
footer.site .ft-brand{
  /* Brand ko do column ki jagah — usme wakya hai, suchi nahi.
     `min(2, …)` jaisa kuch CSS me nahi hota, isliye ye sirf tab
     lagta hai jab jagah sach me ho. */
  grid-column:span 2;
}
@media (max-width:560px){
  footer.site .ft-brand{ grid-column:span 1; }
}

/* Link ki suchi lambi hai, isliye pankti ka gap thoda kam —
   10px x 9 link x 8 column me wo fark dikhta hai. */
footer.site .wrap.ft-grid a{ margin-bottom:8px; font-size:var(--fs-sm); line-height:1.45; }
footer.site .wrap.ft-grid h4{ margin-bottom:13px; }

/* Ungli ke liye poora nishana. Footer ke link paas-paas hote hain
   aur phone par galat link dab jaana yahin sabse zyada hota hai. */
@media (max-width:860px){
  footer.site .wrap.ft-grid a{
    min-height:38px; display:flex; align-items:center; margin-bottom:2px;
  }
}

/* PHONE PAR DO COLUMN — ek nahi.
   `minmax(158px,1fr)` + 26px gap ka matlab hai ki do column ke liye
   342px chahiye. 375px ke phone par wrap ke padding ke baad sirf
   ~319px bachte hain, isliye grid EK column par gir jaata tha — aur
   footer 3646px ka ho jaata tha, yani saade chaar screen sirf link.
   Jo aadmi neeche tak scroll karke aaya hai use wahan deewar nahi,
   raasta milna chahiye.

   Do column me wahi 3646 ghatkar ~1900 ho jaata hai. Naap chhoti
   (128px) aur gap kam (14px) isliye ki 128*2+14 = 270, jo 319 me
   aaram se aa jaata hai — chhote 320px ke phone par bhi.

   Purana `@media (max-width:560px){ footer.site .wrap{1fr} }` abhi
   bhi file me hai aur `.wrap` par lagta hai; ye niyam usse zyada
   khaas hai (`.wrap.ft-grid`) aur baad me aata hai, isliye jeetta
   hai. Use hataya nahi gaya kyunki wo purane footer wale kisi panne
   par abhi bhi kaam aa sakta hai. */
@media (max-width:560px){
  footer.site .wrap.ft-grid{
    grid-template-columns:repeat(2, minmax(128px, 1fr));
    gap:26px 14px;
  }
  footer.site .wrap.ft-grid a{ font-size:var(--fs-fine); }
  /* Brand aur sampark poori chaudai lete hain — unme wakya hai,
     suchi nahi, aur aadhi chaudai me wo tang dikhte hain. */
  footer.site .ft-brand,
  footer.site .wrap.ft-grid > div:last-child{ grid-column:span 2; }
}


/* ═══════════════════════════════════════════════════════════════
   MUHURAT PANNA  (23 Aug 2026)
   ═══════════════════════════════════════════════════════════════
   Is panne par ek hi cheez maayne rakhti hai: TAREEKH aur SAMAY.
   Baaki sab uske aas-paas ka byora hai. Isliye tareekh bade serif
   me hai aur samay `tabular-nums` me — 40-50 card ki kataar me
   ank ek doosre ke theek neeche khade rehte hain.

   `.mh-niyam` ek `<details>` hai, jaan-boojhkar band. Har din ke
   saat-aath niyam khule rakhne par panna ek deewar ban jaata; par
   unhe HATANA bhi galat hota, kyunki wahi cheez ise jaanch-yogya
   banati hai. Band `<details>` dono kaam karta hai: saaf dikhta
   hai, aur sach chhupta nahi.
   ═══════════════════════════════════════════════════════════════ */

.mh-wrap{ max-width:1020px; margin:0 auto; }

.mh-bar{
  display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end;
  padding:16px; margin-bottom:24px;
  background:rgba(123,63,196,0.07);
  border:1px solid rgba(212,175,55,0.16); border-radius:14px;
}
.mh-place{ position:relative; flex:1 1 260px; min-width:0; }
.mh-bar label{
  display:block; font-size:var(--fs-fine); letter-spacing:.08em;
  text-transform:uppercase; color:var(--starlight-dim); margin-bottom:6px;
}
.mh-bar input, .mh-bar select{
  width:100%; padding:11px 13px; border-radius:10px; min-height:44px;
  background:rgba(8,6,20,0.6); color:var(--starlight);
  border:1px solid rgba(212,175,55,0.22);
  font-family:var(--sans); font-size:var(--fs-sm);
}
.mh-city-tag{ display:block; margin-top:6px; font-size:var(--fs-fine); color:var(--gold-soft); }
.mh-results{
  display:none; position:absolute; top:100%; left:0; right:0; z-index:40;
  margin-top:6px; max-height:280px; overflow-y:auto;
  background:rgba(20,13,34,0.99); border:1px solid rgba(212,175,55,0.22);
  border-radius:12px; box-shadow:0 20px 44px rgba(0,0,0,.6);
}
.mh-results.show{ display:block; }

.mh-warn, .mh-chal, .mh-ho-gaya{
  padding:16px 18px; border-radius:12px; line-height:1.8;
  font-size:var(--fs-sm); color:var(--starlight);
  background:rgba(123,63,196,0.10); border:1px solid rgba(212,175,55,0.20);
  margin-bottom:22px;
}
.mh-ho-gaya{ background:rgba(217,180,74,0.10); border-color:rgba(212,175,55,0.35); }
.mh-ho-gaya strong{ color:var(--gold); }

.mh-maas{ margin:0 0 30px; }
.mh-maas h3{
  font-size:1.16rem; margin:0 0 12px; color:var(--gold-soft);
  padding-bottom:8px; border-bottom:1px solid rgba(212,175,55,0.16);
}
.mh-maas h3 small{ color:var(--starlight-dim); font-weight:400; font-size:var(--fs-fine); }

.mh-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:12px; }

.mh-din{
  padding:15px 17px; border-radius:14px;
  background:rgba(26,16,46,0.75); border:1px solid rgba(212,175,55,0.15);
}
.mh-din-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-bottom:5px;
}
.mh-din-date{
  font-family:var(--serif); font-size:1.28rem; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.mh-din-vaar{ font-size:var(--fs-fine); color:var(--starlight-dim); }
.mh-din-ang{ font-size:var(--fs-fine); color:var(--starlight-dim); line-height:1.65; margin-bottom:11px; }

.mh-khidki{ display:flex; flex-direction:column; gap:6px; }
.mh-slot{
  display:flex; flex-direction:column; gap:1px;
  padding:8px 11px; border-radius:9px;
  background:rgba(217,180,74,0.10); border-left:3px solid var(--gold);
}
.mh-slot-time{
  font-weight:600; color:var(--starlight); font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;
}
.mh-slot-name{ font-size:var(--fs-fine); color:var(--starlight-dim); }

.mh-niyam{ margin-top:11px; }
.mh-niyam summary{
  cursor:pointer; font-size:var(--fs-fine); color:var(--gold-soft);
  padding:6px 0; min-height:30px; list-style:none;
}
.mh-niyam summary::-webkit-details-marker{ display:none; }
.mh-niyam summary::before{ content:"▸ "; }
.mh-niyam[open] summary::before{ content:"▾ "; }
.mh-niyam > div{
  padding:8px 0 2px; border-top:1px solid rgba(212,175,55,0.12); margin-top:4px;
}
.mh-niyam-row{
  display:flex; justify-content:space-between; gap:12px;
  font-size:var(--fs-fine); line-height:1.7; padding:3px 0;
  color:var(--starlight-dim);
}
.mh-niyam-row > span:first-child{ color:var(--starlight); flex:none; }
.mh-ok{ text-align:right; }
.mh-no{ text-align:right; color:#E3908C; }

.mh-seema{
  margin-top:30px; padding:16px 18px; border-radius:12px;
  font-size:var(--fs-fine); line-height:1.9; color:var(--starlight-dim);
  background:rgba(8,6,20,0.5); border:1px solid rgba(212,175,55,0.13);
}
.mh-seema a{ color:var(--gold-soft); }

@media (max-width:520px){
  .mh-grid{ grid-template-columns:1fr; }
  /* "Ye din kyun chuna gaya" ka nishana 34px ka tha — ungli ke
     liye 44px chahiye. Ye wahi patti hai jo poore panne ko
     jaanch-yogya banati hai, isliye uska dabna aasan hona
     chahiye, mushkil nahi. */
  .mh-niyam summary{ min-height:44px; display:flex; align-items:center; }
  .mh-din-date{ font-size:1.14rem; }
  .mh-niyam-row{ flex-direction:column; gap:0; }
  .mh-ok, .mh-no{ text-align:left; }
}


/* ═══════════════════════════════════════════════════════════════
   SHOP aur RUDRAKSHA  (23 Aug 2026)
   ═══════════════════════════════════════════════════════════════
   Dukaan ke panne par nazar ek hi cheez dhoondhti hai: "ye kya
   hai aur mere kaam ka hai ya nahi". Isliye har card par teen hi
   cheezein hain — naam, uska graha, aur ek pankti me kaam. Daam
   yahan jaan-boojhkar nahi hai: wo `gemstones` panne par prati
   carat aur quality-tier ke hisaab se hai, aur do jagah daam
   likhna wahi galti hai jisse grahak ek daam dekhkar aata hai
   aur doosra sunta hai.

   Har ratna ka apna rang (`accent`) uske card par ek chhote
   bindu se aata hai — poore card ko rangne se kataar chidiya-ghar
   ban jaati hai aur koi bhi card alag nahi dikhta.
   ═══════════════════════════════════════════════════════════════ */

.sh-wrap{ max-width:980px; margin:0 auto; }
.sh-note{ font-size:var(--fs-sm); color:var(--starlight-dim); line-height:1.85; margin:0 0 18px; }
.sh-note a{ color:var(--gold-soft); }
.sh-warn{
  padding:18px; border-radius:12px; color:var(--starlight);
  background:rgba(123,63,196,0.10); border:1px solid rgba(212,175,55,0.22);
}

/* ── Shreni ke bade tile ─────────────────────────────────────── */
.sh-shreni{ display:grid; grid-template-columns:repeat(auto-fit,minmax(214px,1fr)); gap:14px; }
.sh-tile{
  display:flex; flex-direction:column; gap:5px;
  padding:20px 18px; border-radius:16px; min-height:44px;
  background:rgba(26,16,46,0.78); border:1px solid rgba(212,175,55,0.18);
  color:var(--starlight);
  transition:border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.sh-tile:hover{
  border-color:rgba(212,175,55,0.48); background:rgba(217,180,74,0.08);
  transform:translateY(-2px);
}
.sh-tile-t{ font-family:var(--serif); font-size:1.24rem; color:var(--gold); }
.sh-tile-n{
  font-size:var(--fs-fine); letter-spacing:.09em; text-transform:uppercase;
  color:var(--starlight-dim);
}
.sh-tile-d{ font-size:var(--fs-sm); color:var(--starlight-dim); line-height:1.7; margin-top:4px; }

/* ── Ratna ke card ──────────────────────────────────────────── */
.sh-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:12px; }
.sh-card{
  display:flex; gap:13px; align-items:flex-start;
  padding:15px 17px; border-radius:14px; min-height:44px;
  background:rgba(26,16,46,0.72); border:1px solid rgba(212,175,55,0.14);
  color:var(--starlight);
  transition:border-color .16s ease, background-color .16s ease;
}
.sh-card:hover{ border-color:rgba(212,175,55,0.42); background:rgba(217,180,74,0.07); }
/* Rang sirf ek bindu par — poora card rangne se kataar
   chidiya-ghar ban jaati hai aur koi card alag nahi dikhta. */
.sh-dot{
  flex:none; width:13px; height:13px; border-radius:50%; margin-top:5px;
  box-shadow:0 0 10px currentColor;
}
.sh-card-b{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sh-card-b strong{ font-family:var(--serif); font-size:1.1rem; color:var(--gold-soft); }
.sh-card-en{ font-size:var(--fs-sm); color:var(--starlight); }
.sh-card-b small{ font-size:var(--fs-fine); color:var(--starlight-dim); }
.sh-card-b em{
  font-style:normal; font-size:var(--fs-fine); color:var(--starlight-dim);
  line-height:1.6; margin-top:3px;
}

/* ── Rudraksha ki suchi ─────────────────────────────────────── */
.sh-list{ display:flex; flex-direction:column; gap:10px; }
.sh-rud{
  display:flex; gap:15px; align-items:flex-start;
  padding:16px 18px; border-radius:14px;
  background:rgba(26,16,46,0.7); border:1px solid rgba(212,175,55,0.14);
}
.sh-rud-n{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.28rem; color:var(--gold);
  background:rgba(217,180,74,0.12); border:1px solid rgba(212,175,55,0.34);
  font-variant-numeric:tabular-nums;
}
.sh-rud-b{ min-width:0; }
.sh-rud-b strong{ display:block; font-family:var(--serif); font-size:1.1rem; color:var(--gold-soft); }
.sh-rud-meta{
  display:block; font-size:var(--fs-fine); color:var(--starlight-dim);
  letter-spacing:.02em; margin:2px 0 6px;
}
.sh-rud-b p{ margin:0; font-size:var(--fs-sm); line-height:1.8; color:var(--starlight); }

.sh-seema{
  margin-top:34px; padding:17px 19px; border-radius:12px;
  font-size:var(--fs-fine); line-height:1.9; color:var(--starlight-dim);
  background:rgba(8,6,20,0.5); border:1px solid rgba(212,175,55,0.13);
}
.sh-seema strong{ color:var(--starlight); }

@media (prefers-reduced-motion:reduce){
  .sh-tile{ transition:none; }
  .sh-tile:hover{ transform:none; }
}
@media (max-width:520px){
  .sh-grid{ grid-template-columns:1fr; }
  .sh-rud{ gap:12px; padding:14px; }
  .sh-rud-n{ width:38px; height:38px; font-size:1.1rem; }
}


/* ═══════════════════════════════════════════════════════════════
   TAROT — astrologer.html se nikali gayi (23 Aug 2026)
   ═══════════════════════════════════════════════════════════════
   Ye CSS pehle `astrologer.html` ke inline <style> me thi. Public
   tarot panne ko bilkul YAHI chahiye thi — aur copy kar lena wo
   galti hoti jo is repo me pehle ho chuki hai: do pratilipiyaan ek
   din alag ho jaati hain, aur tab ek jagah card theek dikhta hai
   aur doosri jagah toota, bina kisi ko pata chale ki kaunsi sahi
   hai.

   Isliye nikalkar yahan rakhi gayi aur wahan se hata di gayi.
   Ab dono panne ek hi sach padhte hain.

   `--c`, `--cLine`, `--cDim`, `--cGlow` har card par ALAG hote
   hain — wo suit ke hue se bante hain aur inline style se aate
   hain (dono panno ka `ttVars()`). Isliye unhe yahan tay nahi
   kiya gaya; yahan sirf unka istemal hai.
   ═══════════════════════════════════════════════════════════════ */

/* ── the table itself: felt, not a form ──────────────────────────── */
.tt-felt{ position:relative; border-radius:16px; padding:22px 22px 20px; margin-bottom:16px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(90% 70% at 50% 110%, rgba(120,60,160,.16), transparent 65%),
    linear-gradient(165deg, #1b1636 0%, #120e26 100%);
  border:1px solid rgba(212,175,55,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 26px rgba(0,0,0,.35); }
.tt-felt::before{ content:""; position:absolute; inset:7px; border-radius:11px;
  border:1px solid rgba(212,175,55,.13); pointer-events:none; }

.tt-head{ display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.tt-mark{ width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center;
  border:1px solid rgba(212,175,55,.4); border-radius:50%; color:var(--gold);
  font-size:1.1rem; background:rgba(212,175,55,.07); }
.tt-head h3{ margin:0; font-family:var(--serif); font-size:1.22rem; letter-spacing:.01em; }
.tt-head p{ margin:1px 0 0; font-size:.84rem; color:var(--starlight-dim);
  letter-spacing:.05em; text-transform:uppercase; }

.tt-step{ margin-bottom:18px; }
.tt-q{ display:block; font-size:.79rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:9px; }

/* size tiles — the layout is drawn, so nothing needs explaining */
.tt-picks{ display:flex; gap:10px; flex-wrap:wrap; }
.tt-pick{ flex:1 1 130px; min-width:120px; background:rgba(0,0,0,.26); cursor:pointer;
  border:1px solid rgba(212,175,55,.2); border-radius:11px; padding:13px 12px 11px;
  text-align:left; transition:border-color .16s, background .16s, transform .16s; }
.tt-pick:hover{ border-color:rgba(212,175,55,.5); transform:translateY(-1px); }
.tt-pick.on{ border-color:var(--gold); background:rgba(212,175,55,.11); }
.tt-pick:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.tt-shape{ display:flex; gap:3px; align-items:flex-end; height:22px; margin-bottom:9px; }
.tt-shape i{ display:block; width:9px; height:14px; border-radius:2px;
  background:rgba(212,175,55,.28); border:1px solid rgba(212,175,55,.4); }
.tt-pick.on .tt-shape i{ background:rgba(212,175,55,.55); }
.tt-shape.cross{ display:grid; grid-template-columns:repeat(4,9px); gap:3px; height:auto; }
.tt-pick b{ display:block; font-family:var(--serif); font-size:1rem; color:var(--starlight); }
.tt-pick span{ display:block; font-size:.81rem; color:var(--starlight-dim); margin-top:1px; }

/* the three-card variants, named by their own positions */
.tt-kinds{ display:flex; gap:8px; flex-wrap:wrap; }
.tt-kind{ background:rgba(0,0,0,.22); border:1px solid rgba(212,175,55,.16);
  border-radius:22px; padding:7px 14px; cursor:pointer; font-size:.88rem;
  color:var(--starlight-dim); transition:border-color .16s, color .16s; }
.tt-kind:hover{ border-color:rgba(212,175,55,.45); color:var(--starlight); }
.tt-kind.on{ border-color:var(--gold); color:var(--gold); background:rgba(212,175,55,.09); }
.tt-kind:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.tt-kind em{ font-style:normal; opacity:.85; }

/* one clear action */
.tt-go{ margin-top:4px; text-align:center; }
.tt-deal{ display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--serif); font-size:1.02rem; letter-spacing:.02em; color:#171227;
  background:linear-gradient(135deg,#E8CE72,#C9A227); border:0; border-radius:30px;
  padding:12px 30px; box-shadow:0 4px 16px rgba(201,162,39,.28);
  transition:transform .16s, box-shadow .16s; }
.tt-deal:hover{ transform:translateY(-1px); box-shadow:0 7px 22px rgba(201,162,39,.4); }
.tt-deal:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.tt-deal-i{ font-size:.95rem; }
.tt-alt-row{ display:flex; gap:16px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin-top:11px; }
.tt-link{ background:none; border:0; cursor:pointer; font-size:.87rem; padding:2px 0;
  color:var(--starlight-dim); border-bottom:1px dotted rgba(212,175,55,.4); }
.tt-link:hover{ color:var(--gold-soft); }
.tt-link:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.tt-rev-t{ display:inline-flex; align-items:center; gap:6px; font-size:.87rem;
  color:var(--starlight-dim); cursor:pointer; }
.tt-hint{ font-size:.86rem; color:var(--starlight-dim); text-align:center; margin:14px 0 0; }
.tt-hint b{ color:var(--gold-soft); }
@media (max-width:520px){
  .tt-felt{ padding:18px 15px 17px; }
  .tt-pick{ flex:1 1 100%; }
  .tt-deal{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){ .tt-pick,.tt-deal{ transition:none; } }

/* ── the card ────────────────────────────────────────────────
   An engraved plate, not a photograph. Marseille-style: rule frame,
   rank at two corners, suit marks arranged symmetrically, title struck
   below. Sizes for the SVGs live on the elements themselves so a missing
   CSS rule can never fall back to the 300x150 default again. */
.tt-card{ position:relative; width:118px; aspect-ratio:1112/1920; perspective:900px;
  cursor:pointer; background:none; border:0; padding:0; display:block; }
.tt-inner{ position:absolute; inset:0; transition:transform .6s cubic-bezier(.2,.85,.3,1);
  transform-style:preserve-3d; }
.tt-card.up .tt-inner{ transform:rotateY(180deg); }
.tt-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:8px;
  overflow:hidden; }

/* back — a woven guilloche, the way a real deck hides its faces */
.tt-back{ border:1px solid rgba(212,175,55,.34);
  background:
   radial-gradient(circle at 50% 30%, rgba(212,175,55,.24), transparent 58%),
   repeating-linear-gradient(45deg,  rgba(212,175,55,.11) 0 1.5px, transparent 1.5px 7px),
   repeating-linear-gradient(-45deg, rgba(212,175,55,.11) 0 1.5px, transparent 1.5px 7px),
   linear-gradient(158deg,#191537,#0b0919); }
.tt-back i{ position:absolute; inset:7px; border:1px solid rgba(212,175,55,.26);
  border-radius:4px; display:grid; place-items:center; font-style:normal;
  font-size:1.35rem; color:rgba(212,175,55,.55); }
.tt-back i::after{ content:""; position:absolute; inset:4px;
  border:1px solid rgba(212,175,55,.13); border-radius:2px; }

/* front */
.tt-front{ transform:rotateY(180deg);
  background:linear-gradient(168deg,#14112b 0%,#0d0b1e 100%);
  border:1px solid rgba(212,175,55,.30); padding:5px; }
.tt-card.rev .tt-front{ transform:rotateY(180deg) rotate(180deg); }

.tc-plate{ position:relative; height:100%; border:1px solid var(--cLine);
  border-radius:4px; display:flex; flex-direction:column;
  padding:15px 6px 4px; box-shadow:inset 0 0 0 3px rgba(0,0,0,.28); }
.tc-rank{ position:absolute; font-family:var(--serif); font-size:.62rem;
  letter-spacing:.04em; color:var(--c); line-height:1; }
.tc-rank.tl{ top:4px; left:6px; }
.tc-rank.br{ bottom:15px; right:6px; transform:rotate(180deg); }

/* pip field — absolute placement, so the arrangement is exact */
.tc-field{ position:relative; flex:1; margin:1px 2px; }
.tc-pip{ position:absolute; transform:translate(-50%,-50%); color:var(--c);
  line-height:0; }
.tc-pip.tc-flip{ transform:translate(-50%,-50%) rotate(180deg); }

/* majors */
.tc-emblem{ flex:1; display:grid; place-items:center; color:var(--c); }
.tc-emblem svg{ filter:drop-shadow(0 0 7px var(--cGlow)); }

/* court */
.tc-court{ flex:1; display:grid; place-items:center; }
.tc-cart{ display:grid; place-items:center; width:44px; height:56px;
  border:1px solid var(--cLine); border-radius:26px 26px 5px 5px; color:var(--c);
  box-shadow:inset 0 0 12px rgba(0,0,0,.45); }

.tc-title{ font-size:.5rem; letter-spacing:.09em; text-transform:uppercase;
  text-align:center; color:var(--cDim); line-height:1.3; padding-top:2px;
  border-top:1px solid var(--cLine); margin-top:2px; }

.tt-card.caution .tt-front{ border-color:rgba(232,91,107,.55); }
.tt-card.caution .tc-plate{ border-color:rgba(232,91,107,.45); }

.tt-rev{ position:absolute; top:4px; right:4px; z-index:3; font-size:.56rem;
  background:rgba(0,0,0,.7); border:1px solid rgba(212,175,55,.4); border-radius:20px;
  padding:1px 6px; color:var(--gold-soft); letter-spacing:.04em; }



/* real scans sit edge to edge; the drawn plate only shows if one fails */
.tc-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  border-radius:6px; display:block; background:#f4efe2; }
.tc-alt{ display:none; position:absolute; inset:0; }
.tt-front.tc-fallback .tc-alt{ display:block; }
.tt-front:has(.tc-img){ padding:2px; background:#0d0b1e; }



/* read-out: meaning first, formula last */
.tt-item h4 .slot{ color:var(--gold-soft); font-weight:400; }
.tt-ul{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid rgba(212,175,55,.45); border-radius:20px; padding:1px 7px;
  color:var(--gold-soft); margin-left:6px; vertical-align:2px; }
.tt-mean{ font-size:1rem; color:var(--starlight); line-height:1.65; margin:6px 0 0; }
.tt-pos{ font-size:.93rem; color:var(--starlight-dim); margin:7px 0 0; }
.tt-pos b{ color:var(--gold-soft); font-weight:600; }
.tt-say{ margin:11px 0 0; padding:11px 14px; border-left:2px solid var(--gold);
  background:rgba(212,175,55,.07); border-radius:0 8px 8px 0;
  font-family:var(--serif); font-size:1rem; color:var(--starlight); line-height:1.6; }
.tt-say-l{ display:block; font-family:var(--sans); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-soft); margin-bottom:5px; }
.tt-rev-n{ font-size:.87rem; color:var(--starlight-dim); margin:8px 0 0; }
.tt-why{ font-size:.81rem; color:var(--starlight-dim); opacity:.82; margin:8px 0 0; }
.tt-slotnote{ font-size:.9rem; color:var(--gold-soft); margin:8px 0 0; }
.tt-story{ margin-top:20px; padding:15px 18px; border:1px solid rgba(212,175,55,.3);
  border-radius:12px; background:rgba(212,175,55,.06); font-size:.97rem;
  color:var(--starlight); line-height:1.65; }
.tt-story b{ color:var(--gold-soft); }

/* card name, struck below the plate once it is turned */
.tt-name{ margin-top:7px; font-family:var(--serif); font-size:.84rem; line-height:1.3;
  text-align:center; color:var(--starlight); min-height:2.1em;
  opacity:0; transition:opacity .3s ease .2s; }
/* keyed off the CARD's own state, not a parent class -- the parent was
   being re-created by each new deal, so the name stayed invisible. */
.tt-slot:has(.tt-card.up) .tt-name{ opacity:1; }
.tt-slot.open .tt-name{ opacity:1; }
.tt-name .r{ display:block; font-family:var(--sans); font-size:.64rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--gold-soft); margin-top:1px; }
@media (prefers-reduced-motion: reduce){ .tt-name{ transition:none; } }

/* ── the fan: 78 backs, laid out to be picked from ───────────────── */
.tt-fan{ display:flex; overflow-x:auto; padding:16px 10px 18px; gap:0;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.tt-fan::-webkit-scrollbar{ height:6px; }
.tt-fan::-webkit-scrollbar-thumb{ background:rgba(212,175,55,.3); border-radius:3px; }
.tt-fb{ flex:0 0 auto; width:46px; height:79px; margin-right:-24px; border-radius:5px;
  border:1px solid rgba(212,175,55,.30); cursor:pointer; padding:0; position:relative;
  background:
   radial-gradient(circle at 50% 30%, rgba(212,175,55,.22), transparent 60%),
   repeating-linear-gradient(45deg, rgba(212,175,55,.10) 0 1.5px, transparent 1.5px 7px),
   linear-gradient(158deg,#191537,#0b0919);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.tt-fb:last-child{ margin-right:0; }
.tt-fb:hover, .tt-fb:focus-visible{ transform:translateY(-12px);
  box-shadow:0 6px 18px rgba(0,0,0,.5); z-index:2; outline:none;
  border-color:rgba(212,175,55,.7); }
.tt-fb.taken{ opacity:.18; pointer-events:none; transform:translateY(4px); }
.tt-fb i{ position:absolute; inset:4px; border:1px solid rgba(212,175,55,.2);
  border-radius:3px; }
.tt-pickbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:.91rem; color:var(--starlight-dim); }
.tt-pickbar b{ color:var(--gold-soft); }
.tt-count{ font-family:var(--serif); font-size:1.15rem; color:var(--gold); }

/* ── read-out ────────────────────────────────────────────────── */
.tt-read{ margin-top:20px; }
.tt-item{ border-top:1px solid var(--line); padding:14px 0; }
.tt-item h4{ margin:0 0 3px; font-size:.99rem; }
.tt-item h4 .slot{ color:var(--gold-soft); font-weight:400; }
.tt-item .sense{ color:var(--starlight-dim); font-size:.93rem; margin:0; }
.tt-item .deriv{ font-size:.86rem; color:var(--starlight-dim); opacity:.9; margin:5px 0 0; }
.tt-warn{ background:rgba(232,91,107,.08); border:1px solid rgba(232,91,107,.45);
  border-radius:12px; padding:16px 18px; margin:16px 0; font-size:.95rem; }
.tt-warn b{ color:#E85B6B; }
.tt-warn ol{ margin:8px 0 0; padding-left:20px; }
.tt-warn li{ margin-bottom:5px; }
.tt-pat{ background:rgba(212,175,55,.07); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; margin:16px 0; font-size:.93rem; }
.tt-pat li{ margin-bottom:6px; }
.tt-revkey{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.tt-revkey span{ font-size:.8rem; border:1px solid var(--line); border-radius:16px;
  padding:3px 9px; color:var(--starlight-dim); }
@media (max-width:520px){
  .tt-slot, .tt-card{ width:100px; }
  .tt-bar select{ min-width:100%; }
}
@media (prefers-reduced-motion: reduce){ .tt-inner{ transition:none; } }

/* ── Public tarot panna — naye hisse ───────────────────────────
   Baaki poora roop upar wale (astrologer.html se nikale gaye)
   block se aata hai. Yahan sirf wo cheezein hain jo public panne
   par nayi hain: card ki mez, slot ka naam, aur "dobara kheench
   rahe hain" wali patti. */
.tt-wrap{ max-width:920px; margin:0 auto; }
.tt-bar{
  display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end;
  padding:16px; margin-bottom:26px;
  background:rgba(123,63,196,0.07);
  border:1px solid rgba(212,175,55,0.16); border-radius:14px;
}
.tt-bar label{
  display:block; font-size:var(--fs-fine); letter-spacing:.08em;
  text-transform:uppercase; color:var(--starlight-dim); margin-bottom:6px;
}
.tt-bar select{
  width:100%; padding:11px 13px; border-radius:10px; min-height:44px;
  background:rgba(8,6,20,0.6); color:var(--starlight);
  border:1px solid rgba(212,175,55,0.22);
  font-family:var(--sans); font-size:var(--fs-sm);
}
.tt-bar > div{ flex:1 1 220px; min-width:0; }
.tt-revline{ display:flex; align-items:center; gap:9px; font-size:var(--fs-sm);
  color:var(--starlight-dim); min-height:44px; }

/* Card ki mez — Celtic Cross me 10 card aate hain, isliye ye
   wrap karti hai aur phone par bhi kabhi bahar nahi nikalti. */
.tt-table{
  display:flex; flex-wrap:wrap; gap:18px 14px;
  justify-content:center; margin:22px 0 6px;
}
.tt-slot{ width:118px; text-align:center; }
.tt-slotname{
  margin-top:4px; font-size:var(--fs-fine); letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold-soft);
}
.tt-spread-name{ font-size:1.3rem; margin:0 0 4px; }
.tt-again{
  padding:13px 16px; margin-bottom:18px; border-radius:0 12px 12px 0;
  font-size:var(--fs-sm); line-height:1.85; color:var(--starlight-dim);
  background:rgba(123,63,196,0.12); border-left:3px solid var(--gold);
}
.tt-again strong{ color:var(--gold); }
.tt-seema{
  margin-top:32px; padding:16px 18px; border-radius:12px;
  font-size:var(--fs-fine); line-height:1.9; color:var(--starlight-dim);
  background:rgba(8,6,20,0.5); border:1px solid rgba(212,175,55,0.13);
}
.tt-seema strong{ color:var(--starlight); }
.tt-seema a{ color:var(--gold-soft); }

@media (max-width:520px){
  .tt-table{ gap:14px 10px; }
  .tt-slot{ width:100px; }
}

/* ═══════════════════════════════════════════════════════════════
   "APNI KUNDLI SAVE KIJIYE"  (23 Aug 2026)
   ═══════════════════════════════════════════════════════════════
   Ye patti natije ke THEEK UPAR aati hai — us ek pal par jab kundli
   ban chuki hai aur usko khone ka dar sabse zyada hai. Nav ka Login
   button koi nahi dabata; ye jagah dabai jaati hai.

   `.sk-fine` jaan-boojhkar CHHOTA nahi hai. Usme likha hai ki kaunsa
   button kya karta hai — aur ek "account me save" ka matlab hai ki
   kisi ka janm vivran server par jaayega. Us baat ko 10px me chhupa
   dena wahi jagah hai jahan bharosa ek baar me khatam hota hai.
   Isliye wo baaki paath jitni hi padhne yogya hai.
   ═══════════════════════════════════════════════════════════════ */

.sk-wrap{
  margin:0 0 24px; padding:18px 20px; border-radius:14px;
  background:rgba(217,180,74,0.08);
  border:1px solid rgba(212,175,55,0.28);
}
.sk-head{
  font-family:var(--serif); font-size:1.16rem; color:var(--gold); margin-bottom:5px;
}
.sk-note{ font-size:var(--fs-sm); color:var(--starlight); line-height:1.75; margin:0 0 14px; }
.sk-btns{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.sk-btns .btn{ min-height:44px; }
/* Ye chhota nahi hai — yahi wo baat hai jispar sahmati tikti hai. */
.sk-fine{
  font-size:var(--fs-fine); line-height:1.85; color:var(--starlight-dim);
  margin:0; padding-top:11px; border-top:1px solid rgba(212,175,55,0.16);
}
.sk-fine strong{ color:var(--starlight); }
.sk-msg{ font-size:var(--fs-sm); line-height:1.75; margin-top:11px; }
.sk-msg:empty{ display:none; }
.sk-msg.sk-ok{ color:var(--gold-soft); }
.sk-msg.sk-no{ color:#E3908C; }
.sk-msg a{ color:var(--gold-soft); }

.sk-saved{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:12px; font-size:var(--fs-fine); color:var(--starlight-dim);
}
.sk-chip{
  background:rgba(26,16,46,0.8); border:1px solid rgba(212,175,55,0.26);
  color:var(--starlight); border-radius:var(--radius-pill);
  padding:7px 14px; min-height:36px; cursor:pointer;
  font-family:var(--sans); font-size:var(--fs-fine);
  transition:border-color .16s ease, color .16s ease;
}
.sk-chip:hover{ border-color:var(--gold); color:var(--gold-soft); }
.sk-chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

@media (max-width:520px){
  .sk-btns .btn{ flex:1 1 100%; }
}


/* ═══════════════════════════════════════════════════════════════
   NAVBAR — DOOSRA ROOP  (23 Aug 2026)
   ═══════════════════════════════════════════════════════════════
   YE EK ASLI TOOT-PHOOT KA SUDHAR HAI.

   Maine dropdown 13 tak badha diye the par right side (bhasha +
   login + Book Reading) ki jagah ka hisaab nahi kiya. Live naap
   par:

       chahiye  1583px      mili  1385px      -> 198px kam
       natija   brand, nav aur CTA ek doosre par chadh rahe the
                (5 jodi overlap me)

   Teen cheezein badli:
     1. Top-level 13 se 7 — bade menu ab sub-shirshak wale column
        me bant gaye hain.
     2. Bhasha ka switcher teen alag button se ek chhote dropdown
        me. (3 button = ~150px, ab ~74px)
     3. Login ka poora naam hata kar ek gol avatar — logged-in
        hone par uski Google DP. Naam ki chaudai badalti rehti hai,
        isliye wo header ko har user par alag naap deta tha; gol
        avatar hamesha 38px ka hai.

   Ab: brand 177 + nav ~610 + CTA ~280 = ~1067px, 1385 me. Poori
   jagah bachi hui hai — aur wahi is sudhaar ka poora maqsad tha.
   ═══════════════════════════════════════════════════════════════ */

/* ── Sub-shirshak wale column ────────────────────────────────── */
@media (min-width:1300px){
  .nav-grp[data-cols] .nav-menu{
    display:none;                       /* niyam neeche hover par grid */
    grid-template-columns:repeat(var(--cols,2), minmax(196px,1fr));
    width:max-content; max-width:min(94vw, 760px);
    gap:0 22px; padding:18px;
  }
  .nav-grp[data-cols="2"] .nav-menu{ --cols:2; }
  .nav-grp[data-cols="3"] .nav-menu{ --cols:3; }
  .nav-grp:hover > .nav-menu,
  .nav-grp:focus-within > .nav-menu,
  .nav-grp.open > .nav-menu{ display:grid; }

  .nav-col{ display:flex; flex-direction:column; min-width:0; }
  /* Shirshak `<span>` hai, heading tag nahi — ye nav ki suchi hai,
     panne ka dhaancha nahi. `<h4>` daalne se screen-reader ka
     heading-naksha jhootha ho jaata. */
  .nav-col-t{
    font-size:var(--fs-fine); letter-spacing:.13em; text-transform:uppercase;
    color:var(--gold); padding:2px 14px 8px;
    border-bottom:1px solid rgba(212,175,55,0.18); margin-bottom:6px;
  }
}

/* ── Bhasha ka dropdown ──────────────────────────────────────── */
/* Purana switcher teen alag button dikhata tha ("Hinglish हिंदी EN")
   jo ~150px kha jaate the. Ab ek chhota pill jo dabne par khulta
   hai — wahi teen vikalp, ek-chauthai jagah me. */
.lang-dd{ position:relative; display:inline-flex; }
.lang-dd-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 12px; min-height:40px; cursor:pointer;
  background:rgba(0,0,0,.24); color:var(--starlight-dim);
  border:1px solid rgba(212,175,55,.3); border-radius:var(--radius-pill);
  font-family:var(--sans); font-size:var(--fs-fine); letter-spacing:.04em;
  transition:border-color .16s ease, color .16s ease;
}
.lang-dd-btn:hover{ border-color:rgba(212,175,55,.6); color:var(--gold-soft); }
.lang-dd-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.lang-dd-globe{ width:15px; height:15px; flex:none; opacity:.85; }
.lang-dd-cur{ font-weight:600; }
.lang-dd-menu{
  display:none; position:absolute; top:100%; right:0; z-index:130;
  margin-top:8px; min-width:172px; padding:7px;
  background:rgba(20,13,34,.985);
  border:1px solid rgba(212,175,55,.2); border-radius:13px;
  box-shadow:0 2px 6px rgba(0,0,0,.4), 0 22px 52px -12px rgba(0,0,0,.75);
}
.lang-dd.open .lang-dd-menu{ display:block; }
.lang-dd-menu a, .lang-dd-menu button{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:10px 12px; min-height:42px; border-radius:9px;
  background:none; border:0; cursor:pointer; text-align:left;
  color:var(--starlight); font-family:var(--sans); font-size:var(--fs-sm);
}
.lang-dd-menu a:hover, .lang-dd-menu button:hover{
  background:rgba(217,180,74,.13); color:var(--gold-soft);
}
.lang-dd-menu a.active{ color:var(--gold); font-weight:600; }
.lang-dd-menu a.active::after{ content:"✓"; color:var(--gold); }
/* Jo bhasha is panne par nahi hai — vikalp dikhta hai par halka.
   Chhupa dena bhi ek raasta tha, par tab visitor ko kabhi pata hi
   nahi chalta ki wo bhasha aati hai. */
.lang-dd-menu button.lang-na{ color:var(--starlight-dim); opacity:.62; }
.lang-dd-menu button.lang-na::after{ content:"—"; opacity:.5; }

/* ── Login — gol avatar, naam nahi ───────────────────────────── */
/* Naam ki chaudai har user par alag hoti hai ("Ravi" vs
   "Chandrashekhar"), isliye wo header ko har visitor par alag naap
   deta tha — aur lambe naam par CTA bahar nikal jaata tha. Gol
   avatar hamesha theek 38px ka hai. */
#ktNavAuth.kt-avatar{
  width:38px; height:38px; flex:none; padding:0;
  border-radius:50%; overflow:hidden; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.28); border:1px solid rgba(212,175,55,.34);
  color:var(--starlight-dim); font-size:0;
  transition:border-color .16s ease, background-color .16s ease;
}
#ktNavAuth.kt-avatar:hover{ border-color:var(--gold); background:rgba(217,180,74,.12); }
#ktNavAuth.kt-avatar:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
#ktNavAuth.kt-avatar svg{ width:19px; height:19px; }
#ktNavAuth.kt-avatar img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;
}

/* ── Header ki apni jagah ────────────────────────────────────── */
@media (min-width:1300px){
  .nav-cta{ gap:9px; }
}

/* ── Chhote phone par header ka hisaab ────────────────────────
   320px par header me chaar cheezein thin: bhasha ka pill (87),
   avatar (38), Book Reading, aur hamburger (34) — brand (101) ke
   saath. Bacha hua sab Book Reading ne khaya aur wo 26px ka reh
   gaya, jabki uske paath ko 45px chahiye. Yani wo button dikhta to
   tha par padha nahi jaata tha — aur ek kata hua button click bhi
   nahi hota.

   Isliye 380px se neeche wo header se HAT jaata hai. Wo kahin kho
   nahi raha: har panne par apne CTA hain, aur slide-out menu me
   poora raasta maujood hai. Ek nikamma 26px ka thoothi rakhne se
   use hata dena behtar hai. */
@media (max-width:379px){
  .nav-cta > .btn-primary{ display:none; }
}

/* Hamburger ka nishana 44px — 24px tha, jo ungli ke liye chhota hai
   aur ye har panne par sabse zyada dabaya jaane wala button hai. */
@media (max-width:1299px){
  .nav-toggle{
    min-width:44px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
  }
}

/* Phone par bhasha ka pill aur avatar bhi poore 44px ke — ungli ka
   nyoontam nishana. Header 4px lamba hota hai, aur ye dono sabse
   zyada dabaye jaane wale hain. */
@media (max-width:1299px){
  .lang-dd-btn{ min-height:44px; }
  #ktNavAuth.kt-avatar{ width:44px; height:44px; }
  #ktNavAuth.kt-avatar svg{ width:21px; height:21px; }
}

/* ── Phone par sub-shirshak ─────────────────────────────────────
   `.nav-col-t` ki CSS sirf `@media (min-width:1300px)` ke andar thi.
   Mobile ke accordion me wo saade paath jaise dikhte — link se alag
   pehchane hi nahi jaate, aur "Readings / Pooja aur Anushthan /
   Baat kijiye" wala poora faayda khatam ho jaata.

   Isliye phone par unhe apna roop diya gaya hai: gold, chhota,
   uppercase, aur upar ek patli rekha jo ek shreni ko doosri se
   alag karti hai. Pehle shirshak par rekha nahi (wo accordion ke
   sir se hi lag jaati hai). */
@media (max-width:1299px){
  .nav-col{ display:block; }
  .nav-col-t{
    display:block; text-align:center;
    font-family:var(--sans); font-size:var(--fs-fine);
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--gold); opacity:.9;
    padding:14px 6px 7px; margin-top:6px;
    border-top:1px solid rgba(212,175,55,0.16);
  }
  .nav-col:first-child .nav-col-t{ border-top:none; margin-top:0; padding-top:6px; }
}

/* ═══════════════════════════════════════════════════════════════
   PORTAL PAR "APNA PROFILE BANAIYE"  (23 Aug 2026)
   ═══════════════════════════════════════════════════════════════
   Ye form dono portal par ek jaisa hai — astrologer aur student.

   `.pa-fine` jaan-boojhkar chhota nahi hai. Usme likha hai ki
   manzoori tak portal nahi khulega aur ye jaanch SERVER par hoti
   hai. Wo baat aavedak ko pehle se pata honi chahiye, baad me
   nahi — warna wo form bharkar aage ka intezaar karta hai aur use
   lagta hai kuch toot gaya.
   ═══════════════════════════════════════════════════════════════ */

.pa-wrap{
  padding:22px; border-radius:16px;
  background:rgba(26,16,46,0.72);
  border:1px solid rgba(212,175,55,0.22);
}
.pa-h{ margin:0 0 6px; font-family:var(--serif); font-size:1.24rem; color:var(--gold); }
.pa-note{ margin:0 0 18px; font-size:var(--fs-sm); line-height:1.8; color:var(--starlight-dim); }
.pa-note a{ color:var(--gold-soft); }

.pa-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:13px; }
.pa-khet{ min-width:0; display:flex; flex-direction:column; }
.pa-khet.pa-wide{ grid-column:1 / -1; }
.pa-khet label{
  font-size:var(--fs-fine); letter-spacing:.07em; text-transform:uppercase;
  color:var(--starlight-dim); margin-bottom:6px;
}
/* "zaroori" ka nishan — rang se nahi, shabd se. Sirf rang par
   tikaana un logon ke liye kuch nahi kehta jinhe rang me farak
   nahi dikhta. */
.pa-khet label em{
  font-style:normal; color:var(--gold); letter-spacing:.04em;
  text-transform:none; font-size:.92em;
}
.pa-khet input, .pa-khet textarea{
  width:100%; padding:11px 13px; border-radius:10px; min-height:44px;
  background:rgba(8,6,20,0.6); color:var(--starlight);
  border:1px solid rgba(212,175,55,0.22);
  font-family:var(--sans); font-size:var(--fs-sm); line-height:1.6;
}
.pa-khet textarea{ resize:vertical; }
.pa-wrap .btn{ margin-top:18px; min-height:44px; }

.pa-msg{ margin:12px 0 0; font-size:var(--fs-sm); line-height:1.75; }
.pa-msg:empty{ display:none; }
.pa-msg.pa-no{ color:#E3908C; }
.pa-msg strong{ color:var(--starlight); }

.pa-fine{
  margin:16px 0 0; padding-top:14px;
  border-top:1px solid rgba(212,175,55,0.16);
  font-size:var(--fs-fine); line-height:1.85; color:var(--starlight-dim);
}
.pa-fine strong{ color:var(--starlight); }

@media (max-width:520px){
  .pa-wrap{ padding:17px; }
  .pa-grid{ grid-template-columns:1fr; }
}


/* CHHAPAI — kagaz safed hota hai, aur wahi halka sona wahan phika pad
   jaata hai. Chinh ka rang gehra kar dete hain; ghera aur chamak hata
   dete hain, kyunki kaale panne ke liye bani chamak kagaz par sirf ek
   dhundhla dhabba chhapti hai. */
@media print{
  .brand .glyph{ box-shadow:none; border-color:#7a5c00; background:none; }
  .brand .glyph::after{ background:#7a5c00; }
}