/* ==========================================================================
   Chanakya Astro — site-wide stylesheet
   Palette: maroon (#a0121e, #b8121f), gold (#f2c14e, #c9922b, #e5811a),
            dark (#2a0a0c, #0e0407), muted text (#241f2b, #5b5567, #8b8598)
   Type:    100% system fonts — no external CDN, no @font-face downloads.
            Every modern OS ships fonts that render Tamil / Devanagari /
            Telugu / Malayalam / Kannada natively. The font stack lists
            system UI first and falls through to each OS's Indic fonts.
   ========================================================================== */

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

:root {
  --maroon: #a0121e;
  --maroon-2: #b8121f;
  --gold: #f2c14e;
  --gold-2: #c9922b;
  --orange: #e5811a;
  --dark: #2a0a0c;
  --darker: #0e0407;
  --cream: #fff8ea;
  --paper: #fbf1dd;
  --border: #e0e6f0;
  --text: #0f0b16;
  --text-2: #2f2a3a;
  --text-3: #5b5567;
  --band-grad: linear-gradient(135deg, #f5c344 0%, #e5811a 46%, #b8121f 100%);
  --hero-grad: linear-gradient(112deg, #2a0a0c, #7a0f1c 55%, #b8121f 100%);

  /* Self-contained font stacks — every family below ships with an OS:
       system-ui / -apple-system / Segoe UI / Roboto : Latin OS UI
       Nirmala UI               : Windows Indic (Tamil, Devanagari, Telugu, ML, KN)
       Noto Sans Tamil / etc    : ChromeOS, Android, most Linux
       Kohinoor Tamil / Devanagari : macOS / iOS
       Latha / Vrinda / Gautami / Kartika / Tunga : legacy Windows */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto,
               "Noto Sans", "Noto Sans Tamil", "Noto Sans Devanagari",
               "Noto Sans Telugu", "Noto Sans Malayalam", "Noto Sans Kannada",
               "Nirmala UI", "Kohinoor Tamil", "Kohinoor Devanagari",
               "Latha", "Vrinda", "Gautami", "Kartika", "Tunga",
               Arial, sans-serif;
  --font-head: var(--font-body);
}

/* English pages read better in a serif face — Georgia ships on every OS,
   so no webfont download is needed. Other languages keep the system stack
   above since Georgia has no Tamil/Devanagari/Telugu/Malayalam/Kannada glyphs. */
body[data-lang="en"] {
  --font-body: Georgia, "Times New Roman", Times, serif;
  --font-head: Georgia, "Times New Roman", Times, serif;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #ffffff;
  color: #1a1420;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
p, li, td, th, label, div, span { color: inherit; }
p { color: #1a1420; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--maroon);
  margin: 0 0 8px;
}
a { color: var(--maroon); text-decoration: none; }
a:hover { color: var(--orange); }
img { max-width: 100%; display: block; }
input, select, textarea, button { font: inherit; }
input:focus-visible, select:focus-visible, button:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-2); outline-offset: 2px;
}
::selection { background: #f4e2bd; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* --- Header --- */
.site-header {
  background: #fff;
  border-bottom: 2px solid transparent;
  background-image: linear-gradient(#fff, #fff),
    linear-gradient(90deg, #b8121f 0%, #1e7a3c 50%, #1a56db 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  position: sticky; top: 0; z-index: 100;
}
.hdr-wrap { max-width: 1280px; margin: 0 auto; padding: 12px 18px; display: flex; align-items: center; gap: 20px; }
/* flex:1 1 auto + min-width:0 lets the brand name truncate instead of
   overflowing — on narrow phones the long bilingual name was pushing the
   language switcher and hamburger button off-screen entirely (flex:none
   forbade this element from ever shrinking, and .hdr-wrap doesn't wrap). */
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
.brand-omega {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--gold-2);
  background: linear-gradient(140deg, #ffdf8f, #f2b127 55%, #e0801a);
  display: grid; place-items: center; color: #7a0f1c;
  font-size: 20px; font-weight: 700; flex: none;
}
.brand > span { min-width: 0; overflow: hidden; }
.brand-name {
  font-family: var(--font-head);
  font-size: 24px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
  background: linear-gradient(100deg, #b8121f 0%, #e5811a 60%, #d99a20 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-tag { font-size: 11px; font-weight: 600; color: var(--gold-2); letter-spacing: 0.04em; margin-top: 1px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-search { flex: 1; display: flex; max-width: 400px; margin: 0 auto; }
.nav-search input {
  flex: 1; padding: 10px 14px; font-size: 13px;
  border: 1px solid var(--border); border-right: none;
  border-radius: 6px 0 0 6px; background: #fff; color: #3a2a22;
}
.nav-search button {
  padding: 11px 20px; font-size: 14px; font-weight: 700; color: var(--cream);
  background: var(--band-grad); border: none;
  border-radius: 0 6px 6px 0;
}
.nav-auth { display: flex; align-items: center; gap: 16px; flex: none; }
.nav-auth a {
  font-size: 14px; font-weight: 600; color: var(--maroon);
  display: flex; align-items: center; gap: 6px;
}
.nav-auth a.btn { color: var(--cream); display: inline-flex; }
.nav-auth a.btn-ghost, .nav-auth a.btn-secondary { color: var(--maroon); }
.nav-lang {
  font-size: 12px; padding: 5px 7px;
  border: 1px solid var(--border); border-radius: 4px;
  background: #fff; color: var(--maroon);
}
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 8px; margin-left: auto; flex: none;
}
.nav-hamburger span {
  width: 24px; height: 2px; background: var(--maroon); border-radius: 2px; display: block;
}

.nav-main {
  max-width: 1280px; margin: 0 auto; padding: 0 18px;
  display: flex; justify-content: space-evenly;
  font-size: 14px; font-weight: 600;
  font-family: var(--font-head);
  overflow-x: auto; scrollbar-width: none;
}
.nav-main::-webkit-scrollbar { display: none; }
.nav-main a {
  padding: 12px 4px; white-space: nowrap; color: #241f2b;
  border-bottom: 2.5px solid transparent; text-decoration: none;
}
.nav-main a:hover, .nav-main a.active {
  color: var(--maroon); border-bottom-color: var(--maroon);
}

.nav-drawer {
  display: none; flex-direction: column; gap: 0;
  background: #fff; border-top: 1px solid #f0e8d8; padding: 8px 0;
}
.nav-drawer.open { display: flex; }
.nav-drawer a {
  padding: 14px 20px; font-size: 15px; font-weight: 600;
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid #f5f0e8;
  font-family: var(--font-head);
}
.nav-drawer a:hover { background: #fff8f0; color: var(--maroon); }
.nav-drawer .drawer-cta {
  margin: 8px 20px; padding: 12px;
  background: var(--band-grad); color: #1a0406;
  font-weight: 700; text-align: center; border-radius: 8px;
}

/* --- Buttons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       padding: 12px 22px; border: 1px solid transparent; border-radius: 6px;
       font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
       font-family: var(--font-head); }
.btn-primary { background: var(--band-grad); color: var(--cream);
               box-shadow: 0 4px 20px rgba(229,129,26,.3); position: relative; overflow: hidden; }
.btn-primary::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: btn-shine 5s linear infinite;
  pointer-events: none;
}
.btn-primary > * { position: relative; z-index: 2; }
.btn-primary:hover { transform: translateY(-2px) scale(1.02);
                     box-shadow: 0 6px 24px rgba(229,129,26,.5), 0 0 16px rgba(245,195,68,.4); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-secondary { background: #fff; color: var(--maroon); border: 1.5px solid var(--gold-2); }
.btn-secondary:hover { background: #fdf3e0; }
.btn-ghost { background: transparent; color: var(--maroon); }
.btn-ghost:hover { background: #fff0f0; }
.btn-block { width: 100%; }
@keyframes btn-shine { 0%{background-position:-200% center} 100%{background-position:200% center} }

/* --- Forms --- */
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--text); margin-bottom: 7px;
}
.field label .req { color: var(--maroon-2); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 6px;
  background: #fff; color: #3a2a22; box-sizing: border-box;
}
.field input[type="date"], .field input[type="time"], .field input[type="number"] {
  font-variant-numeric: tabular-nums;
}
.dj-time-ampm { display: flex; gap: 8px; }
.dj-time-ampm select { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.dj-time-ampm select.dj-tp-ap { flex: 1.15; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.error-box {
  background: #fff0f0; border: 1px solid #ffb0b0; color: var(--maroon-2);
  padding: 12px 16px; border-radius: 6px; margin-bottom: 14px; font-size: 14px;
}

/* --- Section headings --- */
.section-hd {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-bottom: 28px;
}
.section-hd .rule {
  height: 1px; width: 74px;
  background: linear-gradient(90deg, transparent, #d8bf8c);
}
.section-hd .rule.rev { background: linear-gradient(90deg, #d8bf8c, transparent); }
.section-hd h1, .section-hd h2 {
  font-size: 27px; margin: 0;
}
.section-sub { font-size: 14px; color: var(--text-2); text-align: center; margin-top: -18px; margin-bottom: 28px; }

/* --- Cards --- */
.card { background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.card-3d { transition: transform .3s ease, box-shadow .3s ease; }
.card-3d:hover {
  transform: perspective(800px) rotateY(-4deg) rotateX(2deg) translateY(-4px);
  box-shadow: 8px 12px 32px rgba(160,18,30,.12), 0 2px 8px rgba(0,0,0,.06);
}
.lift-3d { transition: transform .2s ease, box-shadow .2s ease; }
.lift-3d:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 12px 36px rgba(160,18,30,.15); }

/* --- Ad slots --- */
.ad-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 90px; margin: 24px 0; text-align: center;
}
.ad-slot ins { display: block; width: 100%; min-height: 90px; }
.ad-label {
  font: 700 10px var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); opacity: .7;
}
/* Shown instead of a live ad unit until real AdSense IDs are set in
   config.php — a dashed placeholder so ad placements stay visible during
   review/QA instead of rendering nothing at all. */
.ad-slot-placeholder { border: 1px dashed var(--border); border-radius: 10px; background: rgba(0,0,0,.02); }
.ad-slot-empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 500 11.5px var(--font-body); color: var(--text-3); padding: 10px 16px;
}
/* NOTE: kept for compatibility, but the actual markup in footer.php uses
   class="ad-slot mobile-anchor" (two classes) — see .ad-slot.mobile-anchor
   below, which is the rule that really applies. */
.ad-mobile-anchor {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: #fff; border-top: 1px solid var(--border); padding: 4px;
  justify-content: center;
}
.ad-sidebar-300 { min-height: 250px; }

/* --- Hero slider --- */
.hero {
  position: relative; background: var(--darker); color: var(--cream);
  overflow: hidden;
}
.hero-track {
  display: flex; transition: transform .7s cubic-bezier(.4,0,.2,1);
}
.hero-slide {
  min-width: 100%; width: 100%; flex-shrink: 0;
  position: relative; overflow: hidden; padding: 40px 40px 48px;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 60% 50%, #3a0810 0%, #1a0406 45%, #0e0407 100%);
}
.hero-bg .star {
  position: absolute; width: 3px; height: 3px; background: var(--gold);
  border-radius: 50%; box-shadow: 0 0 6px var(--gold); opacity: .7;
}
.hero-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 28px;
  align-items: center; position: relative; z-index: 5; padding: 0 20px;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(242,193,78,.12); border: 1px solid rgba(242,193,78,.35);
  border-radius: 20px; padding: 6px 16px; margin-bottom: 12px;
  font-size: 13px; font-weight: 600; color: var(--gold);
  letter-spacing: .06em; text-transform: uppercase;
}
.hero-kicker .dot { width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.hero h1, .hero h2 {
  font-size: 36px; font-weight: 800; margin: 0 0 10px;
  letter-spacing: -.02em; line-height: 1.15;
  background: linear-gradient(160deg, #fff8ea 0%, #ffe9a8 30%, #f2c14e 65%, #d99a20 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: 14px; color: #c4a882; line-height: 1.6; margin-bottom: 20px; max-width: 480px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-ctas .ghost { background: transparent; color: var(--gold);
  border: 1.5px solid rgba(242,193,78,.5); }
.hero-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  perspective: 800px; transform: rotateY(-8deg) rotateX(4deg); transform-style: preserve-3d;
}
.hero-cards .hc {
  background: rgba(255,253,248,.07); border: 1px solid rgba(242,193,78,.25);
  border-radius: 14px; padding: 20px 14px; text-align: center;
  box-shadow: 6px 8px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(242,193,78,.15);
}
.hero-cards .hc .icon { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.hero-cards .hc .k { font-size: 12px; color: var(--gold); font-weight: 700; margin-bottom: 3px; }
.hero-cards .hc .v { font-size: 11px; color: #c4a882; line-height: 1.4; }
.hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(242,193,78,.15); border: 1px solid rgba(242,193,78,.4);
  color: var(--gold); font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.hero-nav.prev { left: 16px; }
.hero-nav.next { right: 16px; }
.hero-dots { display: flex; justify-content: center; gap: 8px; padding: 0 0 20px; }
.hero-dots button {
  width: 8px; height: 8px; border-radius: 4px; background: rgba(242,193,78,.35);
  border: none; padding: 0; transition: width .3s;
}
.hero-dots button.active { width: 24px; background: var(--gold); }
.hero-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: linear-gradient(transparent, #fff); z-index: 3; pointer-events: none;
}

/* --- Services grid --- */
.services-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.svc-card {
  background: #fff; border: 1px solid var(--border);
  border-top: 3px solid var(--gold-2);
  border-radius: 10px; padding: 24px 22px;
  text-align: center; display: flex; flex-direction: column;
}
.svc-card .svc-icon { font-size: 26px; color: var(--gold-2); }
.svc-card h3 { font-size: 16px; margin: 12px 0 8px; line-height: 1.4; }
.svc-card p { font-size: 12.5px; color: var(--text-2); line-height: 1.7; flex: 1; margin: 0; }
.svc-card .btn { margin: 18px auto 0; padding: 11px 24px; font-size: 15px; }

/* --- Blog cards --- */
.blog-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.blog-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 4px 20px rgba(92,10,20,.07); transition: box-shadow .2s, transform .2s;
  text-decoration: none; color: inherit;
}
.blog-card:hover { box-shadow: 0 8px 32px rgba(92,10,20,.14); transform: translateY(-2px); }
.blog-band { height: 5px; }
.blog-body { padding: 20px 20px 18px; flex: 1; display: flex; flex-direction: column; }
.blog-tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px; margin-bottom: 12px;
  align-self: flex-start;
}
.blog-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.45; margin-bottom: 10px;
              font-family: var(--font-head); }
.blog-sub { font-size: 12.5px; color: var(--text-2); line-height: 1.65; flex: 1; }
.blog-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid #eaeff8;
  font-size: 11.5px; color: var(--text-3);
}

/* --- Rasi grid (12 cards) --- */
.rasi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.rasi-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; display: block; color: inherit;
  text-decoration: none; box-shadow: 0 2px 12px rgba(92,10,20,.06);
}
.rasi-card:hover { box-shadow: 0 6px 24px rgba(92,10,20,.15); transform: translateY(-2px); }
.rasi-head {
  background: var(--hero-grad); padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
}
.rasi-glyph { font-size: 28px; color: var(--gold); line-height: 1; }
.rasi-head h3 { color: var(--gold); font-size: 17px; margin: 0; }
.rasi-head .lord { font-size: 11px; color: #f0d9a8; margin-top: 2px; }
.rasi-body { padding: 16px 18px; }
.rasi-body p { font-size: 13px; color: var(--text); line-height: 1.75; margin: 0;
               font-family: var(--font-head); }
.rasi-foot {
  padding: 10px 18px 14px; border-top: 1px solid #eaeff8;
  display: flex; justify-content: space-between; align-items: center; font-size: 11px;
}
.rasi-foot strong { color: var(--maroon); }
.rasi-foot .go { color: var(--maroon); font-weight: 700; }

/* --- Mantra cards --- */
.mantra-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mantra-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; display: block; text-decoration: none;
  box-shadow: 0 2px 12px rgba(92,10,20,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.mantra-card:hover {
  box-shadow: 0 8px 32px rgba(92,10,20,.15);
  transform: perspective(700px) rotateY(-3deg) translateY(-4px);
}
.mantra-top { padding: 22px 18px; text-align: center; }
.mantra-icon {
  font-size: 40px; line-height: 1; margin-bottom: 8px;
  animation: mantra-pulse 3s ease-in-out infinite;
  display: inline-block;
}
.mantra-name { font-size: 18px; font-weight: 700; color: var(--gold);
               font-family: var(--font-head); }
.mantra-body { padding: 14px 18px; }
.mantra-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 8px; }
.mantra-count { font-size: 11.5px; font-weight: 700; color: var(--maroon); }
@keyframes mantra-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }

/* --- Panchangam --- */
.panch-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 20px; align-items: start; }
.panch-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.panch-table td { padding: 12px 20px; border-bottom: 1px solid #eaeff8; }
.panch-table td:first-child { color: var(--text-2); width: 42%; }
.panch-table td:last-child { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.panch-hd {
  padding: 15px 20px; border-bottom: 1px solid var(--border);
  font-size: 16px; font-weight: 700; color: var(--maroon);
  background: linear-gradient(90deg, #fff0f0, #f0f4ff);
  font-family: var(--font-head);
}

/* --- Report page (chart) --- */
.chart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.chart-box {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 18px; text-align: center;
}
.chart-title { font-size: 14px; font-weight: 700; color: var(--maroon); margin-bottom: 10px;
               font-family: var(--font-head); }
.chart-svg { width: 100%; aspect-ratio: 1; }
.chart-svg rect { fill: none; stroke: var(--gold-2); stroke-width: 1.5; }
.chart-svg line { stroke: var(--gold-2); stroke-width: 1.2; }
.chart-svg text.house-num {
  font-size: 9px; fill: var(--text-3); font-weight: 700;
}
.chart-svg text.planet {
  font-size: 10px; fill: var(--maroon); font-weight: 700;
  font-family: var(--font-head);
}
.chart-svg text.lagna { fill: var(--orange); font-weight: 800; }

.planets-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff;
                 border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.planets-table th {
  padding: 12px 14px; background: linear-gradient(90deg, #fff0f0, #f0f4ff);
  text-align: left; font-size: 12px; color: var(--maroon); border-bottom: 1px solid #d0daf0;
  font-family: var(--font-head);
}
.planets-table td { padding: 11px 14px; border-bottom: 1px solid #eaeff8; }
.planets-table tr:last-child td { border-bottom: 0; }

/* --- Footer app promo bar (shown on every page, above the footer) --- */
.footer-app-bar { background: var(--hero-grad); margin-top: 40px; }
.footer-app-bar .footer-app-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; padding: 28px 28px 42px;
}
.footer-app-left { display: flex; align-items: center; gap: 16px; }
.footer-app-icon {
  width: 48px; height: 48px; min-width: 48px; border-radius: 12px; background: rgba(242,193,78,.16);
  border: 1px solid rgba(242,193,78,.35); display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.footer-app-left h3 { color: var(--gold); font-size: 18px; margin: 2px 0 4px; }
.footer-app-left p:last-child { color: rgba(255,255,255,.75); font-size: 13px; margin: 0; max-width: 480px; }
.footer-app-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--gold-2)); color: var(--darker); font-weight: 800;
  text-decoration: none; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.footer-app-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.35); color: var(--darker); }
.footer-app-free { background: rgba(15,11,22,.18); padding: 2px 8px; border-radius: 999px; font-size: 11px; }
@media (max-width: 700px) { .footer-app-bar .footer-app-inner { justify-content: center; text-align: center; padding: 24px 20px 36px; } .footer-app-left { flex-direction: column; text-align: center; } }

/* --- Footer --- */
.site-footer {
  background: var(--dark); color: #e3cda4; margin-top: 0;
}
.foot-grid {
  max-width: 1280px; margin: 0 auto; padding: 40px 28px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px;
}
.foot-grid a { color: #f3ddb0; }
.foot-grid a:hover { color: var(--gold); }
.foot-brand { font-size: 21px; font-weight: 700; color: var(--gold); }
.foot-tag { font-size: 12px; color: #e9c98d; margin-top: 6px; }
.foot-blurb { font-size: 12.5px; line-height: 1.8; margin-top: 14px; color: #f3ddb0; }
.foot-hd { font-size: 13px; font-weight: 700; color: var(--gold); margin-bottom: 12px; }
.foot-links { display: grid; gap: 9px; font-size: 12.5px; }
.foot-copy {
  border-top: 1px solid rgba(242,193,78,.18);
  padding: 16px 28px; text-align: center; font-size: 11.5px; color: #d0b184;
  font-variant-numeric: tabular-nums;
}

/* --- Floating widgets --- */
.floater {
  position: fixed; bottom: 24px; right: 20px; z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.scroll-top {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--gold-2); color: var(--maroon);
  font-size: 20px; display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(160,18,30,.18);
}
.scroll-top.show { display: flex; }
.gp-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 30px;
  background: var(--band-grad); color: #1a0406;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 20px rgba(160,18,30,.4);
}

/* --- Utilities --- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 900px; margin: 0 auto; padding: 0 28px; }
.container-thin { max-width: 620px; margin: 0 auto; padding: 0 28px; }
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 30px; } .mt-4 { margin-top: 40px; }
.mb-1 { margin-bottom: 10px; } .mb-2 { margin-bottom: 20px; } .mb-3 { margin-bottom: 30px; } .mb-4 { margin-bottom: 40px; }
.text-center { text-align: center; }
.hidden { display: none; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-cards { display: none; }
  .services-grid, .blog-grid, .rasi-grid, .mantra-grid { grid-template-columns: 1fr 1fr; }
  .panch-grid { grid-template-columns: 1fr; }
  .chart-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .brand-name { font-size: 20px; }
  .brand-tag { display: none; }
  .services-grid, .blog-grid, .mantra-grid { grid-template-columns: 1fr 1fr; }
  .rasi-grid { grid-template-columns: 1fr 1fr; }
  .hero h1, .hero h2 { font-size: 26px; }
  .hero-slide { padding: 32px 20px 44px; }
  .container, .container-narrow, .container-thin { padding: 0 14px; }
  .ad-mobile-anchor { display: flex; }
  .site-footer { padding-bottom: 60px; }
  .foot-grid { padding: 30px 18px; grid-template-columns: 1fr 1fr; gap: 20px; }
  .section-hd h1, .section-hd h2 { font-size: 22px; }
  .section-hd .rule { width: 30px; }
  h1 { font-size: 26px !important; }
  h2 { font-size: 22px !important; }
}
@media (min-width: 1200px) {
  .page-with-sidebar {
    display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start;
  }
}

/* --- Print --- */
.noprint {}
@media print {
  .noprint, .site-header, .site-footer, .breadcrumb-nav, .floater, .ad-slot, .ad-mobile-anchor,
  .footer-app-bar, .floating-app-btn { display: none !important; }
  body { background: #fff; }
  @page { size: A4; margin: 12mm; }
}

/* --- Prefers reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Additions — toasts, place autocomplete, chart tables, panchangam grid, mobile nav
   ========================================================================== */

/* Toast host */
.toast-host { position: fixed; bottom: 84px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { min-width: 260px; max-width: 380px; padding: 12px 16px; background: var(--dark); color: #fff; border-radius: 10px;
         font: 500 14px/1.4 var(--font-body); box-shadow: 0 8px 24px rgba(0,0,0,.24);
         transform: translateX(120%); transition: transform .28s ease; pointer-events: auto; }
.toast.show { transform: translateX(0); }
.toast-err  { background: var(--maroon); }
.toast-ok   { background: #2a7a3a; }

/* Engagement popup — frequency-capped modal (see DJ.popup in app.js) */
.dj-popup-overlay {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  background: rgba(30,10,5,.55); padding: 20px; overflow-y: auto;
  opacity: 0; transition: opacity .25s ease;
}
.dj-popup-overlay.show { opacity: 1; }
.dj-popup-card {
  position: relative; max-width: 520px; width: 100%; background: #fff; color: var(--text);
  border-radius: 20px; border-top: 4px solid #c9922b; padding: 28px 28px 36px;
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
  max-height: calc(100vh - 40px); overflow-y: auto;
  margin: auto;
  transform: scale(.92) translateY(10px); transition: transform .28s cubic-bezier(.22,.9,.3,1);
}
.dj-popup-overlay.show .dj-popup-card { transform: scale(1) translateY(0); }
.dj-popup-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 22px; color: #8b8598; cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1;
}
.dj-popup-close:hover { background: rgba(0,0,0,.06); }
.dj-popup-head { display: flex; align-items: center; gap: 16px; margin: 0 32px 16px 0; }
.dj-popup-icon {
  width: 60px; height: 60px; border-radius: 16px; flex: 0 0 auto;
  background: linear-gradient(140deg, #ffdf8f, #e0801a);
  display: grid; place-items: center; font-size: 30px; color: var(--maroon);
}
.dj-popup-title { font-size: 20px; font-weight: 700; color: var(--maroon); font-family: var(--font-head); line-height: 1.3; }
.dj-popup-sub { font-size: 13px; color: #5b5567; margin-top: 2px; }
.dj-popup-desc { font-size: 13px; color: #5b5567; line-height: 1.75; margin: 0 0 14px; text-align: left; }
.dj-popup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.dj-popup-feat { background: #fbf1dd; border: 1px solid #e8d5a9; border-radius: 10px; padding: 10px 6px; text-align: center; }
.dj-popup-feat .ico { font-size: 20px; }
.dj-popup-feat .lbl { font-size: 10.5px; color: var(--maroon); font-weight: 700; margin-top: 3px; line-height: 1.25; }
.dj-popup-play-btn {
  display: block; text-align: center; padding: 15px; border-radius: 10px; text-decoration: none;
  background: linear-gradient(135deg, #f5c344 0%, #e5811a 46%, #b8121f 100%);
  color: #fff8ea; font-size: 15px; font-weight: 700; letter-spacing: .02em;
}
.dj-popup-play-btn:hover { filter: brightness(1.05); }
.dj-popup-free { text-align: center; font-size: 13px; font-weight: 800; color: var(--maroon); margin-top: 10px; letter-spacing: .04em; }
@media (max-width: 480px) {
  .dj-popup-card { padding: 24px 20px 28px; }
  .dj-popup-grid { gap: 6px; }
}

/* Place autocomplete */
.place-suggest { position: absolute; z-index: 20; background: #fff; border: 1px solid var(--border); border-radius: 8px;
                 box-shadow: 0 8px 24px rgba(0,0,0,.10); margin-top: 4px; max-height: 240px; overflow: auto;
                 min-width: 240px; }
.place-item { padding: 10px 14px; cursor: pointer; font: 500 14px/1.3 var(--font-body); color: var(--text); }
.place-item:hover { background: var(--paper); color: var(--maroon); }

/* Field error */
.field-err { color: var(--maroon); font: 500 12px/1.3 var(--font-body); margin-top: 4px; }
input.err, select.err, textarea.err { border-color: var(--maroon) !important; }

/* Chart SVG container */
.chart-box { background: #fff8ec; border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.chart-svg { display: block; }

/* D1/D9/D10/Bhava chart cards with kicker + interpretive note */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 24px 0; }
.chart-card { display: flex; flex-direction: column; gap: 8px; }
.chart-card-kicker { font: 600 12px/1.4 var(--font-body); color: var(--text-3); text-align: center; }
.chart-card-note { font: 500 12.5px/1.5 var(--font-body); color: var(--text-2); background: var(--paper); border-radius: 8px; padding: 8px 12px; }

/* Planet & Dasha tables */
.p-table, .d-table { width: 100%; border-collapse: collapse; margin-top: 8px; font: 500 14px/1.5 var(--font-body); }
.p-table th, .p-table td, .d-table th, .d-table td {
  border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left;
}
.p-table th, .d-table th { background: var(--paper); color: var(--maroon); font-weight: 700; font-size: 13px; }
.d-table tr.cur td { background: rgba(242,193,78,.20); font-weight: 600; }

/* Panchangam grid */
.panch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.p-cell { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.p-cell.danger { border-left: 4px solid var(--maroon); }
.p-cell .p-lbl { font: 600 11px/1.3 var(--font-body); color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; }
.p-cell .p-val { font: 700 15px/1.35 var(--font-head); color: var(--text); margin-top: 4px; }

/* Report sections — rendered as one continuous sequence, no tabs */
.rt-section { margin: 32px 0; }
.rt-section + .rt-section { padding-top: 28px; border-top: 1px solid var(--border); }
.rt-section-head {
  font: 700 20px/1.3 var(--font-head); color: var(--maroon); margin: 0 0 16px;
  padding-bottom: 8px; border-bottom: 2px solid var(--gold, #f2c14e);
  display: inline-block;
}
@media print {
  .rt-section { margin-bottom: 24px; }
}

/* Life-area score bars */
.life-score-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 16px; margin-top: 16px; }
.life-score-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.life-score-card .ls-label { font: 700 13px var(--font-head); color: var(--text-2); margin-bottom: 8px; }
.life-score-card .ls-track { height: 8px; border-radius: 4px; background: #eee; overflow: hidden; }
.life-score-card .ls-fill { height: 100%; border-radius: 4px; background: var(--band-grad); }
.life-score-card .ls-pct { font: 800 20px var(--font-head); color: var(--maroon); margin-top: 8px; }
.life-score-card .ls-note { font: 500 11.5px var(--font-body); color: var(--text-3); margin-top: 2px; }

/* Relation badge on the chart-report summary card */
.relation-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(160,18,30,.08); border: 1px solid rgba(160,18,30,.22);
  color: var(--maroon); font-size: 13px; font-weight: 700;
}
.relation-badge.is-spouse { background: rgba(219,39,119,.10); border-color: rgba(219,39,119,.3); color: #be185d; }

/* Floating "download the app" pill — sits just above the scroll-to-top button */
.floating-app-btn {
  position: fixed; bottom: 78px; right: 20px; z-index: 499;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 30px;
  background: var(--band-grad); color: #1a0406; text-decoration: none;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(160,18,30,.4);
  transition: transform .15s ease;
}
.floating-app-btn:hover { transform: translateY(-2px); color: #1a0406; }
.floating-app-btn .play-glyph { font-size: 15px; }
@media (max-width: 500px) {
  .floating-app-btn span:not(.play-glyph) { display: none; }
  .floating-app-btn { padding: 11px; bottom: 74px; }
}

/* Retrograde / combust badges (planet table) */
.ret-badge, .combust-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px;
  font: 800 11px/1 var(--font-body); cursor: help;
}
.ret-badge { background: rgba(147,51,234,.12); color: #9333ea; border: 1px solid rgba(147,51,234,.3); }
.combust-badge { background: rgba(229,129,26,.12); color: var(--orange); border: 1px solid rgba(229,129,26,.32); margin-left: 3px; }

/* Retrograde / combust summary cards — mirrors the yoga/dosha card treatment */
.status-note {
  background: linear-gradient(135deg, rgba(147,51,234,.06), rgba(242,193,78,.08));
  border: 1px solid rgba(147,51,234,.28); border-left: 4px solid #9333ea;
  border-radius: 10px; padding: 12px 14px;
}
.status-note.combust {
  background: linear-gradient(135deg, rgba(229,129,26,.06), rgba(242,193,78,.08));
  border-color: rgba(229,129,26,.28); border-left-color: var(--orange);
}
.status-note-head { font: 800 14px/1.3 var(--font-head); color: #7e22ce; margin-bottom: 3px; }
.status-note.combust .status-note-head { color: #c2610d; }
.status-note-planets { font: 700 12.5px/1.3 var(--font-body); color: var(--text); margin-bottom: 4px; }
.status-note-body { font: 500 12.5px/1.5 var(--font-body); color: var(--text-2); }

/* Yoga & Dosha display */
.yoga-pill, .dosha-pill { display: inline-block; padding: 6px 12px; margin: 4px 6px 4px 0; border-radius: 999px;
                          font: 600 13px/1 var(--font-body); }
.yoga-pill  { background: rgba(46,125,50,.10); color: #2a7a3a; border: 1px solid rgba(46,125,50,.30); }
.dosha-pill { background: rgba(160,18,30,.08); color: var(--maroon); border: 1px solid rgba(160,18,30,.28); }

/* Yoga / Dosha detail cards — name + strength/severity badge, then four
   labeled sections (how it forms / life impact / career-or-longterm /
   note-or-remedy) — one card per detected combination, stacked. */
[data-yogas], [data-doshas] { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 8px; }
.yd-card { background: linear-gradient(135deg, rgba(46,125,50,.06), rgba(242,193,78,.10));
           border: 1px solid rgba(46,125,50,.28); border-left: 4px solid #2a7a3a;
           border-radius: 12px; padding: 16px 18px; }
.yd-card.dosha { background: linear-gradient(135deg, rgba(160,18,30,.05), rgba(242,193,78,.08));
                 border-color: rgba(160,18,30,.28); border-left-color: var(--maroon); }
.yd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.yd-card-name { font: 800 16px/1.3 var(--font-body); color: #1e5a26; }
.yd-card.dosha .yd-card-name { color: var(--maroon); }
.yd-card-strength { display: flex; align-items: center; gap: 6px; font: 700 12px/1 var(--font-body);
                     background: rgba(46,125,50,.12); color: #1e5a26; padding: 5px 10px; border-radius: 999px; }
.yd-card-strength .yd-strength-num::before { content: " · "; }
.yd-card-strength.sev-high { background: rgba(160,18,30,.14); color: var(--maroon); }
.yd-card-strength.sev-medium { background: rgba(242,193,78,.22); color: #7a5b00; }
.yd-card-strength.sev-low { background: rgba(46,125,50,.12); color: #1e5a26; }
/* Shared 0-100 colour bar — red (weak/afflicted), blue (moderate), green
   (strong/favourable) — used across Yogas, Doshas, Shadbala, Vimsopaka and
   Ashtavargam so the whole life report reads on one consistent scale.
   Bars render at width:0 and animate to their target via djAnimateBars(). */
.dj-bar-track { height: 8px; border-radius: 999px; background: rgba(15,11,22,.08); overflow: hidden; margin: 8px 0 4px; }
.dj-bar-fill { height: 100%; border-radius: 999px; width: 0%; transition: width 1.1s cubic-bezier(.22,.9,.3,1); }
.dj-bar-fill.good { background: linear-gradient(90deg, #1e7a3c, #2ecc71); }
.dj-bar-fill.mid  { background: linear-gradient(90deg, #1a3fae, #4f8cff); }
.dj-bar-fill.bad  { background: linear-gradient(90deg, #7a0e18, #e5311a); }
.yd-field { margin-top: 8px; }
.yd-field-label { font: 700 11px/1.3 var(--font-body); color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.yd-field-body { font: 500 13.5px/1.5 var(--font-body); color: #0f0b16; }
.muted { color: var(--text-3); font-style: italic; }

/* Mobile nav (hamburger) */
[data-hamburger] {
  display: none; width: 42px; height: 42px; min-width: 42px; flex: none; border-radius: 10px;
  background: rgba(160,18,30,.06); border: 1px solid rgba(160,18,30,.16);
  cursor: pointer; margin-left: auto; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
[data-hamburger]:hover { background: rgba(160,18,30,.12); border-color: rgba(160,18,30,.34); }
[data-hamburger]:active { transform: scale(.92); }
[data-hamburger] .bar {
  display: block; width: 20px; height: 2.5px; border-radius: 999px; background: var(--maroon);
  transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease, background .2s ease;
}
[data-hamburger].open { background: var(--maroon); border-color: var(--maroon); box-shadow: 0 2px 10px rgba(160,18,30,.35); }
[data-hamburger].open .bar { background: #fff; }
[data-hamburger].open .bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
[data-hamburger].open .bar:nth-child(2) { opacity: 0; }
[data-hamburger].open .bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
[data-mobilenav] { display: none; }
[data-mobilenav].open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--maroon);
                        padding: 12px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.24); z-index: 90; }
[data-mobilenav] a { color: #fff; display: block; padding: 12px 8px; border-bottom: 1px solid rgba(255,255,255,.15);
                     text-decoration: none; font: 600 15px var(--font-body); }
/* Ad inside the mobile drawer — own light card so the ad-slot's label/text
   (styled for a light background elsewhere) stays legible against the
   drawer's maroon. Full-width and unconstrained so it scales with the
   drawer at any viewport it's shown at (drawer only ever appears <=900px). */
.mobilenav-ad-wrap { background: #fff; border-radius: 10px; padding: 6px; margin-top: 8px; }
.mobilenav-ad-wrap .ad-slot { margin: 0; width: 100%; }

/* Social icons in the drawer — the default .social-links styling (maroon
   icon on a near-white chip) is meant for the light desktop header, so it'd
   be nearly invisible on this drawer's solid maroon background; restyle to
   light-on-maroon instead, matching the drawer's own nav links. */
.mobilenav-social-wrap { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.15); }
/* .social-links is display:none below 700px (see "Hide social links on very
   tight header" above) — that rule targets the desktop nav-auth copy, but
   isn't scoped to it, so it was also hiding this drawer copy. Override back
   to visible here specifically. */
.mobilenav-social-wrap .social-links { display: flex !important; justify-content: center; }
.mobilenav-social-wrap .social-links a {
  background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25);
}
.mobilenav-social-wrap .social-links a:hover { background: var(--gold); color: var(--maroon); }
@media (max-width: 900px) {
  /* NOTE: this used to target ".nav-links", a class that doesn't exist in
     header.php's markup — the real nav never actually hid until 600px,
     leaving 601-900px viewports (most tablets) with the full desktop nav
     crammed into too little width and overflowing the page. */
  .nav-search, .nav-auth, .nav-main { display: none; }
  [data-hamburger] { display: inline-flex; }
}

/* Language dropdown */
.lang-wrap { position: relative; flex: none; }
.lang-btn { background: #fff; color: var(--maroon); border: 1px solid var(--gold-2);
            padding: 6px 12px; border-radius: 6px; cursor: pointer; font: 600 13px var(--font-body); }
.lang-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; background: #fff;
             border: 1px solid var(--border); border-radius: 8px; overflow: hidden; min-width: 140px; z-index: 100;
             box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.lang-menu.open { display: block; }
.lang-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
            padding: 10px 14px; background: #fff; border: none;
            font: 500 14px var(--font-body); color: var(--text); cursor: pointer; }
.lang-opt:hover { background: var(--paper); color: var(--maroon); }
.lang-opt:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }
/* The currently-active language — clear checkmark + tint so "which one am
   I on" is obvious from the menu itself, not just the closed button label. */
.lang-opt.active { background: var(--paper); color: var(--maroon); font-weight: 700; }
.lang-opt.active::after { content: '✓'; color: var(--maroon); font-weight: 800; }
@media (max-width: 600px) {
  .lang-btn { padding: 6px 9px; font-size: 12px; }
  .lang-menu { right: auto; left: 50%; transform: translateX(-50%); min-width: 130px; }
}
@media (max-width: 380px) {
  .brand-name { font-size: 17px; }
}

/* Scroll to top */
/* Cookie / ad-consent banner — see DJ.consent in app.js. Sits above the
   scroll-to-top / push-bell floaters (higher z-index) since it's a one-time
   blocking-ish notice, not a persistent utility button. */
.dj-consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: var(--maroon); color: #fff8ea;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px;
  padding: 14px 20px; box-shadow: 0 -4px 16px rgba(0,0,0,.2);
  transform: translateY(100%); transition: transform .35s cubic-bezier(.22,.9,.3,1);
}
.dj-consent-bar.show { transform: translateY(0); }
.dj-consent-bar p { margin: 0; font-size: 13px; line-height: 1.5; max-width: 640px; }
.dj-consent-bar a { color: var(--gold); text-decoration: underline; }
.dj-consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.dj-consent-btn { font: 700 13px var(--font-body); padding: 9px 16px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.dj-consent-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.dj-consent-btn-ghost:hover { background: rgba(255,255,255,.12); }
.dj-consent-btn-primary { background: var(--gold); color: var(--maroon); border: none; }
.dj-consent-btn-primary:hover { filter: brightness(1.08); }
@media (max-width: 640px) { .dj-consent-bar { justify-content: flex-start; } .dj-consent-actions { width: 100%; } .dj-consent-btn { flex: 1; } }

[data-scrolltop] { position: fixed; bottom: 20px; right: 20px; width: 46px; height: 46px; border-radius: 50%;
                   background: var(--maroon); color: #fff; border: none; cursor: pointer; display: none;
                   font-size: 20px; box-shadow: 0 4px 12px rgba(0,0,0,.24); z-index: 500; }
[data-scrolltop].show { display: flex; align-items: center; justify-content: center; }

/* Push-notification opt-in bell — left side, so it never stacks with the
   scroll-to-top / app-download floaters already sitting on the right. */
.push-bell-btn {
  position: fixed; bottom: 20px; left: 20px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--maroon); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; box-shadow: 0 4px 12px rgba(0,0,0,.24); z-index: 500;
  opacity: 0; transform: scale(.4) translateY(10px);
  transition: opacity .35s cubic-bezier(.22,.9,.3,1), transform .35s cubic-bezier(.22,.9,.3,1);
}
/* The button is inserted after a 25s delay (see DJ.push in app.js) then
   fades/scales in — .show flips on next frame so the transition actually
   plays instead of starting already-visible. */
.push-bell-btn.show { opacity: 1; transform: scale(1) translateY(0); animation: dj-push-pulse 2.4s ease-in-out infinite; }
.push-bell-btn:hover { transform: scale(1.08); animation-play-state: paused; }
/* Admin-uploaded custom icon (Settings → Push Notifications) — falls back
   to the 🔔 emoji text when none is set (see DJ.push._renderButton). */
.push-bell-btn img { width: 24px; height: 24px; object-fit: contain; border-radius: 50%; }
@keyframes dj-push-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,.24), 0 0 0 0 rgba(160,18,30,.4); }
  50% { box-shadow: 0 4px 12px rgba(0,0,0,.24), 0 0 0 8px rgba(160,18,30,0); }
}
@media (max-width: 640px) {
  .push-bell-btn { bottom: 74px; }
}

/* Allow/Deny choice card — shown above the bell on click, before the
   browser's own native permission prompt ever appears (see DJ.push._showChoice). */
.push-choice-card {
  position: fixed; bottom: 74px; left: 20px; z-index: 500;
  width: 260px; max-width: calc(100vw - 40px);
  background: #fff; border-radius: 12px; padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); border: 1px solid var(--border);
  opacity: 0; transform: scale(.92) translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
}
.push-choice-card.show { opacity: 1; transform: scale(1) translateY(0); }
.push-choice-body { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--text); }
.push-choice-actions { display: flex; gap: 8px; }
.push-choice-actions .btn { flex: 1; padding: 8px 10px; font-size: 12.5px; }
@media (max-width: 640px) {
  .push-choice-card { bottom: 128px; }
}

/* AdSense slot — base .ad-slot rule lives earlier in this file, near .ad-label */
/* Mobile-only anchor ad — desktop shows it inline instead of as a fixed bar,
   since a fixed bottom bar makes no sense on wide viewports. */
.ad-slot.mobile-anchor { z-index: 700; position: relative; }
.mobile-anchor-close { display: none; }
@media (max-width: 640px) {
  .ad-slot.mobile-anchor {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,.98); border-top: 1px solid var(--border); margin: 0;
    padding-right: 34px;
  }
  /* Keep the scroll-to-top and app-download floaters clear of the anchor ad
     bar so neither ever sits on top of the other. */
  [data-scrolltop] { bottom: 74px; }
  .floating-app-btn { bottom: 128px; }
  .mobile-anchor-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 50%; border: none;
    background: rgba(0,0,0,.08); color: var(--text-3); font-size: 16px; line-height: 1;
    cursor: pointer; padding: 0;
  }
}
@media (min-width: 1200px) {
  .layout-with-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 32px; }
}

/* Utility: hidden */
[hidden] { display: none !important; }

/* Utility: two-col forms */
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form-2col { grid-template-columns: 1fr; } }

/* Rasi card grid on rasi-palan */
.rasi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.rasi-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px;
             transition: transform .18s ease, box-shadow .18s ease; cursor: pointer; text-align: center; text-decoration: none; color: inherit; display: block; }
.rasi-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(160,18,30,.10); border-color: var(--gold-2); }
.rasi-card h4 { font: 700 17px/1.2 var(--font-head); color: var(--maroon); margin: 6px 0; }
.rasi-card .rasi-sub { font: 500 12px var(--font-body); color: var(--text-3); }

/* Mantra card grid */
.mantra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mantra-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-align: center;
               border-top: 4px solid var(--gold); }
.mantra-card h3 { font: 700 20px var(--font-head); color: var(--maroon); margin: 8px 0; }
.mantra-card .mantra-text { font: 500 15px/1.7 var(--font-head); color: var(--dark); padding: 12px; background: var(--paper); border-radius: 8px; margin: 12px 0; }
.mantra-card .mantra-translit { font: italic 500 13px/1.5 var(--font-body); color: var(--text-2); }

/* Home page mantra preview — richer dark cards (matches reference design) */
.mantra-grid-dark .mantra-card {
  background: linear-gradient(160deg, #2a0d12, #4a1118 60%, #6b1a1a);
  border: 1px solid rgba(242,193,78,.3); color: #fff;
}
.mantra-grid-dark .mantra-card h3 { color: var(--gold); }
.mantra-grid-dark .mantra-card .mantra-text { background: rgba(255,255,255,.08); color: #fff; }
.mantra-grid-dark .mantra-card .mantra-translit { color: rgba(255,255,255,.75); }
.mantra-grid-dark .mantra-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(160,18,30,.3); }

/* Home page bottom CTA */
.home-bottom-cta {
  text-align: center; padding: 40px 24px; border: 2px dashed var(--gold-2); border-radius: 18px;
  background: var(--paper);
}
.home-bottom-cta h3 { color: var(--maroon); font-size: 24px; margin: 0 0 8px; }
.home-bottom-cta p { color: var(--text-2); margin: 0 0 20px; }

/* ==========================================================================
   Social media buttons (header)
   ========================================================================== */
.social-links { display: flex; gap: 6px; align-items: center; }
.social-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(160,18,30,.06); color: var(--maroon);
  border: 1px solid var(--border);
  transition: background .18s ease, transform .18s ease;
}
.social-links a:hover { background: var(--gold); color: var(--maroon); transform: translateY(-1px); }
.social-links svg { width: 15px; height: 15px; fill: currentColor; display: block; }

/* Chart-style switcher (North / South Indian) */
.chart-style-switch {
  display: inline-flex; background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 3px; margin: 4px 0 12px;
}
.chart-style-switch button {
  border: none; background: transparent; padding: 6px 16px; font: 600 13px/1 var(--font-body);
  color: var(--text-2); cursor: pointer; border-radius: 999px; transition: background .18s;
}
.chart-style-switch button.active { background: var(--maroon); color: #fff; }
.chart-style-switch button:hover:not(.active) { color: var(--maroon); }

/* Login gate for report pages */
.login-gate {
  max-width: 460px; margin: 60px auto; text-align: center;
  background: linear-gradient(135deg, #fff8ea, #fbf1dd);
  padding: 40px 32px; border-radius: 16px; border: 1px solid var(--gold);
}
.login-gate .lock-icon { font-size: 42px; margin-bottom: 12px; }
.login-gate h2 { color: var(--maroon); margin: 0 0 8px; font-size: 24px; }
.login-gate p { color: var(--text-2); margin: 0 0 24px; }
.login-gate .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Responsive refinements (all breakpoints)
   ========================================================================== */

/* Container */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Section spacing scales down on mobile */
.section { padding: 48px 0; }
@media (max-width: 900px) { .section { padding: 32px 0; } }
@media (max-width: 500px) { .section { padding: 24px 0; } }

/* Hero */
.hero {
  position: relative; min-height: 460px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--hero-theme-color, #7a0f1c) 0%, var(--darker) 150%);
  transition: background 1s ease;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 85% 20%, rgba(242,193,78,.16) 0, transparent 45%),
    radial-gradient(circle at 12% 82%, rgba(242,193,78,.10) 0, transparent 40%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 38px, rgba(242,193,78,.05) 39px, transparent 40px),
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(242,193,78,.8), transparent),
    radial-gradient(1.5px 1.5px at 75% 15%, rgba(242,193,78,.7), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(242,193,78,.6), transparent),
    radial-gradient(1.5px 1.5px at 90% 60%, rgba(242,193,78,.7), transparent),
    radial-gradient(1px 1px at 35% 85%, rgba(242,193,78,.5), transparent),
    radial-gradient(1.5px 1.5px at 8% 50%, rgba(242,193,78,.6), transparent);
}
.hero .slide { z-index: 1; }
.slide-dots { z-index: 2; }
.hero-slides { position: relative; min-height: 460px; }
.hero .slide { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.hero .slide.active { pointer-events: auto; }
.slide-inner { padding: 30px 0; width: 100%; }
.hero-kicker { color: var(--gold); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px; }
.hero-title { font-size: clamp(26px, 4.2vw, 44px); line-height: 1.15; color: #fff; margin: 0 0 14px; }
.hero-sub { color: rgba(255,255,255,.86); font-size: clamp(14px, 1.6vw, 17px); margin: 0 0 22px; max-width: 60ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.slide-dots { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.slide-dots button { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.35); border: none; cursor: pointer; padding: 0; transition: background .2s, width .25s ease; }
.slide-dots button.active { width: 26px; background: var(--gold); }
@media (max-width: 900px) {
  .hero, .hero-slides { min-height: 340px; }
  .slide-inner { padding: 18px 0; }
  /* Real content (e.g. an article excerpt) is unbounded in length — slides
     are position:absolute so they never grow their parent's height, and
     .hero clips overflow, so without a cap, long real text can run past
     the reduced height and get cut off. Capping keeps every slide's copy
     within the box regardless of source content length. */
  .hero-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; }
  .hero-title { margin-bottom: 8px; }
  .hero-badge { margin-bottom: 10px; }
}
@media (max-width: 500px) {
  .hero, .hero-slides { min-height: 314px; }
  .slide-inner { padding: 10px 0; }
  .hero-sub { -webkit-line-clamp: 2; margin-bottom: 6px; font-size: 12.5px; }
  .hero-title {
    font-size: clamp(16px, 5vw, 20px); margin-bottom: 4px; line-height: 1.15;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-badge { margin-bottom: 6px; padding: 4px 10px; font-size: 11px; }
  .hfc-icon { font-size: 28px; }
  .hero-feature-card { gap: 5px; }
  .hero-cta { margin-top: 2px; }
  .hero-cta .btn { flex: 1 1 100%; padding: 8px 18px; font-size: 13px; }
  .slide-dots { bottom: 6px; }
  .slide-dots button { width: 7px; height: 7px; }
  .slide-dots button.active { width: 18px; }
  .slide-nav { width: 28px; height: 28px; font-size: 15px; }
}

/* Hero v3 — theme colour fills the FULL hero section edge-to-edge (set as
   --hero-theme-color on .hero by DJ.slider.init's show(), read from each
   slide's data-theme-color) — the slide itself carries no separate "card"
   background, just the icon+text content sitting directly on that colour. */
.hero-v3 .slide-inner { display: flex; align-items: center; }
.hero-feature-card {
  display: flex; align-items: center; gap: 28px; width: 100%;
  position: relative; z-index: 1;
}
.hfc-icon {
  flex: 0 0 auto; font-size: 72px; line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
/* Admin-uploaded slide image (Settings → Hero Slider) instead of an emoji —
   .hfc-icon's font-size sizing doesn't apply to an <img>, so give it real
   pixel dimensions and a matching drop-shadow/rounding of its own. */
img.hfc-icon.hfc-image {
  width: 96px; height: 96px; object-fit: cover; border-radius: 16px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.hfc-text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 700px) {
  .hero-feature-card { flex-direction: column; text-align: center; gap: 10px; }
  .hfc-icon { font-size: 44px; }
  img.hfc-icon.hfc-image { width: 72px; height: 72px; }
  .hero-cta { justify-content: center; }
  .hero-sub { max-width: none; }
}

/* Service card grid */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 380px)  { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 24px 20px;
  text-align: center; text-decoration: none; color: inherit; display: block;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(160,18,30,.14); }
.svc-grid .svc-card:nth-child(8n+1) { border-top-color: #b8121f; }
.svc-grid .svc-card:nth-child(8n+2) { border-top-color: #1e7a3c; }
.svc-grid .svc-card:nth-child(8n+3) { border-top-color: #1a56db; }
.svc-grid .svc-card:nth-child(8n+4) { border-top-color: #c9922b; }
.svc-grid .svc-card:nth-child(8n+5) { border-top-color: #9333ea; }
.svc-grid .svc-card:nth-child(8n+6) { border-top-color: #0891b2; }
.svc-grid .svc-card:nth-child(8n+7) { border-top-color: #e5811a; }
.svc-grid .svc-card:nth-child(8n+8) { border-top-color: #db2777; }
.svc-card { border-top-width: 3px; border-top-style: solid; }
.svc-icon { font-size: 40px; margin-bottom: 10px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.12)); }
.svc-card h3 { font-size: 17px; margin: 6px 0 8px; }
.svc-card p  { font-size: 13.5px; color: var(--text-2); margin: 0; }

/* Assurance strip */
.band-assurance { background: linear-gradient(135deg, #fff8ea, #fbf1dd); }
.assurance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
@media (max-width: 900px) { .assurance-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.asr h4 { color: var(--maroon); font-size: 16px; margin: 8px 0 4px; }
.asr p  { font-size: 13px; color: var(--text-2); margin: 0; }
.asr-icon { font-size: 36px; }

/* Section heading */
.section-hd { text-align: center; font-size: clamp(22px, 3vw, 30px); }
.section-kicker { text-align: center; color: var(--gold-2); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 1.5px; margin: 0 0 6px; }

/* Blog cards */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px; display: block;
  text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(160,18,30,.10); }
.blog-card { border-top: 3px solid var(--cat-color, var(--gold-2)); }
.blog-cat {
  display: inline-block; color: #fff; background: var(--cat-color, var(--gold-2));
  font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 4px;
}
.blog-card h3 { font-size: 17px; margin: 8px 0; color: var(--maroon); }
.blog-card p  { font-size: 14px; color: var(--text-2); margin: 8px 0 14px; }
.blog-meta { color: var(--text-3); font-size: 12px; }

/* App download band */
.band-app { background: var(--band-grad); color: #fff; text-align: center; }
.band-app h2 { color: #fff; font-size: clamp(22px, 3vw, 30px); }
.band-app p  { color: rgba(255,255,255,.9); max-width: 620px; margin: 8px auto 20px; }

/* App promo banner — rich two-column treatment matching the brand hero */
.app-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(112deg, #2a0a0c 0%, #7a0f1c 38%, #b8121f 70%, #e5811a 100%);
  border-radius: 14px; padding: 40px 44px;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: center;
  color: #f7e7c8;
}
.app-banner-copy { position: relative; z-index: 1; }
.app-kicker {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #2a0a0c;
  background: linear-gradient(135deg, #ffdf8f, #f2b127);
  padding: 5px 12px; border-radius: 20px; margin: 0 0 16px;
}
.app-banner h2 { font-size: clamp(26px, 3.4vw, 40px); color: var(--gold); margin: 0 0 12px; line-height: 1.18; }
.app-banner .app-banner-copy > p { font-size: 15.5px; line-height: 1.8; color: #fff; max-width: 56ch; margin: 0; font-weight: 500; }
.app-feature-row { display: flex; gap: 12px 26px; flex-wrap: wrap; margin: 24px 0 28px; }
.app-feature-row span { font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.app-feature-row i { color: var(--gold); font-style: normal; }
/* The 6-language list is far too wide to hold as one unbreakable line on a
   phone — being the only long item in this flex row, it was forcing the
   whole .app-banner wider than the viewport, cutting off everything else in
   the section. Every other item here is a short single label, so scope the
   fix to just this one instead of removing nowrap for the whole row. */
.app-feat-langs, .app-feat-langs span { white-space: normal !important; max-width: 100%; }
.app-cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.app-play-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px; border-radius: 8px; text-decoration: none;
  background: linear-gradient(140deg, #ffe9a8, #f2b127 55%, #e0801a);
  color: #2a0a0c; font-size: 17px; font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .15s ease;
}
.app-play-btn:hover { transform: translateY(-2px); color: #2a0a0c; }
.app-play-btn .play-glyph { font-size: 21px; }
.app-free-note { font-size: 13.5px; color: #f0d9a8; font-weight: 600; }
.app-banner-phone { position: relative; z-index: 1; display: grid; place-items: center; }
.phone-frame {
  width: 226px; min-height: 400px; border-radius: 30px; border: 3px solid rgba(242,193,78,.55);
  background: #fff; padding: 12px 10px; display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
.phone-notch { height: 4px; width: 52px; background: #e0c491; border-radius: 4px; margin: 2px auto 4px; }
.phone-card {
  background: linear-gradient(135deg, #b8121f, #e5811a); border-radius: 10px;
  padding: 11px 12px; color: #fff8ea;
}
.phone-card-kicker { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.phone-card-title { font-size: 14px; font-weight: 700; margin-top: 3px; line-height: 1.3; }
.phone-row {
  background: #fff; border: 1px solid #e0e6f0; border-radius: 8px;
  padding: 8px 10px; display: flex; justify-content: space-between; gap: 8px;
  font-size: 10.5px;
}
.phone-row span { color: #8b8598; }
.phone-row b { color: #241f2b; font-weight: 600; font-variant-numeric: tabular-nums; }
.phone-offline {
  margin-top: auto; background: linear-gradient(135deg, #fff6e2, #fdeac4);
  border: 1px solid #e8d5a9; border-radius: 8px; padding: 9px 10px;
  font-size: 10px; color: var(--maroon); font-weight: 700;
}
@media (max-width: 900px) {
  /* minmax(0, 1fr), not bare 1fr — a bare 1fr track's implicit minimum is
     "auto" (its content's min-content width), so the track refuses to
     shrink below that no matter how narrow the viewport is. That was
     forcing this whole banner wider than the phone screen and clipping
     every line of text in it. minmax(0, ...) removes that floor. */
  .app-banner { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 32px 24px; }
  .app-feature-row, .app-cta-row { justify-content: center; }
  .app-banner-phone { display: none; }
}

/* Footer */
.site-footer { background: var(--dark); color: #d9c9c1; padding-top: 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 32px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-col h4 { color: var(--gold); font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 12px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col ul li { margin: 8px 0; }
.foot-col a { color: #cfc3bc; font-size: 14px; }
.foot-col a:hover { color: var(--gold); }
.foot-blurb { color: #b8ada6; font-size: 14px; margin: 12px 0 0; }
.foot-bar { border-top: 1px solid rgba(255,255,255,.10); padding: 16px 0; text-align: center; font-size: 13px; color: #a89e97; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; border-radius: 8px;
       font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; border: 1px solid transparent;
       transition: all .18s ease; white-space: nowrap; }
.btn-ghost { background: transparent; color: var(--maroon); border-color: var(--maroon); }
.btn-ghost:hover { background: var(--maroon); color: #fff; }
.btn-lg { padding: 14px 32px; font-size: 15px; border-radius: 10px; }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.14); }

/* Two-person forms (marriage matching) — side by side on desktop, stacked
   on mobile so fields never run off the right edge of the viewport. */
.match-people-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .match-people-grid { grid-template-columns: 1fr; gap: 8px; } }

/* Field */
.field { display: flex; flex-direction: column; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font: inherit;
  background: #fff; color: var(--text); transition: border-color .18s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-2); outline: none; }

.user-chip { color: var(--maroon); font-size: 13px; padding: 4px 10px; background: rgba(160,18,30,.08); border-radius: 999px; }

/* Text center */
.text-center { text-align: center; }

/* App band inner */
.band-app-inner { padding: 40px 20px; }
.band-app-copy { max-width: 640px; margin: 0 auto; }
.pill-free { display: inline-block; background: rgba(255,255,255,.24); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-left: 8px; }

/* Header actions on tiny screens */
@media (max-width: 480px) {
  .nav-auth .btn { padding: 6px 12px; font-size: 13px; }
}

/* Hide social links on very tight header */
@media (max-width: 700px) {
  .social-links { display: none; }
}

/* Slide dots better positioning on mobile */
@media (max-width: 500px) {
  .slide-dots { bottom: 12px; }
  .slide-dots button { width: 8px; height: 8px; }
}

/* North Indian chart wrapper */
.chart-svg text { font-family: var(--font-body); }

/* ==========================================================================
   Readability pass — bolder base weights, darker text colours
   ========================================================================== */
.hero-sub, .hero-copy p            { color: rgba(255,255,255,.96); font-weight: 500; }
.section p, .section li            { color: #1a1420; font-weight: 500; }
.svc-card p                        { color: #2f2a3a; font-weight: 500; }
.svc-card h3                       { font-weight: 800; }
.blog-card p                       { color: #2f2a3a; font-weight: 500; }
.blog-card h3                      { font-weight: 800; }
.blog-meta                         { color: #4a4458; font-weight: 500; }
.foot-blurb                        { color: #e8dcd3; font-weight: 500; }
.foot-col a                        { color: #ece0d8; font-weight: 500; }
.foot-col h4                       { color: var(--gold); font-weight: 800; }
.foot-bar                          { color: #cabfb7; font-weight: 500; }
.asr h4                            { font-weight: 800; }
.asr p                             { color: #2f2a3a; font-weight: 500; }
.p-cell .p-lbl                     { color: #4a4458; font-weight: 700; }
.p-cell .p-val                     { color: #0f0b16; font-weight: 800; }
.p-table td, .d-table td           { color: #0f0b16; font-weight: 500; }
.p-table th, .d-table th           { font-weight: 800; }
.mantra-card .mantra-text          { color: #0f0b16; font-weight: 600; }
.mantra-card .mantra-translit      { color: #2f2a3a; font-weight: 600; }
.rasi-card h4                      { font-weight: 800; }
.rasi-card .rasi-sub               { color: #2f2a3a; font-weight: 500; }
.section-hd                        { font-weight: 800; }
.field label                       { color: #0f0b16; font-weight: 700; }
.field input, .field select, .field textarea {
  color: #0f0b16; font-weight: 500;
}
.field input::placeholder,
.field textarea::placeholder       { color: #6d6678; font-weight: 500; }
.btn                               { font-weight: 700; }
.hero-title                        { font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.20); }
.hero-kicker                       { font-weight: 700; }
.lang-btn                          { font-weight: 700; }
.lang-opt                          { font-weight: 600; }
[data-mobilenav] a                 { font-weight: 700; }

/* ==========================================================================
   Report page — print / PDF styles + on-screen refinements
   Ads and any interactive controls are hidden in the print output so the PDF
   the user saves is a clean report — no promotional content at all.
   ========================================================================== */

/* Report page-level layout */
.report-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 12px 16px; background: #fff; border: 1px solid var(--border);
  border-radius: 12px;
}
.report-toolbar .toolbar-title { font-weight: 800; font-size: 18px; color: var(--maroon); }
.report-toolbar .toolbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.report-toolbar .btn-sm { padding: 8px 14px; font-size: 13px; }

/* Report meta card — the birth details block that becomes the PDF header */
.report-meta {
  background: linear-gradient(135deg, #fff8ea, #fbf1dd);
  border: 1px solid var(--gold); border-radius: 12px;
  padding: 18px 22px; margin-bottom: 20px;
}
.report-meta .meta-name {
  font-weight: 800; font-size: 22px; color: var(--maroon); margin: 0 0 4px;
}
.report-meta .meta-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 20px; font-size: 14px; color: #2f2a3a; margin-top: 6px;
}
.report-meta .meta-details strong { color: #0f0b16; }

/* Chart-style switcher already responsive; ensure it collapses cleanly */
@media (max-width: 480px) {
  .report-toolbar { padding: 10px 12px; }
  .report-toolbar .btn-sm { padding: 6px 10px; font-size: 12px; }
  .chart-style-switch button { padding: 5px 12px; font-size: 12px; }
}

/* --- PRINT / PDF: hide UI chrome + ads, keep only the report body --- */
@media print {
  /* Reset chrome — no color background, no shadow */
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 12pt; line-height: 1.4; }

  /* Hide EVERY non-content element */
  .site-header,
  .site-footer,
  .breadcrumb-nav,
  .toast-host,
  .noprint,
  .ad-slot,
  .ad-mobile-anchor,
  .floater,
  /* Both of these are siblings of <footer class="site-footer">, not
     descendants — so .site-footer's own display:none above never touched
     them. That let the "Daily palan on your phone" promo bar and the
     bottom-right floating app pill leak into every printed report and,
     since they render right at the top of whichever page the print flow
     happened to break on, visually collide with the fixed banner header. */
  .footer-app-bar,
  .floating-app-btn,
  .report-toolbar,
  .chart-style-switch,
  #login-gate,
  [data-hamburger],
  [data-mobilenav],
  .social-links,
  .lang-wrap,
  .header-actions,
  .btn,
  .slide-dots,
  script,
  noscript,
  /* Google Auto ads (rail/anchor/vignette/multiplex) inject their own
     elements straight into <body>, outside any .ad-slot wrapper this site
     controls — so a saved/printed report needs these catch-all selectors
     too, not just the manually-placed slots above, or a page with Auto ads
     turned on would leak an ad into the downloaded PDF. */
  ins.adsbygoogle,
  .google-auto-placed,
  .googlepublisherpluginad,
  div[id^="google_ads_iframe_"],
  iframe[id^="google_ads_iframe_"],
  [data-anchor-status],
  [data-vignette-loaded],
  [data-side-rail-status] { display: none !important; }

  /* Keep the report visible, drop all card chrome for a clean sheet */
  .section { padding: 0 !important; }
  .wrap { max-width: 100% !important; padding: 0 !important; }
  #report-root { display: block !important; padding-bottom: 20pt !important; }
  .report-meta {
    background: #fff !important; border: 1px solid #444 !important;
    padding: 12pt 16pt !important; margin: 26pt 0 12pt !important;
    page-break-inside: avoid; break-inside: avoid;
  }
  /* Branded banner header/footer for downloadable reports — see
     partials/report-print-banner.php (and its JS twin, DJ.reportBrand
     .headerHtml/.footerHtml, for reports built client-side like
     numerology's). Deliberately placed IN NORMAL DOCUMENT FLOW — once at
     the very top of the report, once at the very end — rather than
     position:fixed repeating on every page. Fixed positioning was tried
     first (it's the only way to get a TRUE repeating per-page header/footer)
     but proved unreliable across real print-to-PDF exports: backgrounds
     silently not printing, a `bottom`-anchored footer not rendering at all,
     and finally both bands landing stacked together in the wrong place once
     the page's actual rendered height didn't match the assumed A4 height.
     In-flow placement can't hit any of those failure modes — it just prints
     wherever it naturally falls in the content, exactly like every other
     element on the page. */
  /* No display:table / table-cell, no flexbox, no absolute positioning —
     every one of those was tried for centering this banner's content and
     each broke in a real downloaded PDF in a different way (flexbox left
     content sitting high; table-cell text drifted left in one report;
     absolute positioning drifted the same way in another; a plain table
     cell with no width hint STILL drifted left with visible empty gradient
     space on the right, confirmed by the reporter drawing an arrow at the
     gap). table-layout:fixed with a single undefined-width column is a
     genuine CSS edge case, and by that point it was the last "clever"
     layout mechanism still in use here. What's left now is the one CSS
     centering technique with no known cross-engine reliability issues:
     text-align:center on a plain block. Vertical position is a fixed
     padding-top instead of vertical-align:middle — less elegant (it won't
     re-center itself if the content's height ever changes) but it's a
     plain box-model number, not a layout algorithm that could disagree
     between a browser tab and a real print engine. */
  .report-print-banner {
    /* Full bleed — extends past the @page margin (14mm, see below) all the
       way to the physical page edge on both sides, while the rest of the
       report content keeps its normal margin. Negative side margins here
       pull the box out by exactly the page margin's width; the matching
       width: calc() grows it back out to fill that reclaimed space. Padding
       on .rpb-header/.rpb-footer (not the page margin) is what keeps the
       actual text from also bleeding to the edge. */
    width: calc(100% + 28mm); margin-left: -14mm; margin-right: -14mm;
    background: linear-gradient(to right,
      #7a1220 0%, #932d1f 6%, #c5680f 18%, #d38137 26%,
      #fde698 42%, #fee9a8 50%, #ffe493 58%,
      #e58a1f 76%, #c55509 90%, #7a1220 100%);
    border: 1px solid #7a1220; box-sizing: border-box;
    color: #4a0a12;
    text-align: center;
    page-break-inside: avoid; break-inside: avoid;
    /* Chrome/Firefox skip CSS backgrounds in print by default unless the
       visitor manually ticks "Background graphics" in the print dialog —
       most never do, which is why the banner showed up as a blank white box
       with just its border. These force the banner's gradient/colors to
       print regardless of that setting (supported in current Chrome, Edge,
       Firefox). */
    -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact;
  }
  /* height + padding-top approximate the old vertical-align:middle — sized
     so ~99pt of stacked content (38pt logo + margins + two text lines)
     centers within an 112pt-tall box, and ~38pt of footer content centers
     within 48pt. */
  .rpb-header { height: 112pt; padding: 15pt 34pt 0; margin-top: 0; margin-bottom: 24pt; box-sizing: border-box; page-break-after: avoid; break-after: avoid; }
  .rpb-footer { height: 48pt; padding: 10pt 34pt 0; margin-top: 28pt; margin-bottom: 0; box-sizing: border-box; }
  .rpb-text { text-align: center; line-height: 1.35; }
  .rpb-logo, .rpb-logo-glyph { display: inline-block; height: 38pt; width: 38pt; margin-bottom: 6pt; }
  .rpb-logo { object-fit: contain; border-radius: 4pt; }
  .rpb-logo-glyph { text-align: center; font-size: 30pt; line-height: 38pt; }
  /* Header brand name only — the footer's own brand line is longer ("Site ·
     domain.com" vs just "Site"), so it gets the smaller .rpb-footer-brand
     below instead of reusing this. Sharing one size between both made the
     footer line wrap to a second one and overflow the banner's gradient
     background onto plain white — which in turn pushed the whole footer
     onto its own mostly-blank extra page. */
  .rpb-brand { font-weight: 800; font-size: 23pt; }
  .rpb-report-title { font-weight: 700; font-size: 13pt; margin-top: 7pt; }
  .rpb-footer-brand { font-weight: 800; font-size: 14pt; letter-spacing: .2pt; white-space: nowrap; }
  .rpb-app-cta { font-weight: 700; font-size: 10pt; margin-top: 6pt; }
  #chart-summary,
  .chart-box,
  .p-table, .d-table {
    background: #fff !important; box-shadow: none !important; border: 1px solid #444 !important;
  }
  h1, h2, h3 { color: #000 !important; }
  h2 { font-size: 14pt; margin: 12pt 0 6pt; page-break-after: avoid; break-after: avoid; }
  .p-cell .p-lbl { color: #444 !important; font-size: 9pt !important; }
  .p-cell .p-val { color: #000 !important; }
  .p-table, .d-table { page-break-inside: auto; }
  .p-table tr, .d-table tr { page-break-inside: avoid; break-inside: avoid; }
  .p-table thead, .d-table thead { display: table-header-group; }
  .yoga-pill, .dosha-pill {
    background: #fff !important; color: #000 !important; border: 1px solid #444 !important;
  }
  .yd-card {
    background: #fff !important; border: 1px solid #444 !important; border-left: 3pt solid #444 !important;
    page-break-inside: avoid; break-inside: avoid;
  }
  .yd-card-name { color: #000 !important; font-size: 11pt; }
  .yd-card-strength { background: #fff !important; color: #000 !important; border: 1px solid #444 !important; }
  .yd-field-label { color: #444 !important; }
  .yd-field-body { color: #333 !important; font-size: 10pt; }
  [data-yogas], [data-doshas] {
    display: flex !important; flex-direction: column !important; gap: 8pt !important;
  }
  /* Charts side-by-side on print */
  #report-root > div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8pt !important; page-break-inside: avoid; break-inside: avoid;
  }
  /* Every stored URL / link should print as plain text */
  a[href]::after { content: ""; }
  /* Page setup. Standard margins — the banner is in-flow now (not fixed), so
     nothing needs extra reserved clearance the way a repeating fixed band
     did. */
  @page { size: A4; margin: 14mm; }
}

/* Hide print-only elements on screen */
.print-only { display: none; }
@media print { .print-only { display: block; } }

/* Current-location suggestion under the birth-place field */
.here-hint {
  margin-top: 8px; font-size: 13px; color: var(--text-2); font-weight: 500;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
}
.here-chip {
  background: var(--paper); border: 1px solid var(--gold-2); color: var(--maroon);
  border-radius: 999px; padding: 4px 12px; font: 700 12px/1.2 var(--font-body);
  cursor: pointer; transition: background .15s;
}
.here-chip:hover { background: var(--gold); color: var(--dark); }
.here-note { color: var(--text-3); font-size: 12px; }

/* Auth-required banner shown above forms that produce personal reports */
.auth-banner {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(242,193,78,.12), rgba(160,18,30,.05));
  border: 1px solid var(--gold-2); border-left: 4px solid var(--maroon);
  border-radius: 12px; padding: 14px 18px;
}
.auth-banner .auth-icon { font-size: 26px; flex: none; }
.auth-banner .auth-title { font-weight: 800; color: var(--maroon); font-size: 15px; margin-bottom: 2px; }
.auth-banner .auth-body  { color: var(--text-2); font-size: 13px; font-weight: 500; line-height: 1.4; }
.auth-banner .auth-cta { flex: none; }
.auth-banner .btn-sm { padding: 8px 16px; font-size: 13px; }
@media (max-width: 600px) {
  .auth-banner { flex-wrap: wrap; }
  .auth-banner .auth-cta { width: 100%; }
  .auth-banner .btn-sm { width: 100%; }
}

/* Bottom download bar — repeats the toolbar's download action after the full report */
.report-bottom-bar { display: flex; justify-content: center; margin: 40px 0 8px; padding-top: 24px; border-top: 1px solid var(--border); }

/* Dasha / Bukthi / Antara drill-down cards */
.dasha-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.dasha-card.current { border-color: var(--gold-2); box-shadow: 0 0 0 2px rgba(242,193,78,.25); }
.dasha-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dasha-card-planet { font: 700 15px var(--font-head); color: var(--maroon); }
.dasha-card-status { font: 700 11px/1 var(--font-body); padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
.dasha-card-status.status-completed { background: var(--paper); color: var(--text-3); }
.dasha-card-status.status-current { background: var(--gold); color: var(--dark); }
.dasha-card-status.status-upcoming { background: #eef1fb; color: var(--text-3); }
.dasha-card-period { font: 600 12.5px var(--font-body); color: var(--text-3); margin: 4px 0 8px; }
.dasha-card-theme { font: 500 13.5px/1.55 var(--font-body); color: var(--text-2); background: var(--paper); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.antara-row td { padding: 0 !important; background: rgba(242,193,78,.08); }
.antara-head { font: 700 12px var(--font-head); color: var(--gold-2); padding: 10px 12px 0; }
.antara-table { margin: 4px 12px 10px; width: calc(100% - 24px); }

/* Chart-calculating loading overlay — shown briefly on /jathagam submit */
body.no-scroll { overflow: hidden; }
.chart-loading-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(ellipse at center, var(--dark) 0%, var(--darker) 100%);
}
.chart-loading-orbit {
  position: relative; width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.chart-loading-ring {
  position: absolute; border-radius: 50%;
  border: 2px solid transparent;
}
.chart-loading-ring.ring-1 {
  inset: 0;
  border-top-color: var(--gold);
  border-right-color: var(--gold);
  animation: dj-orbit 1.6s linear infinite;
}
.chart-loading-ring.ring-2 {
  inset: 16px;
  border-bottom-color: var(--orange);
  border-left-color: var(--orange);
  animation: dj-orbit-rev 2.1s linear infinite;
}
.chart-loading-om {
  font-size: 34px; line-height: 1; color: var(--gold);
  animation: om-spin 1.8s ease-in-out infinite;
}
.chart-loading-text {
  font: 700 14px/1.4 var(--font-head); color: var(--cream); letter-spacing: .3px;
}
@keyframes dj-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes dj-orbit-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes om-spin {
  0%, 100% { text-shadow: 0 0 8px var(--gold), 0 0 2px var(--gold); transform: scale(1); }
  50% { text-shadow: 0 0 22px var(--orange), 0 0 10px var(--gold); transform: scale(1.12); }
}

/* Site preloader — shown on every page while app.js boots (see head.php).
   Reuses the dj-orbit/om-spin keyframes above for a consistent brand feel
   with the chart-computation loader. Fixed overlay, zero layout impact. */
.dj-preloader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, var(--dark) 0%, var(--darker) 100%);
  transition: opacity .4s ease;
}
.dj-preloader.is-hidden { opacity: 0; pointer-events: none; }
.dj-preloader-orbit { position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }
.dj-preloader-ring { position: absolute; border-radius: 50%; border: 2px solid transparent; }
.dj-preloader-ring.ring-1 { inset: 0; border-top-color: var(--gold); border-right-color: var(--gold); animation: dj-orbit 1.6s linear infinite; }
.dj-preloader-ring.ring-2 { inset: 14px; border-bottom-color: var(--orange); border-left-color: var(--orange); animation: dj-orbit-rev 2.1s linear infinite; }
.dj-preloader-om { font-size: 30px; line-height: 1; color: var(--gold); animation: om-spin 1.8s ease-in-out infinite; }
/* Admin-configured logo variant (falls back to .dj-preloader-om above when
   no logo is set) — sized to sit inside ring-2's 72px circle with room to
   spare, same spin as the glyph it replaces for a consistent feel. */
.dj-preloader-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; animation: om-spin 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .dj-preloader-ring, .dj-preloader-om, .dj-preloader-logo { animation: none; }
  .dj-preloader { transition: none; }
}

/* Ashtavargam — Sarvashtakavarga bar chart + Bhinnashtakavarga table */
.av-chart-wrap {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 8px 4px; margin-bottom: 18px;
}
.av-bars-svg { display: block; width: 100%; height: auto; }
.av-table-scroll { overflow-x: auto; }
.av-table { min-width: 760px; font-size: 12.5px; }
.av-table th, .av-table td { text-align: center; white-space: nowrap; }
.av-table th:first-child, .av-table td:first-child { text-align: left; white-space: nowrap; font-weight: 700; color: var(--maroon); }
.av-cell { font-variant-numeric: tabular-nums; }
.av-cell.av-strong { background: rgba(30,122,60,.14); color: #1e5a26; font-weight: 700; }
.av-cell.av-avg { background: rgba(26,86,219,.10); color: #1a3fae; font-weight: 700; }
.av-cell.av-weak { background: rgba(160,18,30,.10); color: var(--maroon); font-weight: 700; }
.av-rowtotal { font-weight: 800; color: var(--maroon); background: var(--paper); font-variant-numeric: tabular-nums; }
.av-sarva-row td { border-top: 2px solid var(--gold-2); font-weight: 800; }
.av-sarva-row td:first-child { color: var(--maroon); }
.av-note { font: 500 12.5px/1.6 var(--font-body); color: var(--text-2); background: var(--paper); border-radius: 8px; padding: 10px 14px; margin-top: 12px; }

/* Hero v2 — badge pill, gradient CTA, chart-type cards (matches reference design) */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(242,193,78,.14); border: 1px solid rgba(242,193,78,.35);
  color: var(--gold); font: 700 12px/1 var(--font-body);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: inline-block; }
.btn-gradient {
  background: linear-gradient(135deg, var(--orange), var(--gold-2));
  border: none; color: var(--darker); font-weight: 800;
}
.btn-gradient:hover { filter: brightness(1.08); }

/* Hero promo grid — 2x2 colour-blocked cards (matches reference design) */
.hero-promo-grid.hero-cards { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.hero-promo-card {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  border-radius: 14px; padding: 18px 16px; text-decoration: none; min-height: 108px;
  box-shadow: 6px 8px 24px rgba(0,0,0,.35); transition: transform .2s ease, box-shadow .2s ease;
}
.hero-promo-card:hover { box-shadow: 8px 14px 30px rgba(0,0,0,.45); }
.hero-promo-card.promo-orange { background: linear-gradient(135deg, var(--orange), var(--gold-2)); }
.hero-promo-card.promo-maroon { background: linear-gradient(135deg, #6b1420, #8f1420); border: 1px solid rgba(242,193,78,.3); }
.hero-promo-card.promo-gold   { background: linear-gradient(135deg, #f2c14e, #e5811a); }
.hero-promo-card .promo-icon { font-size: 24px; margin-bottom: 2px; }
.hero-promo-card .promo-k { font: 800 15px var(--font-head); color: #fff; }
.hero-promo-card.promo-orange .promo-k,
.hero-promo-card.promo-gold .promo-k { color: #2a0d0d; }
.hero-promo-card .promo-k.promo-free { font-size: 22px; letter-spacing: 1px; }
.hero-promo-card .promo-v { font: 600 11px/1.35 var(--font-body); color: rgba(255,255,255,.85); }
.hero-promo-card.promo-orange .promo-v,
.hero-promo-card.promo-gold .promo-v { color: rgba(42,13,13,.75); }

.hero-chart-cards { display: flex; flex-direction: column; gap: 12px; }
.hero-chart-cards .chart-hc {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 14px 16px; text-decoration: none;
  backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s;
}
.hero-chart-cards .chart-hc:hover { background: rgba(255,255,255,.11); border-color: rgba(242,193,78,.4); }
.hero-chart-cards .icon {
  width: 40px; height: 40px; min-width: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.hero-chart-cards .icon-purple { background: rgba(155,109,255,.22); }
.hero-chart-cards .icon-blue   { background: rgba(78,168,242,.22); }
.hero-chart-cards .icon-yellow { background: rgba(242,193,78,.22); }
.hero-chart-cards .k { font: 700 13.5px var(--font-head); color: #fff; margin-bottom: 2px; }
.hero-chart-cards .v { font: 500 11.5px/1.3 var(--font-body); color: rgba(255,255,255,.7); }
@media (max-width: 900px) {
  .hero-chart-cards { display: none; }
}

/* Shadbala — six-fold strength table */
.sb-pill { font: 700 11px/1 var(--font-body); padding: 4px 10px; border-radius: 999px; margin-left: auto; }
.sb-pill.sb-suff { background: rgba(46,125,50,.14); color: #1e5a26; }
.sb-pill.sb-insuff { background: rgba(160,18,30,.14); color: var(--maroon); }
.sb-note { font: 500 12px/1.5 var(--font-body); color: var(--text-3); margin-top: 10px; }

/* Shadbala — bar-per-planet layout */
.sb-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.sb-row { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.sb-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sb-name { font: 700 13.5px var(--font-head); color: var(--text-2); }
.sb-track { height: 10px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.sb-fill { height: 100%; border-radius: 999px; }
.sb-fill.sb-suff { background: #2e8b57; }
.sb-fill.sb-insuff { background: var(--maroon); }
.sb-nums { font: 500 11.5px var(--font-body); color: var(--text-3); margin-top: 6px; }
.sb-nums b { color: var(--text-2); }

/* Popular Services — focused 4-card row right under the hero */
.popular-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 20px; }
.popular-svc-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--gold-2);
  border-radius: 14px; padding: 22px 20px; text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: transform .15s, box-shadow .15s;
}
.popular-svc-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.09); }
.popular-svc-icon { font-size: 26px; line-height: 1; margin-bottom: 4px; }
.popular-svc-card h3 { font: 800 16px var(--font-head); color: var(--maroon); margin: 0; }
.popular-svc-card p { font: 500 13px/1.5 var(--font-body); color: var(--text-2); margin: 0; flex: 1; }
.popular-svc-card .btn { margin-top: 6px; pointer-events: none; }

/* Free Jathagam page — animated orbit visual + 2-column form layout */
.jathagam-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; margin-top: 24px; align-items: start; }
@media (max-width: 760px) { .jathagam-layout { grid-template-columns: minmax(0, 1fr); } }

.jathagam-orbit-panel { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.jathagam-form-col { background: #fff; padding: 28px; border-radius: 14px; border: 1px solid var(--border); margin-top: 0; }

.orbit-solar { position: relative; width: 100%; aspect-ratio: 1; margin: 0 auto; max-width: 280px; }
.orbit-ring {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1px dashed rgba(160,18,30,.18);
  transform: translate(-50%, -50%);
  animation-name: orbit-spin; animation-timing-function: linear; animation-iteration-count: infinite;
}
.orbit-ring.ring-1 { width: 32%; height: 32%; animation-duration: 6s; }
.orbit-ring.ring-2 { width: 46%; height: 46%; animation-duration: 10s; }
.orbit-ring.ring-3 { width: 58%; height: 58%; animation-duration: 15s; }
.orbit-ring.ring-4 { width: 70%; height: 70%; animation-duration: 22s; }
.orbit-ring.ring-5 { width: 82%; height: 82%; animation-duration: 30s; }
.orbit-ring.ring-6 { width: 96%; height: 96%; animation-duration: 40s; }
.orbit-body {
  position: absolute; top: 0; left: 50%; width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%); box-shadow: 0 0 6px rgba(0,0,0,.25);
}
.orbit-sun {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, #ffd873, var(--orange));
  color: #fff; font-size: 18px; box-shadow: 0 0 18px rgba(242,193,78,.7);
}
@keyframes orbit-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit-ring { animation: none; } }

.pl-moon     { background: #cfd8e3; }
.pl-mars     { background: #c0392b; }
.pl-mercury  { background: #8e9aa8; }
.pl-jupiter  { background: #c9922b; }
.pl-venus    { background: #f2d675; }
.pl-saturn   { background: #a0784a; }

.orbit-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; margin-top: 16px; }
.orbit-legend span { display: flex; align-items: center; gap: 6px; font: 600 11.5px var(--font-body); color: var(--text-3); }
.orbit-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.gender-radio-row { display: flex; gap: 16px; align-items: center; height: 40px; }
.gender-radio { display: flex; align-items: center; gap: 6px; font: 500 14px var(--font-body); color: var(--text-2); cursor: pointer; }
.gender-radio input { accent-color: var(--maroon); width: 16px; height: 16px; }

.trust-badge-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.trust-badge {
  display: flex; align-items: center; gap: 8px; font: 600 12.5px var(--font-body); color: var(--text-2);
  background: var(--paper); border-radius: 999px; padding: 8px 16px;
}
.trust-badge::before { content: none; }

/* Dasha card glyph icon + keyword pills */
.dasha-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 13px; color: #fff;
  margin-right: 4px; vertical-align: middle;
}
.dasha-glyph.pl-0 { background: #e5811a; }
.dasha-glyph.pl-1 { background: #8e9aa8; }
.dasha-glyph.pl-2 { background: #c0392b; }
.dasha-glyph.pl-3 { background: #2e8b57; }
.dasha-glyph.pl-4 { background: #c9922b; }
.dasha-glyph.pl-5 { background: #d9739f; }
.dasha-glyph.pl-6 { background: #4a4a68; }
.dasha-glyph.pl-7 { background: #6b46a3; }
.dasha-glyph.pl-8 { background: #7a5230; }
.dasha-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.dasha-kw-pill {
  font: 600 11px/1 var(--font-body); color: var(--maroon);
  background: rgba(160,18,30,.08); border: 1px solid rgba(160,18,30,.18);
  padding: 4px 10px; border-radius: 999px;
}

/* Bhava Phalam (12-house) and Graha Phalam (9-planet) prediction cards */
.bhava-grid, .graha-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 10px; }
.bhava-card, .graha-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.bhava-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.bhava-num {
  width: 30px; height: 30px; min-width: 30px; border-radius: 50%;
  background: var(--paper); color: var(--maroon); font: 800 14px var(--font-head);
  display: flex; align-items: center; justify-content: center;
}
.bhava-name { font: 700 14px var(--font-head); color: var(--maroon); }
.bhava-score-label { font: 600 11px var(--font-body); color: var(--text-3); }
.bhava-meta { font: 600 11.5px var(--font-body); color: var(--text-3); margin-bottom: 6px; }
.bhava-body { font: 500 13px/1.5 var(--font-body); color: var(--text-2); }

.graha-card-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.graha-glyph {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; min-width: 30px; border-radius: 50%; font-size: 15px; color: #fff;
}
.graha-name { font: 700 14px var(--font-head); color: var(--maroon); }
.graha-pos { font: 500 11.5px var(--font-body); color: var(--text-3); }
.graha-card-head .dig-pill { margin-left: auto; }
.graha-body { font: 500 13px/1.5 var(--font-body); color: var(--text-2); }

/* Varga Vimsopaka Bala — 9-planet 0-20 strength bars */
.vm-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.vm-row { display: grid; grid-template-columns: 90px 1fr 60px; align-items: center; gap: 10px; }
.vm-name { font: 700 13px var(--font-head); color: var(--text-2); }
.vm-track { height: 10px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.vm-fill { height: 100%; border-radius: 999px; }
.vm-fill.vm-good { background: #2e8b57; }
.vm-fill.vm-avg  { background: var(--gold-2); }
.vm-fill.vm-weak { background: var(--maroon); }
.vm-score { font: 700 12px var(--font-body); color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }

/* Auspicious Timing — House / Vehicle / Marriage cards */
.at-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 10px; }
.at-card { background: var(--hero-grad); color: #fff; border-radius: 14px; padding: 18px 20px; }
.at-card.at-favorable { box-shadow: 0 0 0 2px var(--gold); }
.at-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.at-icon { font-size: 20px; }
.at-title { font: 800 15px var(--font-head); color: #fff; }
.at-field { margin-top: 8px; }
.at-field-label { font: 700 10.5px var(--font-body); color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .4px; }
.at-field-body { font: 500 13px/1.5 var(--font-body); color: rgba(255,255,255,.94); }
.at-field-body.at-best { color: var(--gold); font-weight: 700; }

/* Button hover/press animation (applies site-wide via .btn) */
.btn { transform: translateY(0); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-gradient:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 8px 20px rgba(229,129,26,.35); }

/* Hero slider — animated slide transition + staggered content entrance + nav arrows */
.hero .slide {
  opacity: 0; transform: scale(.96) translateY(14px);
  transition: opacity .8s cubic-bezier(.22,.9,.3,1), transform .8s cubic-bezier(.22,.9,.3,1);
}
.hero .slide.active { opacity: 1; transform: scale(1) translateY(0); }

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

/* Site-wide scroll-reveal (see DJ.reveal in app.js). opacity + transform
   only — never width/height/margin — so this never shifts layout (CLS-safe)
   and is deliberately kept off .ad-slot and its contents. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,.9,.3,1), transform .6s cubic-bezier(.22,.9,.3,1); }
.reveal.reveal-in { opacity: 1; transform: translateY(0); }
.hfc-text > * { opacity: 0; }
.slide.active .hfc-text > * { animation: heroContentUp .7s cubic-bezier(.22,.9,.3,1) both; }
.slide.active .hfc-text > *:nth-child(1) { animation-delay: .05s; }
.slide.active .hfc-text > *:nth-child(2) { animation-delay: .15s; }
.slide.active .hfc-text > *:nth-child(3) { animation-delay: .25s; }
.slide.active .hfc-text > *:nth-child(4) { animation-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  .hero .slide, .slide.active .hfc-text > * { animation: none !important; transition: none !important; }
}
.slide-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(242,193,78,.5); cursor: pointer;
  background: linear-gradient(135deg, var(--orange), var(--gold-2)); color: #fff; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.slide-nav:hover { filter: brightness(1.1); transform: translateY(-50%) scale(1.1); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.slide-nav-prev { left: 12px; }
.slide-nav-next { right: 12px; }
@media (max-width: 760px) { .slide-nav { width: 30px; height: 30px; font-size: 16px; } }

/* Graha Drishti — grouped per-planet cards */
.drishti-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.drishti-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.drishti-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.drishti-name { font: 700 14px var(--font-head); color: var(--maroon); }
.drishti-house { font: 600 11.5px var(--font-body); color: var(--text-3); margin-left: auto; }
.drishti-aspect-list { display: flex; flex-direction: column; gap: 6px; }
.drishti-aspect-row {
  display: grid; grid-template-columns: 110px 60px 1fr; gap: 10px; align-items: baseline;
  padding: 6px 0; border-top: 1px dashed var(--border);
}
.drishti-aspect-row:first-child { border-top: none; }
.drishti-target { font: 700 12.5px var(--font-body); color: var(--text-2); }
.drishti-strength { font: 600 11px var(--font-body); color: #1e5a26; }
.drishti-note { font: 500 12px/1.4 var(--font-body); color: var(--text-3); }
@media (max-width: 560px) {
  .drishti-aspect-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Blog listing page — main column + sidebar (popular/categories/app) */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; margin-top: 24px; }
/* minmax(0, 1fr), not bare 1fr — see the .app-banner comment above for why:
   a bare 1fr track can't shrink below its content's min-content width, so
   any long unbroken run of text in the main column (a long article title,
   an untranslated sentence, a URL) would silently widen this whole layout
   past the viewport on mobile. Used on Blog/Article/Gemstone/Numerology. */
@media (max-width: 900px) { .blog-layout { grid-template-columns: minmax(0, 1fr); } }
.blog-grid-list { grid-template-columns: 1fr; gap: 16px; }
.blog-grid-list .blog-card { display: grid; grid-template-columns: 72px 1fr; gap: 4px 16px; align-items: start; }
.blog-card-thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.blog-card-icon { display: flex; align-items: center; justify-content: center; font-size: 26px; }
@media (max-width: 560px) { .blog-grid-list .blog-card { grid-template-columns: 56px 1fr; } .blog-card-thumb { width: 56px; height: 56px; font-size: 20px; } }
.blog-readmore { color: var(--maroon); font-weight: 700; }

/* Article list pagination */
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 24px 0; }
.blog-page-btn {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--text); font: 700 13.5px var(--font-body); cursor: pointer; transition: all .15s ease;
}
.blog-page-btn:hover:not([disabled]) { border-color: var(--maroon); color: var(--maroon); }
.blog-page-btn.active { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.blog-page-btn[disabled] { opacity: .35; cursor: default; }
.blog-page-ellipsis { color: var(--text-3); font-weight: 700; padding: 0 2px; }

/* Related-articles grid (vertical cards, icon on top) */
.blog-grid:not(.blog-grid-list) .blog-card { display: flex; flex-direction: column; }
.blog-grid:not(.blog-grid-list) .blog-card-thumb { width: 56px; height: 56px; border-radius: 10px; margin-bottom: 10px; }
.blog-grid:not(.blog-grid-list) .blog-card-icon { font-size: 22px; }

.blog-list-head { text-align: center; margin-bottom: 8px; }

/* Article detail page — meta row, share buttons, generated banner */
.art-meta-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.art-meta-text { color: var(--text-3); font-size: 13px; }
.art-share-row { display: flex; gap: 8px; }
.art-share {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 700; border: none; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.art-share:hover { transform: translateY(-2px); filter: brightness(1.1); }
.art-share.sh-twitter  { background: #14171a; }
.art-share.sh-facebook { background: #1877f2; }
.art-share.sh-whatsapp { background: #25d366; }
.art-share.sh-print    { background: var(--gold-2); }
.art-banner {
  position: relative; border-radius: 12px; padding: 48px 20px; text-align: center; margin-bottom: 20px;
  color: #fff; overflow: hidden;
}
.art-banner::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.5), transparent),
                     radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,.4), transparent),
                     radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.4), transparent),
                     radial-gradient(1.5px 1.5px at 90% 60%, rgba(255,255,255,.4), transparent);
}
.art-banner-glyph { font-size: 44px; margin-bottom: 8px; position: relative; z-index: 1; }
.art-banner-cat { font: 700 13px var(--font-body); text-transform: uppercase; letter-spacing: 1.5px; opacity: .9; position: relative; z-index: 1; }
.art-body p { margin: 0 0 14px; line-height: 1.75; }
@media (max-width: 500px) { .art-meta-row { flex-direction: column; align-items: flex-start; } }

/* Article comments */
.comments-section {
  background: #fff; padding: 32px; border-radius: 14px; border: 1px solid var(--border); margin-top: 20px;
}
.comment-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.comment-item { display: flex; gap: 12px; align-items: flex-start; }
.comment-avatar {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--maroon); color: #fff;
  display: flex; align-items: center; justify-content: center; font: 800 14px var(--font-head);
}
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.comment-author { font: 700 13.5px var(--font-body); color: var(--maroon); }
.comment-date { font-size: 11.5px; color: var(--text-3); }
.comment-text { font-size: 13.5px; line-height: 1.6; color: #2f2a3a; margin: 0; word-break: break-word; }
.comment-form { border-top: 1px solid var(--border); padding-top: 20px; display: grid; gap: 14px; }
.comment-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.blog-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 90px; }
.blog-side-box { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.blog-side-box h3, .blog-side-box h4 { margin: 0 0 12px; color: var(--maroon); font: 800 15px var(--font-head); }
.blog-popular-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.blog-popular-list li a { display: flex; align-items: flex-start; gap: 10px; text-decoration: none; }
.blog-popular-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); color: var(--maroon);
  font: 800 12px var(--font-body); display: flex; align-items: center; justify-content: center;
}
.blog-popular-text { display: flex; flex-direction: column; gap: 2px; }
.blog-popular-title { font: 600 13px/1.4 var(--font-body); color: var(--text-2); }
.blog-popular-list li a:hover .blog-popular-title { color: var(--maroon); }
.blog-popular-meta { font: 500 11px var(--font-body); color: var(--text-3); }
.blog-cat-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-cat-chip {
  font: 600 12px var(--font-body); color: var(--text-2); text-decoration: none;
  background: var(--paper); border-radius: 999px; padding: 6px 12px;
  display: inline-flex; align-items: center; gap: 5px;
}
.blog-cat-chip:hover { background: var(--gold); color: var(--dark); }
.blog-cat-chip span { font-weight: 800; color: var(--maroon); }
.blog-cat-chip[style*="--cat-color"] { color: var(--cat-color); background: color-mix(in srgb, var(--cat-color) 12%, var(--paper)); }
.blog-cat-chip[style*="--cat-color"] span { color: var(--cat-color); }
.blog-side-box .ad-slot { margin: 0; }
.blog-side-app { background: var(--hero-grad); }
.blog-side-app h4 { color: #fff; }
.blog-side-app p { color: rgba(255,255,255,.85); }
.blog-side-app .app-kicker { color: var(--gold); }

/* FAQ accordion (numerology, and reusable anywhere else) */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 4px 20px; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 14px 26px 14px 0; position: relative;
  font: 700 14.5px var(--font-body); color: var(--text); line-height: 1.5;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: 400; color: var(--maroon); transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.7; color: var(--text-2); }

/* Breadcrumb trail */
.breadcrumb-nav { background: var(--paper); border-bottom: 1px solid var(--border); }
.breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; list-style: none; margin: 0; padding: 10px 0; font-size: 13px; }
.breadcrumb-item { display: flex; align-items: center; color: var(--text-2); }
.breadcrumb-item:not(:last-child)::after { content: '\203A'; margin: 0 8px; color: var(--gold-2); font-weight: 700; }
.breadcrumb-item a { color: var(--maroon); text-decoration: none; font-weight: 600; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.is-current { color: var(--text-2); opacity: .8; }
.breadcrumb-item.is-current span { font-weight: 500; }
@media (max-width: 500px) { .breadcrumb-list { font-size: 12px; padding: 8px 0; } }