* { 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; }

  /* justify-content ON THE PARENT, and it has to be. .h-bar is itself the
     flex container, so the bar inside it is a flex ITEM and shrinks to its
     content — 490px of links in a 1148px column, hard left, with 658px of
     nothing beside them directly under a centred head. Putting the centring
     on the bar itself does nothing at all: it centres that bar's own
     children inside its own 490px box, which they already fill. */
  .h-bar { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
           justify-content:center; margin-bottom:22px; }

  .h-pan { display:none; }
  /* Where Saturn stands for this rashi, linked to its Sade Sati page. */
  .h-shani { display:flex; flex-direction:column; gap:2px; margin:0 0 18px;
             padding:12px 16px; border-radius:var(--r-in); text-decoration:none;
             color:var(--ink); border:1px solid var(--line); background:var(--surface); }
  .h-shani:hover { border-color:var(--gold); }
  .h-shani-on { border-color:var(--gold-lt); background:var(--gold-bg); }
  .h-shani-k { font-size:11.5px; font-weight:700; color:var(--gold-dk);
               text-transform:uppercase; letter-spacing:.08em; }
  .h-shani b { font-size:15px; line-height:1.4; }
  .h-shani i { font-style:normal; font-size:13px; color:var(--ink-2); }
  /* A ranked list of twelve, for the category pages. */
  .h-rank { display:grid; gap:6px; }
  .h-rank-i { display:flex; align-items:center; gap:12px; padding:11px 14px;
              min-height:44px; text-decoration:none; color:var(--ink);
              border:1px solid var(--line); border-radius:var(--r-in);
              background:var(--surface); }
  .h-rank-i:hover { border-color:var(--gold); background:var(--gold-bg); }
  .h-rank-p { font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
              min-width:22px; font-variant-numeric:tabular-nums; }
  .h-rank-n { font-size:14.5px; font-weight:650; min-width:96px; }
  .h-rank-b { flex:1; min-width:60px; }
  .h-rank-v { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-2);
              font-variant-numeric:tabular-nums; }

/* ── 10 FAQ ──────────────────────────────────────────── */
.h-fq-b { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
/* ── ON A PHONE THE TABS ARE A RAIL ──
   Eight category tabs at 44px each, wrapping: 200px of tab strip before a
   reader reaches a single question, which is a quarter of the screen spent
   on navigation for a section that is mostly answers. In a row it is 44px
   and the swipe is the same gesture the four rails above it use.
   Written AFTER the base rule and scoped .h-fq .h-fq-b, because a media
   query adds no specificity and this file has lost that fight before. */
@media (max-width:640px) {
  .h-fq .h-fq-b { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
                  margin-inline:-16px; padding-inline:16px;
                  scroll-padding-inline:16px; scroll-snap-type:x proximity;
                  margin-bottom:14px; }
  .h-fq .h-fq-b::-webkit-scrollbar { display:none; }
  .h-fq .h-fq-t { flex:0 0 auto; scroll-snap-align:start; }
}
.h-fq-t { display:inline-flex; align-items:center; gap:9px; min-height:44px;
          padding:0 16px; cursor:pointer; font-size:14px; font-weight:650;
          color:var(--ink-2); border:1px solid var(--line);
          border-radius:var(--r-pill); background:var(--surface); }
.h-fq-t:hover { border-color:var(--gold-lt); color:var(--gold-dk); }
/* The count is part of the label, not decoration: it is how you know
   Getting started has five and Your kundli has five before you open either. */
.h-fq-t i { font-style:normal; font-family:var(--font-mono); font-size:11px;
            min-width:19px; height:19px; display:grid; place-items:center;
            border-radius:var(--r-pill); background:var(--rail);
            color:var(--ink-3); }
.h-fq-p { display:none; }
.h-fq-p .c-acc:last-child { margin-bottom:0; }#hfaq-kundli:checked ~ * .h-fq-p-kundli { display:block; }
#hfaq-kundli:focus-visible ~ * label[for="hfaq-kundli"] { outline:2px solid var(--gold); outline-offset:2px; }
#hfaq-kundli:checked ~ * label[for="hfaq-kundli"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#hfaq-kundli:checked ~ * label[for="hfaq-kundli"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#hfaq-start:checked ~ * .h-fq-p-start { display:block; }
#hfaq-start:focus-visible ~ * label[for="hfaq-start"] { outline:2px solid var(--gold); outline-offset:2px; }
#hfaq-start:checked ~ * label[for="hfaq-start"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#hfaq-start:checked ~ * label[for="hfaq-start"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
  .h-f { position:relative; }
  .h-f-strip { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px;
               scrollbar-width:thin; }
  .h-f-tile { flex:0 0 auto; display:flex; flex-direction:column;
              align-items:center; gap:2px; min-width:84px; padding:10px 12px;
              border:1px solid var(--line); border-radius:var(--r-card);
              background:transparent; color:var(--ink-2); cursor:pointer;
              text-decoration:none;
              transition:border-color .2s, background .2s; }
  .h-f-tile:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .h-f-tile:hover { border-color:var(--gold); color:var(--ink); }
  .h-f-tile b { font-size:13px; font-weight:600; }
  .h-f-tile i { font-style:normal; font-size:10.5px; color:var(--ink-3); }
  /* .h-f-hint and .h-f-l moved to ui.CSS — the Chinese page and the Lo Shu
     page both use them and neither includes this stylesheet, so both were
     rendering the labels as plain 16px body text. */
  .h-f-hint-m { color:var(--gold-dk); }

  .h-f-panes { display:grid; }
  .h-f-pane { grid-area:1/1; min-width:0; opacity:0; visibility:hidden; }
  .h-f-pane:first-child { opacity:1; visibility:visible; }

  /* ONE RASHI, ON ITS OWN PAGE. The twelve-pane cycle is the hub's whole
     mechanic and it is wrong here: /horoscope/taurus/ holds one pane, and
     the animation would hide it for eleven twelfths of every cycle — a page
     that is blank most of the time, which is also what a crawler would find
     if it rendered.

     Specificity does the work, not source order: .h-f-solo .h-f-pane is
     (0,2,0) against the (0,1,0) that sets the animation, and that rule is
     inside a media query, which adds no specificity at all. */
  .h-f-solo .h-f-pane { animation:none; opacity:1; visibility:visible; }
  .h-f-solo .h-f-tile { animation:none; }
  /* AND THE BAR CHART, which is the one that is easy to miss. "Across all
     rashis" is twelve bars and the cycle walks a gold ring along them in step
     with the panes. On the hub that is the page agreeing with itself; on a
     rashi's own page it is a ring hopping between twelve bars beside a
     reading about one of them, for ever, on a page where nothing else moves.
     Caught by checks/hsign-check.mjs counting running animations, because
     nothing about the markup looks wrong. */
  .h-f-solo .h-f-b { animation:none; }
  /* Marked by class, not by :target — see solo_strip(). border-color:var(--gold); background:var(--gold-bg); color:var(--ink); is the
     same declaration the hash rule uses, injected from Python so the two
     cannot drift into two different golds. */
  .h-f-tile.h-f-on { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); }

  /* The reading on the left, the five areas as a pentagon on the right. */
  .h-f-card { border:1px solid var(--line); border-radius:var(--r-card);
              background:var(--surface); padding:24px 26px;
              margin-bottom:34px; display:grid; gap:20px 30px;
              grid-template-columns:1fr; align-items:center; }
  @media (min-width:900px) {
    .h-f-card { grid-template-columns:minmax(0,1fr) 268px; }
    .h-radar { border-left:1px solid var(--line); padding-left:26px; }
  }
  .h-f-main { min-width:0; }

  /* RENAMED FROM .h-rd. That name is the kundli readout grid on the home
     page — .h-rd { display:grid; grid-template-columns:repeat(3,...) } —
     and FEAT_CSS is imported there now, so horoscope's flex-column radar
     was landing on those cards and stacking them into one narrow column
     with a dead strip beside it. Two unrelated things cannot share a
     class once the stylesheet is shared. */
  .h-radar { margin:0; display:flex; flex-direction:column; align-items:center;
          gap:6px; }
  .h-radar svg { width:100%; max-width:268px; height:auto; overflow:visible; }
  .h-radar-g { fill:none; stroke:var(--line); stroke-width:1; }
  /* Translucent, not var(--gold-bg): an opaque fill painted over the 25/50/75
     rings and the chart lost its scale — it read as a lone pentagon. */
  .h-radar-s { fill:var(--gold); fill-opacity:.16; stroke:var(--gold);
            stroke-width:1.6; stroke-linejoin:round; }
  .h-radar-d { fill:var(--gold); }
  .h-radar-l { font-family:var(--font-mono); font-size:8.5px; letter-spacing:.09em;
            text-transform:uppercase; fill:var(--ink-3); }
  .h-radar-v { font-size:12px; letter-spacing:0; fill:var(--ink);
            font-weight:600; }
  .h-radar figcaption { display:flex; align-items:baseline; gap:8px; }
  .h-radar figcaption b { font-size:22px; font-weight:650;
                       font-variant-numeric:tabular-nums; }
  .h-f-eyebrow .c-sym-g { font-size:1.32em; }
  .h-f-eyebrow { font-family:var(--font-mono); font-size:10.5px;
                 letter-spacing:.12em; text-transform:uppercase;
                 color:var(--gold-dk); }
  /* flex-wrap, and it is why /horoscope/weekly/ scrolled the whole page
     sideways by 29px at 320px. Three things in this row — the quality word
     at 27px, five stars, and a DESCENDING pill — come to 349px on the
     narrowest phone, and a flex row that cannot wrap pushes the overflow
     out of the document rather than onto a second line. The daily pages
     have no trend pill, so only the four period pages ever overflowed. */
  .h-f-rate { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
              margin:8px 0 2px; }
  .h-f-rate b { font-family:var(--font-display); font-size:27px;
                font-weight:600; line-height:1.1; }
  /* No measure cap: the card's text column is already bounded by the chart
     beside it, and a 66ch cap left its right half empty on a wide screen
     (Rohit, 27 Sep 2026: "why cutting text when there is space"). */
  .h-f-sum { font-size:16px; line-height:1.6; color:var(--ink); margin:6px 0 10px; }
  .h-f-over { font-size:14px; line-height:1.65; color:var(--ink-2); margin:0 0 4px; }
  /* inline-flex with a real height: as an inline-block it was a 23px tap
     target, which shell-check counts as a failure at every width. */
  .h-f-more { display:inline-flex; align-items:center; min-height:44px;
              margin-top:6px; font-size:13.5px; color:var(--gold-dk);
              text-decoration:none; }
  .h-f-more span { border-bottom:1px solid var(--gold-lt); }
  .h-f-more:hover span { border-bottom-color:var(--gold); }

  /* Period pages: the trend, and the named peak of the week/month/year. */
  .h-trend { font-family:var(--font-mono); font-size:10px; letter-spacing:.11em;
             text-transform:uppercase; padding:4px 9px; border-radius:999px;
             border:1px solid var(--line); color:var(--ink-2); }
  .h-trend-rising { color:var(--good); border-color:var(--good); }
  .h-trend-falling { color:var(--bad); border-color:var(--bad); }
  .h-shape { margin-bottom:34px; }
  /* The year at a glance: its stretches across the card, and the career
     reading built the same way. */
  .h-yg-head { max-width:none; }
  .h-yg { display:grid; gap:10px; grid-template-columns:1fr; margin:6px 0 0; }
  @media (min-width:620px) { .h-yg { grid-template-columns:repeat(var(--n),minmax(0,1fr)); } }
  .h-yg-c, .h-cy-p { border-top:3px solid var(--line); padding:10px 0 0; min-width:0; }
  .h-yg-good { border-top-color:var(--good); }
  .h-yg-hard { border-top-color:var(--bad); }
  .h-yg-w { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
            text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; }
  .h-yg-c b, .h-cy-p b { display:block; font-size:15px; font-weight:650; line-height:1.35; }
  /* The card's three stretches as tinted panels, the tone in the colour —
     as bare columns under a rule they ran together (Rohit, 27 Sep 2026:
     "put some color so they dont look conjested"). */
  .h-yg { gap:12px; margin-top:12px; }
  .h-yg-c, .h-cy-p { border-top:0; border-radius:12px; padding:14px 16px 15px;
                     background:var(--gold-bg); }
  .h-yg-c.h-yg-good, .h-cy-p.h-yg-good { background:var(--good-bg); }
  .h-yg-c.h-yg-hard, .h-cy-p.h-yg-hard { background:var(--bad-bg); }
  .h-yg-c .h-yg-w, .h-cy-p .h-yg-w { color:var(--gold-dk); font-weight:600; }
  .h-yg-good .h-yg-w { color:var(--good); }
  .h-yg-hard .h-yg-w { color:var(--bad); }
  .h-yg-c p, .h-cy-p p { color:var(--ink); margin-top:6px; }
  .h-yg-c p, .h-cy-p p { font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:4px 0 0; }
  .h-yg-all { font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:14px 0 0;
              padding-top:12px; border-top:1px dashed var(--line); }
  .h-yg-all .h-yg-w { display:inline; margin-right:8px; }
  .h-cy { grid-column:1/-1; padding:20px 22px; }
  .h-f-area p.h-cy-v { font-size:16px; line-height:1.55; color:var(--ink); margin:0 0 14px; }
  .h-cy-ps { gap:12px; }
  .h-cy-all { display:grid; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
  .h-cy-a { display:grid; gap:2px 16px; grid-template-columns:1fr; }
  @media (min-width:720px) { .h-cy-a { grid-template-columns:150px 1fr; }
                             .h-cy-a .h-yg-w { margin-top:4px; } }
  .h-cy-do { display:grid; gap:14px; grid-template-columns:1fr; margin-top:18px; }
  .h-cy-act { background:var(--good-bg); border-radius:10px; padding:14px 16px; }
  .h-f-area .h-cy-act p { color:var(--ink); margin-top:4px; }
  .h-cy-care { border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
  .h-cy-care ul { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:10px 28px; }
  @media (min-width:1000px) { .h-cy-care ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
                              .h-cy-care ul.h-one { grid-template-columns:1fr; } }
  .h-cy-care li { display:grid; gap:0 14px; grid-template-columns:1fr; }
  @media (min-width:620px) { .h-cy-care li { grid-template-columns:130px 1fr; }
                             .h-cy-care li .h-yg-w { margin-top:3px; } }

  /* The year's turning points: a dated list, one line each. */
  .h-yd { list-style:none; margin:0 0 34px; padding:0; border:1px solid var(--line);
          border-radius:var(--r-card); background:var(--surface); }
  .h-yd-row { display:grid; grid-template-columns:64px 1fr; gap:2px 16px;
              padding:14px 18px; border-top:1px solid var(--line); }
  .h-yd-row:first-child { border-top:0; }
  .h-yd-d { grid-row:span 2; font-weight:650; font-size:15px; line-height:1.3;
            padding-left:10px; border-left:3px solid var(--line); }
  .h-yd-good .h-yd-d { border-left-color:var(--good); }
  .h-yd-hard .h-yd-d { border-left-color:var(--bad); }
  .h-yd-k { font-family:var(--font-mono); font-size:10px; letter-spacing:.11em;
            text-transform:uppercase; color:var(--ink-3); }
  .h-yd-t { margin:0; font-size:14px; line-height:1.6; color:var(--ink-2); }
  @media (min-width:720px) { .h-yd-row { grid-template-columns:84px 110px 1fr; }
                             .h-yd-d { grid-row:auto; } }
  .h-rem-wide { grid-column:1/-1; }
  .h-rem-p { font-weight:400 !important; font-size:13.5px !important;
             line-height:1.6; color:var(--ink-2); }

  .h-f-areas { display:grid; gap:12px; grid-template-columns:1fr;
               margin-bottom:34px; }
  @media (min-width:720px) { .h-f-areas { grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1100px) { .h-f-areas { grid-template-columns:repeat(3,1fr); } }
  .h-f-area { min-width:0; padding:16px 18px; border:1px solid var(--line);
              border-radius:var(--r-card); background:var(--surface); }
  .h-f-area-h { display:flex; align-items:baseline; justify-content:space-between;
                gap:10px; margin-bottom:8px; }
  .h-f-area-h b { font-size:20px; font-weight:650;
                  font-variant-numeric:tabular-nums; }
  .h-f-area p { font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:0; }

  .h-f-luck { display:grid; gap:14px 20px; grid-template-columns:repeat(2,1fr);
              border-top:1px solid var(--line); margin-top:18px;
              padding-top:16px; }
  @media (min-width:480px) { .h-f-luck { grid-template-columns:repeat(4,1fr); } }
  .h-f-luck-t { grid-column:1/-1; font-family:var(--font-mono); font-size:9.5px;
                letter-spacing:.12em; text-transform:uppercase;
                color:var(--gold-dk); }
  .h-f-luck-c { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .h-f-luck-c b { font-size:16px; font-weight:650; line-height:1.35; }
  .h-f-note { font-size:13.5px; line-height:1.6; color:var(--ink-3);
              margin:14px 0 0; }
  .h-f-rems { border:1px solid var(--line); border-radius:var(--r-card);
              background:var(--surface); padding:18px 20px;
              display:grid; gap:16px 24px; grid-template-columns:1fr; }
  @media (min-width:620px) { .h-f-rems { grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1100px) { .h-f-rems { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } }
  /* A period's upay is two items and the full paragraph under them: two
     columns, not two cells in a row of four. */
  @media (min-width:620px) { .h-f-rems.h-f-rems-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .h-f-rem b { display:block; font-size:14.5px; font-weight:600; margin:3px 0 2px; }
  .h-f-rem i { font-style:normal; font-size:12px; line-height:1.45;
               color:var(--ink-3); }

  /* The four elements, each with how far through it the day is. */
  .h-dls { display:grid; gap:12px; grid-template-columns:1fr;
           margin-bottom:20px; }
  @media (min-width:560px) { .h-dls { grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1000px) { .h-dls { grid-template-columns:repeat(4,1fr); } }
  .h-dl { display:flex; align-items:center; gap:14px; min-width:0;
          padding:14px 16px; border:1px solid var(--line);
          border-radius:var(--r-card); background:var(--surface); }
  .h-dl-r { flex:0 0 auto; width:52px; height:52px; transform:rotate(-90deg); }
  .h-dl-r circle { fill:none; stroke:var(--line); stroke-width:4; }
  .h-dl-r .h-dl-p { stroke:var(--gold); stroke-linecap:round; }
  .h-dl-r text { transform:rotate(90deg); transform-origin:26px 26px;
                 text-anchor:middle; dominant-baseline:central;
                 font-family:var(--font-mono); font-size:14px; fill:var(--ink-2);
                 font-variant-numeric:tabular-nums; }
  .h-dl-r .h-dl-pc { font-size:9px; fill:var(--ink-3); }
  .h-dl-t { min-width:0; }
  .h-dl-t b { display:block; font-size:15px; font-weight:650; line-height:1.3;
              margin:2px 0 1px; }
  .h-dl-t i { font-style:normal; font-size:11.5px; color:var(--ink-3); }
  .h-dl-t u { display:block; text-decoration:none; font-family:var(--font-mono);
              font-size:11px; color:var(--gold-dk); margin-top:2px; }

  /* What the rashi is, as against what today is. */
  .h-tr { position:relative; overflow:hidden; isolation:isolate;
          border:1px solid var(--line); border-radius:var(--r-card);
          background:var(--surface); padding:24px 26px 20px;
          margin-bottom:34px; }
  /* A hairline of the sign's element across the top. The only place on the
     page where colour means something other than good/bad. */
  .h-tr::before { content:''; position:absolute; inset:0 0 auto; height:2px;
                  background:var(--el, var(--gold)); opacity:.75; }
  .h-tr-e-fire  { --el:#C2542A; } .h-tr-e-earth { --el:#5E7443; }
  .h-tr-e-air   { --el:#4E7C93; } .h-tr-e-water { --el:#4A5E9E; }
  /* The rashi's own glyph, oversized and half out of frame. */
  /* A ::after, not a <span>: a 5%-opacity watermark is decoration, and as a
     real text node the contrast pass counted it as content and failed it at
     2.72:1. A fixed box with the glyph centred in it, rather than a corner
     offset, because the twelve glyphs sit at different heights inside their
     em box and a shared top/right cropped some into an unreadable band. */
  /* Anchored to the BOTTOM right, not the middle: the six-fact band has an
     opaque gold ground and sits across the vertical centre, so a centred
     watermark disappeared behind it. Down here it has only the chip rows to
     compete with, and those leave the right-hand side clear. */
  .h-tr::after { content:var(--mark); position:absolute; right:-34px;
               top:44%; z-index:-1;
               width:250px; height:250px; display:grid; place-items:center;
               font-size:200px; line-height:1; color:var(--gold);
               opacity:.055; pointer-events:none; user-select:none;
               font-family:"Apple Symbols","Segoe UI Symbol",
                           "Noto Sans Symbols 2","Noto Sans Symbols",serif; }
  @media (max-width:720px) { .h-tr::after { display:none; } }
  .h-tr-p { font-size:15px; line-height:1.65; color:var(--ink-2); margin:0 0 20px; }
  .h-tr-p::first-letter { font-family:var(--font-display); font-size:1.15em;
                          color:var(--ink); }
  .h-tr-fs { display:grid; gap:16px 20px; grid-template-columns:repeat(2,1fr);
             padding:16px 18px; margin-bottom:8px; border-radius:12px;
             background:var(--gold-bg); }
  @media (min-width:620px) { .h-tr-fs { grid-template-columns:repeat(3,1fr); } }
  @media (min-width:980px) { .h-tr-fs { grid-template-columns:repeat(6,1fr); } }
  .h-tr-f { display:flex; flex-direction:column; gap:3px; min-width:0; }
  .h-tr-f b { display:flex; align-items:center; gap:6px; font-size:14.5px;
              font-weight:650; line-height:1.3; }
  .h-el { flex:none; width:8px; height:8px; border-radius:50%;
          background:var(--el, var(--gold)); }
  .h-el-fire { --el:#C2542A; } .h-el-earth { --el:#5E7443; }
  .h-el-air  { --el:#4E7C93; } .h-el-water { --el:#4A5E9E; }

  .h-tr-r { display:grid; gap:8px 16px; grid-template-columns:1fr;
            padding:14px 0; border-bottom:1px solid var(--line); }
  .h-tr-r:last-child { border-bottom:0; padding-bottom:2px; }
  @media (min-width:620px) { .h-tr-r { grid-template-columns:112px 1fr;
                                       align-items:center; } }
  .h-tr-r > div { display:flex; flex-wrap:wrap; gap:7px; }
  .h-ch { border-radius:999px; padding:6px 13px; font-size:13px;
          line-height:1.35; }
  .h-ch-up { border-color:var(--gold); background:var(--gold-bg);
             color:var(--ink); font-weight:600; }
  .h-ch-dn { border-style:dashed; color:var(--ink-2); background:transparent; }
  .h-ch-do { background:var(--surface-2, transparent); }
  .h-ch-go { display:inline-flex; align-items:center; gap:7px; min-height:44px;
             padding:6px 15px; text-decoration:none; color:var(--ink); }
  .h-ch-go .c-sym-g { font-size:15px; color:var(--gold-dk); }
  .h-ch-go:hover { border-color:var(--gold); background:var(--gold-bg); }

  .h-wingg { display:grid; gap:14px; grid-template-columns:1fr;
             margin:20px 0 34px; }
  @media (min-width:720px) { .h-wingg { grid-template-columns:repeat(2,1fr); } }
  .h-city { margin:10px 0 0; font-size:13px; color:var(--ink-3); }
  .h-tl-hint { display:none; }
  @media (max-width:640px) { .h-tl-hint { display:block; margin:8px 0 0; font-size:13px; color:var(--ink-3); } }
  /* THE CHARTS (the full review, 27 Sep 2026). The weakest column was an
     empty dashed box, which read as a day with no data; it is a red column
     now, as tall as its score. And a month of thirty numbers on a phone ran
     together ("63636362"): only the best and weakest keep theirs there. */
  .h-f .c-scl-c.c-lo .c-scl-b { background:var(--bad); border:0; opacity:.75; }
  @media (max-width:720px) {
    .h-f .c-scl-dense .c-scl-c:not(.c-on):not(.c-lo) .c-scl-v { visibility:hidden; }
  }
  /* One gap between sections, not two: the ask panel and the reports shelf
     each sit in their own padded section after a padded section, which
     stacked to 100-120px (the full review, 27 Sep 2026). */
  section.l-sec:has(.of-ask), section.l-sec:has(.of-rp) { padding-top:0; }
  /* HINDI LABELS. The small labels are Latin small caps: spaced out and
     uppercase, at 11px. On Devanagari the spacing splits the headline (the
     शिरोरेखा) and 11px is too small to read (the full review). */
  html[lang="hi"] .h-f-l, html[lang="hi"] .h-yg-w, html[lang="hi"] .h-f-luck-t {
    letter-spacing:0; text-transform:none; font-size:13.5px; font-family:inherit; }
  .h-dayx { grid-column:1 / -1; min-width:0; }
  .h-hrs-g p { margin:6px 0 0; font-size:15px; line-height:1.55; color:var(--ink); }
  .h-f-mo { margin:4px 0 0; font-size:15px; line-height:1.6; color:var(--ink-2); }
  .h-f-mo .h-f-l { display:block; margin-bottom:2px; }
  .h-hrs { display:grid; gap:14px; grid-template-columns:1fr; margin-top:16px; }
  @media (min-width:720px) { .h-hrs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  .h-hrs > div { border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
  .h-hrs-g { background:var(--good-bg); border-color:transparent !important; }
  .h-hrs ul { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:8px; }
  .h-hrs li { display:grid; grid-template-columns:auto 1fr; gap:0 12px; font-size:15px; color:var(--ink); }
  .h-hrs li span { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); }
  .h-hrs li i { grid-column:1 / -1; font-style:normal; font-size:14px; color:var(--ink-3); }
  .h-hrs .h-city { grid-column:1 / -1; margin:0; }
  .h-pitru { display:flex; gap:10px; align-items:flex-start; margin:0 0 18px; padding:12px 16px;
             border-radius:10px; background:var(--gold-bg); color:var(--ink); font-size:15px; line-height:1.55; }
  .h-pitru svg { flex:none; margin-top:2px; color:var(--gold); }
  .h-wing { min-width:0; }
  .h-wins { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .h-win { display:flex; flex-direction:column; gap:1px; padding:8px 13px;
           border:1px solid var(--line); border-radius:999px;
           background:var(--surface); }
  .h-win b { font-size:12.5px; font-weight:600; color:var(--ink); }
  .h-win i { font-style:normal; font-family:var(--font-mono); font-size:11px;
             font-variant-numeric:tabular-nums; }
  .h-win.c-t-good { border-color:var(--good); }
  .h-win.c-t-bad  { border-color:var(--bad); }

  .h-f-chart { border:1px solid var(--line); border-radius:var(--r-card);
               background:var(--surface); padding:20px 18px 14px;
               margin-bottom:16px; }
  .h-f-bars { display:flex; align-items:flex-end; gap:5px; height:190px; }
  .h-f-b { flex:1 1 0; min-width:0; display:flex; flex-direction:column;
           align-items:center; justify-content:flex-end; height:100%; gap:5px;
           text-decoration:none; border-radius:10px; padding:6px 2px 4px; }
  .h-f-b:hover { background:var(--gold-bg); }
  /* Scored from 35, not 0. Every rashi lands between 55 and 95 on a normal
     day, so bars drawn from zero are twelve near-identical columns and the
     comparison the chart exists to make is invisible.

     The height is a fraction of what is LEFT after the value above and the
     name below, not of the whole column -- as a percentage of the column the
     three together came to more than 100% and the names were clipped off the
     bottom edge of the card. */
  .h-f-b > em { display:block; width:72%; max-width:44px; border-radius:8px 8px 3px 3px;
              flex:0 0 auto;
              height:max(6px, calc((100% - 62px) * var(--f))); }
  /* Every bar in its tone, lightly; the day's two ends solid. */
  .h-bt-good { background:var(--good); opacity:.42; }
  .h-bt-mid, .h-bt-gold { background:var(--gold-lt); }
  .h-bt-bad { background:var(--bad); opacity:.42; }
  .h-bt-end { opacity:1; }
  .h-f-bg { color:var(--gold-dk); line-height:1; }
  .h-f-b u { font-size:12px; font-weight:650; color:var(--ink);
             text-decoration:none; font-variant-numeric:tabular-nums; }
  /* The full name where twelve of them fit, the three-letter form where they
     do not. "Sag" is not a rashi anybody calls their own. */
  .h-f-bn { flex:0 0 auto; font-family:var(--font-mono); font-size:10px;
                line-height:1.35; color:var(--ink-3); max-width:100%; text-align:center; }
  .h-f-bl, .h-f-bs { font-style:normal; display:block; white-space:nowrap;
                overflow:hidden; text-overflow:ellipsis; }
  /* "Ari" needs 20px at the 11px phone floor and the tile gave it 18. Two
     pixels, taken off the tile's own padding rather than off the type — twelve
     rashi abbreviations reading "Ar…" is a worse trade than a slightly
     tighter tile. */
  @media (max-width:640px) {
    .h-f-b { padding-inline:0; }
  }
  /* Below about 360 the twelve tiles have 24px each and "Ari" needs 20 plus
     the gap, so the codes came back as "Ar…". The chart scrolls instead: a
     rashi picker where four of the twelve are unreadable is worse than one
     that needs a swipe, and the glyph alone does not name the sign to anybody
     who has not learned the glyphs. */
  @media (max-width:379px) {
    .h-f-bars { overflow-x:auto; scrollbar-width:none;
                margin-inline:-18px; padding-inline:18px;
                scroll-padding-inline:18px; }
    .h-f-bars::-webkit-scrollbar { display:none; }
    .h-f-b { flex:0 0 30px; }
  }
  .h-f-bl { display:none; }
  @media (min-width:920px) {
    .h-f-bl { display:block; }
    .h-f-bs { display:none; }
  }
  .h-f-b:hover .h-f-bn, .h-f-b:hover u { color:var(--ink); }
  /* The Moon's house under each name on a day, and the reader's own bar. */
  .h-f-bars { height:230px; }
  .h-f-chart-m .h-f-bars { height:246px; }
  .h-f-chart-m .h-f-b > em { height:max(6px, calc((100% - 76px) * var(--f))); }
  .h-f-bm { display:none; font-style:normal; white-space:nowrap; color:var(--ink-3); }
  @media (min-width:920px) { .h-f-bm { display:block; } }
  .h-f-bm.c-t-bad { color:var(--bad); }
  .h-f-b-me { background:var(--gold-bg); box-shadow:inset 0 0 0 1.5px var(--gold); }
  .h-f-me { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em;
            text-transform:uppercase; color:var(--gold-dk); }
  .h-f-why { font-size:13px; line-height:1.55; color:var(--ink-3); margin:12px 2px 0; }

  /* The day's two ends: tinted in their tone, the reason and the day's line,
     and the way into that rashi's day. */
  .h-ends { display:grid; gap:12px; grid-template-columns:1fr; margin-bottom:34px; }
  @media (min-width:720px) { .h-ends { grid-template-columns:repeat(2,1fr); } }
  .h-end { display:flex; gap:16px; align-items:flex-start; padding:18px 20px;
           border-radius:var(--r-card); text-decoration:none; color:var(--ink);
           border:1px solid transparent; }
  .h-end-good { background:var(--good-bg); border-color:color-mix(in srgb, var(--good) 35%, transparent); }
  .h-end-bad { background:var(--bad-bg); border-color:color-mix(in srgb, var(--bad) 35%, transparent); }
  .h-end:hover { border-color:var(--gold); }
  .h-end-g { flex:0 0 auto; width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
             background:var(--surface); color:var(--gold-dk); }
  .h-end-good .h-end-g { box-shadow:inset 0 0 0 2px var(--good); }
  .h-end-bad .h-end-g { box-shadow:inset 0 0 0 2px var(--bad); }
  .h-end-b { display:flex; flex-direction:column; gap:4px; min-width:0; }
  .h-end-l { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
  .h-end-good .h-end-l { color:var(--good); }
  .h-end-bad .h-end-l { color:var(--bad); }
  .h-end-n { display:flex; align-items:center; gap:10px; }
  .h-end-n b { font-size:20px; font-weight:650; }
  .h-end-n em { font-style:normal; font-size:13px; font-weight:700; color:var(--surface); padding:2px 9px;
                border-radius:999px; font-variant-numeric:tabular-nums; }
  .h-end-good .h-end-n em { background:var(--good); }
  .h-end-bad .h-end-n em { background:var(--bad); }
  .h-end-m { font-size:13px; font-weight:600; color:var(--ink-2); }
  .h-end-p { font-size:14px; line-height:1.55; color:var(--ink-2); }
  .h-end-more { font-size:13px; font-weight:600; color:var(--gold-dk); margin-top:4px; }

  /* By theme: four cards, each with today's leader (and, on a rashi page,
     where that rashi stands). */
  .h-ths { display:grid; gap:12px; grid-template-columns:1fr; margin-bottom:34px; }
  @media (min-width:620px) { .h-ths { grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1000px) { .h-ths { grid-template-columns:repeat(4,1fr); } }
  .h-th { display:flex; flex-direction:column; gap:4px; padding:16px 18px; text-decoration:none;
          color:var(--ink); border:1px solid var(--line); border-radius:var(--r-card);
          background:var(--surface); }
  .h-th:hover { border-color:var(--gold); }
  .h-th-i { width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
            background:var(--gold-bg); color:var(--gold-dk); margin-bottom:6px; }
  .h-th b { font-size:17px; font-weight:650; }
  .h-th-l { font-size:13.5px; color:var(--ink-2); }
  .h-th-me { font-size:13.5px; color:var(--ink); font-weight:600; }

  /* The theme pages: twelve readings, ranked. */
  .h-rk-why { font-size:14px; color:var(--ink-3); margin:0 0 14px; }
  .h-rk { display:grid; gap:12px; grid-template-columns:1fr; }
  @media (min-width:720px) { .h-rk { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (min-width:1100px) { .h-rk { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  .h-rk-c { display:flex; flex-direction:column; gap:8px; padding:16px 18px; text-decoration:none;
            color:var(--ink); border:1px solid var(--line); border-radius:var(--r-card);
            background:var(--surface); }
  .h-rk-c:hover { border-color:var(--gold); }
  .h-rk-top { background:var(--gold-bg); border-color:var(--gold); }
  .h-rk-h { display:flex; align-items:center; gap:10px; }
  .h-rk-p { font-family:var(--font-mono); font-size:12px; color:var(--ink-3); width:18px; }
  .h-rk-n { font-size:17px; font-weight:650; flex:1; }
  .h-rk-v { font-size:22px; font-weight:650; font-variant-numeric:tabular-nums; }
  .h-rk-m { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-3); }
  .h-rk-m.c-t-bad { color:var(--bad); }
  .h-rk-c p { margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-2); flex:1; }
  .h-rk-more { font-size:13px; font-weight:600; color:var(--gold-dk); }
  .h-f-ends { display:grid; gap:12px; grid-template-columns:1fr;
              margin-bottom:34px; }
  @media (min-width:720px) { .h-f-ends { grid-template-columns:repeat(2,1fr); } }
  .h-f-end { display:grid; grid-template-columns:auto 1fr; gap:0 14px; align-items:start;
             min-width:0; padding:14px 18px; text-decoration:none;
             color:var(--ink); border:1px solid var(--line); border-left-width:4px;
             border-radius:var(--r-card); background:var(--surface); }
  .h-f-end > :not(svg):not(.c-sym-g) { grid-column:2; }
  .h-f-end > svg, .h-f-end > .c-sym-g { grid-row:1 / span 3; margin:2px 0 0 !important; }
  .h-f-end.h-f-end-good { border-left-color:var(--good); }
  .h-f-end.h-f-end-bad { border-left-color:var(--bad); }
  .h-f-end:hover { border-color:var(--gold); }
  .h-f-end b { display:block; font-size:16px; font-weight:650; margin:2px 0 5px; }
  .h-f-end b em { font-style:normal; color:var(--ink-3); font-size:13px; }
  .h-f-end p { font-size:13px; line-height:1.55; color:var(--ink-3); margin:0; }
  /* The glyph is inline by default so it sits on the text baseline in a run
     of prose. Here it heads its own line, so it has to be blockified back. */
  .h-f-end svg, .h-f-end .c-sym-g { display:block; margin-bottom:6px;
                                    line-height:1.1; }

  .c-bg-good { background:var(--good); } .c-bg-mid { background:var(--mid); }
  .c-bg-bad  { background:var(--bad); }  .c-bg-gold { background:var(--gold-lt); }

  /* The cycle. Only under no-preference: somebody who has asked for less
     motion gets the first rashi and the strip, and picks their own. And only
     on a wide screen: on a phone the twelve panes are each 3,000px or more
     and share one cell, so a short rashi sat over ~850px of blank page while
     the long ones took their turn (the full review, 27 Sep 2026). A phone
     gets Mesha and the strip, like reduced motion. */
  @media (prefers-reduced-motion: no-preference) and (min-width:721px) {
    .h-f-pane { animation:h-f-show 96s linear calc(var(--i) * 8s) infinite; }
    .h-f-tile { animation:h-f-mark 96s linear calc(var(--i) * 8s) infinite; }
    .h-f-b    { animation:h-f-ring 96s linear calc(var(--i) * 8s) infinite; }
    .h-f:hover .h-f-pane, .h-f:hover .h-f-tile, .h-f:hover .h-f-b,
    .h-f:focus-within .h-f-pane, .h-f:focus-within .h-f-tile,
    .h-f:focus-within .h-f-b { animation-play-state:paused; }
  }
  /* ...and any hash stops it dead across the block. */
  .h-f-a:target ~ .h-f-panes .h-f-pane,
  .h-f-a:target ~ .h-f-strip .h-f-tile,
  .h-f-a:target ~ * .h-f-b { animation:none; }
  /* display:none, not only hidden, once a rashi is picked: the twelve share
     one grid cell, so hidden panes still held the block at the height of the
     LONGEST rashi, and a shorter one showed a blank stretch under it (Rohit,
     27 Sep 2026: "below this i see empty space… pages should adjust"). The
     cycle keeps them all in the cell on purpose — a height that changed every
     eight seconds would move the whole page under the reader. */
  .h-f-a:target ~ .h-f-panes .h-f-pane { opacity:0; visibility:hidden; display:none; }
  @media (prefers-reduced-motion: reduce), (max-width:720px) {
    .h-f-pane:not(:first-child) { display:none; }
  }
  /* No reset for the tiles. With the animation off a tile's own rule already
     leaves it unmarked, so a reset here only creates a fight with the
     #<rashi>:target rule that marks one -- and it won that fight for
     background and border while losing it for colour, which left every tile
     plain and one of them mysteriously brighter. */
  /* The anchors are the scroll destination, so they sit at the top of the
     block rather than wherever the twelve spans happen to fall. */
  .h-f-a { position:absolute; top:-90px; width:1px; height:1px; }
@keyframes h-f-show { 0%{opacity:0;visibility:visible} 0.4%{opacity:1;visibility:visible} 7.933%{opacity:1;visibility:visible} 8.333%{opacity:0;visibility:hidden} 100%{opacity:0;visibility:hidden} }
@keyframes h-f-mark { 0%,8.333% { border-color:var(--gold); background:var(--gold-bg); } 8.334%,100% { border-color:var(--line); background:transparent; } }
@keyframes h-f-ring { 0%,8.333% { background-color:var(--gold-bg); } 8.334%,100% { background-color:transparent; } }
#aries:target ~ .h-f-panes .h-f-p-aries { opacity:1; visibility:visible; display:block; }
#aries:target ~ .h-f-strip .h-f-t-aries { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); }
#aries:target ~ * .h-f-b-aries { outline-color:var(--gold); }
#taurus:target ~ .h-f-panes .h-f-p-taurus { opacity:1; visibility:visible; display:block; }
#taurus:target ~ .h-f-strip .h-f-t-taurus { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); }
#taurus:target ~ * .h-f-b-taurus { outline-color:var(--gold); }
#gemini:target ~ .h-f-panes .h-f-p-gemini { opacity:1; visibility:visible; display:block; }
#gemini:target ~ .h-f-strip .h-f-t-gemini { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); }
#gemini:target ~ * .h-f-b-gemini { outline-color:var(--gold); }
#cancer:target ~ .h-f-panes .h-f-p-cancer { opacity:1; visibility:visible; display:block; }
#cancer:target ~ .h-f-strip .h-f-t-cancer { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); }
#cancer:target ~ * .h-f-b-cancer { outline-color:var(--gold); }
#leo:target ~ .h-f-panes .h-f-p-leo { opacity:1; visibility:visible; display:block; }
#leo:target ~ .h-f-strip .h-f-t-leo { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); }
#leo:target ~ * .h-f-b-leo { outline-color:var(--gold); }
#virgo:target ~ .h-f-panes .h-f-p-virgo { opacity:1; visibility:visible; display:block; }
#virgo:target ~ .h-f-strip .h-f-t-virgo { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); }
#virgo:target ~ * .h-f-b-virgo { outline-color:var(--gold); }
#libra:target ~ .h-f-panes .h-f-p-libra { opacity:1; visibility:visible; display:block; }
#libra:target ~ .h-f-strip .h-f-t-libra { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); }
#libra:target ~ * .h-f-b-libra { outline-color:var(--gold); }
#scorpio:target ~ .h-f-panes .h-f-p-scorpio { opacity:1; visibility:visible; display:block; }
#scorpio:target ~ .h-f-strip .h-f-t-scorpio { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); }
#scorpio:target ~ * .h-f-b-scorpio { outline-color:var(--gold); }
#sagittarius:target ~ .h-f-panes .h-f-p-sagittarius { opacity:1; visibility:visible; display:block; }
#sagittarius:target ~ .h-f-strip .h-f-t-sagittarius { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); }
#sagittarius:target ~ * .h-f-b-sagittarius { outline-color:var(--gold); }
#capricorn:target ~ .h-f-panes .h-f-p-capricorn { opacity:1; visibility:visible; display:block; }
#capricorn:target ~ .h-f-strip .h-f-t-capricorn { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); }
#capricorn:target ~ * .h-f-b-capricorn { outline-color:var(--gold); }
#aquarius:target ~ .h-f-panes .h-f-p-aquarius { opacity:1; visibility:visible; display:block; }
#aquarius:target ~ .h-f-strip .h-f-t-aquarius { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); }
#aquarius:target ~ * .h-f-b-aquarius { outline-color:var(--gold); }
#pisces:target ~ .h-f-panes .h-f-p-pisces { opacity:1; visibility:visible; display:block; }
#pisces:target ~ .h-f-strip .h-f-t-pisces { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); }
#pisces:target ~ * .h-f-b-pisces { outline-color:var(--gold); }
/* ── the small offer (strip) ───────────────────────────── */
/* Its own section adds no padding: between two padded sections it stacked
   to 88px above and 106 below (Rohit, 27 Sep 2026: "too much space"). */
section.l-sec.of-strip-sec { padding-top:0; padding-bottom:0; }
/* ...except above a tinted band, which would start flush under the strip. */
section.l-sec.of-strip-sec:has(+ .l-alt) { padding-bottom:38px; }
.of-strip { display:grid; grid-template-columns:auto 1fr; gap:12px 14px; align-items:center;
            padding:14px 16px; border-radius:var(--r-card); border:1px solid var(--gold-lt);
            background:var(--surface); }
@media (min-width:760px) { .of-strip { grid-template-columns:auto 1fr auto; } }
.of-strip-who { display:block; line-height:0; }
.of-strip .of-ph { width:48px; height:48px; border-radius:50%; object-fit:cover;
                   border:2px solid var(--gold-lt); }
.of-strip-t { display:flex; flex-direction:column; gap:2px; min-width:0; }
.of-strip-t b { font-size:16px; color:var(--ink); }
.of-strip-t span { font-size:14.5px; line-height:1.5; color:var(--ink-2); }
.of-strip-b { display:flex; gap:8px; flex-wrap:wrap; grid-column:1 / -1; }
@media (min-width:760px) { .of-strip-b { grid-column:auto; } }
.of-strip-b .c-btn { gap:7px; flex:1 1 150px; justify-content:center; }
@media (min-width:760px) { .of-strip-b .c-btn { flex:0 0 auto; } }
.of-strip-b .c-as-rate { font-weight:600; opacity:.85; }
/* ── the ask panel ─────────────────────────────────────── */
.of-ask { display:grid; gap:18px; padding:22px; border-radius:var(--r-card);
          border:1px solid var(--gold-lt);
          background:radial-gradient(120% 140% at 100% 0%, var(--gold-bg) 0%, transparent 62%),
                     var(--surface); }
@media (min-width:860px) {
  .of-ask { grid-template-columns:230px minmax(0,1fr); gap:30px; padding:28px 32px; } }
.of-ask > * { min-width:0; }
.of-who { display:flex; gap:13px; align-items:center; text-decoration:none; color:var(--ink);
          align-self:start; }
@media (min-width:860px) { .of-who { flex-direction:column; align-items:flex-start; } }
.of-who .of-ph { width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none;
                 border:2px solid var(--gold-lt); }
.of-who-t { display:flex; flex-direction:column; gap:2px; min-width:0; }
.of-who-t b { font-size:16px; }
.of-who-t i { font-style:normal; font-size:13px; color:var(--ink-2); }
.of-who-t em { font-style:normal; font-size:12.5px; color:var(--ink-3);
               display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.of-t { font-family:var(--font-serif); font-size:clamp(20px,3.2vw,25px); line-height:1.2;
        letter-spacing:-.015em; font-weight:600; margin:0 0 8px; text-wrap:balance; }
.of-d { margin:0 0 16px; color:var(--ink-2); font-size:var(--text-md); line-height:1.6;
        max-width:62ch; }
.of-lbl { margin:0 0 9px; font-size:12.5px; font-weight:650; color:var(--ink-3); }
.of-qs { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.of-q { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; min-height:44px;
        border-radius:12px; border:1px solid var(--line); background:var(--surface);
        color:var(--ink); text-decoration:none; font-size:14.5px; line-height:1.45; }
.of-q svg { flex:none; margin-top:2px; color:var(--gold-dk); }
.of-q:hover { border-color:var(--gold); background:var(--gold-bg); }
.of-buy { display:flex; flex-wrap:wrap; gap:10px; }
.of-buy .c-btn { flex:1 1 170px; justify-content:center; gap:8px; }
.of-buy .c-as-rate { font-weight:700; }
.of-buy .c-as-rate::before { content:'\00b7'; margin-right:7px; opacity:.6; }
.of-gift { display:flex; gap:8px; align-items:flex-start; margin:14px 0 0; font-size:13.5px;
           color:var(--ink-2); line-height:1.5; }
.of-gift[hidden] { display:none; }
.of-gift svg { flex:none; margin-top:2px; color:var(--gold-dk); }

/* ── reports ───────────────────────────────────────────── */
.of-rp { display:grid; gap:12px; }
@media (min-width:900px) { .of-rp { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ── the phone bar ─────────────────────────────────────── */
.of-stk, .of-stk-sp { display:none; }
@media (max-width:819px) {
  .of-stk { display:block; position:fixed; left:0; right:0; bottom:0; z-index:40;
            padding:9px 12px calc(9px + env(safe-area-inset-bottom));
            background:var(--surface); border-top:1px solid var(--line);
            box-shadow:0 -8px 24px rgba(0,0,0,.08);
            transform:translateY(110%); transition:transform .25s ease; }
  .of-stk.on { transform:none; }
  .of-stk-sp { display:block; height:76px; }
}
@media (prefers-reduced-motion:reduce) { .of-stk { transition:none; } }
.of-stk-a { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
.of-stk-a .of-ph { width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; }
.of-stk-t { display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.3; }
.of-stk-t b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.of-stk-t i { font-style:normal; font-size:12.5px; color:var(--ink-3); white-space:nowrap;
              overflow:hidden; text-overflow:ellipsis; }
.of-stk-a .c-btn { flex:none; }

  .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; }

  /* 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); }