/* AstroDivy — iOS 27-style Liquid Glass, page transitions and the phone layout (19 Oct 2026).
   Vandan: "make Mobile UI PERFECT, ADD CARDS TRANSITION ADD MORE LIKE GLASSY UI LIKE IOS27".
   Loaded last. Four parts:
   1. Liquid Glass: a bright specular rim on glass surfaces (light catching the edge), capsule controls.
   2. Motion: pages slide in (View Transitions), the pandit photo flies from the card into the profile, cards press in.
   3. New pages: pandit profile, My chats, rating, legal pages, pay-from-wallet.
   4. Phones: floating capsule tab bar that shrinks on scroll, bottom sheets with a grabber, swipeable plan cards,
      compact pandit cards, safe areas, 44px tap targets.
   Live blur stays off for long lists and on phones (it stutters over the moving galaxy); the rim and tint carry the look. */

:root {
  --lg-rim: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08) 32%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .06) 75%, rgba(255, 255, 255, .32));
  --lg-spec: inset 0 1px 0 rgba(255, 255, 255, .28), inset 1px 0 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(255, 255, 255, .05);
  --spring: cubic-bezier(.32, 1.25, .5, 1);
  --ease-ios: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 1. Liquid Glass rim ---------- */
/* (the tab bar, the account menu and the phone's sticky bar are already fixed / absolute, which also anchors the rim) */
.pr-hero, .pr-block, .wl-bal, .ch-list > li, .lg-sec, .rt-box, .pay-wallet { position: relative; isolation: isolate; }
.tabbar, .acct-menu, .pr-sticky { isolation: isolate; }
.tabbar::after, .pr-hero::after, .wl-bal::after, .ch-list > li::after, .rt-box::after, .pay-wallet::after, .pr-sticky::after, .acct-menu::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: var(--lg-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.pc2, .plan-card, .prob, .wl-packs button { box-shadow: var(--lg-spec), 0 14px 34px -22px rgba(0, 0, 0, .8); }
.plan-card.is-best { box-shadow: var(--lg-spec), 0 0 0 1px rgba(242, 199, 92, .22), 0 30px 70px -30px rgba(242, 180, 60, .55); }

/* ---------- 2. Motion ---------- */
/* cards press in when tapped, and spring back */
.pc2, .plan-card, .prob, .wl-packs button, .pr-sim a, .ch-list > li, .pr-chips button, .choice-btn, .safe-grid li, .shop-page li {
  transition: transform .35s var(--spring), box-shadow .25s ease, border-color .25s ease; }
.pc2:active, .plan-card:active, .prob:active, .wl-packs button:active, .pr-sim a:active, .ch-list > li:active, .pr-chips button:active, .choice-btn:active, .shop-page li:active {
  transform: scale(.97); transition-duration: .12s; }
.btn-main, .btn-line, .pc2-btn, .pc2-read, .pc2-fav, .tabbar a { transition: transform .3s var(--spring), background .2s, color .2s, box-shadow .2s; }
.btn-main:active, .btn-line:active, .pc2-btn:active, .pc2-read:active, .pc2-fav:active, .tabbar a:active { transform: scale(.94); transition-duration: .1s; }

/* page changes: the new page slides in from the side it comes from; header and tab bar stay still */
.top { view-transition-name: top-bar; }
.tabbar { view-transition-name: tab-bar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .42s; animation-timing-function: var(--ease-ios); }
html[data-nav="forward"]::view-transition-old(root) { animation-name: vtOutLeft; }
html[data-nav="forward"]::view-transition-new(root) { animation-name: vtInRight; }
html[data-nav="back"]::view-transition-old(root) { animation-name: vtOutRight; }
html[data-nav="back"]::view-transition-new(root) { animation-name: vtInLeft; }
@keyframes vtInRight { from { opacity: 0; transform: translateX(56px); } }
@keyframes vtInLeft { from { opacity: 0; transform: translateX(-56px); } }
@keyframes vtOutLeft { to { opacity: 0; transform: translateX(-28px) scale(.985); } }
@keyframes vtOutRight { to { opacity: 0; transform: translateX(28px) scale(.985); } }
/* the pandit photo flies from the card into the profile */
::view-transition-group(pandit-photo) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, 1.15, .4, 1); }
::view-transition-old(pandit-photo), ::view-transition-new(pandit-photo) { height: 100%; object-fit: cover; border-radius: 28px; overflow: hidden; }
::view-transition-group(top-bar), ::view-transition-group(tab-bar) { animation: none; }
::view-transition-old(top-bar), ::view-transition-old(tab-bar) { display: none; }
::view-transition-new(top-bar), ::view-transition-new(tab-bar) { animation: none; }

/* sections on the new pages rise in one after another */
.pr-hero, .pr-block, .ch-list > li, .lg-sec { animation: riseIn .55s var(--ease-ios) both; }
.pr-block:nth-of-type(1) { animation-delay: .06s; } .pr-block:nth-of-type(2) { animation-delay: .1s; } .pr-block:nth-of-type(3) { animation-delay: .14s; }
.pr-block:nth-of-type(4) { animation-delay: .18s; } .pr-block:nth-of-type(5) { animation-delay: .22s; }
.ch-list > li:nth-child(2) { animation-delay: .05s; } .ch-list > li:nth-child(3) { animation-delay: .1s; } .ch-list > li:nth-child(n+4) { animation-delay: .14s; }
.lg-sec { animation-delay: calc(min(var(--i, 0), 8) * 40ms); }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .pr-hero, .pr-block, .ch-list > li, .lg-sec { animation: none; }
  .pc2:active, .plan-card:active, .prob:active, .btn-main:active, .btn-line:active { transform: none; }
}

/* ---------- 3. New pages ---------- */
.profile-page, .chats-page, .legal-page { width: calc(100% - 2 * clamp(16px, 4vw, 48px)); max-width: 980px; margin: 0 auto; padding: clamp(18px, 3vw, 36px) 0 64px; }
.chats-page > h2 { margin: 6px 0 6px; }

/* heart on the pandit card */
.pc2-fav { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  color: rgba(230, 234, 255, .75); background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)), rgba(20, 22, 50, .55);
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
.pc2-fav svg, .pr-fav svg, .pf-fav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.pc2-fav[aria-pressed="true"], .pr-fav[aria-pressed="true"], .pf-fav[aria-pressed="true"] { color: #FF5C8A; }
.pc2-fav[aria-pressed="true"] svg, .pr-fav[aria-pressed="true"] svg, .pf-fav[aria-pressed="true"] svg { fill: currentColor; animation: heartPop .45s var(--spring); }
@keyframes heartPop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.pc2 h3 { padding-right: 44px; }
.pc2 h3 a, .pc2-face { color: inherit; text-decoration: none; }
.pc2-face { position: relative; display: block; align-self: start; border-radius: 50%; }
.pc2 h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pf-fav { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer; font: 500 14px var(--text); color: var(--moon, #F2F4FF);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)), rgba(22, 24, 54, .6); border: 1px solid var(--g-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.pf-fav[aria-pressed="true"] { border-color: rgba(255, 92, 138, .5); background: linear-gradient(180deg, rgba(255, 92, 138, .22), rgba(255, 92, 138, .08)), rgba(22, 24, 54, .6); color: #fff; }

/* profile */
.pr-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 16px 0 10px; margin-bottom: 14px; border-radius: 999px; color: #F2F4FF; text-decoration: none; font: 500 15px var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)), rgba(20, 22, 50, .55); border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--lg-spec); }
.pr-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pr-hero { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(18px, 3vw, 36px); align-items: center; padding: clamp(16px, 2.4vw, 26px); border-radius: 32px;
  background: var(--g-fill), var(--g-tint); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: var(--lg-spec), var(--g-drop); }
.pr-photo { position: relative; aspect-ratio: 1; border-radius: 26px; overflow: hidden; background: #1a1c44; box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .9); }
.pr-photo img, .pr-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-on { position: absolute; right: 14px; bottom: 14px; width: 16px; height: 16px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 3px rgba(12, 13, 36, .9), 0 0 14px #34D399; }
.pr-main h1 { margin: 0; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; color: #fff; }
.pr-area { margin: 8px 0 0; color: var(--mist, #B8C2E8); font-size: 16.5px; }
.pr-meta { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14px; color: #A7F3D0; }
.pr-dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px #34D399; animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 50% { opacity: .45; } }
.pr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 18px 0 0; border-radius: 20px; overflow: hidden;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.pr-stats > div { display: grid; gap: 2px; padding: 12px 10px; text-align: center; }
.pr-stats > div + div { border-left: 1px solid rgba(255, 255, 255, .08); }
.pr-stats b { font: 700 20px var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.pr-stats span { font-size: 12.5px; color: var(--mist, #B8C2E8); }
.pr-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pr-acts > * { min-height: 46px; }
.pr-fav { display: inline-flex; align-items: center; gap: 7px; }
.pr-block { margin-top: 16px; padding: clamp(18px, 2.4vw, 26px); border-radius: 26px; background: var(--g-fill), var(--g-solid); border: 1px solid var(--g-edge); box-shadow: var(--lg-spec), 0 14px 34px -22px rgba(0, 0, 0, .8); }
.pr-block h2 { margin: 0 0 10px; font-size: 20px; color: #fff; }
.pr-block > p { margin: 0; color: #DDE2FF; line-height: 1.6; }
.pr-note { font-size: 13.5px; color: var(--mist, #B8C2E8) !important; }
.pr-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 0; }
.pr-dl > div { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); }
.pr-dl dt { font-size: 12.5px; color: var(--mist, #B8C2E8); }
.pr-dl dd { margin: 4px 0 0; color: #fff; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-chips button { min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer; font: 500 14.5px var(--text); color: #F2F4FF;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)), rgba(124, 92, 255, .18); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.pr-chips button:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)), rgba(124, 92, 255, .32); }
.pr-qa { display: grid; gap: 12px; margin-top: 12px; }
.pr-qa article { display: grid; gap: 8px; }
.pr-q { justify-self: end; max-width: 82%; margin: 0; padding: 10px 14px; border-radius: 20px 20px 6px 20px; background: linear-gradient(135deg, #7C5CFF, #4F7BFF); color: #fff; font-size: 15px; }
.pr-a { display: flex; align-items: flex-end; gap: 8px; margin: 0; max-width: 90%; }
.pr-a > span { padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); color: #EEF0FF; font-size: 15px; line-height: 1.5; }
.pr-a .av, .pr-a img { flex: none; }
.pr-mine { margin: 0 0 6px !important; }
.rt-show { color: var(--gold, #F2C75C); letter-spacing: 2px; }
.pr-sim { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pr-sim a { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: 20px; text-align: center; text-decoration: none; color: #F2F4FF;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.pr-sim a:hover { background: rgba(255, 255, 255, .09); }
.pr-sim b { font-size: 14.5px; }
.pr-sim span { font-size: 12.5px; color: var(--mist, #B8C2E8); }
.pr-sticky { display: none; }

/* my chats */
.ch-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.ch-list > li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 24px;
  background: var(--g-fill), var(--g-solid); border: 1px solid var(--g-edge); box-shadow: var(--lg-spec), 0 14px 34px -22px rgba(0, 0, 0, .8); }
.ch-av { display: block; border-radius: 50%; }
.ch-info { display: grid; gap: 3px; min-width: 0; }
.ch-info b { color: #fff; font-size: 16px; }
.ch-info > span { font-size: 13px; color: var(--mist, #B8C2E8); font-variant-numeric: tabular-nums; }
.ch-info em { font-style: normal; font-size: 14px; color: #DDE2FF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-acts { display: flex; gap: 8px; }
.ch-acts > * { min-height: 40px; padding: 0 14px; font-size: 14px; }
.ch-rate { grid-column: 1 / -1; }
.ch-rate:empty { display: none; }

/* rating */
.rt-box { display: grid; gap: 10px; margin-top: 12px; padding: 16px; border-radius: 22px; background: linear-gradient(180deg, rgba(242, 199, 92, .1), rgba(255, 255, 255, .02)), rgba(20, 22, 50, .7); }
.rt-box > p { margin: 0; color: #fff; font-weight: 600; }
.rt-stars { display: flex; gap: 4px; }
.rt-stars button { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 30px; line-height: 1; color: rgba(255, 255, 255, .22); transition: transform .3s var(--spring), color .15s; }
.rt-stars button.on { color: var(--gold, #F2C75C); text-shadow: 0 0 14px rgba(242, 199, 92, .6); transform: scale(1.12); }
.rt-stars button:active { transform: scale(.85); }
.rt-text { min-height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; font: 400 15px var(--text); }
.rt-send { justify-self: start; min-height: 44px; }
.rt-send:disabled { opacity: .45; cursor: not-allowed; }
.rt-thanks { margin: 10px 0 0; color: #A7F3D0; font-weight: 600; }

/* pay from wallet (report checkout) */
.pay-wallet { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(52, 211, 153, .16), rgba(70, 200, 255, .08)), rgba(20, 22, 50, .7); border: 1px solid rgba(52, 211, 153, .35); }
.pay-wallet b { display: block; color: #fff; font-size: 16px; }
.pay-wallet span { font-size: 13.5px; color: #C9F5E3; font-variant-numeric: tabular-nums; }
.pay-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 13px; color: var(--mist, #B8C2E8); }
.pay-or::before, .pay-or::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .12); }

/* sample PDF link on report cards */
.pc-sample { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 32px; font-size: 14px; color: #A8E4FF; text-decoration: none; border-bottom: 1px dashed rgba(168, 228, 255, .45); }
.pc-sample::after { content: '↗'; font-size: 13px; }
.pc-sample:hover { color: #fff; }

/* wallet packs: 6 packs, 6 across on wide screens */
.wl-packs { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
@media (max-width: 860px) { .wl-packs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* legal pages */
.legal-doc h2 { margin: 10px 0 4px; }
.lg-draft { display: inline-flex; margin: 0; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #2A1A00; background: linear-gradient(180deg, #FBE3A1, #E9B84A); }
.lg-upd { margin: 0 0 8px; font-size: 13px; color: var(--mist, #B8C2E8); }
.lg-sec { margin-top: 12px; padding: 18px 20px; border-radius: 22px; background: var(--g-fill), var(--g-solid); border: 1px solid var(--g-edge); box-shadow: var(--lg-spec); }
.lg-sec h3 { margin: 0 0 8px; font-size: 17.5px; color: #fff; }
.lg-sec p, .lg-sec li { color: #DDE2FF; line-height: 1.6; font-size: 15px; }
.lg-sec p { margin: 0; }
.lg-sec ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.lg-sec a { color: #A8E4FF; }
.lg-tbd { padding: 1px 6px; border-radius: 6px; background: rgba(242, 199, 92, .22); color: #FBE3A1; box-shadow: inset 0 0 0 1px rgba(242, 199, 92, .4); }
.lg-see { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.lg-see span { font-size: 13px; color: var(--mist, #B8C2E8); margin-right: 4px; }
.lg-see a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; color: #F2F4FF; text-decoration: none; font-size: 14px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
/* footer: logo + one row of links; on phones both centred */
.foot .foot-nav { justify-content: flex-end; flex: 1 1 auto; }
@media (max-width: 700px) {
  .foot { flex-direction: column !important; align-items: center !important; text-align: center; gap: 14px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .foot .foot-nav { justify-content: center; gap: 10px 18px; }
  .foot .foot-nav a { font-size: 14px; min-height: 32px; display: inline-flex; align-items: center; }
}

/* the "sample review" pop-up is off: it covered content, and made-up reviews cannot go on the live site anyway */
.proof { display: none !important; }

/* menu: a small FREE tag floats above "Horoscope" */
.nav-hs { position: relative; }
.nav-free { position: absolute; top: -9px; right: -6px; padding: 2px 6px; border-radius: 999px; font: 800 9.5px/1.2 var(--text); letter-spacing: .06em; color: #062B16;
  background: linear-gradient(180deg, #8CF5B8, #2BD46B); box-shadow: 0 4px 12px -3px rgba(43, 212, 107, .8); animation: freeFloat 2.6s ease-in-out infinite; pointer-events: none; }
:lang(hi) .nav-free { letter-spacing: 0; font-size: 10px; }
@keyframes freeFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .nav-free { animation: none; } }
@media (max-width: 1040px) { .nav a[data-nav="horoscope"] { display: inline-flex !important; } .nav a[data-nav="problems"] { display: none; } }

/* report cards: the badge sits on the top edge, so no card needs an empty band on top to line up */
.plan-cards:has(.pc-flag) > .plan-card:not(:has(> .pc-flag))::before { display: none !important; }
.plan-card > .pc-flag { position: absolute; top: -12px; left: 20px; margin: 0; z-index: 3; }
.plan-cards { padding-top: 12px; }
.plan-card { padding-top: 26px; }

/* one wallet strip under the reports instead of three "talk" plan cards (chat is paid from the wallet) */
.wallet-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 18px; padding: 20px 22px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(124, 92, 255, .22), rgba(70, 200, 255, .08)), var(--g-solid); border: 1px solid var(--g-edge); box-shadow: var(--lg-spec), 0 14px 34px -22px rgba(0, 0, 0, .8); }
.wallet-strip h3 { margin: 0 0 4px; font-size: 19px; color: #fff; }
.wallet-strip p { margin: 0; color: #DDE2FF; font-size: 15px; max-width: 60ch; }
.ws-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.ws-acts > * { min-height: 46px; display: inline-flex; align-items: center; padding: 0 20px; white-space: nowrap; text-decoration: none; }
@media (max-width: 700px) { .ws-acts { width: 100%; } .ws-acts > * { flex: 1 1 auto; justify-content: center; padding: 0 14px; } }

/* real pages from the sample report in the Maha Kundli fan */
.page.pg-real { padding: 0; overflow: hidden; background: #fff; }
.page.pg-real img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Problems: the first thing after the top, in a glowing panel (Vandan, 19 Oct: "problem is very important to highlight") */
.problems.is-hero { isolation: isolate; padding-bottom: clamp(36px, 5vw, 56px); margin-top: clamp(28px, 4vw, 48px); }
.problems.is-hero::before { content: ''; position: absolute; z-index: -1; inset: clamp(18px, 3vw, 40px) clamp(0px, 1.2vw, 20px) 0; border-radius: 36px;
  background: radial-gradient(120% 80% at 0% 0%, rgba(242, 199, 92, .16), transparent 55%), radial-gradient(100% 90% at 100% 100%, rgba(124, 92, 255, .22), transparent 60%), rgba(16, 17, 42, .55);
  border: 1px solid rgba(242, 199, 92, .32); box-shadow: var(--lg-spec), 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(242, 199, 92, .25); }
.problems.is-hero > h2 { font-size: clamp(32px, 4.4vw, 54px) !important; line-height: 1.08; }
.problems.is-hero > .section-lead { font-size: clamp(16px, 1.6vw, 19px); color: #E6E9FF; }
@media (max-width: 700px) { .problems.is-hero::before { inset: 20px 6px 0; border-radius: 28px; } .problems.is-hero { padding-left: 22px; padding-right: 22px; } }

/* marketplace page: problem tabs above the filters */
.pf > .pf-cats { flex: 1 1 100%; margin: 0 0 4px; }
.pd-market { width: 100%; justify-content: center; margin-top: 12px; min-height: 46px; }
/* home: 6 pandits and "See all 56 pandits" */
.top-pandits .top-all { display: flex; width: fit-content; margin: 22px auto 0; min-height: 50px; align-items: center; padding: 0 28px; text-decoration: none; }

/* "Make my free sample kundli" under the Maha Kundli fan */
.sc-note { margin: 8px 0 0; font-size: 13.5px; color: var(--mist, #B8C2E8); }

/* free sample kundli page (#sample): a form, then 4 paper pages like the printed report, watermarked SAMPLE */
.sample-page { width: calc(100% - 2 * clamp(16px, 4vw, 48px)); max-width: 1144px; margin: 0 auto; padding: clamp(18px, 3vw, 36px) 0 64px; }
.smp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 620px; margin-top: 18px; padding: 22px; border-radius: 26px;
  background: var(--g-fill), var(--g-solid); border: 1px solid var(--g-edge); box-shadow: var(--lg-spec), 0 14px 34px -22px rgba(0, 0, 0, .8); }
.smp-form .smp-full { grid-column: 1 / -1; }
.smp-form input { width: 100%; box-sizing: border-box; min-height: 48px; font-size: 16px; }
.smp-form .btn-main { min-height: 50px; }
.smp-form .si-demo { margin: 0; }
.smp-bar { display: flex; gap: 10px; margin: 16px 0 18px; }
.smp-bar > * { min-height: 44px; padding: 0 18px; }
.smp-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.smp-page { position: relative; overflow: hidden; aspect-ratio: 210 / 297; padding: 7% 7% 9%; border-radius: 6px; background: #FFFCF6; color: #2B1A12;
  font: 400 14px/1.45 Georgia, 'Noto Serif Devanagari', serif; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .12); animation: riseIn .6s var(--ease-ios) both; }
.smp-page:nth-child(2) { animation-delay: .08s; } .smp-page:nth-child(3) { animation-delay: .16s; } .smp-page:nth-child(4) { animation-delay: .24s; }
.smp-page::after { content: attr(data-mark); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-30deg); pointer-events: none;
  font: 800 clamp(48px, 9vw, 96px)/1 var(--text); letter-spacing: .14em; color: rgba(122, 40, 28, .08); white-space: nowrap; }
.smp-page footer { position: absolute; left: 0; right: 0; bottom: 3%; text-align: center; font-size: 10.5px; color: #9A7A55; }
.smp-page h4 { margin: 0 0 4%; padding-bottom: 2%; border-bottom: 1px solid #C9A46A; font: 600 clamp(17px, 2vw, 24px)/1.2 Georgia, 'Noto Serif Devanagari', serif; color: #7A281C; }
.smp-page h5 { margin: 5% 0 2%; font: 600 14px Georgia, serif; color: #7A281C; }
.smp-page table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.smp-page th { background: #7A281C; color: #FFF6E6; font-weight: 600; text-align: left; padding: 6px 8px; }
.smp-page td { padding: 6px 8px; border-bottom: 1px solid #EBDDC6; }
.smp-page tbody tr:nth-child(even) td { background: #FBF1E2; }
.smp-kv th { width: 44%; background: #FBF1E2; color: #5A3A2A; }
.smp-k { width: 100%; height: auto; background: #FFFCF6; }
.smp-k path { fill: none; stroke: #7A281C; stroke-width: 1.6; }
.smp-k .n { fill: #B07A3A; font: 12px Georgia, serif; text-anchor: middle; }
.smp-k .p { fill: #2B1A12; font: 700 15px Georgia, 'Noto Serif Devanagari', serif; text-anchor: middle; }
.smp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; margin-bottom: 5%; }
.smp-two figure { margin: 0; } .smp-two figcaption { text-align: center; font-size: 11.5px; color: #7A5A3A; margin-top: 4px; }
.smp-lead { margin: 0 0 3%; font-size: 12.5px; color: #6A4A3A; }
.smp-dasha tr.on td { background: #F6D9A8 !important; font-weight: 700; }
.smp-dasha em { font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 99px; background: #7A281C; color: #fff; margin-left: 4px; }
.smp-dasha.smp-sm td { padding: 4px 8px; font-size: 11.5px; }
.smp-page.is-cover { background: linear-gradient(180deg, #5C1E14, #8A3A20); color: #FFF2DE; padding: 9% 9% 10%; }
.smp-page.is-cover::after { color: rgba(255, 255, 255, .07); }
.smp-page.is-cover footer { color: rgba(255, 230, 200, .6); }
.smp-cover { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.6%; }
.smp-cover h3 { margin: 0; font: 500 clamp(28px, 3.6vw, 44px)/1.1 Georgia, 'Noto Serif Devanagari', serif !important; letter-spacing: 0; color: #FFF2DE; }
.smp-cover p { margin: 0; font-size: 12.5px; color: #F2D8B6; }
.smp-cover b { margin-top: 3%; font: 500 clamp(18px, 2.2vw, 26px) Georgia, 'Noto Serif Devanagari', serif; color: #fff; }
.smp-cover small { margin-top: 5%; font-size: 11px; letter-spacing: .08em; color: #E8C590; }
.smp-brand { font: 12px Georgia, serif; letter-spacing: .4em; color: #E8C590; }
.smp-om { font-size: 30px; color: #F2C75C; }
.smp-cbox { width: 46%; margin: 3% 0; padding: 4px; border-radius: 4px; background: #C9A46A; }
.smp-end { margin-top: 26px; padding: 22px; border-radius: 24px; background: linear-gradient(135deg, rgba(242, 199, 92, .16), rgba(124, 92, 255, .1)), var(--g-solid); border: 1px solid rgba(242, 199, 92, .35); }
.smp-end h3 { margin: 0 0 6px; color: #fff; font-size: 21px; } .smp-end p { margin: 0 0 16px; color: #DDE2FF; max-width: 70ch; }
@media (max-width: 760px) {
  .smp-pages { grid-template-columns: 1fr; }
  .smp-form { grid-template-columns: 1fr 1fr; padding: 16px; }
  .smp-page { font-size: 13px; }
  .smp-page table { font-size: 11.5px; } .smp-page td, .smp-page th { padding: 5px 6px; }
}
@media print {
  body > *:not(main), main > :not(#sample), .sample-page > h2, .sample-page > .section-lead, .smp-bar, .smp-end, .galaxy, .sky { display: none !important; }
  body { background: #fff !important; padding: 0 !important; }
  .sample-page { padding: 0; width: auto; max-width: none; }
  .smp-pages { display: block; }
  .smp-page { width: 190mm; margin: 0 auto; break-after: page; box-shadow: none; border-radius: 0; animation: none; }
}

/* one column for the whole site: header, every section and the footer share the same left and right edge (1144px wide) */
.top { padding-left: max(clamp(16px, 4vw, 48px), calc((100% - 1144px) / 2)) !important; padding-right: max(clamp(16px, 4vw, 48px), calc((100% - 1144px) / 2)) !important; }
.faq details { max-width: none; }

/* pandit filters: one tidy row, every control 48px tall and lined up (no labels sitting on top of the boxes) */
.pf { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; }
.pf > .pf-q { flex: 1 1 280px; margin: 0; min-height: 48px; }
.pf-sel { display: block; flex: 0 0 190px; }
.pf-sel select { height: 48px; min-height: 48px; }
/* dropdowns: our own chevron with room on the right (the browser's arrow sat on the edge), pill shape like the search box */
.pf-sel select, select.ad-sel { -webkit-appearance: none; appearance: none; border-radius: 999px !important; padding: 0 44px 0 18px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9D2F5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)) !important;
  background-repeat: no-repeat, no-repeat !important; background-position: right 16px center, 0 0 !important; background-size: 16px 16px, 100% 100% !important; background-color: rgba(22, 24, 54, .6) !important; }
.pf-sel select:focus-visible, select.ad-sel:focus-visible { outline: 2px solid var(--gold-hi, #FBE3A1); outline-offset: 2px; }
.pf-sel select option, select.ad-sel option { background: #15173A; color: #F2F4FF; }
@media (max-width: 700px) { .pf-sel select { padding: 0 32px 0 14px !important; background-position: right 12px center, 0 0 !important; font-size: 15px; } }
.pf-g { flex: 0 0 auto; height: 48px; box-sizing: border-box; align-items: center; }
.pf-g button { min-height: 40px; }
.pf .pf-fav { flex: 0 0 auto; height: 48px; padding: 0 16px; }
@media (max-width: 700px) {
  .pf > .pf-q { flex-basis: 100%; }
  .pf-sel { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .pf-g { flex: 1 1 auto; }
}

/* account menu: the glass rim too */
.acct-menu { border-radius: 18px; }

/* ---------- 4. Phones ---------- */
@media (max-width: 900px) {
  /* nothing may widen the page sideways (decor sparkles sit past the edge); clip keeps sticky headers working */
  html, body { overflow-x: clip; }
  /* capsule buttons and roomy tap targets */
  .btn-main, .btn-line { border-radius: 999px; min-height: 46px; }
  .pc2-btn, .pc2-read { min-height: 44px; border-radius: 999px; }

  /* floating capsule tab bar: Liquid Glass, centred, always the same size */
  .tabbar { left: 50%; right: auto; width: min(440px, calc(100% - 24px)); transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 5px; border-radius: 999px; grid-template-columns: repeat(5, 1fr);
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)), rgba(16, 17, 42, .58);
    -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
    border: 0; box-shadow: var(--lg-spec), 0 20px 44px -16px rgba(0, 0, 0, .9), 0 0 0 .5px rgba(255, 255, 255, .08);
    transition: width .45s var(--spring), bottom .45s var(--spring), padding .3s; }
  .tabbar a { border-radius: 999px; min-height: 52px; align-content: center; }
  .tabbar a span { transition: opacity .2s, max-height .3s; max-height: 16px; overflow: hidden; }
  .tabbar a[aria-current] { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px -6px rgba(0, 0, 0, .6); }

  /* header: one slim glass strip. The Account tab at the bottom does sign-in, so the header keeps only logo, wallet and language */
  .top { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 8px; background: rgba(10, 11, 28, .7) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important; backdrop-filter: blur(20px) saturate(180%) !important; box-shadow: inset 0 -.5px 0 rgba(255, 255, 255, .14); }
  .top .nav-sign, .top .acct-menu { display: none !important; }
  .top .nav-wallet { margin-left: auto; }

  /* bottom sheets with a grabber: chat, problem panel, pop-up sheet */
  .chat, .pd, .sheet:not(.checkout-page .sheet) { align-items: flex-end; justify-content: center; }
  .chat-panel, .pd-panel, .sheet:not(.checkout-page .sheet) > .sheet-panel {
    width: 100%; max-width: 100%; height: calc(100dvh - 44px - env(safe-area-inset-top)); border-radius: 28px 28px 0 0; border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .14);
    padding-bottom: env(safe-area-inset-bottom); animation: sheetUp .42s var(--ease-ios); will-change: transform; }
  .chat-panel { overflow: hidden; }
  .sheet-grab { position: sticky; top: 0; z-index: 5; display: grid; place-items: center; height: 22px; margin-bottom: -8px; cursor: grab; touch-action: none; }
  .sheet-grab::before { content: ''; width: 40px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .38); }
  .pd-panel > .sheet-grab { margin: -22px -16px -4px; background: rgba(24, 26, 56, .9); }
  .chat-panel > .sheet-grab { position: absolute; left: 0; right: 0; top: 0; margin: 0; }
  @keyframes sheetUp { from { transform: translateY(100%); } }

  /* pandit cards: compact rows */
  .pandits .pan-grid { grid-template-columns: 1fr; gap: 10px; }
  .pc2 { grid-template-columns: 68px minmax(0, 1fr); justify-items: stretch; text-align: left; gap: 6px 12px; padding: 14px; border-radius: 24px; }
  .pc2-face { width: 68px; height: 68px; }
  .pc2-face .av { width: 64px !important; height: 64px !important; box-shadow: 0 0 0 2px #0C0D24; }
  .pc2-on { top: 2px; right: 2px; width: 14px; height: 14px; border-width: 2px; }
  .pc2-body { display: contents; }
  .pc2-body > h3, .pc2-body > .pc2-area { grid-column: 2; align-self: center; }
  .pc2 h3 { font-size: 17px; padding-right: 42px; }
  .pc2-area { font-size: 13.5px; margin: 0; }
  .pc2-face { grid-row: 1 / span 2; }
  .pc2-facts { grid-column: 1 / -1; gap: 6px 12px; margin-top: 6px; width: auto; }
  .pc2-facts dd { font-size: 13.5px; }
  .pc2-fav { top: 10px; right: 10px; width: 40px; height: 40px; }
  .pc2-acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8px; margin-top: 8px; }
  .pc2-btn { justify-content: center; }
  .pc2-read { margin: 0; width: auto; min-height: 44px; }

  /* profile */
  .profile-page, .chats-page, .legal-page { padding-bottom: 120px; }
  .pr-hero { grid-template-columns: 1fr; text-align: center; padding: 14px 14px 18px; border-radius: 30px; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--g-fill), var(--g-solid); }
  .pr-photo { width: min(260px, 70vw); margin: 0 auto; border-radius: 30px; }
  .pr-meta { justify-content: center; }
  .pr-acts { justify-content: center; }
  .pr-acts > .btn-main { flex: 1 1 100%; }
  .pr-acts > .btn-line { flex: 1 1 0; }
  .pr-dl { grid-template-columns: 1fr; }
  .pr-sim { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -14px; padding: 2px 14px 6px; scrollbar-width: none; }
  .pr-sim::-webkit-scrollbar { display: none; }
  .pr-sim a { scroll-snap-align: start; }
  .pr-sticky { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; z-index: 41;
    left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 24px)); bottom: calc(80px + env(safe-area-inset-bottom)); padding: 8px 8px 8px 18px; border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)), rgba(16, 17, 42, .7); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
    box-shadow: var(--lg-spec), 0 18px 40px -16px rgba(0, 0, 0, .9); transition: bottom .45s var(--spring); }
  .pr-sticky span { font-size: 14px; color: #fff; font-weight: 600; }
  .pr-sticky .btn-main { min-height: 44px; padding: 0 18px; }
  /* my chats */
  .ch-list > li { grid-template-columns: auto 1fr; padding: 14px; }
  .ch-acts { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
}
/* on a phone the grabber replaces the Mac-style title bar (dots + title); the round × closes (glass.css shows it up to 700px) */
@media (max-width: 700px) {
  #chatBody > .mac-bar, .pd-panel > .mac-bar { display: none !important; }
  #chatBody { padding-top: 22px; }
  .chat-panel > .sheet-close, .pd-panel > .sheet-close { top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; z-index: 6; font-size: 24px; }
  .pd-panel { padding-top: 22px; }
}
/* small phones: hero column and birth form fit the screen */
@media (max-width: 620px) {
  /* the hero column was as wide as its widest child (the birth card), which pushed the whole page past the screen */
  .stage { grid-template-columns: minmax(0, 1fr) !important; }
  .stage > *, .stage .right, .stage .talk, .stage .card { min-width: 0; max-width: 100%; }
  /* birth form: date and time share the row without pushing past the card */
  #birth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  #birth label, #birth input, #birth select { min-width: 0; max-width: 100%; }
  #birth input { width: 100%; box-sizing: border-box; font-size: 16px; }
  /* plan cards stack one under another (a sideways carousel hid half a card; Vandan: keep it simple) */
  .plan-cards:has(.pc-flag) > .plan-card:not(:has(> .pc-flag))::before { display: none; }
}
@media (max-width: 380px) {
  .pc2-facts { grid-template-columns: 1fr; }
  .tabbar a { font-size: 10.5px; }
}
@media (prefers-reduced-transparency: reduce) {
  .tabbar, .pr-sticky { -webkit-backdrop-filter: none; backdrop-filter: none; background: #15173A; }
}