/* ============================================================================
   Bhyrav — bright, spiritual, warm.

   The palette is a Sri Yantra rendered in pigment rather than ink: saffron,
   kumkum rose, violet and teal on an unbleached cream ground. Nothing here is
   dark; the whole point is that the page feels lit.

   Rose is load-bearing. It marks exactly one thing — what is live right now:
   the window that is open, the dasha that is running, the selected slot.
   Everything else earns its colour from its family, not its importance.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Outfit:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Yatra+One&display=swap');

:root{
  /* ground */
  --bg:#fffaf2;
  --surface:#ffffff;
  --ink:#2a1a33;
  --ink-2:#4a3b55;
  --muted:#6b5a76;
  --muted-2:#7b6a86;
  --faint:#9a8aa4;
  --hair:rgba(42,26,51,.10);

  /* the four pigments */
  --saffron:#f5a524;
  --rose:#d6336c;
  --violet:#6d4aff;
  --teal:#17a2a2;

  /* their deep readable forms, for text on tints */
  --saffron-d:#8a5410;
  --rose-d:#a32456;
  --violet-d:#5433e0;
  --teal-d:#0f5c5c;

  /* tints and their borders */
  --saffron-t:#fff3dd;  --saffron-b:#ffe0c2;
  --rose-t:#ffe4ee;     --rose-b:#ffd3e4;
  --violet-t:#eee8ff;   --violet-b:#dbd2ff;
  --teal-t:#e8f6f6;     --teal-b:#c4ecec;
  --line:#efe4f2;

  --display:"Bricolage Grotesque",Georgia,serif;
  --body:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --deva:"Yatra One",serif;

  --wrap:1240px;
  --gut:clamp(20px,4vw,48px);
  --r:20px;
  --shadow:0 20px 46px -32px rgba(42,26,51,.42);
  --shadow-lg:0 26px 60px -34px rgba(42,26,51,.44);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* The header is sticky, so an anchor jump would land under it. The slot
   panels are targeted by script rather than by id, so they are named too. */
:target,[id],.dayslots{scroll-margin-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
::selection{background:var(--saffron);color:var(--ink)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* type ---------------------------------------------------------------- */
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;margin:0}
h1{font-size:clamp(2.6rem,6.2vw,4.4rem);line-height:1.03}
h2{font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.1}
h3{font-size:1.3rem;line-height:1.25;letter-spacing:-.02em}
p{margin:0 0 1.05rem}
.dim{color:var(--muted-2)}
.sm{font-size:.9rem}
.xs{font-size:.8rem}
.b{font-weight:600}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.grad{background:linear-gradient(96deg,var(--saffron) 0%,var(--rose) 48%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.claim{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.5rem,3.4vw,2.3rem);color:var(--ink);margin:0 0 .8rem}
.claim b{color:var(--rose);font-weight:800}
.kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rose-d);display:block;margin-bottom:1rem;
  font-weight:500}

/* aurora — the warm light behind every page ---------------------------- */
.aurora{position:relative;isolation:isolate}
.aurora::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 620px at 12% -6%,rgba(245,165,36,.40) 0%,rgba(245,165,36,0) 66%),
    radial-gradient(720px 640px at 92% 4%,rgba(214,51,108,.30) 0%,rgba(214,51,108,0) 66%),
    radial-gradient(900px 700px at 66% 42%,rgba(109,74,255,.17) 0%,rgba(109,74,255,0) 64%),
    radial-gradient(680px 560px at 4% 58%,rgba(23,162,162,.18) 0%,rgba(23,162,162,0) 64%)}

/* header -------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(255,250,242,.86);border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;
  padding-top:16px;padding-bottom:16px;gap:20px}
.logo{display:flex;align-items:baseline;gap:11px;font-family:var(--display);
  font-weight:800;font-size:1.42rem;letter-spacing:-.02em}
.logo i{font-family:var(--deva);font-style:normal;font-size:1.6rem;color:var(--rose)}
.nav nav{display:flex;align-items:center;gap:24px;font-size:.94rem;font-weight:500;
  color:var(--muted)}
.nav nav a:hover{color:var(--ink)}
/* The one menu item aimed at astrologers rather than clients: set apart by a
   hairline and a smaller size so it reads as a second audience, not a fifth
   page of the practice. */
.nav nav a.navalt{font-size:.86rem;color:var(--faint);padding-left:20px;
  border-left:1px solid var(--hair)}
.nav nav a.navalt:hover{color:var(--rose)}
@media (max-width:820px){.nav nav a.navalt{padding-left:0;border-left:0}}
.pill{background:linear-gradient(102deg,var(--saffron),var(--rose));color:#fff;
  padding:11px 24px;border-radius:999px;font-weight:600;white-space:nowrap;
  box-shadow:0 10px 26px -10px rgba(214,51,108,.6);transition:transform .2s var(--ease)}
.pill:hover{transform:translateY(-1px);color:#fff}
.ghostpill{border:1.5px solid var(--violet-b);padding:10px 22px;border-radius:999px;
  font-weight:600;color:var(--ink)}
.ghostpill:hover{border-color:var(--rose)}

/* sections ------------------------------------------------------------- */
.sec{padding:clamp(48px,7vw,88px) 0}
.sec.tight{padding:clamp(30px,4vw,52px) 0}
.lead{font-size:1.14rem;line-height:1.65;color:var(--muted);max-width:52ch}

.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.grid.four{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.split{display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}

.card{background:var(--surface);border-radius:var(--r);padding:24px 26px;
  box-shadow:var(--shadow)}
.card h3{margin-bottom:6px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:.87rem;padding:9px 18px;border-radius:999px;background:var(--surface);
  border:1.5px solid var(--line);font-weight:500}
.chip.saffron{border-color:var(--saffron-b)} .chip.rose{border-color:var(--rose-b)}
.chip.violet{border-color:var(--violet-b)}  .chip.teal{border-color:var(--teal-b)}

.tag{display:inline-block;font-size:.8rem;font-weight:600;padding:5px 12px;
  border-radius:999px;background:var(--rose-t);color:var(--rose-d)}

/* hero ----------------------------------------------------------------- */
.hero{padding-block:clamp(30px,5vw,54px) clamp(40px,6vw,70px)}
.hero .in{display:grid;grid-template-columns:1.03fr .97fr;gap:52px;align-items:center}
.hero h1 em{font-style:normal}
.yantra{display:flex;justify-content:center}
.yantra svg{width:min(400px,86vw);overflow:visible}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinBack{to{transform:rotate(-360deg)}}
@keyframes glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.y-out{transform-origin:50% 50%;animation:spin 90s linear infinite}
.y-in{transform-origin:50% 50%;animation:spinBack 64s linear infinite}
.y-bindu{animation:glow 3s ease-in-out infinite}
.rise{opacity:0;transform:translateY(18px)}
.rise.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* the fork — two doors, equal weight ----------------------------------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.door{background:var(--surface);border-radius:26px;padding:34px 34px;
  box-shadow:var(--shadow-lg);border-top:5px solid var(--rose)}
.door h2{font-size:2rem;margin-top:10px}
.door.pro{background:linear-gradient(150deg,#2a1a33,#3d1f4a);color:#fff;border-top:0}
.door.pro .kicker{color:var(--saffron)}
.door.pro p{color:#d8cbe2}
.door .row{display:flex;gap:20px;margin-top:16px;font-size:.92rem;color:var(--muted-2)}
.door.pro .row{color:#b8a6c4}
.door .act{display:flex;gap:13px;align-items:center;margin-top:22px;flex-wrap:wrap}
.btn-dark{background:var(--saffron);color:var(--ink);padding:14px 30px;
  border-radius:999px;font-weight:600}

/* closing call ---------------------------------------------------------- */
.cta{border-radius:28px;padding:clamp(40px,5vw,60px) clamp(28px,4vw,54px);color:#fff;
  background:linear-gradient(112deg,var(--saffron) 0%,var(--rose) 52%,var(--violet) 100%);
  box-shadow:0 30px 70px -34px rgba(214,51,108,.7)}
.cta.alt{background:linear-gradient(112deg,var(--violet) 0%,var(--rose) 55%,var(--saffron) 100%)}
.cta h2{color:#fff}
.cta .two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.cta .two>div+div{border-left:1px solid rgba(255,255,255,.3);padding-left:40px}
.btn-light{background:#fff;color:var(--rose);padding:15px 34px;border-radius:999px;
  font-weight:700;display:inline-block}

/* free tools ------------------------------------------------------------ */
.tools{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.tool{border-radius:20px;padding:24px}
.tool h3{font-size:1.18rem}
.tool.a{background:linear-gradient(158deg,var(--saffron-t),#ffe9c9);color:var(--saffron-d)}
.tool.b{background:linear-gradient(158deg,var(--rose-t),var(--rose-b));color:var(--rose-d)}
.tool.c{background:linear-gradient(158deg,var(--violet-t),var(--violet-b));color:var(--violet-d)}
.tool.d{background:linear-gradient(158deg,#d8f3f3,var(--teal-b));color:var(--teal-d)}
.tool h3{color:var(--ink)}

/* system families ------------------------------------------------------- */
.fam{border-radius:20px;padding:22px 24px}
.fam h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;margin-bottom:8px}
.fam ul{margin:0;padding:0;list-style:none;font-size:1rem;line-height:1.75;font-weight:500}
.fam.a{background:linear-gradient(158deg,var(--saffron-t),#ffe9c9)}
.fam.a h3{color:var(--saffron-d)} .fam.a ul{color:#5c3a10}
.fam.b{background:linear-gradient(158deg,var(--rose-t),var(--rose-b))}
.fam.b h3{color:var(--rose-d)} .fam.b ul{color:#7d1f45}
.fam.c{background:linear-gradient(158deg,var(--violet-t),var(--violet-b))}
.fam.c h3{color:var(--violet-d)} .fam.c ul{color:#3d2794}
.fam.d{background:linear-gradient(158deg,#d8f3f3,var(--teal-b))}
.fam.d h3{color:var(--teal-d)} .fam.d ul{color:var(--teal-d)}

/* speed proof ----------------------------------------------------------- */
.bars{display:grid;gap:14px;margin-top:16px}
.barrow{display:flex;align-items:center;gap:14px}
.barrow .lbl{font-family:var(--mono);font-size:.8rem;color:var(--faint);width:56px}
.track{flex:1;height:12px;border-radius:999px;background:#f4ecf7;overflow:hidden}
.track i{display:block;height:100%}
.track i.hand{width:100%;background:repeating-linear-gradient(115deg,#e3d6ea 0 9px,#f4ecf7 9px 18px)}
.track i.fast{width:5%;background:linear-gradient(90deg,var(--saffron),var(--rose));
  animation:glow 2.4s ease-in-out infinite}
.barrow .val{font-family:var(--mono);font-weight:500;width:86px;text-align:right;
  white-space:nowrap}

.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{border-radius:14px;padding:14px 16px}
.stat b{display:block;font-family:var(--mono);font-size:1.4rem;font-weight:500}
.stat.a{background:var(--saffron-t);color:var(--saffron-d)}
.stat.b{background:#ffeef4;color:var(--rose-d)}
.stat.c{background:#f0eafd;color:var(--violet-d)}

/* pricing --------------------------------------------------------------- */
.plan{position:relative}
.plan.best{border:2px solid var(--rose)}
.plan .badge{position:absolute;top:-12px;left:26px;background:var(--rose);color:#fff;
  padding:5px 14px;border-radius:999px;font-size:.74rem;font-weight:600}
.plan .price{font-family:var(--mono);font-size:2.2rem;font-weight:500}
.plan ul{margin:14px 0 0;padding:0;list-style:none;line-height:1.85;color:var(--muted)}
.plan.dark{background:linear-gradient(150deg,#2a1a33,#3d1f4a);color:#fff}
.plan.dark ul{color:#d8cbe2}

/* blog ------------------------------------------------------------------ */
.posts{display:grid;gap:2px}
.post{display:grid;grid-template-columns:130px 1fr;gap:22px;padding:22px 0;
  border-top:1px solid var(--hair);align-items:baseline}
.post:hover h3{color:var(--rose)}
.post time{font-family:var(--mono);font-size:.82rem;color:var(--faint)}
.pager{display:flex;gap:9px;align-items:center;margin-top:32px;font-family:var(--mono);
  font-size:.87rem}
.pager a,.pager span{padding:8px 15px;border-radius:999px;border:1.5px solid var(--line)}
.pager .on{background:var(--ink);color:#fff;border-color:var(--ink)}
.article{max-width:72ch}
.article h2{margin:2.2rem 0 .8rem}
.article p{color:var(--ink-2)}

/* booking calendar ------------------------------------------------------ */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.dow{font-size:.72rem;color:var(--faint);text-align:center;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase}
.day{height:46px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;font-family:var(--mono);font-size:1rem}
.day.off{color:#cfc4d6}
.day.free{background:var(--surface);border:1.5px solid var(--saffron-b);font-weight:500}
.day.free:hover{border-color:var(--rose)}
.day.sel{background:linear-gradient(102deg,var(--saffron),var(--rose));color:#fff;
  font-weight:600;box-shadow:0 10px 22px -10px rgba(214,51,108,.7)}
.slots{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(96px,100%),1fr))}
.slot{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;
  padding:12px 0;text-align:center;font-family:var(--mono);font-size:.95rem;cursor:pointer}
.slot:hover{border-color:var(--rose)}
.slot.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.slot.gone{color:#cfc4d6;background:#faf6fb;border-color:#f4ecf7;
  text-decoration:line-through;pointer-events:none}
.partday{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;margin:20px 0 10px}
.partday.m{color:var(--saffron-d)} .partday.a{color:var(--rose-d)}
.partday.e{color:var(--violet-d)}

/* forms ----------------------------------------------------------------- */
label{display:grid;gap:6px;font-size:.84rem;font-weight:600;color:var(--muted-2)}
input,select,textarea{font:inherit;font-size:1rem;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line);border-radius:12px;
  padding:13px 15px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(214,51,108,.10)}
button{font:inherit;cursor:pointer;border:0}
button.pill{border:0}
.formgrid{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.seg{display:grid;grid-auto-flow:column;gap:8px}
.seg label{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;
  padding:10px 0;text-align:center;font-size:.9rem;font-weight:500;color:var(--ink-2);
  cursor:pointer;display:block}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg input:checked+span{}
.seg label:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.note{background:var(--saffron-t);border:1.5px solid var(--saffron-b);border-radius:16px;
  padding:16px 18px;font-size:.9rem;color:var(--saffron-d);line-height:1.55}
.err{background:#fff0f4;border:1.5px solid var(--rose-b);border-radius:14px;
  padding:14px 17px;color:var(--rose-d);font-size:.94rem}
.okmsg{background:var(--teal-t);border:1.5px solid var(--teal-b);border-radius:14px;
  padding:14px 17px;color:var(--teal-d);font-size:.94rem}

/* tables ---------------------------------------------------------------- */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:10px}
.tbl th{text-align:left;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);font-weight:600;padding:0 10px 9px 0}
.tbl td{padding:11px 10px 11px 0;border-top:1px solid var(--hair)}
.tbl tbody tr:hover{background:#fffdf7}
.tbl tr.live td{background:var(--saffron-t);font-weight:600}
.r{color:var(--rose);font-size:.78rem}

/* footer ---------------------------------------------------------------- */
.foot{border-top:1px solid var(--hair);margin-top:40px;
  padding:clamp(36px,5vw,60px) 0 clamp(30px,4vw,48px)}
.foot .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot strong{font-family:var(--display);font-size:1.02rem;display:block;margin-bottom:12px}
.foot a{display:block;color:var(--muted-2);font-size:.92rem;padding:4px 0}
.foot a:hover{color:var(--rose)}

/* ============================================================================
   Consultation console
   Six tabs over one client. Density matters more than beauty here: the
   astrologer is on a call and reading, not browsing.
   ========================================================================= */

.consult{padding:26px 0 72px}
.ch{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap}
.ch h1{font-size:2.1rem}
.ch .q{margin:8px 0 0;font-style:italic;color:var(--muted)}
.ch-act{display:flex;align-items:center;gap:10px}
.ch-act form{margin:0}
.ran{font-size:.8rem;color:var(--muted-2);font-family:var(--mono)}
button.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink-2);
  border-radius:999px;padding:10px 20px;font-size:.87rem}
button.ghost:hover{border-color:var(--rose);color:var(--rose)}

.warn{margin:18px 0 0;padding:14px 17px;border-radius:14px;background:var(--saffron-t);
  border:1.5px solid var(--saffron-b);font-size:.92rem;line-height:1.55;
  color:var(--saffron-d)}

.tabs{display:flex;gap:24px;margin:24px 0 0;flex-wrap:wrap;
  border-bottom:1px solid var(--hair)}
.tabs a{padding:11px 0 12px;font-size:.95rem;color:var(--muted-2);
  border-bottom:2px solid transparent}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--rose);font-weight:600;border-bottom-color:var(--rose)}

/* Which of the fifteen ran. "Didn't run" must never look like
   "has nothing to say". */
.syswrap{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 4px}
.sys{font-size:.76rem;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);
  color:var(--faint)}
.sys i{font-style:normal;opacity:.65;margin-left:7px;font-family:var(--mono);font-size:.7rem}
.sys.ok{color:var(--teal-d);border-color:var(--teal-b);background:var(--teal-t)}
.sys.unavailable{text-decoration:line-through}
.sys.failed{color:var(--rose-d);border-color:var(--rose-b);background:#fff0f4}
.sys.needs_input{border-style:dashed}

.consult .sec{padding:0;margin-top:30px}
.consult .sec h2{font-size:1.45rem;margin-bottom:12px}
.consult .split{margin-top:22px}

.sayfirst{margin-top:24px;border-radius:22px;padding:26px 30px;
  background:linear-gradient(112deg,var(--saffron-t) 0%,var(--rose-t) 62%,var(--violet-t) 100%);
  border:1px solid var(--saffron-b)}
.sayfirst .lead{font-size:1.18rem;color:var(--ink);max-width:96ch}

.window{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:start;
  background:var(--surface);border-radius:16px;padding:16px 22px;margin-bottom:10px;
  border-left:4px solid var(--line);box-shadow:0 12px 30px -24px rgba(42,26,51,.4)}
.window.live{border-left-color:var(--rose)}
.tl-date{font-family:var(--mono);font-size:.94rem;font-weight:500;color:var(--muted)}
.window.live .tl-date{color:var(--rose)}
.wingroup{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.tl-tag{background:var(--rose-t);color:var(--rose-d);padding:4px 12px;border-radius:999px;
  font-size:.78rem;font-weight:600}

.subject header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pt{margin-top:12px;padding-top:11px;border-top:1px solid var(--hair)}
.pt p{margin:3px 0}

.running{margin-top:24px;padding:22px 24px;border-radius:18px;color:#fff;
  background:linear-gradient(112deg,#2a1a33,#3d1f4a 58%,#5a2350)}
.running .kicker{color:var(--saffron)}
.running strong{display:block;font-family:var(--display);font-size:1.5rem;margin-top:2px}
.running .sm{color:#b8a6c4}

.ak{padding:16px 18px;border-radius:14px;
  background:linear-gradient(140deg,var(--saffron-t),var(--rose-t));margin-bottom:14px}
.ak strong{display:block;font-family:var(--display);font-size:1.6rem}
.pad{padding:14px 16px;border-radius:13px;background:var(--violet-t)}
.pad strong{display:block;font-family:var(--display);font-size:1.3rem}
.score{padding:14px 16px;border-radius:13px;background:#faf6fb}
.score strong{display:block;font-family:var(--mono);font-size:1.6rem;margin-top:2px}

.bindus{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;align-items:end;
  margin-top:14px}
.bin{display:flex;flex-direction:column;align-items:center;gap:5px}
.bin i{display:block;width:100%;border-radius:6px 6px 0 0;background:#f5c98a}
.bin.hi i{background:var(--teal)} .bin.lo i{background:var(--rose)}

/* Longevity and maraka: collapsed, marked, out of every report. */
details.danger{margin-top:26px;padding:16px 19px;border-radius:16px;
  border:1.5px solid var(--rose-b);background:#fffbfc}
details.danger summary{cursor:pointer;font-weight:600;color:var(--rose-d)}
details.danger p{margin:8px 0 0}

.dump{font-family:var(--mono);font-size:.72rem;line-height:1.5;max-height:280px;
  overflow:auto;padding:13px 15px;border-radius:12px;background:#faf6fb;
  white-space:pre-wrap;word-break:break-word;color:var(--ink-2)}

.hist{padding:13px 0;border-top:1px solid var(--hair)}
.hist p{margin:5px 0 0}
.chargef{display:grid;gap:15px;max-width:560px}

/* responsive ------------------------------------------------------------ */
@media (max-width:900px){
  .hero .in{grid-template-columns:1fr;gap:30px}
  .doors,.cta .two{grid-template-columns:1fr}
  .cta .two>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.3);
    padding-left:0;padding-top:28px}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .window{grid-template-columns:1fr;gap:8px}
  .post{grid-template-columns:1fr;gap:4px}
  .bindus{grid-template-columns:repeat(6,1fr)}
  .nav nav{gap:14px;font-size:.86rem}
}
@media (max-width:560px){
  body{font-size:16px}
  .foot .wrap{grid-template-columns:1fr}
  .tbl{font-size:.84rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
}

/* All-systems tab: every system gets a card, and a dead service says so. */
.syscard header{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:10px}
.syscard.wide{grid-column:1 / -1}
.syscard.down{background:#faf6fb;box-shadow:none;border:1.5px dashed var(--line)}
.syscard.need{background:var(--saffron-t);box-shadow:none;border:1.5px dashed var(--saffron-b)}
.offline{font-size:.9rem;color:var(--faint);margin:0}
.track{letter-spacing:.14em;text-transform:uppercase;font-weight:600}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.pillar{background:var(--violet-t);border-radius:12px;padding:11px 8px;text-align:center;
  display:grid;gap:2px}
.pillar b{font-size:1.5rem;line-height:1.1}
.pillar.dm{background:linear-gradient(150deg,var(--saffron-t),var(--rose-t));
  outline:2px solid var(--rose-b)}
.elems{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.el{font-size:.78rem;padding:5px 11px;border-radius:999px;background:var(--teal-t);
  color:var(--teal-d)}
.el.zero{background:#fff0f4;color:var(--rose-d)}

.nums{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(84px,100%),1fr))}
.num{background:var(--violet-t);border-radius:12px;padding:12px;text-align:center;
  display:grid;gap:2px;font-size:.76rem;color:var(--violet-d)}
.num b{font-family:var(--mono);font-size:1.7rem;font-weight:500}
.num.live{background:linear-gradient(150deg,var(--saffron-t),var(--rose-t));color:var(--rose-d)}

/* Meta landing page */
/* The hero checklist and its action row. These were scoped to .lp, so the
   HOME PAGE — which is not .lp — rendered its ticks as one run-on paragraph
   and let the CTA collide with the text above it on a phone. Unscoped now;
   `.door .act` is more specific and still wins where it applies. */
.ticks{display:grid;gap:7px;margin-top:20px;font-size:1rem;color:var(--ink-2)}
/* The reassurance pill under a price. Was pasted inline into index.html and
   reading.html; the booking page needs it too, so it lives here now. */
.paynote{margin-top:14px;font-size:.9rem;color:var(--muted);display:inline-flex;
  align-items:center;gap:8px;background:var(--surface);border:1px solid var(--hair);
  border-radius:999px;padding:9px 15px}
.paynote::before{content:"\01F512";font-size:.95rem}
.act{display:flex;gap:16px;align-items:center;margin-top:24px;flex-wrap:wrap}
.pill.big{font-size:1.08rem;padding:16px 34px}
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contrast .col{border-radius:20px;padding:24px 26px}
.contrast .col ul{margin:0;padding-left:18px;line-height:1.85}
.contrast .bad{background:#faf6fb;color:var(--muted)}
.contrast .good{background:linear-gradient(150deg,var(--saffron-t),var(--rose-t));
  color:var(--ink)}
.step{position:relative;padding-top:30px}
.step .n{position:absolute;top:20px;left:26px;font-family:var(--mono);font-size:.76rem;
  font-weight:600;color:#fff;background:var(--rose);width:24px;height:24px;
  border-radius:50%;display:flex;align-items:center;justify-content:center}
.step h3{margin-top:14px}
.faq details{border-top:1px solid var(--hair);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem}
.faq p{margin:10px 0 0;color:var(--muted)}
.stickybar{display:none}
@media (max-width:820px){
  .contrast{grid-template-columns:1fr}
  .stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;
    background:rgba(255,250,242,.96);backdrop-filter:blur(12px);
    border-top:1px solid var(--hair);box-shadow:0 -8px 24px -18px rgba(42,26,51,.5)}
  .stickybar b{display:block;font-family:var(--display);font-size:1.3rem}
  .lp main{padding-bottom:80px}
  .pillars{grid-template-columns:repeat(2,1fr)}
}


/* ============================================================================
   Mobile pass.

   Measured at a real 386px viewport rather than eyeballed: the header nav was
   pushing every page 8–160px past the right edge, .split's 360px floor was
   wider than the phone's content box, and the six-column planet table had no
   way to scroll. Nothing here hides overflow — each cause is fixed.
   ========================================================================= */

/* A table is allowed to be wider than a phone; it must scroll, not stretch
   the page. The wrapper is the scroller, the table keeps its own layout. */
.tw{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.tw::-webkit-scrollbar{height:6px}
.tw::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}

/* Long unbroken strings — mono ids, URLs, JSON — must not set the page width. */
.mono,.dump,.article,p,td,li{overflow-wrap:anywhere}
.dump{max-width:100%}

@media (max-width:820px){
  /* The header is the one element on every page, so it broke every page.
     Let it stack, and let the row wrap instead of running off the edge. */
  .nav .wrap{flex-wrap:wrap;gap:10px 14px;padding-top:12px;padding-bottom:12px}
  .nav nav{gap:12px 16px;flex-wrap:wrap;width:100%;font-size:.88rem}
  .pill{padding:10px 18px}
  .ghostpill{padding:9px 16px}
  .logo{font-size:1.24rem}
  .logo i{font-size:1.4rem}
  /* The header wraps to two rows here, so an anchor jump needs more clearance
     or it drops the heading behind it. Measured at 144px on a 390px screen. */
  [id],.dayslots{scroll-margin-top:164px}
}

@media (max-width:640px){
  /* Give the table room to be legible while it scrolls, rather than
     crushing six columns into 350px. */
  .tw .tbl{min-width:520px}

  .consult .ch{gap:14px}
  .ch h1{font-size:1.7rem}
  .ch-act{width:100%;flex-wrap:wrap}
  .tabs{gap:16px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;
        scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .consult .tabs, .wrap>.tabs{position:relative;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .tabs a{white-space:nowrap}

  .stats3{grid-template-columns:1fr 1fr}
  .bindus{grid-template-columns:repeat(4,1fr);gap:6px}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .cta .two>div+div{padding-left:0}
  .card{padding:20px 18px}
  .door{padding:26px 22px}
  .sayfirst{padding:20px 18px}
  h1{font-size:clamp(2rem,9vw,2.6rem)}
  .hero{padding-top:18px}
  .yantra svg{width:min(280px,78vw)}
}

@media (max-width:420px){
  /* Below this the calendar's seven columns and the day cells need to shrink
     rather than push the month grid off screen. */
  .cal{gap:4px}
  .day{height:38px;font-size:.86rem;border-radius:9px}
  .dow{font-size:.62rem}
  .nums,.pillars{grid-template-columns:1fr 1fr}
  .stats3{grid-template-columns:1fr}
}

/* Client list + intake side by side, one column once that no longer fits.
   This lived as an inline style, which beat every media query. */
/* The intake is the column that gets typed into while a client is on the
   phone, so it gets the width — two fields per row instead of one long
   scroll. The list beside it is names and dates and needs less. */
.workbench{grid-template-columns:.95fr 1.25fr}
@media (max-width:900px){ .workbench{grid-template-columns:1fr} }

/* A flex or grid child will not shrink below its intrinsic width unless told.
   A search input's default size is ~490px, which is what pushed the client
   page 400px past the edge of a phone. */
input,select,textarea,button{min-width:0;max-width:100%}
form{min-width:0}
.split>*,.grid>*,.doors>*{min-width:0}

/* The fifteen, each with the question it answers.
   A bare chip reading "Jaimini" tells a client nothing. The hook underneath —
   "What your soul came to do" — is the only reason the count matters. Hooks
   come from the project's own persona definitions (see catalogue.py). */
.syscloud{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.sysline{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;
  padding:12px 15px;display:grid;gap:1px}
.sysline b{font-size:1rem;font-weight:600}
.sysline span{font-size:.85rem;color:var(--muted-2)}
.sysline.saffron{border-color:var(--saffron-b);background:linear-gradient(160deg,#fffdf8,var(--saffron-t))}
.sysline.rose{border-color:var(--rose-b);background:linear-gradient(160deg,#fffcfd,var(--rose-t))}
.sysline.violet{border-color:var(--violet-b);background:linear-gradient(160deg,#fdfcff,var(--violet-t))}
.sysline.teal{border-color:var(--teal-b);background:linear-gradient(160deg,#fbfefe,var(--teal-t))}

/* Family lists on the product page carry the same hook, smaller. */
.fam ul li{margin-bottom:7px;line-height:1.35}
.fam ul li b{display:block;font-weight:600}
.fam ul li em{font-style:normal;font-size:.8rem;opacity:.75}

/* Live service payloads, rendered rather than dumped. */
.bigthree{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.bigthree.four{grid-template-columns:repeat(4,1fr)}
.bigthree>div{background:var(--violet-t);border-radius:12px;padding:11px 13px;display:grid;gap:1px}
.bigthree b{font-family:var(--display);font-size:1.15rem;line-height:1.2}
.balance{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.barrow.sm .lbl{width:56px;font-size:.72rem;text-transform:capitalize}
.barrow.sm .val{width:34px;font-size:.76rem}
.barrow.sm{gap:9px;margin-bottom:5px}

.centers{display:flex;flex-wrap:wrap;gap:6px}
.ctr{font-size:.74rem;padding:5px 11px;border-radius:999px;border:1.5px dashed var(--line);
  color:var(--faint)}
.ctr.on{border-style:solid;border-color:var(--teal-b);background:var(--teal-t);
  color:var(--teal-d);font-weight:600}

.gkgrid{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.gk{background:#faf6fb;border-radius:12px;padding:11px 13px}
.gk p{margin:2px 0}
.gks,.gkg,.gkd{display:inline-block;min-width:52px;font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em}
.gks{color:var(--rose-d)} .gkg{color:var(--saffron-d)} .gkd{color:var(--violet-d)}

@media (max-width:640px){
  .bigthree,.bigthree.four{grid-template-columns:1fr 1fr}
  .balance{grid-template-columns:1fr}
}

/* Prashna verdict: the one thing the astrologer says out loud. */
.verdict{display:flex;align-items:baseline;gap:14px;border-radius:14px;
  padding:14px 18px;background:#fff0f4;border:1.5px solid var(--rose-b)}
.verdict b{font-family:var(--display);font-size:1.5rem;color:var(--rose-d)}
.verdict.yes{background:var(--teal-t);border-color:var(--teal-b)}
.verdict.yes b{color:var(--teal-d)}
input[type=file]{padding:10px;font-size:.88rem}

/* The astrologer's day, across the top of the client list. */
.todaybar{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.8rem;color:var(--muted);
  background:var(--surface);border:1.5px solid var(--line);border-radius:14px;
  padding:11px 18px;margin-bottom:20px}
.todaybar .rk{color:var(--rose-d)}
.todaybar .am{color:var(--teal-d)}

/* Loshu 3x3 */
.loshu{display:grid;grid-template-columns:repeat(3,52px);gap:5px;margin-top:12px}
.loshu .cell{height:52px;display:flex;align-items:center;justify-content:center;
  background:var(--violet-t);border-radius:10px;font-family:var(--mono);
  font-size:1.05rem;font-weight:500;color:var(--violet-d)}
.loshu .cell.empty{background:#fff0f4;color:var(--rose-b)}
/* Western wheel scales to its card */
.wheelwrap svg{width:100%;height:auto}

/* The Reading: prose the astrologer says out loud, each line with its source.
   Serif for the sayings — this is text to read aloud, not UI. */
.readsec h2{font-size:1.25rem;margin-bottom:14px}
.saying{display:grid;grid-template-columns:130px 1fr;gap:14px;margin-bottom:14px;
  align-items:start}
.saying .srctag{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rose-d);background:var(--rose-t);
  border-radius:999px;padding:5px 11px;text-align:center;margin-top:2px}
.saying p{margin:0;font-family:Georgia,'Times New Roman',serif;
  font-size:1.04rem;line-height:1.7;color:var(--ink)}
@media (max-width:640px){.saying{grid-template-columns:1fr;gap:4px}}

/* The Answer: one question, one screen. Say / When / Why / Warn+Prescribe. */
.askbar{display:flex;gap:10px;margin-top:22px}
.askbar input{flex:1;font-size:1.05rem;padding:15px 18px}
.dossier{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;margin-top:20px}
.dcol{background:var(--surface);border-radius:20px;padding:22px 24px;box-shadow:var(--shadow)}
.dcol h2{font-size:1.2rem;margin-bottom:12px}
.dcol.say{grid-row:span 3;background:linear-gradient(160deg,#fffdf8,var(--saffron-t))}
.dcol .saying{grid-template-columns:1fr;gap:4px;margin-bottom:12px}
.dcol .saying p{font-size:1.02rem}
.deeper{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.deeper form{margin:0}
@media (max-width:900px){.dossier{grid-template-columns:1fr}.dcol.say{grid-row:auto}}

/* Open with: short true things about the person, cross-checked. */
.openwith{margin-top:22px;padding:20px 24px;border-radius:20px;
  background:linear-gradient(150deg,#2a1a33,#3d1f4a);color:#fff}
.openwith h2,.openwith .dim{color:#fff}
.openwith .dim{opacity:.7}
.openwith .traits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:8px 18px;margin-top:12px}
.openwith .trait{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:start}
.openwith .trait p{margin:0;font-size:.95rem;line-height:1.5;color:#efe6f3}
.openwith .srctag{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--saffron);background:rgba(245,165,36,.14);
  border-radius:999px;padding:4px 8px;text-align:center;margin-top:3px}
.openwith .tbl th{color:#b8a6c4}.openwith .tbl td{border-color:rgba(255,255,255,.12)}
.openwith .tbl tr.live td{background:rgba(245,165,36,.16)}
.openwith summary{color:var(--saffron);cursor:pointer}
.openwith .track{color:#b8a6c4}

.verdict-badge{display:inline-block;font-family:var(--mono);font-size:.72rem;font-weight:600;
  padding:4px 11px;border-radius:999px;background:#fff0f4;color:var(--rose-d);
  margin-left:10px;vertical-align:middle;text-transform:uppercase}
.verdict-badge.yes{background:var(--teal-t);color:var(--teal-d)}

.synth{background:var(--surface);border:1.5px solid var(--saffron-b);border-radius:14px;
  padding:12px 16px;margin-bottom:14px}
.synth summary{cursor:pointer;color:var(--saffron-d)}
.synth p{font-family:Georgia,serif;font-size:1rem;line-height:1.65}

.converge{margin-top:16px;padding:20px 24px;border-radius:20px;
  background:linear-gradient(160deg,#fffdf8,var(--violet-t));border:1.5px solid var(--violet-b)}
.converge .saying{grid-template-columns:110px 1fr}
.cf{margin-top:8px;padding:10px 14px;background:rgba(255,255,255,.7);border-radius:12px}
.conf{display:inline-block;min-width:38px;font-family:var(--mono);font-size:.72rem;
  font-weight:600;color:var(--violet-d);background:var(--violet-t);border-radius:999px;
  padding:2px 7px;text-align:center;margin-right:6px}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:14px}

/* ── Writing (blog) ────────────────────────────────────────────────────── */
.blog-hero{padding:clamp(28px,5vw,54px) var(--gut) clamp(26px,4vw,40px)}
.blog-hero h1{margin-top:10px}
.blog-hero .lead{margin-top:16px}
.blog-search{display:flex;gap:10px;max-width:640px;margin-top:22px}
.blog-search input{flex:1;min-width:0;padding:14px 18px;font-size:1rem}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.on .dim{color:#d9cfe0}
.post-lead{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;
  background:var(--surface);border-radius:26px;padding:clamp(24px,4vw,44px);margin:6px 0 22px;
  box-shadow:var(--shadow);border:1px solid var(--hair);color:inherit;text-decoration:none;
  transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}
.post-lead:hover{transform:translateY(-2px);box-shadow:0 18px 50px -24px rgba(60,20,70,.35)}
.post-lead h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.post-lead-mark{justify-self:end;width:min(260px,100%);opacity:.55}
.post-lead-mark svg{width:100%;height:auto}
.post-lead.saffron{background:linear-gradient(135deg,#fff,var(--saffron-t))} .post-lead.saffron .post-lead-mark{color:var(--saffron)}
.post-lead.rose{background:linear-gradient(135deg,#fff,var(--rose-t))}       .post-lead.rose .post-lead-mark{color:var(--rose)}
.post-lead.violet{background:linear-gradient(135deg,#fff,var(--violet-t))}   .post-lead.violet .post-lead-mark{color:var(--violet)}
.post-lead.teal{background:linear-gradient(135deg,#fff,var(--teal-t))}       .post-lead.teal .post-lead-mark{color:var(--teal)}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.post-card{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--hair);
  border-radius:20px;padding:22px 24px;color:inherit;text-decoration:none;box-shadow:var(--shadow);
  border-top:4px solid var(--violet);transition:transform .15s,box-shadow .15s}
.post-card:hover{transform:translateY(-2px);box-shadow:0 18px 50px -24px rgba(60,20,70,.35)}
.post-card.saffron{border-top-color:var(--saffron)} .post-card.rose{border-top-color:var(--rose)}
.post-card.teal{border-top-color:var(--teal)}       .post-card.violet{border-top-color:var(--violet)}
.post-card h3{font-size:1.18rem}
.post-card .tag,.post-lead .tag{align-self:flex-start}
.readmore{float:right;color:var(--rose);font-weight:600}
.pager{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:28px}
.blog-cta{margin-top:clamp(36px,6vw,64px);display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;
  background:linear-gradient(152deg,#2a1a33 0%,#3d1f4a 52%,#5a2350 100%);border-radius:26px;padding:clamp(24px,4vw,40px)}
.blog-cta h2{font-size:clamp(1.3rem,2.4vw,1.8rem);max-width:30ch;margin-top:8px}

/* one article */
.post-head{padding:clamp(24px,4vw,44px) var(--gut) clamp(20px,3vw,32px);max-width:calc(var(--wrap));}
.post-head h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:22ch;margin-top:10px}
.post-head .lead{margin-top:16px;max-width:60ch;font-size:1.18rem}
.crumbs a{color:var(--muted-2)} .crumbs span{margin:0 8px;color:var(--faint)}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;color:var(--muted-2)}
.post-meta span+span::before{content:"·";margin-right:18px;color:var(--faint)}
.post-layout{display:grid;grid-template-columns:minmax(0,68ch) minmax(240px,300px);gap:clamp(28px,5vw,64px);align-items:start;
  padding-bottom:clamp(40px,6vw,72px)}
.post-body{font-size:1.08rem;line-height:1.75;color:var(--ink-2)}
.post-body>p:first-child{font-size:1.16rem;line-height:1.65}
.post-body>p:first-child strong{color:var(--ink)}
.post-body h2{font-size:1.5rem;margin:2.1em 0 .6em;padding-top:.6em;border-top:1px solid var(--hair)}
.post-body h3{font-size:1.2rem;margin:2em 0 .5em}
.post-body ul,.post-body ol{padding-left:1.3em;margin:0 0 1.2em}
.post-body li{margin:.45em 0} .post-body li::marker{color:var(--rose);font-weight:700}
.post-body strong{font-weight:650;color:var(--ink)}
.post-body h3+p strong{display:block;margin-bottom:.15em}
.post-page.saffron .post-body h2{border-top-color:var(--saffron-b)} .post-page.rose .post-body h2{border-top-color:var(--rose-b)}
.post-page.teal .post-body h2{border-top-color:var(--teal-b)}       .post-page.violet .post-body h2{border-top-color:var(--violet-b)}
.post-side{position:sticky;top:90px}
.side-card{background:linear-gradient(160deg,#fffdf8,var(--saffron-t));border:1px solid var(--hair);border-radius:20px;padding:22px 24px}
.side-card .pill,.side-card .ghostpill{margin-top:4px}
@media (max-width:900px){
  .post-lead{grid-template-columns:1fr} .post-lead-mark{display:none}
  .post-layout{grid-template-columns:1fr} .post-side{position:static}
}

/* Testimonials — real Play reviews, quoted verbatim */
.tcard{background:var(--surface);border:1px solid var(--hair);border-radius:20px;
  padding:22px 24px;margin:0;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.tcard .stars{color:var(--saffron);letter-spacing:3px;font-size:1rem}
.tcard blockquote{margin:0;font-size:1.02rem;line-height:1.6;color:var(--ink-2)}
/* Policy pages */
.legal-body{max-width:68ch;margin-top:22px;font-size:1.05rem;line-height:1.75;color:var(--ink-2)}
.legal-body h2{font-size:1.35rem;margin:1.8em 0 .5em;padding-top:.5em;border-top:1px solid var(--hair)}
.legal-body ul{padding-left:1.3em;margin:0 0 1.2em}
.legal-body li{margin:.5em 0}
.legal-body li::marker{color:var(--rose)}

.logo{display:inline-flex;align-items:center;gap:9px}
.logomark{width:30px;height:30px;border-radius:8px;vertical-align:middle}

/* intake: the whole new-client form on one screen ------------------------ */
.intake{display:grid;gap:14px 18px;margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.intake .wide{grid-column:1/-1}
.intake label{display:block}
.intake .xs{display:block;margin-top:4px}

/* place picker: the astrologer chooses, the code never guesses ----------- */
.placelist{position:relative;z-index:5;margin-top:6px;display:grid;gap:2px;
  border:1.5px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--surface)}
.placelist button{display:block;width:100%;text-align:left;border:0;
  background:transparent;padding:10px 14px;font:inherit;font-size:.92rem;
  color:var(--ink);cursor:pointer}
.placelist button:hover,.placelist button:focus{background:var(--rose-t);outline:0}
.intake .span2{grid-column:span 2}
@media (max-width:640px){ .intake .span2{grid-column:1/-1} }
.intake label{position:relative}
/* the suggestion list overlays rather than pushing the fields below it down */
.placelist{position:absolute;top:100%;left:0;right:0;box-shadow:var(--shadow)}

/* A .saying inside the dark "who this is" panel: its prose is var(--ink),
   which on that panel is ink on ink — the paragraphs were invisible. */
.openwith .saying p{color:#f2ebf6}
.openwith .saying .srctag{color:var(--saffron);background:rgba(245,165,36,.14)}
.openwith .cf{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.openwith .cf p,.openwith .cf b{color:#f2ebf6}
.openwith .kicker{color:var(--saffron)}

/* palm upload, wherever it appears */
.palmform{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.palmform input[type=file]{flex:1;min-width:220px;font-size:.9rem}

/* bodygraph: the service's own SVG, coloured from the client's gates */
.bgwrap svg{max-width:340px;width:100%;height:auto}

/* Divisional charts: a square SVG, capped so it does not run the page width. */
.vargaimg{display:block;width:100%;max-width:380px;height:auto;
  border-radius:12px;background:#fff}

/* Trial accounts see what the paid work is, instead of a button that only
   bounces them to billing after they have clicked it. */
.locked{
  margin-top:14px;padding:16px 18px;border:1px dashed var(--line);
  border-radius:12px;background:var(--tint,rgba(163,36,86,.04));max-width:52ch;
}
.locked b{display:block}

/* SWOT: four quadrants that read as one object — same edges, same inner
   rhythm, distinguished only by the colour of the rule at the top. */
.swotgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.quad{border:1px solid var(--line);border-radius:13px;background:var(--surface);
      padding:18px 19px;border-top:3px solid var(--line)}
.quad.s{border-top-color:#3f7a5e}
.quad.w{border-top-color:#b8761f}
.quad.o{border-top-color:var(--rose)}
.quad.t{border-top-color:#a33a2a}
.quad header{display:flex;flex-direction:column;gap:3px;margin-bottom:13px}
.quad h3{margin:0;font-size:1.05rem}
.quad .qi{display:flex;flex-direction:column;gap:3px;padding:9px 0;
          border-top:1px solid var(--line)}
.quad .qi:first-of-type{border-top:0;padding-top:0}
.quad .qi b{font-weight:600;line-height:1.45}
@media (max-width:760px){ .swotgrid{grid-template-columns:1fr} }
@media print{
  .swotgrid{grid-template-columns:1fr 1fr}
  .quad{break-inside:avoid}
}