/* NOUS Astrology API — theme: deep indigo accent over a Milky Way hero.
   One accent for the unified astrology product (western + vedic +
   astrocartography + transits). Palette: near-black base + the galaxy's
   own warm-white/amber star tones as accents; the accent stays a restrained
   indigo so it doesn't fight the imagery. */
:root {
  --accent: #8E7CC9;            /* lifted indigo — readable on the dark galaxy hero */
  --accent-soft: rgba(142, 124, 201, 0.16);
  --star-amber: #D8B457;        /* warm star tone, used sparingly for accents */
}

/* ---- Hero: let the galaxy speak. Instead of burying the copy on top of the
   image under a heavy scrim, the Milky Way gets its own clean, full-width
   showcase band, and the headline/copy sit on solid night directly below it.
   The picture is seen; the words don't fight it. Optimized web images (~1600px)
   are used on the page; full-res originals stay in assets/. ---- */
.hero {
  background: var(--night);
  padding: 0 0 64px;            /* image sits flush at top; copy padded below */
}
/* the image band — flows in the layout (not behind the text) and fades only at
   its own top and bottom edges, so the galaxy centre stays fully visible */
.hero .motif {
  position: relative;
  inset: auto;
  height: clamp(300px, 50vh, 520px);
  opacity: 1;
  background-image:
    linear-gradient(180deg, rgba(5,4,10,0.55) 0%, rgba(5,4,10,0.10) 18%, rgba(5,4,10,0) 44%, rgba(5,4,10,0.45) 80%, var(--night) 100%),
    image-set(url("./assets/hero-galaxy-web.webp") type("image/webp"),
              url("./assets/hero-galaxy-web.jpg") type("image/jpeg"));
  background-image:
    linear-gradient(180deg, rgba(5,4,10,0.55) 0%, rgba(5,4,10,0.10) 18%, rgba(5,4,10,0) 44%, rgba(5,4,10,0.45) 80%, var(--night) 100%),
    url("./assets/hero-galaxy-web.jpg");   /* fallback for no image-set support */
  background-size: cover, cover;
  background-position: center 38%, center 38%;
  background-repeat: no-repeat, no-repeat;
}
.hero::after { content: none; }   /* no full-hero scrim — the band fades itself */
.hero .wrap { position: relative; z-index: 2; padding-top: 44px; }
.hero .kicker { color: var(--star-amber); }
/* pull the stats/CTA rhythm in a touch now that copy is on solid night */
.hero .stats { margin-top: 32px; }
@media (max-width: 700px) {
  .hero .motif { height: clamp(220px, 40vh, 320px); }
  .hero .wrap { padding-top: 32px; }
}

/* Brand lockup with the night logo */
header.site .brand img.logo-mark,
footer .footer-brand img.logo-mark { height: 26px; width: auto; display: inline-block; }
header.site .brand { gap: 10px; }

/* Discipline switcher above the playground */
.disc-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.disc-btn {
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.disc-btn:hover { border-color: var(--accent); }
.disc-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Discipline sub-headings in the "All verbs" grid */
.verb-group-title {
  font-size: 18px;
  margin: 34px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.verb-group-title:first-of-type { margin-top: 0; }

/* ---- Capability grids (What's in every chart, Relocation suite) ---- */
.cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.cap-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; }
.cap-card h4 { font-size: 15px; margin-bottom: 10px; color: var(--ink); }
.cap-card ul { list-style: none; padding: 0; margin: 0; font-size: 13.5px; color: var(--soft); }
.cap-card li { padding: 5px 0; border-bottom: 1px solid var(--rule); }
.cap-card li:last-child { border-bottom: none; }
.cap-card li b { color: var(--ink); font-weight: 600; }
.cap-note { margin-top: 20px; font-size: 13.5px; color: var(--soft); }

/* ---- The engine / dark authority block ---- */
.engine { background: var(--night); color: var(--paper); }
.engine .section-head h2 { color: var(--paper); }
.engine .section-head p { color: rgba(242,241,238,0.72); }
.engine .kicker { color: var(--star-amber); }
.engine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.engine-card { background: rgba(242,241,238,0.04); border: 1px solid rgba(242,241,238,0.12); border-radius: var(--radius); padding: 24px; }
.engine-card h4 { color: var(--paper); font-size: 16px; margin-bottom: 8px; }
.engine-card p { color: rgba(242,241,238,0.66); font-size: 14px; margin: 0; }
.engine-card .tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; color: var(--star-amber); margin-bottom: 12px; letter-spacing: 0.04em; }

/* ---- Section divider band using the Carina render ---- */
.galaxy-band {
  position: relative; color: var(--paper);
  background: #05040A;
}
.galaxy-band .band-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(5,4,10,0.86), rgba(5,4,10,0.72)),
    url("./assets/galaxy-carina-web.jpg");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.galaxy-band .wrap { position: relative; z-index: 1; }
.galaxy-band .section-head h2 { color: var(--paper); }
.galaxy-band .section-head p { color: rgba(242,241,238,0.75); }
.galaxy-band .kicker { color: var(--star-amber); }

/* ---- "Five vendors → one" diagram ---- */
.vendor-map { display: grid; grid-template-columns: 1.1fr auto 0.9fr; gap: 22px; align-items: center; margin-top: 8px; }
@media (max-width: 760px) { .vendor-map { grid-template-columns: 1fr; text-align: center; } }
.vendor-col .vendor-chip {
  display: block; font-size: 13.5px; padding: 10px 14px; margin-bottom: 10px;
  border: 1px solid rgba(242,241,238,0.16); border-radius: var(--radius-sm);
  background: rgba(242,241,238,0.03); color: rgba(242,241,238,0.78);
}
.vendor-arrow { font-size: 26px; color: var(--star-amber); text-align: center; font-weight: 700; }
.vendor-one {
  border: 1px solid var(--accent); border-radius: var(--radius); padding: 22px;
  background: rgba(142,124,201,0.10);
}
.vendor-one h4 { color: var(--paper); font-size: 17px; margin-bottom: 6px; }
.vendor-one p { color: rgba(242,241,238,0.72); font-size: 13.5px; margin: 0; }
.vendor-one .license-note {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(142,124,201,0.35);
  color: rgba(242,241,238,0.82); font-size: 13px;
}
.vendor-one .license-note b { color: var(--star-amber); }

/* ---- For developers ---- */
.dev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.dev-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; }
.dev-card h4 { font-size: 15px; margin-bottom: 8px; }
.dev-card p { font-size: 13.5px; margin: 0; }
.dev-links { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; font-size: 13.5px; }
.dev-links a { color: var(--accent); font-weight: 600; text-decoration: none; }
.dev-links .soon { color: var(--faint); font-weight: 500; }

/* ---- Pricing: 5-tier scroller ---- */
.pricing-grid.five { grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1080px) { .pricing-grid.five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pricing-grid.five { grid-template-columns: 1fr; } }
.price-card .acg-note { font-size: 11.5px; color: var(--faint); margin-top: -8px; margin-bottom: 14px; }
.price-card .quota { font-size: 12.5px; color: var(--soft); margin-bottom: 12px; }

/* ---- About / Contact ---- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } }

/* Discipline switcher above the playground */
.disc-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.disc-btn {
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.disc-btn:hover { border-color: var(--accent); }
.disc-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Discipline sub-headings in the "All verbs" grid */
.verb-group-title {
  font-size: 18px;
  margin: 34px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.verb-group-title:first-of-type { margin-top: 0; }