@charset "UTF-8";

/*
 * Website Theme 1 design-system bridge.
 *
 * The purchased Block theme already consumes --theme-* and --bs-* custom
 * properties. This bridge is the only layer that should point that contract at
 * the Design System Builder output. Keep hardcoded colors out of this file
 * unless they are vendor/social-network colors that should not be rebranded.
 *
 * Expected load order for vendored pages:
 *   1. Purchased theme CSS, ending with ThemeTokens.css
 *   2. /css/brand.css
 *   3. /css/overrides.css
 *   4. this bridge
 */

:root,
[data-bs-theme="light"] {
  --theme-font-sans: var(--brand-font-body, var(--bs-body-font-family, system-ui, sans-serif));

  --theme-color-primary: var(--brand-primary-color, var(--bs-primary));
  --theme-color-primary-rgb: var(--bs-primary-rgb, 86, 55, 255);
  --theme-color-primary-hover: var(--color-primary-600, var(--brand-primary-text-emphasis, var(--bs-primary)));
  --theme-color-secondary: var(--brand-secondary-color, var(--bs-secondary));
  --theme-color-secondary-rgb: var(--bs-secondary-rgb, 0, 155, 255);
  --theme-color-success: var(--brand-success-color, var(--bs-success));
  --theme-color-success-rgb: var(--bs-success-rgb, 16, 203, 91);
  --theme-color-info: var(--brand-info-color, var(--bs-info));
  --theme-color-info-rgb: var(--bs-info-rgb, 0, 191, 255);
  --theme-color-warning: var(--brand-warning-color, var(--bs-warning));
  --theme-color-warning-rgb: var(--bs-warning-rgb, 255, 176, 0);
  --theme-color-danger: var(--brand-danger-color, var(--bs-danger));
  --theme-color-danger-rgb: var(--bs-danger-rgb, 240, 45, 79);
  --theme-color-light: var(--brand-light-color, var(--neutral-100));
  --theme-color-light-rgb: var(--bs-light-rgb, 238, 241, 242);
  --theme-color-dark: var(--brand-dark-color, var(--neutral-900));
  --theme-color-dark-rgb: var(--bs-dark-rgb, 11, 13, 15);
  --theme-color-black: var(--neutral-900, #0b0d0f);
  --theme-color-black-rgb: var(--bs-dark-rgb, 11, 13, 15);
  --theme-color-white: var(--color-surface, #fff);
  --theme-color-white-rgb: var(--bs-body-bg-rgb, 255, 255, 255);

  --theme-gray-100: var(--neutral-100);
  --theme-gray-200: var(--neutral-200);
  --theme-gray-300: var(--neutral-300);
  --theme-gray-400: var(--neutral-400);
  --theme-gray-500: var(--neutral-500);
  --theme-gray-600: var(--neutral-600);
  --theme-gray-700: var(--neutral-700);
  --theme-gray-800: var(--neutral-800);
  --theme-gray-900: var(--neutral-900);

  --theme-body-color: var(--brand-text-color, var(--bs-body-color));
  --theme-body-color-rgb: var(--bs-body-color-rgb, 11, 13, 15);
  --theme-body-bg: var(--brand-surface-color, var(--bs-body-bg));
  --theme-body-bg-rgb: var(--bs-body-bg-rgb, 255, 255, 255);
  --theme-heading-color: var(--brand-heading-color, var(--bs-heading-color));
  --theme-border-color: var(--brand-border-color, var(--bs-border-color));

  --theme-border-radius-sm: var(--bs-border-radius-sm, 0.25rem);
  --theme-border-radius: var(--bs-border-radius, 0.375rem);
  --theme-border-radius-lg: var(--bs-border-radius-lg, 0.5rem);
  --theme-border-radius-xl: var(--bs-border-radius-xl, 1rem);
  --theme-border-radius-xxl: var(--bs-border-radius-xxl, 2rem);

  --theme-selection-color: var(--brand-primary-text-emphasis, var(--bs-primary-text-emphasis));
  --theme-primary-gradient-start: var(--color-primary-400, var(--brand-primary-color));
  --theme-primary-gradient-mid: var(--color-primary-500, var(--brand-primary-color));
  --theme-primary-gradient-end: var(--color-primary-600, var(--brand-primary-text-emphasis));
  --theme-primary-blend-gradient-start: color-mix(in srgb, var(--brand-primary-color) 42%, transparent);
  --theme-primary-blend-gradient-end: color-mix(in srgb, var(--brand-info-color, var(--brand-primary-color)) 16%, transparent);
  --theme-focus-border-color: var(--brand-focus-color, var(--bs-focus-ring-color));
  --theme-control-active-bg: var(--brand-primary-bg-subtle, var(--bs-primary-bg-subtle));
  --theme-focus-ring-color: var(--bs-focus-ring-color, rgba(var(--theme-color-primary-rgb), 0.25));

  --theme-color-primary-text-emphasis: var(--brand-primary-text-emphasis, var(--bs-primary-text-emphasis));
  --theme-color-secondary-text-emphasis: var(--brand-secondary-text-emphasis, var(--bs-secondary-text-emphasis));
  --theme-color-success-text-emphasis: var(--brand-success-text-emphasis, var(--bs-success-text-emphasis));
  --theme-color-info-text-emphasis: var(--brand-info-text-emphasis, var(--bs-info-text-emphasis));
  --theme-color-warning-text-emphasis: var(--brand-warning-text-emphasis, var(--bs-warning-text-emphasis));
  --theme-color-danger-text-emphasis: var(--brand-danger-text-emphasis, var(--bs-danger-text-emphasis));
  --theme-color-light-text-emphasis: var(--brand-light-text-emphasis, var(--bs-light-text-emphasis));
  --theme-color-dark-text-emphasis: var(--brand-dark-text-emphasis, var(--bs-dark-text-emphasis));

  --theme-color-primary-bg-subtle: var(--brand-primary-bg-subtle, var(--bs-primary-bg-subtle));
  --theme-color-secondary-bg-subtle: var(--brand-secondary-bg-subtle, var(--bs-secondary-bg-subtle));
  --theme-color-success-bg-subtle: var(--brand-success-bg-subtle, var(--bs-success-bg-subtle));
  --theme-color-info-bg-subtle: var(--brand-info-bg-subtle, var(--bs-info-bg-subtle));
  --theme-color-warning-bg-subtle: var(--brand-warning-bg-subtle, var(--bs-warning-bg-subtle));
  --theme-color-danger-bg-subtle: var(--brand-danger-bg-subtle, var(--bs-danger-bg-subtle));
  --theme-color-light-bg-subtle: var(--brand-light-bg-subtle, var(--bs-light-bg-subtle));
  --theme-color-dark-bg-subtle: var(--brand-dark-bg-subtle, var(--bs-dark-bg-subtle));

  --theme-color-primary-border-subtle: var(--brand-primary-border-subtle, var(--bs-primary-border-subtle));
  --theme-color-secondary-border-subtle: var(--brand-secondary-border-subtle, var(--bs-secondary-border-subtle));
  --theme-color-success-border-subtle: var(--brand-success-border-subtle, var(--bs-success-border-subtle));
  --theme-color-info-border-subtle: var(--brand-info-border-subtle, var(--bs-info-border-subtle));
  --theme-color-warning-border-subtle: var(--brand-warning-border-subtle, var(--bs-warning-border-subtle));
  --theme-color-danger-border-subtle: var(--brand-danger-border-subtle, var(--bs-danger-border-subtle));
  --theme-color-light-border-subtle: var(--brand-light-border-subtle, var(--bs-light-border-subtle));
  --theme-color-dark-border-subtle: var(--brand-dark-border-subtle, var(--bs-dark-border-subtle));

  --theme-secondary-color: var(--brand-muted-color, var(--bs-secondary-color));
  --theme-secondary-bg: var(--brand-surface-alt-color, var(--bs-secondary-bg));
  --theme-secondary-bg-rgb: var(--bs-secondary-bg-rgb, 248, 250, 250);
  --theme-tertiary-color: var(--brand-subtle-color, var(--bs-tertiary-color));
  --theme-tertiary-bg: var(--brand-container-bg-color, var(--bs-tertiary-bg));
  --theme-tertiary-bg-rgb: var(--bs-tertiary-bg-rgb, 238, 241, 242);
  --theme-link-hover-color-rgb: var(--bs-link-hover-color-rgb, var(--theme-color-primary-rgb));
  --theme-code-color: var(--bs-code-color, var(--brand-primary-color));
  --theme-highlight-bg: var(--bs-highlight-bg, var(--brand-warning-bg-subtle));
  --theme-form-valid-color: var(--bs-form-valid-color, var(--brand-success-color));
  --theme-form-invalid-color: var(--bs-form-invalid-color, var(--brand-danger-color));

  --theme-shadow-rgb: var(--bs-dark-rgb, 11, 13, 15);
  --theme-lift-shadow-rgb: var(--bs-dark-rgb, 11, 13, 15);
  --theme-button-shadow-rgb: var(--bs-primary-rgb, 86, 55, 255);
  --theme-scroll-top-ring-rgb: var(--bs-primary-rgb, 86, 55, 255);

  --theme-btn-primary-hover-bg: var(--color-primary-600, var(--brand-primary-color));
  --theme-btn-primary-active-border: var(--color-primary-700, var(--brand-primary-text-emphasis));
  --theme-btn-primary-focus-shadow-rgb: var(--bs-primary-rgb, 86, 55, 255);
  --theme-btn-secondary-hover-bg: var(--color-secondary-600, var(--brand-secondary-color));
  --theme-btn-secondary-hover-border: var(--color-secondary-700, var(--brand-secondary-text-emphasis));
  --theme-btn-secondary-active-bg: var(--color-secondary-700, var(--brand-secondary-text-emphasis));
  --theme-btn-secondary-focus-shadow-rgb: var(--bs-secondary-rgb, 0, 155, 255);
  --theme-btn-success-hover-bg: var(--color-success-600, var(--brand-success-color));
  --theme-btn-success-hover-border: var(--color-success-700, var(--brand-success-text-emphasis));
  --theme-btn-success-active-border: var(--color-success-800, var(--brand-success-text-emphasis));
  --theme-btn-success-focus-shadow-rgb: var(--bs-success-rgb, 16, 203, 91);
  --theme-btn-info-hover-bg: var(--color-info-600, var(--brand-info-color));
  --theme-btn-info-hover-border: var(--color-info-700, var(--brand-info-text-emphasis));
  --theme-btn-info-active-bg: var(--color-info-700, var(--brand-info-text-emphasis));
  --theme-btn-info-focus-shadow-rgb: var(--bs-info-rgb, 0, 191, 255);
  --theme-btn-warning-hover-bg: var(--color-warning-600, var(--brand-warning-color));
  --theme-btn-warning-hover-border: var(--color-warning-700, var(--brand-warning-text-emphasis));
  --theme-btn-warning-active-bg: var(--color-warning-700, var(--brand-warning-text-emphasis));
  --theme-btn-warning-focus-shadow-rgb: var(--bs-warning-rgb, 255, 176, 0);
  --theme-btn-danger-hover-bg: var(--color-danger-600, var(--brand-danger-color));
  --theme-btn-danger-hover-border: var(--color-danger-700, var(--brand-danger-text-emphasis));
  --theme-btn-danger-active-border: var(--color-danger-800, var(--brand-danger-text-emphasis));
  --theme-btn-danger-focus-shadow-rgb: var(--bs-danger-rgb, 240, 45, 79);

  --theme-btn-light-hover-bg: var(--neutral-200, var(--bs-light-bg-subtle));
  --theme-btn-light-hover-border: var(--neutral-300, var(--bs-light-border-subtle));
  --theme-btn-light-active-border: var(--neutral-400, var(--bs-border-color));
  --theme-btn-light-focus-shadow-rgb: var(--bs-light-rgb, 248, 250, 250);
  --theme-btn-dark-hover-bg: var(--neutral-800, var(--bs-dark-bg-subtle));
  --theme-btn-dark-hover-border: var(--neutral-800, var(--brand-dark-border-subtle, var(--bs-dark-border-subtle)));
  --theme-btn-dark-active-bg: var(--neutral-700, var(--bs-dark));
  --theme-btn-dark-focus-shadow-rgb: var(--bs-dark-rgb, 11, 13, 15);
  --theme-btn-dark-surface-hover-bg: var(--brand-container-bg-color, var(--bs-tertiary-bg));
  --theme-btn-dark-surface-hover-border: var(--brand-border-color, var(--bs-border-color));
  --theme-btn-dark-surface-active-border: var(--brand-muted-color, var(--bs-secondary-color));
  --theme-btn-dark-surface-focus-shadow-rgb: var(--bs-body-color-rgb, 11, 13, 15);

  --theme-color-indigo: var(--color-primary-700, var(--brand-primary-text-emphasis));
  --theme-color-purple: var(--color-primary-600, var(--brand-primary-color));
  --theme-color-pink: var(--brand-danger-color, var(--bs-danger));
  --theme-color-orange: var(--brand-warning-color, var(--bs-warning));
  --theme-color-teal: var(--brand-success-color, var(--bs-success));

  --theme-overlay-white-rgb: var(--bs-emphasis-color-rgb, 255, 255, 255);
  --theme-overlay-black-rgb: var(--bs-dark-rgb, 11, 13, 15);
  --theme-navbar-dark-color: rgba(var(--theme-overlay-white-rgb), 0.68);
  --theme-navbar-dark-hover-color: rgba(var(--theme-overlay-white-rgb), 0.9);
  --theme-navbar-dark-toggler-border-color: rgba(var(--theme-overlay-white-rgb), 0.18);
  --theme-plyr-menu-bg: rgba(var(--theme-overlay-white-rgb), 0.9);

  --theme-space-unit: var(--bs-spacer, 1rem);
  --theme-space-0: 0;
  --theme-space-1: calc(var(--theme-space-unit) * 0.25);
  --theme-space-2: calc(var(--theme-space-unit) * 0.5);
  --theme-space-3: var(--theme-space-unit);
  --theme-space-4: calc(var(--theme-space-unit) * 1.5);
  --theme-space-5: calc(var(--theme-space-unit) * 2);
  --theme-space-6: calc(var(--theme-space-unit) * 2.5);
  --theme-space-7: calc(var(--theme-space-unit) * 3);
  --theme-space-8: calc(var(--theme-space-unit) * 4);
  --theme-space-9: calc(var(--theme-space-unit) * 5);
  --theme-space-10: calc(var(--theme-space-unit) * 6);

  --theme-table-primary-border-color: var(--brand-primary-border-subtle, var(--bs-primary-border-subtle));
  --theme-table-primary-striped-bg: var(--brand-primary-bg-subtle, var(--bs-primary-bg-subtle));
  --theme-table-primary-hover-bg: color-mix(in srgb, var(--brand-primary-bg-subtle, var(--bs-primary-bg-subtle)) 86%, var(--brand-primary-color, var(--bs-primary)));
  --theme-table-secondary-border-color: var(--brand-secondary-border-subtle, var(--bs-secondary-border-subtle));
  --theme-table-secondary-striped-bg: var(--brand-secondary-bg-subtle, var(--bs-secondary-bg-subtle));
  --theme-table-secondary-hover-bg: color-mix(in srgb, var(--brand-secondary-bg-subtle, var(--bs-secondary-bg-subtle)) 86%, var(--brand-secondary-color, var(--bs-secondary)));
  --theme-table-success-border-color: var(--brand-success-border-subtle, var(--bs-success-border-subtle));
  --theme-table-success-striped-bg: var(--brand-success-bg-subtle, var(--bs-success-bg-subtle));
  --theme-table-success-hover-bg: color-mix(in srgb, var(--brand-success-bg-subtle, var(--bs-success-bg-subtle)) 86%, var(--brand-success-color, var(--bs-success)));
  --theme-table-info-border-color: var(--brand-info-border-subtle, var(--bs-info-border-subtle));
  --theme-table-info-striped-bg: var(--brand-info-bg-subtle, var(--bs-info-bg-subtle));
  --theme-table-info-hover-bg: color-mix(in srgb, var(--brand-info-bg-subtle, var(--bs-info-bg-subtle)) 86%, var(--brand-info-color, var(--bs-info)));
  --theme-table-warning-border-color: var(--brand-warning-border-subtle, var(--bs-warning-border-subtle));
  --theme-table-warning-striped-bg: var(--brand-warning-bg-subtle, var(--bs-warning-bg-subtle));
  --theme-table-warning-hover-bg: color-mix(in srgb, var(--brand-warning-bg-subtle, var(--bs-warning-bg-subtle)) 86%, var(--brand-warning-color, var(--bs-warning)));
  --theme-table-danger-border-color: var(--brand-danger-border-subtle, var(--bs-danger-border-subtle));
  --theme-table-danger-striped-bg: var(--brand-danger-bg-subtle, var(--bs-danger-bg-subtle));
  --theme-table-danger-hover-bg: color-mix(in srgb, var(--brand-danger-bg-subtle, var(--bs-danger-bg-subtle)) 86%, var(--brand-danger-color, var(--bs-danger)));
  --theme-table-light-border-color: var(--brand-light-border-subtle, var(--bs-light-border-subtle));
  --theme-table-light-striped-bg: var(--brand-light-bg-subtle, var(--bs-light-bg-subtle));
  --theme-table-light-hover-bg: color-mix(in srgb, var(--brand-light-bg-subtle, var(--bs-light-bg-subtle)) 88%, var(--brand-light-color, var(--bs-light)));
  --theme-table-dark-border-color: var(--brand-dark-border-subtle, var(--bs-dark-border-subtle));
  --theme-table-dark-striped-bg: var(--brand-dark-bg-subtle, var(--bs-dark-bg-subtle));
  --theme-table-dark-hover-bg: color-mix(in srgb, var(--brand-dark-bg-subtle, var(--bs-dark-bg-subtle)) 82%, var(--brand-dark-color, var(--bs-dark)));

  /* Social-network colors are intentionally vendor-owned, not brand remapped. */
  --theme-social-airbnb: #fd5c63;
  --theme-social-behance: #1769ff;
  --theme-social-blogger: #f57d00;
  --theme-social-codepen: #0ebeff;
  --theme-social-discord: #7289da;
  --theme-social-dribbble: #ea4c89;
  --theme-social-dropbox: #007ee5;
  --theme-social-facebook: #1877f2;
  --theme-social-flickr: #0063dc;
  --theme-social-foursquare: #f94877;
  --theme-social-github: #4078c0;
  --theme-social-gitlab: #fc6d26;
  --theme-social-google: #ea4335;
  --theme-social-instagram: #405de6;
  --theme-social-kickstarter: #2bde73;
  --theme-social-linkedin: #0077b5;
  --theme-social-medium: #00ab6c;
  --theme-social-messenger: #0084ff;
  --theme-social-pinterest: #e60023;
  --theme-social-pocket: #ed812b;
  --theme-social-product-hunt: #da552f;
  --theme-social-reddit: #ff4500;
  --theme-social-skype: #00aff0;
  --theme-social-slack: #611f69;
  --theme-social-snapchat: #fffc00;
  --theme-social-stack-overflow: #f48024;
  --theme-social-steam: #00adee;
  --theme-social-stumbleupon: #f96854;
  --theme-social-telegram: #08c;
  --theme-social-tiktok: #fe2c55;
  --theme-social-trip-advisor: #00af87;
  --theme-social-tumblr: #35465c;
  --theme-social-twitch: #9146ff;
  --theme-social-twitter: #1da1f2;
  --theme-social-vimeo: #1ab7ea;
  --theme-social-vk: #45668e;
  --theme-social-whatsapp: #128c7e;
  --theme-social-xing: #2d8cff;
  --theme-social-youtube: #ff0000;
}

[data-bs-theme="dark"] {
  --theme-color-white: var(--neutral-50, #f8fafa);
  --theme-color-white-rgb: var(--bs-emphasis-color-rgb, 248, 250, 250);
  --theme-color-black: var(--neutral-900, #0b0d0f);
  --theme-color-black-rgb: var(--bs-body-bg-rgb, 11, 13, 15);
  --theme-body-color: var(--bs-body-color);
  --theme-body-color-rgb: var(--bs-body-color-rgb);
  --theme-body-bg: var(--bs-body-bg);
  --theme-body-bg-rgb: var(--bs-body-bg-rgb);
  --theme-heading-color: var(--bs-heading-color);
  --theme-border-color: var(--bs-border-color);
  --theme-secondary-color: var(--bs-secondary-color);
  --theme-secondary-bg: var(--bs-secondary-bg);
  --theme-secondary-bg-rgb: var(--bs-secondary-bg-rgb);
  --theme-tertiary-color: var(--bs-tertiary-color);
  --theme-tertiary-bg: var(--bs-tertiary-bg);
  --theme-tertiary-bg-rgb: var(--bs-tertiary-bg-rgb);

  --theme-dark-body-bg: var(--bs-body-bg);
  --theme-dark-body-bg-rgb: var(--bs-body-bg-rgb);
  --theme-dark-emphasis-color: var(--bs-emphasis-color);
  --theme-dark-emphasis-color-rgb: var(--bs-emphasis-color-rgb);
  --theme-dark-secondary-bg: var(--bs-secondary-bg);
  --theme-dark-secondary-bg-rgb: var(--bs-secondary-bg-rgb);
  --theme-dark-tertiary-color: var(--bs-tertiary-color);
  --theme-dark-tertiary-color-rgb: var(--bs-tertiary-color-rgb);
  --theme-dark-tertiary-bg: var(--bs-tertiary-bg);
  --theme-dark-tertiary-bg-rgb: var(--bs-tertiary-bg-rgb);
  --theme-dark-heading-color: var(--bs-heading-color);
  --theme-dark-link-color: var(--bs-link-color);
  --theme-dark-link-color-rgb: var(--bs-link-color-rgb);
  --theme-dark-link-hover-color: var(--bs-link-hover-color);
  --theme-dark-link-hover-color-rgb: var(--bs-link-hover-color-rgb);
  --theme-dark-code-color: var(--bs-code-color);
  --theme-dark-border-color: var(--bs-border-color);
  --theme-dark-border-color-translucent: var(--bs-border-color-translucent);
  --theme-dark-form-valid-color: var(--bs-form-valid-color);
  --theme-dark-form-invalid-color: var(--bs-form-invalid-color);

  --theme-dark-primary-text-emphasis: var(--bs-primary-text-emphasis);
  --theme-dark-secondary-text-emphasis: var(--bs-secondary-text-emphasis);
  --theme-dark-success-text-emphasis: var(--bs-success-text-emphasis);
  --theme-dark-info-text-emphasis: var(--bs-info-text-emphasis);
  --theme-dark-warning-text-emphasis: var(--bs-warning-text-emphasis);
  --theme-dark-danger-text-emphasis: var(--bs-danger-text-emphasis);
  --theme-dark-light-text-emphasis: var(--bs-light-text-emphasis);
  --theme-dark-dark-text-emphasis: var(--bs-dark-text-emphasis);
  --theme-dark-primary-bg-subtle: var(--bs-primary-bg-subtle);
  --theme-dark-secondary-bg-subtle: var(--bs-secondary-bg-subtle);
  --theme-dark-success-bg-subtle: var(--bs-success-bg-subtle);
  --theme-dark-info-bg-subtle: var(--bs-info-bg-subtle);
  --theme-dark-warning-bg-subtle: var(--bs-warning-bg-subtle);
  --theme-dark-danger-bg-subtle: var(--bs-danger-bg-subtle);
  --theme-dark-light-bg-subtle: var(--bs-light-bg-subtle);
  --theme-dark-dark-bg-subtle: var(--bs-dark-bg-subtle);
  --theme-dark-primary-border-subtle: var(--bs-primary-border-subtle);
  --theme-dark-secondary-border-subtle: var(--bs-secondary-border-subtle);
  --theme-dark-success-border-subtle: var(--bs-success-border-subtle);
  --theme-dark-info-border-subtle: var(--bs-info-border-subtle);
  --theme-dark-warning-border-subtle: var(--bs-warning-border-subtle);
  --theme-dark-danger-border-subtle: var(--bs-danger-border-subtle);
  --theme-dark-light-border-subtle: var(--bs-light-border-subtle);
  --theme-dark-dark-border-subtle: var(--bs-dark-border-subtle);

  --theme-bg-primary-dark: var(--color-primary-800, var(--brand-primary-text-emphasis));
  --theme-bg-secondary-dark: var(--neutral-800, var(--bs-secondary-bg));
  --theme-bg-success-dark: var(--color-success-900, var(--bs-success-bg-subtle));
  --theme-bg-info-dark: var(--color-info-900, var(--bs-info-bg-subtle));
  --theme-bg-warning-dark: var(--color-warning-900, var(--bs-warning-bg-subtle));
  --theme-bg-danger-dark: var(--color-danger-900, var(--bs-danger-bg-subtle));
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--brand-font-heading, var(--theme-font-sans));
}

/*
 * Custom imported page adapter: GREAD PDF landing page.
 *
 * These selectors were originally embedded in the saved page HTML. They now
 * live in the theme bridge so brand roles, effects, spacing, radius, and shadow
 * tokens can cascade into imported/custom pages without editing raw section CSS.
 */
:root,
[data-bs-theme="light"] {
  --gread-ink: var(--brand-heading-color, var(--bs-heading-color));
  --gread-muted: var(--brand-muted-color, var(--bs-secondary-color));
  --gread-violet: var(--brand-primary-text-emphasis, var(--bs-primary-text-emphasis));
  --gread-purple: var(--brand-primary-color, var(--bs-primary));
  --gread-cyan: var(--brand-info-color, var(--bs-info));
  --gread-lime: var(--brand-success-bg-subtle, var(--bs-success-bg-subtle));
  --gread-soft: var(--brand-primary-bg-subtle, var(--bs-primary-bg-subtle));
  --gread-line: var(--brand-border-color, var(--bs-border-color));
  --gread-shadow: var(--bs-box-shadow-lg, 0 1.3rem 3.4rem rgba(var(--bs-primary-rgb, 86, 55, 255), 0.14));
  --gread-radius: var(--bs-border-radius-xxl, 1.5rem);
  --gread-card-radius: var(--bs-border-radius-xl, 1.1rem);
  --gread-page-surface: var(--brand-surface-color, var(--bs-body-bg));
  --gread-panel-surface: var(--brand-container-bg-color, var(--bs-tertiary-bg));
  --gread-card-surface: color-mix(in srgb, var(--brand-surface-color, var(--bs-body-bg)) 82%, transparent);
  --gread-glass-surface: color-mix(in srgb, var(--brand-surface-color, var(--bs-body-bg)) 86%, transparent);
  --gread-primary-gradient: var(--effect-aurora-background, linear-gradient(135deg, var(--gread-purple), var(--gread-violet)));
  --gread-text-gradient: var(--effect-gread-execution-text-gradient, var(--effect-sunset-text-gradient, linear-gradient(135deg, var(--gread-purple), var(--gread-cyan))));
  --gread-hero-bg: linear-gradient(180deg, var(--brand-primary-bg-subtle, var(--bs-primary-bg-subtle)) 0, var(--gread-page-surface) 22rem);
  --gread-hero-atmosphere: radial-gradient(circle at 22% 0, color-mix(in srgb, var(--gread-cyan) 16%, transparent), transparent 26rem),
    radial-gradient(circle at 80% 8%, color-mix(in srgb, var(--gread-purple) 14%, transparent), transparent 28rem);
  --gread-band-bg: radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--gread-cyan) 22%, transparent), transparent 24rem),
    linear-gradient(135deg, var(--gread-purple), var(--gread-violet));
  --gread-soft-bg: linear-gradient(180deg, var(--brand-info-bg-subtle, var(--bs-info-bg-subtle)), var(--gread-page-surface));
  --gread-check-bg: linear-gradient(135deg, var(--gread-cyan), var(--gread-lime));
  --gread-cta-bg: var(--brand-success-bg-subtle, var(--bs-success-bg-subtle));
}

[data-bs-theme="dark"] {
  --gread-ink: var(--brand-heading-color, var(--bs-heading-color));
  --gread-muted: var(--brand-muted-color, var(--bs-secondary-color));
  --gread-soft: var(--brand-primary-bg-subtle, var(--bs-primary-bg-subtle));
  --gread-line: var(--brand-border-color, var(--bs-border-color));
  --gread-page-surface: var(--brand-surface-color, var(--bs-body-bg));
  --gread-panel-surface: var(--brand-surface-alt-color, var(--bs-secondary-bg));
  --gread-card-surface: color-mix(in srgb, var(--brand-container-bg-color, var(--bs-tertiary-bg)) 88%, transparent);
  --gread-glass-surface: color-mix(in srgb, var(--brand-surface-alt-color, var(--bs-secondary-bg)) 84%, transparent);
  --gread-hero-bg: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary-bg-subtle, var(--bs-primary-bg-subtle)) 55%, var(--bs-body-bg)) 0, var(--gread-page-surface) 22rem);
  --gread-soft-bg: linear-gradient(180deg, color-mix(in srgb, var(--brand-info-bg-subtle, var(--bs-info-bg-subtle)) 42%, var(--bs-body-bg)), var(--gread-page-surface));
}

.gread-page {
  color: var(--gread-ink);
  font-family: var(--bs-body-font-family);
  overflow: hidden;
}

.gread-container {
  width: min(100% - 2rem, var(--theme-container-xl, 1120px));
  margin-inline: auto;
}

.gread-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: color-mix(in srgb, var(--gread-page-surface) 86%, transparent);
  border-bottom: 1px solid var(--gread-line);
  backdrop-filter: blur(16px);
}

.gread-nav {
  min-height: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.gread-logo {
  display: inline-flex;
  align-items: center;
  gap: .12rem;
  color: var(--gread-ink);
  font-weight: 800;
  letter-spacing: -.04em;
  text-decoration: none;
  font-size: 1.34rem;
}

.gread-logo-mark {
  color: var(--gread-cyan);
  font-weight: 900;
  transform: rotate(-9deg);
  display: inline-block;
}

.gread-nav-links {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Theme compatibility guard: carousel slides and wide gutter rows can sit outside
   the viewport while animating, but they should never create page-level x-scroll. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.swiper,
.swiper-container {
  max-width: 100%;
}

.gread-nav-links a {
  color: var(--gread-ink);
  text-decoration: none;
  border-radius: var(--bs-border-radius-pill, 999px);
  padding: .46rem .82rem;
  font-weight: 600;
  font-size: .88rem;
}

.gread-nav-links a.active {
  color: var(--gread-purple);
  background: var(--gread-soft);
}

.gread-nav-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.gread-icon-button {
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: var(--bs-border-radius-pill, 999px);
  background: var(--gread-soft);
  color: var(--gread-purple);
}

.gread-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.55rem;
  border-radius: var(--bs-border-radius-pill, 999px);
  padding: .65rem 1.15rem;
  border: 1px solid transparent;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--bs-box-shadow, 0 .8rem 1.8rem rgba(var(--bs-primary-rgb, 86, 55, 255), .14));
}

.gread-btn-primary {
  color: var(--bs-white, #fff);
  background: var(--gread-primary-gradient);
}

.gread-btn-ghost {
  color: var(--gread-purple);
  background: var(--gread-page-surface);
  border-color: color-mix(in srgb, var(--gread-purple) 28%, transparent);
  box-shadow: none;
}

.gread-hero {
  position: relative;
  isolation: isolate;
  padding: var(--theme-space-9, 7.5rem) 0 var(--theme-space-9, 8.5rem);
  text-align: center;
  background: var(--gread-hero-bg);
}

.gread-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 28rem;
  background: var(--gread-hero-atmosphere);
  z-index: -1;
}

.gread-gradient-text {
  display: inline-block;
  padding-inline: .04em;
  background: var(--gread-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gread-eyebrow {
  color: var(--gread-purple);
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-size: .78rem;
}

.gread-hero h1 {
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  line-height: 1.03;
  max-width: 1040px;
  margin: 1rem auto 1.25rem;
  letter-spacing: -.025em;
  font-weight: 900;
  overflow: visible;
}

.gread-lede {
  max-width: 720px;
  margin: 0 auto;
  color: var(--gread-muted);
  font-size: 1.08rem;
  line-height: 1.75;
}

.gread-section {
  padding: var(--theme-space-8, 6.5rem) 0;
  position: relative;
}

.gread-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.gread-copy h2,
.gread-center h2 {
  line-height: 1.05;
  letter-spacing: -.055em;
  font-weight: 900;
}

.gread-copy h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  margin-bottom: 1.2rem;
}

.gread-copy p,
.gread-copy ul,
.gread-card p {
  color: var(--gread-muted);
}

.gread-copy p {
  line-height: 1.8;
  font-size: 1.02rem;
}

.gread-copy ul {
  line-height: 1.75;
  padding-left: 1.15rem;
}

.gread-image-card {
  border-radius: var(--gread-radius);
  overflow: hidden;
  box-shadow: var(--gread-shadow);
  background: var(--gread-page-surface);
}

.gread-image-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gread-collage {
  display: grid;
  grid-template-columns: 1.15fr .9fr;
  gap: 1rem;
}

.gread-collage .gread-image-card:first-child {
  grid-row: span 2;
  min-height: 26rem;
}

.gread-collage .gread-image-card:not(:first-child) {
  min-height: 12.5rem;
}

.gread-band {
  padding: var(--theme-space-8, 6rem) 0;
  color: var(--bs-white, #fff);
  background: var(--gread-band-bg);
}

.gread-band .gread-grid {
  align-items: end;
}

.gread-band h2 {
  color: var(--bs-white, #fff);
}

.gread-band p {
  color: rgba(255, 255, 255, .82);
}

.gread-check-list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0;
}

.gread-check-list li {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  margin: .55rem 0;
  color: var(--gread-muted);
}

.gread-check-list li::before {
  content: '';
  width: .78rem;
  height: .78rem;
  margin-top: .42rem;
  flex: 0 0 auto;
  border-radius: var(--bs-border-radius-pill, 999px);
  background: var(--gread-check-bg);
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--gread-cyan) 12%, transparent);
}

.gread-soft-section {
  background: var(--gread-soft-bg);
}

.gread-center {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3.6rem;
}

.gread-center h2 {
  font-size: clamp(2rem, 4vw, 3.15rem);
}

.gread-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.gread-card {
  padding: 1.55rem;
  border: 1px solid color-mix(in srgb, var(--gread-ink) 8%, transparent);
  border-radius: var(--gread-card-radius);
  background: var(--gread-card-surface);
  box-shadow: var(--bs-box-shadow, 0 1rem 2.5rem rgba(var(--bs-primary-rgb, 86, 55, 255), .1));
}

.gread-card strong {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--gread-violet);
  font-size: .9rem;
}

.gread-card p {
  margin: 0;
}

.gread-transition-card {
  display: grid;
  grid-template-columns: .9fr 1.15fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gread-purple) 20%, transparent);
  border-radius: var(--gread-radius);
  box-shadow: 0 0 0 .24rem color-mix(in srgb, var(--gread-purple) 12%, transparent), var(--gread-shadow);
  background: var(--gread-page-surface);
}

.gread-transition-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 18rem;
}

.gread-transition-card div {
  padding: clamp(1.5rem, 4vw, 3.5rem);
}

.gread-cta {
  padding: var(--theme-space-7, 5.5rem) 0;
}

.gread-cta-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--gread-radius);
  padding: clamp(3rem, 6vw, 5rem);
  text-align: center;
  background: var(--gread-cta-bg) url("../../../../importedImages/gread-pdf/page-01-image-04-560ad8aac4a0.png") center/cover;
  box-shadow: var(--gread-shadow);
}

.gread-cta-card h2 {
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.06em;
  font-weight: 900;
  max-width: 780px;
  margin: 0 auto 1rem;
}

.gread-cta-card p {
  color: color-mix(in srgb, var(--gread-ink) 72%, transparent);
  max-width: 620px;
  margin: 0 auto 1.8rem;
}

.gread-cta-actions {
  display: flex;
  justify-content: center;
  gap: .85rem;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .gread-nav-links {
    display: none;
  }

  .gread-nav {
    min-height: 3.8rem;
  }

  .gread-hero {
    padding: var(--theme-space-7, 5rem) 0;
  }

  .gread-grid,
  .gread-transition-card {
    grid-template-columns: 1fr;
  }

  .gread-collage .gread-image-card:first-child {
    min-height: 18rem;
  }

  .gread-cards {
    grid-template-columns: 1fr;
  }

  .gread-section {
    padding: var(--theme-space-6, 4.5rem) 0;
  }
}