/* ==========================================================================
   YogiAstroWorld design system
   Hand-written CSS. No framework, no build step, no dependencies.
   ========================================================================== */

:root {
  /* Brand — green carried over from her existing logo.
     --green is decorative ONLY: white text on it measures 2.85:1. Anything
     carrying text uses --green-deep, which clears 4.5:1 both ways. */
  --green:        #1FAF63;
  --green-deep:   #0E7340;

  /* Deep green is now a TEXT colour only. Surfaces stay light. */
  --forest:       #14503A;
  --forest-soft:  #1C6446;

  /* Light, warm surfaces */
  --cream:        #FDFBF7;
  --cream-2:      #F7F2E7;
  --mint:         #F1F9F4;
  --paper:        #FFFFFF;

  /* Golds — pale washes for surfaces, the deeper one for small accents only */
  --gold:         #B8901E;   /* decorative only — too pale for text on cream */
  --gold-ink:     #6E5410;   /* the readable gold, for eyebrow and accent TEXT */
  --gold-soft:    #E7D29A;
  --gold-pale:    #FBF3DE;
  --gold-wash:    #FDF8EC;

  --ink:          #23302A;
  --ink-2:        #4E5F56;
  --ink-3:        #6B7A72;   /* darkened from #7E8D85: small print was under 4.5:1 */
  --line:         #E8E1D2;

  /* Gradients, defined once so every surface stays in the same family */
  --grad-page:    linear-gradient(180deg, #FDFBF7 0%, #F3F9F5 42%, #FDF8EC 100%);
  --grad-hero:    linear-gradient(145deg, #EFF8F2 0%, #FDFBF7 46%, #FBF2DD 100%);
  --grad-accent:  linear-gradient(135deg, #F1F9F4 0%, #FBF3DE 100%);
  --grad-footer:  linear-gradient(180deg, #F7F2E7 0%, #EFF7F1 100%);
  --grad-gold:    linear-gradient(135deg, #FBF3DE 0%, #F6EAD0 100%);

  --radius:       14px;
  --radius-lg:    22px;
  --radius-pill:  999px;

  --shadow-sm: 0 1px 2px rgba(14,53,36,.06), 0 2px 8px rgba(14,53,36,.05);
  --shadow:    0 2px 6px rgba(14,53,36,.07), 0 12px 32px rgba(14,53,36,.08);
  --shadow-lg: 0 4px 12px rgba(14,53,36,.09), 0 26px 60px rgba(14,53,36,.13);

  --serif: Georgia, 'Cormorant Garamond', 'EB Garamond', 'Times New Roman', serif;
  --sans:  'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1140px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

/* The `hidden` attribute must actually hide.
 *
 * The browser's own rule is [hidden] { display: none }, but that lives in the
 * user-agent stylesheet, so ANY author rule setting `display` on the same element
 * beats it. `.picker { display: grid }` and `.btn { display: inline-flex }` both
 * did exactly that — the image picker rendered over the sign-in screen and the
 * Sign out button appeared to signed-out visitors.
 *
 * !important is deliberate here: if markup says an element is hidden, no layout
 * rule should be able to override it. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--grad-page);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.18; margin: 0 0 .5em; color: var(--forest); }
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); letter-spacing: -.01em; }
h3 { font-size: 1.22rem; }
p  { margin: 0 0 1em; }
a  { color: var(--green-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, svg { max-width: 100%; }

.wrap { width: min(var(--wrap), 100% - 2.6rem); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - 2.6rem); margin-inline: auto; }

section { padding: clamp(3.2rem, 7vw, 6rem) 0; }
.section-tight { padding: clamp(2.2rem, 4vw, 3.4rem) 0; }

/* --- Eyebrow / small caps label ------------------------------------------ */
.eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink); margin: 0 0 .85rem; display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--gold); }
.eyebrow.centered { justify-content: center; }

.lede { font-size: 1.12rem; color: var(--ink-2); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.6rem; border-radius: var(--radius-pill);
  font-family: var(--sans); font-size: .97rem; font-weight: 600;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .18s, color .18s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green-deep); color: #fff; box-shadow: 0 4px 14px rgba(14,115,64,.28); }
.btn-primary:hover { background: #0A5C33; box-shadow: 0 8px 24px rgba(14,115,64,.36); transform: translateY(-2px); }
.btn-ghost { border-color: var(--line); color: var(--forest); background: transparent; }
.btn-ghost:hover { border-color: var(--green); color: var(--green-deep); background: rgba(31,175,99,.06); }
.btn-light { background: #fff; color: var(--forest); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-lg { padding: 1.05rem 2.1rem; font-size: 1.03rem; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(253,251,247,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 4px 20px rgba(14,53,36,.06); }
.header-inner { display: flex; align-items: center; gap: 1.4rem; padding: .7rem 0; }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 46px; width: auto; display: block; }

.nav { margin-left: auto; display: flex; align-items: center; gap: .12rem; }
.nav a {
  padding: .5rem .45rem; border-radius: var(--radius-pill); color: var(--ink-2);
  text-decoration: none; font-size: .85rem; font-weight: 500; transition: color .18s, background .18s;
  /* Without this a label breaks INSIDE itself — "How it / works" on two lines —
     and the header grows to 91px of stacked half-phrases. That is what eight
     links did to it. The row may not wrap either; below the breakpoint the
     menu button takes over instead. */
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--green-deep); background: rgba(31,175,99,.09); }
.header-cta { margin-left: .5rem; }
/* The CTA is an <a> inside .nav, so `.nav a` (0,1,1) beats `.btn-primary` (0,1,0)
   and would paint the label ink-grey on dark green — 1.15:1, invisible. */
.nav a.btn-primary, .nav a.btn-primary:hover { color: #fff; background: var(--green-deep); }
.nav a.btn-primary:hover { background: #0A5C33; }

.nav-toggle {
  display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line);
  background: #fff; border-radius: 12px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 19px; height: 1.8px; background: var(--forest); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 1.8px; background: var(--forest);
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* SIX links plus the call button. About and FAQs moved to the footer on
   13 Aug 2026, which is what made the row comfortable again — the Horoscope tab
   had pushed it to eight and it no longer fitted on one line at any size.

   Measured in a browser, not guessed: the row wants 736px, the brand takes
   184px, so a one-line header needs ~984px of viewport. The breakpoint sits at
   1040 rather than right on 984, because a margin of a few pixels is not a
   margin — it is luck, and a font that renders a shade wider on her machine
   would wrap the header again. A wrapped header reads as broken.

   There is deliberately NO tighten-in-a-narrow-band rule. There used to be one,
   and it made the header SMALLER at 1200px than at 1920px, because above the
   band the larger base sizes came back — leaving a wide screen with less slack
   than a narrow one. The tighter numbers are simply the base now. */
@media (max-width: 1040px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 64px 0 auto; margin: 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--cream); border-bottom: 1px solid var(--line); padding: .8rem 1.3rem 1.4rem;
    box-shadow: var(--shadow); transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: .8rem .4rem; border-radius: 10px; font-size: 1.02rem; }
  .header-cta { margin: .7rem 0 0; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; background: var(--grad-hero);
  border-bottom: 1px solid var(--line);
  padding: clamp(3.2rem,7vw,5.5rem) 0 clamp(3.5rem,8vw,6rem);
}
.hero h1 { color: var(--forest); }
.hero p { color: var(--ink-2); }
.hero .eyebrow { color: var(--gold-ink); }
.hero .eyebrow::before { background: var(--gold); }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero-note { margin-top: 1.15rem; font-size: .9rem; color: var(--ink-3); }

/* Decorative sky. Pointer-events off so it never blocks a click. */
.hero-sky { position: absolute; inset: 0; pointer-events: none; opacity: .55; color: var(--gold-soft); }

/* Soft golden glow behind the hero card */
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-halo {
  position: absolute; width: 122%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(231,210,154,.55) 0%, rgba(231,210,154,0) 68%);
}
.hero-card {
  position: relative; background: rgba(255,255,255,.78); border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg); padding: 1.7rem; width: 100%;
  backdrop-filter: blur(8px); box-shadow: var(--shadow);
}
.hero-card h3, .hero-card .card-h { color: var(--forest); font-size: 1.05rem; margin-bottom: 1.1rem; }
.step-row { display: flex; gap: .95rem; align-items: flex-start; padding: .7rem 0; }
.step-row + .step-row { border-top: 1px solid var(--line); }
.step-num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-pale); border: 1px solid var(--gold-soft);
  font-size: .85rem; font-weight: 700; font-family: var(--sans);
}
.step-row strong { display: block; color: var(--forest); font-size: .97rem; }
.step-row span { color: var(--ink-2); font-size: .88rem; }
/* Must out-specify `.step-row span` above, which would otherwise repaint the
   numerals ink-grey on a green disc — 2.4:1 and effectively unreadable. */
.step-row span.step-num { color: var(--forest); font-size: .85rem; }

/* --- Trust strip --------------------------------------------------------- */
.trust {
  background: var(--grad-gold); color: var(--forest);
  border-bottom: 1px solid var(--gold-soft); padding: 1.1rem 0;
}
.trust-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.6rem; font-size: .9rem; }
.trust-item { display: flex; align-items: center; gap: .5rem; }
.trust-item svg { flex: 0 0 auto; color: var(--gold); }

/* --- Cards --------------------------------------------------------------- */
.grid { display: grid; gap: 1.2rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow-sm);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d3ccb9; }
.card h3, .card .sign-h { margin-bottom: .4rem; }
/* Sign cards read as h2 for the outline, at the size an h3 had. */
.sign-h, .card-h, .step-h, .footer-h { font-size: 1.22rem; letter-spacing: 0; }
.card p { color: var(--ink-2); font-size: .95rem; margin-bottom: 0; }

.card-icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(31,175,99,.15), rgba(201,162,39,.14));
  color: var(--green-deep); margin-bottom: 1rem;
}

/* Service card links */
a.card { text-decoration: none; display: block; color: inherit; }
a.card .more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem;
  color: var(--green-deep); font-weight: 600; font-size: .89rem; }
a.card .more svg { transition: transform .22s var(--ease); }
a.card:hover .more svg { transform: translateX(4px); }

/* --- Report / price cards ------------------------------------------------ */
.report-card { display: flex; flex-direction: column; }
.report-card .price-row { display: flex; align-items: baseline; gap: .6rem; margin: .9rem 0 .2rem; }
.price-now { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; color: var(--forest); }
.price-was { color: var(--ink-3); text-decoration: line-through; font-size: .95rem; }
.price-save {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(31,175,99,.13); color: var(--green-deep); padding: .22rem .5rem; border-radius: 6px;
}
.report-meta { font-size: .84rem; color: var(--ink-3); display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.report-card .btn { margin-top: auto; width: 100%; }

.badge-popular {
  position: absolute; top: -11px; right: 1.2rem; background: var(--gold); color: #3a2c00;
  font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: var(--radius-pill);
}
.report-card { position: relative; }

/* --- Report detail layout ------------------------------------------------ */
.detail-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 3rem; align-items: start; }
.detail-buy { position: sticky; top: 92px; }
@media (max-width: 880px) {
  .detail-grid { grid-template-columns: 1fr; gap: 2rem; }
  .detail-buy { position: static; }
}
.spec { margin: 0 0 1.4rem; font-size: .93rem; }
.spec > div { display: flex; justify-content: space-between; padding: .5rem 0; border-top: 1px solid var(--line); }
.spec > div:last-child { border-bottom: 1px solid var(--line); }
.spec dt { color: var(--ink-3); }
.spec dd { margin: 0; font-weight: 600; }

/* --- Portrait placeholder / About ---------------------------------------- */
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; }
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; gap: 2rem; } }
.portrait {
  aspect-ratio: 4/5; border-radius: var(--radius-lg); background: var(--cream-2);
  border: 2px dashed var(--line); display: grid; place-items: center; text-align: center;
  padding: 1.5rem; color: var(--ink-3); font-size: .9rem;
}
.portrait.has-photo { border: none; padding: 0; overflow: hidden; box-shadow: var(--shadow); background: none; }
.portrait img { border-radius: var(--radius-lg); width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Forms --------------------------------------------------------------- */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; color: var(--forest); }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .9rem; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: .97rem; color: var(--ink); background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,175,99,.15);
}
.field .hint { font-size: .84rem; color: var(--ink-3); margin: .3rem 0 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.notice {
  background: rgba(201,162,39,.1); border: 1px solid var(--gold-soft); border-radius: 10px;
  padding: .9rem 1.1rem; font-size: .9rem; color: #6b5510; margin-bottom: 1.4rem;
}

/* --- Steps --------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); }
.step {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2.1rem 1.4rem 1.4rem; text-align: center;
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green); color: #fff; font-weight: 700; font-family: var(--sans); font-size: .96rem;
  box-shadow: 0 4px 12px rgba(31,175,99,.34);
}
.step h3, .step .step-h { font-size: 1.04rem; margin-bottom: .3rem; }
.step p { font-size: .9rem; color: var(--ink-2); margin: 0; }

/* --- Testimonials -------------------------------------------------------- */
.quote {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem; box-shadow: var(--shadow-sm);
}
.quote p { font-family: var(--serif); font-size: 1.06rem; font-style: italic; color: var(--forest); }
.quote footer { font-size: .87rem; color: var(--ink-3); font-style: normal; }
.stars { color: var(--gold); letter-spacing: .12em; font-size: .95rem; margin-bottom: .5rem; }

/* --- Accordion ----------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; padding: 1.15rem .2rem; font-weight: 600;
  color: var(--forest); display: flex; align-items: center; gap: 1rem; font-size: 1.02rem;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto; width: 11px; height: 11px;
  border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .25s var(--ease);
}
.acc details[open] summary::after { transform: rotate(-135deg) translate(-3px,-3px); }
.acc .acc-body { padding: 0 .2rem 1.25rem; color: var(--ink-2); font-size: .96rem; }

/* --- Panels / CTA -------------------------------------------------------- */
.panel-accent {
  background: var(--grad-accent); border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg); padding: clamp(2.2rem, 5vw, 3.6rem);
  position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
}
.panel-accent h2 { color: var(--forest); } .panel-accent p { color: var(--ink-2); }

.panel-cream { background: linear-gradient(180deg, #FBF7EE 0%, #F3F9F5 100%); }
.panel-gold  { background: var(--grad-gold); border-block: 1px solid var(--gold-soft); }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--grad-footer); color: var(--ink-2);
  border-top: 1px solid var(--gold-soft); padding: 3.4rem 0 2rem; margin-top: 0;
}
.site-footer h4, .site-footer .footer-h { color: var(--forest); font-family: var(--sans); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: var(--ink-2); text-decoration: none; font-size: .93rem; }
.site-footer a:hover { color: var(--green-deep); text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.2rem; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-bottom {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; justify-content: space-between;
  font-size: .84rem; color: var(--ink-2);
}

/* --- Scroll reveal -------------------------------------------------------
   Gated behind .js so the content is visible by default. If scripting fails,
   the observer never fires, or the page is rendered somewhere unusual, the
   page still reads normally instead of going blank.                        */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* --- Floating contact dock ---------------------------------------------- */
.dock { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column-reverse; gap: .7rem; align-items: flex-end; }
.dock-btn {
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: var(--green-deep);
  box-shadow: 0 6px 20px rgba(14,53,36,.28); transition: transform .22s var(--ease);
}
.dock-btn:hover { transform: scale(1.07); }
.dock-menu { display: grid; gap: .55rem; opacity: 0; transform: translateY(10px) scale(.96);
  pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); transform-origin: bottom right; }
.dock-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.dock-item {
  display: flex; align-items: center; gap: .6rem; background: #fff; color: var(--forest);
  padding: .6rem .95rem .6rem .7rem; border-radius: var(--radius-pill); text-decoration: none;
  font-size: .88rem; font-weight: 600; box-shadow: var(--shadow); white-space: nowrap;
  border: 1px solid var(--line);
}
.dock-item:hover { border-color: var(--green); }
.dock-item i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- zodiac signs --------------------------------------------------------- */
.sign-card { text-align: center; }
/* Holds a drawn constellation badge. currentColor inside the SVG picks up the
   gold set here, which is why the badge is inlined rather than an <img>. */
.sign-glyph { color: var(--gold); display: block; margin: 0 auto .5rem; width: 58px; }
.sign-glyph svg { width: 100%; height: auto; display: block; }
.sign-glyph.big { width: 78px; margin: 0; }
.sign-sanskrit { font-size: .84rem; color: var(--ink-3); margin: 0 0 .6rem; }
.sign-card .more { justify-content: center; }
.sign-head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.6rem; }
.sign-head h1 { margin: 0 0 .2rem; }
.sign-nav { display: flex; justify-content: space-between; margin-top: 2.4rem;
  border-top: 1px solid var(--line); padding-top: 1.2rem; font-size: .94rem; }

/* --- zodiac transits + closing note --------------------------------------- */
.transit-list { display: grid; gap: .6rem; margin-top: 1.4rem; }
.transit { display: flex; gap: 1rem; align-items: baseline; background: #fff;
  border: 1px solid var(--line); border-left: 3px solid var(--gold-soft);
  border-radius: 10px; padding: .8rem 1.1rem; }
.transit strong { flex: 0 0 5.5rem; color: var(--forest); font-family: var(--serif); font-size: 1.05rem; }
.transit span { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 560px) { .transit { flex-direction: column; gap: .2rem; } }
.closing-note { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-size: .93rem; color: var(--ink-3); font-style: italic; }

/* Her portrait on the home page. Round, gold-ringed, and modest in size:
   it supports the claim that a person writes these, it is not the hero. */
.person-portrait {
  width: 156px; height: 156px; border-radius: 50%; object-fit: cover;
  margin: 1.6rem auto 0; display: block;
  border: 3px solid var(--gold-soft);
  box-shadow: 0 6px 22px rgba(0,0,0,.10);
}
@media (max-width: 640px) { .person-portrait { width: 124px; height: 124px; } }

/* The free-call button. WhatsApp green rather than the site green: people
   recognise it instantly, and a button that is obviously WhatsApp gets pressed
   far more than one that only says so in words. */
.btn-wa {
  background: #25d366; border-color: #25d366; color: #06331a;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
}
.btn-wa:hover { background: #1ebe5b; border-color: #1ebe5b; }
.btn-wa svg { flex: none; }

/* --- a mark at the head of each 2027 section ------------------------------ *
 * Her note: "Picture on the 2027 prediction page would enhance its
 * readability." These pages are a long column of prose; a small constellation
 * at each section head breaks the wall and shows where the subject changes.
 * Decorative only, so it is aria-hidden and never announced.
 * -------------------------------------------------------------------------- */
.sign-section { position: relative; padding-top: .4rem; }
.sign-section + .sign-section { margin-top: 2.6rem; border-top: 1px solid var(--gold-soft); padding-top: 2.2rem; }
.section-mark { width: 40px; color: var(--gold); opacity: .75; margin-bottom: .5rem; }
.section-mark svg { width: 100%; height: auto; display: block; }

/* --- the seven sciences, in her words ------------------------------------ *
 * Long-form prose from data/sciences.json. Set wider-spaced and slightly
 * larger than body copy, because these are the paragraphs a visitor reads to
 * decide whether she knows what she is talking about.
 * -------------------------------------------------------------------------- */
.science-block { padding: 2rem 0; border-bottom: 1px solid var(--gold-soft); }
.science-block:last-of-type { border-bottom: 0; }
.science-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.science-head h2 { margin: 0; font-size: 1.45rem; }
.science-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: rgba(201,162,39,.14); color: var(--gold); }
.science-block p { font-size: 1.02rem; line-height: 1.75; margin: 0 0 1rem; }
.science-cta { margin-top: 1.1rem; }
.science-why { margin-top: 2.4rem; padding: 1.8rem;
  background: linear-gradient(180deg, #fdf8ea, #faf3e0);
  border: 1px solid var(--gold-soft); border-radius: 14px; }
.science-why h2 { margin-top: 0; font-size: 1.35rem; }
.science-why p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
 * Monthly horoscope. Her writing comes first and the astrology is tucked into
 * a <details> below it — a reader who wants the chart opens it, and a reader
 * who wants the reading is not made to scroll past a table of longitudes to
 * find it.
 * -------------------------------------------------------------------------- */
.horo-card { display: flex; flex-direction: column; }
.horo-western { font-size: .8rem; color: var(--ink-3); font-weight: 400; }
.horo-body { flex: 1; }
.horo-body p { margin: 0 0 .7rem; }
.horo-details { margin-top: .6rem; border-top: 1px solid var(--line, #e6e0d2); padding-top: .6rem; }
.horo-details summary { cursor: pointer; font-size: .86rem; color: var(--ink-2); }
.horo-details summary:hover { color: var(--green-deep, #14503a); }
.horo-chart { max-width: 260px; margin: .8rem auto; }
.horo-chart svg { width: 100%; height: auto; display: block; background: #fff;
  border: 1px solid var(--line, #e6e0d2); border-radius: 6px; }
.horo-chart figcaption { font-size: .74rem; color: var(--ink-3); text-align: center;
  margin-top: .25rem; }
.horo-scroll { overflow-x: auto; }
.horo-table { border-collapse: collapse; width: 100%; font-size: .82rem; }
.horo-table th, .horo-table td { border-bottom: 1px solid var(--line, #e6e0d2);
  padding: .3rem .5rem; text-align: left; }
.horo-table th { background: var(--cream, #faf6ec); font-weight: 600; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.horo-method { font-size: .78rem; color: var(--ink-3); margin: .5rem 0 0; }