/* FLUENT-TOKENS:START — canonical HELPERG design tokens */
:root {
  --font-sans: "Segoe UI Variable", "Segoe UI", Inter, -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --type-display: clamp(3.25rem, 7vw, 5.75rem);
  --type-h1: clamp(2.75rem, 6vw, 4.75rem);
  --type-h2: clamp(2rem, 4vw, 3.25rem);
  --type-h3: clamp(1.35rem, 2vw, 1.75rem);
  --type-body-lg: clamp(1.125rem, 1.4vw, 1.25rem);
  --type-body: 1rem;
  --type-longform: 1.0625rem;
  --type-meta: .875rem;
  --type-code: .9375rem;

  --color-bg-page: #F5F5F7;
  --color-surface: #FFFFFF;
  --color-surface-secondary: #F3F6FA;
  --color-section-soft: #EFF6FF;
  --color-border: #E1E6ED;
  --color-border-strong: #CDD5DF;

  --color-text: #0F172A;
  --color-heading: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #5B6472;
  --color-text-subtle: #5B6472;
  --color-on-brand: #FFFFFF;

  --color-brand: #0067C0;
  --color-brand-strong: #0078D4;
  --color-brand-deep: #005A9E;
  --color-brand-dark: #003E73;
  --color-blue-interactive: #2563EB;
  --color-focus: #005FB8;
  --color-blue-light: #EFF6FF;
  --color-blue-border: #BFDBFE;

  --color-success: #16A34A;
  --color-success-foreground: #166534;
  --color-success-soft: #ECFDF3;
  --color-warning: #F59E0B;
  --color-warning-soft: #FFF7ED;
  --color-error: #DC2626;
  --color-error-foreground: #B91C1C;
  --color-error-soft: #FFF1F2;
  --color-ai: #7C3AED;
  --color-connectivity: #0891B2;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-panel: 18px;
  --radius-hero: 22px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-2: 0 6px 20px rgba(15, 23, 42, .08);
  --shadow-3: 0 16px 48px rgba(15, 23, 42, .10);

  --focus-ring: 0 0 0 3px rgba(0, 95, 184, .28);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);

  --container-wide: 1280px;
  --container-default: 1180px;
  --container-content: 800px;
  --container-narrow: 720px;
  --ecosystem-height: 48px;
  --header-height: 64px;
  --sticky-stack-height: calc(var(--ecosystem-height) + var(--header-height));
}

@media (max-width: 767px) {
  :root {
    --ecosystem-height: 44px;
    --header-height: 60px;
  }
}
/* FLUENT-TOKENS:END */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sticky-stack-height) + var(--space-4));
}

body {
  min-width: 0;
  background: var(--color-bg-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.68;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* FLUENT-FOUNDATION:START
   Additive P1 foundation. Nothing in this block applies until a complete
   page-family migration adds data-ui="fluent" to the body. */

body[data-ui="fluent"] {
  min-width: 0;
  background: var(--color-bg-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.68;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

html:has(body[data-ui="fluent"]) {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sticky-stack-height) + var(--space-4));
}

body[data-ui="fluent"] :where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-heading);
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: -.025em;
  scroll-margin-top: calc(var(--sticky-stack-height) + var(--space-4));
}

body[data-ui="fluent"] h1 { font-size: var(--type-h1); line-height: 1.02; }
body[data-ui="fluent"] h2 { font-size: var(--type-h2); line-height: 1.08; }
body[data-ui="fluent"] h3 { font-size: var(--type-h3); line-height: 1.16; }
body[data-ui="fluent"] :where(p, li) { color: var(--color-text-secondary); }
body[data-ui="fluent"] :where(strong, b) { color: var(--color-text); }
body[data-ui="fluent"] main a:not([class]) { color: var(--color-blue-interactive); text-decoration: underline; text-underline-offset: 3px; }
body[data-ui="fluent"] main a:not([class]):hover { color: var(--color-brand-deep); }
body[data-ui="fluent"] :where(a, button, input, textarea, select, summary, pre):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}
main[tabindex="-1"]:focus { outline: 0; }

body[data-ui="fluent"] :where(img, svg, video, canvas) { max-width: 100%; }
body[data-ui="fluent"] :where(table, pre) { max-width: 100%; }
body[data-ui="fluent"] [hidden] { display: none !important; }

.ui-skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100000;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-focus);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-brand-dark);
  font: 600 var(--type-meta)/1 var(--font-sans);
  box-shadow: var(--shadow-2);
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform var(--duration-fast) var(--ease-standard);
}
.ui-skip-link:focus { transform: translateY(0); }

.ui-container {
  width: min(100% - 2 * var(--space-6), var(--container-default));
  margin-inline: auto;
}
.ui-container--wide { max-width: var(--container-wide); }
.ui-container--content { max-width: var(--container-content); }
.ui-container--narrow { max-width: var(--container-narrow); }

.ui-section { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
.ui-section--surface { background: var(--color-surface); }
.ui-section--soft { background: var(--color-section-soft); }
.ui-section--secondary { background: var(--color-surface-secondary); }
.ui-stack { display: flex; flex-direction: column; gap: var(--stack-space, var(--space-6)); }
.ui-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cluster-space, var(--space-3)); }
.ui-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-6); }
.ui-grid--catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--space-8), 7vw, var(--space-20)); align-items: center; }
.ui-layout-sidebar { display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, var(--container-content)); gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start; justify-content: center; }
.ui-layout-sidebar__full { grid-column: 1 / -1; }
.ui-layout-sidebar__aside { min-width: 0; align-self: start; }
.ui-layout-sidebar__content { min-width: 0; }
.ui-measure { max-width: 68ch; }
.ui-longform { max-width: var(--container-content); font-size: var(--type-longform); line-height: 1.75; }
.ui-longform > * + * { margin-top: 1.25em; }
.ui-longform :where(h2, h3) { margin-top: 2.1em; }

.ui-eyebrow,
.ui-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-blue-border);
  border-radius: var(--radius-sm);
  background: var(--color-blue-light);
  color: var(--color-brand-deep);
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .055em;
  line-height: 1.3;
  text-transform: uppercase;
}
.ui-badge--neutral { border-color: var(--color-border); background: var(--color-surface-secondary); color: var(--color-text-secondary); }
.ui-badge--success { border-color: color-mix(in srgb, var(--color-success) 30%, white); background: var(--color-success-soft); color: var(--color-success-foreground); }
.ui-badge--warning { border-color: color-mix(in srgb, var(--color-warning) 35%, white); background: var(--color-warning-soft); color: #854D0E; }
.ui-badge--error { border-color: color-mix(in srgb, var(--color-error) 30%, white); background: var(--color-error-soft); color: var(--color-error-foreground); }

.ui-display { font-size: var(--type-display); font-weight: 675; line-height: 1; letter-spacing: -.045em; }
.ui-lead { max-width: 64ch; color: var(--color-text-secondary); font-size: var(--type-body-lg); line-height: 1.65; }
.ui-meta { color: var(--color-text-muted); font-size: var(--type-meta); line-height: 1.5; }

.ui-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: 650 .9375rem/1.2 var(--font-sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.ui-button--primary { background: var(--color-brand); color: var(--color-on-brand); box-shadow: var(--shadow-1); }
.ui-button--primary:hover { background: var(--color-brand-deep); color: var(--color-on-brand); box-shadow: var(--shadow-2); }
.ui-button--secondary { border-color: var(--color-border-strong); background: var(--color-surface); color: var(--color-text); }
.ui-button--secondary:hover { border-color: var(--color-blue-border); background: var(--color-blue-light); color: var(--color-brand-dark); }
.ui-button--subtle { background: transparent; color: var(--color-brand); }
.ui-button--subtle:hover { background: var(--color-blue-light); color: var(--color-brand-deep); }
.ui-button--destructive { background: var(--color-error); color: var(--color-on-brand); }
.ui-button--destructive:hover { background: #B91C1C; color: var(--color-on-brand); }
.ui-button--icon { width: 44px; padding: 0; }
.ui-button[disabled], .ui-button[aria-disabled="true"] { opacity: .52; cursor: not-allowed; box-shadow: none; }

.ui-card {
  min-width: 0;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  color: var(--color-text);
  transition: border-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    transform var(--duration-normal) var(--ease-standard);
}
a.ui-card:hover, button.ui-card:hover { border-color: var(--color-blue-border); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.ui-card__icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: var(--radius-md); background: var(--color-blue-light); color: var(--color-brand); }
.ui-card__title { color: var(--color-heading); font-size: 1.125rem; font-weight: 650; line-height: 1.3; }
.ui-card__body { color: var(--color-text-secondary); line-height: 1.65; }
.ui-card__footer { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }

.ui-hero {
  min-height: min(760px, calc(100vh - var(--sticky-stack-height)));
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-page);
}
.ui-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: clamp(var(--space-10), 7vw, var(--space-20));
  align-items: center;
}
.ui-inline-facts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.ui-inline-facts li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--type-meta); }
.ui-inline-facts li::before { width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); content: ""; }

.ui-preview {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
}
.ui-preview__header { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border); color: var(--color-text); font-size: var(--type-meta); font-weight: 650; }
.ui-preview--media { align-self: center; }
.ui-product-media { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--color-border); background: var(--color-surface-secondary); }
.ui-product-media img { width: 100%; height: 100%; object-fit: cover; }
.ui-definition-list { display: grid; padding: var(--space-3) var(--space-6) var(--space-5); }
.ui-definition-list > div { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr); gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.ui-definition-list > div:last-child { border-bottom: 0; }
.ui-definition-list dt { color: var(--color-text-muted); font-size: var(--type-meta); }
.ui-definition-list dd { color: var(--color-text); font-size: var(--type-meta); font-weight: 650; }
.ui-process { display: grid; padding: var(--space-4) var(--space-6) var(--space-6); }
.ui-process li { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--color-border); }
.ui-process li:last-child { border-bottom: 0; }
.ui-process__number { display: grid; width: 32px; height: 32px; place-items: center; border-radius: var(--radius-sm); background: var(--color-blue-light); color: var(--color-brand-deep); font-size: .6875rem; font-weight: 700; }
.ui-process strong, .ui-process small { display: block; }
.ui-process small { margin-top: var(--space-1); color: var(--color-text-muted); font-size: .8125rem; line-height: 1.5; }

.ui-section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-4); }
.ui-section-heading > div { display: grid; gap: var(--space-4); }
.ui-section-heading > p { max-width: 56ch; color: var(--color-text-secondary); }
.ui-card--link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-5); align-items: start; text-decoration: none; }
.ui-card__icon svg { width: 24px; height: 24px; }
.ui-card__content { display: grid; gap: var(--space-3); min-width: 0; }
.ui-card__action { align-self: center; color: var(--color-brand); }
.ui-card__action svg { width: 20px; height: 20px; }
.ui-fact-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-1); }
.ui-fact { min-width: 0; padding: var(--space-6); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.ui-fact:nth-child(2n) { border-right: 0; }
.ui-fact:nth-last-child(-n + 2) { border-bottom: 0; }
.ui-fact strong { display: block; margin-top: var(--space-4); }
.ui-fact p { margin-top: var(--space-2); font-size: var(--type-meta); line-height: 1.6; }

.ui-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: clamp(var(--space-6), 5vw, var(--space-12)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-secondary); }
.ui-cta > div:first-child { display: grid; gap: var(--space-3); max-width: 64ch; }

.ui-field { display: grid; gap: var(--space-2); }
.ui-label { color: var(--color-text); font-size: var(--type-meta); font-weight: 650; }
.ui-help { color: var(--color-text-muted); font-size: .8125rem; line-height: 1.5; }
.ui-control {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
select.ui-control { height: 44px; }
textarea.ui-control { min-height: 120px; resize: vertical; }
.ui-control:hover { border-color: var(--color-text-muted); }
.ui-control:focus { border-color: var(--color-focus); outline: 0; box-shadow: var(--focus-ring); }
.ui-control:disabled { background: var(--color-surface-secondary); color: var(--color-text-muted); cursor: not-allowed; }
.ui-field[aria-invalid="true"] .ui-control, .ui-control[aria-invalid="true"] { border-color: var(--color-error); }
.ui-error { color: var(--color-error); font-size: .8125rem; font-weight: 600; }
.ui-check { display: flex; min-height: 44px; align-items: center; gap: var(--space-3); color: var(--color-text-secondary); }
.ui-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-brand); }

.ui-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.ui-table { width: 100%; min-width: 600px; border-collapse: collapse; color: var(--color-text-secondary); font-size: var(--type-meta); }
.ui-table th { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-strong); background: var(--color-surface-secondary); color: var(--color-text); font-weight: 650; text-align: left; }
.ui-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.ui-table tr:last-child td { border-bottom: 0; }

.ui-code {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-secondary);
}
.ui-code__label { display: flex; min-height: 40px; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font: 600 .75rem/1.2 var(--font-sans); }
.ui-code pre { margin: 0; padding: var(--space-4); overflow-x: auto; color: var(--color-text); font: var(--type-code)/1.65 var(--font-mono); }
body[data-ui="fluent"] :not(pre) > code { padding: .15em .35em; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface-secondary); color: var(--color-brand-dark); font-family: var(--font-mono); font-size: .9em; }

.ui-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--type-meta); }
.ui-breadcrumb a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.ui-breadcrumb a:hover { text-decoration-color: currentColor; }
.ui-external-link::after { margin-left: .25em; color: var(--color-text-muted); content: "↗"; font-size: .8em; }
.ui-callout { padding: var(--space-4) var(--space-6); border: 1px solid var(--color-blue-border); border-left: 4px solid var(--color-brand); border-radius: var(--radius-md); background: var(--color-blue-light); }
.ui-callout--success { border-color: color-mix(in srgb, var(--color-success) 30%, white); border-left-color: var(--color-success); background: var(--color-success-soft); }
.ui-callout--warning { border-color: color-mix(in srgb, var(--color-warning) 35%, white); border-left-color: var(--color-warning); background: var(--color-warning-soft); }
.ui-callout--error { border-color: color-mix(in srgb, var(--color-error) 30%, white); border-left-color: var(--color-error); background: var(--color-error-soft); }
.ui-faq { border-top: 1px solid var(--color-border); }
.ui-faq details { border-bottom: 1px solid var(--color-border); }
.ui-faq summary { min-height: 52px; padding: var(--space-4) 0; color: var(--color-text); font-weight: 650; cursor: pointer; }

.site-header {
  position: sticky;
  top: var(--ecosystem-height);
  z-index: 900;
  height: var(--header-height);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}
.site-header__inner { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: var(--space-6); }
.site-brand { display: inline-flex; min-width: max-content; align-items: center; gap: var(--space-3); color: var(--color-text); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.site-brand:hover { color: var(--color-text); }
.site-brand__mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: var(--color-brand); color: var(--color-on-brand); font-size: .875rem; font-weight: 750; }
.site-nav { display: flex; min-width: 0; align-items: center; gap: 2px; }
.site-nav a { position: relative; display: inline-flex; min-height: 40px; align-items: center; padding: 0 10px; border-radius: var(--radius-sm); color: var(--color-text-secondary); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.site-nav a:hover { background: var(--color-surface-secondary); color: var(--color-text); }
.site-nav a[aria-current="page"] { background: var(--color-blue-light); color: var(--color-brand-dark); }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; right: 10px; bottom: 3px; left: 10px; height: 2px; border-radius: 2px; background: var(--color-brand); }
.site-menu-button { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.site-menu-button svg { width: 22px; height: 22px; }
.site-drawer[hidden] { display: none; }
.site-drawer { position: fixed; inset: var(--sticky-stack-height) 0 0; z-index: 950; }
.site-drawer__backdrop { position: absolute; inset: 0; border: 0; background: rgba(15, 23, 42, .42); }
.site-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); overflow-y: auto; border-left: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-3); }
.site-drawer__head { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.site-drawer__title { color: var(--color-text); font-weight: 650; }
.site-drawer__close { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.site-drawer__nav { display: grid; padding: var(--space-4); gap: var(--space-1); }
.site-drawer__nav a { display: flex; min-height: 48px; align-items: center; padding: 0 var(--space-4); border-radius: var(--radius-sm); color: var(--color-text-secondary); font-weight: 600; text-decoration: none; }
.site-drawer__nav a:hover, .site-drawer__nav a[aria-current="page"] { background: var(--color-blue-light); color: var(--color-brand-dark); }
body[data-ui="fluent"].shell-menu-open { overflow: hidden; }

.site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface-secondary); color: var(--color-text-secondary); }
.site-footer__main { display: grid; grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); gap: clamp(var(--space-6), 5vw, var(--space-16)); padding-block: var(--space-16); }
.site-footer__brand { --stack-space: var(--space-4); }
.site-footer__summary { max-width: 30ch; color: var(--color-text-secondary); font-size: var(--type-meta); line-height: 1.7; }
.site-footer address { color: var(--color-text-muted); font-size: .8125rem; font-style: normal; line-height: 1.65; }
.site-footer__heading { margin-bottom: var(--space-3); color: var(--color-text); font-size: .8125rem; font-weight: 700; }
.site-footer__links { display: grid; gap: var(--space-2); }
.site-footer__links a, .site-footer__links button { display: flex; width: fit-content; min-height: 44px; align-items: center; border: 0; background: transparent; color: var(--color-text-secondary); font: inherit; font-size: .8125rem; text-align: left; text-decoration: none; cursor: pointer; }
.site-footer__links a:hover, .site-footer__links button:hover { color: var(--color-brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .75rem; }
.site-footer__bottom a { color: inherit; }

@media (max-width: 1080px) {
  .site-nav { display: none; }
  .site-menu-button { display: inline-flex; }
  .site-footer__main { grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .ui-container { width: min(100% - 2 * var(--space-4), var(--container-default)); }
  .ui-section { padding-block: var(--space-16); }
  .ui-grid--catalogue { grid-template-columns: 1fr; }
  .ui-split { grid-template-columns: 1fr; gap: var(--space-10); }
  .ui-layout-sidebar { grid-template-columns: minmax(0, 1fr); }
  .ui-layout-sidebar__aside .ui-toc { position: static; max-height: none; overflow: visible; }
  .ui-hero { min-height: auto; }
  .ui-hero__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .ui-section-heading, .ui-cta { align-items: flex-start; flex-direction: column; }
  .ui-fact-grid { grid-template-columns: 1fr; }
  .ui-fact { border-right: 0; }
  .ui-fact:nth-last-child(2) { border-bottom: 1px solid var(--color-border); }
  .ui-card--link { grid-template-columns: auto minmax(0, 1fr); }
  .ui-card__action { display: none; }
  .ui-hero .ui-button, .ui-cta .ui-button { width: 100%; }
  .site-header__inner { gap: var(--space-3); }
  .site-brand__mark { width: 32px; height: 32px; }
  .site-footer__main { grid-template-columns: 1fr 1fr; padding-block: var(--space-12); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .site-footer__main { grid-template-columns: 1fr; }
  .site-footer__brand { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body[data-ui="fluent"]) { scroll-behavior: auto; }
  body[data-ui="fluent"] *,
  body[data-ui="fluent"] *::before,
  body[data-ui="fluent"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

.ui-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.ui-label--required::after { color: var(--color-error); content: " *"; }
.ui-control--code { min-height: 200px; font-family: var(--font-mono); font-size: var(--type-code); }
.ui-result { min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.ui-result:empty { display: none; }
.ui-result :where(p, li, dd) { overflow-wrap: anywhere; }
.ui-result ul { padding-left: 1.25rem; list-style: disc; }
.ui-result .ui-card { margin: 0; }
.ui-result .ui-card h3 { margin-bottom: var(--space-3); font-size: 1rem; }
.ui-kv { display: grid; grid-template-columns: minmax(140px, .7fr) minmax(0, 1.3fr); gap: var(--space-2) var(--space-4); }
.ui-kv dt { color: var(--color-text-muted); }
.ui-kv dd { min-width: 0; color: var(--color-text); overflow-wrap: anywhere; }
.ui-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: var(--space-3); }
.ui-stat-grid > div { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-secondary); }
.ui-stat-grid :where(strong, span) { display: block; }
.ui-stat-grid strong { font-size: 1.25rem; }
.ui-stat-grid span { color: var(--color-text-muted); font-size: .75rem; }
.ui-badge--ok { border-color: color-mix(in srgb, var(--color-success) 30%, white); background: var(--color-success-soft); color: var(--color-success-foreground); }
.ui-badge--warn { border-color: color-mix(in srgb, var(--color-warning) 35%, white); background: var(--color-warning-soft); color: #854D0E; }
.ui-badge--bad { border-color: color-mix(in srgb, var(--color-error) 30%, white); background: var(--color-error-soft); color: var(--color-error-foreground); }
.ui-preview__media { min-height: 112px; padding: var(--space-6); border-bottom: 1px solid var(--color-border); background: var(--color-surface-secondary); color: var(--color-text-muted); font-size: var(--type-meta); text-align: center; overflow-wrap: anywhere; }
.ui-preview__body { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6); }
.ui-code__value { min-height: 52px; padding: var(--space-4); color: var(--color-text); font: var(--type-code)/1.65 var(--font-mono); overflow-wrap: anywhere; }
.ui-longform { min-width: 0; overflow-wrap: anywhere; }
.ui-longform > :first-child { margin-top: 0; }
.ui-longform :where(p, li) { line-height: 1.78; }
.ui-longform :where(h2, h3, h4) + p { margin-top: var(--space-3); }
.ui-longform :where(.ui-card, .ui-callout, .ui-table-wrap, .ui-toc) { margin-block: var(--space-8); }
.ui-longform .ui-lead { margin-bottom: var(--space-8); }
.ui-longform blockquote { margin-inline: 0; padding: var(--space-4) var(--space-6); border-left: 4px solid var(--color-brand); background: var(--color-blue-light); color: var(--color-text-secondary); }
.ui-longform :where(ul, ol) { padding-left: 1.4rem; }
.ui-longform ul { list-style: disc; }
.ui-longform ol { list-style: decimal; }
.ui-longform li + li { margin-top: var(--space-2); }
.ui-longform .ui-code { margin-top: 1.25em; }
.ui-longform .ui-card .ui-button { width: fit-content; }
.ui-longform address { font-style: normal; }
.ui-toc { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-secondary); }
.ui-toc > :first-child { margin-top: 0; }
.ui-toc ul { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding-left: 1.2rem; }
.ui-toc a { display: flex; min-height: 44px; align-items: center; color: var(--color-blue-interactive); text-underline-offset: 3px; }
.ui-layout-sidebar__aside .ui-toc { position: sticky; top: calc(var(--sticky-stack-height) + var(--space-6)); max-height: calc(100vh - var(--sticky-stack-height) - var(--space-12)); margin: 0; overflow-y: auto; }
.ui-sources { display: grid; gap: var(--space-2); padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 1.25rem); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-secondary); }
.ui-list--steps { list-style: none !important; counter-reset: ui-step; padding-left: 0 !important; }
.ui-list--steps > li { position: relative; min-height: 48px; padding: var(--space-4) var(--space-4) var(--space-4) 56px; border-bottom: 1px solid var(--color-border); counter-increment: ui-step; }
.ui-list--steps > li::before { position: absolute; top: var(--space-3); left: var(--space-2); display: grid; width: 32px; height: 32px; place-items: center; border-radius: var(--radius-sm); background: var(--color-blue-light); color: var(--color-brand-deep); font-size: .75rem; font-weight: 700; content: counter(ui-step); }
.ui-list--check { list-style: none !important; padding-left: 0 !important; }
.ui-list--check > li { position: relative; padding-left: 28px; }
.ui-list--check > li::before { position: absolute; left: 0; color: var(--color-success); font-weight: 700; content: "✓"; }

@media (max-width: 767px) {
  .ui-form-grid, .ui-kv { grid-template-columns: 1fr; }
  .ui-control--code { min-height: 180px; }
  .ui-table { min-width: 520px; }
}
/* FLUENT-FOUNDATION:END */