/* 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);
  /* page background (foundation-page); cards stay --bg #fff.
     A very faint blueprint grid sits on top of the flat colour as a fixed texture,
     so it stays put behind the scrolling page. Opaque sections (surface / accent-tint
     bands, white cards) naturally mask it, leaving the grid on the open page areas. */
  background-color: #FAFAFA;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-attachment: fixed;
  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 (Ginger 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; }
/* Wordmark logo (replaces the icon + "Ginger" text lockup) */
.brand-logo { height: 22px; width: auto; 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; } }

/* ----------  Mobile hamburger + drop-down menu (shown only <=720px)  ---------- */
.nav-burger {
  display: none; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--ink);
  padding: 0.5rem; margin: -0.5rem;
}
.burger-box { position: relative; display: block; width: 22px; height: 16px; }
.burger-box > span {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger-box > span:nth-child(1) { top: 0; }
.burger-box > span:nth-child(2) { top: 7px; }
.burger-box > span:nth-child(3) { top: 14px; }
.nav-burger[aria-expanded="true"] .burger-box > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-box > span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .burger-box > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { display: none; }
.mobile-menu a { display: block; text-decoration: none; border-bottom: 1px solid var(--line); transition: color .15s var(--ease); }
.mobile-menu .mm-link { color: var(--ink); font-weight: 600; font-size: 1rem; padding: 0.8rem 0; }
.mobile-menu .mm-sub  { color: var(--ink-soft); font-weight: 500; font-size: 0.9375rem; padding: 0.6rem 0 0.6rem 1rem; }
.mobile-menu a:hover { color: var(--ink); }
.mobile-menu .wrap > a:last-child { border-bottom: none; }
.mobile-menu .mm-cta { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 1rem; }
.mobile-menu .mm-cta a { display: flex; width: 100%; border-bottom: none; }
.mobile-menu .mm-cta .btn-link { justify-content: center; }

@media (max-width: 720px) {
  .nav-burger { display: inline-flex; }
  .nav-cta { gap: 0.5rem; }
  .nav-cta .btn-link, .nav-cta .btn-primary { display: none; }   /* CTAs move into the mobile menu */
  .mobile-menu {
    display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-soft);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-menu .wrap { padding-top: 0.75rem; padding-bottom: 1.25rem; }
}

/* ----------  Footer (full 4-column site footer)  ---------- */
footer { background: #FAFAFA; 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; }
}