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

/* ── 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; }#pfaq-kundli:checked ~ * .h-fq-p-kundli { display:block; }
#pfaq-kundli:focus-visible ~ * label[for="pfaq-kundli"] { outline:2px solid var(--gold); outline-offset:2px; }
#pfaq-kundli:checked ~ * label[for="pfaq-kundli"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#pfaq-kundli:checked ~ * label[for="pfaq-kundli"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#pfaq-start:checked ~ * .h-fq-p-start { display:block; }
#pfaq-start:focus-visible ~ * label[for="pfaq-start"] { outline:2px solid var(--gold); outline-offset:2px; }
#pfaq-start:checked ~ * label[for="pfaq-start"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#pfaq-start:checked ~ * label[for="pfaq-start"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
/* ── 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; white-space:nowrap; }
@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; }

  /* ── /panchang/tithi/ ──────────────────────────────── */
  .tt-moon { flex:none; }
  .tt-moon-d { fill:var(--rail); stroke:var(--ink-3); stroke-width:.8; }
  .tt-moon-l { fill:var(--gold); }
  .tt-hero { display:grid; gap:14px; grid-template-columns:1fr; }
  @media (min-width:760px) { .tt-hero { grid-template-columns:3fr 2fr; } }
  .tt-card { display:flex; flex-direction:column; gap:8px; padding:20px; min-width:0;
             border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); }
  .tt-now { border-color:var(--gold-lt); background:var(--gold-bg); }
  .tt-k { font-size:12.5px; font-weight:650; color:var(--gold-dk); }
  .tt-name { display:flex; align-items:center; gap:12px; }
  .tt-name b { font-family:var(--font-serif); font-size:30px; line-height:1.1; font-weight:700; }
  .tt-kal .tt-name b { font-size:24px; }
  .tt-sub { font-size:13.5px; color:var(--ink-2); }
  .tt-dl { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 16px; margin:6px 0 0; }
  .tt-dl div { min-width:0; }
  .tt-dl dt { font-size:12px; color:var(--ink-2); }
  .tt-dl dd { margin:2px 0 0; font-size:14.5px; font-weight:650; }
  .tt-grp { margin:4px 0 0; padding-top:10px; border-top:1px solid var(--line-soft);
            font-size:13.5px; color:var(--ink-2); }
  .tt-os { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; font-size:13.5px; }
  .tt-os b { color:var(--gold-dk); }
  .tt-os[hidden] { display:none; }
  .tt-o { padding:5px 11px; border-radius:var(--r-pill); background:var(--gold-bg);
          border:1px solid var(--gold-lt); font-weight:600; }

  .tt-vs { display:grid; gap:12px; grid-template-columns:1fr; }
  @media (min-width:560px) { .tt-vs { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  @media (min-width:1000px) { .tt-vs { grid-template-columns:repeat(3, minmax(0,1fr)); } }
  .tt-v { display:flex; flex-direction:column; gap:5px; padding:16px 18px; min-width:0;
          border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); }
  .tt-v-h { display:flex; align-items:center; gap:8px; }
  .tt-v-h b { font-size:15px; font-weight:700; }
  .tt-v-d { font-size:20px; font-weight:750; color:var(--gold-dk); }
  .tt-v-x { font-style:normal; font-size:13px; font-weight:600; }
  .tt-v-s { font-size:13px; color:var(--ink-2); }
  .tt-v-w { font-style:normal; font-size:12px; color:var(--ink-2); }

  .tt-cal { display:flex; flex-direction:column; border:1px solid var(--line);
            border-radius:var(--r-card); background:var(--surface); overflow:hidden; }
  .tt-c-r { display:grid; grid-template-columns:92px minmax(0,1fr); gap:4px 12px; padding:11px 16px;
            border-top:1px solid var(--line-soft); align-items:center; }
  .tt-c-r:first-child { border-top:0; }
  @media (min-width:760px) { .tt-c-r { grid-template-columns:110px minmax(0,1.2fr) minmax(0,1fr); } }
  .tt-c-on { background:var(--gold-bg); box-shadow:inset 3px 0 0 var(--gold); }
  .tt-c-d { font-size:13.5px; font-weight:650; }
  .tt-c-t { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; min-width:0; }
  .tt-c-t b { font-size:14.5px; font-weight:650; }
  .tt-c-t i { font-style:normal; font-size:12.5px; color:var(--ink-2); }
  .tt-c-full .tt-c-t b, .tt-c-ek .tt-c-t b { color:var(--gold-dk); }
  .tt-c-n { grid-column:2; display:flex; flex-wrap:wrap; gap:6px; }
  @media (min-width:760px) { .tt-c-n { grid-column:3; } }
  .tt-c-v { padding:3px 9px; border-radius:var(--r-pill); background:var(--gold-bg);
            border:1px solid var(--gold-lt); font-size:12px; font-weight:650; }
  .tt-c-n em { font-style:normal; font-size:12px; color:var(--ink-2); }
  .tt-note { margin-top:12px; max-width:none; }

  .tt-ls { display:grid; gap:14px; grid-template-columns:1fr; }
  @media (min-width:860px) { .tt-ls { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  .tt-l { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface);
          padding:6px 16px 10px; min-width:0; }
  .tt-l-h { display:block; padding:10px 0; font-size:13px; font-weight:700; color:var(--gold-dk); }
  .tt-l-r { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line-soft); }
  .tt-l-r.tt-on { background:var(--gold-bg); margin:0 -16px; padding:8px 16px; }
  .tt-l-k { width:22px; flex:none; font-family:var(--font-mono); font-size:12px; color:var(--ink-2); text-align:right; }
  .tt-l-n { display:flex; flex-direction:column; min-width:0; }
  .tt-l-n b { font-size:14.5px; font-weight:650; }
  .tt-l-n i { font-style:normal; font-size:12.5px; color:var(--ink-2); }

  .tt-gs { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
  .tt-g { display:flex; flex-direction:column; gap:3px; padding:16px; border-radius:var(--r-card);
          border:1px solid var(--line); background:var(--surface); }
  .tt-g b { font-size:16px; font-weight:700; }
  .tt-g span { font-size:13px; font-weight:600; color:var(--gold-dk); }
  .tt-g i { font-style:normal; font-family:var(--font-mono); font-size:12px; color:var(--ink-2); }
  .tt-g p { margin:6px 0 0; font-size:13.5px; color:var(--ink-2); }

  .tt-p { max-width:none; margin:0 0 14px; }
  .tt-janm { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
             margin-top:18px; padding:18px 20px; border-radius:var(--r-card);
             border:1px solid var(--gold-lt); background:var(--gold-bg); }
  .tt-janm div { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 260px; }
  .tt-janm b { font-size:16px; }
  .tt-janm span { font-size:14px; color:var(--ink-2); }
  .tt-janm .c-btn { display:flex; align-items:center; gap:6px; }

  /* The Hindi rule: under 15px, two more in Hindi. */
  html[lang="hi"] .tt-k, html[lang="hi"] .tt-sub, html[lang="hi"] .tt-grp, html[lang="hi"] .tt-os,
  html[lang="hi"] .tt-v-s, html[lang="hi"] .tt-c-d, html[lang="hi"] .tt-g p, html[lang="hi"] .tt-janm span { font-size:15px; }
  html[lang="hi"] .tt-dl dt, html[lang="hi"] .tt-v-x, html[lang="hi"] .tt-v-w, html[lang="hi"] .tt-c-t i,
  html[lang="hi"] .tt-c-v, html[lang="hi"] .tt-c-n em, html[lang="hi"] .tt-l-h, html[lang="hi"] .tt-l-n i,
  html[lang="hi"] .tt-g span, html[lang="hi"] .tt-g i { font-size:14px; }
  html[lang="hi"] .tt-c-t b, html[lang="hi"] .tt-l-n b, html[lang="hi"] .tt-dl dd { font-size:16px; }

  /* ── /panchang/hora/ ─────────────────────────────── */
  .hr-card { padding:20px 22px; border-radius:var(--r-card);
             border:1px solid var(--gold-lt); background:var(--gold-bg); display:flex; flex-direction:column; gap:14px; }
  .hr-top { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; align-items:center; }
  @media (min-width:560px) { .hr-top { grid-template-columns:auto minmax(0,1fr) auto; } }
  .hr-med { display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
            background:var(--surface); border:1.5px solid var(--gold); color:var(--gold-dk); }
  .hr-id { display:flex; flex-direction:column; min-width:0; }
  .hr-k { font-size:12px; font-weight:700; color:var(--gold-dk); text-transform:uppercase; letter-spacing:.06em; }
  .hr-nm { font-family:var(--font-serif); font-size:30px; line-height:1.15; font-weight:700; }
  .hr-sub { font-size:13.5px; color:var(--ink-2); }
  .hr-bad .hr-sub { color:var(--bad); }
  .hr-clock { grid-column:1 / -1; display:flex; align-items:baseline; justify-content:space-between; gap:10px;
              padding-top:10px; border-top:1px solid var(--gold-lt); }
  @media (min-width:560px) { .hr-clock { grid-column:auto; flex-direction:column; align-items:flex-end;
                                         padding-top:0; border-top:0; } }
  .hr-clock b { font-size:17px; font-weight:700; white-space:nowrap; }
  .hr-clock span { font-size:13.5px; font-weight:600; color:var(--gold-dk); white-space:nowrap; }
  .hr-bar { height:6px; border-radius:var(--r-pill); background:var(--surface); overflow:hidden;
            border:1px solid var(--gold-lt); }
  .hr-bar span { display:block; height:100%; width:var(--p, 0%); background:var(--gold); }
  .hr-for { margin:0; display:flex; flex-direction:column; gap:2px; font-size:14.5px; }
  .hr-for b { font-size:12px; font-weight:700; color:var(--gold-dk); text-transform:uppercase; letter-spacing:.06em; }
  .hr-nextrow { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:10px 14px;
                border-radius:10px; background:var(--surface); border:1px solid var(--line); font-size:14px; }
  .hr-nextrow .hr-g { color:var(--gold-dk); display:grid; place-items:center; }
  .hr-nextrow > span:last-child { margin-left:auto; color:var(--ink-2); font-weight:600; white-space:nowrap; }
  html[lang="hi"] .hr-k, html[lang="hi"] .hr-for b { font-size:14px; letter-spacing:0; text-transform:none; }
  html[lang="hi"] .hr-sub, html[lang="hi"] .hr-clock span, html[lang="hi"] .hr-nextrow { font-size:15px; }
  .hr-ls { display:grid; gap:14px; grid-template-columns:1fr; }
  @media (min-width:860px) { .hr-ls { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  .hr-l { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); padding:6px 16px 10px; }
  .hr-r { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center;
          padding:9px 0; border-top:1px solid var(--line-soft); }
  .hr-r.hr-on { background:var(--gold-bg); margin:0 -16px; padding:9px 16px; box-shadow:inset 3px 0 0 var(--gold); }
  .hr-g { color:var(--gold-dk); display:grid; place-items:center; }
  .hr-n { display:flex; flex-direction:column; min-width:0; }
  .hr-n b { font-size:14.5px; font-weight:650; }
  .hr-n i { font-style:normal; font-size:12px; color:var(--ink-2); }
  .hr-bad .hr-n i { color:var(--bad); }
  .hr-t { font-size:13.5px; font-weight:600; white-space:nowrap; }
  .hr-xs { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden; }
  .hr-x { display:grid; grid-template-columns:1fr; gap:6px; padding:14px 18px; border-top:1px solid var(--line-soft); }
  .hr-x:first-child { border-top:0; }
  @media (min-width:860px) { .hr-x { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.6fr);
                                     gap:16px; align-items:center; } }
  .hr-x-k { font-size:15px; font-weight:650; }
  .hr-x-g { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; color:var(--gold-dk); }
  .hr-x-g b { font-size:14px; font-weight:650; color:var(--ink); }
  .hr-x-g i { font-style:normal; font-size:12px; color:var(--ink-2); }
  .hr-bad .hr-x-g i { color:var(--bad); }
  .hr-x-t { display:flex; flex-wrap:wrap; gap:6px; }
  .hr-x-t span { padding:4px 10px; border-radius:var(--r-pill); border:1px solid var(--line);
                 font-size:12.5px; font-weight:600; white-space:nowrap; }
  /* Only what is still to come today: the horas gone are hidden, not struck. */
  .hr-x-t span.hr-past { display:none; }
  .hr-x-t em { font-style:normal; font-size:12.5px; color:var(--ink-2); }
  .hr-x-t span.hr-nx { background:var(--gold-bg); border-color:var(--gold); }
  .hr-x-t span[data-tag]::before { content:attr(data-tag) " · "; color:var(--gold-dk); font-weight:700; }
  html[lang="hi"] .hr-x-t span, html[lang="hi"] .hr-x-g i { font-size:14px; }
  html[lang="hi"] .hr-x-g b { font-size:16px; }
  html[lang="hi"] .hr-n i, html[lang="hi"] .hr-next { font-size:14px; }
  html[lang="hi"] .hr-t, html[lang="hi"] .hr-n b { font-size:15.5px; }

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