@charset "UTF-8";
/**
 * Blocks Global Stylesheet - Frontend
 *
 * Single source of truth for all global block styles on frontend.
 * Loaded once per page via WordPress enqueue (not per block).
 *
 * Uses shared mixin from _blocks-global-styles.scss (DRY).
 * Editor uses same mixin wrapped in .editor-styles-wrapper.
 *
 * @see _blocks-global-styles.scss (shared mixin)
 * @see editor/editor-global.scss (editor version)
 * @see docs/CSS-ARCHITECTURE.md
 */
/**
 * Design Tokens — Barrel File
 * @forward all token files for single-import convenience.
 *
 * Usage in SCSS entry points:
 *   @use "tokens/index";        (from src/scss/)
 *   @use "../tokens/index";     (from src/scss/blocks/ or src/scss/editor/)
 */
/**
 * Design Tokens — Colors
 * Source: Mode 1.tokens.json (Figma Variables)
 * Category: Color palette, RGB components, semantic aliases, form colors, status shorthands, utility colors
 * DO NOT EDIT MANUALLY — regenerate from source JSON using figma-tokens-to-scss skill
 */
:root {
  /* ========================================
   * Colors — Brand Primary (Orion blue #4E60FF)
   * ======================================== */
  --color-brand-primary-50: #E0F0FF;
  --color-brand-primary-100: #C2D4FF;
  --color-brand-primary-200: #A0B4FF;
  --color-brand-primary-300: #7E94FF;
  --color-brand-primary-400: #4E60FF;
  --color-brand-primary-500: #3E4DCC;
  --color-brand-primary-600: #2F3A99;
  --color-brand-primary-700: #202766;
  --color-brand-primary-800: #141940;
  --color-brand-primary-900: #0A0D20;
  --color-brand-primary-950: #050614;
  /* Colors — White */
  --color-white-900: #FFFFFF;
  /* Colors — Red (Crimson) */
  --color-red-700: #660F24;
  /* Colors — Grey (Stone #F6F5F1, Cloud #D7D7D3, Onyx #2A2A2B) */
  --color-grey-50: #F6F5F1;
  --color-grey-100: #EDECE6;
  --color-grey-200: #D7D7D3;
  --color-grey-300: #BDBDBA;
  --color-grey-400: #9E9E9C;
  --color-grey-500: #80807E;
  --color-grey-600: #636362;
  --color-grey-700: #4A4A4B;
  --color-grey-800: #383839;
  --color-grey-900: #2A2A2B;
  --color-grey-950: #1A1A1B;
  /* Colors — Yellow */
  --color-yellow-100: #F5EE9E;
  /* Colors — Accent (Ember red #EF5143, Ivory #FFF3E2) */
  --color-accent-50: #FFF3E2;
  --color-accent-100: #FFE0CC;
  --color-accent-200: #FFBAA0;
  --color-accent-300: #FF8E74;
  --color-accent-400: #EF5143;
  --color-accent-500: #CC3F33;
  --color-accent-600: #A63028;
  --color-accent-700: #80231E;
  --color-accent-800: #591815;
  --color-accent-900: #33100D;
  --color-accent-950: #1C0907;
  /* Colors — Error */
  --color-error-lightest: #FEF3F2;
  --color-error-lighter: #FEE4E2;
  --color-error-light: #FDA29B;
  --color-error-primary: #F04438;
  --color-error-dark: #B42318;
  --color-error-darkest: #7A271A;
  /* Colors — Success */
  --color-success-lightest: #ECFDF3;
  --color-success-lighter: #D1FADF;
  --color-success-light: #6CE9A6;
  --color-success-primary: #12B76A;
  --color-success-dark: #027A48;
  --color-success-darkest: #054F31;
  /* Colors — Warning */
  --color-warning-lightest: #FFFAEB;
  --color-warning-lighter: #FEF0C7;
  --color-warning-light: #FEC84B;
  --color-warning-primary: #F79009;
  --color-warning-dark: #B54708;
  --color-warning-darkest: #7A2E0E;
  /* ========================================
   * Semantic Color Aliases
   * (Map standardized scale to functional names)
   * ======================================== */
  --color-white: #FFFFFF;
  /* RGB Components (for rgba() usage in component styles) */
  --color-grey-50-rgb: 246, 245, 241;
  --color-grey-900-rgb: 42, 42, 43;
  --color-brand-primary-50-rgb: 224, 240, 255;
  --color-brand-primary-400-rgb: 78, 96, 255;
  --color-accent-50-rgb: 255, 243, 226;
  /* Form Colors (mapped from semantic tokens) */
  --color-form-border: var(--color-grey-400);
  --color-form-border-focus: var(--color-brand-primary-400);
  --color-form-placeholder: var(--color-grey-500);
  --color-form-error: var(--color-error-primary);
  --color-form-success: var(--color-success-primary);
  --color-form-error-bg: var(--color-error-lightest);
  --color-form-success-bg: var(--color-success-lightest);
  /* Status Color Shorthands */
  --color-error: var(--color-error-primary);
  --color-success: var(--color-success-primary);
  --color-warning: var(--color-warning-primary);
  /* ========================================
   * Utility Colors (not from design tokens, project-agnostic)
   * ======================================== */
  --color-admin-border-subtle: #f0f0f1;
  --color-admin-border-default: #d5d9dd;
  --color-admin-surface-open: #f9f9f9;
  --color-admin-surface-hover: #f6f7f7;
  --color-trustpilot-green: #219653;
  --color-trustpilot-grey: #d9d9d9;
  --color-trustpilot-black: #000000;
}

/**
 * Design Tokens — Typography
 * Source: Designer's authoritative scale (March 2026)
 * Category: Font families, weights, desktop sizes/line-heights/letter-spacing, mobile sizes/line-heights/letter-spacing
 *
 * Scale: XLarge > H1 > Large > H2 > H3 > H4 > H5 > Small
 * Lexend: xlarge, h1, large, h2
 * Public Sans: h3, h4, h5
 */
:root {
  /* ========================================
   * Font Families
   * ======================================== */
  --font-heading: "Lexend", sans-serif;
  --font-body: "Public Sans", sans-serif;
  /* ========================================
   * Font Weights
   * ======================================== */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* ========================================
   * Typography — Desktop
   * ======================================== */
  --font-size-xlarge: 5.75rem; /* 92px */
  --line-height-xlarge: 7.5rem; /* 120px */
  --font-size-h1: 4.6875rem; /* 75px */
  --line-height-h1: 5.75rem; /* 92px */
  --letter-spacing-h1: -0.0625rem; /* -1px */
  --font-size-large: 3.5rem; /* 56px */
  --line-height-large: 4.375rem; /* 70px */
  --font-size-h2: 2.375rem; /* 38px */
  --line-height-h2: 3rem; /* 48px */
  --font-size-h3: 1.75rem; /* 28px */
  --line-height-h3: 2.375rem; /* 38px */
  --font-size-h4: 1.5rem; /* 24px */
  --line-height-h4: 2.125rem; /* 34px */
  --font-size-h5: 1.125rem; /* 18px */
  --line-height-h5: 1.6875rem; /* 27px */
  --font-size-h6: 1.125rem; /* 18px — alias to h5 */
  --line-height-h6: 1.6875rem; /* 27px — alias to h5 */
  --font-size-small: 0.75rem; /* 12px */
  --line-height-small: 1.0625rem; /* 17px */
  --font-size-p: 0.9375rem; /* 15px */
  --line-height-p: 1.375rem; /* 22px */
  --font-size-p-lg: 1.125rem; /* 18px */
  --line-height-p-lg: 1.6875rem; /* 27px */
  --font-size-p-sm: 0.875rem; /* 14px */
  --line-height-p-sm: 1.1875rem; /* 19px */
  --font-size-label: 0.875rem; /* 14px */
  --line-height-label: 1.1875rem; /* 19px */
  --font-size-button: 0.875rem; /* 14px */
  --line-height-button: 1.1875rem; /* 19px */
  /* ========================================
   * Typography — Mobile
   * ======================================== */
  --font-size-xlarge-mobile: 2.25rem; /* 36px */
  --line-height-xlarge-mobile: 2.8125rem; /* 45px */
  --font-size-h1-mobile: 2.5rem; /* 40px */
  --line-height-h1-mobile: 3.25rem; /* 52px */
  --letter-spacing-h1-mobile: -0.0625rem; /* -1px */
  --font-size-large-mobile: 2.125rem; /* 34px */
  --line-height-large-mobile: 2.875rem; /* 46px */
  --font-size-h2-mobile: 1.875rem; /* 30px */
  --line-height-h2-mobile: 2.5rem; /* 40px */
  --font-size-h3-mobile: 1.5rem; /* 24px */
  --line-height-h3-mobile: 2.125rem; /* 34px */
  --font-size-h4-mobile: 1.3125rem; /* 21px */
  --line-height-h4-mobile: 1.875rem; /* 30px */
  --font-size-h5-mobile: 1.0625rem; /* 17px */
  --line-height-h5-mobile: 1.625rem; /* 26px */
  --font-size-h6-mobile: 1.0625rem; /* 17px — alias to h5 */
  --line-height-h6-mobile: 1.625rem; /* 26px — alias to h5 */
  --font-size-small-mobile: 0.75rem; /* 12px */
  --line-height-small-mobile: 1.0625rem; /* 17px */
  --font-size-p-mobile: 0.9375rem; /* 15px */
  --line-height-p-mobile: 1.375rem; /* 22px */
  --font-size-p-lg-mobile: 1rem; /* 16px */
  --line-height-p-lg-mobile: 1.5rem; /* 24px */
  --font-size-p-sm-mobile: 0.75rem; /* 12px */
  --line-height-p-sm-mobile: 1.0625rem; /* 17px */
  --font-size-label-mobile: 0.75rem; /* 12px */
  --line-height-label-mobile: 1.0625rem; /* 17px */
  --font-size-button-mobile: 0.875rem; /* 14px */
  --line-height-button-mobile: 1.1875rem; /* 19px */
}

/**
 * Design Tokens — Spacing
 * Source: Mode 1.tokens.json (Figma Variables)
 * Category: Spacing scale (xxs through 7xl)
 * DO NOT EDIT MANUALLY — regenerate from source JSON using figma-tokens-to-scss skill
 */
:root {
  /* ========================================
   * Spacing
   * ======================================== */
  --spacing-xxs: 0.25rem; /* 4px */
  --spacing-xs: 0.5rem; /* 8px */
  --spacing-sm: 0.625rem; /* 10px */
  --spacing-ms: 0.75rem; /* 12px */
  --spacing-md: 1rem; /* 16px */
  --spacing-ml: 1.25rem; /* 20px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 2.5rem; /* 40px */
  --spacing-3xl: 3rem; /* 48px */
  --spacing-4xl: 4rem; /* 64px */
  --spacing-5xl: 5rem; /* 80px */
  --spacing-6xl: 6rem; /* 96px */
  --spacing-7xl: 8rem; /* 128px */
}

/**
 * Design Tokens — Borders
 * Source: Mode 1.tokens.json (Figma Variables)
 * Category: Border weights and radii
 * DO NOT EDIT MANUALLY — regenerate from source JSON using figma-tokens-to-scss skill
 */
:root {
  /* ========================================
   * Borders — Weights
   * ======================================== */
  --border-weight-xs: 0.5px;
  --border-weight-sm: 1px;
  --border-weight-md: 2px;
  --border-weight-lg: 4px;
  /* Borders — Radius */
  --border-radius-none: 0;
  --border-radius-xs: 4px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 999px;
}

/**
 * Design Tokens — Icons
 * Source: Mode 1.tokens.json (Figma Variables)
 * Category: Icon sizes and weights
 * DO NOT EDIT MANUALLY — regenerate from source JSON using figma-tokens-to-scss skill
 */
:root {
  /* ========================================
   * Icons
   * ======================================== */
  --icon-weight-xs: 0.5px;
  --icon-weight-sm: 1px;
  --icon-weight-md: 2px;
  --icon-weight-lg: 4px;
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-ms: 20px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --icon-size-xl: 40px;
}

/**
 * Brand Icons Map
 *
 * Sass map of all brand-specific SVG icons.
 * Used by _icons.scss to generate [data-icon="brand-*"] selectors.
 *
 * Adding a new brand icon:
 * 1. Add SVG to src/images/icon-brand-{name}.svg
 * 2. Add entry below: 'brand-{name}': 'icon-brand-{name}'
 * 3. Add to icons.php get_available_icons()
 * 4. Icon automatically available in all blocks
 */
/**
 * Design Tokens — Layout
 * Source: Theme configuration (not from Figma tokens)
 * Category: Section padding, padding base scales, grid gaps, card padding, container widths, site width
 */
:root {
  /* ========================================
   * Layout (theme-specific, not from tokens)
   * ======================================== */
  --section-padding-desktop: var(--spacing-6xl);
  --section-padding-tablet: var(--spacing-xl);
  --section-padding-mobile: var(--spacing-md);
  --padding-base: var(--spacing-7xl) var(--spacing-xl);
  --padding-base-tablet: var(--spacing-4xl) var(--spacing-xl);
  --padding-base-mobile: var(--spacing-3xl) var(--spacing-md);
  --grid-gaps: var(--spacing-md);
  --card-padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-2xl) var(--spacing-lg);
  /* Containers */
  /* SINGLE SOURCE OF TRUTH: Site width defined in functions/theme-config.php */
  /* PHP constant BOILERPLATE_SITE_WIDTH = 1440px */
  --site-width: 1440px;
  /* Grid Foundation */
  --breakout-max-width: 1600px; /* 80px breakout gutter per side beyond 1440px site-width */
  --padding-inline: 1rem; /* 16px — mobile base */
  --padding-inline-desktop: 2rem;
  --grid-columns: 12; /* Used by .inner-grid repeat() */
  --grid-columns-mobile: 4; /* Used by .inner-grid mobile repeat() */
  --grid-gap: 12px; /* Mobile base */
  --row-gap-none: 0;
  --row-gap-small: 8px;
  --row-gap-medium: 16px;
  --row-gap-large: 32px;
  --row-gap-xlarge: 64px;
  /* Container horizontal margin (fixed, not responsive) */
  --container-margin-horizontal-small: 16px;
  --container-margin-horizontal-medium: 32px;
  --container-margin-horizontal-large: 64px;
}

@media (min-width: 769px) {
  :root {
    --padding-inline: 2rem; /* 32px — desktop */
    --grid-gap: 16px; /* Desktop */
  }
}
/**
 * Design Tokens — Buttons
 * Single source of truth for all button design values.
 * SYNC: critical.scss must match these values (hardcoded for FOUC prevention).
 * @see ADR 0013
 */
:root {
  /* ========================================
   * Sizing
   * ======================================== */
  --btn-height: 36px;
  --btn-padding-y: var(--spacing-sm); /* 10px */
  --btn-padding-x: var(--spacing-md); /* 16px */
  --btn-gap: 8px;
  --btn-border-width: 1px;
  --btn-border-radius: var(--border-radius-full); /* 999px */
  /* ========================================
   * Typography
   * ======================================== */
  --btn-font-family: var(--font-body);
  --btn-font-size: var(--font-size-button); /* 14px */
  --btn-font-weight: var(--font-weight-regular); /* 400 */
  --btn-line-height: var(--line-height-button); /* 19px */
  --btn-letter-spacing: 0;
  --btn-text-transform: none;
  /* ========================================
   * Animation
   * ======================================== */
  --btn-transition-duration: 0.34s;
  --btn-transition-easing: ease-in-out;
  --btn-roll-track-height: var(--btn-line-height);
  --btn-roll-gap: 10px;
  --btn-roll-hover-top: calc(var(--btn-roll-track-height) + var(--btn-roll-gap));
  --btn-roll-translate-y: calc(-1 * (var(--btn-roll-track-height) + var(--btn-roll-gap)));
  /* ========================================
   * Focus
   * ======================================== */
  --btn-focus-outline-width: 2px;
  --btn-focus-outline-offset: 2px;
  --cta-arrow-gap: 8px;
  --cta-arrow-default-width: 27px;
  --cta-arrow-hover-width: 38px;
  --cta-arrow-height: 20px;
  --cta-arrow-rest-scale: 0.576923;
  --cta-arrow-rest-head-shift: -11px;
  --cta-arrow-rest-head-shift-vertical: calc(-1 * var(--cta-arrow-rest-head-shift));
  /* ========================================
   * Variant — Link
   * ======================================== */
  --btn-link-bg: transparent;
  --btn-link-border: transparent;
  --btn-link-text: var(--color-accent-400); /* Ember */
  --btn-link-hover-text: var(--color-accent-400); /* Ember */
  --btn-link-focus-outline: var(--color-accent-400);
  --btn-link-roll-track-height: 20px;
  --btn-link-roll-gap: 6px;
  --btn-link-roll-hover-top: 26px;
  --btn-link-roll-translate-y: -26px;
  --btn-link-icon-width: var(--cta-arrow-default-width);
  --btn-link-icon-height: var(--cta-arrow-height);
  /* ========================================
   * Variant — Link Animated
   * ======================================== */
  --btn-link-animated-bg: transparent;
  --btn-link-animated-border: transparent;
  --btn-link-animated-text: var(--color-brand-primary-400); /* Orion */
  --btn-link-animated-hover-text: var(--color-accent-400); /* Ember */
  --btn-link-animated-focus-outline: var(--color-brand-primary-400);
  --btn-link-animated-icon-bg: var(--color-brand-primary-400); /* Orion */
  --btn-link-animated-hover-icon-bg: var(--color-accent-400); /* Ember */
  --btn-link-animated-icon-color: var(--color-brand-primary-50);
  --btn-link-animated-icon-wrapper-size: 20px;
  --btn-link-animated-icon-glyph-size: 12px;
  --btn-link-animated-icon-border-radius: var(--border-radius-xs);
  /* ========================================
   * Variant — Style 1 (Outlined)
   * ======================================== */
  --btn-style1-bg: transparent;
  --btn-style1-border: var(--color-brand-primary-400); /* Orion */
  --btn-style1-text: var(--color-brand-primary-400); /* Orion */
  --btn-style1-hover-border: var(--color-accent-400); /* Ember */
  --btn-style1-hover-text: var(--color-accent-400); /* Ember */
  --btn-style1-focus-outline: var(--color-brand-primary-400);
  /* ========================================
   * Variant — Mist + Ember Hover (style-2)
   * ======================================== */
  --btn-style2-bg: var(--color-brand-primary-50); /* Mist */
  --btn-style2-border: var(--color-brand-primary-50); /* Mist */
  --btn-style2-text: var(--color-brand-primary-400); /* Orion */
  --btn-style2-hover-bg: var(--color-accent-400); /* Ember */
  --btn-style2-hover-border: var(--color-accent-400); /* Ember */
  --btn-style2-hover-text: var(--color-red-700); /* Crimson */
  --btn-style2-focus-outline: var(--color-brand-primary-400);
  /* ========================================
   * Variant — Orion + Ember Hover (style-3)
   * ======================================== */
  --btn-style3-bg: var(--color-brand-primary-400); /* Orion */
  --btn-style3-border: var(--color-brand-primary-400); /* Orion */
  --btn-style3-text: var(--color-brand-primary-50); /* Mist */
  --btn-style3-hover-bg: var(--color-accent-400); /* Ember */
  --btn-style3-hover-border: var(--color-accent-400); /* Ember */
  --btn-style3-hover-text: var(--color-red-700); /* Crimson */
  --btn-style3-focus-outline: var(--color-brand-primary-400);
  /* ========================================
   * Variant — Grey
   * ======================================== */
  --btn-grey-bg: var(--color-grey-100);
  --btn-grey-border: var(--color-grey-200);
  --btn-grey-text: var(--color-grey-700);
  --btn-grey-hover-bg: var(--color-grey-200);
  --btn-grey-hover-border: var(--color-grey-500);
  --btn-grey-focus-outline: var(--color-grey-500);
  /* ========================================
   * Variant — None (Unstyled)
   * ======================================== */
  --btn-none-text: var(--color-brand-primary-400); /* Orion */
  --btn-none-hover-text: var(--color-accent-400); /* Ember */
  --btn-none-focus-outline: var(--color-brand-primary-400);
  --btn-none-icon-bg: var(--color-brand-primary-400); /* Orion */
}

/**
 * Grid Foundation — Gap-aware named-line content grid
 *
 * Viewport-responsive breakout formula (clamp-based).
 *
 * Named lines: full-width | breakout | site-width | lg | md | sm (×6) | sm | md | lg | site-width | breakout | full-width
 *
 * @see docs/plans/css-grid-reference.md
 */
/**
 * Button Component — Single Source of Truth
 *
 * All button styles defined here. Consumed by frontend + editor.
 * Design values from tokens/_buttons.scss.
 *
 * HTML contract:
 *   Roll styles (link, link-animated, style-1, style-2, style-3):
 *     <a class="btn" data-button-style="link">
 *       <span class="btn-text-track"><span class="btn-text">…</span><span class="btn-text-hover" aria-hidden="true">…</span></span>
 *     </a>
 *
 *   Simple styles (none, grey):
 *     <a class="btn" data-button-style="none">
 *       <span class="btn-text">…</span>
 *     </a>
 *
 * @see ADR 0013
 * @see tokens/_buttons.scss
 */
/**
 * Icon System Mixins
 *
 * DRY icon styling system using CSS mask-image pattern.
 * Single source of truth for all icon variations across the theme.
 *
 * Usage:
 * .my-icon {
 *   @include icon-base(24px);
 *   @include icon-map;
 * }
 *
 * Features:
 * - CSS mask-image for dynamic coloring via currentColor
 * - Consistent sizing and positioning
 * - Single source for all icon URL mappings
 * - Supports accessibility (aria-hidden)
 *
 * Used by:
 * - Buttons (.btn-icon-wrapper)
 * - Container icons (.container-icon)
 * - Featured icons (.featured-icon)
 * - List icons (ul li::before)
 */
/**
 * Icon Base Mixin
 *
 * Provides core icon structure using CSS mask-image pattern.
 * Icons inherit color from parent via currentColor.
 *
 * @param {number} $size - Icon size in pixels (default: 24px)
 *
 * Example:
 * .icon-wrapper {
 *   @include icon-base(24px);
 * }
 */
/**
 * Icon URL Mappings - Moved to components/_icons.scss
 *
 * NOTE: Global icon URL mappings are now defined in components/_icons.scss
 * where they can be properly compiled into the output CSS.
 *
 * This mixin file only contains helper mixins for icon sizing and styling.
 * The actual icon URL mappings are in components/_icons.scss to ensure
 * they're included in the compiled output.
 */
/**
 * Icon Size Variants Mixin
 *
 * Provides standard icon size variations via data attributes.
 * Use when you need different icon sizes in different contexts.
 *
 * Example:
 * <span class="icon-wrapper" data-icon="check" data-size="large"></span>
 */
/**
 * Icon Color Override Mixin
 *
 * Provides explicit color overrides via data attributes.
 * Use sparingly - prefer currentColor inheritance when possible.
 *
 * Example:
 * <span class="icon-wrapper" data-icon="check" data-icon-color="brand-primary-400"></span>
 */
.cta-buttons {
  display: grid;
  gap: 16px;
}
@media (min-width: 540px) {
  .cta-buttons {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
  }
}
.cta-buttons.align-left {
  justify-content: start;
}
.cta-buttons.align-center {
  justify-content: center;
}
.cta-buttons.align-right {
  justify-content: end;
}

.btn-arrow {
  --btn-arrow-default-inline-size: var(--cta-arrow-default-width);
  --btn-arrow-default-block-size: var(--cta-arrow-height);
  --btn-arrow-hover-inline-size: var(--cta-arrow-hover-width);
  --btn-arrow-hover-block-size: var(--cta-arrow-height);
  --btn-arrow-svg-inline-size: var(--cta-arrow-hover-width);
  --btn-arrow-svg-block-size: var(--cta-arrow-height);
  --btn-arrow-flex-direction: row;
  --btn-arrow-justify: flex-start;
  --btn-arrow-align: center;
  --btn-arrow-shaft-origin: left center;
  --btn-arrow-rest-shaft-scale-x: var(--cta-arrow-rest-scale);
  --btn-arrow-rest-shaft-scale-y: 1;
  --btn-arrow-rest-head-shift-x: var(--cta-arrow-rest-head-shift);
  --btn-arrow-rest-head-shift-y: 0;
  width: var(--btn-arrow-default-inline-size);
  height: var(--btn-arrow-default-block-size);
  display: inline-flex;
  flex-direction: var(--btn-arrow-flex-direction);
  align-items: var(--btn-arrow-align);
  justify-content: var(--btn-arrow-justify);
  flex-shrink: 0;
  color: currentColor;
  line-height: 0;
  overflow: hidden;
}
.btn-arrow svg {
  display: block;
  width: var(--btn-arrow-svg-inline-size);
  height: var(--btn-arrow-svg-block-size);
  flex: none;
  overflow: visible;
}
.btn-arrow__shaft, .btn-arrow__head {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.btn-arrow__shaft {
  transform-box: fill-box;
  transform-origin: var(--btn-arrow-shaft-origin);
}
.btn-arrow__head {
  transform-box: fill-box;
}
.btn-arrow--up {
  --btn-arrow-default-inline-size: var(--cta-arrow-height);
  --btn-arrow-default-block-size: var(--cta-arrow-default-width);
  --btn-arrow-hover-inline-size: var(--cta-arrow-height);
  --btn-arrow-hover-block-size: var(--cta-arrow-hover-width);
  --btn-arrow-svg-inline-size: var(--cta-arrow-height);
  --btn-arrow-svg-block-size: var(--cta-arrow-hover-width);
  --btn-arrow-flex-direction: column;
  --btn-arrow-justify: flex-end;
  --btn-arrow-align: center;
  --btn-arrow-shaft-origin: center bottom;
  --btn-arrow-rest-shaft-scale-x: 1;
  --btn-arrow-rest-shaft-scale-y: var(--cta-arrow-rest-scale);
  --btn-arrow-rest-head-shift-x: 0;
  --btn-arrow-rest-head-shift-y: var(--cta-arrow-rest-head-shift-vertical);
}
.btn-arrow--animate {
  transition: width var(--btn-transition-duration) var(--btn-transition-easing), height var(--btn-transition-duration) var(--btn-transition-easing);
  will-change: width, height;
}
.btn-arrow--animate .btn-arrow__shaft,
.btn-arrow--animate .btn-arrow__head {
  transition: transform var(--btn-transition-duration) var(--btn-transition-easing);
  will-change: transform;
}
.btn-arrow--animate .btn-arrow__shaft {
  transform: scale(var(--btn-arrow-rest-shaft-scale-x), var(--btn-arrow-rest-shaft-scale-y));
}
.btn-arrow--animate .btn-arrow__head {
  transform: translate(var(--btn-arrow-rest-head-shift-x), var(--btn-arrow-rest-head-shift-y));
}

:where(a, button, .btn):is(:hover, :focus-visible) .btn-arrow--animate {
  width: var(--btn-arrow-hover-inline-size);
  height: var(--btn-arrow-hover-block-size);
}
:where(a, button, .btn):is(:hover, :focus-visible) .btn-arrow--animate .btn-arrow__shaft {
  transform: scale(1, 1);
}
:where(a, button, .btn):is(:hover, :focus-visible) .btn-arrow--animate .btn-arrow__head {
  transform: translate(0, 0);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: var(--btn-border-width) solid;
  border-radius: var(--btn-border-radius);
  font-family: var(--btn-font-family);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--btn-transition-duration) var(--btn-transition-easing), color var(--btn-transition-duration) var(--btn-transition-easing), border-color var(--btn-transition-duration) var(--btn-transition-easing);
  width: -moz-fit-content;
  width: fit-content;
  height: var(--btn-height);
  flex-direction: row-reverse;
}
.btn.icon-left {
  flex-direction: row;
}
.btn:hover {
  opacity: 1;
}
.btn:focus-visible {
  outline: var(--btn-focus-outline-width) solid;
  outline-offset: var(--btn-focus-outline-offset);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn .btn-icon-wrapper {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.btn .btn-icon-wrapper svg {
  display: none;
}
.btn .btn-icon-wrapper::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.btn .btn-text {
  flex-shrink: 0;
}

.btn-text-track {
  display: inline-flex;
  overflow: hidden;
  position: relative;
  height: inherit;
  min-height: inherit;
}
.btn-text-track .btn-text,
.btn-text-track .btn-text-hover {
  transition: transform var(--btn-transition-duration) var(--btn-transition-easing);
  white-space: nowrap;
}
.btn-text-track .btn-text-hover {
  position: absolute;
  top: var(--btn-roll-hover-top);
  left: 0;
}

.btn:is(:hover, :focus-visible) .btn-text-track .btn-text {
  transform: translateY(var(--btn-roll-translate-y));
}
.btn:is(:hover, :focus-visible) .btn-text-track .btn-text-hover {
  transform: translateY(var(--btn-roll-translate-y));
}

.btn[data-button-style=link] {
  background-color: var(--btn-link-bg);
  border-color: var(--btn-link-border);
  color: var(--btn-link-text);
  --btn-roll-track-height: var(--btn-link-roll-track-height);
  --btn-roll-gap: var(--btn-link-roll-gap);
  --btn-roll-hover-top: var(--btn-link-roll-hover-top);
  --btn-roll-translate-y: var(--btn-link-roll-translate-y);
  gap: var(--cta-arrow-gap);
  padding: 0;
  height: auto;
}
.btn[data-button-style=link] .btn-icon-wrapper {
  width: var(--btn-link-icon-width);
  height: var(--btn-link-icon-height);
}
.btn[data-button-style=link] .btn-icon-wrapper::before {
  width: var(--btn-link-icon-width);
  height: var(--btn-link-icon-height);
}
.btn[data-button-style=link]:is(:hover, :focus-visible) {
  color: var(--btn-link-hover-text);
}
.btn[data-button-style=link]:focus-visible {
  outline-color: var(--btn-link-focus-outline);
}

.btn[data-button-style=link-animated] {
  background-color: var(--btn-link-animated-bg);
  border-color: var(--btn-link-animated-border);
  color: var(--btn-link-animated-text);
  padding: 0;
  height: auto;
}
.btn[data-button-style=link-animated] .btn-icon-wrapper {
  background-color: var(--btn-link-animated-icon-bg);
  border-radius: var(--btn-link-animated-icon-border-radius);
  width: var(--btn-link-animated-icon-wrapper-size);
  height: var(--btn-link-animated-icon-wrapper-size);
}
.btn[data-button-style=link-animated] .btn-icon-wrapper::before {
  background-color: var(--btn-link-animated-icon-color);
  width: var(--btn-link-animated-icon-glyph-size);
  height: var(--btn-link-animated-icon-glyph-size);
}
.btn[data-button-style=link-animated] .btn-icon-wrapper[data-icon=brand-add]::before {
  -webkit-mask-image: url("../images/icon-brand-add-glyph.svg");
  mask-image: url("../images/icon-brand-add-glyph.svg");
}
.btn[data-button-style=link-animated]:hover {
  color: var(--btn-link-animated-hover-text);
}
.btn[data-button-style=link-animated]:hover .btn-icon-wrapper {
  background-color: var(--btn-link-animated-hover-icon-bg);
}
.btn[data-button-style=link-animated]:focus-visible {
  outline-color: var(--btn-link-animated-focus-outline);
}

.btn[data-button-style=style-1] {
  background-color: var(--btn-style1-bg);
  border-color: var(--btn-style1-border);
  color: var(--btn-style1-text);
}
.btn[data-button-style=style-1]:hover {
  border-color: var(--btn-style1-hover-border);
  color: var(--btn-style1-hover-text);
}
.btn[data-button-style=style-1]:focus-visible {
  outline-color: var(--btn-style1-focus-outline);
}

.btn[data-button-style=style-2],
.btn[data-button-style=green],
.btn[data-button-style=primary] {
  background-color: var(--btn-style2-bg);
  border-color: var(--btn-style2-border);
  color: var(--btn-style2-text);
}
.btn[data-button-style=style-2] .btn-text,
.btn[data-button-style=style-2] .btn-text-hover,
.btn[data-button-style=green] .btn-text,
.btn[data-button-style=green] .btn-text-hover,
.btn[data-button-style=primary] .btn-text,
.btn[data-button-style=primary] .btn-text-hover {
  margin-top: 9px;
}
.btn[data-button-style=style-2]:hover,
.btn[data-button-style=green]:hover,
.btn[data-button-style=primary]:hover {
  background-color: var(--btn-style2-hover-bg);
  border-color: var(--btn-style2-hover-border);
  color: var(--btn-style2-hover-text);
}
.btn[data-button-style=style-2]:focus-visible,
.btn[data-button-style=green]:focus-visible,
.btn[data-button-style=primary]:focus-visible {
  outline-color: var(--btn-style2-focus-outline);
}

.btn[data-button-style=style-3] {
  background-color: var(--btn-style3-bg);
  border-color: var(--btn-style3-border);
  color: var(--btn-style3-text);
}
.btn[data-button-style=style-3] .btn-text,
.btn[data-button-style=style-3] .btn-text-hover {
  margin-top: 9px;
}
.btn[data-button-style=style-3]:hover {
  background-color: var(--btn-style3-hover-bg);
  border-color: var(--btn-style3-hover-border);
  color: var(--btn-style3-hover-text);
}
.btn[data-button-style=style-3]:focus-visible {
  outline-color: var(--btn-style3-focus-outline);
}

.btn[data-button-style=none] {
  background: none;
  border-color: transparent;
  padding: 0;
  border-radius: 0;
  height: auto;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  color: var(--btn-none-text);
}
.btn[data-button-style=none] .btn-icon-wrapper {
  background-color: var(--btn-none-icon-bg);
  border-radius: var(--border-radius-sm);
  width: 32px;
  height: 32px;
}
.btn[data-button-style=none] .btn-icon-wrapper::before {
  background-color: var(--color-white);
  width: 16px;
  height: 16px;
}
.btn[data-button-style=none]:hover {
  color: var(--btn-none-hover-text);
}
.btn[data-button-style=none]:focus-visible {
  outline-color: var(--btn-none-focus-outline);
}

.btn[data-button-style=grey],
.btn[data-button-style=secondary],
.btn[data-button-style=clear] {
  background-color: var(--btn-grey-bg);
  border-color: var(--btn-grey-border);
  color: var(--btn-grey-text);
}
.btn[data-button-style=grey]:hover,
.btn[data-button-style=secondary]:hover,
.btn[data-button-style=clear]:hover {
  background-color: var(--btn-grey-hover-bg);
  border-color: var(--btn-grey-hover-border);
}
.btn[data-button-style=grey]:focus-visible,
.btn[data-button-style=secondary]:focus-visible,
.btn[data-button-style=clear]:focus-visible {
  outline-color: var(--btn-grey-focus-outline);
}

@media (prefers-reduced-motion: reduce) {
  .btn-arrow--animate {
    transition-duration: 0.01ms !important;
  }
  .btn-arrow--animate .btn-arrow__shaft,
  .btn-arrow--animate .btn-arrow__head {
    transition-duration: 0.01ms !important;
  }
  .btn * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/**
 * Button Component — Single Source of Truth
 *
 * All button styles defined here. Consumed by frontend + editor.
 * Design values from tokens/_buttons.scss.
 *
 * HTML contract:
 *   Roll styles (link, link-animated, style-1, style-2, style-3):
 *     <a class="btn" data-button-style="link">
 *       <span class="btn-text-track"><span class="btn-text">…</span><span class="btn-text-hover" aria-hidden="true">…</span></span>
 *     </a>
 *
 *   Simple styles (none, grey):
 *     <a class="btn" data-button-style="none">
 *       <span class="btn-text">…</span>
 *     </a>
 *
 * @see ADR 0013
 * @see tokens/_buttons.scss
 */
/**
 * Color Data-Attribute Mixin System
 *
 * DRY solution for color data-attribute selectors used across global styles.
 * Replaces ~600 lines of manual selectors in _blocks-base.scss and _blocks-global-styles.scss.
 *
 * Palette maps reference CSS custom properties from tokens/_colors.scss.
 * Adding a new color = one map entry here + one :root variable in tokens/_colors.scss.
 *
 * Usage (self-referencing — use inside a selector):
 *   .container { @include colors.bg-colors($colors: colors.$color-palette-core); }
 *   .btn { @include colors.bg-colors; @include colors.text-colors; @include colors.border-colors; }
 *
 *   .pre-heading, .heading, .sub-heading {
 *     @include colors.text-colors;
 *   }
 *
 * @package BNBoilerplate
 * @since 2.0.0
 */
/**
 * Icon System - Global Component Styles
 *
 * DRY icon system using CSS mask-image pattern.
 * Provides consistent icon rendering across all blocks and components.
 *
 * Architecture:
 * - Base class: .icon-wrapper (generic icon container)
 * - Specialized: .btn-icon-wrapper, .container-icon, .featured-icon
 * - List icons: Styled via parent data-list-icon attribute
 *
 * Features:
 * - Single source of truth for icon URLs (defined ONCE below)
 * - Configurable icon path for frontend vs editor contexts
 * - Dynamic coloring via currentColor inheritance
 * - Consistent sizing via data-size attribute
 * - CSS-first pattern (no inline SVG injection)
 *
 * Usage:
 * PHP: echo render_icon('brand-star', 'my-custom-class', ['size' => 'large']);
 * HTML: <span class="icon-wrapper" data-icon="brand-star"></span>
 *
 * Path Configuration:
 * Frontend (default) compiles to dist/css/style.min.css:
 *   @use 'components/icons'; // Uses ../images/
 *
 * Editor (scoped) via editor-global.scss:
 *   @include icons.icon-system('../images');
 *
 * Block editor compiles to blocks/{slug}/{slug}-editor.css:
 *   @use 'components/icons' with ($icon-path: '../../dist/images');
 *
 * REFACTORED (Plan 31): All output now in icon-system mixin for DRY editor integration.
 * Frontend still outputs at file level for backwards compatibility.
 * Editor uses @include icon-system() inside .editor-styles-wrapper scope.
 */
/**
 * Icon System Mixin - Single Source of Truth
 *
 * Outputs ALL icon styles. Can be called:
 * 1. At file level (frontend) - outputs globally
 * 2. Inside a wrapper (editor) - outputs scoped to wrapper
 *
 * @param {string} $path - Icon path (default: $icon-path module variable)
 */
[data-icon=brand-add]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-add.svg);
  mask-image: url(../../dist/images/icon-brand-add.svg);
}

[data-icon=brand-arrow-down]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-arrow-down.svg);
  mask-image: url(../../dist/images/icon-brand-arrow-down.svg);
}

[data-icon=brand-arrow-left]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-arrow-left.svg);
  mask-image: url(../../dist/images/icon-brand-arrow-left.svg);
}

[data-icon=brand-arrow-right]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-arrow-right.svg);
  mask-image: url(../../dist/images/icon-brand-arrow-right.svg);
}

[data-icon=brand-arrow-up]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-arrow-up.svg);
  mask-image: url(../../dist/images/icon-brand-arrow-up.svg);
}

[data-icon=brand-arrow-cta]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-arrow-cta.svg);
  mask-image: url(../../dist/images/icon-brand-arrow-cta.svg);
}

[data-icon=brand-bullet]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-bullet.svg);
  mask-image: url(../../dist/images/icon-brand-bullet.svg);
}

[data-icon=brand-disclosure]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-disclosure.svg);
  mask-image: url(../../dist/images/icon-brand-disclosure.svg);
}

[data-icon=brand-expand]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-expand.svg);
  mask-image: url(../../dist/images/icon-brand-expand.svg);
}

[data-icon=brand-eye-active]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-eye-active.svg);
  mask-image: url(../../dist/images/icon-brand-eye-active.svg);
}

[data-icon=brand-eye-inactive]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-eye-inactive.svg);
  mask-image: url(../../dist/images/icon-brand-eye-inactive.svg);
}

[data-icon=brand-facebook]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-facebook.svg);
  mask-image: url(../../dist/images/icon-brand-facebook.svg);
}

[data-icon=brand-instagram]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-instagram.svg);
  mask-image: url(../../dist/images/icon-brand-instagram.svg);
}

[data-icon=brand-link]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-link.svg);
  mask-image: url(../../dist/images/icon-brand-link.svg);
}

[data-icon=brand-linkedin]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-linkedin.svg);
  mask-image: url(../../dist/images/icon-brand-linkedin.svg);
}

[data-icon=brand-quote]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-quote.svg);
  mask-image: url(../../dist/images/icon-brand-quote.svg);
}

[data-icon=brand-quote-mark]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-quote-mark.svg);
  mask-image: url(../../dist/images/icon-brand-quote-mark.svg);
}

[data-icon=brand-seren]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-seren.svg);
  mask-image: url(../../dist/images/icon-brand-seren.svg);
}

[data-icon=brand-star-full]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-star-full.svg);
  mask-image: url(../../dist/images/icon-brand-star-full.svg);
}

[data-icon=brand-star]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-star.svg);
  mask-image: url(../../dist/images/icon-brand-star.svg);
}

[data-icon=brand-star-empty]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-star-empty.svg);
  mask-image: url(../../dist/images/icon-brand-star-empty.svg);
}

[data-icon=brand-star-half]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-star-half.svg);
  mask-image: url(../../dist/images/icon-brand-star-half.svg);
}

[data-icon=brand-tiktok]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-tiktok.svg);
  mask-image: url(../../dist/images/icon-brand-tiktok.svg);
}

[data-icon=brand-twitter]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-twitter.svg);
  mask-image: url(../../dist/images/icon-brand-twitter.svg);
}

[data-icon=brand-youtube]::before {
  -webkit-mask-image: url(../../dist/images/icon-brand-youtube.svg);
  mask-image: url(../../dist/images/icon-brand-youtube.svg);
}

[data-icon=star-trustpilot]::before {
  -webkit-mask-image: url(../../dist/images/icon-star-trustpilot.svg);
  mask-image: url(../../dist/images/icon-star-trustpilot.svg);
}

.icon-wrapper {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.icon-wrapper svg {
  display: none;
}
.icon-wrapper::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-wrapper[data-size=small] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.icon-wrapper[data-size=small] svg {
  display: none;
}
.icon-wrapper[data-size=small]::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-wrapper[data-size=medium] {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.icon-wrapper[data-size=medium] svg {
  display: none;
}
.icon-wrapper[data-size=medium]::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-wrapper[data-size=large] {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.icon-wrapper[data-size=large] svg {
  display: none;
}
.icon-wrapper[data-size=large]::before {
  content: "";
  width: 48px;
  height: 48px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-wrapper[data-icon-color=brand-primary-400]::before {
  background-color: var(--color-brand-primary-400);
}
.icon-wrapper[data-icon-color=brand-primary-200]::before {
  background-color: var(--color-brand-primary-200);
}
.icon-wrapper[data-icon-color=brand-primary-600]::before {
  background-color: var(--color-brand-primary-600);
}
.icon-wrapper[data-icon-color=brand-primary-700]::before {
  background-color: var(--color-brand-primary-700);
}
.icon-wrapper[data-icon-color=grey-900]::before {
  background-color: var(--color-grey-900);
}
.icon-wrapper[data-icon-color=grey-700]::before {
  background-color: var(--color-grey-700);
}
.icon-wrapper[data-icon-color=grey-500]::before {
  background-color: var(--color-grey-500);
}
.icon-wrapper[data-icon-color=white]::before {
  background-color: var(--color-white);
}

.btn-icon-wrapper {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.btn-icon-wrapper svg {
  display: none;
}
.btn-icon-wrapper::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.container-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.container-icon svg {
  display: none;
}
.container-icon::before {
  content: "";
  width: 48px;
  height: 48px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.container-icon[data-has-background=true] {
  border-radius: 50%;
  border: 8px solid var(--color-brand-primary-600);
  background: var(--color-brand-primary-700);
}

.container-icon-wrapper {
  width: 48px;
  height: 48px;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 12px;
  position: relative;
}
.container-icon-wrapper::before {
  content: "";
  width: 48px;
  height: 48px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.container-icon-wrapper:not([data-icon])::before {
  display: none;
}
.container-icon-wrapper svg {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.container-icon-wrapper:has(svg)::before {
  display: none;
}
.container-icon-wrapper[data-icon-bg=brand-primary-400] {
  background-color: var(--color-brand-primary-400);
}
.container-icon-wrapper[data-icon-bg=brand-primary-200] {
  background-color: var(--color-brand-primary-200);
}
.container-icon-wrapper[data-icon-bg=brand-primary-50] {
  background-color: var(--color-brand-primary-50);
}
.container-icon-wrapper[data-icon-bg=brand-primary-600] {
  background-color: var(--color-brand-primary-600);
}
.container-icon-wrapper[data-icon-bg=brand-primary-700] {
  background-color: var(--color-brand-primary-700);
}
.container-icon-wrapper[data-icon-bg=grey-900] {
  background-color: var(--color-grey-900);
}
.container-icon-wrapper[data-icon-bg=grey-700] {
  background-color: var(--color-grey-700);
}
.container-icon-wrapper[data-icon-bg=grey-500] {
  background-color: var(--color-grey-500);
}
.container-icon-wrapper[data-icon-bg=grey-200] {
  background-color: var(--color-grey-200);
}
.container-icon-wrapper[data-icon-bg=grey-100] {
  background-color: var(--color-grey-100);
}
.container-icon-wrapper[data-icon-bg=grey-50] {
  background-color: var(--color-grey-50);
}
.container-icon-wrapper[data-icon-bg=white] {
  background-color: var(--color-white);
}
.container-icon-wrapper[data-icon-bg=accent-400] {
  background-color: var(--color-accent-400);
}
.container-icon-wrapper[data-icon-bg=accent-50] {
  background-color: var(--color-accent-50);
}
.container-icon-wrapper[data-icon-bg=red-700] {
  background-color: var(--color-red-700);
}
.container-icon-wrapper[data-icon-fill=brand-primary-400] {
  color: var(--color-brand-primary-400);
}
.container-icon-wrapper[data-icon-fill=brand-primary-200] {
  color: var(--color-brand-primary-200);
}
.container-icon-wrapper[data-icon-fill=brand-primary-50] {
  color: var(--color-brand-primary-50);
}
.container-icon-wrapper[data-icon-fill=brand-primary-600] {
  color: var(--color-brand-primary-600);
}
.container-icon-wrapper[data-icon-fill=brand-primary-700] {
  color: var(--color-brand-primary-700);
}
.container-icon-wrapper[data-icon-fill=grey-900] {
  color: var(--color-grey-900);
}
.container-icon-wrapper[data-icon-fill=grey-700] {
  color: var(--color-grey-700);
}
.container-icon-wrapper[data-icon-fill=grey-500] {
  color: var(--color-grey-500);
}
.container-icon-wrapper[data-icon-fill=grey-200] {
  color: var(--color-grey-200);
}
.container-icon-wrapper[data-icon-fill=grey-100] {
  color: var(--color-grey-100);
}
.container-icon-wrapper[data-icon-fill=grey-50] {
  color: var(--color-grey-50);
}
.container-icon-wrapper[data-icon-fill=white] {
  color: var(--color-white);
}
.container-icon-wrapper[data-icon-fill=accent-400] {
  color: var(--color-accent-400);
}
.container-icon-wrapper[data-icon-fill=accent-50] {
  color: var(--color-accent-50);
}
.container-icon-wrapper[data-icon-fill=red-700] {
  color: var(--color-red-700);
}
.container-icon-wrapper[data-icon-bg] {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.container-icon-wrapper[data-icon-bg]::before {
  width: 24px;
  height: 24px;
}
.container-icon-wrapper[data-icon-bg] svg {
  width: 24px;
  height: 24px;
}
.container-icon-wrapper {
  margin-right: auto;
}
.container-icon-wrapper[data-alignment=center] {
  margin-left: auto;
  margin-right: auto;
}
.container-icon-wrapper[data-alignment=right] {
  margin-left: auto;
  margin-right: 0;
}

.featured-icon {
  width: 48px;
  height: 48px;
  background: var(--color-brand-primary-700);
  border-radius: 50%;
  border: 8px solid var(--color-brand-primary-600);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.featured-icon::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: var(--color-brand-primary-200);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.featured-icon:not([data-icon])::before {
  display: none;
}

.content[data-list-icon]:not([data-list-icon=none]) ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}
.content[data-list-icon]:not([data-list-icon=none]) ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  position: relative;
  padding-left: 28px;
}
.content[data-list-icon]:not([data-list-icon=none]) ul li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0px;
  width: 12px;
  height: 14px;
  background-color: var(--color-brand-primary-400);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 10px 10px;
  mask-size: 10px 10px;
  transform: translateY(50%);
}
.content[data-list-icon=brand-add] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-add.svg);
  mask-image: url(../../dist/images/icon-brand-add.svg);
}
.content[data-list-icon=brand-arrow-down] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-arrow-down.svg);
  mask-image: url(../../dist/images/icon-brand-arrow-down.svg);
}
.content[data-list-icon=brand-arrow-left] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-arrow-left.svg);
  mask-image: url(../../dist/images/icon-brand-arrow-left.svg);
}
.content[data-list-icon=brand-arrow-right] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-arrow-right.svg);
  mask-image: url(../../dist/images/icon-brand-arrow-right.svg);
}
.content[data-list-icon=brand-arrow-up] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-arrow-up.svg);
  mask-image: url(../../dist/images/icon-brand-arrow-up.svg);
}
.content[data-list-icon=brand-arrow-cta] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-arrow-cta.svg);
  mask-image: url(../../dist/images/icon-brand-arrow-cta.svg);
}
.content[data-list-icon=brand-bullet] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-bullet.svg);
  mask-image: url(../../dist/images/icon-brand-bullet.svg);
}
.content[data-list-icon=brand-disclosure] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-disclosure.svg);
  mask-image: url(../../dist/images/icon-brand-disclosure.svg);
}
.content[data-list-icon=brand-expand] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-expand.svg);
  mask-image: url(../../dist/images/icon-brand-expand.svg);
}
.content[data-list-icon=brand-eye-active] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-eye-active.svg);
  mask-image: url(../../dist/images/icon-brand-eye-active.svg);
}
.content[data-list-icon=brand-eye-inactive] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-eye-inactive.svg);
  mask-image: url(../../dist/images/icon-brand-eye-inactive.svg);
}
.content[data-list-icon=brand-facebook] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-facebook.svg);
  mask-image: url(../../dist/images/icon-brand-facebook.svg);
}
.content[data-list-icon=brand-instagram] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-instagram.svg);
  mask-image: url(../../dist/images/icon-brand-instagram.svg);
}
.content[data-list-icon=brand-link] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-link.svg);
  mask-image: url(../../dist/images/icon-brand-link.svg);
}
.content[data-list-icon=brand-linkedin] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-linkedin.svg);
  mask-image: url(../../dist/images/icon-brand-linkedin.svg);
}
.content[data-list-icon=brand-quote] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-quote.svg);
  mask-image: url(../../dist/images/icon-brand-quote.svg);
}
.content[data-list-icon=brand-quote-mark] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-quote-mark.svg);
  mask-image: url(../../dist/images/icon-brand-quote-mark.svg);
}
.content[data-list-icon=brand-seren] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-seren.svg);
  mask-image: url(../../dist/images/icon-brand-seren.svg);
}
.content[data-list-icon=brand-star-full] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-star-full.svg);
  mask-image: url(../../dist/images/icon-brand-star-full.svg);
}
.content[data-list-icon=brand-star] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-star.svg);
  mask-image: url(../../dist/images/icon-brand-star.svg);
}
.content[data-list-icon=brand-star-empty] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-star-empty.svg);
  mask-image: url(../../dist/images/icon-brand-star-empty.svg);
}
.content[data-list-icon=brand-star-half] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-star-half.svg);
  mask-image: url(../../dist/images/icon-brand-star-half.svg);
}
.content[data-list-icon=brand-tiktok] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-tiktok.svg);
  mask-image: url(../../dist/images/icon-brand-tiktok.svg);
}
.content[data-list-icon=brand-twitter] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-twitter.svg);
  mask-image: url(../../dist/images/icon-brand-twitter.svg);
}
.content[data-list-icon=brand-youtube] ul li::after {
  -webkit-mask-image: url(../../dist/images/icon-brand-youtube.svg);
  mask-image: url(../../dist/images/icon-brand-youtube.svg);
}
.content[data-list-icon=none] ul {
  list-style: disc;
  padding-left: 24px;
}
.content[data-list-icon=none] ul li {
  display: list-item;
  margin-bottom: 8px;
}
.content[data-list-icon=none] ul li::before {
  display: none;
}

.social-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-grey-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}
.social-icon::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--color-grey-900);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.social-icon:hover {
  background: var(--color-brand-primary-400);
}
.social-icon:hover::before {
  background-color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .icon-wrapper *,
  .btn-icon-wrapper *,
  .container-icon *,
  .featured-icon *,
  .social-icon * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-grey-900);
  margin-bottom: 8px;
}

.form-input {
  background-color: var(--color-white);
  border: 1px solid var(--color-form-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-grey-500);
  width: 100%;
  transition: border-color 0.2s ease;
}
.form-input::-moz-placeholder {
  color: var(--color-form-placeholder);
}
.form-input::placeholder {
  color: var(--color-form-placeholder);
}
.form-input:focus {
  border-color: var(--color-form-border-focus);
  outline: none;
}
.form-input:disabled {
  background-color: var(--color-grey-50);
  cursor: not-allowed;
}

.form-textarea {
  background-color: var(--color-white);
  border: 1px solid var(--color-form-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-grey-500);
  width: 100%;
  transition: border-color 0.2s ease;
}
.form-textarea::-moz-placeholder {
  color: var(--color-form-placeholder);
}
.form-textarea::placeholder {
  color: var(--color-form-placeholder);
}
.form-textarea:focus {
  border-color: var(--color-form-border-focus);
  outline: none;
}
.form-textarea:disabled {
  background-color: var(--color-grey-50);
  cursor: not-allowed;
}
.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select {
  background-color: var(--color-white);
  border: 1px solid var(--color-form-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-grey-500);
  width: 100%;
  transition: border-color 0.2s ease;
}
.form-select::-moz-placeholder {
  color: var(--color-form-placeholder);
}
.form-select::placeholder {
  color: var(--color-form-placeholder);
}
.form-select:focus {
  border-color: var(--color-form-border-focus);
  outline: none;
}
.form-select:disabled {
  background-color: var(--color-grey-50);
  cursor: not-allowed;
}
.form-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23797d76' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.form-submit {
  background-color: var(--color-brand-primary-400);
  border: 1px solid var(--color-brand-primary-400);
  border-radius: 8px;
  padding: 12px 24px;
  color: var(--color-brand-primary-50);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.form-submit:hover {
  background-color: var(--color-brand-primary-600);
  border-color: var(--color-brand-primary-600);
  color: var(--color-brand-primary-50);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.form-submit:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-primary-600);
}
.form-submit:focus:not(:focus-visible) {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.form-submit:focus-visible {
  box-shadow: 0 0 0 3px var(--color-brand-primary-600);
}
.form-submit:disabled {
  background-color: var(--color-grey-100);
  border-color: var(--color-grey-200);
  color: var(--color-grey-500);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.form-submit:disabled:hover {
  background-color: var(--color-grey-100);
  border-color: var(--color-grey-200);
  color: var(--color-grey-500);
}
@media (min-width: 768px) {
  .form-submit {
    width: auto;
  }
}

.form-checkbox-wrapper {
  margin-bottom: 0;
}
.form-checkbox-wrapper > p, .form-checkbox-wrapper {
  display: block;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-grey-700);
}
.form-checkbox-wrapper input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0 8px 0 0;
  vertical-align: middle;
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.form-checkbox-wrapper input[type=checkbox]:checked {
  background-color: var(--color-brand-primary-400);
  border-color: var(--color-brand-primary-400);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%231b1c1a' d='M4.5 7.5L1.5 4.5 0 6l4.5 4.5 7.5-7.5-1.5-1.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.form-checkbox-wrapper input[type=checkbox]:focus {
  border-color: var(--color-form-border-focus);
  outline: 2px solid var(--color-brand-primary-200);
  outline-offset: 2px;
}
.form-checkbox-wrapper .wpcf7-form-control-wrap {
  display: inline !important;
  margin: 0;
  padding: 0;
  line-height: inherit;
  position: relative;
  top: -2px;
}
.form-checkbox-wrapper .wpcf7-acceptance,
.form-checkbox-wrapper .wpcf7-list-item {
  display: inline !important;
  margin: 0;
  padding: 0;
  line-height: inherit;
}
.form-checkbox-wrapper .wpcf7-list-item-label {
  display: inline;
}
.form-checkbox-wrapper a {
  color: var(--color-brand-primary-600);
  text-decoration: underline;
  font-size: inherit;
}
.form-checkbox-wrapper a:hover {
  color: var(--color-brand-primary-700);
}

.form-file {
  background-color: var(--color-white);
  border: 1px solid var(--color-form-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-grey-500);
  width: 100%;
  transition: border-color 0.2s ease;
}
.form-file::-moz-placeholder {
  color: var(--color-form-placeholder);
}
.form-file::placeholder {
  color: var(--color-form-placeholder);
}
.form-file:focus {
  border-color: var(--color-form-border-focus);
  outline: none;
}
.form-file:disabled {
  background-color: var(--color-grey-50);
  cursor: not-allowed;
}
.form-file {
  padding: 8px 16px;
}
.form-file::file-selector-button {
  background-color: var(--color-grey-100);
  border: 1px solid var(--color-form-border);
  border-radius: 4px;
  padding: 8px 16px;
  margin-right: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.form-file::file-selector-button:hover {
  background-color: var(--color-grey-200);
}

.form-helper-text {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-grey-500);
  margin-top: 6px;
}

.boilerplate-form {
  width: 100%;
}
.boilerplate-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 24px;
}
.boilerplate-form .form-field:last-child {
  margin-bottom: 0;
}
.boilerplate-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}
.boilerplate-form .form-row:last-child {
  margin-bottom: 0;
}
.boilerplate-form--stacked .form-row--inline {
  flex-direction: column;
}
.boilerplate-form--inline .form-row--inline {
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1024px) {
  .boilerplate-form--inline .form-row--inline {
    flex-direction: row;
  }
  .boilerplate-form--inline .form-row--inline > .form-field {
    flex: 1;
    margin-bottom: 0;
  }
}

.boilerplate-form--light .form-label {
  color: var(--color-grey-900);
}

.boilerplate-form--dark .form-label {
  color: var(--color-grey-50);
}
.boilerplate-form--dark .form-helper-text {
  color: var(--color-grey-200);
}
.boilerplate-form--dark .form-checkbox-wrapper > p, .boilerplate-form--dark .form-checkbox-wrapper {
  color: var(--color-grey-50);
}
.boilerplate-form--dark .form-checkbox-wrapper a {
  color: var(--color-brand-primary-200);
}
.boilerplate-form--dark .form-checkbox-wrapper a:hover {
  color: var(--color-brand-primary-400);
}
.boilerplate-form--dark .form-checkbox-wrapper input[type=checkbox] {
  background-color: var(--color-white);
  border-color: var(--color-grey-200);
}

.boilerplate-form .form-field--acceptance {
  width: 100%;
  margin-bottom: 0;
}
.boilerplate-form .form-field--acceptance .form-checkbox-wrapper {
  margin-top: 0;
  margin-bottom: 0;
}
.boilerplate-form .form-field--submit {
  margin-bottom: 0;
}
.boilerplate-form .form-row--footer {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.boilerplate-form .form-row--footer .form-field--acceptance,
.boilerplate-form .form-row--footer .form-field--submit {
  margin-bottom: 0;
}

/**
 * Blocks Global Styles - Shared Mixin
 *
 * SINGLE SOURCE OF TRUTH for all global block styles.
 * Used by both frontend (blocks-global.scss) and editor (editor-global.scss).
 *
 * Frontend: Outputs styles directly at file level
 * Editor: Wraps output in .editor-styles-wrapper for iframe isolation
 *
 * @see blocks-global.scss (frontend entry point)
 * @see editor/editor-global.scss (editor entry point)
 * @see docs/CSS-ARCHITECTURE.md
 */
/**
 * Grid Layout Mixin
 *
 * Reusable grid system for all blocks.
 * Used by: Benefits Grid, Services Grid, Team Grid, Blog Index, Testimonials.
 *
 * @param {number} $columns-desktop - Desktop columns (1024px+)
 * @param {number} $gap - Grid gap (all breakpoints)
 * @param {number} $columns-tablet-landscape - Tablet landscape columns (768px-1023px)
 * @param {number} $columns-tablet-portrait - Tablet portrait columns (540px-767px)
 * @param {number} $columns-mobile - Mobile columns (< 540px)
 *
 * @package BNBoilerplate
 * @since 1.0.0
 */
/**
 * Button Component — Single Source of Truth
 *
 * All button styles defined here. Consumed by frontend + editor.
 * Design values from tokens/_buttons.scss.
 *
 * HTML contract:
 *   Roll styles (link, link-animated, style-1, style-2, style-3):
 *     <a class="btn" data-button-style="link">
 *       <span class="btn-text-track"><span class="btn-text">…</span><span class="btn-text-hover" aria-hidden="true">…</span></span>
 *     </a>
 *
 *   Simple styles (none, grey):
 *     <a class="btn" data-button-style="none">
 *       <span class="btn-text">…</span>
 *     </a>
 *
 * @see ADR 0013
 * @see tokens/_buttons.scss
 */
/**
 * Mixins
 */
/**
 * Typography Rules Mixin
 *
 * Single source of truth for all typography rules.
 * Included by:
 * - typography.scss (global frontend scope)
 * - _blocks-global-styles.scss (global mixin scope — frontend + editor)
 *
 * Font-family declarations: set once on body/.editor-styles-wrapper,
 * not repeated per element.
 *
 * Headings (h1-h2, xlarge, large): Lexend Light 300
 * Sub-headings (h3-h5): Public Sans Light 300
 * Body text: Public Sans Light 300, labels/buttons: Regular 400
 *
 * @package BNBoilerplate
 * @since 3.0.0
 */
/**
 * Global Block Styles Mixin
 *
 * Outputs all shared block styles. Called directly for frontend,
 * called inside .editor-styles-wrapper for editor.
 *
 * @param {string} $icon-path - Path to icon assets (varies by context)
 */
hr.container-separator {
  border: 0;
  margin: 0;
  padding: 0;
  height: 0;
}
hr.container-separator[data-separator-size=sm] {
  --container-separator-size: var(--border-weight-sm);
}
hr.container-separator[data-separator-size=md] {
  --container-separator-size: var(--border-weight-md);
}
hr.container-separator[data-separator-size=lg] {
  --container-separator-size: var(--border-weight-lg);
}
hr.container-separator[data-separator-style=solid] {
  --container-separator-style: solid;
}
hr.container-separator[data-separator-style=dashed] {
  --container-separator-style: dashed;
}
hr.container-separator[data-separator-style=dotted] {
  --container-separator-style: dotted;
}
hr.container-separator[data-separator-tone=brand-primary-400] {
  --container-separator-tone: var(--color-brand-primary-400);
}
hr.container-separator[data-separator-tone=brand-primary-200] {
  --container-separator-tone: var(--color-brand-primary-200);
}
hr.container-separator[data-separator-tone=brand-primary-50] {
  --container-separator-tone: var(--color-brand-primary-50);
}
hr.container-separator[data-separator-tone=brand-primary-600] {
  --container-separator-tone: var(--color-brand-primary-600);
}
hr.container-separator[data-separator-tone=brand-primary-700] {
  --container-separator-tone: var(--color-brand-primary-700);
}
hr.container-separator[data-separator-tone=grey-900] {
  --container-separator-tone: var(--color-grey-900);
}
hr.container-separator[data-separator-tone=grey-700] {
  --container-separator-tone: var(--color-grey-700);
}
hr.container-separator[data-separator-tone=grey-500] {
  --container-separator-tone: var(--color-grey-500);
}
hr.container-separator[data-separator-tone=grey-200] {
  --container-separator-tone: var(--color-grey-200);
}
hr.container-separator[data-separator-tone=grey-100] {
  --container-separator-tone: var(--color-grey-100);
}
hr.container-separator[data-separator-tone=grey-50] {
  --container-separator-tone: var(--color-grey-50);
}
hr.container-separator[data-separator-tone=white] {
  --container-separator-tone: var(--color-white);
}
hr.container-separator[data-separator-tone=accent-400] {
  --container-separator-tone: var(--color-accent-400);
}
hr.container-separator[data-separator-tone=accent-50] {
  --container-separator-tone: var(--color-accent-50);
}
hr.container-separator[data-separator-tone=red-700] {
  --container-separator-tone: var(--color-red-700);
}
hr.container-separator {
  border-top: var(--container-separator-size, 1px) var(--container-separator-style, solid) var(--container-separator-tone, var(--color-grey-200, #d7d7d3));
}

.content-grid,
.section-grid,
.full-width {
  display: grid;
  grid-auto-flow: row;
  --_safe-vw: calc(100vw - var(--_scrollbar-width, 0px));
  --_site-max: var(--site-width);
  --_padding: var(--padding-inline);
  --_breakout-max: var(--breakout-max-width);
  --_breakout-size: clamp(
    0px,
    calc((var(--_safe-vw) - (var(--_padding) * 2) - var(--_site-max)) / 2),
    calc((var(--_breakout-max) - var(--_site-max)) / 2)
  );
  --_site-width-effective: clamp(
    0px,
    calc(var(--_safe-vw) - (var(--_padding) * 2) - (var(--_breakout-size) * 2)),
    var(--_site-max)
  );
  --_site-column-size: max(
    0px,
    calc((var(--_site-width-effective) - (var(--grid-gap) * 3)) / 4)
  );
  --_site-track-size: var(--_site-column-size);
  --_content-sm-width: var(--_site-width-effective);
  --_content-md-width: var(--_site-width-effective);
  --_content-lg-width: var(--_site-width-effective);
  grid-template-columns: [full-width-start] minmax(var(--_padding), 1fr) [breakout-start] minmax(0, var(--_breakout-size)) [site-width-start lg-start md-start sm-start] var(--_site-column-size) var(--grid-gap) var(--_site-column-size) var(--grid-gap) var(--_site-column-size) var(--grid-gap) var(--_site-column-size) [sm-end md-end lg-end site-width-end] minmax(0, var(--_breakout-size)) [breakout-end] minmax(var(--_padding), 1fr) [full-width-end];
}
@media (min-width: 769px) {
  .content-grid,
  .section-grid,
  .full-width {
    --_site-column-size: max(
      0px,
      calc((var(--_site-width-effective) - (var(--grid-gap) * 11)) / 12)
    );
    --_content-sm-width: calc((var(--_site-column-size) * 6) + (var(--grid-gap) * 5));
    --_content-md-width: calc((var(--_site-column-size) * 8) + (var(--grid-gap) * 7));
    --_content-lg-width: calc((var(--_site-column-size) * 10) + (var(--grid-gap) * 9));
    grid-template-columns: [full-width-start] minmax(var(--_padding), 1fr) [breakout-start] minmax(0, var(--_breakout-size)) [site-width-start] var(--_site-column-size) var(--grid-gap) [lg-start] var(--_site-column-size) var(--grid-gap) [md-start] var(--_site-column-size) var(--grid-gap) [sm-start] repeat(5, var(--_site-column-size) var(--grid-gap)) var(--_site-column-size) [sm-end] var(--grid-gap) var(--_site-column-size) [md-end] var(--grid-gap) var(--_site-column-size) [lg-end] var(--grid-gap) var(--_site-column-size) [site-width-end] minmax(0, var(--_breakout-size)) [breakout-end] minmax(var(--_padding), 1fr) [full-width-end];
  }
}

.content-grid > *,
.section-grid > *,
.full-width > * {
  grid-column: site-width-start/site-width-end;
  min-width: 0;
}

.content-grid > .site-width,
.section-grid > .site-width,
.full-width > .site-width {
  grid-column: site-width-start/site-width-end;
}

.content-grid > .breakout,
.section-grid > .breakout,
.full-width > .breakout {
  grid-column: breakout-start/breakout-end;
}

.content-grid > .full-width,
.section-grid > .full-width,
.full-width > .full-width {
  grid-column: full-width-start/full-width-end;
}

.content-grid > .grid-line-labels,
.section-grid > .grid-line-labels,
.full-width > .grid-line-labels {
  grid-column: full-width-start/full-width-end;
}

.content-sm,
.content-md,
.content-lg {
  grid-column: site-width-start/site-width-end;
  min-width: 0;
  width: 100%;
}

@media (min-width: 769px) {
  .content-sm {
    grid-column: sm-start/sm-end;
  }
  .content-md {
    grid-column: md-start/md-end;
  }
  .content-lg {
    grid-column: lg-start/lg-end;
  }
}
.inner-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
  gap: var(--grid-gap);
  row-gap: 0;
  width: 100%;
}

.inner-grid--valign-center {
  align-items: center;
}

:where(.inner-grid) > * {
  grid-column: 1/-1;
}

@media (min-width: 769px) {
  :where(.inner-grid) > * {
    grid-column: auto;
  }
}
@media (min-width: 769px) {
  .inner-grid {
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  }
  .col-1 {
    grid-column-end: span 1;
  }
  .col-2 {
    grid-column-end: span 2;
  }
  .col-3 {
    grid-column-end: span 3;
  }
  .col-4 {
    grid-column-end: span 4;
  }
  .col-5 {
    grid-column-end: span 5;
  }
  .col-6 {
    grid-column-end: span 6;
  }
  .col-7 {
    grid-column-end: span 7;
  }
  .col-8 {
    grid-column-end: span 8;
  }
  .col-9 {
    grid-column-end: span 9;
  }
  .col-10 {
    grid-column-end: span 10;
  }
  .col-11 {
    grid-column-end: span 11;
  }
  .col-12 {
    grid-column-end: span 12;
  }
  .col-start-1 {
    grid-column-start: 1;
  }
  .col-start-2 {
    grid-column-start: 2;
  }
  .col-start-3 {
    grid-column-start: 3;
  }
  .col-start-4 {
    grid-column-start: 4;
  }
  .col-start-5 {
    grid-column-start: 5;
  }
  .col-start-6 {
    grid-column-start: 6;
  }
  .col-start-7 {
    grid-column-start: 7;
  }
  .col-start-8 {
    grid-column-start: 8;
  }
  .col-start-9 {
    grid-column-start: 9;
  }
  .col-start-10 {
    grid-column-start: 10;
  }
  .col-start-11 {
    grid-column-start: 11;
  }
  .col-start-12 {
    grid-column-start: 12;
  }
  [data-col-start="1"] {
    grid-column-start: 1;
  }
  [data-col-start="2"] {
    grid-column-start: 2;
  }
  [data-col-start="3"] {
    grid-column-start: 3;
  }
  [data-col-start="4"] {
    grid-column-start: 4;
  }
  [data-col-start="5"] {
    grid-column-start: 5;
  }
  [data-col-start="6"] {
    grid-column-start: 6;
  }
  [data-col-start="7"] {
    grid-column-start: 7;
  }
  [data-col-start="8"] {
    grid-column-start: 8;
  }
  [data-col-start="9"] {
    grid-column-start: 9;
  }
  [data-col-start="10"] {
    grid-column-start: 10;
  }
  [data-col-start="11"] {
    grid-column-start: 11;
  }
  [data-col-start="12"] {
    grid-column-start: 12;
  }
  [data-col-span="1"] {
    grid-column-end: span 1;
  }
  [data-col-span="2"] {
    grid-column-end: span 2;
  }
  [data-col-span="3"] {
    grid-column-end: span 3;
  }
  [data-col-span="4"] {
    grid-column-end: span 4;
  }
  [data-col-span="5"] {
    grid-column-end: span 5;
  }
  [data-col-span="6"] {
    grid-column-end: span 6;
  }
  [data-col-span="7"] {
    grid-column-end: span 7;
  }
  [data-col-span="8"] {
    grid-column-end: span 8;
  }
  [data-col-span="9"] {
    grid-column-end: span 9;
  }
  [data-col-span="10"] {
    grid-column-end: span 10;
  }
  [data-col-span="11"] {
    grid-column-end: span 11;
  }
  [data-col-span="12"] {
    grid-column-end: span 12;
  }
}
[data-row-gap=none] {
  row-gap: var(--row-gap-none);
}

[data-row-gap=small] {
  row-gap: var(--row-gap-small);
}

[data-row-gap=medium] {
  row-gap: var(--row-gap-medium);
}

[data-row-gap=large] {
  row-gap: var(--row-gap-large);
}

[data-row-gap=xlarge] {
  row-gap: var(--row-gap-xlarge);
}

[data-h-align=left] {
  justify-self: start;
}

[data-h-align=center] {
  justify-self: center;
}

[data-h-align=right] {
  justify-self: end;
}

[data-v-align=top] {
  align-self: start;
}

[data-v-align=middle] {
  align-self: center;
}

[data-v-align=bottom] {
  align-self: end;
}

.row-spacer {
  grid-column: 1/-1;
}

.row-spacer[data-size=small] {
  height: 8px;
}

.row-spacer[data-size=medium] {
  height: 16px;
}

.row-spacer[data-size=large] {
  height: 32px;
}

.row-spacer[data-size=xlarge] {
  height: 64px;
}

.auto-grid {
  --card-min-width: 280px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
  gap: var(--grid-gap);
}

.grid-reset-children > * {
  grid-column: auto;
}

.split-screen {
  --_wrapper-padding: var(--padding-inline);
  --_wrapper-max: min(
    var(--site-width),
    calc(calc(100vw - var(--_scrollbar-width, 0px)) - (var(--_wrapper-padding) * 2))
  );
  --_site-contain-width: var(--_wrapper-max);
  display: block;
  padding-block: 0;
}

.split-screen > *:not(img):not(picture):not(.media-slot) {
  padding: 32px 16px;
}

.split-screen img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 961px) {
  .split-screen {
    display: grid;
    grid-template-columns: minmax(var(--_wrapper-padding), 1fr) minmax(0, calc(var(--_wrapper-max) / 2)) minmax(0, calc(var(--_wrapper-max) / 2)) minmax(var(--_wrapper-padding), 1fr);
  }
  .split-screen > img:first-child,
  .split-screen > picture:first-child,
  .split-screen > .media-slot:first-child {
    grid-column: 1/3;
  }
  .split-screen > img:last-child,
  .split-screen > picture:last-child,
  .split-screen > .media-slot:last-child {
    grid-column: 3/5;
  }
  .split-screen > *:not(img):not(picture):not(.media-slot):first-child {
    grid-column: 2/3;
    display: grid;
    align-content: center;
    padding: 40px 32px;
  }
  .split-screen > *:not(img):not(picture):not(.media-slot):last-child {
    grid-column: 3/4;
    display: grid;
    align-content: center;
    padding: 40px 32px;
  }
  .split-screen--images > img:first-child,
  .split-screen--images > .media-frame:first-child,
  .split-screen--images > .media-frame:first-child img {
    grid-column: 1/3;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .split-screen--images > img:last-child,
  .split-screen--images > .media-frame:last-child,
  .split-screen--images > .media-frame:last-child img {
    grid-column: 3/5;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .split-screen[data-right-contain=site-width],
  .split-screen[data-left-contain=site-width] {
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--_site-contain-width) / 2)) minmax(0, calc(var(--_site-contain-width) / 2)) minmax(0, 1fr);
  }
  .split-screen[data-right-contain=breakout],
  .split-screen[data-left-contain=breakout] {
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--breakout-max-width) / 2)) minmax(0, calc(var(--breakout-max-width) / 2)) minmax(0, 1fr);
  }
  .split-screen[data-right-contain] > img:last-child,
  .split-screen[data-right-contain] > .media-frame:last-child,
  .split-screen[data-right-contain] > .media-frame:last-child img {
    grid-column: 3/4;
  }
  .split-screen[data-left-contain] > img:first-child,
  .split-screen[data-left-contain] > .media-frame:first-child,
  .split-screen[data-left-contain] > .media-frame:first-child img {
    grid-column: 2/3;
  }
}
@media (min-width: 769px) {
  .heading-before-content:has([data-heading-width=lg]) {
    grid-column: 2/span 10;
  }
  .heading-before-content:has([data-heading-width=md]) {
    grid-column: 3/span 8;
  }
  .heading-before-content:has([data-heading-width=sm]) {
    grid-column: 4/span 6;
  }
}
@media (min-width: 769px) {
  .heading-before-content[data-heading-layout=lg] {
    grid-column: 2/span 10;
  }
  .heading-before-content[data-heading-layout=md] {
    grid-column: 3/span 8;
  }
  .heading-before-content[data-heading-layout=sm] {
    grid-column: 4/span 6;
  }
}
.heading-before-content[data-heading-spacing=none] {
  margin-bottom: 0;
}

.heading-before-content[data-heading-spacing=xs] {
  margin-bottom: 16px;
}

.heading-before-content[data-heading-spacing=sm] {
  margin-bottom: clamp(24px, 18.0571px + 1.5238vw, 40px);
}

.heading-before-content[data-heading-spacing=md] {
  margin-bottom: clamp(64px, 55.0857px + 2.2857vw, 88px);
}

.heading-before-content[data-heading-spacing=lg] {
  margin-bottom: clamp(80px, 65.1429px + 3.8095vw, 120px);
}

.content-area[data-content-spacing=none] {
  margin-bottom: 0;
}

.content-area[data-content-spacing=xs] {
  margin-bottom: 16px;
}

.content-area[data-content-spacing=sm] {
  margin-bottom: clamp(24px, 18.0571px + 1.5238vw, 40px);
}

.content-area[data-content-spacing=md] {
  margin-bottom: clamp(64px, 55.0857px + 2.2857vw, 88px);
}

.content-area[data-content-spacing=lg] {
  margin-bottom: clamp(80px, 65.1429px + 3.8095vw, 120px);
}

:root {
  --spacing-section-small: 40px;
  --spacing-section-medium: clamp(72px, 54.1714px + 4.5714vw, 120px);
  --spacing-section-large: clamp(100px, 72.1429px + 7.1429vw, 175px);
  --spacing-container-small: 40px;
  --spacing-container-medium: clamp(72px, 54.1714px + 4.5714vw, 120px);
  --spacing-container-large: clamp(100px, 72.1429px + 7.1429vw, 175px);
}

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

.font-size-xlarge {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, calc(1.0176056338rem + 5.2582159624vw), 5.75rem);
  line-height: clamp(2.8125rem, calc(1.161971831rem + 7.0422535211vw), 7.5rem);
  font-weight: var(--font-weight-light);
}

:where(h1),
.font-size-h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, calc(1.7297535211rem + 3.2863849765vw), 4.6875rem);
  line-height: clamp(3.25rem, calc(2.3697183099rem + 3.7558685446vw), 5.75rem);
  font-weight: var(--font-weight-light);
}

.large,
.font-size-large {
  font-family: var(--font-heading);
  font-size: clamp(2.125rem, calc(1.6408450704rem + 2.0657276995vw), 3.5rem);
  line-height: clamp(2.875rem, calc(2.3468309859rem + 2.2535211268vw), 4.375rem);
  font-weight: var(--font-weight-light);
}

:where(h2),
.font-size-h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, calc(1.698943662rem + 0.7511737089vw), 2.375rem);
  line-height: clamp(2.5rem, calc(2.323943662rem + 0.7511737089vw), 3rem);
  font-weight: var(--font-weight-light);
}

:where(h3),
.font-size-h3 {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, calc(1.411971831rem + 0.3755868545vw), 1.75rem);
  line-height: clamp(2.125rem, calc(2.036971831rem + 0.3755868545vw), 2.375rem);
  font-weight: var(--font-weight-light);
}

:where(h4),
.font-size-h4 {
  font-family: var(--font-body);
  font-size: clamp(1.3125rem, calc(1.2464788732rem + 0.2816901408vw), 1.5rem);
  line-height: clamp(1.875rem, calc(1.786971831rem + 0.3755868545vw), 2.125rem);
  font-weight: var(--font-weight-light);
}

:where(h5),
.font-size-h5 {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, calc(1.0404929577rem + 0.0938967136vw), 1.125rem);
  line-height: clamp(1.625rem, calc(1.6029929577rem + 0.0938967136vw), 1.6875rem);
  font-weight: var(--font-weight-light);
}

:where(h6),
.font-size-h6 {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, calc(1.0404929577rem + 0.0938967136vw), 1.125rem);
  line-height: clamp(1.625rem, calc(1.6029929577rem + 0.0938967136vw), 1.6875rem);
  font-weight: var(--font-weight-light);
}

:where(p),
.font-size-p {
  font-size: var(--font-size-p);
  line-height: 1.47;
  font-weight: var(--font-weight-light);
}

strong {
  font-weight: bold !important;
}

:where(small),
.small,
.font-size-small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: var(--font-weight-regular);
}

.subtitle {
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: var(--font-weight-light);
}

:where(blockquote),
.blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, calc(1.3679577465rem + 0.5633802817vw), 1.875rem);
  line-height: 1.4;
  font-weight: var(--font-weight-light);
}

.section {
  position: relative;
  padding: var(--spacing-section-medium) 0;
  overflow: clip;
  display: grid;
  --_safe-vw: calc(100vw - var(--_scrollbar-width, 0px));
  --_site-max: var(--site-width);
  --_padding: var(--padding-inline);
  --_breakout-max: var(--breakout-max-width);
  --_breakout-size: clamp(
    0px,
    calc((var(--_safe-vw) - (var(--_padding) * 2) - var(--_site-max)) / 2),
    calc((var(--_breakout-max) - var(--_site-max)) / 2)
  );
  --_site-width-effective: clamp(
    0px,
    calc(var(--_safe-vw) - (var(--_padding) * 2) - (var(--_breakout-size) * 2)),
    var(--_site-max)
  );
  --_site-column-size: max(
    0px,
    calc((var(--_site-width-effective) - (var(--grid-gap) * 3)) / 4)
  );
  --_site-track-size: var(--_site-column-size);
  --_content-sm-width: var(--_site-width-effective);
  --_content-md-width: var(--_site-width-effective);
  --_content-lg-width: var(--_site-width-effective);
  grid-template-columns: [full-width-start] minmax(var(--_padding), 1fr) [breakout-start] minmax(0, var(--_breakout-size)) [site-width-start lg-start md-start sm-start] var(--_site-column-size) var(--grid-gap) var(--_site-column-size) var(--grid-gap) var(--_site-column-size) var(--grid-gap) var(--_site-column-size) [sm-end md-end lg-end site-width-end] minmax(0, var(--_breakout-size)) [breakout-end] minmax(var(--_padding), 1fr) [full-width-end];
}
@media (min-width: 769px) {
  .section {
    --_site-column-size: max(
      0px,
      calc((var(--_site-width-effective) - (var(--grid-gap) * 11)) / 12)
    );
    --_content-sm-width: calc((var(--_site-column-size) * 6) + (var(--grid-gap) * 5));
    --_content-md-width: calc((var(--_site-column-size) * 8) + (var(--grid-gap) * 7));
    --_content-lg-width: calc((var(--_site-column-size) * 10) + (var(--grid-gap) * 9));
    grid-template-columns: [full-width-start] minmax(var(--_padding), 1fr) [breakout-start] minmax(0, var(--_breakout-size)) [site-width-start] var(--_site-column-size) var(--grid-gap) [lg-start] var(--_site-column-size) var(--grid-gap) [md-start] var(--_site-column-size) var(--grid-gap) [sm-start] repeat(5, var(--_site-column-size) var(--grid-gap)) var(--_site-column-size) [sm-end] var(--grid-gap) var(--_site-column-size) [md-end] var(--grid-gap) var(--_site-column-size) [lg-end] var(--grid-gap) var(--_site-column-size) [site-width-end] minmax(0, var(--_breakout-size)) [breakout-end] minmax(var(--_padding), 1fr) [full-width-end];
  }
}
.section > * {
  grid-column: site-width-start/site-width-end;
  min-width: 0;
  overflow: clip;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}
.bg-video.video-wrapper {
  aspect-ratio: unset;
}
.bg-video video,
.bg-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 0;
  border-radius: 8px;
}

.bg-video-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  display: none;
}

.video-disabled video,
.video-disabled iframe {
  display: none;
}

.bg-video.video-disabled + .bg-video-fallback {
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  backdrop-filter: blur(var(--overlay-blur, 0px));
  -webkit-backdrop-filter: blur(var(--overlay-blur, 0px));
}

.container {
  position: relative;
  z-index: 2;
  min-width: 0;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
}
.container.has-background {
  border-radius: 24px;
}

.container[data-container-padding-top=none] {
  padding-top: 0;
}
.container[data-container-padding-top=small] {
  padding-top: var(--spacing-container-small);
}
.container[data-container-padding-top=medium] {
  padding-top: var(--spacing-container-medium);
}
.container[data-container-padding-top=large] {
  padding-top: var(--spacing-container-large);
}
.container[data-container-padding-bottom=none] {
  padding-bottom: 0;
}
.container[data-container-padding-bottom=small] {
  padding-bottom: var(--spacing-container-small);
}
.container[data-container-padding-bottom=medium] {
  padding-bottom: var(--spacing-container-medium);
}
.container[data-container-padding-bottom=large] {
  padding-bottom: var(--spacing-container-large);
}
.container[data-container-padding-left=small] {
  padding-left: 16px;
}
.container[data-container-padding-left=medium] {
  padding-left: 24px;
}
.container[data-container-padding-left=large] {
  padding-left: 32px;
}
.container[data-container-padding-right=small] {
  padding-right: 16px;
}
.container[data-container-padding-right=medium] {
  padding-right: 24px;
}
.container[data-container-padding-right=large] {
  padding-right: 32px;
}

.container[data-container-margin-horizontal=small] {
  max-width: calc(var(--site-width) - var(--container-margin-horizontal-small) * 2);
  margin-inline: auto;
}
.container[data-container-margin-horizontal=medium] {
  max-width: calc(var(--site-width) - var(--container-margin-horizontal-medium) * 2);
  margin-inline: auto;
}
.container[data-container-margin-horizontal=large] {
  max-width: calc(var(--site-width) - var(--container-margin-horizontal-large) * 2);
  margin-inline: auto;
}

.section > .inner-grid,
.section > .split-screen {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.section > .full-width {
  grid-column: full-width-start/full-width-end;
}

.section > .breakout {
  grid-column: breakout-start/breakout-end;
}

.section > .site-width {
  grid-column: site-width-start/site-width-end;
}

.content-grid > .section {
  grid-column: full-width-start/full-width-end;
}

.section[data-layout-variant=full-width] > .container,
.section[data-layout-variant=full-width] > .inner-grid,
.section[data-layout-variant=full-width] > .split-screen,
.section[data-layout-variant=full-width] > .bg-image,
.section[data-layout-variant=full-width] > .bg-video,
.section[data-layout-variant=full-width] > .bg-video-fallback,
.section[data-layout-variant=full-width] > .overlay {
  grid-column: full-width-start/full-width-end;
}

.section[data-layout-variant=breakout] > .container,
.section[data-layout-variant=breakout] > .inner-grid,
.section[data-layout-variant=breakout] > .split-screen,
.section[data-layout-variant=breakout] > .bg-image,
.section[data-layout-variant=breakout] > .bg-video,
.section[data-layout-variant=breakout] > .bg-video-fallback,
.section[data-layout-variant=breakout] > .overlay {
  grid-column: breakout-start/breakout-end;
}

.section[data-layout-variant=site-width] > .container,
.section[data-layout-variant=site-width] > .inner-grid,
.section[data-layout-variant=site-width] > .split-screen {
  grid-column: site-width-start/site-width-end;
}

.section[data-layout-variant=lg] > .container,
.section[data-layout-variant=lg] > .inner-grid,
.section[data-layout-variant=lg] > .split-screen,
.section[data-layout-variant=lg] > .bg-image,
.section[data-layout-variant=lg] > .bg-video,
.section[data-layout-variant=lg] > .bg-video-fallback,
.section[data-layout-variant=lg] > .overlay {
  grid-column: lg-start/lg-end;
}

.section[data-layout-variant=md] > .container,
.section[data-layout-variant=md] > .inner-grid,
.section[data-layout-variant=md] > .split-screen,
.section[data-layout-variant=md] > .bg-image,
.section[data-layout-variant=md] > .bg-video,
.section[data-layout-variant=md] > .bg-video-fallback,
.section[data-layout-variant=md] > .overlay {
  grid-column: md-start/md-end;
}

.section[data-layout-variant=sm] > .container,
.section[data-layout-variant=sm] > .inner-grid,
.section[data-layout-variant=sm] > .split-screen,
.section[data-layout-variant=sm] > .bg-image,
.section[data-layout-variant=sm] > .bg-video,
.section[data-layout-variant=sm] > .bg-video-fallback,
.section[data-layout-variant=sm] > .overlay {
  grid-column: sm-start/sm-end;
}

.section[data-layout-variant=full-width] > .container:not(.has-background),
.section.full-width > .container:not(.has-background) {
  padding-inline: var(--padding-inline);
}

.section[data-layout-variant=breakout] > .container:not(.has-background),
.section.breakout > .container:not(.has-background) {
  padding-inline: var(--padding-inline);
}

.section[data-layout-variant=full-width] > .container.has-background,
.section.full-width > .container.has-background {
  border-radius: 0;
}

.section[data-layout-variant=full-width] > .container,
.section.full-width > .container,
.section[data-layout-variant=breakout] > .container,
.section.breakout > .container {
  max-width: none;
}

.heading-area.centered {
  text-align: center;
  width: 100%;
  max-width: 816px;
  justify-self: center;
}
.heading-area .pre-heading {
  margin-bottom: 8px;
}
.heading-area .sub-heading {
  margin-top: 24px;
}

.heading-text-effect__match {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  white-space: nowrap;
}

.heading-text-effect__icon {
  display: inline-grid;
  place-items: center;
  margin-inline-start: 0.18em;
  margin-inline-end: 0.18em;
  width: var(--icon-width, 0.66em);
  height: var(--icon-height, 1.05em);
}

.heading-text-effect__glyph {
  width: 100%;
  height: 100%;
}
.heading-text-effect__glyph::before {
  width: var(--icon-width, 100%);
  height: var(--icon-height, 100%);
}

.heading-before-content {
  width: 100%;
}

.heading-before-content:not([data-heading-layout]):not([data-col-start]) {
  grid-column-start: 1;
  grid-column-end: -1;
}

.content-area[data-vertical-align=top] {
  align-self: start;
}

.content-area[data-vertical-align=middle] {
  align-self: center;
}

.content-area[data-vertical-align=bottom] {
  align-self: end;
}

.content-area {
  display: grid;
  gap: 16px;
}
.content-area .container-icon-wrapper,
.content-area .featured-icon {
  margin-bottom: 24px;
}
.content-area .container-icon-wrapper[data-icon-position=after] {
  margin-top: 16px;
  margin-bottom: 0;
}

[data-color=brand-primary-400] {
  color: var(--color-brand-primary-400);
}

[data-color=brand-primary-200] {
  color: var(--color-brand-primary-200);
}

[data-color=brand-primary-50] {
  color: var(--color-brand-primary-50);
}

[data-color=brand-primary-600] {
  color: var(--color-brand-primary-600);
}

[data-color=brand-primary-700] {
  color: var(--color-brand-primary-700);
}

[data-color=grey-900] {
  color: var(--color-grey-900);
}

[data-color=grey-700] {
  color: var(--color-grey-700);
}

[data-color=grey-500] {
  color: var(--color-grey-500);
}

[data-color=grey-200] {
  color: var(--color-grey-200);
}

[data-color=grey-100] {
  color: var(--color-grey-100);
}

[data-color=grey-50] {
  color: var(--color-grey-50);
}

[data-color=white] {
  color: var(--color-brand-primary-50);
}

[data-color=accent-400] {
  color: var(--color-accent-400);
}

[data-color=accent-50] {
  color: var(--color-accent-50);
}

[data-color=red-700] {
  color: var(--color-red-700);
}

[data-alignment=left] {
  text-align: left;
}

[data-alignment=center] {
  text-align: center;
}

[data-alignment=right] {
  text-align: right;
}

.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.content {
  font-size: 16px;
  line-height: 24px;
}
.content p {
  margin-bottom: 16px;
}
.content p:last-child {
  margin-bottom: 0;
}
.content ul,
.content ol {
  margin-bottom: 16px;
  padding-left: 16px;
}
.content ul:last-child,
.content ol:last-child {
  margin-bottom: 0;
}
.content li {
  font-size: var(--font-size-h5-mobile);
  line-height: var(--line-height-h5-mobile);
  font-weight: var(--font-weight-light);
  margin-bottom: 20px;
}
@media (min-width: 769px) {
  .content li {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
  }
}
.content li:last-child {
  margin-bottom: 0;
}

.content[data-column-size=normal],
.content-area[data-column-size=normal] {
  width: 100%;
}

.content[data-column-size=small],
.content[data-column-size=small-center],
.content-area[data-column-size=small],
.content-area[data-column-size=small-center] {
  width: 100%;
}
@media (min-width: 1024px) {
  .content[data-column-size=small],
  .content[data-column-size=small-center],
  .content-area[data-column-size=small],
  .content-area[data-column-size=small-center] {
    max-width: 957px;
  }
}

@media (min-width: 1024px) {
  .content[data-column-size=small-center],
  .content-area[data-column-size=small-center] {
    justify-self: center;
  }
}

.content[data-content-layout=lg],
.content-area[data-content-layout=lg] {
  width: 100%;
}

.content[data-content-layout=md],
.content-area[data-content-layout=md] {
  width: 100%;
}
@media (min-width: 1024px) {
  .content[data-content-layout=md],
  .content-area[data-content-layout=md] {
    max-width: 957px;
    justify-self: center;
  }
}

.content[data-content-layout=sm],
.content-area[data-content-layout=sm] {
  width: 100%;
}
@media (min-width: 1024px) {
  .content[data-content-layout=sm],
  .content-area[data-content-layout=sm] {
    max-width: 640px;
    justify-self: center;
  }
}

.intro-section,
.intro-content {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 816px;
  justify-self: center;
  text-align: center;
}
.intro-section.column-small,
.intro-content.column-small {
  max-width: 675px;
}
.intro-section[data-intro-width=full],
.intro-content[data-intro-width=full] {
  max-width: none;
}
.intro-section[data-intro-width=lg],
.intro-content[data-intro-width=lg] {
  max-width: 957px;
}
.intro-section[data-intro-width=sm],
.intro-content[data-intro-width=sm] {
  max-width: 675px;
}
.intro-section[data-intro-align=left],
.intro-content[data-intro-align=left] {
  text-align: left;
  justify-self: start;
}
.intro-section[data-intro-align=right],
.intro-content[data-intro-align=right] {
  text-align: right;
  justify-self: end;
}
.intro-section[data-col-start],
.intro-content[data-col-start] {
  max-width: none;
  justify-self: auto;
}

.inner-grid > .intro-section:not([data-col-start]),
.inner-grid > .intro-content:not([data-col-start]) {
  grid-column-start: 1;
  grid-column-end: -1;
}

.card-grid[data-grid-columns="2"] {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 540px) {
  .card-grid[data-grid-columns="2"] {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (min-width: 768px) {
  .card-grid[data-grid-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .card-grid[data-grid-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
.card-grid[data-grid-columns="3"] {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 540px) {
  .card-grid[data-grid-columns="3"] {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (min-width: 768px) {
  .card-grid[data-grid-columns="3"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .card-grid[data-grid-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card-grid[data-grid-columns="4"] {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 540px) {
  .card-grid[data-grid-columns="4"] {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (min-width: 768px) {
  .card-grid[data-grid-columns="4"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .card-grid[data-grid-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
}
.card-grid[data-grid-columns="5"] {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 540px) {
  .card-grid[data-grid-columns="5"] {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (min-width: 768px) {
  .card-grid[data-grid-columns="5"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .card-grid[data-grid-columns="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
}
.card-grid[data-grid-columns="6"] {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 540px) {
  .card-grid[data-grid-columns="6"] {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (min-width: 768px) {
  .card-grid[data-grid-columns="6"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .card-grid[data-grid-columns="6"] {
    grid-template-columns: repeat(6, 1fr);
  }
}

.image-area.has-border img,
.has-border img {
  border: 8px solid var(--color-brand-primary-400);
  border-radius: 16px;
}

.mobile-image-top .mobile-image {
  order: -1;
}

.mobile-image-bottom .mobile-image {
  order: 1;
}

.mobile-image-left,
.mobile-image-right {
  display: flex;
  gap: 16px;
}
.mobile-image-left .mobile-image,
.mobile-image-right .mobile-image {
  flex: 0 0 auto;
}

.mobile-image-left .mobile-image {
  order: -1;
}

.mobile-image-right .mobile-image {
  order: 1;
}

@media (min-width: 768px) {
  .mobile-image-top .mobile-image,
  .mobile-image-bottom .mobile-image,
  .mobile-image-left .mobile-image,
  .mobile-image-right .mobile-image {
    order: 0;
  }
}
.column-small {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 768px) {
  .column-small {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
}

.column-medium {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 768px) {
  .column-medium {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

.column-large {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 768px) {
  .column-large {
    flex: 0 0 66.67%;
    max-width: 66.67%;
  }
}

.featured-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.featured-icon svg,
.featured-icon img {
  width: 24px;
  height: 24px;
  display: block;
}

.breadcrumbs[data-theme=light] {
  color: var(--color-brand-primary-50);
}
.breadcrumbs[data-theme=light] a {
  color: var(--color-brand-primary-50);
  opacity: 0.8;
  font-size: 14px;
}
.breadcrumbs[data-theme=light] a:hover {
  opacity: 1;
}
.breadcrumbs[data-theme=light] .separator {
  color: var(--color-brand-primary-50);
  opacity: 0.6;
}
.breadcrumbs[data-theme=dark] {
  color: var(--color-grey-900);
}
.breadcrumbs[data-theme=dark] a {
  color: var(--color-grey-700);
}
.breadcrumbs[data-theme=dark] a:hover {
  color: var(--color-brand-primary-400);
}
.breadcrumbs[data-theme=dark] .separator {
  color: var(--color-grey-500);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
  .bg-video {
    display: none;
  }
  .bg-video-fallback {
    display: block;
  }
}
.trustpilot-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.trustpilot-badge__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-grey-700);
  line-height: 1.2;
}

.trustpilot-badge__stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.trustpilot-badge__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: var(--color-trustpilot-grey);
}
.trustpilot-badge__star::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-color: var(--color-white);
  -webkit-mask-image: url("../images/icon-star-trustpilot.svg");
  mask-image: url("../images/icon-star-trustpilot.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.trustpilot-badge__star[data-filled=true] {
  background-color: var(--color-trustpilot-green);
}
.trustpilot-badge__star[data-filled=true]::before {
  background-color: var(--color-white);
}

.trustpilot-badge__star[data-filled=false] {
  background-color: var(--color-trustpilot-grey);
}
.trustpilot-badge__star[data-filled=false]::before {
  background-color: var(--color-white);
}

.trustpilot-badge__text {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-grey-700);
  line-height: 1.2;
}

.trustpilot-badge__logo {
  display: flex;
  align-items: center;
  gap: 4px;
}

.trustpilot-badge__logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.trustpilot-badge__logo-icon::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--color-trustpilot-green);
  -webkit-mask-image: url("../images/icon-star-trustpilot.svg");
  mask-image: url("../images/icon-star-trustpilot.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.trustpilot-badge__logo-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-grey-700);
  line-height: 1.2;
}

.trustpilot-badge[data-style=vertical-left] {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.trustpilot-badge[data-style=vertical-left] .trustpilot-badge__label {
  font-size: 16px;
}
.trustpilot-badge[data-style=vertical-left] .trustpilot-badge__text {
  font-size: 14px;
}
.trustpilot-badge[data-style=vertical-left] .trustpilot-badge__logo-text {
  font-size: 14px;
}

.trustpilot-badge[data-style=vertical-center] {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.trustpilot-badge[data-style=vertical-center] .trustpilot-badge__label {
  font-size: 16px;
}
.trustpilot-badge[data-style=vertical-center] .trustpilot-badge__text {
  font-size: 14px;
}
.trustpilot-badge[data-style=vertical-center] .trustpilot-badge__logo-text {
  font-size: 14px;
}

.trustpilot-badge[data-text-color=trustpilot-black] .trustpilot-badge__label,
.trustpilot-badge[data-text-color=trustpilot-black] .trustpilot-badge__text,
.trustpilot-badge[data-text-color=trustpilot-black] .trustpilot-badge__logo-text {
  color: var(--color-trustpilot-black);
}

.trustpilot-badge[data-text-color=white] .trustpilot-badge__label,
.trustpilot-badge[data-text-color=white] .trustpilot-badge__text,
.trustpilot-badge[data-text-color=white] .trustpilot-badge__logo-text {
  color: var(--color-brand-primary-50);
}

@media (min-width: 768px) {
  .trustpilot-badge {
    gap: 16px;
  }
  .trustpilot-badge .trustpilot-badge__label {
    font-size: 16px;
  }
  .trustpilot-badge .trustpilot-badge__text {
    font-size: 14px;
  }
  .trustpilot-badge .trustpilot-badge__logo-text {
    font-size: 14px;
  }
  .trustpilot-badge__star {
    width: 24px;
    height: 24px;
  }
  .trustpilot-badge__star::before {
    width: 16px;
    height: 16px;
  }
  .trustpilot-badge__logo-icon {
    width: 18px;
    height: 18px;
  }
  .trustpilot-badge__logo-icon::before {
    width: 18px;
    height: 18px;
  }
  .trustpilot-badge[data-style=vertical-left],
  .trustpilot-badge[data-style=vertical-center] {
    gap: 12px;
  }
  .trustpilot-badge[data-style=vertical-left] .trustpilot-badge__label,
  .trustpilot-badge[data-style=vertical-center] .trustpilot-badge__label {
    font-size: 18px;
  }
  .trustpilot-badge[data-style=vertical-left] .trustpilot-badge__text,
  .trustpilot-badge[data-style=vertical-center] .trustpilot-badge__text {
    font-size: 16px;
  }
  .trustpilot-badge[data-style=vertical-left] .trustpilot-badge__logo-text,
  .trustpilot-badge[data-style=vertical-center] .trustpilot-badge__logo-text {
    font-size: 16px;
  }
}
@media (min-width: 1024px) {
  .trustpilot-badge .trustpilot-badge__label {
    font-size: 18px;
  }
  .trustpilot-badge .trustpilot-badge__logo-text {
    font-size: 16px;
  }
  .trustpilot-badge__star {
    width: 28px;
    height: 28px;
  }
  .trustpilot-badge__star::before {
    width: 20px;
    height: 20px;
  }
  .trustpilot-badge__logo-icon {
    width: 20px;
    height: 20px;
  }
  .trustpilot-badge__logo-icon::before {
    width: 20px;
    height: 20px;
  }
  .trustpilot-badge[data-style=vertical-left] .trustpilot-badge__label,
  .trustpilot-badge[data-style=vertical-center] .trustpilot-badge__label {
    font-size: 20px;
  }
  .trustpilot-badge[data-style=vertical-left] .trustpilot-badge__logo-text,
  .trustpilot-badge[data-style=vertical-center] .trustpilot-badge__logo-text {
    font-size: 18px;
  }
}
section.section[data-section-bg-color=brand-primary-400] {
  background-color: var(--color-brand-primary-400);
}
section.section[data-section-bg-color=brand-primary-200] {
  background-color: var(--color-brand-primary-200);
}
section.section[data-section-bg-color=brand-primary-50] {
  background-color: var(--color-brand-primary-50);
}
section.section[data-section-bg-color=brand-primary-600] {
  background-color: var(--color-brand-primary-600);
}
section.section[data-section-bg-color=brand-primary-700] {
  background-color: var(--color-brand-primary-700);
}
section.section[data-section-bg-color=grey-900] {
  background-color: var(--color-grey-900);
}
section.section[data-section-bg-color=grey-700] {
  background-color: var(--color-grey-700);
}
section.section[data-section-bg-color=grey-500] {
  background-color: var(--color-grey-500);
}
section.section[data-section-bg-color=grey-200] {
  background-color: var(--color-grey-200);
}
section.section[data-section-bg-color=grey-100] {
  background-color: var(--color-grey-100);
}
section.section[data-section-bg-color=grey-50] {
  background-color: var(--color-grey-50);
}
section.section[data-section-bg-color=white] {
  background-color: var(--color-white);
}
section.section[data-section-bg-color=accent-400] {
  background-color: var(--color-accent-400);
}
section.section[data-section-bg-color=accent-50] {
  background-color: var(--color-accent-50);
}
section.section[data-section-bg-color=red-700] {
  background-color: var(--color-red-700);
}
section.section[data-section-bg-color=grey-50] .heading,
section.section[data-section-bg-color=grey-50] .sub-heading,
section.section[data-section-bg-color=grey-50] .pre-heading {
  color: var(--color-grey-900);
}
section.section[data-section-bg-color=grey-50] .content,
section.section[data-section-bg-color=grey-50] .content p,
section.section[data-section-bg-color=grey-50] .content li {
  color: var(--color-grey-900);
}
section.section .container[data-bg-color=brand-primary-400] {
  background-color: var(--color-brand-primary-400);
}
section.section .container[data-bg-color=brand-primary-200] {
  background-color: var(--color-brand-primary-200);
}
section.section .container[data-bg-color=brand-primary-50] {
  background-color: var(--color-brand-primary-50);
}
section.section .container[data-bg-color=brand-primary-600] {
  background-color: var(--color-brand-primary-600);
}
section.section .container[data-bg-color=brand-primary-700] {
  background-color: var(--color-brand-primary-700);
}
section.section .container[data-bg-color=grey-900] {
  background-color: var(--color-grey-900);
}
section.section .container[data-bg-color=grey-700] {
  background-color: var(--color-grey-700);
}
section.section .container[data-bg-color=grey-500] {
  background-color: var(--color-grey-500);
}
section.section .container[data-bg-color=grey-200] {
  background-color: var(--color-grey-200);
}
section.section .container[data-bg-color=grey-100] {
  background-color: var(--color-grey-100);
}
section.section .container[data-bg-color=grey-50] {
  background-color: var(--color-grey-50);
}
section.section .container[data-bg-color=white] {
  background-color: var(--color-white);
}
section.section .container[data-bg-color=accent-400] {
  background-color: var(--color-accent-400);
}
section.section .container[data-bg-color=accent-50] {
  background-color: var(--color-accent-50);
}
section.section .container[data-bg-color=red-700] {
  background-color: var(--color-red-700);
}
section.section .has-background[data-bg-color=brand-primary-400] {
  background: var(--color-brand-primary-400);
}
section.section .has-background[data-bg-color=brand-primary-200] {
  background: var(--color-brand-primary-200);
}
section.section .has-background[data-bg-color=brand-primary-50] {
  background: var(--color-brand-primary-50);
}
section.section .has-background[data-bg-color=brand-primary-600] {
  background: var(--color-brand-primary-600);
}
section.section .has-background[data-bg-color=brand-primary-700] {
  background: var(--color-brand-primary-700);
}
section.section .has-background[data-bg-color=grey-900] {
  background: var(--color-grey-900);
}
section.section .has-background[data-bg-color=grey-700] {
  background: var(--color-grey-700);
}
section.section .has-background[data-bg-color=grey-500] {
  background: var(--color-grey-500);
}
section.section .has-background[data-bg-color=grey-200] {
  background: var(--color-grey-200);
}
section.section .has-background[data-bg-color=grey-100] {
  background: var(--color-grey-100);
}
section.section .has-background[data-bg-color=grey-50] {
  background: var(--color-grey-50);
}
section.section .has-background[data-bg-color=white] {
  background: var(--color-white);
}
section.section .has-background[data-bg-color=accent-400] {
  background: var(--color-accent-400);
}
section.section .has-background[data-bg-color=accent-50] {
  background: var(--color-accent-50);
}
section.section .has-background[data-bg-color=red-700] {
  background: var(--color-red-700);
}
section.section .has-background[data-bg-color=trustpilot-green] {
  background: var(--color-trustpilot-green);
}
section.section .has-background[data-bg-color=trustpilot-grey] {
  background: var(--color-trustpilot-grey);
}
section.section .has-background[data-bg-color=trustpilot-black] {
  background: var(--color-trustpilot-black);
}
section.section .pre-heading[data-text-color=brand-primary-400],
section.section .heading[data-text-color=brand-primary-400],
section.section .sub-heading[data-text-color=brand-primary-400] {
  color: var(--color-brand-primary-400);
}
section.section .pre-heading[data-text-color=brand-primary-200],
section.section .heading[data-text-color=brand-primary-200],
section.section .sub-heading[data-text-color=brand-primary-200] {
  color: var(--color-brand-primary-200);
}
section.section .pre-heading[data-text-color=brand-primary-50],
section.section .heading[data-text-color=brand-primary-50],
section.section .sub-heading[data-text-color=brand-primary-50] {
  color: var(--color-brand-primary-50);
}
section.section .pre-heading[data-text-color=brand-primary-600],
section.section .heading[data-text-color=brand-primary-600],
section.section .sub-heading[data-text-color=brand-primary-600] {
  color: var(--color-brand-primary-600);
}
section.section .pre-heading[data-text-color=brand-primary-700],
section.section .heading[data-text-color=brand-primary-700],
section.section .sub-heading[data-text-color=brand-primary-700] {
  color: var(--color-brand-primary-700);
}
section.section .pre-heading[data-text-color=grey-900],
section.section .heading[data-text-color=grey-900],
section.section .sub-heading[data-text-color=grey-900] {
  color: var(--color-grey-900);
}
section.section .pre-heading[data-text-color=grey-700],
section.section .heading[data-text-color=grey-700],
section.section .sub-heading[data-text-color=grey-700] {
  color: var(--color-grey-700);
}
section.section .pre-heading[data-text-color=grey-500],
section.section .heading[data-text-color=grey-500],
section.section .sub-heading[data-text-color=grey-500] {
  color: var(--color-grey-500);
}
section.section .pre-heading[data-text-color=grey-200],
section.section .heading[data-text-color=grey-200],
section.section .sub-heading[data-text-color=grey-200] {
  color: var(--color-grey-200);
}
section.section .pre-heading[data-text-color=grey-100],
section.section .heading[data-text-color=grey-100],
section.section .sub-heading[data-text-color=grey-100] {
  color: var(--color-grey-100);
}
section.section .pre-heading[data-text-color=grey-50],
section.section .heading[data-text-color=grey-50],
section.section .sub-heading[data-text-color=grey-50] {
  color: var(--color-grey-50);
}
section.section .pre-heading[data-text-color=white],
section.section .heading[data-text-color=white],
section.section .sub-heading[data-text-color=white] {
  color: var(--color-brand-primary-50);
}
section.section .pre-heading[data-text-color=accent-400],
section.section .heading[data-text-color=accent-400],
section.section .sub-heading[data-text-color=accent-400] {
  color: var(--color-accent-400);
}
section.section .pre-heading[data-text-color=accent-50],
section.section .heading[data-text-color=accent-50],
section.section .sub-heading[data-text-color=accent-50] {
  color: var(--color-accent-50);
}
section.section .pre-heading[data-text-color=red-700],
section.section .heading[data-text-color=red-700],
section.section .sub-heading[data-text-color=red-700] {
  color: var(--color-red-700);
}
section.section .pre-heading[data-text-color=trustpilot-green],
section.section .heading[data-text-color=trustpilot-green],
section.section .sub-heading[data-text-color=trustpilot-green] {
  color: var(--color-trustpilot-green);
}
section.section .pre-heading[data-text-color=trustpilot-grey],
section.section .heading[data-text-color=trustpilot-grey],
section.section .sub-heading[data-text-color=trustpilot-grey] {
  color: var(--color-trustpilot-grey);
}
section.section .pre-heading[data-text-color=trustpilot-black],
section.section .heading[data-text-color=trustpilot-black],
section.section .sub-heading[data-text-color=trustpilot-black] {
  color: var(--color-trustpilot-black);
}
section.section .heading-text-effect__icon[data-text-color=brand-primary-400] {
  color: var(--color-brand-primary-400);
}
section.section .heading-text-effect__icon[data-text-color=brand-primary-200] {
  color: var(--color-brand-primary-200);
}
section.section .heading-text-effect__icon[data-text-color=brand-primary-50] {
  color: var(--color-brand-primary-50);
}
section.section .heading-text-effect__icon[data-text-color=brand-primary-600] {
  color: var(--color-brand-primary-600);
}
section.section .heading-text-effect__icon[data-text-color=brand-primary-700] {
  color: var(--color-brand-primary-700);
}
section.section .heading-text-effect__icon[data-text-color=grey-900] {
  color: var(--color-grey-900);
}
section.section .heading-text-effect__icon[data-text-color=grey-700] {
  color: var(--color-grey-700);
}
section.section .heading-text-effect__icon[data-text-color=grey-500] {
  color: var(--color-grey-500);
}
section.section .heading-text-effect__icon[data-text-color=grey-200] {
  color: var(--color-grey-200);
}
section.section .heading-text-effect__icon[data-text-color=grey-100] {
  color: var(--color-grey-100);
}
section.section .heading-text-effect__icon[data-text-color=grey-50] {
  color: var(--color-grey-50);
}
section.section .heading-text-effect__icon[data-text-color=white] {
  color: var(--color-brand-primary-50);
}
section.section .heading-text-effect__icon[data-text-color=accent-400] {
  color: var(--color-accent-400);
}
section.section .heading-text-effect__icon[data-text-color=accent-50] {
  color: var(--color-accent-50);
}
section.section .heading-text-effect__icon[data-text-color=red-700] {
  color: var(--color-red-700);
}
section.section .heading-text-effect__icon[data-text-color=trustpilot-green] {
  color: var(--color-trustpilot-green);
}
section.section .heading-text-effect__icon[data-text-color=trustpilot-grey] {
  color: var(--color-trustpilot-grey);
}
section.section .heading-text-effect__icon[data-text-color=trustpilot-black] {
  color: var(--color-trustpilot-black);
}
section.section .heading-text-effect__icon[data-bg-color=brand-primary-400] {
  background-color: var(--color-brand-primary-400);
}
section.section .heading-text-effect__icon[data-bg-color=brand-primary-200] {
  background-color: var(--color-brand-primary-200);
}
section.section .heading-text-effect__icon[data-bg-color=brand-primary-50] {
  background-color: var(--color-brand-primary-50);
}
section.section .heading-text-effect__icon[data-bg-color=brand-primary-600] {
  background-color: var(--color-brand-primary-600);
}
section.section .heading-text-effect__icon[data-bg-color=brand-primary-700] {
  background-color: var(--color-brand-primary-700);
}
section.section .heading-text-effect__icon[data-bg-color=grey-900] {
  background-color: var(--color-grey-900);
}
section.section .heading-text-effect__icon[data-bg-color=grey-700] {
  background-color: var(--color-grey-700);
}
section.section .heading-text-effect__icon[data-bg-color=grey-500] {
  background-color: var(--color-grey-500);
}
section.section .heading-text-effect__icon[data-bg-color=grey-200] {
  background-color: var(--color-grey-200);
}
section.section .heading-text-effect__icon[data-bg-color=grey-100] {
  background-color: var(--color-grey-100);
}
section.section .heading-text-effect__icon[data-bg-color=grey-50] {
  background-color: var(--color-grey-50);
}
section.section .heading-text-effect__icon[data-bg-color=white] {
  background-color: var(--color-white);
}
section.section .heading-text-effect__icon[data-bg-color=accent-400] {
  background-color: var(--color-accent-400);
}
section.section .heading-text-effect__icon[data-bg-color=accent-50] {
  background-color: var(--color-accent-50);
}
section.section .heading-text-effect__icon[data-bg-color=red-700] {
  background-color: var(--color-red-700);
}
section.section .heading-text-effect__icon[data-bg-color=trustpilot-green] {
  background-color: var(--color-trustpilot-green);
}
section.section .heading-text-effect__icon[data-bg-color=trustpilot-grey] {
  background-color: var(--color-trustpilot-grey);
}
section.section .heading-text-effect__icon[data-bg-color=trustpilot-black] {
  background-color: var(--color-trustpilot-black);
}
section.section .content[data-text-color=brand-primary-400] {
  color: var(--color-brand-primary-400);
}
section.section .content[data-text-color=brand-primary-200] {
  color: var(--color-brand-primary-200);
}
section.section .content[data-text-color=brand-primary-50] {
  color: var(--color-brand-primary-50);
}
section.section .content[data-text-color=brand-primary-600] {
  color: var(--color-brand-primary-600);
}
section.section .content[data-text-color=brand-primary-700] {
  color: var(--color-brand-primary-700);
}
section.section .content[data-text-color=grey-900] {
  color: var(--color-grey-900);
}
section.section .content[data-text-color=grey-700] {
  color: var(--color-grey-700);
}
section.section .content[data-text-color=grey-500] {
  color: var(--color-grey-500);
}
section.section .content[data-text-color=grey-200] {
  color: var(--color-grey-200);
}
section.section .content[data-text-color=grey-100] {
  color: var(--color-grey-100);
}
section.section .content[data-text-color=grey-50] {
  color: var(--color-grey-50);
}
section.section .content[data-text-color=white] {
  color: var(--color-brand-primary-50);
}
section.section .content[data-text-color=accent-400] {
  color: var(--color-accent-400);
}
section.section .content[data-text-color=accent-50] {
  color: var(--color-accent-50);
}
section.section .content[data-text-color=red-700] {
  color: var(--color-red-700);
}
section.section .content[data-text-color=trustpilot-green] {
  color: var(--color-trustpilot-green);
}
section.section .content[data-text-color=trustpilot-grey] {
  color: var(--color-trustpilot-grey);
}
section.section .content[data-text-color=trustpilot-black] {
  color: var(--color-trustpilot-black);
}
section.section .btn[data-bg-color=brand-primary-400] {
  background-color: var(--color-brand-primary-400);
}
section.section .btn[data-bg-color=brand-primary-200] {
  background-color: var(--color-brand-primary-200);
}
section.section .btn[data-bg-color=brand-primary-50] {
  background-color: var(--color-brand-primary-50);
}
section.section .btn[data-bg-color=brand-primary-600] {
  background-color: var(--color-brand-primary-600);
}
section.section .btn[data-bg-color=brand-primary-700] {
  background-color: var(--color-brand-primary-700);
}
section.section .btn[data-bg-color=grey-900] {
  background-color: var(--color-grey-900);
}
section.section .btn[data-bg-color=grey-700] {
  background-color: var(--color-grey-700);
}
section.section .btn[data-bg-color=grey-500] {
  background-color: var(--color-grey-500);
}
section.section .btn[data-bg-color=grey-200] {
  background-color: var(--color-grey-200);
}
section.section .btn[data-bg-color=grey-100] {
  background-color: var(--color-grey-100);
}
section.section .btn[data-bg-color=grey-50] {
  background-color: var(--color-grey-50);
}
section.section .btn[data-bg-color=white] {
  background-color: var(--color-white);
}
section.section .btn[data-bg-color=accent-400] {
  background-color: var(--color-accent-400);
}
section.section .btn[data-bg-color=accent-50] {
  background-color: var(--color-accent-50);
}
section.section .btn[data-bg-color=red-700] {
  background-color: var(--color-red-700);
}
section.section .btn[data-bg-color=trustpilot-green] {
  background-color: var(--color-trustpilot-green);
}
section.section .btn[data-bg-color=trustpilot-grey] {
  background-color: var(--color-trustpilot-grey);
}
section.section .btn[data-bg-color=trustpilot-black] {
  background-color: var(--color-trustpilot-black);
}
section.section .btn[data-text-color=brand-primary-400] {
  color: var(--color-brand-primary-400);
}
section.section .btn[data-text-color=brand-primary-200] {
  color: var(--color-brand-primary-200);
}
section.section .btn[data-text-color=brand-primary-50] {
  color: var(--color-brand-primary-50);
}
section.section .btn[data-text-color=brand-primary-600] {
  color: var(--color-brand-primary-600);
}
section.section .btn[data-text-color=brand-primary-700] {
  color: var(--color-brand-primary-700);
}
section.section .btn[data-text-color=grey-900] {
  color: var(--color-grey-900);
}
section.section .btn[data-text-color=grey-700] {
  color: var(--color-grey-700);
}
section.section .btn[data-text-color=grey-500] {
  color: var(--color-grey-500);
}
section.section .btn[data-text-color=grey-200] {
  color: var(--color-grey-200);
}
section.section .btn[data-text-color=grey-100] {
  color: var(--color-grey-100);
}
section.section .btn[data-text-color=grey-50] {
  color: var(--color-grey-50);
}
section.section .btn[data-text-color=white] {
  color: var(--color-brand-primary-50);
}
section.section .btn[data-text-color=accent-400] {
  color: var(--color-accent-400);
}
section.section .btn[data-text-color=accent-50] {
  color: var(--color-accent-50);
}
section.section .btn[data-text-color=red-700] {
  color: var(--color-red-700);
}
section.section .btn[data-text-color=trustpilot-green] {
  color: var(--color-trustpilot-green);
}
section.section .btn[data-text-color=trustpilot-grey] {
  color: var(--color-trustpilot-grey);
}
section.section .btn[data-text-color=trustpilot-black] {
  color: var(--color-trustpilot-black);
}
section.section .btn[data-border-color=brand-primary-400] {
  border-color: var(--color-brand-primary-400);
}
section.section .btn[data-border-color=brand-primary-200] {
  border-color: var(--color-brand-primary-200);
}
section.section .btn[data-border-color=brand-primary-50] {
  border-color: var(--color-brand-primary-50);
}
section.section .btn[data-border-color=brand-primary-600] {
  border-color: var(--color-brand-primary-600);
}
section.section .btn[data-border-color=brand-primary-700] {
  border-color: var(--color-brand-primary-700);
}
section.section .btn[data-border-color=grey-900] {
  border-color: var(--color-grey-900);
}
section.section .btn[data-border-color=grey-700] {
  border-color: var(--color-grey-700);
}
section.section .btn[data-border-color=grey-500] {
  border-color: var(--color-grey-500);
}
section.section .btn[data-border-color=grey-200] {
  border-color: var(--color-grey-200);
}
section.section .btn[data-border-color=grey-100] {
  border-color: var(--color-grey-100);
}
section.section .btn[data-border-color=grey-50] {
  border-color: var(--color-grey-50);
}
section.section .btn[data-border-color=white] {
  border-color: var(--color-white);
}
section.section .btn[data-border-color=accent-400] {
  border-color: var(--color-accent-400);
}
section.section .btn[data-border-color=accent-50] {
  border-color: var(--color-accent-50);
}
section.section .btn[data-border-color=red-700] {
  border-color: var(--color-red-700);
}
section.section .btn[data-border-color=trustpilot-green] {
  border-color: var(--color-trustpilot-green);
}
section.section .btn[data-border-color=trustpilot-grey] {
  border-color: var(--color-trustpilot-grey);
}
section.section .btn[data-border-color=trustpilot-black] {
  border-color: var(--color-trustpilot-black);
}
section.section .featured-icon[data-bg-color=brand-primary-400] {
  background-color: var(--color-brand-primary-400);
  color: var(--color-brand-primary-50);
}
section.section .featured-icon[data-bg-color=brand-primary-200] {
  background-color: var(--color-brand-primary-200);
  color: var(--color-brand-primary-700);
}
section.section .featured-icon[data-bg-color=brand-primary-600] {
  background-color: var(--color-brand-primary-600);
  color: var(--color-brand-primary-50);
}
section.section .featured-icon[data-bg-color=brand-primary-700] {
  background-color: var(--color-brand-primary-700);
  color: var(--color-brand-primary-50);
}
section.section .featured-icon[data-bg-color=grey-900] {
  background-color: var(--color-grey-900);
  color: var(--color-brand-primary-50);
}
section.section .featured-icon[data-bg-color=grey-700] {
  background-color: var(--color-grey-700);
  color: var(--color-brand-primary-50);
}
section.section .featured-icon[data-bg-color=grey-500] {
  background-color: var(--color-grey-500);
  color: var(--color-brand-primary-50);
}
section.section .featured-icon[data-bg-color=grey-200] {
  background-color: var(--color-grey-200);
  color: var(--color-grey-900);
}
section.section .featured-icon[data-bg-color=grey-100] {
  background-color: var(--color-grey-100);
  color: var(--color-grey-900);
}
section.section .featured-icon[data-bg-color=grey-50] {
  background-color: var(--color-grey-50);
  color: var(--color-grey-900);
}
section.section .featured-icon[data-bg-color=white] {
  background-color: var(--color-white);
  color: var(--color-brand-primary-400);
  border: 1px solid var(--color-grey-200);
}
section.section .featured-icon[data-bg-color=accent-400] {
  background-color: var(--color-accent-400);
  color: var(--color-brand-primary-50);
}
section.section .featured-icon[data-bg-color=accent-50] {
  background-color: var(--color-accent-50);
  color: var(--color-grey-900);
}
section.section .featured-icon[data-bg-color=red-700] {
  background-color: var(--color-red-700);
  color: var(--color-brand-primary-50);
}

section[data-margin-top=none] {
  margin-top: 0;
}
section[data-margin-top=small] {
  margin-top: var(--spacing-section-small);
}
section[data-margin-top=medium] {
  margin-top: var(--spacing-section-medium);
}
section[data-margin-top=large] {
  margin-top: var(--spacing-section-large);
}
section[data-margin-bottom=none] {
  margin-bottom: 0;
}
section[data-margin-bottom=small] {
  margin-bottom: var(--spacing-section-small);
}
section[data-margin-bottom=medium] {
  margin-bottom: var(--spacing-section-medium);
}
section[data-margin-bottom=large] {
  margin-bottom: var(--spacing-section-large);
}
section[data-padding-top=none] {
  padding-top: 0;
}
section[data-padding-top=small] {
  padding-top: var(--spacing-section-small);
}
section[data-padding-top=medium] {
  padding-top: var(--spacing-section-medium);
}
section[data-padding-top=large] {
  padding-top: var(--spacing-section-large);
}
section[data-padding-bottom=none] {
  padding-bottom: 0;
}
section[data-padding-bottom=small] {
  padding-bottom: var(--spacing-section-small);
}
section[data-padding-bottom=medium] {
  padding-bottom: var(--spacing-section-medium);
}
section[data-padding-bottom=large] {
  padding-bottom: var(--spacing-section-large);
}

section[data-border-size=sm] {
  --section-border-size: var(--border-weight-sm);
}
section[data-border-size=md] {
  --section-border-size: var(--border-weight-md);
}
section[data-border-size=lg] {
  --section-border-size: var(--border-weight-lg);
}
section[data-border-style=solid] {
  --section-border-style: solid;
}
section[data-border-style=dashed] {
  --section-border-style: dashed;
}
section[data-border-style=dotted] {
  --section-border-style: dotted;
}
section[data-border-tone=brand-primary-400] {
  --section-border-tone: var(--color-brand-primary-400);
}
section[data-border-tone=brand-primary-200] {
  --section-border-tone: var(--color-brand-primary-200);
}
section[data-border-tone=brand-primary-50] {
  --section-border-tone: var(--color-brand-primary-50);
}
section[data-border-tone=brand-primary-600] {
  --section-border-tone: var(--color-brand-primary-600);
}
section[data-border-tone=brand-primary-700] {
  --section-border-tone: var(--color-brand-primary-700);
}
section[data-border-tone=grey-900] {
  --section-border-tone: var(--color-grey-900);
}
section[data-border-tone=grey-700] {
  --section-border-tone: var(--color-grey-700);
}
section[data-border-tone=grey-500] {
  --section-border-tone: var(--color-grey-500);
}
section[data-border-tone=grey-200] {
  --section-border-tone: var(--color-grey-200);
}
section[data-border-tone=grey-100] {
  --section-border-tone: var(--color-grey-100);
}
section[data-border-tone=grey-50] {
  --section-border-tone: var(--color-grey-50);
}
section[data-border-tone=white] {
  --section-border-tone: var(--color-white);
}
section[data-border-tone=accent-400] {
  --section-border-tone: var(--color-accent-400);
}
section[data-border-tone=accent-50] {
  --section-border-tone: var(--color-accent-50);
}
section[data-border-tone=red-700] {
  --section-border-tone: var(--color-red-700);
}
section[data-border-position=top], section[data-border-position=both] {
  border-top: var(--section-border-size) var(--section-border-style) var(--section-border-tone);
}
section[data-border-position=bottom], section[data-border-position=both] {
  border-bottom: var(--section-border-size) var(--section-border-style) var(--section-border-tone);
}
/*# sourceMappingURL=blocks-global.css.map */