@layer tokens, base, layouts, affordances, components, utilities;
/* Entry point for your PostCSS build */
/* affordances is reserved for shared visual patterns (focus rings, hover states, etc.) */
/* Proxima Nova — self-hosted from public/fonts/ for the PostCSS pipeline.
 * The design token --font-family-sans resolves to 'Proxima Nova'.
 *
 * Font weights are mapped to match design token values (semibold=500, bold=600)
 * rather than conventional Proxima Nova naming (semibold=600, bold=700).
 * CSS bolder (700) falls back to the closest declared weight (600/Bold). */
@font-face {
  font-family: 'Proxima Nova';
  src: url(/fonts/ProximaNova-Thin-webfont.woff) format('woff');
  font-weight: 100 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url(/fonts/ProximaNova-Light-webfont.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url(/fonts/ProximaNova-Reg-webfont.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url(/fonts/ProximaNova-Sbold-webfont.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url(/fonts/ProximaNova-Bold-webfont.woff) format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Auto-generated by Style Dictionary — do not edit. */
@layer tokens{

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --color-neutral-0: #ffffff;
  --color-neutral-10: #fafbfc;
  --color-neutral-15: #f2f3f4;
  --color-neutral-20: #eeeff0;
  --color-neutral-30: #ebeced;
  --color-neutral-40: #dcddde;
  --color-neutral-50: #b9b9b9;
  --color-neutral-60: #8e8e8e;
  --color-neutral-70: #666666;
  --color-neutral-80: #54575a;
  --color-neutral-90: #36393c;
  --color-neutral-100: #04070a;
  --color-brand-5: #f5fdfd;
  --color-brand-10: #e6fafa;
  --color-brand-15: #cdf5f7;
  --color-brand-20: #97ebef;
  --color-brand-30: #0be1eb;
  --color-brand-40: #14cfdb;
  --color-brand-50: #00c1ca;
  --color-brand-60: #00a5b0;
  --color-brand-70: #048c9e;
  --color-brand-80: #027989;
  --color-brand-90: #025968;
  --color-brand-100: #013646;
  --color-accent-5: #fffbf7;
  --color-accent-10: #fff7f0;
  --color-accent-15: #feebd9;
  --color-accent-20: #feddbf;
  --color-accent-30: #efb17a;
  --color-accent-40: #f6b763;
  --color-accent-50: #fba919;
  --color-accent-60: #fb8519;
  --color-accent-70: #dc841d;
  --color-accent-80: #ad6e00;
  --color-accent-90: #7d5900;
  --color-accent-100: #3c2e00;
  --color-alert-discovery-5: #f5f8fa;
  --color-alert-discovery-10: #e6eef3;
  --color-alert-discovery-15: #ccdce7;
  --color-alert-discovery-20: #b3cad9;
  --color-alert-discovery-30: #6795b2;
  --color-alert-discovery-40: #3576a4;
  --color-alert-discovery-50: #025b9c;
  --color-alert-discovery-60: #024672;
  --color-alert-discovery-70: #023959;
  --color-alert-discovery-80: #01324e;
  --color-alert-discovery-90: #012338;
  --color-alert-discovery-100: #011721;
  --color-alert-critical-5: #fffaf7;
  --color-alert-critical-10: #fff0e7;
  --color-alert-critical-15: #ffe7d7;
  --color-alert-critical-20: #ffcab0;
  --color-alert-critical-30: #ffa688;
  --color-alert-critical-40: #ff846b;
  --color-alert-critical-50: #ff4b3a;
  --color-alert-critical-60: #db2b2a;
  --color-alert-critical-70: #b71d29;
  --color-alert-critical-80: #931227;
  --color-alert-critical-90: #7a0b25;
  --color-alert-critical-100: #520000;
  --color-alert-warning-5: #fffcf1;
  --color-alert-warning-10: #fffae4;
  --color-alert-warning-15: #fff7d2;
  --color-alert-warning-20: #fff1b5;
  --color-alert-warning-30: #ffe46b;
  --color-alert-warning-40: #fad530;
  --color-alert-warning-50: #e2b900;
  --color-alert-warning-60: #be9b00;
  --color-alert-warning-70: #8a7000;
  --color-alert-warning-80: #645100;
  --color-alert-warning-90: #463900;
  --color-alert-warning-100: #272000;
  --color-alert-success-5: #f7f8f6;
  --color-alert-success-10: #f3f6f1;
  --color-alert-success-15: #e9f1e5;
  --color-alert-success-20: #dff2d5;
  --color-alert-success-30: #bde5a8;
  --color-alert-success-40: #b1d2a3;
  --color-alert-success-50: #8cc375;
  --color-alert-success-60: #5f9c85;
  --color-alert-success-70: #377d6f;
  --color-alert-success-80: #00747a;
  --color-alert-success-90: #005155;
  --color-alert-success-100: #00161c;
  --color-pastel-butter-5: #fbf8f1;
  --color-pastel-butter-10: #fbf6eb;
  --color-pastel-butter-15: #fbf3e1;
  --color-pastel-butter-20: #faedcf;
  --color-pastel-butter-30: #ffe5a9;
  --color-pastel-butter-40: #f0d69a;
  --color-pastel-butter-50: #cbb277;
  --color-pastel-butter-60: #9e8c63;
  --color-pastel-butter-70: #766740;
  --color-pastel-butter-80: #4c4021;
  --color-pastel-butter-90: #32240d;
  --color-pastel-butter-100: #180c00;
  --color-pastel-violet-5: #fbfbfc;
  --color-pastel-violet-10: #f1f1f9;
  --color-pastel-violet-15: #ebebf6;
  --color-pastel-violet-20: #dcdcef;
  --color-pastel-violet-30: #c4c4d6;
  --color-pastel-violet-40: #afafcb;
  --color-pastel-violet-50: #7272a8;
  --color-pastel-violet-60: #5f5e89;
  --color-pastel-violet-70: #555175;
  --color-pastel-violet-80: #4b4561;
  --color-pastel-violet-90: #372e3e;
  --color-pastel-violet-100: #100807;
  --color-pastel-dusk-5: #f7fafb;
  --color-pastel-dusk-10: #f3f7f9;
  --color-pastel-dusk-15: #e8eff2;
  --color-pastel-dusk-20: #dce8ec;
  --color-pastel-dusk-30: #d1e0e6;
  --color-pastel-dusk-40: #b9d0d9;
  --color-pastel-dusk-50: #8eb8c9;
  --color-pastel-dusk-60: #84aab9;
  --color-pastel-dusk-70: #7594a0;
  --color-pastel-dusk-80: #5c7179;
  --color-pastel-dusk-90: #3f4b4e;
  --color-pastel-dusk-100: #323a3b;
  --color-pastel-mauve-5: #f2f0ef;
  --color-pastel-mauve-10: #ebe8e7;
  --color-pastel-mauve-15: #dfdbd8;
  --color-pastel-mauve-20: #d0cec9;
  --color-pastel-mauve-30: #beb9b1;
  --color-pastel-mauve-40: #a0998a;
  --color-pastel-mauve-50: #908577;
  --color-pastel-mauve-60: #776e63;
  --color-pastel-mauve-70: #5c5644;
  --color-pastel-mauve-80: #4f4936;
  --color-pastel-mauve-90: #413c2a;
  --color-pastel-mauve-100: #332e1c;
  --color-pastel-flamingo-5: #faf4f4;
  --color-pastel-flamingo-10: #f7eced;
  --color-pastel-flamingo-15: #f3e8e9;
  --color-pastel-flamingo-20: #f2dfe1;
  --color-pastel-flamingo-30: #efd2d9;
  --color-pastel-flamingo-40: #ebb4c2;
  --color-pastel-flamingo-50: #e8a2b6;
  --color-pastel-flamingo-60: #d7a3ac;
  --color-pastel-flamingo-70: #c38f92;
  --color-pastel-flamingo-80: #a1787b;
  --color-pastel-flamingo-90: #73595a;
  --color-pastel-flamingo-100: #2d2424;
  --color-pastel-moss-5: #f9faf8;
  --color-pastel-moss-10: #f3f5f1;
  --color-pastel-moss-15: #e8ece4;
  --color-pastel-moss-20: #d8dfd2;
  --color-pastel-moss-30: #b7c7ab;
  --color-pastel-moss-40: #a5b798;
  --color-pastel-moss-50: #8ea785;
  --color-pastel-moss-60: #84957d;
  --color-pastel-moss-70: #687460;
  --color-pastel-moss-80: #565d52;
  --color-pastel-moss-90: #3f443a;
  --color-pastel-moss-100: #22271e;
  --color-pastel-potpourri-5: #fcfafb;
  --color-pastel-potpourri-10: #f9f5f8;
  --color-pastel-potpourri-15: #f3ebf1;
  --color-pastel-potpourri-20: #ead6e6;
  --color-pastel-potpourri-30: #e7c4dd;
  --color-pastel-potpourri-40: #e3b8d7;
  --color-pastel-potpourri-50: #cfa4c3;
  --color-pastel-potpourri-60: #a7849d;
  --color-pastel-potpourri-70: #82677a;
  --color-pastel-potpourri-80: #5d4957;
  --color-pastel-potpourri-90: #382c35;
  --color-pastel-potpourri-100: #1d171b;
  --color-pastel-mint-5: #fafdfd;
  --color-pastel-mint-10: #f5fbfb;
  --color-pastel-mint-15: #f0f9fa;
  --color-pastel-mint-20: #e9f7f8;
  --color-pastel-mint-30: #d8f6f6;
  --color-pastel-mint-40: #c5e6e7;
  --color-pastel-mint-50: #b4e4e4;
  --color-pastel-mint-60: #b8e1d9;
  --color-pastel-mint-70: #a5d7c5;
  --color-pastel-mint-80: #79a499;
  --color-pastel-mint-90: #516e66;
  --color-pastel-mint-100: #364944;
  --shadow-color: rgba(0, 0, 0, 0.15);
  --font-family-sans: 'Proxima Nova';
  --font-family-serif: fields;
  --font-size-3: 0.75rem;
  --font-size-4: 1rem;
  --font-size-5: 1.25rem;
  --font-size-6: 1.5rem;
  --font-size-7: 1.75rem;
  --font-size-8: 2rem;
  --font-size-9: 2.25rem;
  --font-size-11: 2.75rem;
  --font-size-15: 3.75rem;
  --font-size-18: 4.5rem;
  --font-size-3-5: 0.875rem;
  --font-weight-thin: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 500;
  --font-weight-bold: 600;
  --font-weight-extrabold: 700;
  --font-line-height-4: 1rem;
  --font-line-height-5: 1.25rem;
  --font-line-height-6: 1.5rem;
  --font-line-height-8: 2rem;
  --font-line-height-9: 2.25rem;
  --font-line-height-11: 2.75rem;
  --font-line-height-14: 3.5rem;
  --font-line-height-19: 4.75rem;
  --font-line-height-22: 5.5rem;
  --font-letter-spacing-xs: -0.013rem;
  --font-letter-spacing-sm: 0rem;
  --font-letter-spacing-md: 0.013rem;
  --font-letter-spacing-lg: 0.019rem;
  --font-letter-spacing-xl: 0.025rem;
  --font-letter-spacing-2xl: 0.038rem;
  --border-width-none: 0;
  --border-width-sm: 1px;
  --border-width-md: 4px;
  --border-radius-none: 0;
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 80px;
  --breakpoint-sm: 375px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1728px;
  --layout-sm: 850px;
  --layout-lg: 1280px;
  --spacing-4xs: 0.25rem;
  --spacing-3xs: 0.5rem;
  --spacing-2xs: 0.75rem;
  --spacing-xs: 1rem;
  --spacing-sm: 1.5rem;
  --spacing-md: 2rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 5rem;
  --spacing-2xl: 6rem;
}
}
@layer tokens{

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --shadow-none: none;
  --color-text-heading: var(--color-neutral-100);
  --color-text-body: var(--color-neutral-80);
  --color-text-emphasis: var(--color-brand-50);
  --color-text-muted: var(--color-neutral-60);
  --color-text-light: var(--color-neutral-0);
  --color-text-eyebrow: var(--color-brand-80);
  --color-text-on-action-primary: var(--color-neutral-100);
  --color-text-on-action-primary-hover: var(--color-neutral-100);
  --color-text-on-action-primary-press: var(--color-neutral-0);
  --color-text-on-action-accent: var(--color-neutral-100);
  --color-text-on-action-accent-hover: var(--color-neutral-100);
  --color-text-on-action-accent-press: var(--color-neutral-0);
  --color-text-feedback-primary: var(--color-neutral-100);
  --color-text-feedback-alt: var(--color-neutral-0);
  --color-background-page: var(--color-neutral-0);
  --color-background-surface: var(--color-neutral-0);
  --color-background-highlight: var(--color-brand-5);
  --color-background-highlight-alt: var(--color-brand-10);
  --color-background-feedback-info: var(--color-brand-15);
  --color-background-feedback-info-accent: var(--color-accent-15);
  --color-action-primary: var(--color-brand-50);
  --color-action-primary-hover: var(--color-brand-30);
  --color-action-primary-press: var(--color-brand-80);
  --color-action-accent: var(--color-accent-60);
  --color-action-accent-hover: var(--color-accent-50);
  --color-action-accent-press: var(--color-accent-90);
  --color-border-subtle: var(--color-neutral-15);
  --color-border-strong: var(--color-neutral-40);
  --color-border-strongest: var(--color-neutral-50);
  --color-border-brand: var(--color-brand-50);
  --color-border-brand-dark-bg: var(--color-brand-30);
  --color-icon-brand-lightest: var(--color-brand-20);
  --color-icon-brand-light: var(--color-brand-40);
  --color-icon-brand-medium: var(--color-brand-60);
  --color-icon-brand-dark: var(--color-brand-80);
  --color-icon-neutral-dark: var(--color-neutral-80);
  --shadow-inner: inset 0 1px 4px 0 var(--shadow-color);
  --shadow-sm: 0 1px 4px 0 var(--shadow-color);
  --shadow-md: 0 4px 12px 0 var(--shadow-color);
  --shadow-lg: 0 8px 16px 0 var(--shadow-color);
  --shadow-xl: 0 12px 24px 0 var(--shadow-color);
  --shadow-md-top: 0 -4px 12px 0 var(--shadow-color);
  --shadow-md-bottom: 0 4px 12px 0 var(--shadow-color);
  --shadow-md-right: 4px 0 12px 0 var(--shadow-color);
  --shadow-md-left: -4px 0 12px 0 var(--shadow-color);
  --shadow-surface: 0 1px 4px 0 var(--shadow-color);
  --shadow-elevated: 0 4px 12px 0 var(--shadow-color);
  --shadow-overlay: 0 8px 16px 0 var(--shadow-color);
  --shadow-popover: 0 12px 24px 0 var(--shadow-color);
  --shadow-inset: inset 0 1px 4px 0 var(--shadow-color);
  --border-radius-subtle: var(--border-radius-sm);
  --border-radius-default: var(--border-radius-md);
  --border-radius-prominent: var(--border-radius-lg);
  --border-radius-pill: var(--border-radius-lg);
  --breakpoint-mobile: var(--breakpoint-sm);
  --breakpoint-tablet: var(--breakpoint-md);
  --breakpoint-desktop: var(--breakpoint-lg);
  --breakpoint-wide: var(--breakpoint-xl);
  --layout-content: var(--layout-sm);
  --layout-wide: var(--layout-lg);
  --spacing-section-padding-vertical: var(--spacing-2xl);
  --spacing-section-padding-horizontal: var(--spacing-md);
  --icon-size-sm: var(--font-size-4);
  --icon-size-md: var(--font-size-6);
  --icon-size-lg: var(--font-size-8);
  --icon-size-xl: var(--font-size-15);
  --text-title-2xl-font-family: var(--font-family-serif);
  --text-title-2xl-font-size: var(--font-size-18);
  --text-title-2xl-font-weight: var(--font-weight-semibold);
  --text-title-2xl-line-height: var(--font-line-height-22);
  --text-title-2xl-letter-spacing: var(--font-letter-spacing-xs);
  --text-title-xl-font-family: var(--font-family-serif);
  --text-title-xl-font-size: var(--font-size-15);
  --text-title-xl-font-weight: var(--font-weight-semibold);
  --text-title-xl-line-height: var(--font-line-height-19);
  --text-title-xl-letter-spacing: var(--font-letter-spacing-xs);
  --text-title-lg-font-family: var(--font-family-serif);
  --text-title-lg-font-size: var(--font-size-11);
  --text-title-lg-font-weight: var(--font-weight-semibold);
  --text-title-lg-line-height: var(--font-line-height-14);
  --text-title-lg-letter-spacing: var(--font-letter-spacing-sm);
  --text-title-md-font-family: var(--font-family-serif);
  --text-title-md-font-size: var(--font-size-9);
  --text-title-md-font-weight: var(--font-weight-semibold);
  --text-title-md-line-height: var(--font-line-height-11);
  --text-title-md-letter-spacing: var(--font-letter-spacing-sm);
  --text-title-sm-font-family: var(--font-family-sans);
  --text-title-sm-font-size: var(--font-size-7);
  --text-title-sm-font-weight: var(--font-weight-bold);
  --text-title-sm-line-height: var(--font-line-height-9);
  --text-title-sm-letter-spacing: var(--font-letter-spacing-lg);
  --text-title-xs-font-family: var(--font-family-serif);
  --text-title-xs-font-size: var(--font-size-6);
  --text-title-xs-font-weight: var(--font-weight-semibold);
  --text-title-xs-line-height: var(--font-line-height-8);
  --text-title-xs-letter-spacing: var(--font-letter-spacing-md);
  --text-body-lg-font-family: var(--font-family-sans);
  --text-body-lg-font-size: var(--font-size-5);
  --text-body-lg-font-weight: var(--font-weight-regular);
  --text-body-lg-line-height: var(--font-line-height-8);
  --text-body-lg-letter-spacing: var(--font-letter-spacing-sm);
  --text-body-md-font-family: var(--font-family-sans);
  --text-body-md-font-size: var(--font-size-4);
  --text-body-md-font-weight: var(--font-weight-regular);
  --text-body-md-line-height: var(--font-line-height-6);
  --text-body-md-letter-spacing: var(--font-letter-spacing-sm);
  --text-body-sm-font-family: var(--font-family-sans);
  --text-body-sm-font-size: var(--font-size-3-5);
  --text-body-sm-font-weight: var(--font-weight-regular);
  --text-body-sm-line-height: var(--font-line-height-5);
  --text-body-sm-letter-spacing: var(--font-letter-spacing-md);
  --text-caption-font-family: var(--font-family-sans);
  --text-caption-font-size: var(--font-size-3);
  --text-caption-font-weight: var(--font-weight-regular);
  --text-caption-line-height: var(--font-line-height-4);
  --text-caption-letter-spacing: var(--font-letter-spacing-xl);
  --text-page-title-font-family: var(--font-family-serif);
  --text-page-title-font-size: var(--font-size-18);
  --text-page-title-font-weight: var(--font-weight-semibold);
  --text-page-title-line-height: var(--font-line-height-22);
  --text-page-title-letter-spacing: var(--font-letter-spacing-xs);
  --text-section-title-font-family: var(--font-family-serif);
  --text-section-title-font-size: var(--font-size-15);
  --text-section-title-font-weight: var(--font-weight-semibold);
  --text-section-title-line-height: var(--font-line-height-19);
  --text-section-title-letter-spacing: var(--font-letter-spacing-xs);
  --text-subsection-title-font-family: var(--font-family-serif);
  --text-subsection-title-font-size: var(--font-size-11);
  --text-subsection-title-font-weight: var(--font-weight-semibold);
  --text-subsection-title-line-height: var(--font-line-height-14);
  --text-subsection-title-letter-spacing: var(--font-letter-spacing-sm);
  --text-card-title-font-family: var(--font-family-serif);
  --text-card-title-font-size: var(--font-size-9);
  --text-card-title-font-weight: var(--font-weight-semibold);
  --text-card-title-line-height: var(--font-line-height-11);
  --text-card-title-letter-spacing: var(--font-letter-spacing-sm);
  --text-inline-title-font-family: var(--font-family-sans);
  --text-inline-title-font-size: var(--font-size-7);
  --text-inline-title-font-weight: var(--font-weight-bold);
  --text-inline-title-line-height: var(--font-line-height-9);
  --text-inline-title-letter-spacing: var(--font-letter-spacing-lg);
  --text-eyebrow-font-family: var(--font-family-serif);
  --text-eyebrow-font-size: var(--font-size-6);
  --text-eyebrow-font-weight: var(--font-weight-semibold);
  --text-eyebrow-line-height: var(--font-line-height-8);
  --text-eyebrow-letter-spacing: var(--font-letter-spacing-md);
  --text-disabled-font-family: var(--font-family-sans);
  --text-disabled-font-size: var(--font-size-4);
  --text-disabled-font-weight: var(--font-weight-regular);
  --text-disabled-line-height: var(--font-line-height-6);
  --text-disabled-letter-spacing: var(--font-letter-spacing-sm);
  --text-input-value-font-family: var(--font-family-sans);
  --text-input-value-font-size: var(--font-size-4);
  --text-input-value-font-weight: var(--font-weight-regular);
  --text-input-value-line-height: var(--font-line-height-6);
  --text-input-value-letter-spacing: var(--font-letter-spacing-sm);
  --text-input-label-font-family: var(--font-family-sans);
  --text-input-label-font-size: var(--font-size-3-5);
  --text-input-label-font-weight: var(--font-weight-regular);
  --text-input-label-line-height: var(--font-line-height-5);
  --text-input-label-letter-spacing: var(--font-letter-spacing-md);
  --text-helper-text-font-family: var(--font-family-sans);
  --text-helper-text-font-size: var(--font-size-3-5);
  --text-helper-text-font-weight: var(--font-weight-regular);
  --text-helper-text-line-height: var(--font-line-height-5);
  --text-helper-text-letter-spacing: var(--font-letter-spacing-md);
}
}
@layer tokens{
/* Auto-generated from icons/icons.json — do not edit manually. */
:root {
  --icon-svg-arrows--chevron-up-2: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M18 15L12 9L6 15' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");
  --icon-svg-general--check-2: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E");
}
}
@layer utilities{

/**
 * Do not edit directly, this file was auto-generated.
 */

.has-background-page-background-color { background-color: var(--color-background-page); }
.has-background-highlight-background-color { background-color: var(--color-background-highlight); }
.has-background-highlight-alt-background-color { background-color: var(--color-background-highlight-alt); }
.has-background-feedback-info-background-color { background-color: var(--color-background-feedback-info); }
.has-background-feedback-info-accent-background-color { background-color: var(--color-background-feedback-info-accent); }
.has-action-primary-background-color { background-color: var(--color-action-primary); }
.has-action-primary-hover-background-color { background-color: var(--color-action-primary-hover); }
.has-action-accent-background-color { background-color: var(--color-action-accent); }
.has-action-accent-hover-background-color { background-color: var(--color-action-accent-hover); }
.has-text-heading-background-color { background-color: var(--color-text-heading); }
.has-text-body-background-color { background-color: var(--color-text-body); }
.has-text-muted-background-color { background-color: var(--color-text-muted); }
.has-text-eyebrow-background-color { background-color: var(--color-text-eyebrow); }
.has-border-subtle-background-color { background-color: var(--color-border-subtle); }
.has-border-strong-background-color { background-color: var(--color-border-strong); }
.has-border-strongest-background-color { background-color: var(--color-border-strongest); }
.has-icon-brand-lightest-background-color { background-color: var(--color-icon-brand-lightest); }
.has-icon-brand-light-background-color { background-color: var(--color-icon-brand-light); }
.has-icon-brand-medium-background-color { background-color: var(--color-icon-brand-medium); }
.has-background-page-color { color: var(--color-background-page); }
.has-background-highlight-color { color: var(--color-background-highlight); }
.has-background-highlight-alt-color { color: var(--color-background-highlight-alt); }
.has-background-feedback-info-color { color: var(--color-background-feedback-info); }
.has-background-feedback-info-accent-color { color: var(--color-background-feedback-info-accent); }
.has-action-primary-color { color: var(--color-action-primary); }
.has-action-primary-hover-color { color: var(--color-action-primary-hover); }
.has-action-accent-color { color: var(--color-action-accent); }
.has-action-accent-hover-color { color: var(--color-action-accent-hover); }
.has-text-heading-color { color: var(--color-text-heading); }
.has-text-body-color { color: var(--color-text-body); }
.has-text-muted-color { color: var(--color-text-muted); }
.has-text-eyebrow-color { color: var(--color-text-eyebrow); }
.has-border-subtle-color { color: var(--color-border-subtle); }
.has-border-strong-color { color: var(--color-border-strong); }
.has-border-strongest-color { color: var(--color-border-strongest); }
.has-icon-brand-lightest-color { color: var(--color-icon-brand-lightest); }
.has-icon-brand-light-color { color: var(--color-icon-brand-light); }
.has-icon-brand-medium-color { color: var(--color-icon-brand-medium); }
.has-proxima-nova-font-family { font-family: var(--font-family-sans); }
.has-fields-font-family { font-family: var(--font-family-serif); }
.has-caption-font-size { font-size: var(--font-size-3); }
.has-body-sm-font-size { font-size: var(--font-size-3-5); }
.has-body-md-font-size { font-size: var(--font-size-4); }
.has-body-lg-font-size { font-size: var(--font-size-5); }
.has-title-xs-font-size { font-size: var(--font-size-6); }
.has-title-sm-font-size { font-size: var(--font-size-7); }
.has-title-md-font-size { font-size: var(--font-size-9); }
.has-title-lg-font-size { font-size: var(--font-size-11); }
.has-title-xl-font-size { font-size: var(--font-size-15); }
.has-title-2-xl-font-size { font-size: var(--font-size-18); }
.has-text-align-left { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.has-text-align-justify { text-align: justify; }
.has-background-page-icon-color { --icon-color: var(--color-background-page); }
.has-background-highlight-icon-color { --icon-color: var(--color-background-highlight); }
.has-background-highlight-alt-icon-color { --icon-color: var(--color-background-highlight-alt); }
.has-background-feedback-info-icon-color { --icon-color: var(--color-background-feedback-info); }
.has-background-feedback-info-accent-icon-color { --icon-color: var(--color-background-feedback-info-accent); }
.has-action-primary-icon-color { --icon-color: var(--color-action-primary); }
.has-action-primary-hover-icon-color { --icon-color: var(--color-action-primary-hover); }
.has-action-accent-icon-color { --icon-color: var(--color-action-accent); }
.has-action-accent-hover-icon-color { --icon-color: var(--color-action-accent-hover); }
.has-text-heading-icon-color { --icon-color: var(--color-text-heading); }
.has-text-body-icon-color { --icon-color: var(--color-text-body); }
.has-text-muted-icon-color { --icon-color: var(--color-text-muted); }
.has-text-eyebrow-icon-color { --icon-color: var(--color-text-eyebrow); }
.has-border-subtle-icon-color { --icon-color: var(--color-border-subtle); }
.has-border-strong-icon-color { --icon-color: var(--color-border-strong); }
.has-border-strongest-icon-color { --icon-color: var(--color-border-strongest); }
.has-icon-brand-lightest-icon-color { --icon-color: var(--color-icon-brand-lightest); }
.has-icon-brand-light-icon-color { --icon-color: var(--color-icon-brand-light); }
.has-icon-brand-medium-icon-color { --icon-color: var(--color-icon-brand-medium); }
.has-background-page-indicator-color { --indicator-color: var(--color-background-page); }
.has-background-highlight-indicator-color { --indicator-color: var(--color-background-highlight); }
.has-background-highlight-alt-indicator-color { --indicator-color: var(--color-background-highlight-alt); }
.has-background-feedback-info-indicator-color { --indicator-color: var(--color-background-feedback-info); }
.has-background-feedback-info-accent-indicator-color { --indicator-color: var(--color-background-feedback-info-accent); }
.has-action-primary-indicator-color { --indicator-color: var(--color-action-primary); }
.has-action-primary-hover-indicator-color { --indicator-color: var(--color-action-primary-hover); }
.has-action-accent-indicator-color { --indicator-color: var(--color-action-accent); }
.has-action-accent-hover-indicator-color { --indicator-color: var(--color-action-accent-hover); }
.has-text-heading-indicator-color { --indicator-color: var(--color-text-heading); }
.has-text-body-indicator-color { --indicator-color: var(--color-text-body); }
.has-text-muted-indicator-color { --indicator-color: var(--color-text-muted); }
.has-text-eyebrow-indicator-color { --indicator-color: var(--color-text-eyebrow); }
.has-border-subtle-indicator-color { --indicator-color: var(--color-border-subtle); }
.has-border-strong-indicator-color { --indicator-color: var(--color-border-strong); }
.has-border-strongest-indicator-color { --indicator-color: var(--color-border-strongest); }
.has-icon-brand-lightest-indicator-color { --indicator-color: var(--color-icon-brand-lightest); }
.has-icon-brand-light-indicator-color { --indicator-color: var(--color-icon-brand-light); }
.has-icon-brand-medium-indicator-color { --indicator-color: var(--color-icon-brand-medium); }
.has-background-page-link-color { --link-color: var(--color-background-page); }
.has-background-highlight-link-color { --link-color: var(--color-background-highlight); }
.has-background-highlight-alt-link-color { --link-color: var(--color-background-highlight-alt); }
.has-background-feedback-info-link-color { --link-color: var(--color-background-feedback-info); }
.has-background-feedback-info-accent-link-color { --link-color: var(--color-background-feedback-info-accent); }
.has-action-primary-link-color { --link-color: var(--color-action-primary); }
.has-action-primary-hover-link-color { --link-color: var(--color-action-primary-hover); }
.has-action-accent-link-color { --link-color: var(--color-action-accent); }
.has-action-accent-hover-link-color { --link-color: var(--color-action-accent-hover); }
.has-text-heading-link-color { --link-color: var(--color-text-heading); }
.has-text-body-link-color { --link-color: var(--color-text-body); }
.has-text-muted-link-color { --link-color: var(--color-text-muted); }
.has-text-eyebrow-link-color { --link-color: var(--color-text-eyebrow); }
.has-border-subtle-link-color { --link-color: var(--color-border-subtle); }
.has-border-strong-link-color { --link-color: var(--color-border-strong); }
.has-border-strongest-link-color { --link-color: var(--color-border-strongest); }
.has-icon-brand-lightest-link-color { --link-color: var(--color-icon-brand-lightest); }
.has-icon-brand-light-link-color { --link-color: var(--color-icon-brand-light); }
.has-icon-brand-medium-link-color { --link-color: var(--color-icon-brand-medium); }
.has-background-page-link-hover-color { --link-hover-color: var(--color-background-page); }
.has-background-highlight-link-hover-color { --link-hover-color: var(--color-background-highlight); }
.has-background-highlight-alt-link-hover-color { --link-hover-color: var(--color-background-highlight-alt); }
.has-background-feedback-info-link-hover-color { --link-hover-color: var(--color-background-feedback-info); }
.has-background-feedback-info-accent-link-hover-color { --link-hover-color: var(--color-background-feedback-info-accent); }
.has-action-primary-link-hover-color { --link-hover-color: var(--color-action-primary); }
.has-action-primary-hover-link-hover-color { --link-hover-color: var(--color-action-primary-hover); }
.has-action-accent-link-hover-color { --link-hover-color: var(--color-action-accent); }
.has-action-accent-hover-link-hover-color { --link-hover-color: var(--color-action-accent-hover); }
.has-text-heading-link-hover-color { --link-hover-color: var(--color-text-heading); }
.has-text-body-link-hover-color { --link-hover-color: var(--color-text-body); }
.has-text-muted-link-hover-color { --link-hover-color: var(--color-text-muted); }
.has-text-eyebrow-link-hover-color { --link-hover-color: var(--color-text-eyebrow); }
.has-border-subtle-link-hover-color { --link-hover-color: var(--color-border-subtle); }
.has-border-strong-link-hover-color { --link-hover-color: var(--color-border-strong); }
.has-border-strongest-link-hover-color { --link-hover-color: var(--color-border-strongest); }
.has-icon-brand-lightest-link-hover-color { --link-hover-color: var(--color-icon-brand-lightest); }
.has-icon-brand-light-link-hover-color { --link-hover-color: var(--color-icon-brand-light); }
.has-icon-brand-medium-link-hover-color { --link-hover-color: var(--color-icon-brand-medium); }
.has-background-page-overlay-color { --overlay-color: var(--color-background-page); }
.has-background-highlight-overlay-color { --overlay-color: var(--color-background-highlight); }
.has-background-highlight-alt-overlay-color { --overlay-color: var(--color-background-highlight-alt); }
.has-background-feedback-info-overlay-color { --overlay-color: var(--color-background-feedback-info); }
.has-background-feedback-info-accent-overlay-color { --overlay-color: var(--color-background-feedback-info-accent); }
.has-action-primary-overlay-color { --overlay-color: var(--color-action-primary); }
.has-action-primary-hover-overlay-color { --overlay-color: var(--color-action-primary-hover); }
.has-action-accent-overlay-color { --overlay-color: var(--color-action-accent); }
.has-action-accent-hover-overlay-color { --overlay-color: var(--color-action-accent-hover); }
.has-text-heading-overlay-color { --overlay-color: var(--color-text-heading); }
.has-text-body-overlay-color { --overlay-color: var(--color-text-body); }
.has-text-muted-overlay-color { --overlay-color: var(--color-text-muted); }
.has-text-eyebrow-overlay-color { --overlay-color: var(--color-text-eyebrow); }
.has-border-subtle-overlay-color { --overlay-color: var(--color-border-subtle); }
.has-border-strong-overlay-color { --overlay-color: var(--color-border-strong); }
.has-border-strongest-overlay-color { --overlay-color: var(--color-border-strongest); }
.has-icon-brand-lightest-overlay-color { --overlay-color: var(--color-icon-brand-lightest); }
.has-icon-brand-light-overlay-color { --overlay-color: var(--color-icon-brand-light); }
.has-icon-brand-medium-overlay-color { --overlay-color: var(--color-icon-brand-medium); }
.has-background-page-trigger-text-color { --trigger-text-color: var(--color-background-page); }
.has-background-highlight-trigger-text-color { --trigger-text-color: var(--color-background-highlight); }
.has-background-highlight-alt-trigger-text-color { --trigger-text-color: var(--color-background-highlight-alt); }
.has-background-feedback-info-trigger-text-color { --trigger-text-color: var(--color-background-feedback-info); }
.has-background-feedback-info-accent-trigger-text-color { --trigger-text-color: var(--color-background-feedback-info-accent); }
.has-action-primary-trigger-text-color { --trigger-text-color: var(--color-action-primary); }
.has-action-primary-hover-trigger-text-color { --trigger-text-color: var(--color-action-primary-hover); }
.has-action-accent-trigger-text-color { --trigger-text-color: var(--color-action-accent); }
.has-action-accent-hover-trigger-text-color { --trigger-text-color: var(--color-action-accent-hover); }
.has-text-heading-trigger-text-color { --trigger-text-color: var(--color-text-heading); }
.has-text-body-trigger-text-color { --trigger-text-color: var(--color-text-body); }
.has-text-muted-trigger-text-color { --trigger-text-color: var(--color-text-muted); }
.has-text-eyebrow-trigger-text-color { --trigger-text-color: var(--color-text-eyebrow); }
.has-border-subtle-trigger-text-color { --trigger-text-color: var(--color-border-subtle); }
.has-border-strong-trigger-text-color { --trigger-text-color: var(--color-border-strong); }
.has-border-strongest-trigger-text-color { --trigger-text-color: var(--color-border-strongest); }
.has-icon-brand-lightest-trigger-text-color { --trigger-text-color: var(--color-icon-brand-lightest); }
.has-icon-brand-light-trigger-text-color { --trigger-text-color: var(--color-icon-brand-light); }
.has-icon-brand-medium-trigger-text-color { --trigger-text-color: var(--color-icon-brand-medium); }
.has-caption-link-font-size { --link-font-size: var(--font-size-3); }
.has-body-sm-link-font-size { --link-font-size: var(--font-size-3-5); }
.has-body-md-link-font-size { --link-font-size: var(--font-size-4); }
.has-body-lg-link-font-size { --link-font-size: var(--font-size-5); }
.has-title-xs-link-font-size { --link-font-size: var(--font-size-6); }
.has-title-sm-link-font-size { --link-font-size: var(--font-size-7); }
.has-title-md-link-font-size { --link-font-size: var(--font-size-9); }
.has-title-lg-link-font-size { --link-font-size: var(--font-size-11); }
.has-title-xl-link-font-size { --link-font-size: var(--font-size-15); }
.has-title-2-xl-link-font-size { --link-font-size: var(--font-size-18); }
.has-sm-icon-size { --icon-size: var(--icon-size-sm); }
.has-md-icon-size { --icon-size: var(--icon-size-md); }
.has-lg-icon-size { --icon-size: var(--icon-size-lg); }
.has-xl-icon-size { --icon-size: var(--icon-size-xl); }
.has-4-xs-padding-block-start { -webkit-padding-before: var(--spacing-4xs); padding-block-start: var(--spacing-4xs); }
.has-3-xs-padding-block-start { -webkit-padding-before: var(--spacing-3xs); padding-block-start: var(--spacing-3xs); }
.has-2-xs-padding-block-start { -webkit-padding-before: var(--spacing-2xs); padding-block-start: var(--spacing-2xs); }
.has-xs-padding-block-start { -webkit-padding-before: var(--spacing-xs); padding-block-start: var(--spacing-xs); }
.has-sm-padding-block-start { -webkit-padding-before: var(--spacing-sm); padding-block-start: var(--spacing-sm); }
.has-md-padding-block-start { -webkit-padding-before: var(--spacing-md); padding-block-start: var(--spacing-md); }
.has-lg-padding-block-start { -webkit-padding-before: var(--spacing-lg); padding-block-start: var(--spacing-lg); }
.has-xl-padding-block-start { -webkit-padding-before: var(--spacing-xl); padding-block-start: var(--spacing-xl); }
.has-2-xl-padding-block-start { -webkit-padding-before: var(--spacing-2xl); padding-block-start: var(--spacing-2xl); }
.has-4-xs-padding-block-end { -webkit-padding-after: var(--spacing-4xs); padding-block-end: var(--spacing-4xs); }
.has-3-xs-padding-block-end { -webkit-padding-after: var(--spacing-3xs); padding-block-end: var(--spacing-3xs); }
.has-2-xs-padding-block-end { -webkit-padding-after: var(--spacing-2xs); padding-block-end: var(--spacing-2xs); }
.has-xs-padding-block-end { -webkit-padding-after: var(--spacing-xs); padding-block-end: var(--spacing-xs); }
.has-sm-padding-block-end { -webkit-padding-after: var(--spacing-sm); padding-block-end: var(--spacing-sm); }
.has-md-padding-block-end { -webkit-padding-after: var(--spacing-md); padding-block-end: var(--spacing-md); }
.has-lg-padding-block-end { -webkit-padding-after: var(--spacing-lg); padding-block-end: var(--spacing-lg); }
.has-xl-padding-block-end { -webkit-padding-after: var(--spacing-xl); padding-block-end: var(--spacing-xl); }
.has-2-xl-padding-block-end { -webkit-padding-after: var(--spacing-2xl); padding-block-end: var(--spacing-2xl); }
.has-4-xs-padding-inline-start { -webkit-padding-start: var(--spacing-4xs); padding-inline-start: var(--spacing-4xs); }
.has-3-xs-padding-inline-start { -webkit-padding-start: var(--spacing-3xs); padding-inline-start: var(--spacing-3xs); }
.has-2-xs-padding-inline-start { -webkit-padding-start: var(--spacing-2xs); padding-inline-start: var(--spacing-2xs); }
.has-xs-padding-inline-start { -webkit-padding-start: var(--spacing-xs); padding-inline-start: var(--spacing-xs); }
.has-sm-padding-inline-start { -webkit-padding-start: var(--spacing-sm); padding-inline-start: var(--spacing-sm); }
.has-md-padding-inline-start { -webkit-padding-start: var(--spacing-md); padding-inline-start: var(--spacing-md); }
.has-lg-padding-inline-start { -webkit-padding-start: var(--spacing-lg); padding-inline-start: var(--spacing-lg); }
.has-xl-padding-inline-start { -webkit-padding-start: var(--spacing-xl); padding-inline-start: var(--spacing-xl); }
.has-2-xl-padding-inline-start { -webkit-padding-start: var(--spacing-2xl); padding-inline-start: var(--spacing-2xl); }
.has-4-xs-padding-inline-end { -webkit-padding-end: var(--spacing-4xs); padding-inline-end: var(--spacing-4xs); }
.has-3-xs-padding-inline-end { -webkit-padding-end: var(--spacing-3xs); padding-inline-end: var(--spacing-3xs); }
.has-2-xs-padding-inline-end { -webkit-padding-end: var(--spacing-2xs); padding-inline-end: var(--spacing-2xs); }
.has-xs-padding-inline-end { -webkit-padding-end: var(--spacing-xs); padding-inline-end: var(--spacing-xs); }
.has-sm-padding-inline-end { -webkit-padding-end: var(--spacing-sm); padding-inline-end: var(--spacing-sm); }
.has-md-padding-inline-end { -webkit-padding-end: var(--spacing-md); padding-inline-end: var(--spacing-md); }
.has-lg-padding-inline-end { -webkit-padding-end: var(--spacing-lg); padding-inline-end: var(--spacing-lg); }
.has-xl-padding-inline-end { -webkit-padding-end: var(--spacing-xl); padding-inline-end: var(--spacing-xl); }
.has-2-xl-padding-inline-end { -webkit-padding-end: var(--spacing-2xl); padding-inline-end: var(--spacing-2xl); }
.has-4-xs-margin-block-start { -webkit-margin-before: var(--spacing-4xs); margin-block-start: var(--spacing-4xs); }
.has-3-xs-margin-block-start { -webkit-margin-before: var(--spacing-3xs); margin-block-start: var(--spacing-3xs); }
.has-2-xs-margin-block-start { -webkit-margin-before: var(--spacing-2xs); margin-block-start: var(--spacing-2xs); }
.has-xs-margin-block-start { -webkit-margin-before: var(--spacing-xs); margin-block-start: var(--spacing-xs); }
.has-sm-margin-block-start { -webkit-margin-before: var(--spacing-sm); margin-block-start: var(--spacing-sm); }
.has-md-margin-block-start { -webkit-margin-before: var(--spacing-md); margin-block-start: var(--spacing-md); }
.has-lg-margin-block-start { -webkit-margin-before: var(--spacing-lg); margin-block-start: var(--spacing-lg); }
.has-xl-margin-block-start { -webkit-margin-before: var(--spacing-xl); margin-block-start: var(--spacing-xl); }
.has-2-xl-margin-block-start { -webkit-margin-before: var(--spacing-2xl); margin-block-start: var(--spacing-2xl); }
.has-4-xs-margin-block-end { -webkit-margin-after: var(--spacing-4xs); margin-block-end: var(--spacing-4xs); }
.has-3-xs-margin-block-end { -webkit-margin-after: var(--spacing-3xs); margin-block-end: var(--spacing-3xs); }
.has-2-xs-margin-block-end { -webkit-margin-after: var(--spacing-2xs); margin-block-end: var(--spacing-2xs); }
.has-xs-margin-block-end { -webkit-margin-after: var(--spacing-xs); margin-block-end: var(--spacing-xs); }
.has-sm-margin-block-end { -webkit-margin-after: var(--spacing-sm); margin-block-end: var(--spacing-sm); }
.has-md-margin-block-end { -webkit-margin-after: var(--spacing-md); margin-block-end: var(--spacing-md); }
.has-lg-margin-block-end { -webkit-margin-after: var(--spacing-lg); margin-block-end: var(--spacing-lg); }
.has-xl-margin-block-end { -webkit-margin-after: var(--spacing-xl); margin-block-end: var(--spacing-xl); }
.has-2-xl-margin-block-end { -webkit-margin-after: var(--spacing-2xl); margin-block-end: var(--spacing-2xl); }
.has-4-xs-margin-inline-start { -webkit-margin-start: var(--spacing-4xs); margin-inline-start: var(--spacing-4xs); }
.has-3-xs-margin-inline-start { -webkit-margin-start: var(--spacing-3xs); margin-inline-start: var(--spacing-3xs); }
.has-2-xs-margin-inline-start { -webkit-margin-start: var(--spacing-2xs); margin-inline-start: var(--spacing-2xs); }
.has-xs-margin-inline-start { -webkit-margin-start: var(--spacing-xs); margin-inline-start: var(--spacing-xs); }
.has-sm-margin-inline-start { -webkit-margin-start: var(--spacing-sm); margin-inline-start: var(--spacing-sm); }
.has-md-margin-inline-start { -webkit-margin-start: var(--spacing-md); margin-inline-start: var(--spacing-md); }
.has-lg-margin-inline-start { -webkit-margin-start: var(--spacing-lg); margin-inline-start: var(--spacing-lg); }
.has-xl-margin-inline-start { -webkit-margin-start: var(--spacing-xl); margin-inline-start: var(--spacing-xl); }
.has-2-xl-margin-inline-start { -webkit-margin-start: var(--spacing-2xl); margin-inline-start: var(--spacing-2xl); }
.has-4-xs-margin-inline-end { -webkit-margin-end: var(--spacing-4xs); margin-inline-end: var(--spacing-4xs); }
.has-3-xs-margin-inline-end { -webkit-margin-end: var(--spacing-3xs); margin-inline-end: var(--spacing-3xs); }
.has-2-xs-margin-inline-end { -webkit-margin-end: var(--spacing-2xs); margin-inline-end: var(--spacing-2xs); }
.has-xs-margin-inline-end { -webkit-margin-end: var(--spacing-xs); margin-inline-end: var(--spacing-xs); }
.has-sm-margin-inline-end { -webkit-margin-end: var(--spacing-sm); margin-inline-end: var(--spacing-sm); }
.has-md-margin-inline-end { -webkit-margin-end: var(--spacing-md); margin-inline-end: var(--spacing-md); }
.has-lg-margin-inline-end { -webkit-margin-end: var(--spacing-lg); margin-inline-end: var(--spacing-lg); }
.has-xl-margin-inline-end { -webkit-margin-end: var(--spacing-xl); margin-inline-end: var(--spacing-xl); }
.has-2-xl-margin-inline-end { -webkit-margin-end: var(--spacing-2xl); margin-inline-end: var(--spacing-2xl); }
.has-subtle-border-top-left-radius { border-top-left-radius: var(--border-radius-subtle); }
.has-default-border-top-left-radius { border-top-left-radius: var(--border-radius-default); }
.has-prominent-border-top-left-radius { border-top-left-radius: var(--border-radius-prominent); }
.has-pill-border-top-left-radius { border-top-left-radius: var(--border-radius-pill); }
.has-subtle-border-top-right-radius { border-top-right-radius: var(--border-radius-subtle); }
.has-default-border-top-right-radius { border-top-right-radius: var(--border-radius-default); }
.has-prominent-border-top-right-radius { border-top-right-radius: var(--border-radius-prominent); }
.has-pill-border-top-right-radius { border-top-right-radius: var(--border-radius-pill); }
.has-subtle-border-bottom-left-radius { border-bottom-left-radius: var(--border-radius-subtle); }
.has-default-border-bottom-left-radius { border-bottom-left-radius: var(--border-radius-default); }
.has-prominent-border-bottom-left-radius { border-bottom-left-radius: var(--border-radius-prominent); }
.has-pill-border-bottom-left-radius { border-bottom-left-radius: var(--border-radius-pill); }
.has-subtle-border-bottom-right-radius { border-bottom-right-radius: var(--border-radius-subtle); }
.has-default-border-bottom-right-radius { border-bottom-right-radius: var(--border-radius-default); }
.has-prominent-border-bottom-right-radius { border-bottom-right-radius: var(--border-radius-prominent); }
.has-pill-border-bottom-right-radius { border-bottom-right-radius: var(--border-radius-pill); }
}
@layer base{

/* Tailwind CSS Preflight v3.4
 * https://unpkg.com/tailwindcss@3.4.14/src/css/preflight.css
 *
 * MIT License — Copyright (c) Tailwind Labs, Inc. */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent; /* 4 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-size: 1em; /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
Remove the default background on mark elements.
*/

mark {
  background: transparent;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
}
@layer base{

/**
 * Custom base-layer styles loaded after Tailwind Preflight (preflight.css).
 * Use this for global normalizations Preflight does not include.
 *
 * Tables — Preflight only sets text-indent, border-color, and border-collapse on
 * `table`. User-agent styles still apply bold, centered `th`, etc. These rules
 * reset structure and typography so block/component CSS controls layout.
 *
 * Note: CMS block `style.css` files sync to Rails; jweb/table-specific layout
 * stays in blocks/custom/table/style.css. This file is frontend-only (not bundled
 * in the WordPress theme).
 */

table {
	margin: 0;
	padding: 0;
	border: none;
	border-spacing: 0;
	font: inherit;
	color: inherit;
}

thead,
tbody,
tfoot,
tr {
	margin: 0;
	padding: 0;
	border: none;
}

th,
td {
	border: none;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	text-align: inherit;
	vertical-align: inherit;
}
}
@layer base{

/* Auto-generated by Style Dictionary — do not edit.
 * Rails equivalent of theme.json styles.elements.
 * Both outputs derive from the same token dictionary. */

body {
  font-family: var(--font-family-sans), system-ui, sans-serif;
  font-size: var(--text-body-md-font-size);
  color: var(--color-text-body);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-heading);
  margin: 0;
}

a {
  color: var(--color-action-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-action-primary-hover);
}

h1 {
  font-family: var(--text-title-2xl-font-family);
  font-size: var(--text-title-2xl-font-size);
  font-weight: var(--text-title-2xl-font-weight);
  line-height: var(--text-title-2xl-line-height);
  letter-spacing: var(--text-title-2xl-letter-spacing);
}

h2 {
  font-family: var(--text-title-xl-font-family);
  font-size: clamp(var(--font-size-9), 0.865rem + 2.885vw, var(--text-title-xl-font-size));
  font-weight: var(--text-title-xl-font-weight);
  line-height: var(--text-title-xl-line-height);
  letter-spacing: var(--text-title-xl-letter-spacing);
}

h3 {
  font-family: var(--text-title-lg-font-family);
  font-size: var(--text-title-lg-font-size);
  font-weight: var(--text-title-lg-font-weight);
  line-height: var(--text-title-lg-line-height);
  letter-spacing: var(--text-title-lg-letter-spacing);
}

h4 {
  font-family: var(--text-title-md-font-family);
  font-size: var(--text-title-md-font-size);
  font-weight: var(--text-title-md-font-weight);
  line-height: var(--text-title-md-line-height);
  letter-spacing: var(--text-title-md-letter-spacing);
}

h5 {
  font-family: var(--text-title-sm-font-family);
  font-size: var(--text-title-sm-font-size);
  font-weight: var(--text-title-sm-font-weight);
  line-height: var(--text-title-sm-line-height);
  letter-spacing: var(--text-title-sm-letter-spacing);
}

h6 {
  font-family: var(--text-title-xs-font-family);
  font-size: var(--text-title-xs-font-size);
  font-weight: var(--text-title-xs-font-weight);
  line-height: var(--text-title-xs-line-height);
  letter-spacing: var(--text-title-xs-letter-spacing);
}
}
@layer layouts{

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

.cms-content {
  margin: var(--spacing-lg) auto;
}
.ds-header {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-subtle);
}

.ds-header__logo {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.ds-header__logo svg {
  width: 40px;
  height: auto;
}

.ds-footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-top: 1px solid var(--color-border-subtle);
  margin-top: auto;
}

.ds-footer__logo {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.ds-footer__copy {
  margin: 0;
  font-size: var(--text-body-sm-font-size);
  color: var(--color-text-secondary);
}
}
@layer utilities{

/**
 * Auto-generated by the token build. Do not edit.
 * Source: apps/design-tokens/style-dictionary/formats/helpers/layout-utilities.js
 *
 * To verify against WordPress output, run:
 *   task cms:cli -- jweb export-layout-styles --url=core.jane.local
 */

/* Flow layout: vertical stack with gap between children */
:root :where(.is-layout-flow) > :first-child{-webkit-margin-before: 0;margin-block-start: 0;}
:root :where(.is-layout-flow) > :last-child{-webkit-margin-after: 0;margin-block-end: 0;}
:root :where(.is-layout-flow) > *{-webkit-margin-before: 1.2rem;margin-block-start: 1.2rem;-webkit-margin-after: 0;margin-block-end: 0;}

/* Constrained layout: same vertical gap as flow (width constraints added below) */
:root :where(.is-layout-constrained) > :first-child{-webkit-margin-before: 0;margin-block-start: 0;}
:root :where(.is-layout-constrained) > :last-child{-webkit-margin-after: 0;margin-block-end: 0;}
:root :where(.is-layout-constrained) > *{-webkit-margin-before: 1.2rem;margin-block-start: 1.2rem;-webkit-margin-after: 0;margin-block-end: 0;}

/* Flex layout: horizontal row with wrapping */
:root :where(.is-layout-flex){gap: 1.2rem;}
body .is-layout-flex{display: flex;}
.is-layout-flex{flex-wrap: wrap;align-items: center;}
.is-layout-flex > :is(*, div){margin: 0;}

/* Grid layout */
:root :where(.is-layout-grid){gap: 1.2rem;}
body .is-layout-grid{display: grid;}
.is-layout-grid > :is(*, div){margin: 0;}

/* Columns block: margin resets for nested flow/constrained layouts */
:root :where(.block-columns-is-layout-flow) > :first-child{-webkit-margin-before: 0;margin-block-start: 0;}
:root :where(.block-columns-is-layout-flow) > :last-child{-webkit-margin-after: 0;margin-block-end: 0;}
:root :where(.block-columns-is-layout-constrained) > :first-child{-webkit-margin-before: 0;margin-block-start: 0;}
:root :where(.block-columns-is-layout-constrained) > :last-child{-webkit-margin-after: 0;margin-block-end: 0;}

/* Constrained alignment: cap children to content width, allow wide/full breakouts */
:where(.is-layout-constrained) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--layout-content);
	margin-left: auto !important;
	margin-right: auto !important;
}
:where(.is-layout-constrained) > .alignwide {
	max-width: var(--layout-wide);
}
:where(.is-layout-constrained) .alignfull {
	max-width: none;
}
}
/* Auto-generated by sync-block-stylesheets.js — do not edit */
@layer components{

/**
 * Figma Core Tokens 2.0 — Button styles
 * https://www.figma.com/design/qgpcmYXnDBzv1VssJldSOe/
 * Primary: 9040:52280 default, 9040:52356 hover, 9040:52428 active, 9040:52500 disabled.
 * Secondary: 9040:52308 default, 9040:52380 hover, 9040:52452 active, 9040:52524 disabled.
 * Tertiary: 9040:52332 default, 9040:52404 hover, 9040:52476 active, 9040:52546 disabled.
 */

/* --- Variant tokens --------------------------------------------------- */

.core-button.is-style-primary,
.wp-block-button.is-style-primary,
.core-button,
.wp-block-button {
  --core-button-transition-duration: 0.15s;
  --core-button-transition-ease: ease;
  --btn-bg: var(--color-brand-80);
  --btn-color: var(--color-neutral-0);
  --btn-border-color: transparent;
  --btn-padding: var(--spacing-3xs) var(--spacing-xs);
  --btn-font-weight: var(--font-weight-semibold);
}

.core-button.is-style-secondary,
.wp-block-button.is-style-secondary {
  --core-button-transition-duration: 0.15s;
  --core-button-transition-ease: ease;
  --btn-bg: rgb(255 255 255 / 0.15);
  --btn-color: var(--color-action-primary-press);
  --btn-border-color: var(--color-brand-20);
  --btn-padding: var(--spacing-3xs) var(--spacing-xs);
  --btn-font-weight: var(--font-weight-regular);
}

.core-button.is-style-tertiary,
.wp-block-button.is-style-tertiary {
  --core-button-transition-duration: 0.15s;
  --core-button-transition-ease: ease;
  --btn-bg: transparent;
  --btn-color: var(--color-action-primary-press);
  --btn-border-color: transparent;
  --btn-padding: var(--spacing-3xs) 0;
  --btn-font-weight: var(--font-weight-regular);
}

/* --- Frontend base ---------------------------------------------------- */

.core-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: var(--border-width-sm) solid var(--btn-border-color);
  border-radius: var(--border-radius-subtle);
  background-color: var(--btn-bg);
  color: var(--btn-color);
  cursor: pointer;
  transition:
    background-color var(--core-button-transition-duration) var(--core-button-transition-ease),
    color var(--core-button-transition-duration) var(--core-button-transition-ease),
    border-color var(--core-button-transition-duration) var(--core-button-transition-ease);
}

.core-button :is(a, button, .block-button__link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: var(--btn-padding);
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-weight: var(--btn-font-weight);
  line-height: var(--text-body-md-line-height);
  letter-spacing: var(--text-body-md-letter-spacing);
  text-decoration: none;
  cursor: pointer;
  gap: var(--spacing-4xs);
}

/* --- Frontend hover states -------------------------------------------- */

.core-button.is-style-primary:hover:not(:has(:disabled)):not(:has([aria-disabled="true"])),
.core-button:hover:not(:has(:disabled)):not(:has([aria-disabled="true"])) {
  background-color: var(--color-action-primary-hover);
  color: var(--color-text-on-action-primary-hover);
}

.core-button.is-style-secondary:hover:not(:has(:disabled)):not(:has([aria-disabled="true"])) {
  background-color: var(--color-background-highlight);
  color: var(--color-action-primary-press);
  border-color: var(--color-brand-20);
}

.core-button.is-style-tertiary:hover:not(:has(:disabled)):not(:has([aria-disabled="true"])) {
  color: var(--color-action-primary-press);
  background-color: transparent;
}

.core-button.is-style-tertiary:hover:not(:has(:disabled)):not(:has([aria-disabled="true"])) :is(a, button, .block-button__link) {
  text-decoration: underline;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-underline-offset: 0.12em;
}

/* --- Frontend focus-visible states ------------------------------------ */

.core-button.is-style-primary:has(:is(a, button, .block-button__link):focus-visible:not(:disabled):not([aria-disabled="true"])) {
  background-color: var(--color-action-primary-press);
  color: var(--color-text-on-action-primary-press);
}

.core-button.is-style-secondary:has(:is(a, button, .block-button__link):focus-visible:not(:disabled):not([aria-disabled="true"])) {
  background-color: var(--color-background-highlight-alt);
}

.core-button.is-style-tertiary:has(:is(a, button, .block-button__link):focus-visible:not(:disabled):not([aria-disabled="true"])) :is(a, button, .block-button__link) {
  text-decoration: underline;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-underline-offset: 0.12em;
}

/* --- Frontend disabled states ----------------------------------------- */

.core-button:has(:disabled),
.core-button:has([aria-disabled="true"]) {
  pointer-events: none;
  cursor: not-allowed;
}

.core-button.is-style-primary:has(:disabled),
.core-button.is-style-primary:has([aria-disabled="true"]),
.core-button:has(:disabled),
.core-button:has([aria-disabled="true"]) {
  background-color: var(--color-neutral-20);
  color: var(--color-neutral-50);
  border-color: transparent;
}

.core-button.is-style-primary:has(:disabled) :is(a, button),
.core-button.is-style-primary:has([aria-disabled="true"]) :is(a, button),
.core-button:has(:disabled) :is(a, button),
.core-button:has([aria-disabled="true"]) :is(a, button) {
  font-weight: var(--font-weight-regular);
}

.core-button.is-style-secondary:has(:disabled),
.core-button.is-style-secondary:has([aria-disabled="true"]) {
  background-color: transparent;
  border-color: var(--color-neutral-50);
  color: var(--color-neutral-50);
}

.core-button.is-style-tertiary:has(:disabled),
.core-button.is-style-tertiary:has([aria-disabled="true"]) {
  background-color: transparent;
  color: var(--color-neutral-50);
  border-color: transparent;
}

.core-button.is-style-tertiary:has(:disabled) :is(a, button),
.core-button.is-style-tertiary:has([aria-disabled="true"]) :is(a, button) {
  text-decoration: none;
}

/* --- Frontend custom color overrides ---------------------------------- */

.core-button.has-text-color {
  color: inherit;
}

/* --- Frontend reduced motion ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .core-button {
    transition: none;
  }
}

/* --- Frontend icon sizing --------------------------------------------- */

.core-button__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.core-button__icon svg {
  display: block;
  width: var(--icon-size, var(--icon-size-sm));
  height: var(--icon-size, var(--icon-size-sm));
}

.core-button.has-small-icon-size { --icon-size: var(--icon-size-sm); }
.core-button.has-medium-icon-size { --icon-size: var(--icon-size-md); }
.core-button.has-large-icon-size { --icon-size: var(--icon-size-lg); }
.core-button.has-extra-large-icon-size { --icon-size: var(--icon-size-xl); }
}
@layer components{

/* Mobile stack: collapse grid to a single column below tablet. */

@media (max-width: 767px) {
  .core-group.is-mobile-stack,
  .wp-block-group.is-mobile-stack {
    grid-template-columns: 1fr !important;
  }

  .core-group.is-mobile-stack > *,
  .wp-block-group.is-mobile-stack > * {
    grid-column: auto !important;
  }
}

/*
 * Testimonial Card style for core/group.
 *
 * Replaces the auto-fill grid with an explicit two-column layout that
 * stacks below the tablet breakpoint. overflow:hidden + uniform
 * border-radius on the parent means child positioning determines which
 * corners are visually rounded — no per-breakpoint corner logic needed.
 *
 * !important is used on properties that must override:
 *   - unlayered block support <style> (grid-template-columns, grid-column)
 *   - editor-set inline styles (border-radius, aspect-ratio)
 */

.core-group.is-style-testimonial-card,
.wp-block-group.is-style-testimonial-card {
  overflow: hidden;
  border-radius: var(--border-radius-default) !important;
  grid-template-columns: 1fr !important;
}

@media (min-width: 768px) {
  .core-group.is-style-testimonial-card,
  .wp-block-group.is-style-testimonial-card {
    grid-template-columns: 2fr 3fr !important;
  }
}

.core-group.is-style-testimonial-card > *,
.wp-block-group.is-style-testimonial-card > * {
  grid-column: auto !important;
}

.core-group.is-style-testimonial-card > .core-image,
.wp-block-group.is-style-testimonial-card > .wp-block-image {
  overflow: hidden;
}

.core-group.is-style-testimonial-card > .core-image img,
.wp-block-group.is-style-testimonial-card > .wp-block-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0 !important;
  aspect-ratio: auto;
}

@media (max-width: 767px) {
  .core-group.is-style-testimonial-card > .core-image img,
  .wp-block-group.is-style-testimonial-card > .wp-block-image img {
    aspect-ratio: 3/2 !important;
    /* height: 100%; */
  }
}

/*
 * "Stack on mobile" toggle for core/group.
 *
 * Forces any grid layout to a single column below the tablet breakpoint,
 * regardless of the column count set in manual grid mode.
 */
@media (max-width: 767px) {
  .core-group.is-mobile-stack,
  .wp-block-group.is-mobile-stack {
    grid-template-columns: 1fr !important;
  }

  .core-group.is-mobile-stack > *,
  .wp-block-group.is-mobile-stack > * {
    grid-column: auto !important;
  }
}
}
@layer components{
.core-image img,
.wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
}
}
@layer components{
/* Restore bullets + indent (preflight resets list-style to none) */
ul.core-list,
ul.wp-block-list {
  list-style: disc;
  -webkit-padding-start: var(--spacing-sm);
          padding-inline-start: var(--spacing-sm);
}

/* Restore decimal numbering + indent. OL type variations (upper-alpha etc.)
   are passed through as inline list-style-type via wrapperStyle. */
ol.core-list,
ol.wp-block-list {
  list-style: decimal;
  -webkit-padding-start: var(--spacing-sm);
          padding-inline-start: var(--spacing-sm);
}

/* List spacing */
.core-list li:not(:first-child),
.wp-block-list li:not(:first-child) {
  margin-top: var(--spacing-3xs);
}

/* Checkmark icon list spacing */
ul.core-list.is-style-checkmark-list li:not(:first-child),
ul.wp-block-list.is-style-checkmark-list li:not(:first-child) {
  margin-top: var(--spacing-xs);
}

/* Checkmark icon list -- ul only, no effect on ol */
ul.core-list.is-style-checkmark-list,
ul.wp-block-list.is-style-checkmark-list {
  list-style: none;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

ul.core-list.is-style-checkmark-list li,
ul.wp-block-list.is-style-checkmark-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
}

ul.core-list.is-style-checkmark-list li::before,
ul.wp-block-list.is-style-checkmark-list li::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  margin-top: 4px;  /* Nudge down Checkmark icon for alignment */
  background-color: var(--color-brand-50);
  -webkit-mask: var(--icon-svg-general--check-2) no-repeat center / contain;
  mask: var(--icon-svg-general--check-2) no-repeat center / contain;
}
}
@layer components{

/*
 * Core/Media-Text block styles.
 *
 * Two-column media + text layout driven by WordPress wrapperClasses and
 * wrapperStyle. The --media-width custom property is set as an inline
 * style by WordPress (e.g. --media-width: 40%) and consumed here via
 * var(--media-width, 50%).
 *
 * Dual selectors: .core-media-text (Rails) / .wp-block-media-text (WP editor).
 */

.core-media-text,
.wp-block-media-text {
  --media-text-fill-min-height: 250px;
  display: grid;
  grid-template-columns: var(--media-width, 50%) 1fr;
  gap: var(--spacing-md);
  align-items: center;
}

.core-media-text__media,
.wp-block-media-text__media {
  margin: 0;
}

.core-media-text__media img,
.wp-block-media-text__media img {
  display: block;
  max-width: 100%;
  height: auto;
}

.core-media-text__media video,
.wp-block-media-text__media video {
  display: block;
  max-width: 100%;
}

.core-media-text.has-media-on-the-right,
.wp-block-media-text.has-media-on-the-right {
  grid-template-columns: 1fr var(--media-width, 50%);
}

.core-media-text.has-media-on-the-right .core-media-text__media,
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
  order: 1;
}

.core-media-text.is-image-fill .core-media-text__media,
.wp-block-media-text.is-image-fill .wp-block-media-text__media {
  height: 100%;
  min-height: var(--media-text-fill-min-height);
}

.core-media-text.is-image-fill .core-media-text__media img,
.wp-block-media-text.is-image-fill .wp-block-media-text__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.core-media-text.is-vertically-aligned-top,
.wp-block-media-text.is-vertically-aligned-top {
  align-items: start;
}

.core-media-text.is-vertically-aligned-center,
.wp-block-media-text.is-vertically-aligned-center {
  align-items: center;
}

.core-media-text.is-vertically-aligned-bottom,
.wp-block-media-text.is-vertically-aligned-bottom {
  align-items: end;
}

/*
 * Mobile stacking.
 *
 * !important is needed because WordPress emits an unlayered inline
 * grid-template-columns style via wrapperStyle (e.g.
 * style="--media-width:40%"). The block stylesheet sits in
 * layer(components), which loses to any unlayered declaration.
 * This mirrors the approach in core/group/style.css.
 */
@media (max-width: 767px) {
  .core-media-text.is-stacked-on-mobile,
  .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 1fr !important;
  }

  .core-media-text.is-stacked-on-mobile .core-media-text__media,
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
    order: unset;
  }
}
}
@layer components{
:where(:not(.is-layout-flow, .is-layout-constrained, .is-layout-flex, .is-layout-grid))
  > .core-paragraph + .core-paragraph,
:where(:not(.is-layout-flow, .is-layout-constrained, .is-layout-flex, .is-layout-grid))
  > p + p {
  margin-top: var(--spacing-xs);
}
}
@layer components{

.jweb-accordion-media {
	--content-max-width: 470px;
	--media-height-default: 625px;
	--transition-duration: 0.3s;
	--transition-easing: ease-out;

	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-sm);
	align-items: start;
}

.jweb-accordion-media__media-panel {
	display: none;
}

@media (min-width: 768px) {
	.jweb-accordion-media {
		grid-template-columns: 1fr 1fr;
	}

	.jweb-accordion-media__content {
		max-width: var(--content-max-width);
	}

	.jweb-accordion-media__media-panel {
		display: block;
		position: relative;
		width: 100%;
		height: var(--media-height, var(--media-height-default));
		border-radius: var(--border-radius-md);
		overflow: hidden;
		align-self: end;
	}

	.jweb-accordion-media__media {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
		opacity: 0;
		transition: opacity var(--transition-duration) var(--transition-easing);
	}

	.jweb-accordion-media__media.active {
		opacity: 1;
	}
}
}
@layer components{

.jweb-accordion-media-item {
	--transition-duration: 0.2s;
	--transition-easing: ease-out;

	display: flex;
	gap: var(--spacing-sm);
	padding-block: var(--spacing-4xs);
}

	.jweb-accordion-media-item  > .jweb-accordion-media-item-content {
		flex: 1 1 0%;
		min-width: 0;
	}

	.jweb-accordion-media-item  > .jweb-accordion-media-item__media {
		display: none;
	}

	.jweb-accordion-media-item  > .jweb-accordion-media-item__media img {
		width: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
		border-radius: var(--border-radius-md);
		aspect-ratio: 4 / 3;
	}

@media (max-width: 767px) {
	.jweb-accordion-media-item {
		flex-direction: column;
	}

		.jweb-accordion-media-item  > .jweb-accordion-media-item__media {
			display: grid;
			grid-template-rows: 0fr;
			overflow: hidden;
			opacity: 0;
			transition: grid-template-rows var(--transition-duration) var(--transition-easing), opacity var(--transition-duration) var(--transition-easing);
		}

		.jweb-accordion-media-item  > .jweb-accordion-media-item__media > * {
			min-height: 0;
		}

		.jweb-accordion-media-item.accordion-active > .jweb-accordion-media-item__media {
			grid-template-rows: 1fr;
			opacity: 1;
		}
}
}
@layer components{

.jweb-accordion-media-item-content {
	--transition-duration: 0.2s;
	--transition-easing: ease-out;
	--chevron-easing: ease;
}

	.jweb-accordion-media-item-content  > .jweb-accordion-media-item-content__title {
		display: flex;
		align-items: flex-start;
		cursor: pointer;
	}

	.jweb-accordion-media-item-content  > .jweb-accordion-media-item-content__title::after {
		content: '';
		display: block;
		width: var(--icon-size-md);
		height: var(--icon-size-md);
		flex-shrink: 0;
		margin-top: var(--spacing-xs);  /* Nudge down Chevron icon for alignment */
		margin-left: auto;
		background: currentColor;
		-webkit-mask: var(--icon-svg-arrows--chevron-up-2) no-repeat center / contain;
		mask: var(--icon-svg-arrows--chevron-up-2) no-repeat center / contain;
		transition: transform var(--transition-duration) var(--chevron-easing);
		transform: rotate(180deg);
	}

	.jweb-accordion-media-item-content  > .jweb-accordion-media-item-content__body {
		display: grid;
		grid-template-rows: 0fr;
		overflow: hidden;
		padding-block: 0;
		-webkit-padding-start: var(--spacing-xs);
		        padding-inline-start: var(--spacing-xs);
		gap: 0;
		transition: grid-template-rows var(--transition-duration) var(--transition-easing), opacity var(--transition-duration) var(--transition-easing);
		opacity: 0;
	}

	.jweb-accordion-media-item-content  > .jweb-accordion-media-item-content__body > .jweb-accordion-media-item-content__body-inner {
		min-height: 0;
		padding: 0;
		gap: 0;
		transition: padding var(--transition-duration) var(--transition-easing);
	}
	:is(.jweb-accordion-media-item.accordion-active .jweb-accordion-media-item-content)  > .jweb-accordion-media-item-content__title::after {
		transform: rotate(0deg);
	}

	:is(.jweb-accordion-media-item.accordion-active .jweb-accordion-media-item-content)  > .jweb-accordion-media-item-content__body {
		grid-template-rows: 1fr;
		opacity: 1;
	}

	:is(.jweb-accordion-media-item.accordion-active .jweb-accordion-media-item-content)  > .jweb-accordion-media-item-content__body > .jweb-accordion-media-item-content__body-inner {
		padding-block: var(--spacing-3xs);
	}
}
@layer components{

/* Outer announcement banner — full-width container, dismiss button, CLS guard. */

.jweb-announcement {
  --announcement-dismiss-size: 40px;
  --announcement-dismiss-offset: 10px;
  --announcement-content-max-width: var(--layout-wide);
  position: relative;
  width: 100%;
}

/* CLS prevention: hide until inline script confirms not dismissed. */
.jweb-announcement--pending {
  display: none;
}

/* ----------------------------------------------------------------
   Color variants — driven by child block's is-style-* class.
   Background lives on the outer wrapper so the dismiss button
   inherits the correct color scheme.
   ---------------------------------------------------------------- */

/* Light is the default — apply when is-style-light is present OR when
   no variant class exists (legacy saved content). */
.jweb-announcement:has(.jweb-announcement-content:not(.is-style-dark)) {
  background-color: var(--color-background-feedback-info);
  color: var(--color-text-body);
}

/* Dark variant — uses brand-80 directly because no feedback-background-bold
   semantic token exists yet. TODO: replace with semantic token once the
   design-tokens repo adds one (see JWEB-2832 feedback). */
.jweb-announcement:has(.is-style-dark) {
  background-color: var(--color-brand-80);
  color: var(--color-text-light);
}

.jweb-announcement__body {
  max-width: var(--announcement-content-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-md);
  padding-block: var(--spacing-3xs);
  -webkit-padding-end: calc(var(--spacing-md) + var(--announcement-dismiss-size));
          padding-inline-end: calc(var(--spacing-md) + var(--announcement-dismiss-size));
}

.jweb-announcement__dismiss {
  position: absolute;
  top: 50%;
  right: var(--announcement-dismiss-offset);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--announcement-dismiss-size);
  height: var(--announcement-dismiss-size);
  padding: 0;
  border: none;
  border-radius: var(--border-radius-subtle);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
}

.jweb-announcement__dismiss:hover {
  opacity: 1;
}

/* Screen-reader-only live region for dismiss feedback. */
.jweb-announcement__live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
}
@layer components{

/* Inner announcement content — layout, typography. */

.jweb-announcement-content {
  --announcement-text-gap-row: 2px;
  --announcement-text-gap-col: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--announcement-text-gap-row) var(--announcement-text-gap-col);
  text-align: center;
  font-family: var(--text-body-md-font-family);
  font-size: var(--text-body-md-font-size);
  font-weight: var(--text-body-md-font-weight);
  line-height: var(--text-body-md-line-height);
  letter-spacing: var(--text-body-md-letter-spacing);
}

/* Inner blocks (paragraphs, buttons) should flow inline so
   message + CTA stay on a single line at wider viewports. */
.jweb-announcement-content p {
  display: inline;
  margin: 0;
}

/* CTA links within the banner. */
.jweb-announcement-content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jweb-announcement-content a:hover {
  text-decoration-thickness: 2px;
}

/* Bold text (semibold in Figma). */
.jweb-announcement-content strong {
  font-weight: var(--font-weight-semibold);
}
}
@layer components{

.jweb-carousel {
  --carousel-arrow-size: 44px;
  --carousel-arrow-bg: rgba(255, 255, 255, 0.05);
  --carousel-dot-size: 10px;
  --carousel-dot-radius: 6px;
  --transition-duration: 0.2s;
  --transition-ease: ease-in;
}

.jweb-carousel__viewport { overflow: hidden; }
.jweb-carousel__container { display: flex; }
.jweb-carousel__slide { flex: 0 0 100%; min-width: 0; }

.jweb-carousel[data-carousel-equal-height="true"] .jweb-carousel__slide {
  display: flex;
  flex-direction: column;
}

.jweb-carousel[data-carousel-equal-height="true"] .jweb-carousel__slide > * {
  flex: 1;
}

.jweb-carousel__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3xs);
  margin-top: var(--spacing-sm);
}

.jweb-carousel__controls-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3xs);
}

.jweb-carousel__prev,
.jweb-carousel__next {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--carousel-arrow-size);
  height: var(--carousel-arrow-size);
  padding: var(--spacing-3xs);
  border: var(--border-width-sm) solid var(--color-border-strong);
  border-radius: var(--border-radius-subtle);
  background: var(--carousel-arrow-bg);
  color: var(--color-text-body);
  cursor: pointer;
  transition: background var(--transition-duration) var(--transition-ease);
}

.jweb-carousel__prev:disabled,
.jweb-carousel__next:disabled {
  opacity: 0.4;
  cursor: default;
}

.jweb-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.jweb-carousel__dot {
  width: var(--carousel-dot-size);
  height: var(--carousel-dot-size);
  border-radius: var(--carousel-dot-radius);
  border: none;
  padding: 0;
  background: var(--color-neutral-50);
  cursor: pointer;
}

.jweb-carousel__dot.is-active {
  background: var(--indicator-color, var(--color-action-accent));
}

.jweb-carousel__cta {
  color: var(--link-color, var(--color-text-body));
  font-family: var(--text-body-md-font-family);
  font-size: var(--link-font-size, var(--text-body-md-font-size));
  font-weight: var(--text-body-md-font-weight);
  line-height: var(--text-body-md-line-height);
  letter-spacing: var(--text-body-md-letter-spacing);
  text-decoration: none;
  text-align: center;
  transition: color var(--transition-duration) var(--transition-ease);
}

.jweb-carousel__cta:hover {
  color: var(--link-hover-color, var(--link-color, var(--color-text-body)));
}

.jweb-carousel__cta-tail {
  white-space: nowrap;
}

.jweb-carousel__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: bottom;
  width: calc(16px + var(--spacing-4xs) * 2 + var(--border-width-sm) * 2);
  height: calc(16px + var(--spacing-4xs) * 2 + var(--border-width-sm) * 2);
  -webkit-margin-start: var(--spacing-4xs);
          margin-inline-start: var(--spacing-4xs);
  padding: var(--spacing-4xs);
  border: var(--border-width-sm) solid var(--color-border-strong);
  border-radius: var(--border-radius-subtle);
  color: inherit;
  transition: background var(--transition-duration) var(--transition-ease);
}

.jweb-carousel__cta:hover .jweb-carousel__cta-icon,
.jweb-carousel__prev:hover,
.jweb-carousel__next:hover {
  background: var(--color-border-subtle);
}

@media (min-width: 768px) {
  .jweb-carousel__controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .jweb-carousel__controls-nav {
    grid-column: 2;
  }

  .jweb-carousel__cta {
    grid-column: 3;
    justify-self: end;
    text-align: right;
  }
}
}
@layer components{

/*
 * Expandable Group — shared styles (editor + frontend).
 *
 * Figma: file qgpcmYXnDBzv1VssJldSOe
 *   Collapsed: node 9054:103773 | Expanded: node 9054:103871
 *
 * .is-expanded — toggled by JS on click
 *
 * Collapsibility driven by CSS media queries + data-expandable-group-breakpoint.
 *
 * Preset CSS variables (via wrapperClasses):
 *   --overlay-color, --trigger-text-color
 */

.jweb-expandable-group {
	--expandable-group-gradient-height: 480px;
	--expandable-group-peek-height: 150px;
	--expandable-group-trigger-font-size: var(--font-size-5);

	display: flex;
	flex-direction: column;
	gap: var(--wp--style--block-gap, 1.2rem);
}

@media (min-width: 768px) {
	.jweb-expandable-group {
		--expandable-group-gradient-height: 350px;
	}
}

/* --- Trigger area: gradient overlay + button --- */

.jweb-expandable-group__trigger-area {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	align-self: stretch;
	order: 2;
	width: 100%;
	background: var(--overlay-color, var(--color-brand-90));
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, black 80%);
	mask-image: linear-gradient(180deg, transparent 0%, black 80%);
}

.jweb-expandable-group__gradient {
	height: var(--expandable-group-gradient-height);
}

.jweb-expandable-group__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-3xs);
	padding: var(--spacing-xs);
	border: none;
	background: none;
	color: var(--trigger-text-color, var(--color-text-light));
	cursor: pointer;
}

.jweb-expandable-group__trigger-text {
	font-size: var(--expandable-group-trigger-font-size);
	font-weight: 500;
}

.jweb-expandable-group__trigger-icon {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

/* Hide collapse label by default; swapped when .is-expanded. */
.jweb-expandable-group__trigger-text--collapsed {
	display: none;
}

/* --- Collapsible states per breakpoint ---
 *
 * Each breakpoint activates collapse below that viewport width.
 * "desktop" = always collapsible.
 * !important overrides WP inline padding styles.
 */

/* desktop → always collapsible */
.jweb-expandable-group[data-expandable-group-breakpoint="desktop"] {
	padding-bottom: 0 !important;
}

.jweb-expandable-group[data-expandable-group-breakpoint="desktop"]:not(.is-expanded) [data-role="overflow"] {
	max-height: var(--expandable-group-peek-height);
	overflow: hidden;
}

.jweb-expandable-group[data-expandable-group-breakpoint="desktop"] .jweb-expandable-group__trigger-area {
	display: flex;
	position: relative;
	z-index: 1;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(-50vw + 50%);
}

.jweb-expandable-group[data-expandable-group-breakpoint="desktop"]:not(.is-expanded) .jweb-expandable-group__trigger-area {
	margin-top: calc(-1 * var(--expandable-group-gradient-height));
}

/* tablet → collapsible below 1280px */
@media (max-width: 1279px) {
	.jweb-expandable-group[data-expandable-group-breakpoint="tablet"] {
		padding-bottom: 0 !important;
	}

	.jweb-expandable-group[data-expandable-group-breakpoint="tablet"]:not(.is-expanded) [data-role="overflow"] {
		max-height: var(--expandable-group-peek-height);
		overflow: hidden;
	}

	.jweb-expandable-group[data-expandable-group-breakpoint="tablet"] .jweb-expandable-group__trigger-area {
		display: flex;
		position: relative;
		z-index: 1;
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(-50vw + 50%);
	}

	.jweb-expandable-group[data-expandable-group-breakpoint="tablet"]:not(.is-expanded) .jweb-expandable-group__trigger-area {
		margin-top: calc(-1 * var(--expandable-group-gradient-height));
	}
}

/* mobile → collapsible below 768px */
@media (max-width: 767px) {
	.jweb-expandable-group[data-expandable-group-breakpoint="mobile"] {
		padding-bottom: 0 !important;
	}

	.jweb-expandable-group[data-expandable-group-breakpoint="mobile"]:not(.is-expanded) [data-role="overflow"] {
		max-height: var(--expandable-group-peek-height);
		overflow: hidden;
	}

	.jweb-expandable-group[data-expandable-group-breakpoint="mobile"] .jweb-expandable-group__trigger-area {
		display: flex;
		position: relative;
		z-index: 1;
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(-50vw + 50%);
	}

	.jweb-expandable-group[data-expandable-group-breakpoint="mobile"]:not(.is-expanded) .jweb-expandable-group__trigger-area {
		margin-top: calc(-1 * var(--expandable-group-gradient-height));
	}
}

/* --- Expanded state --- */

.jweb-expandable-group.is-expanded .jweb-expandable-group__gradient {
	display: none;
}

.jweb-expandable-group.is-expanded .jweb-expandable-group__trigger-area {
	background: none;
	-webkit-mask-image: none;
	mask-image: none;
	margin-top: 0;
}

.jweb-expandable-group.is-expanded .jweb-expandable-group__trigger-icon {
	transform: rotate(180deg);
}

.jweb-expandable-group.is-expanded .jweb-expandable-group__trigger-text:not(.jweb-expandable-group__trigger-text--collapsed) {
	display: none;
}

.jweb-expandable-group.is-expanded .jweb-expandable-group__trigger-text--collapsed {
	display: inline;
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
	.jweb-expandable-group__trigger-icon {
		transition: none;
	}
}
}
@layer components{

.faq-content {
	border-bottom: var(--border-width-sm) solid var(--color-neutral-20);
}

.faq-content__question {
	margin: 0;
	font: inherit;
}

.faq-content__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--spacing-3xs) 0;
	cursor: pointer;
	text-align: left;
}

.faq-content__chevron {
	flex-shrink: 0;
	margin-left: var(--spacing-3xs);
	color: var(--color-brand-80);
	transition: transform 0.25s ease, color 0.25s ease;
}

.faq-content__answer {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows 0.2s ease-out, opacity 0.2s ease-out;
	opacity: 0;
}

.faq-content__answer-inner {
	min-height: 0;
	transition: padding 0.2s ease-out;
}

.accordion-active .faq-content__chevron {
	color: var(--color-brand-50);
	transform: rotate(180deg);
}

.accordion-active .faq-content__answer {
	grid-template-rows: 1fr;
	opacity: 1;
}

.accordion-active .faq-content__answer-inner {
	padding-block: var(--spacing-3xs);
}
}
@layer components{

.jweb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-size, var(--icon-size-md));
	height: var(--icon-size, var(--icon-size-md));
	color: var(--icon-color, currentColor);
}

.jweb-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	color: inherit;
}
}
@layer components{

/*
 * Responsive layout uses the table block’s inline size (container query), not viewport width.
 * Stacked rows by default; table/column layout at or above 801px inline size.
 * Breakpoint: 800px / 801px — keep in sync across both @container rules below and
 * the Lookbook shell widths in jweb_table_preview.rb.
 * --table-columns on the table root (.jweb-table) drives cell widths.
 */

.jweb-table-wrap {
	container-type: inline-size;
	container-name: jweb-table;
	width: 100%;
}

.wp-block-jweb-table.is-style-striped .wp-block-jweb-table-row:nth-child(odd),
.jweb-table.is-style-striped .jweb-table-row:nth-child(odd) {
	background-color: var(--color-neutral-10, #fafbfc);
}

.jweb-table-wrap .jweb-table {
	min-block-size: 2rem;
}

.jweb-table-wrap .jweb-table th,
.jweb-table-wrap .jweb-table td {
	padding-block: var(--spacing-xs);
	padding-inline: var(--spacing-xs);
	min-block-size: 3rem;
	box-sizing: border-box;
}

.jweb-table-wrap .jweb-table,
.jweb-table-wrap .jweb-table tbody {
	display: block;
	width: 100%;
}

.jweb-table-wrap .jweb-table tbody tr.jweb-table-row {
	display: block;
	width: 100%;
	-webkit-margin-after: var(--spacing-sm);
	        margin-block-end: var(--spacing-sm);
}

.jweb-table-wrap .jweb-table tbody tr.jweb-table-row:last-child {
	-webkit-margin-after: 0;
	        margin-block-end: 0;
}

.jweb-table-wrap .jweb-table tbody tr.jweb-table-row > th,
.jweb-table-wrap .jweb-table tbody tr.jweb-table-row > td {
	display: block;
	width: 100%;
	text-align: start;
}

/*
 * Stacked only: padding does not collapse between block-level cells, so default
 * padding-block on each th/td doubles the gap (bottom + top). Use one vertical
 * padding between stacked siblings; keep full padding on the last cell in each row.
 * Row gaps also use margin-block-end on tr (see above).
 */
@container jweb-table (max-width: 800px) {
	.jweb-table-wrap .jweb-table tbody tr.jweb-table-row > th,
	.jweb-table-wrap .jweb-table tbody tr.jweb-table-row > td {
		-webkit-padding-before: var(--spacing-xs);
		        padding-block-start: var(--spacing-xs);
		-webkit-padding-after: 0;
		        padding-block-end: 0;
	}

	.jweb-table-wrap .jweb-table tbody tr.jweb-table-row > *:last-child {
		-webkit-padding-after: var(--spacing-xs);
		        padding-block-end: var(--spacing-xs);
	}
}

/* Inline size < 801px → stacked; from 801px up → table layout (`min-width: 801px` is inclusive). */
@container jweb-table (min-width: 801px) {
	.jweb-table-wrap .jweb-table {
		display: table;
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed;
	}

	.jweb-table-wrap .jweb-table tbody {
		display: table-row-group;
	}

	.jweb-table-wrap .jweb-table tbody tr.jweb-table-row {
		display: table-row;
		-webkit-margin-after: 0;
		        margin-block-end: 0;
	}

	.jweb-table-wrap .jweb-table tbody tr.jweb-table-row > th,
	.jweb-table-wrap .jweb-table tbody tr.jweb-table-row > td {
		display: table-cell;
		width: calc(100% / var(--table-columns, 2));
		min-width: 0;
		vertical-align: var(--table-cell-valign, top);
	}
}
}
@layer components{

/* jweb-dialog — generic native <dialog> base styles */

.jweb-dialog {
  border: none;
  padding:
    max(env(safe-area-inset-top), 4px)
    max(env(safe-area-inset-right), 4px)
    max(env(safe-area-inset-bottom), 4px)
    max(env(safe-area-inset-left), 4px);
  background: transparent;
  max-width: 100vw;
  max-height: 100dvh;
}

.jweb-dialog[open] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-3xs);
}

.jweb-dialog::backdrop {
  background-color: rgb(0 0 0 / 0.7);
}

.jweb-dialog .jweb-dialog__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: white;
}

.jweb-dialog .jweb-dialog__close svg {
  width: 1rem;
  height: 1rem;
}

.jweb-dialog .jweb-dialog__close:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}
}
@layer components{

/* jweb-video-embed — video-specific dialog styles */

.jweb-video-embed {
  width: 90vw;
  max-width: 800px;
}

.jweb-video-embed__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: var(--border-radius-default);
  background: white;
  padding: var(--spacing-xs);
}

.jweb-video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius-subtle);
}

@media (max-width: 767px) {
  .jweb-video-embed__frame {
    padding: var(--spacing-3xs);
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .jweb-video-embed {
    width: 60vw;
  }
}
}