/* ============================================================
   MustAI — Landing page styles
   ------------------------------------------------------------
   Bootstrap 5.3.2 is loaded from CDN (matches views/authorization/*
   and views/dashboard/*). This file only carries the brand tokens
   the landing page needs plus its own layout rules — it does NOT
   import public/dashboard/dashboard.css, so neither page can ever
   regress the other. Token values are kept identical to
   dashboard.css's :root block by hand — update both if the brand
   palette changes.
   ============================================================ */
:root{
  --brand-blue:#1570EF;
  --brand-green:#0A8050;
  --brand-navy:#0B1739;
  --brand-gradient-ui:linear-gradient(135deg,var(--brand-blue),var(--brand-green));
}

body{
  background:#F5F7FA;
  color:var(--brand-navy);
}

.logo-mark{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark img{height:36px;width:auto;border-radius:.4rem}

#siteHeader{background:#fff}
#siteHeader .navbar-brand{color:var(--brand-navy)}

/* Secondary to the hero's gradient CTA, so it stays an outline until hover —
   same treatment dashboard.css gives .btn-outline-primary. */
.header-login{
  border:1px solid var(--brand-blue);
  color:var(--brand-blue);
  font-weight:600;
}
.header-login:hover,.header-login:focus{
  background-image:var(--brand-gradient-ui);
  border-color:transparent;
  color:#fff;
}

#siteFooter a{color:var(--brand-navy)}
#siteFooter a:hover,#siteFooter a:focus{color:var(--brand-blue)}

.hero-highlight-blue{color:var(--brand-blue)}
.hero-highlight-green{color:var(--brand-green)}

.hero-content{max-width:740px}

.hero-cta{
  background-image:var(--brand-gradient-ui);
  border:0;
  color:#fff;
  font-weight:600;
}
.hero-cta:hover,.hero-cta:focus{
  color:#fff;
  filter:brightness(1.05);
}

/* auth/facebook/callback + the "link expired" fallback in start() —
   a single status card, not a full landing page, so it gets its own
   light wash instead of the flat body background above. */
.auth-callback-page{
  background:linear-gradient(135deg,rgba(21,112,239,.08),rgba(10,128,80,.08));
}

.auth-callback-card{
  background:#fff;
  border-radius:1rem;
  box-shadow:0 10px 30px rgba(11,23,57,.08);
  max-width:480px;
  width:100%;
}

.auth-callback-icon{font-size:2.75rem;color:var(--brand-blue)}
.auth-callback-icon.is-success{color:var(--brand-green)}