* { box-sizing:border-box; }
  body { margin:0; background:var(--cream); color:var(--ink);
         font-family:var(--font-sans); font-size:15px; line-height:1.6; }
  /* Grid and flex children default to min-width:auto, which lets a wide table
     push the whole page sideways. This is the rule the signed-in mockup was
     missing on all seventeen routes. */
  .l-wrap > *, .l-sec > * { min-width:0; }
  .l-wrap { max-width:var(--wrap); margin:0 auto; padding:0 16px; }
  .l-sec { padding:38px 0; }
  .l-alt { background:var(--surface-2); border-block:1px solid var(--line-soft); }
  .l-sub { font-size:var(--text-base); line-height:1.62; color:var(--ink-2);
           margin:0; max-width:66ch; }
  /* A link in a lede had no colour and came out in the browser's own
     -webkit-link — rgb(158,158,255) in dark, #0000EE in light. .l-sub is on
     every page, so this was one page today and any page that adds a link to a
     lede tomorrow. Set here rather than on the page that happened to have
     one. */
  .l-sub a { color:var(--gold-dk); text-underline-offset:2px; }
  /* A CENTRED SECTION, for pages whose head is centred too. Lives here rather
     than in a page's stylesheet because two clusters use it now — it was
     .ai-c in ai_astrologer.py, and pages/dasha.py picked up the class without
     the rule, so its ledes rendered left under centred heads and looked like
     an oversight. margin-inline is not optional: .l-sub caps at 66ch, so
     centring the text without centring the box leaves a centred column
     sitting on the left of the wrap.
     Only the lede. Lists, tables and cards inside a .l-ctr stay left —
     centred body copy is ragged on both edges and a centred bulleted list
     stops forming a column to scan. */
  .l-ctr .l-sub { text-align:center; margin-inline:auto; }
  /* TWO LEDES GO SIDE BY SIDE. One is fine stacked: 66ch keeps a line
     readable and the grid or panel under it carries the width. Two of them
     stacked is not — they fill the left half of the band, the right half is
     empty, and under a full-width heading with a full-width panel below it
     the pair reads as a column that has been cut off rather than as air.
     Measured at 1280: 582px of a 1180px section, 49% of it, twice over.

     A track each, so both keep the SAME measure they had — this is a layout
     fix, not a wider line. Stretching one paragraph across 1180px would give
     150 characters to a line that is already at 74.

     auto-fit rather than two fixed columns, because the home page has a pair
     inside a half-width column; there they stack again rather than becoming
     two forty-character ribbons.

     .l-sub KEEPS ITS 66ch. Each track comes out at 552px against a 582px
     cap, so the track is what governs in two columns and the cap is what
     governs when it falls back to one — which is the width it has today.
     Overriding the cap to none looked tidier and gave a 736px tablet a
     93-character line, which is the fault this rule exists to avoid.

     min(400px, 100%), NOT 400px. A minimum track wider than the container
     does not shrink — it overflows it, and at 320px the whole page scrolled
     sideways by 26px. min() caps the floor at whatever room there is. */
  .l-lede { display:grid; gap:10px 44px; margin-bottom:20px;
            grid-template-columns:repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
  .l-mb { margin-bottom:20px; }
  .l-mt { margin-top:22px; }
  /* ── the header's two menus (language, account) ─────── */
  .c-dd { position:relative; }
  .c-dd > summary { list-style:none; }
  .c-dd > summary::-webkit-details-marker { display:none; }
  /* The theme toggle's size and shape (ui .c-th-t), so the three read as
     one set: 34px under a mouse, 44px under a finger. */
  .c-dd-b { display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
            border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
            cursor:pointer; }
  @media (pointer:coarse) { .c-dd-b { width:44px; height:44px; border-radius:12px; } }
  .c-dd-b:hover, .c-dd[open] > .c-dd-b { border-color:var(--gold); color:var(--gold-dk); }
  .c-dd-aa { font-size:13px; font-weight:700; letter-spacing:-.02em; }
  .c-dd-m { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:60;
            min-width:170px; padding:6px; border-radius:12px; border:1px solid var(--line);
            background:var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.14);
            display:flex; flex-direction:column; gap:2px; }
  .c-dd-r { left:auto; right:0; transform:none; }
  .c-dd-i { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
            font-size:14.5px; color:var(--ink); text-decoration:none; white-space:nowrap; }
  .c-dd-i i { font-style:normal; width:18px; text-align:center; color:var(--ink-3); }
  .c-dd-i:hover { background:var(--gold-bg); }
  .c-dd-i.c-on { color:var(--gold-dk); font-weight:650; }
  .c-dd-i.c-on i { color:var(--gold-dk); }
  .l-act-u { display:flex; align-items:center; gap:8px; }
  /* Date and time are one question, asked once. Both values are short enough
     to sit side by side even at 360px, and pairing them stops the form
     reading as five separate chores. */
  /* Date and time side by side, and STACKED on the narrowest phones. The two
     were always a 1fr 1fr grid; what changed is that the time trigger now
     reads 09:15 PM as four flex spans rather than one string, so its
     min-content is wider than half of a 288px card and the card grew to 311 —
     7px of sideways scroll on the page the whole site links to. minmax(0,1fr)
     alone would have kept the row and clipped the readout instead. */
  .l-dt { display:grid; grid-template-columns:1fr; gap:10px; }
  @media (min-width:360px) {
    .l-dt { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  }
  /* Part of the hero's left column, not a band of its own. It anchors the
     bottom of that column so it finishes level with the form card. */
  /* Inside the form card the list sits under the button, separated by a rule
     rather than by more whitespace — it is what pressing the button gets you,
     so it should read as part of the button's promise. */
  .l-cardsub { margin:2px 0 14px; }
  .l-cardinc { margin-top:14px; padding-top:14px;
               border-top:1px solid var(--line-soft); }
  .l-inc { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
  .l-inc li { display:flex; align-items:flex-start; gap:9px; }
  .l-inc svg { flex:none; margin-top:2px; color:var(--gold-dk); }
  .l-inc span { font-size:14px; line-height:1.45; color:var(--ink-2); }

  .l-samp { display:flex; align-items:center; gap:13px; padding:14px 16px;
            text-decoration:none; color:var(--ink); border:1px solid var(--line);
            border-radius:var(--r-card); background:var(--surface); }
  .l-samp:hover { border-color:var(--gold); background:var(--gold-bg); }
  /* Between the two-column breakpoint and 1024 the left column runs 9px past
     the card, because the headline takes an extra line before the columns are
     wide enough. Four pixels off the padding and four off the stack gap close
     it without anyone being able to tell the difference. */

  .l-samp > svg:first-child { flex:none; color:var(--gold-dk); }
  .l-samp > svg:last-child { flex:none; color:var(--ink-3); margin-left:auto; }
  .l-samp span { min-width:0; }
  .l-samp b { display:block; font-size:14.5px; font-weight:700; }
  .l-samp i { display:block; font-style:normal; font-size:12.5px;
              color:var(--ink-3); margin-top:2px; line-height:1.45; }
  .l-dt .c-pf { margin-bottom:0; }
  .l-dth { margin:6px 0 var(--space-3); }
  .l-mb2 { margin-bottom:16px; }

  .l-mark { display:block; width:34px; height:34px; flex:none; }
  .l-mark img { display:block; width:100%; height:100%; border-radius:19%; }

  /* proof row */
  .l-proof { background:var(--gold-bg); border-block:1px solid var(--line); }
  .l-pfr { display:grid; grid-template-columns:repeat(2,1fr); gap:0;
           padding:4px 0; }
  .l-pf { padding:18px 4px 18px 18px; }
  /* Hairlines, not a colour change, do the separating — and only between
     cells that are actually side by side, which changes at each breakpoint. */
  .l-pf:nth-child(2n) { border-left:1px solid var(--line); }
  .l-pf:nth-child(n+3) { border-top:1px solid var(--line); }
  .l-pf:first-child { padding-left:0; }
  .l-pf b { display:block; font-family:var(--font-serif); font-size:29px;
            line-height:1.05; font-weight:600; color:var(--gold-dk);
            letter-spacing:-.015em; }
  .l-pf span { display:block; font-size:13.5px; font-weight:650; margin-top:5px;
               color:var(--ink); }
  .l-pf i { display:block; font-style:normal; font-size:12.5px; color:var(--ink-3);
            margin-top:2px; }
  @media (min-width:760px) {
    .l-pfr { grid-template-columns:repeat(4,1fr); }
    .l-pf:nth-child(n+3) { border-top:0; }
    .l-pf:nth-child(n+2) { border-left:1px solid var(--line); }
  }

  /* panchang */
  .l-panch { display:grid; gap:8px; grid-template-columns:repeat(2,1fr); }
  .l-pc { padding:13px 14px; border:1px solid var(--line); border-radius:var(--r-in);
          background:var(--surface); }
  .l-pc span { display:block; font-family:var(--font-mono); font-size:9px;
               letter-spacing:.13em; color:var(--ink-3); }
  .l-pc b { display:block; font-size:15px; margin-top:5px; }
  .l-pc i { display:block; font-style:normal; font-size:12px; color:var(--ink-3); }
  .l-pc.c-t-good b { color:var(--good); } .l-pc.c-t-bad b { color:var(--bad); }
  @media (min-width:700px) { .l-panch { grid-template-columns:repeat(3,1fr); } }
  @media (min-width:1000px) { .l-panch { grid-template-columns:repeat(6,1fr); } }

  /* rashifal */
  .l-rsg { display:grid; gap:7px; grid-template-columns:repeat(3,1fr); }
  .l-rs { display:flex; flex-direction:column; align-items:center; gap:1px;
          min-height:98px; justify-content:center; padding:12px 5px;
          border:1px solid var(--line); border-radius:var(--r-in);
          background:var(--surface); text-decoration:none; color:var(--ink);
          text-align:center; }
  .l-rs:hover { border-color:var(--gold); background:var(--gold-bg); }
  .l-rs .c-sym { color:var(--gold-dk); margin-bottom:4px; }
  .l-rs b { font-size:12.5px; font-weight:650; }
  .l-rs i { font-style:normal; font-size:10.5px; color:var(--ink-3); }
  .l-rs u { text-decoration:none; font-size:12px; color:var(--gold-dk); }
  @media (min-width:560px) { .l-rsg { grid-template-columns:repeat(4,1fr); } }
  @media (min-width:900px) { .l-rsg { grid-template-columns:repeat(6,1fr); } }

  /* tools */
  .l-tools { display:grid; gap:12px; }
  .l-ti { display:grid; place-items:center; width:40px; height:40px;
          border-radius:11px; color:var(--gold-dk); background:var(--gold-bg);
          margin-bottom:11px; }
  .l-tl { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
  .l-tl a { display:inline-flex; align-items:center; min-height:44px;
            font-size:12.5px; font-weight:600; padding:0 14px;
            border-radius:var(--r-pill); color:var(--ink-2);
            border:1px solid var(--line); background:var(--surface);
            text-decoration:none; }
  .l-tl a:hover { color:var(--gold-dk); border-color:var(--gold);
                  background:var(--gold-bg); }
  @media (min-width:720px) { .l-tools { grid-template-columns:repeat(2,1fr); } }

  /* astrologers */
  /* .h-astro in home.py sets display on top of this and is the only caller,
     so anything layout-ish added here is dead. The phone rail lives there. */
  .l-astro { display:grid; gap:11px; grid-template-columns:repeat(1,1fr); }
  .l-ah { display:flex; align-items:center; gap:11px; }
  .l-an { display:block; font-size:15px; font-weight:700; }
  .l-as { display:block; font-size:12.5px; color:var(--ink-3); }
  .l-am { display:flex; gap:5px; margin-top:12px; }
  @media (min-width:600px) { .l-astro { grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1000px) { .l-astro { grid-template-columns:repeat(4,1fr); } }

  /* The unknown-birth-time escape hatch belongs inside the time picker, where
     someone reaches it at the exact moment they realise they cannot answer. */
  .l-unk { margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); }
  .l-faq { margin-top:16px; }


/* ── page head ────────────────────────────────────────── */
.s-crumb { padding-top:16px; }
.s-top { padding:22px 0 6px; }
.s-head { max-width:64ch; }
/* With a form beside it the header is the full width and the two columns
   share it, so the reading underneath is not squeezed into a rail. */
.s-head-2 { max-width:none; display:grid; gap:26px;
            grid-template-columns:minmax(0,1fr); align-items:start; }
.s-head-2 > * { min-width:0; }
@media (min-width:960px) {
  .s-head-2 { grid-template-columns:minmax(0,1fr) minmax(0,380px); }
}
.s-head-t { max-width:64ch; }
.s-eyebrow { display:inline-block; font-family:var(--font-mono); font-size:10px;
             letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dk);
             padding:5px 10px; border-radius:var(--r-pill);
             background:var(--gold-bg); margin-bottom:14px; }
.s-h1 { font-family:var(--font-serif); font-size:clamp(27px,5.2vw,42px);
        line-height:1.08; letter-spacing:-.021em; font-weight:600;
        margin:0 0 13px; text-wrap:balance; }
.s-h1 em { font-style:normal; color:var(--gold-dk); }
.s-dek { font-size:var(--text-md); line-height:1.62; color:var(--ink-2);
         margin:0; max-width:58ch; }
/* What the page gives back, named. See page_head() for why it is only on the
   fourteen with a full birth-details form. */
.s-ret { margin-top:18px; max-width:58ch; }
.s-ret ul { margin:8px 0 0; padding:0; list-style:none; display:grid;
            gap:5px; }
.s-ret li { position:relative; padding-left:18px; font-size:14px;
            line-height:1.55; color:var(--ink-2); }
.s-ret li::before { content:''; position:absolute; left:2px; top:9px;
                    width:5px; height:5px; border-radius:50%;
                    background:var(--gold-solid); }
@media (min-width:960px) {
  .s-head-fill { align-items:stretch; }
  .s-head-fill > .s-head-t { display:flex; flex-direction:column; }
  .s-head-fill .s-meta { margin-top:auto; padding-top:16px; }
}
/* The facts a dek would otherwise carry as adjectives. Mono, so they read as
   data rather than as more sentence. */
/* THE CENTRED HEAD, for pages that are not asking for a birth time. The
   default sits beside a form card and runs to 64ch down the left; a page
   whose top is a choice rather than a form leaves that whole right-hand
   column empty, and the text reads as the caption of something that failed
   to load. Two pages want this — the tarot hub, whose top half is six
   readings, and the astrologer pages, whose top half is a roster — so it
   lives here rather than being written twice. */
.s-head-c { max-width:700px; margin-inline:auto; text-align:center; }
.s-head-c .s-eyebrow { font-size:11.5px; letter-spacing:.09em; font-weight:700;
          border:1px solid var(--gold-lt); padding:5px 13px; margin-bottom:16px; }
.s-head-c .s-h1 { font-size:clamp(30px,5.6vw,46px); }
.s-head-c .s-dek { margin-inline:auto; max-width:62ch; }
.s-head-c .s-meta { justify-content:center; }

.s-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px;
          font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
          color:var(--ink-3); }
.s-meta span { display:flex; align-items:center; gap:7px; }
.s-meta span + span::before { content:''; width:3px; height:3px; flex:none;
          border-radius:50%; background:var(--line); margin-left:-11px; }

/* ── related ──────────────────────────────────────────── */
.s-rel { display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:620px) { .s-rel { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px) { .s-rel { grid-template-columns:repeat(3,1fr); } }
.s-rel > * { min-width:0; }
.s-rel-i { display:flex; align-items:flex-start; gap:12px; padding:14px 16px;
           min-height:44px; text-decoration:none; color:var(--ink);
           background:var(--surface); border:1px solid var(--line);
           border-radius:var(--r-card); }
.s-rel-i:hover { border-color:var(--gold); background:var(--gold-bg); }
.s-rel-k { flex:none; display:grid; place-items:center; width:32px; height:32px;
           border-radius:9px; background:var(--gold-bg); color:var(--gold-dk); }
.s-rel-x { min-width:0; display:flex; flex-direction:column; line-height:1.4; }
.s-rel-x b { font-size:14px; font-weight:650; }
.s-rel-x i { font-style:normal; font-size:12.5px; color:var(--ink-3);
             margin-top:2px; }

/* ── closing CTA ──────────────────────────────────────── */
.s-cta { display:grid; gap:20px; align-items:center; padding:28px;
         border-radius:var(--r-card); border:1px solid var(--gold-lt);
         background:
           radial-gradient(120% 140% at 88% 0%, var(--gold-bg) 0%, transparent 64%),
           var(--surface); }
@media (min-width:820px) {
  .s-cta { grid-template-columns:1fr auto; gap:34px; padding:32px 36px; } }
.s-cta > * { min-width:0; }
.s-cta h2 { font-family:var(--font-serif); font-size:clamp(21px,3.4vw,28px);
            line-height:1.16; letter-spacing:-.018em; font-weight:600;
            margin:0 0 9px; text-wrap:balance; }
.s-cta p { font-size:var(--text-base); line-height:1.6; color:var(--ink-2);
           margin:0; max-width:52ch; }
.s-cta-b { display:flex; flex-wrap:wrap; gap:10px; }
.s-cta-b > * { flex:1 1 auto; }
.s-cta-alt { display:inline-flex; align-items:center; justify-content:center;
             gap:8px; text-decoration:none; white-space:nowrap; }
.s-cta-alt svg { color:var(--gold-dk); }

/* The banner: the page's line, then the astrologers and the reports. */
.s-cta.s-pro { display:block; }
.s-pro-h { margin-bottom:18px; }
.s-pro-h p { max-width:none; }
.s-pro-g { display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:760px) { .s-pro-g { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.s-pro-c { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:18px 20px;
           border-radius:14px; border:1px solid var(--line); background:var(--surface);
           text-decoration:none; color:var(--ink); }
.s-pro-c:hover { border-color:var(--gold); }
.s-pro-c > b { font-size:18px; font-weight:650; margin-top:6px; }
.s-pro-t { font-size:14px; line-height:1.55; color:var(--ink-2); }
.s-pro-p { font-size:13.5px; font-weight:600; color:var(--gold-dk); }
.s-pro-go { margin-top:auto; align-self:stretch; }
@media (min-width:760px) { .s-pro-go { align-self:flex-start; } }
.s-pro-c .s-pro-p + .s-pro-go { margin-top:10px; }
.s-pro-fs { display:flex; }
.s-pro-f { width:60px; height:60px; border-radius:50%; overflow:hidden; border:2px solid var(--surface);
           margin-left:-10px; background:var(--gold-bg); box-shadow:0 0 0 1px var(--line); }
.s-pro-f:first-child { margin-left:0; }
@media (min-width:760px) { .s-pro-f { width:72px; height:72px; margin-left:-12px; } }
.s-pro-f img { width:100%; height:100%; object-fit:cover; display:block; }
/* Covers big enough to read the title on (Rohit, 27 Sep 2026: "the report
   images look very small and non readable" at 40x54). */
/* Each cover at its OWN shape: they are 520x736 and 520x696, and one box
   for all cropped the shorter ones at the sides, cutting off their painted
   border (Rohit, 27 Sep 2026: "the same boundary outside right, cutting
   off"). */
.s-pro-cvs { display:flex; gap:12px; align-items:flex-start; }
.s-pro-cv { flex:1 1 0; max-width:150px; border-radius:6px; overflow:hidden;
            box-shadow:0 3px 12px rgba(0,0,0,.22); line-height:0; }
.s-pro-cv img { width:100%; height:auto; display:block; }
.s-pro-rs { display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); align-self:stretch;
            margin:6px 0 4px; }
@media (min-width:560px) { .s-pro-rs { gap:8px 16px; } }
.s-pro-r { display:flex; flex-direction:column; gap:1px; min-width:0; padding:9px 12px;
           border-radius:var(--r-in); background:var(--gold-bg); }
.s-pro-r b { font-size:14.5px; font-weight:650; color:var(--ink); }
.s-pro-r i { font-style:normal; font-size:13px; color:var(--ink-2); }
.s-pro-fs { text-decoration:none; }
.s-pro-bs { display:grid; grid-template-columns:1fr; gap:10px; align-self:stretch;
            margin-top:auto; padding-top:10px; }
@media (min-width:1000px) { .s-pro-bs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Flex, not .c-btn's inline-grid: in a wide cell the grid's tracks
   stretched and pushed Chat's price to the far edge, while Call (flex
   through .s-cta-alt) kept it beside the label. */
.s-pro-bs .c-btn { display:flex; justify-content:center; align-items:center; gap:7px; white-space:nowrap; }
.s-pro-bs .c-as-rate { font-weight:600; opacity:.85; font-size:13.5px; }
.s-pro-alt { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:14px;
             font-weight:600; color:var(--gold-dk); text-decoration:none; }
.s-pro-alt:hover { text-decoration:underline; }

  /* ── THE WRAPPER IS TRANSPARENT. A page's own `.x span { … }` rules also
     match the span t() wraps a string in — "Not sure who to ask?" came out
     at the 13px of `.as-ask-h span` instead of its heading's 18px, and the
     "Available now" words were drawn as the badge's 7px dot. So the wrapper
     draws no box and takes its type from its parent, whatever else matches
     it. :root lifts this above any `.x span`; the Hindi rules below are
     more specific again. ── */
  :root [data-hi] { display:contents; font:inherit; color:inherit;
                    letter-spacing:inherit; text-transform:inherit; }
  /* ── the swap (lib/i18n.py): hidden until it has happened, never
     English first, and shown anyway after 1.2 s if the script failed. ── */
  :root[data-lang="hi"]:not(.l-ready) [data-hi] {
    visibility:hidden; animation:l-late 0s 1.2s forwards; }
  @keyframes l-late { to { visibility:visible; } }
  /* Devanagari's matras sit above and below the line; at the body's 1.5 a
     second line's ि touches the first line's ु. */
  :root[data-lang="hi"][data-i18n] body { line-height:1.6; }
  /* THE APP'S HINDI RULE (CLAUDE.md, rule 15): under 15px goes up by 2,
     never past 15 — Devanagari at 10–13px is not readable on a phone.
     max(1em, min(1em + 2px, 15px)) is that rule in one line.
     And no tracking, caps or slant: letter-spacing pulls a conjunct apart
     ("आ ज"), and Devanagari has no italic, only a fake slant. */
  :root[data-lang="hi"] [data-hi] {
    font-size:max(1em, min(calc(1em + 2px), 15px));
    letter-spacing:0; text-transform:none; font-style:normal; }
  :root[data-lang="hi"] [data-hi] [data-hi] { font-size:1em; }
  /* The same for small caps-and-tracking labels a script writes in Hindi,
     which carry no data-hi: "आगे पूछें", a caption's name. */
  :root[data-lang="hi"] .cv-next-l, :root[data-lang="hi"] .cl-cap i,
  :root[data-lang="hi"] .d-mkt, :root[data-lang="hi"] .d-grp b {
    letter-spacing:0; text-transform:none; }
  /* AND NOT MONO. The shell's section rule, the small field labels and the
     section head are set in the mono face for English positions; the data-hi
     wrapper inherits that face, so untracking alone left Devanagari in a
     typewriter font, still reading spaced out. One rule here rather than an
     override on every page (dasha, transits and kundli each grew one). */
  :root[data-lang="hi"] .d-mkt, :root[data-lang="hi"] .h-f-l,
  :root[data-lang="hi"] .c-sh-t, :root[data-lang="hi"] .d-mkd {
    font-family:var(--font-sans); letter-spacing:0; text-transform:none;
    font-style:normal; }

  /* The switch in the top bar. */
  .d-lang { display:inline-flex; padding:3px; border-radius:var(--r-pill);
            border:1px solid var(--line); background:var(--surface); }
  .d-lang button { font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
                   min-width:36px; min-height:30px; padding:0 9px; border:0;
                   border-radius:var(--r-pill); background:none; color:var(--ink-2); }
  .d-lang button[aria-pressed="true"] { background:var(--ink); color:var(--surface); }
  .d-lang button:focus-visible { outline:2px solid var(--gold); outline-offset:1px; }
  @media (pointer:coarse) { .d-lang button { min-height:40px; min-width:40px; } }
  /* ON A PHONE, ONLY THE WAY OUT. Both halves cost the bar ~90px at 390,
     which came straight out of the profile chip and ellipsed the name. The
     half that is already on says nothing a reader can act on; the other one
     is the switch. */
  @media (max-width:620px) {
    .d-lang { padding:0; }
    .d-lang button[aria-pressed="true"] { display:none; }
  }

  /* ── the welcome gift ── */
  .d-bon { position:fixed; inset:0; z-index:60; display:flex;
           align-items:center; justify-content:center; padding:20px; }
  .d-bon[hidden] { display:none; }
  .d-bon-x { position:absolute; inset:0; background:rgba(0,0,0,.5); }
  .d-bon-c { position:relative; width:100%; max-width:390px; text-align:center;
             padding:26px 26px 20px; border-radius:18px;
             border:1px solid var(--line); background:var(--surface);
             box-shadow:0 18px 50px rgba(0,0,0,.22);
             max-height:calc(100dvh - 40px); overflow-y:auto; }
  .d-bon-g { display:inline-flex; align-items:center; justify-content:center;
             width:62px; height:62px; border-radius:50%;
             background:var(--gold-bg); color:var(--gold-dk);
             margin-bottom:13px; }
  .d-bon-c h2 { font-family:var(--font-serif); font-size:23px; font-weight:600;
                margin:0; color:var(--ink); letter-spacing:-.01em; }
  .d-bon-s { margin:5px 0 16px; font-size:13.5px; color:var(--ink-2); }
  .d-bon-amt { padding:15px; border-radius:var(--r-card);
               background:var(--gold-bg); margin-bottom:16px; }
  .d-bon-amt span { display:block; font-family:var(--font-mono);
                    font-size:10px; letter-spacing:.14em; color:var(--ink-3);
                    text-transform:uppercase; }
  .d-bon-amt b { display:block; margin:5px 0 4px; font-family:var(--font-serif);
                 font-size:38px; font-weight:600; line-height:1;
                 color:var(--gold-dk); }
  .d-bon-amt i { font-style:normal; font-size:12px; color:var(--ink-2); }
  .d-bon-l { list-style:none; margin:0 0 18px; padding:0; display:grid;
             gap:8px; text-align:left; }
  .d-bon-l li { position:relative; padding-left:20px; font-size:13px;
                color:var(--ink-2); }
  .d-bon-l li::before { content:''; position:absolute; left:4px; top:.5em;
                width:6px; height:6px; border-radius:50%;
                background:var(--gold-dk); }
  .d-bon-go { position:relative; width:100%; }
  .d-bon-go .d-bon-lb { transition:opacity .12s linear; }
  .d-bon-go[aria-busy="true"] .d-bon-lb { opacity:0; }
  .d-bon-go[aria-busy="true"] { pointer-events:none; }
  .d-bon-sp { position:absolute; top:50%; left:50%; width:20px; height:20px;
              margin:-10px 0 0 -10px; opacity:0; pointer-events:none; }
  .d-bon-go[aria-busy="true"] .d-bon-sp { opacity:1; }
  .d-bon-no { display:block; width:100%; margin-top:9px; font:inherit;
              font-size:12.5px; padding:7px; border:0; background:none;
              color:var(--ink-3); cursor:pointer; }
  .d-bon-no:hover { color:var(--ink-2); text-decoration:underline; }
  .d-bon-e { margin:9px 0 0; font-size:12.5px; color:var(--bad); }
  .d-bon-e[hidden] { display:none; }

  /* The row for whoever closed it. Money nobody has taken should not be
     invisible because a modal was dismissed once. */
  .d-bonr { display:flex; align-items:center; gap:13px; flex-wrap:wrap;
            padding:13px 16px; margin:0 0 18px;
            border:1px solid var(--gold); border-radius:var(--r-card);
            background:var(--gold-bg); }
  .d-bonr[hidden] { display:none; }
  .d-bonr-g { flex:none; color:var(--gold-dk); display:flex; }
  .d-bonr-t { flex:1 1 210px; min-width:0; font-size:13.5px; color:var(--ink); }
  .d-bonr-t b { font-weight:650; }
  .d-bonr-x { flex:none; font:inherit; font-size:12.5px; border:0;
              background:none; color:var(--ink-3); cursor:pointer;
              padding:6px 8px; }
  .d-bonr-x:hover { color:var(--ink-2); text-decoration:underline; }

  /* ── shell ── */
  .d-shell { display:grid; grid-template-columns:248px minmax(0,1fr);
             min-height:100vh; background:var(--cream); }
  .d-col2 { min-width:0; }
  .d-rail { background:var(--rail); border-right:1px solid var(--line);
            padding:16px 12px 12px; display:flex; flex-direction:column;
            gap:3px; position:sticky; top:0; height:100vh; overflow-y:auto; }
  .d-brand { display:flex; align-items:center; gap:10px; padding:4px 8px 16px;
             color:inherit; text-decoration:none;
             font-family:var(--font-serif); font-size:16px; font-weight:600; }
  .d-grp { margin-top:14px; padding:0 8px 6px; }
  .d-grp b { display:block; font-family:var(--font-mono); font-size:9.5px;
             letter-spacing:.14em; text-transform:uppercase; font-weight:600;
             color:var(--ink-3); }
  .d-grp i { display:block; font-family:var(--font-serif); font-style:italic;
             font-size:11.5px; color:var(--ink-3); }
  .d-nav { display:flex; align-items:center; gap:10px; padding:9px 10px;
           border-radius:var(--r-in); font-size:13.5px; font-weight:500;
           color:var(--ink-2); text-decoration:none; min-height:40px; }
  .d-nav:hover { background:var(--surface); color:var(--ink); }
  .d-nav .c-ico { width:18px; height:18px; flex:none; }
  .d-nl { flex:1; min-width:0; }
  .d-on { background:var(--pill-ink); color:var(--pill-text); font-weight:650; }
  .d-tail { font-family:var(--font-mono); font-size:10px; padding:1px 5px;
            border-radius:5px; background:var(--gold-bg); color:var(--gold-dk); }
  .d-on .d-tail { background:var(--surface); color:var(--ink); }
  .d-acct { position:relative; margin-top:auto; padding-top:12px;
            border-top:1px solid var(--line); }
  .d-acct-c { display:flex; align-items:center; gap:9px; padding:9px;
              border:1px solid var(--line); border-radius:var(--r-in);
              background:var(--surface); text-decoration:none;
              cursor:pointer; }
  .d-acct-c:hover { border-color:var(--gold-lt); }
  .d-acct-c .c-ico { flex:none; color:var(--ink-3);
                     transition:transform .16s; }
  #d-ac-o:checked ~ .d-acct-c .c-ico { transform:rotate(180deg); }
  /* UPWARD. It is the last thing in the rail with the viewport floor under
     it, so a menu hanging below it would open off the bottom of the screen.
     Same checkbox the profile switcher uses rather than the prototype's
     :hover, which on a touch screen is a menu that opens and will not close. */
  .d-ac-m { display:none; position:absolute; left:0; right:0;
            bottom:calc(100% + 7px); z-index:40; padding:6px;
            border-radius:var(--r-card); background:var(--surface);
            border:1px solid var(--line);
            box-shadow:0 18px 44px -18px rgba(0,0,0,.5); }
  #d-ac-o:checked ~ .d-ac-m { display:block; }
  .d-ac-x { display:none; }
  #d-ac-o:checked ~ .d-ac-x { display:block; position:fixed; inset:0;
                              z-index:35; }
  .d-ac-i { display:flex; align-items:center; gap:11px; width:100%;
            padding:9px 10px; border:0; border-radius:var(--r-in);
            background:none; cursor:pointer; text-align:left; font:inherit;
            font-size:13px; color:var(--ink); text-decoration:none; }
  .d-ac-i:hover { background:var(--surface-2); }
  .d-ac-i .c-ico { flex:none; color:var(--ink-3); }
  .d-ac-sep { height:1px; background:var(--line); margin:5px 8px; }
  /* No icon, and the only red thing in the rail: it is the one row here that
     does something rather than going somewhere. */
  .d-ac-out { padding-left:37px; color:var(--bad); font-weight:600; }
  @media (prefers-reduced-motion:reduce) {
    .d-acct-c .c-ico { transition:none; }
  }
  .d-av { width:30px; height:30px; border-radius:50%; flex:none;
          display:grid; place-items:center; font-size:12px; font-weight:700;
          background:var(--gold-solid); color:var(--gold-solid-text); }
  .d-who { min-width:0; flex:1; }
  .d-who b { display:block; font-size:13px; color:var(--ink); }
  .d-who i { display:block; font-style:normal; font-size:11.5px;
             color:var(--ink-3); }

  /* ── top bar ── */
  .d-top { display:flex; align-items:center; gap:12px; padding:11px 22px;
           border-bottom:1px solid var(--line); background:var(--cream);
           position:sticky; top:0; z-index:20; }
  .d-crumb { font-size:13px; color:var(--ink-3); min-width:0; }
  .d-crumb b { color:var(--ink); font-weight:600; }
  .d-tb { margin-left:auto; display:flex; align-items:center; gap:8px; }
  .d-chip { display:flex; align-items:center; gap:6px; font-size:12.5px;
            padding:6px 11px; border:1px solid var(--line);
            border-radius:var(--r-pill); background:var(--surface); }
  .d-chip i { font-style:normal; font-family:var(--font-mono); font-size:9.5px;
              letter-spacing:.05em; padding:1px 5px; border-radius:4px;
              background:var(--gold-bg); color:var(--gold-dk); }
  .d-wallet { display:flex; align-items:center; gap:7px; font-size:13px;
              font-weight:700; padding:6px 7px 6px 12px; text-decoration:none;
              border-radius:var(--r-pill); border:1px solid var(--gold);
              background:var(--gold-bg); color:var(--gold-dk); }
  .d-plus { display:grid; place-items:center; width:18px; height:18px;
            border-radius:50%; background:var(--gold-solid);
            color:var(--gold-solid-text); font-size:12px; line-height:1; }
  .d-burger { display:none; }
  .d-scrim { display:none; }

  /* ── main ── */
  /* FILLS THE SCREEN, at every width. It stopped at --wrap (1360px) pinned
     to the left, so a 1920px monitor showed 312px of empty cream on the
     right of every signed-in page, and 2560px showed 952. Rohit's call, 27
     Sep 2026: fill the column, no cap and no centring. */
  .d-main { padding:26px 22px 56px; max-width:none; }
  .d-h1 { font-family:var(--font-serif); font-size:clamp(27px,3.2vw,42px);
          line-height:1.08; letter-spacing:-.015em; font-weight:600;
          margin:0 0 9px; text-wrap:balance; }
  .d-h1 em { font-style:italic; color:var(--gold-dk); }
  .d-sub { display:flex; align-items:baseline; gap:8px; margin:0;
           color:var(--ink-2); font-size:14.5px; line-height:1.6;
           max-width:640px; }
  .d-sub b { color:var(--ink); font-weight:650; }
  /* NOT .d-dot. This CSS used to live inside /home/ where a page owned its
     own class names; moving it into lib/ made every name here global, and
     pages/views/biorhythm.py has been drawing its chart's data points with
     a .d-dot for months. The shell is the newcomer, so the shell renames. */
  /* Prose links. Scoped to <p> on purpose: every signed-in page puts the
     odd link in a caption or an empty-state sentence, and without this they
     render browser-default blue in the middle of a gold page. Anchors that
     are structure rather than prose — rail items, rashi tiles, roster cards,
     the profile menu — are never inside a paragraph, so they keep their own
     styling and this cannot reach them. */
  .d-main p a { color:var(--gold-dk); text-underline-offset:2px; }
  .d-main p a:hover { color:var(--gold); }

  .d-live { width:7px; height:7px; border-radius:50%; background:var(--good);
           flex:none; }
  /* WRAP, so on a phone a long title keeps the width and the grey line goes
     under it — unwrapped, "Favourable Days of the Month" and its aside were
     squeezed into two narrow columns side by side. */
  .d-mk { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px;
          margin:32px 0 13px; }
  .d-mk0 { margin:0 0 13px; }
  /* PLAIN HEADINGS. These were "01 · YOUR KUNDLI · at a glance": a number,
     tracked mono capitals and a serif italic aside, which reads as a design
     magazine to somebody who came for their rashifal. A heading in the
     page's own face, in title case, says the same thing the way every
     app they use says it; the number says nothing a reader acts on. */
  .d-mkn { display:none; }
  /* An h2/h3 now, so the browser's own heading margin and 1.5em size have
     to go — the row is a flex baseline and a UA margin would shove it. */
  .d-mkt { font-family:var(--font-sans); font-size:19px; line-height:1.3; letter-spacing:0;
           text-transform:none; font-weight:700; margin:0; color:var(--ink); }
  .d-mkd { font-family:var(--font-sans); font-style:normal; font-size:14px;
           color:var(--ink-3); }
  .d-card { background:var(--surface); border:1px solid var(--line);
            border-radius:var(--r-card); padding:20px; }
  /* minmax(0,1fr): a bare grid column is as wide as its widest child, and
     a row of fixed-width tabs inside a card pushed the card off a phone. */
  .d-row { display:grid; gap:15px; grid-template-columns:minmax(0,1fr); }
  .d-row > * { min-width:0; }
  /* THE LEFT CARD SETS THE HEIGHT AND BEST HOURS FITS ITSELF INTO IT.
     Stretching the pair to their tallest is not the same thing: the tallest
     is whichever has more to say, so the void simply moves to the other
     column — which is exactly what happened when Best hours grew from three
     rows to seven. The slot is an empty positioned box, so it contributes
     nothing to the row; the card fills the slot absolutely and gives up
     rows to its scroller instead of giving up its shape.

     min-height so the pair cannot collapse when the left card is in one of
     its short states — no birth details, or a chart that would not load. */
  @media (min-width:980px) {
    .d-2 { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
    .d-hslot { position:relative; min-height:280px; }
    .d-hslot > .d-hrs { position:absolute; inset:0; }
  }
  /* On one column there is nothing to match, so the card is its own height
     and the whole list is simply there. */
  @media (max-width:979.98px) { .d-hslot { display:contents; } }
  .d-read { font-size:14.5px; line-height:1.65; color:var(--ink-2); margin:0; }
  .d-read b { color:var(--ink); font-weight:650; }

  /* ── profile switcher ── */
  .d-pf { position:relative; }
  .d-pf-t { display:flex; align-items:center; gap:9px; cursor:pointer;
            padding:5px 9px 5px 6px; border:1px solid var(--line);
            border-radius:var(--r-pill); background:var(--surface);
            max-width:230px; }
  .d-pf-t:hover { border-color:var(--gold-lt); }
  .d-pf-n { min-width:0; text-align:left; }
  .d-pf-n b { display:block; font-size:12.5px; font-weight:650; color:var(--ink);
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .d-pf-n i { display:block; font-style:normal; font-family:var(--font-mono);
              font-size:10px; color:var(--ink-3); }
  .d-pf-t .c-ico { flex:none; color:var(--ink-3); }
  .d-pf-m { display:none; position:absolute; top:calc(100% + 7px); left:0;
            z-index:40; min-width:250px; padding:6px; border-radius:var(--r-card);
            background:var(--surface); border:1px solid var(--line);
            box-shadow:0 18px 44px -18px rgba(0,0,0,.5); }
  /* The input sits INSIDE .d-top, so the menu and the catcher are its
     siblings there — not descendants of .d-shell, which is what the
     first version reached for and never matched. */
  #d-pf-o:checked ~ .d-pf .d-pf-m { display:block; }
  /* A full-screen catcher so the next click anywhere closes it — without one
     the menu stays open behind whatever you clicked next. */
  .d-pf-x { display:none; }
  #d-pf-o:checked ~ .d-pf-x { display:block; position:fixed;
            inset:0; z-index:35; }
  .d-pf-i { display:flex; align-items:center; gap:9px; width:100%;
            padding:8px 9px; border:0; border-radius:var(--r-in);
            background:none; cursor:pointer; text-align:left;
            text-decoration:none; font:inherit; }
  .d-pf-i:hover { background:var(--surface-2); }
  .d-pf-on { background:var(--gold-bg); }
  .d-pf-on .d-pf-n b { color:var(--gold-dk); }
  .d-pf-add { border-top:1px solid var(--line-soft); border-radius:0 0 9px 9px;
              margin-top:4px; padding-top:11px; }
  .d-pf-add .d-av { background:var(--surface-2); color:var(--ink-2); }
  /* max-width:150px used to sit here too and had never once applied: the
     phone block further down sets max-width:none at the same specificity and
     later in the file, so it won every time. The date of birth is what this
     rule is actually for. */
  @media (max-width:560px) { .d-pf-n i { display:none; } }

  /* ── waiting ── */
  /* A grey block the shape of the answer, not a spinner in the middle of an
     empty page: the layout is already correct, so nothing jumps when the real
     values land. */
  /* A SWEEP, NOT A PULSE. The old rule faded --line-soft in and out, and
     --line-soft sits 1.07:1 against the card it lies on in dark — so the bar
     was invisible at its brightest and more invisible at its dimmest, which
     reads as a page that has finished loading and has nothing to say. The
     band travelling left to right is the part that says "still coming"; the
     bar underneath it is what says "and it will be about this big". */
  .d-sk { display:block; min-height:1em; width:100%; border-radius:6px;
          /* The &nbsp; that gives the span its height must not be seen. */
          color:transparent; user-select:none;
          background-color:var(--sk);
          background-image:linear-gradient(100deg, rgba(0,0,0,0) 34%,
                           var(--sk-hi) 50%, rgba(0,0,0,0) 66%);
          background-size:280% 100%; background-repeat:no-repeat;
          animation:d-sheen 1.45s linear infinite; }
  .d-sk + .d-sk { margin-top:7px; }
  @keyframes d-sheen { from { background-position:170% 0; }
                       to { background-position:-70% 0; } }
  /* Stationary, not still-but-invisible: reduced motion keeps the bar and
     drops only the travel. */
  @media (prefers-reduced-motion:reduce) {
    .d-sk { animation:none; background-image:none; }
  }

  /* IN A FLEX PARENT A SKELETON COLLAPSES. .d-sub is a flex row, so a
     `<span class="d-sk">&nbsp;</span>` shrink-wrapped its one space and came
     out 3px wide — five screens opened with a crumb of grey under the
     headline where a line of type was about to appear. Width here, and a
     shorter one for the sub, because a full-column bar promises a paragraph
     the line will not deliver. */
  .d-sub .d-sk { flex:0 0 auto; width:min(26ch, 100%); }

  /* Seen only when a live reading could not be fetched and the page is
     showing what was built into it. It is a caveat on real data, not an
     error — amber, in the subtitle, not a banner across the page. It lives
     here because every signed-in page that reads a dated snapshot needs the
     same sentence, and three copies would drift. */
  .d-stale { color:var(--mid); font-size:13px; }
  .d-stale b { color:var(--mid); font-weight:650; }
  /* Same collapse, in the top bar. The profile chip and the wallet pill both
     size to their contents, so a width:100% child resolves against nothing —
     3px and 13px respectively. These are the widths a name and a balance
     actually take, so the chrome does not resize when they arrive. */
  .d-pf-n .d-sk { width:9ch; }
  .d-wallet .d-sk { width:4.5ch; }

  /* ── the rail becomes a drawer ── */
  @media (max-width:900px) {
    .d-shell { grid-template-columns:minmax(0,1fr); }
    .d-burger { display:grid; place-items:center; width:44px; height:44px;
                flex:none; cursor:pointer; border:1px solid var(--line);
                border-radius:10px; background:var(--surface);
                color:var(--ink-2); }
    .d-rail { position:fixed; top:0; left:0; bottom:0; width:264px; z-index:40;
              transform:translateX(-100%); transition:transform .2s ease; }
    #d-menu:checked ~ .d-shell .d-rail { transform:none; }
    #d-menu:checked ~ .d-shell .d-scrim { display:block; position:fixed;
              inset:0; z-index:30; background:rgba(0,0,0,.45); }
    .d-main { padding:20px 16px 48px; }
    .d-top { padding:10px 16px; }
  }
  /* ── ONE ROW ON A PHONE ──
     The bar holds a burger, the profile chip, a breadcrumb, a date, a wallet
     and the theme toggle: 473px of controls in 358px at 390. Letting it wrap
     kept everything on screen and made the header 116px of a 844px phone —
     two rows, the second one shoved to the right by margin-left:auto with
     124px of dead space beside it. It read as a header that had come apart,
     not one that had been designed.
     Two things go instead of wrapping. The breadcrumb, because it names the
     page a reader is looking at. And the date chip, because it is the only
     thing on the bar that is not a control — every page that turns on the
     date says so in its own heading, and what a phone needs up here is the
     way out (burger), who this is cast for (profile), and the money.
     What is left is 191px of fixed controls, so the profile takes the rest
     and truncates. That is why .d-pf gets min-width:0: it is a flex item, its
     min-width defaults to its content, and without this the name would push
     the wallet off the edge rather than ellipsing — the same trap that gave
     the roster card a 326px floor. */
  @media (max-width:620px) {
    .d-top { flex-wrap:nowrap; gap:8px; }
    .d-crumb { display:none; }
    .d-chip { display:none; }
    .d-tb { margin-left:auto; flex:none; gap:8px; }
    /* FITS ITS NAME, and shrinks only when the row runs out. flex defaults to
       0 1 auto, so the chip is as wide as its contents and no wider; the
       max-width is the ceiling a long name truncates at, and min-width:0 is
       what lets it give way at 320 rather than widening the page.
       It used to be flex:1 1 auto with width:100%, which stretched it across
       whatever the bar had spare — a chip holding "Rohit Singh" sat 167px
       wide with the name floating in the left third of it. */
    .d-pf { min-width:0; }
    .d-pf-t { max-width:190px; }
  }
  @media (prefers-reduced-motion:reduce) { .d-rail { transition:none; } }
  /* ── 11px IS THE FLOOR ON A PHONE, EVERYWHERE INSIDE THE SHELL ──
     Thirty-six rules across four files set text between 8.5px and 10.5px on
     these pages: axis labels, table headings, row labels, the segment names
     inside the dasha bars, date pills, the notification-time caption. Each was
     a fair call at 1280px, where the same component has half again the room.
     On a phone they are collectively most of the words on the screen, and
     8.5px is not a size anybody reads on a bus.
     ONE BLOCK, NOT THIRTY-SIX EDITS, because scattering the same override
     through four files is how the thirty-seventh gets written at 9px and
     nobody notices. .d-main prefixes every selector because page CSS is
     emitted AFTER the shell's, so this needs specificity rather than position
     to win — and from here it wins wherever the base rule lives.
     Anything that genuinely cannot hold 11px gets room made for it instead of
     being allowed back under the floor.
     THREE OF THESE WERE INVISIBLE LOCALLY. .d-fx (the dashboard's tithi /
     nakshatra / yoga / karana row) and .c-tl-now (the "now" marker on the day
     timeline) only render when there is live panchang data, and a local build
     runs with COSMIQE_STALE_OK=1. They were found by running the check
     against production after deploying, which is now the only way to see
     them — worth remembering before trusting a local pass on these pages. */
  @media (max-width:640px) {
    .d-main .c-lb-i i,
              .d-main .c-pf-l,
              .d-main .c-scl-l,
              .d-main .c-scl-t,
              .d-main .c-scl-tag,
              .d-main .c-scl-v,
              .d-main .c-table th,
              .d-main .c-tl-c b,
              .d-main .c-tl-lbl,
              .d-main .c-tl-night i,
              .d-main .c-tl-now i,
              .d-main .d-fx s,
              .d-main .d-fx i,
              .d-main .c-tl-t i,
              .d-main .d-flc s,
              .d-main .d-lk s,
              .d-main .d-ovl,
              .d-main .d-rate,
              .d-main .d-scl,
              .d-main .dl-lab i,
              .d-main .dl-lab s,
              .d-main .dl-life-t,
              .d-main .dl-ls b,
              .d-main .dl-ls i,
              .d-main .dl-seg,
              .d-main .dl-sg-h s,
              .d-main .dl-sg-r s,
              /* .dl-tbl th was here. The dasha table stacks on a phone and
                 hides its heads, so there is no width at which this rendered
                 — see the block at the end of dasha_app.py. */
              .d-main .h-dl-r .h-dl-pc,
              .d-main .h-f-b u,
              .d-main .h-f-bn,
              .d-main .h-f-hint,
              .d-main .h-f-l,
              .d-main .h-f-luck-t,
              .d-main .h-f-tile i,
              .d-main .h-trend,
              /* ── THE THREE THAT MIX THEIR OWN TEXT WITH A CHILD ──
                 Missed for a reason in the checks rather than in the page:
                 shell-mobile.mjs only measured elements with no element
                 children at all, so anything shaped like
                 <text>Finance<tspan>87</tspan></text> or
                 <span><svg/>Tithi<i>…</i></span> was never looked at, on five
                 horoscope pages and panchang. The eyebrow is 10.5, the anga
                 heading 10, and the radar label 8.5 in an SVG that renders it
                 at 9.0 on a 320 screen. */
              .d-main .h-f-eyebrow,
              .d-main .h-radar-l,
              .d-main .p-anga-h,
              .d-main .p-ch-h,
              .d-main .p-per-h,
              .d-main .p-sum i { font-size:11px; }
  }
  /* THE DAY STRIP'S ROW NAMES AS PLAIN LABELS, like every other label behind
     sign-in: Tithi, Nakshatra, Choghadiya in the page's face, not spaced
     mono capitals. After the floor above so its 12px wins at every width. */
  .d-main .c-tl-lbl { font-family:var(--font-sans); font-size:12px;
                      letter-spacing:0; text-transform:none; }

  /* ── the city index ────────────────────────────────── */
  .pg-ct { display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  @media (min-width:560px) { .pg-ct { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media (min-width:860px) { .pg-ct { grid-template-columns:repeat(5,minmax(0,1fr)); } }
  .pg-ct-i { display:flex; flex-direction:column; gap:1px; min-width:0;
             padding:9px 12px; border:1px solid var(--line);
             border-radius:var(--r-in); background:var(--surface);
             text-decoration:none; color:var(--ink); }
  .pg-ct-i:hover { border-color:var(--gold); }
  .pg-ct-on { border-color:var(--gold); background:var(--gold-bg); }
  .pg-ct-i b { font-size:13.5px; font-weight:600; overflow:hidden;
               text-overflow:ellipsis; white-space:nowrap; }
  /* The sunrise is the point: it is what differs, so it is on the tile. */
  .pg-ct-i i { font-style:normal; font-family:var(--font-mono); font-size:11.5px;
               color:var(--ink-3); }

  /* The line the repaint inserts when the built snapshot is not today. Quiet
     — it is a note about provenance, not a warning: the figures above it are
     correct, which is the whole point of it appearing. */
  .p-live { margin:12px 0 0; padding:9px 13px; border-radius:var(--r-in);
            border:1px solid var(--line); background:var(--surface-2);
            font-size:12.5px; line-height:1.55; color:var(--ink-2); }

  /* ── the day's vrat and festivals ──────────────────── */
  .p-obs { margin:18px 0 0; padding:16px 18px; border-radius:var(--r-card);
           border:1px solid var(--gold-lt); background:var(--gold-bg); }
  .p-obs-h { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:650;
             color:var(--gold-dk); margin-bottom:10px; }
  .p-obs-g { display:grid; gap:10px; grid-template-columns:1fr; }
  @media (min-width:760px) { .p-obs-g { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } }
  .p-obs-i { display:flex; flex-direction:column; gap:3px; padding:12px 14px;
             border-radius:var(--r-in); background:var(--surface); border:1px solid var(--line); }
  .p-obs-k { font-size:12px; font-weight:600; color:var(--ink-3); }
  .p-obs-i b { font-size:17px; font-weight:700; color:var(--ink); }
  .p-obs-i b a { color:inherit; text-decoration-color:var(--gold-lt); }
  .p-obs-i p { margin:2px 0 0; font-size:14.5px; line-height:1.55; color:var(--ink-2); }
  .p-obs-shraddh { border-left:3px solid var(--gold); }
  .p-caut { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
  .p-caut li { display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline; font-size:14px;
               line-height:1.5; color:var(--ink-2); }
  .p-caut li b { color:var(--bad); font-weight:650; }

  /* ── the day's frame: samvat to disha shool ─────────── */
  .p-facts { display:grid; gap:14px 20px; grid-template-columns:repeat(2,minmax(0,1fr));
             padding:16px 18px; margin:18px 0 26px; border-radius:var(--r-card);
             border:1px solid var(--line); background:var(--surface); }
  @media (min-width:620px) { .p-facts { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media (min-width:1000px) { .p-facts { grid-template-columns:repeat(6,minmax(0,1fr)); } }
  .p-facts span { display:flex; flex-direction:column; gap:3px; min-width:0; }
  .p-facts i { font-style:normal; font-size:12px; font-weight:600; color:var(--gold-dk); }
  .p-facts b { font-size:15px; font-weight:650; line-height:1.35; }
  .p-keep { margin-top:14px; }
  /* ── the city box: one pill ─────────────────────────── */
  .p-city { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
            gap:8px 14px; margin:0 auto 20px; }
  .p-city-f { display:flex; align-items:center; width:min(100%, 380px); height:46px;
              border:1px solid var(--gold-lt); border-radius:999px; background:var(--surface);
              padding:0 14px 0 12px; gap:8px; }
  .p-city-f:focus-within { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-bg); }
  .p-city-pin { display:grid; place-items:center; color:var(--gold-dk); cursor:text; flex:none; }
  .p-city-f input { flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent;
                    font:inherit; font-size:15.5px; font-weight:600; color:var(--ink); }
  .p-city-f input::placeholder { font-weight:400; color:var(--ink-3); }
  .p-city-s { display:grid; place-items:center; color:var(--ink-3); flex:none; }
  .p-city-f .c-ac-l { left:0; right:0; top:calc(100% + 6px); }
  /* The zone ("Asia/Kolkata") is the form's business, not the reader's. */
  .p-city-f .c-ac-o em { display:none; }
  .p-city-x { font-size:14px; font-weight:600; color:var(--gold-dk); }
  .p-cities { margin-top:18px; }
  /* The timeline and date strip at AA (the panchang review, 27 Sep 2026):
     the NOW label was gold text on the track (2.3:1), the choghadiya names
     red/green on their own tint (4.2-4.4:1), the active date's sub-label
     3.96:1. The tone stays in the chip's ground; the words go to ink.
     Public only: the signed-in page shares this sheet. */
  .p-tlx .c-tl-now i { background:var(--gold-solid); color:var(--gold-solid-text);
                       padding:1px 5px; border-radius:4px; }
  .p-tlx .c-tl-c b, .p-tlx .c-tl-c.c-tl-good b { color:var(--ink); }
  [data-p-dates] .c-dt-p.c-on i { color:var(--ink-2); }
  /* The Hindi rule: under 15px, two more in Hindi. */
  html[lang="hi"] .p-tlx .c-tl-t i, html[lang="hi"] .p-tlx .c-tl-lbl,
  html[lang="hi"] .p-tlx .c-tl-night i, html[lang="hi"] .p-tlx .c-tl-now i { font-size:11.5px; }
  html[lang="hi"] .p-tlx .c-tl-e { font-size:12px; }
  html[lang="hi"] .p-tlx .c-tl-t i { white-space:nowrap; }
  html[lang="hi"] .p-tlx .c-tl-c b { font-size:11.5px; }
  html[lang="hi"] .p-tlx .c-tl-sun i { font-size:13px; }
  html[lang="hi"] [data-p-delhi] .c-cal-wd, html[lang="hi"] [data-p-delhi] .c-cal-t { font-size:11.5px; }
  html[lang="hi"] [data-p-delhi] .c-cal-f, html[lang="hi"] [data-p-delhi] .c-cal-r { font-size:11px; }
  html[lang="hi"] .pg-ct-i i { font-size:13px; }
  html[lang="hi"] [data-p-dates] .c-dt-p i { font-size:11.5px; }
  .p-cities > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:14.5px; font-weight:600; color:var(--gold-dk);
                        list-style:none; }
  .p-cities > summary::-webkit-details-marker { display:none; }
  .p-cities > summary::before { content:'+ '; }
  .p-cities[open] > summary::before { content:'‘2  '; }
  .p-cities .pg-ct { margin-top:14px; }
  .p-obs-h { flex-wrap:wrap; }
  .p-obs-h i { flex-basis:100%; font-style:normal; font-weight:500; color:var(--ink-2); padding-left:24px; }
  .p-strip { margin-top:16px; }
  html[lang="hi"] .p-anga-h, html[lang="hi"] .p-per-h, html[lang="hi"] .p-ch-h {
    letter-spacing:0; text-transform:none; font-family:inherit; font-size:13.5px; }

  /* ── the six facts that frame the day ──────────────── */
  .p-sum { display:grid; gap:14px 20px; grid-template-columns:repeat(2,1fr);
           padding:16px 18px; margin:22px 0 26px; border-radius:var(--r-card);
           border:1px solid var(--line); background:var(--surface); }
  @media (min-width:620px) { .p-sum { grid-template-columns:repeat(3,1fr); } }
  @media (min-width:960px) { .p-sum { grid-template-columns:repeat(6,1fr); } }
  .p-sum span { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .p-sum i { font-style:normal; font-family:var(--font-mono); font-size:9.5px;
             letter-spacing:.11em; text-transform:uppercase; color:var(--gold-dk); }
  .p-sum b { font-size:14.5px; font-weight:650; }

  /* ── the five angas ────────────────────────────────── */
  /* Two across on a phone as well. The five limbs are short cards — a name,
     a time and one line — and one per row made the section five screens of
     scrolling before the day's own timeline. 360 is the floor the report
     shelf uses, and for the same reason: at 320 the card is too narrow for
     its own heading. */
  .p-angas { display:grid; gap:12px; grid-template-columns:1fr; }
  @media (min-width:360px) {
    .p-angas { gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  @media (min-width:560px) { .p-angas { gap:12px;
                                        grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1000px) { .p-angas { grid-template-columns:repeat(5,1fr); } }
  .p-angas > * { min-width:0; }
  /* Four limbs sit 2×2; the fifth, vara, takes the whole last row rather
     than half of it beside a hole (the panchang review, 27 Sep 2026). */
  @media (min-width:360px) and (max-width:999px) {
    .p-angas > [data-pa="vara"]:last-child { grid-column:1 / -1; }
  }
  .p-anga { display:flex; flex-direction:column; gap:6px; padding:15px 16px;
            border:1px solid var(--line); border-radius:var(--r-card);
            background:var(--surface); }
  .p-anga-h { display:grid; grid-template-columns:auto 1fr; gap:2px 7px;
              align-items:center;
              font-family:var(--font-mono); font-size:10px; letter-spacing:.11em;
              text-transform:uppercase; color:var(--gold-dk); }
  .p-anga-h svg { color:var(--gold-dk); grid-row:1; }
  .p-anga-h i { grid-column:1 / -1; font-style:normal; letter-spacing:0;
                text-transform:none; font-size:11px; color:var(--ink-3); }
  .p-anga > b { font-size:17px; font-weight:700; line-height:1.25; }
  .p-anga-x { font-size:12.5px; color:var(--ink-3); }
  /* How far through it you are. A tithi 95% gone is a different day from one
     that has just begun, and the number is in the data already. */
  .p-anga-b { height:4px; border-radius:3px; background:var(--rail);
              overflow:hidden; margin-top:auto; }
  .p-anga-b span { display:block; height:100%; width:var(--p);
              background:var(--gold-solid); border-radius:3px; }
  .p-anga-e { font-style:normal; font-size:12px; line-height:1.5;
              color:var(--ink-3); }
  .p-anga-e b { color:var(--ink); font-weight:650; }


  /* ── good and bad hours ────────────────────────────── */
  .p-pers { display:grid; gap:14px; grid-template-columns:1fr; }
  @media (min-width:760px) { .p-pers { grid-template-columns:repeat(2,1fr); } }
  .p-pers > * { min-width:0; }
  .p-per { padding:16px 18px; border-radius:var(--r-card);
           border:1px solid var(--line); background:var(--surface); }
  .p-per-good { border-color:var(--gold-lt); background:var(--gold-bg); }
  .p-per-h { display:block; font-family:var(--font-mono); font-size:10px;
             letter-spacing:.12em; text-transform:uppercase; color:var(--gold-dk);
             margin-bottom:12px; }
  .p-per-bad .p-per-h { color:var(--ink-3); }
  .p-per-i { display:grid; grid-template-columns:1fr auto; gap:2px 14px;
             padding:10px 0; border-top:1px solid var(--line-soft); }
  .p-per-i:first-of-type { border-top:0; padding-top:0; }
  .p-per-i b { font-size:14px; font-weight:650; }
  .p-per-i > span { font-family:var(--font-mono); font-size:13px;
             font-variant-numeric:tabular-nums; text-align:right; }
  .p-per-i em { grid-column:1 / -1; font-style:normal; font-size:12px; font-weight:600; color:var(--ink-2); }
  .p-per-i em::before { content:"\26A0\FE0E  "; color:var(--gold-dk); }
  .p-per-off > b, .p-per-off > span { color:var(--ink-3); text-decoration:line-through; text-decoration-thickness:1px; }
  .p-per-i i { grid-column:1 / -1; font-style:normal; font-size:12px;
             color:var(--ink-3); }

  /* ── choghadiya ────────────────────────────────────── */
  .p-chs { display:grid; gap:18px; grid-template-columns:1fr; }
  @media (min-width:820px) { .p-chs { grid-template-columns:repeat(2,1fr); } }
  .p-chs > * { min-width:0; }
  .p-ch-h { display:block; font-family:var(--font-mono); font-size:10px;
            letter-spacing:.12em; text-transform:uppercase; color:var(--gold-dk);
            margin-bottom:10px; }
  .p-ch td { font-variant-numeric:tabular-nums; }
  .p-ch-g td:first-child { color:var(--gold-dk); font-weight:700; }
  .p-ch-g td:last-child { color:var(--gold-dk); }

  /* ── the section index ─────────────────────────────── */
  .pg-ix { display:grid; gap:10px;
           grid-template-columns:repeat(auto-fill, minmax(258px, 1fr)); }
  .pg-ix-i { display:flex; align-items:flex-start; gap:11px; min-width:0;
             padding:13px 15px; text-decoration:none; color:var(--ink);
             border:1px solid var(--line); border-radius:var(--r-card);
             background:var(--surface); }
  .pg-ix-i:hover { border-color:var(--gold); background:var(--gold-bg); }
  .pg-ix-i svg { flex:none; margin-top:2px; color:var(--gold-dk); }
  .pg-ix-i b { display:block; font-size:14.5px; font-weight:650; }
  .pg-ix-i i { display:block; font-style:normal; font-size:12.5px;
               line-height:1.45; color:var(--ink-3); margin-top:2px; }
  /* The page you are already on is marked and not a link to itself. */
  .pg-ix-on { border-color:var(--gold); background:var(--gold-bg); }

  /* ── today's one answer ────────────────────────────── */
  .pg-now-c { padding:20px 22px; border:1px solid var(--gold-lt);
              border-radius:var(--r-card); background:var(--gold-bg); }
  .pg-now-c b { display:block; font-family:var(--font-serif); font-size:38px;
                font-weight:600; line-height:1.1; margin:6px 0 6px; }
  .pg-now-c i { font-style:normal; font-size:14.5px; line-height:1.6;
                color:var(--ink-2); }

  /* ── the section's tables ──────────────────────────── */
  .pg-t { overflow-x:auto; border:1px solid var(--line);
          border-radius:var(--r-card); background:var(--surface); }
  .pg-t table { width:100%; border-collapse:collapse; min-width:440px; }
  .pg-t th, .pg-t td { text-align:left; padding:10px 14px;
                       border-bottom:1px solid var(--line-soft);
                       font-size:13.5px; vertical-align:baseline; }
  .pg-t thead th { font-family:var(--font-mono); font-size:10px;
                   letter-spacing:.11em; text-transform:uppercase;
                   color:var(--gold-dk); font-weight:700; white-space:nowrap; }
  .pg-t tbody tr:last-child th, .pg-t tbody tr:last-child td { border-bottom:0; }
  .pg-t tbody th { font-weight:650; white-space:nowrap; }
  .pg-t tbody th i { display:block; font-style:normal; font-size:11.5px;
                     font-weight:500; color:var(--ink-3); }
  .pg-t td b { font-weight:650; }
  .pg-t td span { color:var(--ink-3); }
  .pg-now > th, .pg-now > td { background:var(--gold-bg); }
  .pg-now > th:first-child { box-shadow:inset 3px 0 0 var(--gold); }

  /* ── the hora table ────────────────────────────────── */
  .pg-t-h table { min-width:520px; }
  .pg-h-t { font-family:var(--font-mono); font-size:12.5px; white-space:nowrap; }
  .pg-h-t span { padding:0 3px; color:var(--ink-3); }
  .pg-h-l { white-space:nowrap; }
  .pg-h-l svg { vertical-align:-3px; margin-right:6px; color:var(--gold-dk); }
  /* Night is a tint, not a colour: the difference between a day hora and a
     night hora is which side of sunset it falls, and that is a state rather
     than a warning. */
  .pg-h-night > th, .pg-h-night > td { background:var(--surface-2); }
  .pg-h-edge > th, .pg-h-edge > td { border-top:2px solid var(--gold-lt); }

  /* ── the reference list ────────────────────────────── */
  .pg-ref { display:grid; gap:8px;
            grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); }
  .pg-ref-i { display:flex; align-items:baseline; gap:9px; min-width:0;
              padding:9px 12px; font-size:13.5px; color:var(--ink);
              border:1px solid var(--line-soft); border-radius:var(--r-in);
              background:var(--surface); }
  .pg-ref-i b { flex:none; font-family:var(--font-mono); font-size:11px;
                font-weight:700; color:var(--ink-3); }
  .pg-ref-on { border-color:var(--gold); background:var(--gold-bg); }
  .pg-ref-on b { color:var(--gold-dk); }

  .rp-pub .d-main { margin-inline:auto; }
  /* ── the redesigned report pages, prefix rv- ─────────────────────── */
  .rv { --rv-hi: 'Kohinoor Devanagari','Noto Serif Devanagari','Noto Sans Devanagari',
               'Mangal','Nirmala UI',var(--font-serif); }
  .rv [lang="hi"] { font-family:var(--rv-hi); }
  .rv-wrap { max-width:1120px; margin-inline:auto; padding-inline:16px; }
  .rv-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
            min-height:44px; padding:0 18px; border-radius:10px; font-weight:650;
            font-size:14.5px; text-decoration:none; background:var(--gold-solid);
            color:var(--gold-solid-text); border:1px solid var(--gold-solid); }
  .rv-btn:hover { filter:brightness(1.06); }
  .rv-btn:focus-visible, .rv a:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .rv-btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); }

  /* ── the offer banner ── ITS OWN PALETTE, ONE PER THEME. It was one look
     in both, the deep brown of the report covers, and on the cream light
     page that was a near-black slab from another app. Light is now the warm
     saffron-cream of a sweet-shop offer board, with the dark covers standing
     out on it; dark keeps the brown, with a gold edge so it does not melt
     into the page. The tokens are the banner's own (--bn-*) because the
     discount seal and the covers need the same warmth in both. */
  .rv-ban { --bn-bg:linear-gradient(115deg, #FFF4DE 0%, #FDE6B8 55%, #F8D08A 100%);
            --bn-line:rgba(138,90,11,.07); --bn-ink:#2B170A; --bn-accent:#7A4E08;
            --bn-mute:#6E5638; --bn-btn:#5A3313; --bn-btn-ink:#FFF3DF; --bn-btn-hi:#6E4119;
            --bn-dot:rgba(90,51,19,.28); --bn-arrow:rgba(255,255,255,.55);
            --bn-edge:rgba(138,90,11,.22); --bn-shadow:0 10px 28px rgba(138,90,11,.16);
            --bn-fade:#FBDCA0; }
  :root[data-theme="dark"] .rv-ban {
            --bn-bg:radial-gradient(120% 140% at 85% 20%, #5A3313 0%, #2B170A 55%, #1B0F07 100%);
            --bn-line:rgba(232,201,138,.05); --bn-ink:#FFF3DF; --bn-accent:#E8C98A;
            --bn-mute:#CDB693; --bn-btn:#E8C98A; --bn-btn-ink:#2B170A; --bn-btn-hi:#F1D9A6;
            --bn-dot:rgba(255,243,223,.35); --bn-arrow:rgba(0,0,0,.2);
            --bn-edge:rgba(232,201,138,.3); --bn-shadow:0 0 0 1px rgba(232,201,138,.08), 0 14px 34px rgba(0,0,0,.45);
            --bn-fade:#3A200C; }
  .rv-ban-w { background:var(--surface-2); padding:14px 0 0; }
  .rv-ban { position:relative; border-radius:16px; overflow:hidden;
            background:var(--bn-bg); color:var(--bn-ink); border:1px solid var(--bn-edge);
            box-shadow:var(--bn-shadow); }
  .rv-ban::before { content:""; position:absolute; inset:0; pointer-events:none;
            background:repeating-linear-gradient(45deg, var(--bn-line) 0 1px, transparent 1px 22px),
                       repeating-linear-gradient(-45deg, var(--bn-line) 0 1px, transparent 1px 22px); }
  /* The kundli line drawing gave way to each slide's photo. */
  .rv-ban-mark { display:none; }
  .rv-ban-track { position:relative; z-index:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
            scrollbar-width:none; overscroll-behavior-x:contain; }
  .rv-ban-track::-webkit-scrollbar { display:none; }
  .rv-ban-track:focus-visible { outline:2px solid var(--bn-accent); outline-offset:-4px; }
  /* min-width:0 and border-box: with the photo's side padding a slide's
     min-content ran wider than the track, every slide after the first
     started early, and the last one's photo showed down its left edge. */
  .rv-ban-s { position:relative; flex:0 0 100%; min-width:0; max-width:100%; box-sizing:border-box;
            overflow:hidden; scroll-snap-align:start; display:grid;
            grid-template-columns:96px 1fr; gap:16px; align-items:center; padding:128px 18px 46px; }
  @media (min-width:760px) { .rv-ban-s { grid-template-columns:150px minmax(0,1fr); gap:30px;
            padding:26px 42% 50px 40px; } }
  .rv-ban-s > :not(.rv-ban-ph) { position:relative; z-index:1; }
  /* THE PHOTO. On a phone a band across the top that fades down into the
     banner; wider, the right side of the slide, fading left into it. The
     text column stops where the photo starts (padding-right above), so no
     word is ever set on a picture. --bn-fade is the banner's colour at
     that edge, per theme. */
  .rv-ban-ph { position:absolute; left:0; right:0; top:0; height:150px; z-index:0; pointer-events:none; }
  .rv-ban-ph img { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%); }
  .rv-ban-ph::after { content:""; position:absolute; inset:0;
            background:linear-gradient(180deg, transparent 35%, var(--bn-fade) 100%); }
  @media (min-width:760px) {
    .rv-ban-ph { left:auto; top:0; bottom:0; height:auto; width:46%; }
    .rv-ban-ph::after { background:linear-gradient(90deg, var(--bn-fade) 0%, transparent 38%); }
  }
  .rv-ban-art { position:relative; }
  .rv-ban-art img { display:block; width:100%; height:auto; border-radius:8px; transform:rotate(-3deg);
            box-shadow:0 12px 26px rgba(0,0,0,.45); border:1px solid rgba(232,201,138,.35); }
  /* THE SEAL — the discount as a stamped roundel, the shape a sale sticker
     takes on any Indian shop shelf. Empty (and so hidden) until the
     catalogue confirms an offer for this report. */
  /* Bottom corner of the cover, clear of the book's own title and of the
     headline beside it. */
  .rv-ban-seal { position:absolute; left:-10px; bottom:-10px; }
  @media (min-width:760px) { .rv-ban-seal { left:auto; right:-18px; bottom:-8px; } }
  .rv-ban-seal .c-rp-off { display:grid; place-items:center; width:54px; height:54px; margin:0;
            border-radius:50%; background:#C0392B; color:#FFF3DF; border:2px dashed rgba(255,243,223,.7);
            box-shadow:0 0 0 3px #C0392B; font-family:var(--font-sans); font-style:normal;
            font-size:11.5px; font-weight:800; line-height:1.05; text-align:center; letter-spacing:0;
            text-transform:uppercase; padding:4px; transform:rotate(8deg); flex-basis:auto; }
  .rv-ban-seal .c-rp-off[hidden] { display:none; }
  @media (min-width:760px) { .rv-ban-seal .c-rp-off { width:78px; height:78px; font-size:16px; } }
  .rv-ban-k { margin:0; font-size:12.5px; letter-spacing:.02em; color:var(--bn-accent); }
  .rv-ban-k > span:first-of-type:not(.rv-ban-tag) { text-transform:uppercase; letter-spacing:.08em;
            font-family:var(--font-mono); font-size:11px; }
  .rv-ban-tag:not([hidden]) { display:inline-block; margin-right:8px; padding:2px 8px; border-radius:99px;
            background:var(--bn-btn); color:var(--bn-btn-ink); font-weight:700; font-size:11px; }
  .rv-ban-tag i { font-style:normal; }
  .rv-ban-t { margin:6px 0 0; font-family:var(--font-serif); font-size:clamp(19px,3.4vw,30px);
            line-height:1.22; color:var(--bn-ink); text-wrap:balance; max-width:26ch; }
  .rv-ban-t[lang="hi"] { font-family:var(--rv-hi); font-weight:600; line-height:1.4; }
  .rv-ban-pay { margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
  .rv .rv-ban-pr { display:flex; align-items:baseline; gap:8px; width:auto; margin:0;
            justify-content:flex-start; font-family:var(--font-sans); }
  .rv .rv-ban-pr b { flex-basis:auto; font-size:26px; font-weight:800; color:var(--bn-ink);
            font-variant-numeric:tabular-nums; }
  .rv .rv-ban-pr s { font-size:14px; color:var(--bn-mute); }
  .rv-ban-buy { display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
            border-radius:10px; background:var(--bn-btn); color:var(--bn-btn-ink); font-weight:750;
            font-size:14.5px; text-decoration:none; border:0; }
  .rv-ban-buy:hover { background:var(--bn-btn-hi); }
  .rv-ban-more { display:inline-flex; align-items:center; min-height:44px;
            color:var(--bn-accent); font-size:13.5px; font-weight:600; text-decoration:underline;
            text-underline-offset:3px; }
  .rv-ban a:focus-visible, .rv-ban button:focus-visible { outline:2px solid var(--bn-ink); outline-offset:2px; }
  /* z-index:2, above the track's 1: the track covers the whole banner, so
     without it every arrow and dot click landed on a slide instead. */
  .rv-ban-nav { position:absolute; left:0; right:0; bottom:10px; z-index:2; display:flex;
            align-items:center; justify-content:center; gap:12px; pointer-events:none; }
  .rv-ban-nav > * { pointer-events:auto; }
  .rv-ban-dots { display:flex; gap:4px; }
  .rv-ban-dot { width:24px; height:24px; border:0; background:none; padding:0; cursor:pointer;
            display:grid; place-items:center; }
  .rv-ban-dot::before { content:""; width:8px; height:8px; border-radius:99px; background:var(--bn-dot);
            transition:width .25s; }
  .rv-ban-dot[aria-current="true"]::before { width:22px; background:var(--bn-accent); }
  .rv-ban-arrow { width:32px; height:32px; border-radius:50%; border:1px solid var(--bn-edge);
            background:var(--bn-arrow); color:var(--bn-ink); font-size:20px; line-height:1; cursor:pointer;
            display:grid; place-items:center; }
  @media (prefers-reduced-motion:reduce) { .rv-ban-dot::before { transition:none; } }
  @media (pointer:coarse) { .rv-ban-arrow { width:44px; height:44px; } .rv-ban-dot { width:44px; height:44px; }
                             .rv-ban-dots { gap:0; } }
  .rv-ban-w + .rv-head { padding-top:22px; }

  /* head */
  .rv-head { position:relative; overflow:hidden; background:var(--surface-2);
             border-bottom:1px solid var(--line); padding:34px 0 26px; }
  .rv-head .rv-wrap { position:relative; }
  .rv-mark { fill:none; stroke:var(--gold); stroke-width:1.2; vector-effect:non-scaling-stroke; }
  .rv-head .rv-mark { position:absolute; right:16px; top:4px; width:150px; height:150px;
                      opacity:.35; }
  /* On a phone the heading runs the full width, so the mark would sit
     behind the words; it only earns its place where there is room beside. */
  @media (max-width:759px) { .rv-head .rv-mark { display:none; } }
  .rv-sec-h b[lang="en"], .rv-shelf-h h2 b[lang="en"] { font-family:var(--font-serif);
      font-weight:600; }
  .rv-pick-a > b[lang="en"] { font-family:var(--font-serif); font-size:16px; }
  .rv-facts b[lang="en"] { font-family:var(--font-sans); font-size:14px; }
  .rv-moment span[lang="en"] { color:var(--gold-dk); }
  /* The Hindi page: the Hindi name is the title, the English one under it. */
  .rv[lang="hi"] .rv-btn { font-family:var(--rv-hi); font-weight:600; }
  .rv-t-hi { font-family:var(--rv-hi); font-weight:600; font-size:19px; color:var(--ink); }
  .rv-c-en { font-size:12.5px; color:var(--ink-3); margin-top:1px; }
  .rv-c-en:empty, .rv-dh1 span:empty { display:none; }
  .rp-pv-gap { display:none; }
  .rv[lang="hi"] .rv-h1 { font-family:var(--rv-hi); font-weight:600; line-height:1.3; max-width:22ch; }
  .rv[lang="hi"] .rv-c-d, .rv[lang="hi"] .rv-lede, .rv[lang="hi"] .rv-tell li,
  .rv[lang="hi"] .rv-steps span, .rv[lang="hi"] .rv-pandit p, .rv[lang="hi"] .rv-who p
    { line-height:1.7; }
  .rv[lang="hi"] .rv-steps b, .rv[lang="hi"] .rv-pandit b, .rv[lang="hi"] .rv-who b
    { font-family:var(--rv-hi); font-weight:600; }
  .rv[lang="hi"] .rv-eyebrow { font-size:16px; }
  .rv[lang="hi"] .rv-ask { font-family:var(--rv-hi); font-size:14px; letter-spacing:0;
      text-transform:none; color:var(--ink-2); }
  .rv-eyebrow { margin:0 0 4px; font-size:17px; color:var(--gold-dk); font-weight:600; }
  .rv-h1 { margin:0; font-family:var(--font-serif); font-size:clamp(27px,5vw,40px);
           line-height:1.12; color:var(--ink); text-wrap:balance; max-width:20ch; }
  .rv-lede { margin:10px 0 0; max-width:60ch; font-size:15.5px; line-height:1.6;
             color:var(--ink-2); }
  .rv-facts { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px;
              grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rv-facts li { display:flex; flex-direction:column; gap:2px; padding:10px 12px;
                 background:var(--surface); border:1px solid var(--line); border-radius:10px; }
  .rv-facts b[lang="hi"] { font-size:14.5px; color:var(--ink); font-weight:600; }
  .rv-facts span { font-size:12.5px; line-height:1.4; color:var(--ink-3); }
  .rv-facts span b { color:var(--ink-2); font-weight:650; }
  @media (min-width:760px) { .rv-facts { grid-template-columns:repeat(4,minmax(0,1fr)); } }

  /* moment picker */
  .rv-ask { margin:26px 0 10px; font-family:var(--font-mono); font-size:11px;
            letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
  .rv-pick { display:grid; gap:10px; grid-template-columns:1fr; }
  @media (min-width:640px) { .rv-pick { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  .rv-pick-a { display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto;
               column-gap:12px; align-items:center; padding:12px 14px; border-radius:12px;
               background:var(--surface); border:1px solid var(--line); text-decoration:none;
               color:var(--ink); }
  .rv-pick-a:hover { border-color:var(--gold); }
  .rv-pick-a > .rv-pick-i { grid-row:1/3; grid-column:1; display:grid; place-items:center;
               width:38px; height:38px; border-radius:50%; background:var(--gold-bg);
               color:var(--gold-dk); }
  .rv-pick-a > b { grid-row:1; grid-column:2; font-size:16.5px; font-weight:600; line-height:1.3; }
  .rv-pick-a > span:not(.rv-pick-i) { grid-row:2; grid-column:2; font-size:12.5px; color:var(--ink-3); }
  .rv-pick-a > i { grid-row:1/3; grid-column:3; font-style:normal; font-family:var(--font-mono);
                 font-size:11px; color:var(--ink-3); }

  /* shelves */
  .rv-shelf { margin-top:38px; scroll-margin-top:84px; }
  .rv-shelf-h { display:grid; grid-template-columns:auto 1fr; column-gap:12px;
                align-items:center; margin-bottom:14px; padding-bottom:12px;
                border-bottom:1px solid var(--line); }
  .rv-shelf-i { grid-row:1/3; display:grid; place-items:center; width:42px; height:42px;
                border-radius:50%; border:1px solid var(--gold-lt); color:var(--gold-dk); }
  .rv-shelf-h h2 { margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
  .rv-shelf-h h2 b { font-size:clamp(21px,3.4vw,26px); font-weight:600; color:var(--ink); }
  .rv-shelf-h h2 span { font-family:var(--font-serif); font-size:16px; color:var(--ink-2); }
  .rv-shelf-h p { grid-column:2; margin:3px 0 0; font-size:13.5px; line-height:1.5;
                  color:var(--ink-3); max-width:70ch; }
  .rv-grid { display:grid; gap:12px; grid-template-columns:1fr; }
  @media (min-width:900px) { .rv-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

  /* the card */
  .rv-c { position:relative; display:grid; grid-template-columns:78px 1fr; gap:14px;
          padding:14px; border-radius:14px; background:var(--surface);
          border:1px solid var(--line); }
  .rv-c:hover { border-color:var(--gold-lt); }
  @media (min-width:520px) { .rv-c { grid-template-columns:96px 1fr; } }
  /* THE NARROWEST PHONES: a smaller cover and a three-line description, so
     a card stays under a third of a 320px phone's screen. */
  @media (max-width:360px) {
    .rv-c { grid-template-columns:62px 1fr; gap:11px; padding:12px; }
    .rv-c-d { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .rv-c-pay { padding-top:10px; gap:8px; }
    .rv .rv-pr b { font-size:19px; }
  }
  .rv-c-cov img, .rv-c-img { display:block; width:100%; height:auto; border-radius:6px;
                             box-shadow:0 2px 8px rgba(23,18,12,.18); }
  .rv-c-b { min-width:0; display:flex; flex-direction:column; }
  .rv-c-t { margin:0; font-family:var(--font-serif); font-size:18px; line-height:1.25; }
  .rv-c-a { color:var(--ink); text-decoration:none; }
  .rv-c-a::after { content:""; position:absolute; inset:0; border-radius:14px; }
  .rv-c-d { margin:6px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink-2); }
  .rv-c-m { margin:6px 0 0; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px;
            color:var(--ink-3); }
  .rv-c-m span { white-space:nowrap; }
  .rv-c-pay { margin-top:auto; padding-top:12px; display:flex; align-items:center;
              justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .rv-c-btn { position:relative; z-index:1; min-height:44px; font-size:14px; }
  /* THE SHARED PRICE HOOKS, laid out for this card. .c-rp-pr and its
     children carry global rules for the old portrait card (figure on its own
     line, badge full width, mono); scoped here to one row. */
  .rv .rv-pr { display:flex; flex-wrap:nowrap; align-items:baseline; justify-content:flex-start;
               gap:8px; width:auto; margin:0; font-family:var(--font-sans); }
  .rv .rv-pr b { flex-basis:auto; font-size:21px; font-weight:700; color:var(--ink);
                 letter-spacing:-.01em; font-variant-numeric:tabular-nums; min-width:3.2ch; }
  .rv .rv-pr s { font-size:13px; color:var(--ink-3); }
  .rv .rv-pr .c-rp-off { flex-basis:auto; margin:0; width:auto; font-family:var(--font-sans);
               font-size:11.5px; letter-spacing:0; text-transform:none; padding:2px 7px; }
  .rv .rv-pr .c-rp-off[hidden] { display:none; }
  .rv-tag:not([hidden]) { position:absolute; top:-9px; right:14px; z-index:1;
             font-size:11px; font-weight:650; padding:2px 9px; border-radius:99px;
             background:var(--gold-solid); color:var(--gold-solid-text); }
  .rv-tag i { font-style:normal; }

  /* the package */
  .rv-bundle { grid-template-columns:1fr; background:var(--gold-bg); border-color:var(--gold-lt); }
  @media (min-width:900px) { .rv-bundle { grid-column:1/-1; grid-template-columns:auto 1fr; align-items:center; } }
  .rv-b-fan { display:flex; padding-left:14px; }
  .rv-b-cov { width:52px; margin-left:-14px; }
  .rv-b-cov img { display:block; width:100%; height:auto; border-radius:5px;
                  box-shadow:0 2px 6px rgba(23,18,12,.25); border:2px solid var(--surface); }

  /* how it works, and the pandit */
  .rv-how { margin:48px 0 40px; }
  .rv-sec-h { margin:0 0 14px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
  .rv-sec-h b { font-size:clamp(20px,3vw,24px); font-weight:600; color:var(--ink); }
  .rv-sec-h span { font-family:var(--font-serif); font-size:16px; color:var(--ink-2); }
  .rv-steps { list-style:none; counter-reset:rv; margin:0; padding:0; display:grid; gap:10px; }
  @media (min-width:760px) { .rv-steps { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  .rv-steps li { counter-increment:rv; position:relative; padding:14px 14px 14px 52px;
                 border-radius:12px; background:var(--surface); border:1px solid var(--line); }
  .rv-steps li::before { content:counter(rv); position:absolute; left:14px; top:14px;
                         width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
                         font-size:13px; font-weight:700; background:var(--gold-bg);
                         color:var(--gold-dk); border:1px solid var(--gold-lt); }
  .rv-steps b { display:block; font-size:15px; color:var(--ink); }
  .rv-steps span { display:block; margin-top:3px; font-size:13px; line-height:1.5; color:var(--ink-2); }
  .rv-pandit { margin-top:12px; display:grid; grid-template-columns:auto 1fr; gap:14px;
               align-items:center; padding:16px; border-radius:12px;
               border:1px dashed var(--gold-lt); background:var(--surface-2); }
  .rv-pandit-m .rv-mark { width:52px; height:52px; display:block; opacity:.9; }
  .rv-pandit b { font-size:15.5px; color:var(--ink); }
  .rv-pandit p { margin:4px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink-2); max-width:78ch; }

  .d-note2 { font-size:13.5px; line-height:1.6; color:var(--ink-2);
             max-width:70ch; margin:0 0 16px; }
  .d-main .c-sec-h { text-align:left; }
  /* The day bar sat flush against the subtitle, so "Moon in Pisces, the 11th
     from your Taurus" read as a caption on the Tue pill rather than as the
     line under the headline. It belongs with the section below it. */
  .d-main .c-lb-c { justify-content:flex-start;
                    margin-top:20px; margin-bottom:6px; }
  /* Chandrashtama is a warning, so it gets the warning's colour rather than
     the gold everything else on a signed-in page is painted in. */
  .d-ashta { color:var(--bad); }

  /* PLAIN LABELS, the Dashboard's: sans, not spaced mono capitals. */
  .d-main :is(.p-anga-h, .p-anga-h i, .p-sum i, .p-per-h, .p-ch-h, .c-table th) {
    font-family:var(--font-sans); letter-spacing:0; text-transform:none; }
  .d-main :is(.p-sum i, .p-anga-h i, .c-table th) { font-size:12.5px; }
  .d-main :is(.p-anga-h, .p-per-h, .p-ch-h) { font-size:13.5px; font-weight:600; }
  /* SEVEN FACTS, EVENLY: the day spans the row's first two columns, so a
     phone has it over three pairs and a wide screen two rows of four. */
  .d-main .p-sum-7 [data-ps="Day"] { grid-column:span 2; }
  @media (min-width:620px) { .d-main .p-sum-7 { grid-template-columns:repeat(4,1fr); } }
  /* Durmuhurat is two windows, one per line. */
  .d-main .p-per-i > span { white-space:pre-line; }
  /* Four cards, not five (Vara went into the summary row): 2×2 on a
     phone, four across on a wide screen. */
  @media (min-width:1000px) { .d-main .p-angas-4 { grid-template-columns:repeat(4,1fr); } }

  /* WHAT IS RUNNING NOW, marked by panchang_live on today's page only: the
     window and the choghadiya row the reader is in. */
  .p-now-b { display:inline-block; margin-left:8px; padding:2px 7px; border-radius:var(--r-pill);
             background:var(--gold-solid); color:var(--gold-solid-text); font-size:11.5px;
             font-weight:700; letter-spacing:0; vertical-align:2px; }
  .d-main .p-per-i.p-now { background:var(--gold-bg); border-radius:10px;
                           box-shadow:0 0 0 1px var(--gold);
                           padding:8px 10px; margin-inline:-10px; }
  .d-main .c-table tr.p-now td { background:var(--gold-bg); }

  /* ── the month, from your own Moon ── */
  .p-nx[hidden] { display:none; }
  .p-nx { max-width:760px; }
  .p-nx-why { margin:0 0 10px; padding:10px 14px; border-radius:10px;
              background:var(--gold-bg); font-size:14px; line-height:1.6;
              color:var(--ink-2); }
  .p-nx-why b { color:var(--ink); }
  .p-go { display:flex; flex-wrap:wrap; gap:0 24px; margin:14px 0 0; }
  .p-go a { display:inline-flex; align-items:center; min-height:44px;
            font-size:14px; font-weight:600; color:var(--gold-dk); }

  /* DEVANAGARI IS NOT TRACKED. The mono, spaced, upper-case labels are an
     English device; in Hindi they pull a word apart (see kundli_app). */
  :root[data-lang="hi"] .d-main :is(.p-anga-h, .p-anga-h i, .p-sum i, .p-per-h,
      .p-ch-h, .c-table th, .c-tl-lbl, .c-tl-sun i, .c-tl-night i, .c-tl-now i,
      .c-lb-i i) {
    font-family:inherit; letter-spacing:0; text-transform:none; }
  :root[data-lang="hi"] .d-main :is(.p-anga-h, .p-sum i, .p-per-h, .p-ch-h) {
    font-size:12.5px; }
  /* Devanagari has no italic, only a fake slant. */
  :root[data-lang="hi"] .d-main :is(.c-sh-a, .d-mkd) { font-style:normal; }

  /* The wrapper t() puts round each Hindi string: no box, the parent's type. */
  :root .l-hi { display:contents; font:inherit; color:inherit; }
  /* The same Hindi rules as the signed-in pages (CSS above): matras need the
     taller line; under 15px goes up by 2, never past 15; no tracking, caps
     or slant, which pull a conjunct apart. */
  :root[lang^="hi"] body { line-height:1.6; }
  :root[lang^="hi"] .l-hi {
    font-size:max(1em, min(calc(1em + 2px), 15px));
    letter-spacing:0; text-transform:none; font-style:normal; }
  :root[lang^="hi"] .l-hi .l-hi { font-size:1em; }
  /* AND NOT MONO. The small labels are set in the mono face for English;
     Devanagari in it reads as a typewriter. On a Hindi page the mono face
     is the sans. */
  :root[lang^="hi"] { --font-mono:var(--font-sans); }