@font-face {
  font-family: neusaNextProWide;
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("https://f5-sales-demo.github.io/shared/assets/d2c43d65a90270a24f54e777a21924b3dcf590dfcfdf4381a6dacd2e7da5bf91.woff2") format("woff2");
}

@font-face {
  font-family: neusaNextProWide;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("https://f5-sales-demo.github.io/shared/assets/3bd89111de3371e1fa9e10bab7ea3d6d35eee837b98731b0ff829cfa3c1cc27e.woff2") format("woff2");
}

@font-face {
  font-family: neusaNextProWide;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("https://f5-sales-demo.github.io/shared/assets/ec6f53dca2cb0781bf04d8a273a6d64e992dbdab315861b5c3a60b9c275fc3d4.woff2") format("woff2");
}

@font-face {
  font-family: neusaNextProWide;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("https://f5-sales-demo.github.io/shared/assets/2e7154ec9ccaa5b3d695a81a41000d8f9f8fa3c5a264533e146b9d2359c87f34.woff2") format("woff2");
}

@font-face {
  font-family: neusaNextProWide;
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("https://f5-sales-demo.github.io/shared/assets/567e1f99d0291a821a5c7e80ae3713488fa204c197343aaf90841beaf52ccb5a.woff2") format("woff2");
}

@font-face {
  font-family: neusaNextProWide;
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("https://f5-sales-demo.github.io/shared/assets/2811287f931e3d8bf9c212bb19fb6053d0bbb9c0c857ea01344dae448b51d9b3.woff2") format("woff2");
}

@font-face {
  font-family: proximaNova;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("https://f5-sales-demo.github.io/shared/assets/8685e4e04b8e103611c574fe8f2b3abb36e126919d45d5848c4bb06d8edec84a.woff2") format("woff2");
}

@font-face {
  font-family: proximaNova;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("https://f5-sales-demo.github.io/shared/assets/73ac7c0068ab84fcb7caf1e3353c0d50111867194d59570593cec72184f28425.woff2") format("woff2");
}

@font-face {
  font-family: proximaNova;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("https://f5-sales-demo.github.io/shared/assets/e3b183771ff499b4d57e07811bb3ea9357c977024d7adc6b39e974f075c52ad8.woff2") format("woff2");
}

@font-face {
  font-family: proximaNova;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("https://f5-sales-demo.github.io/shared/assets/352c6c9e74f1c1b00c32d4a902ba867f658855ee33a3e23307bd11048f7c06a1.woff2") format("woff2");
}
/* ===== F5 Brand Color Tokens ===== */
:root {
  --f5-red: #e4002b;
  --f5-red-1: #f7b2bf;
  --f5-red-2: #f06680;
  --f5-red-3: #a70020;
  --f5-red-4: #720016;
  --f5-tangerine: #f29a36;
  --f5-tangerine-1: #ffe4c4;
  --f5-tangerine-2: #ffbd61;
  --f5-tangerine-3: #a35700;
  --f5-tangerine-4: #7a4100;
  --f5-river: #0e41aa;
  --f5-river-1: #b7c6e5;
  --f5-river-2: #6e8dcc;
  --f5-river-3: #0b3180;
  --f5-river-4: #072155;
  --f5-raspberry: #ab2782;
  --f5-raspberry-1: #e6bed9;
  --f5-raspberry-2: #cd7db4;
  --f5-raspberry-3: #801d62;
  --f5-raspberry-4: #561441;
  --f5-jade: #009639;
  --f5-jade-1: #b2dfc4;
  --f5-jade-2: #66c088;
  --f5-jade-3: #00712b;
  --f5-jade-4: #004b1d;
  --f5-eggplant: #62228b;
  --f5-eggplant-1: #cdabe3;
  --f5-eggplant-2: #9c59c9;
  --f5-eggplant-3: #822cb8;
  --f5-eggplant-4: #41175d;
  --f5-bay: #0072b0;
  --f5-bay-1: #b2d7eb;
  --f5-bay-2: #66afd7;
  --f5-bay-3: #005c8d;
  --f5-bay-4: #003d5f;
  --f5-white: #fff;
  --f5-white-1: #faf9f7;
  --f5-white-2: #f5f5f5;
  --f5-white-3: #e6e6e6;
  --f5-white-4: #ccc;
  --f5-black: #000;
  --f5-black-1: #999;
  --f5-black-2: #666;
  --f5-black-3: #343434;
  --f5-black-4: #222;
}

/* ===== F5 XC Multi-Color Icon Variables ===== */
:root {
  --color-N600: #0f1e57;
  --color-brand: #e4002b;
  --color-blue-light: #e5eaff;
  --color-N200: #e6e9f3;
}

:root:not([data-theme="light"]) {
  --color-N600: #e5eaff;
  --color-blue-light: #0e41aa;
  --color-N200: #1a2a6c;
}

:root[data-theme="light"] {
  --color-N600: #0f1e57;
  --color-blue-light: #e5eaff;
  --color-N200: #e6e9f3;
}

/* ===== Dark Mode (Starlight default) ===== */
:root {
  --sl-color-white: var(--f5-white);
  --sl-color-gray-1: var(--f5-white-2);
  --sl-color-gray-2: var(--f5-white-4);
  --sl-color-gray-3: var(--f5-black-1);
  --sl-color-gray-4: var(--f5-black-2);
  --sl-color-gray-5: var(--f5-black-3);
  --sl-color-gray-6: var(--f5-black-4);
  --sl-color-black: var(--f5-black);
  --sl-color-accent-low: var(--f5-red-4);
  --sl-color-accent: var(--f5-red-2);
  --sl-color-accent-high: var(--f5-red-1);

  --sl-color-bg-badge-default: var(--f5-bay-4);
  --sl-color-bg-badge-note: var(--f5-bay-4);
  --sl-color-bg-badge-danger: var(--f5-red-4);
  --sl-color-bg-badge-success: var(--f5-jade-4);
  --sl-color-bg-badge-caution: var(--f5-tangerine-4);
  --sl-color-bg-badge-tip: var(--f5-eggplant-4);

  /* ===== Design Token Scale ===== */

  /* Border radius */
  --f5-radius-xs: 0.1875rem;
  --f5-radius-sm: 0.3125rem;
  --f5-radius-md: 0.375rem;
  --f5-radius-lg: 0.5rem;
  --f5-radius-full: 999px;

  /* Shadows — dark mode (neutral-tinted #cccccc base) */
  --f5-shadow-inset: inset 0px 1px 2px 1px #cccccc0d;
  --f5-shadow-low: 0px 1px 1px 0px #cccccc0a, 0px 2px 2px 0px #cccccc0a;
  --f5-shadow-mid: 0px 2px 3px 0px #cccccc0d, 0px 8px 16px -10px #cccccc1a;
  --f5-shadow-high: 0px 2px 3px 0px #cccccc1a, 0px 16px 16px -10px #cccccc1a;
  --f5-shadow-higher: 0px 2px 3px 0px #cccccc0d, 0px 12px 28px 0px #cccccc26;

  /* Borders — dark mode (alpha-transparent) */
  --f5-border-faint: #f5f5f51a;
  --f5-border-default: #f5f5f533;
  --f5-border-strong: #ccc6;

  /* Surfaces — dark mode */
  --f5-surface-hover: var(--f5-black-3);
  --f5-surface-active: var(--f5-black-2);

  /* Transitions */
  --f5-transition-fast: 0.15s ease;
  --f5-transition-base: 0.2s ease;
  --f5-transition-bounce: 0.2s cubic-bezier(0.68, -0.2, 0.265, 1.15);
  --f5-transition-decelerate: 0.6s cubic-bezier(0.5, 1, 0.89, 1);
  --f5-transition-spring: 0.2s cubic-bezier(0.54, 1.5, 0.38, 1.11);

  /* Focus rings */
  --f5-focus-action:
    inset 0 0 0 1px var(--f5-river), 0 0 0 3px var(--f5-river-2);
  --f5-focus-critical:
    inset 0 0 0 1px var(--f5-red-3), 0 0 0 3px var(--f5-red-2);
}

/* ===== Light Mode ===== */
:root[data-theme="light"] {
  --sl-color-white: var(--f5-black-4);
  --sl-color-gray-1: var(--f5-black-4);
  --sl-color-gray-2: var(--f5-black-3);
  --sl-color-gray-3: var(--f5-black-2);
  --sl-color-gray-4: var(--f5-black-1);
  --sl-color-gray-5: var(--f5-white-4);
  --sl-color-gray-6: var(--f5-white-2);
  --sl-color-gray-7: var(--f5-white-1);
  --sl-color-black: var(--f5-white);
  --sl-color-accent-low: var(--f5-red-1);
  --sl-color-accent: var(--f5-red);
  --sl-color-accent-high: var(--f5-red-4);

  --sl-color-bg-badge-default: var(--f5-bay-1);
  --sl-color-bg-badge-note: var(--f5-bay-1);
  --sl-color-bg-badge-danger: var(--f5-red-1);
  --sl-color-bg-badge-success: var(--f5-jade-1);
  --sl-color-bg-badge-caution: var(--f5-tangerine-1);
  --sl-color-bg-badge-tip: var(--f5-eggplant-1);

  /* Shadows — light mode (#343434 base) */
  --f5-shadow-inset: inset 0px 1px 2px 1px #3434341a;
  --f5-shadow-low: 0px 1px 1px 0px #3434340d, 0px 2px 2px 0px #3434340d;
  --f5-shadow-mid: 0px 2px 3px 0px #3434341a, 0px 8px 16px -10px #34343433;
  --f5-shadow-high: 0px 2px 3px 0px #34343426, 0px 16px 16px -10px #34343433;
  --f5-shadow-higher: 0px 2px 3px 0px #3434341a, 0px 12px 28px 0px #34343440;

  /* Borders — light mode */
  --f5-border-faint: #3434341a;
  --f5-border-default: #34343433;
  --f5-border-strong: #2226;

  /* Surfaces — light mode */
  --f5-surface-hover: var(--f5-white-2);
  --f5-surface-active: var(--f5-white-3);
}

/* ===== Fonts & Layout ===== */
:root {
  --sl-font: "proximaNova", system-ui, "Segoe UI", helvetica, arial, sans-serif;
  --sl-font-heading:
    "neusaNextProWide", system-ui, "Segoe UI", helvetica, arial, sans-serif;
  --sl-content-width: 60rem;
  --sl-sidebar-width: 15rem;

  /* Typography scale mapped to F5 hierarchy */
  --sl-line-height-headings: 1.1;
  --sl-text-h1: var(--sl-text-5xl);
  --sl-text-h2: var(--sl-text-3xl);
  --sl-text-h3: var(--sl-text-2xl);
  --sl-text-h4: var(--sl-text-lg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--sl-font-heading);
}

/* F5 type hierarchy weights */
h1,
h2 {
  font-weight: 700;
}

h3 {
  font-weight: 500;
}

h4,
h5,
h6 {
  font-family: var(--sl-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (width >= 72rem) {
  .right-sidebar-container {
    max-width: 11rem;
  }
}

.mermaid-container {
  border: 1px solid var(--f5-border-default);
  border-radius: var(--f5-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--f5-shadow-mid);
  margin-block: 1.5rem;
  background: #fff;
}

/* Force white background on Mermaid SVG for dark mode compatibility */
html .mermaid-container svg {
  background: white;
  border-radius: var(--f5-radius-md);
}

/* Strip Starlight's default <pre> styling from the mermaid wrapper to prevent double border */
.mermaid-container pre.mermaid {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

/* ===== Content Image Styling (screenshots) ===== */
/* Use descendant selector from .sl-markdown-content so images inside
  lists, steps, blockquotes, and asides are also styled.
  Keep p > img to avoid styling inline icons in text spans. */
.sl-markdown-content p > img,
.sl-markdown-content p > starlight-image-zoom-zoomable > img {
  border: 1px solid var(--f5-border-default);
  border-radius: var(--f5-radius-lg);
  box-shadow: var(--f5-shadow-mid);
  margin-block: 0.5rem;
  transition: box-shadow var(--f5-transition-base);
}

.sl-markdown-content p > img:hover,
.sl-markdown-content p > starlight-image-zoom-zoomable > img:hover {
  box-shadow: var(--f5-shadow-high);
}

/* ===== Light/Dark Screenshot Component ===== */
.screenshot-pair {
  margin-block: 0.5rem;
}

.sl-markdown-content .screenshot-pair img,
.sl-markdown-content .screenshot-pair starlight-image-zoom-zoomable > img {
  border: 1px solid var(--f5-border-default);
  border-radius: var(--f5-radius-lg);
  box-shadow: var(--f5-shadow-mid);
  margin-block: 0;
  transition: box-shadow var(--f5-transition-base);
}

.sl-markdown-content .screenshot-pair img:hover,
.sl-markdown-content
  .screenshot-pair
  starlight-image-zoom-zoomable
  > img:hover {
  box-shadow: var(--f5-shadow-high);
}

/* Dark mode (default): hide light variant */
:root:not([data-theme="light"]) .screenshot-pair .screenshot-light,
:root:not([data-theme="light"])
  .screenshot-pair
  starlight-image-zoom-zoomable:has(.screenshot-light) {
  display: none;
}

/* Light mode: hide dark variant */
:root[data-theme="light"] .screenshot-pair .screenshot-dark,
:root[data-theme="light"]
  .screenshot-pair
  starlight-image-zoom-zoomable:has(.screenshot-dark) {
  display: none;
}

.starlight-aside {
  border-radius: var(--f5-radius-md);
  box-shadow: var(--f5-shadow-low);
}

/* Starlight Card — consistent shadow */
.card {
  box-shadow: var(--f5-shadow-low);
  transition:
    box-shadow var(--f5-transition-base),
    transform var(--f5-transition-base);
}

.card:hover {
  box-shadow: var(--f5-shadow-mid);
  transform: translateY(-1px);
}

/* Badge — consistent shadow */
.sl-badge {
  box-shadow: var(--f5-shadow-low);
}

.expressive-code .frame {
  --header-border-radius: var(--f5-radius-md);
  border-radius: var(--f5-radius-md);
  overflow: hidden;
  box-shadow: var(--f5-shadow-mid);
}

/* macOS iTerm-style window frame for terminal code blocks */
.expressive-code .frame.is-terminal {
  border: 2px solid rgb(255 255 255 / 15%);
}

:root[data-theme="light"] .expressive-code .frame.is-terminal {
  border-color: rgb(0 0 0 / 20%);
}

html .expressive-code .frame.is-terminal .header {
  padding-block: 0.25rem;
  border: none;
  border-radius: var(--f5-radius-md) var(--f5-radius-md) 0 0;
  background: #323232;
  color: #ccc;
}

html .expressive-code .frame.is-terminal .header::after {
  border-bottom: none;
}

html .expressive-code .frame.is-terminal .header::before {
  -webkit-mask-image: none;
  mask-image: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23ff5f56'/%3E%3Cpath d='M3.8 3.8L8.2 8.2M8.2 3.8L3.8 8.2' stroke='%234d0000' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='26' cy='6' r='6' fill='%23ffbd2e'/%3E%3Cpath d='M23.5 6H28.5' stroke='%23995700' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='46' cy='6' r='6' fill='%2327c93f'/%3E%3Cpolygon points='43.5,3.5 43.5,6 46,3.5' fill='%23006500'/%3E%3Cpolygon points='48.5,8.5 48.5,6 46,8.5' fill='%23006500'/%3E%3C/svg%3E")
    no-repeat center / contain;
  opacity: 1;
  width: 52px;
  height: 12px;
  border-radius: 0;
  box-shadow: none;
}

.expressive-code .frame.is-terminal pre {
  border: none;
  border-radius: 0 0 var(--f5-radius-md) var(--f5-radius-md);
}

html:root:not([data-theme="light"]) .expressive-code .frame.is-terminal pre {
  background: #1a1b26;
}

/* Breadcrumb navigation */
.breadcrumbs {
  position: sticky;
  top: calc(var(--sl-nav-height, 3.5rem) + var(--sl-mobile-toc-height, 0rem));
  z-index: 1;
  background: var(--sl-color-black);
  padding-block: 0.5rem;
  padding-inline: var(--sl-content-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: var(--sl-color-gray-3);
}

.breadcrumbs li + li::before {
  content: "/";
  padding-inline: 0.375rem;
  color: var(--sl-color-gray-5);
}

.breadcrumbs a {
  color: var(--sl-color-text-accent);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--sl-color-white);
}

/* Edit on GitHub pill */
.edit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--f5-radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sl-color-gray-3);
  background: var(--sl-color-gray-6);
  border: 1px solid var(--f5-border-default);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    color var(--f5-transition-fast),
    background var(--f5-transition-fast),
    border-color var(--f5-transition-fast);
}

.edit-link:hover {
  color: var(--sl-color-white);
  background: var(--sl-color-gray-5);
  border-color: var(--sl-color-gray-4);
  text-decoration: none;
}

a.edit-link svg {
  flex-shrink: 0;
}

/* ===== Color Swatch Styles ===== */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1rem;
  margin-block: 1.5rem;
}

.swatch {
  border-radius: var(--f5-radius-md);
  overflow: hidden;
  box-shadow: var(--f5-shadow-low);
  border: 1px solid var(--f5-border-default);
}

.swatch-color {
  height: 5rem;
  display: flex;
  align-items: flex-end;
  padding: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--sl-font);
}

.swatch-color.text-light {
  color: #fff;
}

.swatch-color.text-dark {
  color: #000;
}

.swatch-label {
  padding: 0.5rem;
  font-size: 0.7rem;
  line-height: 1.4;
  font-family: var(--sl-font);
  background: var(--sl-color-gray-6);
  color: var(--sl-color-gray-1);
}

.swatch-label code {
  display: block;
  font-size: 0.65rem;
  color: var(--sl-color-gray-3);
}

/* ===== Brand Icon Grid Styles ===== */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 1rem;
  margin-block: 1.5rem;
}

.icon-card {
  border-radius: var(--f5-radius-md);
  overflow: hidden;
  box-shadow: var(--f5-shadow-low);
  border: 1px solid var(--f5-border-default);
  text-align: center;
  margin: 0;
}

.icon-card-image {
  padding: 0;
  background: var(--sl-color-gray-7, #faf9f7);
}

:root:not([data-theme="light"]) .icon-card-image {
  background: var(--sl-color-gray-6);
}

.icon-card .icon-card-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Invert near-black SVGs for dark mode visibility */
:root:not([data-theme="light"]) .icon-card-image img {
  filter: invert(1);
}

/* Preserve original colors for branded/color-variant icons in dark mode */
:root:not([data-theme="light"]) .icon-card-image.no-invert img {
  filter: none;
}

.icon-card-label {
  margin: 0;
  padding: 0.375rem 0.5rem;
  font-size: 0.65rem;
  line-height: 1.3;
  font-family: var(--sl-font);
  background: var(--sl-color-gray-6);
  color: var(--sl-color-gray-1);
  overflow-wrap: break-word;
}

/* ===== Scroll-to-Top Button Size Override ===== */
html .scroll-to-top-button {
  width: 36px;
  height: 36px;
}

html .scroll-to-top-button svg {
  width: 20px;
  height: 20px;
}

html .scroll-to-top-button .scroll-progress-ring {
  width: 36px;
  height: 36px;
}

.scroll-to-top-button .scroll-progress-ring circle {
  cx: 18;
  cy: 18;
  r: 16;
}

/* ===== Prevent Scalar API Viewer Body Pollution ===== */
html body.dark-mode,
html body.light-mode {
  background-color: var(--sl-color-bg);
  color: var(--sl-color-text);
}

body {
  --scalar-background-1: unset;
  --scalar-background-2: unset;
  --scalar-background-3: unset;
}

/* ===== Phase 2: Sidebar Navigation Enhancement ===== */
.sidebar-content a {
  border-radius: var(--f5-radius-sm);
  transition:
    background-color var(--f5-transition-fast),
    color var(--f5-transition-fast);
}

.sidebar-content a:hover {
  background-color: var(--f5-surface-hover);
}

.sidebar-content a[aria-current="page"] {
  background-color: var(--f5-surface-active);
  color: var(--sl-color-white);
  font-weight: 600;
  border-inline-start: 3px solid var(--sl-color-accent);
  padding-inline-start: calc(0.5rem - 3px);
}

/* ===== Phase 3: Card Hover Effects + Link Transitions ===== */
.swatch,
.icon-card {
  transition:
    box-shadow var(--f5-transition-base),
    transform var(--f5-transition-base);
}

.swatch:hover,
.icon-card:hover {
  box-shadow: var(--f5-shadow-mid);
  transform: translateY(-1px);
}

.sl-markdown-content a {
  transition: color var(--f5-transition-fast);
}

/* ===== Phase 4: Button Component System ===== */
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-critical {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--f5-radius-sm);
  padding: 0.625rem 1rem;
  min-height: 2.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  font-family: var(--sl-font);
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background: var(--f5-red);
  color: var(--f5-white);
  border: none;
  transition:
    background-color var(--f5-transition-fast),
    box-shadow var(--f5-transition-fast);
}

.btn-primary:hover {
  background: var(--f5-red-3);
  box-shadow: var(--f5-shadow-low);
  text-decoration: none;
  color: var(--f5-white);
}

.btn-secondary {
  background: transparent;
  color: var(--sl-color-gray-2);
  border: 1px solid var(--f5-border-default);
  transition:
    background-color var(--f5-transition-fast),
    border-color var(--f5-transition-fast);
}

.btn-secondary:hover {
  background: var(--f5-surface-hover);
  border-color: var(--f5-border-strong);
  text-decoration: none;
}

.btn-tertiary {
  background: transparent;
  color: var(--sl-color-accent);
  border: none;
  transition: background-color var(--f5-transition-fast);
}

.btn-tertiary:hover {
  background: var(--f5-surface-hover);
  text-decoration: none;
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  min-height: 2rem;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  min-height: 3rem;
}

.btn-critical {
  background: var(--f5-red-3);
  color: var(--f5-white);
  border: none;
  transition:
    background-color var(--f5-transition-fast),
    box-shadow var(--f5-transition-fast);
}

.btn-critical:hover {
  background: var(--f5-red-4);
  box-shadow: var(--f5-shadow-low);
  text-decoration: none;
  color: var(--f5-white);
}

.btn-critical:focus-visible {
  box-shadow: var(--f5-focus-critical);
}

/* ===== Phase 5: Hero Gradients ===== */
.hero-gradient-primary {
  background: linear-gradient(
    135deg,
    var(--f5-river-2) 0%,
    var(--f5-river) 100%
  );
}

.hero-gradient-eggplant {
  background: linear-gradient(
    135deg,
    var(--f5-eggplant-2) 0%,
    var(--f5-eggplant) 100%
  );
}

.hero-gradient-red {
  background: linear-gradient(135deg, var(--f5-red-2) 0%, var(--f5-red) 100%);
}

:root[data-theme="light"] .hero-gradient-faint {
  background: linear-gradient(180deg, #faf9f7 0%, #f5f5f5 100%);
}

:root:not([data-theme="light"]) .hero-gradient-faint {
  background: linear-gradient(180deg, #222 0%, #000 100%);
}

.hero-fade {
  position: relative;
}

.hero-fade::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--sl-color-black));
  pointer-events: none;
}

.hero-vignette {
  position: relative;
}

.hero-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgb(0 0 0 / 15%) 100%
  );
  pointer-events: none;
}

/* ===== Phase 6: Focus Rings + Final Transition Polish ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--f5-focus-action);
}

.breadcrumbs a {
  transition: color var(--f5-transition-fast);
}

.social-links a {
  transition:
    opacity var(--f5-transition-base),
    color var(--f5-transition-base);
}

/* Widen mega-menu flyout to prevent title word-wrap in two-column layouts.
  Radix JS sets --radix-navigation-menu-viewport-width based on intrinsic
  content measurement (~320px), so max-width alone cannot force expansion.
  We override min-width to ensure two-column grids have adequate room. */
.smm-viewport {
  min-width: min(90vw, 650px);
  max-width: min(90vw, 800px);
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Scale mega-menu icons to match the height of the title + description text block */
.smm-link-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 0;
}

/* ===== Responsive Splash Hero Layout & Mobile Header ===== */
.site-title {
  min-width: 0;
}

.site-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

@media (max-width: 49.99rem) {
  .hero {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-block: 1rem 1.5rem;
  }

  .hero > .stack {
    order: 1;
    width: 100%;
    gap: 1.25rem;
  }

  .hero > img,
  .hero > picture,
  .hero > .hero-html {
    order: 2;
    width: min(75%, 15rem);
    max-height: 12rem;
    margin-inline: auto;
    object-fit: contain;
  }

  .hero > .hero-html img {
    max-height: 12rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
}

@media (min-width: 50rem) {
  .hero {
    padding-block: clamp(1.5rem, calc(1rem + 3vmin), 3rem);
    gap: clamp(1.5rem, 3vw, 3rem);
  }

  .hero > img,
  .hero > picture,
  .hero > .hero-html {
    max-height: 20rem;
  }

  .hero > .hero-html img {
    max-height: 20rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
}


/* The sales showcase prioritizes destinations over decorative hero space. */
body:has(.sales-showcase) .hero {
  padding-block: 1rem;
  grid-template-columns: 1fr;
  gap: 1rem;
}
body:has(.sales-showcase) .hero h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
}
body:has(.sales-showcase) .hero .tagline {
  max-width: 48rem;
  font-size: var(--sl-text-lg);
}
body:has(.sales-showcase) .hero > .stack { gap: 1rem; }
body:has(.sales-showcase) .hero .actions { gap: 0.75rem; }
.sales-showcase { --showcase-gap: 1rem; }
.sales-showcase .card-grid { gap: var(--showcase-gap); }
.sales-showcase .sl-link-card { background: var(--sl-color-gray-7, var(--sl-color-gray-6)); }
.sales-showcase h2 { margin-block-start: 2rem; }
.sales-showcase h3 { margin-block-start: 1rem; }
@media (max-width: 49.99rem) {
  body:has(.sales-showcase) .hero { padding-block: 0.5rem; }
  body:has(.sales-showcase) .hero .actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .sl-link-card, .smm-viewport, .smm-content { transition: none !important; animation: none !important; }
  .sl-link-card:hover { transform: none; }
}

	@layer starlight.core {
		.sl-mega-menu-header {
			display: flex;
			gap: var(--sl-nav-gap);
			justify-content: space-between;
			align-items: center;
			height: 100%;
		}

		.title-wrapper {
			/* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
			overflow: clip;
			/* Avoid clipping focus ring around link inside title wrapper. */
			padding: 0.25rem;
			margin: -0.25rem;
			min-width: 0;
		}

		.right-group { display: none; }
		.compact-preferences { position: relative; flex-shrink: 0; }
		.compact-preferences summary {
			cursor: pointer;
			padding: 0.75rem;
			min-height: 44px;
			list-style: none;
		}
		.preferences-panel {
			position: absolute;
			inset-inline-end: 0;
			top: calc(100% + 0.5rem);
			display: grid;
			gap: 0.5rem;
			padding: 0.75rem;
			background: var(--sl-color-bg-nav);
			border: 1px solid var(--sl-color-gray-5);
			border-radius: 0.5rem;
		}
		.search-project-source {
			display: block;
			font-size: var(--sl-text-sm);
			font-weight: 400;
			color: var(--sl-color-gray-2);
			margin-top: 0.25rem;
		}
		@media (min-width: 90rem) {
			.right-group { display: flex; }
			.compact-preferences { display: none; }
		}

		.right-group,
		.social-icons {
			gap: 1rem;
			align-items: center;
		}
		.social-icons::after {
			content: '';
			height: 2rem;
			border-inline-end: 1px solid var(--sl-color-gray-5);
		}

		/* Desktop nav is hidden on small screens */
		.smm-desktop-nav {
			display: none;
		}

		/* Mobile toggle is visible on small screens */
		.smm-mobile-toggle {
			display: flex;
			align-items: center;
		}

		@media (min-width: 90rem) {
			:root[data-has-sidebar] {
				--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
			}
			:root:not([data-has-toc]) {
				--__toc-width: 0rem;
			}
			.sl-mega-menu-header {
				--__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
				--__main-column-fr: calc(
					(
							100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
								(2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
								var(--sl-content-width)
						) / 2
				);
				display: grid;
				grid-template-columns:
					/* 1 (site title) */
					minmax(0, 1fr)
					/* 2 (mega-menu nav) */
					auto
					/* 3 (search box) */
					auto
					/* 4 (right items) */
					auto;
				align-content: center;
			}

			/* Show desktop nav, hide mobile toggle */
			.smm-desktop-nav {
				display: flex;
				align-items: center;
				justify-content: center;
				min-width: 0;
			}

			.smm-mobile-toggle {
				display: none;
			}
		}
	}


  .site-title {
    align-items: center;
    gap: var(--sl-nav-gap);
    font-size: var(--sl-text-h4);
    font-weight: 600;
    color: var(--sl-color-text-accent);
    text-decoration: none;
    white-space: nowrap;
    min-width: 0;
  }
  .site-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .site-title img {
    height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: 0 50%;
    flex-shrink: 0;
  }


  .project-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    border-top: 1px solid var(--sl-color-gray-5);
    margin-top: 2rem;
    padding-block: 1rem;
  }
  .project-links a { padding-block: 0.5rem; }


  .sl-link-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    border: 1px solid var(--sl-color-gray-5);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: var(--f5-shadow-low);
    position: relative;
    transition: box-shadow var(--f5-transition-base),
                transform var(--f5-transition-base);
  }

  .sl-link-card.has-icon {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .sl-link-card a {
    text-decoration: none;
    line-height: var(--sl-line-height-headings);
  }

  /* a11y fix for https://github.com/withastro/starlight/issues/487 */
  .sl-link-card a::before {
    content: '';
    position: absolute;
    inset: 0;
  }

  .sl-link-card .stack {
    min-width: 0;
    overflow-wrap: anywhere;
    display: grid;
    align-content: start;
    gap: 0.5rem;
  }

  .sl-link-card .title {
    color: var(--sl-color-white);
    font-weight: 600;
    font-size: var(--sl-text-lg);
  }

  .sl-link-card .description {
    color: var(--sl-color-gray-3);
    line-height: 1.5;
    margin: 0;
  }

  .sl-link-card .icon {
    color: var(--sl-color-gray-3);
  }

  .sl-link-card .card-icon {
    color: var(--sl-color-white);
    align-self: start;
    position: relative;
    width: 3rem;
    height: 3rem;
  }

  .sl-link-card .card-icon svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .sl-link-card:focus-within {
    outline: 2px solid var(--sl-color-text-accent);
    outline-offset: 3px;
  }

  /* Hover state */
  .sl-link-card:hover {
    background: var(--sl-color-gray-7, var(--sl-color-gray-6));
    border-color: var(--sl-color-gray-2);
    box-shadow: var(--f5-shadow-mid);
    transform: translateY(-1px);
  }

  .sl-link-card:hover .icon {
    color: var(--sl-color-white);
  }

.provider-local-nav { display:flex; flex-wrap:wrap; gap:.5rem 1rem; }
[data-f5-fallback] { padding:.5rem; }
/* ===================================================================
   starlight-mega-menu styles
   Namespace: .smm-* to avoid collisions with Starlight/consumer styles
   =================================================================== */

/* ── Desktop: Radix NavigationMenu ──────────────────────────────── */

.smm-root {
  position: relative;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.smm-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.125rem;
}

.smm-trigger,
.smm-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--sl-color-gray-2);
  font-family: var(--sl-font);
  font-size: var(--sl-text-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.smm-trigger:hover,
.smm-trigger:focus-visible,
.smm-trigger[data-state='open'],
.smm-link:hover,
.smm-link:focus-visible {
  color: var(--sl-color-white);
  background-color: var(--sl-color-gray-6);
}

.smm-trigger:focus-visible,
.smm-link:focus-visible {
  outline: 2px solid var(--sl-color-accent);
  outline-offset: 2px;
}

/* Chevron rotation */
.smm-chevron {
  transition: transform 250ms ease;
}
.smm-trigger[data-state='open'] .smm-chevron {
  transform: rotate(180deg);
}

/* ── Indicator (the arrow that slides between items) ────────────── */

.smm-indicator {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 0.625rem;
  overflow: hidden;
  z-index: 10;
  transition: width 250ms ease, transform 250ms ease;
}

.smm-indicator[data-state='visible'] {
  animation: smm-fadeIn 200ms ease;
}

.smm-indicator[data-state='hidden'] {
  animation: smm-fadeOut 200ms ease;
}

.smm-arrow {
  position: relative;
  top: 70%;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--sl-color-gray-6);
  border-top-left-radius: 2px;
  transform: rotate(45deg);
}

/* ── Viewport (the floating panel container) ────────────────────── */

.smm-viewport-wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  perspective: 2000px;
  padding-top: 0.625rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

.smm-viewport {
  position: relative;
  width: var(--radix-navigation-menu-viewport-width);
  height: var(--radix-navigation-menu-viewport-height);
  min-width: 320px;
  max-width: min(90vw, 700px);
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--sl-color-gray-5);
  background: var(--sl-color-black);
  box-shadow:
    0 10px 38px -10px rgba(0, 0, 0, 0.35),
    0 10px 20px -15px rgba(0, 0, 0, 0.2);
  transition: width 300ms ease, height 300ms ease;
}

.smm-viewport[data-state='open'] {
  animation: smm-scaleIn 275ms ease-out;
}

.smm-viewport[data-state='closed'] {
  animation: smm-scaleOut 250ms ease-in;
}

/* ── Content (individual panel — directional slide) ─────────────── */

.smm-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 1.25rem;
}

.smm-content[data-motion='from-start'] {
  animation: smm-slideFromStart 250ms ease;
}
.smm-content[data-motion='from-end'] {
  animation: smm-slideFromEnd 250ms ease;
}
.smm-content[data-motion='to-start'] {
  animation: smm-slideToStart 250ms ease;
}
.smm-content[data-motion='to-end'] {
  animation: smm-slideToEnd 250ms ease;
}

/* ── Panel layout ───────────────────────────────────────────────── */

.smm-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.smm-panel[data-layout='grid'] {
  display: grid;
  grid-template-columns: repeat(var(--smm-columns, 2), 1fr);
  gap: 1rem;
}

.smm-panel[data-layout='grid'] .smm-panel-footer {
  grid-column: 1 / -1;
}

/* ── Category ───────────────────────────────────────────────────── */

.smm-category-title {
  font-family: var(--sl-font);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sl-color-gray-3);
  margin: 0 0 0.5rem;
  padding: 0;
}

.smm-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* ── Link item ──────────────────────────────────────────────────── */

.smm-menu-link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: var(--sl-color-gray-2);
  transition: background-color 150ms ease, color 150ms ease;
}

.smm-menu-link:hover,
.smm-menu-link:focus-visible {
  background-color: var(--sl-color-gray-6);
  color: var(--sl-color-white);
}

.smm-menu-link:focus-visible {
  outline: 2px solid var(--sl-color-accent);
  outline-offset: -2px;
}

.smm-link-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  color: var(--sl-color-gray-3);
}

.smm-menu-link:hover .smm-link-icon {
  color: var(--sl-color-accent);
}

.smm-svg-image {
  display: block;
  object-fit: contain;
}

.smm-svg-mask {
  display: block;
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.smm-link-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.smm-link-label {
  font-family: var(--sl-font);
  font-size: var(--sl-text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: inherit;
}

.smm-link-description {
  font-family: var(--sl-font);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--sl-color-gray-3);
}

/* ── Panel footer ───────────────────────────────────────────────── */

.smm-panel-footer {
  border-top: 1px solid var(--sl-color-gray-5);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}

.smm-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  text-decoration: none;
  font-family: var(--sl-font);
  font-size: var(--sl-text-sm);
  font-weight: 500;
  color: var(--sl-color-accent);
  transition: background-color 150ms ease;
}

.smm-footer-link:hover,
.smm-footer-link:focus-visible {
  background-color: var(--sl-color-gray-6);
}

.smm-footer-link:focus-visible {
  outline: 2px solid var(--sl-color-accent);
  outline-offset: -2px;
}

.smm-footer-description {
  font-size: 0.75rem;
  color: var(--sl-color-gray-3);
  margin-left: 0.25rem;
}

.smm-footer-arrow {
  flex-shrink: 0;
  transition: transform 150ms ease;
}

.smm-footer-link:hover .smm-footer-arrow {
  transform: translateX(2px);
}

/* ── Mobile: Hamburger + overlay ────────────────────────────────── */

.smm-mobile-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--sl-color-gray-2);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}

.smm-mobile-button:hover,
.smm-mobile-button:focus-visible {
  color: var(--sl-color-white);
  background-color: var(--sl-color-gray-6);
}

.smm-mobile-button:focus-visible {
  outline: 2px solid var(--sl-color-accent);
  outline-offset: 2px;
}

.smm-mobile-backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 100;
  animation: smm-fadeIn 200ms ease;
}

.smm-mobile-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 380px);
  background: var(--sl-color-black);
  border-left: 1px solid var(--sl-color-gray-5);
  z-index: 101;
  display: flex;
  flex-direction: column;
  animation: smm-slideInRight 250ms ease-out;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.smm-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sl-color-gray-5);
  flex-shrink: 0;
}

.smm-mobile-title {
  font-family: var(--sl-font);
  font-size: var(--sl-text-base, 1rem);
  font-weight: 600;
  color: var(--sl-color-white);
}

.smm-mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--sl-color-gray-2);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}

.smm-mobile-close:hover,
.smm-mobile-close:focus-visible {
  color: var(--sl-color-white);
  background-color: var(--sl-color-gray-6);
}

.smm-mobile-close:focus-visible {
  outline: 2px solid var(--sl-color-accent);
  outline-offset: -2px;
}

.smm-mobile-nav {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ── Mobile: Accordion sections ─────────────────────────────────── */

.smm-mobile-section {
  border-radius: 0.375rem;
}

.smm-mobile-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  font-family: var(--sl-font);
  font-size: var(--sl-text-sm);
  font-weight: 500;
  color: var(--sl-color-gray-2);
  cursor: pointer;
  list-style: none;
  transition: color 150ms ease, background-color 150ms ease;
}

.smm-mobile-summary::-webkit-details-marker {
  display: none;
}

.smm-mobile-summary:hover {
  color: var(--sl-color-white);
  background-color: var(--sl-color-gray-6);
}

.smm-mobile-chevron {
  transition: transform 200ms ease;
}

.smm-mobile-section[open] > .smm-mobile-summary .smm-mobile-chevron {
  transform: rotate(180deg);
}

.smm-mobile-panel {
  padding: 0.25rem 0 0.5rem 0.75rem;
}

.smm-mobile-category {
  margin-bottom: 0.75rem;
}

.smm-mobile-category:last-child {
  margin-bottom: 0;
}

.smm-mobile-category-title {
  font-family: var(--sl-font);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sl-color-gray-3);
  margin: 0 0 0.375rem 0.75rem;
  padding: 0;
}

.smm-mobile-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.smm-mobile-link {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: var(--sl-color-gray-2);
  transition: background-color 150ms ease, color 150ms ease;
}

.smm-mobile-link:hover,
.smm-mobile-link:focus-visible {
  background-color: var(--sl-color-gray-6);
  color: var(--sl-color-white);
}

.smm-mobile-link-icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  color: var(--sl-color-gray-3);
}

.smm-mobile-link-text {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.smm-mobile-link-label {
  font-family: var(--sl-font);
  font-size: var(--sl-text-sm);
  font-weight: 500;
  line-height: 1.4;
}

.smm-mobile-link-desc {
  font-family: var(--sl-font);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--sl-color-gray-3);
}

.smm-mobile-footer-link {
  display: block;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--sl-color-gray-5);
  padding-top: 0.75rem;
  font-family: var(--sl-font);
  font-size: var(--sl-text-sm);
  font-weight: 500;
  color: var(--sl-color-accent);
  text-decoration: none;
  border-radius: 0.375rem;
  transition: background-color 150ms ease;
}

.smm-mobile-footer-link:hover {
  background-color: var(--sl-color-gray-6);
}

.smm-mobile-top-link {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  font-family: var(--sl-font);
  font-size: var(--sl-text-sm);
  font-weight: 500;
  color: var(--sl-color-gray-2);
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}

.smm-mobile-top-link:hover,
.smm-mobile-top-link:focus-visible {
  color: var(--sl-color-white);
  background-color: var(--sl-color-gray-6);
}

/* ── Animations ─────────────────────────────────────────────────── */

@keyframes smm-scaleIn {
  from {
    opacity: 0;
    transform: rotateX(-8deg) scale(0.96);
  }
  to {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
  }
}

@keyframes smm-scaleOut {
  from {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
  }
  to {
    opacity: 0;
    transform: rotateX(-8deg) scale(0.96);
  }
}

@keyframes smm-slideFromStart {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes smm-slideFromEnd {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes smm-slideToStart {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes smm-slideToEnd {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes smm-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes smm-fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes smm-slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* ── Reduced motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .smm-viewport,
  .smm-content,
  .smm-indicator,
  .smm-chevron,
  .smm-mobile-chevron,
  .smm-mobile-overlay,
  .smm-mobile-backdrop,
  .smm-footer-arrow {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}

/* ── Print ──────────────────────────────────────────────────────── */

@media print {
  .smm-root,
  .smm-mobile-button,
  .smm-mobile-backdrop,
  .smm-mobile-overlay {
    display: none !important;
  }
}