/* Akashic Vedic birth chart — the birth chart's midnight sky, calmer and static (VEDIC-SPEC.md, Visual direction). */
@font-face { font-family: "Instrument Sans"; src: url("/carta-astral/assets/fonts/instrument-sans-variable.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; }

:root {
  --sky-950: #040716; --sky-900: #0b1330; --sky-800: #10244a;
  --blue-400: #7fb0e6; --violet-400: #9a7cc1; --mist-300: #b9c8eb; --star-100: #eef5ff;
  --warm: #f5e5c8; --gold: #e2c896; --danger: #f0a3a3;
  --panel: rgba(7, 11, 30, .66); --line: rgba(238, 245, 255, .14);
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pad: clamp(1rem, 5vw, 5rem);
  --ease: cubic-bezier(.2, .7, .15, 1);
  color-scheme: dark;
}

/* Hindi page: Instrument Sans has no Devanagari, so name the system Devanagari faces first for those glyphs. */
:root:lang(hi) {
  --sans: "Instrument Sans", "Noto Sans Devanagari", "Kohinoor Devanagari", "Mangal", ui-sans-serif, sans-serif;
  --display: "Noto Serif Devanagari", "Kohinoor Devanagari", "Iowan Old Style", Georgia, serif;
}
:lang(hi) body { line-height: 1.75; }
:lang(hi) .display { line-height: 1.2; letter-spacing: 0; }
:lang(hi) .kicker, :lang(hi) .sig__eyebrow { letter-spacing: .06em; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--sky-950); color: var(--star-100); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; background: var(--sky-950); overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .6rem 1rem; border-radius: 999px; background: var(--warm); color: var(--sky-950); font-weight: 600; text-decoration: none; }
.skip:focus { top: 1rem; }
.muted { color: var(--mist-300); opacity: .85; font-weight: 400; }

/* Sky: the project's procedural sky with a restrained blue/violet glow, no animation. */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 55% at 78% 18%, rgba(127, 176, 230, .16), transparent 70%),
    radial-gradient(60% 50% at 15% 85%, rgba(154, 124, 193, .13), transparent 70%),
    linear-gradient(180deg, rgba(4, 7, 22, .35), rgba(4, 7, 22, .82) 70%),
    url("/carta-astral/assets/sky.jpg") center / cover no-repeat, var(--sky-950); }

/* Header */
.top { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem var(--pad) 0; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); font-size: 1.05rem; text-decoration: none; white-space: nowrap; }
.brand__mark { width: 1.75rem; height: 1.75rem; flex: none; filter: drop-shadow(0 0 10px rgba(226, 200, 150, .25)); }
.top__actions { display: flex; gap: .5rem; }
.pill { font: 500 .8rem/1 var(--sans); letter-spacing: .02em; text-decoration: none; white-space: nowrap; padding: .62rem .95rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(8, 12, 32, .45); transition: background .3s, border-color .3s; }
.pill:hover { background: rgba(30, 42, 90, .55); border-color: rgba(238, 245, 255, .32); }
@media (max-width: 420px) { .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

main { position: relative; z-index: 5; }

/* Type */
.kicker { margin: 0 0 1rem; font: 600 .74rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--warm); }
.kicker span { color: var(--gold); margin-right: .3rem; }
.display { margin: 0 0 1.2rem; font: 400 clamp(2.4rem, 6vw, 4.8rem)/1 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.display em { font-style: italic; color: var(--gold); }
.display--m { font-size: clamp(1.9rem, 4.2vw, 3.3rem); line-height: 1.08; }
.title { margin: 0 0 1rem; font: 400 clamp(1.7rem, 3.4vw, 2.6rem)/1.1 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.lead { margin: 0 0 1.4rem; font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--mist-300); max-width: 36rem; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05); }

/* Hero + form */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start;
  width: min(76rem, 100% - 2 * var(--pad)); margin: 0 auto; padding: clamp(2.5rem, 8vh, 6rem) 0 3rem; }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.includes { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; color: var(--mist-300); }
.includes span { display: inline-block; width: 1.6rem; color: var(--gold); }

.form { padding: clamp(1.25rem, 3vw, 2rem); }
.form__title { margin: 0 0 1.1rem; font: 400 1.6rem/1.2 var(--display); }
.field { margin: 0 0 1.05rem; }
.field label { display: block; margin: 0 0 .35rem; font-weight: 600; font-size: .95rem; }
.field input { width: 100%; min-height: 2.9rem; padding: .6rem .85rem; border-radius: 12px; border: 1px solid rgba(238, 245, 255, .22); background: rgba(4, 7, 22, .55);
  color: var(--star-100); font: inherit; }
.field input:focus-visible { outline-offset: 1px; border-color: var(--gold); }
.field__hint { margin: .35rem 0 0; font-size: .86rem; color: var(--mist-300); }
.field__error { margin: .3rem 0 0; font-size: .88rem; color: var(--danger); min-height: 0; }
.field__error:empty { display: none; }
.has-error input { border-color: var(--danger); }
.errors { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--danger); background: rgba(80, 20, 30, .35); }
.errors p { margin: 0 0 .3rem; font-weight: 600; }
.errors ul { margin: 0; padding-left: 1.1rem; }

.place { position: relative; }
.place__box { position: relative; }
.place__status { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); font-size: .78rem; color: var(--mist-300); pointer-events: none; }
.place__options { position: absolute; z-index: 20; left: 0; right: 0; margin: .3rem 0 0; padding: .3rem; list-style: none; max-height: 18rem; overflow: auto;
  border-radius: 14px; border: 1px solid var(--line); background: #0a1028; box-shadow: 0 20px 50px -20px #000; }
.place__options li { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 10px; cursor: pointer; }
.place__options li[aria-selected="true"], .place__options li:hover { background: rgba(127, 176, 230, .16); }
.place__text { display: grid; min-width: 0; }
.place__name { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.place__sub { margin: 0; font-size: .82rem; color: var(--mist-300); }
.place__map { border-radius: 6px; flex: none; }
.place__picked { display: flex; align-items: center; gap: .8rem; margin-top: .6rem; padding: .55rem; border-radius: 12px; background: rgba(4, 7, 22, .45); }

.note { margin: 1.2rem 0; padding: .9rem 1rem; border-radius: 14px; border: 1px solid rgba(226, 200, 150, .3); background: rgba(226, 200, 150, .06); font-size: .93rem; }
.note p { margin: 0; }
.note__title { margin-bottom: .35rem !important; font-weight: 600; color: var(--warm); }
.form__privacy, .form__noscript { margin: .9rem 0 0; font-size: .84rem; color: var(--mist-300); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.8rem; padding: .7rem 1.2rem; border-radius: 999px; cursor: pointer;
  font: 600 .95rem/1.1 var(--sans); text-decoration: none; border: 1px solid transparent; transition: background .3s, border-color .3s, transform .3s var(--ease); }
.btn--primary { background: linear-gradient(135deg, var(--warm), var(--gold)); color: var(--sky-950); }
.btn--primary:hover { transform: translateY(-1px); }
.btn--block { width: 100%; }
.btn--quiet { background: rgba(8, 12, 32, .5); color: var(--star-100); border-color: var(--line); }
.btn--quiet:hover { border-color: rgba(238, 245, 255, .34); }
.btn--danger { background: transparent; color: var(--danger); border-color: rgba(240, 163, 163, .45); }
.btn:disabled { opacity: .55; cursor: wait; }

/* Reading */
.reading { width: min(76rem, 100% - 2 * var(--pad)); margin: 0 auto; padding: clamp(2rem, 6vh, 4rem) 0 2rem; }
.reading__head { max-width: 50rem; margin-bottom: 2rem; }
.reading__chart { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 3rem; }
@media (max-width: 1000px) { .reading__chart { grid-template-columns: minmax(0, 1fr); } }
.chart-card { margin: 0; padding: 1.1rem; }
.chart-card figcaption { margin-top: .8rem; font-size: .84rem; color: var(--mist-300); }
.vchart { display: block; width: 100%; max-width: 26rem; height: auto; margin: 0 auto; }
.vchart polygon { fill: transparent; }
.vchart__house--first polygon { fill: rgba(226, 200, 150, .07); }
.vchart__frame, .vchart__lines { fill: none; stroke: rgba(226, 200, 150, .55); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.vchart text { fill: var(--star-100); font: 600 17px/1 var(--sans); }
.vchart__sign { fill: var(--mist-300) !important; font-size: 13px !important; font-weight: 500 !important; opacity: .8; }
.vchart__lagna { fill: var(--gold); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.vchart__graha--sun, .vchart__graha--mars { fill: #f5d0a0; }
.vchart__graha--moon, .vchart__graha--venus { fill: #e9eefc; }
.vchart__graha--jupiter, .vchart__graha--mercury { fill: #d8e7b8; }
.vchart__graha--saturn, .vchart__graha--rahu, .vchart__graha--ketu { fill: #b9c8eb; }

.table-wrap { overflow-x: auto; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); }
.placements { width: 100%; border-collapse: collapse; font-size: .92rem; }
.placements caption { text-align: left; padding: 1rem 1rem .4rem; font: 400 1.25rem/1.2 var(--display); }
.placements th, .placements td { padding: .55rem .8rem; text-align: left; border-top: 1px solid rgba(238, 245, 255, .08); white-space: nowrap; }
.placements thead th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--warm); font-weight: 600; }
.placements tbody th { font-weight: 600; }

.sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.sig { padding: 1.3rem 1.4rem; }
.sig h3 { margin: 0 0 .7rem; font: 400 1.65rem/1.15 var(--display); }
.sig p { margin: 0 0 .8rem; }
.sig p:last-child { margin-bottom: 0; }
.sig__eyebrow { font: 600 .72rem/1.3 var(--sans) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--warm); }
.sig__facts { font-size: .9rem; color: var(--mist-300); }
.sig__dl { display: grid; gap: .3rem; margin: 0 0 .9rem; font-size: .92rem; }
.sig__dl div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .5rem; }
.sig__dl dt { color: var(--mist-300); }
.sig__dl dd { margin: 0; }
.sig--period { border-color: rgba(226, 200, 150, .35); }
.keep { padding: 1.3rem 1.4rem; margin-top: 2rem; }
.keep__title { margin: 0 0 .5rem; font: 400 1.4rem/1.2 var(--display); }
.keep__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.status { margin: .7rem 0 0; font-size: .92rem; }
.status:empty { display: none; }
.loading, .deleted { padding: 2rem; max-width: 40rem; }

/* Explainers */
.explain, .faq { width: min(60rem, 100% - 2 * var(--pad)); margin: 0 auto; padding: 2.5rem 0; }
.explain__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem 2rem; color: var(--mist-300); }
.explain__grid p, .explain__more { margin: 0; }
.explain__more { margin-top: 1rem; font-size: .92rem; color: var(--mist-300); }
.faq details { border-top: 1px solid var(--line); padding: .9rem 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: .6rem 0 0; color: var(--mist-300); }

/* The other dimensions, after Questions: the same list and wording as the birth chart, tarot and palm pages. */
.dims { position: relative; z-index: 5; width: min(50rem, 100% - 2 * var(--pad)); margin: 0 auto; padding: 1rem 0 3.5rem; text-align: center; }
.dims__title { margin: 0 0 1.2rem; font: 600 .74rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--warm); }
.dims__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 24rem)); justify-content: center; gap: .8rem; }
.dims__item { display: flex; align-items: center; gap: 1rem; min-height: 44px; padding: 1rem 1.2rem; border: 1px solid rgba(226, 200, 150, .28); border-radius: 18px; background: rgba(8, 12, 32, .62); color: inherit; text-decoration: none; text-align: left; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dims__item:hover, .dims__item:focus-visible { border-color: var(--gold); background: rgba(14, 20, 50, .8); }
.dims__num { flex: none; width: 2.2rem; font: 400 1.1rem/1 var(--display); color: var(--gold); text-align: center; }
.dims__text { flex: 1; display: grid; gap: .25rem; }
.dims__name { font: 400 1.3rem/1.15 var(--display); }
.dims__chip { font-size: .85rem; color: var(--mist-300); }
.dims__go { color: var(--gold); }
.dims__all { display: inline-block; margin-top: 1rem; padding: .7rem .4rem; font-size: .85rem; color: var(--mist-300); text-decoration: underline; text-decoration-color: rgba(185, 200, 235, .35); text-underline-offset: 3px; }
.dims__all:hover { color: var(--warm); }

.site-foot { position: relative; z-index: 5; width: min(60rem, 100% - 2 * var(--pad)); margin: 2rem auto 0; padding: 2rem 0 3rem; text-align: center; font-size: .85rem; color: var(--mist-300); }
.site-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; margin: .6rem 0; }

/* Calculation dialog */
.calc { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 1rem; background: rgba(4, 7, 22, .78); opacity: 0; transition: opacity .4s; }
.calc.is-open { opacity: 1; }
.calc__inner { text-align: center; max-width: 28rem; }
.calc__title { margin: 1.2rem 0 .5rem; font: 400 1.6rem/1.2 var(--display); }
.calc__orbit { position: relative; width: 4.5rem; height: 4.5rem; margin: 0 auto; }
.calc__orbit span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(226, 200, 150, .5); animation: orbit 3.2s linear infinite; }
.calc__orbit span:nth-child(2) { inset: .7rem; animation-duration: 2.4s; animation-direction: reverse; }
.calc__orbit span:nth-child(3) { inset: 1.5rem; background: var(--gold); border: 0; animation: none; box-shadow: 0 0 18px var(--gold); }
.calc__orbit span::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--warm); }
.calc__orbit span:nth-child(3)::after { display: none; }
@keyframes orbit { to { transform: rotate(360deg); } }
.calc.is-error .calc__orbit span { animation: none; }
.calc.is-error .calc__orbit span:nth-child(3) { box-shadow: none; opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Phase 4: offer, Complete reading, gifts */
.form-col { display: grid; gap: 1rem; min-width: 0; }
.gift-banner { padding: 1.2rem 1.4rem; border-color: rgba(226, 200, 150, .4); }
.gift-banner p { margin: 0 0 .5rem; }
.unlock, .gift { padding: clamp(1.25rem, 3vw, 2rem); margin: 0 0 1.5rem; border-color: rgba(226, 200, 150, .4);
  background: linear-gradient(160deg, rgba(43, 63, 122, .35), rgba(7, 11, 30, .7)); }
.unlock__title { margin: 0 0 .7rem; font: 400 clamp(1.5rem, 3vw, 2.1rem)/1.15 var(--display); }
.unlock__list { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--mist-300); }
.unlock__note { font-size: .9rem; color: var(--mist-300); }
.check { display: flex; gap: .65rem; align-items: flex-start; margin: 1rem 0; font-size: .93rem; cursor: pointer; }
.check input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--gold); flex: none; }
.notice { padding: 1rem 1.3rem; border-color: rgba(226, 200, 150, .45); }
.gift-home { width: min(60rem, 100% - 2 * var(--pad)); margin: 0 auto; padding: 1rem 0 0; }
.gift-home__status { width: min(60rem, 100% - 2 * var(--pad)); margin: .5rem auto 0; }
.gift__form { max-width: 30rem; }
.chip { display: inline-block; margin-left: .35rem; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; letter-spacing: .04em;
  border: 1px solid rgba(226, 200, 150, .45); color: var(--warm); vertical-align: middle; }

.complete { margin-top: 3rem; }
.complete__overview { max-width: 50rem; font-size: 1.08rem; }
.complete__overview p { margin: 0 0 1rem; }
.complete__h { margin: 2.6rem 0 1rem; font: 400 clamp(1.45rem, 2.8vw, 2rem)/1.15 var(--display); }
.complete__block { padding: 1.3rem 1.4rem; margin: 0 0 1rem; }
.complete__block h3, .complete__block h4, .sig h4, .graha h4 { margin: 0 0 .6rem; font: 400 1.45rem/1.2 var(--display); }
.complete__block p:last-child { margin-bottom: 0; }
.graha-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.graha { padding: 1.3rem 1.4rem; }
.graha p { margin: 0 0 .7rem; }
.graha p:last-child { margin-bottom: 0; }
.graha__where { color: var(--mist-300); font-size: .92rem; }
.reading__chart--d9 { margin-bottom: 1rem; align-items: stretch; }
.timeline { list-style: none; margin: 1.2rem 0 0; padding: 0; border-left: 1px solid rgba(226, 200, 150, .35); }
.timeline li { position: relative; padding: 0 0 1.1rem 1.2rem; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: .45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--sky-800); border: 1px solid var(--gold); }
.timeline li.is-now::before { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.timeline p { margin: 0 0 .25rem; }
.timeline__when { font-size: .85rem; color: var(--mist-300); }
.timeline__name { font-weight: 600; }
.method { max-width: 50rem; color: var(--mist-300); font-size: .93rem; }

.recover { max-width: 28rem; margin-top: .8rem; }

/* Headings the script focuses for screen readers (tabindex=-1) need no visible ring; keyboard focus keeps it elsewhere. */
[tabindex="-1"]:focus:not(:focus-visible), h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }

/* Immersive scene (owner, 2026-10-15): the 3D canvas replaces the static sky once it is running (html.has-scene).
   Without WebGL the static sky stays and the story steps are ordinary sections. */
#scene { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
html:not(.has-scene) #scene { display: none; }
.has-scene .sky { display: none; }
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; display: none; }
.has-scene .veil { display: block; background: linear-gradient(90deg, rgba(4, 7, 22, .72) 0%, rgba(4, 7, 22, .34) 38%, rgba(4, 7, 22, 0) 62%); }
@media (max-width: 820px) { .has-scene .veil { background: linear-gradient(180deg, rgba(4, 7, 22, .74) 0%, rgba(4, 7, 22, .3) 42%, rgba(4, 7, 22, 0) 68%); } }
button.pill { color: inherit; cursor: pointer; }
/* Narrow screens: the motion and music controls keep only their icons (their names stay for screen readers). */
@media (max-width: 760px) { .top__actions button.pill .pill__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

.story { display: flex; align-items: center; width: min(76rem, 100% - 2 * var(--pad)); margin: 0 auto; padding: 2.5rem 0; }
.has-scene .story { min-height: 100vh; }
@media (max-width: 820px) { .has-scene .story { align-items: flex-start; padding-top: 12vh; } }
.story__copy { max-width: 32rem; }
.story__copy .lead { margin-bottom: 1.2rem; }
.story__fine { margin: 0 0 1.3rem; font-size: .84rem; color: var(--mist-300); }

.gift-section { display: flex; align-items: center; width: min(76rem, 100% - 2 * var(--pad)); margin: 0 auto; padding: 2rem 0; }
.has-scene .gift-section { min-height: 92vh; }
.gift-section .gift-home, .gift-section .gift-home__status { width: auto; max-width: 34rem; margin: 0; padding: 0; }
.gift-section .gift { margin: 0; }

.method { width: min(76rem, 100% - 2 * var(--pad)); margin: 0 auto; padding: 3rem 0; }
.method .lead { max-width: 40rem; }
.method__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-top: 1.6rem; }
.method__card { padding: 1.3rem 1.4rem; }
.method__card h3 { margin: 0 0 .6rem; font: 400 1.35rem/1.2 var(--display); }
.method__card p:last-child { margin: 0; font-size: .95rem; color: var(--mist-300); }
.method__num { margin: 0 0 .7rem; font: 600 .78rem/1 var(--sans); letter-spacing: .16em; color: var(--gold); }

/* Over the scene, the long-form sections sit on quiet panels so the chart behind never competes with the text. */
.has-scene .explain, .has-scene .faq { margin: 5rem auto; padding: clamp(1.5rem, 4vw, 2.6rem); border: 1px solid var(--line); border-radius: 20px;
  background: rgba(7, 11, 30, .62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.has-scene .method { padding: 6rem 0; }
.has-scene .reading__head { display: flex; flex-direction: column; justify-content: center; min-height: 70vh; }
@media (max-width: 820px) { .has-scene .reading__head { justify-content: flex-end; min-height: 82vh; min-height: 82svh; } }

/* Hero and form matched to the birth chart (owner, 2026-10-15): the hero spans the page with the form in a narrow
   27rem column, the title larger and further left, so more of the scene shows; the header floats over the scene. */
.top { position: fixed; inset: 0 0 auto; z-index: 20; padding: 1.1rem clamp(1.25rem, 6vw, 6.5rem) 0; pointer-events: none; }
.top > * { pointer-events: auto; }
.reading { padding-top: 6.5rem; }
.hero { width: auto; min-height: 100vh; min-height: 100svh; margin: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(2rem, 5vw, 6rem);
  align-items: center; padding: 7rem clamp(1.25rem, 6vw, 6.5rem) 4rem; }
.hero .display { margin-bottom: 1rem; font-size: clamp(3rem, 6.4vw, 6rem); line-height: .95; letter-spacing: -.035em; }
.hero .lead { max-width: 34rem; }
.includes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.8rem 0 0; }
.includes li { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-radius: 999px; font: 500 .8rem/1 var(--sans); letter-spacing: .04em;
  color: var(--star-100); border: 1px solid rgba(238, 245, 255, .16); background: rgba(8, 12, 32, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.includes span { width: auto; }

#birth-form { padding: clamp(1.4rem, 2.6vw, 2.2rem); border-radius: 26px; background: linear-gradient(180deg, rgba(12, 18, 46, .78), rgba(6, 10, 28, .74));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .07); }
.form__eyebrow { margin-bottom: .7rem; }
#birth-form .form__title { margin: 0 0 1.3rem; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
#birth-form .field { margin-bottom: 1rem; }
#birth-form .field label { margin-bottom: .45rem; font: 600 .7rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mist-300); }
#birth-form .field input { min-height: 2.75rem; padding: .7rem .85rem; font-size: 1rem; }
#birth-form .field__hint { font-size: .8rem; }
#birth-form .btn--block { margin-top: .6rem; padding: 1rem; }
.accuracy { margin: .2rem 0 1rem; font-size: .88rem; color: rgba(214, 224, 248, .85); }
.accuracy summary { cursor: pointer; color: var(--warm); font-weight: 500; }
.accuracy summary span { color: var(--gold); margin-right: .2rem; }
.accuracy p { margin: .6rem 0 0; }
#birth-form .form__privacy { margin-top: .9rem; font-size: .76rem; line-height: 1.5; color: rgba(185, 200, 235, .7); }
:lang(hi) #birth-form .field label { letter-spacing: .04em; text-transform: none; font-size: .8rem; }

/* As on the birth chart: dark edges, clear centre where the scene is. */
.has-scene .veil { background: radial-gradient(120% 90% at 50% 45%, transparent 50%, rgba(2, 4, 14, .6) 100%),
  linear-gradient(90deg, rgba(4, 7, 22, .7) 0%, rgba(4, 7, 22, .15) 45%, rgba(4, 7, 22, .15) 60%, rgba(4, 7, 22, .55) 100%); }

@media (max-width: 980px) { .hero { grid-template-columns: minmax(0, 1fr); padding-top: 6rem; } }
/* Phones, as on the birth chart: the scene in the upper part of the screen, the copy and the form beneath it. */
@media (max-width: 820px) {
  .top { padding: .8rem 1.25rem 0; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .has-scene .hero { align-items: start; gap: 2rem; padding: 34vh 1.25rem 3rem; }
  .has-scene .story { align-items: flex-end; min-height: 100vh; min-height: 100svh; padding: 6rem 1.25rem 3.5rem; width: auto; }
  .has-scene .gift-section { align-items: flex-end; padding: 40vh 1.25rem 3rem; width: auto; }
  .has-scene .veil { background: radial-gradient(120% 70% at 50% 30%, transparent 45%, rgba(2, 4, 14, .5) 100%),
    linear-gradient(180deg, transparent 30%, rgba(4, 7, 22, .7) 62%, rgba(4, 7, 22, .9) 100%); }
}

/* ---------- The reading as a scroll story (owner, 2026-10-15, after the birth chart's reading) ---------- */
.is-reading .explain, .is-reading .method, .is-reading .faq, .is-reading #home-story { display: none; }
.reading { width: auto; margin: 0; padding: 0; }
.rstep { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 7rem clamp(1.25rem, 6vw, 6.5rem); }
html:not(.has-scene) .rstep { min-height: 0; padding-block: 3rem; }
.rstep .copy { max-width: 33rem; }
.rstep--center, .rstep--end, .rstep--offer { justify-content: center; }
.copy--center { max-width: 46rem !important; margin-inline: auto; text-align: center; }
.copy--center p { color: rgba(214, 224, 248, .9); }
.copy--wide { max-width: 74rem !important; width: 100%; margin-inline: auto; }
.rstep .body { margin: 0 0 1rem; color: rgba(214, 224, 248, .88); font-size: 1.04rem; }
.birth { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 1.6rem 0 0; font: 500 .8rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mist-300); }
.birth span + span::before { content: "·"; margin-right: 1.2rem; color: var(--gold); }
:lang(hi) .birth { letter-spacing: .04em; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; }
.chips span { padding: .55rem .8rem; border-radius: 999px; font: 500 .78rem/1 var(--sans); letter-spacing: .03em; color: var(--mist-300); border: 1px solid rgba(238, 245, 255, .14); background: rgba(8, 12, 32, .45); }
.scroll-hint { display: inline-flex; align-items: center; gap: .9rem; margin-top: 2.8rem; font: 500 .76rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--mist-300); }
.scroll-hint__line { position: relative; width: 1px; height: 3rem; overflow: hidden; background: rgba(238, 245, 255, .18); }
.scroll-hint__line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, var(--gold)); animation: drip 2.4s var(--ease) infinite; }
@keyframes drip { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
.rstep .notice { margin-top: 1.4rem; }

.graha-title { margin: 0 0 1rem; font: 400 clamp(2.2rem, 4.4vw, 3.6rem)/1.02 var(--display); letter-spacing: -.02em; }
.graha-title em { font-style: normal; color: var(--accent, var(--gold)); }
.graha-title__dot { display: inline-block; width: .5em; height: .5em; margin-right: .35em; border-radius: 50%; vertical-align: .12em; background: var(--accent, var(--gold)); box-shadow: 0 0 18px var(--accent, var(--gold)); }
.kicker .graha-title__dot { width: .7em; height: .7em; vertical-align: -.05em; }
.facts { display: grid; grid-template-columns: 1fr 1fr; max-width: 26rem; margin: 1.6rem 0 0; border-top: 1px solid rgba(238, 245, 255, .12); }
.facts div { padding: .8rem 0; border-bottom: 1px solid rgba(238, 245, 255, .12); }
.facts div:nth-child(odd):not(.facts__wide) { border-right: 1px solid rgba(238, 245, 255, .12); }
.facts div:nth-child(even) { padding-left: 1.1rem; }
.facts .facts__wide { grid-column: 1 / -1; padding-left: 0; }
.facts dt { margin-bottom: .4rem; font: 600 .66rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(185, 200, 235, .7); }
:lang(hi) .facts dt { letter-spacing: .04em; font-size: .78rem; }
.facts dd { margin: 0; font: 400 1.18rem/1.2 var(--display); }

/* Reading panels beside the square chart (scene shiftX ±0.26): the panel takes the other half. */
.panel { max-width: 37rem; padding: clamp(1.5rem, 3vw, 2.6rem); border-radius: 24px; background: linear-gradient(180deg, rgba(10, 16, 42, .74), rgba(6, 10, 28, .68));
  border: 1px solid rgba(238, 245, 255, .11); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05); }
.panel p { color: rgba(214, 224, 248, .88); }
.panel .title { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.panel__chart { max-width: 20rem; margin: 1rem 0 1.2rem; }
@media (min-width: 821px) {
  .rstep--left { justify-content: flex-end; }
  .rstep--left .panel, .rstep--right .panel { max-width: min(40rem, 42vw); }
  .is-reading.has-scene .veil { background: radial-gradient(120% 90% at 60% 50%, transparent 55%, rgba(2, 4, 14, .55) 100%), linear-gradient(90deg, rgba(4, 7, 22, .78) 0%, rgba(4, 7, 22, .35) 34%, transparent 58%); }
  .is-reading.is-chart-left.has-scene .veil { background: radial-gradient(120% 90% at 40% 50%, transparent 55%, rgba(2, 4, 14, .55) 100%), linear-gradient(270deg, rgba(4, 7, 22, .78) 0%, rgba(4, 7, 22, .35) 34%, transparent 58%); }
}
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.1rem; margin-top: 1rem; }
.cards .card { padding: 1.5rem 1.6rem; }
.cards h4 { margin: 0 0 .7rem; font: 400 1.4rem/1.15 var(--display); }
.cards p { margin: 0 0 .7rem; color: rgba(214, 224, 248, .86); font-size: .96rem; }
.card__fine { font-size: .86rem !important; color: var(--mist-300) !important; }

/* The offer on a free reading: the reel beside the price, as on the birth chart. */
.offer { position: relative; display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 30rem); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; width: min(100%, 64rem);
  padding: clamp(1.1rem, 2.4vw, 1.8rem); border-radius: 32px; border: 1px solid rgba(226, 200, 150, .32);
  background: radial-gradient(90% 70% at 85% 0%, rgba(226, 200, 150, .14), transparent 60%), radial-gradient(80% 80% at 0% 100%, rgba(154, 124, 193, .18), transparent 60%), linear-gradient(180deg, rgba(12, 18, 46, .86), rgba(6, 10, 28, .84));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 60px 140px -50px rgba(226, 200, 150, .3), 0 40px 100px -40px rgba(0, 0, 0, .9); }
.offer__title { margin: 0 0 .7rem; font: 400 clamp(1.9rem, 3.4vw, 2.8rem)/1.04 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.offer__lead { margin: 0 0 1.1rem; font-size: .98rem; line-height: 1.55; color: rgba(214, 224, 248, .88); }
.offer__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.offer__stats li { padding: .7rem .5rem; border-radius: 14px; text-align: center; background: rgba(238, 245, 255, .05); border: 1px solid rgba(238, 245, 255, .1); }
.offer__stats b { display: block; font: 400 1.6rem/1 var(--display); color: var(--warm); }
.offer__stats span { display: block; margin-top: .3rem; font-size: .68rem; line-height: 1.25; color: var(--mist-300); }
.offer__list { margin: 0 0 .6rem; padding-left: 1.1rem; font-size: .9rem; color: var(--mist-300); }
.check--compact { margin: .8rem 0; font-size: .8rem; }
.offer__buy { display: flex; align-items: center; gap: 1rem; }
.offer__buy .btn { flex: 1; }
.price { margin: 0; display: grid; }
.price b { font: 400 2.4rem/1 var(--display); color: var(--warm); }
.price span { font-size: .66rem; letter-spacing: .06em; color: var(--mist-300); }
.offer__fine { margin: .8rem 0 0; font-size: .74rem; line-height: 1.45; color: rgba(185, 200, 235, .7); }

.reel { position: relative; width: 100%; aspect-ratio: 9 / 13; max-height: min(74vh, 36rem); margin-inline: auto; border-radius: 24px; overflow: hidden; outline: none;
  background: radial-gradient(120% 70% at 50% 35%, #172a5e 0%, #0a1233 55%, #050816 100%); box-shadow: inset 0 0 0 1px rgba(238, 245, 255, .1), 0 30px 70px -30px rgba(0, 0, 0, .9); }
.reel--3d { background: transparent; }
.reel:focus-visible { box-shadow: 0 0 0 2px var(--gold); }
.reel__bars { position: absolute; z-index: 3; inset: .8rem .9rem auto; display: flex; gap: 4px; }
.reel__bars span { flex: 1; height: 2.5px; border-radius: 2px; overflow: hidden; background: rgba(238, 245, 255, .22); }
.reel__bars i { display: block; width: 0; height: 100%; background: var(--warm); }
@keyframes reelbar { from { width: 0; } to { width: 100%; } }
.reel__live { position: absolute; z-index: 3; top: 1.5rem; left: 1rem; margin: 0; font: 600 .62rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--warm); }
.reel__stage { position: absolute; inset: 0; }
.reel__slide { position: absolute; inset: 0; margin: 0; display: grid; grid-template-rows: 1fr auto; opacity: 0; transition: opacity .6s var(--ease); }
.reel__slide.is-active { opacity: 1; }
.reel__cap { grid-row: 2; padding: 0 1.2rem 1.3rem; background: linear-gradient(180deg, transparent, rgba(4, 7, 22, .85) 40%); }
.reel__kicker { margin: 0 0 .35rem; font: 600 .62rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--warm); }
.reel__title { margin: 0 0 .5rem; font: 400 1.6rem/1.05 var(--display); color: #fff; }
.reel__title em { font-style: normal; color: var(--c, var(--mist-300)); }
.reel__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; }
.reel__meta span { padding: .38rem .55rem; border-radius: 999px; font: 500 .7rem/1 var(--sans); background: rgba(238, 245, 255, .08); border: 1px solid rgba(238, 245, 255, .12); }
.reel__locked { display: flex; gap: .5rem; align-items: flex-start; margin: 0; font-size: .8rem; line-height: 1.4; color: var(--mist-300); }
.reel__blur { filter: blur(3.5px); user-select: none; }
.reel__lock { filter: grayscale(1) brightness(1.6); }
.reel__nav { position: absolute; z-index: 4; top: 0; bottom: 0; width: 35%; border: 0; background: transparent; cursor: pointer; }
.reel__nav--prev { left: 0; } .reel__nav--next { right: 0; }

.tools { max-width: 46rem; margin: 0 auto 1.5rem; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 26px; background: linear-gradient(180deg, rgba(12, 18, 46, .8), rgba(6, 10, 28, .74));
  border: 1px solid rgba(238, 245, 255, .13); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.tools p { color: var(--mist-300); }
.facts-table { max-width: 74rem; margin: 0 auto; padding: 1.1rem 1.4rem; border-radius: 20px; background: rgba(8, 12, 32, .66); border: 1px solid rgba(238, 245, 255, .1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.facts-table summary { cursor: pointer; font: 400 1.3rem/1.3 var(--display); }
.facts-table .table-wrap { margin-top: 1rem; border: 0; background: none; }
.facts-table__chart { max-width: 24rem; margin: 1.4rem auto .4rem; }
.facts-table__chart figcaption { margin-top: .6rem; font-size: .82rem; color: var(--mist-300); text-align: center; }

.pill--gold { background: linear-gradient(135deg, var(--warm), var(--gold)); color: var(--sky-950); border-color: transparent; font-weight: 600; }
.pill--gold:hover { background: linear-gradient(135deg, #fff1d8, var(--gold)); }

/* Copy fades in as it reaches the screen (only over the scene; app.js leaves it visible otherwise). */
.has-scene .rstep .reveal { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(6px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.has-scene .rstep .reveal.in { opacity: 1; transform: none; filter: none; }
.reduce-motion .rstep .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }

@media (max-width: 900px) {
  .offer { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .reel { aspect-ratio: auto; height: 20rem; max-height: none; }
}
/* Phones, as on the birth chart: the scene above, the copy beneath. */
@media (max-width: 820px) {
  .has-scene .rstep { align-items: flex-end; padding: 6rem 1.25rem 3.5rem; }
  .has-scene .rstep--center, .has-scene .rstep--end, .has-scene .rstep--offer { align-items: center; }
  .panel { padding: 1.3rem; }
  .offer__stats { grid-template-columns: repeat(2, 1fr); }
  .offer__buy { flex-direction: column; align-items: stretch; }
  .top__actions [data-reading-pill] { order: -1; }
}
@media (max-width: 560px) { [data-reading-pill] { padding-inline: .7rem; font-size: .72rem; } }

/* 3D reel: the scene draws a second camera into this transparent window, so only the text side is a panel. */
.offer:has(.reel--3d) { padding: 0; grid-template-columns: minmax(0, 27rem) minmax(0, 30rem); background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.offer:has(.reel--3d) .offer__body { padding: clamp(1.3rem, 2.4vw, 2rem); border-radius: 28px; border: 1px solid rgba(226, 200, 150, .32);
  background: radial-gradient(90% 70% at 85% 0%, rgba(226, 200, 150, .14), transparent 60%), linear-gradient(180deg, rgba(12, 18, 46, .88), rgba(6, 10, 28, .86));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 60px 140px -50px rgba(226, 200, 150, .3), 0 40px 100px -40px rgba(0, 0, 0, .9); }
.reel--3d { aspect-ratio: 4 / 5; max-height: min(78vh, 40rem); background: transparent; box-shadow: inset 0 0 0 1px rgba(226, 200, 150, .35), 0 40px 90px -40px rgba(0, 0, 0, .9); }
.reel--3d::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(3, 6, 18, .55), transparent 18%, transparent 55%, rgba(3, 6, 18, .88) 100%); }
.reel--3d::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #02040c; opacity: 0; }
.reel--3d.is-cut::after { animation: reelCut .7s var(--ease); }
@keyframes reelCut { 0% { opacity: .85; } 100% { opacity: 0; } }
.reel--3d .reel__cap { position: relative; z-index: 3; background: none; }
.reel--3d .reel__live { display: flex; align-items: center; gap: .4rem; }
.reel--3d .reel__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff6b5b; box-shadow: 0 0 8px #ff6b5b; animation: livePulse 1.4s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .3; } }
@media (max-width: 900px) {
  .offer:has(.reel--3d) { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .reel--3d { aspect-ratio: auto; height: 22rem; }
}
@media (max-width: 560px) { .reel--3d { height: 15.5rem; } .reel--3d .reel__locked { display: none; } .reel--3d .reel__title { font-size: 1.25rem; } .offer:has(.reel--3d) .offer__body { padding: 1rem; } }
@media (prefers-reduced-motion: reduce) { .reel--3d .reel__live::before { animation: none; } }
/* Without the 3D scene the reel has nothing to show: the offer is its text alone. */
.reel:not(.reel--3d) { display: none; }
.offer:not(:has(.reel--3d)) { grid-template-columns: minmax(0, 34rem); justify-content: center; }

/* The top bar on phones: long labels fold away so every control fits at 320 px. */
@media (max-width: 560px) {
  .top__actions { gap: .4rem; }
  .top__actions .pill { padding-inline: .7rem; }
  .pill__long { display: none; }
}
@media (max-width: 820px) { .is-reading [data-western] { display: none; } }

/* ---------- Print / PDF: the birth chart's print document (apps/charts/css/app.css), with the square chart ---------- */
#print-doc { display: none; }
@media print {
  @page { size: auto; margin: 16mm 17mm 18mm; }
  @page :first { margin: 0; }
  :root { color-scheme: light !important; }
  html, body { background: #fff !important; }
  body > *:not(#print-doc) { display: none !important; }
  #print-doc { display: block !important; }
  .pd { color: #1b1f36; font: 10.5pt/1.62 var(--sans); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pd-cover { position: relative; height: 100vh; box-sizing: border-box; padding: 16mm 18mm 14mm; display: flex; flex-direction: column; align-items: center; text-align: center; color: #eef2ff; break-after: page;
    background: radial-gradient(90% 60% at 50% 38%, #16275a 0%, #0a1233 45%, #050816 100%); }
  .pd-brand { margin: 0; font: 600 8pt/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: #e2c896; }
  .pd-wheel { width: 128mm; height: 128mm; margin: 10mm 0 8mm; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(226,200,150,.35), 0 0 40mm rgba(90,130,255,.25); }
  .pd-cover__kicker { margin: 0; font: 600 8.5pt/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #b9c8eb; }
  .pd-cover h1 { margin: 3mm 0 2mm; font: 400 40pt/1 var(--display); letter-spacing: -.02em; color: #fff; }
  .pd-cover__meta { margin: 0; font: 400 13pt/1.4 var(--display); color: #dfe6ff; }
  .pd-cover__meta--sm { font: 500 8pt/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #9fb0d8; margin-top: 2mm; }
  .pd-cover__big { display: flex; gap: 8mm; justify-content: center; margin: 9mm 0 0; font: 400 12pt/1 var(--display); color: #f5e5c8; }
  .pd-cover__big b { font-weight: 400; color: #e2c896; margin-right: 1.5mm; }
  .pd-cover__foot { margin-top: auto; font: 500 7.5pt/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #7f8db5; }
  .pd-sec { break-inside: auto; margin: 0 0 9mm; }
  .pd-break { break-before: page; }
  .pd-kicker { margin: 0 0 1.5mm; font: 600 7.5pt/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #9a7433; }
  .pd-kicker .g { letter-spacing: 0; font-size: 10pt; }
  .pd h2 { margin: 0 0 5mm; padding-bottom: 3.5mm; border-bottom: .4pt solid #d9c9a3; font: 400 22pt/1.1 var(--display); letter-spacing: -.015em; color: #0f1330; }
  .pd h3 { margin: 0 0 2mm; font: 400 14pt/1.2 var(--display); color: #11163a; }
  .pd-h3 { margin-top: 8mm !important; }
  .pd h4 { margin: 0 0 1mm; font: 600 7pt/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #9a7433; }
  .pd p { margin: 0 0 2.6mm; }
  .pd-sec--lead p { font: 400 12.5pt/1.55 var(--display); color: #22284a; }
  .pd-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin-bottom: 2mm; }
  .pd-big__card { position: relative; padding: 5mm 5mm 4mm; border-radius: 3mm; background: #f6f2e8; border: .4pt solid #e2d5b4; break-inside: avoid; }
  .pd-big__glyph { position: absolute; right: 4mm; top: 3mm; font-size: 20pt; color: #c9a45e; }
  .pd-big__sign { margin: 1mm 0 1mm !important; font: 400 16pt/1.1 var(--display); color: #0f1330; }
  .pd-big__sign .g { color: #9a7433; font-size: 12pt; }
  .pd-big__meta { margin: 0 !important; font-size: 8.5pt; color: #5b6180; }
  .pd-table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .pd-table th, .pd-table td { padding: 1.6mm 2mm; text-align: left; border-bottom: .3pt solid #e6e0d2; font-weight: 400; }
  .pd-table thead th { font: 600 6.8pt/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #8b8fa6; border-bottom-color: #cdbf9c; }
  .pd-table tbody th { font-weight: 600; color: #11163a; }
  .pd-table td.g, .pd-table .g { color: #9a7433; }
  .pd-table tbody tr:nth-child(even) { background: #faf8f3; }
  .pd-asp { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 8mm; font-size: 8.8pt; }
  .pd-asp li { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 2mm; padding: 1.2mm 0; border-bottom: .3pt solid #eee8da; break-inside: avoid; }
  .pd-asp em { font-style: normal; font-size: 7.5pt; letter-spacing: .06em; text-transform: uppercase; padding: .4mm 1.6mm; border-radius: 2mm; }
  .asp--h em { background: #e4eefa; color: #2d5b91; } .asp--t em { background: #f7e4ee; color: #93325f; } .asp--c em { background: #f6ecd6; color: #86652a; }
  .pd-asp small { color: #8b8fa6; }
  .pd-place { margin: 0 0 7mm; padding-left: 5mm; border-left: .8pt solid #d9c9a3; break-inside: avoid-page; }
  .pd-theme { margin: 0 0 8mm; padding: 6mm; border-radius: 3mm; background: #f8f5ee; border: .4pt solid #e6dcc3; break-inside: avoid; }
  .pd-triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin: 3mm 0; font-size: 9pt; }
  .pd-q { margin-top: 3mm !important; padding: 3mm 0 0; border-top: .3pt solid #e2d5b4; font: italic 400 11.5pt/1.45 var(--display); color: #22284a; }
  .pd-q span { display: block; margin-bottom: 1mm; font: 600 7pt/1 var(--sans); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: #9a7433; }
  .pd-qa { list-style: none; margin: 0; padding: 0; }
  .pd-qa li { margin: 0 0 7mm; padding-left: 5mm; border-left: .8pt solid #d9c9a3; break-inside: avoid-page; }
  .pd-qa .pd-q { margin: 0 0 2.5mm !important; padding: 0; border-top: 0; }
  .pd-qa__a { white-space: pre-line; }
  .pd-qa__tags { display: flex; flex-wrap: wrap; gap: 1.5mm; margin: 1mm 0 0 !important; }
  .pd-qa__tags span { padding: .6mm 2mm; border-radius: 2mm; background: #f6ecd6; color: #86652a; font: 600 6.5pt/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
  .pd-upsell { margin-top: 8mm; padding: 6mm; border-radius: 3mm; background: #0b1330; color: #e8edff; break-inside: avoid; }
  .pd-upsell h3 { color: #fff; }
  .pd-end { break-before: page; text-align: center; padding-top: 60mm; color: #5b6180; font-size: 9pt; }
  .pd-orn { font-size: 18pt; color: #c9a45e; }
  /* Vedic additions: the square chart (light on the cover, dark on paper), muted text, timeline, practice rows. */
  .pd-mark { width: 5mm; height: 5mm; vertical-align: -1.2mm; margin-right: 1.5mm; }
  .pd-muted { color: #8b8fa6; font-weight: 400; }
  .pd-sec--lead .pd-kicker { font: 600 7.5pt/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #9a7433; }
  .pd-fine { font-size: 8.5pt; color: #5b6180; }
  .pd-chart { margin: 6mm auto 2mm; width: 92mm; break-inside: avoid; text-align: center; }
  .pd-chart figcaption { margin-top: 2mm; font-size: 7.5pt; color: #5b6180; }
  .pd-chart--sm { width: 78mm; }
  .pd-chart .vchart { width: 100%; max-width: none; height: auto; }
  .pd-chart .vchart polygon { fill: transparent; }
  .pd-chart .vchart__house--first polygon { fill: #f6ecd6; }
  .pd-chart .vchart__frame, .pd-chart .vchart__lines { fill: none; stroke: #b8945a; stroke-width: 1.2; }
  .pd-chart .vchart text { fill: #11163a; font: 600 17px/1 var(--sans); }
  .pd-chart .vchart__sign { fill: #8b8fa6 !important; font-size: 13px !important; font-weight: 500 !important; }
  .pd-chart .vchart__lagna { fill: #9a7433; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
  /* On paper the grahas take darker tints of their screen colours. */
  .pd-chart .vchart__graha--sun { fill: #a5621c; } .pd-chart .vchart__graha--moon { fill: #3f4f86; } .pd-chart .vchart__graha--mars { fill: #ad3f2b; }
  .pd-chart .vchart__graha--mercury { fill: #2c7a5c; } .pd-chart .vchart__graha--jupiter { fill: #6a4fae; } .pd-chart .vchart__graha--venus { fill: #a63f69; }
  .pd-chart .vchart__graha--saturn { fill: #7a6230; } .pd-chart .vchart__graha--rahu, .pd-chart .vchart__graha--ketu { fill: #4a5778; }
  .pd-chart--cover .vchart__graha--sun, .pd-chart--cover .vchart__graha--mars { fill: #f5d0a0; } .pd-chart--cover .vchart__graha--moon, .pd-chart--cover .vchart__graha--venus { fill: #e9eefc; }
  .pd-chart--cover .vchart__graha--jupiter, .pd-chart--cover .vchart__graha--mercury { fill: #d8e7b8; } .pd-chart--cover .vchart__graha--saturn, .pd-chart--cover .vchart__graha--rahu, .pd-chart--cover .vchart__graha--ketu { fill: #b9c8eb; }
  .pd-chart--cover { width: 118mm; margin: 12mm 0 9mm; padding: 6mm; border-radius: 3mm; background: rgba(5, 8, 22, .55); box-shadow: 0 0 0 .5pt rgba(226,200,150,.4), 0 0 40mm rgba(90,130,255,.22); }
  .pd-chart--cover .vchart__house--first polygon { fill: rgba(226,200,150,.12); }
  .pd-chart--cover .vchart__frame, .pd-chart--cover .vchart__lines { stroke: #e2c896; stroke-width: 1.6; }
  .pd-chart--cover .vchart text { fill: #eef2ff; }
  .pd-chart--cover .vchart__sign { fill: #9fb0d8 !important; }
  .pd-chart--cover .vchart__lagna { fill: #e2c896; }
  .pd-cover__big span { margin: 0 3mm; }
  .pd-table td, .pd-table th { font-size: 8.4pt; }
  .pd-time { list-style: none; margin: 4mm 0 0; padding: 0; }
  .pd-time li { margin: 0 0 6mm; padding-left: 5mm; border-left: .8pt solid #d9c9a3; break-inside: avoid; }
  .pd-time li.is-now { border-left-color: #9a7433; border-left-width: 1.6pt; }
  .pd-time__when { margin: 0 0 1mm !important; font: 600 7.5pt/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #9a7433; }
  .pd-dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2mm 6mm; margin: 2mm 0 0; font-size: 9pt; }
  .pd-dl dt { font: 600 6.8pt/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #9a7433; }
  .pd-dl dd { margin: .5mm 0 0; }
  /* Devanagari: no spaced capitals (letter spacing breaks the conjuncts); a touch larger instead. */
  :root:lang(hi) .pd-kicker, :root:lang(hi) .pd-table thead th, :root:lang(hi) .pd-dl dt, :root:lang(hi) .pd-time__when,
  :root:lang(hi) .pd-cover__kicker, :root:lang(hi) .pd-cover__meta--sm, :root:lang(hi) .pd-cover__foot { letter-spacing: 0 !important; text-transform: none; font-size: 9pt; }
}