/* ============================================================================
   Emmerai — Marketing Site Shared Stylesheet
   ============================================================================
   Shared across every marketing page (index.html, /platform/*.html, pricing,
   about, contact, etc.) so visual changes happen in one place, even though
   each page is its own separate static HTML file.

   Token naming note: this follows the naming already shipped in
   intake.html / admin-partners.html (--accent = dark text, --brand = teal),
   NOT the Emmerai Design System Reference doc's naming (--text-1, --accent).
   Same colors, different variable names between the doc and the shipped
   code — matching what's already live takes priority. Worth reconciling
   the doc's naming to this convention next time that doc is touched.

   --brand-rich (#174C47) is the Emerald Teal Rule color — the ONLY teal
   permitted on light/white backgrounds (text, links, borders, accent bars).
   --brand (#2B8C82) is safe only on dark backgrounds, at designer discretion.
   ============================================================================ */

:root {
  --bg: #F8F7F4;
  --surface: #FFFFFF;
  --border: rgba(40,50,60,0.10);
  --border-focus: rgba(40,50,60,0.28);
  --accent: #28323C;              /* primary text / dark UI */
  --brand: #2B8C82;                /* teal — dark backgrounds only */
  --brand-rich: #174C47;           /* teal — the only shade safe on light backgrounds (Emerald Teal Rule) */
  --brand-dim: rgba(43,140,130,0.10);
  --radius: 10px;
  --radius-sm: 7px;
  --nav-logo-height: 71.4px;       /* SINGLE SOURCE OF TRUTH for primary-nav
    logo size, every page, every route. 51px x 1.4 (40% bigger), per
    explicit sizing request — verified live via JS injection + screenshot
    before committing this value; no clipping, stays aligned with nav
    links. Change this one value to resize the logo everywhere at once —
    do not add page-specific height/width overrides anywhere else; use
    .nav-logo-link / .nav-logo-img (below) with no inline sizing. */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--accent);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display-serif {
  font-family: 'Libre Caslon Display', 'Playfair Display', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ── Site nav — shared across every marketing page ──────────────────────── */
/* Hero uses the transparent/dark variant (nav-on-dark); interior pages that
   don't have a full-bleed dark hero should use nav-on-light instead. */

.site-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 56px;
}

.site-nav.nav-on-light {
  position: relative;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.site-nav .logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Canonical primary-nav logo — the ONLY sizing rule for the nav logo,
   anywhere it appears (homepage hero nav, every interior marketing page,
   every /platform/*.html page). Fixed height + width:auto preserves
   aspect ratio regardless of the source PNG's own intrinsic dimensions;
   object-fit:contain guarantees no cropping/stretching. The black and
   white logo variants share this exact same class pair — swapping which
   PNG is in `src` is the only thing that should ever differ per page.
   No page should define its own height/width/position for this element;
   if the logo needs to be a different size, change --nav-logo-height
   above, once, and every instance updates together. ── */
.nav-logo-link {
  display: flex;
  align-items: center;
  height: var(--nav-logo-height);
}

.nav-logo-img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 15px;
  font-weight: 500;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-on-dark .nav-links a,
.nav-on-dark .nav-links button,
.nav-on-dark .nav-actions .nav-login {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.nav-on-light .nav-links a,
.nav-on-light .nav-links button,
.nav-on-light .nav-actions .nav-login {
  color: var(--accent);
}

.nav-links a,
.nav-links button {
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  padding: 0;
}

.nav-links .has-dropdown {
  position: relative;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-login {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-rich);
  color: #fff;
  border: none;
  border-radius: 22px;
  padding: 13px 24px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.btn-pill:hover { background: #123833; }

/* Homepage dark hero only (.nav-on-dark) — was a solid white pill (Figma
   node 494:3/494:4), replaced per direct request: the white fill was
   pulling too much visual weight away from the center "Get Started"
   CTA, and making both buttons the same green read as "too much green."
   Ghost outline instead — transparent fill, thin low-opacity border, so
   Create account still reads clearly as an action but carries zero
   color weight against the green CTA. Interior/light pages keep the
   base .btn-pill above untouched; this override only ever applies on
   the dark hero. */
.nav-on-dark .btn-pill {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #F4F3EF;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.nav-on-dark .btn-pill:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── Platform dropdown menu ──────────────────────────────────────────────── */

.platform-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 18px);
  left: 0;
  width: 600px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(10,13,15,0.18);
  padding: 24px;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
  z-index: 30;
}

.platform-dropdown.open { display: grid; }

.nav-links .platform-dropdown a {
  display: block;
  padding: 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--accent);
  text-shadow: none;
}

.nav-links .platform-dropdown a:hover { background: var(--bg); }

.platform-dropdown .item-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.platform-dropdown .item-desc {
  font-size: 13px;
  color: rgba(40,50,60,0.6);
  line-height: 1.4;
}

/* ── CTA button (primary, dark fill) — used across all marketing pages ──── */

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--brand-rich);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 15px 26px;
  font-size: 15.5px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.btn-cta:hover { background: #123833; }