/* base.css — shared chrome: reset, layout, type, buttons, nav, footer, scroll-reveal. */

/* ----------  Reset / base  ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #FAFAFA;   /* page background (foundation-page); cards stay --bg #fff */
  line-height: 1.5;
  font-size: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-tint); }

/* ----------  Layout helpers  ---------- */
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.center { text-align: center; }
.measure { max-width: var(--measure); margin-inline: auto; }
section { padding-block: var(--section-y); }

/* ----------  Type  ---------- */
h1, h2 { font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; }
.hero-title { font-size: var(--type-hero); font-weight: 500; letter-spacing: -0.035em; }
.h2 { font-size: var(--type-h2); }
.lead { font-size: var(--type-lead); color: var(--ink-soft); line-height: 1.45; font-weight: 400; }
.lead + .lead { margin-top: 1em; }   /* gap when a lead is split into paragraphs (global reset zeroes p margins) */
.eyebrow {
  font-size: var(--type-label); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-ink);   /* amber, not bright yellow, AA on white */
}
.eyebrow.muted { color: var(--ink-faint); }

/* ----------  Buttons  ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0 1.6rem;
  border-radius: 0.5rem; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 1rem;
  cursor: pointer; text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
/* PRIMARY = gold fill + WHITE text (GingerBIM primary) */
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); }
.btn-primary:active { transform: scale(0.98); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-faint); }
.btn-link {
  background: none; border: none; color: var(--accent-ink); font-weight: 600;  /* amber text, AA on white */
  min-height: 48px; padding: 0 0.5rem; display: inline-flex; align-items: center;
  cursor: pointer; text-decoration: none;
}
.btn-link:hover { color: var(--accent-ink-deep); text-decoration: underline; text-underline-offset: 3px; }
/* Visible focus for keyboard users: amber ring (a bright-yellow ring on white is invisible) */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--accent-ink); outline-offset: 3px; border-radius: 0.5rem;
}

/* ----------  Nav  ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.02em; color: var(--ink);
  text-decoration: none;
}
.brand .mark {
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
}
.brand .mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Primary nav links: centred row between brand and CTA */
.nav-primary { display: flex; align-items: center; gap: 2rem; margin-inline: auto; }
.nav-primary a {
  color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 0.9375rem;
  transition: color .2s var(--ease);
}
.nav-primary a:hover { color: var(--ink); }
.nav-primary a.is-active { color: var(--ink); font-weight: 600; }
.nav-cta { display: flex; align-items: center; gap: 0.25rem; }
.nav-cta .btn-primary { min-height: 40px; padding: 0 1.15rem; font-size: 0.9375rem; }
.nav-cta .btn-link { min-height: 40px; font-size: 0.9375rem; }
@media (max-width: 720px) { .nav-primary { display: none; } }
@media (max-width: 560px) { .nav-cta .btn-link { display: none; } }

/* ----------  Nav "Features" dropdown (shared block, identical across all pages)  ----------
   The trigger is a <button> that won't inherit `.nav-primary a`, so it gets a matching rule.
   The menu is position:absolute inside a position:relative wrapper, so it never changes the
   nav's 64px height (the pricing sticky <thead> and landing sticky pane both hard-code top:64px). */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-trigger {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: inherit; color: var(--ink-soft); background: none; border: none;
  font-weight: 500; font-size: 0.9375rem; line-height: 1; cursor: pointer;
  padding: 0; transition: color .2s var(--ease);
}
.nav-dd-trigger:hover { color: var(--ink); }
.nav-dd-trigger.is-active { color: var(--ink); font-weight: 600; }
.nav-dd-trigger .caret {
  width: 0.55em; height: 0.55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em); transition: transform .2s var(--ease); opacity: 0.7;
}
.nav-dd-menu {
  position: absolute; top: calc(100% + 0.6rem); left: 50%; transform: translateX(-50%) translateY(-4px);
  min-width: 230px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-soft);
  padding: 0.4rem; z-index: 200;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);
}
/* Open on hover (enhancement) OR when JS sets [aria-expanded] / .is-open (click + keyboard) */
.nav-dd:hover .nav-dd-menu,
.nav-dd-trigger[aria-expanded="true"] + .nav-dd-menu,
.nav-dd-menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dd-menu a {
  display: block; padding: 0.6rem 0.75rem; border-radius: 8px;
  color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 0.9rem; line-height: 1.3;
  white-space: nowrap; transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-dd-menu a:hover, .nav-dd-menu a:focus-visible { background: var(--surface); color: var(--ink); }
.nav-dd-menu a .dd-role { font-weight: 600; color: var(--ink); }
.nav-dd-menu a:hover .dd-role { color: var(--ink); }
@media (max-width: 720px) { .nav-dd { display: none; } }

/* ----------  Footer (full 4-column site footer)  ---------- */
footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 7vw, 4.5rem) 2rem; color: var(--ink-faint); font-size: 0.9375rem; }
/* Top: brand block + 4 link columns */
.foot-top {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}
.foot-brand { max-width: 18rem; }
.foot-brand .foot-tag { margin-top: 0.85rem; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.5; }
.foot-col h3 {
  font-size: var(--type-label); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 0.9rem;
}
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 0.6rem; }
.foot-col a { color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; }
.foot-col a:hover { color: var(--ink); }
/* Base bar: copyright + legal entity + socials */
.foot-base {
  margin-top: clamp(2.5rem, 6vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
}
.foot-base .foot-legal { font-size: 0.8125rem; color: var(--ink-faint); line-height: 1.5; }
.foot-social { display: flex; gap: 0.75rem; align-items: center; }
.foot-social a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--ink-soft); text-decoration: none; font-size: 0.875rem; font-weight: 500;
}
.foot-social a:hover { color: var(--ink); }
.foot-note { width: 100%; margin-top: 1rem; font-size: 0.75rem; color: var(--ink-faint); line-height: 1.5; }
@media (max-width: 860px) {
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 480px) { .foot-top { grid-template-columns: 1fr; } }

/* ----------  Scroll-reveal (progressive enhancement)  ----------
   Content is VISIBLE BY DEFAULT. The .reveal class is only added by JS when
   IntersectionObserver is supported AND the user hasn't asked for reduced motion,
   so nothing can vanish if the reveal never fires. */
.js .reveal:not(.in) { opacity: 0; transform: translateY(28px); }
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.in) { opacity: 1; transform: none; }
  .reveal { transition: none; }
  html { scroll-behavior: auto; }
}