/* JeevanDrishti — application styles.
   Rewritten 2026-09-22 for palette v2. Every colour comes from tokens.css;
   there are no hex values in this file. Order: reset, primitives, chrome,
   landing sections, product pages. */

/* ============================================================ 1 · reset === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--jd-bg);
  color: var(--jd-text);
  font-family: var(--jd-font-body);
  font-size: var(--jd-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--jd-font-head);
  color: var(--jd-heading);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.005em;
}
h1 { font-size: var(--jd-fs-hero); }
h2 { font-size: var(--jd-fs-h2); }
h3 { font-size: var(--jd-fs-h3); }
p { margin: 0 0 1em; }
a { color: var(--jd-brass-text); }
a:hover { color: var(--jd-text); }
:focus-visible {
  outline: 3px solid var(--jd-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
table { border-collapse: collapse; width: 100%; }

/* ====================================================== 2 · primitives === */
.jd-wrap {
  width: 100%; max-width: var(--jd-max);
  margin-inline: auto; padding-inline: var(--jd-gutter);
}
.jd-narrow { max-width: 680px; margin-inline: auto; }
.jd-narrow-wide { max-width: 900px; margin-inline: auto; }
.jd-section { padding-block: clamp(48px, 6vw, 88px); }
.jd-section-alt { background: var(--jd-surface-alt); }
.jd-sectionhead { max-width: 620px; margin-bottom: 32px; }
.jd-sectionhead.is-centred { margin-inline: auto; text-align: center; }
.jd-sectionhead p { color: var(--jd-text-muted); margin-bottom: 0; }
.jd-lede { font-size: 1.12rem; line-height: 1.6; color: var(--jd-text-muted); }
.jd-muted { color: var(--jd-text-muted); }
.jd-small { font-size: var(--jd-fs-small); }
.jd-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.jd-eyebrow {
  font-size: var(--jd-fs-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--jd-brass-text); margin: 0 0 12px;
}
/* minmax(0,…) on the track AND min-width:0 on the item: a grid item defaults to
   min-width:auto, so a wide table inside one pushes the whole page sideways. */
.jd-grid2 { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jd-grid2 > * { min-width: 0; }
.jd-cards > *, .jd-pillars > *, .jd-steps > *, .jd-langpair > * { min-width: 0; }
.jd-cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.jd-rule { border: 0; border-top: 1px solid var(--jd-border); margin: 28px 0; }

/* Hairline rule with a brass diamond — used between major sections. */
.jd-divider { display: flex; align-items: center; gap: 12px; color: var(--jd-border-strong); }
.jd-divider::before, .jd-divider::after {
  content: ''; flex: 1; height: 1px; background: currentColor;
}
.jd-divider i {
  width: 6px; height: 6px; background: var(--jd-brass);
  transform: rotate(45deg); display: block;
}

/* -- buttons -- */
.jd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; line-height: 1.2;
  padding: 13px 24px; border-radius: var(--jd-radius-pill);
  background: var(--jd-brass-text); color: var(--jd-surface);
  border: 1px solid var(--jd-brass-text); cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s, transform .15s;
}
.jd-btn:hover { background: var(--jd-text); border-color: var(--jd-text); color: var(--jd-surface); }
.jd-btn:active { transform: translateY(1px); }
.jd-btn-sm { padding: 8px 16px; font-size: var(--jd-fs-small); }
.jd-btn-lg { padding: 16px 30px; font-size: 1.06rem; }
.jd-btn-ghost {
  background: transparent; color: var(--jd-text); border-color: var(--jd-border-strong);
}
.jd-btn-ghost:hover { background: var(--jd-surface-alt); color: var(--jd-text); border-color: var(--jd-text); }
.jd-btn-block { width: 100%; }
.jd-linkbtn {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--jd-brass-text); text-decoration: underline; cursor: pointer;
}
.jd-cta { border-color: var(--jd-brass-text); }

/* -- pills, tags, swatches -- */
.jd-pill {
  display: inline-block; padding: 3px 11px; border-radius: var(--jd-radius-pill);
  font-size: var(--jd-fs-micro); font-weight: 600; white-space: nowrap;
}
.jd-pill-favourable { background: var(--jd-success-soft); color: var(--jd-success-text); }
.jd-pill-mixed      { background: var(--jd-mixed-soft);   color: var(--jd-mixed-text); }
.jd-pill-transition { background: var(--jd-neutral-soft); color: var(--jd-neutral-text); }
.jd-pill-caution    { background: var(--jd-caution-soft); color: var(--jd-caution-text); }
.jd-pill-now { background: var(--jd-brass); color: var(--jd-ink); }
.jd-tag {
  display: inline-block; padding: 2px 9px; border-radius: var(--jd-radius-pill);
  background: var(--jd-neutral-soft); color: var(--jd-neutral-text);
  font-size: var(--jd-fs-micro); font-weight: 600;
}
.jd-tag-xs { font-size: .68rem; padding: 1px 7px; margin-inline-start: 6px; vertical-align: 2px; }
.jd-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  margin-inline-end: 7px; vertical-align: -1px;
}
.jd-st-favourable { background: var(--jd-success); }
.jd-st-mixed      { background: var(--jd-mixed); }
.jd-st-transition { background: var(--jd-neutral); }
.jd-st-caution    { background: var(--jd-caution); }
.jd-st-border-favourable { border-inline-start: 4px solid var(--jd-success); }
.jd-st-border-mixed      { border-inline-start: 4px solid var(--jd-mixed); }
.jd-st-border-transition { border-inline-start: 4px solid var(--jd-neutral); }
.jd-st-border-caution    { border-inline-start: 4px solid var(--jd-caution); }

/* -- surfaces -- */
.jd-panel {
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); padding: 24px; box-shadow: var(--jd-shadow-sm);
}
.jd-card {
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); padding: 22px; box-shadow: var(--jd-shadow-sm);
}
.jd-card h3 { margin-bottom: .35em; }
.jd-card p:last-child { margin-bottom: 0; }
.jd-card-link { text-decoration: none; color: inherit; display: block; transition: box-shadow .15s, transform .15s; }
.jd-card-link:hover { box-shadow: var(--jd-shadow); transform: translateY(-2px); color: inherit; }

/* -- messages -- */
.jd-error, .jd-warn, .jd-flash, .jd-ok {
  border-radius: var(--jd-radius-sm); padding: 11px 15px;
  font-size: var(--jd-fs-small); margin: 0 0 14px;
}
.jd-error { background: var(--jd-caution-soft); color: var(--jd-caution-text); }
.jd-warn  { background: var(--jd-mixed-soft);   color: var(--jd-mixed-text); }
.jd-flash { background: var(--jd-success-soft); color: var(--jd-success-text); margin-block: 16px; }
.jd-ok { background: var(--jd-success-soft); color: var(--jd-success-text); }
.jd-hint { font-size: var(--jd-fs-small); color: var(--jd-text-muted); margin: 6px 0 0; }
.jd-hint-tight { margin: 4px 0 0; line-height: 1.45; }
.jd-disclaimer { font-size: var(--jd-fs-small); color: var(--jd-text-muted); }

/* -- forms -- */
.jd-field { margin-bottom: 15px; }
.jd-field label, .jd-fieldlabel {
  display: block; font-size: var(--jd-fs-small); font-weight: 600; margin-bottom: 5px;
}
.jd-field input, .jd-field select, .jd-field textarea {
  width: 100%; font: inherit; color: var(--jd-text);
  padding: 11px 13px; border: 1px solid var(--jd-border-strong);
  border-radius: var(--jd-radius-sm); background: var(--jd-surface);
}
.jd-field input:focus, .jd-field select:focus {
  border-color: var(--jd-focus); outline: 2px solid var(--jd-focus); outline-offset: 0;
}
.jd-field input[disabled] { background: var(--jd-surface-alt); color: var(--jd-text-muted); }
/* An icon sitting inside the control. The input keeps its own padding rule and
   simply gains room on the leading edge; the icon never takes a click, so the
   whole field still focuses the input. */
.jd-inputicon { position: relative; display: block; }
.jd-inputicon > svg {
  position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
  color: var(--jd-text-muted); pointer-events: none; z-index: 1;
}
.jd-inputicon > input, .jd-inputicon > select { padding-inline-start: 37px; }
.jd-inputicon.is-tight > svg { inset-inline-start: 8px; }
.jd-inputicon.is-tight > input, .jd-inputicon.is-tight > select { padding-inline-start: 26px; }

.jd-row { display: grid; gap: 15px; grid-template-columns: 1fr 1fr; }
.jd-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.jd-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }

/* place autocomplete */
.jd-autocomplete {
  list-style: none; margin: 4px 0 0; padding: 4px;
  border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm);
  background: var(--jd-surface); box-shadow: var(--jd-shadow);
  max-height: 210px; overflow-y: auto; position: relative; z-index: 5;
}
.jd-autocomplete li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: var(--jd-fs-small); }
.jd-autocomplete li:hover, .jd-autocomplete li:focus { background: var(--jd-surface-alt); outline: none; }

/* ========================================================== 3 · chrome === */
.jd-header {
  background: var(--jd-surface);
  border-bottom: 1px solid var(--jd-border);
  position: sticky; top: 0; z-index: 50;
}
.jd-headbar { display: flex; align-items: center; gap: 22px; min-height: 68px; }
.jd-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
/* A box the logo fits INSIDE at its own proportions, rather than a box it is
   stretched or letterboxed into. Both dimensions are maxima with width and
   height left auto, so the browser scales the image to touch whichever edge it
   reaches first and the shape is never altered.
   The first attempt set a fixed height with `max-width` and `object-fit:
   contain`, which quietly recreated the original bug for anything very wide: a
   5.3:1 logo hit the width cap and was then letterboxed inside the fixed
   height, so it drew SHORTER than the height it had been given. The max-width
   is still there — it is what stops a long wordmark shoving the navigation off
   the bar — but now it shortens the logo proportionally instead of boxing it. */
/* The width cap is viewport-relative as well as absolute, and the logo is
   allowed to shrink, because a fixed 220px cap fits at 1440 and runs the page
   off the side at 1024 — the header is not a fixed amount of space. min-width:0
   is what lets a flex item shrink below its content at all. */
.jd-brand { min-width: 0; }
/* The logo never shrinks — its width cap is the only thing that sets its size.
   Letting it shrink instead was tried and collapsed a square mark to 0x0 at
   320px, because a flex item with min-width:0 will give up everything it has
   before its neighbour gives up anything. The NAME is the elastic part: it has
   somewhere to go, an ellipsis, and a logo has nowhere. */
.jd-brand-mark { max-height: calc(46px * var(--jd-logo-scale, 1)); max-width: min(240px, 20vw);
                 width: auto; height: auto; flex: none; }
.jd-brand-text { min-width: 0; }
.jd-brand-name, .jd-brand-tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The tagline goes before it gets cut. Between 961 and 1010 the navigation is
   still on one line and the brand block is at its narrowest, so the ellipsis
   above turned "Your Life. Your Journey. Our Insight." into "Your Life. Your
   Jour…" — a strapline with its end sliced off reads as a fault, where no
   strapline at all reads as a choice. It is already hidden below 960 for the
   same reason; this just starts a little sooner. */
@media (max-width: 1010px) {
  .jd-brand-tag { display: none; }
}
/* Below 420px the name is allowed to break between its two words rather than
   be cut short. "JeevanDrishti" is one word to a browser, so there is a <wbr>
   between them in the markup to give it somewhere to break; above this width
   there is room for one line and it never uses it. The alternative was
   shrinking the name to about 12px to make it fit at 320, which is legible in
   the sense that a magnifying glass is a solution. */
@media (max-width: 420px) {
  .jd-brand-name { white-space: normal; line-height: 1.04; }
}
/* A wordmark has the name drawn into it, so printing "JeevanDrishti" beside it
   says the name twice and leaves neither with enough room — at 1024px the
   printed name was squeezed down to "Jee…". Hiding it only on phones was the
   first attempt and merely moved the squeeze to the desktop. One or the other,
   at every width. A square symbol contains no name, so it keeps the words and
   gives way itself. */
.jd-wordmark .jd-brand-text { display: none; }
.jd-brand-foot .jd-brand-mark { max-height: calc(44px * var(--jd-logo-scale, 1)); max-width: min(230px, 30vw); }
.jd-side-brand .jd-brand-mark { max-height: calc(34px * var(--jd-logo-scale, 1)); max-width: 150px; }
.jd-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.jd-brand-name {
  font-family: var(--jd-font-head); font-weight: 700; font-size: 1.24rem;
  color: var(--jd-heading); letter-spacing: -.01em;
}
.jd-brand-name span { color: var(--jd-brass-text); }
/* Neither of these may ever break across lines: the tagline is one phrase
   and a two-line button looks like a mistake. They are hidden once the bar
   collapses, so nowrap here only affects widths where they are shown. */
.jd-brand-tag { font-size: .67rem; color: var(--jd-text-muted); letter-spacing: .02em;
  white-space: nowrap; }
/* Measured: with nine items the bar needed 1144px inside a 1140px content
   box — it overflowed at EVERY viewport width, because the container is
   capped at --jd-max and the viewport never enters into it. A 16px gap
   buys back 32px, which is the difference between fitting and not. */
.jd-mainnav { display: flex; align-items: center; gap: 16px; margin-inline-start: auto; }
.jd-mainnav a {
  text-decoration: none; color: var(--jd-text); font-size: .935rem; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent;
  /* "Life Drishti" and "Jeevan Insights" were breaking across two lines inside
     the bar rather than the bar collapsing to the menu button. A nav item is
     never a paragraph. */
  white-space: nowrap;
}
.jd-mainnav a:hover { color: var(--jd-brass-text); border-bottom-color: var(--jd-brass); }

/* ---- the Free Services menu ---------------------------------------------
   A <details>, so it opens with the script blocked and on a touch screen,
   where a :hover menu never opens at all. The summary carries the same type
   and underline as a nav link so the row still reads as one set of items. */
.jd-navdrop { position: relative; }
.jd-navdrop > summary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 0; border-bottom: 2px solid transparent;
  font-size: .935rem; font-weight: 500; color: var(--jd-text);
  white-space: nowrap; cursor: pointer; list-style: none;
}
/* Both are needed: one for WebKit, one for everyone else. Without them the
   browser draws its own disclosure triangle beside the chevron. */
.jd-navdrop > summary::-webkit-details-marker { display: none; }
.jd-navdrop > summary::marker { content: ""; }
.jd-navdrop > summary:hover,
.jd-navdrop[open] > summary { color: var(--jd-brass-text); border-bottom-color: var(--jd-brass); }
/* The angle rests pointing down — the mark that says "there is a menu under
   this" — and flips to point up while the menu is open, which is the only
   thing on the bar that says it is open. It used to rest pointing RIGHT and
   rotate to down, which reads as "go to another page" and gives a reader no
   reason to expect a panel. Honoured only where motion is welcome; the
   rotation itself still happens, because it carries meaning. */
.jd-navdrop > summary .jd-i { transition: transform .15s; }
.jd-navdrop[open] > summary .jd-i { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .jd-navdrop > summary .jd-i { transition: none; }
}

.jd-navdrop-panel {
  position: absolute; top: calc(100% + 10px); inset-inline-start: -14px;
  z-index: 60; min-width: 214px;
  display: flex; flex-direction: column;
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius-sm); box-shadow: var(--jd-shadow);
  padding: 7px;
}
.jd-navdrop-panel a {
  padding: 8px 11px; border-bottom: 0; border-radius: var(--jd-radius-sm);
  font-size: .9rem;
}
.jd-navdrop-panel a:hover {
  background: var(--jd-surface-alt); color: var(--jd-brass-text); border-bottom-color: transparent;
}
.jd-navdrop-all {
  margin-top: 5px; padding-top: 11px !important;
  border-top: 1px solid var(--jd-border) !important;
  border-radius: 0 !important;
  color: var(--jd-brass-text) !important; font-weight: 600;
}

.jd-nav-soon { display: inline-flex; align-items: center; }
.jd-navcta { display: none; } /* phone-only; see the 900px block */
.jd-headactions { display: flex; align-items: center; gap: 12px; }
.jd-headactions .jd-btn { white-space: nowrap; }
/* flex: none, and nowrap on the two buttons. Without it the switcher is a
   shrinkable flex item: on the English page at 1440px the header squeezed it
   to 58px for 72px of content and `overflow: hidden` cut the हि button in
   half, leaving the only way to Hindi partly unclickable. The Hindi page was
   fine, which is why it went unnoticed — the bug only showed to the visitors
   who needed the button. */
.jd-lang {
  display: flex; flex: none;
  border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-pill);
  overflow: hidden;
}
.jd-lang a {
  padding: 5px 11px; font-size: var(--jd-fs-micro); font-weight: 600; white-space: nowrap;
  text-decoration: none; color: var(--jd-text-muted); background: var(--jd-surface);
}
.jd-lang a[aria-current] { background: var(--jd-brass-soft); color: var(--jd-brass-text); }
.jd-iconlink { color: var(--jd-text-muted); display: inline-flex; }
.jd-iconlink:hover { color: var(--jd-text); }
/* Admin entry. Deliberately quiet: a staff door, not a feature. Brass rather
   than the muted grey of the account icon so an admin can find it, and no
   wider than the icon beside it so it costs the header nothing. */
.jd-adminlink { color: var(--jd-brass-text); }
.jd-adminlink:hover, .jd-adminlink:focus-visible { color: var(--jd-brass); }
.jd-navtoggle {
  display: none; margin-inline-start: auto;
  background: none; border: 1px solid var(--jd-border-strong);
  border-radius: var(--jd-radius-sm); padding: 9px 10px; cursor: pointer;
}
.jd-navtoggle span { display: block; width: 19px; height: 2px; background: var(--jd-text); border-radius: 2px; }
.jd-navtoggle span + span { margin-top: 4px; }

/* Ink footer. The token file has said since v2 that ink is for "the hero, the
   footer, the timeline band"; the footer was the one that never got it, and a
   white footer against a warm-paper page just looked like the page had run
   out. Dark closes the page and lets the brass rule read as a rule. */
.jd-footer {
  background: var(--jd-ink); color: var(--jd-text-on-dark);
  padding-block: clamp(40px, 5vw, 60px) 0; margin-top: 0;
  position: relative;
}
/* A brass hairline across the top: the one piece of ornament, and it is the
   same accent the rest of the page uses. */
.jd-footer::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--jd-brass) 18%, var(--jd-brass) 82%, transparent);
  opacity: .55;
}
.jd-footer a { color: var(--jd-muted-on-dark); text-decoration: none; }
.jd-footer a:hover, .jd-footer a:focus-visible { color: var(--jd-brass-on-dark); }

.jd-footgrid {
  display: grid; gap: clamp(26px, 3vw, 48px);
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  padding-bottom: clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--jd-ink-line);
}
.jd-footbrand { max-width: 34ch; }
.jd-brand-foot { margin-bottom: 12px; }
.jd-footer .jd-brand-name { color: var(--jd-text-on-dark); }
.jd-footer .jd-brand-name span { color: var(--jd-brass-on-dark); }
.jd-footer .jd-brand-foot:hover .jd-brand-name { color: var(--jd-text-on-dark); }
.jd-foottag {
  font-size: var(--jd-fs-small); color: var(--jd-brass-on-dark);
  margin: 0 0 10px; font-style: italic;
}
.jd-footblurb {
  font-size: var(--jd-fs-small); color: var(--jd-muted-on-dark);
  margin: 0; line-height: 1.65;
}

.jd-footcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.jd-foothead {
  font-family: var(--jd-font-body);
  font-size: var(--jd-fs-micro); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--jd-brass-on-dark);
  margin: 0 0 2px;
}
html[lang="hi"] .jd-foothead { text-transform: none; letter-spacing: .04em; }
.jd-footcol a { font-size: var(--jd-fs-small); line-height: 1.4; }

.jd-footer .jd-disclaimer {
  color: var(--jd-muted-on-dark);
  max-width: 78ch; margin: clamp(22px, 2.4vw, 30px) 0 0;
  line-height: 1.65;
}

.jd-footbar {
  margin-top: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid var(--jd-ink-line);
  padding-block: 18px 22px;
}
.jd-footbar-in {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  align-items: baseline; justify-content: space-between;
}
.jd-footbar p {
  margin: 0; font-size: var(--jd-fs-small); color: var(--jd-muted-on-dark);
}
/* No underline at rest: the brass and the weight already separate it from the
   line it sits in, and a footer credit is not something anyone needs steering
   towards. It underlines on hover and on keyboard focus so it still announces
   itself as a link the moment anyone goes near it — colour alone is not enough
   for someone who cannot distinguish it. */
.jd-poweredby a {
  color: var(--jd-brass-on-dark); font-weight: 600;
  text-decoration: none;
}
.jd-poweredby a:hover, .jd-poweredby a:focus-visible {
  color: var(--jd-text-on-dark);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ================================================= 4 · landing — hero === */
/* Light hero. No photograph: a photo behind an opaque form card is never
   legible, and sizing one to cover every viewport was the source of the
   right-edge gap. The decoration here is drawn, so it cannot fail to reach an
   edge and it costs no request. */
.jd-hero {
  position: relative; overflow: hidden;
  background: var(--jd-bg); color: var(--jd-text);
  border-bottom: 1px solid var(--jd-border);
  /* Raised from clamp(20px, 2.4vw, 34px) when the "free, no account" pill came
     out of the hero. The pill was 51px of the copy column's height, and the
     column is pinned to the form card, so removing it did not shorten the
     hero — it moved 51px of slack into the auto margin above the tile strip,
     leaving a 78px hole under the trust chips and the headline pressed up
     against the header. Spending most of it here puts it back as breathing
     room at the top, where it reads as rhythm rather than as a gap. */
  padding-block: clamp(28px, 3vw, 48px) clamp(34px, 4vw, 52px);
}
.jd-hero::before {
  /* a warm wash and a faint brass ring — decorative only */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(820px 460px at 78% 6%, rgba(194,145,60,.13), transparent 64%),
    radial-gradient(680px 560px at 6% 98%, rgba(194,145,60,.07), transparent 68%);
}
/* The zodiac wheel and the hills are decoration. They sit under everything,
   never take pointer events, and carry no meaning a reader needs. */
.jd-zodiac {
  position: absolute; pointer-events: none; opacity: .18;
  width: clamp(300px, 32vw, 470px); height: auto;
  top: -26%; inset-inline-end: 28%;
}
.jd-hills {
  position: absolute; pointer-events: none;
  inset-inline-start: 0; bottom: 0; width: min(54%, 660px); height: 190px;
  -webkit-mask-image: linear-gradient(to right, #000 48%, transparent 96%);
          mask-image: linear-gradient(to right, #000 48%, transparent 96%);
}
/* Scoped to the content wrapper: `.jd-hero > *` also hit the two absolutely
   positioned decorations and dropped them back into the flow. */
.jd-hero > .jd-wrap { position: relative; z-index: 1; }
.jd-hero h1 { color: var(--jd-heading); margin-bottom: 16px; }
.jd-hero h1 em { font-style: normal; color: var(--jd-brass-text); }
.jd-hero .jd-eyebrow { color: var(--jd-brass-text); }
.jd-hero .jd-lede { color: var(--jd-text-muted); font-size: 1.14rem; max-width: 50ch; }
/* Reserve three lines here and two in the form card's intro, in both
   languages.

   Devanagari says the same thing in fewer lines than English: the hero lede
   sets to three lines in English and two in Hindi, and the form's intro to two
   and one. Nothing is missing from the Hindi — it is simply denser. But the
   copy column is pinned to the height of the form card, so those thirty-odd
   spare pixels do not vanish, they fall into the automatic gaps, and the
   Hindi hero ends up with a visibly emptier middle and every row below the
   lede sitting somewhere different from the English.

   The floor is set in em so it holds if the type scale changes, and in `lh`
   where the browser supports it, which is exact rather than close. It is a
   minimum, so a language or a narrow viewport that needs a fourth line still
   gets one. Reserving the space is the honest fix: a sentence written to fill
   a gap is filler, and filler is worse than the gap. */
.jd-hero .jd-lede { min-height: 4.85em; }
@supports (height: 1lh) { .jd-hero .jd-lede { min-height: 3lh; } }
/* Only the lede, not the form card's intro. Reserving a second line there too
   made the Hindi card hold an obviously empty line between the intro and the
   first field — a hole inside a tight component, which reads worse than the
   gap it was meant to fix. Below a paragraph in open space the reserved line
   is just spacing; inside a card it is a mistake. */
.jd-hero-grid {
  display: grid; gap: clamp(28px, 4vw, 60px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 452px);
  /* stretch, not center: centring the shorter copy column against the taller
     form card pushed the headline 39px down and opened a gap under the header.
     Stretch keeps the headline at the top of its column and lets the copy
     column run the full height of the card, which is what pins the tile strip
     to the card's bottom edge. */
  align-items: stretch;
}
/* The card never stretches. If the copy column is the taller of the two —
   Hindi runs longer, and the tiles wrap to three rows on a narrow laptop —
   a stretched card would grow a band of empty white under its button. */
.jd-hero-grid > .jd-formcard { align-self: start; }
.jd-hero-copy { padding-top: 0; display: flex; flex-direction: column; }
/* Two auto margins, not one. The copy column is pinned to the height of the
   form card, so whatever the copy does not use becomes free space — and a
   single `auto` gives all of it to one gap. With the hero badge removed that
   was 78px sitting under the trust chips, which reads as a mistake rather
   than as rhythm. Flexbox splits free space equally between auto margins, so
   two of them put half above the chips and half above the tiles.
   The fixed margins are the floor: when there is no slack to share, `auto`
   collapses to zero and those are all that keep the rows apart. */
.jd-hero-copy > .jd-trustrow { margin-top: auto; margin-bottom: 26px; }
.jd-hero-copy > .jd-herotools { margin-top: auto; }
.jd-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 18px; padding: 6px 15px 6px 11px;
  background: var(--jd-surface); border: 1px solid var(--jd-brass);
  border-radius: var(--jd-radius-pill);
  font-size: var(--jd-fs-micro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--jd-brass-text);
}
.jd-badge svg { color: var(--jd-brass); flex: none; }

.jd-trustrow {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px;
  margin: 26px 0 0; padding: 0; list-style: none;
}
.jd-trustrow li {
  display: inline-flex; align-items: center; gap: 11px;
  flex: 1 1 170px; min-width: 0;
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  padding: 10px 13px 10px 10px; border-radius: var(--jd-radius-pill);
  box-shadow: var(--jd-shadow-sm);
}
.jd-trust-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--jd-brass-soft); color: var(--jd-brass-text);
}
.jd-trustrow li:nth-child(2) .jd-trust-ic {
  background: var(--jd-neutral-soft); color: var(--jd-neutral-text);
}
.jd-trust-tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1 1 auto; }
.jd-trust-tx strong { font-size: var(--jd-fs-small); font-weight: 600; color: var(--jd-text); }
.jd-trust-tx em { font-style: normal; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
/* the third chip opens "Know your rashi": same pill, but it is a button */
.jd-trustrow li.jd-trust-act { padding: 0; border-color: var(--jd-brass); background: var(--jd-brass-soft); transition: box-shadow .2s ease, transform .2s ease; }
.jd-trust-act a { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 11px 10px 10px; border-radius: inherit; color: inherit; text-decoration: none; }
.jd-trust-act .jd-trust-tx strong { white-space: nowrap; }
.jd-trust-act .jd-trust-ic { background: var(--jd-brass); color: var(--jd-surface); }
.jd-trust-act .jd-trust-tx strong { color: var(--jd-brass-text); }
.jd-trust-go { display: inline-flex; color: var(--jd-brass-text); flex: none; transition: transform .2s ease; }
.jd-trust-act:hover { box-shadow: var(--jd-shadow); transform: translateY(-1px); }
.jd-trust-act:hover .jd-trust-go { transform: translateX(3px); }
.jd-trust-act a:focus-visible { outline: 3px solid var(--jd-focus); outline-offset: 2px; }

/* the "Know your rashi" pop-up (and the page of the same name) */
.jd-rfind { border: 0; padding: 0; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border-radius: calc(var(--jd-radius) + 4px);
  background: var(--jd-surface); color: var(--jd-text); box-shadow: var(--jd-shadow-lg); overflow: auto; }
.jd-rfind::backdrop { background: rgba(23, 20, 31, .55); }
.jd-rfind[open] { animation: jd-rfin .25s ease both; }
@keyframes jd-rfin { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jd-rfind[open] { animation: none; } }
.jd-rfind-in { padding: 26px 26px 22px; text-align: center; }
.jd-rfind-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 1.6rem; line-height: 1; color: var(--jd-text-muted); cursor: pointer; }
.jd-rfind-x:hover { background: var(--jd-surface-alt); }
.jd-rfind-ic { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; margin: 0 0 10px; background: var(--jd-brass-soft); color: var(--jd-brass-text); }
.jd-rfind h2 { font-family: var(--jd-font-head); font-size: 1.5rem; color: var(--jd-heading); margin: 0 0 6px; }
.jd-rfind-sub { margin: 0 0 16px; font-size: var(--jd-fs-small); color: var(--jd-text-muted); line-height: 1.55; }
.jd-rfind-form { text-align: start; }
.jd-rfind-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.jd-rfind-row label { display: flex; flex-direction: column; gap: 5px; font-size: var(--jd-fs-small); font-weight: 600; color: var(--jd-text); min-width: 0; }
.jd-rfind-row small { font-weight: 400; color: var(--jd-text-muted); }
.jd-rfind-row input { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); background: var(--jd-surface); color: var(--jd-text); min-width: 0; }
.jd-rfind-row input:focus { outline: 3px solid var(--jd-focus); outline-offset: 1px; border-color: var(--jd-brass); }
.jd-rfind-err { margin: 10px 0 0; color: var(--jd-caution-text); font-size: var(--jd-fs-small); }
.jd-rfind-go { width: 100%; justify-content: center; margin-top: 14px; }
.jd-rfind-note { margin: 10px 0 0; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); text-align: center; line-height: 1.5; }
.jd-rfind-res img { width: 120px; height: 120px; border-radius: 50%; box-shadow: var(--jd-shadow); margin: 4px auto 12px; display: block; }
.jd-rfind-is { font-family: var(--jd-font-head); font-size: 1.45rem; font-weight: 700; color: var(--jd-heading); margin: 0 0 4px; outline: none; }
.jd-rfind-why { margin: 0 0 16px; color: var(--jd-text-muted); font-size: var(--jd-fs-small); }
.jd-rfind-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 8px; }
.jd-rfind-q { margin: 0 0 16px; font-size: 1.02rem; line-height: 1.55; color: var(--jd-text); outline: none; }
.jd-rfind-both { margin: 8px 0 4px; font-size: var(--jd-fs-small); color: var(--jd-text-muted); line-height: 1.55; }
.jd-rfind-again { border: 0; background: none; color: var(--jd-brass-text); font: inherit; font-size: var(--jd-fs-small); font-weight: 600; text-decoration: underline; cursor: pointer; padding: 6px; margin-top: 4px; }
.jd-rfpage .jd-rfind-form { max-width: 460px; }
.jd-rfpage .jd-rfind-res { text-align: center; }
@media (max-width: 420px) { .jd-rfind-row { grid-template-columns: 1fr; } .jd-rfind-in { padding: 24px 18px 18px; } }

/* -- the tile strip: every free tool, one click from the first screen --
   The form card is the primary route, but it asks for five fields before it
   gives anything back. Panchang needs nothing at all, so it goes here as a
   real link; the five that need a birth chart point at the form when no
   profile exists yet rather than at a page that would only ask again.

   One row, not two. The copy column has 93px of room left under the trust
   row before it would run past the foot of the form card, and a two-row strip
   with a lead line needs 182px — it made the whole hero 116px taller. So the
   tiles are small: icon over label, six across, and the strip's heading is
   read out rather than drawn. */
.jd-herotools { margin-top: 20px; }
.jd-tilerow {
  display: grid; gap: 9px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
/* The arched plaque, at the only size the hero has room for. The reference
   design runs about 200px tall per tile; this column has 93px under the trust
   row before it would push past the foot of the form card, so the arch, the
   brass disc, the serif label and the hairline are kept and the rest is
   texture. The bottom corners are rounded rather than chamfered — a 45° cut
   needs clip-path, and clip-path replaces the border instead of following it. */
.jd-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; height: 100%; padding: 4px 4px 19px; min-width: 0; text-align: center;
  background: var(--jd-surface);
  border: 1px solid var(--jd-border);
  /* A deep dome, because a shallow one just reads as a rounded rectangle.
     50%/34% on a 98 x 61 tile is a 49px x 21px arc — the plaque shape. */
  border-radius: 50% 50% var(--jd-radius-sm) var(--jd-radius-sm)
              / 34% 34% var(--jd-radius-sm) var(--jd-radius-sm);
  box-shadow: var(--jd-shadow-sm);
  color: var(--jd-text); text-decoration: none;
  transition: border-color .14s, transform .14s, box-shadow .14s;
}
.jd-tile:hover, .jd-tile:focus-visible {
  border-color: var(--jd-brass); transform: translateY(-2px);
  box-shadow: var(--jd-shadow); text-decoration: none;
}
/* The brass disc. A gradient of two palette tokens, so it reads as struck
   metal rather than a flat swatch and still cannot drift off the palette. */
.jd-tile-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(150deg, var(--jd-mixed), var(--jd-brass));
  color: var(--jd-surface);
  box-shadow: 0 1px 3px rgba(23, 20, 31, .18);
}
/* There was an .is-needsform variant here that drew a grey disc on the five
   tools needing birth details. It was removed with the landing pages: once
   every tile leads to a working page, a greyed one is misinforming the
   reader about where it goes. */
.jd-tile-tx {
  font-family: var(--jd-font-head); font-size: .72rem; font-weight: 600;
  line-height: 1.15; color: var(--jd-heading); min-width: 0;
  overflow-wrap: break-word;
}
/* Hairline with a diamond on it, the way the plaque does it. Drawn with a
   border and a rotated square rather than an image. */
.jd-tile-rule {
  position: relative; display: block; flex: none;
  width: 24px; height: 1px; margin-top: 1px;
  background: var(--jd-brass); opacity: .45;
}
.jd-tile-rule::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 3.5px; height: 3.5px; margin: -1.75px 0 0 -1.75px;
  background: var(--jd-brass); transform: rotate(45deg);
}
/* The motif, sunk into the foot of the tile. It is texture, not an image the
   reader is meant to study: it sits behind the content and never takes a
   click. */
/* Parked in the padding the tile reserves for it at the foot, so it never
   competes with the label for space and is never clipped by the dome. */
.jd-tile-art {
  position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  width: 66%; height: auto; pointer-events: none;
  color: var(--jd-brass); opacity: .38;
}
.jd-tile:hover .jd-tile-art { opacity: .55; }

/* the form card sitting on the ink */
.jd-formcard {
  position: relative; background: var(--jd-surface); color: var(--jd-text);
  border: 1px solid var(--jd-border); border-radius: var(--jd-radius);
  padding: 24px 26px 22px; box-shadow: var(--jd-shadow);
}
.jd-formcard h2 { font-size: 1.3rem; margin: 0 0 3px; }
.jd-formcard .jd-hint { font-size: .8rem; }
.jd-formcard .jd-field { margin-bottom: 11px; }
.jd-formcard .jd-row .jd-field { margin-bottom: 8px; }
/* padding-block/-inline-end only: a `padding` shorthand here would reset the
   inline-start room that .jd-inputicon gives the icon, and the glyph would sit
   on top of the control's own text. */
.jd-formcard .jd-row-3 input, .jd-formcard .jd-row-3 select {
  padding-block: 9px; padding-inline-end: 6px;
  font-size: .9rem; min-width: 0; width: 100%;
}
/* Direct children only — an input wrapped in .jd-inputicon keeps the wider
   inline-start padding that leaves room for its glyph. */
.jd-formcard .jd-row-3 > .jd-field > input { padding-inline-start: 8px; }
.jd-formcard .jd-row-3 label { font-size: .82rem; white-space: nowrap; }
.jd-formcard-badge {
  position: absolute; top: -12px; inset-inline-end: 20px;
  background: var(--jd-brass); color: var(--jd-ink);
  font-size: var(--jd-fs-micro); font-weight: 700;
  padding: 4px 12px; border-radius: var(--jd-radius-pill);
}
.jd-formfoot { margin: 12px 0 0; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); text-align: center; }

/* -- the timeline band: the product's actual differentiator -- */
.jd-tlband {
  margin-top: clamp(30px, 4vw, 48px);
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); box-shadow: var(--jd-shadow-sm);
  padding: 20px clamp(16px, 2.2vw, 26px) 18px;
}
.jd-tlband-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 13px;
}
.jd-tlband-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--jd-brass-soft); color: var(--jd-brass-text);
  border: 1px solid var(--jd-brass);
}
.jd-tlband-head h2 {
  font-size: 1.02rem; color: var(--jd-heading); margin: 0;
  font-family: var(--jd-font-body); font-weight: 600; letter-spacing: .01em;
}
.jd-tlband-head p { margin: 0; font-size: var(--jd-fs-small); color: var(--jd-text-muted); }
.jd-tl-track { position: relative; padding-top: 19px; }
.jd-tl {
  position: relative; display: flex; gap: 2px; height: 62px;
  border-radius: var(--jd-radius-sm); overflow: hidden;
  border: 1px solid var(--jd-border-strong); background: var(--jd-surface);
}
.jd-tl-seg {
  display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0;
  font-size: var(--jd-fs-micro); font-weight: 600; color: var(--jd-text);
  overflow: hidden; white-space: nowrap; padding-inline: 3px;
}
.jd-tl-seg em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.jd-glyph { flex: none; opacity: .8; }
.jd-tl-seg.jd-st-transition { color: var(--jd-neutral-text); }
.jd-tl-now {
  position: absolute; top: 13px; bottom: 0; width: 2px;
  background: var(--jd-heading); pointer-events: none;
}
.jd-tl-nowlabel {
  position: absolute; top: 0; transform: translateX(-50%);
  background: var(--jd-brass); color: var(--jd-ink);
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--jd-radius-pill); white-space: nowrap;
}
.jd-tl-axis {
  display: flex; justify-content: space-between;
  font-size: var(--jd-fs-micro); color: var(--jd-text-muted); margin-top: 7px;
}
.jd-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none;
  margin: 12px 0 0; padding: 0; font-size: var(--jd-fs-micro);
}
.jd-hero .jd-legend { color: var(--jd-text-muted); }
.jd-tlband-note { margin: 10px 0 0; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
/* Birth … Age 120 over the bar, the age at each change under it, "you are
   here" below that, then the current Mahadasha and Antardasha. Same card,
   same colours and bar height; only the layout around the bar. */
.jd-tl-ruler {
  position: relative; display: flex; justify-content: space-between;
  font-size: var(--jd-fs-micro); color: var(--jd-text-muted);
  padding-bottom: 5px; margin-bottom: 8px; border-bottom: 1px solid var(--jd-border);
}
.jd-tl-ruler::before, .jd-tl-ruler::after {
  content: ""; position: absolute; bottom: -4px; width: 1px; height: 7px; background: var(--jd-border-strong);
}
.jd-tl-ruler::before { left: 0; }
.jd-tl-ruler::after  { right: 0; }
.jd-tlband .jd-tl-track { padding-top: 0; }
.jd-tlband .jd-tl-now { top: -5px; bottom: -5px; }
.jd-tl-seg.is-now { box-shadow: inset 0 0 0 2px var(--jd-heading); }
.jd-tl-ages { position: relative; height: 16px; margin-top: 7px; }
.jd-tl-ages span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: var(--jd-fs-micro); color: var(--jd-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.jd-tl-here { position: relative; height: 24px; margin-top: 4px; }
.jd-tl-here .jd-tl-nowlabel { left: clamp(64px, var(--at), calc(100% - 64px)); }
.jd-tl-current {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 34px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--jd-border);
}
.jd-tl-cur { display: flex; flex-direction: column; gap: 2px; }
.jd-tl-cur-k { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.jd-tl-cur strong { display: flex; align-items: center; gap: 5px; font-size: 1.05rem; color: var(--jd-heading); }
.jd-tl-cur strong .jd-swatch { margin: 0; }
.jd-tl-cur small { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
@media (max-width: 680px) { .jd-tl-ages span:not(.is-sm) { display: none; } }
.jd-tl-cur-link { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--jd-fs-small); color: var(--jd-brass-text); }

/* ============================================ the life timeline section === */
.jd-ls { position: relative; background: var(--jd-cream); overflow: hidden; }
.jd-ls-head {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .95fr) minmax(0, .62fr);
  align-items: center; gap: 10px 26px; margin-bottom: clamp(18px, 3vw, 30px);
}
.jd-ls-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.jd-ls-eyebrow span {
  font-size: var(--jd-fs-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--jd-brass-text); background: var(--jd-brass-soft); padding: 7px 16px; border-radius: var(--jd-radius-pill);
}
.jd-ls-eyebrow::after { content: ""; width: 48px; height: 1px; background: var(--jd-brass); }
.jd-ls-copy h2 {
  font-family: var(--jd-font-head); font-size: clamp(2rem, 3.7vw, 3.25rem); line-height: 1.06;
  color: var(--jd-heading); margin: 0 0 16px; letter-spacing: -.01em;
}
.jd-ls-copy h2 em { display: block; font-style: normal; color: var(--jd-brass-text); }
.jd-ls-copy .jd-lede { margin: 0; max-width: 34em; }
.jd-ls-art { display: block; margin-inline: -40px; }
/* the moving planets: an SVG wheel and orbits, the Sun, and the planets over it */
.jd-orrery { position: relative; aspect-ratio: 1701 / 924; }
.jd-orrery-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jd-orrery-wheel circle, .jd-orrery-wheel line { fill: none; stroke: var(--jd-brass); stroke-opacity: .16; stroke-width: 2; }
.jd-orrery-signs text { fill: var(--jd-brass); fill-opacity: .3; font-size: 40px; text-anchor: middle; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", serif; }
.jd-orrery-orbits ellipse { fill: none; stroke: var(--jd-brass); stroke-opacity: .55; stroke-width: 2.2; }
.jd-orrery-orbits ellipse.is-dash { stroke-dasharray: 8 9; stroke-opacity: .4; }
.jd-orrery-bead { fill: var(--jd-brass); }
.jd-orrery-sparks path { fill: var(--jd-brass); fill-opacity: .55; }
.jd-orrery img { position: absolute; height: auto; max-width: none; pointer-events: none; user-select: none; }
.jd-orrery-sun { z-index: 2; animation: jd-sunglow 6s ease-in-out infinite; }
.jd-orrery-p { z-index: 1; will-change: transform; filter: drop-shadow(0 6px 8px rgba(80, 55, 10, .18)); }
.jd-orrery-p.is-front { z-index: 3; }
@keyframes jd-sunglow { 0%, 100% { filter: drop-shadow(0 0 10px rgba(230, 170, 40, .35)); } 50% { filter: drop-shadow(0 0 26px rgba(230, 170, 40, .6)); } }
@media (prefers-reduced-motion: reduce) { .jd-orrery-sun { animation: none; } }
.jd-ls-aside-h { font-family: var(--jd-font-head); font-style: italic; font-size: 1.45rem; line-height: 1.2; color: var(--jd-heading); margin: 0 0 10px; }
.jd-ls-aside p:last-child { margin: 0; color: var(--jd-text-muted); line-height: 1.6; }
.jd-ls-aside::after { content: ""; display: block; width: 48px; height: 1px; background: var(--jd-brass); margin-top: 18px; }

/* the card */
.jd-ls-card {
  position: relative; background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: calc(var(--jd-radius) + 4px); box-shadow: var(--jd-shadow);
  padding: clamp(18px, 2.4vw, 28px);
}
.jd-ls-cardhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 18px; }
.jd-ls-cardhead h3 { margin: 0; font-family: var(--jd-font-body); font-size: .9rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jd-heading); }
.jd-ls-cardhead p { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-ls-track { position: relative; }
.jd-ls-ends { display: flex; justify-content: space-between; font-size: var(--jd-fs-small); font-weight: 600; color: var(--jd-heading); }
.jd-ls-ends span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.jd-ls-ends span:last-child { align-items: flex-end; }
.jd-ls-ends span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--jd-heading); margin-inline: 6px; }
.jd-ls-herebar { position: relative; height: 34px; }
.jd-ls-here {
  position: absolute; bottom: 8px; left: clamp(70px, var(--at), calc(100% - 70px)); transform: translateX(-50%);
  background: var(--jd-brass-text); color: var(--jd-text-on-dark); font-size: var(--jd-fs-micro); font-weight: 600;
  padding: 4px 11px; border-radius: 6px; white-space: nowrap; z-index: 2;
}
.jd-ls-line {
  position: absolute; top: 58px; bottom: 42px; width: 1.5px; margin-left: -.75px;
  background: var(--jd-brass-text); z-index: 1; pointer-events: none;
}
.jd-ls-line::before, .jd-ls-line::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--jd-brass-text); }
.jd-ls-line::before { top: -4px; width: 7px; height: 7px; margin-left: -3.5px; }
.jd-ls-line::after { bottom: -4px; }

.jd-ls-segs { display: flex; align-items: flex-start; }
.jd-ls-seg { min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.jd-ls-seg:not(.is-first) { margin-inline-start: -5px; }
.jd-ls-chip {
  display: flex; align-items: center; justify-content: center; height: 36px;
  background: var(--jd-pl, var(--jd-brass));
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
}
.jd-ls-seg.is-first .jd-ls-chip { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); border-radius: 18px 0 0 18px; }
.jd-ls-seg.is-last .jd-ls-chip { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%); border-radius: 0 18px 18px 0; }
.jd-ls-seg.is-first.is-last .jd-ls-chip { clip-path: none; border-radius: 18px; }
.jd-ls-gl {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(20, 16, 40, .18); color: var(--jd-surface); flex: none;
}
.jd-ls-gl .jd-glyph { opacity: 1; }
.jd-ls-seg.is-now .jd-ls-chip { box-shadow: inset 0 0 0 2px rgba(20, 16, 40, .35); }
.jd-ls-seg.is-narrow .jd-ls-gl { width: 18px; height: 18px; }
.jd-ls-seg.is-narrow .jd-ls-gl svg { width: 11px; height: 11px; }
.jd-ls-lab { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 4px 0; line-height: 1.35; min-width: 0; }
.jd-ls-lab strong { font-size: var(--jd-fs-small); color: var(--jd-heading); font-weight: 600; white-space: nowrap; }
.jd-ls-lab small { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); white-space: nowrap; }
.jd-ls-st { font-style: normal; font-size: .68rem; font-weight: 700; margin-top: 3px; padding: 1px 7px; border-radius: var(--jd-radius-pill); white-space: nowrap; }
.jd-ls-st.is-favourable { background: var(--jd-success-soft); color: var(--jd-success-text); }
.jd-ls-st.is-mixed { background: var(--jd-mixed-soft); color: var(--jd-mixed-text); }
.jd-ls-st.is-caution { background: var(--jd-caution-soft); color: var(--jd-caution-text); }
.jd-ls-st.is-transition { background: var(--jd-neutral-soft); color: var(--jd-neutral-text); }
.jd-ls-seg.is-narrow .jd-ls-lab { visibility: hidden; }
.jd-ls-axis { position: relative; height: 42px; margin-top: 18px; border-top: 1px solid var(--jd-border); }
.jd-ls-axis span {
  position: absolute; top: 12px; transform: translateX(-50%);
  font-size: var(--jd-fs-small); color: var(--jd-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.jd-ls-axis span::before { content: ""; position: absolute; top: -17px; left: 50%; width: 1px; height: 8px; background: var(--jd-border-strong); }
.jd-ls-axis span.is-start { transform: none; }
.jd-ls-axis span.is-start::before { left: 0; }
.jd-ls-axis span.is-end { transform: translateX(-100%); }
.jd-ls-axis span.is-end::before { left: auto; right: 0; }

/* the current period */
.jd-ls-now {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 16px 30px;
  margin-top: 10px; padding: 20px 22px; background: var(--jd-bg); border: 1px solid var(--jd-border); border-radius: var(--jd-radius);
}
.jd-ls-md { display: flex; align-items: center; gap: 18px; }
.jd-ls-big {
  display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; flex: none;
  background: var(--jd-pl, var(--jd-brass)); color: var(--jd-surface); box-shadow: 0 6px 18px rgba(23, 20, 31, .12);
}
.jd-ls-big .jd-glyph { opacity: 1; stroke-width: 1.8; }
.jd-ls-k { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--jd-text-muted); }
.jd-ls-mdname { margin: 2px 0; font-family: var(--jd-font-head); font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 700; color: var(--jd-heading); line-height: 1.15; }
.jd-ls-mdlen { margin: 0; font-weight: 600; color: var(--jd-brass-text); }
.jd-ls-ad { border-inline-start: 1px solid var(--jd-border-strong); padding-inline-start: 26px; }
.jd-ls-ad p { margin: 0 0 3px; color: var(--jd-heading); font-weight: 500; }
.jd-ls-ad small { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-ls-what { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 14px; align-items: flex-start; border-top: 1px solid var(--jd-border); padding-top: 16px; }
.jd-ls-bulb { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--jd-brass-soft); color: var(--jd-brass-text); }
.jd-ls-what-h { margin: 0 0 4px; font-weight: 700; color: var(--jd-heading); font-size: var(--jd-fs-small); }
.jd-ls-what p:not(.jd-ls-what-h) { margin: 0 0 6px; font-size: var(--jd-fs-small); color: var(--jd-text-muted); line-height: 1.55; max-width: 60em; }
.jd-ls-what a { display: inline-flex; align-items: center; gap: 5px; font-size: var(--jd-fs-micro); font-weight: 600; color: var(--jd-brass-text); }
.jd-ls-cta { grid-column: 3; grid-row: 1; justify-self: end; white-space: nowrap; padding: 14px 24px; }

/* what the timeline does */
.jd-ls-feats { list-style: none; margin: clamp(26px, 4vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jd-ls-feats li { text-align: center; padding: 4px 18px; }
.jd-ls-feats li + li { border-inline-start: 1px solid var(--jd-border); }
.jd-ls-fic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--jd-surface); color: var(--jd-brass-text); box-shadow: var(--jd-shadow-sm); border: 1px solid var(--jd-border); margin-bottom: 12px; }
.jd-ls-feats h3 { font-family: var(--jd-font-body); font-size: .98rem; font-weight: 600; color: var(--jd-heading); margin: 0 0 4px; }
.jd-ls-feats p { margin: 0; font-size: var(--jd-fs-small); color: var(--jd-text-muted); }

.jd-ls .is-ketu { --jd-pl: var(--jd-pl-ketu); } .jd-ls .is-venus { --jd-pl: var(--jd-pl-venus); } .jd-ls .is-sun { --jd-pl: var(--jd-pl-sun); }
.jd-ls .is-moon { --jd-pl: var(--jd-pl-moon); } .jd-ls .is-mars { --jd-pl: var(--jd-pl-mars); } .jd-ls .is-rahu { --jd-pl: var(--jd-pl-rahu); }
.jd-ls .is-jupiter { --jd-pl: var(--jd-pl-jupiter); } .jd-ls .is-saturn { --jd-pl: var(--jd-pl-saturn); } .jd-ls .is-mercury { --jd-pl: var(--jd-pl-mercury); }

/* the bar wipes in; the marker follows */
.jd-ls-card.is-in .jd-ls-segs { animation: jd-wipe 1.05s cubic-bezier(.3, .7, .3, 1) both; }
.jd-ls-card.is-in .jd-ls-line, .jd-ls-card.is-in .jd-ls-here { animation: jd-fadein .5s ease .95s both; }
@media (prefers-reduced-motion: reduce) { .jd-ls-card.is-in .jd-ls-segs, .jd-ls-card.is-in .jd-ls-line, .jd-ls-card.is-in .jd-ls-here { animation: none; } }

@media (max-width: 1080px) {
  .jd-ls-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .jd-ls-aside { grid-column: 1 / -1; max-width: 40em; }
  .jd-ls-aside::after { display: none; }
  .jd-ls-now { grid-template-columns: auto minmax(0, 1fr); }
  .jd-ls-what { grid-row: auto; }
  .jd-ls-cta { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .jd-ls-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .jd-ls-feats li:nth-child(3) { border-inline-start: 0; }
}
@media (max-width: 760px) {
  .jd-ls-head { grid-template-columns: minmax(0, 1fr); }
  .jd-ls-art { margin: 0 auto; max-width: 520px; width: 100%; }
  .jd-ls-lab { visibility: hidden; height: 0; padding: 0; }
  .jd-ls-seg:not(.is-first) { margin-inline-start: -4px; }
  .jd-ls-chip { height: 32px; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%, 6px 50%); }
  .jd-ls-seg.is-first .jd-ls-chip { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); }
  .jd-ls-seg.is-last .jd-ls-chip { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 6px 50%); }
  .jd-ls-gl { width: 20px; height: 20px; background: transparent; }
  .jd-ls-gl svg { width: 13px; height: 13px; }
  .jd-ls-seg.is-narrow .jd-ls-gl { display: none; }
  .jd-ls-line { top: 58px; }
  .jd-ls-axis { margin-top: 12px; }
  .jd-ls-axis span:not(.is-sm) { display: none; }
  .jd-ls-axis span { font-size: var(--jd-fs-micro); }
  .jd-ls-now { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .jd-ls-feats li { padding: 4px 10px; }
  .jd-ls-feats li:nth-child(odd) { border-inline-start: 0; }
  .jd-ls-ad { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--jd-border); padding-top: 12px; }
  .jd-ls-cta { justify-self: stretch; justify-content: center; }
  .jd-ls-big { width: 56px; height: 56px; }
}
@media (max-width: 340px) {
  .jd-ls-feats { grid-template-columns: minmax(0, 1fr); }
  .jd-ls-feats li + li { border-inline-start: 0; border-top: 1px solid var(--jd-border); padding-top: 20px; }
}
:lang(hi) .jd-ls-eyebrow span, :lang(hi) .jd-ls-cardhead h3, :lang(hi) .jd-ls-k { letter-spacing: 0; }

.jd-payrecv { display: flex; flex-direction: column; gap: 3px; font-size: var(--jd-fs-micro); font-weight: 600; margin: 6px 0 2px; }
.jd-payrecv input { font: inherit; font-weight: 400; width: 9em; padding: 6px 8px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); }

/* ================================================ reviews (home page) === */
.jd-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.jd-stars svg { fill: var(--jd-border-strong); }
.jd-stars svg.is-on { fill: var(--jd-brass); }
.jd-rvgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jd-rv { position: relative; display: flex; flex-direction: column; background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); padding: 20px 22px 18px; box-shadow: var(--jd-shadow-sm); min-width: 0; }
.jd-rv-top { display: flex; align-items: center; justify-content: space-between; }
.jd-rv-q { font-family: var(--jd-font-head); font-size: 3rem; line-height: .6; color: var(--jd-brass); opacity: .45; }
.jd-rv blockquote { margin: 12px 0 16px; flex: 1 1 auto; }
.jd-rv blockquote p { margin: 0; color: var(--jd-text); line-height: 1.65; }
.jd-rv-who { display: flex; align-items: center; gap: 11px; margin: 0; padding-top: 14px; border-top: 1px solid var(--jd-border); }
.jd-rv-av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--jd-brass-soft); color: var(--jd-brass-text); font-weight: 700; font-family: var(--jd-font-head); }
.jd-rv-who span:last-child { display: flex; flex-direction: column; min-width: 0; }
.jd-rv-who strong { color: var(--jd-heading); font-size: var(--jd-fs-small); }
.jd-rv-who small { color: var(--jd-text-muted); font-size: var(--jd-fs-micro); }
.jd-rv-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 0; }
.jd-rv-acts .jd-btn { display: inline-flex; align-items: center; gap: 8px; }
.jd-rv-note { text-align: center; margin: 14px 0 0; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
@media (max-width: 960px) { .jd-rvgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .jd-rvgrid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 8px; margin-inline: calc(var(--jd-gutter) * -1); padding-inline: var(--jd-gutter); }
  .jd-rv { flex: 0 0 84%; scroll-snap-align: center; }
}
/* admin */
.jd-rvtable-body { min-width: 220px; font-size: var(--jd-fs-small); }
.jd-rv-confirm { margin-top: 6px; border-color: var(--jd-brass); background: var(--jd-brass-soft); }
.jd-rv-confirm.has-error { border-color: var(--jd-caution-text); }
.jd-rv-formacts { display: flex; gap: 10px; margin: 16px 0 0; }
.jd-field label.jd-check { display: flex; align-items: center; font-weight: 500; }
.jd-check > span { min-width: 0; overflow-wrap: anywhere; }
.jd-field .jd-check input { width: auto; flex: 0 0 auto; margin: 0; padding: 0; }
#rvform { margin-top: 26px; }

/* ============================================ 5 · landing — sections === */
/* three pillars, each with a real miniature rather than an icon */
.jd-pillars { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- the three feature cards, mockup treatment ------------------------- */
.jd-pillars-band { position: relative; overflow: hidden; }
.jd-pillars-band > .jd-wrap { position: relative; z-index: 1; }
.jd-zodiac-edge {
  position: absolute; pointer-events: none; opacity: .14;
  width: clamp(280px, 30vw, 420px); height: auto;
  top: 50%; transform: translateY(-50%); inset-inline-start: -22%;
}
.jd-pillars-band .jd-hills {
  inset-inline-start: auto; inset-inline-end: 0; bottom: 0;
  width: min(46%, 560px); height: 160px; opacity: .8;
  -webkit-mask-image: linear-gradient(to left, #000 44%, transparent 96%);
          mask-image: linear-gradient(to left, #000 44%, transparent 96%);
}

/* the gold rule with a sparkle in the middle, above a section heading */
.jd-markrule {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 18px; color: var(--jd-brass);
}
.jd-markrule span { display: block; width: clamp(48px, 9vw, 104px); height: 1px; background: currentColor; }

.jd-pillar {
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: 20px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--jd-shadow);
}
.jd-pillar-art {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 26px 20px; height: 232px;   /* fixed, so the three panels line up:
                                          the miniatures are different shapes and
                                          a min-height let the square one win */
  border-bottom: 1px solid var(--jd-border);
}
/* Direct child only. Without the `>` this also matched the sparkle SVGs inside
   .jd-spark and blew them up to 174px. */
.jd-pillar-art > svg { display: block; height: auto; }
.jd-tone-violet .jd-pillar-art > svg { width: 174px; }
.jd-tone-azure  .jd-pillar-art > svg { width: 100%; max-width: 218px; }
.jd-tone-brass  .jd-pillar-art > svg { width: 100%; max-width: 210px; }
.jd-spark svg { display: block; }

/* the tint on each panel is decorative and carries no status meaning */
.jd-tone-violet .jd-pillar-art { background: var(--jd-violet-soft); }
.jd-tone-azure  .jd-pillar-art { background: var(--jd-azure-soft); }
.jd-tone-brass  .jd-pillar-art { background: var(--jd-brass-soft); }

.jd-pillar-num {
  position: absolute; top: 18px; inset-inline-start: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  font-family: var(--jd-font-head); font-weight: 700; font-size: 1rem;
  color: var(--jd-surface); letter-spacing: .02em;
}
.jd-tone-violet .jd-pillar-num { background: var(--jd-violet); }
.jd-tone-azure  .jd-pillar-num { background: var(--jd-azure); }
.jd-tone-brass  .jd-pillar-num { background: var(--jd-brass); color: var(--jd-ink); }

.jd-spark { position: absolute; pointer-events: none; opacity: .5; }
.jd-tone-violet .jd-spark { color: var(--jd-violet); }
.jd-tone-azure  .jd-spark { color: var(--jd-azure); }
.jd-tone-brass  .jd-spark { color: var(--jd-brass-text); }
.jd-spark-a { top: 22%;  inset-inline-end: 16%; }
.jd-spark-b { bottom: 20%; inset-inline-start: 14%; opacity: .34; }
.jd-spark-c { top: 60%;  inset-inline-end: 9%;  opacity: .28; }

.jd-pillar-body { padding: 22px 24px 20px; }
.jd-pillar-body h3 { font-size: 1.32rem; margin-bottom: .42em; }
.jd-pillar-body p { margin-bottom: 0; color: var(--jd-text-muted); font-size: var(--jd-fs-small); }
.jd-pillar-foot { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
.jd-pillar-foot span { display: block; flex: 1; max-width: 96px; height: 2px; border-radius: 1px; }
.jd-tone-violet .jd-pillar-foot { color: var(--jd-violet); }
.jd-tone-azure  .jd-pillar-foot { color: var(--jd-azure); }
.jd-tone-brass  .jd-pillar-foot { color: var(--jd-brass-text); }
.jd-pillar-foot span { background: linear-gradient(to right, currentColor, transparent); }

/* the "shows its working" block — the trust argument, with a real example */
.jd-rule-band { position: relative; overflow: hidden; }
.jd-rule-band > .jd-wrap { position: relative; z-index: 1; }
.jd-zodiac-rule {
  position: absolute; pointer-events: none; opacity: .16;
  width: clamp(300px, 34vw, 480px); height: auto;
  top: -16%; inset-inline-end: -8%;
}
.jd-wave {
  position: absolute; pointer-events: none; opacity: .55;
  left: 0; bottom: -1px; width: 100%; height: clamp(110px, 13vw, 190px);
}

.jd-rulewrap {
  display: grid; gap: clamp(28px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: center;
}
.jd-rule-lede { font-size: 1.06rem; line-height: 1.66; max-width: 52ch; }

/* a short rule with a star, left-aligned above the heading */
.jd-markrule.is-start { justify-content: flex-start; margin-bottom: 14px; }
.jd-markrule.is-start span { width: 56px; }
.jd-markrule.is-start span:last-of-type { width: 26px; }

.jd-checks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.jd-checks li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--jd-fs-body); }
.jd-check-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  background: var(--jd-brass-text); color: var(--jd-surface);
}

.jd-rulecard {
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: 20px; box-shadow: var(--jd-shadow-lg); overflow: hidden;
  padding: 10px;
}
.jd-rulecard-top {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 14px 18px;
}
.jd-rulecard-medal {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(145deg, var(--jd-brass), var(--jd-brass-text));
  color: var(--jd-surface); box-shadow: var(--jd-shadow-sm);
}
.jd-rulecard-id { min-width: 0; flex: 1; }
.jd-rulecard-id strong {
  display: block; font-family: var(--jd-font-head); font-weight: 700;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem); color: var(--jd-heading); line-height: 1.2;
}
.jd-rulecard-dates {
  display: block; margin-top: 4px;
  font-size: var(--jd-fs-small); color: var(--jd-text-muted);
}
.jd-pill-star { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 14px; }

.jd-rulecard-why {
  background: var(--jd-surface-alt); border-radius: 14px;
  padding: 18px 20px 20px;
}
.jd-rulecard-why .jd-eyebrow { margin-bottom: 8px; }
.jd-rulecard-why p { margin: 0; color: var(--jd-text); line-height: 1.66; }

/* how it works */
.jd-how-band { position: relative; overflow: hidden; }
.jd-how-band > .jd-wrap { position: relative; z-index: 1; }
.jd-how-band .jd-hills {
  bottom: 0; inset-inline-start: 0; width: min(46%, 560px); height: 200px; opacity: .85;
}
.jd-howwrap {
  display: grid; gap: clamp(26px, 3.5vw, 52px);
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr); align-items: start;
}
.jd-how-intro .jd-lede { max-width: 34ch; }
.jd-how-intro h2 { margin-bottom: .34em; }

/* the wheel, the orbiting planets and a few sparkles, stacked in one box */
.jd-how-art { position: relative; margin-top: 26px; aspect-ratio: 1 / 1; max-width: 336px; }
.jd-how-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.jd-zodiac-how { opacity: .42; }
.jd-how-art .jd-spark { color: var(--jd-brass); opacity: .55; }
.jd-how-art .jd-spark-a { top: 8%;  inset-inline-end: 12%; }
.jd-how-art .jd-spark-b { bottom: 14%; inset-inline-end: 6%; }
.jd-how-art .jd-spark-c { top: 30%; inset-inline-start: 2%; }

.jd-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.jd-step {
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: 18px; padding: 22px 22px 24px;
  box-shadow: var(--jd-shadow-sm);
  transition: transform .28s ease, box-shadow .28s ease;
}
.jd-step:hover { transform: translateY(-6px); box-shadow: var(--jd-shadow); }
.jd-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.jd-step-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  font-family: var(--jd-font-head); font-weight: 700; font-size: 1.02rem;
  color: var(--jd-surface);
}
.jd-step-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 54px; height: 54px; border-radius: 40% 55% 45% 60%;   /* a soft blob */
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.jd-step:hover .jd-step-ic { transform: scale(1.08) rotate(-4deg); }
.jd-step h3 { margin-bottom: 14px; font-size: 1.24rem; }
.jd-step-rule { display: block; width: 58px; height: 3px; border-radius: 2px; margin-bottom: 14px; }
.jd-step p { margin: 0; color: var(--jd-text-muted); font-size: var(--jd-fs-small); line-height: 1.62; }

/* The rule grows out of the heading as the card arrives. Scoped to .jd-reveal,
   which only exists when motion is allowed — so with JavaScript off or reduced
   motion on, the rule is simply drawn at full width. */
.jd-reveal .jd-step-rule { transform: scaleX(0); transform-origin: left center;
                           transition: transform .55s cubic-bezier(.2,.7,.3,1) calc(var(--i, 0) * 90ms + .25s); }
.jd-reveal.is-in .jd-step-rule { transform: none; }

.jd-tone-violet .jd-step-num  { background: var(--jd-violet); }
.jd-tone-violet .jd-step-ic   { background: var(--jd-violet-soft); color: var(--jd-violet); }
.jd-tone-violet .jd-step-rule { background: var(--jd-violet); }
.jd-tone-azure  .jd-step-num  { background: var(--jd-azure); }
.jd-tone-azure  .jd-step-ic   { background: var(--jd-azure-soft); color: var(--jd-azure); }
.jd-tone-azure  .jd-step-rule { background: var(--jd-azure); }
.jd-tone-brass  .jd-step-num  { background: var(--jd-brass); color: var(--jd-ink); }
.jd-tone-brass  .jd-step-ic   { background: var(--jd-brass-soft); color: var(--jd-brass-text); }
.jd-tone-brass  .jd-step-rule { background: var(--jd-brass); }

/* the display quote that fills the space under the step cards */
.jd-how-right { display: flex; flex-direction: column; }
.jd-bigquote {
  position: relative; margin: clamp(26px, 3vw, 44px) 0 0;
  padding: 6px 0 0 clamp(26px, 3vw, 44px);
  border-inline-start: 3px solid var(--jd-brass);
}
.jd-bigquote-mark {
  position: absolute; top: -34px; inset-inline-start: 12px;
  font-family: var(--jd-font-head); font-weight: 700; font-size: 150px; line-height: 1;
  color: var(--jd-brass); opacity: .17; pointer-events: none; user-select: none;
}
.jd-bigquote blockquote {
  position: relative; margin: 0;
  font-family: var(--jd-font-head); font-weight: 700;
  font-size: clamp(1.5rem, 2.9vw, 2.45rem); line-height: 1.17;
  letter-spacing: -.012em; color: var(--jd-heading); max-width: 20ch;
}
.jd-bigquote blockquote em { font-style: normal; color: var(--jd-brass-text); }
.jd-bigquote-cta {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  margin-top: 22px; font-weight: 600; color: var(--jd-brass-text); text-decoration: none;
}
.jd-bigquote-cta::after {
  content: ''; position: absolute; left: 0; right: 26px; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.jd-bigquote-cta:hover { color: var(--jd-brass-text); }
.jd-bigquote-cta:hover::after { transform: none; }
.jd-bigquote-cta svg { transition: transform .22s ease; }
.jd-bigquote-cta:hover svg { transform: translateX(4px); }

/* the planets drift round their orbit */
@keyframes jd-orbit { to { transform: translate(210px, 210px) rotate(360deg); } }
.jd-orbit-spin { animation: jd-orbit 90s linear infinite; }

/* language demo */
.jd-langpair { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jd-langcol {
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); padding: 20px 22px;
}
.jd-langcol .jd-eyebrow { margin-bottom: 10px; }
.jd-langcol p { margin: 0; }
.jd-langcol .jd-pill { margin-bottom: 10px; }

/* method list */
.jd-method-band { position: relative; overflow: hidden; }
.jd-method-band > .jd-wrap { position: relative; z-index: 1; }
.jd-zodiac-m1 {
  position: absolute; pointer-events: none; opacity: .13;
  width: clamp(240px, 26vw, 360px); height: auto; top: 6%; inset-inline-start: -9%;
}
.jd-zodiac-m2 {
  position: absolute; pointer-events: none; opacity: .13;
  width: clamp(220px, 24vw, 330px); height: auto; top: -12%; inset-inline-end: -7%;
}

.jd-methodwrap {
  display: grid; gap: clamp(20px, 3vw, 44px);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); align-items: center;
}
.jd-method-art { position: relative; }
.jd-method-art picture { display: block; }
.jd-method-art .jd-almanac { display: block; width: 100%; height: auto; max-width: 420px; margin-inline: auto; }
.jd-method-art .jd-spark { color: var(--jd-brass); opacity: .55; }
.jd-method-art .jd-spark-a { top: 6%;  inset-inline-end: 10%; }
.jd-method-art .jd-spark-b { bottom: 16%; inset-inline-start: 4%; }
.jd-method-art .jd-spark-c { top: 40%; inset-inline-start: 0; }

.jd-methodpanel {
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: 22px; box-shadow: var(--jd-shadow); padding: 12px;
}
.jd-method { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jd-method li { border-radius: 14px; transition: background .2s ease; }
.jd-method summary {
  display: grid; align-items: center; gap: 4px 16px; cursor: pointer;
  grid-template-columns: auto minmax(0, 150px) minmax(0, 1fr) auto;
  padding: 14px 16px; border-radius: 14px; list-style: none;
}
.jd-method summary::-webkit-details-marker { display: none; }
.jd-method-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
}
.jd-method b {
  font-family: var(--jd-font-head); font-weight: 700;
  font-size: 1.04rem; color: var(--jd-heading); min-width: 0;
}
.jd-method-val { color: var(--jd-text-muted); font-size: var(--jd-fs-small); line-height: 1.5; min-width: 0; }
.jd-method-chev { display: inline-flex; color: var(--jd-text-muted); transition: transform .25s ease; }
.jd-method details[open] .jd-method-chev { transform: rotate(90deg); }
.jd-method details > p {
  margin: 0; padding: 0 18px 16px 74px;
  font-size: var(--jd-fs-small); color: var(--jd-text); line-height: 1.66;
}

.jd-tone-violet.jd-method-row, .jd-method .jd-tone-violet { }
.jd-method li.jd-tone-violet { background: var(--jd-violet-soft); }
.jd-method li.jd-tone-azure  { background: var(--jd-azure-soft); }
.jd-method li.jd-tone-brass  { background: var(--jd-brass-soft); }
.jd-method li.jd-tone-violet .jd-method-ic { background: var(--jd-surface); color: var(--jd-violet); }
.jd-method li.jd-tone-azure  .jd-method-ic { background: var(--jd-surface); color: var(--jd-azure); }
.jd-method li.jd-tone-brass  .jd-method-ic { background: var(--jd-surface); color: var(--jd-brass-text); }
.jd-method li:hover { filter: brightness(.985); }

/* faq */
.jd-faqwrap {
  display: grid; gap: clamp(24px, 3.4vw, 56px);
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: start;
}
.jd-faq-intro { position: sticky; top: 92px; }
.jd-faq-intro h2 { margin-bottom: 14px; }
.jd-faq-intro .jd-lede { margin-bottom: 0; max-width: 34ch; }
.jd-faq-art { margin-top: clamp(18px, 3vw, 34px); }
.jd-faq-art picture { display: block; }
.jd-faq-img { display: block; width: 100%; height: auto; max-width: 440px; }

.jd-faq { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.jd-faq li {
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: 18px; box-shadow: var(--jd-shadow);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.jd-faq li:hover { border-color: var(--jd-border-strong); }
/* The open row is the one being read: it gets the brass edge and the tinted
   answer panel, so a visitor can see at a glance where they are in the list. */
.jd-faq li:has(details[open]) { border-color: var(--jd-brass); }
.jd-faq summary {
  display: grid; align-items: center; gap: 16px; cursor: pointer; list-style: none;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  padding: 16px clamp(14px, 1.6vw, 20px);
}
.jd-faq summary::-webkit-details-marker { display: none; }
.jd-faq-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: var(--jd-fs-small); font-weight: 700; font-variant-numeric: tabular-nums;
}
.jd-faq-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
}
.jd-faq b {
  font-family: var(--jd-font-head); font-weight: 700; min-width: 0;
  font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--jd-heading); line-height: 1.34;
}
/* A drawn +/−, not a text glyph: a font's minus sits at a different height from
   the bar of its plus, so the mark hopped as a row opened. */
.jd-faq-tog {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--jd-brass); color: var(--jd-brass-text);
  transition: background .2s ease, transform .25s ease;
}
.jd-faq-tog i {
  position: absolute; inset-inline-start: 50%; top: 50%; width: 13px; height: 1.5px;
  background: currentColor; transform: translate(-50%, -50%); transition: transform .25s ease;
}
.jd-faq-tog i:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.jd-faq details[open] .jd-faq-tog { background: var(--jd-brass-soft); }
.jd-faq details[open] .jd-faq-tog i:last-child { transform: translate(-50%, -50%) rotate(0); }
.jd-faq details > p {
  margin: 0 clamp(14px, 1.6vw, 20px) 18px;
  padding: 15px 18px; border-radius: 14px;
  color: var(--jd-text); font-size: var(--jd-fs-small); line-height: 1.68;
}

.jd-faq li.jd-tone-violet .jd-faq-num { background: var(--jd-violet-soft); color: var(--jd-violet); }
.jd-faq li.jd-tone-azure  .jd-faq-num { background: var(--jd-azure-soft);  color: var(--jd-azure); }
.jd-faq li.jd-tone-brass  .jd-faq-num { background: var(--jd-brass-soft);  color: var(--jd-brass-text); }
.jd-faq li.jd-tone-violet .jd-faq-ic  { background: var(--jd-violet-soft); color: var(--jd-violet); }
.jd-faq li.jd-tone-azure  .jd-faq-ic  { background: var(--jd-azure-soft);  color: var(--jd-azure); }
.jd-faq li.jd-tone-brass  .jd-faq-ic  { background: var(--jd-brass-soft);  color: var(--jd-brass-text); }
.jd-faq li.jd-tone-violet details > p { background: var(--jd-violet-soft); }
.jd-faq li.jd-tone-azure  details > p { background: var(--jd-azure-soft); }
.jd-faq li.jd-tone-brass  details > p { background: var(--jd-brass-soft); }

/* gochar — transits */
/* The status line is a statement, not an alarm. When Sade Sati is running it
   gets the mixed tint, the same one the timeline uses for a period that is
   neither favourable nor a warning, because that is exactly what this is: a
   fact about where Saturn is. Coral would have made the page shout. */
.jd-sade-status {
  background: var(--jd-surface-alt); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius-sm); padding: 12px 15px; margin: 0 0 16px;
}
.jd-sade-status.is-on { background: var(--jd-mixed-soft); border-color: var(--jd-mixed); }
.jd-sade-status strong { color: var(--jd-heading); }

.jd-episodes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.jd-episode {
  background: var(--jd-surface-alt); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius-sm);
}
.jd-episode.is-now { border-color: var(--jd-mixed); background: var(--jd-mixed-soft); }
.jd-episode summary {
  cursor: pointer; list-style: none; padding: 11px 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.jd-episode summary::-webkit-details-marker { display: none; }
.jd-episode-when { font-weight: 600; color: var(--jd-heading); }
.jd-episode-chev {
  margin-inline-start: auto; display: inline-flex; color: var(--jd-text-muted);
  transition: transform .25s ease;
}
.jd-episode details[open] .jd-episode-chev { transform: rotate(90deg); }
.jd-phases { margin: 0; padding: 0 14px 6px 32px; display: grid; gap: 5px; }
.jd-phases li { font-size: var(--jd-fs-small); }
.jd-phase-name { color: var(--jd-text); }
.jd-episode .jd-hint { padding: 0 14px 12px; margin: 0; }

.jd-ingress { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 1px;
  background: var(--jd-border); border-block: 1px solid var(--jd-border); }
.jd-ingress li {
  background: var(--jd-surface); padding: 10px 2px; display: flex; gap: 16px;
  align-items: baseline; font-size: var(--jd-fs-small);
}
.jd-ingress-date {
  color: var(--jd-brass-text); font-weight: 600; flex: none;
  min-width: 108px; font-variant-numeric: tabular-nums;
}
/* Six columns of transit data do not fit a phone; the wrapper scrolls. */
.jd-gochar-table { min-width: 620px; }

/* guna milan */
/* The score is brass, not green or coral. The four status colours carry meaning
   everywhere else on the site, and colouring a marriage score with them would be
   this page passing the judgement it exists not to pass. */
.jd-score { text-align: center; }
.jd-score-num {
  font-family: var(--jd-font-head); font-weight: 700; color: var(--jd-heading);
  font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1; margin: 0 0 14px;
}
.jd-score-num span { font-size: .4em; color: var(--jd-text-muted); font-weight: 400; }
.jd-score-bar {
  height: 10px; border-radius: 5px; background: var(--jd-surface-alt);
  overflow: hidden; max-width: 460px; margin: 0 auto 14px;
}
.jd-score-bar i { display: block; height: 100%; background: var(--jd-brass); }
.jd-score-who { font-size: var(--jd-fs-small); color: var(--jd-text-muted); margin-bottom: 10px; }
.jd-score-who strong { color: var(--jd-text); }
.jd-score .jd-muted { max-width: 62ch; margin-inline: auto; margin-bottom: 0; }

.jd-kootas { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.jd-kootas li { border-top: 1px solid var(--jd-border); padding-top: 14px; }
.jd-kootas li:first-child { border-top: 0; padding-top: 0; }
.jd-koota-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.jd-koota-name { font-family: var(--jd-font-head); font-weight: 700; color: var(--jd-heading); font-size: 1.06rem; }
.jd-koota-about { color: var(--jd-text-muted); font-size: var(--jd-fs-small); }
.jd-koota-pts {
  margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--jd-brass-text); font-size: var(--jd-fs-small); white-space: nowrap;
}
.jd-koota-bar {
  height: 6px; border-radius: 3px; background: var(--jd-surface-alt);
  overflow: hidden; margin: 8px 0 9px;
}
.jd-koota-bar i { display: block; height: 100%; background: var(--jd-brass); }
.jd-koota-why { margin: 0; font-size: var(--jd-fs-small); }
.jd-koota-flag {
  display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0;
  font-size: var(--jd-fs-micro); font-weight: 600;
  color: var(--jd-violet); background: var(--jd-violet-soft);
  padding: 3px 10px; border-radius: var(--jd-radius-pill);
}

.jd-roles { display: flex; gap: 10px; flex-wrap: wrap; }
.jd-role {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-pill);
  padding: 9px 16px; font-size: var(--jd-fs-small);
}
.jd-role:has(input:checked) { border-color: var(--jd-brass-text); background: var(--jd-brass-soft); }

/* closing call to action */
.jd-ctaband {
  background: var(--jd-brass-soft); color: var(--jd-text);
  border-block: 1px solid var(--jd-brass);
  padding-block: clamp(44px, 5vw, 72px); text-align: center;
}
.jd-ctaband h2 { color: var(--jd-heading); }
.jd-ctaband p { color: var(--jd-text-muted); max-width: 54ch; margin-inline: auto; }

/* ============================================ 6 · product pages === */
.jd-breadcrumb { font-size: var(--jd-fs-small); color: var(--jd-text-muted); margin: 18px 0 0; }
.jd-breadcrumb a { color: var(--jd-text-muted); }
.jd-dash { padding-block: 28px 56px; }
.jd-keyfacts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 24px; padding: 0; list-style: none; }
.jd-fact { background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); padding: 13px 15px; }
.jd-fact-label { display: block; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); text-transform: uppercase; letter-spacing: .07em; }
.jd-fact-value { display: block; font-family: var(--jd-font-head); font-size: 1.16rem; color: var(--jd-heading); font-weight: 700; margin-top: 2px; }

.jd-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
.jd-table { font-size: var(--jd-fs-small); min-width: 460px; }
.jd-table th, .jd-table td { text-align: start; padding: 9px 12px; border-bottom: 1px solid var(--jd-border); vertical-align: top; }
.jd-table th { font-weight: 600; color: var(--jd-text-muted); font-size: var(--jd-fs-micro); text-transform: uppercase; letter-spacing: .05em; }
.jd-table tbody tr:last-child td { border-bottom: 0; }
.jd-row-now td { background: var(--jd-mixed-soft); font-weight: 600; }
.jd-subtable { margin-top: 10px; }

/* The SVG carries width/height attributes; without width:100% its own
   max-width rule beats the global svg{max-width:100%} and it overflows a phone. */
.jd-chart { display: block; margin-inline: auto; width: 100%; max-width: 420px; height: auto; }
.jd-hero-art { display: block; margin-inline: auto; }

/* life timeline (product page) */
.jd-lifebar { display: flex; gap: 2px; height: 74px; border-radius: var(--jd-radius-sm); overflow: hidden; border: 1px solid var(--jd-border); position: relative; background: var(--jd-surface); }
.jd-lifeseg { display: flex; align-items: center; justify-content: center; min-width: 0; font-size: var(--jd-fs-micro); font-weight: 600; color: var(--jd-text); text-decoration: none; overflow: hidden; white-space: nowrap; }
.jd-lifeseg.jd-st-transition { color: var(--jd-neutral-text); }
.jd-lifeseg:hover { filter: brightness(.94); color: var(--jd-text); }
.jd-lifeseg.is-now { box-shadow: inset 0 0 0 2px var(--jd-heading); }
.jd-lifeaxis { display: flex; justify-content: space-between; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); margin-top: 7px; }
.jd-nowline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--jd-heading); }
.jd-progress { height: 6px; border-radius: 3px; background: var(--jd-neutral-soft); overflow: hidden; }
.jd-progress i { display: block; height: 100%; background: var(--jd-brass); }
.jd-upcoming { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* period cards */
.jd-period { background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 18px 20px; margin-bottom: 14px; }
.jd-period.is-now { box-shadow: var(--jd-shadow); }
.jd-period.is-past { opacity: .72; }
.jd-period-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 8px; }
.jd-period-head h3 { margin: 0; }
.jd-periodlinks { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--jd-fs-small); }
.jd-rulerow { font-size: var(--jd-fs-small); color: var(--jd-text-muted); border-top: 1px dashed var(--jd-border-strong); margin-top: 12px; padding-top: 10px; }
.jd-current { border-inline-start-width: 4px; }

/* profiles */
.jd-profilerow { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding: 0; list-style: none; }
.jd-profilecard { background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 18px; }
.jd-profileactions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* -- interior page header ------------------------------------------------
   h1 is hero-sized site-wide, which is right for the landing page and much
   too loud for "My profiles". A page title is its own size, and the page's
   one action sits beside it rather than below the content. */
.jd-pagesec { padding-block: clamp(26px, 3.4vw, 46px) clamp(40px, 5vw, 72px); }
.jd-pagehead {
  display: flex; flex-wrap: wrap; gap: 16px 24px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  padding-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--jd-border);
}
.jd-pagehead > div { min-width: 0; }
.jd-pagehead p { margin: 0; }
.jd-pagetitle { font-size: var(--jd-fs-h2); margin: 0 0 6px; }
.jd-empty { color: var(--jd-text-muted); }

/* -- the profile cards --------------------------------------------------- */
.jd-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.jd-pcard {
  display: flex; flex-wrap: wrap; gap: 14px 20px;
  align-items: flex-start; justify-content: space-between;
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); padding: 18px 20px;
  box-shadow: var(--jd-shadow-sm);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.jd-pcard:hover { box-shadow: var(--jd-shadow); border-color: var(--jd-border-strong); }
.jd-pcard-main { min-width: 0; flex: 1 1 15rem; }
.jd-pcard-name { font-size: var(--jd-fs-h3); margin: 0 0 4px; }
.jd-pcard-meta {
  font-size: var(--jd-fs-small); color: var(--jd-text-muted); margin: 0 0 12px;
}
/* The secondary destinations read as a line of links, not a wall of buttons:
   four ghost buttons wrapping two-by-two was the whole problem. */
.jd-pcard-links {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0;
  font-size: var(--jd-fs-small);
}
.jd-pcard-links a {
  color: var(--jd-brass-text); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.jd-pcard-links a:hover, .jd-pcard-links a:focus-visible {
  border-bottom-color: var(--jd-brass);
}
.jd-pcard-side {
  display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
}
.jd-pcard-side form { margin: 0; }
/* Delete is destructive and rarely wanted: quiet until you go looking for it. */
.jd-quietbtn {
  font: inherit; font-size: var(--jd-fs-small); cursor: pointer;
  background: none; border: 0; padding: 4px 2px;
  color: var(--jd-text-muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.jd-quietbtn:hover, .jd-quietbtn:focus-visible { color: var(--jd-caution-text); }

/* illustrative life-stage cards (app/ui.php) */
.jd-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.jd-stage { background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); padding: 13px; min-width: 0; }
.jd-stage-dot { display: block; width: 10px; height: 10px; border-radius: 50%; margin-bottom: 8px; }
.jd-stage-age { display: block; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-stage-sub { display: block; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-tone-favourable .jd-stage-dot { background: var(--jd-success); }
.jd-tone-mixed .jd-stage-dot { background: var(--jd-mixed); }
.jd-tone-transition .jd-stage-dot { background: var(--jd-neutral); }
.jd-tone-caution .jd-stage-dot { background: var(--jd-caution); }

.jd-i { display: inline-flex; vertical-align: -3px; }
.jd-kicker { font-size: var(--jd-fs-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jd-brass-text); }

/* ============================================== 7 · responsive === */
@media (max-width: 1040px) {
  .jd-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 424px); }
  .jd-rulewrap { grid-template-columns: 1fr; }
  .jd-howwrap { grid-template-columns: 1fr; }
  .jd-how-art { max-width: 300px; }
  .jd-methodwrap { grid-template-columns: 1fr; }
  .jd-method-art .jd-almanac { max-width: 320px; }
  /* One column: the intro stops being a sidebar, so it must stop sticking too. */
  .jd-faqwrap { grid-template-columns: 1fr; }
  .jd-faq-intro { position: static; }
  .jd-faq-intro .jd-lede { max-width: 56ch; }
  .jd-faq-art { max-width: 340px; margin-inline: auto; }
}
/* Measured across 1440 / 1366 / 1280 / 1180 / 1100 / 1024 / 980: eight nav
   items, the language switcher, the account icon and the Log out button
   stop fitting on one row at about 1150px, and the row silently wrapped
   instead of collapsing because the breakpoint was 900. A tenth item
   (Panchang) pushed that to about 1250, where Get Started was being cut
   off the right edge — measured at 1160, not guessed. */
/* The header collapses on its own schedule, not the layout's.
   These used to sit in the 1250px block beside the hero and footer rules,
   because the header then carried eight nav items and genuinely needed
   1112px. The tools have since moved into the Free Services menu, and the
   bar now needs 904px at its widest — signed in, in English, with the admin
   shield. Left at 1250px it would show a menu button to every tablet and
   most laptops for a four-item row. Re-measured on every header change; do
   not move an item in or out without running navwidth. 960px leaves 56px. */
@media (max-width: 960px) {
  .jd-navtoggle { display: block; }

  /* A logo six times wider than it is tall cannot share this row with the menu
     button and still be readable — at 12:1 and 164px of room it comes out
     eight pixels tall, which is not a small logo but a smudge. So it takes the
     row to itself. This belongs at the breakpoint where the navigation folds
     into the menu button, not at the phone breakpoint: between 560 and 960 the
     bar is already collapsed but the earlier version of this rule was written
     inside the 560 block and did nothing for any of those widths.
     Costs one line of header height, and only for the logos with no other
     option — see jd_brand_is_longmark(). */
  .jd-longmark .jd-headbar { flex-wrap: wrap; row-gap: 6px; }
  .jd-longmark .jd-brand { flex: 0 0 100%; justify-content: flex-start; }
  .jd-longmark .jd-brand-mark { max-width: 100%; max-height: calc(46px * var(--jd-logo-scale, 1)); }
  .jd-mainnav {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--jd-surface); border-bottom: 1px solid var(--jd-border);
    padding: 8px var(--jd-gutter) 14px; box-shadow: var(--jd-shadow);
  }
  .jd-mainnav.is-open { display: flex; }
  .jd-mainnav a { padding: 11px 0; border-bottom: 1px solid var(--jd-border); }
  .jd-mainnav a:last-child { border-bottom: 0; }

  /* In the collapsed menu the panel is a section of the list, not a card
     floating over the page: absolute positioning inside a menu that is itself
     absolutely positioned put it off the side of a phone screen. */
  /* display: flex, not the inline-flex of the bar. Left inline it shrank to
     its text, so the rule under it stopped halfway across the row and the
     chevron sat against the label instead of out at the edge. */
  .jd-navdrop > summary {
    display: flex; justify-content: space-between;
    padding: 11px 0; border-bottom: 1px solid var(--jd-border);
  }
  .jd-navdrop { width: 100%; }
  .jd-navdrop-panel {
    position: static; min-width: 0; padding: 2px 0 6px;
    border: 0; border-radius: 0; box-shadow: none; background: none;
  }
  .jd-navdrop-panel a {
    padding: 9px 0 9px 16px; border-bottom: 0; border-radius: 0;
    font-size: .9rem; color: var(--jd-text-muted);
  }
  .jd-navdrop-panel a:hover { background: none; }
  .jd-navdrop-all { margin-top: 2px; padding-inline-start: 16px !important; }
  .jd-header { position: relative; }
  .jd-headbar { flex-wrap: nowrap; }
  .jd-headactions { margin-inline-start: 0; order: 2; }
  .jd-navtoggle { order: 3; margin-inline-start: 0; }
  .jd-brand { margin-inline-end: auto; }
  .jd-brand-tag { display: none; }
  /* Measured: brand + language + account + button + toggle is 452px wide in a
     390px viewport. The button moves into the menu rather than being cut off. */
  .jd-headactions .jd-btn { display: none; }
  .jd-navcta {
    display: inline-flex; border-bottom: 0 !important;
    margin-top: 12px; color: var(--jd-surface);
  }
  .jd-navcta:hover { color: var(--jd-surface); }

}

@media (max-width: 1250px) {
  .jd-hero-grid { grid-template-columns: 1fr; }
  .jd-hero-copy { max-width: 62ch; }
  .jd-pillars, .jd-steps { grid-template-columns: 1fr; }
  .jd-howwrap { grid-template-columns: 1fr; }
  .jd-how-art { margin-inline: auto; }
  /* The brand block takes the full row and the three link columns share the
     next one: at this width a 1.7fr brand beside three columns squeezes the
     Hindi headings onto two lines. */
  .jd-footgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jd-footbrand { grid-column: 1 / -1; max-width: 56ch; }
  /* label over value once the row is too narrow for four columns */
  .jd-method summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .jd-method b { grid-column: 2; }
  .jd-method-val { grid-column: 2; }
  .jd-method-chev { grid-row: 1 / span 2; grid-column: 3; }
  .jd-method details > p { padding-inline-start: 18px; }
}
@media (max-width: 620px) {
  .jd-grid2, .jd-langpair { grid-template-columns: 1fr; }
  /* Three across, two rows. Six across on a phone left each tile ~50px, which
     broke "Panchang" across two lines mid-word. Nothing is lining up with the
     form card down here — the hero is one column — so the extra row is free. */
  .jd-tilerow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jd-footgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jd-tl { height: 54px; }
  .jd-tl-seg { font-size: .62rem; }
  /* Measured at 320px: number + icon + toggle plus three gaps leaves 138px for
     the question. The icon circle repeats what the number already says, so it
     is the one that goes. */
  .jd-faq summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
  .jd-faq-ic { display: none; }
  .jd-faq details > p { margin-inline: 12px; padding: 13px 15px; }
}
@media (max-width: 560px) {
  .jd-row { grid-template-columns: 1fr; }
  /* date + time share a line, the accuracy select takes the next one:
     stacking all three makes the form longer than the layout it replaced */
  .jd-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jd-row-3 > :nth-child(3) { grid-column: 1 / -1; }
  .jd-panel, .jd-formcard { padding: 18px; }
  .jd-headbar { gap: 10px; min-height: 60px; }
  .jd-brand-name { font-size: 1.08rem; }
  .jd-brand-mark { max-height: calc(38px * var(--jd-logo-scale, 1)); max-width: min(180px, 42vw);
                   width: auto; height: auto; }
  /* A wordmark already carries the name, so on a narrow screen the printed
     name beside it is what gives way — there is about 150px next to the menu
     button and the two together do not fit. A square symbol keeps the name and
     gives way itself, because a symbol alone would leave the page unnamed. */
  /* (the wordmark rule now applies at every width, above) */
  .jd-wordmark .jd-brand-mark { max-width: min(230px, 38vw); }
  /* Restated because this block comes after the 960px one and would otherwise
     win on source order alone and put the long logo back into the row. */
  .jd-longmark .jd-brand-mark { max-width: 100%; }

}
@media (max-width: 380px) {
  .jd-headbar { gap: 8px; }
  .jd-lang a { padding: 5px 8px; }
  /* The smallest phones still in use. Measured, not guessed: at 320px the
     brand has about 149px beside the menu button and the language switch. */
  .jd-brand-mark { max-width: min(150px, 38vw); max-height: calc(34px * var(--jd-logo-scale, 1)); }
  .jd-wordmark .jd-brand-mark { max-width: min(180px, 31vw); }
  .jd-longmark .jd-brand-mark { max-width: 100%; }
  .jd-brand-name { font-size: .95rem; }
  /* Two footer columns stop fitting once the Hindi headings are in them. */
  .jd-footgrid { grid-template-columns: 1fr; }
  .jd-footbar-in { flex-direction: column; align-items: flex-start; gap: 6px; }
}


/* ================================================== 8 · motion === */
/* Scroll reveal. The hiding class is added by JavaScript, never in the markup:
   if the script fails or is blocked, every element stays visible instead of a
   blank page. prefers-reduced-motion is checked before the class is added at
   all, so those visitors never get the transform either. */
.jd-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.jd-reveal.is-in { opacity: 1; transform: none; }

/* cards lift, and their miniature grows a little with them */
.jd-pillar { transition: transform .28s ease, box-shadow .28s ease; }
.jd-pillar:hover { transform: translateY(-6px); box-shadow: var(--jd-shadow-lg); }
.jd-pillar-art > svg { transition: transform .4s cubic-bezier(.2, .7, .3, 1); }
.jd-pillar:hover .jd-pillar-art > svg { transform: scale(1.05); }
.jd-panel, .jd-langcol { transition: box-shadow .25s ease; }
.jd-langcol:hover { box-shadow: var(--jd-shadow); }

/* the arrow on a button leans forward on hover */
.jd-btn svg:last-child { transition: transform .2s ease; }
.jd-btn:hover svg:last-child { transform: translateX(3px); }

/* the example timeline wipes in rather than appearing all at once. A clip
   reveal, not a scaleX, because scaling would squash the planet names. */
.jd-tlband.is-in .jd-tl { animation: jd-wipe 1.05s cubic-bezier(.3, .7, .3, 1) both; }
.jd-tlband.is-in .jd-tl-now,
.jd-tlband.is-in .jd-tl-nowlabel { animation: jd-fadein .5s ease .95s both; }
@keyframes jd-wipe   { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes jd-fadein { from { opacity: 0; } to { opacity: 1; } }

/* the sparkles twinkle, out of step with each other */
@keyframes jd-twinkle { 0%, 100% { opacity: .5; transform: scale(1); }
                        50%      { opacity: .16; transform: scale(.8); } }
.jd-spark   { animation: jd-twinkle 3.8s ease-in-out infinite; }
.jd-spark-b { animation-delay: 1.3s; }
.jd-spark-c { animation-delay: 2.5s; }

/* the zodiac watermarks turn, very slowly. The edge one keeps its centring
   translate inside the keyframes — a transform animation would drop it. */
@keyframes jd-rotate      { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes jd-rotate-edge { from { transform: translateY(-50%) rotate(0); }
                            to   { transform: translateY(-50%) rotate(360deg); } }
.jd-hero > .jd-zodiac { animation: jd-rotate 260s linear infinite; }
.jd-zodiac-edge       { animation: jd-rotate-edge 300s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==================================================== 9 · admin workspace ===
   The admin screens are a tool, not a page of the site: no marketing nav, no
   four-column footer, no hero type scale. A fixed ink sidebar, one content
   column, and form controls sized for someone editing 54 paragraphs. */

.jd-adminbody { background: var(--jd-surface-alt); }
.jd-adminshell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

.jd-side {
  background: var(--jd-ink); color: var(--jd-text-on-dark);
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.jd-side-brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 6px 8px 16px; border-bottom: 1px solid var(--jd-ink-line); margin-bottom: 10px;
}
.jd-side-brand strong {
  display: block; font-family: var(--jd-font-head); font-size: 1.02rem;
  color: var(--jd-text-on-dark); font-weight: 700; line-height: 1.2;
}
.jd-side-brand strong span { color: var(--jd-brass-on-dark); }
.jd-side-brand small { display: block; font-size: var(--jd-fs-micro); color: var(--jd-muted-on-dark); }

.jd-sidenav { display: flex; flex-direction: column; gap: 2px; }
.jd-sidenav a, .jd-side-foot a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: var(--jd-radius-sm);
  color: var(--jd-muted-on-dark); text-decoration: none;
  font-size: var(--jd-fs-small); line-height: 1.3;
}
.jd-sidenav a:hover, .jd-side-foot a:hover,
.jd-sidenav a:focus-visible, .jd-side-foot a:focus-visible {
  background: var(--jd-ink-soft); color: var(--jd-text-on-dark);
}
.jd-sidenav a.is-on { background: var(--jd-ink-soft); color: var(--jd-brass-on-dark); font-weight: 600; }
.jd-sidenav a.is-on svg { color: var(--jd-brass-on-dark); }
.jd-sidenav svg, .jd-side-foot svg { flex: 0 0 auto; }

.jd-side-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--jd-ink-line);
  display: flex; flex-direction: column; gap: 2px;
}
.jd-side-who {
  font-size: var(--jd-fs-micro); color: var(--jd-muted-on-dark);
  margin: 8px 0 0; padding: 0 11px; overflow-wrap: anywhere;
}

.jd-adminmain { min-width: 0; display: flex; flex-direction: column; }
.jd-adminbar {
  display: flex; align-items: center; gap: 14px;
  background: var(--jd-surface); border-bottom: 1px solid var(--jd-border);
  padding: 14px clamp(16px, 2.4vw, 30px); position: sticky; top: 0; z-index: 5;
}
.jd-adminbar h1 { font-size: var(--jd-fs-h3); margin: 0; margin-inline-end: auto; }
.jd-admincontent { padding: clamp(18px, 2.4vw, 30px); min-width: 0; }
.jd-adminsec { max-width: 980px; }
.jd-adminsec .jd-lede { color: var(--jd-text-muted); max-width: 70ch; }
.jd-adminh2 { font-size: var(--jd-fs-h3); margin: 30px 0 12px; }

.jd-sidetoggle {
  display: none; background: none; border: 1px solid var(--jd-border-strong);
  border-radius: var(--jd-radius-sm); padding: 9px 10px; cursor: pointer;
}
.jd-sidetoggle span { display: block; width: 19px; height: 2px; background: var(--jd-text); border-radius: 2px; }
.jd-sidetoggle span + span { margin-top: 4px; }

/* -- the rule editor ------------------------------------------------------
   The old markup reused .jd-rulerow, which is the timeline's dashed paragraph
   block, so the textarea inherited no width at all and fell back to the
   browser default of about 20 columns inside a full-width card. Both
   languages of one rule now sit side by side in their own card, and each
   textarea fills its half. */
.jd-rulecard {
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); padding: 16px 18px 18px; margin-bottom: 14px;
}
.jd-rulecard-head {
  font-size: var(--jd-fs-small); font-weight: 600; margin: 0 0 12px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px;
  color: var(--jd-heading); font-family: var(--jd-font-body);
}
.jd-rulecard-head code {
  font-size: var(--jd-fs-micro); color: var(--jd-text-muted);
  background: var(--jd-surface-alt); padding: 2px 7px; border-radius: var(--jd-radius-pill);
}
.jd-rulepair { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jd-ruleedit { min-width: 0; }
.jd-ruleedit-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px;
}
.jd-ruleedit label { font-size: var(--jd-fs-micro); font-weight: 600; color: var(--jd-text-muted); }
.jd-ruleedit textarea {
  width: 100%; font: inherit; font-size: var(--jd-fs-small); line-height: 1.6;
  color: var(--jd-text); background: var(--jd-surface);
  padding: 11px 13px; border: 1px solid var(--jd-border-strong);
  border-radius: var(--jd-radius-sm); resize: vertical; min-height: 7.5em;
}
.jd-ruleedit textarea:focus { border-color: var(--jd-focus); outline: 2px solid var(--jd-focus); }
.jd-ruleedit.has-error textarea { border-color: var(--jd-caution-text); }

/* Sticky is right in the admin, where a long form scrolls under a bar that
   stays reachable. It is wrong on a public form: pinned to the viewport it
   sits on top of the very fields being filled in. Scoped to the admin, with a
   plain variant for everywhere else. */
.jd-savebar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  border-top: 1px solid var(--jd-border);
  padding: 14px 0 0; margin-top: 18px;
}
.jd-adminbody .jd-savebar {
  position: sticky; bottom: 0;
  background: var(--jd-surface-alt); padding: 14px 0;
}

/* -- logo and favicon ------------------------------------------------------
   The previews draw the mark at the size it is really used at, on the two
   backgrounds it really sits on. A logo that looks fine in a file browser at
   400px can be a smudge at 38, and the site has both a cream header and an ink
   footer, so "does it read?" has two answers. */
.jd-brandform { max-width: 880px; }
.jd-brandpanel { margin: 0 0 16px; }
.jd-brandprev {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end;
  margin: 14px 0 16px;
}
.jd-brandprev-one { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.jd-brandprev-one small { color: var(--jd-text-muted); font-size: var(--jd-fs-micro); }
.jd-brandprev-swatch {
  display: grid; place-items: center; min-width: 96px; min-height: 96px;
  border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm);
}
.jd-brandprev-swatch img { max-width: 100%; height: auto; }
/* A wide logo at 96px tall needs room to be wide; the square swatch would
   shrink it and defeat the point of the preview. */
.jd-brandprev-wide { min-width: 140px; padding: 0 12px; }
.jd-brandprev-swatch.is-cream { background: var(--jd-bg); }
.jd-brandprev-swatch.is-ink   { background: var(--jd-ink); border-color: var(--jd-ink-line); }
/* A browser tab, near enough to judge 16px by. */
.jd-brandprev-tab {
  display: flex; align-items: center; gap: 7px;
  min-width: 150px; padding: 9px 12px;
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: 9px 9px 0 0; border-bottom: 0;
}
.jd-brandprev-tab em {
  font-style: normal; font-size: var(--jd-fs-micro); color: var(--jd-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jd-brandactions { margin: 4px 0 14px; }
.jd-brandreset { display: inline-block; margin: 0 8px 10px 0; }
/* The row of "see how they look" links on the email screen. */
.jd-emailprev { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
                margin: -6px 0 18px; font-size: var(--jd-fs-small); }
.jd-emailprev span { color: var(--jd-text-muted); }
.jd-emailprev a { color: var(--jd-brass-text); text-decoration: underline; text-underline-offset: 3px; }

.jd-brandsize select {
  width: 100%; max-width: 260px; font: inherit; font-size: var(--jd-fs-small);
  color: var(--jd-text); background: var(--jd-surface);
  padding: 10px 12px; border: 1px solid var(--jd-border-strong);
  border-radius: var(--jd-radius-sm);
}
.jd-brandform input[type=file] {
  display: block; width: 100%; max-width: 420px; font: inherit;
  font-size: var(--jd-fs-small); color: var(--jd-text);
  padding: 9px 11px; background: var(--jd-surface);
  border: 1px dashed var(--jd-border-strong); border-radius: var(--jd-radius-sm);
}

/* -- admin forms ---------------------------------------------------------- */
.jd-adminform { max-width: 880px; }
.jd-fieldset {
  /* A fieldset will not shrink below its content unless told to, and a wide
     table inside one then pushes the whole page sideways on a phone. */
  min-inline-size: 0;
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); padding: 16px 18px 18px; margin: 0 0 16px;
}
.jd-fieldset legend {
  font-weight: 700; font-size: var(--jd-fs-small); color: var(--jd-heading);
  padding: 0 8px; margin-inline-start: -8px;
}
.jd-adminform .jd-field textarea {
  width: 100%; font: inherit; color: var(--jd-text); background: var(--jd-surface);
  padding: 11px 13px; border: 1px solid var(--jd-border-strong);
  border-radius: var(--jd-radius-sm); resize: vertical;
}
.jd-field.has-error input, .jd-field.has-error select { border-color: var(--jd-caution-text); }

.jd-radioset { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.jd-radio, .jd-check {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm);
  padding: 12px 14px; background: var(--jd-bg);
}
.jd-radio:has(input:checked) { border-color: var(--jd-brass); background: var(--jd-brass-soft); }
.jd-radio input, .jd-check input { margin-top: 3px; flex: 0 0 auto; }
.jd-radio strong, .jd-check span > :first-child { display: block; font-size: var(--jd-fs-small); }
.jd-radio small, .jd-check small {
  display: block; font-size: var(--jd-fs-micro); color: var(--jd-text-muted);
  margin-top: 3px; line-height: 1.5;
}
.jd-check { margin-top: 12px; }

.jd-testresult {
  border-radius: var(--jd-radius); padding: 14px 16px; margin-bottom: 16px;
  border: 1px solid var(--jd-border);
}
.jd-testresult.is-ok  { background: var(--jd-success-soft); border-color: var(--jd-success); }
.jd-testresult.is-bad { background: var(--jd-caution-soft); border-color: var(--jd-caution); }
.jd-testresult p { margin: 0; }
.jd-testresult details { margin-top: 10px; }
.jd-testresult summary { cursor: pointer; font-size: var(--jd-fs-small); }
.jd-testresult pre, .jd-logbox {
  background: var(--jd-ink); color: var(--jd-text-on-dark);
  padding: 12px 14px; border-radius: var(--jd-radius-sm);
  font-size: var(--jd-fs-micro); line-height: 1.6;
  overflow-x: auto; white-space: pre; margin: 10px 0 0;
}
.jd-logbox { max-height: 420px; overflow-y: auto; margin: 0; }

.jd-statgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 8px; }
.jd-stat {
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); padding: 14px 16px;
}
.jd-stat span { display: block; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-stat strong { display: block; font-size: 1.35rem; font-family: var(--jd-font-num); margin-top: 3px; overflow-wrap: anywhere; }

.jd-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 9px; }
.jd-dot.is-ok  { background: var(--jd-success); }
.jd-dot.is-bad { background: var(--jd-caution); }

@media (max-width: 900px) {
  .jd-adminshell { grid-template-columns: minmax(0, 1fr); }
  .jd-side {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: 248px; z-index: 20;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .jd-side.is-open { transform: none; box-shadow: var(--jd-shadow-lg); }
  .jd-sidetoggle { display: block; }
  /* One column: two Hindi paragraphs side by side at this width leaves each
     about 24 characters per line. */
  .jd-rulepair { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .jd-side { transition: none; }
}

/* ------------------------------------------------- the astrologer card ---
   Present only when an admin has entered a real person; see app/astrologer.php. */
.jd-astroband { background: var(--jd-bg); }
.jd-astro {
  display: grid; gap: clamp(18px, 2.6vw, 34px);
  grid-template-columns: auto minmax(0, 1fr); align-items: start;
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); padding: clamp(20px, 2.6vw, 30px);
  box-shadow: var(--jd-shadow-sm); max-width: 860px;
}
.jd-astro.is-compact { box-shadow: none; padding: 18px; }
.jd-astro-photo {
  width: 150px; height: 150px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--jd-brass-soft); background: var(--jd-surface-alt);
}
/* No photograph: the initial, not a silhouette of a person who does not exist. */
.jd-astro-initial {
  display: grid; place-items: center;
  font-family: var(--jd-font-head); font-size: 3rem; font-weight: 700;
  color: var(--jd-brass-text); background: var(--jd-brass-soft);
}
.jd-astro-body { min-width: 0; }
.jd-astro-name { font-size: var(--jd-fs-h3); margin: 0 0 4px; }
.jd-astro-cred {
  font-size: var(--jd-fs-small); color: var(--jd-brass-text);
  font-weight: 600; margin: 0 0 12px;
}
.jd-astro-facts {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px 9px;
}
.jd-astro-facts li {
  font-size: var(--jd-fs-micro); color: var(--jd-text-muted);
  background: var(--jd-surface-alt); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius-pill); padding: 4px 11px;
}
.jd-astro-bio { margin: 0 0 .8em; line-height: 1.7; color: var(--jd-text); }
.jd-astro-bio:last-child { margin-bottom: 0; }
.jd-astro-preview { border-radius: var(--jd-radius-sm); border: 1px solid var(--jd-border); }

/* A note in the admin that carries a rule, not just information. */
.jd-note {
  background: var(--jd-brass-soft); border: 1px solid var(--jd-brass);
  border-radius: var(--jd-radius-sm); padding: 12px 15px;
  font-size: var(--jd-fs-small); line-height: 1.6; margin: 0 0 16px;
}

@media (max-width: 620px) {
  .jd-astro { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .jd-astro-facts { justify-content: center; }
}

/* ------------------------------------------------ the astrologer cards ---
   No rating and no review count anywhere in here, by design: this site has had
   no customers, and a star average is a claim about people who do not exist.
   When reviews are real they get a table and the number is computed. */
.jd-agrid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}
/* The card: photo beside the name and facts, specialities as soft chips, the
   price with a clock and a navy Book button, and a wave with a lotus along the
   bottom — warm (gold) and cool (blue) in turn. Only the site's own colours. */
.jd-acard {
  --ac-soft: var(--jd-tint-gold-soft); --ac-line: var(--jd-tint-gold-line);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--jd-surface) 60%, color-mix(in srgb, var(--ac-soft) 45%, var(--jd-surface)));
  border: 1px solid var(--jd-border); border-radius: 22px;
  padding: 24px 22px 58px;
  box-shadow: var(--jd-shadow-sm);
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.jd-acard.is-cool { --ac-soft: var(--jd-tint-blue-soft); --ac-line: var(--jd-tint-blue-line); }
.jd-acard:hover { box-shadow: var(--jd-shadow); border-color: var(--jd-border-strong); }
.jd-acard-top { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--jd-border); }
.jd-acard-id { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* align-self keeps the wrapper the width of the photo, so the availability
   dot sits on the photo's edge rather than at the far edge of the card. */
.jd-acard-photowrap {
  position: relative; display: inline-block; align-self: center; flex: 0 0 auto;
  width: fit-content; padding: 5px; border-radius: 50%;
  border: 2px solid var(--jd-brass-soft); background: var(--jd-surface);
}
.jd-acard-photo {
  display: block; width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  background: var(--jd-surface-alt);
}
.jd-acard-photowrap.is-big { padding: 0; border: 0; background: none; margin-bottom: 8px; }
.jd-acard-photowrap.is-big .jd-acard-photo { width: 150px; height: 150px; border: 3px solid var(--jd-brass-soft); }
.jd-acard-initial {
  display: grid; place-items: center;
  font-family: var(--jd-font-head); font-size: 2.4rem; font-weight: 700;
  color: var(--jd-brass-text); background: var(--jd-brass-soft);
}
.jd-acard-photowrap.is-big .jd-acard-initial { font-size: 3.2rem; }
/* The dot is availability — online for chat, or inside stated hours — never decorative. */
.jd-acard-dot {
  position: absolute; inset-block-end: 8px; inset-inline-end: 6px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--jd-neutral); border: 3px solid var(--jd-surface);
}
.jd-acard-photowrap.is-big .jd-acard-dot { inset-block-end: 16px; inset-inline-end: 16px; width: 20px; height: 20px; }
.jd-acard-photowrap.is-on .jd-acard-dot { background: var(--jd-success); }
/* Online for live chat: green. Inside their hours and taking bookings: gold. Otherwise grey. */
.jd-acard-photowrap.is-hours .jd-acard-dot { background: var(--jd-brass); }

.jd-acard-name {
  font-size: 1.45rem; line-height: 1.15; margin: 0;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.jd-acard-check { display: inline-flex; color: var(--jd-brass-text); cursor: help; }
.jd-acard-cred { font-size: var(--jd-fs-small); color: var(--jd-brass-text); font-weight: 600; margin: 0; }
.jd-acard-facts { margin: 0; display: grid; gap: 6px; }
.jd-acard-facts dd { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--jd-fs-body); color: var(--jd-text-muted); }
.jd-acard-facts dd svg { flex: 0 0 auto; color: var(--jd-text-muted); }
.jd-acard-facts .is-star svg { color: var(--jd-brass); fill: var(--jd-brass); }

.jd-acard-skills, .jd-astro-facts {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px;
}
.jd-acard > .jd-acard-skills { padding: 18px 0; }
.jd-acard-skills li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--jd-fs-small); font-weight: 500; color: var(--jd-heading);
  background: var(--jd-tint-blue-soft); border-radius: var(--jd-radius-pill);
  padding: 7px 15px 7px 12px;
}
.jd-acard-skills li svg { flex: 0 0 auto; color: var(--jd-heading); }
.jd-acard-om { font-size: 1.15rem; line-height: 1; color: var(--jd-heading); width: 18px; text-align: center; }
.jd-astro-facts li {
  font-size: var(--jd-fs-micro); color: var(--jd-text-muted);
  border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-pill);
  padding: 3px 11px;
}

.jd-acard-foot {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--jd-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.jd-acard-pricewrap { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.jd-acard-clock { color: var(--jd-brass); flex: 0 0 auto; margin-top: 18px; }
.jd-acard-price { margin: 0; display: flex; flex-direction: column; }
.jd-acard-price .jd-acard-from { font-size: var(--jd-fs-small); color: var(--jd-text-muted); }
.jd-acard-price strong { font-family: var(--jd-font-num); font-size: 1.7rem; line-height: 1.15; color: var(--jd-heading); }
.jd-acard-price .jd-acard-mins { font-size: var(--jd-fs-small); color: var(--jd-text-muted); white-space: nowrap; }

.jd-acard-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: var(--jd-radius-pill);
  background: var(--jd-heading); color: var(--jd-text-on-dark);
  font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: var(--jd-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.jd-acard-btn:hover { transform: translateY(-1px); box-shadow: var(--jd-shadow-lg); color: var(--jd-text-on-dark); }
.jd-acard-btn:focus-visible { outline: 3px solid var(--jd-focus); outline-offset: 3px; }
.jd-acard-btn svg:last-child { transition: transform .2s ease; }
.jd-acard-btn:hover svg:last-child { transform: translateX(3px); }

.jd-acard-wave { position: absolute; inset: auto 0 0 0; height: 58px; z-index: -1; pointer-events: none; }
.jd-acard-wave > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--ac-soft); }
.jd-acard-lotus {
  position: absolute; inset: auto 0 10px 0; display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--ac-line);
}
.jd-acard.is-warm .jd-acard-lotus { color: var(--jd-brass); opacity: .55; }
.jd-acard.is-cool .jd-acard-lotus { color: var(--jd-tint-blue); opacity: .5; }
.jd-acard-lotus i { display: block; width: 26%; max-width: 100px; height: 1px; background: currentColor; }
@media (max-width: 400px) {
  .jd-acard { padding-inline: 18px; }
  .jd-acard-photo { width: 76px; height: 76px; }
  .jd-acard-name { font-size: 1.25rem; }
  .jd-acard-btn { padding: 12px 16px; gap: 8px; }
  .jd-acard-price strong { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) { .jd-acard-btn, .jd-acard-btn svg { transition: none; } }

.jd-astroband-more { margin: 22px 0 0; }
.jd-crumb { margin: 0 0 14px; font-size: var(--jd-fs-small); }

.jd-aprofile { display: grid; gap: clamp(20px, 3vw, 38px); grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.jd-aprofile-side { text-align: center; }
.jd-astatus { font-size: var(--jd-fs-small); font-weight: 600; margin: 10px 0 2px; }
.jd-averified {
  display: flex; align-items: center; gap: 8px; font-size: var(--jd-fs-small);
  color: var(--jd-brass-text); background: var(--jd-brass-soft);
  border-radius: var(--jd-radius-sm); padding: 8px 12px; margin: 0 0 14px;
}
.jd-apricing { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 18px 0 0; }
.jd-apricing p { margin: 0; }
.jd-apricing strong { font-family: var(--jd-font-num); font-size: 1.3rem; color: var(--jd-heading); }
.jd-soonnote { margin-top: 14px; }

/* admin list */
.jd-atable-photo { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; font-size: 1rem; }
.jd-atable-actions { white-space: nowrap; }
.jd-inlineform { display: inline; margin: 0; }
.jd-pillbtn { border: 0; cursor: pointer; font: inherit; font-size: var(--jd-fs-micro); }
.jd-pillbtn[disabled] { cursor: not-allowed; opacity: .55; }
.jd-daypick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.jd-daybox {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-pill);
  padding: 6px 13px; font-size: var(--jd-fs-small); background: var(--jd-surface);
}
.jd-daybox:has(input:checked) { border-color: var(--jd-brass); background: var(--jd-brass-soft); }

@media (max-width: 620px) {
  .jd-aprofile { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .jd-aprofile .jd-acard-skills, .jd-astro-facts, .jd-apricing { justify-content: center; }
}

/* ------------------------------------------------------------ booking --- */
.jd-booksub { font-size: var(--jd-fs-h3); margin: 22px 0 12px; }
.jd-booksub:first-child { margin-top: 0; }

.jd-daystrip { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 4px; }
.jd-daychip {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm);
  padding: 9px 14px; min-width: 96px; background: var(--jd-surface); color: var(--jd-text);
}
.jd-daychip strong { font-size: var(--jd-fs-small); }
.jd-daychip small { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-daychip.is-on { border-color: var(--jd-brass); background: var(--jd-brass-soft); }
.jd-daychip.is-on strong, .jd-daychip.is-on small { color: var(--jd-brass-text); }
.jd-daychip:hover { border-color: var(--jd-brass); }

.jd-slotgrid {
  display: grid; gap: 8px; margin-bottom: 8px;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}
.jd-slot { position: relative; }
/* The radio is visually hidden, never display:none — a hidden-by-display input
   is skipped by keyboard navigation and by some screen readers. */
.jd-slot input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.jd-slot span {
  display: block; text-align: center; padding: 10px 6px;
  border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm);
  background: var(--jd-surface); font-size: var(--jd-fs-small);
  font-family: var(--jd-font-num);
}
.jd-slot input:checked + span {
  border-color: var(--jd-brass); background: var(--jd-brass-soft);
  color: var(--jd-brass-text); font-weight: 600;
}
.jd-slot input:focus-visible + span { outline: 2px solid var(--jd-focus); outline-offset: 2px; }
/* A taken slot is shown, not hidden: an empty grid looks broken, a struck-out
   one tells you the astrologer is busy then. */
.jd-slot.is-off span {
  color: var(--jd-text-muted); background: var(--jd-surface-alt);
  border-style: dashed; text-decoration: line-through; cursor: not-allowed;
}
.jd-slot.is-off input { cursor: not-allowed; }

.jd-bookfacts { margin: 0; display: grid; gap: 10px; }
.jd-bookfacts > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 10px; }
.jd-bookfacts dt { font-size: var(--jd-fs-small); color: var(--jd-text-muted); }
.jd-bookfacts dd { margin: 0; overflow-wrap: anywhere; }
.jd-abook { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 0; }

@media (max-width: 560px) {
  .jd-bookfacts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .jd-daychip { min-width: 84px; flex: 1 1 84px; }
}

/* ------------------------------------------------------ booking dialog ---
   The dialog is decoration over book.php, which works on its own. Nothing
   here is load-bearing: with JavaScript off the Book link just navigates. */
.jd-modal {
  width: min(680px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0; border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); background: var(--jd-surface);
  color: var(--jd-text); box-shadow: var(--jd-shadow-lg);
  overflow: hidden;
}
.jd-modal::backdrop { background: rgba(23, 20, 31, .55); }
.jd-modal-body {
  padding: clamp(20px, 3vw, 30px);
  max-height: min(86vh, 900px); overflow-y: auto;
}
.jd-modal-x {
  position: absolute; inset-block-start: 10px; inset-inline-end: 12px; z-index: 2;
  width: 34px; height: 34px; line-height: 1; font-size: 1.4rem;
  background: var(--jd-surface); color: var(--jd-text-muted);
  border: 1px solid var(--jd-border); border-radius: 50%; cursor: pointer;
}
.jd-modal-x:hover { color: var(--jd-text); border-color: var(--jd-border-strong); }
/* The page-of-its-own popup closes with a link home, so it works with scripts
   off; it must look exactly like the button the popup elsewhere uses. */
a.jd-modal-x { display: grid; place-items: center; text-decoration: none; padding-bottom: 2px; }
.jd-modal.is-busy .jd-modal-body { opacity: .5; pointer-events: none; }
.jd-modal-loading { color: var(--jd-text-muted); margin: 0; }
.jd-bookembed .jd-booksub:first-of-type { margin-top: 0; padding-inline-end: 34px; }
.jd-bookembed .jd-slotgrid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.jd-bookdone .jd-bookfacts { margin: 14px 0; }

/* ------------------------------------------------ sign-in popups ---
   Log in, create an account, forgotten and new password. Narrower than the
   booking dialog: a sign-in form is two fields, and a wide box around two
   fields reads as something missing. */
.jd-authmodal { width: min(430px, calc(100vw - 24px)); }
.jd-authlang { position: absolute; inset-block-start: 10px; inset-inline-start: 12px; z-index: 2; }
.jd-authmodal .jd-modal-body { padding: 30px 30px 26px; }
.jd-authhead { text-align: center; margin: 0 0 18px; }
.jd-authmark { display: block; margin: 0 auto 10px; width: auto; height: 44px; max-width: 150px; }
.jd-authhead h2 { margin: 0; font-size: 1.45rem; }
.jd-authintro { margin: -6px 0 18px; text-align: center; color: var(--jd-text-muted); font-size: var(--jd-fs-small); }
.jd-authform { margin: 0; }
.jd-authform .jd-field { margin-bottom: 14px; }
.jd-authform input { width: 100%; }
.jd-authaside { margin: -4px 0 16px; text-align: end; font-size: var(--jd-fs-small); }
.jd-authaside a, .jd-authswitch a { color: var(--jd-brass-text); font-weight: 600; }
.jd-authswitch { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--jd-border);
                 text-align: center; font-size: var(--jd-fs-small); color: var(--jd-text-muted); }
.jd-authdone { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px;
               padding: 14px 16px; border-radius: var(--jd-radius-sm);
               background: var(--jd-success-soft); color: var(--jd-success-text); }
.jd-authdone .jd-i { flex: none; margin-top: 2px; }
.jd-auth .jd-error { margin: 0 0 14px; }

/* The page of its own (/login.php visited directly). With the script the
   dialog becomes a real modal over this empty stage; without it, the dialog
   simply sits in the page, centred, and works. :not(:modal) so the modal
   positioning the browser gives a real modal is never overridden. */
.jd-authstage { min-height: 62vh; padding: 48px 16px 64px; }
.jd-authstage > dialog[open]:not(:modal) {
  position: relative; inset: auto; margin: 0 auto; display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .jd-modal[open] { animation: jd-modal-in .18s ease-out; }
  @keyframes jd-modal-in { from { opacity: 0; transform: translateY(8px); } }
}

/* --------------------------------------------------- session packages ---
   Replaces the per-minute rate. A price per minute is a number a visitor
   cannot act on: they only learn what it cost once the call is over. */
.jd-pkgpick { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 4px; }
.jd-pkg {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm);
  padding: 10px 16px; min-width: 116px; background: var(--jd-surface); color: var(--jd-text);
}
.jd-pkg strong { font-size: var(--jd-fs-small); }
.jd-pkg span { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); font-family: var(--jd-font-num); }
.jd-pkg.is-on { border-color: var(--jd-brass); background: var(--jd-brass-soft); }
.jd-pkg.is-on strong, .jd-pkg.is-on span { color: var(--jd-brass-text); }
.jd-pkg:hover { border-color: var(--jd-brass); }

.jd-pkglist { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; max-width: 420px; }
.jd-pkglist li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border-bottom: 1px dashed var(--jd-border-strong); padding-bottom: 7px;
}
.jd-pkglist-name { font-size: var(--jd-fs-small); }
.jd-pkglist-price { font-family: var(--jd-font-num); font-weight: 600; color: var(--jd-heading); }

.jd-pkgtable input { width: 100%; font: inherit; font-size: var(--jd-fs-small);
  padding: 8px 10px; border: 1px solid var(--jd-border-strong);
  border-radius: var(--jd-radius-sm); background: var(--jd-surface); color: var(--jd-text); }
.jd-pkgtable tr.has-error input { border-color: var(--jd-caution-text); }
.jd-pkgtable th { white-space: nowrap; }

/* ----------------------------------------------------------- panchang ---
   Every value here is computed from two longitudes. Nothing on this page was
   written by anyone, so nothing on it can drift from the truth. */
.jd-datenav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.jd-datenav strong { font-size: var(--jd-fs-h3); font-family: var(--jd-font-head); color: var(--jd-heading); }

.jd-panplace { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.jd-sunrow {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.jd-sunrow > div {
  background: var(--jd-surface-alt); border-radius: var(--jd-radius-sm); padding: 12px 14px;
}
.jd-sunrow span { display: block; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-sunrow strong { display: block; font-size: 1.14rem; font-family: var(--jd-font-num); margin-top: 2px; }

.jd-limbs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.jd-limb { border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); padding: 14px 16px; }
.jd-limb-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.jd-limb-label { font-size: var(--jd-fs-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--jd-brass-text); font-weight: 700; }
html[lang="hi"] .jd-limb-label { text-transform: none; letter-spacing: .02em; }
.jd-limb-name { font-size: var(--jd-fs-h3); font-family: var(--jd-font-head); color: var(--jd-heading); }
.jd-limb-ends { margin: 0 0 8px; font-size: var(--jd-fs-small); color: var(--jd-text); font-family: var(--jd-font-num); }
.jd-limb-note { margin: 0; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); line-height: 1.55; }

.jd-suggest {
  list-style: none; margin: 4px 0 0; padding: 4px; max-height: 240px; overflow-y: auto;
  border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm);
  background: var(--jd-surface); box-shadow: var(--jd-shadow-sm);
}
.jd-suggest li { padding: 9px 11px; border-radius: var(--jd-radius-sm); cursor: pointer; font-size: var(--jd-fs-small); }
.jd-suggest li:hover, .jd-suggest li:focus { background: var(--jd-brass-soft); color: var(--jd-brass-text); outline: none; }

/* ------------------------------------------------------- free tools hub - */
.jd-toolgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.jd-toolcard {
  display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: var(--jd-text);
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); padding: 20px 18px;
  box-shadow: var(--jd-shadow-sm); transition: box-shadow .25s ease, border-color .25s ease;
}
.jd-toolcard:hover { box-shadow: var(--jd-shadow); border-color: var(--jd-border-strong); }
.jd-toolcard-ic { color: var(--jd-brass-text); }
.jd-toolcard h2 { font-size: var(--jd-fs-h3); margin: 0; }
.jd-toolcard p { margin: 0; font-size: var(--jd-fs-small); color: var(--jd-text-muted); line-height: 1.6; }
.jd-toolcard-needs {
  margin-top: auto; padding-top: 10px; font-size: var(--jd-fs-micro); color: var(--jd-text-muted);
}

/* -- the landing state of a tool page -------------------------------------
   Same two-column shape as the home hero, because it is the same job: say
   what this one tool does, and put the form that starts it next to the
   saying. A visitor arriving here from a search result has not seen the home
   page and may never see it. */
.jd-toolland { padding: clamp(28px, 4vw, 52px) var(--jd-gutter) clamp(36px, 5vw, 64px); }
/* Two columns, two rows. The copy and the explainer stack down the left; the
   form card occupies the right and spans both rows, which is what gives a
   sticky card something long enough to stick inside. */
.jd-toolland-grid {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 452px);
  grid-template-rows: auto auto;
  align-items: start;
}
.jd-toolland-grid > .jd-toolland-copy { grid-column: 1; grid-row: 1; }
.jd-toolland-grid > .jd-toolland-long { grid-column: 1; grid-row: 2; }
.jd-toolland-grid > .jd-toolland-aside {
  grid-column: 2; grid-row: 1 / span 2;
  /* stretch, so the wrapper is as tall as both rows and the sticky card
     inside it has the whole page to travel. With align-items: start on the
     grid it would otherwise shrink to the card and stick nowhere. */
  align-self: stretch;
}
.jd-toolland-copy h1 { color: var(--jd-heading); margin: 0 0 14px; font-size: var(--jd-fs-h2); }
.jd-toolland-copy .jd-lede { font-size: 1.08rem; color: var(--jd-text); max-width: 58ch; }
.jd-toolland-copy > .jd-muted { font-size: var(--jd-fs-small); max-width: 58ch; }
.jd-toolland-morehead {
  font-size: var(--jd-fs-micro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--jd-brass-text);
  margin: 30px 0 12px; font-family: var(--jd-font-body);
}
.jd-toolland-more { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jd-toolland-more a {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px;
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius-sm); text-decoration: none; color: var(--jd-text);
  transition: border-color .14s, box-shadow .14s;
}
.jd-toolland-more a:hover {
  border-color: var(--jd-brass); box-shadow: var(--jd-shadow-sm); text-decoration: none;
}
.jd-toolland-more .jd-tile-ic { margin-top: 1px; }
.jd-toolland-more strong { display: block; font-size: var(--jd-fs-small); color: var(--jd-heading); }
.jd-toolland-more em {
  display: block; font-style: normal; font-size: var(--jd-fs-micro);
  color: var(--jd-text-muted); line-height: 1.4; margin-top: 2px;
}
@media (max-width: 1040px) {
  .jd-toolland-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
}
@media (max-width: 900px) {
  /* One column, and the explicit placement has to be undone with it. A
     `grid-column: 2` left in place against a single-column template makes the
     browser add an implicit second column, and the form card ends up in it,
     off to the side of a phone screen. The order here is the source order:
     copy, then the form, then the explainer — which is also the order someone
     on a phone wants them, since the form is the point of the page. */
  .jd-toolland-grid { grid-template-columns: 1fr; }
  .jd-toolland-grid > .jd-toolland-copy,
  .jd-toolland-grid > .jd-toolland-long,
  .jd-toolland-grid > .jd-toolland-aside { grid-column: 1; grid-row: auto; }
  .jd-toolland-grid > .jd-toolland-copy  { order: 1; }
  .jd-toolland-grid > .jd-toolland-aside { order: 2; }
  .jd-toolland-grid > .jd-toolland-long  { order: 3; }
  .jd-toolland-copy { max-width: 62ch; }
}

/* -- breadcrumbs ----------------------------------------------------------
   Quiet by design: a trail is orientation, not navigation the page is asking
   you to use. The BreadcrumbList that goes with it is emitted by the same
   helper, so the two cannot disagree. */
.jd-crumbs { margin: 0 0 clamp(16px, 2vw, 26px); }
.jd-crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  list-style: none; margin: 0; padding: 0;
  font-size: var(--jd-fs-micro); color: var(--jd-text-muted);
}
.jd-crumbs li { display: inline-flex; align-items: center; gap: 7px; }
/* The separator is drawn, not typed: a "/" in the markup would be read out
   by a screen reader between every step. */
.jd-crumbs li + li::before {
  content: ""; width: 5px; height: 5px; flex: none;
  border-top: 1px solid var(--jd-border-strong);
  border-right: 1px solid var(--jd-border-strong);
  transform: rotate(45deg);
}
.jd-crumbs a { color: var(--jd-text-muted); text-decoration: none; }
.jd-crumbs a:hover { color: var(--jd-brass-text); text-decoration: underline; }
.jd-crumbs [aria-current] { color: var(--jd-text); font-weight: 600; }

/* -- the explainer and FAQ under a tool landing page -- */
.jd-toolland-long {
  /* One column, not two. It now sits in the left column beside the form card
     rather than across the full width, and two 440px columns of body text with
     a card next to them is three columns of reading on one screen. */
  display: grid; gap: clamp(22px, 3vw, 34px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-top: clamp(38px, 5vw, 64px);
  padding-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--jd-border);
}
.jd-toolland-long h2 {
  font-size: var(--jd-fs-h3); color: var(--jd-heading); margin: 0 0 14px;
}
.jd-toolland-about p { margin: 0 0 14px; color: var(--jd-text); max-width: 62ch; }
.jd-toolland-about p:last-child { margin-bottom: 0; }
/* The plain variant: the landing FAQ carries no number, no icon and no tone
   colour. Those belong to the home page's five-row set, where they help a
   reader keep their place; three rows do not need them. */
.jd-faq-plain li { border-radius: var(--jd-radius-sm); box-shadow: var(--jd-shadow-sm); }
.jd-faq-plain summary {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 13px 15px; gap: 12px;
}
.jd-faq-plain summary b { font-size: var(--jd-fs-small); font-weight: 600; }
.jd-faq-plain details > p {
  margin: 0; padding: 0 15px 15px; font-size: var(--jd-fs-small);
  color: var(--jd-text-muted); line-height: 1.6;
}
@media (max-width: 900px) {
  .jd-toolland-long { grid-template-columns: 1fr; }
}

/* -- Mangal Dosha --------------------------------------------------------
   Deliberately undramatic. No red panel, no badge, no single word in a
   coloured box: that box is the thing that gets screenshotted and sent to a
   family, and this page is built not to supply it. The status colours are
   reserved for the timeline, where they carry a meaning the site defines. */
.jd-mangal-pos {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  margin: 0; font-size: var(--jd-fs-body);
}
.jd-mangal-pos strong {
  display: inline-flex; align-items: center; gap: 7px; color: var(--jd-heading);
}
.jd-mangal-pos .jd-num { font-family: var(--jd-font-num); color: var(--jd-text-muted); }
.jd-mangal-pos span:last-child { color: var(--jd-text-muted); font-size: var(--jd-fs-small); }

.jd-mangal-refs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.jd-mangal-refs li {
  display: grid; align-items: baseline; gap: 4px 14px;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.2fr);
  padding: 11px 14px; border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius-sm); background: var(--jd-surface);
}
/* The brass edge marks "this reading counts it", which is a fact about a
   rule. It is the same weight as the border it replaces, so a row that
   counts does not shout at a row that does not. */
.jd-mangal-refs li.is-counts { border-color: var(--jd-brass); background: var(--jd-brass-soft); }
.jd-mangal-ref { font-weight: 600; color: var(--jd-heading); }
.jd-mangal-house { font-family: var(--jd-font-num); color: var(--jd-text); white-space: nowrap; }
.jd-mangal-verdict { font-size: var(--jd-fs-small); color: var(--jd-text-muted); }
.jd-mangal-ref-sign {
  grid-column: 1 / -1; font-size: var(--jd-fs-micro); color: var(--jd-text-muted);
}
.jd-mangal-summary {
  margin: 0; padding-top: 12px; border-top: 1px solid var(--jd-border);
  font-size: var(--jd-fs-small); color: var(--jd-text);
}

.jd-mangal-exc { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jd-mangal-exc li { display: flex; align-items: flex-start; gap: 11px; }
.jd-mangal-exc-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  background: var(--jd-surface-alt); color: var(--jd-text-muted);
}
.jd-mangal-exc li.is-holds .jd-mangal-exc-ic {
  background: var(--jd-brass-soft); color: var(--jd-brass-text);
}
.jd-mangal-exc strong { display: block; font-size: var(--jd-fs-small); color: var(--jd-text); font-weight: 600; }
.jd-mangal-exc em {
  display: block; font-style: normal; font-size: var(--jd-fs-micro);
  color: var(--jd-text-muted); margin-top: 2px;
}
.jd-mangal-note {
  margin: clamp(18px, 2.5vw, 26px) 0 0; padding: 14px 16px;
  border-inline-start: 3px solid var(--jd-brass);
  background: var(--jd-surface-alt); border-radius: var(--jd-radius-sm);
  font-size: var(--jd-fs-small); color: var(--jd-text); max-width: 70ch;
}
@media (max-width: 620px) {
  .jd-mangal-refs li { grid-template-columns: minmax(0, 1fr) auto; }
  .jd-mangal-verdict { grid-column: 1 / -1; }
}

/* The explainer section follows a full page section on the live tool pages
   (Mangal, Panchang), where both carry their own vertical padding and the
   long-form block adds a margin on top of that. Three gaps stacked left a
   dead band the height of a phone screen. */
.jd-pagesec + .jd-toolland { padding-top: 0; }
.jd-pagesec + .jd-toolland .jd-toolland-long { margin-top: 0; }

/* -- Kaal Sarp ------------------------------------------------------------
   Reuses the Mangal note and summary styles: both pages do the same job, and
   a second set of near-identical rules is a second set to keep in step. */
.jd-ks-axis {
  display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0;
  font-size: var(--jd-fs-body); color: var(--jd-text);
}
.jd-ks-axis span { display: inline-flex; align-items: center; gap: 8px; }
.jd-ks-side {
  display: flex; align-items: baseline; gap: 9px;
  margin: 16px 0 8px; font-size: var(--jd-fs-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--jd-text-muted); font-family: var(--jd-font-body);
}
.jd-ks-side:first-of-type { margin-top: 0; }
.jd-ks-side .jd-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: var(--jd-radius-pill);
  background: var(--jd-surface-alt); color: var(--jd-text);
  font-size: var(--jd-fs-micro); letter-spacing: 0;
}
.jd-ks-side.is-in .jd-num { background: var(--jd-brass-soft); color: var(--jd-brass-text); }
.jd-ks-side.is-axis .jd-num { background: var(--jd-neutral-soft); color: var(--jd-neutral-text); }
.jd-ks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jd-ks-list li {
  display: grid; align-items: baseline; gap: 4px 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  padding: 9px 13px; border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius-sm); background: var(--jd-surface);
  font-size: var(--jd-fs-small);
}
.jd-ks-planet { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--jd-heading); }
.jd-ks-sign { color: var(--jd-text-muted); }
.jd-ks-arc { color: var(--jd-text-muted); white-space: nowrap; font-size: var(--jd-fs-micro); }
.jd-ks-type {
  margin: 0 0 8px; font-family: var(--jd-font-head); font-size: var(--jd-fs-h3);
  color: var(--jd-heading);
}
@media (max-width: 620px) {
  .jd-ks-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .jd-ks-sign { grid-column: 1 / -1; font-size: var(--jd-fs-micro); }
}

/* The form card follows you down a tool landing page.
   The copy column on these pages runs about a thousand pixels — the lede, the
   explainer and the list of the other tools — while the card is 476. Left
   alone it scrolls out of sight a third of the way down, and the thing the
   page exists to get someone to do is no longer on screen.

   Guarded twice. Only from 901px, because below that the grid is one column
   and a sticky card would sit on top of the copy. And only when the window is
   at least 600px tall: 69px of sticky header plus 16px of gap plus a 476px
   card needs 561px, and a sticky element taller than its viewport strands its
   own bottom edge where no amount of scrolling reaches it. */
@media (min-width: 901px) {
  .jd-toolland-aside > .jd-formcard {
    position: sticky;
    /* 69px is the header, measured, and constant across every width where
       this applies — the brand tagline that changes with width sits inside a
       row whose height the brand mark already sets. */
    top: 85px;

    /* There used to be an `and (min-height: 600px)` on the media query, to
       stop a card taller than the window from stranding its own bottom edge
       where no scrolling reaches it. 600px was a number I guessed, and it was
       wrong in the way guessed numbers are: a 1920x1080 laptop at 150%
       display scaling has a CSS viewport about 585px tall, so the rule
       silently did not apply on an ordinary Windows machine — while applying
       perfectly well on the ones I was testing.

       The height is no longer a condition. If the card does not fit, it
       scrolls inside itself, which is the same protection without a cliff
       edge in the middle of the range of real screens. On a window tall
       enough for the card this max-height is larger than the card and
       nothing changes. */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  /* overflow-y clips absolutely positioned children, and the "Free · no
     sign-up" badge overhangs the card's top edge by 12px. Tucked inside the
     card here, with the padding to sit in. Only in this column — the hero
     card keeps its overhang, because nothing clips it there. */
  .jd-toolland-aside > .jd-formcard { padding-top: 34px; }
  .jd-toolland-aside > .jd-formcard > .jd-formcard-badge { top: 12px; }
}

/* The build id in the footer. Deliberately quiet — it is for whoever is
   debugging a deploy, not for the reader. */
.jd-build { opacity: .45; font-family: var(--jd-font-num); font-size: var(--jd-fs-micro); }

/* -- Calculators ----------------------------------------------------------
   Two new pages, one shared shape: the answer somebody searched for, large and
   first, then the table it came out of. The answer block is deliberately not a
   "result card" with a border and a shadow — it is three facts, and dressing
   three facts as a verdict is how a calculator starts to feel like a
   pronouncement.

   Every colour here is a token. No hex below this line, as everywhere else in
   this file; tools/palette_check.py fails the build otherwise. */
.jd-calc-answers {
  display: grid; gap: 14px; margin: 0 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.jd-calc-answer {
  padding: 16px 18px; border-radius: var(--jd-radius);
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  /* A hairline of brass on the leading edge, the same mark the notes use, so
     the three blocks read as one family rather than three cards. */
  border-inline-start: 3px solid var(--jd-brass);
  min-width: 0;
}
.jd-calc-label {
  display: block; font-size: var(--jd-fs-micro); text-transform: uppercase;
  letter-spacing: .06em; color: var(--jd-text-muted); font-weight: 600;
}
.jd-calc-big {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 5px 0 3px; font-family: var(--jd-font-head);
  /* Capped below --jd-fs-h2: "आत्मकारक और दारकारक" and "Purvashadha" are long
     words, and at h2 size the longest of them wrapped to three lines inside a
     210px column. */
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.18;
  color: var(--jd-heading); font-weight: 600;
}
.jd-calc-big .jd-glyph { color: var(--jd-brass); flex: none; }
.jd-calc-sub {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: var(--jd-fs-small); color: var(--jd-text-muted);
}
.jd-calc-sub .jd-glyph { color: var(--jd-brass); }

/* The Sun in two systems. A two-column definition list in all but name; the
   label column is fixed so the two signs line up under each other, which is
   the entire point of showing them together. */
.jd-calc-pair { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.jd-calc-pair li {
  display: grid; grid-template-columns: 13ch minmax(0, 1fr); gap: 4px 16px;
  align-items: baseline; padding: 10px 14px;
  background: var(--jd-surface-alt); border-radius: var(--jd-radius-sm);
}
.jd-calc-pair-k {
  font-size: var(--jd-fs-micro); text-transform: uppercase; letter-spacing: .05em;
  color: var(--jd-text-muted); font-weight: 600;
}
.jd-calc-pair-v strong { font-weight: 600; color: var(--jd-text); }
.jd-calc-pair-v em {
  font-style: normal; color: var(--jd-text-muted);
  font-size: var(--jd-fs-small); margin-inline-start: 8px;
}
@media (max-width: 560px) {
  .jd-calc-pair li { grid-template-columns: minmax(0, 1fr); }
}

/* The karaka and nakshatra tables carry a glyph in the first cell. Baseline
   alignment puts the glyph a couple of pixels low next to the name. */
.jd-calc-table .jd-glyph { color: var(--jd-brass); vertical-align: -2px; }
.jd-calc-table td strong { font-weight: 600; }
.jd-calc-table td .jd-small { margin-inline-start: 5px; }

/* "Where practice differs" — three paragraphs that happen to be a list. The
   marker is a brass rule rather than a bullet, because a bullet in front of a
   four-line paragraph reads as a short item that overran. */
.jd-calc-vary { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.jd-calc-vary li {
  padding-inline-start: 14px; border-inline-start: 2px solid var(--jd-border-strong);
  font-size: var(--jd-fs-small); color: var(--jd-text); max-width: 78ch;
}
.jd-calc-what p { max-width: 74ch; font-size: var(--jd-fs-small); }
.jd-calc-what p:last-child { margin-bottom: 0; }

/* -- Kundli Milan by date -------------------------------------------------
   Two people side by side on one form. The pair collapses to one column well
   before the phone breakpoint, because two birth forms at 600px each is a
   column of 40 characters and nobody fills that in. */
.jd-milan-cols {
  display: grid; gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  margin-bottom: 18px;
}
.jd-milan-col { margin: 0; }
.jd-milanform .jd-btn-block { margin-top: 4px; }

/* The five parts of the day. Radios styled as a row of cards, with the real
   input kept in the DOM and only visually hidden — a custom control that
   cannot be reached by keyboard is worse than an ugly one. */
.jd-windows { display: grid; gap: 7px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.jd-window { position: relative; display: block; cursor: pointer; }
.jd-window input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.jd-window span {
  display: block; padding: 9px 11px; border-radius: var(--jd-radius-sm);
  border: 1px solid var(--jd-border); background: var(--jd-surface);
  transition: border-color .12s ease, background .12s ease;
}
.jd-window strong { display: block; font-size: var(--jd-fs-small); font-weight: 600; color: var(--jd-text); }
.jd-window em {
  display: block; font-style: normal; font-size: var(--jd-fs-micro);
  color: var(--jd-text-muted); margin-top: 1px; font-variant-numeric: tabular-nums;
}
.jd-window input:checked + span {
  border-color: var(--jd-brass); background: var(--jd-brass-soft);
}
.jd-window input:focus-visible + span { outline: 2px solid var(--jd-focus); outline-offset: 2px; }

/* What the visitor typed, echoed above the result. */
.jd-milan-inputs {
  display: grid; gap: 10px 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.jd-milan-inputs strong { display: block; font-weight: 600; color: var(--jd-text); }
.jd-milan-inputs em {
  display: block; font-style: normal; font-size: var(--jd-fs-small);
  color: var(--jd-text-muted); margin-top: 2px;
}
.jd-milan-inputs .jd-hint { grid-column: 1 / -1; margin: 0; }

/* The open question. Brass edge, like the other notes on the site — not a
   caution colour, because an unanswered question is not a warning. */
.jd-milan-open { border-inline-start: 3px solid var(--jd-brass); }
.jd-milan-ask { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--jd-border); }
.jd-milan-ask-q { margin: 0 0 2px; font-size: var(--jd-fs-small); color: var(--jd-text); }
.jd-milan-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Each option is its own form, so the flex row must not stretch them. */
.jd-milan-opt { margin: 0; display: contents; }
.jd-milan-opts .jd-btn { flex: 0 1 auto; }
.jd-milan-opts .jd-btn em {
  font-style: normal; color: var(--jd-text-muted);
  margin-inline-start: 6px; font-weight: 400;
}
.jd-milan-working-note {
  margin: clamp(16px, 2vw, 22px) 0 0; padding: 12px 15px;
  border-inline-start: 3px solid var(--jd-border-strong);
  background: var(--jd-surface-alt); border-radius: var(--jd-radius-sm);
  font-size: var(--jd-fs-small); color: var(--jd-text); max-width: 74ch;
}
.jd-warn .jd-i { vertical-align: -2px; margin-inline-end: 6px; color: var(--jd-brass-text); }

/* -- Love calculator ------------------------------------------------------
   The lean face of Guna Milan: two short columns in, one dial out. Nothing on
   this page is allowed to be bigger than the number. */
.jd-lc-cols {
  display: grid; gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-bottom: 16px;
}
.jd-lc-col { margin: 0; }

/* When they were born.
   Four blocks in an even grid, then "Not sure" across the full width. The
   first version was a single wrapping flex row of five, which fitted four and
   pushed the fifth onto a line of its own — it looked like a bug rather than
   a fifth choice, and a control that looks broken does not get filled in. */
.jd-when {
  display: grid; gap: 6px;
  padding: 5px; border-radius: var(--jd-radius-sm);
  background: var(--jd-surface-alt); border: 1px solid var(--jd-border);
}
.jd-when-grid { display: grid; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jd-when-opt { display: block; cursor: pointer; min-width: 0; }
.jd-when-opt input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.jd-when-opt > span {
  /* Full height, so a label that wraps to two lines ("Early morning") does not
     leave its neighbours short and the row ragged. */
  display: flex; flex-direction: column; justify-content: center;
  height: 100%; text-align: center; padding: 8px 6px;
  border-radius: 7px; background: var(--jd-surface);
  border: 1px solid var(--jd-border);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.jd-when-opt strong {
  display: block; font-size: var(--jd-fs-micro); font-weight: 600;
  color: var(--jd-text); line-height: 1.25;
}
.jd-when-opt em {
  display: block; font-style: normal; margin-top: 2px;
  font-size: .68rem; color: var(--jd-text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.jd-when-opt input:checked + span {
  background: var(--jd-brass); border-color: var(--jd-brass);
}
.jd-when-opt input:checked + span strong,
.jd-when-opt input:checked + span em { color: var(--jd-text-on-dark); }
.jd-when-opt input:focus-visible + span { outline: 2px solid var(--jd-focus); outline-offset: 2px; }
.jd-when-unsure > span { padding: 7px 6px; }
.jd-when-unsure strong { color: var(--jd-text-muted); }
@media (max-width: 1080px) and (min-width: 861px) {
  /* The two columns are at their narrowest here, so four across stops fitting. */
  .jd-when-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .jd-when-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The two names, above the dial. */
.jd-lc-pair {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px; margin: 0 0 2px;
  font-family: var(--jd-font-head); font-size: var(--jd-fs-h3);
  color: var(--jd-heading); font-weight: 600;
}
.jd-lc-pair i { display: inline-flex; color: var(--jd-brass); }

/* The dial. */
.jd-lc-result { text-align: center; margin: 6px 0 0; }
.jd-gauge { display: block; width: min(100%, 360px); height: auto; margin: 0 auto; }
.jd-gauge-track  { stroke: var(--jd-border); }
.jd-gauge-band   { stroke: var(--jd-brass-soft); }
.jd-gauge-fill   { stroke: var(--jd-brass); }
.jd-gauge-tick   { stroke: var(--jd-border-strong); }
.jd-gauge-needle { stroke: var(--jd-heading); }
.jd-gauge-hub    { fill: var(--jd-heading); }
.jd-gauge-num {
  font-family: var(--jd-font-num); font-variant-numeric: tabular-nums;
  font-size: 46px; font-weight: 700; fill: var(--jd-heading);
}
.jd-gauge-end {
  font-family: var(--jd-font-num); font-size: 12px; fill: var(--jd-text-muted);
}
.jd-lc-outof {
  margin: 2px 0 0; font-size: var(--jd-fs-small); color: var(--jd-text-muted);
}
.jd-lc-open {
  margin: 12px auto 0; max-width: 46ch;
  font-size: var(--jd-fs-small); color: var(--jd-text);
}
.jd-lc-ask {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 7px; margin-top: 8px;
  font-size: var(--jd-fs-small); color: var(--jd-text-muted);
}
.jd-lc-opt { margin: 0; display: contents; }
.jd-lc-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 9px;
  margin: clamp(18px, 2.5vw, 26px) 0 0;
}
.jd-lc-hint { margin: 0 0 12px; text-align: center; }
.jd-lc-faq { margin-top: clamp(22px, 3vw, 34px); }
@media (max-width: 480px) {
  .jd-gauge-num { font-size: 52px; }
}
/* The hand-off form to the Milan page sits in the button row, so it must not
   introduce a block-level break between the two buttons. */
.jd-lc-hand { margin: 0; display: contents; }

/* The love-calculator result, shown over the form.
   The dialog carries `open` from the server, so it must look right both as a
   modal and — with no script, or no <dialog> support — as a block sitting in
   the page. These rules have to hold in both states. */
.jd-lc-modal {
  width: min(94vw, 460px); text-align: center;
  padding: clamp(20px, 3vw, 30px) clamp(16px, 3vw, 28px) clamp(18px, 2.5vw, 24px);
}
.jd-lc-modal .jd-lc-result { margin: 0; }
/* Not a modal (no script): it sits in the flow, so it needs its own framing
   and must not be pinned or centred over anything. */
.jd-lc-modal:not(:modal) {
  margin: 0 auto clamp(18px, 2.5vw, 26px);
  position: static; border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); background: var(--jd-surface);
  box-shadow: var(--jd-shadow-sm);
}

/* The refinement, offered under the answer rather than in front of it. */
.jd-lc-sharpen {
  margin: 14px 0 8px; font-size: var(--jd-fs-small); color: var(--jd-text);
}
.jd-lc-q { margin-bottom: 14px; }
.jd-lc-qtext { margin: 0 0 8px; font-size: var(--jd-fs-small); color: var(--jd-text); }
.jd-lc-opts { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }


/* ======================================================================
   Blog — index, article, cards, the subscribe box, and its admin screens.
   Every colour is a token; nothing here names a hex value.
   ====================================================================== */
.jd-section-title { font-size: var(--jd-fs-h2); margin: 0 0 22px; }

.jd-blogindex { padding-block: clamp(22px, 4vw, 44px) clamp(40px, 6vw, 72px); }
.jd-bloghead { max-width: 62ch; margin: 10px 0 clamp(22px, 4vw, 36px); }
.jd-bloghead h1 { font-size: var(--jd-fs-hero); margin: 0 0 10px; }
.jd-blogempty {
  background: var(--jd-surface-alt); border: 1px dashed var(--jd-border-strong);
  border-radius: var(--jd-radius); padding: 22px; color: var(--jd-text-muted); margin: 0 0 28px;
}

.jd-postgrid {
  display: grid; gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  margin-bottom: clamp(26px, 4vw, 40px);
}
.jd-postcard {
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); overflow: hidden; min-width: 0;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.jd-postcard:hover { box-shadow: var(--jd-shadow); transform: translateY(-2px); border-color: var(--jd-border-strong); }
.jd-postcard-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.jd-postcard-link:hover { color: inherit; }
.jd-postcard-link:focus-visible { outline: 3px solid var(--jd-focus); outline-offset: -3px; }
.jd-postcard-img { display: block; aspect-ratio: 1200 / 630; background: var(--jd-surface-alt); overflow: hidden; }
.jd-postcard-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jd-postcard-noimg {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: var(--jd-brass-text); background: var(--jd-brass-soft);
}
.jd-postcard-meta { display: block; padding: 16px 18px 0; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); letter-spacing: .02em; }
.jd-postcard-title { font-size: var(--jd-fs-h3); line-height: 1.3; margin: 6px 18px 8px; color: var(--jd-heading); overflow-wrap: anywhere; }
.jd-postcard-excerpt { display: block; padding: 0 18px 20px; font-size: var(--jd-fs-small); color: var(--jd-text-muted); line-height: 1.55; }


/* -- one article -- */
.jd-post { max-width: 760px; padding-block: clamp(22px, 4vw, 44px) clamp(40px, 6vw, 64px); }
.jd-posthead { margin: 10px 0 clamp(18px, 3vw, 28px); }
.jd-posthead h1 { font-size: var(--jd-fs-hero); line-height: 1.15; margin: 6px 0 12px; overflow-wrap: anywhere; }
.jd-postmeta { font-size: var(--jd-fs-small); color: var(--jd-text-muted); margin: 0; }
.jd-postcover { margin: 0 0 clamp(20px, 3vw, 32px); }
.jd-postcover img { display: block; width: 100%; height: auto; border-radius: var(--jd-radius); background: var(--jd-surface-alt); }

.jd-prose { font-size: 1.075rem; line-height: 1.75; color: var(--jd-text); }
.jd-prose > * { margin: 0 0 1.05em; }
.jd-prose h2 { font-size: var(--jd-fs-h2); line-height: 1.25; margin: 1.7em 0 .55em; scroll-margin-top: 90px; }
.jd-prose h3 { font-size: var(--jd-fs-h3); line-height: 1.3; margin: 1.4em 0 .45em; scroll-margin-top: 90px; }
.jd-prose ul, .jd-prose ol { padding-left: 1.4em; }
.jd-prose li { margin: 0 0 .4em; }
.jd-prose li::marker { color: var(--jd-brass-text); }
.jd-prose a { color: var(--jd-azure); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.jd-prose blockquote {
  border-left: 3px solid var(--jd-brass); background: var(--jd-brass-soft);
  margin-inline: 0; padding: 14px 18px; border-radius: 0 var(--jd-radius-sm) var(--jd-radius-sm) 0;
}
.jd-prose blockquote p { margin: 0; }
.jd-prose code {
  font-size: .9em; background: var(--jd-surface-alt); border: 1px solid var(--jd-border);
  border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere;
}
.jd-tablescroll { overflow-x: auto; margin: 0 0 1.05em; border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); }
.jd-prose table { border-collapse: collapse; width: 100%; font-size: .95em; line-height: 1.5; }
.jd-prose th, .jd-prose td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--jd-border); vertical-align: top; }
.jd-prose th { background: var(--jd-surface-alt); font-weight: 600; color: var(--jd-heading); }
.jd-prose tbody tr:last-child td { border-bottom: 0; }
.jd-prose hr { border: 0; border-top: 1px solid var(--jd-border); margin: 2em 0; }
.jd-postdisclaimer { border-top: 1px solid var(--jd-border); padding-top: 16px; margin-top: 30px; }
.jd-postcta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  background: var(--jd-ink); color: var(--jd-text-on-dark);
  border-radius: var(--jd-radius); padding: clamp(18px, 3vw, 26px); margin: 26px 0;
}
.jd-postcta p { margin: 0; flex: 1 1 280px; color: var(--jd-text-on-dark); }

/* -- subscribe box -- */
.jd-subbox {
  display: grid; gap: 14px 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center;
  background: var(--jd-surface-alt); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius); padding: clamp(18px, 3vw, 28px); margin: 26px 0 0;
}
.jd-subbox-copy h2 { font-size: var(--jd-fs-h3); margin: 0 0 6px; }
.jd-subbox-copy p { margin: 0; color: var(--jd-text-muted); font-size: var(--jd-fs-small); }
.jd-subform { display: flex; gap: 10px; min-width: 0; }
.jd-subform input[type=email] {
  flex: 1 1 auto; min-width: 0; font: inherit; padding: 11px 14px;
  border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm);
  background: var(--jd-surface); color: var(--jd-text);
}
.jd-subform input[type=email]:focus { outline: 3px solid var(--jd-focus); outline-offset: 1px; border-color: var(--jd-brass); }
.jd-subform .jd-btn { flex: 0 0 auto; }
.jd-subbox-note { grid-column: 1 / -1; margin: 0; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
/* The honeypot: off-screen rather than display:none, which some bots check for. */
.jd-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 720px) {
  .jd-subbox { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .jd-subform { flex-direction: column; }
  .jd-subform .jd-btn { width: 100%; justify-content: center; }
}

/* -- home page strip, just above the closing band -- */
.jd-homeblog-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 22px; }
.jd-homeblog-head .jd-section-title { margin: 0; }
.jd-homeblog-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--jd-brass-text); }
.jd-homeblog-all:hover { text-decoration: underline; }
.jd-homeblog .jd-postgrid { margin-bottom: 0; }
/* The home strip: four across on a wide screen, two on a tablet, one on a
   phone. Fixed columns rather than auto-fill, so four articles always sit in
   one row at desktop width instead of wrapping to three and one. */
.jd-postgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.jd-postgrid-4 .jd-postcard-title { font-size: 1.12rem; margin-inline: 16px; }
.jd-postgrid-4 .jd-postcard-meta { padding-inline: 16px; }
.jd-postgrid-4 .jd-postcard-excerpt { padding-inline: 16px; }
.jd-postgrid-4 .jd-postcard-title,
.jd-postgrid-4 .jd-postcard-excerpt { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.jd-postgrid-4 .jd-postcard-title { -webkit-line-clamp: 3; }
.jd-postgrid-4 .jd-postcard-excerpt { -webkit-line-clamp: 3; padding-bottom: 0; margin-bottom: 18px; }
@media (max-width: 1080px) { .jd-postgrid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .jd-postgrid-4 { grid-template-columns: minmax(0, 1fr); } }

/* -- subscribe / confirm / unsubscribe pages -- */
.jd-substate { text-align: center; padding-block: clamp(36px, 7vw, 80px); }
.jd-substate .jd-lede { margin-inline: auto; max-width: 52ch; }
.jd-substate form { margin: 20px 0 0; }
.jd-substate-icon {
  display: inline-grid; place-items: center; width: 64px; height: 64px; margin: 0 0 14px;
  border-radius: 50%; background: var(--jd-success-soft); color: var(--jd-success-text);
}
.jd-subnav { margin: 28px 0 0; font-size: var(--jd-fs-small); }

/* -- admin: blog -- */
.jd-bloghead-admin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.jd-bloghead-admin .jd-lede { margin: 0; flex: 1 1 320px; }
/* the article list: one numbered block per article, its translations inside it */
.jd-postcount { margin: -8px 0 10px; }
.jd-posttable { border-collapse: collapse; width: 100%; }
.jd-posttable tbody.jd-postgroup + tbody.jd-postgroup { border-top: 1px solid var(--jd-border-strong); }
.jd-posttable .jd-postgroup td { border-bottom: 0; }
.jd-posttable .jd-post-main td { padding-top: 14px; }
.jd-posttable .jd-post-tr td { padding-top: 4px; }
.jd-posttable .jd-postgroup tr:last-child td { padding-bottom: 14px; }
.jd-posttable .jd-post-tr td:not(.jd-postno):first-of-type,
.jd-posttable .jd-post-tr:not(.jd-post-missing) td:nth-child(1) { padding-inline-start: 26px; position: relative; }
.jd-posttable .jd-post-tr:not(.jd-post-missing) td:nth-child(1)::before {
  content: ""; position: absolute; inset-inline-start: 12px; top: 4px; width: 8px; height: 12px;
  border-inline-start: 1px solid var(--jd-border-strong); border-bottom: 1px solid var(--jd-border-strong);
}
.jd-posttable th.jd-postno, .jd-posttable td.jd-postno { width: 1%; text-align: center; padding-inline: 10px; }
.jd-posttable td.jd-postno {
  font-weight: 700; color: var(--jd-brass-text); font-variant-numeric: tabular-nums;
  border-inline-end: 1px solid var(--jd-border);
}
.jd-langtag {
  display: inline-block; margin-inline-end: 6px; padding: 1px 8px; border-radius: var(--jd-radius-pill);
  background: var(--jd-surface-alt); border: 1px solid var(--jd-border); color: var(--jd-text-muted);
  font-size: var(--jd-fs-micro); font-weight: 600; vertical-align: 2px;
}
.jd-post-missing a { font-size: var(--jd-fs-small); }
.jd-nowrap { white-space: nowrap; }
.jd-adminback { font-size: var(--jd-fs-small); margin: 0 0 16px; }
.jd-lintbox ul { margin: 8px 0 0; padding-left: 1.2em; }
.jd-lintbox li { margin-bottom: 4px; }
.jd-mdarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; line-height: 1.6; min-height: 420px; resize: vertical; }
.jd-mdhelp { margin-top: 10px; font-size: var(--jd-fs-small); background: var(--jd-surface-alt); border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); padding: 10px 14px; }
.jd-mdhelp summary { cursor: pointer; font-weight: 600; }
.jd-mdhelp table { margin-top: 10px; border-collapse: collapse; width: 100%; }
.jd-mdhelp td { padding: 4px 8px; border-top: 1px solid var(--jd-border); vertical-align: top; }
.jd-mdhelp code { white-space: pre-wrap; }
.jd-coverprev { display: block; width: 100%; max-width: 420px; height: auto; border-radius: var(--jd-radius-sm); border: 1px solid var(--jd-border); margin-bottom: 14px; }
.jd-count { font-variant-numeric: tabular-nums; }
.jd-count.is-over { color: var(--jd-caution-text); font-weight: 600; }
.jd-inlineform { display: inline; margin: 0; }
.jd-sendpanel { margin-top: 28px; max-width: 880px; }
.jd-sendpanel h2 { font-size: var(--jd-fs-h3); }
.jd-dangerzone { max-width: 880px; }
.jd-audience { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 16px; }
.jd-sendbar { height: 10px; border-radius: var(--jd-radius-pill); background: var(--jd-surface-alt); border: 1px solid var(--jd-border); overflow: hidden; }
.jd-sendbar > span { display: block; height: 100%; background: var(--jd-brass); }
.jd-sendcount { font-size: var(--jd-fs-small); color: var(--jd-text-muted); margin: 8px 0 14px; }
.jd-sendactions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.jd-sendactions .jd-ok { margin: 0; }
.jd-dangerzone { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--jd-border); }


/* ---------------------------------------------------- blog index layout
   Hero band, then a main column (featured article, rows, numbered pages)
   beside a sidebar (topics with counts, most-read, subscribe). */
.jd-bloghero {
  background: var(--jd-surface-alt); border-bottom: 1px solid var(--jd-border);
  padding: clamp(18px, 3vw, 30px) 0 clamp(26px, 4vw, 44px);
}
.jd-bloghero h1 { font-size: var(--jd-fs-hero); line-height: 1.1; margin: 12px 0 10px; overflow-wrap: anywhere; }
.jd-bloghero h1 em { font-style: italic; color: var(--jd-brass-text); }
.jd-bloghero .jd-lede { max-width: 60ch; margin: 0; }
.jd-bloghero-kicker { margin: 14px 0 0; font-size: var(--jd-fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jd-brass-text); }

.jd-bloglayout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 3.5vw, 44px); align-items: start;
  padding-block: clamp(24px, 4vw, 44px) clamp(40px, 6vw, 72px);
}
@media (max-width: 960px) { .jd-bloglayout { grid-template-columns: minmax(0, 1fr); } }
.jd-blogmain { min-width: 0; }

.jd-postcat {
  display: inline-block; font-size: var(--jd-fs-micro); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--jd-brass-text); text-decoration: none;
  background: var(--jd-brass-soft); border: 1px solid var(--jd-brass); border-radius: var(--jd-radius-sm);
  padding: 4px 10px; line-height: 1.3; align-self: flex-start;
}
a.jd-postcat:hover { text-decoration: underline; }
.jd-postcard .jd-postcat { margin: 16px 18px 0; }
.jd-postcard .jd-postcat + .jd-postcard-meta { padding-top: 4px; }
.jd-postgrid-4 .jd-postcard .jd-postcat { margin-inline: 16px; }
.jd-postmeta .jd-postcat { margin-right: 10px; }
.jd-postmetaline { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--jd-fs-small); color: var(--jd-text-muted); }
.jd-postmetaline > span { display: inline-flex; align-items: center; gap: 6px; }
.jd-postmetaline svg { color: var(--jd-brass-text); flex: 0 0 auto; }
.jd-postthumb-none { display: grid; place-items: center; color: var(--jd-brass-text); background: var(--jd-brass-soft); }

/* featured */
.jd-postfeature {
  background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius);
  overflow: hidden; margin-bottom: clamp(18px, 2.4vw, 26px); transition: box-shadow .15s, border-color .15s;
}
.jd-postfeature:hover { box-shadow: var(--jd-shadow); border-color: var(--jd-border-strong); }
.jd-postfeature-link { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); color: inherit; text-decoration: none; }
.jd-postfeature-link:hover { color: inherit; }
.jd-postfeature-link:focus-visible { outline: 3px solid var(--jd-focus); outline-offset: -3px; }
/* Width from the column, height from the row. aspect-ratio here would size
   the box from the row's height instead and push it over the text. */
.jd-postfeature-img { display: block; width: 100%; height: 100%; min-height: 300px; overflow: hidden; background: var(--jd-surface-alt); }
.jd-postfeature-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jd-postfeature-body { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2.6vw, 30px); justify-content: center; min-width: 0; }
.jd-postlabels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.jd-postbadge {
  display: inline-block; background: var(--jd-brass); color: var(--jd-text);
  font-size: var(--jd-fs-micro); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-radius: var(--jd-radius-pill); padding: 3px 10px;
}
.jd-postfeature-title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.22; margin: 0; color: var(--jd-heading); overflow-wrap: anywhere; }
.jd-postfeature-excerpt { display: block; color: var(--jd-text-muted); font-size: var(--jd-fs-small); line-height: 1.6; }
.jd-postfeature-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--jd-brass-text); margin-top: 4px; }
@media (max-width: 720px) {
  .jd-postfeature-link { grid-template-columns: minmax(0, 1fr); }
  .jd-postfeature-img { height: auto; min-height: 0; aspect-ratio: 1200 / 630; }
}

/* the grid under the featured article: three across beside the sidebar */
.jd-postlist {
  display: grid; gap: clamp(14px, 1.8vw, 22px); margin-bottom: clamp(26px, 3.5vw, 38px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1180px) and (min-width: 961px) { .jd-postlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .jd-postlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .jd-postlist { grid-template-columns: minmax(0, 1fr); } }
.jd-postrow {
  background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius);
  overflow: hidden; transition: box-shadow .15s, border-color .15s, transform .15s; min-width: 0;
}
.jd-postrow:hover { box-shadow: var(--jd-shadow); border-color: var(--jd-border-strong); transform: translateY(-2px); }
.jd-postrow-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.jd-postrow-link:hover { color: inherit; }
.jd-postrow-link:focus-visible { outline: 3px solid var(--jd-focus); outline-offset: -3px; }
.jd-postrow-img { display: block; width: 100%; aspect-ratio: 1200 / 630; overflow: hidden; background: var(--jd-surface-alt); }
.jd-postrow-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jd-postrow-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px 18px; flex: 1; min-width: 0; }
.jd-postrow-title {
  font-size: 1.08rem; line-height: 1.32; margin: 0; color: var(--jd-heading); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.jd-postrow .jd-postmetaline { margin-top: auto; padding-top: 4px; }

/* numbered pages */
.jd-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; }
.jd-pager-num, .jd-pager-step {
  display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px;
  border-radius: var(--jd-radius); border: 1px solid var(--jd-border-strong); background: var(--jd-surface);
  color: var(--jd-text); text-decoration: none; font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
a.jd-pager-num:hover, .jd-pager-step:hover { border-color: var(--jd-brass); color: var(--jd-brass-text); }
.jd-pager-num.is-on { background: var(--jd-brass-text); border-color: var(--jd-brass-text); color: var(--jd-surface); }
.jd-pager-gap { color: var(--jd-text-muted); padding: 0 2px; }

/* sidebar */
.jd-blogside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.jd-sidebox { background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 18px 20px; }
.jd-sidebox h2 {
  font-size: var(--jd-fs-h3); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--jd-brass);
  display: inline-block;
}
.jd-topiclist { list-style: none; margin: 0; padding: 0; }
.jd-topiclist li + li { border-top: 1px solid var(--jd-border); }
.jd-topiclist a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 2px; color: var(--jd-text); text-decoration: none; font-size: var(--jd-fs-small);
}
.jd-topiclist a:hover, .jd-topiclist a[aria-current] { color: var(--jd-brass-text); }
.jd-topiclist a[aria-current] { font-weight: 700; }
.jd-topiccount {
  min-width: 28px; text-align: center; font-size: var(--jd-fs-micro); font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--jd-brass-soft); color: var(--jd-brass-text); border-radius: var(--jd-radius-pill); padding: 2px 8px;
}
.jd-poplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.jd-poplist a { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.jd-poplist a:hover .jd-pop-title { color: var(--jd-brass-text); }
.jd-pop-img { display: block; aspect-ratio: 4 / 3; border-radius: var(--jd-radius-sm); overflow: hidden; background: var(--jd-surface-alt); }
.jd-pop-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jd-pop-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jd-pop-title {
  font-size: var(--jd-fs-small); font-weight: 600; line-height: 1.35; color: var(--jd-heading);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.jd-pop-date { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-blogside .jd-subbox { grid-template-columns: minmax(0, 1fr); margin: 0; padding: 20px; background: var(--jd-brass-soft); border-color: var(--jd-border); }
.jd-blogside .jd-subbox-copy h2 { font-size: var(--jd-fs-h3); }
.jd-blogside .jd-subform { flex-direction: column; }
.jd-blogside .jd-subform .jd-btn { width: 100%; justify-content: center; }
/* An article with no cover: the placeholder icon sits in the middle of the
   picture area. Placed last so it wins over each box's display:block. */
.jd-postrow-img.jd-postthumb-none, .jd-postfeature-img.jd-postthumb-none, .jd-pop-img.jd-postthumb-none {
  display: grid; place-items: center; color: var(--jd-brass-text); background: var(--jd-brass-soft);
}

/* ======================================================================
   Daily rashifal — home page section and /horoscope.php
   ====================================================================== */
.jd-hs { background: linear-gradient(180deg, var(--jd-brass-soft), var(--jd-bg) 70%); }
.jd-hs-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: clamp(18px, 3vw, 30px); }
.jd-hs-head h2, .jd-hs-head h1 { font-size: var(--jd-fs-hero); line-height: 1.08; margin: 6px 0 10px; }
.jd-hs-head h2 em, .jd-hs-head h1 em { font-style: normal; color: var(--jd-brass-text); }
.jd-hs-head .jd-lede { margin: 0; max-width: 56ch; }
.jd-hs-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-size: var(--jd-fs-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--jd-brass-text);
}
.jd-hs-kicker::before, .jd-hs-kicker::after { content: ""; width: 26px; height: 1px; background: var(--jd-brass); }
.jd-hs-page .jd-crumbs { margin-bottom: 14px; }

.jd-hs-tabs {
  display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--jd-radius-pill);
  background: var(--jd-surface); border: 1px solid var(--jd-border); box-shadow: var(--jd-shadow-sm);
}
.jd-hs-tabs a {
  padding: 9px 20px; border-radius: var(--jd-radius-pill); text-decoration: none; color: var(--jd-text);
  font-weight: 600; font-size: var(--jd-fs-small); white-space: nowrap;
}
.jd-hs-tabs a:hover { color: var(--jd-brass-text); }
.jd-hs-tabs a[aria-current] { background: var(--jd-brass-text); color: var(--jd-surface); }

/* the twelve rashis */
.jd-hs-picker {
  list-style: none; margin: 0 0 22px; padding: 6px 2px 14px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px;
}
.jd-hs-picker li { min-width: 0; }
.jd-hs-picker a {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 8px;
  text-decoration: none; color: var(--jd-text); border-radius: var(--jd-radius); transition: background .15s;
}
.jd-hs-picker a:hover { background: var(--jd-surface); }
.jd-hs-picker img {
  width: 64px; height: 64px; border-radius: 50%; display: block; margin-bottom: 4px;
  box-shadow: 0 0 0 2px var(--jd-brass), 0 0 0 5px var(--jd-surface), 0 0 0 6px var(--jd-border);
  transition: transform .15s, box-shadow .15s;
}
.jd-hs-picker a:hover img { transform: translateY(-2px); }
.jd-hs-pn { font-size: var(--jd-fs-small); font-weight: 600; text-align: center; line-height: 1.2; }
.jd-hs-ps { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); text-align: center; }
.jd-hs-picker a[aria-current] { background: var(--jd-surface); box-shadow: var(--jd-shadow-sm); }
.jd-hs-picker a[aria-current] img { box-shadow: 0 0 0 3px var(--jd-heading), 0 0 0 6px var(--jd-surface), 0 0 0 8px var(--jd-brass); }
.jd-hs-picker a[aria-current] .jd-hs-pn { color: var(--jd-heading); font-weight: 700; }
.jd-hs-picker a[aria-current]::after {
  content: ""; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--jd-brass); border-bottom: 0;
}
@media (max-width: 1100px) {
  /* A strip that scrolls on its own; the page itself never scrolls sideways. */
  .jd-hs-picker { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 6px; padding-inline: 4px; scrollbar-width: thin; }
  .jd-hs-picker li { flex: 0 0 86px; scroll-snap-align: start; }
}

/* the card */
.jd-hs-panel { transition: opacity .15s; }
.jd-hs-panel.is-loading { opacity: .45; }
.jd-hs-card {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) 340px; gap: clamp(18px, 2.6vw, 34px); align-items: stretch;
  background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: calc(var(--jd-radius) * 1.5);
  box-shadow: var(--jd-shadow); padding: clamp(18px, 2.6vw, 32px);
}
.jd-hs-art { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 6px; min-width: 0; }
.jd-hs-facts2 {
  position: relative; width: 100%; box-sizing: border-box; padding: 16px 16px 12px;
  background: var(--jd-brass-soft); border: 1px solid var(--jd-border); border-radius: var(--jd-radius);
}
.jd-hs-facts2::before {                  /* a small ornament joining the picture to the box */
  content: ""; position: absolute; top: -12px; left: 50%; width: 1px; height: 12px; background: var(--jd-brass);
}
.jd-hs-facts2-title {
  display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-weight: 700; color: var(--jd-heading);
  font-family: var(--jd-font-head); font-size: 1.02rem;
}
.jd-hs-facts2-title svg { color: var(--jd-brass-text); }
.jd-hs-facts2 dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.jd-hs-facts2 dl > .jd-hs-naks, .jd-hs-facts2 dl > .jd-hs-wide { grid-column: 1 / -1; }
.jd-hs-facts2 dd { overflow-wrap: anywhere; }
.jd-hs-facts2 dl > div { padding: 7px 0; border-top: 1px dashed var(--jd-border-strong); }
.jd-hs-facts2 dt { display: flex; align-items: center; gap: 6px; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.jd-hs-facts2 dt svg { color: var(--jd-brass-text); flex: 0 0 auto; }
.jd-hs-facts2 dd { margin: 2px 0 0; font-size: var(--jd-fs-small); font-weight: 600; line-height: 1.4; }
.jd-hs-naks dd { font-weight: 500; }
.jd-hs-art img {
  width: 196px; height: 196px; border-radius: 50%; display: block;
  box-shadow: 0 0 0 3px var(--jd-brass), 0 0 0 10px var(--jd-brass-soft), 0 0 0 11px var(--jd-brass);
}
.jd-hs-main { min-width: 0; }
.jd-hs-namerow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.jd-hs-name { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.1; margin: 0; color: var(--jd-heading); }
.jd-hs-name span { font-size: .55em; font-weight: 600; color: var(--jd-brass-text); margin-left: 8px; font-family: var(--jd-font-body); }
.jd-hs-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--jd-radius-pill);
  border: 1px solid var(--jd-border-strong); background: var(--jd-brass-soft); font-size: var(--jd-fs-small); font-weight: 600;
}
.jd-hs-chip svg { color: var(--jd-brass-text); }
.jd-hs-rashinote { font-size: var(--jd-fs-small); color: var(--jd-text-muted); margin: 8px 0 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--jd-border-strong); }
.jd-hs-rashinote a { color: var(--jd-brass-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.jd-hs-rashinote a:hover { text-decoration: underline; }
.jd-hs-lead { font-weight: 700; color: var(--jd-heading); margin: 0 0 6px; font-size: 1.05rem; }
.jd-hs-text { font-size: 1.05rem; line-height: 1.65; margin: 0 0 10px; }
.jd-hs-shift { font-size: var(--jd-fs-small); color: var(--jd-text-muted); }
.jd-hs-facts { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 16px 0 20px; }
.jd-hs-facts > div { display: flex; align-items: center; gap: 10px; padding: 0 20px; border-left: 1px solid var(--jd-border); }
.jd-hs-facts > div:first-child { padding-left: 0; border-left: 0; }
.jd-hs-facts svg { color: var(--jd-brass-text); flex: 0 0 auto; }
.jd-hs-facts span { display: flex; flex-direction: column; }
.jd-hs-facts small { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-hs-facts strong { font-size: var(--jd-fs-small); }
.jd-hs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.jd-hs-actions .jd-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; font-size: var(--jd-fs-small); }
.jd-hs-sub { font-size: var(--jd-fs-small); text-transform: uppercase; letter-spacing: .08em; color: var(--jd-brass-text); margin: 16px 0 6px; }
.jd-hs-list { margin: 0; padding-left: 1.1em; font-size: var(--jd-fs-small); line-height: 1.7; }
.jd-hs-list a { color: var(--jd-brass-text); font-weight: 600; }
.jd-hs-when { font-weight: 700; margin-right: 6px; }
.jd-hs-week { list-style: none; margin: 8px 0 8px; padding: 0; }
.jd-hs-week li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--jd-border); font-size: var(--jd-fs-small); }
.jd-hs-wdate { font-weight: 700; }
.jd-hs-wparts { display: flex; flex-wrap: wrap; gap: 6px; }
.jd-hs-wpart { padding: 2px 10px; border-radius: var(--jd-radius-pill); }
.jd-hs-wpart.is-good, .jd-hs-pill.is-good { background: var(--jd-success-soft); color: var(--jd-success-text); }
.jd-hs-wpart.is-less, .jd-hs-pill.is-less { background: var(--jd-mixed-soft); color: var(--jd-mixed-text); }
.jd-hs-note { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); margin: 8px 0 0; line-height: 1.5; }

/* "This week in brief" on the week tab (the same lines head the Monday email) */
.jd-hs-brief { background: var(--jd-brass-soft); border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); padding: 4px 16px 12px; margin: 0 0 16px; }
.jd-hs-brief .jd-hs-sub { margin-top: 12px; }
.jd-hs-brief ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.jd-hs-brief li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: var(--jd-fs-small); line-height: 1.55; }
.jd-hs-brief li > span:first-child { color: var(--jd-brass-text); padding-top: 2px; }
.jd-hs-brief li.is-ch > span:first-child { color: var(--jd-mixed-text); }

/* the weekly rashifal sign-up, under the horoscope */
.jd-rsbox { margin-top: clamp(18px, 3vw, 28px); }
.jd-rsbox h2 { display: flex; align-items: center; gap: 8px; }
.jd-rsbox h2 svg { color: var(--jd-brass-text); flex: 0 0 auto; }
.jd-rsform select {
  flex: 0 1 auto; min-width: 0; max-width: 42%; font: inherit; padding: 11px 10px;
  border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm);
  background: var(--jd-surface); color: var(--jd-text);
}
.jd-rsform select:focus { outline: 3px solid var(--jd-focus); outline-offset: 1px; border-color: var(--jd-brass); }
@media (max-width: 560px) {
  .jd-rsform { flex-wrap: wrap; }
  .jd-rsform select { max-width: none; flex: 1 1 100%; }
}
.jd-rsadmin { margin-bottom: 24px; }
.jd-rsadmin h2 { font-size: var(--jd-fs-h3); margin: 0 0 8px; }
.jd-rsadmin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0 0; }
.jd-rsadmin-row select { font: inherit; padding: 6px 8px; margin-left: 6px; }

/* at a glance */
.jd-hs-glance { background: var(--jd-surface-alt); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 18px 20px; min-width: 0; }
.jd-hs-glance h4 { font-size: var(--jd-fs-h3); margin: 0 0 12px; color: var(--jd-heading); }
.jd-hs-meter { height: 10px; border-radius: var(--jd-radius-pill); background: var(--jd-border); overflow: hidden; }
.jd-hs-meter span { display: block; height: 100%; background: var(--jd-success); border-radius: inherit; }
.jd-hs-meternote { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); margin: 6px 0 10px; }
.jd-hs-grahas { list-style: none; margin: 0; padding: 0; }
.jd-hs-grahas li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--jd-border); font-size: var(--jd-fs-small); }
.jd-hs-g { font-weight: 600; }
.jd-hs-g small { font-weight: 500; color: var(--jd-text-muted); }
.jd-hs-h { color: var(--jd-text-muted); font-variant-numeric: tabular-nums; }
.jd-hs-pill { font-size: var(--jd-fs-micro); font-weight: 700; padding: 3px 9px; border-radius: var(--jd-radius-pill); white-space: nowrap; }

@media (max-width: 1100px) {
  .jd-hs-card { grid-template-columns: 170px minmax(0, 1fr); }
  .jd-hs-art img { width: 150px; height: 150px; }
  .jd-hs-glance { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .jd-hs-card { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the facts go after the reading, not between the picture and it. */
  .jd-hs-art { display: contents; }
  .jd-hs-art > img { justify-self: center; order: 0; }
  .jd-hs-main { order: 1; }
  .jd-hs-facts2 { order: 2; }
  .jd-hs-facts2::before { display: none; }
  .jd-hs-glance { order: 3; }
  .jd-hs-art img { width: 120px; height: 120px; }
  .jd-hs-tabs { width: 100%; box-sizing: border-box; justify-content: space-between; }
  .jd-hs-tabs a { padding: 9px 4px; flex: 1 1 0; min-width: 0; text-align: center; }
  .jd-hs-facts > div { padding: 0; border-left: 0; flex: 1 1 100%; }
  .jd-hs-week li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
.jd-hs-play {
  display: block; margin: -10px 0 8px auto; font: inherit; font-size: var(--jd-fs-micro); font-weight: 600;
  color: var(--jd-text-muted); background: none; border: 1px solid var(--jd-border-strong);
  border-radius: var(--jd-radius-pill); padding: 4px 12px; cursor: pointer;
}
.jd-hs-play:hover { color: var(--jd-text); border-color: var(--jd-text); }
.jd-hs-play[hidden] { display: none; }
/* All three columns end on the same line: the facts box and the sky panel
   grow to the tallest column, and the buttons sit at the foot of the middle. */
.jd-hs-facts2 { flex: 1 1 auto; }
.jd-hs-main { display: flex; flex-direction: column; }
.jd-hs-main > .jd-hs-actions { margin-top: auto; padding-top: 18px; }
.jd-hs-glance { display: flex; flex-direction: column; }
.jd-posttrans { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: var(--jd-fs-small); }
.jd-posttrans svg { color: var(--jd-brass-text); }
.jd-posttrans a { color: var(--jd-brass-text); font-weight: 600; text-decoration: none; }
.jd-posttrans a:hover { text-decoration: underline; }

/* ======================================================================
   Chat assistant — the button and the panel
   ====================================================================== */
.jd-chat { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 900; font-size: var(--jd-fs-small); }
.jd-chat-fab {
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  padding: 13px 20px 13px 16px; border-radius: var(--jd-radius-pill);
  background: var(--jd-brass-text); color: var(--jd-surface); box-shadow: var(--jd-shadow-lg);
  transition: transform .15s, background .15s;
}
.jd-chat-fab:hover { background: var(--jd-text); transform: translateY(-2px); }
.jd-chat-fab:focus-visible { outline: 3px solid var(--jd-focus); outline-offset: 3px; }
.jd-chat.is-open .jd-chat-fab span { display: none; }
.jd-chat.is-open .jd-chat-fab { padding: 13px; }
.jd-chat-tease {
  position: absolute; right: 0; bottom: calc(100% + 12px); width: max-content; max-width: min(280px, calc(100vw - 32px));
  background: var(--jd-surface); color: var(--jd-text); border: 1px solid var(--jd-border); border-radius: var(--jd-radius);
  box-shadow: var(--jd-shadow); padding: 12px 14px; font: inherit; text-align: left; cursor: pointer; line-height: 1.45;
  animation: jd-chat-in .25s ease-out;
}
.jd-chat-tease::after { content: ""; position: absolute; right: 26px; bottom: -7px; width: 12px; height: 12px; background: inherit; border-right: 1px solid var(--jd-border); border-bottom: 1px solid var(--jd-border); transform: rotate(45deg); }

.jd-chat-panel {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 110px)); height: min(600px, calc(100dvh - 110px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--jd-bg); border: 1px solid var(--jd-border); border-radius: calc(var(--jd-radius) * 1.4);
  box-shadow: var(--jd-shadow-lg); animation: jd-chat-in .2s ease-out;
}
.jd-chat-panel[hidden] { display: none; }
@keyframes jd-chat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jd-chat-panel, .jd-chat-tease { animation: none; } }

.jd-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--jd-ink); color: var(--jd-text-on-dark); }
.jd-chat-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--jd-brass); color: var(--jd-ink); flex: 0 0 auto; }
.jd-chat-head h2 { font-size: 1rem; margin: 0; color: var(--jd-text-on-dark); }
.jd-chat-head p { margin: 2px 0 0; font-size: var(--jd-fs-micro); color: var(--jd-muted-on-dark); }
.jd-chat-head > div { flex: 1; min-width: 0; }
.jd-chat-close { background: none; border: 0; color: var(--jd-text-on-dark); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: var(--jd-radius-sm); }
.jd-chat-close:hover { background: var(--jd-ink-soft); }

.jd-chat-log { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.jd-chat-msg { display: flex; }
.jd-chat-msg p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.jd-chat-msg.is-user { justify-content: flex-end; }
.jd-chat-msg.is-user p {
  max-width: 82%; background: var(--jd-brass-text); color: var(--jd-surface);
  padding: 9px 13px; border-radius: 16px 16px 4px 16px;
}
.jd-chat-bubble {
  max-width: 88%; background: var(--jd-surface); border: 1px solid var(--jd-border);
  padding: 10px 13px; border-radius: 16px 16px 16px 4px; display: flex; flex-direction: column; gap: 6px;
}
.jd-chat-msg.is-personal .jd-chat-bubble, .jd-chat-msg.is-nomatch .jd-chat-bubble, .jd-chat-msg.is-handoff .jd-chat-bubble { background: var(--jd-brass-soft); }
.jd-chat-source { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-chat-follow { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-chat-link { align-self: flex-start; font-weight: 700; color: var(--jd-brass-text); text-decoration: none; }
.jd-chat-link::after { content: " →"; }
.jd-chat-link:hover { text-decoration: underline; }

.jd-chat-typing .jd-chat-bubble { flex-direction: row; gap: 4px; padding: 12px 14px; }
.jd-chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--jd-text-muted); animation: jd-chat-dot 1s infinite ease-in-out; }
.jd-chat-typing span:nth-child(2) { animation-delay: .15s; }
.jd-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes jd-chat-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.jd-chat-chips, .jd-chat-btns { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 2px; }
.jd-chat-chip {
  font: inherit; font-size: var(--jd-fs-micro); font-weight: 600; cursor: pointer;
  background: var(--jd-surface); color: var(--jd-brass-text); border: 1px solid var(--jd-brass);
  border-radius: var(--jd-radius-pill); padding: 6px 12px;
}
.jd-chat-chip:hover { background: var(--jd-brass-soft); }
.jd-chat-btn {
  display: inline-flex; align-items: center; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  background: var(--jd-surface); color: var(--jd-text); border: 1px solid var(--jd-border-strong);
  border-radius: var(--jd-radius-pill); padding: 8px 14px;
}
.jd-chat-btn.is-primary { background: var(--jd-brass-text); color: var(--jd-surface); border-color: var(--jd-brass-text); }
.jd-chat-btn:hover { border-color: var(--jd-text); }

.jd-chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--jd-border); background: var(--jd-surface); }
.jd-chat-form input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px;   /* 16px stops iOS zooming into the field */
  padding: 10px 14px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-pill);
  background: var(--jd-bg); color: var(--jd-text);
}
.jd-chat-form input:focus { outline: 2px solid var(--jd-focus); outline-offset: 1px; }
.jd-chat-form button {
  display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border: 0; cursor: pointer;
  border-radius: 50%; background: var(--jd-brass-text); color: var(--jd-surface);
}

/* A phone: the panel is a sheet across the width of the screen. */
@media (max-width: 520px) {
  .jd-chat { right: 12px; bottom: 12px; }
  .jd-chat-fab span { display: none; }
  .jd-chat-fab { padding: 14px; }
  .jd-chat-panel { position: fixed; left: 8px; right: 8px; bottom: 76px; width: auto; height: calc(100dvh - 92px); }
}
@media print { .jd-chat { display: none; } }

/* admin: chat */
.jd-admintabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--jd-border); }
.jd-admintabs a { padding: 10px 16px; text-decoration: none; color: var(--jd-text-muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; }
.jd-admintabs a:hover { color: var(--jd-text); }
.jd-admintabs a[aria-current] { color: var(--jd-heading); border-bottom-color: var(--jd-brass); }
.jd-chatadmin { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .jd-chatadmin { grid-template-columns: minmax(0, 1fr); } }
.jd-chatwho dl { margin: 0 0 14px; }
.jd-chatwho dt { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 8px; }
.jd-chatwho dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.jd-chatlog-admin { display: flex; flex-direction: column; gap: 8px; }
.jd-cl { max-width: 85%; padding: 8px 12px; border-radius: var(--jd-radius); background: var(--jd-surface-alt); border: 1px solid var(--jd-border); }
.jd-cl p { margin: 0 0 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.jd-cl small { color: var(--jd-text-muted); font-size: var(--jd-fs-micro); }
.jd-cl-user { align-self: flex-end; background: var(--jd-brass-soft); }
.jd-cl-nomatch, .jd-cl-personal { border-color: var(--jd-caution); }
/* search on the chat lists */
.jd-chatfindbar { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.jd-chatfind { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 640px; }
.jd-chatfind .jd-inputicon { flex: 1 1 260px; min-width: 0; }
.jd-chatfind input[type="search"] {
  width: 100%; box-sizing: border-box; font: inherit; color: var(--jd-text);
  padding: 9px 12px 9px 32px; border: 1px solid var(--jd-border-strong);
  border-radius: var(--jd-radius-sm); background: var(--jd-surface);
}
.jd-chatfind input[type="search"]:focus { border-color: var(--jd-focus); outline: 2px solid var(--jd-focus); outline-offset: 0; }
.jd-chatfind .jd-inputicon > svg { color: var(--jd-text-muted); }
.jd-chatfind-clear { font-size: var(--jd-fs-small); }
.jd-chatfind-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.jd-chatfind-chip {
  display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px;
  border: 1px solid var(--jd-border); border-radius: var(--jd-radius-pill);
  background: var(--jd-surface); color: var(--jd-text); text-decoration: none; font-size: var(--jd-fs-small);
}
.jd-chatfind-chip span { color: var(--jd-text-muted); font-variant-numeric: tabular-nums; }
.jd-chatfind-chip:hover { border-color: var(--jd-brass); }
.jd-chatfind-chip.is-on { background: var(--jd-brass-soft); border-color: var(--jd-brass); color: var(--jd-brass-text); font-weight: 600; }
.jd-chatfind-chip.is-on span { color: var(--jd-brass-text); }
.jd-chatfind-count { margin: 0 0 10px; }
.jd-chatfind-said { display: block; margin-top: 4px; color: var(--jd-text-muted); overflow-wrap: anywhere; max-width: 420px; }

/* the astrologer list in the booking window */
.jd-pick h2 { font-size: var(--jd-fs-h3); margin: 0 0 4px; }
.jd-picklist { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.jd-pickrow {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--jd-border); border-radius: var(--jd-radius); background: var(--jd-surface);
  text-decoration: none; color: var(--jd-text);
}
.jd-pickrow:hover { border-color: var(--jd-brass); box-shadow: var(--jd-shadow-sm); }
.jd-pickrow img, .jd-pickph { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--jd-brass-soft); color: var(--jd-brass-text); }
.jd-pickinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jd-pickinfo small { color: var(--jd-text-muted); }

/* ===================================================== astrologer portal === */
.jd-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: var(--jd-radius-pill); margin-inline-start: auto;
  background: var(--jd-caution); color: var(--jd-surface); font-size: 11px; font-weight: 700;
  font-family: var(--jd-font-num); line-height: 1; vertical-align: 1px;
}
.jd-admintabs .jd-count, .jd-astrolist .jd-count, .jd-table .jd-count { margin-inline-start: 4px; }
a.jd-stat { text-decoration: none; color: inherit; transition: border-color .15s; }
a.jd-stat:hover, a.jd-stat:focus-visible { border-color: var(--jd-brass); }
.jd-stat.is-alert { border-color: var(--jd-caution); background: var(--jd-caution-soft); }
.jd-stat.is-alert strong { color: var(--jd-caution-text); }
.jd-astrohome .jd-warn { margin: 0 0 16px; }
.jd-astrocols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 18px; align-items: start; }
.jd-astrocols .jd-panel h2 { font-size: var(--jd-fs-h3); margin: 0 0 10px; }
.jd-astrolist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.jd-astrolist a { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; margin: 0 -10px; border-radius: var(--jd-radius-sm); text-decoration: none; color: var(--jd-text); }
.jd-astrolist a:hover, .jd-astrolist a:focus-visible { background: var(--jd-surface-alt); }
.jd-astrolist strong { display: flex; align-items: center; gap: 6px; }
.jd-astrolist span, .jd-astrolist small { color: var(--jd-text-muted); font-size: var(--jd-fs-small); overflow-wrap: anywhere; }
.jd-astroactions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.jd-astroactions .jd-hint, .jd-astroactions .jd-ok { flex-basis: 100%; margin: 0; }
.jd-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.jd-astroqs { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
.jd-chatadmin > div > .jd-panel + .jd-panel { margin-top: 16px; }
.jd-chatadmin .jd-panel h2 { font-size: var(--jd-fs-h3); margin: 0 0 10px; }
.jd-table tr.is-unread td { background: var(--jd-brass-soft); }
.jd-astrophoto { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.jd-astrophoto .jd-field { flex: 1 1 240px; }
.jd-offlist { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jd-offlist li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding: 8px 12px; border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); background: var(--jd-surface); }
.jd-offlist .jd-linkbtn { margin-inline-start: auto; }
.jd-loginbox { margin-bottom: 18px; }
.jd-loginbox .jd-fieldset { border-color: var(--jd-brass); background: var(--jd-brass-soft); }
.jd-field-btn { display: flex; align-items: flex-end; }
.jd-authlede { margin: 0 0 14px; color: var(--jd-text-muted); }

/* a written conversation: the astrologer's view and the visitor's page */
.jd-threadhead h2 { margin: 0; }
.jd-threadhead p { margin: 2px 0 12px; overflow-wrap: anywhere; }
.jd-threadlog { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.jd-tmsg { max-width: min(85%, 640px); padding: 10px 14px; border-radius: var(--jd-radius); border: 1px solid var(--jd-border); background: var(--jd-surface); }
.jd-tmsg small { display: block; margin-top: 6px; color: var(--jd-text-muted); font-size: var(--jd-fs-micro); }
.jd-tmsg-me { align-self: flex-end; background: var(--jd-brass-soft); border-color: var(--jd-brass); }
.jd-tmsg-them { align-self: flex-start; }
.jd-threadclosed { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.jd-threadclosed p { margin: 0; }
.jd-consult { padding-block: 32px 56px; }
.jd-consulthead { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.jd-consulthead h1 { margin: 2px 0 4px; font-size: var(--jd-fs-h2); }
.jd-consulthead p { margin: 0; }
.jd-consultphoto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.jd-consult .jd-threadreply { background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 16px; }
@media (max-width: 560px) { .jd-tmsg { max-width: 92%; } .jd-consulthead { align-items: flex-start; } }
/* dashboard and admin forms: three fields in a row stack on a small phone */
@media (max-width: 480px) { .jd-adminform .jd-row-3 { grid-template-columns: minmax(0, 1fr); } .jd-adminform .jd-row-3 > :nth-child(3) { grid-column: auto; } }

/* ============================================================ live chat === */
/* in the widget */
.jd-chat.is-live .jd-chat-head { background: var(--jd-ink-soft); }
.jd-chat.is-live .jd-chat-head p::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--jd-success); margin-inline-end: 6px; vertical-align: 1px; }
.jd-chat-end {
  background: none; border: 1px solid var(--jd-muted-on-dark); color: var(--jd-text-on-dark); font: inherit; font-size: var(--jd-fs-micro);
  font-weight: 600; padding: 5px 10px; border-radius: var(--jd-radius-pill); cursor: pointer; white-space: nowrap;
}
.jd-chat-end:hover, .jd-chat-end:focus-visible { background: var(--jd-ink); border-color: var(--jd-text-on-dark); }
.jd-chat-msg.is-astro .jd-chat-bubble { background: var(--jd-surface); border: 1px solid var(--jd-brass); }
.jd-chat-who { margin: 0 0 3px; font-size: var(--jd-fs-micro); font-weight: 700; color: var(--jd-brass-text); }
.jd-chat-msg.is-live .jd-chat-bubble { background: transparent; border: 1px dashed var(--jd-border-strong); color: var(--jd-text-muted); font-size: var(--jd-fs-small); }
.jd-chat-tease.is-live { border-color: var(--jd-success); }
.jd-chat-fab[data-unseen]::after {
  content: attr(data-unseen); position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--jd-radius-pill); background: var(--jd-caution); color: var(--jd-surface); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--jd-surface);
}

/* the astrologer's live page */
.jd-livebar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin: 0 0 16px;
  padding: 14px 18px; border: 1px solid var(--jd-border); border-radius: var(--jd-radius); background: var(--jd-surface); }
.jd-livestatus { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.jd-livedot { width: 10px; height: 10px; border-radius: 50%; background: var(--jd-neutral); flex: none; }
.jd-live.is-online .jd-livebar { border-color: var(--jd-success); background: var(--jd-success-soft); }
.jd-live.is-online .jd-livedot { background: var(--jd-success); box-shadow: 0 0 0 4px var(--jd-success-soft); }
.jd-livegrid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .jd-livegrid { grid-template-columns: minmax(0, 1fr); } }
.jd-livelist h2, .jd-liveconv h2 { font-size: var(--jd-fs-h3); margin: 0; }
.jd-livelist ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jd-livelist button { width: 100%; text-align: start; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; font: inherit; color: var(--jd-text);
  background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); cursor: pointer; }
.jd-livelist button:hover, .jd-livelist button:focus-visible { border-color: var(--jd-brass); }
.jd-livelist li.is-open button { border-color: var(--jd-brass); background: var(--jd-brass-soft); }
.jd-livelist li.is-waiting button { border-color: var(--jd-caution); }
.jd-livelist li.is-ended button { opacity: .75; }
.jd-livelist small { color: var(--jd-text-muted); overflow-wrap: anywhere; }
.jd-livetag { font-size: var(--jd-fs-micro); font-weight: 600; color: var(--jd-text-muted); }
.jd-livelist li.is-waiting .jd-livetag { color: var(--jd-caution-text); }
.jd-liveconvhead { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.jd-liveconvhead p { margin: 2px 0 0; }
.jd-livelog { display: flex; flex-direction: column; gap: 8px; max-height: min(60vh, 560px); overflow-y: auto; padding: 4px 2px 12px; }
.jd-lline { max-width: min(85%, 620px); padding: 8px 12px; border-radius: var(--jd-radius); border: 1px solid var(--jd-border); background: var(--jd-surface); }
.jd-lline p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.jd-lline small { display: block; margin-top: 4px; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-lline.is-me { align-self: flex-end; background: var(--jd-brass-soft); border-color: var(--jd-brass); }
.jd-lline.is-them { align-self: flex-start; }
.jd-lline.is-bot { align-self: flex-start; background: var(--jd-surface-alt); color: var(--jd-text-muted); font-size: var(--jd-fs-small); }
.jd-lline.is-notice { align-self: center; background: transparent; border-style: dashed; text-align: center; }
.jd-liveform { display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid var(--jd-border); padding-top: 12px; }
.jd-liveform textarea { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); resize: vertical; background: var(--jd-surface); color: var(--jd-text); }
.jd-liveform textarea:focus { border-color: var(--jd-focus); outline: 2px solid var(--jd-focus); outline-offset: 0; }
.jd-liveended { margin: 10px 0 0; }
.jd-livebanner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 50; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: var(--jd-radius); background: var(--jd-ink); color: var(--jd-text-on-dark); box-shadow: var(--jd-shadow-lg); }
.jd-livebanner[hidden] { display: none; }
.jd-chat-fab { position: relative; }

/* ===================================================== consultation room === */
.jd-roomstatus { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--jd-radius-sm); border: 1px solid var(--jd-border); background: var(--jd-surface-alt); color: var(--jd-text-muted); }
.jd-roomstatus:empty { display: none; }
.jd-roomstatus.is-open { border-color: var(--jd-brass); background: var(--jd-brass-soft); color: var(--jd-brass-text); }
.jd-roomstatus.is-open.is-here { border-color: var(--jd-success); background: var(--jd-success-soft); color: var(--jd-success-text); }
.jd-roomstatus.is-cancelled { border-color: var(--jd-caution); background: var(--jd-caution-soft); color: var(--jd-caution-text); }
.jd-roomlog { max-height: min(62vh, 620px); overflow-y: auto; padding: 4px 2px 8px; }
.jd-roomlog:empty { display: none; }
.jd-roomform { display: flex; gap: 10px; align-items: flex-end; margin: 0 0 12px; padding: 12px; border: 1px solid var(--jd-border); border-radius: var(--jd-radius); background: var(--jd-surface); }
.jd-roomform[hidden] { display: none; }
.jd-roomform textarea { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); resize: vertical; background: var(--jd-surface); color: var(--jd-text); }
.jd-roomform textarea:focus { border-color: var(--jd-focus); outline: 2px solid var(--jd-focus); outline-offset: 0; }
.jd-roombox { margin: 16px 0 0; }
.jd-roombox .jd-hint { margin: 0; }
.jd-chatadmin .jd-roombox { margin: 0 0 16px; }
.jd-roomastro .jd-threadhead { margin-bottom: 8px; }
.jd-liveopts { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; } .jd-livesound { margin: 0; font-size: var(--jd-fs-small); }

/* ================================================== astrologer registration === */
.jd-footstack { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.jd-center { text-align: center; }
.jd-apply { padding-block: 40px 64px; }
.jd-applyhead { max-width: 720px; margin: 0 auto 26px; text-align: center; }
.jd-applyhead h1 { margin: 4px 0 8px; }
.jd-applyhead .jd-lede { margin: 0; }
.jd-applycard { max-width: 460px; margin: 0 auto; padding: 28px 26px; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: calc(var(--jd-radius) * 1.5); box-shadow: var(--jd-shadow); text-align: center; }
.jd-applycard h2 { margin: 0 0 6px; font-size: var(--jd-fs-h3); }
.jd-applycard .jd-form { text-align: start; margin-top: 18px; }
.jd-applycard .jd-hint { margin: 16px 0 0; }
.jd-otp { display: flex; justify-content: center; gap: 10px; margin: 6px 0 20px; padding: 0; border: 0; }
.jd-otp input {
  width: 48px; height: 56px; text-align: center; font: inherit; font-size: 1.5rem; font-weight: 700; font-family: var(--jd-font-num);
  border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); background: var(--jd-surface); color: var(--jd-text);
}
.jd-otp input:focus { border-color: var(--jd-brass); outline: 2px solid var(--jd-focus); outline-offset: 1px; }
@media (max-width: 400px) { .jd-otp { gap: 6px; } .jd-otp input { width: 40px; height: 50px; } }
.jd-otpmore { margin-top: 14px; }
.jd-otpmore p { margin: 6px 0; }
.jd-applyform { max-width: 880px; margin: 0 auto; }
.jd-applyerr, .jd-apply > .jd-wrap > .jd-ok { max-width: 880px; margin-inline: auto; }
.jd-applysec { background: var(--jd-surface); border: 1px solid var(--jd-border); border-top: 3px solid var(--jd-brass); border-radius: var(--jd-radius); padding: 22px 24px 10px; margin: 0 0 18px; box-shadow: var(--jd-shadow-sm); }
.jd-applysec h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: var(--jd-fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--jd-brass-text); font-family: var(--jd-font-body); font-weight: 700; }
.jd-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.jd-seg label, .jd-chipset label { position: relative; cursor: pointer; }
.jd-seg input, .jd-chipset input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jd-seg span { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; padding: 10px 16px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); background: var(--jd-surface); }
.jd-chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.jd-chipset span { display: inline-block; padding: 7px 13px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-pill); background: var(--jd-surface); font-size: var(--jd-fs-small); }
.jd-seg input:checked + span, .jd-chipset input:checked + span { background: var(--jd-brass-soft); border-color: var(--jd-brass); color: var(--jd-brass-text); font-weight: 600; }
.jd-seg input:focus-visible + span, .jd-chipset input:focus-visible + span { outline: 2px solid var(--jd-focus); outline-offset: 2px; }
.jd-chipset input:checked + span::before { content: "✓ "; }
.has-error .jd-seg span, .has-error .jd-chipset span { border-color: var(--jd-caution); }
.jd-platname { margin-top: 8px; width: 100%; }
.jd-platname[hidden] { display: none; }
.jd-photopick { display: flex; align-items: center; gap: 12px; }
.jd-photoprev { width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--jd-surface-alt); border: 1px solid var(--jd-border); color: var(--jd-text-muted); }
.jd-photoprev img { width: 100%; height: 100%; object-fit: cover; }
.jd-photopick input { min-width: 0; flex: 1; }
.jd-applysubmit { text-align: center; margin: 18px 0 16px; }
.jd-applysubmit .jd-btn { min-width: 220px; }
.jd-check.has-error span { color: var(--jd-caution-text); }
/* admin */
.jd-applyphoto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; margin: 0 0 12px; border: 1px solid var(--jd-border); }
.jd-applydl { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 8px 16px; margin: 0 0 12px; }
.jd-applydl dt { color: var(--jd-text-muted); font-size: var(--jd-fs-small); }
.jd-applydl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .jd-applydl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .jd-applydl dd { margin-bottom: 8px; } }
.jd-applyadmin h3 { font-size: var(--jd-fs-body); margin: 12px 0 4px; }
.jd-applystatus { margin-top: 16px; }
.jd-inlinefield { display: flex; gap: 8px; align-items: center; }
.jd-inlinefield select { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); background: var(--jd-surface); color: var(--jd-text); }
.jd-mailhist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.jd-mailhist li { border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); padding: 8px 12px; background: var(--jd-surface); }
.jd-mailhist summary { cursor: pointer; overflow-wrap: anywhere; }
.jd-mailhist .jd-prewrap { margin-top: 8px; font-size: var(--jd-fs-small); }
/* registration: a dropdown of tick boxes, and plain radio buttons */
.jd-multi { position: relative; }
.jd-multi summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); background: var(--jd-surface); color: var(--jd-text);
}
.jd-multi summary::-webkit-details-marker { display: none; }
.jd-multi summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--jd-text-muted); border-bottom: 2px solid var(--jd-text-muted); transform: rotate(45deg) translateY(-3px); transition: transform .15s; }
.jd-multi[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.jd-multi summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-multi summary .is-ph { color: var(--jd-text-muted); }
.jd-multi summary:focus-visible, .jd-multi[open] summary { border-color: var(--jd-focus); outline: 2px solid var(--jd-focus); outline-offset: 0; }
.jd-multilist {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 260px; overflow-y: auto;
  padding: 6px; background: var(--jd-surface); border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); box-shadow: var(--jd-shadow);
}
.jd-multilist label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: var(--jd-fs-small); }
.jd-multilist label:hover { background: var(--jd-surface-alt); }
.jd-multilist input { width: 17px; height: 17px; accent-color: var(--jd-brass-text); flex: none; }
.has-error .jd-multi summary { border-color: var(--jd-caution); }
.jd-radios { border: 0; padding: 0; margin: 0 0 15px; min-inline-size: 0; }
.jd-radios legend { padding: 0; }
.jd-radios > label { display: inline-flex; align-items: center; gap: 8px; margin: 6px 22px 0 0; cursor: pointer; }
.jd-radios input[type="radio"] { width: 18px; height: 18px; accent-color: var(--jd-brass-text); margin: 0; }
.jd-radios .jd-platname { display: block; }
.jd-radios.has-error > label { color: var(--jd-caution-text); }
.jd-field .jd-multilist input, .jd-field.jd-radios input[type="radio"] { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 0; background: none; flex: none; }
.jd-radios .jd-platname[hidden] { display: none; }
/* the visitor's own time beside ours (localtime.js) */
.jd-yourtime { display: block; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); font-weight: 500; margin-top: 2px; }
.jd-slot input:checked + span .jd-yourtime { color: inherit; }
.jd-yourtz { margin: -4px 0 10px; padding: 8px 12px; border-radius: var(--jd-radius-sm); background: var(--jd-azure-soft); color: var(--jd-text); font-size: var(--jd-fs-small); }

/* ---- Admin → Payments ---- */
.jd-payuse { margin-top: -6px; }
.jd-paytabs { margin: 18px 0 16px; }
.jd-paystate { margin-bottom: 18px; }
.jd-paystate .jd-stat strong { font-size: var(--jd-fs-small); }
.jd-radioset-row { margin-top: 12px; }
.jd-upigrid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 240px; align-items: start; }
.jd-upiprev {
  border: 1px solid var(--jd-border); border-radius: var(--jd-radius); background: var(--jd-surface);
  padding: 14px; text-align: center; min-inline-size: 0;
}
.jd-upiprev .jd-qr, .jd-qrimg { display: block; margin: 6px auto 10px; max-width: 100%; height: auto; border-radius: 6px; }
.jd-qrimg { max-height: 260px; }
.jd-upiprev code { overflow-wrap: anywhere; }
.jd-upiprev .jd-btn { margin-top: 8px; }
.jd-paylog code { font-size: var(--jd-fs-small); }
.jd-table tr.is-hl td { background: var(--jd-brass-soft); }
.jd-handoff { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--jd-bg); }
.jd-handoff .jd-panel { max-width: 420px; width: 100%; text-align: center; }
@media (max-width: 720px) { .jd-upigrid { grid-template-columns: minmax(0, 1fr); } }
.jd-adminbody .jd-savebar.jd-paytests { position: static; background: none; padding: 14px 0 0; }

/* ---- paying for a booking, cancelling with a reason ---- */
.jd-cancelbox { margin-top: 14px; }
.jd-cancelbox > summary { cursor: pointer; color: var(--jd-text-muted); font-size: var(--jd-fs-small); }
.jd-cancelbox[open] > summary { margin-bottom: 10px; }
.jd-cancelbox select, .jd-cancelbox textarea { width: 100%; }
.jd-atable-actions .jd-cancelbox { min-width: 220px; }
.jd-upipay-grid { display: grid; gap: 22px; grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
.jd-upipay-qr { text-align: center; border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 12px; background: var(--jd-surface); }
.jd-upipay-qr .jd-qr { display: block; margin: 0 auto 8px; max-width: 100%; height: auto; }
.jd-upipay-qr code { overflow-wrap: anywhere; }
.jd-upisteps { margin: 0 0 14px; padding-left: 1.2em; }
.jd-upisteps li { margin-bottom: 6px; }
.jd-payact { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.jd-payact input { max-width: 140px; padding: 6px 8px; font-size: var(--jd-fs-small); }
.jd-payform .jd-radioset { margin-bottom: 14px; }
@media (max-width: 640px) { .jd-upipay-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Admin → Appointments: numbered rows, small action buttons ---- */
.jd-bookfilters { margin: 16px 0; }
.jd-booktable td { vertical-align: top; }
.jd-booktable .jd-sn { width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.jd-booktable .jd-sn small { font-size: var(--jd-fs-micro); white-space: nowrap; }
.jd-bookwho { min-width: 200px; }
.jd-mailticks { white-space: nowrap; }
.jd-actcell { width: 1%; }
.jd-acts { display: flex; flex-wrap: nowrap; gap: 5px; }
.jd-actform { display: contents; }
.jd-ibtn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; flex: none;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.jd-ibtn svg { display: block; }
a.jd-ibtn:hover, button.jd-ibtn:hover { transform: translateY(-1px); box-shadow: var(--jd-shadow-sm); }
.jd-ibtn:focus-visible { outline: 2px solid var(--jd-focus); outline-offset: 2px; }
.jd-ibtn.is-view   { background: var(--jd-azure-soft);   color: var(--jd-azure); }
.jd-ibtn.is-wa     { background: var(--jd-success-soft); color: var(--jd-success-text); }
.jd-ibtn.is-call   { background: var(--jd-neutral-soft); color: var(--jd-neutral-text); }
.jd-ibtn.is-mail   { background: var(--jd-violet-soft);  color: var(--jd-violet); }
.jd-ibtn.is-send   { background: var(--jd-brass-soft);   color: var(--jd-brass-text); }
.jd-ibtn.is-cancel { background: var(--jd-mixed-soft);   color: var(--jd-mixed-text); }
.jd-ibtn.is-del    { background: var(--jd-caution-soft); color: var(--jd-caution-text); }
.jd-ibtn.is-off    { background: var(--jd-surface-alt);  color: var(--jd-border-strong); cursor: not-allowed; }
.jd-cxdlg { width: min(460px, calc(100vw - 32px)); padding: 22px; }
.jd-cxdlg h2 { margin: 0 0 4px; font-size: var(--jd-fs-body); }
.jd-cxdlg select, .jd-cxdlg textarea { width: 100%; }
.jd-cxbtns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.jd-ibtn { position: relative; }
.jd-ibtn-n {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--jd-radius-pill); background: var(--jd-violet); color: var(--jd-surface);
  font-size: 10px; line-height: 16px; font-weight: 700; text-align: center;
}
.jd-chip-sep { margin-inline-start: auto; }
.jd-chip-sep svg { vertical-align: -2px; }
.jd-mldlg { width: min(580px, calc(100vw - 32px)); max-height: 90vh; overflow-y: auto; }
.jd-mldlg input, .jd-mldlg select, .jd-mldlg textarea { width: 100%; }
.jd-mlsent { margin: 8px 0 0; font-size: var(--jd-fs-small); }
.jd-mlsent summary { cursor: pointer; color: var(--jd-text-muted); }
.jd-mlsent ul { margin: 8px 0 0; padding-left: 1.1em; }
.jd-polist { margin: 6px 0 0; padding-left: 1.1em; }
.jd-potable tfoot th, .jd-potable tfoot td { border-top: 2px solid var(--jd-border-strong); }
.jd-table tr.is-hl td { background: var(--jd-brass-soft); }
.jd-pomonths { margin: 12px 0 16px; }
/* ---- Life Drishti full report: offer box and product page ---- */
.jd-lrcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 22px 0; border-inline-start: 4px solid var(--jd-brass); }
.jd-lrcta h2 { margin: 2px 0 6px; font-size: 1.15rem; }
.jd-lrcta p { margin: 0; max-width: 60ch; }
.jd-lrcta-k { font-size: var(--jd-fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jd-brass-text); }
.jd-lrlist { margin: 0 0 14px; padding-left: 1.2em; }
.jd-lrlist li { margin-bottom: 8px; }
.jd-lrbuy { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--jd-border); }

/* ---- paid live chat: the clock (widget header and astrologer screen) ---- */
.jd-chat-head p.jd-chat-clock { margin-top: 3px; font-weight: 700; color: var(--jd-brass); font-variant-numeric: tabular-nums; }
.jd-chat.is-live .jd-chat-head p.jd-chat-clock::before { content: none; }
.jd-chat-head p.jd-chat-clock.is-waiting { font-weight: 500; color: var(--jd-muted-on-dark); }
.jd-chat-head p.jd-chat-clock.is-low, .jd-chat-head p.jd-chat-clock.is-up { color: var(--jd-text-on-dark); text-decoration: underline; text-decoration-color: var(--jd-brass); text-underline-offset: 3px; }
.jd-chat-form input:disabled { background: var(--jd-surface-alt); cursor: not-allowed; }
.jd-liveclock { margin: 4px 0 0; font-size: var(--jd-fs-small); font-weight: 600; color: var(--jd-brass-text); font-variant-numeric: tabular-nums; }
.jd-liveclock.is-up { color: var(--jd-caution-text); }
.jd-liveclock.is-waiting { font-weight: 400; color: var(--jd-text-muted); }
.jd-liveform textarea:disabled { background: var(--jd-surface-alt); cursor: not-allowed; }

/* ---- JeevanDrishti Plus ---- */
.jd-plusme { border-left: 4px solid var(--jd-brass); }
.jd-plussub { font-size: 1rem; margin: 20px 0 6px; }
.jd-plusmails { margin: 0 0 12px; padding-left: 1.2em; color: var(--jd-text-muted); }
.jd-plusform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.jd-plusform .jd-field { flex: 1 1 240px; margin: 0; }
.jd-plusline { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--jd-radius, 10px); background: var(--jd-surface-alt); border: 1px solid var(--jd-border); font-size: var(--jd-fs-small); }

/* ---- JeevanDrishti Plus page ---- */
.jd-plushero { background: var(--jd-ink); color: var(--jd-text-on-dark); padding-block: clamp(40px, 6vw, 80px); position: relative; overflow: hidden; }
.jd-plushero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid var(--jd-ink-line); box-shadow: 0 0 0 60px rgba(255,255,255,.015), 0 0 0 120px rgba(255,255,255,.015); pointer-events: none; }
.jd-plushero-grid { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; position: relative; z-index: 1; }
.jd-plushero .jd-eyebrow { color: var(--jd-brass-on-dark); }
.jd-plushero h1 { color: var(--jd-text-on-dark); font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.08; margin-bottom: .35em; }
.jd-plushero .jd-lede { color: var(--jd-muted-on-dark); }
.jd-plushero .jd-hint { color: var(--jd-muted-on-dark); }
.jd-plushero-price { margin: 22px 0 14px; display: flex; align-items: baseline; gap: 8px; }
.jd-plushero-price strong { font-family: var(--jd-font-head); font-size: 2.4rem; color: var(--jd-brass-on-dark); line-height: 1; }
.jd-plushero-price span { color: var(--jd-muted-on-dark); }
.jd-plushero .jd-btn { background: var(--jd-brass); border-color: var(--jd-brass); color: var(--jd-ink); }
.jd-plushero .jd-btn:hover { background: var(--jd-text-on-dark); border-color: var(--jd-text-on-dark); color: var(--jd-ink); }
.jd-plushero-ticks { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--jd-fs-small); color: var(--jd-muted-on-dark); }
.jd-plushero-ticks li { display: inline-flex; align-items: center; gap: 6px; }
.jd-plushero-ticks svg, .jd-plushero-member svg { color: var(--jd-brass-on-dark); flex: none; }
.jd-plushero-member { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 16px; border-radius: var(--jd-radius-pill);
  background: rgba(255,255,255,.06); border: 1px solid var(--jd-ink-line); color: var(--jd-text-on-dark); font-weight: 600; }
.jd-plusmail { background: var(--jd-surface); color: var(--jd-text); border-radius: var(--jd-radius); box-shadow: var(--jd-shadow-lg); overflow: hidden; transform: rotate(1.2deg); }
.jd-plusmail-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--jd-surface-alt); border-bottom: 1px solid var(--jd-border);
  font-size: var(--jd-fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jd-brass-text); }
.jd-plusmail-h { font-family: var(--jd-font-head); font-size: 1.3rem; color: var(--jd-heading); margin: 16px 20px 6px; }
.jd-plusmail-facts { margin: 0; padding: 0 20px 8px; }
.jd-plusmail-facts > div { padding: 9px 0; border-top: 1px solid var(--jd-border); }
.jd-plusmail-facts > div:first-child { border-top: 0; }
.jd-plusmail-facts dt { font-size: var(--jd-fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--jd-text-muted); }
.jd-plusmail-facts dd { margin: 2px 0 0; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.jd-plusmail-note { margin: 0; padding: 10px 20px 16px; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-plusjoined { margin-top: 20px; }
.jd-plussec { padding-block: clamp(40px, 5vw, 72px); }
.jd-plussec > .jd-plusme { margin: 0 auto; max-width: 760px; }
.jd-plusgrid { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jd-plusgrid > li { background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 22px 22px 18px; box-shadow: var(--jd-shadow-sm); }
.jd-plusgrid h3 { font-size: 1.08rem; margin: 12px 0 6px; }
.jd-plusgrid p { margin: 0; color: var(--jd-text-muted); font-size: .95rem; line-height: 1.55; }
.jd-plusico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--jd-brass-soft); color: var(--jd-brass-text); }
.jd-plusband { padding-block: clamp(40px, 5vw, 72px); }
.jd-plussteps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: none; }
.jd-plussteps li { position: relative; padding: 22px; background: var(--jd-surface); border-radius: var(--jd-radius); border: 1px solid var(--jd-border); }
.jd-plussteps li > span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--jd-ink); color: var(--jd-brass-on-dark); font-weight: 700; }
.jd-plussteps h3 { font-size: 1.05rem; margin: 12px 0 6px; }
.jd-plussteps p { margin: 0; color: var(--jd-text-muted); font-size: .95rem; }
.jd-pluscmp { max-width: 860px; margin: 0 auto; }
.jd-pluscmp th[scope], .jd-pluscmp tbody th { text-align: left; font-weight: 500; }
.jd-pluscmp thead th { text-align: center; }
.jd-pluscmp td { text-align: center; white-space: nowrap; }
.jd-pluscmp .is-plus { color: var(--jd-brass-text); }
.jd-plusyes { color: var(--jd-success-text); display: inline-flex; }
.jd-plusno { color: var(--jd-text-muted); }
.jd-plusnote { max-width: 860px; margin: 14px auto 0; text-align: center; }
.jd-plusjoin { text-align: center; }
.jd-plusjoin h2 { margin-bottom: 12px; }
.jd-plusjoin .jd-plusbuy { text-align: left; max-width: 460px; margin: 0 auto; }
.jd-plusjoin .jd-plusbuy .jd-btn { width: 100%; justify-content: center; }
.jd-plusjoin .jd-savebar { justify-content: center; }
.jd-plusfaq-h { text-align: center; }
.jd-plusfaq details { border-bottom: 1px solid var(--jd-border); padding: 14px 0; }
.jd-plusfaq summary { cursor: pointer; font-weight: 600; color: var(--jd-heading); list-style-position: outside; }
.jd-plusfaq details p { margin: 10px 0 0; color: var(--jd-text-muted); }
@media (max-width: 900px) {
  .jd-plushero-grid { grid-template-columns: 1fr; }
  .jd-plusmail { transform: none; }
  .jd-plusgrid, .jd-plussteps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .jd-plusgrid, .jd-plussteps { grid-template-columns: 1fr; }
  .jd-pluscmp td { white-space: normal; }
}

/* ---- About page ---- */
.jd-abouthero { padding-block: clamp(36px, 5vw, 72px) clamp(30px, 4vw, 56px);
  background: linear-gradient(180deg, var(--jd-surface-alt), var(--jd-bg)); border-bottom: 1px solid var(--jd-border); }
.jd-abouthero h1 { max-width: 820px; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.1; margin-bottom: .4em; }
.jd-abouthero .jd-lede { max-width: 760px; }
.jd-aboutfacts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.jd-aboutfacts li { background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 16px 18px; }
.jd-aboutfacts strong { display: block; font-family: var(--jd-font-head); font-size: 2rem; color: var(--jd-brass-text); line-height: 1.1; }
.jd-aboutfacts span { font-size: var(--jd-fs-small); color: var(--jd-text-muted); }
.jd-aboutsec { padding-block: clamp(40px, 5vw, 72px); }
.jd-aboutsplit { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.jd-aboutmv { display: grid; gap: 16px; }
.jd-aboutmv-card { background: var(--jd-surface); border: 1px solid var(--jd-border); border-left: 4px solid var(--jd-brass); border-radius: var(--jd-radius); padding: 20px 22px; }
.jd-aboutmv-card h3 { margin: 10px 0 6px; font-size: 1.1rem; }
.jd-aboutmv-card p { margin: 0; color: var(--jd-text-muted); }
.jd-aboutband { padding-block: clamp(40px, 5vw, 72px); }
.jd-aboutsvc { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jd-aboutsvc li > a, .jd-aboutsvc li > div { display: block; height: 100%; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius);
  padding: 20px; color: var(--jd-text); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.jd-aboutsvc li > a:hover { border-color: var(--jd-brass); box-shadow: var(--jd-shadow); transform: translateY(-2px); }
.jd-aboutsvc h3 { font-size: 1.05rem; margin: 12px 0 4px; }
.jd-aboutsvc p { margin: 0; color: var(--jd-text-muted); font-size: .94rem; }
.jd-aboutsteps { margin: 14px 0 0; padding-left: 1.3em; }
.jd-aboutsteps li { margin-bottom: 8px; }
.jd-aboutcenter { text-align: center; margin-top: 24px; }
.jd-aboutlinks { list-style: none; padding: 0; margin: 16px 0 0; }
.jd-aboutlinks li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.jd-aboutlinks svg { color: var(--jd-brass-text); flex: none; }
.jd-aboutlegal h2 { font-size: 1.15rem; margin-top: 18px; }
.jd-aboutlegal h2:first-child { margin-top: 0; }
.jd-aboutlegal p { color: var(--jd-text-muted); font-size: .95rem; }
.jd-aboutcta { text-align: center; }
.jd-aboutcta .jd-lede { max-width: 640px; margin-inline: auto; }
@media (max-width: 900px) { .jd-aboutsplit { grid-template-columns: 1fr; } .jd-aboutsvc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .jd-aboutsvc { grid-template-columns: 1fr; } }
.jd-table.jd-pluscmp { min-width: 0; width: 100%; }
.jd-pluscmp tbody th { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 500; color: var(--jd-text); }
@media (max-width: 600px) {
  .jd-pluscmp th, .jd-pluscmp td { padding-inline: 6px; }
  .jd-pluscmp tbody th { font-size: .88rem; }
  .jd-pluscmp td { font-size: .88rem; }
}

/* ---- About: "What we do" cards — a colour each, icon, underline, faint corner icon, sparkles ---- */
.jd-aboutsvc { gap: 22px; }
.jd-svc { --t: var(--jd-tint-default); --t-soft: var(--jd-tint-default-soft); --t-line: var(--jd-tint-default-line); }
.jd-svc.is-gold { --t: var(--jd-tint-gold); --t-soft: var(--jd-tint-gold-soft); --t-line: var(--jd-tint-gold-line); }
.jd-svc.is-blue { --t: var(--jd-tint-blue); --t-soft: var(--jd-tint-blue-soft); --t-line: var(--jd-tint-blue-line); }
.jd-svc.is-green { --t: var(--jd-tint-green); --t-soft: var(--jd-tint-green-soft); --t-line: var(--jd-tint-green-line); }
.jd-svc.is-violet { --t: var(--jd-tint-violet); --t-soft: var(--jd-tint-violet-soft); --t-line: var(--jd-tint-violet-line); }
.jd-svc.is-saffron { --t: var(--jd-tint-saffron); --t-soft: var(--jd-tint-saffron-soft); --t-line: var(--jd-tint-saffron-line); }
.jd-svc.is-rose { --t: var(--jd-tint-rose); --t-soft: var(--jd-tint-rose-soft); --t-line: var(--jd-tint-rose-line); }
.jd-svc.is-teal { --t: var(--jd-tint-teal); --t-soft: var(--jd-tint-teal-soft); --t-line: var(--jd-tint-teal-line); }
.jd-svc.is-indigo { --t: var(--jd-tint-indigo); --t-soft: var(--jd-tint-indigo-soft); --t-line: var(--jd-tint-indigo-line); }
.jd-aboutsvc .jd-svc > .jd-svc-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; height: 100%;
  padding: 24px 24px 26px; border-radius: 18px; border: 1px solid var(--t-line);
  background: linear-gradient(140deg, var(--jd-surface) 45%, var(--t-soft) 130%);
  color: var(--jd-text); text-decoration: none; isolation: isolate;
  box-shadow: 0 1px 2px rgba(37, 35, 41, .04), 0 8px 24px -18px var(--t);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s;
}
/* the soft wave in the lower right */
.jd-svc-card::before {
  content: ""; position: absolute; z-index: -1; right: -30%; bottom: -55%; width: 90%; height: 110%;
  background: radial-gradient(closest-side, var(--t-soft), transparent); border-radius: 50%;
  transition: transform .5s ease;
}
.jd-svc-head { display: flex; align-items: center; gap: 18px; }
.jd-svc-ico {
  flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0, var(--t-soft) 45%, var(--t-line) 100%); color: var(--t);
  box-shadow: inset 0 0 0 1px var(--t-line); transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.jd-svc-title { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.jd-aboutsvc .jd-svc h3 { margin: 0; font-size: 1.4rem; line-height: 1.15; color: var(--jd-heading); }
.jd-svc-bar { display: block; width: 34px; height: 4px; border-radius: 4px; background: var(--t); transition: width .35s ease; }
.jd-aboutsvc .jd-svc p { margin: 0; color: var(--jd-text); opacity: .86; font-size: .98rem; line-height: 1.6; max-width: 34ch; position: relative; }
.jd-svc-deco { position: absolute; right: 14px; bottom: 10px; color: var(--t); opacity: .2; transform: rotate(-8deg);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .35s; pointer-events: none; }
.jd-svc-deco svg { stroke-width: 1.2; }
.jd-svc-spark { position: absolute; width: 12px; height: 12px; background: var(--t); opacity: .35; pointer-events: none;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: jd-twinkle 3.6s ease-in-out infinite; }
.jd-svc-spark.s1 { top: 22px; right: 42px; }
.jd-svc-spark.s2 { top: 58px; right: 20px; width: 8px; height: 8px; animation-delay: -1.2s; }
.jd-svc-spark.s3 { bottom: 26px; right: 44%; width: 9px; height: 9px; animation-delay: -2.4s; }
@keyframes jd-twinkle { 0%, 100% { transform: scale(.7) rotate(0); opacity: .18; } 50% { transform: scale(1.15) rotate(45deg); opacity: .55; } }
a.jd-svc-card:hover, a.jd-svc-card:focus-visible { transform: translateY(-6px); border-color: var(--t);
  box-shadow: 0 2px 4px rgba(37, 35, 41, .05), 0 22px 44px -20px var(--t); }
a.jd-svc-card:hover .jd-svc-ico, a.jd-svc-card:focus-visible .jd-svc-ico { transform: scale(1.08) rotate(-8deg); }
a.jd-svc-card:hover .jd-svc-bar, a.jd-svc-card:focus-visible .jd-svc-bar { width: 58px; }
a.jd-svc-card:hover .jd-svc-deco, a.jd-svc-card:focus-visible .jd-svc-deco { opacity: .34; transform: rotate(0) translate(-4px, -6px) scale(1.06); }
a.jd-svc-card:hover::before { transform: scale(1.15); }
a.jd-svc-card:hover .jd-svc-spark { animation-duration: 1.4s; opacity: .6; }
/* rising in when the section scrolls into view (armed by a script only) */
.jd-aboutsvc.is-armed .jd-svc { opacity: 0; transform: translateY(22px); }
.jd-aboutsvc.is-armed.is-in .jd-svc { animation: jd-rise .7s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes jd-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .jd-svc-spark { animation: none; }
  .jd-aboutsvc .jd-svc > .jd-svc-card, .jd-svc-ico, .jd-svc-deco, .jd-svc-bar { transition: none; }
}
@media (max-width: 600px) { .jd-svc-ico { width: 54px; height: 54px; } .jd-aboutsvc .jd-svc h3 { font-size: 1.25rem; } }
/* keep the text clear of the corner icon */
.jd-aboutsvc .jd-svc p { padding-right: 58px; }
.jd-svc-deco { right: 12px; bottom: 8px; }
.jd-svc-deco svg { width: 58px; height: 58px; }
.jd-svc-ico svg { width: 30px; height: 30px; }


/* ---- "Chat with an astrologer" pop-up (app/promo.php) ---- */
.jd-promo { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; }
.jd-promo[hidden] { display: none; }
.jd-promo-scrim { position: absolute; inset: 0; background: rgba(24, 20, 30, .5); opacity: 0; transition: opacity .25s ease; }
.jd-promo-box { position: relative; width: min(1040px, 100%); max-height: calc(100vh - 32px); overflow: hidden auto; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 26px; box-shadow: var(--jd-shadow-lg);
  background: radial-gradient(90% 80% at 80% 45%, var(--jd-surface) 0%, var(--jd-bg) 55%, var(--jd-brass-soft) 100%);
  opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.jd-promo.is-in .jd-promo-scrim { opacity: 1; }
.jd-promo.is-in .jd-promo-box { opacity: 1; transform: none; }
.jd-promo-x { position: absolute; top: 14px; right: 14px; z-index: 4; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--jd-surface); color: var(--jd-text); font-size: 24px; line-height: 1; box-shadow: var(--jd-shadow-sm); }
.jd-promo-x:hover { background: var(--jd-surface-alt); }
.jd-promo-copy { padding: clamp(24px, 4vw, 48px) clamp(22px, 3.6vw, 44px); position: relative; z-index: 2; }
.jd-promo-brand { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.jd-promo-brand img { border-radius: 50%; box-shadow: 0 0 0 2px var(--jd-brass-soft); }
.jd-promo-brand strong { display: block; font-family: var(--jd-font-head); font-size: 1.7rem; line-height: 1.1; color: var(--jd-heading); }
.jd-promo-brand small { display: block; font-size: .92rem; color: var(--jd-text-muted); letter-spacing: .02em; }
.jd-promo-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; font-size: .82rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--jd-heading); }
.jd-promo-eyebrow::after { content: ""; width: 56px; height: 3px; border-radius: 3px; background: var(--jd-brass); }
.jd-promo-copy h2 { font-family: var(--jd-font-head); font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.02; margin: 0 0 18px; color: var(--jd-heading); font-weight: 800; letter-spacing: -.01em; }
.jd-promo-copy h2 strong { display: block; font-size: clamp(3.6rem, 8.5vw, 6.4rem); line-height: .95; margin-top: 6px; font-weight: 800;
  background: linear-gradient(180deg, var(--jd-mixed) 0%, var(--jd-brass) 55%, var(--jd-brass-text) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .6)); }
.jd-promo-sub { color: var(--jd-text-muted); font-size: 1.08rem; line-height: 1.6; max-width: 40ch; margin: 0 0 22px; }
.jd-promo-cta { display: inline-flex; align-items: center; gap: 16px; padding: 18px 40px; border: 0; border-radius: var(--jd-radius-pill); cursor: pointer;
  font: 700 1.3rem var(--jd-font-body); color: var(--jd-text-on-dark); background: linear-gradient(180deg, var(--jd-violet), var(--jd-heading));
  box-shadow: 0 16px 30px -14px var(--jd-heading); transition: transform .2s ease, box-shadow .2s ease; }
.jd-promo-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -14px var(--jd-heading); }
.jd-promo-cta svg { transition: transform .2s ease; }
.jd-promo-cta:hover svg { transform: translateX(4px); }
.jd-promo-badges { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 12px 0; }
.jd-promo-badges li { display: flex; align-items: center; gap: 10px; padding: 0 18px; font-size: .92rem; line-height: 1.25; color: var(--jd-heading); max-width: 170px; }
.jd-promo-badges li:first-child { padding-left: 0; }
.jd-promo-badges li + li { border-left: 1px solid var(--jd-border); }
.jd-promo-badges span { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--jd-brass-soft); color: var(--jd-brass-text); }
.jd-promo-fine { margin: 16px 0 0; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); max-width: 46ch; }
.jd-promo-art { position: relative; padding: 70px 24px 40px 0; display: flex; flex-direction: column; justify-content: center; gap: 20px; min-height: 460px; }
.jd-promo-wheel { position: absolute; width: 520px; height: 520px; right: -90px; top: 50%; margin-top: -260px; color: var(--jd-brass); animation: jd-spin 120s linear infinite; }
.jd-promo-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--jd-brass); opacity: .35; }
.jd-promo-ring.is-in { inset: 70px; border-width: 1px; opacity: .3; box-shadow: 0 0 0 40px rgba(255, 255, 255, .25); }
.jd-promo-glyph { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); }
.jd-promo-glyph > span { position: absolute; left: -16px; top: -250px; width: 32px; text-align: center; font-size: 30px; line-height: 1; color: var(--jd-brass); opacity: .55; transform: rotate(calc(-1 * var(--a))); }
@keyframes jd-spin { to { transform: rotate(360deg); } }
.jd-promo-spark { position: absolute; width: 22px; height: 22px; background: var(--jd-brass); opacity: .45; z-index: 1;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: jd-twinkle 3.2s ease-in-out infinite; }
.jd-promo-spark.s1 { top: 60px; left: 30px; } .jd-promo-spark.s2 { top: 40%; left: 4px; width: 14px; height: 14px; animation-delay: -1s; }
.jd-promo-spark.s3 { bottom: 70px; left: 50px; width: 16px; height: 16px; animation-delay: -2s; } .jd-promo-spark.s4 { top: 30px; right: 90px; width: 18px; height: 18px; animation-delay: -.5s; }
.jd-promo-eg { position: absolute; top: 24px; left: 56px; margin: 0; z-index: 2; font-size: var(--jd-fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--jd-text-muted); }
.jd-promo-b { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 12px; opacity: 0; transform: translateY(10px); }
.jd-promo.is-in .jd-promo-b { animation: jd-rise .5s ease forwards; }
.jd-promo.is-in .jd-promo-b:nth-of-type(2) { animation-delay: .35s; }
.jd-promo.is-in .jd-promo-b:nth-of-type(3) { animation-delay: .9s; }
.jd-promo.is-in .jd-promo-b:nth-of-type(4) { animation-delay: 1.45s; }
.jd-promo-b.is-you { justify-content: flex-end; padding-left: 60px; }
.jd-promo-b.is-astro { justify-content: flex-start; padding-right: 40px; }
.jd-promo-av { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--jd-heading); color: var(--jd-text-on-dark); box-shadow: 0 0 0 4px var(--jd-surface); }
.jd-promo-av.is-mark { width: 64px; height: 64px; background: var(--jd-surface); box-shadow: 0 8px 20px -10px var(--jd-brass), 0 0 0 1px var(--jd-brass-soft); }
.jd-promo-av.is-mark img { border-radius: 50%; }
.jd-promo-b p { margin: 0; max-width: 330px; padding: 16px 20px 10px; border-radius: 20px; font-size: 1rem; line-height: 1.5; box-shadow: var(--jd-shadow); }
.jd-promo-b.is-you p { background: var(--jd-heading); color: var(--jd-text-on-dark); border-top-right-radius: 6px; }
.jd-promo-b.is-astro p { background: var(--jd-surface); color: var(--jd-text); border-top-left-radius: 6px; }
.jd-promo-b small { display: block; text-align: right; margin-top: 6px; font-size: .74rem; opacity: .7; }
@media (max-width: 860px) {
  .jd-promo { place-items: end center; padding: 0; }
  .jd-promo-box { grid-template-columns: 1fr; border-radius: 22px 22px 0 0; max-height: 92vh; transform: translateY(40px); }
  .jd-promo-art { display: none; }
  .jd-promo-copy { padding: 22px 20px 24px; }
  .jd-promo-brand { margin-bottom: 14px; } .jd-promo-brand img { width: 42px; height: 42px; } .jd-promo-brand strong { font-size: 1.3rem; }
  .jd-promo-copy h2 { font-size: 1.9rem; } .jd-promo-copy h2 strong { font-size: 3.6rem; }
  .jd-promo-sub { font-size: .98rem; margin-bottom: 16px; }
  .jd-promo-cta { width: 100%; justify-content: center; padding: 16px 20px; }
  .jd-promo-badges { margin-top: 18px; }
  .jd-promo-badges li { padding: 0 10px; font-size: .8rem; max-width: 33%; } .jd-promo-badges span { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .jd-promo-box, .jd-promo-scrim { transition: none; }
  .jd-promo-wheel, .jd-promo-spark { animation: none; }
  .jd-promo.is-in .jd-promo-b { animation: none; opacity: 1; transform: none; }
}
.jd-promo-badges { flex-wrap: nowrap; }
.jd-promo-badges li { flex: 1 1 0; max-width: none; padding: 0 12px; }
.jd-promo-box:focus { outline: none; }
:lang(hi) .jd-promo-eyebrow { letter-spacing: 0; text-transform: none; font-size: .95rem; }
/* the pop-up, smaller: about two-thirds of the first version */
.jd-promo-box { width: min(760px, 100%); border-radius: 20px; max-height: min(560px, calc(100vh - 32px)); }
.jd-promo-copy { padding: 26px 24px 22px 30px; }
.jd-promo-brand { gap: 10px; margin-bottom: 14px; }
.jd-promo-brand img { width: auto; height: 40px; max-width: 120px; object-fit: contain; border-radius: 0; box-shadow: none; }
.jd-promo-brand strong { font-size: 1.2rem; }
.jd-promo-brand small { font-size: .75rem; }
.jd-promo-eyebrow { font-size: .68rem; margin-bottom: 6px; }
.jd-promo-eyebrow::after { width: 36px; height: 2px; }
.jd-promo-copy h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin-bottom: 10px; }
.jd-promo-copy h2 strong { font-size: clamp(2.8rem, 5.4vw, 3.8rem); margin-top: 2px; }
.jd-promo-sub { font-size: .9rem; line-height: 1.5; margin-bottom: 14px; }
.jd-promo-cta { padding: 12px 26px; font-size: 1.05rem; gap: 12px; }
.jd-promo-badges { margin-top: 16px; }
.jd-promo-badges li { font-size: .74rem; gap: 7px; padding: 0 8px; }
.jd-promo-badges span { width: 30px; height: 30px; }
.jd-promo-badges span svg { width: 15px; height: 15px; }
.jd-promo-fine { font-size: .7rem; margin-top: 10px; }
.jd-promo-x { width: 34px; height: 34px; font-size: 20px; top: 10px; right: 10px; }
.jd-promo-art { padding: 46px 16px 22px 0; gap: 12px; min-height: 0; }
.jd-promo-wheel { width: 360px; height: 360px; margin-top: -180px; right: -70px; }
.jd-promo-glyph > span { top: -172px; font-size: 22px; left: -11px; width: 22px; }
.jd-promo-ring.is-in { inset: 50px; box-shadow: 0 0 0 28px rgba(255, 255, 255, .25); }
.jd-promo-eg { top: 16px; left: 36px; font-size: .62rem; }
.jd-promo-b { gap: 8px; }
.jd-promo-b.is-you { padding-left: 30px; } .jd-promo-b.is-astro { padding-right: 16px; }
.jd-promo-av { width: 34px; height: 34px; box-shadow: 0 0 0 3px var(--jd-surface); }
.jd-promo-av svg { width: 15px; height: 15px; }
.jd-promo-av.is-mark { width: 44px; height: 44px; overflow: hidden; }
.jd-promo-av.is-mark img { width: 34px; height: 34px; object-fit: contain; border-radius: 0; }
.jd-promo-b p { max-width: 230px; padding: 10px 14px 7px; font-size: .82rem; border-radius: 16px; }
.jd-promo-b small { font-size: .64rem; margin-top: 4px; }
.jd-promo-spark.s1 { width: 16px; height: 16px; } .jd-promo-spark.s4 { width: 13px; height: 13px; right: 60px; }
@media (max-width: 860px) {
  .jd-promo-box { max-height: 88vh; border-radius: 20px 20px 0 0; }
  .jd-promo-copy { padding: 18px 18px 20px; }
  .jd-promo-copy h2 { font-size: 1.5rem; } .jd-promo-copy h2 strong { font-size: 2.8rem; }
  .jd-promo-cta { width: 100%; justify-content: center; }
}

/* ---- Admin → Traffic ---------------------------------------------------- */
.jd-trbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; }
.jd-trbar .jd-chatfind-chips { margin: 0 0 14px; }
.jd-trnote { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.jd-traffic .jd-statgrid { margin-bottom: 16px; }
.jd-trlive strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--jd-success); margin-right: 8px; vertical-align: middle; }
.jd-trpanel { margin-bottom: 16px; min-width: 0; }
.jd-trpanel h2 { font-size: var(--jd-fs-h3); margin: 0 0 12px; }
.jd-trhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.jd-trlegend { display: flex; gap: 16px; margin: 0 0 8px; font-size: var(--jd-fs-small); color: var(--jd-text); }
.jd-trlegend span { display: inline-flex; align-items: center; gap: 6px; }
.jd-trkey { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.jd-trkey.is-views { background: var(--jd-brass); }
.jd-trkey.is-visitors { background: var(--jd-azure); }
.jd-trchart { position: relative; }
.jd-trchart svg { display: block; width: 100%; height: auto; overflow: visible; }
.jd-trgl { stroke: var(--jd-border); stroke-width: 1; }
.jd-trgl.is-base { stroke: var(--jd-border-strong); }
.jd-traxis { font: 11px var(--jd-font-num); fill: var(--jd-text-muted); }
.jd-trline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.jd-trline.is-views, .jd-trdot.is-views { stroke: var(--jd-brass); }
.jd-trline.is-visitors, .jd-trdot.is-visitors { stroke: var(--jd-azure); }
.jd-trdot { fill: var(--jd-surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.jd-trhit { fill: transparent; cursor: crosshair; }
.jd-trcross { stroke: var(--jd-text-muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.jd-trtip { position: absolute; top: 8px; z-index: 2; pointer-events: none; background: var(--jd-surface); border: 1px solid var(--jd-border-strong);
  border-radius: var(--jd-radius-sm); padding: 8px 10px; font-size: var(--jd-fs-small); box-shadow: 0 6px 18px rgba(30, 34, 51, .12); min-width: 150px; }
.jd-trtip strong { display: block; margin-bottom: 4px; }
.jd-trtip span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.jd-trtable { margin-top: 10px; font-size: var(--jd-fs-small); }
.jd-trtable summary { cursor: pointer; color: var(--jd-brass-text); }

div.jd-trgrid { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.jd-trbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jd-trbars li { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 6px; font-size: var(--jd-fs-small); overflow: hidden; }
.jd-trbars-fill { position: absolute; inset: 0 auto 0 0; background: var(--jd-brass-soft); border-radius: 6px; z-index: 0; }
.jd-trbars-k, .jd-trbars-n { position: relative; z-index: 1; }
.jd-trbars-k { min-width: 0; overflow-wrap: anywhere; }
.jd-trbars-n { font-family: var(--jd-font-num); white-space: nowrap; font-weight: 600; }
.jd-trbars-n small { font-weight: 400; color: var(--jd-text-muted); margin-left: 4px; }
.jd-trbars-unit { margin: 8px 0 0; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-trhours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 140px; border-bottom: 1px solid var(--jd-border-strong); }
.jd-trhour { height: 100%; display: flex; align-items: flex-end; }
.jd-trhour i { display: block; width: 100%; background: var(--jd-brass); border-radius: 4px 4px 0 0; }
.jd-trhour:hover i { background: var(--jd-brass-text); }
.jd-trhours-x { display: flex; justify-content: space-between; margin: 4px 0 8px; font: 11px var(--jd-font-num); color: var(--jd-text-muted); }
.jd-trgeo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.jd-trfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 16px; }
.jd-trfilter input { font: inherit; padding: 7px 10px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); min-width: 0; width: 220px; max-width: 100%; }
.jd-trip { font-family: var(--jd-font-num); white-space: nowrap; }
.jd-trmember { color: var(--jd-success-text); display: inline-flex; align-items: center; gap: 4px; }
.jd-trrecent td { vertical-align: top; }
.jd-trpager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.jd-trdel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.jd-trdel input[type=number] { width: 80px; font: inherit; padding: 5px 8px; }
.jd-trdel input[type=date] { font: inherit; padding: 5px 8px; }
.jd-trdel .jd-check { display: inline-flex; align-items: center; gap: 6px; }
.jd-btn.jd-btn-danger { background: var(--jd-caution-text); border-color: var(--jd-caution-text); color: var(--jd-surface); }
@media (max-width: 560px) { .jd-trlegend { gap: 10px; } }
.jd-trcross[hidden], .jd-trtip[hidden] { display: none; }
@media (max-width: 560px) { .jd-traxis { font-size: 22px; } .jd-traxis.is-odd { display: none; } .jd-trdot { r: 7px; } }

/* ---- Admin → Astrologer activity ---------------------------------------- */
.jd-aafilter { display: grid; gap: 10px 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; margin: 0 0 16px; }
.jd-aafilter label { display: grid; gap: 4px; font-size: var(--jd-fs-small); min-width: 0; }
.jd-aafilter label span { color: var(--jd-text-muted); font-size: var(--jd-fs-micro); }
.jd-aafilter select, .jd-aafilter input { font: inherit; padding: 7px 8px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); background: var(--jd-surface); min-width: 0; width: 100%; }
.jd-aafilter-go { display: flex; gap: 8px; flex-wrap: wrap; }
.jd-aatable td { vertical-align: top; }
.jd-aatable tr.is-warn td { background: var(--jd-caution-soft); }
.jd-aaact { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.jd-aaact.is-signin { color: var(--jd-heading); }
.jd-aatable tr.is-warn .jd-aaact { color: var(--jd-caution-text); }
.jd-aadetail { overflow-wrap: anywhere; max-width: 260px; font-size: var(--jd-fs-small); }
.jd-aapager { flex-wrap: wrap; }
.jd-aapage { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: var(--jd-radius-sm); border: 1px solid var(--jd-border); text-decoration: none; color: var(--jd-text); font-family: var(--jd-font-num); font-size: var(--jd-fs-small); }
.jd-aapage:hover { border-color: var(--jd-brass); }
.jd-aapage.is-on { background: var(--jd-heading); border-color: var(--jd-heading); color: var(--jd-surface); font-weight: 600; }
.jd-aapageinfo { text-align: center; margin: 8px 0 0; }
.jd-aakeep summary { cursor: pointer; list-style: none; }
.jd-aakeep summary::-webkit-details-marker { display: none; }
.jd-aakeep summary h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.jd-aakeep[open] summary h2 { margin-bottom: 10px; }
.jd-aakeep-h { font-size: var(--jd-fs-body); margin: 18px 0 10px; }
.jd-aakeep label[for=aa_days] { font-weight: 600; }
.jd-aakeep summary h2::after { content: "▸"; font-size: .8em; color: var(--jd-text-muted); transition: transform .15s; }
.jd-aakeep[open] summary h2::after { transform: rotate(90deg); }

/* ---- Admin → Traffic, overview layout (v2) ------------------------------ */
.jd-trtabs { margin: 0 0 14px; }
.jd-trrangebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; margin-bottom: 16px; }
.jd-trrangebar-l { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--jd-fs-small); }
.jd-trseg { display: inline-flex; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); overflow: hidden; }
.jd-trseg a { padding: 6px 12px; font-size: var(--jd-fs-small); color: var(--jd-text); text-decoration: none; border-left: 1px solid var(--jd-border); background: var(--jd-surface); white-space: nowrap; }
.jd-trseg a:first-child { border-left: 0; }
.jd-trseg a:hover { background: var(--jd-surface-alt); }
.jd-trseg a.is-on { background: var(--jd-heading); color: var(--jd-surface); font-weight: 600; }
.jd-trcustom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; font-size: var(--jd-fs-small); color: var(--jd-text-muted); }
.jd-trcustom input { font: inherit; color: var(--jd-text); padding: 5px 8px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); background: var(--jd-surface); }
.jd-trcustom.is-on input { border-color: var(--jd-heading); box-shadow: 0 0 0 1px var(--jd-heading); }
.jd-trlivepill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--jd-radius-pill); background: var(--jd-success-soft); color: var(--jd-success-text); font-size: var(--jd-fs-small); font-weight: 600; }
.jd-trlivepill i { width: 8px; height: 8px; border-radius: 50%; background: var(--jd-success-text); animation: jdTrPulse 1.8s ease-in-out infinite; }
@keyframes jdTrPulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .jd-trlivepill i { animation: none; } }

.jd-trcards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 16px; }
.jd-trcard { background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jd-trcard-ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 10px; }
.jd-trcard-ic.is-blue { background: var(--jd-tint-blue-soft); color: var(--jd-tint-blue); }
.jd-trcard-ic.is-gold { background: var(--jd-tint-gold-soft); color: var(--jd-brass-text); }
.jd-trcard-ic.is-saffron { background: var(--jd-tint-saffron-soft); color: var(--jd-tint-saffron); }
.jd-trcard-ic.is-teal { background: var(--jd-tint-teal-soft); color: var(--jd-tint-teal); }
.jd-trcard-ic.is-rose { background: var(--jd-tint-rose-soft); color: var(--jd-tint-rose); }
.jd-trcard-ic.is-violet { background: var(--jd-tint-violet-soft); color: var(--jd-tint-violet); }
.jd-trcard strong { font-family: var(--jd-font-num); font-size: 1.6rem; line-height: 1.15; color: var(--jd-heading); }
.jd-trcard > span:not(.jd-trcard-ic) { font-size: var(--jd-fs-micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--jd-text-muted); }
.jd-trcard small { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }

.jd-trrow { display: grid; gap: 16px; margin-bottom: 0; }
.jd-trrow.is-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.jd-trrow.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .jd-trrow.is-wide, .jd-trrow.is-three { grid-template-columns: minmax(0, 1fr); } }
.jd-trpanel h2 { display: flex; align-items: center; gap: 8px; }
.jd-trpanel h2 svg { color: var(--jd-tint-blue); flex: 0 0 auto; }
.jd-trarea { stroke: none; }
.jd-trarea.is-views { fill: var(--jd-brass); opacity: .10; }
.jd-trarea.is-visitors { fill: var(--jd-azure); opacity: .10; }

.jd-trdonut { display: block; width: 100%; max-width: 210px; margin: 4px auto 14px; }
.jd-trdonut-bg { fill: none; stroke: var(--jd-surface-alt); stroke-width: 22; }
.jd-trdonut-seg { fill: none; stroke-width: 22; transform: rotate(-90deg); transform-origin: 80px 80px; transition: stroke-width .15s; }
.jd-trdonut-seg:hover { stroke-width: 26; }
.jd-trdonut-big { font: 700 22px var(--jd-font-num); fill: var(--jd-heading); text-anchor: middle; }
.jd-trdonut-small { font: 600 9px var(--jd-font-body); fill: var(--jd-text-muted); text-anchor: middle; letter-spacing: .06em; }
.jd-trlegend2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: var(--jd-fs-small); }
.jd-trlegend2 li { display: flex; align-items: center; gap: 8px; }
.jd-trlegend2 i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.jd-trlegend2 .k { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 6px; }
.jd-trlegend2 .k svg { color: var(--jd-text-muted); }
.jd-trlegend2 .v { font-family: var(--jd-font-num); font-weight: 600; white-space: nowrap; }
.jd-trlegend2 .v small { font-weight: 400; color: var(--jd-text-muted); }
.jd-trlang { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--jd-border); font-size: var(--jd-fs-small); color: var(--jd-text-muted); }

.jd-trheat { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.jd-trheat-c { aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 9px; font: 600 12px var(--jd-font-num); color: var(--jd-heading);
  background: rgb(47 109 168 / var(--a, 0)); transition: transform .15s; cursor: default; }
.jd-trheat-c.is-zero { background: var(--jd-surface-alt); color: var(--jd-text-muted); }
.jd-trheat-c.is-dark { color: var(--jd-surface); }
.jd-trheat-c:hover { transform: scale(1.1); box-shadow: 0 6px 14px -4px rgba(30, 34, 51, .3); }
.jd-trheat-leg { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-trheat-leg i { width: 120px; height: 8px; border-radius: 6px; background: linear-gradient(90deg, rgb(47 109 168 / .14), rgb(47 109 168 / 1)); }
.jd-trcenter { text-align: center; margin: 0; }

.jd-trcols { display: flex; align-items: flex-end; gap: 10px; height: 220px; padding-top: 6px; border-bottom: 1px solid var(--jd-border-strong); }
.jd-trcol { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.jd-trcol b { font: 600 12px var(--jd-font-num); color: var(--jd-text); }
.jd-trcol-bar { width: 100%; max-width: 44px; flex: 1 1 auto; display: flex; align-items: flex-end; }
.jd-trcol-bar i { display: block; width: 100%; background: var(--jd-azure); border-radius: 4px 4px 0 0; }
.jd-trcol:hover .jd-trcol-bar i { background: var(--jd-heading); }
.jd-trcol small { font-size: 11px; color: var(--jd-text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-bottom: -22px; }
.jd-trcols + .jd-trbars-unit { margin-top: 28px; }

.jd-trlong { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jd-trlong li { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr) auto; align-items: center; gap: 14px; font-size: var(--jd-fs-small); }
.jd-trlong .k { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.jd-trflag { font-size: 1.1em; line-height: 1; }
.jd-trlong .bar { height: 8px; border-radius: 6px; background: var(--jd-surface-alt); overflow: hidden; }
.jd-trlong .bar i { display: block; height: 100%; border-radius: 6px; background: var(--jd-azure); }
.jd-trlong .v { white-space: nowrap; color: var(--jd-text-muted); font-size: var(--jd-fs-micro); }
.jd-trlong .v b { color: var(--jd-text); font: 600 var(--jd-fs-small) var(--jd-font-num); }
@media (max-width: 560px) { .jd-trlong li { grid-template-columns: minmax(0, 1fr) auto; } .jd-trlong .bar { grid-column: 1 / -1; order: 3; } }

.jd-trptitle { font-weight: 600; }
.jd-trpath { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-trpathcell { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--jd-fs-micro); overflow-wrap: anywhere; }
.jd-trsrc { display: inline-block; padding: 2px 8px; border-radius: var(--jd-radius-pill); background: var(--jd-surface-alt); font-size: var(--jd-fs-micro); font-weight: 600; }
.jd-trdev { display: inline-block; padding: 2px 9px; border-radius: var(--jd-radius-pill); font-size: var(--jd-fs-micro); font-weight: 600; background: var(--jd-tint-blue-soft); color: var(--jd-tint-blue); }
.jd-trdev.is-mobile { background: var(--jd-tint-gold-soft); color: var(--jd-brass-text); }
.jd-trdev.is-tablet { background: var(--jd-tint-rose-soft); color: var(--jd-tint-rose); }
.jd-trip a { color: var(--jd-tint-rose); }
@media (min-width: 1200px) { .jd-trcards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1199px) and (min-width: 700px) { .jd-trcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .jd-trcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jd-trrecent .jd-trpathcell { min-width: 150px; word-break: normal; overflow-wrap: anywhere; }
.jd-trlang span { min-width: 0; }

/* ---- Admin → Alerts ------------------------------------------------------ */
.jd-alerts .jd-fieldset legend { display: inline-flex; align-items: center; gap: 6px; }
.jd-algroups { display: grid; gap: 18px 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.jd-algroup h3 { font-size: var(--jd-fs-small); text-transform: uppercase; letter-spacing: .05em; color: var(--jd-text-muted); margin: 0 0 8px; }
.jd-alev { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); margin-bottom: 8px; cursor: pointer; background: var(--jd-surface); }
.jd-alev:has(input:checked) { border-color: var(--jd-tint-blue-line); background: var(--jd-tint-blue-soft); }
.jd-alev input { margin: 3px 0 0; flex: 0 0 auto; width: auto; }
.jd-alev-ic { color: var(--jd-tint-blue); flex: 0 0 auto; margin-top: 1px; }
.jd-alev-t { display: grid; gap: 2px; min-width: 0; }
.jd-alev-t strong { font-size: var(--jd-fs-small); }
.jd-alev-t small { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-alsave { display: flex; gap: 10px; flex-wrap: wrap; }
.jd-alfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--jd-fs-small); }
.jd-alfilter select { font: inherit; padding: 6px 8px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); background: var(--jd-surface); }
.jd-alfilter .jd-check { display: inline-flex; align-items: center; gap: 6px; }
.jd-altable td { vertical-align: top; }
.jd-altable tr.is-warn td { background: var(--jd-caution-soft); }
.jd-alto { font-size: var(--jd-fs-small); overflow-wrap: anywhere; max-width: 240px; }
.jd-usfilter .jd-usq { grid-column: span 2; }
@media (max-width: 560px) { .jd-usfilter .jd-usq { grid-column: auto; } }
.jd-ustable td { vertical-align: top; }
.jd-ustable .jd-pill { font-size: 11px; padding: 1px 7px; vertical-align: 1px; }
.jd-visitcount { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.jd-visitcount svg { opacity: .8; flex: 0 0 auto; }
.jd-trcounterset { padding: 10px 12px; border: 1px dashed var(--jd-border-strong); border-radius: var(--jd-radius-sm); }
.jd-trcounterset .jd-trdel { margin: 8px 0 4px; }

/* ---- Home: "It shows its working" — night-sky banner -------------------- */
.jd-rulehero { position: relative; overflow: hidden; background: var(--jd-ink); color: var(--jd-text-on-dark); isolation: isolate; }
.jd-rulehero-bg { position: absolute; inset: 0; z-index: -2; }
.jd-rulehero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; }
/* Darkens the sky behind the words; the wheel on the left stays bright. */
.jd-rulehero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(15 14 30 / .05) 0%, rgb(15 14 30 / .5) 32%, rgb(15 14 30 / .5) 58%, rgb(15 14 30 / .12) 100%); }
.jd-rulehero-in { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 1.35fr) minmax(280px, 1.05fr); align-items: center; gap: 32px;
  min-height: 420px; padding-top: 56px; padding-bottom: 56px; }
.jd-rulehero-copy h2 { font-family: var(--jd-font-head); font-size: var(--jd-fs-h2); color: #fff; margin: 0 0 14px; line-height: 1.15; }
.jd-rulehero-copy p { color: var(--jd-text-on-dark); font-size: 1.02rem; line-height: 1.7; margin: 0 0 22px; max-width: 46ch; text-shadow: 0 1px 2px rgb(0 0 0 / .4); }
.jd-btn.jd-rulehero-btn { background: var(--jd-cream); color: var(--jd-ink); border-color: var(--jd-cream); border-radius: var(--jd-radius-pill); padding-inline: 24px; }
.jd-btn.jd-rulehero-btn:hover, .jd-btn.jd-rulehero-btn:focus-visible { background: #fff; border-color: #fff; color: var(--jd-ink); }

.jd-rulemini { align-self: end; justify-self: start; width: 100%; max-width: 250px; padding: 16px 18px; border-radius: var(--jd-radius);
  background: rgb(17 18 38 / .78); border: 1px solid rgb(220 174 85 / .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 34px -12px rgb(0 0 0 / .6); margin-top: 120px; }
.jd-rulemini-h { margin: 0 0 8px; font-size: var(--jd-fs-small); font-weight: 600; color: #fff; }
.jd-rulemini ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.jd-rulemini li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--jd-fs-small); color: var(--jd-text-on-dark); }
.jd-rulemini li svg { color: var(--jd-success); flex: 0 0 auto; stroke-width: 2.6; }

.jd-rulewhy { background: var(--jd-cream); color: var(--jd-text); border-radius: 18px; padding: 22px 24px 24px; box-shadow: 0 22px 44px -18px rgb(0 0 0 / .65); position: relative; }
.jd-rulewhy-tag { position: absolute; top: -11px; right: 18px; margin: 0; padding: 3px 10px; border-radius: var(--jd-radius-pill); background: var(--jd-ink); color: var(--jd-brass-on-dark);
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.jd-rulewhy h3 { font-family: var(--jd-font-head); font-size: 1.15rem; color: var(--jd-heading); margin: 0 0 14px; line-height: 1.3; }
.jd-rulewhy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.jd-rulewhy li { display: flex; align-items: center; gap: 12px; font-size: var(--jd-fs-small); line-height: 1.45; }
.jd-rulewhy-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--jd-heading); color: var(--jd-brass-on-dark); }
.jd-rulewhy li strong { color: var(--jd-heading); }
.jd-rulewhy-arrow { color: var(--jd-brass-text); margin: 0 2px; }

@media (max-width: 1050px) {
  .jd-rulehero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
  .jd-rulehero-copy { grid-column: 1 / -1; order: -1; }
  .jd-rulemini { margin-top: 0; align-self: stretch; max-width: none; }
}
@media (max-width: 640px) {
  .jd-rulehero-in { grid-template-columns: minmax(0, 1fr); padding-top: 40px; padding-bottom: 40px; gap: 22px; }
  .jd-rulehero::after { background: linear-gradient(0deg, rgb(15 14 30 / .7), rgb(15 14 30 / .45)); }
  .jd-rulehero-bg img { object-position: 12% center; }
}

/* ---- Graha pictures (assets/img/graha) ---------------------------------- */
.jd-graha { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.jd-ls-big.has-img { width: 76px; height: 76px; padding: 0; background: var(--jd-ink); overflow: hidden;
  box-shadow: 0 0 0 2px var(--jd-pl, var(--jd-brass)), 0 8px 22px rgba(23, 20, 31, .28); }
.jd-rulewhy-ic:has(.jd-graha) { width: 36px; height: 36px; overflow: hidden; background: var(--jd-ink); box-shadow: 0 0 0 1.5px var(--jd-brass); }
@media (max-width: 760px) { .jd-ls-big.has-img { width: 60px; height: 60px; } }

/* Planet pictures in the timeline bar: never wider than the segment (a short
   first or last period, e.g. a Moon dasha half over at birth, must not be cut
   by the arrow shape) — and left out when the segment is a sliver. */
.jd-ls-chip .jd-ls-gl.has-img { width: min(30px, calc(100% - 24px)); height: auto; aspect-ratio: 1; padding: 0; border-radius: 50%; overflow: hidden;
  background: var(--jd-ink); box-shadow: 0 0 0 1.5px rgb(255 255 255 / .85); }
@media (max-width: 560px) { .jd-ls-chip .jd-ls-gl.has-img { width: min(22px, calc(100% - 22px)); box-shadow: 0 0 0 1px rgb(255 255 255 / .85); } }
.jd-ls-gl.has-img .jd-graha { height: auto; }
/* By the width each segment really has (container query), not by guesswork:
   wide enough → the picture; slim → the small line glyph; a sliver → nothing. */
.jd-ls-chip { container-type: inline-size; }
.jd-ls-chip .jd-ls-gl.is-alt { display: none; width: 14px; height: 14px; background: none; }
.jd-ls-chip .jd-ls-gl.is-alt svg { width: 12px; height: 12px; }
@container (max-width: 47px) {
  .jd-ls-gl.has-img { display: none !important; }
  .jd-ls-gl.is-alt { display: inline-flex !important; }
}
@container (max-width: 25px) { .jd-ls-gl.is-alt { display: none !important; } }

/* ---- Kundli explained ---------------------------------------------------- */
.jd-explain { margin: 18px 0; border-inline-start: 4px solid var(--jd-brass); }
.jd-explain h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.jd-explain h2 svg { color: var(--jd-brass-text); }
.jd-explain-list { margin: 12px 0 0; padding-inline-start: 1.15em; display: grid; gap: 10px; line-height: 1.65; }
.jd-explain-list li::marker { color: var(--jd-brass); }
.jd-term { display: inline-block; position: relative; vertical-align: middle; text-transform: none; letter-spacing: 0; font-weight: 400; }
.jd-term > summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid var(--jd-brass-text); color: var(--jd-brass-text); font: italic 700 11px/1 Georgia, serif; }
.jd-term > summary::-webkit-details-marker { display: none; }
.jd-term > summary:hover, .jd-term[open] > summary { background: var(--jd-brass-text); color: var(--jd-surface); }
.jd-term > summary:focus-visible { outline: 2px solid var(--jd-focus); outline-offset: 2px; }
.jd-term-pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(280px, 80vw);
  padding: 10px 12px; border-radius: var(--jd-radius-sm); background: var(--jd-ink); color: var(--jd-text-on-dark);
  font-size: var(--jd-fs-small); line-height: 1.55; text-align: start; white-space: normal; box-shadow: 0 10px 26px rgba(23, 20, 31, .3); }
.jd-term-pop strong { color: var(--jd-brass-on-dark); }
@media (max-width: 640px) { .jd-term-pop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; transform: none; } }
.jd-readchart { margin-top: 12px; border-top: 1px solid var(--jd-border); padding-top: 10px; }
.jd-readchart > summary { cursor: pointer; font-weight: 600; color: var(--jd-brass-text); display: inline-flex; align-items: center; gap: 6px; }
.jd-readchart p { line-height: 1.6; margin: 10px 0; }
.jd-housetable td { vertical-align: top; font-size: var(--jd-fs-small); }
.jd-housetable tr.has-pl td { background: var(--jd-brass-soft); }
.jd-chart polygon:hover { fill: var(--jd-brass-soft); }
.jd-optin { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 14px; font-size: var(--jd-fs-small); color: var(--jd-text-muted); line-height: 1.5; cursor: pointer; }
.jd-optin input { width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--jd-brass-text); }

/* -- one article with its sidebar -- */
.jd-postlayout { padding-block: 0; }
.jd-postlayout .jd-post { max-width: 760px; min-width: 0; }
.jd-postside { align-self: stretch; padding-block: clamp(22px, 4vw, 44px) clamp(40px, 6vw, 64px); }
@media (min-width: 961px) { .jd-postside { padding-block-start: calc(clamp(22px, 4vw, 44px) + 60px); } }
.jd-sidestick { display: flex; flex-direction: column; gap: 18px; }
.jd-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.jd-toc li { counter-increment: toc; }
.jd-toc li + li { border-top: 1px solid var(--jd-border); }
.jd-toc a {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; padding: 8px 2px;
  font-size: var(--jd-fs-small); line-height: 1.4; color: var(--jd-text); text-decoration: none;
}
.jd-toc a::before { content: counter(toc); font-weight: 700; color: var(--jd-brass-text); font-variant-numeric: tabular-nums; }
.jd-toc a:hover, .jd-toc a[aria-current] { color: var(--jd-brass-text); }
.jd-sidecta { background: var(--jd-heading); border-color: transparent; color: #fff; }
.jd-sidecta h2 { color: #fff; }
.jd-sidecta p { font-size: var(--jd-fs-small); line-height: 1.55; margin: 0 0 14px; color: rgba(255,255,255,.86); }
.jd-sidecta .jd-btn { width: 100%; justify-content: center; }
@media (min-width: 961px) { .jd-sidestick { position: sticky; top: 88px; } }
/* On a phone the sidebar follows the article: the headings would list text
   already read, and the article ends with the same Kundli box. */
@media (max-width: 960px) {
  .jd-postside { padding-block: 0 clamp(40px, 6vw, 64px); }
  .jd-toc, .jd-sidestick { display: none; }
}

/* -- article send: the tick list -- */
.jd-subpick { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--jd-border); }
.jd-subpick h3 { font-size: var(--jd-fs-h3); margin: 0 0 6px; }
.jd-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.jd-subtabs a {
  padding: 6px 12px; border: 1px solid var(--jd-border); border-radius: var(--jd-radius-pill);
  font-size: var(--jd-fs-small); text-decoration: none; color: var(--jd-text); background: var(--jd-surface);
}
.jd-subtabs a[aria-current] { background: var(--jd-heading); border-color: var(--jd-heading); color: var(--jd-surface); font-weight: 600; }
.jd-subsearch { display: flex; gap: 8px; margin: 0 0 12px; max-width: 460px; }
.jd-subsearch input { flex: 1; min-width: 0; }
.jd-subtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.jd-subcount { font-size: var(--jd-fs-small); color: var(--jd-text-muted); font-variant-numeric: tabular-nums; }
.jd-subtools [data-act=send] { margin-inline-start: auto; }
.jd-subprogress { margin: 0 0 10px; padding: 10px 14px; border-radius: var(--jd-radius-sm); background: var(--jd-brass-soft); color: var(--jd-brass-text); font-weight: 600; }
.jd-subtable td { vertical-align: middle; }
.jd-subtable td:first-child { width: 36px; }
.jd-subtable input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--jd-brass-text); }
.jd-subtable tr.is-sent td { color: var(--jd-text-muted); }
.jd-subtable label { cursor: pointer; overflow-wrap: anywhere; }
.jd-subtable .jd-pill { font-size: 11px; padding: 2px 8px; white-space: nowrap; }
@media (max-width: 600px) { .jd-subtools [data-act=send] { margin-inline-start: 0; width: 100%; } }

.jd-btn:disabled, .jd-btn[disabled] { opacity: .45; cursor: not-allowed; }
.jd-subnothing { margin: 4px 0 14px; padding: 12px 16px; border-radius: var(--jd-radius-sm); background: var(--jd-success-soft); color: var(--jd-success-text); }
.jd-subnothing a { font-weight: 600; color: inherit; }
.jd-subtools[hidden] { display: none; }
.jd-subtable input[type=checkbox]:disabled { cursor: not-allowed; }

/* -- social media links (footer, under the brand text) -- */
.jd-social { margin-top: 20px; }
.jd-social-h {
  margin: 0 0 10px; font-size: var(--jd-fs-micro); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--jd-brass-on-dark);
}
.jd-social ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jd-social a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 13px 6px 10px;
  border: 1px solid var(--jd-ink-line); border-radius: var(--jd-radius-pill);
  font-size: var(--jd-fs-small); color: var(--jd-text-on-dark); text-decoration: none;
  transition: border-color .15s, color .15s;
}
.jd-social a svg { color: var(--jd-brass-on-dark); flex: none; }
.jd-social a:hover, .jd-social a:focus-visible { border-color: var(--jd-brass-on-dark); color: var(--jd-brass-on-dark); }
/* admin */
.jd-sofield label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.jd-so-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--jd-brass-soft); color: var(--jd-brass-text); }
.jd-sopreview { background: var(--jd-ink); border-radius: var(--jd-radius); padding: 4px 22px 22px; }
html[lang="hi"] .jd-social-h { text-transform: none; letter-spacing: .04em; }

/* -- home: the blog strip as a slider when there are more than four -- */
.jd-blogslide { position: relative; --gap: clamp(14px, 1.6vw, 22px); --per: 4; }
@media (max-width: 1080px) { .jd-blogslide { --per: 2; } }
@media (max-width: 600px)  { .jd-blogslide { --per: 1.15; } }
.jd-blogslide-track {
  display: flex; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 6px;
}
.jd-blogslide-track::-webkit-scrollbar { display: none; }
.jd-blogslide-track:focus-visible { outline: 2px solid var(--jd-brass); outline-offset: 4px; border-radius: var(--jd-radius); }
.jd-blogslide-item { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align: start; min-width: 0; display: flex; }
.jd-blogslide-item > .jd-postcard { width: 100%; }
.jd-blogslide .jd-postcard-title { font-size: 1.12rem; margin-inline: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.jd-blogslide .jd-postcard-meta, .jd-blogslide .jd-postcard-excerpt { padding-inline: 16px; }
.jd-blogslide .jd-postcard-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding-bottom: 0; margin-bottom: 18px; }
.jd-blogslide .jd-postcard .jd-postcat { margin-inline: 16px; }
.jd-blogslide-nav { display: none; justify-content: center; gap: 10px; margin-top: 16px; }
.jd-blogslide.is-js .jd-blogslide-nav { display: flex; }
.jd-blogslide-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--jd-border-strong); background: var(--jd-surface); color: var(--jd-heading); cursor: pointer;
}
.jd-blogslide-btn:hover, .jd-blogslide-btn:focus-visible { border-color: var(--jd-brass); color: var(--jd-brass-text); }
.jd-blogslide-btn[data-go=prev] svg { transform: scaleX(-1); }
.jd-blogslide-pause .i-play { display: none; }
.jd-blogslide.is-paused .jd-blogslide-pause .i-play { display: block; }
.jd-blogslide.is-paused .jd-blogslide-pause .i-pause { display: none; }

/* -- admin: the notification bell (top bar) -- */
.jd-bell { position: relative; }
.jd-bell-btn {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--jd-border); background: var(--jd-surface); color: var(--jd-heading); cursor: pointer;
}
.jd-bell-btn:hover, .jd-bell-btn[aria-expanded="true"] { border-color: var(--jd-brass); color: var(--jd-brass-text); }
.jd-bell-n {
  position: absolute; top: -5px; inset-inline-end: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: var(--jd-radius-pill); border: 2px solid var(--jd-surface);
  background: var(--jd-caution-text); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.jd-bell-n[hidden] { display: none; }
.jd-bell-panel {
  position: absolute; top: calc(100% + 10px); inset-inline-end: -8px; z-index: 30; width: min(380px, calc(100vw - 24px));
  background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); box-shadow: var(--jd-shadow-md, 0 12px 32px rgba(23,20,31,.16));
  overflow: hidden;
}
.jd-bell-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--jd-border); }
.jd-bell-head a { font-size: var(--jd-fs-small); color: var(--jd-brass-text); font-weight: 600; text-decoration: none; }
.jd-bell-list { list-style: none; margin: 0; padding: 0; max-height: min(420px, 70vh); overflow-y: auto; }
.jd-bell-list li + li { border-top: 1px solid var(--jd-border); }
.jd-bell-list a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 16px; text-decoration: none; color: var(--jd-text); }
.jd-bell-list a:hover { background: var(--jd-surface-alt); }
.jd-bell-list li.is-new a { background: var(--jd-brass-soft); }
.jd-bell-empty { margin: 0; padding: 18px 16px; color: var(--jd-text-muted); font-size: var(--jd-fs-small); }
.jd-bell-empty[hidden] { display: none; }

/* shared by the bell, the notifications page and the dashboard */
.jd-not-ic { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--jd-surface-alt); color: var(--jd-heading); flex: none; }
.is-new > .jd-not-ic, .is-new .jd-not-ic { background: var(--jd-surface); color: var(--jd-brass-text); }
.jd-not-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jd-not-kind { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--jd-text-muted); }
html[lang="hi"] .jd-not-kind { letter-spacing: 0; text-transform: none; font-size: 12px; }
.jd-not-title { font-size: var(--jd-fs-small); line-height: 1.4; color: var(--jd-text); overflow-wrap: anywhere; }
a.jd-not-title { text-decoration: none; }
a.jd-not-title:hover { color: var(--jd-brass-text); text-decoration: underline; }
.jd-not-ago { font-size: 12px; color: var(--jd-text-muted); white-space: nowrap; }
.jd-not-dot { display: inline-block; margin-inline-start: 6px; padding: 0 7px; border-radius: var(--jd-radius-pill); background: var(--jd-caution-text); color: #fff; font-size: 10px; letter-spacing: .04em; vertical-align: 1px; }

/* -- admin: notifications page -- */
.jd-notbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 14px; }
.jd-notbar form { margin: 0; }
.jd-notbar .jd-muted { margin-inline-start: auto; }
.jd-notlist { list-style: none; margin: 0; padding: 0; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); overflow: hidden; }
.jd-notlist li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px 16px; }
.jd-notlist li + li { border-top: 1px solid var(--jd-border); }
.jd-notlist li.is-new { background: var(--jd-brass-soft); }
.jd-notlist-sm { border: 0; border-radius: 0; background: none; }
.jd-notlist-sm li { padding: 10px 0; }
.jd-notlist-sm li.is-new { background: none; }
.jd-notempty { padding: 20px 0; }

/* -- admin: dashboard -- */
.jd-dash { max-width: 1180px; }
/* tones for the icon tiles, sparklines and feed icons */
.tone-azure   { --tone: var(--jd-azure);   --tone-soft: var(--jd-azure-soft); }
.tone-violet  { --tone: var(--jd-violet);  --tone-soft: var(--jd-violet-soft); }
.tone-teal    { --tone: var(--jd-teal);    --tone-soft: var(--jd-teal-soft); }
.tone-rose    { --tone: var(--jd-rose);    --tone-soft: var(--jd-rose-soft); }
.tone-saffron { --tone: var(--jd-saffron); --tone-soft: var(--jd-saffron-soft); }

.jd-dashhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.jd-dashhi { display: flex; align-items: center; gap: 14px; }
.jd-dashsun { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; flex: none; }
.jd-dashsun.is-morning, .jd-dashsun.is-afternoon { background: var(--jd-brass-soft); color: var(--jd-brass); }
.jd-dashsun.is-evening { background: var(--jd-violet-soft); color: var(--jd-violet); }
.jd-dashhello { font-family: var(--jd-font-head); font-size: var(--jd-fs-h2); line-height: 1.15; color: var(--jd-heading); margin: 0; }
.jd-dashdate { margin: 2px 0 0; font-size: var(--jd-fs-small); color: var(--jd-text-muted); }
.jd-dashrange { display: flex; gap: 6px; }
.jd-dashrange a {
  padding: 8px 16px; border: 1px solid var(--jd-border); border-radius: var(--jd-radius-pill); background: var(--jd-surface);
  font-size: var(--jd-fs-small); font-weight: 600; color: var(--jd-text); text-decoration: none; box-shadow: var(--jd-shadow-sm);
}
.jd-dashrange a[aria-current] { background: var(--jd-heading); border-color: var(--jd-heading); color: var(--jd-surface); }

.jd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .jd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .jd-kpis { grid-template-columns: minmax(0, 1fr); } }
.jd-kpi {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "ic main spark" "foot foot foot"; gap: 4px 14px;
  padding: 16px 16px 14px; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: 14px;
  box-shadow: var(--jd-shadow-sm); text-decoration: none; color: var(--jd-text); min-width: 0; transition: border-color .15s, transform .15s;
}
a.jd-kpi:hover { border-color: var(--tone); transform: translateY(-1px); }
.jd-kpi-ic { grid-area: ic; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--tone-soft); color: var(--tone); }
.jd-kpi-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.jd-kpi-h { font-size: var(--jd-fs-small); color: var(--jd-text-muted); }
.jd-kpi strong { font-size: 1.7rem; line-height: 1.2; color: var(--jd-heading); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.jd-kpi-foot { grid-area: foot; display: flex; align-items: baseline; gap: 8px; margin-top: 6px; min-width: 0; }
.jd-dl { font-size: 12px; font-weight: 700; color: var(--jd-text-muted); white-space: nowrap; }
.jd-dl.is-up { color: var(--jd-success-text); }
.jd-dl.is-down { color: var(--jd-caution-text); }
.jd-kpi-vs { font-size: 11.5px; color: var(--jd-text-muted); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-kspark { grid-area: spark; align-self: end; display: flex; align-items: flex-end; gap: 2px; width: 48px; height: 30px; }
.jd-kspark i { flex: 1 1 0; height: max(var(--h), 8%); background: var(--tone); opacity: .45; border-radius: 2px 2px 0 0; }
.jd-kspark i:last-child { opacity: 1; }

.jd-kpistrip {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 16px; border-radius: 10px;
  background: var(--jd-azure-soft); color: var(--jd-text); font-size: var(--jd-fs-small);
}
.jd-kpistrip svg { color: var(--jd-azure); flex: none; }
.jd-kpistrip strong { color: var(--jd-heading); }

.jd-dashcharts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
@media (max-width: 900px) { .jd-dashcharts { grid-template-columns: minmax(0, 1fr); } }
.jd-dash .jd-panel { padding: 20px; border-radius: 14px; }
.jd-dash .jd-panel h2 { display: flex; align-items: center; gap: 8px; font-size: 1.08rem; margin: 0; }
.jd-dash .jd-panel h2 svg { color: var(--jd-azure); flex: none; }
.jd-dbchart { min-width: 0; }
.jd-dbchart-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.jd-dbchart-tot { display: flex; flex-direction: column; align-items: flex-end; }
.jd-dbchart-tot strong { font-size: 1.45rem; line-height: 1.1; color: var(--jd-heading); font-variant-numeric: tabular-nums; }
.jd-dbplot { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; height: 170px; }
.jd-dby { position: relative; }
.jd-dby span { position: absolute; right: 0; bottom: var(--y); transform: translateY(50%); font-size: 11px; color: var(--jd-text-muted); font-variant-numeric: tabular-nums; }
.jd-dbarea { position: relative; border-left: 1px solid var(--jd-border); }
.jd-dbgrid { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px solid var(--jd-border); }
.jd-dbgrid:first-child { border-top-color: var(--jd-border-strong); }
.jd-dbbars { position: absolute; inset: 0 0 0 4px; display: flex; align-items: flex-end; gap: 3px; }
.jd-dbbar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.jd-dbbar i { display: block; width: 100%; height: max(var(--h), 2px); background: var(--jd-brass); border-radius: 3px 3px 0 0; }
.jd-dbbar:hover i { background: var(--jd-brass-text); }
.jd-dbx { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; margin-top: 6px; }
.jd-dbx > div { display: flex; gap: 3px; padding-left: 4px; }
.jd-dbx > div span { flex: 1 1 0; min-width: 0; font-size: 11px; color: var(--jd-text-muted); white-space: nowrap; overflow: visible; text-align: center; direction: ltr; }
.jd-dbx > div span:last-child { display: flex; justify-content: flex-end; }

.jd-dashcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
@media (max-width: 900px) { .jd-dashcols { grid-template-columns: minmax(0, 1fr); } }
.jd-dashpanelhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.jd-dashpanelhead a { display: inline-flex; align-items: center; gap: 4px; font-size: var(--jd-fs-small); font-weight: 600; color: var(--jd-heading); text-decoration: none; }
.jd-dashpanelhead a:hover { color: var(--jd-brass-text); }
.jd-dashfeed { list-style: none; margin: 0; padding: 0; }
.jd-dashfeed li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; }
.jd-dashfeed li + li { border-top: 1px solid var(--jd-border); }
.jd-feed-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tone-soft, var(--jd-azure-soft)); color: var(--tone, var(--jd-azure)); flex: none; }
.jd-feed-t { display: flex; flex-direction: column; min-width: 0; font-size: var(--jd-fs-small); }
.jd-feed-t a, .jd-feed-t > span:not(.jd-feed-k) { color: var(--jd-text); text-decoration: none; overflow-wrap: anywhere; }
.jd-feed-t a:hover { color: var(--jd-brass-text); text-decoration: underline; }
.jd-feed-k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--jd-text-muted); }
html[lang="hi"] .jd-feed-k { letter-spacing: 0; text-transform: none; font-size: 12px; }
.jd-dashfeed li.is-new .jd-feed-t a, .jd-dashfeed li.is-new .jd-feed-t > span:not(.jd-feed-k) { font-weight: 600; }
.jd-feed-ago { font-size: 12px; color: var(--jd-text-muted); white-space: nowrap; }
.jd-dashsub { font-size: 1rem; margin: 18px 0 10px; color: var(--jd-heading); }
.jd-dashrank { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.jd-dashrank li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 110px) 3.5ch; gap: 12px; align-items: center; font-size: var(--jd-fs-small); }
.jd-rk-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-rk-bar { height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--jd-brass) var(--w), var(--jd-surface-alt) var(--w)); }
.jd-rk-n { font-variant-numeric: tabular-nums; color: var(--jd-text-muted); text-align: end; }
.jd-dashquick { margin-top: 18px; }
.jd-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.jd-quick a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--jd-border); border-radius: 12px; text-decoration: none; color: var(--jd-text); font-weight: 600; font-size: var(--jd-fs-small); }
.jd-quick a:hover { border-color: var(--tone); }
@media (max-width: 600px) {
  .jd-bell-panel { position: fixed; top: 64px; left: 12px; right: 12px; inset-inline-end: 12px; width: auto; }
}

/* -- the follow card under a Kundli -- */
.jd-follow {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start;
  margin: 0 0 22px; padding: 20px 22px; border-radius: var(--jd-radius);
  background: var(--jd-azure-soft); border: 1px solid var(--jd-border);
}
.jd-follow-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--jd-surface); color: var(--jd-azure); }
.jd-follow h2 { font-size: var(--jd-fs-h3); margin: 2px 0 6px; padding-inline-end: 90px; }
.jd-follow p { margin: 0 0 14px; color: var(--jd-text); max-width: 60ch; }
.jd-follow-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.jd-follow-btns .jd-btn { display: inline-flex; align-items: center; gap: 6px; }
.jd-follow-x { position: absolute; top: 14px; inset-inline-end: 16px; font-size: var(--jd-fs-small); color: var(--jd-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.jd-follow-x:hover { color: var(--jd-text); }
@media (max-width: 560px) {
  .jd-follow { grid-template-columns: minmax(0, 1fr); }
  .jd-follow-ic { width: 44px; height: 44px; }
  .jd-follow h2 { padding-inline-end: 0; }
  .jd-follow-x { position: static; display: inline-block; margin-top: 10px; }
}
.jd-sendmode fieldset { border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); padding: 12px 16px; margin: 0 0 12px; display: grid; gap: 8px; }
.jd-sendmode legend { font-weight: 700; font-size: var(--jd-fs-small); padding: 0 6px; }
.jd-sendmode .jd-radio { display: flex; gap: 8px; align-items: flex-start; font-size: var(--jd-fs-small); }

/* ---- dashboard: sales funnel and sales by product ---- */
.jd-salescols { margin-top: 18px; }
.jd-fsteps { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.jd-fsteps li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; grid-template-areas: "t bar n" "t p p"; column-gap: 12px; align-items: center; }
.jd-fs-t { grid-area: t; font-size: .9rem; color: var(--jd-text); }
.jd-fs-bar { grid-area: bar; height: 10px; border-radius: 6px; background: var(--jd-surface-alt); overflow: hidden; }
.jd-fs-bar > span { display: block; height: 100%; width: var(--w); background: var(--jd-teal); border-radius: 6px; }
.jd-fs-n { grid-area: n; font-variant-numeric: tabular-nums; color: var(--jd-heading); min-width: 3ch; text-align: right; }
.jd-fs-p { grid-area: p; font-size: .78rem; color: var(--jd-text-muted); text-align: right; }
.jd-fs-total { margin: 4px 0 14px; font-weight: 600; color: var(--jd-heading); font-size: .92rem; }
.jd-salestable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jd-salestable tfoot th, .jd-salestable tfoot td { border-top: 2px solid var(--jd-border); }
.jd-salesrep { list-style: none; padding: 0; margin: 14px 0 8px; display: grid; gap: 8px; }
.jd-salesrep li { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; }
.jd-salesrep svg { flex: none; margin-top: 2px; color: var(--jd-text-muted); }
@media (max-width: 520px) { .jd-fsteps li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t n" "bar bar" "p p"; row-gap: 4px; } }

/* ---- full report: sample pages, own-chart preview, offer with pages ---- */
.jd-lrsample { margin: 22px 0 18px; }
.jd-lrpages { list-style: none; margin: 12px 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
.jd-lrpages li { scroll-snap-align: start; }
.jd-lrpages a { display: block; text-decoration: none; color: var(--jd-text); }
.jd-lrpages img { display: block; width: 100%; height: auto; border: 1px solid var(--jd-border); border-radius: 6px; box-shadow: 0 2px 8px rgba(29, 43, 99, .08); background: #fff; transition: transform .15s ease; }
.jd-lrpages a:hover img, .jd-lrpages a:focus-visible img { transform: translateY(-2px); }
.jd-lrpages span { display: block; margin-top: 6px; font-size: .78rem; line-height: 1.3; color: var(--jd-text-muted); }
.jd-lrview { border: 0; padding: 12px; border-radius: 12px; max-width: min(760px, 96vw); max-height: 96vh; background: var(--jd-surface); }
.jd-lrview::backdrop { background: rgba(23, 20, 31, .72); }
.jd-lrview img { display: block; width: 100%; height: auto; max-height: calc(96vh - 110px); object-fit: contain; }
.jd-lrview p { margin: 8px 0 4px; text-align: center; font-size: .9rem; }
.jd-lrview-nav { display: flex; justify-content: center; gap: 10px; }
.jd-lrview-nav button { min-width: 44px; min-height: 40px; border: 1px solid var(--jd-border-strong); background: var(--jd-surface); border-radius: 8px; font-size: 1rem; cursor: pointer; color: var(--jd-text); }
.jd-lrpreview { margin: 18px 0; padding: 16px; border-radius: 12px; background: var(--jd-surface-alt); }
.jd-lrprev-k { font-size: .95rem; margin: 14px 0 8px; }
.jd-lrlords { display: grid; gap: 10px; }
.jd-lrlord { display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: var(--jd-surface); border-radius: 10px; border-inline-start: 4px solid var(--jd-neutral); }
.jd-lrlord.tone-favourable { border-inline-start-color: var(--jd-success); }
.jd-lrlord.tone-mixed { border-inline-start-color: var(--jd-mixed); }
.jd-lrlord.tone-caution { border-inline-start-color: var(--jd-caution); }
.jd-lrlord .jd-graha { flex: none; width: 40px; height: 40px; }
.jd-lrlord p { margin: 0 0 4px; }
.jd-lrlocked { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: .88rem; color: var(--jd-text-muted); }
.jd-lrlocked svg { flex: none; margin-top: 2px; color: var(--jd-brass-text); }
.jd-lrpdtable tr.is-now td { background: var(--jd-brass-soft); font-weight: 600; }
.jd-lrpdtable tr.is-locked td { color: var(--jd-text-muted); letter-spacing: .08em; user-select: none; }
.jd-lrpdtable tr.is-locked svg { vertical-align: -2px; color: var(--jd-brass-text); }
.jd-lrcta-pages { display: flex; align-items: flex-end; gap: 6px; text-decoration: none; flex: none; }
.jd-lrcta-pages img { width: 72px; height: 92px; object-fit: cover; object-position: top center; border: 1px solid var(--jd-border); border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgba(29, 43, 99, .1); }
.jd-lrcta-pages img:nth-child(2) { width: 80px; height: 104px; }
.jd-lrcta-pages span { align-self: center; font-size: .85rem; font-weight: 600; color: var(--jd-brass-text); text-decoration: underline; margin-inline-start: 6px; }
.jd-lrcta-body { flex: 1 1 280px; }
@media (max-width: 560px) { .jd-lrcta-pages img { width: 60px; height: 78px; } .jd-lrcta-pages img:nth-child(2) { width: 68px; height: 88px; } }

/* ---- Plus prompt after the chart / timeline ---- */
.jd-plusprompt { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-start; margin: 22px 0; border-inline-start: 4px solid var(--jd-violet); }
.jd-plusprompt-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--jd-violet-soft); color: var(--jd-violet); }
.jd-plusprompt-body { flex: 1 1 300px; min-width: 0; }
.jd-plusprompt h2 { margin: 2px 0 8px; font-size: 1.15rem; }
.jd-plusprompt-next { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: var(--jd-violet-soft); color: var(--jd-text); font-weight: 600; }
.jd-plusprompt-list { margin: 0; padding-left: 1.2em; }
.jd-plusprompt-list li { margin-bottom: 4px; }
.jd-plusprompt-go { flex: 0 0 auto; align-self: center; text-align: center; }
.jd-plusprompt-go p { margin: 6px 0 0; }

/* ---- birth form: the reason a submit did not go through, and "making your Kundli" ---- */
.jd-formerr { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--jd-caution-soft); color: var(--jd-caution-text); border: 1px solid var(--jd-caution); font-weight: 600; font-size: .92rem; line-height: 1.45; }
.jd-formerr[hidden] { display: none; }
.jd-formerr svg { flex: none; margin-top: 1px; }
.jd-field.has-error label { color: var(--jd-caution-text); }
.jd-field.has-error input, .jd-field.has-error select { box-shadow: 0 0 0 3px var(--jd-caution-soft); }
.jd-btn.is-busy { cursor: progress; opacity: .92; }
.jd-spin { display: inline-block; width: 18px; height: 18px; margin-inline-end: 10px; vertical-align: -3px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent; animation: jd-spin .75s linear infinite; }
@keyframes jd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .jd-spin { animation-duration: 2.5s; } }

/* ---- full report: the questions to look at ---- */
.jd-lrtopics { border: 0; padding: 0; margin: 0 0 16px; }
.jd-lrtopics legend { font-weight: 600; margin-bottom: 8px; color: var(--jd-heading); }
.jd-lrtopics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .jd-lrtopics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jd-lrtopic { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--jd-border-strong); border-radius: 10px; background: var(--jd-surface); cursor: pointer; min-height: 44px; }
.jd-lrtopic:has(input:checked) { border-color: var(--jd-brass); background: var(--jd-brass-soft); font-weight: 600; }
.jd-lrtopic.is-off { opacity: .55; cursor: not-allowed; }
.jd-lrtopic input { width: 18px; height: 18px; accent-color: var(--jd-brass-text); }

/* ---- spiritual books ---- */
.jd-bookshero { position: relative; padding: 48px 0 40px; color: #fff; background: linear-gradient(90deg, rgba(23,20,31,.82), rgba(23,20,31,.35)), var(--bg) center / cover no-repeat; }
.jd-bookshero h1 { color: #fff; margin: 8px 0 10px; }
.jd-bookshero .jd-lede { color: var(--jd-text-on-dark); max-width: 60ch; }
.jd-bookshero .jd-crumbs, .jd-bookshero .jd-crumbs a { color: var(--jd-muted-on-dark); }
.jd-booklist { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 18px; }
.jd-bookcard a { display: flex; gap: 16px; padding: 14px; border: 1px solid var(--jd-border); border-radius: 14px; background: var(--jd-surface); color: var(--jd-text); text-decoration: none; box-shadow: 0 2px 10px rgba(29,43,99,.05); }
.jd-bookcard a:hover { border-color: var(--jd-brass); }
.jd-bookcard img { width: 110px; height: 165px; object-fit: cover; border-radius: 8px; flex: none; }
.jd-bookcard-body { display: flex; flex-direction: column; gap: 6px; }
.jd-bookcard-body strong { font-family: var(--jd-font-head); font-size: 1.3rem; color: var(--jd-heading); }
.jd-bookcard-go { margin-top: auto; font-weight: 600; color: var(--jd-brass-text); display: inline-flex; gap: 6px; align-items: center; }
.jd-bookhead { background: linear-gradient(180deg, var(--jd-brass-soft), var(--jd-bg)); padding: 28px 0 26px; }
.jd-bookhead-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 28px; align-items: center; }
.jd-bookcover { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 10px 30px rgba(125, 90, 20, .25); }
.jd-bookhead h1 { margin: 6px 0 6px; font-size: clamp(2rem, 5vw, 3rem); }
.jd-booksubt { font-size: 1.1rem; margin: 0 0 6px; }
.jd-bookbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 640px) { .jd-bookhead-grid { grid-template-columns: 1fr; } .jd-bookcover { max-width: 220px; margin: 0 auto; } }
.jd-bookbody { padding-top: 26px; padding-bottom: 40px; }
.jd-bookabout p { font-size: 1.05rem; line-height: 1.75; }
.jd-bookcontents { margin: 22px 0; padding: 16px 18px; border: 1px solid var(--jd-border); border-radius: 12px; background: var(--jd-surface); }
.jd-bookcontents h2 { font-size: 1.05rem; margin: 0 0 8px; }
.jd-bookcontents ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.jd-bookjump { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-inline-start: 8px; }
.jd-bookjump a { padding: 2px 8px; border-radius: 999px; background: var(--jd-surface-alt); font-size: .85rem; text-decoration: none; }
.jd-bookopts { position: static; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin: 0 -8px 18px; padding: 10px 8px; background: var(--jd-bg); border-bottom: 1px solid var(--jd-border); }
.jd-bookopts[hidden] { display: none; }
.jd-bookopt { display: inline-flex; gap: 8px; align-items: center; font-size: .9rem; font-weight: 600; color: var(--jd-heading); }
.jd-bookopts .jd-seg { display: inline-flex; border: 1px solid var(--jd-border-strong); border-radius: 999px; overflow: hidden; }
.jd-bookopts .jd-seg button { border: 0; background: var(--jd-surface); padding: 6px 12px; min-height: 36px; font: inherit; font-weight: 600; color: var(--jd-text); cursor: pointer; }
.jd-bookopts .jd-seg button + button { border-inline-start: 1px solid var(--jd-border); }
.jd-bookopts .jd-seg button[aria-pressed="true"] { background: var(--jd-brass-text); color: #fff; }
.jd-booktext { --vs: 0; }
.jd-booksec { margin: 0 0 26px; scroll-margin-top: 70px; }
.jd-booksec > h2 { font-size: 1.25rem; text-align: center; color: var(--jd-brass-text); margin: 26px 0 14px; }
.jd-verse { position: relative; padding: 16px 18px 14px; margin: 0 0 12px; border-radius: 12px; background: var(--jd-surface); border: 1px solid var(--jd-border); scroll-margin-top: 70px; }
.jd-booksec.is-doha .jd-verse { background: var(--jd-brass-soft); border-color: transparent; text-align: center; }
.jd-verse-n { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jd-brass-text); margin-bottom: 6px; }
.jd-verse-o { font-size: calc(1.32rem + var(--vs) * .14rem); line-height: 1.75; color: var(--jd-heading); font-weight: 600; margin: 0 0 6px; }
.jd-verse-r { font-size: calc(.98rem + var(--vs) * .1rem); line-height: 1.6; color: var(--jd-text-muted); font-style: italic; margin: 0 0 8px; }
.jd-verse-m { font-size: calc(1rem + var(--vs) * .1rem); line-height: 1.65; margin: 0; padding-top: 8px; border-top: 1px dashed var(--jd-border); color: var(--jd-text); }
.jd-booktext[data-roman="0"] .jd-verse-r { display: none; }
.jd-booktext[data-mean="hi"] .jd-verse-m.is-en, .jd-booktext[data-mean="en"] .jd-verse-m.is-hi, .jd-booktext[data-mean="off"] .jd-verse-m { display: none; }
.jd-bookend { text-align: center; font-size: 1.4rem; color: var(--jd-brass-text); font-weight: 700; margin: 18px 0 8px; }
.jd-bookfaq details { border-bottom: 1px solid var(--jd-border); padding: 12px 0; }
.jd-bookfaq summary { font-weight: 600; cursor: pointer; color: var(--jd-heading); }
.jd-homebook-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.jd-homebook-grid.is-one { grid-template-columns: 1fr; }
/* An odd book out (3, 5…) takes the whole row instead of sitting alone in half of it. */
.jd-homebook-grid > .jd-homebook-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.jd-homebook-card { display: flex; gap: 20px; align-items: center; padding: 18px; border-radius: 16px; text-decoration: none; color: #fff;
  background: linear-gradient(90deg, rgba(23,20,31,.85), rgba(23,20,31,.45)), var(--bg) center / cover no-repeat; }
.jd-homebook-card img { width: 96px; height: 144px; object-fit: cover; border-radius: 10px; flex: none; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.jd-homebook-body { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.jd-homebook-k { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jd-brass-on-dark); }
.jd-homebook-body strong { font-family: var(--jd-font-head); font-size: 1.6rem; color: #fff; }
@media print {
  .jd-header, .jd-footer, .jd-bookopts, .jd-bookbtns, .jd-bookcta, .jd-bookcontents, .jd-bookfaq, #jdchat, .jd-chat, .jd-crumbs, .jd-bookhead .jd-bookcover { display: none !important; }
  .jd-bookhead { background: none; padding: 0; }
  .jd-verse { break-inside: avoid; border: 0; padding: 6px 0; background: none !important; }
  .jd-verse-m { border-top: 0; }
  .jd-bookabout { display: none; }
  .jd-bookhead-grid { display: block; }
  .jd-printonly { display: block !important; color: var(--jd-text-muted); font-size: .85rem; }
  .jd-booksec.is-chaupai > h2 { break-before: avoid; }
}
.jd-printonly { display: none; }

@media (min-width: 760px) { .jd-bookopts { position: sticky; top: 0; z-index: 5; } }
.jd-bookopts .jd-bookopt.jd-check { padding: 0; border: 0; background: none; min-height: 0; }
.jd-bookopts .jd-bookopt.jd-check input { width: 18px; height: 18px; accent-color: var(--jd-brass-text); }
@media (max-width: 520px) { .jd-bookopts { gap: 8px 14px; } .jd-bookopts .jd-seg button { padding: 5px 10px; min-height: 34px; } }

/* ---- spiritual book: page with a sidebar ---- */
.jd-booklayout { padding-block-start: 26px; }
.jd-booklayout .jd-bookbody { padding: 0 0 40px; max-width: 760px; min-width: 0; }
.jd-bookside { align-self: stretch; }
.jd-bookside-stick { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 961px) {
  .jd-bookside-stick { position: sticky; top: 84px; }
  .jd-bookopts.is-inline { display: none !important; }
}
@media (max-width: 960px) { .jd-bookopts.is-side, .jd-bookside-stick .jd-booktoc { display: none !important; } }
.jd-bookopts.is-side { position: static; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; padding: 18px 20px;
  background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); }
.jd-bookopts.is-side h2 { font-size: var(--jd-fs-h3); margin: 0 0 2px; padding-bottom: 10px; border-bottom: 2px solid var(--jd-brass); }
.jd-bookopts.is-side .jd-bookopt { flex-direction: column; align-items: flex-start; gap: 6px; }
.jd-bookopts.is-side .jd-bookopt.jd-check { flex-direction: row; }
.jd-booktoc ol { margin: 0 0 12px; padding-left: 1.1em; display: grid; gap: 8px; }
.jd-booktoc a[aria-current] { font-weight: 700; color: var(--jd-brass-text); }
.jd-booktoc .jd-bookjump { margin: 6px 0 0; display: flex; }
.jd-bookjump a.is-here { background: var(--jd-brass-text); color: #fff; }
.jd-bookprogress { margin: -4px 0 10px; font-size: var(--jd-fs-small); color: var(--jd-text-muted); min-height: 1.3em; }
.jd-booksidebtns { display: flex; flex-wrap: wrap; gap: 8px; }
.jd-booktoday-day { font-family: var(--jd-font-head); font-size: 1.25rem; color: var(--jd-heading); margin: 0 0 6px; }
.jd-booktoday p { margin: 0 0 8px; font-size: var(--jd-fs-small); }
.jd-booktoday a { font-size: var(--jd-fs-small); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
@media print { .jd-bookside { display: none !important; } .jd-booklayout { display: block; } }
@media (min-width: 961px) { .jd-bookbody .jd-bookcontents { display: none; } }
.jd-bookprogress:empty { display: none; }
/* the sidebar is only Today + the part that stays in view, so nothing scrolls underneath it */
@media (min-width: 961px) { .jd-bookside-stick { z-index: 2; } }

/* ---- spiritual book: the header, after the design (art left, temple cream right) ---- */
.jd-bookhero { position: relative; display: grid; grid-template-columns: minmax(0, 41%) minmax(0, 1fr); min-height: 560px; background: var(--jd-temple); overflow: hidden; isolation: isolate; }
.jd-bookhero-art { position: relative; }
.jd-bookhero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.jd-bookhero-art::after { content: ""; position: absolute; inset: 0 -1px 0 auto; width: 42%; background: linear-gradient(90deg, rgba(246,237,222,0), var(--jd-temple)); }
.jd-bookhero-corner { position: absolute; right: 0; opacity: .9; pointer-events: none; z-index: 0; }
.jd-bookhero-corner.is-tr { top: 0; width: 220px; height: auto; }
.jd-bookhero-corner.is-br { bottom: 0; width: 170px; height: auto; }
.jd-bookhero-copy { position: relative; z-index: 1; padding: 40px clamp(20px, 5vw, 72px) 34px clamp(16px, 2vw, 28px); display: flex; flex-direction: column; justify-content: center; }
.jd-orn { display: flex; align-items: center; gap: 18px; max-width: 520px; margin: 0 0 18px; color: var(--jd-brass); }
.jd-orn span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--jd-brass)); position: relative; }
.jd-orn span:last-child { background: linear-gradient(90deg, var(--jd-brass), transparent); }
.jd-orn b { font-family: var(--jd-font-head); font-size: 2.6rem; line-height: 1; font-weight: 600; color: var(--jd-brass); }
.jd-bookhero .jd-crumbs, .jd-bookhero .jd-crumbs a { color: var(--jd-temple-ink); font-family: var(--jd-font-head); font-size: 1rem; text-decoration: none; }
.jd-bookhero .jd-crumbs [aria-current], .jd-bookhero .jd-crumbs li:last-child { color: var(--jd-maroon); font-weight: 700; }
.jd-bookhero h1 { font-family: var(--jd-font-head); font-weight: 700; color: var(--jd-maroon-deep); font-size: clamp(2.5rem, 4.6vw, 5.4rem); line-height: 1.04; white-space: nowrap; letter-spacing: -.01em; margin: 10px 0 10px; }
.jd-bookhero-sub { font-family: var(--jd-font-head); color: var(--jd-temple-ink); font-size: clamp(1.1rem, 2vw, 1.6rem); margin: 0 0 4px; }
.jd-lotusrule { display: flex; align-items: center; gap: 12px; color: var(--jd-brass); margin: 16px 0; }
.jd-lotusrule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--jd-brass)); }
.jd-lotusrule span:last-child { background: linear-gradient(90deg, var(--jd-brass), transparent); }
.jd-lotusrule.is-wide { max-width: 760px; }
.jd-lotusrule.is-small { max-width: 480px; margin: 26px 0 6px; align-self: center; width: 100%; }
.jd-lotusrule.is-small svg { width: 30px; height: 17px; }
.jd-bookmeta { list-style: none; margin: 4px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; font-family: var(--jd-font-head); color: var(--jd-temple-ink); font-size: 1.12rem; }
.jd-bookmeta li { display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; }
.jd-bookmeta li:first-child { padding-left: 0; }
.jd-bookmeta li + li { border-left: 1px solid rgba(94, 63, 42, .35); }
.jd-bookmeta svg { color: var(--jd-brass); flex: none; }
.jd-bookhero .jd-bookbtns { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.jd-btn-maroon { background: linear-gradient(180deg, var(--jd-maroon), var(--jd-maroon-deep)); color: var(--jd-surface); border: 1px solid var(--jd-maroon-deep); box-shadow: 0 8px 20px rgba(90, 14, 27, .25); padding: 13px clamp(18px, 1.8vw, 28px); font-size: clamp(1rem, 1.1vw, 1.1rem); border-radius: 999px; }
.jd-btn-maroon:hover { color: var(--jd-surface); filter: brightness(1.08); }
.jd-btn-outline { background: rgba(255,255,255,.35); color: var(--jd-temple-ink); border: 1.5px solid var(--jd-brass); padding: 12px clamp(14px, 1.5vw, 24px); font-size: clamp(.95rem, 1.05vw, 1.05rem); border-radius: 999px; font-family: var(--jd-font-head); font-weight: 500; }
.jd-btn-outline:hover { background: var(--jd-surface); color: var(--jd-maroon); }
.jd-btn-outline svg { color: var(--jd-temple-ink); }
.jd-booktag { align-self: center; margin: 4px 0 0; letter-spacing: .32em; text-transform: uppercase; font-size: .78rem; color: var(--jd-temple-ink); }
@media (max-width: 960px) {
  .jd-bookhero { grid-template-columns: 1fr; min-height: 0; }
  .jd-bookhero-art { height: clamp(300px, 70vw, 460px); }
  .jd-bookhero-art img { object-position: 25% 25%; }
  .jd-bookhero-art::after { inset: auto 0 -1px 0; width: auto; height: 45%; background: linear-gradient(180deg, rgba(246,237,222,0), var(--jd-temple)); }
  .jd-bookhero-copy { padding: 6px 18px 30px; text-align: center; align-items: center; }
  .jd-orn, .jd-lotusrule.is-wide { width: 100%; }
  .jd-bookmeta { justify-content: center; font-size: 1rem; }
  .jd-bookmeta li { padding: 0 12px; }
  .jd-bookmeta li:first-child { padding-left: 12px; }
  .jd-bookhero .jd-bookbtns { justify-content: center; }
  .jd-bookhero-corner.is-tr { width: 130px; opacity: .5; }
  .jd-bookhero-corner.is-br { display: none; }
}
@media (max-width: 520px) { .jd-bookmeta li + li { border-left: 0; } .jd-btn-maroon, .jd-btn-outline { width: 100%; justify-content: center; } }
@media print {
  .jd-bookhero { display: block; min-height: 0; background: none; }
  .jd-bookhero-art, .jd-bookhero-corner, .jd-orn, .jd-lotusrule, .jd-booktag, .jd-bookhero .jd-bookbtns { display: none !important; }
  .jd-bookhero-copy { padding: 0; }
  .jd-bookhero h1 { font-size: 2.2rem; }
}

@media (max-width: 520px) { .jd-bookhero h1 { white-space: normal; } }

.jd-booktag:lang(hi) { letter-spacing: .06em; text-transform: none; font-size: .95rem; }
@media (min-width: 961px) and (max-width: 1180px) { .jd-bookmeta { font-size: 1rem; } .jd-bookmeta li { padding: 0 12px; gap: 7px; } }

/* ---- spiritual book: chapters (the Gita), speakers, the Facebook box ---- */
.jd-bookhero-kicker { display: block; white-space: normal; line-height: 1.3; margin: 0 0 2px; font-family: var(--jd-font-head); font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 600; letter-spacing: .04em; color: var(--jd-maroon); }
.jd-verse-sp { margin: 0 0 4px; font-size: .95rem; color: var(--jd-brass-text); font-weight: 700; }
.jd-verse-sp-t { font-weight: 500; color: var(--jd-text-muted); font-size: .85rem; }
.jd-verse-sp-t::before { content: "· "; }
.jd-booksec-range { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .06em; color: var(--jd-text-muted); margin-top: 2px; }
.jd-book[data-chapter] .jd-bookend { font-size: 1.05rem; line-height: 1.9; font-weight: 600; padding: 14px 16px; border-top: 1px solid var(--jd-border); border-bottom: 1px solid var(--jd-border); }
.jd-gitachapters { margin: 26px 0; scroll-margin-top: 80px; }
.jd-gitachapters ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jd-gitachapters li > a, .jd-gitachapters li > div { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--jd-border); border-radius: 12px; background: var(--jd-surface); text-decoration: none; color: var(--jd-text); }
.jd-gitachapters li.is-open > a { border-color: var(--jd-brass); }
.jd-gitachapters li.is-open > a:hover { background: var(--jd-brass-soft); }
.jd-gitachapters li.is-later > div { background: var(--jd-bg); }
.jd-gitach-n { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--jd-font-head); font-weight: 700; font-size: 1.05rem; background: var(--jd-surface-alt); color: var(--jd-text-muted); }
.jd-gitachapters li.is-open .jd-gitach-n { background: var(--jd-brass-text); color: #fff; }
.jd-gitach-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.jd-gitach-body strong { color: var(--jd-heading); font-weight: 600; }
.jd-gitachapters li.is-later .jd-gitach-body strong { font-weight: 500; color: var(--jd-text); }
.jd-gitach-deva { font-weight: 500; color: var(--jd-text-muted); }
.jd-gitach-go { flex: none; display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--jd-brass-text); }
.jd-gitach-later { flex: none; color: var(--jd-text-muted); }
@media (max-width: 520px) { .jd-gitach-later { display: none; } .jd-gitach-deva { display: block; } }
.jd-chpager { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 20px 0; padding: 12px 0; border-top: 1px solid var(--jd-border); border-bottom: 1px solid var(--jd-border); font-weight: 600; }
.jd-bookfacts dl { margin: 0 0 14px; display: grid; gap: 8px; }
.jd-bookfacts dl div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; font-size: var(--jd-fs-small); }
.jd-bookfacts dt { color: var(--jd-text-muted); }
.jd-bookfacts dd { margin: 0; color: var(--jd-heading); font-weight: 600; }
.jd-bookchap p { margin: 0 0 8px; }
.jd-bookchap a { font-size: var(--jd-fs-small); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
@media print { .jd-followbox, .jd-chpager, .jd-gitachapters { display: none !important; } }
.jd-bookshero .jd-crumbs li, .jd-bookshero .jd-crumbs [aria-current] { color: var(--jd-text-on-dark); }
.jd-booktoc a .jd-muted, .jd-bookcontents .jd-muted { white-space: nowrap; display: inline-block; text-decoration: none; }
.jd-booknote { margin-bottom: 28px; }
.jd-book[data-chapter] .jd-bookend { border-bottom: 0; }
.jd-verse-sp-in { display: inline-block; margin: 2px 0; font-size: .95rem; font-weight: 700; font-style: normal; color: var(--jd-brass-text); }

/* ---- the two cards at the end of the book pages: "Join us on Facebook" and "Your own chart, free" ---- */
.jd-bookctas { display: grid; gap: 26px; padding-bottom: 46px; }
.jd-ctacard { position: relative; display: grid; align-items: center; min-height: 236px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: linear-gradient(100deg, var(--jd-surface), var(--jd-temple)); border: 1px solid rgba(194, 145, 60, .28); box-shadow: 0 12px 32px rgba(90, 14, 27, .07); }
.jd-ctacard.is-community { grid-template-columns: minmax(0, 27%) minmax(0, 1fr) auto; }
.jd-ctacard.is-kundli { grid-template-columns: minmax(0, 1fr) minmax(0, 50%); }
.jd-followbox.is-wide { margin-top: 30px; }
.jd-ctacard-art { position: relative; align-self: stretch; min-height: 236px; }
.jd-ctacard-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.is-community .jd-ctacard-art { clip-path: polygon(0 0, 80.0% 0.0%, 80.1% 4.2%, 80.3% 8.3%, 80.6% 12.5%, 81.0% 16.7%, 81.4% 20.8%, 81.9% 25.0%, 82.5% 29.2%, 83.1% 33.3%, 83.8% 37.5%, 84.5% 41.7%, 85.3% 45.8%, 86.2% 50.0%, 87.1% 54.2%, 88.0% 58.3%, 89.0% 62.5%, 90.0% 66.7%, 91.1% 70.8%, 92.3% 75.0%, 93.4% 79.2%, 94.7% 83.3%, 95.9% 87.5%, 97.3% 91.7%, 98.6% 95.8%, 100.0% 100.0%, 0 100%); }
.is-kundli .jd-ctacard-art { clip-path: polygon(100% 0, 22.0% 0.0%, 20.6% 4.2%, 19.3% 8.3%, 18.0% 12.5%, 16.7% 16.7%, 15.5% 20.8%, 14.3% 25.0%, 13.1% 29.2%, 12.0% 33.3%, 10.9% 37.5%, 9.8% 41.7%, 8.8% 45.8%, 7.8% 50.0%, 6.8% 54.2%, 5.9% 58.3%, 5.1% 62.5%, 4.2% 66.7%, 3.5% 70.8%, 2.8% 75.0%, 2.1% 79.2%, 1.5% 83.3%, 1.0% 87.5%, 0.5% 91.7%, 0.2% 95.8%, 0.0% 100.0%, 100% 100%); }
.jd-ctacard-body { position: relative; z-index: 1; padding: 28px 20px 28px 30px; min-width: 0; }
.is-kundli .jd-ctacard-body { padding: 28px 12px 30px 40px; }
.jd-ctacard-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px; border-radius: 999px; background: var(--jd-surface);
  border: 1px solid rgba(194, 145, 60, .45); color: var(--jd-brass-text); font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.jd-ctacard-pill:lang(hi) { letter-spacing: .02em; font-size: .85rem; text-transform: none; }
.jd-ctacard h2 { font-family: var(--jd-font-head); font-weight: 700; color: var(--jd-maroon-deep); font-size: clamp(1.65rem, 2.5vw, 2.3rem); line-height: 1.12; margin: 14px 0 10px; }
.jd-ctacard p { margin: 0; color: var(--jd-text-muted); line-height: 1.65; max-width: 44ch; font-size: 1.02rem; }
.jd-ctacard-act { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 26px; padding: 24px 34px 24px 10px; }
.jd-ctacard-orn { display: flex; align-items: center; gap: 8px; width: 230px; color: var(--jd-brass); }
.jd-ctacard-orn span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--jd-brass)); }
.jd-ctacard-orn span:last-child { background: linear-gradient(90deg, var(--jd-brass), transparent); }
.jd-ctacard-orn i, .jd-ctacard-rule i { width: 7px; height: 7px; border: 1px solid var(--jd-brass); transform: rotate(45deg); flex: none; background: var(--jd-surface); }
.jd-ctacard-orn b { font-family: var(--jd-font-head); font-size: 2rem; line-height: 1; font-weight: 600; }
.jd-ctacard-lotus { position: absolute; right: -26px; bottom: -40px; z-index: 0; color: var(--jd-brass); opacity: .16; pointer-events: none; }
.jd-ctacard-head { display: flex; align-items: center; gap: 10px; }
.jd-ctacard-ic { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--jd-brass-soft); color: var(--jd-brass-text); }
.jd-ctacard-rule { flex: 1; max-width: 230px; height: 1px; display: flex; align-items: center; justify-content: flex-end; padding-right: 30%;
  background: linear-gradient(90deg, var(--jd-brass), transparent); }
.jd-ctabtn { display: inline-flex; align-items: center; gap: 14px; padding: 9px 24px 9px 10px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 1.04rem; line-height: 1.2; box-shadow: 0 10px 22px rgba(90, 14, 27, .18); transition: filter .15s, transform .15s; }
.jd-ctabtn:hover { filter: brightness(1.08); }
.jd-ctabtn:hover svg:last-child { transform: translateX(3px); }
.jd-ctabtn svg:last-child { transition: transform .15s; }
.jd-ctabtn-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.jd-ctabtn-t { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .45); }
.jd-ctabtn.is-gold, .jd-ctabtn.is-gold:hover { background: var(--jd-brass-text); color: var(--jd-surface); }
.jd-ctabtn.is-gold .jd-ctabtn-ic { background: var(--jd-surface); color: var(--jd-brass-text); }
.jd-ctabtn.is-gold .jd-ctabtn-ic svg { stroke-width: 2.6; }
.jd-ctabtn.is-maroon, .jd-ctabtn.is-maroon:hover { background: linear-gradient(180deg, var(--jd-maroon), var(--jd-maroon-deep)); color: var(--jd-surface); margin-top: 22px; }
.jd-ctabtn.is-maroon .jd-ctabtn-ic { color: var(--jd-brass-on-dark); }
@media (max-width: 1100px) {
  .jd-ctacard.is-community { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
  .is-community .jd-ctacard-act { grid-column: 2; align-items: flex-start; padding: 0 20px 28px 30px; }
  .is-community .jd-ctacard-art { grid-row: 1 / span 2; }
  .jd-ctacard-orn { display: none; }
}
@media (max-width: 760px) {
  .jd-ctacard.is-community, .jd-ctacard.is-kundli { grid-template-columns: 1fr; }
  .jd-ctacard-art, .is-community .jd-ctacard-art { grid-row: auto; min-height: 190px; order: -1; clip-path: polygon(0 0, 100% 0, 100.0% 100.0%, 95.8% 97.8%, 91.7% 95.7%, 87.5% 93.9%, 83.3% 92.2%, 79.2% 90.8%, 75.0% 89.5%, 70.8% 88.4%, 66.7% 87.6%, 62.5% 86.9%, 58.3% 86.4%, 54.2% 86.1%, 50.0% 86.0%, 45.8% 86.1%, 41.7% 86.4%, 37.5% 86.9%, 33.3% 87.6%, 29.2% 88.4%, 25.0% 89.5%, 20.8% 90.8%, 16.7% 92.2%, 12.5% 93.9%, 8.3% 95.7%, 4.2% 97.8%, 0.0% 100.0%); }
  .is-kundli .jd-ctacard-art { clip-path: polygon(0 0, 100% 0, 100.0% 100.0%, 95.8% 97.8%, 91.7% 95.7%, 87.5% 93.9%, 83.3% 92.2%, 79.2% 90.8%, 75.0% 89.5%, 70.8% 88.4%, 66.7% 87.6%, 62.5% 86.9%, 58.3% 86.4%, 54.2% 86.1%, 50.0% 86.0%, 45.8% 86.1%, 41.7% 86.4%, 37.5% 86.9%, 33.3% 87.6%, 29.2% 88.4%, 25.0% 89.5%, 20.8% 90.8%, 16.7% 92.2%, 12.5% 93.9%, 8.3% 95.7%, 4.2% 97.8%, 0.0% 100.0%); }
  .jd-ctacard-body, .is-kundli .jd-ctacard-body { padding: 6px 20px 4px; }
  .is-community .jd-ctacard-act { grid-column: auto; padding: 18px 20px 24px; align-items: stretch; }
  .is-kundli .jd-ctacard-body { padding-bottom: 24px; }
  .jd-ctabtn { justify-content: center; width: 100%; font-size: .96rem; padding-right: 18px; }
  .jd-ctacard-lotus { display: none; }
}
@media print { .jd-bookctas, .jd-ctacard { display: none !important; } }

/* astrologer portal: the account box at the top of their profile */
.jd-acctbox { margin: 0 0 22px; border-inline-start: 4px solid var(--jd-brass); }
.jd-acctbox h2 { font-size: 1.15rem; margin: 0 0 10px; }
.jd-acctbox dl { margin: 0 0 8px; display: grid; gap: 12px; }
.jd-acctbox dl > div { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 16px; }
.jd-acctbox dt { color: var(--jd-text-muted); font-size: var(--jd-fs-small); }
.jd-acctbox dd { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jd-acctbox dd strong { overflow-wrap: anywhere; color: var(--jd-heading); }
.jd-acctbox dd .jd-hint a { margin-inline-start: 6px; font-weight: 600; }
@media (max-width: 640px) { .jd-acctbox dl > div { grid-template-columns: 1fr; } }

/* Live chat: "Ravi Kumar is typing…" in the visitor's widget, and a clock stopped while the astrologer is quiet */
.jd-chat-livetyping { flex-direction: column; align-items: flex-start; gap: 3px; }
.jd-chat-livetyping .jd-chat-bubble { flex-direction: row; gap: 4px; padding: 10px 13px; }
.jd-chat-livetyping .jd-chat-bubble span { width: 7px; height: 7px; border-radius: 50%; background: var(--jd-brass); animation: jd-chat-dot 1s infinite ease-in-out; }
.jd-chat-livetyping .jd-chat-bubble span:nth-child(2) { animation-delay: .15s; }
.jd-chat-livetyping .jd-chat-bubble span:nth-child(3) { animation-delay: .3s; }
.jd-chat-livetyping-t { margin: 0 0 0 4px; font-size: var(--jd-fs-small); color: var(--jd-text-muted); font-style: italic; }
.jd-chat-head p.jd-chat-clock.is-paused { font-weight: 500; color: var(--jd-muted-on-dark); }
.jd-liveclock.is-paused { color: var(--jd-text-muted); }
@media (prefers-reduced-motion: reduce) { .jd-chat-livetyping .jd-chat-bubble span { animation: none; } }

/* The astrologer's own "Taking bookings" switch on their profile */
.jd-bkswitch { margin: 0 0 22px; border-inline-start: 4px solid var(--jd-border-strong); }
.jd-bkswitch.is-on { border-inline-start-color: var(--jd-success); }
.jd-bkswitch h2 { font-size: 1.15rem; margin: 0 0 8px; }
.jd-bkswitch p { margin: 0 0 12px; }
.jd-bkswitch form { margin: 0 0 10px; }
.jd-bkswitch .jd-hint { margin: 0; }
/* Sections of the astrologer's profile reached by #link land below the sticky page header */
.jd-adminsec > section[id], .jd-adminsec > form[id] { scroll-margin-top: 90px; }
.jd-mailticks .jd-mailfail { color: var(--jd-caution-text); font-weight: 600; display: inline-block; max-width: 38ch; white-space: normal; overflow-wrap: anywhere; }

/* Admin → Prices */
.jd-pricetable td { vertical-align: top; }
.jd-pricelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jd-pricelist li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.jd-pricelist li > span:first-child { min-width: 7.5em; }
.jd-pricenote td { padding-top: 0; font-size: var(--jd-fs-small); color: var(--jd-mixed-text); }
.jd-pricetable th { text-align: start; }
.jd-prices > h2 { font-size: 1.3rem; margin: 30px 0 6px; }
.jd-prices > h2:first-of-type { margin-top: 18px; }
/* A mantra's source and when it is recited, under its name */
.jd-booksec-about { margin: -4px 0 12px; font-size: var(--jd-fs-small); color: var(--jd-text-muted); }
.jd-booksec.is-mantra .jd-verse-o { line-height: 1.85; }

/* ===== Home hero on the night-sky picture (assets/img/hero/home-sky.jpg) =====
   The picture covers the hero; a dark wash on the left keeps the headline,
   the trust row and the tool tiles readable, and lets the sky show on the
   right behind the form card. The copy switches to the on-dark tokens. */
.jd-hero.is-photo {
  /* centre / cover: the planets' SVG uses xMidYMid slice, which crops the
     same way — change one and you must change the other */
  background: var(--jd-ink) var(--hero-img) center / cover no-repeat;
  color: var(--jd-text-on-dark); border-bottom-color: var(--jd-ink-line);
}
/* the moving planets sit on the picture, under the wash and the copy */
.jd-hero-sky {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.jd-hero-sky .jd-orbits ellipse {
  fill: none; stroke: rgba(255,240,214,.34); stroke-width: 1.4;
  stroke-linecap: round; stroke-dasharray: 0 6;
}
.jd-hero.is-photo::before { z-index: 1; }   /* the wash goes over the planets; .jd-wrap (z 1, later) over both */
.jd-hero.is-photo::before {
  background: linear-gradient(90deg, rgba(12,10,20,.84) 0%, rgba(12,10,20,.62) 40%, rgba(12,10,20,.28) 68%, rgba(12,10,20,.2) 100%),
              linear-gradient(0deg, rgba(12,10,20,.55) 0%, transparent 35%);
}
.jd-hero.is-photo h1 { color: var(--jd-text-on-dark); }
.jd-hero.is-photo h1 em, .jd-hero.is-photo .jd-eyebrow { color: var(--jd-brass-on-dark); }
.jd-hero.is-photo .jd-lede, .jd-hero.is-photo .jd-legend { color: var(--jd-muted-on-dark); }
@media (max-width: 900px) {
  /* one column: the copy sits over the whole picture, so the wash covers it all */
  .jd-hero.is-photo::before { background: linear-gradient(180deg, rgba(12,10,20,.82) 0%, rgba(12,10,20,.7) 55%, rgba(12,10,20,.85) 100%); }
}

/* ---- phone notifications (app/push.php, assets/js/push.js) ----
   The switches are hidden until push.js has checked that this browser can
   show notifications, so nobody sees a button that cannot work. */
.jd-pushcard {
  margin-top: clamp(18px, 3vw, 28px); padding: 16px 18px;
  background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius);
}
.jd-pushcard h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--jd-heading); }
.jd-pushcard h3 svg, .jd-pushcard > p svg { color: var(--jd-brass-text); flex: 0 0 auto; vertical-align: -3px; }
.jd-pushcard > p { margin: 0 0 10px; }
.jd-pushcard.is-slim { margin-top: 16px; }
.jd-pushcard.is-on { border-color: var(--jd-tint-green-line); background: var(--jd-tint-green-soft); }
.jd-pushrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jd-pushrow label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.jd-pushrow select { font: inherit; padding: 7px 10px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); background: var(--jd-surface); color: var(--jd-text); }
.jd-pushstate { margin: 10px 0 0; font-weight: 600; color: var(--jd-text); }
.jd-pushstate:empty { display: none; }
.jd-pushbtns { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
/* the astrologer's panel: green when on, a calm note when the phone blocks it */
.jd-panel.jd-pushcard { margin-top: 0; }
.jd-pushcard.is-denied .jd-pushstate, .jd-pushcard.is-denied [data-push-state] { color: var(--jd-text); font-weight: 600; }
/* the strip at the top of astrologer pages until alerts are on */
.jd-pushbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 0 0 18px; padding: 12px 16px;
  background: var(--jd-tint-gold-soft); border: 1px solid var(--jd-tint-gold-line); border-radius: var(--jd-radius);
}
.jd-pushbar > p:first-child { margin: 0; flex: 1 1 280px; font-weight: 600; color: var(--jd-text); }
.jd-pushbar > div { display: flex; gap: 8px; flex-wrap: wrap; }
.jd-pushbar > .jd-hint { flex-basis: 100%; margin: 0; }
.jd-appsteps { margin: 0 0 12px; padding-inline-start: 1.4em; }
.jd-appsteps li { margin: 0 0 8px; line-height: 1.55; }
.jd-footapp { margin: 14px 0 0; }
.jd-footapp a { display: inline-flex; align-items: center; gap: 6px; color: var(--jd-brass-on-dark); font-weight: 600; text-decoration: none; }
.jd-footapp a:hover { text-decoration: underline; }
/* .jd-btn sets display, which would beat the hidden attribute */
.jd-pushcard [hidden], .jd-pushbar [hidden], .jd-pushcard[hidden] { display: none !important; }

/* ---- privacy policy and account deletion (privacy.php, delete-account.php) ---- */
.jd-legalpage h2 { margin-top: 34px; scroll-margin-top: 90px; }
.jd-legaltoc { margin: 18px 0 8px; padding: 14px 18px; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); }
.jd-legaltoc ol { margin: 0; padding-inline-start: 1.3em; columns: 2 220px; column-gap: 28px; }
.jd-legaltoc li { margin: 3px 0; break-inside: avoid; }
.jd-legallist { margin: 10px 0 0; display: grid; gap: 12px; }
.jd-legallist > div { padding: 12px 14px; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); }
.jd-legallist dt { font-weight: 700; color: var(--jd-heading); margin: 0 0 3px; }
.jd-legallist dd { margin: 0; color: var(--jd-text); line-height: 1.6; }
.jd-dellist { margin: 6px 0 0; padding-inline-start: 1.3em; }
.jd-dellist li { margin: 4px 0; }
.jd-delform { margin-top: 18px; padding: 18px; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); }
.jd-delform .jd-check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; }
.jd-delform .jd-check input { margin-top: 4px; flex: 0 0 auto; }
.jd-delpage .jd-note { margin-top: 18px; }
.jd-acctline { margin-top: 28px; }

/* ---------------------------------------------------------------- Documentation
   astro/documents.php, astro/agreement.php, admin/astro-docs.php. Existing tokens only. */
.jd-docs h2 { display: flex; align-items: center; gap: 8px; margin-top: 28px; }
.jd-docs h2:first-of-type { margin-top: 8px; }
.jd-docstate { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--jd-radius-sm); font-weight: 600; font-size: var(--jd-fs-small); }
.jd-docstate.is-ok { background: var(--jd-success-soft); color: var(--jd-success-text); }
.jd-docstate.is-todo { background: var(--jd-mixed-soft); color: var(--jd-mixed-text); }
.jd-docnote { display: flex; gap: 8px; align-items: flex-start; background: var(--jd-surface-alt); border-radius: var(--jd-radius-sm); padding: 10px 12px; font-size: var(--jd-fs-small); }
.jd-docnote svg { flex: none; margin-top: 2px; }
.jd-contract { max-height: 420px; overflow-y: auto; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 16px 20px; margin: 12px 0 6px; font-size: var(--jd-fs-small); line-height: 1.6; }
.jd-contract:focus-visible { outline: 2px solid var(--jd-focus); outline-offset: 2px; }
.jd-contract h3 { margin: 0 0 10px; color: var(--jd-heading); }
.jd-contract h4 { margin: 16px 0 4px; color: var(--jd-heading); font-size: var(--jd-fs-body); }
.jd-contract p { margin: 0 0 8px; }
.jd-contract-more summary { cursor: pointer; color: var(--jd-brass-text); font-weight: 600; margin: 8px 0; }
.jd-signform { background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 16px 20px; margin-top: 16px; max-width: 680px; }
.jd-signform h3 { margin-top: 0; }
.jd-label { display: block; font-weight: 600; margin-bottom: 6px; }
.jd-sigpad canvas { display: block; width: 100%; max-width: 600px; aspect-ratio: 3 / 1; height: auto; background: var(--jd-surface);
  border: 1px dashed var(--jd-border-strong); border-radius: var(--jd-radius-sm); touch-action: none; cursor: crosshair; }
.jd-sigpad canvas:focus-visible { outline: 2px solid var(--jd-focus); outline-offset: 2px; }
.jd-sigpad.has-ink canvas { border-style: solid; }
.jd-sigbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; max-width: 600px; margin-top: 6px; }
.jd-agree { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-weight: 600; }
.jd-agree input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.jd-codein { font-family: var(--jd-font-num); font-size: 1.3rem; letter-spacing: .3em; max-width: 12ch; }
.jd-doclist { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.jd-docitem { background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 14px 16px; }
.jd-docitem p { margin: 4px 0; }
.jd-dochead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jd-tag.is-req { background: var(--jd-brass-soft); color: var(--jd-brass-text); }
.jd-docfiles { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.jd-docfiles > li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 8px; border-top: 1px solid var(--jd-border); }
.jd-docfiles a { overflow-wrap: anywhere; }
.jd-docstatus { display: inline-block; padding: 2px 9px; border-radius: var(--jd-radius-pill); font-size: var(--jd-fs-micro); font-weight: 600; white-space: nowrap; }
.jd-docstatus.is-pending { background: var(--jd-neutral-soft); color: var(--jd-neutral-text); }
.jd-docstatus.is-approved { background: var(--jd-success-soft); color: var(--jd-success-text); }
.jd-docstatus.is-rejected { background: var(--jd-caution-soft); color: var(--jd-caution-text); }
.jd-docreview { flex-basis: 100%; color: var(--jd-caution-text); }
.jd-inline { display: inline; margin: 0; }
.jd-docup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.jd-docup input[type=file] { max-width: 100%; font-size: var(--jd-fs-small); }
.jd-docup .jd-error { flex-basis: 100%; margin: 0; }
.jd-docreviewform { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.jd-docreviewform label { flex-basis: 100%; }
.jd-docreviewform input { flex: 1 1 220px; min-width: 0; padding: 7px 10px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); font: inherit; }
.jd-docbtns { display: inline-flex; gap: 6px; }
/* the signed copy */
.jd-agreecopy { background: var(--jd-bg); color: var(--jd-text); }
.jd-agreecopy main { padding: 20px 16px 48px; }
.jd-agreebar { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.jd-agreebrand { display: flex; align-items: center; gap: 10px; font-family: var(--jd-font-head); font-size: 1.3rem; color: var(--jd-heading); margin: 18px 0 6px; }
.jd-agreetext { background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 20px 24px; line-height: 1.6; }
.jd-agreetext h1 { font-size: 1.4rem; color: var(--jd-heading); margin: 0 0 12px; }
.jd-agreetext h2 { font-size: var(--jd-fs-body); color: var(--jd-heading); margin: 16px 0 4px; }
.jd-agreetext p { margin: 0 0 8px; }
.jd-agreerecord { margin-top: 20px; background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 16px 24px; }
.jd-agreerecord h2 { margin-top: 0; font-size: 1.15rem; color: var(--jd-heading); }
.jd-agreerecord dl { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 8px 16px; margin: 0; font-size: var(--jd-fs-small); }
.jd-agreerecord dt { font-weight: 600; color: var(--jd-text-muted); }
.jd-agreerecord dd { margin: 0; overflow-wrap: anywhere; }
.jd-agreesig { display: block; max-width: 260px; width: 100%; height: auto; border-bottom: 1px solid var(--jd-border-strong); }
.jd-agreesha { font-size: .78rem; word-break: break-all; }
@media (max-width: 560px) {
  .jd-agreerecord dl { grid-template-columns: 1fr; gap: 2px; }
  .jd-agreerecord dd { margin-bottom: 8px; }
  .jd-agreetext, .jd-agreerecord { padding: 14px 14px; }
}
@media print {
  .jd-noprint { display: none !important; }
  .jd-agreecopy { background: var(--jd-surface); }
  .jd-agreetext, .jd-agreerecord { border: 0; padding: 0; }
  .jd-agreetext h2 { break-after: avoid; }
  .jd-agreerecord { break-inside: avoid; }
}
.jd-signbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Documentation, admin: document types and the agreement text */
.jd-kindlist .is-off { background: var(--jd-surface-alt); }
.jd-kindlist .is-off .jd-dochead strong { color: var(--jd-text-muted); }
.jd-kindbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.jd-kindform { max-width: none; margin-top: 20px; }
.jd-kindopts { border: 0; padding: 0; margin: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.jd-kindopts legend { margin-bottom: 6px; }
.jd-docdel { margin-inline-start: auto; }
.jd-contractform { background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius); padding: 16px 20px; margin-top: 16px; }
.jd-contractform h3 { margin-top: 0; }
.jd-contractedit { width: 100%; min-height: 420px; font: inherit; font-size: var(--jd-fs-small); line-height: 1.55; padding: 10px 12px;
  border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-sm); background: var(--jd-surface); color: var(--jd-text); resize: vertical; }
.jd-contractedit:focus { outline: 2px solid var(--jd-focus); outline-offset: 1px; }
.jd-contracthelp { margin: 8px 0 12px; }
.jd-contracthelp summary { cursor: pointer; color: var(--jd-brass-text); font-weight: 600; }
.jd-contracthelp code { background: var(--jd-surface-alt); padding: 1px 5px; border-radius: 4px; }
.jd-contractform .jd-tag { margin: 2px 4px 2px 0; }
.jd-contractform .jd-error ul { margin: 4px 0 0; padding-inline-start: 20px; }
.jd-contractraw { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--jd-fs-small); line-height: 1.55; background: var(--jd-surface);
  border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); padding: 12px 14px; max-height: 560px; overflow-y: auto; }
.jd-docs #preview, .jd-docs .jd-contractform + h3 { margin-top: 24px; }
/* The Android app file: the astrologer's download card, Admin → Apps upload */
.jd-apkcard { margin-top: 20px; }
.jd-apkcard h2 { display: flex; align-items: center; gap: 8px; }
.jd-apkin { display: inline-flex; align-items: center; gap: 6px; background: var(--jd-success-soft); color: var(--jd-success-text); border-radius: var(--jd-radius-sm); padding: 6px 12px; font-weight: 600; font-size: var(--jd-fs-small); }
.jd-apkdl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.jd-apksteps summary { cursor: pointer; color: var(--jd-brass-text); font-weight: 600; margin: 6px 0; }
.jd-apksteps ol { margin: 6px 0; padding-inline-start: 22px; }
.jd-apksteps li { margin-bottom: 4px; }
.jd-apkform { border-top: 1px solid var(--jd-border); margin-top: 16px; padding-top: 12px; }
.jd-apkform progress { width: 100%; height: 10px; accent-color: var(--jd-brass); margin: 10px 0 4px; }
.jd-apkform input[type=file] { max-width: 100%; }
.jd-apkwarn { margin: 14px 0; }
.jd-apkwarn summary { cursor: pointer; color: var(--jd-brass-text); font-weight: 600; }
.jd-apkwarn ul { margin: 6px 0; padding-inline-start: 20px; font-size: var(--jd-fs-small); }
.jd-apkin[hidden] { display: none; }
.jd-apkdl .jd-btn svg { transform: rotate(90deg); }
/* Agreement: the revised text offered to the admin; the signed copy's buttons */
.jd-revpanel { margin: 14px 0; border-color: var(--jd-tint-default-line); background: var(--jd-tint-default-soft); }
.jd-revpanel h3 { margin-top: 0; }
.jd-revpanel ul { padding-inline-start: 20px; margin: 6px 0; }
.jd-revpanel li { margin-bottom: 4px; }
.jd-agreebtns { display: inline-flex; flex-wrap: wrap; gap: 8px; }
/* Admin → Payments: whether the pop-up shows right now, and why not */
.jd-promostat { background: var(--jd-surface-alt); border-radius: var(--jd-radius-sm); padding: 12px 14px; margin-top: 12px; }
.jd-promostat p { margin: 0 0 6px; }
.jd-promostat ul { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; font-size: var(--jd-fs-small); }
.jd-promostat li { display: flex; gap: 6px; align-items: flex-start; }
.jd-promostat li svg { flex: none; margin-top: 2px; }
.jd-promostat li.is-ok svg { color: var(--jd-success-text); }
.jd-promostat li.is-no { color: var(--jd-caution-text); }
.jd-promo-cta[href] { text-decoration: none; display: inline-flex; }
/* Admin → Traffic: people only / everything; crawlers */
.jd-trpeople { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--jd-radius-pill); border: 1px solid var(--jd-border-strong);
  font-size: var(--jd-fs-small); font-weight: 600; color: var(--jd-text-muted); text-decoration: none; background: var(--jd-surface); }
.jd-trpeople.is-on { background: var(--jd-success-soft); border-color: transparent; color: var(--jd-success-text); }
.jd-trcrawl { margin-top: 20px; }
.jd-trcrawl h2 { display: flex; align-items: center; gap: 8px; }
.jd-trcrawl code { font-size: .8rem; overflow-wrap: anywhere; }

/* ---- Festival & vrat calendar, Muhurat (Oct 2026). Existing tokens only. ---- */
.jd-calnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.jd-calchip { display: inline-block; padding: 7px 14px; border: 1px solid var(--jd-border-strong); border-radius: var(--jd-radius-pill);
  background: var(--jd-surface); color: var(--jd-text); font-size: var(--jd-fs-small); text-decoration: none; }
.jd-calchip:hover { border-color: var(--jd-brass); }
.jd-calchip[aria-current="page"] { background: var(--jd-brass-soft); border-color: var(--jd-brass); color: var(--jd-brass-text); font-weight: 600; }
.jd-calsoon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.jd-calsoon li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--jd-radius-sm); background: var(--jd-surface-alt); }
.jd-calsoon li span { font-size: var(--jd-fs-small); color: var(--jd-text-muted); }
.jd-calmonth { margin: 26px 0 0; }
.jd-calmonth h2 { font-family: var(--jd-font-head); color: var(--jd-heading); font-size: var(--jd-fs-h3); margin: 0 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--jd-border); }
.jd-callist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jd-calrow { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: start; padding: 12px 14px;
  border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); background: var(--jd-surface); }
.jd-calrow.is-festival, .jd-calrow.is-navratri { border-inline-start: 4px solid var(--jd-saffron); }
.jd-calrow.is-ekadashi { border-inline-start: 4px solid var(--jd-violet); }
.jd-calrow.is-purnima { border-inline-start: 4px solid var(--jd-brass); }
.jd-calrow.is-amavasya { border-inline-start: 4px solid var(--jd-ink-soft); }
.jd-calrow.is-pradosh, .jd-calrow.is-shivaratri { border-inline-start: 4px solid var(--jd-teal); }
.jd-calrow.is-chaturthi { border-inline-start: 4px solid var(--jd-rose); }
.jd-calrow.is-sankranti { border-inline-start: 4px solid var(--jd-azure); }
.jd-calrow.is-past { opacity: .62; }
.jd-calrow.is-today { box-shadow: 0 0 0 2px var(--jd-brass); }
.jd-caldate { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px;
  border-radius: var(--jd-radius-sm); background: var(--jd-surface-alt); line-height: 1.1; }
.jd-caldate b { font-family: var(--jd-font-num); font-size: 1.4rem; color: var(--jd-heading); }
.jd-caldate span { font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-calbody h3 { margin: 0; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jd-calbody h3 a { color: var(--jd-heading); }
.jd-calmeta { margin: 4px 0 0; font-size: var(--jd-fs-small); font-family: var(--jd-font-num); color: var(--jd-brass-text); }
.jd-calabout { margin: 4px 0 0; font-size: var(--jd-fs-small); color: var(--jd-text-muted); }
.jd-calbig { font-family: var(--jd-font-head); font-size: var(--jd-fs-h2); color: var(--jd-heading); margin: 2px 0 10px; line-height: 1.2; }
.jd-calfacts { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.jd-calfacts li { background: var(--jd-surface-alt); border-radius: var(--jd-radius-sm); padding: 10px 12px; }
.jd-calfacts span { display: block; font-size: var(--jd-fs-micro); color: var(--jd-text-muted); }
.jd-calfacts strong { font-family: var(--jd-font-num); }
.jd-calyears { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jd-calyears li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--jd-border); }
.jd-calyears li:last-child { border-bottom: 0; }
.jd-calcta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.jd-calplace { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.jd-calplace .jd-field { flex: 1 1 240px; margin: 0; position: relative; }
.jd-muavoid > div { background: var(--jd-caution-soft); }
.jd-muavoid span { color: var(--jd-caution-text); }
.jd-sunrow > div.is-off { opacity: .6; }
.jd-mugrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.jd-mutable { min-width: 0; width: 100%; }
.jd-mutable caption { text-align: start; font-weight: 700; color: var(--jd-heading); padding: 0 0 6px; }
.jd-mutable td { font-family: var(--jd-font-num); }
.jd-mutable tr.is-now td { background: var(--jd-brass-soft); }
.jd-mumonth { font-family: var(--jd-font-head); color: var(--jd-heading); font-size: 1.1rem; margin: 20px 0 8px; }
.jd-mudates tr.is-past td { opacity: .6; }
.jd-mudates td:nth-child(2) { font-family: var(--jd-font-num); white-space: nowrap; }
.jd-mufoot { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.jd-mublocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--jd-fs-small); }
.jd-mublocks li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--jd-border); }
.jd-mublocks span { color: var(--jd-text-muted); font-family: var(--jd-font-num); }
@media (max-width: 520px) {
  .jd-calrow { grid-template-columns: 46px 1fr; gap: 10px; padding: 10px; }
  .jd-caldate b { font-size: 1.2rem; }
  .jd-mudates td:nth-child(2) { white-space: normal; }
}
.jd-callout { margin: 16px 0 10px; padding: 12px 14px; border-radius: var(--jd-radius-sm); background: var(--jd-tint-gold-soft); border: 1px solid var(--jd-tint-gold-line); font-size: var(--jd-fs-small); }

/* The festival calendar / muhurat banner: beside the title on a wide screen, under it on a phone. */
.jd-calhero { margin: 0; flex: 0 0 min(420px, 44%); }
.jd-calhero img { display: block; width: 100%; height: auto; border-radius: var(--jd-radius); box-shadow: var(--jd-shadow-sm); }
.jd-muhero { flex: 0 0 min(320px, 36%); }
.jd-cal .jd-pagehead, .jd-mu .jd-pagehead { align-items: center; flex-wrap: nowrap; }
@media (max-width: 760px) {
  .jd-cal .jd-pagehead, .jd-mu .jd-pagehead { flex-wrap: wrap; }
  .jd-calhero, .jd-muhero { flex: 1 1 100%; }
}

/* "Read all books" under the home page's book cards. */
.jd-homebook-more { display: flex; justify-content: center; margin-top: 22px; margin-bottom: 0; }
.jd-homebook-more .jd-btn { display: inline-flex; align-items: center; gap: 8px; }
.jd-lrcta-now { margin: 4px 0 6px; font-size: 1.05rem; color: var(--jd-heading); }

/* ---- the account menu (Oct 2026) -----------------------------------------
   Signed in: an initial and the first name on the bar, opening My profile,
   My Kundlis, bookings, Plus and Log out. On a phone only the initial shows. */
.jd-acctmenu { position: relative; }
.jd-acctmenu > summary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 8px 4px 4px; border: 1px solid var(--jd-border); border-radius: 999px;
  background: var(--jd-surface); color: var(--jd-text);
  font-size: .9rem; font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap;
}
.jd-acctmenu > summary::-webkit-details-marker { display: none; }
.jd-acctmenu > summary::marker { content: ""; }
.jd-acctmenu > summary:hover, .jd-acctmenu[open] > summary { border-color: var(--jd-brass); }
.jd-acctmenu > summary:focus-visible { outline: 2px solid var(--jd-brass); outline-offset: 2px; }
.jd-acctav {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--jd-maroon); color: var(--jd-cream); font-size: .85rem; font-weight: 700;
}
.jd-acctmenu > summary .jd-i { transition: transform .15s; }
.jd-acctmenu[open] > summary .jd-i { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .jd-acctmenu > summary .jd-i { transition: none; } }
.jd-acctmenu-panel {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 70;
  min-width: 232px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column;
  background: var(--jd-surface); border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius-sm); box-shadow: var(--jd-shadow); padding: 7px;
}
.jd-acctmenu-who { margin: 0 0 4px; padding: 6px 11px 10px; border-bottom: 1px solid var(--jd-border); display: flex; flex-direction: column; gap: 2px; }
.jd-acctmenu-who strong { font-size: .92rem; overflow-wrap: anywhere; }
.jd-acctmenu-who small { color: var(--jd-text-muted); font-size: .8rem; overflow-wrap: anywhere; }
.jd-acctmenu-panel a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: var(--jd-radius-sm); font-size: .9rem; color: var(--jd-text); text-decoration: none;
}
.jd-acctmenu-panel a .jd-i { color: var(--jd-text-muted); flex: none; }
.jd-acctmenu-panel a:hover { background: var(--jd-surface-alt); color: var(--jd-brass-text); }
.jd-acctmenu-out { margin-top: 4px; border-top: 1px solid var(--jd-border); border-radius: 0 !important; padding-top: 12px !important; }
@media (max-width: 900px) {
  /* Same footprint as the person icon it replaced, so a wide uploaded
     wordmark still fits beside it at 320px. */
  .jd-acctname, .jd-acctmenu > summary .jd-i { display: none; }
  .jd-acctmenu > summary { padding: 0; border: 0; background: none; position: relative; }
  .jd-acctmenu > summary::before { content: ""; position: absolute; inset: -11px; } /* a 44px tap target */
  .jd-acctav { width: 22px; height: 22px; font-size: .74rem; }
  .jd-acctmenu[open] .jd-acctav, .jd-acctmenu > summary:hover .jd-acctav { box-shadow: 0 0 0 2px var(--jd-brass); }
}

/* ---- My profile page ---- */
.jd-acctlinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.jd-acctlink {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm);
  background: var(--jd-surface); color: var(--jd-text); text-decoration: none;
}
.jd-acctlink:hover { border-color: var(--jd-brass); }
.jd-acctlink .jd-i { color: var(--jd-brass-text); flex: none; }
.jd-acctlink span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jd-acctlink small { color: var(--jd-text-muted); font-size: .82rem; }
.jd-acctpage h2 { margin-top: 32px; }
.jd-acctform { max-width: 460px; }
.jd-acctform input[readonly] { background: var(--jd-surface-alt); color: var(--jd-text-muted); }
.jd-acctbookings { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.jd-acctbookings li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); background: var(--jd-surface);
}
.jd-acctbookings a { display: flex; flex-direction: column; gap: 3px; color: var(--jd-text); text-decoration: none; min-width: 0; }
.jd-acctbookings a span { color: var(--jd-text-muted); font-size: .88rem; }
.jd-acctbookings a:hover strong { color: var(--jd-brass-text); }
.jd-acctstatus { font-size: .8rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--jd-surface-alt); color: var(--jd-text-muted); white-space: nowrap; }
.jd-acctstatus.is-confirmed { background: var(--jd-success-soft); color: var(--jd-success-text); }
.jd-acctfoot { margin-top: 36px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.jd-acctdel { color: var(--jd-text-muted); font-size: .9rem; }
@media (max-width: 400px) { .jd-acctav { width: 20px; height: 20px; font-size: .7rem; } }

/* ---- Admin → Users: actions, blocked rows, one user's page (Oct 2026) ---- */
.jd-usact-in { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 118px; }
.jd-usact-in .jd-btn { justify-content: center; white-space: nowrap; width: 100%; }
.jd-usblock { margin: 0; }
.jd-ustable tr.is-blocked td { background: var(--jd-caution-soft); }
.jd-ustable tr.is-blocked td strong { text-decoration: line-through; text-decoration-color: var(--jd-caution-text); }
.jd-caution-text { color: var(--jd-caution-text); }
.jd-userpage .jd-panel { margin-bottom: 18px; }
.jd-userhead { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.jd-userhead h2 { margin: 0 0 2px; font-size: 1.45rem; }
.jd-userpage .jd-panel > h2 { font-size: 1.1rem; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.jd-userfacts { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 10px 18px; }
.jd-userfacts dt { color: var(--jd-text-muted); font-size: .88rem; margin: 0; }
.jd-userfacts dd { margin: 0; font-weight: 500; }
@media (max-width: 560px) { .jd-userfacts { grid-template-columns: 1fr; gap: 2px; } .jd-userfacts dd { margin-bottom: 8px; } }
.jd-userav { width: 44px !important; height: 44px !important; font-size: 1.1rem !important; flex: none; }
.jd-userfacts { margin: 0; }
.jd-ustable td:nth-child(2) a { overflow-wrap: anywhere; }
.jd-ustable th { white-space: normal; }

/* ---- My profile dashboard (Oct 2026) ---------------------------------- */
.jd-dash { max-width: 1120px; }
.jd-dash-hero {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin: 10px 0 18px; padding: 24px 26px;
  background: var(--jd-ink); color: var(--jd-text-on-dark);
  border-radius: var(--jd-radius); box-shadow: var(--jd-shadow);
}
.jd-dash-av {
  display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%;
  background: var(--jd-maroon); color: var(--jd-cream); font: 700 2rem/1 var(--jd-font-head);
  box-shadow: 0 0 0 3px var(--jd-brass);
}
.jd-dash-who { flex: 1 1 260px; min-width: 0; }
.jd-dash-who h1 { margin: 0 0 8px; color: var(--jd-text-on-dark); font-size: clamp(1.6rem, 3.4vw, 2.2rem); overflow-wrap: anywhere; }
.jd-dash-kicker { margin: 0 0 4px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--jd-brass-on-dark); }
.jd-dash-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .92rem; color: var(--jd-muted-on-dark); }
.jd-dash-facts li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.jd-dash-facts li span { overflow-wrap: anywhere; }
.jd-dash-facts .jd-i { color: var(--jd-brass-on-dark); flex: none; }
.jd-dash-facts a { color: var(--jd-brass-on-dark); font-weight: 600; }
.jd-dash-hero .jd-dash-edit { color: var(--jd-text-on-dark); border-color: var(--jd-ink-line); }
.jd-dash-hero .jd-dash-edit:hover { border-color: var(--jd-brass); color: var(--jd-brass-on-dark); }
.jd-dash-nudge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.jd-dash-nudge a { font-weight: 600; }

.jd-dash-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.jd-dash-tile {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm);
  color: var(--jd-text); text-decoration: none;
}
.jd-dash-tile:hover { border-color: var(--jd-brass); }
.jd-dash-tile span { font-size: .82rem; color: var(--jd-text-muted); }
.jd-dash-tile strong { font: 700 1.9rem/1 var(--jd-font-num, inherit); color: var(--jd-heading); }
.jd-dash-tile strong.jd-dash-tile-sm { font-size: 1.05rem; line-height: 1.3; }

.jd-dash-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.jd-dash-main, .jd-dash-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.jd-dash-card {
  background: var(--jd-surface); border: 1px solid var(--jd-border); border-radius: var(--jd-radius);
  padding: 20px 22px; box-shadow: var(--jd-shadow-sm); scroll-margin-top: 90px;
}
.jd-dash-card > h2, .jd-dash-head h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 1.2rem; }
.jd-dash-card h2 .jd-i { color: var(--jd-brass-text); }
.jd-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.jd-dash-head h2 { margin: 0; }
.jd-dash-sub { margin: 16px 0 8px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--jd-text-muted); font-family: var(--jd-font-body); }
.jd-dash-sub:first-of-type { margin-top: 0; }
.jd-dash-next { border-color: var(--jd-brass); background: var(--jd-tint-gold-soft, var(--jd-surface)); }
.jd-dash-next .jd-dash-kicker { color: var(--jd-brass-text); }
.jd-dash-next h2 { margin: 0 0 6px; font-size: 1.35rem; }
.jd-dash-when { display: flex; align-items: center; gap: 7px; margin: 0 0 14px; color: var(--jd-text); }
.jd-dash-when .jd-i { color: var(--jd-brass-text); flex: none; }
.jd-dash-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; }

.jd-dash-kundlis { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jd-dash-kundlis li { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); }
.jd-dash-kname { font-weight: 700; color: var(--jd-heading); text-decoration: none; }
.jd-dash-kname:hover { color: var(--jd-brass-text); }
.jd-dash-klinks { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; font-size: .88rem; }
.jd-dash .jd-acctform { max-width: none; }
.jd-dash .jd-acctfoot { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.jd-acctstatus.is-pending { background: var(--jd-caution-soft); color: var(--jd-caution-text); }
.jd-acctstatus.is-cancelled { text-decoration: line-through; }

@media (max-width: 900px) {
  .jd-dash-grid { grid-template-columns: 1fr; }
  .jd-dash-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .jd-dash-hero { padding: 20px 18px; gap: 14px; }
  .jd-dash-av { width: 56px; height: 56px; font-size: 1.6rem; }
  .jd-dash-hero .jd-dash-edit { width: 100%; justify-content: center; }
  .jd-dash-card { padding: 16px; }
  .jd-dash-tile strong { font-size: 1.6rem; }
}
/* Devanagari breaks apart when letter-spaced, and has no capitals. */
:lang(hi) .jd-dash-kicker, :lang(hi) .jd-dash-sub { letter-spacing: 0; text-transform: none; font-size: .85rem; }
/* My profile: stay in touch. The side column is narrow, so the button sits under the text, full width. */
.jd-dash-stayrow { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px 12px; padding: 14px 0; border-top: 1px solid var(--jd-border); }
.jd-dash-stayrow:first-of-type { border-top: 0; padding-top: 0; }
.jd-dash-stayrow p { margin: 2px 0 0; }
.jd-dash-stayrow strong { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jd-dash-stayrow > a, .jd-dash-stayrow > form { grid-column: 1 / -1; margin: 0; }
.jd-dash-stayrow > a, .jd-dash-stayrow > form .jd-btn { width: 100%; justify-content: center; }
.jd-dash-stayic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--jd-tint-gold-soft, var(--jd-surface-alt)); color: var(--jd-brass-text); }
.jd-dash-stayic.is-fb { background: var(--jd-facebook); color: #fff; }
.jd-btn.jd-dash-fbbtn { background: var(--jd-facebook); border-color: var(--jd-facebook); color: #fff; }
.jd-btn.jd-dash-fbbtn:hover { background: var(--jd-facebook-deep); border-color: var(--jd-facebook-deep); color: #fff; }
.jd-dash-staymore { margin: 4px 0 0; }

/* ---- Astrologers, easy to find (Oct 2026) ------------------------------ */
.jd-mainnav a.jd-nav-astro { color: var(--jd-maroon); font-weight: 600; white-space: nowrap; }
.jd-mainnav a.jd-nav-astro:hover, .jd-mainnav a.jd-nav-astro[aria-current] { color: var(--jd-maroon-deep); border-bottom-color: var(--jd-maroon); }
/* the hero chip: maroon, so it reads as the one to press */
.jd-trustrow li.jd-trust-act.is-astro { border-color: var(--jd-maroon); background: var(--jd-maroon); }
.jd-trust-act.is-astro .jd-trust-ic { background: var(--jd-cream); color: var(--jd-maroon); }
.jd-trust-act.is-astro .jd-trust-tx strong { color: var(--jd-cream); }
.jd-trust-act.is-astro .jd-trust-tx em { color: var(--jd-cream); opacity: .85; }
.jd-trust-act.is-astro .jd-trust-go { color: var(--jd-cream); }
/* after the chart */
.jd-askastro {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 22px 0;
  padding: 20px 22px; border: 1px solid var(--jd-maroon); border-radius: var(--jd-radius);
  background: var(--jd-rose-soft, var(--jd-surface));
}
.jd-askastro-ic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--jd-maroon); color: var(--jd-cream); }
.jd-askastro-tx { flex: 1 1 260px; min-width: 0; }
.jd-askastro-tx h2 { margin: 0 0 4px; font-size: 1.25rem; }
.jd-askastro-tx p { margin: 0; color: var(--jd-text-muted); }
.jd-askastro .jd-btn { background: var(--jd-maroon); border-color: var(--jd-maroon); color: var(--jd-cream); white-space: nowrap; }
.jd-askastro .jd-btn:hover { background: var(--jd-maroon-deep); border-color: var(--jd-maroon-deep); color: var(--jd-cream); }
@media (max-width: 520px) { .jd-askastro .jd-btn { width: 100%; justify-content: center; } }
.jd-trustrow.has-astro li { flex: 1 1 auto; }   /* three chips of different lengths: each as wide as its words, wrapping when they do not fit */
/* With Astrologers the bar holds six items: a little less space between them
   just above the fold-away width, so a wide uploaded logo keeps its room. */
@media (max-width: 1150px) and (min-width: 961px) { .jd-mainnav { gap: 11px; } .jd-mainnav a, .jd-navdrop > summary { font-size: .9rem; } }

/* ---- "Book an astrologer" side tab (Oct 2026) --------------------------
   Fixed to the right edge, a little below the middle so it clears the header
   menus and the chat button. Reads top to bottom, like the dashboard tabs it
   is modelled on. Slides in, then nudges every few seconds; the shine runs
   across it with each nudge. Pulls out a little on hover. */
.jd-booktab {
  /* physical sides on purpose: in vertical writing, "inline-end" means the bottom */
  position: fixed; right: 0; top: 46%; z-index: 55;
  display: flex; align-items: center; gap: 9px;
  writing-mode: vertical-rl;
  padding: 16px 10px 16px 9px;   /* top right bottom left, physical */
  background: var(--jd-maroon); color: var(--jd-cream);
  border-radius: 12px 0 0 12px;
  box-shadow: -4px 6px 18px rgba(23, 20, 31, .28);
  font-size: .86rem; font-weight: 700; letter-spacing: .02em; text-decoration: none;
  overflow: hidden; isolation: isolate;
  animation: jd-booktab-in .6s cubic-bezier(.2, .8, .2, 1) 1.2s both, jd-booktab-nudge 7s ease-in-out 3s infinite;
  transition: padding .2s ease, background .2s ease;
}
.jd-booktab:hover, .jd-booktab:focus-visible { background: var(--jd-maroon-deep); color: var(--jd-cream); padding-left: 15px; }
.jd-booktab:focus-visible { outline: 3px solid var(--jd-focus); outline-offset: 2px; }
.jd-booktab-ic {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--jd-cream); color: var(--jd-maroon); writing-mode: horizontal-tb; flex: none;
  animation: jd-booktab-ring 7s ease-in-out 3s infinite;
}
.jd-booktab::after {           /* the shine */
  content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(252, 246, 234, .35), transparent);
  animation: jd-booktab-shine 7s ease-in-out 3s infinite;
}
@keyframes jd-booktab-in { from { transform: translateX(110%); } to { transform: translateX(0); } }
@keyframes jd-booktab-nudge {
  0%, 86%, 100% { transform: translateX(0); }
  89% { transform: translateX(-7px); } 92% { transform: translateX(0); } 95% { transform: translateX(-4px); }
}
@keyframes jd-booktab-ring {
  0%, 85%, 100% { transform: rotate(0); }
  88% { transform: rotate(-14deg); } 91% { transform: rotate(12deg); } 94% { transform: rotate(-8deg); } 97% { transform: rotate(4deg); }
}
@keyframes jd-booktab-shine { 0%, 84% { top: -40%; } 96%, 100% { top: 110%; } }
@media (prefers-reduced-motion: reduce) {
  .jd-booktab, .jd-booktab-ic, .jd-booktab::after { animation: none; }
  .jd-booktab::after { display: none; }
}
@media (max-width: 620px) {
  .jd-booktab { top: 58%; padding: 12px 7px 12px 6px; gap: 7px; font-size: .76rem; border-radius: 10px 0 0 10px; }
  .jd-booktab-ic { width: 22px; height: 22px; }
  .jd-booktab-ic .jd-i { width: 13px; height: 13px; }
}
@media print { .jd-booktab { display: none; } }

/* ---- Continue your booking (Oct 2026) ---- */
.jd-resumebar { background: var(--jd-rose-soft); border-bottom: 1px solid var(--jd-maroon); }
.jd-resumebar-in { display: flex; align-items: center; gap: 12px; padding-block: 10px; flex-wrap: wrap; }
.jd-resumebar-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--jd-maroon); color: var(--jd-cream); flex: none; }
.jd-resumebar p { margin: 0; flex: 1 1 260px; font-size: .93rem; color: var(--jd-text); }
.jd-resumebar .jd-btn { background: var(--jd-maroon); border-color: var(--jd-maroon); color: var(--jd-cream); white-space: nowrap; }
.jd-resumebar .jd-btn:hover { background: var(--jd-maroon-deep); border-color: var(--jd-maroon-deep); color: var(--jd-cream); }
.jd-resumebar-x { border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--jd-text-muted); cursor: pointer; padding: 4px 8px; border-radius: var(--jd-radius-sm); }
.jd-resumebar-x:hover { color: var(--jd-text); background: rgba(122, 20, 36, .08); }
.jd-againnote { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; }
.jd-againnote .jd-i { flex: none; margin-top: 2px; color: var(--jd-maroon); }
@media (max-width: 520px) { .jd-resumebar .jd-btn { flex: 1 1 auto; justify-content: center; } }
/* the bar on My profile: a card under the tiles, not a strip under the header */
.jd-resumebar.is-dash { border: 1px solid var(--jd-maroon); border-radius: var(--jd-radius); margin: 0 0 22px; box-shadow: var(--jd-shadow-sm); }
.jd-resumebar.is-dash .jd-resumebar-in { padding: 14px 16px; }
/* motion: slides in, the icon turns now and then, the button glows */
.jd-resumebar { animation: jd-rb-in .5s cubic-bezier(.2, .8, .2, 1) .15s both; transform-origin: top; }
.jd-resumebar.is-going { animation: jd-rb-out .25s ease forwards; }
.jd-resumebar-ic .jd-i { animation: jd-rb-turn 6s ease-in-out 1s infinite; }
.jd-resumebar[data-resume="pay"] .jd-resumebar-ic .jd-i { animation-name: jd-rb-tick; }
.jd-resumebar .jd-btn { animation: jd-rb-glow 3s ease-in-out 1s infinite; }
@keyframes jd-rb-in { from { opacity: 0; transform: translateY(-10px) scaleY(.96); } to { opacity: 1; transform: none; } }
@keyframes jd-rb-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes jd-rb-turn { 0%, 70% { transform: rotate(0); } 90%, 100% { transform: rotate(360deg); } }
@keyframes jd-rb-tick { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-12deg); } 88% { transform: rotate(10deg); } 92% { transform: rotate(-6deg); } }
@keyframes jd-rb-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(122, 20, 36, .45); } 50% { box-shadow: 0 0 0 7px rgba(122, 20, 36, 0); } }
@media (prefers-reduced-motion: reduce) {
  .jd-resumebar, .jd-resumebar.is-going, .jd-resumebar-ic .jd-i, .jd-resumebar .jd-btn { animation: none; }
}

/* ---- Send email buttons and page (Oct 2026) ---- */
.jd-mtbtn { white-space: nowrap; margin-top: 4px; }
.jd-mtcount { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: 4px; border-radius: 999px; background: var(--jd-brass-soft); color: var(--jd-brass-text); font-size: .72rem; font-weight: 700; }
.jd-usact-in .jd-mtbtn { margin-top: 0; }
.jd-userhead-mail { margin-inline-start: auto; align-self: center; }
.jd-mtto { display: flex; align-items: center; gap: 14px; }
.jd-mtto h2 { margin: 0 0 2px; font-size: 1.25rem; }
.jd-mtto p { margin: 0; overflow-wrap: anywhere; }

/* Admin → Chat: downloads (one conversation, or what the list shows) */
.jd-chatdl { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--jd-border); }
.jd-chatdl h3 { font-size: var(--jd-fs-small); margin: 0 0 8px; }
.jd-chatdl-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.jd-chatdl-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; padding: 10px 12px; border: 1px solid var(--jd-border); border-radius: var(--jd-radius-sm); background: var(--jd-surface); }
.jd-chatdl-list .jd-hint { flex-basis: 100%; margin: 2px 0 0; }

/* Admin → Chat: assign a conversation to an astrologer */
.jd-chatassign { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--jd-border); }
.jd-chatassign h3 { font-size: var(--jd-fs-small); margin: 0 0 8px; }
.jd-chatassign textarea { width: 100%; }
.jd-chatassign-change { margin-top: 10px; }
.jd-chatassign-change summary { cursor: pointer; font-size: var(--jd-fs-small); }

/* Tasks (admin and astrologer): notes under a task, rows with something new */
.jd-tasknotes { display: grid; gap: 10px; margin: 0 0 16px; }
.jd-tasknote { max-width: 86%; padding: 10px 14px; border-radius: var(--jd-radius-sm); background: var(--jd-surface-alt); }
.jd-tasknote.is-mine { margin-left: auto; background: var(--jd-brass-soft); }
.jd-tasknote p { margin: 0 0 4px; white-space: normal; }
.jd-tasknote small { color: var(--jd-text-muted); }
.jd-tasktable tr.is-new td { background: var(--jd-brass-soft); }