/* Jyotara website: shared styles (Paper design). Colours come from weekday.css. */
:root{--ink:#0a0a0a;--paper:#fff;--mute:#6b6b6b;--line:#0a0a0a;--soft:#f3f3f1;--hl:transparent;--strong:#0a0a0a;--hover:#0a0a0a;--hover-ink:#fff;--hover-mute:#bbb;--rule2:#d9d9d6;
 --serif:"Sorts Mill Goudy","Noto Serif Devanagari",Georgia,serif;--sans:"Instrument Sans","Noto Sans Devanagari",-apple-system,"Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
/* full width: side margins grow with the screen up to 1760px; running text keeps its own measure below */
.wrap{max-width:1760px;margin:0 auto;padding:0 clamp(24px,4vw,80px)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.mute{color:var(--mute)}
hr{border:0;border-top:1px solid var(--line)}

/* header */
header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
/* in-page links (#faq, #result) land below the sticky header, not under it */
html{scroll-padding-top:80px}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img,.logo svg{height:24px;width:auto;display:block}
.right{display:flex;gap:16px;align-items:center}
.btn{display:inline-block;border:1px solid var(--ink);padding:10px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;background:var(--paper);color:var(--ink);cursor:pointer}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn:hover{background:var(--ink);color:var(--paper)}

/* hero */
.hero{text-align:center;padding:88px 0 56px}
.hero h1{font-weight:400;font-size:clamp(44px,7vw,88px);line-height:1.02;letter-spacing:-.01em}
.hero h1 em{font-style:italic}
.hero p{max-width:600px;margin:24px auto 0;font-size:21px}
.hero .cta{margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero p.mono{font-size:12px;margin-top:0}
.wheel-cap{text-align:center;margin-top:12px}

/* sections */
section{padding:72px 0;border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:32px;flex-wrap:wrap}
h2{font-weight:400;font-size:clamp(32px,4vw,48px);line-height:1.1}
h3{font-weight:500;font-size:22px}
.answer{font-size:clamp(24px,3vw,32px);line-height:1.3;max-width:860px}
.answer b{font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--strong)}

.limbs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:40px}
.limb{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 20px}
.limb .v{font-size:26px;margin-top:6px;line-height:1.15}
.limb .t{margin-top:4px}
.note{margin-top:20px;font-size:17px;max-width:760px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:56px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 0;border-bottom:1px solid var(--rule2);vertical-align:baseline}
th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;border-bottom:1px solid var(--line)}
td.diff{font-style:italic;color:var(--strong)}
td.diff::after{content:" ≠";font-style:normal}

.signs{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.sign{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 16px;text-decoration:none;display:block;min-height:150px}
.sign:hover{background:var(--hover);color:var(--hover-ink)}
.sign:hover .mute{color:var(--hover-mute)}
.sign .n{font-size:24px}
.sign .hi{font-size:16px}
.sign .m{margin-top:14px}
.tag{display:inline-block;background:var(--hl);border:1px solid currentColor;padding:1px 6px;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}

.tools{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line)}
.tool{padding:32px;border-right:1px solid var(--line)}
.tool:last-child{border-right:0}
.tool p{margin:8px 0 20px}
form .row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
select,input{font:inherit;font-size:17px;border:0;border-bottom:1px solid var(--ink);background:transparent;padding:8px 2px;color:var(--ink);flex:1;min-width:120px;border-radius:0}
select:focus,input:focus{outline:2px solid var(--ink);outline-offset:2px}
label{display:block}

.list{list-style:none}
.list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule2)}
.list li:first-child{border-top:1px solid var(--line)}

.birth{background:var(--soft)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{border:1px solid var(--line);padding:28px;background:var(--paper)}
.card p{margin:10px 0 20px;font-size:17px}

.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.proof .big{font-size:56px;line-height:1;color:var(--strong)}
.proof p{font-size:17px;margin-top:10px}

.price{text-align:center;background:var(--soft)}
.sky{margin:56px auto 0;max-width:560px}
.wheel{display:block;width:100%;overflow:visible}
.wheel .band{fill:var(--soft);stroke:var(--ink);stroke-width:1;transition:fill .4s}
.wheel .band.ms{fill:#dcdcd8}
html[data-tint] .wheel .band.ms{fill:var(--hl)}
.wheel .sign{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;fill:var(--ink)}
.wheel .track{fill:none;stroke:var(--ink);stroke-width:.5;stroke-dasharray:1.5 3;opacity:.45}
.wheel .axis{stroke:var(--ink);stroke-width:.5;stroke-dasharray:4 3;opacity:.4}
.wheel .earth .atmo{fill:none;stroke:var(--strong);stroke-width:1;opacity:.35;stroke-dasharray:2 2}
.wheel .earth .ocean{fill:var(--paper)}
html[data-tint] .wheel .earth .ocean{fill:var(--hl)}
.wheel .earth .land{fill:var(--ink);opacity:.82}
html[data-tint] .wheel .earth .land{fill:var(--strong);opacity:.9}
.wheel .earth .grid{fill:none;stroke:var(--ink);stroke-width:.4;opacity:.3}
.wheel .earth .equator{stroke:var(--ink);stroke-width:.5;opacity:.45}
.wheel .earth .pole{stroke:var(--ink);stroke-width:.8;stroke-linecap:round}
.wheel .earth .night{fill:var(--ink);opacity:.28}
.wheel .earth .rim{fill:none;stroke:var(--ink);stroke-width:1.2}
.wheel .moon-dark{fill:var(--ink)}
.wheel .tiny{font-family:var(--mono);font-size:7px;letter-spacing:1px;fill:var(--mute)}
.wheel .dot{fill:var(--ink);stroke:var(--ink);stroke-width:1}
.wheel .dot.retro{fill:var(--paper)}
.wheel .body-sun .dot{fill:var(--strong);stroke:var(--strong)}
.wheel .ray{stroke:var(--strong);stroke-width:1.2;stroke-linecap:round}
.wheel .body-moon .dot{fill:var(--paper);stroke-width:1.2}
.wheel .name{font-family:var(--serif);font-style:italic;font-size:13px;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.wheel .body-sun .name{font-size:15px;font-weight:500}
.sky-ctl{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.sky-ctl output{min-width:130px;text-align:center}
.ctl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:6px 10px;cursor:pointer}
.ctl:hover,.ctl[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.speeds .ctl{font-size:10px;padding:5px 8px}
.sky-range{width:100%;margin-top:14px;accent-color:var(--ink)}
.hero .sky .wheel-cap{margin-top:14px;line-height:1.6}
.wheel .house{fill:var(--paper);stroke:var(--ink);stroke-width:1}
.wheel .house.h1{fill:var(--ink)}
html[data-tint] .wheel .house.h1{fill:var(--strong);stroke:var(--strong)}
.wheel .hnum{font-family:var(--serif);font-size:17px;fill:var(--ink)}
.wheel .hword{font-family:var(--mono);font-size:6.5px;letter-spacing:.6px;fill:var(--mute)}
.wheel .house.h1 + .hnum,.wheel .house.h1 + .hnum + .hword{fill:var(--paper)}
.sky-houses-ctl{margin-top:28px;padding-top:20px;border-top:1px solid var(--rule2)}
.sky-houses-ctl .sky-ctl{margin-top:8px}
.ctl-sel{font-family:var(--mono);font-size:11px;letter-spacing:.04em;border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:6px 8px;border-radius:0}
.hero .sky-houses-ctl p.hint{font-size:15px;max-width:520px;margin:12px auto 0}
.sky-read{margin-top:20px;text-align:left}
.hero .sky-read p{font-size:17px;margin:0 0 8px;max-width:none}
#sky-houses{list-style:none;border-top:1px solid var(--ink)}
#sky-houses li{display:grid;grid-template-columns:100px 90px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule2);font-size:16px;align-items:baseline}
#sky-houses .g{font-style:italic}
#sky-houses .g i{font-style:normal;font-family:var(--mono);font-size:10px}
#sky-houses .h{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
#sky-houses .w{color:var(--mute)}
@media (max-width:520px){#sky-houses li{grid-template-columns:80px 1fr}#sky-houses .w{grid-column:1/-1;margin-top:-4px}}
.price .answer{margin:0 auto}
.wait{display:flex;max-width:480px;margin:28px auto 0;gap:8px}

details{border-bottom:1px solid var(--rule2);padding:18px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;font-size:22px;list-style:none}
summary::after{content:"+";float:right;font-family:var(--mono)}
details[open] summary::after{content:"−"}
details p{margin-top:10px;max-width:760px}

footer{border-top:1px solid var(--line);padding:56px 0 40px}
.fgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.fgrid ul{list-style:none;margin-top:12px}
.fgrid li{margin:6px 0;font-size:16px}
.fgrid a{text-decoration:none}
.fgrid a:hover{text-decoration:underline}
.legal{margin-top:48px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

@media (max-width:900px){
 nav{display:none}
 .limbs{grid-template-columns:1fr 1fr}
 .two,.tools,.cards{grid-template-columns:1fr}
 .tool{border-right:0;border-bottom:1px solid var(--line)}
 .signs{grid-template-columns:repeat(3,1fr)}
 .proof{grid-template-columns:1fr 1fr}
 .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
 body{font-size:18px}
 .wrap{padding:0 16px}
 .signs{grid-template-columns:1fr 1fr}
 .right .btn:not(.solid){display:none}
}

/* ---------- animations (shared by every page that shows one) ---------- */
canvas{display:block;width:100%}
#orrery{height:520px;border-radius:4px}
#ephem{height:440px;border:1px solid var(--ink)}

/* South Indian chart */
.k-wrap{max-width:560px;margin:0 auto}
#kundli{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);aspect-ratio:1;border:2px solid var(--ink);background:var(--paper)}
.k-cell{border:1px solid var(--ink);padding:6px 8px;transition:background .5s}
.k-cell{position:relative}
.k-cell.moon{background:var(--hl)}
.k-house{position:absolute;right:6px;top:5px;font-family:var(--mono);font-size:11px;font-weight:500}
.k-cell.lagna::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent calc(50% - .6px),var(--ink) 50%,transparent calc(50% + .6px));opacity:.5;pointer-events:none}
.k-ctl{margin-top:14px;font-size:16px}
.ctl-sel{font-family:var(--mono);font-size:11px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:5px 6px;border-radius:0}
.k-sign{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.k-sign i{font-style:normal;font-family:var(--serif);font-size:13px;text-transform:none;letter-spacing:0}
.k-mid{grid-row:2/4;grid-column:2/4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px;border:1px solid var(--ink)}
.k-date{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.k-tithi{font-size:26px;line-height:1.15;margin-top:8px}
.k-nak{font-style:italic;margin-top:4px}
.k-note{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-top:12px}
.k-chip{position:absolute;left:0;top:0;display:flex;gap:4px;align-items:baseline;font-family:var(--mono);font-size:12px;padding:2px 6px;border:1px solid var(--ink);background:var(--paper);will-change:transform}
#kundli.ready .k-chip{transition:transform .7s cubic-bezier(.6,0,.2,1)}
.k-chip b{font-weight:500}
.k-chip span{font-size:10px;color:var(--mute)}
.k-chip.sun{background:var(--strong);border-color:var(--strong);color:var(--paper)}
.k-chip.sun span{color:var(--paper);opacity:.8}
.k-chip.retro{border-style:dashed}

/* tithi dial */
.t-wrap{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:48px;align-items:center}
#tithi{width:100%;overflow:visible}
.t-seg{stroke:var(--ink);stroke-width:.8;transition:fill .3s}
.t-seg.shukla{fill:var(--paper)}
.t-seg.krishna{fill:var(--soft)}
.t-seg.on{fill:var(--hl)}
.t-num{font-family:var(--mono);font-size:9px;fill:var(--ink)}
.t-lab{font-family:var(--mono);font-size:9px;letter-spacing:1px;fill:var(--mute)}
.t-hand{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.t-tip{fill:var(--strong)}
.t-moon-dark{fill:var(--ink)}
.t-moon-lit{fill:#f4f1e8}
html[data-tint] .t-moon-lit{fill:var(--paper)}
.t-moon-rim{fill:none;stroke:var(--ink);stroke-width:1.5}
#tithi-read{font-size:26px;line-height:1.3}
#tithi-read b{font-weight:500}

.anim-clock{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.anim-clock output{min-width:140px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.anim-clock input{flex:1;min-width:160px;accent-color:var(--ink)}
.orrery-band{background:#03040a;color:#f2f2f0;border-top:0}
.orrery-band .mute{color:#a7a7b5}
.orrery-band .btn{background:transparent;color:#f2f2f0;border-color:#f2f2f0}
.orrery-band .btn.solid,.orrery-band .btn:hover{background:#f2f2f0;color:#03040a}
.orrery-band .ctl{background:transparent;color:#f2f2f0;border-color:#f2f2f0}
.orrery-band .ctl[aria-pressed=true],.orrery-band .ctl:hover{background:#f2f2f0;color:#03040a}

/* ---------- inner pages ---------- */
.crumbs{padding-top:18px}
.crumbs ol{list-style:none;display:flex;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.crumbs li+li::before{content:"/";margin-right:8px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.page-head{padding-top:40px;padding-bottom:48px}
.page-head h1{font-weight:400;font-size:clamp(40px,6vw,72px);line-height:1.04;letter-spacing:-.01em;max-width:960px}
.page-head h1 em{font-style:italic}
.page-head .lede{font-size:clamp(20px,2.2vw,24px);max-width:760px;margin-top:18px}
.page-head .meta{margin-top:18px}
.prose{max-width:720px}
.prose p{margin-top:14px}
.prose h2{margin-top:48px}
.prose h3{margin-top:28px}
.prose ul,.prose ol{margin:12px 0 0 22px}
.prose li{margin-top:6px}
.data{width:100%;border-collapse:collapse}
.data th,.data td{text-align:left;padding:11px 12px 11px 0;border-bottom:1px solid var(--rule2);vertical-align:baseline}
.data th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;border-bottom:1px solid var(--ink)}
.data td.num,.data th.num{font-family:var(--mono);font-size:14px;white-space:nowrap}
.data tr.now td{background:var(--soft)}
.data .tag{margin-top:0}
.table-scroll{overflow-x:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cell{border:1px solid var(--ink);padding:24px;background:var(--paper)}
.cell p{font-size:17px;margin-top:8px}
.kv{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.kv>div{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:16px 18px}
.kv .v{font-size:24px;line-height:1.15;margin-top:6px}
.note-box{border-left:3px solid var(--strong);padding:6px 0 6px 18px;max-width:760px;margin-top:24px;font-size:17px}
.cta-band{background:var(--soft);text-align:center}
.cta-band h2{max-width:760px;margin:0 auto}
.cta-band p{max-width:620px;margin:16px auto 0}
.cta-band .cta{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;border:1px solid var(--ink);padding:6px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.chip:hover,.chip[aria-current=page]{background:var(--ink);color:var(--paper)}
.form{display:grid;gap:14px;max-width:560px}
.form label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sr{position:absolute;left:-9999px}

/* weekday colour badge and the mock-only preview bar */
.day-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.day-badge i{width:12px;height:12px;border-radius:50%;background:var(--strong);border:1px solid var(--ink)}

/* phone frame for app screens */
.phone{width:240px;aspect-ratio:9/19;border:2px solid var(--ink);border-radius:32px;padding:14px;background:var(--paper);margin:0 auto;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 40px rgba(0,0,0,.08)}
.phone .notch{width:70px;height:6px;border-radius:3px;background:var(--ink);margin:0 auto 6px}
.phone .scr-h{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.phone .scr-t{font-size:20px;line-height:1.15}
.phone .scr-c{border:1px solid var(--ink);padding:10px;font-size:13px;line-height:1.35}
.phone .scr-c.hl{background:var(--hl)}

/* mobile navigation */
.menu{display:none}
@media (max-width:900px){
 .menu{display:block}
 header .bar{position:relative}
 .grid2,.grid3,.t-wrap{grid-template-columns:1fr}
 .grid4,.kv{grid-template-columns:1fr 1fr}
 .day-badge span{display:none}
 #orrery{height:420px}
}
@media (max-width:520px){.grid4{grid-template-columns:1fr}.form .row2{grid-template-columns:1fr}#ephem{height:360px}.k-chip{font-size:10px;padding:1px 4px}.k-chip span{display:none}}

/* header fit: nine items share one bar down to tablet width */
.right{gap:14px}
.btn,.day-badge{white-space:nowrap}
@media (max-width:1240px){.day-badge span{display:none}}
/* phones: the bar keeps the logo, today's colour dot, Hindi and the menu;
   "Get the app" moves into the menu */
@media (max-width:620px){
 .right{gap:10px}
 .right>.btn{display:none}
 .menu summary{padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){#kundli.ready .k-chip{transition:none}}
@media (max-width:620px){.hero{padding:56px 0 40px}}

/* home hero: the night orrery, full width */
.home-hero{padding:72px 0 56px;text-align:center}
.home-hero h1{font-weight:400;font-size:clamp(44px,7vw,88px);line-height:1.02;letter-spacing:-.01em}
.home-hero h1 em{font-style:italic}
.home-hero .lede{max-width:620px;margin:22px auto 0;font-size:21px;color:#d9d9e2}
.home-hero .cta{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.home-hero #orrery{height:560px;margin-top:40px}
.home-hero .anim-clock{justify-content:center;margin-top:14px}
.home-hero .anim-clock output{color:#f2f2f0}
.home-hero > .wrap > p.mono:last-child{margin-top:10px}
#your-houses .sky{max-width:560px;margin-left:auto;margin-right:auto}
#your-houses .sky-read{text-align:left}
#your-houses .sky-houses-ctl p.hint{font-size:15px;max-width:520px;margin:12px auto 0}
@media (max-width:620px){.home-hero{padding:48px 0 40px}.home-hero #orrery{height:380px}}
#your-houses .sky-read p{font-size:17px;margin:0 0 8px;max-width:none}
#your-houses .sky .wheel-cap{margin-top:14px;line-height:1.6}

/* full-bleed sky hero: the animation is the whole section, text floats on it */
.hero-sky{position:relative;overflow:hidden;padding:0;border-top:0;min-height:min(94vh,900px);display:flex;flex-direction:column}
.hero-sky canvas#orrery{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0}
.hero-sky .hero-copy{position:relative;z-index:1;text-align:center;padding:64px 24px 0;max-width:900px;margin:0 auto}
.hero-sky .hero-copy h1{font-weight:400;font-size:clamp(44px,7vw,92px);line-height:1.02;letter-spacing:-.01em}
.hero-sky .hero-copy h1 em{font-style:italic}
.hero-sky .hero-copy .lede{max-width:620px;margin:20px auto 0;font-size:21px}
.hero-sky .hero-copy .cta{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-sky .hero-foot{position:relative;z-index:1;margin-top:auto;padding:0 24px 22px;width:100%;max-width:1760px;margin-left:auto;margin-right:auto;padding-left:clamp(24px,4vw,80px);padding-right:clamp(24px,4vw,80px)}
.hero-sky .hero-foot .anim-clock{justify-content:center;margin:0}
.hero-sky .hero-foot p{text-align:center;margin-top:8px}
.hero-sky.night{background:#03040a;color:#f2f2f0}
.hero-sky.night .lede{color:#d9d9e2}
.hero-sky.night .mute{color:#a7a7b5}
.hero-sky.night .anim-clock output{color:#f2f2f0}
.hero-sky.day{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--ink)}
.hero-sky.day .anim-clock .ctl{background:rgba(255,255,255,.6)}
.hero-sky.day .anim-clock .ctl[aria-pressed=true],.hero-sky.day .anim-clock .ctl:hover{background:var(--ink)}
/* orrery hover/tap tip: a body's name, sign, degree, nakshatra and direction */
.orrery-tip{position:absolute;z-index:2;transform:translate(-50%,-100%);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;font-family:var(--mono);font-size:12px;letter-spacing:.02em;padding:6px 10px;border-radius:3px;background:var(--ink);color:var(--paper)}
.orrery-tip.show{opacity:1}
.hero-sky.night .orrery-tip{background:#f2f2f0;color:#03040a}
@media (max-width:620px){.hero-sky{min-height:820px}.hero-sky .hero-copy{padding-top:40px}.hero-sky .hero-copy .lede{font-size:18px}.orrery-tip{white-space:normal;max-width:220px}}
@media (max-width:1380px){.day-badge span{display:none}}
.hero-sky{min-height:min(100vh,940px)}

/* ---------- day clock ---------- */
.day-clock{display:grid;grid-template-columns:minmax(0,500px) 1fr;gap:40px;align-items:center;margin:0}
.dc-svg{width:100%;overflow:visible}
.dc-day{fill:var(--paper);stroke:var(--ink);stroke-width:.8}
.dc-night{fill:var(--ink);opacity:.1}
.dc-band{stroke:var(--paper);stroke-width:1}
.dc-rahu{fill:var(--ink)}
.dc-yama{fill:var(--ink);opacity:.45}
.dc-gulika{fill:var(--ink);opacity:.28}
.dc-abhijit{fill:var(--strong)}
.dc-blab{font-family:var(--mono);font-size:7px;letter-spacing:.4px;fill:var(--ink)}
.dc-blab.inv{fill:var(--paper)}
.dc-chog{stroke:var(--ink);stroke-width:.7}
.dc-chog.q-auspicious{fill:var(--hl)}
.dc-chog.q-neutral{fill:var(--paper)}
.dc-chog.q-inauspicious{fill:var(--soft)}
.dc-clab{font-family:var(--mono);font-size:7.5px;fill:var(--ink)}
.dc-clab.q-inauspicious{fill:var(--mute)}
.dc-hora{fill:var(--paper);stroke:var(--ink);stroke-width:.6}
.dc-hlab{font-family:var(--mono);font-size:8px;fill:var(--ink)}
.dc-tick{stroke:var(--ink);stroke-width:1.2}
.dc-mlab{font-family:var(--mono);font-size:8.5px;letter-spacing:.5px;fill:var(--ink)}
.dc-hand{stroke:var(--ink);stroke-width:1.6}
.dc-tip{fill:var(--strong);stroke:var(--ink)}
.dc-time{font-family:var(--serif);font-size:26px;fill:var(--ink)}
.dc-sub{font-family:var(--mono);font-size:8.5px;letter-spacing:.8px;text-transform:uppercase;fill:var(--mute)}
.dc-read{list-style:none;border-top:1px solid var(--ink);margin-top:12px}
.dc-read li{padding:10px 0;border-bottom:1px solid var(--rule2);font-size:18px}
.dc-read li span{display:inline-block;min-width:118px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dc-read b{font-weight:500}
.dc-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.dc-legend i{display:inline-block;width:12px;height:12px;border:1px solid var(--ink);margin-right:6px;vertical-align:-2px}
.dc-ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}
.dc-ctl input{flex:1;min-width:140px;accent-color:var(--ink)}

/* ---------- rising sign clock ---------- */
.lagna-clock{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:40px;align-items:center;margin:0}
.lc-svg{width:100%;overflow:visible}
.lc-skyhalf{fill:var(--paper)}
.lc-ground{fill:var(--soft)}
.lc-sign{fill:var(--paper);stroke:var(--ink);stroke-width:.8;transition:fill .3s}
.lc-sign.on{fill:var(--hl)}
.lc-slab{font-family:var(--mono);font-size:10px;letter-spacing:.5px;fill:var(--ink)}
.lc-sun circle{fill:var(--strong)}
.lc-sun line{stroke:var(--strong);stroke-width:1.4;stroke-linecap:round}
.lc-horizon{stroke:var(--ink);stroke-width:1.4}
.lc-earth{fill:var(--paper);stroke:var(--ink);stroke-width:1.2}
.lc-mid{font-family:var(--mono);font-size:8px;letter-spacing:1px;fill:var(--mute)}
.lc-time{font-family:var(--serif);font-size:18px;fill:var(--ink)}
.lc-dir{font-family:var(--mono);font-size:9px;letter-spacing:1px;fill:var(--ink)}
.lc-read{font-size:24px;line-height:1.3}
.lc-read b{font-weight:500}
.lc-strip{position:relative;display:flex;margin-top:18px;border:1px solid var(--ink);height:34px}
.lc-strip span{border-right:1px solid var(--ink);font-family:var(--mono);font-size:9px;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;background:var(--paper)}
.lc-strip span:nth-child(even){background:var(--soft)}
.lc-strip span:last-of-type{border-right:0}
.lc-strip i{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--strong);transform:translateX(-1px)}
.lc-ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--mute);margin-top:4px}
.lc-pair{margin-top:18px;font-size:17px;max-width:560px}
.lc-pair b{font-weight:500}

/* ---------- North Indian chart and the North / South switch ---------- */
.chart-switch{display:flex;justify-content:center;gap:8px;margin:0 auto 16px;max-width:560px}
.n-chart{display:block;width:100%;max-width:560px;margin:0 auto;overflow:visible}
.n-frame{fill:none;stroke:var(--ink);stroke-width:2}
.n-house{fill:var(--paper);stroke:var(--ink);stroke-width:1;transition:fill .5s}
.n-house.h1{fill:var(--soft)}
.n-house.moon{fill:var(--hl)}
.n-num{font-family:var(--mono);font-size:11px;fill:var(--mute)}
.n-pl{font-family:var(--mono);font-size:12px;fill:var(--ink)}
.n-chart.ready .n-pl{transition:transform .7s cubic-bezier(.6,0,.2,1)}
.n-pl .n-deg{font-size:9px;fill:var(--mute)}
.n-pl.sun .n-ab{fill:var(--strong);font-weight:600}
.n-pl.retro .n-ab{text-decoration:underline dotted}
.n-cap{text-align:center;margin-top:10px}
@media (prefers-reduced-motion:reduce){.n-chart.ready .n-pl{transition:none}}
@media (max-width:900px){.day-clock,.lagna-clock{grid-template-columns:1fr}}

/* ---------- Moon through the 27 nakshatras ---------- */
.nak-wrap{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:40px;align-items:center}
#nak-ring{width:100%;overflow:visible}
.nr-sign{fill:var(--soft);stroke:var(--ink);stroke-width:.8}
.nr-slab{font-family:var(--mono);font-size:9px;letter-spacing:.5px;fill:var(--ink)}
.nr-nak{fill:var(--paper);stroke:var(--ink);stroke-width:.7;transition:fill .3s}
.nr-nak.on{fill:var(--hl)}
.nr-nak.mine{fill:var(--soft);stroke-width:1.6}
.nr-nak.mine.on{fill:var(--hl)}
.nr-num{font-family:var(--mono);font-size:9px;fill:var(--mute)}
.nr-num.mine{fill:var(--ink);font-weight:600}
.nr-pada{stroke:var(--ink);stroke-width:.5;opacity:.5}
.nr-moon{fill:var(--paper);stroke:var(--ink);stroke-width:1.6}
.nr-k{font-family:var(--mono);font-size:9px;letter-spacing:1px;fill:var(--mute)}
.nr-name{font-family:var(--serif);font-size:26px;fill:var(--ink)}
.nr-sub{font-family:var(--mono);font-size:10px;letter-spacing:.5px;fill:var(--ink)}
#nak-read{font-size:22px;line-height:1.35}
#nak-read b{font-weight:500}

/* ---------- retrograde explainer ---------- */
.retro{display:grid;grid-template-columns:minmax(0,480px) 1fr;gap:40px;align-items:center;margin:0}
.rt-svg{width:100%;overflow:visible}
.rt-zod{fill:none;stroke:var(--ink);stroke-width:1}
.rt-tick{stroke:var(--ink);stroke-width:.8}
.rt-sign{font-family:var(--mono);font-size:9px;fill:var(--ink)}
.rt-orbit{fill:none;stroke:var(--ink);stroke-width:.6;stroke-dasharray:2 4;opacity:.6}
.rt-sun circle{fill:var(--strong)}
.rt-sun line{stroke:var(--strong);stroke-width:1.6;stroke-linecap:round}
.rt-earth{fill:var(--hl);stroke:var(--ink);stroke-width:1.4}
.rt-mars{fill:var(--ink)}
.rt-seen{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.rt-seen.back{fill:var(--strong);stroke:var(--strong)}
.rt-sight{stroke:var(--strong);stroke-width:1.2;stroke-dasharray:4 3}
.rt-trail circle{fill:var(--ink)}
.rt-lab{font-family:var(--mono);font-size:8.5px;letter-spacing:.8px;fill:var(--ink)}
.rt-note{font-family:var(--mono);font-size:8.5px;fill:var(--mute)}
.rt-read{list-style:none;border-top:1px solid var(--ink)}
.rt-read li{padding:10px 0;border-bottom:1px solid var(--rule2);font-size:18px}
.rt-read li span{display:inline-block;min-width:110px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.rt-read b{font-weight:500}

/* ---------- why the festival day moves ---------- */
.fest-move{margin:0}
.fm-svg{width:100%;display:block}
.fm-tithi{fill:var(--hl);opacity:.7}
.fm-tlab{font-family:var(--mono);font-size:12px;letter-spacing:.5px;fill:var(--ink)}
.fm-rowlab{font-family:var(--serif);font-size:18px;fill:var(--ink)}
.fm-day{fill:var(--paper);stroke:var(--ink);stroke-width:.8;fill-opacity:.55}
.fm-day.alt{fill:var(--soft)}
.fm-dlab{font-family:var(--mono);font-size:11px;fill:var(--mute)}
.fm-ev line{stroke:var(--ink);stroke-width:1}
.fm-ev circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.fm-ev text{font-family:var(--mono);font-size:10px;fill:var(--ink)}
.fm-ev.in circle{stroke-width:2}
.fm-ev.in.lit circle{fill:var(--strong);stroke:var(--strong)}
.fm-ev.in.lit text{font-weight:600}
.fm-head{stroke:var(--strong);stroke-width:2}
.fm-read{list-style:none;border-top:1px solid var(--ink);margin-top:14px}
.fm-read li{padding:10px 0;border-bottom:1px solid var(--rule2);font-size:18px}
.fm-read li span{display:inline-block;min-width:110px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.fm-read b{font-weight:500}
.fm-ctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.fm-chart{overflow-x:auto}
.fm-chart svg{min-width:640px}
@media (max-width:900px){.nak-wrap,.retro{grid-template-columns:1fr}}
.fm-win{fill:var(--ink);fill-opacity:.2}

/* Hindi pages: the mono label font spaces Devanagari letters apart, so Hindi labels use the Devanagari face */
html[lang=hi] .mono,html[lang=hi] .btn,html[lang=hi] .ctl,html[lang=hi] .chip,html[lang=hi] .anim-clock output{font-family:"Noto Serif Devanagari","IBM Plex Mono",ui-monospace,monospace;letter-spacing:0;text-transform:none}
.place-line{margin-top:16px;color:var(--mute)}
.place-line b{color:var(--ink);font-weight:500}
.link-button{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;letter-spacing:inherit;text-transform:inherit}

/* ------------------------------------------------------------ main menu
 * Logo on the left, everything else on the right, as Co-Star does. Five
 * groups open as dropdowns on wide screens (hover, focus or a tap, nav.js);
 * below 900px the same groups fill the Menu drawer (Navigation class).
 */
header .bar{position:relative}
.right{display:flex;align-items:center;gap:18px}
/* the groups fill the bar's height, so a dropdown starts exactly below the header line */
nav,.nav-groups,.nav-group{align-self:stretch}
.nav-groups{display:flex;align-items:stretch;gap:6px;list-style:none;height:64px}
.nav-group{position:relative;display:flex;align-items:center}
.nav-top{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:10px 8px;color:var(--ink);cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.nav-top::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.nav-top:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.nav-sub{position:absolute;top:calc(100% + 1px);left:0;min-width:220px;list-style:none;background:var(--paper);border:0;box-shadow:none;padding:6px 0 10px;z-index:30;visibility:hidden;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility 0s .15s}
.nav-sub a{display:block;padding:6px 8px;text-decoration:none;font-size:15px;white-space:nowrap}
.nav-sub a:hover,.nav-sub a:focus-visible{text-decoration:underline;text-underline-offset:4px;outline:0}
.nav-sub a[aria-current=page]{font-weight:600}
/* an invisible bridge over the header line, so the mouse can move down without the menu closing */
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px}
.nav-top[aria-expanded=true]+.nav-sub,.nav-group:focus-within .nav-sub{visibility:visible;opacity:1;transform:none;transition:opacity .15s,transform .15s}
.nav-top[aria-expanded=true]::after,.nav-group:focus-within .nav-top::after{transform:translateY(1px) rotate(225deg)}
@media (hover:hover){
 .nav-group:hover .nav-sub{visibility:visible;opacity:1;transform:none;transition:opacity .15s,transform .15s}
 .nav-group:hover .nav-top::after{transform:translateY(1px) rotate(225deg)}
}

/* the phone drawer: the same groups, two columns */
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--ink);padding:8px 12px}
.menu summary::-webkit-details-marker{display:none}
/* the menu is a <details> too; keep the FAQ question styling (rules, padding, +/−) off it */
header .menu{border:0;padding:0}
header .menu summary::after{content:none}
.menu .drawer{position:absolute;left:0;right:0;top:64px;max-height:calc(100vh - 64px);overflow-y:auto;background:var(--paper);border-bottom:1px solid var(--line);padding:20px 24px 28px;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.menu .drawer ul{list-style:none;margin-top:8px;display:grid;gap:8px}
.menu .drawer a{text-decoration:none;font-size:16px}
.menu .drawer a[aria-current=page]{font-weight:600}
.menu .drawer>p{grid-column:1/-1}
@media (max-width:900px){
 nav{display:none}
 .menu{display:block}
}
@media (max-width:420px){.menu .drawer{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.nav-sub,.nav-top::after{transition:none}}

/* long text stays around 70 characters a line on wide screens */
.page-head .lede,.answer,.note,.note-box,.reading p,.wrap.prose p,.wrap.prose li,section .wrap>p{max-width:760px}
@media (max-width:900px){.wrap{padding:0 16px}}

/* app screenshots (Brand::getAppScreenshots): home and the app page */
.shots{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 20px;margin-top:28px}
.shots figure{margin:0;width:clamp(150px,42vw,240px);text-align:center}
.shots img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 28px rgba(40,30,20,.16))}
.shots figcaption{margin-top:6px}

/* case studies: verdict pills (semantic colours, not the day tint), tally, rows */
.pill{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.pill.match{color:#2f6b43;background:#e3f0e6}
.pill.partial{color:#8a6410;background:#f6eccd}
.pill.miss{color:#a3352b;background:#f6dcd8}
.cs-tally{display:flex;gap:28px;margin-top:24px;flex-wrap:wrap}
.cs-tally div{display:flex;align-items:center;gap:10px}
.cs-n{font-family:var(--serif);font-size:40px;font-weight:400;line-height:1}
.cs-birth{display:grid;gap:10px;margin-top:28px;max-width:860px}
.cs-birth div{display:grid;grid-template-columns:160px 1fr;gap:12px}
.cs-birth dd{margin:0}
.cs-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:24px}
.cs-row{border:1px solid var(--line);padding:20px;display:grid;gap:12px;align-content:start;background:var(--paper)}
.cs-row blockquote{margin:0;font-family:var(--serif);font-size:19px;line-height:1.45;border-left:2px solid var(--strong);padding-left:14px}
.cs-verdict{font-size:15px}
.cs-table td{vertical-align:top;font-size:14.5px}
.cs-table td:first-child{white-space:nowrap}
.cs-why{display:block;margin-top:6px;color:var(--mute);font-size:13.5px;max-width:300px}
/* the random-day control beside each timing verdict (case studies) */
.cs-control{display:block;margin-top:6px;font-size:11.5px;letter-spacing:.02em;color:var(--mute)}
.cs-control-note{max-width:620px;margin-top:16px;font-size:15px;line-height:1.5;color:var(--mute)}
.cs-control-note a{color:inherit}
.cs-control-box{margin-top:36px;max-width:820px;border-left:3px solid var(--strong);padding:4px 0 4px 20px}
.cs-control-box p{margin-top:10px;font-size:17px}
.table-scroll{overflow-x:auto;margin-top:20px}
.card-link{text-decoration:none;display:block}
.card-link:hover h3{text-decoration:underline}
@media (max-width:560px){.cs-birth div{grid-template-columns:1fr;gap:2px}.cs-rows{grid-template-columns:1fr}}

/* case studies: whole rows of cards (6 cards in threes, 8 in fours), private life marked */
.cs-rows.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-rows.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.cs-rows.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.cs-rows.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cs-rows.cols-3,.cs-rows.cols-4{grid-template-columns:1fr}}
.cs-row.private{background:var(--soft)}
.cs-tag{font-size:10px}

/* North Indian chart (ChartSvg): lines and type from the theme tokens */
.chart-svg{display:block;width:100%;height:auto;overflow:visible}
.chart-svg .house{fill:var(--paper);stroke:var(--ink);stroke-width:1.2}
.chart-svg .house.first{fill:var(--hl)}
.chart-svg .frame{fill:none;stroke:var(--ink);stroke-width:2}
.chart-svg .num{fill:var(--mute);font-family:var(--mono)}
.chart-svg .pl{fill:var(--ink);font-family:var(--sans);font-weight:500}
.chart-svg .pl.strong{fill:var(--strong);font-weight:600}
.chart-svg .asc{fill:var(--strong);font-family:var(--mono);font-weight:500;letter-spacing:.04em}
.chart-svg.small .house{stroke-width:2}
.chart-svg.small .frame{stroke-width:3}

/* case study charts: beside the heading on a person's page, beside the name on the list */
.cs-head{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:40px;align-items:start}
.cs-chart{margin:0}
.cs-chart figcaption{margin-top:8px;text-align:center}
.cs-head-text h1{margin-top:0}
.cs-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cs-card{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;align-items:center}
.cs-card-chart{width:170px}
.cs-card-facts{font-size:14px;color:var(--mute);margin:6px 0 10px}
@media (max-width:1180px){.cs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.cs-head{grid-template-columns:1fr}.cs-chart{max-width:320px}.cs-cards{grid-template-columns:1fr}}
@media (max-width:420px){.cs-card{grid-template-columns:130px minmax(0,1fr)}.cs-card-chart{width:130px}}

/* famous chart match: the share line and the likeness bars */
.share-line{margin-top:22px;padding:16px;border:1px solid var(--line);background:var(--soft);display:grid;gap:12px;max-width:640px}
.share-line p{margin:0;font-size:15px}
.match-table td{vertical-align:top}
.match-pct{font-family:var(--serif);font-size:20px;font-weight:400}
.match-bar{display:block;width:90px;height:4px;background:var(--rule2);margin:6px 0 0 auto}
.match-bar i{display:block;height:100%;background:var(--strong)}

/* share button: native share sheet when there is one, plain links otherwise */
.share{display:grid;gap:10px;margin-top:22px}
.share-links{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.share-links a,.share-links button{display:inline-block;padding:7px 12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.share-links a:hover,.share-links button:hover{border-color:var(--ink)}
.share.has-native .share-label{display:none}
.share.has-native .share-links{opacity:.85}
.share-native{justify-self:start}

/* saturn return: the running or coming return stands out */
.return-next td{background:var(--hl);font-weight:500}

/* lucky card (lucky-card.php): the card itself, drawn again as a picture by lucky-card.js */
.lucky-layout{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;align-items:start}
.lucky-card{background:#0d0d10;color:#f4f1ea;padding:32px 30px;border-radius:14px;display:grid;gap:18px}
.lucky-brand{margin:0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#b9b4a8}
.lucky-name{margin:0;font-family:var(--serif);font-size:34px;line-height:1.1}
.lucky-card dl{margin:0;display:grid;gap:14px}
.lucky-card dl div{border-top:1px solid #34333a;padding-top:12px}
.lucky-card dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b9b4a8}
.lucky-card dd{margin:4px 0 0;font-size:18px}
.lucky-colors{display:flex;flex-wrap:wrap;gap:6px 16px}
.lucky-colors span{display:inline-flex;align-items:center;gap:7px}
.lucky-colors i{display:inline-block;width:16px;height:16px;border-radius:50%;border:1px solid #6b6a70}
.lucky-numbers{font-family:var(--serif);font-size:30px!important}
.lucky-foot{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8d897f}
@media(max-width:820px){.lucky-layout{grid-template-columns:1fr;gap:28px}}

/* best-friend match (best-friend-match.php) */
.friend-houses{margin:14px 0 0;display:grid;gap:0}
.friend-houses div{border-top:1px solid var(--rule2);padding:14px 0}
.friend-houses dt{font-family:var(--serif);font-size:19px}
.friend-houses dt .mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-right:6px}
.friend-houses dd{margin:6px 0 0;font-size:15px;line-height:1.55}
.friend-houses dd p{margin:0 0 8px}
.friend-houses dd p:last-child{margin-bottom:0}
.friend-sum{margin:10px 0 0;font-size:16px;line-height:1.55;padding:12px 14px;background:var(--soft)}

/* shown when Hindi is chosen on a page with no Hindi version yet (header.php) */
.lang-note{background:var(--soft);border-bottom:1px solid var(--rule2)}
.lang-note p{margin:0;padding:10px 0;font-size:14px;line-height:1.5}
.lang-note a{color:inherit}

/* fun tools hub (fun-tools.php) */
.fun-grid{row-gap:24px}
.fun-card{display:grid;gap:10px;align-content:start;text-decoration:none;color:inherit;border-color:var(--rule2)}
.fun-card:hover,.fun-card:focus-visible{border-color:var(--ink);outline:0}
.fun-card h2{font-size:24px;line-height:1.2}
.fun-card p{margin:0;font-size:15px;line-height:1.55}
.fun-go{margin-top:6px;color:var(--strong)}
@media(max-width:900px){.fun-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.fun-grid{grid-template-columns:1fr}}

/* saved birth details (assets/js/saved-people.js) */
.saved-people{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:14px;padding:10px 12px;background:var(--soft);border:1px solid var(--rule2)}
.saved-people label{margin:0}
.saved-people-select{width:auto;min-width:200px;flex:1}
.saved-people-note{flex-basis:100%;margin:0}
.saved-people-remember{margin-top:8px}
.saved-people-forget{display:block;margin:4px 0 12px;padding:0;background:none;border:0;color:var(--mute);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;cursor:pointer}