/* ===========================================================================
   v2 — the sections reused from the live site, plus the legacy-token bridge
   that lets them work without pulling in main.css.
   =========================================================================== */

/* --- Legacy token bridge --------------------------------------------------
   v2 reuses several live partials verbatim (dashboard mockup, tech-logo strip,
   integrations, blog mockup, pricing card + toggle) rather than copying them,
   so those components can never drift between the two designs. Their
   stylesheets were written against main.css's :root token names, and v2
   deliberately does not load main.css — doing so would drag the entire live
   design system in and defeat the isolation.

   This block supplies only the names those reused stylesheets actually
   reference, mapped onto v2's own scale. It is a compatibility shim, not part
   of v2's vocabulary: new v2 CSS should use --s-* and --radius-* directly.

   Values are equivalents, not copies, so a reused component picks up v2's
   spacing and radius rather than staying pinned to the live site's. */
body.v2 {
  --space-1: var(--s-1);
  --space-2: var(--s-2);
  --space-3: var(--s-3);
  --space-4: var(--s-5);
  --space-5: var(--s-7);
  --space-6: var(--s-8);
  --radius-md: var(--radius-btn);
  --radius-lg: var(--radius-card);

  /* Used by the reused hero mockup's gradient outline and corner blooms.
     Copied verbatim from main.css — if those values change there, change them
     here too. */
  --hero-orange: #ff7a45;
  --hero-red: #e8393f;
  --hero-marine: #1d3f8f;
  --hero-blue: #6cc0ff;
  --bloom-blue: #3f8cff;
  --bloom-warm: var(--accent);
}

/* --- Heading classes used by the reused partials --------------------------
   The live partials mark their headings up with .section-eyebrow /
   .section-title / .section-lead, which live in main.css. Re-expressed here in
   v2's language so those sections inherit v2's typography rather than falling
   back to unstyled browser defaults.

   Note the eyebrow takes --accent-voice, not --accent: on the live site the
   eyebrow is coral, but in v2 coral means "clickable" and a static label
   wearing it would be a lie. */
.v2 .section-eyebrow {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-voice);
  margin-bottom: var(--s-2);
}
.v2 .section-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  margin-bottom: var(--s-5);
}
.v2 .section-lead {
  text-align: center;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 60ch;
  margin: calc(var(--s-3) * -1) auto var(--s-5);
  text-wrap: pretty;
}

/* ===== Explanation ===== */
.v2 .explanation-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.v2 .explanation-body {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.75;
  text-wrap: pretty;
}

/* ===== Reused-component adjustments =====
   The reference separates surfaces with a hairline and a surface step, never a
   drop shadow. The reused components were built against the live site's
   shadow-leaning language, so their shadows are removed here rather than by
   editing the shared stylesheets, which must keep working for `/`. */
.v2 .integration-card,
.v2 .blog-card {
  border-color: var(--hairline);
  box-shadow: none;
}

/* The blog mockup's framed screenshot keeps its shadow — it is depicting a
   floating browser surface, where the shadow is doing representational work
   rather than decorative separation. */