/* ============================================================
 *  AstroSutra — Numerology UI
 *  COMPLETE REDESIGN. Not a tweak of the previous stylesheet.
 *
 *  What was wrong before, so it does not come back:
 *
 *  1. Everything was ONE VERTICAL LIST capped at 940px. On a wide
 *     dashboard that left a third of the screen empty on the right
 *     while the content itself felt cramped and endless. The cap
 *     is gone — the layout is now a responsive CARD GRID that
 *     fills whatever width the dashboard gives it and reflows to
 *     one column on a phone.
 *
 *  2. style.css sets `h4 { text-transform: uppercase }` and
 *     `h1..h5 { font-family: display }`. Setting font-size alone
 *     did nothing about the shouting caps. Section 1 resets that
 *     explicitly for every numerology surface.
 *
 *  3. Rows used `justify-content: space-between`, so a label sat
 *     far left and its value far right with hundreds of pixels of
 *     nothing between. Rows are now grids inside bounded cards.
 *
 *  The type scale is defined ONCE in section 0 and nothing below
 *  invents its own size. That is what keeps it from going back to
 *  "kahin chota kahin bada".
 * ============================================================ */

/* ============================================================
   0 · SCALE — the single source of truth for every size here
   ============================================================ */
.num-wrap,
.num-panel,
.num-report {
    --nu-card-min: 340px;   /* narrowest a grid card may get before reflow */
    --nu-gap: 16px;

    --nu-h1: 1.35rem;       /* hero / report title            */
    --nu-h2: 0.98rem;       /* card header                    */
    --nu-h3: 0.76rem;       /* sub-heading inside a card       */
    --nu-body: 0.9rem;      /* paragraphs and values           */
    --nu-small: 0.8rem;     /* labels                          */
    --nu-tiny: 0.69rem;     /* chips, meta, captions           */

    --nu-line: rgba(255, 255, 255, 0.07);
    --nu-gold: var(--c-gold-bright, #f4d676);
    --nu-good: #7fd39c;
    --nu-bad:  #e59a9a;
}

/* ============================================================
   1 · RESET the inherited heading treatment
   ============================================================ */
.num-wrap h1, .num-wrap h2, .num-wrap h3, .num-wrap h4, .num-wrap h5, .num-wrap h6,
.num-panel h1, .num-panel h2, .num-panel h3, .num-panel h4, .num-panel h5,
.num-report h1, .num-report h2, .num-report h3, .num-report h4, .num-report h5,
.num-reading h3, .num-reading h4, .num-reading h5,
.num-report-saved h2, .num-report-saved h3, .num-report-saved h4, .num-report-saved h5 {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

/* ============================================================
   2 · THE FORM PANEL
   Fields sit in a grid so the page is not one tall column of
   full-width inputs.
   ============================================================ */
.num-panel { max-width: none; }

.num-note {
    max-width: 1000px;   /* aligned with the form card beneath it */
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(135deg, rgba(212,175,55,0.07), rgba(212,175,55,0.015));
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 0 20px;
    color: var(--c-text-soft);
    font-size: var(--nu-small, 0.8rem);
    line-height: 1.6;
    text-align: left;
}
.num-note > i    { color: var(--nu-gold, #f4d676); margin-top: 3px; flex: 0 0 auto; font-size: 0.8rem; }
.num-note > span { flex: 1 1 auto; min-width: 0; }
.num-note strong { color: var(--nu-gold, #f4d676); font-weight: 600; }

.num-form-grid {
    display: grid;
    /* TWO fixed columns, not auto-fit. auto-fit sized as many 260px tracks as
       the container allowed — three or four on a wide page — and because the
       full-width divider on a tool like Compatibility occupies every track,
       auto-fit could not collapse the unused one. The result was two fields
       filling the left half and a dead track on the right. Two explicit
       columns always fill the row. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 26px;
    align-items: start;
}
/* A lone TRAILING field spans rather than sitting in a half-empty row.
   :not(:first-child) keeps a single-field form (Mulank, Lo Shu, Lucky) out
   of it — one date input stretched across the whole row looks like a mistake,
   not a design. */
.num-form-grid > .form-group:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }

/* The FORM is bounded; the RESULT is not. A form wants a comfortable filling
   width — a date field 750px wide reads as broken — while the result grid
   genuinely benefits from every pixel the page can give it. */
.num-panel > .panel { max-width: 1000px; }

@media (max-width: 760px) {
    .num-form-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.num-form-grid .form-group { margin-bottom: 14px; }
.num-form-wide { grid-column: 1 / -1; }
.num-form-actions {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--nu-line);
}
.num-form-actions .btn { flex: 0 0 auto; }
.num-form-hint { font-size: var(--nu-small); color: var(--c-text-muted); }

/* ============================================================
   3 · THE HERO — key numbers across the FULL width
   ============================================================ */
.num-wrap { display: block; }

.num-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--c-border-strong);
    border-radius: 16px;
    background:
        radial-gradient(120% 160% at 12% 0%, rgba(139,107,191,0.18), transparent 60%),
        linear-gradient(135deg, rgba(212,175,55,0.08), rgba(212,175,55,0.015));
    padding: 22px 26px;
    margin-bottom: var(--nu-gap);
}
.num-hero-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.num-hero-eyebrow {
    font-size: var(--nu-tiny); letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--c-text-muted); display: block; margin-bottom: 6px;
}
.num-hero h2 {
    font-family: var(--f-display, serif);
    font-style: italic; font-weight: 400;
    font-size: var(--nu-h1); color: var(--nu-gold);
    margin: 0; line-height: 1.25;
}
.num-hero-badge {
    flex: 0 0 auto;
    font-size: var(--nu-tiny); letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--nu-gold);
    border: 1px solid rgba(212,175,55,0.32);
    background: rgba(212,175,55,0.08);
    border-radius: 100px; padding: 5px 13px; white-space: nowrap;
}

/* The big numbers, laid out horizontally so they use the width. */
.num-hero-nums {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 14px;
}
.num-orb {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 4px;
}
.num-orb-ring {
    width: 86px; height: 86px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(212,175,55,0.38);
    background: radial-gradient(circle at 50% 35%, rgba(212,175,55,0.20), rgba(212,175,55,0.03) 70%);
    box-shadow: inset 0 0 22px rgba(212,175,55,0.10);
}
.num-orb-val {
    font-family: var(--f-display, serif);
    font-size: 2.3rem; font-weight: 600; line-height: 1;
    color: var(--nu-gold);
}
.num-orb-label {
    font-size: var(--nu-tiny); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--c-text-muted);
}
.num-orb-planet {
    font-family: var(--f-display, serif); font-style: italic;
    font-size: var(--nu-small); color: var(--c-text); line-height: 1.3;
}
.num-orb-sub { font-size: var(--nu-tiny); color: var(--c-text-muted); }

/* Verdict, when a tool has one — sits inside the hero. */
.num-hero-verdict {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 18px;
    border-top: 1px solid var(--nu-line);
}
.num-verdict-main { min-width: 0; }
.num-verdict-label {
    display: block; font-size: 0.62rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 3px;
}
.num-verdict-text {
    font-family: var(--f-display, serif); font-size: 1.1rem;
    font-weight: 500; color: var(--c-text);
}
.num-verdict-good .num-verdict-text { color: var(--nu-good); }
.num-verdict-mid  .num-verdict-text { color: var(--nu-gold); }
.num-verdict-bad  .num-verdict-text { color: var(--nu-bad); }
.num-verdict-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: var(--nu-tiny); color: var(--c-text-muted); }
.num-verdict-meta span { display: inline-flex; align-items: center; gap: 5px; }

/* ============================================================
   4 · THE CARD GRID — this is what fills the page width
   ============================================================ */
.num-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--nu-card-min), 1fr));
    gap: var(--nu-gap);
    /* stretch, NOT start. With `start` a four-row card sat beside a one-line
       card and the row ended in a ragged step — which is most of what still
       read as "messed up". Equal-height cards make the grid read as a grid. */
    align-items: stretch;
}
.num-grid-layout > .num-c { height: 100%; }
/* Cards that need room: tables, letter breakdowns, the Lo Shu pair. */
.num-c-wide { grid-column: span 2; }
.num-c-full { grid-column: 1 / -1; }

.num-c {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    overflow: hidden;
    display: flex; flex-direction: column;
    min-width: 0;
}
.num-c-head {
    display: flex; align-items: center; gap: 9px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--nu-line);
    background: rgba(255,255,255,0.018);
}
.num-c-head i {
    flex: 0 0 auto; width: 18px; text-align: center;
    font-size: 0.78rem; color: var(--c-gold); opacity: 0.8;
}
.num-c-head h4 {
    font-family: var(--f-body, sans-serif);
    font-size: var(--nu-h2); font-weight: 600;
    color: var(--nu-gold); margin: 0; line-height: 1.3;
    min-width: 0;
}
.num-c-body { padding: 16px 18px; flex: 1 1 auto; min-width: 0; }
.num-c-body > :last-child { margin-bottom: 0 !important; }

.num-c-body p {
    color: var(--c-text-soft);
    font-size: var(--nu-body);
    line-height: 1.68;
    margin: 0 0 10px;
    text-align: justify;
    text-justify: inter-word;
    hyphens: manual;
}
/* Captions and one-liners stay ragged — justifying a two-line caption
   opens gaps wide enough to read as a bug. */
.num-c-body p.num-hint,
.num-strip p { text-align: left; }
.num-c-body p.num-lead { color: var(--c-text); }
.num-sub {
    font-family: var(--f-body, sans-serif);
    font-size: var(--nu-h3) !important;
    font-weight: 600 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
    color: var(--c-text-muted);
    margin: 18px 0 10px;
}
.num-sub:first-child { margin-top: 0; }
.num-hint { font-size: var(--nu-tiny) !important; color: var(--c-text-muted) !important; line-height: 1.6; }

/* ============================================================
   5 · DEFINITION ROWS
   Inside a bounded card the label/value pair stays close. In a
   wide card the list itself splits into columns, which is how
   "What favours you" now uses the width instead of stretching
   ten rows across it.
   ============================================================ */
.num-defs { display: grid; grid-template-columns: 1fr; gap: 0; }
.num-c-wide .num-defs,
.num-c-full .num-defs {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    column-gap: 30px;
}
.num-def {
    display: grid;
    /* Proportional, not a fixed 122px label column. The fixed column forced
       "Mulank 3 ↔ Bhagyank 6" onto two lines inside a 600px card while its
       chip sat alone on the right with a large hole between them. */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 4px 16px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dashed var(--nu-line);
    min-width: 0;
}
.num-def:last-child { border-bottom: 0; }
.num-def-k { color: var(--c-text-muted); font-size: var(--nu-small); line-height: 1.5; }
.num-def-v {
    color: var(--c-text); font-size: var(--nu-body); line-height: 1.55;
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    min-width: 0; word-break: break-word;
}
.num-def-v em { font-style: normal; color: var(--c-text-muted); margin: 0 2px; }
.num-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.04em; }
.num-v-good { color: var(--nu-good); }
.num-v-bad  { color: var(--nu-bad); }

/* ============================================================
   6 · CHIPS, PILLS, TAGS
   ============================================================ */
.num-chip {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: var(--nu-tiny); line-height: 1.65;
    border: 1px solid var(--c-border); color: var(--c-text-soft); white-space: nowrap;
}
.num-chip.g { background: rgba(94,180,120,0.13); border-color: rgba(94,180,120,0.4); color: var(--nu-good); }
.num-chip.m { background: rgba(212,175,55,0.10); border-color: rgba(212,175,55,0.34); color: var(--nu-gold); }
.num-chip.b { background: rgba(217,122,122,0.13); border-color: rgba(217,122,122,0.4); color: var(--nu-bad); }

.num-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    font-size: var(--nu-tiny); font-weight: 600;
    border: 1px solid var(--c-border); color: var(--c-text-soft);
}
.num-dot.g { background: rgba(94,180,120,0.13); border-color: rgba(94,180,120,0.45); color: var(--nu-good); }
.num-dot.m { background: rgba(212,175,55,0.12); border-color: rgba(212,175,55,0.4); color: var(--nu-gold); }
.num-dot.b { background: rgba(217,122,122,0.13); border-color: rgba(217,122,122,0.45); color: var(--nu-bad); }
.num-tag { font-size: 0.64rem; color: var(--c-text-muted); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }

/* ============================================================
   7 · NOTE STRIPS (arrows, missing numbers, repeats)
   ============================================================ */
.num-strip { border-left: 2px solid var(--c-border); padding: 1px 0 1px 12px; margin-bottom: 14px; }
.num-strip:last-child { margin-bottom: 0; }
.num-strip strong {
    display: block; color: var(--c-text); font-weight: 600;
    font-size: var(--nu-small); letter-spacing: 0.02em; line-height: 1.45;
}
.num-strip p { margin: 4px 0 0 !important; font-size: var(--nu-small) !important; line-height: 1.6; }
.num-strip-cells { color: var(--c-text-muted); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.05em; }
.num-s-good { border-left-color: rgba(94,180,120,0.55); }
.num-s-mid  { border-left-color: rgba(212,175,55,0.55); }
.num-s-bad  { border-left-color: rgba(217,122,122,0.55); }
.num-remedy { color: var(--nu-gold) !important; margin-top: 6px !important; }
.num-remedy i { margin-right: 6px; opacity: 0.85; font-size: 0.76rem; }

/* ============================================================
   8 · LO SHU — grid and its arrows side by side inside one card
   ============================================================ */
.num-loshu {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 8px 26px;
    align-items: start;
}
/* The caption belongs under BOTH columns. Trapped in the 236px grid column
   it wrapped to three cramped lines while the arrows column sat empty. */
.num-loshu-cap { grid-column: 1 / -1; margin: 4px 0 0 !important; }
.num-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.num-cell {
    aspect-ratio: 1 / 1; border-radius: 9px; border: 1px solid var(--c-border);
    display: flex; align-items: center; justify-content: center;
    position: relative; padding: 16px 5px 5px;
}
.num-cell-pos   { position: absolute; top: 4px; left: 7px; font-size: 0.58rem; color: var(--c-text-muted); opacity: 0.6; }
.num-cell-count { position: absolute; top: 4px; right: 7px; font-size: 0.58rem; color: var(--c-gold); }
.num-cell-fill {
    display: flex; flex-wrap: wrap; gap: 1px; align-items: center; justify-content: center;
    font-family: var(--f-display, serif); font-size: 1.1rem; line-height: 1.1; color: var(--nu-gold);
}
.num-cell.on  { background: linear-gradient(160deg, rgba(212,175,55,0.14), rgba(212,175,55,0.03)); border-color: rgba(212,175,55,0.3); }
.num-cell.off { background: rgba(255,255,255,0.012); }
.num-cell-empty { color: var(--c-text-muted); opacity: 0.35; font-size: 1.2rem; }

/* ============================================================
   9 · LETTER BREAKDOWN
   ============================================================ */
.num-words { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.num-word-letters { display: flex; flex-wrap: wrap; gap: 4px; }
.num-letter {
    display: inline-flex; flex-direction: column; align-items: center;
    min-width: 30px; padding: 5px 4px;
    border: 1px solid var(--c-border); border-radius: 6px; background: rgba(255,255,255,0.02);
}
.num-letter b { font-size: 0.85rem; color: var(--c-text); font-weight: 600; line-height: 1.2; }
.num-letter i { font-style: normal; font-size: var(--nu-tiny); color: var(--nu-gold); margin-top: 2px; }
.num-word-sum { margin-top: 8px; font-size: var(--nu-small); color: var(--c-text-soft); }
.num-word-sum b      { color: var(--c-text); font-weight: 600; letter-spacing: 0.04em; }
.num-word-sum em     { font-style: normal; color: var(--c-text-muted); margin: 0 4px; }
.num-word-sum strong { color: var(--nu-gold); }

/* ============================================================
   10 · CHAIN, DOMINANT DIGITS, NAME CARDS
   ============================================================ */
.num-chain { font-family: var(--f-display, serif); font-size: 1.35rem !important; color: var(--nu-gold) !important; letter-spacing: 0.04em; }
.num-chain span { color: var(--c-text-muted); font-size: 0.9rem; margin: 0 4px; }

.num-doms { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin-bottom: 10px; }
.num-dom {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 10px 8px; border: 1px solid var(--c-border); border-radius: 10px;
}
.num-dom.g { border-color: rgba(94,180,120,0.4); }
.num-dom.b { border-color: rgba(217,122,122,0.4); }
.num-dom-d { font-family: var(--f-display, serif); font-size: 1.35rem; color: var(--nu-gold); line-height: 1; }
.num-dom-c { font-size: 0.65rem; color: var(--c-text-muted); margin-top: 5px; }
.num-dom-p { font-size: 0.72rem; color: var(--c-text-soft); margin-top: 2px; }

.num-names { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.num-name {
    border: 1px solid var(--c-border); border-radius: 10px;
    padding: 12px; background: rgba(255,255,255,0.015);
}
.num-name-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.num-name-top strong { font-family: var(--f-display, serif); font-size: 1rem; color: var(--c-text); font-weight: 500; }
.num-name-mean { margin-top: 6px; font-size: var(--nu-small); color: var(--c-text-soft); line-height: 1.5; }
.num-name-meta { margin-top: 8px; font-size: 0.66rem; color: var(--c-text-muted); text-transform: capitalize; }

/* ============================================================
   11 · TABLES
   ============================================================ */
.num-table { width: 100%; }
.num-table td, .num-table th { font-size: var(--nu-small); vertical-align: middle; }
.num-row-current { background: rgba(212,175,55,0.06); }

/* ============================================================
   12 · PERSONAL YEAR
   ============================================================ */
.num-arc { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 6px; }
.num-arc-i {
    display: flex; flex-direction: column; align-items: center;
    border: 1px solid var(--c-border); border-radius: 9px; padding: 8px 4px;
}
.num-arc-i.now { border-color: rgba(212,175,55,0.55); background: rgba(212,175,55,0.09); }
.num-arc-y { font-size: 0.64rem; color: var(--c-text-muted); }
.num-arc-n { font-family: var(--f-display, serif); font-size: 1.15rem; color: var(--nu-gold); line-height: 1.25; }

.num-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 6px; }
.num-month { text-align: center; border: 1px solid var(--c-border); border-radius: 8px; padding: 7px 3px; }
.num-month span { display: block; font-size: 0.63rem; color: var(--c-text-muted); }
.num-month b { display: block; font-family: var(--f-display, serif); font-size: 1.02rem; color: var(--nu-gold); }

/* ============================================================
   13 · COMPATIBILITY
   ============================================================ */
.num-vs {
    display: grid; grid-template-columns: 1fr auto 1fr;
    gap: 16px; align-items: center;
}
.num-vs-p { text-align: center; min-width: 0; }
.num-vs-p strong { display: block; font-family: var(--f-display, serif); font-size: 1rem; color: var(--c-text); font-weight: 500; }
.num-vs-p span   { display: block; font-size: 0.72rem; color: var(--c-text-muted); margin-top: 3px; }
.num-vs-n  { margin-top: 8px; font-size: 1.2rem; color: var(--nu-gold); font-family: var(--f-display, serif); }
.num-vs-n em { font-style: normal; color: var(--c-text-muted); font-size: 0.85rem; margin: 0 3px; }
.num-vs-pl { font-size: 0.7rem; color: var(--c-text-soft); margin-top: 3px; font-style: italic; }
.num-vs-score { text-align: center; padding: 0 8px; }
.num-vs-pct { font-family: var(--f-display, serif); font-size: 2.2rem; line-height: 1; color: var(--nu-gold); }
.num-vs-band { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-soft); margin-top: 5px; }
.num-vs-raw { font-size: 0.66rem; color: var(--c-text-muted); margin-top: 3px; }

/* ============================================================
   14 · ACTION BAR under the grid
   ============================================================ */
.num-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-top: var(--nu-gap);
    padding: 18px 22px;
    border: 1px solid var(--c-border-strong);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(212,175,55,0.07), rgba(212,175,55,0.015));
}
.num-actions-note { font-size: var(--nu-small); color: var(--c-text-muted); }

/* ============================================================
   15 · THE READING
   Full-width panel, but the prose keeps a readable measure with
   a sticky key-numbers rail beside it — that is how the width
   gets used without making paragraphs 200 characters long.
   ============================================================ */
.num-report { margin-top: 24px; }
.num-report-panel { padding: 0 !important; overflow: hidden; }

.num-report-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 18px 24px;
    border-bottom: 1px solid var(--nu-line);
    background: linear-gradient(135deg, rgba(139,107,191,0.12), rgba(212,175,55,0.03));
}
.num-report-head h2 {
    font-family: var(--f-display, serif); font-style: italic; font-weight: 400;
    font-size: var(--nu-h1); color: var(--nu-gold); margin: 5px 0 0; line-height: 1.25;
}

.num-report-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 34px;
    padding: 26px 24px 10px;
    align-items: start;
    /* The BODY is bounded and centred; the prose inside it is not. Centring
       the prose itself left the panel heading hard against the left edge
       while the text floated in the middle — the two never lined up. */
    max-width: 1140px;
    margin: 0 auto;
}
.num-report-rail { position: sticky; top: 20px; }
.num-rail-card { border: 1px solid var(--c-border); border-radius: 12px; padding: 14px 16px; background: rgba(255,255,255,0.015); }
.num-rail-card h5 {
    font-size: var(--nu-h3) !important; font-weight: 600 !important;
    letter-spacing: 0.11em !important; text-transform: uppercase !important;
    color: var(--c-text-muted); margin: 0 0 10px;
}
.num-rail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--nu-line); }
.num-rail-row:last-child { border-bottom: 0; }
.num-rail-k { font-size: var(--nu-tiny); color: var(--c-text-muted); }
.num-rail-v { font-family: var(--f-display, serif); font-size: 1.05rem; color: var(--nu-gold); }

/* The prose itself. style.css justifies every <p> and turns on
   auto-hyphens, which across a wide column produced the broken
   words in the report ("partner-ship", "experi-ence"). */
.num-reading { margin: 0 !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; }
.num-reading .reading-content { max-width: none; margin: 0; }
/* Justified, like the rest of the site — but with hyphenation OFF.
   The broken words in the old report ("partner-ship", "experi-ence") came
   from `hyphens: auto`, not from justification. Turning hyphenation off
   keeps the flush right edge and stops words being cut in half. */
.num-reading p,
.num-reading li {
    text-align: justify !important;
    text-justify: inter-word !important;
    -webkit-hyphens: manual !important;
    -ms-hyphens: manual !important;
    hyphens: manual !important;
    line-height: 1.82;
    margin-bottom: 16px;
    font-size: 0.96rem;
}
.num-reading h4 {
    font-family: var(--f-display, serif) !important;
    font-style: italic !important; font-weight: 500 !important;
    font-size: 1.15rem !important;
    margin: 32px 0 14px !important;
    padding: 10px 15px !important;
}
.num-reading h4:first-child { margin-top: 0 !important; }
.num-reading .reading-hindi p { line-height: 2; }
.num-reading .reading-hindi h4 { font-style: normal !important; }

.num-report-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--nu-line);
    margin-top: 16px;
    font-size: var(--nu-small); color: var(--c-text-muted); font-style: italic;
}
.num-report-actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* Saved report page — same bounded body, same left-aligned prose. */
.num-report-saved { padding: 0 !important; overflow: hidden; }
.num-report-saved .num-reading .reading-content { max-width: none; margin: 0; }

/* ============================================================
   16 · LOADER — a number ring instead of a zodiac ring
   ============================================================ */
.num-loader__digit { font-family: var(--f-display, serif); font-size: 15px; fill: var(--c-gold-bright, #f4d676); }
.num-loader__graha { font-family: var(--f-body, sans-serif); font-size: 7px; letter-spacing: 0.08em; fill: rgba(212,175,55,0.55); text-transform: uppercase; }

/* ============================================================
   17 · PUBLIC LANDING PAGE
   ============================================================ */
.num-public-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 32px; }
.num-public-card {
    border: 1px solid var(--c-border); border-radius: 16px; padding: 26px;
    background: var(--c-surface); transition: border-color .2s ease, transform .2s ease;
}
.num-public-card:hover { border-color: rgba(212,175,55,0.4); transform: translateY(-2px); }
.num-public-card i { font-size: 1.35rem; color: var(--c-gold-bright); margin-bottom: 14px; display: block; }
.num-public-card h3 { font-size: 1.08rem; margin: 0 0 8px; color: var(--c-text); }
.num-public-card p { font-size: 0.9rem; color: var(--c-text-soft); line-height: 1.65; margin: 0; text-align: left; }
.num-public-card .num-cost { display: inline-block; margin-top: 14px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-gold-bright); }

/* ============================================================
   18 · RESPONSIVE
   The grid reflows on its own; these only handle the pieces that
   need a different shape rather than a different column count.
   ============================================================ */
@media (max-width: 1500px) {
    .num-c-wide { grid-column: span 2; }
}
@media (max-width: 1150px) {
    .num-report-body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .num-report-rail { position: static; }
    .num-rail-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0 20px; }
    .num-rail-card h5 { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .num-c-wide, .num-c-full { grid-column: 1 / -1; }
    .num-loshu { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .num-grid3 { max-width: 300px; }
}
@media (max-width: 640px) {
    .num-hero { padding: 18px 16px; }
    .num-hero-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .num-orb-ring { width: 72px; height: 72px; }
    .num-orb-val { font-size: 1.9rem; }
    .num-c-head { padding: 12px 15px; }
    .num-c-body { padding: 14px 15px; }
    .num-def { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 7px 0; }
    .num-vs { grid-template-columns: 1fr; }
    .num-report-head, .num-report-foot { padding-left: 16px; padding-right: 16px; }
    .num-report-body { padding: 20px 16px 6px; }
    .num-actions { flex-direction: column; align-items: stretch; }
    .num-actions .btn { width: 100%; justify-content: center; }
    .num-report-foot { flex-direction: column; align-items: flex-start; }
    .num-grid3 { max-width: 100%; }
}

/* ============================================================
   19 · PRINT
   ============================================================ */
@media print {
    .dash-sidebar, .dash-tabbar, .dash-mobile-toggle,
    .num-wrap, .num-panel, .num-note,
    .num-report-head .lang-toggle, .num-report-actions, .num-report-rail { display: none !important; }
    .num-report-panel { border: 0 !important; }
    .num-report-body { grid-template-columns: 1fr; padding: 0 !important; }
    .num-reading .reading-content { max-width: none; }
    .num-reading p, .num-reading h4 { color: #222 !important; }
    .num-reading h4 { background: none !important; border-left: 2px solid #999 !important; }
}

/* ============================================================
   20 · SAVED REPORT PAGE — same shape as a fresh reading
   The language toggle sits above the panel on this page rather
   than inside its header, so it needs aligning with the bounded
   body underneath it instead of floating at the far right of a
   full-width row.
   ============================================================ */
.num-toggle-wrap {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.num-report-saved .num-report-head {
    background: linear-gradient(135deg, rgba(139,107,191,0.12), rgba(212,175,55,0.03));
}
.num-report-saved .num-report-head h2 {
    font-family: var(--f-display, serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--nu-h1, 1.35rem);
    color: var(--nu-gold, #f4d676);
    margin: 5px 0 0;
    line-height: 1.25;
}
/* An empty rail must not reserve a 250px column. */
.num-report-body:has(> .num-report-rail:empty) { grid-template-columns: minmax(0, 1fr); }
.num-report-rail:empty { display: none; }

/* ============================================================
   21 · HOMEPAGE FREE SECTION
   ============================================================ */

.num-free-section .section-head p { max-width: 72ch; margin-left: auto; margin-right: auto; }

.num-free-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 16px;
    margin-top: 34px;
}
.num-free-card {
    position: relative;
    display: block;
    text-decoration: none;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    background: var(--c-surface);
    padding: 26px 24px 24px;
    transition: border-color .2s ease, transform .2s ease;
}
.num-free-card:hover { border-color: rgba(212,175,55,0.45); transform: translateY(-2px); }
.num-free-card--lead {
    grid-column: span 2;
    background:
        radial-gradient(120% 160% at 10% 0%, rgba(139,107,191,0.16), transparent 62%),
        linear-gradient(135deg, rgba(212,175,55,0.08), rgba(212,175,55,0.015));
    border-color: rgba(212,175,55,0.32);
}
.num-free-tag {
    position: absolute;
    top: 18px; right: 18px;
    font-size: 0.63rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7fd39c;
    background: rgba(94,180,120,0.13);
    border: 1px solid rgba(94,180,120,0.4);
    border-radius: 100px;
    padding: 3px 11px;
}
.num-free-card > i {
    display: block;
    font-size: 1.4rem;
    color: var(--c-gold-bright);
    margin-bottom: 14px;
}
.num-free-card h3 { font-size: 1.08rem; margin: 0 0 8px; color: var(--c-text); }
.num-free-card--lead h3 { font-size: 1.3rem; }
.num-free-card p {
    font-size: 0.9rem;
    color: var(--c-text-soft);
    line-height: 1.65;
    margin: 0;
    text-align: left;
}
.num-free-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-gold-bright);
}

.num-free-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin-top: 18px;
}
.num-free-col {
    border: 1px solid var(--c-border);
    border-radius: 16px;
    background: rgba(255,255,255,0.015);
    padding: 26px 24px;
}
.num-free-col h3 {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.05rem; margin: 0 0 14px; color: var(--c-gold-bright);
}
.num-free-col h3 i { font-size: 0.9rem; opacity: 0.85; }
.num-free-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.num-free-col li {
    position: relative;
    padding-left: 22px;
    color: var(--c-text-soft);
    font-size: 0.91rem;
    line-height: 1.65;
    text-align: left;
}
.num-free-col li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute; left: 0; top: 3px;
    font-size: 0.68rem;
    color: var(--c-gold);
}
.num-free-col strong { color: var(--c-text); }

@media (max-width: 760px) {
    .num-free-card--lead { grid-column: 1 / -1; }
}


/* ============================================================
   22 · THE PUBLIC CALCULATOR — a two-column app shell
   ------------------------------------------------------------
   A flat page could not use the width: a title, a paragraph and
   fifteen identical pills stacked down the left of a 1560px
   canvas left most of the screen empty, and the wider the
   monitor the worse it looked. A persistent, grouped navigation
   column gives the width a job and lets someone move between
   calculators without scrolling back to a pill bar.
   ============================================================ */
.numc { padding: 30px 0 70px; }
.numc-shell {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

/* ---- navigation column ----
   The height is capped to the viewport. Left uncapped the nav was taller
   than a form-only page, so the page ended while the sidebar carried on and
   the whole right side sat empty below the fold. Capped, it can never be
   the thing that makes the page tall — it scrolls inside itself instead. */
.numc-nav {
    position: sticky;
    top: 22px;
    max-height: calc(100vh - 44px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    background: var(--c-surface);
    overflow: hidden;
}
.numc-nav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,175,55,0.35) transparent;
}
.numc-nav-scroll::-webkit-scrollbar { width: 6px; }
.numc-nav-scroll::-webkit-scrollbar-track { background: transparent; }
.numc-nav-scroll::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.28); border-radius: 3px; }
.numc-nav-scroll::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.5); }
.numc-nav-head, .numc-nav-foot { flex: 0 0 auto; }
.numc-nav-head {
    padding: 20px 20px 18px;
    border-bottom: 1px solid var(--nu-line, rgba(255,255,255,0.07));
    background: linear-gradient(135deg, rgba(139,107,191,0.12), rgba(212,175,55,0.03));
}
.numc-nav-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase;
    color: #7fd39c;
    background: rgba(94,180,120,0.13);
    border: 1px solid rgba(94,180,120,0.4);
    border-radius: 100px; padding: 4px 11px;
}
.numc-nav-head h2 {
    font-family: var(--f-display, serif); font-style: italic; font-weight: 400;
    font-size: 1.3rem; color: var(--c-gold-bright);
    margin: 12px 0 6px; text-transform: none; letter-spacing: 0;
}
.numc-nav-head p { font-size: 0.8rem; color: var(--c-text-muted); line-height: 1.55; margin: 0; text-align: left; }

.numc-group { padding: 14px 12px 4px; }
.numc-group + .numc-group { border-top: 1px solid var(--nu-line, rgba(255,255,255,0.07)); }
.numc-group-label {
    display: flex; align-items: center; gap: 8px;
    padding: 0 8px 9px;
    font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--c-text-muted);
}
.numc-group-label i { font-size: 0.66rem; color: var(--c-gold); opacity: 0.7; }

.numc-link {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 9px 10px; margin-bottom: 2px;
    border-radius: 10px;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background .15s ease, border-color .15s ease;
}
.numc-link > i {
    flex: 0 0 auto; width: 17px; text-align: center; margin-top: 3px;
    font-size: 0.78rem; color: var(--c-gold); opacity: 0.7;
}
.numc-link-text { min-width: 0; display: block; }
.numc-link-text strong {
    display: block; font-size: 0.87rem; font-weight: 500;
    color: var(--c-text-soft); line-height: 1.35;
}
.numc-link-text small {
    display: block; font-size: 0.72rem; color: var(--c-text-muted);
    line-height: 1.45; margin-top: 2px;
}
.numc-link:hover { background: rgba(255,255,255,0.03); }
.numc-link:hover .numc-link-text strong { color: var(--c-text); }
.numc-link.is-active {
    background: rgba(212,175,55,0.09);
    border-left-color: var(--c-gold);
}
.numc-link.is-active > i { opacity: 1; }
.numc-link.is-active .numc-link-text strong { color: var(--c-gold-bright); }

.numc-nav-foot {
    padding: 16px 18px 18px;
    border-top: 1px solid var(--nu-line, rgba(255,255,255,0.07));
    background: rgba(255,255,255,0.015);
}
.numc-nav-foot p { font-size: 0.78rem; color: var(--c-text-muted); line-height: 1.55; margin: 0 0 12px; text-align: left; }
.numc-nav-foot strong { color: var(--c-text); }

/* ---- content column ---- */
.numc-main { min-width: 0; }

.numc-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 26px;
    align-items: center;
    padding: 26px 28px;
    margin-bottom: 22px;
    border: 1px solid var(--c-border-strong);
    border-radius: 16px;
    background:
        radial-gradient(120% 170% at 8% 0%, rgba(139,107,191,0.18), transparent 62%),
        linear-gradient(135deg, rgba(212,175,55,0.07), rgba(212,175,55,0.015));
}
.numc-head-text { min-width: 0; }
.numc-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--c-gold-bright);
}
.numc-eyebrow i { font-size: 0.68rem; opacity: 0.85; }
.numc-head h1 {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    margin: 11px 0 10px;
    line-height: 1.15;
}
.numc-head p {
    color: var(--c-text-soft);
    font-size: 0.93rem;
    line-height: 1.7;
    margin: 0;
    max-width: 76ch;
    text-align: justify;
    text-justify: inter-word;
}

/* The four facts a visitor actually wants before typing anything. */
.numc-facts {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 12px 26px;
    margin: 0;
    flex: 0 0 auto;
}
.numc-facts dt {
    font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--c-text-muted); margin-bottom: 3px;
}
.numc-facts dd {
    margin: 0;
    font-family: var(--f-display, serif);
    font-size: 1.02rem;
    color: var(--c-gold-bright);
    white-space: nowrap;
}

.numc-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 26px;
    align-items: center;
    margin-top: 26px;
    padding: 24px 28px;
    border: 1px solid var(--c-border-strong);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(212,175,55,0.015));
}
.numc-cta h3 {
    font-family: var(--f-display, serif); font-weight: 400;
    font-size: 1.25rem; color: var(--c-text);
    margin: 0 0 8px; text-transform: none; letter-spacing: 0;
}
.numc-cta p { font-size: 0.9rem; color: var(--c-text-soft); line-height: 1.7; margin: 0; text-align: left; }
.numc-cta .btn { flex: 0 0 auto; white-space: nowrap; }

/* On the calculator the form fills its column — the shell already
   bounds the page, so a second cap would only add dead space. */
.numc-main .num-panel > .panel { max-width: none; }
.numc-main .num-note { max-width: none; }

/* ---- responsive ---- */
@media (max-width: 1180px) {
    .numc-shell { grid-template-columns: 250px minmax(0, 1fr); gap: 22px; }
    .numc-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .numc-facts { grid-template-columns: repeat(4, auto); justify-content: start; }
}
@media (max-width: 900px) {
    .numc-shell { grid-template-columns: minmax(0, 1fr); }
    .numc-nav { position: static; }
    /* The nav becomes a compact two-column card above the tool. */
    .numc-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
    .numc-group-label { grid-column: 1 / -1; }
    .numc-cta { grid-template-columns: minmax(0, 1fr); }
    .numc-cta .btn { justify-self: start; }
}
@media (max-width: 640px) {
    .numc { padding: 18px 0 50px; }
    .numc-shell { padding: 0 16px; gap: 18px; }
    .numc-head { padding: 20px 18px; }
    .numc-facts { grid-template-columns: repeat(2, auto); gap: 10px 20px; }
    .numc-group { grid-template-columns: minmax(0, 1fr); }
    .numc-cta { padding: 20px 18px; }
}


/* ============================================================
   23 · SUPPORTING CONTENT UNDER THE FORM
   A calculator on its own is a short page, and a short page beside
   a tall sidebar is what left the right-hand column hanging in
   space. This is not filler: it answers the questions a first-time
   visitor actually has — is it really free, which system, why
   trust the numbers — and it keeps the two columns comparable.
   ============================================================ */
.numc-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    margin-top: 26px;
}
.numc-info-card {
    border: 1px solid var(--c-border);
    border-radius: 14px;
    background: var(--c-surface);
    padding: 20px 22px;
}
.numc-info-card i {
    display: block; font-size: 1.15rem;
    color: var(--c-gold-bright); margin-bottom: 12px;
}
.numc-info-card h3 {
    font-size: 0.98rem; font-weight: 600; margin: 0 0 8px;
    color: var(--c-text); text-transform: none; letter-spacing: 0;
    font-family: var(--f-body, sans-serif);
}
.numc-info-card p {
    font-size: 0.87rem; color: var(--c-text-soft);
    line-height: 1.68; margin: 0;
    text-align: justify; text-justify: inter-word;
}

.numc-faq { margin-top: 26px; }
.numc-faq > h2 {
    font-family: var(--f-display, serif); font-style: italic; font-weight: 400;
    font-size: 1.3rem; color: var(--c-gold-bright);
    margin: 0 0 14px; text-transform: none; letter-spacing: 0;
}
.numc-faq details {
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: var(--c-surface);
    margin-bottom: 10px;
    overflow: hidden;
}
.numc-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 15px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: 0.94rem; color: var(--c-text);
}
.numc-faq summary::-webkit-details-marker { display: none; }
.numc-faq summary::after {
    content: '\f067';
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 0.7rem; color: var(--c-gold); flex: 0 0 auto;
    transition: transform .2s ease;
}
.numc-faq details[open] summary::after { content: '\f068'; }
.numc-faq details[open] summary { color: var(--c-gold-bright); }
.numc-faq .numc-faq-body {
    padding: 0 20px 18px;
    font-size: 0.89rem; color: var(--c-text-soft); line-height: 1.72;
    text-align: justify; text-justify: inter-word;
}
.numc-faq .numc-faq-body a { color: var(--c-gold-bright); }

@media (max-width: 900px) {
    /* Stacked, the nav sits above the tool and should not scroll internally. */
    .numc-nav { max-height: none; }
    .numc-nav-scroll { overflow: visible; }
}