/* Daivaj — dark celestial.
   Dark is the design, light is the fallback. Space Grotesk carries the loud
   type, DM Sans carries everything you actually read. Colours only ever come
   from the tokens below; every pair here is checked at 4.5:1 or better. */
:root {
  --bg:#0B0A12; --bg-2:#14111F; --line:#2A2440;
  --ink:#F4F2FF; --muted:#A79FC7;
  --violet:#A78BFA; --cyan:#22D3EE; --on-accent:#0B0A12;
  --ok:#34D399; --bad:#FB7185;
  --ok-bg:rgba(52,211,153,.12); --bad-bg:rgba(251,113,133,.12);

  --bar:rgba(11,10,18,.72);
  --glow:rgba(167,139,250,.45);
  --star:rgba(244,242,255,.85);
  --aurora-1:rgba(139,92,246,.20);
  --aurora-2:rgba(34,211,238,.12);
  --shimmer:rgba(167,139,250,.16);
  --tint:rgba(167,139,250,.10);

  --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --fast:160ms; --radius:.9rem; --tap:2.9rem;
}
/* Dark is the default for everyone — the celestial direction is the product,
   not a preference. The light palette stays reachable via data-theme="light"
   so a toggle is a one-line follow-up rather than a rebuild. */
:root[data-theme="light"] {
  --bg:#F6F4FF; --bg-2:#FFFFFF; --line:#E4DEF8;
  --ink:#16122A; --muted:#57507A;
  --violet:#6D28D9; --cyan:#0E7490; --on-accent:#FFFFFF;
  --ok:#047857; --bad:#BE123C;
  --ok-bg:rgba(4,120,87,.10); --bad-bg:rgba(190,18,60,.08);
  --bar:rgba(246,244,255,.8);
  --glow:rgba(109,40,217,.28);
  --star:transparent;
  --aurora-1:rgba(139,92,246,.12);
  --aurora-2:rgba(14,116,144,.07);
  --shimmer:rgba(109,40,217,.10);
  --tint:rgba(109,40,217,.06);
}

* { box-sizing:border-box; }
html { scroll-padding-top:5rem; }  /* sticky bar must never cover focus */
body { margin:0; font:16px/1.65 var(--sans); background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; }

/* Starfield sits still; the aurora behind it drifts. */
body::before, body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; }
body::before {
  background:
    radial-gradient(1.4px 1.4px at 12% 18%, var(--star), transparent 50%),
    radial-gradient(1.2px 1.2px at 27% 62%, var(--star), transparent 50%),
    radial-gradient(1.6px 1.6px at 43% 11%, var(--star), transparent 50%),
    radial-gradient(1.1px 1.1px at 58% 78%, var(--star), transparent 50%),
    radial-gradient(1.5px 1.5px at 71% 34%, var(--star), transparent 50%),
    radial-gradient(1.2px 1.2px at 84% 66%, var(--star), transparent 50%),
    radial-gradient(1.3px 1.3px at 93% 22%, var(--star), transparent 50%),
    radial-gradient(1.1px 1.1px at 6% 88%, var(--star), transparent 50%);
  opacity:.7;
}
body::after {
  background:
    radial-gradient(55rem 38rem at 72% -12%, var(--aurora-1), transparent 70%),
    radial-gradient(45rem 32rem at 8% 4%, var(--aurora-2), transparent 70%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift { from { transform:translate3d(0,0,0) } to { transform:translate3d(-3%,2%,0) } }
@keyframes rise  { from { opacity:0; transform:translateY(14px) scale(.985) } to { opacity:1; transform:none } }
@keyframes sweep { from { background-position:200% 0 } to { background-position:-100% 0 } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration:.01ms !important; animation:none !important;
  }
}

:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:.35rem; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:absolute; left:-9999px; }
.skip:focus { position:fixed; left:.75rem; top:.75rem; z-index:20; padding:.6rem .9rem;
  font-family:var(--sans); font-weight:600; background:var(--bg-2); color:var(--ink);
  border:1px solid var(--violet); border-radius:.6rem; }

/* ---------- chrome ---------- */
.topbar { position:sticky; top:0; z-index:10; display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:center; gap:.5rem 1rem;
  padding:.7rem 1rem; background:var(--bar); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); }
.brand { font-family:var(--display); font-size:1.2rem; font-weight:700;
  letter-spacing:-.03em; color:var(--ink); text-decoration:none; }
.topbar nav { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .4rem;
  font-size:.9rem; }
.topbar nav a { display:inline-flex; align-items:center; min-height:2.4rem;
  padding:.4rem .65rem; border-radius:.55rem; color:var(--muted); font-weight:500;
  text-decoration:none; transition:color var(--fast), background var(--fast); }
.topbar nav a:hover { color:var(--ink); background:var(--tint); }
.topbar form { margin:0; }
.credits { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .7rem;
  font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--ink); background:var(--tint); border:1px solid var(--line);
  border-radius:999px; }
.credits::before { content:"✦"; color:var(--violet); }

main { max-width:62rem; margin:0 auto; padding:1.75rem 1rem 3rem; }
/* Pages that need the room ask for it; the reading pages stay narrow. */
main.wide { max-width:78rem; }
.disclaimer { max-width:62rem; margin:0 auto; padding:1.5rem 1rem 2.5rem;
  color:var(--muted); font-size:.8rem; border-top:1px solid var(--line); }

h1, h2, h3 { font-family:var(--display); letter-spacing:-.03em; line-height:1.15; }
h1 { font-size:clamp(1.9rem, 1.4rem + 2.4vw, 2.6rem); font-weight:700; }
h2 { font-size:1.4rem; font-weight:700; }

.grad { color:var(--violet); }
@supports (background-clip:text) or (-webkit-background-clip:text) {
  .grad { background-image:linear-gradient(110deg, var(--violet), var(--cyan));
    -webkit-background-clip:text; background-clip:text; color:transparent; }
}

/* ---------- buttons ---------- */
.cta, main form button[type=submit] {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:var(--tap); padding:.7rem 1.4rem;
  font-family:var(--sans); font-size:.95rem; font-weight:700; letter-spacing:-.01em;
  line-height:1.2; color:var(--on-accent); border:0; border-radius:999px;
  background-image:linear-gradient(110deg, var(--violet), var(--cyan));
  box-shadow:0 10px 30px -12px var(--glow); text-decoration:none; cursor:pointer;
  transition:transform var(--fast), box-shadow var(--fast), filter var(--fast);
}
.cta:hover, main form button[type=submit]:hover {
  transform:translateY(-1px); filter:brightness(1.07);
  box-shadow:0 14px 34px -12px var(--glow); }
.cta:active, main form button[type=submit]:active { transform:translateY(1px); }
.cta[disabled], main form button[disabled] {
  opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; filter:none; }
main form:not(.ask) button[type=submit] { align-self:flex-start; }

.btn-ghost { display:inline-flex; align-items:center; min-height:2.4rem;
  padding:.4rem .7rem; font:inherit; font-size:.9rem; font-weight:500;
  color:var(--muted); background:none; border:1px solid transparent;
  border-radius:.55rem; cursor:pointer;
  transition:color var(--fast), background var(--fast), border-color var(--fast); }
.btn-ghost:hover { color:var(--ink); background:var(--tint); border-color:var(--line); }

main a { color:var(--violet); text-underline-offset:3px; }
.link { display:inline-flex; align-items:center; gap:.3rem; font-size:.9rem;
  font-weight:600; color:var(--violet); text-decoration:none;
  transition:gap var(--fast), color var(--fast); }
.link:hover { gap:.55rem; color:var(--cyan); }

/* ---------- messages ---------- */
.messages { list-style:none; margin:0 0 1.5rem; padding:0; display:flex;
  flex-direction:column; gap:.5rem; }
.messages li { font-size:.92rem; font-weight:500; padding:.8rem 1rem;
  background:var(--bg-2); border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:.7rem; animation:rise .4s ease backwards; }
.messages .success { border-left-color:var(--ok); background:var(--ok-bg); }
.messages .error { border-left-color:var(--bad); background:var(--bad-bg); }

/* ---------- marketing ---------- */
.hero { max-width:36rem; padding:2.5rem 0 3rem; }
.hero h1 { font-size:clamp(2.6rem, 1.6rem + 5vw, 4.4rem); font-weight:700;
  line-height:1.02; letter-spacing:-.045em; margin:0 0 .5em;
  animation:rise .55s cubic-bezier(.2,.7,.3,1) backwards; }
.hero p { font-size:1.1rem; color:var(--muted); margin:0; max-width:32rem;
  animation:rise .55s cubic-bezier(.2,.7,.3,1) .08s backwards; }
.hero .cta { margin-top:2rem; font-size:1rem; padding:.85rem 1.7rem;
  animation:rise .55s cubic-bezier(.2,.7,.3,1) .16s backwards; }

/* ---------- layout helpers ---------- */
.row-between { display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:center; gap:.75rem 1rem; margin-bottom:1.5rem; }
.row-between h1 { margin:0; }
.muted { color:var(--muted); font-size:.92rem; font-weight:400; }
.empty { padding:3rem 1.5rem; text-align:center; background:var(--bg-2);
  border:1px dashed var(--line); border-radius:1.2rem; }
.empty .cta { margin-top:1.25rem; }

/* ---------- forms ---------- */
/* Element selectors, not `.stack` — allauth ships its own unclassed markup and
   has to pick these up too. */
main form { display:flex; flex-direction:column; gap:1.15rem; max-width:34rem; }
main form label { display:flex; flex-direction:column; gap:.4rem;
  font-size:.85rem; font-weight:700; letter-spacing:.01em; }
main form label:has(input[type=checkbox]) { flex-direction:row; align-items:center;
  gap:.6rem; font-weight:500; }
main form label .muted { font-weight:400; }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=url], input[type=tel], input[type=number], input[type=date],
input[type=time], select, textarea {
  width:100%; padding:.7rem .85rem; font:inherit; font-size:1rem; line-height:1.4;
  color:var(--ink); background:var(--bg-2); border:1px solid var(--line);
  border-radius:.7rem; transition:border-color var(--fast), box-shadow var(--fast); }
input:hover:not([readonly]), select:hover, textarea:hover { border-color:var(--muted); }
input:focus, select:focus, textarea:focus {
  border-color:var(--violet); box-shadow:0 0 0 3px var(--tint); }
input[readonly] { color:var(--muted); background:transparent; }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color:var(--bad); }
::placeholder { color:var(--muted); opacity:.75; }
input[type=checkbox] { width:1.15rem; height:1.15rem; accent-color:var(--violet); }

fieldset { border:1px solid var(--line); border-radius:1rem; padding:1.25rem; margin:0;
  background:var(--tint); }
legend { font-family:var(--display); font-size:.9rem; font-weight:700; padding:0 .5rem; }

.errorlist, .field-error { list-style:none; margin:0; padding:0;
  font-size:.85rem; font-weight:600; color:var(--bad); }
.form-error { padding:.9rem 1rem; font-size:.92rem; font-weight:500; color:var(--ink);
  background:var(--bad-bg); border:1px solid var(--bad); border-radius:.8rem; }
.form-error p { margin:0 0 .35rem; font-family:var(--display); font-weight:700;
  color:var(--bad); }
.form-error .errorlist { color:inherit; font-weight:400; }

/* Resolved lat/lon/tz are confirmation only — the "Selected:" line states them.
   Kept in the DOM so they post with the form. */
.resolved { display:none; }

/* ---------- city picker ---------- */
.results { list-style:none; padding:0; margin:.6rem 0 0; display:flex;
  flex-direction:column; gap:.4rem; }
.results button { display:block; width:100%; min-height:var(--tap); text-align:left;
  padding:.6rem .8rem; font:inherit; font-size:.95rem; font-weight:500; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line); border-radius:.7rem;
  cursor:pointer; transition:border-color var(--fast), background var(--fast),
  transform var(--fast); }
.results button:hover { border-color:var(--violet); background:var(--tint);
  transform:translateX(2px); }
.results button .muted { display:block; font-size:.8rem; }

/* ---------- profile cards ---------- */
.cards { list-style:none; padding:0; margin:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); }
.card { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  padding:1.25rem; background:var(--bg-2); border:1px solid var(--line);
  border-radius:1.1rem; animation:rise .45s cubic-bezier(.2,.7,.3,1) backwards;
  transition:border-color var(--fast), transform var(--fast), box-shadow var(--fast); }
.card:hover { border-color:var(--violet); transform:translateY(-3px);
  box-shadow:0 16px 40px -24px var(--glow); }
.cards .card:nth-child(1){animation-delay:.04s} .cards .card:nth-child(2){animation-delay:.09s}
.cards .card:nth-child(3){animation-delay:.14s} .cards .card:nth-child(4){animation-delay:.19s}
.cards .card:nth-child(5){animation-delay:.24s} .cards .card:nth-child(6){animation-delay:.29s}
.card h3 { margin:0; font-size:1.15rem; }
.card h3 a { color:var(--ink); text-decoration:none; }
.card h3 a:hover { color:var(--violet); }
.card .muted { margin:0; font-size:.85rem; }
.card .link { margin-top:auto; padding-top:.5rem; }

.badges { display:flex; flex-wrap:wrap; gap:.4rem; }
.badge { display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .7rem;
  font-size:.78rem; font-weight:700; letter-spacing:.01em; border-radius:999px;
  border:1px solid transparent; }
.badge::before { content:""; width:.45rem; height:.45rem; border-radius:50%;
  background:currentColor; }
.badge.ok  { color:var(--ok);  background:var(--ok-bg);  border-color:var(--ok-bg); }
.badge.bad { color:var(--bad); background:var(--bad-bg); border-color:var(--bad-bg); }

/* ---------- chart + reports ---------- */
.downloads { margin:2rem 0; padding:1.4rem; background:var(--bg-2);
  border:1px solid var(--line); border-radius:1.1rem; }
.downloads h2 { margin:0 0 1rem; font-size:1.1rem; }
.downloads .actions { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.chart { margin:0; padding:1.25rem; background:var(--bg-2);
  border:1px solid var(--line); border-radius:1.1rem; overflow-x:auto; tab-size:2;
  font:.82rem/1.7 var(--mono); color:var(--ink); }

/* ---------- calibration ---------- */
.calibrate-intro { max-width:40rem; margin:0 0 2rem; }
main form.calibrate { max-width:42rem; gap:1.5rem; }
.question { background:var(--bg-2); }
.question legend { font-family:var(--mono); font-size:.78rem; font-weight:400;
  letter-spacing:.02em; color:var(--violet); background:var(--bg);
  border:1px solid var(--line); border-radius:999px; padding:.25rem .7rem; }
.ask-line { margin:.25rem 0 1rem; font-family:var(--display); font-size:1.05rem;
  font-weight:700; letter-spacing:-.02em; }
.choices { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:.5rem; }
/* Whole row is the target — a bare radio is a 13px hit area. */
.choices label { flex-direction:row; align-items:flex-start; gap:.7rem;
  min-height:var(--tap); padding:.7rem .85rem; font-size:.95rem; font-weight:400;
  background:var(--bg); border:1px solid var(--line); border-radius:.7rem;
  cursor:pointer; transition:border-color var(--fast), background var(--fast); }
.choices label:hover { border-color:var(--violet); background:var(--tint); }
.choices input[type=radio] { margin-top:.15rem; width:1.1rem; height:1.1rem;
  accent-color:var(--violet); flex:none; }
.choices label:has(input:checked) { border-color:var(--violet); background:var(--tint); }
.choices label:has(input:focus-visible) { outline:2px solid var(--cyan);
  outline-offset:3px; }

.preparing { display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:3rem 1.5rem; text-align:center; background:var(--bg-2);
  border:1px dashed var(--line); border-radius:1.2rem; }
.preparing p { margin:0; }
.spinner { width:2rem; height:2rem; border-radius:50%; margin-bottom:.5rem;
  border:2px solid var(--line); border-top-color:var(--violet);
  animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg) } }
/* Reduced motion still needs a visible "working" signal, just not a spin. */
@media (prefers-reduced-motion: reduce) {
  .spinner { border-top-color:var(--violet); opacity:.6; }
}

.calibration .cal-score { margin:0 0 .6rem; font-family:var(--display);
  font-size:1.6rem; font-weight:700; letter-spacing:-.03em; }
.calibration .cal-score .muted { display:block; font-family:var(--sans);
  font-size:.85rem; font-weight:400; letter-spacing:0; margin-top:.2rem; }
.calibration p { margin:.35rem 0; }
.calibration .actions { margin-top:1rem; }

/* ---------- chat ---------- */
.thread { display:flex; flex-direction:column; gap:.85rem; min-height:14rem;
  max-height:60vh; overflow-y:auto; padding:1rem 0; }
.msg { display:flex; animation:rise .35s ease backwards; }
.msg.user { justify-content:flex-end; }
.bubble { position:relative; max-width:46ch; padding:.8rem 1.05rem;
  background:var(--bg-2); border:1px solid var(--line); border-radius:1.1rem;
  white-space:pre-wrap; }
.msg.assistant .bubble { border-bottom-left-radius:.35rem; }
.msg.user .bubble { color:var(--on-accent); border:0; border-bottom-right-radius:.35rem;
  background-image:linear-gradient(110deg, var(--violet), var(--cyan)); }

/* While a reply streams, sweep the bubble so the wait reads as work. */
.thread[aria-busy="true"] .msg.assistant:last-child .bubble { overflow:hidden; }
.thread[aria-busy="true"] .msg.assistant:last-child .bubble::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, var(--shimmer) 50%, transparent 70%);
  background-size:200% 100%; animation:sweep 1.5s linear infinite; }

main form.ask { flex-direction:row; align-items:flex-end; gap:.6rem; max-width:none; }
.ask textarea { flex:1; border-radius:1rem; }
.ask button { flex:none; }
#meter { margin:.85rem 0 0; font-size:.85rem; }

@media (min-width: 40rem) {
  .topbar { padding:.9rem 1.75rem; }
  main { padding:2.5rem 1.75rem 4rem; }
  .disclaimer { padding:1.75rem; }
}

/* ---------- transit player ----------
   The wheel is one SVG scaled by its viewBox, so nothing here is sized in
   pixels that a phone would have to fight. Every colour the player paints at
   runtime is read back out of these tokens by transits.js — there is no hex
   in the JavaScript. */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.card-links { display:flex; flex-wrap:wrap; gap:.25rem 1.1rem; }

.crumb { margin:0 0 1rem; font-size:.85rem; }
.crumb a { color:var(--muted); text-decoration:none; }
.crumb a:hover { color:var(--ink); }
.sky-title { align-items:flex-start; gap:1rem; margin-bottom:.5rem; }
.sky-title h1 { margin:0 0 .35rem; }
.sky-title p { margin:0; }
.sky-card p { margin:0 0 1rem; max-width:44rem; }

.transits { margin:1.5rem 0 2.5rem; padding:1.4rem; background:var(--bg-2);
  border:1px solid var(--line); border-radius:1.1rem; }
.transits-head { align-items:flex-start; gap:1.5rem; margin-bottom:1.25rem; }
.transits-head h2 { margin:0; font-size:1.1rem; }
/* The month picker holds its corner; the note takes whatever is left and
   drops below it once there is no longer room for both. */
.transits-intro { flex:1 1 26rem; max-width:46rem; margin:0; font-size:.9rem; }

.month-nav { display:flex; align-items:center; gap:.4rem; }
.month-nav input[type=month] { min-height:2.4rem; padding:.35rem .6rem;
  font:.9rem var(--sans); color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:.6rem; }
.month-nav .btn-ghost { min-width:2.4rem; justify-content:center; font-size:1.1rem; }

.transit-status { padding:1.5rem 0; font-size:.9rem; color:var(--muted); }
.transit-status[hidden] { display:none; }

.transit-stage { display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width: 60rem) {
  .transit-stage { grid-template-columns:minmax(0,1fr) minmax(21rem,26rem); align-items:start; }
}

/* -- wheel -- */
.transit-wheel svg { display:block; width:100%; max-width:34rem; height:auto;
  margin:0 auto; }
/* The wheel is the whole point of its own page, so give it the extra room. */
main.wide .transit-wheel svg { max-width:40rem; }
/* Astrological glyphs must come from a symbol font, never the colour emoji
   font — U+263E in particular is served as a blue emoji moon otherwise, and a
   variation selector alone does not stop it. */
.planet-glyph, .natal-glyph, .tl-ev-glyph, .ev-glyph, .sector-house {
  font-variant-emoji:text;
  font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2",
    "Noto Sans Symbols",var(--sans); }
.wheel-face { fill:var(--bg); stroke:var(--line); }
.wheel-hub { fill:var(--bg-2); stroke:var(--line); }
.impact-arc { stroke:var(--bg-2); stroke-width:1.5; }
.spokes line { stroke-opacity:.55; }

.sector text { fill:var(--muted); text-anchor:middle; font-family:var(--sans); }
.sector-house { fill:var(--ink); font-size:15px; font-weight:700;
  font-family:var(--display); }
.sector-area { font-size:11px; letter-spacing:.02em; }
.sector-sav { font-size:9.5px; fill:var(--muted); opacity:.75; }
.sector { cursor:pointer; }
.sector:hover text, .sector.is-open text { fill:var(--cyan); }
.sector.is-open .sector-house { fill:var(--cyan); }

.natal-dot { fill:var(--bg-2); stroke:var(--line); }
.natal-glyph { fill:var(--muted); font-size:11px; text-anchor:middle; }
.lagna-mark { stroke:var(--violet); stroke-width:1.5; stroke-dasharray:3 4;
  stroke-opacity:.7; }

.planet-stem { stroke:var(--line); stroke-width:1; }
.planet-disc { fill:var(--bg-2); stroke:var(--violet); stroke-width:1.5; }
.planet-glyph { fill:var(--ink); font-size:15px; text-anchor:middle; }
.planet-retro { fill:var(--bad); font-size:9px; font-weight:700; }

.moon-dark { fill:var(--line); }
.moon-lit  { fill:var(--ink); }
.hub text { text-anchor:middle; font-family:var(--sans); }
.hub-tithi { fill:var(--ink); font-size:14px; font-weight:700; }
.hub-paksha { fill:var(--muted); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; }
.hub-time { fill:var(--muted); font-size:11px; font-family:var(--mono); }

.wheel-legend { display:flex; gap:1.1rem; justify-content:center;
  margin-top:.4rem; font-size:.78rem; color:var(--muted); }
.wheel-legend .dot { display:inline-block; width:.6rem; height:.6rem;
  margin-right:.35rem; border-radius:50%; vertical-align:baseline; }
.dot-transit { background:var(--bg-2); border:1.5px solid var(--violet); }
.dot-natal { background:var(--bg-2); border:1.5px solid var(--line); }

/* -- house panel -- */
.house-readout { margin-bottom:.9rem; font-size:.88rem; }
.house-readout p { margin:0 0 .4rem; }
.ro-dasha strong { color:var(--violet); }
.ro-panoti { padding:.6rem .75rem; border-radius:.6rem; color:var(--ink);
  background:var(--bad-bg); border:1px solid var(--bad-bg); font-size:.83rem; }

.house-list { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:.2rem; }
.house-item.is-missed { opacity:.55; }
.house-row { display:grid; grid-template-columns:1.3rem 1fr 4.6rem 3.8rem;
  align-items:center; gap:.5rem; width:100%; min-height:2.2rem;
  padding:.3rem .45rem; text-align:left; font:inherit; font-size:.83rem;
  color:var(--ink); background:none; border:1px solid transparent;
  border-radius:.5rem; cursor:pointer; transition:background var(--fast); }
.house-row:hover { background:var(--tint); }
.house-item.is-open .house-row { background:var(--tint); border-color:var(--line); }
.h-num { font-family:var(--mono); font-size:.78rem; color:var(--muted); }
.h-area { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.h-meter { position:relative; height:.45rem; background:var(--line);
  border-radius:999px; }
/* The centre line is zero: fills run left for a challenged house and right for
   a supported one, so the column reads as a spread rather than a ranking. */
.h-meter::before { content:""; position:absolute; left:50%; top:-2px; bottom:-2px;
  width:1px; background:var(--bg-2); }
.h-meter i { position:absolute; top:0; bottom:0; border-radius:999px; }
.h-verdict { font-size:.72rem; letter-spacing:.02em; text-align:right;
  color:var(--muted); }
.house-item[data-verdict="positive"] .h-verdict { color:var(--ok); }
.house-item[data-verdict="negative"] .h-verdict { color:var(--bad); }

.house-why { padding:.35rem .55rem .7rem 2.4rem; font-size:.8rem; }
.house-why ul { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:.3rem; }
.house-why li { color:var(--muted); }
.house-why strong { color:var(--ink); font-weight:500; }
.c-mark { display:inline-block; width:1rem; font-weight:700; }
.c-pos .c-mark { color:var(--ok); }
.c-neg .c-mark { color:var(--bad); }
.house-foot { margin:.9rem 0 0; font-size:.78rem; }

/* -- timeline -- */
.transit-timeline { margin-top:1.5rem; }
.transit-timeline[hidden] { display:none; }
.timeline-band { display:block; width:100%; }
.tl-day { fill:var(--muted); font-size:9.5px; text-anchor:middle;
  font-family:var(--mono); }
.tl-ev-glyph { fill:var(--cyan); font-size:13px; text-anchor:middle; }
.tl-head { stroke-width:2; }

/* 12px inset matches the timeline SVG's own padding so the thumb tracks the
   playhead exactly at both ends. */
#transit-scrub { display:block; width:calc(100% - 24px); margin:.35rem 12px .9rem;
  accent-color:var(--cyan); height:1.4rem; }

.transport { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
.transport .cta { padding:.5rem 1.1rem; font-size:.85rem; }
.transport .speed { flex-direction:row; align-items:center; gap:.4rem;
  font-size:.8rem; color:var(--muted); }
.transport select { min-height:2.2rem; padding:.25rem .5rem; font:.82rem var(--sans);
  color:var(--ink); background:var(--bg); border:1px solid var(--line);
  border-radius:.5rem; }
.transport-date { margin-left:auto; font:.85rem var(--mono); color:var(--muted); }

.event-list { list-style:none; margin:1rem 0 0; padding:0; display:flex;
  flex-wrap:wrap; gap:.4rem; }
.event-chip { display:inline-flex; align-items:center; gap:.45rem;
  min-height:2rem; padding:.3rem .7rem; font:inherit; font-size:.78rem;
  color:var(--muted); background:var(--bg); border:1px solid var(--line);
  border-radius:999px; cursor:pointer; transition:border-color var(--fast),
  color var(--fast); }
.event-chip:hover { color:var(--ink); border-color:var(--violet); }
.ev-glyph { color:var(--violet); font-size:.95rem; }
.ev-when { font-family:var(--mono); color:var(--ink); }
.event-chip[data-kind="retrograde"] .ev-glyph,
.event-chip[data-kind="direct"] .ev-glyph { color:var(--cyan); }

/* -- the digest, kept but demoted -- */
.chart-digest { margin:2rem 0; }
.chart-digest summary { cursor:pointer; padding:.6rem 0; font-size:.9rem;
  color:var(--muted); }
.chart-digest summary:hover { color:var(--ink); }
.chart-digest .chart { margin-top:.75rem; }

/* ---------- day forecast ----------
   Weather-app shape: a strip of days, then one hero panel for whichever is
   selected. Tone (good / mixed / bad) drives colour through one variable so a
   card, a bar and a list bullet never disagree about what a day is. */
[data-tone="good"]  { --tone:var(--ok);     --tone-bg:var(--ok-bg); }
[data-tone="mixed"] { --tone:var(--violet); --tone-bg:var(--tint); }
[data-tone="bad"]   { --tone:var(--bad);    --tone-bg:var(--bad-bg); }

.fc-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:.6rem; list-style:none; margin:1.5rem 0; padding:0; }
.fc-day { display:flex; flex-direction:column; gap:.2rem; padding:.85rem .9rem;
  text-decoration:none; color:var(--ink); background:var(--bg-2);
  border:1px solid var(--line); border-radius:.9rem;
  transition:border-color var(--fast), background var(--fast); }
.fc-day:hover { border-color:var(--tone); background:var(--tone-bg); }
.fc-day.is-on { border-color:var(--tone); background:var(--tone-bg);
  box-shadow:0 0 0 1px var(--tone) inset; }
.fc-when { font-family:var(--display); font-size:.95rem; font-weight:700;
  letter-spacing:-.01em; }
.fc-date { font:.72rem var(--mono); color:var(--muted); }
.fc-score { font-family:var(--display); font-size:1.7rem; font-weight:700;
  line-height:1.1; color:var(--tone); }
.fc-bar { display:block; height:.3rem; background:var(--line); border-radius:999px; }
.fc-bar i { display:block; height:100%; background:var(--tone); border-radius:999px; }
.fc-verdict { font-size:.78rem; color:var(--tone); }
.fc-nak { font-size:.72rem; color:var(--muted); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

.fc-hero { padding:1.5rem; background:var(--bg-2); border:1px solid var(--line);
  border-radius:1.1rem; }
.fc-hero-head { display:flex; flex-wrap:wrap; align-items:flex-start; gap:1.25rem; }
.fc-hero-head h2 { margin:0 0 .3rem; font-size:1.15rem; }
.fc-hero-head p { margin:0 0 .3rem; }
.fc-hero-score { display:flex; align-items:baseline; gap:.15rem; padding:.5rem .9rem;
  background:var(--tone-bg); border:1px solid var(--tone); border-radius:.9rem; }
.fc-big { font-family:var(--display); font-size:2.6rem; font-weight:700;
  line-height:1; color:var(--tone); }
.fc-out-of { font-size:.78rem; color:var(--muted); }
.fc-almanac { font-size:.85rem; color:var(--muted); }

.fc-alert { margin:1.1rem 0 0; padding:.8rem .95rem; font-size:.87rem;
  background:var(--bad-bg); border:1px solid var(--bad-bg); border-radius:.7rem; }
.fc-alert strong { color:var(--bad); }

.fc-windows { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:.6rem; margin:1.25rem 0; }
.fc-window { padding:.65rem .8rem; background:var(--bg); border:1px solid var(--line);
  border-left-width:3px; border-radius:.6rem; }
.fc-window.good { border-left-color:var(--ok); }
.fc-window.bad  { border-left-color:var(--bad); }
.fc-w-label { display:block; font-size:.8rem; font-weight:500; }
.fc-w-time { display:block; font:.95rem var(--mono); color:var(--ink); }
.fc-w-note { display:block; font-size:.72rem; color:var(--muted); }

.fc-cols { display:grid; gap:1.5rem; grid-template-columns:1fr; margin-top:1.5rem; }
@media (min-width: 48rem) { .fc-cols { grid-template-columns:1fr 1fr; } }
.fc-h { margin:0 0 .7rem; font-size:.8rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); }
.fc-h.good { color:var(--ok); }
.fc-h.bad { color:var(--bad); }
.fc-sub { margin:.9rem 0 .4rem; font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; }
.fc-sub.good { color:var(--ok); }
.fc-sub.bad { color:var(--bad); }

.fc-list { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:.55rem; }
.fc-item { padding:.7rem .85rem; background:var(--bg); border:1px solid var(--line);
  border-left:3px solid var(--tone); border-radius:.6rem; }
.fc-item-head { display:flex; align-items:baseline; justify-content:space-between;
  gap:.6rem; }
.fc-item-label { font-weight:500; font-size:.92rem; }
.fc-item-score { font:.85rem var(--mono); color:var(--tone); }
.fc-item-blurb { margin:.1rem 0 .4rem; font-size:.78rem; color:var(--muted); }
.fc-why { list-style:none; margin:0; padding:0; font-size:.76rem; }
.fc-why li { padding-left:1rem; color:var(--muted); text-indent:-1rem; }
.fc-why li::before { display:inline-block; width:1rem; text-indent:0;
  font-weight:700; }
.fc-why li.pos::before { content:"+"; color:var(--ok); }
.fc-why li.neg::before { content:"\2212"; color:var(--bad); }

.fc-cautions { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:.5rem; font-size:.83rem; }
.fc-cautions li { padding-left:.8rem; border-left:2px solid var(--line); }
.fc-cautions li[data-sev="high"] { border-left-color:var(--bad); }
.fc-cautions li[data-sev="med"]  { border-left-color:var(--violet); }
.fc-cautions li strong { display:block; }
.fc-cautions li span { font-size:.78rem; }
.fc-personal { margin:1rem 0 0; font-size:.8rem; }
.fc-personal strong { color:var(--ink); font-weight:500; }

.fc-houses { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:.45rem; font-size:.83rem; }
.fc-houses strong { display:block; font-weight:500; }
.fc-houses span { font-size:.78rem; }
.fc-note { margin:1rem 0 0; font-size:.78rem; }

/* ---------- marketing, legal, billing ---------- */
.hero-note { margin-top:1rem; font-size:.85rem; color:var(--muted); }
.section-lede { max-width:44rem; margin:0 0 1.5rem; }

.proof { display:grid; gap:1rem; grid-template-columns:1fr; margin:3rem 0; }
@media (min-width: 48rem) { .proof { grid-template-columns:repeat(3,1fr); } }
.proof-item { padding:1.25rem; background:var(--bg-2); border:1px solid var(--line);
  border-radius:1.1rem; }
.proof-item p { margin:0; font-size:.88rem; color:var(--muted); }
.proof-num { display:block; margin-bottom:.4rem; font-family:var(--display);
  font-size:2rem; font-weight:700; letter-spacing:-.03em;
  background-image:linear-gradient(110deg,var(--violet),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

.feature-rows { display:flex; flex-direction:column; gap:3.5rem; margin:4rem 0; }
.feature-row { display:grid; gap:2rem; grid-template-columns:1fr; align-items:center; }
@media (min-width: 52rem) {
  .feature-row { grid-template-columns:1.15fr .85fr; }
  .feature-row.reverse > :first-child { order:2; }
}
.feature-row h2 { margin:0 0 .75rem; font-size:1.5rem; }
.feature-row p { margin:0 0 .75rem; }
.feature-art { display:grid; place-items:center; min-height:12rem; padding:1.5rem;
  background:var(--bg-2); border:1px solid var(--line); border-radius:1.1rem; }

/* Decorative only, and aria-hidden in the markup — these stand in for the real
   screens until there are screenshots to put here. */
.glyph-ring { position:relative; display:block; width:11rem; height:11rem;
  border:1px solid var(--line); border-radius:50%; }
.glyph-ring i { position:absolute; top:50%; left:50%; width:2rem; height:2rem;
  margin:-1rem; display:grid; place-items:center; font-style:normal;
  font-size:1.1rem; color:var(--violet);
  font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2",var(--sans); }
.glyph-ring i:nth-child(1) { transform:rotate(0deg)   translateY(-4.6rem) rotate(0deg); }
.glyph-ring i:nth-child(2) { transform:rotate(40deg)  translateY(-4.6rem) rotate(-40deg); }
.glyph-ring i:nth-child(3) { transform:rotate(80deg)  translateY(-4.6rem) rotate(-80deg); color:var(--cyan); }
.glyph-ring i:nth-child(4) { transform:rotate(120deg) translateY(-4.6rem) rotate(-120deg); }
.glyph-ring i:nth-child(5) { transform:rotate(160deg) translateY(-4.6rem) rotate(-160deg); }
.glyph-ring i:nth-child(6) { transform:rotate(200deg) translateY(-4.6rem) rotate(-200deg); color:var(--cyan); }
.glyph-ring i:nth-child(7) { transform:rotate(240deg) translateY(-4.6rem) rotate(-240deg); }
.glyph-ring i:nth-child(8) { transform:rotate(280deg) translateY(-4.6rem) rotate(-280deg); }
.glyph-ring i:nth-child(9) { transform:rotate(320deg) translateY(-4.6rem) rotate(-320deg); }

.mini-days { display:flex; gap:.4rem; }
.mini-days b { display:grid; place-items:center; width:2.6rem; height:3.4rem;
  font-family:var(--display); font-size:1.05rem; border-radius:.6rem;
  background:var(--bg); border:1px solid var(--line); color:var(--tone,var(--ok)); }
.mini-score { font-family:var(--display); font-size:3.5rem; font-weight:700;
  letter-spacing:-.04em; color:var(--ok); }
.mini-score small { font-size:1.25rem; color:var(--muted); }

.pricing { margin:4rem 0; }
.plan-grid { display:grid; gap:1rem; grid-template-columns:1fr; margin:1.5rem 0; }
@media (min-width: 48rem) { .plan-grid { grid-template-columns:repeat(3,1fr); } }
.plan-card { position:relative; padding:1.4rem; background:var(--bg-2);
  border:1px solid var(--line); border-radius:1.1rem; }
.plan-card.is-featured { border-color:var(--violet); }
.plan-flag { position:absolute; top:-.65rem; left:1.4rem; padding:.15rem .6rem;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--on-accent); border-radius:999px;
  background-image:linear-gradient(110deg,var(--violet),var(--cyan)); }
.plan-card h3 { margin:0 0 .3rem; font-size:1.05rem; }
.plan-price { margin:0 0 .9rem; font-family:var(--display); font-size:1.9rem;
  font-weight:700; letter-spacing:-.03em; }
.plan-price small { font-size:.8rem; font-weight:400; color:var(--muted); }
.plan-points { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:.35rem; font-size:.86rem; color:var(--muted); }

.city-strip { margin:3.5rem 0; }
.city-links { list-style:none; margin:1rem 0 0; padding:0; display:flex;
  flex-wrap:wrap; gap:.45rem; }
.city-links a { display:inline-block; padding:.35rem .75rem; font-size:.82rem;
  color:var(--muted); text-decoration:none; background:var(--bg-2);
  border:1px solid var(--line); border-radius:999px; }
.city-links a:hover { color:var(--ink); border-color:var(--violet); }
.city-grid { list-style:none; margin:1.5rem 0; padding:0; display:grid;
  gap:.5rem; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); }
.city-grid li { display:flex; justify-content:space-between; gap:.5rem;
  padding:.5rem .75rem; font-size:.85rem; background:var(--bg-2);
  border:1px solid var(--line); border-radius:.6rem; }
.city-grid span { font-size:.72rem; }

.closer { margin:4rem 0 1rem; padding:2rem; text-align:center;
  background:var(--bg-2); border:1px solid var(--line); border-radius:1.1rem; }
.closer h2 { margin:0 0 .5rem; }
.closer p { max-width:38rem; margin:0 auto 1.25rem; }

.panchang-day.is-today { border-color:var(--violet); }
.pan-grid { display:grid; gap:.7rem 1.5rem; margin:0;
  grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); }
.pan-grid dt { font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); }
.pan-grid dd { margin:.1rem 0 0; font-size:.95rem; }
.ok-text { color:var(--ok); } .bad-text { color:var(--bad); }

/* -- legal + FAQ -- */
.legal { max-width:44rem; }
.legal h2 { margin:2.25rem 0 .75rem; font-size:1.2rem; }
.legal p { margin:0 0 .9rem; }
.legal-flag { padding:.9rem 1rem; font-size:.9rem; background:var(--tint);
  border:1px solid var(--violet); border-radius:.7rem; }
.legal-dl { margin:0; }
.legal-dl > div { padding:.9rem 0; border-bottom:1px solid var(--line); }
.legal-dl dt { font-weight:500; }
.legal-dl dd { margin:.25rem 0 0; font-size:.92rem; color:var(--muted); }
.legal-list { margin:0 0 .9rem; padding-left:1.2rem; font-size:.92rem;
  color:var(--muted); }
.faq details { padding:.9rem 0; border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; font-family:var(--display); font-size:1.02rem;
  font-weight:700; letter-spacing:-.02em; }
.faq details[open] summary { margin-bottom:.6rem; color:var(--violet); }
.faq details p { font-size:.92rem; }

/* -- billing -- */
a.credits { text-decoration:none; }
.bal-row { display:grid; gap:1rem; grid-template-columns:1fr; margin:1.5rem 0; }
@media (min-width: 44rem) { .bal-row { grid-template-columns:auto 1fr; } }
.bal-card { display:grid; place-content:center; padding:1.75rem 2.5rem;
  text-align:center; background:var(--bg-2); border:1px solid var(--violet);
  border-radius:1.1rem; }
.bal-num { display:block; font-family:var(--display); font-size:3.2rem;
  font-weight:700; line-height:1; letter-spacing:-.04em;
  background-image:linear-gradient(110deg,var(--violet),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.bal-label { font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); }
.bal-facts { padding:1.25rem 1.4rem; background:var(--bg-2);
  border:1px solid var(--line); border-radius:1.1rem; }
.bal-facts h2 { margin:0 0 .7rem; font-size:1rem; }
.bal-list { list-style:none; margin:0 0 .8rem; padding:0; font-size:.88rem; }
.bal-list li { display:flex; justify-content:space-between; gap:1rem;
  padding:.3rem 0; border-bottom:1px solid var(--line); }
.bal-list b { font-weight:500; color:var(--violet); white-space:nowrap; }

.bundle-grid { display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  margin-bottom:1rem; }
.bundle { display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:1rem; background:var(--bg); border:1px solid var(--line);
  border-radius:.8rem; max-width:none; }
.bundle-credits { font-family:var(--display); font-size:1.6rem; font-weight:700; }
.bundle-price { font-size:.85rem; color:var(--muted); }
.bundle .cta { margin-top:.4rem; padding:.4rem 1.1rem; font-size:.82rem; }

.credit-cols { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width: 48rem) { .credit-cols { grid-template-columns:1fr 1fr; } }
.credit-cols .downloads { margin:2rem 0 0; }
.redeem-form { display:flex; flex-direction:row; gap:.5rem; max-width:none;
  align-items:stretch; }
.redeem-form input { flex:1; min-height:2.6rem; padding:.4rem .75rem;
  font:.95rem var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:var(--bg); border:1px solid var(--line);
  border-radius:.6rem; }
.redeem-form .cta { flex:none; padding:.4rem 1.1rem; font-size:.85rem; }
.referral-code { margin:.5rem 0; font:1.5rem var(--mono); letter-spacing:.14em;
  color:var(--cyan); }
.referral-url { width:100%; padding:.45rem .7rem; font:.78rem var(--mono);
  color:var(--muted); background:var(--bg); border:1px solid var(--line);
  border-radius:.6rem; }

.ledger { width:100%; border-collapse:collapse; font-size:.85rem; }
.ledger th { padding:.5rem .6rem; font-size:.72rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); text-align:left;
  border-bottom:1px solid var(--line); }
.ledger td { padding:.5rem .6rem; border-bottom:1px solid var(--line);
  vertical-align:top; }
.ledger .num { text-align:right; font-family:var(--mono); white-space:nowrap; }
.ledger .pos { color:var(--ok); }
.ledger .neg { color:var(--muted); }

/* -- footer -- */
.foot-links { display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; margin:1rem 0 .6rem; }
.foot-links a { color:var(--muted); text-decoration:none; font-size:.82rem; }
.foot-links a:hover { color:var(--ink); text-decoration:underline; }
.foot-fine { margin:0; font-size:.75rem; opacity:.85; }
.foot-fine a { color:var(--muted); }

/* ---------- blog ---------- */
.topic-nav { margin:1.25rem 0 2rem; }
.topic-nav a[aria-current] { color:var(--on-accent); border-color:transparent;
  background-image:linear-gradient(110deg,var(--violet),var(--cyan)); }
.post-list { list-style:none; margin:0; padding:0; display:grid; gap:1rem;
  grid-template-columns:1fr; }
@media (min-width: 46rem) { .post-list { grid-template-columns:1fr 1fr; } }
.post-card a { display:block; height:100%; padding:1.25rem; text-decoration:none;
  color:var(--ink); background:var(--bg-2); border:1px solid var(--line);
  border-radius:1.1rem; transition:border-color var(--fast), background var(--fast); }
.post-card a:hover { border-color:var(--violet); background:var(--tint); }
.post-card h2 { margin:0 0 .4rem; font-size:1.1rem; }
.post-meta { margin:0 0 .5rem; font-size:.76rem; color:var(--muted); }
.post-topic { display:inline-block; margin-right:.5rem; padding:.1rem .5rem;
  font-size:.7rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--violet); background:var(--tint); border-radius:999px;
  text-decoration:none; }
.post-summary { margin:0; font-size:.88rem; color:var(--muted); }

.post { max-width:44rem; }
.post header { margin-bottom:2rem; }
.post h1 { margin:0 0 .6rem; }
.post-lede { margin:1rem 0 0; font-size:1.05rem; color:var(--muted); }
.post-body { font-size:1.02rem; line-height:1.75; }
.post-body h2 { margin:2.25rem 0 .7rem; font-size:1.3rem; }
.post-body h3 { margin:1.75rem 0 .5rem; font-size:1.1rem; }
.post-body h4 { margin:1.5rem 0 .5rem; font-size:1rem; }
.post-body p { margin:0 0 1.1rem; }
.post-body ul { margin:0 0 1.1rem; padding-left:1.3rem; }
.post-body li { margin-bottom:.4rem; }
.post-body blockquote { margin:1.25rem 0; padding:.75rem 1.1rem;
  border-left:3px solid var(--violet); background:var(--bg-2);
  border-radius:0 .6rem .6rem 0; color:var(--muted); }
.post-body code { padding:.1rem .35rem; font:.88em var(--mono);
  background:var(--bg-2); border:1px solid var(--line); border-radius:.3rem; }

/* ---------- brand lockup ---------- */
.brand { display:inline-flex; align-items:center; gap:.55rem; }
.brand-mark { width:1.5rem; height:1.5rem; flex:none; display:block; }
/* The wordmark is set in the display face here and outlined in logo.svg, so
   the header and any exported logo stay the same shape. */
.brand span { font-family:var(--display); font-weight:700; letter-spacing:-.03em; }
@media (max-width: 26rem) { .brand span { display:none; } }

/* ---------- the name ---------- */
/* Devanagari sits on a different vertical rhythm to the Latin faces, so it
   needs its own size and a nudge to sit on the same optical line. */
.deva { font-family:"Noto Sans Devanagari","Nirmala UI",serif; font-weight:500;
  font-size:1.12em; line-height:1; }
.hero-kicker { margin:0 0 1rem; font-size:.85rem; letter-spacing:.02em;
  color:var(--muted); }
.hero-kicker .deva { color:var(--violet); margin-right:.25rem; }
.hero-kicker em { font-style:normal; color:var(--ink); }
.foot-name { margin:0 0 .5rem; font-size:.8rem; color:var(--muted); }
.foot-name .deva { color:var(--violet); margin-right:.3rem; }
.foot-name em { font-style:normal; color:var(--ink); }

/* ---------- calibration probes ---------- */
.probe { background:var(--bg-2); }
.probe .ask-line { margin:.35rem 0 1rem; }
.verdicts { display:grid; gap:.5rem; grid-template-columns:1fr; }
@media (min-width: 34rem) { .verdicts { grid-template-columns:repeat(3,1fr); } }
/* The whole row is the target — a bare radio is a 13px hit area. */
.verdict { flex-direction:row; align-items:center; gap:.6rem; min-height:var(--tap);
  padding:.7rem .85rem; font-size:.92rem; font-weight:400; background:var(--bg);
  border:1px solid var(--line); border-radius:.7rem; cursor:pointer;
  transition:border-color var(--fast), background var(--fast); }
.verdict input[type=radio] { width:1.05rem; height:1.05rem; flex:none;
  accent-color:var(--violet); }
.verdict:hover { border-color:var(--violet); background:var(--tint); }
.verdict:has(input:focus-visible) { outline:2px solid var(--cyan); outline-offset:3px; }
.verdict[data-v="yes"]:has(input:checked) { border-color:var(--ok); background:var(--ok-bg); }
.verdict[data-v="no"]:has(input:checked) { border-color:var(--bad); background:var(--bad-bg); }
.verdict[data-v="unsure"]:has(input:checked) { border-color:var(--violet); background:var(--tint); }
.calibrate-foot { max-width:38rem; font-size:.85rem; }