/* ═══════════════════════════════════════════════════════════════════════
   Horā होरा — public site layer
   Marketing, tool-landing and legal pages. Extends the optical-glass
   material system in styles.css; defines no new colours of its own.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Accessibility ─────────────────────────────────────────────────────*/
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 18px; border-radius: 0 0 12px 0;
  background: #fff; color: var(--ink); font-size: .85rem;
}
.skip-link:focus { left: 0; }
.site :focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

/* ── Header + navigation ───────────────────────────────────────────────*/
.site-header {
  margin: 20px auto 0; max-width: 1180px; width: calc(100% - 32px);
  padding: 13px 20px; border-radius: 20px;
  position: sticky; top: 12px; z-index: 30;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.site-header .brand { text-decoration: none; color: inherit; gap: 12px; }
/* Two-line lockup: the name, and the institute that stands behind it. */
.brand-lockup { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-name { font-size: 1.18rem; font-weight: 600; letter-spacing: .2px; line-height: 1.2; }
.brand-name .dev { color: var(--ink-soft); }
.brand-by {
  font-size: .61rem; color: var(--ink-faint); letter-spacing: .035em;
  line-height: 1.3; text-transform: none; white-space: nowrap;
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav-link {
  color: var(--ink-soft); text-decoration: none; font-size: .88rem;
  padding: 8px 12px; border-radius: 11px; white-space: nowrap;
  transition: background .3s, color .3s;
}
.nav-link:hover { color: var(--ink); background: rgba(255,255,255,.45); }
.nav-link.current { color: var(--ink); font-weight: 600; background: rgba(255,255,255,.38); }
.nav-cta {
  margin-left: 8px; padding: 9px 18px; font-size: .88rem;
  text-decoration: none; font-weight: 600; color: #16233a;
  background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(215,232,255,.4) 55%, rgba(180,210,255,.3));
  display: inline-block;
}

/* The language switch is a peer of the nav links, not a setting buried in a
   footer: on a bilingual site the wrong language is a dead end, not a preference. */
.nav-lang {
  margin-left: 10px; padding: 6px 12px; border-radius: 999px;
  font-size: .8rem; text-decoration: none; color: var(--ink-soft);
  border: 1px solid rgba(120,150,200,.3); white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;
}
.nav-lang:hover { color: var(--ink); background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.8); }

/* Mobile menu: CSS-only, no JS dependency. */
.nav-burger { display: none; margin-left: auto; cursor: pointer; padding: 9px; }
.nav-burger span {
  display: block; width: 22px; height: 2px; margin: 4px 0;
  background: var(--ink-soft); border-radius: 2px; transition: transform .3s, opacity .3s;
}

/* ── Page frame ────────────────────────────────────────────────────────*/
/* Marketing pages get the wider measure; the chart application keeps its own. */
.site.marketing main { max-width: 1180px; padding: 34px 16px 80px; }
.page-hero { max-width: 760px; margin: 10px 0 46px; }
.page-hero.narrow, .prose-band.narrow { max-width: 720px; }
.page-hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); margin: 0 0 14px; line-height: 1.16; }
.page-hero .dev { color: var(--ink-soft); font-weight: 500; }
.updated { color: var(--ink-faint); font-size: .8rem; margin: 0; }

.crumbs { font-size: .8rem; color: var(--ink-faint); margin: 0 0 22px; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin: 0 6px; }

/* ═══════════════════════════════════════════════════════════════════════
   THE ALMANAC SPREAD — landing page
   The home page is composed as a printed Indian pañcāṅga opened flat: a ruled
   masthead, a dated almanac strip, numbered departments, tabular rhythm.
   Hairline rules carry the structure that borders usually would; the glass
   provides the depth. No new colours — everything comes from styles.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Masthead: the ruled line that says "dated reference document" ─────*/
.mast {
  display: flex; align-items: center; gap: 16px;
  margin: 6px 0 40px; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .2em; color: var(--ink-faint);
}
.mast-rule {
  flex: 1; height: 1px; min-width: 20px;
  /* The ruled line opens on gold — the first warmth the eye meets. */
  background: linear-gradient(90deg,
    rgba(154,123,63,.55), rgba(154,123,63,.16) 26%,
    rgba(120,150,200,.22) 62%, rgba(120,150,200,.06));
}
.mast-kicker { font-weight: 600; color: var(--ink-soft); }
.mast-kicker, .mast-meta { white-space: nowrap; }
.mast-meta { letter-spacing: .12em; font-variant-numeric: tabular-nums; }

/* ── The spread: the claim and its proof, side by side ─────────────────*/
.spread {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 56px; align-items: start; margin: 0 0 86px;
  position: relative;
}
/* Dawn light pooled behind the hero glass. The crystal stays colourless —
   this sits in the chamber behind it, and the card's backdrop saturation
   lifts it into a quiet warmth. Static: rastered once, no animation cost. */
.spread::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* right stays at 0: an absolutely-positioned box hanging past the right
     edge extends the document's scroll area, and 390px viewports gain a
     14px horizontal scroll. Left/top overhang is safe; right is not. */
  top: -14%; right: 0; width: 64%; height: 116%;
  background:
    radial-gradient(52% 44% at 66% 30%, rgba(255,198,148,.26), transparent 70%),
    radial-gradient(46% 40% at 34% 84%, rgba(255,222,178,.18), transparent 72%),
    radial-gradient(30% 30% at 88% 70%, rgba(255,176,196,.10), transparent 75%);
  filter: blur(26px);
}
.spread-say { padding-top: 6px; }
.spread-say .hero-lede { margin-bottom: 28px; }
.spread-show { margin-bottom: 0; padding: 24px 24px 20px; }

/* The slow specular sweep: a band of light crossing the hero card, the way
   sun crosses a glass cabinet. Transform/opacity only; long dead time. */
.card-sheen {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  overflow: hidden; pointer-events: none;
}
.card-sheen::before {
  content: ""; position: absolute; top: -24%; bottom: -24%; left: 0; width: 34%;
  background: linear-gradient(100deg,
    transparent, rgba(255,255,255,.32) 42%,
    rgba(255,244,224,.30) 58%, transparent);
  opacity: 0; transform: skewX(-14deg) translateX(-160%);
}

/* ── Arrival: the almanac settles onto the desk ────────────────────────
   One authored moment, on the hero only. The masthead rules itself in, the
   claim rises line by line, the glass card lands beside it, and the graha
   rail settles entry by entry. Opacity + transform only, each 400–600ms,
   played once. Everything lives inside the no-preference query, so a
   reduced-motion reader gets the finished page with no delay at all. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes alm-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes alm-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes alm-settle {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
  }
  /* The specular band crosses the glass once soon after arrival, then again
     each long while — sun over a glass cabinet, mostly dead time. */
  @keyframes alm-sheen {
    0%   { opacity: 0; transform: skewX(-14deg) translateX(-160%); }
    3%   { opacity: 1; }
    15%  { opacity: 0; transform: skewX(-14deg) translateX(480%); }
    100% { opacity: 0; transform: skewX(-14deg) translateX(480%); }
  }
  .almanac .mast { animation: alm-fade .5s ease-out both; }
  .spread-say > * { animation: alm-rise .55s cubic-bezier(.22,1,.36,1) both; }
  .spread-say > :nth-child(1) { animation-delay: .05s; }
  .spread-say > :nth-child(2) { animation-delay: .12s; }
  .spread-say > :nth-child(3) { animation-delay: .2s; }
  .spread-say > :nth-child(4) { animation-delay: .28s; }
  .spread-say > :nth-child(5) { animation-delay: .36s; }
  .spread-say > :nth-child(6) { animation-delay: .44s; }
  .spread-show { animation: alm-rise .6s cubic-bezier(.22,1,.36,1) .24s both; }
  .rail-list li { animation: alm-settle .45s cubic-bezier(.22,1,.36,1) both; }
  .rail-list li:nth-child(1) { animation-delay: .58s; }
  .rail-list li:nth-child(2) { animation-delay: .62s; }
  .rail-list li:nth-child(3) { animation-delay: .66s; }
  .rail-list li:nth-child(4) { animation-delay: .7s; }
  .rail-list li:nth-child(5) { animation-delay: .74s; }
  .rail-list li:nth-child(6) { animation-delay: .78s; }
  .rail-list li:nth-child(7) { animation-delay: .82s; }
  .rail-list li:nth-child(8) { animation-delay: .86s; }
  .rail-list li:nth-child(9) { animation-delay: .9s; }
  .card-sheen::before { animation: alm-sheen 18s linear 1.4s infinite; }
}

/* The graha rail: the square's data written out, as an almanac states its
   figures twice — once as a diagram, once as a table. */
.rail { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(120,150,200,.22); }
.rail-head {
  margin: 0 0 12px; font-size: .64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; color: var(--ink-faint);
}
.rail-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 26px; row-gap: 9px;
}
.rail-list li { display: flex; align-items: baseline; gap: 7px; font-size: .82rem; min-width: 0; }
.rail-g { color: var(--ink-soft); white-space: nowrap; }
.rail-dot {
  flex: 1; height: 1px; min-width: 6px; align-self: center;
  background: repeating-linear-gradient(90deg, rgba(120,150,200,.4) 0 1px, transparent 1px 4px);
}
.rail-s { color: var(--ink); font-weight: 600; white-space: nowrap; }
.rail-r { color: #b06a2c; font-weight: 700; text-decoration: none; border: 0; font-size: .9em; }

.kundali-cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 11px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(120,150,200,.2);
}
.kundali-title { font-size: .92rem; font-weight: 600; color: var(--ink); }
.kundali-sub {
  font-size: .72rem; color: var(--ink-faint);
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
}

/* ── The kuṇḍalī square: today's actual sky, not an illustration ───────
   Real material: a soft wide under-stroke gives every line a glass halo,
   a crisp over-stroke keeps the chart readable, gold rides the diagonals
   and the inner rule, and daylight pools in the occupied bhāvas. */
.kundali {
  display: block; width: 100%; height: auto; max-width: 380px; margin: 0 auto;
  filter: drop-shadow(0 16px 30px rgba(40,60,95,.18));
}
.k-under {
  fill: none; stroke: rgba(120,160,220,.20); stroke-width: 5.5;
  stroke-linejoin: round;
}
.k-diag { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .55; }
.k-frame { fill: none; stroke: rgba(56,92,150,.60); stroke-width: 1.15; }
.k-frame .k-outer { stroke: rgba(56,92,150,.68); stroke-width: 1.9; }
/* The double rule of a printed almanac frame, drawn in gold. */
.k-frame .k-inner { stroke: rgba(154,123,63,.34); stroke-width: .8; }
.k-house text { text-anchor: middle; }
.k-sign {
  font-size: 15px; fill: var(--ink-faint); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.k-graha { font-size: 21px; fill: var(--ink); font-weight: 650; }
.k-house.crowded .k-graha { font-size: 16px; }
.k-r { font-size: 11px; fill: #b06a2c; font-weight: 700; }
.k-lagna { font-size: 13px; fill: var(--gold); text-anchor: middle; }
.k-lagna-d { fill: rgba(255,240,214,.55); stroke: var(--gold); stroke-width: 1; opacity: .9; }
/* Occupied bhāvas catch a little more light — the eye finds them first. */
.k-house.occupied .k-sign { fill: var(--ink-soft); }

.kundali-note {
  margin: 14px 0 0; font-size: .76rem; line-height: 1.55;
  color: var(--ink-faint); max-width: 46ch;
}

/* ── The almanac strip: the five limbs and the day's windows ───────────*/
.strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin: 18px 0 0; padding-top: 4px;
  border-top: 1px solid rgba(120,150,200,.2);
}
.strip > div {
  padding: 10px 10px 9px; min-width: 0;
  border-bottom: 1px solid rgba(120,150,200,.14);
  border-right: 1px solid rgba(120,150,200,.14);
}
.strip > div:nth-child(4n) { border-right: none; }
.strip > div:nth-last-child(-n+4) { border-bottom: none; }
.strip dt {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--ink-faint); margin-bottom: 3px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.strip dd {
  margin: 0; font-size: .84rem; color: var(--ink); font-weight: 500;
  line-height: 1.35; overflow-wrap: anywhere;
}
.strip dd.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
/* Polarity = colour + SHAPE + label (deutan ΔE of good/bad is 0.8 — colour
   alone is invisible to red-green colorblind readers). The avoid window
   carries a slashed ring, the auspicious one a filled disc, and both say it
   in words. Text tones are derived from the tokens to clear 4.5:1. */
.strip .warn dd { color: var(--bad); color: color-mix(in srgb, var(--bad) 82%, var(--ink)); }
.strip .good dd { color: var(--good); color: color-mix(in srgb, var(--good) 78%, var(--ink)); }
.strip-tag {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: .6rem; letter-spacing: .08em; font-weight: 600; white-space: nowrap;
}
.strip .warn .strip-tag { color: var(--bad); color: color-mix(in srgb, var(--bad) 78%, var(--ink)); }
.strip .good .strip-tag { color: var(--good); color: color-mix(in srgb, var(--good) 74%, var(--ink)); }
.strip .warn .strip-tag::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  border: 1.5px solid currentColor;
  background: linear-gradient(135deg, transparent 43%, currentColor 43% 57%, transparent 57%);
}
.strip .good .strip-tag::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: currentColor;
}

/* ── The specimen: a real cited reading, shown rather than described ───*/
.specimen { margin-bottom: 0; padding: 26px 28px 22px; }
.spec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding-bottom: 13px; border-bottom: 1px solid rgba(120,150,200,.2);
}
.spec-domain {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--ink-soft); font-weight: 600;
}
.spec-subject { font-size: .74rem; color: var(--ink-faint); }
.spec-rodden {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  border: 1px solid rgba(120,150,200,.32); border-radius: 999px;
  font-size: .66rem; letter-spacing: .04em;
}
.spec-claim {
  margin: 18px 0 20px; font-size: clamp(1.08rem, 1.8vw, 1.3rem);
  line-height: 1.52; color: var(--ink); max-width: 62ch; font-weight: 500;
}
.spec-meter {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 22px;
}
/* The confidence bar is the page's central trust signal, so it is read at a
   glance or it is worthless. Quarter ticks give the number a scale to be
   read against; the fill states it plainly. */
.spec-meter .meter {
  flex: 1; min-width: 140px; max-width: 320px; margin: 0; height: 13px;
  background:
    linear-gradient(90deg,
      transparent 0 calc(25% - .5px), rgba(27,35,48,.16) 0 calc(25% + .5px),
      transparent 0 calc(50% - .5px), rgba(27,35,48,.16) 0 calc(50% + .5px),
      transparent 0 calc(75% - .5px), rgba(27,35,48,.16) 0 calc(75% + .5px),
      transparent 0),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.15));
}
.spec-meter .meter-fill {
  background: linear-gradient(90deg, rgba(96,146,214,.85), rgba(45,95,178,.97));
}
.spec-meter-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-soft); font-weight: 600;
}
.spec-meter-num {
  font-size: 1.12rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* The disagreement flag: triangle mark + words, never colour alone. */
.pill-warn {
  color: var(--bad); color: color-mix(in srgb, var(--bad) 82%, var(--ink));
  border-color: rgba(192,69,95,.35);
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px;
}
.pill-warn::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 7px solid currentColor;
}

/* The ledger: for and against, given equal width on purpose. */
.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ledger-side { padding: 18px 22px 4px; }
.ledger-side.for { border-right: 1px solid rgba(120,150,200,.2); padding-left: 0; }
.ledger-side.against { padding-right: 0; }
.ledger-side h3 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 11px; font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft);
}
/* Polarity by shape: FOR is a filled disc, AGAINST an open dashed ring —
   readable with no colour vision at all. Glyph and label restate it. */
.ledger-mark {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem; line-height: 1; font-weight: 600;
}
.ledger-side.for .ledger-mark {
  color: var(--good); color: color-mix(in srgb, var(--good) 76%, var(--ink));
  background: rgba(31,143,95,.12); border: 1.5px solid currentColor;
}
.ledger-side.against .ledger-mark {
  color: var(--bad); color: color-mix(in srgb, var(--bad) 80%, var(--ink));
  background: transparent; border: 1.5px dashed currentColor;
}
.ledger-n {
  margin-left: auto; padding: 1px 8px; border-radius: 999px;
  background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.7);
  font-size: .7rem; letter-spacing: 0; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.ev-claim { margin: 0 0 7px; font-size: .92rem; font-weight: 600; color: var(--ink); line-height: 1.45; }
.ev-detail { margin: 0 0 9px; font-size: .84rem; color: var(--ink-soft); line-height: 1.6; }
.ev-basis { margin: 0; font-size: .74rem; color: var(--ink-faint); line-height: 1.5; }
.ev-basis cite { font-style: normal; color: var(--ink-soft); }

.spec-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid rgba(120,150,200,.2);
  font-size: .74rem; color: var(--ink-faint);
}
.spec-foot a { color: var(--accent); text-decoration: none; font-weight: 600; }
.spec-foot a:hover { text-decoration: underline; }

/* ── Departments: the almanac's numbered sections ──────────────────────*/
.dept-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  /* The index opens on gold, the same way the masthead rule does. */
  border-top: 1px solid rgba(120,150,200,.22);
  border-image: linear-gradient(90deg,
    rgba(154,123,63,.5), rgba(120,150,200,.26) 34%, rgba(120,150,200,.14)) 1;
}
.dept {
  display: grid; grid-template-columns: 44px 1fr auto;
  align-items: start; gap: 14px;
  padding: 20px 8px 20px 2px; text-decoration: none; color: inherit;
  border-bottom: 1px solid rgba(120,150,200,.18);
  /* Hover moves by transform only — padding animation is layout thrash. */
  transition: background .28s;
}
.dept:hover, .dept:focus-visible { background: rgba(255,255,255,.4); }
/* The index numeral is a folio number, not a footnote: light, large,
   tabular, and it takes the gold when the row is addressed. */
.dept-num {
  /* 1.5rem = 24px: large text, where the gold hover's ~3.5:1 is compliant. */
  font-size: 1.5rem; color: var(--ink-faint); font-weight: 300;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  line-height: 1; padding-top: 2px;
  transition: color .28s;
}
.dept:hover .dept-num, .dept:focus-visible .dept-num { color: var(--gold); }
.dept-body { min-width: 0; }
@media (prefers-reduced-motion: no-preference) {
  .dept-num, .dept-body { transition: transform .25s cubic-bezier(.22,1,.36,1), color .28s; }
  .dept:hover .dept-num, .dept:hover .dept-body { transform: translateX(6px); }
}
.dept-name { display: block; font-size: 1.02rem; font-weight: 600; margin-bottom: 5px; }
.dept-name .dev { color: var(--ink-faint); font-size: .88em; font-weight: 500; }
.dept-lede {
  display: block; font-size: .84rem; color: var(--ink-soft); line-height: 1.58;
  /* The almanac index lists, it does not expound — two lines each. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dept-go { color: var(--accent); opacity: 0; transition: opacity .28s, transform .28s; transform: translateX(-4px); }
.dept:hover .dept-go, .dept:focus-visible .dept-go { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .dept-go { transition: opacity .28s; transform: none; }
}

/* ── Reports: the picker form ──────────────────────────────────────────*/
.rp-form-card { max-width: 860px; padding: 30px 32px 26px; margin-bottom: 60px; }
.rp-form-card h2 { font-size: 1.02rem; margin: 0 0 16px; }
.rp-pick-head { margin-top: 30px !important; padding-top: 24px; border-top: 1px solid rgba(120,150,200,.22); }
.rp-pick-note { margin: -10px 0 16px; color: var(--ink-soft); font-size: .87rem; }

.rp-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 10px; }
/* Each report is a target in its own right, so the whole tile is the control
   rather than a checkbox with a label beside it. */
.rp-kind {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 13px 15px; border-radius: 14px;
  border: 1px solid rgba(120,150,200,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12));
  transition: border-color .25s, background .25s;
}
.rp-kind:hover { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.46); }
.rp-kind input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.rp-kind:has(input:checked) {
  border-color: rgba(61,108,200,.5);
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(226,238,255,.34));
}
.rp-kind-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rp-kind-name { font-size: .94rem; font-weight: 600; }
.rp-kind-sub { font-size: .79rem; color: var(--ink-soft); line-height: 1.45; }
.rp-fine { margin: 14px 0 0; font-size: .78rem; color: var(--ink-faint); line-height: 1.6; }
.rp-form-card .actions { margin-top: 24px; }

/* ── Home hero ─────────────────────────────────────────────────────────*/
.hero { max-width: 800px; margin: 58px 0 74px; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .22em; font-size: .7rem;
  color: var(--ink-soft); margin: 0 0 18px; font-weight: 600;
}
/* A short gold rule signs the eyebrow — brand warmth, not data. */
.eyebrow::before {
  content: ""; display: inline-block; width: 26px; height: 1px;
  background: var(--gold); opacity: .65;
  vertical-align: middle; margin-right: 11px; transform: translateY(-1px);
}
/* The headline is the document's masthead voice: full bold, display-tight
   tracking, and a solid gold italic on the one word that is the thesis. */
.hero-title {
  font-size: clamp(2.55rem, 4.9vw, 4.4rem); line-height: 1.05;
  margin: 0 0 22px; font-weight: 700; letter-spacing: -.022em;
}
.hero-title em {
  font-style: italic; font-weight: 650; color: var(--gold);
}
/* Devanāgarī: no synthetic italic (font-synthesis is off), no negative
   tracking, and more leading so the mātrās never clip. */
:lang(hi) .hero-title { letter-spacing: 0; line-height: 1.22; font-size: clamp(2.3rem, 4.4vw, 3.9rem); }
:lang(hi) .hero-title em { font-style: normal; }
.hero-lede, .lede {
  font-size: clamp(1.02rem, 1.9vw, 1.2rem); color: var(--ink-soft);
  line-height: 1.62; margin: 0 0 26px; max-width: 66ch;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.glass-btn.lg { padding: 15px 30px; font-size: 1rem; border-radius: 17px; }
a.glass-btn { text-decoration: none; display: inline-block; }
.hero-fine { color: var(--ink-faint); font-size: .8rem; margin: 20px 0 0; }

/* ── Pillars ───────────────────────────────────────────────────────────*/
.pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 22px; margin-bottom: 78px;
}
.pillar { margin-bottom: 0; }
.pillar h2 { display: flex; align-items: baseline; gap: 11px; font-size: 1.1rem; margin-bottom: 12px; }
.pillar p { margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.62; }
.pillar-mark {
  font-size: 1.35rem; color: var(--gold); font-weight: 400; opacity: .75;
}

/* ── Content bands ─────────────────────────────────────────────────────*/
.band { margin-bottom: 82px; }
.band-title { font-size: clamp(1.45rem, 3.1vw, 2.05rem); margin: 0 0 18px; line-height: 1.2; }
.band-lede { color: var(--ink-soft); max-width: 76ch; margin: 0 0 34px; line-height: 1.66; }

.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 26px 30px;
}
.feat h3 { font-size: .96rem; margin: 0 0 7px; }
.feat p { margin: 0; color: var(--ink-soft); font-size: .89rem; line-height: 1.6; }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: start; }
.split-text p { color: var(--ink-soft); line-height: 1.66; margin: 0 0 16px; }
.split-panel { margin-bottom: 0; }
.split-panel h3 { margin: 0 0 16px; font-size: 1rem; }

.tick-list, .step-list, .source-list { margin: 0; padding-left: 20px; }
.tick-list { list-style: none; padding-left: 0; }
.tick-list li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  color: var(--ink-soft); font-size: .91rem; line-height: 1.58;
}
.tick-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--good); font-weight: 700; opacity: .8;
}
.step-list li, .source-list li { margin-bottom: 13px; color: var(--ink-soft); font-size: .91rem; line-height: 1.6; }
.step-list strong, .source-list strong { color: var(--ink); }

/* ── Tool cards ────────────────────────────────────────────────────────*/
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.tool-card {
  margin-bottom: 0; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 10px;
}
.tool-card h3 { margin: 0; font-size: 1.08rem; }
.tool-card p { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.58; flex: 1; }
.tool-go { color: var(--accent); font-size: .86rem; font-weight: 600; }

/* ── CTA band ──────────────────────────────────────────────────────────*/
.cta-band { text-align: center; padding: 52px 30px; margin-bottom: 30px; }
.cta-band h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); margin: 0 0 10px; }
.cta-band p { color: var(--ink-soft); margin: 0 0 26px; }

/* ── Long-form prose ───────────────────────────────────────────────────*/
.prose-band { max-width: 78ch; }
.prose-band h2 { font-size: 1.3rem; margin: 42px 0 14px; }
.prose-band h2:first-child { margin-top: 0; }
.prose-band p { color: var(--ink-soft); line-height: 1.72; margin: 0 0 16px; }
.prose-band .lede { color: var(--ink); font-size: 1.08rem; }
.prose-band ul, .prose-band ol { color: var(--ink-soft); line-height: 1.7; padding-left: 22px; }
.prose-band li { margin-bottom: 10px; }
.prose-band strong { color: var(--ink); }
.prose-band a { color: var(--accent); }
.prose-band code {
  background: rgba(255,255,255,.5); padding: 2px 6px; border-radius: 5px;
  font-size: .86em; border: 1px solid var(--hair);
}
.note {
  color: var(--ink-faint); font-size: .85rem; line-height: 1.6;
  border-left: 2px solid var(--hair); padding-left: 14px; margin: 20px 0;
}

.spec-table { width: 100%; border-collapse: collapse; margin: 8px 0 22px; font-size: .89rem; }
.spec-table th, .spec-table td {
  text-align: left; vertical-align: top; padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--hair);
}
.spec-table th { width: 26%; color: var(--ink); font-weight: 600; white-space: nowrap; }
.spec-table td { color: var(--ink-soft); line-height: 1.6; }

/* ── FAQ ───────────────────────────────────────────────────────────────*/
.faq { display: grid; gap: 14px; }
.faq-item { padding: 18px 22px; margin-bottom: 0; }
.faq-item summary {
  cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--ink-faint); font-weight: 400; font-size: 1.2rem; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 14px 0 0; color: var(--ink-soft); font-size: .91rem; line-height: 1.66; }

/* ── Evidence page ─────────────────────────────────────────────────────*/
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin-bottom: 30px; }
.stat { text-align: center; padding: 26px 18px; margin-bottom: 0; }
.stat-n { display: block; font-size: 2.1rem; font-weight: 650; color: var(--ink); line-height: 1; }
.stat-l { display: block; margin-top: 8px; color: var(--ink-faint); font-size: .8rem; }
.finding-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; }
.finding { padding: 18px 22px; margin-bottom: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.66; }
.disclaimer-box {
  border: 1px dashed var(--hair); border-radius: 14px; padding: 18px 20px;
  color: var(--ink-faint); font-size: .84rem; line-height: 1.66; margin: 0 0 14px;
}
.mundane-mount { margin-top: 20px; }
.mundane-mount .note { margin-top: 12px; }

/* ── Footer ────────────────────────────────────────────────────────────*/
.site-footer {
  max-width: 1180px; margin: 0 auto 40px; width: calc(100% - 32px);
  padding: 40px 36px 30px; border-radius: 22px;
}
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 34px; }
.foot-col h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin: 0 0 14px; font-weight: 600; }
.foot-col a { display: block; color: var(--ink-soft); text-decoration: none; font-size: .87rem; margin-bottom: 9px; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-brand .brand-glyph { font-size: 30px; }
.foot-name { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 10px 0 0; }
.foot-name .dev { color: var(--ink-soft); font-weight: 500; }
.foot-by { color: var(--ink-faint); font-size: .74rem; line-height: 1.45; margin: 3px 0 0; letter-spacing: .02em; }
.foot-tag { color: var(--ink-soft); font-size: .87rem; line-height: 1.6; margin: 14px 0 0; }
.foot-fine {
  margin: 34px 0 0; padding-top: 20px; border-top: 1px solid var(--hair);
  color: var(--ink-faint); font-size: .76rem; line-height: 1.66;
}

/* ── Responsive ────────────────────────────────────────────────────────*/
/* Seven departments plus a CTA and the language switch outgrow the bar well
   before phone width, so the menu collapses at laptop width rather than 760. */
@media (max-width: 1080px) {
  .nav-burger { display: block; }
  .site-nav {
    display: none; width: 100%; margin-left: 0; flex-direction: column;
    align-items: stretch; gap: 2px; padding-top: 10px;
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-link, .nav-cta, .nav-lang {
    padding: 12px 14px; text-align: left; margin-left: 0; border-radius: 11px;
  }
  .nav-cta { margin-top: 8px; text-align: center; }
  .nav-lang { margin-top: 4px; border: none; color: var(--accent); font-weight: 600; }
}

@media (max-width: 1000px) {
  .spread { grid-template-columns: 1fr; gap: 40px; margin-bottom: 66px; }
  .spread-show { max-width: 560px; }
  .dept-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 30px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ledger { grid-template-columns: 1fr; }
  .ledger-side.for {
    border-right: none; border-bottom: 1px solid rgba(120,150,200,.2);
    padding-bottom: 18px;
  }
  .ledger-side.against { padding-left: 0; }
}

@media (max-width: 620px) {
  .strip { grid-template-columns: 1fr 1fr; }
  .strip > div:nth-child(4n) { border-right: 1px solid rgba(120,150,200,.14); }
  .strip > div:nth-child(2n) { border-right: none; }
  .strip > div:nth-last-child(-n+4) { border-bottom: 1px solid rgba(120,150,200,.14); }
  .strip > div:nth-last-child(-n+2) { border-bottom: none; }
  /* The dated meta line cannot share a row with the kicker at phone width —
     it is set nowrap and would push the document past the viewport. Give it
     its own line and let the rule close the row above it. */
  .mast { flex-wrap: wrap; row-gap: 7px; font-size: .6rem; gap: 10px; }
  .mast-meta { flex-basis: 100%; white-space: normal; letter-spacing: .1em; }
  .specimen { padding: 20px 18px 18px; }
  .spread-show { padding: 18px 16px 16px; }
  .rail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}

@media (max-width: 760px) {
  .site-header { padding: 12px 16px; }
  .brand-name { font-size: 1.06rem; }
  .brand-by { font-size: .55rem; letter-spacing: .02em; }
  .site main { padding-top: 24px; }
  .hero { margin: 34px 0 54px; }
  .band { margin-bottom: 60px; }
  .site-footer { padding: 30px 22px 24px; }
  .spec-table th { width: auto; display: block; padding-bottom: 2px; border-bottom: none; white-space: normal; }
  .spec-table td { display: block; padding-top: 0; }
}

/* ── Low-power / motion-sensitive: drop the expensive chamber ──────────*/
@media (prefers-reduced-motion: reduce) {
  .env-lite .godray, .env-lite .dawn-rose { display: none; }
}
@media (max-width: 760px) {
  /* Backdrop blur on many stacked surfaces is the main battery cost on
     phones; keep the material, drop the compositing load. */
  .env-lite .godray, .env-lite .dawn-rose, .env-lite .fog { display: none; }
}

/* ── Chart page: simplified form ───────────────────────────────────────*/
.form-intro { margin: -8px 0 20px; color: var(--ink-faint); font-size: .84rem; line-height: 1.6; }
.field-note {
  margin: -4px 0 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.6;
  border-left: 2px solid var(--gold); padding-left: 12px; opacity: .9;
}
.advanced { margin-top: 18px; border-top: 1px solid var(--hair); padding-top: 14px; }
.advanced > summary {
  cursor: pointer; color: var(--ink-faint); font-size: .82rem; list-style: none;
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 0;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before { content: "▸"; transition: transform .25s; display: inline-block; }
.advanced[open] > summary::before { transform: rotate(90deg); }
.advanced > summary:hover { color: var(--ink-soft); }
.advanced .grid { margin-top: 16px; }
.field input:disabled { opacity: .5; cursor: not-allowed; }

.time-warning {
  padding: 18px 22px; margin-bottom: 20px;
  color: var(--ink-soft); font-size: .88rem; line-height: 1.65;
  border-left: 3px solid var(--gold);
}
.time-warning strong { color: var(--ink); display: block; margin-bottom: 5px; }

/* ── Accounts: sign-in, verify, portal ─────────────────────────────────*/
.auth-hero { margin-top: 18px; }
.auth-card { margin-top: 26px; padding: 26px; display: grid; gap: 16px; }
.auth-card .field { font-size: .85rem; }
.auth-card .actions { margin-top: 4px; }
.note-bad { color: var(--bad); border-left-color: var(--bad); }
.note-good { color: var(--good); border-left-color: var(--good); }

.app-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.app-head .band-title { margin: 0; }

.profile-card { gap: 12px; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.profile-actions .glass-btn { padding: 9px 16px; font-size: .84rem; }
.glass-btn.danger { color: var(--bad); }
.glass-btn.danger:hover { color: var(--bad); }

#eraseConfirm { margin-top: 16px; display: grid; gap: 12px; }

/* Save-to-account control inside the chart app */
.save-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair);
}
.save-row .note { margin: 0; border: none; padding: 0; }

/* ── Print ─────────────────────────────────────────────────────────────*/
@media print {
  .site-header, .site-footer, .cta-band, .skip-link, .crumbs { display: none !important; }
  .site main { max-width: none; padding: 0; }
}

/* ── The Guru chat surface ─────────────────────────────────────────────*/
.guru-intro p { color: var(--ink-soft); font-size: .9rem; line-height: 1.6; margin: 0 0 18px; max-width: 62ch; }
.guru-thread { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; min-height: 40px; }

.guru-msg { max-width: 68ch; }
.guru-you { align-self: flex-end; }
.guru-you .guru-text {
  background: linear-gradient(160deg, rgba(255,255,255,.6), rgba(215,232,255,.34));
  border: 1px solid var(--hair); border-radius: 16px 16px 4px 16px;
  padding: 11px 16px; color: var(--ink); font-size: .93rem; line-height: 1.6;
}
.guru-guru .guru-text {
  color: var(--ink); font-size: .97rem; line-height: 1.72;
  border-left: 2px solid var(--gold); padding-left: 16px;
}

/* The status line the orchestrator emits while tools run — a real computed
   state, never a fake typing indicator. */
.guru-status {
  color: var(--ink-faint); font-size: .84rem; font-style: italic;
  padding-left: 18px; animation: guru-breathe 2.4s ease-in-out infinite alternate;
}
@keyframes guru-breathe { from { opacity: .55; } to { opacity: 1; } }

/* Evidence chips: the visible proof of the Iron Rule. */
.guru-evidence { margin: 12px 0 0 18px; }
.guru-evidence-head {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint); margin-bottom: 8px;
}
.guru-chip {
  border: 1px solid var(--hair); border-radius: 12px; margin-bottom: 7px;
  background: rgba(255,255,255,.34); padding: 8px 13px;
}
.guru-chip summary {
  cursor: pointer; font-size: .85rem; color: var(--ink-soft);
  list-style: none; display: flex; align-items: baseline; gap: 9px;
}
.guru-chip summary::-webkit-details-marker { display: none; }
.guru-chip[open] summary { color: var(--ink); font-weight: 600; }
.guru-chip p { margin: 9px 0 0; font-size: .84rem; line-height: 1.6; color: var(--ink-soft); }
.guru-chip .chip-basis { color: var(--ink-faint); font-size: .78rem; }
.chip-verdict { width: 7px; height: 7px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.chip-supportive { background: var(--good); }
.chip-adverse { background: var(--bad); }
.chip-neutral { background: var(--ink-faint); }

.guru-form { display: flex; gap: 10px; margin-top: 6px; }
.guru-form input {
  flex: 1; font: inherit; font-size: .93rem; padding: 12px 16px; border-radius: 14px;
  border: 1px solid var(--hair); background: rgba(255,255,255,.5); color: var(--ink);
}
.guru-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.guru-fine { color: var(--ink-faint); font-size: .78rem; line-height: 1.6; margin: 14px 0 0; max-width: 66ch; }

@media (max-width: 720px) {
  .guru-evidence { margin-left: 0; }
  .guru-guru .guru-text { padding-left: 12px; }
}