/* ──────────────────────────────────────────────────────────
   Azimuth — brand-alignment layer for the app pages
   (The OOW Bible / The EOOW & ETO Bible). Subtle refinements
   that echo the company landing. Scoped under body.app-brand so
   the rest of the site is untouched. Animates opacity/transform
   only (no layout shift); fully honours prefers-reduced-motion.
   ────────────────────────────────────────────────────────── */

:root { --brand-accent: #7FA5E8; } /* oklch(0.78 0.09 235), on dark */

/* ── Logo lockup (header + footer) ── */
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); }
.brand-lockup svg { display: block; flex: none; }
.brand-lockup .bl-word {
  font-family: 'Instrument Sans', var(--font-heading);
  font-weight: 600; font-size: 15px; letter-spacing: 0.01em; white-space: nowrap; line-height: 1;
}
.brand-lockup .bl-word span { color: var(--text-secondary); font-weight: 450; }
.footer-brand .brand-lockup { margin-bottom: 6px; }

/* ── Footer sign-off ── */
.app-brand .footer-bottom { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.app-brand .footer-bottom .footer-signoff {
  margin-left: auto; font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.14em; color: var(--text-muted);
}

/* ── Mono kicker above each section heading ── */
.app-brand .brand-kicker {
  font-family: 'IBM Plex Mono', monospace; font-weight: 500;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-accent); margin: 0 0 12px;
}

/* ── Vertical breadcrumb above hero H1 ── */
.app-brand .brand-breadcrumb {
  display: inline-block; font-family: 'IBM Plex Mono', monospace; font-weight: 500;
  font-size: 11px; letter-spacing: 0.16em; color: var(--text-muted); margin-bottom: 16px;
}
.app-brand .brand-breadcrumb:hover { color: var(--text-secondary); }
.app-brand .brand-breadcrumb .dot { color: var(--brand-accent); }

/* ── Gradient treatment on the final hero word ── */
.app-brand .hero h1 .grad-word {
  display: inline-block; padding-bottom: 0.16em; margin-bottom: -0.16em;
  background: linear-gradient(100deg, var(--text-primary) 10%, var(--brand-accent) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Mono labels: small tags & badges ── */
.app-brand .tag,
.app-brand .pricing-badge,
.app-brand .store-badge-soon-tag {
  font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase;
}

/* ── Stat numerals in mono; one point of brand colour (flashcards) ── */
.app-brand .trust-number { font-family: 'IBM Plex Mono', monospace; font-weight: 500; }
.app-brand .trust-number-accent { color: var(--brand-accent); }

/* ── Module numerals like bearing markings ── */
.app-brand .module-number {
  font-family: 'IBM Plex Mono', monospace; font-weight: 500; color: var(--text-muted);
}

/* Hero background = the page's own colour splash (blue from style.css, amber
   from eoow-styles.css). No dot-grid here — the faint static dots didn't read;
   the animated dot field stays exclusive to the company landing. */

/* ── Hover / focus polish on feature + pricing cards ── */
.app-brand .feature-card, .app-brand .pricing-card { transition: border-color .25s, transform .25s, box-shadow .25s; }
.app-brand .feature-card:hover, .app-brand .feature-card:focus-within,
.app-brand .pricing-card:hover, .app-brand .pricing-card:focus-within {
  border-color: rgba(140, 175, 225, 0.45); transform: translateY(-2px);
}

/* ── Hero load stagger ── */
@keyframes brandRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.app-brand .hero-stagger { animation: brandRise .8s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--stagger, 0ms); }

/* ── Scroll reveal (hidden state only applied once JS confirms IntersectionObserver) ── */
html.reveal-js .app-brand :where(.brand-kicker, .section-title, .section-subtitle, .feature-card, .screenshot-item, .step, .pricing-card) {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--reveal-d, 0ms);
}
html.reveal-js .app-brand .is-revealed { opacity: 1; transform: none; }

/* ── Reduced motion: collapse everything, reveal immediately ── */
@media (prefers-reduced-motion: reduce) {
  html.reveal-js .app-brand :where(.brand-kicker, .section-title, .section-subtitle, .feature-card, .screenshot-item, .step, .pricing-card) {
    opacity: 1; transform: none; transition: none;
  }
  .app-brand .hero-stagger { animation: none; }
  .app-brand *, .app-brand *::before, .app-brand *::after {
    animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important;
  }
}