/* UI 3 "Sutra" public site: the one shared stylesheet of every public page (concept docs/plans/kp_ui3_concept/public.html, approved
   "as it is", Q1-Q6 recommended).  Generated from the concept's CSS (container queries -> media queries, the concept's device frame
   -> the page), plus the few live-page utilities the concept does not draw (FAQ chat, session notice, install card, reviews).
   Tokens are the Sutra tokens; the legacy token names (theme.css) are pointed at them so older page-local rules and inline
   style="" keep working.  Fonts are the self-hosted Fraunces and Source Sans 3 (CSP font-src 'self'). */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/static/fonts/fraunces-var-latin-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/fraunces-var-latin-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }
:root {
  --paper: #f5f3ee; --raised: #fffdf8; --ink: #1b1d45; --ink2: #4b4e70; --ink3: #686a83; --line: #e4e0d5; --line2: #d2ccbc;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gold: #87631c; --gold-hi: #d8a53a; --gold-wash: #f4e9cd; --yes: #2c6849; --yes-wash: #e1eee5; --deny-wash: #efe3dd;
  --brand: #2e3192; --logo: #1B2A6B; --logo-dot: #D94F2B; --sky: #fbfaf6; --glass: rgba(245,243,238,.84);
  --shadow: 0 1px 2px rgba(27,29,69,.05), 0 12px 40px rgba(27,29,69,.07);
  --disp: "Fraunces", "Noto Serif Devanagari", "Iowan Old Style", Georgia, serif;
  --sans: "Source Sans 3", "Noto Sans Devanagari", system-ui, "Segoe UI", sans-serif;
  --devh: 100vh; --ease: cubic-bezier(.2,.7,.2,1);
  --warn: #9a4a2c; --deny: #9a3b2b;

  --primary: var(--ink); --primary-hover: var(--ink2); --primary-dark: var(--ink); --primary-soft: var(--gold-wash); --on-primary: var(--paper); --on-soft-primary: var(--ink);   --card: var(--raised); --bg: var(--paper); --surface: var(--raised); --surface-2: var(--sky); --sunk: var(--sky); --sheet: var(--raised);   --text: var(--ink); --heading: var(--ink); --text-muted: var(--ink2); --muted: var(--ink3); --text-faint: var(--ink3); --faint: var(--ink3);   --line-strong: var(--line2); --success: var(--yes); --likely: var(--brand); --danger: var(--deny); --warning: var(--warn);   --green: var(--yes); --red: var(--deny); --amber: var(--gold); --accent: var(--gold); --sky-gold: var(--gold-hi); --gold-ink: var(--gold); --gold-soft: var(--gold-wash);   --on-sky: var(--ink); --on-sky-muted: var(--ink2); --font-display: var(--disp); --font-serif: var(--disp); --serif: var(--disp); --font-sans: var(--sans);   --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 28px; --s-7: 40px; --s-8: 56px; --s-9: 72px; --s-10: 96px;   --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; --page-max: 1160px; --lh-tight: 1.15; --lh-normal: 1.55;   --shadow-1: var(--shadow); --shadow-2: var(--shadow); --shadow-3: var(--shadow); --dur: .3s; --dur-fast: .18s;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0c0e21; --raised: #14173a; --ink: #ecebff; --ink2: #b8b7d6; --ink3: #8786aa; --line: #252950; --line2: #363b69;
  --gold: #e2bb64; --gold-hi: #f0c96a; --gold-wash: #372f1b; --yes: #8bd1a9; --yes-wash: #15302a; --deny-wash: #35221f;
  --brand: #a3acff; --logo: #f4f1e8; --sky: #101334; --glass: rgba(12,14,33,.82);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.35); --warn: #f0a585; --deny: #f0a493; color-scheme: dark; 
  --primary: var(--ink); --primary-hover: var(--ink2); --primary-dark: var(--ink); --primary-soft: var(--gold-wash); --on-primary: var(--paper); --on-soft-primary: var(--ink);   --card: var(--raised); --bg: var(--paper); --surface: var(--raised); --surface-2: var(--sky); --sunk: var(--sky); --sheet: var(--raised);   --text: var(--ink); --heading: var(--ink); --text-muted: var(--ink2); --muted: var(--ink3); --text-faint: var(--ink3); --faint: var(--ink3);   --line-strong: var(--line2); --success: var(--yes); --likely: var(--brand); --danger: var(--deny); --warning: var(--warn);   --green: var(--yes); --red: var(--deny); --amber: var(--gold); --accent: var(--gold); --sky-gold: var(--gold-hi); --gold-ink: var(--gold); --gold-soft: var(--gold-wash);   --on-sky: var(--ink); --on-sky-muted: var(--ink2); --font-display: var(--disp); --font-serif: var(--disp); --serif: var(--disp); --font-sans: var(--sans);   --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 28px; --s-7: 40px; --s-8: 56px; --s-9: 72px; --s-10: 96px;   --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; --page-max: 1160px; --lh-tight: 1.15; --lh-normal: 1.55;   --shadow-1: var(--shadow); --shadow-2: var(--shadow); --shadow-3: var(--shadow); --dur: .3s; --dur-fast: .18s;
} }
:root[data-theme="dark"] {
  --paper: #0c0e21; --raised: #14173a; --ink: #ecebff; --ink2: #b8b7d6; --ink3: #8786aa; --line: #252950; --line2: #363b69;
  --gold: #e2bb64; --gold-hi: #f0c96a; --gold-wash: #372f1b; --yes: #8bd1a9; --yes-wash: #15302a; --deny-wash: #35221f;
  --brand: #a3acff; --logo: #f4f1e8; --sky: #101334; --glass: rgba(12,14,33,.82);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.35); --warn: #f0a585; --deny: #f0a493; color-scheme: dark; 
  --primary: var(--ink); --primary-hover: var(--ink2); --primary-dark: var(--ink); --primary-soft: var(--gold-wash); --on-primary: var(--paper); --on-soft-primary: var(--ink);   --card: var(--raised); --bg: var(--paper); --surface: var(--raised); --surface-2: var(--sky); --sunk: var(--sky); --sheet: var(--raised);   --text: var(--ink); --heading: var(--ink); --text-muted: var(--ink2); --muted: var(--ink3); --text-faint: var(--ink3); --faint: var(--ink3);   --line-strong: var(--line2); --success: var(--yes); --likely: var(--brand); --danger: var(--deny); --warning: var(--warn);   --green: var(--yes); --red: var(--deny); --amber: var(--gold); --accent: var(--gold); --sky-gold: var(--gold-hi); --gold-ink: var(--gold); --gold-soft: var(--gold-wash);   --on-sky: var(--ink); --on-sky-muted: var(--ink2); --font-display: var(--disp); --font-serif: var(--disp); --serif: var(--disp); --font-sans: var(--sans);   --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 28px; --s-7: 40px; --s-8: 56px; --s-9: 72px; --s-10: 96px;   --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; --page-max: 1160px; --lh-tight: 1.15; --lh-normal: 1.55;   --shadow-1: var(--shadow); --shadow-2: var(--shadow); --shadow-3: var(--shadow); --dur: .3s; --dur-fast: .18s;
}
:root { --devh: 100vh; } @supports (height: 100dvh) { :root { --devh: 100dvh; } }
* { box-sizing: border-box; }
[hidden], .hidden { display: none !important; }
html { -webkit-text-size-adjust: 100%; margin: 0; overflow-x: hidden; max-width: 100%; }
body { background: var(--paper); color: var(--ink); font: 400 15px/1.55 var(--sans); margin: 0; max-width: 100%; overflow-x: clip; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
img[src$="/logo-mark.svg"] { }
:root[data-theme="dark"] img[src$="/logo-mark.svg"] { content: url("/static/logo-mark-dark.svg"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img[src$="/logo-mark.svg"] { content: url("/static/logo-mark-dark.svg"); } }
/* ---------- shared public header (the live SHARED-PUBLIC-HEADER markup, restyled to the Sutra header) ---------- */
header.site-head { position: sticky; top: 0; z-index: 8; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
header.site-head .head-row { height: 60px; display: flex; align-items: center; gap: 14px; padding-inline: 28px; position: relative; }
header.site-head .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
header.site-head .brand svg, header.site-head .brand img { width: 28px; height: 28px; flex: none; }
header.site-head .brand > span, header.site-head .brand > b { font: 600 17px/1 var(--disp); letter-spacing: .005em; white-space: nowrap; }
header.site-head .nav-main { display: flex; gap: 2px; margin-left: 10px; min-width: 0; }
header.site-head .nav-main a { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 14px; color: var(--ink2); text-decoration: none; min-height: 34px; white-space: nowrap; transition: color .2s, background .2s; }
header.site-head .nav-main a:hover { color: var(--ink); background: color-mix(in srgb, var(--raised) 80%, transparent); }
header.site-head .nav-main a[aria-current="page"] { color: var(--ink); font-weight: 600; }
header.site-head .head-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
header.site-head .head-tools .lang, header.site-head .row-tools .lang { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 4px 8px; font-size: 12.5px; color: var(--ink2); cursor: pointer; min-height: 30px; }
header.site-head .theme-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; border-radius: 999px; padding: 6px 9px; min-height: 34px; color: var(--ink2); font-size: 12.5px; cursor: pointer; }
header.site-head .theme-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--raised) 85%, transparent); }
header.site-head .theme-btn svg { width: 15px; height: 15px; }
header.site-head .liveagent { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; font-size: 13.5px; color: var(--ink2); text-decoration: none; white-space: nowrap; }
header.site-head .liveagent:hover { color: var(--ink); }
header.site-head .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yes); box-shadow: 0 0 0 3px var(--yes-wash); animation: breathe 3.2s ease-in-out infinite; }
header.site-head .head-tools .btn { border: 0; background: none; color: var(--ink2); font-size: 13.5px; font-weight: 400; padding: 6px 8px; min-height: 34px; box-shadow: none; }
header.site-head .head-tools .btn:hover { color: var(--ink); }
header.site-head .head-tools .btn.btn-primary { background: var(--ink); color: var(--paper); border-radius: 999px; padding: 6px 15px; font-weight: 600; }
header.site-head .drawer { display: none; }
header.site-head .drawer > summary { list-style: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink2); }
header.site-head .drawer > summary::-webkit-details-marker { display: none; }
header.site-head .drawer > summary:hover { background: color-mix(in srgb, var(--raised) 85%, transparent); color: var(--ink); }
header.site-head .drawer-panel { position: absolute; z-index: 9; right: 16px; top: 56px; width: min(300px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--line2); border-radius: 16px; background: var(--raised); box-shadow: var(--shadow); display: grid; gap: 1px; animation: rise .25s var(--ease) both; }
header.site-head .drawer-panel > a { padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 15px; display: flex; align-items: center; }
header.site-head .drawer-panel > a:hover { background: var(--paper); }
header.site-head .drawer-panel .row-tools { display: flex; gap: 8px; align-items: center; padding: 10px 12px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
/* signed in: static/site-auth.js puts its one account menu where Sign in was (unchanged script, restyled) */
header.site-head .sa-menu { position: relative; }
header.site-head .sa-trigger { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 3px 6px 3px 3px; border-radius: 999px; cursor: pointer; color: var(--ink2); min-height: 38px; }
header.site-head .sa-trigger:hover { background: color-mix(in srgb, var(--raised) 85%, transparent); color: var(--ink); }
header.site-head .sa-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--gold-wash); color: var(--ink); flex: none; }
header.site-head .sa-name { font-size: 13.5px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
header.site-head .sa-caret { font-size: 8px; color: var(--ink3); }
header.site-head .sa-pop { position: absolute; z-index: 9; right: 0; top: 46px; min-width: 240px; padding: 6px; border: 1px solid var(--line2); border-radius: 14px; background: var(--raised); box-shadow: var(--shadow); display: none; gap: 1px; }
header.site-head .sa-pop.open { display: grid; animation: rise .25s var(--ease) both; }
header.site-head .sa-head { padding: 8px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: grid; }
header.site-head .sa-head b { font-weight: 600; font-size: 14px; }
header.site-head .sa-head span { font-size: 12px; color: var(--ink3); }
header.site-head .sa-item { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; color: var(--ink); text-decoration: none; display: block; }
header.site-head .sa-item:hover { background: var(--paper); }
header.site-head .sa-item.danger { color: var(--deny); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; }
@media (max-width: 1080px) {
  header.site-head .nav-main { display: none; }
  header.site-head .drawer { display: block; }
}
@media (max-width: 760px) {
  header.site-head .hide-md { display: none !important; }
  header.site-head .sa-name, header.site-head .sa-caret { display: none; }
}
@media (max-width: 520px) {
  header.site-head .hide-sm { display: none !important; }
  header.site-head .head-row { padding-inline: 16px; gap: 8px; }
  header.site-head .brand > span, header.site-head .brand > b { font-size: 15px; }
  header.site-head .head-tools { gap: 2px; }
}
@media (max-width: 380px) {
  header.site-head .head-row { padding-inline: 10px; gap: 6px; }
  header.site-head .brand { gap: 6px; }
  header.site-head .brand > span { font-size: 13.5px; }
  header.site-head .head-tools .btn.btn-primary { padding: 6px 11px; font-size: 13px; }
}
/* header row: legacy .nav / header rules of the older pages (components.css, page-local) must not leak into the Sutra header */
header.site-head { position: sticky; top: 0; z-index: 50; padding: 0; margin: 0; box-shadow: none; }
header.site-head .head-row.nav { display: flex; align-items: center; gap: 14px; height: 60px; max-width: 1160px; margin: 0 auto; padding: 0 28px; position: relative; flex-wrap: nowrap; }
@media (max-width: 520px) { header.site-head .head-row.nav { padding-inline: 16px; gap: 8px; } }
@media (max-width: 380px) { header.site-head .head-row.nav { padding-inline: 10px; gap: 6px; } }
/* "Back to the app" (docs/plans/kp_nav_links_and_public_session_plan.md section 3): first crumb, or the top of main */
.kp-backapp { display: inline-flex; align-items: center; gap: 6px; color: var(--ink) !important; font-weight: 600; text-decoration: none !important; border-radius: 999px; }
.kp-backapp:hover { color: var(--gold) !important; }
.kp-backbar { margin: 0; padding: 12px 28px 0; font-size: 13.5px; }
/* site-auth.js drops its own crumb line straight into <main> (no .wrap): give it the header column so it lines up with the logo */
.pg main > p.crumbs, .pg main > .kp-backbar { box-sizing: border-box; max-width: 1160px; margin-inline: auto; padding-inline: 28px; }
.kp-backbar .kp-backapp { border: 1px solid var(--line2); background: var(--raised); padding: 5px 14px 5px 12px; min-height: 32px; }
@media (max-width: 520px) { .kp-backbar { padding-inline: 18px; } .pg main > p.crumbs, .pg main > .kp-backbar { padding-inline: 16px; } }

/* ---------- page basics, shared by every public page ---------- */
.pg { font-size: 16px; line-height: 1.6; }
.pg a { color: inherit; }
.pg main a:not(.btn):not(.tile):not(.hub-card):not(.door):not(.kp-backapp), .pg .prose a { text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.pg main a:not(.btn):not(.tile):not(.hub-card):not(.door):hover { text-decoration-color: var(--gold-hi); }
.wrap { max-width: 1160px; margin-inline: auto; padding-inline: 28px; }
@media (max-width: 520px) { .wrap { padding-inline: 18px; } }
/* pages that still load d1.css/components.css (.d1-page .wrap, 16px) keep the one Sutra column (specificity 0,2,0, so the page-specific .wrap rules that follow still win) */
.pg:where(:not(.pg-doc)) .wrap { padding-inline: 28px; }
@media (max-width: 520px) { .pg:where(:not(.pg-doc)) .wrap { padding-inline: 18px; } }
.pg h1, .pg h2, .pg h3, .pg h4 { color: var(--ink); text-wrap: balance; }
.pg h1 { margin: 0; font: 500 clamp(32px, 4.4cqi, 52px)/1.06 var(--disp); letter-spacing: -.012em; font-variation-settings: "opsz" 120; }
.pg h2 { margin: 0 0 12px; font: 500 clamp(25px, 2.7cqi, 34px)/1.14 var(--disp); letter-spacing: -.006em; font-variation-settings: "opsz" 72; }
.pg h3 { margin: 0 0 6px; font: 600 16.5px/1.35 var(--sans); }
.pg p { margin: 0 0 12px; }
.kicker, .pg .eyebrow, .tp-intro .kicker { margin: 0 0 10px; font: 600 11.5px/1.35 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums; }
.pg .crumbs { margin: 22px 0 18px; font-size: 13px; color: var(--ink3); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.crumbs a { color: var(--ink2); }
.muted { color: var(--ink3); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line2); background: var(--raised); color: var(--ink); border-radius: 999px; padding: 9px 18px; min-height: 42px; font: 600 14.5px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: transform .15s, border-color .2s, background .2s; white-space: nowrap; }
.btn:hover { border-color: var(--gold-hi); }
.btn:active { transform: scale(.98); }
.btn.solid, .btn.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.gold { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.small, .btn.btn-sm { padding: 5px 14px; min-height: 34px; font-size: 13.5px; }
.btn.btn-ghost { background: none; }
.btn.btn-lg { min-height: 48px; padding: 11px 24px; font-size: 15.5px; }
.btn[disabled] { opacity: .5; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.card { background: var(--raised); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; box-shadow: var(--shadow); }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 11px; font: 600 12.5px/1.4 var(--sans); background: var(--paper); color: var(--ink2); border: 1px solid var(--line); white-space: nowrap; }
.chip.strong { background: var(--yes-wash); color: var(--yes); border-color: transparent; }
.chip.strong .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yes); }
.chip.possible { background: var(--gold-wash); color: var(--gold); border-color: transparent; }
.chip.none { background: var(--deny-wash); color: var(--deny); border-color: transparent; }
.chip.count { background: none; }
.grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .grid.c3, .grid.c4, .grid.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .grid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); text-decoration: none; color: var(--ink2); font-size: 14px; line-height: 1.5; transition: border-color .2s, transform .2s var(--ease); min-width: 0; }
a.tile:hover { border-color: var(--gold-hi); transform: translateY(-2px); }
.tile b { color: var(--ink); font: 600 15.5px/1.3 var(--sans); }
.tile .tico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-wash); color: var(--gold); font: 600 17px/1 var(--disp); margin-bottom: 8px; }
.tile .go { margin-top: auto; padding-top: 8px; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.callout { border-left: 2px solid var(--gold-hi); padding: 14px 18px; background: var(--sky); border-radius: 0 14px 14px 0; color: var(--ink2); font-size: 15px; }
.callout b { color: var(--ink); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 15px 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-weight: 600; font-size: 16px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--ink3); border-bottom: 1.5px solid var(--ink3); transform: rotate(45deg); transition: transform .3s; flex: none; margin-right: 4px; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { margin: 0 0 16px; color: var(--ink2); max-width: 62ch; }
.kp-table { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.kp-table th, .kp-table td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); }
.kp-table th { font-weight: 600; color: var(--ink3); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.table-wrap, .rp-tw { overflow-x: auto; }
code { font: 500 .9em/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--sky); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; }

/* footer: each page keeps its own footer links (Recommended in Q2), drawn one way */
.pg footer { margin-top: 64px; border-top: 1px solid var(--line); background: var(--sky); color: var(--ink2); font-size: 14px; }
.pg footer .wrap { padding-block: 36px 28px; }
.foot-grid { display: grid; gap: 28px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .foot-grid { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); } }
.foot-grid > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.foot-grid h4 { margin: 0 0 6px; font: 600 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.pg footer a { color: var(--ink2); text-decoration: none; }
.pg footer a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-hi); text-underline-offset: 3px; }
.pg footer .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-bottom: 4px; }
.pg footer .brand img, .pg footer .brand svg { width: 28px; height: 28px; flex: none; }
.pg footer .brand > span { font-size: 16px; }
.foot-bottom, .pg footer .fine { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink3); }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.footlinks { display: flex; flex-wrap: wrap; gap: 6px 18px; flex: 1 1 420px; }
.foot-inner > p { margin: 0; font-size: 12.5px; color: var(--ink3); }

/* ---------- the wheel (horary v9 / Home, unchanged) ---------- */
.wheelw { position: relative; width: min(100%, 470px); aspect-ratio: 1; max-width: 100%; container: wheel / inline-size; }
.wheel { width: 100%; height: 100%; display: block; overflow: visible; }
.wheel text { font-family: var(--sans); }
.zring { fill: var(--sky); stroke: var(--line2); stroke-width: 1; }
.zline { stroke: var(--line2); stroke-width: 1; }
.zlab { fill: var(--ink3); font-size: 11px; letter-spacing: .06em; text-anchor: middle; dominant-baseline: central; }
.hs { fill: transparent; transition: fill .5s var(--ease); }
.cl { stroke: var(--line2); stroke-width: 1; transition: stroke .4s, stroke-width .4s; }
.cl.c1 { stroke: var(--ink3); stroke-width: 1.6; }
.cl.on { stroke: var(--gold-hi); stroke-width: 3; }
.hn { fill: var(--ink3); font-size: 11px; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; transition: fill .4s; }
.hn.on { fill: var(--ink); font-weight: 700; }
.pl { cursor: pointer; transition: opacity .45s var(--ease); }
.pl circle.dot { fill: var(--raised); stroke: var(--ink2); stroke-width: 1.2; transition: stroke .3s; }
.pl text { fill: var(--ink); font-size: 12px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.pl .halo { fill: none; stroke: var(--gold-hi); stroke-width: 2; opacity: 0; transition: opacity .4s; }
.pl.on .halo { opacity: 1; } .pl.on circle.dot { stroke: var(--gold); }
.wheel.focus .pl:not(.on) { opacity: .32; }
.rp path { fill: var(--gold-hi); transition: opacity .4s; } .rp text { fill: var(--gold); font-size: 10.5px; font-weight: 700; text-anchor: middle; dominant-baseline: central; letter-spacing: .04em; }
.rp g { transition: opacity .4s; }
.rp.dim g { opacity: .35; } .rp.dim g.on { opacity: 1; }
.disc { fill: var(--raised); stroke: var(--line); }
.wheel.faint .cl:not(.c1):not(.on) { opacity: .55; }
.wheel.faint .zring { stroke: var(--line); }
.center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.center > div { text-align: center; width: 36%; transform: translateY(-3%); }
.center small { display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.center .big { display: block; margin: 6px 0 4px; font: 500 clamp(14px, 7.8cqi, 34px)/1.05 var(--disp); color: var(--ink); font-variation-settings: "opsz" 144; font-variant-numeric: tabular-nums; }
.center .sub { display: block; font: 600 12.5px/1.2 var(--sans); color: var(--ink2); letter-spacing: .02em; }
.center .nm { display: block; margin: 4px 0; font: 500 clamp(12px, 5.2cqi, 24px)/1.1 var(--disp); color: var(--ink); }
.live { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-hi); animation: breathe 3.2s ease-in-out infinite; }
@container wheel (max-width: 290px) { .center small { font-size: 8.5px; letter-spacing: .1em; } .center .sub { font-size: 10.5px; } }
.boot .cl, .boot .zline { stroke-dasharray: 1; animation: draw .9s var(--ease) both; }
.boot .pl { animation: rise .6s var(--ease) both; }
.boot + .center > div, .boot ~ .center > div { animation: rise .8s var(--ease) .5s both; }

/* the sky pane: shared by Landing, Ruling Planets and the famous chart */
.skyp { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 22px 20px 12px; }
.skyhead { width: min(100%, 560px); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; text-align: center; }
.skyhead .eyebrow, .skyp .eyebrow { margin: 0; text-wrap: balance; }
.skyhead .eyebrow { min-height: 16px; }
.skyslot { display: contents; }
.mslot { position: relative; width: min(100%, 560px); min-height: 22px; display: grid; }
.moment { width: 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink3); font-variant-numeric: tabular-nums; transition: opacity .2s; }
.moment b { color: var(--ink); font-weight: 600; }
.readout { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; font-size: 13px; color: var(--ink); text-align: center; text-wrap: balance; opacity: 0; pointer-events: none; transition: opacity .2s; font-variant-numeric: tabular-nums; }
.mslot.reading .readout { opacity: 1; } .mslot.reading .moment { opacity: 0; }
.rprow { width: min(100%, 560px); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; border-top: 1px solid var(--line); padding-top: 10px; min-height: 34px; }
.rps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.rps > small { font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-right: 4px; }
.rpc { border: 1px solid var(--line2); background: var(--raised); border-radius: 8px; padding: 2px 7px; min-width: 30px; font: 600 12.5px/1.3 var(--sans); color: var(--ink); cursor: default; display: inline-grid; justify-items: center; transition: border-color .2s; }
.rpc:hover, .rpc.on { border-color: var(--gold-hi); }
.rpc:focus-visible { border-color: var(--gold); }
.rpc.day { border-style: dashed; }
.rpc.ag { color: var(--ink2); border-style: dotted; }
@media (min-width: 940px) {
  .skyslot { display: grid; flex: 1 1 0; min-height: 200px; width: 100%; container-type: size; place-items: center; }
  .skyslot .wheelw, .skyslot .chartbox { width: max(200px, min(100cqw, 100cqh, 470px)); }
}

/* ---------- LANDING ---------- */
.pg-landing .stars, .pg-landing .nak-ring { display: none; }
.pg-landing .hero { position: relative; }
.pg-landing .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: none; padding: 0; }
.pg-landing .hero-grid > .skyp { order: 0; }
.pg-landing .hero-grid > div:nth-child(2) { padding: 6px 20px 8px; }
.pg-landing .eyebrow-sky { margin: 0 0 14px; font: 600 11.5px/1.35 var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--gold) !important; }
.pg-landing .hero-title { margin: 0; font: 500 clamp(32px, 4.3cqi, 54px)/1.06 var(--disp); letter-spacing: -.014em; color: var(--ink); text-wrap: balance; font-variation-settings: "opsz" 144; }
.pg-landing .hero-title em { font-style: normal; color: var(--gold); }
.pg-landing .lede { margin: 16px 0 0; font: 400 clamp(17px, 1.75cqi, 19px)/1.5 var(--disp); color: var(--ink2); max-width: 34em; font-variation-settings: "opsz" 24; }
.ask { margin-top: 22px; display: grid; gap: 10px; }
.ask > label { font: 600 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.ask-row { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 18px; border: 1px solid var(--line2); border-radius: 999px; background: var(--raised); box-shadow: var(--shadow); max-width: 560px; transition: border-color .2s; }
.ask-row:focus-within { border-color: var(--gold); }
.ask-row input { flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; padding: 8px 0; }
.ask-row input::placeholder { color: var(--ink3); }
.ask-row .btn { min-height: 40px; padding: 8px 20px; }
.examples { display: flex; flex-wrap: wrap; gap: 8px; max-width: 600px; }
.examples button { border: 1px solid var(--line2); background: none; border-radius: 999px; padding: 5px 13px; min-height: 34px; font-size: 13.5px; color: var(--ink2); cursor: pointer; transition: border-color .2s, color .2s; }
.examples button:hover { border-color: var(--gold-hi); color: var(--ink); }
.ask .hint { margin: 2px 0 0; font-size: 13px; color: var(--ink3); max-width: 46em; }
.hero-card-wrap { padding: 30px 20px 10px; }
.label-row { display: flex; gap: 8px; margin: 0 0 12px; }
.badge-sample { font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); border: 1px solid var(--line2); border-radius: 999px; padding: 6px 10px; }
.hero-card-wrap .card { display: grid; gap: 4px 40px; grid-template-columns: minmax(0, 1fr); padding: 26px 28px; }
.hero-card-wrap .card .q { margin: 2px 0 14px; font: 500 22px/1.25 var(--disp); color: var(--ink); }
.hero-card-wrap .when .lead { margin: 0; font-size: 13px; color: var(--ink3); letter-spacing: .02em; }
.hero-card-wrap .range { margin: 2px 0 0; font: 500 clamp(26px, 3.2cqi, 36px)/1.12 var(--disp); color: var(--ink); font-variation-settings: "opsz" 120; }
.hero-card-wrap .range small { display: block; margin-top: 8px; font: 400 13.5px/1.45 var(--sans); color: var(--ink2); }
.hero-card-wrap .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.hero-card-wrap .plain { margin: 0 0 8px; font-size: 15px; color: var(--ink); }
.hero-card-wrap .honest { margin: 0; font-size: 13.5px; color: var(--ink3); }
.hero-card-wrap .actions { margin-top: 16px; }
.prib { margin-top: 18px; } /* decorative period ribbon (aria-hidden) */
.prib .bar { display: flex; height: 30px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line2); background: var(--raised); }
.prib .bar i { flex: var(--w) 1 0; border-left: 1px solid var(--line); }
.prib .bar i:first-child { border-left: 0; }
.prib .bar i.lk { background: var(--gold-wash); } .prib .bar i.sg { background: var(--gold-hi); }
.prib .tk { position: relative; height: 18px; font-size: 11px; color: var(--ink3); }
.prib .tk span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.prib .tk span::before { content: attr(data-t); }
@media (min-width: 940px) {
  .pg-landing .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); grid-template-rows: minmax(calc(var(--devh) - 61px), auto) auto; }
  .pg-landing .hero-grid > .skyp { grid-row: 1; grid-column: 1; border-right: 1px solid var(--line); padding: 20px 28px 16px 40px; }
  .pg-landing .hero-grid > div:nth-child(2) { grid-row: 1; grid-column: 2; align-self: center; padding: 26px 56px 26px 52px; }
  .pg-landing .hero-card-wrap { grid-column: 1 / -1; padding: 46px 56px 8px; border-top: 1px solid var(--line); }
  .hero-card-wrap .card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; padding: 30px 34px; }
  .hero-card-wrap .card > .eyebrow { grid-column: 1; grid-row: 1; } .hero-card-wrap .card > .q { grid-column: 1; grid-row: 2; }
  .hero-card-wrap .card > .when { grid-column: 1; grid-row: 3; } .hero-card-wrap .card > .prib { grid-column: 1; grid-row: 4 / span 2; }
  .hero-card-wrap .card > .chips, .hero-card-wrap .card > .plain, .hero-card-wrap .card > .honest, .hero-card-wrap .card > .actions { grid-column: 2; }
  .hero-card-wrap .card > .chips { grid-row: 1; margin-top: 2px; }
  .hero-card-wrap .card > .plain { grid-row: 2; } .hero-card-wrap .card > .honest { grid-row: 3; } .hero-card-wrap .card > .actions { grid-row: 4; }
}
@media (max-height: 700px) { @media (min-width: 940px) {
  .pg-landing .hero-title { font-size: clamp(30px, 3.4cqi, 40px); }
  .pg-landing .lede { margin-top: 10px; font-size: 16.5px; }
  .ask { margin-top: 14px; gap: 8px; }
  .pg-landing .hero-grid > div:nth-child(2) { padding-block: 16px; }
  .pg-landing .hero-grid > .skyp { padding-top: 14px; gap: 8px; }
} }
.section { padding-block: 72px 8px; }
.section.tight { padding-block: 56px 8px; }
.section.band { background: var(--sky); border-block: 1px solid var(--line); padding-block: 64px 60px; margin-top: 64px; }
.section.band + .section { padding-top: 64px; }
.section-head { max-width: 46rem; margin-bottom: 28px; }
.section-head > p:not(.kicker) { color: var(--ink2); font-size: 17px; }
.doors { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.door { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px 30px 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--raised); text-decoration: none; color: var(--ink2); box-shadow: var(--shadow); transition: transform .25s var(--ease), border-color .2s; overflow: hidden; }
.door:hover { transform: translateY(-3px); border-color: var(--gold-hi); }
.door-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font-size: 20px; }
.door h3 { margin: 4px 0 2px !important; font: 500 26px/1.15 var(--disp) !important; }
.door ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.door li { position: relative; padding-left: 22px; font-size: 15px; }
.door li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 9px; height: 5px; border-left: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold); transform: rotate(-45deg); }
.door .go { margin-top: 8px; font-weight: 600; color: var(--ink); }
.door.pro { border-top: 3px solid var(--gold-hi); }
.skynow { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .skynow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.skynow .card { margin: 0; }
.moon { display: flex; gap: 16px; align-items: flex-start; }
.orb { --nak: 0; width: 62px; height: 62px; flex: none; border-radius: 50%; position: relative;
  background: conic-gradient(from calc(var(--nak) * 13.333deg - 90deg), var(--gold-hi) 0 13.333deg, transparent 13.333deg 360deg),
              repeating-conic-gradient(from -90deg, var(--line2) 0 .9deg, transparent .9deg 13.333deg);
  -webkit-mask: radial-gradient(circle, transparent 23px, #000 24px); mask: radial-gradient(circle, transparent 23px, #000 24px); }
.big-star { margin: 2px 0 0 !important; font: 500 26px/1.15 var(--disp); color: var(--ink); }
.rp-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.rp-list .rp { display: grid; justify-items: center; gap: 1px; border: 1px solid var(--line2); border-radius: 10px; padding: 6px 10px; background: var(--paper); min-width: 64px; }
.rp-list .rp b { font: 600 15px/1.2 var(--sans); color: var(--ink); }
.rp-list .rp span { font-size: 11px; color: var(--ink3); }
.rp-list .rp.day { border-style: dashed; }
.stamp { font-size: 13px; color: var(--ink3); margin: 0; }
.pg-landing .how { list-style: none; margin: 0 0 28px; padding: 0; position: relative; counter-reset: how; display: grid; gap: 4px; max-width: 46rem; }
.pg-landing .how::before { content: ""; position: absolute; left: 13px; top: 18px; bottom: 18px; width: 1px; background: linear-gradient(var(--gold-hi), var(--gold-hi) 70%, var(--line2)); }
.pg-landing .how li { position: relative; padding: 8px 0 14px 50px; counter-increment: how; }
.pg-landing .how li::before { content: counter(how); position: absolute; left: 0; top: 8px; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-hi); color: var(--raised); font: 600 12.5px/1 var(--sans); box-shadow: 0 0 0 5px var(--gold-wash); }
.pg-landing .how li h3 { margin: 3px 0 4px !important; font: 500 21px/1.25 var(--disp) !important; }
.pg-landing .how li p { color: var(--ink2); margin: 0; }
.callout h3 { font: 600 15px/1.3 var(--sans) !important; margin-bottom: 6px !important; }
@media (min-width: 940px) {
  .pg-landing section[aria-labelledby="how-h"] > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0 64px; align-items: start; }
  .pg-landing section[aria-labelledby="how-h"] .section-head { grid-column: 1; grid-row: 1; }
  .pg-landing section[aria-labelledby="how-h"] .how { grid-column: 2; grid-row: 1 / span 2; margin-top: 30px; }
  .pg-landing section[aria-labelledby="how-h"] .callout { grid-column: 1; grid-row: 2; }
}
.split { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } }
.ticks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 24px; }
.ticks li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 9px; height: 5px; border-left: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold); transform: rotate(-45deg); }
.card h3.sec { font: 600 11.5px/1.3 var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3) !important; margin-bottom: 10px !important; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows .row { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); }
.rows .row:first-child { border-top: 0; }
.rows .main { display: grid; min-width: 0; }
.rows .main b { color: var(--ink); font-weight: 600; }
.rows .main span { font-size: 13.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.pg-landing #ask .tile { min-height: 168px; }
.pg-landing .band .grid.c3 > .tile { background: none; border: 0; border-top: 1px solid var(--gold-hi); border-radius: 0; padding: 18px 0 0; }
.pg-landing .band .grid.c3 > .tile b { font: 500 21px/1.25 var(--disp); margin-bottom: 4px; }
.pg-landing .band .grid.c3 > .tile span { font-size: 15px; }
.desk { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); padding: 34px 30px; border-radius: 24px; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; }
@media (min-width: 940px) { .desk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 44px 48px; align-items: center; gap: 48px; } }
.desk h2 { margin-top: 8px !important; }
.desk p { color: var(--ink2); }
.desk .eyebrow-sky { color: var(--gold) !important; }
.desk .price { font-size: 15px; color: var(--ink2); margin-top: 6px; }
.desk .price b { font: 500 30px/1 var(--disp); color: var(--ink); margin-right: 4px; }
.frame { border: 1px solid var(--line2); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.frame .bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--raised); }
.frame .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); }
.frame .body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 14px; padding: 16px; align-items: center; }
.frame .wheel { width: 100%; height: auto; }
.w-bg { fill: var(--sky); } .w-line { stroke: var(--line2); fill: none; stroke-width: 1; } .w-nak { stroke: var(--line); stroke-width: 1; }
.w-sign { fill: var(--ink3); font-size: 10px; } .w-asc { stroke: var(--ink2); stroke-width: 1.6; } .w-cusp { stroke: var(--line2); stroke-width: 1; }
.w-house { fill: var(--ink3); font-size: 10px; } .w-dot { fill: var(--gold-hi); } .w-pl { fill: var(--ink); font-size: 10.5px; font-weight: 700; } .w-deg { fill: var(--ink3); font-size: 8.5px; }
.frame .kp-table td.pl { font-weight: 700; color: var(--ink); }
.pg-landing #learn h3 { margin-top: 40px !important; font: 600 11.5px/1.3 var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3) !important; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pg-landing #learn h3 + .grid { gap: 0 28px; }
.pg-landing #learn h3 + .grid > .tile { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 0; }
.pg-landing #learn h3 + .grid > .tile:hover { transform: none; }
.pg-landing #learn h3 + .grid > .tile b { font: 500 17px/1.3 var(--disp); }
.pg-landing #learn h3 + .grid > .tile:hover b { text-decoration: underline; text-decoration-color: var(--gold-hi); text-underline-offset: 3px; }
@media (min-width: 940px) { .pg-landing #learn h3 + .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-landing #faq .faq { max-width: 52rem; }
.pg-landing .cta { position: relative; overflow: hidden; margin-top: 72px; padding: 84px 24px 88px; text-align: center; background: var(--sky); border-top: 1px solid var(--line); }
.pg-landing .cta::before { content: ""; position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 3.7deg, color-mix(in srgb, var(--line2) 70%, transparent) 0 .25deg, transparent .25deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 205px, #000 206px, #000 330px, transparent 331px); mask: radial-gradient(circle, transparent 205px, #000 206px, #000 330px, transparent 331px); opacity: .9; }
.pg-landing .cta::after { content: ""; position: absolute; left: 50%; top: 50%; width: 662px; height: 662px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--line2); pointer-events: none; }
.pg-landing .cta .wrap { position: relative; z-index: 1; }
.pg-landing .cta h2 { font-size: clamp(30px, 3.6cqi, 46px); max-width: 16em; margin-inline: auto; }
.pg-landing .cta p { color: var(--ink2); font-size: 17px; }

/* ---------- LEARN (hub and article) ---------- */
.pg-hub article.guide { max-width: 1160px; margin: 0 auto; padding: 0 28px 20px; }
@media (max-width: 520px) { .pg-hub article.guide { padding-inline: 18px; } }
.pg-hub .guide > .eyebrow { display: inline-block; margin: 46px 0 14px; }
.pg-hub .guide > h1 { font-size: clamp(36px, 5cqi, 60px); }
.pg-hub .guide > .dek { margin: 16px 0 6px; max-width: 34em; font: 400 clamp(18px, 1.9cqi, 21px)/1.5 var(--disp); color: var(--ink2); font-variation-settings: "opsz" 24; }
.pg-hub .hub-cluster { margin: 56px 0 0 !important; padding-bottom: 14px; border-bottom: 1px solid var(--line2); display: flex; align-items: baseline; gap: 14px; counter-increment: cl; }
.pg-hub .guide { counter-reset: cl; }
.pg-hub .hub-cluster::before { content: counter(cl, decimal-leading-zero); font: 600 12px/1 var(--sans); letter-spacing: .1em; color: var(--gold); }
.pg-hub .hub-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 36px; }
@media (min-width: 700px) { .pg-hub .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .pg-hub .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-hub .hub-card { display: block; padding: 18px 0 18px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink2); }
.pg-hub .hub-card h3 { margin: 0 0 6px !important; font: 500 18px/1.3 var(--disp) !important; color: var(--ink); transition: color .2s; }
.pg-hub .hub-card p { margin: 0; font-size: 14px; color: var(--ink2); }
.pg-hub .hub-card:hover h3 { text-decoration: underline; text-decoration-color: var(--gold-hi); text-underline-offset: 4px; }
.pg-art .tp-intro { max-width: 50rem; padding-bottom: 8px; }
.pg-art .tp-intro h1 { font-size: clamp(32px, 4.2cqi, 50px); }
.tp-dek { margin-block: 14px 10px !important; font: 400 clamp(18px, 1.9cqi, 21px)/1.5 var(--disp); color: var(--ink2); max-width: 36em; font-variation-settings: "opsz" 24; }
.byline { font-size: 13.5px; color: var(--ink3); }
.read3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 26px; }
.rail { position: sticky; top: 60px; z-index: 3; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin-inline: -18px; padding: 8px 18px; border-block: 1px solid var(--line); }
.rail-h { display: none; }
.rail-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.rail-nav a { flex: none; padding: 4px 12px; border-radius: 999px; font-size: 13px; color: var(--ink2); text-decoration: none !important; border: 1px solid var(--line); }
.rail-nav a[aria-current="true"] { color: var(--ink); border-color: var(--gold-hi); }
@media (min-width: 1100px) {
  .read3 { grid-template-columns: 190px minmax(0, 1fr) 300px; gap: 48px; }
  .rail { position: sticky; top: 92px; align-self: start; margin: 0; padding: 0; background: none; backdrop-filter: none; border: 0; }
  .rail-h { display: block; margin: 0 0 10px; font: 600 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
  .rail-nav { display: grid; gap: 2px; position: relative; padding-left: 14px; }
  .rail-nav::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--line2); }
  .rail-nav a { border: 0; padding: 5px 0; border-radius: 0; font-size: 13.5px; position: relative; }
  .rail-nav a[aria-current="true"]::before { content: ""; position: absolute; left: -15px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--gold-hi); }
  .aside { position: sticky; top: 92px; align-self: start; }
}
@media (min-width: 760px) and (max-width: 1099px) { .read3 { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 36px; } .rail { grid-column: 1 / -1; } }
.prose { min-width: 0; max-width: 42rem; font-size: 17.5px; line-height: 1.72; color: var(--ink); }
.prose > h2, .prose .faq-h { margin: 46px 0 14px !important; font: 500 clamp(24px, 2.4cqi, 30px)/1.2 var(--disp) !important; scroll-margin-top: 80px; }
.prose > h2:first-child { margin-top: 0 !important; }
.prose p { margin: 0 0 18px; }
.prose strong { font-weight: 600; }
.houses { display: grid; gap: 12px; margin: 22px 0 26px; }
.hgroup { border-radius: 16px; padding: 16px 18px; border: 1px solid var(--line); font-size: 15.5px; line-height: 1.55; }
.hgroup p { margin: 0 0 10px; }
.hgroup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hgroup li { display: flex; gap: 10px; align-items: baseline; color: var(--ink2); }
.hgroup.req { background: var(--yes-wash); border-color: transparent; }
.hgroup { position: relative; padding-left: 30px; overflow: hidden; }
.hgroup::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; }
.hgroup.req::before { background: color-mix(in srgb, var(--yes) 30%, transparent); }
.hgroup.sup { background: var(--raised); }
.hgroup.sup::before { background: radial-gradient(circle, color-mix(in srgb, var(--yes) 55%, transparent) 1.3px, transparent 1.7px) 0 0 / 8px 8px, var(--yes-wash); }
.hgroup.obs { background: var(--deny-wash); border-color: transparent; }
.hgroup.obs::before { background: repeating-linear-gradient(45deg, transparent 0 4px, var(--line2) 4px 6px); }
.hn-badge { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line2); font: 700 12.5px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.learn-faq { margin-top: 10px; }
.aside { display: grid; gap: 16px; align-content: start; min-width: 0; }
.cusp-card .big { margin: 0 0 14px; font: 500 21px/1.25 var(--disp); color: var(--ink); }
.cusp-card dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; margin: 0 0 18px; align-items: center; }
.cusp-card dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.cusp-card dd { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.cusp-card dd.need .hn-badge { background: var(--yes-wash); border-color: transparent; color: var(--yes); }
.cusp-card dd.against .hn-badge { background: var(--deny-wash); border-color: transparent; color: var(--deny); }
.hring { position: relative; width: 168px; aspect-ratio: 1; margin: 0 auto 16px; } /* decorative 12-house ring, aria-hidden; numbers are CSS, not text */
.hring svg { width: 100%; height: 100%; display: block; }
.hring .hseg { fill: var(--sky); stroke: var(--line2); stroke-width: 1; }
.hring .hseg.req { fill: var(--yes-wash); } .hring .hseg.sup { fill: url(#hdots); } .hring .hseg.obs { fill: url(#hhatch); }
.hring .cap { fill: var(--raised); stroke: var(--line); }
.hring span { position: absolute; transform: translate(-50%, -50%); font: 600 10.5px/1 var(--sans); color: var(--ink3); font-variant-numeric: tabular-nums; }
.hring span::before { content: attr(data-n); }
.hring span.on { color: var(--ink); font-weight: 700; }
.hring b { position: absolute; inset: 0; display: grid; place-items: center; font: 500 12px/1.1 var(--disp); color: var(--ink2); text-align: center; }
.hring b::before { content: attr(data-t); white-space: pre; }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; }
.link-list li { border-top: 1px solid var(--line); }
.link-list li:first-child { border-top: 0; }
.link-list a { display: block; padding: 9px 0; font-size: 14.5px; color: var(--ink) !important; text-decoration: none !important; }
.link-list a:hover { color: var(--gold) !important; }
.aside .card h3, .tp-related .card h3 { font: 600 11.5px/1.3 var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3) !important; margin-bottom: 8px !important; }
.cta-sky { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 56px 0 0; padding: 30px 32px; border-radius: 22px; background: var(--ink); color: var(--paper); }
.cta-sky .stars { display: none; }
.cta-sky h2 { margin: 0 !important; color: var(--paper) !important; font-size: clamp(22px, 2.4cqi, 28px) !important; max-width: 22em; }
.cta-sky .btn { background: var(--gold-hi); color: #2a1f05; border-color: var(--gold-hi); }
.cta-sky::after { content: ""; position: absolute; right: -90px; top: 50%; width: 260px; height: 260px; transform: translateY(-50%); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); box-shadow: 0 0 0 36px color-mix(in srgb, var(--paper) 4%, transparent); pointer-events: none; }
.cta-sky > * { position: relative; z-index: 1; }
.tp-related { margin-top: 56px; }
.tp-related > h2 { font-size: clamp(22px, 2.3cqi, 28px) !important; }
.tp-related .tile .tico { width: 32px; height: 32px; font-size: 15px; }

/* ---------- SKY + READING split (Ruling Planets, famous chart): the approved frame ---------- */
.pg-rp main > .wrap, .pg-chart main > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) {
  .pg-rp main > .wrap, .pg-chart main > .wrap { max-width: none; padding: 0; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); column-gap: 0; align-items: start; }
  .pg-rp main > .wrap > *, .pg-chart main > .wrap > *, .pg-chart .tp-intro > *, .pg-chart .chart-top > * { grid-column: 2; margin-inline: 52px 56px; min-width: 0; }
  .pg-rp main > .wrap > .skyp { grid-column: 1; grid-row: 1 / span 40; margin: 0; position: sticky; top: 61px; height: calc(var(--devh) - 62px); border-right: 1px solid var(--line); padding: 22px 28px 14px 40px; }
}

/* ---------- RULING PLANETS ---------- */
.rp-intro { margin-bottom: 18px; }
.rp-dek { margin: 12px 0 0 !important; font: 400 clamp(17px, 1.8cqi, 20px)/1.5 var(--disp); color: var(--ink2); }
.rp-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.rp-field { display: grid; gap: 4px; flex: 1 1 220px; position: relative; }
.rp-field label { font: 600 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.rp-field input { border: 1px solid var(--line2); border-radius: 12px; background: var(--raised); padding: 10px 14px; font-size: 16px; min-height: 44px; outline: none; }
.rp-field input:focus { border-color: var(--gold); }
.rp-status { margin: 6px 0 0 !important; font-size: 13px; color: var(--ink3); min-height: 0; }
.rp-live { margin-top: 18px; }
.rp-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: center; margin-bottom: 4px; }
.rp-head .eyebrow { margin: 0 !important; }
.rp-stamp { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink3); }
.rp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-hi); animation: breathe 3.2s ease-in-out infinite; }
.rp-live h2 { font-size: clamp(22px, 2.3cqi, 28px) !important; margin: 4px 0 0 !important; }
.rp-sub { margin: 0 0 10px !important; color: var(--ink3); font-size: 13.5px; }
.rp-rank { list-style: none; margin: 0; padding: 0; position: relative; }
.rp-rank::before { content: ""; position: absolute; left: 12px; top: 18px; bottom: 18px; width: 1px; background: var(--line2); }
.rp-rank li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; padding: 9px 10px 9px 0; border-radius: 12px; cursor: pointer; transition: background .25s; }
.rp-rank li:hover, .rp-rank li.on { background: color-mix(in srgb, var(--gold-wash) 55%, transparent); }
.rp-n { position: relative; z-index: 1; width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--gold); color: var(--gold); font: 600 11.5px/1 var(--sans); }
.rp-rank li.on .rp-n { background: var(--gold-hi); border-color: var(--gold-hi); color: var(--raised); box-shadow: 0 0 0 4px var(--gold-wash); }
.rp-main { display: grid; gap: 1px; }
.rp-main b { font: 600 16px/1.3 var(--sans); color: var(--ink); }
.rp-main > span { font-size: 13.5px; color: var(--ink2); }
.rp-agent .rp-n { border-style: dashed; }
.rp-flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.rp-flag { font: 600 11px/1.4 var(--sans); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--ink2); }
.rp-flag.retro { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.rp-flag.agent { color: var(--gold); border-color: var(--gold); }
.rp-live h3 { margin: 18px 0 6px !important; font: 600 11.5px/1.3 var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3) !important; }
.rp-notes { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--ink2); font-size: 14.5px; }
.rp-notes li.calm { color: var(--ink3); }
details.more { margin-top: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
details.more summary { list-style: none; cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 14.5px; display: flex; justify-content: space-between; gap: 12px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--ink3); border-bottom: 1.5px solid var(--ink3); transform: rotate(45deg); flex: none; margin-top: 4px; }
details.more[open] summary::after { transform: rotate(-135deg); }
details.more .inner { padding-bottom: 12px; font-size: 14px; color: var(--ink2); }
.rp-table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.rp-table th, .rp-table td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); }
.rp-table th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.rp-table .muted-cell { color: var(--ink3); }
.rp-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 8px 0 12px; }
.rp-kv dt { color: var(--ink3); font-size: 13px; } .rp-kv dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-share { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.rp-box { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--sky); font-size: 14.5px; }
.rp-box p { margin: 0 0 10px !important; }
.rp-save-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-snippet { margin: 0; white-space: pre-wrap; word-break: break-all; font: 12.5px/1.5 ui-monospace, Consolas, monospace; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--ink2); }
.rp-prose { margin-top: 48px; max-width: 44rem; }
.rp-prose > h2 { margin-top: 40px !important; }
.rp-prose > p { color: var(--ink2); }
.rp-prose .grid.c3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .rp-prose .grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 939px) { .pg-rp .skyp { border-block: 1px solid var(--line); margin: 18px -18px 0; background: var(--sky); } }

/* ---------- FAMOUS CHART ---------- */
.pg-chart .tp-intro, .pg-chart .chart-top { display: contents; }
.pg-chart .tp-intro > .kicker { margin-top: 4px; }
.pg-chart section.card[aria-labelledby="ch-h"] { background: none; border: 0; box-shadow: none; padding: 18px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pg-chart .card-h { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; }
.pg-chart .card-h h3 { margin: 0 !important; font: 600 11.5px/1.3 var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--gold) !important; }
.cstyle { display: inline-flex; border: 1px solid var(--line2); border-radius: 999px; padding: 2px; }
.cstyle button { border: 0; background: none; border-radius: 999px; padding: 2px 11px; font-size: 12.5px; cursor: pointer; color: var(--ink3); min-height: 28px; }
.cstyle button[aria-pressed="true"] { background: var(--raised); color: var(--ink); box-shadow: 0 0 0 1px var(--line2); font-weight: 600; }
.chartbox { position: relative; width: min(100%, 470px); aspect-ratio: 1; container: chart / inline-size; }
.chartbox > .wheel.alt { position: absolute; inset: 0; }
.chartbox[data-cs="south"] .alt, .chartbox[data-cs="south"] .center, .chartbox[data-cs="wheel"] .si, .chartbox[data-cs="wheel"] #nch, .chartbox[data-cs="north"] .si, .chartbox[data-cs="north"] #cwh, .chartbox[data-cs="north"] .center { display: none; }
.si { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); border: 1.2px solid var(--line2); background: var(--line2); gap: 1px; }
.si-c { position: relative; background: var(--sky); padding: 3.2cqi 2.2cqi 2cqi; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.si-c .hn { position: absolute; top: 1.6cqi; right: 2cqi; font: 700 2.6cqi/1 var(--sans); color: var(--ink3); fill: none; }
.si-c.asc .hn { color: var(--ink); }
.si-head { display: flex; gap: 1.2cqi; align-items: baseline; font-size: 2.4cqi; color: var(--ink3); white-space: nowrap; }
.si-head .sn { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.si-head .cd { font-variant-numeric: tabular-nums; }
.si-mid { display: grid; gap: .5cqi; margin-top: 1.4cqi; align-content: start; }
.si-mid .pl { font: 600 3cqi/1.15 var(--sans); color: var(--ink); cursor: default; white-space: nowrap; }
.si-mid .pl .cd { font: 400 2.2cqi/1.2 var(--sans); color: var(--ink3); margin-left: .6cqi; }
.si-mid .pl.mal { color: var(--ink); } .si-mid .pl.ben { color: var(--ink); }
.si-asc { font: 700 2.4cqi/1 var(--sans); letter-spacing: .08em; color: var(--ink2); }
.si .ruler { margin-top: auto; font-size: 2.2cqi; color: var(--ink3); }
.si-ctr { grid-row: 2 / span 2; grid-column: 2 / span 2; background: var(--raised); display: grid; align-content: center; justify-items: center; gap: .8cqi; text-align: center; padding: 3cqi; font-size: 2.6cqi; color: var(--ink2); font-variant-numeric: tabular-nums; }
.si-ctr b { font: 500 4.6cqi/1.15 var(--disp); color: var(--ink); margin-bottom: 1cqi; }
.pg-chart section.card[aria-labelledby="ch-h"] > p { width: min(100%, 470px); text-align: center; font-size: 13px; color: var(--ink3); margin: 0 !important; }
.pg-chart section.card[aria-labelledby="ch-h"] > p span { color: var(--ink2) !important; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; }
.facts li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.facts li:first-child { border-top: 0; }
.facts li span { color: var(--ink3); } .facts li b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.source-note { font-size: 13px; color: var(--ink3); margin-top: 12px !important; }
.source-note a { word-break: break-all; }
.pg-chart section.card[aria-labelledby="bd-h"] h3 { font: 600 11.5px/1.3 var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3) !important; }
.pg-chart section.card[aria-labelledby="bd-h"] { margin-top: 18px; }
.tp-section { margin-top: 44px; }
.sec-h { font-size: clamp(24px, 2.5cqi, 30px) !important; }
.sec-sub { color: var(--ink2); }
.kp-table.verdicts td:first-child { color: var(--ink); font-weight: 600; }
.kp-table.verdicts td.deg { color: var(--ink3); }
.pg-chart .tp-related .tile { flex-direction: column; }
.pg-chart .tp-related .grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .pg-chart .tp-related .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.av-ini, .tp-related .ini { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-wash); color: var(--ink); font: 600 13px/1 var(--sans); margin-bottom: 8px; }
@media (min-width: 940px) {
  .pg-chart .chart-top > section.card[aria-labelledby="ch-h"] { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 61px; height: calc(var(--devh) - 62px); border-right: 1px solid var(--line); padding: 22px 28px 14px 40px; margin: 0; }
  .pg-chart main > .wrap > .crumbs, .pg-rp main > .wrap > .crumbs { margin-top: 30px; }
}
@media (max-width: 939px) { .pg-chart section.card[aria-labelledby="ch-h"] { margin: 18px -18px 0; padding: 18px 18px 14px; background: var(--sky); border-block: 1px solid var(--line); border-radius: 0; } }

/* ---------- DESKTOP ---------- */
.pg-desk .hero { padding: 0; }
.pg-desk .hero > .wrap { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); padding-block: 40px 30px; }
.pg-desk .hero .kicker { margin: 0 0 12px; }
.pg-desk .hero h1 { font-size: clamp(40px, 5.6cqi, 72px); letter-spacing: -.02em; }
.pg-desk .hero p.dek { margin: 16px 0 0; font: 400 clamp(17px, 1.75cqi, 19.5px)/1.55 var(--disp); color: var(--ink2); max-width: 32em; font-variation-settings: "opsz" 24; }
.version-badge { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--ink2); border: 1px solid var(--line2); border-radius: 999px; padding: 5px 12px; background: var(--raised); }
.version-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yes); }
.version-badge b { color: var(--ink); font-variant-numeric: tabular-nums; }
.shot { margin: 0; border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; background: var(--raised); box-shadow: 0 2px 4px rgba(27,29,69,.06), 0 30px 70px rgba(27,29,69,.16); align-self: center; }
.shot .bar { display: flex; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); }
.shot img { display: block; width: 100%; height: auto; }
@media (min-width: 940px) {
  .pg-desk .hero > .wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 0 56px; padding-block: 48px 44px; }
  .pg-desk .hero > .wrap > :not(.shot) { grid-column: 1; }
  .pg-desk .hero > .wrap > .shot { grid-column: 2; grid-row: 1 / span 4; }
}
.pg-desk .hero > .wrap > .kicker { align-self: end; }
.pg-desk .after > .card, .pg-desk #portal > .price-card { max-width: 660px; margin: 8px auto 40px; }
.price-card { padding: 28px 30px !important; }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 12px; font: 600 12.5px/1.3 var(--sans); background: var(--paper); color: var(--ink2); border: 1px solid var(--line2); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); }
.pill.on { background: var(--yes-wash); color: var(--yes); border-color: transparent; } .pill.on::before { background: var(--yes); }
.price-big { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 6px; }
.price-big > span { font: 500 46px/1 var(--disp); color: var(--ink); font-variation-settings: "opsz" 144; }
.price-big small { font-size: 15px; color: var(--ink3); }
.price-terms { color: var(--ink2); font-size: 14.5px; }
.entitlements { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 9px; }
.entitlements li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.entitlements svg { width: 17px; height: 17px; flex: none; color: var(--gold); margin-top: 3px; }
#btn_buy, #btn_download { width: 100%; }
.msg { margin: 8px 0 0 !important; font-size: 13.5px; color: var(--ink3); }
.keybox { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin: 10px 0 0; padding: 12px 14px; border: 1px dashed var(--gold); border-radius: 12px; background: var(--gold-wash); }
.keybox code { background: none; border: 0; padding: 0; font-size: 15px; letter-spacing: .06em; color: var(--ink); word-break: break-all; }
.platform-tabs { display: inline-flex; margin-top: 18px; border: 1px solid var(--line2); border-radius: 999px; padding: 2px; }
.platform-tab { border: 0; background: none; border-radius: 999px; padding: 4px 14px; font-size: 13.5px; color: var(--ink2); cursor: pointer; min-height: 32px; }
.platform-tab.active { background: var(--ink); color: var(--paper); font-weight: 600; }
.pg-desk #prod > h2 { margin-top: 56px !important; color: var(--ink) !important; }
.pg-desk #prod > h2 + p { color: var(--ink2) !important; font-size: 16.5px; }
.feature-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature-card { padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); min-width: 0; }
.feature-card > b { display: block; font: 500 19px/1.25 var(--disp); color: var(--ink); margin-bottom: 6px; }
.feature-card p { margin: 0; color: var(--ink2); font-size: 14.5px; }
.feature-grid[style*="1fr"] { grid-template-columns: minmax(0, 1fr) !important; position: relative; gap: 0; }
.feature-grid[style*="1fr"]::before { content: ""; position: absolute; left: 21px; top: 26px; bottom: 26px; width: 1px; background: var(--gold-hi); }
.feature-grid[style*="1fr"] .feature-card { border: 0; background: none; padding: 14px 0 18px 58px; position: relative; border-radius: 0; }
.feature-grid[style*="1fr"] .feature-card::before { content: ""; position: absolute; left: 12px; top: 18px; width: 19px; height: 19px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 5px var(--gold-wash); }
.pg-desk #prod > .callout { margin-top: 18px; }
.gallery { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery figure { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--raised); cursor: zoom-in; transition: transform .25s var(--ease), border-color .2s; }
.gallery figure:hover { transform: translateY(-2px); border-color: var(--gold-hi); }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 14 / 9; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--line); }
.gallery figcaption { padding: 12px 14px 14px; font-size: 13.5px; color: var(--ink2); }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; max-width: min(92vw, 560px); padding: 11px 16px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: 14px; box-shadow: var(--shadow); animation: toastin .3s var(--ease) both; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes breathe { 50% { opacity: .25; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; }  }
.pg footer > .foot-inner { max-width: 1160px; margin: 0 auto; padding: 32px 28px 28px; }
@media (max-width: 520px) { .pg footer > .foot-inner { padding-inline: 18px; } }
.pg footer .foot-grid + p, .pg footer .wrap > p { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink3); }

/* phones: the hero keeps the sky and the question on one screen (the live lines under the wheel return in "The sky right now") */
@media (max-width: 939px) {
  .pg-landing .hero-grid > .skyp { padding-bottom: 0; }
  .pg-landing .hero-grid > .skyp .wheelw { width: min(100%, 268px); }
  .pg-landing .hero-grid > .skyp .mslot, .pg-landing .hero-grid > .skyp .rprow { display: none; }
  .pg-landing .hero-title { font-size: clamp(30px, 8.6cqi, 40px); }
  .pg-landing .lede { font-size: 17px; margin-top: 12px; }
  .ask { margin-top: 16px; }
}
.pg-landing footer { margin-top: 0; }
/* ---- live-page utilities the concept does not draw (carried over, restyled through the Sutra tokens) ---- */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:3000; background:var(--primary); color:var(--on-primary); padding:10px 16px; border-radius:0 0 8px 0; font-weight:700; text-decoration:none; }
.skip-link:focus{ left:0; }
.session-notice{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; background:var(--sheet); border-bottom:1px solid var(--line); padding:10px 16px; font-size:.9rem; text-align:center; }
.session-notice a{ color:var(--primary); font-weight:600; }
.session-notice[hidden]{ display:none; }
.btn.on-sky{ background:transparent; border-color:rgba(244, 241, 232, .45); color:var(--on-sky); }
.foot-legal{ margin-top:var(--s-6); color:var(--text-muted); font-size:.84rem; }
.testimonial{ display:flex; flex-direction:column; gap:8px; padding:var(--s-5); background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); }
.testimonial .t-stars{ color:var(--gold-ink); font-size:.9rem; letter-spacing:2px; }
.testimonial p{ margin:0; color:var(--text); font-family:var(--serif); font-size:1.02rem; line-height:1.55; flex:1; }
.testimonial .who{ font-size:.82rem; color:var(--muted); }
.testimonial .who b{ color:var(--text); font-weight:600; }
.faqchat{ position:fixed; right:20px; bottom:20px; z-index:1600; }
.faqchat-bubble{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--primary); color:var(--on-primary); border:1px solid var(--primary); cursor:pointer; box-shadow:0 6px 18px rgba(20,22,34,.18); }
.faqchat-bubble svg{ width:22px; height:22px; }
.faqchat-bubble:hover{ background:var(--primary-hover); }
.faqchat-panel{ position:absolute; right:0; bottom:64px; width:330px; max-width:calc(100vw - 32px); height:440px; max-height:70vh; background:var(--card); border-radius:14px; box-shadow:0 12px 34px rgba(20,22,34,.18); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line-strong); }
.faqchat-panel.hidden{ display:none; }
.faqchat-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; flex:none; border-top:3px solid var(--primary); border-bottom:1px solid var(--line); color:var(--text); font-weight:600; font-size:.9rem; }
.faqchat-close{ background:none; border:none; color:var(--muted); font:1.2rem var(--mono); cursor:pointer; line-height:1; }
.faqchat-msgs{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; font-size:.86rem; }
.faqchat-msg{ padding:8px 11px; border-radius:10px; max-width:85%; line-height:1.45; }
.faqchat-msg.bot{ background:var(--surface-2); align-self:flex-start; color:var(--text); }
.faqchat-msg.user{ background:var(--primary); color:var(--on-primary); align-self:flex-end; }
.faqchat-msg.err{ background:var(--sheet); border:1px solid var(--danger); color:var(--danger); align-self:flex-start; }
.faqchat-topics{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 10px; border-top:1px solid var(--line); max-height:104px; overflow-y:auto; flex:none; }
.faqchat-chip{ padding:4px 10px; border-radius:99px; border:1px solid var(--line-strong); background:var(--card); font:.74rem var(--sans); cursor:pointer; color:var(--muted); }
.faqchat-chip:hover{ border-color:var(--primary); color:var(--primary); }
.faqchat-inputrow{ display:flex; gap:6px; padding:10px; border-top:1px solid var(--line); flex:none; }
.faqchat-inputrow input{ flex:1; min-width:0; height:36px; padding:0 12px; border:1px solid var(--line-strong); border-radius:9px; background:var(--card); color:var(--text); font:.86rem var(--sans); }
.faqchat-inputrow input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.faqchat-inputrow button{ height:36px; flex:none; padding:0 12px; border-radius:9px; border:1px solid var(--primary); background:var(--primary); color:var(--on-primary); cursor:pointer; font:600 .8rem var(--sans); }
@media (max-width:480px){ .faqchat{ right:12px; bottom:14px; } .faqchat-panel{ width:calc(100vw - 24px); } }
@media (max-width:640px){ .faqchat-inputrow input{ font-size:16px; } }
.kpsa-pwa-card{ position:fixed; inset:0; z-index:9000; display:flex; align-items:flex-end; justify-content:center; background:rgba(15,18,38,.42); animation:kpsaPwaFadeIn .18s ease-out; }
@media (prefers-reduced-motion:reduce){ .kpsa-pwa-card{ animation:none; } }
@keyframes kpsaPwaFadeIn{ from{ opacity:0; } to{ opacity:1; } }
.kpsa-pwa-card-inner{ background:var(--card); color:var(--text); width:100%; max-width:400px; border-radius:16px 16px 0 0; padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px)); box-shadow:0 -8px 30px rgba(15,18,38,.22); text-align:center; border:1px solid var(--line); border-bottom:none; }
@media (min-width:641px){ .kpsa-pwa-card{ align-items:flex-end; justify-content:flex-end; padding:0 20px 20px 0; background:transparent; } .kpsa-pwa-card-inner{ max-width:320px; border-radius:16px; border-bottom:1px solid var(--line); box-shadow:0 12px 32px rgba(15,18,38,.22); } }
.kpsa-pwa-card-inner img{ border-radius:12px; margin-bottom:10px; }
.kpsa-pwa-card-inner h2{ margin:0 0 10px; font-size:1.05rem; color:var(--heading); }
.kpsa-pwa-card-inner ul{ list-style:none; margin:0 0 16px; padding:0; text-align:left; display:flex; flex-direction:column; gap:8px; font-size:.88rem; color:var(--text); }
.kpsa-pwa-card-inner ul li{ padding-left:22px; position:relative; }
.kpsa-pwa-card-inner ul li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.kpsa-pwa-card-inner p{ margin:0 0 16px; font-size:.92rem; color:var(--text); display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.kpsa-pwa-card-inner p svg{ fill:var(--accent); vertical-align:middle; }
.kpsa-pwa-card-actions{ display:flex; gap:10px; }
.kpsa-pwa-card-actions .btn, .kpsa-pwa-card-actions .btn-ghost{ margin-top:0; flex:1; }
.kpsa-pwa-card *:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.kpsa-pwa-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:9100; background:var(--primary); color:var(--on-primary); padding:12px 18px; border-radius:10px; font-size:.88rem; max-width:90vw; text-align:center; box-shadow:0 8px 24px rgba(15,18,38,.3); animation:kpsaPwaFadeIn .2s ease-out; }
.lightbox { position: fixed; inset: 0; background: rgba(10, 12, 24, .88); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
/* famous-chart index and "See more charts": the initials medallion tiles (as today), on Sutra cards. The concept draws these tiles without a
   rule of their own (the run-together text in its Famous chart sheet); this is the medallion layout its pattern sheet describes. */
.people { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.pg-chart .tp-related .people { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .pg-chart .tp-related .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg .tile.person, .pg-chart .tp-related .tile.person { flex-direction: row; align-items: flex-start; gap: 16px; }
.person .mono { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--gold-wash); color: var(--ink); font: 500 17px/1 var(--disp); display: grid; place-items: center; }
.person > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.person > div > b { font: 600 15.5px/1.3 var(--sans); color: var(--ink); }
.person .go { margin-top: 4px; padding-top: 0; }
/* case-study block of a famous-chart page */
.cs-verdict { margin: 16px 0 0; }
.cs-learn { margin: 12px 0 0; font-weight: 600; }
.verdicts .chip { white-space: nowrap; }

/* ---------- PLAIN PAGES (about, contact, privacy, refund policy, EULA, predictions): one centred column, 42 rem, Fraunces headings ---------- */
.pg-plain > .wrap { max-width: calc(42rem + 56px); padding: 0 28px; }
.pg-plain > .wrap:has(+ .wrap) { padding-bottom: 0; }
.pg-plain > .wrap article.guide, .pg-plain > .wrap > article { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 20px; }
.pg-plain > .wrap .guide > .eyebrow, .pg-plain > .wrap .eyebrow { display: block; margin: 8px 0 10px; font: 600 11.5px/1.35 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); background: none; padding: 0; }
.pg-plain > .wrap h1 { margin: 6px 0 0; font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; color: var(--ink); }
.pg-plain > .wrap .guide .dek, .pg-plain > .wrap .dek { margin: 14px 0 26px; font: 400 clamp(18px, 1.9vw, 21px)/1.5 var(--disp); color: var(--ink2); font-variation-settings: "opsz" 24; }
.pg-plain > .wrap .updated { margin: 12px 0 28px; font: 400 13px/1.5 var(--sans); color: var(--ink3); letter-spacing: 0; }
.pg-plain > .wrap h2, .pg-plain > .wrap .guide h2 { margin: 44px 0 14px; padding: 0; border: 0; font: 500 clamp(24px, 2.4vw, 30px)/1.2 var(--disp); color: var(--ink); }
.pg-plain > .wrap h2:first-child { margin-top: 0; }
.pg-plain > .wrap h3 { margin: 22px 0 6px; font: 600 16.5px/1.35 var(--sans); color: var(--ink); }
.pg-plain > .wrap p, .pg-plain > .wrap li, .pg-plain > .wrap .guide p, .pg-plain > .wrap .guide li { font-size: 17px; line-height: 1.7; color: var(--ink); max-width: none; }
.pg-plain > .wrap li { margin: 6px 0; }
.pg-plain > .wrap ul, .pg-plain > .wrap ol { padding-left: 22px; }
.pg-plain > .wrap strong, .pg-plain > .wrap b { font-weight: 600; }
.pg-plain > .wrap a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.pg-plain > .wrap a:hover { text-decoration-color: var(--gold-hi); }
.pg-plain > .wrap a.btn { text-decoration: none; }
.pg-plain > .wrap .muted { color: var(--ink3); font-size: 14px; }
.pg-plain > .wrap .card { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 30px 0 0; margin: 30px 0 0; }
.pg-plain > .wrap .card:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.pg-plain > .wrap .notice, .pg-plain > .wrap .grievance, .pg-plain > .wrap .callout { background: var(--sky); border: 0; border-left: 2px solid var(--gold-hi); border-radius: 0 14px 14px 0; padding: 14px 18px; color: var(--ink2); font-size: 15px; }
.pg-plain > .wrap table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; margin: 14px 0; }
.pg-plain > .wrap th, .pg-plain > .wrap td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; }
.pg-plain > .wrap th { font: 600 11.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.pg-plain > .wrap td { line-height: 1.5; color: var(--ink2); }
.pg-plain > .wrap .guide-cta { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); text-align: center; }
.pg-plain > .wrap .guide-cta p { color: var(--ink3); font-size: 15px; margin-bottom: 14px; }
.pg-plain > .wrap .contact-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
@media (min-width: 640px) { .pg-plain .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-plain > .wrap .contact-card { background: var(--raised); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; box-shadow: none; }
.pg-plain > .wrap .contact-card h3 { margin: 0; font: 500 19px/1.25 var(--disp); }
.pg-plain > .wrap .contact-card p { margin: 0 0 8px; font-size: 14.5px; color: var(--ink2); line-height: 1.5; }
.pg-plain > .wrap > .crumbs, .pg-plain > .wrap > p.crumbs { margin: 22px 0 4px; }
.pg-plain footer { margin-top: 40px; }
.pg footer > .foot-inner { max-width: 1160px; margin: 0 auto; padding: 32px 28px 28px; }
.pg footer .wrap > .foot-inner { max-width: none; margin: 0; padding: 0; }
@media (max-width: 520px) { .pg footer > .foot-inner { padding-inline: 18px; } }
.pg-plain > .wrap > h1:first-child { margin-top: 44px; }
/* astrologer directory + profile (rendered by main.py) */
.pg-plain > .wrap .astro-hero { display: flex; gap: 22px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.pg-plain > .wrap .astro-hero img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold-wash); }
.astro-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; background: var(--yes-wash); color: var(--yes); font: 600 12.5px/1.4 var(--sans); }
.astro-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.astro-chip { background: var(--gold-wash); color: var(--ink); font: 600 12.5px/1.4 var(--sans); padding: 4px 12px; border-radius: 999px; }
.astro-stats { display: flex; gap: 28px; flex-wrap: wrap; margin: 20px 0; }
.astro-stat b { display: block; font: 500 26px/1.15 var(--disp); color: var(--ink); }
.astro-stat span { font-size: 12.5px; color: var(--ink3); }
.dir-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0 10px; }
@media (max-width: 900px) { .dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dir-grid { grid-template-columns: minmax(0, 1fr); } }
.dir-card { background: var(--raised); border: 1px solid var(--line); border-radius: 16px; padding: 20px; text-decoration: none !important; color: var(--ink); box-shadow: var(--shadow); display: block; text-align: center; transition: border-color .2s, transform .2s var(--ease); }
.dir-card:hover { border-color: var(--gold-hi); transform: translateY(-2px); }
.dir-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
.dir-card h3 { margin: 0 0 4px; font: 500 19px/1.25 var(--disp); color: var(--ink); }
.dir-card p { margin: 0; color: var(--ink3); font-size: 13.5px; }
.pg-plain > .wrap .dir-card p { font-size: 13.5px; line-height: 1.4; color: var(--ink3); }
/* older tool/explainer/document/product pages: the article card of the previous design becomes the open Sutra reading column */
.pg-explainer article.guide, .pg-doc article.guide, .pg-product article.guide { background: none; border: 0; box-shadow: none; border-radius: 0; }
/* D1 pages (static/d1.css): its FAQ cards become the Sutra hairline rows */
.pg.d1-page .faq, .pg.d1-page .explain .faq { display: block; max-width: none; border-top: 1px solid var(--line); gap: 0; }
.pg.d1-page .faq details { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; }
.pg.d1-page .faq summary { min-height: 0; padding: 15px 0; justify-content: space-between; gap: 14px; font-weight: 600; font-size: 16px; color: var(--ink); }
.pg.d1-page .faq summary::after, .pg.d1-page .faq details[open] summary::after { content: ""; margin: 0 4px 0 0; color: inherit; font-size: 0; width: 8px; height: 8px; border-right: 1.5px solid var(--ink3); border-bottom: 1.5px solid var(--ink3); transform: rotate(45deg); transition: transform .3s; flex: none; }
.pg.d1-page .faq details[open] summary::after { transform: rotate(-135deg); }
.pg.d1-page .faq details p { color: var(--ink2); max-width: 62ch; margin: 0 0 16px; }
.pg-plain > .wrap p.crumbs, .pg-plain > .wrap .crumbs { font: 13px/1.4 var(--sans); color: var(--ink3); margin: 22px 0 6px; }
.pg-plain > .wrap .crumbs a { color: var(--ink2); }
.pg-plain > .wrap a.btn { color: var(--ink); }
.pg-plain > .wrap a.btn.btn-primary, .pg-plain > .wrap a.btn.solid, .pg-plain > .wrap a.btn.gold { color: var(--paper); }
.pg .crumbs, .pg .crumbs a { font-family: var(--sans); }
@media (max-width: 640px) { .pg-plain > .wrap table { display: block; overflow-x: auto; max-width: 100%; } }
/* the "Back to the app" link site-auth.js adds (a plain <a data-kp-back-app>), drawn as the concept's .kp-backapp */
.pg [data-kp-back-app] { color: var(--ink) !important; font-weight: 600; text-decoration: none !important; border-radius: 999px; }
.pg [data-kp-back-app]:hover { color: var(--gold) !important; }

/* ---------- /for-astrologers: concept pattern 7 "Product" (drawn example: /desktop) ---------- */
.pg-astro .hero { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); padding: 40px 0 30px; text-align: left; }
.pg-astro .hero .eyebrow { display: block; margin: 0 0 12px; padding: 0; background: none; border-radius: 0; font: 600 11.5px/1.35 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.pg-astro .hero h1 { font-size: clamp(36px, 5cqi, 64px); letter-spacing: -.02em; color: var(--ink); }
.pg-astro .hero .dek { margin: 16px 0 24px; font: 400 clamp(17px, 1.75cqi, 19.5px)/1.55 var(--disp); color: var(--ink2); max-width: 32em; font-variation-settings: "opsz" 24; }
.pg-astro .hero .cta-note { display: block; margin-top: 12px; font-size: 13.5px; color: var(--ink3); }
@media (min-width: 940px) { .pg-astro .hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 0 56px; padding-block: 48px 44px; } }
.listing-pic { border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; background: var(--raised); box-shadow: var(--shadow); width: 100%; justify-self: stretch; }
.listing-pic .lp-bar { display: flex; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.listing-pic .lp-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); }
.listing-pic .lp-body { position: relative; display: grid; gap: 8px; padding: 22px 22px 22px 90px; min-height: 190px; align-content: start; }
.listing-pic .lp-av { position: absolute; left: 22px; top: 22px; width: 52px; height: 52px; border-radius: 50%; background: var(--gold-wash); border: 1px solid var(--gold-hi); }
.listing-pic .lp-name::before { content: "Your name"; font: 500 21px/1.2 var(--disp); color: var(--ink); }
.listing-pic .lp-role::before { content: "Your designation \00b7  years of practice"; font-size: 13.5px; color: var(--ink3); }
.listing-pic .lp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.listing-pic .lp-tags span { border-radius: 999px; padding: 3px 11px; font: 600 12.5px/1.4 var(--sans); background: var(--paper); color: var(--ink2); border: 1px solid var(--line); }
.listing-pic .lp-tags span:nth-child(1)::before { content: "Verified badge"; }
.listing-pic .lp-tags span:nth-child(2)::before { content: "Available now"; }
.listing-pic .lp-tags span:nth-child(3)::before { content: "KP specializations"; }
.listing-pic .lp-fee::before { content: "Your own consultation fee"; font-size: 13.5px; color: var(--ink2); }
.listing-pic .lp-live { margin-top: 4px; font: 600 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.listing-pic .lp-live::before { content: "Your listing"; }
.pg-astro h2.sec { margin: 56px 0 6px; text-align: left; color: var(--ink); }
.pg-astro p.sub { margin: 0 0 22px; text-align: left; max-width: none; color: var(--ink2); font-size: 16.5px; }
.pg-astro .b-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pg-astro .b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .pg-astro .b-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-astro .b { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); min-width: 0; }
.pg-astro .b h3 { margin: 0 0 6px; font: 500 19px/1.25 var(--disp); color: var(--ink); }
.pg-astro .b p { margin: 0; color: var(--ink2); font-size: 14.5px; line-height: 1.5; }
.pg-astro .b .tag { margin-top: 12px; }
.pg-astro .steps { position: relative; display: grid; gap: 0; max-width: 46rem; }
.pg-astro .steps::before { content: ""; position: absolute; left: 21px; top: 26px; bottom: 26px; width: 1px; background: var(--gold-hi); }
.pg-astro .step { position: relative; padding: 14px 0 18px 58px; }
.pg-astro .step .n { position: absolute; left: 12px; top: 18px; width: 19px; height: 19px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 5px var(--gold-wash); font-size: 0; color: transparent; overflow: hidden; }
.pg-astro .step b { display: block; margin: 0 0 3px; font: 500 21px/1.25 var(--disp); color: var(--ink); }
.pg-astro .step span:not(.n) { display: block; color: var(--ink2); font-size: 15px; line-height: 1.5; }
.pg-astro .closing { position: relative; overflow: hidden; margin-top: 72px; padding: 84px 24px 88px; text-align: center; background: var(--sky); border-top: 1px solid var(--line); }
.pg-astro .closing::before { content: ""; position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 3.7deg, color-mix(in srgb, var(--line2) 70%, transparent) 0 .25deg, transparent .25deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 205px, #000 206px, #000 330px, transparent 331px); mask: radial-gradient(circle, transparent 205px, #000 206px, #000 330px, transparent 331px); opacity: .9; }
.pg-astro .closing::after { content: ""; position: absolute; left: 50%; top: 50%; width: 662px; height: 662px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--line2); pointer-events: none; }
.pg-astro .closing .wrap { position: relative; z-index: 1; }
.pg-astro .closing h2 { font-size: clamp(30px, 3.6cqi, 46px); max-width: 16em; margin-inline: auto; }
.pg-astro .closing p { color: var(--ink2); font-size: 17px; max-width: 34em; margin: 0 auto 22px; }
.pg-astro .fineprint { margin: 28px auto 0; max-width: 60ch; text-align: center; font-size: 13px; line-height: 1.6; color: var(--ink3); }
.pg-astro footer { margin-top: 36px; }

/* landing "a new version is ready" line: Sutra tokens, same look as the in-app update line */
.kp-update-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border: 1px solid var(--line2); border-radius: 14px; background: var(--raised); color: var(--ink); font: 400 14px/1.4 var(--sans); box-shadow: var(--shadow); }
.kp-update-banner button { font: 600 13.5px/1.2 var(--sans); cursor: pointer; }
.kp-update-banner .kp-update-go { background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 7px 14px; }
.kp-update-banner .kp-update-x { background: none; color: var(--ink); border: 0; padding: 0 4px; font-size: 18px; opacity: .7; }

/* ---------- P2 public visuals (drawn in the browser by public-sky.js, aria-hidden + inert; zero text in the HTML) ----------
   The float is reserved from first paint by ::before on a page that carries the script; when the script inserts the real slot it adds .p2on to
   the host, which drops the ::before and puts the same-sized float in its place, so the box never moves. */
body:is(.pg-tool, .pg-explainer):has(script[src*="/public-sky.js"]) :is(.tp-intro, article.guide):not(.p2on)::before { content: ""; }
body:is(.pg-tool, .pg-explainer):has(script[src*="/public-sky.js"]) :is(.tp-intro, article.guide):not(.p2on)::before,
.p2slot { float: right; width: 300px; aspect-ratio: 1; margin: -6px 0 12px 28px; shape-outside: circle(50%); position: relative; }
body:is(.pg-tool, .pg-explainer):has(script[src*="/public-sky.js"]) .tp-intro + *,
body:is(.pg-tool, .pg-explainer):has(script[src*="/public-sky.js"]) article.guide > :is(h2, form) { clear: both; }
@media (max-width: 900px) {
  body:is(.pg-tool, .pg-explainer):has(script[src*="/public-sky.js"]) :is(.tp-intro, article.guide):not(.p2on)::before, .p2slot { width: 220px; }
}
@media (max-width: 520px) {
  body:is(.pg-tool, .pg-explainer):has(script[src*="/public-sky.js"]) :is(.tp-intro, article.guide):not(.p2on)::before, .p2slot { width: 108px; margin: 0 0 6px 12px; }
  .p2slot :is(.zlab, .hn, .pl text, .rp text, .wc1, .wc3, .dd-num) { display: none; }
  .p2slot .pl circle.dot { r: 9; } .p2slot .wc2 { font-size: 46px; }
}
.p2slot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.p2slot .pl { cursor: default; }
.wc1 { fill: var(--ink3); font: 600 9px var(--sans); letter-spacing: .14em; text-anchor: middle; }
.wc2 { fill: var(--ink); font: 500 30px var(--disp); text-anchor: middle; }
.wc3 { fill: var(--ink2); font: 600 12px var(--sans); text-anchor: middle; }
.dd-ring { fill: var(--sky); stroke: var(--line2); }
.dd-day { fill: var(--gold-wash); opacity: .75; } .dd-night { fill: var(--line); opacity: .45; }
.dd-tick { stroke: var(--line2); stroke-width: 1; } .dd-tick.mj { stroke: var(--ink3); stroke-width: 1.4; }
.dd-num { fill: var(--ink3); font: 600 10px var(--sans); text-anchor: middle; dominant-baseline: central; }
.dd-bad { fill: var(--deny-wash); stroke: var(--deny); stroke-width: 1; }
.dd-good { fill: var(--yes-wash); stroke: var(--yes); stroke-width: 1; }
.dd-sun { fill: var(--gold-hi); }
.dd-hand { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; } .dd-tip { fill: var(--gold-hi); stroke: var(--raised); stroke-width: 2; }
/* the reference strip: reserved on the tables by ::before on the status line (percent padding = the strip's own aspect ratio), real strip after .p2on */
.strip { margin: 14px 0 6px; aspect-ratio: 1080 / 74; }
.strip svg { width: 100%; height: auto; display: block; }
body.pg-ref:has(script[src*="/public-sky.js"]) section.tool-card:not(.p2on) > .status::before,
body.pg-ref:has(script[src*="/public-sky.js"]) .read3 > .rail:not(.p2on) .gl-count::before { content: ""; display: block; margin: 14px 0 6px; padding-bottom: calc(100% * 74 / 1080); }
.st-sign { fill: var(--sky); stroke: var(--line2); stroke-width: .8; } .st-sign.alt { fill: var(--paper); }
.st-slab { fill: var(--ink3); font: 600 10px var(--sans); letter-spacing: .08em; text-anchor: middle; dominant-baseline: central; }
.st-nak { fill: var(--line); } .st-nak.alt { fill: var(--line2); opacity: .55; }
.st-sub { stroke: var(--line2); stroke-width: .7; }
.st-lit { fill: var(--gold-hi); opacity: .85; }
.st-lay { fill: none; stroke: var(--gold-hi); stroke-width: 2; rx: 3; }
.st-mk { fill: var(--gold); } .st-ml { stroke: var(--gold); stroke-width: 1.5; }