/* ==========================================================================
   Angira Jyotish AI-Forecast — app.css design system
   Theme: new-angira "warm Vedic premium" evolution (Qwen38-plan/11 Part A+B)
   No frameworks. Mobile-first, 380px floor, print + reduced-motion aware.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    /* Part A palette — warm Vedic premium */
    --conch: #fbf8f0;
    --paper: #f3ebdd;
    --cotton: #e4d7c5;
    --sand: #cbbca7;
    --stone: #70665c;
    --basalt: #171918;
    --vermilion: #b94a2f;
    --vermilion-deep: #8f341f;
    --copper: #8a5a30;
    --copper-hover: #704820;
    --brass: #a07030;
    --brass-text: #7a5520;
    --peacock: #174c50;
    --peacock-deep: #0d3336;
    --white: #fffdf8;
    --success: #326346;

    /* Part B additions */
    --ink: #232019;
    --lens: #fffdf8;
    --lens-border: #a07030;
    --vermilion-glow: rgba(185, 74, 47, .18);
    --peacock-soft: #e3ecee;
    --copper-soft: #f0e4d6;

    --good: #326346;
    --good-soft: #e4efe7;
    --warn: #a07030;
    --warn-soft: #f3e8d6;
    --bad: #8f341f;
    --bad-soft: #f5e2dc;

    --radius-card: 14px;
    --radius-lens: 10px;
    --radius-chip: 999px;

    /* Typography is matched to the main website (home.css --display/--body/
     * --data) so moving between angirajyotish.com and this app reads as one
     * continuous site rather than two products that merely share a palette. */
    /* Devanagari is appended to each stack rather than left to the browser's
     * arbitrary substitute. Fallback runs per glyph, so Latin still renders in
     * the display/UI/mono face; Devanagari characters — which none of those
     * faces carry — drop through to Mangal, the deliberate primary Devanagari
     * face (ships with Windows, reads clearly at this size). Noto Sans
     * Devanagari is kept only as a fallback for platforms without Mangal.
     * Without this, Hindi inside a mono or serif element picked up Nirmala UI
     * and visibly disagreed with the rest of the page. */
    --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Constantia, Mangal, "Noto Sans Devanagari", serif;
    --font-ui: "Trebuchet MS", Candara, "Segoe UI", Mangal, "Noto Sans Devanagari", sans-serif;
    --font-mono: Consolas, "Courier New", Mangal, "Noto Sans Devanagari", monospace;
    --font-devanagari: Mangal, "Noto Sans Devanagari", "Rajdhani", "Lohit Devanagari", sans-serif;
    /* Exact aliases consumed by the main-website chrome copy. */
    --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Constantia, serif;
    --body: "Trebuchet MS", Candara, "Segoe UI", sans-serif;
    --data: Consolas, "Courier New", monospace;

    --shadow: 0 24px 70px rgba(61, 45, 29, .12);
    --shadow-sm: 0 10px 30px rgba(61, 45, 29, .08);
    --container: min(1380px, calc(100vw - 96px));
    --header-height: 88px;
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* mode defaults = KP (peacock); body[data-system] switches */
    --mode-accent: var(--peacock);
    --mode-deep: var(--peacock-deep);
    --mode-soft: var(--peacock-soft);
}

body[data-system="vedic"] {
    --mode-accent: var(--copper);
    --mode-deep: var(--copper-hover);
    --mode-soft: var(--copper-soft);
}

body[data-system="kp"] {
    --mode-accent: var(--peacock);
    --mode-deep: var(--peacock-deep);
    --mode-soft: var(--peacock-soft);
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    overflow-wrap: break-word;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 20px);
}

html[lang="hi"] body,
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] h4,
html[lang="hi"] p, html[lang="hi"] li, html[lang="hi"] td, html[lang="hi"] th,
html[lang="hi"] span, html[lang="hi"] a,
html[lang="hi"] button, html[lang="hi"] label, html[lang="hi"] input, html[lang="hi"] textarea,
html[lang="hi"] .hero-lead, html[lang="hi"] .eyebrow {
    font-family: var(--font-devanagari);
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    color: var(--basalt);
    background: var(--conch);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.aj-cursor-dot {
    position: fixed; z-index: 9999; top: -4px; left: -4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--vermilion); opacity: .55;
    pointer-events: none; will-change: transform;
    transition: width .15s var(--ease), height .15s var(--ease), opacity .15s var(--ease);
}
.aj-cursor-dot.is-link { width: 13px; height: 13px; opacity: .32; }

main.app-main { flex: 1 0 auto; display: block; }

h1, h2, h3, h4, p, ul, ol { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.2; }
h1 { font-size: clamp(30px, 5vw, 52px); letter-spacing: -.01em; }
h2 { font-size: clamp(24px, 3.4vw, 36px); }
h3 { font-size: clamp(18px, 2.2vw, 22px); }

a { color: var(--peacock); text-decoration: none; }
a:hover { color: var(--peacock-deep); text-decoration: underline; text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
p { margin-bottom: 1em; }

::selection { color: var(--white); background: var(--vermilion); }

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

.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: var(--container); margin-inline: auto; }
.section { position: relative; padding-block: clamp(56px, 7vw, 120px); }
.section--tight { padding-block: clamp(36px, 4vw, 64px); }
.section--paper { background: var(--paper); border-block: 1px solid var(--cotton); }
.section--deep { background: var(--peacock-deep); color: var(--conch); }
.section--deep h2, .section--deep h3 { color: var(--conch); }
.section--deep a { color: var(--cotton); }

.site-grain {
    position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .08;
    background-image: repeating-radial-gradient(circle at 25% 15%, rgba(23, 25, 24, .09) 0 .3px, transparent .5px 3px);
    background-size: 5px 5px; mix-blend-mode: multiply;
}
@media (max-width: 680px) { .site-grain { display: none; } }

/* ---------- 3. Eyebrow ---------- */
.eyebrow {
    display: flex; align-items: center; gap: 13px; margin-bottom: 22px;
    color: var(--vermilion); font-family: var(--font-mono);
    font-size: 13px; font-weight: 700; letter-spacing: .16em;
    line-height: 1.2; text-transform: uppercase;
}
.eyebrow::before { width: 42px; height: 1px; background: currentColor; content: ""; flex: 0 0 auto; }
.eyebrow span { color: var(--stone); }

/* ---------- 4. Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: 6px;
    font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: .04em;
    line-height: 1.2; cursor: pointer; text-decoration: none;
    transition: color .25s var(--ease), background-color .25s var(--ease),
        border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn--sm { min-height: 40px; padding: 8px 14px; font-size: 13px; }
.btn--block { display: flex; width: 100%; }

.btn--primary { color: var(--white); background: var(--vermilion); box-shadow: 0 14px 30px rgba(185, 74, 47, .22); }
.btn--primary:hover { background: var(--vermilion-deep); color: var(--white); }

.btn--secondary { color: var(--peacock-deep); background: var(--conch); border-color: var(--sand); }
.btn--secondary:hover { border-color: var(--peacock); color: var(--peacock-deep); }

.btn--outline { color: var(--basalt); background: transparent; border-color: var(--sand); }
.btn--outline:hover { border-color: var(--brass); color: var(--brass-text); }

.btn--text {
    min-height: 40px; padding-inline: 2px; background: transparent; border-radius: 0;
    border-bottom: 1px solid var(--cotton); color: var(--basalt);
}
.btn--text:hover { border-bottom-color: var(--vermilion); color: var(--vermilion); transform: none; }
.btn--journey-shine {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.btn--journey-shine > span { position: relative; z-index: 1; }
.btn--journey-shine::before {
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -48%;
    z-index: 0;
    width: 20%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .92), transparent);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: skewX(-20deg);
    animation: journey-link-shine 5s ease-in-out infinite;
}
@keyframes journey-link-shine {
    0%, 70% { left: -48%; opacity: 0; }
    76% { opacity: .9; }
    88%, 100% { left: 145%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .btn--journey-shine::before { display: none; }
}

.btn--token {
    color: var(--white);
    background: linear-gradient(120deg, var(--peacock) 0%, var(--peacock-deep) 100%);
    box-shadow: 0 14px 30px rgba(13, 51, 54, .25);
}
.btn--token:hover { box-shadow: 0 18px 36px rgba(13, 51, 54, .35); color: var(--white); }

.btn--disabled, .btn[disabled] {
    color: var(--stone); background: var(--conch); border-color: var(--cotton);
    cursor: not-allowed; opacity: .72; box-shadow: none; transform: none;
}

/* ---------- 6. Cards / chips / badges ---------- */
.card {
    background: var(--white); border: 1px solid var(--cotton); border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm); padding: 24px;
}
.card--raised { box-shadow: var(--shadow); }
.card h3 { margin-bottom: 8px; }
.card .card-meta { font-size: 13px; color: var(--stone); }
.card .price-line { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--brass-text); margin: 10px 0 0; }

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

.svc-card { display: flex; flex-direction: column; gap: 10px; }
.svc-card .svc-icon {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
    background: var(--mode-soft); color: var(--mode-accent); border: 1px solid var(--cotton);
}
.svc-card h3 { font-size: 19px; margin-bottom: 0; }
.svc-card .svc-tagline { font-size: 14px; color: var(--stone); flex: 1 0 auto; }
.svc-card .svc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px;
    border: 1px solid var(--cotton); border-radius: var(--radius-chip); background: var(--white);
    font-size: 13px; font-weight: 600; color: var(--stone); line-height: 1.35;
}
.chip--mode { border-color: transparent; background: var(--mode-soft); color: var(--mode-accent); }
.chip--good { background: var(--good-soft); border-color: transparent; color: var(--good); }
.chip--warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.chip--bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.chip--accent { background: var(--vermilion); border-color: transparent; color: var(--white); }

button.chip { cursor: pointer; min-height: 36px; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
button.chip:hover { border-color: var(--mode-accent); color: var(--mode-accent); }
button.chip.is-on { background: var(--peacock); border-color: var(--peacock); color: var(--white); }

.badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px;
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; background: var(--paper); color: var(--brass-text); border: 1px solid var(--cotton);
}

/* ---------- 7. Forms ---------- */
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field > label { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--basalt); }
.field .hint { font-size: 12.5px; color: var(--stone); font-weight: 400; }
.field .field-error { font-size: 13px; color: var(--bad); display: none; }
.field.is-invalid .field-error { display: block; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: var(--bad); }

.input {
    width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--sand);
    border-radius: 8px; background: var(--white); color: var(--basalt); font-size: 15px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input:hover { border-color: var(--brass); }
.input:focus { outline: none; border-color: var(--peacock); box-shadow: 0 0 0 3px rgba(23, 76, 80, .15); }
textarea.input { min-height: 96px; resize: vertical; }
.input--mono { font-family: var(--font-mono); letter-spacing: .08em; }
.input--big { min-height: 62px; font-size: 18px; }

.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--stone); }
.check-row input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--vermilion); flex: 0 0 auto; }

.segmented {
    display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid var(--sand);
    border-radius: 10px; background: var(--paper); width: 100%;
}
.segmented button {
    flex: 1 1 auto; min-height: 44px; border: 0; background: transparent; border-radius: 7px;
    padding: 8px 14px; font-size: 14px; font-weight: 700; color: var(--stone); cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.segmented button.is-on { background: var(--white); color: var(--peacock-deep); box-shadow: 0 4px 14px rgba(61, 45, 29, .12); }
.segmented button:not(.is-on):hover { color: var(--basalt); }
.segmented .seg-sub { display: block; font-size: 11.5px; font-weight: 600; color: var(--stone); letter-spacing: .03em; }

/* ---- answer-style strip (persona + language), above the composer ---- */
.chat-style-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chat-style-row .segmented--sm { flex: 1 1 200px; width: auto; padding: 3px; border-radius: 9px; }
.segmented--sm button { min-height: 32px; padding: 5px 10px; font-size: 12.5px; }

/* 7.1 Depth toggle (05 §4d) */
.depth-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.depth-opt {
    display: grid; gap: 2px; padding: 9px 10px;
    border: 1px solid var(--cotton); border-radius: 10px;
    background: var(--white); color: var(--ink); text-decoration: none;
    transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.depth-opt b { font-size: 13.5px; }
.depth-opt span { font-size: 10.5px; color: var(--stone); font-family: var(--font-mono); letter-spacing: .02em; }
.depth-opt:hover:not([aria-disabled="true"]) { border-color: var(--mode-accent); transform: translateY(-1px); }
.depth-opt.is-on { border-color: var(--mode-accent); background: var(--mode-soft); }
.depth-opt.is-on b { color: var(--mode-deep); }
.depth-opt[aria-disabled="true"] { opacity: .55; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .depth-opt:hover { transform: none; } }

/* 7.2 Stage rail (05 §6) */
.stage-rail { list-style: none; margin: 0 0 10px; padding: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* BUG-001 guard: an inactive stage is a fixed 18x3 dash that never grows, never
   shrinks, and clips anything inside it. If a label ever survives a stage change
   again it is invisible instead of wrapping to one character per line and
   painting a vertical column of Devanagari down the page. */
.stage-rail__item {
    flex: 0 0 18px;
    width: 18px; height: 3px; border-radius: 99px; background: var(--cotton);
    overflow: hidden;
    transition: background .3s var(--ease), width .3s var(--ease);
}
.stage-rail__item.is-done { background: var(--mode-accent); }
.stage-rail__item.is-on {
    /* the active label may shrink to share the row, but min-width:0 + word-level
       wrapping means it breaks between words — never mid-word into a column */
    flex: 0 1 auto; min-width: 0;
    width: auto; height: auto; background: none; overflow: visible;
    overflow-wrap: break-word; word-break: normal;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
    line-height: 1.45;
    color: var(--stone);
    animation: aj-shimmer 1.6s linear infinite;
}
@keyframes aj-shimmer {
    0%   { opacity: .55; }
    50%  { opacity: 1; }
    100% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .stage-rail__item.is-on { animation: none; opacity: 1; } }

.autocomplete { position: relative; }
.ac-list {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80;
    max-height: 300px; overflow: auto; margin: 0; padding: 6px; list-style: none;
    background: var(--white); border: 1px solid var(--sand); border-radius: 10px; box-shadow: var(--shadow);
}
.ac-list li { margin: 0; }
.ac-list button {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
    padding: 10px 12px; border: 0; border-radius: 7px; background: transparent; text-align: left;
    cursor: pointer; font-size: 14.5px; color: var(--basalt); min-height: 44px;
}
.ac-list button:hover, .ac-list li.is-active button { background: var(--mode-soft); }
.ac-list .ac-sub { font-size: 12px; color: var(--stone); font-family: var(--font-mono); }
.ac-list .ac-message { padding: 12px; color: var(--stone); font-size: 13px; line-height: 1.45; }
.ac-list .ac-message.is-loading::before { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--vermilion); content: ""; animation: ac-pulse .8s ease-in-out infinite alternate; }
.ac-list .ac-message.is-error { color: var(--bad); }
.ac-list[hidden] { display: none; }
@keyframes ac-pulse { to { opacity: .28; transform: scale(.72); } }

/* ---------- 8. Tables (sticky col + edge fade + card fallback <680px) ---------- */
.table-wrap {
    position: relative; overflow-x: auto; border: 1px solid var(--cotton);
    border-radius: var(--radius-card); background: var(--white);
}
.aj-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.aj-table th, .aj-table td {
    padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--paper);
    white-space: nowrap; vertical-align: middle;
}
.aj-table thead th {
    position: sticky; top: 0; z-index: 2; background: var(--paper); color: var(--stone);
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
    border-bottom: 1px solid var(--cotton);
}
.aj-table tbody tr:nth-child(even) { background: var(--conch); }
.aj-table tbody tr:hover, .aj-table tbody tr.row-hot { background: var(--mode-soft); }
.aj-table th:first-child, .aj-table td:first-child {
    position: sticky; left: 0; z-index: 1; background-color: var(--white);
    border-right: 1px solid var(--paper); min-width: 110px;
}
.aj-table thead th:first-child { z-index: 3; background-color: var(--paper); }
.aj-table tbody tr:nth-child(even) td:first-child { background-color: var(--conch); }
.aj-table tbody tr:hover td:first-child, .aj-table tbody tr.row-hot td:first-child { background-color: var(--mode-soft); }
.aj-table .td-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.aj-table .retro { color: var(--vermilion); font-weight: 700; }
.aj-table td.house-cell { white-space: normal; vertical-align: top; min-width: 150px; }
.house-number { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.house-help {
    position: relative; display: inline-grid; place-items: center;
    flex: 0 0 auto; width: 18px; height: 18px; margin-left: 6px; padding: 0;
    border: 1px solid var(--sand); border-radius: 50%;
    background: var(--paper); color: var(--peacock);
    font-family: var(--font-ui); font-size: 11px; font-weight: 800;
    line-height: 1; cursor: help; vertical-align: middle;
}
.house-help:hover, .house-help:focus-visible {
    border-color: var(--peacock); color: var(--white); background: var(--peacock); outline: none;
}
.house-tooltip-floating {
    position: fixed; z-index: 10000;
    width: min(320px, calc(100vw - 32px)); padding: 10px 12px;
    border: 1px solid var(--cotton); border-radius: 9px;
    background: var(--basalt); color: var(--white);
    font-family: var(--font-ui); font-size: 12.5px; font-weight: 400;
    line-height: 1.45; text-align: left; white-space: normal;
    box-shadow: var(--shadow-sm); opacity: 0; visibility: hidden; overflow-wrap: anywhere;
    pointer-events: none; transform: translateY(-3px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.house-tooltip-floating.is-visible {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.table-cards { display: none; gap: 12px; }
.table-cards .tcard { background: var(--white); border: 1px solid var(--cotton); border-radius: var(--radius-card); padding: 14px 16px; }
.table-cards .tcard h4 { margin: 0 0 8px; font-size: 15px; }
.table-cards .tcard dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0; font-size: 13.5px; }
.table-cards .tcard dt { color: var(--stone); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; font-family: var(--font-mono); align-self: center; }
.table-cards .tcard dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 680px) {
    .table-wrap.scrollable { display: none; }
    .table-cards { display: grid; }
}

/* ========================================================================== 
   Angira brand alignment — shared with the main Angira Jyotish website
   ========================================================================== */
body {
    background:
        linear-gradient(90deg, transparent 49.96%, rgba(166, 106, 63, .08) 50%, transparent 50.04%),
        linear-gradient(rgba(166, 106, 63, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(166, 106, 63, .045) 1px, transparent 1px), var(--conch);
    background-size: 100% 100%, 64px 64px, 64px 64px, auto;
}
.app-main { padding-top: var(--header-height); }
body.search-open { overflow: hidden; }
.hero { position: relative; display: flex; min-height: max(700px, calc(100svh - var(--header-height))); flex-direction: column; justify-content: center; overflow: hidden; padding: 68px 0 38px; background: linear-gradient(90deg, transparent 49.96%, rgba(166,106,63,.12) 50%, transparent 50.04%), linear-gradient(rgba(166,106,63,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(166,106,63,.055) 1px, transparent 1px), var(--conch); background-size: 100% 100%,64px 64px,64px 64px,auto; }
.hero::before { position: absolute; top: 14%; right: -14%; width: 54vw; height: 54vw; border-radius: 50%; background: radial-gradient(circle, rgba(184,137,75,.11), transparent 67%); content: ""; }
.hero-ruler { position: absolute; top: 0; bottom: 0; left: 20px; display: flex; width: 18px; flex-direction: column; align-items: center; justify-content: space-between; padding-block: 32px; color: var(--stone); font-family: var(--font-mono); font-size: 10px; }
.hero-copy { position: relative; z-index: 2; padding-left: clamp(0px,3vw,40px); }
.hero-copy .eyebrow { margin-bottom: 34px; }
.hero-eyebrow { margin: 0 0 22px; color: var(--vermilion); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; line-height: 1.3; }
.hero-copy h1 { max-width: 850px; margin-bottom: 30px; font-size: clamp(56px,5.7vw,96px); letter-spacing: -.045em; line-height: .94; }
.hero-copy h1 span, .hero-copy h1 em { display: block; }
.hero-copy h1 em { color: var(--vermilion); font-style: italic; }
.hero-copy .hero-brand-title { max-width: 740px; margin-bottom: 14px; font-size: clamp(68px, 7.4vw, 118px); }
.hero-brand-promise {
    max-width: 650px;
    margin: 0 0 20px;
    color: var(--copper-hover);
    font-family: var(--font-display);
    font-size: clamp(22px, 2.25vw, 34px);
    line-height: 1.25;
}
.hero-brand-promise.hero-tagline { margin-bottom: 24px; color: var(--vermilion); font-family: var(--font-mono); font-size: clamp(12px, 1.1vw, 15px); font-weight: 700; letter-spacing: .2em; line-height: 1.35; text-transform: uppercase; }
.hero-lead { max-width: 680px; margin-bottom: 30px; color: #504941; font-family: var(--font-display); font-size: clamp(18px,1.5vw,22px); line-height: 1.58; }
.hero-actions { margin-top: 0; }
.resume-link { display: inline-flex; gap: 7px; margin-top: 24px; color: var(--stone); font-size: 13px; font-weight: 700; text-decoration: none; }
.resume-link:hover { color: var(--vermilion); }
.hero-instrument { position: relative; z-index: 2; aspect-ratio: 1; width: min(37vw,590px); margin-inline: auto; }
.instrument-orbit { position: absolute; border: 1px solid rgba(166,106,63,.32); border-radius: 50%; }
.instrument-orbit--outer { inset: 0; }
.instrument-orbit--outer::before, .instrument-orbit--outer::after { position: absolute; top: 50%; width: 8px; height: 8px; border: 2px solid var(--vermilion); border-radius: 50%; background: var(--conch); content: ""; transform: translateY(-50%); }
.instrument-orbit--outer::before { left: -4px; } .instrument-orbit--outer::after { right: -4px; }
.instrument-orbit--middle { inset: 7.5%; border-style: dashed; animation: align-ring 1.4s var(--ease) both; }
.instrument-axis { position: absolute; top: 50%; left: 50%; background: rgba(166,106,63,.16); transform: translate(-50%,-50%); }
.instrument-axis--x { width: 112%; height: 1px; } .instrument-axis--y { width: 1px; height: 112%; }
.coordinate { position: absolute; z-index: 3; padding: 4px 7px; color: var(--stone); background: var(--conch); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; }
.coordinate--one { top: 10%; left: 2%; } .coordinate--two { top: 35%; right: -4%; } .coordinate--three { bottom: 12%; left: 1%; }
.time-window { position: absolute; right: 2%; bottom: 5%; z-index: 4; width: 51%; padding: 14px 16px; border: 1px solid rgba(166,106,63,.35); background: rgba(251,248,240,.92); box-shadow: 0 12px 30px rgba(61,45,29,.08); }
.time-window small { display: block; margin-bottom: 6px; color: var(--stone); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.time-window strong { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: clamp(12px,1.2vw,17px); letter-spacing: .04em; }
.time-window i { position: relative; flex: 1; height: 1px; margin-inline: 10px; background: var(--cotton); } .time-window i::after { position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--vermilion); content: ""; }
.instrument-pointer { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: rotate(31deg); } .instrument-pointer span { position: absolute; top: -5px; left: 50%; width: 1px; height: 48%; background: linear-gradient(var(--vermilion),transparent); }
.hero-instrument > p { position: absolute; right: 19%; bottom: -45px; max-width: 240px; color: var(--stone); font-family: var(--font-display); font-size: 13px; font-style: italic; text-align: right; }
.hero-foot { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: clamp(55px,8vh,110px); padding-top: 22px; border-top: 1px solid var(--cotton); }
.hero-foot ul { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; list-style: none; color: var(--stone); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; }
.hero-foot a { color: var(--vermilion-deep); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.hero-foot a span { margin-left: 7px; font-size: 16px; }
@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .hero-instrument { width: min(76vw,520px); }
    .hero-foot { margin-top: 70px; }
}
@media (max-width: 680px) {
    .app-main { padding-top: 76px; }
    .hero {
        min-height: 0;
        padding: 54px 0 30px;
    }
    .hero-ruler { display: none; }
    .hero-copy { padding-left: 0; }
    .hero-copy .eyebrow { margin-bottom: 24px; }
    .hero-copy h1 { font-size: clamp(45px, 13vw, 68px); line-height: .98; }
    .hero-lead { font-size: 17px; }
    .hero-instrument { width: min(88vw,440px); }
    .hero-instrument > p { right: 10%; bottom: -38px; font-size: 12px; }
    .hero-foot { align-items: flex-start; flex-direction: column; gap: 18px; margin-top: 70px; }
}

/* ---------- 9. Chart report navigation ---------- */
.chart-report-intro {
    margin: 20px 0 12px; padding: 14px 16px; border: 1px solid var(--cotton); border-left: 3px solid var(--brass);
    border-radius: 12px; background: linear-gradient(135deg, var(--paper), var(--white));
}
.chart-report-intro .eyebrow { margin: 0 0 4px; }
.chart-report-intro p:last-child { margin: 0; max-width: 82ch; color: var(--stone); font-size: 13.5px; line-height: 1.55; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; margin: 0 0 18px; list-style: none; position: sticky; top: var(--header-height); z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border: 1px solid rgba(185, 161, 123, .34); border-radius: 14px; }
.tabs [role="tab"], .tabs .tab-btn {
    min-height: 44px; padding: 9px 18px; border: 1px solid var(--sand); border-radius: var(--radius-chip);
    background: var(--white); color: var(--stone); font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.tabs [role="tab"][aria-selected="true"], .tabs .tab-btn.is-on { background: var(--peacock); border-color: var(--peacock); color: var(--white); }
.tabs [role="tab"]:not([aria-selected="true"]):hover, .tabs .tab-btn:not(.is-on):hover { border-color: var(--peacock); color: var(--peacock-deep); }
.tab-panel[hidden] { display: none; }
.tab-panel {
    scroll-margin-top: calc(var(--header-height) + 18px); margin: 0 0 18px; padding: clamp(16px, 2.5vw, 24px);
    border: 1px solid var(--cotton); border-radius: 16px; background: linear-gradient(150deg, var(--white), var(--paper));
    box-shadow: var(--shadow-sm);
}

/* ---------- 10. Yantra wheel ---------- */
.wheel-shell { display: grid; gap: 18px; }
.wheel-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.wheel-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wheel-stage {
    position: relative; background: var(--white); border: 1px solid var(--cotton);
    border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: clamp(12px, 3vw, 28px);
}

/* Premium KP chart workspace */
.chart-hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(circle at 88% 20%, rgba(43, 112, 120, .12), transparent 28%),
        linear-gradient(145deg, var(--white), var(--paper));
    border-color: rgba(160, 112, 48, .28);
}
.chart-hero::after {
    content: ""; position: absolute; width: 190px; height: 190px; right: -74px; bottom: -112px;
    border: 1px solid rgba(160, 112, 48, .2); border-radius: 50%; box-shadow: 0 0 0 22px rgba(160, 112, 48, .045);
    pointer-events: none;
}
.chart-hero .wheel-meta { align-items: flex-start; max-width: 760px; }
.chart-hero .eyebrow { flex-basis: 100%; margin: 0; }
.chart-hero h1 { flex-basis: 100%; }
.chart-hero__note { flex-basis: 100%; margin: 2px 0 3px; color: var(--stone); font-size: 13.5px; line-height: 1.55; }
.chart-fact-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px;
}
.chart-fact {
    display: flex; flex-direction: column; min-width: 0; min-height: 116px; padding: 16px;
    border: 1px solid var(--cotton); border-top: 3px solid var(--mode-accent);
    border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm);
}
.chart-fact > span { color: var(--stone); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.chart-fact strong { margin-top: auto; padding-top: 10px; color: var(--basalt); font-family: var(--font-display); font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.chart-fact small { margin-top: 5px; color: var(--stone); font-size: 11.5px; line-height: 1.4; }
.chart-wheel-card { background: linear-gradient(180deg, var(--paper), var(--white) 30%); }
.chart-wheel-card .wheel-stage { background: rgba(255, 253, 248, .86); }
.chart-wheel-help { margin: 12px 0 0; text-align: center; color: var(--stone); font-size: 12.5px; }
.chart-wheels-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.chart-wheel-box { min-width: 0; }
.chart-wheel-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--basalt); }
.chart-wheel-style { flex: 0 0 auto; }
.chart-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.chart-insight {
    min-width: 0; padding: 20px; border: 1px solid var(--cotton); border-radius: 14px;
    background: linear-gradient(145deg, var(--white), var(--paper));
}
.chart-insight h3 { margin: 5px 0 8px; font-size: clamp(17px, 2vw, 21px); overflow-wrap: anywhere; }
.chart-insight p:last-child { margin: 0; color: var(--stone); font-size: 13.5px; line-height: 1.55; }
.chart-section-intro { margin: 0 0 14px; max-width: 76ch; }
.chart-section-intro h3 { margin: 0 0 5px; }
.chart-section-intro p { margin: 0; color: var(--stone); font-size: 13.5px; line-height: 1.55; }
.kp-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kp-legend span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--cotton); border-radius: 999px; background: var(--white); color: var(--stone); font-size: 11.5px; line-height: 1.3; }
.kp-legend b { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--mode-soft); color: var(--mode-accent); font-family: var(--font-mono); font-size: 10px; }
.ruling-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ruling-list li { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid var(--cotton); border-radius: 11px; background: var(--white); }
.ruling-list li span { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border-radius: 50%; background: var(--mode-soft); color: var(--mode-accent); font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.ruling-list li strong { min-width: 0; overflow-wrap: anywhere; }

/* Ruling Planets Table (new 3-panel system) */
.rp-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: stretch; margin: 0 0 16px; }
.rp-panels.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) {
    .rp-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rp-panels.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rp-panel-slot { display: flex; min-width: 0; }
.rp-panel-slot[hidden] { display: none !important; }
.rp-panel {
    border: 1px solid var(--cotton); border-radius: 12px; background: var(--white);
    display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100%; overflow: hidden;
}
.rp-panel-slot > .rp-panel { flex: 1 1 auto; }
.rp-panel-header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 40px;
    align-items: center; gap: 0 10px; min-height: 92px; padding: 12px 16px;
    border-bottom: 1px solid var(--cotton);
    background: var(--mode-soft);
}
.rp-panel-title {
    grid-column: 1 / -1; grid-row: 1; min-width: 0; margin: 0; font-family: var(--font-display);
    font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--basalt); overflow-wrap: anywhere;
}
.rp-panel-meta-row { grid-column: 1 / -1; grid-row: 2; display: flex; min-width: 0; align-items: center; gap: 10px; }
.rp-panel-meta {
    display: block; min-width: 0; font-size: 12px; color: var(--stone); font-family: var(--font-mono);
    overflow-wrap: anywhere;
}
.rp-panel-meta-row .rp-panel-meta:not(:last-child) { flex: 0 0 auto; }
.rp-panel-meta-row .rp-panel-meta:last-of-type { flex: 1 1 auto; }
.rp-change-button { flex: 0 0 auto; margin-left: auto; }
.rp-panel-body { padding: 12px 16px; }
.rp-panel-body .notice-soft { margin: 0; }
.rp-table-wrap { width: 100%; overflow-x: auto; }
.rp-table { width: 100%; min-width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.rp-table th {
    height: 40px; text-align: left; padding: 10px 12px; font-family: var(--font-mono);
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--stone); border-bottom: 2px solid var(--cotton);
    background: var(--white);
}
.rp-table td { padding: 10px 12px; border-bottom: 1px solid var(--cotton); vertical-align: top; }
.rp-table tbody tr { height: 64px; }
.rp-table tr:last-child td { border-bottom: none; }
.rp-table tr:hover td { background: var(--mode-soft); }
.rp-rank, .rp-col-rank { width: 52px; text-align: center; }
.rp-badge {
    display: inline-grid; place-items: center; width: 26px; height: 26px;
    border-radius: 50%; background: var(--mode-soft); color: var(--mode-accent);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.rp-name, .rp-col-name { width: 27%; font-weight: 600; overflow-wrap: anywhere; }
.rp-planet, .rp-col-planet { width: 28%; font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.rp-planet-name.retro { color: var(--vermilion); }
.rp-lords, .rp-col-lords { width: auto; font-family: var(--font-mono); font-size: 13px; color: var(--basalt); overflow-wrap: anywhere; }
.rp-lords-chain { letter-spacing: .02em; overflow-wrap: anywhere; }
.rp-retro-marker { color: var(--vermilion); font-weight: 800; }
.rp-row.rp-retro { background: rgba(220, 38, 38, 0.03); }
.rp-source { margin: 12px 0 0; font-size: 12px; color: var(--stone); font-style: italic; }
.rp-loading { padding: 16px; }
.rp-city-search { margin: 12px 0 0; padding: 12px 16px; border-top: 1px solid var(--cotton); }
.rp-search-label { display: block; font-size: 13px; font-weight: 600; color: var(--basalt); margin-bottom: 6px; }
.rp-autocomplete-row { position: relative; }
.rp-autocomplete-row .ac-list { position: absolute; z-index: 60; left: 0; right: 0; }
.rp-panel--search { overflow: visible; }
.rp-panel--search .rp-panel-header { border-radius: 12px 12px 0 0; }
.rp-city-selected {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px;
    border-bottom: 1px solid var(--cotton); background: var(--mode-soft);
}
.rp-city-name { font-weight: 600; font-size: 14px; color: var(--basalt); }
.notice-soft { padding: 12px 16px; font-size: 13px; color: var(--stone); background: var(--mode-soft); border-radius: 8px; margin-bottom: 12px; }
@media (max-width: 640px) {
    .rp-panels, .rp-panels.is-two { grid-template-columns: 1fr; }
}

/* South Indian: fixed-sign 4x4 grid, center 2x2 core card */
.wheel-south {
    display: grid; grid-template-columns: repeat(4, minmax(72px, 1fr));
    grid-template-rows: repeat(4, minmax(72px, 1fr));
    aspect-ratio: 1; border: 2px solid var(--brass); background: var(--white);
    max-width: 640px; margin-inline: auto;
}
.w-s {
    position: relative; display: flex; flex-direction: column; gap: 3px; padding: 6px;
    border: 1px solid var(--cotton); min-height: 0; overflow: hidden; cursor: pointer;
    background: var(--white); text-align: left;
    transition: background .2s var(--ease);
}
.w-s:hover, .w-s.is-hot { background: var(--mode-soft); }
.w-s.is-selected { background: var(--vermilion-glow); box-shadow: inset 0 0 0 2px var(--vermilion); }
.w-s .w-sign { font-size: 10.5px; color: var(--stone); font-family: var(--font-mono); line-height: 1.25; }
.w-s .w-sign b { display: block; font-family: var(--font-ui); font-size: 12.5px; color: var(--brass-text); }
.w-s .w-house { position: absolute; top: 4px; right: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--stone); }
.w-s .w-planets { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; padding: 0; list-style: none; }
.w-p {
    display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px;
    border: 1px solid var(--cotton); background: var(--conch); font-size: 11.5px; font-weight: 700;
    color: var(--basalt); cursor: pointer; line-height: 1.35; margin: 0;
    transition: background .2s var(--ease), border-color .2s var(--ease);
}
.w-p .w-p-lat { font-family: var(--font-mono); font-size: 10px; color: var(--stone); }
.w-p:hover, .w-p.is-hot { background: var(--vermilion-glow); border-color: var(--vermilion); }
.w-p.is-selected { background: var(--vermilion); border-color: var(--vermilion-deep); color: var(--white); }
.w-p.is-selected .w-p-lat { color: rgba(255, 253, 248, .85); }
.w-p .retro { color: var(--vermilion); font-weight: 700; }
.w-p.is-selected .retro { color: var(--white); }
.w-asc {
    display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px; margin: 0;
    background: var(--brass); color: var(--white); font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
}
.w-center {
    grid-column: 2 / span 2; grid-row: 2 / span 2; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 14px;
    background: linear-gradient(160deg, var(--conch), var(--paper)); border: 1px solid var(--cotton); overflow: auto;
}
.w-center .wc-title { font-family: var(--font-display); font-size: 17px; color: var(--basalt); line-height: 1.25; margin: 0; }
.w-center .wc-sub { font-size: 12.5px; color: var(--stone); margin: 0; }
.w-center .wc-chain {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 8px 0 0; padding: 0;
    list-style: none; font-family: var(--font-mono); font-size: 11.5px; color: var(--brass-text);
}

/* North Indian diamond — KP Astro layout formula (X diagonals + midpoint
 * diamond over a square; planet stacks and sign labels on fixed anchors),
 * re-skinned in the Angira warm palette. */
.wheel-north { text-align: center; }
.wn-stage {
    position: relative; width: min(100%, 560px); aspect-ratio: 1; margin-inline: auto;
    background: var(--white); border: 1px solid var(--brass); border-radius: 4px;
}
.wn-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wn-lines line { stroke: var(--sand); stroke-width: 1; }
.wn-sign {
    position: absolute; z-index: 3; transform: translate(-50%, -50%);
    padding: 1px 7px; border-radius: 5px; background: var(--white);
    font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--brass-text);
    white-space: nowrap; pointer-events: none;
}
.wn-house {
    position: absolute; z-index: 2; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; max-width: 24%; min-width: 58px; min-height: 36px; padding: 3px 4px;
    border-radius: 8px; cursor: pointer; text-align: center;
    transition: background .2s var(--ease);
}
.wn-house:hover, .wn-house.is-hot { background: var(--mode-soft); }
.wn-house.is-selected { background: var(--vermilion-glow); box-shadow: inset 0 0 0 1.5px var(--vermilion); }
.wn-house:focus-visible, .wn-p:focus-visible { outline: 2px solid var(--peacock); outline-offset: 1px; }
.wn-asc { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--mode-accent); line-height: 1.2; }
.wn-p {
    display: inline-flex; align-items: baseline; gap: 4px; padding: 0 4px; border-radius: 5px;
    font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--basalt);
    white-space: nowrap; cursor: pointer; transition: background .2s var(--ease);
}
.wn-p b { font-weight: 700; }
.wn-p .wn-deg {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--stone);
    font-variant-numeric: tabular-nums;
}
.wn-p.is-retro { color: var(--vermilion-deep); }
.wn-p:hover, .wn-p.is-hot { background: var(--vermilion-glow); }
.wn-p.is-selected { background: var(--vermilion); color: var(--white); }
.wn-p.is-selected .wn-deg { color: rgba(255, 253, 248, .82); }
.wn-house.is-crowded .wn-p { font-size: 11px; line-height: 1.22; gap: 3px; padding: 0 2px; }
.wn-house.is-crowded .wn-p .wn-deg { font-size: 9.5px; }
/* On narrow stages the 7%/93% anchors of the extreme corner bhavas would
 * carry their rows across the frame; pull those four anchors inboard. */
@media (max-width: 640px) {
    .wn-house[data-house="3"], .wn-house[data-house="5"] { left: 11% !important; }
    .wn-house[data-house="9"], .wn-house[data-house="11"] { left: 89% !important; }
}
.wheel-caption { font-size: 13.5px; color: var(--stone); text-align: center; margin: 14px 0 0; }

/* Centre overlay — sits inside the diamond, not below the chart */
.wn-center-overlay {
    position: absolute; z-index: 1; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 20%; aspect-ratio: 1; max-width: 132px;
    background: linear-gradient(160deg, var(--conch), var(--paper));
    border: 1px solid var(--cotton); border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; text-align: center; padding: 8px; overflow: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    min-height: 0;
}
.wn-center-overlay .wc-title { font-size: 13px; line-height: 1.2; }
.wn-center-overlay .wc-sub { font-size: 10.5px; line-height: 1.2; }
.wn-center-overlay .wc-chain { font-size: 10px; gap: 3px; margin-top: 4px; }
.wn-center-overlay .wc-chain li { padding: 2px 5px; font-size: 9.5px; }
.wn-center-overlay .wc-chain b { font-size: 10px; }
.wn-center-overlay .wc-chain .lens-arr { font-size: 10px; padding: 0; background: none; border: 0; }
.wheel-inspector .wc-chain { margin-top: 8px; }

/* ---------- 11. Angira Lens ---------- */
.aj-lens {
    position: fixed; z-index: 300; max-width: min(340px, calc(100vw - 16px));
    background: var(--lens); border: 1px solid var(--lens-border); border-radius: var(--radius-lens);
    box-shadow: var(--shadow); padding: 14px 16px; opacity: 0; transform: scale(.98);
    transition: opacity .12s var(--ease), transform .12s var(--ease); pointer-events: none;
}
.aj-lens.is-open { opacity: 1; transform: scale(1); pointer-events: auto; }
.aj-lens .lens-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.aj-lens .lens-title { font-family: var(--font-display); font-size: 16px; color: var(--basalt); }
.aj-lens .lens-title-lat { font-family: var(--font-mono); font-size: 12px; color: var(--stone); }
.aj-lens .lens-pos { font-family: var(--font-mono); font-size: 12.5px; color: var(--brass-text); font-variant-numeric: tabular-nums; }
.aj-lens .lens-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.aj-lens .lens-chain li {
    display: inline-flex; flex-direction: column; gap: 1px; padding: 4px 9px; border-radius: 7px;
    background: var(--paper); border: 1px solid var(--cotton); font-size: 11px; line-height: 1.25;
}
.aj-lens .lens-chain li b { font-size: 12px; color: var(--basalt); }
.aj-lens .lens-chain li span { color: var(--stone); }
.aj-lens .lens-chain .lens-arr { background: none; border: 0; padding: 0; color: var(--sand); font-size: 12px; }
.aj-lens .lens-rows { margin: 8px 0 0; font-size: 12.5px; color: var(--stone); display: grid; gap: 2px; }
.aj-lens .lens-rows b { color: var(--basalt); }
.aj-lens .lens-pin {
    position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center;
    border: 1px solid var(--cotton); border-radius: 50%; background: var(--conch); color: var(--stone);
    font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
}
.aj-lens .lens-pin.is-pinned { background: var(--vermilion); border-color: var(--vermilion-deep); color: var(--white); }
.aj-lens .lens-close { display: none; }
.aj-lens.is-pinned .lens-close {
    display: grid; position: absolute; top: 8px; right: 40px; width: 26px; height: 26px; place-items: center;
    border: 1px solid var(--cotton); border-radius: 50%; background: var(--conch); color: var(--stone);
    cursor: pointer; padding: 0; font-size: 13px; line-height: 1;
}

/* ---------- 12. Chat — full-height application shell ----------------------
 * The chat used to render as ordinary document flow inside .section, so the
 * transcript floated in the middle of a tall page with the composer stranded
 * below it. Chat is an application surface: it owns the viewport, scrolls
 * internally, and pins its composer.
 * ------------------------------------------------------------------------ */

body.is-chat-app {
    /* min-height alone let the shell grow past the viewport, pushing the
     * composer off-screen on short/mobile viewports. Pin the height so the
     * transcript is the only thing that scrolls. dvh tracks mobile browser
     * chrome; the vh line is the fallback for engines without dvh. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* The site footer belongs at the end of a scrolling document, not inside a
 * fixed-height application shell — left in, it ate 473px of an 820px viewport
 * and squeezed the transcript down to 4px. */
body.is-chat-app .site-footer { display: none; }

/* On normal pages the product bar is sticky at top:var(--header-height) and its
 * flow position of 0 is irrelevant. The chat shell makes it static so it cannot
 * scroll away — which dropped it back to 0, underneath the fixed header. Give
 * it the header's height as margin so it sits below the header in flow, and
 * drop main's padding since the bar now reserves that space. */
body.is-chat-app .product-bar { margin-top: var(--header-height); }
body.is-chat-app .app-main { padding-top: 0; }
body.is-chat-app main.app-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    /* The main-site header is fixed and therefore removed from document
     * flow. Reserve exactly its responsive height before the chat viewport. */
    height: calc(100dvh - var(--header-height));
    margin-top: var(--header-height);
}

.chat-app {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    background: var(--conch);
}

/* ---- context rail ---- */
.chat-rail {
    min-height: 0;
    border-right: 1px solid var(--cotton);
    background: linear-gradient(180deg, var(--paper), rgba(243, 235, 221, .45));
}
.chat-rail__scroll {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rail-card {
    background: var(--white);
    border: 1px solid var(--cotton);
    border-radius: var(--radius-card);
    padding: 15px 16px;
    box-shadow: var(--shadow-sm);
}
.rail-card--subject { border-left: 3px solid var(--mode-accent); }
.rail-card--service-context {
    border-color: rgba(193, 116, 73, .38);
    background: linear-gradient(145deg, rgba(255, 253, 248, .98), rgba(248, 239, 225, .8));
}
.service-context__label {
    margin: 0 0 3px;
    color: var(--stone);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.service-context__name {
    margin: 0;
    color: var(--peacock-deep);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}
.service-context-picker {
    position: relative;
    margin-top: 13px;
}
.service-context-picker summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    padding: 9px 10px;
    border: 1px solid var(--cotton);
    border-radius: 9px;
    background: rgba(255, 255, 255, .78);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
}
.service-context-picker summary::-webkit-details-marker { display: none; }
.service-context-picker summary:hover,
.service-context-picker[open] summary { border-color: var(--copper); color: var(--peacock-deep); }
.service-context-picker__mark { color: var(--copper); font-size: 17px; line-height: .8; transition: transform .22s ease; }
.service-context-picker[open] .service-context-picker__mark { transform: rotate(180deg); }
.service-context-picker__menu {
    display: grid;
    gap: 5px;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 7px;
    padding: 5px;
    border: 1px solid var(--cotton);
    border-radius: 10px;
    background: var(--white);
    animation: service-picker-reveal .2s ease both;
}
.service-context-picker__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 9px;
    border-radius: 7px;
    color: var(--stone);
    font-size: 12px;
    line-height: 1.25;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
.service-context-picker__option:hover,
.service-context-picker__option:focus-visible,
.service-context-picker__option.is-selected { background: var(--paper); color: var(--peacock-deep); }
.service-context-picker__option:hover { transform: translateX(2px); }
.service-context-picker__option.is-selected { font-weight: 700; }
.rail-link--tokens { margin-top: 9px; font-weight: 700; }
@keyframes service-picker-reveal {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .service-context-picker__menu { animation: none; }
    .service-context-picker__mark, .service-context-picker__option { transition: none; }
}

.rail-eyebrow {
    margin: 0 0 7px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brass-text);
}
.rail-subject {
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.25;
    color: var(--basalt);
}
.rail-sub { margin: 5px 0 0; font-size: 12.5px; color: var(--stone); }
.rail-value { margin: 0; font-size: 14.5px; font-weight: 600; text-transform: capitalize; color: var(--ink); }
.rail-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.rail-chips:empty { display: none; }
.rail-actions { margin-top: 13px; }
.rail-actions .btn { width: 100%; justify-content: center; }

.rail-card--tokens .rail-meter {
    margin: 0 0 9px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 13px;
    color: var(--stone);
}
.rail-card--tokens .rail-meter b {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--peacock-deep);
}
.rail-link {
    display: block;
    font-size: 13px;
    padding: 3px 0;
    color: var(--copper);
}
.rail-link:hover { color: var(--copper-hover); }

.rail-card--trust { background: transparent; border-style: dashed; box-shadow: none; }
.rail-trust { margin: 0; padding-left: 16px; display: grid; gap: 7px; }
.rail-trust li { font-size: 12.5px; line-height: 1.5; color: var(--stone); }

/* ---- memory + prediction rail cards ---- */
.rail-sub--muted { color: var(--stone); font-size: 11.5px; }
.memory-list, .prediction-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.memory-item {
    display: flex; align-items: flex-start; gap: 8px; padding: 7px 9px;
    border: 1px solid var(--cotton); border-radius: 8px; background: var(--white); font-size: 12.5px; line-height: 1.4;
}
.memory-item span { flex: 1 1 auto; color: var(--ink); }
.memory-item.is-removing { opacity: .4; pointer-events: none; }
.memory-item__del {
    flex: 0 0 auto; width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--paper);
    color: var(--stone); font-size: 14px; line-height: 1; cursor: pointer;
}
.memory-item__del:hover { background: var(--bad-soft); color: var(--bad); }
.prediction-item {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 7px 9px;
    border: 1px solid var(--cotton); border-radius: 8px; background: var(--white); font-size: 12.5px;
}
.prediction-item__window { flex: 1 1 auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--stone); }
.prediction-item__wait { color: var(--stone); font-size: 11.5px; }

/* ---- conversation column ---- */
.chat-main {
    min-height: 0;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}
.chat-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
}
.chat-scroll__inner {
    width: min(760px, 100% - 44px);
    margin-inline: auto;
    padding: 30px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Keep the first-run conversation greeting above the optional horary intake.
 * The intake remains in the same scroll surface and is still validated by
 * chat.js, but the user now meets Angira Jyotish before entering context. */
.chat-scroll__inner { display: flex; flex-direction: column; }
.chat-scroll__inner > .chat-thread { order: 1; }
.chat-scroll__inner > .prashna-intake { order: 2; }
.chat-scroll__inner > .chat-status { order: 3; }
.service-context__description { margin: 6px 0 10px; color: var(--ink); font-size: 13px; line-height: 1.5; }
.service-context__prompts { margin: 10px 0 12px; padding: 10px 11px; border: 1px solid rgba(160,112,48,.22); border-radius: 10px; background: rgba(250,247,240,.72); }
.service-context__prompts > span { display: block; margin-bottom: 6px; color: var(--peacock); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.service-context__prompts ul { margin: 0; padding-left: 17px; color: var(--ink); font-size: 12px; line-height: 1.45; }
.service-context__prompts li + li { margin-top: 4px; }
.service-context__notice { margin: 10px 0 0; padding: 10px 11px; border: 1px solid rgba(176,83,54,.30); border-radius: 10px; background: rgba(255,246,241,.9); color: var(--ink); font-size: 12px; line-height: 1.5; }
.service-context__notice .btn { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .chat-scroll { scroll-behavior: auto; } }

/* ---- empty / welcome state ---- */
.chat-empty { padding: clamp(28px, 8vh, 76px) 0 20px; text-align: center; }
.chat-empty__mark {
    width: 54px; height: 54px; margin: 0 auto 18px;
    padding: 8px;
    box-sizing: border-box;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--mode-soft);
}
.chat-empty__mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.chat-empty__title { margin: 0 0 10px; font-size: clamp(26px, 3.6vw, 36px); }
.chat-empty__lede {
    margin: 0 auto;
    max-width: 52ch;
    font-size: 17.5px;
    line-height: 1.62;
    color: var(--stone);
}

/* ---- messages ---- */
.chat-thread { display: flex; flex-direction: column; gap: 26px; }

.msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; }
.msg__avatar {
    width: 34px; height: 34px;
    box-sizing: border-box;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-mono);
    user-select: none;
}
.msg__avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.msg--ai .msg__avatar { background: var(--mode-soft); padding: 5px; }
.msg--user .msg__avatar { background: var(--cotton); color: var(--stone); }
.msg__body { min-width: 0; }
.msg__who {
    margin: 0 0 5px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-family: var(--font-mono);
    color: var(--stone);
}

.msg .bubble {
    font-size: 17.5px;
    line-height: 1.68;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.msg .bubble > p { margin: 0 0 .85em; }
.msg .bubble > p:last-child { margin-bottom: 0; }
.msg .bubble ul, .msg .bubble ol { margin: 0 0 .85em; padding-left: 20px; display: grid; gap: 5px; }
.msg .bubble ul:last-child, .msg .bubble ol:last-child { margin-bottom: 0; }
.msg .bubble li { line-height: 1.62; }
.msg .bubble strong { font-weight: 700; color: var(--basalt); }
.msg .bubble code {
    font-family: var(--font-mono); font-size: .88em;
    background: var(--paper); border-radius: 4px; padding: 1px 5px;
}
.msg--user .bubble {
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--paper);
    border: 1px solid var(--cotton);
    white-space: pre-wrap;
}

/* streaming caret rides the last line of the answer */
.msg .bubble.is-streaming > :last-child::after {
    content: "";
    display: inline-block;
    width: 8px; height: 1em;
    margin-left: 3px;
    vertical-align: text-bottom;
    background: var(--vermilion);
    animation: aj-blink 1s steps(2) infinite;
}
@media (prefers-reduced-motion: reduce) {
    .msg .bubble.is-streaming > :last-child::after { animation: none; opacity: .7; }
}
/* 7.5 Typography: heading scale, :lang(hi) leading, measure, bubble.lang (06 §2, 05 §11) */
.msg .bubble {
    font-size: 17.5px;
    line-height: 1.68;
    color: var(--ink);
    overflow-wrap: anywhere;
    max-width: 68ch;
}
html[lang="hi"] .msg .bubble,
.msg .bubble:lang(hi) { line-height: 1.72; font-size: 17px; }
.msg .bubble h3 {
    margin: 1.5em 0 .5em;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--basalt);
}
.msg .bubble h3:first-child { margin-top: 0; }
.msg .bubble h3::before {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin-bottom: .55em;
    background: var(--mode-accent);
    border-radius: 2px;
    opacity: .7;
}
.msg .bubble > p { margin: 0 0 .85em; }
.msg .bubble > p:last-child { margin-bottom: 0; }
.msg .bubble li { line-height: 1.62; }
.msg .bubble strong { font-weight: 700; color: var(--basalt); }
.msg .bubble .aj-window {
    font-family: var(--font-mono);
    font-size: .92em;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--mode-soft);
    color: var(--mode-deep);
    white-space: nowrap;
}
.msg--ai .bubble > p:first-of-type {
    font-size: 18.5px;
    line-height: 1.6;
    color: var(--basalt);
}
html[lang="hi"] .msg--ai .bubble > p:first-of-type,
.msg--ai .bubble > p:first-of-type:lang(hi) { font-size: 18px; line-height: 1.66; }
@media (max-width: 620px) {
    .msg .bubble { font-size: 16.5px; }
    .msg--ai .bubble > p:first-of-type { font-size: 17.5px; }
    .msg .bubble h3 { font-size: 17.5px; }
}
html[lang="hi"] .analysis-step__copy, .analysis-step__copy:lang(hi) { line-height: 1.62; }
html[lang="hi"] .ev-step__copy, .ev-step__copy:lang(hi) { line-height: 1.62; }

/* ---- verdict + confidence ---- */
.verdict-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 13px; }
.verdict {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-chip);
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
}
.verdict--good { background: var(--good-soft); color: var(--good); }
.verdict--warn { background: var(--warn-soft); color: var(--brass-text); }
.verdict--bad  { background: var(--bad-soft);  color: var(--bad); }
.verdict-card {
    margin-top: 14px;
    padding: 13px 15px;
    border-radius: var(--radius-card);
    border: 1px solid var(--cotton);
    border-left-width: 3px;
    background: var(--white);
}
.verdict-card--good { border-left-color: var(--good); background: color-mix(in srgb, var(--good-soft) 55%, var(--white)); }
.verdict-card--warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 55%, var(--white)); }
.verdict-card--bad  { border-left-color: var(--bad);  background: color-mix(in srgb, var(--bad-soft)  55%, var(--white)); }
/* DESCRIPTIVE readings grade nothing — a good/warn/bad colour would imply a
   judgement the engine never made, so this variant stays deliberately quiet. */
.verdict-card--neutral { border-left-color: var(--sand); background: var(--white); }
.verdict-card--neutral .verdict-card__glyph { color: var(--brass-text); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .verdict-card--good { background: var(--good-soft); }
    .verdict-card--warn { background: var(--warn-soft); }
    .verdict-card--bad  { background: var(--bad-soft); }
}
.verdict-card__head { display: flex; align-items: center; gap: 9px; }
.verdict-card__glyph { font-size: 15px; line-height: 1; }
.verdict-card--good .verdict-card__glyph { color: var(--good); }
.verdict-card--warn .verdict-card__glyph { color: var(--brass-text); }
.verdict-card--bad  .verdict-card__glyph { color: var(--bad); }
.verdict-card__label {
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
}
.verdict-card__plain { margin: 6px 0 0; font-size: 15.5px; font-weight: 600; color: var(--basalt); }
.verdict-card__basis { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--stone); }
.verdict-card__confidence {
    margin: 9px 0 0; padding-top: 9px;
    border-top: 1px dashed var(--cotton);
    font-size: 13.5px; line-height: 1.5; color: var(--stone);
}
html[lang="hi"] .verdict-card__plain, .verdict-card__plain:lang(hi) { font-size: 15px; line-height: 1.6; }

/* ---- premium, user-facing KP analysis map ---- */
.analysis-card {
    margin-top: 16px;
    border: 1px solid rgba(168, 118, 61, .32);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255, 253, 248, .98), rgba(248, 241, 229, .72));
    box-shadow: 0 8px 24px rgba(82, 51, 25, .06);
}
.analysis-card summary {
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 15px;
    min-height: 44px;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--brass-text);
}
.analysis-card summary::-webkit-details-marker { display: none; }
.analysis-card summary::before {
    content: "▾";
    color: var(--vermilion);
    transition: transform .18s var(--ease);
}
.analysis-card:not([open]) summary::before { transform: rotate(-90deg); }
.analysis-card__hint {
    margin-left: auto;
    font-weight: 500; letter-spacing: .03em; text-transform: none;
    color: var(--stone);
}
.analysis-card__body { display: grid; gap: 0; padding: 0 15px 14px; }
.analysis-step {
    border-top: 1px solid rgba(168, 118, 61, .18);
    padding: 12px 0 3px;
}
.analysis-step h3 {
    margin: 0 0 6px;
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--peacock-deep);
}
.analysis-step__copy { font-size: 15px; line-height: 1.58; color: var(--ink); }
.analysis-step__copy p { margin: 0 0 5px; }
.analysis-step__copy p:last-child { margin-bottom: 0; }
.analysis-step__list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.analysis-step__list li { font-size: 15px; line-height: 1.52; color: var(--ink); }
.analysis-step__list strong { color: var(--basalt); }
.analysis-effect {
    display: inline-flex; margin-left: 7px; padding: 2px 6px;
    border-radius: 99px; font-family: var(--font-mono); font-size: 9px;
    letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px;
}
.analysis-effect--supportive { background: var(--good-soft); color: var(--good); }
.analysis-effect--obstacle { background: var(--bad-soft); color: var(--bad); }
.analysis-effect--mixed { background: var(--warn-soft); color: var(--brass-text); }

/* 7.4 Evidence timeline (06 §5) */
.reading-evidence {
    margin-top: 14px;
    border: 1px solid var(--cotton);
    border-radius: var(--radius-card);
    background: rgba(255, 253, 248, .82);
    overflow: hidden;
}
.reading-evidence__summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 15px; min-height: 42px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--brass-text);
}
.reading-evidence__summary::-webkit-details-marker { display: none; }
.reading-evidence__summary::before {
    content: "▸"; color: var(--vermilion);
    transition: transform var(--dur-base, 220ms) var(--ease);
}
.reading-evidence[open] .reading-evidence__summary::before { transform: rotate(90deg); }
.reading-evidence__meta {
    margin-left: auto; font-weight: 500; letter-spacing: .04em;
    text-transform: none; color: var(--stone);
}
.ev-timeline { list-style: none; margin: 0; padding: 4px 15px 16px; display: grid; gap: 0; }
.ev-step {
    position: relative;
    display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px;
    padding: 12px 0 14px;
}
.ev-step::before {
    content: ""; position: absolute; left: 12px; top: 30px; bottom: -2px;
    width: 1px; background: var(--cotton);
}
.ev-step:last-child::before { display: none; }
.ev-step__n {
    grid-row: 1 / span 2;
    width: 25px; height: 25px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--mode-soft); color: var(--mode-deep);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    position: relative; z-index: 1;
}
.ev-step__title {
    margin: 3px 0 6px;
    font-family: var(--font-ui); font-size: 13px; font-weight: 700;
    letter-spacing: .01em; color: var(--basalt);
}
.ev-step__copy { font-size: 15px; line-height: 1.58; color: var(--ink); }
html[lang="hi"] .ev-step__copy, .ev-step__copy:lang(hi) { line-height: 1.62; }
.ev-step__limit {
    margin: 9px 0 0; padding: 8px 10px; border-radius: 8px;
    background: var(--paper); font-size: 13.5px; line-height: 1.5; color: var(--stone);
}
.ev-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ev-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14.5px; line-height: 1.5; }
.ev-row__title   { color: var(--basalt); font-weight: 700; }
.ev-row__fact    { font-family: var(--font-mono); font-size: 12.5px; color: var(--peacock-deep);
                   background: var(--peacock-soft); padding: 1px 6px; border-radius: 5px; }
.ev-row__reading { color: var(--ink); }
.ev-row__basis   { color: var(--stone); font-size: 13.5px; }
.ev-effect {
    display: inline-flex; padding: 2px 7px; border-radius: 99px;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase;
}
.ev-effect--supportive { background: var(--good-soft); color: var(--good); }
.ev-effect--obstacle   { background: var(--bad-soft);  color: var(--bad); }
.ev-effect--mixed      { background: var(--warn-soft); color: var(--brass-text); }
.house-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.house-chip {
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
    padding: 2px 8px; border-radius: 6px;
}
.house-chip--pri { background: var(--mode-soft);  color: var(--mode-deep); outline: 1px solid var(--mode-accent); }
.house-chip--sup { background: var(--good-soft);  color: var(--good); }
.house-chip--obs { background: var(--bad-soft);   color: var(--bad); }
.ev-kv { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; font-size: 14.5px; }
.ev-kv dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
            text-transform: uppercase; color: var(--stone); padding-top: 2px; }
.ev-kv dd { margin: 0; color: var(--ink); }
.ev-tail { border-top: 1px solid var(--cotton); padding: 10px 15px 14px; }
.ev-tail summary { cursor: pointer; font-size: 13px; color: var(--stone); }
.ev-tail ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 5px; font-size: 14px; color: var(--ink); }
@media (max-width: 620px) {
    .ev-timeline { padding: 4px 12px 14px; }
    .ev-step { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
    .ev-step__n { width: 21px; height: 21px; font-size: 10px; }
    .ev-step::before { left: 10px; top: 26px; }
    .ev-row { font-size: 14px; }
}
.reading-evidence[hidden], .verdict-card[hidden], .chart-thumb[hidden] { display: none !important; }
@media print {
    .chat-composer, .chat-style-row, .msg__actions, .stage-rail { display: none !important; }
    .reading-evidence { border: none; background: none; }
    .reading-evidence__summary { display: none; }
    .reading-evidence[open] .ev-timeline, .reading-evidence:not([open]) .ev-timeline { display: grid !important; }
    .ev-step { break-inside: avoid; }
    .verdict-card { break-inside: avoid; border-left-width: 4px; }
}

/* ---- Aadhar drawer ---- */
.aadhar {
    margin-top: 14px;
    border: 1px solid var(--cotton);
    border-radius: 10px;
    background: rgba(255, 253, 248, .8);
}
.aadhar summary {
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; gap: 9px;
    padding: 9px 13px;
    min-height: 38px;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--brass-text);
}
.aadhar summary::-webkit-details-marker { display: none; }
.aadhar summary::before {
    content: "▸";
    color: var(--vermilion);
    transition: transform .18s var(--ease);
}
.aadhar[open] summary::before { transform: rotate(90deg); }
.aadhar__hint {
    margin-left: auto;
    font-weight: 500; letter-spacing: .04em; text-transform: none;
    color: var(--stone);
}
.aadhar__body { padding: 2px 13px 14px; display: grid; gap: 12px; }
.aadhar__refs {
    margin: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 14px;
    font-size: 14.5px;
}
.aadhar__refs dt {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--stone); padding-top: 2px;
}
.aadhar__refs dd { margin: 0; color: var(--ink); font-weight: 600; }
.aadhar__label {
    margin: 0 0 -4px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--stone);
}
.aadhar__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cite-chip {
    display: inline-flex; align-items: center;
    padding: 4px 9px; border-radius: 6px;
    background: var(--peacock-soft); color: var(--peacock-deep);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    border: 1px solid transparent; cursor: help;
}
.cite-chip:hover, .cite-chip:focus-visible { border-color: var(--peacock); }
.aadhar__note { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--stone); }

/* fact-check verdict — the trust signal, so it reads before the citations */
.aadhar--flagged { border-color: var(--warn); background: rgba(243, 232, 214, .5); }
.aadhar--flagged summary { color: var(--bad); }
.fact-warn {
    border-left: 3px solid var(--warn);
    background: var(--warn-soft);
    border-radius: 0 8px 8px 0;
    padding: 10px 13px;
}
.fact-warn__head {
    margin: 0 0 6px;
    font-size: 14.5px; font-weight: 700; color: var(--bad);
}
.fact-warn__list { margin: 0; padding-left: 17px; display: grid; gap: 4px; }
.fact-warn__list li { font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.fact-warn__truth { color: var(--good); }
.fact-ok {
    margin: 0;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14.5px; color: var(--good);
}
.fact-ok::before { content: "✓"; font-weight: 700; }

/* ---- per-answer actions ---- */
.msg__actions { display: flex; align-items: center; gap: 6px; margin-top: 11px; }
.msg__actions-gap { flex: 1 1 auto; }
.iconbtn {
    border: 1px solid transparent; background: none; cursor: pointer;
    padding: 4px 9px; border-radius: 6px;
    font-size: 11.5px; font-weight: 600; color: var(--stone);
}
.iconbtn:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.iconbtn.is-on { background: var(--mode-soft); color: var(--mode-deep); border-color: var(--mode-accent); }
.iconbtn:disabled { opacity: .5; cursor: default; }
.iconbtn--sm { padding: 3px 8px; font-size: 10.5px; }
.track-btn { border-color: var(--cotton); color: var(--copper); font-weight: 700; }
.track-btn:hover:not(:disabled) { border-color: var(--copper); background: var(--copper-soft); color: var(--copper-hover); }

/* ---- thinking status ---- */
.chat-status {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 9px;
    margin-left: 47px;
    padding: 7px 13px;
    border-radius: var(--radius-chip);
    background: var(--mode-soft); color: var(--mode-deep);
    font-size: 12.5px; font-weight: 600;
}
.thinking-dots { display: inline-flex; gap: 3px; }
.thinking-dots i {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--mode-accent);
    animation: aj-bounce 1.15s ease-in-out infinite;
}
.thinking-dots i:nth-child(2) { animation-delay: .15s; }
.thinking-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes aj-bounce {
    0%, 70%, 100% { opacity: .35; transform: translateY(0); }
    35%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .thinking-dots i { animation: none; opacity: .6; } }

.guardrail-card {
    margin-top: 12px;
    background: var(--warn-soft); border: 1px solid var(--warn); color: var(--brass-text);
    border-radius: 10px; padding: 13px 15px; font-size: 14px; line-height: 1.55;
}
.msg .notice-soft { margin-top: 12px; }

/* ---- composer ---- */
.chat-composer {
    border-top: 1px solid var(--cotton);
    background: rgba(251, 248, 240, .97);
    backdrop-filter: blur(8px);
    padding: 13px 0 15px;
}
.chat-composer > * { width: min(760px, 100% - 44px); margin-inline: auto; }

.sugg-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.sugg {
    border: 1px solid var(--cotton); background: var(--white);
    border-radius: var(--radius-chip); cursor: pointer;
    padding: 6px 13px; font-size: 13px; color: var(--ink);
    transition: border-color .16s var(--ease), background .16s var(--ease);
}
.sugg:hover { border-color: var(--mode-accent); background: var(--mode-soft); }

.composer-box {
    display: flex; align-items: flex-end; gap: 9px;
    padding: 9px 9px 9px 15px;
    background: var(--white);
    border: 1px solid var(--sand);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.composer-box:focus-within {
    border-color: var(--mode-accent);
    box-shadow: 0 0 0 3px var(--mode-soft);
}
.composer-input {
    flex: 1 1 auto; min-width: 0;
    border: 0; background: none; outline: none; resize: none;
    padding: 8px 0;
    max-height: 200px;
    font-size: 15.5px; line-height: 1.55; color: var(--ink);
    font-family: inherit;
}
.composer-input::placeholder { color: var(--sand); }

.composer-send {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: var(--vermilion); color: var(--white);
    font-size: 17px; line-height: 1;
    transition: background .16s var(--ease), transform .16s var(--ease);
}
.composer-send:hover:not(:disabled) { background: var(--vermilion-deep); }
.composer-send:active:not(:disabled) { transform: scale(.94); }
.composer-send:disabled { background: var(--sand); cursor: not-allowed; }

.composer-stop {
    flex: 0 0 auto;
    height: 38px; padding: 0 15px;
    border: 1px solid var(--sand); border-radius: var(--radius-chip);
    background: var(--white); color: var(--stone);
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.composer-stop:hover { border-color: var(--vermilion); color: var(--vermilion); }
.chat-app.is-streaming .composer-send { display: none; }

.composer-foot {
    margin: 9px auto 0;
    font-size: 11.5px; line-height: 1.5; color: var(--stone); text-align: center;
}

/* ---- prashna intake sits inside the scroller ---- */
.prashna-intake { display: grid; gap: 13px; border-color: rgba(160, 112, 48, .35); background: linear-gradient(135deg, var(--white), var(--paper)); }
.prashna-intake__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.prashna-intake__head h2 { margin: 0; font-size: clamp(19px, 2.6vw, 24px); }
.prashna-intake__head .eyebrow { margin-bottom: 5px; }
.prashna-intake__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 17px; }
.prashna-intake .field { min-width: 0; }
.prashna-place-row { display: flex; gap: 8px; align-items: stretch; }
.prashna-place-row .input { min-width: 0; flex: 1 1 auto; }
.prashna-place-row .btn { flex: 0 0 auto; white-space: nowrap; }
.birth-place-row { display: flex; gap: 8px; align-items: stretch; }
.birth-place-row .input { min-width: 0; flex: 1 1 auto; }
.birth-place-row .btn { flex: 0 0 auto; white-space: nowrap; }

/* DOB field — digits-only typing, automatic DD/MM/YYYY (year capped at 4) */
.dob-field { display: flex; gap: 8px; align-items: stretch; }
.dob-field .dob-input { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); letter-spacing: .06em; }
.dob-cal { flex: 0 0 auto; width: 50px; border: 1px solid var(--sand); border-radius: 8px; background: var(--white);
           color: var(--basalt); cursor: pointer; font-size: 18px; line-height: 1;
           transition: border-color .2s var(--ease); }
.dob-cal:hover { border-color: var(--brass); }
.dob-picker-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* "Time approximate / unknown" ticked → the field is ignored (noon is used),
 * so it must read as switched off, not merely optional. */
.dob-field.is-disabled { opacity: .5; }
.dob-field .dob-input:disabled {
    background: var(--paper); color: var(--stone); cursor: not-allowed;
    -webkit-text-fill-color: var(--stone);
}
.dob-cal:disabled { cursor: not-allowed; border-color: var(--cotton); color: var(--sand); }
.dob-cal:disabled:hover { border-color: var(--cotton); }
@media (max-width: 520px) {
    .birth-place-row { flex-direction: column; }
    .birth-place-row .btn { width: 100%; }
}

/* ---- responsive: rail folds into a summary bar ---- */
@media (max-width: 960px) {
    .chat-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .chat-rail { border-right: 0; border-bottom: 1px solid var(--cotton); }
    .chat-rail__scroll {
        height: auto;
        flex-direction: row;
        align-items: stretch;
        overflow-x: auto;
        padding: 12px 16px;
        gap: 10px;
    }
    .chat-rail .rail-card { flex: 0 0 auto; min-width: 200px; padding: 11px 13px; }
    .rail-card--trust { display: none; }
    .rail-subject { font-size: 16px; }
    .rail-card--tokens .rail-meter b { font-size: 21px; }
    .rail-actions { margin-top: 9px; }
}
@media (max-width: 620px) {
    .chat-scroll__inner, .chat-composer > * { width: calc(100% - 26px); }
    .chat-scroll__inner { padding-top: 18px; }
    .chat-thread { gap: 22px; }
    .msg { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
    .msg__avatar { width: 28px; height: 28px; font-size: 11px; }
    .chat-status { margin-left: 38px; }
    .prashna-intake__grid { grid-template-columns: minmax(0, 1fr); }
    .prashna-intake__head { flex-direction: column; gap: 9px; }
    .chat-empty { padding-top: 22px; }

    /* On a 380x780 screen the rail + wrapped suggestion chips left ~90px for
     * the conversation. Both collapse to compact single-row strips so the
     * transcript keeps the majority of the viewport. */
    .chat-rail__scroll { padding: 9px 13px; gap: 8px; }
    .chat-rail .rail-card { min-width: 0; padding: 8px 11px; }
    .rail-eyebrow { margin-bottom: 3px; font-size: 9.5px; }
    .rail-subject { font-size: 14.5px; }
    .rail-sub, .rail-chips { display: none; }
    .rail-actions { margin-top: 6px; }
    .rail-actions .btn { padding: 6px 10px; font-size: 12px; }
    .rail-card--tokens .rail-meter { margin-bottom: 4px; }
    .rail-card--tokens .rail-meter b { font-size: 17px; }
    .rail-link { font-size: 11.5px; padding: 1px 0; }

    .sugg-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-bottom: 8px;
        padding-bottom: 2px;
    }
    .sugg-row::-webkit-scrollbar { display: none; }
    .sugg { flex: 0 0 auto; font-size: 12.5px; padding: 5px 11px; }

    .composer-foot { margin-top: 6px; font-size: 10.5px; }
    .chat-composer { padding: 10px 0 11px; }
}

@media (max-width: 620px) and (max-height: 720px) {
    /* very short viewports: the trust/service cards are the first to go */
    .chat-rail .rail-card:not(.rail-card--subject):not(.rail-card--service-context):not(.rail-card--tokens) { display: none; }
    .composer-foot { display: none; }
}

/* ---------- Builder: form + sticky live preview ------------------------------
 * The two columns were plain 1fr/1fr, so an 825px form sat beside a 296px
 * preview and left ~530px of dead column. The preview now sticks to the
 * viewport and follows the form down instead.
 * -------------------------------------------------------------------------- */
.builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    margin-top: 30px;
}
.builder-preview { position: sticky; top: calc(var(--header-height) + 18px); }
.builder-preview > .card { margin: 0; }

.preview-empty { display: grid; justify-items: center; text-align: center; padding: 14px 6px 6px; }
.preview-empty__frame {
    width: min(240px, 68%);
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 20px;
    opacity: .5;
}
.preview-empty__frame span {
    border: 1px dashed var(--sand);
    border-radius: 3px;
    background: linear-gradient(135deg, rgba(243, 235, 221, .7), transparent);
}
.preview-empty__frame span:nth-child(6),
.preview-empty__frame span:nth-child(7),
.preview-empty__frame span:nth-child(10),
.preview-empty__frame span:nth-child(11) { border-style: solid; border-color: var(--cotton); background: var(--paper); }
.preview-empty__title { margin: 0 0 8px; font-family: var(--font-display); font-size: 19px; color: var(--basalt); }
.preview-empty__note { margin: 0; max-width: 40ch; font-size: 13px; line-height: 1.6; color: var(--stone); }

@media (max-width: 900px) {
    .builder-grid { grid-template-columns: minmax(0, 1fr); }
    .builder-preview { position: static; }
    .preview-empty__frame { width: min(190px, 55%); margin-bottom: 15px; }
}

/* ---------- Checkout dialog: choose -> pay -> token in hand -------------------
 * The old dialog ended at a status line ("Sandbox complete. Token: AJ-..."), so
 * the buyer's only copy of the code was a sentence they could close by accident
 * and no next step was offered. This is the two-step version.
 * -------------------------------------------------------------------------- */
.purchase-steps {
    margin: 0 0 20px;
    padding-left: 20px;
    display: grid;
    gap: 7px;
    counter-reset: pstep;
}
.purchase-steps li { font-size: 13.5px; line-height: 1.55; color: var(--stone); }
.purchase-steps li::marker { color: var(--vermilion); font-weight: 700; }

.purchase-dialog__what { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.purchase-dialog__fields { display: grid; gap: 15px; }
.purchase-dialog__fields .field span,
.purchase-dialog__fields .field > label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; }
.purchase-dialog__fields .req { color: var(--vermilion); }
.purchase-dialog__fields .opt {
    font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--sand);
}
.purchase-dialog__fields .hint { display: block; margin-top: 5px; font-size: 11.5px; color: var(--stone); }
.purchase-dialog__fields .hint.is-ok { color: var(--good); }
.purchase-dialog__fields .hint.is-err { color: var(--vermilion-deep); }
.coupon-row { display: flex; gap: 8px; }
.coupon-row .input { flex: 1 1 auto; min-width: 0; }
.coupon-row .btn { flex: 0 0 auto; padding-inline: 16px; }
.purchase-dialog__trust {
    margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--stone); text-align: center;
}
.purchase-dialog__status { margin: 12px 0 0; font-size: 13px; color: var(--brass-text); min-height: 1.2em; }

/* ---- success ---- */
.purchase-done { text-align: center; }
.purchase-done__tick {
    width: 46px; height: 46px; margin: 0 auto 14px;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--good-soft); color: var(--good); font-size: 22px; font-weight: 700;
}
.purchase-done__title { margin: 0 0 6px; font-size: clamp(21px, 3vw, 26px); }
.purchase-done__sub { margin: 0 0 22px; font-size: 14px; color: var(--stone); }
.purchase-done__label {
    margin: 0 0 8px;
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--brass-text);
}

.token-box {
    display: flex; align-items: stretch; gap: 0;
    border: 1px dashed var(--brass); border-radius: 10px;
    background: var(--paper); overflow: hidden;
}
.token-box__code {
    flex: 1 1 auto; min-width: 0;
    padding: 15px 12px;
    font-family: var(--font-mono);
    font-size: clamp(15px, 3.6vw, 21px); font-weight: 700; letter-spacing: .06em;
    color: var(--peacock-deep);
    overflow-wrap: anywhere; user-select: all;
}
.token-box__copy {
    flex: 0 0 auto;
    padding: 0 18px;
    border: 0; border-left: 1px dashed var(--brass);
    background: var(--white); color: var(--vermilion);
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background .16s var(--ease), color .16s var(--ease);
}
.token-box__copy:hover { background: var(--vermilion); color: var(--white); }
.token-box__copy.is-done { background: var(--good); color: var(--white); border-left-color: var(--good); }

.purchase-done__mail { margin: 12px 0 0; font-size: 13px; }
.purchase-done__mail.is-ok { color: var(--good); }
.purchase-done__mail.is-warn { color: var(--brass-text); }
.purchase-done__warn { margin: 8px 0 22px; font-size: 12px; color: var(--stone); }
.purchase-done .btn { margin-bottom: 9px; }
.purchase-done .btn:last-of-type { margin-bottom: 0; }

@media (max-width: 520px) {
    .token-box { flex-direction: column; }
    .token-box__copy { padding: 12px; border-left: 0; border-top: 1px dashed var(--brass); }
}

/* Same [hidden] trap for the other JS-toggled blocks. */
.sugg-row[hidden], .chat-status[hidden], .analysis-card[hidden], .aadhar[hidden],
.purchase-step[hidden], .prashna-intake[hidden],
#pr-technique-field[hidden], #pr-number-field[hidden],
.understood-chip[hidden], .branch-chips[hidden], .greeting-suggestions[hidden],
.branch-chip[hidden], .greeting-chip[hidden], .reading-evidence[hidden] { display: none !important; }

/* REQ-030 — Intent chips (Samjha gaya + Branch + Greeting) */
.understood-chip { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; padding: 8px 10px; border: 1px solid var(--cotton); border-radius: 10px; background: color-mix(in srgb, var(--paper) 85%, var(--peacock) 15%); font-size: 13px; line-height: 1.4; }
.understood-chip__label { font-weight: 600; color: var(--peacock); white-space: nowrap; }
.understood-chip__text { flex: 1; color: var(--ink); }
.understood-chip__edit { border: 0; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.understood-chip__edit:hover { background: var(--cotton); }
.branch-chips, .greeting-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.branch-chip, .greeting-chip { border: 1px solid var(--peacock); background: var(--paper); color: var(--peacock); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.branch-chip:hover, .greeting-chip:hover { background: var(--peacock); color: #fff; }
@media (max-width: 380px) { .understood-chip, .branch-chips, .greeting-suggestions { font-size: 12px; } }

/* 10.6 follow-up suggestions after an answer (host page renders into .msg) */
.follow-ups { display: grid; gap: 6px; margin: 10px 0 2px; padding: 10px 12px; border: 1px dashed var(--cotton); border-radius: 10px; background: color-mix(in srgb, var(--paper) 72%, transparent); }
.follow-ups__label { margin: 0 0 4px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--stone); }
.follow-ups .sugg--follow { justify-self: start; text-align: left; }

/* 10.7 inline chart thumbnail (host page renders a compact South wheel) */
.chart-thumb { margin: 10px 0 2px; border: 1px solid var(--cotton); border-radius: 10px; background: var(--paper); }
.chart-thumb > summary { cursor: pointer; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--peacock); }
.chart-thumb > summary::-webkit-details-marker { display: none; }
.chart-thumb > summary::before { content: '▸ '; }
.chart-thumb[open] > summary::before { content: '▾ '; }
.chart-thumb__wheel { padding: 4px 10px 12px; }
.chart-thumb__wheel .wheel-south { --w-cell: 26px; max-width: 190px; margin: 0 auto; font-size: 8px; }
.chart-thumb__wheel .wheel-south .w-s { padding: 1px 2px; }
.chart-thumb__wheel .wheel-south .w-sign b { font-size: 9px; }
.chart-thumb__wheel .wheel-south .w-house { font-size: 7px; }
.chart-thumb__wheel .wheel-south .w-planets { font-size: 8px; }
.chart-thumb__wheel .wheel-south .w-planets li { line-height: 1.2; }

/* Suggestions stay inside the composer. A wrapping grid avoids clipped or
 * undiscoverable horizontal content while keeping all four starters visible. */
.sugg-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    width: min(760px, calc(100% - 44px));
    min-width: 0;
}
.sugg {
    width: 100%; min-width: 0; max-width: none;
    overflow: visible; text-overflow: clip; white-space: normal;
    line-height: 1.35; text-align: left;
}
@media (max-width: 620px) {
    .sugg-row {
        grid-template-columns: minmax(0, 1fr);
        width: calc(100% - 26px);
        max-height: 128px;
        overflow-y: auto;
        scrollbar-width: thin;
        padding: 1px 2px 2px;
    }
    .sugg { font-size: 12px; padding: 6px 10px; }
}

/* Computation stages — shown while the chart request is in flight, so a chart
 * that lands in under a second still reads as work that was actually done. */
.compute-steps { display: grid; gap: 11px; padding: 22px 4px; }
.compute-step {
    display: flex; align-items: center; gap: 11px;
    margin: 0; font-size: 13.5px; line-height: 1.45;
    color: var(--sand);
    transition: color .25s var(--ease);
}
.compute-step i {
    flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
    border: 1.5px solid var(--sand); background: transparent;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}
.compute-step.is-on { color: var(--ink); }
.compute-step.is-on i {
    border-color: var(--mode-accent);
    background: var(--mode-accent);
    animation: aj-pulse 1s ease-in-out infinite;
}
.compute-step.is-done { color: var(--stone); }
.compute-step.is-done i { border-color: var(--good); background: var(--good); }
@keyframes aj-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .compute-step.is-on i { animation: none; } }

/* ---------- 13. Muhurat ---------- */
.muhurat-controls { display: grid; gap: 14px; }
/* A form field must never inherit its height from a sibling cell. `.field` is
 * itself display:grid (app.css:275), so a stretched grid row makes its
 * <select> absorb the leftover height — opening the help panel used to inflate
 * the Category select from 48px to 285px. Fields size to their own content. */
.muhurat-controls .card-grid > .field { align-self: start; }
.muh-cats { display: flex; flex-wrap: wrap; gap: 8px; }
/* --- Muhurat workspace ------------------------------------------------- */
.muh-workspace {
    display: grid; gap: 22px; align-items: start; margin-top: 30px;
}
.muh-workspace__filters, .muh-workspace__results { min-width: 0; }
@media (min-width: 1024px) {
    .muh-workspace { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); max-width: 1320px; margin-inline: auto; }
    .muh-workspace__filters { position: sticky; top: 84px; align-self: start; }
}
.muh-list {
    display: flex; flex-direction: column; gap: 0; border: 1px solid var(--cotton);
    border-radius: var(--radius-card); background: var(--white); overflow: hidden;
}
.muh-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--paper);
    background: var(--white); min-width: 0; position: relative;
    transition: background .15s var(--ease);
}
.muh-row:last-child { border-bottom: 0; }
.muh-row:hover { background: var(--mode-soft); }
.muh-row__select {
    display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer;
}
.muh-row__select > input {
    flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--vermilion);
}
.muh-row__select:focus-within { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
.muh-row__when { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.muh-row__date {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--stone);
}
.muh-row__time { font-size: 19px; font-weight: 600; color: var(--basalt); line-height: 1.1; }
.muh-row__facts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; list-style: none; }
.muh-row__facts .chip { white-space: nowrap; }
.muh-selection {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--sand);
    border-radius: var(--radius-card); background: var(--conch); min-width: 0;
}
.muh-selection[hidden] { display: none; }
.muh-selection__copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-width: 0; }
.muh-selection__count { color: var(--peacock-deep); white-space: nowrap; }
.muh-selection__note { color: var(--stone); font-size: 13px; }
.muh-selection__action { flex: 0 0 auto; white-space: nowrap; }
.muh-history {
    margin-bottom: 18px; padding: 18px; border: 1px solid var(--cotton);
    border-radius: var(--radius-card); background: var(--paper);
}
.muh-history[hidden] { display: none; }
.muh-history__head { margin-bottom: 12px; }
.muh-history__head .eyebrow { margin-bottom: 5px; }
.muh-history__head h2 { margin: 0; font-size: clamp(20px, 2.5vw, 27px); }
.muh-history__list { display: grid; gap: 8px; }
.muh-history__item {
    padding: 11px 12px; border: 1px solid var(--cotton); border-radius: 10px;
    background: var(--white);
}
.muh-history__title { display: block; color: var(--basalt); font-weight: 700; }
.muh-history__meta { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 4px; color: var(--stone); font-size: 12.5px; }
.muh-history__selected { margin: 8px 0 0; color: var(--peacock-deep); font-size: 12.5px; }
.muh-history__moments { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; padding: 0; list-style: none; }
.muh-history__moments .chip { white-space: nowrap; }
@media (max-width: 680px) {
    .muh-row { grid-template-columns: 1fr; gap: 8px; }
    .muh-row__facts { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .muh-selection { align-items: stretch; flex-direction: column; gap: 10px; }
    .muh-selection__action { width: 100%; }
}
/* Category drives the Purpose list — flash it briefly when its options change
 * so the update is noticed. Reduced-motion collapses the keyframe to nothing. */
.input.just-updated { animation: aj-field-flash .9s var(--ease); }
@keyframes aj-field-flash {
    from { border-color: var(--mode-accent); box-shadow: 0 0 0 3px var(--mode-soft); }
    to   { border-color: var(--sand); box-shadow: 0 0 0 3px transparent; }
}
/* The primary action anchors form completion — full width on a phone. */
@media (max-width: 640px) { #muh-find { width: 100%; } }
.muh-results { display: grid; gap: 16px; }
.muh-card { position: relative; }
.muh-card.is-top-pick { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass), var(--shadow); }
.muh-card .pick-star {
    position: absolute; top: -11px; right: 16px; padding: 3px 12px; border-radius: var(--radius-chip);
    background: var(--brass); color: var(--white); font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-mono);
}
.muh-time { font-family: var(--font-display); font-size: 22px; color: var(--basalt); margin: 0; }
.muh-date { font-family: var(--font-mono); font-size: 12.5px; color: var(--stone); }
.muh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding: 0; list-style: none; }
.muh-chips .chip b { color: inherit; font-weight: 700; }
.muh-reason { margin-top: 12px; font-size: 14px; color: var(--stone); }
.muh-know {
    grid-column: 1 / -1; margin: 4px 0 14px; border: 1px solid var(--cotton);
    border-radius: 10px; background: rgba(255,253,248,.8);
}
.muh-know > summary {
    cursor: pointer; padding: 10px 13px; min-height: 44px; display: flex;
    align-items: center; gap: 8px; list-style: none;
}
.muh-know > summary::-webkit-details-marker { display: none; }
.muh-know > summary::before {
    content: "▸"; color: var(--vermilion); transition: transform .18s var(--ease);
}
.muh-know[open] > summary::before { transform: rotate(90deg); }
.muh-know__cat {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--brass-text);
}
.muh-know__body {
    max-height: 46vh; overflow-y: auto; padding: 0 13px 13px;
    font-size: 14.5px; line-height: 1.6; overscroll-behavior: contain;
}
@media (max-width: 680px) {
    /* Keep the long category explanation inside its own scroll region on a
     * phone; opening it must not push the result controls or page footer away. */
    .muh-know__body { max-height: min(46vh, 240px); }
}

/* ---------- 14. Redeem / token display ---------- */
.token-display {
    font-family: var(--font-mono); font-size: clamp(19px, 4.4vw, 30px); font-weight: 700;
    letter-spacing: .12em; color: var(--peacock-deep); background: var(--white);
    border: 2px dashed var(--brass); border-radius: var(--radius-card); padding: 18px 22px;
    text-align: center; overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.redeem-panel { max-width: 620px; margin-inline: auto; }
.seal-ok {
    display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
    background: var(--good-soft); color: var(--good); border: 2px solid var(--good); margin-bottom: 14px;
}
.err-panel {
    border: 1px solid var(--bad); background: var(--bad-soft); color: var(--vermilion-deep);
    border-radius: var(--radius-card); padding: 14px 16px; font-size: 14px;
}
.notice-soft {
    border: 1px solid var(--sand); background: var(--paper); color: var(--stone);
    border-radius: var(--radius-card); padding: 14px 16px; font-size: 14px;
}
.ai-not-ready { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; border-color: rgba(185, 74, 47, .35); background: rgba(185, 74, 47, .07); color: var(--basalt); }
.ai-not-ready strong { color: var(--vermilion-deep); }
.ai-not-ready a { font-weight: 700; color: var(--vermilion-deep); text-decoration: underline; }

/* ---------- 15. Dasha strip ---------- */
.dasha-strip { display: grid; gap: 10px; }
.dasha-chip {
    display: grid; grid-template-columns: 96px 1fr auto; gap: 4px 14px; align-items: center;
    padding: 12px 16px; border: 1px solid var(--cotton); border-radius: 10px; background: var(--white);
    font-size: 14px;
}
.dasha-chip .d-level { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.dasha-chip .d-lord { font-weight: 700; font-size: 15.5px; }
.dasha-chip .d-dates { font-family: var(--font-mono); font-size: 12px; color: var(--stone); font-variant-numeric: tabular-nums; }
.dasha-chip.is-now { border-color: var(--vermilion); box-shadow: inset 3px 0 0 var(--vermilion); }
.dasha-timeline { margin-top: 26px; }
.dasha-timeline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dasha-period {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; padding: 13px 14px;
    border: 1px solid var(--cotton); border-radius: 12px; background: var(--white);
    cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.dasha-period strong { grid-column: 1 / -1; font-family: var(--font-display); font-size: 17px; color: var(--basalt); }
.dasha-period span { font-family: var(--font-mono); font-size: 11px; color: var(--stone); font-variant-numeric: tabular-nums; }
.dasha-period span:last-child { text-align: right; }
.dasha-period:hover { border-color: var(--brass); background: var(--mode-soft); }
.dasha-period:focus-visible { outline: 2px solid var(--peacock); outline-offset: 1px; }
.dasha-period.is-selected { border-color: var(--vermilion); background: var(--vermilion-glow); box-shadow: inset 3px 0 0 var(--vermilion); }
.dasha-period.is-now { border-color: var(--vermilion); background: var(--vermilion-glow); box-shadow: inset 3px 0 0 var(--vermilion); }

/* Dasha explorer — five-level drilldown (KP Astro-style), lazy per level */
.dasha-explorer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.dasha-explorer-head .chart-section-intro { margin: 0; }
#dasha-tree-box { margin-top: 16px; }
.d-notice { margin: 8px 0; }
.d-tree { border: 1px solid var(--cotton); border-radius: 12px; background: var(--white); padding: 14px 16px; }
.d-root {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
    padding: 9px 12px; border-radius: 8px; background: var(--paper); margin-bottom: 10px; font-size: 15px;
}
.d-root.is-now { background: var(--vermilion-glow); }
.d-list { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--cotton); }
.d-node { margin: 2px 0; }
.d-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.d-head:hover { background: var(--mode-soft); }
.d-head:focus-visible { outline: 2px solid var(--peacock); outline-offset: 1px; }
.d-node.is-open > .d-head { background: var(--mode-soft); }
.d-caret { font-size: 11px; color: var(--stone); width: 12px; flex: 0 0 auto; }
.d-caret-dot { color: var(--sand); }
.d-level-tag {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--stone); background: var(--paper); border: 1px solid var(--cotton);
    padding: 1px 6px; border-radius: 999px; flex: 0 0 auto;
}
.d-lord { font-weight: 700; font-size: 14px; color: var(--basalt); }
.d-dates { font-family: var(--font-mono); font-size: 11.5px; color: var(--stone); font-variant-numeric: tabular-nums; }
.d-sig { font-size: 11px; color: var(--brass-text); }
.d-node.is-now > .d-head { box-shadow: inset 3px 0 0 var(--vermilion); }
.d-node.is-now > .d-head .d-lord { color: var(--vermilion-deep); }
.d-body { margin: 2px 0 6px; }
@media (max-width: 640px) {
    .d-list { padding-left: 10px; }
    .d-head { padding: 6px 8px; gap: 3px 8px; }
}

/* KP enrichment — Planetary Positions table */
.ruled-bracket { color: var(--stone); font-size: 11px; }
.ps-badge { background: var(--peacock-soft); color: var(--peacock-deep); border: 1px solid rgba(23, 76, 80, .28); }
.nature-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.nat-good { color: var(--good); background: var(--good-soft); border: 1px solid rgba(50, 99, 70, .28); }
.nat-bad { color: var(--bad); background: var(--bad-soft); border: 1px solid rgba(143, 52, 31, .28); }

/* Tight variant — Planetary Positions only. Planet stays the sticky first
 * column (default .aj-table behaviour); degree sits right after it in a
 * clean aligned mono column. */
.pos-table { min-width: 640px; }
.pos-table th, .pos-table td { padding: 8px 9px; font-size: 13px; }
.pos-table th:first-child, .pos-table td:first-child { min-width: 78px; }
.pos-table .pos-sep td {
    padding: 7px 9px; background: var(--paper); color: var(--stone);
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
    text-transform: uppercase; border-top: 1px solid var(--cotton);
}
.chart-disclosure { margin-top: 12px; border: 1px solid var(--cotton); border-radius: 12px; background: var(--white); overflow: hidden; }
.chart-disclosure summary { cursor: pointer; padding: 14px 16px; font-weight: 750; color: var(--basalt); background: var(--paper); }
.chart-disclosure[open] summary { border-bottom: 1px solid var(--cotton); }
.chart-disclosure .table-wrap { border: 0; border-radius: 0; }
.aspect-table-limit { max-height: 520px; overflow: auto; }

/* ---------- 16. Steps / hero / landing ---------- */
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero-title { margin-bottom: 14px; }
.hero-title .dev { display: block; font-size: clamp(19px, 2.6vw, 27px); color: var(--brass-text); margin-top: 8px; letter-spacing: 0; }
.hero-lead { font-size: clamp(15.5px, 1.6vw, 18px); color: var(--stone); max-width: 56ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.trust-strip {
    display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 34px; padding: 14px 18px;
    border-block: 1px solid var(--cotton); font-family: var(--font-mono); font-size: 12px;
    letter-spacing: .07em; color: var(--stone); text-transform: uppercase;
}
.trust-strip .dot { color: var(--brass); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: aj-step; }
.step-card { position: relative; padding-top: 46px; }
.step-card::before {
    counter-increment: aj-step; content: "0" counter(aj-step); position: absolute; top: 0; left: 0;
    font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--vermilion);
    border-bottom: 1px solid currentColor; padding-bottom: 6px; width: 46px;
}
.yantra-figure { margin: 0; display: grid; place-items: center; }
.yantra-figure svg { width: min(100%, 460px); height: auto; }
.yantra-ring-slow { transform-origin: 50% 50%; animation: aj-rotate 90s linear infinite; }
.yantra-ring-mid { transform-origin: 50% 50%; animation: aj-rotate 60s linear infinite reverse; }
.yantra-planet-dot { animation: aj-pulse 3.2s var(--ease) infinite; }

/* ---------- pricing tiers (Basic / Premium / Elite Premium) ---------- */
.pricing-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ptier { position: relative; display: flex; flex-direction: column; text-align: left; overflow: hidden; }
.ptier::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--sand); }
.ptier--premium::before { background: var(--copper); }
.ptier--elite::before { background: var(--peacock); }
.ptier__name { margin: 10px 0 3px; }
.ptier__scope { font-size: 13.5px; color: var(--stone); margin: 0 0 18px; line-height: 1.5; }
.ptier__scope b { color: var(--ink); font-weight: 700; }

.ppack-opt {
    position: relative; border: 2px solid var(--cotton); border-radius: 10px; padding: 12px 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px;
    cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.ppack-opt:hover { border-color: var(--brass); }
/* Popular is only ever conveyed by the small text flag below — no border or
 * background of its own, so the gold is-selected border is the only visual
 * "this one is highlighted" signal on the page. */
.ppack-opt.is-selected { border-color: var(--brass); box-shadow: 0 0 0 3px var(--warn-soft); }
.ppack-opt__cap { font-size: 10.5px; color: var(--stone); margin-top: 3px; }
.ppack-opt__flag {
    position: absolute; top: -9px; left: 14px; background: var(--copper); color: var(--white);
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: 2px 9px; border-radius: var(--radius-chip);
}
.ppack-opt__qty { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.ppack-opt__equals { color: var(--copper); font-size: 11px; font-weight: 700; }
.ppack-opt__tokens { color: var(--vermilion-deep); }
.ppack-opt__meta { font-size: 11.5px; color: var(--stone); margin-top: 2px; }
.ppack-opt__perq { font-size: 11px; color: var(--brass-text); margin-top: 4px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ppack-opt__price { text-align: right; flex: 0 0 auto; }
.ppack-opt__mrp { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--stone); text-decoration: line-through; text-decoration-color: var(--sand); font-variant-numeric: tabular-nums; }
.ppack-opt__sale { font-family: var(--font-mono); font-size: 19px; font-weight: 700; color: var(--vermilion-deep); font-variant-numeric: tabular-nums; line-height: 1.15; }
.ppack-opt__off { display: inline-block; margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--vermilion); background: var(--vermilion-glow); padding: 1px 7px; border-radius: var(--radius-chip); }
.ppack-opt__usd { margin-top: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--stone); font-variant-numeric: tabular-nums; }
.ppack-opt__usd::before { content: "≈ "; }
.ppack-opt__perq-usd { color: var(--stone); }

.pricing-kicker { margin: 8px 0 0; color: var(--stone); font-size: 14px; }
.pricing-unit-note { display: inline-flex; margin: 10px 0 0; padding: 6px 11px; border: 1px solid rgba(160,112,48,.35); border-radius: var(--radius-chip); background: rgba(211,155,100,.10); color: var(--brass-text); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.pricing-escape { margin: 6px 0 0; font-size: 13px; }
.pricing-escape a { color: var(--brass-text); text-decoration: underline; text-underline-offset: 2px; }
.pricing-banner { margin: 18px 0 0; padding: 12px 16px; border: 1px solid var(--cotton); border-left: 3px solid var(--brass); background: var(--paper); font-size: 14px; line-height: 1.5; }
.ptier--suggested { border-color: rgba(160, 112, 48, .45); box-shadow: var(--shadow-sm, 0 8px 24px rgba(61,45,29,.08)); }
.ppack-opt__mrp,
.ppack-opt__off,
.ppack-opt__usd,
.ppack-opt__meta,
.ppack-opt__cap { display: none; }
.ppack-opt.is-selected .ppack-opt__usd,
.ppack-opt.is-selected .ppack-opt__meta,
.ppack-opt.is-selected .ppack-opt__cap,
.ppack-opt.is-selected .ppack-opt__mrp { display: block; }
.ppack-opt__sale { color: var(--ink); }
.ppack-opt.is-selected .ppack-opt__sale { color: var(--vermilion-deep); }
.ppack-opt__flag { display: none; }
.coupon-details { margin-top: 10px; }
.coupon-details summary { cursor: pointer; font-size: 13px; color: var(--brass-text); list-style: none; }
.coupon-details summary::-webkit-details-marker { display: none; }
.token-slip { border: 1px solid var(--cotton); box-shadow: inset 0 0 0 1px rgba(160,112,48,.22); border-radius: 10px; background: var(--paper); }

.ptier__cta { margin-top: auto; }

/* ---------- flagship band (Platinum / Platinum Plus) ---------- */
.pflagship {
    position: relative; overflow: hidden; margin-top: 20px; padding: clamp(34px, 5vw, 46px) clamp(22px, 4vw, 38px);
    border-radius: var(--radius-card);
    color: var(--conch);
    background:
        radial-gradient(circle at 82% 20%, rgba(219, 157, 81, .17), transparent 27%),
        linear-gradient(122deg, #092f32 0%, #0d3d40 58%, #102b2d 100%);
}
.pflagship__head { position: relative; text-align: center; margin-bottom: 28px; }
.pflagship__eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #e9b96e; margin-bottom: 8px; }
.pflagship__title { color: #fff8e9; font-size: clamp(23px, 2.8vw, 29px); margin: 0 0 8px; }
.pflagship__sub { max-width: 480px; margin: 0 auto; color: rgba(251, 248, 240, .72); font-size: 14px; line-height: 1.55; }

.pflag-row { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pflag-card { border: 1px solid rgba(240, 197, 125, .3); border-radius: 12px; padding: 22px 20px; background: rgba(255,255,255,.03); }
.pflag-card--plus { border-color: rgba(240, 197, 125, .55); background: rgba(240, 197, 125, .05); }
.pflag-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.pflag-card__name { color: #f0c57d; font-size: 20px; }
.pflag-card__badge { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #102b2d; background: #e9b96e; padding: 2px 8px; border-radius: var(--radius-chip); }
.pflag-card__scope { font-size: 12.5px; color: rgba(251, 248, 240, .6); margin-bottom: 16px; }
.pflag-card__price-row { display: flex; align-items: baseline; gap: 9px; }
.pflag-card__mrp { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: rgba(251, 248, 240, .55); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.pflag-card__sale { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: #fff8e9; font-variant-numeric: tabular-nums; }
.pflag-card__off { font-size: 11px; font-weight: 700; color: #e9b96e; margin-top: 2px; }
.pflag-card__usd { margin-top: 3px; font-family: var(--font-mono); font-size: 11.5px; color: rgba(251, 248, 240, .55); font-variant-numeric: tabular-nums; }
.pflag-card__usd::before { content: "≈ "; }
.pflag-card__validity { font-size: 12px; color: rgba(251, 248, 240, .55); margin: 4px 0 0; }
.pflag-card__perq { margin: 3px 0 14px; font-family: var(--font-mono); font-size: 11.5px; color: rgba(240, 197, 125, .75); font-variant-numeric: tabular-nums; }
.pflag-card__bullets { list-style: none; margin: 0 0 16px; padding: 12px 0 0; border-top: 1px dashed rgba(240, 197, 125, .28); display: grid; gap: 6px; }
.pflag-card__bullets li { font-size: 12.5px; color: rgba(251, 248, 240, .82); padding-left: 14px; position: relative; }
.pflag-card__bullets li::before { content: "·"; position: absolute; left: 2px; color: #e9b96e; }
.pflag-card__cta { display: block; text-align: center; background: #e9b96e; color: #102b2d; }
.pflag-card__cta:hover { background: #f0c57d; }

/* ---------- 17. Skeletons / toasts / reveal ---------- */
.skel {
    display: block; border-radius: 8px; min-height: 16px;
    background: linear-gradient(100deg, var(--paper) 34%, var(--white) 46%, var(--paper) 58%);
    background-size: 300% 100%; animation: aj-shimmer 1.4s ease infinite;
}
.skel--card { min-height: 150px; border-radius: var(--radius-card); border: 1px solid var(--cotton); }
.skel--chip { min-height: 34px; border-radius: var(--radius-chip); }

.toast-stack { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 400; display: grid; gap: 8px; width: min(92vw, 460px); }
.toast {
    padding: 12px 16px; border-radius: 10px; background: var(--basalt); color: var(--conch);
    font-size: 14px; box-shadow: var(--shadow); border-left: 4px solid var(--brass);
    animation: aj-toast-in .3s var(--ease);
}
.toast--ok { border-left-color: var(--good); }
.toast--err { border-left-color: var(--bad); }

[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
/* transform: none (not translateY(0)) on purpose: any transform value, even
   the identity, makes the element the containing block for position:fixed
   descendants. The orbit tooltip (.aj-orbit__tip) is fixed + mounted inside
   .hero-instrument[data-reveal]; a lingering translateY(0) shifted it off
   screen and .hero's overflow:hidden swallowed it (hover degree lost).
   none interpolates from translateY(12px) as identity, so the reveal
   animation is unchanged. */
[data-reveal].is-in { opacity: 1; transform: none; }
.hero-grid--ai .hero-copy[data-reveal] { transition-delay: 0ms; }
.hero-grid--ai .hero-instrument[data-reveal] { transition-delay: 90ms; }

@keyframes aj-blink { 50% { opacity: 0; } }
@keyframes aj-spin { to { transform: rotate(360deg); } }
@keyframes aj-rotate { to { transform: rotate(360deg); } }
@keyframes align-ring {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes aj-pulse { 0%, 100% { opacity: .9; } 50% { opacity: .45; } }
@keyframes aj-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes aj-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
    .yantra-ring-slow, .yantra-ring-mid { animation: none; }
}

/* ---------- 18. Breakpoints (1360 / 1220 / 960 / 680 / 420 / 380) ---------- */
@media (min-width: 680px) {
    :root { --container: min(1380px, calc(100vw - 96px)); }
}

@media (max-width: 1360px) {
    .card-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1220px) {
    :root { --container: min(1120px, calc(100vw - 56px)); }
    .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pricing-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    :root { --header-height: 74px; --container: min(100% - 40px, 840px); }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-grid .yantra-figure { order: 2; }
    .steps { grid-template-columns: 1fr; gap: 34px; }
    .chart-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
    .pricing-tiers { grid-template-columns: 1fr; }
    .pflag-row { grid-template-columns: 1fr; }
    .card { padding: 18px; }
    .section { padding-block: clamp(40px, 9vw, 56px); }
    .wheel-south { grid-template-columns: repeat(4, minmax(58px, 1fr)); grid-template-rows: repeat(4, minmax(58px, 1fr)); }
    .dasha-chip { grid-template-columns: 1fr; gap: 2px; }
    .dasha-timeline-grid { grid-template-columns: 1fr; }
    .dasha-chip .d-dates { font-size: 11.5px; }
    .chart-overview-grid, .ruling-list { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    :root { --container: calc(100vw - 28px); }
    .btn { padding: 11px 16px; font-size: 13.5px; width: 100%; }
    .hero-ctas .btn { width: 100%; }
    .wheel-south { grid-template-columns: repeat(4, minmax(52px, 1fr)); grid-template-rows: repeat(4, minmax(52px, 1fr)); }
    .w-s { padding: 4px; }
    .w-s .w-sign b { font-size: 11px; }
    .w-p { font-size: 10px; padding: 1px 4px; }
    .chart-fact-grid { grid-template-columns: 1fr; }
    .chart-fact { min-height: 96px; }
    .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
    .tabs .tab-btn { min-width: 0; width: 100%; min-height: 40px; padding: 7px 10px; white-space: normal; }
}

@media (max-width: 380px) {
    :root { --container: calc(100vw - 20px); }
    h1 { font-size: 27px; }
    .trust-strip { font-size: 10.5px; gap: 8px 12px; }
    .token-display { font-size: 16px; letter-spacing: .07em; }
}

/* ---------- 19. Print ---------- */
@media print {
    :root { --mode-accent: #000; }
    body { background: #fff; color: #111; font-size: 12px; }
    .site-header, .ai-shell-header, .site-footer, .skip-link, .site-grain, .chat-composer, .toast-stack,
    .wheel-toolbar .segmented, .tabs, .btn, .lang-toggle, .aj-lens, .msg__actions,
    .chat-status, .sugg-row, .chat-rail, .aadhar summary { display: none !important; }
    /* the chat shell owns the viewport on screen; let it flow for paper */
    body.is-chat-app { overflow: visible !important; }
    body.is-chat-app main.app-main { display: block !important; }
    .chat-app { display: block !important; }
    .chat-scroll { overflow: visible !important; }
    .aadhar__body { display: grid !important; }
    .aadhar[open] summary, .aadhar { border-color: #999; }
    .card, .wheel-stage, .tab-panel, .wheel-inspector, .table-wrap { box-shadow: none; border-color: #999; break-inside: avoid; }
    .section { padding-block: 18px; }
    a { color: inherit; text-decoration: none; }
    a[href^="http"]::after { content: ""; }
    .msg .bubble { border-color: #999; box-shadow: none; }
    .msg .bubble.is-streaming > :last-child::after { display: none; }
    .site-footer { display: none !important; }
    @page { margin: 18mm; }
}

/* ==========================================================================
   W4b additions (services hub / prashna bank / legal docs / redeem meta)
   ========================================================================== */

/* ---- Services hub ---- */
.svc-icon svg { width: 24px; height: 24px; }
.svc-card .price-sub { font-size: 12.5px; color: var(--stone); margin: 6px 0 0; }
.svc-filters { margin-bottom: 22px; }

/* ---- Prashna bank strip ---- */
.prashna-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 18px; padding: 0; }
.prashna-panel[hidden] { display: none; }
.prashna-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prashna-list li.is-hidden { display: none; }
.prashna-list .pq-link {
    display: block; height: 100%; padding: 13px 16px; border: 1px solid var(--cotton); border-radius: 10px;
    background: var(--white); color: var(--basalt); font-size: 14.5px; line-height: 1.5; text-decoration: none;
    transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.prashna-list .pq-link:hover { border-color: var(--brass); background: var(--mode-soft); color: var(--basalt); text-decoration: none; box-shadow: var(--shadow-sm); }
.prashna-more { margin-top: 16px; }

/* ---- Legal docs ---- */
.legal-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 30px; }
.doc-nav { position: sticky; top: calc(var(--header-height) + 16px); display: grid; gap: 4px; }
.doc-nav a {
    display: block; padding: 10px 14px; border: 1px solid transparent; border-radius: 8px;
    color: var(--stone); font-size: 14px; font-weight: 600; text-decoration: none;
}
.doc-nav a:hover { background: var(--paper); color: var(--peacock-deep); text-decoration: none; }
.doc-nav a.is-active { background: var(--white); border-color: var(--cotton); color: var(--peacock-deep); box-shadow: var(--shadow-sm); }
.doc-nav .doc-sec-links { display: grid; gap: 2px; padding: 4px 0 6px 16px; }
.doc-nav .doc-sec-links a { padding: 5px 10px; font-size: 12.5px; font-weight: 500; color: var(--stone); }
.legal-body h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 6px; }
.legal-sub { font-size: 13px; color: var(--stone); margin-bottom: 0; }
.legal-sec { margin-top: 30px; }
.legal-sec h3 { margin-bottom: 8px; }
@media (max-width: 960px) {
    .legal-grid { grid-template-columns: 1fr; gap: 20px; }
    .doc-nav { position: static; }
}

/* ---- Redeem result meta ---- */
.redeem-meta { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; margin: 18px 0 0; font-size: 14px; }
.redeem-meta dt {
    align-self: center; color: var(--stone); font-family: var(--font-mono);
    font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
}
.redeem-meta dd { margin: 0; color: var(--basalt); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 680px) { .prashna-list { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
    .prashna-intake__head { flex-direction: column; }
    .prashna-intake__grid { grid-template-columns: 1fr; }
    .prashna-place-row { flex-direction: column; }
    .prashna-place-row .btn { width: 100%; }
}

/* Clear product entry points and purchase interaction */
.section--start { padding-block: clamp(48px, 6vw, 84px); background: rgba(243, 235, 221, .58); border-block: 1px solid var(--cotton); }
.section-intro { max-width: 62ch; margin: 8px 0 26px; color: var(--stone); font-family: var(--font-display); font-size: 18px; }
.start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.start-card { position: relative; display: flex; min-height: 250px; flex-direction: column; padding: 24px; border: 1px solid var(--cotton); color: var(--basalt); background: rgba(255, 253, 248, .78); text-decoration: none; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.start-card:hover { color: var(--basalt); border-color: var(--vermilion); box-shadow: 0 18px 42px rgba(61,45,29,.12); transform: translateY(-4px); }
.start-card--ask { background: rgba(227, 236, 238, .54); }
.start-card--paid { background: rgba(240, 228, 214, .62); }
.start-card__number { color: var(--vermilion); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; }
.start-card__icon { position: absolute; top: 17px; right: 22px; color: var(--vermilion); font-family: var(--font-display); font-size: 34px; line-height: 1; }
.start-card h3 { max-width: 12ch; margin: 34px 0 8px; font-size: 25px; line-height: 1.08; }
.start-card p { max-width: 32ch; margin: 0 0 20px; color: var(--stone); font-size: 14px; }
.start-card strong { margin-top: auto; color: var(--vermilion-deep); font-size: 13px; letter-spacing: .03em; }
/* ---------- checkout: in-page panel (no native <dialog>) ----------
 * A native <dialog> popup is fragile on mobile: switching to a UPI app to
 * approve payment and coming back can leave the tab backgrounded long enough
 * for the browser to drop the dialog's open state. This panel instead lives
 * in the page flow and is toggled with [hidden] + a class, so there is no
 * separate popup element that can be silently dismissed by multitasking. */
.pricing-cards-wrap { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.pricing-cards-wrap.is-leaving { opacity: 0; transform: scale(.97); pointer-events: none; }
.pricing-cards-wrap[hidden] { display: none; }

.purchase-panel[hidden] { display: none; }
.purchase-panel {
    max-width: 640px; margin: 36px auto 0; scroll-margin-top: 24px;
    opacity: 0; transform: translateY(18px);
    transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.purchase-panel.is-visible { opacity: 1; transform: translateY(0); }

.purchase-panel__back {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px;
    border: 0; background: transparent; padding: 4px 0; cursor: pointer;
    color: var(--stone); font-family: var(--font-ui); font-size: 13px; font-weight: 700;
    transition: color .15s var(--ease);
}
.purchase-panel__back:hover { color: var(--vermilion-deep); }

.purchase-summary { margin-bottom: 22px; padding: 18px 20px; border-radius: var(--radius-card); }
.purchase-summary--light { background: var(--white); border: 1px solid var(--cotton); box-shadow: var(--shadow-sm); }
.purchase-summary--flagship {
    color: var(--conch);
    background:
        radial-gradient(circle at 82% 20%, rgba(219, 157, 81, .17), transparent 27%),
        linear-gradient(122deg, #092f32 0%, #0d3d40 58%, #102b2d 100%);
}
.purchase-summary__name { font-family: var(--font-display); font-size: 20px; margin-bottom: 2px; }
.purchase-summary--light .purchase-summary__name { color: var(--basalt); }
.purchase-summary--flagship .purchase-summary__name { color: #f0c57d; }
.purchase-summary__scope { font-size: 12.5px; margin-bottom: 12px; }
.purchase-summary--light .purchase-summary__scope { color: var(--stone); }
.purchase-summary--flagship .purchase-summary__scope { color: rgba(251, 248, 240, .65); }
.purchase-summary__price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.purchase-summary__mrp { font-family: var(--font-mono); font-size: 15px; font-weight: 700; text-decoration: line-through; font-variant-numeric: tabular-nums; }
.purchase-summary--light .purchase-summary__mrp { color: var(--stone); text-decoration-color: var(--sand); }
.purchase-summary--flagship .purchase-summary__mrp { color: rgba(251, 248, 240, .4); }
.purchase-summary__sale { font-family: var(--font-mono); font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; }
.purchase-summary--light .purchase-summary__sale { color: var(--vermilion-deep); }
.purchase-summary--flagship .purchase-summary__sale { color: var(--white); }
.purchase-summary__off {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-chip);
}
.purchase-summary--light .purchase-summary__off { color: var(--vermilion); background: var(--vermilion-glow); }
.purchase-summary--flagship .purchase-summary__off { color: #102b2d; background: #e9b96e; }
.purchase-summary__usd { margin-top: 4px; font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.purchase-summary--light .purchase-summary__usd { color: var(--stone); }
.purchase-summary--flagship .purchase-summary__usd { color: rgba(251, 248, 240, .55); }
.purchase-summary__what { margin: 10px 0 0; font-size: 13px; }
.purchase-summary--light .purchase-summary__what { color: var(--ink); }
.purchase-summary--flagship .purchase-summary__what { color: rgba(251, 248, 240, .85); }

.purchase-dialog__panel { position: relative; }
.purchase-dialog__price { margin: 8px 0 14px; color: var(--vermilion-deep); font-family: var(--font-mono); font-size: 24px; font-weight: 700; }
.purchase-dialog__fields { display: grid; gap: 12px; margin: 22px 0; }
.purchase-dialog__fields label { display: grid; gap: 5px; color: var(--stone); font-size: 12px; font-weight: 700; }
.purchase-dialog__fields input { min-height: 44px; padding: 10px 12px; border: 1px solid var(--sand); color: var(--basalt); background: var(--white); font: inherit; }
.purchase-dialog__status { min-height: 22px; margin: 14px 0 0; color: var(--vermilion-deep); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
/* Stack earlier: at ~768–900px the three cards squeezed a 25px headline into
 * three lines. One column keeps each card's copy readable on tablets. */
@media (max-width: 900px) { .start-grid { grid-template-columns: 1fr; } .start-card { min-height: 190px; } }

/* Focused service detail surface */
.service-title-link, .service-price-link { color: inherit; text-decoration: none; }
.service-title-link:hover, .service-price-link:hover { color: var(--vermilion-deep); }
.service-price-link { display: block; }
.service-detail-hero { min-height: 500px; display: grid; align-items: center; padding-top: clamp(54px, 8vw, 110px); }
.service-detail-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); align-items: center; gap: clamp(32px, 7vw, 100px); }
.service-detail-hero h1 { max-width: 760px; margin: 18px 0 22px; font-size: clamp(44px, 6vw, 78px); line-height: .98; }
.service-detail-lead { max-width: 56ch; color: var(--stone); font-family: var(--font-display); font-size: clamp(18px, 2vw, 23px); }
.service-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.service-detail-summary { padding: 26px; border: 1px solid var(--cotton); background: rgba(255,253,248,.78); box-shadow: var(--shadow-sm); }
.service-detail-summary dl { display: grid; gap: 18px; margin: 24px 0 0; }
.service-detail-summary dl div { padding-bottom: 15px; border-bottom: 1px solid var(--cotton); }
.service-detail-summary dt { color: var(--stone); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.service-detail-summary dd { margin: 5px 0 0; font-size: 15px; font-weight: 700; }
.service-token-link { color: var(--copper); text-decoration: underline; text-decoration-color: rgba(193, 116, 73, .42); text-underline-offset: 3px; }
.service-token-link:hover { color: var(--copper-hover); }
.detail-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 28px; }
.detail-steps > div { padding-top: 12px; border-top: 1px solid var(--vermilion); }
.detail-steps b { color: var(--vermilion); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; }
.detail-steps h3 { margin: 20px 0 8px; font-size: 22px; }
.detail-steps p { color: var(--stone); font-size: 14px; }
@media (max-width: 760px) { .service-detail-grid, .detail-steps { grid-template-columns: 1fr; } .service-detail-hero { min-height: 0; } .service-detail-summary { margin-top: 8px; } }

/* Email-login (redeem.php) step-2 fields — same [hidden] trap as .chat-gate
 * below: .field is `display:grid` and .btn--block is `display:flex`, both of
 * which beat the UA sheet's [hidden] rule, so the OTP step showed immediately
 * instead of after "Send OTP". */
#email-login-step-email[hidden], #email-send-btn[hidden],
#email-login-step-otp[hidden], #email-verify-btn[hidden], #email-resend-btn[hidden] { display: none; }

/* chat context gate — shown when no chart is selected */
/* [hidden] is only display:none in the UA sheet, so any author `display` wins.
 * Without this the gate stayed visible next to a rail that already named the
 * selected kundli — the page contradicted itself. */
.chat-gate[hidden] { display: none; }
.chat-gate { margin-top: 26px; display: grid; gap: 13px; justify-items: center; }
.chat-gate__note { margin: 0; font-size: 13.5px; color: var(--brass-text); }
.chat-gate__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ==========================================================================
   Devanagari typography — the website's own tuning
   ==========================================================================
   The site ships a deliberate Hindi type scale keyed on <body class="lang-hi">
   (reduced tracking, tighter leading chosen per heading level, so matras stay
   attached to their base and lines do not collide). The app never set that
   class, so not one of those rules applied and Hindi fell back to the Latin
   scale — which is what made the matras crowd each other.

   Copied from public/assets/css/home.css, synced 2026-08-18. Keep in step with
   the site when its Hindi scale changes.
   ========================================================================== */

body.lang-hi {
    font-family: "Nirmala UI", "Kohinoor Devanagari", Mangal, sans-serif;
}

.lang-hi h1,
.lang-hi h2,
.lang-hi h3 {
    font-family: "Nirmala UI", "Kohinoor Devanagari", Mangal, sans-serif;
    font-weight: 500;
}

.lang-hi .hero-copy h1 {
    font-size: clamp(45px, 5vw, 82px);
    letter-spacing: -.035em;
    line-height: 1.08;
}

.lang-hi .hero-copy h1 em {
    font-style: normal;
}

.lang-hi .hero-lead {
    font-family: "Nirmala UI", Mangal, sans-serif;
}

.lang-hi .section-heading h2,
.lang-hi .prepare h2,
.lang-hi .deliverable h2,
.lang-hi .lineage h2,
.lang-hi .services h2,
.lang-hi .knowledge h2 {
    letter-spacing: -.025em;
    line-height: 1.18;
}

.lang-hi .section-heading--split > p:last-child {
    font-family: "Nirmala UI", Mangal, sans-serif;
}

.lang-hi .candidate-note {
    font-family: "Nirmala UI", Mangal, sans-serif;
}

.lang-hi .method-heading h2 {
    line-height: 1.17;
}

.lang-hi .method-step strong {
    font-family: "Nirmala UI", Mangal, sans-serif;
}

.lang-hi .deliverable-copy > p:not(.eyebrow) {
    font-family: "Nirmala UI", Mangal, sans-serif;
}

.lang-hi .lineage-copy > p:not(.eyebrow) {
    font-family: "Nirmala UI", Mangal, sans-serif;
}

.lang-hi .lineage-copy blockquote {
    font-family: "Nirmala UI", Mangal, sans-serif;
    font-style: normal;
}

.lang-hi .handoff h2 {
    line-height: 1.16;
}

.lang-hi .handoff-inner > p:not(.eyebrow) {
    font-family: "Nirmala UI", Mangal, sans-serif;
}

.lang-hi .knowledge-heading > p {
    font-family: "Nirmala UI", Mangal, sans-serif;
}

.lang-hi .final-invitation p {
    font-family: "Nirmala UI", Mangal, sans-serif;
}

.lang-hi .final-invitation h2 {
    font-style: normal;
    line-height: 1.15;
}

@media (max-width: 680px) {
    .lang-hi .hero-copy h1 {
        font-size: clamp(39px, 11vw, 54px);
        line-height: 1.13;
    }
    .lang-hi .section-heading h2,
    .lang-hi .prepare h2,
    .lang-hi .deliverable h2,
    .lang-hi .lineage h2,
    .lang-hi .services h2,
    .lang-hi .knowledge h2 {
        font-size: clamp(34px, 9.5vw, 48px);
        line-height: 1.22;
    }
    .lang-hi .method-heading h2 {
        font-size: clamp(37px, 10vw, 50px);
    }
    .lang-hi .handoff h2 {
        font-size: clamp(38px, 10vw, 52px);
    }
}

/* ==========================================================================
   Sol56 product shell
   The Kundli AI product has its own identity and navigation. It deliberately
   does not mirror the main website header, so visitors always know whether
   they are browsing the editorial site or working inside the AI application.
   ========================================================================== */
.ai-shell-header {
    position: sticky;
    top: 0;
    z-index: 90;
    flex: 0 0 auto;
    color: var(--conch);
    background:
        radial-gradient(circle at 9% -80%, rgba(208, 151, 73, .24), transparent 34%),
        linear-gradient(118deg, #082f33 0%, #0d3c40 56%, #102d2f 100%);
    border-bottom: 1px solid rgba(228, 215, 197, .22);
    box-shadow: 0 10px 30px rgba(8, 32, 34, .18);
}
.ai-shell-header__inner {
    width: min(1480px, calc(100% - 56px));
    min-height: 76px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 48px);
}
.ai-shell-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
    color: var(--conch);
    text-decoration: none;
}
.ai-shell-brand:hover { color: #fff; text-decoration: none; }
.ai-shell-brand__mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 6px;
    border: 1px solid rgba(226, 173, 89, .48);
    border-radius: 50%;
    background: rgba(255, 252, 246, .96);
    box-shadow: 0 13px 30px rgba(0, 0, 0, .17);
}
.ai-shell-brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.ai-shell-brand__copy { display: grid; gap: 1px; }
.ai-shell-brand__wordmark {
    display: block;
    width: clamp(180px, 16vw, 218px);
    min-width: 0;
    line-height: 0;
}
.ai-shell-brand__wordmark > img { display: block; width: 100%; height: auto; }
.ai-shell-brand__copy strong {
    color: #fff8e9;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .12em;
    line-height: 1.25;
}
.ai-shell-brand__copy small {
    color: rgba(251, 248, 240, .66);
    font-size: 10px;
    letter-spacing: .04em;
    line-height: 1.25;
}
.ai-shell-nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 4px;
    min-width: 0;
}
.ai-shell-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    color: rgba(251, 248, 240, .76);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}
.ai-shell-nav a::after {
    position: absolute;
    right: 13px;
    bottom: 0;
    left: 13px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #d79652;
    content: "";
    opacity: 0;
    transform: scaleX(.4);
    transition: opacity .2s ease, transform .2s ease;
}
.ai-shell-nav a:hover,
.ai-shell-nav a.is-active { color: #fff8e9; text-decoration: none; }
.ai-shell-nav a:hover::after,
.ai-shell-nav a.is-active::after { opacity: 1; transform: scaleX(1); }
.ai-shell-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    margin-left: auto;
}
.ai-token-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid rgba(226, 173, 89, .38);
    border-radius: 999px;
    color: #ffe4b8;
    background: rgba(255, 253, 248, .07);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
}
.ai-token-status:hover { color: #fff; border-color: rgba(226, 173, 89, .72); text-decoration: none; }
.ai-token-status strong {
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    padding-inline: 6px;
    place-items: center;
    border-radius: 999px;
    color: #12383a;
    background: #f0c57d;
    font-family: var(--font-mono);
    font-size: 11px;
}
.ai-language-switch {
    display: inline-flex;
    padding: 3px;
    border: 1px solid rgba(251, 248, 240, .2);
    border-radius: 999px;
}
.ai-language-switch a {
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 999px;
    color: rgba(251, 248, 240, .72);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}
.ai-language-switch a[aria-current="true"] { color: var(--peacock-deep); background: #fff4df; }
.ai-main-site-link {
    color: rgba(251, 248, 240, .76);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.ai-main-site-link:hover { color: #fff; text-decoration: none; }
.ai-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 1px solid rgba(251, 248, 240, .24);
    border-radius: 10px;
    background: transparent;
}
.ai-menu-toggle i {
    display: block;
    width: 100%;
    height: 1.5px;
    margin: 4px 0;
    background: var(--conch);
}
.ai-mobile-menu {
    position: absolute;
    top: 100%;
    right: 14px;
    left: 14px;
    max-height: calc(100dvh - 88px);
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(228, 215, 197, .35);
    border-radius: 0 0 16px 16px;
    background: #0b3336;
    box-shadow: 0 25px 60px rgba(5, 25, 27, .34);
}
.ai-mobile-menu nav { display: grid; }
.ai-mobile-menu a {
    display: grid;
    gap: 2px;
    padding: 12px 13px;
    border-bottom: 1px solid rgba(251, 248, 240, .1);
    color: #fff8e9;
    text-decoration: none;
}
.ai-mobile-menu a[aria-current="page"] { border-radius: 9px; color: #fff; background: rgba(226, 173, 89, .12); }
.ai-mobile-menu a small { color: rgba(251, 248, 240, .58); font-size: 11px; }
.ai-mobile-menu .ai-mobile-menu__site { margin-top: 8px; border: 0; color: #f0c57d; }
.ai-footer-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    color: #f8e6c5;
}
.ai-footer-brand__wordmark { display: block; width: clamp(240px, 24vw, 300px); line-height: 0; }
.ai-footer-brand__wordmark > img { display: block; width: 100%; height: auto; }
.ai-footer-brand strong {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: .13em;
}
.ai-footer-brand small { color: rgba(251, 248, 240, .55); font-size: 11px; }

.app-main { padding-top: var(--header-height); }
.hero {
    min-height: min(760px, calc(100svh - var(--header-height)));
    justify-content: flex-start;
    padding-top: clamp(54px, 6vw, 86px);
}
.hero-copy h1 { font-size: clamp(50px, 5.2vw, 80px); }
.hero-copy .eyebrow { margin-bottom: 24px; }
.hero-foot { margin-top: clamp(42px, 6vh, 72px); }
body.is-chat-app .app-main { padding-top: 0; }

/* Landing hero fits one desktop viewport — the live-sky trust foot must clear the
   fold (browser chrome + OS taskbar). Vertical rhythm only; the brand headline,
   orbit and copy are untouched. On <~1440-tall screens the orbit alone exceeds
   the fold, the same limit as the main-site hero. */
@media (min-width: 961px) {
    .hero { padding-top: clamp(36px, 3.4vw, 60px); }
    .hero .hero-copy .eyebrow { margin-bottom: 18px; }
    .hero .hero-eyebrow { margin-bottom: 16px; }
    .hero .hero-brand-promise.hero-tagline { margin-bottom: 18px; }
    .hero .hero-lead { margin-bottom: 22px; }
    .hero-foot { margin-top: clamp(28px, 4vh, 44px); }
}

/* App links use the main website's exact header primitives. Only state and
 * dynamic token content are app-specific; surfaces, spacing and typography
 * remain owned by site-chrome.css. */
.ai-product-nav a.is-active { color: var(--vermilion-deep); }
.ai-product-nav a.is-active::after { right: 0; left: 0; }
.ai-nav-ask {
    position: relative;
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    gap: 9px;
    overflow: hidden;
    padding: 6px 13px 6px 7px;
    border: 1px solid rgba(224, 172, 115, .72);
    border-radius: 999px;
    color: var(--white) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .18), transparent 38%), linear-gradient(135deg, #21686a 0%, #10464c 48%, #082930 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .32), 0 16px 28px rgba(13, 51, 54, .28);
    transform: translateY(-2px);
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .025em !important;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.ai-nav-ask::before {
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -35%;
    z-index: 0;
    width: 28%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .56), transparent);
    content: "";
    transform: translateX(-240%) skewX(-18deg);
    transition: transform .8s var(--ease);
}
.ai-nav-ask::after { display: none; }
.ai-nav-ask__orb,
.ai-nav-ask__copy,
.ai-nav-ask__arrow { position: relative; z-index: 1; }
.ai-nav-ask__orb {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border: 1px solid rgba(255, 246, 210, .78);
    border-radius: 50%;
    color: #fff6d2;
    background: radial-gradient(circle at 31% 25%, #fff8d8 0 7%, #e0b867 17%, #a45f43 38%, #194750 67%, #061d27 100%);
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, .62), inset -5px -5px 9px rgba(0, 0, 0, .38), 0 0 0 2px rgba(224, 172, 115, .16), 0 0 16px rgba(224, 172, 115, .38);
    font-size: 14px;
    line-height: 1;
}
.ai-nav-ask__orb::after { position: absolute; top: 5px; left: 7px; width: 6px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .74); content: ""; filter: blur(1px); }
.ai-nav-ask__copy { display: grid; gap: 2px; line-height: 1; }
.ai-nav-ask__copy small { color: rgba(255, 246, 210, .72); font-family: var(--data); font-size: 8px; font-weight: 700; letter-spacing: .15em; line-height: 1; text-transform: uppercase; }
.ai-nav-ask__copy > span { color: var(--white); line-height: 1.1; }
.ai-nav-ask__arrow { color: #f0c57d; font-size: 15px; line-height: 1; transition: transform .25s ease; }
.ai-nav-ask:hover,
.ai-nav-ask:focus-visible,
.ai-nav-ask.is-active {
    color: var(--white) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .22), transparent 38%), linear-gradient(135deg, #2b7b7b 0%, #14555a 48%, #0a3038 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), inset 0 -3px 0 rgba(0, 0, 0, .28), 0 20px 36px rgba(13, 51, 54, .34), 0 0 0 4px rgba(224, 172, 115, .12);
    transform: translateY(-5px) scale(1.02);
}
.ai-nav-ask:hover::before,
.ai-nav-ask:focus-visible::before { transform: translateX(520%) skewX(-18deg); }
.ai-nav-ask:hover .ai-nav-ask__arrow,
.ai-nav-ask:focus-visible .ai-nav-ask__arrow { transform: translate(2px, -2px); }
 .ai-nav-ask:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28), 0 4px 10px rgba(13, 51, 54, .24); transform: translateY(2px); }
.ai-nav-ask:focus-visible { outline: 3px solid var(--brass); outline-offset: 4px; }
.ai-header-token {
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 6px 8px 6px 13px;
    border: 1px solid rgba(160, 112, 48, .45);
    border-radius: 999px;
    color: var(--peacock-deep);
    background: linear-gradient(135deg, rgba(255, 250, 239, .92), rgba(240, 197, 125, .42));
    border-top-width: 2px;
    border-bottom-width: 3px;
    box-shadow: none;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.ai-header-token:hover,
.ai-header-token:focus-visible {
    border-color: var(--vermilion);
    color: var(--peacock-deep);
    background: linear-gradient(135deg, rgba(255, 252, 246, .98), rgba(211, 155, 100, .58));
    box-shadow: none;
    transform: translateY(-1px);
}
.ai-header-token [data-global-token-label] {
    color: var(--peacock-deep);
    font-size: 11px;
    letter-spacing: .04em;
}
.ai-header-token strong {
    display: inline-grid;
    min-width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding-inline: 7px;
    border: 0;
    border-radius: 50%;
    color: #12383a;
    background: #f0c57d;
    font-family: var(--data);
    font-size: 11px;
    text-align: center;
}
.ai-header-token strong[hidden] { display: none; }
.ai-language-switch-single a { min-width: 48px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
    .ai-nav-ask::before { transition: none; }
    .ai-nav-ask,
    .ai-nav-ask__arrow,
    .ai-header-token { transition: none; }
}

@media (max-width: 1180px) {
    .header-link-action--main { display: none; }
    .ai-shell-brand__copy small { display: none; }
    .ai-shell-header__inner { width: min(100% - 32px, 1480px); gap: 18px; }
    .ai-shell-nav a { padding-inline: 9px; font-size: 12px; }
}
@media (max-width: 900px) {
    .ai-shell-nav,
    .ai-main-site-link { display: none; }
    .ai-menu-toggle { display: block; }
}
@media (max-width: 600px) {
    :root { --header-height: 68px; }
    .ai-shell-header__inner { min-height: 68px; width: calc(100% - 24px); gap: 10px; }
    .ai-shell-brand__mark { width: 39px; height: 39px; padding: 5px; }
    .ai-shell-brand__wordmark { width: clamp(142px, 42vw, 174px); }
    .ai-footer-brand__wordmark { width: min(68vw, 260px); }
    .ai-shell-brand__copy strong { max-width: 122px; font-size: 11px; letter-spacing: .08em; }
    .ai-shell-brand__copy small,
    .ai-token-status [data-global-token-label] { display: none; }
    .ai-token-status { min-width: 38px; justify-content: center; padding-inline: 8px; }
    .ai-token-status strong { min-width: 21px; height: 21px; }
    .ai-shell-actions { gap: 7px; }
    .hero { min-height: 0; padding-top: 44px; }
    .hero-copy h1 { font-size: clamp(42px, 12.5vw, 58px); }
}

/* Test-mode notice: a simulated payment must never be mistaken for a sale. */
.sandbox-note {
    margin: 0 0 16px;
    padding: 11px 13px;
    border: 1px solid var(--warn);
    border-left-width: 3px;
    border-radius: 8px;
    background: var(--warn-soft);
    color: var(--brass-text);
    font-size: 12.5px;
    line-height: 1.55;
}
.sandbox-note b { display: block; margin-bottom: 3px; color: var(--bad); }

/* ========================================================================== 
   Guided kundli journey
   The old product-card catalog was intentionally replaced by one linear,
   verifiable customer path. Specialist tools remain secondary text links.
   ========================================================================== */
.journey-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(70px, 9vw, 126px);
    color: var(--conch);
    background:
        radial-gradient(circle at 82% 20%, rgba(219, 157, 81, .17), transparent 27%),
        linear-gradient(122deg, #092f32 0%, #0d3d40 58%, #102b2d 100%);
}
.journey-hero::after {
    position: absolute;
    top: -18vw;
    right: -10vw;
    width: min(54vw, 760px);
    aspect-ratio: 1;
    border: 1px solid rgba(240, 197, 125, .14);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 70px rgba(240, 197, 125, .025), 0 0 0 150px rgba(240, 197, 125, .018);
    pointer-events: none;
}
.journey-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr);
    gap: clamp(42px, 8vw, 120px);
    align-items: end;
}
.journey-hero h1 {
    max-width: 11ch;
    margin-bottom: 24px;
    color: #fff8e9;
    font-size: clamp(50px, 6.4vw, 94px);
    line-height: .97;
    letter-spacing: -.035em;
}
.journey-hero .hero-lead { max-width: 72ch; color: rgba(251, 248, 240, .76); }
.journey-hero .hero-ctas { margin-top: 30px; }
.journey-hero .btn--secondary { color: #fff8e9; border-color: rgba(251, 248, 240, .38); background: rgba(255,255,255,.04); }
.journey-promise {
    display: grid;
    gap: 8px;
    padding: 8px 0 12px 28px;
    border-left: 1px solid rgba(240, 197, 125, .46);
}
.journey-promise span,
.journey-step__status {
    color: #e9b96e;
    font-family: var(--font-mono);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .13em;
}
.journey-promise strong { color: #fff8e9; font-family: var(--font-display); font-size: 21px; line-height: 1.25; }
.journey-promise i { width: 100%; height: 1px; margin-block: 12px; background: rgba(251, 248, 240, .16); }
.journey-promise small { margin-top: 6px; color: rgba(251, 248, 240, .58); }

.journey-section { padding-block: clamp(70px, 9vw, 120px); }
.journey-section > .container > h2 { max-width: 18ch; }
.journey-rail { margin-top: clamp(42px, 6vw, 76px); border-top: 1px solid var(--sand); }
.journey-step {
    display: grid;
    grid-template-columns: 110px minmax(0, 1.35fr) minmax(230px, .65fr);
    gap: clamp(22px, 4vw, 58px);
    align-items: start;
    padding-block: clamp(38px, 5vw, 66px);
    border-bottom: 1px solid var(--sand);
}
.journey-step__number {
    color: rgba(138, 90, 48, .5);
    font-family: var(--font-display);
    font-size: clamp(44px, 5vw, 72px);
    line-height: .9;
}
.journey-step__body h3 { margin: 10px 0 13px; font-size: clamp(27px, 3vw, 42px); }
.journey-step__body p { max-width: 66ch; margin: 0; color: var(--stone); font-size: 16px; line-height: 1.75; }
.journey-step__action {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--copper);
    color: var(--copper-hover);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}
.journey-step__action:hover { gap: 18px; color: var(--vermilion); border-color: var(--vermilion); text-decoration: none; }
.journey-step__evidence { display: grid; gap: 0; margin: 2px 0 0; padding: 0; list-style: none; }
.journey-step__evidence li { position: relative; padding: 12px 0 12px 24px; border-bottom: 1px solid rgba(203, 188, 167, .7); color: var(--stone); font-size: 13px; }
.journey-step__evidence li::before { position: absolute; left: 1px; color: var(--good); content: "✓"; font-weight: 900; }
.journey-step--final .journey-step__number { color: var(--vermilion); }

.specialist-section { padding-block: clamp(56px, 7vw, 84px); }
.specialist-heading { display: grid; grid-template-columns: 1fr minmax(280px, .7fr); gap: clamp(35px, 8vw, 120px); align-items: end; }
.specialist-heading h2 { max-width: 19ch; }
.specialist-heading > p { max-width: 57ch; margin: 0 0 5px; color: var(--stone); line-height: 1.7; }
.service-groups { display: grid; gap: clamp(34px, 5vw, 54px); margin-top: clamp(36px, 5vw, 58px); }
.service-group { min-width: 0; }
.service-group__heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; padding-bottom: 9px; border-bottom: 1px solid var(--cotton); }
.service-group__heading .eyebrow { margin: 0; color: var(--copper-hover); }
.service-group__heading > span { color: var(--stone); font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.service-catalogue-grid { margin-top: clamp(36px, 5vw, 58px); }
.service-card-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.service-card {
    position: relative;
    display: grid;
    min-height: 154px;
    grid-template-rows: auto 1fr auto;
    gap: 8px;
    padding: 13px 13px 12px;
    overflow: hidden;
    border: 1px solid rgba(166, 106, 63, .25);
    border-radius: 14px;
    color: var(--ink);
    background: linear-gradient(145deg, rgba(255, 253, 248, .96), rgba(243, 235, 221, .72));
    box-shadow: 0 10px 0 rgba(23, 76, 80, .1), 0 18px 30px rgba(61, 45, 29, .08), inset 0 1px 0 rgba(255, 255, 255, .85);
    text-decoration: none;
    transform: translateY(0);
    transition: color .28s ease, border-color .28s ease, background-color .28s ease, box-shadow .28s ease, transform .28s var(--ease);
}
.service-card::before { position: absolute; top: 0; right: 17%; left: 17%; height: 2px; background: linear-gradient(90deg, transparent, var(--vermilion), transparent); content: ""; opacity: .6; }
.service-card::after { position: absolute; right: -30px; bottom: -50px; width: 140px; height: 140px; border: 1px solid rgba(166, 106, 63, .14); border-radius: 50%; content: ""; transition: transform .3s ease, border-color .3s ease; }
.service-card:hover,
.service-card:focus-visible {
    border-color: rgba(185, 74, 47, .58);
    color: var(--ink);
    background: linear-gradient(145deg, rgba(255, 253, 248, 1), rgba(248, 232, 202, .92));
    box-shadow: 0 6px 0 rgba(23, 76, 80, .17), 0 22px 42px rgba(61, 45, 29, .14), inset 0 1px 0 #fff;
    text-decoration: none;
    transform: translateY(-6px);
}
.service-card:hover::after,
.service-card:focus-visible::after { border-color: rgba(185, 74, 47, .3); transform: scale(1.18); }
.service-card__number { color: var(--copper-hover); font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.service-card__category { position: relative; z-index: 1; overflow: hidden; color: var(--stone); font-family: var(--font-mono); font-size: 8px; font-weight: 800; letter-spacing: .08em; line-height: 1.15; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.service-card__body { position: relative; z-index: 1; display: grid; align-content: start; gap: 6px; }
.service-card__body b { max-width: 17ch; font-family: var(--font-display); font-size: clamp(15px, 1.18vw, 19px); line-height: 1.04; }
.service-card__body small { max-width: 36ch; color: var(--stone); font-size: 10px; line-height: 1.32; }
.service-card__action { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; color: var(--copper-hover); font-family: var(--font-mono); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.service-card__action > span { font-size: 16px; line-height: 1; transition: transform .25s ease; }
.service-card:hover .service-card__action > span,
.service-card:focus-visible .service-card__action > span { transform: translate(3px, -2px); }

.service-detail-view {
    margin-top: clamp(34px, 5vw, 58px);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.service-detail-view[hidden] { display: none; }
.service-detail-view.is-visible { opacity: 1; transform: translateY(0); }
.service-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 7px 0;
    border: 0;
    color: var(--copper-hover);
    background: transparent;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.service-detail-back:hover,
.service-detail-back:focus-visible { color: var(--vermilion); }
.service-detail-embedded {
    padding: clamp(24px, 4vw, 52px);
    border: 1px solid rgba(166, 106, 63, .22);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 253, 248, .98), rgba(243, 235, 221, .82));
    box-shadow: 0 18px 0 rgba(23, 76, 80, .08), 0 28px 60px rgba(61, 45, 29, .1), inset 0 1px 0 #fff;
}
.service-detail-embedded h2 { max-width: 18ch; margin: 18px 0 22px; font-size: clamp(42px, 5vw, 72px); line-height: .98; }
.service-detail-embedded .service-detail-lead { max-width: 56ch; color: var(--stone); font-family: var(--font-display); font-size: clamp(18px, 2vw, 23px); line-height: 1.45; }
.service-detail-embedded .service-detail-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.service-detail-process { margin-top: clamp(32px, 5vw, 58px); padding-top: clamp(25px, 4vw, 42px); border-top: 1px solid var(--cotton); }
.service-detail-process .eyebrow { margin-bottom: 24px; }

@media (prefers-reduced-motion: reduce) {
    .service-card,
    .service-card::after,
    .service-card__action > span,
    .service-detail-view { transition: none; }
    .service-card:hover,
    .service-card:focus-visible { transform: none; }
    .service-detail-view { transform: none; }
}

.journey-closing { padding-block: clamp(70px, 9vw, 116px); text-align: center; }
.journey-closing h2 { max-width: 22ch; margin-inline: auto; font-size: clamp(38px, 5vw, 68px); }
.journey-closing p { max-width: 62ch; margin: 18px auto 28px; color: rgba(251,248,240,.7); }
.journey-closing .eyebrow { color: #e9b96e; }
.journey-closing .btn--primary { color: #fff; }

@media (max-width: 900px) {
    .journey-hero__grid,
    .specialist-heading { grid-template-columns: 1fr; }
    .journey-promise { max-width: 560px; }
    .journey-step { grid-template-columns: 76px minmax(0, 1fr); }
    .journey-step__evidence { grid-column: 2; }
    .service-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .service-detail-embedded .service-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .journey-hero { padding-block: 54px 68px; }
    .journey-hero h1 { font-size: clamp(44px, 14vw, 64px); }
    .journey-promise { padding-left: 18px; }
    .journey-step { grid-template-columns: 1fr; gap: 17px; }
    .journey-step__number { font-size: 42px; }
    .journey-step__evidence { grid-column: 1; }
    .journey-step__body p { font-size: 15px; }
    .service-card-grid { grid-template-columns: 1fr; }
}

/* Landing-page proof, intentionally editorial rather than a service-card shop. */
.index-proof { padding-block: clamp(72px, 10vw, 128px); }
.index-proof__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr); gap: clamp(36px, 7vw, 110px); }
.index-proof h2 { max-width: 17ch; font-size: clamp(39px, 5vw, 70px); line-height: 1.04; }
.index-proof__copy { align-self: end; }
.index-proof__copy p { margin: 0 0 24px; color: var(--stone); font-size: 16px; line-height: 1.75; }
.index-proof__facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); margin: clamp(28px, 5vw, 66px) 0 0; border-top: 1px solid var(--sand); }
.index-proof__facts div { padding: 25px clamp(18px, 3vw, 38px) 0 0; }
.index-proof__facts div + div { padding-left: clamp(18px, 3vw, 38px); border-left: 1px solid var(--sand); }
.index-proof__facts dt { color: var(--copper); font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.index-proof__facts dd { margin: 9px 0 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(19px, 2vw, 27px); line-height: 1.25; }
.index-method { padding-block: clamp(72px, 9vw, 116px); }
.index-method h2 { max-width: 21ch; font-size: clamp(38px, 4.7vw, 64px); }
.index-method__line { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(24px, 5vw, 74px); align-items: center; margin-top: clamp(38px, 5vw, 68px); padding-block: 34px; border-block: 1px solid var(--cotton); }
.index-method__line > span { color: var(--vermilion); font-family: var(--font-display); font-size: 42px; }
.index-method__line p { display: grid; gap: 9px; margin: 0; }
.index-method__line b { font-family: var(--font-display); font-size: clamp(23px, 2.5vw, 34px); }
.index-method__line p span { color: var(--stone); font-size: 14px; line-height: 1.65; }
@media (max-width: 760px) {
    .index-proof__grid,
    .index-proof__facts { grid-template-columns: 1fr; }
    .index-proof__facts div + div { padding-left: 0; border-left: 0; }
    .index-proof__facts div { padding: 22px 0; border-bottom: 1px solid var(--sand); }
    .index-method__line { grid-template-columns: 1fr; }
    .index-method__line > span { transform: rotate(90deg); justify-self: start; font-size: 30px; }
}

/* ---------- AI Forecast live orb integration ----------
 * The AI landing page uses the supplied AngiraAIOrb component as its visual
 * identity, dressed in the same printed-instrument chrome the rest of the site
 * uses (.instrument-orbit, the vermilion axis nodes). The WebGL scene supplies
 * the moving sphere; the chrome and the calibration readouts are plain DOM, so
 * they stay razor sharp at any DPI, cost nothing on the GPU, and still render
 * if WebGL or the module CDN is unavailable. */
.hero-grid--ai {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    align-items: center;
    gap: clamp(24px, 3.4vw, 56px);
}
.hero-instrument.ai-core-instrument {
    width: min(100%, 680px);
    max-width: 100%;
    margin-inline: auto;
    /* The chrome and the readouts sit outside the square stage, so nothing here
       may clip them. The .hero section still bounds the page horizontally. */
    overflow: visible;
    aspect-ratio: auto;
}

/* ── Stage ────────────────────────────────────────────────────────────
 * One 1:1 box shared by the canvas, the chrome and the readouts, so every
 * printed mark stays concentric with the 3D scene at any width. */
.ai-core-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}
.ai-core-instrument .aj-ai-orb {
    width: 100%;
    max-width: none;
    min-width: 0;
}

/* ── Printed chrome ───────────────────────────────────────────────────
 * The bezel radius is derived, not eyeballed. The canvas bleeds --aj-orb-bleed
 * past the stage on each side and the renderer frames the scene to fill ~90.1%
 * of that canvas, so the orb's outermost calibration circle lands at
 * 0.901 x (1 + 2 x 0.09) = 1.063 stage widths -- i.e. 3.2% outside the stage on
 * each side. The bezel is pushed to 4.6% so it reads as the register *outside*
 * the sphere rather than fighting with it. Change --aj-orb-bleed and this
 * number moves with it. */
.ai-core-chrome {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.ai-core-chrome .instrument-orbit--outer {
    inset: -4.6%;
    border-color: rgba(166, 106, 63, .26);
}
.ai-core-axis {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(166, 106, 63, .14);
}
.ai-core-axis--h { width: 109.2%; height: 1px; }
.ai-core-axis--v { width: 1px; height: 62%; background: rgba(166, 106, 63, .09); }

/* Sighting line: the vermilion rule that drops from the upper right into the
   core, marking the reading the instrument is currently taking. */
.ai-core-sight {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ai-core-sight line {
    stroke: var(--vermilion);
    stroke-width: 1.15;
    opacity: .62;
}
.ai-core-sight circle {
    stroke: var(--vermilion);
    stroke-width: 1.15;
    fill: var(--conch);
    opacity: .75;
}

/* ── Calibration readouts ─────────────────────────────────────────────
 * Placed in the stage's empty corners, outside the sphere, in the same
 * monospaced register the rest of the site uses for computed figures. */
.ai-core-readout {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
.ai-core-readout__item {
    position: absolute;
    margin: 0;
    display: grid;
    gap: 2px;
    font-family: var(--font-mono);
    line-height: 1.25;
    white-space: nowrap;
}
.ai-core-readout__item span {
    color: var(--stone);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .82;
}
.ai-core-readout__item b {
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .045em;
}
/* A readout sits over the sphere's faint outer calibration circles, exactly as
   an annotation on a real instrument face does. The halo is the page ground
   colour, so the text stays crisp wherever a gold hairline passes behind it
   without introducing a visible plate. */
.ai-core-readout__item span,
.ai-core-readout__item b {
    text-shadow:
        0 0 4px var(--conch),
        0 0 8px var(--conch),
        0 0 12px var(--conch);
}
/* Leader rule pointing back at the instrument it annotates. */
.ai-core-readout__item span::after,
.ai-core-readout__item--zodiac span::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    vertical-align: middle;
    background: rgba(166, 106, 63, .42);
}
.ai-core-readout__item span::after { margin-left: 8px; }
.ai-core-readout__item--zodiac span::before { margin-right: 8px; }
.ai-core-readout__item--zodiac span::after { content: none; }

.ai-core-readout__item--ayanamsa { top: 8%; left: 0; }
.ai-core-readout__item--ayanamsa b { color: var(--vermilion-deep); }
.ai-core-readout__item--zodiac { top: 34%; right: -5%; text-align: right; justify-items: end; }
.ai-core-readout__item--node { top: 83%; left: 1%; }

.hero-instrument.ai-core-instrument > .ai-core-caption {
    position: static;
    max-width: 300px;
    margin: 14px 2% 0 auto;
    color: var(--stone);
    font-family: var(--font-display);
    font-size: 13px;
    font-style: italic;
    line-height: 1.45;
    text-align: right;
}

@media (max-width: 1100px) {
    .ai-core-readout__item span { font-size: 9px; letter-spacing: .13em; }
    .ai-core-readout__item b { font-size: 11.5px; }
    .ai-core-readout__item--zodiac { right: -2%; }
}
@media (max-width: 960px) {
    .hero-grid--ai {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .hero-instrument.ai-core-instrument {
        width: min(78vw, 560px);
    }
    .ai-core-readout__item--zodiac { right: -7%; }
}
@media (max-width: 680px) {
    .hero-instrument.ai-core-instrument {
        width: min(88vw, 440px);
    }
    /* Below this width the corners are too small to hold three readouts without
       crowding the sphere, so only the calibration figure -- the one that
       carries information -- is kept. */
    .ai-core-readout__item--zodiac,
    .ai-core-readout__item--node { display: none; }
    .ai-core-readout__item--ayanamsa { top: 4%; }
    .ai-core-axis--v { display: none; }
    .hero-instrument.ai-core-instrument > .ai-core-caption {
        max-width: 240px;
        margin-top: 10px;
        margin-right: 0;
        font-size: 12px;
    }
}
@media (prefers-reduced-motion: no-preference) {
    .ai-core-sight line {
        animation: ai-core-sight-in 1100ms var(--ease) both 260ms;
    }
}
@keyframes ai-core-sight-in {
    from { opacity: 0; stroke-dasharray: 0 100; }
    to { opacity: .62; stroke-dasharray: 100 0; }
}
/* ---------- Orbit luxury hero (additive; do not remove older ai-core-* rules) ---------- */
.hero-instrument.ai-core-instrument {
    width: min(100%, 720px);
}

.ai-core-stage {
    filter: drop-shadow(0 28px 48px rgba(61, 45, 29, 0.08));
}

.hero-instrument.ai-core-instrument > .ai-core-caption {
    max-width: 34ch;
    margin-top: 16px;
    color: var(--stone);
    letter-spacing: 0.01em;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--stone);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
}

.hero-trust__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--brass);
}

@media (max-width: 960px) {
    .hero-instrument.ai-core-instrument {
        width: min(82vw, 580px);
    }
}

@media (max-width: 680px) {
    .hero-instrument.ai-core-instrument {
        width: min(92vw, 460px);
    }
    .hero-trust {
        gap: 12px 18px;
    }
    .hero-trust li {
        font-size: 10px;
        letter-spacing: 0.08em;
    }
}

/* ---------- Angira Orbit instrument (additive; old ai-core-* kept) ----------
 * Layout numbers mirror the previous instrument so the hero rhythm is
 * unchanged; only the object inside is now the honest KP yantra. */
.hero-instrument.aj-orbit-instrument {
    width: min(100%, 640px);
    max-width: 100%;
    margin-inline: auto;
    overflow: visible;
    aspect-ratio: auto;
}

.aj-orbit-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Contact shadow is painted by canvas _drawShadow.
       A CSS filter here rasterizes hairlines and becomes a
       containing block for position:fixed (the degree card). */
}

.hero-instrument.aj-orbit-instrument > .aj-orbit-caption {
    position: static;
    max-width: 34ch;
    margin: 16px 2% 0 auto;
    color: var(--stone);
    font-family: var(--font-display);
    font-size: 13px;
    font-style: italic;
    line-height: 1.45;
    text-align: right;
    letter-spacing: 0.01em;
}

@media (min-width: 961px) {
    .hero-grid--ai + .hero-foot { margin-top: clamp(22px, 3vh, 40px); }
}

@media (min-width: 1221px) {
    .hero-instrument.aj-orbit-instrument { width: min(100%, 580px); }
}
@media (min-width: 961px) and (max-width: 1220px) {
    .hero-instrument.aj-orbit-instrument { width: min(100%, 540px); }
}
@media (max-width: 960px) {
    .hero-instrument.aj-orbit-instrument { width: min(78vw, 520px); }
}
@media (max-width: 680px) {
    .hero-instrument.aj-orbit-instrument { width: min(88vw, 420px); }
    .hero-instrument.aj-orbit-instrument > .aj-orbit-caption {
        max-width: 240px;
        margin-right: 0;
        font-size: 12px;
    }
}
@media (max-width: 380px) {
    .hero-instrument.aj-orbit-instrument { width: min(92vw, 360px); }
}