:root {
    --emerald: #0f3d2e;
    --emerald-dark: #0a2b20;
    --gold: #c9a24b;
    --gold-light: #ddb96a;
    --cream: #fdf5e9;
    --cream-dark: #efe6d0;
    --text-dark: #1c2b24;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Georgia', 'Times New Roman', serif;
    background: var(--cream);
    color: var(--text-dark);
    line-height: 1.5;
  }
  a { text-decoration: none; color: inherit; }
  .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

  header { padding: 22px 0; position: relative; z-index: 500; }
  .header-inner { display: flex; align-items: center; justify-content: space-between; }
  .logo-word { font-size: 26px; color: var(--emerald); }
  .logo-tagline {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 9px; letter-spacing: 2.5px; color: var(--gold);
  }
  .back-link {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px; color: var(--gold);
  }
  .back-link:hover { text-decoration: underline; }

  h1 { font-size: 32px; color: var(--emerald); font-weight: 400; margin: 30px 0 6px; }
  .subtitle {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px; color: #4a5850; margin-bottom: 28px;
  }

  .card {
    background: var(--cream);
    border: 1px solid rgba(201,162,75,0.4);
    border-radius: 16px;
    padding: 26px;
    margin-bottom: 26px;
  }
  .form-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 1.4fr;
    gap: 14px;
    align-items: end;
  }
  @media (max-width: 720px) {
    .form-grid { grid-template-columns: 1fr 1fr; }
  }
  .dmy-row {
    display: grid;
    grid-template-columns: 72px 1fr 88px;
    gap: 8px;
  }
  label {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px; letter-spacing: 1px; color: var(--emerald);
    font-weight: 600; display: block; margin-bottom: 6px;
  }
  input, select {
    width: 100%;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px; padding: 12px 14px;
    border: 1px solid rgba(201,162,75,0.5);
    border-radius: 10px; background: #fff; color: var(--text-dark);
  }
  input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
  .btn-gold {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background: var(--gold); color: var(--cream);
    border: none; padding: 13px 28px; border-radius: 30px;
    font-size: 15px; cursor: pointer; white-space: nowrap;
  }
  .btn-gold:hover { background: var(--gold-light); }
  .btn-gold:disabled { opacity: 0.6; cursor: wait; }

  .error {
    display: none;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #b3462c; font-size: 14px; margin-top: 12px;
  }

  .section-title {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px; letter-spacing: 3px; color: var(--gold);
    font-weight: 600; margin-bottom: 14px; text-transform: uppercase;
  }
  h2 { font-size: 22px; color: var(--emerald); font-weight: 400; margin-bottom: 16px; }

  table {
    width: 100%; border-collapse: collapse;
    font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 14px;
  }
  th {
    text-align: left; font-size: 11px; letter-spacing: 1.5px;
    color: var(--gold); padding: 8px 10px; white-space: nowrap;
    border-bottom: 1px solid rgba(201,162,75,0.4);
  }
  td { padding: 9px 10px; border-bottom: 1px solid rgba(201,162,75,0.16); white-space: nowrap; }
  /* Her Aug 2026 catch: on a narrow phone the Nakshatra (Pada) column
     is wide enough that the table used to overflow the card silently,
     with the header and cells wrapping onto different numbers of
     lines and misaligning every row. Scrolling the table itself,
     horizontally, inside its own container keeps every row intact and
     the rest of the page never scrolls sideways. */
  .tech-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tech-table-wrap table { min-width: 480px; }
  td.planet-name { font-family: 'Georgia', serif; color: var(--emerald); }

  .badge {
    display: inline-block;
    font-size: 11px; font-weight: 600;
    padding: 3px 10px; border-radius: 12px;
  }
  .badge-agree { background: rgba(15,61,46,0.09); color: var(--emerald); border: 1px solid rgba(15,61,46,0.25); }
  .badge-sign { background: rgba(201,162,75,0.15); color: #8a6d2f; border: 1px solid rgba(201,162,75,0.45); }

  .chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
  .chip {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    border: 1px solid var(--gold); border-radius: 20px;
    padding: 8px 16px; font-size: 13px; color: var(--text-dark);
  }
  .chip b { color: var(--emerald); }
  .chip-tap {
    background: none; font: inherit; cursor: pointer; text-align: left;
  }
  .chip-tap:hover { background: rgba(201,162,75,0.1); }
  .callout {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px; border-left: 3px solid var(--gold);
    padding: 10px 14px; background: rgba(201,162,75,0.08);
    border-radius: 0 8px 8px 0; margin-bottom: 16px;
  }
  .note {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px; color: #7a8a80; margin-top: 10px;
  }
  #results { display: none; }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

  .lead-note {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px; color: #4a5850; margin-bottom: 18px;
  }
  .sig-row {
    display: grid; grid-template-columns: 1fr auto;
    gap: 14px; align-items: end; max-width: 560px;
  }
  #marriageResults { display: none; margin-top: 26px; }
  .factor-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin-bottom: 8px;
  }
  .factor-box {
    border: 1px solid rgba(201,162,75,0.35);
    border-radius: 12px; padding: 16px;
  }
  .factor-box h3 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 11px; letter-spacing: 1.5px; color: var(--gold);
    font-weight: 700; margin-bottom: 10px; text-transform: uppercase;
  }
  .factor-box div {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 13.5px; line-height: 1.65;
  }
  .factor-box b { color: var(--emerald); }
  .sub-heading {
    font-size: 18px; color: var(--emerald); font-weight: 400;
    margin: 26px 0 12px;
  }
  .conv-item {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px; padding: 8px 0;
    border-bottom: 1px solid rgba(201,162,75,0.16);
    display: flex; gap: 10px; align-items: baseline;
  }
  .conv-planet {
    display: inline-block; min-width: 64px;
    font-weight: 700; color: var(--emerald);
  }
  tr.current-window td { background: rgba(201,162,75,0.13); }
  .now-badge {
    display: inline-block; font-size: 10px; font-weight: 700;
    letter-spacing: 1px; color: var(--cream); background: var(--gold);
    border-radius: 10px; padding: 2px 8px; margin-left: 8px;
    vertical-align: middle;
  }
  .peaks-box {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 13.5px; border-left: 3px solid var(--gold);
    padding: 10px 14px; background: rgba(201,162,75,0.08);
    border-radius: 0 8px 8px 0; margin-top: 14px;
  }
  @media (max-width: 900px) {
    .factor-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .factor-grid { grid-template-columns: 1fr; }
    .sig-row { grid-template-columns: 1fr; }
  }

  @media (max-width: 800px) {
    .form-grid { grid-template-columns: 1fr; }
    .two-col { grid-template-columns: 1fr; }
  }

.header-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.app-nav {
  display: flex; gap: 14px;
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13.5px;
}
.app-nav a { color: #6a7a70; padding-bottom: 2px; }
.app-nav a:hover { color: var(--emerald); }
.app-nav a.active {
  color: var(--emerald); font-weight: 600;
  border-bottom: 2px solid var(--gold);
}

.chart-details summary {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--gold); cursor: pointer; list-style: none;
  margin-bottom: 10px;
}
.chart-details summary::before { content: '▸ '; }
.chart-details[open] summary::before { content: '▾ '; }
.chart-details summary::-webkit-details-marker { display: none; }

.basis-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.basis-row label { margin: 0; }
.basis-row select { max-width: 280px; }

.tl-card {
  border-bottom: 1px solid rgba(201,162,75,0.16);
  padding: 4px 0;
}
.tl-card:last-of-type { border-bottom: none; }
.tl-card summary {
  cursor: pointer; list-style: none; padding: 12px 0;
}
.tl-card summary::-webkit-details-marker { display: none; }
.tl-sum-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.tl-card summary .tl-dates { display: block; margin: 4px 0 0; }
.tl-card summary::after {
  content: '▸'; float: right; color: #9aa8a0; font-size: 11px;
  margin-top: -18px;
}
.tl-card[open] summary::after { content: '▾'; }
.tl-body { padding: 2px 0 14px; }

/* ---------- Family Hub: registered children ---------- */
.child-card {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 16px; padding: 12px 0;
}
.child-card .tl-sum-row { flex: none; }
.child-born { color: #9aa8a0; font-size: 13.5px; flex: 1; }
.child-actions { display: flex; gap: 8px; }
.child-reading {
  padding: 4px 0 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(201,162,75,0.16);
}
.child-reading:last-child { border-bottom: none; }

/* ---------- Personal calendar ---------- */
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.cal-month-title { margin: 0; }
.cal-nav { padding: 6px 16px; font-size: 16px; line-height: 1; }
.cal-legend {
  display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; color: #6a7a70;
}
.cal-key { display: inline-flex; align-items: center; gap: 6px; }
.cal-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
}
.cal-clear { background: #4a7c59; }
.cal-crosswinds { background: var(--gold); }
.cal-heavy { background: #b3462c; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.cal-dow {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold);
  text-align: center; padding-bottom: 4px;
}
.cal-day {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 0 8px; background: transparent; cursor: pointer;
  border: 1px solid rgba(201,162,75,0.18); border-radius: 10px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.cal-day:hover { background: rgba(201,162,75,0.08); }
.cal-num { font-size: 13.5px; color: var(--text-dark); }
.cal-past { opacity: 0.45; }
.cal-today { border-color: var(--gold); border-width: 2px; }
.cal-selected { background: rgba(201,162,75,0.14); }
.cal-detail {
  margin-top: 16px; padding: 14px 18px;
  border-left: 3px solid var(--gold);
  background: rgba(201,162,75,0.07); border-radius: 0 10px 10px 0;
}
.cal-detail-date {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.cal-detail-signal {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 15.5px; color: var(--text-dark);
  display: flex; align-items: center; gap: 8px;
}
.cal-detail-row {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: #4a5850; margin-top: 6px;
}
.cal-detail-row b { color: var(--emerald); font-weight: 600; }
.muted-row { color: #8a9890; }

/* ---------- Admin panel ---------- */
.admin-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 13px 0;
  border-bottom: 1px solid rgba(201,162,75,0.16);
}
.admin-row:last-child { border-bottom: none; }
.admin-who { display: flex; flex-direction: column; gap: 2px; }
.admin-who b {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 15.5px; color: var(--emerald); font-weight: 600;
}
.admin-who small {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; color: #8a9890;
}
.admin-btn { padding: 9px 20px; font-size: 13.5px; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-tally {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; line-height: 1.9; color: #4a5850;
}
.admin-tally b { color: var(--emerald); font-size: 15px; }
#adminSearch { width: 100%; margin-bottom: 6px; }
/* The access state, readable at a glance: gold for money, emerald for
   a live trial, muted for everything that needs no attention. */
.admin-state { font-weight: 600; }
.admin-state-paying, .admin-state-lifetime { color: var(--gold); }
.admin-state-trial { color: var(--emerald); }
.admin-state-past_due { color: #a8442f; }
.admin-state-expired, .admin-state-admin { color: #8a9890; }

/* ---------- Access doors: sign in, and the subscribe wall ---------- */
.gate-pending main { visibility: hidden; }
.gate-card, .waitlist-hold {
  max-width: 480px; margin: 90px auto; padding: 40px 44px;
  background: var(--cream); border: 1px solid rgba(201,162,75,0.45);
  border-radius: 18px; text-align: center;
}
.gate-badge { font-size: 26px; margin-bottom: 10px; color: var(--gold); }
.gate-card h2, .waitlist-hold h1 {
  font-size: 26px; font-weight: 400; color: var(--emerald);
  margin-bottom: 14px;
}
.gate-card p, .waitlist-hold p {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14.5px; line-height: 1.65; color: #4a5850;
  margin: 0 0 12px;
}
.gate-actions {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap; margin-top: 20px;
}
.gate-actions .btn-plain { text-decoration: none; display: inline-block; }
.waitlist-hold .btn-gold {
  display: inline-block; text-decoration: none; margin-top: 12px;
}
.waitlist-hold .invited-note a { color: #8a9890; text-decoration: underline; }
.invited-note {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: #8a9890; margin-top: 18px;
}

/* ---------- Add to Home Screen ---------- */
/* A bottom sheet, never a full-screen interruption: it should feel
   like an offer, not a toll gate. Slides up once, dismissible, and
   stays gone for a month if waved away. */
.install-card {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  max-width: 460px; margin: 0 auto; padding: 16px 18px;
  background: var(--emerald); border: 1px solid rgba(201,162,75,0.55);
  border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  transform: translateY(140%); opacity: 0;
  transition: transform 0.38s ease, opacity 0.38s ease;
}
.install-card.show { transform: translateY(0); opacity: 1; }
.install-body { display: flex; gap: 14px; align-items: flex-start; }
.install-icon img { border-radius: 10px; display: block; }
.install-body b {
  display: block; font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 16px; color: var(--gold-light); font-weight: 600;
  margin-bottom: 4px;
}
.install-body span {
  display: block; font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; line-height: 1.55; color: var(--cream-dark);
}
.install-steps {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; line-height: 1.6; color: var(--cream-dark);
  margin: 10px 0 0; padding: 10px 12px;
  background: rgba(253,245,233,0.08);
  border-left: 2px solid var(--gold); border-radius: 6px;
}
.install-go { margin-top: 12px; padding: 10px 22px; font-size: 14px; }
.install-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--cream-dark); opacity: 0.65;
}
.install-close:hover { opacity: 1; }
/* The bottom bar on small screens must not sit on top of the card. */
@media (max-width: 700px) { .install-card { bottom: 76px; } }

/* ---------- Trial strip (Today page only) ---------- */
/* Says plainly what happens when the free days run out, never just a
   countdown. Cream while there is time, emerald once it matters, so it
   reads as Sunavi speaking rather than a banner ad. */
.trial-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin: 0 0 24px; padding: 15px 20px;
  background: var(--cream-dark);
  border: 1px solid rgba(201,162,75,0.45);
  border-radius: 14px;
}
.trial-strip-copy {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; line-height: 1.6; color: #4a5850;
}
.trial-strip-copy b { display: block; color: var(--emerald); font-weight: 600; }
.trial-strip-btn {
  flex-shrink: 0; text-decoration: none; display: inline-block;
  padding: 10px 22px; font-size: 13.5px;
}
/* The one-time welcome after confirming an e-mail: emerald and gold,
   because arriving should feel like arriving. */
.trial-strip-welcome {
  background: var(--emerald); border-color: var(--gold);
}
.trial-strip-welcome .trial-strip-copy { color: var(--cream-dark); }
.trial-strip-welcome .trial-strip-copy b { color: var(--gold-light); }
.trial-strip-soon, .trial-strip-ended {
  background: var(--emerald); border-color: rgba(201,162,75,0.55);
}
.trial-strip-soon .trial-strip-copy,
.trial-strip-ended .trial-strip-copy { color: var(--cream-dark); }
.trial-strip-soon .trial-strip-copy b,
.trial-strip-ended .trial-strip-copy b { color: var(--gold-light); }
@media (max-width: 600px) {
  .trial-strip { flex-direction: column; align-items: stretch; }
  .trial-strip-btn { text-align: center; }
}

/* ---------- Accounts ---------- */
.account-area {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px;
}
.account-area a { color: var(--gold); }
.account-area a:hover { text-decoration: underline; }
.acc-tier {
  font-size: 10px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: #8a9890;
  border: 1px solid rgba(201,162,75,0.35); border-radius: 10px;
  padding: 2px 8px;
}
.acc-premium { color: var(--cream); background: var(--gold); border-color: var(--gold); }

.auth-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15,61,46,0.35);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.auth-box {
  background: var(--cream); border: 1px solid rgba(201,162,75,0.5);
  border-radius: 16px; padding: 26px; width: 100%; max-width: 380px;
}
.auth-box h3 {
  font-size: 20px; font-weight: 400; color: var(--emerald);
  margin-bottom: 14px;
}
.auth-box label {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; letter-spacing: 1px; color: var(--emerald);
  font-weight: 600; display: block; margin: 10px 0 5px;
}
.auth-box input {
  width: 100%; font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px; padding: 11px 13px;
  border: 1px solid rgba(201,162,75,0.5); border-radius: 10px;
  background: #fff;
}
.auth-note {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; line-height: 1.55; color: #4a5850; margin: 10px 0 0;
}
.auth-actions { margin-top: 16px; display: flex; gap: 10px; }
.btn-plain {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: transparent; color: #4a5850;
  border: 1px solid rgba(201,162,75,0.5); border-radius: 30px;
  padding: 13px 24px; font-size: 14px; cursor: pointer;
}
.auth-links {
  display: flex; justify-content: space-between; margin-top: 14px;
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12.5px;
}
.auth-links a { color: var(--gold); }

.form-collapsed form,
.form-collapsed > .note { display: none; }
.profile-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.profile-strip-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 15.5px; color: var(--text-dark);
}
.profile-strip-text b { color: var(--emerald); }
.profile-edit-btn { padding: 8px 18px; font-size: 13px; }

.save-mine-bar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; flex-wrap: wrap; margin: 0 0 16px;
}
.save-mine-text {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; color: #4a5850;
}

.my-calcs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 16px;
}
.my-calcs-title {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold); margin-right: 4px;
}
.calc-chip {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 1px; background: transparent; cursor: pointer;
  border: 1px solid rgba(201,162,75,0.45); border-radius: 12px;
  padding: 7px 14px; font-size: 13px; color: var(--text-dark);
}
.calc-chip:hover { background: rgba(201,162,75,0.1); }
.calc-chip b { color: var(--emerald); font-weight: 600; }
.calc-chip small { font-size: 10.5px; color: #8a9890; }

.sunavi-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--emerald); color: var(--cream);
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13.5px;
  padding: 11px 20px; border-radius: 24px; opacity: 0;
  transition: opacity 0.25s, transform 0.25s; pointer-events: none; z-index: 70;
}
.sunavi-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.lang-toggle {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: #8a9890;
}
.lang-toggle a { color: #8a9890; }
.lang-toggle a.active { color: var(--emerald); font-weight: 700; }
.lang-toggle a:hover { color: var(--gold); }

.reading-block {
  border: 1px solid rgba(201,162,75,0.45);
  background: rgba(201,162,75,0.06);
  border-radius: 14px;
  padding: 22px 26px 26px;
  margin-bottom: 8px;
}
.reading-block .sub-heading { margin-top: 10px; }
.reading-prose {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--text-dark);
}
.reading-prose p { margin: 0; }
.reading-prose p + p { margin-top: 14px; }

.sky-summary {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 15.5px; font-style: italic; line-height: 1.6;
  color: var(--emerald, #1d5c45);
  padding: 2px 0 14px;
  border-bottom: 1px solid rgba(201,162,75,0.22);
  margin-bottom: 6px;
}
.when-list {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.65;
}
.when-list .when-item {
  padding: 7px 0 7px 14px;
  border-left: 2px solid rgba(201,162,75,0.5);
  margin-bottom: 6px;
}
.when-list .when-note {
  color: #7a8a80;
  font-size: 13px;
  padding-top: 8px;
}

.reasoning-details { margin-top: 24px; }
.reasoning-details summary {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--gold); cursor: pointer;
  padding: 10px 0; list-style-position: inside;
}
.reasoning-details summary:hover { text-decoration: underline; }
.reasoning-details[open] summary { margin-bottom: 10px; }

.sky-date {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: #7a8a80; font-weight: 400;
  display: block; margin-top: 4px;
}
tr.aspect-explain td {
  font-size: 12.5px; color: #4a5850;
  padding: 2px 10px 10px; border-bottom: 1px solid rgba(201,162,75,0.16);
  font-style: italic;
}
tr.aspect-row td { border-bottom: none; }

.season-story {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 15.5px; line-height: 1.7; color: var(--text-dark);
  margin-bottom: 14px;
}
.season-story p { margin: 0; }
.season-story p + p { margin-top: 8px; }
.cycle-line {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 14.5px; line-height: 1.6; color: #4a5850;
  margin: 12px 0 0;
}
.sky-note {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; line-height: 1.55; color: #6a7a70;
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid rgba(201,162,75,0.16);
}
.ladder {
  margin-top: 16px; padding: 16px 18px;
  background: rgba(15,61,46,0.05);
  border: 1px solid rgba(201,162,75,0.3);
  border-radius: 12px;
}
.ladder-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 16px; color: var(--emerald, #1d5c45);
  margin-bottom: 6px;
}
.ladder p {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; line-height: 1.6; color: #4a5850; margin: 0 0 12px;
}
.ladder-btn {
  display: inline-block; padding: 10px 22px; font-size: 14px;
  text-decoration: none;
}

/* Font discipline (tester feedback: "a lot of different fonts"):
   exactly TWO families site-wide. Georgia carries headings and
   reading prose; Helvetica carries labels, UI and data. Form
   controls inherit the sans family instead of the OS default,
   which otherwise sneaks in a third personality. */
input, select, button, textarea {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.tl-headline {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 16.5px; line-height: 1.5; color: var(--text-dark);
}
.western-badge {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 9.5px; font-weight: 600; letter-spacing: 1.2px;
  color: #8a6d2a; background: rgba(201,162,75,0.14);
  border: 1px solid rgba(201,162,75,0.35);
  border-radius: 10px; padding: 2px 8px; margin-left: 8px;
  vertical-align: middle;
}
.tl-planet {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 14px; color: var(--gold);
}
.tl-planet-text {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; line-height: 1.55; color: #4a5850; margin-top: 5px;
}
.tl-dates {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14.5px; letter-spacing: 0.3px; color: #4a5850;
  margin: 2px 0 6px;
}
.mil-title { display: block; margin: 18px 0 6px; }
.milestone {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 14.5px; line-height: 1.7; color: var(--text-dark);
}

.windows-list { display: flex; flex-direction: column; gap: 2px; }
.window-block {
  padding: 14px 0 16px;
  border-bottom: 1px solid rgba(201,162,75,0.16);
}
.window-block:last-of-type { border-bottom: none; }
.window-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.window-area {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--emerald, #1d5c45);
}
.window-strength {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; letter-spacing: 0.8px; color: var(--gold);
}
.window-when {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 16px; color: var(--text-dark);
}
.window-when.muted { color: #8a9890; font-size: 14px; }
.window-life {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 16px; line-height: 1.55; color: var(--text-dark);
}
.window-life.muted { color: #8a9890; font-size: 14px; }
.window-around {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; letter-spacing: 0.3px; color: #6a7a70;
  margin-top: 5px;
}
.window-astro { margin-top: 6px; }
.window-astro summary {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  color: #9aa8a0; cursor: pointer; list-style: none;
}
.window-astro summary::before { content: '▸ '; }
.window-astro[open] summary::before { content: '▾ '; }
.window-astro summary::-webkit-details-marker { display: none; }
.window-receipt {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; letter-spacing: 0.3px; color: #6a7a70;
  margin-top: 4px; line-height: 1.5;
}

.ss-details { margin-top: 8px; }
.ss-details summary {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; letter-spacing: 0.6px; color: var(--gold);
  cursor: pointer; list-style: none;
}
.ss-details summary::before { content: '▸ '; }
.ss-details[open] summary::before { content: '▾ '; }
.ss-details summary::-webkit-details-marker { display: none; }
.ss-details p {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 13.5px; line-height: 1.6; color: #4a5850;
  margin: 8px 0 0;
}

.greeting {
  display: none;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 19px; font-style: italic; color: var(--emerald, #1d5c45);
  margin: 26px 4px 2px;
}
.greeting:not(:empty) { display: block; }

.transit-list { display: flex; flex-direction: column; gap: 4px; }
.transit-block {
  padding: 18px 0 20px;
  border-bottom: 1px solid rgba(201,162,75,0.16);
}
.transit-block:last-child { border-bottom: none; }
.transit-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.transit-theme {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--emerald, #1d5c45);
}
.transit-priority {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.8px;
  text-transform: uppercase; color: #8a9890;
  white-space: nowrap;
}
.transit-tech {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11.5px; letter-spacing: 0.5px; color: #8a9890;
}
.transit-label {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--gold);
  margin-top: 12px; margin-bottom: 4px;
}
.transit-notice {
  margin: 0; padding-left: 18px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; color: #6a7a70; line-height: 1.6;
}
.transit-notice li { margin: 0; }
.transit-astro { margin-top: 7px; }
.transit-astro summary {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  /* Dark, not grey (her call): a fold nobody notices is a fold
     nobody opens. */
  color: var(--text-dark); cursor: pointer; list-style: none;
}
.transit-astro summary::before { content: '▸ '; }
.transit-astro[open] summary::before { content: '▾ '; }
.transit-astro summary::-webkit-details-marker { display: none; }
.transit-astro .transit-tech { margin-top: 4px; }
.transit-exp {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 15px; line-height: 1.55; color: var(--text-dark);
}
.transit-use {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: #4a5850; line-height: 1.5;
}

/* ---------- Kohët e Kaluara / Past Timing ---------- */
.kh-range-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 20px;
}
.kh-range-row label {
  font-size: 12px; letter-spacing: 1px; color: var(--emerald);
  font-weight: 600; margin: 0;
}
.kh-range-row select { width: auto; padding: 8px 12px; font-size: 14px; }
.kh-range-row .btn-plain { margin-left: 4px; }
.kh-tier {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; letter-spacing: 0.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
}
.kh-tier-strong { background: rgba(15,61,46,0.1); color: var(--emerald); }
.kh-tier-moderate { background: rgba(201,162,75,0.15); color: var(--gold-dark, #9a7b1f); }
.kh-tier-light { background: #f4f1e8; color: #6a7a70; }
.kh-missed { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(201,162,75,0.25); }
.kh-missed b { color: var(--emerald); }
.kh-next { margin-top: 8px; font-style: italic; }
.kh-replay-link { display: inline-block; margin-top: 12px; color: var(--gold-dark, #9a7b1f); font-weight: 600; }

/* ---------- Decision Check ---------- */
.dec-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.dec-chip {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; color: var(--emerald);
  background: #f4f1e8; border: 1px solid #e2ddcc; border-radius: 999px;
  padding: 8px 16px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.dec-chip:hover { border-color: var(--gold); }
.dec-chip.dec-active {
  background: var(--emerald); color: #fdfbf4; border-color: var(--emerald);
}
.dec-head {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; color: var(--emerald); margin-bottom: 6px;
}
.dec-level {
  font-size: 16px; line-height: 1.55; color: #2f3b34; margin: 0 0 8px;
}
.dec-warn, .dec-better {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; line-height: 1.5; margin: 6px 0;
}
.dec-warn { color: #9a5b1f; }
.dec-better { color: var(--emerald); font-weight: 600; }
.dec-receipts {
  margin: 8px 0 0 18px; padding: 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; color: #6a7a70; line-height: 1.6;
}

.ask-chapter {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; line-height: 1.55; color: #6a7a70;
  border-left: 2px solid var(--gold); padding: 2px 0 2px 10px;
  margin: 10px 0;
}
.ask-chapter b { color: var(--emerald); }
.ask-window {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; color: var(--emerald); font-weight: 600; margin: 6px 0;
}

/* ---------- Ask Sunavi ---------- */
.ask-row { display: flex; gap: 10px; margin: 4px 0 16px; }
.ask-row input {
  flex: 1;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; color: #2f3b34;
  background: #fdfbf4; border: 1px solid #e2ddcc; border-radius: 8px;
  padding: 10px 14px;
}
.ask-row input:focus { outline: none; border-color: var(--gold); }
.ask-row .btn-gold { padding: 10px 22px; }

/* ---------- Pattern recognition ---------- */
.pat-card { padding: 14px 0; border-bottom: 1px solid #eee8d8; }
.pat-card:last-of-type { border-bottom: none; }
.pat-card h3 {
  font-size: 17px; color: var(--emerald); margin: 0 0 4px;
  font-weight: 600;
}
.pat-line { font-size: 14px; color: #4a5850; line-height: 1.55; margin: 0 0 8px; }
.pat-row {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; color: #2f3b34; line-height: 1.6; margin: 3px 0;
}
.pat-row b { color: var(--emerald); font-weight: 600; }
.pat-now {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; color: var(--gold-dark, #9a7b1f); font-weight: 600;
  margin: 3px 0;
}
.pat-invite {
  font-size: 14px; color: #4a5850; font-style: italic;
  line-height: 1.55; margin: 14px 0 0;
}

/* ---------- Hero insight: the day's one message ---------- */
.hero-card { border: 1px solid var(--gold); }
.hero-line {
  font-size: 27px; line-height: 1.3; color: var(--emerald);
  font-weight: 600; margin: 2px 0 8px;
}
.hero-line-secondary {
  font-size: 19px; line-height: 1.4; color: #4a5850;
  font-weight: 400; margin: 0 0 10px;
}
.hero-sub {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; color: #4a5850; margin: 0;
}

/* ---------- Foldable chapters ---------- */
.card-fold summary { cursor: pointer; list-style: none; position: relative; padding-right: 124px; }
.card-fold summary::-webkit-details-marker { display: none; }
.card-fold summary h2 { margin: 2px 0 0; }
.card-fold[open] summary { margin-bottom: 12px; }
.card-fold summary:hover h2 { color: var(--gold-dark, #9a7b1f); }

.fold-cue { position: absolute; top: 4px; right: 2px; display: flex; align-items: center; gap: 6px; }
.fold-cue-text {
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); white-space: nowrap;
}
.fold-cue-open { display: none; }
.card-fold[open] .fold-cue-open { display: inline; }
.card-fold[open] .fold-cue-closed { display: none; }
.fold-chevron {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--gold); background: rgba(201,162,75,0.06);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); flex-shrink: 0;
  transition: transform 0.18s ease, background 0.18s ease;
}
.fold-chevron svg { width: 11px; height: 11px; display: block; }
.card-fold[open] .fold-chevron { transform: rotate(180deg); background: rgba(201,162,75,0.14); }
.card-fold summary:hover .fold-chevron { border-color: var(--gold-dark, #9a7b1f); }
.card-emerald .fold-cue-text, .card-emerald .fold-chevron { color: var(--gold-light); border-color: var(--gold-light); }
@media (max-width: 480px) {
  .card-fold summary { padding-right: 108px; }
  .fold-cue { gap: 4px; }
  .fold-cue-text { font-size: 10px; letter-spacing: 1px; }
  .fold-chevron { width: 19px; height: 19px; }
  .fold-chevron svg { width: 10px; height: 10px; }
}

/* ---------- Today-tab card head: numbered icon badge + label/heading/desc ---------- */
.tc-head { display: flex; align-items: flex-start; gap: 18px; }
.tc-icon-col { flex: 0 0 auto; position: relative; }
.tc-icon {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--gold); background: rgba(201,162,75,0.06);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-dark, #9a7b1f);
}
.tc-icon svg { width: 28px; height: 28px; display: block; }
.tc-num {
  position: absolute; top: -8px; left: -8px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--gold); color: var(--emerald-dark);
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tc-text { flex: 1 1 auto; min-width: 0; }
.tc-text .section-title { margin-bottom: 4px; }
.card-fold summary.tc-head h2, .tc-head h2 { margin: 2px 0 6px; }
.tc-desc { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 14px; color: #4a5850; line-height: 1.5; margin: 0; }
@media (max-width: 480px) {
  .tc-head { gap: 14px; }
  .tc-icon { width: 52px; height: 52px; }
  .tc-icon svg { width: 22px; height: 22px; }
}

/* ---------- Today-tab closing card: the emerald signature moment ---------- */
.tc-footer { position: relative; overflow: hidden; padding-right: 150px; }
.tc-footer-ic { display: inline-flex; color: var(--gold-light); margin-bottom: 10px; }
.tc-footer-ic svg { width: 24px; height: 24px; display: block; }
.tc-footer-line1 { font-size: 17px; font-weight: 600; color: var(--cream); margin: 0 0 6px; }
.tc-footer-line2 { font-size: 14px; color: rgba(253,245,233,0.78); margin: 0; }
.tc-footer-art {
  position: absolute; right: -10px; bottom: -10px;
  width: 150px; height: 150px; color: var(--gold-light);
  opacity: 0.35; pointer-events: none;
}
.tip-star { color: var(--gold); }
@media (max-width: 480px) {
  .tc-footer { padding-right: 26px; }
  .tc-footer-art { width: 100px; height: 100px; opacity: 0.22; right: -6px; bottom: -6px; }
}

/* ---------- Timeline progress bars ---------- */
.tl-bar {
  display: block; height: 5px; border-radius: 3px;
  background: #eee8d8; overflow: hidden; margin-top: 7px;
}
.tl-bar-fill {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--emerald), var(--gold));
}

/* ---------- Accented card (patterns) ---------- */
.card-accent { border: 1px solid var(--gold); }

/* ---------- Chart page technical extras ---------- */
.tech-extras { margin-top: 14px; }
.tech-houses {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 14px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: #2f3b34; margin: 8px 0 12px;
}
.tech-line {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: #2f3b34; margin: 4px 0;
}
.tech-line b { color: var(--emerald); font-weight: 600; }
@media (max-width: 640px) {
  .tech-houses { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Ask follow-up chips ---------- */
.ask-follow { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ask-follow-lead {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; letter-spacing: 0.04em; color: #8a9890;
}

/* ---------- Timeline chapters (psychological order) ---------- */
.tl-group { margin-bottom: 10px; }
.tl-group-title { margin-top: 18px; }
.tl-group:first-child .tl-group-title { margin-top: 0; }
.tl-group-line { margin: 2px 0 10px; }
.tl-why {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--gold-dark, #9a7b1f); margin-bottom: 7px;
}

/* ---------- Profile dropdown menu ---------- */
.acc-menu { position: relative; display: inline-block; }
.acc-btn {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; color: var(--emerald);
  background: none; border: 1px solid #e2ddcc; border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
}
.acc-btn:hover { border-color: var(--gold); }
.acc-upgrade {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; font-weight: 600; color: var(--gold-dark, #9a7b1f);
  margin-right: 10px; text-decoration: none;
}
/* In the menu, Premium leads in gold — the only door mobile gets,
   since the header link hides on small screens. */
.acc-drop .acc-drop-upgrade {
  color: var(--gold-dark, #9a7b1f); font-weight: 600;
}
.acc-drop .acc-drop-upgrade .acc-sym { color: var(--gold-dark, #9a7b1f); }
.acc-drop {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 230px; z-index: 60;
  background: #fdfbf4; border: 1px solid #e2ddcc; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(31, 51, 41, 0.12);
  padding: 8px 0; text-align: left;
}
.acc-drop.open { display: flex; flex-direction: column; }
.acc-drop a, .acc-drop-row {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; color: #2f3b34; text-decoration: none;
  padding: 8px 16px; white-space: nowrap;
}
.acc-drop a:hover { background: #f4f1e8; color: var(--emerald); }
.acc-drop-head {
  display: block; padding: 8px 16px 10px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; font-weight: 600; color: var(--emerald);
  border-bottom: 1px solid #eee8d8; margin-bottom: 4px;
}
.acc-drop-head small {
  display: block; font-weight: 400; font-size: 12px; color: #8a9890;
}
.acc-drop-row a { display: inline; padding: 0; color: var(--emerald); }
.acc-drop-row b { color: var(--emerald); font-weight: 600; }

/* The logo is the way home, and home is Today */
a.logo-word { text-decoration: none; display: inline-block; }

/* ---------- Meet Esmeralda: magazine framework ---------- */
.ab-page { max-width: 860px; padding-bottom: 90px; }
.ab-section {
  margin: 72px auto 0; opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.ab-section.ab-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ab-section { opacity: 1; transform: none; transition: none; }
}
.ab-section + .ab-section { border-top: 1px solid #efe9d9; padding-top: 56px; }
.ab-section h2 { font-size: 30px; color: var(--emerald); margin: 0 0 18px; }

.ab-hero {
  display: grid; grid-template-columns: 300px 1fr; gap: 48px;
  align-items: center; margin-top: 48px;
}
.ab-hero h1 { font-size: 46px; margin: 0 0 14px; color: var(--emerald); }
.ab-sub {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-dark, #9a7b1f);
}
.ab-photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: 16px;
  overflow: hidden; background: #f4f1e8; border: 1px solid #e2ddcc;
}
.ab-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-photo-mark {
  display: none; position: absolute; inset: 0;
  align-items: center; justify-content: center;
  font-size: 44px; color: var(--gold);
}
.ab-photo-empty .ab-photo-mark { display: flex; }

.ab-body p { font-size: 16.5px; line-height: 1.75; color: #35423a; margin: 0 0 16px; }
.ab-lead { font-size: 19px; font-style: italic; color: var(--emerald); margin: 0 0 14px; }
.ab-block {
  background: #faf7ee; border-radius: 14px; padding: 26px 30px;
}
.ab-block p:last-child { margin-bottom: 0; }

.ab-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ab-card {
  background: #fdfbf4; border: 1px solid #eee8d8; border-radius: 14px;
  padding: 24px 22px; transition: transform 0.2s ease, border-color 0.2s ease;
}
.ab-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.ab-card-icon { font-size: 24px; color: var(--gold-dark, #9a7b1f); margin-bottom: 10px; }
.ab-card h3 { font-size: 16px; color: var(--emerald); margin: 0 0 6px; }
.ab-card p {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; line-height: 1.55; color: #4a5850; margin: 0;
}

.ab-featured {
  border: 1px solid var(--gold); border-radius: 16px;
  padding: 34px 38px; background: #fdfbf4;
}
.ab-featured-date {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; color: #8a9890; margin: 4px 0 14px;
}
.ab-featured-text {
  font-size: 20px; line-height: 1.6; font-style: italic;
  color: #2f3b34; margin: 0;
}

@media (max-width: 720px) {
  .ab-hero { grid-template-columns: 1fr; gap: 28px; }
  .ab-photo { max-width: 300px; }
  .ab-cards { grid-template-columns: 1fr; }
  .ab-hero h1 { font-size: 36px; }
}

/* ---------- Unknown birth time ---------- */
.time-unknown {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; color: #6a7a70; cursor: pointer;
}
.time-unknown input { width: auto; flex: none; accent-color: var(--emerald); }
input#time:disabled { opacity: 0.55; }

/* ---------- Month picker (time travel) ---------- */
#calMonthPick {
  margin-left: 10px; padding: 6px 10px;
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px;
  color: #2f3b34; background: #fdfbf4;
  border: 1px solid #e2ddcc; border-radius: 8px;
}
#calMonthPick:focus { outline: none; border-color: var(--gold); }

/* ---------- You might be wondering (Today) ---------- */
.wonder-list { display: flex; flex-direction: column; gap: 2px; }
.wonder-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 4px; text-decoration: none; color: var(--text-dark);
  border-bottom: 1px solid rgba(201,162,75,0.16);
  font-family: 'Georgia', 'Times New Roman', serif; font-size: 15.5px;
}
.wonder-list .wonder-item:last-child { border-bottom: none; }
.wonder-item:hover { color: var(--emerald); }
.wonder-item .wonder-arrow { color: var(--gold); flex: none; font-size: 14px; }

/* ---------- Sky Right Now / Qielli tani (Today) ---------- */
/* Rebuilt as one compact two-column table (her Aug 2026 reference
   image): a header row labels the two columns, thin dividers between
   planets read as one coherent list rather than a stack of cards. */
.sh-list { display: flex; flex-direction: column; }
.sh-row {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid rgba(201,162,75,0.16);
  align-items: start;
}
.sh-list .sh-row:last-child { border-bottom: none; }
.sh-thead {
  padding: 0 0 8px; border-bottom: 1px solid rgba(201,162,75,0.35);
}
.sh-th {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold);
}
.sh-planet { display: flex; flex-direction: column; gap: 4px; }
.sh-pname { display: flex; align-items: center; gap: 9px; }
.sh-glyph-circle {
  flex: none; 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; line-height: 1;
}
.sh-name {
  font-family: 'Georgia', 'Times New Roman', serif; font-size: 15px;
  font-weight: 700; color: var(--text-dark);
}
.sh-pos-line { padding-left: 35px; display: flex; align-items: baseline; gap: 8px; }
.sh-pos {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: #7a8a80;
}
.sh-retro {
  display: inline-block;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase; color: #8a6d2f;
}
.sh-house-num {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--emerald);
  margin-bottom: 3px;
}
.sh-house-desc {
  font-family: 'Georgia', 'Times New Roman', serif; font-size: 14.5px;
  color: var(--text-dark); margin-bottom: 6px;
}
.sh-house .chips { margin-bottom: 0; gap: 6px; }
.sh-house .chip { padding: 4px 10px; font-size: 11.5px; }
@media (max-width: 560px) {
  /* Two columns stay two columns on the phone too (her explicit
     instruction) — only the sizing tightens, the grid never collapses
     to a single stacked column. */
  .sh-row { grid-template-columns: 0.85fr 1.15fr; gap: 8px; padding: 11px 0; }
  .sh-th { font-size: 9.5px; letter-spacing: 0.6px; }
  .sh-glyph-circle { width: 20px; height: 20px; font-size: 10px; }
  .sh-pname { gap: 6px; }
  .sh-name { font-size: 13px; }
  .sh-pos-line { padding-left: 26px; }
  .sh-pos { font-size: 11px; }
  .sh-house-num { font-size: 9.5px; margin-bottom: 2px; }
  .sh-house-desc { font-size: 12px; margin-bottom: 5px; }
  .sh-house .chips { gap: 4px; }
  .sh-house .chip { padding: 3px 7px; font-size: 10px; }
}

/* ---------- Eclipse Season (Calendar) ---------- */
.ecl-row {
  padding: 16px 0; border-bottom: 1px solid rgba(201,162,75,0.16);
}
.ecl-row:last-child { border-bottom: none; }
.ecl-head {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.ecl-teaser {
  font-family: 'Georgia', 'Times New Roman', serif; font-size: 16px;
  color: var(--text-dark); margin-bottom: 10px;
}
.ecl-toggle {
  background: none; border: none; padding: 0; font: inherit;
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12.5px;
  font-weight: 600; letter-spacing: 0.4px; color: var(--gold); cursor: pointer;
}
.ecl-toggle:hover { color: var(--gold-light); }
.ecl-detail { margin-top: 14px; }
.ecl-detail:empty { display: none; margin-top: 0; }
.ecl-sig {
  padding: 10px 14px; background: rgba(201,162,75,0.08);
  border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0;
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px;
  margin-bottom: 10px;
}

/* ---------- Chart-loading overlay (Today) ---------- */
/* Her Aug 2026 catch: cards used to pop in one by one while the sky
   engines finished at their own pace, which read as a half-loaded
   page. Now nothing in #results shows until every card is ready; this
   overlay covers the wait so it feels like Sunavi reading the sky,
   not the site stalling. */
.cl-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 0.7s ease;
}
.cl-overlay.cl-hide { opacity: 0; pointer-events: none; }
.cl-content { text-align: center; max-width: 380px; padding: 24px; }
.cl-scenes { position: relative; width: 104px; height: 104px; margin: 0 auto 24px; }
.cl-scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 0.6s ease;
}
.cl-scene.active { opacity: 1; }
.cl-star { fill: var(--gold); animation: cl-twinkle 2.6s ease-in-out infinite; }
.cl-s1 { animation-delay: 0s; }
.cl-s2 { animation-delay: 0.35s; }
.cl-s3 { animation-delay: 0.7s; }
.cl-s4 { animation-delay: 1.05s; }
.cl-s5 { animation-delay: 1.4s; }
.cl-s6 { animation-delay: 1.75s; }
.cl-s7 { animation-delay: 2.1s; }
.cl-moon {
  animation: cl-glow 3.4s ease-in-out infinite;
  transform-origin: 92px 79px;
}
.cl-rays { animation: cl-twinkle 3s ease-in-out infinite; }
.cl-orbit-group { transform-origin: 80px 80px; animation: cl-orbit 9s linear infinite; }
.cl-sunrise { animation: cl-pulse 3.4s ease-in-out infinite; }
.cl-moon-full { animation: cl-pulse 2.8s ease-in-out infinite; }
@keyframes cl-twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
@keyframes cl-glow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes cl-orbit {
  to { transform: rotate(360deg); }
}
/* ---------- Inline loading spinner (for in-card searches, not full-page) ---------- */
.mini-loading { display: flex; align-items: center; gap: 9px; }
.mini-spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid rgba(201,162,75,0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: mini-spin 0.8s linear infinite;
}
@keyframes mini-spin { to { transform: rotate(360deg); } }
@keyframes cl-pulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}
.cl-message {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 21px; color: var(--emerald); margin: 0 0 10px;
}
.cl-sub {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: #7a8a80; margin: 0; line-height: 1.5;
}
.cl-dots { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 18px 0 10px; }
.cl-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: transparent; border: 1px solid var(--gold); opacity: 0.5;
  transition: background 0.4s ease, opacity 0.4s ease;
}
.cl-dot.filled { background: var(--gold); opacity: 1; }
.cl-tag {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; letter-spacing: 0.4px; color: #a68a49; margin: 0;
}
.cl-waking {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; color: var(--emerald); margin: 14px 0 0; line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .cl-star, .cl-moon, .cl-rays, .cl-orbit-group, .cl-sunrise, .cl-moon-full { animation: none; }
}
#results.results-ready { animation: results-fade-in 0.7s ease; }
@keyframes results-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Period explore links ---------- */
.period-link {
  display: inline-block; margin: 14px 18px 0 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; font-weight: 600;
  color: var(--gold-dark, #9a7b1f); text-decoration: none;
}
.period-link:hover { color: var(--emerald); }

/* ---------- Mobile bottom navigation ---------- */
.mobile-nav { display: none; }
@media (max-width: 640px) {
  .app-nav { display: none; }
  body { padding-bottom: 66px; }
  .mobile-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: #fdfbf4; border-top: 1px solid #e2ddcc;
    padding: 7px 0 calc(7px + env(safe-area-inset-bottom));
  }
  .mobile-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 3px; text-decoration: none; color: #6a7a70;
    font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 10.5px;
  }
  .mobile-nav .mn-icon { font-size: 17px; line-height: 1; }
  .mobile-nav a.active { color: var(--emerald); font-weight: 600; }
}

/* ---------- Hero line-art ---------- */
.hero-card { position: relative; overflow: hidden; }
.hero-art {
  position: absolute; right: -4px; bottom: -8px;
  width: 132px; height: 132px; color: var(--gold);
  opacity: 0.5; pointer-events: none;
}
.hero-line, .hero-sub { position: relative; max-width: calc(100% - 110px); }
@media (max-width: 480px) {
  .hero-line, .hero-sub { max-width: 100%; }
  .hero-art { opacity: 0.3; }
}

/* ---------- Tappable profile row (non-chart pages) ---------- */
.profile-strip-link {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-decoration: none; color: inherit;
}
.profile-strip-link b { color: var(--emerald); }
.ps-avatar { font-size: 15px; }
.ps-chevron { margin-left: auto; color: var(--gold); font-size: 22px; line-height: 1; }

/* ---------- Mobile header + icon tab row ---------- */
.mobile-tabs { display: none; }
@media (max-width: 640px) {
  .header-inner { position: relative; justify-content: center; }
  .header-inner > div:first-child { text-align: center; }
  .header-right { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
  .acc-name { display: none; }
  .acc-btn { padding: 6px 10px; }
  .acc-upgrade { display: none; }
  .mobile-tabs {
    display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 10px 14px 2px; scrollbar-width: none;
  }
  .mobile-tabs::-webkit-scrollbar { display: none; }
  .mobile-tabs a {
    flex: 1 0 auto; display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 6px 10px 8px; text-decoration: none; color: #6a7a70;
    font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px;
    border-bottom: 2px solid transparent;
  }
  .mobile-tabs .mn-icon { font-size: 18px; line-height: 1; }
  .mobile-tabs a.active {
    color: var(--emerald); font-weight: 600;
    border-bottom-color: var(--gold);
  }
  .mobile-tabs a.active .mn-icon { color: var(--gold-dark, #9a7b1f); }
}

/* ---------- Nav icons (all surfaces) + expand CTA ---------- */
.app-nav a { display: inline-flex; align-items: center; gap: 6px; }
.nav-ic { display: inline-flex; }
.nav-ic svg { width: 15px; height: 15px; display: block; }
.app-nav a.active .nav-ic { color: var(--gold-dark, #9a7b1f); }
.mn-icon svg { width: 19px; height: 19px; display: block; }
.mobile-nav .mn-icon, .mobile-tabs .mn-icon { display: inline-flex; }
.mobile-nav a.active .mn-icon svg, .mobile-tabs a.active .mn-icon svg {
  color: var(--gold-dark, #9a7b1f);
}

.tl-cta {
  display: block; margin-top: 8px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; font-weight: 600;
  color: var(--gold-dark, #9a7b1f);
}
.tl-card[open] .tl-cta-open { display: none; }
.tl-card:not([open]) .tl-cta-close { display: none; }

/* ---------- Calendar events (fast) vs Chapters (story) ---------- */
.ev-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  color: #4a5850; text-transform: uppercase;
}
.ev-grey { background: #b8c4bd; }
.ev-meaning {
  display: block; margin-top: 6px;
  font-size: 15px; color: #35423a;
}
.ev-card .tl-body { padding-top: 4px; }

/* Life Chapters read like a story: roomier prose */
.tl-story .tl-planet-text {
  font-size: 15.5px; line-height: 1.7; color: #35423a;
  font-family: Georgia, 'Times New Roman', serif;
  margin: 10px 0;
}
.tl-builds {
  font-size: 15px; line-height: 1.65; color: #35423a;
  font-family: Georgia, 'Times New Roman', serif;
  background: #faf7ee; border-radius: 10px; padding: 12px 16px;
  margin: 12px 0;
}
.tl-builds b { color: var(--emerald); font-style: normal; }

/* ---------- Focus scale: shape over color ---------- */
.prio-ic { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }
.transit-priority {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold-dark, #9a7b1f);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
}
.transit-priority.prio-background { color: #8a9890; }
.transit-theme { display: inline-flex; align-items: center; gap: 7px; }
.dm-svg { width: 16px; height: 16px; display: inline-block; color: var(--emerald); flex: 0 0 auto; }
.focus-legend { margin-top: 14px; }
.focus-legend summary {
  cursor: pointer; font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: #8a9890;
}
.focus-legend-row {
  display: flex; align-items: baseline; gap: 12px; margin: 10px 0;
  flex-wrap: wrap;
}
.focus-legend-desc {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: #4a5850; line-height: 1.5;
}

/* Windows area labels carry the same outline icons */
.window-area { display: inline-flex; align-items: center; gap: 7px; }
.window-area .dm-svg { color: var(--emerald); }

.ev-muted { color: #8a9890; }

/* Sunavi avatar: outline person, never an emoji */
.av-svg { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; color: var(--emerald); }
.acc-btn { display: inline-flex; align-items: center; gap: 4px; }
.ps-avatar { display: inline-flex; color: var(--emerald); }

/* ---------- Life Replay ---------- */
.rp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; padding: 12px 4px;
  background: none; border: none; border-bottom: 1px solid #eee8d8;
  cursor: pointer; text-align: left;
}
.rp-row:last-of-type { border-bottom: none; }
.rp-row:hover .window-area span, .rp-row.rp-active .window-area span {
  color: var(--gold-dark, #9a7b1f);
}
.rp-row.rp-active { background: #faf7ee; border-radius: 10px; }
.rp-scale { display: inline-flex; align-items: center; gap: 4px; }
.rp-dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.4px solid var(--gold); background: transparent;
}
.rp-dot.rp-on { background: var(--gold); }
.rp-level {
  margin-left: 10px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--gold-dark, #9a7b1f);
  white-space: nowrap;
}
#replayDetail { margin-top: 14px; }
/* Inline accordion slot: invisible until its row is tapped. */
.rp-detail:empty { display: none; }
.rp-detail {
  padding: 6px 10px 16px;
  border-bottom: 1px solid #eee8d8;
}
.rp-memory { margin-top: 18px; border-top: 1px solid #eee8d8; padding-top: 14px; }
.rp-memory textarea {
  width: 100%; margin-top: 8px; resize: vertical;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px; line-height: 1.6; color: #2f3b34;
  background: #fdfbf4; border: 1px solid #e2ddcc; border-radius: 10px;
  padding: 10px 14px;
}
.rp-memory textarea:focus { outline: none; border-color: var(--gold); }
.rp-memory .btn-plain { margin-top: 4px; }
@media (max-width: 640px) {
  .rp-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* The time-jump hint must be seen, not whispered */
.cal-jump-hint { color: #2f3b34; font-size: 13.5px; }

/* ---------- Life Windows ---------- */
.lp-lead {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: #8a9890;
}
.lp-win { padding: 10px 0; }
.lp-win.lp-past { opacity: 0.72; }
.lp-dates { font-size: 15px; color: #2f3b34; }
.lp-flags { display: inline-flex; align-items: center; gap: 10px; }
.lp-now {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #4a7c59;
  border: 1px solid #4a7c59; border-radius: 999px; padding: 2px 9px;
}
.lp-past-tag {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: #8a9890;
}
.lp-year { margin-top: 18px; }
.lp-year h3 {
  font-size: 20px; color: var(--emerald); margin: 0 0 6px;
  border-bottom: 1px solid #eee8d8; padding-bottom: 6px;
}
.lp-history-lead { margin-top: 22px; }
.lp-more { margin-top: 16px; }
.ev-flat { padding: 12px 0; }

/* ---------- Sunavi Guide ---------- */
.guide-card {
  display: flex; align-items: flex-start; gap: 18px;
  text-decoration: none; color: inherit; cursor: pointer;
}
.guide-card:hover { border-color: var(--gold); }
.guide-ic { flex: 0 0 auto; color: var(--gold-dark, #9a7b1f); }
.guide-ic svg { width: 26px; height: 26px; display: block; }
.guide-text h2 { margin: 0 0 6px; font-size: 20px; color: var(--emerald); }
.guide-text p { margin: 0 0 4px; font-size: 15px; line-height: 1.6; color: #35423a; }
.guide-best {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px !important; color: #6a7a70 !important;
}
.guide-card .ps-chevron { margin-left: auto; align-self: center; }

/* Menu symbols (hers) */
.acc-sym {
  display: inline-block; width: 20px; color: var(--gold-dark, #9a7b1f);
  font-size: 13px;
}

/* ---------- Sunavi Premium ---------- */
.plan-card { text-align: center; padding-top: 30px; }
.plan-best { border: 1px solid var(--gold); }
.plan-price { font-size: 34px; color: var(--emerald); margin: 10px 0 4px; }
.plan-btn { display: inline-block; margin: 14px 0 10px; text-decoration: none; }
.plan-paypal {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; color: #4a5850; margin: 4px 0 0;
}
.plan-paypal a { color: var(--gold-dark, #9a7b1f); font-weight: 600; text-decoration: none; }
.plan-secure { text-align: center; margin-top: 18px; }

/* Premium v2 */
.premium-intro { font-size: 15.5px; line-height: 1.65; color: #35423a; max-width: 640px; margin: 0 0 28px; }
.premium-lead { font-size: 15.5px; color: #35423a; margin: 6px 0 10px; }
.premium-list { list-style: none; margin: 0; padding: 0; }
.premium-list li { font-size: 15px; line-height: 1.9; color: #35423a; }
.plan-founding { text-align: center; margin: 10px 0 24px; font-style: italic; }

/* My Journal */
.jr-preview {
  display: block; margin-top: 6px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; font-size: 14.5px; color: #4a5850;
}
.jr-entry textarea {
  width: 100%; margin-top: 6px; resize: vertical;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px; line-height: 1.6; color: #2f3b34;
  background: #fdfbf4; border: 1px solid #e2ddcc; border-radius: 10px;
  padding: 10px 14px;
}
.jr-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.rp-memory-lead { font-style: italic; color: var(--emerald); margin: 2px 0 6px; font-size: 15px; }

/* ---------- The emerald moment (her experiment, July 2026) ----------
   The patterns card borrows the landing page's deep emerald, so the
   section reads like a signature: dark green, cream ink, gold accents. */
.card-emerald {
  background: linear-gradient(150deg, var(--emerald) 0%, var(--emerald-dark) 100%);
  border: 1px solid rgba(201, 162, 75, 0.45);
  color: var(--cream);
}
.card-emerald .section-title { color: var(--gold-light); }
.card-emerald h2, .card-emerald .pat-card h3 { color: var(--cream); }
.card-emerald .pat-line, .card-emerald .pat-more,
.card-emerald .note { color: rgba(253, 245, 233, 0.78); }
.card-emerald .pat-row { color: rgba(253, 245, 233, 0.9); }
.card-emerald .pat-row b { color: var(--gold-light); }
.card-emerald .pat-now { color: var(--gold-light); }
.card-emerald .pat-card { border-bottom-color: rgba(253, 245, 233, 0.16); }
.card-emerald .pat-remember { color: rgba(253, 245, 233, 0.65); }

.pat-more { font-size: 14px; color: #4a5850; line-height: 1.6; margin: 0 0 10px; }
.pat-remember {
  font-size: 13px; font-style: italic; color: #6b7a71;
  margin: 2px 0 4px;
}
/* The NEXT time is the headline of the card (her spec): big and unmissable. */
.pat-next {
  margin: 12px 0 4px; padding: 10px 14px; border-radius: 10px;
  font-size: 18.5px; line-height: 1.4; font-weight: 600;
  color: var(--gold-light);
  background: rgba(201, 162, 75, 0.14);
  border: 1px solid rgba(201, 162, 75, 0.4);
}

/* ---------- Page hero art: the landing compass on My Birth Chart ---------- */
.page-hero { position: relative; z-index: 0; }
.hero-chart::after {
  content: ''; position: absolute; top: -64px; right: -14px;
  width: 200px; height: 200px; pointer-events: none; z-index: -1;
  background: url('/compass-soft.png') center / contain no-repeat;
  opacity: 0.85;
}
@media (max-width: 700px) {
  .hero-chart::after { width: 140px; height: 140px; top: -18px; right: -24px; opacity: 0.4; }
}

/* ---------- The life-chapter backbone: season above the weather ---------- */
.vch-big {
  font-size: 28px; color: var(--emerald); font-weight: 600;
  margin: 6px 0 2px;
}
.vch-sub { font-size: 20px; color: var(--emerald); font-weight: 600; margin: 4px 0 2px; }
.vch-dates {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; letter-spacing: .6px; color: #6b7a71; margin-bottom: 8px;
}
.vch-line { font-size: 15px; color: #4a5850; line-height: 1.65; margin: 0 0 6px; }
.vch-divider { border-top: 1px solid #eee8d8; margin: 16px 0 12px; }

/* The season lens: the dasha reframing a transit, one quiet line. */
.season-lens {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: var(--gold-dark, #9a7b1f); line-height: 1.55;
  border-left: 2px solid rgba(201, 162, 75, 0.5);
  padding-left: 10px; margin: 6px 0 4px;
}
.season-lens b { font-weight: 600; }

/* Signs you are working WITH the period: a quiet checklist. */
.kn-signs {
  list-style: none; margin: 2px 0 8px; padding: 0;
  font-size: 14px; color: #4a5850; line-height: 1.7;
}
.kn-signs li::before { content: '✓ '; color: var(--gold-dark, #9a7b1f); font-weight: 700; }
.card-emerald .kn-signs { color: rgba(253, 245, 233, 0.85); }
.card-emerald .kn-signs li::before { color: var(--gold-light); }

/* The door from Today's short season to the deep life chapter. */
.vch-door { display: inline-block; margin-top: 10px; font-weight: 600; }

/* Secondary transits of the same life area: compact companion lines. */
.transit-also {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; color: #57655c; line-height: 1.55; margin: 2px 0;
}

/* Read more folds inside the life chapter: compact card, deep on tap. */
.vch-more > summary {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold-dark, #9a7b1f); font-weight: 600;
  cursor: pointer; list-style: none; margin: 8px 0 4px;
}
.vch-more > summary::-webkit-details-marker { display: none; }
.vch-more > summary::before { content: '▸ '; }
.vch-more[open] > summary::before { content: '▾ '; }

/* ---------- Synastry: two charts side by side ---------- */
.syn-kuta {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13.5px;
  padding: 6px 2px; border-bottom: 1px solid rgba(201, 162, 75, 0.16);
}
.syn-kuta b { color: var(--emerald); }
.syn-contact {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; line-height: 1.6; margin: 4px 0;
}
.syn-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle;
}
.syn-dot.syn-soft { background: var(--gold); }
.syn-dot.syn-hard { background: #b3462c; }
.syn-dot.syn-deep { background: var(--emerald); }

/* City suggestions as a real dropdown list under the field. */
.place-wrap { position: relative; }
.place-drop {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: #fff; border: 1px solid rgba(201, 162, 75, 0.5);
  border-top: none; border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 26px rgba(31, 51, 41, 0.14);
  max-height: 240px; overflow-y: auto; display: none;
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 14.5px;
}
.place-drop.open { display: block; }
.place-opt { padding: 10px 14px; cursor: pointer; }
.place-opt:hover, .place-opt.sel { background: rgba(201, 162, 75, 0.14); }

/* ---------- The at-a-glance layer: glance, understand, explore ---------- */
.gl-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.gl-item {
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 15px;
  color: var(--text-dark); letter-spacing: .3px;
}
.gl-item b { font-weight: 700; margin-left: 4px; }
.gl-up b { color: var(--gold-dark, #9a7b1f); }
.gl-flat b { color: #9aa8a0; }
.gl-down b { color: #b3462c; }

/* Transit areas as collapsible cards: the lead one opens by itself. */
details.transit-fold > summary { cursor: pointer; list-style: none; }
details.transit-fold > summary::-webkit-details-marker { display: none; }
.tf-chev { color: var(--gold); font-size: 12px; margin-left: 8px; transition: transform .2s ease; }
details.transit-fold[open] > summary .tf-chev { transform: rotate(180deg); }

/* Kuta blocks: score plus its meaning and comment. */
.syn-kuta-block { padding: 6px 0 10px; border-bottom: 1px solid rgba(201, 162, 75, 0.16); }
.syn-kuta-block .syn-kuta { border-bottom: none; padding-bottom: 2px; }
.syn-kuta-what {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; color: #7a8a80; margin: 0 0 3px;
}
.syn-kuta-note {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; color: #4a5850; margin: 0;
}

/* ---------- Periudhat: the signature glance ---------- */
.lpg-lead {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px 18px; margin: 2px 0 16px;
}
.lpg-dates { font-size: 19px; color: var(--emerald); font-weight: 600; }
.lp-count {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: .5px;
  color: var(--gold-dark, #9a7b1f); text-transform: uppercase;
}
.lps-strip {
  display: flex; gap: 4px; margin-top: 4px;
  border-top: 2px solid rgba(201, 162, 75, 0.35); padding-top: 10px;
}
.lps-cell { flex: 1; min-width: 0; text-align: center; }
.lps-marks {
  min-height: 20px; display: flex; gap: 3px;
  justify-content: center; align-items: flex-end;
}
.lps-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lps-strong { background: var(--gold); }
.lps-moderate { background: transparent; border: 2px solid var(--gold); width: 8px; height: 8px; }
.lps-month {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase;
  color: #8a988f; margin-top: 6px;
  overflow: hidden; text-overflow: clip; white-space: nowrap;
}
.lps-nowcell .lps-month { color: var(--gold-dark, #9a7b1f); font-weight: 700; }
@media (max-width: 560px) {
  .lps-strip .lps-cell:nth-child(n+9) { display: none; }
}


/* Periudhat's own hero: arched windows on the line of time. */
.hero-periods::after {
  content: ''; position: absolute; top: -18px; right: 0;
  width: 185px; height: 105px; z-index: -1; opacity: 0.55;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' fill='none' stroke='%23c9a24b' stroke-width='3'%3E%3Cpath d='M10 150 H230' stroke-opacity='.5'/%3E%3Cpath d='M40 150 V95 a20 20 0 0 1 40 0 V150' stroke-opacity='.55'/%3E%3Cpath d='M100 150 V75 a25 25 0 0 1 50 0 V150' stroke-width='4'/%3E%3Cpath d='M180 150 V105 a17 17 0 0 1 34 0 V150' stroke-opacity='.45'/%3E%3Ccircle cx='125' cy='40' r='3.5' fill='%23c9a24b' stroke='none'/%3E%3Ccircle cx='152' cy='27' r='2.4' fill='%23c9a24b' stroke='none' fill-opacity='.7'/%3E%3Ccircle cx='103' cy='29' r='2' fill='%23c9a24b' stroke='none' fill-opacity='.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 700px) {
  .hero-periods::after { width: 130px; height: 84px; top: -8px; right: -12px; opacity: 0.35; }
}

/* Strip months that hold a window behave like doors. */
.lps-click { cursor: pointer; }
.lps-click:hover .lps-month { color: var(--gold-dark, #9a7b1f); font-weight: 700; }
details.lp-win { transition: background 0.9s ease; }
.lp-flash { background: rgba(201, 162, 75, 0.2); border-radius: 10px; }


/* ---------- Page hero motifs: each door recognizable at a glance ---------- */
/* Sot: the sun rising over the horizon of the day. */
.hero-today::after {
  content: ''; position: absolute; top: -14px; right: 0;
  width: 210px; height: 125px; z-index: -1; opacity: 0.55; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' fill='none' stroke='%23c9a24b' stroke-width='3'%3E%3Cpath d='M10 130 H230' stroke-opacity='.5'/%3E%3Cpath d='M80 130 a40 40 0 0 1 80 0' stroke-width='4'/%3E%3Cpath d='M120 62 V42'/%3E%3Cpath d='M83 75 L69 61'/%3E%3Cpath d='M157 75 L171 61'/%3E%3Cpath d='M52 108 H32'/%3E%3Cpath d='M188 108 H208'/%3E%3Ccircle cx='196' cy='42' r='2.6' fill='%23c9a24b' stroke='none' fill-opacity='.7'/%3E%3Ccircle cx='48' cy='52' r='2' fill='%23c9a24b' stroke='none' fill-opacity='.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Kalendari: the month as a flowing river with days along it. */
.hero-calendar::after {
  content: ''; position: absolute; top: -10px; right: 0;
  width: 215px; height: 120px; z-index: -1; opacity: 0.55; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160' fill='none' stroke='%23c9a24b' stroke-width='3'%3E%3Cpath d='M10 95 C 50 55, 90 135, 130 95 S 210 55, 232 85' stroke-opacity='.65' stroke-width='3.5'/%3E%3Ccircle cx='44' cy='79' r='3.4' fill='%23c9a24b' stroke='none'/%3E%3Ccircle cx='130' cy='95' r='4.6' fill='%23c9a24b' stroke='none'/%3E%3Ccircle cx='204' cy='68' r='3' fill='none' stroke-width='2.4'/%3E%3Ccircle cx='170' cy='40' r='2.2' fill='%23c9a24b' stroke='none' fill-opacity='.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Kapitujt: steps rising through time, the current chapter lit. */
/* Kapitujt: the climbing road with its milestones and the lit door
   at the end (her mockup, redrawn in the house line-art language:
   emerald beginnings, gold arrivals, never a painting). On wide
   screens the text keeps its own lane and never runs under the art. */
@media (min-width: 701px) {
  .hero-chapters h1, .hero-chapters .subtitle { max-width: calc(100% - 360px); }
}
.hero-chapters::after {
  content: ''; position: absolute; top: -18px; right: 0;
  width: 330px; height: 120px; z-index: -1; opacity: 0.6; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 170' fill='none' stroke='%23c9a24b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 150 H86 L106 132 H176 L196 114 H266' stroke='%234a7a63' stroke-opacity='.6'/%3E%3Cpath d='M266 114 L286 96 H356 L376 78 H446 L466 62 H524' stroke-opacity='.65'/%3E%3Ccircle cx='140' cy='132' r='16' fill='%23f7f1e3' stroke='%234a7a63' stroke-opacity='.6'/%3E%3Cpath d='M140 140 V128 M140 131 C135 130 132 126 132 122 C136 122 139 125 140 129 M140 129 C145 128 148 124 148 120 C144 120 141 123 140 127' stroke='%234a7a63' stroke-width='1.8'/%3E%3Ccircle cx='230' cy='114' r='16' fill='%23f7f1e3' stroke='%234a7a63' stroke-opacity='.6'/%3E%3Cpath d='M220 121 L228 106 L233 113 L237 104 L242 121' stroke='%234a7a63' stroke-width='1.8'/%3E%3Ccircle cx='320' cy='96' r='16' fill='%23f7f1e3' stroke-opacity='.6'/%3E%3Cpath d='M320 104 V92 M320 95 C315 94 313 90 313 86 C317 86 319 89 320 93 M320 93 C325 92 327 88 327 84 C323 84 321 87 320 91 M313 104 H327' stroke-width='1.8'/%3E%3Ccircle cx='410' cy='78' r='16' fill='%23f7f1e3' stroke-opacity='.6'/%3E%3Ccircle cx='410' cy='78' r='5' fill='%23c9a24b' stroke='none'/%3E%3Cpath d='M410 69 V66 M410 87 V90 M401 78 H398 M419 78 H422 M404 72 L402 70 M416 84 L418 86 M416 72 L418 70 M404 84 L402 86' stroke-width='1.6'/%3E%3Cpath d='M570 30 V18 M550 34 L543 24 M590 34 L597 24 M537 48 L526 42 M603 48 L614 42' stroke-opacity='.5' stroke-width='1.6'/%3E%3Cpath d='M546 122 V72 Q546 42 570 42 Q594 42 594 72 V122 Z' fill='%23c9a24b' fill-opacity='.1' stroke-width='3'/%3E%3Cpath d='M570 72 L573 79 L580 82 L573 85 L570 92 L567 85 L560 82 L567 79 Z' fill='%23c9a24b' fill-opacity='.85' stroke='none'/%3E%3Cpath d='M536 132 H604 M528 143 H612' stroke-opacity='.5'/%3E%3Cpath d='M70 64 V54 M65 59 H75 M300 34 V26 M296 30 H304' stroke-opacity='.55' stroke-width='1.6'/%3E%3Ccircle cx='480' cy='128' r='2' fill='%23c9a24b' stroke='none' fill-opacity='.6'/%3E%3Ccircle cx='40' cy='110' r='1.8' fill='%23c9a24b' stroke='none' fill-opacity='.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Dashuria: a heart drawn as a constellation, with a binary star. */
.hero-love::after {
  content: ''; position: absolute; top: -12px; right: 0;
  width: 200px; height: 120px; z-index: -1; opacity: 0.55; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 170' fill='none' stroke='%23c9a24b' stroke-width='2'%3E%3Cpath d='M120 145 L62 92 L52 62 L72 42 L98 46 L120 66 L142 46 L168 42 L188 62 L178 92 Z' stroke-opacity='.4'/%3E%3Ccircle cx='120' cy='145' r='2.6' fill='%23c9a24b' stroke='none' fill-opacity='.75'/%3E%3Ccircle cx='62' cy='92' r='2.6' fill='%23c9a24b' stroke='none' fill-opacity='.7'/%3E%3Ccircle cx='52' cy='62' r='3.2' fill='%23c9a24b' stroke='none'/%3E%3Ccircle cx='72' cy='42' r='2.6' fill='%23c9a24b' stroke='none' fill-opacity='.8'/%3E%3Ccircle cx='98' cy='46' r='2.4' fill='%23c9a24b' stroke='none' fill-opacity='.7'/%3E%3Ccircle cx='120' cy='66' r='3' fill='%23c9a24b' stroke='none'/%3E%3Ccircle cx='142' cy='46' r='5' fill='%23c9a24b' stroke='none'/%3E%3Ccircle cx='152' cy='38' r='2.8' fill='%23c9a24b' stroke='none' fill-opacity='.75'/%3E%3Ccircle cx='168' cy='42' r='2.4' fill='%23c9a24b' stroke='none' fill-opacity='.7'/%3E%3Ccircle cx='188' cy='62' r='3.2' fill='%23c9a24b' stroke='none'/%3E%3Ccircle cx='178' cy='92' r='2.6' fill='%23c9a24b' stroke='none' fill-opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 700px) {
  .hero-today::after, .hero-calendar::after, .hero-chapters::after, .hero-love::after {
    width: 125px; height: 78px; top: -6px; right: -12px; opacity: 0.35;
  }
}


.jr-date {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11.5px; color: #8a988f; letter-spacing: .3px;
}

/* Relationship dimensions: one life question per row. */
.dim-row { padding: 8px 0 10px; border-bottom: 1px solid rgba(201, 162, 75, 0.16); }
.dim-head {
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 14.5px;
  color: var(--emerald); display: flex; align-items: center; gap: 2px;
}
.dim-insight {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; color: #4a5850; line-height: 1.6; margin: 3px 0 0 16px;
}
.syn-dot.dim-strong { background: var(--gold); }
.syn-dot.dim-mixed { background: transparent; border: 2px solid var(--gold); width: 8px; height: 8px; }
.syn-dot.dim-tender { background: #b3462c; }

/* Shared couple windows inside the compatibility dashboard. */
.syn-shared {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 14px; padding: 7px 0;
  border-bottom: 1px solid rgba(201, 162, 75, 0.16);
}

/* ---------- Compatibility: the answer first ---------- */
.ov-block { text-align: center; padding: 8px 0 18px; border-bottom: 1px solid rgba(201, 162, 75, 0.25); margin-bottom: 16px; }
.ov-big { font-size: 30px; color: var(--emerald); font-weight: 600; margin: 8px 0 4px; }
.ov-sub { max-width: 560px; margin: 0 auto 16px; }
.ov-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 620px; margin: 0 auto; text-align: center; }
.ov-col-t {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px; letter-spacing: 1.5px; color: var(--gold);
  font-weight: 700; margin-bottom: 6px;
}
.ov-score { font-size: 26px; color: var(--emerald); font-weight: 600; }
.guna-bar {
  height: 7px; border-radius: 4px; background: rgba(201, 162, 75, 0.18);
  overflow: hidden; margin: 8px auto 6px; max-width: 220px;
}
.guna-bar span { display: block; height: 100%; background: var(--gold); border-radius: 4px; }
.snap-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 8px;
}
.snap-cell { text-align: center; padding: 10px 6px; border: 1px solid rgba(201, 162, 75, 0.25); border-radius: 12px; }
.snap-name { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12.5px; color: var(--emerald); font-weight: 600; margin-bottom: 6px; }
.snap-dots { display: flex; justify-content: center; gap: 3px; }
.snap-word { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11.5px; margin-top: 5px; }
.snap-strong { color: var(--gold-dark, #9a7b1f); }
.snap-mixed { color: #7a8a80; }
.snap-tender { color: #b3462c; }
.dimcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.dim-card { border: 1px solid rgba(201, 162, 75, 0.3); border-radius: 12px; padding: 14px 16px; }
.dim-card .dim-head { gap: 6px; }
.dimc-strong { background: rgba(201, 162, 75, 0.06); }
.dimc-tender { background: rgba(179, 70, 44, 0.05); }
@media (max-width: 560px) { .ov-cols { grid-template-columns: 1fr; } }

/* Future years fold into quiet dropdowns on window lists. */
.year-fold > summary {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold-dark, #9a7b1f); font-weight: 700;
  cursor: pointer; list-style: none; padding: 10px 0 6px;
  border-top: 1px solid rgba(201, 162, 75, 0.2); margin-top: 8px;
}
.year-fold > summary::-webkit-details-marker { display: none; }
.year-fold > summary::before { content: '▸ '; }
.year-fold[open] > summary::before { content: '▾ '; }
.yf-count { color: #8a988f; font-weight: 400; }

/* Compatibility archetypes: named profiles from the 36-cell sieve. */
.arch-card {
  border: 1px solid rgba(201, 162, 75, 0.35); border-radius: 14px;
  padding: 18px 20px; margin: 14px 0;
}
.arch-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
}
.arch-head b { font-size: 20px; color: var(--emerald); font-weight: 600; }
.arch-card .guna-bar { margin: 8px 0 10px; max-width: none; }
.match-win {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px; color: #4a5850; padding: 4px 0;
  border-bottom: 1px solid rgba(201, 162, 75, 0.12);
}

/* Western-synastry dots on each birth window. */
.win-dots { display: inline-flex; gap: 3px; margin-left: 10px; vertical-align: middle; }

.match-d9 { margin: 0 0 8px 12px; }

/* The sky-story card rhythm. */
#skyStory .vch-line { margin: 6px 0; }
#skyStory .sky-note { margin: 5px 0; }

/* ---------- Life Chapters redesign (her spec, Aug 2026) ---------- */
.vch-hero { display: flex; align-items: center; gap: 16px; margin: 6px 0 4px; }
.vch-medal {
  flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: var(--gold);
  border: 1.5px solid rgba(201, 162, 75, 0.55);
  background: radial-gradient(circle at 35% 30%, rgba(201, 162, 75, 0.14), transparent 70%);
}
.vch-progress { margin: 10px 0 4px; }
.vch-progress-line { margin: 0 0 8px; }
.vch-builds { margin: 8px 0 10px; font-size: 14.5px; }
.vch-builds ul { margin: 6px 0 0 2px; padding: 0; list-style: none; }
.vch-builds li { padding: 2px 0 2px 18px; position: relative; }
.vch-builds li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); font-size: 11px; top: 5px; }
.jr-strip {
  display: flex; align-items: flex-start; gap: 0; margin: 10px 0 4px;
  overflow-x: auto; padding-bottom: 4px;
}
.jr-node {
  flex: 1 1 0; min-width: 64px; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: inherit; color: var(--text-dark); position: relative; padding: 0 4px;
}
.jr-node:not(:last-child)::after {
  content: ''; position: absolute; top: 21px; left: calc(50% + 24px);
  width: calc(100% - 48px); height: 1px;
  background: rgba(201, 162, 75, 0.45);
}
.jr-glyph {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--gold);
  border: 1.5px solid rgba(201, 162, 75, 0.5); background: transparent;
  transition: background .15s ease;
}
.jr-cur .jr-glyph, .jr-open .jr-glyph {
  background: rgba(201, 162, 75, 0.18); border-color: var(--gold);
}
.jr-name { font-size: 11.5px; letter-spacing: 0.4px; }
.jr-years { font-size: 10.5px; color: #9aa8a0; }
.jr-preview {
  margin-top: 8px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(201, 162, 75, 0.3); background: rgba(201, 162, 75, 0.06);
}

/* ---------- Life Story: the chapters spine and the windows-now coda. ---------- */
.ls-chapter { display: flex; gap: 12px; align-items: flex-start; padding: 0 0 16px; position: relative; }
.ls-chapter:not(:last-child)::before {
  content: ''; position: absolute; left: 17px; top: 36px; bottom: -4px;
  width: 1px; background: rgba(201, 162, 75, 0.35);
}
.ls-ch-glyph {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--gold); z-index: 1;
  border: 1.5px solid rgba(201, 162, 75, 0.5); background: var(--cream);
}
.ls-current .ls-ch-glyph { background: rgba(201, 162, 75, 0.18); border-color: var(--gold); }
.ls-past .ls-ch-glyph { opacity: 0.55; }
.ls-ch-body { flex: 1 1 auto; min-width: 0; }
.ls-ch-years {
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px;
  letter-spacing: 0.5px; color: #9aa8a0; text-transform: uppercase;
}
.ls-past .vch-line { color: #7c877f; }
.ls-current .ls-ch-years { color: var(--gold); }
.ls-win-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 0; border-bottom: 1px solid #eee8d8; flex-wrap: wrap;
}
.ls-win-row:last-child { border-bottom: none; }
.ls-win-badge { font-size: 12px; color: var(--gold); white-space: nowrap; }
.ls-win-dates { font-size: 12.5px; color: #7c877f; white-space: nowrap; }

/* ---------- Repeating Chapters (her signature redesign, Aug 2026).
   These cards live inside the emerald card, so they read light on dark. */
.cyc-intro { margin: 2px 0 10px; }
.cyc-tl { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; }
.cyc-tl-lab {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase;
  color: rgba(250, 246, 236, 0.55); white-space: nowrap;
}
/* Biggest Years and Life Story reuse this strip on plain cream cards,
   where the emerald-card light color above is invisible. */
.card:not(.card-emerald) .cyc-tl-lab { color: #9aa8a0; }
.cyc-tl-line {
  position: relative; flex: 1; height: 2px;
  background: rgba(201, 162, 75, 0.35); border-radius: 1px;
}
.cyc-dot {
  position: absolute; top: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold); transform: translateX(-50%);
}
.cyc-dot-past { opacity: 0.45; }
.by-dot { cursor: pointer; width: 10px; height: 10px; top: -4px; }
.by-dot:hover { background: var(--emerald); }
.cyc-tl-now {
  position: absolute; left: 50%; top: -20px; transform: translateX(-50%);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 9.5px; letter-spacing: 1px; color: var(--gold-light);
}
.cyc-tl-now::after {
  content: ''; position: absolute; left: 50%; top: 15px;
  width: 2px; height: 12px; background: var(--gold-light);
  transform: translateX(-50%);
}
.cycle-card {
  margin: 10px 0; padding: 12px 16px; border-radius: 12px;
  border: 1px solid rgba(201, 162, 75, 0.35);
  background: rgba(250, 246, 236, 0.05);
}
.cycle-card summary { cursor: pointer; list-style: none; }
.cycle-card summary::-webkit-details-marker { display: none; }
.cyc-head { display: flex; align-items: center; gap: 12px; }
.cyc-glyph {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--gold);
  border: 1.5px solid rgba(201, 162, 75, 0.5);
}
.cyc-titlebox { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cyc-titlebox b { font-size: 16.5px; }
.cyc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cyc-chip {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px;
  border: 1px solid rgba(201, 162, 75, 0.4); color: var(--gold-light);
}
.cycle-card .tf-chev { margin-left: auto; }
.cycle-card[open] .tf-chev { transform: rotate(180deg); }
.cycle-card .pat-row { margin-top: 8px; }
.cyc-next {
  margin: 8px 0 2px; padding: 7px 12px; border-radius: 8px;
  background: rgba(201, 162, 75, 0.13);
  border: 1px solid rgba(201, 162, 75, 0.35);
  color: var(--gold-light); font-size: 15px;
}
.cyc-body { margin-top: 10px; border-top: 1px solid rgba(201, 162, 75, 0.2); padding-top: 8px; }
.cyc-past-list { margin: 4px 0 8px 18px; padding: 0; }
.cyc-past-list li { margin: 2px 0; }

/* ---------- Timeline groups: three clearly different voices ---------- */
/* All three are folds (her call, Aug 2026); "Just Started" opens by
   default and keeps the boldest treatment — solid gold, filled dot. */
.tl-groupfold { margin: 14px 0 0; }
.tl-g-recent summary.tl-group-title {
  border: 1px solid var(--gold);
  background: rgba(201, 162, 75, 0.16); color: var(--gold);
}
.tl-g-recent summary.tl-group-title::before { content: '●'; }
.tl-groupfold summary.tl-group-title {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px; border-radius: 10px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
}
.tl-groupfold summary.tl-group-title::-webkit-details-marker { display: none; }
.tl-groupfold summary .tf-chev { margin-left: auto; }
.tl-groupfold[open] summary .tf-chev { transform: rotate(180deg); }
.tl-g-unfolding summary.tl-group-title {
  border: 1px solid rgba(201, 162, 75, 0.45);
  background: rgba(201, 162, 75, 0.08); color: var(--text-dark);
}
.tl-g-unfolding summary.tl-group-title::before { content: '◐'; color: var(--gold); }
.tl-g-background summary.tl-group-title {
  border: 1px dashed rgba(122, 138, 130, 0.5);
  background: rgba(122, 138, 130, 0.06); color: #7c8a82;
}
.tl-g-background summary.tl-group-title::before { content: '○'; color: #9aa8a0; }
.tl-groupfold .tl-group-line { margin-top: 8px; }

/* ---------- Life Progressions ---------- */
/* A slow timeline: the chapter you are inside, then the aspects
   grouped by how close they are. Emerald for what is live, muted
   for what has passed. */
.prog-chapter {
  border-left: 2px solid var(--gold);
  padding: 2px 0 2px 14px; margin-bottom: 22px;
}
.prog-span {
  font-size: 12px; letter-spacing: 0.6px; color: var(--gold);
  margin-bottom: 8px;
}
.section-title.prog-group { margin: 26px 0 12px; }
.prog-item {
  border-top: 1px solid rgba(15, 61, 46, 0.12);
  padding: 14px 0 2px;
}
.prog-item-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 10px; margin-bottom: 7px;
}
.prog-phase {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--cream); background: var(--emerald);
  padding: 3px 8px; border-radius: 999px;
}
.prog-exact { font-size: 12px; color: var(--gold); letter-spacing: 0.4px; }
.prog-felt, .prog-timing { font-size: 14px; }
.prog-felt b { color: var(--emerald); font-weight: 400; }
.prog-timing { color: var(--emerald); }
.prog-caution {
  font-size: 12px; color: #7c8a82; font-style: italic; margin-top: 6px;
}
.prog-tech { margin: 8px 0 4px; }
.prog-tech summary {
  cursor: pointer; list-style: none;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #9aa8a0;
}
.prog-tech summary::-webkit-details-marker { display: none; }
.prog-tech p { font-size: 13px; color: #7c8a82; margin-top: 5px; }
.prog-method { margin-top: 20px; }
.prog-framing {
  font-size: 13px; color: #7c8a82; font-style: italic;
  margin-bottom: 18px;
}

/* Leaving for good. Set apart from the rest of the menu by a rule and
   a muted brick that reads as serious without shouting: it sits in the
   cream and emerald palette rather than fighting it. */
.acc-drop .acc-drop-danger {
  border-top: 1px solid #e6dcc4;
  margin-top: 4px; padding-top: 10px;
  color: #8c4a3f;
}
.acc-drop .acc-drop-danger .acc-sym { color: #8c4a3f; }
.acc-drop a.acc-drop-danger:hover { background: #f7ece8; color: #7a3f35; }

/* The follow-up questions, shown only to someone the two words do not
   fit. Indented and quiet: they are a continuation of the question
   above, not three new demands. */
.gender-other {
  display: flex; flex-direction: column; gap: 6px;
  border-left: 2px solid var(--cream-dark);
  padding-left: 12px;
  /* Spanning the row keeps these directly under the question they
     follow from. Left in a single grid cell they landed in whatever
     column came next, reading as three unrelated new questions. */
  grid-column: 1 / -1;
}
.gender-other[hidden] { display: none; }
.gender-other label { margin-top: 4px; }
.form-note {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11.5px; color: #7c8a82; line-height: 1.45; margin: 2px 0 0;
}

/* A page of plain reading. Narrower than the app so the lines stay
   short, and quiet enough that nothing competes with the words. */
.legal { max-width: 680px; padding-bottom: 80px; }
.legal h1 { margin-bottom: 10px; }
.legal h2 {
  font-size: 19px; color: var(--emerald); font-weight: 400;
  margin: 34px 0 10px;
}
.legal p, .legal li {
  font-size: 16px; color: #2f3b34; line-height: 1.65;
}
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.legal b { color: var(--emerald); font-weight: 400; }
.legal a { color: var(--gold-dark, #9a7b1f); }
.legal-lead { font-size: 17.5px; }
.legal-date {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; letter-spacing: 0.6px; color: #7c8a82; margin-bottom: 6px;
}
.legal-foot {
  margin-top: 40px; padding-top: 18px;
  border-top: 1px solid var(--cream-dark);
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px;
}
.footer-legal {
  margin-top: 18px;
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px;
}
.footer-legal a { color: rgba(253, 245, 233, 0.6); text-decoration: none; }
.footer-legal a:hover { color: rgba(253, 245, 233, 0.9); }