/* ============================================================
   GREAT ASTROLOGY — Design System v2
   Dual theme (dark default + dedicated light), bilingual-ready.
   Palette follows the house style already proven on
   invention.aniketbhardwaj.com: deep navy ground, muted gold
   accent, ivory light mode — with a soft violet secondary.

   Theme states:
     :root                          → dark (default)
     [data-theme="light"]           → explicit light
     [data-theme="dark"]            → explicit dark
     prefers-color-scheme + :not([data-theme]) → system
   ============================================================ */

/* ---------- DARK (default) ---------- */
:root {
  --bg: #070B14;
  --bg2: #0B1220;
  --panel: #101A2C;
  --panel2: #16223A;
  --field: #060A12;
  --hair: rgba(255, 255, 255, .07);
  --hair-strong: rgba(255, 255, 255, .13);
  --hair-gold: rgba(201, 169, 106, .25);

  --accent: #C9A96A;
  --accent-b: #E9D4A5;
  --accent-ink: #14100A;
  --violet: #A78BD0;
  --violet-soft: rgba(167, 139, 208, .16);

  --text: #EFEAE0;
  --text-strong: #FFFFFF;
  --muted: #9AA6BB;
  --faint: #7F8A9B;   /* 4.5:1 on --panel2 (was #6B7689 at 3.46:1) */

  --green: #34D399;
  --red: #F87171;
  --teal: #2DD4BF;
  --amber: #FFB870;

  --nav-bg: rgba(7, 11, 20, .9);
  --shadow: 0 24px 70px rgba(0, 0, 0, .55);
  --shadow-sm: 0 6px 22px rgba(0, 0, 0, .35);
  --hero-glow1: rgba(201, 169, 106, .16);
  --hero-glow2: rgba(167, 139, 208, .14);

  --radius: 18px;
  --radius-sm: 12px;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

/* ---------- LIGHT (explicit) ---------- */
[data-theme="light"] {
  --bg: #F7F4EC;
  --bg2: #EFEBDF;
  --panel: #FFFFFF;
  --panel2: #FAF7F0;
  --field: #FFFFFF;
  --hair: rgba(31, 44, 74, .12);
  --hair-strong: rgba(31, 44, 74, .2);
  --hair-gold: rgba(154, 117, 50, .35);

  --accent: #84652B;  /* 4.5:1 on --bg2 (was #9A7532 at 3.55:1) */
  --accent-b: #7A5A1E;
  --accent-ink: #FFFFFF;
  --violet: #6D4C9F;
  --violet-soft: rgba(109, 76, 159, .12);

  --text: #1E2740;
  --text-strong: #0E1526;
  --muted: #5D6880;
  --faint: #606B7F;   /* 4.5:1 on --bg2 (was #7C879C at 3.04:1) */

  --green: #0E8A5F;
  --red: #C2402F;
  --teal: #0B7E74;
  --amber: #B35C00;

  --nav-bg: rgba(247, 244, 236, .92);
  --shadow: 0 18px 50px rgba(30, 39, 64, .12);
  --shadow-sm: 0 4px 16px rgba(30, 39, 64, .08);
  --hero-glow1: rgba(154, 117, 50, .14);
  --hero-glow2: rgba(109, 76, 159, .10);
}

/* ---------- SYSTEM (no explicit choice) ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #F7F4EC; --bg2: #EFEBDF;
    --panel: #FFFFFF; --panel2: #FAF7F0; --field: #FFFFFF;
    --hair: rgba(31, 44, 74, .12); --hair-strong: rgba(31, 44, 74, .2);
    --hair-gold: rgba(154, 117, 50, .35);
    --accent: #84652B; --accent-b: #7A5A1E; --accent-ink: #FFFFFF;
    --violet: #6D4C9F; --violet-soft: rgba(109, 76, 159, .12);
    --text: #1E2740; --text-strong: #0E1526; --muted: #5D6880; --faint: #606B7F;
    --green: #0E8A5F; --red: #C2402F; --teal: #0B7E74; --amber: #B35C00;
    --nav-bg: rgba(247, 244, 236, .92);
    --shadow: 0 18px 50px rgba(30, 39, 64, .12);
    --shadow-sm: 0 4px 16px rgba(30, 39, 64, .08);
    --hero-glow1: rgba(154, 117, 50, .14); --hero-glow2: rgba(109, 76, 159, .10);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background:
    radial-gradient(1100px 560px at 82% -12%, var(--hero-glow2), transparent 62%),
    radial-gradient(900px 480px at -8% 26%, var(--hero-glow1), transparent 58%),
    var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  min-height: 100vh;
  transition: background-color .25s ease, color .25s ease;
}
img, svg { max-width: 100%; }
a { color: var(--accent-b); text-decoration: none; }
[data-theme="light"] a { color: var(--accent-b); }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3, .brand-name { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; color: var(--text-strong); }
h1 { font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.14; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.24; }
h3 { font-size: 1.16rem; }
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3 { font-family: var(--font-body); font-weight: 700; line-height: 1.32; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--nav-bg); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.header-inner { display: flex; align-items: center; gap: 14px; height: 66px; }
.brand { display: flex; align-items: center; gap: 9px; white-space: nowrap; margin-right: auto; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  display: grid; place-items: center; font-size: .82rem; font-weight: 700;
  background: linear-gradient(135deg, var(--accent-b), var(--accent));
  color: var(--accent-ink); border: 1px solid var(--hair-gold);
}
.brand-name { color: var(--text-strong); letter-spacing: .05em; font-size: 1.02rem; line-height: 1.15; }
.brand-name em { font-style: normal; color: var(--accent); }
.brand-sub { display: block; font-size: .64rem; color: var(--muted); letter-spacing: .09em; text-transform: uppercase; font-family: var(--font-body); }

/* nowrap + a hamburger from 1100px down: the nav must never wrap onto a second
   row and collide with the brand (the English labels are wider than the Hindi). */
.main-nav { display: flex; gap: 2px; flex-wrap: nowrap; }
.main-nav a {
  color: var(--muted); padding: 7px 10px; border-radius: 999px; white-space: nowrap;
  font-size: .87rem; font-weight: 500; transition: color .15s, background .15s;
}
.main-nav a:hover { color: var(--text-strong); text-decoration: none; background: var(--violet-soft); }
.main-nav a.active { color: var(--accent-ink); background: var(--accent); font-weight: 600; }

.header-tools { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  background: transparent; border: 1px solid var(--hair); color: var(--text);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: .82rem;
  font-family: var(--font-body); font-weight: 600; line-height: 1.5;
  display: inline-flex; align-items: center; gap: 6px; transition: border-color .15s, background .15s;
}
.icon-btn:hover { border-color: var(--hair-gold); background: var(--violet-soft); }
.icon-btn .ib-ic { font-size: .95rem; }
.nav-toggle { display: none; }
/* 44px minimum so the primary mobile control is comfortable to hit. */
@media (max-width: 1100px) {
  .nav-toggle { min-width: 44px; min-height: 44px; justify-content: center; font-size: 1.15rem; }
  #lang-btn, #theme-btn { min-height: 44px; }
}

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 1rem;
  border: 1px solid transparent; cursor: pointer; font-family: var(--font-body);
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
/* Dark theme: light-gold fill needs dark ink. Light theme: the gold darkens,
   so the ink must flip to white or the label disappears into the button. */
.btn-gold {
  background: linear-gradient(135deg, var(--accent-b), var(--accent));
  color: #1A1305; box-shadow: 0 6px 24px rgba(201, 169, 106, .3);
}
[data-theme="light"] .btn-gold,
[data-theme="light"] .btn-gold:hover {
  background: linear-gradient(135deg, #9A7532, #7A5A1E);
  color: #FFFFFF; box-shadow: 0 6px 20px rgba(122, 90, 30, .28);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .btn-gold {
    background: linear-gradient(135deg, #9A7532, #7A5A1E); color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(122, 90, 30, .28);
  }
}
.btn-ghost { background: transparent; color: var(--text); border-color: var(--hair-strong); }
.btn-ghost:hover { background: var(--violet-soft); border-color: var(--hair-gold); }
.btn-sm { padding: 8px 17px; font-size: .88rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Cards & layout ---------- */
.card {
  background: var(--panel); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 10px; }
.card .muted, .muted { color: var(--muted); font-size: .95rem; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.section { padding: 56px 0; }
.section-head { margin-bottom: 30px; max-width: 46em; }
.section-head p { color: var(--muted); margin-top: 10px; }
.kicker { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 700; }

.tile {
  display: flex; flex-direction: column; gap: 7px; padding: 22px;
  background: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius);
  color: var(--text); transition: transform .18s, border-color .18s, box-shadow .18s;
}
.tile:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--hair-gold); box-shadow: var(--shadow-sm); }
.tile .t-ic { font-size: 1.5rem; }
.tile .t-name { font-weight: 600; color: var(--text-strong); }
.tile .t-desc { color: var(--muted); font-size: .85rem; line-height: 1.45; }

/* ---------- Hero ---------- */
.hero { padding: 70px 0 54px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 48px; align-items: center; }
.hero .eyebrow {
  display: inline-block; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--hair-gold); padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
.hero p.lead { color: var(--muted); font-size: 1.1rem; max-width: 34em; margin: 18px 0 30px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Forms ---------- */
.bf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bf-field { display: flex; flex-direction: column; gap: 7px; font-size: .9rem; color: var(--muted); }
.bf-field small { color: var(--faint); }
.bf-wide { grid-column: 1 / -1; }
.bf-field input, .bf-field select, textarea.ga-input, input.ga-input, select.ga-input {
  background: var(--field); color: var(--text); border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 1rem; font-family: var(--font-body); width: 100%;
}
.bf-field input:focus, .bf-field select:focus, .ga-input:focus { border-color: var(--accent); outline: none; }
.bf-city { position: relative; }
.bf-city-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--panel2); border: 1px solid var(--hair-strong); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow);
}
.bf-city-list button {
  display: block; width: 100%; text-align: left; padding: 11px 14px; background: none;
  border: none; color: var(--text); cursor: pointer; font-size: .95rem; font-family: var(--font-body);
}
.bf-city-list button:hover { background: var(--violet-soft); }
.bf-city-none { padding: 11px 14px; color: var(--muted); font-size: .88rem; }
.bf-adv summary { cursor: pointer; color: var(--accent); font-size: .9rem; margin: 4px 0 12px; }
.form-error { color: var(--red); font-size: .92rem; margin-top: 10px; min-height: 1.4em; }

/* ---------- Charts ---------- */
.ga-chart { width: 100%; height: auto; display: block; }
.gc-frame { fill: var(--panel2); stroke: var(--accent); stroke-width: 2; }
.gc-house { fill: transparent; stroke: var(--hair-gold); stroke-width: 1.2; }
.gc-lagna { fill: var(--violet-soft); }
.gc-lagna-mark { stroke: var(--accent); stroke-width: 1.6; }
.gc-signnum { fill: var(--faint); font-size: 12px; font-family: var(--font-body); }
.gc-planet { fill: var(--accent-b); font-size: 13.5px; font-weight: 600; font-family: var(--font-body); }
[data-theme="light"] .gc-planet { fill: var(--accent-b); }
.gc-center { fill: var(--text); font-size: 15px; font-family: var(--font-display); }
.gc-center-sub { fill: var(--muted); font-size: 11.5px; font-family: var(--font-body); }

/* ---------- Tables ---------- */
.tbl-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--hair); }
table.ga-tbl { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.ga-tbl th, .ga-tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--hair); }
.ga-tbl th { background: var(--panel2); color: var(--accent); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ga-tbl tr:last-child td { border-bottom: none; }
.ga-tbl td { color: var(--muted); }
.ga-tbl td:first-child { color: var(--text); font-weight: 500; }

/* ---------- Badges & meters ---------- */
.badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; }
.badge-gold { background: var(--hair-gold); color: var(--accent-b); }
[data-theme="light"] .badge-gold { color: var(--accent-b); }
.badge-teal { background: rgba(45, 212, 191, .16); color: var(--teal); }
.badge-rose { background: rgba(248, 113, 113, .16); color: var(--red); }
.badge-purple { background: var(--violet-soft); color: var(--violet); }
.badge-dim { background: var(--hair); color: var(--muted); }
.badge-soon {
  background: var(--violet-soft); color: var(--violet);
  border: 1px solid var(--hair-strong); letter-spacing: .05em;
}

.meter { height: 7px; background: var(--hair); border-radius: 99px; overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-b)); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.tabs button {
  background: transparent; border: 1px solid var(--hair); color: var(--muted);
  padding: 9px 17px; border-radius: 999px; cursor: pointer; font-size: .9rem; font-weight: 500; font-family: var(--font-body);
}
.tabs button:hover { border-color: var(--hair-gold); color: var(--text); }
.tabs button.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Category explorer (Services) ---------- */
.cat-layout { display: grid; grid-template-columns: 290px 1fr; gap: 24px; align-items: start; }
.cat-list {
  background: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 14px; position: sticky; top: 84px;
}
.cat-list h3 { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 6px 8px 12px; font-family: var(--font-body); font-weight: 700; }
.cat-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 12px 13px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--text); cursor: pointer; font-family: var(--font-body);
  font-size: .95rem; transition: background .15s, border-color .15s;
}
.cat-item:hover { background: var(--violet-soft); }
.cat-item.active { background: var(--violet-soft); border-color: var(--hair-gold); font-weight: 600; }
.cat-item .ci-ic { font-size: 1.15rem; width: 24px; text-align: center; flex: 0 0 24px; }
.cat-item .ci-txt { flex: 1; min-width: 0; }
.cat-item .ci-hi { display: block; font-size: .74rem; color: var(--faint); }
.cat-item .ci-arrow { color: var(--faint); font-size: .8rem; }
.cat-item.active .ci-arrow { color: var(--accent); }

.cat-hero {
  background: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 30px; margin-bottom: 20px;
}
.cat-hero .ch-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cat-hero .ch-ic {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  font-size: 1.6rem; background: var(--violet-soft); border: 1px solid var(--hair-gold); flex: 0 0 54px;
}
.cat-hero h2 { font-size: 1.62rem; margin-bottom: 2px; }
.cat-hero .ch-hi { color: var(--accent); font-size: 1rem; font-weight: 600; }
.cat-hero .ch-desc { color: var(--muted); margin-top: 12px; max-width: 52em; }
.cat-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.svc-group { margin-bottom: 22px; }
.svc-group h4 {
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 12px; font-family: var(--font-body); font-weight: 700;
}
.svc-group h4 span { color: var(--faint); text-transform: none; letter-spacing: 0; font-weight: 500; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.svc {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid var(--hair);
  background: var(--panel2); color: var(--text); font-size: .92rem; transition: border-color .15s, transform .15s;
}
a.svc:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }
.svc .sv-txt { min-width: 0; }
.svc .sv-name { display: block; font-weight: 500; }
.svc .sv-hi { display: block; font-size: .76rem; color: var(--faint); }
.svc .sv-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--green); }

/* Coming Soon reads as a small line ABOVE the name, so a long service title
   never has to share its row with a badge (which used to force ugly wrapping). */
.sv-soon {
  display: block; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--violet); font-weight: 700; margin-bottom: 3px; line-height: 1.3;
}
.svc.is-soon { opacity: .9; border-style: dashed; }
.svc.is-soon .sv-name { color: var(--muted); font-weight: 500; }

/* Same treatment in the category sidebar. */
.cat-item .ci-soon {
  display: block; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--violet); font-weight: 700; line-height: 1.3;
}

/* ---------- Panchang ---------- */
.pan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pan-cell { background: var(--panel2); border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: 14px 16px; }
.pan-cell .p-k { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pan-cell .p-v { font-weight: 600; font-size: 1.02rem; margin-top: 3px; color: var(--text-strong); }
.pan-cell.warn .p-v { color: var(--amber); }
.pan-cell.good .p-v { color: var(--green); }

.cho-row { display: flex; gap: 6px; flex-wrap: wrap; }
.cho { flex: 1 1 100px; text-align: center; padding: 10px 6px; border-radius: var(--radius-sm); font-size: .82rem; border: 1px solid var(--hair); }
.cho.good { background: rgba(52, 211, 153, .1); }
[data-theme="light"] .cho.good { background: rgba(14, 138, 95, .1); }
.cho.bad { background: rgba(248, 113, 113, .09); opacity: .9; }
[data-theme="light"] .cho.bad { background: rgba(194, 64, 47, .08); }
.cho b { display: block; font-size: .9rem; color: var(--text-strong); }
.cho span { color: var(--faint); font-size: .75rem; }

/* ---------- Accordions ---------- */
.acc { border: 1px solid var(--hair); border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden; }
.acc summary { cursor: pointer; padding: 14px 18px; background: var(--panel2); font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 10px; list-style: none; color: var(--text); }
.acc summary::-webkit-details-marker { display: none; }
.acc[open] summary { border-bottom: 1px solid var(--hair); }
.acc .acc-body { padding: 16px 18px; color: var(--muted); font-size: .95rem; background: var(--panel); }

/* ---------- Dasha ---------- */
.dasha-bar { display: flex; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--hair); min-height: 54px; }
.dasha-seg { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; padding: 8px 2px; font-size: .78rem; color: var(--muted); border-right: 1px solid var(--bg); background: var(--panel2); transition: background .15s; }
.dasha-seg:hover { background: var(--violet-soft); }
.dasha-seg.current { background: var(--hair-gold); color: var(--accent-b); }
.dasha-seg.past { opacity: .55; }
.dasha-seg b { font-size: .86rem; color: inherit; }
.dasha-detail { margin-top: 18px; }

/* ---------- Chat ---------- */
.chat-box { display: flex; flex-direction: column; gap: 14px; min-height: 300px; max-height: 55vh; overflow-y: auto; padding: 4px; }
.msg { max-width: 85%; padding: 13px 18px; border-radius: 16px; font-size: .96rem; line-height: 1.6; }
.msg-user { align-self: flex-end; background: var(--hair-gold); border: 1px solid var(--hair-strong); border-bottom-right-radius: 4px; color: var(--text); }
.msg-ai { align-self: flex-start; background: var(--panel2); border: 1px solid var(--hair); border-bottom-left-radius: 4px; color: var(--muted); }
.chat-input-row { display: flex; gap: 10px; margin-top: 16px; }
.chat-input-row input { flex: 1; }

/* ---------- Notices ---------- */
.notice { border-left: 3px solid var(--accent); background: var(--violet-soft); padding: 14px 18px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--muted); font-size: .93rem; }
.notice b { color: var(--text-strong); }
.notice.soft { border-color: var(--violet); }
.notice.warn { border-color: var(--amber); }

/* ---------- Score dial ---------- */
.score-dial { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.score-dial .sd-num { font-family: var(--font-display); font-size: 3rem; color: var(--accent-b); line-height: 1; }
.score-dial .sd-max { color: var(--faint); font-size: .9rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--hair); margin-top: 70px; padding: 44px 0 0; background: var(--bg2); }
.footer-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; padding-bottom: 30px; }
.f-brand { font-size: 1.12rem; letter-spacing: .05em; }
.f-tag { color: var(--accent); font-size: .9rem; margin-top: 6px; }
.f-note { color: var(--faint); font-size: .8rem; margin-top: 14px; max-width: 44em; line-height: 1.6; }
.f-cols { display: flex; gap: 54px; flex-wrap: wrap; }
.f-cols h4 { color: var(--text-strong); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; font-family: var(--font-body); }
.f-cols a { display: block; color: var(--muted); font-size: .92rem; padding: 4px 0; }
.f-care { margin-top: 14px; font-size: .9rem; }
.f-care a { color: var(--accent-b); font-weight: 600; }

/* ---------- Credit bar (matches calculator.aniketbhardwaj.com) ----------
   Stacked on mobile, single row from tablet up. The version number is a
   plain natural number (V.21), never a decimal. */
.credit {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center; border-top: 1px solid var(--hair);
  padding: 12px 14px calc(76px + env(safe-area-inset-bottom, 0px));
  margin-top: 10px; background: var(--bg2);
}
.credit .crL b {
  font-size: 15px; letter-spacing: .4px; line-height: 1.3; font-weight: 700;
  font-family: var(--font-display); color: var(--accent);
}
.credit .crL a { color: var(--accent); text-decoration: none; }
.credit .crL a:hover { color: var(--accent-b); }
.credit .crR {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 7px; font-size: 12px; color: var(--muted);
}
.credit .crR em { font-style: normal; color: var(--faint); margin: 0; }
.credit .crR a { font-size: 13px; color: var(--accent); font-weight: 700; text-decoration: none; }
.credit .crR a:hover { color: var(--accent-b); }
@media (min-width: 761px) {
  .credit {
    flex-direction: row; justify-content: center; gap: 16px;
    padding: 13px 16px 22px; margin-top: 16px;
  }
  .credit .crL b { font-size: 16px; }
  .credit .crR { font-size: 13px; }
  .credit .crR a { font-size: 14px; }
}

/* ---------- Page head ---------- */
.page-head { padding: 46px 0 8px; }
.page-head p { color: var(--muted); margin-top: 10px; max-width: 46em; }
.page-head .title-hi { color: var(--accent); font-size: 1.05rem; font-weight: 600; margin-top: 4px; }

.zodiac-visual svg { filter: drop-shadow(0 0 40px var(--hero-glow1)); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .cat-layout { grid-template-columns: 1fr; }
  .cat-list { position: static; display: flex; gap: 8px; overflow-x: auto; padding: 10px; }
  .cat-list h3 { display: none; }
  .cat-item { flex: 0 0 auto; white-space: nowrap; }
  .cat-item .ci-arrow { display: none; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
}
/* Collapse to the drawer well before the labels can wrap. */
@media (max-width: 1100px) {
  .main-nav {
    display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column;
    background: var(--panel); border-bottom: 1px solid var(--hair); padding: 10px 16px 16px; box-shadow: var(--shadow);
  }
  .site-header.nav-open .main-nav { display: flex; }
  .main-nav a { padding: 11px 12px; font-size: .95rem; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 760px) {
  body { padding-bottom: 76px; }  /* bottom nav is 71px tall — leave clearance */
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
    background: var(--nav-bg); backdrop-filter: blur(14px);
    border-top: 1px solid var(--hair); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--faint); font-size: .66rem; padding: 4px 0; }
  .bottom-nav a.active { color: var(--accent); }
  .bottom-nav .bn-ic { font-size: 1.15rem; }
  .bottom-nav a:hover { text-decoration: none; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .bf-grid { grid-template-columns: 1fr; }
  .section { padding: 40px 0; }
  .hero { padding: 40px 0 34px; }
  .card, .cat-hero { padding: 20px; }
  .brand-sub { display: none; }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .tile { padding: 16px; }
  .svc-grid { grid-template-columns: 1fr; }
}

/* ---------- Print / PDF report ----------
   A proper A4 consulting document: gold rule under the masthead, every
   section opened, nothing clipped, and a repeating page footer. */
@page { size: A4; margin: 14mm 12mm 16mm; }

@media print {
  body {
    background: #fff !important; color: #14171F; padding-bottom: 0;
    font-size: 10.5pt; line-height: 1.5;
  }
  .site-header, .bottom-nav, .site-footer, .credit, .nav-toggle, .btn, .tabs,
  .chat-input-row, #form-card, .cta-row, #suggestions, .header-tools,
  .bf-adv, .form-error, #saved-list { display: none !important; }

  /* Masthead printed once at the top of the report. */
  main::before {
    content: "GREAT ASTROLOGY";
    display: block; font-family: var(--font-display); font-size: 20pt; font-weight: 700;
    letter-spacing: .06em; color: #14171F; text-align: center; margin-bottom: 2mm;
  }
  main::after {
    content: "Astrology is traditional, interpretive guidance — not a guaranteed prediction, and not a substitute for qualified medical, legal or financial advice.";
    display: block; margin-top: 8mm; padding-top: 3mm; border-top: 1px solid #D8D2C2;
    font-size: 7.5pt; color: #6B6F7A; text-align: center; line-height: 1.5;
  }
  .page-head { border-bottom: 2px solid #A8873B; padding: 0 0 4mm; margin-bottom: 6mm; }
  .page-head h1 { font-size: 16pt; }
  .page-head .title-hi { color: #8a6d1f; }

  .card, .cat-hero {
    background: #fff; border: 1px solid #DCD6C6; box-shadow: none; color: #14171F;
    border-radius: 6px; padding: 5mm; margin-bottom: 4mm; page-break-inside: avoid;
  }
  .muted, .acc .acc-body, .ga-tbl td { color: #43474F; }
  .pan-grid { gap: 3mm; }
  .pan-cell { background: #FAF7EF; border: 1px solid #E4DECB; padding: 3mm; page-break-inside: avoid; }
  .pan-cell .p-k { color: #8a6d1f; font-size: 7pt; }
  .pan-cell .p-v { color: #14171F; font-size: 10pt; }
  h1, h2, h3 { color: #14171F; page-break-after: avoid; }
  h2 { font-size: 13pt; margin-top: 4mm; }
  h3 { font-size: 11pt; }
  .kicker { color: #8a6d1f; }

  /* Every tab and accordion is opened so the PDF is complete. */
  .tab-panel { display: block !important; page-break-inside: auto; margin-top: 5mm; }
  .acc { border-color: #DCD6C6; page-break-inside: avoid; }
  .acc summary { background: #FAF7EF; color: #14171F; border-color: #DCD6C6; }
  .acc .acc-body { display: block !important; background: #fff; }
  details:not([open]) > *:not(summary) { display: block !important; }

  .tbl-wrap { overflow: visible !important; border-color: #DCD6C6; }
  table.ga-tbl { min-width: 0 !important; font-size: 9pt; }
  .ga-tbl th { background: #F1EAD6; color: #5c4a13; }
  .ga-tbl th, .ga-tbl td { padding: 2mm 3mm; border-color: #E4DECB; }
  .ga-tbl tr { page-break-inside: avoid; }

  .notice { background: #FBF7EC; color: #43474F; border-left-color: #A8873B; page-break-inside: avoid; }
  .badge { border: 1px solid #DCD6C6; color: #5c4a13 !important; background: #F1EAD6 !important; }

  /* Charts keep their gold linework and never split across a page. */
  .ga-chart { max-width: 78mm; margin: 0 auto; page-break-inside: avoid; }
  .gc-frame { fill: #fff; stroke: #A8873B; }
  .gc-house { stroke: #C9B26A; }
  .gc-signnum { fill: #8A8F99; }
  .gc-planet { fill: #6B5410; }
  .gc-center, .gc-center-sub { fill: #14171F; }

  .dasha-bar { border-color: #DCD6C6; page-break-inside: avoid; }
  .dasha-seg { background: #F1EAD6; color: #43474F; }
  .dasha-seg.current { background: #E2D3A1; color: #5c4a13; }
  .meter { background: #EEE9DA; }
  .meter > i { background: #A8873B; }
  .score-dial .sd-num { color: #6B5410; }

  a { color: #14171F; text-decoration: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* utility */
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 36px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.center { text-align: center; }
.hidden { display: none !important; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   V.22 — mobile refinements (from Aniket's review)
   ============================================================ */

/* Language button: full name on desktop, "Hin"/"Eng" on mobile.
   Theme button: label on desktop, icon alone on mobile. */
.lbl-short { display: none; }

@media (max-width: 768px) {
  .lbl-full { display: none !important; }
  .lbl-short { display: inline; }

  /* Theme toggle becomes a round icon button — no text. */
  #theme-btn {
    width: 40px; height: 40px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #theme-btn .ib-ic { margin: 0; font-size: 1.05rem; }

  /* Language keeps the globe + short code, kept compact. */
  #lang-btn { padding: 0 12px; height: 40px; border-radius: 999px; gap: 5px; }

  /* Justified body copy reads better on a narrow column.
     Devanagari is excluded from hyphenation — it breaks badly. */
  main p,
  .card p,
  .acc .acc-body p,
  .notice,
  .t-desc,
  .muted:not(.p-k):not(.p-v) {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  /* Must mirror the justify selector list above, prefixed — otherwise
     .muted:not(.p-k):not(.p-v) at (0,3,0) outweighs a shorter override and
     Devanagari gets hyphenated, which mangles it. */
  html[lang="hi"] main p,
  html[lang="hi"] .card p,
  html[lang="hi"] .acc .acc-body p,
  html[lang="hi"] .notice,
  html[lang="hi"] .t-desc,
  html[lang="hi"] .muted:not(.p-k):not(.p-v),
  html[lang="hi"] .blessing-body p {
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }
  /* Headings, numbers and buttons stay centred/ragged — justify would look wrong. */
  h1, h2, h3, h4,
  .sd-num, .sd-max, .p-k, .p-v, .btn, .badge, .kicker,
  .ga-tbl th, .ga-tbl td, .credit, .bottom-nav {
    text-align: inherit;
    hyphens: none;
    -webkit-hyphens: none;
  }
  .center, .center p { text-align: center; }
}

/* Personal blessing: warm, generously spaced, never justified. */
.blessing-body p { margin: 0 0 10px; line-height: 1.9; text-align: left !important; }
.blessing-body p:first-child { font-weight: 600; color: var(--text-strong); }
.blessing-body p:last-child { margin-bottom: 0; }


/* ---------- Expert avatar ----------
   A category icon stands in until a real photograph is supplied. It is
   deliberately an icon — this site never shows a stock face as if it were
   the practitioner. */
.expert-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.cat-avatar {
  flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%;
  background: linear-gradient(140deg, var(--violet-soft), rgba(201, 169, 106, .14));
  border: 1px solid var(--hair-gold); color: var(--accent);
}
.cat-avatar svg { width: 58%; height: 58%; display: block; }
.cat-avatar-img { object-fit: cover; padding: 0; border: 1px solid var(--hair-gold); }
[data-theme="light"] .cat-avatar { color: var(--accent-b); }


/* ---------- Services mega menu ---------- */
.mega-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); padding: 7px 10px; border-radius: 999px; white-space: nowrap;
  font-size: .87rem; font-weight: 500; font-family: var(--font-body);
  transition: color .15s, background .15s;
}
.mega-btn:hover { color: var(--text-strong); background: var(--violet-soft); }
.mega-btn.active { color: var(--accent-ink); background: var(--accent); font-weight: 600; }
.mega-caret { font-size: .7em; opacity: .8; }

/* The panel is centred UNDER ITS BUTTON, not on the viewport. It used to be
   left:50% + translateX(-50%) against the sticky header, which centres on the window —
   so on a wide screen the panel sat ~60px away from the "Services" button that opened it
   and lined up with nothing. positionMega() in app.js sets `left` each time it opens,
   clamped to the header's content box so it can never hang off either edge. */
.header-inner { position: relative; }
.mega-panel {
  position: absolute; top: 62px; left: 0; transform: none;
  width: min(920px, calc(100vw - 32px)); z-index: 80;
  background: var(--panel); border: 1px solid var(--hair);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; animation: megaIn .14s ease-out;
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } }
.mega-panel[hidden] { display: none; }

.mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.mega-item {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px;
  border-radius: var(--radius-sm); color: var(--text); transition: background .14s;
}
.mega-item:hover { text-decoration: none; background: var(--panel2); }
/* Mega items are <a> inside .main-nav, which sets white-space: nowrap to keep the
   top nav on one row. That inherited here and made the descriptions overflow across
   neighbouring columns instead of wrapping. Reset it inside the panel. */
.mega-panel, .mega-panel * { white-space: normal; }
/* Same inheritance trap, second symptom: .main-nav a also sets border-radius:999px for the
   pill-shaped top-nav links. Its specificity (0,1,1) beats a bare .mega-item / .mega-all
   (0,1,0), so the hover highlight on a 291x90 card and the "view all" bar were both drawn
   as full pills with huge rounded ends instead of cards. Scoping by .mega-panel gives
   (0,2,0), which wins. Reset it here, next to the white-space reset, for the same reason. */
.mega-panel .mega-item, .mega-panel .mega-all { border-radius: var(--radius-sm); }
.mega-item { min-width: 0; align-items: flex-start; }
.mega-txt { min-width: 0; flex: 1 1 auto; }
.mega-name, .mega-alt, .mega-desc { min-width: 0; overflow-wrap: anywhere; }
.mega-name, .mega-desc { overflow-wrap: anywhere; }
.mega-item .cat-avatar { width: 38px; height: 38px; }
.mega-txt { min-width: 0; }
.mega-name { display: block; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.mega-alt { display: block; font-weight: 400; font-size: .74rem; color: var(--faint); }
.mega-desc {
  display: block; margin-top: 3px; font-size: .78rem; line-height: 1.45; color: var(--muted);
}
.mega-all {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; padding: 13px; border-radius: var(--radius-sm);
  background: var(--violet-soft); color: var(--accent-b); font-weight: 600; font-size: .92rem;
}
.mega-all:hover { text-decoration: none; background: rgba(201, 169, 106, .16); }
.mega-arrow { transition: transform .15s; }
.mega-all:hover .mega-arrow { transform: translateX(3px); }

/* Inside the mobile drawer the panel becomes a full-width card list. It keeps the
   icon, both names and the description — the same information as desktop, just
   stacked — with tap targets big enough to hit comfortably. */
@media (max-width: 1100px) {
  .mega-btn {
    width: 100%; justify-content: space-between; padding: 12px;
    font-size: .95rem; border: 1px solid var(--hair); margin: 2px 0;
  }
  .mega-btn[aria-expanded="true"] .mega-caret { transform: rotate(180deg); }
  .mega-caret { transition: transform .15s; }
  .mega-panel {
    position: static; transform: none; width: 100%; margin: 4px 0 8px;
    box-shadow: none; border-color: var(--hair); padding: 6px;
    animation: none; max-height: 60vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mega-grid { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mega-item { padding: 12px 10px; min-height: 56px; align-items: center; }
  .mega-item .cat-avatar { width: 40px; height: 40px; }
  .mega-name { font-size: .96rem; }
  .mega-alt { font-size: .78rem; }
  /* Description stays, trimmed to two lines so the list does not become a wall. */
  .mega-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: .76rem; margin-top: 2px;
  }
  .mega-all { margin-top: 8px; padding: 14px; }
}


/* ---------- Print / Save as PDF ---------- */
.print-bar { display: flex; justify-content: center; margin-top: 22px; }
.btn-print { gap: 8px; }
@media print { .print-bar { display: none !important; } }


/* The LIVE dot must not be the only signal — pair it with an accessible name
   (set via title/aria-label in the renderers) and a visible ring so it reads
   as a state marker rather than decoration. */
.sv-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }


/* Hint under a date/time field — tells the user the format expected and, on
   mobile, that tapping opens the native picker. */
.bf-hint { display: block; margin-top: 4px; font-size: .74rem; color: var(--faint); line-height: 1.4; }
.bf-field input[type="date"], .bf-field input[type="time"] {
  min-height: 46px;                  /* comfortable tap + room for the picker icon */
  -webkit-appearance: none; appearance: none;
}
/* Make the native picker icon visible on a dark ground. */
.bf-field input[type="date"]::-webkit-calendar-picker-indicator,
.bf-field input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(18%) saturate(600%) hue-rotate(5deg);
  cursor: pointer; opacity: .9; padding: 4px;
}
[data-theme="light"] .bf-field input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .bf-field input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none; opacity: .75;
}


/* ---------- Footer on small screens ----------
   Nine categories in one tall column pushes everything else off the screen, so
   they run in two columns. Every link keeps a comfortable tap height. */
/* Footer categories on a DESKTOP: two columns, not nine stacked rows.
   Nine one-per-row links made the categories column the tallest thing in the
   footer and set the whole footer's height on its own. The labels are already
   the short ones (name_short_*), so two columns fit without wrapping. The
   phone layout below is unchanged — it has been two columns since August. */
@media (min-width: 761px) {
  .f-cols > div:first-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    column-gap: 28px;
    align-content: start;
  }
  .f-cols > div:first-child h4 { grid-column: 1 / -1; }
  .f-cols > div:first-child a { white-space: nowrap; }
}

@media (max-width: 760px) {
  /* Footer categories: a real 2-column grid, every name on ONE line.
     This used to be inline-block halves that collapsed to one-per-line below 400px —
     and since most phones are under 400 CSS px, the two-column layout was effectively
     never seen. The names are the short labels (name_short_*), so they fit without
     wrapping; nowrap + ellipsis is the backstop if a longer one is ever added. */
  .f-cols { gap: 24px 20px; flex-direction: column; }
  .f-cols > div { width: 100%; }
  .f-cols > div:first-child {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px;
  }
  .f-cols > div:first-child h4 { grid-column: 1 / -1; }
  .f-cols > div:first-child a {
    display: block; width: auto; padding: 9px 0; min-height: 40px;
    line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .f-cols > div:not(:first-child) a { padding: 9px 0; min-height: 40px; }
  .f-cols h4 { margin-bottom: 8px; }
  .footer-inner { gap: 20px; padding-bottom: 20px; }
}

/* ---------- Palmistry self-observation options ----------
   Radio choices rendered as tappable pills. The native radio stays in the DOM
   (it is what the form reads and what a screen reader announces) but is visually
   replaced by the pill. Minimum 44px tall so it is comfortable on a phone. */
.pill-opt {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--hair); border-radius: 999px;
  background: var(--panel); color: var(--text);
  font-size: .92rem; line-height: 1.3; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pill-opt:hover { border-color: var(--accent); background: var(--panel2); }
.pill-opt input { accent-color: var(--accent); margin: 0; }
.pill-opt:has(input:checked) {
  border-color: var(--accent); background: var(--violet-soft); font-weight: 600;
}
/* :has() is unsupported in older browsers — the checked radio itself still shows
   the selection there, so the control degrades to a plain radio list. */
@media (max-width: 480px) {
  .pill-opt { width: 100%; }
}

/* Date-of-birth pill selects (day/month/year) -- added because a native
   <input type=date> was reported as tedious on mobile and ambiguous
   (DD/MM vs MM/DD). Three plain selects, rounder than the site's usual
   inputs to read clearly as separate 'pills' in one row. */
.bf-date-pills { display: flex; gap: 8px; }
.bf-date-pills select { border-radius: 999px; text-align: center; padding: 12px 8px; }
.bf-date-pills select[id$="-day"] { flex: 0 0 22%; }
.bf-date-pills select[id$="-month"] { flex: 0 0 34%; }
.bf-date-pills select[id$="-year"] { flex: 1; }
@media (max-width: 480px) { .bf-date-pills { gap: 6px; } .bf-date-pills select { padding: 10px 4px; font-size: .92rem; } }


/* ---------- Modern chevron on every <select> ----------
   The native OS arrow differs in shape and colour in every browser, and beside
   this site's own round date pills it read as unfinished. appearance:none drops
   it and a 12px chevron is drawn in its place.

   The colour is a TOKEN, not a literal: a gold-ink chevron (#8A6D1F) is legible
   on the ivory field but effectively invisible on the dark one (--field is
   #060A12), so it follows --accent, which is #C9A96A in dark and #84652B in
   light — the same gold-ink weight the light theme already uses for text.

   ORDER MATTERS: the base rule above sets `background:` (the shorthand), which
   resets background-image to none. These rules must stay AFTER it, and they set
   background-image on its own rather than re-declaring the shorthand. */
:root                 { --ga-chev: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2.6%204.4L6%207.8l3.4-3.4'%20fill='none'%20stroke='%23C9A96A'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-theme="light"]  { --ga-chev: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2.6%204.4L6%207.8l3.4-3.4'%20fill='none'%20stroke='%2384652B'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { --ga-chev: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2.6%204.4L6%207.8l3.4-3.4'%20fill='none'%20stroke='%2384652B'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); }
}

.bf-field select, select.ga-input {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: var(--ga-chev);
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 12px;
  padding-right: 36px;
  cursor: pointer;
}
.bf-field select:focus, select.ga-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
/* The three date pills centre their value, so the chevron's room is mirrored on
   the left — the DD / MMM / YYYY stays optically centred and the chevron sits
   inside the right padding rather than pushing the text off-centre. */
.bf-date-pills select {
  padding-left: 22px; padding-right: 22px;
  background-position: right 7px center;
}
@media (max-width: 480px) {
  .bf-date-pills select {
    padding-left: 15px; padding-right: 15px;
    background-position: right 4px center; background-size: 10px 10px;
  }
}

/* ---------- Footer categories: a rule between the two sub-columns ----------
   Two columns of short links read as one undivided block. A 1px hairline down
   the gap makes the pairing obvious.

   IT IS A POSITIONED LINE, NOT A BORDER, and both halves of that matter.
   1. A `border-left` on the right-hand links measured 0.8px, not 1px, through
      getComputedStyle on a fractional-DPR display: Chrome snaps BORDER widths
      to whole device pixels, so 1px CSS at DPR 1.25 paints 1 device px and
      reports back 0.8 CSS px. An element's own width is laid out and not
      snapped that way, so `width: 1px` stays exactly 1px at every DPR.
   2. A per-item border only exists where an item exists. The ninth category
      has no partner on its row, so the rule stopped a row short of the bottom
      and covered barely half the column. One box from top:0 to bottom:0 runs
      the full height, heading included.

   The line can sit at 50% only because the two sub-columns are equal here
   (1fr 1fr, overriding the minmax(0,auto) set higher up in this file). With
   content-sized columns 50% landed inside a column, which is why the first
   attempt reached for borders at all. The 36px gap leaves 18px of clear space
   on each side, so the link text sits exactly where it did before.
   Desktop only; the phone layout below 761px is untouched. */
@media (min-width: 761px) {
  .f-cols > div:first-child {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 36px;
  }
  .f-cols > div:first-child::before {
    content: ""; position: absolute; top: 0; bottom: 0;
    /* calc() rather than left:50% + a negative margin, so the computed `left`
       IS the painted position and the 18px of clear space either side can be
       measured straight off it. */
    left: calc(50% - 0.5px);
    width: 1px; min-width: 1px;
    background: var(--hair-strong); pointer-events: none;
  }
}

/* ---- header, owner 2026-09-06: icons on every menu item; "हिं | EN" switch; icon-only theme button ---- */
.main-nav .nav-ic { font-size: .95em; margin-right: 5px; line-height: 1; }
.main-nav .mega-btn .nav-ic { margin-right: 5px; }
.lang-sw { gap: 5px; letter-spacing: .02em; }
.lang-sw .lsw-hi, .lang-sw .lsw-en { opacity: .45; font-weight: 600; }
.lang-sw .lsw-sep { opacity: .35; font-weight: 400; }
.lang-sw.is-hi .lsw-hi, .lang-sw.is-en .lsw-en { opacity: 1; color: var(--accent-ink); }
#theme-btn.theme-only { width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; }
#theme-btn.theme-only .ib-ic { margin: 0; font-size: 1.05rem; }
@media (max-width: 1100px) { .main-nav .nav-ic { margin-right: 8px; } }

/* ===== Cross-sell strip (kundli / palmistry / numerology) — added 2026-09-12 ===== */
.xsell-sec { padding-top: 0; }
.xsell-grid { margin-top: 18px; }
.xsell-card {
  display: flex; flex-direction: column; gap: 10px; padding: 24px;
  background: color-mix(in srgb, var(--xsell-hue, var(--accent)) 8%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--xsell-hue, var(--accent)) 22%, var(--hair));
  border-radius: var(--radius);
  color: var(--text); text-decoration: none; position: relative; overflow: hidden;
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--xsell-hue, var(--accent)) 60%, transparent);
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
}
.xsell-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--xsell-hue, var(--accent));
}
.xsell-card:hover {
  text-decoration: none; transform: translateY(-3px);
  border-color: var(--xsell-hue, var(--hair-gold));
  box-shadow: 0 20px 46px -16px color-mix(in srgb, var(--xsell-hue, var(--accent)) 75%, transparent);
}
.xsell-card.xsell-self { cursor: default; }
.xsell-card.xsell-self:hover {
  transform: none;
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--xsell-hue, var(--accent)) 60%, transparent);
}
/* Dark is the default theme on this site, and the hue tokens are pale/bright
   in dark mode — bump the glow further there so it genuinely reads brighter,
   rather than merely inheriting whatever intensity light mode also gets. */
:root:not([data-theme="light"]) .xsell-card {
  box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--xsell-hue, var(--accent)) 70%, transparent);
}
:root:not([data-theme="light"]) .xsell-card:hover {
  box-shadow: 0 22px 54px -12px color-mix(in srgb, var(--xsell-hue, var(--accent)) 85%, transparent);
}
[data-theme="light"] .xsell-card {
  background: color-mix(in srgb, var(--xsell-hue, var(--accent)) 5%, var(--panel));
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .xsell-card {
    background: color-mix(in srgb, var(--xsell-hue, var(--accent)) 5%, var(--panel));
  }
}
.xsell-kundli { --xsell-hue: var(--accent); }
.xsell-palmistry { --xsell-hue: var(--teal); }
.xsell-numerology { --xsell-hue: var(--violet); }
.xsell-ic { color: var(--xsell-hue); line-height: 0; }
.xsell-ic svg { width: 30px; height: 30px; display: block; }
.xsell-title { font-weight: 700; font-size: 1.05rem; color: var(--text-strong); }
.xsell-desc { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.xsell-price { font-size: .8rem; font-weight: 600; color: var(--xsell-hue); }
.xsell-badge {
  align-self: flex-start; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; background: var(--xsell-hue); color: var(--accent-ink, #14100A); font-weight: 700; opacity: .92;
}
.xsell-cta { margin-top: auto; align-self: flex-start; }
html[lang="hi"] .xsell-desc,
html[lang="hi"] .xsell-price { word-break: normal; }


/* ===================== numerology premium platform (2026-09-12) ===================== */

/* ---------- NUMEROLOGY PREMIUM PLATFORM (numerology.html · numerology-premium.js) ---------- */
/* Design language: the site's navy / gold / soft violet tokens; cards, thin borders, large
   numbers. Everything is prefixed nm- (page) or premium- (lock component). */
.nm-hero { position: relative; overflow: hidden; border-radius: var(--radius); padding: 44px 28px 38px; margin-top: 18px;
  background: radial-gradient(900px 420px at 15% 0%, var(--hero-glow1), transparent 60%), radial-gradient(700px 380px at 90% 100%, var(--hero-glow2), transparent 60%), var(--panel);
  border: 1px solid var(--hair-gold); }
.nm-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.15; max-width: 22ch; }
.nm-hero .nm-hero__sub { color: var(--muted); max-width: 56ch; margin-top: 12px; font-size: 1.04rem; }
.nm-hero .cta-row { margin-top: 22px; }
.nm-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.nm-badges span { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  color: var(--text); background: var(--violet-soft); border: 1px solid var(--hair); border-radius: 999px; padding: 6px 12px; }
.nm-badges span::before { content: "\2713"; color: var(--accent); font-weight: 700; }

.nm-ic { display: inline-flex; width: 22px; height: 22px; flex: 0 0 22px; color: var(--accent); }
.nm-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* section shells */
.nm-sec { margin-top: 28px; }
.nm-sec > .card > h2, .nm-sec > h2 { font-size: 1.35rem; }
.nm-sec .nm-lede { color: var(--muted); margin-top: 6px; font-size: .95rem; max-width: 60ch; }

/* overall score */
.nm-score { display: flex; gap: 22px; align-items: center; padding: 18px; border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--panel2); margin-bottom: 18px; flex-wrap: wrap; }
.nm-score__ring { --pct: 0; width: 112px; height: 112px; border-radius: 50%; flex: 0 0 112px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--hair) 0); position: relative; }
.nm-score__ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--panel); }
.nm-score__val { position: relative; font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; color: var(--text-strong); line-height: 1; }
.nm-score__of { position: relative; font-size: .72rem; color: var(--faint); letter-spacing: .08em; }
.nm-score__txt { flex: 1 1 260px; min-width: 0; }
.nm-score__txt b { display: block; font-size: 1.05rem; color: var(--text-strong); }
.nm-score__txt p { color: var(--muted); font-size: .86rem; margin-top: 4px; }
.nm-score__how { margin-top: 8px; font-size: .84rem; }
.nm-score__how summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.nm-score__how ul { list-style: none; margin-top: 8px; display: grid; gap: 4px; }
.nm-score__how li { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.nm-score__how li i { font-style: normal; color: var(--text); font-variant-numeric: tabular-nums; }

/* number cards */
.nm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.nm-card { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--panel2); position: relative; overflow: hidden;
  transition: transform .2s, border-color .2s; }
.nm-card:hover { transform: translateY(-2px); border-color: var(--hair-gold); }
.nm-card__num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--accent); min-width: 54px; text-align: center; position: relative; }
.nm-master { position: absolute; top: -6px; right: -10px; font-size: .8rem; color: var(--violet); }
.nm-card__body { min-width: 0; }
.nm-card__title { font-size: .98rem; margin: 0; color: var(--text-strong); font-family: var(--font-body); font-weight: 700; }
.nm-card__sub { font-size: .78rem; color: var(--faint); margin-top: 2px; line-height: 1.4; }
.nm-card__interp { font-size: .86rem; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.nm-card__more { display: inline-block; margin-top: 8px; font-size: .8rem; font-weight: 600; color: var(--accent); }
.nm-card--year .nm-card__num { color: var(--violet); }

/* Lo Shu */
.nm-loshu { display: grid; gap: 6px; max-width: 320px; margin: 0 auto; }
.nm-loshu__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.nm-loshu__cell { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--hair); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--panel2); }
.nm-loshu__n { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--text-strong); letter-spacing: .04em; }
.nm-loshu__c { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.nm-loshu__cell.is-present { background: var(--violet-soft); border-color: var(--hair-gold); }
.nm-loshu__cell.is-repeated { background: rgba(201, 169, 106, .16); border-color: var(--accent); }
.nm-loshu__cell.is-dominant { background: rgba(201, 169, 106, .28); border-color: var(--accent); box-shadow: 0 0 0 2px var(--hair-gold) inset; }
.nm-loshu__cell.is-missing { opacity: .55; border-style: dashed; }
.nm-loshu__cell.is-missing .nm-loshu__n { color: var(--faint); font-weight: 400; }
.nm-loshu__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; font-size: .74rem; color: var(--muted); }
.nm-loshu__legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--hair); background: var(--panel2); }
.nm-loshu__legend .is-present::before { background: var(--violet-soft); border-color: var(--hair-gold); }
.nm-loshu__legend .is-repeated::before { background: rgba(201, 169, 106, .3); border-color: var(--accent); }
.nm-loshu__legend .is-dominant::before { background: rgba(201, 169, 106, .5); border-color: var(--accent); }
.nm-loshu__legend .is-missing::before { border-style: dashed; opacity: .6; }
.nm-loshu__facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 14px; font-size: .88rem; }
.nm-loshu__facts dt { color: var(--faint); } .nm-loshu__facts dd { color: var(--text-strong); font-weight: 600; }
.nm-loshu__planes, .nm-loshu__missing { margin-top: 10px; padding-left: 18px; font-size: .86rem; color: var(--muted); display: grid; gap: 4px; }

/* strongest pattern */
.nm-pattern { font-size: 1.08rem; line-height: 1.7; color: var(--text); border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; }

/* life-area insight cards */
.nm-insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.nm-insight { border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--panel2); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.nm-insight__head { display: flex; align-items: center; gap: 10px; }
.nm-insight__head h3 { margin: 0; font-size: 1.02rem; flex: 1; font-family: var(--font-body); font-weight: 700; }
.nm-insight__score { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--text-strong); font-weight: 700; }
.nm-insight__score i { --pct: 0; display: block; width: 64px; height: 6px; border-radius: 99px; background: var(--hair); position: relative; overflow: hidden; }
.nm-insight__score i::after { content: ""; position: absolute; inset: 0; width: calc(var(--pct) * 1%); background: linear-gradient(90deg, var(--accent), var(--accent-b)); border-radius: 99px; }
.nm-insight__free { color: var(--text); font-size: .92rem; line-height: 1.5; }

/* premium lock */
.premium-locked { position: relative; border: 1px dashed var(--hair-gold); border-radius: var(--radius-sm); padding: 14px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.premium-head { display: flex; align-items: center; gap: 8px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.premium-head .nm-ic { width: 16px; height: 16px; flex-basis: 16px; }
.premium-locked h4 { margin: 0; font-size: .96rem; }
.premium-teaser { font-size: .86rem; color: var(--muted); line-height: 1.5; }
.premium-blur { filter: blur(5px); user-select: none; pointer-events: none; font-size: .84rem; color: var(--muted); line-height: 1.5; max-height: 3.2em; overflow: hidden; }
.premium-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.premium-feat { list-style: none; display: grid; gap: 4px; font-size: .82rem; color: var(--text); }
.premium-feat li { display: flex; align-items: center; gap: 6px; }
.premium-feat .nm-ic { width: 14px; height: 14px; flex-basis: 14px; color: var(--green); }
.premium-cta { align-self: flex-start; margin-top: 4px; }
.premium-unlocked { border-left: 3px solid var(--green); padding: 4px 0 4px 14px; font-size: .92rem; line-height: 1.6; color: var(--text); }

/* cycles */
.nm-cycles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.nm-cycle { border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: 14px; background: var(--panel2); }
.nm-cycle--now { border-color: var(--hair-gold); background: var(--violet-soft); grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr; gap: 6px 16px; align-items: center; }
.nm-cycle__k { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.nm-cycle__v { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1.1; }
.nm-cycle p { font-size: .88rem; color: var(--muted); margin-top: 6px; }
.nm-cycle--now p { margin-top: 0; grid-column: 3; }
.nm-timeline { margin-top: 16px; }
.nm-timeline b { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.nm-timeline ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nm-timeline li { border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--panel2); display: grid; gap: 2px; }
.nm-timeline__y { font-size: .78rem; color: var(--faint); }
.nm-timeline__n { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--violet); }
.nm-timeline__t { font-size: .84rem; color: var(--text); }
.nm-timeline__note { display: flex; align-items: center; gap: 6px; font-size: .82rem; margin-top: 8px; }
.nm-timeline__note .nm-ic { width: 14px; height: 14px; flex-basis: 14px; }

/* report preview */
.nm-preview { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.nm-preview__page { aspect-ratio: 1 / 1.35; border-radius: 8px; border: 1px solid var(--hair-gold); background: linear-gradient(180deg, var(--panel2), var(--panel)); padding: 12px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.nm-preview__no { font-size: .7rem; letter-spacing: .14em; color: var(--accent); font-weight: 700; }
.nm-preview__t { font-size: .84rem; font-weight: 600; color: var(--text-strong); line-height: 1.3; }
.nm-preview__art { flex: 1; margin-top: 6px; border-radius: 6px; opacity: .85;
  background: repeating-linear-gradient(180deg, var(--hair) 0 2px, transparent 2px 9px); }
.nm-preview__page--2 .nm-preview__art { background: linear-gradient(var(--hair), var(--hair)) 0 0 / 46% 46% no-repeat, linear-gradient(var(--hair), var(--hair)) 100% 0 / 46% 46% no-repeat, linear-gradient(var(--hair), var(--hair)) 0 100% / 46% 46% no-repeat, linear-gradient(var(--hair), var(--hair)) 100% 100% / 46% 46% no-repeat; }
.nm-preview__page--3 .nm-preview__art { background: linear-gradient(var(--hair-strong), var(--hair-strong)) center / 1px 100% no-repeat, linear-gradient(var(--hair-strong), var(--hair-strong)) center / 100% 1px no-repeat, linear-gradient(var(--hair-strong), var(--hair-strong)) 33% 0 / 1px 100% no-repeat, linear-gradient(var(--hair-strong), var(--hair-strong)) 0 33% / 100% 1px no-repeat, var(--violet-soft); }
.nm-preview__page--4 .nm-preview__art { background: repeating-linear-gradient(90deg, var(--hair-gold) 0 10px, transparent 10px 14px) 0 30% / 70% 8px no-repeat, repeating-linear-gradient(90deg, var(--hair-gold) 0 10px, transparent 10px 14px) 0 60% / 50% 8px no-repeat, repeating-linear-gradient(180deg, var(--hair) 0 2px, transparent 2px 9px); }
.nm-preview__page--5 .nm-preview__art { background: repeating-linear-gradient(90deg, var(--violet-soft) 0 7%, transparent 7% 8.33%) 0 50% / 100% 40% no-repeat, linear-gradient(var(--hair-strong), var(--hair-strong)) 0 50% / 100% 1px no-repeat; }

/* pricing */
.nm-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nm-plan { position: relative; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--panel2); padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.nm-plan h3 { margin: 0; font-size: 1.15rem; }
.nm-plan__price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--text-strong); }
.nm-plan__mrp { font-size: 1.05rem; font-weight: 500; color: var(--faint); margin-right: 4px; }
.nm-plan ul { list-style: none; display: grid; gap: 6px; font-size: .88rem; color: var(--text); flex: 1; }
.nm-plan li { display: flex; align-items: flex-start; gap: 7px; }
.nm-plan li .nm-ic { width: 15px; height: 15px; flex-basis: 15px; margin-top: 2px; color: var(--green); }
.nm-plan .btn { margin-top: auto; justify-content: center; }
.nm-plan.is-popular { border-color: var(--accent); box-shadow: 0 0 0 1px var(--hair-gold), var(--shadow-sm); transform: translateY(-4px); }
.nm-plan__badge { position: absolute; top: -12px; left: 20px; background: var(--accent); color: var(--accent-ink); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.nm-plan__cur { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--green); font-weight: 600; }
.nm-plan.is-current { border-color: var(--green); }

/* store */
.nm-store { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.nm-store__card { border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--panel2); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.nm-store__card .nm-ic { width: 26px; height: 26px; flex-basis: 26px; }
.nm-store__card h3 { margin: 0; font-size: 1rem; font-family: var(--font-body); font-weight: 700; }
.nm-store__card p { font-size: .84rem; color: var(--muted); line-height: 1.5; flex: 1; }
.nm-store__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.nm-store__price { font-weight: 700; color: var(--accent); font-size: .92rem; }
.nm-store__card.is-soon { border-style: dashed; opacity: .85; }
.nm-store__card.is-soon .nm-store__price { color: var(--violet); }
.nm-bundle { margin-top: 18px; border: 1px solid var(--hair-gold); border-radius: var(--radius); background: linear-gradient(135deg, var(--violet-soft), transparent 70%), var(--panel2); padding: 20px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.nm-bundle h3 { margin: 0 0 4px; font-size: 1.1rem; }
.nm-bundle p { color: var(--muted); font-size: .88rem; }
.nm-bundle__price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.nm-bundle__price b { font-family: var(--font-display); font-size: 1.9rem; color: var(--text-strong); }
.nm-bundle__sep { font-size: .82rem; color: var(--faint); }
.nm-bundle__save { font-size: .82rem; font-weight: 700; color: var(--green); }

/* name correction */
.nm-name__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.nm-name__h.is-friendly .p-v { color: var(--green); } .nm-name__h.is-neutral .p-v { color: var(--amber); } .nm-name__h.is-challenging .p-v { color: var(--red); }

/* AI */
.nm-ai__prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.nm-ai__chip { background: var(--violet-soft); border: 1px solid var(--hair); color: var(--text); border-radius: 999px; padding: 7px 12px; font-size: .82rem; cursor: pointer; font-family: inherit; }
.nm-ai__chip:hover { border-color: var(--hair-gold); }
.nm-ai__form textarea { width: 100%; background: var(--field); color: var(--text); border: 1px solid var(--hair-strong); border-radius: var(--radius-sm); padding: 12px 14px; font: inherit; resize: vertical; min-height: 64px; }
.nm-ai__form textarea:focus { border-color: var(--accent); outline: none; }
.nm-ai__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.nm-ai__left { font-size: .82rem; color: var(--faint); }
.nm-ai__out { margin-top: 14px; }
.nm-ai__thinking { color: var(--muted); font-size: .9rem; padding: 10px 0; }
.nm-ai__thinking::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; animation: nm-spin .8s linear infinite; vertical-align: middle; }
.nm-ai__answer { border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--panel2); padding: 14px 16px; }
.nm-ai__q { font-size: .82rem; color: var(--faint); margin-bottom: 8px; }
.nm-ai__a { font-size: .95rem; line-height: 1.65; color: var(--text); white-space: normal; }
.nm-ai__answer.is-blocked { border-color: var(--amber); }
.nm-ai__disc { font-size: .8rem; margin-top: 12px; }

/* trust */
.nm-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.nm-trust > div { border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--panel2); padding: 16px; display: grid; gap: 8px; }
.nm-trust h3 { margin: 0; font-size: .98rem; font-family: var(--font-body); font-weight: 700; }
.nm-trust p { font-size: .86rem; color: var(--muted); line-height: 1.5; }

/* unlocked notice + sticky bar + overlay + modal */
.nm-unlocked { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--green); border-radius: var(--radius-sm); padding: 12px 16px; background: rgba(52, 211, 153, .08); margin-top: 16px; font-size: .92rem; }
.nm-unlocked .nm-ic { color: var(--green); }
/* sits ABOVE the site bottom-nav (71px, z-index 70) and clear of the chat bubble on the right */
#nm-sticky { position: fixed; left: 0; right: 0; bottom: 71px; z-index: 65; padding: 8px 76px 8px 14px; background: var(--nav-bg); backdrop-filter: blur(10px); border-top: 1px solid var(--hair-gold); }
#nm-sticky .btn { width: 100%; justify-content: center; }
@media (min-width: 761px) { #nm-sticky { display: none !important; } }
body.nm-has-sticky { padding-bottom: 76px; }
.nm-overlay, .nm-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 7, 14, .72); }
.nm-overlay__box, .nm-modal__box { width: min(520px, 100%); background: var(--panel); border: 1px solid var(--hair-gold); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); display: grid; gap: 12px; max-height: 92vh; overflow: auto; }
.nm-overlay__box { text-align: center; }
.nm-overlay__box h3 { margin: 0; }
.nm-overlay__body p { margin-top: 6px; }
.nm-overlay__btns { justify-content: center; margin-top: 6px; }
.nm-modal__box h3 { margin: 0 0 4px; }
.nm-modal .bf-field.is-req > span::after { content: " *"; color: var(--accent); }
.nm-modal input.is-bad, .nm-modal textarea.is-bad { border-color: var(--red); }
.nm-modal textarea { background: var(--field); color: var(--text); border: 1px solid var(--hair-strong); border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; }
.nm-spinner { width: 42px; height: 42px; margin: 0 auto; border-radius: 50%; border: 3px solid var(--hair-gold); border-top-color: var(--accent); animation: nm-spin .9s linear infinite; }
@keyframes nm-spin { to { transform: rotate(360deg); } }

/* reveal animation (subtle, respects reduced motion) */
.nm-reveal { animation: nm-up .32s ease-out both; }
@keyframes nm-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nm-reveal, .nm-spinner, .nm-ai__thinking::after { animation: none; } .nm-card, .nm-plan.is-popular { transition: none; transform: none; } }

/* responsive */
@media (max-width: 1000px) { .nm-preview { grid-template-columns: repeat(3, 1fr); } .nm-plans { grid-template-columns: 1fr; } .nm-plan.is-popular { transform: none; } }
@media (max-width: 760px) {
  .nm-hero { padding: 30px 20px 26px; }
  .nm-preview { grid-template-columns: repeat(2, 1fr); }
  .nm-timeline ol { grid-template-columns: 1fr; }
  .nm-cycle--now { grid-template-columns: 1fr; } .nm-cycle--now p { grid-column: 1; }
  .nm-score { flex-direction: column; text-align: center; } .nm-score__how li { justify-content: center; }
  .nm-bundle__price { align-items: flex-start; }
  .nm-cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .nm-preview { grid-template-columns: 1fr 1fr; } .nm-loshu { max-width: 260px; } .nm-badges span { font-size: .72rem; } }
@media print { #nm-sticky, .nm-modal, .nm-overlay, .premium-locked .premium-cta, .nm-ai, .nm-plans .btn, .nm-store .btn { display: none !important; } .premium-blur { filter: none; } }