/* GENERATED by scripts/build-website-styles.mjs - edit common/styles-src/ or <site>/brand.css and run npm run module:websites:styles */
/* stylelint-disable */

@font-face {
  font-family: Inter;
  src: url('/sfsites/c/resource/CommonInterVariable01')
    format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}

/* Metric-matched Arial fallback (capsize/fontaine Inter-vs-Arial values) so the
   swap from fallback to Inter causes no reflow under font-display: optional. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}

/* Tier 1 primitives: brand-agnostic ramps. No semantic meaning, no color.
   Breakpoints are 640 / 768 / 1024 / 1280 px - these live in @media queries
   (custom properties can't drive media conditions) and are the only widths
   the shared layers and LWC scoped CSS should key off. */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --text-sm: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.11vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.07rem + 0.22vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.44vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.34rem + 0.66vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.72rem + 0.66vw, 2.25rem);
  --text-4xl: clamp(2rem, 1.7rem + 1.5vw, 2.5rem);
  --leading-body: 1.5;
  --leading-heading: 1.2;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 16px;
  --radius-full: 9999px;
  --border-hairline: 1px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 8%);
  --shadow-2: 0 2px 8px rgb(0 0 0 / 10%);
  --shadow-3: 0 8px 24px rgb(0 0 0 / 12%);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --measure-prose: 68ch;
  --width-content: 1120px;
  --font-sans:
    'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* PROVISIONAL neutral values - replaced by 1-4-brand-theme-files */

:root {
  --color-bg: #fff;
  --color-surface: #f4f4f5;
  --color-text: #1a1a1a;
  --color-muted: #595959;
  --color-brand: #1a1a1a;
  --color-on-brand: #fff;
  --color-link: #1d4ed8;
  --color-link-hover: #17399f;
  --color-border: #d4d4d8;
  --color-focus: var(--color-link);
  --btn-hover-mix: var(--color-text);
  --radius-control: var(--radius-2);
  --radius-card: var(--radius-3);
  --radius-media: var(--radius-3);
  --shadow-card: none;
  --font-body: var(--font-sans);
  --font-display: var(--font-body);
  --font-heading-2: var(--font-display);
  --brand-wordmark: url('/sfsites/c/resource/BbWordmark01');
  --brand-wordmark-aspect: 8;
}

/* Dark axis: 1-4-brand-theme-files adds a :root[data-theme='dark'] block here
   with the approved dark palette (see true-hands/brand.css for the reference
   shape). Until then the site renders light tokens in both modes. */

/* Tier 3 consumers: base element styles, the DXP bridge, and component classes.
   References semantic tokens (and the shared spacing/type/motion primitives)
   only, never a raw hex literal. */

html,
body {
  height: 100%;
}

html {
  background: var(--color-bg);
  color: var(--color-text);
  color-scheme: light;
}

html[data-theme='dark'] {
  /* Native form controls, scrollbars, and UA defaults follow the active axis. */
  color-scheme: dark;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

:root {
  /* DXP bridge: map semantic tokens onto the Experience Builder branding hooks so
     base components (buttons, forms, links) inherit the brand without editing the
     brandingSet. Only global (-g-) hooks are set; DXP derives the shade and
     per-component (-s-) variants from these. */
  --dxp-g-root: var(--color-bg);
  --dxp-g-root-contrast: var(--color-text);
  --dxp-g-root-font-family: var(--font-body);
  --dxp-g-brand: var(--color-brand);
  --dxp-g-brand-contrast: var(--color-on-brand);
  --dxp-g-neutral: var(--color-surface);
  --dxp-g-neutral-contrast: var(--color-text);
  --dxp-g-neutral-3: var(--color-border);
  --dxp-s-link-text-color: var(--color-link);
  --dxp-s-link-text-color-1: var(--color-link-hover);

  /* The runtime link rule reads this hook (defaults to none in
     dxp-styling-hooks) and outranks the bare `a` rule below - the persistent
     at-rest underline must be delivered through it. */
  --dxp-s-link-text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-4);
  font-weight: 600;
  line-height: var(--leading-heading);
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
}

h2 {
  font-family: var(--font-heading-2);
  font-size: var(--text-3xl);
}

h3 {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
}

h5 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
}

h6 {
  font-family: var(--font-body);
  font-size: var(--text-base);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-link-hover);
}

a:visited {
  /* Reset the UA visited color so link identity stays brand-consistent. */
  color: var(--color-link);
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
}

.skip-link:focus {
  position: fixed;
  left: var(--space-2);
  top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--color-bg);
  color: var(--color-link);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-control);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.btn-primary {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--color-brand) 85%, var(--btn-hover-mix));
}

.btn:visited {
  /* Keep the on-brand label after a visit: the global a:visited rule above would
     otherwise repaint anchor-buttons to link color and tank contrast on the fill. */
  color: var(--color-on-brand);
}

.card {
  padding: var(--space-6);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

.callout {
  /* Accent via the inline-start rule plus an icon/label slot, never tint alone. */
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-inline-start: 3px solid var(--color-brand);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.callout-icon {
  flex: none;
  color: var(--color-brand);
}

.callout-label {
  font-weight: 600;
}

.figure {
  margin: 0;
}

.figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-media);
}

.figure figcaption {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.prose {
  max-width: var(--measure-prose);
}

.prose :where(h1, h2, h3, h4, h5, h6) {
  margin-top: var(--space-8);
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote {
  margin: 0 0 var(--space-4);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose blockquote {
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--color-border);
  color: var(--color-muted);
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-media);
}

.prose :where(code, pre) {
  /* One shared, brand-neutral frame for code; syntax-highlight theming is 2-1. */
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.prose code {
  padding: var(--space-1) var(--space-2);
}

.prose pre {
  padding: var(--space-4);
  overflow-x: auto;
}

.prose pre code {
  padding: 0;
  border: 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
}

.prose th,
.prose td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-hairline) solid var(--color-border);
  text-align: start;
}

.table-scroll {
  /* Wrap wide tables so they scroll in their own container, never the page body. */
  overflow-x: auto;
}