/* AstroDivy — macOS-style glass across the site, and the plan cards (19 Oct 2026).
   Vandan: "build it more professionally, plan as cards, use glassy UI like macOS".
   One glass recipe, loaded last so it wins over style.css / galaxy.css:
   - windows (chat, problem panel, checkout, the birth-details card) and the plan cards get REAL background blur;
   - long lists (56 pandit cards, 70 problem cards, chips) get the same frosted look WITHOUT live blur, because
     re-blurring dozens of cards over the moving galaxy every frame makes scrolling stutter.
   Radii follow hierarchy: windows 18, cards 22, controls 12, chips/pills round. */
/* Type (Vandan, 19 Oct: "we need to have good font"): the real macOS face. SF Pro on Apple devices, Inter elsewhere;
   Hindi from the system Devanagari face (Kohinoor on Apple) or Noto Sans Devanagari. One family for headings and
   text, like macOS: headings are bold and tight, body is regular, prices use even-width digits. */
:root {
  --text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Noto Sans Devanagari', 'Segoe UI', system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Noto Sans Devanagari', 'Segoe UI', system-ui, sans-serif;
}
body { font-family: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'ss01', 'cv11'; }
h1, h2, h3, .hero-h, .si-title, .pd h2, .plan-card h3, .pc2 h3, .pcard h3, .disc-list dt, .prob b, .sc-copy h2, .steps h3, .choice-btn b, .si-hello, .co-empty h2 {
  font-family: var(--display) !important; font-weight: 700 !important; letter-spacing: -.022em; }
.hero-h { font-size: clamp(34px, 4.2vw, 56px) !important; line-height: 1.05 !important; letter-spacing: -.035em; }
main h2 { letter-spacing: -.03em; }
.section-lead, .hero-sub { letter-spacing: -.005em; }
.pc-price b, .meter, .ps-count, .pc2-facts strong { font-variant-numeric: tabular-nums; }
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3, :lang(hi) .hero-h { letter-spacing: 0; line-height: 1.25 !important; }

:root {
  --g-fill: linear-gradient(180deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .03));
  --g-tint: rgba(20, 22, 50, .42);
  --g-solid: rgba(22, 24, 54, .78);              /* the frosted look without live blur */
  --g-blur: blur(26px) saturate(175%);
  --g-edge: rgba(255, 255, 255, .13);
  --g-edge-hi: rgba(255, 255, 255, .22);
  --g-hi: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 .5px rgba(255, 255, 255, .04);
  --g-drop: 0 22px 50px -24px rgba(0, 0, 0, .8), 0 2px 10px -6px rgba(0, 0, 0, .5);
  --gold: #F2C75C; --gold-hi: #FBE3A1;
}

/* The live-sky control under the pandit ("Planet transits, sped up · date · Sky right now") is hidden: Vandan,
   19 Oct, "do we need this?". The planets keep their 4-month time-lapse; the future date only confused people. */
.sky-now { display: none !important; }
/* "Your kundli will be read by … · Change" bar in the hero: removed (Vandan, 19 Oct: "remove this").
   The pandit is still chosen with "Read my kundli" on the pandit cards. */
.reader-chip { display: none !important; }
/* the pandit's DP on his messages in the hero */
.bubble.has-dp { position: relative; padding-left: 74px; min-height: 76px; }
.who-dp { position: absolute; left: 16px; top: 16px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(242, 199, 92, .75), 0 0 16px -2px rgba(242, 199, 92, .55); }
.who-dp img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.75); transform-origin: 50% 21%; display: block; }
.who-dp::after { content: ''; position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #2BD46B; border: 2px solid #1A1B40; }
@media (max-width: 560px) { .bubble.has-dp { padding-left: 64px; } .who-dp { left: 12px; top: 14px; width: 40px; height: 40px; } }

/* ---------- one long home page + a few separate pages (router.js) ---------- */
html { scroll-padding-top: 84px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
main > [data-page][hidden] { display: none !important; }
html:not([data-page="home"]) main > [data-page]:not([hidden]):first-of-type, html:not([data-page="home"]) main > section:not([hidden]) { padding-top: clamp(28px, 5vw, 56px); min-height: 60vh; }
.nav a[aria-current] { color: #fff; background: rgba(255, 255, 255, .1); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.nav a { padding: 6px 12px; white-space: nowrap; }
/* with the wallet chip and the account name in the header, the menu must stay on one line */
.top { gap: 14px; }
.top .nav { gap: 2px; }
.nav-sign { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) { .nav a { padding: 6px 9px; font-size: 14.5px; } }
@media (max-width: 1040px) { .nav a[data-nav="horoscope"] { display: none; } }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-nav a { color: var(--mist); text-decoration: none; font-size: 15px; }
.foot-nav a:hover, .foot-nav a[aria-current] { color: #fff; }
/* Disclaimer page */
.disclaimer h2 { margin-bottom: 4px; }
.disc-list { margin: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1040px; }
.disc-list > div { padding: 20px 22px; border-radius: 20px; background: var(--g-fill), var(--g-solid); border: 1px solid var(--g-edge); box-shadow: var(--g-hi), 0 14px 34px -22px rgba(0, 0, 0, .8); }
.disc-list dt { font: 400 20px/1.25 var(--display); color: #fff; margin: 0 0 8px; }
.disc-list dd { margin: 0; color: #C9CFF0; font-size: 15.5px; line-height: 1.55; }
.disc-list > div:first-child { border-color: rgba(242, 199, 92, .45); }
@media (max-width: 760px) { .disc-list { grid-template-columns: 1fr; } }

.disclaimer, .signin, .checkout-page { padding-left: clamp(16px, 4vw, 48px); padding-right: clamp(16px, 4vw, 48px); padding-bottom: 64px; }

/* header: Sign in / the signed-in name */
.nav-sign { margin-left: auto; padding: 7px 14px; border-radius: 999px; font: 600 14.5px var(--text); color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.nav-sign.is-in::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2BD46B; margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 8px rgba(43, 212, 107, .8); }
.nav-sign[aria-current] { border-color: rgba(255, 255, 255, .4); }
.top .nav + .nav-sign { margin-left: 8px; }

/* Sign in page: one glass window in the middle */
.si-win { width: min(460px, 100%); margin: 0 auto; border-radius: 18px; overflow: hidden;
  background: var(--g-fill), var(--g-tint); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border: 1px solid var(--g-edge); box-shadow: var(--g-hi), 0 40px 90px -40px rgba(0, 0, 0, .9); }
.si-body { padding: 22px 26px 24px; display: grid; gap: 14px; }
.si-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .08); }
.si-tabs button { border: 0; background: none; color: var(--mist); font: 600 14.5px var(--text); padding: 9px 10px; border-radius: 9px; cursor: pointer; min-height: 40px; }
.si-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .92); color: #10122C; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.si-title { font: 400 28px/1.2 var(--display); color: #fff; margin: 6px 0 0; }
.si-lead { color: var(--mist); margin: -6px 0 2px; font-size: 15px; }
#siForm { display: grid; gap: 12px; }
.si-field { display: grid; gap: 6px; font-size: 14px; color: #D7DCFA; }
.si-field input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(5, 6, 18, .45); color: #fff; font: 400 16px var(--text); }
.si-field input:focus { outline: none; border-color: rgba(168, 228, 255, .6); box-shadow: 0 0 0 3px rgba(70, 200, 255, .2); }
.si-pass { position: relative; display: block; }
.si-pass input { padding-right: 74px; }
.si-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: rgba(255, 255, 255, .1); color: #E6E9FF; font: 600 12.5px var(--text); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.si-link { justify-self: start; border: 0; background: none; padding: 2px 0; color: var(--ice); font: 500 14px var(--text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.si-meter { display: flex; align-items: center; gap: 5px; margin: -2px 0 0; font-size: 13px; color: var(--mist); }
.si-meter i { width: 34px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.si-meter span { margin-left: 6px; }
.si-meter[data-s="0"] i:nth-child(1) { background: #FF6B5B; }
.si-meter[data-s="1"] i:nth-child(-n+1) { background: #F2C75C; }
.si-meter[data-s="2"] i:nth-child(-n+2) { background: #7EE8A6; }
.si-meter[data-s="3"] i { background: #2BD46B; }
.si-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #D7DCFA; line-height: 1.45; }
.si-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: #7C5CFF; flex: none; }
.si-check a { color: var(--ice); }
.si-go { width: 100%; min-height: 50px; font-size: 16.5px; }
.si-ok { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(43, 212, 107, .12); border: 1px solid rgba(43, 212, 107, .35); color: #BFF5D3; font-size: 14.5px; }
.si-switch { margin: 0; text-align: center; color: var(--mist); font-size: 14.5px; }
.si-switch .si-link { display: inline; }
.si-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 13px; color: var(--mist); }
.si-secure svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.si-demo { margin: -6px 0 0; text-align: center; font-size: 12.5px; color: rgba(184, 194, 232, .7); }
.si-done { display: grid; gap: 16px; text-align: center; padding: 16px 0 6px; }
.si-hello { font: 400 24px/1.3 var(--display); color: #fff; margin: 0; }
.si-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Checkout page: the order and payment steps as a page, not a drawer */
.checkout-page .sheet { position: static; inset: auto; z-index: auto; display: flex; justify-content: center; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
.checkout-page .sheet[hidden] { display: none; }
.checkout-page .sheet-panel { width: min(600px, 100%); height: auto; max-height: none; overflow: visible; border-radius: 18px; border: 1px solid var(--g-edge); animation: none;
  background: var(--g-fill), var(--g-tint); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: var(--g-hi), 0 40px 90px -40px rgba(0, 0, 0, .9); padding-top: 0; }
.checkout-page .sheet-panel > .mac-bar { margin: 0 calc(-1 * clamp(18px, 4vw, 34px)) 18px; border-radius: 18px 18px 0 0; }
.checkout-page .sheet-panel > .sheet-close { display: none; }
.co-empty { width: min(520px, 100%); margin: 0 auto; text-align: center; display: grid; gap: 12px; justify-items: center; padding: 40px 24px; border-radius: 20px;
  background: var(--g-fill), var(--g-solid); border: 1px solid var(--g-edge); }
.co-empty h2 { margin: 0; }
.co-empty p { margin: 0; color: var(--mist); }
html.has-order .co-empty { display: none; }
@media (max-width: 900px) { .si-win, .checkout-page .sheet-panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--g-fill), var(--g-solid); } .nav-sign { padding: 6px 10px; font-size: 13.5px; } }

/* filters and search boxes may shrink to the screen (grid items otherwise keep their content width and spill off a phone) */
.pf > *, .ps > *, .ps-box input, .pf-sel select { min-width: 0; max-width: 100%; }
.pf-sel select { width: 100%; }

/* ---------- wallet (wallet.js) ---------- */
.nav-wallet { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; text-decoration: none; color: #FBE3A1; font: 700 14px var(--text);
  font-variant-numeric: tabular-nums; background: linear-gradient(180deg, rgba(251, 227, 161, .16), rgba(251, 227, 161, .05)); border: 1px solid rgba(242, 199, 92, .4); }
.nav-wallet[hidden] { display: none; }
.nav-wallet svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.top .nav + .nav-wallet { margin-left: 8px; }
.nav-wallet + .nav-sign { margin-left: 8px; }
.wallet-page { padding-left: clamp(16px, 4vw, 48px); padding-right: clamp(16px, 4vw, 48px); padding-bottom: 64px; }
.wl-win { width: min(760px, 100%); margin: 0 auto; }
#walletApp { display: grid; gap: 14px; margin-top: 18px; }
.wl-bal { display: grid; gap: 2px; padding: 22px 24px; border-radius: 22px; border: 1px solid rgba(242, 199, 92, .5);
  background: linear-gradient(135deg, rgba(251, 227, 161, .18), rgba(124, 92, 255, .14)), var(--g-tint); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: var(--g-hi), 0 30px 70px -30px rgba(242, 180, 60, .5); }
.wl-bal span { color: #F4D27A; font: 600 14px var(--text); }
.wl-bal b { font: 700 48px/1.05 var(--display); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.wl-bal small { color: var(--mist); font-size: 14.5px; }
.wl-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(43, 212, 107, .12); border: 1px solid rgba(43, 212, 107, .35); color: #BFF5D3; }
.wl-packs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.wl-packs button { position: relative; display: grid; gap: 4px; justify-items: start; text-align: left; padding: 16px 14px 14px; border-radius: 16px; cursor: pointer; color: #fff;
  background: var(--g-fill), var(--g-solid); border: 1px solid var(--g-edge); box-shadow: var(--g-hi); min-height: 92px; }
.wl-packs button b { font: 700 22px var(--display); font-variant-numeric: tabular-nums; }
.wl-packs button small { color: var(--mist); font-size: 12.5px; }
.wl-packs button[aria-checked="true"] { border-color: rgba(242, 199, 92, .8); box-shadow: var(--g-hi), 0 0 0 2px rgba(242, 199, 92, .35); background: linear-gradient(180deg, rgba(251, 227, 161, .16), rgba(255, 255, 255, .03)), var(--g-solid); }
.wl-packs .pc-flag { position: absolute; top: -10px; right: 10px; font-size: 11px; padding: 3px 8px; }
.wl-other { max-width: 320px; }
.wl-go { width: 100%; min-height: 52px; font-size: 17px; }
.wl-tx { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wl-tx li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--g-fill), var(--g-solid); border: 1px solid var(--g-edge); }
.wl-tx li span { display: grid; gap: 2px; color: #E6E9FF; font-size: 15px; }
.wl-tx li small { color: var(--mist); font-size: 12.5px; }
.wl-tx b { font: 700 16px var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-tx b.in { color: #7EE8A6; } .wl-tx b.out { color: #FFB4A8; }
.wl-none { color: var(--mist); margin: 0; }
.wl-empty { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 34px 20px; border-radius: 20px; background: var(--g-fill), var(--g-solid); border: 1px solid var(--g-edge); }
.wl-empty h2 { margin: 0; } .wl-empty p { margin: 0; color: var(--mist); max-width: 46ch; }
.wl-pay { width: min(600px, 100%); margin: 0 auto; padding: 22px clamp(18px, 4vw, 30px); border-radius: 18px; background: var(--g-fill), var(--g-tint); border: 1px solid var(--g-edge);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.meter.low { background: rgba(242, 184, 75, .16); color: #FFE3B0; border: 1px solid rgba(242, 184, 75, .5); }
.ch-stop { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(242, 184, 75, .1); border: 1px solid rgba(242, 184, 75, .35); color: #FFE3B0; font-size: 14.5px; }
.ch-sum .btn-main + .small, .ch-sum a.btn-main { width: 100%; display: inline-flex; justify-content: center; margin-top: 8px; }
@media (max-width: 760px) { .wl-packs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wl-bal b { font-size: 40px; } }
@media (max-width: 900px) { .wl-bal, .wl-pay { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--g-fill), var(--g-solid); } .nav-wallet { padding: 6px 9px; font-size: 13px; } }

/* account menu under the header button (signin.js) */
.nav-sign.is-in::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.acct-menu { position: absolute; z-index: 30; min-width: 190px; padding: 6px; border-radius: 14px; display: grid; gap: 2px;
  background: rgba(22, 24, 54, .82); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 50px -16px rgba(0, 0, 0, .9); }
.acct-menu[hidden] { display: none; }
.acct-menu a, .acct-menu button { display: block; text-align: left; padding: 10px 12px; border-radius: 9px; border: 0; background: none; color: #EEF0FF; font: 500 15px var(--text); text-decoration: none; cursor: pointer; }
.acct-menu a:hover, .acct-menu button:hover, .acct-menu :focus-visible { background: rgba(255, 255, 255, .1); outline: none; }
.acct-menu [data-signout] { color: #FFB4A8; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0 0 9px 9px; margin-top: 2px; }

/* ---------- card motion (motion.js) ---------- */
.mo-in { opacity: 0; transform: translateY(26px) scale(.97); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); }
.mo-in.mo-shown { opacity: 1; transform: none; }
.mo-done { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s; transform-style: preserve-3d; }
.mo-done.mo-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); transition: transform .12s ease-out, box-shadow .3s, border-color .3s;
  box-shadow: var(--g-hi), 0 30px 60px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(168, 228, 255, .16); }
.mo-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .13), rgba(255, 255, 255, .04) 35%, transparent 60%); mix-blend-mode: screen; }
.mo-tilt > .mo-glare { opacity: 1; }
.prob, .pc2, .plan-card, .safe-grid li, .steps li, .disc-list > div, .wl-packs button { position: relative; }
/* the best-value plan breathes a slow gold glow so it stands out without moving around */
.plan-card.is-best { animation: bestGlow 4.5s ease-in-out infinite; }
@keyframes bestGlow { 0%, 100% { box-shadow: var(--g-hi), 0 0 0 1px rgba(242, 199, 92, .18), 0 30px 70px -30px rgba(242, 180, 60, .45); }
  50% { box-shadow: var(--g-hi), 0 0 0 1px rgba(242, 199, 92, .4), 0 30px 80px -24px rgba(242, 180, 60, .75); } }
.plan-card.is-best.mo-tilt { animation: none; }
@media (prefers-reduced-motion: reduce) { .mo-in { opacity: 1; transform: none; } .plan-card.is-best { animation: none; } }

/* phones: an iOS-style glass tab bar at the bottom (the top menu is hidden on small screens) */
.tabbar { display: none; }
@media (max-width: 900px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
    padding: 6px; border-radius: 22px; background: rgba(16, 17, 40, .72); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 18px 40px -16px rgba(0, 0, 0, .9); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 16px; color: rgba(220, 225, 255, .7); text-decoration: none; font: 600 11px var(--text); min-height: 48px; }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a[aria-current] { color: #fff; background: rgba(255, 255, 255, .12); }
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .proof { bottom: calc(92px + env(safe-area-inset-bottom)); }
  html.chat-open .tabbar { display: none; }
}

/* ---------- the menu bar ---------- */
.top { background: rgba(10, 11, 28, .5); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); }

/* ---------- windows: real glass ---------- */
#talk > .card, .bubble:not(.me), .plan-card, .reader-chip, .sky-now, .proof, .ps-box {
  background: var(--g-fill), var(--g-tint); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge); box-shadow: var(--g-hi), var(--g-drop);
}
.chat-panel, .pd-panel, .sheet-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(16, 17, 40, .72);
  -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
  border-left: 1px solid var(--g-edge-hi); box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .8), inset 1px 0 0 rgba(255, 255, 255, .06);
}
.chat, .pd, .sheet { background: rgba(3, 4, 12, .38); }

/* ---------- long lists: frosted, no live blur ---------- */
.prob, .pc2, .safe-grid li, .faq details, .trust li, .choice-btn, .pd-look li, .pd-pandits li, .ch-msg.them {
  background: var(--g-fill), var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--g-edge); box-shadow: var(--g-hi), 0 14px 34px -22px rgba(0, 0, 0, .8);
}
.prob:hover, .pc2:hover, .choice-btn:hover { border-color: var(--g-edge-hi); box-shadow: var(--g-hi), 0 22px 46px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(168, 228, 255, .12); }
.ps-cats button, .ps-pop button, .hero-pills li, .pc-tags span, .pf-g, .pf-sel select {
  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);
}
.ps-cats button[aria-pressed="true"] { background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)), rgba(124, 92, 255, .45); border-color: rgba(255, 255, 255, .3); }
.pf-g button[aria-pressed="true"] { background: rgba(255, 255, 255, .9); color: #10122C; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.pf-sel select { border-radius: 12px; }

/* macOS-style buttons: the main one keeps the brand gradient, the secondary is a glass pill */
.btn-line { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 16px -10px rgba(0, 0, 0, .8); color: #F2F4FF; border-radius: 12px; }
.btn-line:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .08)); }
.btn-main { border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 28px -12px rgba(124, 92, 255, .9); }
.btn-main:focus-visible, .btn-line:focus-visible, .pc2-btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* ---------- the macOS window bar (birth-details card, chat, problem panel) ---------- */
.mac-bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; font: 600 12.5px var(--text); color: rgba(235, 237, 255, .62);
  border-bottom: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); }
.mac-bar > i, .mac-bar > .mb-close { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .25); }
.mac-bar > .mb-close { background: #FF5F57; cursor: pointer; position: relative; }
.mac-bar > .mb-close:hover::after { content: '×'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 var(--text); color: rgba(80, 0, 0, .8); }
.mac-bar > .mb-close:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.mac-bar > i:nth-of-type(1) { background: #FEBC2E; }
.mac-bar > i:nth-of-type(2) { background: #28C840; }
.mac-bar > i:first-child { background: #FF5F57; }
.mac-bar > i:first-child + i { background: #FEBC2E; }
.mac-bar > i:first-child + i + i { background: #28C840; }
.mac-bar > span { flex: 1; text-align: center; margin-right: 52px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#talk > .card.mac-win { padding-top: 0; border-radius: 18px; overflow: hidden; }
#talk > .card.mac-win > .mac-bar { margin: 0 -22px 18px; }
#chatBody > .mac-bar { margin: -22px calc(-1 * clamp(16px, 4vw, 26px)) 6px; }
.pd-panel { padding-top: 0; }
.pd-panel > .mac-bar { position: sticky; top: 0; z-index: 2; margin: 0 -26px 18px; background: rgba(24, 26, 56, .9); }
/* on a desktop the red dot closes the window; phones keep the big × (the dot is too small to tap) */
@media (min-width: 701px) { .chat-panel > .sheet-close, .pd-panel > .sheet-close { display: none; } .ch-head { padding-right: 0; } }
@media (max-width: 700px) { #chatBody > .mac-bar .mb-close, .pd-panel > .mac-bar .mb-close { visibility: hidden; } .pd-panel > .mac-bar { margin: 0 -16px 18px; } }

/* ---------- plans as cards ---------- */
.reports .plan-group { font: 600 15px/1.3 var(--text); color: var(--mist); margin: 34px 0 14px; letter-spacing: 0; }
.plan-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan-cards.plan-talk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 22px; border-radius: 22px; color: #F2F4FF; min-width: 0; }
.plan-card h3 { font: 400 22px/1.2 var(--display); color: #fff; margin: 0; }
.pc-price { margin: 2px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.pc-price b { font: 700 40px/1 var(--text); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.pc-price span { color: var(--mist); font-size: 14px; }
.pc-what { margin: 0; color: #C9CFF0; font-size: 15px; line-height: 1.45; min-height: 2.9em; }
.pc-feat { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .09); display: grid; gap: 10px; align-content: start; flex: 1; }
.pc-feat li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.4; color: #E6E9FF; }
.pc-feat li::before { content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: rgba(242, 199, 92, .16) no-repeat center / 11px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23F2C75C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pc-cta { width: 100%; min-height: 48px; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 16px; }
.pc-flag { align-self: flex-start; margin-bottom: -2px; font: 600 12px var(--text); padding: 4px 10px; border-radius: 999px; color: #2A1A00;
  background: linear-gradient(180deg, #FBE3A1, #E9B84A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 12px -4px rgba(233, 184, 74, .7); }
.pc-flag.soon { color: #DDE2FF; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
/* in a row where one card has a badge, the others keep the same space so names and prices line up */
.plan-cards:has(.pc-flag) > .plan-card:not(:has(> .pc-flag))::before { content: ''; display: block; height: 23px; margin-bottom: -2px; }
.plan-card.is-best { border-color: rgba(242, 199, 92, .55);
  background: linear-gradient(180deg, rgba(251, 227, 161, .14), rgba(255, 255, 255, .03)), var(--g-tint);
  box-shadow: var(--g-hi), 0 0 0 1px rgba(242, 199, 92, .18), 0 30px 70px -30px rgba(242, 180, 60, .55); }
.plan-card.is-live { border-color: rgba(168, 228, 255, .35); }
@media (max-width: 1100px) { .plan-cards, .plan-cards.plan-talk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .plan-cards, .plan-cards.plan-talk { grid-template-columns: 1fr; }
  .pc-what { min-height: 0; }
}
/* phones: no live blur anywhere (keeps scrolling smooth), the frosted fill stays */
@media (max-width: 900px) {
  #talk > .card, .bubble:not(.me), .plan-card, .reader-chip, .sky-now, .proof, .ps-box, .top { -webkit-backdrop-filter: none; backdrop-filter: none; }
  #talk > .card, .bubble:not(.me), .plan-card, .reader-chip, .sky-now, .proof, .ps-box { background: var(--g-fill), var(--g-solid); }
  .top { background: rgba(10, 11, 28, .92); }
}
@media (prefers-reduced-transparency: reduce) {
  #talk > .card, .bubble:not(.me), .plan-card, .chat-panel, .pd-panel, .sheet-panel, .top { -webkit-backdrop-filter: none; backdrop-filter: none; background: #15173A; }
}