@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
/* =========================================================================
 * main.pcss — the ONLY CSS entry point. Contains @import's only.
 * Import order is significant: base -> components -> sections.
 * postcss-import inlines everything (including ../sections/*) into one
 * bundle -> ./theme.css.
 *
 * Component and section imports are added as those files land (next build
 * blocks). Keep them grouped and ordered; do not add real rules here.
 * ========================================================================= */

/* ---- base -------------------------------------------------------------- */
/* =========================================================================
 * tokens.pcss — Nudging design system (single source of truth)
 *
 * Rules:
 *  - Hardcoding design values ANYWHERE outside this file is forbidden.
 *  - One font family across all breakpoints: Plus Jakarta Sans. Type sizes
 *    are flat pixel tokens (--text-{px}); the mobile->desktop scale lives in
 *    the .text-* classes (see typography.pcss).
 *  - Values marked  TODO: value from Figma  are placeholders: no exact
 *    token was available yet. Do not invent precise numbers — replace when
 *    the Figma value is confirmed.
 *
 * Confirmed values come from Figma variables (get_variable_defs) on the
 * Home / Home-mobile frames of the "Nudging Landing Website" file.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * Breakpoints (mobile-first): 375 / 768 / 1024 / 1441
 * Consumed via postcss-custom-media.
 * ------------------------------------------------------------------------- */

/* Desktop typography + font family switch happens at the --bp-md boundary. */

:root {
  /* =====================================================================
   * COLOR PALETTE (raw scales — confirmed from Figma variables)
   * ===================================================================== */

  /* Brand accents */
  --color-primary: #4a3aff;            /* Primary Colors / Color 1 */
  --color-secondary: #7d42fb;          /* Secondary Colors / Color 3 */
  --color-primary-500: #7643d6;        /* accent violet for headings on dark (how it works) */
  --color-accent-lime: #D8F999;        /* yellow-green accent (matches highlight-on-color) (TODO: confirm) */

  /* Primary (violet) scale */
  --color-primary-50: #fbfaff;
  --color-primary-100: #f3edff;
  --color-primary-200: #d3bff4;
  --color-primary-600: #5827b4;
  --color-primary-950: #13072e;

  /* Secondary (blue) scale */
  --color-secondary-100: #deeaf9;
  --color-secondary-400: #70abee;
  --color-secondary-600: #116bff;
  --color-secondary-800: #114ad0;
  --color-secondary-950: #11275a;

  /* Neutrals / gray scale */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cad5e2;
  --color-gray-500: #62748e;
  --color-gray-700: #404775;

  /* Status */
  --color-red-50: #fef2f2;
  --color-red-200: #ffc9c9;
  --color-red-600: #e7000b;
  --color-green-600: #00a63e;

  /* =====================================================================
   * SEMANTIC COLORS (use these in components/sections)
   * ===================================================================== */
  --color-text-heading: #101828;       /* colors/text/text-heading */
  --color-text-body: #4a5565;          /* colors/text/text-body */
  --color-text-white: #ffffff;         /* colors/text/text-white */

  --color-bg-brand: #1447e6;           /* colors/background/bg-brand */
  --color-bg-soft: #ffffff;            /* bg-neutral-primary-soft */
  --color-bg-muted: #f9fafb;           /* bg-neutral-secondary-medium */

  --color-border-default: #e5e7eb;     /* colors/border/border-default */

  /* =====================================================================
   * HIGHLIGHT (<mark>) — colour depends on section background.
   * The active value is chosen at the section-wrapper level via --mark-bg
   * (see helpers.php / mark.pcss); these are the two source colours.
   *   white / white+image bg  -> blue-violet highlight
   *   any other bg            -> yellow-green highlight
   * ===================================================================== */
  --mark-highlight-on-light: #4a3aff;  /* TODO: value from Figma (blue-violet mark) */
  --mark-highlight-on-color: #d6ff3d;  /* TODO: value from Figma (yellow-green mark) */
  --mark-bg: var(--mark-highlight-on-light); /* default; overridden per section */

  /* =====================================================================
   * TYPOGRAPHY — FONT FAMILY (single family across all breakpoints)
   * ===================================================================== */
  --font-family-base: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Font weights */
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;

  /* Letter spacing */
  --tracking-tight: -0.4px;
  --tracking-normal: 0;

  /* =====================================================================
   * TYPE SCALE — flat pixel sizes. A token is literally its px value, so it
   * can be swapped globally with one find/replace. Responsiveness (mobile ->
   * desktop) lives in the .text-* classes (see typography.pcss), not here.
   * ===================================================================== */
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-28: 28px;
  --text-30: 30px;
  --text-32: 32px;
  --text-36: 36px;
  --text-38: 38px;
  --text-40: 40px;
  --text-44: 44px;
  --text-48: 48px;

  /* Line-heights */
  --lh-130: 1.3;
  --lh-140: 1.4;
  --lh-150: 1.5;

  /* Light status tints for problem/solution boxes (Figma red-50/200, green). */
  --color-green-50: #f0fdf4;   /* TODO: confirm from Figma (success box bg) */
  --color-green-200: #b9f8cf;  /* TODO: confirm from Figma (success box border) */

  /* =====================================================================
   * SPACING scale (base 4px). 1..6 confirmed from Figma; larger steps are
   * a continuation of the same 4px rhythm.
   * ===================================================================== */
  --space-0: 0;
  --space-4: 4px;    /* Figma spacing/1 */
  --space-6: 6px;  /* Figma spacing/1.5 */
  --space-8: 8px;    /* Figma spacing/2 */
  --space-10: 10px; /* Figma spacing/2.5 */
  --space-12: 12px;   /* Figma spacing/3 */
  --space-16: 16px;   /* Figma spacing/4 */
  --space-20: 20px;   /* Figma spacing/5 */
  --space-24: 24px;   /* Figma spacing/6 */
  --space-28: 28px;   /* TODO: value from Figma (extends 4px scale) */
  --space-32: 32px;   /* TODO: value from Figma */
  --space-40: 40px;  /* TODO: value from Figma */
  --space-48: 48px;  /* TODO: value from Figma */
  --space-64: 64px;  /* TODO: value from Figma */
  --space-80: 80px;  /* TODO: value from Figma */
  --space-96: 96px;  /* TODO: value from Figma */
  --space-128: 128px; /* TODO: value from Figma */

  /* =====================================================================
   * RADII — rounded-base confirmed; others follow common scale.
   * ===================================================================== */
  --radius-sm: 8px;    /* TODO: value from Figma */
  --radius-base: 12px; /* Figma border-radius/rounded-base */
  --radius-lg: 16px;   /* TODO: value from Figma */
  --radius-xl: 24px;   /* TODO: value from Figma */
  --radius-full: 9999px;

  /* Border width */
  --border-width: 1px; /* Figma border-width/border */

  /* =====================================================================
   * SHADOWS (confirmed from Figma effects)
   * ===================================================================== */
  --shadow-xs: 0 1px 2px 1px rgba(29, 41, 61, .1);
  --shadow: 0 1px 2px -1px rgba(0, 0, 0, .1), 0 1px 3px 0 rgba(0, 0, 0, .1);
  --shadow-md: 0 2px 4px -2px rgba(0, 0, 0, .075), 0 4px 6px -1px rgba(0, 0, 0, .1);

  /* =====================================================================
   * CONTAINERS — container_width select: medium | large | full.
   * Horizontal padding is 16px in every case (SPEC).
   * ===================================================================== */
  --container-medium: 992px;
  --container-large: 1120px;
  --container-full: 100%;
  --container-padding-x: 16px;

  /* Section vertical rhythm */
  --section-py: var(--space-64);   /* TODO: confirm exact section padding from Figma */
}

/* -------------------------------------------------------------------------
 * DESKTOP OVERRIDES — bump the section rhythm. Type SIZES are not switched
 * here; each .text-* class carries its own desktop size (see typography.pcss).
 * ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --section-py: var(--space-96); /* TODO: confirm desktop section padding from Figma */
  }
}
/* =========================================================================
 * reset.pcss — minimal, modern reset. Base element defaults pull from
 * tokens.pcss (no hardcoded design values).
 * ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-family-base);
  font-size: var(--text-16);
  line-height: var(--lh-150);
  color: var(--color-text-body);
  background-color: var(--color-bg-soft);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 1024px) {

body {
    font-size: var(--text-20);
}
  }

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-heading);
  font-weight: inherit;
}

:where(:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Section wrapper + decorative background image (printed as an <img>). */
.section {
  position: relative;
  overflow: clip;
}

.section__bg {
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: auto;
  z-index: 0;
}

.section > .container {
  position: relative;
  z-index: 1;
}

.cky-btn {
  border-radius: 12px !important;
  border-width: 1px !important;
  font-weight: 700 !important;
}

.cky-btn.cky-btn-accept {
    background: var(--color-bg-brand) !important;
  }

.cky-btn.cky-btn-reject,.cky-btn.cky-btn-customize,.cky-btn.cky-btn-preferences {
    color: var(--color-bg-brand) !important;
    border-color: var(--color-bg-brand) !important;
  }
.cky-btn-revisit-wrapper {
  background: var(--color-bg-brand) !important;
}
/* =========================================================================
 * typography.pcss — typographic classes from the SPEC type table.
 *
 * Sizes/weights/line-heights use the flat pixel tokens (--text-*, --lh-*,
 * --fw-*). Each class holds its MOBILE values; the single @media (--bp-md)
 * block at the bottom carries the desktop sizes. Single font family across all
 * breakpoints: Plus Jakarta Sans (see tokens.pcss).
 * ========================================================================= */

/* --- Headings ----------------------------------------------------------- */
.text-h1 {
  font-size: var(--text-38);
  line-height: var(--lh-140);
  font-weight: var(--fw-800);
  letter-spacing: var(--tracking-tight);
}
@media (min-width: 1024px) {
.text-h1 {
    font-size: var(--text-48); font-weight: var(--fw-600);
}
  }

.text-h2 {
  font-size: var(--text-32);
  line-height: var(--lh-140);
  font-weight: var(--fw-700);
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 1024px) {

.text-h2 {
    font-size: var(--text-44); line-height: var(--lh-130); font-weight: var(--fw-600);
}
  }

.text-h3 {
  font-size: var(--text-30);
  line-height: var(--lh-130);
  font-weight: var(--fw-600);
}

@media (min-width: 1024px) {

.text-h3 {
    font-size: var(--text-40); line-height: var(--lh-150);
}
  }

.text-h4 {
  font-size: var(--text-28);
  line-height: var(--lh-130);
  font-weight: var(--fw-700);
}

@media (min-width: 1024px) {

.text-h4 {
    font-size: var(--text-36); line-height: var(--lh-140);
}
  }

.text-caption-1-bold {
  font-size: var(--text-24);
  line-height: var(--lh-150);
  font-weight: var(--fw-700);
}

@media (min-width: 1024px) {

.text-caption-1-bold {
    font-size: var(--text-32); line-height: var(--lh-130);
}
  }

.text-caption-1 {
  font-size: var(--text-24);
  line-height: var(--lh-150);
  font-weight: var(--fw-400);
}

@media (min-width: 1024px) {

.text-caption-1 {
    font-size: var(--text-32); line-height: var(--lh-130);
}
  }

/* --- Body --------------------------------------------------------------- */
.text-big-1-bold {
  font-size: var(--text-20);
  line-height: var(--lh-150);
  font-weight: var(--fw-700);
}
@media (min-width: 1024px) {
.text-big-1-bold {
    font-size: var(--text-24);
}
  }

.text-big-1 {
  font-size: var(--text-20);
  line-height: var(--lh-150);
  font-weight: var(--fw-400);
}

@media (min-width: 1024px) {

.text-big-1 {
    font-size: var(--text-24);
}
  }

.text-body-1-bold {
  font-size: var(--text-16);
  line-height: var(--lh-150);
  font-weight: var(--fw-700);
}

@media (min-width: 1024px) {

.text-body-1-bold {
    font-size: var(--text-20);
}
  }

.text-body-1 {
  font-size: var(--text-16);
  line-height: var(--lh-150);
  font-weight: var(--fw-400);
}

@media (min-width: 1024px) {

.text-body-1 {
    font-size: var(--text-20);
}
  }

.text-body-2 {
  font-size: var(--text-18);
  line-height: var(--lh-150);
  font-weight: var(--fw-400);
}

.text-small-bold {
  font-size: var(--text-14);
  line-height: var(--lh-140);
  font-weight: var(--fw-700);
}

@media (min-width: 1024px) {

.text-small-bold {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.text-small {
  font-size: var(--text-14);
  line-height: var(--lh-140);
  font-weight: var(--fw-400);
}

@media (min-width: 1024px) {

.text-small {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

/* highlight */
h1 mark,
h2 mark,
h3 mark,
h4 mark,
h5 mark,
h6 mark {
  color: var(--color-primary-600);
  background: transparent;
}
.section--is-dark :is(h1 mark,h2 mark,h3 mark,h4 mark,h5 mark,h6 mark) {
    color: var(--color-accent-lime);
  }

/* ---- components --------------------------------------------------------- */
/* =========================================================================
 * container.pcss — width containers.
 * container_width select: medium (992) | large (1156) | full (100%).
 * Horizontal padding is always 16px (SPEC). Centered.
 * ========================================================================= */

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

.container--medium {
  max-width: calc(var(--container-medium) + var(--container-padding-x) * 2);
}

.container--large {
  max-width: calc(var(--container-large) + var(--container-padding-x) * 2);
}

.container--full {
  max-width: 100%;
}
/* =========================================================================
 * button.pcss — buttons.
 * From Figma header: px 16 / py 10, radius 12, gap 6, 14px Bold.
 *   .btn--primary   filled brand (#1447e6), white text, shadow-xs (Join Waitlist)
 *   .btn--ghost     transparent, heading-coloured text (Log In)
 *   .btn--secondary outlined
 * All values via tokens.
 * ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-base);
  border: var(--border-width) solid transparent;
  font-size: var(--text-14);
  line-height: var(--lh-140);
  font-weight: var(--fw-700);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Filled brand button (Join Waitlist / Get Started) */
.btn--primary {
  background-color: var(--color-bg-brand);
  color: var(--color-text-white);
  box-shadow: var(--shadow-xs);
}

.btn--primary:hover {
  background-color: var(--color-secondary-800); /* darker brand on hover */
}

/* Text button (Log In / How It Works) */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text-heading);
}

.btn--ghost:hover {
  color: var(--color-primary);
}

/* Outlined secondary */
.btn--secondary {
  background-color: #F9FAFB;
  color: var(--color-text-heading);
  border-color: var(--color-border-default);
}

.btn--secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Full-width modifier (used inside popups / mobile) */
.btn--block {
  width: 100%;
}

/* A horizontal group of buttons */
.button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
}
/* =========================================================================
 * eyebrow.pcss — the "eyebrow" badge inserted by the TinyMCE eyebrow button
 * (<span class="eyebrow">…</span>). Used across Homepage sections.
 * Exact padding/colour to be confirmed against section frames.
 * ========================================================================= */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  /* Figma badge: px 12 / py 8, radius full, 14px Medium, primary-600 on primary-100. */
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-full);
  background-color: var(--color-primary-100);
  color: var(--color-primary-600);
  font-size: var(--text-14); /* 14px */
  line-height: var(--lh-140);
  font-weight: var(--fw-500);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
}
/* =========================================================================
 * mark.pcss — text highlight inserted by the TinyMCE highlight button (<mark>).
 * The colour depends on the section background and is delivered via the
 * --mark-bg custom property set on the section wrapper (see helpers.php):
 *   white / white+image bg -> blue-violet   (--mark-highlight-on-light)
 *   any other bg           -> yellow-green   (--mark-highlight-on-color)
 * This file never hardcodes the colour — it only consumes --mark-bg.
 * ========================================================================= */

mark,
.mark {
  background-color: var(--mark-bg);
  color: inherit;
  padding-inline: 0.08em;
  border-radius: 0.12em;
  /* Keep the highlight tight to the text baseline. */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* =========================================================================
 * section-head.pcss — shared styling for a section's rich "content" field.
 * Editors compose eyebrow (button) + heading + text in one WYSIWYG; this
 * styles the resulting markup consistently. Use `.section-head--on-dark`
 * on dark bands so headings/paragraphs are white.
 * ========================================================================= */

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.section-head > * {
  margin: 0;
}

.section-head :is(h1, h2, h3, h4) {
  color: var(--color-primary-950);
}

:is(.section-head :is(h1,h2,h3,h4)) br {
    display: none;
  }

@media (min-width: 768px) {

:is(.section-head :is(h1,h2,h3,h4)) br {
      display: block;
  }
    }

.section-head h1 {
  font-size: var(--text-38);
  line-height: var(--lh-140);
  font-weight: var(--fw-600);
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 1024px) {

.section-head h1 {
    font-size: var(--text-48);
}
  }

.section-head h2 {
  font-size: var(--text-32);
  line-height: var(--lh-140);
  font-weight: var(--fw-600);
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 1024px) {

.section-head h2 {
    font-size: var(--text-44);
}
  }

.section-head h3 {
  font-size: var(--text-30);
  line-height: var(--lh-130);
  font-weight: var(--fw-600);
}

@media (min-width: 1024px) {

.section-head h3 {
    font-size: var(--text-40);
}
  }

.section-head p {
  font-size: var(--text-16);
  line-height: var(--lh-150);
  color: var(--color-black);
}

.section-head a {
  color: var(--color-primary-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Centred variant (Pricing, CTA). */
.section-head--center {
  align-items: center;
  text-align: center;
}

/* Dark band variant. */
.section-head--on-dark :is(h1, h2, h3, h4),
.section-head--on-dark p {
  color: var(--color-white);
}
/* =========================================================================
 * header.pcss — global sticky header.
 * Figma: white bg, 1px bottom border, logo left, centered nav, actions right.
 * Mobile-first: nav collapses into a toggled panel; at --bp-md the nav
 * becomes `display: contents` so logo | menu | actions lay out in one row.
 * ========================================================================= */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  padding: var(--space-8) var(--space-16);
  background: var(--color-bg-soft);
  color: var(--color-text-heading);
  border-radius: var(--radius-base);
}

.skip-link:focus {
  left: var(--space-16);
  top: var(--space-16);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background-color: var(--color-bg-soft);
  box-shadow: 0 0 100px rgba(0 0 0 / .05);
}

@media (width > 600px) {

#wpadminbar ~ .site-header {
      top: 32px;
  }
    }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-0);
  padding-block: var(--space-16);
}

@media (min-width: 768px) {

.site-header__inner {
    gap: var(--space-16);
}
  }

.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 122px;
}

@media (min-width: 1024px) {

.site-header__logo {
    max-width: none;
}
  }

.site-header__logo img {
  height: 36px;
  width: auto;
}

/* --- Mobile toggle (burger) --------------------------------------------- */
.site-header__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-8);
}
@media (min-width: 1024px) {
.site-header__toggle {
    display: none;
}
  }

.site-header__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-text-heading);
  border-radius: var(--radius-full);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Nav (mobile: collapsible panel) ------------------------------------ */
.site-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-16);
  background-color: var(--color-bg-soft);
  border-bottom: var(--border-width) solid var(--color-gray-200);
  box-shadow: var(--shadow-md);
}
@media (min-width: 1024px) {
.site-nav {
    display: contents;
}
  }

.site-nav.is-open {
  display: flex;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {

.site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 0;
}
  }

@media (min-width: 1440px) {

.site-nav__list {
    gap: var(--space-12);
}
  }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8);
  font-size: var(--text-18); /* 18px */
  line-height: var(--lh-150);
  font-weight: var(--fw-700);
  color: var(--color-black);
  transition: color 0.18s ease;
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--color-primary);
}

/* Login + Action buttons. On mobile they sit inside the collapsible menu
   panel (the parent .site-nav is hidden until toggled), stacked full-width;
   on desktop the menu is `display: contents`, so this block lays out inline
   at the right of the header row. The primary Action is also shown in the
   mobile top bar via .site-header__waitlist. */
.site-nav__actions {
  display: flex;
  flex-direction: row;
  gap: var(--space-12);
  align-items: flex-start;
}
@media (min-width: 1024px) {
.site-nav__actions {
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
}
  }

/* Full-width buttons in the mobile menu; natural width on desktop. */
.site-nav__actions .btn {
  width: auto;
}

/* Login text link keeps the ghost look; no fill, aligns with the CTA. */
.site-header__login {
  justify-content: center;
}

@media (min-width: 768px) {

.site-nav__btn--login {
    order: -1;
}
  }

/* Mobile-only waitlist button: sits right of the nav, left of the burger. */
.site-header__login,
.site-header__waitlist {
  margin-left: auto;
  padding: 6px 12px;
  line-height: 20px;
  font-size: 12px;
}
.btn + :is(.site-header__login,.site-header__waitlist) {
    margin-left: 0;
  }
:is(.site-header__login,.site-header__waitlist):has( ~ .is-open) {
    display: none;
  }
@media (min-width: 1024px) {
.site-header__login,
.site-header__waitlist {
    display: none;
}
  }

.site-header {
  position: sticky; /* ensure the absolute nav anchors to header */
}

/* The header inner needs positioning context for the mobile nav panel. */
.site-header__inner {
  position: relative;
}
/* =========================================================================
 * footer.pcss — global footer band + copyright bar.
 * Figma: black background; brand column left, Legal column right.
 * pt 80 / pb 64 desktop. Mobile-first stacks the columns.
 * ========================================================================= */

.site-footer {
  background-color: var(--color-black);
  color: var(--color-white);
  padding-block: var(--space-48) var(--space-40);
}

.site-footer__cols {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

@media (min-width: 1024px) {

.site-footer__cols {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-64);
}
  }

/* --- Brand column ------------------------------------------------------- */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  max-width: 443px;
}

.site-footer__logo img {
  height: 36px;
  width: auto;
}

.site-footer__text {
  font-size: var(--text-16);
  color: var(--color-white);
}

.site-footer__email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-16);
  color: var(--color-white);
  transition: color 0.18s ease;
}

.site-footer__email:hover {
  color: var(--color-primary-200);
}

.site-footer__email-icon {
  display: inline-flex;
  color: var(--color-white);
  margin-bottom: -2px;
}

.site-footer__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.site-footer__social-title {
  color: var(--color-white);
  font-weight: var(--fw-600);
}

.site-footer__social-list {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__social-link {
  display: inline-flex;
  color: var(--color-white);
  transition: color 0.18s ease;
}

.site-footer__social-link:hover {
  color: var(--color-primary-200);
}

/* --- Legal column ------------------------------------------------------- */
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
@media (min-width: 1024px) {
.site-footer__legal {
    width: 220px;
    flex-shrink: 0;
}
  }

.site-footer__legal-title {
  color: var(--color-white);
  font-weight: var(--fw-600);
  margin: 0;
}

.site-footer__legal-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__legal-link {
  color: var(--color-white);
  transition: color 0.18s ease;
  font-size: var(--text-16);
}

.site-footer__legal-link:hover {
  color: var(--color-primary-200);
}

/* --- Copyright bar ------------------------------------------------------ */
.site-copyright {
  background-color: var(--color-black);
  border-top: var(--border-width) solid var(--color-gray-700);
  color: var(--color-gray-300);
  padding-block: var(--space-24);
}

.site-copyright__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

@media (min-width: 1024px) {

.site-copyright__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-32);
}
  }

.site-copyright__text,
.site-copyright__disclaimer {
  font-size: var(--text-16);
  line-height: var(--lh-130);
  color: var(--color-gray-300);
  margin: 0;
}

@media (min-width: 1024px) {
  .site-copyright__disclaimer {
    text-align: right;
    max-width: 634px;
  }
}
/* =========================================================================
 * popup.pcss — single modal that hosts the "Join Waitlist" CF7 form.
 * Opened from header (Join Waitlist), hero (Get Started) and CTA.
 * ========================================================================= */

.popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: flex-end;
}

@media (min-width: 768px) {

.popup {
    align-items: center;
    padding: var(--space-16);
}
  }

.popup.is-open {
  display: flex;
}

.popup__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(19, 7, 46, 0.6); /* Primary/950 @ 60% */
  backdrop-filter: blur(2px);
}

.popup__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: calc(100vh - var(--space-32));
  background-color: var(--color-bg-soft);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-32) var(--space-16);
}

@media (min-width: 768px) {

.popup__dialog {
    max-width: 480px;
    border-radius: var(--radius-lg);
}
  }

@media (min-width: 1024px) {

.popup__dialog {
    max-width: 930px;
    padding: var(--space-32);
}
  }

.popup__close {
  position: absolute;
  top: var(--space-32);
  right: var(--space-16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-primary-950);
  transition: background-color 0.18s ease, color 0.18s ease;
}

@media (min-width: 768px) {

.popup__close {
    right: var(--space-24);
}
  }

@media (min-width: 1024px) {

.popup__close {
    top: auto;
    right: 0;
    bottom: calc(100% + 1.0416vw);
    color: var(--color-bg-muted);
}
  }

.popup__content {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.popup__media {
  border-radius: var(--radius-base);
  overflow: clip;
}

.popup__head {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
  align-items: stretch;
}

@media (min-width: 768px) {

.popup__head {
    text-align: left;
}
  }

@media (min-width: 1024px) {

.popup__head {
    width: 50%;
}
  }

.popup__media img {
  display: none;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 1024px) {

.popup__media img {
    display: block;
}
  }

.popup__title {
  margin-bottom: var(--space-8);
}

.popup__text {
  margin-bottom: var(--space-20);
  color: var(--color-text-body);
}

/* -------------------------------------------------------------------------
 * CF7 waitlist form — single line: one input + one button.
 * ---------------------------------------------------------------------- */
.popup .subscription-form {
  position: relative;
  width: 100%;
  text-align: left;
}

.popup .subscription-form br {
  display: none;
}

.popup .subscription-form label {
  display: block;
  margin: 0 0 10px 0;
  font-size: var(--text-14);
  font-weight: var(--fw-500);
  line-height: var(--lh-140);
  color: var(--color-text-heading);
}

.popup .subscription-form p + p {
  margin-top: 16px;
}

.popup .subscription-form p:has(input[type="submit"]) {
  margin-top: 24px;
}

.popup .wpcf7 {
  margin-top: var(--space-24);
  width: 100%;
}

.popup .wpcf7-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
}

.popup .wpcf7-form-control-wrap {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.popup .wpcf7-form textarea,
.popup .wpcf7-form input[type="email"],
.popup .wpcf7-form input[type="text"] {
  width: 100%;
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-base);
  background-color: var(--color-bg-muted);
  color: var(--color-text-body);
  font-size: var(--text-16);
  line-height: 20px;
  text-overflow: ellipsis;
}

@media (min-width: 1024px) {

.popup .wpcf7-form textarea,
.popup .wpcf7-form input[type="email"],
.popup .wpcf7-form input[type="text"] {
    font-size: var(--text-14);
}
  }

.popup .wpcf7-form textarea:focus,
.popup .wpcf7-form input[type="email"]:focus,
.popup .wpcf7-form input[type="text"]:focus {
  outline: 1px solid var(--color-primary);
  outline-offset: 0;
}

.popup .wpcf7-form input[type="submit"] {
  flex: 0 0 auto;
  padding: var(--space-12) var(--space-24);
  border: none;
  border-radius: var(--radius-base);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--fw-700);
  cursor: pointer;
  transition: background-color 0.18s ease;
  width: 100%;
}

.popup .wpcf7-form input[type="submit"]:hover {
  background-color: var(--color-primary-600);
}

/* Validation + response messages take the full width below the row. */
.popup .wpcf7-response-output,
.popup .wpcf7-form .wpcf7-not-valid-tip {
  flex-basis: 100%;
  margin: var(--space-8) 0 0;
  font-size: 14px;
}

.popup .wpcf7-spinner {
  margin: 0;
  position: absolute;
  inset: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  opacity: 0.9;
  background: #fff;
  box-shadow: 0 0 0 1px #fff;
}

:is(.popup .wpcf7-spinner):before {
    content: '';
    position: absolute;
    top: calc(50% - 14px);
    left: calc(50% - 14px);
    width: 6px;
    height: 6px;
    border: none;
    background: var(--color-primary);
    border-radius: 100%;
    transform-origin: 14px 14px;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

/* Hide the floating reCAPTCHA v3 badge. */
.grecaptcha-badge {
  visibility: hidden;
}

/* Prevent background scroll when the popup is open. */
body.popup-open {
  overflow: hidden;
}

.wpcf7-not-valid-tip {
  width: -moz-max-content;
  width: max-content;
  font-size: 12px;
  color: #dc3232;
  font-weight: 700;
}

.popup .wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 16px;
  font-weight: 700;
  color: #dc3232;
}

.popup .wpcf7 form[data-status="invalid"] .wpcf7-response-output,
.popup .wpcf7 form[data-status="spam"] .wpcf7-response-output {
  color: darkred;
}

.popup .wpcf7 form[data-status="sent"] .wpcf7-response-output {
  color: darkgreen;
}


.popup .wpcf7 .wpcf7-turnstile {
  width: 100%;
  background: #313131;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}


:is(.popup .wpcf7 .wpcf7-turnstile) div {
    display: flex;
    outline: 1px solid #313131;
    outline-offset: -1px;
  }
/* =========================================================================
 * accordion.pcss — reusable accordion (The Problem, Automated Workflow).
 * Figma: items separated by 1px top/bottom border, p 16, gap 8.
 * Header 18px SemiBold heading + 24px chevron icon; body 16px regular body.
 * ========================================================================= */

.accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.accordion__item {
  border-top: var(--border-width) solid var(--color-border-default);
  padding: var(--space-16);
}

.accordion__item:last-child {
  border-bottom: var(--border-width) solid var(--color-border-default);
}

.accordion__header {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  text-align: left;
  padding: 0;
}

.accordion__title {
  flex: 1 1 auto;
  font-size: var(--text-18); /* 18px */
  line-height: var(--lh-150);
  font-weight: var(--fw-600);
  color: var(--color-text-heading);
}

/* Optional status tag (Auto / Manual) shown before the chevron. */
.accordion__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  margin-right: var(--space-8);
  font-size: var(--text-14);
  line-height: var(--lh-140);
  font-weight: var(--fw-500);
}

.accordion__status--auto {
  color: var(--color-green-600);
}

.accordion__status--manual {
  color: var(--color-red-600);
}

.accordion__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-text-heading);
  transition: transform 0.2s ease;
}

.accordion__item.is-open .accordion__icon {
  transform: rotate(180deg);
}

/* Panel animates via max-height; collapsed by default. */
.accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

.accordion__item.is-open .accordion__panel {
  /* JS sets an explicit max-height; this is the fallback for no-JS. */
  max-height: none;
}

/* Boxed variant: a bordered card whose items are divided by inner borders
 * (used by Automated Workflow). */
.accordion--boxed {
  border: var(--border-width) solid var(--color-border-default);
  border-radius: var(--radius-base);
  background-color: var(--color-bg-soft);
  overflow: hidden;
}

.accordion--boxed .accordion__item {
  border-top: none;
  position: relative;
  padding: var(--space-16) var(--space-32);
}

:is(.accordion--boxed .accordion__item):after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-16);
    right: var(--space-16);
    border-bottom: var(--border-width) solid var(--color-border-default);
  }

:is(.accordion--boxed .accordion__item:last-child):after {
    display: none;
  }

.accordion__body {
  padding-top: var(--space-8);
  color: var(--color-text-body);
}

.accordion__body p {
  margin: 0 0 var(--space-12);
  font-size: var(--text-16);
}

@media (min-width: 1024px) {

.accordion__body p {
    font-size: var(--text-16);
}
  }

.accordion__body p:last-child {
  margin-bottom: 0;
}

.accordion__body a {
  color: #321476;
}

:is(.accordion__body a):hover,:is(.accordion__body a):focus {
    text-decoration: underline;
  }
/* =========================================================================
 * tabs.pcss — reusable tabs (The Problem: Manual / Automated).
 * Figma: violet nav bar (Primary/200) with a white pill of tab buttons,
 * active tab Primary/600; panel container white with rounded-bottom.
 * Each panel is a list of status boxes (title + text) — danger (red) for
 * the manual flow, success (green) for the automated flow.
 * ========================================================================= */

.tabs {
  width: 100%;
  box-shadow: var(--shadow);
  border-radius: var(--radius-xl);
}

/* --- Nav --------------------------------------------------------------- */
.tabs__nav {
  background-color: var(--color-primary-200);
  padding: var(--space-24);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.tabs__tablist {
  display: flex;
  gap: 0;
  padding: var(--space-4);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
}

.tabs__tab {
  flex: 1 1 0;
  margin: var(--space-4);
  padding: var(--space-10) var(--space-4);
  border-radius: var(--radius-base);
  font-size: var(--text-14);
  line-height: var(--lh-140);
  font-weight: var(--fw-500);
  color: var(--color-text-heading);
  text-align: center;
  transition: background-color 0.18s ease, color 0.18s ease;
}

@media (min-width: 1024px) {

.tabs__tab {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.tabs__tab.is-active {
  background-color: var(--color-primary-600);
  color: var(--color-text-white);
  box-shadow: var(--shadow-xs);
}

/* --- Panels ------------------------------------------------------------ */
.tabs__panels {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-border-default);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  padding: var(--space-24);
}

.tabs__panel {
  display: none;
  flex-direction: column;
  gap: var(--space-12);
}

.tabs__panel.is-active {
  display: flex;
}

/* --- Status boxes ------------------------------------------------------- */
.tabs__box {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-xs);
}

.tabs__box--danger {
  background-color: var(--color-red-50);
  border-color: var(--color-red-200);
}

.tabs__box--success {
  background-color: var(--color-green-50);
  border-color: var(--color-green-200);
}

.tabs__bullet {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
}

.tabs__box--danger .tabs__bullet {
  background-color: var(--color-red-600);
}

.tabs__box--success .tabs__bullet {
  background-color: var(--color-green-600);
}

.tabs__box-content {
  display: flex;
  flex-direction: column;
  letter-spacing: var(--tracking-tight);
}

.tabs__box-title {
  font-size: var(--text-14); /* 16px on desktop */
  line-height: var(--text-body-1-lh, 1.5);
  color: var(--color-text-heading);
}

@media (min-width: 1024px) {

.tabs__box-title {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.tabs__box-title strong {
  font-weight: var(--fw-600);
}

.tabs__box-title span {
  font-weight: var(--fw-500);
}

.tabs__box-text {
  font-size: var(--text-12);
  line-height: 1.5;
  color: var(--color-gray-500);
}
/* =========================================================================
 * card.pcss — the single card component.
 *
 * Base .card: marketing card (icon + title + text) — used by How It Works,
 *   Platform Features, Built For Control, Integration. White bg, 1px border,
 *   radius-base, shadow-xs.
 * .card--post: resource/blog card (media + meta + title + excerpt + author +
 *   "Read more") — used in the Resources grid, Related band and the inline
 *   [resource_card] shortcode. Borderless, radius-xl. It is its own container
 *   query context: image on top when narrow, image on the right when wide.
 * ========================================================================= */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  height: 100%;
  padding: var(--space-24);
  background-color: var(--color-bg-soft);
  border: var(--border-width) solid var(--color-border-default);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-xs);
  overflow: clip;
  position: relative;
}

.card a {
    text-decoration: none !important;
    color: var(--color-secondary-950) !important;
  }

.card:has(.card__link):after {
    content: '';
    position: absolute;
    left: -150%;
    top: -220%;
    height: 220%;
    aspect-ratio: 1;
    display: block;
    opacity: 0;
    border-radius: 100%;
    background-image: radial-gradient(#4a3aff66 0%, #4a3aff11 52%, transparent 75%);
    transition: all .3s ease-in-out;
    z-index: 1;
  }

:is(.card:has(.card__link:hover),.card:has(.card__link:focus)) .card__title {
      color: var(--color-primary-600);
    }

:is(.card:has(.card__link:hover),.card:has(.card__link:focus)):after {
      left: -50%;
      top: -120%;
      opacity: 1;
    }

/* --- Marketing card parts -------------------------------------------------- */
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}

.card__icon img,
.card__icon svg {
  width: auto;
  height: 44px;
}

.card .card__title {
  font-size: var(--text-20); /* 20px desktop */
  line-height: var(--lh-150);
  font-weight: var(--fw-600);
  color: var(--color-text-heading);
  margin-top: 0;
}

@media (min-width: 1024px) {

.card .card__title {
    font-size: var(--text-24);
}
  }

.card .card__text {
  font-size: var(--text-14); /* 16px desktop */
  line-height: var(--lh-140);
  color: var(--color-text-body);
}

@media (min-width: 1024px) {

.card .card__text {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.card .card__text p {
  margin: 0 0 var(--space-8);
}

.card .card__text p:last-child {
  margin-bottom: 0;
}

/* Fallback icon tile when no image is provided. */
.card__icon--placeholder {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-base);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-white);
}

/* --- Post/resource card ----------------------------------------------------
 * The card is its own query container: the image sits on top when the card is
 * narrow and moves to the right when the card is wide (see @container below).
 * ------------------------------------------------------------------------- */
.card--post {
  border: none;
  border-radius: var(--radius-xl);
  position: relative;
  container-type: inline-size;
  width: 100%;
  container-name: card-container;
}

.card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  height: 100%;
  z-index: 2;
  position: relative;
}

.card__media {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  -o-object-fit: cover;
     object-fit: cover;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 1 1 auto;
}

@media (min-width: 1024px) {

.card__body {
    gap: var(--space-24);
}
  }

.card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.card__category {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  background-color: var(--color-primary-100);
  color: var(--color-primary-600);
  font-size: var(--text-14);
  font-weight: var(--fw-500);
  white-space: nowrap;
}

@media (min-width: 1024px) {

.card__category {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.card__readtime {
  font-size: var(--text-14);
  color: var(--color-text-heading);
}

@media (min-width: 1024px) {

.card__readtime {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.card--post .card__title {
  color: var(--color-primary-950);
}

.card--post .card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}

.card--post:has(.card__link:hover) .card__title a {
  color: var(--color-primary-600);
}

.card--post .card__text {
  color: var(--color-text-body);
}

.card--post .card__text p {
  margin: 0;
}

.card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-top: auto;
}

.card__author {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.card__author-avatar {
  max-width: 32px;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.card__author-meta {
  display: flex;
  flex-direction: column;
}

.card__author-name {
  font-size: var(--text-14);
  font-weight: var(--fw-500);
  color: var(--color-text-heading);
  line-height: 1;
}

.card__author-position {
  font-size: var(--text-14);
  color: var(--color-text-body);
}

.card__link {
  align-self: flex-start;
}

.card__link:before {
    content: '';
    position: absolute;
    inset: 0;
  }

.card__link:after {
    content: '';
    display: inline-block;
    background-size: 100%;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' aria-hidden='true'%3E%3Cpath d='M3.75 9h10.5m0 0-4-4m4 4-4 4' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

.card__link svg {
  width: 18px;
  height: 18px;
}

/* --- Wide card: image right, content left ----------------------------------
 * Container query on the card itself: when the card is wider than 600px it
 * switches from stacked (image top) to horizontal (image right, text left).
 * ------------------------------------------------------------------------- */
@container card-container (min-width: 900px) {
  .card__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-40);
  }

  .card__inner .card__body {
    order: 1;
    flex: 1 1 55%;
  }

  .card__inner .card__media {
    order: 2;
    flex: 1 1 45%;
  }

  .card--post .card__media img {
    aspect-ratio: 4 / 3;
  }
}
/* =========================================================================
 * pricing-table.pcss — pricing card (price header + tier table + checklist)
 * and the supporting "examples" / "beta" cards. Figma 441:17404.
 * ========================================================================= */

/* --- Main pricing card -------------------------------------------------- */
.pricing-card {
  background-color: var(--color-bg-soft);
  border: var(--border-width) solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: var(--space-24);
}
@media (min-width: 1024px) {
.pricing-card {
    padding: var(--space-32);
}
  }

.pricing-card__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: flex-start;
  justify-content: space-between;
}

@media (min-width: 1024px) {

.pricing-card__top {
    flex-direction: row;
    align-items: center;
}
  }

.pricing-card__price-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: flex-start;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
}

.pricing-card__price-value {
  font-size: var(--text-38);
  line-height: 1;
  font-weight: var(--fw-700);
  color: var(--color-text-heading);
}

@media (min-width: 1024px) {

.pricing-card__price-value {
    font-size: var(--text-48);
}
  }

.pricing-card__price-suffix {
  font-size: var(--text-16);
  color: var(--color-text-body);
}

.pricing-card__divider {
  height: 2px;
  background-color: var(--color-border-default);
  margin-block: var(--space-16) var(--space-24);
  border: 0;
}

.pricing-card__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

@media (min-width: 1024px) {

.pricing-card__cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-64);
}
  }

.pricing-card__col-title {
  font-size: var(--text-20);
  line-height: var(--lh-150);
  font-weight: var(--fw-600);
  color: var(--color-text-heading);
  margin-bottom: var(--space-16);
}

@media (min-width: 1024px) {

.pricing-card__col-title {
    font-size: var(--text-24);
}
  }

/* --- Tier table --------------------------------------------------------- */
.pricing-tiers {
  display: flex;
  flex-direction: column;
}

.pricing-tiers__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-sm);
}

.pricing-tiers__row.is-highlight {
  background-color: var(--color-primary-100);
}

.pricing-tiers__label {
  font-size: var(--text-14);
  color: var(--color-text-body);
}

@media (min-width: 1024px) {

.pricing-tiers__label {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.pricing-tiers__value {
  font-size: var(--text-14);
  color: var(--color-text-body);
  font-weight: var(--fw-700);
  text-align: right;
  white-space: nowrap;
}

@media (min-width: 1024px) {

.pricing-tiers__value {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.pricing-tiers__row.is-highlight .pricing-tiers__value {
  color: var(--color-primary-600);
  font-weight: var(--fw-600);
}

/* --- Included checklist ------------------------------------------------- */
.pricing-included__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pricing-included__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-14);
  color: var(--color-text-heading);
}

@media (min-width: 1024px) {

.pricing-included__item {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.pricing-included__check {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary);
}

/* --- Extras: examples + beta ------------------------------------------- */
.pricing-extras {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  margin-top: var(--space-24);
}
@media (min-width: 1024px) {
.pricing-extras {
    grid-template-columns: 1fr 1fr;
}
  }

.pricing-examples {
  background-color: var(--color-bg-soft);
  border: var(--border-width) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
}

.pricing-examples__title {
  font-size: var(--text-20);
  font-weight: var(--fw-600);
  color: var(--color-text-heading);
  margin-bottom: var(--space-16);
}

@media (min-width: 1024px) {

.pricing-examples__title {
    font-size: var(--text-24);
}
  }

.pricing-examples__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-8);
}

.pricing-examples__row span {
    width: 33.3333%;
  }

.pricing-examples__matters {
  color: var(--color-text-heading);
  font-size: var(--text-14);
}

@media (min-width: 1024px) {

.pricing-examples__matters {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.pricing-examples__price {
  color: var(--color-text-body);
  font-weight: var(--fw-600);
  font-size: var(--text-14);
}

@media (min-width: 1024px) {

.pricing-examples__price {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.pricing-examples__avg {
  color: var(--color-text-body);
  font-size: var(--text-14);
}

@media (min-width: 1024px) {

.pricing-examples__avg {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.pricing-beta {
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary-600) 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  align-items: flex-start;
  border: 1px solid var(--color-primary-950);
}

.pricing-beta,.pricing-beta * {
    color: var(--color-white);
  }

.pricing-beta .eyebrow {
    color: var(--color-primary-600);
  }

.pricing-beta h3 {
    margin: var(--space-4) 0;
    font-weight: var(--fw-600);
    font-size: var(--text-30); line-height: var(--lh-130);
  }

@media (min-width: 1024px) {

.pricing-beta h3 {
      font-size: var(--text-32);
      line-height: .875;
  }
    }

.pricing-beta__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-primary-600);
  font-size: var(--text-14);
  font-weight: var(--fw-500);
}

@media (min-width: 1024px) {

.pricing-beta__badge {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.pricing-beta__title {
  color: var(--color-white);
}

.pricing-beta__text {
  color: var(--color-white);
}
/* =========================================================================
 * resources.pcss — Resources archive template.
 * Hero (white) + dark archive band with filter chips and a card grid.
 * From the Resources screenshots (desktop 2-up, mobile 1-up + scrollable
 * filter with prev/next arrows).
 * ========================================================================= */

/* --- Hero --------------------------------------------------------------- */
.resource-hero {
  padding-block: var(--space-80);
  background-color: var(--color-bg-soft);
}

.resource-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: flex-start;
}

.resource-hero__title {
  color: var(--color-primary-950);
  max-width: 900px;
}

.resource-hero__text {
  color: var(--color-text-body);
  max-width: 720px;
}

/* --- Dark archive band -------------------------------------------------- */
.resource-archive {
  padding-block: var(--space-64);
  background-color: var(--color-white);
}

/* --- Filter ------------------------------------------------------------- */
.resource-filter {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
@media (min-width: 1024px) {
.resource-filter {
    justify-content: center;
}
  }

.resource-filter__scroll {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--space-8);
}

@media (min-width: 1024px) {

.resource-filter__scroll {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
}
  }

.resource-filter__scroll::-webkit-scrollbar {
  display: none;
}

.resource-filter__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-10) var(--space-16);
  border-radius: var(--radius-full);
  background-color: var(--color-primary-100);
  color: var(--color-primary-600);
  font-size: var(--text-14);
  font-weight: var(--fw-500);
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}

@media (min-width: 1024px) {

.resource-filter__chip {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.resource-filter__chip:hover {
  background-color: var(--color-primary-200);
}

.resource-filter__chip.is-active {
  background-color: var(--color-primary-600);
  color: var(--color-white);
}

/* Prev/next scroll arrows (mobile). */
.resource-filter__arrow {
  display: none;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-white);
}

/* --- Archive head + pagination (category/tag pages) --------------------- */
.resource-archive__head {
  margin-bottom: var(--space-8);
}

.resource-archive .pagination {
  margin-top: var(--space-48);
}

.resource-archive .pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
  justify-content: center;
}

.resource-archive .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--color-border-default);
  color: var(--color-text-heading);
  font-weight: var(--fw-500);
}

.resource-archive .pagination .page-numbers.current,
.resource-archive .pagination .page-numbers:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* --- Grid --------------------------------------------------------------- */
.resource-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  margin-top: var(--space-40);
  list-style: none;
  padding: 0;
}
@media (min-width: 1024px) {
.resource-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-32);
}
  }

.resource-grid__item {
  display: flex;
}

/* Empty state (spans the full grid width). */
.resource-grid__empty {
  grid-column: 1 / -1;
  list-style: none;
}

.resource-empty {
  margin: 0;
  padding: var(--space-48) var(--space-24);
  text-align: center;
  color: var(--color-white);
}

/* Loading state for AJAX swaps. */
.resource-grid.is-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* --- Load More ---------------------------------------------------------- */
.resource-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-40);
}

.resource-more[hidden] {
  display: none;
}

.resource-more__btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* --- Mobile filter arrows ---------------------------------------------- */
@media (max-width: 767px) {
  .resource-filter__arrow {
    display: inline-flex;
  }
}

.resource-featured-band {
  background-color: var(--color-primary-950);
  color: var(--color-white);
  padding: var(--space-80) 0;
}

.page-template-page-resources .section.hero {
  padding-block: var(--space-40);
}
/* =========================================================================
 * formula.pcss — the "formula" block inserted by the TinyMCE formula button.
 * Markup: <div class="formula"><span class="formula__label">…</span>
 *         <span class="formula__text">…</span></div>
 * Figma (Post page): centred lavender box, bold label + regular text.
 * ========================================================================= */

.formula {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-6);
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: var(--space-24) auto;
  padding: var(--space-12) var(--space-20);
  background-color: var(--color-primary-100);
  border-radius: var(--radius-base);
  font-size: var(--text-14);
  line-height: 1.5;
  color: var(--color-text-heading);
  text-align: center;
}

.formula__label {
  font-weight: var(--fw-600);
}

.formula__text {
  font-weight: var(--fw-400);
}
/* =========================================================================
 * post-content.pcss — single resource (article) page.
 * Post hero (breadcrumbs, two-tone title, author/category/read-time),
 * article body typography (headings, paragraphs, lists, links, tables,
 * images, formulas, inline post-cards) and the "Continue The Series" band.
 * Built from the Post page screenshots.
 * ========================================================================= */

/* --- Hero --------------------------------------------------------------- */
.post-hero {
  background-color: var(--color-bg-soft);
}

.post-hero {
  overflow: clip;
}

.post-hero__inner {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-40);
  gap: var(--space-24);
  background-image: url('.');
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.post-hero__inner .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
  }

.post-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-14);
  color: var(--color-text-body);
}

@media (min-width: 1024px) {

.post-breadcrumbs {
    font-size: var(--text-16);
}
  }

.post-breadcrumbs a {
  color: var(--color-text-body);
  transition: color 0.18s ease;
}

.post-breadcrumbs a:hover {
  color: var(--color-primary-600);
}

.post-breadcrumbs__sep {
  color: var(--color-gray-300);
}

.post-breadcrumbs__current {
  color: var(--color-text-heading);
  max-width: 220px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: clip;
}

.post-hero__title {
  color: var(--color-primary-950);
}

.post-hero__title h1 {
    font-size: var(--text-38);
    line-height: var(--lh-140);
    font-weight: var(--fw-700);
    letter-spacing: var(--tracking-tight);
  }

@media (min-width: 1024px) {

.post-hero__title h1 {
      font-size: var(--text-44); line-height: var(--lh-140); font-weight: var(--fw-600);
  }
    }

.post-hero__image {
  margin: 0 0 var(--space-24) 0;
}

.post-hero__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  -o-object-fit: cover;
     object-fit: cover;
}

.post-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}

.post-hero__author {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
}

@media (min-width: 768px) {

.post-hero__author {
    width: auto;
}
  }

.post-hero__author-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.post-hero__author-meta {
  display: flex;
  flex-direction: column;
}

.post-hero__author-name {
  font-size: var(--text-14);
  font-weight: var(--fw-700);
  color: var(--color-text-heading);
}

@media (min-width: 1024px) {

.post-hero__author-name {
    font-size: var(--text-16);
}
  }

.post-hero__author-position {
  font-size: var(--text-14);
  color: var(--color-text-body);
}

@media (min-width: 1024px) {

.post-hero__author-position {
    font-size: var(--text-16);
}
  }

.post-hero__category {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  background-color: var(--color-primary-100);
  color: var(--color-primary-600);
  font-size: var(--text-14);
  font-weight: var(--fw-500);
  transition: all .2s ease-in-out;
}

@media (min-width: 1024px) {

.post-hero__category {
    font-size: var(--text-16);
}
  }

.post-hero__category:hover {
    background-color: var(--color-primary-600);
    color: var(--color-primary-100);
  }

.post-hero__readtime {
  font-size: var(--text-14);
  color: var(--color-text-heading);
}

@media (min-width: 1024px) {

.post-hero__readtime {
    font-size: var(--text-16);
}
  }

/* --- Article body ------------------------------------------------------- */
.post-body {
  padding-bottom: var(--space-40) var(--space-64);
}

.post-body__inner {
  margin-inline: auto;
}

.post-content {
  color: var(--color-text-heading);
  font-size: var(--text-16);
  line-height: var(--lh-150);
}

@media (min-width: 1024px) {

.post-content {
    font-size: var(--text-20);
}
  }

/* Vertical rhythm: between sections and between blocks inside a section. */
.post-section {
  padding-block: var(--space-64);
}
@media (min-width: 1024px) {
.post-section {
    padding-block: var(--space-80);
}
  }
.post-section:first-child {
    padding-top: 0;
  }
.post-section:nth-child(even) {
    background-color: var(--color-primary-50);
  }

.post-section > .container > *:first-child {
  margin-top: 0 !important;
}
.post-section > .container > *:last-child {
  margin-bottom: 0 !important;
}

.post-section > .container > * {
  margin-bottom: 16px;
}

@media (min-width: 1024px) {

.post-section > .container > * {
    margin-bottom: 24px;
}
  }

.card:is(.post-section > .container > *) {
    margin-block: 32px;
  }

.post-content h2 {
  margin-top: var(--space-40);
  font-size: var(--text-30);
  line-height: var(--lh-130);
  font-weight: var(--fw-600);
  color: var(--color-primary-950);
}

@media (min-width: 1024px) {

.post-content h2 {
    font-size: var(--text-40); line-height: var(--lh-150);
}
  }

.post-content h3 {
  margin-top: var(--space-32);
  font-size: var(--text-28);
  line-height: var(--lh-130);
  font-weight: var(--fw-600);
  color: var(--color-primary-950);
}

@media (min-width: 1024px) {

.post-content h3 {
    font-size: var(--text-36); line-height: var(--lh-140);
}
  }

.post-content p {
  color: var(--color-text-heading);
}

.post-content a {
  color: var(--color-primary-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-content a:hover {
  color: var(--color-primary);
}

.post-content ul,
.post-content ol {
  padding-left: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.post-content li {
  padding-left: var(--space-4);
}

.post-content img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.post-content figure {
  margin: 0;
}

.post-content figcaption {
  margin-top: var(--space-8);
  font-size: var(--text-14);
  color: var(--color-text-body);
  text-align: center;
}

@media (min-width: 1024px) {

.post-content figcaption {
    font-size: var(--text-16);
}
  }

/* Table scroll wrapper — lets wide tables scroll horizontally on mobile. */
.post-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--color-border-default);
}

/* Tables (e.g. DSO benchmarks): violet header, striped rows, rounded. */
.post-content table {
  min-width: 640px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: var(--text-14);
}
@media (min-width: 1024px) {
.post-content table {
    font-size: var(--text-16);
}
  }

.post-content thead th,
.post-content thead td {
  background-color: var(--color-primary-600);
  color: var(--color-text-white);
  text-align: left;
  font-weight: var(--fw-600);
  padding: var(--space-16) var(--space-20);
}

.post-content tbody td {
  padding: var(--space-16) var(--space-20);
  color: var(--color-text-heading);
  border-bottom: var(--border-width) solid var(--color-border-default);
  vertical-align: top;
}

.post-content tbody tr:nth-child(odd) td {
  background-color: var(--color-primary-50);
}

/* Spacing around block-level inserts (formula, inline post card). */
.post-content .formula,
.post-content .card--post {
  margin-block: var(--space-24);
}

/* Inline post card inside content gets a border to separate it. */
.post-content .card--post {
  border: var(--border-width) solid var(--color-border-default);
}

/* --- Continue The Series (related) -------------------------------------- */
.post-related {
  padding-block: var(--space-64);
  background-color: var(--color-primary-50);
  //background-image: url("data:image/svg+xml,%3Csvg width='1441' height='1922' viewBox='0 0 1441 1922' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.24'%3E%3Cpath d='M835.87 454.837L835.687 454.407L835.687 454.407L835.87 454.837ZM388.105 782.289L388.053 781.825L388.052 781.825L388.105 782.289ZM2.05476 669.689L1.97133 669.23L1.97133 669.23L2.05476 669.689ZM1460.45 556.241L1460.85 556.002C1407.96 465.855 1301.8 418.679 1183.86 404.918C1065.91 391.156 936.071 410.8 835.687 454.407L835.87 454.837L836.053 455.266C936.282 411.725 1065.95 392.104 1183.75 405.847C1301.55 419.592 1407.37 466.692 1460.05 556.48L1460.45 556.241ZM835.87 454.837L835.687 454.407C719.991 504.681 657.413 580.722 599.089 647.068C540.761 713.419 486.716 770.04 388.053 781.825L388.105 782.289L388.158 782.754C487.201 770.924 541.452 714.044 599.786 647.686C658.124 581.323 720.576 505.445 836.053 455.266L835.87 454.837ZM388.105 782.289L388.052 781.825C298.016 792.608 233.913 758.471 176.109 724.598C118.343 690.747 66.7649 657.072 1.97133 669.23L2.05476 669.689L2.13813 670.149C66.5215 658.069 117.771 691.497 175.637 725.407C233.465 759.294 297.799 793.576 388.158 782.754L388.105 782.289ZM2.05476 669.689L1.97133 669.23C-57.594 680.409 -120.373 728.804 -178.73 850.02C-237.088 971.237 -291.066 1165.36 -333 1468.16L-332.539 1468.22L-332.078 1468.28C-290.149 1165.52 -236.187 971.511 -177.892 850.424C-119.597 729.338 -57.0111 681.25 2.13813 670.149L2.05476 669.689Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M22.2601 685.28L22.1586 684.823L22.158 684.824L22.2601 685.28ZM263.741 765.498L263.917 765.064L263.91 765.062L263.741 765.498ZM406.207 785.101L406.158 784.636L406.157 784.636L406.207 785.101ZM745.889 536.42L746.17 536.792L746.171 536.791L745.889 536.42ZM856.917 470.035L857.105 470.462L857.106 470.461L856.917 470.035ZM-310.062 1484.17L-309.6 1484.23C-267.95 1185.71 -214.494 992.861 -156.666 871.249C-98.8365 749.636 -36.6728 699.332 22.362 685.736L22.2601 685.28L22.158 684.824C-37.2723 698.511 -99.6165 749.11 -157.505 870.849C-215.395 992.589 -268.867 1185.54 -310.523 1484.11L-310.062 1484.17ZM22.2601 685.28L22.3614 685.736C66.136 675.715 104.008 687.041 142.166 705.25C161.252 714.358 180.384 725.176 200.37 735.901C220.347 746.623 241.161 757.244 263.571 765.935L263.741 765.498L263.91 765.062C241.554 756.392 220.78 745.792 200.811 735.076C180.851 724.363 161.681 713.525 142.569 704.405C104.332 686.158 66.2306 674.734 22.1586 684.823L22.2601 685.28ZM263.741 765.498L263.565 765.932C308.722 784.255 357.753 791.001 406.256 785.566L406.207 785.101L406.157 784.636C357.807 790.054 308.931 783.329 263.917 765.064L263.741 765.498ZM406.207 785.101L406.256 785.566C485.734 776.718 537.045 740.262 585.32 693.155C633.614 646.031 678.791 588.351 746.17 536.792L745.889 536.42L745.608 536.048C678.178 587.647 632.85 645.476 584.673 692.486C536.477 739.514 485.351 775.819 406.158 784.636L406.207 785.101ZM745.889 536.42L746.171 536.791C780.455 510.402 817.688 488.14 857.105 470.462L856.917 470.035L856.729 469.608C817.245 487.315 779.949 509.616 745.607 536.049L745.889 536.42ZM856.917 470.035L857.106 470.461C957.122 425.211 1084.27 401.013 1199.76 409.519C1315.25 418.026 1418.97 459.231 1472.27 544.666L1472.67 544.416L1473.06 544.167C1419.53 458.369 1315.46 417.103 1199.83 408.586C1084.19 400.069 956.881 424.296 856.727 469.608L856.917 470.035Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M42.1845 701.026L42.0647 700.575L42.0646 700.575L42.1845 701.026ZM281.724 769.985L281.887 769.546L281.882 769.544L281.724 769.985ZM423.981 788.05L424.026 788.516L424.026 788.516L423.981 788.05ZM766.945 551.73L767.222 552.105L767.222 552.104L766.945 551.73ZM877.683 485.389L877.878 485.813L877.878 485.813L877.683 485.389ZM-287.577 1500.04L-287.116 1500.1C-245.738 1205.84 -192.805 1014.17 -135.489 892.075C-78.1726 769.974 -16.5074 717.506 42.3044 701.478L42.1845 701.026L42.0646 700.575C-17.1228 716.706 -78.9574 769.457 -136.331 891.679C-193.706 1013.9 -246.654 1205.67 -288.038 1499.98L-287.577 1500.04ZM42.1845 701.026L42.3044 701.478C85.5307 689.701 123.207 699.017 161.158 715.25C180.141 723.37 199.171 733.21 219.005 743.005C238.831 752.796 259.447 762.534 281.567 770.426L281.724 769.985L281.882 769.544C259.815 761.671 239.238 751.952 219.419 742.165C199.607 732.381 180.54 722.522 161.527 714.389C123.487 698.118 85.58 688.719 42.0647 700.575L42.1845 701.026ZM281.724 769.985L281.561 770.424C327.009 787.279 375.736 793.467 424.026 788.516L423.981 788.05L423.936 787.585C375.787 792.521 327.203 786.352 281.887 769.546L281.724 769.985ZM423.981 788.05L424.026 788.516C502.619 780.444 554.425 746.681 603.582 702.269C628.147 680.074 652.073 655.198 678.332 629.557C704.599 603.908 733.222 577.47 767.222 552.105L766.945 551.73L766.669 551.355C732.621 576.756 703.964 603.226 677.684 628.888C651.396 654.558 627.509 679.395 602.961 701.574C553.889 745.91 502.261 779.541 423.936 787.585L423.981 788.05ZM766.945 551.73L767.222 552.104C801.749 526.24 838.832 504.024 877.878 485.813L877.683 485.389L877.489 484.965C838.385 503.203 801.247 525.452 766.668 551.355L766.945 551.73ZM877.683 485.389L877.878 485.813C977.828 439.16 1102.46 410.377 1215.59 413.56C1328.74 416.744 1430.27 451.893 1484.21 532.976L1484.6 532.715L1484.98 532.454C1430.81 451.006 1328.9 415.812 1215.62 412.625C1102.33 409.437 977.558 438.256 877.489 484.965L877.683 485.389Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M62.2245 716.683L62.3623 717.13L62.3623 717.13L62.2245 716.683ZM299.87 774.401L300.02 773.958L300.015 773.956L299.87 774.401ZM441.786 790.984L441.827 791.45L441.827 791.45L441.786 790.984ZM788.032 567.024L788.304 567.403L788.305 567.402L788.032 567.024ZM898.538 500.588L898.337 500.166L898.337 500.166L898.538 500.588ZM-265.156 1515.86L-264.695 1515.92C-223.601 1225.97 -171.17 1035.53 -114.33 912.935C-57.4897 790.341 3.72746 735.667 62.3623 717.13L62.2245 716.683L62.0866 716.237C3.09713 734.887 -58.2788 789.832 -115.174 912.544C-172.07 1035.26 -224.517 1225.81 -265.617 1515.79L-265.156 1515.86ZM62.2245 716.683L62.3623 717.13C105.088 703.616 142.553 710.928 180.283 725.187C199.156 732.319 218.077 741.182 237.761 750.044C257.439 758.902 277.868 767.755 299.725 774.846L299.87 774.401L300.015 773.956C278.209 766.881 257.818 758.046 238.145 749.19C218.48 740.336 199.522 731.456 180.615 724.311C142.786 710.015 105.091 702.635 62.0865 716.237L62.2245 716.683ZM299.87 774.401L299.72 774.845C345.38 790.244 393.778 795.899 441.827 791.45L441.786 790.984L441.746 790.518C393.826 794.955 345.558 789.315 300.02 773.958L299.87 774.401ZM441.786 790.984L441.827 791.45C519.599 784.128 571.856 753.066 621.855 711.359C646.844 690.515 671.284 666.998 698.048 642.47C724.82 617.936 753.934 592.373 788.304 567.403L788.032 567.024L787.761 566.646C753.349 591.647 724.204 617.237 697.423 641.78C670.635 666.33 646.228 689.815 621.263 710.64C571.353 752.273 519.268 783.22 441.745 790.518L441.786 790.984ZM788.032 567.024L788.305 567.402C823.056 541.968 860.019 519.745 898.738 501.009L898.538 500.588L898.337 500.166C859.567 518.927 822.556 541.179 787.759 566.647L788.032 567.024ZM898.538 500.588L898.738 501.009C998.53 452.778 1120.63 419.412 1231.43 417.32C1342.24 415.228 1441.64 444.415 1496.2 521.145L1496.58 520.872L1496.96 520.599C1442.13 443.501 1342.35 414.29 1231.41 416.385C1120.46 418.48 998.23 451.886 898.337 500.166L898.538 500.588Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M82.3122 732.355L82.4674 732.796L82.4676 732.796L82.3122 732.355ZM318.069 778.753L318.206 778.305L318.201 778.303L318.069 778.753ZM459.822 793.817L459.859 794.283L459.86 794.283L459.822 793.817ZM809.516 582.149L809.782 582.531L809.783 582.53L809.516 582.149ZM919.58 515.859L919.374 515.44L919.373 515.44L919.58 515.859ZM-242.665 1531.84L-242.204 1531.9C-201.402 1246.16 -149.503 1056.9 -93.1553 933.814C-36.807 810.724 23.9604 753.865 82.4674 732.796L82.3122 732.355L82.1569 731.915C23.316 753.104 -37.6002 810.222 -94.001 933.427C-150.403 1056.63 -202.318 1245.99 -243.126 1531.77L-242.665 1531.84ZM82.3122 732.355L82.4676 732.796C124.65 717.581 161.925 722.892 199.456 735.158C218.229 741.294 237.052 749.164 256.591 757.076C276.123 764.986 296.363 772.932 317.938 779.202L318.069 778.753L318.201 778.303C296.674 772.048 276.472 764.117 256.942 756.208C237.419 748.303 218.559 740.416 199.748 734.268C162.109 721.967 124.607 716.604 82.1567 731.915L82.3122 732.355ZM318.069 778.753L317.933 779.2C363.836 793.149 411.985 798.266 459.859 794.283L459.822 793.817L459.786 793.351C412.029 797.324 363.998 792.219 318.206 778.305L318.069 778.753ZM459.822 793.817L459.86 794.283C536.81 787.71 589.546 759.348 640.422 720.337C665.85 700.839 690.824 678.673 718.113 655.249C745.407 631.82 775.03 607.121 809.782 582.531L809.516 582.149L809.249 581.767C774.46 606.383 744.811 631.104 717.51 654.539C690.204 677.978 665.261 700.117 639.859 719.594C589.077 758.533 536.507 786.798 459.785 793.351L459.822 793.817ZM809.516 582.149L809.783 582.53C844.718 557.65 881.494 535.5 919.786 516.277L919.58 515.859L919.373 515.44C881.038 534.685 844.221 556.86 809.247 581.767L809.516 582.149ZM919.58 515.859L919.786 516.277C1019.44 466.46 1139.01 428.517 1247.49 421.154C1355.99 413.79 1453.25 437.021 1508.46 509.393L1508.83 509.107L1509.2 508.821C1453.71 436.08 1356.04 412.849 1247.43 420.221C1138.81 427.593 1019.11 465.582 919.374 515.44L919.58 515.859Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M102.384 747.999L102.545 748.437L102.545 748.437L102.384 747.999ZM336.215 783.169L336.337 782.717L336.333 782.716L336.215 783.169ZM477.758 796.696L477.79 797.163L477.791 797.162L477.758 796.696ZM830.616 597.476L830.878 597.861L830.88 597.86L830.616 597.476ZM940.33 531.178L940.118 530.763L940.117 530.763L940.33 531.178ZM-220.334 1547.81L-219.874 1547.88C-179.301 1266.35 -128.199 1077.48 -72.4736 953.481C-16.7465 829.483 43.5733 770.434 102.545 748.437L102.384 747.999L102.224 747.56C42.9169 769.683 -17.547 828.994 -73.322 953.099C-129.099 1077.21 -180.217 1266.18 -220.795 1547.75L-220.334 1547.81ZM102.384 747.999L102.545 748.437C144.619 732.69 181.69 735.952 218.902 745.92C237.515 750.906 256.154 757.567 275.478 764.367C294.796 771.166 314.794 778.102 336.096 783.622L336.215 783.169L336.333 782.716C315.073 777.207 295.109 770.283 275.79 763.484C256.476 756.687 237.801 750.013 219.146 745.015C181.82 735.017 144.539 731.723 102.224 747.56L102.384 747.999ZM336.215 783.169L336.092 783.621C382.2 796.076 430.099 800.653 477.79 797.163L477.758 796.696L477.727 796.229C430.139 799.712 382.345 795.145 336.337 782.717L336.215 783.169ZM477.758 796.696L477.791 797.162C553.921 791.338 607.119 765.681 658.828 729.39C684.674 711.251 710.154 690.45 737.93 668.151C765.71 645.849 795.797 622.04 830.878 597.861L830.616 597.476L830.354 597.091C795.243 621.289 765.134 645.117 737.351 667.422C709.563 689.73 684.112 710.506 658.297 728.624C606.686 764.846 553.646 790.421 477.725 796.23L477.758 796.696ZM830.616 597.476L830.88 597.86C865.991 573.435 902.621 551.301 940.542 531.594L940.33 531.178L940.117 530.763C902.161 550.488 865.496 572.644 830.352 597.092L830.616 597.476ZM940.33 531.178L940.541 531.594C1040.02 480.125 1157.08 437.594 1263.24 424.975C1369.41 412.354 1464.55 429.666 1520.39 497.703L1520.75 497.404L1521.11 497.105C1464.97 428.698 1369.41 411.412 1263.13 424.046C1156.83 436.682 1039.66 479.261 940.118 530.763L940.33 531.178Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M122.356 763.487L122.168 763.06L122.166 763.061L122.356 763.487ZM354.406 787.6L354.515 787.145L354.51 787.144L354.406 787.6ZM495.708 799.604L495.735 800.071L495.737 800.07L495.708 799.604ZM851.848 612.744L852.106 613.132L852.107 613.131L851.848 612.744ZM961.239 546.504L961.022 546.091L961.021 546.092L961.239 546.504ZM-197.709 1563.66L-197.248 1563.72C-157.029 1286.49 -106.164 1099.7 -50.8 975.636C4.56489 851.568 64.4052 790.27 122.546 763.913L122.356 763.487L122.166 763.061C63.7344 789.55 3.76416 851.08 -51.6494 975.257C-107.064 1099.44 -157.945 1286.31 -198.169 1563.59L-197.709 1563.66ZM122.356 763.487L122.543 763.914C163.676 745.514 200.593 746.803 237.738 755.066C256.318 759.2 274.947 765.077 294.196 771.109C313.438 777.139 333.295 783.323 354.302 788.057L354.406 787.6L354.51 787.144C333.545 782.419 313.722 776.247 294.477 770.215C275.237 764.186 256.569 758.296 237.943 754.153C200.675 745.862 163.54 744.552 122.168 763.06L122.356 763.487ZM354.406 787.6L354.297 788.056C400.567 799.024 448.225 803.072 495.735 800.071L495.708 799.604L495.681 799.137C448.262 802.133 400.696 798.092 354.515 787.145L354.406 787.6ZM495.708 799.604L495.737 800.07C571.045 794.995 624.726 772.024 677.293 738.432C703.569 721.642 729.57 702.196 757.846 681.014C786.126 659.829 816.688 636.902 852.106 613.132L851.848 612.744L851.591 612.355C816.15 636.14 785.569 659.081 757.291 680.264C729.01 701.451 703.038 720.875 676.796 737.643C624.33 771.17 570.799 794.074 495.679 799.137L495.708 799.604ZM851.848 612.744L852.107 613.131C887.415 589.2 923.913 567.1 961.457 546.917L961.239 546.504L961.021 546.092C923.448 566.29 886.923 588.407 851.589 612.356L851.848 612.744ZM961.239 546.504L961.456 546.917C1060.8 493.862 1175.32 446.719 1279.14 428.809C1382.99 410.897 1475.99 422.251 1532.48 485.986L1532.82 485.674L1533.17 485.362C1476.36 421.256 1382.93 409.958 1278.99 427.887C1175.03 445.82 1060.41 493.012 961.022 546.091L961.239 546.504Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M142.509 779.328L142.714 779.747L142.714 779.747L142.509 779.328ZM372.571 791.969L372.666 791.511L372.661 791.51L372.571 791.969ZM513.603 802.383L513.626 802.85L513.628 802.85L513.603 802.383ZM873.026 627.883L872.774 627.491L872.774 627.492L873.026 627.883ZM982.08 561.669L982.303 562.079L982.303 562.079L982.08 561.669ZM-175.247 1579.57L-174.787 1579.64C-134.896 1306.66 -84.5704 1121.07 -29.6819 996.528C25.2075 871.981 84.6386 808.529 142.714 779.747L142.509 779.328L142.305 778.908C83.9564 807.826 24.4031 871.5 -30.533 996.153C-85.4699 1120.81 -135.811 1306.49 -175.708 1579.51L-175.247 1579.57ZM142.509 779.328L142.714 779.747C183.245 759.592 219.957 758.742 256.896 764.94C275.374 768.04 293.903 772.903 313.004 777.998C332.099 783.092 351.763 788.417 372.481 792.429L372.571 791.969L372.661 791.51C351.981 787.506 332.35 782.19 313.247 777.094C294.151 772 275.581 767.126 257.053 764.017C219.982 757.797 183.06 758.642 142.304 778.909L142.509 779.328ZM372.571 791.969L372.476 792.428C418.869 801.898 466.298 805.4 513.626 802.85L513.603 802.383L513.58 801.916C466.332 804.461 418.981 800.965 372.666 791.511L372.571 791.969ZM513.603 802.383L513.628 802.85C662.576 794.244 730.319 721.797 873.279 628.275L873.026 627.883L872.774 627.492C729.646 721.123 662.204 793.329 513.579 801.916L513.603 802.383ZM873.026 627.883L873.279 628.275C906.575 606.547 942.408 584.063 982.303 562.079L982.08 561.669L981.858 561.259C941.935 583.259 906.08 605.757 872.774 627.491L873.026 627.883ZM982.08 561.669L982.303 562.079C1081.5 507.381 1193.51 455.69 1295.03 432.55C1396.56 409.405 1487.44 414.855 1544.53 474.208L1544.87 473.882L1545.2 473.556C1487.75 413.835 1396.44 408.474 1294.83 431.638C1193.19 454.807 1081.08 506.546 981.858 561.259L982.08 561.669Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M162.521 794.917L162.301 794.505L162.301 794.506L162.521 794.917ZM390.787 796.276L390.868 795.815L390.863 795.814L390.787 796.276ZM531.624 805.185L531.642 805.652L531.644 805.652L531.624 805.185ZM894.344 643.078L894.591 643.473L894.592 643.473L894.344 643.078ZM1003.09 576.876L1002.87 576.469L1002.87 576.469L1003.09 576.876ZM-152.786 1595.49L-152.326 1595.56C-112.674 1326.82 -62.8509 1142.52 -8.45905 1017.51C45.9335 892.502 104.876 826.842 162.741 795.328L162.521 794.917L162.301 794.506C104.182 826.157 45.1256 892.027 -9.31199 1017.14C-63.7503 1142.25 -113.589 1326.65 -153.247 1595.43L-152.786 1595.49ZM162.521 794.917L162.741 795.328C202.749 773.558 239.302 770.636 276.065 774.791C294.455 776.869 312.895 780.718 331.855 784.869C350.809 789.018 370.283 793.468 390.712 796.738L390.787 796.276L390.863 795.814C370.466 792.549 351.023 788.106 332.057 783.954C313.098 779.804 294.616 775.945 276.174 773.861C239.273 769.69 202.518 772.622 162.301 794.505L162.521 794.917ZM390.787 796.276L390.707 796.737C437.218 804.694 484.459 807.683 531.642 805.652L531.624 805.185L531.606 804.718C484.489 806.745 437.314 803.761 390.868 795.815L390.787 796.276ZM531.624 805.185L531.644 805.652C678.964 798.543 750.174 735.332 894.591 643.473L894.344 643.078L894.096 642.684C749.57 734.611 678.614 797.623 531.604 804.718L531.624 805.185ZM894.344 643.078L894.592 643.473C928.218 622.07 963.983 599.691 1003.32 577.282L1003.09 576.876L1002.87 576.469C963.507 598.889 927.726 621.277 894.096 642.684L894.344 643.078ZM1003.09 576.876L1003.32 577.282C1102.23 521.02 1211.69 464.762 1310.89 436.355C1410.11 407.941 1498.88 407.44 1556.59 462.428L1556.91 462.088L1557.23 461.747C1499.14 406.396 1409.91 407.024 1310.63 435.456C1211.33 463.895 1101.78 520.201 1002.87 576.469L1003.09 576.876Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M182.633 810.651L182.868 811.054L182.868 811.054L182.633 810.651ZM408.88 800.745L408.946 800.281L408.941 800.281L408.88 800.745ZM549.455 808.177L549.468 808.645L549.471 808.645L549.455 808.177ZM915.436 658.285L915.68 658.683L915.68 658.682L915.436 658.285ZM1023.84 592.074L1023.6 591.67L1023.6 591.671L1023.84 592.074ZM-130.306 1611.36L-129.846 1611.43C-90.4819 1346.95 -41.173 1163.92 12.7387 1038.47C66.6511 913.022 125.149 845.192 182.868 811.054L182.633 810.651L182.399 810.248C124.445 844.525 65.8398 912.553 11.8841 1038.1C-42.0723 1163.66 -91.3968 1346.77 -130.767 1611.29L-130.306 1611.36ZM182.633 810.651L182.868 811.054C222.344 787.693 258.761 782.658 295.336 784.748C313.63 785.793 331.964 788.62 350.748 791.832C369.525 795.043 388.759 798.638 408.819 801.209L408.88 800.745L408.941 800.281C388.906 797.713 369.704 794.123 350.908 790.91C332.12 787.697 313.743 784.862 295.393 783.814C258.678 781.716 222.067 786.773 182.399 810.248L182.633 810.651ZM408.88 800.745L408.814 801.208C455.388 807.66 502.44 810.148 549.468 808.645L549.455 808.177L549.443 807.71C502.467 809.211 455.468 806.726 408.946 800.282L408.88 800.745ZM549.455 808.177L549.471 808.645C695.192 803.017 769.933 749.094 915.68 658.683L915.436 658.285L915.193 657.887C769.397 748.329 694.87 802.093 549.44 807.71L549.455 808.177ZM915.436 658.285L915.68 658.682C949.474 637.672 985.274 615.279 1024.07 592.478L1023.84 592.074L1023.6 591.671C984.794 614.479 948.983 636.879 915.193 657.887L915.436 658.285ZM1023.84 592.074L1024.07 592.478C1122.91 534.464 1229.86 473.59 1326.73 439.922C1423.63 406.243 1510.25 399.853 1568.6 450.51L1568.9 450.155L1569.21 449.801C1510.45 398.787 1423.37 405.345 1326.43 439.038C1229.46 472.741 1122.43 533.663 1023.6 591.67L1023.84 592.074Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M202.606 826.333L202.357 825.939L202.357 825.939L202.606 826.333ZM427.005 805.205L427.056 804.74L427.051 804.739L427.005 805.205ZM567.325 811.081L567.333 811.548L567.336 811.548L567.325 811.081ZM936.657 673.713L936.895 674.114L936.896 674.114L936.657 673.713ZM1044.73 607.561L1044.5 607.16V607.16L1044.73 607.561ZM-107.846 1627.28L-107.386 1627.34C-68.3168 1367.11 -19.5102 1185.37 33.914 1059.47C87.3388 933.568 145.366 863.552 202.855 826.727L202.606 826.333L202.357 825.939C144.651 862.903 86.5242 933.106 33.0577 1059.11C-20.4094 1185.1 -69.2313 1366.94 -108.307 1627.21L-107.846 1627.28ZM202.606 826.333L202.855 826.728C280.759 776.851 347.807 798.156 426.959 805.671L427.005 805.205L427.051 804.739C348.107 797.244 280.607 775.841 202.357 825.939L202.606 826.333ZM427.005 805.205L426.955 805.67C473.566 810.572 520.45 812.535 567.333 811.548L567.325 811.081L567.318 810.613C520.474 811.599 473.628 809.637 427.056 804.74L427.005 805.205ZM567.325 811.081L567.336 811.548C711.389 807.431 789.652 762.761 936.895 674.114L936.657 673.713L936.419 673.312C789.182 761.955 711.103 806.503 567.314 810.613L567.325 811.081ZM936.657 673.713L936.896 674.114C971.017 653.513 1006.77 631.088 1044.97 607.961L1044.73 607.561L1044.5 607.16C1006.22 630.329 970.592 652.681 936.419 673.313L936.657 673.713ZM1044.73 607.561L1044.97 607.961C1143.62 548.243 1248.04 482.785 1342.6 443.864C1437.19 404.93 1521.71 392.642 1580.71 438.94L1580.99 438.571L1581.28 438.202C1521.84 391.559 1436.86 404.057 1342.25 442.999C1247.61 481.954 1143.11 547.461 1044.5 607.16L1044.73 607.561Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M222.743 841.943L222.48 841.558L222.48 841.558L222.743 841.943ZM445.215 809.588L445.184 810.055L445.185 810.055L445.215 809.588ZM585.326 813.926L585.32 813.458L585.32 813.458L585.326 813.926ZM957.941 688.919L958.175 689.322L958.175 689.322L957.941 688.919ZM1065.75 622.763L1065.99 623.16L1065.99 623.16L1065.75 622.763ZM-85.3867 1643.19L-84.9264 1643.26C-46.129 1387.28 2.19174 1206.81 55.1513 1080.45C108.111 954.086 165.697 881.861 223.005 842.329L222.743 841.943L222.48 841.558C164.972 881.228 107.294 953.63 54.2934 1080.09C1.29264 1206.55 -47.0433 1387.11 -85.8469 1643.12L-85.3867 1643.19ZM222.743 841.943L223.005 842.329C299.895 789.323 367.331 805.26 445.184 810.055L445.215 809.588L445.246 809.121C367.551 804.336 299.702 788.324 222.48 841.558L222.743 841.943ZM445.215 809.588L445.185 810.055C489.887 812.793 535.562 815.324 585.333 814.393L585.326 813.926L585.32 813.458C535.589 814.388 489.947 811.859 445.246 809.121L445.215 809.588ZM585.326 813.926L585.333 814.393C727.733 811.739 809.552 776.386 958.175 689.322L957.941 688.919L957.708 688.515C809.143 775.544 727.489 810.808 585.32 813.458L585.326 813.926ZM957.941 688.919L958.175 689.322C992.604 669.089 1028.23 646.691 1065.99 623.16L1065.75 622.763L1065.5 622.366C1027.73 645.9 992.124 668.29 957.708 688.515L957.941 688.919ZM1065.75 622.763L1065.99 623.16C1164.46 561.736 1266.34 491.693 1358.59 447.523C1404.71 425.441 1448.38 409.844 1487.99 405.024C1527.58 400.204 1563.08 406.158 1592.88 427.146L1593.15 426.763L1593.42 426.379C1563.38 405.225 1527.63 399.256 1487.88 404.095C1448.13 408.933 1404.35 424.577 1358.19 446.679C1265.88 490.878 1163.91 560.978 1065.5 622.366L1065.75 622.763Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M242.792 857.624L243.067 858.001L243.067 858L242.792 857.624ZM463.391 813.98L463.406 813.513L463.406 813.513L463.391 813.98ZM603.26 816.794L603.258 816.326L603.258 816.326L603.26 816.794ZM979.159 704.147L979.387 704.554L979.387 704.554L979.159 704.147ZM1086.56 638.044L1086.31 637.651L1086.31 637.651L1086.56 638.044ZM-62.9287 1659.11L-62.4685 1659.18C-23.9224 1407.5 23.8616 1228.35 76.3155 1101.54C128.77 974.724 185.882 900.285 243.067 858.001L242.792 857.624L242.517 857.248C185.148 899.669 127.949 974.276 75.4559 1101.18C22.9626 1228.09 -24.8364 1407.32 -63.3889 1659.04L-62.9287 1659.11ZM242.792 857.624L243.067 858C318.932 801.831 386.826 812.293 463.375 814.448L463.391 813.98L463.406 813.513C386.966 811.36 318.695 800.847 242.517 857.248L242.792 857.624ZM463.391 813.98L463.375 814.448C508.509 815.724 554.062 817.686 603.262 817.262L603.26 816.794L603.258 816.326C554.081 816.75 508.556 814.789 463.406 813.513L463.391 813.98ZM603.26 816.794L603.261 817.262C673.644 816.732 730.166 809.925 787.857 792.558C845.543 775.193 904.376 747.276 979.387 704.554L979.159 704.147L978.93 703.741C903.946 746.448 845.182 774.326 787.593 791.662C730.01 808.996 673.58 815.797 603.258 816.326L603.26 816.794ZM979.159 704.147L979.387 704.554C1014.11 684.738 1049.69 662.319 1086.81 638.438L1086.56 638.044L1086.31 637.651C1049.19 661.53 1013.63 683.938 978.93 703.741L979.159 704.147ZM1086.56 638.044L1086.81 638.438C1185.07 575.278 1284.41 500.656 1374.36 451.238C1419.33 426.535 1461.91 408.157 1500.78 400.67C1539.65 393.185 1574.78 396.592 1604.89 415.417L1605.14 415.019L1605.39 414.622C1575.02 395.638 1539.63 392.236 1500.61 399.751C1461.6 407.265 1418.92 425.695 1373.92 450.418C1283.93 499.852 1184.47 574.551 1086.31 637.651L1086.56 638.044Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M262.84 873.312L263.127 873.679L263.127 873.679L262.84 873.312ZM481.578 818.412L481.578 818.88L481.579 818.88L481.578 818.412ZM621.074 819.758L621.07 820.225L621.071 820.225L621.074 819.758ZM1000.4 719.449L1000.62 719.858L1000.63 719.858L1000.4 719.449ZM1107.47 653.371L1107.72 653.761L1107.72 653.761L1107.47 653.371ZM-40.5388 1675.06L-40.0787 1675.13C36.4539 1180.1 149.363 963.647 263.127 873.679L262.84 873.312L262.553 872.945C148.482 963.155 35.5364 1179.95 -40.9988 1674.99L-40.5388 1675.06ZM262.84 873.312L263.127 873.679C338.009 814.443 406.306 819.297 481.578 818.88L481.578 818.412L481.578 817.944C406.365 818.361 337.728 813.477 262.553 872.945L262.84 873.312ZM481.578 818.412L481.579 818.88C527.171 818.615 572.537 820.053 621.07 820.225L621.074 819.758L621.078 819.29C572.596 819.118 527.159 817.679 481.578 817.944L481.578 818.412ZM621.074 819.758L621.071 820.225C690.627 820.387 747.619 816.276 806.178 801.628C864.737 786.981 924.839 761.804 1000.62 719.858L1000.4 719.449L1000.18 719.039C924.437 760.961 864.413 786.099 805.957 800.721C747.503 815.342 690.595 819.451 621.077 819.29L621.074 819.758ZM1000.4 719.449L1000.63 719.858C1035.65 700.381 1071.11 677.968 1107.72 653.761L1107.47 653.371L1107.21 652.98C1070.61 677.182 1035.17 699.579 1000.18 719.04L1000.4 719.449ZM1107.47 653.371L1107.72 653.761C1156.73 621.306 1205.45 585.259 1252.87 550.499C1300.29 515.735 1346.4 482.26 1390.21 454.933C1434.02 427.605 1475.5 406.444 1513.64 396.291C1551.78 386.14 1586.54 387.002 1616.97 403.664L1617.2 403.253L1617.42 402.842C1586.72 386.03 1551.69 385.197 1513.41 395.387C1475.13 405.575 1433.56 426.793 1389.72 454.139C1345.88 481.487 1299.74 514.982 1252.32 549.744C1204.9 584.509 1156.19 620.541 1107.21 652.98L1107.47 653.371Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M282.911 888.947L283.209 889.304L283.209 889.304L282.911 888.947ZM499.709 822.786L499.725 823.253L499.725 823.253L499.709 822.786ZM639.127 822.538L639.136 822.071L639.136 822.071L639.127 822.538ZM1021.61 734.645L1021.83 735.057L1021.83 735.055L1021.61 734.645ZM1128.33 668.479L1128.07 668.092L1128.07 668.094L1128.33 668.479ZM-17.9949 1690.9L-17.5349 1690.97C58.3552 1204.5 169.846 984.869 283.209 889.304L282.911 888.947L282.612 888.589C168.967 984.391 57.4391 1204.33 -18.4549 1690.83L-17.9949 1690.9ZM282.911 888.947L283.209 889.304C357.127 826.954 425.779 826.179 499.725 823.253L499.709 822.786L499.692 822.318C425.762 825.244 356.802 826.01 282.612 888.589L282.911 888.947ZM499.709 822.786L499.725 823.253C545.728 821.414 591.069 822.368 639.119 823.006L639.127 822.538L639.136 822.071C591.098 821.432 545.726 820.478 499.692 822.318L499.709 822.786ZM639.127 822.538L639.119 823.006C707.819 823.929 765.289 822.502 824.69 810.56C884.096 798.618 945.413 776.165 1021.83 735.057L1021.61 734.645L1021.39 734.233C945.038 775.307 883.808 797.722 824.512 809.643C765.211 821.564 707.822 822.993 639.136 822.071L639.127 822.538ZM1021.61 734.645L1021.83 735.055C1058.51 714.831 1094.14 692.738 1128.59 668.864L1128.33 668.479L1128.07 668.094C1093.64 691.951 1058.04 714.026 1021.38 734.235L1021.61 734.645ZM1128.33 668.479L1128.59 668.866C1177.49 635.574 1225.53 597.971 1272.01 561.211C1318.5 524.447 1363.42 488.53 1406.09 458.592C1448.76 428.652 1489.14 404.714 1526.55 391.894C1563.95 379.075 1598.33 377.385 1629.04 391.871L1629.24 391.448L1629.44 391.024C1598.44 376.4 1563.79 378.143 1526.25 391.008C1488.72 403.872 1448.25 427.87 1405.56 457.826C1362.86 487.783 1317.92 523.72 1271.44 560.477C1224.96 597.238 1176.94 634.822 1128.07 668.092L1128.33 668.479Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M302.843 904.635L303.152 904.984L303.152 904.984L302.843 904.635ZM517.912 827.163L517.88 826.696L517.879 826.696L517.912 827.163ZM657.056 825.405L657.042 825.873L657.043 825.873L657.056 825.405ZM1042.75 749.9L1042.97 750.315L1042.97 750.313L1042.75 749.9ZM1149.18 683.858L1148.92 683.475L1148.91 683.476L1149.18 683.858ZM4.45708 1706.81L4.91694 1706.89C80.2634 1228.93 190.545 1005.88 303.152 904.984L302.843 904.635L302.534 904.287C189.668 1005.42 79.3486 1228.75 3.99722 1706.74L4.45708 1706.81ZM302.843 904.635L303.152 904.984C376.121 839.549 445.133 833.067 517.944 827.629L517.912 827.163L517.879 826.696C445.04 832.136 375.751 838.63 302.534 904.287L302.843 904.635ZM517.912 827.163L517.944 827.629C564.356 824.184 609.583 824.681 657.042 825.873L657.056 825.405L657.07 824.938C609.606 823.745 564.341 823.247 517.88 826.696L517.912 827.163ZM657.056 825.405L657.043 825.873C724.935 827.536 782.888 828.801 843.128 819.571C903.378 810.34 965.902 790.614 1042.97 750.315L1042.75 749.9L1042.54 749.485C965.555 789.743 903.129 809.432 842.992 818.646C782.845 827.861 724.975 826.601 657.07 824.938L657.056 825.405ZM1042.75 749.9L1042.97 750.313C1079.83 730.6 1115.39 708.53 1149.45 684.239L1149.18 683.858L1148.91 683.476C1114.89 707.745 1079.36 729.794 1042.54 749.487L1042.75 749.9ZM1149.18 683.858L1149.45 684.241C1198.22 649.995 1245.56 610.761 1291.09 571.953C1336.62 533.14 1380.33 494.761 1421.84 462.2C1463.36 429.638 1502.65 402.922 1539.34 387.427C1576.03 371.934 1610.06 367.681 1641.1 379.962L1641.28 379.526L1641.45 379.091C1610.1 366.688 1575.79 371.019 1538.98 386.565C1502.17 402.109 1462.8 428.888 1421.27 461.463C1379.74 494.04 1336 532.441 1290.49 571.241C1244.96 610.046 1197.65 649.256 1148.92 683.475L1149.18 683.858Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M323.008 920.224L322.689 919.885L322.689 919.885L323.008 920.224ZM536.039 831.531L535.991 831.066L535.991 831.066L536.039 831.531ZM674.955 828.283L674.936 828.75L674.936 828.75L674.955 828.283ZM1064.04 765.097L1064.25 765.514L1064.25 765.512L1064.04 765.097ZM1170.13 699.079L1169.86 698.699L1169.85 698.701L1170.13 699.079ZM26.9117 1722.73L27.3714 1722.8C102.128 1253.33 211.343 1027.12 323.327 920.563L323.008 920.224L322.689 919.885C210.467 1026.67 101.214 1253.15 26.4519 1722.66L26.9117 1722.73ZM323.008 920.224L323.327 920.563C395.309 852.137 464.658 839.8 536.087 831.996L536.039 831.531L535.991 831.066C464.494 838.878 394.895 851.246 322.689 919.885L323.008 920.224ZM536.039 831.531L536.087 831.996C582.896 826.911 628.046 827.051 674.936 828.75L674.955 828.283L674.974 827.815C628.066 826.115 582.865 825.974 535.991 831.066L536.039 831.531ZM674.955 828.283L674.936 828.75C809.073 833.584 908.606 844.542 1064.25 765.514L1064.04 765.097L1063.83 764.679C908.429 843.585 809.125 832.649 674.974 827.815L674.955 828.283ZM1064.04 765.097L1064.25 765.512C1101.26 746.269 1136.75 724.184 1170.4 699.456L1170.13 699.079L1169.85 698.701C1136.24 723.401 1100.8 745.46 1063.82 764.681L1064.04 765.097ZM1170.13 699.079L1170.4 699.458C1267.64 629.276 1356.99 536.222 1437.68 465.907C1478.05 430.733 1516.25 401.247 1552.22 383.1C1588.19 364.955 1621.88 358.177 1653.24 368.323L1653.39 367.878L1653.53 367.432C1621.84 357.181 1587.89 364.062 1551.81 382.265C1515.73 400.466 1477.45 430.017 1437.07 465.201C1356.28 535.601 1267.06 628.545 1169.86 698.699L1170.13 699.079Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M343.023 935.867L343.352 936.197L343.352 936.197L343.023 935.867ZM554.152 835.894L554.216 836.357L554.216 836.357L554.152 835.894ZM692.862 831.107L692.837 831.575L692.838 831.575L692.862 831.107ZM1085.25 780.313L1085.45 780.733L1085.46 780.731L1085.25 780.313ZM1191.01 714.316L1190.73 713.941L1190.73 713.943L1191.01 714.316ZM49.3616 1738.63L49.8212 1738.7C124.057 1277.87 231.803 1048.34 343.352 936.197L343.023 935.867L342.695 935.537C230.928 1047.9 123.145 1277.68 48.902 1738.56L49.3616 1738.63ZM343.023 935.867L343.352 936.197C414.486 864.64 484.026 846.47 554.216 836.357L554.152 835.894L554.088 835.431C483.795 845.558 414.028 863.779 342.695 935.537L343.023 935.867ZM554.152 835.894L554.216 836.357C601.526 829.512 646.501 829.335 692.837 831.575L692.862 831.107L692.887 830.64C646.52 828.399 601.479 828.574 554.088 835.431L554.152 835.894ZM692.862 831.107L692.838 831.575C825.296 837.836 928.399 858.151 1085.45 780.733L1085.25 780.313L1085.05 779.893C928.253 857.183 825.422 836.905 692.886 830.64L692.862 831.107ZM1085.25 780.313L1085.46 780.731C1122.62 761.937 1158.03 739.835 1191.29 714.69L1191.01 714.316L1190.73 713.943C1157.52 739.054 1122.15 761.127 1085.04 779.895L1085.25 780.313ZM1191.01 714.316L1191.28 714.692C1288.26 642.697 1375.07 545.044 1453.47 469.487C1492.69 431.695 1529.8 399.433 1565.06 378.625C1600.31 357.818 1633.64 348.501 1665.32 356.491L1665.44 356.037L1665.55 355.583C1633.53 347.509 1599.94 356.952 1564.59 377.819C1529.24 398.686 1492.06 431.013 1452.83 468.813C1374.35 544.443 1287.64 641.993 1190.73 713.941L1191.01 714.316Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M363.109 951.594L363.446 951.915L363.447 951.915L363.109 951.594ZM572.376 840.437L572.297 839.976L572.296 839.977L572.376 840.437ZM710.848 834.126L710.817 834.593L710.818 834.593L710.848 834.126ZM1106.5 795.626L1106.7 796.048L1106.7 796.046L1106.5 795.626ZM1211.92 729.651L1211.64 729.279L1211.64 729.282L1211.92 729.651ZM71.7752 1754.55L72.2347 1754.62C145.696 1302.18 252.483 1069.55 363.446 951.915L363.109 951.594L362.772 951.273C251.61 1069.12 144.785 1301.98 71.3157 1754.48L71.7752 1754.55ZM363.109 951.594L363.447 951.915C433.693 877.318 503.396 853.247 572.455 840.898L572.376 840.437L572.296 839.977C503.102 852.35 433.194 876.489 362.772 951.273L363.109 951.594ZM572.376 840.437L572.454 840.898C620.079 832.489 665.117 831.819 710.817 834.593L710.848 834.126L710.878 833.659C665.13 830.883 620.015 831.551 572.297 839.976L572.376 840.437ZM710.848 834.126L710.818 834.593C841.652 842.413 948.307 871.94 1106.7 796.048L1106.5 795.626L1106.3 795.204C948.185 870.963 841.854 841.488 710.877 833.659L710.848 834.126ZM1106.5 795.626L1106.7 796.046C1144.01 777.704 1179.36 755.58 1212.21 730.02L1211.92 729.651L1211.64 729.282C1178.84 754.802 1143.54 776.892 1106.3 795.206L1106.5 795.626ZM1211.92 729.651L1212.2 730.023C1308.91 656.201 1393.23 553.958 1469.38 473.178C1507.47 432.774 1543.5 397.744 1578.02 374.279C1612.55 350.812 1645.51 338.957 1677.46 344.782L1677.54 344.322L1677.63 343.861C1645.33 337.972 1612.12 349.978 1577.51 373.504C1542.89 397.032 1506.8 432.127 1468.7 472.536C1392.5 553.383 1308.26 655.519 1211.64 729.279L1211.92 729.651Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M383.068 967.101L383.413 967.413L383.413 967.413L383.068 967.101ZM590.437 844.581L590.342 844.123L590.342 844.123L590.437 844.581ZM728.698 836.811L728.662 837.278L728.662 837.278L728.698 836.811ZM1127.67 810.739L1127.87 811.163L1127.87 811.161L1127.67 810.739ZM1232.76 744.785L1232.48 744.417L1232.47 744.42L1232.76 744.785ZM94.1895 1770.46L94.6488 1770.54C167.7 1326.52 273.198 1090.74 383.413 967.413L383.068 967.101L382.722 966.789C272.325 1090.32 166.79 1326.32 93.7301 1770.39L94.1895 1770.46ZM383.068 967.101L383.413 967.413C452.825 889.714 522.629 859.69 590.533 845.038L590.437 844.581L590.342 844.123C522.277 858.809 452.286 888.92 382.722 966.789L383.068 967.101ZM590.437 844.581L590.533 845.038C638.445 834.727 683.468 833.945 728.662 837.278L728.698 836.811L728.734 836.345C683.483 833.007 638.366 833.788 590.342 844.123L590.437 844.581ZM728.698 836.811L728.662 837.278C857.812 846.604 968.036 885.376 1127.87 811.163L1127.67 810.739L1127.48 810.314C967.935 884.394 858.091 845.685 728.734 836.345L728.698 836.811ZM1127.67 810.739L1127.87 811.161C1165.32 793.287 1200.62 771.137 1233.05 745.15L1232.76 744.785L1232.47 744.42C1200.09 770.361 1164.86 792.473 1127.47 810.316L1127.67 810.739ZM1232.76 744.785L1233.05 745.153C1329.44 669.462 1411.18 562.603 1485.01 476.591C1521.94 433.571 1556.89 395.771 1590.71 369.649C1624.53 343.523 1657.17 329.132 1689.48 332.801L1689.54 332.336L1689.59 331.871C1656.92 328.162 1624.04 342.725 1590.14 368.908C1556.24 395.094 1521.24 432.959 1484.31 475.982C1410.42 562.056 1328.77 668.8 1232.48 744.417L1232.76 744.785Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M402.964 982.752L402.61 982.449L402.61 982.45L402.964 982.752ZM608.412 848.994L608.523 849.447L608.524 849.447L608.412 848.994ZM746.393 839.601L746.352 840.067L746.352 840.067L746.393 839.601ZM1148.71 825.91L1148.9 826.337L1148.9 826.335L1148.71 825.91ZM1253.5 759.964L1253.2 759.6L1253.2 759.603L1253.5 759.964ZM116.619 1786.33L117.078 1786.41C189.554 1350.9 293.976 1112.1 403.318 983.054L402.964 982.752L402.61 982.45C293.104 1111.69 188.645 1350.69 116.159 1786.26L116.619 1786.33ZM402.964 982.752L403.317 983.055C471.888 902.334 541.731 866.302 608.523 849.447L608.412 848.994L608.301 848.54C541.326 865.441 471.311 901.575 402.61 982.449L402.964 982.752ZM608.412 848.994L608.524 849.447C656.738 837.268 701.786 836.279 746.352 840.067L746.393 839.601L746.435 839.134C701.799 835.341 656.643 836.328 608.301 848.54L608.412 848.994ZM746.393 839.601L746.352 840.067C873.895 850.903 987.705 898.954 1148.9 826.337L1148.71 825.91L1148.52 825.483C987.62 897.969 874.254 849.994 746.435 839.134L746.393 839.601ZM1148.71 825.91L1148.9 826.335C1186.5 808.893 1221.74 786.71 1253.79 760.325L1253.5 759.964L1253.2 759.603C1221.22 785.937 1186.04 808.077 1148.51 825.486L1148.71 825.91ZM1253.5 759.964L1253.79 760.328C1349.73 682.67 1428.94 571.239 1500.54 480.052C1536.35 434.444 1570.24 393.906 1603.38 365.144C1636.52 336.378 1668.83 319.456 1701.48 320.945L1701.51 320.478L1701.53 320.011C1668.52 318.505 1635.98 335.616 1602.77 364.438C1569.56 393.264 1535.62 433.866 1499.81 479.475C1428.17 570.721 1349.04 682.029 1253.2 759.6L1253.5 759.964Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3Cpath d='M626.684 853.279L626.811 853.729V853.729L626.684 853.279ZM1170.05 841.068L1170.23 841.497L1170.23 841.497L1170.05 841.068ZM138.997 1802.26L139.456 1802.34C256.128 1109.25 455.49 903.303 626.811 853.729L626.684 853.279L626.558 852.829C454.663 902.57 255.216 1109.06 138.538 1802.19L138.997 1802.26ZM626.684 853.279L626.811 853.729C720.348 826.659 801.251 847.497 886.31 863.191C971.357 878.882 1060.48 889.402 1170.23 841.497L1170.05 841.068L1169.87 840.639C1060.37 888.432 971.47 877.951 886.482 862.271C801.505 846.592 720.352 825.686 626.558 852.829L626.684 853.279ZM1170.05 841.068L1170.23 841.497C1298.97 785.287 1396.18 652.826 1480.53 534.157C1522.72 474.799 1561.69 418.896 1599.8 377.631C1637.92 336.352 1675.08 309.835 1713.63 309.061L1713.62 308.593L1713.61 308.125C1674.65 308.908 1637.26 335.691 1599.12 376.996C1560.96 418.316 1521.95 474.281 1479.77 533.616C1395.39 652.332 1298.32 784.552 1169.87 840.639L1170.05 841.068Z' fill='%23114AD0' fill-opacity='0.38'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
@media (min-width: 1024px) {
.post-related {
    padding-block: var(--space-80);
}
  }

.post-related__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  margin-bottom: var(--space-40);
}

.post-related__title {
  color: var(--color-primary-950);
}

.post-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {

.post-related__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-32);
}
  }

.post-related__item {
  display: flex;
}

.post-related__item .card--post {
  border: var(--border-width) solid var(--color-border-default);
}
/* =========================================================================
 * legal.pcss — legal pages (Privacy / Cookie / ToS / DPA) + 404.
 * On-brand, token-driven (no Figma design). Sticky ToC on desktop.
 * ========================================================================= */

/* --- Legal hero --------------------------------------------------------- */
.legal-hero {
  padding-block: var(--space-64) var(--space-32);
  background-color: var(--color-bg-soft);
}

.legal-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.legal-hero__title {
  color: var(--color-primary-950);
}

.legal-hero__updated {
  color: var(--color-text-body);
}

/* --- Layout ------------------------------------------------------------- */
.legal-body {
  padding-block: var(--space-32) var(--space-64);
}

.legal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: start;
}

@media (min-width: 1024px) {

.legal-layout {
    grid-template-columns: 260px 1fr;
    gap: var(--space-64);
}
  }

/* --- Table of contents -------------------------------------------------- */
.legal-toc {
  position: sticky;
  top: 100px;
}

.legal-toc__inner {
  border: var(--border-width) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-20);
  background-color: var(--color-bg-soft);
}

@media (min-width: 1024px) {

.legal-toc__inner {
    position: sticky;
    top: var(--space-80);
}
  }

.legal-toc__title {
  color: var(--color-text-heading);
  margin-bottom: var(--space-12);
}

.legal-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.legal-toc__link {
  font-size: var(--text-14);
  line-height: 1.4;
  color: var(--color-text-body);
  transition: color 0.18s ease;
}

@media (min-width: 1024px) {

.legal-toc__link {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.legal-toc__link:hover {
  color: var(--color-primary-600);
}

/* Give in-page anchors breathing room under the sticky header. */
.legal-content h2 {
  scroll-margin-top: var(--space-80);
}

/* --- 404 ---------------------------------------------------------------- */
.error-404 {
  padding-block: var(--space-96);
  background-color: var(--color-bg-soft);
}

.error-404__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-16);
  max-width: 620px;
}

.error-404__code {
  font-size: 96px;
  line-height: 1;
  font-weight: var(--fw-800);
  color: var(--color-primary-600);
}

.error-404__title {
  color: var(--color-primary-950);
}

.error-404__text {
  color: var(--color-text-body);
}

.error-404__actions {
  justify-content: center;
  margin-top: var(--space-8);
}
/* @import "./components/tag.pcss"; */

/* ---- sections ----------------------------------------------------------- */
/* =========================================================================
 * hero.pcss — Hero section.
 * Figma: white bg, py 80; left content (max 661) + right image (400×284).
 * Mobile-first: single column; two columns at --bp-md.
 * ========================================================================= */

.section.hero {
  padding-block: var(--space-80);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  align-items: flex-start;
}

@media (min-width: 1024px) {

.hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-64);
}
  }

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
  max-width: 661px;
}

/* Rich content head (composed in the editor). Accent lines stack + brand-violet. */
.hero__head h1 span,
.hero__head h2 span {
  display: block;
}

.hero__head p {
  font-size: var(--text-16);
}

@media (min-width: 1024px) {

.hero__head p {
    font-size: var(--text-20);
}
  }

/* Integrates-with row */
.hero__integrations {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  flex-wrap: wrap;
}

.hero__integrates-label {
  font-size: var(--text-14);
  line-height: var(--lh-140);
  color: var(--color-text-heading);
  letter-spacing: 0.02em;
}

@media (min-width: 1024px) {

.hero__integrates-label {
    font-size: var(--text-16); line-height: var(--lh-150);
}
  }

.hero__integration-list {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero__integration img {
  height: 31px;
  width: auto;
}

.hero__actions {
  margin-top: var(--space-8);
}

/* Right media */
.hero__media {
  display: none;
}
@media (min-width: 1024px) {
.hero__media {
    max-width: 400px;
    display: block;
}
  }

.hero__media img {
  width: 100%;
  height: auto;
}

/* =========================================================================
 * hero-image — full-width product screenshot band.
 * Figma: image with 1px gray-300 border, radius 16, shadow-md, pb 40.
 * ========================================================================= */
.hero-image__frame {
  margin: var(--space-80) auto calc(-1 * var(--space-40)) auto;
  max-width: 768px;
}

.hero-image__frame img {
  width: 100%;
  height: auto;
}

.hero-image__caption {
  margin-top: var(--space-12);
  text-align: center;
  color: var(--color-text-body);
}
/* =========================================================================
 * stats.pcss — three figures on a dark violet gradient band.
 * Figma: bg base Primary/950 (#13072e) with a diagonal lighter overlay;
 * py 40; three centred columns; white text.
 * ========================================================================= */

.section.stats {
  padding-block: var(--space-40);
  color: var(--color-white);
  background-color: var(--color-primary-950);
  background-image:
    linear-gradient(162.7deg, rgba(19, 7, 46, 0.44) 6%, rgba(48, 28, 103, 0.44) 80%);
}

.stats__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {

.stats__grid {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-32);
}
  }

.stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
  max-width: 347px;
}

@media (min-width: 1024px) {

.stats__item {
    flex: 1 1 0;
}
  }

.stats__value {
  color: var(--color-white);
}

.stats__text {
  color: var(--color-white);
  max-width: 304px;
}
/* =========================================================================
 * stats-source.pcss — citation line under Stats.
 * Figma: same dark family, slightly lighter overlay; py 20; centred white text.
 * "label" is medium weight, the rest regular.
 * ========================================================================= */

.section.stats-source {
  padding-block: var(--space-20);
  color: var(--color-white);
  background-color: var(--color-primary-950);
  background-image:
    linear-gradient(175.1deg, rgba(57, 31, 117, 0.44) 6%, rgba(83, 48, 164, 0.44) 80%);
}

.stats-source__line {
  text-align: center;
  color: var(--color-white);
  margin: 0;
}

.stats-source__label {
  font-weight: var(--fw-500);
  margin-right: 0.25em;
}
/* =========================================================================
 * the-problem.pcss — layout for The Problem section.
 * Figma: py 80; left column (max 636) with eyebrow/title/text/accordion,
 * right column (max 443) with the Manual/Automated tabs.
 * ========================================================================= */

.section.the-problem {
  padding-block: var(--space-80);
}

.the-problem__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  align-items: stretch;
}

@media (min-width: 1024px) {

.the-problem__inner {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-64);
}
  }

.the-problem__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  width: 100%;
}

@media (min-width: 1024px) {

.the-problem__left {
    max-width: 636px;
    flex: 1 1 auto;
}
  }

.the-problem__title {
  color: var(--color-primary-950);
}

.the-problem__text {
  color: var(--color-text-heading);
}

.the-problem__accordion {
  margin-top: var(--space-8);
}

.the-problem__right {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

@media (min-width: 1024px) {

.the-problem__right {
    max-width: 443px;
}
  }
/* =========================================================================
 * how-it-works.pcss — dark band with intro + 3 process cards.
 * Figma: bg Primary/950, py 80, gap 56 between head and grid; 3 equal cards.
 * ========================================================================= */

.section.how-it-works {
  padding-block: var(--space-80);
  background-color: var(--color-primary-950);
  color: var(--color-white);
}

.how-it-works__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  max-width: 636px;
  margin-bottom: var(--space-64);
}

.how-it-works__title {
  color: var(--color-white);
}

.how-it-works__text {
  color: var(--color-white);
}

.how-it-works__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  list-style: none;
  margin: 0;
  padding: 0;
}

.how-it-works__col {
  display: flex;
}

/* --- Tablet ------------------------------------------------------------ */
@media (min-width: 768px) {
  .how-it-works__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* =========================================================================
 * platform-features.pcss — light band, intro + 6 cards (3×2).
 * Figma: bg muted; head max 636; grid 3 columns at desktop, 1 on mobile.
 * One card ("Payment Plan Engine") is featured with a soft violet wash.
 * ========================================================================= */

.section.platform-features {
  padding-block: var(--space-80);
  background-color: var(--color-bg-muted);
}

.platform-features__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  max-width: 636px;
  margin-bottom: var(--space-64);
}

.platform-features__title {
  color: var(--color-primary-950);
}

.platform-features__accent {
  color: var(--color-primary-600);
}

.platform-features__text {
  color: var(--color-text-body);
}

.platform-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {

.platform-features__grid {
    grid-template-columns: repeat(2, 1fr);
}
  }

@media (min-width: 1440px) {

.platform-features__grid {
    grid-template-columns: repeat(3, 1fr);
}
  }

.platform-features__col {
  display: flex;
}

.platform-features__col .card {
  box-shadow: none;
}
/* =========================================================================
 * automated-workflow.pcss — light band, intro + two accordion columns.
 * Figma: bg muted; head max ~636; two boxed accordions side by side (desktop),
 * stacked on mobile.
 * ========================================================================= */

.section.automated-workflow {
  padding-block: var(--space-80);
  background-color: var(--color-bg-muted);
}

.automated-workflow__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  max-width: 636px;
  margin-bottom: var(--space-64);
}

.automated-workflow__title {
  color: var(--color-primary-950);
}

.automated-workflow__accent {
  color: var(--color-primary-600);
}

.automated-workflow__text {
  color: var(--color-text-body);
}

.automated-workflow__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: start;
}

@media (min-width: 1024px) {

.automated-workflow__cols {
    grid-template-columns: repeat(2, 1fr);
}
  }
/* =========================================================================
 * built-for-control.pcss — dark band, intro + 4 cards in a row.
 * Figma: bg Primary/950; title accent yellow-green; 4 equal cards (desktop),
 * stacked on mobile.
 * ========================================================================= */

.section.built-for-control {
  padding-block: var(--space-80);
  background-color: var(--color-primary-950);
  color: var(--color-white);
}

.built-for-control__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  max-width: 636px;
  margin-bottom: var(--space-64);
}

.built-for-control__title {
  color: var(--color-white);
}

.built-for-control__accent {
  color: var(--color-accent-lime);
}

.built-for-control__text {
  color: var(--color-white);
}

.built-for-control__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {

.built-for-control__grid {
    grid-template-columns: repeat(4, 1fr);
}
  }

.built-for-control__col {
  display: flex;
}

.built-for-control__col .card {
  width: 100%;
}
/* =========================================================================
 * integration.pcss — light band, intro + 2 icon/text cards.
 * Figma: bg white/muted; head max 636; two equal cards (desktop), stacked mobile.
 * ========================================================================= */

.section.integration {
  padding-block: var(--space-80);
}

.integration__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  max-width: 636px;
  margin-bottom: var(--space-64);
}

.integration__title {
  color: var(--color-primary-950);
}

.integration__accent {
  color: var(--color-primary-600);
}

.integration__text {
  color: var(--color-text-body);
}

.integration__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  list-style: none;
  margin: 0;
  padding: 0;
}

.integration__col {
  display: flex;
}

.integration__col .card {
  display: flex;
  box-shadow: none;
}

/* --- Desktop ------------------------------------------------------------ */
@media (min-width: 768px) {
  .integration__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* =========================================================================
 * pricing.pcss — section layout (centred head + pricing card + extras).
 * Figma 441:17404 (light band). Card styling lives in pricing-table.pcss.
 * ========================================================================= */

.section.pricing {
  padding-block: var(--space-80);
  background-color: var(--color-bg-muted);
}

.pricing__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-16);
  max-width: 720px;
  margin: 0 auto var(--space-64);
}

.pricing__title {
  color: var(--color-primary-950);
}

.pricing__text {
  color: var(--color-text-heading);
}
/* =========================================================================
 * cta.pcss — global CTA band above the footer.
 * Dark band by default (bg set inline by the section wrapper). Centered
 * content: eyebrow, title (with <mark>), text, buttons.
 * TODO: confirm exact paddings / alignment against the CTA Figma frame.
 * ========================================================================= */

.section.cta {
  padding-block: var(--section-py);
  color: var(--color-white);
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-20);
  max-width: 720px;
  margin-inline: auto;
}

.cta__title {
  color: var(--color-white);
}

.cta__text {
  color: var(--color-white);
}

.cta__text p {
  margin: 0;
}

.cta__actions {
  justify-content: center;
  margin-top: var(--space-8);
}

/* On a dark band the ghost button needs light text. */
.cta__ghost {
  color: var(--color-white);
  border-color: transparent;
}

.cta__ghost:hover {
  color: var(--color-primary-200);
}
/* @import "../sections/how-it-works/how-it-works.pcss"; */
/* @import "../sections/platform-features/platform-features.pcss"; */
/* @import "../sections/automated-workflow/automated-workflow.pcss"; */
/* @import "../sections/built-for-control/built-for-control.pcss"; */
/* @import "../sections/integration/integration.pcss"; */
/* @import "../sections/pricing/pricing.pcss"; */