/*
 * Webflow code components — typography (Shadow DOM)
 *
 * Site variables and inherited properties work inside code components:
 * https://developers.webflow.com/code-components/styling-components
 *
 * Adobe Fonts (Typekit) register under slugs like `centra-no-2`, not marketing
 * names like `Centra No2`. Hardcoded family strings in CSS modules won’t match
 * the global @font-face on the host, so components use CSS variables instead.
 *
 * In Webflow: Variables (or your root typography) — create / reuse stacks and
 * “Copy CSS” so the custom property name matches what you map below.
 *
 * Recommended site-level tokens (set on :root / body scope in Webflow):
 *
 *   --wf-code-font--accent  → small labels / uppercase chip (Cartograph-style)
 *   --wf-code-font--body    → headings, body copy, buttons
 *
 * Example values (replace with your Adobe / Webflow font stacks):
 *
 *   --wf-code-font--accent: "some-display-font", sans-serif;
 *   --wf-code-font--body: centra-no-2, sans-serif;
 *
 * You can alias existing site variables, e.g.:
 *   --wf-code-font--body: var(--_typography---font-family-body, inherit);
 *
 * Local Vite / Storybook: defaults live in src/styles/globals.css (:root).
 */

/* Headline Section - Figma 2026 Design System
   6 color families, each with Main / Light / Dark.
   In production, --gc--<color>--<shade> comes from the page.
   For Storybook testing, OKLCH P3 values are defined as fallbacks. */

/* ─── Color fallbacks for Storybook (P3 OKLCH) ────────────────────── */

.SWYnNIVzbUcJPYtdiJyX {
  --color-main: var(--gc--red--main, oklch(65.3% 0.293 16));
  --color-light: var(--gc--red--light, oklch(87.9% 0.103 16));
  --color-dark: var(--gc--red--dark, oklch(22.9% 0.103 16));
}

.zuky_A0Ho4SfUVelPhFf {
  --color-main: var(--gc--orange--main, oklch(65.3% 0.213 44.415));
  --color-light: var(--gc--orange--light, oklch(87.9% 0.075 44.4));
  --color-dark: var(--gc--orange--dark, oklch(22.9% 0.075 44.4));
}

.Z9nA8NQLRStkdy6Xh101 {
  --color-main: var(--gc--green--main, oklch(65.3% 0.2 161));
  --color-light: var(--gc--green--light, oklch(87.9% 0.07 161));
  --color-dark: var(--gc--green--dark, oklch(22.9% 0.07 161));
}

.FR_94x_5wVksXyMtEbN9 {
  --color-main: var(--gc--blue--main, oklch(65.3% 0.181 235));
  --color-light: var(--gc--blue--light, oklch(87.9% 0.063 235));
  --color-dark: var(--gc--blue--dark, oklch(22.9% 0.063 235));
}

.phCkQq_CfibNJnuEv2nr {
  --color-main: var(--gc--indigo--main, oklch(65.3% 0.214 289));
  --color-light: var(--gc--indigo--light, oklch(87.9% 0.075 289));
  --color-dark: var(--gc--indigo--dark, oklch(22.9% 0.075 289));
}

.GMKeEO7Hz8m6dNxWZAIr {
  --color-main: var(--gc--violet--main, oklch(65.3% 0.314 341));
  --color-light: var(--gc--violet--light, oklch(87.9% 0.11 341));
  --color-dark: var(--gc--violet--dark, oklch(22.9% 0.11 341));
}

/* ─── Section shell ──────────────────────────────────────────────────
   Figma 2026 Design System. Min width = 4 columns @ 96px = 384px.
   Gap 24px between text block and button. */

.xXxDX496jX1ipBvzqxlg {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-width: 384px;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .xXxDX496jX1ipBvzqxlg {
    min-width: 0;
  }
}

/* ─── Text block (chip + headline + paragraph) ───────────────────────
   Inner gap 16px per Figma. */

.Z9bGmiyYbuRUeMK035oz {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.JAsfxAHoEs2ebACVqaCU .Z9bGmiyYbuRUeMK035oz {
  align-items: center;
}

/* ─── Alignment variants ───────────────────────────────────────────── */

.JAsfxAHoEs2ebACVqaCU {
  align-items: center;
  text-align: center;
}

.xHQkATedLNBdgUKdP1S7 {
  align-items: flex-start;
  text-align: left;
}

/* ─── Lead-in chip ────────────────────────────────────────────────────
   Figma: Cartograph 12px, main color on dark bg.
   Pill shape (100px radius), padding 8px 12px. */

.pZORhEIZdWxVaUZMeMpt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background-color: var(--color-dark);
  border-radius: 100px;
  flex-shrink: 0;
  align-self: flex-start;
}

.JAsfxAHoEs2ebACVqaCU .pZORhEIZdWxVaUZMeMpt {
  align-self: center;
}

.PqK1TEaKFiPrRDYMBdPr {
  font-family: var(
    --wf-code-font--accent,
    var(--wf-code-font--body, inherit)
  );
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-main);
  white-space: nowrap;
}

/* ─── Headline ───────────────────────────────────────────────────────
   Figma: Centra No2 Book, 40px, 48px line-height. */

.RHKQeZcvhu4S9Z1EcKqf {
  font-family: var(--wf-code-font--body, inherit);
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  color: inherit;
  margin: 0;
  max-width: 100%;
}

/* ─── Paragraph ──────────────────────────────────────────────────────
   Figma: Centra No2 Book, 16px, 24px line-height (Body/BM). */

.x71A2b2bcvzcdo37rfln {
  font-family: var(--wf-code-font--body, inherit);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
  color: inherit;
  margin: 0;
  max-width: 42ch;
}

.JAsfxAHoEs2ebACVqaCU .x71A2b2bcvzcdo37rfln {
  max-width: 42ch;
}

/* ─── Button ─────────────────────────────────────────────────────────
   Figma: Centra Medium 16px, padding 12px 16px, pill shape.
   Text + arrow (→) in separate spans, 3px gap. */

.sQpEGET9jKvPBJa5BNC3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  background-color: var(--color-main);
  color: var(--color-on-main, white);
  font-family: var(--wf-code-font--body, inherit);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;

  flex-shrink: 0;
}

.PZgQmKb8wmnvEKsvpC7Y {
  flex-shrink: 0;
}

.P2oK8ULlHwgzF8VJeuDQ {
  flex-shrink: 0;
}

.sQpEGET9jKvPBJa5BNC3:hover {
  background-color: var(--color-dark);
  color: white;
}