/* ---------------------------------------------------------------
   AstrologyHindi theme

   Readers are 30+, largely on mid-range Android phones, reading Devanagari.
   So: real typefaces, large type, generous leading, honest contrast,
   underlined links and 48px tap targets.

   TYPE
   Two families, each covering Devanagari AND Latin, so Hindi and English
   pages share one voice instead of one looking like a translation of the
   other. Relying on the system default was the single biggest reason this
   site used to look machine-generated.

     Tiro Devanagari Hindi   headings. A traditional high-contrast face
                             commissioned for Devanagari, with matching
                             Latin. Carries the weight an astrology brand
                             wants without looking novelty.
     Mukta                   body. Designed by Ek Type specifically for
                             Indian scripts on screen. Open counters and a
                             tall x-height, which is what makes long
                             Devanagari paragraphs readable at 18px.

   Loaded with display=swap, so text paints immediately in the fallback and
   reflows once. To drop the third-party request entirely, self-host the two
   woff2 files into static/assets/ and swap the @font-face src.
   --------------------------------------------------------------- */

:root {
  /* surfaces: a warm cream page with white cards on top, so the page has
     depth instead of reading as one flat sheet */
  --page: #fbf7f0;
  --bg: #ffffff;
  --bg-soft: #f8f3ea;
  --bg-sink: #f1e9db;
  --line: #e7ded0;
  --line-strong: #d3c6b2;

  /* ink is a deep indigo-black rather than neutral grey, which ties the site
     to the indigo used in the article hero images */
  --ink: #1d1b30;
  --ink-2: #423f56;
  --muted: #6a6680;

  /* saffron primary, indigo secondary */
  --accent: #b3541e;
  --accent-ink: #8f4217;
  --accent-soft: #fdf1e3;
  --accent-line: #ebc59c;
  --indigo: #35306b;
  --indigo-soft: #eeecf7;
  --good: #1f7a4d;

  --radius: 12px;
  --radius-lg: 18px;
  --wrap: 1120px;
  --shadow: 0 1px 2px rgba(29, 27, 48, .04), 0 8px 24px -14px rgba(29, 27, 48, .16);

  --fs: clamp(17px, 1rem + 0.2vw, 19px);

  --sans: "Mukta", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --deva: "Mukta", "Noto Sans Devanagari", "Nirmala UI", "Mangal", system-ui, sans-serif;
  --serif: "Tiro Devanagari Hindi", "Noto Serif", Georgia, "Times New Roman", serif;
  --display: "Tiro Devanagari Hindi", "Noto Serif Devanagari", Georgia, serif;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;    /* so #anchors clear the sticky header */
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs);
  line-height: 1.72;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* cream base with a soft warm wash behind the top of the page */
  background:
    radial-gradient(1100px 420px at 50% -180px, #fdf0dc 0%, rgba(253, 240, 220, 0) 70%),
    var(--page);
  background-repeat: no-repeat;
}

/* Mukta sets Devanagari with generous internal leading, so this no longer
   needs the 1.95 that a fallback font required */
body[data-lang="hi"] {
  font-family: var(--deva);
  line-height: 1.85;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 18px;
}

.sr, .skip:not(:focus) {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus {
  position: fixed; inset-inline-start: 12px; top: 12px; z-index: 99;
  background: var(--accent); color: #fff;
  padding: 12px 18px; border-radius: 8px; font-weight: 600;
}

/* Body links stay underlined: the safest signal that something is clickable */
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-ink); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------- header: two tiers, nothing hidden behind icons ---------------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.head-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px; padding-block: 10px;
}

.logo {
  display: inline-flex; align-items: center; gap: 11px;
  margin-inline-end: auto;
  font-family: var(--display); font-weight: 400;
  font-size: 1.32rem; letter-spacing: .01em;
  color: var(--ink); text-decoration: none;
}
.logo:hover { color: var(--ink); text-decoration: none; }
.logo:hover .logo-mark { transform: rotate(90deg); }
/* the mark sits in a filled disc so the brand has an anchor instead of
   floating text next to a stray glyph */
.logo-mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  font-size: 1rem; line-height: 1;
  color: #fff; background: var(--indigo);
  border-radius: 50%;
  transition: transform .35s ease;
}
.logo-text { padding-block: 2px; }

/* language switch as a visible two-option toggle, not a hidden dropdown */
.lang-switch {
  display: inline-flex; border: 1px solid var(--line-strong);
  border-radius: 999px; overflow: hidden; background: var(--bg);
}
.lang-switch a {
  display: flex; align-items: center;
  min-height: 40px; padding: 0 16px;
  font-size: .95rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
}
.lang-switch a + a { border-inline-start: 1px solid var(--line); }
.lang-switch a:hover { background: var(--bg-sink); color: var(--ink); text-decoration: none; }
.lang-switch a[aria-current="true"] { background: var(--indigo); color: #fff; }

.nav-toggle {
  display: none; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 16px;
  font: inherit; font-size: .95rem; font-weight: 600;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  display: block; width: 17px; height: 2px; background: var(--ink); position: relative; border-radius: 2px;
}
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; }
.nav-toggle .bars::before { top: -5px; }
.nav-toggle .bars::after { top: 5px; }

.primary-nav { flex-basis: 100%; order: 9; border-top: 1px solid var(--line); }
.primary-nav ul {
  display: flex; flex-wrap: wrap; gap: 2px;
  list-style: none; margin: 0; padding: 4px 0;
}
.primary-nav a {
  display: flex; align-items: center;
  min-height: 42px; padding: 0 14px; border-radius: 999px;
  font-size: .97rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.primary-nav a:hover { background: var(--bg-sink); color: var(--ink); text-decoration: none; }
.primary-nav a[aria-current="page"] { color: #fff; background: var(--indigo); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .logo { font-size: 1.05rem; }
  .primary-nav { display: none; }
  .primary-nav.open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 0; padding: 6px 0 10px; }
  .primary-nav a { min-height: 50px; padding: 0 12px; font-size: 1rem; border-radius: 8px; }
  .primary-nav li + li a { border-top: 1px solid var(--line); border-radius: 0; }
}

/* ---------------- page frame ---------------- */
main { padding-block: 20px 56px; }

.crumbs ol {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0 0 16px; padding: 0;
  font-size: .88rem; color: var(--muted);
}
.crumbs li + li::before { content: "›"; margin-inline-end: 6px; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

.page-head { padding-bottom: 20px; margin-bottom: 10px; }
/* an accent hairline instead of a full rule: less boxy, still separates */
.page-head::after {
  content: ""; display: block; width: 64px; height: 3px;
  background: var(--accent); border-radius: 2px; margin-top: 18px;
}
.page-head h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.85rem, 1.3rem + 2vw, 2.9rem);
  line-height: 1.22; letter-spacing: -.005em;
  color: var(--ink); margin: 0 0 12px;
  max-width: 26ch;
}
body[data-lang="hi"] .page-head h1 { line-height: 1.38; max-width: 24ch; }
.is-home .page-head h1 { max-width: 20ch; }

.meta { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.lede { font-size: 1.12rem; line-height: 1.75; color: var(--ink-2); margin: 0; max-width: 62ch; }
body[data-lang="hi"] .lede { line-height: 1.9; }

h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.32rem, 1.1rem + .7vw, 1.62rem);
  line-height: 1.34; color: var(--ink);
  margin: 40px 0 12px;
}
body[data-lang="hi"] h2 { line-height: 1.46; }

/* a small saffron lozenge marks a content section. Long reference pages have
   a lot of h2s, and a consistent marker is what makes them scannable. */
.page > h2::before,
.post-body > h2::before {
  content: ""; display: inline-block;
  width: 9px; height: 9px; margin-inline-end: 11px;
  background: var(--accent); border-radius: 2px;
  transform: rotate(45deg) translateY(-3px);
}

h3 {
  font-family: var(--sans); font-weight: 700;
  font-size: 1.08rem; margin: 28px 0 8px; color: var(--ink);
}
p { margin: 0 0 16px; max-width: 72ch; }

.section { border-top: 1px solid var(--line); padding-top: 4px; }
.section:first-of-type { border-top: 0; }

/* ---------------- cards ---------------- */
.grid {
  display: grid; gap: 12px; margin: 18px 0 10px;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
}
.grid.tight { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.card {
  display: flex; flex-direction: column; gap: 3px;
  min-height: 78px; padding: 15px 16px;
  box-shadow: var(--shadow);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.card:hover {
  border-color: var(--accent-line); background: var(--accent-soft);
  color: var(--ink); text-decoration: none;
}
.card .glyph { color: var(--accent); line-height: 1; margin-bottom: 2px; font-size: 1.15rem; font-weight: 700; }
.card-title { font-weight: 650; }
.card-sub { color: var(--muted); font-size: .88rem; }

/* ---------------- tables ---------------- */
.table-wrap {
  overflow-x: auto; margin: 16px 0 22px;
  background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: .97rem; background: var(--bg); }
th, td { text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
thead th {
  background: var(--bg-sink); color: var(--ink);
  font-weight: 650; white-space: nowrap;
  border-bottom: 1px solid var(--line-strong);
}
tbody tr:nth-child(even) { background: var(--bg-soft); }   /* zebra stripes aid row tracking */
.facts th { color: var(--ink-2); font-weight: 600; width: 44%; }
td a, th a { font-weight: 500; }

/* ---------------- lists ---------------- */
.link-list {
  list-style: none; padding: 0; margin: 12px 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.link-list li a {
  display: flex; align-items: center; min-height: 46px;
  padding: 8px 14px; border-radius: 8px;
  background: var(--bg-soft); border: 1px solid var(--line);
  text-decoration: none;
}
.link-list li a:hover { background: var(--accent-soft); border-color: var(--accent-line); text-decoration: none; }

ul.bullets { padding-inline-start: 22px; margin: 12px 0 18px; max-width: 72ch; }
ul.bullets li { margin-bottom: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 12px 0 20px; }
.chips li {
  padding: 6px 14px; border-radius: 999px; font-size: .92rem;
  color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-line);
}

/* ---------------- hero / buttons ---------------- */
.hero { padding: 4px 0 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  font: inherit; font-size: 1.02rem; font-weight: 700;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent); border-radius: 999px;
  box-shadow: 0 10px 22px -14px rgba(179, 84, 30, .8);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; text-decoration: none; }
.btn.ghost { background: var(--bg); color: var(--accent); }
.btn.ghost:hover { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------------- score meter ---------------- */
.score { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 18px 0 22px; }
.score-num { font-family: var(--serif); font-weight: 700; font-size: 2.7rem; line-height: 1; color: var(--accent); }
.meter {
  flex: 1 1 220px; min-width: 180px; height: 14px;
  background: var(--bg-sink); border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden;
}
.meter > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* ---------------- FAQ ---------------- */
.faq { margin-top: 36px; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 10px; background: var(--bg);
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  list-style: none; cursor: pointer; padding: 14px 16px; min-height: 52px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { display: inline; margin: 0; font-size: 1.02rem; font-weight: 650; color: var(--ink); }
.faq-item summary::after {
  content: "+"; flex: none;
  width: 26px; height: 26px; line-height: 24px; text-align: center;
  font-size: 1.25rem; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 50%; background: var(--accent-soft);
}
/* U+2212 MINUS SIGN, deliberately not an en dash */
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-item:hover { border-color: var(--line-strong); }
.faq-a { padding: 14px 16px 4px; color: var(--ink-2); }
.faq-a p { margin-bottom: 12px; }

/* ---------------- forms / tools ---------------- */
.tool {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft); padding: 22px; margin: 20px 0 28px;
}
.field-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
label { display: block; font-size: .93rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
input, select {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: inherit; font-size: 1rem;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: 8px;
}
input:hover, select:hover { border-color: var(--muted); }
input:focus, select:focus { border-color: var(--accent); outline: 3px solid var(--accent-soft); outline-offset: 0; }
.note { font-size: .9rem; color: var(--muted); margin-top: 14px; max-width: 72ch; }

.result { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.result[hidden] { display: none; }
.verdict { font-family: var(--serif); font-size: 1.2rem; font-weight: 650; color: var(--ink); }
body[data-lang="hi"] .verdict { font-family: var(--deva); }
.kt td:last-child, .kt th:last-child { text-align: end; white-space: nowrap; }

/* ---------------- callout ---------------- */
.callout {
  border: 1px solid var(--accent-line); border-inline-start: 4px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px; margin: 20px 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------------- two column ---------------- */
.two-col { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.7fr 1fr; } }
.aside {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft); padding: 18px; align-self: start;
}
@media (min-width: 900px) { .aside { position: sticky; top: 108px; } }
.aside h3 { margin: 0 0 10px; font-size: 1rem; }
.aside ul.bullets { margin-bottom: 0; }

/* ---------------- footer ---------------- */
.site-foot {
  margin-top: 52px; padding-block: 40px 26px;
  color: #ded9ef;
  background: var(--indigo); border-top: 0;
}
.site-foot .fcol h3 { color: #f2c98f; }
.site-foot .fcol a { color: #ded9ef; }
.site-foot .fcol a:hover { color: #fff; }
.site-foot .foot-legal { color: rgba(222, 217, 239, .72); border-top-color: rgba(255, 255, 255, .14); }
.site-foot .soc-glyph { background: rgba(255, 255, 255, .1); color: #ded9ef; border-color: rgba(255, 255, 255, .16); }
.foot-inner { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fcol h3 { margin: 0 0 12px; font-size: 1rem; color: var(--ink); }
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fcol a {
  display: block; padding: 6px 0; font-size: .95rem;
  color: var(--ink-2); text-decoration: none;
}
.fcol a:hover { color: var(--accent); text-decoration: underline; }
.foot-legal {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .88rem;
}
.foot-legal p { margin: 0 0 6px; max-width: 90ch; }

/* ---------------- misc ---------------- */
.related { margin-top: 36px; }
.tag { display: inline-block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* =====================================================================
   Icons

   All icons are inline SVG rather than Unicode characters, because the
   zodiac signs, the sun and the heart all render as colour emoji on Android
   and iOS, which ignores `color` and drops a coloured tile into the layout.
   ===================================================================== */

svg.icn {
  display: block;
  flex: none;
  vertical-align: middle;
  overflow: visible;
}

/* =====================================================================
   Home page
   ===================================================================== */

.sr-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sec-head h2 { margin-bottom: 6px; }
.sec-more { color: var(--indigo); }
.sec-more { font-size: .95rem; font-weight: 600; white-space: nowrap; }

/* today strip */
.today-strip {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px;
  margin: 24px 0 8px; padding: 22px 24px;
  color: #f6f2ff;
  background: linear-gradient(120deg, #322c66 0%, #4a3f80 55%, #6b4a76 100%);
  border: 0; border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px -18px rgba(53, 48, 107, .7);
}
/* a faint ring, echoing the article hero art */
.today-strip::after {
  content: ""; position: absolute; inset-inline-end: -70px; top: -70px;
  width: 240px; height: 240px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .17);
  box-shadow: inset 0 0 0 26px rgba(255, 255, 255, .045);
  pointer-events: none;
}
.today-strip > * { position: relative; z-index: 1; }
.ts-date { display: flex; flex-direction: column; }
.ts-label { font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; color: #f2c98f; font-weight: 700; }
.ts-date strong { font-family: var(--display); font-weight: 400; font-size: 1.22rem; }
.ts-facts { display: flex; gap: 26px; flex-wrap: wrap; margin-inline-end: auto; }
.ts-facts div { display: flex; flex-direction: column; }
.ts-facts span { font-size: .82rem; color: rgba(246, 242, 255, .68); }
.ts-facts strong { font-size: 1.04rem; font-weight: 600; }
.today-strip .btn {
  min-height: 48px; background: #fff; color: var(--indigo);
  border-color: #fff; font-weight: 700;
}
.today-strip .btn:hover { background: #f2c98f; border-color: #f2c98f; color: #3a2a10; }

/* element-coded sign grid */
.sign-grid {
  display: grid; gap: 8px; margin: 14px 0 8px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.sign-tile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto;
  column-gap: 12px; align-items: center;
  padding: 12px 14px; min-height: 76px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.sign-tile:hover {
  text-decoration: none; color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(29, 27, 48, .05), 0 16px 30px -16px rgba(29, 27, 48, .3);
}
/* the glyph gets a tinted disc, which is what turns twelve rows of text into
   twelve recognisable objects */
.st-glyph {
  grid-row: 1 / 4;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
}
.st-name { font-family: var(--display); font-weight: 400; font-size: 1.1rem; line-height: 1.3; }
.st-en {
  font-size: .7rem; color: var(--muted); line-height: 1.4;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.st-dates { font-size: .76rem; color: var(--muted); line-height: 1.45; }

@media (max-width: 520px) {
  /* two columns that actually fit a 360px screen, with less dead space */
  .sign-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .sign-tile { padding: 9px 10px; min-height: 64px; column-gap: 8px; }
  .st-name { font-size: .92rem; }
  .st-en { font-size: .72rem; }
  .st-dates { font-size: .68rem; }
  .st-glyph svg { width: 17px; height: 17px; }

  /* the generic card grid and the tool panel also waste height on phones */
  .grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card { padding: 11px 12px; min-height: 64px; }
  .card .glyph { font-size: 1rem; }
  .tool { padding: 14px; }
  .glance { padding: 13px 14px; gap: 13px; }
  .glance-glyph { width: 38px; height: 38px; }
  .glance dl { gap: 11px 20px; }
  .f-glyph { width: 34px; height: 34px; }
}

.sign-tile.fire .st-glyph { color: #b3541e; background: #fdf1e3; }
.sign-tile.fire:hover { border-color: #b3541e44; }
.sign-tile.earth .st-glyph { color: #5f7020; background: #f2f6e6; }
.sign-tile.earth:hover { border-color: #5f702044; }
.sign-tile.air .st-glyph { color: #256381; background: #e9f2f7; }
.sign-tile.air:hover { border-color: #25638144; }
.sign-tile.water .st-glyph { color: #414f96; background: #ecefF9; }
.sign-tile.water:hover { border-color: #414f9644; }

.elem-key { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 8px; font-size: .85rem; color: var(--muted); }
.ek { display: inline-flex; align-items: center; gap: 7px; }
.ek::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.ek.fire::before { background: #b3541e; }
.ek.earth::before { background: #5f7020; }
.ek.air::before { background: #256381; }
.ek.water::before { background: #414f96; }

/* feature cards */
.feature-grid {
  display: grid; gap: 14px; margin: 18px 0 10px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.feature {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.feature:hover {
  text-decoration: none; color: var(--ink);
  transform: translateY(-3px); border-color: var(--accent-line);
  box-shadow: 0 2px 4px rgba(29, 27, 48, .05), 0 20px 36px -18px rgba(29, 27, 48, .32);
}
.f-glyph {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--indigo); color: #fff; border: 0;
}
.f-title { font-family: var(--display); font-weight: 400; font-size: 1.24rem; line-height: 1.3; }
.f-sub { color: var(--ink-2); font-size: .95rem; }
.f-cta { margin-top: 4px; font-weight: 650; color: var(--accent); }
.feature:hover .f-cta { text-decoration: underline; text-underline-offset: 3px; }

/* trust grid */
.trust-grid { display: grid; gap: 14px; margin: 16px 0 8px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.trust { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow); }
.trust h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 1.14rem; }
.trust p { margin: 0; font-size: .95rem; color: var(--ink-2); }

/* =====================================================================
   Sign pages: at-a-glance strip and sideways navigation
   ===================================================================== */

.glance {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 18px 0 16px; padding: 18px 22px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.glance-glyph {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.glance dl { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 0; }
.glance dl > div { display: flex; flex-direction: column; }
.glance dt { font-size: .8rem; color: var(--muted); }
.glance dd { margin: 0; font-weight: 650; font-size: 1rem; }

.sign-switch { display: flex; align-items: stretch; gap: 8px; margin: 0 0 22px; }
.ss {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink-2);
  font-size: .95rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.ss:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); text-decoration: none; }
.ss-glyph { color: var(--accent); display: inline-flex; }
.ss.all { flex: 1 1 auto; justify-content: center; }
@media (max-width: 560px) {
  .ss.all { display: none; }
  .sign-switch { justify-content: space-between; }
}

/* =====================================================================
   Blog
   ===================================================================== */

.cat-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px; }
.cat-bar a {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: .95rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.cat-bar a:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); text-decoration: none; }

.post-grid { display: grid; gap: 20px; margin: 18px 0 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.post-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); box-shadow: var(--shadow); }
.post-card:hover { border-color: var(--line-strong); }
.post-card-img { display: block; line-height: 0; background: var(--bg-sink); }
.post-card-img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.post-card h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.24rem; line-height: 1.36; }
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h3 a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.post-dek { margin: 0; font-size: .95rem; color: var(--ink-2); }
.post-meta { margin: 0; font-size: .85rem; color: var(--muted); }
.post-cat {
  align-self: flex-start; font-size: .78rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: 999px; padding: 3px 11px;
  text-decoration: none;
}
a.post-cat:hover { background: var(--accent); color: #fff; text-decoration: none; }

@media (min-width: 760px) {
  .post-card.big { flex-direction: row; align-items: stretch; }
  .post-card.big .post-card-img { flex: 0 0 46%; }
  .post-card.big .post-card-img img { height: 100%; }
  .post-card.big .post-card-body { justify-content: center; padding: 24px 26px; }
  .post-card.big h3 { font-size: 1.5rem; }
  .post-card.big .post-dek { font-size: 1.02rem; }
}

/* post page */
.post-head { margin: 4px 0 14px; }
.post-byline {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 10px 0 0; font-size: .9rem; color: var(--muted);
}
.post-hero { margin: 6px 0 20px; }
.post-hero img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); display: block; }

.post-body { max-width: 74ch; }
.post-body h2 { scroll-margin-top: 100px; }
.post-body p, .post-body ul, .post-body ol { max-width: 74ch; }

ol.steps { padding-inline-start: 24px; margin: 14px 0 20px; }
ol.steps li { margin-bottom: 10px; }

blockquote.pull {
  margin: 22px 0; padding: 4px 0 4px 20px;
  border-inline-start: 4px solid var(--accent);
  font-family: var(--serif); font-size: 1.14rem; color: var(--ink);
}
body[data-lang="hi"] blockquote.pull { font-family: var(--deva); }

.toc {
  margin: 6px 0 26px; padding: 18px 20px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
}
.toc h2 { margin: 0 0 10px; font-size: 1.02rem; }
.toc ol { margin: 0; padding-inline-start: 22px; }
.toc li { margin-bottom: 6px; }
.toc a { color: var(--ink-2); }
.toc a:hover { color: var(--accent-ink); }

/* share row */
.share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin: 20px 0; padding: 14px 0; border-block: 1px solid var(--line);
}
.share-label { font-size: .9rem; font-weight: 600; color: var(--muted); margin-inline-end: 4px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  font: inherit; font-size: .92rem; font-weight: 600;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--ink); text-decoration: none; cursor: pointer;
}
.share-btn:hover { text-decoration: none; color: #fff; }
.share-btn.wa:hover { background: #1da851; border-color: #1da851; }
.share-btn.fb:hover { background: #1667c9; border-color: #1667c9; }
.share-btn.xt:hover { background: #16181c; border-color: #16181c; }
.share-btn.copy:hover { background: var(--accent); border-color: var(--accent); }
.share-btn svg { opacity: .85; }

/* author + post nav */
.author-box {
  margin: 32px 0 8px; padding: 20px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
}
.author-box h2 { margin: 0 0 10px; font-size: 1.05rem; }
.author-name { font-weight: 700; margin-bottom: 6px; }
.author-box p { max-width: 74ch; }

.post-nav { display: grid; gap: 12px; margin: 28px 0 8px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.pn {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); text-decoration: none;
}
.pn:hover { border-color: var(--accent-line); background: var(--accent-soft); text-decoration: none; }
.pn span { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pn strong { color: var(--ink); font-size: 1rem; line-height: 1.45; font-weight: 650; }
.pn.next { text-align: end; }

/* =====================================================================
   Android app promotion
   ===================================================================== */

.app-band {
  margin: 28px 0;
  padding: 22px;
  background: var(--bg);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.ap-top { display: flex; gap: 16px; align-items: flex-start; }
.ap-icon {
  width: 64px; height: 64px; flex: none;
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--bg); display: block;
}
.ap-icon-fallback {
  display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line);
}
.ap-text { min-width: 0; }
.ap-eyebrow {
  display: inline-block; margin-bottom: 5px;
  font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-ink);
}
.ap-head { margin: 0 0 6px; font-family: var(--serif); font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
body[data-lang="hi"] .ap-head { font-family: var(--deva); }
.ap-sub { margin: 0; font-size: .96rem; color: var(--ink-2); }

.ap-stats {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  list-style: none; margin: 16px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--line);
}
.ap-stats li { display: flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--muted); }
.ap-stats strong { color: var(--ink); font-size: 1.02rem; }
.ap-stats svg { color: var(--accent); }

.ap-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 18px; }

/* compact variant, used inside articles and under the kundali calculator */
.app-band.compact {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  padding: 15px 18px; margin: 24px 0;
}
.app-band.compact .ap-icon { width: 48px; height: 48px; border-radius: 11px; }
.app-band.compact .ap-text { flex: 1 1 240px; }
.app-band.compact .ap-head { font-size: 1.04rem; margin-bottom: 3px; }
.app-band.compact .ap-sub { font-size: .9rem; }
.app-band.compact .btn { min-height: 46px; }

/* app page: comparison table and static feature cards */
.feature.static { cursor: default; }
.feature.static:hover { background: var(--bg-soft); border-color: var(--line); }
.ap-no { color: var(--muted); }
td svg.icn { color: var(--good); }

@media (max-width: 520px) {
  .app-band { padding: 16px; }
  .ap-icon { width: 54px; height: 54px; }
  .ap-head { font-size: 1.08rem; }
  .ap-stats { gap: 8px 18px; }
  .ap-actions .btn { width: 100%; }
}

/* =====================================================================
   Social links
   ===================================================================== */

.fcol ul.social { gap: 6px; }
.soc { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; }
.soc-glyph {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--bg-sink); color: var(--ink-2); border: 1px solid var(--line);
}
.soc:hover .soc-glyph { color: #fff; border-color: transparent; }
.soc.wa:hover .soc-glyph { background: #1da851; }
.soc.yt:hover .soc-glyph { background: #d5231b; }
.soc.ig:hover .soc-glyph { background: #c32aa3; }
.soc.fb:hover .soc-glyph { background: #1667c9; }
.soc.tg:hover .soc-glyph { background: #2b9fda; }
.soc.xt:hover .soc-glyph { background: #16181c; }
.soc.pi:hover .soc-glyph { background: #bd081c; }

/* =====================================================================
   Mobile bottom quick nav
   ===================================================================== */

.bottom-nav { display: none; }

@media (max-width: 860px) {
  .bottom-nav {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
    background: var(--bg); border-top: 1px solid var(--line-strong);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .05);
  }
  .bottom-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 58px; font-size: .78rem; font-weight: 600;
    color: var(--ink-2); text-decoration: none;
  }
  .bottom-nav a:active { background: var(--accent-soft); }
  .bn-i { color: var(--accent); display: inline-flex; }
  /* keep the footer clear of the fixed bar */
  .site-foot { padding-bottom: 82px; }
}

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

@media print {
  .site-head, .site-foot, .btn-row, .lang-switch, .nav-toggle, .aside { display: none !important; }
  body { font-size: 12pt; }
  a { text-decoration: none; color: #000; }
}