/* =========================================================================
   THE ACQUIREBRANDS DESIGN SYSTEM — tokens and primitives, in one file.
   =========================================================================

   WHY THIS EXISTS. Every public page carried its own copy of the :root token
   block, and /calculator carried a different one. Changing a brand colour
   meant editing seven files and hoping; the footer had already drifted twice
   that way. One token change now propagates everywhere.

   WHAT IT IS NOT. It is not a layout system and it does not want to be. Pages
   keep their own structure, their own sections and their own page-specific
   CSS — the Accelerator's hero is nothing like the Roadmap's quiz, and neither
   should be forced into a grid they did not ask for. What they share is the
   vocabulary: colour, type, buttons, containers, the video frame, the footer.

   THE REFERENCE IS /accelerator. Its brand language is the canonical one, so
   these values are lifted from it unchanged. Nothing was renamed for
   tidiness — the variable names are the ones the pages already use, so a page
   that stops declaring its own tokens keeps rendering identically.

   ORDER MATTERS. Link this BEFORE a page's own <style>, so a page can still
   override a primitive locally when it genuinely needs to.
   ========================================================================= */

:root {
  /* Surfaces and ink. */
  --paper:  #fbfaff;
  --paper2: #f2effa;
  --navy:   #2b2160;
  --ink:    #3d3654;
  --mut:    #6f6a8a;
  --line:   #e5e1f0;

  /* The accent. Named --orange for history rather than for accuracy: it was
     orange before the brand moved to violet, and renaming it would mean
     touching every page to change nothing anybody can see. */
  --orange:      #7c3aed;
  --orange2:     #9f6bff;
  --orange-soft: #f1eaff;

  --sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Arial re-scaled to Inter's exact metrics, so the webfont swap moves nothing.
   Declared here so no page has to carry the magic numbers. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Roboto');
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

/* ------------------------------------------------------------- primitives */

/* Prefixed ab- so they cannot collide with a page's own classes. A page opts
   into a primitive by using the class; nothing is imposed on it. */

.ab-wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px;
}

.ab-btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--orange2), var(--orange));
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  padding: 19px 44px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(124, 58, 237, .32);
  transition: transform .15s;
}
.ab-btn:hover { transform: translateY(-2px); }
.ab-btn, .ab-btn:hover, .ab-btn:focus, .ab-btn:active, .ab-btn:visited {
  color: #fff !important;
  text-decoration: none !important;
}

/* The video frame. Identical on /accelerator and /strategy-call, and the next
   page with a video should not have to measure the shadow again. */
.ab-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 70px rgba(43, 33, 96, .35);
}
.ab-video > div[id^="vidalytics_embed_"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
}

/* ----------------------------------------------------------------- footer */

/* THE ONE FOOTER. Its markup is generated from lib/site/globalContent.js and
   written into every page by scripts/sync-global-content.mjs; these are the
   styles that markup expects. Changing either changes every page. */

.ab-footer {
  background: var(--navy);
  padding: 52px 0 60px;
  color: #998fc0;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
  font-family: var(--sans);
}
.ab-footer a { color: #beb3e0; text-decoration: none; margin: 0 10px; }
.ab-footer a:hover { color: #fff; text-decoration: underline; }
.ab-foot-links { margin: 10px 0 18px; }

/* Who runs this, one step brighter and heavier than the legal text below it:
   a visitor should be able to answer "whose program is this" without reading
   a disclaimer. */
.ab-foot-rel {
  max-width: 760px;
  margin: 0 auto 16px;
  font-size: 14px;
  line-height: 1.65;
  color: #d5cdef;
  font-weight: 500;
}
.ab-foot-fine { max-width: 800px; margin: 0 auto; line-height: 1.6; }

/* A page's OWN legal language, where it has some, sits above the universal
   footer rather than replacing it. /not-a-fit is the live example. */
.ab-page-legal {
  background: var(--navy);
  color: #a79dcc;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  padding: 40px 0 0;
  font-family: var(--sans);
}
.ab-page-legal p { max-width: 800px; margin: 0 auto; }
.ab-page-legal + .ab-footer { padding-top: 26px; }

@media (max-width: 600px) {
  .ab-wrap { padding: 0 20px; }
  .ab-btn { padding: 17px 26px; font-size: 16px; }
  .ab-footer { padding: 40px 0 46px; }
}