/* ═══════════════════════════════════════════════════════════════════════════
   TERRA — design system
   Visual language: luxury travel editorial · life-coaching warmth ·
   intelligent restraint · the faintest celestial whisper.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ink & paper */
  --ink:        #121118;   /* near-black plum, the night */
  --ink-1:      #181722;
  --ink-2:      #1f1d2b;
  --ink-line:   #2b2937;
  --paper:      #F5EFE4;   /* warm ivory */
  --paper-2:    #ECE3D3;

  /* metal & earth */
  --gold:       #C9A86A;
  --gold-bright:#E2C68C;
  --terra:      #C26B4A;
  --sage:       #7FA08C;

  /* type on ink */
  --tx:         #EFE7DA;
  --tx-soft:    #B4AC9D;
  --tx-mute:    #807A70;

  --r:          18px;   /* radius */
  --r-sm:       11px;
  --shadow:     0 24px 60px -28px rgba(0,0,0,.7);
  --ease:       cubic-bezier(.22,.61,.36,1);
  --maxw:       1180px;

  --serif: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;  /* Aurora: bold-modern, sentence-case (was Fraunces) */
  --sans:  "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --lime:  #D8FF5C;   /* secondary accent (overridden per theme) */
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  font-family:var(--sans);
  background:
    radial-gradient(1200px 700px at 78% -8%, #221d33 0%, transparent 60%),
    radial-gradient(900px 600px at 8% 12%, #1a2230 0%, transparent 55%),
    var(--ink);
  color:var(--tx);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
  min-height:100vh;
}
em{ font-style:italic }
b{ font-weight:600 }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit }
::selection{ background:var(--gold); color:var(--ink) }

#stars{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.55 }

/* ── top bar ──────────────────────────────────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,46px);
  /* fading, blurred backdrop so content scrolls cleanly *under* the logo
     instead of the fixed bar appearing to overwrite the text below it */
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--ink) 92%, transparent) 0%,
    color-mix(in srgb, var(--ink) 70%, transparent) 55%,
    transparent 100%);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  pointer-events:none;
}
.topbar > *{ pointer-events:auto }
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--tx); line-height:1 }
.brand-mark{
  flex:0 0 auto;
  width:21px; height:21px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--gold-bright), var(--gold) 45%, #7d6534 100%);
  box-shadow:0 0 0 1px rgba(185,166,255,.35), 0 0 18px -2px rgba(124,92,255,.6);
}
.brand-name{ font-family:var(--serif); font-weight:500; letter-spacing:.42em; font-size:15px; padding-left:.4em }
.brand-tag{ color:var(--tx-mute); font-size:12px; letter-spacing:.16em; text-transform:uppercase }
@media(max-width:680px){ .brand-tag{ display:none } }

/* ── views ────────────────────────────────────────────────────────────── */
.view{ position:relative; z-index:2; display:none; min-height:100vh }
.view.is-active{ display:block }
body[data-view="atlas"]{ background:var(--ink) }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{
  font-size:15px; font-weight:500; letter-spacing:.01em;
  padding:15px 30px; border-radius:100px; transition:.4s var(--ease);
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:#2a2110; font-weight:600;
  box-shadow:0 10px 30px -10px rgba(124,92,255,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -10px rgba(124,92,255,.7) }
.btn-ghost{ color:var(--tx-soft); border:1px solid var(--ink-line) }
.btn-ghost:hover{ color:var(--tx); border-color:var(--gold) }
.btn-outline{ background:transparent; color:var(--gold-bright); border:1px solid var(--gold); font-weight:600 }
.btn-outline:hover{ transform:translateY(-2px); border-color:var(--gold-bright);
  background:color-mix(in srgb, var(--gold) 12%, transparent);
  box-shadow:0 14px 34px -14px rgba(124,92,255,.5) }
.btn:disabled{ opacity:.35; cursor:default; transform:none!important }

/* ── reveal-on-load ───────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); animation:rise 1s var(--ease) forwards }
.reveal:nth-child(2){ animation-delay:.08s } .reveal:nth-child(3){ animation-delay:.18s }
.reveal:nth-child(4){ animation-delay:.30s } .reveal:nth-child(5){ animation-delay:.42s }
@keyframes rise{ to{ opacity:1; transform:none } }

/* ═══ HERO ════════════════════════════════════════════════════════════ */
.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(120px,18vh,200px) clamp(22px,5vw,48px) 90px;
}
.eyebrow{
  color:var(--gold); font-size:13px; letter-spacing:.26em; text-transform:uppercase;
  margin-bottom:26px;
}
.hero-title{
  font-family:var(--serif); font-weight:300; font-size:clamp(46px,8.5vw,104px);
  line-height:.98; letter-spacing:-.018em; max-width:14ch;
}
.hero-title em{ color:var(--gold-bright) }
.hero-lede{
  margin-top:30px; max-width:50ch; font-size:clamp(17px,2.1vw,21px);
  color:var(--tx-soft); font-weight:300; line-height:1.62;
}
.hero-cta{ margin-top:42px; display:flex; align-items:center; gap:22px; flex-wrap:wrap }
.hero-note{ color:var(--tx-mute); font-size:13.5px; letter-spacing:.02em }
.hero-proof{
  list-style:none; display:flex; gap:clamp(24px,5vw,64px); flex-wrap:wrap;
  margin-top:84px; padding-top:34px; border-top:1px solid var(--ink-line); max-width:760px;
}
.hero-proof li{ display:flex; flex-direction:column; gap:5px }
.hero-proof b{ font-family:var(--serif); font-size:19px; font-weight:500; color:var(--tx) }
.hero-proof span{ color:var(--tx-mute); font-size:13.5px }

/* ═══ ONBOARDING ══════════════════════════════════════════════════════ */
.onboard{
  max-width:760px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px clamp(22px,5vw,40px) 60px;
}
.onboard-rail{ display:flex; align-items:center; gap:18px; margin-bottom:46px }
.onboard-progress{ flex:1; height:2px; background:var(--ink-line); border-radius:2px; overflow:hidden }
.onboard-progress span{
  display:block; height:100%; width:16%;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright)); transition:width .6s var(--ease);
}
.onboard-count{ color:var(--tx-mute); font-size:13px; letter-spacing:.14em }
.onboard-count i{ font-style:normal; opacity:.5 }

.onboard-stage{ min-height:330px }
.ob-step{ animation:rise .7s var(--ease) }
.ob-kicker{ color:var(--gold); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:18px }
.ob-q{
  font-family:var(--serif); font-weight:300; font-size:clamp(28px,4.6vw,44px);
  line-height:1.08; letter-spacing:-.01em; max-width:18ch;
}
.ob-q em{ color:var(--gold-bright) }
.ob-help{ color:var(--tx-soft); margin-top:16px; max-width:46ch; font-weight:300; font-size:16.5px }

/* text + date inputs */
.ob-field{ margin-top:36px; max-width:480px }
.ob-input, .ob-row input{
  width:100%; background:transparent; color:var(--tx);
  border:none; border-bottom:1.5px solid var(--ink-line);
  font-family:var(--serif); font-size:clamp(24px,4vw,34px); font-weight:300;
  padding:8px 2px 12px; transition:.4s var(--ease);
}
.ob-input::placeholder{ color:var(--tx-mute); opacity:.6 }
.ob-input:focus, .ob-row input:focus{ outline:none; border-color:var(--gold) }
.ob-row{ display:flex; gap:22px; flex-wrap:wrap; margin-top:36px }
.ob-row label{ display:flex; flex-direction:column; gap:9px; flex:1; min-width:130px }
.ob-row .lab{ color:var(--tx-mute); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-family:var(--sans) }
.ob-row input{ font-size:clamp(20px,3vw,26px) }
.ob-tip{ margin-top:22px; color:var(--tx-mute); font-size:13.5px; display:flex; gap:8px; align-items:flex-start }
.ob-tip svg{ flex:0 0 auto; margin-top:2px }

/* AM / PM picker */
.ampm-wrap{ flex:0 0 auto; min-width:120px }
.ampm{ display:inline-flex; align-self:flex-start; margin-top:4px;
  border:1.5px solid var(--ink-line); border-radius:100px; overflow:hidden }
.ampm-btn{ padding:11px 20px; font-size:15px; font-weight:500; color:var(--tx-soft);
  font-family:var(--sans); transition:.25s var(--ease) }
.ampm-btn + .ampm-btn{ border-left:1px solid var(--ink-line) }
.ampm-btn:hover{ color:var(--tx) }
.ampm-btn.sel{ background:var(--gold); color:#2a2110; font-weight:600 }

/* live location search */
.place-field{ position:relative }
.place-results{ position:absolute; left:0; right:0; top:100%; margin-top:10px; z-index:25;
  background:var(--ink-1); border:1px solid var(--ink-line); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow) }
.place-opt{ display:flex; gap:11px; align-items:center; width:100%; text-align:left;
  padding:13px 17px; color:var(--tx-soft); font-family:var(--sans); font-size:15px; transition:.18s }
.place-opt + .place-opt{ border-top:1px solid var(--ink-line) }
.place-opt:hover{ background:rgba(124,92,255,.10); color:var(--tx) }
.place-opt svg{ flex:0 0 auto; color:var(--gold) }
.place-loading{ padding:14px 17px; color:var(--tx-mute); font-size:14px; font-family:var(--sans) }
.place-pin{ margin-top:20px; display:inline-flex; gap:9px; align-items:center; color:var(--gold);
  font-size:15px; font-family:var(--sans); border:1px solid rgba(124,92,255,.4);
  background:rgba(124,92,255,.09); padding:9px 16px; border-radius:100px }

/* choice chips */
.ob-grid{ margin-top:34px; display:grid; grid-template-columns:repeat(2,1fr); gap:13px }
@media(max-width:560px){ .ob-grid{ grid-template-columns:1fr } }
.chip{
  text-align:left; border:1px solid var(--ink-line); border-radius:var(--r-sm);
  padding:18px 20px; transition:.3s var(--ease); background:rgba(255,255,255,.012);
  display:flex; gap:15px; align-items:flex-start;
}
.chip:hover{ border-color:#46415a; transform:translateY(-2px) }
.chip.sel{ border-color:var(--gold); background:linear-gradient(180deg,rgba(124,92,255,.14),rgba(124,92,255,.04)) }
.chip-ic{ font-size:20px; line-height:1; margin-top:2px; filter:grayscale(.2) }
.chip-tx b{ display:block; font-family:var(--serif); font-size:18px; font-weight:500; margin-bottom:3px }
.chip-tx span{ color:var(--tx-mute); font-size:13.5px; line-height:1.45 }
.chip.sel .chip-tx span{ color:var(--tx-soft) }

/* segmented (single choice pills) */
.ob-seg{ margin-top:34px; display:flex; flex-wrap:wrap; gap:11px }
.seg{ border:1px solid var(--ink-line); border-radius:100px; padding:12px 22px; color:var(--tx-soft); transition:.3s var(--ease); font-size:15px }
.seg:hover{ border-color:#46415a } .seg.sel{ background:var(--gold); color:#2a2110; border-color:var(--gold); font-weight:600 }

.onboard-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:46px }
.onboard-nav .btn-ghost[hidden]{ visibility:hidden }

/* ═══ GENERATING ══════════════════════════════════════════════════════ */
.generating{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; text-align:center; padding:40px }
.gen-orbit{ position:relative; width:180px; height:180px }
.gen-orbit i{ position:absolute; inset:0; margin:auto; width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, var(--gold-bright), var(--gold)); box-shadow:0 0 24px 2px rgba(124,92,255,.6) }
.gen-orbit span{ position:absolute; inset:0; border:1px solid var(--ink-line); border-radius:50%; animation:spin 8s linear infinite }
.gen-orbit span:nth-child(1){ inset:0; border-top-color:var(--gold) }
.gen-orbit span:nth-child(2){ inset:26px; border-left-color:var(--terra); animation-duration:5.5s; animation-direction:reverse }
.gen-orbit span:nth-child(3){ inset:54px; border-bottom-color:var(--sage); animation-duration:7s }
@keyframes spin{ to{ transform:rotate(360deg) } }
.gen-title{ font-family:var(--serif); font-weight:300; font-size:clamp(26px,4vw,38px); display:flex; gap:2px }
.gen-title .dots i{ animation:blink 1.4s infinite both; font-style:normal }
.gen-title .dots i:nth-child(2){ animation-delay:.2s } .gen-title .dots i:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,100%{ opacity:.2 } 50%{ opacity:1 } }
.gen-line{ color:var(--tx-soft); font-size:16.5px; max-width:34ch; transition:.5s var(--ease); min-height:1.6em }

/* ═══ ATLAS (dashboard) ═══════════════════════════════════════════════ */
.atlas{ max-width:var(--maxw); margin:0 auto; padding:118px clamp(20px,4vw,46px) 100px }
.atlas-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:14px }
.atlas-hello{ color:var(--gold); font-size:13px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:14px }
.atlas-h1{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,6vw,62px); line-height:1.02; letter-spacing:-.015em }
.atlas-h1 em{ color:var(--gold-bright) }
.atlas-sub{ color:var(--tx-soft); margin-top:18px; max-width:54ch; font-size:17px; font-weight:300; line-height:1.6 }
.atlas-restart{ color:var(--tx-mute); font-size:13px; letter-spacing:.04em; border-bottom:1px solid transparent; transition:.3s }
.atlas-restart:hover{ color:var(--gold); border-color:var(--gold) }

/* newcomer-friendly method note — the one place we explain astrocartography plainly */
.method-note{
  margin-top:24px; max-width:64ch; padding:18px 22px;
  border:1px solid var(--ink-line); border-left:2px solid var(--gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:linear-gradient(100deg, rgba(124,92,255,.06), transparent 70%);
  color:var(--tx-soft); font-size:14.5px; font-weight:300; line-height:1.65;
}
.method-note b{ color:var(--tx); font-weight:600 }
.method-note em{ color:var(--gold-bright); font-style:normal; font-family:var(--serif) }

/* domain selector */
.domain-bar{ display:flex; gap:10px; flex-wrap:wrap; margin:34px 0 26px }
.domain-tab .tab-line{ font-style:normal; font-size:11.5px; letter-spacing:.02em; opacity:.62; margin-left:9px; padding-left:9px; border-left:1px solid currentColor }
.domain-tab.sel .tab-line{ opacity:.7 }
@media(max-width:560px){ .domain-tab .tab-line{ display:none } }
.domain-tab{
  border:1px solid var(--ink-line); border-radius:100px; padding:11px 20px 11px 16px;
  display:flex; align-items:center; gap:10px; color:var(--tx-soft); transition:.3s var(--ease); font-size:14.5px;
}
.domain-tab:hover{ border-color:#46415a; color:var(--tx) }
.domain-tab .dot{ width:9px; height:9px; border-radius:50%; background:var(--c) }
.domain-tab.sel{ color:var(--ink); background:var(--c); border-color:var(--c); font-weight:600 }
.domain-tab.sel .dot{ background:rgba(0,0,0,.45) }

/* the map */
.map-wrap{
  position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--ink-line);
  background:linear-gradient(180deg,#10141d,#0d0f17); box-shadow:var(--shadow);
}
.map-wrap svg{ display:block; width:100%; height:auto }
.land{ fill:#1c2430; stroke:#28323f; stroke-width:.5; transition:fill .6s ease }
.graticule{ stroke:#1a2028; stroke-width:.5; fill:none; opacity:.5 }
/* real astrocartography lines */
.pgroup{ color:var(--gold); transition:opacity .5s ease }
.pl{ fill:none; stroke:currentColor; stroke-linecap:round; transition:opacity .4s ease, stroke-width .3s ease }
.pl.mc{ stroke-width:1.7; opacity:.9; filter:drop-shadow(0 0 5px currentColor) }
.pl.ic{ stroke-width:1.2; opacity:.42; stroke-dasharray:2 7 }
.pl.ac, .pl.dc{ stroke-width:1.2; opacity:.55 }
.pl.dc{ stroke-dasharray:6 5; opacity:.42 }
.pl-label{ fill:currentColor; font-family:var(--sans); font-size:13px; font-weight:600; opacity:.8;
  paint-order:stroke; stroke:#0d0f17; stroke-width:3px }
.pgroup.dim{ opacity:.14 }
.pgroup.focus .pl.mc{ stroke-width:2.2 }
.pgroup.focus .pl.ac, .pgroup.focus .pl.dc{ opacity:.8 }
.leg-note{ color:var(--tx-mute)!important; font-size:11px!important; border-left:1px solid var(--ink-line); padding-left:12px }
.city-dot{ cursor:pointer; transition:.3s var(--ease) }
.city-dot circle.halo{ fill:var(--gold); opacity:0; transition:.4s var(--ease) }
.city-dot circle.core{ fill:var(--paper); stroke:var(--gold); stroke-width:1.4; transition:.3s var(--ease) }
.city-dot:hover circle.halo, .city-dot.active circle.halo{ opacity:.22 }
.city-dot.top circle.core{ fill:var(--gold-bright); r:5 }
.city-dot.active circle.core{ fill:#fff; stroke-width:2 }
.origin .o-ring{ fill:none; stroke:var(--gold-bright); stroke-width:1.4; opacity:.85; transform-origin:center;
  animation:opulse 2.6s ease-in-out infinite }
.origin .o-dot{ fill:var(--gold-bright) }
.origin text{ fill:var(--gold-bright); font-family:var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:.04em; paint-order:stroke; stroke:#0d0f17; stroke-width:3px }
@keyframes opulse{ 0%,100%{ opacity:.3; r:7 } 50%{ opacity:.9; r:11 } }
.city-dot text{ fill:var(--tx-soft); font-family:var(--sans); font-size:13px; font-weight:500;
  paint-order:stroke; stroke:#0d0f17; stroke-width:3px; opacity:0; transition:.3s }
.city-dot.top text, .city-dot:hover text, .city-dot.active text{ opacity:1 }
.map-legend{ position:absolute; left:18px; bottom:16px; display:flex; gap:16px; flex-wrap:wrap;
  background:rgba(13,15,23,.66); backdrop-filter:blur(8px); padding:11px 16px; border-radius:12px; border:1px solid var(--ink-line) }
.map-legend span{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--tx-soft) }
.map-legend i{ width:14px; height:2.5px; border-radius:2px; display:inline-block }
.map-hint{ position:absolute; right:18px; top:16px; font-size:12px; color:var(--tx-mute);
  background:rgba(13,15,23,.6); padding:7px 13px; border-radius:100px; border:1px solid var(--ink-line) }
@media(max-width:620px){ .map-legend{ position:static; margin-top:12px; border:none; background:none; padding:8px 0 } .map-hint{ display:none } }

/* selected-place detail panel under the map */
.place-panel{
  margin-top:20px; display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  border:1px solid var(--ink-line); border-radius:var(--r); overflow:hidden; min-height:300px;
}
@media(max-width:760px){ .place-panel{ grid-template-columns:1fr } }
.place-photo{ position:relative; background-size:cover; background-position:center; min-height:260px }
.place-photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(18,17,24,.15) 70%, var(--ink-1)); }
.place-photo .score{
  position:absolute; left:20px; top:20px; z-index:2;
  background:rgba(13,15,23,.5); backdrop-filter:blur(10px); border:1px solid rgba(185,166,255,.35);
  border-radius:14px; padding:12px 16px; text-align:center;
}
.place-photo .score b{ font-family:var(--serif); font-size:30px; font-weight:500; color:var(--gold-bright); display:block; line-height:1 }
.place-photo .score span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-soft) }
.place-body{ background:var(--ink-1); padding:30px 32px; display:flex; flex-direction:column }
.place-body .pp-loc{ color:var(--tx-mute); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:9px }
.place-body h3{ font-family:var(--serif); font-weight:400; font-size:32px; line-height:1; margin-bottom:6px }
.place-body .pp-char{ color:var(--gold); font-style:italic; font-family:var(--serif); font-size:16px; margin-bottom:20px }
.place-body .pp-read{ color:var(--tx-soft); font-size:15.5px; line-height:1.66; font-weight:300 }
.place-body .pp-read em{ color:var(--tx); font-style:normal; border-bottom:1px solid rgba(124,92,255,.4) }
.pp-bars{ margin-top:auto; padding-top:24px; display:flex; flex-direction:column; gap:11px }
.pp-bar{ display:grid; grid-template-columns:88px 1fr 34px; align-items:center; gap:12px; font-size:12.5px; color:var(--tx-soft) }
.pp-bar .track{ height:4px; border-radius:3px; background:var(--ink-line); overflow:hidden }
.pp-bar .fill{ height:100%; border-radius:3px; transition:width 1s var(--ease) }
.pp-bar .pct{ text-align:right; color:var(--tx-mute); font-variant-numeric:tabular-nums }

/* section heading */
.sec{ margin-top:84px }
.sec-eyebrow{ color:var(--gold); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:14px }
.sec-title{ font-family:var(--serif); font-weight:300; font-size:clamp(28px,4.4vw,42px); line-height:1.05; letter-spacing:-.01em; max-width:20ch }
.sec-intro{ color:var(--tx-soft); margin-top:16px; max-width:56ch; font-weight:300; font-size:16.5px; line-height:1.6 }

/* top-places cards */
.places{ margin-top:38px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
@media(max-width:880px){ .places{ grid-template-columns:1fr 1fr } }
@media(max-width:560px){ .places{ grid-template-columns:1fr } }
.pcard{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--ink-line);
  cursor:pointer; transition:.45s var(--ease); min-height:380px; display:flex; flex-direction:column; justify-content:flex-end }
.pcard:hover{ transform:translateY(-5px); border-color:rgba(124,92,255,.5); box-shadow:var(--shadow) }
.pcard .bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:.6s var(--ease) }
.pcard:hover .bg{ transform:scale(1.06) }
.pcard .scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,12,18,.05) 30%, rgba(13,12,18,.62) 64%, rgba(13,12,18,.93)) }
.pcard .rank{ position:absolute; top:16px; left:16px; z-index:2; font-family:var(--serif);
  font-size:13px; letter-spacing:.16em; color:var(--gold-bright); background:rgba(13,15,23,.42);
  backdrop-filter:blur(8px); border:1px solid rgba(185,166,255,.3); padding:6px 13px; border-radius:100px }
.pcard .match{ position:absolute; top:16px; right:16px; z-index:2; text-align:right }
.pcard .match b{ font-family:var(--serif); font-size:24px; color:var(--gold-bright); display:block; line-height:1 }
.pcard .match span{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-soft) }
.pcard .body{ position:relative; z-index:2; padding:24px 24px 26px }
.pcard .body h4{ font-family:var(--serif); font-weight:400; font-size:27px; line-height:1; margin-bottom:5px }
.pcard .body .loc{ color:var(--tx-soft); font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; margin-bottom:13px }
.pcard .body p{ color:var(--tx-soft); font-size:14px; line-height:1.55; font-weight:300 }
.pcard .tags{ display:flex; gap:7px; margin-top:14px; flex-wrap:wrap }
.pcard .tags i{ font-style:normal; font-size:11px; color:var(--tx); border:1px solid var(--ink-line);
  padding:4px 11px; border-radius:100px; background:rgba(255,255,255,.04) }

/* four lives — domain insight rows */
.lives{ margin-top:38px; display:grid; gap:16px }
.life{ display:grid; grid-template-columns:54px 1fr auto; gap:22px; align-items:center;
  border:1px solid var(--ink-line); border-radius:var(--r); padding:24px 26px;
  background:linear-gradient(100deg, rgba(255,255,255,.018), transparent); transition:.4s var(--ease) }
.life:hover{ border-color:rgba(124,92,255,.4); transform:translateX(3px) }
.life-ic{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; font-size:22px;
  background:var(--c2); border:1px solid var(--cb) }
.life-main h4{ font-family:var(--serif); font-weight:500; font-size:20px; margin-bottom:6px }
.life-main h4 b{ color:var(--gold-bright); font-weight:500 }
.life-main p{ color:var(--tx-soft); font-size:15px; font-weight:300; line-height:1.55; max-width:62ch }
.life-place{ text-align:right; min-width:120px }
.life-place .lp-name{ font-family:var(--serif); font-size:19px; color:var(--tx) }
.life-place .lp-tag{ color:var(--tx-mute); font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-top:3px }
@media(max-width:680px){ .life{ grid-template-columns:44px 1fr; gap:16px } .life-place{ grid-column:1/-1; text-align:left; border-top:1px solid var(--ink-line); padding-top:14px } }

/* season guidance */
.season{ margin-top:84px; border:1px solid var(--ink-line); border-radius:24px; overflow:hidden;
  background:linear-gradient(135deg, var(--ink-2), var(--ink-1)); position:relative }
.season::before{ content:""; position:absolute; right:-120px; top:-120px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,92,255,.16), transparent 65%); pointer-events:none }
.season-in{ padding:clamp(30px,5vw,54px); position:relative; z-index:2; max-width:760px }
.season .se{ color:var(--gold); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:18px }
.season h3{ font-family:var(--serif); font-weight:300; font-size:clamp(24px,3.6vw,34px); line-height:1.2; letter-spacing:-.01em }
.season h3 em{ color:var(--gold-bright) }
.season p{ color:var(--tx-soft); margin-top:20px; font-size:16.5px; line-height:1.7; font-weight:300 }
.season .steps{ margin-top:28px; display:flex; flex-direction:column; gap:14px }
.season .steps li{ list-style:none; display:flex; gap:15px; align-items:flex-start; color:var(--tx-soft); font-size:15.5px; font-weight:300 }
.season .steps .n{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1px solid var(--gold);
  color:var(--gold); display:grid; place-items:center; font-size:12.5px; font-family:var(--serif); margin-top:1px }
.season .steps b{ color:var(--tx); font-weight:500 }

/* closing */
.closing{ margin-top:96px; text-align:center; max-width:680px; margin-left:auto; margin-right:auto; padding:0 10px }
.closing .star{ width:30px; height:30px; margin:0 auto 26px; color:var(--gold) }
.closing h3{ font-family:var(--serif); font-weight:300; font-size:clamp(26px,4.4vw,40px); line-height:1.22; letter-spacing:-.01em }
.closing h3 em{ color:var(--gold-bright) }
.closing p{ color:var(--tx-soft); margin-top:22px; font-size:17px; font-weight:300; line-height:1.65 }
.closing .btn{ margin-top:34px }
.closing .sign{ margin-top:30px; color:var(--tx-mute); font-size:13.5px; letter-spacing:.04em }
.closing .sign b{ color:var(--gold); font-family:var(--serif); font-weight:500; letter-spacing:.1em }

/* footer-ish disclaimer, kept honest & quiet */
.fineprint{ max-width:var(--maxw); margin:70px auto 0; padding:26px clamp(20px,4vw,46px) 0;
  border-top:1px solid var(--ink-line); color:var(--tx-mute); font-size:12.5px; line-height:1.7; text-align:center }

/* utility */
[hidden]{ display:none!important }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important } }

/* ═══════════════════════════════════════════════════════════════════════════
   PLATFORM FEATURES — actions · chart · refine · shortlist · deep-dive · advisor
   ═══════════════════════════════════════════════════════════════════════════ */

/* header actions */
.atlas-actions{ display:flex; align-items:center; gap:9px; flex-wrap:wrap }
.act{ display:flex; align-items:center; gap:7px; padding:9px 15px; border:1px solid var(--ink-line);
  border-radius:100px; color:var(--tx-soft); font-size:13.5px; transition:.25s var(--ease) }
.act:hover{ border-color:var(--gold); color:var(--tx) }
.act.ok{ border-color:var(--sage); color:var(--sage) }
.act-key{ border-color:rgba(124,92,255,.5); color:var(--gold-bright); font-weight:500 }
.act-key:hover{ background:rgba(124,92,255,.12); border-color:var(--gold) }
.atlas-actions .atlas-restart{ margin-left:2px }

/* chart at a glance */
.chart-strip{ margin-top:30px; display:grid; grid-template-columns:1fr 1fr 1fr 1.3fr; gap:1px;
  background:var(--ink-line); border:1px solid var(--ink-line); border-radius:var(--r); overflow:hidden }
.chart-cell{ background:var(--ink-1); padding:18px 22px; display:flex; flex-direction:column; gap:5px }
.cc-lab{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-mute) }
.cc-big{ font-family:var(--serif); font-size:21px; color:var(--tx); line-height:1.1 }
.cc-sub{ font-size:12.5px; color:var(--tx-soft) }
.chart-foot{ grid-column:1/-1; background:var(--ink-1); padding:9px 22px; color:var(--tx-mute); font-size:11.5px }
@media(max-width:680px){ .chart-strip{ grid-template-columns:1fr 1fr } }

/* refine controls */
.refine{ display:flex; flex-wrap:wrap; gap:18px 28px; align-items:flex-end;
  margin:6px 0 30px; padding-bottom:26px; border-bottom:1px solid var(--ink-line) }
.rf-group{ display:flex; flex-direction:column; gap:9px }
.rf-label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-mute) }
.rf-opts{ display:flex; gap:6px; flex-wrap:wrap }
.rf{ border:1px solid var(--ink-line); border-radius:100px; padding:7px 13px; font-size:13px;
  color:var(--tx-soft); transition:.22s var(--ease) }
.rf:hover{ border-color:#46415a; color:var(--tx) }
.rf.sel{ background:var(--gold); color:#2a2110; border-color:var(--gold); font-weight:600 }
.rf-reset{ align-self:flex-end; margin-left:auto; color:var(--tx-mute); font-size:13px; border-bottom:1px solid transparent }
.rf-reset:hover{ color:var(--gold); border-color:var(--gold) }
.empty{ color:var(--tx-soft); padding:34px 0; font-size:16px; font-weight:300 }
.linkish{ color:var(--gold); border-bottom:1px solid var(--gold); font-size:inherit }

/* heart / favourite button (shared) */
.heart{ position:absolute; z-index:3; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(13,15,23,.45); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14);
  color:var(--tx-soft); transition:.25s var(--ease) }
.heart svg{ fill:none; stroke:currentColor; stroke-width:1.6 }
.heart:hover{ color:var(--terra); transform:scale(1.08) }
.heart.on{ color:var(--terra) }
.heart.on svg{ fill:var(--terra); stroke:var(--terra) }
.pcard .heart{ top:14px; right:14px }
.pcard-cta{ margin-top:16px }
.pcard .explore{ color:var(--gold-bright); font-size:13.5px; font-weight:500; letter-spacing:.01em }

/* shortlist */
.shortlist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); gap:16px; margin-top:30px }
.sl-card{ position:relative; height:150px; border-radius:14px; overflow:hidden; border:1px solid var(--ink-line); cursor:pointer; transition:.3s var(--ease) }
.sl-card:hover{ transform:translateY(-3px); border-color:rgba(124,92,255,.5) }
.sl-bg{ position:absolute; inset:0; background-size:cover; background-position:center }
.sl-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 38%,rgba(13,12,18,.86)) }
.sl-body{ position:absolute; left:14px; bottom:12px; z-index:2 }
.sl-body b{ font-family:var(--serif); font-size:18px; display:block }
.sl-body span{ font-size:12px; color:var(--tx-soft) }
.sl-x{ top:10px; right:10px }

/* deep-dive modal */
body.modal-open{ overflow:hidden }
.modal{ position:fixed; inset:0; z-index:80; display:none }
.modal.open{ display:block }
.modal-scrim{ position:absolute; inset:0; background:rgba(8,8,12,.74); backdrop-filter:blur(6px); animation:fade .3s ease }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
.modal-card{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(960px,94vw); max-height:92vh; overflow-y:auto; background:var(--ink-1);
  border:1px solid var(--ink-line); border-radius:22px; box-shadow:var(--shadow); animation:popin .42s var(--ease) }
@keyframes popin{ from{ opacity:0; transform:translate(-50%,-46%) } to{ opacity:1; transform:translate(-50%,-50%) } }
.modal-x{ position:absolute; top:16px; right:16px; z-index:6; width:40px; height:40px; border-radius:50%;
  background:rgba(13,15,23,.5); backdrop-filter:blur(8px); border:1px solid var(--ink-line); color:var(--tx); font-size:14px }
.modal-x:hover{ background:rgba(13,15,23,.8) }
.dd-hero{ position:relative; height:300px; background-size:cover; background-position:center;
  border-radius:22px 22px 0 0; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:30px 34px }
.dd-hero::after{ content:""; position:absolute; inset:0; border-radius:22px 22px 0 0;
  background:linear-gradient(180deg,rgba(13,12,18,.12) 30%,rgba(13,12,18,.88)) }
.dd-hero-in,.dd-match{ position:relative; z-index:2 }
.dd-loc{ color:var(--tx-soft); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px }
.dd-hero h2{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,5vw,48px); line-height:1 }
.dd-char{ color:var(--gold-bright); font-family:var(--serif); font-style:italic; font-size:17px; margin-top:6px }
.dd-match{ flex:0 0 auto; text-align:center; background:rgba(13,15,23,.5); backdrop-filter:blur(10px);
  border:1px solid rgba(185,166,255,.3); border-radius:14px; padding:12px 18px }
.dd-match b{ font-family:var(--serif); font-size:30px; color:var(--gold-bright); display:block; line-height:1 }
.dd-match span{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-soft) }
.dd-grid{ display:grid; grid-template-columns:1.5fr 1fr }
@media(max-width:760px){ .dd-grid{ grid-template-columns:1fr } }
.dd-main{ padding:30px 34px }
.dd-side{ padding:30px 34px; background:var(--ink-2); border-left:1px solid var(--ink-line) }
@media(max-width:760px){ .dd-side{ border-left:none; border-top:1px solid var(--ink-line) } }
.dd-read{ color:var(--tx-soft); font-size:16px; line-height:1.7; font-weight:300 }
.dd-read em{ color:var(--tx); font-style:normal; border-bottom:1px solid rgba(124,92,255,.4) }
.dd-h{ font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:26px 0 14px }
.dd-why{ list-style:none; display:flex; flex-direction:column; gap:10px }
.dd-why li{ position:relative; padding-left:22px; color:var(--tx-soft); font-size:14.5px; line-height:1.55; font-weight:300 }
.dd-why li::before{ content:"✦"; position:absolute; left:0; top:2px; color:var(--gold); font-size:12px }
.dd-why em{ color:var(--tx); font-style:normal }
.dd-lives{ display:flex; flex-direction:column; gap:16px }
.dd-life-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; margin-bottom:7px }
.dd-life-top b{ font-family:var(--serif); color:var(--tx) }
.dd-life .track{ height:4px; border-radius:3px; background:var(--ink-line); overflow:hidden }
.dd-life .fill{ height:100%; border-radius:3px }
.dd-life p{ color:var(--tx-mute); font-size:13px; margin-top:6px }
.dd-facts{ display:grid; grid-template-columns:auto 1fr; gap:11px 16px; font-size:14px }
.dd-facts dt{ color:var(--tx-mute) }
.dd-facts dd{ color:var(--tx); text-align:right }
.dd-facts .muted{ color:var(--tx-mute); font-size:12.5px }
.dd-draw{ margin-top:20px; color:var(--tx-soft); font-size:14px; font-weight:300 }
.dd-draw em{ color:var(--gold-bright); font-style:italic }
.dd-actions{ margin-top:24px; display:flex; flex-direction:column; gap:10px }
.dd-actions .btn{ width:100%; justify-content:center }
.dd-fav svg{ fill:none; stroke:currentColor; stroke-width:1.6 }
.dd-fav.on svg{ fill:#2a2110 }

/* Ask Terra advisor */
body:not([data-view="atlas"]) #advisor{ display:none }
#advisor-fab{ position:fixed; right:22px; bottom:84px; z-index:60; display:flex; align-items:center; gap:9px;
  padding:13px 20px; border-radius:100px; background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#2a2110; font-weight:600; font-size:15px; box-shadow:0 14px 34px -12px rgba(124,92,255,.6); transition:.3s var(--ease) }
#advisor-fab:hover{ transform:translateY(-2px) }
.fab-spark{ font-size:16px }
#advisor.open #advisor-fab{ display:none }
#advisor-panel{ position:fixed; right:22px; bottom:22px; z-index:61; width:min(392px,92vw); height:min(580px,80vh);
  background:var(--ink-1); border:1px solid var(--ink-line); border-radius:20px; box-shadow:var(--shadow);
  display:none; flex-direction:column; overflow:hidden }
#advisor.open #advisor-panel{ display:flex; animation:popin .3s var(--ease) }
#advisor-panel header{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--ink-line) }
.ad-id{ display:flex; align-items:center; gap:8px } .ad-id b{ font-family:var(--serif); font-size:16px }
.ad-id i{ color:var(--tx-mute); font-size:12px; font-style:normal }
.ad-dot{ width:8px; height:8px; border-radius:50%; background:var(--sage); box-shadow:0 0 8px var(--sage) }
#advisor-close{ color:var(--tx-mute); font-size:14px } #advisor-close:hover{ color:var(--tx) }
.ad-log{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:13px }
.ad-msg{ display:flex; gap:9px; max-width:92% } .ad-msg.me{ align-self:flex-end }
.ad-av{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:rgba(124,92,255,.16); color:var(--gold); font-size:13px; margin-top:2px }
.ad-bubble{ background:var(--ink-2); border:1px solid var(--ink-line); border-radius:14px; padding:11px 14px;
  font-size:14px; line-height:1.55; color:var(--tx-soft) }
.ad-bubble b{ color:var(--tx) }
.ad-msg.me .ad-bubble{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#2a2110; border:none }
.ad-msg.me .ad-bubble b{ color:#2a2110 }
.ad-link{ display:inline-block; margin-top:8px; color:var(--gold); font-size:13px; border-bottom:1px solid var(--gold) }
.ad-typing{ display:inline-flex; gap:4px; padding:2px 0 }
.ad-typing i{ width:6px; height:6px; border-radius:50%; background:var(--tx-mute); animation:blink 1.2s infinite both }
.ad-typing i:nth-child(2){ animation-delay:.2s } .ad-typing i:nth-child(3){ animation-delay:.4s }
.ad-suggest{ display:flex; gap:7px; flex-wrap:wrap; padding:0 18px 12px }
.ad-chip{ border:1px solid var(--ink-line); border-radius:100px; padding:7px 12px; font-size:12.5px; color:var(--tx-soft); transition:.2s }
.ad-chip:hover{ border-color:var(--gold); color:var(--tx) }
.ad-form{ display:flex; gap:8px; padding:14px 16px; border-top:1px solid var(--ink-line) }
#ad-input{ flex:1; background:var(--ink-2); border:1px solid var(--ink-line); border-radius:100px;
  padding:11px 16px; color:var(--tx); font-family:var(--sans); font-size:14px }
#ad-input:focus{ outline:none; border-color:var(--gold) }
.ad-form button{ width:42px; flex:0 0 auto; border-radius:50%; background:var(--gold); color:#2a2110; font-size:18px; font-weight:600 }
.ad-cmp{ width:100%; border-collapse:collapse; margin:10px 0; font-size:13px }
.ad-cmp th,.ad-cmp td{ padding:6px 8px; text-align:center; border-bottom:1px solid var(--ink-line) }
.ad-cmp th:first-child,.ad-cmp td:first-child{ text-align:left; color:var(--tx-mute) }
.ad-cmp .win{ color:var(--gold-bright); font-weight:600 }
.ad-cmp-tot td{ border-top:1px solid var(--ink-line); border-bottom:none; font-weight:600 }

/* print / save-as-PDF */
@media print{
  #stars,#theme-dock,#advisor,#modal,.map-hint,.atlas-actions,.refine,.pcard-cta,.domain-bar{ display:none !important }
  html,body{ background:var(--ink) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact }
  .view:not(#view-atlas){ display:none !important }
  #view-atlas{ display:block !important }
  .topbar{ position:static }
  .atlas{ padding-top:20px }
  .sec,.season,.place-panel,.map-wrap,.pcard,.chart-strip,.life{ break-inside:avoid }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNTS · PROFILES · ASSESSMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* top-bar account nav */
#acct-nav{ display:flex; align-items:center; gap:14px; margin-left:auto }
.acct-link{ color:var(--tx-soft); font-size:14px; letter-spacing:.02em; transition:.25s }
.acct-link:hover{ color:var(--gold) }
.btn-mini{ font-size:13.5px; font-weight:500; color:#2a2110; background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  padding:9px 16px; border-radius:100px }
.btn-mini:hover{ transform:translateY(-1px) }
.acct-chip{ width:36px; height:36px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--gold-bright),var(--gold)); color:#2a2110; position:relative }
.acct-ini{ font-family:var(--serif); font-weight:600; font-size:16px }
.acct-menu{ position:absolute; top:60px; right:clamp(20px,4vw,46px); z-index:40; width:220px;
  background:var(--ink-1); border:1px solid var(--ink-line); border-radius:14px; padding:8px; box-shadow:var(--shadow) }
.am-name{ font-family:var(--serif); font-size:16px; padding:8px 10px 0 }
.am-email{ color:var(--tx-mute); font-size:12.5px; padding:0 10px 8px; border-bottom:1px solid var(--ink-line); margin-bottom:6px }
.acct-menu button{ display:block; width:100%; text-align:left; padding:10px; border-radius:9px; color:var(--tx-soft); font-size:14px; transition:.2s }
.acct-menu button:hover{ background:rgba(124,92,255,.1); color:var(--tx) }

/* auth */
.auth{ max-width:560px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:130px clamp(22px,5vw,40px) 60px }
.auth-eyebrow{ color:var(--gold); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:18px }
.auth-title{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,5.5vw,52px); line-height:1.04; letter-spacing:-.01em }
.auth-sub{ color:var(--tx-soft); margin-top:18px; font-weight:300; font-size:16.5px; line-height:1.6; max-width:46ch }
.auth-form{ margin-top:34px; display:flex; flex-direction:column; gap:18px; max-width:420px }
.auth-form label{ display:flex; flex-direction:column; gap:8px }
.auth-form label span{ color:var(--tx-mute); font-size:12px; letter-spacing:.14em; text-transform:uppercase }
.auth-form input{ background:var(--ink-1); border:1px solid var(--ink-line); border-radius:12px; padding:14px 16px;
  color:var(--tx); font-family:var(--sans); font-size:16px; transition:.25s }
.auth-form input:focus{ outline:none; border-color:var(--gold) }
.auth-form .btn{ margin-top:6px; justify-content:center }
.auth-err{ color:var(--terra); font-size:14px }
.auth-alt{ margin-top:22px; color:var(--tx-soft); font-size:15px }
.auth-note{ margin-top:24px; color:var(--tx-mute); font-size:12.5px }
.hero-acct{ margin-top:16px; color:var(--tx-mute); font-size:14px }

/* profiles dashboard */
.profiles{ max-width:var(--maxw); margin:0 auto; padding:120px clamp(20px,4vw,46px) 100px }
.prof-head{ margin-bottom:36px }
.prof-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:20px }
.prof-card{ border:1px solid var(--ink-line); border-radius:var(--r); padding:24px; background:linear-gradient(160deg,rgba(255,255,255,.02),transparent);
  transition:.35s var(--ease); display:flex; flex-direction:column }
.prof-card:hover{ border-color:rgba(124,92,255,.45); transform:translateY(-3px) }
.pc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.pc-avatar{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:var(--serif);
  font-size:20px; font-weight:600; color:#2a2110; background:linear-gradient(150deg,var(--gold-bright),var(--gold)) }
.pc-type{ font-size:12px; color:var(--tx-soft); letter-spacing:.08em; border:1px solid var(--ink-line); padding:5px 11px; border-radius:100px }
.prof-card h3{ font-family:var(--serif); font-weight:500; font-size:23px; margin-bottom:6px }
.pc-birth{ color:var(--tx-mute); font-size:13px; line-height:1.5; min-height:2.6em }
.pc-assess{ display:flex; align-items:center; gap:6px; margin:16px 0 18px }
.adot{ width:8px; height:8px; border-radius:50%; background:var(--ink-line) }
.adot.on{ background:var(--sage); box-shadow:0 0 7px var(--sage) }
.pc-assess-l{ color:var(--tx-mute); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; margin-left:4px }
.pc-actions{ display:flex; align-items:center; gap:8px; margin-top:auto }
.pc-actions .btn{ padding:11px 18px; font-size:14px }
.pc-map{ flex:1; justify-content:center }
.pc-icon{ width:38px; height:38px; border-radius:10px; border:1px solid var(--ink-line); color:var(--tx-soft); font-size:14px; transition:.2s }
.pc-icon:hover{ border-color:var(--gold); color:var(--tx) }
.prof-add{ border:1.5px dashed var(--ink-line); border-radius:var(--r); padding:24px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center; min-height:230px; transition:.3s var(--ease); color:var(--tx-soft) }
.prof-add:hover{ border-color:var(--gold); background:rgba(124,92,255,.05) }
.pa-plus{ font-size:30px; color:var(--gold) }
.prof-add b{ font-family:var(--serif); font-size:18px; font-weight:500; color:var(--tx) }
.prof-add span{ font-size:13px; color:var(--tx-mute); max-width:22ch }

/* editor */
.editor{ max-width:760px; margin:0 auto; padding:118px clamp(22px,5vw,40px) 80px }
.ed-back{ color:var(--tx-soft); font-size:14px; margin-bottom:20px; transition:.2s }
.ed-back:hover{ color:var(--gold) }
.ed-label{ color:var(--tx-mute); font-size:12px; letter-spacing:.16em; text-transform:uppercase; margin:30px 0 14px }
.ed-types{ display:flex; gap:10px; flex-wrap:wrap }
.ed-type{ border:1px solid var(--ink-line); border-radius:14px; padding:14px 18px; color:var(--tx-soft);
  display:flex; flex-direction:column; align-items:center; gap:6px; min-width:96px; transition:.25s var(--ease); font-size:14px }
.ed-type span{ font-size:20px; color:var(--gold) }
.ed-type:hover{ border-color:#46415a; color:var(--tx) }
.ed-type.sel{ border-color:var(--gold); background:linear-gradient(180deg,rgba(124,92,255,.14),rgba(124,92,255,.04)); color:var(--tx) }
.ed-foot{ display:flex; justify-content:space-between; margin-top:42px }

/* assessment modal */
#assess-modal #assess-card{ width:min(620px,94vw) }
.ah{ padding:34px 36px }
.ah-eyebrow{ color:var(--gold); font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:14px }
.ah h2{ font-family:var(--serif); font-weight:300; font-size:clamp(24px,3.6vw,32px); line-height:1.12 }
.ah-sub{ color:var(--tx-soft); margin-top:12px; font-size:15px; font-weight:300 }
.ah-grid{ margin-top:26px; display:flex; flex-direction:column; gap:12px }
.ah-card{ text-align:left; border:1px solid var(--ink-line); border-radius:14px; padding:18px 20px; display:grid;
  grid-template-columns:auto 1fr auto; align-items:center; gap:6px 16px; transition:.25s var(--ease) }
.ah-card:hover{ border-color:rgba(124,92,255,.45); transform:translateX(3px) }
.ah-card.done{ border-color:rgba(127,160,140,.4) }
.ah-g{ grid-row:span 2; font-size:24px; color:var(--gold); width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--ink-line); border-radius:12px }
.ah-card b{ font-family:var(--serif); font-size:18px; font-weight:500 }
.ah-card>span{ color:var(--tx-mute); font-size:13.5px; grid-column:2 }
.ah-card em{ grid-row:span 2; color:var(--gold); font-style:normal; font-size:13px; white-space:nowrap }
.ah-card.done em{ color:var(--sage) }
.ah-foot{ margin-top:24px; text-align:center }

.asx{ padding:34px 36px }
.asx-q{ font-family:var(--serif); font-weight:300; font-size:clamp(22px,3.4vw,30px); line-height:1.18; margin-top:6px }
.asx-help{ color:var(--tx-soft); margin-top:10px; font-size:14.5px; font-weight:300 }
.asx-body{ margin-top:22px }
.asx-chips{ display:flex; flex-wrap:wrap; gap:10px }
.asx-chips.col{ flex-direction:column }
.asx-chip{ border:1px solid var(--ink-line); border-radius:100px; padding:11px 18px; color:var(--tx-soft); font-size:15px; transition:.22s; text-align:left }
.asx-chip:hover{ border-color:#46415a; color:var(--tx) }
.asx-chip.sel{ background:var(--gold); color:#2a2110; border-color:var(--gold); font-weight:600 }
.asx-ab{ display:grid; gap:12px }
.asx-opt{ border:1px solid var(--ink-line); border-radius:14px; padding:18px 20px; text-align:left; color:var(--tx);
  font-size:16px; transition:.22s var(--ease) }
.asx-opt:hover{ border-color:var(--gold); transform:translateX(3px) }
.asx-opt.sel{ background:linear-gradient(180deg,rgba(124,92,255,.16),rgba(124,92,255,.04)); border-color:var(--gold) }
.asx-prog{ color:var(--tx-mute); font-size:13px; margin-top:18px; text-align:center; letter-spacing:.1em }
.asx-sliders{ display:flex; flex-direction:column; gap:22px }
.asx-slider label{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--serif); font-size:17px; margin-bottom:10px }
.asx-slider label b{ color:var(--gold-bright); font-size:18px }
.asx-slider input[type=range]{ width:100%; accent-color:var(--gold); height:4px }
.asx-foot{ margin-top:28px; display:flex; justify-content:space-between; gap:12px }
.asx-foot .btn{ justify-content:center }
.asx-foot:has(.btn:only-child){ justify-content:flex-end }
.asx-result{ text-align:center }
.asx-result h2{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,4.4vw,40px); color:var(--gold-bright); margin-top:8px }
.pr-traits{ display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin:22px 0 }
.pr-traits span{ border:1px solid var(--ink-line); border-radius:100px; padding:8px 16px; font-size:14px; color:var(--tx) }
.asx-result .btn{ margin-top:10px }

/* ═══════════════════════════════════════════════════════════════════════════
   NATAL CHART
   ═══════════════════════════════════════════════════════════════════════════ */
.natal-cta{ margin-top:18px; font-size:14px; padding:12px 22px }
.natal{ max-width:var(--maxw); margin:0 auto; padding:118px clamp(20px,4vw,46px) 100px }
.natal-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:26px }
.natal-warn{ border:1px solid var(--ink-line); border-left:2px solid var(--gold); border-radius:0 12px 12px 0;
  padding:14px 18px; color:var(--tx-soft); font-size:14.5px; font-weight:300; margin-bottom:24px; max-width:60ch }
.house-toggle{ display:flex; align-items:center; gap:8px; margin-bottom:26px }
.house-toggle>span{ color:var(--tx-mute); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-right:6px }
.ht{ border:1px solid var(--ink-line); border-radius:100px; padding:9px 18px; color:var(--tx-soft); font-size:14px; transition:.25s }
.ht:hover{ border-color:#46415a; color:var(--tx) }
.ht.sel{ background:var(--gold); color:#2a2110; border-color:var(--gold); font-weight:600 }

.natal-grid{ display:grid; grid-template-columns:600px 1fr; gap:36px; align-items:start }
.natal-grid.lower{ margin-top:18px }
@media(max-width:1040px){ .natal-grid, .natal-grid.lower{ grid-template-columns:1fr } }
.natal .wheel{ border:1px solid var(--ink-line); border-radius:24px; background:linear-gradient(180deg,#13111b,#0e0d14); padding:14px }
.nw-ring{ fill:none; stroke:var(--ink-line); stroke-width:1 }
.nw-line{ stroke:var(--ink-line); stroke-width:1 }
.nw-house{ stroke:#232130; stroke-width:1 }
.nw-axis{ stroke:#3a3550; stroke-width:1.5 }
.nw-sign{ fill:var(--gold); font-size:22px; font-family:var(--serif) }
.nw-hnum{ fill:var(--tx-mute); font-size:12px; font-family:var(--serif) }
.nw-angle{ fill:var(--gold-bright); font-size:13px; font-weight:700; font-family:var(--serif) }
.nw-pdot{ fill:var(--ink-1); stroke:#3a3550; stroke-width:1 }
.nw-pg{ fill:var(--tx); font-size:16px; font-family:var(--serif) }
.nw-pdeg{ fill:var(--tx-mute); font-size:10px }

.natal .panel{ border:1px solid var(--ink-line); border-radius:18px; background:linear-gradient(160deg,rgba(255,255,255,.02),transparent); padding:22px 24px; margin-bottom:18px }
.natal .panel h3{ font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:16px }
.summary{ color:var(--tx-soft); font-size:16px; line-height:1.7; font-weight:300 }
.summary b{ color:var(--tx); font-weight:500 }
.natal-table{ width:100%; border-collapse:collapse; font-size:14px }
.natal-table th{ text-align:left; color:var(--tx-mute); font-weight:400; font-size:12px; letter-spacing:.06em; padding-bottom:8px }
.natal-table th:last-child{ text-align:right }
.natal-table td{ padding:9px 0; border-top:1px solid var(--ink-line); color:var(--tx-soft) }
.natal-table td:first-child{ color:var(--tx); font-family:var(--serif); width:36% }
.natal-table td:last-child{ text-align:right; color:var(--tx-mute); width:14% }
.nretro{ color:var(--terra); font-size:12px }
.dom-row{ display:grid; grid-template-columns:66px 1fr 42px; align-items:center; gap:12px; font-size:14px; margin-bottom:11px; color:var(--tx-soft) }
.dom-row .track{ height:5px; border-radius:3px; background:var(--ink-line); overflow:hidden }
.dom-row .fill{ height:100%; border-radius:3px; transition:width .8s var(--ease) }
.dom-row b{ text-align:right; color:var(--tx-mute); font-variant-numeric:tabular-nums }
.natal .chips{ display:flex; gap:9px; flex-wrap:wrap }
.natal .chip{ border:1px solid var(--ink-line); border-radius:100px; padding:8px 14px; font-size:13px; color:var(--tx-soft) }
.natal .chip b{ color:var(--gold-bright); font-family:var(--serif); font-weight:500 }
.asp-list{ display:flex; flex-direction:column; gap:3px }
.asp-row{ font-size:14px; color:var(--tx-soft); padding:6px 0; font-family:var(--serif); border-bottom:1px solid rgba(43,41,55,.5) }
.asp-row em{ color:var(--tx-mute); font-style:normal; font-size:12px; float:right }
.ai-explain{ border:1px solid rgba(124,92,255,.35); border-radius:18px; background:linear-gradient(135deg,rgba(124,92,255,.08),transparent); padding:24px }
.ai-explain h3{ font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:14px }
.ai-body p{ color:var(--tx-soft); font-size:14.5px; line-height:1.65; font-weight:300; margin-bottom:13px }
.ai-body p b{ color:var(--tx); font-weight:600 }
.ai-body em{ color:var(--gold-bright); font-style:normal }
.ai-body .btn{ margin-top:6px }
.ai-typing{ display:inline-flex; gap:5px; padding:6px 0 }
.ai-typing i{ width:7px; height:7px; border-radius:50%; background:var(--tx-mute); animation:blink 1.2s infinite both }
.ai-typing i:nth-child(2){ animation-delay:.2s } .ai-typing i:nth-child(3){ animation-delay:.4s }

/* Google auth button + divider */
.btn-google{ display:flex; align-items:center; justify-content:center; gap:11px; width:100%; max-width:420px;
  background:#fff; color:#2a2620; font-weight:600; font-size:15px; padding:13px 18px; border-radius:12px; transition:.2s var(--ease) }
.btn-google:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(0,0,0,.45) }
.btn-google svg{ flex:0 0 auto }
.auth-or{ display:flex; align-items:center; gap:14px; max-width:420px; margin:20px 0 2px; color:var(--tx-mute); font-size:12px; letter-spacing:.08em; text-transform:uppercase }
.auth-or span{ white-space:nowrap }
.auth-or::before, .auth-or::after{ content:""; flex:1; height:1px; background:var(--ink-line) }
.auth-or + .auth-form{ margin-top:10px }
.auth-ok{ color:var(--sage); font-size:14px }

/* profile card: birth-chart button + second action row */
.pc-chart{ flex:1; justify-content:center; padding:11px 14px !important; font-size:13.5px }
.pc-actions2{ display:flex; align-items:center; gap:8px; margin-top:10px }
.btn-text{ color:var(--tx-soft); font-size:13.5px; transition:.2s var(--ease) }
.btn-text:hover{ color:var(--gold) }
.pc-spacer{ flex:1 }

/* ═══════════════════════════════════════════════════════════════════════════
   EXPLORE (full astrocartography)
   ═══════════════════════════════════════════════════════════════════════════ */
.explore{ max-width:var(--maxw); margin:0 auto; padding:118px clamp(20px,4vw,46px) 100px }
.atlas-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px }
.ex-search{ display:flex; gap:12px; align-items:center; margin:8px 0 24px; flex-wrap:wrap }
.ex-search .place-field .ob-input{ font-size:20px }
.ex-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:26px; align-items:start }
@media(max-width:1040px){ .ex-grid{ grid-template-columns:1fr } }
#ex-svg{ display:block; width:100%; background:#0d0f17 }
.ex-land{ fill:#1c2430; stroke:#28323f; stroke-width:.5 }
.ex-grat{ stroke:#1a2028; stroke-width:.5; opacity:.5 }
.ex-l{ fill:none; stroke:currentColor; stroke-linecap:round; filter:drop-shadow(0 0 3px currentColor) }
.ex-l.mc{ stroke-width:1.6 } .ex-l.ic{ stroke-width:1.1; stroke-dasharray:2 7 }
.ex-l.ac,.ex-l.dc{ stroke-width:1.2 } .ex-l.dc{ stroke-dasharray:6 5 }
.ex-ls{ fill:none; stroke:currentColor; stroke-width:1.2; stroke-dasharray:1 5; opacity:.7 }
.ex-blabel,.ex-land+g text{ fill:#B9A6FF; font-size:13px; font-family:var(--serif); paint-order:stroke; stroke:#0d0f17; stroke-width:3px }
.ex-legend{ display:flex; flex-wrap:wrap; gap:6px; padding:12px 14px; background:var(--ink-1); border-top:1px solid var(--ink-line) }
.ex-leg{ display:flex; align-items:center; gap:6px; border:1px solid var(--ink-line); border-radius:100px; padding:6px 11px; font-size:12px; color:var(--tx-soft); transition:.2s }
.ex-leg i{ width:14px; height:3px; border-radius:2px; background:var(--c) }
.ex-leg:hover{ color:var(--tx); border-color:#46415a }
.ex-leg.on{ border-color:var(--gold); color:var(--tx) }
.ex-leg[disabled]{ opacity:.4 }

#ex-panel .panel, .ex-lower .panel, .explore .panel{ border:1px solid var(--ink-line); border-radius:18px; background:linear-gradient(160deg,rgba(255,255,255,.02),transparent); padding:22px 24px }
.explore .panel h3{ font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:14px }
.ex-ph{ min-height:200px }
.ex-loc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px }
.ex-loc-head h3{ font-family:var(--serif)!important; font-weight:400!important; font-size:26px!important; text-transform:none!important; letter-spacing:0!important; color:var(--tx)!important }
.ex-loc-head .heart{ position:static }
.ex-reloc{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 8px; padding:16px; border:1px solid var(--ink-line); border-radius:12px }
.ex-reloc span{ display:block; color:var(--tx-mute); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:5px }
.ex-reloc b{ font-family:var(--serif); font-size:18px; color:var(--gold-bright); font-weight:500 }
.ex-lines{ display:flex; flex-direction:column; gap:14px }
.ex-line{ display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px; align-items:baseline }
.ex-dot{ width:9px; height:9px; border-radius:50%; grid-row:span 2; align-self:center }
.ex-line b{ font-family:var(--serif); font-weight:500; color:var(--tx) }
.ex-line i{ color:var(--tx-mute); font-size:12.5px; font-style:normal }
.ex-line p{ grid-column:2/-1; color:var(--tx-soft); font-size:13.5px; font-weight:300; line-height:1.5 }
.ex-lower{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px }
@media(max-width:760px){ .ex-lower{ grid-template-columns:1fr } }
.ex-saved{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid rgba(43,41,55,.6); cursor:pointer }
.ex-saved:hover b{ color:var(--gold) }
.ex-rank{ font-family:var(--serif); color:var(--gold); font-size:13px; width:34px }
.ex-saved b{ flex:1; font-family:var(--serif); font-weight:400; font-size:16px }
.ex-sc{ color:var(--tx-mute); font-variant-numeric:tabular-nums }
.ex-x{ color:var(--tx-mute); font-size:13px } .ex-x:hover{ color:var(--terra) }
.ex-ls-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px }
.ex-lsd{ display:flex; align-items:baseline; gap:8px; border:1px solid var(--ink-line); border-radius:10px; padding:11px 13px; font-size:14px; color:var(--tx-soft) }
.ex-lsd b{ margin-left:auto; font-family:var(--serif); color:var(--tx); font-size:15px } .ex-lsd i{ color:var(--tx-mute); font-size:12px; font-style:normal }
.ex-cmp{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
.ex-cmp-col{ border:1px solid var(--ink-line); border-radius:14px; padding:20px }
.ex-cmp-col h4{ font-family:var(--serif); font-weight:500; font-size:19px; margin-bottom:8px }
.ex-cmp-score{ font-family:var(--serif); font-size:36px; color:var(--gold-bright); margin-bottom:14px } .ex-cmp-score span{ font-size:15px; color:var(--tx-mute) }
.ex-cmp-row{ display:flex; justify-content:space-between; font-size:14px; padding:7px 0; border-top:1px solid var(--ink-line); color:var(--tx-soft) }
.ex-cmp-row b{ font-family:var(--serif); color:var(--tx) }
.ex-cmp-lines{ display:flex; flex-direction:column; gap:5px; margin-top:14px; font-size:13.5px; font-family:var(--serif) }

/* ═══════════════════════════════════════════════════════════════════════════
   CITY & COUNTRY ANALYSIS
   ═══════════════════════════════════════════════════════════════════════════ */
.cities{ max-width:var(--maxw); margin:0 auto; padding:118px clamp(20px,4vw,46px) 80px }
.ct-toggle{ display:flex; gap:8px; margin:6px 0 28px }
.ct-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px }
.ct-card{ border:1px solid var(--ink-line); border-radius:16px; padding:22px 22px 20px;
  background:linear-gradient(160deg,rgba(255,255,255,.02),transparent); cursor:pointer; transition:.3s var(--ease) }
.ct-card:hover{ transform:translateY(-3px); border-color:rgba(124,92,255,.45) }
.ct-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px }
.ct-ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:17px; color:var(--gold);
  border:1px solid var(--ink-line); background:rgba(124,92,255,.06) }
.ct-label{ flex:1; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-soft) }
.ct-score{ font-family:var(--serif); font-size:22px; color:var(--gold-bright); font-weight:500 }
.ct-card h3{ font-family:var(--serif); font-weight:400; font-size:27px; line-height:1; margin-bottom:4px }
.ct-country{ color:var(--tx-mute); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px }
.ct-why{ color:var(--tx-soft); font-size:13.5px; line-height:1.55; font-weight:300 }
.ct-why b{ color:var(--gold-bright); font-weight:500 }
.ct-runner{ margin-top:12px; padding-top:12px; border-top:1px solid var(--ink-line); color:var(--tx-mute); font-size:12.5px }

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION NAV
   ═══════════════════════════════════════════════════════════════════════════ */
.tnav{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:9px 14px; border:1px solid var(--ink-line); border-radius:20px; background:var(--ink-1); width:fit-content; max-width:100% }
.tnav-grp{ display:flex; flex-direction:column; gap:5px }
.tnav-gl{ color:var(--tx-mute); font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding-left:6px }
.tnav-items{ display:flex; gap:4px; flex-wrap:wrap }
.tnav-sep{ width:1px; align-self:stretch; background:var(--ink-line); margin:0 2px }
.tnav-i{ padding:8px 15px; border-radius:100px; color:var(--tx-soft); font-size:13.5px; transition:.25s var(--ease); white-space:nowrap }
.tnav-i:hover{ color:var(--tx); background:rgba(255,255,255,.03) }
.tnav-i.on{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#2a2110; font-weight:600 }
@media(max-width:720px){ .tnav-sep{ display:none } .tnav{ gap:8px } }

/* city theme detail */
.ct-more{ color:var(--gold); margin-left:6px }
.ct-detail{ animation:rise .5s var(--ease) }
.ct-d-head{ display:flex; gap:18px; align-items:flex-start; margin:18px 0 28px }
.ct-rank-list{ display:flex; flex-direction:column; gap:10px }
.ct-rank{ display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; border:1px solid var(--ink-line);
  border-radius:14px; padding:16px 20px; cursor:pointer; transition:.25s var(--ease) }
.ct-rank:hover{ border-color:rgba(124,92,255,.45); transform:translateX(3px) }
.ct-r-n{ font-family:var(--serif); color:var(--gold); font-size:15px; width:38px }
.ct-r-main b{ font-family:var(--serif); font-size:20px; font-weight:500 }
.ct-r-co{ color:var(--tx-mute); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; margin-left:8px }
.ct-r-why{ color:var(--tx-soft); font-size:13.5px; font-weight:300; margin-top:5px }
.ct-r-facts{ color:var(--tx-mute); font-size:12.5px; margin-top:3px }
.ct-r-score{ font-family:var(--serif); font-size:24px; color:var(--gold-bright); font-weight:500 }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPASS
   ═══════════════════════════════════════════════════════════════════════════ */
.compass{ max-width:var(--maxw); margin:0 auto; padding:112px clamp(20px,4vw,46px) 90px }
.cp-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:22px; align-items:start; margin-top:24px }
@media(max-width:980px){ .cp-grid{ grid-template-columns:1fr } }
.compass .panel{ border:1px solid var(--ink-line); border-radius:18px; background:linear-gradient(160deg,rgba(255,255,255,.02),transparent); padding:22px 24px; margin-bottom:18px }
.compass .panel h3{ font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:14px }
.cp-cad-head h3{ font-family:var(--serif)!important; font-weight:400!important; font-size:22px!important; text-transform:none!important; letter-spacing:0!important; color:var(--tx)!important; margin-bottom:6px!important }
.cp-cad-head p{ color:var(--tx-soft); font-size:14.5px; font-weight:300; margin-bottom:18px }
.cp-cad-head b{ color:var(--gold-bright); font-weight:500 }
.cp-list{ display:flex; flex-direction:column; gap:14px }
.cp-item{ display:grid; grid-template-columns:auto 1fr; gap:12px }
.cp-dot{ width:9px; height:9px; border-radius:50%; background:var(--tx-mute); margin-top:6px }
.cp-item.good .cp-dot{ background:var(--sage); box-shadow:0 0 7px var(--sage) }
.cp-item.risk .cp-dot{ background:var(--terra); box-shadow:0 0 7px var(--terra) }
.cp-item p{ color:var(--tx-soft); font-size:14px; line-height:1.6; font-weight:300 }
.cp-item b{ color:var(--tx); font-weight:500 }
.cp-ul{ list-style:none; display:flex; flex-direction:column; gap:11px }
.cp-ul li{ position:relative; padding-left:20px; color:var(--tx-soft); font-size:14px; line-height:1.55; font-weight:300 }
.cp-ul li::before{ content:'✦'; position:absolute; left:0; color:var(--gold); font-size:11px; top:3px }
.cp-ul b{ color:var(--tx); font-weight:500 }
.cp-advisor{ border-color:rgba(124,92,255,.35)!important; background:linear-gradient(135deg,rgba(124,92,255,.08),transparent)!important }
.cp-alerts.good{ border-color:rgba(127,160,140,.3)!important }
.cp-alerts.risk{ border-color:rgba(194,107,74,.3)!important }
.cp-alert{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid rgba(43,41,55,.5); font-size:13.5px }
.cp-alert b{ font-family:var(--serif); font-weight:500; color:var(--tx) }
.cp-alert span{ color:var(--tx-mute); font-size:12.5px; text-align:right }
.cp-coach .summary b{ color:var(--gold-bright) }

/* AI-written reading blocks (Compass + natal) */
.cp-ai{ border-left:2px solid var(--gold); padding:2px 0 2px 16px; margin:0 0 18px }
.cp-ai-tag{ color:var(--gold); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px }
.cp-ai p{ color:var(--tx); font-size:15px; line-height:1.7; font-weight:300; margin-bottom:10px }
.ai-by{ color:var(--gold)!important; font-size:12px!important; letter-spacing:.1em; margin-top:4px!important }

/* ═══════════════════════════════════════════════════════════════════════
   Goal-Based Planning (Plans) + Relocation Intelligence
   ═══════════════════════════════════════════════════════════════════════ */
.goals, .relocate{ max-width:var(--maxw); margin:0 auto; padding:118px clamp(20px,4vw,46px) 80px }

/* ── plans grid ── */
.gp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin-top:30px }
.gp-card{ position:relative; border:1px solid var(--ink-line); border-radius:16px; padding:24px 22px 20px;
  background:linear-gradient(160deg,rgba(255,255,255,.025),transparent); cursor:pointer; transition:.28s var(--ease) }
.gp-card:hover{ border-color:var(--gold); transform:translateY(-3px); background:linear-gradient(160deg,rgba(124,92,255,.07),transparent) }
.gp-ic{ font-size:26px; line-height:1; margin-bottom:14px }
.gp-card h3{ font-family:var(--serif); font-weight:400; font-size:21px; color:var(--tx); margin-bottom:5px }
.gp-tag{ color:var(--tx-soft); font-size:13.5px; font-weight:300; line-height:1.5; margin-bottom:14px }
.gp-ruler{ display:flex; align-items:center; gap:7px; font-size:16px }
.gp-ruler i{ color:var(--tx-mute); font-size:11.5px; font-style:normal; letter-spacing:.04em }
.gp-open{ display:block; margin-top:16px; color:var(--gold); font-size:13px; letter-spacing:.04em }
.gp-foryou{ position:absolute; top:14px; right:14px; background:var(--gold); color:#2a2110; font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:100px }

/* ── plan detail ── */
.gp-d-head{ display:flex; gap:18px; align-items:flex-start; margin:24px 0 22px }
.gp-d-ic{ font-size:30px; line-height:1; margin-top:6px }
.gp-headline{ border:1px solid rgba(124,92,255,.35); border-radius:16px; padding:20px 22px; margin-bottom:24px;
  background:linear-gradient(135deg,rgba(124,92,255,.09),transparent) }
.gp-hl-tag{ display:inline-block; color:var(--gold); font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:10px }
.gp-headline p{ color:var(--tx); font-size:17px; line-height:1.6; font-weight:300 }
.gp-sections{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-bottom:18px }
.gp-sec{ border:1px solid var(--ink-line); border-radius:16px; padding:20px 22px; background:linear-gradient(160deg,rgba(255,255,255,.02),transparent); margin-bottom:18px }
.gp-sec h4{ font-family:var(--serif); font-weight:500; font-size:15px; color:var(--gold-bright); margin-bottom:14px; letter-spacing:.01em }
.gp-sec-fine{ color:var(--tx-mute); font-size:12px; margin-top:12px; line-height:1.5 }
.gp-edge{ color:var(--tx-soft); font-size:15px; line-height:1.65; font-weight:300 }
.gp-edge b{ color:var(--tx); font-weight:500 }

/* places mini-list (shared by plans) */
.gp-places{ display:flex; flex-direction:column; gap:9px }
.gp-place{ display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--ink-line); border-radius:12px; cursor:pointer; transition:.2s }
.gp-place:hover{ border-color:var(--gold); background:rgba(124,92,255,.05) }
.gp-place-n{ color:var(--tx-mute); font-size:12px; font-family:var(--serif); min-width:26px }
.gp-place b{ color:var(--tx); font-weight:500; font-size:15px }
.gp-place-co{ color:var(--tx-mute); font-size:12.5px; margin-left:5px }
.gp-place-why{ color:var(--tx-soft); font-size:12.5px; font-weight:300; margin-top:3px; line-height:1.45 }
.gp-place-sc{ margin-left:auto; font-family:var(--serif); font-size:19px; color:var(--gold-bright) }

/* timing block */
.gp-when{ display:flex; gap:11px; align-items:flex-start; color:var(--tx-soft); font-size:14px; line-height:1.6; font-weight:300 }
.gp-when b{ color:var(--tx); font-weight:500 }
.gp-when-dot{ width:9px; height:9px; border-radius:50%; background:var(--tx-mute); margin-top:6px; flex-shrink:0 }
.gp-when.good .gp-when-dot{ background:#7FA08C; box-shadow:0 0 8px #7FA08C }
.gp-when-care{ color:var(--terra); font-size:13px }

/* roadmap phases */
.gp-phases{ display:flex; flex-direction:column; gap:14px }
.gp-phase{ display:flex; gap:14px; align-items:flex-start }
.gp-phase-n{ width:26px; height:26px; border-radius:50%; border:1px solid var(--gold); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; margin-top:1px }
.gp-phase b{ color:var(--tx); font-weight:500; font-size:15px }
.gp-phase p{ color:var(--tx-soft); font-size:13.5px; font-weight:300; line-height:1.55; margin-top:3px }

/* checklist */
.gp-checklist{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px }
.gp-ci{ display:flex; gap:10px; align-items:flex-start; color:var(--tx-soft); font-size:14px; font-weight:300; cursor:pointer; line-height:1.45 }
.gp-ci input{ margin-top:2px; accent-color:var(--gold); width:15px; height:15px; flex-shrink:0 }
.gp-ci input:checked + span{ color:var(--tx-mute); text-decoration:line-through }

/* ── relocation ── */
.rl-top{ display:grid; grid-template-columns:1fr 1.15fr; gap:18px; margin-top:28px; align-items:start }
.relocate .panel{ border:1px solid var(--ink-line); border-radius:18px; background:linear-gradient(160deg,rgba(255,255,255,.02),transparent); padding:22px 24px }
.relocate .panel h3{ font-family:var(--serif); font-weight:400; font-size:20px; color:var(--tx); margin-bottom:6px }
.rl-rq{ display:flex; flex-direction:column; gap:14px; margin-bottom:6px }
.rl-q p{ color:var(--tx-soft); font-size:14px; font-weight:300; margin-bottom:8px; line-height:1.45 }
.rl-opts{ display:flex; gap:8px }
.rl-opt{ flex:1; border:1px solid var(--ink-line); border-radius:10px; padding:8px; color:var(--tx-soft); font-size:13px; transition:.2s }
.rl-opt:hover{ border-color:var(--gold) }
.rl-opt.on{ background:var(--gold); color:#2a2110; border-color:var(--gold); font-weight:600 }
.rl-score{ display:flex; gap:16px; align-items:center; margin-top:18px; padding:16px 18px; border-radius:14px; border:1px solid var(--ink-line) }
.rl-score.good{ border-color:rgba(127,160,140,.4); background:rgba(127,160,140,.06) }
.rl-score.mid{ border-color:rgba(124,92,255,.4); background:rgba(124,92,255,.06) }
.rl-score.low{ border-color:rgba(194,107,74,.4); background:rgba(194,107,74,.06) }
.rl-score-n{ font-family:var(--serif); font-size:34px; color:var(--gold-bright); line-height:1 }
.rl-score-n span{ font-size:15px; color:var(--tx-mute) }
.rl-score b{ color:var(--tx); font-family:var(--serif); font-weight:500; font-size:16px }
.rl-score p{ color:var(--tx-soft); font-size:13px; font-weight:300; margin-top:3px; line-height:1.5 }
.rl-prio, .rl-climate{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px }
.rl-prio-l{ color:var(--tx-mute); font-size:12.5px; letter-spacing:.04em; margin-right:4px }
.rl-cl{ border:1px solid var(--ink-line); border-radius:100px; padding:7px 14px; color:var(--tx-soft); font-size:13px; transition:.2s }
.rl-cl:hover{ border-color:var(--gold) }
.rl-cl.on{ background:var(--gold); color:#2a2110; border-color:var(--gold); font-weight:600 }
.rl-rank{ display:flex; flex-direction:column; gap:9px; margin-top:4px }
.rl-row{ display:flex; align-items:center; gap:12px; padding:12px 13px; border:1px solid var(--ink-line); border-radius:12px; cursor:pointer; transition:.2s }
.rl-row:hover{ border-color:var(--gold); background:rgba(124,92,255,.05) }
.rl-r-n{ color:var(--tx-mute); font-size:12px; font-family:var(--serif); min-width:26px }
.rl-r-main{ flex:1 }
.rl-r-main b{ color:var(--tx); font-weight:500; font-size:15px }
.rl-r-co{ color:var(--tx-mute); font-size:12.5px; margin-left:5px }
.rl-r-meta{ color:var(--tx-soft); font-size:12.5px; font-weight:300; margin-top:3px }
.rl-r-why{ color:var(--tx-mute); font-size:12px; font-weight:300; margin-top:2px }
.rl-r-score{ font-family:var(--serif); font-size:21px; color:var(--gold-bright) }

/* dossier */
.rl-headline{ border:1px solid rgba(124,92,255,.35); border-radius:16px; padding:20px 22px; margin-bottom:22px;
  background:linear-gradient(135deg,rgba(124,92,255,.09),transparent) }
.rl-headline p{ color:var(--tx); font-size:16px; line-height:1.6; font-weight:300 }
.rl-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:20px }
.rl-card{ border:1px solid var(--ink-line); border-radius:14px; padding:16px 18px; background:linear-gradient(160deg,rgba(255,255,255,.02),transparent) }
.rl-card-l{ display:block; color:var(--gold); font-size:11px; letter-spacing:.13em; text-transform:uppercase; margin-bottom:8px }
.rl-card-v{ display:block; color:var(--tx); font-weight:500; font-size:15px; line-height:1.5 }
.rl-card-r{ color:var(--tx-soft); font-size:12.5px; font-weight:300; margin-top:6px; line-height:1.5 }
.rl-check{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px }
.rl-check-grp b{ display:block; color:var(--gold-bright); font-family:var(--serif); font-weight:500; font-size:14px; margin-bottom:10px }
.rl-check-grp .gp-ci{ margin-bottom:9px }

@media(max-width:760px){ .rl-top{ grid-template-columns:1fr } .gp-sections{ grid-template-columns:1fr } }

/* ═══════════════════════════════════════════════════════════════════════
   Life Simulator · Career · Travel · Relationship Features
   (reuse .goals wrapper, .gp-* sections, .gp-places, .gp-when, .rl-score)
   ═══════════════════════════════════════════════════════════════════════ */
#view-simulator .goals, #view-career .goals, #view-travel .goals, #view-couples .goals{ max-width:var(--maxw); margin:0 auto; padding:118px clamp(20px,4vw,46px) 80px }

/* simulator cards reuse gp-card; extra simulator bits */
.sim-card{ position:relative; border:1px solid var(--ink-line); border-radius:16px; padding:22px; cursor:pointer; transition:.28s var(--ease);
  background:linear-gradient(160deg,rgba(255,255,255,.025),transparent) }
.sim-card:hover{ border-color:var(--gold); transform:translateY(-3px); background:linear-gradient(160deg,rgba(124,92,255,.07),transparent) }
.sim-ic{ font-size:25px; margin-bottom:12px }
.sim-card h3{ font-family:var(--serif); font-weight:400; font-size:20px; color:var(--tx); margin-bottom:5px }
.sim-card p{ color:var(--tx-soft); font-size:13.5px; font-weight:300; line-height:1.5 }
.sim-picker, .cr-ind, .cr-time, .rel-pbar, .rel-q-row{ display:flex }
.sim-picker{ align-items:center; gap:12px; margin:6px 0 22px; flex-wrap:wrap }
.sim-picker label, .cr-ind label, .sim-cmp-pick label{ color:var(--tx-mute); font-size:13px; letter-spacing:.03em }
.sim-picker select, .cr-ind select, #tv-dest, #rel-saved, .rel-quick select, .rel-q-row select, .rel-q-row input{
  background:var(--ink-1); border:1px solid var(--ink-line); border-radius:10px; color:var(--tx); font-size:14px; padding:10px 12px; font-family:inherit }
.sim-headline{ border:1px solid rgba(124,92,255,.35); border-radius:16px; padding:20px 22px; margin-bottom:22px; background:linear-gradient(135deg,rgba(124,92,255,.09),transparent) }
.sim-headline p{ color:var(--tx); font-size:16px; line-height:1.6; font-weight:300 }
.sim-base{ color:var(--tx-mute); font-size:13.5px }
.sim-bars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px }
.sim-bar{ border:1px solid var(--ink-line); border-radius:14px; padding:15px 17px; background:linear-gradient(160deg,rgba(255,255,255,.02),transparent) }
.sim-bar-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px }
.sim-bar-top span{ color:var(--tx); font-size:14px }
.sim-bar-top b{ font-family:var(--serif); font-size:18px; color:var(--gold-bright); display:flex; align-items:baseline; gap:6px }
.sim-bar-track{ height:6px; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden }
.sim-bar-track i{ display:block; height:100%; border-radius:6px }
.sim-bar-why{ color:var(--tx-mute); font-size:11.5px; margin-top:8px }
.sim-delta{ font-size:12px; font-family:var(--sans,inherit) }
.sim-delta.up{ color:#7FA08C } .sim-delta.down{ color:var(--terra) } .sim-delta.flat{ color:var(--tx-mute) }
.sim-fore{ border:1px solid var(--ink-line); border-left-width:3px; border-radius:12px; padding:13px 16px; margin-bottom:10px; color:var(--tx-soft); font-size:14px }
.sim-fore.good{ border-left-color:#7FA08C } .sim-fore.risk{ border-left-color:var(--terra) }
.sim-fore p{ color:var(--tx-mute); font-size:13px; margin-top:5px; line-height:1.5; font-weight:300 }
.sim-horizon{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:18px }
.sim-hz{ border:1px solid var(--ink-line); border-radius:12px; padding:14px 16px }
.sim-hz b{ color:var(--gold-bright); font-family:var(--serif); font-weight:500 }
.sim-hz p{ color:var(--tx-soft); font-size:13px; font-weight:300; margin-top:5px; line-height:1.5 }
.sim-cmp-wrap{ overflow-x:auto }
.sim-cmp{ width:100%; border-collapse:collapse; font-size:14px }
.sim-cmp th, .sim-cmp td{ padding:11px 14px; text-align:center; border-bottom:1px solid var(--ink-line) }
.sim-cmp th:first-child, .sim-cmp td:first-child{ text-align:left; color:var(--tx) }
.sim-cmp th{ color:var(--gold-bright); font-family:var(--serif); font-weight:500 }
.sim-cmp td{ color:var(--tx-soft) }
.sim-cmp td.sim-win{ color:#2a2110; background:var(--gold); font-weight:600; border-radius:6px }
.sim-cmp-pick{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:16px }

/* career */
.cr-ind{ align-items:center; gap:12px; flex-wrap:wrap }
.cr-times{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px }
.cr-time{ display:block; border:1px solid var(--ink-line); border-radius:14px; padding:15px 17px; background:linear-gradient(160deg,rgba(255,255,255,.02),transparent) }
.cr-time b{ color:var(--tx); font-family:var(--serif); font-weight:500; font-size:15px }
.cr-time p{ font-size:13px; font-weight:300; line-height:1.55; margin-top:8px }
.cr-good{ color:var(--tx-soft) } .cr-good::first-letter{ font-weight:700 }
.cr-neutral{ color:var(--tx-mute) }
.cr-risk{ color:var(--terra) }
.cr-insights{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px }
.cr-insights span{ display:block; font-size:13px; margin-bottom:7px }
.cr-insights p{ color:var(--tx-soft); font-size:13.5px; font-weight:300; line-height:1.6 }
.cr-insights b{ color:var(--tx); font-weight:500 }

/* relationship */
.rel-pbar{ gap:12px; flex-wrap:wrap; align-items:center }
.rel-quick{ margin-top:16px; display:flex; flex-direction:column; gap:10px; max-width:480px }
.rel-q-row{ gap:8px; flex-wrap:wrap; align-items:center }
.rel-q-row .ob-input{ flex:1; min-width:140px }
.rel-unk{ color:var(--tx-mute); font-size:12.5px; display:flex; align-items:center; gap:5px }
.rel-unk input{ accent-color:var(--gold) }
.rel-score-hero{ display:flex; gap:16px; flex-wrap:wrap; align-items:stretch; margin-bottom:18px }
.rel-score-hero .rl-score{ flex:1; min-width:280px }
.rel-sub{ display:flex; flex-direction:column; justify-content:center; gap:4px; border:1px solid var(--ink-line); border-radius:14px; padding:16px 22px; min-width:170px }
.rel-sub span{ color:var(--tx-mute); font-size:12.5px } .rel-sub b{ font-family:var(--serif); font-size:24px; color:var(--gold-bright) }
.rel-asp p{ color:var(--tx-soft); font-size:14px; font-weight:300; line-height:1.6; padding:9px 0; border-bottom:1px solid rgba(43,41,55,.5) }
.rel-asp b{ color:var(--tx); font-weight:500 }
.rel-comp{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px }
.rel-comp div{ border:1px solid var(--ink-line); border-radius:12px; padding:14px 16px }
.rel-comp span{ display:block; color:var(--tx-mute); font-size:12px } .rel-comp b{ font-family:var(--serif); font-size:19px; display:block; margin:5px 0 3px } .rel-comp i{ color:var(--tx-mute); font-size:11.5px; font-style:normal }
.rel-syn{ display:flex; flex-direction:column; gap:6px }
.rel-syn-row{ display:flex; align-items:center; gap:10px; font-size:16px; padding:7px 0; border-bottom:1px solid rgba(43,41,55,.5) }
.rel-syn-asp{ font-size:12px; padding:2px 9px; border-radius:100px; border:1px solid var(--ink-line); color:var(--tx-soft) }
.rel-syn-asp.flow{ color:#7FA08C; border-color:rgba(127,160,140,.4) } .rel-syn-asp.tension{ color:var(--terra); border-color:rgba(194,107,74,.4) }
.rel-syn-row i{ color:var(--tx-mute); font-size:12.5px; font-style:normal; margin-left:auto }

/* ═══════════════════════════════════════════════════════════════════════
   Forecasting & Timing
   ═══════════════════════════════════════════════════════════════════════ */
#view-forecast .goals{ max-width:var(--maxw); margin:0 auto; padding:118px clamp(20px,4vw,46px) 80px }
.fc-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:26px 0 4px }
.fc-tab{ padding:11px 20px; border:1px solid var(--ink-line); border-radius:100px; color:var(--tx-soft); font-size:14px; transition:.25s }
.fc-tab:hover{ color:var(--tx); border-color:var(--gold) }
.fc-tab.on{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#2a2110; font-weight:600; border-color:var(--gold) }
/* 5-year timeline */
.fc-timeline{ display:flex; flex-direction:column; gap:12px }
.fc-tl{ display:flex; gap:16px; align-items:flex-start; border:1px solid var(--ink-line); border-left-width:3px; border-radius:12px; padding:14px 17px; background:linear-gradient(160deg,rgba(255,255,255,.02),transparent) }
.fc-tl.good{ border-left-color:#7FA08C } .fc-tl.risk{ border-left-color:var(--terra) }
.fc-tl-date{ font-family:var(--serif); color:var(--gold-bright); font-size:14px; min-width:80px; padding-top:2px }
.fc-tl b{ font-size:15px } .fc-tl p{ color:var(--tx-soft); font-size:13px; font-weight:300; line-height:1.55; margin-top:4px }
/* cycles */
.fc-cycles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px }
.fc-cy{ border:1px solid var(--ink-line); border-radius:14px; padding:15px 17px }
.fc-cy.on{ border-color:var(--gold); background:linear-gradient(135deg,rgba(124,92,255,.09),transparent) }
.fc-cy-h{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:7px }
.fc-cy-h b{ color:var(--tx); font-family:var(--serif); font-weight:500; font-size:15px }
.fc-now{ color:#2a2110; background:var(--gold); font-size:10.5px; font-weight:600; letter-spacing:.06em; padding:2px 9px; border-radius:100px }
.fc-next{ color:var(--tx-mute); font-size:11.5px }
.fc-cy p{ color:var(--tx-soft); font-size:13px; font-weight:300; line-height:1.55 }
/* eclipses */
.fc-ecl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px }
.fc-e{ border:1px solid var(--ink-line); border-radius:14px; padding:15px 17px }
.fc-e-k{ display:inline-block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; border-radius:100px; border:1px solid var(--ink-line); margin-bottom:9px }
.fc-e-k.solar{ color:var(--gold-bright) } .fc-e-k.lunar{ color:#AEB6C8 }
.fc-e b{ display:block; color:var(--tx); font-family:var(--serif); font-weight:500; font-size:16px }
.fc-e-deg{ color:var(--tx-mute); font-size:12.5px }
.fc-e p{ color:var(--tx-soft); font-size:13px; font-weight:300; line-height:1.55; margin-top:8px }
.fc-e-no{ color:var(--tx-mute)!important }

/* ═══════════════════════════════════════════════════════════════════════
   Ask Terra — chat + agents
   ═══════════════════════════════════════════════════════════════════════ */
#view-chat .goals{ max-width:980px; margin:0 auto; padding:118px clamp(20px,4vw,46px) 80px }
.ch-agents{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:26px 0 18px }
.ch-agent{ text-align:left; border:1px solid var(--ink-line); border-radius:14px; padding:13px 15px; cursor:pointer; transition:.22s; background:linear-gradient(160deg,rgba(255,255,255,.02),transparent) }
.ch-agent:hover{ border-color:var(--gold) }
.ch-agent.on{ border-color:var(--gold); background:linear-gradient(135deg,rgba(124,92,255,.12),transparent) }
.ch-a-ic{ font-size:20px } .ch-agent b{ display:block; color:var(--tx); font-size:14px; margin:7px 0 3px; font-weight:500 }
.ch-agent i{ color:var(--tx-mute); font-size:11.5px; font-style:normal; line-height:1.4; display:block }
.ch-panel{ border:1px solid var(--ink-line); border-radius:20px; background:var(--ink-1); overflow:hidden }
.ch-thread{ min-height:280px; max-height:54vh; overflow-y:auto; padding:22px }
.ch-intro{ display:flex; gap:13px; align-items:flex-start; color:var(--tx-soft); font-size:15px; line-height:1.6; font-weight:300 }
.ch-ava{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:19px; background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(124,92,255,.05)); border:1px solid var(--ink-line); flex-shrink:0 }
.ch-ava.sm{ width:30px; height:30px; font-size:15px }
.ch-row{ display:flex; gap:11px; margin-bottom:16px; align-items:flex-start }
.ch-row.user{ justify-content:flex-end }
.ch-bubble{ max-width:75%; padding:13px 16px; border-radius:16px; font-size:14.5px; line-height:1.6; font-weight:300 }
.ch-bubble.user{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#2a2110; border-bottom-right-radius:4px; font-weight:400 }
.ch-bubble.bot{ background:rgba(255,255,255,.035); border:1px solid var(--ink-line); color:var(--tx); border-bottom-left-radius:4px }
.ch-bubble.bot b{ color:var(--gold-bright); font-weight:600 }
.ch-fallback-note{ color:var(--tx-mute); font-size:12px; font-style:italic }
.ch-typing{ display:flex; gap:5px; align-items:center }
.ch-typing span{ width:7px; height:7px; border-radius:50%; background:var(--tx-mute); animation:chbounce 1.2s infinite }
.ch-typing span:nth-child(2){ animation-delay:.15s } .ch-typing span:nth-child(3){ animation-delay:.3s }
@keyframes chbounce{ 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-4px) } }
.ch-starters{ display:flex; flex-wrap:wrap; gap:8px; padding:0 22px 14px }
.ch-starter{ border:1px solid var(--ink-line); border-radius:100px; padding:8px 15px; color:var(--tx-soft); font-size:13px; transition:.2s }
.ch-starter:hover{ border-color:var(--gold); color:var(--tx) }
.ch-input{ display:flex; gap:10px; padding:16px 18px; border-top:1px solid var(--ink-line) }
.ch-input input{ flex:1; background:var(--ink); border:1px solid var(--ink-line); border-radius:100px; padding:13px 18px; color:var(--tx); font-size:14.5px; font-family:inherit }
.ch-input input:focus{ outline:none; border-color:var(--gold) }
.ch-input button{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#2a2110; font-weight:600; border-radius:100px; padding:0 24px; font-size:14px; transition:.2s }
.ch-input button:disabled{ opacity:.5 }
.ch-clear{ display:block; margin:0 auto 14px; color:var(--tx-mute); font-size:12px; padding:4px }
.ch-clear:hover{ color:var(--terra) }

/* current-transit lines over the astrocartography map (Explore) */
.ex-tl{ fill:none; stroke:currentColor; stroke-width:2.4; stroke-dasharray:7 6; opacity:.85; vector-effect:non-scaling-stroke }
.ex-tl.ic, .ex-tl.dc{ opacity:.5 }
.ex-trg{ filter:drop-shadow(0 0 3px currentColor) }
.ex-tlines .ex-line b{ color:var(--gold-bright) }
.ex-reloc{ display:grid; grid-template-columns:1fr 1fr; gap:10px }

/* two-person overlay map (Couples) */
.rel-mapwrap{ border:1px solid var(--ink-line); border-radius:16px; overflow:hidden; margin-bottom:14px }
.rel-map{ display:block; width:100%; height:auto; background:#0d0f17 }
.rel-la{ fill:none; stroke:currentColor; stroke-width:2.2; opacity:.85; vector-effect:non-scaling-stroke }
.rel-lb{ fill:none; stroke:currentColor; stroke-width:2.2; opacity:.8; stroke-dasharray:7 6; vector-effect:non-scaling-stroke }
.rel-pin-h{ fill:var(--gold); opacity:.18 }
.rel-pin{ fill:var(--gold); stroke:#15131c; stroke-width:1.5 }
.rel-pin-n{ fill:#2a2110; font-size:10px; font-weight:700; font-family:var(--sans,inherit) }
.rel-map-legend{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:11px 16px; background:rgba(255,255,255,.02); border-top:1px solid var(--ink-line); font-size:12.5px; color:var(--tx-soft) }
.rel-lg{ display:flex; align-items:center; gap:7px }
.rel-li{ width:22px; height:0; border-top:2.4px solid var(--tx-soft) }
.rel-li.dash{ border-top-style:dashed }
.rel-lg-pl{ color:var(--tx-mute) } .rel-lg-pl b{ font-size:14px }
.rel-common{ color:var(--tx); font-size:14.5px; line-height:1.6; font-weight:300; padding:12px 16px; border:1px solid rgba(124,92,255,.3); border-radius:12px; background:linear-gradient(135deg,rgba(124,92,255,.08),transparent); margin:14px 0 }
.rel-common b{ color:var(--gold-bright); font-weight:500 } .rel-common em{ color:var(--tx-soft) }

/* ════════════════════════════════════════════════════════════════════════
   AURORA DIRECTION — bold-modern typography + lime accents (applies globally
   via the shared design tokens; only refines weight/case/accent, not layout)
   ════════════════════════════════════════════════════════════════════════ */
/* display headings: heavier weight, tighter, sentence-case, violet (not italic) accent */
.hero-title, .atlas-h1{ font-weight:600; letter-spacing:-.022em; line-height:1.04 }
.atlas-h1 em, .hero-title em{ font-style:normal; color:var(--gold-bright) }
.gen-title, .ah-eyebrow + h1, .auth-h{ font-weight:600 }
/* section/card headers read crisper in the grotesque */
.gp-card h3, .ct-card h3, .sim-card h3, .relocate .panel h3, .natal .panel h3,
.compass .panel h3, .gp-d-head .atlas-h1{ letter-spacing:-.01em }
/* lime pop on the score numbers & key metrics (the data the eye hunts for) */
.gp-place-sc, .ct-score, .rl-r-score, .rl-score-n, .sim-bar-top b,
.rel-sub b, .gp-place .gp-place-sc, .ct-d-head .ct-score{ color:var(--lime) }
.rl-score-n span{ color:var(--tx-mute) }
/* live / positive cues already flow through --sage (now lime-green) */

/* ════════════════════════════════════════════════════════════════════════
   AURORA — sidebar app-shell (converts the grouped nav into a fixed left rail
   on every feature screen; intro/onboarding keep the marketing top bar)
   ════════════════════════════════════════════════════════════════════════ */
.tnav{ position:fixed; left:0; top:0; bottom:0; width:248px; max-width:248px; flex-direction:column;
  flex-wrap:nowrap; align-items:stretch; gap:0; padding:22px 14px 18px; border:none;
  border-right:1px solid var(--ink-line); border-radius:0; background:var(--ink-1); overflow-y:auto; z-index:50 }
.tnav-brand{ display:flex; align-items:center; gap:11px; padding:4px 12px 18px; cursor:pointer; text-decoration:none }
.tnav-mark{ width:27px; height:27px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 28%, #fff, var(--gold) 46%, #2c2156 100%);
  box-shadow:0 0 17px color-mix(in srgb, var(--gold) 50%, transparent) }
.tnav-word{ font-weight:700; letter-spacing:.36em; font-size:14px; color:var(--tx) }
.tnav-scroll{ display:flex; flex-direction:column; gap:1px }
.tnav-grp{ display:flex; flex-direction:column; gap:2px; margin-bottom:6px }
.tnav-gl{ padding:0 12px; margin:13px 0 5px }
.tnav-items{ display:flex; flex-direction:column; flex-wrap:nowrap; gap:2px }
.tnav-sep{ display:none }
.tnav-i{ width:100%; text-align:left; justify-content:flex-start; border-radius:11px; padding:10px 13px; font-size:14px }
.tnav-i.on{ background:linear-gradient(120deg, color-mix(in srgb,var(--gold) 26%, transparent), transparent);
  color:var(--tx); font-weight:600; border:1px solid color-mix(in srgb,var(--gold) 40%, transparent) }
/* hide marketing top bar + offset content on feature screens only */
body[data-view]:not([data-view="intro"]):not([data-view="onboard"]):not([data-view="generating"]):not([data-view="taste"]):not([data-view="paywall"]) .topbar{ display:none }
body[data-view]:not([data-view="intro"]):not([data-view="onboard"]):not([data-view="generating"]):not([data-view="taste"]):not([data-view="paywall"]):not([data-view="report"]):not([data-view="reportonb"]) .view.is-active{ padding-left:248px }
/* tighten the now-redundant top padding (top bar is gone) */
.cities,.compass,.explore,.natal,.relocate,.goals,
#view-simulator .goals,#view-career .goals,#view-travel .goals,#view-couples .goals,
#view-forecast .goals,#view-chat .goals,#view-home .home{ padding-top:54px }
/* responsive: collapse the rail back to a top strip on narrow screens */
/* mobile chrome (hidden on desktop) */
.tnav-top, .tnav-burger, .tnav-scrim{ display:none }
@media(max-width:920px){
  /* fixed mobile top bar with brand + hamburger */
  .tnav-top{ display:flex; position:fixed; top:0; left:0; right:0; height:56px; align-items:center; justify-content:space-between;
    padding:0 16px; background:var(--ink-1); border-bottom:1px solid var(--ink-line); z-index:55 }
  .tnav-top .tnav-brand{ padding:0 }
  .tnav-burger{ display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; width:42px; height:42px;
    border:1px solid var(--ink-line); border-radius:11px; background:rgba(255,255,255,.02) }
  .tnav-burger span{ width:18px; height:2px; background:var(--tx); border-radius:2px; transition:.25s }
  body.nav-open .tnav-burger span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
  body.nav-open .tnav-burger span:nth-child(2){ opacity:0 }
  body.nav-open .tnav-burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
  /* sidebar → slide-in drawer */
  .tnav{ position:fixed; left:0; top:0; bottom:0; width:272px; max-width:84vw; transform:translateX(-100%);
    transition:transform .28s var(--ease); flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:0;
    border-right:1px solid var(--ink-line); border-bottom:none; border-radius:0; padding:20px 14px; overflow-y:auto; z-index:60; box-shadow:0 0 60px rgba(0,0,0,.6) }
  body.nav-open .tnav{ transform:translateX(0) }
  .tnav > .tnav-brand{ display:flex; padding:4px 12px 16px }
  .tnav-scroll{ flex-direction:column; gap:1px }
  .tnav-grp{ flex-direction:column; gap:2px; margin-bottom:6px }
  .tnav-gl{ display:block }
  .tnav-items{ flex-direction:column }
  .tnav-scrim{ display:block; position:fixed; inset:0; background:rgba(5,5,9,.62); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .28s; z-index:58 }
  body.nav-open .tnav-scrim{ opacity:1; pointer-events:auto }
  /* content: no left offset, clear the top bar */
  body[data-view]:not([data-view="intro"]):not([data-view="onboard"]):not([data-view="generating"]):not([data-view="taste"]):not([data-view="paywall"]) .view.is-active{ padding-left:0; padding-top:56px }
}

/* ════════════════════════════════════════════════════════════════════════
   AURORA — Home dashboard
   ════════════════════════════════════════════════════════════════════════ */
.home{ max-width:1240px; margin:0 auto; padding:54px clamp(20px,4vw,46px) 70px }
.hm-bar{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:26px }
.hm-search{ flex:1; max-width:420px; border:1px solid var(--ink-line); border-radius:100px; padding:11px 18px; color:var(--tx-mute); font-size:13.5px }
.hm-live{ display:flex; align-items:center; gap:8px; color:var(--tx-soft); font-size:12.5px; font-weight:600; white-space:nowrap }
.hm-dot{ width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime) }
.hm-dot.off{ background:var(--tx-mute); box-shadow:none }
.hm-head{ margin-bottom:20px }
.hm-head .atlas-h1{ font-size:clamp(30px,4.4vw,46px); max-width:20ch }
.hm-head .atlas-sub{ max-width:64ch }
.hm-mono{ font-family:ui-monospace,Menlo,monospace; color:var(--lime); font-size:.82em; padding:1px 7px; border:1px solid var(--ink-line); border-radius:6px; margin:0 2px }
/* map hero */
.hm-mapwrap{ position:relative; border:1px solid var(--ink-line); border-radius:20px; overflow:hidden; background:#08080e; box-shadow:inset 0 0 90px rgba(0,0,0,.55), var(--shadow) }
.hm-map{ display:block; width:100%; height:auto }
.hm-l{ fill:none; stroke:currentColor; stroke-width:2.6; opacity:.85; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 6px currentColor) }
.hm-l.ic,.hm-l.dc{ opacity:.42 }
.hm-pinn{ fill:#08080e; font-size:11px; font-weight:800; font-family:var(--sans) }
.hm-legend{ position:absolute; right:16px; top:14px; display:flex; flex-wrap:wrap; gap:11px; font-size:11px; color:var(--tx-soft); background:rgba(8,8,14,.5); backdrop-filter:blur(6px); padding:7px 12px; border-radius:100px; border:1px solid var(--ink-line); max-width:60% }
.hm-legend i{ display:inline-block; width:9px; height:9px; border-radius:50%; vertical-align:middle; margin-right:5px }
.hm-maptag{ position:absolute; left:16px; bottom:14px; background:rgba(8,8,14,.78); backdrop-filter:blur(10px); border:1px solid var(--ink-line); border-radius:13px; padding:11px 15px }
.hm-maptag .l{ display:block; font-size:10px; color:var(--tx-mute); letter-spacing:.12em; text-transform:uppercase; margin-bottom:3px }
.hm-maptag b{ font-size:15px; color:var(--lime) }
/* kpis */
.hm-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px }
.hm-kpi{ display:flex; gap:14px; align-items:center; border:1px solid var(--ink-line); border-radius:16px; padding:16px 18px; background:linear-gradient(160deg,rgba(255,255,255,.03),transparent); cursor:pointer; transition:.2s }
.hm-kpi:hover{ border-color:color-mix(in srgb,var(--gold) 45%,transparent); transform:translateY(-2px) }
.hm-ring{ width:58px; height:58px; border-radius:50%; display:grid; place-items:center; flex:none }
.hm-ring span{ width:45px; height:45px; border-radius:50%; background:var(--ink-1); display:grid; place-items:center; font-size:17px; font-weight:700; color:var(--tx) }
.hm-lab{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-mute); font-weight:700 }
.hm-kpi h4{ font-size:15px; font-weight:700; margin:3px 0 2px; letter-spacing:-.01em }
.hm-sm{ font-size:11.5px; color:var(--tx-soft) }
/* cols */
.hm-cols{ display:grid; grid-template-columns:1.55fr 1fr; gap:18px; margin-top:18px }
.hm-lead{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:13px }
.hm-lead h2{ font-size:21px; font-weight:700; letter-spacing:-.01em }
.hm-link{ color:var(--gold-bright); font-size:12.5px; font-weight:600 }
.hm-places{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.hm-card{ border:1px solid var(--ink-line); border-radius:16px; overflow:hidden; background:var(--ink-2); cursor:pointer; transition:.2s }
.hm-card:hover{ border-color:color-mix(in srgb,var(--gold) 45%,transparent); transform:translateY(-2px) }
.hm-img{ height:92px; position:relative }
.hm-img:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 38%,var(--ink-2)) }
.hm-cb{ padding:13px 16px }
.hm-ct{ display:flex; justify-content:space-between; align-items:baseline }
.hm-card h3{ font-size:18px; font-weight:700; letter-spacing:-.01em }
.hm-co{ color:var(--tx-mute); font-size:11.5px; font-weight:600 }
.hm-sc{ color:var(--lime); font-size:20px; font-weight:800 }
.hm-line{ margin-top:8px; font-size:11.5px; font-weight:600 }
.hm-rail{ display:flex; flex-direction:column; gap:14px }
.hm-advise{ border:1px solid color-mix(in srgb,var(--gold) 35%,transparent); border-radius:16px; padding:18px 20px; background:linear-gradient(140deg,color-mix(in srgb,var(--gold) 13%,transparent),transparent) }
.hm-e{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:11px; font-weight:700; color:var(--gold-bright) }
.hm-e.v{ color:var(--lime) }
.hm-arow{ display:flex; gap:11px; align-items:flex-start; padding:8px 0; font-size:13.5px; color:var(--tx-soft); line-height:1.5 }
.hm-arow+.hm-arow{ border-top:1px solid rgba(255,255,255,.07) }
.hm-arow p b{ color:var(--tx); font-weight:700 }
.hm-ad{ width:7px; height:7px; border-radius:50%; margin-top:6px; flex:none }
.hm-ad.g{ background:var(--lime); box-shadow:0 0 7px var(--lime) }.hm-ad.r{ background:var(--terra) }.hm-ad.n{ background:var(--tx-mute) }
.hm-ask{ border:1px solid var(--ink-line); border-radius:16px; padding:16px 18px; background:linear-gradient(160deg,rgba(255,255,255,.03),transparent) }
.hm-q{ display:block; width:100%; text-align:left; border:1px solid var(--ink-line); border-radius:100px; padding:11px 16px; color:var(--tx-mute); font-size:13px }
.hm-q:hover{ border-color:var(--gold) }
.hm-sugg{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px }
.hm-s{ border:1px solid var(--ink-line); border-radius:100px; padding:6px 12px; font-size:12px; color:var(--tx-soft); font-weight:600 }
.hm-s:hover{ border-color:var(--gold); color:var(--tx) }
/* forecast strip */
.hm-fc{ margin-top:18px; border:1px solid var(--ink-line); border-radius:18px; padding:20px 22px; background:linear-gradient(160deg,rgba(255,255,255,.025),transparent) }
.hm-fcrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.hm-fcc{ border:1px solid var(--ink-line); border-radius:13px; padding:15px 17px }
.hm-fcc .w{ color:var(--gold-bright); font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:7px; font-weight:700 }
.hm-fcc b{ font-weight:700; font-size:16px }
.hm-fcc p{ color:var(--tx-soft); font-size:12.5px; line-height:1.5; margin-top:5px }
@media(max-width:860px){ .hm-cols{ grid-template-columns:1fr } .hm-kpis{ grid-template-columns:1fr 1fr } .hm-fcrow{ grid-template-columns:1fr } }

/* ════════════════════════════════════════════════════════════════════════
   AURORA — Home dashboard, layout B (control-center widget grid)
   ════════════════════════════════════════════════════════════════════════ */
.hb-map{ max-height:300px }
.hb-grid{ display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-auto-rows:auto; gap:16px; margin-top:18px }
.hb-w{ border:1px solid var(--ink-line); border-radius:18px; padding:18px 20px; background:linear-gradient(160deg,rgba(255,255,255,.03),transparent) }
.hb-today{ grid-row:span 2; background:linear-gradient(155deg,color-mix(in srgb,var(--gold) 12%,transparent),transparent); border-color:color-mix(in srgb,var(--gold) 32%,transparent) }
.hb-quick{ grid-column:1 / -1 }
.hb-wh{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:13px }
.hb-wh h3{ font-size:17px; font-weight:700; letter-spacing:-.01em }
.hb-date{ color:var(--tx-mute); font-size:12px; letter-spacing:.05em }
.hb-sky{ color:var(--tx-soft); font-size:14px; margin-bottom:14px }
.hb-sky b{ color:var(--tx) }
.hb-todayadv{ display:flex; gap:11px; align-items:flex-start; padding:14px 0; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07) }
.hb-todayadv p{ color:var(--tx-soft); font-size:14px; line-height:1.55 } .hb-todayadv b{ color:var(--tx); font-weight:700 }
.hb-todayadv .hm-ad{ margin-top:6px }
.hb-place{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; margin-top:14px; padding:13px 15px; border:1px solid var(--ink-line); border-radius:13px; background:rgba(255,255,255,.02); transition:.2s }
.hb-place:hover{ border-color:color-mix(in srgb,var(--gold) 45%,transparent) }
.hb-place span{ color:var(--tx-mute); font-size:11px; letter-spacing:.04em }
.hb-place b{ color:var(--tx); font-size:16px; font-weight:700 }
.hb-place i{ font-family:ui-monospace,Menlo,monospace; font-size:12px; font-style:normal }
.hb-place em{ margin-left:auto; font-style:normal; color:var(--lime); font-size:22px; font-weight:800 }
.hb-trow{ display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:14px; color:var(--tx-soft) }
.hb-trow b{ font-size:12px; font-weight:700; padding:4px 11px; border-radius:100px }
.hb-trow b.open{ color:#0f1a0a; background:var(--lime) }
.hb-trow b.build{ color:var(--tx-soft); border:1px solid var(--ink-line) }
.hb-trow b.date{ color:var(--gold-bright); background:none; padding:0 }
.hb-trownote{ color:var(--tx-mute); font-size:11.5px; margin-top:11px; line-height:1.5 }
.hb-alert{ border:1px solid var(--ink-line); border-left-width:3px; border-radius:11px; padding:11px 14px; margin-bottom:9px }
.hb-alert.opp{ border-left-color:var(--lime) } .hb-alert.risk{ border-left-color:var(--terra) }
.hb-atag{ display:inline-block; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-bottom:6px }
.hb-alert.opp .hb-atag{ color:var(--lime) } .hb-alert.risk .hb-atag{ color:var(--terra) }
.hb-alert p{ color:var(--tx-soft); font-size:13px; line-height:1.5 } .hb-alert b{ color:var(--tx); font-weight:700 }
.hb-empty{ color:var(--tx-mute); font-size:13px; line-height:1.55 }
.hb-qgrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px }
.hb-q2{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; border:1px solid var(--ink-line); border-radius:14px; color:var(--tx-soft); font-size:12.5px; font-weight:600; background:rgba(255,255,255,.02); transition:.2s }
.hb-q2:hover{ border-color:color-mix(in srgb,var(--gold) 45%,transparent); color:var(--tx); transform:translateY(-2px) }
.hb-q2 span{ font-size:20px; color:var(--gold-bright) }
@media(max-width:980px){ .hb-grid{ grid-template-columns:1fr 1fr } .hb-today{ grid-row:auto; grid-column:1 / -1 } .hb-qgrid{ grid-template-columns:repeat(3,1fr) } }
@media(max-width:620px){ .hb-grid{ grid-template-columns:1fr } .hb-quick{ grid-column:auto } .hb-qgrid{ grid-template-columns:repeat(2,1fr) } }

/* ════════ AURORA — icon sidebar nav (easy-to-scan) ════════ */
.tnav-i{ display:flex; align-items:center; gap:11px }
.tnav-ic{ width:18px; height:18px; flex:none; opacity:.8; transition:.18s }
.tnav-i:hover .tnav-ic{ opacity:1 }
.tnav-i.on .tnav-ic{ opacity:1; color:var(--gold-bright) }
.tnav-i span{ flex:1; min-width:0 }
.tnav-grp-primary{ margin-top:10px; padding-top:12px; border-top:1px solid var(--ink-line) }
.tnav-grp-primary .tnav-i{ background:linear-gradient(120deg,color-mix(in srgb,var(--gold) 20%,transparent),transparent);
  border:1px solid color-mix(in srgb,var(--gold) 38%,transparent); color:var(--tx); font-weight:600 }
.tnav-grp-primary .tnav-i .tnav-ic{ color:var(--gold-bright); opacity:1 }
.tnav-grp-primary .tnav-i:hover{ background:linear-gradient(120deg,color-mix(in srgb,var(--gold) 30%,transparent),transparent); transform:none }
/* home (first standalone group) gets a touch more presence */
.tnav-scroll > .tnav-grp:first-child .tnav-i{ font-weight:600 }
@media(max-width:920px){ .tnav-i span{ display:inline } }

/* ════════════════════════════════════════════════════════════════════════
   AURORA — free taste + paywall (conversion)
   ════════════════════════════════════════════════════════════════════════ */
.pw{ max-width:1080px; margin:0 auto; padding:96px clamp(20px,5vw,40px) 80px }
.pw-progress{ display:flex; align-items:center; gap:14px; margin-bottom:30px; color:var(--tx-soft); font-size:13px }
.pw-progress b{ color:var(--lime) }
.pw-pbar{ flex:1; max-width:280px; height:6px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden }
.pw-pbar i{ display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--lime)) }
/* reveal */
.pw-reveal{ display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center; margin-bottom:46px }
.pw-rev-copy .atlas-h1{ font-size:clamp(28px,4vw,40px); margin:10px 0 14px }
.pw-cta{ margin-top:8px }
.pw-noco{ color:var(--tx-mute); font-size:12.5px; margin-top:13px }
.pw-rev-map{ position:relative; border:1px solid var(--ink-line); border-radius:20px; overflow:hidden; background:#08080e; box-shadow:var(--shadow) }
.pw-map{ display:block; width:100%; height:auto }
.pw-l{ fill:none; stroke:currentColor; stroke-width:2.4; opacity:.9; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 6px currentColor) }
.pw-revscore{ position:absolute; right:16px; bottom:16px; background:rgba(8,8,14,.8); backdrop-filter:blur(8px); border:1px solid var(--ink-line); border-radius:14px; padding:11px 16px; text-align:center }
.pw-revscore b{ display:block; font-size:26px; font-weight:800; color:var(--c) } .pw-revscore span{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-mute) }
/* locked */
.pw-lockedhead{ text-align:center; margin-bottom:22px }
.pw-lockedhead h2{ font-size:24px; font-weight:700 } .pw-lockedhead p{ color:var(--tx-soft); margin-top:6px }
.pw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:26px }
.pw-card{ position:relative; border:1px solid var(--ink-line); border-radius:16px; overflow:hidden; background:var(--ink-1); text-align:left; cursor:pointer; min-height:128px; transition:.2s }
.pw-card:hover{ border-color:color-mix(in srgb,var(--gold) 50%,transparent); transform:translateY(-2px) }
.pw-card-wide{ grid-column:span 2 }
.pw-blur{ height:78px; display:flex; align-items:center; justify-content:center; gap:8px; filter:blur(5px); opacity:.55; font-size:22px; font-weight:800; color:var(--tx) }
.pw-blur-map{ height:140px; padding:0; filter:blur(6px); opacity:.5 } .pw-blur-map svg{ width:100%; height:100% }
.pw-card-wide{ min-height:200px }
.pw-cardlab{ position:absolute; left:0; right:0; bottom:0; padding:12px 14px; background:linear-gradient(180deg,transparent,var(--ink-1) 60%); color:var(--tx-soft); font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:8px }
.pw-lockic{ font-size:12px; filter:grayscale(.3) }
.pw-morehead{ color:var(--tx-mute); font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin:6px 0 12px; text-align:center }
.pw-chips{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:44px }
.pw-lock{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ink-line); border-radius:100px; padding:9px 15px; color:var(--tx-soft); font-size:13px; cursor:pointer; transition:.2s }
.pw-lock:hover{ border-color:var(--gold); color:var(--tx) }
.pw-bottom{ text-align:center; border-top:1px solid var(--ink-line); padding-top:40px }
.pw-bottom h2{ font-size:clamp(24px,3.4vw,34px); font-weight:700; letter-spacing:-.01em } .pw-bottom>p{ color:var(--tx-soft); margin:10px 0 22px; font-size:16px } .pw-bottom b{ color:var(--lime) }
/* paywall / pricing */
.pw-wall{ max-width:560px }
.pw-back{ color:var(--tx-soft); font-size:13px; margin-bottom:24px } .pw-back:hover{ color:var(--tx) }
.pw-wallhead{ text-align:center; margin-bottom:26px } .pw-wallhead .atlas-h1{ font-size:clamp(28px,4vw,40px) }
.pw-toggle{ display:flex; gap:8px; background:var(--ink-1); border:1px solid var(--ink-line); border-radius:100px; padding:5px; width:fit-content; margin:0 auto 22px }
.pw-tg{ display:flex; align-items:center; gap:8px; padding:10px 22px; border-radius:100px; color:var(--tx-soft); font-size:14px; font-weight:600; transition:.2s }
.pw-tg.on{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#1a1430 }
.pw-save{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:100px; background:var(--lime); color:#0f1a0a }
.pw-tg.on .pw-save{ background:#1a1430; color:var(--lime) }
.pw-plan{ border:1px solid color-mix(in srgb,var(--gold) 40%,transparent); border-radius:22px; padding:26px 28px; background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 10%,transparent),transparent) }
.pw-planhead{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px }
.pw-planname{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-bright); font-weight:700; margin-bottom:8px }
.pw-planprice b{ font-size:42px; font-weight:800; letter-spacing:-.02em } .pw-planprice span{ color:var(--tx-mute); font-size:16px; margin-left:4px }
.pw-planper{ color:var(--tx-soft); font-size:13px; margin-top:4px }
.pw-planbadge{ background:var(--lime); color:#0f1a0a; font-size:11px; font-weight:700; padding:5px 12px; border-radius:100px }
.pw-feats{ list-style:none; margin:18px 0 22px; display:flex; flex-direction:column; gap:11px }
.pw-feats li{ display:flex; gap:11px; align-items:flex-start; color:var(--tx-soft); font-size:14px; line-height:1.45 }
.pw-tick{ color:var(--lime); font-weight:800; flex:none }
.pw-plan .pw-cta{ width:100%; justify-content:center; margin-top:2px }
.pw-trust{ text-align:center; color:var(--tx-mute); font-size:12.5px; margin-top:14px }
.pw-legal{ text-align:center; color:var(--tx-mute); font-size:11.5px; margin-top:8px; line-height:1.5 }
.pw-legal a{ color:var(--tx-soft); text-decoration:underline }

/* site footer — only shown on the public landing (intro) view */
.site-foot{ display:none }
body[data-view="intro"] .site-foot{
  display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; justify-content:center;
  position:relative; z-index:20; padding:34px 20px 40px; margin-top:20px;
  border-top:1px solid var(--ink-line); color:var(--tx-mute); font-size:13px;
}
.site-foot a{ color:var(--tx-soft); text-decoration:none }
.site-foot a:hover{ color:var(--tx) }
.site-foot .dot{ color:var(--ink-line) }
.pw-dev{ display:block; margin:16px auto 0; color:var(--tx-mute); font-size:12px; text-decoration:underline; text-underline-offset:3px }
.pw-dev:hover{ color:var(--gold-bright) }
@media(max-width:760px){ .pw-reveal{ grid-template-columns:1fr } .pw-grid{ grid-template-columns:1fr 1fr } .pw-card-wide{ grid-column:span 2 } }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — phone layouts (desktop unchanged)
   ════════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  /* tighten container padding + retune the top offset under the mobile bar */
  .home,.cities,.compass,.explore,.natal,.relocate,.goals,
  #view-simulator .goals,#view-career .goals,#view-travel .goals,#view-couples .goals,
  #view-forecast .goals,#view-chat .goals,#view-home .home{ padding-left:16px; padding-right:16px; padding-top:18px }
  .atlas-h1{ font-size:clamp(26px,7.5vw,34px); line-height:1.06 }
  .atlas-sub{ font-size:15px }
  .natal-head{ flex-direction:column; gap:14px }
  /* dashboard */
  .hb-map{ max-height:210px } .hm-map{ }
  .hm-bar{ flex-direction:column; align-items:stretch; gap:10px } .hm-search{ max-width:none; width:100% }
  .hm-legend{ position:static; max-width:none; margin:10px 16px 0; justify-content:flex-start }
  .hb-grid{ grid-template-columns:1fr } .hb-today{ grid-row:auto; grid-column:auto } .hb-quick{ grid-column:auto }
  .hb-qgrid{ grid-template-columns:repeat(3,1fr) }
  .hm-kpis{ grid-template-columns:1fr 1fr } .hm-cols{ grid-template-columns:1fr } .hm-fcrow{ grid-template-columns:1fr } .hm-places{ grid-template-columns:1fr 1fr }
  /* couples — the picker that was unusable on mobile */
  .rel-pbar{ flex-direction:column; align-items:stretch; gap:10px } #rel-saved{ width:100% } #rel-quick{ width:100% }
  .rel-quick{ max-width:none } .rel-q-row{ flex-direction:column; align-items:stretch } .rel-q-row select,.rel-q-row .ob-input{ width:100% }
  .rel-score-hero{ flex-direction:column } .rel-comp{ grid-template-columns:1fr } .rel-sub{ min-width:0 }
  #rq-results,.place-results{ position:static; max-height:240px }
  /* generic multi-column sections → stack */
  .gp-sections,.cr-times,.cr-insights,.cr-ind,.ex-grid,.ex-lower,.rl-top,.rl-cards,.hm-rev,.cols{ grid-template-columns:1fr !important; display:grid }
  .gp-grid,.sim-bars,.gp-checklist,.fc-cycles,.fc-ecl,.rl-rank,.kpis{ }
  /* taste / paywall */
  .pw{ padding:24px 16px 70px } .pw-reveal{ grid-template-columns:1fr } .pw-grid{ grid-template-columns:1fr } .pw-card-wide{ grid-column:auto }
  .pw-chips{ justify-content:flex-start }
  .pw-toggle{ width:100% } .pw-tg{ flex:1; justify-content:center; padding:10px 12px }
  /* horizontally-scrollable tab/chip rows so they never overflow */
  .ct-toggle,.fc-tabs,.cities .ct-toggle{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:4px }
  .ct-toggle::-webkit-scrollbar,.fc-tabs::-webkit-scrollbar{ display:none }
  /* modal full-ish width */
  .modal-card{ width:94vw }
}
@media(max-width:420px){
  .hb-qgrid{ grid-template-columns:repeat(2,1fr) } .hm-kpis{ grid-template-columns:1fr } .hm-places{ grid-template-columns:1fr }
  .ch-agents{ grid-template-columns:1fr 1fr }
}

/* ════════════════════════════════════════════════════════════════════════
   Home search · sidebar account footer · settings · FAQ
   ════════════════════════════════════════════════════════════════════════ */
/* functional home search */
.hm-searchwrap{ position:relative; flex:1; max-width:440px }
.hm-searchic{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--tx-mute); pointer-events:none }
.hm-search{ width:100%; border:1px solid var(--ink-line); border-radius:100px; padding:11px 18px 11px 40px; color:var(--tx);
  font-size:13.5px; font-family:inherit; background:var(--ink-1) }
.hm-search:focus{ outline:none; border-color:var(--gold) }
.hm-results{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--ink-2); border:1px solid var(--ink-line);
  border-radius:14px; box-shadow:var(--shadow); overflow:hidden; z-index:30; max-height:300px; overflow-y:auto }
.hm-res{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 16px; color:var(--tx-soft); font-size:14px; transition:.15s }
.hm-res:hover{ background:rgba(255,255,255,.04); color:var(--tx) } .hm-res svg{ color:var(--gold-bright); flex:none }
.hm-res-no{ padding:13px 16px; color:var(--tx-mute); font-size:13px }
/* sidebar account footer */
.tnav-foot{ margin-top:14px; padding-top:14px; border-top:1px solid var(--ink-line) }
.tnav-acctbtn{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:9px 11px; border-radius:12px; border:1px solid var(--ink-line); background:rgba(255,255,255,.02); transition:.2s }
.tnav-acctbtn:hover{ border-color:color-mix(in srgb,var(--gold) 45%,transparent) }
.tnav-ini{ width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:700; font-size:13px;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#1a1430 }
.tnav-acctmeta{ flex:1; min-width:0 } .tnav-acctmeta b{ display:block; color:var(--tx); font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tnav-acctmeta i{ color:var(--tx-mute); font-size:11px; font-style:normal } .tnav-cog{ color:var(--tx-mute); font-size:14px }
.tnav-foot-out{ display:flex; flex-direction:column; gap:9px }
.tnav-signup{ width:100%; padding:10px; border-radius:11px; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#1a1430; font-weight:600; font-size:13px }
.tnav-footrow{ display:flex; justify-content:space-between; gap:8px }
.tnav-textbtn{ color:var(--tx-soft); font-size:12px } .tnav-textbtn:hover{ color:var(--tx) }
/* settings */
.settings{ max-width:920px }
.set-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px }
.set-card{ border:1px solid var(--ink-line); border-radius:18px; padding:22px 24px; background:linear-gradient(160deg,rgba(255,255,255,.025),transparent) }
.set-card h3{ font-size:16px; font-weight:700; margin-bottom:14px }
.set-row{ display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:14px }
.set-row span{ color:var(--tx-mute) } .set-row b{ color:var(--tx); font-weight:600 }
.set-mrow{ display:flex; justify-content:space-between; font-size:14px; color:var(--tx-soft) } .set-mrow b{ color:var(--tx) }
.set-authbtns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }
.set-badge{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; padding:6px 13px; border-radius:100px; border:1px solid var(--ink-line); color:var(--tx-soft) }
.set-badge.on{ background:linear-gradient(120deg,color-mix(in srgb,var(--gold) 22%,transparent),transparent); border-color:color-mix(in srgb,var(--gold) 45%,transparent); color:var(--gold-bright) }
.set-cancel{ color:var(--terra) } .set-cancel:hover{ border-color:var(--terra) }
.set-link{ display:block; text-align:left; color:var(--tx-soft); font-size:14px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.06) }
.set-link:hover{ color:var(--gold-bright) }
/* FAQ */
.faq{ max-width:760px; margin:24px auto 0 }
.faq-item{ border:1px solid var(--ink-line); border-radius:14px; margin-bottom:12px; background:linear-gradient(160deg,rgba(255,255,255,.02),transparent); overflow:hidden }
.faq-item summary{ list-style:none; cursor:pointer; padding:18px 20px; font-size:16px; font-weight:600; color:var(--tx); display:flex; justify-content:space-between; align-items:center; gap:14px }
.faq-item summary::-webkit-details-marker{ display:none }
.faq-plus{ color:var(--gold-bright); font-size:22px; font-weight:400; transition:.25s; flex:none }
.faq-item[open] .faq-plus{ transform:rotate(45deg) }
.faq-item p{ padding:0 20px 20px; color:var(--tx-soft); font-size:14.5px; line-height:1.65; font-weight:300 }
.faq-cta{ text-align:center; max-width:760px; margin:34px auto 0; display:flex; flex-direction:column; align-items:center; gap:12px }
.faq-cta p{ color:var(--tx-soft) }
@media(max-width:760px){ .set-grid{ grid-template-columns:1fr } }

/* ════════════════════════════════════════════════════════════════════════
   Astrocartography Report (screen + print-to-PDF)
   ════════════════════════════════════════════════════════════════════════ */
#view-report.is-active{ padding-left:0 }
.rep-actions{ position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
  padding:14px clamp(16px,4vw,40px); background:rgba(10,10,15,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--ink-line) }
.report{ max-width:820px; margin:0 auto; padding:0 clamp(16px,4vw,40px) 60px }
.rep-page{ padding:48px 0 40px; border-bottom:1px solid var(--ink-line) }
.rep-page:last-child{ border-bottom:none }
.rep-h2{ font-size:28px; font-weight:700; letter-spacing:-.02em; margin-bottom:14px }
.rep-h3{ font-size:18px; font-weight:700; margin:24px 0 10px }
.rep-lead{ color:var(--tx-soft); font-size:15.5px; line-height:1.65; margin-bottom:20px; max-width:62ch }
.rep-para{ color:var(--tx-soft); font-size:15px; line-height:1.7; margin-bottom:14px; font-weight:300 }
.rep-para b,.rep-para em{ color:var(--tx) } .rep-para em{ font-style:normal; color:var(--gold-bright) }
/* cover */
.rep-cover{ text-align:center; padding-top:60px }
.rep-logo{ display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; letter-spacing:.4em; font-size:15px; margin-bottom:36px }
.rep-mark{ width:24px; height:24px; border-radius:50%; background:radial-gradient(circle at 32% 28%,#fff,var(--gold) 46%,#2c2156) }
.rep-mark.big{ width:40px; height:40px; margin:0 auto 20px }
.rep-kick{ color:var(--gold-bright); font-size:12px; letter-spacing:.24em; text-transform:uppercase; margin-bottom:16px }
.rep-title{ font-size:clamp(38px,7vw,58px); font-weight:800; letter-spacing:-.03em; line-height:1.02; margin-bottom:24px }
.rep-birth{ display:flex; flex-direction:column; gap:3px; margin-bottom:30px; color:var(--tx-soft); font-size:14px } .rep-birth b{ color:var(--tx); font-size:16px }
.rep-covermap{ border:1px solid var(--ink-line); border-radius:16px; overflow:hidden; margin-bottom:24px }
.rep-coverfoot{ color:var(--tx-soft); font-size:14.5px; line-height:1.6; max-width:54ch; margin:0 auto; font-weight:300 }
/* big three */
.rep-bigthree{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0 24px }
.rep-bigthree div{ border:1px solid var(--ink-line); border-radius:14px; padding:16px; text-align:center }
.rep-bigthree span{ color:var(--tx-mute); font-size:11px; letter-spacing:.14em; text-transform:uppercase }
.rep-bigthree b{ display:block; font-family:var(--serif); font-size:22px; font-weight:700; margin:6px 0 3px }
.rep-bigthree i{ color:var(--tx-mute); font-size:11.5px; font-style:normal }
/* planet lines */
.rep-lines{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.rep-lrow{ display:flex; gap:12px; align-items:flex-start }
.rep-lg{ font-size:20px; flex:none; width:24px } .rep-lrow b{ font-size:14.5px } .rep-lrow p{ color:var(--tx-soft); font-size:12.5px; line-height:1.5; margin-top:2px; font-weight:300 }
/* maps */
.rep-map{ display:block; width:100%; height:auto }
.rep-grat{ stroke:rgba(255,255,255,.05) } .rep-land{ fill:#15151f; stroke:#26243a; stroke-width:1 }
.rep-l{ fill:none; stroke:currentColor; stroke-width:2.4; opacity:.9; vector-effect:non-scaling-stroke }
.rep-pinn{ fill:#08080e; font-size:10px; font-weight:800 }
.rep-fullmap{ border:1px solid var(--ink-line); border-radius:16px; overflow:hidden; margin-bottom:14px }
.rep-legend{ display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--tx-soft) }
.rep-legend i{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:middle }
/* places */
.rep-area{ margin-bottom:26px } .rep-area h3{ font-size:18px; font-weight:700; margin-bottom:4px }
.rep-areagloss{ color:var(--tx-mute); font-size:13px; margin-bottom:12px }
.rep-place{ display:flex; align-items:center; gap:13px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.06) }
.rep-pn{ color:var(--tx-mute); font-family:var(--serif); font-size:13px; min-width:30px }
.rep-pmain{ flex:1 } .rep-pmain b{ font-size:15px } .rep-pmain span{ color:var(--tx-mute); font-size:12px; margin-left:5px } .rep-pmain p{ font-size:12px; margin-top:2px }
.rep-psc{ font-family:var(--serif); font-size:20px; font-weight:700 }
/* power + relo */
.rep-power{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:18px 0 6px }
.rep-pw{ border:1px solid var(--ink-line); border-radius:13px; padding:14px 10px; text-align:center }
.rep-pw .rep-pn{ display:block; min-width:0 } .rep-pw b{ display:block; font-size:14px; margin:5px 0 2px } .rep-pw span{ color:var(--tx-mute); font-size:11px } .rep-pw em{ display:block; font-style:normal; color:var(--lime); font-family:var(--serif); font-size:18px; font-weight:700; margin-top:6px }
.rep-relo{ border:1px solid var(--ink-line); border-radius:14px; padding:16px 18px; margin-bottom:12px }
.rep-relo>b{ font-size:16px } .rep-relorow{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--tx-soft); padding:6px 0 } .rep-relorow b{ color:var(--tx) }
.rep-relolines{ font-size:12.5px; color:var(--tx-mute); margin-top:8px }
/* timing */
.rep-timing{ display:grid; gap:14px } .rep-tcard{ border:1px solid var(--ink-line); border-radius:14px; padding:16px 18px }
.rep-tcard span{ color:var(--gold-bright); font-size:11px; letter-spacing:.12em; text-transform:uppercase } .rep-tcard b{ display:block; font-size:17px; margin:6px 0 5px; font-family:var(--serif); font-weight:700 } .rep-tcard p{ color:var(--tx-soft); font-size:13.5px; line-height:1.55; font-weight:300 }
/* guidance + close */
.rep-guide{ margin-bottom:18px } .rep-guide h3{ font-size:16px; font-weight:700; margin-bottom:5px } .rep-guide p{ color:var(--tx-soft); font-size:14px; line-height:1.6; font-weight:300 } .rep-guide b{ color:var(--tx) }
.rep-close{ text-align:center } .rep-sign{ color:var(--tx-soft); font-size:15px; margin:24px 0; line-height:1.7 } .rep-sign b{ color:var(--gold-bright); font-family:var(--serif); font-size:18px }
.rep-fineprint{ color:var(--tx-mute); font-size:12px; line-height:1.6; max-width:56ch; margin:20px auto 0 }
@media(max-width:680px){ .rep-lines{ grid-template-columns:1fr } .rep-bigthree{ grid-template-columns:1fr } .rep-power{ grid-template-columns:1fr 1fr } }

/* ── PRINT → clean multi-page PDF ──────────────────────────────────────── */
@media print{
  @page{ size:A4; margin:14mm }
  html,body{ background:#0A0A0F !important }
  .topbar,.tnav,.tnav-top,.tnav-scrim,.rep-actions,#theme-dock,#modal{ display:none !important }
  .view:not(#view-report){ display:none !important }
  #view-report{ display:block !important; padding:0 !important }
  .report{ max-width:none; padding:0 }
  .rep-page{ break-after:page; page-break-after:always; border-bottom:none; padding:0 0 10px }
  .rep-page:last-child{ break-after:auto; page-break-after:auto }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important }
}

/* one-time report offer on the paywall */
.pw-or{ display:flex; align-items:center; gap:14px; max-width:560px; margin:26px auto; color:var(--tx-mute); font-size:13px }
.pw-or::before,.pw-or::after{ content:""; flex:1; height:1px; background:var(--ink-line) }
.pw-report{ max-width:560px; margin:0 auto; border:1px solid var(--ink-line); border-radius:20px; padding:24px 26px; background:linear-gradient(160deg,rgba(255,255,255,.025),transparent) }
.pw-report-k{ color:var(--lime); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-bottom:9px }
.pw-report h3{ font-size:21px; font-weight:700; letter-spacing:-.01em; margin-bottom:9px }
.pw-report-d{ color:var(--tx-soft); font-size:14px; line-height:1.6; font-weight:300; margin-bottom:18px }
.pw-report-buy{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap }
.pw-report-price b{ font-size:30px; font-weight:800; letter-spacing:-.02em } .pw-report-price span{ display:block; color:var(--tx-mute); font-size:12px; margin-top:2px }

/* report offer — surfaced in taste, settings, landing */
.pw-alt{ color:var(--tx-mute); font-size:13.5px; margin-top:14px }
.pw-altlink{ color:var(--lime); font-weight:600; font-size:13.5px } .pw-altlink:hover{ text-decoration:underline }
.set-or{ color:var(--tx-mute); font-size:12px; text-align:center; margin:14px 0 10px; position:relative }
.hero-alt{ margin-top:22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; color:var(--tx-mute); font-size:14px }

/* report onboarding (lean funnel page) */
#view-reportonb.is-active{ padding-left:0 }
.ronb{ min-height:100vh; padding:40px 16px 50px; display:flex; align-items:flex-start; justify-content:center }
.ronb-card{ width:100%; max-width:520px; margin:0 auto; border:1px solid var(--ink-line); border-radius:24px; padding:34px clamp(20px,4vw,38px) 30px;
  background:linear-gradient(165deg,rgba(255,255,255,.04),transparent); box-shadow:var(--shadow); position:relative; overflow:hidden }
.ronb-card *{ max-width:100% }
.ronb-back{ position:absolute; top:20px; left:24px; color:var(--tx-mute); font-size:13px; cursor:pointer } .ronb-back:hover{ color:var(--tx) }
.ronb-head{ text-align:center; margin-bottom:26px } .ronb-head .rep-logo{ justify-content:center; margin-bottom:18px }
.ronb-h1{ font-size:clamp(28px,5vw,38px); font-weight:800; letter-spacing:-.02em; margin:4px 0 12px }
.ronb-sub{ color:var(--tx-soft); font-size:14.5px; line-height:1.6; font-weight:300; max-width:42ch; margin:0 auto }
.ronb-form{ display:flex; flex-direction:column; gap:16px; margin-bottom:24px }
.ronb-field{ display:flex; flex-direction:column; gap:8px } .ronb-field>span{ color:var(--tx-soft); font-size:13px; font-weight:500 } .ronb-field>span i{ color:var(--tx-mute); font-weight:300; font-style:normal }
.ronb-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.ronb-row select{ flex:1; min-width:0; background:var(--ink-1); border:1px solid var(--ink-line); border-radius:11px; color:var(--tx); font-size:14.5px; padding:12px 12px; font-family:inherit }
.ronb-colon{ color:var(--tx-mute) }
.ronb-unk{ display:flex; align-items:center; gap:6px; color:var(--tx-mute); font-size:12.5px; white-space:nowrap } .ronb-unk input{ accent-color:var(--gold) }
.ronb-go{ width:100%; justify-content:center; font-size:16px; padding:16px }
.ronb-trust{ text-align:center; color:var(--tx-mute); font-size:12.5px; margin-top:14px }
.ronb .ob-input{ width:100%; background:var(--ink-1); border:1px solid var(--ink-line); border-radius:11px; color:var(--tx); font-size:14.5px; padding:12px 14px; font-family:inherit }
.ronb .ob-input:focus, .ronb-row select:focus{ outline:none; border-color:var(--gold) }
.ronb .place-results{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--ink-2); border:1px solid var(--ink-line); border-radius:13px; z-index:30; overflow:hidden; box-shadow:var(--shadow) }

/* ════════════════════════════════════════════════════════════════════════
   Landing page — feature showcase + FOMO (marketing)
   ════════════════════════════════════════════════════════════════════════ */
.lp-sec{ max-width:var(--maxw); margin:0 auto; padding:80px clamp(20px,5vw,46px) }
.lp-head{ text-align:center; max-width:680px; margin:0 auto 44px }
.lp-eyebrow{ color:var(--gold-bright); font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; margin-bottom:14px }
.lp-h2{ font-size:clamp(28px,4.4vw,42px); font-weight:800; letter-spacing:-.025em; line-height:1.08 }
.lp-h2 em{ font-style:normal; color:var(--gold-bright) }
.lp-sub{ color:var(--tx-soft); font-size:16px; line-height:1.6; margin-top:16px; font-weight:300 }
/* feature grid */
.lp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px }
.lp-card{ border:1px solid var(--ink-line); border-radius:18px; padding:24px 24px 22px; background:linear-gradient(160deg,rgba(255,255,255,.03),transparent); transition:.25s var(--ease) }
.lp-card:hover{ border-color:color-mix(in srgb,var(--gold) 45%,transparent); transform:translateY(-3px) }
.lp-ic{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:13px; font-size:22px; color:var(--gold-bright);
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 20%,transparent),transparent); border:1px solid color-mix(in srgb,var(--gold) 30%,transparent); margin-bottom:16px }
.lp-card h3{ font-size:18px; font-weight:700; letter-spacing:-.01em; margin-bottom:8px }
.lp-card p{ color:var(--tx-soft); font-size:14px; line-height:1.6; font-weight:300 }
.lp-card-ai{ border-color:color-mix(in srgb,var(--lime) 35%,transparent); background:linear-gradient(160deg,color-mix(in srgb,var(--lime) 8%,transparent),transparent) }
.lp-card-ai .lp-ic{ color:var(--lime); background:linear-gradient(135deg,color-mix(in srgb,var(--lime) 18%,transparent),transparent); border-color:color-mix(in srgb,var(--lime) 35%,transparent) }
/* numbers */
.lp-numbers{ max-width:var(--maxw); margin:0 auto; padding:30px clamp(20px,5vw,46px); display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line) }
.lp-num{ text-align:center } .lp-num b{ display:block; font-size:clamp(30px,4vw,44px); font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--gold-bright),var(--lime)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.lp-num span{ color:var(--tx-mute); font-size:13px }
/* how it works */
.lp-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.lp-step{ text-align:center; padding:0 8px }
.lp-stepn{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; font-size:18px; font-weight:800; color:#1a1430;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); margin-bottom:16px }
.lp-step h3{ font-size:17px; font-weight:700; margin-bottom:8px } .lp-step p{ color:var(--tx-soft); font-size:14px; line-height:1.6; font-weight:300 }
/* fomo */
.lp-fomo{ text-align:center; padding-top:30px; padding-bottom:100px }
.lp-fomo-h{ font-size:clamp(30px,5.2vw,52px); font-weight:800; letter-spacing:-.03em; line-height:1.06; max-width:18ch; margin:14px auto 0 }
.lp-fomo-h em{ font-style:italic; color:var(--gold-bright); font-weight:800 }
.lp-fomo-sub{ color:var(--tx-soft); font-size:17px; line-height:1.6; max-width:60ch; margin:22px auto 0; font-weight:300 }
.lp-fomo-cta{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:34px }
.lp-fomo-cta .btn-primary{ font-size:17px; padding:17px 38px }
.lp-fomo-alt{ margin-top:24px; display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--tx-mute); font-size:14px }
@media(max-width:760px){
  .lp-numbers{ grid-template-columns:1fr 1fr; gap:24px 16px }
  .lp-steps{ grid-template-columns:1fr; gap:28px }
  .lp-sec{ padding:54px clamp(18px,5vw,46px) }
}

/* ── hero: signature line-map backdrop ─────────────────────────────────── */
.hero{ position:relative; overflow:hidden }
.hero > :not(.hero-bg){ position:relative; z-index:1 }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.62;
  -webkit-mask-image:radial-gradient(125% 105% at 100% 28%, #000 0%, rgba(0,0,0,.5) 46%, transparent 80%);
  mask-image:radial-gradient(125% 105% at 100% 28%, #000 0%, rgba(0,0,0,.5) 46%, transparent 80%) }
.hero-bg svg{ width:100%; height:100%; display:block }
.hbg-land{ fill:#14141f; stroke:#24222f; stroke-width:1 }
.hbg-grat{ stroke:rgba(255,255,255,.035) }
.hbg-l{ fill:none; stroke:currentColor; stroke-width:2.2; opacity:.8; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 7px currentColor) }
@media(max-width:760px){ .hero-bg{ opacity:.4;
  -webkit-mask-image:radial-gradient(150% 60% at 70% 88%, #000 0%, transparent 70%);
  mask-image:radial-gradient(150% 60% at 70% 88%, #000 0%, transparent 70%) } }