/* ============ TOKENS — dark-first (night sky + brass instrument) ============ */
:root{
  --bg:#0A0F17;
  --bg-2:#101824;
  --bg-3:#16202E;
  --line:#243043;
  --line-soft:#1A2534;
  --text:#EDE5D5;
  --dim:#96A1B2;
  --faint:#6A7587;
  --accent:#D9A94C;
  --on-accent:#0A0F17;
  --accent-2:#A9803099;
  --accent-wash:rgba(217,169,76,.10);
  --mark:#D4553F;
  --mark-wash:rgba(212,85,63,.12);
  --good:#78C295;
  --shadow:0 24px 60px -30px rgba(0,0,0,.85);
  --glow:0 0 60px -12px rgba(217,169,76,.28);

  --f-display:"Bodoni Moda","Didot","Times New Roman",serif;
  --f-body:"Karla","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono","SF Mono",Consolas,monospace;
  --f-deva:"Tiro Devanagari Sanskrit","Noto Serif Devanagari",serif;

  --measure:1140px;
  --pad:clamp(18px,4vw,40px);
  --sec:clamp(60px,8vw,108px);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F5F0E4;
    --bg-2:#FCFAF3;
    --bg-3:#EFE8D8;
    --line:#D9CFB8;
    --line-soft:#E6DECB;
    --text:#151E2C;
    --dim:#5A6474;
    --faint:#8A94A3;
    --accent:#96702A;
    --on-accent:#FCFAF3;
    --accent-2:#96702A66;
    --accent-wash:rgba(150,112,42,.10);
    --mark:#AC3A28;
    --mark-wash:rgba(172,58,40,.10);
    --good:#3F7F5C;
    --shadow:0 22px 50px -32px rgba(60,45,15,.45);
    --glow:0 0 50px -14px rgba(150,112,42,.22);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#F5F0E4; --bg-2:#FCFAF3; --bg-3:#EFE8D8;
  --line:#D9CFB8; --line-soft:#E6DECB;
  --text:#151E2C; --dim:#5A6474; --faint:#8A94A3;
  --accent:#96702A; --on-accent:#FCFAF3; --accent-2:#96702A66; --accent-wash:rgba(150,112,42,.10);
  --mark:#AC3A28; --mark-wash:rgba(172,58,40,.10);
  --good:#3F7F5C;
  --shadow:0 22px 50px -32px rgba(60,45,15,.45);
  --glow:0 0 50px -14px rgba(150,112,42,.22);
  color-scheme:light;
}

/* ============ BASE ============ */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:inherit; text-wrap:balance}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms!important; transition-duration:.01ms!important} }

.wrap{max-width:var(--measure); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:var(--sec)}
.rule{height:1px; background:var(--line-soft); border:0; margin:0}

/* eyebrow: small-caps label with a tick, an instrument-panel motif */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:18px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--accent); opacity:.7}
.eyebrow span.n{color:var(--faint)}

h2.display{
  font-family:var(--f-display); font-optical-sizing:auto;
  font-size:clamp(30px,4.4vw,50px); line-height:1.08; font-weight:500;
  letter-spacing:-.01em;
}
h3.display{font-family:var(--f-display); font-size:clamp(21px,2.4vw,27px); font-weight:500; line-height:1.2}
.lede{color:var(--dim); font-size:clamp(15px,1.5vw,17.5px); max-width:62ch; line-height:1.65}

/* ============ NAV ============ */
header.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{display:flex; align-items:center; gap:22px; height:64px}
.brand{display:flex; align-items:baseline; gap:9px; text-decoration:none; margin-right:auto}
.brand .mk{
  font-family:var(--f-display); font-weight:600; font-size:18px;
  letter-spacing:.11em; text-transform:uppercase; white-space:nowrap;
}
.brand .mk em{font-style:normal; font-weight:400; opacity:.72; letter-spacing:.10em}
.brand .deva{font-family:var(--f-deva); font-size:16px; color:var(--accent); line-height:1}
.nav-links{display:flex; gap:24px}
.nav-links a{
  text-decoration:none; font-size:13.5px; color:var(--dim);
  letter-spacing:.02em; transition:color .18s;
}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--accent)}
.nav-links a[aria-current="page"]::after{
  content:""; display:block; height:1px; background:var(--accent); margin-top:5px;
}
@media (max-width:980px){ .nav-links{display:none} }

/* hamburger + drawer, phones only */
.menu-btn{
  display:none; border:1px solid var(--line); background:transparent; color:var(--dim);
  width:34px; height:34px; border-radius:2px; cursor:pointer; place-items:center;
}
.menu-btn:hover{color:var(--accent); border-color:var(--accent-2)}
@media (max-width:980px){ .menu-btn{display:grid} }
.mobile-nav{border-top:1px solid var(--line-soft); background:var(--bg-2)}
.mobile-nav .wrap{display:grid; padding-block:8px}
.mobile-nav a{
  text-decoration:none; color:var(--dim); font-size:15px; padding:12px 0;
  border-bottom:1px solid var(--line-soft);
}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav a:hover{color:var(--accent)}

/* home page: one door per part of the practice */
.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:960px){ .doors{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .doors{grid-template-columns:minmax(0,1fr)} }
.door{
  display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit;
  border:1px solid var(--line); background:var(--bg-2); border-radius:3px; padding:24px;
  transition:border-color .18s, transform .18s, background .18s;
}
.door:hover{border-color:var(--accent); transform:translateY(-3px); background:var(--bg-3)}
.door-n{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; color:var(--faint);
}
.door-t{font-family:var(--f-display); font-size:25px; font-weight:500; line-height:1.15}
.door-sa{font-family:var(--f-deva); font-size:15px; color:var(--accent); margin-top:-4px}
.door p{font-size:13.5px; color:var(--dim); line-height:1.6; flex:1; margin-top:6px}
.door-go{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); padding-top:12px; border-top:1px solid var(--line-soft);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:2px; border:1px solid var(--accent);
  background:var(--accent); color:var(--on-accent); text-decoration:none;
  font-size:13.5px; font-weight:600; letter-spacing:.04em;
  cursor:pointer; transition:filter .18s, transform .18s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn.sm{padding:8px 14px; font-size:12.5px}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.theme-tgl{
  border:1px solid var(--line); background:transparent; color:var(--dim);
  width:34px; height:34px; border-radius:2px; cursor:pointer;
  display:grid; place-items:center; font-size:14px;
}
.theme-tgl:hover{color:var(--accent); border-color:var(--accent-2)}

/* ============ HERO ============ */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(1000px 520px at 78% 18%, var(--accent-wash), transparent 62%),
    radial-gradient(700px 420px at 8% 92%, var(--mark-wash), transparent 60%);
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px);
  align-items:center; padding-block:clamp(48px,7vw,84px);
}
@media (max-width:940px){ .hero-grid{grid-template-columns:1fr; gap:34px} }
h1.hero-h{
  font-family:var(--f-display); font-optical-sizing:auto;
  font-size:clamp(38px,6.2vw,72px); line-height:1.02; font-weight:500;
  letter-spacing:-.015em; margin-bottom:20px;
}
h1.hero-h em{font-style:italic; color:var(--accent); font-weight:400}
.hero-sub{color:var(--dim); font-size:clamp(15.5px,1.6vw,18px); max-width:50ch; line-height:1.62}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.credstrip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px 0; margin-top:34px;
  border-top:1px solid var(--line-soft); padding-top:18px;
}
.credstrip div{padding-left:20px; border-left:1px solid var(--line-soft)}
.credstrip div:nth-child(4n+1){padding-left:0; border-left:0}
@media (max-width:1080px){
  .credstrip{grid-template-columns:repeat(2,1fr)}
  .credstrip div:nth-child(4n+1){padding-left:20px; border-left:1px solid var(--line-soft)}
  .credstrip div:nth-child(odd){padding-left:0; border-left:0}
}
.credstrip b{
  display:block; font-family:var(--f-display); font-size:26px;
  font-weight:600; line-height:1.1; letter-spacing:-.01em;
}
.credstrip small{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint);
}

/* dial */
.dial-holder{position:relative; display:grid; place-items:center}
.dial-holder canvas{width:100%; max-width:520px; height:auto; filter:drop-shadow(var(--glow))}
.dial-cap{
  margin-top:14px; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  color:var(--faint); text-align:center;
}
.dial-cap b{color:var(--accent); font-weight:500}

/* ============ PANELS ============ */
.panel{
  border:1px solid var(--line); background:var(--bg-2);
  border-radius:3px; box-shadow:var(--shadow);
}
.panel-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-3), var(--bg-2));
}
.panel-head h4{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin-right:auto;
}
.panel-body{padding:clamp(16px,2.4vw,26px)}

/* forms */
.field{display:flex; flex-direction:column; gap:6px}
.field label{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint);
}
.field input, .field select, .field textarea{
  background:var(--bg); border:1px solid var(--line); border-radius:2px;
  padding:10px 12px; font-size:14.5px; width:100%;
  transition:border-color .16s, background .16s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--accent); outline:none; background:var(--bg-3);
}
.field .hint{font-size:11.5px; color:var(--faint)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:640px){ .grid-2,.grid-3{grid-template-columns:1fr} }
.combo{position:relative}
.combo-list{
  position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0;
  max-height:220px; overflow:auto; background:var(--bg-3);
  border:1px solid var(--accent-2); border-radius:2px; box-shadow:var(--shadow);
}
.combo-list button{
  display:block; width:100%; text-align:left; padding:8px 12px;
  background:none; border:0; cursor:pointer; font-size:13.5px; color:var(--text);
  border-bottom:1px solid var(--line-soft);
}
.combo-list button:hover, .combo-list button.on{background:var(--accent-wash); color:var(--accent)}
.combo-list small{color:var(--faint); font-family:var(--f-mono); font-size:10.5px; float:right}

/* tabs */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.tabs button{
  background:none; border:0; border-bottom:2px solid transparent;
  padding:10px 14px; cursor:pointer; color:var(--dim);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
}
.tabs button[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent)}
.tabs button:hover{color:var(--text)}

/* data table */
.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl th{
  text-align:left; font-family:var(--f-mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); font-weight:500;
  padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl td{padding:8px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top}
.tbl tbody tr:hover{background:var(--accent-wash)}
.tbl .num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

.pill{
  display:inline-block; padding:2px 8px; border-radius:2px; font-family:var(--f-mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line);
  color:var(--dim);
}
.pill.gold{border-color:var(--accent-2); color:var(--accent); background:var(--accent-wash)}
.pill.red{border-color:var(--mark); color:var(--mark); background:var(--mark-wash)}
.pill.green{border-color:var(--good); color:var(--good)}

.note{
  border-left:2px solid var(--accent); background:var(--accent-wash);
  padding:12px 16px; font-size:13.5px; color:var(--dim); border-radius:0 2px 2px 0;
}
.note.warn{border-left-color:var(--mark); background:var(--mark-wash)}
.note b{color:var(--text)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ── phones ─────────────────────────────────────────────── */
@media (max-width:560px){
  .nav-in{gap:10px; height:58px}
  .brand .mk{font-size:15px; letter-spacing:.05em}
  .brand .deva{font-size:13px}
  .btn{padding:10px 15px; font-size:12.5px}
  .btn.sm{padding:7px 11px; font-size:11.5px}
  .theme-tgl{width:30px; height:30px}
  h1.hero-h{font-size:clamp(30px,8.5vw,40px)}
  .credstrip{gap:16px 0}
  .credstrip b{font-size:22px}
  .panel-body{padding:16px}
  .item .body{padding:16px}
  .steps{gap:6px 0}
  .steps div{padding-right:10px; margin-right:10px; font-size:9.5px}
  .bigscore{font-size:52px}
}
/* very narrow phones: the nav CTA gives way — the hero has the same button */
@media (max-width:360px){
  .brand .mk{font-size:13.5px}
  .brand .mk em{display:none}
  .nav-in>.btn.sm{padding:6px 9px; font-size:11px}
}
#navCta{white-space:nowrap}
#navCta .narrow{display:none}
@media (max-width:560px){
  #navCta .wide{display:none}
  #navCta .narrow{display:inline}
}
/* nothing may push the page sideways on a phone */
.wrap, .panel, .item, .summary, .note{max-width:100%}
.panel, .item{overflow-wrap:anywhere}
/* grid/flex children default to min-width:auto and refuse to shrink below their
   content — the 14-day strip was forcing the whole booking panel open */
[data-step]>div, [data-step]>div>div, [data-s1], [data-s2],
.field, .daystrip, .slots, .panel-body>div, .tabs{min-width:0}
.daystrip{max-width:100%}


/* ============ CHART ============ */
.chart-wrap{display:grid; gap:16px}
.chart-svg{width:100%; max-width:380px; margin-inline:auto; display:block}
.chart-svg .frame{fill:none; stroke:var(--accent-2); stroke-width:1.2}
.chart-svg .frame.outer{stroke:var(--accent); stroke-width:1.6}
.chart-svg .cell-bg{fill:transparent}
.chart-svg .sign-no{
  font-family:var(--f-mono); font-size:11px; fill:var(--faint);
}
.chart-svg .pl{font-family:var(--f-mono); font-size:12.5px; fill:var(--text)}
.chart-svg .pl.retro{fill:var(--mark)}
.chart-svg .pl.asc{fill:var(--accent); font-weight:600}

/* ============ ABOUT ============ */
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:start}
@media (max-width:880px){ .about-grid{grid-template-columns:1fr} }
.portrait{
  position:relative; aspect-ratio:4/5; border:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--accent-wash), transparent 60%),
    var(--bg-2);
  display:grid; place-items:center; overflow:hidden; border-radius:3px;
}
.portrait canvas{position:absolute; inset:0; width:100%; height:100%}
.portrait .sig{
  position:relative; text-align:center; padding:24px;
}
.portrait .sig .deva{font-family:var(--f-deva); font-size:44px; color:var(--accent); line-height:1.1}
.portrait .sig .nm{
  font-family:var(--f-display); font-size:28px; font-weight:500; margin-top:10px; letter-spacing:.01em;
}
.portrait .sig .rl{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin-top:8px;
}
.creds{display:grid; gap:0; margin-top:26px; border-top:1px solid var(--line-soft)}
.creds div{
  display:grid; grid-template-columns:150px 1fr; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--line-soft); font-size:14.5px;
}
.creds dt, .creds div > span:first-child{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); padding-top:4px;
}
@media (max-width:560px){ .creds div{grid-template-columns:1fr; gap:4px} }

/* ============ SERVICES / BOOKING ============ */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){ .svc-grid{grid-template-columns:1fr} }
.svc{
  border:1px solid var(--line); background:var(--bg-2); border-radius:3px;
  padding:22px; display:flex; flex-direction:column; gap:12px;
  cursor:pointer; text-align:left; transition:border-color .18s, background .18s, transform .18s;
  position:relative;
}
.svc:hover{border-color:var(--accent-2); transform:translateY(-2px)}
.svc[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-wash)}
.svc[aria-pressed="true"]::after{
  content:"SELECTED"; position:absolute; top:-1px; right:-1px;
  background:var(--accent); color:var(--bg); font-family:var(--f-mono);
  font-size:9px; letter-spacing:.14em; padding:3px 8px;
}
.svc .t{font-family:var(--f-display); font-size:22px; font-weight:500; line-height:1.15}
.svc .pr{
  font-family:var(--f-mono); font-size:22px; color:var(--accent);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.svc .pr small{font-size:11px; color:var(--faint); letter-spacing:.1em}
.svc .d{font-size:13.5px; color:var(--dim); line-height:1.55; flex:1}
.svc ul{margin:0; padding-left:16px; font-size:13px; color:var(--dim); display:grid; gap:5px}
.svc ul li::marker{color:var(--accent)}

.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px}
.slot{
  border:1px solid var(--line); background:var(--bg); border-radius:2px;
  padding:9px 6px; font-family:var(--f-mono); font-size:12px; cursor:pointer;
  transition:border-color .16s, color .16s, background .16s; text-align:center;
}
.slot:hover:not([disabled]){border-color:var(--accent-2); color:var(--accent)}
.slot[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:600}
.slot[disabled]{opacity:.32; cursor:not-allowed; text-decoration:line-through}
.daystrip{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px}
.day{
  flex:0 0 auto; border:1px solid var(--line); background:var(--bg); border-radius:2px;
  padding:9px 13px; cursor:pointer; text-align:center; min-width:66px;
}
.day:hover{border-color:var(--accent-2)}
.day[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-wash)}
.day .dw{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; color:var(--faint); text-transform:uppercase}
.day .dd{font-family:var(--f-display); font-size:20px; font-weight:500; line-height:1.2}
.day .dm{font-family:var(--f-mono); font-size:9.5px; color:var(--faint); text-transform:uppercase}

.summary{border:1px solid var(--line); border-radius:3px; background:var(--bg-3)}
.summary .row{
  display:flex; justify-content:space-between; gap:16px; padding:11px 16px;
  border-bottom:1px solid var(--line-soft); font-size:14px;
}
.summary .row:last-child{border-bottom:0}
.summary .row span:first-child{color:var(--dim)}
.summary .row .num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.summary .total{background:var(--accent-wash); font-weight:600}
.summary .total .num{color:var(--accent); font-size:17px}

.steps{display:flex; gap:0; margin-bottom:22px; flex-wrap:wrap}
.steps div{
  display:flex; align-items:center; gap:8px; padding-right:16px; margin-right:16px;
  border-right:1px solid var(--line-soft); font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
.steps div:last-child{border-right:0}
.steps div b{
  width:20px; height:20px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); font-size:10px; color:var(--faint);
}
.steps div.on{color:var(--accent)}
.steps div.on b{border-color:var(--accent); background:var(--accent); color:var(--bg)}
.steps div.done b{border-color:var(--good); color:var(--good)}

.qrbox{
  display:grid; place-items:center; padding:14px; background:#fff; border-radius:3px;
  width:max-content; margin-inline:auto;
}
.qrbox canvas, .qrbox img{display:block}

/* pooja + gemstone cards */
.cat{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:980px){ .cat{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cat{grid-template-columns:1fr} }
.item{
  border:1px solid var(--line); background:var(--bg-2); border-radius:3px;
  display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .18s, transform .18s;
}
.item:hover{border-color:var(--accent-2); transform:translateY(-2px)}
.item .art{
  aspect-ratio:16/9; display:grid; place-items:center; border-bottom:1px solid var(--line-soft);
  background:radial-gradient(80% 120% at 50% 20%, var(--accent-wash), transparent 70%), var(--bg-3);
}
.item .art svg{width:118px; height:118px; display:block}
.item .art.photo{padding:0}
.item .art.photo img{width:100%; height:100%; object-fit:cover; display:block}
.item.plain .body{padding-top:24px}
.item.plain .nm{font-size:22px}
.item .body{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1}
.item .nm{font-family:var(--f-display); font-size:20px; font-weight:500; line-height:1.2}
.item .sa{
  font-family:var(--f-deva); font-size:14px; color:var(--accent); line-height:1.3; margin-top:-4px;
}
.item .d{font-size:13.5px; color:var(--dim); line-height:1.55; flex:1}
.item .meta{display:flex; flex-wrap:wrap; gap:6px}
.item .foot{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  padding-top:12px; border-top:1px solid var(--line-soft); flex-wrap:wrap;
}
.item .pr{
  font-family:var(--f-mono); font-size:19px; color:var(--accent);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.item .pr small{display:block; font-size:10px; color:var(--faint); letter-spacing:.1em}
.item dl{
  margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px;
  font-size:12px; border-top:1px solid var(--line-soft); padding-top:12px;
}
.item dt{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); padding-top:2px;
}
.item dd{margin:0; color:var(--dim)}
.varrow{display:flex; gap:8px; flex-wrap:wrap}
.varrow select{
  background:var(--bg); border:1px solid var(--line); border-radius:2px;
  padding:7px 9px; font-size:12.5px; font-family:var(--f-mono);
}
.gate{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  border:1px solid var(--accent-2); background:var(--accent-wash);
  border-radius:3px; padding:20px 22px; margin-top:26px;
}
.gate .ic{font-family:var(--f-deva); font-size:30px; color:var(--accent); line-height:1}
.gate p{font-size:14px; color:var(--dim); line-height:1.6; max-width:74ch}
.gate b{color:var(--text)}

/* score meter */
.meter{height:8px; background:var(--bg-3); border:1px solid var(--line); border-radius:2px; overflow:hidden}
.meter i{display:block; height:100%; background:var(--accent); transition:width .6s cubic-bezier(.2,.7,.2,1)}
.meter i.bad{background:var(--mark)}
.meter i.good{background:var(--good)}
.bigscore{
  display:flex; align-items:baseline; gap:10px; font-family:var(--f-display);
  font-size:clamp(48px,8vw,84px); font-weight:600; line-height:1; letter-spacing:-.02em;
}
.bigscore small{font-family:var(--f-mono); font-size:15px; color:var(--faint); letter-spacing:.06em}

/* faq */
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  cursor:pointer; padding:18px 0; list-style:none; display:flex; gap:16px;
  align-items:baseline; font-size:16.5px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; color:var(--accent); font-family:var(--f-mono); font-size:18px}
.faq details[open] summary::after{content:"−"}
.faq summary .q{
  font-family:var(--f-mono); font-size:11px; color:var(--faint); letter-spacing:.1em; flex:0 0 auto;
}
.faq p{padding:0 0 20px 42px; color:var(--dim); font-size:14.5px; max-width:70ch}
@media (max-width:560px){ .faq p{padding-left:0} }

/* testimonial */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){ .quotes{grid-template-columns:1fr} }
.quote{border:1px solid var(--line-soft); border-radius:3px; padding:22px; background:var(--bg-2); display:flex; flex-direction:column; gap:14px}
.quote p{font-family:var(--f-display); font-size:17.5px; line-height:1.45; font-style:italic; flex:1}
.quote .who{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint)}

/* footer */
footer.ft{border-top:1px solid var(--line-soft); background:var(--bg-2)}
.ft-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-block:52px}
@media (max-width:820px){ .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .ft-grid{grid-template-columns:minmax(0,1fr); gap:26px; padding-block:38px} }
.ft-grid h5{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--faint); margin:0 0 14px; font-weight:500;
}
.ft-grid>div{min-width:0}
.ft-grid a{display:block; text-decoration:none; color:var(--dim); font-size:14px; padding:4px 0; overflow-wrap:anywhere}
.ft-grid a:hover{color:var(--accent)}
.ft-bot{
  border-top:1px solid var(--line-soft); padding-block:20px; display:flex;
  gap:16px; flex-wrap:wrap; justify-content:space-between;
  font-size:12.5px; color:var(--faint);
}

/* ai reading */
.reading{font-size:15px; line-height:1.7; color:var(--text)}
.reading h4{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:20px 0 8px;
}
.reading h4:first-child{margin-top:0}
.reading p{color:var(--dim); margin-bottom:10px; max-width:70ch}
.reading strong{color:var(--text); font-weight:600}
.reading ul{margin:0 0 12px; padding-left:18px; color:var(--dim)}
.reading li{margin-bottom:5px}
.reading li::marker{color:var(--accent-2)}
.typing::after{content:"▍"; color:var(--accent); animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.fade-in{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}


      @media (max-width:1000px){ .kundli-layout{grid-template-columns:minmax(0,1fr)!important} }
      @media (max-width:760px){ .chart-cols{grid-template-columns:minmax(0,1fr)!important} }
    
@media (max-width:820px){ .paycols{grid-template-columns:minmax(0,1fr)!important} }
@media (max-width:820px){ #faq .wrap{grid-template-columns:minmax(0,1fr)!important} }
@media (max-width:820px){ .milancols{grid-template-columns:minmax(0,1fr)!important} }