/* ==========================================================================
   majiai.co marketing pages: the maji layer on top of the majaco design system.

   css/majaco-design-system.css is generated from majaco-co/majaco-website
   (scripts/sync-design-system.sh) and gives the shared fonts, type scale, spacing,
   buttons, cards and motion. This file only sets maji's own look:
   - the whole page sits on majaco dark green (class="theme-dark theme-maji" on <html>)
   - maji pink (--color-maji, #FF3D8B, Sam 19 Oct 2026) leads every accent
   - one solid pink band per page for contrast (.band-maji)
   Used only by index.html and about-maji.html. Client portals and tools keep
   css/variables.css and css/style.css, which this file does not touch.
   ========================================================================== */

html.theme-maji, html.theme-maji body { background: var(--color-dark-green); color: var(--text); }

/* ---- Wordmark: "maji" with "by majaco" (text, not a logo file) ---- */
.maji-wordmark { display: inline-flex; align-items: baseline; gap: var(--space-2); color: var(--color-white); text-decoration: none; line-height: 1; }
.maji-wordmark__name { font-size: 1.75rem; font-weight: var(--weight-regular); letter-spacing: -0.03em; }
.maji-wordmark__name::after { content: ""; display: inline-block; width: 0.32em; height: 0.32em; margin-left: 0.06em; border-radius: 50%; background: var(--color-maji); }
.maji-wordmark__by { font-size: var(--text-small); color: var(--text-muted); letter-spacing: 0.02em; }
.maji-wordmark:hover .maji-wordmark__by { color: var(--color-maji); }

/* ---- Hero: big type on dark green, pink accents ---- */
.maji-hero { padding-block: clamp(5rem, 12vw, 9rem) var(--space-section); position: relative; overflow: hidden; }
.maji-hero__title { font-size: var(--text-display); max-width: 14ch; }
.maji-hero__lead { max-width: 40rem; margin-top: var(--space-6); color: var(--text-soft); }
.maji-hero__ring {
  position: absolute; z-index: 0; pointer-events: none;
  right: clamp(-14rem, -10vw, -4rem); top: 50%; translate: 0 -50%;
  width: clamp(18rem, 42vw, 34rem); aspect-ratio: 1; border-radius: 50%;
  border: clamp(2.5rem, 6vw, 5rem) solid color-mix(in srgb, var(--color-maji) 22%, transparent);
}
.maji-hero > .container { position: relative; z-index: 1; }

/* ---- Solid pink band: white text on the deeper maji pink (4.7:1; Sam, 19 Oct 2026) ---- */
.band-maji {
  --bg:                var(--color-maji-deep);
  --bg-alt:            color-mix(in srgb, var(--color-maji-deep) 88%, var(--color-dark-green));
  --surface:           color-mix(in srgb, var(--color-maji-deep) 90%, var(--color-white));
  --text:              var(--color-white);
  --text-soft:         var(--color-white);
  --text-muted:        var(--color-white);
  --heading:           var(--color-white);
  --link:              var(--color-white);
  --accent:            var(--color-white);
  --line:              color-mix(in srgb, var(--color-white) 30%, var(--color-maji-deep));
  --line-strong:       color-mix(in srgb, var(--color-white) 55%, var(--color-maji-deep));
  --focus-ring:        var(--color-white);
  --btn-primary-bg:    var(--color-dark-green);
  --btn-primary-text:  var(--color-white);
  --btn-primary-hover: color-mix(in srgb, var(--color-dark-green) 85%, var(--color-maji-deep));
  --stat:              var(--color-white);
  background: var(--bg);
  color: var(--text);
}
.band-maji .overline, .band-maji .card__index { color: var(--color-white); }
.band-maji .card { background: transparent; border-color: var(--line-strong); }

/* ---- Tools library: nine tools, so never more than three across ---- */
@media (min-width: 64rem) { .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool-card { background: transparent; border-color: var(--line-strong); } /* pink links straight on dark green: 5.7:1 (on the tinted card they were 4.1:1) */
.tool-card .card__title { font-size: var(--text-subtitle); line-height: 1.3; }
.tool-card .card__body { font-size: var(--text-small); }
.tool-card--locked { border-style: dashed; }

/* ---- Numbered steps (About maji) ---- */
.maji-steps { counter-reset: step; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.maji-steps > li { counter-increment: step; border-top: 1px solid var(--line-strong); padding-top: var(--space-5); }
.maji-steps > li::before { content: "0" counter(step); display: block; font-size: var(--text-small); letter-spacing: var(--tracking-overline); color: var(--color-maji); margin-bottom: var(--space-3); }
.maji-steps h3 { font-size: var(--text-h4); }
.maji-steps p { margin-top: var(--space-3); color: var(--text-soft); }

/* Footer brand line on maji pages */
.site-footer__brand .maji-wordmark__name { font-size: 2.25rem; }