/* ==========================================================================
   Dxtra Documentation — Stripe-inspired theme v2
   Fonts: Figtree (text), Space Mono (code)
   Note: MkDocs Material sets html font-size to 150% → 1rem = 24px
   All rem values below are calibrated for this base.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --dx-indigo: #311B92;
  --dx-indigo-dark: #221266;
  --dx-indigo-light: #5C35C9;
  --dx-indigo-bg: #EDE7F6;
  --dx-accent: #F50057;
  --dx-text: #221266;
  --dx-text-secondary: #6E6B99;
  --dx-text-tertiary: #9590B8;
  --dx-border: #D1C4E9;
  --dx-bg: #ffffff;
  --dx-bg-muted: #F7F8FC;
  --dx-dot-color: rgba(49, 27, 146, 0.175);
  --dx-link: #311B92;
  --dx-radius: 6px;
  --dx-radius-lg: 10px;
  --dx-transition: 120ms ease;
  --dx-content-width: 1080px;
}

/* Dark mode */
[data-md-color-scheme="slate"] {
  --dx-indigo: #F50057;
  --dx-indigo-dark: #FF4081;
  --dx-indigo-light: #C51162;
  --dx-text: #E8E0F0;
  --dx-text-secondary: #B0A8C8;
  --dx-text-tertiary: #7A6FA0;
  --dx-border: #2D2250;
  --dx-bg: #0D0924;
  --dx-bg-muted: #15103A;
  --dx-indigo-bg: #1E1650;
  --dx-link: #F50057;
  --dx-dot-color: rgba(245, 0, 87, 0.18);
  /* Override Material's own dark-mode color variables */
  --md-accent-fg-color: #F50057;
  --md-primary-fg-color: #F50057;
  --md-typeset-a-color: #F50057;
}

/* ---------- Material colour overrides ---------- */
[data-md-color-primary="indigo"] {
  --md-primary-fg-color: var(--dx-indigo);
  --md-primary-fg-color--light: var(--dx-indigo-light);
  --md-primary-fg-color--dark: var(--dx-indigo-dark);
  --md-accent-fg-color: var(--dx-indigo);
  --md-accent-fg-color--transparent: rgba(49, 27, 146, 0.1);
}

/* Dark mode: compound selectors to beat Material's single-attribute specificity */
[data-md-color-scheme="slate"][data-md-color-primary="indigo"] {
  --md-primary-fg-color: #F50057;
  --md-primary-fg-color--light: #FF4081;
  --md-primary-fg-color--dark: #C51162;
}
[data-md-color-scheme="slate"][data-md-color-accent="deep-purple"] {
  --md-accent-fg-color: #F50057;
  --md-accent-fg-color--transparent: rgba(245, 0, 87, 0.1);
}
[data-md-color-scheme="slate"] .md-typeset a {
  color: #F50057;
}

/* ==========================================================================
   Global typography — Stripe-matched sizes (1rem = 24px)
   Stripe body: 16px → 0.667rem
   Stripe nav: 14px → 0.583rem
   Stripe h1: 28px → 1.167rem
   Stripe h2: 22px → 0.917rem
   Stripe h3: 18px → 0.75rem
   ========================================================================== */

.md-typeset {
  font-size: 0.667rem;   /* 16px — Stripe body text */
  line-height: 1.7;
  color: var(--dx-text);
}

.md-typeset h1 {
  font-size: 1.167rem;   /* 28px */
  font-weight: 600;
  color: var(--dx-text);
  letter-spacing: -0.025em;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.667rem;
}

.md-typeset h2 {
  font-size: 0.917rem;   /* 22px */
  font-weight: 600;
  color: var(--dx-text);
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.md-typeset h3 {
  font-size: 0.75rem;    /* 18px */
  font-weight: 600;
  color: var(--dx-text);
  letter-spacing: -0.01em;
}

.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--dx-text);
  font-weight: 600;
}

/* ==========================================================================
   Header — Stripe-style: white, minimal, border separator
   ========================================================================== */

.md-header {
  background-color: var(--dx-bg);
  color: var(--dx-text);
  box-shadow: none;
  border-bottom: none;                /* single line comes from .md-tabs instead */
  padding-top: 0.25rem;              /* breathing room above the header row */
  padding-bottom: 0.25rem;
}

[data-md-color-scheme="slate"] .md-header {
  background-color: var(--dx-bg);
}

.md-header__title {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 0.625rem;   /* 15px */
}

/* Hide the site name text — the "dxtra DOCS" logo is sufficient */
.md-header__topic {
  display: none !important;
}

/* Hide hamburger menu when tabs are visible (above 768px).
   Material shows it at ~1220px but we keep tabs visible down to 768px. */
@media (min-width: 769px) {
  .md-header__button[for="__drawer"] {
    display: none !important;
  }
}

/* On mobile (≤768px), move the hamburger BEFORE the logo.
   Material's DOM order is: logo → hamburger → title → search.
   We reorder via flex `order` so hamburger sits to the left of the logo. */
@media (max-width: 768px) {
  .md-header__button[for="__drawer"] {
    order: -1;               /* move before logo (logo defaults to order:0) */
  }
}

.md-header__button.md-logo {
  padding: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.333rem;          /* 8px gap between wordmark and DOCS */
}

.dxtra-logo__wordmark {
  height: 1.125rem;       /* 27px — sized to match Stripe's "stripe" wordmark in header */
  width: auto;
  display: block;
}

/* Light/dark wordmark toggle — !important needed to override flex context */
.dxtra-logo__wordmark--dark {
  display: none !important;
}

[data-md-color-scheme="slate"] .dxtra-logo__wordmark--light {
  display: none !important;
}

[data-md-color-scheme="slate"] .dxtra-logo__wordmark--dark {
  display: block !important;
}

.dxtra-logo__docs {
  font-family: var(--md-text-font-family, "Figtree", sans-serif);
  font-size: 0.625rem;    /* 15px */
  font-weight: 600;
  color: var(--dx-text-tertiary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 0.04rem;    /* minor optical alignment */
}

/* Reorder header: move palette toggle after search */
.md-header__inner {
  display: flex;
  align-items: center;
}

.md-header__option {
  order: 10;               /* push palette toggle to the end */
}

.md-header__option .md-header__button {
  color: var(--dx-text-tertiary);
}

.md-header__option .md-header__button:hover {
  color: var(--dx-text);
}

/* ---------- Navigation tabs ---------- */
.md-tabs {
  background-color: var(--dx-bg);
  border-bottom: 1px solid var(--dx-border);
  box-shadow: none;
  overflow: visible;
  display: block !important;   /* override Material hiding tabs <1830px */
  position: relative;          /* positioning context for the overflow "..." button */
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: var(--dx-bg);
  border-bottom-color: var(--dx-border);
}

.md-tabs__link {
  font-size: 0.583rem !important;  /* 14px — lock, never let Material shrink */
  font-weight: 500;
  color: var(--dx-text-secondary);
  opacity: 1 !important;          /* override Material's 0.7 default */
  transition: color var(--dx-transition);
  margin-top: 0 !important;       /* override Material's 0.8rem margin-top */
  padding-top: 0.5rem !important;      /* more space above — separates from header/search */
  padding-bottom: 0.25rem !important;  /* less space below — tighter to the border line */
  padding-left: 0.333rem !important;   /* 8px — tighter than Material default */
  padding-right: 0.333rem !important;
}

.md-tabs__link:hover {
  color: var(--dx-text);
}

/* No active/highlight state on tabs — all items same weight */
.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  color: var(--dx-text-secondary);
  font-weight: 500;
}

/* --- Tab overflow "..." menu (Stripe-style) ---
   JS (tab-overflow.js) sets overflow:visible once it measures.
   Until then, keep Material's scroll behaviour as a safe fallback. */
.md-tabs--overflow-ready .md-tabs__list {
  overflow: visible !important;
  scrollbar-width: none;
  white-space: nowrap;
}

.md-tabs--overflow-ready .md-tabs__list::-webkit-scrollbar {
  display: none;
}

.md-tabs .md-grid {
  overflow: visible !important;
  /* Material caps .md-grid at 61rem (1464px at our 150% base).
     With 11 tab items the total width can exceed this, pushing
     tabs into the overflow menu unnecessarily.

     Strategy: remove the max-width so tabs use the full viewport.
     Left padding aligns the first tab with the header logo (which
     sits inside Material's centered 61rem grid). Right padding is
     kept small so tabs can spread into the extra viewport width
     that the header grid doesn't use. */
  max-width: none !important;
  padding-left: max(0.2rem, calc((100% - 61rem) / 2)) !important;
  padding-right: 0.667rem !important;
}

/* Overflow trigger — a plain <div> (not <li class="md-tabs__item">)
   so Material's styles on .md-tabs__item can't interfere.
   Positioned absolutely within .md-tabs (position:relative).
   JS sets `left` dynamically to sit right after the last visible tab. */
.md-tabs__overflow-trigger {
  position: absolute !important;
  /* Match the tab link padding so the button sits on the same line as tab text */
  top: 0.5rem;                       /* same as .md-tabs__link padding-top */
  display: none;                     /* hidden by default — JS shows only when overflow exists */
  align-items: center;
  z-index: 10;
  margin: 0;
  padding: 0;
}

.md-tabs__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius);
  padding: 0 0.333rem;
  height: 0.833rem;           /* 20px — compact, sits inline with 14px tab text */
  cursor: pointer;
  color: var(--dx-text-secondary);
  transition: all var(--dx-transition);
  line-height: 1;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}

.md-tabs__more-btn:hover {
  border-color: #B8A9D4;
  color: var(--dx-text);
  background: var(--dx-bg-muted);
}

.md-tabs__more-btn:focus {
  outline: 2px solid var(--dx-indigo);
  outline-offset: 2px;
}

.md-tabs__more-btn svg {
  display: block;
  width: 0.583rem;           /* 14px — matches tab font size */
  height: 0.583rem;
  pointer-events: none;      /* clicks pass through to button */
}

/* Dropdown panel */
.md-tabs__dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.25rem;
  min-width: 10rem;
  background: var(--dx-bg);
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius-lg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 0.333rem 0;
  list-style: none;
  margin-bottom: 0;
  z-index: 100;
}

.md-tabs__overflow-trigger--open .md-tabs__dropdown {
  display: block;
}

.md-tabs__dropdown-item {
  margin: 0;
}

.md-tabs__dropdown-link {
  display: block;
  padding: 0.333rem 0.667rem;
  font-size: 0.583rem;     /* 14px */
  font-weight: 500;
  color: var(--dx-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--dx-transition);
}

.md-tabs__dropdown-link:hover {
  color: var(--dx-text);
  background: var(--dx-bg-muted);
}

.md-tabs__dropdown-link--active {
  color: var(--dx-text);
  font-weight: 600;
}

/* ==========================================================================
   Search — Dxtra dashboard-style command palette
   Matches the search bar in app.dxtra.ai
   ========================================================================== */

/* --- Trigger bar in header --- */
.md-search {
  max-width: 18rem !important;   /* ~432px — wider than Material default (~11.7rem) */
}

.md-search__form {
  background-color: var(--dx-bg) !important;
  border: 1px solid var(--dx-border) !important;
  border-radius: var(--dx-radius-lg) !important;
  height: 1.833rem !important;  /* 44px — matches dashboard bar */
  transition: border-color var(--dx-transition);
  box-shadow: none !important;
}

.md-search__form:hover {
  border-color: #B8A9D4;
}

.md-search__input {
  font-size: 0.625rem;         /* 15px */
  color: var(--dx-text);
  padding-left: 1.667rem;
  padding-right: 2.5rem;
  height: 1.833rem;
}

.md-search__input::placeholder {
  color: var(--dx-text-secondary);
  opacity: 1;
}

/* Search icon — always show magnifying glass, never show back arrow.
   Material swaps first-child (magnify) ↔ last-child (arrow-left) on mobile;
   we override to keep the search icon consistent across all breakpoints. */
.md-search__icon[for="__search"] {
  width: 0.833rem;
  height: 0.833rem;
  color: var(--dx-text-tertiary);
}

.md-search__icon[for="__search"] svg:first-child {
  display: block !important;
}

.md-search__icon[for="__search"] svg:last-child {
  display: none !important;
}

/* On mobile, show the back arrow when search is open so users can dismiss */
@media (max-width: 768px) {
  [data-md-toggle="search"]:checked ~ .md-header .md-search__icon[for="__search"] svg:first-child {
    display: none !important;
  }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__icon[for="__search"] svg:last-child {
    display: block !important;
  }
}

/* ⌘ K shortcut — plain text style (matches dashboard) */
.md-search__form::after {
  content: "⌘ K";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  font-family: var(--md-text-font-family, "Figtree", sans-serif);
  font-size: 0.542rem;         /* 13px */
  font-weight: 500;
  color: var(--dx-text-tertiary);
  pointer-events: none;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* Hide ⌘ K badge when search is open — prevents overlap with input text */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form::after {
  display: none !important;
}

/* --- Overlay --- */
[data-md-toggle="search"]:checked ~ .md-header .md-search__overlay {
  background-color: rgba(13, 9, 36, 0.38);
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  cursor: pointer;
}

/* Dim individual header elements when search is open.
   Can't use opacity on parent (.md-header__inner) because it would also
   dim the search modal. Target each sibling element individually instead. */
[data-md-toggle="search"]:checked ~ .md-header .md-header__button,
[data-md-toggle="search"]:checked ~ .md-header .md-header__title,
[data-md-toggle="search"]:checked ~ .md-header .md-header__option,
[data-md-toggle="search"]:checked ~ .md-header .md-header__topic,
[data-md-toggle="search"]:checked ~ .md-header .md-logo,
[data-md-toggle="search"]:checked ~ .md-header .md-tabs {
  opacity: 0.15 !important;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* --- Override Material's desktop inline-expand search ---
   Material uses position:relative + float:right + width expansion on ≥960px.
   We force a floating modal card on ALL screen sizes instead. */
.md-search__inner {
  float: none !important;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__inner {
  position: fixed !important;
  top: 4.5rem !important;             /* below header + tabs */
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 640px !important;
  max-width: 90vw !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border-radius: var(--dx-radius-lg) !important;
  box-shadow: 0 16px 70px rgba(0, 0, 0, 0.12),
              0 0 0 1px rgba(0, 0, 0, 0.05);
  background: var(--dx-bg) !important;
  overflow: hidden !important;
  height: auto !important;
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 4 !important;
  opacity: 1 !important;
}

/* Input bar inside modal */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-radius: var(--dx-radius-lg) var(--dx-radius-lg) 0 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--dx-border) !important;
  height: 2.333rem !important;  /* 56px */
  background: var(--dx-bg) !important;
  box-shadow: none !important;
  flex-shrink: 0;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__input {
  font-size: 0.667rem;         /* 16px */
  height: 2.333rem;
  padding-left: 2rem;
  padding-right: 2.5rem;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__input::placeholder {
  color: var(--dx-text-tertiary);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__icon[for="__search"] {
  color: var(--dx-text-tertiary);
  top: 0.6rem;
}

/* Clear / close buttons — position inside the taller modal input bar */
[data-md-toggle="search"]:checked ~ .md-header .md-search__options {
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Hide Material's share icon — not needed for docs search */
.md-search__icon.md-icon[title="Share"] {
  display: none !important;
}

.md-search__icon.md-icon[title="Clear"] {
  color: var(--dx-text-tertiary);
}

.md-search__icon.md-icon[title="Clear"]:hover {
  color: var(--dx-text);
}

/* --- Results area ---
   Material sets output to position:absolute which doesn't participate in
   flex layout. Override to static so the inner container grows to fit. */
[data-md-toggle="search"]:checked ~ .md-header .md-search__output {
  position: static !important;
  max-height: calc(80vh - 2.333rem);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--dx-bg);
  border-radius: 0 0 var(--dx-radius-lg) var(--dx-radius-lg);
}

.md-search__scrollwrap {
  background: var(--dx-bg);
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Force text wrapping inside search results */
.md-search-result {
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.md-search-result__list {
  max-width: 100%;
}

.md-search-result__article {
  overflow: hidden !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.md-search-result__teaser,
.md-search-result__title {
  white-space: normal !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Hide Material's search-suggest autocomplete ghost text */
.md-search__suggest {
  display: none !important;
}

/* Hide Material's default meta ("Type to start searching") */
.md-search-result__meta {
  display: none;
}

/* Result items — clean, no borders */
.md-search-result__item {
  border-bottom: none;
}

.md-search-result__link {
  padding: 0.5rem 0.833rem;
  transition: background var(--dx-transition);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.md-search-result__link:hover,
.md-search-result__link[data-md-state="active"] {
  background: var(--dx-bg-muted);
}

/* → arrow icon before each result (indigo, matches dashboard) */
.md-search-result__link::before {
  content: "→";
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 0.833rem;
  font-size: 0.667rem;
  color: var(--dx-indigo);
  font-weight: 400;
}

/* Result title */
.md-search-result__article--document .md-search-result__title {
  font-size: 0.583rem;
  font-weight: 600;
  color: var(--dx-text);
}

.md-search-result__article:not(.md-search-result__article--document) .md-search-result__title {
  font-size: 0.583rem;
  color: var(--dx-text);
}

/* Result teaser / description */
.md-search-result__teaser {
  font-size: 0.5rem;
  color: var(--dx-text-secondary);
  line-height: 1.45;
}

/* --- Empty-state prompt (injected by JS) --- */
.dxtra-search-prompt {
  padding: 0.833rem 1rem;
  font-size: 0.583rem;
  color: var(--dx-text-secondary);
  background: var(--dx-bg);
}

/* --- Suggestion links (empty state, injected by JS) --- */
.dxtra-search-suggestions {
  padding: 0;
  background: var(--dx-bg);
}

.dxtra-search-suggestions__heading {
  padding: 0.5rem 1rem 0.25rem;
  font-size: 0.458rem;         /* 11px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dx-text-tertiary);
}

.dxtra-search-suggestions__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dxtra-search-suggestions__item {
  margin: 0;
}

.dxtra-search-suggestions__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  font-size: 0.583rem;
  font-weight: 500;
  color: var(--dx-text);
  text-decoration: none;
  transition: background var(--dx-transition);
}

.dxtra-search-suggestions__link:hover {
  background: var(--dx-bg-muted);
  text-decoration: none;
}

/* Arrow prefix in suggestion links */
.dxtra-search-suggestions__link::before {
  content: "→";
  color: var(--dx-indigo);
  font-size: 0.583rem;
  flex-shrink: 0;
}

.dxtra-search-suggestions__desc {
  font-size: 0.5rem;
  color: var(--dx-text-tertiary);
  font-weight: 400;
  margin-left: 0.25rem;
}

/* ==========================================================================
   Links
   ========================================================================== */

.md-typeset a {
  color: var(--dx-link);
  text-decoration: none;
  border-bottom: none;
  transition: color var(--dx-transition);
}

.md-typeset a:hover {
  color: var(--dx-indigo-dark);
  text-decoration: underline;
}

/* ==========================================================================
   Buttons (Material)
   ========================================================================== */

.md-button {
  border-radius: var(--dx-radius);
  font-weight: 600;
  font-size: 0.583rem;   /* 14px */
  padding: 0.4rem 1rem;
  transition: all var(--dx-transition);
}

.md-button--primary {
  background-color: var(--dx-indigo);
  border-color: var(--dx-indigo);
  color: #fff;
}

.md-button--primary:hover {
  background-color: var(--dx-indigo-dark);
  border-color: var(--dx-indigo-dark);
}

/* ==========================================================================
   Announcement banner
   ========================================================================== */

.md-banner {
  background: var(--dx-bg-muted);
  border-bottom: 1px solid var(--dx-border);
}

.dxtra-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.35rem 1rem;
  font-size: 0.542rem;   /* 13px */
  color: var(--dx-text-secondary);
}

.dxtra-announce__content {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.dxtra-announce__badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
  font-size: 0.458rem;   /* 11px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--dx-indigo);
  color: #fff;
}

.dxtra-announce__link {
  color: var(--dx-indigo);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.dxtra-announce__link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

.dxtra-home {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* ---------- Hero — large title, dot grid ---------- */
.dxtra-hero {
  position: relative;
  padding: 3.5rem 2rem 2.5rem;
  overflow: hidden;
  background-color: var(--dx-bg);
}

/* Dot grid pattern — like Stripe's, positioned behind content */
.dxtra-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--dx-dot-color) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 55% 100% at 20% 50%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 55% 100% at 20% 50%, black 0%, transparent 70%);
}

.dxtra-hero__inner {
  position: relative;
  max-width: var(--dx-content-width);
  margin: 0 auto;
  padding-left: 40px;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.dxtra-hero__text {
  flex: 1;
  min-width: 0;
}

.dxtra-hero__title {
  font-size: 2.5rem;     /* 60px */
  font-weight: 600;
  color: var(--dx-text);
  letter-spacing: -0.035em;
  margin: 0 0 0.5rem;
  line-height: 1.15;
}

.dxtra-hero__subtitle {
  font-size: 1rem;       /* 24px */
  color: var(--dx-text-secondary);
  line-height: 1.55;
  margin: 0 0 1.25rem;
}

.dxtra-hero__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- Buttons (homepage) ---------- */
.dxtra-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 1rem;
  border-radius: var(--dx-radius);
  font-size: 0.625rem;   /* 15px */
  font-weight: 600;
  text-decoration: none;
  transition: all var(--dx-transition);
  cursor: pointer;
  border: none;
}

.dxtra-btn--primary,
.md-typeset .dxtra-btn--primary,
.md-typeset a.dxtra-btn--primary {
  background-color: var(--dx-indigo);
  color: #fff !important;
}

.dxtra-btn--primary:hover,
.md-typeset .dxtra-btn--primary:hover,
.md-typeset a.dxtra-btn--primary:hover {
  background-color: var(--dx-indigo-dark);
  box-shadow: 0 4px 14px rgba(49, 27, 146, 0.3);
  color: #fff !important;
  text-decoration: none;
}

.dxtra-btn__arrow {
  font-size: 1.1em;
  line-height: 1;
  margin-left: 0.1rem;
}

.dxtra-btn--ghost,
.md-typeset .dxtra-btn--ghost {
  background: transparent;
  color: var(--dx-text-secondary);
  font-weight: 500;
}

.dxtra-btn--ghost:hover,
.md-typeset .dxtra-btn--ghost:hover {
  color: var(--dx-indigo);
  text-decoration: none;
}

/* ---------- Sections ---------- */
.dxtra-section {
  padding: 1.125rem 2rem;
}

.dxtra-section--muted {
  background-color: var(--dx-bg-muted);
  border-top: 1px solid var(--dx-border);
  border-bottom: 1px solid var(--dx-border);
}

.dxtra-section__inner {
  max-width: var(--dx-content-width);
  margin: 0 auto;
  padding: 0 40px;
}

.dxtra-section__heading {
  font-size: 0.833rem;   /* 20px */
  font-weight: 600;
  color: var(--dx-text);
  margin: 0 0 0.25rem;
  letter-spacing: -0.025em;
}

.dxtra-section__subtitle {
  color: var(--dx-text-secondary);
  font-size: 0.625rem;   /* 15px */
  margin: 0 0 1.25rem;
}

/* ---------- Product categories — Stripe four-column links ---------- */
.dxtra-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  padding-top: 0;
}

.dxtra-product__title {
  font-size: 0.667rem;   /* 16px */
  font-weight: 600;
  color: var(--dx-text);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.dxtra-product__title a,
.md-typeset .dxtra-product__title a {
  color: inherit;
  text-decoration: none;
}

.dxtra-product__title a:hover,
.md-typeset .dxtra-product__title a:hover {
  color: var(--dx-indigo);
}

.dxtra-product__links,
.md-typeset .dxtra-product__links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.333rem;
}

.dxtra-product__links li::before {
  display: none;
  content: none;
}

.md-typeset .dxtra-product__links li {
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
}

.md-typeset .dxtra-product__links li::before {
  display: none;
  content: none;
}

.dxtra-product__links a,
.md-typeset .dxtra-product__links a {
  color: var(--dx-link);
  text-decoration: none;
  font-size: 0.583rem;   /* 14px */
  font-weight: 400;
  transition: color var(--dx-transition);
}

.dxtra-product__links a:hover,
.md-typeset .dxtra-product__links a:hover {
  color: var(--dx-indigo-dark);
  text-decoration: underline;
}

/* ---------- Workflow cards ---------- */
.dxtra-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.dxtra-card,
.md-typeset .dxtra-card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--dx-bg);
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all var(--dx-transition);
}

.dxtra-card:hover,
.md-typeset .dxtra-card:hover {
  border-color: #B8A9D4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.dxtra-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.667rem;        /* 40px */
  height: 1.667rem;       /* 40px */
  margin-bottom: 0.5rem;
  border-radius: var(--dx-radius);
  background: var(--dx-indigo-bg);
  color: var(--dx-indigo);
}
.dxtra-card__icon svg {
  width: 0.917rem;        /* 22px */
  height: 0.917rem;       /* 22px */
  flex-shrink: 0;
}

.dxtra-card__title {
  font-size: 0.625rem;   /* 15px */
  font-weight: 600;
  color: var(--dx-text);
  margin: 0 0 0.25rem;
}

.dxtra-card__desc {
  font-size: 0.583rem;   /* 14px */
  color: var(--dx-text-secondary);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.dxtra-card__link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.583rem;   /* 14px */
  font-weight: 600;
  color: var(--dx-link);
}

.dxtra-card:hover .dxtra-card__link {
  text-decoration: underline;
}

/* Featured workflow card variant — subtle highlight */
.dxtra-card--featured {
  border-color: var(--dx-indigo);
  position: relative;
}

.dxtra-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.dxtra-card__header .dxtra-card__icon {
  margin-bottom: 0;
}

.dxtra-card__badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
  font-size: 0.458rem;       /* 11px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #f97316;
  color: #fff;
}

/* ---------- Persona paths ---------- */
.dxtra-personas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.667rem;
}

.dxtra-persona,
.md-typeset .dxtra-persona {
  display: flex;
  align-items: center;
  gap: 0.667rem;
  padding: 0.75rem 1rem;
  background: var(--dx-bg);
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all var(--dx-transition);
}

.dxtra-persona:hover,
.md-typeset .dxtra-persona:hover {
  border-color: #B8A9D4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
}

.dxtra-persona__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;           /* 36px */
  height: 1.5rem;          /* 36px */
  border-radius: var(--dx-radius);
  background: var(--dx-indigo-bg);
  color: var(--dx-indigo);
  flex-shrink: 0;
}
.dxtra-persona__icon svg {
  width: 0.833rem;         /* 20px */
  height: 0.833rem;        /* 20px */
}

.dxtra-persona__title {
  font-size: 0.625rem;   /* 15px */
  color: var(--dx-text);
}

.dxtra-persona__desc {
  font-size: 0.542rem;   /* 13px */
  color: var(--dx-text-secondary);
  margin: 0.1rem 0 0;
  line-height: 1.4;
}

.dxtra-persona__arrow {
  display: flex;
  align-items: center;
  margin-left: auto;
  color: var(--dx-text-tertiary);
  flex-shrink: 0;
}
.dxtra-persona__arrow svg {
  width: 0.75rem;          /* 18px */
  height: 0.75rem;         /* 18px */
}

.dxtra-persona:hover .dxtra-persona__arrow {
  color: var(--dx-indigo);
}

/* ---------- Hero search (R1) ---------- */
.dxtra-hero__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 420px;
  margin-bottom: 1.25rem;
  padding: 0.45rem 0.75rem;
  background: var(--dx-bg);
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius-lg);
  transition: border-color var(--dx-transition), box-shadow var(--dx-transition);
}

.dxtra-hero__search:focus-within {
  border-color: var(--dx-indigo);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.dxtra-search__label {
  display: flex;
  align-items: center;
  color: var(--dx-text-tertiary);
  flex-shrink: 0;
}

.dxtra-search__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.625rem;     /* 15px */
  color: var(--dx-text);
  font-family: inherit;
}

.dxtra-search__input::placeholder {
  color: var(--dx-text-tertiary);
}

/* ---------- Hero product description (A2) ---------- */
.dxtra-hero__product-desc {
  font-size: 0.833rem;     /* 20px */
  color: var(--dx-text-tertiary);
  line-height: 1.6;
  margin: 0 0 1rem;
}

/* ---------- Hero tutorial card (right column) ---------- */
.dxtra-hero__card,
.md-typeset .dxtra-hero__card {
  display: flex;
  flex-direction: column;
  width: 280px;
  flex-shrink: 0;
  padding: 1.25rem;
  background: var(--dx-bg);
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius-lg);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(49, 27, 146, 0.06);
  transition: all var(--dx-transition);
}

.dxtra-hero__card:hover,
.md-typeset .dxtra-hero__card:hover {
  border-color: var(--dx-indigo);
  box-shadow: 0 6px 20px rgba(49, 27, 146, 0.1);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.dxtra-hero__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.dxtra-hero__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.667rem;
  height: 1.667rem;
  border-radius: var(--dx-radius);
  background: var(--dx-indigo-bg);
  color: var(--dx-indigo);
}

.dxtra-hero__card-icon svg {
  width: 0.917rem;
  height: 0.917rem;
}

.dxtra-hero__card-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
  font-size: 0.458rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #f97316;
  color: #fff;
}

.dxtra-hero__card-title {
  font-size: 0.708rem;
  font-weight: 600;
  color: var(--dx-text);
  margin: 0 0 0.333rem;
}

.dxtra-hero__card-desc {
  font-size: 0.583rem;
  color: var(--dx-text-secondary);
  line-height: 1.55;
  margin: 0 0 0.667rem;
  flex: 1;
}

.dxtra-hero__card-link {
  font-size: 0.583rem;
  font-weight: 600;
  color: var(--dx-link);
}

.dxtra-hero__card:hover .dxtra-hero__card-link {
  text-decoration: underline;
}

/* ---------- Stats bar (R6) ---------- */
.dxtra-stats-bar {
  background: var(--dx-bg-muted);
  border-top: 1px solid var(--dx-border);
  border-bottom: 1px solid var(--dx-border);
  padding: 0.75rem 2rem;
}

.dxtra-stats-bar__inner {
  max-width: var(--dx-content-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.dxtra-stat {
  font-size: 0.583rem;     /* 14px */
  color: var(--dx-text-secondary);
  white-space: nowrap;
}

.dxtra-stat strong {
  font-size: 0.792rem;     /* 19px */
  font-weight: 700;
  color: var(--dx-indigo);
  display: block;
  letter-spacing: -0.02em;
}

/* ---------- Featured tutorial card (R2) ---------- */
.dxtra-featured__card,
.md-typeset .dxtra-featured__card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, rgba(20, 184, 166, 0.04) 100%);
  border: 1px solid var(--dx-indigo);
  border-radius: var(--dx-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all var(--dx-transition);
}

.dxtra-featured__card:hover,
.md-typeset .dxtra-featured__card:hover {
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.1);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}

.dxtra-featured__badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  font-size: 0.458rem;     /* 11px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #f97316;
  color: #fff;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.15rem;
}

.dxtra-featured__content {
  flex: 1;
}

.dxtra-featured__title {
  font-size: 0.667rem;     /* 16px */
  font-weight: 600;
  color: var(--dx-text);
  margin: 0 0 0.2rem;
}

.dxtra-featured__desc {
  font-size: 0.583rem;     /* 14px */
  color: var(--dx-text-secondary);
  line-height: 1.55;
  margin: 0;
}

.dxtra-featured__link {
  font-size: 0.583rem;     /* 14px */
  font-weight: 600;
  color: var(--dx-link);
  white-space: nowrap;
  flex-shrink: 0;
}

.dxtra-featured__card:hover .dxtra-featured__link {
  text-decoration: underline;
}

/* ---------- Changelog / What's new (R4) ---------- */
.dxtra-changelog {
  display: flex;
  flex-direction: column;
  gap: 0.333rem;
  margin-bottom: 0.75rem;
}

.dxtra-changelog__entry {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.583rem;     /* 14px */
  line-height: 1.5;
}

.dxtra-changelog__date {
  font-weight: 600;
  color: var(--dx-text-tertiary);
  min-width: 3rem;
  flex-shrink: 0;
  font-size: 0.542rem;     /* 13px */
}

.dxtra-changelog__text {
  color: var(--dx-text-secondary);
}

.dxtra-changelog__link,
.md-typeset .dxtra-changelog__link {
  font-size: 0.583rem;     /* 14px */
  font-weight: 600;
  color: var(--dx-link);
  text-decoration: none;
}

.dxtra-changelog__link:hover,
.md-typeset .dxtra-changelog__link:hover {
  text-decoration: underline;
}

/* ---------- Support callout (R8) ---------- */
.dxtra-support {
  text-align: center;
  padding: 0.25rem 0;
}

.dxtra-support__text {
  font-size: 0.583rem;     /* 14px */
  color: var(--dx-text-secondary);
  margin: 0;
}

.dxtra-support__text a,
.md-typeset .dxtra-support__text a {
  color: var(--dx-link);
  font-weight: 500;
  text-decoration: none;
}

.dxtra-support__text a:hover,
.md-typeset .dxtra-support__text a:hover {
  text-decoration: underline;
}

/* ---------- Responsive: homepage new elements ---------- */
@media (max-width: 768px) {
  .dxtra-personas {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .dxtra-personas {
    grid-template-columns: 1fr;
  }
  .dxtra-personas {
    grid-template-columns: 1fr;
  }

  .dxtra-stats-bar__inner {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
  }

  .dxtra-stat {
    flex: 0 0 45%;
  }

  .dxtra-featured__card,
  .md-typeset .dxtra-featured__card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Footer ---------- */
.dxtra-footer {
  border-top: 1px solid var(--dx-border);
  background: var(--dx-bg);
}

/* Links row — Site, Status, Changelog, Support, Legal */
.dxtra-footer__links {
  padding: 0.875rem 2rem 0.625rem;
}

.dxtra-footer__links-inner {
  max-width: 61rem;          /* match .md-grid used by header */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.833rem;             /* 20px — tighter spacing */
}

.dxtra-footer__links a,
.md-typeset .dxtra-footer__links a {
  font-size: 0.583rem;     /* 14px */
  font-weight: 500;
  color: var(--dx-text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  transition: color var(--dx-transition);
}

.dxtra-footer__links a:hover,
.md-typeset .dxtra-footer__links a:hover {
  color: var(--dx-indigo);
  text-decoration: none;
}

.dxtra-footer__links a svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.dxtra-footer__links a:hover svg {
  opacity: 1;
}

/* Bottom bar — favicon + copyright + legal links
   Proportions matched to dxtra.ai footer */
.dxtra-footer__bottom {
  padding: 0.5rem 2rem 0.75rem;
}

.dxtra-footer__bottom-inner {
  max-width: 61rem;          /* match .md-grid used by header */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dxtra-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.667rem;           /* 16px */
}

.dxtra-footer__icon {
  height: 1.667rem;        /* 40px — matches dxtra.ai footer icon */
  width: auto;
  display: block;
}

.dxtra-footer__copyright {
  font-size: 0.625rem;     /* 15px — matches dxtra.ai footer text */
  color: var(--dx-text);
}

.dxtra-footer__legal {
  display: flex;
  align-items: center;
  gap: 1rem;                 /* 24px — balanced with top row */
}

.dxtra-footer__legal a,
.md-typeset .dxtra-footer__legal a {
  font-size: 0.625rem;     /* 15px — matches dxtra.ai footer links */
  color: var(--dx-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color var(--dx-transition);
}

.dxtra-footer__legal a:hover,
.md-typeset .dxtra-footer__legal a:hover {
  color: var(--dx-indigo);
  text-decoration: none;
}

.dxtra-footer__legal a svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.dxtra-footer__legal a:hover svg {
  opacity: 1;
}

/* ==========================================================================
   Content pages
   ========================================================================== */

/* Code — Space Mono specific */
.md-typeset code {
  background-color: var(--dx-bg-muted);
  color: var(--dx-text);
  padding: 0.1rem 0.25rem;
  border-radius: 4px;
  font-size: 0.85em;
  border: 1px solid var(--dx-border);
}

.md-typeset pre > code {
  background-color: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  border: none;
  padding: 0;
}

/* Admonitions */
.md-typeset .admonition {
  border: 1px solid var(--dx-border);
  border-left: 4px solid var(--dx-indigo);
  border-radius: var(--dx-radius);
  background-color: var(--dx-bg);
  box-shadow: none;
}

.md-typeset .admonition.tip {
  border-left-color: #10b981;
}

.md-typeset .admonition.warning {
  border-left-color: #f59e0b;
}

.md-typeset .admonition.danger,
.md-typeset .admonition.important {
  border-left-color: #ef4444;
}

/* Tables */
.md-typeset table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.583rem;   /* 14px */
}

.md-typeset th {
  font-weight: 600;
  color: var(--dx-text);
  border-bottom: 2px solid var(--dx-border);
  text-align: left;
  padding: 0.5rem 0.667rem;
  background: transparent;
}

.md-typeset td {
  padding: 0.5rem 0.667rem;
  border-bottom: 1px solid var(--dx-border);
}

.md-typeset tbody tr:hover {
  background-color: var(--dx-bg-muted);
}

/* ---------- Last updated badge ---------- */
.dxtra-last-updated {
  font-size: 0.542rem;   /* ~13px */
  color: var(--dx-text-tertiary);
  margin-bottom: 0.25rem;
  letter-spacing: 0.01em;
}

/* ---------- Screenshot figcaptions ---------- */
.md-typeset figcaption {
  font-size: 0.542rem;   /* ~13px */
  color: var(--dx-text-secondary);
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  font-style: italic;
}

/* Sidebar */
.md-nav__link {
  font-size: 0.583rem;   /* 14px */
}

.md-nav__link--active {
  color: var(--dx-indigo) !important;
  font-weight: 600;
}

/* Nav section titles (active) */
.md-nav--primary > .md-nav__title {
  color: var(--dx-indigo);
}

/* ==========================================================================
   Mobile navigation drawer (Stripe-style)
   Full-screen overlay with drill-down nav, search, back buttons.
   Only visible ≤768px — tabs handle navigation above that.
   ========================================================================== */

/* Overlay backdrop */
.dxtra-mobile-nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  opacity: 0;
  transition: opacity 200ms ease;
}
.dxtra-mobile-nav__overlay--open {
  display: block;
  opacity: 1;
}

/* Drawer panel — full screen, slides from left */
.dxtra-mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--dx-bg);
  z-index: 1000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dxtra-mobile-nav--open {
  display: block;
  transform: translateX(0);
}

/* Header — close button + "Home" */
.dxtra-mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.667rem;
  border-bottom: 1px solid var(--dx-border);
  min-height: 2rem;
}

.dxtra-mobile-nav__close {
  display: inline-flex;
  align-items: center;
  gap: 0.333rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--dx-text);
  padding: 0.333rem 0;
  -webkit-appearance: none;
  appearance: none;
}
.dxtra-mobile-nav__close svg {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}
.dxtra-mobile-nav__home-label {
  font-weight: 600;
}

/* Search bar */
.dxtra-mobile-nav__search {
  position: relative;
  padding: 0.667rem;
}
.dxtra-mobile-nav__search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dx-text-tertiary);
  display: flex;
  pointer-events: none;
}
.dxtra-mobile-nav__search-icon svg {
  width: 0.625rem;
  height: 0.625rem;
}
.dxtra-mobile-nav__search-input {
  width: 100%;
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius);
  padding: 0.417rem 0.667rem 0.417rem 1.5rem;
  font-family: inherit;
  font-size: 0.583rem;
  color: var(--dx-text);
  background: var(--dx-bg);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color var(--dx-transition);
}
.dxtra-mobile-nav__search-input:focus {
  border-color: var(--dx-indigo);
}
.dxtra-mobile-nav__search-input::placeholder {
  color: var(--dx-text-tertiary);
}

/* Nav body (item container) */
.dxtra-mobile-nav__body {
  padding: 0;
}
.dxtra-mobile-nav__body--slide-in {
  animation: dxtra-slide-in 200ms ease-out;
}
@keyframes dxtra-slide-in {
  from { opacity: 0; transform: translateX(1.5rem); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Back button */
.dxtra-mobile-nav__back {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.583rem 0.667rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--dx-border);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--dx-text);
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.dxtra-mobile-nav__back svg {
  width: 0.583rem;
  height: 0.583rem;
  flex-shrink: 0;
  color: var(--dx-text-secondary);
}

/* Nav list */
.dxtra-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav items */
.dxtra-mobile-nav__item {
  border-bottom: 1px solid var(--dx-border);
}
.dxtra-mobile-nav__item:last-child {
  border-bottom: none;
}

/* Nav links & parent buttons */
.dxtra-mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.583rem 0.667rem;
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--dx-text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 100ms ease;
}
.dxtra-mobile-nav__link:hover,
.dxtra-mobile-nav__link:active {
  background: var(--dx-bg-muted);
}
.dxtra-mobile-nav__link--parent svg {
  width: 0.583rem;
  height: 0.583rem;
  color: var(--dx-text-tertiary);
  flex-shrink: 0;
}

/* Hide Material's built-in drawer completely on mobile when our
   custom drawer is available */
@media (max-width: 768px) {
  .md-sidebar--primary {
    display: none !important;
  }
  /* Let hamburger show via Material's own breakpoint,
     but we intercept its click in JS */
  .md-header__button[for="__drawer"] {
    display: inline-block !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* --- Tablet (≤960px) --- */
@media (max-width: 960px) {
  .dxtra-hero {
    padding: 2.5rem 1.5rem 2rem;
  }

  .dxtra-hero__inner {
    padding-left: 0;
  }

  .dxtra-hero__title {
    font-size: 1.583rem;  /* 38px */
  }

  .dxtra-section__inner {
    padding: 0;
  }

  .dxtra-footer__links {
    padding: 0.75rem 1.5rem 0.5rem;
  }

  .dxtra-footer__links-inner,
  .dxtra-footer__bottom-inner {
    padding: 0;
  }

  .dxtra-footer__links-inner {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.667rem;
  }

  .dxtra-footer__bottom {
    padding: 0.5rem 1.5rem 0.75rem;
  }

  .dxtra-products {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .dxtra-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .dxtra-personas {
    grid-template-columns: 1fr;
  }
}

/* --- Small tablet / large phone (≤768px) --- */
@media (max-width: 768px) {
  /* Hide tabs on small screens — use hamburger nav instead */
  .md-tabs {
    display: none !important;
  }

  .dxtra-footer__bottom-inner {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .dxtra-footer__legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    order: -1;
  }

  .dxtra-footer__links-inner {
    justify-content: center;
  }

  .dxtra-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .dxtra-hero__card {
    width: 100%;
    max-width: 400px;
  }

  /* Search modal adapts to narrower screens */
  [data-md-toggle="search"]:checked ~ .md-header .md-search__inner {
    width: calc(100vw - 2rem) !important;
    top: 2rem !important;
  }
}

/* --- Phone (≤600px) --- */
@media (max-width: 600px) {
  .dxtra-hero {
    padding: 2rem 1.25rem 1.5rem;
  }

  .dxtra-hero__inner {
    padding-left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .dxtra-hero__card {
    width: 100%;
  }

  .dxtra-hero__title {
    font-size: 1.333rem;  /* 32px */
  }

  .dxtra-hero__subtitle {
    font-size: 0.917rem;  /* 22px */
  }

  .dxtra-section {
    padding: 1rem 1.25rem;
  }

  .dxtra-products {
    grid-template-columns: 1fr;
  }

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

  .dxtra-footer__links {
    padding: 0.667rem 1.25rem;
  }

  .dxtra-footer__links-inner {
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
  }

  .dxtra-footer__bottom {
    padding: 0.5rem 1.25rem 0.75rem;
  }

  .dxtra-footer__bottom-inner {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    padding: 0;
  }

  .dxtra-footer__icon {
    height: 1.333rem;     /* 32px — scale down on mobile */
  }

  .dxtra-footer__copyright {
    font-size: 0.542rem;  /* 13px */
  }

  .dxtra-footer__legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.333rem 0.667rem;
    order: -1;
  }

  .dxtra-footer__legal a,
  .md-typeset .dxtra-footer__legal a {
    font-size: 0.542rem;  /* 13px */
  }

  .dxtra-announce {
    flex-direction: column;
    gap: 0.333rem;
    text-align: center;
    padding: 0.35rem 0.75rem;
    font-size: 0.5rem;    /* 12px */
  }

  /* Search modal — full-width on phone */
  [data-md-toggle="search"]:checked ~ .md-header .md-search__inner {
    width: calc(100vw - 1.5rem) !important;
    top: 1rem !important;
    max-height: 85vh !important;
    border-radius: var(--dx-radius) !important;
  }

  /* Search suggestions — tighter padding on phone */
  .dxtra-search-suggestions__link {
    padding: 0.333rem 0.75rem;
  }
}

/* --- Small phone (≤400px) --- */
@media (max-width: 400px) {
  .dxtra-hero__title {
    font-size: 1.167rem;  /* 28px */
  }

  .dxtra-hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .dxtra-card {
    padding: 0.75rem;
  }

  .dxtra-persona {
    padding: 0.5rem 0.75rem;
  }

  .dxtra-footer__links a,
  .md-typeset .dxtra-footer__links a {
    font-size: 0.5rem;    /* 12px */
  }
}

/* ---------- Content type taxonomy badges ---------- */
.dxtra-content-type-badge {
  display: inline-block;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
  border-radius: 0.15rem;
  margin-bottom: 0.25rem;
  font-family: var(--dx-font-text, "Figtree", sans-serif);
}

.dxtra-content-type-badge--guide {
  background: #E8F5E9;
  color: #2E7D32;
}

.dxtra-content-type-badge--concept {
  background: #E3F2FD;
  color: #1565C0;
}

.dxtra-content-type-badge--reference {
  background: var(--dx-indigo-bg, #EDE7F6);
  color: var(--dx-indigo, #311B92);
}

.dxtra-content-type-badge--tutorial {
  background: #FFF3E0;
  color: #E65100;
}

[data-md-color-scheme="slate"] .dxtra-content-type-badge--guide {
  background: #1B5E20;
  color: #C8E6C9;
}

[data-md-color-scheme="slate"] .dxtra-content-type-badge--concept {
  background: #0D47A1;
  color: #BBDEFB;
}

[data-md-color-scheme="slate"] .dxtra-content-type-badge--reference {
  background: #311B92;
  color: #D1C4E9;
}

[data-md-color-scheme="slate"] .dxtra-content-type-badge--tutorial {
  background: #BF360C;
  color: #FFE0B2;
}

/* Print */
@media print {
  .dxtra-announce,
  .md-header,
  .md-nav,
  .md-footer,
  .dxtra-footer {
    display: none;
  }
}

/* ===================================
   Mermaid diagrams (ported from dx-docs)
   =================================== */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon {
  fill: #ede7f6 !important;
  stroke: var(--dx-indigo) !important;
  stroke-width: 2px !important;
}

.mermaid .node.default.perimeter {
  fill: var(--dx-accent) !important;
}

.mermaid .edgeLabel {
  background-color: #fff !important;
  color: var(--dx-text) !important;
}

.mermaid .flowchart-link {
  stroke: var(--dx-indigo) !important;
  stroke-width: 2px !important;
}

[data-md-color-scheme="slate"] .mermaid .edgeLabel {
  background-color: var(--dx-bg) !important;
  color: var(--dx-text) !important;
}

[data-md-color-scheme="slate"] .mermaid .node rect,
[data-md-color-scheme="slate"] .mermaid .node circle,
[data-md-color-scheme="slate"] .mermaid .node polygon {
  fill: #1a1145 !important;
}