* { 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;
            min-height:44px; box-sizing:border-box;
            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; }
  /* Theme, language, account and the menu at 320px ran the menu button
     to the screen's edge, into the 16px gutter every page keeps. */
  @media (max-width:359px) { .l-act-u { gap:2px; } }
  /* The account in the drawer, only where it left the header. */
  .c-drawer-acct { display:none; }
  @media (max-width:359px) {
    .c-top-r:has(.l-lang) .l-acct { display:none; }
    .c-drawer-acct { display:grid; gap:4px; padding:2px 0 12px; margin-bottom:8px;
                     border-bottom:1px solid var(--line-soft); }
  }
  /* 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); } }


  /* 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; }
/* A price the API could not give takes its chip, and the dot after it, away. */
.s-meta > span:has(> .c-px-gone) { display:none; }
.s-meta > span:has(> .c-px-gone) + span::before { display:none; }

/* ── 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; position:relative; overflow:hidden;
  padding:36px 20px 26px;
  background:radial-gradient(120% 80% at 50% 0%, var(--gold-bg) 0%, transparent 70%), var(--cream); }
@media (min-width:760px) { .s-cta.s-pro { padding:44px 40px 36px; } }
/* The line art: faint, behind everything, never in the way. */
.s-pro-deco { position:absolute; top:0; pointer-events:none; display:block;
  background:var(--gold); opacity:.8;
  -webkit-mask:var(--m) no-repeat top / contain; mask:var(--m) no-repeat top / contain; }
.s-pro-sun { left:0; width:340px; aspect-ratio:340 / 250; -webkit-mask-position:left top; mask-position:left top; }
.s-pro-moon { right:0; width:404px; aspect-ratio:404 / 250; -webkit-mask-position:right top; mask-position:right top; }
/* Smaller and fainter behind a narrower headline; on a phone, a corner of
   each, inside the edge. */
@media (max-width:1099px) { .s-pro-sun { width:250px; } .s-pro-moon { width:290px; } }
@media (max-width:759px) { .s-pro-deco { opacity:.75; } .s-pro-sun { width:44%; left:-5%; }
  .s-pro-moon { width:48%; right:-4%; }
  /* The faces show at the edges, as in the mobile mock: the headline keeps
     to the middle. */
  .s-cta.s-pro .s-pro-h h2 { max-width:78%; margin-inline:auto; } }
.s-pro-h { position:relative; text-align:center; max-width:780px; margin:0 auto 28px; }
.s-cta.s-pro .s-pro-h h2 { font-size:clamp(28px,4.6vw,46px); line-height:1.08; margin:0; }
.s-cta.s-pro .s-pro-h p { margin:12px auto 0; max-width:60ch; font-size:17px; color:var(--ink-2); }
.s-pro-go1 { margin-top:20px; display:inline-flex; gap:10px; align-items:center; padding:0 26px;
  min-height:52px; font-size:16px; box-shadow:0 8px 22px -12px rgba(90,55,10,.55); }
.s-pro-g { position:relative; display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }
/* Side by side from 1000px: narrower, the covers shrink under the chat card
   and no amount of tightening makes the two end together. */
@media (min-width:1000px) { .s-pro-g { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.s-pro-c { display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0;
  padding:22px 20px; border:1px solid var(--line); border-radius:20px; background:var(--surface);
  color:inherit; text-decoration:none; transition:border-color .15s; }
@media (min-width:760px) { .s-pro-c { padding:26px 28px; } }
.s-pro-c:hover { border-color:var(--gold-lt); }
.s-pro-c h3 { font-family:var(--font-serif); font-size:clamp(24px,2.6vw,32px); font-weight:600;
  line-height:1.15; margin:6px 0 0; color:var(--ink); }
.s-pro-t { font-size:15px; line-height:1.55; color:var(--ink-2); }
.s-pro-p { font-size:15px; font-weight:600; color:var(--gold-dk); }
.s-pro-fs { display:flex; text-decoration:none; }
.s-pro-f { width:68px; height:68px; border-radius:50%; overflow:hidden; border:3px solid var(--surface);
  margin-left:-10px; background:var(--surface-2); box-shadow:0 0 0 1px var(--gold-lt); }
.s-pro-f:first-child { margin-left:0; }
/* Six across a phone's card: 44px at 320, 54 from 380. */
@media (max-width:759px) { .s-pro-f { width:44px; height:44px; margin-left:-10px; border-width:2px; } }
@media (min-width:380px) and (max-width:759px) { .s-pro-f { width:54px; height:54px; margin-left:-8px; } }
@media (min-width:760px) { .s-pro-f { width:76px; height:76px; margin-left:-12px; } }
.s-pro-f img { width:100%; height:100%; object-fit:cover; display:block; }
/* The four, as tiles with their subject's icon. */
.s-pro-rs { display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); align-self:stretch; margin-top:4px; }
@media (min-width:480px) { .s-pro-rs { gap:10px; } }
.s-pro-r { display:flex; align-items:center; gap:10px; min-width:0; padding:11px 12px;
  border-radius:12px; background:var(--gold-bg); }
.s-pro-r svg { flex:none; color:var(--gold-dk); }
.s-pro-r > span { display:flex; flex-direction:column; min-width:0; }
.s-pro-r b { font-size:15px; font-weight:650; color:var(--ink); }
.s-pro-r i { font-style:normal; font-size:13.5px; color:var(--ink-2); }

.s-pro-qs { display:flex; flex-direction:column; gap:8px; align-self:stretch; margin-top:4px; }
.s-pro-qs > i { font-style:normal; font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); }
.s-pro-q { display:flex; align-items:center; min-height:44px; padding:10px 14px; border-radius:12px;
  background:var(--gold-bg); color:var(--ink); font-size:14.5px; line-height:1.4; text-decoration:none; }
.s-pro-q:hover { background:var(--gold-lt); }
.s-pro-bs { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-self:stretch; margin-top:6px; }
/* A price abroad is longer than ₹5 ("Chat from $0.10/min"), and at 320
   the nowrap button ran past the screen. Wrap there instead. */
@media (max-width:374px) { .s-pro-bs .c-btn { white-space:normal; flex-wrap:wrap; text-align:center; } }
@media (min-width:1000px) { .s-pro-bs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* The rate sits beside its label, one line. */
.s-pro-bs .c-btn { display:flex; justify-content:center; align-items:center; gap:8px; white-space:nowrap;
  min-height:52px; font-size:16px; }
.s-pro-bs .c-as-rate { font-weight:650; }
.s-pro-fine { font-size:13px; color:var(--ink-3); }
/* ── THE PHONE (Rohit's mobile mock, 28 Sep 2026) ──
   The chat card centred — faces, heading, the line under it — with the
   four as one-row tiles, icon beside the name; Chat and Call full width,
   one over the other. The reports card leads with its heading, then the
   covers, the words, and Explore full width. Everything a little closer. */
@media (max-width:759px) {
  .s-cta.s-pro { padding:24px 12px 14px; }
  .s-pro-h { margin-bottom:18px; }
  .s-cta.s-pro .s-pro-h p { margin-top:8px; font-size:16px; }
  .s-pro-go1 { margin-top:14px; width:100%; max-width:360px; justify-content:center; }
  .s-pro-g { gap:14px; }
  .s-pro-c { padding:18px 12px; gap:10px; border-radius:18px; }
  .s-pro-g > .s-pro-c:first-child { align-items:center; text-align:center; }
  .s-pro-g > .s-pro-c:first-child .s-pro-fs { justify-content:center; }
  .s-pro-c h3 { margin-top:2px; font-size:26px; }
  .s-pro-rs { gap:8px; }
  .s-pro-r { flex-direction:row; align-items:center; gap:7px; padding:9px 8px; text-align:left; }
  .s-pro-r svg { width:20px; height:20px; }
  .s-pro-r b { font-size:14px; white-space:nowrap; }
  .s-pro-r i { font-size:12.5px; line-height:1.3; }
  .s-pro-rs { gap:6px; }
  .s-pro-bs { gap:8px; margin-top:2px; }
  .s-pro-bs .c-btn { min-height:50px; }
  .s-pro-fine { text-align:center; }
  .s-pro-rep h3 { order:-1; margin:0; text-align:center; align-self:stretch; }
  .s-pro-rep .s-pro-cvs { gap:10px; }
  .s-pro-go { align-self:stretch; justify-content:center; margin-top:4px; }
}
/* The smallest phones: a 66px name column cannot hold "Astro Vaidya" beside
   an icon, so the icon goes above it there. */
@media (max-width:359px) {
  .s-pro-r { flex-direction:column; align-items:flex-start; gap:5px; }
  .s-pro-r b { white-space:normal; }
}

/* THE TWO CARDS END TOGETHER (Rohit, 28 Sep 2026: "the right card has
   empty space, shrink the left to match"). Side by side the covers set the
   height, and they shrink with the card: from 1280px the two already match
   to a few pixels; between 1000 and 1279 the chat card is tightened —
   smaller faces, slimmer tiles, closer rows — to fit under the covers.
   Both cards' buttons sit on the bottom edge, so what little is left over
   falls above them and the two rows of buttons line up. */
.s-pro-g > .s-pro-c:first-child .s-pro-bs { margin-top:auto; }
@media (min-width:1000px) and (max-width:1279px) {
  .s-pro-g > .s-pro-c:first-child { gap:8px; }
  .s-pro-g > .s-pro-c:first-child .s-pro-f { width:58px; height:58px; margin-left:-10px; }
  .s-pro-g > .s-pro-c:first-child .s-pro-f:first-child { margin-left:0; }
  .s-pro-g > .s-pro-c:first-child h3 { margin-top:2px; font-size:clamp(22px,2.2vw,28px); }
  .s-pro-g > .s-pro-c:first-child .s-pro-t { font-size:14px; }
  .s-pro-rs { gap:8px; margin-top:2px; }
  .s-pro-r { padding:8px 12px; gap:10px; }
  .s-pro-r svg { width:22px; height:22px; }
  .s-pro-r b { font-size:14.5px; }
  .s-pro-r i { font-size:13px; }
  .s-pro-bs .c-btn { min-height:48px; }
}
/* The reports: the covers big, then the words, then the button. */
.s-pro-cvs { display:flex; gap:14px; align-items:flex-start; align-self:stretch; }
.s-pro-cv { flex:1 1 0; max-width:190px; border-radius:6px; overflow:hidden;
  box-shadow:0 10px 24px -14px rgba(60,30,5,.6); }
.s-pro-cv img { width:100%; height:auto; display:block; }
.s-pro-rep h3 { margin-top:10px; }
.s-pro-go { margin-top:auto; display:inline-flex; align-items:center; gap:8px; min-height:52px;
  padding:0 24px; font-size:16px; }
.s-pro-c .s-pro-p + .s-pro-go { margin-top:12px; }

  /* ── the thumb-zone bar ── */
  /* PHONES ONLY, by width AND pointer. A 600px-wide desktop window is not a
     phone, and pinning a bar to the bottom of one is a website cosplaying as
     an app. `hidden` is honoured because nothing here sets display on it
     except this rule — a class that set display would outrank the attribute,
     which is how three other components on this site ended up painting while
     hidden. */
  .h-bar { display:none; }
  @media (max-width:640px) and (pointer:coarse) {
    .h-bar { display:flex; align-items:center; gap:11px;
             position:fixed; left:0; right:0; bottom:0; z-index:60;
             padding:9px 14px calc(9px + env(safe-area-inset-bottom));
             background:var(--surface); border-top:1px solid var(--line);
             box-shadow:0 -6px 20px rgba(0,0,0,.10); }
    .h-bar[hidden] { display:none; }
    /* THE SPACER BELONGS TO THE FOOTER, NOT TO THE BODY.
       body{padding-bottom:78px} reserved the room, and the body's background
       is not the footer's — --cream against --surface-2 — so the difference
       between my 78px guess and the bar's actual 65px painted a 13px strip
       of the wrong colour between the two. On a dark theme that reads as a
       glowing seam above the bar.
       Padding the FOOTER instead fills the same room with the footer's own
       background, so the colour runs unbroken to the top of the bar and the
       exact height stops mattering. */
    .c-foot { padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  }
  .h-bar-p { flex:none; line-height:1.12; }
  .h-bar-p b { display:block; font-size:16px; font-weight:750;
               font-family:var(--font-mono); letter-spacing:-.02em; }
  .h-bar-p b i { font-style:normal; font-size:11px; font-weight:600; }
  .h-bar-p > span { display:block; font-size:10.5px; color:var(--ink-3); }
  .h-bar-c { flex:1; min-height:46px; display:grid; place-items:center;
             border-radius:12px; background:var(--gold); color:var(--pill-ink);
             font-size:15px; font-weight:750; text-decoration:none; }

  /* ── 02: the kundli form, here, as design A draws it (Rohit, 19 Oct 2026:
     "follow the design, I want exact same") ── */
  .h-kd { display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
  .h-kd-c, .h-kd-f { min-width:0; }
  @media (min-width:900px) {
    /* TOP AND FOOT FLUSH WITH THE FORM. Centred, the shorter column left a
       band of nothing over the heading (Rohit, 19 Oct 2026: "huge space
       above"); the points take up the difference instead. */
    .h-kd { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:stretch; }
    .h-kd-c { display:flex; flex-direction:column; }
    .h-kd-c .h-kd-pts { margin-top:auto; padding-top:24px; }
  }
  .h-kd-t { margin:0 0 10px; font-family:var(--font-serif); font-size:27px; line-height:1.18;
            font-weight:600; color:var(--ink); text-wrap:balance; }
  .h-kd-p { margin:0; font-size:15.5px; line-height:1.55; color:var(--ink-2); text-wrap:pretty; }
  @media (min-width:900px) {
    .h-kd-t { margin-bottom:20px; font-size:38px; line-height:1.15; }
    .h-kd-p { font-size:17px; line-height:1.6; max-width:58ch; }
  }
  /* THE POINTS ARE CARDS (Rohit, 19 Oct 2026: "the left side seems
     empty"). As three lines of small text the column stopped a third of the
     way across and well above the foot of the form beside it; as a stack of
     cards it has the form's width of weight and close to its height. */
  .h-kd-pts { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:10px; }
  .h-kd-pts li { display:flex; gap:14px; align-items:center; padding:14px 16px;
                 border:1px solid var(--line); border-radius:14px; background:var(--surface); }
  .h-kd-tk { flex:none; display:grid; place-items:center; width:34px; height:34px;
             border-radius:50%; color:var(--gold-dk);
             background:color-mix(in srgb, var(--gold-lt) 45%, var(--surface)); }
  .h-kd-tk svg { stroke-width:2.8; }
  .h-kd-pts b { display:block; font-size:16px; line-height:1.35; color:var(--ink); }
  .h-kd-pts i { display:block; font-style:normal; font-size:14px; line-height:1.45; color:var(--ink-3); }
  /* A TABLET (641-899px) IS NOT A LONG PHONE (the homepage pass, 19 Oct
     2026): the three points side by side and the date beside the time, which
     took the section at 768px from 1,067px to about 830. */
  @media (min-width:641px) and (max-width:899px) {
    .h-kd-pts { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .h-kd-pts li { align-items:flex-start; flex-direction:column; gap:10px; }
    /* Scoped, because .kd-hf-2's own one-column rule is written later. */
    .h-kd .kd-hf-2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  }
  /* ── 03 THE REPORTS: the /reports/ catalogue's chips over report rows
     (Rohit, 19 Oct 2026, the homepage pass). "Popular" is the first three;
     three across on a desktop, the third centred on a two-column tablet,
     one column on a phone; every line of what a report is, uncut. */
  #hrf-all:checked ~ .c-cat-grid > :nth-child(n+4) { display:none; }
  .h-rp .c-cat-grid { display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
  @media (min-width:640px) and (max-width:999px) {
    .h-rp .c-cat-grid { display:flex; flex-wrap:wrap; justify-content:center; }
    .h-rp .c-cat-i { flex:0 0 calc(50% - 7px); }
    /* Two rows of two on a tablet, not a pair and one alone (Rohit). */
    #hrf-all:checked ~ .c-cat-grid > :nth-child(4) { display:flex; }
    /* And the five chips on one row: at 16px a side the last one wrapped
       alone onto a second. */
    .h-rp .c-cat-chips { gap:6px; }
    .h-rp .c-cat-chips .c-cat-chip { padding:0 12px; }
  }
  /* Centred, so a topic of two sits in the middle of the row, not at its left. */
  @media (min-width:1000px) {
    .h-rp .c-cat-grid { display:flex; flex-wrap:wrap; justify-content:center; }
    .h-rp .c-cat-i { flex:0 0 calc((100% - 28px) / 3); }
  }
  .h-rp .c-rr { width:100%; }
  .h-rp .c-rr-d { display:block; -webkit-line-clamp:unset; overflow:visible; text-wrap:pretty; }
  @media (max-width:640px) {
    .h-rp .c-cat-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
                         margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; }
    .h-rp .c-cat-chips::-webkit-scrollbar { display:none; }
    .h-rp .c-cat-chip { flex:0 0 auto; min-height:44px; font-size:14px; }
  }
  .h-rp .c-cat-chip { min-height:44px; padding:0 16px; font-size:14px; font-weight:650; }
  /* The design gives a phone its own, shorter line. */
  .h-kd-pn { display:none; }
  @media (max-width:640px) { .h-kd-pts, .h-kd-pw { display:none; } .h-kd-pn { display:block; } }

  /* The card. */
  .h-kd .c-toolf { display:flex; flex-direction:column; gap:12px; padding:18px;
                   border-radius:18px; box-shadow:0 10px 30px rgba(120,85,20,.08); }
  @media (min-width:900px) { .h-kd .c-toolf { padding:24px; gap:14px; } }
  .kd-hf { display:grid; gap:14px; }
  .kd-hf-2 { display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
  @media (min-width:900px) { .kd-hf-2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
  .kd-hf > *, .kd-hf-2 > * { min-width:0; margin:0; }
  .kd-hf .c-field, .kd-hf .c-pf { margin:0; }
  /* Labels in sentence case, not the mono caps the other forms use. */
  .kd-hf .c-pf-l, .kd-hf .c-field > label {
    display:block; margin:0 0 6px; font-family:var(--font-sans); font-size:13.5px;
    font-weight:650; letter-spacing:0; text-transform:none; color:var(--ink-2); }
  .kd-hf .c-pf-t, .kd-hf .c-field input {
    min-height:48px; border-width:1.5px; border-radius:10px; font-size:16px; }
  /* The date and the place say how to fill them where the icon was. */
  .kd-hf .c-pf-t > svg { display:none; }
  .kd-hf [data-dp-num] .c-pf-t::after { content:'DD MM YYYY'; margin-left:auto;
    font-size:13px; font-weight:500; color:var(--ink-3); }
  .kd-hf [data-dp-num] .c-pf-t b { white-space:nowrap; }
  /* Beside the time between 900 and 1200px the field is about 200px: the
     hint goes before the date has to wrap round it ("15 / 07 /" over "1990"). */
  @media (min-width:900px) and (max-width:1199px) {
    .kd-hf [data-dp-num] .c-pf-t::after { content:none; }
  }
  .kd-hf .c-pf-sep { margin:0 4px; }
  .kd-hf .c-pf-mer { color:inherit; }
  .kd-hf .c-ac { position:relative; }
  .kd-hf .c-ac input { padding-right:118px; }
  .kd-hf .c-ac::after { content:'type to search'; position:absolute; right:14px; bottom:15px;
    font-size:13px; color:var(--ink-3); pointer-events:none; }
  /* The two hints are CSS text, so the Hindi twin says them here. */
  html[lang="hi"] .kd-hf .c-ac::after { content:'लिखकर खोजें'; }
  html[lang="hi"] .kd-hf [data-dp-num] .c-pf-t::after { content:'दिन महीना साल'; }
  .kd-unk .c-unknown { margin:0; font-size:14px; color:var(--ink-2); }
  /* The button across the card, nothing beside it. */
  .h-kd .c-toolf-go { display:block; margin:4px 0 0; padding:0; border:0; }
  .h-kd .c-toolf-go > .c-help { display:none; }
  .h-kd .c-toolf-go .c-btn { width:100%; }
  .h-kd .c-toolf-alt { margin:0; padding:0; border:0; text-align:center; font-size:14px;
                       color:var(--ink-3); }
  /* Two readings of the same day, so they share one frame and one height.
     A tab that changes the page height on click makes everything below it
     jump; the wrapper is sized to the taller panel so nothing moves. */
  .h-tabs-b { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
  .h-tab { 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-tab:hover { border-color:var(--gold-lt); color:var(--gold-dk); }
  .h-tab svg { color:var(--ink-3); }
  #tday-panchang:checked ~ * label[for="tday-panchang"],
  #tday-rashi:checked ~ * label[for="tday-rashi"] {
    background:var(--gold-solid); border-color:var(--gold-solid);
    color:var(--gold-solid-text); }
  #tday-panchang:checked ~ * label[for="tday-panchang"] svg,
  #tday-rashi:checked ~ * label[for="tday-rashi"] svg { color:currentColor; }
  .h-tab-w { display:grid; }
  /* HEIGHT FOLLOWS THE OPEN TAB — and this reverses an earlier decision, so
     the reasoning on both sides is worth keeping.
     Both panes used to share one grid cell and stay laid out (visibility,
     not display) specifically to stop the page below jumping: the note here
     measured it at up to 193px per tab click. That was the right call when
     the two panes were within 193px of each other.
     They are not any more. The rashifal pane is now the /horoscope/ block —
     twelve panes, a radar and a period bar — and stacking it means the
     Panchang tab renders a screen and a half of blank page underneath
     itself. A jump when you click beats a hole you did not ask for and
     cannot dismiss.
     min-width:0 stays, and is not optional: a grid item defaults to
     min-width:auto, so the marquee's 7,200px max-content track sized its own
     cell instead of being clipped by it and the page ran 7,718px wide.
     display:none cannot be transitioned, so the crossfade becomes a fade-IN
     by animation on the pane that is arriving — which also fixes the old
     trade noted here, that links in the hidden pane stayed focusable. */
  .h-tab-p { display:none; grid-area:1 / 1; min-width:0; }
  #tday-panchang:checked ~ * .h-tab-p-panchang,
  #tday-rashi:checked ~ * .h-tab-p-rashi {
    display:block; animation:h-tab-in .22s ease both; }
  @keyframes h-tab-in { from { opacity:0 } to { opacity:1 } }
  @media (prefers-reduced-motion:reduce) {
    #tday-panchang:checked ~ * .h-tab-p-panchang,
    #tday-rashi:checked ~ * .h-tab-p-rashi { animation:none; } }

  /* Two equal columns, and the left one centres its own content so the halves
     read as a matched pair rather than a wall of left-aligned text beside a
     centred device. */
  /* start, not center. Centring a 487px column against a 689px phone pushed
     the copy 100px down the section and left a hole under the heading. */
  /* ONE alignment axis for the left column: left.
     It was running two at once — text-align:center on the container while the
     feature cells were internally left-aligned — which is why the block read as
     scattered however carefully it was spaced. Centred text over a left-aligned
     grid gives the eye two edges to follow and it settles on neither.
     Vertically centred against the phone, so the two columns balance. The
     earlier objection was to centring a LOOSE column — once the left side was
     structured on one axis, the mass on each side matches and centring reads
     as symmetry rather than as a hole under the heading. */
  .l-app2 { display:grid; gap:26px; align-items:center; text-align:left; }
  @media (min-width:880px) {
    .l-app2 { grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr); gap:44px; }
  }
  .l-app2 > div:first-child { max-width:520px; }
  /* ── A PHONE DOES NOT NEED A PICTURE OF A PHONE ──
     This band was 1,455px at 390px wide — 1.7 screens, the longest section
     on the page, for "we also have an app". 689px of that is .c-sim, a
     simulated chat screen inside a phone frame. On a desktop it shows a
     reader what the app looks like; on a phone it is a drawing of the
     device they are holding, and it costs them four fifths of a screen to
     scroll past.
     The second lede goes with it. The first says everything carries over
     and you never type your birth details twice, which is the reason to
     install; the second re-argues the pitch of the whole page — that the
     answer is read off your own chart — three sections after the page has
     already made it. */
  @media (max-width:640px) {
    /* THE CONVERSATION STAYS. It was hidden here once — 689px of simulated
       chat inside a phone frame, on a phone — and put back, because what it
       shows is not the device, it is what an answer looks like. That is the
       one thing this band is selling and the rest of the page only describes.
       Scaled instead of removed: the frame is capped so it reads as a sample
       rather than as a second copy of the app, and the section lands near
       800px instead of 1,455. */
    .l-app2 { gap:18px; }
    /* 250px was too tight — at that width the bubbles wrap every three or
       four words and the frame reads as a thumbnail of a chat rather than as
       a chat. The column instead, capped at the width the desktop gives it,
       which is the widest a phone can show and still look like a phone. */
    .l-app2-p { max-width:100%; min-width:0; margin-inline:auto; }
    /* Four one-per-row feature cells is 287px of list above a conversation
       that is the actual argument. Two up halves it and they still read. */
    /* .l-app2 .l-appl — the base .l-appl is declared LATER in this block, so
       a bare selector here loses at equal specificity. Sixth time. */
    .l-app2 .l-appl { grid-template-columns:1fr 1fr; gap:8px; }
    .l-app2 .l-appl li { padding:11px 12px; }
    /* min-width:0 on both, or the frame keeps its intrinsic width and the
       PAGE scrolls sideways: at a 320px viewport the column is 288 and the
       simulator rendered 310, six pixels of horizontal scroll on the whole
       document. A flex item's default min-width:auto is the usual cause and
       it is the rule .l-wrap already carries for the same reason. */
    .l-app2-p .c-sim { width:100%; max-width:330px; min-width:0; }
  }
  /* The heading moves INTO the left column so the whole side is one block that
     centres against the phone. Left outside it, the head sat alone at the top
     of the section with 180px of air between it and the copy it introduces. */
  .l-app2 .c-sh { margin-top:0; margin-bottom:var(--space-4); }
  .l-app2 .l-sub { max-width:50ch; }
  /* min-width:0 on both. A flex item defaults to min-width:auto, so the
     simulator's min-content width sized the column and the page ran 26px over
     at 320. Third time this exact trap has bitten in this file — grid item,
     marquee, now flex item. */
  .l-app2-p { display:flex; justify-content:center; min-width:0; }
  /* A SHORTER PHONE (the homepage pass, 19 Oct 2026). Full length it made the
     band 767px on a desktop and 1,237 on a phone, for an app not out yet. The
     thread grows up out of the composer, so a shorter screen still shows the
     latest of the conversation. */
  .l-app2-p .c-sim-body { aspect-ratio:auto; height:600px; min-height:0; }
  @media (max-width:640px) { .l-app2-p .c-sim-body { height:460px; } }
  /* A TABLET IS TWO COLUMNS TOO (the homepage pass): stacked, the copy
     stopped at 520px with the right of the screen empty and the phone alone
     under it. The phone narrower and the four points one per row beside it. */
  @media (min-width:641px) and (max-width:879px) {
    .l-app2 { grid-template-columns:minmax(0,1fr) 280px; gap:28px; }
    .l-app2 .l-appl { grid-template-columns:minmax(0,1fr); }
    .l-app2-p .c-sim-body { height:540px; }
  }
  .l-app2-p > * { min-width:0; }
  /* Rhythm: the paragraph is separated from the proof, and the action sits
     close to what justifies it. Equal gaps everywhere left the badges looking
     detached from the grid above them. */
  .l-app2 .l-sub { margin-bottom:var(--space-5); }
  .l-app2 .c-st-g { justify-content:flex-start; margin-top:var(--space-4); }
  /* CENTRED ON A PHONE. Left-aligned is right on the wide layout, where the
     badges sit under a left-aligned paragraph in a two-column band. On a phone
     that band is one centred column — heading, lede and the two simulators all
     centre — and the badges were the only thing still hanging off the left
     edge. AFTER the rule it overrides, not before: a media query adds no
     specificity, and .l-app2 .c-st-g placed above would have won on order and
     the block would have done nothing. */
  @media (max-width:640px) {
    .l-app2 .c-st-g { justify-content:center; }
  }
  .l-sims { display:grid; gap:26px; justify-items:center; }
  @media (min-width:760px) { .l-sims { grid-template-columns:repeat(2,1fr); } }
  /* A grid item defaults to min-width:auto, so the figure sized itself to the
     simulator's min-content (330px) instead of the 288px column — 26px of
     page overflow at 320. */
  .l-sims { min-width:0; }
  .l-sims figure { margin:0; min-width:0; width:100%; }
  .l-sims figcaption { margin-top:12px; text-align:center; font-size:13px;
                       font-weight:700; color:var(--ink-3); }
  .l-app3 { margin-top:30px; align-items:center; }
  .l-app3 .l-appl { margin:0; grid-template-columns:1fr; }
  @media (min-width:620px) { .l-app3 .l-appl { grid-template-columns:repeat(2,1fr); } }
  /* A 2x2 grid, each cell left-aligned inside. Four centred lines stacked in a
     column have no shared edge for the eye to follow, so they read as scattered
     however neatly they are spaced — the structure has to come from alignment,
     not from spacing. The block stays centred; its contents line up. */
  .l-appl { list-style:none; margin:0; padding:0; display:grid; gap:10px;
            grid-template-columns:1fr; text-align:left; }
  @media (min-width:520px) { .l-appl { grid-template-columns:repeat(2,1fr); } }
  .l-appl li { display:flex; align-items:flex-start; gap:10px; padding:13px 14px;
               border:1px solid var(--line); border-radius:var(--r-in);
               background:var(--surface); }
  .l-appl svg { flex:none; margin-top:1px; color:var(--gold-dk); }
  .l-appl b { display:block; font-size:13.5px; font-weight:700; line-height:1.3; }
  .l-appl i { display:block; font-style:normal; font-size:12px; color:var(--ink-3);
              margin-top:2px; line-height:1.4; }
  /* THE ROSTER'S OWN FILTER AND GRID (astrologers.ROSTER_CSS), by topic
     (Rohit, 19 Oct 2026, the homepage pass): the chips are the worries a
     reader comes with, and every card is one of the twenty-four, best rated
     first. "Top rated" shows six, four on a phone; the rest are a chip or
     "See all" away. A VERTICAL LIST ON A PHONE: the swiped rail hid all but
     one card and its horizontal scroll read as a broken page. */
  #af-all:checked ~ .h-astro .a-cell:nth-child(n+7) { display:none; }
  @media (max-width:639px) {
    #af-all:checked ~ .h-astro .a-cell:nth-child(n+5) { display:none; }
  }
  /* A topic is three: on a two-column tablet the third is centred under the
     pair rather than left alone at one side. */
  @media (min-width:640px) and (max-width:1039px) {
    .h-astro .a-grid { display:flex; flex-wrap:wrap; justify-content:center; }
    .h-astro .a-cell { flex:0 0 calc(50% - 7px); }
  }
  /* Bigger faces on the landing page's cards (Rohit, 19 Oct 2026): 72px,
     64px on a phone, against the roster's 64 and 52. */
  .h-astro .c-as-ph, .h-astro .c-as-h .c-avatar { width:72px; height:72px; }
  @media (max-width:640px) {
    .h-astro .c-as-ph, .h-astro .c-as-h .c-avatar { width:64px; height:64px; }
  }
  .h-cta { display:flex; flex-wrap:wrap; gap:10px; }
  .c-hero-l { text-wrap:pretty; }
  /* The faces under the buttons below 1000px; the orbit above it. */
  .h-fp { margin-top:18px; }
  @media (min-width:1000px) { .h-fp { display:none; } }
  @media (max-width:999px) { .c-hero-mid .c-hero-a { display:none; } }
  /* A TABLET IS NOT A WIDE PHONE (Rohit, 19 Oct 2026: 768 "not looking that
     good"). Left-aligned, the text stopped two thirds of the way across, the
     two buttons stretched to half the screen each and the faces sat on the
     bottom edge. Between 641 and 999px the hero is one centred column: the
     buttons at their own width, the faces under them, room underneath. */
  @media (min-width:641px) and (max-width:999px) {
    .c-hero-mid { padding:28px 0 40px; }
    .c-hero-mid .c-hero-x { text-align:center; }
    .c-hero-mid .c-hero-l { margin-inline:auto; max-width:54ch; }
    .c-hero-mid .h-cta { justify-content:center; }
    .c-hero-mid .h-cta .c-btn { flex:0 0 auto; min-width:240px; }
    .h-fp { margin-top:22px; }
    .h-fp .c-fp { justify-content:center; }
  }
  /* A GRID, NOT A WRAPPED ROW OF PILLS. Measured at 1280 the left column
     finished 93px above the orbit beside it — the exact hole ui.hero()'s
     docstring says it was rebuilt to close, reopened by this row being the
     shortest thing that could sit here. Four questions in two columns fill
     it, and they read as a considered block rather than as pills that
     happened to wrap; two rows of two also answer the six cards on the
     right instead of trailing off under them. */
  /* ── the question ticker ────────────────────────────────────── */
  /* FULL BLEED AND CSS ONLY. Two identical copies of the twenty-five sit in
     one track, and the track translates by -50% — a percentage of the
     TRANSFORMED element, so half a two-copy track is exactly one copy and
     the loop restarts on a seam there is nothing to see at. Translating a
     single copy by the same amount would slide the only content off and
     leave a gap. */
  /* The strip's own band.
     It is back to 0 now that the hero box itself is 50px shorter: at -30 the
     orbit cleared the strip by only 4px, which is a collision waiting for a
     longer name in the roster. */
  /* The section is just spacing now. The band inside it carries the rail and
     the border, and it sits in l-wrap, so its edges line up with the hero
     above and the cards below instead of running off both sides of the
     screen. */
  .h-tk { position:relative; }
  .h-tk { padding:10px 0 4px; }
  .h-tk-b { display:flex; align-items:center; gap:14px; }
  .h-tk-l { flex:none; display:inline-flex; align-items:center; gap:8px;
            font-size:14px; font-weight:650; color:var(--ink-2); white-space:nowrap; }
  .h-tk-l svg { color:var(--gold-dk); }
  .h-tk-p { flex:none; display:grid; place-items:center; width:44px; height:44px;
            border-radius:50%; border:1px solid var(--line); background:var(--surface);
            color:var(--ink-2); cursor:pointer; }
  .h-tk-p:hover { border-color:var(--gold); color:var(--gold-dk); }
  .h-tk-p:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .h-tk-p svg + svg, .h-tk-off .h-tk-p svg:first-child { display:none; }
  .h-tk-off .h-tk-p svg + svg { display:block; }
  /* EVERY WAY TO STOP IT: :hover for a pointer, :focus-within for a keyboard,
     :active for a thumb, prefers-reduced-motion for anyone who has asked their
     system for that, and the pause button (.h-tk-p) for everyone else, which
     is the control WCAG 2.2.2 asks for. */
  /* Shorter: the strip is 44px of pill and 16px of air, not 72.
     The mask goes on the inner track, not on .h-tk-b — a mask on the box
     would fade its border away at both ends along with the pills. Now that
     the band has a hard edge, a pill sliding under it needs to fade rather
     than be guillotined at the corner. */
  .h-tk-m { flex:1 1 auto; min-width:0; overflow:hidden; padding:8px 0;
            -webkit-mask-image:linear-gradient(to right, transparent 0,
                #000 26px, #000 calc(100% - 26px), transparent 100%);
            mask-image:linear-gradient(to right, transparent 0,
                #000 26px, #000 calc(100% - 26px), transparent 100%); }
  .h-tk-t { display:flex; width:max-content;
            animation:h-tk-run 90s linear infinite; }
  @keyframes h-tk-run { to { transform:translateX(-50%); } }
  /* Every way there is to stop it, because each covers a case the others do
     not: hover for a pointer, focus-within for a keyboard, active for the
     moment a thumb lands on a pill, and the checkbox for everyone else. */
  .h-tk:hover .h-tk-t, .h-tk:focus-within .h-tk-t,
  .h-tk:active .h-tk-t, .h-tk-off .h-tk-t { animation-play-state:paused; }
  /* min-width so the seam survives a shorter list than today's twenty-five:
     each copy is at least a screen wide, so the two halves are always equal
     and -50% always lands on the join. */
  .h-tk-c { display:flex; align-items:center; gap:9px; flex:0 0 auto;
            min-width:100vw; width:max-content; padding-right:9px; }
  .h-tk-c a { flex:0 0 auto; display:inline-flex; align-items:center;
              min-height:44px; padding:0 16px; border:1px solid var(--line);
              border-radius:var(--r-pill); background:var(--surface);
              font-size:13px; font-weight:600; color:var(--ink-2);
              text-decoration:none; white-space:nowrap; }
  /* ── NOT ON A PHONE AT ALL ──
     This was a marquee that clipped its pills mid-word at 390px, then a rail
     to fix that. It is gone instead: twenty-five questions that all lead to
     the same place, between a hero that has just made the offer and the
     section that lists what the site does. On a wide screen it is a band of
     movement under the fold; on a phone it is a whole screen of scrolling
     between the two things a reader came for.
     The section stays in the markup and stays indexable — only the display
     goes, and only under 640px.
     The label is inside the row now, so it goes with it. */
  @media (max-width:640px) { .h-tk { display:none; } }
  .h-tk-c a:hover, .h-tk-c a:focus-visible { border-color:var(--gold);
              background:var(--gold-bg); color:var(--gold-dk); }
  /* Nothing moves, and the duplicate goes rather than printing the
     twenty-five twice down the page. */
  @media (prefers-reduced-motion:reduce) {
    /* display:block, not flex-wrap. The track was a flex row and the copy
       inside it a flex ITEM at flex:0 0 auto, so the copy sized to its own
       max-content and its flex-wrap:wrap never had a width to wrap against —
       seven of the twenty-five questions showed and the other eighteen were
       clipped with no way to reach them. As a block the copy fills the band
       and wraps for real. */
    .h-tk-t { animation:none; display:block; width:auto; }
    .h-tk-c { min-width:0; width:auto; flex-wrap:wrap; padding-right:0; }
    .h-tk-c[aria-hidden="true"] { display:none; }
    /* Nothing slides under the edge, so a fade there just looks like a fault. */
    .h-tk-m { -webkit-mask-image:none; mask-image:none; }
    .h-tk-p { display:none; }
  }

  /* Below 1100 the two buttons cannot sit side by side without the labels
     wrapping, so they stack deliberately rather than raggedly. */
  .h-cta .c-btn { flex:1 1 100%; }
  @media (min-width:440px) { .h-cta .c-btn { flex:1 1 auto; min-width:190px; } }
  .h-alt { display:inline-flex; align-items:center; justify-content:center; gap:9px;
           text-decoration:none; }
  .h-alt svg { color:var(--gold-dk); }

  /* ── 04 TODAY (Rohit, 19 Oct 2026, the homepage pass): /panchang/'s own
     glance, limbs and good and bad hours (panchang.DAY_CSS), in place of a
     sunrise-to-sunrise timeline that a phone showed cut off in a sideways
     scroll. The glance is the answer; the cards are the reasons. */
  .h-tab-p-panchang .p-glance { margin:14px 0 16px; padding:14px 16px; font-size:15.5px;
      border-radius:var(--r-card); background:var(--gold-bg); border:1px solid var(--gold-lt); }
  .h-pc { display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
  .h-pc .p-angas-k { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* The limb names readable, not 10px capitals. */
  .h-pc .p-anga-h { font-family:var(--font-sans); font-size:13px; letter-spacing:0;
                    text-transform:none; font-weight:650; }
  .h-pc .p-per-h { font-family:var(--font-sans); font-size:14px; letter-spacing:0;
                   text-transform:none; font-weight:700; }
  .h-pc .p-per-i b { font-size:14.5px; }
  .h-pc .p-per-i i { font-size:13px; }
  @media (min-width:1000px) {
    .h-pc { grid-template-columns:minmax(0,.9fr) minmax(0,2fr); align-items:stretch; }
    .h-pc .p-angas-k { grid-template-columns:minmax(0,1fr); }
  }
  .h-pan-a { display:flex; justify-content:flex-end; margin-top:18px; }
  /* "All 40+ Calculators" on a desktop, "All 40+" on a tablet or a phone
     (Rohit, 19 Oct 2026). */
  @media (max-width:999px) { .h-tw { display:none; } }
  /* The rashifal stays on one rashi (horoscope.STILL_CSS, as on every other
     public page): it used to fade to the next one every few seconds, under a
     reader still reading theirs. Its hint line in words, not 10px capitals. */
  .h-tab-p-rashi .h-f-hint { font-family:var(--font-sans); font-size:13.5px;
                             letter-spacing:0; text-transform:none; }
  /* THE DAY'S ANSWER ON A PHONE (Rohit, 19 Oct 2026: "the today's rashifal
     part that is still left"; on a tablet and a laptop "the existing one was
     fine"). There the card ran to 1,600px: the verdict, a long paragraph,
     the lucky four, a radar of five scores. On a phone it is the verdict, its
     one line, the lucky four and who you get on with, labels in words; the
     paragraph and the radar are the full rashifal's, one button away. */
  @media (max-width:640px) {
    .h-tab-p-rashi .h-f-over, .h-tab-p-rashi .h-radar { display:none; }
    .h-tab-p-rashi .h-f-card { grid-template-columns:minmax(0,1fr); }
    .h-tab-p-rashi .h-f-eyebrow, .h-tab-p-rashi .h-f-luck-t, .h-tab-p-rashi .h-f-l {
      font-family:var(--font-sans); letter-spacing:0; text-transform:none; }
    .h-tab-p-rashi .h-f-eyebrow { font-size:13.5px; }
    .h-tab-p-rashi .h-f-luck-t { font-size:14px; font-weight:700; }
    .h-tab-p-rashi .h-f-l { font-size:12.5px; }
  }
  @media (max-width:640px) { .h-pan-a .c-btn { flex:1; } }

  /* ── 08 blog ─────────────────────────────────────────── */
  /* Three across, not four. Six posts in a four-column grid leaves a two-card
     orphan row; two rows of three finish square. */
  /* Same three-and-an-orphan problem as the reports grid. Three posts fit
     from 560px; 600 gives the titles a little more room before they start
     running to four lines. */
  .l-blg { display:grid; gap:16px; grid-template-columns:1fr; }
  @media (min-width:600px) { .l-blg { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  .l-blg > * { min-width:0; }
  .l-blga { display:flex; justify-content:center; margin-top:22px; }

  /* ── 09 testimonials ─────────────────────────────────── */
  /* The row itself is ui.quote_marquee — a shared component, so its CSS lives
     with it. Nothing left to say here but the inline <code> in the lede. */
  .l-sub code { font-family:var(--font-mono); font-size:.9em; padding:1px 5px;
                border-radius:5px; background:var(--rail); color:var(--ink); }

.c-sim-m, .c-sim-typing { animation-duration:15.1s; animation-iteration-count:infinite; animation-fill-mode:both; }
.c-sim-m[style*="--i:0;"] { animation-name:c-sim-in0; }
@keyframes c-sim-in0 {
  0%,3.31% { opacity:0; max-height:0; transform:translateY(6px); }
  5.51%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:1;"] { animation-name:c-sim-in1; }
@keyframes c-sim-in1 {
  0%,9.93% { opacity:0; max-height:0; transform:translateY(6px); }
  12.13%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:2;"] { animation-name:c-sim-in2; }
@keyframes c-sim-in2 {
  0%,22.52% { opacity:0; max-height:0; transform:translateY(6px); }
  24.72%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:3;"] { animation-name:c-sim-in3; }
@keyframes c-sim-in3 {
  0%,29.14% { opacity:0; max-height:0; transform:translateY(6px); }
  31.34%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:4;"] { animation-name:c-sim-in4; }
@keyframes c-sim-in4 {
  0%,41.72% { opacity:0; max-height:0; transform:translateY(6px); }
  43.92%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:5;"] { animation-name:c-sim-in5; }
@keyframes c-sim-in5 {
  0%,48.34% { opacity:0; max-height:0; transform:translateY(6px); }
  50.54%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:6;"] { animation-name:c-sim-in6; }
@keyframes c-sim-in6 {
  0%,60.93% { opacity:0; max-height:0; transform:translateY(6px); }
  63.13%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:7;"] { animation-name:c-sim-in7; }
@keyframes c-sim-in7 {
  0%,67.55% { opacity:0; max-height:0; transform:translateY(6px); }
  69.75%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:8;"] { animation-name:c-sim-in8; }
@keyframes c-sim-in8 {
  0%,80.13% { opacity:0; max-height:0; transform:translateY(6px); }
  82.33%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-typing[style*="--i:2;"] { animation-name:c-sim-typ2; }
@keyframes c-sim-typ2 {
  0%,16.56% { opacity:0; max-height:0; }
  17.96%,22.52% { opacity:1; max-height:44px; }
  23.72%,100% { opacity:0; max-height:0; } }
.c-sim-typing[style*="--i:4;"] { animation-name:c-sim-typ4; }
@keyframes c-sim-typ4 {
  0%,35.76% { opacity:0; max-height:0; }
  37.16%,41.72% { opacity:1; max-height:44px; }
  42.92%,100% { opacity:0; max-height:0; } }
.c-sim-typing[style*="--i:6;"] { animation-name:c-sim-typ6; }
@keyframes c-sim-typ6 {
  0%,54.97% { opacity:0; max-height:0; }
  56.37%,60.93% { opacity:1; max-height:44px; }
  62.13%,100% { opacity:0; max-height:0; } }
.c-sim-typing[style*="--i:8;"] { animation-name:c-sim-typ8; }
@keyframes c-sim-typ8 {
  0%,74.17% { opacity:0; max-height:0; }
  75.57%,80.13% { opacity:1; max-height:44px; }
  81.33%,100% { opacity:0; max-height:0; } }
.c-dm-pane .c-sim-m, .c-dm-pane .c-sim-typing { animation-play-state:paused; }
#dm-acharya_parashara:checked ~ * .c-dm-pane-acharya_parashara { visibility:visible; opacity:1; pointer-events:auto; }
#dm-acharya_parashara:checked ~ * .c-dm-pane-acharya_parashara .c-sim-m,
#dm-acharya_parashara:checked ~ * .c-dm-pane-acharya_parashara .c-sim-typing { animation-play-state:running; }
#dm-acharya_parashara:checked ~ * label[for="dm-acharya_parashara"] { background:var(--gold-bg); border-color:var(--gold); }
#dm-astro_radha:checked ~ * .c-dm-pane-astro_radha { visibility:visible; opacity:1; pointer-events:auto; }
#dm-astro_radha:checked ~ * .c-dm-pane-astro_radha .c-sim-m,
#dm-astro_radha:checked ~ * .c-dm-pane-astro_radha .c-sim-typing { animation-play-state:running; }
#dm-astro_radha:checked ~ * label[for="dm-astro_radha"] { background:var(--gold-bg); border-color:var(--gold); }
#dm-astro_arjun:checked ~ * .c-dm-pane-astro_arjun { visibility:visible; opacity:1; pointer-events:auto; }
#dm-astro_arjun:checked ~ * .c-dm-pane-astro_arjun .c-sim-m,
#dm-astro_arjun:checked ~ * .c-dm-pane-astro_arjun .c-sim-typing { animation-play-state:running; }
#dm-astro_arjun:checked ~ * label[for="dm-astro_arjun"] { background:var(--gold-bg); border-color:var(--gold); }
#dm-astro_madhavi:checked ~ * .c-dm-pane-astro_madhavi { visibility:visible; opacity:1; pointer-events:auto; }
#dm-astro_madhavi:checked ~ * .c-dm-pane-astro_madhavi .c-sim-m,
#dm-astro_madhavi:checked ~ * .c-dm-pane-astro_madhavi .c-sim-typing { animation-play-state:running; }
#dm-astro_madhavi:checked ~ * label[for="dm-astro_madhavi"] { background:var(--gold-bg); border-color:var(--gold); }
#dm-astro_kuber:checked ~ * .c-dm-pane-astro_kuber { visibility:visible; opacity:1; pointer-events:auto; }
#dm-astro_kuber:checked ~ * .c-dm-pane-astro_kuber .c-sim-m,
#dm-astro_kuber:checked ~ * .c-dm-pane-astro_kuber .c-sim-typing { animation-play-state:running; }
#dm-astro_kuber:checked ~ * label[for="dm-astro_kuber"] { background:var(--gold-bg); border-color:var(--gold); }
#dm-astro_nidhi:checked ~ * .c-dm-pane-astro_nidhi { visibility:visible; opacity:1; pointer-events:auto; }
#dm-astro_nidhi:checked ~ * .c-dm-pane-astro_nidhi .c-sim-m,
#dm-astro_nidhi:checked ~ * .c-dm-pane-astro_nidhi .c-sim-typing { animation-play-state:running; }
#dm-astro_nidhi:checked ~ * label[for="dm-astro_nidhi"] { background:var(--gold-bg); border-color:var(--gold); }
#dm-astro_siddhi:checked ~ * .c-dm-pane-astro_siddhi { visibility:visible; opacity:1; pointer-events:auto; }
#dm-astro_siddhi:checked ~ * .c-dm-pane-astro_siddhi .c-sim-m,
#dm-astro_siddhi:checked ~ * .c-dm-pane-astro_siddhi .c-sim-typing { animation-play-state:running; }
#dm-astro_siddhi:checked ~ * label[for="dm-astro_siddhi"] { background:var(--gold-bg); border-color:var(--gold); }
#dm-astro_dhyan:checked ~ * .c-dm-pane-astro_dhyan { visibility:visible; opacity:1; pointer-events:auto; }
#dm-astro_dhyan:checked ~ * .c-dm-pane-astro_dhyan .c-sim-m,
#dm-astro_dhyan:checked ~ * .c-dm-pane-astro_dhyan .c-sim-typing { animation-play-state:running; }
#dm-astro_dhyan:checked ~ * label[for="dm-astro_dhyan"] { background:var(--gold-bg); border-color:var(--gold); }.c-sim-m, .c-sim-typing { animation-duration:15.1s; animation-iteration-count:infinite; animation-fill-mode:both; }
.c-sim-m[style*="--i:0;"] { animation-name:c-sim-in0; }
@keyframes c-sim-in0 {
  0%,3.31% { opacity:0; max-height:0; transform:translateY(6px); }
  5.51%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:1;"] { animation-name:c-sim-in1; }
@keyframes c-sim-in1 {
  0%,9.93% { opacity:0; max-height:0; transform:translateY(6px); }
  12.13%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:2;"] { animation-name:c-sim-in2; }
@keyframes c-sim-in2 {
  0%,22.52% { opacity:0; max-height:0; transform:translateY(6px); }
  24.72%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:3;"] { animation-name:c-sim-in3; }
@keyframes c-sim-in3 {
  0%,29.14% { opacity:0; max-height:0; transform:translateY(6px); }
  31.34%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:4;"] { animation-name:c-sim-in4; }
@keyframes c-sim-in4 {
  0%,41.72% { opacity:0; max-height:0; transform:translateY(6px); }
  43.92%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:5;"] { animation-name:c-sim-in5; }
@keyframes c-sim-in5 {
  0%,48.34% { opacity:0; max-height:0; transform:translateY(6px); }
  50.54%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:6;"] { animation-name:c-sim-in6; }
@keyframes c-sim-in6 {
  0%,60.93% { opacity:0; max-height:0; transform:translateY(6px); }
  63.13%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:7;"] { animation-name:c-sim-in7; }
@keyframes c-sim-in7 {
  0%,67.55% { opacity:0; max-height:0; transform:translateY(6px); }
  69.75%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-m[style*="--i:8;"] { animation-name:c-sim-in8; }
@keyframes c-sim-in8 {
  0%,80.13% { opacity:0; max-height:0; transform:translateY(6px); }
  82.33%,92.05% { opacity:1; max-height:200px; transform:none; }
  99.5% { opacity:0; max-height:200px; }
  100% { opacity:0; max-height:0; } }
.c-sim-typing[style*="--i:2;"] { animation-name:c-sim-typ2; }
@keyframes c-sim-typ2 {
  0%,16.56% { opacity:0; max-height:0; }
  17.96%,22.52% { opacity:1; max-height:44px; }
  23.72%,100% { opacity:0; max-height:0; } }
.c-sim-typing[style*="--i:4;"] { animation-name:c-sim-typ4; }
@keyframes c-sim-typ4 {
  0%,35.76% { opacity:0; max-height:0; }
  37.16%,41.72% { opacity:1; max-height:44px; }
  42.92%,100% { opacity:0; max-height:0; } }
.c-sim-typing[style*="--i:6;"] { animation-name:c-sim-typ6; }
@keyframes c-sim-typ6 {
  0%,54.97% { opacity:0; max-height:0; }
  56.37%,60.93% { opacity:1; max-height:44px; }
  62.13%,100% { opacity:0; max-height:0; } }
.c-sim-typing[style*="--i:8;"] { animation-name:c-sim-typ8; }
@keyframes c-sim-typ8 {
  0%,74.17% { opacity:0; max-height:0; }
  75.57%,80.13% { opacity:1; max-height:44px; }
  81.33%,100% { opacity:0; max-height:0; } }
/* ── 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; }#faq-start:checked ~ * .h-fq-p-start { display:block; }
#faq-start:focus-visible ~ * label[for="faq-start"] { outline:2px solid var(--gold); outline-offset:2px; }
#faq-start:checked ~ * label[for="faq-start"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#faq-start:checked ~ * label[for="faq-start"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#faq-astro:checked ~ * .h-fq-p-astro { display:block; }
#faq-astro:focus-visible ~ * label[for="faq-astro"] { outline:2px solid var(--gold); outline-offset:2px; }
#faq-astro:checked ~ * label[for="faq-astro"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#faq-astro:checked ~ * label[for="faq-astro"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#faq-pay:checked ~ * .h-fq-p-pay { display:block; }
#faq-pay:focus-visible ~ * label[for="faq-pay"] { outline:2px solid var(--gold); outline-offset:2px; }
#faq-pay:checked ~ * label[for="faq-pay"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#faq-pay:checked ~ * label[for="faq-pay"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#faq-kundli:checked ~ * .h-fq-p-kundli { display:block; }
#faq-kundli:focus-visible ~ * label[for="faq-kundli"] { outline:2px solid var(--gold); outline-offset:2px; }
#faq-kundli:checked ~ * label[for="faq-kundli"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#faq-kundli:checked ~ * label[for="faq-kundli"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#faq-data:checked ~ * .h-fq-p-data { display:block; }
#faq-data:focus-visible ~ * label[for="faq-data"] { outline:2px solid var(--gold); outline-offset:2px; }
#faq-data:checked ~ * label[for="faq-data"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#faq-data:checked ~ * label[for="faq-data"] 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(). TILE_ON 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 { TILE_ON }

  /* 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-f-area p.h-cy-more { margin:14px 0 0; font-weight:600; }
  .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; }
  .h-fest, .h-mnotes { margin:18px 0; }
  @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, .h-f-b1 { 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); }
  .h-f-pane, .h-f-tile, .h-f-b { animation:none !important; }
  .h-f-pane:not(:first-child) { display:none; }
  .h-f-strip .h-f-tile:first-child { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); }
  .h-f-a:target ~ .h-f-strip .h-f-tile:first-child { border-color:var(--line); background:transparent;
                                                      color:var(--ink-2); }
  /* Career, Love, Health …: headings, not 10px capitals ("seem very small"). */
  .h-f-area-h .h-f-l { font-family:var(--font-sans); font-size:18px; font-weight:700; letter-spacing:0;
                       text-transform:none; color:var(--ink); }
  /* The six areas as buttons, one showing (AREA_JS); with no script, all six. */
  .h-at { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
  .h-at-b { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
            border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface);
            font:inherit; font-size:15px; font-weight:650; color:var(--ink-2); cursor:pointer; }
  .h-at-b b { font-size:13px; font-variant-numeric:tabular-nums; }
  .h-at-b:hover { border-color:var(--gold); }
  .h-at-b.on { border-color:var(--gold-solid); background:var(--gold-solid); color:var(--gold-solid-text); }
  .h-at-b.on b { color:inherit; }
  .h-at-b:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .h-f-tabbed { grid-template-columns:1fr !important; }
  .h-f-tabbed > [hidden] { display:none !important; }
  .h-nudge { margin:14px 0 4px; }
  /* "This month": the rashi's backdrop, as a card of its own. */
  .h-f-mo { margin:14px 0 0; padding:14px 18px; border:1px solid var(--line); border-radius:var(--r-card);
            background:var(--surface); font-size:15px; line-height:1.6; color:var(--ink); }
  .h-f-mo .h-f-l { display:block; margin-bottom:4px; font-family:var(--font-sans); font-size:15px;
                   font-weight:700; letter-spacing:0; text-transform:none; color:var(--gold-dk); }
  .h-f-cha { margin:10px 0 0; padding:12px 16px; border-radius:var(--r-card); background:var(--bad-bg);
             font-size:14.5px; line-height:1.55; color:var(--ink); }
  @media (max-width:520px) { .h-at-b { padding:0 13px; font-size:14px; } }
  /* Tied best (or weakest) days side by side on a phone: the columns are
     too narrow for a number each ("72727272"), so a run shows its score
     once, over its first column; the run's equal height says the rest. */
  @media (max-width:720px) {
    .c-scl-c.c-on + .c-scl-c.c-on .c-scl-v, .c-scl-c.c-lo + .c-scl-c.c-lo .c-scl-v { visibility:hidden; }
  }

.of-free-sec[hidden] { display:none; }
.of-free-sec { padding-top:18px; padding-bottom:18px; }
/* THREE PARTS: the offer, how it goes, the button. On a wide desktop they
   sit in a row (Rohit, 19 Oct 2026: "make 3 sections, put start free chat
   at end"); on a tablet the button is beside the offer and the steps run
   under both; on a phone the steps go and the button spans the card. */
.of-free { display:grid; grid-template-columns:minmax(0,1fr); overflow:hidden;
           border-radius:var(--r-card); border:1px solid var(--gold-lt);
           background:radial-gradient(130% 160% at 0% 0%, var(--gold-bg) 0%, var(--surface) 70%); }
.of-free-m { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
             gap:14px 18px; padding:22px 24px; }
/* The gift in a solid gold circle: an offer is the one thing on the page
   that should look like one. */
.of-free-ic { display:grid; place-items:center; width:60px; height:60px;
              border-radius:50%; background:var(--gold); color:var(--gold-solid-text); }
.of-free-ic svg { width:28px; height:28px; }
.of-free-t { display:flex; flex-direction:column; gap:4px; margin:0; min-width:0; }
.of-free-t b { font-family:var(--font-serif); font-size:23px; font-weight:600; line-height:1.25;
               color:var(--ink); }
.of-free-t > span { font-size:14.5px; color:var(--ink-2); line-height:1.5; text-wrap:balance; }
.of-free-b { display:flex; align-items:center; padding:0 24px 22px; }
.of-free-s { list-style:none; margin:0; padding:18px 24px; display:grid; gap:16px;
             grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--gold-lt);
             background:var(--surface); }
.of-free-s li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 10px; align-content:start; }
.of-free-s i { grid-row:1 / span 2; display:grid; place-items:center; width:26px; height:26px;
               border-radius:50%; font-style:normal; font-size:12.5px; font-weight:700;
               color:var(--gold-dk); border:1.5px solid var(--gold-lt); background:var(--surface); }
.of-free-s b { font-size:14.5px; font-weight:650; line-height:1.35; color:var(--ink); }
.of-free-s em { font-style:normal; }
.of-free-s span { font-size:13.5px; line-height:1.45; color:var(--ink-3); }
/* A TABLET: the button to the right of the offer, the steps in a row under both. */
@media (min-width:641px) and (max-width:1279px) {
  .of-free { grid-template-columns:minmax(0,1fr) auto; }
  .of-free-m { grid-column:1; grid-row:1; }
  .of-free-b { grid-column:2; grid-row:1; padding:22px 24px 22px 0; }
  .of-free-s { grid-column:1 / -1; grid-row:2; }
}
/* A WIDE DESKTOP: offer | steps | button. The offer and the steps are equal
   halves and the button has a cell of its own at the end, centred, so the card
   reads as balanced (Rohit: "so the whole card looks symmetric"). The offer's
   line is the short one here: "No card" is step 2's. The steps are a list of
   three rows, each title and its line together. */
@media (min-width:1280px) {
  .of-free { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:stretch; }
  .of-free-m, .of-free-s, .of-free-b { align-self:stretch; }
  .of-free-t > span { white-space:nowrap; }
  .of-free-nc { display:none; }
  .of-free-s { grid-template-columns:minmax(0,1fr); gap:9px; align-content:center;
               padding:18px 26px; border-top:0; border-left:1px solid var(--gold-lt);
               background:transparent; }
  .of-free-s li { grid-template-columns:auto auto minmax(0,1fr); align-items:center; gap:10px; }
  .of-free-s i { grid-row:auto; width:24px; height:24px; font-size:12px; }
  .of-free-s b, .of-free-s span { white-space:nowrap; }
  .of-free-b { justify-content:center; padding:22px 30px; border-left:1px solid var(--gold-lt); }
}
/* ON A PHONE: the gift on the left, the words beside it, the button across
   the bottom (Rohit, 19 Oct 2026). The steps are for wider screens. */
@media (max-width:640px) {
  .of-free-m { gap:14px; padding:16px 16px 14px; }
  .of-free-ic { width:52px; height:52px; }
  .of-free-ic svg { width:24px; height:24px; }
  .of-free-t b { font-size:20px; }
  .of-free-b { padding:0 16px 16px; }
  .of-free-b .c-btn { flex:1; justify-content:center; }
  .of-free-s { display:none; }
}

  /* ── 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; }
  .p-anga-n { color:var(--ink-2); }
  .p-glance { margin:16px 0 0; font-size:15px; line-height:1.6; color:var(--ink-2); }
  .p-glance b { color:var(--ink); }


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

#af-kundli:checked ~ * .a-cell:not(.b-kundli) { display:none; }
#af-love:checked ~ * .a-cell:not(.b-love) { display:none; }
#af-career:checked ~ * .a-cell:not(.b-career) { display:none; }
#af-wealth:checked ~ * .a-cell:not(.b-wealth) { display:none; }
#af-health:checked ~ * .a-cell:not(.b-health) { display:none; }
#af-spiritual:checked ~ * .a-cell:not(.b-spiritual) { display:none; }
#af-muhurat:checked ~ * .a-cell:not(.b-muhurat) { display:none; }
#af-numerology:checked ~ * .a-cell:not(.b-numerology) { display:none; }
#af-all:checked ~ * label[for="af-all"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#af-all:checked ~ * label[for="af-all"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#af-kundli:checked ~ * label[for="af-kundli"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#af-kundli:checked ~ * label[for="af-kundli"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#af-love:checked ~ * label[for="af-love"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#af-love:checked ~ * label[for="af-love"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#af-career:checked ~ * label[for="af-career"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#af-career:checked ~ * label[for="af-career"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#af-wealth:checked ~ * label[for="af-wealth"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#af-wealth:checked ~ * label[for="af-wealth"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#af-health:checked ~ * label[for="af-health"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#af-health:checked ~ * label[for="af-health"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#af-spiritual:checked ~ * label[for="af-spiritual"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#af-spiritual:checked ~ * label[for="af-spiritual"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#af-muhurat:checked ~ * label[for="af-muhurat"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#af-muhurat:checked ~ * label[for="af-muhurat"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
#af-numerology:checked ~ * label[for="af-numerology"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#af-numerology:checked ~ * label[for="af-numerology"] i { background:var(--gold-solid-text); color:var(--gold-solid); }
  /* ── the filter and the roster ─────────────────────── */
  .a-filt { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
  .a-filt-i { display:inline-flex; align-items:center; gap:8px; min-height:44px;
              padding:0 16px; cursor:pointer; border-radius:var(--r-pill);
              border:1px solid var(--line); background:var(--surface);
              font-size:14px; font-weight:650; color:var(--ink-2); }
  .a-filt-i:hover { border-color:var(--gold-lt); color:var(--gold-dk); }
  .a-filt-i i { font-style:normal; font-family:var(--font-mono); font-size:10.5px;
              min-width:19px; height:19px; display:grid; place-items:center;
              border-radius:var(--r-pill); background:var(--rail);
              color:var(--ink-3); }
  /* ── THE FILTERS ARE ONE ROW ON A PHONE, NOT FOUR ──
     Nine chips at 44px tall wrapped to four rows at 390px: 197px of controls
     between the heading and the first astrologer, on a page whose whole job
     is the roster underneath. Wrapping is right on a wide screen where they
     all fit; on a phone it is a wall.
     Same rail the FAQ tabs use — one row, scrolled, snapping to the gutter.
     scroll-padding-inline matters: with mandatory snapping the browser
     scrolls the rail by exactly padding-left on layout, so the first chip
     starts hidden. The negative margin lets the row bleed to the screen
     edges while its contents stay on the page's own 16px column.
     AFTER .a-filt, not before — a media query adds no specificity, and this
     would lose the cascade at equal weight written above it. */
  @media (max-width:640px) {
    .a-filt { 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; }
    .a-filt::-webkit-scrollbar { display:none; }
    .a-filt-i { flex:0 0 auto; scroll-snap-align:start; padding:0 13px; }
    /* 10.5px is under the phone floor, and this is the one number on the chip
       a reader is actually comparing. */
    .a-filt-i i { font-size:11px; }
  }
  .a-grid { display:grid; gap:14px; grid-template-columns:1fr; }
  @media (min-width:640px) { .a-grid { grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1040px) { .a-grid { grid-template-columns:repeat(3,1fr); } }
  .a-grid > * { min-width:0; }
  .a-cell { display:flex; }
  .a-cell > * { flex:1; }
#hrf-all:checked ~ .c-cat-chips label[for="hrf-all"], #hrf-personal:checked ~ .c-cat-chips label[for="hrf-personal"], #hrf-predictions:checked ~ .c-cat-chips label[for="hrf-predictions"], #hrf-relationships:checked ~ .c-cat-chips label[for="hrf-relationships"], #hrf-doshas_yogas:checked ~ .c-cat-chips label[for="hrf-doshas_yogas"] { border-color:var(--gold); background:var(--gold-bg); color:var(--gold-dk); }
#hrf-all:checked ~ .c-cat-chips label[for="hrf-all"] i, #hrf-personal:checked ~ .c-cat-chips label[for="hrf-personal"] i, #hrf-predictions:checked ~ .c-cat-chips label[for="hrf-predictions"] i, #hrf-relationships:checked ~ .c-cat-chips label[for="hrf-relationships"] i, #hrf-doshas_yogas:checked ~ .c-cat-chips label[for="hrf-doshas_yogas"] i { color:var(--gold-dk); }
#hrf-personal:checked ~ .c-cat-grid > :not(.c-cat-k-personal),
#hrf-predictions:checked ~ .c-cat-grid > :not(.c-cat-k-predictions),
#hrf-relationships:checked ~ .c-cat-grid > :not(.c-cat-k-relationships),
#hrf-doshas_yogas:checked ~ .c-cat-grid > :not(.c-cat-k-doshas_yogas) { display:none; }
#hrf-all:checked ~ .c-cat-chips label[for="hrf-all"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#hrf-all:checked ~ .c-cat-chips label[for="hrf-all"] i { color:var(--gold-solid-text); }
#hrf-personal:checked ~ .c-cat-chips label[for="hrf-personal"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#hrf-personal:checked ~ .c-cat-chips label[for="hrf-personal"] i { color:var(--gold-solid-text); }
#hrf-predictions:checked ~ .c-cat-chips label[for="hrf-predictions"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#hrf-predictions:checked ~ .c-cat-chips label[for="hrf-predictions"] i { color:var(--gold-solid-text); }
#hrf-relationships:checked ~ .c-cat-chips label[for="hrf-relationships"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#hrf-relationships:checked ~ .c-cat-chips label[for="hrf-relationships"] i { color:var(--gold-solid-text); }
#hrf-doshas_yogas:checked ~ .c-cat-chips label[for="hrf-doshas_yogas"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#hrf-doshas_yogas:checked ~ .c-cat-chips label[for="hrf-doshas_yogas"] i { color:var(--gold-solid-text); }
#b-dob-1990-07-01:checked ~ * label[for="b-dob-1990-07-01"],
#b-dob-1990-07-01:checked ~ .c-dp label[for="b-dob-1990-07-01"] { background:var(--gold-solid); }
#b-dob-1990-07-01:checked ~ * label[for="b-dob-1990-07-01"] b,
#b-dob-1990-07-01:checked ~ * label[for="b-dob-1990-07-01"] em,
#b-dob-1990-07-01:checked ~ .c-dp label[for="b-dob-1990-07-01"] b,
#b-dob-1990-07-01:checked ~ .c-dp label[for="b-dob-1990-07-01"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-02:checked ~ * label[for="b-dob-1990-07-02"],
#b-dob-1990-07-02:checked ~ .c-dp label[for="b-dob-1990-07-02"] { background:var(--gold-solid); }
#b-dob-1990-07-02:checked ~ * label[for="b-dob-1990-07-02"] b,
#b-dob-1990-07-02:checked ~ * label[for="b-dob-1990-07-02"] em,
#b-dob-1990-07-02:checked ~ .c-dp label[for="b-dob-1990-07-02"] b,
#b-dob-1990-07-02:checked ~ .c-dp label[for="b-dob-1990-07-02"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-03:checked ~ * label[for="b-dob-1990-07-03"],
#b-dob-1990-07-03:checked ~ .c-dp label[for="b-dob-1990-07-03"] { background:var(--gold-solid); }
#b-dob-1990-07-03:checked ~ * label[for="b-dob-1990-07-03"] b,
#b-dob-1990-07-03:checked ~ * label[for="b-dob-1990-07-03"] em,
#b-dob-1990-07-03:checked ~ .c-dp label[for="b-dob-1990-07-03"] b,
#b-dob-1990-07-03:checked ~ .c-dp label[for="b-dob-1990-07-03"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-04:checked ~ * label[for="b-dob-1990-07-04"],
#b-dob-1990-07-04:checked ~ .c-dp label[for="b-dob-1990-07-04"] { background:var(--gold-solid); }
#b-dob-1990-07-04:checked ~ * label[for="b-dob-1990-07-04"] b,
#b-dob-1990-07-04:checked ~ * label[for="b-dob-1990-07-04"] em,
#b-dob-1990-07-04:checked ~ .c-dp label[for="b-dob-1990-07-04"] b,
#b-dob-1990-07-04:checked ~ .c-dp label[for="b-dob-1990-07-04"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-05:checked ~ * label[for="b-dob-1990-07-05"],
#b-dob-1990-07-05:checked ~ .c-dp label[for="b-dob-1990-07-05"] { background:var(--gold-solid); }
#b-dob-1990-07-05:checked ~ * label[for="b-dob-1990-07-05"] b,
#b-dob-1990-07-05:checked ~ * label[for="b-dob-1990-07-05"] em,
#b-dob-1990-07-05:checked ~ .c-dp label[for="b-dob-1990-07-05"] b,
#b-dob-1990-07-05:checked ~ .c-dp label[for="b-dob-1990-07-05"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-06:checked ~ * label[for="b-dob-1990-07-06"],
#b-dob-1990-07-06:checked ~ .c-dp label[for="b-dob-1990-07-06"] { background:var(--gold-solid); }
#b-dob-1990-07-06:checked ~ * label[for="b-dob-1990-07-06"] b,
#b-dob-1990-07-06:checked ~ * label[for="b-dob-1990-07-06"] em,
#b-dob-1990-07-06:checked ~ .c-dp label[for="b-dob-1990-07-06"] b,
#b-dob-1990-07-06:checked ~ .c-dp label[for="b-dob-1990-07-06"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-07:checked ~ * label[for="b-dob-1990-07-07"],
#b-dob-1990-07-07:checked ~ .c-dp label[for="b-dob-1990-07-07"] { background:var(--gold-solid); }
#b-dob-1990-07-07:checked ~ * label[for="b-dob-1990-07-07"] b,
#b-dob-1990-07-07:checked ~ * label[for="b-dob-1990-07-07"] em,
#b-dob-1990-07-07:checked ~ .c-dp label[for="b-dob-1990-07-07"] b,
#b-dob-1990-07-07:checked ~ .c-dp label[for="b-dob-1990-07-07"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-08:checked ~ * label[for="b-dob-1990-07-08"],
#b-dob-1990-07-08:checked ~ .c-dp label[for="b-dob-1990-07-08"] { background:var(--gold-solid); }
#b-dob-1990-07-08:checked ~ * label[for="b-dob-1990-07-08"] b,
#b-dob-1990-07-08:checked ~ * label[for="b-dob-1990-07-08"] em,
#b-dob-1990-07-08:checked ~ .c-dp label[for="b-dob-1990-07-08"] b,
#b-dob-1990-07-08:checked ~ .c-dp label[for="b-dob-1990-07-08"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-09:checked ~ * label[for="b-dob-1990-07-09"],
#b-dob-1990-07-09:checked ~ .c-dp label[for="b-dob-1990-07-09"] { background:var(--gold-solid); }
#b-dob-1990-07-09:checked ~ * label[for="b-dob-1990-07-09"] b,
#b-dob-1990-07-09:checked ~ * label[for="b-dob-1990-07-09"] em,
#b-dob-1990-07-09:checked ~ .c-dp label[for="b-dob-1990-07-09"] b,
#b-dob-1990-07-09:checked ~ .c-dp label[for="b-dob-1990-07-09"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-10:checked ~ * label[for="b-dob-1990-07-10"],
#b-dob-1990-07-10:checked ~ .c-dp label[for="b-dob-1990-07-10"] { background:var(--gold-solid); }
#b-dob-1990-07-10:checked ~ * label[for="b-dob-1990-07-10"] b,
#b-dob-1990-07-10:checked ~ * label[for="b-dob-1990-07-10"] em,
#b-dob-1990-07-10:checked ~ .c-dp label[for="b-dob-1990-07-10"] b,
#b-dob-1990-07-10:checked ~ .c-dp label[for="b-dob-1990-07-10"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-11:checked ~ * label[for="b-dob-1990-07-11"],
#b-dob-1990-07-11:checked ~ .c-dp label[for="b-dob-1990-07-11"] { background:var(--gold-solid); }
#b-dob-1990-07-11:checked ~ * label[for="b-dob-1990-07-11"] b,
#b-dob-1990-07-11:checked ~ * label[for="b-dob-1990-07-11"] em,
#b-dob-1990-07-11:checked ~ .c-dp label[for="b-dob-1990-07-11"] b,
#b-dob-1990-07-11:checked ~ .c-dp label[for="b-dob-1990-07-11"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-12:checked ~ * label[for="b-dob-1990-07-12"],
#b-dob-1990-07-12:checked ~ .c-dp label[for="b-dob-1990-07-12"] { background:var(--gold-solid); }
#b-dob-1990-07-12:checked ~ * label[for="b-dob-1990-07-12"] b,
#b-dob-1990-07-12:checked ~ * label[for="b-dob-1990-07-12"] em,
#b-dob-1990-07-12:checked ~ .c-dp label[for="b-dob-1990-07-12"] b,
#b-dob-1990-07-12:checked ~ .c-dp label[for="b-dob-1990-07-12"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-13:checked ~ * label[for="b-dob-1990-07-13"],
#b-dob-1990-07-13:checked ~ .c-dp label[for="b-dob-1990-07-13"] { background:var(--gold-solid); }
#b-dob-1990-07-13:checked ~ * label[for="b-dob-1990-07-13"] b,
#b-dob-1990-07-13:checked ~ * label[for="b-dob-1990-07-13"] em,
#b-dob-1990-07-13:checked ~ .c-dp label[for="b-dob-1990-07-13"] b,
#b-dob-1990-07-13:checked ~ .c-dp label[for="b-dob-1990-07-13"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-14:checked ~ * label[for="b-dob-1990-07-14"],
#b-dob-1990-07-14:checked ~ .c-dp label[for="b-dob-1990-07-14"] { background:var(--gold-solid); }
#b-dob-1990-07-14:checked ~ * label[for="b-dob-1990-07-14"] b,
#b-dob-1990-07-14:checked ~ * label[for="b-dob-1990-07-14"] em,
#b-dob-1990-07-14:checked ~ .c-dp label[for="b-dob-1990-07-14"] b,
#b-dob-1990-07-14:checked ~ .c-dp label[for="b-dob-1990-07-14"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-15:checked ~ * label[for="b-dob-1990-07-15"],
#b-dob-1990-07-15:checked ~ .c-dp label[for="b-dob-1990-07-15"] { background:var(--gold-solid); }
#b-dob-1990-07-15:checked ~ * label[for="b-dob-1990-07-15"] b,
#b-dob-1990-07-15:checked ~ * label[for="b-dob-1990-07-15"] em,
#b-dob-1990-07-15:checked ~ .c-dp label[for="b-dob-1990-07-15"] b,
#b-dob-1990-07-15:checked ~ .c-dp label[for="b-dob-1990-07-15"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-16:checked ~ * label[for="b-dob-1990-07-16"],
#b-dob-1990-07-16:checked ~ .c-dp label[for="b-dob-1990-07-16"] { background:var(--gold-solid); }
#b-dob-1990-07-16:checked ~ * label[for="b-dob-1990-07-16"] b,
#b-dob-1990-07-16:checked ~ * label[for="b-dob-1990-07-16"] em,
#b-dob-1990-07-16:checked ~ .c-dp label[for="b-dob-1990-07-16"] b,
#b-dob-1990-07-16:checked ~ .c-dp label[for="b-dob-1990-07-16"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-17:checked ~ * label[for="b-dob-1990-07-17"],
#b-dob-1990-07-17:checked ~ .c-dp label[for="b-dob-1990-07-17"] { background:var(--gold-solid); }
#b-dob-1990-07-17:checked ~ * label[for="b-dob-1990-07-17"] b,
#b-dob-1990-07-17:checked ~ * label[for="b-dob-1990-07-17"] em,
#b-dob-1990-07-17:checked ~ .c-dp label[for="b-dob-1990-07-17"] b,
#b-dob-1990-07-17:checked ~ .c-dp label[for="b-dob-1990-07-17"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-18:checked ~ * label[for="b-dob-1990-07-18"],
#b-dob-1990-07-18:checked ~ .c-dp label[for="b-dob-1990-07-18"] { background:var(--gold-solid); }
#b-dob-1990-07-18:checked ~ * label[for="b-dob-1990-07-18"] b,
#b-dob-1990-07-18:checked ~ * label[for="b-dob-1990-07-18"] em,
#b-dob-1990-07-18:checked ~ .c-dp label[for="b-dob-1990-07-18"] b,
#b-dob-1990-07-18:checked ~ .c-dp label[for="b-dob-1990-07-18"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-19:checked ~ * label[for="b-dob-1990-07-19"],
#b-dob-1990-07-19:checked ~ .c-dp label[for="b-dob-1990-07-19"] { background:var(--gold-solid); }
#b-dob-1990-07-19:checked ~ * label[for="b-dob-1990-07-19"] b,
#b-dob-1990-07-19:checked ~ * label[for="b-dob-1990-07-19"] em,
#b-dob-1990-07-19:checked ~ .c-dp label[for="b-dob-1990-07-19"] b,
#b-dob-1990-07-19:checked ~ .c-dp label[for="b-dob-1990-07-19"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-20:checked ~ * label[for="b-dob-1990-07-20"],
#b-dob-1990-07-20:checked ~ .c-dp label[for="b-dob-1990-07-20"] { background:var(--gold-solid); }
#b-dob-1990-07-20:checked ~ * label[for="b-dob-1990-07-20"] b,
#b-dob-1990-07-20:checked ~ * label[for="b-dob-1990-07-20"] em,
#b-dob-1990-07-20:checked ~ .c-dp label[for="b-dob-1990-07-20"] b,
#b-dob-1990-07-20:checked ~ .c-dp label[for="b-dob-1990-07-20"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-21:checked ~ * label[for="b-dob-1990-07-21"],
#b-dob-1990-07-21:checked ~ .c-dp label[for="b-dob-1990-07-21"] { background:var(--gold-solid); }
#b-dob-1990-07-21:checked ~ * label[for="b-dob-1990-07-21"] b,
#b-dob-1990-07-21:checked ~ * label[for="b-dob-1990-07-21"] em,
#b-dob-1990-07-21:checked ~ .c-dp label[for="b-dob-1990-07-21"] b,
#b-dob-1990-07-21:checked ~ .c-dp label[for="b-dob-1990-07-21"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-22:checked ~ * label[for="b-dob-1990-07-22"],
#b-dob-1990-07-22:checked ~ .c-dp label[for="b-dob-1990-07-22"] { background:var(--gold-solid); }
#b-dob-1990-07-22:checked ~ * label[for="b-dob-1990-07-22"] b,
#b-dob-1990-07-22:checked ~ * label[for="b-dob-1990-07-22"] em,
#b-dob-1990-07-22:checked ~ .c-dp label[for="b-dob-1990-07-22"] b,
#b-dob-1990-07-22:checked ~ .c-dp label[for="b-dob-1990-07-22"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-23:checked ~ * label[for="b-dob-1990-07-23"],
#b-dob-1990-07-23:checked ~ .c-dp label[for="b-dob-1990-07-23"] { background:var(--gold-solid); }
#b-dob-1990-07-23:checked ~ * label[for="b-dob-1990-07-23"] b,
#b-dob-1990-07-23:checked ~ * label[for="b-dob-1990-07-23"] em,
#b-dob-1990-07-23:checked ~ .c-dp label[for="b-dob-1990-07-23"] b,
#b-dob-1990-07-23:checked ~ .c-dp label[for="b-dob-1990-07-23"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-24:checked ~ * label[for="b-dob-1990-07-24"],
#b-dob-1990-07-24:checked ~ .c-dp label[for="b-dob-1990-07-24"] { background:var(--gold-solid); }
#b-dob-1990-07-24:checked ~ * label[for="b-dob-1990-07-24"] b,
#b-dob-1990-07-24:checked ~ * label[for="b-dob-1990-07-24"] em,
#b-dob-1990-07-24:checked ~ .c-dp label[for="b-dob-1990-07-24"] b,
#b-dob-1990-07-24:checked ~ .c-dp label[for="b-dob-1990-07-24"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-25:checked ~ * label[for="b-dob-1990-07-25"],
#b-dob-1990-07-25:checked ~ .c-dp label[for="b-dob-1990-07-25"] { background:var(--gold-solid); }
#b-dob-1990-07-25:checked ~ * label[for="b-dob-1990-07-25"] b,
#b-dob-1990-07-25:checked ~ * label[for="b-dob-1990-07-25"] em,
#b-dob-1990-07-25:checked ~ .c-dp label[for="b-dob-1990-07-25"] b,
#b-dob-1990-07-25:checked ~ .c-dp label[for="b-dob-1990-07-25"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-26:checked ~ * label[for="b-dob-1990-07-26"],
#b-dob-1990-07-26:checked ~ .c-dp label[for="b-dob-1990-07-26"] { background:var(--gold-solid); }
#b-dob-1990-07-26:checked ~ * label[for="b-dob-1990-07-26"] b,
#b-dob-1990-07-26:checked ~ * label[for="b-dob-1990-07-26"] em,
#b-dob-1990-07-26:checked ~ .c-dp label[for="b-dob-1990-07-26"] b,
#b-dob-1990-07-26:checked ~ .c-dp label[for="b-dob-1990-07-26"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-27:checked ~ * label[for="b-dob-1990-07-27"],
#b-dob-1990-07-27:checked ~ .c-dp label[for="b-dob-1990-07-27"] { background:var(--gold-solid); }
#b-dob-1990-07-27:checked ~ * label[for="b-dob-1990-07-27"] b,
#b-dob-1990-07-27:checked ~ * label[for="b-dob-1990-07-27"] em,
#b-dob-1990-07-27:checked ~ .c-dp label[for="b-dob-1990-07-27"] b,
#b-dob-1990-07-27:checked ~ .c-dp label[for="b-dob-1990-07-27"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-28:checked ~ * label[for="b-dob-1990-07-28"],
#b-dob-1990-07-28:checked ~ .c-dp label[for="b-dob-1990-07-28"] { background:var(--gold-solid); }
#b-dob-1990-07-28:checked ~ * label[for="b-dob-1990-07-28"] b,
#b-dob-1990-07-28:checked ~ * label[for="b-dob-1990-07-28"] em,
#b-dob-1990-07-28:checked ~ .c-dp label[for="b-dob-1990-07-28"] b,
#b-dob-1990-07-28:checked ~ .c-dp label[for="b-dob-1990-07-28"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-29:checked ~ * label[for="b-dob-1990-07-29"],
#b-dob-1990-07-29:checked ~ .c-dp label[for="b-dob-1990-07-29"] { background:var(--gold-solid); }
#b-dob-1990-07-29:checked ~ * label[for="b-dob-1990-07-29"] b,
#b-dob-1990-07-29:checked ~ * label[for="b-dob-1990-07-29"] em,
#b-dob-1990-07-29:checked ~ .c-dp label[for="b-dob-1990-07-29"] b,
#b-dob-1990-07-29:checked ~ .c-dp label[for="b-dob-1990-07-29"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-30:checked ~ * label[for="b-dob-1990-07-30"],
#b-dob-1990-07-30:checked ~ .c-dp label[for="b-dob-1990-07-30"] { background:var(--gold-solid); }
#b-dob-1990-07-30:checked ~ * label[for="b-dob-1990-07-30"] b,
#b-dob-1990-07-30:checked ~ * label[for="b-dob-1990-07-30"] em,
#b-dob-1990-07-30:checked ~ .c-dp label[for="b-dob-1990-07-30"] b,
#b-dob-1990-07-30:checked ~ .c-dp label[for="b-dob-1990-07-30"] em { color:var(--gold-solid-text); }
#b-dob-1990-07-31:checked ~ * label[for="b-dob-1990-07-31"],
#b-dob-1990-07-31:checked ~ .c-dp label[for="b-dob-1990-07-31"] { background:var(--gold-solid); }
#b-dob-1990-07-31:checked ~ * label[for="b-dob-1990-07-31"] b,
#b-dob-1990-07-31:checked ~ * label[for="b-dob-1990-07-31"] em,
#b-dob-1990-07-31:checked ~ .c-dp label[for="b-dob-1990-07-31"] b,
#b-dob-1990-07-31:checked ~ .c-dp label[for="b-dob-1990-07-31"] em { color:var(--gold-solid-text); }#b-tob-h-1:checked ~ * label[for="b-tob-h-1"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-1:focus-visible ~ * label[for="b-tob-h-1"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-1:checked ~ * .c-tp-oh::after { content:"01"; opacity:1; }
#b-tob-h-2:checked ~ * label[for="b-tob-h-2"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-2:focus-visible ~ * label[for="b-tob-h-2"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-2:checked ~ * .c-tp-oh::after { content:"02"; opacity:1; }
#b-tob-h-3:checked ~ * label[for="b-tob-h-3"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-3:focus-visible ~ * label[for="b-tob-h-3"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-3:checked ~ * .c-tp-oh::after { content:"03"; opacity:1; }
#b-tob-h-4:checked ~ * label[for="b-tob-h-4"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-4:focus-visible ~ * label[for="b-tob-h-4"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-4:checked ~ * .c-tp-oh::after { content:"04"; opacity:1; }
#b-tob-h-5:checked ~ * label[for="b-tob-h-5"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-5:focus-visible ~ * label[for="b-tob-h-5"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-5:checked ~ * .c-tp-oh::after { content:"05"; opacity:1; }
#b-tob-h-6:checked ~ * label[for="b-tob-h-6"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-6:focus-visible ~ * label[for="b-tob-h-6"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-6:checked ~ * .c-tp-oh::after { content:"06"; opacity:1; }
#b-tob-h-7:checked ~ * label[for="b-tob-h-7"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-7:focus-visible ~ * label[for="b-tob-h-7"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-7:checked ~ * .c-tp-oh::after { content:"07"; opacity:1; }
#b-tob-h-8:checked ~ * label[for="b-tob-h-8"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-8:focus-visible ~ * label[for="b-tob-h-8"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-8:checked ~ * .c-tp-oh::after { content:"08"; opacity:1; }
#b-tob-h-9:checked ~ * label[for="b-tob-h-9"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-9:focus-visible ~ * label[for="b-tob-h-9"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-9:checked ~ * .c-tp-oh::after { content:"09"; opacity:1; }
#b-tob-h-10:checked ~ * label[for="b-tob-h-10"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-10:focus-visible ~ * label[for="b-tob-h-10"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-10:checked ~ * .c-tp-oh::after { content:"10"; opacity:1; }
#b-tob-h-11:checked ~ * label[for="b-tob-h-11"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-11:focus-visible ~ * label[for="b-tob-h-11"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-11:checked ~ * .c-tp-oh::after { content:"11"; opacity:1; }
#b-tob-h-12:checked ~ * label[for="b-tob-h-12"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-h-12:focus-visible ~ * label[for="b-tob-h-12"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-h-12:checked ~ * .c-tp-oh::after { content:"12"; opacity:1; }
#b-tob-t-0:checked ~ * label[for="b-tob-t-0"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-0:focus-visible ~ * label[for="b-tob-t-0"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-0:checked ~ * .c-tp-ot::after { content:"00"; opacity:1; }
#b-tob-t-1:checked ~ * label[for="b-tob-t-1"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-1:focus-visible ~ * label[for="b-tob-t-1"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-1:checked ~ * .c-tp-ot::after { content:"01"; opacity:1; }
#b-tob-t-2:checked ~ * label[for="b-tob-t-2"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-2:focus-visible ~ * label[for="b-tob-t-2"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-2:checked ~ * .c-tp-ot::after { content:"02"; opacity:1; }
#b-tob-t-3:checked ~ * label[for="b-tob-t-3"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-3:focus-visible ~ * label[for="b-tob-t-3"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-3:checked ~ * .c-tp-ot::after { content:"03"; opacity:1; }
#b-tob-t-4:checked ~ * label[for="b-tob-t-4"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-4:focus-visible ~ * label[for="b-tob-t-4"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-4:checked ~ * .c-tp-ot::after { content:"04"; opacity:1; }
#b-tob-t-5:checked ~ * label[for="b-tob-t-5"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-5:focus-visible ~ * label[for="b-tob-t-5"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-5:checked ~ * .c-tp-ot::after { content:"05"; opacity:1; }
#b-tob-t-6:checked ~ * label[for="b-tob-t-6"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-6:focus-visible ~ * label[for="b-tob-t-6"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-6:checked ~ * .c-tp-ot::after { content:"06"; opacity:1; }
#b-tob-t-7:checked ~ * label[for="b-tob-t-7"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-7:focus-visible ~ * label[for="b-tob-t-7"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-7:checked ~ * .c-tp-ot::after { content:"07"; opacity:1; }
#b-tob-t-8:checked ~ * label[for="b-tob-t-8"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-8:focus-visible ~ * label[for="b-tob-t-8"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-8:checked ~ * .c-tp-ot::after { content:"08"; opacity:1; }
#b-tob-t-9:checked ~ * label[for="b-tob-t-9"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-9:focus-visible ~ * label[for="b-tob-t-9"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-9:checked ~ * .c-tp-ot::after { content:"09"; opacity:1; }
#b-tob-t-10:checked ~ * label[for="b-tob-t-10"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-10:focus-visible ~ * label[for="b-tob-t-10"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-10:checked ~ * .c-tp-ot::after { content:"10"; opacity:1; }
#b-tob-t-11:checked ~ * label[for="b-tob-t-11"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-11:focus-visible ~ * label[for="b-tob-t-11"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-11:checked ~ * .c-tp-ot::after { content:"11"; opacity:1; }
#b-tob-t-12:checked ~ * label[for="b-tob-t-12"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-12:focus-visible ~ * label[for="b-tob-t-12"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-12:checked ~ * .c-tp-ot::after { content:"12"; opacity:1; }
#b-tob-t-13:checked ~ * label[for="b-tob-t-13"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-13:focus-visible ~ * label[for="b-tob-t-13"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-13:checked ~ * .c-tp-ot::after { content:"13"; opacity:1; }
#b-tob-t-14:checked ~ * label[for="b-tob-t-14"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-14:focus-visible ~ * label[for="b-tob-t-14"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-14:checked ~ * .c-tp-ot::after { content:"14"; opacity:1; }
#b-tob-t-15:checked ~ * label[for="b-tob-t-15"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-15:focus-visible ~ * label[for="b-tob-t-15"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-15:checked ~ * .c-tp-ot::after { content:"15"; opacity:1; }
#b-tob-t-16:checked ~ * label[for="b-tob-t-16"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-16:focus-visible ~ * label[for="b-tob-t-16"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-16:checked ~ * .c-tp-ot::after { content:"16"; opacity:1; }
#b-tob-t-17:checked ~ * label[for="b-tob-t-17"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-17:focus-visible ~ * label[for="b-tob-t-17"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-17:checked ~ * .c-tp-ot::after { content:"17"; opacity:1; }
#b-tob-t-18:checked ~ * label[for="b-tob-t-18"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-18:focus-visible ~ * label[for="b-tob-t-18"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-18:checked ~ * .c-tp-ot::after { content:"18"; opacity:1; }
#b-tob-t-19:checked ~ * label[for="b-tob-t-19"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-19:focus-visible ~ * label[for="b-tob-t-19"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-19:checked ~ * .c-tp-ot::after { content:"19"; opacity:1; }
#b-tob-t-20:checked ~ * label[for="b-tob-t-20"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-20:focus-visible ~ * label[for="b-tob-t-20"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-20:checked ~ * .c-tp-ot::after { content:"20"; opacity:1; }
#b-tob-t-21:checked ~ * label[for="b-tob-t-21"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-21:focus-visible ~ * label[for="b-tob-t-21"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-21:checked ~ * .c-tp-ot::after { content:"21"; opacity:1; }
#b-tob-t-22:checked ~ * label[for="b-tob-t-22"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-22:focus-visible ~ * label[for="b-tob-t-22"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-22:checked ~ * .c-tp-ot::after { content:"22"; opacity:1; }
#b-tob-t-23:checked ~ * label[for="b-tob-t-23"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-23:focus-visible ~ * label[for="b-tob-t-23"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-23:checked ~ * .c-tp-ot::after { content:"23"; opacity:1; }
#b-tob-t-24:checked ~ * label[for="b-tob-t-24"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-24:focus-visible ~ * label[for="b-tob-t-24"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-24:checked ~ * .c-tp-ot::after { content:"24"; opacity:1; }
#b-tob-t-25:checked ~ * label[for="b-tob-t-25"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-25:focus-visible ~ * label[for="b-tob-t-25"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-25:checked ~ * .c-tp-ot::after { content:"25"; opacity:1; }
#b-tob-t-26:checked ~ * label[for="b-tob-t-26"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-26:focus-visible ~ * label[for="b-tob-t-26"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-26:checked ~ * .c-tp-ot::after { content:"26"; opacity:1; }
#b-tob-t-27:checked ~ * label[for="b-tob-t-27"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-27:focus-visible ~ * label[for="b-tob-t-27"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-27:checked ~ * .c-tp-ot::after { content:"27"; opacity:1; }
#b-tob-t-28:checked ~ * label[for="b-tob-t-28"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-28:focus-visible ~ * label[for="b-tob-t-28"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-28:checked ~ * .c-tp-ot::after { content:"28"; opacity:1; }
#b-tob-t-29:checked ~ * label[for="b-tob-t-29"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-29:focus-visible ~ * label[for="b-tob-t-29"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-29:checked ~ * .c-tp-ot::after { content:"29"; opacity:1; }
#b-tob-t-30:checked ~ * label[for="b-tob-t-30"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-30:focus-visible ~ * label[for="b-tob-t-30"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-30:checked ~ * .c-tp-ot::after { content:"30"; opacity:1; }
#b-tob-t-31:checked ~ * label[for="b-tob-t-31"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-31:focus-visible ~ * label[for="b-tob-t-31"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-31:checked ~ * .c-tp-ot::after { content:"31"; opacity:1; }
#b-tob-t-32:checked ~ * label[for="b-tob-t-32"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-32:focus-visible ~ * label[for="b-tob-t-32"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-32:checked ~ * .c-tp-ot::after { content:"32"; opacity:1; }
#b-tob-t-33:checked ~ * label[for="b-tob-t-33"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-33:focus-visible ~ * label[for="b-tob-t-33"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-33:checked ~ * .c-tp-ot::after { content:"33"; opacity:1; }
#b-tob-t-34:checked ~ * label[for="b-tob-t-34"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-34:focus-visible ~ * label[for="b-tob-t-34"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-34:checked ~ * .c-tp-ot::after { content:"34"; opacity:1; }
#b-tob-t-35:checked ~ * label[for="b-tob-t-35"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-35:focus-visible ~ * label[for="b-tob-t-35"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-35:checked ~ * .c-tp-ot::after { content:"35"; opacity:1; }
#b-tob-t-36:checked ~ * label[for="b-tob-t-36"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-36:focus-visible ~ * label[for="b-tob-t-36"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-36:checked ~ * .c-tp-ot::after { content:"36"; opacity:1; }
#b-tob-t-37:checked ~ * label[for="b-tob-t-37"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-37:focus-visible ~ * label[for="b-tob-t-37"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-37:checked ~ * .c-tp-ot::after { content:"37"; opacity:1; }
#b-tob-t-38:checked ~ * label[for="b-tob-t-38"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-38:focus-visible ~ * label[for="b-tob-t-38"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-38:checked ~ * .c-tp-ot::after { content:"38"; opacity:1; }
#b-tob-t-39:checked ~ * label[for="b-tob-t-39"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-39:focus-visible ~ * label[for="b-tob-t-39"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-39:checked ~ * .c-tp-ot::after { content:"39"; opacity:1; }
#b-tob-t-40:checked ~ * label[for="b-tob-t-40"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-40:focus-visible ~ * label[for="b-tob-t-40"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-40:checked ~ * .c-tp-ot::after { content:"40"; opacity:1; }
#b-tob-t-41:checked ~ * label[for="b-tob-t-41"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-41:focus-visible ~ * label[for="b-tob-t-41"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-41:checked ~ * .c-tp-ot::after { content:"41"; opacity:1; }
#b-tob-t-42:checked ~ * label[for="b-tob-t-42"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-42:focus-visible ~ * label[for="b-tob-t-42"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-42:checked ~ * .c-tp-ot::after { content:"42"; opacity:1; }
#b-tob-t-43:checked ~ * label[for="b-tob-t-43"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-43:focus-visible ~ * label[for="b-tob-t-43"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-43:checked ~ * .c-tp-ot::after { content:"43"; opacity:1; }
#b-tob-t-44:checked ~ * label[for="b-tob-t-44"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-44:focus-visible ~ * label[for="b-tob-t-44"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-44:checked ~ * .c-tp-ot::after { content:"44"; opacity:1; }
#b-tob-t-45:checked ~ * label[for="b-tob-t-45"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-45:focus-visible ~ * label[for="b-tob-t-45"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-45:checked ~ * .c-tp-ot::after { content:"45"; opacity:1; }
#b-tob-t-46:checked ~ * label[for="b-tob-t-46"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-46:focus-visible ~ * label[for="b-tob-t-46"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-46:checked ~ * .c-tp-ot::after { content:"46"; opacity:1; }
#b-tob-t-47:checked ~ * label[for="b-tob-t-47"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-47:focus-visible ~ * label[for="b-tob-t-47"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-47:checked ~ * .c-tp-ot::after { content:"47"; opacity:1; }
#b-tob-t-48:checked ~ * label[for="b-tob-t-48"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-48:focus-visible ~ * label[for="b-tob-t-48"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-48:checked ~ * .c-tp-ot::after { content:"48"; opacity:1; }
#b-tob-t-49:checked ~ * label[for="b-tob-t-49"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-49:focus-visible ~ * label[for="b-tob-t-49"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-49:checked ~ * .c-tp-ot::after { content:"49"; opacity:1; }
#b-tob-t-50:checked ~ * label[for="b-tob-t-50"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-50:focus-visible ~ * label[for="b-tob-t-50"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-50:checked ~ * .c-tp-ot::after { content:"50"; opacity:1; }
#b-tob-t-51:checked ~ * label[for="b-tob-t-51"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-51:focus-visible ~ * label[for="b-tob-t-51"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-51:checked ~ * .c-tp-ot::after { content:"51"; opacity:1; }
#b-tob-t-52:checked ~ * label[for="b-tob-t-52"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-52:focus-visible ~ * label[for="b-tob-t-52"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-52:checked ~ * .c-tp-ot::after { content:"52"; opacity:1; }
#b-tob-t-53:checked ~ * label[for="b-tob-t-53"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-53:focus-visible ~ * label[for="b-tob-t-53"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-53:checked ~ * .c-tp-ot::after { content:"53"; opacity:1; }
#b-tob-t-54:checked ~ * label[for="b-tob-t-54"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-54:focus-visible ~ * label[for="b-tob-t-54"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-54:checked ~ * .c-tp-ot::after { content:"54"; opacity:1; }
#b-tob-t-55:checked ~ * label[for="b-tob-t-55"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-55:focus-visible ~ * label[for="b-tob-t-55"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-55:checked ~ * .c-tp-ot::after { content:"55"; opacity:1; }
#b-tob-t-56:checked ~ * label[for="b-tob-t-56"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-56:focus-visible ~ * label[for="b-tob-t-56"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-56:checked ~ * .c-tp-ot::after { content:"56"; opacity:1; }
#b-tob-t-57:checked ~ * label[for="b-tob-t-57"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-57:focus-visible ~ * label[for="b-tob-t-57"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-57:checked ~ * .c-tp-ot::after { content:"57"; opacity:1; }
#b-tob-t-58:checked ~ * label[for="b-tob-t-58"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-58:focus-visible ~ * label[for="b-tob-t-58"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-58:checked ~ * .c-tp-ot::after { content:"58"; opacity:1; }
#b-tob-t-59:checked ~ * label[for="b-tob-t-59"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-t-59:focus-visible ~ * label[for="b-tob-t-59"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-t-59:checked ~ * .c-tp-ot::after { content:"59"; opacity:1; }
#b-tob-t-0:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; }
#b-tob-t-1:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; }
#b-tob-t-2:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; }
#b-tob-t-3:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; }
#b-tob-t-4:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; }
#b-tob-t-5:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; }
#b-tob-t-6:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; }
#b-tob-t-7:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; }
#b-tob-t-8:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; }
#b-tob-t-9:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; }
#b-tob-t-10:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; }
#b-tob-t-11:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; }
#b-tob-t-12:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; }
#b-tob-t-13:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; }
#b-tob-t-14:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; }
#b-tob-t-15:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; }
#b-tob-t-16:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; }
#b-tob-t-17:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; }
#b-tob-t-18:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; }
#b-tob-t-19:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; }
#b-tob-t-20:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; }
#b-tob-t-21:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; }
#b-tob-t-22:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; }
#b-tob-t-23:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; }
#b-tob-t-24:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; }
#b-tob-t-25:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; }
#b-tob-t-26:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; }
#b-tob-t-27:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; }
#b-tob-t-28:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; }
#b-tob-t-29:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; }
#b-tob-t-30:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; }
#b-tob-t-31:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; }
#b-tob-t-32:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; }
#b-tob-t-33:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; }
#b-tob-t-34:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; }
#b-tob-t-35:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; }
#b-tob-t-36:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; }
#b-tob-t-37:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; }
#b-tob-t-38:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; }
#b-tob-t-39:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; }
#b-tob-t-40:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; }
#b-tob-t-41:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; }
#b-tob-t-42:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; }
#b-tob-t-43:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; }
#b-tob-t-44:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; }
#b-tob-t-45:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; }
#b-tob-t-46:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; }
#b-tob-t-47:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; }
#b-tob-t-48:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; }
#b-tob-t-49:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; }
#b-tob-t-50:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; }
#b-tob-t-51:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; }
#b-tob-t-52:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; }
#b-tob-t-53:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; }
#b-tob-t-54:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; }
#b-tob-t-55:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; }
#b-tob-t-56:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; }
#b-tob-t-57:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; }
#b-tob-t-58:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; }
#b-tob-t-59:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; }
#b-tob-t-1:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-2:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-3:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-4:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-6:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-7:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-8:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-9:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-11:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-12:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-13:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-14:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-16:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-17:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-18:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-19:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-21:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-22:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-23:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-24:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-26:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-27:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-28:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-29:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-31:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-32:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-33:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-34:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-36:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-37:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-38:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-39:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-41:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-42:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-43:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-44:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-46:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-47:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-48:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-49:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-51:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-52:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-53:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-54:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-56:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-57:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-58:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-t-59:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); }
#b-tob-m-am:checked ~ * label[for="b-tob-m-am"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-m-am:focus-visible ~ * label[for="b-tob-m-am"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-m-am:checked ~ * .c-tp-om::after { content:"AM"; opacity:1; }
#b-tob-m-pm:checked ~ * label[for="b-tob-m-pm"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); }
#b-tob-m-pm:focus-visible ~ * label[for="b-tob-m-pm"] { outline:2px solid var(--gold); outline-offset:2px; }
#b-tob-m-pm:checked ~ * .c-tp-om::after { content:"PM"; opacity:1; }
  /* The clock's face is spans the component's :checked rules write into, so
     it cannot simply be replaced with a word — it is covered instead, and the
     hint drawn in its place. */
  .b-clock .c-pf-t[data-empty] .c-pf-face { display:none; }
  .b-clock .c-pf-t[data-empty]::before { content:'Choose a time'; flex:1;
           min-width:0; font-size:var(--text-md); color:var(--ph); }

  /* ── the clock in two turns ──
     One dial carrying twelve hours on the outside and twelve five-minute
     marks inside it is two questions asked at once, and the inner ring is
     the smaller target of the two. So it asks one at a time: hours, and the
     moment one is chosen the same dial turns over to minutes. The readout
     above is the way back — tap the hour to change the hour, the minutes to
     return to them, which is the pattern every phone clock uses.

     Nothing is removed, only hidden: all sixty minute radios and all twelve
     hour radios are still in the group, so a keyboard arrows through the
     whole range whichever face is showing. */
  .b-clock[data-step="hour"] .c-ck-m,
  .b-clock[data-step="hour"] .c-ck-fr { display:none; }
  .b-clock[data-step="min"] .c-ck-h { display:none; }
  /* THE MINUTES MOVE OUT TO THE RING THE HOURS LEFT. They are drawn at
     radius 88 because they used to share the face with the hours at 134 —
     one face at a time, that leaves the numbers huddled in the middle of a
     320px circle with a wide dead band round them. `--r` is set inline per
     label, so this has to shout; the component's own responsive rules
     override it the same way. */
  /* A SMALLER FACE. 320px was sized for two rings — hours outside, minutes
     inside. Showing one at a time leaves a lot of circle around a dozen
     numbers, so the whole dial comes in: the ring keeps the same margin from
     the edge it always had (chip half-width plus four), and the marks stay
     55px apart, which is well clear of a fingertip. `--r` is inline per
     label and the component's own small-screen rules shout, so these do too. */
  .b-clock .c-ck-face { width:264px; height:264px; }
  .b-clock .c-ck-h { --r:106px !important; }
  .b-clock[data-step="min"] .c-ck-m { --r:106px !important; }
  .b-clock .c-ck-face { --hand-r:106px; }
  /* A HAND, because the marks are every fifth minute and the answer is any
     of sixty. Pick 13 and the nearest label lights up — 10 — which says the
     wrong number unless something points at where 13 actually is. */
  .b-clock .c-ck-face::before { content:''; position:absolute; left:50%;
           top:50%; width:2px; margin-left:-1px;
           background:var(--gold-solid); border-radius:2px; opacity:.85;
           transform-origin:50% 0;
           transform:rotate(calc(var(--hand,0deg) + 180deg));
           height:var(--hand-r,106px);
           pointer-events:none; }
  .b-clock:not([data-hand]) .c-ck-face::before { display:none; }

  .b-clock .c-ck-face { transition:transform .2s ease, opacity .2s ease; }
  .b-clock[data-turn] .c-ck-face { transform:translateX(-18px); opacity:0; }
  @media (prefers-reduced-motion:reduce) {
    .b-clock .c-ck-face { transition:none; }
    .b-clock[data-turn] .c-ck-face { transform:none; opacity:1; }
  }
  /* The readout is the tab bar, so it has to look like one. */
  .b-clock .c-tp-out .c-tp-oh, .b-clock .c-tp-out .c-tp-ot { cursor:pointer;
           border-radius:8px; padding:0 4px; }
  .b-clock .c-tp-out .c-tp-oh:focus-visible,
  .b-clock .c-tp-out .c-tp-ot:focus-visible { outline:2px solid var(--gold);
           outline-offset:2px; }
  .b-clock[data-step="hour"] .c-tp-out .c-tp-ot,
  .b-clock[data-step="min"] .c-tp-out .c-tp-oh { opacity:.45; }

  /* ── the form: date, time, place, name ── */
  .kd-f { display:grid; gap:0 14px; grid-template-columns:1fr; }
  @media (min-width:520px) { .kd-f { grid-template-columns:1fr 1fr; } }
  @media (min-width:1000px) {
    .kd-f { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr); }
  }
  .kd-f > * { min-width:0; }
  /* The form's status line. By id for the box, by j- class for the two
     states — .c-help is the shell's and restyling it from a page is what
     checks/clash.py exists to catch. */
  #j-msg { margin-top:10px; }
  #j-msg:empty { display:none; }
  .j-busy { color:var(--gold-dk); font-weight:600; }
  .j-err { color:var(--bad); }

  /* 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; }
  /* HEADINGS TOO. The display headings are set at ~1.1 for Latin, and in
     Devanagari that let one line's lower matra meet the next line's upper
     one: the ू of लो शू ग्रिड ran into the ी of "आपकी जन्म तिथि से". */
  :root[lang^="hi"] :is(h1, h2, h3) { line-height:1.32; }
  /* NO TRACKING ANYWHERE ON A HINDI PAGE. Eyebrows, field labels, the
     "example" tag and section heads are letter-spaced for Latin capitals;
     in Devanagari the spacing splits a word at its conjuncts ("मु फ़्त").
     One rule, and it wins, rather than a list that misses the next label. */
  :root[lang^="hi"] body * { letter-spacing:0 !important; }
  :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); }
  /* AND A DEVANAGARI FACE IN THE SERIF. The serif stack names Latin faces
     only, so a Hindi heading fell through to whatever the system had: on a
     Mac that is Devanagari MT, which sets पें apart from the next letter
     ("पें टाकल्स", /hi/tarot/ card names). The Latin in a heading keeps the
     serif; the Devanagari gets the face the body text already uses. */
  :root[lang^="hi"] { --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,
    "Kohinoor Devanagari","Nirmala UI","Noto Serif Devanagari","Noto Sans Devanagari",serif; }
  /* THE SHARED PARTS THAT CARRY HINDI WITHOUT t(): the header and drawer
     (common.chrome writes them in Hindi), the pickers, the report cards,
     the astrologer rate, the notes and the footer. The .l-hi rule above
     never reached them, so a /hi/ page had 9.5-13.5px Devanagari and tracked
     capitals in its menu (review, 28 Sep 2026: measured against the English
     twin, class by class). Each is its English size +2, never past 15. */
  :root[lang^="hi"] .c-nav-i, :root[lang^="hi"] .c-nav-px b,
  :root[lang^="hi"] .c-dd-i, :root[lang^="hi"] .c-pf-done, :root[lang^="hi"] .c-unknown,
  :root[lang^="hi"] .c-btn .c-as-rate, :root[lang^="hi"] .rv-btn,
  :root[lang^="hi"] .c-nav-mi, :root[lang^="hi"] .c-nav-mm,
  :root[lang^="hi"] .rv-c-d { font-size:15px; }
  :root[lang^="hi"] .c-nav-px i, :root[lang^="hi"] .c-note,
  :root[lang^="hi"] .c-as-rate { font-size:14.5px; }
  :root[lang^="hi"] .rv-c-m, :root[lang^="hi"] .p-hb-k,
  :root[lang^="hi"] .p-hb-k > * { font-size:14px; }
  :root[lang^="hi"] .c-drawer-h > *, :root[lang^="hi"] .c-drawer-h, :root[lang^="hi"] .c-dp-wd,
  :root[lang^="hi"] .c-nav-mh, :root[lang^="hi"] .c-field label {
    letter-spacing:0; text-transform:none; font-family:var(--font-sans); }
  :root[lang^="hi"] .c-drawer-h, :root[lang^="hi"] .c-drawer-h > * { font-size:13px; }
  :root[lang^="hi"] .c-dp-wd { font-size:11px; }
  :root[lang^="hi"] .c-nav-mh { font-size:11.5px; }